Lowcode IoT | Everybody is a maker!

AtomS3 Exercise: Setting up the Device

1. Connect the device to a USB port on your computer.
   The USB port will power the device and enable serial communication.
   
2. Open the UIFlow2 IDE 🔗
   UIFlow 2 is a web-based graphical programming IDE that is easy for everyone to use, with wireless/wired program push, program click and run, and no need to compile repeatedly.
3. Close both the UIFlow splashscreen and the project import screen.
   We will use the wired (USB) mode, there is no need to create an account.

4. Select the apropriate device from the device list by clicking on the device button (bottom-right).
   
5. After selecting your device the code blocks for the built-in hardware will become available in IDE.
   
6. Let's do some coding!

Your first program: Color Clicker

• In this exercise we will program the top button to change the color of a circle on the display and setup serial communication between the device and the IDE as we go.
• 👁 Let's have a look at the code blocks for the built-in hardware (Button & UI).
  
  

1. First, we need to draw a circle on the screen.
   We can edit the UI in the UI editing area.
   Although we can edit the UI directly, it is better to open the UI editting interface,
   Click the UI draw button on the top:
   Drag a circle and three text labels on the screen.
   The circle and the labels need to have a self-describing name (e.g. rValue, gValue and bValue):
2. For the button we will need an event block from the 'Hardware' section. (drag the “When BtnA was clicked” anywhere on the canvas):
   
3. To blocks to manipulate the UI elements can be found in the UI blocks section.
   
4. Drag the circle border- and bg fill color block 'in' the Button event block. You can change the color to your own preference:
5. Run the code on the device by clicking the “Run” button in the IDE (bottom-right). ⚠ Please avoid clicking the 'Download to Device' button (the firmware of the device has to be reconfigured if you do).
   
6. The Terminal will open, connect with your device and press “Play”.
7. If all went well your program will run.
   Click the button on top of the device to see if the circle changes.
   (The display is a button...)

• The circle changes color but does not change back, (we didn't program it to...)
  Let's make our program more interesting.
  
• We want to randomise the RGB color of the circle. We need to setup variables and a random function.

8. Create three variables: red, green and blue.
9. The random integer function can be found in the 'Math' code blocks.
   Drag it into the canvas and change the values from 0 to 255.
10. Set up the Button event block to change the red, green and blue variables to a random integer from 0 - 255.
    Assign the variables to the RGB values of the circle:
    💡 Tip: Double-clicking on a code block replicates it.
11. We also want to know the RGB values of the LED.
    We need to change the labels (rValue, gValue, bValue) to the values of the red, green, blue variables.
    You can find the label blocks in the UI blocks section.
    Set up the Button event as follows and run the program.
12. Test your program by clicking the top button and read out the values on the display.
    
    
    

    🎆

• Now we have succesfully programmed the built-in hardware of our device we can take a look at some additional hardware.
• You can connect Units (sensors) and Bases to your device to extend it's functionality.