@dronedeploy/rocos-js-sdk 1.0.0-alpha-2 → 2.6.1

package/demo/react/src/App.css

@@ -0,0 +1,190 @@
+/* You can add global styles to this file, and also import other style files */
+:root {
+  --color-text: #333;
+  --color-link: #61dafb;
+  --color-link-active: #0C8DFF;
+  --color-headline: #fff;
+  --color-background: #000000;
+  --color-button: #0C8DFF;
+  --color-button-hover: #0D5EA6;
+}
+
+@font-face {
+  font-family: HKGrotesk;
+  src: url(assets/HKGrotesk-Bold.otf);
+}
+
+@font-face {
+  font-family: HKGrotesk-Regular;
+  src: url(assets/HKGrotesk-Regular.otf);
+}
+
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
+
+
+h3 {
+  margin:0px;
+  margin-bottom: 16px;
+}
+
+body {
+  margin: 0;
+  font-family: HKGrotesk;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #F4F4F4;
+}
+
+code {
+  font-family: 'Roboto Mono', monospace;
+}
+
+.app {}
+
+.app header {
+  top: 0;
+  left: 0;
+  /*width: 100%;*/
+  height: 60px;
+  background-color: var(--color-background);
+  text-transform: uppercase;
+  font-size: 20px;
+  position: fixed;
+  right: 0;
+  z-index: 10;
+  padding: 0 60px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.app header .logo {
+  margin-top: 15px;
+  text-decoration: none;
+  color: var(--color-text);
+  line-height: 60px;
+  background-image: url(./assets/logo.svg);
+  background-repeat: no-repeat;
+  background-position: left center;
+  height: 30px;
+  width: 226px;
+}
+
+.app header h1 {
+
+  color: var(--color-headline);
+  text-transform: initial;
+  font-size: 20px;
+  line-height: 60px;
+  margin: 0;
+}
+
+.app a {
+  color: var(--color-link);
+}
+
+.app .content {
+  padding: 80px 40px;
+  height: 100%;
+}
+
+.app .content .boxRow {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.app .content .boxRow .boxColumn {
+  width: 25%;
+}
+
+.app .content .box {
+  border-radius: 4px;
+  margin: 24px 24px 24px 0px;
+  border: 1px solid #D2D3D4;
+  overflow: hidden;
+  background-color: #ffffff;
+  min-width: 200px;
+}
+
+.app .content .box .boxContent {
+  padding: 24px;
+}
+
+.app .content .box label {
+  display: block;
+  padding: 5px 0 5px 0;
+}
+
+.app .content .box button {
+  display: inline-block;
+  font-family: HKGrotesk;
+  color: var(--color-headline);
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: var(--color-button);
+  border: none;
+  padding: .375rem .75rem;
+  font-size: 15px;
+  line-height: 1.5;
+  border-radius: 3px;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  cursor: pointer;
+}
+.app .content .box button:hover {
+  background-color: var(--color-button-hover);
+}
+.app .content .box button:focus {
+  outline: 0;
+}
+.app .content .box pre {
+  font-family: 'Roboto Mono', monospace;
+  font-size: 12px;
+  background-color: #E2F1FF;
+  padding: 20px;
+  margin: auto;
+  overflow: auto;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;       /* css-3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;
+}
+
+.app .content .box input[type=text],
+.app .content .box textarea {
+  margin-bottom:12px;
+  font-family: HKGrotesk-Regular;
+  display: block;
+  width: 90%;
+  height: calc(1.5em + .75rem + 2px);
+  padding: 0 .375rem 0 .75rem;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: #1F252D;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ffffff;
+  border-bottom: 1px solid #D2D3D4 !important;
+}
+
+input:focus {
+  outline: 0;
+  border-width: 0 0 2px;
+  border-color: blue;
+}
+
+textarea:focus {
+  outline: 0;
+  border-width: 0 0 2px;
+  border-color: blue;
+}
+
+
+.app .content .box textarea {
+  height: 100px;
+}

package/demo/react/src/App.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import './App.css'
+import { AuthForm } from './components/AuthForm'
+import { TokenForm } from './components/TokenForm'
+import { RobotsForm } from './components/RobotsForm'
+import { TelemetryForm } from './components/TelemetryForm'
+import { CallerForm } from './components/CallerForm'
+import { CommandForm } from './components/CommandForm'
+
+function App(): JSX.Element {
+    return (
+        <div className="app">
+            <header>
+                <div className="logo" />
+                <h1>Rocos JS SDK - React Demo</h1>
+            </header>
+            <div className="content">
+                <div className="boxRow">
+                    <AuthForm />
+                    <TokenForm />
+                    <RobotsForm />
+                    <TelemetryForm />
+                    <CallerForm />
+                    <CommandForm />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default App

package/demo/react/src/actions/index.ts

@@ -0,0 +1,8 @@
+import { ActionCreator, AnyAction } from 'redux'
+
+import * as SdkActions from './sdkActions'
+
+type ValueOf<T> = T[keyof T]
+type ExtractActions<T> = ReturnType<Extract<ValueOf<T>, ActionCreator<AnyAction>>>
+
+export type AppActions = ExtractActions<typeof SdkActions>

package/demo/react/src/actions/sdkActions.ts

@@ -0,0 +1,62 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import RocosSDKController from '../controllers/RocosSDKController'
+
+type ITokenResponse = {
+    tokenResponse: string
+    token: string
+}
+
+export const getTokenResponse = createAsyncThunk<
+    // Return type of the payload creator
+    ITokenResponse | undefined,
+    // First argument to the payload creator
+    void,
+    // Types for ThunkAPI
+    {
+        rejectValue: string
+    }
+>('sdk/getTokenResponse', async (_unknown, { rejectWithValue }) => {
+    try {
+        const sdkInstance = RocosSDKController.getInstance()
+        if (sdkInstance) {
+            const token = await sdkInstance.getAuthService().getToken()
+            return {
+                tokenResponse: JSON.stringify(token, null, 2),
+                token: token.value,
+            }
+        }
+    } catch (e: any) {
+        return rejectWithValue(e.message)
+    }
+})
+
+type IRobotsResponse = {
+    robotsResponse: string
+    callsigns: string[]
+    projectId: string
+}
+
+export const getRobotsResponse = createAsyncThunk<
+    // Return type of the payload creator
+    IRobotsResponse | undefined,
+    // First argument to the payload creator
+    string,
+    // Types for ThunkAPI
+    {
+        rejectValue: string
+    }
+>('sdk/getRobotsResponse', async (projectId: string, { rejectWithValue }) => {
+    try {
+        const sdkInstance = RocosSDKController.getInstance()
+        if (sdkInstance) {
+            const robots = await sdkInstance.getRobotService().getRobots(projectId)
+            return {
+                robotsResponse: JSON.stringify(robots, null, 2),
+                callsigns: robots.map((item) => item.callsign),
+                projectId: projectId,
+            }
+        }
+    } catch (e: any) {
+        return rejectWithValue(e.message)
+    }
+})

package/demo/react/src/assets/logo.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="226px" height="30px" viewBox="0 0 474 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group Copy</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="A3-Copy-21" transform="translate(-719.000000, -270.000000)">
+            <g id="Group-Copy" transform="translate(719.000000, 270.000000)">
+                <path d="M126.491433,0.426869388 C143.985236,0.426869388 158.217862,14.3046506 158.217862,31.4889242 C158.217862,48.6731979 143.985236,62.5509791 126.491433,62.5509791 C108.997631,62.5509791 94.7650041,48.6731979 94.7650041,31.4889242 C94.7650041,14.3046506 108.997631,0.426869388 126.491433,0.426869388 Z M126.491433,9.67223564 C114.034383,9.67223564 103.987046,19.4690743 103.987046,31.4889242 C103.987046,43.5087742 114.034383,53.3056128 126.491433,53.3056128 C138.948483,53.3056128 148.99582,43.5087742 148.99582,31.4889242 C148.99582,19.4690743 138.948483,9.67223564 126.491433,9.67223564 Z" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+                <path d="M337.79178,0.426869388 C343.319953,0.426869388 348.653618,1.81663216 353.370727,4.42399861 C359.726031,7.93687233 364.687537,13.5120971 367.351307,20.1862391 C368.777119,23.7586488 369.518209,27.5771359 369.518209,31.4889242 C369.518209,48.6731979 355.285583,62.5509791 337.79178,62.5509791 C320.297978,62.5509791 306.065351,48.6731979 306.065351,31.4889242 C306.065351,14.3046506 320.297978,0.426869388 337.79178,0.426869388 Z M337.79178,9.67223564 C325.33473,9.67223564 315.287393,19.4690743 315.287393,31.4889242 C315.287393,43.5087742 325.33473,53.3056128 337.79178,53.3056128 C350.24883,53.3056128 360.296167,43.5087742 360.296167,31.4889242 C360.296167,28.7595638 359.781217,26.1062694 358.789232,23.6208245 C356.922752,18.9443133 353.42079,15.0091721 348.91807,12.5203082 C345.558167,10.6631326 341.755278,9.67223564 337.79178,9.67223564 Z" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+                <path d="M251.887886,3.39830446 C254.199589,4.46926815 255.207597,7.21620102 254.139335,9.53375074 C253.071073,11.8513005 250.33107,12.8618581 248.019367,11.7908944 C245.022997,10.4027385 241.735492,9.67223564 238.331213,9.67223564 C225.874163,9.67223564 215.826826,19.4690743 215.826826,31.4889242 C215.826826,43.5087742 225.874163,53.3056128 238.331213,53.3056128 C241.84873,53.3056128 245.241201,52.525608 248.315213,51.0472968 C250.611303,49.9430927 253.365528,50.9140152 254.466947,53.2159129 C255.568365,55.5178107 254.599892,58.2790018 252.303801,59.3832059 C247.990028,61.4577261 243.235149,62.5509791 238.331213,62.5509791 C220.83741,62.5509791 206.604784,48.6731979 206.604784,31.4889242 C206.604784,14.3046506 220.83741,0.426869388 238.331213,0.426869388 C243.076712,0.426869388 247.683601,1.45054696 251.887886,3.39830446 Z" id="Oval-9-Copy-29" fill="#FFFFFF" fill-rule="nonzero"></path>
+                <path d="M433.42187,0.426869388 C435.968466,0.426869388 438.032891,2.49651512 438.032891,5.04955251 C438.032891,7.60258991 435.968466,9.67223564 433.42187,9.67223564 C428.500289,9.67223564 424.565956,13.4993645 424.565956,18.1495355 C424.565956,22.7997065 428.500289,26.6268354 433.42187,26.6268354 L455.144562,26.6268354 C465.090903,26.6268354 473.222517,34.6046047 473.222517,44.4306934 C473.222517,48.1378808 472.053991,51.6822638 469.919383,54.6456734 C466.551263,59.3215285 461.080609,62.1533595 455.144562,62.1533595 C452.597965,62.1533595 450.533541,60.0837137 450.533541,57.5306763 C450.533541,54.977639 452.597965,52.9079932 455.144562,52.9079932 C458.105555,52.9079932 460.800748,51.5128526 462.442986,49.2329864 C463.454775,47.8283504 464.000475,46.1731293 464.000475,44.4306934 C464.000475,39.7559667 460.041815,35.8722016 455.144562,35.8722016 L433.42187,35.8722016 C423.468285,35.8722016 415.343914,27.9692061 415.343914,18.1495355 C415.343914,8.32986488 423.468285,0.426869388 433.42187,0.426869388 Z" id="Oval-9-Copy-27" fill="#FFFFFF" fill-rule="nonzero"></path>
+                <path d="M1.07328879,7.8443144 C-0.559940896,5.88547527 -0.299988397,2.97017951 1.65390894,1.33281907 C3.60780628,-0.304541366 6.51574729,-0.0439313973 8.14897697,1.91490773 L28.453421,26.2673548 C30.9627477,29.2769544 28.8282187,33.8547413 24.9155769,33.8547413 L21.1297826,33.8547413 C15.4358282,33.8547413 10.8710636,38.305698 10.8710636,43.7310684 C10.8710636,49.1564389 15.4358282,53.6073956 21.1297826,53.6073956 L42.7260139,53.6073956 C45.2726105,53.6073956 47.3370349,55.6770414 47.3370349,58.2300788 C47.3370349,60.7831161 45.2726105,62.8527619 42.7260139,62.8527619 L21.1297826,62.8527619 C10.3990758,62.8527619 1.64902174,54.3208625 1.64902174,43.7310684 C1.64902174,35.0055819 7.58941243,27.6771952 15.6835307,25.3673326 L1.07328879,7.8443144 Z" id="Oval-9-Copy-30" fill="#FFFFFF" fill-rule="nonzero" transform="translate(23.668517, 31.554789) scale(-1, -1) translate(-23.668517, -31.554789) "></path>
+                <ellipse id="Oval-3" fill="#1EE289" cx="4.61102095" cy="58.1687627" rx="4.61102095" ry="4.62268313"></ellipse>
+            </g>
+        </g>
+    </g>
+</svg>

package/demo/react/src/components/AuthForm.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useInput } from '../hooks/useInput'
+import { createSdk } from '../reducers/sdkReducer'
+import { isSDKCreated } from '../selectors/sdkSelector'
+import config from '../config.json'
+import RocosSDKController from '../controllers/RocosSDKController'
+
+export const AuthForm = (): JSX.Element => {
+    const { value: url, bind: bindUrl } = useInput(config.url, 'Hostname')
+    const { value: appId, bind: bindAppId } = useInput(config.appId, 'Application ID')
+    const { value: appKey, bind: bindAppKey } = useInput(config.appKey, 'Application Key')
+
+    const sdkExists = useSelector(isSDKCreated)
+    const dispatch = useDispatch()
+
+    const createSdkClient: React.MouseEventHandler = useCallback(
+        (evt) => {
+            evt.preventDefault()
+            if (url && appId && appKey) {
+                const sdkInstanceExists = RocosSDKController.checkIfInstanceExists({ url, appId, appKey })
+                if (!sdkInstanceExists) {
+                    dispatch(createSdk(false))
+                }
+                RocosSDKController.createInstance({ url, appId, appKey })
+                dispatch(createSdk(true))
+            }
+        },
+        [appId, appKey, url, dispatch]
+    )
+
+    const removeSdkClient: React.MouseEventHandler = useCallback(
+        (evt) => {
+            evt.preventDefault()
+            RocosSDKController.removeInstance()
+            dispatch(createSdk(false))
+        },
+        [dispatch]
+    )
+
+    return (
+        <div className="boxColumn">
+            <div className="box">
+                <div className="boxContent">
+                    <h3>Rocos SDK Client Params</h3>
+                    <label>
+                        <input type="text" {...bindUrl} />
+                    </label>
+                    <label>
+                        <input type="text" {...bindAppId} />
+                    </label>
+                    <label>
+                        <input type="text" {...bindAppKey} />
+                    </label>
+                    <button onClick={createSdkClient}>Create SDK Client</button>
+                </div>
+            </div>
+            {sdkExists && (
+                <div className="box">
+                    <pre>
+                        Rocos SDK created with params:
+                        <br />
+                        url: {url}
+                        <br />
+                        appId: {appId}
+                        <br />
+                        appKey: {appKey}
+                    </pre>
+                    <div className="boxContent">
+                        <button onClick={removeSdkClient}>Remove SDK Client</button>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}

package/demo/react/src/components/CallerBox.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react'
+import { Subscription } from 'rxjs'
+import { IRocosCallerMessage, generateUUID } from '@team-rocos/rocos-js-sdk'
+import RocosSDKController from '../controllers/RocosSDKController'
+import { CallerPayload } from '../reducers/sdkReducer'
+
+type TCallerParams = {
+    callerParams: CallerPayload
+}
+
+export const CallerBox = ({ callerParams }: TCallerParams): JSX.Element => {
+    const [message, setMessage] = useState<string | undefined>(undefined)
+
+    useEffect(() => {
+        const rocosSdk = RocosSDKController.getInstance()
+        let subscription$: Subscription
+        if (rocosSdk) {
+            try {
+                const messageObservable = rocosSdk.getCallerService().invokeRequest({
+                    uid: generateUUID(),
+                    projectId: callerParams.projectId,
+                    callsign: callerParams.callsign,
+                    component: 'ros',
+                    topic: callerParams.topic,
+                    subSystem: '',
+                    payload: callerParams.payload,
+                    responseLevelNumber: 0,
+                })
+                subscription$ = messageObservable.subscribe((msg: IRocosCallerMessage) => {
+                    const payload = msg?.responses?.responsesList?.[0]?.pb_return?.payload
+                    if (payload) {
+                        const payloadJSON = JSON.parse(atob(payload.toString()))
+
+                        setMessage(JSON.stringify(payloadJSON, null, 2))
+                    }
+                })
+                // setSubscription$(subscription$)
+            } catch (e) {
+                console.log('error', e)
+            }
+        }
+        return () => {
+            // the unsubscribe action happens when the component gets unmounted
+            subscription$?.unsubscribe()
+        }
+    }, [callerParams])
+
+    return (
+        <div className="box">
+            <pre>{message}</pre>
+        </div>
+    )
+}

package/demo/react/src/components/CallerForm.tsx

@@ -0,0 +1,98 @@
+import React, { ChangeEventHandler, useCallback, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { getCallsigns, isSDKCreated, getProjectId, getCaller } from '../selectors/sdkSelector'
+import { setCaller } from '../reducers/sdkReducer'
+import config from '../config.json'
+import { CallerBox } from './CallerBox'
+
+export const CallerForm = (): JSX.Element => {
+    const [radioData, setRadioData] = useState<string | undefined>()
+    const [topic, setTopic] = useState<string>(config.callerTopic)
+    const [payload, setPayload] = useState<string>(config.callerPayload)
+    const sdkExists = useSelector(isSDKCreated)
+    const callsigns = useSelector(getCallsigns)
+    const projectId = useSelector(getProjectId)
+    const caller = useSelector(getCaller)
+
+    const dispatch = useDispatch()
+
+    const makeServiceCall: React.MouseEventHandler = useCallback(
+        (evt) => {
+            evt.preventDefault()
+            if (callsigns) {
+                let selectedCallsign = ''
+                for (const callsign of callsigns) {
+                    if (radioData === undefined || radioData === callsign) {
+                        selectedCallsign = callsign
+                        break
+                    }
+                }
+
+                if (selectedCallsign && topic && payload && projectId) {
+                    dispatch(
+                        setCaller({
+                            projectId,
+                            callsign: selectedCallsign,
+                            topic: topic,
+                            payload: payload,
+                        })
+                    )
+                }
+            }
+        },
+        [callsigns, topic, payload, projectId, radioData, dispatch]
+    )
+
+    const handleRadioChange: ChangeEventHandler = useCallback((evt) => {
+        const target = evt.target as HTMLInputElement
+        setRadioData(target.value)
+    }, [])
+
+    const handleTopicChange: ChangeEventHandler = useCallback((evt) => {
+        const target = evt.target as HTMLInputElement
+        const value = target.value
+
+        setTopic(value || '')
+    }, [])
+
+    const handlePayloadChange: ChangeEventHandler = useCallback((evt) => {
+        const target = evt.target as HTMLTextAreaElement
+        const value = target.value
+
+        setPayload(value || '{}')
+    }, [])
+
+    if (!sdkExists || !callsigns) {
+        return <></>
+    }
+
+    return (
+        <div className="boxColumn">
+            <div className="box">
+                <div className="boxContent">
+                    <h3>Invoke Service Call</h3>
+                    {callsigns.map((item, index) => (
+                        <label key={index}>
+                            <input
+                                value={item}
+                                type="radio"
+                                name="caller-callsign"
+                                checked={radioData === undefined || radioData === item}
+                                onChange={handleRadioChange}
+                            />{' '}
+                            {item}
+                        </label>
+                    ))}
+                    <label>
+                        <input type="text" name="topic" value={topic} onChange={handleTopicChange} />
+                    </label>
+                    <label>
+                        <textarea name="payload" value={payload} onChange={handlePayloadChange} />
+                    </label>
+                    <button onClick={makeServiceCall}>Call</button>
+                </div>
+            </div>
+            {caller && <CallerBox callerParams={caller} />}
+        </div>
+    )
+}

package/demo/react/src/components/CommandBox.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+import { Subscription } from 'rxjs'
+import { IRocosCommandMessage } from '@team-rocos/rocos-js-sdk'
+import RocosSDKController from '../controllers/RocosSDKController'
+import { CommandPayload } from '../reducers/sdkReducer'
+
+type TCommandParams = {
+    commandParams: CommandPayload
+}
+
+export const CommandBox = ({ commandParams }: TCommandParams): JSX.Element => {
+    const [message, setMessage] = useState<string | undefined>(undefined)
+
+    useEffect(() => {
+        const rocosSdk = RocosSDKController.getInstance()
+        let subscription$: Subscription
+        if (rocosSdk) {
+            try {
+                const messageObservable = rocosSdk.getCommandService().invokeRequest({
+                    projectId: commandParams.projectId,
+                    callsign: commandParams.callsign,
+                    commandId: commandParams.commandId,
+                    parameters: JSON.parse(commandParams.parameters),
+                })
+                subscription$ = messageObservable.subscribe((msg: IRocosCommandMessage) => {
+                    const payload = msg?.response
+                    if (payload) {
+                        setMessage(JSON.stringify(payload, null, 2))
+                    }
+                })
+                // setSubscription$(subscription$)
+            } catch (e) {
+                console.log('error', e)
+            }
+        }
+        return () => {
+            // the unsubscribe action happens when the component gets unmounted
+            subscription$?.unsubscribe()
+        }
+    }, [commandParams])
+
+    return (
+        <div className="box">
+            <pre>{message}</pre>
+        </div>
+    )
+}