Guten Abend, und sorry für das lange Warten.
Ihr seid echt genial, es funktioniert alles.
Der Sensor war wirklich etwas verdreht. Ich habe mein Laptop mit zum Zähler genommen, Debug-Level aktiviert und nach dem Starten der Instanz den Log angeschaut und dabei den Lesekopf in alle Richtungen langsam verdreht bis richtige Werte kamen.
Ich wäre ohne eure Hilfe nicht auf die Idee gekommen, da ich vorher natürlich auch versuch hatte den Lesekopf etwas zu drehen und die 180° Drehung auch, ohne Erfolg.
So sieht es jetzt aus.

Sieht nicht danach aus, als wenn das richtig wäre, funktionier aber nur so.
Vielen lieben Dank!
Gruß

@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.

@oliverio ich habe heute den ersten Anlauf gewagt.
Alternative 1: ich habe genau deinen Beispiel genommen und auch den Datenpunkt zum Testen angelegt und mit #ff0000 gefühlt. Leider bleibt die Batterie zur Hälfte schwarz eingefärbt. Keine Reaktion auf die Veränderungen der Farbe im Datenpunkt. Funktioniert dieses Bespiel bei dir?

Alternative 2: ist schon etwas komplexer und übersteig momentan meine Fähigkeit.
Aber erstmal eine Frage zum Verständnis, bevor ich Zeit investiere um da durchzusteigen.
Wenn javascript die Farbe geändert hat, z.B. von rot auf grün, weil der Wert im Datenpunkt sich geändert hatte und dann die Seite neu geladen wird, dann ist die rote Ursprungsfarbe wieder aktiv, obwohl im Datenpunkt grün eingestellt ist, oder? Oder soll der Skript in einem Zeitintervall ausgeführt werden?

Danke

@oliverio das sind sehr interessante Ansätze. Ich werde das am WE mal testen und gib dann eine Rückmeldung.
Danke dir!

@ro75 Also mit der Batterieanzeige bin ich erst zufrieden und erst bei 8 Anzeigen noch übersichtlich. Aber je mehr man sich damit beschäftigt, desto mehr Lust bekommt man nach noch mehr. Ist etwas ansteckend das ganze
Ich denke nur an die zukünftigen Möglichkeiten, wie z.B. Visualisierung der Wärmepumpe und/oder Solaranlage. Dann wollte ich schon von Anfang an richtig machen.
Trotzdem Danke für den Hinweis.

@ro75 Hallo Ro75, danke für deine Rückmeldung.
in der vis-2 gibt es alle Basic Widgets wie in der vis, zumindest soweit ich das beurteilen kann.

Ich habe das Widget "String img src" ausprobiert, leider ohne Erfolg. Danach hatte ich das Widget "String (unescaped)" probiert und wow, das ging tatsächlich. Beim Laden der Seite werden die Bilder direkt angezeigt. Super Hinweis, ich wäre nicht auf die Idee gekommen String Widgets zum Anzeigen von Bilder zu verwenden.

Also ich bin erstmal mit der Lösung voll zufrieden.
Ich frage mich aber trotzdem ob dieser Ansatz der beste ist, hier ist ein zusätlicher Code im JS-Adapter, plus ein zusätzlicher Datenpunkt für die svg notwendig und wenn es viele von der selben Grafik geben sollte, dann müssen es genau so viele zusätzliche Datenpunkte geben.
Elegant wäre es eine Grafik zentral abzulegen und in jedem Widget diese abzurufen und nur für das jeweilige Widget je nach Bedürfnis zu verändern.
Ob das wohl überhaupt möglich ist?

Noch mal Danke dir?

Hallo Community,

ich möchte hier ein neues Thema aufmachen, da ich alles durchgesucht und auch vieles probiert habe, aber für meine Anwendung keine funktionierende bzw. zufriedenstellende Lösung gefunden habe.

Ich möchte für den Anfang eine einfache .svg Grafik in der vis-2 darstellen und diese in Echtzeit abhängig von einem Datenpunkt verändern.

Hier ist die svg:

<svg id="dynamic-svg" 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 id="startColor" offset="50%" style="stop-color:#00ff00; stop-opacity:1" />
            <stop id="middleColor" offset="50%" style="stop-color:#ffffff; stop-opacity:0.7" />
            <stop id="endColor" 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>

In diesem Fall eine Batterie und es soll der Ladezustand linearGradient id="twoColors" offset von id="startColor" und id="middleColor" abhängig von diesem Datenpunkt "0_userdata.0.Raumklima.SHC_Test_Batt" verändert werden.

Zur Zeit löse ich diesen Fall über JS-Adapter. Mit JS wird abhängig vom Wert aus dem Datenpunkt die svg generiert und in ein anderen Datenpunkt als String abgelegt. In einem HTML Basic Widget habe ich ein Binding auf den Datenpunkt mit svg.
Funktioniert soweit ganz zuverlässig, was mich aber stört in die Zeitverzögerung bis die Grafik im Browser angezeigt wird, wenn die Seite aufgerufen wird. Besonders nervig bei Navigieren von einer Seite auf die Andere.

Letztendlich möchte euch um eure Erfahrung fragen, was der sinnvollste Weg ist für mein Vorhaben, insbesondere auch auf Sicht der Performance und Ausbaufähigkeit, wenn später mehr und auch umfangreiche Grafiken kommen mit mehreren Datenpunkten.
Welche Widget ist dafür am besten geeignet und wie nimmt man am besten den Einfluss auf svg, mit Binding, css oder doch JavaScript?

Ich bin schon auf eure Ratschläge und Ideen sehr gespannt und würde mich über eine Lösung sehr freuen.

Mein System:

• RasPi 4 mit 8GB RAM
• IOBroker v7.2.6
• Node.js: v20.18.0
• NPM: v10.8.2
• vis-2 v2.9.64
• vis-1 ist auch installiert (falls die Info wichtig sein sollte)

Danke und Gruß

Ich habe auch gleich eine Frage. Könnte das gleiche oder ähnliches Problem wie bei @ofri2607 sein.
Ich versuche bei meinen Bar Chart die Ränder von den Balken deutlich sichtbar gestalten.
Dafür habe ich folgende Parameter in die JSON eingefügt.
"barBorderColor": "#000000",
"barBorderWidth": 5,
Es gibt aber keine Veränderung.

Wenn ich die Monate zurückschalte bis es keine Daten in der Datenbank es gibt, dann sieht man die Veränderung bei der Legende.

Was noch auffällig ist, ist das seltsame Verhalten im Editor. Ich habe das mal mit Handy SLO-MO aufgenommen. Wenn das Widget refresht wird, dann sind die schwarzen Ränder deutlich sichtbar, wenn der Graph skaliert wird, sind die Ränder wieder weg.

Das ist die JSON zum Video:

{
	"axisLabels": ["Jan", "Feb", "Mrz", "Apr"],
	"graphs": [{
		  "type": "bar",
		  "data": [40, 22, 160, 92],
		  "color": "#FF4800",
		  "barBorderColor": "#000000",
		  "barBorderWidth": 5,
		  "legendText": "HZ"
	}  
]
}

Es scheint schon so, als wenn die Parameter greifen, aber dann doch durch irgendwelche Standardwerte übergebügelt werden.

Hat jemand eine Erklärung für dieses Phänomen?
Wird dieses Widget überhaupt noch supportet, weiß das jemand?
Sonst würde ich diesen Fehler (wenn es sich so bestätigt) bei GitHub in die issues stellen.

Danke!
Gruß

@marc9025 Sorry für die späte Antwort. Ich habe die Frage total übersehen und hoffe dass du die Antwort immer noch erwartest.
In der Zwischenzeit konnte ich alle Zeitbereiche fertigstellen. Als ich mit der Monatsansicht angefangen bin, habe ich festgestellt, dass ich mit Blockly bei der Zeit-Selektierung an meine Fähigkeitsgrenzen stoße und habe mich entschieden die Selektierung mit JS-Code zu lösen und in JS-Funktion auszulagern. Das habe ich bei der Tages- und Wochenansicht auch nachgezogen, damit das einheitlich aussieht.
Bei dem JS-Code hat mich Chat GPT unterstützt und großen Beitrag dazu geleistet
Jetzt aber zu deiner Frage:

• für die Pfeile (vor und zurück) nutze ich einen Switch von vis-inventwo universal Widget.
  Die Zustände true oder false werden in Datenpunkte geschrieben
• bei jeder Zustandsveränderung wird in Blockly ein Zähler hoch oder runter gezählt. Begrenzt auf -365 bis 0. Bei null wird das Pfeil vor ausgeblendet.
• Der Zähler wird in die Variable "timeshift" geschrieben.
  
• Die Variable "timeshift" verschiebt in jeder JS-Funktion den Zeitbereich um die jeweilige Zeiteinheit, Tage, Wochen, Monate oder Jahre.
• Die Zeit wird in UNIX-Format ausgegeben
• Anschliessend wird die Zeit umformatiert, entweder in das Format für InfluxDB oder für die Anzeige über dem Graphen.
• Kleiner Hinweis: bei dem Zeitbereich 12M sind beide Pfeile ausgeblendet.

Ich füge gerne noch mal die aktuelle Version von der View und vom Blockly an.

View:
View.txt

Blockly:
blockly.txt

Ich hoffe damit deine Frage beantworten zu können.
Gruß

Hallo Zusammen,

falls die Lösung noch jemanden interessiert.
Das Thema wurde auf GitHub unter den issues diskutiert und es wurde eine Alpha Version zum Testen angeboten.
Mit dieser Version kann man den Schwellwert für die Sommerumschaltung mit command "SetHeatingOffOutdoorTemp" verändern.
Das wird wahrscheinlich in einer stable Version mit integriert sein.
Wer nicht abwarten kann, der kann die Alpha Version jetzt schon testen.
Bei mir funktioniert das tadellos.

Hier der Link:
https://github.com/Egyras/HeishaMon/issues/351

Gruß

JockelBln created this issue in Egyras/HeishaMon

closed Request for a new mqtt command e.g. "SetHeatingOffOutdoorTemp" to change TOP77 #351

@marc9025
Hallo, sehr gerne.
Ich hoffe meine Anfängerkünste können jemanden weiterhelfen.
Ich habe versucht bei der Benennung der Variablen sehr kreativ zu werden, ich hoffe das ist mir gelungen.

<block xmlns="https://developers.google.com/blockly/xml" type="comment" id="-}rqHZK73Qmm!0{y$BR)" x="87.5" y="-735.5">
  <field name="COMMENT">Graph auf Tageswerte und auf Heute setzten, wenn View aktiviert wird</field>
  <next>
    <block type="on" id="coLM($g]8M,W4Z)vQUBl">
      <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_activ_View</field>
      <field name="CONDITION">ne</field>
      <field name="ACK_CONDITION"></field>
      <statement name="STATEMENT">
        <block type="controls_if" id="g=f2WXyYuL;*o]4FI{)v">
          <value name="IF0">
            <block type="logic_compare" id="b#Ytdy)EnXeW7Jrt_ifb">
              <field name="OP">EQ</field>
              <value name="A">
                <block type="get_value" id="fr.}W{Ae1IPT7I$BtOpA">
                  <field name="ATTR">val</field>
                  <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_activ_View</field>
                </block>
              </value>
              <value name="B">
                <block type="text" id="hB00h+yNcBC3M0{aZn!n">
                  <field name="TEXT">4</field>
                </block>
              </value>
            </block>
          </value>
          <statement name="DO0">
            <block type="controls_if" id="0XFghdAn#o3~#K9YbEPB">
              <mutation else="1"></mutation>
              <value name="IF0">
                <block type="logic_compare" id="V,P@}P.{J.Tjb1$K/)uW">
                  <field name="OP">EQ</field>
                  <value name="A">
                    <block type="get_value" id="c[U^Vr+Num{Bss-I`[0W">
                      <field name="ATTR">val</field>
                      <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_Timerange</field>
                    </block>
                  </value>
                  <value name="B">
                    <block type="math_number" id="x4kCxkd,RJ}hzPbzBJgN">
                      <field name="NUM">1</field>
                    </block>
                  </value>
                </block>
              </value>
              <statement name="DO0">
                <block type="update" id="RC-)rFBpk#}e8M/#a,lX">
                  <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                  <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_Time_shift</field>
                  <field name="WITH_DELAY">FALSE</field>
                  <value name="VALUE">
                    <block type="math_number" id="b;BJc2mtSu)3g,3OklJ}">
                      <field name="NUM">0</field>
                    </block>
                  </value>
                  <next>
                    <block type="update" id="/uP]nY,nR[}8[I_K.T}-">
                      <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                      <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_activ_View</field>
                      <field name="WITH_DELAY">FALSE</field>
                      <value name="VALUE">
                        <block type="text" id="g#JB2@xK)^1xjz3GiV8j">
                          <field name="TEXT">0</field>
                        </block>
                      </value>
                      <next>
                        <block type="procedures_callnoreturn" id="gH6F#l,^bva~j,W;n5C8">
                          <mutation name="update_graph"></mutation>
                        </block>
                      </next>
                    </block>
                  </next>
                </block>
              </statement>
              <statement name="ELSE">
                <block type="update" id="0h[L501*TF2;fcjXs2v#">
                  <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                  <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_Time_shift</field>
                  <field name="WITH_DELAY">FALSE</field>
                  <value name="VALUE">
                    <block type="math_number" id="MEN3WmY-(8az)Nq!s}%K">
                      <field name="NUM">0</field>
                    </block>
                  </value>
                  <next>
                    <block type="update" id="q-;V[Y8xXhlb{J(!W%D9">
                      <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                      <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_Timerange</field>
                      <field name="WITH_DELAY">FALSE</field>
                      <value name="VALUE">
                        <block type="math_number" id="gVDTB/mQNMf?VvBv(:ss">
                          <field name="NUM">1</field>
                        </block>
                      </value>
                      <next>
                        <block type="update" id="1=LbMKT#;xYtjFnf$S~z">
                          <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                          <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_activ_View</field>
                          <field name="WITH_DELAY">FALSE</field>
                          <value name="VALUE">
                            <block type="text" id="0FBLgc1b0|`iW*yAnO/v">
                              <field name="TEXT">0</field>
                            </block>
                          </value>
                        </block>
                      </next>
                    </block>
                  </next>
                </block>
              </statement>
            </block>
          </statement>
        </block>
      </statement>
      <next>
        <block type="comment" id="Psi$Yk!XcwLhddkv/8#_">
          <field name="COMMENT">Graph auf Heute setzten, wenn Zeitrange gewechselt wird</field>
          <next>
            <block type="on" id="U(mva}zG$?dqmtMxm-q?">
              <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_Timerange</field>
              <field name="CONDITION">ne</field>
              <field name="ACK_CONDITION"></field>
              <statement name="STATEMENT">
                <block type="update" id="FY.PYmy*=1pUeV!m!2GK">
                  <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                  <field name="OID">0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_Time_shift</field>
                  <field name="WITH_DELAY">FALSE</field>
                  <value name="VALUE">
                    <block type="math_number" id="+2{Pua[2LUar0A#;js?)">
                      <field name="NUM">0</field>
                    </block>
                  </value>
                  <next>
                    <block type="procedures_callnoreturn" id=",Zi}B.;EG*2G0.y,{Ose">
                      <mutation name="update_graph"></mutation>
                    </block>
                  </next>
                </block>
              </statement>
            </block>
          </next>
        </block>
      </next>
    </block>
  </next>
</block>

Wie gesagt, ich habe bis jetzt nur Tages- und Wochenwerte umgesetzt.

Gruß