# Johnny-Five
Presenter: Dotto Tsai
---
## Step 1: Install Node.Js
----
### Download from [Here](https://nodejs.org/en/download/)
----
### Open your terminal
```shell=
#check version
node -v
```
----
### Try a simple HTTP server
```javascript=
require('http').createServer(
function(req, res){
res.writeHead(
200,
{"Content-Type": "text/html;charset:utf-8"}
);
res.write("Node website start");
res.end();
}).listen(8080);
console.log("Start HTTP server on 8080 port!");
```
----
----
### Install node module
* node-dev, [nodemon](http://nodemon.io), [forever](https://github.com/foreverjs/forever)
* Auto restart process when code changed
```shell=
#install
npm install node-dev -g
#uninstall
npm uninstall node-dev -g
```
---
<!-- .slide: data-background="https://morphocode.com/wp-content/uploads/2015/09/johnny-five.png"-->
## Step 2:
### Install Johnny-five module
----
### 1. Install Johnny-five
> [Johnny-five Installation Tutorial](https://github.com/rwaldron/johnny-five/wiki/Getting-Started)
* On Windows
* Install Node.js >= 0.10.x 32 bit (unless anyone can confirm success with 64 bit)
* Install windows-build-tools:
```shell=
npm install -g windows-build-tools
npm install -g node-gyp
npm install -g johnny-five
```
----
### 2. Install firmata
* Method 1: Arduino Developer Tool
1. 檔案/範例/Firmata/StandardFirmata
2. Upload to Arduino
* Method 2: Use npm
```shell=
npm install -g firmata
```
---
## [Lab1] Arduino Blinking LED
```javascript=
var five = require("johnny-five");
var board = new five.Board({ port: "COM3"});
board.on("ready", function(){
console.log("Arduino連線成功!");
var led = new five.Led(13);
led.blink(200);
});
```
---
<!-- .slide: data-background="https://i.imgur.com/oxovZ8d.png"-->
## [Lab2] Arduino Matrix-LED
```javascript=
var five = require("johnny-five");
var board = new five.Board();
var servos = {};
board.on("ready", function(){
console.log("Arduino連線成功!");
var pict = [0x3C, 0x7E, 0x7E, 0xDB,
0xFF, 0X18, 0x24, 0x5A];
var matrix = new five.Led.Matrix({
pins:{
data: 11,
clock: 6,
cs:10
}
});
matrix.on();
matrix.draw(pict);
//REPL(Read Evaluate Print Loop) mode
board.repl.inject({
m: matrix
});
});
```
----
<!-- .slide: data-background="https://i.imgur.com/oxovZ8d.png"-->
|  | |
| -------- | -------- |
Note:
You can try to type "m.draw('A');"
"m.draw('@');", m.draw('99');
---
## [Lab 3] Controll Matrix-LED through Browser
----
### [Lab3.1] Socket.io
1. Add express and socket.io into package.json
```shell=
npm install
```
----
2. chat.js
```javascript=
var io = require("socket.io");
var express = require("express");
var app = express();
app.use(express.static('www'));
var server = app.listen(5438);
var sio = io.listen(server);
sio.on('connection', function(socket){
setInterval(function(){
socket.emit('pi', {'msg': 'hello world!'});
}, 2000);
socket.on('user', function(data){
console.log('用戶:' + data.text);
});
});
```
----
3. www/index.html
```javascript=
<script type="text/javascript">
var socket = io.connect();
socket.on('pi', function(data){
console.log(data.msg);
});
setInterval(function(){
socket.emit('user', {'text': 'robot'});
}, 1000);
</script>
```
----
### [Lab 3.2] Link Matrix-LED with browser
1. Install Johnny-five
```shell=
npm install johnny-five --save
```
----
----
2. matrix.js
```javascript=
var io = require("socket.io");
var express = require("express");
var five = require("johnny-five");
var board = new five.Board({ port: "COM3"});
var app = express();
app.use(express.static('matrix'));
var server = app.listen(5438, function(){
console.log("Start server on 5438 port!...");
});
var sio = io(server);
var matrix;
sio.on('connection', function(socket){
socket.on('liveMatrix', function(data){
if (matrix != null) {
matrix.draw(data.m);
}
});
});
board.on("ready", function(){
console.log("Arduino連線成功!");
matrix = new five.Led.Matrix({
pins:{
data: 11,
clock: 13,
cs:10
}
});
matrix.on();
});
```
----
3. matrix/index.html
* CSS
```css=
<style type="text/css">
#matrixTB {
cursor: pointer;
width: 200px;
height: 200px;
border-width: 0;
}
#matrixTB td{
padding: 0;
height: 10px; width: 10px;
background-color: #e2e2e0;
border: 1px solid #ccc;
text-align: center;
}
.active { background-color: #F11444;}
</style>
```
----
3. matrix/index.html
* html body
```htmlmixed=
<h1>互動 LED 矩陣</h1>
<table id="matrixTB">
<tr>
<td id="d1">0</td>
<td id="d2">0</td>
<td id="d3">0</td>
<td id="d4">0</td>
<td id="d5">0</td>
<td id="d6">0</td>
<td id="d7">0</td>
<td id="d8">0</td>
</tr>
....
<tr>
<td id="d57">0</td>
<td id="d58">0</td>
<td id="d59">0</td>
<td id="d60">0</td>
<td id="d61">0</td>
<td id="d62">0</td>
<td id="d63">0</td>
<td id="d64">0</td>
</tr>
</table>
<p>
<input type="button" value="清除畫面" id="resetBtn"/>
</p>
```
----
3. matrix/index.html
* javascript
```javascript=
var press = false;
var changed = false;
var socket = io.connect();
var m_array = [];
function send2Server(){
socket.emit('liveMatrix', {
'm': m_array
});
}
function matrixVal(){
var data = '';
m_array = [];
for (var i = 1; i < 65; i++) {
data += $("#d" + i).text();
if( (i%8) == 0 ){
m_array.push(data);
data = '';
}
}
send2Server();
}
$( document ).ready(function() {
$(document).mousedown(function(){
press = true;
});
$(document).mouseup(function(){
press = false;
matrixVal();
});
$('td').mousedown(function(e){
toggleDot($(this));
e.preventDefault();
});
$('td').mouseover(function(e){
if(press){
toggleDot($(this));
e.preventDefault();
}
});
$("#resetBtn").click(function(){
var index = 0;
for (var i = 1; i < 65; i++) {
$("#d" + i).text('0');
$("#d" + i).css("background-color", "#e2e2e0");
}
m_array = [0, 0, 0, 0, 0, 0, 0, 0];
send2Server();
});
});
function toggleDot(me){
if(me.html() == "0"){
me.css("background-color", "yellow");
me.html("1");
}else{
me.css("background-color", "#e2e2e0");
me.html("0");
}
}
```
---
Thanks for listening. :)
---
{"metaMigratedAt":"2023-06-14T13:34:07.111Z","metaMigratedFrom":"YAML","title":"Johnny-Five","breaks":true,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"05e81821-c588-4d90-9bc4-7a4a157577aa\",\"add\":60,\"del\":16}]"}