How to Display Text on M5StickC ESP32 Using Visuino

About: Arduino fan!

In this tutorial we will learn how to program ESP32 M5Stack StickC with Arduino IDE and Visuino to Display any text on LCD.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: What You Will Need

M5StickC ESP32: you can get it here

Visuino program: Download Visuino

Step 2: Start Visuino, and Select the M5 Stack Stick C Board Type

Start Visuino as shown in the first picture Click on the "Tools" button on the Arduino component (Picture 1) in Visuino When the dialog appears, select "M5 Stack Stick C" as shown on Picture 2

Step 3: In Visuino Add and Set Components

  1. Click on "M5 Stack Stick C" Board to select it
  2. In "Properties" window select "Modules" and click "+" to Expand, Select "Display ST7735" and click "+" to expand it,
  3. Set Orientation to "goRight" <this means how the text will be oriented

  4. Select "Elements" and click on the blue button with 3 dots...
  5. Elements Dialog will show
  6. In the Elements Dialog drag "Text Field" from the right side to the left

Click on the "Text Field1" on the left side to select it, then in the "Properties window" click on "Initial Value" to set default text like "Sample Text"

-also in properties windows set the X and Y, where you want to display this text on LCD, the default is 0, meaning it will start to show the text in the left top corner.

-You can also set the text size and the color if you want

Close the elements window

  • Optionally:

Click on "M5 Stack Stick C" Board to select it

In "Properties" window select "Modules" and click "+" to Expand, Select "Display ST7735" and click "+" to expand it and you will see "Background color" this is the default color of the display, change it to your favorite color, you can also set the display brightness, the default is 1 (max) you can set it to 0.5 or some other value to make it more dim.

Step 4: Optionally - Display Text Using "Text Value" Component

Once you have added "Text Field" element in the Elements dialog.

You can set the text using "Text Value" component.

  1. To do that, drag the "Text value" component and connect it to "M5 Stack Stick C" > "Text Field1" pin [In]
  2. In the properties window set the text that you would like to display

Step 5: Generate, Compile, and Upload the Arduino Code

  1. Click the Arduino icon on the toolbar, this will generate code and open the Arduino IDE. The button next to it will compile and send the code straight to the device. You will want to open the IDE the first time to make sure the COM port is set correctly. After that the Arduino IDE will save your settings.
  2. Once in the Arduino IDE make sure your Board, Speed, and Port are set correctly. You will most likely need to set the COM port from the sub menu, but the others should be set automatically. If you have more than one COM port try removing your M5Stick, look and see which ports remain, then reattach the M5Stick and see which one returns. That is it’s COM port.
  3. Then click Upload. This will Verify (compile) and Upload.If you check your M5Stick-C you will see the upper left corner blinking.

Step 6: Play

If you power the M5Sticks module, the display should start to show the text you set it.

Congratulations! You have completed your M5Sticks project with Visuino. Also attached is the Visuino project, that I created for this Instructable. You can download and open it in Visuino: https://www.visuino.com

  1. First file "StickC-Display-Text.visuino" is just setting text in elements window
  2. Second file "StickC-Display-Text-using-textvalue.visuino" is setting the text using "Text Value" component

Be the First to Share

    Recommendations

    • Instrument Contest

      Instrument Contest
    • Make it Glow Contest

      Make it Glow Contest
    • STEM Contest

      STEM Contest

    Discussions