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

Posted on
Thu Aug 31, 2017 3:04 pm
stuartcolman offline
Posts: 81
Joined: Nov 01, 2015
Location: Essex, United Kingdom

Re: Post Pics of Your Control Pages HERE!

@chobo997 If you have a look in the PSD, there is a layer for each button which is a highlight, I think it's called hover. In my control pages the nav is just a group of static images. I change it manually for each page to show the active page.

Posted on
Fri Sep 01, 2017 11:03 am
chobo offline
Posts: 126
Joined: Dec 08, 2013
Location: USA

Re: Post Pics of Your Control Pages HERE!

stuartcolman wrote:
@chobo997 If you have a look in the PSD, there is a layer for each button which is a highlight, I think it's called hover. In my control pages the nav is just a group of static images. I change it manually for each page to show the active page.


@stuartcolman: Ah... see those layers now. Thanks for pointing me in the right direction. Please keep us posted on those last few pages – looking forward to seeing how they come together!

Posted on
Sat Sep 02, 2017 5:02 am
stuartcolman offline
Posts: 81
Joined: Nov 01, 2015
Location: Essex, United Kingdom

Re: Post Pics of Your Control Pages HERE!

So here is the final main page, the lighting page. At this stage it is a mock-up. I had a few switches and dimmers to fit on, so this was the best way that I could find to group them to rooms.

There are three different colours. The grey is the switch is off. The blue is an 'On/Off' switch and shows 'On' in this state. The green is a dimmer and shows the percentage of brightness in increments of 10%.

So my next challenge is how to control the dimmers from this page. So my initial idea at this stage is that when you click on the dimmer 'panel' it takes you to a new sub page (just a new control page) for that dimmer control, which then has Dim Up, Dim Down, On/Off buttons. I would use the pop-up controls, but I don't know if there is a way of editing this pop-up page?

Thanks

Stuart
Attachments
Amazon Fire Dark Panel (Lighting).png
Amazon Fire Dark Panel (Lighting).png (134.21 KiB) Viewed 9775 times

Posted on
Sat Sep 02, 2017 7:27 am
norcoscia offline
User avatar
Posts: 1206
Joined: Sep 09, 2015

Re: Post Pics of Your Control Pages HERE!

I stumble around every day with control pages - not sure it would work well but if I was doing that I would put two invisible controls on each side of the switch circle and one in the middle - the middle one would turn on and off the light and the two invisible ones would increment the light up and down. But I'm sure there is a better way to approach that challenge.

Stuart, I don't own photoshop (nor can I afford it or upgrades) so I have been re-drawing your Icons in Affinity Designer - it is a cheap program that is fantastic for vector work. I'm great at making anything but poor at imagining what things will look good and what colors work. I have looked all over the internet and I could not find any I liked better than your weather Icons.

If you would be willing to share some of your other weather Icons I will convert them to vector so they can easily be scaled to any size. I'm happy to give them back to you if you would like or share them with anyone you say is OK.

Let me know if you don't mind and no rush or worries if you don't want to - I'll be messing with my control pages for years :-)

PS. Below are some of your Icons I have converted....
Attachments
2017-09-02_06-10-58.png
2017-09-02_06-10-58.png (27.75 KiB) Viewed 9754 times

_______
Norm

Posted on
Sat Sep 02, 2017 7:43 am
DaveL17 offline
User avatar
Posts: 6742
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Re: Post Pics of Your Control Pages HERE!

stuartcolman wrote:
So my next challenge is how to control the dimmers from this page.

No sure if this helps or not. I use an on off button with sliders (which is sub-optimal because it uses two controls for one device). That said:

Screen Shot 2017-09-02 at 8.38.48 AM.png
Screen Shot 2017-09-02 at 8.38.48 AM.png (13.51 KiB) Viewed 9750 times


You tap the switch for on/off and tap one of 10 invisible incremental controls for 10 percent changes. It allows you to go from 30 percent to 100 percent with one tap. The purple text element shows the current dim level.

So, perhaps 10 invisible controls arrayed around the circle with an 11th on/off in the middle?

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Sat Sep 02, 2017 8:25 am
chobo offline
Posts: 126
Joined: Dec 08, 2013
Location: USA

Post Pics of Your Control Pages HERE!

Beautiful, simple design, Stuart.

Another option to consider might be Colorado4Wheeler’s Smart Dimmer Plugin. I haven’t had a use case for it, but it seems like the “round robin” dimmer functionality might be useful for visuals like these. As I understand it, multiple taps could take you through the full brightness spectrum, back to 0, and then through the full brightness spectrum again.

Posted on
Sat Sep 02, 2017 12:27 pm
stuartcolman offline
Posts: 81
Joined: Nov 01, 2015
Location: Essex, United Kingdom

Re: Post Pics of Your Control Pages HERE!

@norcoscia, I use the Icons from here: https://www.flaticon.com/packs/weather-collection-2. I'm nowhere near being talented enough to create those icons from scratch!

I have also used a couple from other collections, but they are the majority of my weather ones. You can also download in various formats SVG being one of them.

@chobo997, Colorado4Wheeler’s Smart Dimmer Plugin seems to be the answer to my problem. I would be happy with the standard behaviour (brighten to 100% then dim to 10%). I'll give it a go and let you know how it all goes.

Posted on
Sat Sep 02, 2017 12:58 pm
norcoscia offline
User avatar
Posts: 1206
Joined: Sep 09, 2015

Re: Post Pics of Your Control Pages HERE!

Holy cow, Stuart - that is a lot of great ICONS - the SVG format is imported into my drawing program perfect -- thanks so much - my control pages will be so much nicer and you just saved me 1,000,000 hours of converting ICONs by hand...

I O U a beer or two :-)

PS. Or three.

_______
Norm

Posted on
Sat Sep 02, 2017 2:38 pm
stuartcolman offline
Posts: 81
Joined: Nov 01, 2015
Location: Essex, United Kingdom

Re: Post Pics of Your Control Pages HERE!

Another good site I use is: https://icons8.com.

It would probably be cheaper to fly me First Class anywhere in the world to cash those beer tokens in than buy 2 or 3 beers here in London :wink:

Posted on
Sat Sep 02, 2017 3:22 pm
norcoscia offline
User avatar
Posts: 1206
Joined: Sep 09, 2015

Re: Post Pics of Your Control Pages HERE!

Yes, I noticed that was a good site when you posted about it a few days ago. I have enough to keep me busy for a long time....

BTW, how do you plan to update the clock on your main page - a while back I was going to add one but I could never figure out how to get the time to show up and how to keep it updated w/o having a trigger every min.

PS. Back in the nineties, while I was out your way, I had a great beer -- Stella (on tap) - when I came back -- I rushed to the store and picked up a six pack - it did not taste anything like it did when I was in London - it was pretty bad :-(

_______
Norm

Posted on
Sat Sep 02, 2017 3:39 pm
DaveL17 offline
User avatar
Posts: 6742
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Re: Post Pics of Your Control Pages HERE!

norcoscia wrote:
PS. Back in the nineties, while I was out your way, I had a great beer -- Stella (on tap) - when I came back -- I rushed to the store and picked up a six pack - it did not taste anything like it did when I was in London - it was pretty bad :-(

Did you drink it at room temperature? :D

The best beer I had in London escapes me in my advanced age, but it was at The Admiralty at Trafalgar Square. Had some business in central London and, well, it was right there.

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Sat Sep 02, 2017 3:55 pm
stuartcolman offline
Posts: 81
Joined: Nov 01, 2015
Location: Essex, United Kingdom

Re: Post Pics of Your Control Pages HERE!

@norcoscia, I couldn't remember if I had posted that site or not. I update my clock by doing exactly that, a trigger every minute to update the time, Seems to work, and doesn't cause too much overhead.

I read in the paper the other day, a pint of beer at the Notting Hill Carnival would have set you back £13 (about $16 currently)!! Hence an EasyJet flight from London to Europe would be about £30!!!

@DaveL17, Wasn't a pint of London Pride was it? The Admiralty is a Fuller's Pub, so would have been one of their house taps.

Posted on
Sat Sep 02, 2017 5:11 pm
DaveL17 offline
User avatar
Posts: 6742
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Re: Post Pics of Your Control Pages HERE!

stuartcolman wrote:
@DaveL17, Wasn't a pint of London Pride was it? The Admiralty is a Fuller's Pub, so would have been one of their house taps.

Don't think it was London Pride, although I had a fair few pints of those while I was visiting. Might've been ESB, but I honestly don't recall. Definitely an ale, whatever it was.

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Sun Sep 03, 2017 3:38 pm
norcoscia offline
User avatar
Posts: 1206
Joined: Sep 09, 2015

Re: Post Pics of Your Control Pages HERE!

Inspired by the work Stuart did (and borrowing heavily from it) I put together a draft full scale IPAD mock-up control page in Affinity Designer. Any feedback is appreciated - both good and bad - it helps me make corrections / changes before I commit to building it in Indigo. And thanks for all the help and feedback so far!
Attachments
Control Panel Draft.jpg
Control Panel Draft.jpg (217.4 KiB) Viewed 9605 times

_______
Norm

Posted on
Sun Sep 03, 2017 4:25 pm
stuartcolman offline
Posts: 81
Joined: Nov 01, 2015
Location: Essex, United Kingdom

Re: Post Pics of Your Control Pages HERE!

That looks amazing!! I just have a few suggestions:

- Watch the corner radius on the panels. It looks like you have created one panel and then shrunk it or expanded it for various different sizes. This tends to change the corner radius and doesn't look overly consistent. I would also use guides if your designer has them, allows the boxes to line up perfectly. If not just create some 1 pixel width lines to use to make sure they are all uniform.
- The Warning sign (bottom left) could probably be a panel on its own. Just trim the image to have rounded corners (if you need assistance with this just let me know). This way it would fit much better.
- On a similar note, the video feed could be a panel on its own, with rounded corners. A little more tricky, but there is a very simple way to it.
- Give each of the panels a drop shadow, would just give it a little 'depth'.

Do you want the other alarm states? I have Disarmed and Tripped as well if you are interested.

I hope this all helps.

Stuart

Who is online

Users browsing this forum: No registered users and 3 guests