Cool feature updates

A project log for Arduino PLC

Some code with Web Serial to enable full (manual) control of I/O pins on an Arduino via a webpage.

danteDante 01/26/2022 at 21:170 Comments

First, the auto-refresh is now toggleable. Previously, an unconfigurable interval was set on the webpage that would poll the Arduino for updates and update the GUI at 2hz. This is now toggleable:

One of the longer term goals of this project was to support controlling servo motors. Since this introduces a third pin mode, the earlier system of simply clicking a cell in a grid to switch between pin modes was no longer feasible. To that end, I've added a new radio button system, styled with an invisible table so that it aligns nicely:

There are some other nice features of using a table. One is that we can now include additional information about pins (in this case which are PWM and which have special meanings), and another is that the possible modes can be restricted on a per-pin basis (this is another reason why generating the UI in JavaScript, something I detailed in the previous post, is very useful). Pins 0 and 1 are used for serial communication and power the entire UI so the webpage locks these entirely. Pins that don't support PWM cannot connect to servo motors (without locking up the Arduino) so they cannot be in servo mode. Finally, the analog pins cannot be switched at all and are also completely disabled. When the webpage receives data about which pins are in which modes, it will update the UI accordingly. These radio buttons serve to both read the current pin modes and update them.

The pin labels here which add more information than a simple number 0-19 have also been added as tooltips to the previously created grids:

Finally, support for servo motors is functional. At the bottom of the page is a series of sliders which function similarly to the radio buttons for pin modes; they both update to reflect changes in the angles and update the angles when the sliders are changed. Additionally, sliders are only changeable when the webpage knows that the corresponding pin is in servo mode. For this demonstration I've set only pin 3 into servo mode:

Not pictured is the physical servo I connected on pin 3 moving next to me, in perfect step with what the UI shows.

I also made many backend changes ranging from simple renames to redoing entire parts of the protocol between the webpage and the Arduino. Some were very small webpage improvements and others were aimed at making the underlying console-like API easier to use manually.