DIY : 小鬧鐘維修

整理東西，然後發現之前一包被拆解的小鬧鐘，放太久，已經忘了它當初是哪裡壞了。大概是後來沒時間研究，索性先用夾鍊袋「封存」了。昨晚將它解封後，設定了幾個要處理的目標：

• 清理因電池露液而氧化的部位。
• 線圈重新焊接固定。
• 「殘障的」C2914 電晶體焊接「義肢」。

幸好電路板是靠電池負極的部份被電池液污染及銹蝕，傷得比較嚴重的就是 C2914，這顆電晶體的三支腳位氧化嚴重，稍一用力，三支針腳都斷了，沒有替換的材料，只好以小電磨把封裝的塑膠慢慢磨掉，讓針腳露出多一點，然後再焊上電線，並點上三秒膠固定。後來再加了一小段熱縮套，將三條電線束在一起，增加一點強度，畢竟「團結就是力量」。

線圈重新焊上，上電以後，確定電磁鐵有動作以後，準備將齒輪一一放到定位，又費了好大一番工夫。以前重組拆解後的東西以後，通常會多出螺絲，這一回，完全沒有這樣，哈！因為這個小鬧鐘沒有任何一顆螺絲；不過，卻多出了一個找不到家的齒輪！

重組後，一個齒輪找不到家

試運轉以後，確定四根指針都可以動作，只是可以設定鬧鈴動作的時間，不能調整時間；重新再檢視設定桿的的結構，幫迷路的齒輪找到家了！

底下是組合的記錄：

最底下的三個齒輪因為要套疊的關係，識別度很高，很難放錯

時、分、鬧鈴啟動的三個齒輪

接著要先放上黑色的鬧鈴開關連桿，及先前找不到家的那個齒輪，它是用來調整時間，轉動分針的齒輪：

鬧鈴開關連桿及時間調整齒輪

再來是分針齒輪

分針齒輸

秒針齒輪底座

秒針齒輪底座

左上的小齒輪下方有磁鐵，線圈與鐵片構成的電磁鐵會讓它轉動；藍色的齒輪會帶動中央的秒針齒輪，然後再帶動右下的大齒輪，將動力傳導到下方的分、時的齒輪組。

秒針的齒輪組

把上蓋蓋上，完工！

修好的鬧鐘

這個小鬧鐘目前還有一個小地方沒處理，燈的開關電路板有三個針腳解焊後，沒有再焊回去，燈也不知去向。不過也還好，反正燈也很少在用，有空再補上好了。

Android : RedMi Note USB Debugging Security Setting

手上有三支小米家的舊手機，之前在玩 scrcpy 時，最舊的紅米除了鏡像畫面到電腦上以外，可以在電腦以快速按鍵送模擬的按鍵指令來操控手機；但是在紅米 Note 2 上卻只能進行畫面的鏡像。當時以為是 scrcpy 不支援紅米 Note，昨天在玩以 adb shell input keyevent 來操控紅米Note 2中的 IP Webcam，怎麼試都沒反應；把另一支紅米Note 4 開機，準備透過 abd 來安裝 IP Webcam 的 apk 檔案，需要開啟「開發人員選項」中的「USB安裝」功能時，才發現，原來在較新的 MIUI 中，除了「USB 偵錯」的選項以外，其它的相關功能預設是被鎖定的，而且想解鎖，得插入 SIM 卡，登入小米帳號，然後按一堆「同意」，才能將 USB adb 的相關功能打開。

USB安裝、USB調試得要登入小米帳號才能啟用

如果沒有登入小米帳號，「USB安裝」及「USB調試(安全設定)」啟用的按鈕按下後，它只會跳出警訊後，又自動禁用。

...... 閱讀更多 ......

DIY : 3.5mm TS、TRRS 轉 TRS

最近利用舊光碟機拆下來的控制板上的電位器改裝成簡單的混音器，電位器可單獨控制電腦音源輸出分接後的音量，然後和麥克風混音以後，再接到電腦的麥克風輸入端；這樣可以解決 Google Meet 在分享畫面時，麥克風以外的聲音播不出來的問題。

結果愈玩愈大，除了把兩條音源的延長線都分接了 2.54 杜邦端子，還拆了舊音效卡的 3.5mm 立體聲(TRS)插座，做了可拆式的轉換座；可以將現在手機用的 TSSR 耳麥分離為耳機跟麥克風；可以將單聲道(TS)的麥克風轉為雙聲道的 TRS。

一般 3.5mm 的耳機或麥克風端子大概分為三種：

• TS : 無「環」，單音，只有兩個接點。
• TRS : 有一個「環」，立體聲，共有三個接點。
• TRRS : 有兩個「環」，共有四個接點。

根據 Wiki 上查到資料：

• https://zh.wikipedia.org/wiki/TRS端子

上面的字母意思為：

• T : Tip 尖端
• R : Ring 環
• S : Sleeve 套

以立體聲的耳機端子 TRS 來說，照說那環指的是三節裡，中央那節；不過看現在賣場中的「環」指的好像是黑色那圈(英文好像有人用 stripe)，所以 TSR 端子有兩個黑色的環，商品名稱變成二環三節的端子了，中文跟英文似乎解釋不同。

現在手機的耳麥是使用四個接點(節)的 TRRS，麥克風的接點是在遠離尖端的最後一點，所以如果將它插在電腦立體聲的 TRS 插座上，照說麥克風那節是會露在外面的。而我從舊音效卡拆下來的 TRS 插座外緣是塑膠的，所以只再貼上銅片，線拉一下，就可以變成 TRRS 的耳麥插座。

TRS 插座貼銅片改成 TRRS 插座

...... 閱讀更多 ......

HTML5 : BINGO 語音輸入外掛

查了一下，可以自訂題庫的 HTML5 BINGO 遊戲上次更新是 2018年2月。最近在研究怎麼樣駭進自己的遊戲，幫它們加上外掛，而 HTML5 BINGO 是想玩一下，讓玩家透過麥克風，用說的方式(語音)來輸入答案。

現在語音辨識的技術已經不錯了，查了一下，Chrome 瀏覽器有內建 Web Speech API，利用這個 API，在瀏覽器取得麥克風的使用權限後，可以將收到的聲音進行語音辨識：

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

於是我寫了一小段程式幫 HTML5 BINGO 做以下的事：

• 加一個 [MIC] 的按鈕，啟用或停止語音辨識。
• 以語音辨識的結果去比對 BINGO 格子中的選項，找到第一個符合的，就幫忙觸發按滑鼠的事件，模擬按下該格子的動作。
• 不過，如果語音辨識的結果是「芝麻開門」或是「芝麻關門」，外掛會去按在 HTML5 BINGO 畫面中右側的「問題」按鈕，可以進入或退出查詢提示的模式。

哈！是的，就只有這樣而已，剩下的都是 HTML5 BINGO 自己程序了。

HTML5  BINGO 外掛加了 MIC 控制鈕

如果有加入語音辨識外掛，在 HTML5 BINGO 的左下角會看到「藍色」的 [MIC] 按鈕，按下去以後，如果瀏覽器有支援語音辨識的 API ，就會出現要求使用麥克風權限的訊息。想要使用語音辨識的功能，當然是要選「允許」。

要求使用麥克風的權限

按了「允許」使用麥克風以後，[MIC] 的按鈕會變成「粉紅色」的。

已啟用語音辨識

識音辨識啟用以後，麥克風收到的聲音會被當語音辨識，所以建議是在選完遊戲的題目，開始計時後再按 [MIC] 啟用。

接著就像沒有外掛時玩 BINGO 遊戲，最大的差別只是除了用按選項答題以外，多了一個「說答案」的選擇。

成功辨識的 [腳踏實地] 

HTML5 BINGO 進行當中，如果題庫有提供「提示」，只要按下「問號」的圖示，即可進入「提示模示」，計時器會暫停，而按下選項的格子會出現該選項的提示，以成語的範例題庫來說，按下語詞的按鈕，會出現該詞的解釋。

喊「芝麻開門」進入提示模式

怎麼樣利用語音來按「問號鈕」進入「提示模式」呢？

想要暫停遊戲看「提示」，就大喊一聲「芝麻開門」，外掛就會幫你按「問號」的圖示。再喊一聲「芝麻關門」，它就可以幫你重新回到遊戲的答題模式。

底下錄了一小段如果用語音辨在 HTML5 BINGO 遊戲中答題的影片供參考：

相關文章

• 雄 : HTML5 : BINGO

...... 閱讀更多 ......

Google Meet : 雙主播的版面

 有人在使用 Google Meet 時有在一個畫面，同時看兩個遠端使用者鏡頭的需求，就如同雙主播的畫面一樣。目前 Googe Meet 沒有這種排法的版面設定。好吧～就利用程序來解決需求：

1. 開兩個瀏覽器視窗。
2. 調整兩個瀏覽器視窗至左右各一半並列。
3. 分別在兩個瀏覽器視窗中登入 Google Meet 同一間會議室。
4. 分別在Meet中按「圖釘」，將要顯示的使用者「固定在主畫面」。(由「聯絡人」來選定要固定的對象)
5. 分別在Meet中的「更多選項」裡的「變更版面配置」設置「聚光燈」。
6. 分別在Meet中，將「你」的鏡頭畫面，按雙向箭頭那個圖示「最小化」。
7. 選取「立即分享螢幕畫面」中的整個畫面。

關於開兩個視窗以並列方式呈現，我原本是安裝這個「Multi Layout Manager」 Chrome 的擴充功能：

• https://chrome.google.com/webstore/detail/multi-layout-manager/ijpiffheldgmdkbaohoilabdnmeinand

先手動將視窗排列好以後，再用上面的擴充功能儲存版面，它會將視窗的配置及網址一並儲存，下次可以完全重新呈現。

不過，後來又找到這個「Split Screen for Google Chrome」擴充功能，可以幫忙依需求設定好版面大小，似乎用起來比較方便：

• https://chrome.google.com/webstore/detail/split-screen-for-google-c/dnollkdkikklpdganoecjcmmlddbennb/?hl=zh-TW

是說，這種不算複雜的版面設定，Google Meet 中就應該可以內建的，只能期待它進化得快一點了。

Chrome : Prevate IP 麥克風解鎖

 在測試以 Web Speech API 來進行語音辨識，本機執行都沒問題，模擬網路存取，由家裡的 Private IP 192.168.2.0/24 連線，麥克風明明設為使用時詢問的，居然連問都沒問就直接被禁用，

麥克風被禁用

在 Chrome 的設定中查詢，麥克風的選項是灰的，連變更權限的機會都沒有。

麥克風選項被鎖定

查了一下，在 Chrome 中有個 flag 叫 Insecure origins treated as secure 可以自訂安全名單，在 Chrome 的網址列中先輸入這個：

chrome://flags/#unsafely-treat-insecure-origin-as-secure

然後在輸入區中輸 web server 的網址，並按一下 [Disabled] 的按鈕，讓它變成 [Enabled]

Chrome flags 設定

設定好了，就可以按右下角的 [Relaunch] 來重新啟動 Chrome。

麥克風啟用

重新啟動 Chrome 以後，設定的主機就可以更改麥克風權限了。

這種事沒用到還不知道會有狀況，又累積了一點經驗。

HTML5 : remoteClick 網路遙控器

在教室上課時，學生可以親手去操作電子教具或學具，遠距教學時，因為碰不到，互動的樂趣少了很多。以 HTML5 戳戳樂來說，雖然遠距時可以用「聲控」的，請螢幕那頭的老師依號碼，幫忙按，少了親手按並即時回饋，樂趣大減。為了解決類似這種的半調子戳戳樂，remoteClick 網路遙控器來了！

remoteClick 網路遙控器的主要原理是這樣的(以戳戳樂為例)：學生按下 remoteClick 遙控器上的號碼以後，程式會將號碼送至 WebSocket server，server 再將資料發向老師端的「接收程式」，「接收程式」再依設定去「按」戳戳樂上格子。

簡單說，關鍵在這個「接收程式」，它「駭」進了我自己設計的戳戳樂，透過網路收到號碼以後，幫忙觸發了戳戳樂格子上按下滑鼠的動作。這樣的設計，好處是不需要更動到原有的戳戳樂程式，而且除了戳戳樂以外，也可以應用在其它的工具中。有空，其它的工具也會陸續加上「網路遙控」的外掛。

底下先示範以戳戳樂加上 remoteClick 網路遙控外掛以後，如何讓學生可以透過網路遙控老師家裡的戳戳樂。

remoteClick 的傳送過程

...... 閱讀更多 ......

LimeJS : 編過碼的程式中找物件

 在研究如何在不動原有程式的原則上加「外掛」，不過，原有的程式碼因為想輕量化，利用 LimeJS 的工具，將原始的 JavaScript 程式都簡化了，簡化到函數名稱很難分辨出來。

觀察了一下，全域的變數都會保留原有名稱，正因為如此，總算留有一線曙光。以戳戳樂來說，我所有的格子通通放到 boxLayer 中了，除了第一個是整體的大黑框，boxLayer 的其它 children 都是格子。不過因為函數名稱都變了，無法用原來的 getChildAt() 來取得物件。

倒是 boxLayer 中只有一個變數是帶有 .length 的，這下好辦了，只要在 boxLayer 中找到符合以下條件的，應該就是我要找的東西：

• 是 object
• 有 length 

試著用以下的程序：

var n = Object.keys(boxLayer);

var box=null;

for(var i=0; i<n.length; i++) {

if(boxLayer[n[i]] && typeof(boxLayer[n[i]])=='object' && typeof(boxLayer[n[i]]['length'])=='number') {

var box = boxLayer[n[i]];

break;

}

}

運氣還不錯，一次中的。

找到戳戳樂的格子，這樣子要做什麼？

因為當初在新增戳戳樂的格子時，是按順序新增的，以第一格來說，它𡰗是 box[1] (box[0] 是外框，哈! 當初也不知道為什麼要這樣加個雜質進來)，我如果要直接用指令來「按」或者說是「戳」這格時，只要這樣的指令：

box[1].dispatchEvent('mousedown');

它觸發了第一格的 mousedown 事件，也就是模擬了以滑鼠按下去的動作了，這樣一來，可以透過網路來按戳戳樂了，應該很有趣。

JavaScript : 物件以值排序後取原來的索引值

 之前在計算戳戳樂最佳的行列數時，曾經有將值排序以後，要知道它原來的 key，查了一下，大家都建議利用 Object.entries() 來排序。

像我在設計 HTML5 對對碰時，為了讓洗牌的程序好寫一點，是先以亂數決定所有牌的序號，然後依序取用，轉換成座標；也就是在牌堆中，以左上角為第一個位置為例，第一張牌的位置並不是在左上角，對我來說，不用想什麼複雜的演算法取位置，但是缺點是，倒過來時，要由位置找出是在牌堆中的第幾張牌時變得複雜了。目前的做法只好順便記錄位置編號，再來排序。

HTML5 對對碰

cardsLayer['numbers'] 的值是每一張牌對應到的牌面編號(故意兩兩一組分開一點，比較好看)，例如：

[0, 5,    10, 4,    8, 11,    2, 7,    3, 6,    1, 9]

第一張牌在第 0 個位置，而和它配對的第二張牌在第 5 個位置，以此類推。

我需要按編號排序後，再取出它在牌堆中的索引值：

var index = Object['entries'](cardsLayer['numbers']).sort( function(a,b) {
  return (a[1]-b[1]);
});

這樣的結果會是：

0: ["0", 0]
1: ["10", 1]
2: ["6", 2]
3: ["8", 3]
4: ["3", 4]
5: ["1", 5]
6: ["9", 6]
7: ["7", 7]
8: ["4", 8]
9: ["11", 9]
10: ["2", 10]
11: ["5", 11]

來檢驗一下：

編號 0 的第一張牌(HORSE)在牌堆(cardsLayer)的索引值

0: ["0", 0]

應該是 index[0][0] ，也就是 0 ；而和它配對的是馬的圖片，使用者看到則是五個位置的牌

5: ["1", 5]

index[5][0] 是多少呢？答案是「1」，這也就是牌堆(cardsLayer)中索引值 1。

編號 1 的牌(DOG)，它的索引值

1: ["10", 1]

 index[1][0] 為 10 ，表示 DOG 在牌堆中的索引值是 10，和它配對的索引值是 11，找一下 index 中：

9: ["11", 9]

應該編號 9 的那張牌，是不是小狗的圖片呢？

HTML5 : 對對碰

我的 Flash 版對對碰 match 是 2009 年的作品，後續還有一個 2010年的 Flahs 版 match2；HTML5 版則是 2014年完成雛形，之後則沒什麼大變動。本次有了 HTML5 戳戳樂的基礎，將 HTML5 對對碰做了大幅的增強。它目前具有以下的功能：

• 工具箱有按鈕可更換蓋牌模式的切換。
• 工具箱有按鈕可控制左上角編號的顯示。
• 利用內建的題庫及設定編輯器，可立即修改遊戲內容，套用或匯出設定檔。
• 題庫支援文字或圖片。
• 題庫每題可以是兩欄式，提供一組兩項內容；或是單欄式，以一個內容來製作兩張一樣的牌。
• 格子自動計算最佳的大小及格數，題目不足時，以空格補缺。
• 利用選單設定檔可以製作多組題目的選單。
• 可以利用網址列的參數 menufilename 來指定要開啟的選單設定檔。
• 可以利用網址列的參數 filename 來指定要開啟的題庫設定檔。

HTML5 對對碰

可以在 HTML5 FUN 網站中試玩及下載打包好的檔案：

• https://gsyan888.github.io/html5_fun/

...... 閱讀更多 ......

HTML5 : Poke 戳戳樂 : 更換音效

HTML5 戳戳樂內建的音效是由南投縣的江明勳老師所錄製的，程式啟動以後，它會去讀取預設的設定檔 poke_set.js 中，有個名為 soundFilename 的參數內容，再和 mediaFolder 參數所指定的資料夾名稱，組合成音效檔的路徑。所以重點來了，照預設值：

• 將新的音效檔置入戳戳樂的 data 資料夾中。
• 修改設定檔中 soundFilename 參數的內容為新音效檔的檔名。
• 儲存設定檔。

經過以上程序，當戳戳樂重新整理或重新開啟時，應該就會套用新的音效了。

底下的影片說明如何以 sound_pop.mp3 來當音效：

相關文章

• 雄 : HTML5 : Poke 戳戳樂
• 雄 : HTML5 : Poke 戳戳樂 : 手動調整字體大小
• 雄 : Flash : Poke 戳戳樂

Google : SpreadSheet 直出 JSON

經常被問到可自訂內容的 HTML5 遊戲要怎麼放網路上？答案當然是找一個有提供 Web Hosting 的地方。自從 Google Drive 的 Hosting 功能沒了，個人現在都用 GitHub 跟 Firebase，但是它們的操作其實對一般人來說，還是需要練習一番才行。因此試著找以 Google Drive 當作提供設定檔、聲音檔和圖片檔供應站的解決方案。

...... 閱讀更多 ......

HTML5 : Poke 戳戳樂 : 手動調整字體大小

 HTML5 戳戳樂抽中的問題對話框中，文字會自動調整字體的大小，預設值，它以不超過框高度的 80%來處理；不過，如果遇到字串較長，又不帶空格的，會因為較難分析斷點，而產生計算失誤的問題，字超出版面的寬度，而無法完整呈現。這個問題，遇到英文、數字及半形的符號比較容易發生，中文似乎好一點。

有人遇到字體大小的問題了，問到要如何改大小？

解決字體大小的問題有兩種：

• 下載最近的戳戳樂，手動加入字體大小的設定。
• 在有問題的題目字串中加入適當的空格。

...... 閱讀更多 ......

LimeJS : 由A的事件中去觸發B的事件

先說本篇的筆記重點：

• 利用 dispatchEvent 可以觸發指定物件的某事件。
• 利用 hitTest 可以偵測某個物件是否被按到了(它利用座標計算)。

...... 閱讀更多 ......

HTML5 : Poke 戳戳樂

在 2010年四月，和 TPET 的老朋友們於噗浪上一番激盪後，我們創造了名為「戳戳樂」的 Flash 數位小教具，詳細的過程可以在底下的這篇舊文中，找到噗文的連結，探尋到它的發展歷程：

• 雄 : Flash : Poke 戳戳樂

後來為了讓戳戳樂能夠在不支援 Flash 的手機、平板上使用，我在 2012年年末，以 LimeJS 將戳戳樂改版為 HMTL5 版，當初的想法就是盡量維持 Flash 版的運作模式，所以設定檔的格式及可以設定的參數，和 Flash 版幾乎是一樣的。沒錯！如果想要改掉範例設定的內容，將它換成自己的題庫，你需要打開「設定檔」，然後......。哈！通常很多人聽到這些，就打退堂鼓了。所以我每次去別的學校分享，開場白都得是：

它真的很簡單......如果今天研習結束時，有人不會改成自己的題庫，就不要踏出電腦教室的門！

不過，說歸說，開場完全是開玩笑的話，所有人由最簡單的玩一玩，然後修改一個自訂參數，體驗了呈現出預定效果的驚奇與成就感，到最後其它工具也自己修改，時間到了反而是自己捨不得離開呢！

HTML5 戳戳樂啟始畫面

最近在增強 HTML5 幸運轉輪時，將它改成可以即時修改題庫，不但不用再開啟文字編輯器來修改設定檔，甚至可以直接以拖曳的方式來將圖片加入題庫中，更改完題目，可以立即套用，這種使用者經驗應該會是較美好的。有了這個雛形，讓 HTML5 版的戳戳樂打開了「噴射引擎」，在幾天之內就進化了。以下是 HTML5 版戳戳樂新增的幾個主要功能：

• 可即時修改題庫。
• 支援拖曳的方式新增文字、圖片、聲音。
• 有相機的行動載具支援以照相方式新增圖片。
• 可匯出設定檔。
• 格子數會自動計算，題目數少於格數總數時，會自動以「再抽一次」的格子填補。
• 即時新增的圖片，解析度太大會先縮小後，才加入題庫中。
• 新增的洞口圖案會截切為正方形的。
• 可以利用「儲存」將目前抽取的進度記錄在裝置上，之後以「載入」來復原該進度後繼續抽。
• 支援行動裝置直拿的版面。
• 可利用瀏覽器的網址來指定要載入的設定檔檔名。

抽到文字+圖片的題目

其它的功能則可以參考 Flash 版戳戳樂的說明。

試玩及下載

到哪裡試玩及下載 HTML5 版戳戳呢？

我將大部份的 HTML5 版的小工具都集中在 HTML5 FUN 的網頁中了，所以到這個網址中去找就對了：

• https://gsyan888.github.io/html5_fun/

...... 閱讀更多 ......