iobroker vis widgets drehen

iobroker vis widgets drehen

Da ich das Feature benutze und es für einige Dinge ganz gut finde.
Hier das Mini HowTo:

Ein Widget im Vis auswählen unter CSS folgendes eintragen:

.rot90{
transform: rotate(90deg);
}
.rot180{
transform: rotate(180deg);
}
.rot270{
transform: rotate(270deg);
}

Sieht bei mir im VIS unter den Eigenschaften eines Widgets so aus:

Nun kann man unter general: css-Klassen diese „Klassen“ ansprechen in dem man den Namen dort einträgt z.B.: rot270 – wodurch das Widget um 270 Grad gedreht wird.
Sieht bei mir im VIS unter den Eigenschaften eines Widgets wie folgt aus:

Ihr müsst schauen, es funktioniert nicht für alle Widgets gleich gut.
Z.B. benutze ich es für die HQWidgets „Window and Shutter“, sogar das PopUp wird gedreht – leider aber nicht die Eingabe OMG :>
Wodurch diese immer noch senkrecht verläuft – nicht intuitiv, aber wenn man es einmal weiß – fand ich es okay…

Wenn einer dieses Problem löst, natürlich gerne bescheid geben 🙂

2 Gedanken zu „iobroker vis widgets drehen

  1. Hallo,

    Tolle Tipps habe bisher im Web und auch bei Dir zu IoBroker gefunden. Leider konnte ich noch nichts dazu finden, wie man bei einem beliebiges Widget dynamisch die Position über CSS transform ändern kann. Alle Beispiele gehen über Datenobjekte. Das muss aber nicht sein. Z.B. könnte ich die Position ändern wie in folgenden Link beschrieben, aber ich weiß nicht wie das in der vis gehen kann. hast Du eine Idee?
    https://www.mediaevent.de/css/transform.html

    1. Hallo Robert,
      danke für das positive Feedback.

      Ich weiß nicht genau, was Du unter „Alle Beispiele gehen über Datenobjekte“ verstehst?

      Wie es im VIS geht, habe ich oben kurz beschrieben.
      Ich hab in meinem Beitrag jetzt noch einmal 2 Bilder bei mir aus dem VIS eingefügt, ich hoffe dadurch wird es deutlicher, wie ich es nutze.

      Danke auch für den Link, eine perfekte Ergänzung.
      Das rotate hab ich ja oben benutzt, in deinem Link sind noch weitere schöne CSS-Befehle aufgeführt und sehr anschaulich gezeigt.

      Viele Grüße
      BlueB

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert