How to Make your Project look Amazing
ฝัง
- เผยแพร่เมื่อ 8 ธ.ค. 2022
- 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/0cAg0r
Code (smooth graphics and anti aliased fonts) : github.com/VolosR/PowerMeter
Code regular functions: github.com/VolosR/OldWayExample
Code INTERNET CLOCK :github.com/VolosR/TDisplayS3M...
Don't forget to subscribe! If you want to support my work you can buy me coffee here: ko-fi.com/volosprojects - วิทยาศาสตร์และเทคโนโลยี
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!
Every day you amaze me more with your projects. They are incredible!
Wow! Great work man. Your interface building skills are phenomenal!
thank you my friend.
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 :)
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.
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 😀
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.
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.
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 🙂
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 😀
What a GREAT looking gauge! Thanks.
Thankyou for sharing what you have learnt. You've opened up a whole new way for me to make my projects way better. Subscribed.
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?
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!
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.
You are a madman! That looks fantastic!
Gorgeous design, looks very nice! 👍
Fantastic, thanks for turning us on to these graphic functions.
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 😁
Thank you for reviewing this board!
User experience is important. Had to sub to check out more of your content
This looks amazing! Looking forward to watching your other videos!
Tnx Joe, welcome aboard.
tanks for Providing these Videos to us, you're helping me out a lot!
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 :)
Thanks for this. Love the look!
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.
Love it. Subscribed immediately. Looking forward to watching your other videos.
Thank you :)
Keep 'em coming !!! Always a surprise...
Beautiful work. Thank you for sharing.
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 :)
And right there, you got a new subscriber ! Cant wait to go watch your other videos
tnx man, new video will be soon :)
Second.
Thanks for the inspiration. Hope to use these all around my home 🤠 someday. I have a lot to learn.
I will definitely be checking out your other projects.
Thank you
wow! that kWh meter looks awesome! Congrats. I have to build it.
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?
Great job on this project.
Excellent instructional video Volos, followed
Tnx James
Nice job, thank you for sharing it with us.
Smooth fonts it’s very interesting, thanks for sharing 🙂
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!
Very nice display !!!
Great video
Interesting project
Thanks for sharing your expirence with all of us 👍 😀
You're an artist.
It's fantastic! Thanks for share it
Aliased is pronounced like aylee’uhsd. You do phenomenal work sir!
brilliant - simply brilliant
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
Albeit looking for 1306 32x64 oled display info I found this great, that clock looks great, I'll be making one! ;-)
Stunning, I really want one.
Brilliant and thank you for sharing your knowledge
tnx Keith
yeah i am watching first time.. thanks for discription
any quickly changing number should be using a monospaced number font to avoid that jitter. really cleans up the presentation.
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.
Your are a pro WOW what a design
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.
Excellent video.
Holy crap, you've even simulated the scrolling of the vertical bar ticks in the decimal display.
Creative video, thank you :)
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 :)
Excellent project 👍
thanks for sharing!
You are awesome man!
Nice project, it will be better to see the digits rolling like the old mechanical counter but it needs more line codes.
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.
This is awesome!
Great job.
That is special, very special 10/10
Very nice!
Nice looking project. I would really like to see it scrolling the numbers up like what you are simulating.
It even works with my ESP Wover Kit 👍👍👍👍
Very nice project, TNX.
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
Good work, keep it going
Thank You! From Frisco, TX
Looks great! I'm using TFT_eSPI with a LilyGo T-Display 1.44 inch v1.1 display. I will move to AA fonts.
will it meshure mAh from batter18650?? work as meeter or is just animation ??!
very good job ! ❤
absolutely fantastic.
Many thanks!
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?
How connect this with old receiver 5.1 frontal usb?
Awesome !.....cheers.
Is there any simply counter project....with tiny display just with + and clear button?
Excellent
Any interest in verry large digits for the display? Just to show numbers that can be seen from a distance.
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😀😀
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 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 ).
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?
Well done! And your English is excellent.
tnx David 😀
beautiful
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.
Very nice video and channel.
vertically scrolling digits would be beautiful. Can the library do it?
thank You, will share on my Twitteron.
tnx Juris
Skeuomorphism is back, baby!
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.
Thanks!
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
Thank You