欢迎模块增加应用图标
This commit is contained in:
@@ -4569,87 +4569,703 @@ views:
|
|||||||
media_content_id: __MANUAL_ENTRY__
|
media_content_id: __MANUAL_ENTRY__
|
||||||
grid_options:
|
grid_options:
|
||||||
rows: auto
|
rows: auto
|
||||||
columns: 3
|
columns: 4
|
||||||
- type: custom:button-card
|
- type: custom:vertical-stack-in-card
|
||||||
show_icon: false
|
cards:
|
||||||
show_name: false
|
- type: custom:button-card
|
||||||
show_state: false
|
show_icon: false
|
||||||
grid_options:
|
show_name: false
|
||||||
columns: 12
|
show_state: false
|
||||||
rows: 2
|
grid_options:
|
||||||
custom_fields:
|
columns: 12
|
||||||
greeting: |
|
row: 2
|
||||||
[[[
|
custom_fields:
|
||||||
const h = new Date().getHours();
|
greeting: |
|
||||||
if (h < 6) return "夜深了";
|
[[[
|
||||||
if (h < 11) return "早上好";
|
const h = new Date().getHours();
|
||||||
if (h < 14) return "中午好";
|
if (h < 6) return "夜深了";
|
||||||
if (h < 18) return "下午好";
|
if (h < 11) return "早上好";
|
||||||
return "晚上好";
|
if (h < 14) return "晏昼好";
|
||||||
]]]
|
if (h < 18) return "下午好";
|
||||||
clock: |
|
return "晚上好";
|
||||||
[[[
|
]]]
|
||||||
return new Date().toLocaleTimeString(
|
clock: |
|
||||||
'zh-CN',
|
[[[
|
||||||
{ hour: '2-digit', minute: '2-digit', hour12: false }
|
return new Date().toLocaleTimeString(
|
||||||
);
|
'zh-CN',
|
||||||
]]]
|
{ hour: '2-digit', minute: '2-digit', hour12: false }
|
||||||
date: |
|
);
|
||||||
[[[
|
]]]
|
||||||
return new Date().toLocaleDateString(
|
date: |
|
||||||
'zh-CN',
|
[[[
|
||||||
{ month: 'long', day: 'numeric', weekday: 'long' }
|
return new Date().toLocaleDateString(
|
||||||
);
|
'zh-CN',
|
||||||
]]]
|
{ month: 'long', day: 'numeric', weekday: 'long' }
|
||||||
subtitle: |
|
);
|
||||||
[[[
|
]]]
|
||||||
const leak = Number(states['sensor.water_damage_count']?.state ?? 0);
|
styles:
|
||||||
const lights = Number(states['sensor.lights_of_count']?.state ?? 0);
|
card:
|
||||||
const ac = Number(states['sensor.aircondition_of_count']?.state ?? 0);
|
- height: 120px
|
||||||
|
- padding: 20px 24px
|
||||||
|
- border-radius: 24px
|
||||||
|
- border: none
|
||||||
|
- background: >-
|
||||||
|
linear-gradient(135deg, rgba(32,35,42,0.95),
|
||||||
|
rgba(20,22,27,0.95))
|
||||||
|
- box-shadow: none
|
||||||
|
grid:
|
||||||
|
- grid-template-areas: |
|
||||||
|
"greeting clock"
|
||||||
|
"subtitle date"
|
||||||
|
- grid-template-columns: 1fr auto
|
||||||
|
- grid-template-rows: 1fr 1fr
|
||||||
|
custom_fields:
|
||||||
|
greeting:
|
||||||
|
- justify-self: start
|
||||||
|
- align-self: end
|
||||||
|
- font-size: 30px
|
||||||
|
- font-weight: 700
|
||||||
|
- color: white
|
||||||
|
subtitle:
|
||||||
|
- justify-self: start
|
||||||
|
- align-self: start
|
||||||
|
- font-size: 14px
|
||||||
|
- color: rgba(255,255,255,0.55)
|
||||||
|
clock:
|
||||||
|
- justify-self: end
|
||||||
|
- align-self: end
|
||||||
|
- font-size: 32px
|
||||||
|
- font-weight: 600
|
||||||
|
- color: white
|
||||||
|
date:
|
||||||
|
- justify-self: end
|
||||||
|
- align-self: start
|
||||||
|
- font-size: 14px
|
||||||
|
- color: rgba(255,255,255,0.55)
|
||||||
|
- type: custom:mushroom-chips-card
|
||||||
|
chips:
|
||||||
|
- type: template
|
||||||
|
entity: sensor.lights_of_count
|
||||||
|
icon: mdi:lightbulb-group
|
||||||
|
content: |-
|
||||||
|
{% if is_state('sensor.lights_of_count','0') %}
|
||||||
|
|
||||||
if (leak > 0) return `⚠ 检测到 ${leak} 个水浸告警`;
|
{% else %}
|
||||||
if (lights === 0 && ac === 0) return "家里一切正常";
|
{{states('sensor.lights_of_count')}}
|
||||||
return `${lights} 盏灯开启 · ${ac} 台空调运行`;
|
{% endif %}
|
||||||
]]]
|
alignment: end
|
||||||
styles:
|
card_mod:
|
||||||
card:
|
style: >
|
||||||
- height: 120px
|
ha-card {
|
||||||
- padding: 20px 24px
|
/* ================================== */
|
||||||
- border-radius: 24px
|
/* USER CONFIG HERE */
|
||||||
- border: none
|
/* ================================== */
|
||||||
- background: >-
|
|
||||||
linear-gradient(135deg, rgba(32,35,42,0.95),
|
/* 1. ACTIVE STATE (NUMERIC) */
|
||||||
rgba(20,22,27,0.95))
|
{% set threshold_below = false %}
|
||||||
- box-shadow: none
|
{% set threshold_above = 1 %}
|
||||||
grid:
|
|
||||||
- grid-template-areas: |
|
/* 2. POSITIONING */
|
||||||
"greeting clock"
|
{% set pos_y = 'bottom' %}
|
||||||
"subtitle date"
|
{% set pos_y_val = '15px' %}
|
||||||
- grid-template-columns: 1fr auto
|
{% set pos_x = 'left' %}
|
||||||
- grid-template-rows: 1fr 1fr
|
{% set pos_x_val = '5px' %}
|
||||||
custom_fields:
|
|
||||||
greeting:
|
/* 3. SIZING */
|
||||||
- justify-self: start
|
{% set icon_size = '18px' %}
|
||||||
- align-self: end
|
{% set text_size = '12px' %}
|
||||||
- font-size: 30px
|
{% set badge_height = '5px' %}
|
||||||
- font-weight: 700
|
{% set border_radius = '10px' %}
|
||||||
- color: white
|
{% set border_thickness = '1px' %}
|
||||||
subtitle:
|
|
||||||
- justify-self: start
|
/* 4. COLORS (HEX, RGB, Color Name) */
|
||||||
- align-self: start
|
/* --- Active --- */
|
||||||
- font-size: 14px
|
{% set active_bg = '#a63a3a' %}
|
||||||
- color: rgba(255,255,255,0.55)
|
{% set active_icon = 'yellow' %}
|
||||||
clock:
|
{% set active_text = 'white' %}
|
||||||
- justify-self: end
|
{% set active_border = '#ab1c1c' %}
|
||||||
- align-self: end
|
{% set active_opacity = 0 %}
|
||||||
- font-size: 32px
|
|
||||||
- font-weight: 600
|
/* --- Inactive --- */
|
||||||
- color: white
|
{% set inactive_bg = 'grey' %}
|
||||||
date:
|
{% set inactive_icon = 'grey' %}
|
||||||
- justify-self: end
|
{% set inactive_text = 'darkgrey' %}
|
||||||
- align-self: start
|
{% set inactive_border = 'transparent' %}
|
||||||
- font-size: 14px
|
{% set inactive_opacity = 0.3 %}
|
||||||
- color: rgba(255,255,255,0.55)
|
|
||||||
|
/* 5. ANIMATIONS */
|
||||||
|
/* Options: pulse, shake, wobble */
|
||||||
|
/* flash, heartbeat, swing, vibrate */
|
||||||
|
|
||||||
|
{% set anim_type = 'none' %}
|
||||||
|
|
||||||
|
/* true = 24/7, false = only when active */
|
||||||
|
{% set always_animate = false %}
|
||||||
|
|
||||||
|
{% set anim_intensity_sec = 0.5 %} /* 0.1 to 1 */
|
||||||
|
{% set anim_duration_sec = 2 %}
|
||||||
|
{% set anim_delay_sec = 5 %}
|
||||||
|
|
||||||
|
/* ================================== */
|
||||||
|
/* USER CONFIG END (DONT TOUCH BELOW) */
|
||||||
|
/* ================================== */
|
||||||
|
|
||||||
|
{% set current_state = states(config.chips[0].entity) %}
|
||||||
|
{% set state_num = current_state | float(-99999) %}
|
||||||
|
|
||||||
|
{% set check_below = threshold_below | string | lower != 'false' %}
|
||||||
|
{% set check_above = threshold_above | string | lower != 'false' %}
|
||||||
|
|
||||||
|
{% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %}
|
||||||
|
{% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %}
|
||||||
|
|
||||||
|
{% set is_active = is_active_below or is_active_above %}
|
||||||
|
|
||||||
|
{% if is_active %}
|
||||||
|
{% set current_bg = active_bg %}
|
||||||
|
{% set current_icon = active_icon %}
|
||||||
|
{% set current_text = active_text %}
|
||||||
|
{% set current_border = active_border %}
|
||||||
|
{% set current_op = active_opacity %}
|
||||||
|
{% set current_anim = anim_type %}
|
||||||
|
{% else %}
|
||||||
|
{% set current_bg = inactive_bg %}
|
||||||
|
{% set current_icon = inactive_icon %}
|
||||||
|
{% set current_text = inactive_text %}
|
||||||
|
{% set current_border = inactive_border %}
|
||||||
|
{% set current_op = inactive_opacity %}
|
||||||
|
{% set current_anim = anim_type if always_animate else 'none' %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% set master_cycle = anim_duration_sec + anim_delay_sec %}
|
||||||
|
{% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
|
||||||
|
{% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
|
||||||
|
|
||||||
|
--chip-padding: {{ badge_height }};
|
||||||
|
--chip-border-radius: {{ border_radius }};
|
||||||
|
|
||||||
|
--chip-border-width: 0px !important;
|
||||||
|
--ha-card-border-width: 0px !important;
|
||||||
|
|
||||||
|
--chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
|
||||||
|
|
||||||
|
--text-color: {{ current_icon }} !important;
|
||||||
|
--color: {{ current_icon }} !important;
|
||||||
|
--chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
|
||||||
|
--chip-font-size: {{ text_size }} !important;
|
||||||
|
--chip-icon-size: {{ icon_size }} !important;
|
||||||
|
--mdc-icon-size: {{ icon_size }} !important;
|
||||||
|
--chip-height: auto !important;
|
||||||
|
--primary-text-color: {{ current_text }} !important;
|
||||||
|
--secondary-text-color: {{ current_text }} !important;
|
||||||
|
|
||||||
|
position: absolute !important;
|
||||||
|
{{ pos_y }}: {{ pos_y_val }};
|
||||||
|
{{ pos_x }}: {{ pos_x_val }};
|
||||||
|
z-index: 1;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: {{ border_radius }} !important;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
||||||
|
overflow: visible !important;
|
||||||
|
will-change: transform;
|
||||||
|
|
||||||
|
{% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
|
||||||
|
animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
|
||||||
|
{% endif %}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ha-state-icon, ha-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: {{ icon_size }} !important;
|
||||||
|
height: {{ icon_size }} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
{% if config.chips[0].content is not defined or
|
||||||
|
config.chips[0].content | length == 0 %}
|
||||||
|
ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
|
||||||
|
.content { display: none; }
|
||||||
|
{% else %}
|
||||||
|
ha-card { padding: 0 10px !important; }
|
||||||
|
.content { padding-left: 5px; font-weight: bold; }
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
{% if current_anim != 'none' and iterations > 0 and
|
||||||
|
master_cycle > 0 %}
|
||||||
|
|
||||||
|
@keyframes anim-{{ config.chips[0].entity | replace('.',
|
||||||
|
'-') }}-{{ anim_type }} {
|
||||||
|
{% for i in range(iterations) %}
|
||||||
|
{% set t = i * step_percent %}
|
||||||
|
|
||||||
|
{% if anim_type == 'pulse' %}
|
||||||
|
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
|
||||||
|
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'shake' %}
|
||||||
|
{{ t + 0 }}% { transform: rotateZ(0deg); }
|
||||||
|
{{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
|
||||||
|
{{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
|
||||||
|
{{ t + step_percent }}% { transform: rotateZ(0deg); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'flash' %}
|
||||||
|
{{ t + 0 }}% { opacity: 1; }
|
||||||
|
{{ t + (step_percent * 0.5) }}% { opacity: 0; }
|
||||||
|
{{ t + step_percent }}% { opacity: 1; }
|
||||||
|
|
||||||
|
{% elif anim_type == 'wobble' %}
|
||||||
|
{{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
|
||||||
|
{{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
|
||||||
|
{{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
|
||||||
|
{{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'heartbeat' %}
|
||||||
|
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
{{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
|
||||||
|
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
{{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
|
||||||
|
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'swing' %}
|
||||||
|
{{ t + 0 }}% { transform: rotateZ(0deg); }
|
||||||
|
{{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
|
||||||
|
{{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
|
||||||
|
{{ t + step_percent }}% { transform: rotateZ(0deg); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'vibrate' %}
|
||||||
|
{{ t + 0 }}% { transform: translate3d(0, 0, 0); }
|
||||||
|
{{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
|
||||||
|
{{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
|
||||||
|
{{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
|
||||||
|
{{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
|
||||||
|
{{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
}
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
- type: custom:mushroom-chips-card
|
||||||
|
chips:
|
||||||
|
- type: template
|
||||||
|
entity: sensor.aircondition_of_count
|
||||||
|
icon: mdi:air-conditioner
|
||||||
|
content: |-
|
||||||
|
{% if is_state('sensor.aircondition_of_count','0') %}
|
||||||
|
|
||||||
|
{% else %}
|
||||||
|
{{states('sensor.aircondition_of_count')}}
|
||||||
|
{% endif %}
|
||||||
|
alignment: end
|
||||||
|
card_mod:
|
||||||
|
style: >
|
||||||
|
ha-card {
|
||||||
|
/* ================================== */
|
||||||
|
/* USER CONFIG HERE */
|
||||||
|
/* ================================== */
|
||||||
|
|
||||||
|
/* 1. ACTIVE STATE (NUMERIC) */
|
||||||
|
{% set threshold_below = false %}
|
||||||
|
{% set threshold_above = 1 %}
|
||||||
|
|
||||||
|
/* 2. POSITIONING */
|
||||||
|
{% set pos_y = 'bottom' %}
|
||||||
|
{% set pos_y_val = '15px' %}
|
||||||
|
{% set pos_x = 'left' %}
|
||||||
|
{% set pos_x_val = '40px' %}
|
||||||
|
|
||||||
|
/* 3. SIZING */
|
||||||
|
{% set icon_size = '18px' %}
|
||||||
|
{% set text_size = '12px' %}
|
||||||
|
{% set badge_height = '5px' %}
|
||||||
|
{% set border_radius = '10px' %}
|
||||||
|
{% set border_thickness = '1px' %}
|
||||||
|
|
||||||
|
/* 4. COLORS (HEX, RGB, Color Name) */
|
||||||
|
/* --- Active --- */
|
||||||
|
{% set active_bg = '#a63a3a' %}
|
||||||
|
{% set active_icon = '#42A5F5' %}
|
||||||
|
{% set active_text = 'white' %}
|
||||||
|
{% set active_border = '#ab1c1c' %}
|
||||||
|
{% set active_opacity = 0 %}
|
||||||
|
|
||||||
|
/* --- Inactive --- */
|
||||||
|
{% set inactive_bg = 'grey' %}
|
||||||
|
{% set inactive_icon = 'grey' %}
|
||||||
|
{% set inactive_text = 'darkgrey' %}
|
||||||
|
{% set inactive_border = 'transparent' %}
|
||||||
|
{% set inactive_opacity = 0.3 %}
|
||||||
|
|
||||||
|
/* 5. ANIMATIONS */
|
||||||
|
/* Options: pulse, shake, wobble */
|
||||||
|
/* flash, heartbeat, swing, vibrate */
|
||||||
|
|
||||||
|
{% set anim_type = 'none' %}
|
||||||
|
|
||||||
|
/* true = 24/7, false = only when active */
|
||||||
|
{% set always_animate = false %}
|
||||||
|
|
||||||
|
{% set anim_intensity_sec = 0.5 %} /* 0.1 to 1 */
|
||||||
|
{% set anim_duration_sec = 2 %}
|
||||||
|
{% set anim_delay_sec = 5 %}
|
||||||
|
|
||||||
|
/* ================================== */
|
||||||
|
/* USER CONFIG END (DONT TOUCH BELOW) */
|
||||||
|
/* ================================== */
|
||||||
|
|
||||||
|
{% set current_state = states(config.chips[0].entity) %}
|
||||||
|
{% set state_num = current_state | float(-99999) %}
|
||||||
|
|
||||||
|
{% set check_below = threshold_below | string | lower != 'false' %}
|
||||||
|
{% set check_above = threshold_above | string | lower != 'false' %}
|
||||||
|
|
||||||
|
{% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %}
|
||||||
|
{% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %}
|
||||||
|
|
||||||
|
{% set is_active = is_active_below or is_active_above %}
|
||||||
|
|
||||||
|
{% if is_active %}
|
||||||
|
{% set current_bg = active_bg %}
|
||||||
|
{% set current_icon = active_icon %}
|
||||||
|
{% set current_text = active_text %}
|
||||||
|
{% set current_border = active_border %}
|
||||||
|
{% set current_op = active_opacity %}
|
||||||
|
{% set current_anim = anim_type %}
|
||||||
|
{% else %}
|
||||||
|
{% set current_bg = inactive_bg %}
|
||||||
|
{% set current_icon = inactive_icon %}
|
||||||
|
{% set current_text = inactive_text %}
|
||||||
|
{% set current_border = inactive_border %}
|
||||||
|
{% set current_op = inactive_opacity %}
|
||||||
|
{% set current_anim = anim_type if always_animate else 'none' %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% set master_cycle = anim_duration_sec + anim_delay_sec %}
|
||||||
|
{% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
|
||||||
|
{% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
|
||||||
|
|
||||||
|
--chip-padding: {{ badge_height }};
|
||||||
|
--chip-border-radius: {{ border_radius }};
|
||||||
|
|
||||||
|
--chip-border-width: 0px !important;
|
||||||
|
--ha-card-border-width: 0px !important;
|
||||||
|
|
||||||
|
--chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
|
||||||
|
|
||||||
|
--text-color: {{ current_icon }} !important;
|
||||||
|
--color: {{ current_icon }} !important;
|
||||||
|
--chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
|
||||||
|
--chip-font-size: {{ text_size }} !important;
|
||||||
|
--chip-icon-size: {{ icon_size }} !important;
|
||||||
|
--mdc-icon-size: {{ icon_size }} !important;
|
||||||
|
--chip-height: auto !important;
|
||||||
|
--primary-text-color: {{ current_text }} !important;
|
||||||
|
--secondary-text-color: {{ current_text }} !important;
|
||||||
|
|
||||||
|
position: absolute !important;
|
||||||
|
{{ pos_y }}: {{ pos_y_val }};
|
||||||
|
{{ pos_x }}: {{ pos_x_val }};
|
||||||
|
z-index: 1;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: {{ border_radius }} !important;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
||||||
|
overflow: visible !important;
|
||||||
|
will-change: transform;
|
||||||
|
|
||||||
|
{% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
|
||||||
|
animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
|
||||||
|
{% endif %}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ha-state-icon, ha-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: {{ icon_size }} !important;
|
||||||
|
height: {{ icon_size }} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
{% if config.chips[0].content is not defined or
|
||||||
|
config.chips[0].content | length == 0 %}
|
||||||
|
ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
|
||||||
|
.content { display: none; }
|
||||||
|
{% else %}
|
||||||
|
ha-card { padding: 0 10px !important; }
|
||||||
|
.content { padding-left: 5px; font-weight: bold; }
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
{% if current_anim != 'none' and iterations > 0 and
|
||||||
|
master_cycle > 0 %}
|
||||||
|
|
||||||
|
@keyframes anim-{{ config.chips[0].entity | replace('.',
|
||||||
|
'-') }}-{{ anim_type }} {
|
||||||
|
{% for i in range(iterations) %}
|
||||||
|
{% set t = i * step_percent %}
|
||||||
|
|
||||||
|
{% if anim_type == 'pulse' %}
|
||||||
|
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
|
||||||
|
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'shake' %}
|
||||||
|
{{ t + 0 }}% { transform: rotateZ(0deg); }
|
||||||
|
{{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
|
||||||
|
{{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
|
||||||
|
{{ t + step_percent }}% { transform: rotateZ(0deg); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'flash' %}
|
||||||
|
{{ t + 0 }}% { opacity: 1; }
|
||||||
|
{{ t + (step_percent * 0.5) }}% { opacity: 0; }
|
||||||
|
{{ t + step_percent }}% { opacity: 1; }
|
||||||
|
|
||||||
|
{% elif anim_type == 'wobble' %}
|
||||||
|
{{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
|
||||||
|
{{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
|
||||||
|
{{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
|
||||||
|
{{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'heartbeat' %}
|
||||||
|
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
{{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
|
||||||
|
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
{{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
|
||||||
|
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'swing' %}
|
||||||
|
{{ t + 0 }}% { transform: rotateZ(0deg); }
|
||||||
|
{{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
|
||||||
|
{{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
|
||||||
|
{{ t + step_percent }}% { transform: rotateZ(0deg); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'vibrate' %}
|
||||||
|
{{ t + 0 }}% { transform: translate3d(0, 0, 0); }
|
||||||
|
{{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
|
||||||
|
{{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
|
||||||
|
{{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
|
||||||
|
{{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
|
||||||
|
{{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
}
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
- type: custom:mushroom-chips-card
|
||||||
|
chips:
|
||||||
|
- type: template
|
||||||
|
entity: fan.quan_wu_feng_shan
|
||||||
|
icon: mdi:fan
|
||||||
|
content: |-
|
||||||
|
{% if is_state('fan.quan_wu_feng_shan','0') %}
|
||||||
|
|
||||||
|
{% else %}
|
||||||
|
{{states('fan.quan_wu_feng_shan')}}
|
||||||
|
{% endif %}
|
||||||
|
alignment: end
|
||||||
|
card_mod:
|
||||||
|
style: >
|
||||||
|
ha-card {
|
||||||
|
/* ================================== */
|
||||||
|
/* USER CONFIG HERE */
|
||||||
|
/* ================================== */
|
||||||
|
|
||||||
|
/* 1. ACTIVE STATE (NUMERIC) */
|
||||||
|
{% set threshold_below = false %}
|
||||||
|
{% set threshold_above = 1 %}
|
||||||
|
|
||||||
|
/* 2. POSITIONING */
|
||||||
|
{% set pos_y = 'bottom' %}
|
||||||
|
{% set pos_y_val = '15px' %}
|
||||||
|
{% set pos_x = 'left' %}
|
||||||
|
{% set pos_x_val = '75px' %}
|
||||||
|
|
||||||
|
/* 3. SIZING */
|
||||||
|
{% set icon_size = '18px' %}
|
||||||
|
{% set text_size = '12px' %}
|
||||||
|
{% set badge_height = '5px' %}
|
||||||
|
{% set border_radius = '10px' %}
|
||||||
|
{% set border_thickness = '1px' %}
|
||||||
|
|
||||||
|
/* 4. COLORS (HEX, RGB, Color Name) */
|
||||||
|
/* --- Active --- */
|
||||||
|
{% set active_bg = '#a63a3a' %}
|
||||||
|
{% set active_icon = '#42A5F5' %}
|
||||||
|
{% set active_text = 'white' %}
|
||||||
|
{% set active_border = '#ab1c1c' %}
|
||||||
|
{% set active_opacity = 0 %}
|
||||||
|
|
||||||
|
/* --- Inactive --- */
|
||||||
|
{% set inactive_bg = 'grey' %}
|
||||||
|
{% set inactive_icon = 'grey' %}
|
||||||
|
{% set inactive_text = 'darkgrey' %}
|
||||||
|
{% set inactive_border = 'transparent' %}
|
||||||
|
{% set inactive_opacity = 0.3 %}
|
||||||
|
|
||||||
|
/* 5. ANIMATIONS */
|
||||||
|
/* Options: pulse, shake, wobble */
|
||||||
|
/* flash, heartbeat, swing, vibrate */
|
||||||
|
|
||||||
|
{% set anim_type = 'none' %}
|
||||||
|
|
||||||
|
/* true = 24/7, false = only when active */
|
||||||
|
{% set always_animate = false %}
|
||||||
|
|
||||||
|
{% set anim_intensity_sec = 0.5 %} /* 0.1 to 1 */
|
||||||
|
{% set anim_duration_sec = 2 %}
|
||||||
|
{% set anim_delay_sec = 5 %}
|
||||||
|
|
||||||
|
/* ================================== */
|
||||||
|
/* USER CONFIG END (DONT TOUCH BELOW) */
|
||||||
|
/* ================================== */
|
||||||
|
|
||||||
|
{% set current_state = states(config.chips[0].entity) %}
|
||||||
|
{% set state_num = current_state | float(-99999) %}
|
||||||
|
|
||||||
|
{% set check_below = threshold_below | string | lower != 'false' %}
|
||||||
|
{% set check_above = threshold_above | string | lower != 'false' %}
|
||||||
|
|
||||||
|
{% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %}
|
||||||
|
{% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %}
|
||||||
|
|
||||||
|
{% set is_active = is_active_below or is_active_above %}
|
||||||
|
|
||||||
|
{% if is_active %}
|
||||||
|
{% set current_bg = active_bg %}
|
||||||
|
{% set current_icon = active_icon %}
|
||||||
|
{% set current_text = active_text %}
|
||||||
|
{% set current_border = active_border %}
|
||||||
|
{% set current_op = active_opacity %}
|
||||||
|
{% set current_anim = anim_type %}
|
||||||
|
{% else %}
|
||||||
|
{% set current_bg = inactive_bg %}
|
||||||
|
{% set current_icon = inactive_icon %}
|
||||||
|
{% set current_text = inactive_text %}
|
||||||
|
{% set current_border = inactive_border %}
|
||||||
|
{% set current_op = inactive_opacity %}
|
||||||
|
{% set current_anim = anim_type if always_animate else 'none' %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% set master_cycle = anim_duration_sec + anim_delay_sec %}
|
||||||
|
{% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
|
||||||
|
{% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
|
||||||
|
|
||||||
|
--chip-padding: {{ badge_height }};
|
||||||
|
--chip-border-radius: {{ border_radius }};
|
||||||
|
|
||||||
|
--chip-border-width: 0px !important;
|
||||||
|
--ha-card-border-width: 0px !important;
|
||||||
|
|
||||||
|
--chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
|
||||||
|
|
||||||
|
--text-color: {{ current_icon }} !important;
|
||||||
|
--color: {{ current_icon }} !important;
|
||||||
|
--chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
|
||||||
|
--chip-font-size: {{ text_size }} !important;
|
||||||
|
--chip-icon-size: {{ icon_size }} !important;
|
||||||
|
--mdc-icon-size: {{ icon_size }} !important;
|
||||||
|
--chip-height: auto !important;
|
||||||
|
--primary-text-color: {{ current_text }} !important;
|
||||||
|
--secondary-text-color: {{ current_text }} !important;
|
||||||
|
|
||||||
|
position: absolute !important;
|
||||||
|
{{ pos_y }}: {{ pos_y_val }};
|
||||||
|
{{ pos_x }}: {{ pos_x_val }};
|
||||||
|
z-index: 1;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: {{ border_radius }} !important;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
||||||
|
overflow: visible !important;
|
||||||
|
will-change: transform;
|
||||||
|
|
||||||
|
{% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
|
||||||
|
animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
|
||||||
|
{% endif %}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ha-state-icon, ha-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: {{ icon_size }} !important;
|
||||||
|
height: {{ icon_size }} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
{% if config.chips[0].content is not defined or
|
||||||
|
config.chips[0].content | length == 0 %}
|
||||||
|
ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
|
||||||
|
.content { display: none; }
|
||||||
|
{% else %}
|
||||||
|
ha-card { padding: 0 10px !important; }
|
||||||
|
.content { padding-left: 5px; font-weight: bold; }
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
{% if current_anim != 'none' and iterations > 0 and
|
||||||
|
master_cycle > 0 %}
|
||||||
|
|
||||||
|
@keyframes anim-{{ config.chips[0].entity | replace('.',
|
||||||
|
'-') }}-{{ anim_type }} {
|
||||||
|
{% for i in range(iterations) %}
|
||||||
|
{% set t = i * step_percent %}
|
||||||
|
|
||||||
|
{% if anim_type == 'pulse' %}
|
||||||
|
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
|
||||||
|
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'shake' %}
|
||||||
|
{{ t + 0 }}% { transform: rotateZ(0deg); }
|
||||||
|
{{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
|
||||||
|
{{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
|
||||||
|
{{ t + step_percent }}% { transform: rotateZ(0deg); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'flash' %}
|
||||||
|
{{ t + 0 }}% { opacity: 1; }
|
||||||
|
{{ t + (step_percent * 0.5) }}% { opacity: 0; }
|
||||||
|
{{ t + step_percent }}% { opacity: 1; }
|
||||||
|
|
||||||
|
{% elif anim_type == 'wobble' %}
|
||||||
|
{{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
|
||||||
|
{{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
|
||||||
|
{{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
|
||||||
|
{{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'heartbeat' %}
|
||||||
|
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
{{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
|
||||||
|
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
{{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
|
||||||
|
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'swing' %}
|
||||||
|
{{ t + 0 }}% { transform: rotateZ(0deg); }
|
||||||
|
{{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
|
||||||
|
{{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
|
||||||
|
{{ t + step_percent }}% { transform: rotateZ(0deg); }
|
||||||
|
|
||||||
|
{% elif anim_type == 'vibrate' %}
|
||||||
|
{{ t + 0 }}% { transform: translate3d(0, 0, 0); }
|
||||||
|
{{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
|
||||||
|
{{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
|
||||||
|
{{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
|
||||||
|
{{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
|
||||||
|
{{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
}
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
- type: grid
|
- type: grid
|
||||||
column_span: 4
|
column_span: 4
|
||||||
cards:
|
cards:
|
||||||
@@ -6377,6 +6993,8 @@ views:
|
|||||||
/* 组合卡片边缘与内部卡片之间的距离 */
|
/* 组合卡片边缘与内部卡片之间的距离 */
|
||||||
padding: 2px 4px !important;
|
padding: 2px 4px !important;
|
||||||
}
|
}
|
||||||
|
grid_options:
|
||||||
|
columns: 10
|
||||||
- square: false
|
- square: false
|
||||||
type: grid
|
type: grid
|
||||||
cards:
|
cards:
|
||||||
@@ -7476,7 +8094,7 @@ views:
|
|||||||
hold_action:
|
hold_action:
|
||||||
action: more-info
|
action: more-info
|
||||||
grid_options:
|
grid_options:
|
||||||
columns: 4
|
columns: 5
|
||||||
rows: 1
|
rows: 1
|
||||||
- type: custom:mushroom-template-card
|
- type: custom:mushroom-template-card
|
||||||
entity: fan.xiaomi_cn_2196552583_p90_s_2_fan
|
entity: fan.xiaomi_cn_2196552583_p90_s_2_fan
|
||||||
@@ -7536,7 +8154,7 @@ views:
|
|||||||
show_brightness_control: true
|
show_brightness_control: true
|
||||||
show_color_temp_control: true
|
show_color_temp_control: true
|
||||||
grid_options:
|
grid_options:
|
||||||
columns: 4
|
columns: 6
|
||||||
rows: 2
|
rows: 2
|
||||||
- type: custom:mushroom-light-card
|
- type: custom:mushroom-light-card
|
||||||
entity: light.shhf_cn_1129134246_sflt11_s_2_light
|
entity: light.shhf_cn_1129134246_sflt11_s_2_light
|
||||||
@@ -7546,7 +8164,7 @@ views:
|
|||||||
show_brightness_control: true
|
show_brightness_control: true
|
||||||
show_color_temp_control: true
|
show_color_temp_control: true
|
||||||
grid_options:
|
grid_options:
|
||||||
columns: 4
|
columns: 6
|
||||||
rows: 2
|
rows: 2
|
||||||
- type: custom:mushroom-light-card
|
- type: custom:mushroom-light-card
|
||||||
entity: light.pmfbj_cn_1186735998_xsx340_s_2
|
entity: light.pmfbj_cn_1186735998_xsx340_s_2
|
||||||
@@ -7556,7 +8174,7 @@ views:
|
|||||||
show_brightness_control: true
|
show_brightness_control: true
|
||||||
show_color_temp_control: true
|
show_color_temp_control: true
|
||||||
grid_options:
|
grid_options:
|
||||||
columns: 4
|
columns: 6
|
||||||
rows: 2
|
rows: 2
|
||||||
- type: custom:mushroom-light-card
|
- type: custom:mushroom-light-card
|
||||||
entity: light.pmfbj_cn_1186772227_xsx340_s_2
|
entity: light.pmfbj_cn_1186772227_xsx340_s_2
|
||||||
@@ -7566,7 +8184,7 @@ views:
|
|||||||
show_brightness_control: true
|
show_brightness_control: true
|
||||||
show_color_temp_control: true
|
show_color_temp_control: true
|
||||||
grid_options:
|
grid_options:
|
||||||
columns: 4
|
columns: 6
|
||||||
rows: 2
|
rows: 2
|
||||||
- type: custom:mushroom-light-card
|
- type: custom:mushroom-light-card
|
||||||
entity: light.pmfbj_cn_1186744390_xsx340_s_2
|
entity: light.pmfbj_cn_1186744390_xsx340_s_2
|
||||||
@@ -7576,7 +8194,7 @@ views:
|
|||||||
show_brightness_control: true
|
show_brightness_control: true
|
||||||
show_color_temp_control: true
|
show_color_temp_control: true
|
||||||
grid_options:
|
grid_options:
|
||||||
columns: 4
|
columns: 6
|
||||||
rows: 2
|
rows: 2
|
||||||
- type: custom:mushroom-light-card
|
- type: custom:mushroom-light-card
|
||||||
entity: light.opple_cn_2005385416_moat_s_2_light
|
entity: light.opple_cn_2005385416_moat_s_2_light
|
||||||
@@ -7586,7 +8204,7 @@ views:
|
|||||||
show_brightness_control: true
|
show_brightness_control: true
|
||||||
show_color_temp_control: true
|
show_color_temp_control: true
|
||||||
grid_options:
|
grid_options:
|
||||||
columns: 4
|
columns: 6
|
||||||
rows: 2
|
rows: 2
|
||||||
header:
|
header:
|
||||||
layout: responsive
|
layout: responsive
|
||||||
|
|||||||
Reference in New Issue
Block a user