Hi.
Can you provide more details about your issue?
Regards,
Sara

Sorry I had a computer malfunction –  thought that submission was blank. Do you need more details?

Hi.
Take a look at this tutorial.
I think it might help you understand how to convert the other program into using websocket instead: https://randomnerdtutorials.com/esp32-websocket-server-arduino/
 
I hope this helps.
Regards,
Sara

Thank you for the suggestion. I need to describe the problem better.  My problem is getting  the switch values from the HTML input into the “JASON file.
Looking at the multiple Slider program – ESP32 Web Server (WebSocket) with Multiple Sliders: Control LEDs Brightness (PWM), this is my understanding of the process:
In HTML we have a slider input
 <p class=”switch”>   <input type=”range” onchange=”updateSliderPWM(this)” id=”slider1″ min=”0″ max=”100″ step=”1″ value =”0″ class=”slider”>   </p>   <p class=”state”>Brightness: <span id=”sliderValue1″></span> &percnt;</p>           
 
In the JavaScript we have:
function onOpen(event) {    console.log(‘Connection opened’);    getValues();}
Leading to
function getValues(){    websocket.send(“getValues”);}
Leading to
function onMessage(event) {
  console.log(event.data);
  var myObj = JSON.parse(event.data);
  var keys = Object.keys(myObj);
 
  for (var i = 0; i < keys.length; i++){
    var key = keys[i];
    document.getElementById(key).innerHTML = myObj[key];
    document.getElementById(“slider”+ (i+1).toString()).value = myObj[key];
  }
}
So now we have the initial slider information into a JSON format.
Then when a change occurs in the value of a slider, the updateSliderPWM(this)” will invoke the

function updateSliderPWM(element) {    var sliderNumber = element.id.charAt(element.id.length-1);    var sliderValue = document.getElementById(element.id).value;    document.getElementById(“sliderValue”+sliderNumber).innerHTML = sliderValue;    console.log(sliderValue);    websocket.send(sliderNumber+”s”+sliderValue.toString());}
 This works well for the sliders but I am having trouble adding push buttons to the webpage because I wish the buttons to have two states hence two values, a zero(0) for mouse up, a one (1) for mouse down and a zero(0) for mouseleave.  I have been  unable to get any results by including  the values in the HTML script
eg:
<input type =”input” class=”button-fwd” id=”cn4″  onchange=”updateCn(this)” ; onmousedown=”(value=1);” onmouseup=”(cvalue=0);” onmouseleave=”(value=0);” >FORWARD</button>
 
so I wrote a set of conditions in JavaScript
 
function initButton() {
 
  function initButton() {
  document.getElementById(‘btnFwd’).addEventListener(‘mousedown’,toggleFwdON);
  document.getElementById(‘btnFwd’).addEventListener(‘mouseleave’, rotorStop);
  document.getElementById(‘btnFwd’).addEventListener(‘mouseup’, rotorStop);
  document.getElementById(‘btnRev’).addEventListener(‘mousedown’, toggleRevON);
  document.getElementById(‘btnRev’).addEventListener(‘mouseleave’, rotorStop);
  document.getElementById(‘btnRev’).addEventListener(‘mouseup’, rotorStop);
}
 function toggleFwdON(event) {
   websocket.send(‘FWD’);
}
function toggleRevON(event) {
  websocket.send(‘REV’);
}
function rotorStop(event) {
 Websocket.send (‘STOP’);
}
 And captured commands in the websocket message handler
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
  AwsFrameInfo *info = (AwsFrameInfo*)arg;
  if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
    data[len] = 0;
    if (strcmp((char*)data,”FWD”) == 0) {
      rtrFwdState = 1;
      rtrRevState = 0;
      notifyClients(“FwdON”);
    }
    if (strcmp((char*)data,”STOP”) == 0) {
      rtrFwdState = 0;
      rtrRevState = 0;
      notifyClients(“OFF”);
    }
    if (strcmp((char*)data,”REV”) == 0) {
      rtrFwdState = 0;
      rtrRevState = 1;
      notifyClients(“RevON”);
    }
 
 This works but is very poor patch. I would like to have it mesh properly with the main program I would like to see  the Get Slider Values change from
//Get Slider Values
String getSliderValues(){
 
  sliderValues[“sliderValue1”] = String(sliderValue1);
  sliderValues[“sliderValue2”] = String(sliderValue2);
  sliderValues[“sliderValue3”] = String(sliderValue3);
  String jsonString = JSON.stringify(sliderValues);
  return jsonString;
}
To  something like
//Get Control Values
String getControlValues(){
 
  controlValues[“controlValue1”] = String(controlValue1);
  controlValues[“controlValue2”] = String(controlValue2);
  controlValues[“controlValue3”] = String(controlValue3);
  controlValues[“controlValue4”] = String(sliderValue2);
  controlValues[“controlValue4”] = String(sliderValue3);
 
  String jsonString = JSON.stringify(controlValues);
  return jsonString;
}
 
All of which show that  I  probably need help in writing javascript for the functions
 “ toggleFwdON, toggleRevON, and rotorStop” to get the button values into the JASON file.
 

Hi.
Your problem is probably with the updateCn() function.
What does it look like?

Here is the updateCn()function :

function updateSliderPWM(element) {//4
var sliderNumber = element.id.charAt(element.id.length-1);//4
var sliderValue = document.getElementById(element.id).value;//4
document.getElementById(“sliderValue”+sliderNumber).innerHTML = sliderValue;//4
console.log(sliderValue);//4

websocket.send(sliderNumber+”s”+sliderValue.toString());
}//4

———————–

And what exactly happens with this function?
Do you get what you expect on the JAvascrip console when you click the buttons? Or do you get errors?
What do you get on the ESP32?
I suggest trying to create a program with just the buttons at first before combining it with the sliders. It’s easier to isolate the problem.
 
Regards,
Sara

Good day to you Sara,
Thank you for your suggestion. I have learned from it, but not solved the problem.
I am able to add more sliders to the program and they work fine. (almost no errors on console)  I can make the sliders have values of 0 and 1 which can be digitally written to the output terminals. This creates the desired electrical switching, and the updating is good,  but I want the webpage to have a single control that closes the circuit only when the mouse button is down.
I do not want to have to have the situation where one has to click and slide to turn on and then click and slide to turn off. I also want the circuit go open when the mouse moves off the input button.  I want the circuit to close only while the mouse is on the button and down.
My problem is writing a suitable input code
The present input is:
<p class=”switch”>
<input type=”range” onchange=”updateSliderPWM(this)” id=”slider5″ min=”0″ max=”100″ step=”100″ value =”0″ class=”slider”>  
</p>
 
This and other options such as check boxes or radio buttons all leave the circuit prone to being left on if the client is distracted.
The program is modelled on the Random Nerd Tutorial :
https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/
Thank you for any suggestions. I appreciate any help
Wally

after looking at The RNT “ESP32/ESP8266 Web Server: Control Outputs with Momentary Switch”
I have had some success using :

<p><button class=”button-fwd” onmousedown=”UpdateControlNow(‘4′,’1’)” ontouchstart=”UpdateControlNow(‘4′,’1’)” onmouseup=”UpdateControlNow(‘4′,’0’)” ontouchend=”UpdateControlNow(‘4′,’0’)” onmouseleave=”UpdateControlNow(‘4′,’0’)”>FORWARD</button>
 
               for the input device. and 
 

function UpdateControlNow(y,x) {
   websocket.send((y +”s”+ x).toString());
  }
in the script .
 
I get the desired effect but the screen update of the last input device is not shown

 <p class=”state”>slider5: <span id=”sliderValue5″></span>  >
seems to be ignored. 
 
 

Hi.
I’m sorry for taking so long to get back to you.
 
Do you have any updates about this?
 
Regards,
Sara