- \n
\n \n \n \n
\nGetting started
\n\n- \n
- Mount the Locator U1 on the ROV or diver. \n
- Connect Antenna to topside housing and deploy in water \n
- Deploy ROV/Diver \n
- Position shows up in the GUI. \n
Developers
\n\n \n \n\n\n setIsExpanded(!isExpanded)}>{heading}
\n {isExpanded && children}\n
\n )\n}\n\nconst ExpandableHardwareSection = () => {\n return (\n setIsExpanded(!isExpanded)}>{heading}
\n {isExpanded && children}\n Version information
\nBrowser compatibility
\nThis GUI has been tested and verified to work with the following browsers:
\n- \n
Release notes
\n\n
\n
\n )\n}\n\nconst { MediaContextProvider, Media } = createMedia({\n breakpoints: {\n sm: 0,\n md: 600,\n lg: 1024,\n xl: 1920,\n },\n})\n\nconst Graph = props => {\n return (\n \n \n \n \n \n Generate diagnostic report for analysis by Water Linked support\n \n \n \n\n \n
\n )\n}\n\nexport default DiagnosticReport\n","// https://stackoverflow.com/a/48057286\nimport { useCallback, useRef, useState } from \"react\";\n\nconst useLongPress = (\n onLongPress,\n onClick,\n { shouldPreventDefault = true, delay = 300 } = {}\n ) => {\n const [longPressTriggered, setLongPressTriggered] = useState(false);\n const timeout = useRef();\n const target = useRef();\n\n const start = useCallback(\n event => {\n if (shouldPreventDefault && event.target) {\n event.target.addEventListener(\"touchend\", preventDefault, {\n passive: false\n });\n target.current = event.target;\n }\n timeout.current = setTimeout(() => {\n onLongPress(event);\n setLongPressTriggered(true);\n }, delay);\n },\n [onLongPress, delay, shouldPreventDefault]\n );\n\n const clear = useCallback(\n (event, shouldTriggerClick = true) => {\n timeout.current && clearTimeout(timeout.current);\n shouldTriggerClick && !longPressTriggered && onClick();\n setLongPressTriggered(false);\n if (shouldPreventDefault && target.current) {\n target.current.removeEventListener(\"touchend\", preventDefault);\n }\n },\n [shouldPreventDefault, onClick, longPressTriggered]\n );\n\n return {\n onMouseDown: e => start(e),\n onTouchStart: e => start(e),\n onMouseUp: e => clear(e),\n onMouseLeave: e => clear(e, false),\n onTouchEnd: e => clear(e)\n };\n};\n\nconst isTouchEvent = event => {\nreturn \"touches\" in event;\n};\n\nconst preventDefault = event => {\nif (!isTouchEvent(event)) return;\n\nif (event.touches.length < 2 && event.preventDefault) {\n event.preventDefault();\n}\n};\n\nexport default useLongPress;\n","import React, { useState } from 'react';\nimport { Button, Image } from 'semantic-ui-react'\nimport logo from '../waterlinked_logo.svg';\nimport './LEDButton.css'\nimport { withRouter } from \"react-router-dom\";\nimport useLongPress from './useLongpress'\n\nconst BlinkLED = () => {\n return fetch('/api/v1/about/led')\n .then(r => r.ok)\n .catch((e) => {\n console.log(\"Error: \", e.toString())\n return false\n })\n}\n\nfunction useLedBlink() {\n const [isActive, setIsActive] = useState(false)\n const [isSubmitFail, setIsSubmitFail] = useState(false)\n const onClick = () => {\n if (isActive) { return }\n setIsActive(true)\n BlinkLED().then(ok => {\n if (ok) {\n console.log(\"success\")\n setTimeout(() => {\n setIsActive(false)\n }, 3000)\n } else {\n console.log(\"fail\")\n setIsActive(false)\n setIsSubmitFail(true)\n setTimeout(() => {\n setIsSubmitFail(false)\n }, 3000)\n }\n })\n }\n return [isActive, isSubmitFail, onClick]\n}\n\nconst LEDButton = () => {\n const [isActive, isSubmitFail, onClick] = useLedBlink()\n\n return (\n \n
\n Please make sure the Receivers and Locator is in water and showing the behaviour you want assistance with.
\nClicking the button below initiates a \n \n second data capture to share with the support team.\n
\n \n
\n )\n/*\n*/\n}\n\nconst WaterLinkedLogoWithLedBlink = withRouter(WaterLinkedLogoWithLedBlinkNav)\n\nexport{ LEDButton, BlinkLED, WaterLinkedLogoWithLedBlink }\n","import React from 'react';\n\nfunction clamp(val, min, max) {\n return Math.min(Math.max(val, min), max)\n}\n\nconst SignalStrengthImage = ({bars}) => {\n const _bars = clamp(bars, 0, 4)\n const width = 35;\n const height = 20;\n\n const innerHeight = 100\n const heightPadding = 5\n const unitHeight = 20;\n\n const barWidth = 20;\n const barSpacing = 8;\n return (\n \n )\n}\n\nconst SignalStrengthIcon = ({rssi}) => {\n // Signal strength | bars\n // <-100 dBm | 0 \n // -100 - -85 dBm | 1\n // -85 - -70 dBm | 2\n // -70 - -55 dBm | 3\n // >-55 dBm | 4\n let bars = 0;\n let description = \"Weak\"\n if (rssi <= -100) {\n bars = 0;\n description = \"Weak\"\n } else if (rssi <= -85) {\n bars = 1\n description = \"Weak\"\n } else if (rssi <= -70) {\n description = \"Medium\"\n bars = 2\n } else if (rssi <= -55) {\n description = \"Strong\"\n bars = 3\n } else {\n bars = 4\n description = \"Strong\"\n }\n return (\n \n Unable to fetch stats
;\n }\n if (!data) {\n returnNo data available
\n )\n }\n return (\n \n {this.state.graph.length > 0 && (\n
\n )\n\n }\n}\n\n\nconst ValidIcon = ({is_valid}) => {\n if (is_valid) {\n return (\n \n
\n)\n\nfunction Diagnostic() {\n return (\n Legend
\nReceiver: 1 (blue)
\nReceiver: 2 (green)
\nReceiver: 3 (red)
\nReceiver: 4 (black)
\nSignal strength (dBm) at given distance (meter)
\nVerify active connection to topside by clicking by flashing led on master electronic board.
\n\n \n \n {this.props.children}\n
\n )\n }\n}\n\nConfigurator.propTypes = {\n options: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]),\n description: PropTypes.string,\n })).isRequired,\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]).isRequired,\n onChange: PropTypes.func.isRequired,\n heading: PropTypes.string.isRequired,\n help: PropTypes.string.isRequired,\n}\n\n\n\nconst FormSetupError = ({header, children}) => (\n \n {children}\n
\nLoading data
\n\n Underwater GPS G2\n {aboutInfoStore.hasVersionShort && (({aboutInfoStore.versionShort} R{process.env.REACT_APP_UGPS_MAX_RANGE}))}\n
\n )\n }\n \n
\n \n Grid size: {value} ({unit})\n
\n\n
\n X: {_x} \n Y: {_y} \n Depth {_z} ({converter.nameLong()})\n
\n\n \n
\n \n {available}\n
\n \n \n \n {battery >= 0 && ()}\n {waterTemp > -271 && ()}\n
\n \n
\n )\n }\n\n if (available.length < 2) {\n // Only 1 thing to select, nothing reason to show this\n return null\n }\n\n return(\n \n
)\n }\n\n if (available.length < 2) {\n // Only 1 thing to select, nothing reason to show this\n return null\n }\n\n return(\n \n {RoundDecimalPlaces(lat, 6)} \n {RoundDecimalPlaces(lng, 6)}\n
\n \n \n {storeFailure && (\n Failed to apply \n
\n )\n }\n}\n\nApplyFeedbackButton.propTypes = {\n type: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n disabled: PropTypes.bool.isRequired,\n isStoring: PropTypes.bool.isRequired,\n storeSuccess: PropTypes.bool.isRequired,\n storeFailure: PropTypes.string.isRequired,\n}\n\nexport default ApplyFeedbackButton;\n","import React from 'react';\nimport { Icon } from 'semantic-ui-react'\n\nclass ExpandableSettings extends React.Component {\n state = { expanded: false }\n\n toggleExpanded = (e) => {\n this.setState({expanded: !this.state.expanded})\n }\n\n render() {\n const icon = (this.state.expanded ? \"angle double up\" : \"angle double down\")\n return (\n {storeFailure}
\n\n Advanced settings
\n {this.state.expanded && (this.props.children)}\n
\n )\n }\n}\n\nexport { ExpandableSettings }\n","import React, { useState } from 'react';\nimport { Icon, Popup, Button } from 'semantic-ui-react'\nimport axios from \"axios\";\n\nconst FactoryResetButton = () => {\n const [isActive, setIsActive] = useState(false)\n const [isSubmitFail, setIsSubmitFail] = useState(false)\n\n const onClick = () => {\n if (isActive) { return }\n setIsSubmitFail(false)\n setIsActive(true)\n axios.post(\"/api/v1/about/factoryreset\").then(() => {\n // Resetting\n setTimeout(() => {\n setIsActive(false)\n }, 1000)\n }).catch((e) => {\n console.log(\"Error\", e.response.data.error)\n setIsActive(false)\n setIsSubmitFail(true)\n })\n }\n\n return (\n Advanced settings
\n {this.state.expanded && (this.props.children)}\n \n Warning: All settings including network settings, and points of interest will be lost. Are you sure? Actions will apply after reboot of system.\n
\n }\n on='click'\n position='right center'\n />\n )\n}\n\nexport{ FactoryResetButton }\n","function TimeoutError() {}\nTimeoutError.prototype = new Error()\n\nfunction ensureStoreHasLoaded(store, timeout=2000, pollInterval=50) {\n return new Promise(function (resolve, reject) {\n (function waitForStore(_timeout){\n if (_timeout < 1) return reject(new TimeoutError())\n if (store.hasLoaded) return resolve();\n setTimeout(waitForStore.bind(null, _timeout-1), pollInterval);\n })(timeout / pollInterval);\n });\n}\n\nexport { ensureStoreHasLoaded, TimeoutError }\n","import React, { Component } from 'react';\nimport { Segment, Header, Message } from 'semantic-ui-react'\nimport { Link } from 'react-router-dom'\nimport { observer, inject } from 'mobx-react'\nimport { FormInput, Configurator, FormSetupError, FormIsLoading, remap } from '../Stores/FormStores/FormStore'\nimport { ConfigStore } from '../Stores/FormStores/Settings'\nimport { MapPositionSelector } from '../Components/Map/MapPositionSelector'\nimport ApplyFeedbackButton from '../Components/ApplyFeedbackButton'\nimport { ExpandableSettings } from '../Components/ExpandableSettings'\nimport { FactoryResetButton } from '../Components/FactoryResetButton';\nimport { ensureStoreHasLoaded, TimeoutError } from '../Stores/ensure'\nimport './Settings.css'\n\n\nconst SetCurrentStaticPositionButton = inject(\"masterPositionStore\")(observer(class SetCurrentStaticPositionButton extends Component {\n setPos = (lat, lng) => {\n console.log(\"Storing position\", lat, lng)\n this.props.form.fields.static_lat.value = lat\n this.props.form.fields.static_lon.value = lng\n }\n render() {\n const lat = this.props.form.fields.static_lat.value\n const lng = this.props.form.fields.static_lon.value\n return (\n User preferences are stored in your web browser and are automatically applied.
\n\n Vehicle IMU data will need to be provided via the HTTP interface described in API Specification\n
\n\n Ethernet configuration\n
\n\n \n WiFi configuration\n
\n\n \n
\n\n \n Radius of search range
\n \n
\n
\n Radius of search range
\n \n Direction of search area
\n \n
\n
\n Direction of search area
\n \n Width of search sector
\n \n
\n
\n Width of search sector
\n \n \n
\n
\n)\n\nTableLatLngDepth.propTypes = {\n name: PropTypes.string.isRequired,\n lat: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,]).isRequired,\n lng: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,]).isRequired,\n depth: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,]).isRequired,\n}\n\nconst POIMarkerMoveable = (observer(class POIMarkers extends Component {\n onDrag = (e) => {\n const pos = e.target.getLatLng()\n this.props.onChange('lat', pos['lat'])\n this.props.onChange('lng', pos['lng'])\n //this.props.point.setlatlng(e.latlng)\n }\n render() {\n const { point, latlng } = this.props\n return(\n {name}
\n{message}
\n\n
\n )\n }\n}))\n\nconst VisibilitySelector = observer(({onFieldChange, point}) => (\n \n {poiStore.isFetching && \n {points.map(d =>\n \n )}\n {points.length > 0 && (
\n )\n }\n}))\n\nconst PointOfInterest = observer(class PointOfInterest extends Component {\n render() {\n const mapStateStore = this.props.mapStateStore\n const icon = (mapStateStore.poiExpanded ? \"angle double up\" : \"angle double down\")\n return (\n \n \n
\n )}\n\n {points.length > 0 && (\n mapStateStore.setPoiExpanded(!mapStateStore.poiExpanded)}> Points Of Interest (POI)
\n {mapStateStore.poiExpanded &&\n \n \n \n \n {mapStateStore.showMap ? (\n \n ) : (\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n \n {mapStateStore.showMap && (\n \n \n {this.props.pointOfInterestStore.errorAddMsg &&\n \n }\n \n \n {mapStateStore.showMap && (\n \n \n \n )}\n
\n )\n }\n}))\n\nexport default MapComponent\n","import { extendObservable, action, computed } from 'mobx'\n\nclass MapStateStore {\n constructor() {\n extendObservable(this, {\n showMap: false,\n setShowMap: action((enabled) => {\n this.showMap = enabled\n }),\n\n trailMax: 5*60, // 5 minutes\n trailLength: 60,\n setTrailLength: action((val) => {\n this.trailLength = val\n }),\n trailValue: computed(() => {\n let val = parseFloat(this.trailLength) || 1\n return Math.min(this.trailMax, Math.max(1, val))\n }),\n trailValueError: computed(() => {\n let val = parseFloat(this.trailLength)\n return isNaN(val) || (val < 1) || (val > this.trailMax)\n }),\n poiExpanded: false,\n setPoiExpanded: action((value) => {\n this.poiExpanded = value\n }),\n })\n }\n}\n\nexport default MapStateStore","import { PropTypes } from 'prop-types';\n\nfunction cross(a, b, o) {\n return (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0])\n }\n\n /**\n * @param points An array of [X, Y] coordinates\n */\n function convexHull(points) {\n points.sort(function(a, b) {\n return a[0] === b[0] ? a[1] - b[1] : a[0] - b[0];\n });\n\n let lower = [];\n for (let i = 0; i < points.length; i++) {\n while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], points[i]) <= 0) {\n lower.pop();\n }\n lower.push(points[i]);\n }\n\n let upper = [];\n for (let i = points.length - 1; i >= 0; i--) {\n while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], points[i]) <= 0) {\n upper.pop();\n }\n upper.push(points[i]);\n }\n\n upper.pop();\n lower.pop();\n return lower.concat(upper);\n }\n\n convexHull.propTypes = {\n points: PropTypes.shape({\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired\n })\n}\n\nfunction polygonArea(xy) {\n var area = 0; // Accumulates area in the loop\n let j = xy.length - 1; // The last vertex is the 'previous' one to the first\n\n for (let i=0; i < xy.length; i++) {\n area = area + (xy[j][0] + xy[i][0]) * (xy[j][1] - xy[i][1]);\n //area = area + (X[j]+X[i]) * (Y[j]-Y[i]);\n j = i; //j is previous vertex to i\n }\n return area / 2;\n}\n\npolygonArea.propTypes = {\n xy: PropTypes.shape({\n x: PropTypes.shape({min: PropTypes.number.isRequired, max: PropTypes.number.isRequired}),\n y: PropTypes.shape({min: PropTypes.number.isRequired, max: PropTypes.number.isRequired})\n })\n}\n\nexport { convexHull, polygonArea }\n","import { extendObservable, computed, observable, action } from 'mobx'\nimport { GenericFormStore } from './FormStore'\nimport { convexHull, polygonArea } from '../../Components/Map/geometry'\nimport { rules } from '../../lib/validator'\n\nclass ReceiverFormStore extends GenericFormStore {\n constructor(id, x, y, z, unitName, unitFactor, unitDecimals) {\n super()\n extendObservable(this, {\n id: id,\n form: {\n fields: {\n x: {\n value: Math.abs(x),\n negated: x < 0,\n convertUnit: true,\n error: null,\n rule: [rules.between(-100, 100)],\n },\n y: {\n value: Math.abs(y),\n negated: y < 0,\n convertUnit: true,\n error: null,\n rule: [rules.between(-100, 100)],\n },\n z: {\n value: z,\n negated: false,\n convertUnit: true,\n error: null,\n rule: [rules.between(0, 100)],\n },\n },\n meta: {\n isValid: true,\n error: null,\n unitName: unitName,\n unitFactor: unitFactor,\n unitDecimals: unitDecimals,\n },\n },\n })\n }\n}\n\n\nclass ReceiverCollectionFormStore {\n constructor() {\n extendObservable(this, {\n receiverRegistry: observable.map(),\n antenna: true,\n count: computed(() => this.receiverRegistry.size),\n clear: action(() => {\n this.receiverRegistry.clear()\n }),\n addReceiver: action((id, x, y, z, unitName, unitFactor, unitDecimals) => {\n this.receiverRegistry.set(id, new ReceiverFormStore(id, x, y, z, unitName, unitFactor, unitDecimals))\n }),\n get: (id) => { return this.receiverRegistry.get(id) },\n all: computed(() => this.receiverRegistry.values()),\n receiverArea: computed(() => this.getReceiverArea()),\n getReceiverArea: (convFunc) => {\n if (this.count < 3) {\n return 1000 // Accurate approximation to 5 decimals ;-)\n }\n const points = this.all.map(d => {\n let val = d.getFlattenedAbsoluteValues(convFunc)\n return [val.x, val.y]\n })\n let hull = convexHull(points)\n return Math.abs(polygonArea(hull))\n },\n isValid: computed(() => {\n // Check that all receiver forms are valid\n return this.all.every(d => d.form.meta.isValid)\n })\n });\n }\n}\n\nexport { ReceiverFormStore, ReceiverCollectionFormStore }\n","import { extendObservable } from 'mobx'\nimport { GenericFormStore } from './FormStore'\nimport { rules } from '../../lib/validator'\n\nclass AntennaFormStore extends GenericFormStore {\n constructor() {\n super()\n extendObservable(this, {\n form: {\n fields: {\n x: {\n value: 0,\n negated: false,\n convertUnit: true,\n error: null,\n rule: [rules.between(-100, 100)],\n },\n y: {\n value: 1,\n negated: false,\n convertUnit: true,\n error: null,\n rule: [rules.between(-100, 100)],\n },\n depth: {\n value: 0.75,\n negated: false,\n convertUnit: true,\n error: null,\n rule: [rules.between(0, 10)],\n },\n rotation: {\n value: 0,\n negated: false,\n convertUnit: false,\n error: null,\n rule: [rules.between(0, 360)],\n },\n },\n meta: {\n isValid: true,\n error: null,\n unitName: \"meter\",\n unitFactor: 1.0,\n unitDecimals: 2,\n },\n },\n })\n }\n}\n\nexport { AntennaFormStore }\n","import { extendObservable, computed } from 'mobx'\nimport { GenericFormStore } from './FormStore'\nimport { rules } from '../../lib/validator'\n\nclass RangeFormStore extends GenericFormStore {\n constructor() {\n super()\n extendObservable(this, {\n form: {\n fields: {\n xmin: {\n value: 100,\n negated: true,\n convertUnit: true,\n error: null,\n rule: [rules.between(0, 100)]\n },\n xmax: {\n value: 100,\n negated: false,\n convertUnit: true,\n error: null,\n rule: [rules.between(0, 100)]\n },\n ymin: {\n value: 100,\n negated: true,\n convertUnit: true,\n error: null,\n rule: [rules.between(0, 100)]\n },\n ymax: {\n value: 100,\n negated: false,\n convertUnit: true,\n error: null,\n rule: [rules.between(0, 100)]\n },\n zmax: {\n value: 100,\n negated: false,\n convertUnit: true,\n error: null,\n rule: [rules.between(0, 100)]\n },\n radius: {\n value: 150,\n negated: false,\n convertUnit: true,\n error: null,\n rule: [rules.between(1, process.env.REACT_APP_UGPS_MAX_RANGE)]\n },\n direction: {\n value: 340,\n negated: false,\n convertUnit: false,\n error: null,\n rule: [rules.between(0, 360)]\n },\n sector: {\n value: 90,\n negated: false,\n convertUnit: false,\n error: null,\n rule: [rules.between(0.1, 360)]\n },\n },\n meta: {\n isValid: true,\n error: null,\n unitName: \"meter\",\n unitFactor: 1.0,\n unitDecimals: 2,\n },\n },\n area: computed(() => this.getArea()),\n getArea: () => {\n let values = this.getFlattenedAbsoluteMetricValues()\n return (values.xmax - values.xmin)*\n (values.ymax - values.ymin)\n },\n longestSide: () => {\n const values = this.getFlattenedAbsoluteMetricValues()\n const width = (values.ymax - values.ymin)\n const height = (values.xmax - values.xmin)\n return Math.max(width, height)\n }\n })\n }\n}\n\nexport { RangeFormStore }\n","import React, { Component } from 'react';\nimport { observer, inject } from 'mobx-react'\nimport ReactResizeDetector from 'react-resize-detector';\nimport { CRS, icon } from 'leaflet'\nimport { Map, ZoomControl, Marker, Popup } from 'react-leaflet'\nimport { WaterlinkedLogoControl, GridSizeView } from './MapControls'\nimport { xyToLeflet } from './geohelpers'\nimport { CircleGrid } from './Grid'\nimport { CircularSearchAreaDraggable } from './CircularSearchArea'\nimport { formatDecimals } from '../../lib/format'\n\n\nvar origoIcon = icon({\n iconUrl: '/origin.svg',\n iconSize: [70, 70],\n iconAnchor: [35, 68],\n})\n\nconst AntennaRangeConfigurationMap = inject(\"preferenceStore\")(observer(class AntennaRangeConfigurationMap extends Component {\n state = {\n x: 0,\n y: 0,\n zoom: 1,\n }\n invalidateSize = () => {\n if (this.refs.map) {\n this.refs.map.leafletElement.invalidateSize()\n }\n }\n render() {\n const {rangeFormStore, maxRadius } = this.props\n const position = xyToLeflet(this.state.x, this.state.y)\n const converter = this.props.preferenceStore.converter\n const gridSize = this.props.preferenceStore.getGridSize(maxRadius)\n\n return (\n \n )\n }\n}))\n\nexport { AntennaRangeConfigurationMap }\n","import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst DescribeForwardBackward = ({val}) => (\n Search range
\nReceiver {this.props.id+1}
\n\n\n \n \n \n\n \n 
\n \n \n \n \n \n \n \n
\n )\n }\n})\n\n\nexport { AntennaAndRangeConfiguratorView }\n","import React, { Component } from 'react';\nimport { observer, inject } from 'mobx-react'\nimport { Icon, Table } from 'semantic-ui-react'\nimport { icon, CRS, divIcon } from 'leaflet'\nimport { Map, Marker, Popup, ZoomControl } from 'react-leaflet'\nimport { xyToLeflet, leafletToXY } from './geohelpers'\nimport { WaterlinkedLogoControl, GridSizeView } from './MapControls'\nimport { CircleGrid } from './Grid'\nimport { ConvexHullPoly } from './ConvexHullPoly'\nimport { FormInput } from '../../Stores/FormStores/FormStore'\nimport ReactResizeDetector from 'react-resize-detector';\nimport { formatDecimals } from '../../lib/format'\nimport { ShowUnit } from '../ShowUnit'\nimport { clamp } from '../../lib/helpers'\nimport { CircularSearchAreaDraggable } from './CircularSearchArea'\nimport { DescribeForwardBackward, DescribeLeftRight } from './guihelpers'\n\n\nvar origoIcon = icon({\n iconUrl: '/origin.svg',\n iconSize: [70, 70],\n iconAnchor: [35, 68],\n})\nvar dragIcon = divIcon({\n className: 'receiverIcon',\n iconSize: [20, 20],\n iconAnchor: [10, 10],\n html: '',\n})\n\nconst rxOpts = {\n iconSize: [25, 40],\n iconAnchor: [12, 39],\n popupAnchor: [0, -32],\n shadowUrl: '/marker-shadow.png',\n shadowSize: [41, 41],\n shadowAnchor: [12, 39]\n}\n\nvar rxIcons = {\n 1: icon(Object.assign({iconUrl: '/marker-rx-1.png'}, rxOpts)),\n 2: icon(Object.assign({iconUrl: '/marker-rx-2.png'}, rxOpts)),\n 3: icon(Object.assign({iconUrl: '/marker-rx-3.png'}, rxOpts)),\n 4: icon(Object.assign({iconUrl: '/marker-rx-4.png'}, rxOpts)),\n}\n\nconst ReceiverDraggable = observer(class ReceiverDraggable extends Component {\n onDrag = (e) => {\n const pos = leafletToXY(e.target.getLatLng())\n pos[0] = clamp(pos[0], -100, 100)\n pos[1] = clamp(pos[1], -100, 100)\n e.target.setLatLng(xyToLeflet(pos[0], pos[1]))\n\n if (this.props.onMove) {\n this.props.onMove(this.props.id, ...pos)\n }\n }\n render() {\n const { id, x, y, form, onFieldChange, unitName } = this.props\n return (\n Place antenna as shown in the illustration. Advanced setup can be used for customization.
\nAntenna setup illustration
\n\n Receiver {id+1} placement
\n\n \n
\n
\n Receiver {id+1} placement
\n\n \n \n \n \n \n
\n )\n }\n})\n\nlet rangeFormStore = new RangeFormStore()\nlet antennaFormStore = new AntennaFormStore()\nlet rxCollectionFormStore = new ReceiverCollectionFormStore()\n\nconst BaselineSetup = inject(\"preferenceStore\")(inject(\"rxStore\")(inject(\"antennaStore\")(inject(\"genericConfigStore\")(observer(class BaselineSetup extends React.Component {\n state = {\n isStoring: false,\n storeFailure: \"\",\n storeSuccess: false,\n isSettingUp: true,\n setupError: false,\n }\n reset() {\n let gcs = this.props.genericConfigStore\n let acs = this.props.antennaStore\n let converter = this.props.preferenceStore.converter\n const unitName = converter.nameShort()\n const unitFactor = converter.toUPShortFromMetric(1)\n const decimals = 2\n\n // Range form store\n rangeFormStore.form.meta.unitName = unitName\n rangeFormStore.form.meta.unitFactor = unitFactor\n rangeFormStore.form.meta.unitDecimals = decimals\n //rangeFormStore.onAbsoluteMetricFieldChange('xmin', gcs.ranges.x.min, decimals)\n //rangeFormStore.onAbsoluteMetricFieldChange('xmax', gcs.ranges.x.max, decimals)\n //rangeFormStore.onAbsoluteMetricFieldChange('ymin', gcs.ranges.y.min, decimals)\n //rangeFormStore.onAbsoluteMetricFieldChange('ymax', gcs.ranges.y.max, decimals)\n //rangeFormStore.onAbsoluteMetricFieldChange('zmax', gcs.ranges.z.max, decimals)\n rangeFormStore.onAbsoluteMetricFieldChange('radius', gcs.ranges.radius, 0)\n rangeFormStore.onFieldChange('direction', gcs.ranges.direction)\n rangeFormStore.onFieldChange('sector', gcs.ranges.sector)\n\n // Antenna form store\n antennaFormStore.form.meta.unitName = unitName\n antennaFormStore.form.meta.unitFactor = unitFactor\n antennaFormStore.form.meta.unitDecimals = decimals\n\n antennaFormStore.form.fields.x.value = RoundDecimalPlaces(converter.toUPShortFromMetric(acs.x), decimals)\n antennaFormStore.form.fields.y.value = RoundDecimalPlaces(converter.toUPShortFromMetric(acs.y), decimals)\n antennaFormStore.onAbsoluteMetricFieldChange('depth', acs.depth, decimals)\n antennaFormStore.onFieldChange('rotation', acs.rotation)\n\n rxCollectionFormStore.antenna = (gcs.antenna === \"enabled\")\n rxCollectionFormStore.clear()\n this.props.rxStore.all.forEach(d => {\n rxCollectionFormStore.addReceiver(d.id,\n RoundDecimalPlaces(converter.toUPShortFromMetric(d.x), decimals),\n RoundDecimalPlaces(converter.toUPShortFromMetric(d.y), decimals),\n RoundDecimalPlaces(converter.toUPShortFromMetric(d.z), decimals),\n unitName,\n unitFactor,\n decimals,\n )\n })\n }\n componentWillReceiveProps() {\n console.log(\"Reset config form: Props\")\n this.reset()\n }\n componentDidMount() {\n console.log(\"Reset config form: Mount\")\n Promise.all([\n ensureStoreHasLoaded(this.props.genericConfigStore),\n ensureStoreHasLoaded(this.props.rxStore),\n ensureStoreHasLoaded(this.props.antennaStore)]\n ).then(() => {\n console.log(\"Store loaded, resetting\")\n this.reset()\n this.setState({isSettingUp: false})\n }).catch((err) => {\n this.setState({isSettingUp: false, setupError: \"Error getting values\"})\n if (err instanceof TimeoutError) {\n console.log(\"Timeout while waiting for store\", err)\n } else {\n throw err\n }\n })\n }\n store = () => {\n this.setState({isStoring: true, storeFailure: \"\", storeSuccess: false})\n\n const ranges = this.props.genericConfigStore.ranges\n const decimals = 2\n const rangeFormData = rangeFormStore.getFlattenedAbsoluteMetricValues(decimals)\n //ranges.x.setMinMax(rangeFormData.xmin, rangeFormData.xmax)\n //ranges.y.setMinMax(rangeFormData.ymin, rangeFormData.ymax)\n //ranges.z.setMax(rangeFormData.zmax)\n ranges.radius = rangeFormData.radius\n // Should not be flattened as the are not distances\n ranges.direction = parseFloat(rangeFormStore.form.fields.direction.value)\n ranges.sector = parseFloat(rangeFormStore.form.fields.sector.value)\n\n // Propagate values to store\n const { rxStore } = this.props;\n rxCollectionFormStore.all.forEach(d => {\n let r = rxStore.get(d.id)\n let receiverFormData = d.getFlattenedAbsoluteMetricValues(decimals)\n r.setXYZ(receiverFormData.x, receiverFormData.y, receiverFormData.z)\n })\n\n\n this.props.genericConfigStore.antenna = rxCollectionFormStore.antenna ? \"enabled\" : \"disabled\"\n\n // Store antenna values\n const { antennaStore } = this.props\n const antennaFormData = antennaFormStore.getFlattenedAbsoluteMetricValues(decimals)\n\n antennaStore.x = antennaFormData.x\n antennaStore.y = antennaFormData.y\n antennaStore.depth = antennaFormData.depth\n antennaStore.rotation = parseInt(antennaFormStore.form.fields.rotation.value)\n\n // Store the receivers first, then store generic configuration to propagate the configuration\n this.props.rxStore.store()\n .then(reponse => {\n return this.props.antennaStore.store()\n })\n .then(reponse => {\n console.log(\"Storing config\", this.props.genericConfigStore.toTransportArray())\n return this.props.genericConfigStore.store()\n })\n .then(response => {\n this.setState({isStoring: false, storeFailure: \"\", storeSuccess: true})\n setTimeout(() => {\n this.setState({storeSuccess: false})\n }, 2000)\n }).catch(e => {\n console.log(\"Baseline storing error\", e)\n this.setState({isStoring: false, storeFailure: e.toString()})\n })\n }\n\n onChangeBaseline = ( baseline ) =>{\n if (baseline === \"antenna\") {\n rxCollectionFormStore.antenna = true\n } else {\n rxCollectionFormStore.antenna = false\n }\n }\n\n render() {\n\n if (this.state.isSettingUp) {\n return (\n
\n ) : (\n \n
\n )}\n Move the receivers and range to their approximate position by dragging the icons in the map view, click on the icons to enter exact values, then click on Apply to store stettings. Scroll down for details.
\n\n \n\n {form.fields.dhcp.value === \"false\" && (\n
\n {networkConfigStore.store()}}\n disabled={!form.meta.isValid || networkConfigStore.isStoring}\n isStoring={networkConfigStore.isStoring}\n storeSuccess={networkConfigStore.storeSuccess}\n storeFailure={networkConfigStore.storeSuccess ? \"\" : networkConfigStore.storeError}\n />\n {networkConfigStore.storeSuccess &&\n
\n )\n }\n}))\n\nclass Network extends Component {\n render() {\n return (\n \n
\n\n
\n )}\n \n
\n
\n
\n If you were connected to the device as a client of the 'UnderwaterGPS'\n WiFi network, this error likely indicates that the device correctly\n disabled the 'UnderwaterGPS' network in favor of attempting to connect\n to the provided network:\n
- \n
- \n If connection to the provided network fails, the device\n should revert back to Access Point mode, and the 'UnderwaterGPS'\n network should reappear.\n \n
- \n If connection to the provided network is successful, the\n device will remain connected as a client to the configured\n network, disabling 'UnderwaterGPS' until it is reactivated\n through the ethernet interface.\n \n
\n The error could also be due to an unexpected problem. Ensure\n you are connected to the device. Consider rebooting. As a\n last resort, reconfigure WiFi through the ethernet\n interface.\n \n )\n}\n\nfunction TimeoutErrorAPMode() {\n return (\n <>\n Request timed out.\n Connection to the backend is lost.\n
\n
\n Ensure you are connected to the device. Consider\n rebooting. As a last resort, reconfigure WiFi through\n the ethernet interface.\n \n )\n}\n\n\nconst WifiConfig = inject(\"wifiConfigStore\")(observer(class WifiForm extends Component {\n componentDidMount() {\n this.props.wifiConfigStore.fetch()\n }\n onChange = (key, val) => {\n this.props.wifiConfigStore.reset(); // Reset check mark on apply button\n this.props.wifiConfigStore.formStore.form.fields.mode.value = val\n }\n\n render() {\n const wifiConfigStore = this.props.wifiConfigStore;\n if (wifiConfigStore.isLoading) {\n return (\n
\n \n\n {wifiConfigStore.store()}}\n disabled={!form.meta.isValid || wifiConfigStore.isStoring}\n isStoring={wifiConfigStore.isStoring}\n storeSuccess={wifiConfigStore.storeSuccess}\n storeFailure={\n wifiConfigStore.storeSuccess ? \"\" : (\n // for some storeErrors we want to show a special\n // component. Otherwise, just show the storeError as-is\n wifiConfigStore.storeError === storeErrorTimeoutClientMode ? (\n // timeout error while trying to set client mode. this will\n // always happen when connected to AP mode and switching to\n // client mode successfully. It may also happen if we fail\n // to connect to the provided network, and the customer's\n // computer doesn't connect to the AP when it is brought up\n // again, quickly enough. Show helpful message for these\n // (expected) cases, that also mentions that something else\n // could have gone wrong..\n
\n )\n }\n}))\n\nclass Wifi extends Component {\n render() {\n return (\n \n {form.fields.mode.value === \"client\" ? (\n
\n \n \n \n \n
\n ) : (\n \n Note:\n The device can act either as an Access Point\n or a Client, not both at the same time.\n Therefore, if you are connected to the\n 'UnderwaterGPS' WiFi, you will be\n disconnected when pressing 'Apply'.\n Without a connection to the device, the\n success or failure of the action cannot be\n determined.\n
\n\n
\n Place the topside housing on the ground and make sure there is no movement.
\nReady?
\n\n
\n Place the topside housing on a flat surface and rotate the sensor slowly around only the Z axis (3 turns)
\nReady?
\nError fetching calibration status
}\n {calibrateInProgress && (\n\n
\n Using a magnetic compass (eg. boat or mobile phone) take a note of the heading of the G2 topside.\n This is the heading of the forward arrow that can be seen on the G2 topside.\n Enter this value and click \"Set current heading\".\n
\n\n The on-board compass can drift 5-20 degrees per hour. To improve the compass heading accuracy:\n set compass heading regularly during operation or alternatively use an external compass.\n
\n\n\n \n
\n \n \n \n
\n )\n}\n\n\nfunction Debug() {\n return (\n \n \n \n \n
{submitMessage}
\n\n {message} {linkToIMU && (
Click to set heading
)}\n {help &&{help}
}\n \n System status\n \n \n {error && (\n \n \n \n \n No connection to Underwater GPS topside\n \n Please check network connection and power.\n \n \n )}\n \n{/*\n \n \n \n
\n )\n}\n\n\nexport { StatusReport }\n","import { extendObservable, computed, observable, action } from 'mobx'\nimport { superFetch } from '../lib/fetch'\n\nclass ReceiverModel {\n constructor(id, x, y, z) {\n extendObservable(this, {\n id: id,\n x: x,\n y: y,\n z: z,\n setX: action((x) => { this.x = x }),\n setY: action((y) => { this.y = y }),\n setZ: action((z) => { this.z = z }),\n setXY: action((x, y) => { this.x = x; this.y = y; }),\n setXYZ: action((x, y, z) => { this.x = x; this.y = y; this.z = z }),\n getX: computed(() => { return parseFloat(this.x)}),\n getY: computed(() => { return parseFloat(this.y)}),\n getZ: computed(() => { return parseFloat(this.z)}),\n isValid: computed(() => {\n let x = parseFloat(this.x);\n let y = parseFloat(this.y);\n let z = parseFloat(this.z);\n return (!isNaN(x + y + z))\n }),\n });\n }\n}\n\nclass ReceiverStore {\n constructor() {\n extendObservable(this, {\n hasLoaded: false,\n isLoading: false,\n isStoring: false,\n receiverRegistry: observable.map(),\n count: computed(() => this.receiverRegistry.size),\n clear: action(() => {\n this.receiverRegistry.clear()\n }),\n addReceiver: action((id, x,y,z) => {\n this.receiverRegistry.set(id, new ReceiverModel(id, x,y,z))\n }),\n get: (id) => { return this.receiverRegistry.get(id) },\n all: computed(() => this.receiverRegistry.values()),\n });\n }\n fetch() {\n this.isLoading = true\n return superFetch('/api/v1/config/receivers/')\n .then((data) => {\n this.hasLoaded = true\n this.isLoading = false\n this.loadingError = \"\"\n this.receiverRegistry.clear()\n data.forEach(d => {\n let model = new ReceiverModel(d.id, d.x, d.y, d.z)\n this.receiverRegistry.set(d.id, model)\n })\n })\n .catch((e) => {\n this.isLoading = false\n this.loadingError = e.toString()\n })\n }\n store() {\n this.isStoring = true\n let all = this.receiverRegistry.values().map(rx => {\n if (!rx.isValid) {\n throw Error(\"Invalid\", rx)\n }\n let data = { id: rx.id, x: rx.getX, y: rx.getY, z: rx.getZ }\n console.log(\"Storing receiver\", rx.id, \"data\", data)\n let url = `/api/v1/config/receivers/${rx.id}`\n var headers = {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n }\n return fetch(url, {\n method: 'PUT',\n headers: headers,\n body: JSON.stringify(data)\n }).then(response => {\n if (response.status !== 204) {\n throw Error(\"Unable to store\")\n }\n })\n })\n return Promise.all(all)\n .then(response => {\n this.isStoring = false;\n return response\n }).catch(e => {\n this.isStoring = false;\n throw e\n })\n }\n\n}\n\nexport { ReceiverStore }\n","import { extendObservable } from 'mobx'\nimport { superFetch } from '../lib/fetch'\n\nclass AntennaStore {\n constructor() {\n extendObservable(this, {\n hasLoaded: false,\n isLoading: false,\n isStoring: false,\n x: 1,\n y: 2,\n depth: 1.5,\n rotation: 90,\n\n /*receiverRegistry: observable.map(),\n count: computed(() => this.receiverRegistry.size),\n clear: action(() => {\n this.receiverRegistry.clear()\n }),\n addReceiver: action((id, x,y,z) => {\n this.receiverRegistry.set(id, new ReceiverModel(id, x,y,z))\n }),\n get: (id) => { return this.receiverRegistry.get(id) },\n all: computed(() => this.receiverRegistry.values()),*/\n\n });\n }\n fetch() {\n this.isLoading = true\n return superFetch('/api/v1/config/antenna')\n .then((data) => {\n this.hasLoaded = true\n this.isLoading = false\n this.loadingError = \"\"\n this.x = data.x\n this.y = data.y\n this.depth = data.depth\n this.rotation = data.antenna_rotation\n })\n .catch((e) => {\n this.isLoading = false\n this.loadingError = e.toString()\n console.log(\"Error loading antenna config: \", e.toString())\n })\n }\n store() {\n this.isStoring = true\n let data = {\n x: this.x,\n y: this.y,\n depth: this.depth,\n antenna_rotation: this.rotation,\n }\n console.log(\"Storing antenna config: \", data)\n var headers = {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n }\n return fetch('/api/v1/config/antenna', {\n method: 'PUT',\n headers: headers,\n body: JSON.stringify(data)\n })\n .then(response => {\n if (!response.ok) {\n throw Error(response.statusText)\n }\n return response\n })\n .then(response => response.text())\n .then(response => {\n console.log(\"stored\", response)\n this.isStoring = false;\n this.storeError = \"\";\n return response\n })\n .catch((e) => {\n console.log(\"store error\", e.toString())\n this.isStoring = false;\n this.storeError = e.toString()\n throw e;\n })\n }\n\n}\n\nexport { AntennaStore }\n","import { extendObservable, computed, action } from \"mobx\"\nimport { superFetch } from '../lib/fetch'\n\nconst MaxRangeDistance = 100\n\nclass RangeStore {\n constructor() {\n extendObservable(this, {\n isLoading: false,\n radius: parseInt(process.env.REACT_APP_UGPS_MAX_RANGE),\n direction: 340,\n sector: 90,\n getCircularRanges: action(() => {\n return {x: {min: -this.radius, max: this.radius}, y: {min: -this.radius, max: this.radius}}\n }),\n });\n }\n}\n\n\nclass GenericConfigStore {\n constructor(min, max) {\n extendObservable(this, {\n hasLoaded: false,\n isLoading: false,\n loadingError: \"\",\n isStoring: false,\n storingError: \"\",\n locator_type: \"u1\",\n channel: 5017,\n environment: \"reflective\",\n vehicle_imu: \"disabled\",\n external_pps: \"disabled\",\n antenna: \"enabled\",\n compass: \"static\",\n gps: \"static\",\n static_lat: 63.422,\n static_lon: 10.424,\n static_orientation: 42,\n speed_of_sound: \"1475\",\n ranges: new RangeStore(),\n isOnboardGPS: computed(() => this.gps === \"onboard\"),\n isOnboardIMU: computed(() => this.compass === \"onboard\"),\n fetch: () => {\n this.isLoading = true\n return superFetch('/api/v1/config/generic')\n .then((data) => {\n this.hasLoaded = true\n this.fromTransportArray(data)\n this.isLoading = false\n this.loadingError = \"\"\n })\n .catch((e) => {\n this.isLoading = false\n this.loadingError = e.toString()\n })\n },\n fromTransportArray: (data) => {\n this.locator_type = data.locator_type\n this.channel = data.channel\n this.compass = data.compass\n this.static_orientation = data.static_orientation\n this.gps = data.gps\n this.static_lat = data.static_lat\n this.static_lon = data.static_lon\n this.speed_of_sound = data.speed_of_sound.toString()\n this.vehicle_imu = data.imu_vehicle_enabled ? \"enabled\" : \"disabled\"\n this.external_pps = data.external_pps_enabled ? \"enabled\" : \"disabled\"\n this.antenna = data.antenna_enabled ? \"enabled\" : \"disabled\"\n this.environment = data.environment\n this.ranges.radius = data.search_radius\n this.ranges.direction = data.search_direction\n this.ranges.sector = data.search_sector\n },\n toTransportArray: () => {\n return {\n locator_type: this.locator_type,\n channel: this.channel,\n imu_vehicle_enabled: (this.vehicle_imu === \"enabled\"),\n external_pps_enabled: (this.external_pps === \"enabled\"),\n antenna_enabled: (this.antenna === \"enabled\"),\n environment: this.environment,\n gps: this.gps,\n compass: this.compass,\n static_lat: this.static_lat,\n static_lon: this.static_lon,\n speed_of_sound: parseInt(this.speed_of_sound),\n static_orientation: this.static_orientation,\n search_radius: this.ranges.radius,\n search_direction: this.ranges.direction,\n search_sector: this.ranges.sector,\n // legacy\n range_min_x: 0,\n range_min_y: 0,\n range_max_x: 0,\n range_max_y: 0,\n range_max_z: 0,\n }\n },\n store: () => {\n this.isStoring = true\n let data = this.toTransportArray()\n var headers = {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n }\n return fetch('/api/v1/config/generic', {\n method: 'PUT',\n headers: headers,\n body: JSON.stringify(data)\n })\n .then(response => {\n if (!response.ok) {\n throw Error(response.statusText)\n }\n return response\n })\n .then(response => response.text())\n .then(response => {\n console.log(\"stored\", response)\n this.isStoring = false;\n this.storeError = \"\";\n return response\n })\n .catch((e) => {\n console.log(\"store error\", e.toString())\n this.isStoring = false;\n this.storeError = e.toString()\n throw e;\n })\n },\n })\n }\n}\n\nexport { RangeStore, GenericConfigStore, MaxRangeDistance }\n","import { extendObservable, computed, observable, action } from \"mobx\"\nimport { IsDefinedFinite, GetArrayIndexOrFallback, GetChannelName, NoValue } from '../lib/format'\nimport { GetIcon, GetColor } from '../lib/markerIcon'\n\n\nclass PositionList {\n constructor() {\n extendObservable(this, {\n positions: observable.array(),\n add: action((data) => {\n this.positions.push({data: data, ts: Date.now()})\n if (this.positions.length > 4*60*5) { // 5 min trail length (4 times a second)\n this.positions.shift()\n }\n }),\n all: computed(() => this.positions.peek().map(d => d.data)),\n getLatest: (trailLength) => {\n const startts = Date.now() - trailLength*1000\n const values = this.positions.peek()\n return values.filter(d => d.ts > startts)\n },\n getXY: (trailLength) => {\n const latest = this.getLatest(trailLength)\n return latest.map(d => [d.data.x, d.data.y])\n },\n getLatLng: (trailLength) => {\n const latest = this.getLatest(trailLength)\n return latest.map(d => [d.data.lat, d.data.lng])\n },\n })\n }\n}\n\nclass MasterPositionStore {\n constructor() {\n extendObservable(this, {\n isLoading: false,\n loadingError: \"\",\n lat: 0,\n lng: 0,\n cog: -1,\n hdop: -1,\n numsats: -1,\n sog: -1,\n orientation: 0,\n latlng: computed(() => [this.lat, this.lng]),\n positions: new PositionList(),\n setFromWs: action((data) => {\n // Set data but guard against missing values\n // WARNING: data.lon rewritten to this.lng\n if (IsDefinedFinite(data, \"lat\")) { this.lat = data.lat }\n if (IsDefinedFinite(data, \"lon\")) { this.lng = data.lon }\n if (IsDefinedFinite(data, \"cog\")) { this.cog = data.cog }\n if (IsDefinedFinite(data, \"hdop\")) { this.hdop = data.hdop }\n if (IsDefinedFinite(data, \"numsats\")) { this.numsats = data.numsats }\n if (IsDefinedFinite(data, \"sog\")) { this.sog = data.sog }\n if (IsDefinedFinite(data, \"orientation\")) { this.orientation = data.orientation }\n\n const validPos = IsDefinedFinite(data, \"lat\") && IsDefinedFinite(data, \"lon\")\n if (validPos) {\n this.positions.add({lat: this.lat, lng: this.lng})\n }\n }),\n setNoValue: action(() => {\n this.lat = NoValue\n this.lng = NoValue\n this.cog = NoValue\n this.hdop = NoValue\n this.numsats = NoValue\n this.sog = NoValue\n this.orientation = NoValue\n }),\n })\n }\n}\n\nclass GlobalPositionStore {\n constructor() {\n extendObservable(this, {\n isLoading: false,\n loadingError: \"\",\n lat: 0,\n lng: 0,\n cog: -1,\n hdop: -1,\n numsats: -1,\n sog: -1,\n orientation: 0,\n position_valid: false,\n position_invalid_count: 0,\n update: 0,\n positions_dict: {},\n getShow: (key) => {\n return this.positions_dict[key].show\n },\n setShow: action((key, value) => {\n this.update += 1\n this.positions_dict[key].show = value\n }),\n setFromWsDict: action((data, channel) => {\n this.update += 1\n var chName = GetChannelName(channel)\n if (!(chName in this.positions_dict)) {\n this.positions_dict[chName] = {\n lat: 0,\n lng: 0,\n cog: -1,\n hdop: -1,\n numsats: -1,\n sog: -1,\n orientation: 0,\n positions: new PositionList(),\n name: chName,\n color: GetColor(chName),\n icon: GetIcon(chName),\n show: true,\n }\n }\n\n // Set data but guard against missing values\n // WARNING: data.lon rewritten to this.lng\n if (IsDefinedFinite(data, \"lat\")) { this.positions_dict[chName].lat = data.lat }\n if (IsDefinedFinite(data, \"lon\")) { this.positions_dict[chName].lng = data.lon }\n if (IsDefinedFinite(data, \"cog\")) { this.positions_dict[chName].cog = data.cog }\n if (IsDefinedFinite(data, \"hdop\")) { this.positions_dict[chName].hdop = data.hdop }\n if (IsDefinedFinite(data, \"numsats\")) { this.positions_dict[chName].numsats = data.numsats }\n if (IsDefinedFinite(data, \"sog\")) { this.positions_dict[chName].sog = data.sog }\n if (IsDefinedFinite(data, \"orientation\")) { this.positions_dict[chName].orientation = data.orientation }\n\n if (chName === \"filtered\"){\n // Set data but guard against missing values\n // WARNING: data.lon rewritten to this.lng\n if (IsDefinedFinite(data, \"lat\")) { this.lat = data.lat }\n if (IsDefinedFinite(data, \"lon\")) { this.lng = data.lon }\n if (IsDefinedFinite(data, \"cog\")) { this.cog = data.cog }\n if (IsDefinedFinite(data, \"hdop\")) { this.hdop = data.hdop }\n if (IsDefinedFinite(data, \"numsats\")) { this.numsats = data.numsats }\n if (IsDefinedFinite(data, \"sog\")) { this.sog = data.sog }\n if (IsDefinedFinite(data, \"orientation\")) { this.orientation = data.orientation }\n }\n\n this.position_valid = data.position_valid\n if (this.position_valid) {\n this.position_invalid_count = 0\n } else {\n this.position_invalid_count += 1\n }\n const validPos = IsDefinedFinite(data, \"lat\") && IsDefinedFinite(data, \"lon\")\n if (validPos && this.position_valid) {\n this.positions_dict[chName].positions.add({lat: this.positions_dict[chName].lat, lng: this.positions_dict[chName].lng})\n }\n }),\n setNoValue: action(() => {\n this.lat = 0\n this.lng = 0\n this.cog = NoValue\n this.hdop = NoValue\n this.numsats = NoValue\n this.sog = NoValue\n this.orientation = NoValue\n this.position_valid = false\n this.position_invalid_count = 10\n }),\n })\n }\n}\n\n\nclass AcousticPositionStore {\n constructor() {\n extendObservable(this, {\n isLoading: false,\n loadingError: \"\",\n x: 0,\n y: 0,\n z: 0,\n std: NoValue,\n position_valid: false,\n position_invalid_count: 0,\n update: 0,\n\n positions_dict: {},\n\n receiver_distance: [NoValue, NoValue, NoValue, NoValue],\n receiver_rssi: [NoValue, NoValue, NoValue, NoValue],\n receiver_nsd: [NoValue, NoValue, NoValue, NoValue],\n receiver_valid: [false, false, false, false],\n getDiag: () => {\n return [0, 1, 2, 3].map(d => {\n // Check for undefined as we are assuming 4 entries here\n return {\n id: d,\n distance: GetArrayIndexOrFallback(this.receiver_distance, d, NoValue),\n rssi: GetArrayIndexOrFallback(this.receiver_rssi, d, NoValue),\n nsd: GetArrayIndexOrFallback(this.receiver_nsd, d, NoValue),\n valid: GetArrayIndexOrFallback(this.receiver_valid, d, false),\n }\n })\n },\n getShow: (key) => {\n return this.positions_dict[key].show\n },\n setShow: action((key, value) => {\n this.update += 1\n this.positions_dict[key].show = value\n }),\n setNoValue: action(() => {\n this.x = NoValue\n this.y = NoValue\n this.z = NoValue\n this.std = NoValue\n this.position_valid = false\n this.position_invalid_count = 10\n this.receiver_distance = [NoValue, NoValue, NoValue, NoValue]\n this.receiver_rssi = [NoValue, NoValue, NoValue, NoValue]\n this.receiver_nsd = [NoValue, NoValue, NoValue, NoValue]\n this.receiver_valid = [false, false, false, false]\n\n for (let chName in this.positions_dict) {\n this.positions_dict[chName].position_valid = false\n this.positions_dict[chName].position_invalid_count = 10\n }\n this.update += 1\n }),\n setFromWsDict: action((data, channel) => {\n this.update += 1\n var chName = GetChannelName(channel)\n if (!(chName in this.positions_dict)) {\n this.positions_dict[chName] = {\n x: 0,\n y: 0,\n z: 0,\n std: NoValue,\n position_valid: false,\n position_invalid_count: 0,\n positions: new PositionList(),\n name: chName,\n color: GetColor(chName),\n icon: GetIcon(chName),\n show: true,\n }\n\n }\n\n this.positions_dict[chName].position_valid = (data.position_valid ? true : false)\n\n if (chName === \"filtered\") {\n const t = data.receivers\n for (let i=0; i<4; i++) {\n this.receiver_distance[i] = t[i].recv_distance || 0\n this.receiver_nsd[i] = t[i].recv_nsd_db ||0\n this.receiver_rssi[i] = t[i].recv_rssi || 0\n this.receiver_valid[i] = t[i].recv_valid ? true : false\n }\n\n if (IsDefinedFinite(data, \"xPos\")) {this.x = data.xPos}\n if (IsDefinedFinite(data, \"yPos\")) {this.y = data.yPos}\n if (IsDefinedFinite(data, \"zPos\")) {this.z = data.zPos}\n if (IsDefinedFinite(data, \"std\")) {this.std = data.std}\n this.position_valid = (data.position_valid ? true : false)\n\n if (data.position_valid) {\n // Reset position invalid\n this.position_invalid_count = 0\n } else {\n // Increase invalid count for visualization\n this.position_invalid_count = this.position_invalid_count+1\n }\n }\n if (this.positions_dict[chName].position_valid) {\n // Only add positions to map if it is valid\n this.positions_dict[chName].position_invalid_count = 0\n if (IsDefinedFinite(data, \"xPos\")) {this.positions_dict[chName].x = data.xPos}\n if (IsDefinedFinite(data, \"yPos\")) {this.positions_dict[chName].y = data.yPos}\n if (IsDefinedFinite(data, \"zPos\")) {this.positions_dict[chName].z = data.zPos}\n if (IsDefinedFinite(data, \"std\")) {this.positions_dict[chName].std = data.std}\n this.positions_dict[chName].positions.add({x: this.positions_dict[chName].x, y: this.positions_dict[chName].y, z: this.positions_dict[chName].z})\n } else {\n // Increase invalid count for visualization\n this.positions_dict[chName].position_invalid_count = this.positions_dict[chName].position_invalid_count+1\n }\n }),\n })\n }\n}\n\nexport { MasterPositionStore, GlobalPositionStore, AcousticPositionStore }\n","import { extendObservable } from \"mobx\"\nimport { superFetch } from '../lib/fetch'\n\n\nclass GPSIMUStatusStore {\n constructor() {\n extendObservable(this, {\n isLoading: false,\n loadingError: \"\",\n gps: 0,\n imu: 0,\n battery: -1,\n })\n }\n fetch() {\n this.isLoading = true\n superFetch('/api/v1/about/status')\n .then((data) => {\n this.imu = data.imu\n this.gps = data.gps\n this.battery = data.battery\n this.loadingError = \"\"\n })\n .catch((e) => { \n this.isLoading = false\n this.loadingError = e.toString()\n })\n }\n}\n\nexport { GPSIMUStatusStore }\n","import { extendObservable, action, computed } from 'mobx'\nimport { persist, create } from 'mobx-persist'\n\nclass UnitConverter {\n nameShort = () => {\n return this.shortName\n }\n // to User Preferred Short distance unit\n toUPShortFromMetric = (value) => {\n return value * this.shortFactor\n }\n // to Metric from User Preferred Short\n toMetricFromUPShort = (value) => {\n return value / this.shortFactor\n }\n nameLong = () => {\n return this.longName\n }\n // to User Preferred Long distance unit\n toUPLongFromMetric = (value) => {\n return value * this.longFactor\n }\n // to Metric from User Preferred Long\n toMetricFromUPLong = (value) => {\n return value / this.longFactor\n }\n isMetric = true\n // Default grid increments\n gridIncrements = [20, 10, 5, 2, 1, 0.5]\n gridSize = (longestSide) => {\n let selected = this.gridIncrements[0]\n this.gridIncrements.forEach(increment => {\n if ((longestSide / increment) <= 20) {\n selected = increment\n return true\n }\n });\n return selected\n }\n // to User preferred temperature unit\n metricToUPTemperature = (value) => {\n return value;\n }\n}\n\nclass MetricUnitConverter extends UnitConverter {\n constructor() {\n super()\n this.name = \"metric\"\n this.shortFactor = 1\n this.shortName = \"meters\"\n this.longFactor = 1\n this.longName = \"meters\"\n this.temperatureSymbol = \"C\"\n this.isMetric = true\n }\n}\n\nclass ImperialUnitConverter extends UnitConverter {\n constructor() {\n super()\n this.name = \"imperial\"\n this.shortFactor = 39.3700787\n this.shortName = \"inches\"\n this.longFactor = 3.2808399\n this.longName = \"feet\"\n this.temperatureSymbol = \"F\"\n this.isMetric = false\n // Grid increments in feet\n this.gridIncrements = [100, 40, 20, 10, 5, 3].map(d => this.toMetricFromUPLong(d))\n }\n\n metricToUPTemperature = (value) => {\n return value * 9/5 + 32\n }\n}\n\n\nclass UserPreferenceStore {\n constructor() {\n extendObservable(this, {\n unit: \"metric\",\n boatVisible: true,\n latLngVisible: false,\n setUnit: action((unit) => {\n if (unit === 'imperial') {\n this.unit = 'imperial'\n return\n }\n this.unit = 'metric'\n }),\n setBoatVisibility: action((visible) => {\n this.boatVisible = visible\n }),\n converter: computed(() => {\n if (this.unit === \"imperial\") {\n return new ImperialUnitConverter()\n }\n return new MetricUnitConverter()\n }),\n getGridSize: (longestSize) => {\n return this.converter.gridSize(longestSize)\n },\n setLatLngVisible: action((visible) => {\n this.latLngVisible = visible\n })\n })\n }\n}\n\nconst schema = {\n unit: true,\n boatVisible: true,\n latLngVisible: true,\n}\n\nfunction newPreferenceStore(storage) {\n const store = persist(schema)(new UserPreferenceStore())\n\n const hydrate = create({storage: storage})\n hydrate('preferences', store)\n /*\n .then(() => {\n console.log('Loaded preferences')\n })\n */\n return store\n}\n\n\nexport { newPreferenceStore };\n","import { superFetch, superFetchHeaders } from '../lib/fetch'\nimport { extendObservable, action, computed } from 'mobx';\n\nclass VersionStore {\n constructor() {\n extendObservable(this, {\n loading: true,\n error: \"\",\n hasChecked: false,\n isLatest: true,\n latestRelease: \"\",\n url: \"\",\n updateAvailable: computed(() => {\n return this.hasChecked && !this.isLatest\n }),\n fetch: action((chipid, version) => {\n //const baseUrl = \"http://127.0.0.1:8080\"\n const baseUrl = \"https://update.waterlinked.com\"\n return superFetchHeaders(`${baseUrl}/api/v1/latest`, \"POST\", {\n chipid: chipid,\n current: version,\n })\n .then(response => {\n if (!response.ok) {\n throw Error(response.statusText)\n }\n return response\n })\n .then(response => { return response.json() })\n .then(data => {\n var url = data.url\n if (url[0] === \"/\") {\n url = baseUrl + url\n }\n this.isLatest = data.is_latest\n this.latestRelease = data.latest_release\n this.url = url\n this.loading = false\n this.error = \"\"\n this.hasChecked = true\n }).catch(err => {\n this.loading = false\n this.error = \"Request failed \" + err.toString()\n this.hasChecked = true\n })\n })\n })\n }\n}\n\nclass AboutInfoStore {\n constructor() {\n extendObservable(this, {\n loading: true,\n error: \"\",\n version: \"unknown\",\n versionShort: \"unknown\",\n hasVersionShort: computed(() => {\n return this.versionShort !== \"unknown\"\n }),\n chipid: \"unknown\",\n versionStore: new VersionStore(),\n fetch: action(() => {\n this.loading = true\n return superFetch('/api/v1/about')\n .then(data => {\n this.chipid = data[\"chipid\"]\n this.version = data[\"version\"]\n this.versionShort = data[\"version_short\"]\n this.loading = false\n this.error = \"\"\n return this.versionStore.fetch(this.chipid, this.versionShort)\n })\n .catch(err => {\n this.loading = false\n this.error = \"Request failed \" + err.toString()\n })\n })\n })\n }\n}\n\nexport { AboutInfoStore, VersionStore }","import { extendObservable, action } from \"mobx\"\nimport { superFetch } from '../lib/fetch'\n\nclass LocatorOrientation {\n constructor() {\n extendObservable(this, {\n loadingError: \"\",\n orientation: -1,\n\n setFromWs: action((data) => {\n this.orientation = data.orientation\n }),\n setNoValue: action(() => {\n this.orientation = -1\n })\n })\n }\n fetch() {\n return superFetch('/api/v1/external/orientation')\n .then((data) => {\n this.orientation = data.orientation\n this.loadingError = \"\"\n })\n .catch((e) => {\n this.loadingError = e.toString()\n })\n }\n}\n\n\nexport { LocatorOrientation }","import { extendObservable, computed } from 'mobx'\nimport { GenericFormStore } from './FormStore'\nimport { rules } from '../../lib/validator'\n\nclass PointOfInterestItemFormStore extends GenericFormStore {\n constructor(id, lat, lng, depth, name, icon) {\n super()\n extendObservable(this, {\n id: id,\n form: {\n fields: {\n lat: {\n value: lat,\n error: null,\n rule: [rules.between(-90, 90)],\n },\n lng: {\n value:lng,\n error: null,\n rule: [rules.between(-180, 180)],\n },\n depth: {\n value: depth,\n error: null,\n rule: [rules.between(0, 100)],\n },\n name: {\n value: name,\n error: null,\n rule: [rules.string()],\n },\n icon: {\n value: icon,\n error: null,\n rule: [rules.string()],\n },\n visible: {\n value: true,\n error: null,\n rule: [],\n },\n },\n meta: {\n isValid: true,\n error: null,\n unitName: \"meter\",\n unitFactor: 1.0,\n unitDecimals: 2,\n },\n },\n latlng: computed(() => {\n const lat = this.getAbsolute(\"lat\")\n const lng = this.getAbsolute(\"lng\")\n return {lat: isNaN(lat) ? 0 : lat, lng: isNaN(lng) ? 0 : lng}\n }),\n json: computed(() => {\n return {\n \"name\": this.form.fields.name.value,\n \"lat\": this.getAbsolute(\"lat\"),\n \"lng\": this.getAbsolute(\"lng\"),\n \"depth\": this.getAbsoluteMetric(\"depth\"),\n \"icon\": this.form.fields.icon.value,\n \"visible\": this.form.fields.visible.value,\n }\n }),\n isEditing: false,\n isLoading: false,\n errorUpdate: \"\",\n errorDelete: \"\",\n })\n }\n}\n\nexport { PointOfInterestItemFormStore }\n\n","import { extendObservable, action, observable, computed } from 'mobx'\nimport { PointOfInterestItemFormStore } from './FormStores/PointOfInteres'\nimport { superFetch, superFetchHeaders } from '../lib/fetch'\n\nclass PointsOfInterestStore {\n constructor() {\n extendObservable(this, {\n points: observable.map(),\n add: action((id, lat, lng, depth, name=null, icon=null) => {\n this.points.set(id, new PointOfInterestItemFormStore(id, lat, lng, depth, name, icon))\n }),\n delete: action((id) => {\n this.points.delete(id)\n }),\n count: computed(() => this.points.size),\n get: (id) => { return this.points.get(id) },\n getVisible: computed(() => this.points.values().filter(d => d.form.fields.visible.value)),\n all: computed(() => this.points.values()),\n newestFirst: computed(() => this.all.reverse()),\n isFetching: false,\n errorFetchMsg: \"\",\n errorAddMsg: \"\",\n getHref: (id) => {\n return '/api/v1/poi/'+id\n },\n addPersistent: action((lat, lng, depth, name=null, icon=null, startEdit=false) => {\n const _name = name || \"POI \" + (this.count+1)\n const _icon = icon || \"anchor\"\n let data = {\n \"name\": _name,\n \"lat\": lat,\n \"lng\": lng,\n \"depth\": depth,\n \"icon\": _icon,\n \"visible\": true\n }\n this.errorAddMsg = \"\"\n return superFetchHeaders(this.getHref(\"\"), 'POST', data)\n .then(response => {\n if (response.status === 201) {\n return superFetchHeaders(response.headers.get('Location'))\n }\n else if (response.status === 403) {\n throw Error(\n \"Unable to add POI. You have exceeded maximum number of POIs.\" +\n \"Please delete a point before adding a new.\"\n )\n }\n else {\n throw Error(\"Unable to add POI: \" + response.statusText)\n }\n })\n .then (response => {\n if (response.status !== 200){\n throw Error(\"Unable to fetch newly added POI: \" + response.statusText)\n }\n return response\n })\n .then(response => { return response.json() })\n .then(data => {\n this.add(data.id, data.lat, data.lng, data.depth, data.name, data.icon)\n if (startEdit) {\n this.get(data.id).isEditing = true\n }\n this.errorAddMsg = \"\"\n })\n .catch(err => {\n this.errorAddMsg = err.toString()\n })\n }),\n updatePersistent: action((id) => {\n let point = this.get(id)\n point.isLoading = true\n point.errorUpdate = \"\"\n return superFetchHeaders(this.getHref(id), 'PATCH', point.json)\n .then(response => {\n if (response.status !== 204) {\n throw Error(\"Unable to update POI: \" + response.statusText)\n }\n point.isEditing = false\n point.isLoading = false\n point.errorUpdate = \"\"\n })\n .catch(err => {\n point.isEditing = true\n point.isLoading = false\n point.errorUpdate = err.toString()\n setTimeout(() => {\n point.errorUpdate = \"\"\n }, 3000)\n })\n }),\n deletePersistent: action((id) => {\n let point = this.get(id)\n point.isLoading = true\n point.errorDelete = \"\"\n return superFetchHeaders(this.getHref(id), 'DELETE')\n .then(response => {\n if (response.status !== 204) {\n throw Error(\"Unable to delete POI: \" + response.statusText)\n }\n this.delete(id)\n point.isLoading = false\n point.errorDelete = \"\"\n })\n .catch(err => {\n point.isLoading = false\n point.errorDelete = err.toString()\n setTimeout(() => {\n point.errorDelete = \"\"\n }, 3000)\n })\n }),\n fetch: action(() => {\n this.isFetching = true\n this.errorFetchMsg = \"\"\n return superFetch(this.getHref(\"\"))\n .then((data) => {\n data.forEach(d => {\n this.add(d.id, d.lat, d.lng, d.depth, d.name, d.icon)\n })\n this.errorFetchMsg = \"\"\n this.isFetching = false\n })\n .catch(err => {\n this.errorFetchMsg = err.toString()\n this.isFetching = false\n })\n }),\n })\n }\n}\n\nexport default PointsOfInterestStore\n\n","import { extendObservable } from 'mobx'\nimport { GenericFormStore } from './FormStore'\nimport { rules } from '../../lib/validator'\n\nclass NetworkConfigFormStore extends GenericFormStore {\n constructor() {\n super()\n extendObservable(this, {\n form: {\n fields: {\n address: {\n value: \"10.11.12.95\",\n error: null,\n rule:[rules.string()],\n },\n prefix: {\n value: 24,\n error: null,\n rule: [rules.between(1, 31)],\n },\n gateway: {\n value: \"10.11.12.1\",\n error: null,\n rule: [rules.string()],\n },\n dns: {\n value: \"10.11.12.1\",\n error: null,\n rule: [rules.string()],\n },\n dhcp: {\n value: \"true\",\n error: null,\n rule: [rules.string()],\n },\n },\n meta: {\n isValid: true,\n error: null,\n },\n },\n error: \"\",\n })\n }\n}\n\nexport { NetworkConfigFormStore }\n","import { extendObservable } from 'mobx'\nimport { NetworkConfigFormStore } from './FormStores/NetworkConfig'\nimport axios from 'axios'\n\nclass NetworkConfigStore {\n constructor() {\n extendObservable(this, {\n formStore: new NetworkConfigFormStore(),\n loadSuccess: false,\n isLoading: false,\n isStoring: false,\n storeSuccess: false,\n loadingError: \"\",\n storeError: \"\",\n });\n }\n fetch() {\n this.isLoading = true\n axios.get('/api/v1/config/ip')\n .then((response) => {\n this.loadSuccess = true\n this.isLoading = false\n this.loadingError = \"\"\n this.formStore.form.fields.address.value = response.data.address\n this.formStore.form.fields.prefix.value = response.data.prefix\n this.formStore.form.fields.gateway.value = response.data.gateway\n this.formStore.form.fields.dns.value = response.data.dns\n this.formStore.form.fields.dhcp.value = response.data.dhcp ? \"true\" : \"false\"\n })\n .catch((e) => {\n this.loadSuccess = false\n this.isLoading = false\n this.loadingError = e.toString()\n console.log(this.loadingError)\n })\n\n }\n store() {\n this.isStoring = true\n let data = {\n \"address\": this.formStore.form.fields.address.value,\n \"prefix\": parseInt(this.formStore.form.fields.prefix.value,10),\n \"gateway\": this.formStore.form.fields.gateway.value,\n \"dns\": this.formStore.form.fields.dns.value,\n \"dhcp\": this.formStore.form.fields.dhcp.value === \"true\",\n }\n axios.put('/api/v1/config/ip', data)\n .then(response => {\n if (!response.data.success) {\n // Get error message from \"error\" field of the JSON and pass on\n throw new Error(response)\n }\n return response\n })\n .then(response => {\n console.log(\"stored\", response);\n this.storeSuccess = true;\n this.isStoring = false;\n this.storeError = \"\";\n return response\n })\n .catch((e) => {\n console.log(\"store error\", e.response.data.detail.toString());\n this.isStoring = false;\n this.storeSuccess = false;\n this.storeError = e.response.data.detail.toString()\n })\n }\n}\n\nexport default NetworkConfigStore\n","import { extendObservable } from 'mobx'\nimport { superFetch } from '../lib/fetch'\n\n\nclass TemperatureStore {\n constructor() {\n extendObservable(this, {\n isLoading: false,\n loadingError: \"\",\n board: -271,\n water: -271,\n })\n }\n fetch() {\n this.isLoading = true\n superFetch('/api/v1/about/temperature')\n .then((data) => {\n this.board = parseFloat(data.board)\n this.water = parseFloat(data.water)\n })\n .catch((e) => {\n this.isLoading = false\n this.loadingError = e.toString()\n })\n }\n}\n\nexport default TemperatureStore\n","import { extendObservable, action } from 'mobx';\n\nclass WSStatusStore {\n constructor() {\n extendObservable(this, {\n connected: false,\n error: \"\",\n setConnected: action((is_connected) => {\n this.connected = is_connected\n }),\n })\n }\n}\n\nexport default WSStatusStore\n","function wsUrl() {\n if (process.env.REACT_APP_DEVMODE === \"true\") {\n // Somehow the websocket proxy in setupProxy.js is not working.\n // This workaround is needed until that is fixed.\n return \"ws://127.0.0.1:8080/ws\"\n }\n const proto = window.location.protocol === \"https:\" ? \"wss://\" : \"ws://\"\n return proto + window.location.host + \"/ws\"\n}\n\nexport default wsUrl\n","import { ReceiverStore } from './Receivers'\nimport { AntennaStore } from './Antenna'\nimport { GenericConfigStore } from './GenericConfig'\nimport { MasterPositionStore, GlobalPositionStore, AcousticPositionStore } from './Positions'\nimport { GPSIMUStatusStore } from './Status'\nimport { newPreferenceStore } from './Preferences'\nimport { AboutInfoStore } from './Version'\nimport { LocatorOrientation } from './LocatorOrientation'\nimport PointOfInterestStore from './PointOfInterest'\nimport NetworkConfigStore from './NetworkConfig'\nimport WifiConfigStore from './WifiConfig'\nimport TemperatureStore from './Temperature'\nimport WSStatusStore from './WSStatusStore'\nimport ReconnectingWebSocket from 'reconnecting-websocket';\nimport wsUrl from '../lib/ws'\n\nexport default function initStores() {\n const genericConfigStore = new GenericConfigStore()\n genericConfigStore.fetch()\n\n const rxStore = new ReceiverStore()\n rxStore.fetch()\n\n const antennaStore = new AntennaStore()\n antennaStore.fetch()\n\n setInterval(() => {\n genericConfigStore.fetch()\n rxStore.fetch()\n antennaStore.fetch()\n }, 15000)\n\n const pointOfInterestStore = new PointOfInterestStore()\n pointOfInterestStore.fetch()\n\n const gpsimuStore = new GPSIMUStatusStore()\n gpsimuStore.fetch()\n setInterval(() => {\n gpsimuStore.fetch()\n }, 1000)\n\n const aboutInfoStore = new AboutInfoStore()\n setTimeout(() => {\n aboutInfoStore.fetch()\n }, 500)\n\n const temperatureStore = new TemperatureStore()\n temperatureStore.fetch()\n setInterval(() => {\n temperatureStore.fetch()\n }, 7000)\n\n\n const acousticPositionStore = new AcousticPositionStore()\n const fusionPositionStore = new AcousticPositionStore()\n const masterPositionStore = new MasterPositionStore()\n const globalPositionStore = new GlobalPositionStore()\n\n const locatorOrientationStore = new LocatorOrientation()\n const networkConfigStore = new NetworkConfigStore()\n const wifiConfigStore = new WifiConfigStore()\n const connectionStatusStore = new WSStatusStore()\n\n const preferenceStore = newPreferenceStore(localStorage)\n\n var timeoutGlobalHandle\n var timeoutAcosticHandle\n var timeoutOrientation\n\n function globalTimeoutFunc() {\n globalPositionStore.setNoValue()\n }\n\n function acousticTimeoutFunc() {\n acousticPositionStore.setNoValue()\n }\n\n function orientationTimeoutFunc() {\n locatorOrientationStore.setNoValue()\n }\n\n\n function updateStoresFromWS() {\n const url = wsUrl()\n const socket = new ReconnectingWebSocket(url)\n socket.onopen = () => {\n connectionStatusStore.setConnected(true)\n console.log(\"store ws open\")\n }\n socket.onclose = () => {\n connectionStatusStore.setConnected(false)\n console.log(\"store ws close\")\n masterPositionStore.setNoValue()\n globalPositionStore.setNoValue()\n acousticPositionStore.setNoValue()\n }\n socket.onmessage = (e) => {\n const json = (function(raw) {\n try {\n return JSON.parse(raw);\n } catch (err) {\n return false;\n }\n })(e.data);\n if (!json) {\n return\n }\n if (json.channel === \"position:relative:filtered\") {\n acousticPositionStore.setFromWsDict(json.payload, json.channel)\n\n if (timeoutAcosticHandle) {\n clearTimeout(timeoutAcosticHandle)\n }\n timeoutAcosticHandle = setTimeout(acousticTimeoutFunc, 5000)\n }\n if (json.channel === \"position:relative:raw\") {\n //console.count(\"ws store raw\")\n acousticPositionStore.setFromWsDict(json.payload, json.channel)\n }\n // if (json.channel === \"position:relative:fusion\") {\n // //console.count(\"ws store vel\")\n // acousticPositionStore.setFromWsDict(json.payload, json.channel)\n // }\n else if (json.channel === \"position:master:active\") {\n masterPositionStore.setFromWs(json.payload)\n }\n else if (json.channel === \"position:global:filtered\") {\n //globalPositionStore.setFromWs(json.payload)\n globalPositionStore.setFromWsDict(json.payload, json.channel)\n\n if (timeoutGlobalHandle) {\n clearTimeout(timeoutGlobalHandle)\n }\n timeoutGlobalHandle = setTimeout(globalTimeoutFunc, 5000)\n }\n // else if (json.channel === \"position:global:fusion\") {\n // //globalPositionStore.setFromWs(json.payload)\n // globalPositionStore.setFromWsDict(json.payload, json.channel)\n // }\n else if (json.channel === \"orientation:external:vehicle\") {\n //console.log(json)\n locatorOrientationStore.setFromWs(json.payload)\n if (timeoutOrientation) {\n clearTimeout(timeoutOrientation)\n }\n timeoutOrientation = setTimeout(orientationTimeoutFunc, 5000)\n }\n }\n }\n\n updateStoresFromWS()\n\n return {\n rxStore,\n antennaStore,\n genericConfigStore,\n masterPositionStore,\n globalPositionStore,\n acousticPositionStore,\n fusionPositionStore,\n gpsimuStore,\n preferenceStore,\n aboutInfoStore,\n locatorOrientationStore,\n pointOfInterestStore,\n networkConfigStore,\n wifiConfigStore,\n temperatureStore,\n connectionStatusStore,\n }\n}","import React, { Component } from 'react';\nimport { Menu, Icon } from 'semantic-ui-react'\nimport { Sidebar, Segment, Responsive } from 'semantic-ui-react'\nimport { HashRouter as Router, Route, Link, Switch } from 'react-router-dom'\nimport './App.css';\nimport ErrorBoundary from './Components/ErrorBoundary'\nimport About from './Routes/About'\nimport Diagnostic from './Routes/Diagnostic'\nimport Settings from './Routes/Settings'\nimport Map from './Routes/Map'\nimport Baseline from './Routes/Baseline'\nimport Network from './Routes/Network'\nimport Wifi from './Routes/Wifi'\nimport IMU from './Routes/IMU'\nimport Debug from './Routes/Debug'\nimport { ShowProductNameAndVersion } from './Components/StatusBar'\nimport { StatusReport } from './Components/StatusReport'\nimport { UpdateAvailableIcon } from './Components/VersionInfo'\nimport { WaterLinkedLogoWithLedBlink } from './Components/LEDButton';\nimport { Provider } from 'mobx-react'\nimport ReactResizeDetector from 'react-resize-detector';\nimport { isInternetExplorer } from './lib/detect'\nimport initStores from './Stores/initStores'\n\nconst { rxStore,\n antennaStore,\n genericConfigStore,\n masterPositionStore,\n globalPositionStore,\n acousticPositionStore,\n fusionPositionStore,\n gpsimuStore,\n preferenceStore,\n aboutInfoStore,\n locatorOrientationStore,\n pointOfInterestStore,\n networkConfigStore,\n wifiConfigStore,\n temperatureStore,\n connectionStatusStore } = initStores()\n\n\nconst isIE = isInternetExplorer()\n\nclass App extends Component {\n constructor() {\n super()\n let largeScreen = true\n try {\n largeScreen = window.innerWidth > 640\n } catch (error) {\n console.log(\"Error getting window size\", error)\n }\n this.state = {\n menuVisible: largeScreen,\n }\n this.autoCollapse = !largeScreen\n }\n toggleVisibility = () => this.setState({menuVisible: !this.state.menuVisible})\n navigate = (e) => {\n if (this.autoCollapse) {\n this.setState({menuVisible: false})\n }\n return true\n }\n\n onResize = (width) => {\n if (width < 640) {\n this.autoCollapse = true\n } else {\n this.autoCollapse = false\n }\n }\n\n render() {\n return (\n \n {isIE && (\n \n )}\n\n \n\n \n \n Position Baseline Settings About \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n