Node-REDをつかってランダムなドット絵を表示するフローを考えてみた。

Node-REDを使ってドット絵を表示する

動的にマトリクス表示するアプリケーションをNode-REDで作ろうと考えています。

DotGen.css – CSS Collectionというドット絵のCSSを生成してくれるサイトがありましたので、これでできるかためしてみます。

DotGen.cssの使い方
Node-REDでTemplateノードを使って表示
マトリクス部分を動的に表示したい
dot1とdot2で表示を切り替え
for文でマトリクス部分を作成
マトリクスの大きさを変更
濃淡を変数で表示
背景を黒に
濃淡をランダムに
ブラウザを2秒おきにリロード
まとめ

DotGen.cssの使い方

DotGen css CSS Collection 2021 06 12 15 41 54

まずは2×2ドットのマトリクスを表示しました。

DotGen css CSS Collection 2021 06 12 15 46 17

こちらの値で１ドットのサイズを設定できます。

最初の数字で縦横のマトリクス数が設定できます。

Outputにて下記のhtml+CSSが生成されます。

<div class="dot"></div>
<style>
.dot::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;

  width: 60px;
  height: 60px;
  background: transparent;

  box-shadow:60px 60px 0 rgb(173, 173, 173),
120px 60px 0 transparent,
60px 120px 0 transparent,
120px 120px 0 transparent;
}
</style>

Node-REDでTemplateノードを使って表示

http inノード、templateノード、http responseノードを使ってフローを作成。

Templateノードには先程のOutputをそのまま貼り付け。

http inノードには、MethodをGET、URLは”/hello”としました。

これで　http://localhost:1880/hello にアクセスすると

このように表示されます。

マトリクス部分を動的に表示したい

DotGen.cssから出力されるCSS部分をみてみると、ドットの状態によって変わらない部分と、変わる部分があります。

この変わる部分を動的に作ることができれば、ドット表示の操作ができそうです。

このようにフローを作成。

動的に生成するCSS部分をtemplateノードで作成。

box-shadowの後にpayloadで差し込みました。

これで表示されました。

dot1とdot2で表示を切り替え

このようにフローを作成。http://localhost:1880/dot1とhttp://localhost:1880/dot2でCSS-dynamicの内容を変更。

[{"id":"59ff2a1.fa600d4","type":"http in","z":"1354c47f.07097c","name":"","url":"/dot1","method":"get","upload":false,"swaggerDoc":"","x":140,"y":140,"wires":[["e12f95d3.5f6668"]]},{"id":"266c286f.d993d8","type":"http response","z":"1354c47f.07097c","name":"","x":670,"y":220,"wires":[]},{"id":"c1a860bb.f14d5","type":"template","z":"1354c47f.07097c","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <head></head>\n    <body>\n<div class=\"dot\"></div>\n<style>\n.dot::before {\n  content: \"\";\n  position: absolute;\n  top: -60px;\n  left: -60px;\n\n  width: 60px;\n  height: 60px;\n  background: transparent;\n\n  box-shadow:{{payload}}\n}\n</style>","output":"str","x":500,"y":220,"wires":[["266c286f.d993d8"]]},{"id":"e12f95d3.5f6668","type":"template","z":"1354c47f.07097c","name":"CSS-dynamic","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"60px 60px 0 rgb(173, 173, 173),\n120px 60px 0 transparent,\n60px 120px 0 transparent,\n120px 120px 0 transparent;","output":"str","x":320,"y":180,"wires":[["c1a860bb.f14d5"]]},{"id":"b7ad4099.56333","type":"http in","z":"1354c47f.07097c","name":"","url":"/dot2","method":"get","upload":false,"swaggerDoc":"","x":140,"y":220,"wires":[["2261bf9.36d704"]]},{"id":"2261bf9.36d704","type":"template","z":"1354c47f.07097c","name":"CSS-dynamic","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"60px 60px 0 rgb(173, 173, 173),\n120px 60px 0 transparent,\n60px 120px 0 transparent,\n120px 120px 0 rgb(173, 173, 173);","output":"str","x":320,"y":240,"wires":[["c1a860bb.f14d5"]]}]

無事に変更できました。

for文でマトリクス部分を作成

マトリクス部分をfor文で生成するようにしました。

↓　フローはこちら

[{"id":"266c286f.d993d8","type":"http response","z":"1354c47f.07097c","name":"","x":490,"y":560,"wires":[]},{"id":"c1a860bb.f14d5","type":"template","z":"1354c47f.07097c","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <head></head>\n    <body>\n<div class=\"dot\"></div>\n<style>\n.dot::before {\n  content: \"\";\n  position: absolute;\n  top: -60px;\n  left: -60px;\n\n  width: 59px;\n  height: 59px;\n  background: transparent;\n\n  box-shadow:{{payload}}\n}\n</style>","output":"str","x":420,"y":500,"wires":[["266c286f.d993d8"]]},{"id":"b7ad4099.56333","type":"http in","z":"1354c47f.07097c","name":"","url":"/dot1","method":"get","upload":false,"swaggerDoc":"","x":220,"y":380,"wires":[["88923119.bb9ad"]]},{"id":"88923119.bb9ad","type":"function","z":"1354c47f.07097c","name":"","func":"var x = 0;\nvar y = 0;\nvar pitch = 60;\nvar html= \"\";\n\nfor (i=0; i&lt;2; i++){\n    y=0;\n    x = x+pitch;\n    \n    for ( o=0; o&lt;2; o++){\n        y = y+pitch;\n        html = html+x+\"px \"+y+\"px 0 rgb(173, 173, 173),\";\n    }\n}\n\nhtml = html.slice( 0, -1 ) ;\n\nmsg.payload = html;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":440,"wires":[["c1a860bb.f14d5"]]}]

functionノードのJavascriptはこの様に。

var x = 0;
var y = 0;
var pitch = 60;
var html= "";

for (i=0; i&lt;2; i++){
    y=0;
    x = x+pitch;
    
    for ( o=0; o&lt;2; o++){
        y = y+pitch;
        html = html+x+"px "+y+"px 0 rgb(173, 173, 173),";
    }
}

html = html.slice( 0, -1 ) ;

msg.payload = html;

return msg;

さらに、templateノードでwidthとheightを1減らすことで、仕切り線も表示できるようになりました。

マトリクスの大きさを変更

今までは2×2のマトリクスで表示していましたが、これを変更できるようにします。

functionノードをこの様に変更。

これで、20×10のマトリクスで表示されるようになりました。

濃淡を変数で表示

これで、濃淡をdimとして変数で表示できるようになりました。

背景を黒に

Templateノードを修正して、背景を黒にしました。

濃淡をランダムに

getRandom(min,max)という関数をつくり、濃淡をランダムで設定するようにしました。

↓　参考記事
【JavaScript入門】乱数の作り方(範囲指定/重複なし/ランダム文字列) | 侍エンジニアブログ

var x = 0;
var y = 0;
var xMax = 20;
var yMax = 10;
var pitch = 60;
var html= "";

var dimlevel = 173;
var dim = "rgb("+dimlevel+","+dimlevel+","+dimlevel+")";

for (i=0; i<xMax; i++){
    y=0;
    x = x+pitch;
    
    for ( o=0; o<yMax; o++){
        y = y+pitch;
        
        // dimlevelをランダム生成
        dimlevel = getRandom(0,255);
        dim = "rgb("+dimlevel+","+dimlevel+","+dimlevel+")";
        
        html = html+x+"px "+y+"px 0 "+dim+",";
    }
}
html = html.slice( 0, -1 ) ;
msg.payload = html;
return msg;
// getRandom
function getRandom( min, max ) {
    var random = Math.floor( Math.random() * (max + 1 - min) ) + min;
    return random;
}

この様に、濃淡が0〜255の範囲でマトリクスに反映されるようになりました。

ブラウザを2秒おきにリロード

これで、ブラウザを2秒おきにリロードしました。

最終的なフローはこちら

[{"id":"266c286f.d993d8","type":"http response","z":"1354c47f.07097c","name":"","x":490,"y":560,"wires":[]},{"id":"c1a860bb.f14d5","type":"template","z":"1354c47f.07097c","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <head>\n    <meta http-equiv=\"refresh\" content=\"2; URL=\">\n    </head>\n    <body>\n<div class=\"dot\"></div>\n<style>\nbody{\n   background-color: black; \n}\n\n.dot::before {\n  content: \"\";\n  position: absolute;\n  top: -60px;\n  left: -60px;\n\n  width: 59px;\n  height: 59px;\n  background: transparent;\n\n  box-shadow:{{payload}}\n}\n</style>","output":"str","x":420,"y":500,"wires":[["266c286f.d993d8"]]},{"id":"b7ad4099.56333","type":"http in","z":"1354c47f.07097c","name":"","url":"/dot1","method":"get","upload":false,"swaggerDoc":"","x":220,"y":380,"wires":[["88923119.bb9ad"]]},{"id":"88923119.bb9ad","type":"function","z":"1354c47f.07097c","name":"","func":"var x = 0;\nvar y = 0;\nvar xMax = 20;\nvar yMax = 10;\nvar pitch = 60;\nvar html= \"\";\n\nvar dimlevel = 173;\nvar dim = \"rgb(\"+dimlevel+\",\"+dimlevel+\",\"+dimlevel+\")\";\n\nfor (i=0; i<xMax; i++){\n    y=0;\n    x = x+pitch;\n    \n    for ( o=0; o<yMax; o++){\n        y = y+pitch;\n        \n        // dimlevelをランダム生成\n        dimlevel = getRandom(0,255);\n        dim = \"rgb(\"+dimlevel+\",\"+dimlevel+\",\"+dimlevel+\")\";\n        \n        html = html+x+\"px \"+y+\"px 0 \"+dim+\",\";\n    }\n}\n\nhtml = html.slice( 0, -1 ) ;\n\nmsg.payload = html;\n\nreturn msg;\n\n// getRandom\n\nfunction getRandom( min, max ) {\n    var random = Math.floor( Math.random() * (max + 1 - min) ) + min;\n  \n    return random;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":440,"wires":[["c1a860bb.f14d5"]]}]

まとめ

Node-REDを使ってドットを表示させるフローを作成しました。

あとはこれをajaxにしたいですね。

Node-RED で（普通の）ウェブアプリケーションを作る : まだプログラマーですが何か？