OpenSensorHub Web Client Toolkit Documentation

OpenSensorHub Web Client toolkit allows you to visualize data from OSH. It provides the necessary tools to build your own web application for monitoring your sensors. It is pure javascript framework and does not require third party libraries. A set of external libraries is also available to easily build some part of your views such as Leaflet, OpenLayer, Cesium, Chart.js etc..

It's an event based architecture suitable for real-time or playback. It allows one to make temporal synchronization or multiple data stream. It provides a styling overlay using configurable layers as well as an advanced support for video (H264/MJPEG). It has been designed to integrate any map engines such as Lealfet, OpenLayer or Cesium.

Moreover, it offers support for SOS & SPS services, discovery function, uses the HTTP or WebSocket API. Several modules already exist to allow one to setup quickly an application such as Orientation, DataSourceChart, Video, Map etc..

Please report all problems related to the SensorHub software including documentation errors via the GitHub Issue Tracker of the osh-js repository.

Features

• Supports for data parsing:
  • Video (with roll) data with codecs H265, H264, VP9, VP8
  • Any Swe generic JSON such as GPS, Quaternion etc.
  • Spectrogram, ImageDraping, Nexrad
• Supports for data Synchronization
• Supports WebSocket and HttpRequest Connector
• Supports SWE JSON generic requests:
  • GetCapabilities
  • GetFeatureOfInterest
  • GetResultTemplate
  • DescribeSensor
• Supports some dedicated visualizer:
  • OpenLayer, Leaflet or Cesium for Map data
  • FFMPeg for Video
  • Chart
  • Spectrogram
• Supports for Vue.js components

Installation

Releases

Binary and Source distributions archives can be downloaded directly from the Releases Section of our GitHub account.

The release contains a vendor directory (needed for some pre-coded views), the minified osh-js library and its corresponding stylesheet. You can use both the all-in-one vendor minified script(vendor.js & vendor.css) or the separate ones.

You can import the source directory directly into your APP application and refer to it. The Toolkit is ES6 compliant.

Showcase

The showcase can be run using npm and webpack configuration:

$ cd ./showcase
$ yarn install
$ yarn dev

or

$ cd ./showcase
$ npm install
$ npm run dev

Production

$ yarn install
$ yarn prod

or

$ npm install
$ npm run prod

Dependencies

Cesium

If you use the CesiumView, don't forget to install the corresponding npm package 'cesium'. Moreover, you can apply a path to fix texture issue while using image draping. The patch is located into the patches directory. To apply the patch,you can use patch-package:

$ npm i -D patch-package

Add the corresponding patch into your source folder and apply the patch using npm i.

package.json:

"scripts": {
    "postinstall": "patch-package",
    ...
  },

You can add any external dependencies using npm. For example, if you attempt to use some OpenLayer features, don't forget to install OpenLayer as node module dependency.

Build site

Because there are 2 environments, you must pass the ENV variable to build the corresponding target: 'dev' | 'latest'

$ ENV=dev yarn vuepress

or

$ ENV=latest yarn vuepress

The official website (latest): http://opensensorhub.github.io/osh-js/dev/site/ The official website (development): http://opensensorhub.github.io/osh-js/dev/site/