Skip to main content

· 3 min read

我的第二螢幕 (II)​

  • [I][我的第二螢幕 - Chromecast](/make/second-screen)
  • [II] 我的第二螢幕 - Ｇoogle 相簿 + 資訊面版

上一篇 中我安裝了 omxiv 讓我可以從手機控制第二螢幕，在上面播放 Youtube 影片，做到類似 Chromecast 的功能。

既然有一台開著的螢幕，在不當 Chromecast 播放影片的時候，還可以拿來做什麼哩？ 不如就像 Chromecast 那樣，在不播影片時就輪播照片。最好也可以顯示時間，或是其他有用的資訊。

找了一下，發現 Magic Mirror1 也許可以滿足我的需求。Magic Mirror 的原本用途是拿來做智慧鏡子，可以在鏡子的各個角落顯示一些有用的資訊。Magic Mirror 是採用 Electron 封裝的桌面應用，可使用 Web 技術編寫擴充套件，也可以透過 CSS 修改顯示樣式。

在嘗試安裝並加入 Google Photos 擴充套件3在背景輪播，使用了一段時間後，覺得還不錯可以推薦。

以下是實機畫面：

Imgur

想要自己建立類似的第二螢幕的人，可以照著這系列 Youtube 影片2 做設定，說明的相當清楚。

以下是我的 Google Photos 設定

{
          module: "MMM-GooglePhotos",
          position: "fullscreen_below",
          config: {
            albumId: [], // your album id(s) from result of `auth_and_test.js`
            refreshInterval: 1000*60,
            scanInterval: 1000*60*10, // too many scans might cause API quota limit also.
            sort: "random", //'time', 'reverse', 'random'
            showWidth: "100%", // how large the photo will be shown as. (e.g;'100%' for fullscreen)
            showHeight: "100%",
            originalWidthPx: 1920, // original size of loaded image. (related with image quality)
            originalHeightPx: 1024, // Bigger size gives you better quality, but can give you network burden.
            opacity: 1, // target "opacity" property (https://www.w3schools.com/cssref/css3_pr_opacity.asp)
            mode: "hybrid", // "cover" or "contain" (https://www.w3schools.com/cssref/css3_pr_background-size.asp)
          }
        },

參考資料​

· 4 min read

Scratch3 擴充套件開發​

最近應 s4a 社群許老師的邀請，在業餘時間研究了一下 Scratch 3，看看能做點什麼貢獻。

Scratch 3 是一套由麻省理工學院（MIT）發起，以兒童學習程式為目的所設計的視覺化編程軟體。Scratch 3 可使用堆疊積木塊的方式，來完成一般程式語言能完成的事情。

Scratch 3 除了程式語言的部分採用堆疊積木塊的方式，還提供了對應的整合的舞台，主角，並提供相對應的積木塊。你可以透過拖拉積木塊，直接控制這些主角在場景中的活動。

Scratch 3 的積木編程部分和我多年前玩過1的 Blockly 很相似。實際上 Blockly / AppInventor 的靈感來源就是來自於 Scratch。

在 Scratch 3 版本中，也已經將 Blockly 整合進去，作為它提供程式積木的方式。

我做了 JSON 抓取資料並解析，和空污 LASS 的擴充套件。透過這些積木，學生可以從網路上抓取最新的空氣污染狀況，然後用 Scratch 3 上場景可愛的人物口中說出來，或是視覺化的顯示結果。

例如透過 JSON 積木，連線到http://ifconfig.me/all.json取得對外的 IP

Imgur

或是透過填入設備代號，連到任一 LASS 設備，取得當地 PM2.5，溫度等資訊

Imgur

由於 Scratch 3 尚未完成第三方擴充套件的分享架構，因此這兩個擴充套件都放在 scratch3-internet2 專案中，想嘗試的人也可以直接連到3使用。

scratch3-internet2 專案的特色，是簡化了擴充套件開發前的設定工作，並很容易部署到 Github 網頁上。

技術上，scratch3-internet2 專案用了 git submodule 來抓取 Scratch 3 的相關專案，並透過 patch 的方式將自行開發的擴充套件加入其中，最後包裝成自己的版本3。透過這種方式最小化維護成本。

擴充套件需修改的部分如下（可在2中找到更詳細的文件）：

graph TD Scratch3 --- |UI| GUI Scratch3 -.- |Blockly| blocks Scratch3 --- |core parser| VM VM --> src/extensions subgraph Extensions src/extensions -.- json[JSON blocks] src/extensions -.- lass[LASS blocks] end GUI --- |Define extension cards| x[src/lib/libraries/extensions/index.jsx] subgraph Extension Cards x -.- j[JSON card] x -.- l[LASS card] end

要啟動一個適合擴充套件開發的 scratch3 專案，只要照以下步驟即可：

  1. fork scratch3-internet 專案
  2. clonse repo git clone https://github.com/[your name]/scratch3-internet.git
  3. get and setup related projects npm run setup
  4. start the development server npm run start

要部署到自己的 Github 專案網頁，只需

  1. 編譯網站，npm run build，編譯好的檔案在 scratch-gui/build
  2. 部署到 Github 專案網站的 gh-pages 分支中 npm run deploy，即可透過 https://[yourname].github.io 存取。

參考資料​

· 3 min read

我的第二螢幕 (I)​

  • [I] 我的第二螢幕 - Chromecast
  • [II][我的第二螢幕 - Ｇoogle相簿 + 資訊面版](/make/second-screen-2)

去年我買了一台 24 吋的桌上螢幕。原本構想的用途很美好，但就實際效果而言，其實並不常運用到。

想到最近比較常用到平板的功能，是拿來看 Youtube 或在 Youtube 中播音樂。有時候在手機上播，有時候是選了「稍後觀看」後再到平板上播。「從手機傳到另外一個螢幕播放」，這不就是 Chromecast 的用途嘛？

可惜前陣子已測試過，原來手上的 Chromecast 一代已經無法連上家中的網路。 那麼，是不是可以用放在一旁生灰塵的 Raspberry Pi 3 來代替哩？（不行就正好買 Chromecast 2019 或 Raspberry Pi 4）

簡單查一下，只要在手機上安裝 Raspicast 並在樹莓派上安裝omxiv，就可以投影 Youtube，照片等內容到螢幕上。就現在的需求來說很夠用了。

先簡單這樣，試試看接下來這第二螢幕的開機率是否有提升吧。

第二螢幕有沒有搞頭？​

Raspberry Pi 這樣的硬體，要拿來做主要電腦還是有些勉強。 但如果手上有一台，作為 Chromecast 代替品還是堪用的。

而除了替代 Chromecast 功能，作為工作環境中的第二塊螢幕的 OS，它還能透過安裝不同的軟體，為我帶來什麼幫助呢？

如果要設計一套適合第二螢幕使用的 OS，應該具備什麼樣的功能哩？

參考資料​

· 3 min read

Imgur

我的第一個 Google 助理服務「歷史上的今天」上架了，已列在 Google 助理服務 (中文) 列表中。

https://assistant.google.com/services/a/uid/0000005a1a233d97

相對於 Google 助理服務 (英文) 列表，中文的 Google 助理服務還不多，簡單分享一下開發心得。

如何使用​

這個 Google 助理服務的功能很單純，即從維基百科中隨機選出一條歷史上的今天所發生過的事。

要使用這個 Google 助理服務，可開啟 Google 助理，詢問「我想問歷史上的今天」，Google 助理就會啟動「歷史上的今天」服務。

Imgur

怎麼做 Google 助理服務​

「歷史上的今天」資料取自維基百科，也希望任何感興趣的人都能來參與維護，因此選擇開源。專案頁面在 https://github.com/gasolin/todayinhistory

我所說的 Google 助理服務其實英文叫「Google Action」，可以用在各種 Google 助理 (Assistant) 支援的場景中，如手機，手錶，Chrome Book，Google Home 等。

歷史上的今天 這個 Google 助理服務由 https://dialogflow.com/ 託管，使用Cloud Function來回應使用者。Dialogflow與Cloud Function都是 Google 旗下的服務。

Dialogflow提供了各種語音 / 文字聊天機器人 (Chat bot) 的一站式訓練 / 開發 / 部署環境。除了 Google 助理服務，也可以在上面使用Dialogflow API 同時支援 LINE，Facebook Messenger 等聊天機器人。Cloud Function也被整合在 Dialogflow 中，讓開發者可以簡單地呼叫一段腳本執行命令，而不需要維護完整的網頁伺服器端程式。

開發歷史上的今天的過程中，只要在Dialogflow網站上開發，在 Actions on Google 中測試與發佈即可，整個流程甚至不需要下載資料到電腦中。

如果對程式本身，或對每天可能會收到的回應感興趣，專案頁面在 https://github.com/gasolin/todayinhistory ，歡迎造訪按 Star，也歡迎前往 https://assistant.google.com/services/a/uid/0000005a1a233d97 留下好評。

· 3 min read

前陣子過年，終於得以抽出的一些時間，可以來嘗試一些不同的東西。

花了幾天查看 Typescript 程式碼，改寫了個可用繁 / 簡中文語法寫 JS 的轉譯器 LingaScript

使用它做了個「中文輸進去，程式出得來，開發者發大財」的中文程式影片範例，歡迎大家開心試用。

如何做到的​

這個專案脫胎自過去開發周蟒(Python + 中文語法) 的經驗，並參考了 CTS (Typescript + 中文語法) 原始碼。

微軟主導開發的 Typescript 提供了分析 Typescript 語法，並可輸出成 Javascript 的轉譯器 (src/compiler)。更棒的是因為 Visual Studio 的開發工具中整合了 Typescript，而微軟為了讓 Visual Studio 中的所有編譯結果都有本地化語言輸出，也在 Typescript 中支援了本地化語言的命令行工具和錯誤輸出。

因此， ‵LingaScript‵ 目前所做的，是讓支援的中文語法可分析為對應的 symbol，並預設將命令行工具設成對應的本地化語言。如此一來就可以得到較完整的使用本地化語言的開發體驗。

graph LR TypeScript -- 多語言關鍵字 --> LingaScript TypeScript -- 本地化命令行 --> LingaScript TypeScript -- 本地化錯誤回報 --> LingaScript

因為看到 CTS 改版不易的問題，我使用自己開發，基於 Google 提供的 diff-match-patch 包裝的 file-patch 工具，來對修改後的程式碼和 Typescript 原始碼做 diff/patch。‵LingaScript‵ 專案中保存了修改後的 compiler 相關檔案和 diff 檔。透過 patch 的方式更容易相容版本升級時的改動。

具體可以查看相關用到的命令 https://github.com/gasolin/lingascript/blob/master/package.json#L14

其他想法​

‵LingaScript‵ 目前的架構不僅止於能支援繁簡中文語法，只要加上對應的關鍵字檔案，也可以很快地支援其他語種，讓開發者或講師得以用熟悉的語言來介紹並執行 Javascript 相容的程式。

如果有興趣的話，歡迎前往 https://github.com/gasolin/lingascript 討論或提出想法。