EDOMI - Zeigt her eure Visus!

[Janncsi]

So....Wohnzimmer ist fast fertig...

Das Gelb musste ich einfach wieder reinbringen,da ich total auf diese blöde Farbe im Kontrast stehe :-D

Raum_neu.PNG

[wintermute]

Transparenter Schieber

Das ist ja mal eine fluffige Idee

[Janncsi]

Und hier noch alternativ in einer anderen Farbe...

Raum_alt.PNG

[Janncsi]

Auch wenn ich schon wieder den Nachfolger der jetzigen Visu plane, mache ich diese wohl erst einmal fertig...

Komme langsam mit der Raumdarstellung weiter. Die Prozentwerte der Lampen noch nicht ernst nehmen.

Der Button gibt den Status über die Opazität wieder und geregelt wird der jeweilige Wert einfach über ein Wischen über der Bezeichnung. (Transparenter Schieber)

Raum.PNG

[Janncsi]

Animierte Icons stehen bei mir auch auf der Liste um das Vorhaben "material.io"-Visu stimmig hinzubekommen.

Mit dem animierten SVG geht das schon in eine ziemlich gute Richtung!!!

[rdeckard]

Also animated GIF und auch animated SVG (native, ohne CSS oder JS) funktionieren. Hier ein Beispiel eines animated SVG:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#CCCCCC;}
    .st1{fill:#00B4D5;}
</style>
<g>
    <g>
        <path id="a" class="st0" d="M340.2,263.8c46.3-3.3,82.5-42.9,82.5-90.3c0-41.2-28-77.7-66.3-87.8C348.2,36.4,305.8,0,254.9,0
            c-36.9,0-71.1,20-89.3,51.6c-3.5-0.7-7.2-1-10.8-1c-31.1,0-56.4,25.3-56.4,56.4c0,4,0.4,7.9,1.2,11.7
            c-20.1,14.6-32.3,38.2-32.3,63.2c0,42.2,33.9,79.8,74,82c0.2,0,0.4,0,0.6,0h197.7C339.7,263.9,340,263.9,340.2,263.8z
             M142.1,244.1c-29.9-1.8-55-30.2-55-62.2c0-20.7,11.1-40,29-50.4c4.2-2.4,6-7.5,4.3-12c-1.5-3.9-2.2-8.1-2.2-12.5
            c0-20.2,16.4-36.6,36.6-36.6c4.3,0,8.5,0.7,12.5,2.2c4.8,1.8,10.2-0.4,12.4-5.1c13.6-29,43.2-47.7,75.3-47.7
            c43.1,0,78.7,32.3,82.8,75.1c0.4,4.5,3.8,8.1,8.2,8.8c32.5,5.6,57,35.6,57,69.8c0,36.3-28.6,67.9-63.8,70.6H142.1z"/>
        <path id="b"  class="st1" d="M245,297.3c-5.5,0-9.9,4.4-9.9,9.9v116c-13.7,4.2-23.9,16.9-24.2,31.8c-0.2,9.1,3.1,17.8,9.4,24.4
            c6.3,6.6,14.8,10.4,23.9,10.6h0.8l0,0c18.4,0,33.7-15,34.1-33.3c0.2-9.1-3.1-17.8-9.4-24.4c-4.1-4.3-9.2-7.4-14.8-9.1v-116
            C254.9,301.7,250.5,297.3,245,297.3z M255.4,446c2.6,2.8,4.1,6.4,4,10.2c-0.2,7.7-6.6,14-14.3,14h-0.4c-3.8-0.1-7.4-1.7-10-4.4
            c-2.6-2.8-4.1-6.4-4-10.2c0.2-7.7,6.6-14,14.3-14h0.4C249.2,441.6,252.7,443.2,255.4,446z"/>
        <path id="c"  class="st1" d="M181.4,307.2v55.5c0,9.6-7.8,17.3-17.3,17.3h-29.2c-4.3-14-17.3-24.3-32.7-24.3C83.4,355.7,68,371,68,389.9
            s15.3,34.2,34.2,34.2c15.4,0,28.4-10.2,32.7-24.3h29.2c20.5,0,37.1-16.7,37.1-37.1v-55.5c0-5.5-4.4-9.9-9.9-9.9
            C185.9,297.3,181.4,301.7,181.4,307.2z M102.2,404.3c-7.9,0-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4c7.9,0,14.4,6.4,14.4,14.4
            S110.2,404.3,102.2,404.3z"/>
        <path id="d"  class="st1" d="M325.9,399.9h29.2c4.3,14,17.3,24.3,32.7,24.3c18.8,0,34.2-15.3,34.2-34.2s-15.3-34.2-34.2-34.2
            c-15.4,0-28.4,10.2-32.7,24.3h-29.2c-9.6,0-17.3-7.8-17.3-17.3v-55.5c0-5.5-4.4-9.9-9.9-9.9s-9.9,4.4-9.9,9.9v55.5
            C288.8,383.2,305.4,399.9,325.9,399.9z M387.8,375.6c7.9,0,14.4,6.4,14.4,14.4s-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4
            S379.8,375.6,387.8,375.6z"/>
    </g>
  <animate id="first" href="#c" attributeName="class" begin="0s;third.end" values="st0;st1" dur="1s" repeatCount="1" />
  <animate id="second" href="#b" attributeName="class" begin="first.end" values="st0;st1" dur="1s" repeatCount="1" />
  <animate id="third" href="#d" attributeName="class" begin="second.end" values="st0;st1" dur="1s" repeatCount="1" /> </g>
</svg>

Quelle: https://stackoverflow.com/questions/...out-css-and-js
Text mit einem Texteditor als irgendwas.svg abspeichern und in Edomi einfach wie ein normales Bild in ein Universalelement einfügen.
Und schon hat man was animiertes in Edomi. Leider zurzeit als Endlos-Loop (ist auch beim animated GIF so).
Könnte mir aber vorstellen, dass man dies bei den animated SVG evtl. in der Datei steuern könnte, da dies ja spezielle SVG Befehle sind.
Hier noch eine interessante Seite (hab ich aber nicht getestet): https://css-tricks.com/guide-svg-animations-smil/

Falls man das mit dem Endlos-Loop hinkriegen könnte, könnte man schon ein paar tolle Sachen machen. Einfach über Dynamische Designs abhängig von KO-Werten die entsprechenden SVG-Animationen anzeigen lassen (wie man ja auch zwischen einem rot oder grün gefärbten Bild wechseln kann).

Schön wäre, wenn man natürlich noch ein spezielles "onTouch" Design hätte, wo man steuern könnte, was passiert, wenn man etwas anklickt. Sowas könnte dann sogar den globalen Indikator ablösen bzw. übersteuern.

Ich denke, hier könnte man (gaert) mit vielleicht sehr wenigen Anpassungen viele neue grafische Möglichkeiten auftun. Denn die eigentliche Arbeit (das Anzeigen der Grafik bzw. der animierten Grafik) würde ja der Browser selber machen. Edomi müssten im besten Fall einfach noch paar sinnvolle Triggermöglichkeiten anbieten.

[mfd]

.. und animierte SVGs könnten natürlich auch funktionieren.

Das wäre schon eher was. Allerdings ist die Frage, wie man die dann "ansteuern" kann?

[s01iD]

In dem Umfang ist das nicht möglich. Du kannst in Edomi alles tun, was mit CSS möglich ist (und zwar in der DOM-Struktur, die vorgegeben ist). Da geht nicht wirklich viel. Sowas könnte ggf. noch funktionieren: https://codemyui.com/play-button-in-pure-css/

.. und animierte SVGs könnten natürlich auch funktionieren. Habe ich aber noch nicht getestet.

[mfd]

Thema "Micro Animations"
hat da jemand schon mal etwas in der Richtung mit EDOMI ausprobiert, bzw. ist das so überhaupt möglich? Neben der Drehen- und Blinken Geschichte habe ich jetzt auf Anhieb nichts gefunden, was mit Bordmitteln so einfach umzusetzen wäre. Oder übersehe ich da was?
Hier einige Beispiele was ich meine.
Das Vorhaben macht natürlich nur dann Sinn, wenn die Animation KO-gesteuert oder bei Berührung ablaufen kann. Ein fortlaufend animiertes Gif ist nicht mein Ziel.

[gurumeditation]

Logindaten fürs WLAN, weis aber noch nicht, ob der da bleibt. Ist erst mal ein Konzept.

Die Logindaten auf dem Bildschirm zu haben, finde ich eine gute Idee. Ich würde nur den (nach meinem Geschmack) hässlichen QR-Code durch einen dezenten Button (Schrift oder noch besser Icon) ersetzen, der dann als Popup oder auf einer eigenen Seite den Code darstellt. Sicher habt ihr nicht täglich mehrere neue Besucher im Haus, die die WLAN Daten brauchen...

[Janncsi]

Für heute Abend dann auch Schluss....

Kalender ist sauber eingepflegt und kann nun auch in x-facher Ausführung kopiert werden!

Termine.PNG

[Janncsi]

Ich versuche es mal an den Kacheln zu beschreiben...

Die Grundkachel ist ein Universalelement, bei dem ich die Größe individuell einmalig festlege
Universalelement.PNG

Anschließend dann im Design eine Designvorlage zu nutzen, die ich vorher angelegt habe, hier mein Beispiel:
Designvorlagen.PNG
Kacheldesign.PNG

Dann ein zweites Universalelement bauen für die farbige Icon-Kachel machen (Bei mir Kachel-Marker) nach obigem Schema. Diesen Marker an der Grundkachel ausrichten.

Als letztes die Markerkachel duplizieren, 10px in Breite und Höhe verkleinern und x und y jeweils um 5px wertig erhöhen und die Designvorlage entfernen, so dass ein leeres Universalelement vorhanden ist.

Alles markieren und gruppieren und auf einer leeren Visuseite ablegen


Mit dieser Gruppe habt ihr nun eine universelle Kachel, die ihr einfach immer wieder merken könnt und auf eine aktive Seite dupliziert. Die Gruppe dann entsprechend auf Position schieben. Sollte die Kachel sich in der Größe verändern sollen, ändert ihr immer nur das jeweilige Kachel-Universalelement. Die Ausrichtung des Markers bleibt ja trotzdem erhalten und steht immer an der gleichen Stelle oben links, egal wie groß die Kachel gemacht wird.

Solltet ihr euch nun überlegen, dass bspw. die Hintergrundfarbe des Markers gelb statt blau sein soll, dann geht in die Design-Vorlage, ändert die Farbe und alle eure Kacheln ändern sich auf allen Seiten in allen Visualisierungen.

[jp2008]

Wenn einmal das Design steht, ist das Umsetzen auf eine andere Auflösung Minutensache

Magst du deine schnelle Vorgehensweise näher erläutern bzw. wie sehen deine Design-Vorlagen konkret aus?

[Janncsi]

Ich hätte da Mal eine Frage wie ihr das bei verschiedenen Endgeräten löst.
Macht ihr für jedes Endgerät (Handy selbst, Handy Frau, Handy Kind, Tablett, Tablett Wand, ...) eine eigene VISU oder gibt es da einen Trick? Kommt ja auf die Größe bzw. Auflösung des Endgeräten an.

Ich arbeite direkt in Designvorlagen und Gruppierungen und damit ist es total einfach für jedes Endgerät schnell eine neue Visu aufzusetzen.

Wenn einmal das Design steht, ist das Umsetzen auf eine andere Auflösung Minutensache.

LG

[trollmar]

hab mir dafür eine openhab mqtt visu gemacht ..
Das ist aber nicht im Sinne des Erfinders

Funktioniert aber wunderbar