Scratch Visual Programming for ESP32

Scratch Visual Programming for ESP32

Prerequisites

• Basic familiarity with Scratch or other block-based programming interfaces
• An ESP32 development board

Key Concepts

What is visual programming?

Visual programming lets users build programs by dragging and dropping logic blocks instead of writing C++ syntax. Blocks represent programming concepts such as loops, conditionals, and variable operations — users simply combine them like puzzle pieces.

Why is visual programming a good fit for ESP32?

ESP32’s hardware interaction (LED blinking, sensor reading, Wi-Fi connection) lets students see the physical results of programming immediately. Visual programming is particularly valuable for:

• K-12 Education: Students learn programming logic without syntax frustration
• Rapid Prototyping: Quickly test hardware ideas without writing code
• Non-Developer Audiences: Product managers, designers, and educators quickly grasp ESP32 capabilities
• Workshop Settings: Short sessions focused on hardware interaction, not coding

What visual programming tools support ESP32?

Tool	Based On	Platform	Code Generated	Best For
mBlock	Scratch 3.0	Desktop/Web	Arduino C++	K-12 STEM programs
Mixly	Google Blockly	Desktop (multi-OS)	Arduino C++	Chinese education market
ArduBlock	OpenBlocks	Arduino IDE plugin	Standard Arduino code	Transitioning from blocks to text
Arduino PLC IDE	-	Desktop	-	Industrial (not recommended for ESP32)

What makes mBlock stand out?

mBlock is the most mature Scratch-based platform for ESP32. It supports:

• Drag-and-drop blocks generating Arduino C++ code
• Switchable block and code views
• Built-in serial monitor
• Direct upload to ESP32
• Wi-Fi and MQTT block extensions

Mixly is the go-to choice for the Chinese education market (~100 MB lightweight install, Chinese/English interface). ArduBlock is best for users already working in Arduino IDE who want a gradual transition.

Implementation Steps

How do I install mBlock and connect the ESP32?

1. Download mBlock from mblock.makeblock.com and install the desktop application
2. Launch mBlock, go to Devices tab, and add a new device
3. Search for “Arduino” or “ESP32” and select the appropriate board (e.g., “Arduino Uno” — mBlock uses this as a generic code generator)
4. Connect the ESP32 via USB

Note: mBlock generates Arduino C++ code uploaded via the standard Arduino upload process. You need the ESP32 Arduino Core installed first (see 01-04).

How do I create my first blink program?

Drag and drop the following blocks in order:

1. From Events, drag “when Arduino starts”
2. From Control, drag “forever” loop
3. Inside the loop, add in sequence:
   • Pins → “set pin 2 to HIGH”
   • Control → “wait 1 seconds”
   • Pins → “set pin 2 to LOW”
   • Control → “wait 1 seconds”

when Arduino starts
  forever
    set pin 2 to HIGH
    wait 1 seconds
    set pin 2 to LOW
    wait 1 seconds

Click Upload to compile and upload. The built-in LED on most ESP32 DevKits (GPIO 2) should start blinking immediately.

How do I add sensor reading?

Using a DHT11 temperature/humidity sensor as an example:

1. Connect DHT11 to ESP32: VCC → 3.3V, DATA → GPIO 4, GND → GND
2. In mBlock, search and add the “DHT11” extension from the Extensions menu
3. Use the blocks inside a “forever” loop:

when Arduino starts
  forever
    set variable temperature to (read temperature from DHT11 pin 4)
    set variable humidity to (read humidity from DHT11 pin 4)
    Serial print (join "Temp: " temperature)
    Serial print (join " Humidity: " humidity)
    Serial print newline
    wait 5 seconds

Open the serial monitor to see live temperature and humidity data.

What C++ code is generated behind the blocks?

Switch to Code View — mBlock displays the Arduino C++ code corresponding to your blocks:

#include <Arduino.h>
#include <DHT.h>

DHT dht(4, DHT11);
float temperature = 0;
float humidity = 0;

void setup() {
  Serial.begin(115200);
  dht.begin();
  pinMode(2, OUTPUT);
}

void loop() {
  temperature = dht.readTemperature();
  humidity = dht.readHumidity();
  Serial.print("Temp: ");
  Serial.print(temperature);
  Serial.print(" Humidity: ");
  Serial.print(humidity);
  Serial.println();
  delay(5000);
}

This is the most powerful learning feature of visual tools: students can visually see how their blocks translate into real code, building a bridge from block-based to text-based programming.

Verification

• mBlock (or chosen tool) successfully installs and detects the ESP32
• The blink program uploads and executes correctly
• The sensor reading program displays correct values in the serial monitor
• Generated C++ code can be viewed and understood
• The board can be switched between block and code views

Troubleshooting

The board is not detected in mBlock — what now?

This is usually a USB driver issue:

1. Install the CP2102 or CH340 driver (depending on your board’s chip)
2. In mBlock, go to Connect and select the correct USB port
3. Restart mBlock after installing the driver

Code compiles but fails to upload?

Check that ESP32 board support is installed in the Arduino IDE. mBlock relies on the background Arduino IDE for compilation:

1. Manually install ESP32 board support in Arduino IDE first
2. In mBlock, verify the upload settings point to the correct board
3. Manually upload the exported .ino file via Arduino IDE if needed

Blocks for a specific sensor are not available?

1. Check if an extension exists for your sensor in the mBlock extension library
2. Use the “custom block” feature to write a simple Arduino code snippet
3. Switch to Arduino IDE or PlatformIO for unsupported sensors

Best Practices

• Block view for logic learning, code view for syntax transition: The biggest advantage is showing the connection between blocks and code
• Start with mBlock for K-12: Best ESP32 support, largest block library, and most classroom resources
• Limit visual programming to introductory content: Transition to text-based programming once logic is understood (typically after 4-8 sessions)
• Combine with physical computing: Most engaging when connected to real LEDs, sensors, and motors
• Use for pre-sales demos: An excellent way to show non-technical buyers how ESP32 works without showing code

Summary

1. Visual programming tools (mBlock, Mixly, ArduBlock) enable ESP32 programming without writing C++ code
2. mBlock is the most comprehensive option, supporting ESP32 with extensions for Wi-Fi, MQTT, and common sensors
3. Visual tools generate standard Arduino C++ code — students can see the code behind the blocks
4. Best suited for K-12 education, rapid prototyping, and non-developer audiences
5. Visual programming should be a stepping stone to text-based programming (Arduino IDE or PlatformIO)

References

• mBlock Official Site
• Mixly (BNU)
• ArduBlock
• Scratch 3.0

Building a commercial IoT product?

We provide ESP32 ODM design-to-manufacturing services. From prototype to production — the team behind this tutorial can build it with you.

Talk to us →