本帖最后由 DDDear 于 2023-7-3 17:29 编辑
感觉挺好看的，照着做了一个，参考template[size=15.008px]的帖子:
https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/4877
自己找了些天气gif, 用的彩云天气的实体和图标svg。
我的平板分辨率太低，所有稍微修改了一些地方，语法不是很会，照葫芦画瓢用的都是笨办法。
[size=15.008px]template：
#################################################
# #
# widget_weather #
# #
#################################################
widget_weather:
template:
- base
variables:
# temp_min: ''
# temp_max: ''
# humidity: ''
# current_weather: ''
is_bellow_horrizon: >
[[[
if (states['sun.sun'].state == 'below_horizon') {
return true;
}
]]]
aspect_ratio: 1/1
show_icon: false
show_entity_picture: true
show_name: true
show_state: true
show_label: true
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: |
"n"
"temp"
"i"
"s"
"l"
- grid-template-columns: 1fr
- grid-template-rows: min-content repeat(2, 1fr) repeat(2, min-content)
- gap: 0%
- overflow: visible
card:
- padding: 11.5% 10.5% 10.5% 11.5%
- color: rgba(255, 255, 255, 0.6)
- 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)`
: `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)`;
]]]
- background-size: cover
state:
- text-transform: uppercase
- margin-top: 5px
- line-height: 100%
name:
- place-self: start
# - text-transform: uppercase
- font-weight: 500
- font-family: Futura
- letter-spacing: 0.1vw
- margin-top: -7%
img_cell:
- justify-content: start
- overflow: visible
icon:
- width: 35%
label:
- place-self: start
- margin-left: -5px
- margin-top: 3%
- margin-bottom: -7%
custom_fields:
temp:
- place-self: start
- margin-top: 1px
- font-family: Futura
- color: rgba(240, 255, 255, 0.8)
state_display: >
[[[
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 "大风";
]]]
label: >
[[[
return `
<ha-icon icon="mdi:chevron-up" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon>
<span>${entity.attributes.forecast[0].temperature}℃</span>
<ha-icon icon="mdi:chevron-down" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon>
<span>${entity.attributes.forecast[0].templow}℃</span>
`
]]]
custom_fields:
temp: >
[[[ return entity.attributes.temperature + "℃"; ]]]
entity_picture: >
[[[
if (entity.attributes.skycon == 'CLEAR_DAY')
return "/local/svg/weather/CLEAR_DAY.svg";
else if (entity.attributes.skycon == 'CLEAR_NIGHT')
return "/local/svg/weather/CLEAR_NIGHT.svg";
else if (entity.attributes.skycon == 'CLOUDY')
return "/local/svg/weather/CLOUDY.svg";
else if (entity.attributes.skycon == 'DUST')
return "/local/svg/weather/DUST.svg";
else if (entity.attributes.skycon == 'FOG')
return "/local/svg/weather/FOG.svg";
else if (entity.attributes.skycon == 'HEAVY_HAZE')
return "/local/svg/weather/HEAVY_HAZE.svg";
else if (entity.attributes.skycon == 'HEAVY_RAIN')
return "/local/svg/weather/HEAVY_RAIN.svg";
else if (entity.attributes.skycon == 'HEAVY_SNOW')
return "/local/svg/weather/HEAVY_SNOW.svg";
else if (entity.attributes.skycon == 'LIGHT_HAZE')
return "/local/svg/weather/LIGHT_HAZE.svg";
else if (entity.attributes.skycon == 'LIGHT_RAIN')
return "/local/svg/weather/LIGHT_RAIN.svg";
else if (entity.attributes.skycon == 'LIGHT_SNOW')
return "/local/svg/weather/LIGHT_SNOW.svg";
else if (entity.attributes.skycon == 'MODERATE_HAZE')
return "/local/svg/weather/MODERATE_HAZE.svg";
else if (entity.attributes.skycon == 'MODERATE_RAIN')
return "/local/svg/weather/MODERATE_RAIN.svg";
else if (entity.attributes.skycon == 'MODERATE_SNOW')
return "/local/svg/weather/MODERATE_SNOW.svg";
else if (entity.attributes.skycon == 'PARTLY_CLOUDY_DAY')
return "/local/svg/weather/PARTLY_CLOUDY_DAY.svg";
else if (entity.attributes.skycon == 'PARTLY_CLOUDY_NIGHT')
return "/local/svg/weather/PARTLY_CLOUDY_NIGHT.svg";
else if (entity.attributes.skycon == 'SAND')
return "/local/svg/weather/SAND.svg";
else if (entity.attributes.skycon == 'STORM_RAIN')
return "/local/svg/weather/STORM_RAIN.svg";
else if (entity.attributes.skycon == 'STORM_SNOW')
return "/local/svg/weather/STORM_SNOW.svg";
else if (entity.attributes.skycon == 'WIND')
return "/local/svg/weather/WIND.svg";
]]]
extra_styles: |
[[[
return `
#name {
font-size: 0.9vw;
}
#temp {
font-size: 1.4vw;
}
#state {
font-size: 0.7vw;
}
#label {
font-size: 0.6vw;
}
@media screen and (max-width: 1100px) {
#name {
font-size: 1.3vw;
}
#temp {
font-size: 2vw;
}
#state {
font-size: 1.2vw;
}
#label {
font-size: 1.2vw;
}
@media screen and (max-width: 800px) {
#name {
font-size: 3vw;
margin-top: -5%;
}
#temp {
font-size: 6vw;
}
#state {
font-size: 2.7vw;
}
#icon {
display: none !important;
}
#label {
font-size: 1.9vw;
font-weight: 500 !important;
margin-top: 5%;
margin-bottom: 0%;
margin-left: -4%;
}
}
`
]]]
ui-lovelace：
- type: custom:button-card
entity: weather.wo_de_jia_2
name: 我的家
template:
- widget_weather
gif.zip
(4.25 MB, 下载次数: 67)
gif1.zip
(4.38 MB, 下载次数: 54)
gif2.zip
(4.27 MB, 下载次数: 51)
svg.zip
(32.36 KB, 下载次数: 41)
| 
发表于 2023-7-3 17:26:44
楼主
