EDOMI - Zeigt her eure Visus!

[vento66]

Nicht so schlecht, aber für das "Radio Arabella" sollte man dich eigentlich entmündigen

[timberland]

So hier die noch Sonos Musik Steuerung.

IMG_0084.PNG IMG_0085.PNG

[ChristianHS]

Gerade endeckt

zwar jetzt nicht unbedingt für die Visu, aber find es irgendwie cool

http://codepen.io/joshbader/pen/EjXg...signernews.com

Wow, die sehen Super aus. Aber wie bindet man die in Edomi ein?

[baumhaus123]

@Stoxn: Danke für die Bilder, schaut super aus!

[timberland]

Gerade endeckt

zwar jetzt nicht unbedingt für die Visu, aber find es irgendwie cool

http://codepen.io/joshbader/pen/EjXg...signernews.com

[NurMa]

Hi Kannst du mal zeigen wie du so eine Seite aufgebaut?

Gerne, ist eigentlich recht simpel.

Datum und Uhrzeit sowie der "Home"-Button sind in allen anderen Seiten eingebunden, damit sie zentral bearbeitet werden können.

Die Hintergründe, ich nenne sie mal Quadranten, sind einfache Universalelemente mit unterschiedlichen Designvorlagen. Es gibt 6 Varianten, jeweils links und rechts oben, mitte und unten. Darin sind dann die Rahmen definiert. So kann ich beliebig viele Quadranten erstellen, indem ich einfach zusätzliche davon mit den Designvorlagen mitte links und rechts erstelle. So zum Beispiel im Menü.

Hier werden auch diesen Quadranten die Aktionen zugewiesen, dank des grandiosen "Durchklick"-Verhaltens ist das so super einfach und ich kann beliebig viele Elemente davor setzen.

2016-03-06 13_37_06-EDOMI · Administration - Chromium Portable.png

Bis auf die Icons ist alles über Designvorlagen gelöst. Ein Butten im Menü besteht aus zwei Universalelementen, einem Icon und einem Text.

2016-03-06 13_40_23-EDOMI · Administration - Chromium Portable.png 2016-03-06 13_40_05-EDOMI · Administration - Chromium Portable.png

Bei den Funktionen ist es ähnlich. Am Beispiel der Hängeleuchte sieht das so aus:

2016-03-06 13_41_27-EDOMI · Administration - Chromium Portable.png 2016-03-06 13_42_32-EDOMI · Administration - Chromium Portable.png2016-03-06 13_47_55-EDOMI · Administration - Chromium Portable.png

Das Symbol ist ein Universalelement mit Icon aus dem KNXUF Iconset.

Der schmale Balken bekommt über dynamische Designs, abhängig vom Statusobjekt des Schaltaktors, rot oder grün als Hintergrundfarbe zugewiesen.

Der Text "Hängeleuchte" ist ein Universalelement bei dem Rahmen oben und unten in "grau" sowie links und rechts "transparent" sind. Das transparent sollte nach einem der letzten Updates soweit ich weiß nicht mehr notwendig sein.

Die Buttons sind Universalelemente mit abgerundeten Ecken und Schatten. Die Einstellungen seht ihr auf dem Screenshot. In dem Fall besteht der Inhalt aus einfachen Buchstaben "I" und "O", bei den Symbolen sind diese entsprechend als Hintergrundbild definiert.

2016-03-06 13_51_10-EDOMI · Administration - Chromium Portable.png

Das ist eigentlich schon alles, was ich verwendet habe. Wenn Interesse besteht, kann ich gerne noch die ein oder andere Einstellung posten. Einfach Fragen. Kann im Moment ein wenig dauern, weil Frau und Kind sich leider abwechselnd mit Magen-Darm-Infekten anstecken.

[Stoxn]

Ich teile gerne auch noch mal meinen aktuellen Stand - da ich wie einer der Vorredner nicht sehr kreativ bin, habe ich mir das Design größtenteils zusammenkopiert. Vor allem die Vorlage von timberland finde ich sehr gelungen (Danke fürs Teilen!), was man an meinen Screenshots dann auch sieht :-) Der Thread dient ja vor allem Ein- und Umsteigern einen Eindruck zu gewinnen.

Wenn Ihr Fragen zu den einzelnen Seiten habt, lasst es mich wissen. Der Hintergrund ist übrigens kein Bild, sondern CSS:
-webkit-linear-gradient(135deg, rgba(62,116,143,1) 0%, rgba(19,65,92,1) 100%)

Es wurde ja schon angesprochen, dass die vielen Pop-Ups viele Seiten erzeugen. Ich habe Ordner genutzt, um den Überblick zu behalten.

IMG_2071.png IMG_2072.png IMG_2073.png IMG_2074.png IMG_2075.png IMG_2076.png IMG_2077.png IMG_2078.png IMG_2079.png IMG_2080.png Screen Shot 2016-03-06 at 12.57.47.png

[timberland]

Ja genau. In dem Fall für iPhone 6 in 750 x 1294
Man kann aber alle Linien usw auch in Edomi erstellen. Ich arbeite lieber so

iPhone 6.png

[BadSmiley]

Dann ist der Hintergrund (also die Spalten, Linien usw) aber fix auf die Auflösung eingestellt oder?

[timberland]

Hi Kannst du mal zeigen wie du so eine Seite aufgebaut?

Wenn du meinst wie das im Visueditor aussieht...

visu.png

und mit Vorschau

visu1.png

[timberland]

Achso, hsm in zip umbenennen und entpacken

[ttcoach]

Das ist mir klar. Aber wie mache ich das mit dem HSM-Format? Das kann ich nicht verarbeiten.

[timberland]

Das fertige Icon kann ganz einfach in die Visu geladen werden.
Dabei erstellst du dir z.B. ein Universalelement der größe vom Icon.

Universal.png

gehst auf Design

Universal1.png

gehst auf Hintergrundbild

Universal2.png

entweder zuerst auf Bilder rechtsklick und Ordner erstellen. Dann auf Neu

Universal3.png

Bild erstellen

Universal4.png

und dann hoch laden mit Bilddatei hochladen.

[ttcoach]

Servus.
Habe die HSM nun heruntergeladen. Sorry aber wie kann ich die nun weiter bearbeiten? Wie integriere ich die Datei in edomi oder wie geht es nun weiter. Wahrscheinlich ganz einfach.....

[timberland]

Moin, das würde mich auch brennend interessieren und wie man schwarze Symbole möglichst einfach auf einen transparenten Hintergrund setzt und in weisse umwandelt.

Am besten du ladest dir die Icons als HSM runter. Hier hast du z.B. die Icons im Ordner design 6 die Icons in weiss mit transparenten Hintergrund. Oder im Ornder design0 als svg. Die kannst dann einfach bearbeiten wie du magst.