Advance 01 Another devBoard
上次課程補充：
中華電信衛生紙事件：https://www.chinatimes.com/newspapers/20170530000160-260114
中國信託社會實驗：https://www.facebook.com/chinatrust.tw/videos/vb.210121695693833/195767504502565/?type=2&theater
自打廣告：軍神之劍
課程目標：
智慧空間
快速複習現有技能
Web物聯網
智慧空間
我們該關心的是什麼？
- 如何知道智慧空間中有這些服務？
- 如何與這些服務互動？
所以設計界面的提示性很重要：先驗知識 (priori knowledge)
快速複習現有技能
數位輸出
數位輸入
類比輸出
類比輸入
Serial Port
I2C
物聯網
(資料來源:pcbdesign88.wordpress.com)
選項1:使用Arduino搭配ESP-01來做prototype，用ATcommand與ESP系列溝通。
選項2:直接用ESP-12相關開發板來做prototype
| Arduino Uno(透過Shield聯接網路) | ESP 8266(可連接網路) | |
|---|---|---|
| MCU bits / speed | 8bit / 16MHz | 32bit / 80MHz |
| 工作電壓 | 5V | 3.3V(最大消耗工作電流約200mA) |
| GPIO | 14個(40mA)/6個PWM | 16個，實際可用9個(12mA)/都支援PWM |
| Interface | SPI/I2C/UA | SPI/I2C/UART |
| 類比輸入Analog Input | 6個 | 1個(0~1V) |
| 其他 | 資料記憶體2KB/程式記憶體32KB | 資料記憶體96KB/程式記憶體64KB/Flash外掛512KB/1MB/4MB/16MB |
簡單來看，直接用ESP系列來開發物聯網prototype是更具效益的選擇
開發環境設定
在Arduino環境的偏好設定中，找到additional board manager URLs，加入這一行
http://arduino.esp8266.com/stable/package_esp8266com_index.json
在工具裡找到board manager，點選
安裝ESP board 2.3板（重要）
安裝ESP board 2.3板（重要）
安裝ESP board 2.3板（重要）
選擇版本
安裝驅動程式
A01上傳Blink程式
開啟Blink程式，將LED_BUILTIN改成D4，之後上傳程式。
A02連接網路
看實作
A03Webserver寫法
看實作
A04新增標頭檔，把網頁程式獨立出來
新增index.h檔案
在index.h裡面加入
const char PAGE_INDEX[] PROGMEM = R"=====(
<html>
<head>
<meta charset = "utf-8">
<title>Title是這裡</title>
</head>
<body>
<marquee>傳統網頁一定要來個跑馬燈</marquee>
<marquee behavior="alternate">Hello World</marquee>
</body>
</html>
)=====";
A05用網頁程式開關LED燈
解釋訊號：網頁->JS->Arduino
<html>
<head>
<meta charset = "utf-8">
<title>Title是這裡</title>
</head>
<body>
<p3>LED開關</p3>
<div id = "LED_SW">
<input type="radio" id="LED_ON" class="SW" value="ON" name="SW"><label for="LED_ON">開</label>
<input type="radio" id="LED_OFF" class="SW" value="OFF" name="SW" checked="chedcked"><label for="LED_OFF">關</label>
</div>
</body>
</html>
看上課實作
//下面這行不要刪
const char PAGE_INDEX[] PROGMEM = R"=====(
<html>
<head>
<meta charset = "utf-8">
<title>Title是這裡</title>
</head>
<body>
<p3>LED開關</p3>
<div id = "LED_SW">
<input type="radio" id="LED_ON" class="SW" value="ON" name="SW"><label for="LED_ON">開</label>
<input type="radio" id="LED_OFF" class="SW" value="OFF" name="SW" checked="chedcked"><label for="LED_OFF">關</label>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script>
$(function(){
$( "#LED_SW" ).buttonset();
$(".SW").change(function(evt){
var state = $(this).val(); //取出狀態
$.post("/sw", {led:state});
});
});
</script>
</body>
</html>
)=====";//這行不要刪
接下來要注意的事情
1.電源
2.網路
3.debug方法
課後作業：
(1)把今天的程式整理好，資料夾壓縮成zip檔.上傳
檔名:學號_ww01.zip
(2)到網路上找一隻基本的ESP8266的程式實作出來。
提供實作影片5~10秒
檔名：學號_ex.zip
下次上課請準備：
等待課程公布