From 67b0d8ae538e36bc17c5aaae69525b046feced43 Mon Sep 17 00:00:00 2001 From: AnasHost <41167157+Anashost@users.noreply.github.com> Date: Fri, 17 Jul 2026 14:08:56 +0200 Subject: [PATCH] Update climate.md with support badges and weather card Added support badges, animated weather card template, and instructions for Home Assistant integration. --- climate.md | 649 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 649 insertions(+) create mode 100644 climate.md diff --git a/climate.md b/climate.md new file mode 100644 index 0000000..281f36f --- /dev/null +++ b/climate.md @@ -0,0 +1,649 @@ + + +[![Revolut.Me][revolut_me_shield]][revolut_me] +[![PayPal.Me][paypal_me_shield]][paypal_me] +[![ko_fi][ko_fi_shield]][ko_fi_me] +[![buymecoffee][buy_me_coffee_shield]][buy_me_coffee_me] +[![patreon][patreon_shield]][patreon_me] + + + +
+ + + +
+ +# Home Assistant Animated Climate Collection + +This [YouTube Video](https://youtu.be/xj5jhU1QD48) explains how to do it. + +## Weather Card + +

+ ezgif-5b0eb292c9c97807 +

+ +
+ +
+Animated Weather Card + +```yaml +type: custom:button-card +variables: + weather_entity: + temp_entity: + feels_like_entity: + cond_entity: + hum_entity: + wind_entity: + wind_gust_entity: + rain_entity: + sun_entity: sun.sun + cond_clear: sunny, sun + cond_clear_night: clear-night, clear night + cond_cloudy: cloudy, cloud, mostly cloudy, overcast + cond_partlycloudy: partlycloudy, partly-cloudy + cond_rainy: rainy, rain, drizzle, pouring, showers + cond_snowy: snowy, snow, sleet + cond_storm: storm, thunderstorm, lightning + cond_fog: fog, mist, hazy + temptrend_show: true + temptrend_entity: sensor.temptrend_24h +tap_action: + action: none +show_name: false +show_icon: false +show_state: false +styles: + card: + - padding: 0 + - border-radius: 20px + - box-shadow: 0 12px 30px -10px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2) + - border: none + - color: white + - font-family: >- + -apple-system, BlinkMacSystemFont, "SF Pro Display", "Roboto", + sans-serif + - overflow: hidden + - position: relative + - background: "#1e293b" + - isolation: isolate + grid: + - grid-template-areas: "\"content\"" + - grid-template-columns: 1fr + - grid-template-rows: 1fr + custom_fields: + content: + - pointer-events: auto !important + - z-index: 99 !important +extra_styles: > + .bg-container { position:absolute; inset:0; z-index:0; width:100%; + height:100%; transition:background 1.2s ease-in-out; } + + .effect-layer { position:absolute; inset:0; width:100%; height:100%; + pointer-events:none; z-index:1; overflow:hidden; } + + @keyframes rain-fall { from { background-position:0 -200px; } to { + background-position:0 0; } } + + @keyframes snowflakes-sliding { 0% { background-position:0% 0%; } 100% { + background-position:0% 100%; } } + + @keyframes celestial-breathe { 0% { transform:scale(0.96); opacity:0.95; } + 100% { transform:scale(1.04); opacity:1; } } + + @keyframes aura-pulse { 0% { transform:scale(1); opacity:0.3; } 100% { + transform:scale(1.4); opacity:0.6; } } + + @keyframes cloud-drift-1 { 0% { transform:translateX(450px); opacity:0; } 15% + { opacity:0.9; } 75% { transform:translateX(180px); opacity:0.9; } 100% { + transform:translateX(110px); opacity:0; } } + + @keyframes cloud-drift-2 { 0% { transform:translateX(400px); opacity:0; } 20% + { opacity:0.5; } 70% { transform:translateX(200px); opacity:0.5; } 100% { + transform:translateX(130px); opacity:0; } } + + @keyframes fog-drift { 0% { transform:translateX(-50%) skewX(-15deg); } 100% { + transform:translateX(0%) skewX(-15deg); } } + + @keyframes storm-strike { 0%,21%,23%,56%,81%,100% { opacity:0; } 20% { + opacity:1; top:10%; left:10%; transform:scale(1) rotate(-10deg); + filter:brightness(2); } 22% { opacity:0.5; top:10%; left:10%; + transform:scale(1); } 55% { opacity:1; top:10%; left:40%; transform:scale(1.5) + rotate(0deg); } 80% { opacity:1; top:30%; left:70%; transform:scale(0.8) + rotate(10deg); } } + + @keyframes room-flash { 0%,21%,23%,56%,81%,100% { opacity:0; } 20% { + opacity:0.4; } 22% { opacity:0.1; } 55% { opacity:0.6; } 80% { opacity:0.3; } + } + + @keyframes shine { 0%,85%,100% { opacity:0.2; transform:scale(1); + box-shadow:none; } 92% { opacity:1; transform:scale(1.4); box-shadow:0 0 5px + 1px rgba(255,255,255,0.9); } } + + .celestial-shared { position:absolute; border-radius:50%; } + + .sun-core-day { width:100px; height:100px; top:-20px; right:-20px; + background:radial-gradient(circle,#fff9c4 0%,#ffca28 60%,#ff8f00 100%); + box-shadow:0 0 40px rgba(255,193,7,0.8); animation:celestial-breathe 5s + infinite alternate ease-in-out; } + + .sun-aura-day { width:160px; height:160px; top:-50px; right:-50px; + background:radial-gradient(circle,rgba(255,213,79,0.6) 0%,transparent 70%); + filter:blur(10px); animation:aura-pulse 6s infinite alternate ease-in-out; } + + .sun-core-twilight { width:100px; height:100px; top:-10px; right:-10px; + background:radial-gradient(circle,#fff3e0 0%,#ffcc80 60%,#ffb74d 100%); + box-shadow:0 0 50px rgba(255,183,77,0.7); animation:celestial-breathe 6s + infinite alternate ease-in-out; } + + .sun-aura-twilight { width:160px; height:160px; top:-40px; right:-40px; + background:radial-gradient(circle,rgba(255,183,77,0.5) 0%,transparent 70%); + filter:blur(12px); animation:aura-pulse 7s infinite alternate ease-in-out; } + + .moon-core-night { width:90px; height:90px; top:-15px; right:-15px; + background:radial-gradient(circle,#ffffff 0%,#e0e5db 50%,#9ca3af 100%); + box-shadow:0 0 30px rgba(200,220,255,0.6), inset -10px -10px 20px + rgba(0,0,0,0.3); animation:celestial-breathe 6s infinite alternate + ease-in-out; } + + .moon-aura-night { width:150px; height:150px; top:-45px; right:-45px; + background:radial-gradient(circle,rgba(200,220,255,0.3) 0%,transparent 70%); + filter:blur(10px); animation:aura-pulse 8s infinite alternate ease-in-out; } + + .stars { position:absolute; inset:0; overflow:hidden; pointer-events:none; } + + .star-layer { position:absolute; width:1.5px; height:1.5px; + background:transparent; border-radius:50%; box-shadow:12px 45px + rgba(255,255,255,0.8),88px 12px rgba(255,255,255,0.5),145px 80px #fff,210px + 25px rgba(255,255,255,0.6),280px 95px rgba(255,255,255,0.9),340px 15px + rgba(255,255,255,0.4),415px 70px #fff,490px 30px rgba(255,255,255,0.7),560px + 110px rgba(255,255,255,0.8),65px 120px rgba(255,255,255,0.5),180px 135px + #fff,310px 50px rgba(255,255,255,0.6),450px 140px rgba(255,255,255,0.9); } + + .star-layer::after { content:''; position:absolute; width:1px; height:1px; + background:transparent; border-radius:50%; box-shadow:35px 20px + rgba(255,255,255,0.7),105px 65px rgba(255,255,255,0.9),160px 15px + rgba(255,255,255,0.4),235px 115px #fff,295px 35px rgba(255,255,255,0.8),370px + 125px rgba(255,255,255,0.5),425px 45px rgba(255,255,255,0.6),485px 95px + #fff,530px 15px rgba(255,255,255,0.9),80px 100px rgba(255,255,255,0.4),195px + 60px rgba(255,255,255,0.7),260px 130px #fff,390px 85px + rgba(255,255,255,0.5),510px 125px rgba(255,255,255,0.8); } + + .t-star { position:absolute; width:1.5px; height:1.5px; background:white; + border-radius:50%; opacity:0.2; } + + .ts-1 { top:18%; left:22%; animation:shine 4.2s infinite; } + + .ts-2 { top:35%; left:68%; animation:shine 5.5s infinite 1.8s; } + + .ts-3 { top:12%; left:48%; animation:shine 3.6s infinite 2.5s; } + + .css-cloud { position:absolute; background:rgba(255,255,255,0.8); + border-radius:50px; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.15)); } + + .css-cloud::before, .css-cloud::after { content:''; position:absolute; + background:inherit; border-radius:50%; } + + .cloud-twilight { background:rgba(255,220,210,0.85); filter:drop-shadow(0 8px + 16px rgba(100,0,0,0.1)); } + + .cloud-night { background:rgba(200,210,225,0.4); filter:drop-shadow(0 5px 10px + rgba(0,0,0,0.4)); } + + .cloud-shape-1 { width:140px; height:45px; top:40px; animation:cloud-drift-1 + 16s linear infinite; z-index:2; } + + .cloud-shape-1::before { width:70px; height:70px; top:-35px; left:25px; } + + .cloud-shape-1::after { width:50px; height:50px; top:-20px; right:20px; } + + .cloud-shape-2 { width:105px; height:34px; top:65px; animation:cloud-drift-2 + 22s linear infinite -10s; z-index:1; } + + .cloud-shape-2::before { width:52px; height:52px; top:-26px; left:19px; } + + .cloud-shape-2::after { width:37px; height:37px; top:-15px; right:15px; } + + .rain-1 { background-image:radial-gradient(ellipse at 30px + 20px,rgba(255,255,255,0.6) 1px,transparent 3px),radial-gradient(ellipse at + 80px 100px,rgba(255,255,255,0.6) 1px,transparent 3px),radial-gradient(ellipse + at 150px 60px,rgba(255,255,255,0.6) 1px,transparent + 3px),radial-gradient(ellipse at 250px 150px,rgba(255,255,255,0.6) + 1px,transparent 3px); background-size:300px 200px; animation:rain-fall 0.6s + linear infinite; opacity:0.8; } + + .rain-2 { background-image:radial-gradient(ellipse at 10px + 50px,rgba(255,255,255,0.4) 1px,transparent 2px),radial-gradient(ellipse at + 60px 120px,rgba(255,255,255,0.4) 1px,transparent 2px),radial-gradient(ellipse + at 120px 30px,rgba(255,255,255,0.4) 1px,transparent + 2px),radial-gradient(ellipse at 200px 90px,rgba(255,255,255,0.4) + 1px,transparent 2px); background-size:300px 180px; animation:rain-fall 1.2s + linear infinite; opacity:0.5; } + + .snow-1 { height:200%; background-image:radial-gradient(circle at 20% + 10%,rgba(255,255,255,0.4) 0%,transparent 6px),radial-gradient(circle at 80% + 30%,rgba(255,255,255,0.4) 0%,transparent 8px),radial-gradient(circle at 40% + 50%,rgba(255,255,255,0.4) 0%,transparent 6px),radial-gradient(circle at 70% + 75%,rgba(255,255,255,0.4) 0%,transparent 7px),radial-gradient(circle at 10% + 90%,rgba(255,255,255,0.4) 0%,transparent 5px),radial-gradient(circle at 60% + 15%,rgba(255,255,255,0.4) 0%,transparent 6px); background-size:100% 50%; + animation:snowflakes-sliding 2s linear infinite; opacity:0.8; } + + .snow-2 { height:200%; background-image:radial-gradient(circle at 15% + 5%,rgba(255,255,255,0.3) 0%,transparent 4px),radial-gradient(circle at 55% + 25%,rgba(255,255,255,0.3) 0%,transparent 3px),radial-gradient(circle at 85% + 45%,rgba(255,255,255,0.3) 0%,transparent 4px),radial-gradient(circle at 25% + 65%,rgba(255,255,255,0.3) 0%,transparent 3px),radial-gradient(circle at 65% + 85%,rgba(255,255,255,0.3) 0%,transparent 4px); background-size:100% 50%; + animation:snowflakes-sliding 1s linear infinite; opacity:0.6; } + + .fog-band { position:absolute; width:200%; height:40px; + background:linear-gradient(to + right,transparent,rgba(255,255,255,0.7),transparent); filter:blur(10px); } + + .fog-1 { top:40px; animation:fog-drift 18s linear infinite alternate; } + + .fog-2 { top:100px; opacity:0.6; animation:fog-drift 28s linear infinite + alternate-reverse; width:250%; } + + .storm-flash { background:white; animation:room-flash 7s steps(1) infinite; + mix-blend-mode:overlay; } + + .storm-bolt { width:80px; height:140px; background:#e0f2fe; + clip-path:polygon(55% 0%,80% 0%,50% 45%,85% 45%,20% 100%,40% 55%,10% 55%); + filter:drop-shadow(0 0 15px rgba(255,255,255,0.9)); animation:storm-strike 6s + steps(1) infinite; } + + .card-content { position:relative; z-index:5; padding:12px 16px; display:flex; + flex-direction:column; width:100%; box-sizing:border-box; } + + .top-row { display:flex; justify-content:space-between; align-items:center; + width:100%; } + + .glass-metric { pointer-events:auto; display:flex; align-items:center; + background:rgba(0,0,0,0.15); backdrop-filter:blur(20px) saturate(180%); + -webkit-backdrop-filter:blur(20px) saturate(180%); border:1px solid + rgba(255,255,255,0.2); border-radius:12px; padding:4px 8px; font-size:11px; + font-weight:600; color:white; text-shadow:0 1px 2px rgba(0,0,0,0.4); + box-shadow:0 2px 10px rgba(0,0,0,0.05); letter-spacing:0.2px; + white-space:nowrap; transition:all 0.2s ease; cursor:pointer; } + + .glass-metric:hover, .glass-metric:active { background:rgba(0,0,0,0.25); + transform:translateY(-1px); } + + .glass-metric ha-icon { opacity:0.9; width:14px; height:14px; + margin-right:4px; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.3)); } + + .hover-text-block { pointer-events:auto; display:inline-flex; + align-items:center; cursor:pointer; border-radius:8px; padding:2px 6px; + margin-left:-6px; transition:background 0.2s ease; } + + .hover-text-block:hover, .hover-text-block:active { + background:rgba(255,255,255,0.15); } + + .temptrend-container { width:100%; margin-top:2px; padding-top:8px; + border-top:0px solid rgba(255,255,255,0.1); } + + .temptrend-bar { width:100%; height:6px; border-radius:4px; opacity:0.9; + box-shadow:inset 0 1px 2px rgba(0,0,0,0.4); } +custom_fields: + content: | + [[[ + const wE = variables.weather_entity, tE = variables.temp_entity, cE = variables.cond_entity; + const wV = wE && states[wE], tV = tE && states[tE], cV = cE && states[cE]; + + if (!wV && !tV && !cV) { + return ` +
+ + + Setup Required + + + Provide a valid weather_entity,
or both temp_entity and cond_entity. + +
`; + } + + const wS = wV ? states[wE].state : null; + const tS = tV ? states[tE].state : null; + const cS = cV ? states[cE].state : null; + + const clk = e => e ? `ontouchstart="this.sX=event.touches[0].clientX;this.sY=event.touches[0].clientY;" + ontouchend="if(Math.abs(event.changedTouches[0].clientX-this.sX)<15&&Math.abs(event.changedTouches[0].clientY-this.sY)<15)this.dispatchEvent(new CustomEvent('hass-more-info',{bubbles:true,composed:true,detail:{entityId:'${e}'}}));" + onclick="this.dispatchEvent(new CustomEvent('hass-more-info',{bubbles:true,composed:true,detail:{entityId:'${e}'}}));"` : ''; + + const wTemp = v => ` + ${v}`; + + const wCond = v => ` + ${v}`; + + const tBdg = ` +
+ + - +
`; + + let tH = tBdg; + if (tV) { + if (tS === 'unavailable') tH = wTemp('-'); + else if (tS !== 'unknown') tH = wTemp(Math.round(tS) + '°'); + } else if (wV) { + if (wS === 'unavailable') tH = wTemp('-'); + else if (states[wE].attributes?.temperature !== undefined) + tH = wTemp(Math.round(states[wE].attributes.temperature) + '°'); + } + + const cBdg = ` +
+ + - +
`; + + let rC = '', cH = cBdg; + if (cV) { + if (cS === 'unavailable') cH = wCond('-'); + else if (cS !== 'unknown') rC = cS.toLowerCase(); + } else if (wV) { + if (wS === 'unavailable') cH = wCond('-'); + else if (wS !== 'unknown') rC = wS.toLowerCase(); + } + + if (rC && !isNaN(Number(rC))) { + rC = ''; + cH = cBdg; + } else if (rC) { + const fmtC = rC.replace(/[-_]/g, ' ').replace(/partlycloudy/gi, 'partly cloudy') + .split(' ').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' '); + cH = wCond(fmtC); + } + + const fE = variables.feels_like_entity, fV = fE && states[fE]; + const fS = fV ? states[fE].state : null; + let fH = ''; + + if (fV) { + if (fS === 'unavailable') fH = ` +
+ Feels like - +
`; + else if (fS !== 'unknown') fH = ` +
+ Feels like ${Math.round(fS)}° +
`; + } else if (wV) { + if (wS === 'unavailable') fH = ` +
+ Feels like - +
`; + else if (states[wE].attributes?.apparent_temperature !== undefined) fH = ` +
+ + Feels like ${Math.round(states[wE].attributes.apparent_temperature)}° + +
`; + } + + const bM = (e, a, uA, ic, p) => { + const eV = e && states[e], eS = eV ? states[e].state : null; + if (eV) { + if (eS === 'unavailable') return `
-
`; + if (eS !== 'unknown') { + const u = p ? '%' : ' ' + (states[e].attributes?.unit_of_measurement || ''); + return `
${Math.round(eS)}${u}
`; + } + } else if (wV) { + if (wS === 'unavailable') return `
-
`; + const val = states[wE].attributes?.[a]; + if (val !== undefined) { + const u = p ? '%' : ' ' + (states[wE].attributes?.[uA] || ''); + return `
${Math.round(val)}${u}
`; + } + } + return ''; + }; + + const mL = [ + [variables.hum_entity, 'humidity', '', 'mdi:water-percent', true], + [variables.wind_entity, 'wind_speed', 'wind_speed_unit', 'mdi:weather-windy', false], + [variables.wind_gust_entity, 'wind_gust', 'wind_speed_unit', 'mdi:weather-windy-variant', false], + [variables.rain_entity, 'precipitation', 'precipitation_unit', 'mdi:weather-pouring', false] + ]; + const mH = mL.map(m => bM(...m)).join(''); + + let cK = 'unknown'; + const cM = { + 'clear': variables.cond_clear, 'clear-night': variables.cond_clear_night, + 'cloudy': variables.cond_cloudy, 'partlycloudy': variables.cond_partlycloudy, + 'rainy': variables.cond_rainy, 'snowy': variables.cond_snowy, + 'storm': variables.cond_storm, 'fog': variables.cond_fog + }; + + if (rC) { + for (const [k, v] of Object.entries(cM)) { + if (v?.split(',').map(s => s.trim().toLowerCase()).includes(rC)) { cK = k; break; } + } + } + + let tD = 'day'; + const sE = variables.sun_entity, el = sE && states[sE]?.attributes?.elevation; + if (el !== undefined) { + tD = el < -4 ? 'night' : (el <= 10 ? (new Date().getHours() < 12 ? 'sunrise' : 'sunset') : 'day'); + } else if (cK.includes('night')) { + tD = 'night'; + } + + if (tD !== 'night' && cK.includes('night')) cK = cK.replace('-night', '').replace('night', 'clear'); + else if (tD === 'night' && cK === 'sunny') cK = 'clear-night'; + + const bG = { + sunny: { day: ['#29b6f6', '#0288d1'], twilight: ['#7986cb', '#e1bee7', '#ffe0b2'], night: ['#080c16', '#162032'] }, + partly: { day: ['#4fc3f7', '#1976d2'], twilight: ['#5c6bc0', '#ce93d8', '#ffccbc'], night: ['#111827', '#1e293b'] }, + cloudy: { day: ['#607d8b', '#455a64'], twilight: ['#455a64', '#78909c', '#ffebee'], night: ['#1f2937', '#374151'] }, + rain: { day: ['#2c3e50', '#4ca1af'], twilight: ['#3949ab', '#7e57c2', '#ffe0b2'], night: ['#0f172a', '#1e293b'] }, + snow: { day: ['#94a3b8', '#64748b'], twilight: ['#8b5cf6', '#d8b4fe', '#94a3b8'], night: ['#1e293b', '#0f172a'] }, + storm: { day: ['#64748b', '#334155'], twilight: ['#2b285b', '#1e1b4b', '#0f172a'], night: ['#0f172a', '#1e293b'] }, + fog: { day: ['#9ca3af', '#6b7280'], twilight: ['#8b5cf6', '#c084fc', '#9ca3af'], night: ['#1f2937', '#111827'] }, + unknown: { day: ['#475569', '#334155'], twilight: ['#334155', '#1e293b', '#0f172a'], night: ['#0f172a', '#020617'] } + }; + + const sh = { + rain: { day: 'inset 0 0 20px rgba(0,0,0,0.3)', night: 'inset 0 0 30px rgba(0,0,0,0.6)' }, + snow: { day: 'inset 0 0 50px rgba(200,220,255,0.2)', twilight: 'inset 0 0 30px rgba(200,220,255,0.2)', night: 'inset 0 0 40px rgba(200,220,255,0.1)' }, + storm: { day: 'inset 0 0 50px rgba(0,0,0,0.7)', twilight: 'inset 0 0 50px rgba(0,0,0,0.8)', night: 'inset 0 0 50px rgba(0,0,0,0.9)' } + }; + + let cat = 'sunny', eL = ''; + const sH = tD === 'night' ? `
+
` : ''; + const cC = tD === 'night' ? 'cloud-night' : (tD !== 'day' ? 'cloud-twilight' : ''); + const sC = tD !== 'day' ? 'twilight' : 'day'; + + if (cK === 'unknown') { + cat = 'unknown'; + } else if (cK.includes('storm') || cK.includes('thunder')) { + cat = 'storm'; + eL = `
`; + } else if (cK.includes('snow') || cK.includes('hail')) { + cat = 'snow'; + eL = `
`; + } else if (cK.includes('rain') || cK.includes('pour')) { + cat = 'rain'; + eL = `
`; + } else if (cK.includes('partly')) { + cat = 'partly'; + eL = tD === 'night' + ? `${sH}
+
` + : `
+
`; + } else if (cK.includes('cloud')) { + cat = 'cloudy'; + eL = `${sH}
+
`; + } else if (cK.includes('fog')) { + cat = 'fog'; + eL = `${sH}
`; + } else { + cat = 'sunny'; + eL = tD === 'night' + ? `${sH}
+
` + : `
+
`; + } + + const tK = tD === 'night' ? 'night' : (tD !== 'day' ? 'twilight' : 'day'); + const aC = (bG[cat] || bG.sunny)[tK].join(', '); + const aS = sh[cat]?.[tK] || 'none'; + const bgS = `background:linear-gradient(to bottom, ${aC});box-shadow:${aS};`; + + let trH = ''; + if (variables.temptrend_show && variables.temptrend_entity) { + const trE = variables.temptrend_entity; + const hs = states[trE]?.attributes?.history?.map(Number); + + if (hs?.length > 1) { + const isF = (tV && states[tE].attributes?.unit_of_measurement?.includes('F')) || + (wV && states[wE].attributes?.temperature_unit?.includes('F')); + const minSp = isF ? 16.2 : 9; + const mn = Math.min(...hs), mx = Math.max(...hs); + let sp = mx - mn, bs = mn; + + if (sp < minSp) { bs = ((mx + mn) / 2) - (minSp / 2); sp = minSp; } + + const st = hs.map((t, i) => { + const p = Math.max(0, Math.min(1, (t - bs) / (sp || 1))); + const sg = Math.min(4, Math.floor(p * 5)), lP = (p * 5) - sg; + let r = 0, g = 0, b = 0; + + if (sg === 0) { g = Math.round(50 + lP * 205); b = 255; } + else if (sg === 1) { g = 255; b = Math.round(255 - lP * 255); } + else if (sg === 2) { r = Math.round(lP * 255); g = 255; } + else if (sg === 3) { r = 255; g = Math.round(255 - lP * 127); } + else { r = 255; g = Math.round(128 - lP * 128); } + + return `rgb(${r},${g},${b}) ${(i / (hs.length - 1)) * 100}%`; + }); + + trH = ` +
+
+
`; + } + } + + return ` +
+ ${eL} +
+
+
+
+
+ ${tH} +
+ ${fH} +
+
+ ${cH} +
+
+ ${mH} +
+
+
+ ${trH} +
+ `; + ]]] + +``` +
+ +
+Template + + +- Replace `sensor.openweathermap_temperature` with your own `weather.xx` or `sensor.xx temperature`, in both places. + +```yaml + - trigger: + - platform: time_pattern + minutes: "/1" + - platform: homeassistant + event: start + condition: > + {{ (now().timestamp() - state_attr('sensor.temptrend_24h', 'last_update') | default(0, true) | float(0)) >= 3600 }} + sensor: + - name: "Temptrend 24h" + unique_id: temptrend_24h + state: > + {% set target = 'sensor.openweathermap_temperature' %} + {{ (state_attr(target, 'temperature') if target.startswith('weather.') else states(target)) | float(0) | round(1) }} + attributes: + last_update: "{{ now().timestamp() }}" + history: > + {% set target = 'sensor.openweathermap_temperature' %} + {% set current = (state_attr(target, 'temperature') if target.startswith('weather.') else states(target)) | float(0) | round(1) %} + {% set past = state_attr('sensor.temptrend_24h', 'history') | default([current] * 24, true) %} + {{ (past + [current])[-24:] }} +``` +
+ +
+ +> [!NOTE] +> More Climate Cards are coming soon. They're currently available to members for Testing, Patreon and YouTube. + +[paypal_me_shield]: https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white + +[paypal_me]: https://paypal.me/anasboxsupport + +[revolut_me_shield]: +https://img.shields.io/badge/revolut-FFFFFF?style=for-the-badge&logo=revolut&logoColor=black + +[revolut_me]: https://revolut.me/anas4e + +[ko_fi_shield]: https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white + +[ko_fi_me]: https://ko-fi.com/anasbox + +[buy_me_coffee_shield]: +https://img.shields.io/badge/Buy%20Me%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black + +[buy_me_coffee_me]: https://www.buymeacoffee.com/anasbox + +[patreon_shield]: +https://img.shields.io/badge/patreon-404040?style=for-the-badge&logo=patreon&logoColor=white + +[patreon_me]: https://patreon.com/AnasBox