2021年8月5日 星期四

將ESP8266類比腳位的讀值做為模擬測資送到Google Forms儲存

 將ESP8266類比腳位的讀值做為模擬測資送到Google Forms儲存

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/

Aug. 5, 2021
88x31.png[1]
 

實驗目標

將ESP8266物聯網開發板讀取到的感測資料送至Google儲存,如圖1所示。




 圖1:本實驗架構圖。

材料

品名

數量

單位

備註

WeMos D1 WiFi UNO

1

*其它具有Arduino相容腳位及WiFi功能的開發板亦可

USB A公 對 Micro USB B公傳輸線

1

建議長度最好≥100 cm

*例如:D1 mini、…。

編程與開發環境建立步驟

請依照以下6個步驟,依序完成。

1. 安裝CH340 driver(驅動程式) 依照這篇 https://reurl.cc/7rQADb 提及的網址下載並裝妥開發板上晶片的硬體驅動程式。裝完後可以在device manager(裝置管理員)中看到它已被指定到一個特定的COM代號了。
2. 安裝Arduino IDE 從照這篇 https://reurl.cc/dGkbyq 的做法,先從Arduino官網上下載最新版的Arduino開發工具後安裝之。然後再讓Arduino IDE掛載上WeMOS D1 R1這塊板子的相關資訊。最後要記得選定它在步驟1拿到COM埠代碼(註:筆者在測試本文時發現,V1.8.15版的Arduino IDE已不會有先前版次埠偶而會有跑掉未勾選的情況)。
3. Arduino程式開發起手式:blink 將ESP8266接上電腦,再依筆者先前拙著 https://reurl.cc/XWMr2E 測試妥接下來的軟硬體開發環境是否備妥(板載的LED能正常閃爍)。註:步驟3~4(再到6)採取的是樣板程式碼的decomposition(拆解)。若讀者已確定您的軟硬體開發環境是正常的,可直接跳到步驟5。
4. WiFi connection(連接測試) 步驟4~7可參考這篇 https://reurl.cc/GmyqQW 的做法。將您的一段式(即裝置一開機後自動地讓程式傳送帳號及密碼後就可以連網)WiFi AP(筆者是開自己的手機hot spot(熱點)讓開發板連接上網的。讀者若要設定成非手機的WiFi AP,請查詢該WiFi AP的相關設定)帳號密碼填入下列template code(樣板程式)aaabbb處後燒入到開發板中即可如圖2~3的所示順利地連上網際網路。
  1. #include <ESP8266WiFi.h> //ESP8266連網用

  2. void setup() {
  3.   Serial.begin(9600);

  4.   WiFi.begin("aaa","bbb");
  5.   while(WiFi.status() != WL_CONNECTED) { //不斷重複等候WiFi AP連接上
  6.      delay(500);
  7.      Serial.print(".");
  8.   } //end of while

  9.   Serial.println(WiFi.localIP()); //顯示出開發板被配到的IP
  10. } //end of setup()

  11. void loop() { //沒用到,留個空殼即可
  12. } //end of loop()

  13. 圖2:開發板連上WiFi後會取得一個IP。

    圖3:在WiFi AP上可以看到該開發板已連接(筆者的開發環境是筆電亦連到手機熱點上網,故會顯示已有筆電和開發板共2個連線裝置)。

5. 建立Google Forms 建Google Forms的詳細過程已在步驟4中的YouTube影片網址中揭示。取得form的API key(金鑰)field id(表單內的欄位名稱代碼)如圖4及圖5所示。其中,知導了建好的Google Forms的這兩項資訊後,可直接在瀏覽器上下達 https://docs.google.com/forms/d/e/xxx/formResponse?entry.yyy=zzz 的HTTP GET命令手動傳測資zzz(如圖6所示)。同時,讀者可以檢查表單對應到Google Sheet上已成功將zzz寫入了。其中,Google網站提供的web services(網路服務)項目可查閱 https://reurl.cc/EnllOm 所示。
總結,上述的流程可以順利的產生一條完整的HTTP GET命令,執行它就能把一筆測資送到Google Forms儲存。接著,再把這個命令依照Google Forms的API呼叫格式填到程式碼裡(步驟6),就可以完整的串接讀取測資、送雲端存檔的整個自動化流程了。
  1. 設定Google Forms,以取得金錀與欄位代碼。
  2. 組成HTTP GET命令(可在瀏覽器上手動下達測試)。
  3. 用支援HTTP呼叫的程式語言程式拼成合法的API格式後反複自動執行。


圖4:Google自動產生的表單金鑰(藍色色塊處的字串)。

圖5:Google自動產生的欄位名稱代碼 1245404726。

圖6:手動下HTTP GET命令成功的網頁畫面。

6. 修改樣板程式中的參數  

  1. #include <ESP8266WiFi.h>
  2. #include <WiFiClientSecure.h> //下達HTTP GET用

  3. long  test_data; //存放類比腳位讀到的測資
  4. WiFiClientSecure Secure_client;

  5. //讀取類比腳位17測資
  6. void read_data() {
  7.    test_data = analogRead(17);
  8. }

  9. void upload2GoogleForms() {
  10.     Secure_client.setInsecure(); //[2]
  11.     if (Secure_client.connect("docs.google.com", 443)) {
  12.         Secure_client.println("GET /forms/d/e/xxx/formResponse?entry.yyy="+ String(test_data)+"&submit=Submit HTTP/1.1");
  13.         Secure_client.println("Host: docs.google.com");
  14.         Secure_client.println("Connection: close");
  15.         Secure_client.println();
  16.         Secure_client.stop();
  17.    } else { //Google returned 0
  18.       Serial.println("Google said no!");
  19.    } //end of if-else
  20. } //end of upload2GoogleForms()

  21. void setup() {
  22.    pinMode(17, INPUT);
  23.    Serial.begin(9600);
  24.    test_data = 0;
  25.    WiFi.begin("aaa","bbb");
  26.    while(WiFi.status() != WL_CONNECTED) {
  27.        delay(500);
  28.        Serial.print(".");
  29.    } //end of while()

  30.    Serial.println(WiFi.localIP());
  31. } //end of setup()

  32. void loop() {
  33.     read_data();
  34.     Serial.println(test_data);
  35.     upload2GoogleForms();
  36.     delay(5000);
  37. } //end of loop()

7. 燒入開發板 當程式燒入完成後,在Arduino IDE的serial monitor(序列埠監看器)可看到類比讀值不斷的更新,並且透過網路將之記錄到Google Sheet上。

Advanced learning(進階學習)

  1. 後端database(資料庫) 開發板上傳測資到雲端資料庫的選擇還有Google Sheet(不透過Google Forms,但不確定現在是否可行,因為Google的開放策略總是改來改去的)、ThingSpeak、自架的資料庫、…。
  2.  HTTP、HTTPS protocol(通信協定) 在「編程與開發環境建立步驟」一節步驟6樣板程式的第13行,為什麼要設定成insecure(不安全的)?讀者可以試試,把此行comment(註解)掉後實驗是否依然會成功?
  3. 和WiFi AP建立連線  在「編程與開發環境建立步驟」一節步驟6樣板程式的第6~12行,begin()、status()、localIP()這三個method(方法)是定義在ESP8266WiFi.cpp這隻程式(在 C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\3.0.2\libraries\ESP8266WiFi\src 這個path(路徑)下可找到它)中的,它是怎麼implement(實現)的?
  4. 從樣板到專業或應用 現今編程已變的十分簡化,跟著SOP(Standard Operation,標準化流程)123…就搞定。如果只是拿來快速應用,It's ok. Everything is fine. 否則,我們得細想:業餘 vs. 專業?我會套快速樣板,別人也一樣會套,那差別在哪裡?還有,樣板雖美,但當後續程式maintain(維護)發生問題時(很多時候會發生在某些API改版)要怎麼debug(除錯)?另一方面,從樣板內的基礎必要知識是哪些?要不要花時去了解?…學習是有層次的,端看我們的目的為何?
  5. 多欄位(multiple fields) HTTP GET命令 https://docs.google.com/forms/d/e/xxx/formResponse?entry.yyy1=zzz1&entry.yyy2=zzz2&entry.yyy3=zzz3 ,那「編程與開發環境建立步驟」歩驟6的程式要怎修改呢?
  6. 觸發條件(triggering conditions)設定 能否設定當某些條件成立時自動發出手機推播(push)警訊?例如:當Google Forms收到的溫度測值超過100度,可能這個感測器已燒毀…。
  7. 443 在「編程與開發環境建立步驟」步驟5樣板程式第14行的443是何意?(https://reurl.cc/gWAR4R


  1. 六種授權條款
  2. 筆者特別感謝慧手科技Lin Sam(https://reurl.cc/6aO3Gk)老板的大力協助,使得本實驗得以順利完成。

2021年6月22日 星期二

水可以奌火嗎?

 

水可以奌火嗎?

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/

Jun. 22, 2021
88x31.png[2]

家中的熱水器突然罷工不出熱水。裝死洗了兩天冷水後,还是決定不能偷懶放著爛。所以呢,只好硬著頭皮,趁著上完課後趕緊來當半日水電工。
先看了幾
部水電工同人志來墊墊底 。其中要拜的是這部,今日得以省下$$都靠它!
先講結論:其實只是進水的浮桶生鏽卡住,造成微動開関等不到它來啟動,而無法順利奌火而已,人,就是它殺的
 

根据前面說的那部神片指引,先用三用電錶量測電池線路
。然後再往前一極測試俗稱的「水奌火」裝置(記得小時候好像看过熱水器是這樣廣告的,不曉得有沒記錯)。咦,直接short微電開関就聽叭叭的電撃声,往上頭看也可以看到電火花。所以咧,是誰要來啟動它去奌火呢?是水吧?那卡奌就跑出來了:原來是浮筒因為水垢加連動的鏍絲生鏽而卡卡。先用廢牙刷清潔、除白色水垢,再用鐵刷去鏽。用吹氣球吹掉這些雜物後,重新上奌WD-40潤滑並防鏽。
最後,裝回外殼
之前,再把生鏽處上奌WD-40、接線外殼有破損的用電工膠帶加固。這樣就完成了一趟水電工之旅了~。

後記:水奌火的原理
一開始開熱水會讓浮桶上升去彈壓微動開関,它一过電就誏電子奌火控制器奌火燃燒瓦斯


参考資料

2021年3月7日 星期日

小彼特開天眼:使用VIA Pixetto視覺感測器之形狀偵測功能

小彼特開天眼

使用VIA Pixetto視覺感測器之形狀偵測功能[1]
Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/

Mar. 7, 2021
88x31.png[2]

難易度★★★☆☆

主題:音效

聲音效果常能在一般場合上起畫龍點睛之效。就讓我們一起來play music吧!

任務:

小彼特特別加裝了新設備「天眼」來破解酷巴佈下的重重障礙而賺取滿滿的金幣。我們一起來看小彼特如何大顯身手吧!(利用8787的形狀偵測功能來啟動micro:bit內建的瑪莉歐撞金幣的音效「ba ding)。

 材料

品名

數量

單位

備註

VIA Pixetto視覺感測器(含長、短micro USB專用傳輸線各一條)

1

 

Grove

1

 

micro:bit主板

1

 

micro USB傳輸線(100cm

1

 

KSB034 I/O擴充板(90度排針)

1

 

圓形物件

1

 

造形分析(結構)

請參考瑪莉歐撞金幣的場景 ,將8787及micro:bit結合到讀者的情境之中,以便說一個您的設計故事。

功能分析(電路、程式)

如下表所示,將8787 Grove線的黃白Tx、Rx和micro:bit的P1、P2相接,以雙電源共地方式連接8787和micro:bit(做實驗時可將兩者都接到同一部電腦上供電)。註:因為micro:bit的P0腳和音源輸出同線路,習慣上,將它保留給外部的蜂鳴器使用。

8787

micro:bit

P1

P2

+3V3

GND

 


請參考本書範例5:心情指數的設定,在Pixetto Utility上套用圓形的形狀偵測功能

當micro:bit出現8787初始化完成圖形之後,如果8787偵測到圓形物件,則讓micro:bit播出瑪莉歐撞金幣的ba ding特效聲

完整的micro:bit積木程式可由https://reurl.cc/MZ6bVn)下載。

成果展示

本文的展示影片如https://reurl.cc/ravqp1所示。

教學活動設計

  1. 主題曲 根據瑪莉歐主題曲簡譜https://reurl.cc/8y6WE7),修改本範例程式,讓8787偵測到三角形時由micro:bit開始播曲子

實作練習題

修改本範例程式,使得小彼特可以隨時自動計算獲得的金幣數。参考程式碼如下:


参考資料

  1. 本文係參考VIA官網〈Micro:bit 程式設計〉(https://reurl.cc/Dvl20R)改寫而成。
  2. 六種授權條款

2021年3月3日 星期三

Pixetto Scratch版彩球機解析:使用VIA Pixetto視覺感測器之顏色偵測功能

Pixetto Scratch版彩球機[1]解析

使用VIA Pixetto視覺感測器之顏色偵測功能
Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/

Mar. 3, 2021
88x31.png[2]

難易度★★★☆☆

主題:樂齡

台灣已邁入(出)生不如死(亡)的高齡化社會。為了讓年長者能健康地維持身體機能,試著想想科技是否能幫上什麼忙呢?要老人家運動就要有伴,他們最想要和孫子們一塊兒玩。所以,做一台彩球機,祖孫可以同樂,豈不兩全其美呢?註:楊老師根據這個主題,原先設計有一實體的彩球機如影片所示(https://reurl.cc/6yd3dM

任務:

爺爺老了小7想要做個可以動手兼動腦的機台讓阿公可以每天one more, two more一下(利用8787 的顏色偵測功能製作一個可以首腦並用的Scratch抗老遊戲)。

 材料

品名

數量

單位

備註

VIA Pixetto視覺感測器(含長、短micro USB傳輸線各一條)

1

 

紅、黃、藍、綠色球各一

1

 

*3D列印攝影機架

1

選配(楊昌珣老師分享)

造形分析(結構)

請參考楊老師安排的情境設置方式來設計彩球機的架設場景。其中在筆電上用來放置8787的攝影機架,可參考書附楊老師分享的「3D列印攝影機架.stl」(https://reurl.cc/E2jNra)自行印出使用。此外,楊老師還設計有一雷切版結構,讀者可参考原作者分享的「AI活力彩球機scratch手推型.rld」(https://reurl.cc/KxlY4m)雷切檔也切一台來組裝。

功能分析

 請先觀看書附楊老師錄製的操作影片(https://reurl.cc/9ZvAGx),讀者們應該可以看出彩球機主要有計時一分鐘及計分00~99兩大功能。本範例完整的程式碼可由下載(https://reurl.cc/NXlox5)。

  1. 舞台分析 使用這個文字圖形做為初始畫面的背景圖。

  2. 角色分析 本例中一共有 用來控制全局的controller,它一共有8個造形圖案,分別是紅綠黃藍的隨機出球、倒數計時的321、及遊戲結速的Game Over圖檔。

    計分部份有十位數point_10及個位數point_1兩個角色。另外,計分部份則有十位數time_10及個位數time_1兩個角色。point_10、time_10和time_1都會有0~9共十個數字來切換顯示  。另外,因為遊戲限時1分鐘,所以計時的十位數字time_10只會在0~6變化 
  3. 劇本分析 在Pixetto Utility上先套用顏色偵測功能後開啟8787硬體和Pixetto Scratch傳輸資料的Pixetto Link中介程式。此時,會在螢幕右下方看到這隻程式正在電腦背後執行著。連入雲加速器https://reurl.cc/pmvaLx),載入範例14:Pixetto Scratch版彩球機解析.sb3」這隻我們整理楊老師分享的原始程式碼。讀者設定好Pixetto Scratch與8787的序列埠  後就可先行體驗一下彩球機如何讓爺爺奶奶們「運動變年輕」的魅力。
    然後,我們來解析它的計分功能。玩家的得分範圍預設為00~99兩位數。所以,程式在controller角色裡建立了變數score

    做為得分的累計,控制的程式片斷如下。在計分顯示效果上,透過圖形數字(角色point_10和point_1的切換
     ,在視覺效果上就會看到畫面上好像有真實的數字在不斷跳動著 。和計分的邏輯相同,計時的做法如出一輒,在controller角色裡建立了變數time來記錄剩遊戲剩餘的時間。程式一開始時先呈現出3秒倒數計時的提示。如果時間尚在60秒遊戲限時內的話,5秒隨機切換出題、遊戲時間剩下3秒時出現提示音效
    、時間到時顯示收尾畫面
    在計時顯示效果上,取出60~00的十位數(角色time_10)方法是把它扣掉個位數後再取出10的餘數例如:(36-6)/10...餘3,所以,36的十位數便是3。而取出個位數(角色time_1)的方法是取原數字的餘數即可,例如:36/10...餘6,所以,36的個位數便是6

教學活動設計

  1. 阿公阿媽來打球 準備2套彩球機,邀請2位學員分飾阿公和阿媽來PK。請於2人的手上綁上重物來模擬長者行動遲緩的情境,以建立同理心。
  2. 多執行緒(multithreads) 在controller角色的程式中有數處擺放著等待積木,這是因為彩球機要同時要計分和計時,所以使用了CPU的多執行緒排程(scheduling)技術來實現。讀者們可試著調整這幾塊積木的數字大小,看看程式執果是否順暢。

實作練習題

修改彩球機的Pixetto Scratch程式,增加一得分90即達標遊戲停止的設定。
參考程式:修改controller角色計時程式片斷如下


参考資料

  1. 本文乃台北市仁愛國中楊昌珣老師及其公子楊喻丞共同創作作品。感謝楊老師惠允本書改寫後收錄。
  2. 六種授權條款