Merge branch 'react-app'

.gitignore

@@ -1,7 +1,26 @@
-# ESP-IDF default build directory
+# ESP-IDF
 build
 sdkconfig
+sdkconfig.old
+
 
 # VIM files
 *.swp
 *.swo
+
+
+# React
+react-app/build
+react-app/.pnp
+.pnp.js
+node_modules
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

README.md

@@ -15,10 +15,31 @@ yay -S esp-idf #alternatively clone the esp-idf repository from github
 ```
 git clone git@github.com:Jonny999999/armchair_fw
 ```
+### Instal node packages
+For the react app packages have to be installed with npm TODO: add this to cmake?
+```
+cd react-app
+npm install
+```
 
 
 
 # Compilation
+## react-webapp
+For the webapp to work on the esp32 it has to be built.
+When flashing, the folder react-app/build is flashed to siffs (which is used as webroot) onto the esp32.
+The following command builds the react webapp and creates this folder
+TODO: add this to flash target with cmake?
+```bash
+cd react-app
+#compile
+npm run build
+#remove unwanted license file (filename too long for spiffs)
+rm build/static/js/main.8f9aec76.js.LICENSE.txt
+```
+Note: Use `npm start` for starting the webapp locally for testing
+
+## esp project
 ### Set up environment
 ```bash
 source /opt/esp-idf/export.sh
@@ -76,7 +97,19 @@ A diagram which shows what components are connected to which terminals of the pc
 
 # Usage
 ## Switch functions
-**previous functions - not implemented yet**
+**Currently implemented**
+| Count | Action |
+| --- | ---|
+| 1 | |
+| 2 | toggle IDLE mode |
+| 3 | |
+| 4 | toggle between HTTP and JOYSTICK mode|
+| 5 | |
+| 6 | toggle between MASSAGE and JOYSTICK mode |
+| 7 | |
+
+
+**previous functions - not implemented**
 | Count | Action |
 | --- | ---|
 | 1 | define joystick center |

main/CMakeLists.txt

@@ -1,2 +1,18 @@
-idf_component_register(SRCS "main.cpp" "motordrivers.cpp" "motorctl.cpp" "config.cpp" "joystick.cpp" "buzzer.cpp" "control.cpp" "button.cpp" "fan.cpp" "wifi.c" "http.cpp"
-                    INCLUDE_DIRS ".")
+idf_component_register(
+    SRCS 
+        "main.cpp"
+        "motordrivers.cpp"
+        "motorctl.cpp"
+        "config.cpp"
+        "joystick.cpp"
+        "buzzer.cpp"
+        "control.cpp"
+        "button.cpp"
+        "fan.cpp"
+        "wifi.c"
+        "http.cpp"
+    INCLUDE_DIRS 
+        "."
+    )
+
+spiffs_create_partition_image(spiffs ../react-app/build FLASH_IN_PROJECT)

main/http.cpp

@@ -190,11 +190,11 @@ void http_init_server()
       };
   httpd_register_uri_handler(server, &joystick_url);
 
-//  httpd_uri_t default_url = {
-//      .uri = "/*",
-//      .method = HTTP_GET,
-//      .handler = on_default_url};
-//  httpd_register_uri_handler(server, &default_url);
+  httpd_uri_t default_url = {
+      .uri = "/*",
+      .method = HTTP_GET,
+      .handler = on_default_url};
+  httpd_register_uri_handler(server, &default_url);
 
 //  httpd_uri_t socket_joystick_url = {
 //      .uri = "/ws-api/joystick",

main/main.cpp

@@ -9,6 +9,7 @@ extern "C"
 #include "driver/gpio.h"
 #include "esp_log.h"
 #include "sdkconfig.h"
+#include "esp_spiffs.h"    
 
 #include "driver/ledc.h"
 
@@ -99,6 +100,29 @@ void task_fans( void * pvParameters ){
 
 
 
+//=================================
+//========== init spiffs ==========
+//=================================
+//initialize spi flash filesystem (used for webserver)
+void init_spiffs(){
+    ESP_LOGI(TAG, "init spiffs");
+    esp_vfs_spiffs_conf_t esp_vfs_spiffs_conf = {
+        .base_path = "/spiffs",
+        .partition_label = NULL,
+        .max_files = 5,
+        .format_if_mount_failed = true};
+    esp_vfs_spiffs_register(&esp_vfs_spiffs_conf);
+
+    size_t total = 0;
+    size_t used = 0;
+    esp_spiffs_info(NULL, &total, &used);
+
+    ESP_LOGI(TAG, "SPIFFS: total %d, used %d", total, used);
+    esp_vfs_spiffs_unregister(NULL);
+}
+
+
+
 //=================================
 //=========== app_main ============
 //=================================
@@ -167,6 +191,8 @@ extern "C" void app_main(void) {
     //--- initialize nvs-flash and netif (needed for wifi) ---
     wifi_initNvs_initNetif();
 
+    //--- initialize spiffs ---
+    init_spiffs();
 
     //--- initialize and start wifi ---
     //FIXME: run wifi_init_client or wifi_init_ap as intended from control.cpp when switching state 

partitions.csv

@@ -0,0 +1,6 @@
+# Name,   Type, SubType, Offset,  Size, Flags
+# Note: if you have increased the bootloader size, make sure to update the offsets to avoid overlap
+nvs,      data, nvs,     ,        0x6000,
+phy_init, data, phy,     ,        0x1000,
+factory,  app,  factory, ,        1M,
+spiffs,   data, spiffs,  ,        1M

react-app/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "react-new",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-joystick-component": "^4.0.1",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4",
+    "websocket": "^1.0.34"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

react-app/public/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Armchair control webapp"
+    />
+    <title>armchair ctl</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

react-app/src/App.js

@@ -0,0 +1,245 @@
+import { Joystick } from 'react-joystick-component';
+import React, { useState} from 'react';
+//import { w3cwebsocket as W3CWebSocket } from "websocket";
+
+
+
+
+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);
+
+
+
+    //===============================
+    //=========== config ============
+    //===============================
+    const decimalPlaces = 3;
+    const joystickSize = 200; //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
+
+
+
+    //-------------------------------------------------
+    //------- Scale coordinate, apply tolerance -------
+    //-------------------------------------------------
+    //function that:
+    // - scales the coodinate to a range of -1 to 1
+    // - snaps 0 zero for a given tolerance in percent
+    // - rounds value do given decimal places
+    // - TODO: add threshold it snaps to 1 / -1 (100%) toleranceEnd
+    const ScaleCoordinate = (input) => {
+        //calc tolerance threshold and available range
+        const tolerance = joystickSize/2 * toleranceSnapToZeroPer/100;
+        const range = joystickSize/2 - tolerance;
+        let result = 0;
+
+        //console.log("value:",input,"tolerance:",tolerance,"   range:",range);
+
+        //input positive and above 'snap to zero' threshold
+        if ( input > 0 && input > tolerance ){
+            result = ((input-tolerance)/range).toFixed(decimalPlaces);
+        }
+        //input negative and blow 'snap to zero' threshold
+        else if ( input < 0 && input < -tolerance ){
+            result = ((input+tolerance)/range).toFixed(decimalPlaces);
+        }
+        //inside threshold around zero
+        else {
+            result = 0;
+        }
+
+        //return result
+        //console.log("result:", result, "\n");
+        return result;
+    }
+
+
+
+
+    //-------------------------------------------
+    //------- Senda data via POST request -------
+    //-------------------------------------------
+    //function that sends an object as json to the esp32 with a http post request
+    const httpSendObject = async (object_data) => {
+        //debug log
+        console.log("Sending:", object_data);
+
+        let json = JSON.stringify(object_data);
+        //console.log("json string:", json);
+        //remove quotes around numbers:
+        //so cJSON parses the values as actua[l numbers than strings
+        const regex2 = /"(-?[0-9]+\.{0,1}[0-9]*)"/g
+        json = json.replace(regex2, '$1')
+        //console.log("json removed quotes:", json);
+
+        //--- API  url / ip ---
+        //await fetch("http://10.0.1.69/api/joystick", {
+        //await fetch("http://10.0.1.72/api/joystick", {
+        await fetch("api/joystick", {
+            method: "POST",
+            //apparently browser sends OPTIONS request before actual POST request, this OPTIONS request was not handled by esp32
+            //also the custom set Access-Control-Allow-Origin header in esp32 url header was not read because of that
+            //changed content type to text/plain to workaround this
+            //https://stackoverflow.com/questions/1256593/why-am-i-getting-an-options-request-instead-of-a-get-request
+            headers: {
+                //"Content-Type": "application/json",
+                "Content-Type": "text/plain",
+            },
+            body: json,
+        })
+            //.then((response) => console.log(response));
+    };
+
+
+
+
+    //---------------------------------------
+    //--- function when joystick is moved ---
+    //---------------------------------------
+    //function that is run for each move event
+    //evaluate coordinates and send to esp32
+    const handleMove = (e) => {
+        //console.log("data from joystick-element X:" + e.x + " Y:" + e.y + " distance:" + e.distance);
+        //calculate needed variables
+        const x = ScaleCoordinate(e.x);
+        const y = ScaleCoordinate(e.y);
+        const radius = (e.distance / 100).toFixed(5);
+        const angle = ( Math.atan( y / x ) * 180 / Math.PI ).toFixed(2);
+
+        //crate object with necessary data
+        const joystick_data={
+            x: x,
+            y: y,
+            radius: radius, 
+            angle: angle
+        }
+        //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);
+    };
+
+
+
+    //------------------------------------------
+    //--- function when joystick is released ---
+    //------------------------------------------
+    const handleStop = (e) => {
+        //create object with all values 0
+        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);
+    };
+
+
+
+    //=============================
+    //======== return html ========
+    //=============================
+    return (
+        <>
+
+        <div style={{display:'flex', justifyContent:'center', alignItems:'center', height:'100vh'}}>
+            <div>
+                <div style={{position: 'absolute', top: '0'}}>
+                    <h1>Joystick ctl</h1>
+                </div>
+                <Joystick 
+                    size={joystickSize} 
+                    sticky={false} 
+                    baseColor="red" 
+                    stickColor="blue" 
+                    throttle={throttle}
+                    move={handleMove} 
+                    stop={handleStop}
+                >
+                </Joystick>
+                <ul>
+                    <li> x={x_html} </li>
+                    <li> y={y_html} </li>
+                    <li> radius={radius_html} </li>
+                    <li> angle={angle_html} </li>
+                </ul>
+            </div>
+        </div>
+
+      {/*
+      buttons for changing the api IP
+      <div>
+      <a>current ip used: {ip}</a>
+      <button onClick={() => {setIp("10.0.0.66")}} >10.0.0.66 (BKA-network)</button>
+      </div>
+      */}
+    
+        </>
+    );
+}
+
+export default App;
+
+
+
+
+//del, testing, unused code
+//---------------------------------------------
+//--------- Send data via websocket -----------
+//---------------------------------------------
+//moved to normal POST request since websocket connection was unreliable on esp32
+//    //create websocket
+//    const websocket = useRef(null);
+//    //const socketUrl = "ws://" + window.location.host + "/ws-api/servo";
+//    const socketUrl = "ws://10.0.1.69/ws-api/joystick";
+//    useEffect(() => {
+//        websocket.current = new W3CWebSocket(socketUrl);
+//        websocket.current.onmessage = (message) => {
+//            console.log('got reply! ', message);
+//        };
+//        websocket.current.onopen = (event) => {
+//            console.log('OPENED WEBSOCKET', event);
+//            //sendJoystickData(0, 0, 0, 0);
+//            websocket.current.send("");
+//        };
+//        websocket.current.onclose = (event) => {
+//            console.log('CLOSED WEBSOCKET', event);
+//        };
+//        return () => websocket.current.close();
+//    }, [])
+//
+//
+//
+//    //function for sending joystick data (provided as parameters) to controller via websocket
+//    const sendJoystickDataWebsocket = (x, y, radius, angle) => {
+//        //debug log
+//        console.log("Sending:\n  X:" + x + "\n  Y:" + y + "\n  radius:" + radius + "\n  angle: " + angle);
+//
+//        websocket.current.send(
+//            JSON.stringify({
+//                x: x,
+//                y: y,
+//                radius: radius,
+//                angle: angle
+//            })
+//        );
+//    }
+

react-app/src/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals