Establish a connection between Arduino Nano and P5.js through the p5.serialcontrol GUI/server application.
The very first problem I encountered involved the p5 web editor and the browser, which in my case is Firefox. I had to get a list of available ports show up in the p5 web editor and Firefox would throw me an error such as this:
I wasn’t sure what the error was, so naturally I went to p5.serialport.js to check it out. I never did anything weird with the code there, I merely downloaded it just like in the instruction video and uploaded it to the p5 web editor. To my bewilderment, the error was highlighting a coded-out area:
Trying a different browser to test
I decided to calm down and try Microsoft Edge. I did and voila! It worked:
Problem NOT solved
By looking at the p5 sketch that is running in Edge you may notice that yes it’s showing a list of ports, but that’s just a localhost and not the COM3 that my Arduino or p5.serialcontrol shows (by the way, serial control did see the right port because when I typed something into the control panel the LED would light on).
The next step…
I am against using Chrome for a multitude of reasons. It seems like I am banging my head against the wall, but there must be a solution that I have missed and that I need to keep searching for the answer. For now, I concede and I will try a Chromium based browser such as Opera, Vivaldi, Ungoogled Chromium, or whatever other new Chromium based browser out there. Eventually, I am afraid I might need to install Chrome for the purpose of doing the lab properly and future possible projects.
I hope that I am just missing something really tiny and that I can just go back to using Firefox.
I did try editing the code with Visual Code and then running the sketch locally – it didn’t work.