King 學習前端之人生

2019/10/15

[2019鐵人賽] - 30.IoT & Maker！想像力就是你的超能力！創客精神永不熄滅！－相關參考推薦、感謝與結語。

10/15/2019 King Tzeng

本系列的目標對象為：入門者、對 Javascript 有一些認識想玩硬體者

這次主題選擇用 Javascript 進入 Arduino 是因為我對C語言也沒有很熟...._(´ཀ`」 ∠)_

但我又很想玩 Arduino 做一些東西出來，於是找到 Johnny-Five 邊寫邊紀錄實驗的過程～

從基礎的 Arduino 開始實作在慢慢進入物聯網，如果有沒有寫好的地方請大家多多見諒....

未來也會把前面沒寫好有錯誤的地方修正過來。

## 相關參考推薦

有兩本書我非常推薦，分別是ヽ(・×・´)ゞ

> 超圖解Arduino 互動設計入門

- 作者：趙英傑

- ISBN：9789863121954

- 出版社：旗標

這本是屬於最入門的，例如電子電路、電子元件是什麼都會用淺顯易懂的方式和你說，個人認為如果入門者可以買來看看！

>超圖解物聯網IoT實作入門：使用JavaScript／Node.JS／Arduino／Raspberry Pi／ESP8266／Espruino

作者：趙英傑

ISBN：9789863123439

出版社：旗標

這本書建立在「超圖解Arduino 互動設計入門」之上，

他有很多範例都會說之前有寫在超圖解Arduino 互動設計入門書上，所以直接進入實作可以說是續集的概念～

還有開發領域比較廣也介紹比較多開發版，我就是看這本書才發現有Johnny-Five的～

如果你看了前面那本，那這本也跟著看下去吧！

> Webduino

https://webduino.io/index.html

之前就有看到 Webduino～

結合Web + Arduino，從最早的Webduino Fly到Webduino Smart、Webduino 豪華套件包我都有買～

官網上的範例我也有看完，覺得超好玩的自己也有實作一下！

所以這次才想用 ESP8266 自己試做看看 Johnny-Five 有沒有辦法做出無線操控 Arduino，有找到一些文章但是我還沒有成功，再接再厲了....

去年也有看到 oxxo 大大寫的鐵人文

> Webduino 不只是物聯網，智慧插座也可以很 Modern~ 系列

https://ithelp.ithome.com.tw/users/20091306/ironman/1161

也可以拜讀一下～

Youtube 上現在也很多創意的 Arduino 點子～

我自己是有訂閱這個頻道～

> How To Mechatronics

https://www.youtube.com/channel/UCmkP178NasnhR3TWQyyP4Gw

### HTML、CSS 推薦參考

這個不用多說啦！唯一推薦 Amos 老師！前端界的大神！去年的影片組冠軍！

> CSScoke

https://www.youtube.com/channel/UCQfjTYYrqxPg5LJmDBUesbQ

資源都放在上面了！老師也幫你整理了！別說學不會！

### Javascript 推薦

Kuro Hsu 老師

重新認識 JavaScript 系列

https://ithelp.ithome.com.tw/users/20065504/ironman/1259

然後iT邦把這系列出成書了！我自己也有買一本來看～

> 0 陷阱！0 誤解！8 天重新認識 JavaScript！（iT邦幫忙鐵人賽系列書 - 02）

作者：許國政

ISBN：9789864344130

出版社：博碩

其他還有 Kevin 老師、Alex 老師、Tommy 老師～

都是前端界的翹楚！可以搜尋一下～

## 困難

這次鐵人賽真的花了非常非常多的時間來準備.....

連續參加鐵人賽四次了，前三屆花的時間也沒有這次多，要有多硬就有多硬！

今年我六月底就開始準備了～（這硬的程度..... ∑(✘Д✘๑ )

讓我量化這次遇到的困難，我會覺得有三倍困難度！

### 硬體方面

每個需要購買，又要花時間花心力花錢錢選購電子零件....

而且每個零件都必須能動作是不可能的！

舉例來說～

在寫伺服馬達篇的時候，

想說為什麼寫好程式，線也接好了，但是Arduino都不會動作呢？

我還以為是我軟體寫錯了，花了三個小時在debug.....

最後回頭查驗硬體，沒想到是最單純的杜邦線沒有通，導致馬達不動作.....

痛苦程度 ★★★

### 軟體方面

這次不只是單方面寫 Javascript，還要去了解 Socket.io、express、Node.js ...

老實說這些都是我第一次碰 Q Q

寫起來特別心力憔悴.....光是 WebSocket 就失敗了好多次....

很多專業術語雖然我聽過，但是不知道用在這裡對不對？

這也是我明天開始要回頭檢查我的文章的原因.....

痛苦程度 ★★★

### 作文

寫好了之後要把自己懂得化成讓別人懂得詞語，那是另外一回事了～

實作做好了，但是只有照片不會動？哪看得出來成果？

所以做好之後一定會錄影然後處理一下轉成GIF，讓閱讀文章者有好的體驗～

這個也是從閱讀 Eia 前輩的文章學到的事情！

痛苦程度 ★

### 身、心、生活

想必在座的鐵人都是一樣的，要付出相當的時間與精力才能完成寫作，本魯宅也是一樣....

記得有一天寫完文章後直接去三總掛急診，
因為我家沒有書桌只能坐在床上寫文章，導致姿勢不良肌肉拉傷，寫到2X天的時候背部肌肉還是很痛QQ

還有一些其他外在的困難因素存在，像是：
家犬的逆襲

下班吃完飯準備寫文時發現⋯
USB連接線被我家的狗狗咬斷了！那天晚上不能做實驗了！！
（我的理智線也跟著斷了.....）

家貓的好奇

痾......先生我要錄影啊......

家貓的不耐煩

對不起，奴才寫文寫太久了......

痛苦程度 ★★★★★

## 感謝的話

其中有很多朋友、前輩給我很多建議，謝謝你們～

我也要謝謝也有參加鐵人賽的 Eia 前輩，

> 寫給工程師的 WebGL 學習心得系列

https://ithelp.ithome.com.tw/users/20106532/ironman/2869

謝謝前輩和我分享很多想法，包括寫出來的文章要怎麼讓讀者了解，讓讀者感受到文章的溫度與心情，預寫文章大綱等等的知識分享，真的很感謝 Eia 大大！

謝謝[Amos的推坑教2.0](https://ithelp.ithome.com.tw/2020ironman/signup/team/82) 團隊團員們的互相打氣！互相提醒！

謝謝 Amos 老師帶領我們走向鐵人賽的終點！

謝謝我弟當我的學術指導，我都叫他幫我看文章有沒有寫錯、有沒有不順的地方XD

---

## 結語

> 「我是一位讀電子科系的學生，但我什麼都不會。」

2015年4月，

我在北車的天瓏書店無意間看到一本介紹 Arduino 的書籍，開啟了我對 Arduino 的興趣。

那時 Arduino 只是一塊不起眼的電路板，

只有對 DIY 有興趣的人或是高中、大學生教學來進行研究。

2019年的現在，

Arduino、Raspberry pi、Zig Bee、BLE 等...

你所感受不到的物聯網已經充斥在你我生活中成為不可缺少的一部分！

現在 Arduino 甚至能讓小學生也當起「Maker」，思考要怎麼運用 Arduino 來解決生活中的大小事！

> 遠見 - 小學生也能當「創客」，生活難題迎刃而解

https://www.gvm.com.tw/article/20752

我並沒有特別厲害，在教師節那篇文章中，我說道

*「四年前，我是個迷惘平凡無奇的無業者。」*

因為興趣而進入前端領域，因為興趣而研究 Arduino！「原來想像不再是夢想，創造也可以那麼快樂！」

我是一位喜歡做東做西的人，認識我的人都知道我還會做木工，像我最近就做給我家主子御用廁所～（炫耀一下 X）

在實作的過程中會不經意的想到是不是還可以增加什麼，像貓沙櫃就想到是不是可以利用Arduino 來偵測氨氣，萬一貓沙太臭就回傳給我知道等等....（所以後來我買了偵測氨氣的Sensor 但還沒動..@ @a）

這些可能性都可以在現在實現！

「只要有創意，並且動手去做」人人都可以是創客！人人都可以實現物聯網並發表自己的作品出來！

雖然創作和學習的過程中一定會遇到很多困難....

但套句我最喜歡的 Maker 同時也是著名電視節目「流言終結者」知名主持人 *Adam Savage* 說的：

> *" YOU HAVE TIME TO FAIL.

>   YOU HAVE TIME TO MESS UP.

>   YOU HAVE TIME TO TRY AGAIN. "*

> 「你可以失敗，可以搞砸，更可以再拼一次。」

(動圖來源：來自 Discovery頻道 - https://www.facebook.com/discoverytw/videos/381120392551250/)

#iT邦鐵人賽系列文

3 Comments

2019/10/14

[2019鐵人賽] - 29.筆記IoT初練習- 用 Joystick 讓熊俠飛向鐵人賽終點！ - Johnny Five 之 Joystick 搖桿 - 遊戲(?)應用篇

10/14/2019 King Tzeng

本魯宅：第29篇了～時間真的過的好快啊～
謎之音：(ΦωΦ)

今天要寫的是～下音樂～
登登楞登～登登～ (多拉A夢的音效)

「邁向終點吧！鐵人熊俠！」ᕙ(˵ ಠ ਊ ಠ ˵)ᕗ

謎之音：不就是之前的光敏電阻篇改一下嗎....
本魯宅：不！我加了動畫～（被打）

故事是這樣開始的…

本系列結束前，一直讓我念念不忘的留言～
記得有位邦友是這樣說的～

我們的邦友總是那麼熱情的來留言！XD
本魯心之音：但看到這則留言我好害怕RRR.......這....這本魯寫不出來吧.....

好在這位邦友說他明年要寫～我們謝謝他～
真．勇者工程師要創造新的遊戲平台了！！（欸欸！不對吧 X

好吧！那我來為你指引道路吧～（欸！就和你說不對吧（被打～

怎麼做？想法是這樣的～

昨天使用 Joystick 物件 X 軸和 Y 軸變化時會返回大約 -1～1 的數值，
我們就用這個數值來讓熊俠飛起來！

怎麼利用呢？
這次我們用 CSS3 的 transform:translate(x,y); 屬性來改變小熊在頁面上的位置！

先從網頁解構來看～

初始化 - 中心點

這次要讓熊俠飛來飛去，假設遊戲一開始設定在網頁中心點出發
首要我們要取得網頁的中心點位置！

User 的瀏覽器視窗大小不會一樣大，那中心點的數值也會因人而異！
所以這次要用 JavaScript 來取得視窗的寬高數值，
取得總視窗高度後在除上 2 就是中心點位置，XY 軸都使用相同步驟。

熊俠的位置 - 移動變量
移動熊俠需要可變的數值，我們從 Arduino 那邊取得 Joystick 的數值後加以處理，
由昨天可知 Joystick 數值可能為負值，可能為正值又落在 -1 ～ +1 之間，
故
熊俠的移動量變數＝ Joystick 回傳的數值 * 視窗中心點位置
這邊是把 Joystick 移動了多少轉成在視窗上的移動多少的位置

接下來
當前熊俠的位置＝視窗中心點 + 熊俠的移動量變數
最後只要把剛剛熊俠移動了多少加上視窗中心點的位置，就會變成現在熊俠飛到的位置了！

本魯宅：484很簡單啊～
謎之音：屁啦！！！

恩....只是要腦筋要轉一下而已啦....我也是在紙上畫出來想了一下才想好的....

(燒腦........

由於我們上次就切好版了！這次直接進入程式吧～(๑•̀ㅂ•́)و✧

後端部分

我們取 Joystick 的數值，這次有X軸與Y軸的兩個數值，用 Socket.io 傳給前端接收；
```
socket.emit('startData', {
jXAxis: jXAxis,
jYAxis: jYAxis,
});
});
```

完整程式碼：
```
var io = require('socket.io');
var express = require('express');
var five = require('johnny-five');

var board = new five.Board();
var app = express();

app.use(express.static('www'));
var server = app.listen(3000, function() {
console.log('connected!');
});

var sio = io(server);

board.on('ready', function() {
var joystick = new five.Joystick({
// [ x, y ]
pins: ['A0', 'A1'],
});

sio.on('connection', function(socket) {
joystick.on('change', function() {
console.log(' x : ', this.x);
console.log(' y : ', this.y);
jXAxis = this.x;
jYAxis = this.y;
socket.emit('startData', {
jXAxis: jXAxis,
jYAxis: jYAxis,
});
});
});
});
```

前端部分

這次有加上~~看起來像~~遊戲的元素，
像是鐵人鍊成啦～歷年來我的鐵人鍊成獎牌啊～（不是炫耀X

HTML
```
<div class="bg">
<div class="top"></div>
<div class="someimg">
<img class="flag" src="img/flag.png" alt="" />
<img class="iron iron1" src="img/iron1.png" alt="" />
<img class="iron iron2" src="img/iron2.png" alt="" />
</div>
<div class="bear"><img src="img/bear-fly.svg" alt="" /></div>
<div class="footer"><img src="img/footerbg.png" alt="" /></div>
<div class="bell">
<p>訂閱下去 - IoT沒那麼難！新手用JavaScript入門做自己的玩具～</p>
</div>
</div>
```

CSS Style
這次我們使用 CSS 的 transform:translate 屬性，來改變熊俠的位置！

```css
// 定義平移 2D 元素
transform:translate(x,y);
```

改變的數值就和上面寫的一樣，
joystick移動量轉為元素平移量算出後，利用jQuery 的 .css() 函式改變小熊位置即可！

> translate 的 x 為 Joystick 的 X 軸移動量，
> translate 的 y 為 Joystick 的 Y 軸移動量；

這次還有在一些 HTML 元素加上 CSS 動畫，~~看起來比較像遊戲～~~
CSS 動畫取用自
> Animate.css
https://daneden.github.io/animate.css/

JavaScript

```
var socket = io.connect();

var xCenter = $('.bg').width() / 2; // 取得水平中心點
var yCenter = $('.bg').height() / 2; // 取得垂直中心點

socket.on('startData', function(data) {
// 當socket開始連線時，接收資料
// console.log(data);
XAxis = data.jXAxis;
YAxis = data.jYAxis;

XVal = XAxis.toFixed(2); // 取到小數點後兩位數
YVal = YAxis.toFixed(2); // 取到小數點後兩位數

varXVal = XVal * xCenter; // 取 joystick X軸移動量，轉成視窗元素 X軸移動量
bearXPos = xCenter + varXVal; // 熊俠 X軸的位置

varYVal = YVal * yCenter; // 取 joystick Y軸移動量，轉成視窗元素 Y軸移動量
bearYPos = yCenter + varYVal; // 熊俠 Y軸的位置

// 使用 jQ .css()函式改變熊俠位置
$('.bear').css(
'transform',
'translate(' + bearXPos + 'px, ' + bearYPos + 'px',
);
});

```

開啟網頁 → 利用 `.width()` 和 `.height()` 取得頁面總寬、總高 → 總寬和總高後除上`2`，取得頁面中心點 → 當 Socket 開始與後端連線後 → 取得 Joystick 移動量 → 一連串的轉換與計算後 → 使用jQ.css()函式改變熊俠的位置 → 完成ヽ(・×・´)ゞ

寫到這邊～
鐵人賽也告一段落了，很謝謝一直關注我的邦友、朋友們，
沒有你們的支持與文章留言，回饋給我一些想法或者鼓勵，
也許我不會那麼有動力與好玩的想法出來～

感謝在感謝！那麼明日結語見了！（淚 QQ

#Arduino / #IoT / #iT邦鐵人賽系列文 / #JS / #Socket.io

2 Comments

2019/10/13

[2019鐵人賽] - 28.筆記IoT初練習- 上上下下左右左右BA～ - Johnny Five 之 Joystick 搖桿 - 簡介篇

10/13/2019 King Tzeng

搖桿～也就是俗稱的香菇頭！

身為一個魯宅，一定都要有一台遊戲機假日宅在家！

但遊戲控制器你了解多少呢？

今天要來介紹的就是！(∩▲o▲)⊃━☆ﾟ.*･｡

香菇頭搖桿 - Joystick

~~不關技術文的小抱怨：本魯的任天堂 Switch Joy-Cony 左右搖桿都會出現漂移！齁～氣氣氣氣氣！※後來用民間偏方噴 WD-40 好了~~

簡介

Joystick 的結構含有自我居中的彈簧，讓操控搖桿放掉時可以回到中心位置，

外蓋則是一個杯型的塑膠蓋，人能用拇指來舒適的操控～

工作原理

Joystick 是一個類比輸入裝置，能將2軸（X軸與 Y軸）的運動傳遞給Arduino，

其工作原理為當操控 Joystick 改變方向時，就代表改變該軸的電阻值，也可以用兩顆可變電組來模擬 Joystick 的雙軸動作！

有圖有真相！

本魯使用三用電表來量測改變 Joystick 方向時，電阻值的變化

> PS：但我錄完才發現拿錯方向了Orz...

所以左右為 Y 軸，上下為 X 軸抱歉抱歉....

### Y 軸

可以看到搖桿在中心點時，初始電阻值為 3KΩ 左右，

當我往右時電阻值會增加（約 1KΩ 左右），當我往左時電阻值減少（約 2.9KΩ 左右）

### X 軸

搖桿在中心點時，初始電阻值為 3KΩ 左右，

當我往上時電阻值會增加，當我往下時電阻值減少。

相關連結：

How 2-Axis Joystick Works & Interface with Arduino + Processing

https://lastminuteengineers.com/joystick-interfacing-arduino-processing/

這樣應該比較清楚了吧～（應該吧.....(ง๑ •̀_•́)ง

硬體部分

電路方面

Joystick 模組的接腳有

- Vcc - 電壓供給

- GND - 接地

- VRX - X 軸輸出

- VRY - Y 軸輸出

- SW - 按鈕（for 可按下去的 Joystick）

電路圖

接下來我們來介紹 Johnny - Five 的部分～實作吧！

準備需要的東西有～ヽ(・×・´)ゞ

硬體方面

- Arduino Uno 一片 + USB TypeB 線材一條

- 杜邦線看你用幾條準備幾條

- Joystick 一個

軟體方面

> Johnny-Five - Joystick

http://johnny-five.io/api/joystick/

參數＆寫法

pins 為必要參數，寫法為陣列表示 [ X , Y ]

new five.Joystick({ // [ x, y ] pins: ["A0", "A1"] });

#Arduino / #iT邦鐵人賽系列文 / #JS / #Socket.io

No Comments

2019/10/12

[2019鐵人賽] - 27.筆記IoT初練習- 我達達達達的馬達聲～ - Johnny Five 之 Servo 伺服馬達 - 簡介篇

10/12/2019 King Tzeng

###### tags: `iT邦幫忙鐵人賽`、`2019`
# [Day 27]-用JS控制Arduino吧！我達達達達的馬達聲～ - Johnny Five 之 Servo"s" 伺服馬達 - 簡介篇

本魯宅：Sorry...昨天太多沒寫清楚的地方了～
我會盡量補齊相關知識的！！（土下座 <(＿＿)>)

昨天有提到，Johnny-Five 有獨立一個 Servo API 分類，特別提供複數伺服馬達的操作，今天要繼續講解這個部分

## Servos API

`Servos` API 提供對於多個伺服馬達動作的物件方法。
`Servos` 物件為靜態的，不能在用JavaScript的.push()函數增加 Servo。

### 參數寫法

- numsOrObjects
一群 Servo 的Pin接腳，Servo參數可以用物件表示或是陣列表示。

| Property | Type |Value/ Description |Required|
| -------- | -------- | -------- | -------- |
| numsOrObjects | Array |An element for each servo. Any valid servo parameters will work| yes |

### 元件初始化

> **With Pins**
> 如果只宣告伺服馬達集的 pin 腳，最基本的表示方法

```javascript
// 假設使用三個伺服馬達， pin 腳使用 9、10、11 腳位
//
new five.Servos([9, 10, 11]);
```

> **With Obejects**
> 如果要各別設定馬達，可以使用物件表示方法，物件屬性就和昨天的`servo`屬性一樣，例如

```javascript
// 客製化設定兩顆馬達
//
// 第一顆馬達腳位使用第9腳，馬達的角度範圍為10～180度。
// 第二顆馬達腳位使用第10腳，馬達的角度範圍為20～140度，起始角度為20度。
//
new five.Servos([{
pin: 9,
range: [10,180],
}, {
pin: 10,
range: [20,140],
startAt: 20
}]);
```

## 小實作

今天示範怎麼操作多顆伺服馬達，並且讓他們做出不同的動作！
＊**因為馬達很吃電，我們需要使用獨立電源提供馬達電源，Arduino只要負責控制訊號！**

首先是使用**陣列表示**腳位，並控制兩顆馬達做相同動作～

```javascript
var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

var servos = new five.Servos([9, 10]);

servos.sweep();
});
```

> 還在找12V電源..Sorry 待補動圖...Orz
<br />

如果用**陣列方法**表示，但**只操作其中一個動作**的話：

```javascript
var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

var servos = new five.Servos([9, 10]);

// 第九腳位的馬達執行 .sweep() 動作
servos[0].sweep();
});
```

> 還在找12V電源..Sorry 待補動圖...Orz
>
<br />

如果使用**物件方法**表示，**兩顆馬達使用不同函數方法動作**，則：

```javascript
var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

var aServo = new five.Servo(9);
var bServo = new five.Servo(10);

var joints = new five.Servos([aServo, bServo]);

// aServo 移動角度至 20 度
aServo.to(20);
// bServo 移動角度至 180 度
bServo.to(180);

// 全部移動角度到中間角度
joints.center();

});
```
> 還在找12V電源..Sorry 待補動圖...Orz
>
<br />

## API & Events

**`servos` 宣告物件對象為一群伺服馬達，但操作的API 和 Events 都與 `servo` 的相同。**

<br />
<br />

那麼今天先講到這邊囉～
我想想這個要寫什麼比較有趣的應用明日再說了～
感謝大家收看！

## 文後

我好像感冒了.... Q Q

---

**本系列的程式碼皆會上傳到 GitHub 上開源**

_2019ironman-JS-IoT :_
https://github.com/tinatyc/2019ironman-JS-IoT

喜歡按個星星吧～乾蝦乾蝦<(\_ \_)>

---

**團隊系列文：**

CSScoke - [金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎](https://ithelp.ithome.com.tw/users/20112550/ironman/2623)
Hina Hina - [陣列大亂鬥](https://ithelp.ithome.com.tw/users/20120000/ironman/2256)
阿斬 - [Python 程式交易 30 天新手入門](https://ithelp.ithome.com.tw/users/20120536/ironman/2571)
Clarence - [LINE bot 好好玩 30 天玩轉 LINE API](https://ithelp.ithome.com.tw/users/20117701/ironman/2634)
塔塔默 - [用 Python 開發的網頁不能放到 Github 上？Lektor 說可以！！](https://ithelp.ithome.com.tw/users/20112552/ironman/2735)
Vita Ora - [好 Js 不學嗎 !? JavaScript 入門中的入門。](https://ithelp.ithome.com.tw/users/20112656/ironman/2782)

---

同步連載於 blogger-[King 學習前端之人生](https://kingweblife.blogspot.com/search/label/%23iT%E9%82%A6%E9%90%B5%E4%BA%BA%E8%B3%BD%E7%B3%BB%E5%88%97%E6%96%87)