楼主
|
发表于 2024-8-9 21:44:27
|
显示全部楼层
本帖最后由 消逝 于 2024-8-9 22:33 编辑
10、净化器、加湿器、空调、浴霸、厨房设备、其他等设备
entity: sensor.fullroom_fan_num 实体这里默认是全屋设备数量的实体,和右侧状态栏使用的是同一实体,目的是点击将跳转对应弹出菜单
也就是,客厅的净化器图标、主卧的净化器图标、右侧状态栏全屋净化器,这3个点击弹出的是同一弹出菜单
variables:
entity: fan.jinghuaqi_keting,这里是当前净化器实体,用于显示状态
entity_picture: 显示variables.entity内实体的状态图标
厨房设备没有对应关联弹出菜单(不超做厨房设备,没用且危险)
- type: custom:button-card
entity: sensor.fullroom_fan_num
variables:
entity: fan.jinghuaqi_keting
show_name: false
show_entity_picture: true
tap_action:
action: more-info
entity_picture: |
[[[ var state = states[variables.entity].state;
return '/local/UI/净化器/净化器'+state+'.svg']]]
styles:
entity_picture:
- width: 100%
card:
- width: 25px
style:
top: 536px
left: 606px
复制代码
11、时间、日期、生日、节假日
时间、日期、星期、节气、时辰,是本地计算,不需要关联实体,复制即用
农历年、农历日期、生日、节日,是使用的【节假日集成】,对应默认的实体是:sensor.holiday
弹出菜单是关联的本地日历:使用的是iframe浏览器组件关联网址http://192.168.31.208:8001/
variables:
jieqi_tiaozheng: 1,是节气的偏移量,目前是1,因为节气不是整天,所以会偏移,不准的时候调整这个调节
- type: custom:button-card
style:
left: 142px
top: 95px
variables:
jieqi_tiaozheng: 1
styles:
grid:
- grid-template-areas: |
"time time time time"
"date week jieqi jieqi"
"year mon mon day"
"line line line line"
"shengri shengri shengri shengri"
"jieri jieri jieri jieri"
- grid-template-columns: 80px 58px 16px 72px
- grid-template-rows: 70px 22px 22px 10px 22px 22px
- text-align: left
- font-weight: bold
- font-size: 16px
card:
- width: 230px
- height: 188px
custom_fields:
time:
- font-size: 57px
- font-weight: 430
- text-align: center
jieqi:
- text-align: right
day:
- text-align: right
custom_fields:
time: '[[[return states[''sensor.time''].state]]]'
date: |
[[[
let date = new Date(), month = date.getMonth()+1, day = date.getDate();
if (month < 10) month = `0${month}` ;
if (day < 10) day = `0${day}` ;
return `${month}月${day}日`;
]]]
week: |
[[[
var day = new Date().getDay();
var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[day]
return week;
]]]
jieqi: |
[[[
var now =new Date();
var year=now.getYear(), mon=now.getMonth(), day=now.getDate()+variables.jieqi_tiaozheng;
var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨","立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑","白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693,263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
var solarTerms = "",num1=1, num2=1;
while (solarTerms==""){ num1 = num1+1;
var temp1 = new Date((31556925974.7*(year-1900)+sTermInfo[mon*2+1] * 60000)+Date.UTC(1900,0,6,2,5));
var temp2 = temp1.getUTCDate();
if (temp2 == day) solarTerms = solarTerm[mon*2+1];
temp1 = new Date((31556925974.7*(year-1900)+sTermInfo[mon*2]*60000)+Date.UTC(1900,0,6,2,5));
temp2 = temp1.getUTCDate();
if(temp2==day) solarTerms = solarTerm[mon*2];
if(day>1){day=day-1;} else { mon=mon-1;if(mon<0){year=year-1; mon=11;}day=31; }}
return solarTerms+" 第"+(num1-1)+"天";
]]]
year: >
[[[ return
states['sensor.holiday'].attributes.data.lunar.slice(0,4)]]]
mon: >
[[[ return
states['sensor.holiday'].attributes.data.lunar.slice(5,9)]]]
day: |
[[[
let tzArr = ['子','丑','寅','卵','辰','巳','午','未','申','酉','戌','亥'];
let skArr = ['一','二','三','四','五','六','七','八'];
var h = new Date().getHours();
var m = new Date().getMinutes();
if (h%2 ==0) var shike = skArr[parseInt(m/15)] ;
if (h%2 ==1) var shike = skArr[parseInt(m/15)+4];
return tzArr[parseInt(h/2)] + '时' + shike +'刻';
]]]
line:
card:
type: custom:button-card
styles:
card:
- width: 228px
- border-top: 2px solid white
- margin-top: 18px
shengri: |
[[[
var jieri1 = states['sensor.holiday'].attributes.纪念日 ;
var jieri2 = states['sensor.holiday'].attributes.最近的纪念日 ;
var jieri3 = states['sensor.holiday'].attributes.最近的纪念日还有 ;
if (jieri1 != undefined ) return`${jieri1}`;
if (jieri1 == undefined ) return`${jieri2} ${jieri3}`;
]]]
jieri: |
[[[
var jieri1 = states['sensor.holiday'].attributes.节日 ;
var jieri2 = states['sensor.holiday'].attributes.最近的节日 ;
var jieri3 = states['sensor.holiday'].attributes.最近的节日还有 ;
if (jieri1 != undefined ) return`${jieri1}`;
if (jieri1 == undefined ) return`${jieri2} ${jieri3}`;
]]]
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: iframe
url: http://192.168.31.208:8001/
aspect_ratio: 124%
复制代码
12、电费
数据源,自行到github搜索国家d网,这里不方便提供
默认是2个户的。
界面使用了蘑菇卡片,mushroom-entity-card
- type: custom:button-card
style:
left: 155px
top: 220px
styles:
grid:
- grid-template-areas: >
"name1 balance1 month1" "name2 balance2 month2" "time time
time"
- grid-template-columns: 65px 95px 100px
- grid-template-rows: 18px 20px 18px
- text-align: left
- font-size: 13px
card:
- width: 260px
- height: 76px
custom_fields:
name1:
- font-weight: bold
name2:
- font-weight: bold
custom_fields:
name1: '海蓝城:'
name2: '世纪颐园:'
balance1: >
[[[ var num =
Math.floor(states['sensor.dianfei_hailancheng_balance'].state*100)/100;
return '金额: '+num+' 元' ]]]
balance2: >
[[[ var num =
Math.floor(states['sensor.dianfei_shijiyiyuan_balance'].state*100)/100;
return '金额: '+num+' 元' ]]]
month1: >
[[[ var num =
Math.floor(states['sensor.dianfei_hailancheng_month_ele_num'].state*100)/100;
return '本月: '+num+' kwh' ]]]
month2: >
[[[ var num =
Math.floor(states['sensor.dianfei_shijiyiyuan_month_ele_num'].state*100)/100;
return '本月: '+num+' kwh' ]]]
time: >
[[[return
states['sensor.dianfei_shijiyiyuan_refresh_time'].state ]]]
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: vertical-stack
title: 海蓝城 - 用电信息
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dianfei_hailancheng_balance
name: 电费余额
icon_color: yellow
- type: custom:mushroom-entity-card
entity: sensor.dianfei_hailancheng_daily_lasted_date
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dianfei_hailancheng_daily_ele_num
name: 日总用电
- type: custom:mushroom-entity-card
entity: sensor.dianfei_hailancheng_last_month_ele_num
name: 上月用电
- type: custom:mushroom-entity-card
entity: sensor.dianfei_hailancheng_year_ele_num
name: 本年用电
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dianfei_hailancheng_month_ele_num
name: 本月用电
- type: custom:mushroom-entity-card
entity: sensor.dianfei_hailancheng_last_month_ele_cost
name: 上月电费
icon_color: yellow
- type: custom:mushroom-entity-card
entity: sensor.dianfei_hailancheng_year_ele_cost
name: 本年电费
icon_color: yellow
- type: vertical-stack
title: 世纪颐园 - 用电信息
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dianfei_shijiyiyuan_balance
name: 电费余额
icon_color: yellow
- type: custom:mushroom-entity-card
entity: sensor.dianfei_shijiyiyuan_daily_lasted_date
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dianfei_shijiyiyuan_daily_ele_num
name: 日总用电
- type: custom:mushroom-entity-card
entity: sensor.dianfei_shijiyiyuan_last_month_ele_num
name: 上月用电
- type: custom:mushroom-entity-card
entity: sensor.dianfei_shijiyiyuan_year_ele_num
name: 本年用电
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dianfei_shijiyiyuan_month_ele_num
name: 本月用电
- type: custom:mushroom-entity-card
entity: sensor.dianfei_shijiyiyuan_last_month_ele_cost
name: 上月电费
icon_color: yellow
- type: custom:mushroom-entity-card
entity: sensor.dianfei_shijiyiyuan_year_ele_cost
name: 本年电费
icon_color: yellow
复制代码
1个户,将开头改成如下即可,或者放着其他字段
- type: custom:button-card
style:
left: 155px
top: 220px
styles:
grid:
- grid-template-areas: >
"name1 balance1 month1" "time time
time"
- grid-template-columns: 65px 95px 100px
- grid-template-rows: 18px 18px
- text-align: left
- font-size: 13px
复制代码
13、温度、湿度分布图
前提,每个房间要有温湿度传感器,可以用空调的、净化器的、加湿器的,或者购买温湿度计
根据温湿度变色,是调用了button模板wendubeijing和shidubeijing
- type: custom:button-card
styles:
grid:
- grid-template-areas: |
"a a a z2 z11 z11 z11 z11 z11 z11"
"a a a z2 d1 z12 z12 z12 z12 z12"
"z1 z1 z1 z1 d1 z12 z12 z12 z12 z12"
"b z3 d d d d d d d z13"
"z4 z4 z4 z4 d2 z10 z10 z10 z10 z10"
"c c c z5 d2 z9 g1 g1 g g"
"c c c z5 z6 z6 z6 z6 g g"
"c c c z5 e z7 f z8 g g"
- grid-template-columns: 25.5px 1.4px 9.8px 2.5px 20px 3px 21.21px 1.8px 24px 14px
- grid-template-rows: 20px 12px 1.6px 41px 2.3px 7px 3px 26px
card:
- width: 125px
- height: 122px
style:
left: 85px
top: 680px
custom_fields:
a:
……
b:
……
c:
……
复制代码
button_card_templates:
wendubeijing:
……
shidubeijing:
……
复制代码
14、头像
如果有外网,可以使用app获取定位,获得是否在家
如果没有外网,可以使用Ping(ICMP),集成,添加集成,找到Ping,添加手机ip,判断在家间隔可以设置长一些,如10分钟
- type: custom:button-card
style:
top: 65px
left: 827px
styles:
grid:
- grid-template-areas: '"img" "home"'
- grid-template-columns: 100x
- grid-template-rows: 60px 20px
card:
- width: 100px
- height: 90px
- background: rgba(0,0,0,0.2)
- border-radius: 10px
custom_fields:
img:
- width: 44px
- height: 44px
- justify-self: center
- border-radius: 22px
- background: |
[[[
var state= states['device_tracker.zhangqiang'].state;
if (state =='home') return 'rgba(135,206,250,0.5)';
if (state =='not_home') return 'rgba(255,55,50,0.5)';
]]]
home:
- font-size: 15px
- color: |
[[[
var state= states['device_tracker.zhangqiang'].state;
if (state =='home') return 'rgb(135,206,250)';
if (state =='not_home') return 'rgb(255,55,50)';
]]]
custom_fields:
img:
card:
type: custom:button-card
entity: device_tracker.zhangqiang
show_entity_picture: true
show_name: false
entity_picture: /local/UI/头像/ZQ.png
styles:
entity_picture:
- width: 100%
home: Zhangqiang
复制代码
15、古诗词
如果是本地诗词,通过rest获取的实体,
ui里使用 states['sensor.gushi'].attributes.题目,获取是信息
如过有人和我一样获取不到属性,只能获得长文本
ui里使用states['sensor.gushi'].state.split('"')[15],获取信息(截断位置分别为3、7、11、15、19)
如果是使用的NR,直接用对应的实体states['sensor.xxxxx'].state,获取信息
刷新按钮:本地诗词是用的重载实体sensor.gushi (NR的是使用流里的input按钮实体)
- type: image
info1: '************************************************************'
info2: '************************ 古诗词 ************************'
info3: '************************************************************'
- type: custom:button-card
style:
left: 550px
top: 123px
styles:
grid:
- grid-template-areas: |
"name refresh" "content1 content1" "content2 content2"
- grid-template-columns: 350px 150px
- grid-template-rows: 25px 20px 20px
card:
- '--mdc-ripple-press-opacity': 0
- padding: 0 0 0 0
- width: 500px
- height: 65px
- font-size: 14px
custom_fields:
content1:
- margin-left: 14px
- justify-self: start
content2:
- margin-left: 14px
- justify-self: start
custom_fields:
content1: |
[[[return states['sensor.gushi'].state.split('"')[15]]]]
content2: |
[[[return states['sensor.gushi'].state.split('"')[19]]]]
name:
card:
type: custom:button-card
show_label: true
styles:
card:
- width: 350px
- '--mdc-ripple-press-opacity': 0
label:
- font-size: 14px
- font-weight: bold
- justify-self: start
label: |
[[[
var title = states['sensor.gushi'].state.split('"')[3];
var dynasty = states['sensor.gushi'].state.split('"')[7];
var author = states['sensor.gushi'].state.split('"')[11];
return "「" + title + "」 — "+ dynasty + "·" + author ;
]]]
tap_action:
action: call-service
service: text.set_value
target:
entity_id: text.redmi_zhixingmingling
data:
value: |
[[[
var title = states['sensor.gushi'].state.split('"')[3];
var author = states['sensor.gushi'].state.split('"')[11];
return title + " " + author ;
]]]
refresh:
card:
type: custom:button-card
show_icon: true
icon: mdi:refresh
tap_action:
action: call-service
service: homeassistant.update_entity
target:
entity_id:
- sensor.gushi
data: {}
styles:
icon:
- width: 20px
- height: 20px
card:
- width: 20px
- height: 20px
- border-radius: 100%
- left: |
[[[
var title = states['sensor.gushi'].state.split('"')[3];
var dynasty = states['sensor.gushi'].state.split('"')[7];
var author = states['sensor.gushi'].state.split('"')[11];
var len = title + dynasty + author ;
return len.length*13-270 + "px" ;
]]]
复制代码
16、天气
使用button手搓的模块
除了复制代码外,还需要复制button模板(模板内weather开头)
aqi不用的话,删除【aqi:启用】这行即可
【width: 52】单列的宽度,建议50-60之间,要不变形严重可以选择使用天气预测实时的温湿度显示,或者用自己阳台的温湿度显示
wendu_entity: sensor.wendu_shiwai
shidu_entity: sensor.shidu_shiwai
或
wendu_entity: 使用天气温度
shidu_entity: s使用天气湿度
复制代码
- type: custom:button-card
template: weather
variables:
wendu_entity: sensor.wendu_shiwai
shidu_entity: sensor.shidu_shiwai
width: 52
aqi: 启用
style:
left: 150px
top: 430px
复制代码
button_card_templates:
weather_xxx:
weather_xxx:
复制代码