Arduinoで遊ぶページ
Arduinoで遊んだ結果を残すページです。
概要
Arduinoで作成したWebSocketサーバからウェブブラウザに情報をプッシュして、ウェブブラウザで受信した情報をグラフ化してみます。
Ethernetシールドが必要です。
目的
WebSocketの使い方の勉強です。どちらかというと、JavaScriptの使い方の勉強です。
ArduinoをWebSocketサーバにし、Arduinoからブラウザに非同期にデータを送信します。ブラウザでは、受信したデータを表示するとともに、グラフ化を行います。
WebSocket
WebSocketサーバについては、こちらを参照してください。
グラフ作成
グラフの作成は、CanvasJSというソフトウェアを利用しました。HTML5とJavaScriptを利用してさまざまなグラフを作成することができます。
CanvaｓJSのサイトからライブラリをダウンロードして、任意の場所に配置します。
実行例
Arduinoからは3秒ごとにアナログの0番ピンの値をウェブブラウザに送信します。アナログピンには何も接続していません。けっこう値がばらついています。
ウェブブラウザでは、Arduinoから送信された最新の値を表示するとともにグラフ化を行います。
以下に実行例を示します。Firefoxでの実行例です。
例えば、Arduinoに温度センサを接続して、温度の情報を送信すると温度ロガー(といっても記録はしていないので、ビューアですが）になります。
スケッチ
Arduinoのスケッチは以下の通りです。WebSocketサーバのライブラリについては、こちらを参照してください。
MACアドレスとIPアドレスは各自の環境に合わせて変更してください。
#include <SPI.h>
#include <Ethernet.h>
#include "WebSocket.h"
WebSocket wsServer(80, "chat", connectHandler, messageHandler, closeHandler, errorHandler);
void connectHandler(char *requestURI) {
Serial.println(requestURI);
Serial.println("connected");
}
void messageHandler(char *message, int payloadLength) {
Serial.print("length = ");
Serial.print(payloadLength);
Serial.print(", message = ");
Serial.println(message);
}
void closeHandler() {
Serial.println("closed");
}
void errorHandler() {
Serial.println("error");
}
void sendAnalogData() {
static unsigned long lastTime = 0;
unsigned long currentTime;
char buffer[WS_MAX_PAYLOAD_LENGTH];
currentTime = millis();
if ((currentTime - lastTime) > 3000) {
sprintf(buffer, "%d", analogRead(0));
Serial.println(buffer);
if (wsServer.status == OPEN) {
wsServer.sendText(buffer);
}
lastTime = currentTime;
}
}
void setup() {
byte macAddress[] = {0x90, 0xa2, 0xda, 0x0d, 0xd2, 0xef};
byte ipAddress[] = {192, 168, 11, 200};
Serial.begin(9600);
Ethernet.begin(macAddress, ipAddress);
Serial.print("Server is at ");
Serial.println(Ethernet.localIP());
wsServer.begin();
}
void loop() {
// put your main code here, to run repeatedly:
wsServer.available();
sendAnalogData();
}
HTML
この実験で利用したHTMLファイルは以下の通りです。CanvasJSのサイトとWebSocket.orgを参考にしました。
canvsjs.min.jsの配置場所やWebSocketサーバ(Arduino) のIPアドレスは各自の環境に合わせて変更してください。
JavaScriptの知識はほぼ0なのでおかしなところがあればぜひご連絡をください。
<!DOCTYPE HTML>
<html>
<head><script type="text/javascript" src="canvasjs-1.4.0-beta/canvasjs.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>WebSocket</title>
<script type="text/javascript">
window.onload = function () {
var wsUri = "ws://192.168.11.200/";
var output;
var dps = [];
var xVal = 0;
var init = function() {
output = document.getElementById("output");
createWebSocket();
};
var createWebSocket =function() {
websocket = new WebSocket(wsUri, "chat");
websocket.onmessage = function(evt) { onMessage(evt) };
}
var onMessage = function(evt) {
updateChart(Number(evt.data));
}
var writeToScreen = function(message) {
output.innerHTML=message;
}
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "アナログピン0の値"
},
data: [{
type: "line",
dataPoints: dps
}]
});
var updateChart = function(data) {
var dataLength = 50;
writeToScreen('現在の値： <span style="color: red;">' + data +'</span>');
dps.push({
x: xVal,
y: data
});
xVal++;
if (dps.length > dataLength) {
dps.shift();
}
chart.render();
};
init();
}
</script></head>
<body>
<div id="chartContainer" style="height: 300px; width:100%;"></div>
<div id="output"></div>
</body>
</html>
バージョン
Arduino 1.5.5/Arduino Uno
メニューを表示するためにJavaScriptを有効にしてください。