Skip to content

Commit

Permalink
Merge pull request #30 from MO-RISE/Remote-Controll
Browse files Browse the repository at this point in the history
Remote control
  • Loading branch information
TedSjoblom authored Nov 2, 2023
2 parents 704c3aa + 8eaa729 commit e1ca6fb
Show file tree
Hide file tree
Showing 35 changed files with 2,058 additions and 447 deletions.
9 changes: 8 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,9 @@ pbjs -t json file1.proto file2.proto > bundle.json

## Transforming SVG to components (Tips and Trix)

Example of export options in figma
![Image of export setting](./src/resources/doc_pics/figma-svg-export.png)

1) Transform svg file to react component, this can be done with [svg2jsx](https://svg2jsx.com). Make sure component ID are incudes in the export as svg2jsx has default setting to remove ID.
2) Manual edit svg:
1) Each props should be defined in function declaration
Expand Down Expand Up @@ -126,4 +129,8 @@ rise/crowsnest/<internal_app_name>/<user_name>/<tag>/<react_component>
"key": "rise/masslab/haddock/masslab-5/lever_position_pct/arduino/right/knob/right",
"value": "CgwIgKHuqQYQ5+C4iQESEwoMCICh7qkGEIKovIgBFQAAwkI=",
}
]
]



https://github.com/react-grid-layout/react-draggable
548 changes: 350 additions & 198 deletions package-lock.json

Large diffs are not rendered by default.

32 changes: 16 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,32 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@deck.gl/aggregation-layers": "^8.9.31",
"@deck.gl/geo-layers": "^8.9.31",
"@deck.gl/layers": "^8.9.31",
"@deck.gl/mesh-layers": "^8.9.31",
"@deck.gl/aggregation-layers": "^8.9.32",
"@deck.gl/geo-layers": "^8.9.32",
"@deck.gl/layers": "^8.9.32",
"@deck.gl/mesh-layers": "^8.9.32",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.13",
"@mui/material": "^5.14.13",
"@mui/icons-material": "^5.14.15",
"@mui/material": "^5.14.15",
"@mui/styled-engine-sc": "^5.14.12",
"@mui/x-data-grid": "^6.16.2",
"@mui/x-data-grid-generator": "^6.16.2",
"@tensorflow-models/coco-ssd": "^2.2.2",
"@mui/x-data-grid": "^6.17.0",
"@mui/x-data-grid-generator": "^6.17.0",
"@tensorflow-models/coco-ssd": "^2.2.3",
"@tensorflow/tfjs": "^3.21.0",
"@turf/turf": "^6.5.0",
"axios": "^1.5.1",
"axios": "^1.6.0",
"bytebuffer": "^5.0.1",
"canvasjs": "^1.8.3",
"cra-template": "^1.2.0",
"deck.gl": "^8.9.31",
"deck.gl": "^8.9.32",
"formik": "^2.4.5",
"framer-motion": "^10.16.4",
"google-protobuf": "^3.21.2",
"mapbox-gl": "^2.15.0",
"moment-timezone": "^0.5.43",
"mui-file-input": "^3.0.2",
"openbridge-css": "^0.2.2",
"openbridge-css": "^0.2.3",
"openbridge-web-components": "^0.2.2",
"papaparse": "^5.4.1",
"precompiled-mqtt": "^4.3.13",
Expand All @@ -41,12 +41,12 @@
"react-live-clock": "^6.1.16",
"react-map-gl": "^7.1.6",
"react-moment": "^1.1.3",
"react-papaparse": "^4.3.0",
"react-papaparse": "^4.4.0",
"react-rnd": "^10.4.1",
"react-router-dom": "^6.16.0",
"react-router-dom": "^6.17.0",
"react-scripts": "^5.0.1",
"react-spring": "^9.7.3",
"recharts": "^2.8.0",
"recharts": "^2.9.0",
"recoil": "^0.7.7",
"web-vitals": "^3.5.0",
"yup": "^1.3.2"
Expand Down Expand Up @@ -83,4 +83,4 @@
"eslint-plugin-react": "^7.33.2",
"prettier": "^2.8.8"
}
}
}
7 changes: 7 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,10 @@ body {
code {
font-family: 'Roboto'
}

@font-face {
font-family: 'Roboto';
src: url('./resources/fonts/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
8 changes: 3 additions & 5 deletions src/pages/data-flow/components/KeelsonQueryable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@ import { atomKeelsonConnectionState } from "../../../recoil/atoms"
import { useRecoilValue } from "recoil"

export default function KeelsonQueryable() {

const validationSchema = yup.object({
host: yup.string().required("Required"),
keyExprVar: yup.string().required("Required"),

})

/* eslint-disable */
Expand All @@ -32,10 +30,10 @@ export default function KeelsonQueryable() {
})

const submitMsg = values => {
console.log("Submitted KEELSON MSG: ", values)
console.log("Submitted Queryable to KEELSON: ", values)

axios.get(values.host + "/" + values.keyExprVar, values.msg).then(res => {
console.log("Response: ", res)
axios.get(values.host + "/" + values.keyExprVar, { test: "body_msg" }).then(res => {
console.log("Queryable Response: ", res)
})

return values
Expand Down
62 changes: 43 additions & 19 deletions src/pages/e-lookout-v2/components/CamSelect.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward"
import "@tensorflow/tfjs"
// eslint-disable-next-line
import * as cocoSsd from "@tensorflow-models/coco-ssd"
import axios from "axios"

function text2Binary(string) {
return string
Expand Down Expand Up @@ -56,7 +57,7 @@ export default function CamSelect({ refV, refA, detectFrame, ID }) {
}

// MQTT
let client = mqtt.connect("wss://crowsnest.mo.ri.se:443/mqtt", options)
// let client = mqtt.connect("wss://crowsnest.mo.ri.se:443/mqtt", options)
pc = new RTCPeerConnection(config)

// connect audio / video
Expand All @@ -82,9 +83,7 @@ export default function CamSelect({ refV, refA, detectFrame, ID }) {
.then(function () {
// wait for ICE gathering to complete
return new Promise(function (resolve) {

if (pc.iceGatheringState === "complete") {

resolve()
} else {
// eslint-disable-next-line no-inner-declarations
Expand All @@ -100,34 +99,58 @@ export default function CamSelect({ refV, refA, detectFrame, ID }) {
})
})
.then(function () {

var offer = pc.localDescription

var payload = JSON.stringify({
sdp: offer.sdp,
type: offer.type,
})

var responseTopic = "muppetR" + Math.random()
console.log("responseTopic", responseTopic)
var responseTopic = "crow_muppet" + Math.random()
// console.log("responseTopic", responseTopic)

client.on("message", function (topic, message) {
console.log("Humm..message ", topic, message)
// client.on("message", function (topic, message) {
// console.log("Humm..message ", topic, message)

client.unsubscribe(responseTopic)
pc.setRemoteDescription(JSON.parse(message.toString()))
})
client.subscribe(responseTopic)
// client.unsubscribe(responseTopic)
// pc.setRemoteDescription(JSON.parse(message.toString()))
// })
// client.subscribe(responseTopic)

// client.publish(requestTopic, payload, {
// properties: {
// responseTopic: responseTopic,
// correlationData: text2Binary("hej"),
// },
// })

client.publish(requestTopic, payload, {
properties: {
console.log("SENDING TO: ", { sdp: offer.sdp, mediamtx_path: "example" })

axios
.put("http://localhost:8000/rise/masslab/mediamtx/masslab-2/rpc/signal_for_webrtc", {
responseTopic: responseTopic,
correlationData: text2Binary("hej"),
},
})
sdp: offer.sdp,
mediamtx_path: "example",
})
.then(res => {

console.log("Response: ", res)

axios
.get("http://localhost:8000/rise/masslab/mediamtx/masslab-2/rpc/signal_for_webrtc", {
params: { sdp: offer.sdp, mediamtx_path: "example" },
})
.then(res => {
console.log("Queryable Response: ", res)
})
.catch(err => {
console.log("Error: ", err)
})
})
})

.catch(function (e) {
// alert(e)
console.log(e)
console.log("Error Cam Select", e)
})

// client.on("error". )
Expand All @@ -137,6 +160,7 @@ export default function CamSelect({ refV, refA, detectFrame, ID }) {
<div>
<Button onClick={() => startCamera(ID)}>
<ArrowUpwardIcon sx={{ transform: "rotate(-90deg)" }} />
Axis
</Button>
</div>
)
Expand Down
29 changes: 29 additions & 0 deletions src/pages/remote-control/components/CommandBar.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from "react"
import { Button, Stack } from "@mui/material"
import { ATOM_OS_COMMAND } from "../../../recoil/atoms"
import { useRecoilState } from "recoil"
export default function CommandBar() {
const [command, setCommand] = useRecoilState(ATOM_OS_COMMAND)

const handleRequestCommand = () => {
console.log("Request GU command", !command.guiInCommand)

setCommand({
...command,
guiInCommand: !command.guiInCommand,
})
}

return (
<Stack direction="row" justifyContent="center" alignItems="center" sx={{ height: "100%" }}>
<Button
onClick={handleRequestCommand}
variant="outlined"
size="large"
color={command.guiInCommand ? "success" : "secondary"}
>
{command.guiInCommand ? "IN command" : "Request command"}
</Button>
</Stack>
)
}
20 changes: 20 additions & 0 deletions src/pages/remote-control/components/ControlEngineMASSLAB.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from "react"
import SvgEngineMASSLAB from "./SvgEngineMASSLAB"
import { ATOM_OS_ENGINES, ATOM_OS_COMMAND } from "../../../recoil/atoms"
import { useRecoilState, useRecoilValue } from "recoil"

export default function ControlEngineMASSLAB() {
const [engines, setEngines] = useRecoilState(ATOM_OS_ENGINES)
const command = useRecoilValue(ATOM_OS_COMMAND)
return (
<SvgEngineMASSLAB
setPower={engines?.ENGINE_0?.setPower}
actPower={engines?.ENGINE_0?.actPower}
thrusterID={"ENGINE_0"}
thrusterNAME={"ENGINE 0"}
isTouchControl={command.guiInCommand}
setEngines={setEngines}
engines={engines}
/>
)
}
25 changes: 25 additions & 0 deletions src/pages/remote-control/components/ControlRudderMASSLAB.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from "react"
import SvgRudderMASSLAB from "./SvgRudderMASSLAB"
import { ATOM_OS_RUDDERS, ATOM_OS_COMMAND } from "../../../recoil/atoms"
import { selSetRudder } from "../../../recoil/selectors"
import { useSetRecoilState, useRecoilValue } from "recoil"

export default function ControlRudderMASSLAB() {

const setRudder = useSetRecoilState(selSetRudder)
const rudders = useRecoilValue(ATOM_OS_RUDDERS)
const command = useRecoilValue(ATOM_OS_COMMAND)

return (
<SvgRudderMASSLAB
setAngle={rudders["RUDDER_0"].setAngle}
actAngle={rudders["RUDDER_0"].actAngle}
rudderID={"RUDDER_0"}
rudderNAME={"RUDDER 0"}
isTouchControl={command.guiInCommand}
setRudders={setRudder}
rudders={rudders}
maxAngle={rudders["RUDDER_0"].maxAngle}
/>
)
}
23 changes: 23 additions & 0 deletions src/pages/remote-control/components/ControlThrusterMASSLAB.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react"
import SvgBowThrustersMASSLAB from "./SvgBowThrustersMASSLAB"
import { ATOM_OS_THRUSTERS, ATOM_OS_COMMAND } from "../../../recoil/atoms"
import { selSetThruster } from "../../../recoil/selectors"
import { useSetRecoilState, useRecoilValue } from "recoil"

export default function ControlRudderMASSLAB() {
const setThrusters = useSetRecoilState(selSetThruster)
const thrusters = useRecoilValue(ATOM_OS_THRUSTERS)
const command = useRecoilValue(ATOM_OS_COMMAND)

return (
<SvgBowThrustersMASSLAB
setPower={thrusters?.THRUSTER_0.setPower}
actPower={thrusters?.THRUSTER_0.actPower}
thrusterID={"THRUSTER_0"}
thrusterNAME={"Thruster 0"}
isTouchControl={command.guiInCommand}
setThrusters={setThrusters}
thrusters={thrusters}
/>
)
}
Loading

0 comments on commit e1ca6fb

Please sign in to comment.