Irrigation Sprinkler Controller - GUI Design

	IoT: In the Cloud Enter Your Project for a chance to win an Arduino MKR WAN 1300 Kit with a Compatable Lora Gateway or an MKR 1400 GSM with a Shield Combo + a $100 shopping cart! Back to The Project14 homepage	Project14 Home
		Monthly Themes
		Monthly Theme Poll

GUI Initial Mockup in Powerpoint

I started designing the GUI by doing a cartoon layout of the different elements on a Powerpoint slide.  This gave me a visual prototype to follow as I coded the GUI layout.

The following is a capture of the GUI running in a VNC window on the RPi.  I'll use this initial setup to get the hardware and cloud interfaces working.  I'll need to come back and update it after I've used it for a while.

The following is a photo of the actual screen just for reference.  I need to figure out how to get better focus and exposure with my camera.  You can see the Desktop behind the GUI window.  I intend to run the GUI without the Desktop but I haven't worked that part out yet (I'll need some form of Xwindows running).

GUI elements used

Mode Control

The mode selection is implemented as a Radiobutton.  The modes are mutually exclusive so selecting one deselects the others.

• Auto mode - runs the displayed schedule
• Off mode - doesn't run (for rainy days - without changing schedule)
• Run once - runs once through all zones and returns to previous mode (Auto or Off)

14 day schedule

The day selection is implemented as a regular Button.  Within a 2 week time frame any or all days can be selected.  The button turns green when selected.

The day indicator is also implemented as a Button.  It turns yellow to indicate the current day and is blank for other days.

Start time

The Start time selector is implemented as a Spinbox.  It contains contains values from midnight to 11:30pm in 30 minute increments in 24hr time.  I wanted to be able to set this time using the touchscreen so I used a Spinbox so that I would not have to implement a keyboard for input.  I am having some issues with "bounce" (increment or decrement more than 1 value) so I may need to use a different element if I can't debounce it in software.

Zone Duration

The Zone duration is implemented as a Scale (slider).  It can select any value from 0 - 60 minutes.  I'll probably change the Zone button color to show that the zone is active.  Maybe move the slider to indicate remaining time.

Current time

The Time display is implemented as a Label.  There isn't a synchronous way to update this value so I'll need to use a separate timer.  I may reformat how this displays and probably won't display seconds.

Reset

Reset is implemented as a Button.  Always red.  I haven't decided on the exact functionality.  This may just cause a reboot of the RPi.  I may also need to add a Shutdown button in addition to a physical power switch.