How to Make your Project look Amazing

The main topic of this video is user interface and how to make a good looking project. We will use functions for smooth circles and smooth round rectangles. I will show you how to draw gradient fill rectangles. And we will try anti aliased fonts. I am using the LilyGo T-Display development board along Arduino IDE 2.0 but these functions will work on any display supported by the TFT_ESPI library.
You can check T-Display S3 development board here: www.lilygo.cc/...
Code (smooth graphics and anti aliased fonts) : github.com/Vol...
Code regular functions: github.com/Vol...
Code INTERNET CLOCK :github.com/Vol...
Don't forget to subscribe! If you want to support my work you can buy me coffee here: ko-fi.com/volo...

[@markmccornack7983]

LILLYGO is going to wonder why all of a sudden this huge surge of orders for S3 boards! Your creativity and skills continue to impress me more each time. Great communication skills too in a non native tongue. Thanks

[@VolosProjects]

Thank you Mark. It still new board but i think they sell alot of them.

[@1islam1]

@@VolosProjects ⚠️ God has said in the Quran: 🔵 { O mankind, worship your Lord, who created you and those before you, that you may become righteous - ( 2:21 ) 🔴 [He] who made for you the earth a bed [spread out] and the sky a ceiling and sent down from the sky, rain and brought forth thereby fruits as provision for you. So do not attribute to Allah equals while you know [that there is nothing similar to Him]. ( 2:22 ) 🔵 And if you are in doubt about what We have sent down upon Our Servant [Muhammad], then produce a surah the like thereof and call upon your witnesses other than Allah, if you should be truthful. ( 2:23 ) 🔴 But if you do not - and you will never be able to - then fear the Fire, whose fuel is men and stones, prepared for the disbelievers.( 2:24 ) 🔵 And give good tidings to those who believe and do righteous deeds that they will have gardens [in Paradise] beneath which rivers flow. Whenever they are provided with a provision of fruit therefrom, they will say, "This is what we were provided with before." And it is given to them in likeness. And they will have therein purified spouses, and they will abide therein eternally. ( 2:25 ) ⚠️ Quran

[@harryjohnson615]

@@1islam1 *"...Islam, it's bullshit..."* Christopher Hitchens

[@SteelyEyedH]

Ordered before the end of the video :)

[@RoboticNerd]

​@@1islam1Just stop

[@TurpInTexas]

There is no substitute for effort when it comes to making beautiful work. Your display is absolutely gorgeous, and you have a great eye for detail, because they look just like an old style mechanical display. Thank you for taking time to make this video and educate us on well designed display interfaces. I just subscribed!

[@misteragony]

Wow! Great work man. Your interface building skills are phenomenal!

[@VolosProjects]

thank you my friend.

[@IncaTrails]

It looks amazing. The rolling tick marks in the 1X readout is a really nice touch! You might want to work on adding comments to your code 🙂

[@dennyfox3139]

Your projects are amazing! They have inspired me to purchase two S3 boards to experiment with. Keep the cool videos coming!

[@VolosProjects]

Thank you, you made good purchase, enjoj your t-displays :)

[@ytfp]

Such great information. I hope Lily-Go will increase any sponsorship they provide because these videos would be the sole purpose of purchasing this device. I also appreciate your work on all the different displays from before.

[@VolosProjects]

i agree :) Thank you!

[@kennethbeal]

That's awesome! You posted this six hours ago. Yesterday I was using the gradient feature of Gimp to make a static logo for a project. Now I can make the gradient dynamic, if I want! That's neat, and, I think I'll play around with this. Thanks again! Oh, here's an idea for you: I added a potentiometer (e.g., "volume control" knob) to the breadboard I'm exploring this display with, so I can adjust values more quickly than the edit/compile/upload/verify cycle which is at least around 1 minute between "changing a variable and seeing the result." By adding just a bit of code to hook the value of the potentiometer, mapped to a proper range, I'm able to test a lot faster. Hope this helps, and, feel free to make a video on it if you like the technique! Thanks again.

[@ModBay]

Instant sub for me. Since I started my own ESP32 projects, the displays have always had me wondering how far can we push it. Great work!

[@VolosProjects]

Tnx, i thing they can go ever further :)

[@wrongtown]

Same 😁

[@Billcasiopost]

I've just discovered your chanel, now I'm waiting impatiently for my S3 to be delivered. Love your work.

[@VolosProjects]

Thank you. I hope it will arive soon 😀

[@MirkoPavleskiMK]

I can't believe how beautiful it looks. Great idea with the electricity meter, congratulations

[@VolosProjects]

Thank you, i checked your chanell, you have good content and one more subscriber. I always wanted to play with radios.

[@MirkoPavleskiMK]

@@VolosProjects Thanks a lot :)

[@fermintm]

Every day you amaze me more with your projects. They are incredible!

[@cam_DA_Hawkdriver]

Aliased is pronounced like aylee’uhsd. You do phenomenal work sir!

[@brad7141]

I love your channel. it has been one of the most informative and helpful. after discovering your channel i been buying tons of these S3 display boards :)

[@VolosProjects]

Tnx Brad, dont spend all of your money 😀

[@ByteNoMore]

Your focus on beauty and making good things even better is something you should keep. Please go on with your work and show all what could happen if they would at least somtimes focus on details.

[@VolosProjects]

Thank you, yes , i love when something looks good and elegant. It take time but it is fun to make something like this. Tnx again

[@jacksonvillereclaimedwood6709]

You are a madman! That looks fantastic!

[@joachimsaupe7062]

What a GREAT looking gauge! Thanks.

[@TravisKelleher]

Thank you for reviewing this board!

[@wtmayhew]

Working with these little ESP32 dev boards is a blast. It feels like they can do almost anything, especially with the full Internet functionality. I am eagerly anticipating receiving my order for some units of the version of this board that is the mini front panel. I adapted that first project into a teeny triggered sweep oscilloscope. I didn’t try too hard to optimize anything, so 1 KHz is about the upper limit it can display, but is neat to just code it in C++. I’ve been toying with the idea of keeping a ring buffer filled continuously with an interrupt routine reading the ADC channel and and having the main loop calculate the trigger conditions at an offset behind the current sample so that I can display pre trigger data in my sweep after valid trigger conditions are met. Having the CPU cores running at 240 MHz gives quite a bit of time to process data in between the ticks when it is necessary to interact with the analog world. The fast CPU cores make writing in a high level language practical for doing real-time work.

[@r7boatguy]

Would love to see this in action!

[@arlo4051]

Another great project Volos, in case you didn't know Bill at DroneBot Workshop gave you a shoutout plus link to your site so you should see an influx of viewers. Keep up the great work and best to the family.

[@VolosProjects]

omg, realy 😀 thank you,do you have link. Thank you,best wishes to your family.

[@arlo4051]

not sure if first link worked but will try again : kzbin.info/www/bejne/movXpXuFra6im80

[@kennethbeal]

@@VolosProjects That's so cool! These are two of my favorite channels, awesome to see them interacting.

[@desmond-hawkins]

It looks great! Interesting to see this board, the LilyGo T-Display looks better than past boards I had bought from them. I ended up using something else, because they had no usable pins except for one Grover port (e.g. see the T-Camera, T-Journal, or T5s: they have literally no headers). At least it looks like the T-Display has plenty and comes with headers; without them I find their utility very limited.

[@thepapatech2067]

This is great. I am just starting with integrating displays and am glad to have found your channel. I need to update the display from a MySQL table so I have my work cutout for me. I will take a look at the rest of your videos. Thank you for your posts.

[@ILFforever]

Really love the designs and projects, your vids and example code alone has taught me so much about programming this thing. One question tho have you seen the ttgo s3 touch screen version? I have it and it's a gem.

[@desparky]

Thankyou for sharing what you have learnt. You've opened up a whole new way for me to make my projects way better. Subscribed.

[@joea5739]

Great work! I have enjoyed each of your videos on this display and they have inspired me to try one out for myself. I'm currently working on a project using the LVGL library to display data from a car's CAN bus like battery voltage, power/torque, speed, etc. Really a fun little device!

[@VolosProjects]

tnx Joe, i will also try LVGL library very soon. how hard is to setup,do you useadditional software for design?

[@jull1234]

any quickly changing number should be using a monospaced number font to avoid that jitter. really cleans up the presentation.

[@pevlabs]

Fantastic, thanks for turning us on to these graphic functions.

[@no_onebanana7167]

tanks for Providing these Videos to us, you're helping me out a lot!

[@santopino2546]

Holy crap, you've even simulated the scrolling of the vertical bar ticks in the decimal display.

[@nick066hu]

wow! that kWh meter looks awesome! Congrats. I have to build it.

[@ATS3788]

It even works with my ESP Wover Kit 👍👍👍👍

[@dominik3512]

Thanks for the tutorials, really! I'm doing my state certified technician in Germany and your tutorials help me a lot. I also bought the successor board and I would be interested in what is possible with the two cores or how to use the two separately. Possibly also in relation to the Deepsleep mode. Make really fun to follow your videos keep up the good work :)

[@VolosProjects]

thank you Dominik. I am glad you love content, playing wit deep sleep is on my list. Thank you again :)

[@rowenarrow]

I will definitely be checking out your other projects.

[@VolosProjects]

Thank you

[@Nichetronix]

Thanks for this. Love the look!

[@Nicolas_dG]

And right there, you got a new subscriber ! Cant wait to go watch your other videos

[@VolosProjects]

tnx man, new video will be soon :)

[@kikmedown]

Second. Thanks for the inspiration. Hope to use these all around my home 🤠 someday. I have a lot to learn.

[@Punkrwt]

yeah i am watching first time.. thanks for discription

[@vinyltheif]

Albeit looking for 1306 32x64 oled display info I found this great, that clock looks great, I'll be making one! ;-)

[@JoeBurnett]

This looks amazing! Looking forward to watching your other videos!

[@VolosProjects]

Tnx Joe, welcome aboard.

[@I000I]

Gorgeous design, looks very nice! 👍

[@UgoTheEngineer]

Great job on this project.

[@bhagmeister]

A key programming construct here is the use of (image) Sprites within the TFT_eSPI library when drawing and re-drawing smoothly to the display. As I (a non developer) understand it, a Sprite is more a bulk screen buffer move or update operation thus removing any mismatching of display scan and pixel display.

[@jeffvenqueleir2036]

Your are a pro WOW what a design

[@tubeDude48]

Keep 'em coming !!! Always a surprise...

[@MWArduino]

brilliant - simply brilliant

[@michealmorrow1481]

Nice looking project. I would really like to see it scrolling the numbers up like what you are simulating.

[@michealmorrow1481]

The "smooth" functions take more time than the previous ones. Yes, they look better but at a cost. That is noted in the comments from the author. They are using alpha blending to get the smooth look and that takes more math to make it happen.

[@squidben5780]

Very nice display !!!

[@nikthefix8918]

Volos, if you create a jpg 'unfolded' strip of each number wheel then you can have them rotating behind the panel layer like an odometer. I found the easiest way to do this is to index the array when pushing the image in order to show a window of maybe 1.5 to 2 digits span. Increment the index point and re-push into the full screen sprite. Great for retro clocks, counters and cockpit instruments. Congratulations on the stunning work!

[@VolosProjects]

I am not sure i undertanded you. You mean , store numbers in arrays of images?

[@nikthefix8918]

@@VolosProjects Yes, a single array for a complete number wheel - like a vertical film strip going from 0-9 (perhaps with an extra 0 on the end so the loop can be seamless). Then just select a region of the byte array to display with variable in and out points. Like a poor mans gif but you can reverse direction and pull out frames easily. I think TFT_eSPI already has a way of doing this but at the time I wanted to try it the sprite feature had not been implemented so I did it the quick and dirty way. Project request: A clock based on an aeroplane altimeter. Project request 2: A tally counter like nightclub bouncers use - with a push button and real rotating number wheels :)

[@archivushka]

Skeuomorphism is back, baby!

[@juschu85]

I just had a close loop 😄 I didn't know this board, I thought it's interesting, I googled it, I ended up on Amazon, and I found a user review in which someone refers back to your channel because there isn't much documentation for this board.

[@VolosProjects]

hahah, nice to hear that😀😀

[@labiadh_chokri]

Nice project, it will be better to see the digits rolling like the old mechanical counter but it needs more line codes.

[@contractorwolf]

Excellent instructional video Volos, followed

[@VolosProjects]

Tnx James

[@transientaardvark6231]

That display looks awesome. One hint, maybe you want it like it is, but I would have forced the least significant field to always be 2 digits (given that you are trying to emulate mechanical dials), rather than going down to a single digit in the range 0-9. There are various ways to do that. Arduino sketches are "really" C++ (which I'm not an expert at) but there are ways to give print format specifiers in that (GIYF). Personally (not because it is a good way but because I am mainly a C programmer) I would use a sprintf( least_significant_buffer , "%02d" , the_least_significant_variable ).

[@Janktzoni]

You're an artist.

[@harryjohnson615]

That is special, very special 10/10

[@Hrshgn]

OK, I had to buy a one of those modules immediately. It is on the way. Fortunately I have an older model to play with while waiting. One suggestion: You could add more comments to your source code. It is a bit difficult to figure out which part is drawing what. Just a section header like "// Drawing Spinning Wheel" or so would be great.

[@temyraverdana6421]

It's fantastic! Thanks for share it

[@CaptG4321]

Looks great! I'm using TFT_eSPI with a LilyGo T-Display 1.44 inch v1.1 display. I will move to AA fonts.

[@vegansynths7757]

absolutely fantastic.

[@VolosProjects]

Many thanks!

[@RBurwell]

Love it. Subscribed immediately. Looking forward to watching your other videos.

[@VolosProjects]

Thank you :)

[@avejst]

Great video Interesting project Thanks for sharing your expirence with all of us 👍 😀

[@leehewitt9559]

Excellent video.

[@robertrobert5583]

Beautiful work. Thank you for sharing.

[@electronic7979]

Excellent project 👍

[@robertparenton7470]

Thank You! From Frisco, TX

[@zz3709]

You are awesome man!

[@aliaghil1]

Nice job, thank you for sharing it with us.

[@profGenki]

Smooth fonts it’s very interesting, thanks for sharing 🙂

[@Keith12001]

Brilliant and thank you for sharing your knowledge

[@VolosProjects]

tnx Keith

[@sagster]

Great video. I need to get me a LILLYGO and have a play

[@dtewksbury]

The difference in frame rate is probably just because the fonts are larger, so the graphics library has to blit more pixels each frame. The anti aliasing was probably done when the fonts were generated so there is no more overhead there, except if the semi transparent pixels around the edges need to be calculated on the fly to blend to the background colour.

[@andre-7423]

vertically scrolling digits would be beautiful. Can the library do it?

[@vinayakjadhav1719]

Very nice video and channel.

[@eziovieira6664]

Good work, keep it going

[@waynehawkins654]

Looks good. I just may have to go and buy a display. Do you go into the hard wire of the display with a Arduino?

[@chrismayer8990]

thanks for sharing!

[@electronics.unmessed]

Very nice!

[@CiaranWhelan]

Beatiful work. New subscriber. I wanrt to learn a little bit about the coding of the LilyGo. I have some ideas of things I would love to make, and I think this may be super helpful to learn from you.

[@thehappycoder3760]

Stunning, I really want one.

[@bimmerboard]

Well done! And your English is excellent.

[@VolosProjects]

tnx David 😀

[@RixtronixLAB]

Creative video, thank you :)

[@jumadhaheri]

Excellent

[@TomLeonard-ns2hb]

Not a fan of Arduino, but very well Done demo!!!!

[@pixitha]

I hope Lily starts to send you free boards, doing some awesome stuff!

[@VolosProjects]

tnx, yes i recieved free board few times, not this one, i payed this one 😀

[@Wess-S]

This is awesome!

[@frankhovis]

I really wish someone would come up with a decent TFT emulator for Arduino etc. so such user interfaces can be designed and experimented with without the need to upload EVERY time something needs tweaking.

[@VolosProjects]

i agree, i hope someone will make something like this

[@tatavox1408]

very good job ! ❤

[@nicoladellino8124]

Very nice project, TNX.

[@TinyMaths]

Being relatively new to coding (about 7 months into my learning jorney), my design skills are absolutely lacking. Problem solving? Yeah, I can really get into that; but I get completely lost and just wing it when I have to create the user interface. It's interesting to see how the subtle changes have a big impact on the final look of your application. The rotating dial at the bottom, for example, looks much more pleasing.

[@EnergeticWaves]

beautiful

[@Ravco99]

Do you have an example of Stock Ticker project for this type of board ?? Would love to get simple stock price updates on a nice little display

[@andymouse]

Awesome !.....cheers.

[@OffDayDontCall]

Nice.

[@10Kview]

User experience is important. Had to sub to check out more of your content

[@panagiotisvoulgaridis3914]

Great job.

[@Latvian3Dman]

thank You, will share on my Twitteron.

[@VolosProjects]

tnx Juris

[@seahawk_dk]

I have a "quick" idea, what about adding an Z-level (layers) so where (x1 = x2 && y1 = y2 then select x, y with highest z value) to simplify the UI development, I know it will cost memory. BTW, beautiful UI in your project

[@harryjohnson615]

That x1 counter, is that the speed our cash is leaving our accounts for energy burned? 🤣

[@charleswatt4397]

New here. Very nice designs! I want to design an improved speedometer for my golf cart. I may try using this display and your ideas.

[@VolosProjects]

hello Charles, welcome aboard. feel free to use any of my examples.cheers

[@2oldguysflyingblind631]

luv your channel bought u a coffee

[@VolosProjects]

thank you 😀