diff --git a/main/http.cpp b/main/http.cpp
index a544c54..0c76184 100644
--- a/main/http.cpp
+++ b/main/http.cpp
@@ -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]);
diff --git a/react-app/public/index.html b/react-app/public/index.html
index fc4c89c..41b6646 100644
--- a/react-app/public/index.html
+++ b/react-app/public/index.html
@@ -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>
<!--
diff --git a/react-app/src/App.js b/react-app/src/App.js
index 76921c4..486693e 100644
--- a/react-app/src/App.js
+++ b/react-app/src/App.js
@@ -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>