RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

Touch events with Platformio IDE

Q&A Forum › Category: ESP8266 › Touch events with Platformio IDE
0 Vote Up Vote Down
dieter.wingel asked 4 years ago

After buying the latest course “Build Web Servers with ESP32 and ESP8266” I started right away to use Visual Studio Code with Platformio IDE – after some initial problems, finally it works great and I am really happy with it.

Today I have encountered a problem when trying to use touch events with buttons. My code works great with “onmousedown” and “onmouseup”, but it won’t work at all with “ontouchstart” and “ontouchend”.

Further I have another problem with the buttons 2, 6 and 10: these three buttons will fire the strings only on “onmousedown” but never on “onmouseup” allthough I can’t see any difference compared to the other buttons.

It would be absolutely great if you could hepl me out at least with the touch events –Thanks!

Here my code:

index.html
<

<!DOCTYPE html>
<html>
<head>
<title>ESP8266_web_Server</title>
<metaname=”viewport”content=”width=device-width, initial-scale=1″>
<linkrel=”icon”href=”data:,”>
<linkrel=”stylesheet”type=”text/css”href=”style.css”>
</head>
<body>
<divclass=”topnav”>
<h2>WIFI – Fernbedienung</h2>
</div>
<div>
<h3>Eingaenge F16 bis F35</h3>
</div>
<divclass=”content”>
<divclass=”card-grid”>
<divclass=”card”>
<p><buttonclass=”button-on”ontouchstart=”toggleCheckbox(taste1_on);”ontouchend=”toggleCheckbox(‘taste1_off’);”> EIN v </button> 16 Eingang 17
<buttonclass=”button-off”onmousedown=”toggleCheckbox(‘taste2_on’);”onmouseup=”togglecheckbox(‘taste2_off’);”> AUS ^ </button></p>
<p><buttonclass=”button-on”onmousedown=”toggleCheckbox(‘taste3_on’);”onmouseup=”toggleCheckbox(‘taste3_off’);”> EIN v </button> 18 Eingang 19
<buttonclass=”button-off”onmousedown=”toggleCheckbox(‘taste4_on’);”onmouseup=”toggleCheckbox(‘taste4_off’);”> AUS ^ </button></p>
<p><buttonclass=”button-on”onmousedown=”toggleCheckbox(‘taste5_on’);”onmouseup=”toggleCheckbox(‘taste5_off’);”> EIN v </button> 20 Eingang 21
<buttonclass=”button-off”onmousedown=”toggleCheckbox(‘taste6_on’);”onmouseup=”togglecheckbox(‘taste6_off’);”> AUS ^ </button></p>
<p><buttonclass=”button-on”onmousedown=”toggleCheckbox(‘taste7_on’);”onmouseup=”toggleCheckbox(‘taste7_off’);”> EIN v </button> 22 Eingang 23
<buttonclass=”button-off”onmousedown=”toggleCheckbox(‘taste8_on’);”onmouseup=”toggleCheckbox(‘taste8_off’);”> AUS ^ </button></p>
<p><buttonclass=”button-on”onmousedown=”toggleCheckbox(‘taste9_on’);”onmouseup=”toggleCheckbox(‘taste9_off’);”> EIN v </button> 24 Eingang 25
<buttonclass=”button-off”onmousedown=”toggleCheckbox(‘taste10_on’);”onmouseup=”togglecheckbox(‘taste10_off’);”> AUS ^ </button></p>
<p><buttonclass=”button-on”onmousedown=”toggleCheckbox(‘taste11_on’);”onmouseup=”toggleCheckbox(‘taste11_off’);”> EIN v </button> 26 Eingang 27
<buttonclass=”button-off”onmousedown=”toggleCheckbox(‘taste12_on’);”onmouseup=”toggleCheckbox(‘taste12_off’);”> AUS ^ </button></p>
</div>
</div>
</div>
<scriptsrc=”script.js”></script>
</body>
</html>
Style.css
html {
font-family: ‘Courier New’, Courier, monospace;
text-align: center;
}
h2 {
color: white;
}
.topnav {
overflow: hidden;
background-color: #0A1128;
}
.button-on {
width: 80px;
padding: 8px20px;
outline: none;
text-align: center;
font-size: 14px;
color: white;
border: none;
background-color: #4caf50;
border-radius: 15px;
box-shadow: 010px#999999;
}
.button-on:active {
background-color: #00ff00;
transform: translateY(5px);
box-shadow: 05px#666666;
}
.button-off {
width: 80px;
padding: 8px20px;
outline: none;
text-align: center;
font-size: 14px;
color: white;
border: none;
background-color: #B40404;
border-radius: 15px;
box-shadow: 010px#999999;
}
.button-off:active{
background-color: #FF0000;
transform: translateY(5px);
box-shadow: 05px#666666;
}
main.cpp
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <LittleFS.h>
// Insert your network credentials
const char* ssid = “”;
const char* password = “”;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Initialize LitleFS
void initFS() {
if (!LittleFS.begin()) {
Serial.println(“An error has occurred while mounting LitleFS”);
}
Serial.println(“LitleFS mounted successfully”);
}
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print(“Connecting to WiFi ..”);
while (WiFi.status() != WL_CONNECTED) {
Serial.print(‘.’);
delay(1000);
}
Serial.println(WiFi.localIP());
}
void setup() {
Serial.begin(115200);
initWiFi();
initFS();
// Send Web pge to client
server.on(“/”, HTTP_GET, [](AsyncWebServerRequest*request) {
request->send(LittleFS, “/index.html”, “text/html”, false);
});
server.serveStatic(“/”, LittleFS, “/”);
// Route to send string Taste1 = on
server.on(“/taste1_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202013”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste1 = off
server.on(“/taste1_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202003”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste2 = on
server.on(“/taste2_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202113”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste2 = off
server.on(“/taste2_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202103”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste3 = on
server.on(“/taste3_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202213”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste3 = off
server.on(“/taste3_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202203”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste4 = on
server.on(“/taste4_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202313”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste4 = off
server.on(“/taste4_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202303”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste5 = on
server.on(“/taste5_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202413”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste5 = off
server.on(“/taste5_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202403”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste6 = on
server.on(“/taste6_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202513”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste6 = off
server.on(“/taste6_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202503”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste7 = on
server.on(“/taste7_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202613”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste7 = off
server.on(“/taste7_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202603”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste8 = on
server.on(“/taste8_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202713”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste8 = off
server.on(“/taste8_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“202703”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste9 = on
server.on(“/taste9_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“203013”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste9 = off
server.on(“/taste9_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“203003”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste10 = on
server.on(“/taste10_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“203113”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste10 = off
server.on(“/taste10_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“203103”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste11 = on
server.on(“/taste11_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“203213”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste11 = off
server.on(“/taste11_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“203203”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste12 = on
server.on(“/taste12_on”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“203313”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
// Route to send string Taste12 = off
server.on(“/taste12_off”, HTTP_GET, [](AsyncWebServerRequest*request){
Serial.write(“203303”);
request->send(LittleFS, “/index.html”, “text/html”, false);
});
server.begin();
}
void loop() {
}
script.js
function toggleCheckbox(x) {
varxhr = newXMLHttpRequest();
xhr.open(“GET”, “/” + x, true);
xhr.send();
}
11 Answers
0 Vote Up Vote Down
Steve Mercer answered 4 years ago

I don’t know whether it[‘s the forum software doing it but there appears to be no spaces in some of these:

<buttonclass=”button-on”ontouchstart=”toggleCheckbox(taste1_on);”ontouchend=”toggleCheckbox(‘taste1_off’);”>

Should be

<button class=”button-on” ontouchstart=”toggleCheckbox(taste1_on);” ontouchend=”toggleCheckbox(‘taste1_off’);”>

Also, you are using a touch device, right? Like an iPhone or an Android browser?

 

Oh, and one of your parameters has single quotes and the other doesn’t. Is that right?

0 Vote Up Vote Down
dieter.wingel answered 4 years ago

Steve, thanks a lot for your quick answer.
Yes, I am using a touch device – tried with different Android devices.
Actually there are spaces, it seems that the forum SW deletes them and the missing single quotes were lost during several tests. Anyhow, it doesn’t work at all and by the way: it is obvious that there is something wrong with the interpreter, because there is a different behavior when you enter “onmouse…” or “ontouch…”
 

0 Vote Up Vote Down
dieter.wingel answered 4 years ago

0 Vote Up Vote Down
Sara Santos Staff answered 4 years ago

Hi.
So that I can take a better look at the code and try to understand what’s wrong, can you please share the code using github, or pastebin or a link to google drive, for example? So, that it doesn’t get the formatting messed up.
Regards,
Sara

0 Vote Up Vote Down
Steve Mercer answered 4 years ago

Can you try it with just the one button? ie. take out all of the other buttons and just use one touch button. I have read that having both touch and mouse events can cause issues. Most people check the browser first to see if it’s mobile and then either create mouse or touch entities.

0 Vote Up Vote Down
vlad answered 4 years ago

Hi,
I just tried the version of code from the book on my touch screen computer and it worked the same way using mouse and using finger touch of the sceen buttons.
I am not sure that there is a difference between these two under PC OS environment. It should for microcontrollers’ screen because device drivers are very specific.
I’d like to note that VScode is nice but utility for uploading files from /data into ESP flash storage does not exist or I couldn’t find such. For me to make the code working I need to use Arduino sketch as upload utility. Unfortunately, the book does not mention this. It makes a reader think that the PlatformIO will take care of this, however, it does not.
Hope, the next update will patch this gap in this otherwise very well written tutorial.
Best wishes, Vlad

0 Vote Up Vote Down
Sara Santos Staff answered 4 years ago

Hi Vlad.
VS Code provides a tool to upload files to the filesystem. And those instructions are included in the ESP Web Servers eBook.
You don’t need to use Arduino. I think you might have misunderstood something.
Regards,
Sara

0 Vote Up Vote Down
Steve Mercer answered 4 years ago

The PlatformIO documentation has the procedure to do this:
 
https://docs.platformio.org/en/latest/platforms/espressif32.html#uploading-files-to-file-system-spiffs

0 Vote Up Vote Down
vlad answered 4 years ago

Dear Sara and Steve,
I appreciate your response very much. It would save time if you point to the page number in the book addressing this procedure.
The line of ESP32 chips is very new to me and so far I’ve spent very limited time learning it. I guess I should have started with the datasheet on the chip.
Anyway, thank you for your response and for very well prepared tutorial books.
Cheers!
Update:

I’ve found that pages 180-181 describing “Uploading Filesystem Image”. It does everything I was looking for using just VScode PlatformIO extension.

Wonderful!!!

0 Vote Up Vote Down
dieter.wingel answered 4 years ago

Hi Sara,
sorry, it took a while for further testings.
I figured out that editing the code in Arduino IDE and then just copying the contents of the files (index.html, style.css, script.js and main.ccp) 1 to 1 into an existing project in Platformio IDE solves the problems described previously. Even the strange behavior of the arguments following the “onmousestart” during editing the index-file in Platformio disappears.
You can download the code here: https://drive.google.com/drive/folders/1yJiYlfxscdZr9Dn6LEHYaskLc4lQIOXP?usp=sharing
Hope the above explanation is understandable.

0 Vote Up Vote Down
Sara Santos Staff answered 4 years ago

Hi.
I’m glad you solved the problem.
Your web server looks great.
I suggest that you add the following to your style.css file.

body {
    margin: 0;
}

The top bar will look better 😉
Regards,
Sara