Arduino PLC

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:

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.

It's been a while but work has resumed on this project. First, the auto-refresh of the GUI is now toggleable. Second, the webpage has had a small internal change which is more for developer quality of life than anything else. Upon loading the page, the JavaScript side generates the grids of the UI on the spot. Previously a hard-coded list of 20 <img> tags was used, making any change to UI behavior take changing at least 20 lines in very similar ways.

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.

Hello again,

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.

Hello! I'm going to implement more basic commands to change IO settings like one to change pin modes and another to get/change what's being outputted.