2021年7月15日 星期四

DIY : 小鬧鐘維修

2021年7月15日 星期四

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

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

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

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

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


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

底下是組合的記錄:

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

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

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

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

再來是分針齒輪

分針齒輸


秒針齒輪底座

秒針齒輪底座

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

秒針的齒輪組


把上蓋蓋上,完工!

修好的鬧鐘


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





2021年7月14日 星期三

Android : RedMi Note USB Debugging Security Setting

2021年7月14日 星期三

手上有三支小米家的舊手機,之前在玩 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調試(安全設定)」啟用的按鈕按下後,它只會跳出警訊後,又自動禁用。

2021年6月28日 星期一

DIY : 3.5mm TS、TRRS 轉 TRS

2021年6月28日 星期一

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

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

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

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

根據 Wiki 上查到資料:

上面的字母意思為:

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

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

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

TRS 插座貼銅片改成 TRRS 插座

2021年6月25日 星期五

HTML5 : BINGO 語音輸入外掛

2021年6月25日 星期五

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

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

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

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

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

HTML5  BINGO 外掛加了 MIC 控制鈕

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

要求使用麥克風的權限

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

已啟用語音辨識

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

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

成功辨識的 [腳踏實地] 

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

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

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

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

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



相關文章




2021年6月23日 星期三

Google Meet : 雙主播的版面

2021年6月23日 星期三

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

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

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

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

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


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



2021年6月20日 星期日

Chrome : Prevate IP 麥克風解鎖

2021年6月20日 星期日

 在測試以 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 以後,設定的主機就可以更改麥克風權限了。

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







2021年6月17日 星期四

HTML5 : remoteClick 網路遙控器

2021年6月17日 星期四

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

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

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

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

remoteClick 的傳送過程

2021年6月14日 星期一

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

2021年6月14日 星期一

 在研究如何在不動原有程式的原則上加「外掛」,不過,原有的程式碼因為想輕量化,利用 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 的那張牌,是不是小狗的圖片呢?


2021年6月12日 星期六

HTML5 : 對對碰

2021年6月12日 星期六

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

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

HTML5 對對碰

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

2021年6月10日 星期四

HTML5 : Poke 戳戳樂 : 更換音效

2021年6月10日 星期四


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

  • 將新的音效檔置入戳戳樂的 data 資料夾中。
  • 修改設定檔中 soundFilename 參數的內容為新音效檔的檔名。
  • 儲存設定檔。
經過以上程序,當戳戳樂重新整理或重新開啟時,應該就會套用新的音效了。

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


相關文章





    2021年6月9日 星期三

    Google : SpreadSheet 直出 JSON

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

    2021年6月7日 星期一

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

    2021年6月7日 星期一

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

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

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

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

    2021年6月5日 星期六

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

    2021年6月5日 星期六

    先說本篇的筆記重點:

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

    2021年6月4日 星期五

    HTML5 : Poke 戳戳樂

    2021年6月4日 星期五

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

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


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


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

    HTML5 戳戳樂啟始畫面


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

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

    抽到文字+圖片的題目


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


    試玩及下載

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

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

     
    © 2009. Design by Pocket