Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node-RED Park Vol.6

Node-RED Park Vol.6

Node-RED Park Vol.6 「わたしがダッシュボードノードの画面作りで重宝しているサードパーティノード紹介」の登壇資料です。

◆スライド内の素材は以下を使用させていただいております。ありがとうございます!

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

1ft-seabass
PRO

July 14, 2022
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

Transcript

  1. Node-RED Park Vol.6
    わたしがダッシュボードノードの画面作りで
    重宝しているサードパーティノード紹介
    ワンフットシーバス 田中正吾

    View Slide

  2. 私の話はスライドを後ほど共有します。
    話す内容に注力いただいて大丈夫です!

    View Slide

  3. 田中正吾(たなかせいご)
    屋号:ワンフットシーバス
    2004年よりフリーランス。以後、FLASH制作を
    中心にインタラクティブコンテンツを主に行い現
    在に至る。
    最近ではWEBフロントエンドをベースにしなが
    らも、情報とインターフェースが合わさるアプ
    ローチという視点でIoTやMixed Realityといった
    技術も取り入れながら活動しています。

    View Slide

  4. ダッシュボード自体も使いやすいが
    良いサードパーティノードも色々ある
    https://flows.nodered.org/search?term=dashboard&type=node

    View Slide

  5. IoT 系講師の教材で届いたデータを表示する
    ダッシュボードは重宝します

    View Slide

  6. こんなかんじ

    View Slide

  7. データが並べられる ui-table ノードはいつも使う
    来たデータのログとか、イチから作るの大変ですし
    https://flows.nodered.org/node/node-red-node-ui-table

    View Slide

  8. デジタルサイネージ系

    View Slide

  9. 動画表示の ui-media ノードで
    動画を画面いっぱいに表示
    https://flows.nodered.org/node/node-red-contrib-ui-media

    View Slide

  10. ui-iframe はコンテンツの自動切替や
    他サイトの表示で使いやすい
    https://flows.nodered.org/node/node-red-node-ui-iframe

    View Slide

  11. 入力系

    View Slide

  12. 画像アップロード
    https://flows.nodered.org/node/node-red-contrib-ui-upload

    View Slide

  13. ウェブカメラ
    https://flows.nodered.org/node/node-red-node-ui-webcam

    View Slide

  14. エクストラ
    ● フロー検索を眺めておもしろダッシュボード系ノード紹介
    ● うまく使えていないダッシュボード系ノードもある
    ● SVGノード使いこなすとスゴイ(スゴそう)

    View Slide