# 2. Programming Software Installation

## 2.1 WonderCode Software Installation

:::{Note}

You can refer to the demonstration video in this section's folder.

:::

###  2.1.1 Introduction to the Programming Software

WonderCode is a dedicated Scratch-based programming tool designed specifically for the AiNova robot for use with the CoreX controller. This software supports automatic conversion of graphical instruction blocks to Python code, making it ideal for beginners. Programming is done by simply dragging and dropping command blocks.

###  2.1.2 Software Installation

(1) Locate and open the installation file **WonderCode setup.exe** in the same directory as this document or in "[**Apenndix ->Software Installation Package & Program Collection**](Appendix.md)".

<img class="common_img" src="../_static/media/chapter_2/section_1/image3.png" />

(2) In the language selection window, choose English and click **"OK".**

<img class="common_img" src="../_static/media/chapter_2/section_1/image4.png" />

(3) Choose the installation location. You can either keep the default path or select a custom one, then click **"Next".**

<img class="common_img" src="../_static/media/chapter_2/section_1/image5.png" />

(4) In the Additional Tasks window, keep the default setting "**Create a desktop shortcut"** checked, then proceed.

<img class="common_img" src="../_static/media/chapter_2/section_1/image6.png" />

(5) Click **"Install"** to begin installation.

<img class="common_img" src="../_static/media/chapter_2/section_1/image7.png" />

(6) The software will begin installing and a progress bar will appear.

<img class="common_img" src="../_static/media/chapter_2/section_1/image8.png" />

(7) Once the installation is complete, a prompt will appear. Click **"Finish".**

<img class="common_img" src="../_static/media/chapter_2/section_1/image9.png" />

(8) A new WonderCode icon will appear on your desktop.

<img class="common_img" src="../_static/media/chapter_2/section_1/image10.png" />

###  2.1.3 Device Connection

(1) Use a USB data cable to connect the CoreX controller to your computer.

<img class="common_img" src="../_static/media/chapter_2/section_1/image11.png" />

(2) Double-click the WonderCode icon to launch the software. The main interface will appear.

<img class="common_img" src="../_static/media/chapter_2/section_1/image12.png" />

(3) Before connecting the device, you must add the device extension pack. Otherwise, the connection will fail. Click the button <img src="../_static/media/chapter_2/section_1/image13.png" /> in the bottom-left corner of the interface. In the pop-up window, navigate to and select **"Robot" -&gt; "AiNova".**

<img class="common_img" src="../_static/media/chapter_2/section_1/image14.png" />

(4) Then click the **"Connect"** button on the main interface, and select the correct COM port.

<img class="common_img" src="../_static/media/chapter_2/section_1/image15.png" />

:::{Note}

The COM port number varies depending on your computer. For example, in this tutorial, the port is COM3. Do not select COM1, as it is typically reserved for system communication.

:::

If multiple USB devices are connected and you're unsure of the correct port: Go to your desktop, right-click **"This PC"**, choose **"Properties"**, then open **"Device Manager"**. Check the AiNova robot controller under Ports (COM & LPT). The correct port usually includes **"CH340"** in its name.

<img class="common_img" src="../_static/media/chapter_2/section_1/image16.png" />

(5) When the device is successfully connected, a **"Connect Success"** message will appear.

<img class="common_img" src="../_static/media/chapter_2/section_1/image17.png" />

## 2.2 Interface Overview and Program Download

:::{Note}

You can refer to the demonstration video in this section's folder.

:::

### 2.2.1 Function Button Introduction

The main interface of WonderCode is divided into four key sections, as shown in the figure below:

<img class="common_img" src="../_static/media/chapter_2/section_2/image3.png" />

The corresponding functional areas for each number are shown in the table below：

| **No.** |      **Function**       |
| :-----: | :---------------------: |
|    ①    |          Menu           |
|    ②    |      Command block      |
|    ③    |        Workspace        |
|    ④    | Code Display and Upload |

The buttons and their corresponding functions on the interface are shown in the table below:

<table  class="docutils-nobg" border="1">
<colgroup>
<col  />
<col  />
</colgroup>
<tbody>
<tr>
<td ><strong>Icon</strong></td>
<td ><strong>Function</strong></td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image4.png" /></td>
<td >Build new file, save and open.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image5.png" /></td>
<td >Only used for the online mode.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image6.png" /></td>
<td >Determine whether to connect the device and software, and specify the connection port.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image7.png" /></td>
<td >Check tutorial, update and install drier.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image8.png" /></td>
<td >Display the program file name. If programming has not started or the file has not been saved, it shows Scratch Project.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image9.png" /></td>
<td ><p>Interface Switching Button: Allows switching between "<strong>Online Mode</strong>" and "<strong>Upload Mode</strong>".</p>
<p>Be sure to save the edited program file before switching; otherwise, unsaved changes may be lost.</p>
<p>Note: Online Mode is suitable for animations and games—features native to Scratch. Upload Mode must be used in conjunction with our hardware to enable various functional applications.</p></td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image10.png" /></td>
<td >Select the display language of the interface. You can switch between English, Simplified Chinese, and Traditional Chinese.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image11.png" /></td>
<td >Undone or redone during programming.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image12.png" /></td>
<td >Switch programming method. "<strong>Auto</strong>" converts the instruction block into Python form. Switch to "<strong>Python Programming</strong>" to directly use Python to edit the program.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image13.png" /></td>
<td >Save the program in the form of Python code.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image14.png" /></td>
<td >Open the saved Python file.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image15.png" /></td>
<td >Upload the programming into the controller.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image16.png" /></td>
<td >Used to add extension packages for devices.</td>
</tr>
<tr>
<td ><img class="common_img" src="../_static/media/chapter_2/section_2/image17.png" /></td>
<td >From top to bottom, the buttons control zooming in, zooming out, and resetting the code editor to its default size.</td>
</tr>
</tbody>
</table>


### 2.2.2 Programming Operation Method

This section explains how to use the WonderCode software by editing a program that makes the LED light on the main controller stay solid red. Steps:

(1) After the device is successfully connected, you can start writing the program. First, find the **"AiNova Program"** block in the AiNova command set and drag it into the code editing area.

<img class="common_img" src="../_static/media/chapter_2/section_2/image18.png" />

To delete a command block, drag it backward from the code editing area back to the command set area.

(2) Then drag the **"Forever"** block from the control commands set and attach it after the previous block.

<img class="common_img" src="../_static/media/chapter_2/section_2/image19.png" />

(3) Next, drag the block to set LED color from the AiNova command and set into the **"Forever"** block. Select to set all LEDs to solid red.

<img class="common_img" src="../_static/media/chapter_2/section_2/image20.png" />

According to the RGB color principle, different combinations of the thresholds for red, green, and blue can produce various colors. The threshold range for each color is 0–255.

When one of the colors has a threshold of 255 and the other two are 0, the resulting color is that pure color. For example, in this section, to make the LED red, set the red threshold to 255, and blue and green thresholds to 0.

### 2.2.3 Program Download

(1) Import the [AiNova Bluetooth Control.sb3](https://drive.google.com/drive/folders/12jUYlKAWNZz0T4Q1mNz6r6jR32CrrVe6?usp=sharing) program , or simply drag it onto the main interface of the programming software.

<img class="common_img" src="../_static/media/chapter_2/section_2/image21.png" />

<img class="common_img" src="../_static/media/chapter_2/section_2/image22.png" />

(2) After importing the program, click the **"Upload"** icon in the upper right corner of the interface.

<img class="common_img" src="../_static/media/chapter_2/section_2/image23.png" />

<img class="common_img" src="../_static/media/chapter_2/section_2/image24.png" />

(3) Wait for the download to complete; then you will see an **"Successful"** message.

<img class="common_img" src="../_static/media/chapter_2/section_2/image25.png" />

(4) You can then proceed to "[**4. APP Remote Control**](4.app_remote_control.md)" to experience the feature.