标签：＃<标签：0x00007FC409FC8008>＃<标签：0x00007FC40AF3F270>＃<标签：0x00007FC40AF3EF28>
＃1

大家好，我在Lovelace UI仪表板上分享自己的投掷：https://github.com/tobiasn2005/home-assistant

在此页面底部提到的两个项目中受到了极大的启发。

家庭辅助

监督家庭助理19463331伟德国际在虚拟盒环境中。我的用例是一个壁挂式Microsoft Surface Pro4在全屏镀铬中显示家庭助手。19463331伟德国际

节点红色

  • 使用Node-Red检查和控制我的接收器和电视上的输入设置，并控制Broadlink遥控器，以开始不同的活动，以观看电视，Netflix，Disney+或Plex。
  • 还使用Node-Red从我们的手机上的HA Companion应用程序收集步骤计数器，并比较宣布当今获胜者的值！（见下文）

特征

带有可控灯和供暖控制的平面图

  • 设计一个不同的看法Lovelace UI用一个图片元素卡在面板模式
  • 用一个swiper卡在地面和一楼之间滑动
  • 在车道上检测到运动时会弹出的相机视图。
  • 点击废物箱，以查看收集废物的未来日期。

动画

动画

与特斯拉3型与历史统计，座椅供暖和HVAC控件完全集成：

  • 能够控制HA的座椅加热和HVAC温度。
  • 在HA中也可以看到汽车和从特斯拉应用程序中的更新。

动画

带有动画定制图标和荷兰COVID-19统计数据的设备。在页脚中，有两个按钮以获取更新和HA信息。

动画

有条件地显示基于最后一个活动设备的媒体播放器控件，例如PlayStation 4和Google Nest Mini。如果15分钟内没有任何活动，则显示上次下载的电影/剧集的海报。滑动以揭示其他活跃的媒体播放器。

媒体

  • Spotify专辑艺术，能够选择喜欢的播放列表和播放设备的能力
  • 对两个Sonos播放的其他媒体控制。Marantz SR7007接收器和客厅的三星电视。
  • 当Plex播放封面艺术的全尺寸图像时。
  • 在Plex播放期间，也显示了最后一个添加的电影和系列。

动画

侧边栏

一种图片元素卡每个视图创建动态模板。

  • 时间和日期
  • Spotife媒体播放的叠加
  • 移民图中和外部的温度
  • 圣诞节装饰时间：liticle_smile：
  • 按下时，请参阅家庭成员的存在和更多
  • 根据您白天的一项步骤应得的冠冕的能力
  • 在收集废物的一天前一天，侧栏的弹出窗口显示废物类型
  • 其他条件警报

动画

天气

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

动画

我的社区19463331伟德国际家庭助理主题

我从中汲取灵感的人和项目都是Mattias Persson和Luke Vink（非常感谢他们！）

Mattias Persson主题
https://community.home-assistant.io/t/a-different-take-on-designing-a-a-lovelace-ui/162594

卢克·维克（Luke Vink）主题
https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417

9个喜欢
＃2

哦，我的，我爱你，恨你，因为你刚刚在我可预见的将来所做的一切。

3个喜欢
＃3

这看起来很棒！

＃4

真的很令人印象深刻！您用于3D模型？（他们看起来很棒！）

＃5

嘿，谢谢。我用甜蜜的家3D来创建和绘制它们。
有关制作3D平面图的精彩文章，请检查一下

自动化事物 - 8月2日

在家庭助理中创建互动3D平面图19463331伟德国际

如何在家庭助理中创建互动3D平面图。19463331伟德国际

1喜欢
＃6

任何人都知道尝试为自己复制这样的东西的最佳方法。我看到了仓库，我过去曾尝试过与其他人一起做一些复制的意大利面，并惨败，有什么技巧吗？

＃7

意大利面条代码？

3个喜欢
＃8

因此，我试图让这张迷你天气卡看起来像您的，但是似乎没有阅读任何CSS？在有或没有CSS的情况下，气象卡看起来相同。

- 背景：错误实体：weather.hjem名称：''样式：|：主机{左：31.4％;顶部：85.5％；宽度：17％；身高：7％！重要；溢出：隐藏；身高：8.5VW;背景：无！盒子阴影：无！重要；字体大小：1VW！重要； } ha-card { background: none !important; box-shadow: none !important; flex-flow: row-reverse !important; padding: 0 !important; } .weather__info--add{ display : none !important; } .weather__info{ flex-grow: 1; min-height: 0 !important; height: 2.4vw; margin-left: 0.6vw; } .weather__icon{ margin-right:0.5% !important; margin-top: -3%; width: 2vw !important; height: 2vw !important; flex: 0 0 2vw !important; } tap_action: action: navigate navigation_path: /lovelace/4 type: 'custom:simple-weather-card'

在顶部没有CSS，底部没有CSS

图片
图片 990×337 47.7 kb

＃9

嗯，很奇怪。你使用的是什么浏览器？这是我从Luke Vinks Repo中复制的东西之一，只是为我工作。

＃10

我目前正在iPad上。尝试了Safari，Chrome和Edge。
我已经安装了简单的气象卡和卡片。我缺少其他需要安装的东西吗？文件中还有其他与此代码一起使用的地方吗？

位置样式似乎可以正常工作，因为当我更改它们时，它会移动 - 但外观没有任何事情。