Connected Systems Showcase Examples

.jshintrc

@@ -7,5 +7,5 @@
     "forin"         : false,
     "immed"         : false,
     "indent"        : 4,
-    "esversion"     : 6
+    "esversion"     : 11
 }

README.md

@@ -71,6 +71,7 @@ $ npm run prod
 
 
 ## Dependencies
+
 ### Cesium
 
 If you use the CesiumView, don't forget to install the corresponding npm package 'cesium'.
@@ -110,4 +111,8 @@ $ ENV=latest yarn vuepress
 
 The official website (latest): [http://opensensorhub.github.io/osh-js/latest/site/](http://opensensorhub.github.io/osh-js/latest/site/)
 
-The official website (development): [http://opensensorhub.github.io/osh-js/dev/site/](http://opensensorhub.github.io/osh-js/dev/site/)
+The official website (development): [http://opensensorhub.github.io/osh-js/dev/site/](http://opensensorhub.github.io/osh-js/dev/site/)
+
+## License
+
+OpenSensorHub is licensed under the Mozilla Public License version 2.0.

archi/mqtt

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2021-09-24T15:01:57.643Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36" etag="a-25UMytF_W3BLWEE3ag" version="15.3.1" type="device"><diagram id="zpl2OC2ojmMQohNl5kBP" name="Page-1">7Vttc5s4EP41nrn7YA8CxMvH1ml7c3OZ5ibp3fWjArJRixERcuzcrz8JhA2SXTsX26Jp88Vo9YJ49tld7UJG3nSx/sBQmV3TFOcj10nXI+9q5LpeAID4kZKnRgKAqyRzRlIl2wpuyb9YCR0lXZIUV72BnNKck7IvTGhR4IT3ZIgxuuoPm9G8f9cSzbEhuE1Qbkr/JinPGmkEna38N0zmWXtn4KieBWoHK0GVoZSuOiLv3cibMkp5c7VYT3Eu0Wtxaea939O72RjDBT9mwv3VX0sPZ/GXT398jNDv/vxD8TD21DKPKF+qJ76jJUmESPVU/KnFgtFlkWK5nDPy3q4ywvFtiRLZuxLqF7KML3LRAuJSrYsZx+u9OwYbHASDMF1gzp7EEDVhDECowFP08UJn4gSNaLVVR6BGZR1NtLAjRYD5ZvktRuJCwfQcyNy9kEUDgMyJBgiZZ0BmIIWL9I20V9EqaIH7yOA14f9IECdQtT4rSOX11brbeFKN5g44Nexbw1Lsgi5Zgg9aiQl6B0+4A89WxnCOOHns72MXyOoON5SIHW51Grqwp1K/o9J2meYZ1MyuF9AXA8KoJv31PN9cjyM2x9xYr1b/BoEXMMK3wAihd/bUTAph2/7cLigb23l16xxUcq1SCQBPcw/RS7jkBPaZBIccwWJHA2gI3jjYi5hphBdHLAIDRCzci5hnH7FQN+khIBbZ9e++73cdvDOJ4/iAk69bN5gRgQBmZ/D88PUcIsIYTEIQb/4iMwp0/y4cEWK73LN2tAisEizSzwIvOVmEkfWDhe/YpVEA48G5sPAVMSyAk9jd+igwJBfmm2WZaU5w/QCiy/nl+oHzyZfqV4ORVYZKeVkymuCqOnwCuUfJ13l9Zvm45DmRJD5h/cbvawy6O48mwN3BmuBcZxPfLOBswHW/H3CjQWJro9IzgNjbGmzjF77lQl9RKSkItcXcywdpy3Wk4fPNcr3J0dJ56L2odqmlur5zecaZ9aYfg3HusYyzm+cCJ3xtjDPrdT8ZN6DENzwl4fQcxwbfzGrnM/l2du4cpoTdTFUvX8AdJ6PjM1X9mGWBEmY59xMnOeES0yRHIhdSedMNo48kxcxMnsRtSFnhS70G1w66gX98dhSdLTt6XmWyBpYk9px5JWjFzd3U4vck7yvsND4/OtLA/YHlUcEp8yhwcQOHzyt27mbmCVl2l5HiRUw7TCC7iVEc7PdP/+M9vH4EiS/PILNkOXKDnEuOiK5gzmv9NZKqREWPXMHDUn4H93ZGCz6u6q8A34gBwC3X4qee6dR9K6UL2evLb+3ame0tzLiUyW/+BA4j+VFeKflTpKVCcCymoYUMQGp/YpYqBRK5Q8pELJN0orXOlyJ+NStths0oU6IKLXBv9eZZBZrN4/YhEOIuLpqtidDH+9ZVcUa/4inNKauHeEES4fuZxEzYR0eeIhzNkgbkhBRzIYXb1h0VD3s1dve9m6Yi7s7y2hQzkqZYWmH/jfYpwnPsOHvZ3zFAF0LTAsNzRWfoGgy+QhzdNjGrLrxPu/qtOXj9592dVB1mjzVRvvXNCbjQ2Qf4fXQjMIDKMDQrw89H1wxKF0c30lztMMC1Wwa1VCBoDfZwrI/sxnpPi/U7ErjjCwR6agkvH+ptlEBPyRvv++CN/oYv2pEXHM2bGPYXC3dUqc7Mm9jkjXLwt4MKn7AfPjf1AGvuPTYrwDpwQ4iMGl3PiZtobv9zpuHn9h+QvHf/AQ==</diagram></mxfile>

archi/mqtt2

@@ -0,0 +1 @@
+<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel>

config/prepare-lib.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+const pkg = require('../package.json');
+
+const buildDir = path.resolve(__dirname, '../dist/');
+
+// update the version number in util.js
+
+// write out simplified package.json
+delete pkg.scripts;
+delete pkg.devDependencies;
+delete pkg.style;
+delete pkg.eslintConfig;
+delete pkg.private;
+fs.writeFileSync(
+  path.join(buildDir, 'package.json'),
+  JSON.stringify(pkg, null, 2),
+  'utf-8'
+);
+
+// copy in readme and license files
+fs.copyFileSync(
+  path.resolve(__dirname, '../README.md'),
+  path.join(buildDir, 'README.md')
+);

config/tsconfig-lib.json

@@ -0,0 +1,64 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "../dist",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    "importHelpers": false,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": false,                           /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": false,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    "inlineSources": false                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  },
+  "include": [
+    "../source/**/*.js"
+  ],
+  "exclude": []
+}

demos/3dr-solo-uav/3dr-solo-uav-react-tsx/package.json

@@ -12,7 +12,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "prod": "webpack --config webpack.config.js --mode production",
-    "dev": "webpack-dev-server --config webpack.config.js --mode development --watch",
+    "dev": "webpack-dev-server --config webpack.config.js --mode development",
     "postinstall": "patch-package",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -36,29 +36,33 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.14.5",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
-    "babel-loader": "^8.2.2",
-    "cesium": "1.68.0",
-    "clean-webpack-plugin": "^4.0.0-alpha.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^5.2.6",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.2",
-    "loader-utils": "^2.0.0",
-    "patch-package": "^6.2.2",
-    "react-draggable": "^4.4.3",
-    "strip-ansi": "^7.0.0",
-    "style-loader": "^3.0.0",
-    "ts-loader": "^9.2.3",
-    "webpack": "^5.44.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
-    "worker-loader": "^3.0.8"
+    "@babel/core": "7.9.0",
+    "@babel/preset-env": "7.9.5",
+    "@babel/preset-react": "7.9.4",
+    "@babel/preset-typescript": "7.14.5",
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.9",
+    "babel-loader": "8.2.2",
+    "@cesium/engine": "8.0.0",
+    "@cesium/widgets": "5.0.0",
+    "cesium": "1.114.0",
+    "@open-wc/webpack-import-meta-loader": "0.4.7",
+    "@babel/plugin-transform-optional-chaining": "7.23.4",
+    "clean-webpack-plugin": "4.0.0-alpha.0",
+    "copy-webpack-plugin": "9.0.1",
+    "css-loader": "5.2.6",
+    "file-loader": "6.2.0",
+    "html-webpack-plugin": "5.3.2",
+    "loader-utils": "2.0.0",
+    "patch-package": "6.2.2",
+    "react-draggable": "4.4.3",
+    "strip-ansi": "7.0.0",
+    "style-loader": "3.0.0",
+    "ts-loader": "9.2.3",
+    "webpack": "5.65.0",
+    "webpack-cli": "4.9.1",
+    "webpack-dev-server": "4.6.0",
+    "worker-loader": "3.0.8"
   },
   "browser": {
     "fs": false,

demos/3dr-solo-uav/3dr-solo-uav-react-tsx/patches/@cesium+engine+8.0.0.patch

@@ -0,0 +1,36 @@
+diff --git a/node_modules/@cesium/engine/Source/Scene/Material.js b/node_modules/@cesium/engine/Source/Scene/Material.js
+index 53d4155..ae796a4 100644
+--- a/node_modules/@cesium/engine/Source/Scene/Material.js
++++ b/node_modules/@cesium/engine/Source/Scene/Material.js
+@@ -834,6 +834,31 @@ function createTexture2DUpdateFunction(uniformId) {
+       return;
+     }
+
++    if (uniformValue instanceof HTMLCanvasElement) {
++      if (!uniformValue.drawing) {
++        if (uniformChanged && defined(texture)) {
++          if (texture !== context.defaultTexture) {
++            texture.destroy();
++          }
++          texture = undefined;
++        }
++        if (!defined(texture) || texture === context.defaultTexture) {
++          texture = new Texture({
++            context: context,
++            source: uniformValue,
++          });
++          material._textures[uniformId] = texture;
++          return;
++        }
++        texture.copyFrom({
++          source: uniformValue,
++        });
++      } else if (!defined(texture)) {
++        material._textures[uniformId] = context.defaultTexture;
++      }
++      return;
++    }
++
+     if (uniformValue instanceof Texture && uniformValue !== texture) {
+       material._texturePaths[uniformId] = undefined;
+       const tmp = material._textures[uniformId];

demos/3dr-solo-uav/3dr-solo-uav-react-tsx/public/index.html

@@ -9,6 +9,9 @@
           name="description"
           content="Web site created using create-react-app"
   />
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
   <!--
     manifest.json provides metadata used when your web app is installed on a
     user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

demos/3dr-solo-uav/3dr-solo-uav-react-tsx/src/components/BaseMap.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+declare type CustomValue = any;
+interface Props {
+    propA: CustomValue;
+}
+declare class BaseMap extends React.PureComponent {
+    readonly token: string;
+    divId: string;
+    constructor(props: Props);
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export default BaseMap;

demos/3dr-solo-uav/3dr-solo-uav-react-tsx/src/components/BaseMap.tsx

@@ -1,20 +1,20 @@
 import * as React from "react";
 import {EllipsoidTerrainProvider, Matrix3,Cartesian3,Cartesian2,Ion } from "cesium";
-import SosGetResultJson from "osh-js/core/datasource/SosGetResultJson.js";
+import SosGetResult from 'osh-js/core/datasource/sos/SosGetResult.datasource.js';
 import PointMarkerLayer from "osh-js/core/ui/layer/PointMarkerLayer.js";
 import CesiumView from "osh-js/core/ui/view/map/CesiumView.js";
 import {randomUUID} from "osh-js/core/utils/Utils.js";
 import ImageDrapingLayer from "osh-js/core/ui/layer/ImageDrapingLayer.js";
+import {Mode} from 'osh-js/core/datasource/Mode';
+import DataSynchronizer from "osh-js/core/timesync/DataSynchronizer";
 
 type CustomValue = any;
 interface Props {
   propA: CustomValue;
 }
-
 class BaseMap extends React.PureComponent {
-  readonly token: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MjczNTA4NS1jNjBhLTQ3OGUtYTQz' +
-      'Ni01ZjcxOTNiYzFjZGQiLCJpZCI6MzIzODMsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTY4OTU3MjB9.hT6fWdvIqu4GIHR7' +
-      '2WfIX0QHiZcOjVaXI92stjDh4fI';
+  readonly token: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ODY0NTkzNS02NzI0LTQwNDktODk4Zi0zZDJjOWI2NTdmYTMiLCJpZCI6MTA1N' +
+      'zQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTY4NzI1ODJ9.IbAajOLYnsoyKy1BOd7fY1p6GH-wwNVMdMduA2IzGjA';
 
   divId: string;
 
@@ -29,41 +29,45 @@ class BaseMap extends React.PureComponent {
     let videoCanvas = document.getElementById("video-container").getElementsByTagName("canvas")[0];
 
     let optsPlatform = {
-      protocol: 'ws',
       service: 'SOS',
-      endpointUrl: 'sensiasoft.net:8181/sensorhub/sos',
+      tls: true,
+      endpointUrl: 'sensiasoft.net/sensorhub/sos',
       offeringID: 'urn:mysos:solo:nav2',
       observedProperty: 'http://www.opengis.net/def/property/OGC/0/PlatformLocation',
       startTime: '2015-12-19T21:04:29.231Z',
       endTime: '2015-12-19T21:09:19.675Z',
-      replaySpeed: 1
+      mode: Mode.REPLAY
     };
 
     let optsOrientation = {
-      protocol: 'ws',
       service: 'SOS',
-      endpointUrl: 'sensiasoft.net:8181/sensorhub/sos',
+      tls: true,
+      endpointUrl: 'sensiasoft.net/sensorhub/sos',
       offeringID: 'urn:mysos:solo:nav2',
       observedProperty: 'http://www.opengis.net/def/property/OGC/0/PlatformOrientation',
       startTime: '2015-12-19T21:04:29.231Z',
       endTime: '2015-12-19T21:09:19.675Z',
-      replaySpeed: 1
+      mode: Mode.REPLAY
+
     };
 
     let optsGimbal = {
-      protocol: 'ws',
       service: 'SOS',
-      endpointUrl: 'sensiasoft.net:8181/sensorhub/sos',
+      tls: true,
+      endpointUrl: 'sensiasoft.net/sensorhub/sos',
       offeringID: 'urn:mysos:solo:nav2',
       observedProperty: 'http://sensorml.com/ont/swe/property/OSH/0/GimbalOrientation',
       startTime: '2015-12-19T21:04:29.231Z',
       endTime: '2015-12-19T21:09:19.675Z',
-      replaySpeed: 1
+      mode: Mode.REPLAY
     }
     // create data source for Android phone GPS
-    let platformLocationDataSource = new SosGetResultJson('android-GPS', optsPlatform);
-    let platformOrientationDataSource = new SosGetResultJson('android-Heading', optsOrientation);
-    let gimbalOrientationDataSource = new SosGetResultJson('android-Heading', optsGimbal);
+    // @ts-ignore
+    let platformLocationDataSource = new SosGetResult('android-GPS', optsPlatform);
+    // @ts-ignore
+    let platformOrientationDataSource = new SosGetResult('android-Heading', optsOrientation);
+    // @ts-ignore
+    let gimbalOrientationDataSource = new SosGetResult('android-Heading', optsGimbal);
 
     // add 3D model marker to Cesium view
     let pointMarkerLayer = new PointMarkerLayer({
@@ -89,7 +93,8 @@ class BaseMap extends React.PureComponent {
         }
       },
       icon: "./models/Drone+06B.glb",
-      name: 'Solo draping marker'
+      name: 'Solo draping marker',
+      iconScale: 12.0,
     });
 
     // style it with a moving point marker
@@ -159,12 +164,16 @@ class BaseMap extends React.PureComponent {
 
 
     // start streaming
-    // @ts-ignore
-    platformLocationDataSource.connect();
-    // @ts-ignore
-    platformOrientationDataSource.connect();
-    // @ts-ignore
-    gimbalOrientationDataSource.connect();
+    const dataSynchronizer = new DataSynchronizer({
+      masterTimeRefreshRate: 250,
+      replaySpeed: 1.0,
+      startTime: '2015-12-19T21:04:29.231Z',
+      endTime: '2015-12-19T21:09:19.675Z',
+      dataSources: [
+        platformLocationDataSource,platformOrientationDataSource,gimbalOrientationDataSource
+      ]
+    });
+    dataSynchronizer.connect()
   }
 
   render() {

demos/3dr-solo-uav/3dr-solo-uav-react-tsx/src/components/SoloVideo.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare class SoloVideoComponent extends React.PureComponent<any, any> {
+    divId: string;
+    constructor(props: any);
+    componentDidMount(): void;
+    render(): JSX.Element;
+}