本帖最后由 polisher 于 2024-3-2 19:26 编辑
相信一个天气、日期、日历卡片是大多数友友所需的标配，但限于手机的屏幕大小，如何在一个卡片展现更多的信息是咱们最关心的事情。
每个人心中都有一个哈姆雷特，个性化的需求迫使我们不得不自力更生，于是button-card这个东东提供给我们展现想象力的舞台。
工作日
休息日
以上是我自制卡片的两种效果，分别为工作日效果和休息日效果。作为抛砖引玉提供给各位友友参考。以下为主要思路和部分代码：
1. 天气图片
盗用彩云天气卡片插件的SVG图片，有动画和昼夜效果，看起来比较炫酷。
type: custom:button-card
color_type: icon
entity: weather.wo_de_jia
entity_picture: >
[[[ var temp=states['weather.wo_de_jia'].attributes.skycon; return
'/local/community/lovelace-colorfulclouds-weather-card/icons/animated/'+temp+'.svg';
]]]
2. 天气信息
用的是彩云天气，可在HACS里自行下载，当然也可以用其他天气插件。
type: custom:button-card
show_name: true
name: >
[[[ const skycon2cn = {
"CLEAR_DAY":"晴",
"CLEAR_NIGHT":"晴",
"PARTLY_CLOUDY_DAY":"多云",
"PARTLY_CLOUDY_NIGHT":"多云",
"CLOUDY":"阴",
"LIGHT_HAZE":"轻度雾霾",
"MODERATE_HAZE":"中度雾霾",
"HEAVY_HAZE":"重度雾霾",
"LIGHT_RAIN":"小雨",
"MODERATE_RAIN":"中雨",
"HEAVY_RAIN":"大雨",
"STORM_RAIN":"暴雨",
"FOG":"雾",
"LIGHT_SNOW":"小雪",
"MODERATE_SNOW":"中雪",
"HEAVY_SNOW":"大雪",
"STORM_SNOW":"暴雪",
"DUST":"浮尘",
"SAND":"沙尘",
"WIND":"大风"}
var temp=states['weather.wo_de_jia'].attributes.skycon; return
skycon2cn[temp]; ]]]
3. 农历
取自chineseholiday提供的信息，可自行在论坛里搜索下载
type: custom:button-card
show_name: true
name: |
[[[
return states["sensor.holiday"].attributes.农历 ;
]]]
4. 卡片背景
这里通过chineseholiday的状态设置卡片的背景图片，以便区分工作日和休息日。图片可以根据爱好自行设定，如果你愿意，甚至还可以搞成动画，反正CSS支持。
styles:
card:
- background-image: |
[[[ if (states["sensor.holiday"].state!="工作日") return 'url("/local/假日3.png");]]]
| 
发表于 2024-3-2 19:20:44
