# IoT Case 12: Room Smart Colourful Light App Control Level:  
## Goal
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.

## Part List
## Assembly step
In this case, build the “Big Style Model” as a home base.

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

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

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

Step 5
The bed completed!

Step 6
Place the bed inside the bedroom.

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

Step 8
Assembly Completed!

## Hardware connect
## Programming (MakeCode)
* 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 
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 
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. 
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:
* Create a APP inventor account at [http://ai2.appinventor.mit.edu/](http://ai2.appinventor.mit.edu/)
* Create a new project

Step 2. Design the layout of APP
* In the designer page, pull the layout element from the left side to the editor

* 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`.
Step 3. Programming the elements in APP
* Switch to Blocks page by click the button at top right corner

* 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

* After finish the function for `button1`, repeat the steps for other buttons, with changes on target button element ( from `button1` to `button2`, `button3`, ... )

[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

## Think
2. Can you try to add some buttons on the app for more complex action?
## IoT (App inventor 2)
Step 1. Create an APP project
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

After sending color messages from APPs, the color of light will change.
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)