GH-47: 1) fixed video overlay z-index; 2) moved enums to constants; 3…

…) added default values to ROS controller actions; 4) added BE and FE settings API

backend/mini_pupper_webrtc/dto/robot_type.py

@@ -0,0 +1,7 @@
+from pydantic import BaseModel
+from ..model.robot_type import RobotType
+
+
+class RobotTypeDTO(BaseModel):
+    id: int
+    label: RobotType

backend/mini_pupper_webrtc/main.py

@@ -1,18 +1,21 @@
 import asyncio
 
-from typing import Dict
+from typing import Dict, List
 
 from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
 
-from mini_pupper_webrtc.dto.offer_payload import OfferPayload
+from .dto.offer_payload import OfferPayload
+from .dto.webrtc_response import WebRTCResponse
+from .dto.robot_type import RobotTypeDTO
 
 from .model.ros_bridge import RosBridge
 from .model.camera_type import CameraType
-
-from mini_pupper_webrtc.model.peer_connection import PeerConnection
-from mini_pupper_webrtc.model.uvicorn_logger import logger
-from mini_pupper_webrtc.dto.webrtc_response import WebRTCResponse
+from .model.peer_connection import PeerConnection
+from .model.uvicorn_logger import logger
+from .model.robot_type import RobotType
+from .model.robot_settings import RobotSettings
+from .model.widget import Widget
 
 ros_bridge: RosBridge = RosBridge()
 peer_connections: Dict[str, PeerConnection] = {}
@@ -26,6 +29,30 @@
 )
 
 
+# ToDo: add DB support and replace hardcoded values
+@app.get('/robot_settings')
+def get_robots() -> List[RobotSettings]:
+    return [
+        RobotSettings(id=1, name='MiniPupper', type=1),
+        RobotSettings(id=2, name='Husky', type=2, speed_step=20)
+    ]
+
+
+@app.get('/robot_types')
+def get_robot_types() -> List[RobotTypeDTO]:
+    return [RobotTypeDTO(id=id, label=robot_type.value) for id, robot_type in enumerate(RobotType)]
+
+
+@app.get('/widgets')
+def get_widgets() -> List[Widget]:
+    return [
+        Widget(id=1, label='Screen', name='screen'),
+        Widget(id=2, label='Battery', name='battery'),
+        Widget(id=3, label='Robot\'s Speed', name='speed'),
+        Widget(id=4, label='Additional actions', name='actions')
+    ]
+
+
 @app.post('/offer', description='Establish WebRTC connection', response_model=WebRTCResponse)
 async def offer(offer_payload: OfferPayload, request: Request):
     if offer_payload.options.camera_type == CameraType.SIMULATOR:

backend/mini_pupper_webrtc/model/robot_settings.py

@@ -0,0 +1,10 @@
+from pydantic import BaseModel
+
+
+class RobotSettings(BaseModel):
+    id: int
+    name: str
+    type: int
+    speed_step: int = 1
+    speed_min: int = 0
+    speed_max: int = 100

backend/mini_pupper_webrtc/model/robot_type.py

@@ -0,0 +1,6 @@
+from enum import Enum
+
+
+class RobotType(str, Enum):
+    LEGGED = 'Legged'
+    WHEELED = 'Wheeled'

backend/mini_pupper_webrtc/model/widget.py

@@ -0,0 +1,8 @@
+from pydantic import BaseModel
+
+
+class Widget(BaseModel):
+    id: int
+    label: str
+    name: str
+    selected: bool = True

frontend/package.json

@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.2.3",
     "babel-plugin-import": "^1.13.5",
     "classnames": "^2.3.1",
     "customize-cra": "^1.0.0",

frontend/src/api/index.js

@@ -0,0 +1,7 @@
+import axios from 'axios'
+import { BE_URL } from '../constants'
+
+export const getData = async (path) => (await axios.get(`${BE_URL}/${path}`)).data
+export const getWidgets = () => getData('widgets')
+export const getRobotTypes = () => getData('robot_types')
+export const getRobotSettings = () => getData('robot_settings')

frontend/src/components/additionalActions/index.js

@@ -6,6 +6,7 @@ import Widget, { WidgetTitle } from '../widget'
 import { ReactComponent as RobotStandIcon } from './robot_stand.svg'
 import { ReactComponent as RobotSitIcon } from './robot_sit.svg'
 import { useStore } from '../../store'
+import { RobotPose } from '../../constants'
 
 const RobotPositionButton = observer(({heading = '', position, currentPosition, children, handleClick}) => {
   const theme = useTheme()
@@ -47,11 +48,6 @@ const AdditionalActions = observer(() => {
   const theme = useTheme()
   const { rosStore: { isStanding, changePose } } = useStore()
 
-  const RobotPose = {
-    SIT: 'sit',
-    STAND: 'stand'
-  }
-
   const pose = () => {
     return isStanding ? RobotPose.STAND : RobotPose.SIT
   }

frontend/src/components/robotHardware/index.js

@@ -10,6 +10,7 @@ import {
   buildStyles
 } from 'react-circular-progressbar'
 import 'react-circular-progressbar/dist/styles.css'
+import { BatteryLevel } from '../../constants'
 
 const BatteryLevelDivider = observer(({left = '0'}) => {
   const theme = useTheme()
@@ -33,18 +34,13 @@ const BatteryLevelDivider = observer(({left = '0'}) => {
 const Battery = observer(() => {
   const theme = useTheme()
   const {rosStore: { batteryState }} = useStore()
-  const Level = {
-    HIGH: 'High',
-    AVG: 'Average',
-    LOW: 'Low'
-  }
 
   const paletteColorOf = (level) => {
-    return (level === Level.LOW ? theme.palette.error : level === Level.AVG ? theme.palette.warning : theme.palette.success).main
+    return (level === BatteryLevel.LOW ? theme.palette.error : level === BatteryLevel.AVG ? theme.palette.warning : theme.palette.success).main
   }
 
   const getCapacity = () => {
-    return batteryState < 20 ? Level.LOW : batteryState < 60 ? Level.AVG : Level.HIGH
+    return batteryState < 20 ? BatteryLevel.LOW : batteryState < 60 ? BatteryLevel.AVG : BatteryLevel.HIGH
   }
 
   const getColor = () => {

frontend/src/components/videoOverlay/style.css

@@ -11,6 +11,7 @@
   align-items: center;
 
   pointer-events: none;
+  z-index: 1;
 }
 
 @keyframes statusKeyframes {

frontend/src/constants.js

@@ -26,3 +26,12 @@ export const NNType = {
     MOBILENET_SSD: 'mobilenet-ssd',
     NONE: ''
 }
+export const RobotPose = {
+    SIT: 'sit',
+    STAND: 'stand'
+}
+export const BatteryLevel = {
+    HIGH: 'High',
+    AVG: 'Average',
+    LOW: 'Low'
+  }

frontend/src/store/RosController/index.js

@@ -21,11 +21,6 @@ const Ros = ROSLIB.Ros
 const RosTopic = ROSLIB.Topic
 const RosMessage = ROSLIB.Message
 
-export const robotPosition = {
-  sit: 'sit',
-  stand: 'stand',
-}
-
 class RosController {
   @observable isTeleopReady = false
   @observable isWSConnected = false
@@ -156,32 +151,32 @@ class RosController {
   }
 
   @action
-  setIsWSConnected = (value) => {
+  setIsWSConnected = (value = false) => {
     this.isWSConnected = value
   }
 
   @action
-  setIsTeleopReady = (value) => {
+  setIsTeleopReady = (value = false) => {
     this.isTeleopReady = value
   }
 
   @action
-  setBatteryState = (value) => {
+  setBatteryState = (value = 100) => {
     this.batteryState = (value | 0)
   }
 
   @action
-  setCpuState = (value) => {
+  setCpuState = (value = 0) => {
     this.cpuState = (value | 0)
   }
 
   @action
-  setMemoryState = (value) => {
+  setMemoryState = (value = 0) => {
     this.memoryState = (value | 0)
   }
 
   @action
-  setIsStanding = (value) => {
+  setIsStanding = (value = false) => {
     this.isStanding = value
   }
 }