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:
I don’t know whether it[‘s the forum software doing it but there appears to be no spaces in some of these:
<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?
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…”
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.
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.
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
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.
The PlatformIO documentation has the procedure to do this:
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.
I’ve found that pages 180-181 describing “Uploading Filesystem Image”. It does everything I was looking for using just VScode PlatformIO extension.
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.