Arduinoで遊ぶページ

Arduinoで遊んだ結果を残すページです。
garretlab
WebSocket+グラフ

概要

Arduinoで作成したWebSocketサーバからウェブブラウザに情報をプッシュして、ウェブブラウザで受信した情報をグラフ化してみます。

Ethernetシールドが必要です。

目的

WebSocketの使い方の勉強です。どちらかというと、JavaScriptの使い方の勉強です。

ArduinoをWebSocketサーバにし、Arduinoからブラウザに非同期にデータを送信します。ブラウザでは、受信したデータを表示するとともに、グラフ化を行います。

WebSocket

WebSocketサーバについては、こちらを参照してください。

グラフ作成

グラフの作成は、CanvasJSというソフトウェアを利用しました。HTML5とJavaScriptを利用してさまざまなグラフを作成することができます。

CanvasJSのサイトからライブラリをダウンロードして、任意の場所に配置します。

実行例

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を有効にしてください。

Arduinoで遊ぶページ
Copyright © 2014 garretlab all rights reserved.
inserted by FC2 system