本帖最后由 jsfer888 于 2022-10-28 17:49 编辑
原版教程参考 https://github.com/lukevink/hass-config-lajv
界面展示：
简单介绍：
这个界面看起来很复杂，接下来换一个角度来看一下就很好理解，实际上是分成了好几层，背景图是固定不变的，在背景图的上方是可以根据不同的状态变化的图层，比如下方图片中的白天黑夜状态，或者是开灯关灯的状态对应的图片，根据自己不同的需要做好图层的排版就可以了。
这个界面主要依赖于 [color=var(--color-accent-fg)]Picture Elements Card这个模块来制作，这个模块下可以使用各种元素来作为界面组件，比如图片、图标、状态文字等等，在这个界面里使用得最多是是图片元素，这里以图片元素为例看一下代码如何撰写：
type: picture-elements
image: /local/ui/二楼背景.png
elements:
- type: image
entity: switch.0x158d0004834633_channel_1
tap_action:
action: none
style:
pointer-events: none
top: 50%
left: 50%
width: 100%
state_image:
'off': /local/images/TJMD/off.png
'on': /local/ui/主卧大灯.png
界面中的灯光变色的方法：要将灯光的 RGB 颜色显示出来，可以使用以下 CSS 样式（在例中实体为 light.table）：
style:
filter: '${ "hue-rotate(" + (states[''light.table''].attributes.hs_color ? states[''light.table''].attributes.hs_color[0] : 0) + "deg)"}'
未完。。。
| 
发表于 2022-10-28 17:42:47
