How to Make your Project look Amazing

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 built-in 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 built-in 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 anti-alyzed 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 anti-aliased fonts look much better than normal anti-aliasing 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

Channel: Volos Projects

Views: 263,672

Keywords:

Id: AxJ3pf8yh5s

Length: 9min 26sec (566 seconds)

Published: Fri Dec 09 2022