仿ios16 蘑菇灯卡片 mushroom light card

relliky · 发表于 2023-9-12 08:18:07

本帖最后由 relliky 于 2023-12-11 09:31 编辑

自从上次出仿ios15以后，https://bbs.hassbian.com/thread-17935-1-1.html，拖更了一年，去外网搜了好久都没搜到，看来只能自己动手。。。。一直对于card_mod这种要懂一定的css的很畏惧，但在各位大神的帮助下终于上手了。现在磨磨唧唧挤出来一个仿ios16的灯的卡片。
视频

原ios 16 开关

HA 灯1，灯2 关（和ios16一致）

灯1 开 - 固定颜色（和ios16一致）

后面都是我自己大致设计的小改动，ios里面没有一致的：
灯2开色温模式 - 固定颜色（以免冷色时显示白色）右边色温和彩色按键变得更明显

灯2开彩色模式 - 保持和mushroom一致

卡片代码

游客，如果您要查看本帖隐藏内容请回复

TODO：
1. [DONE] ios16 的图标在圆里面更大一点，看着好看一些，调下mushroom icon的大小应该很容易
2. [DONE] HA有夜间模式，这个还没有。具体颜色透明度和深浅还可以再调整，虽然可以和ios16完全一致，但太白了对手机在夜间使用不是很友好，所以暂时用的透明度高的设置。
3. ios16 的状态百分比字体更细，看着好看一些，调下mushroom 状态的字体可能可以实现，但还是得不停地试是哪个字体了
4. ios16 有开灯动画，看看有没有办法弄一个，工作量不明。有懂这方面的大神请点意见。

-------------------------EDIT 12/09/23---------------
[DONE] 1. ios16 的图标在圆里面更大一点，看着好看一些，调下mushroom icon的大小应该很容易
加这段代码在最后完成



    ha-card > mushroom-card > mushroom-state-item > mushroom-shape-icon >
    ha-state-icon {
    --mdc-icon-size: 0.75em;}

大小现在和ios16一样了
Screenshot 2023-09-12 at 21.52.15.png

-------------------------EDIT 12/09/23---------------

[DONE] 2. HA有夜间模式，这个还没有。具体颜色透明度和深浅还可以再调整，虽然可以和ios16完全一致，但太白了对手机在夜间使用不是很友好，所以暂时用的透明度高的设置。

支持夜间模式，将所有以下代码替换


if states(config.entity) in ['on']

替换成


if states(config.entity) in ['on']  and  states('sun.sun') != 'below_horizon'

现在关掉灯后在晚上不反白了，不会很刺眼了。

Screenshot 2023-09-12 at 23.27.02.png

Ari · 发表于 2023-9-12 08:32:40

厉害，感谢分享

fay000fay · 发表于 2023-9-12 08:42:28

像你这样的人！应该多几个在论坛，哈哈！

zy19921108 · 发表于 2023-9-12 11:17:20

哈哈，让我看看

dest16 · 发表于 2023-9-12 17:15:23

开灯动画用svg动画实现的，可以参考下https://github.com/matt8707/hass-config

relliky · 发表于 2023-9-12 17:42:40

dest16 发表于 2023-9-12 17:15
开灯动画用svg动画实现的，可以参考下https://github.com/matt8707/hass-config

能详细说一下吗？我看不出来这里面哪里调用了动画
https://github.com/matt8707/hass ... emplates/light.yaml

dest16 · 发表于 2023-9-12 19:57:54

relliky 发表于 2023-9-12 17:42
能详细说一下吗？我看不出来这里面哪里调用了动画
https://github.com/matt8707/hass ... emplates/light ...

这个文件里存的template图标 https://github.com/matt8707/hass-config/blob/master/button_card_templates/icons.yaml
例如下面这段

icon_fan2:
  styles:
    custom_fields:
      icon:
        - width: 75%
        - margin-left: -3%
  custom_fields:
    icon: >
      [[[
        let path = `
          <circle cx="25" cy="25" r="6.6"/>
          <path d="M31.9 30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5 4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/>
        `,
        style = `
          <svg viewBox="0 0 50 50">
            <style>
              @keyframes rotate {
                0% {
                  visibility: visible;
                  transform: rotate(0deg) translateZ(0);
                }
                100% {
                  transform: rotate(1080deg) translateZ(0);
                }
              }
              .start {
                animation: rotate 2.8s ease-in;
                transform-origin: center;
                fill: #5daeea;
                visibility: hidden;
                will-change: transform;
              }
              .on {
                animation: rotate 1.8s linear infinite;
                transform-origin: center;
                fill: #5daeea;
                animation-delay: 2.8s;
                visibility: hidden;
                will-change: transform;
              }
              .end {
                animation: rotate 2.8s;
                transform-origin: center;
                fill: #9ca2a5;
                animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
                will-change: transform;
              }
              .start_timeout {
                animation: rotate 1.8s linear infinite;
                transform-origin: center;
                fill: #5daeea;
                visibility: hidden;
                will-change: transform;
              }
              .end_timeout {
                fill: #9ca2a5;
              }
            </style>
        `;
        if (variables.state_on && variables.timeout < 2000) {
          return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`;
        }
        if (variables.state === 'off' && variables.timeout < 2000) {
          return `${style}<g class="end">${path}</g></svg>`;
        }
        if (variables.state_on && variables.timeout > 2000) {
          return `${style}<g class="start_timeout">${path}</g></svg>`;
        } else {
          return `${style}<g class="end_timeout">${path}</g></svg>`;
        }
      ]]]

relliky · 发表于 2023-9-12 21:26:58

dest16 发表于 2023-9-12 19:57
这个文件里存的template图标 https://github.com/matt8707/hass-config/blob/master/button_card_templat ...

原来如此。受教了，感谢。

我去研究一下它是怎么传到card_mod的。。。感觉做到这一步是真的学了一门css语言

zdmboot · 发表于 2023-9-13 00:06:31

哇，界面做得很漂亮啊，太赞了....

我是大笨蛋 · 发表于 2023-9-14 19:13:45

学习一下，感谢分享

		自动登录	找回密码
密码			立即注册

[基础教程] 仿ios16 蘑菇灯卡片 mushroom light card

评分