In this video we are going to carry on with our Speedo series and learn the next logical step. Creating a gauge from an Image. For this example we will take a PNG image of a Gauge as well as a Needle, turn them into Sprites and then into a working gauge. This series will continue to expand on this topic allowing the user to select multiple backgrounds but understanding the foundation is key.

Here are the image to CPP converters used in the video.
https://javl.github.io/image2cpp/
https://sourceforge.net/projects/lcd-...

I am using an M5Stack but you can use whatever setup you have as long as you know how to display basics on the screen. If you are not using an M5Stack you need to have the eSPI library from Bodmer. https://github.com/Bodmer/TFT_eSPI


To follow along you should make your own 240x240px (or any size that fits your needs) image as a bitmap or png. We will walk through how to convert it to a byte array, how to deal with issues and how to force transparency so the sweeping needle doesn't wash out anything under it.

00:00 Introduction
03:00 Image Conversion to CPP
25:30 Creating a .h tab in an Arduino Sketch for an image
36:00 Code to Push an Image byte to an LCD Display
46:02 What to do when the color is wrong - Byte Swap
51:02 Creating the needle for the gauge
1:00:50 How to handle swapping pixels to transparent ones
1:04:40 Creating the Sprites with the byte arrays
1:28:38 Making a For Loop to Test the Gauge
1:35:32 Testing the Animation and Review
1:46:11 Conclusion