How to Make your Project look Amazing
ฝัง
- เผยแพร่เมื่อ 30 ต.ค. 2024
- 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...
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
Thank you Mark. It still new board but i think they sell alot of them.
@@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
@@1islam1 *"...Islam, it's bullshit..."* Christopher Hitchens
Ordered before the end of the video :)
@@1islam1Just stop
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!
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.
I've just discovered your chanel, now I'm waiting impatiently for my S3 to be delivered. Love your work.
Thank you. I hope it will arive soon 😀
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.
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
Wow! Great work man. Your interface building skills are phenomenal!
thank you my friend.
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!
Tnx, i thing they can go ever further :)
Same 😁
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.
i agree :) Thank you!
I can't believe how beautiful it looks. Great idea with the electricity meter, congratulations
Thank you, i checked your chanell, you have good content and one more subscriber. I always wanted to play with radios.
@@VolosProjects Thanks a lot :)
any quickly changing number should be using a monospaced number font to avoid that jitter. really cleans up the presentation.
Your projects are amazing! They have inspired me to purchase two S3 boards to experiment with. Keep the cool videos coming!
Thank you, you made good purchase, enjoj your t-displays :)
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.
Would love to see this in action!
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 :)
Tnx Brad, dont spend all of your money 😀
wow! that kWh meter looks awesome! Congrats. I have to build it.
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 🙂
Thank you for reviewing this board!
Thankyou for sharing what you have learnt. You've opened up a whole new way for me to make my projects way better. Subscribed.
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.
omg, realy 😀 thank you,do you have link. Thank you,best wishes to your family.
not sure if first link worked but will try again : th-cam.com/video/dZttHOxIoek/w-d-xo.html
@@VolosProjects That's so cool! These are two of my favorite channels, awesome to see them interacting.
What a GREAT looking gauge! Thanks.
Nice looking project. I would really like to see it scrolling the numbers up like what you are simulating.
Aliased is pronounced like aylee’uhsd. You do phenomenal work sir!
I will definitely be checking out your other projects.
Thank you
Excellent instructional video Volos, followed
Tnx James
Holy crap, you've even simulated the scrolling of the vertical bar ticks in the decimal display.
tanks for Providing these Videos to us, you're helping me out a lot!
You are a madman! That looks fantastic!
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 ).
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.
And right there, you got a new subscriber ! Cant wait to go watch your other videos
tnx man, new video will be soon :)
Skeuomorphism is back, baby!
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.
Every day you amaze me more with your projects. They are incredible!
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!
I am not sure i undertanded you. You mean , store numbers in arrays of images?
@@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 :)
yeah i am watching first time.. thanks for discription
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.
hahah, nice to hear that😀😀
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.
Great job on this project.
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!
tnx Joe, i will also try LVGL library very soon. how hard is to setup,do you useadditional software for design?
It even works with my ESP Wover Kit 👍👍👍👍
Your are a pro WOW what a design
Keep 'em coming !!! Always a surprise...
Love it. Subscribed immediately. Looking forward to watching your other videos.
Thank you :)
Thanks for this. Love the look!
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.
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.
Very nice display !!!
You're an artist.
Albeit looking for 1306 32x64 oled display info I found this great, that clock looks great, I'll be making one! ;-)
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 :)
thank you Dominik. I am glad you love content, playing wit deep sleep is on my list. Thank you again :)
Looks great! I'm using TFT_eSPI with a LilyGo T-Display 1.44 inch v1.1 display. I will move to AA fonts.
Gorgeous design, looks very nice! 👍
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.
That is special, very special 10/10
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?
Nice project, it will be better to see the digits rolling like the old mechanical counter but it needs more line codes.
Good work, keep it going
Very nice video and channel.
It's fantastic! Thanks for share it
Second.
Thanks for the inspiration. Hope to use these all around my home 🤠 someday. I have a lot to learn.
Fantastic, thanks for turning us on to these graphic functions.
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
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.
Well done! And your English is excellent.
tnx David 😀
Thank You! From Frisco, TX
This looks amazing! Looking forward to watching your other videos!
Tnx Joe, welcome aboard.
brilliant - simply brilliant
Great video
Interesting project
Thanks for sharing your expirence with all of us 👍 😀
Excellent video.
vertically scrolling digits would be beautiful. Can the library do it?
absolutely fantastic.
Many thanks!
Great video. I need to get me a LILLYGO and have a play
Brilliant and thank you for sharing your knowledge
tnx Keith
Creative video, thank you :)
Not a fan of Arduino, but very well Done demo!!!!
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.
thank You, will share on my Twitteron.
tnx Juris
You are awesome man!
Nice job, thank you for sharing it with us.
Beautiful work. Thank you for sharing.
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.
i agree, i hope someone will make something like this
I hope Lily starts to send you free boards, doing some awesome stuff!
tnx, yes i recieved free board few times, not this one, i payed this one 😀
Very nice project, TNX.
Hello Volos and a big thank you for your tutorials, without them I would have big problems with my T-Display !
I have a question about fonts :
I tried your powermeter sketch on my T-Display and it works without problems.
Than I tried to change one of the fonts with "Orbitron_Light_24.h" and after that the powermeter sketch doesn't compile and shows errors in the Orbitron_Light_24.h file.
In fact when looking with notepad the internal structure of Orbitron_Light_24.h is not the same than the structure of the fonts files included in your sketch.
Does this mean that the anti-aliased font files are "special" fonts, and is it possible to modify per example Orbitron_Light_24.h so it works in a sketch with anti-aliased fonts ?
Yes ani aliased fonts are diferent, it shoud work but you will need to use function setFreeFont. Check my tutorial about fonts and tft_espi
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.
Smooth fonts it’s very interesting, thanks for sharing 🙂
This is awesome!
Stunning, I really want one.
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?
thanks for sharing!
Is there any simply counter project....with tiny display just with + and clear button?
Excellent project 👍
luv your channel bought u a coffee
thank you 😀
Very nice!
very good job ! ❤
Any interest in verry large digits for the display? Just to show numbers that can be seen from a distance.
Excellent
Ok, just for fun, I downloaded the Internet Clock code, totally expecting to get a lot of errors due to libraries not on my system.
To my total shock, it compiled perfectly! LOL Somehow, at some time, I must have installed those libs.
I do have a question, however. As I don't have the T3 board with display, as yet, I'll be using an ESP32 WROOM board with a 1.8 Inch TFT LCD Display Module with SPI Interface, ST7735s, 128x160 res.
Specifically, which file do I edit to change the pin connections for this display so that it will work?
And, is there a way to "tell" the library which pins I want to use for each line?
Thanks in advance.
How about PlatformIO with vscode for automatic dependency downloading
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?
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.
hello Charles, welcome aboard. feel free to use any of my examples.cheers
Can you make a humidity sensor with room temp? Such project would be helpful in home environments and connect it to home assistant