Visu

Aus EDOMI
Zur Navigation springenZur Suche springen

Allgemein

Auflösung

Hier ein paar Tipps zur Auflösung

Auf dieser Seite wird angezeigt welche Auflösungen real (oder eigentlich umgerechnet) vorhanden sind.
http://ryanve.com/lab/dimensions/

iPad
Beim iPad sind es 20px für die Statusleiste (bzw. 40px in Retina-Auflösung). Eine Empfehlung für das iPad ist 1004x768px, da die native Retina-Auflösung, außer Overhead nichts bringt. Alle Visuelemente werden ohnehin in Retina-Auflösung gerendert, Bilder können ebenfalls in doppelter Auflösung vorliegen und werden dann automatisch skaliert.

Nexus 7 (2nd Gen, 2013er Modell)
960x528px (bzw. das doppelte in Retina-Auflösung - siehe Ipad Retina bringt keine Vorteile)

WebApp

Die EDOMI-Visu ist als Webapp konfiguriert und kann ganz einfach entsprechend abgelegt werden

  1. Visu-URL in Safari aufrufen
  2. Link auf dem Homebildschirm erstellen
  3. Icon auf dem Homebildschirm anklicken - fertig

Die Visu-URL kann auch gleich die Visu-ID und die Zugangsdaten enthalten: http://<IP>/visu/?login=<...>&pass=<...>&visu=<id>

Die <id> ist die Zahl, die Ihr in der Admin Oberfläche unter Konfiguration -> Visualisierung -> Visualisierungen > Name Der Visualisierung (ID) findet

Beispiel: http://192.168.9.99/visu/?visu=1&login=Testuser&pass=testpw

In der Visu einloggen

1. Visuacount anlegen 2. Visualisierung anlegen (hier im Bild "Monitor 1" und unten den Visuaccount zuordnen 3. Visu-Loginseite: Zuerst die erstellte Visuseite auswählen und dann die Zugangsdaten eingeben (hier test und 1234)

Visualisierung erstellen

unter Konfiguration / Visualisierung / Visualisierungen mit dem Button Neu und Eingaben von Name sowie Breite und Höhe in Pixeln:

Visualisierung erstellen

Visueditor

Startbildschirm

Nachdem eine Visualisierung angelegt wurde, können im Visueditor die einzelnen Seiten erstellt werden.

Als erstes fragt der Visueditor nach einer Visuseite die editiert werden soll. Dazu wird das folgende Fenster eingeblendet:

Visuseiten Auswahl

Hier sieht man alle angelegten Visualisierungen bzw. bereits angelegte Seiten. Sollte die Seite die bearbeitet werden soll schon angelegt sein, klickt man auf die entsprechende Visualisierung und wählt darunter die entsprechende Seite aus. Mit einem Klick auf "Übernehmen" ist diese Seite nun im Editor geladen und kann bearbeitet werden.

Soll eine neue Seite angelegt werden, klickt man zuerst auf die Visualisierung und dann auf den Button "NEU" um eine neue Seite zu erstellen. Im sich darauf öffnenden Fenster muss ein Name für die neue Seite angegeben werden, der Seitentyp (Normal oder Popup), ob eine andere Seite eingebunden werden soll, Hintergrundfarbe oder Hintergrundbild und wenn man möchte ein Raster für die Positionierung der Elemente (dieses Raster läßt sich im Editor später ein und ausschalten). Danach gehts auf "Speichern" und die neue Seite ist angelegt. Nach dem Speichern ist man wieder im Auswahlfenster für die zu bearbeitende Visuseite. Wir wählen die neu angelegte Seite aus und klicken auf "Übernehmen". Danach ist die Seite im Visueditor geladen und kann bearbeitet werden.


Im Editor sehen wir folgendes Bild (Editor Übersicht - für die Beschreibung wurde eine Seite mit dem Namen "Testseite" angelegt):

Editor Übersicht


Die Funktionen der einzelnen Buttons ist wie folgt:

Button Kurzbeschreibung
Schliessen schließt den Editor, Änderungen werden übernommen
Testseite die aktuell zu bearbeitende Visuseite
Element hinzufügen Auswahl der verschiedenen Elemente
Raster X das beim Erstellen der Seite angegebene Raster in X-Richtung
Raster Y das beim Erstellen der Seite angegebene Raster in Y-Richtung
(X/Y) Größe des aktuell ausgewählten Elements
Designvorlagen Übersicht der Designvorlagen bzw. deren Erstellung
Zoomstufe die Zoomstufe zwischen 50% und 300% einstellen
Vorschau zeigt alle Elemente ohne Rahmen an, ersetzt in der Beschriftung (und NUR hier, keine dyn. Designs!) {#} mit dem Eingabewert und zeigt ggf. die Opazität eines Elements an
Alle markieren alle Elemente werden markiert
keine die Auswahl der Elemente löschen (nicht die Elemente selber)
Merken Elemente merken/markieren um diese zu kopieren oder zu verschieben
+ gemerkte/markierte Elemente in die aktuelle Seite kopieren
-> gemerkte/markierte Elemente in die aktuelle Seite verschieben
Z-Index + markierte Elemente in Z-Richtung anheben
Z-Index - markierte Elemente in Z-Richtung absenken
Löschen markierte Elemente löschen (nach einer Sicherheitsabfrage)

Positionierung Elemente

In der Menüleiste wird die genaue Position angezeigt. Beim Verschieben eines Elements/Gruppe wird ein "Fadenkreuz" angezeigt, um die Positionierung zu erleichtern.

Das Raster kann in den Visuseiten-Einstellungen angepaßt werden und temporär in der oberen Menüleiste deaktiviert werden.

Markierte Elemente können mit der Tastatur (Cursortasten) verschoben werden - hierzu einfach auf den Button mit den Koordinaten klicken. Dabei wird übrigens auch das Raster berücksichtigt.

Element hinzufügen

Folgende Elemente stehen zur Verfügung

Button Kurzeschreibung
Universalelement Einfacher Button oder Element zur Seitengestaltung
Bildelement Ähnlich dem Universalelement
Tastatureingabe Element zur Eingabe von Zeichen über die Tastatur
Notizen/Skizze Notizen in Textform oder grafischer Form anlegen und bearbeiten
Drehregler Drehregler zum stufenlosen einstellen von Werten
Schieberegler Schieberegler zum stufenlosen einstellen von Werten
Dimmer RGB/HSV hiermit können Lichter über RGB bzw. HSV Werte gedimmt werden
Farbauswahl (Bild) Colorpicking auf Basis des Hintergrundbildes
Codeschloss mit dem Codeschloss werden Seiten geschützt
Liste/Tabelle Generierung einer Tabelle/LIste
Rundinstrumente Rundinstrumente zur Anzeige von Werten (Temperatur, Prozentwerte etc.)
Diagramm sind mehrere Werte vorhanden lässt sich hiermit ein Diagramm erzeugen
Bild/Url Einen Bereich festlegen in dem ein Bild oder eine Url eingebunden werden soll
Zeitschaltuhren Zeitschaltuhren wie man sie kennt
Anwensenheitssimulation Aufnahme und Wiedergabe von KO-Werten
Datenarchiv Werte oder KO-Werte dauerhaft speichern
Meldungsarchiv Speicherung von Textmitteilungen
Kamerabild/-archiv noch leer
Anrufarchiv Daten von ein- und ausgehenden Anrufen archivieren

Eingabe-Möglichkeiten

In allen hellgrün hinterlegten Eingabefeldern können beliebige Werte und Berechnungen auf der Grundlage des dem Visu-Element zugewiesenen Steuerungs-KOs durchgeführt werden. Der KO-Wert wird durch {#} repräsentiert und in der Visualisierung durch den aktuellen KO-Wert ersetzt.

Eine komplette Aufstellung finden Sie hier: weiter zu Übersichtstabelle

Tab-Stops zb. im Beschreibungsfeld können über diese Html Entity &emsp; oder &ensp; eingefügt werden

Farben

In Edomi gibt es zwei, fast gleiche Dialoge für Farben. Einer ist zuständig für Vordergrundfarben (Text Rahmen etc.) und der andere für Hintergrundfarben. Der Unterschied ist lediglich, dass bei den Hintergrundfarben ein Text zu sehen ist, um die Wirkung der Hintergrundfarbe zu zeigen. Die Farben können im Hex-Format angegeben werden (weiß = #ffffff; schwarz = #000000), im RGB Format (rgb 112, 100, 200), im HSL Format und mit Webkit (z.B. Farbverlauf mit -webkit-linear-gradient(top, #80aaff 0%, #eeeeff 100%) )

Eine große Hilfe hierbei kann die Seite <ref>http://angrytools.com/gradient/</ref> sein. Dort kann man alle möglichen Farben oder Farbverläufe per Maus und Schieberegler einstellen. Ist das Ergebnis so wie man sich das vorgestellt hat, kopiert man die Zeile für /* safari5.1+,chrome10+ */ und setzt diese in das Eingabefeld für die Farbdefinition.

Farb-Definition Ergebnis
#99DAFF
Hellblau
#FFAB19
Orange
RGB (21,255,0)
Grün
HSL (120, 50%, 50%)
Pastellgrün
RGBA(255,0,0,0.5)
Rot mit Opazität (Deckkraft) 50%
-webkit-linear-gradient(360deg, #FFA3A3 0%, #520000 100%);
Farbverlauf

Die letzte Zeile ist nur in einem webkit-Browser sichtbar (Chrome, Safari)

Folgende Bilder von links nach rechts:

Vordergrundfarbe Übersicht; Vordergrundfarbe erstellen; Hintergrundfarbe erstellen; Hintergrundfarbe erstellen

Die Felder für die Farbdefinition sind hellgrün, d.h. hier können wir mit einem KO arbeiten. Nehmen wir an, unser KO hat einen Wert zwischen 0 und 255. So könnten wir mit folgender Definition einen waagrechten Balken erzeugen der je nach KO-Wert von Blau nach Rot wechselt.

-webkit-linear-gradient(left,#E00000 0%,#E00000 {#/2.55}%,#0000FF {#/2.55}%,#0000FF 100%)

Dabei wird der KO-Wert jeweils durch 2.55 geteilt, so das das Ergebnis zwischen 0 und 100% ergibt. Das ganze können wir bei der Eingabe schon testen, in dem wir in das Eingabefeld "KO" einen Wert eingeben.

Designvorlagen

Über die Designvorlagen ist es möglich häufig wieder benötigte Designentwürfe, d.h. das Aussehen von Elementen, nur einmal anzulegen und damit auf einfache Art und Weise wiederzuverwenden. Über die Vorlage ist es möglich alle üblichen Werte eines Universalelements, welche wiederum auf den CSS Einstellungen basieren, einzustellen.

Beispiele

Schiebeschalter

Button AUS/EIN - CSS-styled

Slider

Slider Edomi 2.0

HSV/RGB-Steuerung einer Leuchte mit Colorpicker und Drehreglern

Kopfzeile

Diagramm Zoom

Eintragen im Diagramm Startdatum

now - {181} days

Die 181 ist hier z.B. ein Schieberegler mit dem Bereich 1 .. 20. Damit kann man das Diagramm von Enddatum = now bis auf 20 Tage verkleinern. Im Visuelement Diagramm wird als KO dieser Scheiberegler (181) eingetragen. Dann reagiert das Diagramm auf die Werteveränderung des Schiebereglers.