Skip to content

Stinuum Web Manual

Jump to bottom
WijaeCho edited this page Aug 28, 2023 · 18 revisions

Stinuum Web

  • Install Stinuum Web
  • After installing Stinuum Web, run app.js in the root folder with as below command
$ cd Stinuum Web
$ npm install
$ node app.js
  • The initial address is localhost:8080/

Contents

  1. Stinuum Main
    1.1. Upload
    1.2. Layers
    1.3. Animation widget
    1.4. SceneModePicker
    1.5. Graph
    1.6. Slice
    1.7. Rader
    1.8. Image
    1.9. Text
  2. Stinuum with OGC API - MovingFeatures Server(MF-API Server)
    2.1. Get the MovingFeatureCollection
    2.2. Send the MovingFeatureCollection data to main page
    2.3. Get MovingFeature list
    2.4. Get additional MovingFeatures

1. Stinuum Main

  • Stinuum main can visualize based on CesiumJS with the MovingFeature-JSON document

  • Stinuum main can use without connecting to the MF-API Server

  • The features of Stinuum main are shown below figure

Main

1.1. Upload

  • The Upload function uploads the MovingFeature-JSON file to using in Stinuum

  • Users can use it as below steps:

    • Click the "UPLOAD" button
    • Drag and drop your MovingFeature-JSON file on the dropbox area

Upload

1.2. Layers

  • All moving features in Stinuum is managed by Layers.

    • Collection Layer and Feature Layer.

Collection Layer

  • When uploading a file, the MovingFeature-JSON's "name" property value is added to the Collection Layer.

    • If the "name" property does not exist, it is displayed as the file name

  • When users click on an item (MovingFeatureCollection) in the Collection Layer, it adds a list of MovingFeatures in the Feature Layer.

    • In this case, if MovingFeature’s "name" property does not exist, Stinuum temporary makes a name by add number to the item name in the Collection Layer.
    • ex) Item name in Collection Layer: example_data / Item name in Feature Layer: example_data_1

Layers1

Feature Layer

  • When users click on an item (MovingFeature) in the Feature Layer

    • The temporalGeometry of selected MovingFeature visualized on the map.
    • The temporalProperties of selected MovingFeature can view via clicking the "GRAPH" and "IMAGE" button.

Layers2

1.3. Animation widget

  • The Animation widget provides buttons for play, pause, and reverse, along with the current time and date for the movement of the selected MovingFeature, surrounded by a "shuttle ring" for controlling the speed of the animation.

  • The shuttle ring is capable of both fast and very slow playback.

    • Click and drag the shuttle ring pointer itself (shown above in green).
    • Or click in the rest of the ring area to nudge the pointer to the next preset speed in that direction.

AnimationWidget2

1.4. SceneModePicker

  • The SceneModePicker is a single button widget for switching between scene modes of CesiumJS.

  • Currently, it supports three scene modes as below table.

SceneModePicker1 SceneModePicker2

1.5. Graph

  • The Graph function provides a button for showing graphs according to the ParametricValues ​​data in temporalProperties of MovingFeature-JSON.

    • Click the "GRAPH" button to display a list of ​​whose type is "Measure" and "Text" ParametricValues

      • If type is "Measure", all values ​​of interpolation described in the MovingFeature-JSON standard can be used. e.g., "Discrete", "Step", "Linear" and "Regression"
      • If type is "Text", only "Discrete" and "Step" values ​​of interpolation can be used.
      • If type is "Image", it can be supported by the Image function.

Graph1

  • If users have selected more than one ParametricValues, users can choose one of them ​at the top of the graph window.

Graph2

  • If users select a specific region in the graph window, it creates a new time boundary based on the value of the corresponding x-axis (time). It then shows only a MovingFeature data corresponding to the new time boundary.

Graph3

1.6. Slice

  • The Slice function provides a button for restricting a temporalGeometry by a specific period.

    • It creates a time bar using the maximum and minimum times of the corresponding MovingFeature.
    • When changing the period of the time bar, the temporalGeometry changed according to a new time boundary.

Slice

1.7. Rader

  • The Rader function provides a button for showing the overall information of MovingFeature.

    • It used the datetimes and coordinates values ​​of temporalGeometry.
    • An arrow indicates the overall moving direction of MovingFeature.
    • The total moving distance, time, and average speed of MovingFeature are displayed.

Rader

1.8. Image

  • The Image function provides a button for showing images according to the ParametricValues ​​data in temporalProperties of MovingFeature-JSON.

    • It displays image data defined in ParametricValues ​​with an image viewer.
    • Click the "IMAGE" button to display the ParametricValues ​​item whose type is "Image".
    • Only "Discrete" and "Step" can be used among interpolation values.

  • If users select one or more ParametricValues, users can choose them ​​at the top of the image window.

Image

1.9. Text

Text mode

  • The Text function provides a button for the MovingFeature-JSON document, not the MovingFeature-JSON file.

    • When clicking the "TEXT" button, users can create or upload MovingFeature-JSON via text viewer.
    • If you click the "Upload" button after writing a valid MovingFeature-JSON document, it added to the Collection Layer.
    • If you click the "Reset" button, all data which users wrote in the text viewer is deleted.

Text

2. Stinuum with OGC API - MovingFeatures Server(MF-API Server)

  • If users can connect to the MF-API Server, Stinuum can get to MovingFeatureCollection data from MF-API Server using MF-API

  • The Server function provides a button for getting the MovingFeatureCollection data list from MF-API Server.

    • If clicking the "SERVER" button, the browser moves to the data selection page (localhost:8080/dataSelect), where users can select MovingFeatureCollection data from the MF server.

Server-1

2.1. Get the MovingFeatureCollection

  • In the data selection page (localhost:8080/dataSelect), users can communicate with the server to get the MovingFeatureCollection

    • Click the "GET MovingFeatureCollection" button.

      • Receive the whole data of MovingFeatureCollection from MF-API Server

    • If it succeeds, the result is added to the bottom table.

Server-2

2.2. Send the MovingFeatureCollection data to the main page

  • Select one or more rows that users need to get the MovingFeature data.
  • And then click the "Send MovingFeatureCollection" button to sends the selected column values ​​to the main page (localhost:8080/main)

Server-3

2.3. Get MovingFeature list

  • Based on MovingFeatureCollection data getting from MF-API Server, the main page displays a list of MovingFeatureCollection title.

    • Select one or more the titles and then click the "SHOW" button to get the MovingFeature data list.

  • Add the MovingFeatureCollection data to the Collection Layer (detail describe in 1.2 Layers).

  • When users click on an item in the Collection Layer, it adds a list of MovingFeatures in the Feature Layer.

  • When users click on an item (MovingFeature) in the Feature Layer,

    • The temporalGeometry of selected MovingFeature visualized on the map.
    • The temporalProperties of selected MovingFeature can view via clicking the Graph and Image button.

Server-4

2.4. Get additional MovingFeatures

  • When the "ADD" button is clicked, it will fetch the next five pieces of MovingFeature data and add them to the corresponding layer (via the process described in Get MovingFeature list).

Server-5

Clone this wiki locally