iT邦幫忙

2021 iThome 鐵人賽

DAY 2
4
Modern Web

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

D01 - 萬事起頭難

萬事起頭難,不開始就不難 ᕕ( ゚ ∀。)ᕗ

第一篇文章有請柴柴鎮樓 (´∀`),開始挖坑!

你渴望連結嗎? .jpg

首先讓我們從認識陌生朋友開始。

正文開始

一般而言,我們都會根據具體需求設計專用韌體,燒入單晶片中,但是這次主題是 Modern Web,所以我們這次不寫任何韌體,而是直接使用 Firmata。

(如果我寫一篇將 MCU 當成遊戲伺服器,提供 SPA 網頁遊戲,並透過 Websocket 讓大家連線對戰的主題,會有人想看嗎?(´,,•ω•,,))

所以 Firmata 什麼鬼?能吃嗎?別急,接下來我們來依序認識此主題中幾個主要專有名詞。

同時介紹我們的吉祥物兼小助教「麻糬」登場!

D01 - 我才不是麻糬.png

接下來麻...電子助教會穿插在各種圖解中,協助大家理解概念。

專有名詞

電壓與電流

「電」的某些性質與「水」類似,為了方便理解,有時會用水來類比電。

D01 - 電壓.png

D01 - 電流.png

D01 - 電流推動電器 (1).png

單晶片

又稱微控制器單元(microcontroller unit,MCU),一般而言就是將 CPU、RAM、ROM 和各類 I/O 介面整合成一個積體電路,可以透過燒入自訂韌體達成讀取、計算、輸出等等功能。

其中最出名的開發平台非 Arduino 莫屬,Arduino Uno 電路板就算沒用過可能都有看過,如下圖:

D01 - Uno (1).png

是這一個才對:

2021-08-31 21.04.30.jpg

Firmata

剛才提到 MCU 可以燒入自製韌體,也就是說一開始 MCU 裡面就和星期一上班的腦袋一樣都是空空的,需要燒入韌體才能進行通訊或控制。

(實際上不會完全空,可能會有 bootloader 等等,不過並非此次主題,就不展開討論。)

而 Firmata 是一個完整的控制協定,描述了如何利用通訊進行 I/O 控制,只要依照 Firmata Protocol 的內容發送命令,就可以控制 MCU 上對應的功能,正如官方文檔所說的:

Firmata is a protocol for communicating with microcontrollers from software on a computer (or smartphone/tablet, etc). The protocol can be implemented in firmware on any microcontroller architecture as well as software on any computer software package (see list of client libraries below).

換個比喻,Firmata 就像一個已經設計完成的菜單,只要依照菜單規定的內容(協定),就可以簡單的取得對應的餐點(資料),不用自己從頭設計原料、烹調、擺盤等等細節(擴展性、強健性)。

知道 Firmata 前後.jpg

串列通訊(Serial communication)

顧名思義就是指透過資料通道,每次傳輸一個位元的通訊方式。

D01 - 串列通訊 (1).png

Arduino Uno 上有內建多種通訊界面,其中最常用的是 UART。透過 USB 線將 Arduino Uno 接上電腦所使用的介面便是 Uno 的 UART。

Web Serial API

將 Arduino Uno 透過 USB 線接上電腦後,電腦的連接埠會跑出對應的 COM。

以往要呼叫 COM 進行通訊都會需要有對應權限的應用程式。如果網頁要取得 COM 資料,通常都是開啟一個 Web Server 作為中介,而 Web Serial API 則可以讓 JavaScript 可以透過瀏覽器,直接存取 COM。

不過目前支援的瀏覽器很少,下圖是目前的支援度列表(2021/08/30):

Untitled

(沒想到 Opera 竟然有支援,還以為只能在 Chrome 上自嗨呢 ᕕ( ゚ ∀。)ᕗ)

以上介紹完畢,接下來我們正式開始吧!

行前須知

由於本篇不是基礎教學文(窩怕誤人子弟 ( ´•̥̥̥ ω •̥̥̥` )),所以以下內容不會特別說明:

  • HTML、CSS、JS 基本概念
  • Pug、Sass 基本概念
  • ES6 以上語法
  • Vue、Vuex 基本使用
  • Vue Components 封裝

(所有程式碼都會放在 GitLab 上讓大家下載,可以慢慢研究)

計畫內容

接下來預期的內容與技術:

  • 介面呈現

    使用 Web 技術設計一個類 Windows 的介面

    • 可以自由開啟、關閉視窗。
    • 不同視窗表示不同功能,例如:數位腳位控制、類比訊號讀取等等。
    • 建立小遊戲並使用真實的按鈕進行控制。
  • Firmata Protocol

    閱讀協定並設計收發模組

  • 電子零件

    • 開發板使用 Arduino Uno
    • LED、REG LED、按鈕、可變電阻、搖桿
  • 功能應用

    • 數位 I/O:按鈕、LED
    • 類比輸入:可變電阻
    • PWM:LED
    • 調色盤:RGB LED
    • 遊戲「跑跑小恐龍」:按鈕
    • 遊戲「貓狗大戰」:搖桿

那就讓我們開始吧!

以下影片是最後的成果,大家可以參考看看 (๑•́ ₃ •̀๑)

希望大家會期待後續內容 (´,,•ω•,,)


上一篇
D00 - 緣起
下一篇
D02 - 集結硬體小夥伴
系列文
你渴望連結嗎?將 Web 與硬體連上線吧!33

1 則留言

2
阿陰
iT邦新手 5 級 ‧ 2021-09-16 16:25:36

謝謝麻糬老師拯救文組

鱈魚 iT邦新手 5 級 ‧ 2021-09-16 17:43:03 檢舉

電子助教:「再叫我麻糬我就要離職 ( ´•̥̥̥ ω •̥̥̥` )」

我要留言

立即登入留言