elisa3dviewer user guide · enable ghost / object trail. ... dragging the canvas with the primary...

5.6.2020 Elisa3DViewer User Guide - Overview

https://dev.azure.com/elisasmartfactory/Smart Factory Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide 1/41

Last updated by | Teemu Lindborg | 15. Mai 2020 at 10:06 MESZElisa3DViewer User Guide

Elisa3DViewerVersion 1.0User Guide

Contents• Prerequisites/Dependencies• Introduction and Installation• Properties

• Property definitions• Property visibilities and data binding capabilities• Properties with additional requirements

• Triggers• Events• Modules

• Menu Panel• Scene• Camera• Heatmap• Geo Editor• Label• Theme• Stats• Zone Profiler

• Usage Example• Navigating the viewer

• Moving the camera• Selecting an object• Labels

• Building an example mashup• Disclaimer• Getting started• Binding data to the widget• Orbit camera and camera waypoints• Attaching labels



Prerequisites/Dependencies

Name Version

ThingWorx 7.4.0

Introduction and InstallationThe 3d viewer is designed to view and visualise factory data in a 3d format by connecting data sources to virtual assets. Virtual assets can displaytheir state, by changing their colour based on some predefined rules, and kpis in a label that can be attached to each individual asset.

Step Screenshot(s)

After logging into the Composer as Administrator, click on the Import/Export buttonand click on the Import option at the top. From the opened popup, select Extensionas the Import Option from the dropdown menu.

Click Browse and select the extension Elisa3DViewerRelease.zip. You can clickValidate to make sure everything's right with the extension and that Thingworx canactually import it.

After validating the extension, click on the green Import button and wait for theextension to install. The installation might take a while as the extension ships with anexample BABYLON file located at.../Elisa3DViewerCore_ExtensionPackage/ui/Elisa3DViewer/models/PTC_Robot.babylon

At this point, if you want, you can also install the extension called Elisa3DViewerModel_ExtensionPackage that ships in the same download. Themodel extension contains useful DataShapes, ThingShapes and an example Thing and a Mashup showcasing how to use the viewer to get you up tospeed quickly. Using/installing this extension is completely optional and the 3d viewer core can be used without having the model extensioninstalled.

NOTE: We'll be using the Mashup provided in the model extension as an example within this documentation

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=prerequisites%2Fdependencies

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=introduction-and-installation



Step Screenshot(s)

To install the model extension, follow the procedures above but when browsingfor the extension to install, select the Elisa3DViewerModel.zip instead

You can verify that everything installed as expected by taking a look at thecontents of each package.

Contents of Elisa3DViewerCore_ExtensionPackage



Step Screenshot(s)

Contents of Elisa3DViewerModel_ExtensionPackage

Properties

Property definitions

The following is a list of ALL properties within the 3d viewer showing their Description, Base types and Default values. Table(s) of additional propertyattributes can be found later in the document.

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=properties

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=property-definitions



Name Description Base type Default value

BoneData Bone data array as infotable INFOTABLE 0

BoneDataModelIdField DESCRIPTION MISSING FIELDNAME objectId

BoneRotationsFieldBone rotations used toanimate/rotate bones in askeleton mesh

FIELDNAME boneRotations

AnimationState Mesh animation state asinfotable INFOTABLE 0

AnimationStateModelIdField Field name to get the mesh idfrom FIELDNAME meshId

AnimationStateTargetFrameField Field name to get the target(frame) from FIELDNAME animationTarget

AnimationStatePlayFieldField name to get the whetherto play the animation or jumpto target from

FIELDNAME animationPlay

AnimationStateLoopField Field name to get whether toloop the animation from FIELDNAME animationLoop

AnimationStateDirectionField Field name to get animationdirection from FIELDNAME animationDirection

CameraFollowObjectsIf set to true, camera will followmoving objects (dynamicobjects)

BOOLEAN ⬜

CameraFollowRotation

If set to true, camera will act asif it was parented to the movingobject. This value depends onCameraFollowObjects

BOOLEAN ⬜

CameraDefaultPosition

Default camera position, getsupdated whenUpdateCameraDefaultTransformis called

VEC3 500,500,500

CameraDefaultTargetPosition

Default camera target position,gets updated whenUpdateCameraDefaultTransformis called

VEC3 0,0,0

CameraRelativePosition

Current camera position relativeto target position, gets updatedwhenCameraTransformUpdated iscalled

VEC3 500,500,500

CameraRelativeTargetPosition

Current camera orbit/lookatposition, gets updated whenCameraTransformUpdated iscalled

VEC3 0,0,0

CameraPath

Camera path animation in.JSON format, gets updatedwhen CameraPathUpdated iscalled

STRING []

CameraPathSpeed Camera path animation speedin units per second NUMBER 200




CameraPanningSensitivityCamera panning sensitivity,bigger value will make thecamera pan faster

NUMBER 0.5

CameraAngularSensitivityCamera angular sensitivity,smaller value will make thecamera turn faster

NUMBER 500

CameraMinimumRadius

Minimum radius/distance fromthe focus point. Used for arcball rotate camera (defaultcamera). Set to <0 for no limit

NUMBER 1

CameraMaximumRadius

Maximum radius/distance fromthe focus point. Used for arcball rotate camera (defaultcamera). Set to <0 for no limit

NUMBER -1

Camera2D Whether to use a "2d"/panningonly camera (rotations disabled) BOOLEAN ⬜

Camera2DAutoDistanceScale 2d camera auto transition toscene overview distance scale NUMBER 1.25

Camera2DMinDistanceToZeroLevel 2d camera minimum distanceto "0-level" NUMBER 100

Width Widget width INTEGER 640

Height Widget height INTEGER 480

CanvasRenderingWidth

Maximum rendering canvaswidth. Needs LimitCanvasSizeto be set to true. NOTE: Thecanvas will still be stretched tofit the space, reducing this willonly affect the internal rendersize which can improveperformance for the cost ofquality.

INTEGER 1920

CanvasRenderingHeight

Maximum rendering canvasheight. Needs LimitCanvasSizeto be set to true. NOTE: Thecanvas will still be stretched tofit the space, reducing this willonly affect the internal rendersize which can improveperformance for the cost ofquality.

INTEGER 1080

LimitCanvasSize

When true, the renderingcanvas width and height will belimited according toconfiguration.

BOOLEAN ⬜

MaxFPS Maximum rendered frames persecond INTEGER 144

ShowPerformanceTimings Show rendering related timings BOOLEAN ⬜

ShowInspector Show scene inspector BOOLEAN ⬜




ConstantlyUpdateViewerForce update viewer even ifnothing's happening. NOTE:Use with care

BOOLEAN ⬜

DebugMode Enable debug features andextra logging BOOLEAN ⬜

EnableOfflineSupportEnable offline support, e.g. 3dmodel caching using clientbrowser cache (.manifest files)

BOOLEAN ✅

EnableBackgroundGradient Enable background gradient BOOLEAN ✅

UseOctree Should octree be enabled for ascene BOOLEAN ⬜

OctreeCapacity Octree leaf capacity (meshes) INTEGER 8

OctreeDepth Octree maximum depth (sub-levels) INTEGER 4

DebugVisualiseOctree Debug visualise the generatedoctree BOOLEAN ⬜

AutoMergeMeshesWithSimilarName

EXPERIMENTAL. Use withcaution. Automatically mergemeshes with similar name(xxx_y) only diffentiated by anindex (e.g. table_1 and table_2)

BOOLEAN ⬜

ParticleTrailStyle The style of the particle trail.Opacity is supported STYLEDEFINITION Elisa3DViewer.Style.ParticleTrail

ParticleTrailSize Size of particles INTEGER 16

ShowOnlySelectedGroup Shows only the selected group BOOLEAN ✅

IsPickableDefaultValue Are objects pickable by default. BOOLEAN ✅

AttachedLabelsDefinePickables If set to true, only objects withattached labels will be pickable. BOOLEAN ⬜

TriggerObjectHoveredEvents Should object hovered eventsbe triggered BOOLEAN ⬜

TriggerObjectClickedEvents Should object clicked events betriggered BOOLEAN ⬜

DynamicObjectDataDynamic object data array asinfotable, each entry adds a 3D-object to the active scene

INFOTABLE 0

DynamicObjectIdField

Field which will provide theunique id (name) for dynamicobject, this field should matchobjectName-field in otherinfotables

FIELDNAME DynamicObjId

DynamicObjectModelIdField Field which will provide theunique id (name) for model FIELDNAME DynamicObjModelId

DynamicObjectPositionField Field which will provide theposition for dynamic object FIELDNAME DynamicObjPos




DynamicObjectGeoLocationField Field which will provide the geolocation for dynamic object FIELDNAME DynamicObjGeoLoca

DynamicObjectUnitScale

Unit scale used in dynamicobject positioning, all positionvalues are multiplied by thisvalue

VEC3 1,1,1

DynamicObjectUnitOffset

Unit offset used in dynamicobject positioning, this value isadded to all position valuesafter scaling

VEC3 0,0,0

DynamicObjectIsGeoLocatedWhether position for a dynamicobject is given as geocoordinates

BOOLEAN ⬜

DynamicObjectGhostEnabledEnable ghost / object trail.

NOT WORKING PROPERLYBOOLEAN ✅

GeoData Infotable containing the datafor geo reference markers INFOTABLE null

GeoRefMarkersFieldField which defines thecoordinate of a referencemarker

FIELDNAME referenceMarkers

GeoRefMarkerCoordinateFieldField which defines thecoordinate of a referencemarker

STRING coordinate

GeoRefMarkerScenePosField Field which defines the sceneposition of a reference marker STRING scenePosition

GeoFencesFieldField which defines thecoordinate of a referencemarker

FIELDNAME fences

GeoFenceNameField Field which defines the name ofa geo fence STRING name

GeoFenceColourField Field which defines the colourof a geo fence STRING colour

GeoFenceCoordinatesFieldField which defines an infotablecontaining coordinates of a geofence (of LOCATION baseType)

STRING coordinates

SceneUnitScale How scene units correspond toreal-world units NUMBER 2

SortByKPIType Sort KPIs in a label by their type BOOLEAN ⬜

KpiData

KPI data infotable. NOTE: This isonly used to determine the id'sof the fields below. The actualdata input is not used directlybut loaded within the label datainstead.

INFOTABLE 0

KpiIdField KPI id field FIELDNAME id

KpiTitleField KPI title field FIELDNAME title




KpiValueFieldKPI value field, NOTE: the stringwill be interpreted as a numberif needed

FIELDNAME value

KpiTypeField

KPI type field.Current types:0: CUSTOM_INFO - No valuefield specified, just title shown1: DEFAULT - Default field withtitle and value2: PROGRESS - Progress bar,requires the followingadditional data: min, max3: SPEEDOMETER -Speedometer, requires thefollowing additional data: min,max, limit4: SPEEDBAR - Speedbar,requires the followingadditional data: min, max, limit

FIELDNAME type

KpiMinField KPI minimum value field (notused for all types) FIELDNAME min

KpiMaxField KPI maximum value field (notused for all types) FIELDNAME max

KpiLimitField

KPI value limit field, also worksas the upper limit for fields withlower limit (not used for alltypes)

FIELDNAME limit

KpiLowerLimitField KPI value lower limit field (notused for all types) FIELDNAME lowerLimit

KpiInvertedField

Whether the "data" is invertedor not. Currently only affectingspeedometer; if set to trueanything below the limit will beconsidered to be in a badrange.

FIELDNAME inverted

KpiFontColourFieldWhich style definition field touse for colouring the kpitext/value

STRING

KpiStyleStateFormattingOptional rules for dynamicformatting of KPIs, first state isthe least important

STATEFORMATTING undefined

LabelData Label data array as infotable INFOTABLE 0

LabelIdFieldField which will provide the idfor the label. this has to beunique.

FIELDNAME id

LabelTitleField

Field which will provide thedisplayed label title, supportslinebreaks with &quot\n&quotand &quot&ltbr&gt&quot

FIELDNAME title




LabelCollapsedTitleField

Field which will provide thedisplayed label title when incollapsed (title only) mode,supports linebreaks with&quot\n&quot and&quot&ltbr&gt&quot

FIELDNAME collapsedTitle

LabelTextField

Field which will provide thedisplayed label text, supportslinebreaks with &quot\n&quotand &quot&ltbr&gt&quot

FIELDNAME text

LabelKPIField Field which will provide thedisplayed label kpi infotable FIELDNAME kpiData

LabelAnimationField

Field which will provide theanimation state:- 0: Stopped- 1: Play

FIELDNAME animationMode

LabelTargetObjectFieldField which will provide thename of the 3d-object that thelabel gets attached to

FIELDNAME objectId

LabelLayoutModeField

Field that determines if thelabels default layout mode:- 0: Hidden- 1: Icon only- 2: Icon and title- 3: Everything- 4: Everything, not grouped

FIELDNAME layoutMode

LabelGroupFieldField that determines the groupthat this label belongs to. Fieldaffects clustering

FIELDNAME group

LabelStyleIconSize Global label icon size (px) usedin label styling INTEGER 25

LabelStyleStateFormatting

Optional rules for dynamicformatting of labels andmarkers, first state is the leastimportant

STATEFORMATTING undefined

LabelStyleHoverThe style of the UI elementswhen hovered. Opacity issupported

STYLEDEFINITION Elisa3DViewer.Style.Hover

LabelStyleSelectedThe style of the UI elementswhen selected. Opacity issupported

STYLEDEFINITION Elisa3DViewer.Style.Selected

SelectedLabelIdThe currently selected label id,triggers changed event. HAS TOBE UNIQUE

STRING

SelectedLabelPosition

Position of a label whenselected. "Default" leaves thelabel where it is normally,"Home menu" positions theselected label statically next tohome menu.

NUMBER 0




StateNumberDefinesStylePriority

State formatting value can be anumber. If set to true thenumber will be used as apriority (e.g. high numbermeans higher priority),otherwise priority is based onthe order in which the statesare defined (default).

BOOLEAN ⬜

ObjectButtonField

Field from label data which willprovide content for the objectbutton next to home menu.NOTE: If nothing's selected, willfallback to object name fromthe scene file.

FIELDNAME title

ObjectData Object data array as infotable INFOTABLE 0

ObjectIdField Name of the object (mesh) inscene FIELDNAME objectName

ObjectCameraPositionField Camera position used to inobject zooming transitions FIELDNAME relativePosition

ObjectTargetPositionField Camera target position used toin object zooming transitions FIELDNAME relativeTargetPosition

ObjectColorIntensityObject overlay color intensity,"intensity" can be also set withcolor alpha value

NUMBER 0.5

SceneNameUsually the name of the factory,used in various non-criticalparts of the widget.

STRING Undefined Scene

SceneModelUrl URL to the model STRING

SceneModelFileSize Download size of the model INTEGER 0

SceneConfig Config json to the scene modelfile STRING {}

SceneBackgroundStyle The background of the widget.Opacity is supported STYLEDEFINITION Elisa3DViewer.Style.SceneBg

ResetSceneOnModelChange Reset the scene whenever themodel changes BOOLEAN ✅

DynamicLighting Use dynamic lighting instead ofunlit scene BOOLEAN ⬜

GlobalLightIntensity Used only if dynamic lighting isenabled NUMBER 0.75

ActiveLayer Active mesh layer (-1 means all) INTEGER -1

SceneExport

Infotable to which scene meshdata will be exported to when.Input target is only used forgetting the data shape andfields for export.

INFOTABLE 0

SceneExportMeshIdField Field in which the mesh id willbe saved to FIELDNAME id




SceneExportMeshNameField Field in which the mesh namewill be saved to FIELDNAME name

SceneExportMeshPositionField Field in which the meshposition will be saved to FIELDNAME position

SelectedObjectIdThe id currently selected item inthe scene, triggers changedevent

STRING

SelectedGroupIdThe currently selected group inthe scene, triggers changedevent

STRING

ModelData Model data array as infotable INFOTABLE 0

ModelIdField Field which will provide themodel id FIELDNAME name

ModelUrlField Field which will provide modelurl / filepath FIELDNAME url

ModelScaleField Field which will provide themodel scale FIELDNAME scale

LoadingScreenStyle The style of the loading screen.Opacity is supported STYLEDEFINITION Elisa3DViewer.Style.LoadingScreen

Routes Route data in json format STRING {}

EnableAzureInsights Whether to enable AzureInsights analytics BOOLEAN ⬜

AzureTrackEvents Send event triggers as events toAzure BOOLEAN ⬜

Property visibilities and data binding capabilities

The following table contains the visibility and data binding capabilities of ALL properties defined by the 3d viewer.NOTE: Some of the binding targets may not behave as expected during runtime and will be improved in later updates

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=property-visibilities-and-data-binding-capabilities



Name Is visible Is editable Is binding target Is binding source

BoneData ✅ ✅ ✅ ⬜

BoneDataModelIdField ⬜ ✅ ✅ ⬜

BoneRotationsField ⬜ ✅ ✅ ⬜

AnimationState ✅ ✅ ✅ ⬜

AnimationStateModelIdField ⬜ ⬜ ✅ ⬜

AnimationStateTargetFrameField ⬜ ✅ ✅ ⬜

AnimationStatePlayField ⬜ ✅ ✅ ⬜

AnimationStateLoopField ⬜ ✅ ✅ ⬜

AnimationStateDirectionField ⬜ ✅ ✅ ⬜

CameraFollowObjects ✅ ✅ ✅ ⬜

CameraFollowRotation ✅ ✅ ✅ ⬜

CameraDefaultPosition ✅ ✅ ✅ ✅

CameraDefaultTargetPosition ✅ ✅ ✅ ✅

CameraRelativePosition ✅ ✅ ✅ ✅

CameraRelativeTargetPosition ✅ ✅ ✅ ✅

CameraPath ✅ ✅ ✅ ✅

CameraPathSpeed ✅ ✅ ✅ ✅

CameraPanningSensitivity ✅ ✅ ✅ ⬜

CameraAngularSensitivity ✅ ✅ ✅ ⬜

CameraMinimumRadius ✅ ✅ ✅ ⬜

CameraMaximumRadius ✅ ✅ ✅ ⬜

Camera2D ✅ ✅ ✅ ⬜

Camera2DAutoDistanceScale ✅ ✅ ✅ ⬜

Camera2DMinDistanceToZeroLevel ✅ ✅ ✅ ⬜

Width ✅ ✅ ⬜ ⬜

Height ✅ ✅ ⬜ ⬜

CanvasRenderingWidth ✅ ✅ ⬜ ⬜

CanvasRenderingHeight ✅ ✅ ⬜ ⬜

LimitCanvasSize ✅ ✅ ⬜ ⬜

MaxFPS ✅ ✅ ✅ ⬜

ShowPerformanceTimings ✅ ✅ ✅ ⬜

ShowInspector ✅ ✅ ✅ ⬜




ConstantlyUpdateViewer ✅ ✅ ⬜ ⬜

DebugMode ✅ ✅ ✅ ⬜

EnableOfflineSupport ✅ ✅ ✅ ⬜

EnableBackgroundGradient ✅ ✅ ⬜ ⬜

UseOctree ✅ ✅ ⬜ ⬜

OctreeCapacity ✅ ✅ ⬜ ⬜

OctreeDepth ✅ ✅ ⬜ ⬜

DebugVisualiseOctree ⬜ ⬜ ⬜ ⬜

AutoMergeMeshesWithSimilarName ✅ ✅ ⬜ ⬜

ParticleTrailStyle ✅ ✅ ⬜ ⬜

ParticleTrailSize ✅ ✅ ✅ ⬜

ShowOnlySelectedGroup ✅ ✅ ✅ ⬜

IsPickableDefaultValue ✅ ✅ ✅ ⬜

AttachedLabelsDefinePickables ✅ ✅ ✅ ⬜

TriggerObjectHoveredEvents ✅ ✅ ⬜ ⬜

TriggerObjectClickedEvents ✅ ✅ ⬜ ⬜

DynamicObjectData ✅ ✅ ✅ ⬜

DynamicObjectIdField ⬜ ✅ ✅ ⬜

DynamicObjectModelIdField ⬜ ✅ ✅ ⬜

DynamicObjectPositionField ⬜ ✅ ✅ ⬜

DynamicObjectGeoLocationField ⬜ ✅ ✅ ⬜

DynamicObjectUnitScale ✅ ✅ ✅ ✅

DynamicObjectUnitOffset ✅ ✅ ✅ ✅

DynamicObjectIsGeoLocated ✅ ✅ ✅ ⬜

DynamicObjectGhostEnabled ⬜ ✅ ✅ ⬜

GeoData ✅ ✅ ✅ ✅

GeoRefMarkersField ⬜ ✅ ⬜ ⬜

GeoRefMarkerCoordinateField ✅ ✅ ⬜ ⬜

GeoRefMarkerScenePosField ✅ ✅ ⬜ ⬜

GeoFencesField ⬜ ✅ ⬜ ⬜

GeoFenceNameField ✅ ✅ ⬜ ⬜

GeoFenceColourField ✅ ✅ ⬜ ⬜




GeoFenceCoordinatesField ✅ ✅ ⬜ ⬜

SceneUnitScale ✅ ✅ ⬜ ⬜

SortByKPIType ✅ ✅ ✅ ⬜

KpiData ✅ ✅ ✅ ⬜

KpiIdField ⬜ ✅ ⬜ ⬜

KpiTitleField ⬜ ✅ ⬜ ⬜

KpiValueField ⬜ ✅ ⬜ ⬜

KpiTypeField ⬜ ✅ ⬜ ⬜

KpiMinField ⬜ ✅ ⬜ ⬜

KpiMaxField ⬜ ✅ ⬜ ⬜

KpiLimitField ⬜ ✅ ⬜ ⬜

KpiLowerLimitField ⬜ ✅ ⬜ ⬜

KpiInvertedField ⬜ ✅ ⬜ ⬜

KpiFontColourField ✅ ✅ ⬜ ⬜

KpiStyleStateFormatting ✅ ✅ ⬜ ⬜

LabelData ✅ ✅ ✅ ⬜

LabelIdField ⬜ ✅ ✅ ⬜

LabelTitleField ⬜ ✅ ✅ ⬜

LabelCollapsedTitleField ⬜ ✅ ✅ ⬜

LabelTextField ⬜ ✅ ✅ ⬜

LabelKPIField ⬜ ✅ ✅ ⬜

LabelAnimationField ⬜ ✅ ✅ ⬜

LabelTargetObjectField ⬜ ✅ ✅ ⬜

LabelLayoutModeField ⬜ ✅ ✅ ⬜

LabelGroupField ⬜ ✅ ✅ ⬜

LabelStyleIconSize ✅ ✅ ✅ ⬜

LabelStyleStateFormatting ✅ ✅ ⬜ ⬜

LabelStyleHover ✅ ✅ ⬜ ⬜

LabelStyleSelected ✅ ✅ ⬜ ⬜

SelectedLabelId ✅ ✅ ✅ ✅

SelectedLabelPosition ⬜ ✅ ⬜ ⬜

StateNumberDefinesStylePriority ✅ ✅ ⬜ ⬜




ObjectButtonField ⬜ ✅ ✅ ⬜

ObjectData ✅ ✅ ✅ ⬜

ObjectIdField ⬜ ✅ ✅ ⬜

ObjectCameraPositionField ⬜ ✅ ✅ ⬜

ObjectTargetPositionField ⬜ ✅ ✅ ⬜

ObjectColorIntensity ✅ ✅ ✅ ✅

SceneName ✅ ✅ ✅ ⬜

SceneModelUrl ✅ ⬜ ✅ ⬜

SceneModelFileSize ✅ ✅ ✅ ⬜

SceneConfig ✅ ✅ ✅ ⬜

SceneBackgroundStyle ✅ ✅ ⬜ ⬜

ResetSceneOnModelChange ✅ ✅ ✅ ⬜

DynamicLighting ✅ ✅ ✅ ⬜

GlobalLightIntensity ✅ ✅ ✅ ⬜

ActiveLayer ⬜ ✅ ⬜ ⬜

SceneExport ✅ ✅ ✅ ✅

SceneExportMeshIdField ⬜ ✅ ⬜ ⬜

SceneExportMeshNameField ⬜ ✅ ⬜ ⬜

SceneExportMeshPositionField ⬜ ✅ ⬜ ⬜

SelectedObjectId ✅ ✅ ✅ ✅

SelectedGroupId ✅ ✅ ✅ ✅

ModelData ✅ ✅ ✅ ⬜

ModelIdField ⬜ ✅ ✅ ⬜

ModelUrlField ⬜ ✅ ✅ ⬜

ModelScaleField ⬜ ✅ ✅ ⬜

LoadingScreenStyle ✅ ✅ ⬜ ⬜

Routes ✅ ✅ ✅ ⬜

EnableAzureInsights ✅ ✅ ⬜ ⬜

AzureTrackEvents ✅ ✅ ⬜ ⬜

Properties with additional requirements

The following table contains the list of all properties that have some sort of a Base type restriction, Predefined options/value or somehow depend onan Base type infotable property

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=properties-with-additional-requirements



Name Base typerestrictions

Source propertyname

Base type infotableproperty Select options

BoneDataModelIdField STRING BoneData

BoneRotationsField STRING BoneData

AnimationStateModelIdField STRING AnimationState

AnimationStateTargetFrameField STRING AnimationState

AnimationStatePlayField STRING AnimationState

AnimationStateLoopField STRING AnimationState

AnimationStateDirectionField STRING AnimationState

DynamicObjectIdField STRING DynamicObjectData

DynamicObjectModelIdField STRING DynamicObjectData

DynamicObjectPositionField VEC3 DynamicObjectData

DynamicObjectGeoLocationField LOCATION DynamicObjectData

GeoRefMarkersField INFOTABLE GeoData

GeoRefMarkerCoordinateField LOCATION

GeoRefMarkerScenePosField VEC3

GeoFencesField INFOTABLE GeoData

GeoFenceNameField STRING

GeoFenceColourField VEC4

GeoFenceCoordinatesField INFOTABLE

SceneUnitScale

- Millimeters- Centimeters- Decimeters- Meters- Decameters- Hehtometers- Kilometers

KpiIdField STRING KpiData

KpiTitleField STRING KpiData

KpiValueField STRING KpiData

KpiTypeField INTEGER KpiData

KpiMinField NUMBER KpiData

KpiMaxField NUMBER KpiData

KpiLimitField NUMBER KpiData

KpiLowerLimitField NUMBER KpiData

KpiInvertedField BOOLEAN KpiData



Name Base typerestrictions

Source propertyname

Base type infotableproperty Select options

KpiFontColourField

- Background color- Foreground color- Line color- Secondary backgroundcolor

KpiStyleStateFormatting KpiData

LabelIdField STRING LabelData

LabelTitleField STRING LabelData

LabelCollapsedTitleField STRING LabelData

LabelTextField STRING LabelData

LabelKPIField INFOTABLE LabelData

LabelAnimationField INTEGER LabelData

LabelTargetObjectField STRING LabelData

LabelLayoutModeField INTEGER LabelData

LabelGroupField STRING LabelData

LabelStyleStateFormatting LabelData

SelectedLabelPosition - Default- Home menu

ObjectButtonField STRING LabelData

ObjectIdField STRING ObjectData

ObjectCameraPositionField VEC3 ObjectData

ObjectTargetPositionField VEC3 ObjectData

SceneExportMeshIdField STRING SceneExport

SceneExportMeshNameField STRING SceneExport

SceneExportMeshPositionField VEC3 SceneExport

ModelIdField STRING ModelData

ModelUrlField STRING ModelData

ModelScaleField VEC3 ModelData

TriggersThe following table contains a list of all the Service Triggers that you can execute on the viewer

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=triggers



Name DescriptionWarn ifnotbound

TransitionCameraOnSelectedObject If selected object has data bound in the objectData then camera gets transitionedto the values ⬜

StartPathAnimation Starts the camera flythrough using the waypoints available in the current scene.Does nothing if no waypoints are present. ⬜

TransitionCameraToDefault Transitions camera to the default values (CameraDefaultPosition andCameraDefaultTargetPosition) ⬜

FocusCameraOnSelectedObject Turns camera to look at the selected object pivot point ⬜

UpdatePathAnimation Serializes path animation points to .JSON and updates CameraPath property andtriggers CameraPathUpdated ⬜

UpdateCameraTransform Captures current camera transform (position and target that the camera isorbiting) and updates those values and triggers CameraTransformUpdated ⬜

UpdateCameraDefaultTransform Captures current camera transform (position and target that the camera isorbiting) and updates those values and triggers CameraDefaultTransformUpdated ⬜

ExportScene Export scene mesh data to the INFOTABLE bound to SceneExport ⬜

DownloadSnapshot Creates snapshot of all the widget properties and data updates and stores it to a.json file ⬜

EventsThe following table contains a list of all events emitted by the viewer during its runtime

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=events



Name DescriptionWarn ifnotbound

CameraPathUpdated Triggered after UpdatePathAnimation is completed ⬜

CameraTransformUpdatedTriggered after UpdateCameraTransform is completed, if an object or group wasselected then CameraRelativePosition and CameraRelativeTargetPosition wereupdated

⬜

CameraDefaultTransformUpdated Triggered after UpdateCameraDefaultTransform is completed ⬜

CameraTransitionStopped Triggers whenever a transition stops (is cancelled or finishes) ⬜

CameraTransitionDone Triggers whenever a transition finishes ⬜

CameraTransitionToMeshDone Triggers whenever a transition to a model/object finishes ⬜

CameraTransitionToHomeDone Triggers whenever a transition to home finishes ⬜

GeoDataUpdated Triggered when geo editor is closed and GeoData is updated. ⬜

LabelClicked IMPLEMENTATION MISSING ⬜

LabelHovered IMPLEMENTATION MISSING ⬜

ObjectClicked Triggered when user clicks on an object ⬜

ObjectHovered Triggered when user hovers an object ⬜

SceneExported Triggered after ExportScene is completed ⬜

ModelLoadDone Triggered when model loading is completed ⬜

ModelLoadError Triggered if something goes wrong in loading the model ⬜

MeshLoadDone Triggered when model loading is completed ⬜

MeshLoadError Triggered if something goes wrong in loading the model ⬜

SelectedLabelChanged Triggered when selected label changes ⬜

SelectedObjectChanged Triggered when selected object (mesh) changes ⬜

SelectedGroupChanged Triggered when selected label group changes ⬜

HomeClicked Triggered when user clicks the home icon on the menu ⬜

GroupClicked Triggered when user clicks the group label on the menu ⬜

GroupHovered IMPLEMENTATION MISSING ⬜

Modules

Menu Panel

Scene

The scene module displays three elements

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=modules

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=menu-panel

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=scene



Home button. Clicking the button triggers the followingTransitionCameraToDefault serviceHomeClicked event

Selected object field. This field will display the name of the mesh or alternatively a custom text that can be bound the mesh through label data.Clicking on the field when an object is selected will trigger the following

TransitionCameraOnSelectedObject serviceObjectClicked event

Selected group field. If the selected mesh belongs to a group, the name/id of the group will display in this field. Clicking on the field when anobject is selected will trigger the following

TransitionCameraOnSelectedObject serviceGroupClicked eventA property update updating the SelectedObjectId to the group id

Camera

The camera module presents the user with various camera related buttons:

Add waypoint button that can be used to place waypoint(s) in to the current scene, allowing a camera flythrough to be performed. Whenthe Add Waypoint button is clicked, a waypoint is added at the current camera location. Thus, before adding a waypoint, position and orientthe camera to a place where you want to flythrough to go through.Remove waypoint button that will remove the waypoint that was added lastSave waypoints will trigger the UpdatePathAnimation service that will serialise the current waypoints to a JSON format, finally triggeringthe CameraPathUpdated event once the serialisation is finishedFlythrough button will start a camera flythrough in the current scene using the defined waypoints. If no waypoints have been set, clickingthe button does nothing but trigger the StartPathAnimation service.

NOTE: It is up to the developer to save the modified waypoints somewhere if persistency is wanted. Otherwise the waypoints will be gone after arefresh. To save the waypoints, save the data stored in CameraPath property when the CameraPathUpdated event is triggered

Heatmap

Geo Editor

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=camera

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=heatmap

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=geo-editor



Label

The label module will allow displaying the data bound to a label within a module.

Theme

The theme module allows a user to set their preferred theme for the GUI, the selection is stored in the localStorage of the browser meaning that itwill only be apply for a single machine.

An example of the currently available themes can be seen below

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=label

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=theme



Default theme Blue theme Light theme

Stats

The stats (info) module is a handy tool for a developer to view various statistics and information of the current scene. Currently the stats modulelists the following stats:

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=stats



Stat Description

FPS Frames-per-second shows how many frames the viewer can render at the current time.NOTE: The FPS can be limited by the browser/monitor

ResolutionCurrent rendering resolution of the canvas. By default the rendering resolution is not limited and equal to thesize of the canvas but it can be controlled with the CanvasRenderingWidth and CanvasRenderingHeightproperties

Camera The name of the camera that's currently in use. Can be one of the following depending on the situation:mainCamera, sidescrollingCamera or cinematicCam

Position World position of the currently active camera

Direction View direction of the currently active camera

Visible labels Currently visible labels within the scene, update on at least these labels will be handled whenever an UI updateis needed

Total labels Total number of labels within the scene, this number contains all the labels that are either hidden (by layout ordue to belonging to a group) or are currently outside the camera frustum

Hovered mesh Name of the mesh that's currently under the pointer or None

Selected meshposition World position of the currently selected mesh

Memory Current javascript heap usage

Zone Profiler

The Zone Profiler module can be used to record and spot performance issues and other long running tasks within the viewer or even outside of it.The module is only available when the DebugMode is enabled and will record up to 240 frames worth of data.

In the image above, we can see that the viewer's taken a most 2.22ms to update within the last 240 frames, where as something between the frames(viewer updates) has taken up to ~67ms. In this example, the long running task was executing a heavyish ThingWorx service every second

NOTE: The zone profiler is still a work in progress and can currently only be used to visualise the frame times

Usage ExampleIn the following example we will start by having a look at the example mashup that is included in the Elisa3DViewerModel_ExtensionPackage andcontinue by recreating some of that functionality to a fresh mashup.

Let's start by having a look at the example mashup named Elisa3DViewer.Mashup.Example1 and viewing it

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=zone-profiler

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=usage%09example



You should be presented with a view similar to this

Immediately the view presents you with some of the basic features of the 3d viewer:

It shows the default Modules (GUI) on the left (1)Two different types of labels; a single collapsed label (2) and a collapsed group label (3)Two of the assets are displaying (abnormal) states (4)Three geo fences (5)

Navigating the viewerIf you move your cursor around the scene, you can see some of the assets within the model displaying a highlight around them during hover. Thismeans that the hovered asset is selectable, allowing you to define a view (or a focus point) for that specific asset. When an asset has a focus pointdefined, selecting that asset will transition the camera to the predefined view thus showing the asset from a point-of-view of your choosing.NOTE: Selecting such an asset and transitioning to the new view will most likely move the focal point of the camera meaning that rotating around thewhole scene might not work properly anymore. In such a case you can always click on the Home button to reset the view back to its initial position.

When you happen to hover either the lollipops (collapse labels) or the assets they're attached to, you can see label opened if it was collapsed. Inthe image below on the left you can see a single label displaying various dummy KPI's and information and on the right you can see a group labeldisplaying states and titles of its sublabels. This kind of content for the group label is automatically generated when the labels are grouped, but youcan also define your custom content for the group labels the same way as you would do for the normal labels. We will see how to do this later.Hovering the group label also displays a rough bounding box that should contain all the assets that belong to that group.

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=navigating-the-viewer



Hovering an asset will display a highlight around the asset and the attached label expanded

Moving the camera

By default the 3d viewer uses an arc rotate camera (also known as orbit camera) which allows you to rotate the camera around a specified target.Controlling the camera is done using a mouse. Dragging the canvas with the primary mouse button will rotate the camera around its focal point.Dragging the canvas with the secondary mouse button will pan both the focal point and the camera. We will come back to this later when we buildthe mashup from scratch and use the debugging mode to visualise the focal point. Alternatively if you wish to present a scene somewhere withouthaving to move the camera manually, it is possible to define waypoints for the camera and have it automatically fly through the waypointsdisplaying. The example mashup has predefined waypoints that will showcase the example model. You can enable this mode by clicking on theFlythrough button that's inside the Camera module in the left. After clicking on the Flythrough button the viewer will take over the camera andswitch to a camera called Cinematic camera. When in mode, you can't control the camera but can still interact with everything as usual. To exit theflythrough mode, you can either click on the Home button or by selecting (double clicking on) an object that has a "focus point" defined. In theexample scene all selectable assets have a defined focus point.

Selecting an object

There are three ways to select an object:

By double clicking on the actual assetBy double clicking on an attached label (if one exists)By setting the SelectedObjectID property

When you select an object, its name appears in the Scene modules object field (1). If the object belongs to a group, the group will also be selectedand shown in the group field (2). While labels can have different layout modes/states depending on whether they're hovered, belong to a group oranything, when the asset with a label is selected, that label will use the full layout mode (3) and appear on top of every other label no matter thedistance. Should the object belong to a group, every object not belonging to the same group will be hidden if ShowOnlySelectedGroup is enabled(4).

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=moving-the-camera

https://doc.babylonjs.com/babylon101/cameras#arc-rotate-camera

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=selecting-an-object



Labels

One way to visualise data in the 3d view is the usage of labels. The 3d viewer has two different types of labels; regular and group labels. For themost part these two labels are the same, except a group label can only be created by assigning regular labels to a group. When a label belongs to agroup, it will be hidden until either the group is selected or the asset its attached to is hovered. Grouping labels can help you organise parts of thescene into smaller logical sections. By default the contents of a group label is automatically generated and it will display the labels belonging to thegroup ordered by their state.

It is also possible to define custom content for a group label the same way as you would for a regular label. We will have a look at how to do thiswhen we create the mashup from scratch.

The contents of a label consists of entities that we refer to as KPI's here (Key Performance Indicator) even if they are not necessarily KPI's. The listbelow shows the possible contents of a label

Title of the label (1)A label can consist of two titles, the regular one shown in the picture above and a collapsed title which is shown when the label is in itscollapsed state, e.g. no KPI's/content is shown.Progress KPI (2)A progress kpi is a simple progress bar that consists of a title, value and min and max values. In the exampleKey-Value KPI (3)A simple key-value pair displaying a title and a value in text formatCustom Info KPI (4)Any text without values, can be useful to display machine statuses or other messagesSpeedbar KPI (5)Speedbar is similar to the progress KPI but more expressive with its three possible ranges (red, orange, green). The ranges are defined usingtwo limits. Also displays the title and value

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=labels



Speedometer KPI (6)Like speedbar except for its visual representationState of the label (7)The status icon can give a quick indication of whether everything's running normally or if there are any anomalies happening. The status icon isshown in all other states of a label except when it fully hidden

Building an example mashup

Disclaimer

This example was built using ThingWorx 8.4.1-b2126 so your view(s) might look different depending on the version you are using.

Getting started

The easiest way to get familiar with everything is to just use the extension and do things with it. So let's create a simple mashup with some of thefunctionalities of the Elisa3DViewer.Mashup.Example1. Start off by creating a new mashup, we'll use a Responsive (Advanced) layout here andselect Header Only template as we'll be placing some ThingWorx widgets there.

NOTE: If you are running an older version of ThingWorx (the version here is 8.4.3) and the Responsive Advanced - Header Only is not available, youcan always just create a normal responsive mashup and place a layout widget with a header row

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=building-an-example-mashup

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=disclaimer

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=getting-started



Give the mashup a name of your choosing, click Save and enter Design mode.

Next up look for the Elisa 3D Viewer widget under the Widgets tab on and drag and drop it to the main area of the mashup container. When doneright you should see the widget filling up the available space and a white logo in the middle as in the image below.

Now if you save and view the mashup, you should already see the viewer initialising a bit by first loading its scripts and finally stalling at "Waitingfor scene". This means that everything's working as expected and the widget is waiting for a scene to display, we'll do that next by using theexample dataset that's installed with the Elisa3DViewerModel_ExtensionPackage as an example to generate some data for the viewer.



Binding data to the widget

To get something showing in the viewer, we need to provide it with at least the scene to load. Currently the scene needs to be provided through aproperty update as the viewer doesn't check for hardcoded values in the SceneModelURL during startup. Let's continue by creating a new thing.Set the Base Thing Template to GenericThing and selected Elisa3DViewer.TShape.ViewerDataset as an implemented shape. After saving you cansee that the ThingShape has provided our thing with some basic properties and services to get started.

NOTE: There's no need to use the provided ThingShapes and other examples, but we'll do it here to make everything a bit easier

Click on the Properties and Alerts and look for the sceneUrl property. Edit the property and give it the following value/Thingworx/Common/extensions/{PACKAGE_NAME}/ui/Elisa3DViewer/models/PTC_Robot.babylon. This value is for the same model that is displayedin the example mashup we looked at earlier and the value can be found in the Elisa3DViewer.Dataset.Example1 thing. The {PACKAGE_NAME} partof the value is something that gets parsed by the viewer during runtime, allowing the examples to continue working properly even if changes weremade to the name of the extension.

Switch back to the mashups' design view and click on the + icon on the right side under the Data tab to add a data binding to our dataset thing wejust created. From the popup find your thing using the Search entities functionality. After selecting the entity just search for the GetPropertiesservice and click on the little arrow to add the data binding to our mashup, also check the Mashup Loaded? checkbox to have the service executeafter the mashup has been loaded, thus we don't need to trigger it ourselves. Click on Done and you should see the service listed in the containerinside the Data tab.

Now we can actually get something to show up in the viewer when opened. Expand the GetProperties service and look for the sceneUrl propertyand drag and drop it on top of our widget in the mashup builder. This will prompt you with the properties you can connect the data to, look for theSceneModelUrl in the list and select it. If you've done everything correctly you should have connected the sceneUrl from the GetProperties serviceto the SceneModelUrl of the widget. You can also see this in the Connections tab at the bottom of the mashup builder. Now if we save and view themashup, you should see the scene from the example mashup loading up without any labels or such things.

NOTE: If you made any changes (added or removed) to the modules when looking at the example mashup, those settings should've been saved to yourlocalStorage and the modules should show up how you left them. E.g. in the image below, Info and Heatmaps modules were added

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=binding-data-to-the-widget



Orbit camera and camera waypoints

Before moving into the more ThingWorx related things, let's have a look at the orbit camera using the DebugMode and also how to specify and savewaypoints for the camera flythrough. To do this we need to modify the mashup a little bit, by enabling the DebugMode we get a few more buttonsto the Camera module (as seen in the module section). Set the DebugMode property to true. This will allow us to define the waypoints and test thefunctionality, but without connecting it back to ThingWorx, that data doesn't persist between users/sessions. Thus we'll add the SetPropertiesservice to the previously bound Thing under the Data tab in the mashup. Then if you expand the SetProperties, the property cameraPath is what weneed to bind our waypoint data to. The property from the widget is called CameraPath and you can drag and drop it to the cameraPath param inthe SetProperties section. Again you can verify that the connection was made by checking the Connections tab at the bottom.

Now that the property is bound back to the thing, we still need to actually save it. This can be done by binding the CameraPathUpdated eventfrom the widget to the SetProperties service, thus when the CameraPathUpdated event is triggered, the SetProperties will be called and it willupdate the cameraPath property from the widget's CameraPath property. This can be done either from the dropdown menu or by searching forthe property in the sidepane. Finally to actually load the camera path back to the viewer, you need to connect the cameraPath property fromGetProperties back to the CameraPath of the widget.

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=orbit-camera-and-camera-waypoints



NOTE: When loading the camera path back to the widget, you might notice that the debug visualisation of the path is missing. This can be caused bythe path being set before the scene has loaded and the viewer disposing of all existing meshes before loading a new scene. In such a case the actualflythrough should still work but the debug view doesn't. To fix this, add another data binding to the Thing and call its GetProperties after the widgethas triggered its ModelLoadDone event.

Add Data

Select Entity IO Elisa3DViewer.Thing.DatasetExample [

Select Services

All ~ SetProperties

-Uncalegorized

Aierts

Bindings

I camcrapatl'j

T CameraPath ~

# CameraPathSpeed.,

t CameraPathUpdaled e

Widget

-<: Configure Bindings

0 CameraDeraultPosition ~

u ~00

O CameraDefauttTargetPosilion ~

0 CameraRelativePosition ~

O Camera Relative TargetPosition ~

T CameraPalh ,.

# CameraPalhSpeed ~

~ DynamicObjectUnitScale ~

~ DynamicObjectUnitOffset < ml GeoData e:>

-T- SelectedLabelld ~

# ObjectColor1nten sity~

ml Scene Export c:>

-T- SelectedObJectld ~

T SelectedGroupld ~

t CameraPalhUpdated ..

t CameraTransformUpdated ~

t CameraDefauttTransformUpdated~

4- c)

l:l Elisa3DViewer-5

T CamemPath

l: l Elisa3DViewer-5

t cameraPathUpdated

xl

X

Dynamic ® Selected services

Entity Type Entity Name Serv1ce Mashup Loaded? R

Things Elisa3DViewer.Thing.DalasetExample SetProperties 0

-+I

~ defaultCameraPosition

~ defaultCameraT~rgetPosrtion

~ dynamicObjectData

~ geoData

~ labeiData

) ~ modeiD~t~

...;, objeGtDat~

~ sceneConfig

~ sceneExport

~ sceneFileSize

~ sceneUrl

~ unitoffset

~ unitScale

~ defaultCameraPosition

~ defaultCameraTargetPosrtion

~ dynamicObjectData

~ geoData

~ labeiData

) ~ model Data

...;, objectDati!)

~ sceneConfig

~ sceneExport

~ sceneFileSfze

~ sceneUrl

~ unitOffset

~ unitScale

~ Thlngs ... EIIsa3DViewer Th1ng.DatasetExample



Now if we view the mashup, you should see the following additional buttons in the Camera module; Add Waypoint, Remove Waypoint and SaveWaypoints so let's test it. Move the camera to a location and view that you want to see in your flythrough and click on the Add Waypoint button,then move the camera to another location and view and click on the Add waypoint button once more. Now you might notice something appear inthe view that's partially blocking the view, this is the debug view of the camera path drawing itself allowing you to have a look at the flight path thecamera will take when running the Flythrough mode. Add a few more points and zoom out to have a look at the generate path. If you click on theFlythrough button now, you should have your camera first move to the closest path point and start moving through the defined waypoints byfollowing the white ribbon. Finally when you click on the Save Waypoints button, the viewer will generate a JSON string of the defined path, store itto the widget's CameraPath property and trigger the CameraPathUpdated event. If you've done all the connections described above, you shouldnow be able to refresh the page and have your waypoint persist. You can also verify this by having a look at the cameraPath property from thething itself.

NOTE: The cones and white ribbon displaying the flight path are only visible when DebugMode is enabled

Let's have a quick look at how the DebugMode might help us understand how the camera works a bit better. If you have enabled the DebugModeand pan the camera to the side enough so that the focal point is not in the middle of the model, you should see a white sphere appear. This sphere



is actually the focal point being visualised, now if you rotate the camera you should see that the camera rotates around the sphere and when youpan the camera, the focal point remains centered to the camera's view. When zooming closer to the sphere you notice that the zooming stopsreally close to the sphere as it doesn't allow the camera to move through the focal point. This point is always present with the orbit camera, even ifnot visualised, and acknowledging it might help you understand how to work with the camera. In the example mashup when you selected an assetand the camera was moved to a view where the asset was in focus, what actually happened was that the camera panned and rotated in such a way,that this focal point was approximately centered to the asset that we wanted to view.

Attaching labels

To display KPI's and other relevant information in the scene, we can create and attach labels to each asset in the scene. While still in the viewer, weneed the name/id of the asset we want to attach a label to, so let's select any one of the assets by double clicking on it. This will display the neededID in the Scene module. Here we've gone with the PTC_Robot_Station_2

NOTE: Selectable assets display a highlight around them when hovered. Also a label can be attached to assets/meshes that are not selectable bydefault if you know their ID/name.

https://dev.azure.com/elisasmartfactory/Smart%20Factory%20Apps/_wiki/wikis/Smart-Factory-Apps.wiki/137/Elisa3DViewer-User-Guide?anchor=attaching-labels



With the name of the asset let's open our DatasetExample thing and edit its LabelData property and from the popup click on Add to insert a newrow in to the Infotable. From the popup let's fill in just the basics for now to get something showing. Pretty much all we need to get anythingshowing is the objectId and id, but only using the two would result in an error label so let's fill in the following fields for now:

objectId - Name of the asset we looked up in previouslyid - Some unique identifier for the label, this can be used later to refer to this labeltitle - Title text for the label, for now title is the only content we'll give to our labelstate - State of the label, let's set this to 0 for now and have a look at why in a bit. If we leave this empty, the label will get an error style

Everything else can be left as is.



Now to get the labels showing, we need to modify our mashup a bit and connect the LabelData to the widget. There's actually a service within theViewerDatashape ThingShape we used to implement the thing called GetLabelData which we'll use. At this point you can connect the labelDataproperty directly from GetProperties to the widget's LabelData, but we'll use the provided service as we'll be overriding some of its functionality in abit. So add the service GetLabelData to the data binding and connect its AllRows output to the LabelData property of the widget. If you take a lookat the label fieldname properties from the widget's property list, you should see that most all of them are automatically populated with the correctfields. If you're using your own DataShapes, you might need to configure the properties here to match your setting. Now let's also configure oneproperty called LabelStyleStateFormatting, this will be used to set a correct state (style) for the label. To configure the formatting:

Click on the State Formatting button next to the property nameIn the popup select State-based FormattingSet Dependent Field select to state (NOTE: For the fields to show up, you need to have connected something to LabelData)From the State Definition field search for Elisa3DViewer.States.Labels and select itThis will list you all the possible states for our labels and their state values. Finally click on doneNOTE: You can also play around with your own state definitions



If you had a look at the different state-value pairs in the definition, you might've noticed that state 0 is used for Not Configured which is what wecan expect to see once we open the mashup as we defined the state of our first LabelData to be 0. Now save and view your mashup, if you've doneeverything right you should see a lollipop with the Not Configured icon on top of your selected asset and hovering it or the asset should display thelabel with its title showing.

Before we start looking at the other possible options for labels, let's make the mashup update the label data periodically so that we don't need torefresh the whole mashup whenever we make a change to the label data. To do this, add a Auto Refresh widget to the mashups header, make surethat AutoRefresh is enabled, set the RefreshInterval to something like 5 and connect the Refresh event to our Thing's GetLabelData service. This willmake the GetLabelData service execute every 5 seconds thus updating the viewer with any updated label data. To test it out, save the mashup andview it again, now go to the DatasetThing's properties and edit the label data and set the state from 0 to 2. If everything's up and running correctly,



you should see the state of the label switch from Not Configured to Running without needing to refresh the mashup runtime anymore. Now we canstart adding more data to our label and see the updates being almost immediately reflected in the viewer.

Let's go back to editing the label data in our dataset thing; we skipped some of the properties at first so let's have a look at them;

collapsedTitle - Is shown when the label is in a collapsed state but due to layouting, has its title shown. Set some value to this field to see it inactiontext - This field is here for or less just backwards compatibility, but in case you want to display a label with just some text, this might be thequickest field to do that.group - The group field allows us to group labels and assets, leave empty for now as we're only working with one labelanimationMode -layoutMode - Layout mode is used to control the initial layout of the label (e.g. when not selected or hovered). Possible options are

0 - Hidden, the label is hidden by default. Hovering/selecting the attached asset will display the label normally1 - Collapsed, the label will only show its state (lollipop)2 - Title, similar to collapsed but also shows the label's title when not hovered/selected. (NOTE: Using this layout will display the label'scollapsedTitle or title, whichever is present in that order)3 - Full, display all the label data even if not selected/hovered4 - Reserved, currently the same as Full5 - Default, will alternate between Collapsed and Title layouts based on the distance to the label. E.g. labels close enough to the camera willdisplay the title, where as labels further away will only show the lollipop

kpiData - Kpi data allows us to present various KPI's and other data in the label



For now let's just set some value to collapsedTitle, change the layoutMode to 2 (to see the effect of collapsedTitle and add some kpiData. To do thisclick on Add button next to the kpiData property. This will open up another popup with some more fields, before we fill in anything here's a list ofthe fields and what each one does:

title - Title of the kpi, this should be present for all kpi typesvalue - Value of the kpi is used for every kpi type except for Custom infotype - The of the the kpi, the following types are supported:

0 - Custom info kpi will only display the title, useful for presenting asset status and other messages1 - Key-value pair kpi will display the title and value next to each other in text format2 - Progress kpi will display a progress bar from min to max with the value as progress (the bar clamps to min and max, e.g. doesn'toverflow)3 - Speedometer kpi displays the value in both text format and as a indicator in a speedometer. Speedometer also uses limits (andlowerLimit if defined) and can be inverted. By default the "good" values are before the limit is hit (e.g. the first half), to make higher valuesbetter tick the inverted checkbox4 - Speedbar kpi is similar to speedometer but displays the value in a progress-like visual format. Speedbar also uses limits (and lowerLimit ifdefined) and can be inverted. By default the "good" values are before the limit is hit (e.g. the first half), to make higher values better tick theinverted checkbox

min - Minimum value for the kpi, this is needed for kpi's that have a specific range (progress, speedometer and speedbar).max - Maximum value for the kpi, this is needed for kpi's that have a specific range (progress, speedometer and speedbar).limit - If there's a limit for the KPI, e.g. after (or before) which the kpi is considered to go from good to bad (or vice versa). Applies tospeedometer and speedbar.lowerLimit - If there's a need for an intermediate stage, set a value for the lowerLimit, this will display a third state for the KPI's in yellow("warning"). Applies to speedometer and speedbar.id - Used to identify the KPI.



inverted - Whether the range should be inverted or not (e.g. values below limit should be considered bad). Applies to speedometer andspeedbar.state - Similar to states for the label but for individual KPI's instead. Used to colour the title/value etc based on the state.

Fill in the kpiData with kpi's of your liking, for the example we'll create one or more of all KPI's to showcase them.

In the end, your kpiData might look something like this (NOTE: You can also construct the kpi data programmatically in a service or by queryingconnected assets)



Now if you save the labelData property and have a look at the mashup, you should see the KPI's appear in the label. You might notice that thetext's for the KPI's are shown in red, this happened because we didn't specify state formatting for the KPI's and the returned state when the viewerqueried it was an error style, in which the text colour is set to red. To fix this, let's open up our mashup builder and do the following:

Under the GetLabelData service in the data bindings window, expand the AllData under Returned data and drag drop the kpiData to thewidget and connect it to the KpiData property. NOTE: This binding is not actually used for connecting data, but rather to give the viewer aknowledge of the used DataShape so that we can configure the KPI fields and states properlyIf you're using the DataShape from the example, all the field name properties should be automatically configured. If not, you should look forproperties starting with "kpi" and configure the field names to match your setup.Look for the widget's properties starting with "kpi" and configure the KpiStyleStateFormatting the same way as you did for the label. Now ifyou save and refresh your mashup, you should see the kpi's and their texts colored properly. (NOTE: You can only control the colour of the textsand the progress kpi using the states. By default the KPI's will use the Background color of their state, but this can be configured using theKpiFontColour field. If you don't do this, all the KPI texts will most likely show up with a dark grey colour and not necessarily reflect the actualstate of the KPI.)

•

•

•

-T- soenolM

.dat'·&'SBf~~~~~ol ukpl x 1 J

~ Things_Eisa30Viewer.TNng 0J SortByKPIType ~ r. 5i GetProportiM

.:r- camom.Path

~ TNngs_Eisa30VIewer.TNng .

Iii Kp•Data ~

Ill KpoldFoeld 1 ld

Ill KpiTitleField I title : I ) Ill KpoValueField I value : I

5i Getlabolllata Ill KpiTypeField I type : I

~AIIOato Ill KptMinField min : I Ill KpoMaxField max

~ Things_E lsa30Viewer Thing . Ill KpoLom•tField 11m II . . Ill Kp•LowerL•miiF•eld lowerllmit :

i8 AJIOaU Ill Kp1lnvertedF1eld inverted ~

,. Kp•Sty1eStateForman•ng State: Elisa3D\IIewer.Statos.

T Kp•FontColourF•etd BaCkground colo( . .

elisa3dviewer user guide · enable ghost / object trail. ... dragging the canvas with the primary...

Documents