M5Stackからのデータを視覚化するのに、一番手軽に使えそうなツールだと思うProcessingでM5StackからUDPで送られてくる温度データを時系列でグラフ化してみました。Bluetoothで送るのは接続不安定でストレスになるから、簡単に送れるUDPを使います。電池寿命とか関係ないし、
<M5Stackから送られるメッセージ形式>
日時（秒まで）と温度データ
<Processingのコード>
メッセージから、温度部分を抜き出して表示しています。Processingの画像処理は専用のAPIになっています。正規化処理もJavaとは別物ですが、
receive()メソッドは、UDPリッスンで受信データがあれば起動されるでしょうが、drawの読み出し(val)と書き込みが競合すれば値は不定になる可能性はありそうですが、視覚的なものなので排他制御をするまでもないでしょう。
import hypermedia.net.*;
import controlP5.*;
UDP udp;
final String IP = "0.0.0.0";
ControlP5 cp5;
Chart chart_tmp;
final int NUM_GRAPH_DATA = 200;
PFont myFont;
float val;
void setup() {
size(650, 700);
myFont = createFont("Arial", 30);
udp = new UDP(this, 3002);
udp.listen( true );
frameRate(10);
cp5 = new ControlP5(this);
chart_tmp = cp5.addChart("tmp sensor");
chart_tmp.setView(Chart.LINE)
.setRange(20, 22)
.setSize(600, 200)
.setPosition(10, 250)
.setColorCaptionLabel(color(0,0,255))
.setStrokeWeight(1.5)
.getColor().setBackground(color(224, 224, 224))
;
chart_tmp.addDataSet("temp");
chart_tmp.setData("temp", new float[NUM_GRAPH_DATA]);
chart_tmp.setColors("temp", color(0, 0, 192), color(255,255,128));
}
void draw() {
background(255);
fill(0);
chart_tmp.unshift("temp", val);
}
void receive( byte[] data, String ip, int port ) {
String message = new String( data );
println( "received : \""+message+"\" from "+ip+" on port "+port );
String[] matchedTexts = match(message, "[0-9|-]*.[0-9]*$");
if (matchedTexts != null) {
println(matchedTexts[0]);
val = float(matchedTexts[0]);
}
}動画はこちらを参照ください、グラフ下端が20℃、上端が22℃で範囲を拡大して見やすくしています。
admin
