Zmiana koloru zależna od wartości odczytu sensora.
Można zastosować do wizualizacji poziomu naładowania baterii samochodowej itp.
Do podmiany:
białetło.jpg= podkład białe tło
kiaczerwona.jpg= Zdjęcie samochodu
kiaszara.jpg= Zdjęcie edytowane na czarno-białe
input_number.poziom_koloru= Pomocnik od 1 do 100 (dla testu)
type: picture-elements
image: /local/białetło.jpg
card_mod: null
style: |
ha-card {height: 250px !important}
elements:
- type: image
image: /local/kiaszara.jpg
style:
top: 0%
left: 0%
transform: translate(0,0)
- type: image
image: /local/kiaczerwona.jpg
style:
top: 0%
left: 0%
transform: translate(0,0)
card_mod:
style:
hui-image $: |
.container > img#image {
{% set poziom = 100-states('input_number.poziom_koloru')|int -%}
mask-image: linear-gradient(to left, transparent {{poziom}}%, white {{poziom|int+1}}%);
}
- type: state-label # jest tylko do wyświetlania aktualnej wartości "pomocnika"
entity: input_number.poziom_koloru
style:
top: 96%
left: 80%
color: red
Kolor zostaje nałożony dynamicznie na podstawie odczytu sensora ( w przykładzie- pomocnik).
Na dole jest wyświetlany aktualna wartość “pomocnika”.
/
By obraz uzyskał troszkę dynamiki można dodać automatyzację która dodaje i odejmuje wartość ( +1 - -1) sensora i zapisuje je w “pomocniku”
alias: Przesuwanie koloru w zależności od odczytu sensora
description: ""
trigger:
- platform: time_pattern
seconds: /2
action:
- service: input_number.set_value
data:
entity_id: input_number.poziom_koloru
value: "{{ states('sensor.xxxxxxxxxxx')|int + 1 }}"
- delay:
hours: 0
minutes: 0
seconds: 1
milliseconds: 0
- service: input_number.set_value
data:
entity_id: input_number.poziom_koloru
value: "{{ states('sensor.xxxxxxxxxl')|int - 1 }}"
Po zmianie kierunku wyświetlania obrazu: (gif tylko że mała dynamika)
/
Karta z samochodem , Kia za 3 dni zmieni właściciela. Na pamiątkę zostawię sobie tutaj jej kartę
