Widget abhängig von Variable drehen

Jay 0

Hallo,
mein Name ist Julien und ich bin 34 Jahre alt. Auch, wenn das hier mein erster Post ist lese ich schon lange im Forum mit, wenn ich mal ein Anliegen habe. Bisher habe ich IO-Broker in meiner Wohnung, meiner Firma und aktuell auch in meinem Wohnmobil am laufen. Ich liebe es. Um letzteres dreht sich auch mein Anliegen. Im WoMo (selbstausbau) steuere ich alle über einen RasPi mit den Tinkerforgemodulen. Über JS kann ich auf IO-Broker letzteres ansprechen. Das funktioniert wunderbar und so habe ich mir zuletzt ein Modul mit Beschleunigungssensoren gegönnt. Über WLAN will ich so mit meinem Smartphone vorne sehen können ob ich grade stehe oder wie weit ich schief stehe. Die daten sind da und wunderbar, aber zur Darstellung würde ich gerne eine Art künstlichen Horizont wie man es aus der Avionik kennt machen, oder eben mein WoMo als Bild drehen. Ich kann ja Widgets anhand einer Variablen linear verschieben, leider habe ich noch nicht raus gefunden wie ich sie anhand einer Variablen in "Echtzeit" (also nicht erst bei jedem mal Browser aktualisieren) drehen kann. Ich hoffe, mir kann da geholfen werden.

MfG Julien

SBorg

@jay-0 Hi, ist schon möglich. Mittels CSS, Transform und Rotate: https://wiki.selfhtml.org/wiki/Transform:rotate
Damit kannst du bspw. Bild vom WoMo/what ever beliebig drehen (Beispiele siehe obigen Link).
Das muss jetzt alles in eine SVG. Dann kommt noch ein wenig Javascript dazu welches per Binding den/die Wert/e aus dem ioB ausliest und dann entsprechend um den Winkel rotiert/kippt.

Ich habe das schon mal irgendwo hier ausführlich erklärt. War zwar Animation und Färbung für ein Heizungsschema, das Prinzip ist aber gleich

transform: rotate(-10deg);

würde dann das Bild oä. in einem Winkel von 10° nach links kippen/neigen (die Gradzahl kommt dann per JS aus dem ioB).

Stratos Gkrekidis

@jay-0 Hi jay-0 hier kannst du mit dem css code widgets drehen

//einfugen in project css
        .rotate90{
            transform: rotate(90deg);
        }
        .rotate180{
            transform: rotate(180deg);
        }
        .rotate270{
            transform: rotate(270deg);
        }

Stratos Gkrekidis

@jay-0 und hier kannst du widgets animieren

//einfugen in project css
/* Z-Achse */

.mdui-rotateZ-cw {
    animation:ani-rotateZ-cw 4s linear infinite;
    transform-origin: center center;
}
@keyframes ani-rotateZ-cw { 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
}
.mdui-rotateZ-ccw {
    animation:ani-rotateZ-ccw 4s linear infinite;
    transform-origin: center center;
}
@keyframes ani-rotateZ-ccw { 
    100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } 
}

hier ein Beispiel

SBorg

@stratos-gkrekidis Ne, so einfach ist es leider nicht
Du rotierst ja nicht um einen festen Winkel wie 90°, 180° usw , sondern nur um so viel wie das WoMo aus der Achse kippt, also bspw. von -15° bis +15° in Abhängigkeit der Lage.

Jay 0

@sborg genau, das ist das Problem. Mit dem CSS wie oben beschrieben kann ich keine Variable einbinden und so weit ich weiß wird die Animation auch nur aktualisiert, wenn die Seite neu geladen wird.

Hat vielleicht noch jemand eine Idee?

Coffeelover

@jay-0 Tatsächlich. Wenn ich dich richtig verstanden habe, müsstest du einfach nur ein entsprechendes Binding im Feld in VIS ("CSS Allgemein -> transform") eintragen. {a:Datenpunkt.0.xyz;"rotate("+a+"deg)"} Oder denke ich zu einfach?

SBorg

@coffeelover Bin mir nicht zu 100% sicher, aber IMO Ja (zu einfach gedacht ). Ein Binding funktioniert nur innerhalb eines Widgets, deswegen bin ich skeptisch ob es innerhalb eines CSS' funktioniert ?

@jay-0 sagte in Widget abhängig von Variable drehen:

Hat vielleicht noch jemand eine Idee?

Jepp, wie oben beschrieben, aber dann halt mal mit fertigem Code:

HTML-Widget, dort unter HTML:

<script type="text/javascript">
    var svgNS = "http://www.w3.org/2000/svg";
	setTimeout(function () {

        // Winkel auslesen
    	let winkel = parseInt(document.getElementById("winkel").innerHTML);

    	// WoMo-Bild drehen
    	document.getElementById("womo").setAttribute("transform", "rotate ("+winkel+")");
    	
	}, 1);

</script>


<svg>


// Bild vom WoMo
<path id="womo" transform="rotate (0)" fill="none" stroke="green" stroke-width="6" d="M0 15h100v10H0z"/>

</svg>


Winkel: <span id="winkel">{0_userdata.0.Winkel}</span>°<br>

In Zeile #25 ist der DP definiert der den Lagewinkel enthält.
Zeile #20 enthält dann zB. eine SVG eines WoMos (kann auch ein "echtes Bild" sein). Ich habe hier der Einfachheit halber einen grünen Kasten genommen, den man mir verzeihen möge.
Bild 1b.png
Bild 1a.png
Bild 1.png
...und weil ich auch faul bin (^^) habe ich keinen gesteigerten Wert auf die Positionierung gelegt. Deswegen wird das Rechteck zum Teil abgeschnitten, da es aus dem HTML-Widget "herausragt"

Coffeelover

@sborg sagte in Widget abhängig von Variable drehen:

Ein Binding funktioniert nur innerhalb eines Widgets, deswegen bin ich skeptisch ob es innerhalb eines CSS' funktioniert ?

Ich habe im Eingangspost nicht gelesen, dass das im CSS funktionieren muss. Deswegen hätte ich es tatsächlich direkt auf das Widget angewendet.
Beim Test hat mein Sauger mit zunehmender Betriebsdauer schön fleißig den Teststrich weitergedreht. (Etwas besseres ist mir nicht eingefallen, Screenshots habe ich natürlich vergessen).

SBorg

@coffeelover Ahh, nee, muss es nicht, ich habe mich verlesen, du hast Recht, es ist so einfach

ck_coke

@sborg sagte in Widget abhängig von Variable drehen:

@coffeelover Bin mir nicht zu 100% sicher, aber IMO Ja (zu einfach gedacht ). Ein Binding funktioniert nur innerhalb eines Widgets, deswegen bin ich skeptisch ob es innerhalb eines CSS' funktioniert ?

@jay-0 sagte in Widget abhängig von Variable drehen:

Hat vielleicht noch jemand eine Idee?

Jepp, wie oben beschrieben, aber dann halt mal mit fertigem Code:

HTML-Widget, dort unter HTML:
<script type="text/javascript">
    var svgNS = "http://www.w3.org/2000/svg";
	setTimeout(function () {

        // Winkel auslesen
    	let winkel = parseInt(document.getElementById("winkel").innerHTML);

    	// WoMo-Bild drehen
    	document.getElementById("womo").setAttribute("transform", "rotate ("+winkel+")");
    	
	}, 1);

</script>


<svg>


// Bild vom WoMo
<path id="womo" transform="rotate (0)" fill="none" stroke="green" stroke-width="6" d="M0 15h100v10H0z"/>

</svg>


Winkel: <span id="winkel">{0_userdata.0.Winkel}</span>°<br>
In Zeile #25 ist der DP definiert der den Lagewinkel enthält.
Zeile #20 enthält dann zB. eine SVG eines WoMos (kann auch ein "echtes Bild" sein). Ich habe hier der Einfachheit halber einen grünen Kasten genommen, den man mir verzeihen möge.

...und weil ich auch faul bin (^^) habe ich keinen gesteigerten Wert auf die Positionierung gelegt. Deswegen wird das Rechteck zum Teil abgeschnitten, da es aus dem HTML-Widget "herausragt"

Ich habe mir basierend auf diesem Widget ein eigenes mit gleicher Funktion gebaut.
Ich möchte dieses nun mehrfach verwenden und jeweils einen anderen Datenpunkt (0_userdata.0.Winkel1, 0_userdata.0.Winkel2,...) verwenden.
Das scheint nur nicht zu funktionieren. Es funktioniert immer nur eins und das auch nicht mit dem richtigen Wert aus seinem Datenpunkt sondern von irgendeinem anderen.
Wie ließe sich das lösen?

Mein Code sieht aktuell wie folgt aus:

<div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border: 2px solid #555; border-radius: 10px; box-sizing: border-box; background-color: #f0f0f0;">

  <svg id="t_svg_{w:widgetID}" viewBox="-10 -35 120 120" width="150">
    <path d="M47 20 V 80 H 53 V 20 Z" fill="#606060" stroke="#606060" stroke-width="2"/>
    
    <g class="winkel-anzeige-rechts" style="visibility: hidden;">
      <text class="text-rechts" x="55" y="15" font-size="8px" fill="black"></text>
    </g>
    <g class="winkel-anzeige-links" style="visibility: hidden;">
      <text class="text-links" x="45" y="15" font-size="8px" text-anchor="end" fill="black"></text>
    </g>
    
    <path class="rotierender-teil" transform="rotate(0, 50, 20)" stroke="green" stroke-width="6" stroke-linecap="round" d="M 0 20 H 100"/>
    <circle cx="50" cy="20" r="3" fill="black"/>
  </svg> <script type="text/javascript">
    (function updateWidget(winkel) {
      try {
        const winkelNum = parseInt(winkel) || 0;
        const svg = document.getElementById('t_svg_{w:widgetID}');
        if (!svg) return;

        const rotatingElement = svg.querySelector('.rotierender-teil');
        const anzeigeRechts = svg.querySelector('.winkel-anzeige-rechts');
        const anzeigeLinks = svg.querySelector('.winkel-anzeige-links');
        const textRechts = svg.querySelector('.text-rechts');
        const textLinks = svg.querySelector('.text-links');
        
        if (winkelNum > 0) {
            anzeigeRechts.style.visibility = 'visible';
            anzeigeLinks.style.visibility = 'hidden';
            textRechts.textContent = winkelNum + '°';
        } else if (winkelNum < 0) {
            anzeigeRechts.style.visibility = 'hidden';
            anzeigeLinks.style.visibility = 'visible';
            textLinks.textContent = Math.abs(winkelNum) + '°';
        } else {
            anzeigeRechts.style.visibility = 'hidden';
            anzeigeLinks.style.visibility = 'hidden';
        }

        rotatingElement.setAttribute("transform", "rotate(" + winkelNum + ", 50, 20)");

      } catch (err) {
        console.error(`[Widget {w:widgetID}] Fehler:`, err);
      }
    })({0_userdata.0.Winkel});
  </script>
</div>

SBorg

@ck_coke
Ich hab leider schon ein paar Jahre nichts mehr mit SVG gemacht und bin da etwas eingerostet...

IMO ist dein Problem eine eindeutige ID für das SVG.

<svg id="t_svg_{w:widgetID}"...

dürfte nicht funktionieren. Hier wird über das Binding der Variablen "w" (nur innerhalb des Bindings gültig) der Wert von "widgetID" übergeben. Mehr nicht. Korrekt für das Binding wäre t_svg_{widgetID}

OliverIO

@ck_coke sagte in Widget abhängig von Variable drehen:

warum so kompliziert, hier reines binding beispiel ohne javascript.

folgende Anpassungen habe ich gemacht:

javascript anteil entfernt
rotate anweisungen aus dem path element entfernt. da ansonsten der wert in einem svg nicht mit css überschrieben werden kann.
css mit binding instruktionen hinzugefügt.
für jedes weitere element muss nur der datenpunkt im style bereich angepasst werden aus dem der winkel kommt.

<style>
    #{wid} .rotierender-teil {
      transform-box: fill-box;
      transform-origin: 50px 0px;
      transform: rotate({0_userdata.0.winkel1}deg);
    }
    
</style>
<div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border: 2px solid #555; border-radius: 10px; box-sizing: border-box; background-color: #f0f0f0;">
 
  <svg viewBox="-10 -35 120 120" width="150">
    <path d="M47 20 V 80 H 53 V 20 Z" fill="#606060" stroke="#606060" stroke-width="2"/>
    
    <g class="winkel-anzeige-rechts" style="visibility: hidden;">
      <text class="text-rechts" x="55" y="15" font-size="8px" fill="black"></text>
    </g>
    <g class="winkel-anzeige-links" style="visibility: hidden;">
      <text class="text-links" x="45" y="15" font-size="8px" text-anchor="end" fill="black"></text>
    </g>
    
    <path class="rotierender-teil" stroke="green" stroke-width="6" stroke-linecap="round" d="M 0 20 H 100"/>
    <circle cx="50" cy="20" r="3" fill="black"/>
  </svg>
</div>

NEWS

Widget abhängig von Variable drehen

Support us

1.1k
Online

32.2k
Users

80.9k
Topics

1.3m
Posts

NEWS

Widget abhängig von Variable drehen

Support us

1.1kOnline

32.2kUsers

80.9kTopics

1.3mPosts

1.1k
Online

32.2k
Users

80.9k
Topics

1.3m
Posts