ダッシュボードのレイアウト変更

さて本題に入る前に今日はダッシュボードのレイアウト変更をしたいと思います。さてどこに設定が隠れているのでしょうか。探して見ても見つからなかった。でも下記を見てみると

本日の参考になったリンク

変更が何処かのプロパティでできることを確信。自分でNode-Redを凝視すると、ありました。

ここです、私のバージョンでは日本語化されていて丁寧に「レイアウト」がありました。

あとは簡単です。とりあえずなんとなくGUIを触ると出来ました。今までは縦一列であったものが、横に列にすることができたのです。

なるほど、これでカッコイイ、自分の好きなデザインとレイアウトができるようになりました。中身もさることながら完成形をイメージするのってモチベーションを高めるために大切ですからね。何を作るではなく、こんな理想のものを作りたい。という気持ちがプログラムの初めの一歩、ということで今日はレイアウトを学ぶことができました。続く


LEGO感覚で作り始める

Node-Redでお家のモニタリングシステムをLEGO感覚で始めた簡単に作ろうを続けていきます。まずは「node-red-dashbord」という部品のパレットを選択して使えるようにする。

次に適当になんとなくnodeを配置して線で繋ぐ、ゲージにデータを表示させたいので、スライダーを置いて線で繋ぐ。この簡単さは感動ですね。

ついでにボタンと音声とテキストメッセージの表示も同じように配置します。

そしてデプロイボタンを押して画面を開くと、素晴らしい。ダッシュボードの出来あがり

「PUSH」ボタンを押すと「動作テスト」と喋ってくれて、「数値入力」をスライドさせるとゲージが動く。素晴らしい。最初はチープに見えていたグラフたちも色をちょっとカスタマイズするだけで、愛らしい感じになってきました。

さて、そろそろ何をするのかを具体的に決めていく必要があります。

さて、健忘録として描いている日記なので、このページだけを見て初心者さんが同じことをできるわけでもなく、であればもっと粗い粒度で書けばいいような気もするし。中途半端だなぁと思う今日この頃。一旦全部やって見て最後に誰でもできる完全マニュアルとして用意するのも良いかもしれないです。続く

本日のお世話になったリンクです。