--- title: 生活科技物聯網 Wi-Fi 控制裝飾情境燈 - Websocket 講師:黃建彰 description: 創新力+抗挫力+自信力+情緒力+社交力+團隊合作+批判性思考+問題解決+STEAM跨域整合 image: https://i.imgur.com/4TU4nTC.jpg tags: 板橋高中, 教師研習, 110年10月19日, Wi-Fi Mini Lamp, Wi-Fi 控制裝飾情境燈 --- <!-- 1.CENT Browser 開 Google Meet 會議,鏡頭選 OBS 2.chrome_20 開教案,OBS 視窗擷取 3.手機 USB 接筆電,AnLink 連線,OBS 視窗擷取11 4.Alt+左鍵拉動,調整顯示範圍 --> {%hackmd ckQy8IEASk6wXa8a_6PISA %} <head> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> </head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> # 物聯網 Wi-Fi 控制裝飾情境燈 **https://hackmd.io/@FC/PCSHminilamp** {%youtube uzoMd26C__0 %} ![](https://i.imgur.com/oercz7c.jpg) ## <i class="fa fa-share-square" aria-hidden="true"></i> 問題討論 LINE 群 ![](https://i.imgur.com/Ebj1AAF.jpg) ## <i class="fa fa-wrench"></i> 組裝流程 ![](https://i.imgur.com/2zK0Vjc.jpg) 黏貼散光片 ![](https://i.imgur.com/UP7ANPR.jpg) 組裝控制板檔片左右 ![](https://i.imgur.com/XCxIoZv.jpg) ![](https://i.imgur.com/XV8tDf8.jpg) 組裝控制板檔片後 ![](https://i.imgur.com/yRSZKt3.jpg) ![](https://i.imgur.com/ltjPhdN.jpg) 置入控制板 ![](https://i.imgur.com/OOIAhUn.jpg) 組裝控制板檔片上 ![](https://i.imgur.com/iocNI4f.jpg) 黏貼燈條 ![](https://i.imgur.com/nSkEFlv.jpg) 銲接燈條導線 ![](https://i.imgur.com/da9KrVG.jpg) 定位燈條導線 ![](https://i.imgur.com/kxslzNO.jpg) 銲接控制板導線 ![](https://i.imgur.com/GpQVcdm.jpg) 組裝四周外殼 ![](https://i.imgur.com/gTdXXgp.jpg) 扣入上蓋 ![](https://i.imgur.com/nfiWzS3.jpg) ## <i class="fa fa-sliders"></i> 連線設定 未設定 Wi-Fi 連線亮綠燈 ![](https://i.imgur.com/718eN78.jpg) 連線裝飾燈基地台,密碼:`softskillsunion` ![](https://i.imgur.com/vjg9922.png) 進入設定頁面 ==192.168.4.1== ![](https://i.imgur.com/C7Z0qPp.jpg) 選擇 Wi-Fi 連線 ![](https://i.imgur.com/bUfCxLD.jpg) 設定完成 ![](https://i.imgur.com/Xwib4NA.png) 連線成功,燈號熄滅 ![](https://i.imgur.com/9HuBA1l.jpg) 進入控制頁面 `http://hostname.local/` ![](https://i.imgur.com/XRwylZ0.png) ## <i class="fa fa-puzzle-piece"></i> Arduino IDE 設定 [講義 :link:](http://blog.s2u4o.com/%e6%95%99%e8%82%b2/self-study/software-settings/arduinoideesp8266d1mini/) esp8266 開發板管理員網址 ` https://arduino.esp8266.com/stable/package_esp8266com_index.json ` <!-- ## <i class="fa fa-puzzle-piece"></i> Arduino IDE 設定及函式庫安裝 [講義 :link:](http://blog.s2u4o.com/%e6%95%99%e8%82%b2/self-study/software-settings/arduinoideesp8266d1mini/) esp8266 開發板管理員網址 ` https://arduino.esp8266.com/stable/package_esp8266com_index.json ` 程式庫管理員安裝函式庫 * ArduinoJson * Adafruit NeoPixel * WiFiManager --> ## <i class="fa fa-hdd-o"></i> SPIFFS 檔案系統 [講義 :link:](http://blog.s2u4o.com/education/self-study/software-settings/esp8266-filesystem-littlefs-spiffs/) [![](https://i.imgur.com/Q1oYu4g.pnghttps://i.imgur.com/Q1oYu4g.png)](http://blog.s2u4o.com/education/self-study/software-settings/esp8266-filesystem-littlefs-spiffs/) [ESP8266FS](https://github.com/esp8266/arduino-esp8266fs-plugin/releases/tag/0.5.0) ## 上傳程式 [ESP8266_Minilamp_WebSockets.bin](https://drive.google.com/file/d/1mTz_7ZgOtaia4TMUY1IR7nveQygpkq2p/view?usp=sharing) [data.rar](https://drive.google.com/file/d/1qs0nCoTCQML9CHsn19P7TOyoTqBWkrt4/view?usp=sharing)