j/armchair_fw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update App: Dark theme, remove radius and angle

Browse Source 
Update react web app:
  - add dark background color
  - change joystick colors
  - increase joystick size by 50px
  - change heading
  - remove angle and radius
    - not displaying anymore
    - not sending to api anymore

Update http.cpp:
  - remove radius and angle from json parsing
  - limit radius to 1
This commit is contained in:
jonny_ji7
2022-06-24 21:38:40 +02:00
parent 1da03e9429
commit b811f77c8e
3 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
react-app/public/index.html
View File

@@ -10,7 +10,7 @@
/>
<title>armchair ctl</title>
</head>
<body>
<body style="background-color:#001427; color:white;">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--

29
react-app/src/App.js vendored
View File

@@ -7,11 +7,9 @@ import React, { useState} from 'react';
function App() {
//declare variables that can be used and updated in html
const [angle_html, setAngle_html] = useState(0);
const [x_html, setX_html] = useState(0);
const [y_html, setY_html] = useState(0);
const [ip, setIp] = useState("10.0.0.66");
const [radius_html, setRadius_html] = useState(0);
@@ -19,7 +17,7 @@ function App() {
//=========== config ============
//===============================
const decimalPlaces = 3;
const joystickSize = 200; //affects scaling of coordinates and size of joystick on website
const joystickSize = 250; //affects scaling of coordinates and size of joystick on website
const throttle = 300; //throtthe interval the joystick sends data while moving (ms)
const toleranceSnapToZeroPer = 20;//percentage of moveable range the joystick can be moved from the axix and value stays at 0
@@ -122,26 +120,19 @@ function App() {
//const y = ScaleCoordinateTolerance(e.y);
const x = ScaleCoordinate(e.x);
const y = ScaleCoordinate(e.y);
//--- scale radius ---
const radius = (e.distance / 100).toFixed(5);
//--- calculate angle ---
const angle = ( Math.atan( y / x ) * 180 / Math.PI ).toFixed(2);
//create object with necessary data
const joystick_data={
x: x,
y: y,
radius: radius,
angle: angle
y: y
}
//send object with joystick data as json to controller
httpSendObject(joystick_data);
//update variables for html
setX_html(joystick_data.x);
setY_html(joystick_data.y);
setRadius_html(joystick_data.radius);
setAngle_html(joystick_data.angle);
};
@@ -154,15 +145,11 @@ function App() {
const joystick_data={
x: 0,
y: 0,
radius: 0,
angle: 0
}
//update variables for html
setX_html(0);
setY_html(0);
setRadius_html(0);
setAngle_html(0);
//send object with joystick data as json to controller
httpSendObject(joystick_data);
};
@@ -177,14 +164,14 @@ function App() {
<div style={{display:'flex', justifyContent:'center', alignItems:'center', height:'100vh'}}>
<div>
<div style={{position: 'absolute', top: '0'}}>
<h1>Joystick ctl</h1>
<div style={{position: 'absolute', top: '0', left: '0', width: '100%'}}>
<h1 style={{width:'100%', textAlign:'center'}}>Armchair ctl</h1>
</div>
<Joystick
size={joystickSize}
sticky={false}
baseColor="red"
stickColor="blue"
baseColor="#8d0801"
stickColor="#708d81"
throttle={throttle}
move={handleMove}
stop={handleStop}
@@ -193,8 +180,6 @@ function App() {
<ul>
<li> x={x_html} </li>
<li> y={y_html} </li>
<li> radius={radius_html} </li>
<li> angle={angle_html} </li>
</ul>
</div>
</div>