[Day 28]-用JS控制Arduino吧！上上下下左右左右BA～ - Johnny Five 之 Joystick 搖桿 - 簡介篇

第 11 屆 iThome 鐵人賽

DAY 28

IoT

IoT沒那麼難！新手用JavaScript入門做自己的玩具～系列第 29 篇

[Day 28]-用JS控制Arduino吧！上上下下左右左右BA～ - Johnny Five 之 Joystick 搖桿 - 簡介篇

11th鐵人賽

King Tzeng

團隊Amos的推坑教2.0

2019-10-13 19:19:04

11116 瀏覽

分享至

★本系列文章已集結成冊，和系列文不同的是：

本書使用大量的圖解來說明LED系列、多種感測器等原理。

補足系列文程式碼的解說，增加逐行程式碼的詳細解說！

全彩的書籍，用圖解的方式，讓讀者來理解Johnny-Five各種API的功能與效果，讓你不會只讀文字看到想睡覺而學不起來。

歡迎大家做出自己想要的玩具，為了樂趣而學習，讓學習變成你的樂趣！ヽ(・×・´)ゞ
讓Arduino也能用JavaScript創造出屬於自己的作品！

★購書連結-天瓏網路書局：
https://www.tenlong.com.tw/products/9789864345328

《IoT沒那麼難！新手用 JavaScript 入門做自己的玩具！（iT邦幫忙鐵人賽系列書）》
博客來、金石堂、momo、誠品、PChome、讀冊，均有販售喔！─=≡Σ((( つ•̀ω•́)つ
ISBN:9789864345328

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

身為一個魯宅，一定都要有一台遊戲機假日宅在家！
但遊戲控制器你了解多少呢？

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

香菇頭搖桿 - Joystick

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

簡介

Joystick 的結構含有自我居中的彈簧，讓操控搖桿放掉時可以回到中心位置，
外蓋則是一個杯型的塑膠蓋，人能用拇指來舒適的操控～

工作原理

Joystick 是一個類比輸入裝置，能將2軸（X軸與 Y軸）的運動傳遞給Arduino，
其工作原理為當操控 Joystick 改變方向時，就代表改變該軸的電阻值，也可以用兩顆可變電組來模擬 Joystick 的雙軸動作！

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

PS：但我錄完才發現拿錯方向了Orz...
所以左右為 Y 軸，上下為 X 軸抱歉抱歉....

X 軸

搖桿在中心點時，初始電阻值為 3KΩ 左右，
當我往上時電阻值會增加，當我往下時電阻值減少。

Y 軸

可以看到搖桿在中心點時，初始電阻值為 3KΩ 左右，
當我往右時電阻值會增加（約 1KΩ 左右），當我往左時電阻值減少（約 2.9KΩ 左右）

相關連結：

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/

參數＆寫法

Property	Type	Value/Description	Default	Required
pins	Array of Pins	["A*", ...]. Analog pins connected to X and Y		yes
invert	Boolean	true, false. Invert both axes	false	no
invertX	Boolean	true, false. Invert X axis	false	no
invertY	Boolean	true, false. Invert X axis	false	no

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

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

invert 為數值反相，我畫了一張圖解釋
原始返回值為左上，若 invert: true 則為右上圖示數值
下面圖示依序為invertX: true、invertY: true。

實作

Joystick 物件沒有API，Events 部分則只有 change 、 data 。

來簡單實驗一下範例～

程式碼如下

var five = require('johnny-five');
var board = new five.Board();

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

  joystick.on('change', function() {
    console.log('Joystick');
    console.log('  x : ', this.x);
    console.log('  y : ', this.y);
    console.log('--------------------------------------');
  });
});

登楞～d( ･∀･)b