Dick van de Wetering asked 2 years ago
After completing the book “Build Web Servers withSP32 and ESP8266” I want to make a HTLM joystick to operate servo’s. I found a nice program for the joystick: https://github.com/stemkoski/HTML-Joysticks.
It works very well except I face with the problem to get an event for sending the data. The slider example used the type range, that has support from oninput to get an event. However the joystcik is not a standard HTLM element, so I am looking to create an event if the numbers change if the joystick is moving. Where I have come up to know is to use onkeydown in the <body> and the servo’s move to the desired point. But contiuous movement is needed. How to create these events?
Sara Santos Staff answered 2 years ago
Hi.
I took a quick look at the joystick code you sent, and it has a class JoystickController to handle the joystick.
It has an update() function that gets the value of the joysticks (joystick1.value). There seems a good place to add the code to send the values to the ESP board. The values should be sent using WebSocket protocol.
I hope this helps.
Let me know if you need further help.
Regards,
Sara
Dick van de Wetering answered 2 years ago
Dear Sara.
That is exactly what I thought. So I made the programm and added code to send the values:
console.log(“1s”+sliderValue1.toString()); websocket.send(“1s”+sliderValue1.toString());
In the console I can see the values are correct, but no action of the servo’s.
I added code like this:
<body onkeydown=”MuisDown()” >
and in the script file:
function MuisDown(){
console.log(“key down”);
myFunction1(JSON.stringify(joystick1.value));
myFunction2(JSON.stringify(joystick2.value));
}
Now, when I move the joystik and keep pressing a key (up and down) during the movements, the servo moves according the position of the joystick.
My conclustion is that data send with websocket.send(..) are really send if there is an event (WS_EVT_DATA) that is known by the websocket software. As the joystick does not have a known standard HTLM event nothing happens.
I tried to use a trick, add a slider with <input type=”range” … > and change the vlaue of the slider (code looked like: if (sliderNumber=”3″){
document.getElementById(“slider1”).value = sliderValue; ) .
In this way the value and position of the slider changes. However in this way tehre is no event triggered, so nothing happens, unless I keep pressing up and down a key.
So how can the websocket software be told a not standerd HTLM event can lead to reading the data?
Sara Santos Staff answered 2 years ago
Hi.
I’m not sure that I understand the issue.
You have the events related to the joystick that will be called when those events happen. Did you check on the Serial console that those events were actually happening?
You can add several console.log() on different events and check which events are being triggered when you move the joystick and how and then, decide on which events you want the values to be sent.
I’m not sure how easy it is for you to share your code, but if you do, maybe I can better understand what’s going on.
Regards,
Sara
Dick van de Wetering answered 2 years ago
Can I send the code with wetransfer ? If yes I need an e-mail address.
Regards,
Dick
Sara Santos Staff answered 2 years ago
Hi.
Please send to our support email: support@randomnerdtutorials.com
Regards,
Sara
Sara Santos Staff answered 2 years ago
Hi.
I’ve taken a look at your files. I didn’t understand what you mean by the expression “non-standard HTML event…”. As long as an event is triggered and a callback function is associated with that event, the function will run.
The position of the joystick is sent in realtime to the ESP32, if you add
myFunction1(JSON.stringify(joystick1.value));
myFunction2(JSON.stringify(joystick2.value));
at the end of the handleMove() function.
However, that results in too many websocket messages being sent to the board. So, it can’t handle all messages, and the communication crashes.
You need to try to find a different approach to send the values with the joystick as sending all the joystick positions is too much for the connection. There needs to be some sort of delay or bigger range between values, I’m not sure…
I hope this helps.
Regards,
Sara
Dick van de Wetering answered 2 years ago
Hello.
After some experimentation, it turned out if I use the function in the joystick.js like this:
function update()
{
document.getElementById(“status1”).innerText = “Joystick 1: ” + JSON.stringify(joystick1.value);
document.getElementById(“status2”).innerText = “Joystick 2: ” + JSON.stringify(joystick2.value);
// toegevoegd
myFunction1(JSON.stringify(joystick1.value));
myFunction2(JSON.stringify(joystick2.value));
}
function loop()
{
requestAnimationFrame(loop);
update();
}
loop();
It works ! Now just fine tuning the lay out for the smartphone, and I have a real nice remote control for a boat or car model. Thank you. This subject can be closed.
Sara Santos Staff answered 2 years ago
That’s great!
Thanks for taking the time to share the solution.
I’ll mark this issue as resolved. If you need further help, you just need to open a new question in our forum.
Regards,
Sara
Dick van de Wetering answered 2 years ago
Hi
I forgot to mention two things I added to make it work better, else the ESP32 stops due too many queued messages.
- an extra variable is added: SliderValueOld1. A new value is send only if it has changed.See piece of code below.
function myFunction1(joy){
console.log(“joy 1”);
var myObj = JSON.parse(joy);
var keys = Object.keys(myObj);
var sliderValue1 = myObj[keys[0]];
if (sliderValue1!=sliderValueOld1){
console.log(“1s”+sliderValue1.toString());
//document.getElementById(“boodschap1”).innerHTML=”1s”+sliderValue1.toString();
websocket.send(“1s”+sliderValue1.toString());
sliderValueOld1=sliderValue1;
}
var sliderValue2 = myObj[keys[1]];
if (sliderValue2!=sliderValueOld2){
console.log(“2s”+sliderValue2.toString());
//document.getElementById(“boodschap2”).innerHTML=”2s”+sliderValue2.toString();
websocket.send(“2s”+sliderValue2.toString());
sliderValueOld2=sliderValue2;
}
}
2. I added some simple delay, using global script variable “vertraging”. Only every 4th count, the function is realy done. The joystick movement is still smooth. See code below:
function update()
{
document.getElementById(“status1”).innerText = “Joystick 1: ” + JSON.stringify(joystick1.value);
document.getElementById(“status2”).innerText = “Joystick 2: ” + JSON.stringify(joystick2.value);
// toegevoegd
vertraging=vertraging+1;
if (vertraging>4){
myFunction1(JSON.stringify(joystick1.value));
myFunction2(JSON.stringify(joystick2.value));
vertraging=0;
}
}
Sara Santos Staff answered 2 years ago
Hi.
That’s great!
Thank you for sharing-
Can you share your final code on GitHub or something? That might be useful for other readers.
Regards.
Sara