I am looking for a way to easily modify code

Projects Interfacing w/ Software on the Computer
1

Hi! I have been working on a code for a while that I can easily use, for example, a web server or serial connection. this is the default code.

#include <Arduino.h>
#include <BleKeyboard.h>

BleKeyboard bleKeyboard("SmarStick™", "SmartStick_electronics");



const int pinVRX = 32; 
const int pinVRY = 33; 
const int pinSW = 21;  
const int pinOBLED = 2; 


const int threshold = 300; 
int neutralX, neutralY;

void setup() {
  Serial.begin(9600);
  bleKeyboard.begin();
  pinMode(pinVRX, INPUT);
  pinMode(pinVRY, INPUT);
  pinMode(pinSW, INPUT_PULLUP); 
  pinMode(pinOBLED, OUTPUT); 

 
  neutralX = analogRead(pinVRX);
  neutralY = analogRead(pinVRY);
}

void loop() {
 
  int xValue = analogRead(pinVRX);
  int yValue = analogRead(pinVRY);
  bool buttonPressed = !digitalRead(pinSW); 

  
  int deltaX = xValue - neutralX;
  int deltaY = yValue - neutralY;

  
  if (deltaX > threshold) {
    joystick_left();
  } else if (deltaX < -threshold) {
    joystick_right();
  } else if (deltaY > threshold) {
    joystick_up();
  } else if (deltaY < -threshold) {
    joystick_down();
  } else {

  }

 
  if (buttonPressed) {
    joystick_button();
  }

  
  if (bleKeyboard.isConnected()) {
    digitalWrite(pinOBLED, LOW); 
  } else {
    
    digitalWrite(pinOBLED, HIGH);
    delay(500);
    digitalWrite(pinOBLED, LOW);
    delay(500);
  }

  
  delay(100);
}


void joystick_up() {
  Serial.println("naar boven");
  //Changeable action here
  bleKeyboard.releaseAll();
}

void joystick_left() {
  Serial.println("naar links");
  //Changeable action here
  bleKeyboard.releaseAll();
}

void joystick_right() {
  Serial.println("naar rechts");
  //Changeable action here
  bleKeyboard.releaseAll();
}

void joystick_down() {
  Serial.println("naar beneden");
  //Changeable action here
  bleKeyboard.releaseAll();
}


void joystick_button() {
  Serial.println("Joystickknop ingedrukt");
  //Changeable action here
  bleKeyboard.releaseAll();
  delay(500);
}

I want people to be able to easily select what will be placed where it currently says: //Changeable action here. I have created an HTML code where you can select what happens with one of the Changeable actions. this is the HTML code:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartStick_electronics</title>
</head>
<body>
    <h1>Pas uw SmartStick aan:</h1>
    <form id="codeForm">
        <label for="joystick_up">Optie joystick omhoog:</label>
        <select id="joystick_up">
            <!-- Dropdown-opties hier -->
            <option value="//geen actie">Geen actie</option>
            <option value="  bleKeyboard.press(KEY_LEFT_ARROW);"> pijltje naar links</option> 
            <option value="  bleKeyboard.press(KEY_RIGHT_ARROW);"> pijltje naar rechts</option> 
            <option value=" bleKeyboard.press(KEY_UP_ARROW);"> pijltje omhoog</option> 
            <option value=" bleKeyboard.press(KEY_DOWN_ARROW);"> pijltje omlaag</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_WWW_BACK);"> Vorige pagina(webbrowser)</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_CALCULATOR);"> Open Rekenmachine</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_NEXT_TRACK);"> Volgend nummer/video</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_PREVIOUS_TRACK);"> vorige nummer/video</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_STOP);"> Stop Media</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_MUTE);"> Geluid dempen</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_UP);"> Volume Hoger</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_DOWN);"> Volume omlaag</option> 
            <option value=" bleKeyboard.press(KEY_TAB);"> Tab toets</option> 
            <option value=" bleKeyboard.press(KEY_RETURN);"> enter toets</option> 
            <option value=" bleKeyboard.press(KEY_ESC);"> Esc toets</option> 
            <option value=" bleKeyboard.press(KEY_PRTSC);"> Print Screen toets</option> 
            <option value=" bleKeyboard.press(KEY_DELETE);"> Delete toets</option> 
            <option value=" bleKeyboard.press(KEY_HOME);"> Home toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_0);"> 0 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_1);"> 1 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_2);"> 2 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_3);"> 3 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_4);"> 4 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_5);"> 5 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_16);"> 6 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_7);"> 7 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_8);"> 8 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_9);"> 9 toets</option> 
            <option value=" bleKeyboard.press('A');"> A</option> 
            <option value=" bleKeyboard.press('B');"> B</option> 
            <option value=" bleKeyboard.press('C);"> C</option> 
            <option value=" bleKeyboard.press('D');"> D</option> 
            <option value=" bleKeyboard.press('E');"> E</option> 
            <option value=" bleKeyboard.press('F');"> F</option> 
            <option value=" bleKeyboard.press('G');"> G</option> 
            <option value=" bleKeyboard.press('H');"> H</option> 
            <option value=" bleKeyboard.press('I');"> I</option> 
            <option value=" bleKeyboard.press('J');"> J</option> 
            <option value=" bleKeyboard.press('K');"> K</option> 
            <option value=" bleKeyboard.press('L');"> L</option> 
            <option value=" bleKeyboard.press('M');"> M</option> 
            <option value=" bleKeyboard.press('N');"> N</option> 
            <option value=" bleKeyboard.press('O');"> O</option> 
            <option value=" bleKeyboard.press('P');"> P</option> 
            <option value=" bleKeyboard.press('Q');"> Q</option> 
            <option value=" bleKeyboard.press('R');"> R</option> 
            <option value=" bleKeyboard.press('S');"> S</option> 
            <option value=" bleKeyboard.press('T');"> T</option> 
            <option value=" bleKeyboard.press('U');"> U</option> 
            <option value=" bleKeyboard.press('V');"> V</option> 
            <option value=" bleKeyboard.press('W');"> W</option> 
            <option value=" bleKeyboard.press('X');"> X</option> 
            <option value=" bleKeyboard.press('Y');"> Y</option> 
            <option value=" bleKeyboard.press('Z');"> Z</option> 
            
        </select><br><br>

        <label for="joystick_left">Optie joystick naar links:</label>
        <select id="joystick_left">
            <!-- Dropdown-opties hier -->
            <option value="//geen actie">Geen actie</option>
            <option value="  bleKeyboard.press(KEY_LEFT_ARROW);"> pijltje naar links</option> 
            <option value="  bleKeyboard.press(KEY_RIGHT_ARROW);"> pijltje naar rechts</option> 
            <option value=" bleKeyboard.press(KEY_UP_ARROW);"> pijltje omhoog</option> 
            <option value=" bleKeyboard.press(KEY_DOWN_ARROW);"> pijltje omlaag</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_WWW_BACK);"> Vorige pagina(webbrowser)</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_CALCULATOR);"> Open Rekenmachine</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_NEXT_TRACK);"> Volgend nummer/video</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_PREVIOUS_TRACK);"> vorige nummer/video</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_STOP);"> Stop Media</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_MUTE);"> Geluid dempen</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_UP);"> Volume Hoger</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_DOWN);"> Volume omlaag</option> 
            <option value=" bleKeyboard.press(KEY_TAB);"> Tab toets</option> 
            <option value=" bleKeyboard.press(KEY_RETURN);"> enter toets</option> 
            <option value=" bleKeyboard.press(KEY_ESC);"> Esc toets</option> 
            <option value=" bleKeyboard.press(KEY_PRTSC);"> Print Screen toets</option> 
            <option value=" bleKeyboard.press(KEY_DELETE);"> Delete toets</option> 
            <option value=" bleKeyboard.press(KEY_HOME);"> Home toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_0);"> 0 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_1);"> 1 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_2);"> 2 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_3);"> 3 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_4);"> 4 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_5);"> 5 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_16);"> 6 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_7);"> 7 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_8);"> 8 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_9);"> 9 toets</option> 
            <option value=" bleKeyboard.press('A');"> A</option> 
            <option value=" bleKeyboard.press('B');"> B</option> 
            <option value=" bleKeyboard.press('C);"> C</option> 
            <option value=" bleKeyboard.press('D');"> D</option> 
            <option value=" bleKeyboard.press('E');"> E</option> 
            <option value=" bleKeyboard.press('F');"> F</option> 
            <option value=" bleKeyboard.press('G');"> G</option> 
            <option value=" bleKeyboard.press('H');"> H</option> 
            <option value=" bleKeyboard.press('I');"> I</option> 
            <option value=" bleKeyboard.press('J');"> J</option> 
            <option value=" bleKeyboard.press('K');"> K</option> 
            <option value=" bleKeyboard.press('L');"> L</option> 
            <option value=" bleKeyboard.press('M');"> M</option> 
            <option value=" bleKeyboard.press('N');"> N</option> 
            <option value=" bleKeyboard.press('O');"> O</option> 
            <option value=" bleKeyboard.press('P');"> P</option> 
            <option value=" bleKeyboard.press('Q');"> Q</option> 
            <option value=" bleKeyboard.press('R');"> R</option> 
            <option value=" bleKeyboard.press('S');"> S</option> 
            <option value=" bleKeyboard.press('T');"> T</option> 
            <option value=" bleKeyboard.press('U');"> U</option> 
            <option value=" bleKeyboard.press('V');"> V</option> 
            <option value=" bleKeyboard.press('W');"> W</option> 
            <option value=" bleKeyboard.press('X');"> X</option> 
            <option value=" bleKeyboard.press('Y');"> Y</option> 
            <option value=" bleKeyboard.press('Z');"> Z</option> 
            
        </select><br><br>

        <label for="joystick_right">Optie joystick naar rechts:</label>
        <select id="joystick_right">
            <!-- Dropdown-opties hier -->
            <option value="//geen actie">Geen actie</option>
            <option value="  bleKeyboard.press(KEY_LEFT_ARROW);"> pijltje naar links</option> 
            <option value="  bleKeyboard.press(KEY_RIGHT_ARROW);"> pijltje naar rechts</option> 
            <option value=" bleKeyboard.press(KEY_UP_ARROW);"> pijltje omhoog</option> 
            <option value=" bleKeyboard.press(KEY_DOWN_ARROW);"> pijltje omlaag</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_WWW_BACK);"> Vorige pagina(webbrowser)</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_CALCULATOR);"> Open Rekenmachine</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_NEXT_TRACK);"> Volgend nummer/video</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_PREVIOUS_TRACK);"> vorige nummer/video</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_STOP);"> Stop Media</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_MUTE);"> Geluid dempen</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_UP);"> Volume Hoger</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_DOWN);"> Volume omlaag</option> 
            <option value=" bleKeyboard.press(KEY_TAB);"> Tab toets</option> 
            <option value=" bleKeyboard.press(KEY_RETURN);"> enter toets</option> 
            <option value=" bleKeyboard.press(KEY_ESC);"> Esc toets</option> 
            <option value=" bleKeyboard.press(KEY_PRTSC);"> Print Screen toets</option> 
            <option value=" bleKeyboard.press(KEY_DELETE);"> Delete toets</option> 
            <option value=" bleKeyboard.press(KEY_HOME);"> Home toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_0);"> 0 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_1);"> 1 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_2);"> 2 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_3);"> 3 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_4);"> 4 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_5);"> 5 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_16);"> 6 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_7);"> 7 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_8);"> 8 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_9);"> 9 toets</option> 
            <option value=" bleKeyboard.press('A');"> A</option> 
            <option value=" bleKeyboard.press('B');"> B</option> 
            <option value=" bleKeyboard.press('C);"> C</option> 
            <option value=" bleKeyboard.press('D');"> D</option> 
            <option value=" bleKeyboard.press('E');"> E</option> 
            <option value=" bleKeyboard.press('F');"> F</option> 
            <option value=" bleKeyboard.press('G');"> G</option> 
            <option value=" bleKeyboard.press('H');"> H</option> 
            <option value=" bleKeyboard.press('I');"> I</option> 
            <option value=" bleKeyboard.press('J');"> J</option> 
            <option value=" bleKeyboard.press('K');"> K</option> 
            <option value=" bleKeyboard.press('L');"> L</option> 
            <option value=" bleKeyboard.press('M');"> M</option> 
            <option value=" bleKeyboard.press('N');"> N</option> 
            <option value=" bleKeyboard.press('O');"> O</option> 
            <option value=" bleKeyboard.press('P');"> P</option> 
            <option value=" bleKeyboard.press('Q');"> Q</option> 
            <option value=" bleKeyboard.press('R');"> R</option> 
            <option value=" bleKeyboard.press('S');"> S</option> 
            <option value=" bleKeyboard.press('T');"> T</option> 
            <option value=" bleKeyboard.press('U');"> U</option> 
            <option value=" bleKeyboard.press('V');"> V</option> 
            <option value=" bleKeyboard.press('W');"> W</option> 
            <option value=" bleKeyboard.press('X');"> X</option> 
            <option value=" bleKeyboard.press('Y');"> Y</option> 
            <option value=" bleKeyboard.press('Z');"> Z</option> 
            
        </select><br><br>

        <label for="joystick_down">Optie joystick omlaag:</label>
        <select id="joystick_down">
            <!-- Dropdown-opties hier -->
            <option value="//geen actie">Geen actie</option>
            <option value="  bleKeyboard.press(KEY_LEFT_ARROW);"> pijltje naar links</option> 
            <option value="  bleKeyboard.press(KEY_RIGHT_ARROW);"> pijltje naar rechts</option> 
            <option value=" bleKeyboard.press(KEY_UP_ARROW);"> pijltje omhoog</option> 
            <option value=" bleKeyboard.press(KEY_DOWN_ARROW);"> pijltje omlaag</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_WWW_BACK);"> Vorige pagina(webbrowser)</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_CALCULATOR);"> Open Rekenmachine</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_NEXT_TRACK);"> Volgend nummer/video</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_PREVIOUS_TRACK);"> vorige nummer/video</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_STOP);"> Stop Media</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_MUTE);"> Geluid dempen</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_UP);"> Volume Hoger</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_DOWN);"> Volume omlaag</option> 
            <option value=" bleKeyboard.press(KEY_TAB);"> Tab toets</option> 
            <option value=" bleKeyboard.press(KEY_RETURN);"> enter toets</option> 
            <option value=" bleKeyboard.press(KEY_ESC);"> Esc toets</option> 
            <option value=" bleKeyboard.press(KEY_PRTSC);"> Print Screen toets</option> 
            <option value=" bleKeyboard.press(KEY_DELETE);"> Delete toets</option> 
            <option value=" bleKeyboard.press(KEY_HOME);"> Home toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_0);"> 0 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_1);"> 1 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_2);"> 2 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_3);"> 3 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_4);"> 4 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_5);"> 5 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_16);"> 6 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_7);"> 7 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_8);"> 8 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_9);"> 9 toets</option> 
            <option value=" bleKeyboard.press('A');"> A</option> 
            <option value=" bleKeyboard.press('B');"> B</option> 
            <option value=" bleKeyboard.press('C);"> C</option> 
            <option value=" bleKeyboard.press('D');"> D</option> 
            <option value=" bleKeyboard.press('E');"> E</option> 
            <option value=" bleKeyboard.press('F');"> F</option> 
            <option value=" bleKeyboard.press('G');"> G</option> 
            <option value=" bleKeyboard.press('H');"> H</option> 
            <option value=" bleKeyboard.press('I');"> I</option> 
            <option value=" bleKeyboard.press('J');"> J</option> 
            <option value=" bleKeyboard.press('K');"> K</option> 
            <option value=" bleKeyboard.press('L');"> L</option> 
            <option value=" bleKeyboard.press('M');"> M</option> 
            <option value=" bleKeyboard.press('N');"> N</option> 
            <option value=" bleKeyboard.press('O');"> O</option> 
            <option value=" bleKeyboard.press('P');"> P</option> 
            <option value=" bleKeyboard.press('Q');"> Q</option> 
            <option value=" bleKeyboard.press('R');"> R</option> 
            <option value=" bleKeyboard.press('S');"> S</option> 
            <option value=" bleKeyboard.press('T');"> T</option> 
            <option value=" bleKeyboard.press('U');"> U</option> 
            <option value=" bleKeyboard.press('V');"> V</option> 
            <option value=" bleKeyboard.press('W');"> W</option> 
            <option value=" bleKeyboard.press('X');"> X</option> 
            <option value=" bleKeyboard.press('Y');"> Y</option> 
            <option value=" bleKeyboard.press('Z');"> Z</option> 
            
        </select><br><br>

        <label for="joystick_button">Optie joystick ingedrukt:</label>
        <select id="joystick_button">
            <!-- Dropdown-opties hier -->
            <option value="//geen actie">Geen actie</option>
            <option value="  bleKeyboard.press(KEY_LEFT_ARROW);"> pijltje naar links</option> 
            <option value="  bleKeyboard.press(KEY_RIGHT_ARROW);"> pijltje naar rechts</option> 
            <option value=" bleKeyboard.press(KEY_UP_ARROW);"> pijltje omhoog</option> 
            <option value=" bleKeyboard.press(KEY_DOWN_ARROW);"> pijltje omlaag</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_WWW_BACK);"> Vorige pagina(webbrowser)</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_CALCULATOR);"> Open Rekenmachine</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_NEXT_TRACK);"> Volgend nummer/video</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_PREVIOUS_TRACK);"> vorige nummer/video</option> 
            <option value="  bleKeyboard.press(KEY_MEDIA_PLAY_PAUSE);"> Pauze knop</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_STOP);"> Stop Media</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_MUTE);"> Geluid dempen</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_UP);"> Volume Hoger</option> 
            <option value=" bleKeyboard.press(KEY_MEDIA_VOLUME_DOWN);"> Volume omlaag</option> 
            <option value=" bleKeyboard.press(KEY_TAB);"> Tab toets</option> 
            <option value=" bleKeyboard.press(KEY_RETURN);"> enter toets</option> 
            <option value=" bleKeyboard.press(KEY_ESC);"> Esc toets</option> 
            <option value=" bleKeyboard.press(KEY_PRTSC);"> Print Screen toets</option> 
            <option value=" bleKeyboard.press(KEY_DELETE);"> Delete toets</option> 
            <option value=" bleKeyboard.press(KEY_HOME);"> Home toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_0);"> 0 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_1);"> 1 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_2);"> 2 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_3);"> 3 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_4);"> 4 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_5);"> 5 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_16);"> 6 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_7);"> 7 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_8);"> 8 toets</option> 
            <option value=" bleKeyboard.press(KEY_NUM_9);"> 9 toets</option> 
            <option value=" bleKeyboard.press('A');"> A</option> 
            <option value=" bleKeyboard.press('B');"> B</option> 
            <option value=" bleKeyboard.press('C);"> C</option> 
            <option value=" bleKeyboard.press('D');"> D</option> 
            <option value=" bleKeyboard.press('E');"> E</option> 
            <option value=" bleKeyboard.press('F');"> F</option> 
            <option value=" bleKeyboard.press('G');"> G</option> 
            <option value=" bleKeyboard.press('H');"> H</option> 
            <option value=" bleKeyboard.press('I');"> I</option> 
            <option value=" bleKeyboard.press('J');"> J</option> 
            <option value=" bleKeyboard.press('K');"> K</option> 
            <option value=" bleKeyboard.press('L');"> L</option> 
            <option value=" bleKeyboard.press('M');"> M</option> 
            <option value=" bleKeyboard.press('N');"> N</option> 
            <option value=" bleKeyboard.press('O');"> O</option> 
            <option value=" bleKeyboard.press('P');"> P</option> 
            <option value=" bleKeyboard.press('Q');"> Q</option> 
            <option value=" bleKeyboard.press('R');"> R</option> 
            <option value=" bleKeyboard.press('S');"> S</option> 
            <option value=" bleKeyboard.press('T');"> T</option> 
            <option value=" bleKeyboard.press('U');"> U</option> 
            <option value=" bleKeyboard.press('V');"> V</option> 
            <option value=" bleKeyboard.press('W');"> W</option> 
            <option value=" bleKeyboard.press('X');"> X</option> 
            <option value=" bleKeyboard.press('Y');"> Y</option> 
            <option value=" bleKeyboard.press('Z');"> Z</option> 
            
        </select><br><br>

        <button type="button" onclick="generateCode()">Ververs code</button>
        <button type="button" onclick="copyCodeToClipboard()">Kopieer Code</button>
        <button type="button" onclick="downloadCode()">Download Code</button>
  
    </form>

    <h2>Uw gegenereerde code</code>:</h2>
    <pre id="generatedCode"></pre>

    <script>
      function downloadCode() {
          var generatedCode = document.getElementById("generatedCode").innerText;
          var blob = new Blob([generatedCode], { type: 'text/plain' });
          var url = window.URL.createObjectURL(blob);
          var a = document.createElement('a');
          a.href = url;
          a.download = 'SmartStick_code.ino';
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
      }
  </script>
  
    <script>
      function copyCodeToClipboard() {
          var generatedCode = document.getElementById("generatedCode").innerText;
          navigator.clipboard.writeText(generatedCode).then(function() {
              alert("Code gekopieerd naar klembord!");
          }, function(err) {
              console.error('Kon de tekst niet kopiëren: ', err);
          });
      }
  </script>
  

    <script>
        function generateCode() {
            var joystick_up = document.getElementById("joystick_up").value;
            var joystick_left = document.getElementById("joystick_left").value;
            var joystick_right = document.getElementById("joystick_right").value;
            var joystick_down = document.getElementById("joystick_down").value;
            var joystick_button = document.getElementById("joystick_button").value;

            var generatedCode = `\#include <Arduino.h>
#include <BleKeyboard.h>

BleKeyboard bleKeyboard("SmarStick™", "SmartStick_electronics");



const int pinVRX = 32; 
const int pinVRY = 33; 
const int pinSW = 21;  
const int pinOBLED = 2; 


const int threshold = 300; 
int neutralX, neutralY;

void setup() {
  Serial.begin(9600);
  bleKeyboard.begin();
  pinMode(pinVRX, INPUT);
  pinMode(pinVRY, INPUT);
  pinMode(pinSW, INPUT_PULLUP); 
  pinMode(pinOBLED, OUTPUT); 

 
  neutralX = analogRead(pinVRX);
  neutralY = analogRead(pinVRY);
}

void loop() {
 
  int xValue = analogRead(pinVRX);
  int yValue = analogRead(pinVRY);
  bool buttonPressed = !digitalRead(pinSW); 

  
  int deltaX = xValue - neutralX;
  int deltaY = yValue - neutralY;

  
  if (deltaX > threshold) {
    joystick_left();
  } else if (deltaX < -threshold) {
    joystick_right();
  } else if (deltaY > threshold) {
    joystick_up();
  } else if (deltaY < -threshold) {
    joystick_down();
  } else {

  }

 
  if (buttonPressed) {
    joystick_button();
  }

  
  if (bleKeyboard.isConnected()) {
    digitalWrite(pinOBLED, LOW); 
  } else {
    
    digitalWrite(pinOBLED, HIGH);
    delay(500);
    digitalWrite(pinOBLED, LOW);
    delay(500);
  }

  
  delay(100);
}


void joystick_up() {
  Serial.println("naar boven");
  ${joystick_up}
  bleKeyboard.releaseAll();
}

void joystick_left() {
  Serial.println("naar links");
  ${joystick_left}
  bleKeyboard.releaseAll();
}

void joystick_right() {
  Serial.println("naar rechts");
  ${joystick_right}
  bleKeyboard.releaseAll();
}

void joystick_down() {
  Serial.println("naar beneden");
  ${joystick_down}
  bleKeyboard.releaseAll();
}


void joystick_button() {
  Serial.println("Joystickknop ingedrukt");
  ${joystick_button}
  bleKeyboard.releaseAll();
  delay(500);
}
`;document.getElementById("generatedCode").innerText = generatedCode;
        }

        // Functie om de code automatisch te genereren bij laden van de pagina
        window.onload = generateCode;
    </script>
</body>
</html>

I only have 1 problem here. If people want to upload this code to an esp32 they must first install the arduino ide and the BLEkeyboard library. Is it also possible to make this unnecessary and, for example, possible to make this via a web server or serial connection?

2

No, it's not possible. It's C++ code, so it will always need to be compiled. One way around this would be to rewrite your application in MicroPython, then they could make the changes and save them back to the device. Even then, it sounds like a support nightmare if you have your users changing code.

What would be an example of a change that they might make?

3

Maybe keep the web page on a server, then use your compiled code to network to the server/file?

Screenshot from 2024-06-03 14-12-16
Screenshot from 2024-06-03 14-12-161366×768 74 KB

4

Hi! Thanks for your answer, That would be perfect! But i have no idea how to make it that the compiled code becomes the new code for the esp32.... Do you have any idea how that should be done?

5
6

I also found this ons, tried it but the web server is only for turning on/off a good pin. Unfortunately not to change the code

7

I also found this one, Input Data on HTML Form ESP32/ESP8266 Web Server Arduino IDE | Random Nerd Tutorials

I think this is what i'm searching for but does someone know how to turn the tekst input line into the new code?

8

With AVR chips, when you switch analogue pins the first read will be garbage unless you give the ADC time to settle (50 or 60 microseconds according to the datasheets). recommended practice is to read twice and not use the first one.

I dunno for ESP or AMD devices, maybe they have more than one ADC or they work differently.

1 Like
9

Thank you for this information.

10

... anything you can imagine. Nothing is made for you to copy/paste. Use your HTML inside the example.

2 Likes
11

Yes but if i change the html with my html code, Wouldn't he just generate the code? Then I need a way to upload that generated code as the new code for the Arduino?

Thanks for your help!

12

It looks like the web page is made to make changes to itself (using drop-down menus) to generate new code. A "refresh" of the modified web page will bring the original page back. HTML does not have the privileges/authority to write information to storage media.

13

I wrote sketches that took word lists and generated source that put them into PROGMEM, saving a lot of handwork and debugging.

But I didn't do a good enough job, no one used it, it's not easy enough! Not yet at least! I need to remove difficulty! That will take ME doing more so the user needs to do less. Easy for them means harder for me!

Any code task has a minimum that has to be done. Most programs have extra parts.. what I've told customers who pushed towards featuritis. You maybe have a different view that less than what's needed shoukd somehow work?

14

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.