对于NodeRED的UI方案的一些想法

需求

NR的轻量化和便捷的可调试, 作为智能家居的平台非常优秀. 但是UI方面还没一个好的方案.
前端目前还是Hass的Lovelace做的非常好. 很多人目前只是拿Hass做个展示.

尝试

理想中的一些想法

  • 前端布局可高度定制
  • 设备配置要方便
  • 设备已卡片展示
  • 卡片作为UI组件可以通用

方案思路

利用UI Builder节点构架一个整体布局, 式样, 颜色. 提供一些默认的CSS变量提供给卡片使用, 这样可以保持基本的一致性.

数据

顶层是一个devices对象,下面包含若干个设备类型,比如dc1(排插),switch,sensor等等, 设备类型由卡片开发者提供, 并且目前需要喂什么样格式的数据. 比如下面的dc1.

一个由设备ID包裹的数据对象. 设备id由用户在nr流里面提供,保证id的唯一性.

            dc1_009cac:{
                energy: {
                    starttime: "2020-02-19 17:30:49",
                    total: "0.011"
                }
                power1:{
                    status: "on",
                    comm: "dc1/dc1_009cac/cmnd/POWER1",
                    icon: "usb-port",
                    title: "USB"
                },
                power2:{
                    status: "on",
                    comm: "dc1/dc1_009cac/cmnd/POWER2",
                    icon: "usb-port",
                    title: "USB"
                },
                power3:{
                    status: "on",
                    comm: "dc1/dc1_009cac/cmnd/POWER3",
                    icon: "usb-port",
                    title: "USB"
                },
                power4:{
                    status: "on",
                    comm: "dc1/dc1_009cac/cmnd/POWER4",
                    icon: "usb-port",
                    title: "USB"
                },
                name: "第一个",

            }

devices下一层是设备类型, 这个由卡片开发者定义, 包括需要喂什么数据都做说明, 并且提供样例流.
下面是整体的数据结构

{
    devices:{
        dc1:{
            dc1_009cac:{
                energy: {
                    starttime: "2020-02-19 17:30:49",
                    total: "0.011"
                }
                power1:{
                    status: "on",
                    comm: "dc1/dc1_009cac/cmnd/POWER1",
                    icon: "usb-port",
                    title: "USB"
                },
                power2:{
                    status: "on",
                    comm: "dc1/dc1_009cac/cmnd/POWER2",
                    icon: "usb-port",
                    title: "USB"
                },
                power3:{
                    status: "on",
                    comm: "dc1/dc1_009cac/cmnd/POWER3",
                    icon: "usb-port",
                    title: "USB"
                },
                power4:{
                    status: "on",
                    comm: "dc1/dc1_009cac/cmnd/POWER4",
                    icon: "usb-port",
                    title: "USB"
                },
                name: "第一个",

            },
            dc1_00dfgac:{
                energy: {
                    starttime: "2020-02-19 17:30:49",
                    total: "0.011"
                }
                power1:{
                    status: "on",
                    comm: "dc1/dc1_00dfgac/cmnd/POWER1",
                    icon: "usb-port",
                    title: "USB"
                },
                power2:{
                    status: "on",
                    comm: "dc1/dc1_00dfgac/cmnd/POWER2",
                    icon: "usb-port",
                    title: "USB"
                },
                power3:{
                    status: "on",
                    comm: "dc1/dc1_00dfgac/cmnd/POWER3",
                    icon: "usb-port",
                    title: "USB"
                },
                power4:{
                    status: "on",
                    comm: "dc1/dc1_00dfgac/cmnd/POWER4",
                    icon: "usb-port",
                    title: "USB"
                },
                name: "第二个",

            }
        },
        light:{
            light_id0001:{
                status: "on",
                icon: "usb-port",
                comm: "light/light_id0001/cmnd/POWER",
                title: "过道灯"
            },
            light_id0002:{
                status: "on",
                icon: "usb-port",
                comm: "light/light_id0002/cmnd/POWER",
                title: "过道灯"
            }
        },
        light:{
            light_id0001:{
                status: "on",
                icon: "light",
                comm: "light/light_id0001/cmnd/POWER",
                title: "过道灯"
            },
            light_id0002:{
                status: "on",
                icon: "light",
                comm: "light/light_id0002/cmnd/POWER",
                title: "厨房灯"
            }
        },
        switch{
            switch_id0001:{
                status: "on",
                icon: "usb-port",
                comm: "switch/light_id0001/cmnd/POWER",
                title: "电饭锅"
            },
            switch_id0002:{
                status: "on",
                icon: "usb-port",
                comm: "switch/light_id0002/cmnd/POWER",
                title: "水壶"
            }
        }
    }
}

卡片card

卡片是一个vue组件, 式样方面可以引用一些预先定义的全局CSS变量,来保证整体的一致性.
vue组件可以发布npm, UI Builder可以引用这些包. 用户编辑主题的时候只要引用这些卡片就可以了,不需要考虑卡片内部的逻辑.

问题

  • UI Builder在引用包的时候我遇到一些问题, 映射URL不正确. 样例里面的iron-icons我就没成功
  • 时间. 没那么多时间折腾

样例



ui.zip (6.7 KB)
flows.json (3.9 KB)

支持大佬 谢谢分享

1 个赞

感谢分享,各位大佬跟上迭代升级 :innocent:

这个好,小白精神支持,要出力的记得叫我

支持大佬 谢谢分享 :smile: