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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
main/http.cpp
View File

@ -133,8 +133,6 @@ esp_err_t httpJoystick::receiveHttpData(httpd_req_t *req){
//--- extract relevant items from json object ---
cJSON *x_json = cJSON_GetObjectItem(payload, "x");
cJSON *y_json = cJSON_GetObjectItem(payload, "y");
cJSON *radius_json = cJSON_GetObjectItem(payload, "radius");
cJSON *angle_json = cJSON_GetObjectItem(payload, "angle");
//--- save items to struct ---
joystickData_t data = { };
@ -143,20 +141,26 @@ esp_err_t httpJoystick::receiveHttpData(httpd_req_t *req){
//convert json to double to float
data.x = static_cast<float>(x_json->valuedouble);
data.y = static_cast<float>(y_json->valuedouble);
data.radius = static_cast<float>(radius_json->valuedouble);
data.angle = static_cast<float>(angle_json->valuedouble);
//log received and parsed values
ESP_LOGI(TAG, "received values: x=%.3f y=%.3f radius=%.3f angle=%.3f",
data.x, data.y, data.radius, data.angle);
ESP_LOGI(TAG, "received values: x=%.3f y=%.3f",
data.x, data.y);
// scaleCoordinate(input, min, max, center, tolerance_zero_per, tolerance_end_per)
data.x = scaleCoordinate(data.x+1, 0, 2, 1, config.toleranceZeroX_Per, config.toleranceEndPer);
data.y = scaleCoordinate(data.y+1, 0, 2, 1, config.toleranceZeroY_Per, config.toleranceEndPer);
//--- re-calculate radius, angle and position with new/scaled coordinates ---
//--- calculate radius with new/scaled coordinates ---
data.radius = sqrt(pow(data.x,2) + pow(data.y,2));
//TODO: radius tolerance? (as in original joystick func)
//limit radius to 1
if (data.radius > 1) {
data.radius = 1;
}
//--- calculate angle ---
data.angle = (atan(data.y/data.x) * 180) / 3.141;
//--- evaluate position ---
data.position = joystick_evaluatePosition(data.x, data.y);
//log processed values
ESP_LOGI(TAG, "processed values: x=%.3f y=%.3f radius=%.3f angle=%.3f pos=%s",
data.x, data.y, data.radius, data.angle, joystickPosStr[(int)data.position]);

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>