需求
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)
