How to Make your Project look Amazing
HTML-код
- Опубликовано: 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!
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 :)
Every day you amaze me more with your projects. They are incredible!
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.
What a GREAT looking gauge! Thanks.
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.
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!
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!
You are a madman! That looks fantastic!
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 😀
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 😀
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?
Gorgeous design, looks very nice! 👍
This looks amazing! Looking forward to watching your other videos!
Tnx Joe, welcome aboard.
Fantastic, thanks for turning us on to these graphic functions.
Thanks for this. Love the look!
Thankyou for sharing what you have learnt. You've opened up a whole new way for me to make my projects way better. Subscribed.
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 😁
Keep 'em coming !!! Always a surprise...
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.
User experience is important. Had to sub to check out more of your content
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.
tanks for Providing these Videos to us, you're helping me out a lot!
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 :)
Great job on this project.
Beautiful work. Thank you for sharing.
Love it. Subscribed immediately. Looking forward to watching your other videos.
Thank you :)
I will definitely be checking out your other projects.
Thank you
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.
Nice job, thank you for sharing it with us.
wow! that kWh meter looks awesome! Congrats. I have to build it.
It's fantastic! Thanks for share it
Stunning, I really want one.
Very nice display !!!
Excellent instructional video Volos, followed
Tnx James
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 :)
You're an artist.
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!
Great video
Interesting project
Thanks for sharing your expirence with all of us 👍 😀
brilliant - simply brilliant
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.
Brilliant and thank you for sharing your knowledge
tnx Keith
Smooth fonts it’s very interesting, thanks for sharing 🙂
This is awesome!
You are awesome man!
Very nice!
Excellent video.
Aliased is pronounced like aylee’uhsd. You do phenomenal work sir!
Very nice project, TNX.
Excellent project 👍
Thank You! From Frisco, TX
Albeit looking for 1306 32x64 oled display info I found this great, that clock looks great, I'll be making one! ;-)
very good job ! ❤
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.
thanks for sharing!
Good work, keep it going
Your are a pro WOW what a design
Nice project, it will be better to see the digits rolling like the old mechanical counter but it needs more line codes.
Great job.
Creative video, thank you :)
absolutely fantastic.
Many thanks!
That is special, very special 10/10
beautiful
Awesome !.....cheers.
It even works with my ESP Wover Kit 👍👍👍👍
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
Looks great! I'm using TFT_eSPI with a LilyGo T-Display 1.44 inch v1.1 display. I will move to AA fonts.
Nice looking project. I would really like to see it scrolling the numbers up like what you are simulating.
Great video
Excellent
any quickly changing number should be using a monospaced number font to avoid that jitter. really cleans up the presentation.
yeah i am watching first time.. thanks for discription
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 : ruclips.net/video/dZttHOxIoek/видео.html
@@VolosProjects That's so cool! These are two of my favorite channels, awesome to see them interacting.
Отлично! Хорошо сделано.
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, will share on my Twitteron.
tnx Juris
Well done! And your English is excellent.
tnx David 😀
Very nice video and channel.
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
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 :)
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.
That is insane 😳👏
Thank you William
Thanks!
Holy crap, you've even simulated the scrolling of the vertical bar ticks in the decimal display.
Thank You
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.
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😀😀
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.
Great video. I need to get me a LILLYGO and have a play
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 ).
Skeuomorphism is back, baby!
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.
Nice.
Молодец! Круто!
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
vertically scrolling digits would be beautiful. Can the library do it?