Using Sprites to Create an Arduino Speedometer | Beginner How To on Using and Compositing Sprites

[@ChrisZang]

Fantastic video and great explanations. I just converted one of my gauges to sprites. No more flickering! Thanks a lot! You are a scholar!

[@LearnEverythingAboutDesign]

Great! I would love to see if you want to share. [e-mail]. Flickering gauges suck :) I am working on adding more to this series.

[@horace577]

I could never have figured this out . . the programing tutorials are excellent. There is so much you can do with these displays, and they are cheaper than vegetables.

[@LearnEverythingAboutDesign]

Thanks Nicholas! I have some more planned using a different sprite library as well. These on the M5 stack don't make use of the entire tft eSpi library and my attempts to hack the library have not produced the results I wanted. Hoping to do more with warning lights and indicators popping up on gauges in the future. thanks for watching!

[@nathanchalecki4842]

Great but sad comparison, 😢

[@johnhughes1595]

Nicely explained. But you've missed a couple of important things. Ignoring for a moment the drawing of the digits for the speed (the last 3 lines of drawBackground), absolutely nothing changes in the background. You could draw the background ONCE, and then in plotGauge you'd simply do the dial.pushSprite. That's one of the main points of sprites: all you do is copy them to wherever they need to go, saving the re-construction time. (For a task like this, it's moot, because construction takes very little time, but as complexity grows, it's everything.) To do the text display, you'd use a smaller sprite that you actually DO change on each iteration. You can even, with some cleverness, avoid ever re-drawing the dial sprite at all, and just draw the pointer and text. Also, in your main loop, if you simply did "static int rot = 0; plotGauge(rot, "MPH"); rot = rot + 5; if (rot > 270) rot = 0; " you wouldn't need the "yield", because you'd implicitly be yielding on each invocation of loop(). Also...maybe it's a youTube thing, but every "less than" in your code has turned into "/\", so it won't compile. Also: lots of colors which should be "TFT_RED" are just "RED", etc

[@LearnEverythingAboutDesign]

Thanks for the info! As i likely mentioned in the video somewhere I am not a programmer so there are likely things that certainly can be optimized! After that video I did an image based sprite as a next step here kzbin.info/www/bejne/rZOno52lrcdoZ6s Also with the M5 stack the library they ported over eSPI library they didn't port it all so things like pushing sprites didn't work quite the same. For example I couldn't push the text but could only do the pushRotated then draw the text on the screen. At least from my initial tests. When doing this with images i wanted to "pushImage" but m5 never ported the entire TFTeSPI library over so that wasn't included sadly. So for example I could composite a sprite with a background, rotated needle and say a warning image with the m5Stack library. it works fine in the TFTeSPI library in another esp32 device though.

[@antonycosic5407]

Great video! I’ve been looking for a video explaining sprites and you’ve made an awesome one. Thank you so much! Keep up the great tutorials.

[@LearnEverythingAboutDesign]

Thanks Antony! I have another video I am trying to put together on drawing images on the screen from BMP converted to bytes vs pulling images from SD cars and making sprites with them. I have a few more options to figure out then I will add that option as well. It may or may not be part of the gauge series, but its a topic that could apply.

[@antonycosic5407]

@@LearnEverythingAboutDesign I have some gauges that I have drawn up and I’d be honoured if you would like to use them in your tutorial. I drew up several boat gauges to measure speed, RPM, oil and water temp and pressures along with battery bolts. I’m happy to send them to you as I was trying to use sprites to coordinate the dials and faces working together with alarm sprites. I can email them to you if you’re interested

[@LearnEverythingAboutDesign]

I'd be happy to. Send them to [e-mail] In the email let me know what board and display you are using and I will try to point out variations in the video. I can't promise I can get it to work but I will try.

[@peakfilm3465]

Your way of explaining code is excellent! Thank you…

[@LearnEverythingAboutDesign]

You are welcome!

[@M.Voelkel]

Danke, danke und nochmals danke für die Erklärungen - jetzt ist mir vieles im Klaren geworden. Baden-Württemberg, 13.06.´24

[@LearnEverythingAboutDesign]

You are welcome!!

[@Schroeder9999]

Awesome video. But as a someone who's just new to this, I do feel that there's way too much interruption going on as when you start to explain something, you tend to branch off to the side (albeit to related info), and then possibly branch off further to something (info related to the related info) before finally returning to the original thing that you had started explaining earlier. It can get pretty cryptic sometimes like multiple nested functions calls with references to references, if you get what I mean. I fell asleep a couple of times (my stack overflowed hahaha) on these two videos, but don't get me wrong. I kept coming back for more. But I do really appreciate that you had put in this mammoth amount of effort into this topic. Big kudos and huge thanks from me.

[@LearnEverythingAboutDesign]

I appreciate the comment! Sleep stories are pretty popular maybe I should rename it ;) In all serious though I am not a programmer and since my videos aren't scripted I do tend to ramble off when I think of something so 100% sure that is the case. I will take this feedback and try to be a little more pointed on my next programming video. Again thanks for taking the time to write a comment and sticking it out lol

[@Schroeder9999]

​@@LearnEverythingAboutDesign Hope I didn't sound too critical but thank you for making the video. There's a bunch of info in there you're sharing with viewers. I even saved them in my video list so that I can come back to it again and again for guidance.

[@LearnEverythingAboutDesign]

@@Schroeder9999 Not at all. good feedback!

[@Ilham-bf8ks]

Great video! Thanks I have been looking for videos explaining about this topic and your explanation was great. Thank you for the video

[@LearnEverythingAboutDesign]

You're very welcome!

[@kickbaktube]

ESP32-Chimera-Core library is a substitute of the original M5Stack. I'm still learning TFT_eSPI and this tutorial is great for understanding how sprites work. Thanks for the upload

[@LearnEverythingAboutDesign]

Thanks for the info! This is the next GFX library I am playing with when I have the time. github.com/lovyan03/LovyanGFX Basically how they ported TFTeSPI to M5 stack they left out the ability to pushImage to a sprite. which means we can't display icons or speed or anything other than the needle(unless you use the full library). I am told the LovyanGFX is faster and gets around that.

[@kickbaktube]

@@LearnEverythingAboutDesign Great info. I like faster haha😄

[@kickbaktube]

@@LearnEverythingAboutDesign I'm just going through the examples now. WOW just WOW

[@johnheitz7517]

👍 I really like your videos, Please continue doing Arduino ESP32 stuff.

[@LearnEverythingAboutDesign]

Thanks! I have a video game controller series that I have been slowly working on with the pcb design, housing and code. hopefully over the holidays i can dedicate some more time to it. It will be an esp32 based qtpy www.adafruit.com/product/5325

[@andymouse]

A big help...cheers.

[@LearnEverythingAboutDesign]

no problem

[@asciimation]

Oh cool, you do electronics too! Unlike the 3D modelling this is something I do know about and I've done a lot with micro controllers over the years. I've also done a lot with GPS as well, back when in car GPS was a new thing. When I worked in animatronics we used a lot of Teensy boards. I think my best Arduino based project was the Enigma machine in a pocket watch. I actually carry it as an everyday device. When you say you 'make' things and people ask what it's great to pull that out of a pocket and show them.

[@LearnEverythingAboutDesign]

Wow that is very cool! The electronics is a side hobby for me, but when I come across topics that take a good bit of my time to figure out or the info out there is lacking I try to cover it. One of my first electronics projects many years ago was building an AF ratio gauge for my car and an LED based tach. These were just using chips. As I got into arduinos the possibilities opened up! I have been planning a new PCB design series with Fusion that I am hoping to start releasing in the coming weeks making a usb game controller. Showing the PCB design phase and 3d design phase. I got a new printer I hope is up to the task. That enigma watch sounds amazing!

[@icarossavvides2641]

Interesting but, wouldn't it be better if the 'needle' sprite was an odd numbered width then it would rotate about the pivot point symmetrically?

[@LearnEverythingAboutDesign]

Sure. Since the sprite gets translated a bit when rotated on small displays it will always be a little chunky. On a larger display you might notice but yeah that is a good thing to do.

[@Dancopymus]

Hello friend; Definitely a great lesson on Sprites, however, very difficult for beginners. However, 1) I would really like to make an RPM Meter for a small 775 Motor (Tachometer + Opto Interrupter), using this library, but I have no idea how to make the code for the Arduino. Do you or anyone here have a code for this? 2) If I have a 'Gauge' design ready, is it possible to attach it to the Sprite, if I may say so? Or, does it not work that way? My sincere thanks.

[@LearnEverythingAboutDesign]

The first place I would start is learning to code with arduino. Do some basics because making a display and dealing with inputs, sprites and all that is going to be a task. There are samples out there for tachs on the arduino hub and places like instructables. projecthub.arduino.cc/PracticeMakesBetter/easy-peasy-tachometer-a629a4 If you are just getting started I would suggest just doing a numerical display and get the rest of your stuff working before worrying about doing a sprite. You can develop a sprite based gauge independent of the rest of the system and then combine them when you have it all working. At the core if you have a sensor you are reading once a revolution and displaying that all you really need is that number to feed into a gauge. In my video we used GPS speed but you would just feed in your rpm value.

[@Dancopymus]

Thanks a lot @@LearnEverythingAboutDesign

[@gazzacroy]

a really cool video. very very well explained. it hopped me a lot i was having trouble in my own project and this video came to help me :) co0l

[@LearnEverythingAboutDesign]

You're welcome! Glad to hear it!