Тёмный
No video :(

How to Make your Project look Amazing 

Volos Projects
Подписаться 97 тыс.
Просмотров 266 тыс.
50% 1

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

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

 

28 авг 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 225   
@markmccornack7983
@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
@VolosProjects Год назад
Thank you Mark. It still new board but i think they sell alot of them.
@1islam1
@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
@harryjohnson615 Год назад
@@1islam1 *"...Islam, it's bullshit..."* Christopher Hitchens
@SteelyEyedH
@SteelyEyedH Год назад
Ordered before the end of the video :)
@RoboticNerd
@RoboticNerd Год назад
​@@1islam1Just stop
@TurpInTexas
@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
@misteragony Год назад
Wow! Great work man. Your interface building skills are phenomenal!
@VolosProjects
@VolosProjects Год назад
thank you my friend.
@IncaTrails
@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 🙂
@kennethbeal
@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.
@ytfp
@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
@VolosProjects Год назад
i agree :) Thank you!
@dennyfox3139
@dennyfox3139 Год назад
Your projects are amazing! They have inspired me to purchase two S3 boards to experiment with. Keep the cool videos coming!
@VolosProjects
@VolosProjects Год назад
Thank you, you made good purchase, enjoj your t-displays :)
@ModBay
@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
@VolosProjects Год назад
Tnx, i thing they can go ever further :)
@wrongtown
@wrongtown Год назад
Same 😁
@Billcasiopost
@Billcasiopost Год назад
I've just discovered your chanel, now I'm waiting impatiently for my S3 to be delivered. Love your work.
@VolosProjects
@VolosProjects Год назад
Thank you. I hope it will arive soon 😀
@wtmayhew
@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
@r7boatguy Год назад
Would love to see this in action!
@bhagmeister
@bhagmeister 4 месяца назад
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.
@stefanf.5439
@stefanf.5439 Год назад
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
@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
@MirkoPavleskiMK
@MirkoPavleskiMK Год назад
I can't believe how beautiful it looks. Great idea with the electricity meter, congratulations
@VolosProjects
@VolosProjects Год назад
Thank you, i checked your chanell, you have good content and one more subscriber. I always wanted to play with radios.
@MirkoPavleskiMK
@MirkoPavleskiMK Год назад
@@VolosProjects Thanks a lot :)
@arlo4051
@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
@VolosProjects Год назад
omg, realy 😀 thank you,do you have link. Thank you,best wishes to your family.
@arlo4051
@arlo4051 Год назад
not sure if first link worked but will try again : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dZttHOxIoek.html
@kennethbeal
@kennethbeal Год назад
@@VolosProjects That's so cool! These are two of my favorite channels, awesome to see them interacting.
@transientaardvark6231
@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 ).
@cam_DA_Hawkdriver
@cam_DA_Hawkdriver Год назад
Aliased is pronounced like aylee’uhsd. You do phenomenal work sir!
@jull1234
@jull1234 Год назад
any quickly changing number should be using a monospaced number font to avoid that jitter. really cleans up the presentation.
@desmond-hawkins
@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.
@brad7141
@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
@VolosProjects Год назад
Tnx Brad, dont spend all of your money 😀
@kikmedown
@kikmedown Год назад
Second. Thanks for the inspiration. Hope to use these all around my home 🤠 someday. I have a lot to learn.
@TravisKelleher
@TravisKelleher 8 месяцев назад
Thank you for reviewing this board!
@fermintm
@fermintm Год назад
Every day you amaze me more with your projects. They are incredible!
@joachimsaupe7062
@joachimsaupe7062 Год назад
What a GREAT looking gauge! Thanks.
@santopino2546
@santopino2546 Год назад
Holy crap, you've even simulated the scrolling of the vertical bar ticks in the decimal display.
@nikthefix8918
@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
@VolosProjects Год назад
I am not sure i undertanded you. You mean , store numbers in arrays of images?
@nikthefix8918
@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 :)
@jacksonvillereclaimedwood6709
You are a madman! That looks fantastic!
@thepapatech2067
@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.
@juschu85
@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
@VolosProjects Год назад
hahah, nice to hear that😀😀
@desparky
@desparky 11 месяцев назад
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
@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
@VolosProjects Год назад
tnx Joe, i will also try LVGL library very soon. how hard is to setup,do you useadditional software for design?
@michealmorrow1481
@michealmorrow1481 8 месяцев назад
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.
@nick066hu
@nick066hu Год назад
wow! that kWh meter looks awesome! Congrats. I have to build it.
@dominik3512
@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
@VolosProjects Год назад
thank you Dominik. I am glad you love content, playing wit deep sleep is on my list. Thank you again :)
@ATS3788
@ATS3788 Год назад
It even works with my ESP Wover Kit 👍👍👍👍
@rowenarrow
@rowenarrow Год назад
I will definitely be checking out your other projects.
@VolosProjects
@VolosProjects Год назад
Thank you
@10Kview
@10Kview Год назад
User experience is important. Had to sub to check out more of your content
@no_onebanana7167
@no_onebanana7167 Год назад
tanks for Providing these Videos to us, you're helping me out a lot!
@vinyltheif
@vinyltheif Год назад
Albeit looking for 1306 32x64 oled display info I found this great, that clock looks great, I'll be making one! ;-)
@ILFforever
@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.
@dtewksbury
@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.
@Nicolas_dG
@Nicolas_dG Год назад
And right there, you got a new subscriber ! Cant wait to go watch your other videos
@VolosProjects
@VolosProjects Год назад
tnx man, new video will be soon :)
@pevlabs
@pevlabs Год назад
Fantastic, thanks for turning us on to these graphic functions.
@archivushka
@archivushka Год назад
Skeuomorphism is back, baby!
@CaptG4321
@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.
@labiadh_chokri
@labiadh_chokri Год назад
Nice project, it will be better to see the digits rolling like the old mechanical counter but it needs more line codes.
@Hrshgn
@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.
@JoeBurnett
@JoeBurnett Год назад
This looks amazing! Looking forward to watching your other videos!
@VolosProjects
@VolosProjects Год назад
Tnx Joe, welcome aboard.
@Punkrwt
@Punkrwt Год назад
yeah i am watching first time.. thanks for discription
@michealmorrow1481
@michealmorrow1481 8 месяцев назад
Nice looking project. I would really like to see it scrolling the numbers up like what you are simulating.
@tubeDude48
@tubeDude48 Год назад
Keep 'em coming !!! Always a surprise...
@harryjohnson615
@harryjohnson615 Год назад
That is special, very special 10/10
@MWArduino
@MWArduino Год назад
brilliant - simply brilliant
@jeffvenqueleir2036
@jeffvenqueleir2036 Год назад
Your are a pro WOW what a design
@frankhovis
@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
@VolosProjects Год назад
i agree, i hope someone will make something like this
@Janktzoni
@Janktzoni Год назад
You're an artist.
@Nichetronix
@Nichetronix Год назад
Thanks for this. Love the look!
@andre-7423
@andre-7423 Год назад
vertically scrolling digits would be beautiful. Can the library do it?
@TinyMaths
@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.
@I000I
@I000I Год назад
Gorgeous design, looks very nice! 👍
@UgoTheEngineer
@UgoTheEngineer Год назад
Great job on this project.
@quanchyplimp
@quanchyplimp Год назад
Very cool indeed. I'm always modelling interfaces using Qt/QML. I have a few ESP8266 boards and ESP32 but not for interfaces, but IR relay boards for IR control of hifi, etc. My next purchase will be one of these boards just to play with and perhaps integrate into a future project, perhaps a speedometer for my electric bike. Either way, I do like creating UI's.
@CanalBrunoP
@CanalBrunoP Год назад
Very cool, I didn't know about this tool. Do you know other tools that can model interfaces for embedded circuits?
@contractorwolf
@contractorwolf Год назад
Excellent instructional video Volos, followed
@VolosProjects
@VolosProjects Год назад
Tnx James
@waynehawkins654
@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?
@TomLeonard-ns2hb
@TomLeonard-ns2hb Год назад
Not a fan of Arduino, but very well Done demo!!!!
@avejst
@avejst Год назад
Great video Interesting project Thanks for sharing your expirence with all of us 👍 😀
@squidben5780
@squidben5780 Год назад
Very nice display !!!
@RBurwell
@RBurwell Год назад
Love it. Subscribed immediately. Looking forward to watching your other videos.
@VolosProjects
@VolosProjects Год назад
Thank you :)
@pixitha
@pixitha Год назад
I hope Lily starts to send you free boards, doing some awesome stuff!
@VolosProjects
@VolosProjects Год назад
tnx, yes i recieved free board few times, not this one, i payed this one 😀
@Ravco99
@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
@sagster
@sagster Год назад
Great video. I need to get me a LILLYGO and have a play
@temyraverdana6421
@temyraverdana6421 Год назад
It's fantastic! Thanks for share it
@vegansynths7757
@vegansynths7757 11 месяцев назад
absolutely fantastic.
@VolosProjects
@VolosProjects 11 месяцев назад
Many thanks!
@CiaranWhelan
@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.
@bimmerboard
@bimmerboard Год назад
Well done! And your English is excellent.
@VolosProjects
@VolosProjects Год назад
tnx David 😀
@profGenki
@profGenki Год назад
Smooth fonts it’s very interesting, thanks for sharing 🙂
@zz3709
@zz3709 Год назад
You are awesome man!
@Keith12001
@Keith12001 Год назад
Brilliant and thank you for sharing your knowledge
@VolosProjects
@VolosProjects Год назад
tnx Keith
@robertparenton7470
@robertparenton7470 Год назад
Thank You! From Frisco, TX
@aliaghil1
@aliaghil1 Год назад
Nice job, thank you for sharing it with us.
@robertrobert5583
@robertrobert5583 Год назад
Beautiful work. Thank you for sharing.
@seahawk_dk
@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
@leehewitt9559
@leehewitt9559 Год назад
Excellent video.
@thehappycoder3760
@thehappycoder3760 Год назад
Stunning, I really want one.
@eziovieira6664
@eziovieira6664 Год назад
Good work, keep it going
@Wess-S
@Wess-S Год назад
This is awesome!
@darklord_ice
@darklord_ice 7 месяцев назад
I'm wondering: wouldn't it be possible saving a lot of time by importing a prepared background image (which can be easily done by Photoshop) and just putting the antialiased text on it?
@Tensquaremetreworkshop
@Tensquaremetreworkshop Год назад
Hi, just got one of these modules. In the IDE you have the device set to 'ESP32S3 Dev Module'. My (latest) version of IDE 2.0.4 does not offer that module. Where did you get it from?
@d.d.9731
@d.d.9731 Год назад
Can you make a humidity sensor with room temp? Such project would be helpful in home environments and connect it to home assistant
@electronic7979
@electronic7979 Год назад
Excellent project 👍
@Latvian3Dman
@Latvian3Dman Год назад
thank You, will share on my Twitteron.
@VolosProjects
@VolosProjects Год назад
tnx Juris
@RixtronixLAB
@RixtronixLAB 4 месяца назад
Creative video, thank you :)
@tatavox1408
@tatavox1408 Год назад
very good job ! ❤
@vinayakjadhav1719
@vinayakjadhav1719 Год назад
Very nice video and channel.
@chrismayer8990
@chrismayer8990 Год назад
thanks for sharing!
@electronics.unmessed
@electronics.unmessed Год назад
Very nice!
@nicoladellino8124
@nicoladellino8124 Год назад
Very nice project, TNX.
@charleswatt4397
@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
@VolosProjects Год назад
hello Charles, welcome aboard. feel free to use any of my examples.cheers
@meisuci4708
@meisuci4708 Год назад
Is there any simply counter project....with tiny display just with + and clear button?
@2oldguysflyingblind631
@2oldguysflyingblind631 Год назад
luv your channel bought u a coffee
@VolosProjects
@VolosProjects Год назад
thank you 😀
@ismzaxxon
@ismzaxxon Год назад
Any interest in verry large digits for the display? Just to show numbers that can be seen from a distance.
Далее
Best ESP32 board with AMOLED display - LilyGo T4 S3
13:35
🛑самое грустное видео
00:10
Просмотров 164 тыс.
Woman = best friend🤣
00:31
Просмотров 3,2 млн
DIY haptic input knob: BLDC motor + round LCD
2:11
Просмотров 2,2 млн
SquareLine Studio AND ESP32 - Tutorial Part 1
13:16
Просмотров 25 тыс.
Building a haptic input knob from scratch!
11:29
Просмотров 1,1 млн
Try these 16 Brilliant ESP32 projects!!!
11:18
Просмотров 570 тыс.
The EASIEST Way to Connect to a Car's CAN Bus
4:46
Просмотров 266 тыс.
🛑самое грустное видео
00:10
Просмотров 164 тыс.