Bar Graph - Programming Tutorial (TFT_eSPI library)
ฝัง
- เผยแพร่เมื่อ 5 พ.ย. 2022
- Here is another programming tutorial. In this video i will show you how to program this bar graph. THIS IS "STEP BY STEP". tutorial , i will show you how I plan my layout and I will write this code from begining. I am using TFT display which is part of development board (T-Display S3) but you can use any TFT display and any development board or system. You can even use this concept with OLED displays.
YOU CAN BUY IT HERE: www.lilygo.cc/0cAg0r
Here is code: github.com/VolosR/GraphTutorial
Here is RGB565 color picker :www.barth-dev.de/online/rgb565...
I hope you learned something, if you did, please leave a comment.
.................................................................................................................
You can SUPPORT my work by buying me COFFEE here:
ko-fi.com/volosprojects
dONT FORgET tO SUBscRibE
...............................My T-Display S3 VIDEOS ..........................
• Is this Best ESP32 boa...
• LilyGo T-Display S3 (P...
• T-Display-S3 developme...
• How to Scroll Image (E...
• Winter Is Coming! T-d...
• T-Display S3 - How to ...
................................................................................................ - วิทยาศาสตร์และเทคโนโลยี
Another excellent tutorial, I'm really impressed by the detail you go into with all of your videos. You are certainly the wizard when it comes to using the TTGO modules!
And BTW, please don't feel the need to apologize for your English, I think it's quite good, and I don't think anyone would have a problem understanding you.
Looking forward to more great videos from you!
Thank you , I learned a lot from you. I am visiting your chanell very often and this comment made me very happy. Thank you.
Respect
Two genious...
Drone bot workshop and Volos
Waiting for the "guy with swis Accent"
Thanks to all of you !!!
Excellent video. It's not often we see line-by-line coding with uploading after each step. Very informative.
thank you Michael. I hope this way is easier to learn and understand what is happening.
@@VolosProjects - It does help to follow your process and thinking. I found it more helpful than just looking at already finished sample code. (At least the first time anyway. 🙂)
Another gold standard tutorial. Without a doubt the best tutorials on the Web when it comes to understanding the Tft_espi library.
Thank you.
Thanks for the heads up about ordering direct from lilyGo .. mine should be arriving tomorrow!
Great content as always Volos!
thank you, cheers
What was the heads up about? Watched the whole video but clearly missed it!
.. from start to end :-)
I started yesterday with eSPI and today I have a running user-interface with true-color startup-screen .. thanks to your videos !
Well done. Thank you.
Thanks for showing the details of your design process. BTW your english is better than you think. I did not have any problem understanding your instructions. I watched the whole video.
Another fantastic video. These type of presentations are by far the most enjoyable to follow. Nothing is skipped and your delivery is clear and at a good pace. Well done. Thank you.
thank you Jackie😀
Excellent video. I like the fact that I can see the result as I program and explain.
it's very formative.
Watched all through, video built great foundation for a small project I am working on. Also learned a little more about programming structure, Thanks
Really appreciate this dude. End to end tutorial and what an impressive creation 😍. Looks very professional
Yes, I stayed to the end. I just got my original TTGO T-Display a few weeks ago and I just ordered the new model a couple of days ago, along with a couple other new toys. (Big sale, AliExpress). I find your videos the easiest to follow. Thanks for taking the time to do them.
Thank you. I am glad that you finded somethin useful on my channel.
Excellent work and explanations, some of the very best I found so far, thanks a bunch.
I subbed a while ago and can't wait for more! Keep it up!
I enjoy the format of doing this line by line since I do not copy your code as attached to the comments, it's much more beneficial to type it as you are going through and learning from my mistakes. I also add my own comments to the code as I understand it. Then as I change the code for my own project, it is easier to understand what is going on. Also, I don't have any issue with your english. As an American speak, I mess it up all the time....Thanks,
Thank you Robert, i am glad i helped.
Watched it till the end; I'm real impressed by your work, very clear;
I suggest a part two of this, to improve fps, to make the loop faster by removing delays and other optimization.
Because as of now, we redraw the graphs in every loop, which can be quite expensive if we attach sensors and we need almost realtime response and other process running smoothly.
I know this was "how I draw beautifully on screens" and you really did a tremendous work, for that I salute you.
Greetings from Tanzania 🇹🇿
Than you, you are right, but I need to progress slowly. Thank you again :)
@@VolosProjects , yes I agree.
Thank you sir.
This is a fantastic video. I’ve watched it several times and I’m learning so much
Great tutorial! Just what I needed to walk me through the whole process. Time to get graph paper out!
More like this please.
Yes, I watched the whole video.
Thank you Paul :) I will try.
“I watched the whole video. Please. Thank you!” 😂
I really like your designs and have learned so much from them. Hvala vam!
Watched all the way :-) Did I learn something? Yes - Retired engineer and I didn't know you could do a single line FOR loop without curly braces! Thank you so much! In return, I would encourage everyone to use CtrlC and CtrlV to copy/paste and left mouse button to- double click=highlight word and triple click=highlight line. Speeds up the workflow.
Thank you Rolf, yes it is same with if statement , if tthere is only one line unerneath then you dont need brackets.
hello i'am frenchy beginer, you are a great teacher. thank you so much. it sims to be so easy for you but very hard for me. but i begin to inderstand how it work. still thank you and don't stop. sorry for my english. merci
Tnx Amar, welcome :)
Thank you for the video. Enjoyed it all the way to end!
Thank you
Thanks, for the nice video. I have two of these boards, not had a chance to play with them yet. Watched all the way through, this will be my first example when I get some time. I only wish the folks that design the libraries would document the functions just a little for us junior programmers.
Hi
your tutorials are awesome 👍 very good pace, learning with your videos is really enjoyable.
Great tutorial. Nice to see how you create your code live, with the risk of making mistakes. Although English might not be your native language, I admire your skills of live presenting in a non-native language. The speed of your explanation is perfect and it's good that you entice viewers to leave comments. Keep up the good work!!
Thank you my friend
Thanks for the vid, I watched it all 👏🏾 Can’t beat paper and pen for planning 👍🏾🤓
Thank you Pete. Old school is old school :)
Many thanks for this tutorial. Thanks to this I could learn how to solve a problem in a display with the typical problem of continuos refreshing. I could fix it after several months with without clues. Thanks!
Tnx, nice to hear that.
Very Good Tutorial. I enjoyed the Line by Line coding and was tapping on my laptop screen when you typed "Spring" instead of "String". I tried to get your attention :) I Look forward to seeing more Tutorials from you as I have only just restarted coding after many, many years. See you soon and Thank You once again.
Thank you John, i am glad you finded my videos usefull, have fun :)
Thank you for what you do , I like to learn from people smarter than me . I can't wait to get one of these devices and practice what you teach .
Watched it all.. thanks for teaching me and will be writing my code based on this to display analogue values from Air Preasure Transducers attached to my Air Suspension in my Truck.. I then will calibrate the values to give me a KG reading , showing how heavy my load is on the front tyres, each rear set of tyres and finely my trailer tyres ( this value is based on what the air pressure in the suspension increases too over the static load at empty weight pressure)
Looking forward to implementing it.
Now I just need to purchase a nice quality screen and frame.
Watched the whole way through. Great work and lots of info. Thank you
Thank you Greg, sorry for late answer.
I'm loving all of these videos about the T-Display S3
tnx, i will try auto format
Hi , I love you're t-display tutorials. I've learnt heaps thanks. You're a pro :)
thank you Andy😀
Nice one, watched it fully and found it very informative how you develop, step by step.
Thanks.
I watched the whole video. Please continue.
Great video, very nice explanation of all the lines.
Fantastic video! I was looking for tutorials about coding these MCU and found this great channel. I'm working on a project to monitor voltage transients at home when imbalances occur, e.g., short circuits, accidents on a light pole, or any other imbalances. I would love a tutorial about making an interface display combining graphs, including live measurements of voltage transient counts. Overall, excellent work, and thanks for the knowledge.
Pretty amazing projects -> I learned a lot! Thank you!
Another great tutorial with humour thrown in for free. Great accent too.
I did what the entire video and found it informative. I just started using TFT displays and this library. I think watching your videos is going to make things a lot simpler especially learning about sprites and how they are used. You explain everything very well.
P.S.
I often misspell words. I can see myself spelling string as spring so please be kind to your student's lol.
Hahah, i wil try 😀 thank you
Very nice Tutorial. Thanks
Nice tutorail, thanks for video!
Great tutorial, I watch until the end playing on TTGO T-Display, please make more videos like this. Congratulations for your work!
Thank you Eduardo, i will :)
Thank you for the video. It is amazing, clean and clear. I am waiting for the next.
Tnx Tamas.
Excellent tutorial!
Whole video now subscribed!
"I watched the whole video"! Thank you so much. I wrote a scroll bar function for my project over the past couple days. Intend to make it available as a library; so, now, learning how to publish a library. :)
Interface will be something like:
void drawVertScrollBar(TFT_eSprite *spr, int x, int y, int w, int h, int percentStart, int percentEnd, uint32_t colorBorder, uint32_t colorTarget, String s);
Although I'll make it a class so it'll be "spr.drawVertScrollBar()". Thanks again and enjoy the coffees! :)
thank you, Ken , can you share your work with rest of us when you are finished?
@@VolosProjects Certainly, will do! I just added to the Examples->TFT_eSPI->320 x 240->TFT_Starfield, so that I can have a logo and have the starfield animation displayed "behind" the logo -- by drawing it on a separate sprite, and if it's not the "alpha" color (black), then don't hide and redraw the star, but do still move it, so the stars appear to "move behind the logo."
This is fun; thanks again!
I love your graphical designs. Have you considered making an energy monitoring device? Would be very cool to have something like that, which can generate graphs for example based on MQTT input, to make it more or less universal.
Donated to buy coffee...our exchange rate is low. Thanks for your help with the vids on the new model T-display.
thank you Terry, i am glad that my videos are helpful to you. Thank you
I learn a lot of from you. I`m a ESP32 fan and your videos are very helpful. Greets from Austria... ☕☕☕☕
Hello, Muko , Thank you for coffee and thank you for nice words. I hope you will learn even more, thank you again :)
@@VolosProjects You are welcome :)
Thanks ))) I watched the whole video ))
I watched the whole video.
The pen & paper method reminds me of my early years of programming. Eventually it had become second nature and I could do most of it in my head.
These days I tend to use graphics programs for the ease of moving parts around, though.
thank you Jens.
Eu assisti até o fim, obrigado.
Great Video, Thanks a bunch
Thank you Donny.
Thank you! Very nice.. :)
Thank you :)
I would like to advice to use Platformio...
This would help you a lot...
You could explain all the functions in details
Example...with screenSprite and ctrl+space you get all the functions possible from sprite class in library
Vscode with platformio just superb
Rest...awesome efforts... 👍
I know, but most of people still use Arduino IDE so i am using it also in my tutorials
Another idea is draw everything in a millimeter paper or paint brush program. Define the location of all objects in varibles, and change the variables via command lines. Once everything is approved save the variable values as hard values.
thanks for tutorials
Great instruction
I watched whole video 😍
Great video. Do sprites allow a bitmap image to rotate and move at the same time?
It is great, absolutely I learned something especially I did not realize functionality of datum before. But I was expecting auto-scaling graph, this looks like more static graph, still useful though. If you are okey with it, I would love to see sliding real-time graphs :) Thanks a lot.
Awesome video.
Hi, Thank you for your great videos - they go at just the right pace for me!
If you don't mind I have a couple of questions.
1) Do you have a link to the documentation you use for details on the tft/sprite API .
2) Could you possibly do a video on using the ESP32 debugger hardware in PlatformIO & the Lilygo T-Display?
As sketches get more complicated could be really useful.
Thanks,
Simon.
Hi!, Thank You very much for your videos, I love them and I appreciate the time to share with us. Please, could you explain how to use the T-Display or TTGO with a sensor and graph its data in real time? Thank You very much.
I not only typo like you, but make the exact exasperated sighs like you do. LOL
I recommend the lvgl library
Your Tutorials are great. Do you have an alien game for the S3?
Tnx, for S3 i have only this game th-cam.com/video/SuTJA3sIOp8/w-d-xo.html and snake game
Nice!
To Mr Volos a DroneBot,very good teachers.A question please,I am trying to use my Lylygo S 3 1.9 inch,but I have only win7 and win 10 32bits,The library is for win10 64 bits,should I have to by a new computer??.Sorry the disturb but no found other way to ask.Thanks
Could you suggest me how to retrieve a PNG from an URL and display it? I tried the httpsclient from the example sketch, but for some reason nothing happens
Thank you for this nice Project. I coded it while watching the video. 👍Everything works great. I still can't get the display to work on platformIO May be you can publish your PlatformIO settings.
I havenet tryed using platform IO with this board. I will probably mak another video on this subject.
@@VolosProjects That would be great, if you find solution to work with platformsIO. By the way have you tried to use serial monitor with this board? I was not able to send something to serial monitor in Arduino IDE. It seams as if Comunication via serial console is disabled.
Would love to see a project for PC cpu temperature monitor using T Display or similar
I watched it all the way through. Very nicely done and don't worry, your English is fine and I enjoy your accent. Because of your videos, I have bough that device to play with. I did run into an issue though. I'm running Windows 7 and it will not show up as a virtual comport in device manager so Arduino environment can't talk to it. It looks like you have to use Windows 10 to work with it.
Anyone get it working under Windows 7 using Arduino 2.0?
Tny, mike, curently I don't own any win7 device so I cant try this. I will see can i fiind driver you need to install.
I wonder if one could use this example to make a bargraph multimeter to monitor each cell in a 48v lifepo battery bank.
A handy trick is to draw a coloured grid of lines over everything else so you can easily position and align your graphics, then remove the grid. Just write a function with two loops and you can use it in any project =)
Great Idea, i will try. Tnx
Thanks for that idea. I’m making a StreamDeck out of a 2.8 inch touchscreen ESP32 board I got for $15 and this is gonna help a lot
I have watched the whole video)
Tnx 😀
Amazing Video with great explanation!
I bought the new TDisplay from Lilygo. In the "preferences" I was able to add the url for the board manager of "esp32". So until then, everything is fine.
I wrote this simple program that display the color of "color1" on the screen.
But when i upload it my screen get dark and i can't even reset it to the default version. The full programm doesnt work neither
Its written:
Hash of data verified.
Leaving...
Hard resetting via RTS pin...
Can someone help me with this? 😅😊
I have recocniced, that the vertical numbers 20-60 needs to be a little lower. That it coresponds to the values. I changed the for loop to i
You are right! It is nice to see when people solve problems and share solution with others. Thank you again Heinz.
I have been following your series. Excellent. Any chance you could explain in a vid, how to turn on and off backlight, using ping or usable pins. Esp32S3 T-display. Thank you.
Hello, here you can see how to adjust brightness th-cam.com/video/50uPv7tsVIc/w-d-xo.html
@@VolosProjects Had everything I needed. Thank you. I am not meaning to be lazy, but the documentation online is for older units. Your youtube info seems to be the only one that works in these modules. A special thanks for the walkthrough on setting up the library.
How do I use the built in buttons in my code? The pinout says „boot/ GPIO14“
I must be doing something wrong but when I run you sketch’s I can not compile because the TFT_eSPI.H: can not be found. It is in the library
Can you help me out how can i perform zoom in and zoom out inside a sprite. Not able to find any resource 😔
Sir! Iam leaning to draw Real Time Clock with RTClib, DS3231 and ILI9488 SPI Touchscreen but not work the second and dow, I used your method can you give me the example with Sprite hh: mm;SS ,dow and Temperature thank you
Good instructions. When I do it in the Arduino IDE, everything works perfectly. In Visual Studio Code, however, I can't get it to work. The code is compiled and transferred without problems, but the screen remains dark. Has anyone already done this in VSCode with PlatformIO?
Hey nice explanation, I want you to make a video on how to add support for spfd54124b driver in TFT_eSPI library. Please tell me how is it possible.
What is spfd...
👍
Is there anything that needs to be done to get the T-Display S3 to run from the LiPo cell? It seems to me that the sketch that was delivered with it did run off the LiPo. But now that I have uploaded and run a couple of your sketches I find that they work fine when powered by USB but show a blank screen when powered by the LiPo cell. The board charges the cell fine, the red LED goes out when it's fully charged. I followed the Tips 1 and 2 about uploading with after starting with the boot button pressed, but it still did not run from the LiPo. I tried a couple of different cells including an 18650, no joy. I have not been able to find the source for the original supplied sketch to see if that works. I'm using the Arduino IDE 1.8.13. Any clues would be appreciated...
here is your solution th-cam.com/video/50uPv7tsVIc/w-d-xo.html
@@VolosProjects Perfect! Thanks! This is a sweet little board.☝
i watched the whole video :P
Thank you, i hope it was useful 😀
@@VolosProjects One question: I also use the Lilygo T-Display-S3 (so the same one as you) but when I pick another color (same color picker) for color1 e.g. a blue shade (0x2395), it totally messes up the colors also of the other shades. can you explain why? I actually have that problem also in another project but wanted to see, if your code produces the same output.
hi, thanks for the information. I tried the short version ( at 9 minutes in the video). It compiles, uploads, blanks the display, then - stays blank. Any suggestions? I went through your walkthrough Arduino ide and set everything up. I can load and run the factory sketch with no problem.
short version?
Look at video at 9 minutes. You wrote to to unit with only 25 lines of code. (short versio). I thought it would be easier to troubleshoot. Full version gives same result. I also tried your Progress bar - same result.
always watch full video
Thank you for sharing this. It's useful and worth trying, playing around with this. My personal suggestion if you want to take it - maybe try to have a consistent coding style, with indentation and brackets for the blocks of loops. I'm not writing direct code in the arduino IDE, but more in Visual Studio Code - that helps a lot with auto formatting. Not sure if it's supported in the arduino ide. In my case I'm writing code through EspHome for home assistant.
Sorry if you mind my feedback. Otherwise good quality content that's worth seeing. Thank you for this!
thank you for comment and advices. I will try to line my code better next time.
Interestingly, arduino 2.0 shares a lot of similarities to VSCode... just not as flexible*
___
* mainly other environments and languages
I just purchased a ESP32-S3 board. But can't get it installed on my Arduino IDE. If anyone has any ideas this would be very helpful. Thanks
th-cam.com/video/gpyeMjM9cOU/w-d-xo.html
I tried all of your code in my S3 but none of it worked (screen would just be black) It does upload all the way in. Other examples do work though. Any ideas?
other examples work, mine dont?
Got it running on T-Display S3, I've no clue how to get real data into it tho.. :)
First... 🤭
You’re fast!
Nothing black screen - am I missing something ?
I got a black screen too
What board are you using, did you install it properly?
@@VolosProjects First - thank you for you excellent work and great presentations, I'm Using a LILI=YGO T-TDisplay S3 , Finally figured it out the "mess" with the,header files, the compile times for each change are outrages 3-5 min per compilation - didn't realize that you were editing the times on your presentation
it is not working as I found out ...
ESP-ROM:esp32s3-20210327
Build:Mar 27 2021
rst:0x15 (USB_UART_CHIP_RESET),boot:0x8 (SPI_FAST_FLASH_BOOT)
Saved PC:0x420266f6
SPIWP:0xee
mode:DIO, clock div:1
load:0x3fce3808,len:0x43c
load:0x403c9700,len:0xbec
load:0x403cc700,len:0x2a3c
entry 0x403c98d8
E (6) gpio: gpio_set_level(226): GPIO output gpio_num error
E (7) gpio: gpio_set_level(226): GPIO output gpio_num error
I also can't get the screen to work. Using the liligo version of TFT_eSPI.
if you managed to make it work, please tell how
drawSpring 😃
I can get this code to run with PlatformIO, but not Arduino IDE. I used your video th-cam.com/video/gpyeMjM9cOU/w-d-xo.html for setting up Arduino IDE for T-Display S3. For this sketch, I have it set to "ESP32S3 Dev Module". It compiles, uploads, and says "Hard resetting via RTS pin..." and the screen stays blank.
I wash all video
When I try to upload code to this device, I keep getting this error..
Arduino: 1.8.19 (Linux), Board: "ESP32S3 Dev Module, Disabled, QIO 80MHz, 4MB (32Mb), Core 1, Core 1, Hardware CDC and JTAG, Disabled, Disabled, Disabled, UART0 / Hardware CDC, Default 4MB with spiffs (1.2MB APP/1.5MB SPIFFS), 240MHz (WiFi), 921600, None, Disabled"
In file included from /home/user/Arduino/VolosR/GraphTutorial/GraphTutorial.ino:16:
/home/user/Arduino/libraries/TFT_eSPI/TFT_eSPI.h:306:21: error: 'VSPI' was not declared in this scope
uint8_t port = VSPI;// VSPI
^~~~
/home/user/Arduino/libraries/TFT_eSPI/TFT_eSPI.h:306:21: note: suggested alternative: 'SPI'
uint8_t port = VSPI;// VSPI
^~~~
SPI
exit status 1
Error compiling for board ESP32S3 Dev Module.
This report would have more information with
"Show verbose output during compilation"
option enabled in File -> Preferences.
The ^~~~ is pointing at VSPI in the error window. I tried changing VSPI to SPI and get same error.
did you install board and library, what IDE you are using, which win?
@@VolosProjects I am unable to respond with an answer. YT keeps deleting my reply.. because it has U r L s in it..