Projektvorstellung IPSView

Hallo Leute,

Möchte den Projekt Showcase nützen, um mein aktuelles Projekt bzw. den aktuellen Entwicklungsstand zu präsentieren und mir mal weiteres Feedback zu holen.

Es handelt sich bei IPSView um einen Designer, mit dem man sich eigene Oberflächen für iOS, Windows und später vermutlich auch Android zusammenklicken kann. Diese konfigurierten Seiten werden am IPS Server abgespeichert und können mit einem der verfügbaren Clients geladen und angezeigt werden.

Ziel von IPSView ist es, eine Möglichkeit zu bieten spezielle GUIs für bestimmte Endgeräte zu konfigurieren.

Es wird also kein Wert darauf gelegt, dass sich die GUI in der Größe dem jeweiligen Client anpasst, sondern man konfiguriert sich vielmehr für unterschiedliche Endgeräte unterschiedliche GUIs, die dafür aber perfekt auf die Größe des jeweiligen Client abgestimmt ist.

Meine Beweggründe für die neue GUI waren folgende:

[ul]
[li]das WebFront ist zwar sehr mächtig, aber in der Gestaltung einer relativ kompakten individuellen GUI war es mir aber mittlerweile zu unflexibel.
[/li][li]das iFront ist zwar sehr schnell und perfekt für Unterwegs, aber für die Steuerung zuhause war mir die Navigation zu aufwendig (zB kurz Jalousie herunterlassen – 2 mal zurück, Beschattung, Device, Select Profile, …
[/li][li]und das Dashboard eignet sich nur für Windows und ist nicht unbedingt für Touch Bedienung optimal.
[/li][li]
[/li][/ul]

Vor ungefähr einem Jahr habe ich dann begonnen meine eigene GUI zu entwickeln. Mein Ziel war es, eine schnelle und individuelle GUI für iOS zu schreiben. Und obwohl heutzutage die ganze Welt fast nur mehr auf HTML setzt, habe ich mich für eine native Implementierung entschieden. Gründe hierfür waren folgende:

[ul]
[li]Nichts fühlt sich so gut an wie eine native App
[/li][li]Man kann die Hersteller spezifischen Features besser ausnützen
[/li][li]Schneller als HTML
[/li][li]ferner wollte ich mich wieder mal mit einer für mich neuen Technologie beschäftigen (und HTML bzw. dessen Interpretation der diversen Browser löst immer wieder leichte Aggressionen bei mir aus …)
[/li][li]
[/li][/ul]

Meine persönlichen Präferenzen mittlerweile:

[ul]
[li]Für detaillierte Einstellungen, Monitoring und während des Entwicklungs Prozesses verwende ich das gute altbewährtes WebFront
[/li][li]Wenn ich unterwegs bin, verwende ich das iFront bzw. IPSView mittels VPN
[/li][li]Für zuhause habe ich mir für das iPhone eine GUI erstellt, mit der ich die wichtigsten Sachen sehr schnell im Zugriff habe (Bewässerung, Beschattung, TV, Musik und Licht).
[/li][li]Für das iPad habe ich einen leicht verständlichen Floorplan erstellt
[/li][li]
[/li][/ul]

Vorteile von IPSView:

[ul]
[li]intuitiver Designer (vordefinierte Controls befinden sich bereits im Objektbaum).
[/li][li]Freie Gestaltungsmöglichkeit der GUI
[/li][li]GUI muss nur einmalig initial geladen werden
[/li][li]Native Clients
[/li][li]Komplette GUI Definition befindet sich in einem File (einfaches Backup, kopieren oder auch transferieren)
[/li][li]Sehr schnell (auch auf low cost Systemen)
[/li][li]Support von Charts mit mehreren IP-Symcon Variablen (inklusive Konfigurationsmöglichkeit über den IPSView-Designer)
[/li][li]
[/li][/ul]

Diskussionen zu meinem Projekt bitte unter diesem Thread

Der Designer gliedert sich in 3 Bereiche:

[ul]
[li]Navigationsbaum
[/li][li]Designer
[/li][li]Property Window
[/li][/ul]

Im Zentrum befindet sich der eigentliche Designer, links der Navigationsbaum inklusive der Verbindungseinstellungen und rechts findet man die Seitenauswahl und das Property Fenster.

Nach Eingabe der Serverdaten (IP-Adresse des IP-Symcon Server und der Ports) werden die IPS Objekte in den Baum geladen. Dargestellt werden alle Variablen, Image Media Dateien und Instanzen und Ordner die Variablen enthalten. Links werden automatisch auf die zugrundeliegenden Variablen übersetzt.

Bei Variablen werden bereits vordefinierte Controls im Navigationsbaum angeboten, diese braucht man nur mehr per Drag and Drop in das Designer Fenster ziehen.
Im Property Editor können dann noch diverse Eigenschaften verändert werden, die wichtigsten davon im Überblick:

[ul]
[li]Position
[/li][li]Größe
[/li][li]Texte
[/li][li]Assoziationen
[/li][li]Images
[/li][li]Vordergrund und Hintergrund Farbe
[/li][/ul]

Wenn keine Farbe spezifiziert wird, wird der default Skin verwendet (dunkler grau Ton).

Bei Images ist auf eine passende Größe zu achten, da ansonsten die View unnötig viel Speicher verbraucht, was sich wiederum in verlängerten Ladezeiten auf den Clients bemerkbar macht.

Die Views werden im Json Format an Server abgelegt, wobei sich alle benötigten Daten im File befinden (auch die Images).
Je nach Qualität und Anzahl der Controls/Images benötigt die View einige Megabytes.

Liste der derzeitigen Controls:

[ul]
[li]IPSTxtLabel – Anzeige von statischen Texten
[/li][li]IPSVarLabel – Anzeige von IPS Variablen in Form von Text mit Prefix und Suffix (für Integer und Boolean Variablen können Assoziationen angegeben werden)
[/li][li]IPSButton – Button zur Ausführung von Scripts
[/li][li]IPSSwitch – Boolean Schalter (Slider Style auf iOS Clients bzw. Checkbox Style auf Max und Windows)
[/li][li]IPSToggleButton – Boolean Schalter (Button Style)
[/li][li]IPSAssociationButton – Button zur Anzeige von Integer Variablen mit Assoziationen
[/li][li]IPSValueButton – Button um bestimmten Integer Wert zu setzen
[/li][li]IPSRangeButton – Button um Integer Variable um spezifizierten Wert zu erhöhen bzw. zu verringern
[/li][li]IPSTextBox – Anzeige und editieren von Texten
[/li][li]IPSHTMLBox – Anzeige von Variablen mit HTML Content
[/li][li]IPSWebView – Anzeige von Web Inhalten
[/li][li]IPSSlider – Slider zur Anzeige von Integer Variablen mit Wertebereich
[/li][li]IPSRGBSlider – Slider zur Anzeige von RGB Variablen
[/li][li]IPSRGBBox – FarbBox zur Anzeige der aktuellen Farbe einer RGB Variable
[/li][li]IPSImage – Anzeige eines Images
[/li][li]IPSToggleImage – Images für boolean Variable
[/li][li]IPSAssociationImage – Images für Integer Variable mit Assoziationen
[/li][li]IPSMedia – IPSMedia Dateien
[/li][li]IPSGraphButton - Button zur Anzeige von Charts
[/li][li]IPSGraphImage – Image zur Anzeige von Charts
[/li][li]IPSDetailButton – Button zur Anzeige von Detail Seiten
[/li][li]IPSDetailImage– Image zur Anzeige von Detail Seiten
[/li][/ul]

Bei den Pages unterscheidet man zwischen Tab Seiten und Popup Seiten:

  • Tab Page: Wird als eigenständiges Tab im jeweiligen Client angezeigt.
  • Popup Page: kann über IPSDetailButton bzw. IPSDetailImage eingeblendet werden.

Zurzeit stehen fortgeschrittene Prototypen für folgende Systeme zur Verfügung:

  • IPSViewiOS (iPhone und iPad)
  • IPSViewMac
  • IPSViewWindows

Längerfristig sind auch Clients für Android und WindowsPhone in Planung.

Getestete Hardware:
iPhone 4
iPad 1
Mac
Windows7

Durch die native Implementierung der Clients ergeben sich marginale Unterschiede zu der Darstellung im Designer.

Generell wurde bei den Clients darauf geachtet, dass sich HTML Content nahtlos in die restliche GUI integriert. Das hat den Vorteil, dass man Html Content, der primär für das WebFront gemacht wurde auch wunderbar in IPSView integrieren kann.

Allgemein:
Bei allen Clients muss vor der Verwendung die Server Verbindung bzw. der zu verwendende Viewname eingetragen werden.

Bei iOS Geräten ist die Konfiguration im Settings Menu des Geräts zu finden (Einstellungen - IPSView).

Zusätzlich kann im Konfigurations Menu, ein Button für einen Reload der View aktiviert werden. Dieser wird auf einer eigenen ToolBar angezeigt, wodurch sich die nutzbare Oberfläche für Controls verringert.
Der Button kann allerdings während der Entwicklung einer Oberfläche durchaus sehr nützlich sein, da man dadurch die View nach einer Änderung im Designer per Knopfdruck neu laden kann.

Generell muss bei iOS darauf geachtet werden, dass die Größe der View entsprechende der verwendeten Hardware definiert wird, da ansonsten der überstehende Teil abgeschnitten wird bzw. nicht der volle Platz ausgenützt wird.
Vertikal kann man die View grösser definieren, das ist speziell beim iPhone wichtig, da ansonsten der verfügbare Platz schnell zu klein wird.

Ist von der Technik her dasselbe wie das iPad, allerdings ist es auf jeden Fall nötig sich hier eigene Views zu definieren (im Gegenzug ist es bei den anderen Clients durchaus möglich ein und dieselbe View auf iPad, Mac und Windows zu verwenden.

Bei Mac Geräten ist die Konfiguration im Menu Edit/Einstellungen zu finden. Beim ersten Aufruf des Programms öffnet sich das Konfigurations Window automatisch und nach Eingabe der Verbindungsdaten wird die View geladen.

Bei der Mac GUI werden die typischen Mac Farben für alle Controls verwendet, eine Änderung der Farben ist auch nur sehr eingeschränkt möglich.

Einen kompletten Reload der View kann man über das Menu View/Reload auslösen oder auch über den Shortcut #R.

Durch die unterschiedlichen Hintergrund Farben von Mac und iOS ist es empfehlenswert für den Mac dunklere Icons zu verwenden.

Bei Windows kann man die Konfiguration über den Button rechts oben erreichen. Nach dem Setzen der Verbindungsdaten wird die View mit dem eingegebenen Namen geladen.

Zusätzlich ist es möglich über die Konfiguration Buttons für ein manuelles Refresh bzw. ein Reload der View zu aktivieren.

Beim Windows Client gibt es leider noch keinen Support von Graphen (siehe auch Feature Matrix weiter unten).

Ist mittelfristig in Planung.

Grundvoraussetzung für die weitere Entwicklung ist aber, dass der iOS Client komplett fertig ist und dass es genügend Interessenten für einen Android Client gibt.

[edit] Erste Verison ist mittlerweile im groben fertig:

Screenshot_2013-11-24-22-02-05.png

Screenshot_2013-11-24-22-14-52.png

Screenshot_2013-11-24-22-15-06.png

Screenshot_2013-11-24-22-15-10.png

Screenshot_2013-11-24-22-15-16.png

Screenshot_2013-11-24-22-17-54.png

Screenshot_2013-11-24-22-18-06.png

Screenshot_2013-11-24-22-18-22.png

Ist wenn dann längerfristig in Planung.

Verhältnis von Aufwand (Entwicklung + Investition) zu potentiellen Usern ist hier am geringsten.

Für Besitzer von IRTrans, gibt es auch einen speziellen Support.

Alle verfügbaren Remotes stehen im IP-Symcon Navigations Baum direkt zur Verfügung. Für jede Fernbedienungs Taste wird ein vordefinierter Button bwz. ein Image Button angeboten.

So ist es zum Beispiel möglich sich eine virtuelle Fernbedienung zu erstellen (Ein Image der Fernbedienung und über die Tasten ImageButtons mit transparentem Hintergrund legen).

Alternativ kann man sich auch eine Seite bauen, wo sich die wichtigsten Buttons aller Remote Controls befinden.

Achtung: Beim IRTrans Support handelt es sich nur um einen Prototypen, der in IPSView in dieser Form noch nicht umgesetzt wurde!

Für die Apple Clients ist auch bereits ein Chart Support integriert. Diese können ebenfalls über den Designer bequem konfiguriert werden.

Für jeden Graphen können folgende Werte angegeben werden:

[ul]
[li]ID – ID der IP-Symcon Variable
[/li][li]Name – Name des Graphen
[/li][li]Unit – Einheit
[/li][li]Stack – Möglichkeit zur Gruppierung von Werten
[/li][li]ScaleFactor – Faktor der zur Umrechnung verwendet wird (Ein Anwendungsbeispiel wäre die Umrechnung von kWh Werten auf Euro).
[/li][li]Color – Farbe des Graphen, bei keiner Angabe wird eine vordefinierte Default Farbe verwendet
[/li][li]Digits – Anzahl der Stellen, auf die der jeweilige Wert im Graphen gerundet werden soll
[/li][/ul]

Weiters kann neben einer kurzen Beschreibung des Graphen noch ein default für den Graphen Style (Line oder Bar) und ein default für den Zeitraum (Tag, Woche, Monat oder Jahr) angegeben werden.

Bei Variablen mit einem aktiven Logging werden bereits im IP-Symcon Navigationsbaum vordefinierte Controls für Graphen Angeboten.

Achtung: Beim Chart Support für Apple handelt es sich nur um einen Prototypen, der in IPSView in dieser Form noch nicht umgesetzt wurde!

Hier noch ein kleiner Vergleich der IP-Symcon Frontends:

IPSView:

[ul]
[li]Primär für die Verwendung „inHouse“ konzipiert
[/li][li]Kein Support von Authentifizierung und gesicherter Verbindung
[/li][li]GUI kann mittels Designer frei konfiguriert werden
[/li][li]Unterstützung allgemeiner auf IPS zugeschnittener Controls
[/li][li]Native Clients für iPad,iPhone,Mac und Windows (Android in Planung)
[/li][/ul]

Dashboard:

[ul]
[li]Nur interne Verwendung
[/li][li]GUI kann mittels Designer frei konfiguriert werden
[/li][li]Nur für Windows geeignet
[/li][/ul]

MobileFront

[ul]
[li]Verwendung von Intern und Extern
[/li][li]Support von Authentifizierung und gesicherter Verbindung
[/li][li]GUI folgt der IPS Struktur
[/li][li]Clients für iPad/iPhone und Android
[/li][li]Schnelles Laden und Refresh
[/li][/ul]

WebFront

[ul]
[li]Verwendung von Intern und Extern
[/li][li]Support von Authentifizierung und gesicherter Verbindung
[/li][li]Läuft mit jedem gängigem Browser auf jedem OS
[/li][li]GUI kann in den vorgegeben Grenzen konfiguriert
[/li][li]Moderateres Laden bzw. Refresh
[/li][li]Neue IP-Symcon Objekte werden autom. in der GUI angezeigt
[/li][/ul]

So, wie geht’s weiter:

Ich strebe bei diesem Projekt eine kommerzielle Vermarktung an.
Mein primärer Plan wäre der, dass ich den Designer und den Windows Client zB hier über das Forum kostenlos zum Download anbiete und dass man sich die anderen Clients über die entsprechenden Stores kaufen kann.

Was fehlt noch:

Im Großen und Ganzen funktionieren die Clients und der Designer schon sehr gut, was noch fehlt ist etwas Feintuning und teilweise könnte man die Usability noch etwas verbessern.
Input hierfür möchte ich mir in einer Beta Testphase holen, die in einigen Wochen starten könnte.

Fokus liegt in der ersten Zeit sicher auf den iOS Clients, erst wenn diese zufriedenstellend laufen, werde ich weitere Clients in Angriff nehmen.

Weiters fehlen auch noch so Dinge wie ein passendes Icon und natürlich eine Doku.

Mittlerweile ist IPSView 1.0 als Produkt erhältlich, weiter Details gibts auf der Produkt Homepage oder im Forum

Zeit um auch wieder einen kurzen Blick darauf zu werfen, was IPSView im Jahr 2015 bringen wird.

Geplante Features:

[ul]
[li]Inline Pages – erlaubt das Verschachteln von Seiten, auch eine mehrfach Verschachtelung ist möglich. Austauschen kann man die eingebetteten Seiten über Buttons, auf diese Weise ist es möglich beliebige Menü Strukturen zu erstellen.
[/li][li]SSL Support – Unterstützung der SSL Verschlüsselung auf allen Clients und Optimierung der Datenübertragung
[/li][li]Farbübergänge – Unterstützung von Gradient Colors, neuer komfortabler Farbeditor im Designer
[/li][li]Support von Metadaten und Templates, ermöglicht es Variablen nach ihrer Verwendung zu klassifizieren. Diese Klassifizierung kann dann verwendet werden, um basierend auf einem Template eine View zu generieren.
[/li][li]Zusätzliche Icons
[/li][li]Chart Support – Anzeige von Charts
[/li][li]Color Picker für RGB Farbauswahl
[/li][/ul]

Weitere Details sind auch auf meiner Homepage zu finden.

Diskussionen zu dem Thema, bitte wie immer hier.

Grid Template:

Das Grid Template generiert Views, die eine Tabellen Struktur zum Vorbild haben, es stehen Templates für eine View mit und ohne Navigationsbereich und eine mobile Version zur Verfügung:

Die Screenshots sollten einen Eindruck darüber vermitteln, was jeder mit IPSView an einem Wochenende auf die Beine stellen kann, der bereits eine funktionierende Haussteuerung mit IP-Symcon hat.

IPSView20_Template_GridMobPort_1.png IPSView20_Template_GridMobPort_2.png IPSView20_Template_GridMobPort_3.png

Weitere Details sind auch hier zu finden.

Line Template:

Das Line Template hat eine Zeilen Struktur zum Vorbild, jedes Gerät wird in einer Zeile dargestellt und alle Geräte eines Raumes wieder in einem Block:

IPSView20_Template_LineMobPort_1.png IPSView20_Template_LineMobPort_2.png IPSView20_Template_LineMobPort_3.png

Weitere Details sind auch hier zu finden.