Understanding Scripts
Exporting
exports.afterSetState = function afterSetState(key, newValue, oldValue) { ... }
orexports.afterSetState = afterSetState;
function afterSetState(key, newValue, oldValue) { ... }
This way, your afterSetState() function will be properly called by the Scene runtime.
Please note that this applies to all functions described in Event hooks. Otherwise, Scene runtime would not know what function to call.
You can define multiple scripts for a Control and all of them will run when a Scene is executed, or you can just use one and not separate them. Make sure not to redefine the same exported functions in different scripts, since they would overwrite one another.
The other possible application for the exports object is for using exported functions and variables in the controls's template.
Variables
- exports: the object that will contain all your exported functions and variables. See Exporting.
- ui: contains some useful functions in the API ready
to be used. The available functions are as follows:
- animateTo(stepName): animates the scene camera from the current point to the specified step (stepName). Available only in 3D tiles. For more information on how to manage camera positions, see Using the Scene Editor (Beta).
- navigate(graphName): opens an instance of graphName in the same window as the running scene. If the specified graph already has an instance running, it will switch to the scene of that instance. Otherwise, it creates a new instance of the graph and switches to it.
- loadJS(pathToFile): used to load
JS scripts in runtime. A good example of use
case is to load three.js
shaders:
ui.loadJS('service/v1/repository/files/controls/com/sap/vgui/water1/assets/WaterShader.js').then(function () { water = new THREE.Water(...); });Bear in mind that loadJS only supports global modules, so every package that you import must assign itself to the window object.
- loadCSS(pathToFile): loads CSS
stylesheets in runtime. Returns a Promise that is
resolved when the stylesheet is done loading.
If you load a filepath multiple times, it will be reloaded and refreshed.
- ensureUI5(): loads the UI5 library and returns a Promise that resolves when it's done loading. Also used to check if UI5 is already loaded, since the Promise will resolve right away.
- createUI5View(mSettings): creates UI5 views. The mSettings parameter references the object with the same name in the UI5 documentation at https://openui5.hana.ondemand.com/#/api/sap.ui.core.mvc.View/special%20settings. Important settings are viewContent and controller. Returns a Promise that is resolved when the view is done creating.
- operator: contains information about the operator, providing the state when accessing it via script. It relates to the operator concept from the Pipeline Modeler, since the state is part of configuration found in the operator's definition in operator.json.
- object: the instance of the visual wrapper of the
control. If in a 2D scene, it will be a Node2D, whereas in
a 3D scene, it will contain a Node3D. This object contains
several utility functions for advanced customization of an element and is
intended for experienced developers.
- object.getControl(): returns a Promise that, when resolved, returns the actual rendered element in the scene. In the case of 3D scenes, it will return the instance of the THREE object and allow the user to customize it as they desire.
- player: the instance of the Player. This is only set when the scene is running, since it will run in a player, both for 2D and 3D scenes.
- target: the DOM element of the operator.
- scene: the instance of the Scene. This is a three.js object. Available only in 3D scene or 3D tile.
- renderer: the instance of the renderer. This will be a MixedRenderer, which handles both CSS3D rendering and WebGL rendering at once. Available only in 3D scene or 3D tile.
- camera: the camera of the scene, which is three.js PerspectiveCamera object. Available only in 3D scene or 3D tile.
- controls: the instance of the camera controls. Available only in 3D scene or 3D tile.
Event Hooks
Lifecycle
- init(): called when the operator is created. Useful for setting initial values or listeners.
- destroy(): called when the object is removed. Useful for freeing resources or listeners.
- start(): called when the scene starts.
- stop(): called when the scene stops.
- update(info): update loop, called at every frame.
- info (object): contains the time in which the function has been called and a delta, which is the time difference between the current time and the time of the last update call.
- beforeSetState(key, newValue, oldValue)
- afterSetState(property, newValue, oldValue)
- resize(): only for 2D scenes: called when the tile is resized. To be used if layout management in your operator according to the container size is needed.
User Interaction
Capture events in the 3D environment.
- keydown(event): called when the keydown event occurs.
- keyup(event): called when the keyup event occurs.
- mouseup(event): called when the mouseup event occurs.
- mousemove(event): called when the mousemove event occurs.
- touchstart(event): called when the touchstart event occurs.
- touchend(event): called when the touchend event occurs.
- touchmove(event): called when the touchmove event occurs.
