@oliverio wegen alternative 2 sehr schaden, klang sehr vielversprechend.
Ich habe noch mal mit Binding versucht und es funktioniert doch, hatte wohl beim ersten Versuch irgendwo einen Fehler. Und ja, es ist ein leichtes Flackern beim Wechseln zwischen den Seiten zu erkennen, finde ich aber nicht so schlimm.
Ich habe die svg vervollständigt um die Varianten bewerten zu können.
Hier die vollständige svg:
<style>
@keyframes blink {
0%, 50% { visibility: visible; }
51%, 100% { visibility: hidden; }
}
#blinkingElement {
animation: blink {0_userdata.0.Test_svg.blink}s infinite;
}
</style>
<svg id="blinkingElement" width="100" height="50" viewBox="0 0 350 175" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="twoColors" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
<stop offset="{0_userdata.0.Test_svg.batt}%" style="stop-color:{0_userdata.0.Test_svg.startcolor}; stop-opacity:1" />
<stop offset="{0_userdata.0.Test_svg.batt}%" style="stop-color:#ffffff; stop-opacity:0.7" />
<stop offset="100%" style="stop-color:#ffffff; stop-opacity:0.7" />
</linearGradient>
</defs>
<rect x="0" y="0" width="325" height="175" rx="29" ry="29" fill="url(#twoColors)" />
<path d="M 330,57 h 6.5 a 13.5,13.5 0 0 1 13.5,13.5 v 34 a 13.5,13.5 0 0 1 -13.5,13.5 h -6.5 v -61 Z" fill="url(#twoColors)" />
</svg>
Und hier JS der die Datenpunkte mit Farbe und Blinkintervall beschreibt:
// Funktion zur Auswahl der Farbe und Blinkdauer basierend auf dem Wert
function getColorAndBlink(value) {
let color = '#00ff00'; // Grün als Standardfarbe
let blinkDuration = 0; // Keine Blinkdauer standardmäßig
if (value <= 5) {
color = '#ff0000'; // Rot
blinkDuration = 1; // 1 Sekunde für Blinkdauer
} else if (value <= 20) {
color = '#ff8a00'; // Orange
}
return { color, blinkDuration };
}
// Funktion zum Aktualisieren der Datenpunkte
async function updateDataPoints(value) {
const { color, blinkDuration } = getColorAndBlink(value);
// Aktualisiere den Farb-Datenpunkt
await setStateAsync('0_userdata.0.Test_svg.startcolor', color, true);
// Aktualisiere den Blink-Datenpunkt
await setStateAsync('0_userdata.0.Test_svg.blink', blinkDuration, true);
}
// Überwachen des Ladezustands-Datenpunkts auf Änderungen
on({ id: '0_userdata.0.Test_svg.batt', change: "any" }, async (obj) => {
const value = obj.state.val; // Wert des Ladezustands
await updateDataPoints(value); // Aktualisiere Datenpunkte entsprechend
});
ioBroker.vis - Google Chrome 2024-11-02 22-19-47.mp4
Ich muss sagen das diese Variante, zumindest für meine Anwendung, vergleichbar mit jetzigen Stand, eher nachteilig ist. Hier benötige ich trotzdem ein Code im JS-Adapter und zwei zusätzliche Datenpunkte. Und dieses kleine Flackern ist auch noch da.
Aber trotzdem Danke für deine Unterstützung, ich möchte auch alle Möglichkeiten ausprobieren.
