EDOMI - Zeigt her eure Visus!

[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

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

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

[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]

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

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

[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!!!

[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]

Und hier noch alternativ in einer anderen Farbe...

Raum_alt.PNG

[wintermute]

Transparenter Schieber

Das ist ja mal eine fluffige Idee

[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

[jockele]

muss sagen das Design ist echt stark, wirst Du die Visu mal den künstlerisch weniger Begabten zur Verfügung stellen?

[Janncsi]

Ja, als Rohdaten-Visu!

[Robert_Mini]

Was ist denn eine Rohdatenvisu?
Robert

[mfd]

Vielleicht meint er, diese EDOMI Export-Funktion...

...ahh, Mist, existiert noch nicht