はじめに

Arduinoをブラウザから動かせたので後でまた再現できるようここにメモとして残したいと思います。

使用するもの

Arduino Uno
Arduino IDE
Node.js
Express Generator
Google chrome
LED
抵抗100Ω
ジャンパー線
ブレッドボード
USB

こんなところですかね？

Hello World

電子創作のHello WorldはLチカです。
が、この記事では飛ばします。
JavaScriptエンジニアへのIoTのすすめ：Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう
を見てください。

注意点ですが、上の記事通りに進めてもWindowsではエラーを吐かれます。

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

のところを

var five = require("johnny-five");
var board = new five.Board({port:%ポート番号%});

にしないとダメです。

ポート番号はArduino IDEの『ツール→シリアルポート』から確認できます。

例えば、シリアルポートが COM1 であれば、

var five = require("johnny-five");
var board = new five.Board({port:"COM1"});

になります。

また、 npm install johnny-fiveに加え、npm install firmataも実行する必要があります。

Ctrl + c二回で止めることが出来ます。光った状態で二回目を押すと、光った状態のまま止まってしまうので注意です。

Arduinoをブラウザから制御する

この記事(メモ)の本題です。
今回はExpressを使ってルーティングや値の受け渡し、レンダリングなどのあれこれを行い、ejsファイルでDOMを構成しました。

まず、先ほどのLチカとは別にディレクトリ(ここではこれをArduino_web_operateとします)をつくり、まずnpm initを実行します。色々聞かれますが、全部エンターしました。
そのあと以下のコマンドを実行しました。

- npm install --save express
- npm install --save ejs
- npm install --save body-parser
- npm install johnny-five
- npm install firmata

次にArduino_web_operateの中にpublicファイルを作成し、その中にstyle.cssを作成し、以下のコードを記述しました。

style.css

h1 {
    font-size: 128px;
    font-weight: bold;
    color: #f0f0f0;
    text-align: center;
    letter-spacing: -10px;
    margin: -50px 0px -140px 0px;
}

次にArduino_web_operateの中にviewsファイルを作成し、その中にindex.ejsを作成しました。

index.ejs

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" charset="utf-8">
        <title>NodeWebOperate</title>
        <link type="text/css" href="./style.css" rel="stylesheet">
    </head>
    <body>
        <head><h1>イエッタイガー！</h1></head>
        <main>
            <form action="/" method="post">
                <p>
                    <input type="radio" value="on" name="operate">ON
                    <input type="radio" value="off" name="operate">OFF
                    <input type="submit" value="送信">
                </p>
            </form>
            <p><%-content %></p>
        </main>
    </body>
</html>

次にArduino_web_operateの中にindex.jsを作成しました。
ポートはCOM1, ピンは12番に繋ぐものとします。また、回路はLチカと同じです。

index.js

const express = require("express");
const five = require("johnny-five");
const board = new five.Board({port:"COM1"});

const app = express();
app.use(express.static("public"));

const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: false}));

let led;

board.on('ready', function() {
    led = new five.Led(12);
});

const message = "現在の状態：";

app.get("/", (req, res)=>{
    res.render("index.ejs",{
        content: message + "off",
    });
});

app.post("/", (req, res)=>{
    if(req.body.operate == "on"){
        led.on();
    }
    if(req.body.operate == "off"){
        led.off();
    }
    res.render("index.ejs",{
        content: message + req.body.operate,
    });
});

const server = app.listen(3000, ()=>console.log("イエッタイガー！"));

その光る様からイエッタイガーと叫ばせました。
参考：視覚的イェッタイガーとは？
node index.jsを実行して、localhostの3000にアクセスして、いじってみてください。onを押して送信したら光る/offを押して送信したら暗くなるなら成功です。お疲れさまでした。以上です。

終わりだよ～

Arduinoをブラウザから動かした話

はじめに

使用するもの

Hello World

Arduinoをブラウザから制御する

参考