With the Serial Monitor - No Upload, Instant Display Prototyping - Magic

imagine yourself waiting for your code to compile and upload just to see if those minor tweaks to your graphical design are showing correctly on your display that's not quite right okay you just have to change some parameters in your graphics functions and wait again for the compiler in upload process to reveal the results now it's getting better but there should be a more efficient way right now picture yourself changing your design and playing with the parameters of graphic functions while seeing the results in real time on your display yes you're seeing that correctly I'm using the serial monitor to send graphical commands and interact with my display in real time eliminating the need for compile and upload weights I can prototype my designs quickly and effortlessly I achieve this by using the fast display prototyping Library it supports any display is compatible with the Adafruit gfx or TFT SPI libraries I used it to prototype my Star Wars tactical display with lightning speed in this video I guide you through everything you need to know to start using the fast display prototyping Library I've broken the content down into chapters and I recommend watching them all as I'll be sharing valuable tips throughout the video to enhance your prototyping experience while demonstrating the full range of graphical commands available at your fingertips in the serial monitor so let's get started and transform your design process with the fast display prototyping Library to install the library you go to my GitHub repository and I've put the link in the video description so you're going to land on this site which is an open source project so the library is free of charge and you can even contribute if you want so you go here on the right side under the release section you're going to see at the time of recording this was version 1.2.4 and as you watch it it's it's probably a higher version but that's not a problem so you click on the latest version and you're going to download the latest zip file so you click on the source code ZIP file and it's going to download the zip file into your download folder so the next thing you have to do is open your Arduino IDE and to install the library you go to the sketch menu include Library add zip Library and you're going to open the library you just downloaded so it will be fast display prototyping it's a zip file you click open and it's going to be installed so now the Arduino ID has installed the library and it's ready to be used once the library is installed we have two examples provided with the library to get you started at prototyping so you go into file examples and under fast display prototyping you have two choices so if your display is supported by Adafruit gfx you can choose this example and if your display is supported by the TFT SPI Library you choose this example the TFT SPI in my case I'm going to start the demonstration of the library with a 2.4 inch TFT LCD display that is supported by Adafruit gfx and it comes with the in the form of a shield that I installed into an Arduino Uno so I'm going to select this example okay perfect this is the Adafruit gfx example and obviously at the top we need to include the Adafruit gfx Library and this is the section here that is specific to the type of display that you're going to use with the library so in my case I'm using for the demonstration the TFT LCD Shield display so this is the lines of code that I need to add to be able to use the display so you need to change that based on the type of display that you're going to use so that's the only part of the example that you need to change so after that we initialize the fast prototyping Library and in the setup function we initialize the serial communication and since I'm using an Arduino Uno it is set at 9600. and in the main Loop function this line of code is very important it is where the library is reading what you will send through the serial monitor to the Arduino and draw the shape on the display according to the command that you send through the serial monitor this is my setup for the demonstration so you see my LCD screen on the right and I'm going to upload the example to the Arduino so by uploading the example I'm actually uploading the library that we're gonna use I'm will I will open the serial monitor and make sure in the serial monitor that the no line ending here is selected now let's try our first command let's print a text to the the screen so the command to print the text is TT so let's print hello world sweater word is printed and you see that here on the serial monitor the actual command to print the yellow word text is outputted on the serial monitor so later on the video I'm going to show you how to reuse this in your code so now let's change the size of the font which is the command TS let's change it to a size of two I hit enter to send a command and let's let's print again the hello world text so hello world so now it's much bigger and you see that the cursor is moving so let's move the cursor with the command SC 2 column 0 line 100 with the SC command I hit enter and now instead of writing again the TT command to print the yellow world what you can do actually is use the arrow key and scroll through the pass command that you enter so using the arrow keys in the serial monitor I can't go back to pass command that I entered into the input of the serial Monitor and send them again by hitting enter so this time the other world is uh written on at line 100 on the screen so let's change the color of the text by using the command hashtag and let's print a blue color so zero zero one f these are color codes that are in RGB 565 format and there is a great website that gives you all the color codes for every colors so I've put the link in the video description you don't have to remember all those codes so let's change it to 0 0 1 f is blue so let's send it to the Arduino and three reprint again the L word text so now it's in blue so let's clear this the screen with the command X and let's draw a line this time the command is DL so from position 0 0 2 position 240 to 320 which is actually the size of the screen so a line is drawn on the screen and since we set the color to Blue the line is in the blue color and as you saw the format of the command are two letters mostly two letters and after the two letters we have the actual parameters of the graphic function so you see here it's draw line and the parameters and here we have to specify the actual color when we use the function draw line into the code but with the library you don't have to specify it again it's reusing the color that you set with the hashtag the hashtag function this one now that's a good way to test colors using the hashtag so let's say for example I want to have my line red so I use the hashtag to change the color so red is F800 I scroll again to draw the line to uh go to the command to draw a line in the serial monitor using the arrows keys I reset it and this time my line is red so I can do it again let's see yellow which is ffe0 draw the line again by using the arrow keys I scroll back to the command reset it and this time it's yellow now as we go through all the commands available within the library I'm showing at the bottom the actual documentation of the comment but you don't have to take any notes on that every comment is well documented on my GitHub repository the link is in the video description so after the video you can go check out all the documentation and try every functions that you want for your prototyping project now here is the fastest way to have the width and the height of the screen so when I draw the line using the command d l so 0 0 I specify the actual size of my screen so instead of doing that the library there is a shortcut so instead of specifying the the actual width in numbers you can replace it with the w letter and for the height H so what the library will be doing is replace W and H with the actual width and height of this of your screen so let's first clear the screen and type the command draw a line with the width and I parameters so it's replacing W and H with the actual width and height of your screen so you can see here the real numbers are output to the serial monitor so you saw me sending command two commands sequentially so first the clear screen command and after that the draw line come in but you can combine those by using a coma so for example I can specify clear screen and after that the draw line command and sending both of them both both of them at once to the Arduino so the library will first clear the screen and draw the line and you can even enter another command at the end of the of the text by let's say another line and let's see this time the height would be 150 so it's drawing two lines clearing the screen draw the first line and draw the second line so you can combine them like this by using comma so this is very powerful let's say for example I want to draw the first line blue so what I what I can do in uh in this series of command is after clearing the screen I can change the color to Blue so blue is zero zero one f and don't forget to put a comma so clear the screen color blue draw the line that will be blue and after drawing the the first line I can change the color to draw the second line let's say red so red is f80 Akuma and let's send that to the uh to the Arduino so my first line is blue and the second one is red there's a command to draw a horizontal line so the command is LH and let's say we want to be at position 10 10 and you have to specify the the actual length of the line so let's say we want a length of 75 so it's drawing a horizontal line and you also have the command for the vertical line so it's the command is LV so LV let's say we want it to be at position um 100 50 with a length of 100 so it's drawing a vertical line on the screen now we can also draw circles so let's first clear the screen and the command to draw a circle is ch let's say we wanted at position um 100 100 and the radius of the circle 100 so by using the prototyping Library I can just try to for example if my circle is not the right size I can simply go here and change the radius let's say to 50. so I can I can adjust my my design by just changing the parameters and see if if this goes well with what I want so you can play with the different parameters very very quickly and try many things so if I want to draw a circle a circle in the center of the screen what I I can do is let's clear the screen and use the command CH so if instead of calculating what is the middle height and the middle width I can use the shortcut M which is the middle width and C which is the middle height and let's say I want a radius of 75 so my circle will be positioned at the center of the screen so again it's m to replace the middle width and C to replace the middle I so again you don't have to memorize all of this and everything is documented on my GitHub repository the C and M that you can replace in every parameter of any functions that is supported by the fast prototyping Library is documented on the GitHub repository for the library now let's draw a field Circle so the command is CF let's join it at the center so m c and a radius of 5 so we have a red filled Circle and let's say we want to change the color to uh blue so I can go back in my command list and with the arrows keys and with the hashtag change it to the blue color and I separate the command with Kuma enter and now my field circle is blue I can draw rectangles so let's say the command to draw a rectangle is Rh position let's say 20 20. with the width of 100 and a height of 25 and I can also draw a filled Circle the command is RF let's say position 20 at 50 a width of 108 of 25 so we are prototyping it it's the old idea of the uh of the library I can go back to my command and change the color of the of the field rectangle and change it for example to let's say color red F800 and I separate the command with a comma resend it and this time my rectangle is red now we can also draw a rounded Corner rectangle so let's draw one that will be orange so the color will be FB zero and the command to draw around the rectangle is RI let's say we want it at 100 with a width of 25 and a height of 100 and you have to specify the radius of the corner so let's say five and we can also draw a field rounded with rectangle so this time the command is RJ so you I can go back in my command list and replace the ri with RJ and let's see this time I wanted yellow so FF b0 and finally with the Adafruit gfx Library I can also draw triangles this is the two last functions an outline of a triangle and a fill triangle so to do an outline of a triangle the command is GH and you have to specify three the three position of the vertices of the triangle so 10 10 100 100 and let's see 110 and 10 so this is the three vertices so it's drawing a yellow rectangle and I can draw a field triangle and the command is GF so I can go back in my command list with the arrow keys replace the H with the left to draw a filled triangle now before jumping to the demonstration of the commands for the TFT espi Library we have to look at the example so we just saw the example for the Adafruit gfx now let's open again the examples menu go to the fast display prototyping and this time we're going to choose the TFT espi example now the driver management for the TFT espi library is a little bit easier than with theater through gfx basically you don't have to modify this example but you have to modify the user setup select header file where the driver for your display must be configured here is how to do it first you have to go to your documents folder on your PC and you will see the Arduino folder open it and in the Arduino folder you will you will have the libraries folder open this one and locate the TFT espi folder open it now you're going to set the bottom of the folder the user setup select you have to open this file you cannot edit it in the Arduino IDE so you have to edit it outside the Arduino IDE you can use for example notepad so I'm going to open it in notepad so here is my user setup select header file and in that editor file you have a lot of display drivers that are compatible with the TFT SPI Library so you have to locate your particular driver and uncomment the line of your driver to activate it in my case I'm using a driver called the st7735 for my little display so I have uncommented this line and that's all there is to it okay we're back at the example and we didn't have to touch it but we've set it set up our display driver in the user setup select header file so in this demonstration I focus only on the commands unique to the TFT SPI Library and I'm going to use the small 1.4 inch TFT LCD display with an ESP microcontroller alright the TFT espi example is uploaded to my esp32 microcontroller and the library is ready to be used you see on the right my small 1.4 inch TFT TFT SCD display and we're going to look at Graphics command exclusive to the TFT espi Library which offers more advanced features compared to the other fruit gfx Library but keep in mind that all the serial commands demonstrated in the previous chapter are also applicable to the TFT SPI Library so draw Circle fill rectangle draw a line they are all applicable and you can use them let's open the serial monitor and make sure the no line ending is selected and the first command is draw smooth recommend to draw a smooth Circle so the command is CI and we're going to draw the circle in the center of the screen using the shortcut nmc the radius will be 50. let's draw it with a blue color 80 7D on a black background so it's drawing a blue circle and the blue circle is smooth because the TFT SPI library is using an anti-adased feature which is a kind of technique to reduce the appearance of jagged edges so this is why we need to specify both the foreground color and the background color to allow the TFT SPI library to do an anti-adasing technique on the object the next command is similar we're going to draw a circle a smooth Circle but this time it will be filled so the command is CJ again we're going to put it at the center MC a radius let's say 65 and that's before uh clear the screen before drawing the circle and we're going to draw a dream so color green is 0 7 e 0 again on a black background for the interior SYNC feature so it's drawing a big green circle and it's a little too big so let's reduce the radius to let's say 55 the next command is to draw an ellipse so the command is c e let's first specify a color so and let's say we're going let's say a white white color which is ffff and semicolon and to draw an ellipse to command is CE let's draw it at 75 75 and first reduce of 25 and second read use of 50. and let's clear the screen before so it's drawing a a white ellipse and this time there is no smooth ellipse feature in the TFT espi Library so you saw that there's two radius to specify for the dry lips there's a horizontal radius and a vertical radius so you can play with with the um the parameters of the radius to see the difference on the screen now you can probably guess the the other command which is Philly lips so fit ellipse is um the command CG so let's have a purple filled ellipse so that's before e890 hashtag da9t for The Color Purple so CG and again we have to specify the center let's see 75 75 and both radius and we have a filled purple ellipse now we can also draw Arc with the TFT SPI Library so the command to draw an arc is CA so the first parameter is the position so let's say 50 50. the next one is the radius the outer radius and inner radius of the arc so let's say it will be 50 40. and the start and N angle of the arc so let's say we start at zero degree and end at 180 degrees and we have to provide a foreground color so let's say 9003 and a background color so it would be black because the last parameter is for specifying if we want a smooth Arc so to have a smooth Arc we pass the value of 1 as the last parameter so let's clear the screen before by adding the X command so we have a red Arc not showing well on the screen let's change the color to let's say um let's put it green so zero seven e zero and you can play with the start and ending degrees for example let's say 66 and ending at 213 now let's look at the difference when we change the last parameter to zero so zero means not a smooth Arc so a jagged Arc and you can see that we see the jagged edges on the arc when it's not it's not smooth now there is actually a specific function in the TFT SPI library to draw a smooth Arc so it's almost the same it's the same parameters except that the command is this time CB and the last parameters is not for space specifying if we want a smooth Arc because the function is to draw a smooth Arc it's to specify if we want to have round n so we're going to see what it does but first let's show the function and let's see the difference between the draw smoke smooth smooth Arc function and the draw Arc with the parameter smooth change it here at the end so the dress moved Arc is a little bit smoother so let's say let's move this one to 100 100 and let's not clear the screen so what we see both of them so we can see barely the difference between both of them they're both smooth so basically there's no difference but if we put a one at the end of the draw smooth Arc function it's going to draw uh round ends to the arc so let's move it a little bit inner so that we see it better 75.75 so now we see the rounded a little bit better so the parameters regarding the inner and outer radius you can actually the these two parameters 1540. you can actually um so the the difference between the two is actually the thickness of the arc so if I specify here 45 it's going to draw an arc a little bit thinner so let's say I move it it a little bit inward It's a 65 65 suit that we can see it you see that the arc is thinner now we can draw smooth round rectangle with the library so the command is RS so let's first clear this clip the screen RS let's see position 25 25 the radius of the corners let's say five eight um and we need to specify the width and the eye so 50 60 FR ground color because it's a smooth rectangle so the foreground color let's see if 820 with a background of zero it's drawing a red smooth rectangle so again it's empty ideas so no drag no almost no Jagged edges and you can guess the next function which is the last for the TFT espi Library which is fill smooth round rectangle and the command is RT so let's clear the screen first RT the position of the rectangle the width the length the radius of the rounded corn corner the color the foreground color and the background color and it's drawing a rounded rack smooth with no Jagged edges so this was the last comment for the TFT SPI Library and next I'm going to show you tips and tricks with the library and if you like the uh the video so far please hit the like button and subscribe to the channel so next the tips and tricks here is a nice tip let's put some shape on the display so this set of commands is going to draw a square with a little shadow and this other set of commands is going to draw a green circle with the shadow so let's pretend that we are satisfied with what we see on the screen so what I can do is copy the code output it output it to the serial monitor by the library copy it and paste it into my sketch and upload this to the Arduino so it will become the base drawing for our prototyping so it's uploading so the screen is refreshing with the square and the circle so let's try to print Square under the square so I'm going to first change the color to Black change the text to be a little bigger to two I'm going to set the cursor to column five and line 100 and print the square text now you see it's a little bit too low for my taste so I'm going to raise it a little bit so let's say 90. and the column let's say nine and you see that your drawings are kind of overlapping so what you can do is reset the Arduino 2. your base drawing and from there make your adjustment so that you don't have any overlapping objects because you're prototyping so that's a nice tip that I I use often now you see here that the code that is outputted by the library to the serial monitor it's preceded all the code is preceded by the name of the display the variable name of the display which is TFT in that case that's because we initialize the fast display prototyping library with TFT which is the name of the variable for the display that we use to to name the actual display when we initialize it so if this is different in your code you can just for example let's say your display variable is called display you can change it here re-upload the code to the Arduino and now when you're using the serial monitor with commands so let's go back it's going to use the display variable when showing commands so you can cut and paste them and they're going to work now if we look at the documentation of the fast display prototyping Library and look at the serial commands reference section you see a green badge and a blue badge for each command showing which one is compatible with either through gfx or TFT SPI for example the dress mood circle is only compatible with the TFT SPI Library that's why there's only a blue badge and you see the function the actual function the equivalent serial commands and the description of the function on the right so there's other information in the documentation that you can look at and I'm just scratching the surface with this Library so I'm going to make regular updates to the library and I release videos I liking the newest features as they roll out so be sure to subscribe to the channel to stay informed and up to date thanks for watching

Channel: The Last Outpost Workshop

Views: 6,886

Keywords: Arduino, adafruitgfx, tft_espi, opensource, graphiccommand, serialmonitor, arduinolibrary, arduinotutorial, lcd, oled, tft

Id: 09negq9Zk_c

Length: 38min 45sec (2325 seconds)

Published: Sat Apr 29 2023