Visu
Inhaltsverzeichnis
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
- Visu-URL in Safari aufrufen
- Link auf dem Homebildschirm erstellen
- 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)
Visuaccount anlegen
Visualisierung
Visu Login
Visu Login auswählen
Visualisierung erstellen
unter Konfiguration / Visualisierung / Visualisierungen mit dem Button Neu und Eingaben von Name sowie Breite und Höhe in Pixeln:
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:
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):
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   oder   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.
