Try out these simple steps to display items on your m5stick. Connect your m5sticks to UI Flow (https://flow.m5stack.com) – instructions here if you haven’t tried already
1. Labels
A “Label” is an Object that you can fill with any text. You can pre-set the text of the Object before running a program to show a fixed text, OR you can change the text and other properties as your program runs.
To set up a label, click and drag the label icon onto the m5stick screen in UI Flow:
Clicking on the “Text” label pulls up several options – we’ll go through these now.
A) The “name” is the term that the m5stick uses to refer to this “object” amongst all other spaces. For example – if my name was JingleHeimerSmith, then yelling “JingleHeimerSmith!” into a crowded room would get your message to me (and no one else would think it was for them, unless they were ALSO JingleHeimerSmith, and then we’d be in a fine mess). You can change the name to whatever you want, but just remember that you’re going to use that name later to refer to the object you just created.
B, C) the x and the y are the positions of the object. Your screen is 135 pixels across, by 240 pixels tall. Specifying the x and the y says “where” the object should be.
You can change the x and y positions by:
- clicking and dragging the object across the screen
- Typing in different values into x and y
- Writing a program to adjust those positional values when the program runs (more on that later)
D, E, F, G) Color, Text, Font, and Rotation – pretty self-explanatory! Try them out and see what happens. Change the label to ShadTime!
H) Layer – becomes important when you have objects overlapping each other. So if you want to specify that one thing is “on top” of another thing, then you should change the layer numbers.
Suggested task: Just for fun, run your program on the m5stick. What you see on the screen, you’ll see on your device (i.e., hit the PLAY (or RUN) button at the top right while your device is connected).
2. Other Objects
It’s not just Text Labels you can display! Drag and drop other items onto the screen – Titles, Labels, Rectangles, Circles, Triangles, Lines – oh my! Play with all of them, and adjust the properties to see what they can do
Suggested task: make approximately the following screen, and name the circle something memorable (circleShad).
3. Adding images
To add an image, you need to load the image onto the m5stick. It can handle .jpg or .bmp images, as long as it’s smaller than 50 kB. When designing images, you’ll need to create them in your favorite program (max. dimensions 135 x 240 pixels!), and upload them using FILE MANAGER
Click the highlighted icon, click “add image”, and upload. Once uploaded, drag and drop an “image” object onto the screen, and set the “imagePath” to the file you just uploaded.
4. Changing the view while in a program
Here’s where things get really fun. The best way to figure out how this works is to download a sample code, and play with it. Change it up, and see what you can do.
Program #1: Display the current battery power on the screen. Unplug your m5stick and watch the battery drain. Make the following program yourself, or you can always download it HERE.
Program #2: Bouncing Ball! This one uses a little bit of “Logic”, “Math” and “Variables” to adjust the direction the ball is going in. Every time the “loop” runs, the position of the ball is updated. When it hits a wall, it reverses direction. Make the following program yourself, or DOWNLOAD
Challenges. Get the ball to bounce up and down instead of left to right. Change the colour on every bounce. Change the colour of the bars when hit. It just takes a few drags and drops, and the bravery to dive right in.
