#1

Hi all! New to this community, I decided to attempt something that was bugging me with 3D floorplans - My hue bulbs have color, and the floorplans I saw didn’t seem to do this dynamically. So here it is! My apporach to a floorplan focused minimal UI. This is a work in progress, I hope to add alot more custom gestures etc soon.

查看整个UI的视频：https://youtu.be/kcfzc1mxp_a

EZGIF-7-2305778199FD
EZGIF-7-2305778199FD 800×502 2.47 MB

lajv-ha-其他
lajv-ha-其他 800×502 1.76 MB

特征

方法和图片元素样式

This approach is heavily based on the图片元素卡for each view, and does not work in a traditional “Card” based way. Most cards include a heavy amount of styling and positioning. Some of this styling overrides the custom cards to use查看宽度因此，它们的字体，宽度和高度根据显示屏的宽度缩放，以便我可以在任何分辨率上使用界面。

I first designed my whole UI in像素机这样我就可以导出按钮图像和小米平面图覆盖图像。

映像透明。png在state_image图片元素上使用，以隐藏元素，尽管在我意识到我可以有条件地显示元素之前使用了元素:slight_smile:- 将尽快更新以清理。

侧边栏

Note, the sidebar is repeated across every view in the lovelace.yaml file and includes buttons for the views.

  • Control Rooms: Tap a room to turn on or off all lights, hold tap to show custom controls.
  • Control Lights: Tap a light icon to turn on or off individual lights, hold tap to show custom controls.
  • 清理: Direct control of Xiaomi Mi robot and preset zones for room based cleanup
  • All Devices: Show all devices in a familiar homekit UI, why not?
  • 媒体：按钮显示当前播放媒体，如果播放，查看显示有关plex或Spotify的相关视图。
  • 天气: Shows weather forecast and predicted rain from Buienradar.

我家中的硬件

  • Xgimi H1 PROJECTOR
  • Sound system (controlled by an IR Blaster)
  • Philips Hue Bulbs
  • Osram花园杆（用于屋顶，户外）
  • 小米Mi机器人
  • 飞利浦运动传感器

Individual hue & brightness lights

映射光线Info1.png
映射光线Info1.png 3000×1741

带有config-template卡的CSS的地图实体：
这种方法依赖于config-template卡。图片元素卡包裹在config-template卡中。使用的所有Entites都在配置卡上列出，因此可以将其传递给CSS中使用的模板。要了解原因，请检查：https://github.com/iantrich/config-template-card

渲染单个灯：
要在彼此上覆盖多个灯光，解决方案实际上很简单。您为每个单独的光线渲染图像，并使用CSS属性过滤器混合模式：亮光。这将确保仅显示图像的“光”部分，并将其融合到顶部的任何图像。

色相和不透明度
要将您的一个光图像映射到灯泡的实际实时RGB颜色，您可以使用以下CSS模板样式，该样式将调整色调旋转到灯泡的色调（在这种情况下为Light.Table）：

样式：filter：'$ {“ hue-rotate（” +（states ['''light.table'']。属性.hs_color？states ['''leight.table']。attributes.hs_color [0]：0）+“ deg）”}'

或者，包括饱和度（我发现它很糟糕）：

样式：filter：'$ {“ hue-rotate（” +（states ['''light.table'']。属性.hs_color？states ['''leight.table']。attributes.hs_color [0]：0）+“ deg）饱和（” +（状态[''light.table']。'

要将不透明度映射到实体的亮度，请使用此CSS模板：

样式：不透明：'$ {state [''light.table'']。属性.brightness / 255}'

清理

This is a custom screen made up of picture-elements that interact with the小米机器人真空分子组件。输入文本用于确定真空当前状态（清洁，返回家园等），并用于有条件地更改图片元素。

屏幕清洁
屏幕清洁 1918×1203

天气

我使用Buien Radar（荷兰服务）建造了一张定制卡，以在接下来的2小时内显示预计的降雨。
有关此卡的更多信息，请查看这个存储库

Screen-Weather-Rain.png
Screen-Weather-Rain.png 1915×1202

完整配置：

其他资源：

很大程度上有必要马蒂亚斯·珀森（Mattias Persson）

有关制作3D平面图的精彩文章，请检查一下

107喜欢
Lovelace：自定义侧栏卡
带有色调和饱和度的3D平面图映射到单个，混合RGB光实体
A different take on designing a Lovelace UI
3D Floorplan using lovelace picture-elements card
我在lovelace UI上的投掷
Lovelace：自定义侧栏卡
Custom Lovelace Card - Homekit style card
A different take on designing a Lovelace UI
#2

Did you spend a lot of time designing the actual floorplan images? Really interested in this kind of set up but not sure if it should be my prio 1 or 100:smiley:

1喜欢
#3

一旦您在类似的地方设置了平面图甜蜜的家3D, its just a matter of turning each light on, render image, turn another light on, render an image etc. This takes time, but for the computer, not you ;).

一旦有每个灯的图像，您基本上就可以将另一个图像放在另一个图像上：
- 光1 ---------
- 光2 ---------
- 基本图像 -

为了使所有图像混合在一起，您可以通过这种简单的CSS样式对其进行修改：

混合模式：亮；

所有这一切中最长的部分实际上只是在3D程序（例如Sweethome 3D）中制作您的房屋，它可以像您想要的那样简单或复杂。Sweethome 3D使这个非常简单。就像模拟人生:slight_smile:

4个喜欢
#4

Love this design. I’ve been messing arround with it. Love it so far, but still need to do a lot to fit all my needs. Thanks for the config! Very much appreciated.

1喜欢
#5

Hi. Love your UI design!

I have extremely limited experience with programming (like maybe 1 year of C++ way back in high school and a bit of html modifications) so I’ve been slowly breaking down your code, seeing what they are linked to and modifying it to suit my house.

One thing I can’t figure out is the code in your ui-lovelace.yaml file under individual light overlays where you call up the entities “light.living_room_lights”, “light.stairs_lights” and so on which has the hold actions call-service and brings out the browser_mod.popup. I know that it creates the pop up for the brightness/color template, but I can’t figure out what it controls exactly (I can’t find what it’s referencing from or if it is to be referenced from something else as I can’t find any other mentions of these specific names anywhere else)

我不确定的另一件事是plex不玩耍，显示Spotify条件。我不打算使用plex，所以我总是会显示Spotify。我该对此代码的究竟可以做什么？

  • conditions:
    - entity: media_player.plex_projector
    状态：不可用
    元素：
    - client_id: 90cfab5d45f2436a9399c99d5fe23443
    style:
    left: 81%
    顶部：50％
    宽度：27％
    类型：“自定义：Spotify卡”
    类型：条件

I may be in over my head starting with this, but the it seems like its worth the effort.

非常感谢！

2个喜欢
#6

问题。我如何将运动传感器图标隐藏在我的lovelace中？我只想在检测到某些内容时仅显示运动图标。

1喜欢
#7

This is insanely nice. I need to try to copy this and got it set up. This is exactly what I want.
您是为某个平板电脑还是触摸显示器设计的？

1喜欢
#8

Wrap the icon element inside a conditional card! Check this out:

#9

I designed it for 2560x1600 or 1280x800, however, you could easily adjust all of this for 1920x1080 with the UI source files I just included in the repo. (Right now the source is pixelmator).

Side note: because I used VW for all styles and font sizes, it should dynamically scale it’s width to any resolution - only the height need be adjusted for another ratio.

1喜欢
＃10

嘿，耶尔斯！很棒的是，您正在拍摄这件事！这是学习一些基本脚本的好方法。

很抱歉，没有记录超级记录，这里有很多重复的事情。

如果您指的是“房间控制”视图中的元素，那么基本上这些是透明的叠加层，它们充当按钮，因此当您点击房间时，您不会点击整个房屋。因为所有的光图像相互重叠，所以我必须创建单独的“按钮”来实际控制它们。

第二件事是包裹在有条件的卡上的卡片，如果愿意的话。星际双关语的意图。

如果您删除此部分：

条件： - 实体：Media_player.plex_projector状态：不可用的元素：

和“类型：条件”行，然后将剩下的剩下的缩进（返回一个选项卡）倒置，它应该像一张始终显示的卡一样工作：

-client_id：90CFAB5D45F2436A93999999D5FE23443样式：左：81％顶部：50％宽度：27％类型：'custom：'custom：spotify-card'

我将更新我的所有图像，以解释这一“无形”层。

希望这可以帮助！

1喜欢
＃11

@lukevinkthank you so much for your time today.

他帮助我解决了我遇到的问题。图片元素卡具有主要的背景图像。该图像确定整个框。因此，如果图像是正方形的，那么您的UI也将是正方形。

我的整个UI都是基于正方形的，有一个大的滚动条，图像已经超出了位置。现在都工作得很好。

再次感谢您的宝贵时间，卢克！

1喜欢
＃13

Great! Did you do all combinations of all lights on/off, or do you only need to have one on and one off image for each light?

1喜欢
＃14

另一个很棒的问题，这在手机上看起来如何？它可以使用吗？您有屏幕截图吗？（顺便说一句看起来很棒:smiley:)

＃15

Hi Juice,

不，在手机上并不是真正可用的。当我侧面转动它时，也许有点…

我正在将其安装在墙上的21英寸触摸屏监视器上，并且在移动设备上使用自定义标题附加组件隐藏本节，并显示了另一个是移动友好的布局。因此，当我使用移动设备去HA时，我会自动看到与从计算机浏览的仪表板不同的仪表板。:slight_smile:

要喜欢布局，仍然在我这边进行。在我忙碌的日程（2个孩子和一个妻子）之间，我需要花一些时间来完成这项工作。通常在晚上每个人都睡着了，我几乎没有进步，因为我通常自己在计算机后面睡着了。啊！：喜悦：：喜悦：

@lukevink我有这个奇怪的事情。时间不会刷新。因此，基本上。当我加载页面时，当前时间显示。当我等待几分钟时，时间与加载页面时保持相同。

When I press an action card to turn lights on or off, etc. The time also refreshes and shows the actual current time lol. So was thinking, maybe I should have some auto refresh of the page built in. Every 20 sec a new refresh. But it’s a little weird and should just work. Maybe you or anyone else has some brilliant idea’s I could test:sweat_smile:

2个喜欢
＃16

嘿，所以您可以拥有整个房屋的一个基本图像，没有灯，然后是一张带有一盏灯的整个房子的图像，然后是另一个灯。

您实际上并不需要单独的房间，您可以将所有内容重叠。（由于混合模式）

1喜欢
＃17

对此有很多表演学习！很快就会通过一些性能调整和其他调整更新配置。

1喜欢
＃18

那真的很奇怪！要研究这个。我的似乎可以正常工作，并且更新还不错。

＃19

另一个奇怪的一个，不仅是时间，而且还添加了按钮（锁定的按钮）。

Yesterday I entered, and after 2 minutes the lock icon was showing that the door was still open. So i went to check, nope door is closed. I checked the sensor state, it showed closed. The dashboard showed open.

当我按下仪表板上的任何随机灯时，整个仪表板似乎都在刷新。时间更新，锁图标从开放到关闭。真的很奇怪。

I hope we can solve this in a timely manner. WAF is dropping lol, and need to be going to migrate back to old dashboard if this is not solved. Darn.

＃22

@lukevinkgood news. I’ve managed to “fix” it. At the end of the config there is an entity list. I only had the light bulbs there and those worked fine on auto updating. So I’ve added all sensors and binary sensors to that list too, which forces HA to check and update the entity when the state changes. So everything is fixed. Time, date, locks everything update on the fly.

＃23

I’ve got this all working perfectly except for the dynamic style attributes. They seem to not be taking for some reason. Can’t tell what I’m doing wrong here.

opacity: ${states['light.office'].attributes['brightness']}

If I try the same attribute using a ninja template I get a good value. Using the above, no opacity attribute is set at all. If I hard code 25%, it works.