Animierte Drehung Haus Status Schritt für Schritt erklärt . . . .

[pokerjung]

Hallo zusammen,

ich hatte einige Probleme den Haus Status umzusetzen, den der User @Janncsi in seiner Visu hatte (der hat mir direkt sehr gut gefallen).Durch probieren, fragen usw. habe ich es dann doch irgendwie geschafft :-) und da ich hier im Forum schon viel Hilfe bekommen habe, möchte ich mal etwas zurück geben und habe dafür eine Schritt für Schritt Anleitung für die Edomi Visu bzgl. animierter Haus Status erstellt. Ich hoffe es hilft dem ein oder anderen genauso wie mir. Es gibt sicherlich auch andere Möglichkeiten oder Wege dies umzusetzen . . . . .

hausstatus.PNG Video https://drive.google.com/open?id=1d-...lX4KQJ-SBBWxns

Für den Aufbau des oben gezeigten Haus Status benötigt man folgende Komponenten und Einstellungen. (Bilder, Icons hänge ich als Zip dabei)

1. Icons

es werden 4 Weiße Icons benötigt, sowie die selbigen in Orange eingefärbt.

2. Grafikelemente

es werden folgende Grafikelemente benötigt. - 4segmente.png
den Mittelpunkt erstellen wir mit Edomi Boardmitteln.

3. iKO

iKo_rotate.PNG

4. Logik

logik.PNG

5. Einstellungen

dafür legen wir uns folgende Universalelemente an:

- Rotationstaster
- Rotationstaster Mitte
- Rotationstaster_Abwesend
- Rotationstaster_Nacht
- Rotationstaster_Urlaub
- Rotationstatser_Normal
- Press


Rotationstaster:


rotationstaster.PNG
rotationstaster_2.PNG
CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out


Rotationstaster Mitte:

rotationstaster_mitte.PNG

rotationstaster_mitte_2.PNG

Rotationstaster_Abwesend:

rotationstaster_abwesend.PNG
rotationstaster_abwesend_2.PNG

CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#+180}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

rotationstaster_abwesend_3.PNG

Rotationstaster_Nacht:

rotationstaster_nacht.PNG
rotationstaster_nacht_2.PNG

CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#+270}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

rotationstaster_nacht_3.PNG
CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#+270}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

rotationstaster_nacht_4.PNG

CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#+270}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out


Rotationstaster_Urlaub:

rotationstaster_urlaub.PNG

CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#+90}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

rotationstaster_urlaub_2.PNG

CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#+90}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

rotationstaster_urlaub_3.PNG

rotationstaster_urlaub_2.PNG

CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#+90}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out


Rotationstatser_Normal:

rotationstaster_normal.PNG

CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out


rotationstaster_normal_3.PNG

CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

-webkit-transform: rotate({#}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out


Press:

press.PNG



press_2.PNG

Gerne nehme ich auch Verbesserungsvorschläge an, um das ganze eventuell schmaler zu gestalten.
Viel Spaß damit.

VG
pokerjung