HTML App¶
click to play the video of the HTML app
This app supports displaying HTML web pages using the OVE framework.
Each OVE Client which overlaps the section in which the HTML App is loaded creates an iframe
that containing the whole web page: the width
and height
properties of this frame are set to the dimensions of the whole section, and a CSS transform
of type translate
is applied to shift the content so that the correct portion is displayed.
Loading the whole page within each OVE Client is inevitably somewhat inefficient. If you are loading a map or tiled image, it will be more efficient to use the corresponding OVE App, for which each client will load and render only what it needs to display.
Seen above is a video of the HTML app rendering the webgl - animation - keyframes example from three.js displaying the model Littlest Tokyo by Glen Fox recorded in HD resolution at the Imperial College Data Science Institute’s Data Observatory.
Utilities¶
The HTML app hosts within it a number of utilities useful for another OVE app or a generic web page:
Application State¶
The state of this app has a format similar to:
{
"url": "http://my.domain"
}
The url
, property is mandatory. Optionally, launchDelay
and changeAt
properties can be provided to control the initial delay to pre-load the contents of the web page and the precise time at which all clients will change the page they display.
Launching the App¶
All OVE applications can be launched using the Launcher UI, the Python Client Library, and the OVE APIs. The API used to launch an application is the same for all applications, but the data that is passed into it is application-specific.
To launch the HTML app and load a web page using the OVE APIs:
Linux/Mac:
curl --header "Content-Type: application/json" --request POST --data '{"app": {"url": "http://OVE_CORE_HOST:PORT/app/html","states": {"load": {"url": "http://my.domain"}}}, "space": "OVE_SPACE", "h": 500, "w": 500, "y": 0, "x": 0}' http://OVE_CORE_HOST:PORT/section
Windows:
curl --header "Content-Type: application/json" --request POST --data "{\"app\": {\"url\": \"http://OVE_CORE_HOST:PORT/app/html\", \"states\": {\"load\": {\"url\": \"http://my.domain\"}}}, \"space\": \"OVE_SPACE\", \"h\": 500, \"w\": 500, \"y\": 0, \"x\": 0}" http://OVE_CORE_HOST:PORT/section
If the HTML app is used to display static web pages no further controlling would be required after the web page has been loaded. The app provides a controller and exposes API that can used to control interactive web pages.
Controlling the App¶
The controller of the app can be loaded by accessing the URL http://OVE_CORE_HOST:PORT/app/html/control.html?oveSectionId=SECTION_ID
.
The app’s API also exposes a refresh
operation. This operation can be executed on an individual web page or across all web pages.
To refresh a web page that is already loaded, using OVE APIs:
curl --request POST http://OVE_CORE_HOST:PORT/app/html/operation/refresh