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.



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