(ToCoStick)Node.jsでシリアル通信してブラウザでグラフ表示(ccchart)
Node.jsのお勉強が必要になり、ひと段落したからメモ。
TWE-Liteから33msecごとにデータが送られてくると想定。
アナログ入力1の値を読み取り、wsモジュールを使ってccchartに送る。
以下、ソース。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <title>TWE-Lite Monitor by ccchart</title> </head> <body> <script src="ccchart-min.js" charset="utf-8"></script> <canvas id="hoge"></canvas> <script> var chartdata = { "config": { "width": (window.innerWidth-60) , "height": (window.innerHeight-60)/1.2, "lineWidth": 2, "xScaleSkip": 33, "useVal": "no", "bg": "#000", "colorSet": ["#00FF00",], "maxY": 2000, "minY": 0, "maxWsColLen": 333 }, "data": [ ["時間"], ["電圧"] ] }; ccchart .init('hoge', chartdata) .ws('ws://127.0.0.1:3001') .on('message', ccchart.wscase.someColsAtATime); </script> </body> </html>
ccchartTest.js
var WsServer = require('ws').Server; var ws = new WsServer({port : 3001}); var express = require('express'); var serialport = require('serialport'); const ARRAY_NUM = 333; var dataArr = new Array(ARRAY_NUM); var time = 0; //in msec clearArray(); function clearArray(){ var now = new Date(); var hour = ZeroFormat(now.getHours(),2); var min = ZeroFormat(now.getMinutes(),2); var sec = ZeroFormat(now.getSeconds(),2); var nowStr = hour + ":" + min + ":" + sec; for(i = 0;i < ARRAY_NUM;i++){ dataArr.push([[nowStr],[1000.0]]); } //console.log(dataArr); } broadcast(); function broadcast(volt){ var tid = setInterval( function(){ ws.clients.forEach(function(client){ client.send(JSON.stringify(dataArr)); // console.log(dataArr); }); }, 100); //100msec毎に送信 } var portName = 'COM3'; var sp = new serialport.SerialPort(portName,{ baudRate: 115200, dataBits: 8, parity: 'none', stopBits: 1, flowControl: false, //parser: '\n'//serialport.parsers.readLine("\n"); }); sp.on('open', function(){ console.log('serial port open'); }) sp.on('data',function(input){ var inBuffer = new Buffer(input, 'ascii'); if(inBuffer.length < 49){ return; } var inStr = inBuffer.toString('ascii',37,39); var volt = 1.0 * (parseInt(inStr,16) * 16); //10進に変換,16倍して電圧にも変換,1.0倍してfloatに変換 // console.log(volt); addData(volt); }); function addData(volt){ var now = new Date(); var hour = ZeroFormat(now.getHours(),2); var min = ZeroFormat(now.getMinutes(),2); var sec = ZeroFormat(now.getSeconds(),2); var nowStr = hour + ":" + min + ":" + sec; dataArr.shift(); //最初の要素を取り除いて、 dataArr.push([[nowStr],[volt]]); //push } /** * [関数名] ZeroFormat * [機 能] ゼロ埋め * [説 明] 数値が指定した桁数になるまで数値の先頭をゼロで埋める * * @param integer num 数値 * @param integer max 桁数 * @return integer tmpS ゼロ埋め後の数値 */ function ZeroFormat(num,max){ var tmp=""+num; while(tmp.length<max){ tmp="0"+tmp; } return tmp; }
ZeroFormat関数は
http://phpjavascriptroom.com/exp.php?f=include/js/formcheck/zero2.inc&ttl=%E6%95%B0%E5%80%A4%E3%81%AE%E5%85%88%E9%A0%AD%E3%82%92%E3%82%BC%E3%83%AD%E3%81%A7%E5%9F%8B%E3%82%81%E3%82%8B
を使わせて頂きました。