iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

請大家多多指教嘍!

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

D00 - 緣起

大家好我是鱈魚,歷年來看了很多屆鐵人賽,今年終於鼓起勇氣填坑參賽了。 回想自身技術發展歷程,還真的是個奇幻旅程。 大學是機械、自動控制工程出身,頂多旁聽過資工的...

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

D01 - 萬事起頭難

萬事起頭難,不開始就不難 ᕕ( ゚ ∀。)ᕗ 第一篇文章有請柴柴鎮樓 (´∀`),開始挖坑! 首先讓我們從認識陌生朋友開始。 正文開始 一般而言,我們都會根據...

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

D02 - 集結硬體小夥伴

首先我們先將硬體準備完成,需要準備的設備有: 基本設備 Arduino Uno 常見且容易取得的 Uno 與用來連接、燒入程式的 USB 傳輸線。 麵包板 用...

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

D03 - Hello Firmata

將 Arduino Uno 插上電腦後,如果順利的話作業系統會自動安裝「USB 轉 COM 晶片」之驅動程式。 這個部分因為已經存在大量的教學,所以不詳細說明...

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

D04 - 從零開始的 Firmata 通訊

電子助教:「(大包小包)窩準備好了 (≖‿ゝ≖)✧」 鱈魚:「東西放下,我們沒有要轉生。」 電子助教:「說好的香香妹子們呢?(́⊙◞౪◟⊙‵)」 鱈魚:「別瞎掰...

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

D05 - 準備前端環境

接下來開始建立前端專案,接下來依序介紹預期使用的工具與套件。 工具與套件 Vue、Vuex 圖片來源:Vue 官方網站 Web 前端框架,相較其他兩大框架(R...

2021-09-19 ‧ 由 鱈魚 分享
DAY 7

D06 - Web Serial API 初體驗

讓我們透過 Web Serial API 連接 COM 吧! 首先來建立頁面。 建立共用樣式 準備撰寫組件之前,先來建立一些全局共用的樣式變數與 Class。...

2021-09-20 ‧ 由 鱈魚 分享
DAY 8

D07 - 聽話,給我資料!

既然已經透過 Serial API 取得 Port 存取權限了,再來我們就要來接收並解析資料了。 建立資料收發模組 若每個需要串列通訊資料的地方都要寫一次讀取相...

2021-09-21 ‧ 由 鱈魚 分享
DAY 9

D08 - 今晚,我想來點「腳位清單」加「功能模式」,配「類比映射表」

電子助教:「所以標題提到的那些東西好吃嗎?ლ(´∀`ლ)」 鱈魚:「不,都不能吃 (́◉◞౪◟◉‵)」 電子助教:(乾騙我... ლ ( ´•̥̥̥ ω •̥̥...

2021-09-22 ‧ 由 鱈魚 分享
DAY 10

D09 - 打開第一扇窗

現在有資料,只差介面了。 建立 base-window 組件 雖然每個視窗功能都不同,但是視窗外框功能都一樣,所以我們建立 base-window.vue 組件...

2021-09-23 ‧ 由 鱈魚 分享