はじめに
EV3で動くLinux環境ev3devを使って開発します。この記事は、EV3にev3devをインストールし、SSH接続できている状態であることを前提にしています。
環境構築ができていない方はこちらの記事を参考にしてください。
この記事ではev3dev-lang-jsというnodejsでev3devを制御するためのライブラリを利用します。
ev3dev-lang-jaの入門についてはこちらを参考にしてください。
つくるもの
なるべくシンプルに、カラーセンサーで取得した色をリアルタイムにブラウザに表示するアプリを作りました。
動画です。
（クリックでで動画再生）
ev3dev-lang-jsとsocket.ioのインストール
robot@ev3dev:~$ npm install ev3dev-lang-js
robot@ev3dev:~$ npm install socket.io
ソースコード
index.js
index.js
var app=require('http').createServer(handler);
var io=require('socket.io').listen(app);
var fs=require('fs');
var ev3dev=require('ev3dev-lang');
//color sensor PORT 1
var colorSensor=new ev3dev.ColorSensor(ev3dev.INPUT_1);
app.listen(1337);
function handler(req,res){
fs.readFile(__dirname+'/index.html',function(err,data){
if(err){
res.writeHead(500);
return res.end('Error');
}
res.writeHead(200);
res.write(data);
res.end();
});
}
var color=io.of('/color').on('connection',function(socket){
setInterval(function(){
console.log(colorSensor.color);
socket.emit('message', colorSensor.color);
},50);
});
EV3のカラーセンサー値を取得するにはColorSensorクラスを利用します。
var colorSensor=new ev3dev.ColorSensor(ev3dev.INPUT_1);
ソケット通信でブラウザに50ミリ秒毎にカラーセンサーが取得した値を送信します。
var color=io.of('/color').on('connection',function(socket){
setInterval(function(){
console.log(colorSensor.color);
socket.emit('message', colorSensor.color);
},50);
});
カラーセンサーから取得できる値（0~7）と色との関係は以下の通りです。
0: No color
1: Black
2: Blue
3: Green
4: Yellow
5: Red
6: White
7: Brown
index.html
サーバー（ev3dev）から受信したカラーセンサー値を元に背景色を切り替えます。
index.html
<!Doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>node</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<h1 id="color">Color</h1>
</body>
</html>
<script>
var colorArray=["gray" , "black" , "blue" , "green" , "yellow" , "red" , "white" , "brown"];
var color=io.connect('http://ev3dev.local:1337/color');
color.on("message",function(data){
console.log(data);
//背景色の切り替え
document.bgColor = colorArray[data];
//テキスト表示の切り替え
if(data==0){
document.getElementById("color").innerHTML="No color";
}else{
document.getElementById("color").innerHTML=colorArray[data];
}
});
</script>
<style>
h1{
color:white;
-webkit-text-stroke: 5px black;
font-size:100px;
text-align:center;
margin-top:300px;
}
</style>
実行
EV3インテリジェントブロックの１番ポートにカラーセンサーを接続後、実行します。
robot@ev3dev:~$ node index.js
EV3のスペック上、WEBサーバー起動まで少し時間がかかります。
WEBサーバー起動後、ev3devと同じネットワーク内のブラウザでhttp://ev3dev.localにアクセスすれば完了です。