Skip to content

A13 - Interfaces and Applications

Brief

  • Write an application that interfaces a user with an input and/or output device(s) on a board that you made.

Picking my application

A user interface will be paramount to being able to easily use the PlantPulse system, being able to access it on multiple devices and letting it be customisable are essential.

  • Long hiatus to finish uni and work here... *

Coming back to this Assignment, I (re)discovered and had more interest for Processing (Thanks Maker-Con and Jaryd). But still would use Flask if it suited.

What better way to decide than throwing entropy into the equation. And instead of asking a question to an LLM, and the randomness/reasoning seep through a server farm, I kept it old school and flipped a coin. Heads - Flask. Tails - Processing.

It was tails!

TODO - PIC here

Processing it is!

Wireframe/Goals

I started with a quick sketch of what I wanted. "Tiles" for each sensor/pump combo. Within each tile, would be: * A title * A graph of the sensor (optional) * Pump min-max readings for the controller (optional, requires pump connected to that sensor) * A manual 1-sec water button (optional, see above) * Blink LED (I came up with this later but would be helpful for lots of sensors, optional, blinks the LED on the node)

From my naive understanding of Processing, the basic building blocks would be easy, same with the graphs, but buttons and the scale, I wasnt sure... I did know that it can make some sweeeeet visuals (Raven Kwok - did the visuals for some of Karma Fields

I would like to use Python to construct the complete page in some way, with dictonaries for each "tile".

This could allow each frontend element to link to an easy to configure endpoint - directly to the Hub through Serial, a Home Assitant Automation or an MQTT subscription.

I opted for MQTT through my HA instance.

Development

Like all good projects it started with some research then straight to an LLM.

xxx TODO: TODO LLM prompt (it would be sick to show the "Code" view of it, and the tokens in and out Tis in prompts/a13-interface-round1.txt

Turns out Flask would be used (but not for rendering the page), but to serve it to a browser, and handle the back-and-forth.

I ended up with the files - xxx TODO - Make public or move to GitLab (maybe just final code in GitLab?) https://github.com/LiamHowell/plant-pulse-gui/commit/7c41da7533fea9764b8aea87b58ee92044dd6950 Also get a screenshot of the webpage at this point.

Once a single tile was looking good (with dummy data), it was onto integrating the hub. A single pump, and single node (with a single sensor).

xxx TODO: receiver code

A little extra

My original goal with Flask was to make a "Paint" application to draw on the Hubs pixel display, I was sentimental and decided to make it another card. It would require 2 settings: * Draw mode - the user can draw on the display. * Graphic mode - maps the input/output of the Nodes to the display.

Using the inteface

The Hub is listening to that topic and upon receiving a message will set the pixel and colour values accordingly.

xxx TODO: video of the thing working (Screen recording of both tiles, phone/desktop, whatever its developed for)

FILES

DOWNLOAD LINKS HERE