Class: xBrowser

xBrowser

This is a reader of COBie data encoded in JSON format in COBieLite data structure. You can easily combine this with 3D viewer xViewer to get full user experience. This class is loosely coupled with jQuery UI. It is not a mandatory dependency for the rendering itself. Tree views are basically nested unordered lists which is a natural representation for hierarchical data and lists are rendered as a table with one column. Classes are assigned to different parts in a way that you can use to style in any way you want.

If you want to do all the rendering yourself you can still take advantage of preprocessing which happens after COBie data is loaded. COBie data model is converted to the simplified structure which is more homogenous and better suitable for templating and visual representation. For more detailed information have a look on xVisualModel and related classes. Visual model is passed as an argument to loaded event.

Constructor

new xBrowser(langopt, cultureopt)

This is the main class you need to use to render semantic structure of the building model

Parameters:
Name Type Attributes Description
lang string <optional>

language code. This framework contains dictionary for parameters and attributes. It will be used for COBie processing and rendering. If your language or culture is not available default values are "en", "uk"

culture string <optional>

culture code. Default combination of language and culture is "en", "uk".

Methods

activateEntity(id)

Use this function to activate entity from code. This will cause entityActive event to be fired. That might be usefull to update data relying on any kind of selection.

Parameters:
Name Type Description
id Number

ID of the entity to be activated

load(source)

Use this function to load data from JSON representation of COBieLite. Listen to loaded event to start using the browser.

Parameters:
Name Type Description
source string | File | Blob

path to JSON data or File or Blob object to be used to load the data from

Fires:

on(eventName, callback)

Use this method to register to events of the browser. You can define arbitrary number of event handlers for any event. You can remove handler by calling onRemove() method.

Parameters:
Name Type Description
eventName String

Name of the event you would like to listen to.

callback Object

Callback handler of the event which will consume arguments and perform any custom action.

onRemove(eventName, callback)

Use this method to unregisted handlers from events. You can add event handlers by call to on() method.

Parameters:
Name Type Description
eventName String

Name of the event

callback Object

Handler to be removed

renderAssetTypes(container, initTree)

This function renders asset types as a tree view (asset type -> asset). If you use jQuery UI it can be turned into collapsable tree control with UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements created by this function have a handlers attached which will fire UI events of xBrowser. If you do any heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.

Parameters:
Name Type Description
container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

initTree Bool

if true and jQuery UI is referenced tree will be rendered using UI icons as a collapsable tree control.

renderAssignments(entity, container)

This function renders assignments as a list view. This represents different kinds of relations between this and other entities If you use jQuery UI it will use UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements created by this function have a handlers attached which will fire UI events of xBrowser. If you do any heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.

Parameters:
Name Type Description
entity xVisualEntity

visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events: entityClick, entityDblclick, entityMouseDown, entityMouseUp, entityMouseMove, entityTouch, entityActive

container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

renderAttributes(entity, container)

This function renders attributes assigned to the entity as a list view. Attributes are COBie equivalent for Property Sets and can contain arbitrary data. If you use jQuery UI it will use UI icons. But it is not mandatory and you can style it any way you want.

Parameters:
Name Type Description
entity xVisualEntity

visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events: entityClick, entityDblclick, entityMouseDown, entityMouseUp, entityMouseMove, entityTouch, entityActive

container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

renderContacts(container)

This function renders asset types as a list view (asset type -> asset). If you use jQuery UI it will use UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements created by this function have a handlers attached which will fire UI events of xBrowser. If you do any heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.

Parameters:
Name Type Description
container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

renderDocuments(entity, container)

This function renders documents as a list view. If you use jQuery UI it will use UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements created by this function have a handlers attached which will fire UI events of xBrowser. If you do any heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.

Parameters:
Name Type Description
entity xVisualEntity

visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events: entityClick, entityDblclick, entityMouseDown, entityMouseUp, entityMouseMove, entityTouch, entityActive

container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

renderIssues(entity, container)

This function renders issues assigned to the entity as a list view. If you use jQuery UI it will use UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements created by this function have a handlers attached which will fire UI events of xBrowser. If you do any heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.

Parameters:
Name Type Description
entity xVisualEntity

visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events: entityClick, entityDblclick, entityMouseDown, entityMouseUp, entityMouseMove, entityTouch, entityActive

container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

renderProperties(entity, container)

This function renders properties assigned to the entity as a list view. Properties are predefined in COBie data model. If you use jQuery UI it will use UI icons. But it is not mandatory and you can style it any way you want.

Parameters:
Name Type Description
entity xVisualEntity

visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events: entityClick, entityDblclick, entityMouseDown, entityMouseUp, entityMouseMove, entityTouch, entityActive

container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

renderPropertiesAttributes(entity, container)

This function renders properties and attributes assigned to the entity as a list view. This combines data which can be rendered separately by renderProperties() or renderAttributes() but it is sometimes convenient to render both into one single layout. If you use jQuery UI it will use UI icons. But it is not mandatory and you can style it any way you want.

Parameters:
Name Type Description
entity xVisualEntity

visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events: entityClick, entityDblclick, entityMouseDown, entityMouseUp, entityMouseMove, entityTouch, entityActive

container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

renderSpatialStructure(container, initTree)

This function renders spatial structure as a tree view (facility -> floors -> spaces -> assets). If you use jQuery UI it can be turned into collapsable tree control with UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements created by this function have a handlers attached which will fire UI events of xBrowser. If you do any heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.

Parameters:
Name Type Description
container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

initTree Bool

if true and jQuery UI is referenced tree will be rendered using UI icons as a collapsable tree control.

renderSystems(container, initTree)

This function renders systems as a tree view (systems -> assets). If you use jQuery UI it can be turned into collapsable tree control with UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements created by this function have a handlers attached which will fire UI events of xBrowser. If you do any heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.

Parameters:
Name Type Description
container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

initTree Bool

if true and jQuery UI is referenced tree will be rendered using UI icons as a collapsable tree control.

renderZones(container, initTree)

This function renders zones as a tree view (zones -> spaces -> assets). If you use jQuery UI it can be turned into collapsable tree control with UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements created by this function have a handlers attached which will fire UI events of xBrowser. If you do any heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.

Parameters:
Name Type Description
container string | HTMLElement

string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.

initTree Bool

if true and jQuery UI is referenced tree will be rendered using UI icons as a collapsable tree control.

Events

entityActive

Occurs when user clicks on a HTML element representing xVisualEntity or if activateEntity() is called.

Type:
  • object
Parameters:
Name Type Description
entity xVisualEntity
event object
element HTMLElement

This argument might be null if event is fired in code by call to activateEntity().

entityClick

Occurs when user clicks on a HTML element representing xVisualEntity

Type:
  • object
Parameters:
Name Type Description
entity xVisualEntity
event object
element HTMLElement

entityDblclick

Occurs when user double clicks on a HTML element representing xVisualEntity.

Type:
  • object
Parameters:
Name Type Description
entity xVisualEntity
event object
element HTMLElement

This argument might be null if event is fired in code by call to activateEntity().

entityMouseDown

Occurs when mouseDown event occurs on a HTML element representing xVisualEntity

Type:
  • object
Parameters:
Name Type Description
entity xVisualEntity
event object
element HTMLElement

entityMouseMove

Occurs when mouseMove event occurs on a HTML element representing xVisualEntity

Type:
  • object
Parameters:
Name Type Description
entity xVisualEntity
event object
element HTMLElement

entityMouseUp

Occurs when mouseUp event occurs on a HTML element representing xVisualEntity

Type:
  • object
Parameters:
Name Type Description
entity xVisualEntity
event object
element HTMLElement

entityTouch

Occurs when touch event occurs on a HTML element representing xVisualEntity

Type:
  • object
Parameters:
Name Type Description
entity xVisualEntity
event object
element HTMLElement

loaded

Occurs when JSON data model is loaded

Type:
  • object
Parameters:
Name Type Description
model xVisualModel

preprocessed model prepared for visual representation

model object

original COBie data