ccchartでObnizのディスプレイに描画できることがわかったので、
Obniz の ディスプレイに ccchart で描いてみる
https://qiita.com/toshirot/items/ca8d4d3748ef55c4b912
じゃ、ccchart が得意とするリアルタイムチャートも行けるんじゃないの？ということでやってみた。
Obniz ディスプレイに ccchart でリアルタイムチャートを出力してみる。 pic.twitter.com/WcSiJFJyMB
— 高橋登史朗 ( T blockchain T ) (@toshirot) 2018年6月12日
それなら、ccchartのWebSocket受信パターン関数に Obniz 用の実装すれば手軽に使えるようになるね。
ということで、ccchart-v1.12.090.jsに暫定実装してみた。
それを使って上のリアルタイムチャートを動かすコードが下記。
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@1.4.3/obniz.js" crossorigin="anonymous"></script>
<script src="https://ccchart.org/js/ccchart-v1.12.090.js" charset="utf-8"></script>
</head>
<body>
<!--キャンバス ここにチャートを出力します-->
<canvas id="hoge"></canvas>
<script>
//チャートの設定
let chartdata = {
"config": {
"onlyChart":"yes", //値や凡例無しのチャートだけモード
"type": "bar", //bar チャート
"barWidth": 4, //バーの幅
//Canvas size
"width":128, //キャンバスの幅 Obnizのディスプレイ幅
"height":64, //キャンバスの高 Obnizのディスプレイ高
//attributes not used
"useShadow":"no", //影は使わない 白黒だし
//Axis X
"axisXLen":3, //X軸 3だと3+1本(4本)※これ判りにくいからそのうちlengthに変えるべきかなぁ
"axisXWidth":1, //X軸の太さ
"xColor":"#fff", //X軸の色
"axisYLen":0, //Y軸は無し
//Bar color
"colorSet": ["#fff"], //バーの色
},
"data": [
["month"],
["data1"]
]
};
//obniz インスタンスを作る
const obniz = new Obniz("0***-0***");//0***-0***の部分に自分のobnizIDを書く
//ここで インスタンス名をobnizにすると
//ccchart-v1.12.090.jsの暫定実装版では
//下記oneColAtATimeが自動的にobniz出力してくれます。簡単＾＾！
//obniz に接続できたら実行する内容
obniz.onconnect = async function () {
ccchart
.init('hoge', chartdata)
.ws('wss://ccchart.com:8015')
.on('message', ccchart.wscase.oneColAtATime)
}
</script>
</body>
</html>
サーバー側からは下記のような["23:41:47",58]といったJSONデータが連続してWebSocketで wss://ccchart.com:8015 から届き続けています。
※chartdata の config に "onlyChart":"yes"を設定してるので、"23:41:47"といった時刻は無視してます。
["23:41:47",58]
["23:41:47",30]
["23:41:47",7]
["23:41:47",46]
["23:41:47",59]
["23:41:47",95]
["23:41:47",22]
["23:41:47",73]
このサーバーデータの生成は、例えばいつもの下記ら辺のコードとかチャートデータをJSONで送ってくれるコードなら何でも良いのですが、
https://qiita.com/toshirot/items/a461cdc8c2079d9b8530
最近はwssが普通なのでこんな感じのを今回は使ってみました。
データをランダム生成して時刻を付けてブロードキャストしてます。
今のところ
wss://ccchart.com:8015
にWebSocketでつなげば誰でも使えるのでテストに利用して頂いても構いません。
const https = require("https");
const WsServer = require('ws').Server;
const fs = require("fs");
var tid;
const host = 'ccchart.com';//
const port = 8015;//
var options = {
key: fs.readFileSync('/etc/letsencrypt/live/ccchart.com/privkey.pem'),
cert: fs.readFileSync('/etc/letsencrypt/live/ccchart.com/fullchain.pem')
};
var app = https.createServer(options, function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('peach!\n');
}).listen(port, host);
//WS サーバーを起動する
ws = new WsServer({server: app});
broadCast();//データ配信開始
//on connection
ws.on('connection', function(socket) {
console.log(
'conned: ' + ws.clients.length
, (new Date)
, socket.upgradeReq.socket.remoteAddress
);
socket.on('message', function(msg) {
var msg = JSON.stringify(msg);
if(msg === 'Heartbeat'){
if(socket.readyState===1){
socket.send(msg);
console.log(msg);
}
}
});
});
function broadCast(){
tid = setInterval (function(){
var dataAry = mkData();
ws.clients.forEach(function(client) {
if(client.readyState===1)
client.send(JSON.stringify(dataAry));
});
}, 200);
}
function mkData(){
var data = [
["年度"],
["s2"]
];
var now = new Date();
var H = now.getHours();
var M = now.getMinutes();
var S = now.getSeconds();
H = (H < 10)?'0'+H:H;
M = (M < 10)?'0'+M:M;
S = (S < 10)?'0'+S:S;
data[0]=H +':' + M +':' + S;
data[1]=18 + Math.floor(Math.random(10) * 22 );
return data;
}
次はこれ
Obnizのディスプレイにアナログ時計を表示してみる。 https://qiita.com/toshirot/items/43527d63d5a1b9bd8032