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

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.