setSrc(props.camera.placeholder)}
+ onClick={() => props.handleClick(props.index)}
+ />
+ )
+}
- imageLoad(){
- this.setState({loaded: true});
- }
+CameraFrame.defaultProps = defaultProps;
- render() {
- return (
-
this.props.handleClick(this.props.index) : () => {}}/>
- );
- }
-}
\ No newline at end of file
+export default CameraFrame;
\ No newline at end of file
diff --git a/surface/src/components/Camera/CameraInterface.ts b/surface/src/components/Camera/CameraInterface.ts
index a63faed..39e1d4c 100644
--- a/surface/src/components/Camera/CameraInterface.ts
+++ b/surface/src/components/Camera/CameraInterface.ts
@@ -2,4 +2,5 @@ export default interface CameraInterface{
feed: string
placeholder: string
name: string
+ angle: number
}
\ No newline at end of file
diff --git a/surface/src/components/Camera/camera.json b/surface/src/components/Camera/camera.json
index bc5b8f8..e075564 100644
--- a/surface/src/components/Camera/camera.json
+++ b/surface/src/components/Camera/camera.json
@@ -2,21 +2,37 @@
{
"name": "Camera 1",
"feed": "http://192.168.1.3:8090/cam0",
- "placeholder": "./img/test_cam1.png"
+ "placeholder": "./img/test_cam1.png",
+ "angle": 0
},
{
"name": "Camera 2",
- "feed": "http://192.168.1.4:8090/cam1",
- "placeholder": "./img/test_cam2.png"
+ "feed": "http://192.168.1.3:8090/cam1",
+ "placeholder": "./img/test_cam2.png",
+ "angle": 90
},
{
"name": "Camera 3",
- "feed": "http://192.168.1.2:8090/test.mjpg",
- "placeholder": "./img/test_cam3.png"
+ "feed": "http://192.168.1.4:8090/cam0",
+ "placeholder": "./img/test_cam3.png",
+ "angle": 90
+ },
+ {
+ "name": "Camera 4",
+ "feed": "http://192.168.1.4:8090/cam1",
+ "placeholder": "./img/test_cam4.png",
+ "angle": 0
+ },
+ {
+ "name": "Camera 4",
+ "feed": "http://192.168.1.4:8090/cam2",
+ "placeholder": "./img/test_cam4.png",
+ "angle": 90
},
{
"name": "Camera 4",
- "feed": "./img/test_cam4.png",
- "placeholder": "./img/test_cam4.png"
+ "feed": "http://192.168.1.4:8090/cam3",
+ "placeholder": "./img/test_cam4.png",
+ "angle": 270
}
]
diff --git a/surface/src/components/IMU/IMU.tsx b/surface/src/components/IMU/IMU.tsx
index dafe386..3b0eecb 100644
--- a/surface/src/components/IMU/IMU.tsx
+++ b/surface/src/components/IMU/IMU.tsx
@@ -55,6 +55,7 @@ const animate = (s: T) => {
const IMU: React.FC = () => {
const ref = React.useRef
(null);
+ const [offsets, setOffsets] = React.useState>([0.0, 0.0, 0.0]);
ipcRenderer.on('imu', (e, data) => {
orientation = data;
@@ -82,7 +83,14 @@ const IMU: React.FC = () => {
}, [])
return(
-
+
+
+
+
- {this.state.items.map((item, index) => {
- return - {`${item.timestamp ? item.timestamp : ''} (${item.process}): ${item.text}`}
- })}
-
- );
- }
+ return(
+
+ {items.map((item, index) => {
+ return -
+ {`${item.timestamp ? item.timestamp : ''} (${item.process})`}: {item.text}
+
+ })}
+
+ )
}
+
+export default Log;
+
diff --git a/surface/src/components/Log/LogItem.ts b/surface/src/components/Log/LogItem.ts
index 878124c..d4fac50 100644
--- a/surface/src/components/Log/LogItem.ts
+++ b/surface/src/components/Log/LogItem.ts
@@ -1,14 +1,21 @@
export interface LogItem{
timestamp: string
process: string
- text: string
+ text: string,
+ color?: string
}
-export default function(proc: string, text: string) {
+export const LOG_NORMAL = '#f0ffff';
+export const LOG_WARNING = '#FFC900';
+export const LOG_ERROR = '#FF3600';
+export const LOG_SUCCESS = '#7AFF33';
+
+export default (proc: string, text: string, color = LOG_NORMAL) => {
let i: LogItem = {
timestamp: new Date().toISOString().substr(14, 5),
process: proc,
- text: text
+ text: text,
+ color: color
}
return i;
diff --git a/surface/src/components/Log/channels.ts b/surface/src/components/Log/channels.ts
index 427f0c7..d80d32e 100644
--- a/surface/src/components/Log/channels.ts
+++ b/surface/src/components/Log/channels.ts
@@ -5,6 +5,10 @@ export const GAMEPAD = 'gamepad_listener';
export const SERVO = 'servo';
export const THRUSTERS = 'thruster_listener';
export const IMU = 'imu_listener';
+export const COM = 'com_sender';
+export const GENERAL = 'general';
+export const RAILCAP = 'rail_capture';
+export const RAILPROC = 'rail_process';
export default [
SET_IP,
@@ -13,5 +17,9 @@ export default [
GAMEPAD,
SERVO,
THRUSTERS,
- IMU
+ IMU,
+ COM,
+ GENERAL,
+ RAILCAP,
+ RAILPROC
]
\ No newline at end of file
diff --git a/surface/src/components/Mosaic/Mosaic.scss b/surface/src/components/Mosaic/Mosaic.scss
new file mode 100644
index 0000000..f16a9c0
--- /dev/null
+++ b/surface/src/components/Mosaic/Mosaic.scss
@@ -0,0 +1,3 @@
+.mosaic-btn{
+
+}
\ No newline at end of file
diff --git a/surface/src/components/Mosaic/Mosaic.tsx b/surface/src/components/Mosaic/Mosaic.tsx
new file mode 100644
index 0000000..f48c324
--- /dev/null
+++ b/surface/src/components/Mosaic/Mosaic.tsx
@@ -0,0 +1,33 @@
+import { ipcRenderer } from 'electron';
+import * as React from 'react';
+import './Mosaic.scss';
+
+const Mosaic: React.FC = () => {
+ const [counter, setCounter] = React.useState(0);
+
+ React.useEffect(() => {
+ if(counter == 4){
+ ipcRenderer.send('process_frames');
+ }
+ }, [counter])
+
+ return(
+
+
Mosaic Photo {counter}/5
+
+
+
CoM
+ {values.map((val, idx) => {
+ return(
+
{
+ let temp = [...values];
+ temp[idx] = val;
+ setValues(temp);
+
+ ipcRenderer.send('com_send', temp);
+ }}
+ />
+ )
+ })}
+
+
Buoyancy
+ {values.map((val, idx) => {
+ return(
+
{
+ let temp = [...values];
+ temp[idx] = val;
+ setValues(temp);
+
+ let params: GamepadParams = {
+ type: 'trim',
+ values: temp
+ }
+
+ ipcRenderer.send('compensator', params);
+ }}
+ />
+ )
+ })}
+
+
+
+
+
+
+
+ )
+}
+
+export default Profiles;
\ No newline at end of file
diff --git a/surface/src/components/Profiles/Tweaker/ThrustTweaker.scss b/surface/src/components/Profiles/Tweaker/ThrustTweaker.scss
new file mode 100644
index 0000000..21f254e
--- /dev/null
+++ b/surface/src/components/Profiles/Tweaker/ThrustTweaker.scss
@@ -0,0 +1,43 @@
+.tweaker-container{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: auto auto repeat(3, 1fr) auto auto;
+ grid-auto-flow: column;
+ gap: 5px;
+}
+
+.tweaker-title{
+ width: 100%;
+ text-align: center;
+ border-bottom: solid;
+ grid-column: 1 / 3;
+}
+
+.tweaker-subtitle{
+ @extend .tweaker-title;
+ grid-column: span 1;
+}
+
+.tweaker-subtitle-left{
+ @extend .tweaker-title;
+ grid-column: 1;
+ grid-row: 2;
+}
+
+.tweaker-subtitle-right{
+ @extend .tweaker-title;
+ grid-column: 2;
+ grid-row: 2;
+}
+
+.reverse-container{
+ grid-row: 6;
+ grid-column: 1 / 3;
+ display: flex;
+ justify-content: center;
+}
+
+.fine-slider{
+ grid-row: 7;
+ grid-column: 1/3;
+}
\ No newline at end of file
diff --git a/surface/src/components/Profiles/Tweaker/ThrustTweaker.tsx b/surface/src/components/Profiles/Tweaker/ThrustTweaker.tsx
new file mode 100644
index 0000000..f5626d6
--- /dev/null
+++ b/surface/src/components/Profiles/Tweaker/ThrustTweaker.tsx
@@ -0,0 +1,184 @@
+import { ipcRenderer } from 'electron';
+import * as React from 'react';
+import Slider from '../../Slider/Slider';
+import './ThrustTweaker.scss';
+import {GamepadParams} from '../../../../electron/gamepad';
+import Toggle from '../../Toggle/Toggle';
+
+const TRANSLATION_MAX = 1.0;
+const ROTATION_MAX = 1.0;
+const TRANSLATION_STEP = 0.05;
+const ROTATION_STEP = 0.05;
+
+interface Props {
+ vals: Array
+ fine: number
+ reverse: boolean
+ mode: boolean
+ lockout: boolean
+}
+
+const ThrustTweaker: React.FC = (props) => {
+ const [values, setValues] = React.useState([1.0, 1.0, 1.0, 1.0, 1.0, 1.0]);
+ const [fine, setFine] = React.useState(1.041)
+ const [reverse, setReverse] = React.useState(false);
+ const [mode, setMode] = React.useState(true);
+ const [lockout, setLockout] = React.useState(true);
+
+ React.useEffect(() => {
+ setFine(props.fine);
+
+ let params: GamepadParams = {
+ type: 'absolute',
+ values: [props.fine]
+ }
+
+ ipcRenderer.send('absolute', params);
+ }, [props.fine])
+
+ React.useEffect(() => {
+ setReverse(props.reverse);
+ setMode(props.mode);
+ setLockout(props.lockout);
+
+ let params: GamepadParams = {
+ type: 'reverse',
+ reverse: 'F'
+ }
+
+ if(props.reverse) params.reverse = 'T';
+
+ ipcRenderer.send('reverse', params);
+
+ params = {
+ type: 'mode',
+ mode: 'F'
+ }
+
+ if(props.mode) params.mode = 'T';
+
+ ipcRenderer.send('mode', params);
+
+ params = {
+ type: 'lockout',
+ lockout: 'F'
+ }
+
+ if(props.lockout) params.lockout = 'T'
+
+ ipcRenderer.send('lockout', params);
+
+ }, [props.reverse, props.mode, props.lockout])
+
+ React.useEffect(() => {
+ let temp = [...values];
+ temp = props.vals.map((val, idx) => val);
+ setValues(temp);
+
+ let params: GamepadParams = {
+ type: 'scale',
+ values: temp
+ }
+
+ ipcRenderer.send('gamepad_sock', params);
+ }, [props.vals])
+
+ const updateSwitch = () => {
+ let params: GamepadParams = {
+ type: 'reverse',
+ reverse: 'F'
+ }
+
+ if(!reverse){
+ params.reverse = 'T';
+ }
+
+ setReverse(!reverse);
+
+ ipcRenderer.send('reverse', params);
+ }
+
+ const updateMode = () => {
+ let params: GamepadParams = {
+ type: 'mode',
+ reverse: 'F'
+ }
+
+ if(!mode){
+ params.mode = 'T';
+ }
+
+ setMode(!mode);
+
+ ipcRenderer.send('mode', params);
+ }
+
+ const updateLockout = () => {
+ let params: GamepadParams = {
+ type: 'lockout',
+ lockout: 'F'
+ }
+
+ if(!lockout){
+ params.lockout = 'T';
+ }
+
+ setLockout(!lockout);
+
+ ipcRenderer.send('lockout', params);
+ }
+
+ return(
+
+
Thrust Tweaker
+
Translation
+
Rotation
+ {values.map((v, idx) => {
+ return(
+
{
+ let temp = [...values];
+ temp[idx] = val;
+ setValues(temp);
+
+ let params: GamepadParams = {
+ type: 'scale',
+ values: values
+ }
+
+ ipcRenderer.send('gamepad_sock', params);
+ }
+ }/>
+ )
+ })}
+
+
+
+
+
+
+ {
+ setFine(val);
+
+ let params: GamepadParams = {
+ type: 'absolute',
+ values: [val]
+ }
+
+ ipcRenderer.send('absolute', params);
+ }}/>
+
+
+
Camera Angle
+
{
+ setValue(val);
+ ipcRenderer.send('servo_send', val);
+ }}
+ />
+ {value}°
+
-
Camera Angle
-
- {this.state.value}°
-
+ {min}
+ callback(e)}
+ />
+ {max}
+
+ )
+}
- this.handleChange = this.handleChange.bind(this);
- }
+const ValueDisplay: React.FC = ({value, callback, unit}) => {
+ return(
+ {callback(true)}}>{value}{unit}
+
+ )
+}
+
+const Inputbox: React.FC = ({value, max, min, callback, step}) => {
+ return(
+ e.target.select()}
+ onKeyUp={(e) => {
+ if (e.key === 'Enter') {
+ const target = e.target as HTMLInputElement;
+ target.blur();
+ }
+ }}
+ onBlur={(e) => callback(e)}
+ >
+ )
+}
- handleChange(val) {
- this.setState({value: val.target.value});
- this.props.callback(this.state.value);
- }
- render() {
- return (
-
- )
- }
+const Slider: React.FC = (props) => {
+ const [starting, setStarting] = React.useState(0);
+ const [inputActive, setInputActive] = React.useState(false);
+ React.useEffect(() => {
+ setStarting(Object.assign({}, props).value);
+ }, [])
+
+ return (
+
+
{
+ const target = e.target as HTMLInputElement
+ props.callback(parseFloat(target.value))
+ }}>
+
+
+ {inputActive ? (
+ {
+ let target = e.target as HTMLInputElement
+ let changeto = parseFloat(target.value);
+ if(isNaN(changeto) || changeto === Infinity) {
+ changeto = props.value!;
+ }
+ if(changeto > props.max!) {
+ changeto = props.max!;
+ } else if(changeto < props.min!) {
+ changeto = props.min!;
+ }
+ props.callback(changeto);
+ setInputActive(false);
+ }}>
+ ) : (
+ {
+ setInputActive(bool);
+ }}>
+ )}
+
+
+
+
+
+ )
+}
+
+export default Switch;
\ No newline at end of file
diff --git a/surface/src/components/Thrusters/ThrusterCircle/ThrusterCircle.tsx b/surface/src/components/Thrusters/ThrusterCircle/ThrusterCircle.tsx
index 93b5da5..6895d4b 100644
--- a/surface/src/components/Thrusters/ThrusterCircle/ThrusterCircle.tsx
+++ b/surface/src/components/Thrusters/ThrusterCircle/ThrusterCircle.tsx
@@ -7,56 +7,42 @@ interface Props{
name: string
}
-export default class ThrusterCircle extends React.Component {
- circleStyle: {}
-
- constructor(props: Props) {
- super(props);
-
- this.circleStyle = {
- backgroundImage: 'linear-gradient(91deg, transparent 50%, #A6A6A6 50%), linear-gradient(90deg, #A6A6A6 50%, transparent 50%)'
- };
-
- this.setValue = this.setValue.bind(this);
- this.setValue();
-
- }
-
- componentDidUpdate(){
- this.setValue();
- }
-
- setValue() {
- var color = '#39B4CC';
- if(this.props.thrust < 127){
- color = '#FF4747';
- }
- var output = Math.round((Math.abs(this.props.thrust - 127) / 127) * 360);
+const l180 = (val: number, original: number) => {
+ return({
+ backgroundImage:
+ `linear-gradient(${val + 90}deg, transparent 50%, #A6A6A6 50%),` +
+ `linear-gradient(90deg, #A6A6A6 50%, transparent 50%)`,
+ backgroundColor: original < 127 ? '#FF4747' : '#39B4CC'
+ })
+}
- if(output <= 180){
- this.circleStyle = {
- backgroundImage: 'linear-gradient(' + (output + 90) +'deg, transparent 50%, #A6A6A6 50%),linear-gradient(90deg, #A6A6A6 50%, transparent 50%)',
- backgroundColor: color
- };
- }else{
- this.circleStyle = {
- backgroundImage: 'linear-gradient(' + (output - 90) +'deg, transparent 50%, ' + color + ' 50%),linear-gradient(90deg, #A6A6A6 50%, transparent 50%)',
- backgroundColor: color
- };
- }
- }
+const g180 = (val: number, original: number) => {
+ return({
+ backgroundImage:
+ `linear-gradient(${val - 90}deg, transparent 50%, ${original < 127 ? '#FF4747' : '#39B4CC'} 50%),` +
+ `linear-gradient(90deg, #A6A6A6 50%, transparent 50%)`,
+ backgroundColor: original < 127 ? '#FF4747' : '#39B4CC'
+ })
+}
- render() {
- return (
-
-
-
- {Math.round(((Math.abs(this.props.thrust) - 127) / 127) * 100)}%
-
- {this.props.name}
-
+const ThrusterCircle: React.FC
= (props) => {
+ const [angle, setAngle] = React.useState(Math.round(((Math.abs(props.thrust) - 127) / 127) * 360));
+
+ React.useEffect(() => {
+ setAngle(Math.round(((Math.abs(props.thrust) - 127) / 127) * 360))
+ }, [props.thrust]);
+
+ return(
+
+
+
+ {Math.round(angle / 360 * 100)}%
+
+ {props.name}
-
- );
- }
+
+ )
}
+
+export default ThrusterCircle;
\ No newline at end of file
diff --git a/surface/src/components/Thrusters/ThrusterInfo/ThrusterInfo.tsx b/surface/src/components/Thrusters/ThrusterInfo/ThrusterInfo.tsx
index e91937c..de532fd 100644
--- a/surface/src/components/Thrusters/ThrusterInfo/ThrusterInfo.tsx
+++ b/surface/src/components/Thrusters/ThrusterInfo/ThrusterInfo.tsx
@@ -5,35 +5,25 @@ import './ThrusterInfo.scss';
const INIT_THRUST = 127;
-interface State{
- thrust: Array
-}
-
-export default class ThrusterInfo extends React.Component<{}, State> {
- constructor(props: {}) {
- super(props);
+const ThrusterInfo: React.FC = () => {
+ const [thrust, setThrust] = React.useState>(Array(8).fill(INIT_THRUST));
- this.state = {thrust: [INIT_THRUST, INIT_THRUST, INIT_THRUST, INIT_THRUST, INIT_THRUST, INIT_THRUST, INIT_THRUST, INIT_THRUST]};
- }
+ ipcRenderer.on('thrusters', (e, data: Array) => {
+ setThrust(data)
+ });
- componentDidMount(){
- ipcRenderer.on('thrusters', (e, data: Array) => {
- this.setState({thrust: data})
- });
- }
-
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
- );
- }
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
}
+
+export default ThrusterInfo;
diff --git a/surface/src/components/Thrusters/Tweaker/ThrustTweaker.scss b/surface/src/components/Thrusters/Tweaker/ThrustTweaker.scss
deleted file mode 100644
index 446c097..0000000
--- a/surface/src/components/Thrusters/Tweaker/ThrustTweaker.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.tweaker-container{
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- grid-template-rows: repeat(5, 1fr);
- gap: 5px;
-}
-
-.tweaker-title{
- width: 100%;
- text-align: center;
- border-bottom: solid;
- grid-column: 1 / 3;
-}
-
-.tweaker-subtitle{
- @extend .tweaker-title;
- grid-column: span 1;
-}
\ No newline at end of file
diff --git a/surface/src/components/Thrusters/Tweaker/ThrustTweaker.tsx b/surface/src/components/Thrusters/Tweaker/ThrustTweaker.tsx
deleted file mode 100644
index bc664b8..0000000
--- a/surface/src/components/Thrusters/Tweaker/ThrustTweaker.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ipcRenderer } from 'electron';
-import * as React from 'react';
-import Slider from '../../Slider/Slider';
-import './ThrustTweaker.scss';
-
-interface State{
- values: Array
-}
-
-export default class Servo extends React.Component<{}, State>{
- constructor(props){
- super(props);
-
- this.state = {
- values: [0, 0, 0, 0, 0, 0]
- }
-
- this.updateValue = this.updateValue.bind(this);
- }
-
- updateValue(value){
-
- }
-
- render(){
- return(
-
-
Thrust Tweaker
-
Translation
-
Rotation
-
-
-
-
-
-
- 
+
-