Welcome back to the Mini Slot Machine Project with M5StickC Plus2. In the previous article, we covered some basic operations. In this article, we're going to have some fun - change the picture of the slot machine! The whole process is still very simple and doesn't require advanced programming knowledge. You can add as many pictures as you like to your slot machine as you like. How exciting! Let's dive in and get hands-on together!
Precondition
Software dependency: Arduino IDE, VScode or text, etc.
Hardware requirements: USB-C cable, M5StickCPlus2, etc.
Dependencies: M5StickCPlus2 library, Arduino library, etc.
Installation of Dependencies
1、First, let's pick out 1-10 images with a clean, white or transparent background, all perfectly sized at 150x150 pixels.
2、To convert the image into a hexadecimal array in RGB565 format (where each 16-bit unit is 0X0000), we have two options for you! The first method uses Windows and the handy tool Lcdimg2. Here's the process:
Start by downloading Lcdimg2 (you can find plenty of tutorials online if needed).Set the image resolution to 48x48 (this gives you 4608 hex units in the 0X00 format).We've written a small program that takes those 4608 units and converts them into 2304 hex units in the 0X0000 format, giving you the RGB565 format we need!
3、The second option is even cooler—just use ChatGPT! Here's the plan: Upload your image, and ChatGPT will resize it to 150x150 pixels for you.Then, it will work its magic and output the image as a .C file in RGB565 format, with each pixel in 0X0000 hexadecimal form.Fast, easy, and you get your image converted into the format you need without lifting a finger!
4、Once we have the .C file generated using either method, we’ll have a neatly structured hexadecimal binary dataset—just like the example shown. All we need to do is copy down this data, and we’re all set for the next step!
5、We create a new .h file in the image folder, name it as the name of the image (e.g. Ghostface.h), write the following code in the file, and save it.
6、Then open our slot_symbols.h file, and enter the following code.
7、Next, open our M5StickCPlus2_slot.ino project file. We've already covered the initial setup, and now we’ll move on to changing the picture. The number represents the *slot_symbols pointer array’s hexadecimal data for each image. For example, if we use the Ghostface image and place it in the first position, then in the symbolIndices array, you would write the number 0. Why 0? Because the starting index is 0. So, if you have two images, you'd write 0 and 1. If three, then 0, 1, 2. Keep in mind, it’s not recommended to place the same numbers next to each other, and the values in the symbolIndices array must stay within a reasonable range.
8、If you need to add more than one picture, just follow the same steps as before. You can add up to 10 pictures in total.
1、After completing the installation of the dependencies, open the good downloaded zip archive.
2、Connect the Plus2 to your computer using USB-C, select Tools->Port to choose your own port.
3、Click on compile and then click on upload when the compilation is complete.
Next Issue Preview
In the next update, we’ll make the final improvements to the slot machine by switching from manual to automatic stopping. With just one press, the five columns will stop in sequence, randomly, making the project more complete and much closer to the real-life slot machine experience!
