把遇到錯誤的、學習到的前端筆記在這邊

總網頁瀏覽量

Copyright © Tzeng Ying-chi. 技術提供:Blogger.

2019/10/12

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


###### 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)




0 留言:

張貼留言