# IoT Case 12: Room Smart Colourful Light App Control Level: ![level](images/level4.png) ![auto_fit](images/Case12/intro.png)

## Goal


Make a smart colorful light that will change colors upon remote control app. ## Background
What is Smart Colorful Light?

A smart colorful light is a multi-color LED light that allows switching color of light, usually being requested through remote control, for example a mobile app. The user can adjust the color based on different needs. For instance, the user might need dark light when he/she is sleeping, baby feel comfortable when the room in warm color, and user may pick a good color when he/she is reading the book.

Smart Colorful Light Principle

The micro:bit will connect to the Internet to get the device ID. In the mobile app, it will send the different color command name to the micro:bit. In the micro:bit program, when it receives the command, it will show the corresponding color based on the command name.

![pic](images/Case12/Case12_flowchart.png)

## Part List


![pic_90](images/Case12/Case12_parts.png)

## Assembly step


Step 1

In this case, build the “Big Style Model” as a home base.

![pic_90](images/Case12/Case12_ass1.png)

Step 2

To build a room, insert the model E1 and E3 on model A, align with holes on model A, B3 and B4.

![pic_90](images/Case12/Case12_ass2.png)

Step 3

Attach the Multi-color LED to model B4 using M4 \* 10mm screws and nuts.

![pic_90](images/Case12/Case12_ass3.png)

Step 4

To build a bed. Put model J2 onto the model J1, then put together all the cardboard parts (J1-J3).

![pic_90](images/Case12/Case12_ass4.png)

Step 5

The bed completed!

![pic_100](images/Case12/Case12_ass5.png)

Step 6

Place the bed inside the bedroom.

![pic_90](images/Case12/Case12_ass6.png)

Step 7

Place the decoration board (Model H) on model B3.

![pic_90](images/Case12/Case12_ass7.png)

Step 8

Assembly Completed!

![pic_90](images/Case12/Case12_ass8.png)

## Hardware connect


1. Connect the Multi-color LED (WS2812) to P0 2. Pull up the buzzer switch to disconnect the buzzer ![pic_80](images/Case12/Case12_hardware.png)

## Programming (MakeCode)


Step 1. Initialize OLED, IoT:bit and connect to WiFi, initialize the Multi-color LED

* Snap `Initialize OLED with width:128, height: 64` to `on start` * Snap `Initialize IoT:bit TX P16 RX P8` from `IoT:bit` to `on start` * Snap `Set Wi-Fi to ssid pwd` from `IoT:bit` * Enter your Wi-Fi name and password. Here we set `smarthon` as `SSID` and `12345678` as `password` * Snap `set strip to NeoPixel at pin P0 with 1 leds as RGB(GRB format)` from Neopixel ![pic_60](images/Case12/Case12_p1.png)

Step 2. Show icon “tick” and Device ID after WiFi connection

* Snap `show icon` from `basic` to `On WiFi connected` and select icon `tick` * Draw the `Device ID` variable from `On WiFi connected` to the `show string` block placeholder ![pic_50](images/Case12/Case12_p2.png)

Step 3. Receive Command

* Inside the `On WiFi Received`, put a nested `if-else` statement with different conditions * Set the first condition as `WAN_Command = Red` * In the `if` segment, perform the change color action by `strip show color red` * In the next `if` condition, use `WAN_Command = Orange` * Set the color to Orange by `strip show color orange` * Repeat the previous steps, with changes on the Color, to finish the setup of responding to each color. ![auto_fit](images/Case12/Case12_p3.png)

Full Solution

MakeCode: [https://makecode.microbit.org/S06366-85821-99722-81571](https://makecode.microbit.org/S06366-85821-99722-81571)

You could also download the program from the following website:
## IoT (App inventor 2)


Step 1. Create an APP project

* Create a APP inventor account at [http://ai2.appinventor.mit.edu/](http://ai2.appinventor.mit.edu/) * Create a new project ![auto_fit](images/Case12/Case12_p4.png)

Step 2. Design the layout of APP

* In the designer page, pull the layout element from the left side to the editor ![pic_70](images/Case12/Case12_p5.png)

* In this example case, using different `button`, `textbox`, `label` and `layout control` * Place the element in your way * For each element has their own property, you may change it in your mind, such as the `background color`, `font size`, `width`, `height`, `align`.
In this example, you are required to change the `Text` to the Color that button representing to get the same result as documentation. For example, button who send "Red" command need to be "Red" as `Text`property * Remember to put `Web` element to editor, it will used for sending command ![auto_fit](images/Case12/Case12_p6.png)

Step 3. Programming the elements in APP

* Switch to Blocks page by click the button at top right corner ![pic_50](images/Case12/Case12_p7.png) * According to the catalog of function needs, find it at the left side and put to editor * Go to `buttonX` element, find the `when buttonX.Click do` function, put it to editor ( X represent the number of button) * Go to `Web1` element, find the `set Web1.URL to`, put it inside to the `when buttonX.Click do` * Go to `Text` catalog, find the `join` and `" "` element to start build the control API * Control API is: `https://control.smarthon.cc/publish?id=ID&msg=MSG` , while `ID` and `MSG` means `IoT:bit ID` and `Command` respectively * The program need to replace the `ID` and `MSG` according to different IoT:Bit and command in the API * Use `TextBox1.Text` to get the `ID` input from user * You may hard code the `MSG` with text command * But, you can also use `ButtonX.Text` to get the `Text` property of button, which can used as the `MSG` in the example case, be careful you need to set up the `Text` property before you do that * Use `join` properly to concatenate the API from each parts * After complete the API URL, use `call Web1.Get` from `Web1` to send the API Command For example

![auto_fit](images/Case12/Case12_p8.png)

* After finish the function for `button1`, repeat the steps for other buttons, with changes on target button element ( from `button1` to `button2`, `button3`, ... ) ![auto_fit](images/Case12/Case12_p9.png)

[AIA](https://raw.githubusercontent.com/SMARTHON/smarthon-docs-en/master/docs/_static/smarthome_case12_app.aia)

[APK](https://raw.githubusercontent.com/SMARTHON/smarthon-docs-en/master/docs/_static/smarthome_case12_app.apk) ## Result


After sending color messages from APPs, the color of light will change.

![auto_fit](images/Case12/Case12_result.gif)

## Think


1. Can you think of a suggestion to make the colorful light even smarter?
(e.g. add automatic decision rather than always wait for command)

2. Can you try to add some buttons on the app for more complex action?