2022年8月26日 星期五

[micro:bit, touch] 小彼特 V2 版三大新板載功能原理解說:觸控(touch)

小彼特 V2 版三大新板載功能原理解說:觸控(touch)

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttps://pse.is/TedLeeFB

Aug. 26, 2022
[1]

2020 年 10 月,小彼特教育基金會(Micro:bit Educational Foundation)(https://microbit.org)發行了 V2 版的新版硬體,V2 只比 V1 小幅度地增加了三項主要的板載(on board)功能(https://reurl.cc/AOM1rd)商標觸控(logo touch)麥克風(microphone)蜂鳴器(buzzer)
看熱鬧也要看門道,曹齊平老師說:


「基礎」知識的學習應該是了解底層最共通的原理、原則而不是盲目無止盡地去競逐新科技的應用[2]。
因此,就讓我們以在 vMaker 連載的三篇文章來闡述這個學習理念,並且我們也援用曹老師的科學魔法車(https://reurl.cc/W104m7)的電學基礎小實驗,落實「動手做以建立知識直觀」的學習根本大法。

建立直觀

小彼特 V2 版在它正面的商標處板載了電容式(capacitive)觸控的功能:

當我們用指尖去輕觸這個商標時就會觸發小彼特的硬體觸控電路,然後執行對應的處理程式,

例如:播放音效。功能展示影片請參考圖 1。


圖 1:電容式觸控(https://reurl.cc/W1N2Ey

電路原理

V2 版新加的這個觸控功能,其實是實做了一個 RC 延遲(delay)電路(圖 2)。而我們也可以用其他未實作此電路的接腳,以外接電路的方式來達成觸控的功能---甚至使用 V1 版也成(圖 3)[2]。
如圖 3 的藍色虛線所示,當手指未觸碰電路時,3V  10MW  P8 將形成電路迴路(circuit loop)
然而,當我們用手去觸碰圖 2 中的 A 點時,手指頭等效於圖中右邊的由 A 並接到地的電容(cpacitor)而讓電路形成延遲的效果(https://reurl.cc/XVZqqg)。此時,電路 A 點的電位會因為這個電容慢慢充電而致使電位爬升的瞬間形成「低(0)  高(1)」的變化。所以,我們就可以利用這個原理來偵測手指是否按壓了 A 點。
也就是說,當手指觸踫了 A 點(圖 3),小彼特的 P8 腳位就會收到 0。註:讀者可自行使用電錶併接驗證之。
詳細的解說影片請參考圖 4。

圖 2:觸控等效的 RC 延遲電路

 3:接線圖

圖 4原理解說影片(
https://reurl.cc/eOyNmK

程式原理

為了維持小彼特輸入接腳(pin)的高邏輯準位(logic level),圖 3 外接了一顆 10MW 的上拉(pull-up)電阻(https://reurl.cc/ERVKAn) 。所以,我們在小彼特一開機時(圖 5)就將晶片(chip)內的拉升電阻關閉。

(a)

 5:將小彼特晶片中 P8 腳位預設的拉升電阻關閉

接著,只要用手去觸碰 P8 腳位(圖 3),它的電壓會因為手指的等效電容短暫充電而致使 A 點(圖 2)電位降低。此時,就讓小彼特透過板載的蜂鳴器(buzzer)發出特效音(圖 6)。

 6:觸控程式

完整程式碼可由 https://reurl.cc/QbYpko 下載之。

關於 P0、P1 和 P2 的觸控

在小彼特的官方文件中(https://reurl.cc/7pVxv1)指出,無論是 V1 或 V2, P0、P1 和 P2 這三隻接腳已內建了觸控電路,我們可以從圖 7 的電路圖中(https://reurl.cc/XVQn8E)的紅色框標示處很清楚地看到。

 7 P0、P1 和 P2 內建的觸控電路

課程設計

運用小彼特的這個觸控功能,我們設計了「觸控點播」這個教學活動來引導學員們體驗它。

當玩家第一次觸碰小彼特的豬鼻子時,播第一首歌。第二次觸碰時,播第二首…。

完整的解說影片如圖 8 所示。


圖 8:觸控點播教學解說

完整程式碼可由 https://reurl.cc/KQO3nj 下載之。

分享翦影

如圖 9 所示。

 
 
圖 9:觸控教學分享

延伸學習

1. 請讀者們試試看,如果一直按著這個觸控點(V2 版的商標或外接電路)時,會發生什麼狀況?
2. 改用商標觸控的事件積木(圖 ),試試看按下(pressed)觸碰(touched)放開(released)長按(long pressed)這四種操作的控制差異性。

 8:流程圖與 MakeCode 程式對


3. 圖 3 的接線圖中,我們使用了 10M 做為上拉電阻,好奇心的讀者們一定會追問:為什麼選它?坐而言不如起而行,自己動手更換這顆電阻值來觀察會發生什麼事吧?(https://reurl.cc/AOM1Zp

4. 本文介紹的電容式觸控技術正是時下流行的觸控螢幕(touch screen)的基本原理。讀者們可進一步觀看圖  的解說影片。

圖 :觸控螢幕的原理(https://reurl.cc/4pLgeY

[2] 基礎知識的學習應該要學萬事萬物共通性的「基本」原理,所謂「一理通,百里通」就是這個道理。抓粽子要抓繩頭,如果不斷的把力氣緊抓綁在繩尾的粽子上,一次能抓的粽子數量就有限。而且我們將發現:花了大把的時間和金錢之後,我們始終只能跟著廠商不斷推陳出新的商業模式走。如此,我們只能一直當花錢的消費者(consumer),而非學習者(learner)---基礎知識學習的教具,通常不必是花俏的昂貴玩具!

2022年8月20日 星期六

[fChart, 流程圖, micro:bit] (fChart)流程圖轉(MakeCode)程式

 fChart)流程圖轉(MakeCode)程式

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

Aug. 20, 2022
[0]

問題解決(problem solving的過程(https://reurl.cc/zNry7p)中( 1),我們要培養用流程圖(flowchart來表達解決問題想法的能力,以便隨後能用各種工具(例如:程式、硬體、機構…)來實作(implement出來。

 

1:問題解決的流程

 

本文將從陳會安老師彙整的 fChart 150 (文後皆以 fChart 150 稱之)流程圖範例(https://reurl.cc/bE97Q6)中展示流程圖的有限符號是很容易和各類型的程式語言(本文將以 MakeCode 的積木程式為例)對應轉換的。這個轉換練習將有助於初學者熟稔程式邏輯,也就是說,當我們能將原始問題找到了一種解法之後,只要能將之以流程圖來表示,這個解法就能以工具來實作出來。因此,我們可以說:

 

流程圖為程式邏輯之母

問題

重複顯示五次 Hi

 

上述問題改編自前述 fChart 150 中的「04.迴圈結構─01.前測_顯示5次大家好」來說明從流程圖轉換到 MakeCode 積木程式的整個操作過程。因為 micro:bit 無法顯示中文,我們將要顯示的文字修改為英文 Hi

fChart 流程圖範例

首先,我們從 2 中可以看到紅框標示部份即為迴圈(loop。迴圈的控制有三個要素:迴圈控制變數a)、迴圈控判斷式a <= 5)及迴圈控制變數累加a = a + 1)。而每次進入迴圈時,我們就輸出一次 Hi。流程圖的執行結果如 2 右上的黑底小視窗所示。

以上這段為流程圖(認)(與閱),讀者們應該可以試著自己講給自己聽。如果能說的完整而無卡頓就代表我們真的讀懂了這個流程圖。讀懂之後再想想程式要重複輸出五次相同字串(string問題和這個流程圖是如何解決這個問題的(解決問題的)想法。因此,我們的程式邏輯就能在這樣的練功過程中被紮實的建立了。

 

2fChart 流程圖及其執行結果

流程圖追蹤(trace

結構化程式設計(structural programming由循序、選擇進入到重複結構後,是初學者很容易卡關的點,其原因概是對某些人而言,程式執行邏輯過於抽象化所致[1]。因此,本小節詳細地展示如何追蹤迴圈執行流程及其迴圈控制變數變化的一連串過程,即變數監看(watch,來協助初學者打通程式設計的任督二脈。我們將使用 fChart單步執行(single-step execution功能,逐步地追蹤 2 的完整執行過程。讀者們請特別留意此強大的視覺化功能可以十分穩固地增進我們對程式邏輯的具體了解,但前題是紮馬步的基本功一定要自己「動手」去練、去體會!

設定 fChart 直譯器(interpreter

1. https://reurl.cc/D3m6Aj 下載04-01.前測_顯示5Hi.fpp[2]並將之另存到本機資料夾的根目錄之下(文後皆以 d:\ 為例), 3

(a)


(b)


(c)



(d)
3:下載「04-01.前測_顯示5Hi.fpp

 

2. 連入 fChart 英文版的載點 https://reurl.cc/9pVEEO,將壓縮檔「fChartPython6_en.zip」下載到本機儲存[3]後將之解壓縮(要解到「根」目錄下以防止有中文徑名問題), 4

 

(a)

(b)

(c)

(d)

(e)

(f)

(g)
4:下載「fChartPython6_en.zip」並將之解壓縮到 d:\ 後執行「FlowProgramming_Edit.exe

 

3. 在「fChart Interpreter 6.00」中開啟「04-01.前測_顯示5Hi.fpp[4] 5

 

(a)


(b)


(c)
5:在 fChart 直譯器中開啟「04-01.前測_顯示5Hi.fpp

變數監看 單步執行

程式設計能力的培養分成兩部份:讀和寫,而在深入這兩種練習之前,我們十分建議初學者善用 fChart 的程式執行流程追蹤功能建立兩層面的直覺(intuition觀察(observation手動控制(manual control。我們以下列的步驟 4~6 來詳細分述之:

 

4. fChart 上方的執行控制工具列(fChart Execution Toolbar)上按下執行(execute)按鈕,觀察流程圖動態執行及結果輸出的過程來體會迴圈重複執行的迭代(iteration

5. 按下變數監看視窗啟動按鈕後,我們可以進一步觀察到流程圖在重複輸出字串時,迴圈控制變數 a 的變化過程(由 1 一直跑到 5)。

 

6:變數監看

 

6. 將延遲時間滑桿(slider往「右」打到底即可讓 fChart 進入單步執行模式。此時可以搭配控制按鈕,按一下執行流程圖中的一個符號, 7

 

7:單步執行

MakeCode 程式

本文的標是以 fChart 來訓練 1 問題解決過程的最後一段:從流程圖( 2)轉換為 MakeCode 程式[5]。為了更清楚對照,我們將這兩者併排顯示於 8 MakceCode 的完整程式碼可從 https://reurl.cc/KQMDMy 下載。

 

 

8:流程圖與 MakeCode 程式對照 

進階學習

1.         讓迴圈在「奇數次」時(即 a = 1, 3, 5)加上短音效,例如:ba ding 9

 

9ba ding 短音效

 

2.         修改 8 程式,使得程式在第 i 次迴圈時,閃爍 i Hi,例如:i = 3,則閃爍三次 Hi

3.         2,根據修改完成後的程式再以 fChart 酌修 2 的流程圖。


[0] 六種授權條款
[1] 迴圈是初學程式設計最困難的部分。透過流程圖,初學者可以清楚了解其運行「過程」。如果初學者無法自行追蹤迴圈的執行過程和了解迴圈控制變數的變化,就沒有真正的學會迴圈結構──陳會安老師如是說(https://reurl.cc/8p5aQb)。
[2] 改編自陳會安老師原版的 fChart 150 GitHubhttps://reurl.cc/9p18Oj)。
[3] 如果發生檔案有在下載但無法全部下載完時,請先暫時關閉防毒軟體。
[4] 讀者也可自行變更檔案的關聯(association程式,在 .fpp fChart 流程圖檔上雙撃時可以直接以 fChart 直譯器開啟之。
[5] 從此處就可以很容易看出流程圖和任何程式語言是可以一一對應轉換的。然而,根據陳會安老師的進一步研究,目前尚無這樣可供「自動」轉換的演算法存在。但是,人工手動轉換是可行的!