Lade...
 

FloorsWidget

FloorsWidget (WebWidget)

Das FloorsWidget ist ein Gamification-WebWidget, das eine kategorisierte Menge von Einträgen, denen ihrerseits jeweils mehrere Aktionen zugeordnet sein können, graphisch darstellt. Die Standarddarstellung geht von einem Gebäude aus, in dem jede Etage einer Kategorie und jede Tür auf dieser Etage einem Eintrag entspricht. Die Aktionen der Türen werden als Menüeinträge auf dem Namensschild der jeweiligen Tür dargestellt. Beim Auswählen eines Menüeintrags wird eine Nachricht an das WebWidget in InstantView geschickt.

Die Bedienung des WebWidgets erfolgt auf dem Rechner hauptsächlich mit der Tastatur und auf mobilen Geräten mit der Touch-Funktionalität. Das Auswählen durch Anklicken ist auf dem Rechner neben der Tastaturbedienung der Benutzerfreundlichkeit halber unterstützt. Navigieren zwischen und innerhalb der Etagen erfolgt mit den Pfeiltasten. Die (+)-Taste fügt eine neue Tür zu der aktuellen Etage hinzu, falls die Etage das dynamische Hinzufügen von Türen erlaubt.

Dekorativ hat jede Etage eine Aufzugstür und Fußboden mit Fußbodenleisten. Alle Bilder sind durch den IV-Entwickler zu bestimmen. Dies eröffnet die Möglichkeit, aus Bildern eine andere graphische Darstellungsart zu kreieren.

Verwendung

Web(floorsWidget, APP("floorsWidget.html"), 0, 0, 800, 600)

Abhängigkeiten

  • floorsWidget.html
  • floorsWidget-directive.js
  • dependencies/ResizeSensor.js

Nachrichtenschnittstelle

Bei der Richtungsbeschreibung wird das WebWidget in seine zwei Komponenten unterteilt. Das in HTML implementierte WebWidget, welches die Darstellungslogik und Nutzerinteraktion im Browser implementiert und das in InstantView implementierte WebWidget, welches die andere Seite mit den Daten aus ClassiX versorgt und es steuert.

Name Parameter Beschreibung
Push-Nachrichten (IV→HTML)
settings Settings Diese Nachricht übergibt ein Settings-Objekt als CX_JSON_OBJECT ans WebWidget und legt somit die Darstellungsart (Bilderpfade und Bilderdimensionen)des WebWidgets fest. Diese Nachricht kann beliebig oft geschickt werden, um die Darstellungen zu ändern, muss aber mindestes einmal vor einer data-Nachricht geschickt werden.
data Data Diese Nachricht übergibt ein Data-Objekt als CX_JSON_OBJECT ans WebWidget und übermittelt die darzustellenden Daten. Diese Nachricht kann beliebig oft geschickt werden und hat eine überschreibende Wirkung.
Ereignisse (HTML→IV)
INITIALIZE_SOCKET - Die erste Nachricht, die das WebWidget schickt, sobald es sich initialisiert hat. Dies signalisiert die Bereitschaft des WebWidgets, Push-Nachrichten zu empfangen und zu verarbeiten.
ADD_SOCKET String Wird gefeuert, wenn der Benutzer auf der aktuellen Etage eine Tür hinzufügen möchte, entweder durch Klicken auf das (+)-Zeichen oder durch das Drücken der (+)-Taste. 
{Message}_SOCKET CX_JSON_OBJECT

Wird gefreurt, wenn der Benutzer einen Action-Eintrag (aus dem Menü des Namensschilds einer Tür) auswählt. {message} ist vorher durch den IV-Entwickler definiert. Siehe dafür das Action-Object. 

Die Parameter sind als ein JSON-Object kodiert:

floorId: die ID der aktuellen (ausgewählten) Etage.

doorId: die ID der ausgewählten Tür.

actionId: die ID der ausgewählten Aktion. 

 

Das Settings-Objekt

Feld Typ Standardwert Beschreibung
doorImageUrl String "" Die URL für das Bild, das einen Eintrag (eine Tür) darstellt.
elevatorImageUrl String "" Die URL für das Bild, das einen Aufzug darstellt.
doorMenuImageUrl String "" Die URL für das Bild, das den Namensschild neben einer Tür darstellt.
floorImageUrl String "" Die URL für das Bild, das den Fußboden einer Etage darstellt.
doorAspectRatio CX_NUMERIC 1 Die Breite des Türbildes / Höhe des Türbildes. Das Verhältnis wird zwecks richtiger Skalierung verwendet.
doorMenuAspectRatio CX_NUMERIC 1 Die Breite des Namensschildsbilds / Höhe des Namensschildsbilds. Das Verhältnis wird zwecks richtiger Skalierung verwendet.
elevatorAspectRatio CX_NUMERIC 1 Die Breite des Aufzugsbilds / Höhe des Aufzugsbilds. Das Verhältnis wird zwecks richtiger Skalierung verwendet.
floorStripHeight CX_NUMERIC oder Integer 0 Falls der Fußboden eine Fußbodenleiste aufweist, sollte die Fußbodenleiste auf der Wand erscheinen. Diese Angabe in Pixel bestimmt die Höhe der Fußbodenleiste in Pixel auf dem Fußbodenbild. 

 

Das Data-Objekt

Feld Typ Standardwert Beschreibung
floors ARRAY(Floor) - Das Array definiert die Etagen, die dargestellt werden sollen.

 

Das Floor-Objekt

Feld Typ Standardwert Beschreibung
id String - Eine eindeutige ID für die Etage
text String - Der Titel der Etage. Der Titel erscheint als Überschrift im obeneren Teil der Etage.
noAddButton Boolean FALSE Wenn gesetzt, kann der Benutzer keine neuen Türen der Etage dynamisch hinzufügen.
doors ARRAY(Door) - Das Array definiert die Türen, die auf dieser Etage zu finden sind.

 

Das Door-Objekt

Feld Typ Standardwert Beschreibung
id String - Eine eindeutige ID für die Tür.
text String - Der Titel der Tür. Der Titel erscheint auf der Tür mit schattiertem Hintergrund.
image String - Der Pfad zu einem Bild, das auf der Tür erscheinen sollte.
actions ARRAY(Action) - Das Array definiert die Einträge des Menüs auf dem Namensschild dieser Tür

 

Das Action-Objekt

Feld Typ Standardwert Beschreibung
id String - Eine eindeutige ID für den Menüeintrag. Die Eindeutigkeit muss nicht türenübergreifend sein.
text String - Der Text des Eintrags
icon String - Der Name eines Icons aus Font Awesome 4.7. Das Icon erscheint dann im Menüeintrag. Beispiel: fa-share
message String - Der Name der ClassiX-Nachricht, die als {message}_SOCKET an das WebWidget in InstantView geschickt wird, wenn dieser Menüeintrag ausgewählt wird.

 

InstantView Scriptsprache