04.05.2024

Hello my friends today I will show you. something useful I find that few new. functions actually I don't know I'm not. sure if they are new uh but I have never. used them. I find them. accidentally Arduino ID showed them to. me and using them I was able to create. this. the main topic of this video is user. interface and how to make good looking. project. if you are new here you are probably. confused now. let me explain you a bit so this is. small YouTube channel and on this. channel I'm sharing what I have learned. while playing with different development. boards. I'm using mostly esp32 boards with. builtin display I don't use boards. without display anymore because my. videos are related to. to this place. really go t display S3. is currently. my favorite development board. and you can get it directly from the. Lily gold site link is in description.

Make sure to choose right version for. you there is version with touch screen. version without pins. like this one. and wheat pins. like this one. so I'm using. these. regular version without touch support. on my channel you can find many. tutorials and examples. for this board and here is new. example. this is maybe my best looking project. right now it is simple counter but this. code is easy to modify for example I can. use it as an internet clock yes another. internet clock. to be honest I stole an idea for this. design I find that this smart watch on. the internet and I wanted to recreate or. to replicate that design on. this board and here it is aligned by. line rectangle by a rectangle after some. time I managed to recreate. smartwatch. design on this little goatee display. board you can find code for internet.

Clock and. this counter in description but point of. this video is not internet clock. point of this video is designed and how. to make something that look nice. I'm using DFT SPI library because it is. beginner friendly and if you are patient. you can get really nice results yes it. takes time to program this if you check. my code you will notice that I used many. simple drawing functions to draw all. these elements lines rectangles dots and. circles. okay let's back on the topic I find a. new useful functions. let me explain this way until now I. mostly used standard functions for lines. rectangles round rectangles and circles. and I also mostly use builtin fonts. like font 2 font 4 and small font zero. this is how. this project would look like. if I made it two weeks ago. and this is how it looks like now. can you see the difference.

A new version looks much better. for example. here. here are some rectangles with gradient. fill. also circles. and round rectangles are smooth. you can see this little circle for. example here and here. I'm not sure can you notice that but on. this version It's. much more nicer than. here. but the biggest difference is. phones. for the first time I use an antialyzed. phones I hope I pronounce this correctly. probably not. and now project looks. much better. I was afraid that using and loading. these phones would take lots of time but. it's not that bad in the corner. we can see. current FPS. of each project so this one is. 33.5 FPS. and this one with smooth graphic and. nice font is 29.3. so difference is only. a few frames. and this is still. pretty fast for a development board and. for. display of this size and for my needs.

So here they are functions that can help. you to make a better looking and. smoother graphics. alternative to fill Circle function is. fill smooth Circle function. an alternative to fill. round rectangle function is feel smooth. around a rectangle these functions are. practically the same but in smooth. function you will also you will also. need to Define background color so. function will take one more argument. also I use the functions for gradient. rectangles they are two versions. version for vertical gradient and for. for horizontal gradient. you will also need to Define two colors. and Library will do the rest here you. can see. results or example they are simple to. use but effective. but the biggest difference is in fonts. antialiased fonts look much better than. normal antialiasing is a method to. smoothing the these rough edges.

Uh in TF TFT SPI Library you have many. examples for these phones and you have. many examples for smooth graphics and. for these functions also I will share my. both of my examples so you can compare. them and learn from them. this code is very easy to modify so you. can use this for any of your projects. for example you can hook up some sensor. and show values here or you can just use. this as Internet clock. sketch is also in description. I hope you learned something today. I hope you learned something new in this. video and I hope you will learn. something new while playing with these. functions and sketches. like anything else this takes takes time. and lots of practice. but you don't need to be professional. designer you can try to recreate. something you'll find that you found. online. if you watched the whole video please.

leave like please leave comment. tell me what you think. also. it would be very helpful if you. I don't know feel free to check my other. videos. and if you are new here I would like to. see new subscribers on my channel. and new members of these this community. together we can learn faster. and if you want to support So to support. my work you can buy me a coffee link is. also in description. thank you all see you very soon. bye and have a nice day. goodbye