+
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/gui/web/src/App.less b/gui/web/src/App.less
new file mode 100644
index 000000000..df27317f4
--- /dev/null
+++ b/gui/web/src/App.less
@@ -0,0 +1,120 @@
+.root-container {
+ margin: 0 auto;
+ display: flex;
+ text-align: center;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ font-size: calc(10px + 2vmin);
+ color: black;
+
+ .ant-spin {
+ width: 50vw;
+ font-weight: bold;
+ }
+
+ .tab-indicator {
+ padding: 0 10px;
+
+ span {
+ font-weight: bold;
+ margin-right: 5px;
+ }
+ }
+
+ .preview-container {
+ margin: auto 0;
+ box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
+ border-radius: 0 0 20px 20px;
+ position: relative;
+
+ .ant-spin {
+ position: absolute;
+ top: calc(50% - 50px);
+ }
+
+
+ /* Safari and also the IE Browser */
+ .stream-preview {
+ width: 100%;
+ min-width: 500px;
+ aspect-ratio: 16 / 9;
+ }
+
+ @media (min-width: 1440px) {
+ .stream-preview {
+ min-width: 45vw;
+ max-width: 1100px;
+ }
+ }
+
+ .preview-controls {
+ padding: 10px 0;
+ background-color: #444444;
+ border-radius: 0 0 20px 20px;
+ display: flex;
+ align-items: center;
+ vertical-align: middle;
+ justify-content: space-evenly;
+
+ .ant-select:first-child {
+ width: 130px;
+ }
+ }
+ }
+
+ .title-section {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .options-section {
+ margin: 10px 0;
+ position: relative;
+ text-align: left;
+ padding: 10px;
+ border: 1px solid @border-color-base;
+ border-radius: 10px;
+
+ .ant-select-lg {
+ display: block;
+ margin: 20px 0;
+ }
+
+ .info-indicator {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ }
+
+ .switchable-option {
+ button {
+ width: 60px;
+ }
+
+ span {
+ margin-left: 5px;
+ }
+
+ .switchable-input {
+ width: 200px;
+ }
+ }
+
+ .switchable-option + .switchable-option {
+ margin-top: 5px;
+ }
+
+ .ant-btn-block {
+ margin-top: 20px;
+ margin-bottom: 5px;
+ height: 60px;
+ font-weight: bold;
+ }
+ }
+
+ .restart-button {
+ margin-bottom: 20px;
+ }
+}
\ No newline at end of file
diff --git a/gui/web/src/background.jpg b/gui/web/src/background.jpg
new file mode 100644
index 000000000..28ba385ad
Binary files /dev/null and b/gui/web/src/background.jpg differ
diff --git a/gui/web/src/components/AIProperties.js b/gui/web/src/components/AIProperties.js
new file mode 100644
index 000000000..90335f17b
--- /dev/null
+++ b/gui/web/src/components/AIProperties.js
@@ -0,0 +1,79 @@
+import {Button, Select, Slider, Switch, Typography} from "antd";
+import {QuestionCircleOutlined} from "@ant-design/icons";
+import {useSelector, useDispatch} from "react-redux";
+import {updateConfig} from "../store";
+
+function AIProperties() {
+ const config = useSelector((state) => state.demo.config).ai || {}
+ const dispatch = useDispatch()
+
+ const update = data => dispatch(updateConfig({ai: data}))
+ return (
+ <>
+
+ AI Properties
+ update({enabled})} checked={config.enabled}/> {config.enabled ? "Enabled" : "Disabled"}
+
+
+ Neural network
+
+
+
+ update({fullFov})} checked={config.fullFov}/>
+ Full FOV input
+
+
+ SHAVEs
+ update({shaves})} marks={{0: '0', [config.shaves]: '' + config.shaves, 12: '12'}} min={0} max={12} value={config.shaves}/>
+
+
+ Model source
+
+
+
+ update({sbb})} checked={config.sbb}/> Spatial Bounding Boxes (SBB)
+
+
+ );
+}
+
+export default AIProperties;
diff --git a/gui/web/src/components/CameraPreview.js b/gui/web/src/components/CameraPreview.js
new file mode 100644
index 000000000..ec07389ff
--- /dev/null
+++ b/gui/web/src/components/CameraPreview.js
@@ -0,0 +1,53 @@
+import React, {useEffect, useState} from 'react'
+import {Button, Select, Spin} from "antd";
+import {PlayCircleOutlined} from "@ant-design/icons";
+import {useDispatch, useSelector} from "react-redux";
+import {fetchConfig, updateDynamicConfig, sendDynamicConfig} from "../store";
+
+const emptyImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADvCAYAAADcvIJsAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpSIVBwsWcchQnSyIijhqFYpQIdQKrTqYvPQPmjQkKS6OgmvBwZ/FqoOLs64OroIg+APi6OSk6CIl3pcUWsR44fE+zrvn8N59gNCoMM3qGgc03TbTyYSYza2KoVcEEMUgQoDMLGNOklLwra976qa6i/Ms/74/q0/NWwwIiMSzzDBt4g3i6U3b4LxPHGElWSU+Jx4z6YLEj1xXPH7jXHRZ4JkRM5OeJ44Qi8UOVjqYlUyNeIo4pmo65QtZj1XOW5y1So217slfGM7rK8tcpzWMJBaxBAkiFNRQRgU24rTrpFhI03nCxz/k+iVyKeQqg5FjAVVokF0/+B/8nq1VmJzwksIJoPvFcT5GgNAu0Kw7zvex4zRPgOAzcKW3/dUGMPNJer2txY6A/m3g4rqtKXvA5Q4QfTJkU3alIC2hUADez+ibcsDALdC75s2tdY7TByBDs0rdAAeHwGiRstd93t3TObd/e1rz+wH4+3J2eba+jwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+YBGg8tJvd2VFsAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABiklEQVR42u3BgQAAAADDoPlTn+AGVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxwDW+gABpsz3nwAAAABJRU5ErkJggg=="
+
+const CameraPreview = () => {
+ const fetched = useSelector((state) => state.demo.fetched)
+ const app = useSelector((state) => state.demo.rawConfig.app)
+ const preview = useSelector((state) => state.demo.config).preview || {}
+ const devices = useSelector((state) => state.demo.config).devices || {}
+ const dispatch = useDispatch()
+
+ return (
+
+ OpenVINO version
+
+
+
+ Label to count
+
+
+
+ SBB Factor
+ update({sbbFactor})} marks={{0: '0', [config.sbbFactor]: '' + config.sbbFactor, 1: '1'}} step={0.1} min={0} max={1} value={config.sbbFactor}/>
+
+
+ {
+ !fetched && 
+ }
+
+ );
+};
+
+export default CameraPreview;
\ No newline at end of file
diff --git a/gui/web/src/components/CameraProperties.js b/gui/web/src/components/CameraProperties.js
new file mode 100644
index 000000000..5a23319a3
--- /dev/null
+++ b/gui/web/src/components/CameraProperties.js
@@ -0,0 +1,97 @@
+import {Button, Col, Input, Row, Select, Slider, Switch, Typography} from "antd";
+import {QuestionCircleOutlined} from "@ant-design/icons";
+import {useDispatch, useSelector} from "react-redux";
+import {sendDynamicConfig, updateConfig, updateDynamicConfig} from "../store";
+
+function CameraProperties() {
+ const config = useSelector((state) => state.demo.config).camera || {}
+ const color = config.color || {}
+ const mono = config.mono || {}
+ const dispatch = useDispatch()
+
+ const updateColor = data => dispatch(updateConfig({camera: {color: data}}))
+ const updateMono = data => dispatch(updateConfig({camera: {mono: data}}))
+
+ return (
+ <>
+
+
+
+
+
+
+ Camera Properties
+
+
+
+ Color
+ updateColor({fps: event.target.value})} value={color.fps}/>
+ Resolution
+
+
+ Left + Right
+ updateMono({fps: event.target.value})} addonBefore="FPS" value={mono.fps}/>
+ Resolution
+
+
+
+
+
+ dispatch(updateConfig({camera: {sync}}))}/> Enable sync
+
+
+
+
+
+
+ );
+}
+
+export default CameraProperties;
diff --git a/gui/web/src/components/DepthProperties.js b/gui/web/src/components/DepthProperties.js
new file mode 100644
index 000000000..4d1835735
--- /dev/null
+++ b/gui/web/src/components/DepthProperties.js
@@ -0,0 +1,59 @@
+import {Button, Col, Input, Row, Select, Slider, Switch, Typography, Divider} from "antd";
+import {QuestionCircleOutlined} from "@ant-design/icons";
+import {useDispatch, useSelector} from "react-redux";
+import {sendConfig, sendDynamicConfig, updateConfig, updateDynamicConfig} from "../store";
+
+function DepthProperties() {
+ const config = useSelector((state) => state.demo.config).depth || {}
+ const dispatch = useDispatch()
+
+ const update = data => dispatch(updateConfig({depth: data}))
+ const updateDynamic = data => {
+ dispatch(updateDynamicConfig({depth: data}))
+ dispatch(sendDynamicConfig())
+ }
+
+ return (
+ <>
+
+ Saturation
+ updateColor({saturation})} marks={{0: '0', 10: '10'}} min={0} max={10} value={color.saturation || 0}/>
+
+
+ Contrast
+ updateColor({contrast})} marks={{0: '0', 10: '10'}} min={0} max={10} value={color.contrast || 0}/>
+
+
+ Brightness
+ updateColor({brightness})} marks={{0: '0', 10: '10'}} min={0} max={10} value={color.brightness || 0}/>
+
+
+ Sharpness
+ updateColor({sharpness})} marks={{0: '0', 4: '4'}} min={0} max={4} value={color.sharpness || 0}/>
+
+
+
+ Saturation
+ updateMono({saturation})} marks={{0: '0', 10: '10'}} min={0} max={10} value={color.saturation || 0}/>
+
+
+ Contrast
+ updateMono({contrast})} marks={{0: '0', 10: '10'}} min={0} max={10} value={color.contrast || 0}/>
+
+
+ Brightness
+ updateMono({brightness})} marks={{0: '0', 10: '10'}} min={0} max={10} value={color.brightness || 0}/>
+
+
+ Sharpness
+ updateMono({sharpness})} marks={{0: '0', 4: '4'}} min={0} max={4} value={color.sharpness || 0}/>
+
+
+
+ Depth Properties
+ update({enabled})}/> Enabled
+
+
+ Median filtering
+
+ update({subpixel})} checked={config.subpixel}/> Subpixel
+ update({lrc})} checked={config.lrc}/> Left Right Check
+ update({extended})} checked={config.extended}/> Extended Disparity
+
+
+ Confidence Threshold
+ updateDynamic({confidence})} marks={{0: '0', 255: '255'}} min={0} max={255} value={config.confidence}/>
+ Bilateral Sigma
+ updateDynamic({sigma})} marks={{0: '0', 250: '250'}} min={0} max={250} value={config.sigma}/>
+ LRC Threshold
+ updateDynamic({lrcThreshold})} marks={{0: '0', 10: '10'}} min={0} max={10} value={config.lrcThreshold}/>
+ Depth Range (m)
+
+
+
+
+ );
+}
+
+export default DepthProperties;
diff --git a/gui/web/src/components/MiscProperties.js b/gui/web/src/components/MiscProperties.js
new file mode 100644
index 000000000..385065951
--- /dev/null
+++ b/gui/web/src/components/MiscProperties.js
@@ -0,0 +1,77 @@
+import {Button, Col, Input, Row, Switch, Typography} from "antd";
+import {QuestionCircleOutlined} from "@ant-design/icons";
+import {useDispatch, useSelector} from "react-redux";
+import {updateConfig} from "../store";
+
+function MiscProperties() {
+ const config = useSelector((state) => state.demo.config).misc || {}
+ const dispatch = useDispatch()
+
+ const update = data => dispatch(updateConfig({misc: data}))
+
+ return (
+ <>
+
+ Recording
+
+
+
+ update({recording: {color: {enabled}}})} checked={config.recording.color.enabled}/>
+ Color
+ update({recording: {color: {fps: event.target.value}}})}/>
+
+
+ update({recording: {left: {enabled}}})} checked={!!config.recording.left.enabled}/>
+ Left
+ update({recording: {left: {fps: event.target.value}}})}/>
+
+
+ update({recording: {right: {enabled}}})} checked={!!config.recording.right.enabled}/>
+ Right
+ update({recording: {right: {fps: event.target.value}}})}/>
+
+ update({recording: {dest: event.target.value}})}/>
+
+ Raporting
+
+
+
+ update({reporting: {enabled: config.reporting.enabled.filter(item => item !== "temp") + (enabled ? ["temp"] : [])}})} checked={_.includes(config.reporting.enabled, "temp")}/>
+ Temperature
+
+
+ update({reporting: {enabled: config.reporting.enabled.filter(item => item !== "cpu") + (enabled ? ["cpu"] : [])}})} checked={_.includes(config.reporting.enabled, "cpu")}/>
+ CPU
+
+
+ update({reporting: {enabled: config.reporting.enabled.filter(item => item !== "memory") + (enabled ? ["memory"] : [])}})} checked={_.includes(config.reporting.enabled, "memory")}/>
+ Memory
+
+ update({reporting: {dest: event.target.value}})}/>
+