手搓动态天气卡片

rose骑士

RT，在浏览论坛的时候看到了DDDear大佬的动态天气卡片帖子：
https://bbs.hassbian.com/thread-21837-1-1.html
先放大佬的效果：如果需要请移步查看

自己整了半天也没弄明白，但是又很喜欢这个界面，DDDear大佬解答了好几次愣是没搞对，于是就开始用button card手搓动态天气代码，下面先放我自己做的结果，不是很美观，抛砖引玉罢了
下面是我自己做的结果，文字没调，温度上下限值没有展示，只有动态背景、动态图标和一些信息。
也许看的不是很明显，因为论坛图片大小的限制，我只录了30帧，天气图标和背景都是动态的。

下面我就分享一下我自己的卡片做法和相关的代码
1.首先是素材文件，我这里不上传素材，我的素材也是从DDDear大佬那里下载的，原贴地址：https://bbs.hassbian.com/thread-21837-1-1.html 请大家移步大佬帖子回复后下载素材
2.将素材放置在相应的文件夹中，由于我手搓代码的时候参考了很多大佬的源代码，因此我也没有特别整理素材路径。
将素材放到以下路径中：
图标素材(svg)：www/svg/weather/
天气背景素材：www/gif/weather/
这里特别说明：图标素材来自于彩云天气，背景动图素材是DDDear大佬自己从其他地方找的，因此我不会上传素材，请大家移步大佬的帖子回复后下载。
3.添加彩云天气集成，这个有帖子说的很详细，https://bbs.hassbian.com/thread-10769-1-1.html，一步一步来就可以
添加了集成后就有天气实体了
4.添加卡片-手动，然后把我的代码复制进去，对，就是这么简单粗暴。
5.将所有的entity(实体)冒号后面的weather.yang_quan改为自己的天气实体
下面是动态天气在我的界面中的效果：（请无视那几个转圈，电器离线了，线盒零线被刮家师傅贴墙里了，用了特殊方法模拟零线，最近不能用了）


初学者，界面不是很好看，还是得和广大网友多多交流~嘿嘿~
6.根据自己的界面情况调整相关参数
比如图片大小之类的，甚至多加一些显示数据，button card如何调整参数 消逝 大佬的帖子有：https://bbs.hassbian.com/thread-25964-1-1.html 对照修改即可
另外：我的界面也是看着消逝大佬的教程一步一步做的
最后，多折腾，多下手写，多问deepseek，总能突破
话说在做完这个卡片之前我只会用button card做弹出
最后把代码奉上

type: custom:button-card
show_icon: false
show_name: false
show_state: false
show_label: false
entity: weather.yang_quan
is_bellow_horrizon: |
  [[[
    if (states['sun.sun'].state == 'below_horizon') {
        return true;
    }
  ]]]
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: 近期天气
      content:
        type: custom:weather-card
        entity: weather.yang_quan
        show_houer: true
        show_daily: true
        show_realtime: true
        icon: /hacsfiles/lovelace-colorfulclouds-weather-card/icons/animated/
        secondary_info_attribute: wind_speed
styles:
  grid:
    - grid-template-areas: |
        "a b b b"
        "a c d e"
    - grid-template-columns: 1fr 1fr 1fr 1fr
    - grid-template-rows: 50% 50%
  card:
    - background: |
        [[[
          let weather = entity.attributes.skycon;
            return variables.is_bellow_horrizon
              ? `linear-gradient(to top, rgba(53,59,83,0.8) 0%, rgba(0,0,0,0.4) 100%) 100% / cover, url(/local/gif/weather/${weather}.gif) center`
              : `linear-gradient(to top, rgba(255, 255, 255, 0.3) 0%, rgba(11,11,11,0.3) 100%) 100% / cover, url(/local/gif/weather/${weather}.gif) center`;
        ]]]
    - background-size: 100%
    - max-width: 100vw
    - height: 12vh
custom_fields:
  a:
    card:
      type: custom:button-card
      show_entity_picture: ture
      show_name: false
      show_icon: false
      show_state: false
      show_label: false
      entity: weather.yang_quan
      entity_picture: |
        [[[
          let weather = entity.attributes.skycon;
            return `/local/svg/weather/${weather}.svg`
        ]]]
      styles:
        card:
          - box-shadow: none
          - border: none
          - outline: none
          - background: transparent
          - height: 12vh
          - max-width: 100vw
          - padding: 0px
        entity_picture:
          - width: 90px
          - height: 90px
          - left: 0px
  b:
    card:
      type: custom:button-card
      show_icon: false
      show_name: true
      show_state: false
      show_label: true
      entity: weather.yang_quan
      name: "[[[return entity.attributes.forecast_hourly]]]"
      styles:
        card:
          - box-shadow: none
          - border: none
          - outline: none
          - background: transparent
          - height: 6vh
          - max-width: 100vw
        name:
          - background: transparent
          - border: transparent
          - color: white
          - padding: 0px
          - border-radius: null
          - justify-self: center
          - margin-left: 0px
          - align-self: start
          - margin-top: "-5px"
          - font-size: 14px
          - font-weight: 500
          - font-family: 微软雅黑
  c:
    card:
      type: custom:button-card
      show_icon: false
      show_name: true
      show_state: false
      show_label: true
      entity: weather.yang_quan
      name: 阳泉
      label: |
        [[[
          if (entity.attributes.skycon == 'CLEAR_DAY')
            return "晴";
          else if (entity.attributes.skycon == 'CLEAR_NIGHT')
            return "晴";         
          else if (entity.attributes.skycon == 'CLOUDY')
            return "阴";   
          else if (entity.attributes.skycon == 'DUST') 
            return "浮尘";   
          else if (entity.attributes.skycon == 'FOG')
            return "雾";   
          else if (entity.attributes.skycon == 'HEAVY_HAZE')
            return "重度雾霾";   
          else if (entity.attributes.skycon == 'HEAVY_RAIN')
            return "大雨";   
          else if (entity.attributes.skycon == 'HEAVY_SNOW')
            return "大雪";   
          else if (entity.attributes.skycon == 'LIGHT_HAZE')
            return "轻度雾霾";
          else if (entity.attributes.skycon == 'LIGHT_RAIN')
            return "小雨";   
          else if (entity.attributes.skycon == 'LIGHT_SNOW')
            return "小雪";
          else if (entity.attributes.skycon == 'MODERATE_HAZE')
            return "中度雾霾";   
          else if (entity.attributes.skycon == 'MODERATE_RAIN')
            return "中雨"; 
          else if (entity.attributes.skycon == 'MODERATE_SNOW')
            return "中雪";   
          else if (entity.attributes.skycon == 'PARTLY_CLOUDY_DAY')
            return "多云";  
          else if (entity.attributes.skycon == 'PARTLY_CLOUDY_NIGHT')
            return "多云"; 
          else if (entity.attributes.skycon == 'SAND')
            return "沙尘";   
          else if (entity.attributes.skycon == 'STORM_RAIN')
            return "暴雨";   
          else if (entity.attributes.skycon == 'STORM_SNOW')
            return "暴雪";   
          else if (entity.attributes.skycon == 'WIND')
            return "大风";   
        ]]]
      styles:
        card:
          - box-shadow: none
          - border: none
          - outline: none
          - background: transparent
          - height: 6vh
          - max-width: 22vw
        name:
          - background: transparent
          - border: transparent
          - color: white
          - padding: 0px
          - border-radius: null
          - justify-self: center
          - margin-left: 20px
          - align-self: end
          - margin-top: 0px
          - font-size: 14px
          - font-weight: 500
          - font-family: 微软雅黑
        label:
          - background: transparent
          - border: transparent
          - color: white
          - padding: 0px
          - border-radius: null
          - justify-self: center
          - margin-left: 2px
          - align-self: end
          - margin-top: 0
          - font-size: 14px
          - font-weight: 500
          - font-family: 微软雅黑
        grid:
          - grid-template-areas: |
              "n l"
          - grid-template-columns: min-content min-content
  d:
    card:
      type: custom:button-card
      show_icon: false
      show_name: true
      show_state: false
      show_label: true
      entity: weather.yang_quan
      name: 温度
      label: |
        [[[ return entity.attributes.temperature + "℃"; ]]]
      styles:
        card:
          - box-shadow: none
          - border: none
          - outline: none
          - background: transparent
          - height: 6vh
          - max-width: 22vw
        name:
          - background: transparent
          - border: transparent
          - color: white
          - padding: 0px
          - border-radius: null
          - justify-self: center
          - margin-left: 0px
          - align-self: end
          - margin-top: 0px
          - font-size: 14px
          - font-weight: 500
          - font-family: 微软雅黑
        label:
          - background: transparent
          - border: transparent
          - color: white
          - padding: 0px
          - border-radius: null
          - justify-self: center
          - margin-left: 2px
          - align-self: end
          - margin-top: 0%
          - font-size: 14px
          - font-weight: 500
          - font-family: 微软雅黑
        grid:
          - grid-template-areas: |
              "n l"
          - grid-template-columns: min-content min-content
  e:
    card:
      type: custom:button-card
      show_icon: false
      show_name: true
      show_state: false
      show_label: true
      entity: weather.yang_quan
      name: 湿度
      label: |
        [[[ return entity.attributes.humidity + "%"; ]]]
      styles:
        card:
          - box-shadow: none
          - border: none
          - outline: none
          - background: transparent
          - height: 6vh
          - max-width: 22vw
        name:
          - background: transparent
          - border: transparent
          - color: white
          - padding: 0px
          - border-radius: null
          - justify-self: center
          - margin-left: 0px
          - align-self: end
          - margin-top: 0px
          - font-size: 14px
          - font-weight: 500
          - font-family: 微软雅黑
        label:
          - background: transparent
          - border: transparent
          - color: white
          - padding: 0px
          - border-radius: null
          - justify-self: center
          - margin-left: 2px
          - align-self: end
          - margin-top: 0%
          - font-size: 14px
          - font-weight: 500
          - font-family: 微软雅黑
        grid:
          - grid-template-areas: |
              "n l"
          - grid-template-columns: min-content min-content

复制代码

caliban

啊，抱歉，，，回复错了，，，我用的是彩云天气，，，