mirror of
https://github.com/Anashost/HA-Animated-cards.git
synced 2026-01-11 16:20:05 +00:00
Add Batch 4 with water boiler and tank cards
Added Batch 4 section with new water boiler and tank cards.
This commit is contained in:
AnasHost
GitHub
518
README.md
518
README.md
@@ -35,6 +35,10 @@ explains how to do it.
|
||||
## Batch 3:
|
||||
|
||||
|
||||
## Batch 4:
|
||||
|
||||
|
||||
|
||||
# Cards:
|
||||
|
||||
<details>
|
||||
@@ -10807,6 +10811,520 @@ card_mod:
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>64 - Water Boiler (C)</strong></summary>
|
||||
|
||||
```yaml
|
||||
type: custom:mushroom-entity-card
|
||||
entity: sensor.water_boiler
|
||||
name: Water Boiler
|
||||
icon: mdi:water-boiler
|
||||
primary_info: state
|
||||
secondary_info: name
|
||||
tap_action:
|
||||
action: more-info
|
||||
icon_color: white
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
/* ====== CONFIG ====== */
|
||||
{% set temp = states(config.entity) | float(0) %}
|
||||
|
||||
{% if temp < 30 %}
|
||||
{% set level_pct = (temp / 29) * 39 %}
|
||||
{% set rgb = '29, 130, 150' %} /* Blue */
|
||||
{% set speed = '6s' %}
|
||||
|
||||
{% elif temp < 35 %}
|
||||
{% set level_pct = 40 + ((temp - 30) / 5) * 39 %}
|
||||
{% set rgb = '150, 109, 29' %} /* Orange */
|
||||
{% set speed = '4s' %}
|
||||
|
||||
{% else %}
|
||||
{% set raw_red = 80 + ((temp - 35) / 10) * 12 %}
|
||||
/* Hard Cap at 96% temp exceeds 45C */
|
||||
{% set level_pct = 96 if raw_red > 96 else raw_red %}
|
||||
{% set rgb = '150, 29, 29' %} /* Red */
|
||||
{% set speed = '2s' %}
|
||||
{% endif %}
|
||||
|
||||
/* ===== VARIABLES ===== */
|
||||
--liq-color: rgb({{ rgb }});
|
||||
--liq-level: {{ level_pct }}%;
|
||||
--wave-speed: {{ speed }};
|
||||
|
||||
/* ===== STYLING ===== */
|
||||
# background-color: #1c1c1c !important;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/* Icon Styling */
|
||||
mushroom-shape-icon {
|
||||
--icon-size: 68px;
|
||||
display: flex;
|
||||
margin: -18px 0 10px -18px !important;
|
||||
padding-right: 15px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* --- LIQUID Bar --- */
|
||||
ha-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0;
|
||||
z-index: -1;
|
||||
|
||||
/* Width based on our calculated level */
|
||||
width: calc(var(--liq-level) - 60px);
|
||||
|
||||
/* SOLID COLOR prevents the "Seam" issue */
|
||||
background: var(--liq-color);
|
||||
|
||||
transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
/* --- SPINNING WAVE --- */
|
||||
ha-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
/* Only hide wave if empty (<= 0C) */
|
||||
/* Removed the upper limit check so wave stays at high temp */
|
||||
display: {{ 'none' if temp <= 0 else 'block' }};
|
||||
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
background: var(--liq-color);
|
||||
box-shadow: 0 0 25px rgba({{ rgb }}, 0.5);
|
||||
border-radius: 40%;
|
||||
|
||||
/* Position Logic */
|
||||
left: calc(var(--liq-level) - 120px);
|
||||
top: calc(50% - 60px);
|
||||
|
||||
animation: spin-wave var(--wave-speed) linear infinite;
|
||||
transition: left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
/* --- CONTENT ON TOP --- */
|
||||
.mushroom-state-item {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Force Icon White */
|
||||
ha-state-icon {
|
||||
color: white !important;
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
|
||||
}
|
||||
|
||||
/* --- ANIMATIONZZ --- */
|
||||
@keyframes spin-wave {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>65 - Water Boiler (F)</strong></summary>
|
||||
|
||||
```yaml
|
||||
type: custom:mushroom-entity-card
|
||||
entity: sensor.water_boiler
|
||||
name: Water Boiler (F)
|
||||
icon: mdi:water-boiler
|
||||
primary_info: state
|
||||
secondary_info: name
|
||||
tap_action:
|
||||
action: more-info
|
||||
icon_color: white
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
/* ====== CONFIG ====== */
|
||||
{% set temp = states(config.entity) | float(0) %}
|
||||
|
||||
{% if temp < 100 %}
|
||||
{% set level_pct = (temp / 99) * 35 %}
|
||||
{% set rgb = '29, 130, 150' %} /* Blue */
|
||||
{% set speed = '6s' %}
|
||||
|
||||
{% elif temp < 150 %}
|
||||
{% set level_pct = 36 + ((temp - 100) / 50) * 35 %}
|
||||
{% set rgb = '150, 109, 29' %} /* Orange */
|
||||
{% set speed = '4s' %}
|
||||
|
||||
{% else %}
|
||||
{% set raw = 72 + ((temp - 150) / 40) * 24 %}
|
||||
{% set level_pct = 96 if raw > 96 else raw %}
|
||||
{% set rgb = '150, 29, 29' %} /* Red */
|
||||
{% set speed = '2s' %}
|
||||
{% endif %}
|
||||
|
||||
/* ===== VARIABLES ===== */
|
||||
--liq-color: rgb({{ rgb }});
|
||||
--liq-level: {{ level_pct }}%;
|
||||
--wave-speed: {{ speed }};
|
||||
|
||||
/* ===== STYLING ===== */
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
mushroom-shape-icon {
|
||||
--icon-size: 68px;
|
||||
display: flex;
|
||||
margin: -18px 0 10px -18px !important;
|
||||
padding-right: 15px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
ha-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0;
|
||||
z-index: -1;
|
||||
width: calc(var(--liq-level) - 60px);
|
||||
background: var(--liq-color);
|
||||
transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
ha-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
display: {{ 'none' if temp <= 40 else 'block' }};
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: var(--liq-color);
|
||||
box-shadow: 0 0 25px rgba({{ rgb }}, 0.5);
|
||||
border-radius: 40%;
|
||||
left: calc(var(--liq-level) - 120px);
|
||||
top: calc(50% - 60px);
|
||||
animation: spin-wave var(--wave-speed) linear infinite;
|
||||
transition: left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.mushroom-state-item {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
ha-state-icon {
|
||||
color: white !important;
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
|
||||
}
|
||||
|
||||
@keyframes spin-wave {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>66 - Water Tank</strong></summary>
|
||||
|
||||
```yaml
|
||||
type: custom:mushroom-entity-card
|
||||
entity: sensor.water_tank_level
|
||||
name: Water Tank
|
||||
tap_action:
|
||||
action: more-info
|
||||
primary_info: state
|
||||
secondary_info: name
|
||||
icon: mdi:water
|
||||
layout: vertical
|
||||
icon_color: white
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
/* ====== DIMENSIONS ====== */
|
||||
height: 200px !important;
|
||||
--custom-icon-size: 60px;
|
||||
--custom-state-font-size: 20px; /* Size of the % number */
|
||||
--custom-name-font-size: 14px;
|
||||
|
||||
/* ====== LOGIC ====== */
|
||||
{% set level = states(config.entity) | float(0) %}
|
||||
|
||||
/* Colors */
|
||||
{% if level <= 20 %}
|
||||
{% set rgb = '150, 29, 29' %} /* Red */
|
||||
{% else %}
|
||||
{% set rgb = '29, 130, 150' %} /* Blue */
|
||||
{% endif %}
|
||||
|
||||
--liq-color: rgb({{ rgb }});
|
||||
--liq-color-light: rgba({{ rgb }}, 0.7);
|
||||
--liq-level: {{ level }}%;
|
||||
|
||||
--card-primary-font-size: var(--custom-state-font-size) !important;
|
||||
--card-secondary-font-size: var(--custom-name-font-size) !important;
|
||||
|
||||
/* Size of the small shapes */
|
||||
--wave-size: 40px;
|
||||
|
||||
/* Gradient Body (Solid) */
|
||||
background: linear-gradient(to top,
|
||||
var(--liq-color) 0%,
|
||||
var(--liq-color) var(--liq-level),
|
||||
transparent var(--liq-level),
|
||||
transparent 100%
|
||||
) !important;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 0;
|
||||
|
||||
border: 1px solid rgba({{ rgb }}, 1);
|
||||
}
|
||||
|
||||
/* --- Animation Layers --- */
|
||||
ha-card::before, ha-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1; /* Low Z-Index so content sits on top */
|
||||
|
||||
height: 30px;
|
||||
width: 200%;
|
||||
bottom: var(--liq-level);
|
||||
left: 0;
|
||||
|
||||
background-image: radial-gradient(
|
||||
circle at 50% 100%,
|
||||
var(--liq-color) 65%,
|
||||
transparent 66%
|
||||
);
|
||||
|
||||
background-size: var(--wave-size) 40px;
|
||||
background-repeat: repeat-x;
|
||||
display: {{ 'none' if level <= 0 or level >= 100 else 'block' }};
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Front Wave */
|
||||
ha-card::after {
|
||||
background-image: radial-gradient(
|
||||
circle at 50% 100%,
|
||||
var(--liq-color) 65%,
|
||||
transparent 66%
|
||||
);
|
||||
animation: scroll-left 10s linear infinite;
|
||||
}
|
||||
|
||||
/* Back Wave */
|
||||
ha-card::before {
|
||||
background-image: radial-gradient(
|
||||
circle at 50% 100%,
|
||||
var(--liq-color-light) 65%,
|
||||
transparent 66%
|
||||
);
|
||||
animation: scroll-right 3s linear infinite;
|
||||
bottom: calc(var(--liq-level) + 5px);
|
||||
}
|
||||
|
||||
/* content wrapper */
|
||||
mushroom-card-content {
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
mushroom-shape-icon {
|
||||
position: relative !important;
|
||||
z-index: 11 !important; /* Higher than content wrapper */
|
||||
--icon-size: var(--custom-icon-size) !important;
|
||||
}
|
||||
|
||||
/* Text (Name ,, State) */
|
||||
mushroom-state-info {
|
||||
position: relative !important;
|
||||
z-index: 11 !important;
|
||||
text-shadow: 0px 1px 3px rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
/* icon color */
|
||||
ha-state-icon {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* --- ANIMATIONS --- */
|
||||
@keyframes scroll-left {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(calc(var(--wave-size) * -1)); }
|
||||
}
|
||||
|
||||
@keyframes scroll-right {
|
||||
0% { transform: translateX(calc(var(--wave-size) * -1)); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>67 - Fuel Tank</strong></summary>
|
||||
|
||||
```yaml
|
||||
type: custom:mushroom-entity-card
|
||||
entity: sensor.fuel_tank_level
|
||||
name: Fuel Tank
|
||||
tap_action:
|
||||
action: more-info
|
||||
primary_info: state
|
||||
secondary_info: name
|
||||
icon: mdi:barrel
|
||||
layout: vertical
|
||||
icon_color: white
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
/* ====== DIMENSIONS ====== */
|
||||
height: 200px !important;
|
||||
--custom-icon-size: 60px;
|
||||
--custom-state-font-size: 20px; /* Size of the % number */
|
||||
--custom-name-font-size: 14px;
|
||||
|
||||
/* ====== LOGIC ====== */
|
||||
{% set level = states(config.entity) | float(0) %}
|
||||
|
||||
/* Colors */
|
||||
{% if level <= 20 %}
|
||||
{% set rgb = '150, 29, 29' %} /* Red */
|
||||
{% else %}
|
||||
{% set rgb = '150, 109, 29' %} /* Orange..ish */
|
||||
{% endif %}
|
||||
|
||||
--liq-color: rgb({{ rgb }});
|
||||
--liq-color-light: rgba({{ rgb }}, 0.7);
|
||||
--liq-level: {{ level }}%;
|
||||
|
||||
--card-primary-font-size: var(--custom-state-font-size) !important;
|
||||
--card-secondary-font-size: var(--custom-name-font-size) !important;
|
||||
|
||||
/* Size of the small shapes */
|
||||
--wave-size: 40px;
|
||||
|
||||
/* Gradient Body (Solid) */
|
||||
background: linear-gradient(to top,
|
||||
var(--liq-color) 0%,
|
||||
var(--liq-color) var(--liq-level),
|
||||
transparent var(--liq-level),
|
||||
transparent 100%
|
||||
) !important;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 0;
|
||||
|
||||
border: 1px solid rgba({{ rgb }}, 1);
|
||||
}
|
||||
|
||||
/* --- Animation Layers --- */
|
||||
ha-card::before, ha-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1; /* Low Z-Index so content sits on top */
|
||||
|
||||
height: 30px;
|
||||
width: 200%;
|
||||
bottom: var(--liq-level);
|
||||
left: 0;
|
||||
|
||||
background-image: radial-gradient(
|
||||
circle at 50% 100%,
|
||||
var(--liq-color) 65%,
|
||||
transparent 66%
|
||||
);
|
||||
|
||||
background-size: var(--wave-size) 40px;
|
||||
background-repeat: repeat-x;
|
||||
display: {{ 'none' if level <= 0 or level >= 100 else 'block' }};
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Front Wave */
|
||||
ha-card::after {
|
||||
background-image: radial-gradient(
|
||||
circle at 50% 100%,
|
||||
var(--liq-color) 65%,
|
||||
transparent 66%
|
||||
);
|
||||
animation: scroll-left 10s linear infinite;
|
||||
}
|
||||
|
||||
/* Back Wave */
|
||||
ha-card::before {
|
||||
background-image: radial-gradient(
|
||||
circle at 50% 100%,
|
||||
var(--liq-color-light) 65%,
|
||||
transparent 66%
|
||||
);
|
||||
animation: scroll-right 3s linear infinite;
|
||||
bottom: calc(var(--liq-level) + 5px);
|
||||
}
|
||||
|
||||
/* content wrapper */
|
||||
mushroom-card-content {
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
mushroom-shape-icon {
|
||||
position: relative !important;
|
||||
z-index: 11 !important; /* Higher than content wrapper */
|
||||
--icon-size: var(--custom-icon-size) !important;
|
||||
}
|
||||
|
||||
/* Text (Name ,, State) */
|
||||
mushroom-state-info {
|
||||
position: relative !important;
|
||||
z-index: 11 !important;
|
||||
text-shadow: 0px 1px 3px rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
/* icon color */
|
||||
ha-state-icon {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* --- ANIMATIONS --- */
|
||||
@keyframes scroll-left {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(calc(var(--wave-size) * -1)); }
|
||||
}
|
||||
|
||||
@keyframes scroll-right {
|
||||
0% { transform: translateX(calc(var(--wave-size) * -1)); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
```
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user