Java-Scripts / Aktionen / Szenen

Moin,
ich habe mich jetzt doch für HA entschieden und nach einer Testumgebung nun die Arbeitsumgebung aufgesetzt. Jetzt versuche ich meine Shelly’s einzubinden. Dazu Fragen, Fragen, Fragen:

  1. Ich habe Aktionen und tw. Scripte auf den Shelly’s. Kann ich die irgendwie in HA sehen und dort ändern? Teilweise muss ich sie direkt auf dem Shelly haben und ehrlich gesagt warum sollte ich sie in HA ziehen – never touch a running system. Aber über die HA-Oberfläche anschauen und ändern wäre schon gut.
  2. Ich habe gesehen, dass es für verschiedene Shelly’s eine versteckte Entität mit der Betriebstemperatur gibt. Ich würde für die Relais gerne Status, Temperatur (Chart) und Statusverlauf (Chart) anzeigen. Bei den Messgeräten den Temperatur und den Messverlauf. Bei den Plugs am besten alles. Gibt es da fertige Karten oder muss man sich das selbst zusammenpfriemeln?

Nein, geht leider nicht

Muss man selbst machen

Die zweite Frage konnte ich mit den Bubble Cards sehr schön lösen. Wenn ich die Temperatur anklicke (SubCard) öffnet er sogar sofort das Verlaufsdiagramm. Das ist wirklich eine positive Überraschung! Und ich kann auch sofort mit einer zweiten SubCard ein neues Fenster öffnen mit dem Geräte UI.

Sehr, sehr gut! Das gibt schon mal:

:+1: :+1: :+1:

Jetzt müsste ich es nur noch schaffen beim Shelly im UG einen Ablaufbalken einzuschmuggeln … der schaltet nach 7Min. automatisch aus.

Etwas befremdlich und verwirrend:

Warum heißen bei drei identischen Geräten die Entitäten teilweise ganz anders? So heißt der Schalter des 3. Gerätes einfach nur “Lampen” statt “switch.shelly…blablabla”.

Ablaufdiagrammr gibt es auch in HACS. Vor allem genutzt für Waschmaschine und Trockner usw.

Chattie hat was schönes zusammengeschraubt auf der Basis eines Beispiels des Entwicklers bei Github. Foto folgt.

Was ich gerade verzweifelt suche ist eine Möglichkeit den Hintergrund eines Sub-Buttons zu verändern. Erst statisch, später dynamisch nach Wert der Entität.

Idee dazu? Bisher hat nix geklappt!

Zunächst mal als „Dankeschön“ für eure Hilfe ein schönes Script zur Darstellung einer Treppenhausschaltung, die auf einem Shelly Relais programmiert ist. Die Animation des Buttons ist eine Simulation, deren Ablaufzeit identisch mit der des Shelly ist (450 Sekunden).

image

Und hier das Script dazu:

:host {
  --circle-color: var(--card-background-color); /* Standardfarbe für Fortschrittskreis */
  --background-on: #2E7D32; /* Dunkelgrün beim Einschalten */
  --background-off: var(--card-background-color); /* Standardfarbe beim Ausschalten */
  --background-current: ${(() => {
    const entityState = hass.states['switch.shelly_1_mini_g3_ug_flur_switch_0'].state;

    return entityState === 'on' ? 'var(--background-on)' : 'var(--background-off)';
  })()};
  --percentage: ${(() => {
    const duration = 450; // Dauer in Sekunden
    const entityState = hass.states['switch.shelly_1_mini_g3_ug_flur_switch_0'].state;

    if (entityState === 'on') {
      const startTime = new Date(hass.states['switch.shelly_1_mini_g3_ug_flur_switch_0'].last_changed).getTime();
      const now = new Date().getTime();
      const elapsedTime = (now - startTime) / 1000; // Zeit seit Aktivierung in Sekunden
      const percentage = Math.max(0, (elapsedTime / duration) * 100); // Fortschritt in %
      return `${percentage.toFixed(2)}%`;
    }

    return "0%"; // Wenn der Schalter aus ist
  })()};
}

.bubble-icon-container {
  background: conic-gradient(
    var(--circle-color) var(--percentage), /* Fortschrittskreis */
    var(--background-current) 0 /* Hintergrundfarbe */
  );
}

Nun aber eine weitere Frage:

Ein weiterer Button schaltet eine Shelly Plus Plug S und simuliert die Farbe auf dem LED-Ring. Es gibt drei Zustände:

OFF. ON und POWER (=ON und Leistungsbezug >5W) Die 5W fangen den Stromverbrauch im Standby ab! Auf der Shelly wird das über ein Java-Script gesteuert.

Mit drei einzelnen Farben funktioniert das problemlos - aber es sind auf dem Shelly nicht einfach drei fixe Farben sondern drei Lichtanimationen, die die Aufmerksamkeit des Menschen fordern:

blau blinkt langsam
rot blinkt schnell

Prinzipiell klappt die Simulation der Animationen in der Bubble-Card, aber sie bricht nach unterschiedlicher Zeit ab und zeigt die Farbe stabil. Was ist das und wie wird man das los?


.bubble-sub-button-1 {
   animation: ${
      hass.states['switch.shelly_plusplugs_pumpe_switch_0'].state === 'off'
         ? 'blueBlink 2s linear infinite'
         : Number(hass.states['sensor.shelly_plusplugs_pumpe_switch_0_power'].state) > 5
         ? 'redBlink 0.5s linear infinite'
         : 'none'
   } !important;
   background-color: ${
      hass.states['switch.shelly_plusplugs_pumpe_switch_0'].state === 'off'
         ? 'blue'
         : Number(hass.states['sensor.shelly_plusplugs_pumpe_switch_0_power'].state) > 5
         ? 'red'
         : 'green'
   } !important;
}

@keyframes blueBlink {
   0% {
      background-color: blue;
   }
   50% {
      background-color: transparent;
   }
   100% {
      background-color: blue;
   }
}

@keyframes redBlink {
   0% {
      background-color: red;
   }
   50% {
      background-color: transparent;
   }
   100% {
      background-color: red;
   }
}

Ach ja, die Farbe ist der Hintergrund eines Sub-Buttons der einen Blitz und den Leistungsbezug zeigt - nicht der ganze Button!