Bar Graph - Programming Tutorial (TFT_eSPI library)

Подписаться 99 тыс.

Просмотров 27 тыс.

50% 1

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/...
Here is code: github.com/Vol...
Here is RGB565 color picker :www.barth-dev.d...
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/volo...
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 ...
................................................................................................

Опубликовано:

2 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 171

@Dronebotworkshop Год назад

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!

@VolosProjects Год назад

Thank you , I learned a lot from you. I am visiting your chanell very often and this comment made me very happy. Thank you.

@dr.hrituraj Год назад

Respect Two genious... Drone bot workshop and Volos Waiting for the "guy with swis Accent" Thanks to all of you !!!

@rawinder65 Год назад

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,

@VolosProjects Год назад

Thank you Robert, i am glad i helped.

@alanmangroo3656 Месяц назад

Great tutorial! Nice to see you work through the problem from scratch step by step.

@michaeldiamond2269 Год назад

Excellent video. It's not often we see line-by-line coding with uploading after each step. Very informative.

@VolosProjects Год назад

thank you Michael. I hope this way is easier to learn and understand what is happening.

@dathat555 Год назад

@@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. 🙂)

@evoprox1 Год назад

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!

@anurathilakaratne4640 9 дней назад

This was excellent tutorial. I have learned lot from this video. Thank

@chipko Год назад

Thanks for the heads up about ordering direct from lilyGo .. mine should be arriving tomorrow! Great content as always Volos!

@VolosProjects Год назад

thank you, cheers

@cyberc0l0mbiana 5 месяцев назад

What was the heads up about? Watched the whole video but clearly missed it!

@fabryz Год назад

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

@hapskie Год назад

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.

@Jackie-sg8es Год назад

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.

@VolosProjects Год назад

thank you Jackie😀

@egorovsa Год назад

Thanks ))) I watched the whole video ))

@dr.hrituraj Год назад

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... 👍

@VolosProjects Год назад

I know, but most of people still use Arduino IDE so i am using it also in my tutorials

@h3xen0 Год назад

I recommend the lvgl library

@kihok8688 Год назад

Thank you! Very nice.. :)

@VolosProjects Год назад

Thank you :)

@sannyrocha2513 Год назад

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.

@TBoy58_405 Год назад

Thanks for the vid, I watched it all 👏🏾 Can’t beat paper and pen for planning 👍🏾🤓

@VolosProjects Год назад

Thank you Pete. Old school is old school :)

@pseccombe Год назад

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.

@VolosProjects Год назад

Thank you Paul :) I will try.

@bayareapianist Год назад

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.

@wliterow Год назад

Nothing black screen - am I missing something ?

@jasontiscione1741 Год назад

I got a black screen too

@VolosProjects Год назад

What board are you using, did you install it properly?

@wliterow Год назад

@@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

@wliterow Год назад

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

@stmohir Год назад

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

@thepapatech2067 Год назад

Thank you for the video. Enjoyed it all the way to end!

@VolosProjects Год назад

Thank you

@beardization 25 дней назад

Great video, I'm finally starting to get my screen looking like something other than a BBC Micro. Thank you!

@Dharkon Год назад

Pretty amazing projects -> I learned a lot! Thank you!

@jasontiscione1741 Год назад

I can get this code to run with PlatformIO, but not Arduino IDE. I used your video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gpyeMjM9cOU.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.

@acosta500 Год назад

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

@sammykibwana2949 Год назад

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

@tiktokfood3529 Год назад

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? 😅😊

@MikiMaki-q8t Год назад

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?

@craigs5212 Год назад

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.

@mauricepeconi2117 Год назад

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

@TYGAMatt Год назад

Another gold standard tutorial. Without a doubt the best tutorials on the Web when it comes to understanding the Tft_espi library.

@VolosProjects Год назад

Thank you.

@jumbo999614 4 дня назад

Sir, where to download tft_eSprite library?

@jimsnodgrass8454 Год назад

Got it running on T-Display S3, I've no clue how to get real data into it tho.. :)

@wrekced Год назад

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.

@playvectrex Год назад

I'm loving all of these videos about the T-Display S3

@VolosProjects Год назад

tnx, i will try auto format

@Lisas4us 10 месяцев назад

I wonder if one could use this example to make a bargraph multimeter to monitor each cell in a 48v lifepo battery bank.

@tszulpinedo757 Год назад

First... 🤭

@topouzidd Год назад

You’re fast!

@jtclark5274 9 месяцев назад

I not only typo like you, but make the exact exasperated sighs like you do. LOL

9 месяцев назад

Hi your tutorials are awesome 👍 very good pace, learning with your videos is really enjoyable.

@noengineer Год назад

How do I use the built in buttons in my code? The pinout says „boot/ GPIO14“

@mvrossum Год назад

Great video, very nice explanation of all the lines.

@gaganh1 Год назад

Would love to see a project for PC cpu temperature monitor using T Display or similar

@sakibyousuf1869 Год назад

Can you help me out how can i perform zoom in and zoom out inside a sprite. Not able to find any resource 😔

@superprojb Год назад

Awesome video.

@raymondmichael4987 Год назад

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 🇹🇿

@VolosProjects Год назад

Than you, you are right, but I need to progress slowly. Thank you again :)

@raymondmichael4987 Год назад

@@VolosProjects , yes I agree. Thank you sir.

@electroGoal Год назад

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.

@VolosProjects Год назад

What is spfd...

@bas.botberg8238 Год назад

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!!

@VolosProjects Год назад

Thank you my friend

@neilrollins475 Год назад

Another great tutorial with humour thrown in for free. Great accent too.

@Guitar8202 Год назад

Nice tutorail, thanks for video!

@andytof47 Год назад

Hi , I love you're t-display tutorials. I've learnt heaps thanks. You're a pro :)

@VolosProjects Год назад

thank you Andy😀

@joestanco4341 Год назад

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

@VolosProjects Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gpyeMjM9cOU.html

@ShotgunEmmet Год назад

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 =)

@VolosProjects Год назад

Great Idea, i will try. Tnx

@AlwaysBolttheBird Год назад

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

@mikebaertschy1508 Год назад

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?

@VolosProjects Год назад

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.

@Andrei-jh5fx Год назад

👍

@gerardomonterroza6594 Год назад

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?

@VolosProjects Год назад

other examples work, mine dont?

@ismzaxxon Год назад

Donated to buy coffee...our exchange rate is low. Thanks for your help with the vids on the new model T-display.

@VolosProjects Год назад

thank you Terry, i am glad that my videos are helpful to you. Thank you

@pedrovila9999 Год назад

I watched the whole video. Please continue.

@mahmoodmohammad7241 Год назад

Very nice Tutorial. Thanks

@haydngerken3405 Год назад

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.

@amarmanseur Год назад

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

@VolosProjects Год назад

Tnx Amar, welcome :)

@tombraselton2671 Год назад

“I watched the whole video. Please. Thank you!” 😂 I really like your designs and have learned so much from them. Hvala vam!

@masteruozy4268 11 месяцев назад

always watch full video

@56blackspeedster1 5 месяцев назад

Whole video now subscribed!

@laidbackobs 10 месяцев назад

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.

@scienceofcambridge Год назад

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.

@deehigh3359 Год назад

Nice one, watched it fully and found it very informative how you develop, step by step. Thanks.

@tolgahannsusur2534 Год назад

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.

@stevenog Год назад

Watched all through, video built great foundation for a small project I am working on. Also learned a little more about programming structure, Thanks

@heinzodermatt3928 Год назад

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.

@VolosProjects Год назад

I havenet tryed using platform IO with this board. I will probably mak another video on this subject.

@heinzodermatt3928 Год назад

@@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.

@ismzaxxon Год назад

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.

@VolosProjects Год назад

Hello, here you can see how to adjust brightness ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-50uPv7tsVIc.html

@ismzaxxon Год назад

@@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.

@dennyfox3139 Год назад

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...

@VolosProjects Год назад

here is your solution ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-50uPv7tsVIc.html

@dennyfox3139 Год назад

@@VolosProjects Perfect! Thanks! This is a sweet little board.☝

@lucienferrand3080 Год назад

Excellent video. I like the fact that I can see the result as I program and explain. it's very formative.

@samhanie Год назад

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.

@VolosProjects Год назад

short version?

@samhanie Год назад

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.

@52mgm52 Год назад

I learn a lot of from you. I`m a ESP32 fan and your videos are very helpful. Greets from Austria... ☕☕☕☕

@VolosProjects Год назад

Hello, Muko , Thank you for coffee and thank you for nice words. I hope you will learn even more, thank you again :)

@52mgm52 Год назад

@@VolosProjects You are welcome :)

@jluizk Год назад

Eu assisti até o fim, obrigado.

@stevegibson6390 Год назад

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 .

@Hazit90 Год назад

Really appreciate this dude. End to end tutorial and what an impressive creation 😍. Looks very professional

@joestanco4341 Год назад

Your Tutorials are great. Do you have an alien game for the S3?

@VolosProjects Год назад

Tnx, for S3 i have only this game ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SuTJA3sIOp8.html and snake game

@leehewitt9559 Год назад

This is a fantastic video. I’ve watched it several times and I’m learning so much

@merlinlfa8177 4 месяца назад

I watched whole video 😍

Год назад

Great instruction

@Jngrowdon Год назад

Excellent tutorial!

@GrazianoBurlini 11 месяцев назад

thanks for tutorials

@edriobranco Год назад

Great tutorial, I watch until the end playing on TTGO T-Display, please make more videos like this. Congratulations for your work!

@VolosProjects Год назад

Thank you Eduardo, i will :)

@WolfClinton1 Год назад

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.

@VolosProjects Год назад

Thank you Rolf, yes it is same with if statement , if tthere is only one line unerneath then you dont need brackets.

@heinzodermatt3928 Год назад

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

@VolosProjects Год назад

You are right! It is nice to see when people solve problems and share solution with others. Thank you again Heinz.

@johnminners4840 Год назад

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.

@VolosProjects Год назад

Thank you John, i am glad you finded my videos usefull, have fun :)

@kattz753 Год назад

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.

@VolosProjects Год назад

Thank you. I am glad that you finded somethin useful on my channel.

@krafterHD Год назад

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.

@VolosProjects Год назад

Hahah, i wil try 😀 thank you

@disappear1234 Год назад

I wash all video

@didacrodriguez8449 Год назад

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!

@VolosProjects Год назад

Tnx, nice to hear that.

@donnyblackston1676 Год назад

Great Video, Thanks a bunch

@VolosProjects Год назад

Thank you Donny.

@tyabrahamse2461 10 месяцев назад

drawSpring 😃

@BinaParus 7 месяцев назад

.. 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 !

@VolosProjects 7 месяцев назад

Well done. Thank you.

@thompsonmachine7075 Месяц назад

Thank You

@jensgoerke3819 Год назад

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.

@VolosProjects Год назад

thank you Jens.

@Tony770jr Год назад

Great video. Do sprites allow a bitmap image to rotate and move at the same time?

@tvamos73 Год назад

Thank you for the video. It is amazing, clean and clear. I am waiting for the next.

@VolosProjects Год назад

Tnx Tamas.

@kennethbeal Год назад

"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! :)

@VolosProjects Год назад

thank you, Ken , can you share your work with rest of us when you are finished?

@kennethbeal Год назад

@@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!