Petoi Web Coding Blocks

1. Upgrade the firmware

You can upgrade the firmware for BiBoard, which supports web block-based programming via the latest version (≥ 1.2.6 beta) of the Petoi Desktop App.

2. Open the Petoi Web Coding Block

Download the source code from the GitHub repository (OpenCatEsp32-Quadruped-Robot).

Open OpenCatEsp32 > PetoiWebBlock > programblockly.html to start programming with Petoi Web Coding Block on web.

3. The principle and process

The Petoi Web Coding Block allows you to control the robot via WiFi without compiling and uploading code to its main board. Simply click the "Run Code" button to execute the program at the graphical block level, sending instructions wirelessly to the robot through your local network. The process involves three key steps:

1. Open the serial port

2. Control the robot

3. Close the serial port

The Petoi web coding block interface is shown below:

① Quick Connect ② Language Switch ③ Workspace ④ Action Buttons ⑤ Console ⑥ Serial Monitor ⑦ Toolbox & Blocks

3.1 Initial Setup & Quick Connect

For first-time use, you need to establish a connection between your robot and computer. Both must be on the same WiFi network, and the robot can only connect to 2.4GHz WiFi networks. Therefore, you need to split your WiFi SSID into two frequency bands.

Follow these steps to split your WiFi bands:

1. Access your router’s Wireless Settings page (access method typically found on the router’s label).

2. In the 2.4GHz settings, change the Wi-Fi name (SSID) to xxx-2.4G and save.

3. In the 5GHz settings, change the SSID to xxx-5G and save.

4. After renaming, both xxx-2.4G and xxx-5G will appear in your device’s WiFi list.

Connection Procedure

Connect the robot’s mainboard to your computer via USB cable.

There are two methods to connect the robot to your 2.4GHz WiFi network:

1. (Recommended)

   • Click button on the webpage, select a serial port of the robot in the pop-up window and click "Connect" button. (For Mac user, different from firmware upload, any serial port of the robot works here)

   • Enter your xxx-2.4G WiFi credentials when prompted. The robot will connect to your network like any standard device, then automatically reboot its mainboard. Once rebooted, the red block Connect with IP:192.168.4.1 in the workspace will auto-update with your actual IP, indicating successful connection. You can use Petoi Web Coding Block to send real-time signals to the robot via WiFi from now!

2. • Click button in the serial monitor on the webpage to establish a serial connection with the robot.

   • Press and hold the BOOT button on the robot’s mainboard until the 10-second countdown in the serial monitor’s output ends. This will initiate the network reset procedure.

   • When the serial output displays "wm:Starting Web Portal", the serial output will pause. This indicates that the robot has created a new hotspot and entered a waiting state for connection.

   • At this point, open your computer’s WiFi network list and locate the newly appeared, password-free network. The network name is typically "UII WifiConfig."

   • After connecting, a WiFi Manager window will open. Follow the prompts to select your 2.4GHz network, enter the username and password, and wait for the connection to complete. The window will close automatically once connected.

     

     

     

     

Persistent Connection

This entire process only needs to be set up once. The robot remembers your WiFi credentials.

For future connections, You only need to use either one of the following methods to connect :

• Wireless: Enter the current IP in the Connect with IP block (check via USB if IP changes).

• Wired: Connect the robot to the computer via USB cable, then send command w to the serial port for auto-connection.

3.2 Language Switch

You can switch language systems here anytime.

3.3 Workspace

This is the area where you assemble block programs. You can scroll the mouse wheel to zoom in/out.

Press and hold the left mouse button on a blank area to pan the view. Right-click to perform actions like undoing block operations.

Left-click and hold a block to drag its position. Right-click a block to copy or delete it.

The buttons at the bottom-right :

From top to bottom: Undo • Redo • Center View • Zoom In • Zoom Out • Trash Bin

You can drag blocks onto the Trash Bin here to delete them. Click the Trash Bin to view deletion history, the blocks inside can be dragged back to the workspace.

The Workspace contains two default blocks that cannot be deleted :

Connect with IP: Essential block for program execution. Only blocks connected under it will run. Gyroscope : Disables robot's gyroscope during program execution by default.

3.4 Action Buttons

Show Code: Displays source code of blocks connected under the Connect with IP block.

Run Code: Executes all blocks connected under the Connect with IP block.

Save Program: Saves current project state (all blocks + skills) as a .json file.

Load Program: Loads the .json project you saved.

Upload Skill Files: Adds skill files to project (details: xxx).

Clear All: Removes all blocks except default blocks Connect with IP and Gyroscope on the workspace. Cleared blocks will appear in Trash Bin history.

3.5 Console

You can view real-time program execution messages here. It's critical when controlling wirelessly, console can provides vital feedback as serial port data is inaccessible.

Use this button to toggle the timestamp display in the Console on/off. When you need to copy batches of sensor data output to the console, turning off timestamps makes it easier.

3.6 Serial Monitor

View serial print messages from connected robots here and send commands directly to the serial port.

When you successfully connect to the robot's serial port, the Serial Monitor window will automatically open as shown above.

3.7 Toolbox & Blocks

Left-click any category in the Toolbox to reveal all its blocks. Drag and place them in the Workspace, then link to blocks under Connect with IP to assemble your program.

The Communication, Motion, Console, and Music categories contain blocks created and provided by Petoi. All other blocks are default functional blocks from Blockly.

4 The instructions for blocks

4.1 Communication

The blocks in Communication are used for interacting with various modules of the robot.

For detailed instructions on sensor connections, please refer to the individual sensor documentation in the "EXTENSIBLE MODULES" section. Only basic connection diagrams and pin number references are provided here for your guidance.

The pin numbers required when using building blocks can be referenced against the labels next to the Grove Sockets on your BiBoard.

• For general modules (Light Sensor, Touch Sensor, Gesture Sensor, PIR Motion Sensor, IR Distance Sensor), You can use the above four blocks to digitally/analog read/write signals and see the results in both the serial monitor and console. Analog value range: 0~255 Digital value range: High-level: 1; Low-level: 0

• 

• For the Ultrasonic Sensor, use this block to read the distance value. You can set the two pins ( Trigger and Echo) like this: (BiBoard V1 connects to the Rx and Tx pins)

  

• For camera modules (MU Camera, Petoi AI Vision Module), use this block to Read the coordinates of the identified target from the camera module.

  

• If you are familiar with Petoi's serial commands (e.g., m 0 60 rotates servo #0 to 60°), you can use this block to send serial commands to robot during program execution.

  You can also input "kkcL" (kick the left front leg), and "khiR" (raise the right front leg to say hello). For more serial port commands, please refer to the serial protocol.

• Use this block to enable/disable the robot's gyroscope:

  

  Enabled: The robot adjusts motion balance in real-time and performs self-righting when tilted over.

  Disabled: The robot executes only specified movements without auto-balancing.

4.2 Motion

The blocks in Motion are used for controlling robot actions and reading/writing servo joint angle signals.

Preset Actions:

• This block enables the robot to execute various preset gaits for movement in various directions/poses. You can modify the delay duration for continuous walking.

  

• This block makes the robot perform various preset poses.

  

• This block performs advanced preset motions. Due to large movement ranges, please use cautiously especially when using with USB-connected robot or Bittle X+Arm.

  

• This block controls preset robotic arm motions (Bittle X+Arm only).

  

Custom Actions:

• Use these two blocks to get the robot's current joint angles. You can assign it to a variable first and then use the variable and algorithm to control other joints to rotate.

  

• These two blocks can both set a single joint angle individually. You can set the joint angle to an absolute value, or to a relative angle value. increase it, or decrease it by a specific number.

  You can even creatively make the angle change using a formula or variable instead of a fixed number.

  

• Combine these four blocks to move multiple joints sequentially or simultaneously.

  

  You can click the gear icon, then change the list length in the pop-up window to apply it to the actual block.

  

• Use these two blocks to control all joints to rotate at the same time.

  

• This block executes uploaded skill files by entering the full filename (e.g., test.md).

  

  You can create skill files by using the Skill Composer.

4.3 Console

• Use this block to add console output, to observe runtime status and test programs in the console.

  
• Use this block to insert a delay after statement execution, to observe program flow or achieve timing effects.

  

4.4 Music

You can combine these two blocks to make the robot play continuous melody.

4.5 Demo code

5 Appendix - Full WiFi Connection Logic

During the program’s runtime, press the BOOT button to reboot the robot and start the Wifi Manager. It will create a Wi-Fi hotspot with your machine-specific name. Connect it in your system’s Wifi settings, and a Wifi configuration page will automatically open to let you connect to your router. Only a 2.4G network is supported. The personal hotspot of your smartphone is also applicable, but you must connect your computer to the same hotspot during later operations. If the Wi-Fi configuration doesn’t open automatically after 5 seconds, you can try to connect to 192.168.4.1 manually in your browser. Alternatively, you can enter the Wifi credential in the serial monitor, formatted as “w%wifiname%password”. Click the Quick Connect button on the block coding page to enter the Wifi credentials.

If the Wifi connection is established successfully, the robot will automatically connect to the same router every time after reboot. If it fails, it won’t auto-connect during the future reboot. You can start over the connection operation as your first operation.

To clear the previously saved Wi-Fi credentials, hold the BOOT button for more than 2 seconds. This will reboot and start the Wi-Fi manager to connect to a new router.