FloorsWidget

FloorsWidget (WebWidget)

The FloorsWidget is a gamification WebWidget that graphically displays a categorised set of entries, to each of which several actions can be assigned. The default representation is based on a building in which each floor corresponds to a category and each door on that floor corresponds to an entry. The actions of the doors are displayed as menu entries on the nameplate of each door. When a menu item is selected, a message is sent to the WebWidget in InstantView.

The web widget is operated on the computer mainly with the keyboard and on mobile devices with the touch functionality. In addition to keyboard operation, click selection is supported on the computer for ease of use. Navigating between and within floors is done with the arrow keys. The (+) key adds a new door to the current floor if the floor allows dynamic addition of doors.

Decoratively, each floor has a lift door and floor with skirting boards. All pictures are to be determined by the IV developer. This opens up the possibility of creating a different graphic representation from pictures.

Use

Dependencies

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

Message interface

When describing the direction, the WebWidget is divided into its two components. The WebWidget implemented in HTML, which implements the presentation logic and user interaction in the browser and the WebWidget implemented in InstantView, which supplies the other side with the data from ClassiX and controls it.

Name	Parameters	Description
Push News (IV→HTML)
settings	Settings	This message passes a Settings object to the Web widget as CX_JSON_OBJECT, thus specifying the display type (image paths and image dimensions) of the Web widget. This message can be sent as often as required to change the display, but must be sent at least once before a data message.
data	Data	This message passes a data object to the Web widget as CX_JSON_OBJECT and transmits the data to be displayed. This message can be sent as often as required and has an overwriting effect.
Events (HTML→IV)
INITIALIZE_SOCKET	-	The first message that the WebWidget sends once it has initialised. This indicates that the WebWidget is ready to receive and process push messages.
ADD_SOCKET	String	Is fired if the user wants to add a door on the current floor, either by clicking on the (+) sign or by pressing the (+) key.
{Message}_SOCKET	CX_JSON_OBJECT	Freezes when the user selects an action item (from the nameplate menu of a door). {message} is previously defined by the IV developer. See the action object for details. The parameters are encoded as a JSON object: floorId: the ID of the current (selected) floor. doorId: the ID of the selected door. actionId: the ID of the selected action

The Settings object

Field	Type	Default value	Description
doorImageUrl	String	""	The URL for the image representing an entry (a door).
elevatorImageUrl	String	""	The URL for the image representing a lift.
doorMenuImageUrl	String	""	The URL for the image representing the name plate next to a door.
floorImageUrl	String	""	The URL for the image representing the floor of a floor.
doorAspectRatio	CX_NUMERIC	1	The width of the door picture / height of the door picture. The ratio is used for correct scaling.
doorMenuAspectRatio	CX_NUMERIC	1	The width of the nameplate image / height of the nameplate image. The ratio is used for correct scaling.
elevatorAspectRatio	CX_NUMERIC	1	The width of the lift picture / height of the lift picture. The ratio is used for correct scaling.
floorStripHeight	CX_NUMERIC or integer	0	If the floor has a baseboard, the baseboard should appear on the wall. This specification in pixels determines the height of the skirting board in pixels on the floor image.

The Data Object

Field	Type	Default value	Description
floors	ARRAY(floor)	-	The array defines the floors to be displayed.

The floor object

Field	Type	Default value	Description
id	String	-	A unique ID for the floor
text	String	-	The title of the floor. The title appears as a heading in the upper part of the floor.
noAddButton	Boolean	FALSE	If set, the user cannot dynamically add new doors to the floor.
doors	ARRAY(Door)	-	The array defines the doors that can be found on this floor.

The door object

Field	Type	Default value	Description
id	String	-	A unique ID for the door.
text	String	-	The title of the door. The title appears on the door with a shaded background.
image	String	-	The path to an image that should appear on the door.
actions	ARRAY(Action)	-	The array defines the menu entries on the nameplate of this door

The action object

Field	Type	Default value	Description
id	String	-	A unique ID for the menu item. The uniqueness does not have to be across doors.
text	String	-	The text of the entry
icon	String	-	The name of an icon from Font Awesome 4.7. The icon then appears in the menu item. Example: fa-share
message	String	-	The name of the ClassiX message sent as {message}_SOCKET to the WebWidget in InstantView when this menu item is selected.