15. IoT Case 12: Room Smart Colourful Light App Control

Level: level auto_fit

15.1. Goal

Make a smart colorful light that will change colors upon remote control app.

15.2. 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

15.3. Part List

pic_90

15.4. Assembly step

Step 1

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

pic_90

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

Step 3

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

pic_90

Step 4

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

pic_90

Step 5

The bed completed!

pic_100

Step 6

Place the bed inside the bedroom.

pic_90

Step 7

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

pic_90

Step 8

Assembly Completed!

pic_90

15.5. Hardware connect

  1. Connect the Multi-color LED (WS2812) to P0

  2. Pull up the buzzer switch to disconnect the buzzer pic_80

15.6. 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

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

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

Full Solution

MakeCode: https://makecode.microbit.org/_bJpLi2T3uK3C

You could also download the program from the following website:

15.7. IoT (App inventor 2)

Step 1. Create an APP project

auto_fit

Step 2. Design the layout of APP

  • In the designer page, pull the layout element from the left side to the editor

pic_70

  • 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 Textproperty

  • Remember to put Web element to editor, it will used for sending command

auto_fit

Step 3. Programming the elements in APP

  • Switch to Blocks page by click the button at top right corner

pic_50

  • 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

  • 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

AIA

APK

15.8. Result

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

auto_fit

15.9. 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?