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 的網頁中了,所以到這個網址中去找就對了:

    2021年5月27日 星期四

    HTML5 : WHEEL 幸運轉輪更新

    2021年5月27日 星期四

    本來只是想將 HTML5 WHEEL 幸運轉輪加個按鈕而已,結果一發不可收拾,連玩了幾天,多了一些新的功能:

    1. 新增轉動轉盤的按鈕。
    2. 盤面選項可以使用圖片。
    3. 圖片支援 .SVG 及 Data URI 格式。
    4. 圖片可以設定使用圓框。
    5. 盤面的文字及圖片可以設定對齊方式。
    6. 盤面及對話框的字形自動調整大小。
    7. 可利用網址加上 ?filename=xxxxx 的方式指定要使用的設定檔檔名。
    8. 設定檔中新增 wheel_colors 的參數,供自訂轉盤上要使用的顏色代碼。
    9. 設定檔中新增兩個可自訂欄位及素材分隔符號的參數。
    10. 畫面左下角有隱藏式工具箱,內有三個功能按鈕,可供重置轉盤、輸入題目及設計、查看使用說明。
    11. 拖曳圖片檔案至題目輸入區,自動轉為 Data URI base64編碼的圖片資料。

    2021.05.27 .v4 的 HTML5 WHEEL


    同時使用三種素材的題目

    2021年5月16日 星期日

    Linux : 虛擬 Webcam : v4l2loopback 加 GStreamer

    2021年5月16日 星期日
    在「雄 : Android : 手機變電腦的 Webcam : IP Camera Adapter」中提到在 Windows 中除了可以用 OBS 的虛擬相機,另一個選擇是用 IP Camera Adapter;那在 Linux 還有什麼選擇呢?其實應該是有更多的方案,本篇來玩玩 v4l2loopbackGStreamer,由 v4l2loopback 建立虛擬 Webcam,而由 GStreamer 抓取 IP Webcam 所提供的 Android 手機鏡頭拍到的 MJPEG 串流,變成電腦的 Webcam。

    先在 Linux 上安裝好 v4l2loopback-dkms 跟 GStreamer,接著就可以來玩玩虛擬 Webcam 了。

    Google Meet : 設定 : 攝影機

    2021年5月15日 星期六

    Android : 手機變電腦的 Webcam : IP Camera Adapter

    2021年5月15日 星期六

    關於把 Android 手機當電腦的 Webcam ,在「雄 : Android : 手機變電腦的 Webcam : OBS」這篇中,使用的是跨平臺的 OBS 抓取 IP Webcam 傳來的 Android 手機鏡頭畫面,然後變成虛擬相機。如果電腦使用的是 Windows,則多了一個選擇,可以使用本篇所要介紹的 IP Camera Adapter ,搭配 Android 上 IP Webcam 或 DroidCam 來建立虛擬相機,並應用在 Zoom、Google Meet ...... 等需要 Webcam 的地方。

    Google Meet & Chrome 攝影機設定

    2021年5月14日 星期五

    Android : 手機變電腦的 Webcam : OBS

    2021年5月14日 星期五
    之前因為講課需要使用實物投影機,而電腦沒有外接的 Webcam 可用,又把  Android 手機 + IP Webcam 的方案拿出來用。如果搭配 Android adb 工具程式,甚至只要連接 USB 線,可以應用在沒有無線網路可用的環境中。那 Android 手機的鏡頭可以變成電腦的 Webcam,讓 Zoom、Google Meet......使用嗎?試了許久,利用所謂的 Virtual Camera ,的確是可以讓電腦的其它軟體當它一般的 webcam 來用。本篇先來玩玩 OBS 的虛擬相機 (Virtual Camera)。

    Google Meet & Chrome 攝影機設定


    2021年5月13日 星期四

    Wget : 下載完整的網頁

    2021年5月13日 星期四

    GNU Wget 是一個自由軟體,也是一個強大的下載工具。

    之前除了下載單一檔案外,也應用在讀取網址清單,批次下載清單中檔案 (參數: -i ) 。其它的功能則還沒有玩遍。最近又試了一下,抓取完整網頁內容的參數,更為驚豔了!

    不過,一開始照著參數說明去試,失敗 n 回,才發現,原來我之前在 Windows 中安裝過的 Wget 是 GNU Wget 1.11.4,這版本是 GNU Win ( http://gnuwin32.sourceforge.net/ ) 中下載的,有一點舊了。在底下的網站中下載較新的版本,所有問題都解決了:

    這次的目標是要下載某一個網頁中的所有內容,包括裡面的 mp3 檔案,但是不繼續擷取網頁中連結到其它頁面的網頁。執行的指令如下:


    wget -m -k -E -p  -np  http://aaa.bbb.ccc.ddd/eeeee/fffff.php


    底下是各參數的說明(可以用 wget --help 查到):

    • -m,  --mirror : 相等於 -N -r -l inf --no-remove-listing 選項
    • -k,  --convert-links : 將下載後的 HTML 的鏈結轉換為本地檔案
    • -E,  --html-extension : 將所有 HTML 文件加上 “.html” 延伸檔名
    • -p,  --page-requisites : 下載所有顯示網頁所需的檔案,例如圖片等
    • -np, --no-parent : 不進入上層的目錄

    會需要加 -E 的參數,主要是因為這個頁面的檔名是 .php ,在本機用瀏覽器開啟時,可能要多一個指定程式的動作,所以乾脆由 Wget 順便幫忙改檔名為 .html ,較方便;而如果去掉 -np 的參數, Wget 抓回來的就不會只有一個網頁了。

    Wget 還有很多參數可以玩,有空再來試試吧!




     
    © 2009. Design by Pocket