2022年1月18日 星期二

HTML5 : English1200@Blogger語法產生器

2022年1月18日 星期二

想要在 Blogger 中放自訂題庫的HTML5 : English 1200嗎?利用底下的語法產生器製作語法,再將語法貼入 Blogger 的新文章中,即可以直接利用 Blogger 當儲存題庫的空間囉!

題庫的格式可以參考這篇舊文:


底下可以試玩,也有語法產生及剪貼到自己 Blogger 的程序。

HTML5 : 單字高手@Blogger語法產生器

想要在 Blogger 中放自訂題庫的HTML5 : 單字高手嗎?利用底下的語法產生器製作語法,再將語法貼入 Blogger 的新文章中,即可以直接利用 Blogger 當儲存題庫的空間囉!

題庫的格式可以參考這篇舊文:


底下可以試玩,也有語法產生及剪貼到自己 Blogger 的程序。

2022年1月16日 星期日

HTML5 : 大家一起來@Blogger語法產生器

2022年1月16日 星期日

想要在 Blogger 中放自訂題庫的 HTML5 : card_flip 大家一起來 嗎?利用底下的語法產生器製作語法,再將語法貼入 Blogger 的新文章中,即可以直接利用 Blogger 當儲存題庫的空間囉!

題庫的格式可以參考這篇舊文:


底下可以試玩,也有語法產生及剪貼到自己 Blogger 的程序。

2022年1月14日 星期五

HTML5 : Lotto 樂透摸彩機@Blogger語法產生器

2022年1月14日 星期五

HTML5 : lotto 樂透摸彩機可以直接利用 Blogger 當儲存題庫的空間囉!題庫的格式可以參考這篇舊文:


底下可以試玩,也有語法產生及剪貼到自己 Blogger 的程序。

2022年1月12日 星期三

HTML5 : CORS Referrer-Policy 設定影響載入聲音檔

2022年1月12日 星期三

前一陣幫 HTML5 Spelling 單字高手加上用 Google TTS 念單字的功能,本機測試都沒有問題,只要透過 web server 玩HTML5單字高手,Google TTS 就是出不來,而無法載入的 error.code 代碼是 4,也就是「MEDIA_ERR_SRC_NOT_SUPPORTED」;但是同樣的程序與方法在我的另外兩支程式是可以用的。倒是發現它們有的是別的狀況,在我測試時,尚未壓縮 JavaScript 的版本,本機可以用,放到自己架的 web server 不能正常運作,但是壓縮過的版本,放到 GitHub 中的又可以用,真的是令人百思不得其解。因為本機及最後放到 GitHub 給大家用的,都正常運作,也就沒有認真探討問題。

這一次HTML5單字高手比較慘的是,在自己架設的 web server 及 GitHub 中,Google TTS 的語音一直無法播放。花了很多時間,把想過的問題點都試過了,還是沒解決。本來準備放棄 Google TTS,開始找別的 TTS 代替,也因為這樣,把觸角又伸出去,找到了替代方案。哈~正當真的要放棄時,突然靈機一動,把 HTML 單字高手載入 JavaScript 的網頁,和另外兩個可以正常播放 Google TTS 的網頁,以 WimMerge 進行了 HTML 原始碼的比對,好的!當然是有重大發現,在另外兩個網頁中的 <head> 中都多了這一行:

  • <meta name="referrer" content="no-referrer" />

而之前無法載入 Google TTS 時,看到的 HTTP 錯誤代碼 404 時,訊息中的是:


Referrer Policy: strict-origin-when-cross-origin


未設定 Referrer Policy 出現 HTTP 404


關鍵字「Referrer Policy」出現了!

當我把 referrer 的 meta 那行加入 HTML5 單字高手的網頁中,果然打通了任督二脈,Google 小姐可以正常開口念英文單字了!

在網頁中加入 referrer,並設為 no-referrer

Referrer Policy 可以怎麼設,在 MDN WebDocs 中的這份文件很有參考價值:

當然,可以更一步的參考一下 MDN WebDocs  中這一份文件談到  CORS 是怎麼一回事:


以我的需求來說,大概就只能用這兩個:

  • no-referrer
  • same-origin

no-referrer
same-origin


2022年1月11日 星期二

HTML5 : 一個音效檔當三個用 Play Audio by Label Name

2022年1月11日 星期二

HTML5 投籃高手是我在 2012年以 LimeJS 設計的小遊戲,由於當時 iOS 4.x 版的 Safari 只能播放一個聲音檔,於是嘗試了一個新方法來播放音效。

遊戲中使用到的音效有三種,我把三個音效檔合併成一個,不同音效間有稍微留白,然後記錄了每個音效播放時間的起迄點。

聲音物件 <audio> 可以利用 currentTime 來設定播放的起點,我再自訂一個名為 endTime 的變數來記錄結束時間。由於在播放時,currentTime 會逐漸變大,並且會觸發「timeupdate」事件,利用它們就能夠監看是否已經到每個音效的 endTime。也就是如果 currentTime>=endTime 表示音效播完了,就執行 pause() 來停止播放。經由上面的程序,就可以三個音效共用一個聲音檔了。

底下是一個小小的實驗,「進球」、「失球」和「投球」三個音效已經合併到一個音效檔中了。根據經驗,在 iOS 中,第一次必須先把整個音效檔播完,才能比較精準地控制暫停的時間;另外,必須把播放的指令放到和使用者互動後執行,才能載入音效檔案;所以要能正常運作,有兩個關鍵一定要注意:

  • play() 要放到按鈕中,也就是放到 mousedown、touchstart 或是 click 事件中。
  • 第一次播放時,先靜音 (muted 設為 true),等播放完,把 muted 設為 false,再正式播放指定的音效。

正因為這樣,第一次按播放鈕後,要等一下,才能聽到聲音;之後就都能立即反應了。

底下有四個選項,前三個會按設定的時間範圍來播放某一段音效,「全部」則是一般的方式,從頭放到尾,也就是會聽三個音效。

來測試一下,按想聽的音效吧!


 

進球(0~0.7) 失球(0.88~1.5) 投球(1.77~2.35)
        

【查看 JavaScript 程序碼】

 

相關連結


2021年12月30日 星期四

DIY : 遙控器按鈕回春術之四

2021年12月30日 星期四

 電視遙控器又有按鍵不靈光了,上回「雄 : DIY : 遙控器按鈕回春術之三」中是用熱熔膠來黏貼鋁箔,久了還是會掉,所以再換個方法:以細銅線穿剌矽膠按鍵後,弄個「鳥窩」。

用來當按鍵導體的銅線「鳥窩」

這個方法有幾個好處:

  • 方法簡便有效率。
  • 較牢固:銅線是先穿在矽膠柱中的,可以牢牢的固定著。
  • 可塑性高:細銅線的軟硬度剛好,可塑性高,可以讓它和按鍵更緊貼。
  • 不易氧化:之前曾經使用細鐵絲當按鍵的導體,久了會因氧化而導電效果差;用細銅線應該可以撐久一點。

修復時需要準備的工具與材料就兩樣:

  • 空針
  • 細銅線

細銅線我是由壞掉的電腦電源供應器中的多芯線取了大概三公分來用:

電源供應器中的多芯線

由於細銅線太軟,所以先以空針穿剌矽膠

以空針穿剌矽膠

把細銅線由針頭放入針管中

將銅線放入針管

銅線穿大概一半以後,端點壓著,將空針抽走,就完成穿線的程序。

穿好銅線的按鍵

最後將銅線折一折、凹一凹,讓它盡量增加可以和電路板接觸的面積

種好「銅髮」的按鍵

測試了一下,效果滿好的,索性把每一個按鍵都戴上「銅髮」了!















2021年12月29日 星期三

Apps Script : has been blocked by CORS policy

2021年12月29日 星期三

這幾天在試著以 POST 的方式將圖片資料丟給 Google Apps Script 後,再利用別的網站來進行 QR Code 解碼。不過,一直出現底下的錯誤訊息:


Access to XMLHttpRequest at 'https://script.google.com/macros/s/....../exec' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


這裡面最關鍵的字當然是「CORS」,很明顯的, Google Apps Script 的服務主機並沒有送出有關 CORS 的表頭,以致無法跨域取得處理的結果。可以參考這裡的詳細說明:

之前在寫 HTML5 筆順練習程式時,為了擷取教育部的筆順資料的 XML 檔案,也是花了好多時間研究如何克服 CORS 的障礙,後來是利用 Google Apps Script 來抓教育部網站中的 XML 檔案,然後再以 JSON 格式回傳給 callback 的程序,是的!關鍵在「JSON 格式」!不過那時是使用 GET 的方式。而這一回因為傳圖形資料,資料量大,只能使用 POST 的方式,又卡關了!

無論使用 XMLHttpRequest 或是較新的 fetch 來進行 POST,Google Apps Script 端的程式,當然是得以 JSON 格式來包裝,例如我要回傳的資料是「{status: status, "qrcode": result}」,就在最後加上:


return ContentService.createTextOutput(JSON.stringify({status: status, "qrcode": result})).setMimeType(ContentService.MimeType.JSON);


此部分在之前寫 HTML5 筆順練習程式時就有經驗。那利用  XMLHttpRequest 或 fetch  來進行 POST 傳所需要的參數資料時,為什麼還是出現了 CORS 的問題?

關鍵還是在「JSON 格式」,如果想避免出現 CORS 的錯誤訊息,就把要傳給 Google Apps Script 的資料,以「JSON 格式」的字串包裝。例如我想傳的圖片資料,參數名稱為「f」,而圖形資料已經轉為「DataURL」的字串,放到 base64 的變數中了,就這樣包裝:


JSON.stringify({'f':base64})


將這個包裝過的參數資料給  XMLHttpRequest 或 fetch  來進行 POST ,再搭配 Google Apps Script 也是以「JSON 格式」回傳資料。應該就可以避免 CORS 的錯誤了。

另外,在 Google Apps Script 的 doPost 序程裡如何取得由 POST 傳進來的參數內容呢?


function doPost(request) {
  var content = JSON.parse(request.postData.contents);
  var f = content.f;
  ......
}


client 端的資料被放到 postData.contents 中,而且是一個字串,所以先用 JSON.parse 將字串轉為物件,這樣才方便取用。

總之,為了能跨域傳資料,client 端或是 server 端,通通以 JSON 來交換資料就可以避免走冤枉路了。


2021年12月9日 星期四

HTML5 : iOS 私密瀏覽模式中無法正常執行程序

2021年12月9日 星期四

 為了讓 HTML5 筆順練習程式的顯示/拆解部件可以更輕巧,少耗一些資源,研究了幾天的 Canvas API 的 Path2D,較新版的瀏覽器當然是沒什麼問題,考慮到可能有人是使用較舊的載具,於是拿出 iPad Mini 第一代(iOS 7.1.2) 來測試,果然如預期,它的瀏覽器不支援 Path2D。想說,那就順便測試一下 HTML5 FUN 中的程式吧!

第一關,有了!

可加為主畫面圖示的說明


第二關,Yes !有載入程式中的訊息

載入程式中的訊息

然後就這麼一直「Starting」,凍結不動了!

想說完了!以前明明都好好的程式也都不能執行,只好打開原始碼,開始一段段的除蟲。不過,以同一部 iPad min 開啟未將 JavaScript 壓縮(最佳化)過的 HTML5 筆順練習程式,是可以順利載入程式的,並執行到「下載筆順資料」的對話框,接下來是卡在將資料寫入瀏覽器的 localStorage 空間這個程序。顯示的錯誤訊息是:


QuotaExceededError: Dom exception 22: An attempt was made to add something to storage that exceeded the quota


訊息是空間不足,不過,查了一下載具,明明使用量沒有多少;為了證明是不是真的空間不足,猶豫了一會兒,還是按下了 Safari 設定中的「清除 Cooke 和資料」,好的!把人家的資料清除了,果然問題還是存在,錯誤訊息還是一樣。

用錯誤訊息找到了這一則:


裡面有人提到了「私密瀏覽模式」,我才注意到 iPad mini Safari 頁面上緣的顏色不太一樣,拿出 iPad 4 (iOS 10.3.4),切換到「私密瀏覽」測試 HTML5 FUN 的網頁,果然也是卡在「Starting」就不動了。

私密瀏覽 HTML5 FUN

所以結論是在較舊版的 Safari 中,「私密瀏覽」的模式會無法使用 localStorage 來暫存資料,也無法載入最佳化過的 JavaScript 來執行。想繼續使用程式,只好關閉「私密瀏覽」模式後,重新開啟網頁。

iOS 10.3.4 關閉私密瀏覽模式


為了這個問題,耗去了不少時間在「摸象」,不過,還是有收穫,下回會先確認一下瀏覽器是否進入不同的國度了!



2021年10月30日 星期六

LimeJS : Tainted canvases may not be exported

2021年10月30日 星期六

有人通報我的 HTML5「投籃高手」下載在本機以後不能玩,試了一下,哇!如果選了對的答案,真的就卡住不能繼續玩;而答錯反而沒事。觀察了一下,應該就卡在答對時的回饋動畫,會出現以下的錯誤訊息:


frame.js:132 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.



出現錯誤的指令則是使用了「lime.fill.Frame」來截取籃網圖片檔案當回饋動畫的影格。利用錯誤訊息當關鍵字,找到的資料大多說是圖形檔案在本機存取時 crossOrigin 的問題。建議都是圖片載入前設定「crossOrigin」的屬性為「Anonymous」。所以再追了一下 LimeJS 載入圖片的原始碼是在 lime/src/fill/image.js 中。不過,如果將圖片設定了:


.crossOrigin = 'Anonymous';


問題好像更大了,每個載入圖片的地方都出現類似下面的錯誤訊息:


Access to image at 'file:///C:/ ......' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.



簡單的說,在 Chrome 裡,設定 crossOringin 根本無法用在本機的檔案。不過,上面的方法雖然有錯誤訊息,程式倒是可以正常運作。

可是咱們對有錯誤訊息這件事就是在意,所以又把前面改過的東西通通改回來。最後是將製作籃網變形動畫的兩個 PNG 圖片手動以 base64 編碼後,設定給兩個變數,利用傳變數的方式給「lime.fill.Frame」建立影格。

結果查了一下 blog 中的舊文,原來這個問題在 2016 就遇過了,也是用預先把圖檔編碼的方式解決的;下一回還是先找找舊文的好,以免繞一大圈又繞回原點。


相關文章



2021年10月23日 星期六

Android : RedMi Note 2 定時開關機

2021年10月23日 星期六

之前把舊的紅米 Note 2 拿來當電腦的 webcam,為了省電,設定了依時間自動開關機,最近比較少用了,卻找半天,找不到在哪裡設定。晚上又試了一次,總算找到了,趕快截圖記錄一下。

進入紅米 Note 2 的設定後,打開「電量和性能」

2021年8月31日 星期二

Google Sheet : 取得中文字的 Unicode

2021年8月31日 星期二

教育部筆順網原本是用中文字的 BIG5 碼來取得筆順資料的(利用 big5=XXXX 的參數),在處理新增的字時,看到有些字利用以前的方法取 BIG5 碼時,發現有些字的字碼並不完整;才發現原來筆順網現在也可以用 Unicode 來取得筆順資料(利用 ucs=XXXX的參數)。

以前因為找不到方法在 Google Sheet 中取得中文字的 BIG5 碼,所以是利用 MS Office 2007 的 Excel 轉的,這一次換 Excel 2007 沒有支援轉 Unicode 的公式,這樣也好,就乾脆全部都直接用 Google Sheet  來處理了。

例如要將 B2 格子內的中文字轉為 Unicode 並把十進制轉為十六進制的表示法,就利用底下的公式:


=DEC2HEX(UNICODE(B2))


UNICODE : 取得字的 Unicode。

DEC2HEX : 將十進制的數字轉為十六進制。


相關文章


2021年8月11日 星期三

VNC : 行動載具變手寫板

2021年8月11日 星期三

手機和平板有觸控螢幕,所以如果用行動戴具來遙控電腦,它們就變成了無線手寫板了。那如何遙控電腦呢?現在的遙控方案五花八門,運作的方式不外乎是在電腦上安裝軟體,並由此軟體來提供本機的網路服務供載具連線;或是連到外部主機所提供的遠端服務,由遠端來進行電腦和載具的配對連線。本篇所採用的 VNC 方案是前者,網路連線不用透過外部的主機,電腦上安裝 VNC 服務的程式(VNC server),而戴具上安裝 VNC 客戶端(VNC viewer)。

關於 VNC 的使用,印象中有整理過筆記,查了一下,2012 年4月有一篇,不過,哈哈哈!居然還是草稿,整理一半就丟著了,裡面有些東西己經進化到都不一樣了。只好重頭來過!

前面提到,我們打算以行動載具來遙控電腦,所以我們要在電腦上安裝可提供 VNC 服務的軟體(VNC server),在行動載具上安裝 VNC 客戶端(VNC viewer)。

VNC 的軟體有不少,但本篇採用的軟體,選用的條件是必須符合免費而且功能較完整的:

電腦端:

行動載具:


VNC Viewer For Android


其中 VNC Viewer for Android 是一個開源的軟體,專案的網址如下:

詳細的功能說明可以參考它的 wiki :

而 Mocha VNC Lite 因為是免費版,所以有五分鐘的限制,計時終了會自動斷線,必須重新連線才能繼續使用,如果覺得不錯,其實可以花 台幣180 元左右升級成付費版,就不用一直重新連線。它其實 iOS 跟 Android 兩種系統都有。不過,如果載具是 Android,比較建議用開源又免費的 VNC Viewer for Android 就好。

在載具上的操作,本篇是介紹 VNC Viewer for Android ,它可以在舊載具的 Android 4.x 版上順利的安裝與運行。

VNC Viewer for Android 提供很多種模式供使用者運用,底下簡單摘要幾項重點。

讓功能選單出現

VNC Viewer for Android 連線成功以後,功能選單應該會現在畫面下方,如果是隱藏狀態,可以長按載具的「選單」鈕。

顏色模式

VNC Viewer for Android 預設使用的顏色模式是色階較小的,如果畫面傳輸的情形良好,可以提高色階,哈!我是直接拉到最高了!設定的方法如下:

  • 叫出功能選單。
  • 按功能選單上的「更多」。
  • 點選「顏色模式」。
  • 點選想套用的模式,最高是「24-bit color(4 bpp)」。


按功能表上的「更多」
點選「顏色模式」
點選「24-bit color(4 bpp)」

選定後,功能表會自動關閉。

輸入模式

VNC Viewer for Android 中,關於滑鼠的操作(輸入),可針對不同需求進行切換。

如果是想縮放、捲動電腦畫面可視的範圍,或是想執行滑鼠右鍵的功能時,建議在「輸入模式」選單中,點選最上面兩項中的「支持縮放的觸摸屏」或「觸摸屏」。

按選單上的「輸入模式」中的最上面兩項中的一項

設定為前兩項的其中一個以後:

  • 放大或縮小畫面:以兩指開合的手勢來控制。
  • 顯示放大、縮小、輸入文字的工具:以單指點一下畫面即可以叫出工具來使用。
  • 滑鼠按一下右鍵:以單指原地快點兩下,可以模擬按一下滑鼠右鍵的功能。
  • 滑鼠按一下左鍵:以單指快點一下,可以模擬按一下滑鼠左鍵的功能

點一下畫面後,下方有縮放及文字輸入的工具的圖示

如果是想塗塗、寫寫或是拖曳的動作,「輸入模式」就必須切換為「指標指針控制模式」或是「觸摸屏鼠標;D-Pad..」其中一個模式。

需要拖曳、塗鴨時的輸入模式

模擬滑鼠的滾輪

電腦的滑鼠滾輪可以用來捲動捲軸,在 VNC Viewer for Android 中,我們可以使用音量調鈕來代替,按音量調大聲、調小聲的實體按鈕,就可以遙控電腦的捲軸。


示範影片

底下的影片中,可以看到 VNC Viewer For Android 「輸入模式」如何切換:


在 Android 上和 iOS 上,哪一個塗塗寫寫流暢?哈!只能說 iOS 大勝!不過,或許是我自己的 Android 手機和平板太舊、太差的關係,使用經驗才會輸 iPad 上的。

關於 VNC Viewer For Android 的其它功能,可以參考 wiki 中的詳細說明


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調試(安全設定)」啟用的按鈕按下後,它只會跳出警訊後,又自動禁用。

 
© 2009. Design by Pocket