Webpage made with Chrome's beta Web Serial to control an Arduino manually. This tool allows you to easily test pins and simple hardware without writing code. It provides the input state of every pin, and allows pins that support output to be switched to output, with a binary output also being manually configurable on such pins.
The goal of this project is to simply basic tests like verifying that a certain pin or LED has not broken.
Hooray! First, I split the UI into three columns (using another borderless table) to utilize as much screen space as possible. Previously, most of the screen was simply empty and yet scrolling was required to see the entire UI.
I shortened some UI elements like the pin mode grid, which no longer displays pins that cannot change mode at all (Serial RX/TX on pins 0 and 1, A0-A5), and I shrunk down the image grids from 32 pixels per image to 30.
Also, there are now step headers to guide users:
The step one header will update to include "uploading..." while an upload is in progress. Previously, the buttons would ask for a user port, then a promise would start which would compile the code for the Arduino and upload it, then finally reporting the result via alert(). This was a bit confusing as during that middle time there is no way to tell that an upload is in progress.
There is also now a system in place to detect changes to the Arduino code. A key in local storage keeps the SHA-1 hash of the Arduino code and is only updated if an attempt to upload is made using the buttons. If the hash in storage is not present or doesn't match the current hash of the code, a warning pops up asking the user to verify the code is correctly uploaded:
The warning disappears until page reload if the hide warning button is pressed, and disappears permanently until the next change in the Arduino code if the user attempts to upload the code.
I would also like to note that it took a lot of CSS to get all of this to work properly, but it is done.
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:
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.
Support for servo motors is partially complete. On the Arduino side, a new pin mode of 2 has been added corresponding to servo control mode. This mode can only be set on PWM pins. There is also a new SERVO command requesting the angle of any attached servo (pins not in servo mode report an angle of "?") and a SERVO= command setting the angle of attached servos (pins not in servo mode cannot be set and are ignored).
My next goal will be to support servo mode in the UI and allow graphical management of servo angles.
Support for analog reading has been re-added. The raw value reported by the hardware (0-1023) is available as well as the voltage output (0-5 on the boards supported), along with the preexisting binary indicators for these pins.
I've added two buttons to upload all the code necessary on the Arduino side to run this PLC, one for Uno and one for Nano. They also automatically disconnect you if you are connected to the Arduino for the regular PLC functions.
I've made the buttons corresponding to mutable states (input/output state, digital output state) clickable as toggles. Clicking one of the I/O state images causes that pin to switch (assuming it can be switched). Clicking one of the digital output images causes that pin to toggle its output state (or switch to outputting LOW if it's input mode).
I also made the GUI auto-refresh. There's an issue where sometimes the Arduino just stops outputting anything on serial, not sure what causes it but a reset is virtually instant and fixes it.