『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 205|回复: 4

[已解决] qiu'zhHA 效果图美化,如何使用GIF动图,并根据设备状态变.....

[复制链接]

1

主题

14

帖子

270

积分

中级会员

Rank: 3Rank: 3

积分
270
金钱
256
HASS币
0
发表于 2024-5-22 17:27:09 | 显示全部楼层 |阅读模式
本帖最后由 HacsXu 于 2024-5-27 09:46 编辑

各位大佬好,小弟有一个问题自己搞不定了,求助各位大佬。
   代码各种抄,想创建一个徽章,根据空调的工作模式,设定不同的gif 动图,代码写好了但是不显示,只显示 文字“关闭,制热,制冷,等”如下图。求大佬解惑。

这是我写的代码,我也不知道用什么方式实现,求大佬解惑。

       service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.quan_ping
  - type: state-badge
    entity: climate.xiaomi_zwkt
    tap_action:
      action: more-info
    hold_action:
      action: toggle
    style:
      top: 19%
      left: 39%
      width: 7.5%
      padding: 12px
      transform: rotate(0deg)
    card_mod:
      style: |
        state-badge {
          background-image: var(--icon);
          background-size: contain;
          background-repeat: no-repeat;

          &[data-state="heat"] {
            --icon: url('/local/tubiao/空调热.gif');
          }
          &[data-state="cool"] {
            --icon: url(/local/tubiao/空调冷.gif);
         }
          &[data-state="auto"] {
            --icon: url(/local/tubiao/空调冷.gif);
         }
          &[data-state="dry"] {
            --icon: url(/local/tubiao/除湿.gif);
         }
          &[data-state="fan_only"] {
            --icon: url(/local/tubiao/空调无AC.gif);
          }
          &[data-state="off"] {
            --icon: url('/local/tubiao/空调关.png');
          }
        }

这是代码上去的效果

这是代码上去的效果
回复

使用道具 举报

3

主题

35

帖子

754

积分

高级会员

Rank: 4

积分
754
金钱
719
HASS币
0
发表于 2024-5-22 18:01:15 | 显示全部楼层
照着网上教程改的,用gif可以实现动画效果

          - type: image
            entity: climate.1********0_climate
            tap_action:
              action: toggle
            style:
              top: 54.4%
              left: 79.5%
              width: 8%
              mix-blend-mode: lighten
            state_image:
              'off': /local/ui/ac_off1.png
              'on': /local/ui/ac_on.gif
回复

使用道具 举报

4

主题

44

帖子

216

积分

中级会员

Rank: 3Rank: 3

积分
216
金钱
172
HASS币
0
发表于 2024-5-22 19:16:33 | 显示全部楼层
- type: custom:button-card
    show_entity_picture: true
    entity: sensor.number_climates_on
    show_state: true
    name: 空调
    card_mod:
      style: |
        ha-card {
        margin: -2% 0px % 0px;
        }   
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.guan_bi_suo_you_kong_diao
      animation_card: |
        [[[
          const animation_speed_ms = 900;
          const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
          this.shadowRoot.getElementById("card").style.animation = animation;
          window.setTimeout(() => {
            this.shadowRoot.getElementById("card").style.animation = "none";
          }, animation_speed_ms)
        ]]]
    extra_styles: |
      @keyframes card_bounce {
        0% {
          transform: scale(1);
        }
        15% {
          transform: scale(0.9);
        }
        25% {
          transform: scale(1);
        }
        30% {
          transform: scale(0.98);
        }
        100% {
          transform: scale(1);
        }
      }
    entity_picture: |
      [[[ if (entity.state == 0) return '/local/house/空调无AC关.png';
          else return '/local/house/空调无AC.gif';
      ]]]
    styles:
      custom_fields:
        graph:
          - position: absolute
          - left: '-1px'
          - top: 70.5%
        unit:
          - position: absolute
          - left: 50%
          - top: 72%
      card:
        - border-radius: 15px
        - height: 115px
      entity_picture:
        - width: 55%


让我瞅瞅怎么个事情
回复

使用道具 举报

1

主题

14

帖子

270

积分

中级会员

Rank: 3Rank: 3

积分
270
金钱
256
HASS币
0
 楼主| 发表于 2024-5-27 09:45:09 | 显示全部楼层
coolguy 发表于 2024-5-22 18:01
照着网上教程改的,用gif可以实现动画效果

感谢  做出来了
回复

使用道具 举报

1

主题

14

帖子

270

积分

中级会员

Rank: 3Rank: 3

积分
270
金钱
256
HASS币
0
 楼主| 发表于 2024-5-27 09:46:29 | 显示全部楼层
wzx123 发表于 2024-5-22 19:16
让我瞅瞅怎么个事情

感谢  感谢大佬
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-6-16 07:40 , Processed in 3.589363 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表