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 --- //--- extract relevant items from json object ---
cJSON *x_json = cJSON_GetObjectItem(payload, "x"); cJSON *x_json = cJSON_GetObjectItem(payload, "x");
cJSON *y_json = cJSON_GetObjectItem(payload, "y"); 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 --- //--- save items to struct ---
joystickData_t data = { }; joystickData_t data = { };
@ -143,20 +141,26 @@ esp_err_t httpJoystick::receiveHttpData(httpd_req_t *req){
//convert json to double to float //convert json to double to float
data.x = static_cast<float>(x_json->valuedouble); data.x = static_cast<float>(x_json->valuedouble);
data.y = static_cast<float>(y_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 //log received and parsed values
ESP_LOGI(TAG, "received values: x=%.3f y=%.3f radius=%.3f angle=%.3f", ESP_LOGI(TAG, "received values: x=%.3f y=%.3f",
data.x, data.y, data.radius, data.angle); data.x, data.y);
// scaleCoordinate(input, min, max, center, tolerance_zero_per, tolerance_end_per) // 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.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); 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)); 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; data.angle = (atan(data.y/data.x) * 180) / 3.141;
//--- evaluate position ---
data.position = joystick_evaluatePosition(data.x, data.y); data.position = joystick_evaluatePosition(data.x, data.y);
//log processed values //log processed values
ESP_LOGI(TAG, "processed values: x=%.3f y=%.3f radius=%.3f angle=%.3f pos=%s", 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]); 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> <title>armchair ctl</title>
</head> </head>
<body> <body style="background-color:#001427; color:white;">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--

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

@ -7,11 +7,9 @@ import React, { useState} from 'react';
function App() { function App() {
//declare variables that can be used and updated in html //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 [x_html, setX_html] = useState(0);
const [y_html, setY_html] = useState(0); const [y_html, setY_html] = useState(0);
const [ip, setIp] = useState("10.0.0.66"); const [ip, setIp] = useState("10.0.0.66");
const [radius_html, setRadius_html] = useState(0);
@ -19,7 +17,7 @@ function App() {
//=========== config ============ //=========== config ============
//=============================== //===============================
const decimalPlaces = 3; 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 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 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 y = ScaleCoordinateTolerance(e.y);
const x = ScaleCoordinate(e.x); const x = ScaleCoordinate(e.x);
const y = ScaleCoordinate(e.y); 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 //create object with necessary data
const joystick_data={ const joystick_data={
x: x, x: x,
y: y, y: y
radius: radius,
angle: angle
} }
//send object with joystick data as json to controller //send object with joystick data as json to controller
httpSendObject(joystick_data); httpSendObject(joystick_data);
//update variables for html //update variables for html
setX_html(joystick_data.x); setX_html(joystick_data.x);
setY_html(joystick_data.y); setY_html(joystick_data.y);
setRadius_html(joystick_data.radius);
setAngle_html(joystick_data.angle);
}; };
@ -154,15 +145,11 @@ function App() {
const joystick_data={ const joystick_data={
x: 0, x: 0,
y: 0, y: 0,
radius: 0,
angle: 0
} }
//update variables for html //update variables for html
setX_html(0); setX_html(0);
setY_html(0); setY_html(0);
setRadius_html(0);
setAngle_html(0);
//send object with joystick data as json to controller //send object with joystick data as json to controller
httpSendObject(joystick_data); httpSendObject(joystick_data);
}; };
@ -177,14 +164,14 @@ function App() {
<div style={{display:'flex', justifyContent:'center', alignItems:'center', height:'100vh'}}> <div style={{display:'flex', justifyContent:'center', alignItems:'center', height:'100vh'}}>
<div> <div>
<div style={{position: 'absolute', top: '0'}}> <div style={{position: 'absolute', top: '0', left: '0', width: '100%'}}>
<h1>Joystick ctl</h1> <h1 style={{width:'100%', textAlign:'center'}}>Armchair ctl</h1>
</div> </div>
<Joystick <Joystick
size={joystickSize} size={joystickSize}
sticky={false} sticky={false}
baseColor="red" baseColor="#8d0801"
stickColor="blue" stickColor="#708d81"
throttle={throttle} throttle={throttle}
move={handleMove} move={handleMove}
stop={handleStop} stop={handleStop}
@ -193,8 +180,6 @@ function App() {
<ul> <ul>
<li> x={x_html} </li> <li> x={x_html} </li>
<li> y={y_html} </li> <li> y={y_html} </li>
<li> radius={radius_html} </li>
<li> angle={angle_html} </li>
</ul> </ul>
</div> </div>
</div> </div>