iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

你渴望連結嗎?將 Web 與硬體連上線吧! 系列

隨著瀏覽器支援的 Web API 越來越豐富,有一天我注意到了「Web Serial API」這個神奇的東東。

以往 JS 沒有權限能夠存取作業系統底層 API,所以要做串列通訊都需要一個中介伺服器轉送資料,但是透過 Web Serial API 就可以直接透過瀏覽器進行串列通訊了!於是這個主題就這麼誕生了。

接下來的 30 天,我將嘗試透過 Web Serial API 與單晶片直接連結並將電訊號轉換成 UI 展示,最後在網頁上開發遊戲,透過實體電路的按鈕、搖桿遊玩!

請大家多多指教嘍!

鐵人鍊成 | 共 33 篇文章 | 29 人訂閱 訂閱系列文 RSS系列文
DAY 11

D10 - 「數位×IN×OUT」

電子助教:「這個標題...我聞到了停刊的味道... (́⊙◞౪◟⊙‵)」 這個章節開始我們要建立「數位功能 I/O 視窗」。 何謂數位訊號 簡單來說就是 0...

2021-09-24 ‧ 由 鱈魚 分享
DAY 12

D11 - 「數位×IN×OUT」:數位功能

數位 I/O 視窗當然是要有數位訊號相關功能啦。 數位 I/O 功能 在 Supported Modes 中,可以看到所有支援功能: DIGITAL_INPUT...

2021-09-25 ‧ 由 鱈魚 分享
DAY 13

D12 - 「數位×IN×OUT」:建立控制組件

再來就是實際建立透過 select 選擇的腳位,並建立相關 Firmata 功能。 建立數位控制組件 稍微規劃一下預期 UI 內容。 建立 window-di...

2021-09-26 ‧ 由 鱈魚 分享
DAY 14

D13 - 「類比×電壓×輸入」

接下來我們開始建立「類比輸入視窗」。 何謂類比訊號 和數位訊號只有 0 與 1 兩種狀態不同,類比訊號是連續的訊號,實際上自然界的物理量都屬於類比訊號,例如:聲...

2021-09-27 ‧ 由 鱈魚 分享
DAY 15

D14 - 「類比×電壓×輸入」:類比功能

先從 Firmata 找到類比相關功能。 類比輸入(Analog Input) 在 Supported Modes 中,可以看到所有支援功能: DIGITAL_...

2021-09-28 ‧ 由 鱈魚 分享
DAY 16

D15 - 「類比×電壓×輸入」:建立控制組件

再來就是實際建立透過 select 選擇的腳位,並建立相關 Firmata 功能。 (過程和建立 window-digital-io-item.vue 基本上相...

2021-09-29 ‧ 由 鱈魚 分享
DAY 17

D16 - 「脈衝×寬度×調變」

這個章節要開始建立「PWM 輸出視窗」。 何謂 PWM 名為「脈衝寬度調變」(Pulse-width modulation)。PWM 本質上算是一種數位訊號,但...

2021-09-30 ‧ 由 鱈魚 分享
DAY 18

D17 - 「脈衝×寬度×調變」:PWM 功能

先從 Firmata 找到類比相關功能。 PWM 在 Supported Modes 中,可以看到所有支援功能: DIGITAL_INPUT (0x0...

2021-10-01 ‧ 由 鱈魚 分享
DAY 19

D18 -「脈衝×寬度×調變」:建立控制組件

再來就是實際建立透過 select 選擇的腳位,並建立相關 Firmata 功能。 建立 PWM 控制組件 規劃一下預期 UI 內容。 電子助教:「規劃個毛,...

2021-10-02 ‧ 由 鱈魚 分享
DAY 20

D19 - 「吶,你想要成為什麼顏色?」:打造一個調色盤吧!

接下來我們要利用「 PWM」與「RGB LED」設計調色盤功能。 首先來認識一下新朋友 - 「RGB LED」 RGB LED 電子助教:「所以為甚麼要把三種...

2021-10-03 ‧ 由 鱈魚 分享