![\"dvl\"](\"/direction-arrow-top.svg\"){kind=icon}
),\n });\n};\n\nconst DvlMarker = ({ position, direction, description }) => (\n \n x\n y\n
\n
\n)}\n\n\n\nexport { Coordinates }\n\n","import React from 'react';\nimport { Header, Icon, Popup } from 'semantic-ui-react'\nimport { PropTypes } from 'prop-types';\n\nconst HeaderWithHelp = ({heading, help, as}) => (\n \n
Ensure that DVL is not moving.
\nReady?
\n\n \n
\n )\n }\n}\n\nconst DopplerDirection = (props) => {\n const { data, error } = useSWR('/api/v1/config', fetcher)\n if (error) {\n console.log(\"DopplerDirection has no mounting rotation offset\")\n }\n const mounting_rotation_offset = (data) ? data.mounting_rotation_offset || 0 : 0\n return (\n \n \n
\n )\n }\n}\n\n\nDopplerVerticalDirection.propTypes = {\n speed: PropTypes.number.isRequired,\n}\n\nexport default DopplerVerticalDirection\n","import React from 'react';\nimport { Icon, Table, Popup } from 'semantic-ui-react'\nimport { formatDecimals } from '../lib/format';\nimport { HelpPopup } from './HelpText'\nimport { observer } from 'mobx-react'\nimport { useStores } from '../Stores/use-stores';\n\n\n\n\nconst DeadReckoningDetails = ({rollPitchYaw, position, positionStd, velocity, velocityStd}) => (\n\n \n \n
\n )\n})\n\n\n\n\nexport default DeadReckoningStatus\n","import React from 'react';\nimport { Segment, Grid, Header } from 'semantic-ui-react';\nimport '../Graph.css';\nimport { observer } from 'mobx-react';\nimport { useStores } from '../Stores/use-stores';\nimport PositionMap from '../Components/Map/PositionMap';\nimport DopplerDetails from '../Components/DopplerDetails';\nimport DopplerDirection from '../Components/DopplerDirection';\nimport DopplerVertical from '../Components/DopplerVertical';\nimport DeadReckoningStatus from '../Components/DeadReckoningStatus';\n\nconst ShowDopplerDetails = observer(() => {\n const { velocityStore } = useStores();\n const { altitude, speed, direction, fom, velocity_valid, fps } = velocityStore;\n return (\n \n \n\n
\n )\n}\n\n\nexport function BucketSampler() {\n // https://github.com/d3fc/d3fc-sample/blob/master/src/bucket.js\n var bucketSize = 10;\n\n var bucket = (data) => bucketSize <= 1\n ? data.map((d) => [d])\n : range(0, Math.ceil(data.length / bucketSize))\n .map((i) => data.slice(i * bucketSize, (i + 1) * bucketSize));\n\n bucket.bucketSize = function(x) {\n if (!arguments.length) {\n return bucketSize;\n }\n\n bucketSize = x;\n return bucket;\n };\n return bucket\n }\n\nfunction killInf(val) {\n // Remove negative infinity from the graph\n if (val < -1e9) {\n return NaN\n }\n return val\n}\n\n\nfunction downsample(payload, x_scale, y_scale, x_offset, y_offset) {\n // Downsample to 1 entry pr pixel in chart (if needed)\n //var dataPrPixel = payload.length / this.width // Downsample to number of pixels available (responsive)\n var dataPrPixel = payload.length / 500 // Downsample to fixed number of entries\n //dataPrPixel = 1;\n\n var r0 = payload.map(function(d) { return d[0] })\n var r1 = payload.map(function(d) { return d[1] })\n var r2 = payload.map(function(d) { return d[2] })\n var r3 = payload.map(function(d) { return d[3] })\n\n if (dataPrPixel > 1) {\n // Downsample with BucketSampler\n var bs = BucketSampler()\n var buckets = bs.bucketSize(dataPrPixel)\n\n r0 = buckets(r0).map(function (d) { return Math.max(...d) })\n r1 = buckets(r1).map(function (d) { return Math.max(...d) })\n r2 = buckets(r2).map(function (d) { return Math.max(...d) })\n r3 = buckets(r3).map(function (d) { return Math.max(...d) })\n } else {\n // Use data without downsampling\n dataPrPixel = 1;\n }\n\n var geometry = [[], [], [], []]\n for (var index = 0; index < r0.length; index++) {\n const px = index * dataPrPixel * x_scale + x_offset\n geometry[0][index] = {px: px, py: y_offset + y_scale * killInf(r0[index])}\n geometry[1][index] = {px: px, py: y_offset + y_scale * killInf(r1[index])}\n geometry[2][index] = {px: px, py: y_offset + y_scale * killInf(r2[index])}\n geometry[3][index] = {px: px, py: y_offset + y_scale * killInf(r3[index])}\n }\n return geometry\n}\n\nclass CorrelatorGraphFetcher extends React.Component {\n constructor() {\n super()\n this.state = {\n graph: [],\n x_scale: 1,\n y_scale: 1,\n error: \"\",\n graphDisplay: \"fixed\",\n customYAxisMin: 0,\n customYAxisMax: 100,\n x_display_name: \"test1\"\n\n }\n this.active = true\n }\n fetch = () => {\n const url = this.props.url || '/api/graph'\n axios.get(url)\n .then(response => {\n if (!this.active) {\n return\n }\n if (response.data.data === undefined) {\n console.log(\"Got no data\")\n this.setState({error: \"No data available\"})\n return\n }\n const x_offset = response.data.x_offset || 0;\n const y_offset = response.data.y_offset || 0;\n const graph = downsample(response.data.data, response.data.x_scale, response.data.y_scale, x_offset, y_offset)\n this.setState({graph: graph, x_scale: response.data.x_scale, y_scale: response.data.y_scale, error: \"\"})\n })\n .catch(err => {\n console.log(\"Error\", err)\n this.setState({graph: [], error: err.toString()})\n })\n\n }\n setGraphAxisType = (e, { value }) => { \n this.setState({ graphDisplay: value }) }\n\n changeCustomAxisYMinValue = (value) => {\n this.setState({ customYAxisMin: value})\n }\n\n changeCustomAxisYMaxValue = (value) => {\n this.setState({ customYAxisMax: value})\n }\n\n componentDidMount() {\n this.fetch()\n this.interval = setInterval(this.fetch, 100)\n if (this.props.defYMin !== undefined) this.changeCustomAxisYMinValue(this.props.defYMin)\n if (this.props.defYMax !== undefined) this.changeCustomAxisYMaxValue(this.props.defYMax)\n }\n componentWillUnmount() {\n this.active = false\n clearInterval(this.interval)\n }\n render() {\n if (this.state.error) {\n return (\n \n
\n No data available
\n )\n }\n return (\n \n {this.state.graph.length > 0 && (\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\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 Error loading status
;\n }\n if (!data) {\n returnLoading..
;\n }\n const temperature = data.temperature ?? -1;\n const cpu_load = data.cpu_load ?? -1;\n const disk_free = Object.entries(data.disk_free) ?? [];\n return (\nError loading range mode
;\n }\n if (!data) {\n returnNo data
;\n }\n return\n Force range mode \n\n
\n );\n}\n\nexport { ShowRangeModeURIIfNotAuto, ForceRangeModeSetting };\n","import fetch from 'unfetch';\n\nasync function ApplyGenericConfig(\n speedOfSound,\n acousticEnabled,\n darkModeEnabled,\n mountingOffset,\n periodicCyclingEnabled = undefined\n) {\n const data = {\n speed_of_sound: Number(speedOfSound),\n acoustic_enabled: acousticEnabled,\n dark_mode_enabled: darkModeEnabled,\n mounting_rotation_offset: Number(mountingOffset),\n };\n if (periodicCyclingEnabled !== undefined) {\n data.periodic_cycling_enabled = periodicCyclingEnabled;\n }\n const options = {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(data),\n };\n console.log('ApplyGenericConfig', data);\n return fetch('/api/v1/config', options);\n}\n\nexport { ApplyGenericConfig };\n","import React, { useState } from 'react';\nimport { Icon, Header, Button, Checkbox } from 'semantic-ui-react';\nimport { fetcher } from '../lib/fetch';\nimport useSWR, { mutate } from 'swr';\nimport { HelpPopup } from './HelpText';\nimport { ApplyGenericConfig } from './ConfigGeneric';\n\nfunction ShowIfPeriodicCyclingIsDisabled() {\n const { data, error } = useSWR('/api/v1/config', fetcher, { refreshInterval: 5000, dedupingInterval: 100 });\n\n if (error) {\n console.warn('Unable to fetch periodic cycling');\n return null;\n }\n\n if (!data) {\n return null;\n }\n\n if (data.periodic_cycling_enabled !== undefined && !data.periodic_cycling_enabled) {\n return (\n \n \n change(-1)}\n />\n\n = lowerMode ? 'green' : null}\n onClick={() => change(0)}\n />\n = lowerMode ? 'green' : null}\n onClick={() => change(1)}\n />\n = lowerMode ? 'green' : null}\n onClick={() => change(2)}\n />\n = lowerMode ? 'green' : null}\n onClick={() => change(3)}\n />\n = lowerMode ? 'green' : null}\n onClick={() => change(4)}\n />\n
\n \n Range {shallowestToDistance(lowerMode)} m to{' '}\n {deeperstToDistance(upperMode)} m\n
\n \n
\n {submitMessage}
\n Error loading config
;\n }\n if (!data) {\n // We are loading, show nothing until loaded\n return null;\n }\n if (data.periodic_cycling_enabled === undefined) {\n returnConfig failed to load
;\n }\n return\n Periodic cycling \n\n
\n );\n}\n\nexport { ShowIfPeriodicCyclingIsDisabled, PeriodicCyclingSetting };\n","import React from 'react';\nimport { Segment, Header, Grid, Icon, Table, Divider } from 'semantic-ui-react'\nimport { observer } from 'mobx-react'\nimport CorrelatorGraph from '../Components/CorrelatorGraph';\nimport { useStores } from '../Stores/use-stores'\nimport { formatDecimals } from '../lib/format';\nimport { PropTypes } from 'prop-types';\nimport { HelpPopup } from '../Components/HelpText';\nimport { LEDButton } from '../Components/LEDButton';\nimport {SignalStrengthIcon, NoiseStrengthIllustration} from '../Components/SignalStrength';\nimport StatusView from '../Components/Debug/StatusView';\nimport { ShowRangeModeURIIfNotAuto } from '../Components/RangeMode'\nimport { ShowIfPeriodicCyclingIsDisabled } from '../Components/PeriodicCycling'\n\n\nconst VelocityDetail = observer(() => {\n let store = useStores()\n const velocityStore = store.velocityStore\n\n return (\n
\n\n \n
\n {submitMessage}
\n Verify active connection to DVL by clicking by flashing the LED.
\n\n Warning: all settings, including network settings, will be lost! Are you sure? Will be applied when the DVL\n next boots.\n
\n }\n on=\"click\"\n position=\"bottom left\"\n onOpen={reset}\n />\n );\n};\n\nexport { FactoryResetButton };\n","import React, { useState } from 'react';\nimport { Icon } from 'semantic-ui-react'\n\nconst ExpandableSettings = ({title, children}) => {\n const [open, setOpen] = useState(false);\n const toggleExpanded = () => setOpen(!open)\n const icon = open ? \"angle double up\" : \"angle double down\"\n return (\n \n {submitError &&
\n \n {title}
\n {open && (children)}\n
\n )\n}\n\nexport { ExpandableSettings }\n","import { RoundDecimalPlaces } from '../lib/format'\n\nvar rules = {\n // Return true if valid, false if invalid\n between: (min, max) => {\n return function(value, convFactor, decimals) {\n const val = RoundDecimalPlaces(value / convFactor, decimals)\n return val <= max && val >=min\n }\n },\n numeric: () => {\n return function(val, convFactor, decimals) {\n return isNumeric(val)\n }\n },\n string: () => {\n return function(val, convFactor, decimals) {\n return (typeof val === 'string' || val instanceof String)\n }\n },\n}\n\nclass ErrorList {\n constructor() {\n this.list = {}\n }\n add(key, data) {\n if (this.list[key] === undefined) {\n this.list[key] = []\n }\n this.list[key].push(data)\n }\n first = (field) => {\n if (this.list[field] === undefined) {\n return false\n }\n let err = this.list[field]\n return err ? err : null\n }\n count = () => {\n let all = Object.keys(this.list)\n let count = all.reduce((acc, cur) => acc + this.list[cur].length, 0)\n return count\n }\n}\n\nfunction isNumeric(n) {\n let num = parseFloat(n)\n return !isNaN(num) && isFinite(num);\n}\n\nclass Validator {\n constructor(input, rules) {\n this.input = input\n this.rules = rules\n this.errors = new ErrorList()\n }\n passes = (convFactor=1) => {\n Object.keys(this.input).forEach(field => {\n let val = this.input[field]\n let rules = this.rules[field]\n if (!Array.isArray(rules)) {\n //return false\n throw new Error(\"Rules need to be an array\")\n }\n rules.forEach(rule => {\n let isValid = rule(val, convFactor)\n if (!isValid) {\n this.errors.add(field, \"Invalid\")\n }\n })\n });\n return this.errors.count() === 0\n }\n}\n\nexport { Validator, rules }\n","import React, { Component } from 'react';\nimport { Button } from 'semantic-ui-react'\n//import { PropTypes } from 'mobx-react';\n\nclass ButtonSelector extends Component {\n onChange = (e) => {\n this.props.onChange(e.target.name, e.target.value);\n e.preventDefault();\n }\n render() {\n return (\n {title}
\n {open && (children)}\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 PropTypes.bool,\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 \n {storeFailure && (\n Failed to store \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, { Component, Fragment } from 'react';\nimport { Segment, Header, Message, Form, Table } from 'semantic-ui-react';\nimport { observer, inject } from 'mobx-react';\nimport { FormSetupError, FormIsLoading, SimpleFormInput, Configurator } from '../Components/FormStore';\nimport ApplyFeedbackButton from '../Components/ApplyFeedbackButton';\nimport { fetcher } from '../lib/fetch';\nimport useSWR from 'swr';\n\n// Simplify setting preset options for the GenericFormStore\nfunction remap(value, desc) {\n return { value: value, description: desc };\n}\n\nconst NetworkConfigFormView = observer(({ form, onChange }) => (\n \n));\n\nconst NetworkConfig = inject('networkConfigStore')(\n observer(\n class NetworkForm extends Component {\n componentDidMount() {\n this.props.networkConfigStore.fetch();\n }\n onChange = (key, val) => {\n console.log('Change ', key, val);\n this.props.networkConfigStore.formStore.form.fields.dhcp.value = val;\n this.props.networkConfigStore.storeError = ''; // Reset error on change\n };\n\n render() {\n const networkConfigStore = this.props.networkConfigStore;\n if (networkConfigStore.isLoading) {\n return {storeFailure}
\n\n
\n {\n networkConfigStore.store();\n }}\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 )\n);\n\nconst CurrentNetwork = () => {\n const { data, error } = useSWR('/api/v1/ip/current', fetcher);\n if (error) {\n return \n
\n
\n )}\n \n
\n
Error loading status
;\n }\n if (!data) {\n returnLoading..
;\n }\n\n const entries = (data) ? (data) : []\n entries.sort((a, b) => a.address.localeCompare(b.address))\n return (\n <>\n\n \n Apply\n {isSubmitting &&
\n \n {submitError &&
\n \n );\n}\n\nfunction ManualSet() {\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [isSubmitSuccess, setIsSubmitSuccess] = useState(false);\n const [submitError, setSubmitError] = useState('');\n const [currentTime, setCurrentTime] = useState(new Date());\n\n useEffect(() => {\n let secTimer = setInterval(() => {\n setCurrentTime(new Date());\n }, 1000);\n\n return () => clearInterval(secTimer);\n }, []);\n\n const onSubmit = async () => {\n setIsSubmitting(true);\n setIsSubmitSuccess(false);\n setSubmitError('');\n const now = new Date().toISOString();\n const result = await SetManual(now);\n if (!result.ok) {\n const data = await result.json();\n console.log('submit error', data);\n setSubmitError(data.error || 'unknown error');\n setIsSubmitSuccess(false);\n } else {\n console.log('submit success');\n setIsSubmitSuccess(true);\n setSubmitError('');\n setTimeout(() => {\n setIsSubmitSuccess(false);\n }, 5000);\n }\n setIsSubmitting(false);\n refreshNTP();\n };\n console.log('err', submitError);\n return (\n <>\n Your computer time
\n \n {currentTime.toString()}\n
\n \n \n Set manual time\n {isSubmitting &&
\n\n \n {submitError &&
\n \n );\n}\n\nfunction remap(value, desc) {\n return { value: value, description: desc };\n}\n\nfunction NTPConfig({ ntp_server, ntp_enabled }) {\n const [ntpEnabled, setNTPEnabled] = useState(ntp_enabled);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n };\n const onChangeCheckBox = (e) => {\n setNTPEnabled(!ntpEnabled);\n };\n return (\n <>\n \n
\n }\n on=\"click\"\n position=\"top left\"\n onOpen={reset}\n />\n );\n};\n\nexport { RebootButton };\n","import React, { useState } from 'react';\nimport { Segment, Icon, Header, Form, Button, Popup, Message } from 'semantic-ui-react';\nimport { fetcher } from '../lib/fetch';\nimport useSWR, { mutate } from 'swr';\nimport useForm from '../lib/useForm';\nimport { ApplyGenericConfig } from '../Components/ConfigGeneric';\nimport { FactoryResetButton } from '../Components/FactoryResetButton';\nimport { ExpandableSettings } from '../Components/ExpandableSettings';\nimport NetworkConfig from '../Components/ConfigNetwork';\nimport TimeConfig from '../Components/ConfigTime';\nimport { RebootButton } from '../Components/RebootButton';\nimport { ButtonResetGyro } from '../Components/Map/Buttons';\n\nasync function checkStatus(response) {\n if (response.ok) {\n return response;\n } else {\n const text = await response.text();\n var error = new Error(response.status + ' ' + response.statusText + ' ' + text);\n error.response = response;\n return Promise.reject(error);\n }\n}\n\nfunction Config() {\n const { data: configData, error: configError } = useSWR('/api/v1/config', fetcher);\n\n if (configError) {\n console.log('Config load error', configError);\n return (\n \n {submitError &&
\n \n \n IMU \n \n }\n\n \n \n \n System time configuration \n \n\n \n Manage \n \n \n \n
\n );\n}\n\nconst SetGyro = () => {\n return (\n - \n {items.map((d) => (
- {d} ))}\n
\n Changes \n \n {knownIssues.length > 0 && (\n
\n )}\n \n Known issues \n \n
\n )}\n \n {data.map((d, i) => (
\n)\n}\n\nexport default ReleaseNotes;\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport { Icon, Message, List, Label, Button, Popup } from 'semantic-ui-react'\nimport { useStores } from '../Stores/use-stores'\n\nconst IconWithTitle = ({name, color, title}) => (\n \n - \n
\n \n \n \n
\nOperational Principle
\n\n The DVL estimates velocity relative to the sea bottom by sending acoustic waves from the four angled transducers and then measure the frequency shift (doppler effect) from the received echo.\n By combining the measurements of all four transducers and the time between each acoustic pulse, it is possible to very accurately estimate the speed and direction of movement.\n
\n\n \n\n \n \n
\n )\n}\n*/\n\nclass About extends Component {\n render() {\n return (\n Hardware
\nVersion information
\nBrowser compatibility
\nThis GUI has been tested and verified to work with the following browsers:
\n- \n
Release notes
\n\n
Error getting outputs
;\n }\n if (!data) {\n returnLoading..
;\n }\n return (\n <>\n {data.map((el) => (\n\n
\n Please make sure the DVL 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 {messages.map((d) => (\n
\n }\n on=\"click\"\n position=\"bottom right\"\n flowing\n />\n );\n}\n\nexport { WarningMessages };\n","import React, { useState } from 'react';\nimport { Message, Icon } from 'semantic-ui-react';\nimport { fetcher } from '../../lib/fetch';\nimport useSWR from 'swr';\nimport { ButtonResetGyro } from '../Map/Buttons';\n\nfunction WarnIMUReset() {\n const [visible, setVisible] = useState(true)\n const { data, error } = useSWR('/api/v1/imu/reset_gyros', fetcher);\n if (!data) {\n return null;\n }\n if (error) {\n return null;\n }\n if (!visible) {\n return null;\n }\n if (data.need_reset) {\n return (\n No problems detected
)}\n\n