15. 物聯網案例 12:智能手機彩色燈泡

難度:level auto_fit

15.1. 目標


製作一個能遙距控制顏色變化的智能手機彩色燈泡。

15.2. 背景


甚麼是智能手機彩色燈泡?

智能手機彩色燈泡是一個可以以遙控方式(如手機程式)切換顏色的彩色 LED。使用者可以根據需求調整顏色。例如,使用者在睡覺時可能需要較暗的燈光,嬰兒在暖色調的房間會感到舒適,使用者在閱讀時可以選擇合適的燈光顏色。

運作原理

micro:bit 會連接互聯網以取得裝置 ID。在手機應用程式中,它會向 micro:bit 發送對應不同顏色的命令字眼。在 micro:bit 程式中,當它收到命令時,它會根據命令字眼顯示相應的顏色。

auto_fit

15.3. 所用部件


pic_90

15.4. 組裝步驟


步驟一

這個案例以「大房子模型」作為基礎。

auto_fit

步驟二

對準 A、B3 和 B4 模型上的孔,將 E1和 E3 模型組裝到 A 模型上,以建立一個房間。

pic_90

步驟三

用 用 M4*10 毫米螺絲及螺母把彩色 LED 安裝到 B4 模型上,連接線穿過旁邊的孔。

pic_90

步驟四

我們來製作一張床。將 J2 模型組裝到 J1 模型上面,兩個 J3 模型組裝到 J1 模型下面。

pic_90

步驟五

床完成了!

pic_90

步驟六

將床放到睡房裡。

pic_90

步驟七

把 H 模型裝在 B3 模型上,作為裝飾擺設。

pic_90

步驟八

組裝完成!

pic_90

15.5. 線路連接


  1. 連接彩色 LED 到 P0 端口

  2. 把蜂鳴器開關向下撥以連接蜂鳴器

pic_80

15.6. 編程(MakeCode)


步驟一. 初始化OLED、IoT:bit;連接WiFi;啟動彩色LED

  • 當啟動時加入OLED 初始化寬128高64

  • 加入初始化IoT:bit TX P16 RX P8

  • 加入連接到 WiFi 名稱 密碼並輸入 WiFi 名稱和密碼

  • 加入變數 strip 設為引腳 P1 初始化燈帶 1 顆LED(模式 RGB(GRB 順序)) pic_80

步驟二. WiFi連線後顯示圖示「勾號」和裝置ID

  • 放入一個當WiFi連接成功後

  • 在裡面加入顯示圖示勾號,以在連線後顯示勾號

  • 當WiFi連接成功後上的變數Device_ID拉到新行顯示字符串pic_80

步驟三. 接收命令

  • 放入一個當從互聯網接收到指令並加入一個巢狀的如果語句

  • 將第一個條件設為WAN_Command = Red

  • 在第一個如果段中,用srtip顯示顏色紅來改變顏色

  • 將第二個條件設為WAN_Command = Orange

  • 在第二個如果段中,用srtip顯示顏色橙來改變顏色成橙色

  • 重複前面的步驟,改成其他顏色,完成每種顏色的設定。 pic_60

完整答案

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

你可以從以下網頁中下載HEX檔案:

15.7. 物聯網(App inventor 2)


步驟一. 建立APP項目

auto_fit

步驟二. 設計APP的介面

  • 在畫面編排頁面中,將介面元件從左側拉到編輯器中

pic_70

  • 在此案例中,使用了不同的按鈕文字輸入盒標籤佈局控制項 按照您的方式放置元件

  • 每個元素都有自己的屬性,你可以隨心所欲地改變它,例如背景顏色字體大小寬度高度對齊方式

  • 在此案例中,您需要將文字變更為按鈕代表的顏色以獲得與文檔相同的結果。例如,發送「Red」命令的按鈕需要將“紅色”作為文字屬性

  • 記得將Web元素放入編輯器中,它將用於發送指令

auto_fit

步驟三. 對APP中的元件編程

  • 點擊右上角按鈕切換到程式設計頁面

pic_50

  • 根據所需功能的類型,在左側找到並放到編輯器

  • 進入ButtonX元件,找到功能當ButtonX.被點選,將其放入編輯器(X代表按鈕的代號)

  • 進入Web1元件,找到設Web1.網址為,放入當ButtonX.被點選

  • 進入文字目錄,找到元件合併文字" "以開始建立控制API

  • 控制 API 為:https://control.smarthon.cc/publish?id=ID&msg=MSG,其中IDMSG 分別代表IoT:bit ID指令

  • 需要根據不同的 IoT:bit 和指令來取代 API 中的IDMSG

  • 使用TextBox1.文字取得使用者輸入的ID

  • 您可以將MSG的文字指令直接寫上

  • 否則,您也可以使用ButtonX.文字取得按鈕的文字屬性,用作MSG,注意在執行此操作之前需要設定文字屬性

  • 使用合併文字連接各部分的 API

  • 完成 API 網址後,使用Web1中的呼叫Web1.執行GET請求來發送 API 指令

例子

auto_fit

  • 完成Button1的功能後,請對其他按鈕重複上述步驟,並變更目標按鈕元件(從Button1Button2Button3、… )

auto_fit

AIA

APK

15.8. 結果


APP 發送顏色訊息後,燈光顏色會改變。

auto_fit

15.9. 思考


Q1. 您能想出一個讓彩色燈光變得更智能的建議嗎?(例如會自行決策而不是總是等待指令)

Q2. 您可以嘗試在應用程式上添加一些按鈕以執行更複雜的操作嗎?