iotdata, by Data Frontieriot
data
Block coding IDE · ESP32 and Arduino Nano

Build the robot’s program step by step, right in the browser.

Drag the steps, say which pin each part is wired to and send it to the board over the USB cable. Nothing to install and no account to create. Whenever you want, open the Python or C++ code the IDE wrote.

One program, two doors: Maker for schools and workshops, Industrial for training and the factory floor. Which one should I pick?

To upload over USB: Google Chrome or Microsoft Edge on a computer.

How it works

Three steps between the idea and the arm moving.

Each card is a real instruction. The IDE turns the list of cards into code and shows that code alongside, line by line.

  1. 01Choose the board

    ESP32 or Arduino Nano. The IDE shows only the pins that exist on the chosen board and warns you when a pin won’t work for that part.

  2. 02Build the steps

    Drag cards like "move servo", "show the distance" and "if the distance is less than". In each one, you say which pin the part is wired to.

  3. 03Send it to the robot

    On the ESP32, the program goes over the USB cable straight from the browser. For the Nano, the IDE hands you C++ code ready for the Arduino IDE.

The IDE’s first robot

The Data Frontier robot arm.

Four joints, one eye and one voice. Each part has its own cards in the IDE, and each card asks which pin the part is wired to: the same program works for whoever built the arm their own way.

  • Four mini servos

    Base, shoulder, elbow and gripper. Each one turns from 0 to 180 degrees.

  • Ultrasonic sensor

    Measures the distance to the object in front of the gripper, from a few centimeters to a few meters.

  • Two joysticks

    Two axes and a button each: enough to move all four joints by hand.

  • Buzzer

    Beeps to give a signal: object nearby, position saved, end of the program.

Robotics parts on a table: servo, joystick module, Arduino board and breadboards
Servo, joystick, board and breadboard. Illustrative photo.
One wiring that works on both boards
PartArduino NanoESP32 (DevKit)
Base servoD3GPIO 13
Shoulder servoD5GPIO 25
Elbow servoD6GPIO 26
Gripper servoD9GPIO 27
Joystick 1 (X, Y, button)A0, A1, D2GPIO 32, 33, 21
Joystick 2 (X, Y, button)A2, A3, D4GPIO 34, 35, 22
Ultrasonic (Trig, Echo)D7, D8GPIO 18, 19 (with divider)
BuzzerD10GPIO 23

It’s a suggestion, not a rule: in the IDE you change the pin on each card. Two things always apply. The four servos draw too much current for the USB port, so they run on a separate 5 V supply, with its GND tied to the board’s. And on the ESP32, the ultrasonic sensor’s Echo pin goes through a voltage divider, because the module outputs 5 V and the board works at 3.3 V.

Why these pins (article in Portuguese)
Two editions, one program

From the classroom to the factory floor.

The logic that makes the arm pick up an object in class is the same as in an automated cell. That’s why there is a single IDE with two doors: pick yours with the button.

Children gathered around a robot in a classroom Schools, after-school courses and workshops

Maker IDE

Solid colored blocks, big letters and round corners. Readable on the projector from the back of the room, and beginners find each piece by its color.

  • First robotics class
  • After-school and extracurricular courses
  • Maker workshops and science fairs
Open Maker IDE
Model of an industrial robot arm on a table Technical courses, training and the factory floor

Industrial IDE

White cards, color only on the edge and the code always in view. It looks like an engineering tool, for people programming sequence, condition, sensor and actuator.

  • Mechatronics and automation technical courses
  • Maintenance training
  • Proof of concept before the automated cell
Open Industrial IDE

The program is the same in both: the same cards, the same pins and the same code on the board. A file saved in Maker opens in Industrial, and the other way around.

ESP32 development board held between the fingers

ESP32

The IDE generates the program in MicroPython and sends it over the USB cable, straight from the browser. The program is saved as main.py and runs every time the board powers up, even away from the computer.

Needs: MicroPython flashed on the ESP32, and Chrome or Edge on the computer.

Arduino board held in the hand

Arduino Nano

The IDE generates the C++ code for the program you built, using the Servo library. You download the .ino file or copy the code and upload it with the Arduino IDE, like any other sketch.

Needs: the Arduino IDE on the computer. Nanos with the CH340 converter may ask for a driver on Windows.

Learn with the articles

Ten articles, one part and one idea at a time.

From the first block program to the servo pulse and the ultrasonic echo. Each article ends with what to do in the IDE.

The articles are published in Portuguese on iotdata.com.br and open in a new tab. Your browser can translate them.

  1. 01Block coding for robotics: where to startPortuguese
  2. 02ESP32 or Arduino Nano: which board to use in your robotPortuguese
  3. 03A robot arm with four mini servos: how it worksPortuguese
  4. 04SG90 mini servo: how PWM controls the anglePortuguese
  5. 05HC-SR04 ultrasonic sensor: measuring distance with the robotPortuguese
  6. 06Analog joystick: reading the X and Y axes and the buttonPortuguese
  7. 07Active and passive buzzers: making the robot beep and play notesPortuguese
  8. 08Arduino Nano and ESP32 pins: which one to use for each partPortuguese
  9. 09From blocks to code: the Python and C++ behind the IDEPortuguese
  10. 10Uploading the program to the board over USB, straight from the browserPortuguese
Frequently asked questions

What people ask before plugging in the cable.

Do I need to install anything?

No. The IDE opens in the browser. On some Windows computers, boards with the CH340 USB converter, common on the Nano and on many ESP32 boards, ask for the chip maker’s driver the first time.

Does it work in any browser?

Building the program, yes. Sending it to the board over USB uses Web Serial, which exists in Google Chrome and Microsoft Edge for desktop. In Firefox, in Safari and on the iPad, you build the program and download the code.

Do I need an account?

No. The program is saved in the browser itself and can be downloaded as a file. If you use another computer, take the file with you.

What does the ESP32 need to receive the program?

MicroPython flashed on the board. With it, the IDE sends the program as main.py and the board runs it every time it powers up.

What about the Arduino Nano?

The IDE generates the C++ code for the program you built. You copy it or download the .ino file and upload it with the Arduino IDE, using the Servo library that comes with it.

What’s the difference between the Maker IDE and the Industrial IDE?

Only the way in and the look. The cards, the pins, the code that goes to the board and the program file are the same: a program saved in Maker opens in Industrial, and the other way around.

Can I see the code?

Yes. The code panel shows, as you build, the Python for the ESP32 or the C++ for the Nano. It’s the same text that goes to the board.

Is the IDE in English?

Yes: the editor, the cards, the warnings and the comments in the generated code. A program saved in one language opens the same way in English, Spanish or Portuguese.

Opens in the browser

Plug in the cable and build your first program.

Using it with a class, in a technical course or in factory training? Talk to engineering: the people who reply are the people who built the robot.

Used only to reply to this request. No newsletter. Privacy policy.

Photos under the Unsplash license: Keerthan DM, Vishnu Mohanan, Sufyan, حامد طه, Sahand Babali, Robin Glauser, stem.T4L, Fahim Muntashir, Asif Al, Salvino Fidacaro, Maik Winnecke, Niclas Illg, Thorium. Photos of parts and robots are illustrative; the Data Frontier arm appears in the drawing at the top and in the wiring table.