前一陣子發現三十多年的古典吉他的上弦枕有裂痕(圖1)，難怪彈空弦時老聽到雜音，一開始只有一根弦有這樣的問題，剪了一小片塑膠片墊在上弦枕的凹槽中，雜音就沒了；後來其它弦也有類似的情形，索性以 3D printer 用的鐵氟龍膠帶貼了兩層在弦枕上方，又暫時解決了雜音的問題。不過鐵氟龍膠帶畢竟還是薄，久了就被弦給壓破了。好吧！再發揮一下 DIY 的精神，鐵氟龍膠帶太薄了是不是！那我請出 3D printer 必備的鐵氟龍(PTFE)管，夠滑、夠硬了！
先來看看上弦枕上這明顯的裂痕：
 |
| [圖1] 在上弦枕中央有裂痕(半透明的為鐵氟龍管) |
鐵氟龍管原來是 3D printer 拿來送塑料用的，
 |
| [圖2] 鐵氟龍管與已處理好的上弦枕 |
切一小段鐵氟龍管，並剪開後盡量攤平，讓它穩穩地蓋住上弦枕。因為鐵氟龍管用力壓是稍可塑形，所以能壓出淺淺的凹糟，凹糟雖淺，還是能固定琴弦。
 |
| [圖3] 蓋上鐵氟龍管的上弦枕 |
簡單的加工一下，又讓我的吉他沒惱人的雜音了。哈哈哈～剩下的雜音就是自己琴弦沒壓好的問題了 XDDD
上週江明勳老師提到他找到一個滿不錯的「雷達圖產生器」，但是它無法更改文字的字型大小，也無法由網址帶預設的參數......；前幾天 HTML5 圓面積小教具完成了，就開始在 GitHub 中找有沒有可以參考的程式。GitHub 中用「radar chart」的關鍵字可以找到不少專案，其中 D3.js 和 Chart.js 相關的專案還不少。本來我已經動手用 JavaScript Canvas API 在畫雷達圖，一接觸了 Chart.js，它超強的程式庫，讓我完全不想自己「造輪子」了，直接用 Chart.js 搭配自己的前後端輸入、輸出程序就滿有樣子了，能有網路中眾高手打造的利器可用，真是件幸福的事呢！這個 HTML5 雷達圖產生器截圖如下：
 |
| HTML5雷達圖產生器截圖 |
想要體驗一下這個簡易旳雷達圖產器，按一下底下的紅色按鈕，即可開啟工具：
底下簡單地介紹一下HTML5 雷達圖產生器的功能：
上週朋友問到 HTML5 FUN 的數學小白板有推導圓面積公式的元件可用嗎？
小學高年級數學，會利用圓的切割與拼接活動，察覺圓的面積、平行四邊形與長方形的關係。印象中曾看過類似的數位模擬工具，可以解決手工無法輕易將圓切割到很小份後拼接的問題，找了一下，在 GeoGebra 中的這個，由 Bed Prasad Dhakal 所分享的「Area of Circle」，很接近朋友提出的需求：
第一次接觸 GeoGebra 是2002年在交大上研究所課時的事，早已忘得一乾二淨了。摸索了好幾天，以 HTML5 寫了一個可以獨立運作，用來找出圓面積公式的小工具。
|
| HTML5 圓面積小教具截圖 |
想要立即玩玩看，就按一下底下的按鈕來啟動工具：
這個圓的面積小工具簡單的功能介紹如下：
建議可以設定不同的「等分數」，並將扇形展開，以多組拼接的扇形，在同一個畫面來觀察。
今年第一次在河堤上走 4km ，由景美溪左岸下階梯往堤外便道時，看到滿地的落葉，與整潔的堤頂及往河堤內的階梯相比，實在差太多了。當時有一個疑問，市府應該有請人打掃才對，為什麼往堤內，跟往堤外的階梯會有這樣大的差別待遇？另外，心想，掃地也是一種滿好的運動，其實我可以騎著自行車，「路見不平（心不平），拔『帚』相助！」，不過，也只有閃過那念頭而已，並未實踐。
早上又路過這都是落葉的階梯：
走到河堤上時，看到斜坡有一把掃帚，就這麼「拔帚相助」了！底下這是成果：
由於沒有畚斗，只好將落葉都集中在不會影響行進的角落了。現在看起來不但清爽，走起來也安心。之前雨天時，走在溼滑的落葉上，總覺得弄髒鞋子事小，要是摔一下，那可嚴重了！
雞婆完，坐在河堤上的椅子，頂著弱弱的陽光，涼風拂面；汗水不但浸溼了衣褲，連眼鏡上也滴得都是了：
想想，人還能這樣子勞動著，也是一種幸福呢！
為了方便製作影片或是音檔的字幕檔、逐字稿文字檔， 2023年2月底，我在 Google Colab 筆記本中，結合了 OpneAI Whisper 及 yt-dlp，搭配 Colab 簡單的網頁界面，可輸入像是影音網址(或是檔案路徑)、Whisper 的語音辨識模型大小、輸出格式......等自訂的參數；設定完參數，按個「執行」鈕，就可以不用管程式的安裝及享用 Colab 提供的 GPU 運算力，輕鬆坐等接收語音辨識的結果 (詳見舊文「雄:使用 OpenAI Whisper 製作影音的字幕或逐字稿」)。
好一陣沒錄教學影片，前幾天為了幫新錄的影片加上字幕，才發現在 Colab 中安裝 OpenAI Whisper 似乎要多花很多倍的時間，以我片長不到五分鐘的影片來說，語音辨識只要幾秒鐘，等待安裝卻要幾分鐘，實在不成比例（註：2023.11.22 再次使用 OpenAI Whisper，安裝時間要很久的問題已不存在，看起來應該是相關套件的版本已跟上，不用樣樣都需要重新編譯，回復到可以順順地使用 OpenAI Whisper的狀態。）。於是開始找是否有更好的方案，找到了 guillaumekln (Guillaume Klein) 的 Faster Whisper 專案：
Faster Whisper 是使用 CTranslate2 的界面加上 OpenAI Whisper 開放出來的模型，可以大幅減少記憶體及其它資源的耗用，又能有 OpenAI Whisper 的輸出結果，這樣是不是很讚！
經過這幾天的實測，至少安裝程序等候的時間是少很多～很多～很多～～，輸出的內容又和 OpenAI Whisper 的結果差不多，真的是小而美。要說缺點的話，大概是因為它目前沒有提供直接輸出成字幕格式的檔案，不過，這算是小事，只要用其它的套件，多寫幾行程式碼來補足功能，轉換一下輸出格式就好了，哈！相關程序我都在底下放在 Colab 中的工具處理好了。
整合在 Colab 中的「Faster-Whisper-語音辨識-輸出文字檔」工具，放在這個短網址中，開啟後就能使用：
先開啟工具的網址，進入頁面，往下捲，在說的的下方，應該會有如 [圖一] 的輸入區：
 |
| [圖1] Faster Whisper 的操作程序 |
1.上載檔案：如果想上載電腦中的影片或是音檔，就按 [圖1] 箭頭1所指的 [檔案] 圖示，就可以將要進行語音辨識的影音檔案上載。上載完的檔案或是使用 Google 雲端硬碟的檔案，如何複製檔案的路徑，請自行參考「操作示範影片」中的示範。
2.在「url」中填入影音的來源：
詳細的過程請參考底下的操作示範影片。
HTML5 FUN 筆順練習第三版(2019版)的字練習過後，可以重播習寫的筆跡動畫，如果將筆跡資料匯出為檔案後，還可以在日後匯入重播，習寫結果匯出與匯入詳細的說明可以參考這篇「雄 : HTML5 : 筆順練習第三版(2019版)習寫結果匯出與匯入」。
八月中在水里國小，有老師問到可以將筆跡資料直接變成 GIF 動畫嗎？哈！這個功能我也曾想做，但是要動到滿底層的技術，只能再研究了。不過，我先讓「匯出習寫結果」多一個功能，可以將所有習寫過的字，手寫筆跡匯出一張圖片，就像底下 [圖1] 這樣：
 |
| [圖1] 匯出的習寫筆跡圖片 |
跟播放習寫動畫一樣，黑色的筆跡是正確的，紅色的筆跡則是寫錯的，如果練習多次，只會記錄最後一次正確的。
要怎樣將習寫筆跡圖匯出呢？
 |
| [圖2] 匯出習寫結果的選單 |
如 [圖2] 的紅色箭頭所示，先按「匯出習寫結果」的圖示，出現選單以後，再按「下載筆跡為圖片」，即可將筆跡匯出為 PNG 圖片檔。
如果是在 iPad 上操作可能還要再依個人需要，選擇儲存的方式與位置
[方法一] iPad 中，是由主畫面啟動筆順練習的，是這樣儲存習寫筆跡圖：
 |
| [圖3] iPad 中以「分享」的選單來儲存圖片 |
 |
| [圖4] iPad 中儲存圖片 |
[方法二] iPad 中，由 Safari 瀏覽器中執行筆順練習的，則是將圖片儲存到「下載」：
 |
| [圖5] 用 Safari 的「下載」儲存圖片 |
 |
| [圖6] 在「下載」中找儲存好的筆跡圖 |
如果是直接使用瀏覽器開啟筆順練習工具的，應該就是到「下載」的資料夾中找儲存好的圖片即可；反正按「下載」或是「儲存」鈕時，務必看一下、記一下檔案儲存到哪裡去，就對了。
以上是簡單地介紹筆順練習第三版(2019版)習寫筆跡儲存為圖片檔案的方法，使用上如果有任何問題，歡迎在底下留言反應。
底下的影片示範如何在電腦中操作，將習寫筆跡儲存為圖片：
2023年8月15日和16日應邀去南投縣水里國小，上了兩場 HTML5 FUN 的研習，個人除了是講座，也當了短暫的路人甲觀課。分享到「我說你猜」時，是由好友江明勳老師帶領大家體會什麼是「有效」的教學，讓我以第三者的角度觀察到遊戲不但要好玩、有趣以外，還要思考如何達到教學目標，讓整個教學活動是「有效的教學」，著實收穫不少。底下簡單地記錄一下這個應用「我說你猜」的教學活動如何進行。
活動開始，先簡單地介紹「我說你猜」的遊戲界面，及在平板上如何使用裝置感應方向的功能來控制「下一題」與「跳過」兩個動作指令：
 |
| [圖1] 我說你猜的起始畫面 |
 |
| [圖2] 我說你猜正確的畫面 |
 |
| [圖3] 我說你猜跳過的畫面 |
請一位學員出來拿平板，並負責猜謎題；其它學員負責依答案內容說出提示(或是表演動作)，但不能講到答案的任何一個字；如果猜的人答對，就跟他說「答對」，猜錯了，跟他說「答錯」，拿平板的人，依對錯讓平板做「動作」。
經過大家七嘴八舌、比手畫腳，結束一輪好玩、有趣的遊戲。
明勳老師介紹「我說你猜」的「預覽題目」功能，啟用該功能(圖4)，即以在畫面上，一次顯示所有的答案(圖6)，並讓學生在限定的時間內進行討論，討論要如何提示，讓猜的人能夠在最短的時間內猜出答案。「我說你猜」可以設定討論時間，時間終了會有警示訊息及音效。我們可以將學生分組，然後各組輪流到台前，請一個人猜，其他人負責提示，老師則將各組最後的得分記錄在黑板上，最後來比較各組的得分情形。
 |
| [圖4] 我說你猜設定畫面 |
另外也介紹了「我說你猜」可以在電腦上玩，並以鍵盤的右方向鍵來控制「下一題」，以左方向鍵控制「跳過」的功能；減低老師擔心平板在玩的時候，掉到地板而損壞的壓力。
最後明勳老師將學員依電腦教室電腦上的編號來分組，將學員分為四組；電腦編號除以四，餘數１者為第一組，餘數２者為第二組，餘數３者為第三組，整除者為第四組。
各組先到指定的位置集合，然後老師在「我說你猜」右下角設定要「預覽題目」(圖4)，選定畫面中央遊戲時間 60 秒，題目選單中則選擇「節慶」(圖5)，揭示題目後，按「舉牌小人」圖示上方的５(圖6)，設定討論時間五分鐘。接著各組就開始進行討論。
 |
| [圖5] 我說你猜題庫選單 |
 |
| [圖6] 我說你猜預覽題目的畫面 |
討論時間結束後，先請第一組派一個人負責扮演老師的角色，以兩根手指放在電腦鍵盤的左右方向鍵上，控制「下一題」及「跳過」（答對時按右鍵，答錯時按左鍵）；另一人負責猜題，站在台前，面向大家（背對螢幕）；其它人則負責提示。
 |
| [圖7] 我說你猜等待遊戲開始的畫面 |
 |
| [圖8] 我說你猜遊戲開始 |
 |
| [圖9] 我說你猜題目卡片 |
就這樣開始了一組玩「我說你猜」，其它各組「看戲」的活動。
 |
| [圖10] 我說你猜遊戲結束的畫面 |
每一組結束，明勳老師示範講評與在黑板記分的「技巧」。凡是違反遊戲規則者（例如：說出答案的某個字......)，當然只能扣分；哈！所謂的「技巧」就是有時可以利用該組的特殊表現而給予加分，並盡量讓各組能「同分」。
在有說有笑的「全體一起玩」、「分組輸流玩」，兩種遊戲模式的體驗活動以後，明勳老師問大家：
剛剛玩遊戲時，老師做什麼事？
老師只要在電腦用兩根手指按左右方向鍵，跟在黑板記分。
這樣子，老師是不是可以比較輕鬆一點？
大家覺得這個遊戲好不好玩？
大家異口同聲的回答：「好玩！」。
有沒有「效」？
「有『笑』」、「哈哈哈～好笑」......兩場研習中總會有人會說出這樣的回應。
明勳老師會回應並追問：
是的，好笑，好好笑，那有沒有「教學效果」呢？
有沒有「效」在分組輪流玩的過程中，學員有深刻的體驗，也自然地驗證了教學成效，
我們進行分組討論與報告時，經常是，台上的人報告，其他人變成路人甲乙丙丁......，甚至根本已經不知神遊到何處去了，學生也是類似的狀況。玩「我說你猜」時，絕大部份的人都盯著畫面中的謎題，情緒激昂地跟著動腦，跟著歡呼，跟著哀聲惋惜.....。這樣「有趣、有效」的課堂才是每個老師期待的情景與氛圍。
如果您也想玩一玩「HTML5 我說你猜」，可以參考底下的相關連結。
來囉～ HTML5 FUN 數學小白板的時鐘元件來囉～可以讓它自己走，也可以使用手動模式來自己拖曳指針。
底下整理一下它的功能選單：
指針對應到刻度上都有一個同色的小方塊，它除了是一個「指示器」可以更清楚地顯示指針所在的刻度外，如果拖曳「指示器」，可以用與指針同色的扇形，及虛線箭頭標示出經過的時間。如果直接拖曳指針(不要在指示器上)，就可以取消現有的經過時間標示。
功能選單有以下的異動：
底下是數學小白板時鐘元件的操作影片：
章節的清單如下，按時間可以直接跳到該章節：
00:00 新增時鐘元件及基本操作
00:48 功能選單介紹
01:00 秒針及刻度顯示設定
01:31 數字鐘的顯示與隱藏
02:11 複製時鐘
02:25 標示經過的時間
03:13 利用五格板放多個時鐘提問
前一陣子因為想幫「HTML5 FUN 數學小白板」加上匯出成圖片的功能，找到了一個名為「html2canvas」的工具，試了一下，滿強的一個工具，利用 JavaScript 將網頁中，指定的元件整個分析後，輸出成 cavas，我只要加上轉成 PNG 圖片的程式，就完全符合我的需求；於是決定花一點時間研究 html2canvas 就好，不用花很多時間從最底層研究起。
html2canvas 可以在這個網址中找到：
在沒有加任何選項的情形下，用著，用著，發現幾個問題：
第一個問題應該只有我會遇到，因為數學小白板都放在網路中執行，不會有本機存取圖片的問題。以前是一不做二不休，直接將要用的圖片通通轉成 Base64URI 的格式 ，就能避掉 Tainted 的問題，在考慮要不要將數學小白板的16張圖捨圖檔，直接轉資料。
第二個「跨域」CORS 的問題，因為 GitHub 並沒有禁止跨域存取，所以只要在 html2canvas 中啟用「useCORS」的選項，將它設為 true 即可解決；後面的測試中，可以比較一下，有勾選「useCORS」，跟沒勾選，擷取的結果中，沒有小狗的圖案就知道該選項的效果。
第三個問題，如何跳過某些地方不輸出？html2canvas 的說明中有提到，我們可以將不想要放在輸出(擷取)結果中的物件，加上名為「data-html2canvas-ignore」的屬性，這樣子，它就會自動跳過該內容。底下的測試中，可以用勾不勾選「包含圖片上方的標題」來控制要不要出現在小狗上方那行「html2canvas 網頁擷(戳)圖測試」的標題字。
第四個骰子元件空白一片的問題，html2canvas 的功能說明中有提到「transform (Limited support)」，而骰子的動畫及結果呈現，正是使用 transform 所製造的效果。空白的部份可以使用選項設定「"foreignObjectRendering": true」，但它並沒有正確地顯示內容。沒關係，山不轉，路轉，路不轉，人轉；修改了骰子的程式，在擲骰子的動畫播畢，將原有的內容變完全透明，然後再加一張最後結果的點數圖片，完全地過渡，畫面有顯示，使用 html2canvas 匯出的結果也看得到骰子(不完美的大概是位置稍偏右下方一點點)。
來玩一下，並比較不同選項，輸出結果的不同吧！
發表文章
所有留言
