e-tipsmemo

ごった煮

ThingsBoardを利用する 1.

e-tipsmemo.hatenablog.com
前回設定したThingsboardを
以前構築した録画サーバーの電力測定とつなげることを考える。

Thingsboardにデータを送るためのAPIドキュメント
ThingsBoard API reference | ThingsBoard

今回はデータを受ける側を準備して、データを投げる側はあまり深入りせずに
最もシンプルな方法で行く。

adminを変更する

Mail Settings | ThingsBoard

デモモードでインストールしなくてもsysadminのアカウントは最初から存在する。
sysadminで入って、右上のプロフィールからパスワードを変更する。
テナントを作ってから、テナントのユーザーアカウントを作る。
この時アクティベーションURLというのが出てくるので、そのURLにログインすると
今作ったテナントアカウントのパスワードを設定することができる。

そして、テナントでログインしなおす。

以下の動画を参考にやっていく。
Getting Started | ThingsBoard

以降はテナントアカウントでログインしている。

アセットを登録する

「資産」と書いてある。
アセット名は、デバイスと紐づけるのでどこにそれがあるかわかったほうが良いのかもしれない。
(普通の部屋だけど)

f:id:katakanan:20191005034831p:plain

バイスを登録する

今回はワットチェッカーだけ。あとあと温度センサー、湿度センサーなどを追加したい。
f:id:katakanan:20191005034924p:plain

紐づけする

アセットの画面からプロパティを変更する画面で「関係」タブで設定する。
先ほど定義したものをここで紐づける。
f:id:katakanan:20191005035031p:plain

Thingsboardにデータを投げる

とりあえずコマンドラインからcurlで投げたデータがThingsboardの画面に出るかを確認する。
ACCESS_TOKENはデバイス画面からコピーする
以下のjsonを送る

{
	"time":2019/01/14 02:50:07,
	"voltage":102.396,
	"current":108.74219,
	"wattage":5.335
}

timeはStringで送らないとダメだった

curl -v -X POST -d "{\"time\":\"2019/01/14 02:50:07\", \"voltage\":102.396, \"current\":108.74219, \"wattage\":5.335}" http://192.168.0.14:8080/api/v1/$ACCESS_TOKEN/telemetry --header "Content-Type:application/json"

これはOK
f:id:katakanan:20191004023829p:plain

ワットチェッカーのデータを投げる

reqwestを使った。

extern crate reqwest;

use std::collections::HashMap;
use reqwest::*;

fn main() {

    let time = "2019/01/14 02:50:07";
    let v = "102";
    let c = "108.9";
    let w = "5";

    let token = " ^^^^^^^^^^^^^ "; //アクセストークンを書く。

    let str_url = format!("http://192.168.0.14:8080/api/v1/{}/telemetry", token);
    let url = Url::parse(&str_url).unwrap();

    let mut map = HashMap::new();
    map.insert("time", time);
    map.insert("voltage", v);
    map.insert("current", c);
    map.insert("wattage", w);

    let client = reqwest::Client::new();

    let mut res = client
        .post(url)
        .json(&map)
        .send()
        .unwrap();

    println!("{}", res.status());
}

とりあえずこれで行けたので
次は、前にRustで作ったワットチェッカーBluetooth経由で取りに行くプログラムを改造する。
時間があればRustのMQTT crateなどを利用して別のプロトコルでも行えることを試してみようかと思う。

実践Rust入門[言語仕様から開発手法まで]

実践Rust入門[言語仕様から開発手法まで]

Raspberry piにThingsBoardのインストールと試用

家においてあるパソコンが集まっている部屋の温度とか湿度とか電力とか監視するために
Raspberry piとその他もろもろを設置したのはいいが、
それらを統合して視覚化できたほうが便利

そこでIoT Platformと銘打っているThingsBoardをRaspberry pi上に入れて自分向けに運用する(予定)
ThingsBoard - Open-source IoT Platform

インストール

Installing ThingsBoard on Raspberry Pi 3 Model B | ThingsBoard
これに沿って設定する。
f:id:katakanan:20190929042256j:plain

sudo service thingsboard start

をするのだが、Thingsboardのサービスを起動するまえに再起動したほうがいい気がする。
(しないでいたら、とてつもなくRaspberry piの動作が遅くなった)


インストールしなおすならば
一端DATABASEを消さなければ上書きインストールすることができなかった
(すでにデータベースにデモモードで使うユーザーが登録されているので「失敗」といったメッセージが出る)

データベースを消す方法

psql -U postgres -d postgres -h 127.0.0.1 -W

でログインしてから

SELECT * FROM pg_database;

インストール手順で作ったthingsboardデータベースがあるのが確認できる

データベースを消す

DROP DATABASE thingsboard;

そのあと、またthingsboardデータベースを作成する。

デモ

ログイン画面
f:id:katakanan:20190929051110p:plain
インストールしたRaspiに8080ポートでアクセスする
f:id:katakanan:20190929045026j:plain
インストール手順にあるアドレスとパスワードでログインできる。

動画

Getting Started | ThingsBoard
デモモードで用意されたtenant administratorでログインする。
途中で温度センサーの値を投げるときに、curlを利用しているので、
今ある電力測定プログラムを対応させるのはそれが一番簡単かもしれない。
(MQTTなどにも対応しているらしいので、ESP32などがセンサー値を集めるときは,そちらのほうが良さそう)

チュートリアルの途中の状態
f:id:katakanan:20190929062352p:plain
おおよそやりたいこと(以前作った録画サーバーの電力ログを取る)はできそうだと分かったので
つぎはThingsboardにデータを投げる、またはThingsboardに取りに行かせることができるのかを検討して、
それを実装する。

その他

今回はRaspberry pi 3 B+を利用しているが、
拡張性を考えるとメモリが多く積んであるRaspberry pi 4がよいかもしれない

Rustのparserを試す

ちょっと必要になったきがするのでparserをかくためのものを探したり
サンプルを書いてみたりした。
個人的なメモ
What is the difference between parser generators and parser combinators? - Quora
compiler construction - What is the difference between LALR and LR parsing? - Stack Overflow
専門と離れているので適当に下調べ。

nom - Rust
combine - Rust
pest. The Elegant Parser
LALRPOP -
syntax-cli - npm

最初はlex(情報がたくさん),bison(情報がたくさん)に似てると書いてある
syntax-cliがいいかもしれないと思ったけど、
パーサーを生成するコマンドがbuild.rsでうまく自動化できなかったのでやめた。

結局最初から生成もセットで提供されている
lalrpopを使うことにした。

とりあえず式をパースするサンプルを書いた。
f:id:katakanan:20190706151544p:plain

use std::str::FromStr;
use crate::ast::Node;

grammar;

NUM_INTEGER: i32 = r"[0-9]+" => i32::from_str(<>).unwrap();
IDENTIFIER: String = r"[a-zA-Z_][a-zA-Z0-9_$]*" => <>.to_string();

pub Expr: Node = {
  <e:Expr> "+" <f:Factor> => Node::Binary{
                                            op: "+",
                                            left: Box::new(e),
                                            right: Box::new(f),
                                          },
  Factor,
};

pub Factor: Node = {
  <f:Factor> "*" <t:Term> => Node::Binary{
                                            op: "*",
                                            left: Box::new(f),
                                            right: Box::new(t),
                                          },
  Term,
};

pub Term: Node = {
  <n:NUM_INTEGER> => Node::Literal(n),
  <ident:IDENTIFIER> => Node::Ident(ident),
  "(" <Expr> ")",
};
#[derive(Debug)]
pub enum Node {
    Literal(i32),
    Ident(String),
    Binary {
        op: &'static str,
        left: Box<Node>,
        right: Box<Node>,
    },
}
#[macro_use]
extern crate lalrpop_util;

pub mod ast;
pub mod parser;

fn main() {
    println!("Hello, world!");
    println!("{:?}", parser::ExprParser::new().parse("((22))"));
    println!("{:?}", parser::ExprParser::new().parse("(a_A0)"));
    println!("{:?}", parser::ExprParser::new().parse("(2+a)*4"));
    println!("{:?}", parser::ExprParser::new().parse("2+a*4"));
    println!("{:?}", parser::ExprParser::new().parse("5*4+b"));
    println!("{:?}", parser::ExprParser::new().parse("5*(4+b)"));
}
    Finished dev [unoptimized + debuginfo] target(s) in 1.68s
     Running `target/debug/calc3`
Hello, world!
Ok(Literal(22))
Ok(Ident("a_A0"))
Ok(Binary { op: "*", left: Binary { op: "+", left: Literal(2), right: Ident("a") }, right: Literal(4) })
Ok(Binary { op: "+", left: Literal(2), right: Binary { op: "*", left: Ident("a"), right: Literal(4) } })
Ok(Binary { op: "+", left: Binary { op: "*", left: Literal(5), right: Literal(4) }, right: Ident("b") })
Ok(Binary { op: "*", left: Literal(5), right: Binary { op: "+", left: Literal(4), right: Ident("b") } })

うーんよさそう?

ある文法をパースしたかったら
既存のプロジェクトを参考にできる
GitHub - RustPython/RustPython: A Python Interpreter written in Rust
GitHub - tcr/rust-verilog: Verilog parsing and generator crate.

diagram-js customize 6. CustomizeRenderer

今回はBase Renderを継承した自作クラスに切り替える

bpmn-jsを参考にすると、lib/drawに主な3つのファイルがあるので
それを作る。(今回はまだMyRenderUtilは使わない)
f:id:katakanan:20190629234033p:plain

四角をつなげる線を引いたりするのに
lib/util/RenderUtilが必要で、
diagram-jsからそれを含めてコピーした。
f:id:katakanan:20190629234431p:plain

bpmn-jsのBPMNRendererを参考にdiagram-exampleと同じような動作になるように
必要な関数だけを実装した。

import {
    componentsToPath,
    createLine
  } from '../util/RenderUtil';
  
  import {
    append as svgAppend,
    attr as svgAttr,
    create as svgCreate
  } from 'tiny-svg';
  
  // apply default renderer with lowest possible priority
  // so that it only kicks in if noone else could render
  var HIGH_PRIORITY = 1500;
  import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
  import { pick } from 'min-dash';
  
  export default class MyRenderer extends BaseRenderer {
      constructor(eventBus, styles){
          super(eventBus, HIGH_PRIORITY);
          this.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: '#000' });
          this.SHAPE_STYLE = styles.style({ fill: 'white', stroke: '#000', strokeWidth: 2 });
      }
  
      canRender(element){
          return true;
      }
  
      drawShape(visuals, element){
        var rect = svgCreate('rect');
        svgAttr(rect, {
          x: 0,
          y: 0,
          width: element.width || 0,
          height: element.height || 0
        });
        svgAttr(rect, this.SHAPE_STYLE);
      
        svgAppend(visuals, rect);

        return rect;
      }
  
      drawConnection(visuals, connection){
          var type = connection.type;
 
          var line = createLine(connection.waypoints, this.CONNECTION_STYLE);
  
          svgAppend(visuals, line);
          return line;
      }
}
  
  MyRenderer.$inject = [
      'eventBus',
      'styles' 
  ];

適当なコミットの時点のものをコピーしてきたので
もしかしたら使ってないメンバ関数もあるかもしれない。
そしてここで、drawShape関数がcanvasに追加する
svgタグの要素を生成しており、svgAttrでスタイル(線の色とか)を決定している。
最後にsvgAppendで親(visuals)に対する子要素として追加される。

e-tipsmemo.hatenablog.com
の記事の2の方法。

import MyRenderer from './MyRenderer';

export default {
  __init__: [ 'MyRenderer' ],
  MyRenderer: [ 'type', MyRenderer ],
};

index.jsはいつも通り

Renderができたので、
Modeler.jsにモジュールを追加する。

import DrawModule from './lib/draw';
....
export default class Modeler extends Viewer{
    constructor(options){
        var options = {
            canvas:{
                container: options.container
            },
            modules:[
                .....
                DrawModule,
                .....
            ]
        };
        super(options);
    }
}

そしてapp.jsのスタイルを上書きするところはもういらない

// defaultRenderer.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: '#000' });
// defaultRenderer.SHAPE_STYLE = styles.style({ fill: 'white', stroke: '#000', strokeWidth: 2 });

見た目は変わらない。
f:id:katakanan:20190629235554p:plain

diagram-js customize 5. ContextPadProvider

e-tipsmemo.hatenablog.com

つぎはContextPadProvider
f:id:katakanan:20190622010224p:plain
といっても今回もソースコードを分離する程度

f:id:katakanan:20190622010429p:plain
ExampleContextPadProvider.jsの実装を/lib/features/context-pad/に移す。
ほぼコピペ

ContextPadProvider.js

import {
    assign,
    forEach,
    isArray
} from 'min-dash';

export default class ContextPadProvider{
    constructor(connect, contextPad, modeling){


        this._connect = connect;
        this._modeling = modeling;

        contextPad.registerProvider(this);
    }

    getContextPadEntries(element){
        var modeling = this._modeling;
        var connect = this._connect;

        var actions = {};

        function removeElement(){
            modeling.removeElements([ element ]);
        }
    
        function startConnect(event, element, autoActivate) {
            connect.start(event, element, autoActivate);
        }

        assign(actions, {
            'delete': {
                group: 'edit',
                className: 'context-pad-icon-remove',
                title: 'Remove',
                action: {
                  click: removeElement,
                  dragstart: removeElement
                }
            },
            'connect': {
                group: 'edit',
                className: 'context-pad-icon-connect',
                title: 'Connect',
                action: {
                  click: startConnect,
                  dragstart: startConnect
                }
            }
        });

        return actions;

    }

}

ContextPadProvider.$inject = [
    'connect',
    'contextPad',
    'modeling'
];

index.js

import DirectEditingModule from 'diagram-js-direct-editing';
import ContextPadModule from 'diagram-js/lib/features/context-pad';
import SelectionModule from 'diagram-js/lib/features/selection';
import ConnectModule from 'diagram-js/lib/features/connect';
import CreateModule from 'diagram-js/lib/features/create';

import ContextPadProvider from './ContextPadProvider';

export default {
  __depends__: [
    DirectEditingModule,
    ContextPadModule,
    SelectionModule,
    ConnectModule,
    CreateModule,
  ],
  __init__: [ 'contextPadProvider' ],
  contextPadProvider: [ 'type', ContextPadProvider ]
};

本当はこのすべてに依存しているわけではなさそうだが、とりあえず動いているのでヨシ(?)

diagram-js customize 4. PaletteProvider

次にPaletteProvider
f:id:katakanan:20190615153523p:plain

bpmn-jsを習って、
app/lib/features/palette
を以下のように構成。
f:id:katakanan:20190615161552p:plain

index.jsはappからimportするときの読み込まれる?
jsでファイルを分割するときの手法っぽい

import PaletteModule from 'diagram-js/lib/features/palette';
import CreateModule from 'diagram-js/lib/features/create';
import SpaceToolModule from 'diagram-js/lib/features/space-tool';
import LassoToolModule from 'diagram-js/lib/features/lasso-tool';
import HandToolModule from 'diagram-js/lib/features/hand-tool';
import GlobalConnectModule from 'diagram-js/lib/features/global-connect';
import translate from 'diagram-js/lib/i18n/translate';

import PaletteProvider from './PaletteProvider';

export default {
  __depends__: [
    PaletteModule,
    CreateModule,
    SpaceToolModule,
    LassoToolModule,
    HandToolModule,
    GlobalConnectModule,
    translate
  ],
  __init__: [ 'paletteProvider' ],
  paletteProvider: [ 'type', PaletteProvider ]
};

PaletteProvider.js
bpmn-jsはclass構文を使っていないが、こっちはできるだけこの構文を使っていくつもり。
export defaultがないと外部ファイルから使えないらしい

import { assign } from "min-dash";

export default class PaletteProvider{
    constructor(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate){
        this._create = create;
        this._elementFactory = elementFactory;
        this._lassoTool = lassoTool;
        this._palette = palette;
        this._globalConnect = globalConnect;
        this._translate = translate;
        this._spaceTool = spaceTool;
        this._handTool = handTool;
        palette.registerProvider(this);
    }

    getPaletteEntries(){
        var actions = {};
        var create = this._create,
            elementFactory = this._elementFactory,
            lassoTool = this._lassoTool;
      
            assign(actions, {
                'lasso-tool':{
                    group: 'tools',
                    className: 'palette-icon-lasso-tool',
                    title: 'Active Lasso Tool',
                    action: {
                        click: function(event){
                            lassoTool.activateSelection(event);
                        }
                    }
                },
                'tool-separator': {
                    group: 'tools',
                    separator: true
                },
                'create-shape': {
                    group: 'create',
                    className: 'palette-icon-create-shape',
                    title: 'Create Shape',
                    action: {
                      click: function() {
                        var shape = elementFactory.createShape({
                          width: 200,
                          height: 80
                        });
              
                        create.start(event, shape);
                      }
                    }
                }
            });
    
            return actions;
      };

};

PaletteProvider.$inject = [
    'palette',
    'create',
    'elementFactory',
    'spaceTool',
    'lassoTool',
    'handTool',
    'globalConnect',
    'translate'
  ];

registerProviderはdiagram-js/palette.jsの関数を呼び出す。
初期化時にgetPaletteEntriesが呼ばれる。
ここはdiagram-js-exampleのExamplePaletteProvider.jsをコピーして
あとで拡張性が高そうなbpmn-jsの書き方に寄せた。

このdiagram-js関連のプログラムはすべてdependency injectionという設計で行われているらしく
クラスを拡張してコンストラクタの引数の順番で
必要なモジュールを構文で指定する必要があるのだと思う。

// constructor(
//     palette,
//     create,
//     elementFactory,
//     spaceTool,
//     lassoTool,
//     handTool,
//     globalConnect,
//     translate)

PaletteProvider.$inject = [
    'palette',
    'create',
    'elementFactory',
    'spaceTool',
    'lassoTool',
    'handTool',
    'globalConnect',
    'translate'
];

最後にModeler.jsで追加しているModuleを自作のほうに切り替える。

// import PaletteModule from 'diagram-js/lib/features/palette'; // palette
//import ExamplePaletteProvider from './ExamplePaletteProvider';
import PaletteModule from './lib/features/palette'

ここに自分オリジナルの形を追加していくのはelementFactoryやRenderが必要になってくる
いまのところはpalette-icon-create-shapeのwidthとheightを変更できることを確認する。

f:id:katakanan:20190615162916p:plain

diagram-js customize 3. CONNECTION/SHAPE_STYLE

e-tipsmemo.hatenablog.com
まず、前回スタイルがピンク色だったが、ここの色を変えるには

1.BaseRenderのスタイルを上書き
2.app/lib/draw/Renderに新しくdiagram-js/BaseRenderを継承したRender Classをつくっていろいろとやる。

とあるが、2は今は面倒なので(あとで追加する)
1の方法をとる

diagram-jsを継承したModeler ClassにはRender Classを得る関数があるのでそれを使う。
app.jsに追記

var defaultRenderer = modeler.get('defaultRenderer');
var styles = modeler.get('styles');
// override default stroke color
defaultRenderer.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: '#000' });
defaultRenderer.SHAPE_STYLE = styles.style({ fill: 'white', stroke: '#000', strokeWidth: 2 });

f:id:katakanan:20190615153309p:plain
黒になった。

次はPaletteProvider