I've dedicated the last couple days to the GUI. I think I've finally landed on a general look and feel.
Please keep in mind that this is web based, but developed for phone use. I have some modifications to make for tablets, and even more for desktops.
Here is the dashboard: You'll notice 6 blocks, two of which currently have something in place. This area is going to be used for "quick glances." Are my lights on? yes. what is the water temperature? Eventually, other items will be displayed here... and ultimately, deciding on what is displayed there will happen in the config page.
I've left it at 6 items for simplicity. I'm not sure what else to stick in there at the moment, probably pH. I might raise that section up closer to the title, or remove the title and raise it up to the fill in logo and include a twitter feed so potential users could get notifications of updates, or controller news.
Next is the menu open. Currently displaying the home button (to be replaced with a dashboard icon), and outlet button, and a, non-functional, config icon. the menu is toggled by the three white lines at the top right.
The only place to go from here is the outlets list. This is a really simple listing, with a button/notifier that an outlet is turned on, along the with the label and edit button. I might change the layout later on to look more like the dashboard... but i thought this was easy to read at a glance. The controller code on the Pi actually sends the information to the front end via web sockets. If you're on your phone looking at this, and someone else is on the computer looking at the same screen, and you turn an outlet on, you'll both be told instantly. pretty cool.
Finally we have the edit modal. This still needs to be spruced up and made prettier. You'll notice that we only have a "save & close" button. This is in order to keep the front end and back end in sync. When you change any of the data on the front end, the front end data is automatically modified due to the two-way automatic binding with AngularJS. You can therefore only close the modal via that button, which then sends the modified data to the server to be updated there.
and yes, you can change the label here. I might include the ability to set an icon as well; which could replace the computer on/off icon. If I change the list layout to blocks, that's a certainty.