Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

Node-RedでSVGを描画する　その５：base64でラスター画像を埋め込む

node.js

これはNode-RedというよりSVGの仕様ですが……SVGにはIMAGEタグにbase64埋込でラスター画像を表示できます。

実際のところ

<svg x="0" y="0" height="300" viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Add here your SVG shapes (circles, rectangles, ...) -->
<image x="0" y="0" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANS...ElFTkSuQmCC" />
<circle cx="50" cy="50" r="{{msg.payload}}" fill="red" stroke="red" stroke-width="4px" />
</svg>


参考もと

svgのimage要素で外部画像を表示する - daiiz
<image> - SVG&colon; スケーラブルベクターグラフィック | MDN

Node-RedでSVGを描画する　その３：SVGにイベントを設定しPayloadに載せたりJavascriptを実行したりする

node.js

shuzo-kino.hateblo.jp
の続きで、イベント

実際のところ

イベントのわりあて

実際にマウスオーバーするとこんな感じでメッセージが表示されます

前回と同様に作っていればスライダーで半径が変わりますが、
ゼロの場合には読みだされないので、使いどころ次第では面白いかも

Javascriptのスクリプトを設定する

Javascriptを実行する事も可能



参考もと

node-red-contrib-ui-svg/msg_control.md at master · bartbutenaers/node-red-contrib-ui-svg · GitHub

Node-RedでSVGを描画する　その２：変数の受取による動的変化

node.js

shuzo-kino.hateblo.jp
の続き。
前回のでは直接記述でしたが、今回はこれに変数経由でパラメータを送り込むように作ってみます。

実際のところ

他のノードと同様、変数は"{{msg.payload}}"のような感じで与えます。

<svg x="0" y="0" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Add here your SVG shapes (circles, rectangles, ...) -->
<circle cx="50" cy="50" r="{{msg.payload}}" fill="red" stroke="red" stroke-width="4px" />
<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->
</svg>

スライダーを動かすと


参考もと

node-red-contrib-drawsvg (node) - Node-RED
node-red-contrib-ui-svg (node) - Node-RED

Node-RedでSVGを描画する　その１：環境構築とUIの表示

node.js

ベクター画像であるSVG形式をNode RedのＵＩでも活用できる「node-red-contrib-ui-svg」を見つけたのでメモ

実際のところ

パッケージ「node-red-contrib-ui-svg」を追加するとＵＩのところに新しいアイコン

ノードを開くと、こんな感じの画面が

デカデカと出てくるアイコンは外部サービスのSVGをブラウザで編集できるツールで、Googleアカウントで登録すると使えるようになります。
今回はSVGのデータを喰わせたいだけなので、保留。

SVGタグを開き

<svg x="0" y="0" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Add here your SVG shapes (circles, rectangles, ...) -->
<circle cx="50" cy="50" r="20" fill="red" stroke="red" stroke-width="4px" />
<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->
</svg>

UIの方で適切にサイズを設定しレイアウトすると、赤い丸が表示されます

参考もと

node-red-contrib-drawsvg (node) - Node-RED
node-red-contrib-ui-svg (node) - Node-RED