欢迎模块增加应用图标
This commit is contained in:
@@ -4569,21 +4569,23 @@ views:
|
||||
media_content_id: __MANUAL_ENTRY__
|
||||
grid_options:
|
||||
rows: auto
|
||||
columns: 3
|
||||
columns: 4
|
||||
- type: custom:vertical-stack-in-card
|
||||
cards:
|
||||
- type: custom:button-card
|
||||
show_icon: false
|
||||
show_name: false
|
||||
show_state: false
|
||||
grid_options:
|
||||
columns: 12
|
||||
rows: 2
|
||||
row: 2
|
||||
custom_fields:
|
||||
greeting: |
|
||||
[[[
|
||||
const h = new Date().getHours();
|
||||
if (h < 6) return "夜深了";
|
||||
if (h < 11) return "早上好";
|
||||
if (h < 14) return "中午好";
|
||||
if (h < 14) return "晏昼好";
|
||||
if (h < 18) return "下午好";
|
||||
return "晚上好";
|
||||
]]]
|
||||
@@ -4601,16 +4603,6 @@ views:
|
||||
{ month: 'long', day: 'numeric', weekday: 'long' }
|
||||
);
|
||||
]]]
|
||||
subtitle: |
|
||||
[[[
|
||||
const leak = Number(states['sensor.water_damage_count']?.state ?? 0);
|
||||
const lights = Number(states['sensor.lights_of_count']?.state ?? 0);
|
||||
const ac = Number(states['sensor.aircondition_of_count']?.state ?? 0);
|
||||
|
||||
if (leak > 0) return `⚠ 检测到 ${leak} 个水浸告警`;
|
||||
if (lights === 0 && ac === 0) return "家里一切正常";
|
||||
return `${lights} 盏灯开启 · ${ac} 台空调运行`;
|
||||
]]]
|
||||
styles:
|
||||
card:
|
||||
- height: 120px
|
||||
@@ -4650,6 +4642,630 @@ views:
|
||||
- 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') %}
|
||||
|
||||
{% else %}
|
||||
{{states('sensor.lights_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 = '5px' %}
|
||||
|
||||
/* 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 = 'yellow' %}
|
||||
{% 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: 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
|
||||
column_span: 4
|
||||
cards:
|
||||
@@ -6377,6 +6993,8 @@ views:
|
||||
/* 组合卡片边缘与内部卡片之间的距离 */
|
||||
padding: 2px 4px !important;
|
||||
}
|
||||
grid_options:
|
||||
columns: 10
|
||||
- square: false
|
||||
type: grid
|
||||
cards:
|
||||
@@ -7476,7 +8094,7 @@ views:
|
||||
hold_action:
|
||||
action: more-info
|
||||
grid_options:
|
||||
columns: 4
|
||||
columns: 5
|
||||
rows: 1
|
||||
- type: custom:mushroom-template-card
|
||||
entity: fan.xiaomi_cn_2196552583_p90_s_2_fan
|
||||
@@ -7536,7 +8154,7 @@ views:
|
||||
show_brightness_control: true
|
||||
show_color_temp_control: true
|
||||
grid_options:
|
||||
columns: 4
|
||||
columns: 6
|
||||
rows: 2
|
||||
- type: custom:mushroom-light-card
|
||||
entity: light.shhf_cn_1129134246_sflt11_s_2_light
|
||||
@@ -7546,7 +8164,7 @@ views:
|
||||
show_brightness_control: true
|
||||
show_color_temp_control: true
|
||||
grid_options:
|
||||
columns: 4
|
||||
columns: 6
|
||||
rows: 2
|
||||
- type: custom:mushroom-light-card
|
||||
entity: light.pmfbj_cn_1186735998_xsx340_s_2
|
||||
@@ -7556,7 +8174,7 @@ views:
|
||||
show_brightness_control: true
|
||||
show_color_temp_control: true
|
||||
grid_options:
|
||||
columns: 4
|
||||
columns: 6
|
||||
rows: 2
|
||||
- type: custom:mushroom-light-card
|
||||
entity: light.pmfbj_cn_1186772227_xsx340_s_2
|
||||
@@ -7566,7 +8184,7 @@ views:
|
||||
show_brightness_control: true
|
||||
show_color_temp_control: true
|
||||
grid_options:
|
||||
columns: 4
|
||||
columns: 6
|
||||
rows: 2
|
||||
- type: custom:mushroom-light-card
|
||||
entity: light.pmfbj_cn_1186744390_xsx340_s_2
|
||||
@@ -7576,7 +8194,7 @@ views:
|
||||
show_brightness_control: true
|
||||
show_color_temp_control: true
|
||||
grid_options:
|
||||
columns: 4
|
||||
columns: 6
|
||||
rows: 2
|
||||
- type: custom:mushroom-light-card
|
||||
entity: light.opple_cn_2005385416_moat_s_2_light
|
||||
@@ -7586,7 +8204,7 @@ views:
|
||||
show_brightness_control: true
|
||||
show_color_temp_control: true
|
||||
grid_options:
|
||||
columns: 4
|
||||
columns: 6
|
||||
rows: 2
|
||||
header:
|
||||
layout: responsive
|
||||
|
||||
Reference in New Issue
Block a user