Post Pics of Your Control Pages! (LOCKED - create new topic)

Here is my first control page design with only one lighting device so far. I quest I am starting out slow compare to others but a work in progress and only can increase. Again thanks to Dave and his weather underground plugin steering me in the right direction and all his hard work.

Looks like you're getting the hang of it. Congrats. Get ready for the inevitable--you'll probably never stop changing them.

Dave

Just posted a cache of icons here if anyone is interested. They're the ones I use for navigation. viewtopic.php?f=126&t=13528

I'm still taking my pages and non-navigation icons. I found that I needed to redo all my weather icons as the small ones didn't scale up well, found I need to soften the straight lines. Luckily being all vector graphics it was easy enough to redo, even if I ended up tweaking them a couple of times.

So here are two more pages.

The heating page came together pretty quickly, seeing as it's only a few elements repeated. I came up with the icons to represent the various controls pretty quickly and I think they pass the significant other test.

So the large circular icon represents the StellaZ state, Off, Heat Pending, On. (Thanks to Jon for the updated plugin). They're also toggle switches to quickly turn them off if needed. Below that are my AM/PM indicators to tell me which one is active. The 3 icons below are Boost, Extend, and Advance. They're also buttons to active/toggle. So in the first screenshot you can see that the Living Room StellaZ is calling for heat because I've activated the Advance toggle below to advance to the PM schedule. But the boiler has yet to come on as the page banner is still blue, and the heating icon on the left navigation sidebar is not filled. The second screenshot shows you what it looks like once the boiler has fired and the StellaZ has received it's new status to open up for heat. I also include a timestamp on the left now to show me the time the boiler state changed.

There are still a few things I wish to add to the page, but haven't found a way to do it without cluttering the interface up. I may just add a small, discreet icon to take me to an advance page where I can see the additional info.

Screen_Shot_2015-02-26_at_9_41_39_am.jpg (118.67 KiB) Viewed 7250 times

Screen_Shot_2015-02-26_at_9_42_57_am.jpg (120.65 KiB) Viewed 7250 times

Next up is my weather page. This one took rather a long time to layout. Firstly, as mention before, I redid all my weather icons as the navigation ones looked fine at a small for navigation but not when scaled up. I ended up rounding off all the straight lines and changing the stroke width. I'm still missing a bunch of different states so will have to go back and make some more. You can see that I'm using the temp gauge as my base image as it's also gets used when a matching state icon is missing. It's a shame the screenshot doesn't show some of the other icons but it is only February in the UK.

I dread to think how much time I would spend on this if Indigo supported animated icons.

Screen_Shot_2015-02-26_at_9_38_40_am.png (246.05 KiB) Viewed 7250 times

I looked through this tread so many times before I started my pages to get a better idea of what to do and how to do the layout, so thought I would post mine for any future users like myself.

A couple of things I found while making these pages.

1. When starting a new pages I would first make a Device State page element for a given device and pick the first state. I would then duplicate and pick the second state, and so on. This way I could see all the states available, their output, and decide which I think I will need to display either as an icon or as text. It's really easy to just move them off the viewable area of the page and grab the one you wish to use later on.

2. I became obsessed by the grid. Since there are no guides or alignment tools in the CP design UI I found recreating the grid in the design app I use to be the best way to go. It allowed me to line things up more accurately - but I'm still not entirely happy with certain elements. Partly because what you see in the Indigo CP design UI is not the output text. I wish one could see a live view of the final device text - page littered with << state >> takes a lot of trial and error to massage the layout. I was constantly checking on either an iPad sitting next to me or the web view. But what is really useful is the temporary _preview_pagename page that Indigo generates.

3. Sticking with the grid I found my best approach was to not crop my icons to their exact viable area. Any surrounding transparency was also part of the output image so I could move things around and easily snap them to the grid in the CP design UI. (3x3 grid squares, 5x4 and so on). Sure, sometimes I need to to nudge things around, but it was easier to try different layouts knowing things lined up. So really my unit of measurement when creating everything was based the grid - 2 grid units high by 3 across, for example.

4. I found that at the start of a page I would put a lot of elements on the screen, because one can. It's very tempting to include lots of information but then get bogged down in how to best lay it all out. After a while I realise just because I often had a wealth of info about a given device it didn't mean I had to included it all. Prioritising the key bits of info and controls are what worked best for me. And if I could use an icon as a toggle and as a visual indicator of state all the better.

I've said this before, but the real limiting factor for me was the lack of typography controls and limited typefaces, but I'm still please with the work so far regardless of this limitation. Though I am slowing down and will get to there rest of the pages in a few weeks time. Unless a new version of Indigo Touch is released.

Simon

Fast wind you got there...!

Why does everyone's alarm status on their screenshots always show "armed" or their equivalent - surely (most) people are taking their screenshots at home??

Fast wind you got there...!

Why does everyone's alarm status on their screenshots always show "armed" or their equivalent - surely (most) people are taking their screenshots at home??

To keep people like you out of our houses? oddly you just made me realise that I've made a mistake on my alarm control page, I've never changed the placeholder graphic for armed/disarmed from a static image!


Sent from my iPad using Tapatalk

Fast wind you got there...!

Yeah - that's on the ToDo list for the WUnderground Plugin. When WU comes across missing or corrupted data, it puts in a placeholder of "-999.0" or "-9999.0" to let us know. I need to build in some logic to change those values to something else.

Dave

In today's CEPro newsletter, an installation was highlighted for its custom UI. I don't bring this up to bad-mouth the installer, but rather to prove how nice many of the examples above truly are. The article can be found here:
http://www.cepro.com/article/custom_gui_designs_accentuate_fully_automated_home/?utm_source=CEPWeekly&utm_medium=email

I don't want to repost the photos here as they're probably copyrighted. Hopefully, everyone can access the link.
Dave

Wow, some of the control pages here are FAR better than those highlighted in that article! I'm totally ticked at Simon because I have control page envy now, want to scrap all my pages and blatantly copy his designs. If the homeowners highlighted were to see what he did himself and didn't pay I can't even guess how many thousands for...

Adam

I'm totally ticked at Simon because I have control page envy now, want to scrap all my pages and blatantly copy his designs.
Adam

Go ahead. Grab the icons from the link I posted. None of the larger weather icons yet, I'm still working on those.

Why does everyone's alarm status on their screenshots always show "armed" or their equivalent - surely (most) people are taking their screenshots at home??

Not me. Took them while at work. They also look more interesting when armed.

Yeah - that's on the ToDo list for the WUnderground Plugin. When WU comes across missing or corrupted data, it puts in a placeholder of "-999.0" or "-9999.0" to let us know. I need to build in some logic to change those values to something else.

Dave

Ahh, that's why. Wasn't sure if it was because my the WU data it's pulling from my Netatmo doesn't have a wind gauge - yet! Love the plugin BTW.

Love the plugin BTW.

Thanks! It's getting there.

Dave

Hi All,

Have been working with Indigo for about a year now, and have found these forum's so useful that I feel i now can give something back and share what i have been up to. However also suffered from seeing all your great work on control pages...which inevitably meant I had to redesign mine several times, as well as due to changes from me and the Mrs getting used to having a smart home and living with one.

Also great to see so many people posting from the UK, sounds like, all joking aside that we should get together at some point soon. We started just with lighting control and a few scenes, that quickly progressed to appliances, now we have a security system, weather forecasting, automatic lake aeration and zoned heating. Our old boiler failed in November, and the only thing that kept us warm was an impromptu heating system with plug in controllers switching on fan heaters, but with a few virtual thermostats and setpoints and use of the motion sensors, it kept us warm until January when the new boiler could be fitted. I am no programmer, but this was achieved in a couple of days and just shows the power and flexibility of Indigo !!

The control screens are designed to work together with navigation down the right hand side for the rooms, each screen giving you the controls for the room you want, along the bottom are the core functions that show status and also give access to whole house functions such as scene control, alarm control and heating control

Badger

Very nice! I love the layout with the picture of the room in question. I tried something similar a while ago but just couldn't get it to work for me.

I'm confused though, is there a reason why the heating schedule/control pages are such a different style to the rest of them?


Sent from my iPad using Tapatalk

I reckon Badger's is my favourite overall layout of all the ones I've seen on here - sorry to everyone else!

I reckon Badger's is my favourite overall layout of all the ones I've seen on here - sorry to everyone else!

Well that's you cut out of my will!


Sent from my iPad using Tapatalk

;-(