First two cracks at control pages for an iPad. I'm not quite happy with them yet, but I suspect that it's quite possible that I may never stop tweaking them.
Things on the short list:
- I really need to do some more work on the thermostat group.
- I'd like to standardize the data presentation a little bit more.
- I'd like to cycle the weather conditions icon for day/night.
I also have an iFrame copy of the weather page with animated radar, and a Thingspeak page that displays historical data (which I'll be integrating next).
Dave
Post Pics of Your Control Pages! (LOCKED - create new topic)
- DaveL17 offline
-
- Posts: 6759
- Joined: Aug 20, 2013
- Location: Chicago, IL, USA
Re: Post Pics of Your Control Pages HERE!
- Attachments
-
- 1.PNG (387.09 KiB) Viewed 9526 times
-
- 2.PNG (442.97 KiB) Viewed 9526 times
I came here to drink milk and kick ass....and I've just finished my milk.
[My Plugins] - [My Forums]
- ckeyes888 offline
- Posts: 2425
- Joined: Nov 26, 2009
- Location: Kalispell, MT
Re: Post Pics of Your Control Pages HERE!
Great pages! Love clean look. Curious about the iFrame radar images.
Care to share any info on how that is done?
Thanks,
Carl
Care to share any info on how that is done?
Thanks,
Carl
- DaveL17 offline
-
- Posts: 6759
- Joined: Aug 20, 2013
- Location: Chicago, IL, USA
Re: Post Pics of Your Control Pages HERE!
ckeyes888 wrote:Great pages! Love clean look. Curious about the iFrame radar images.
Care to share any info on how that is done?
Thanks,
Carl
Thanks Carl.
I started with a base page in HTML. Then, I added iFrames for the two wunderground images via calls to the wunderground API. Moving to the Indigo side, I copied the weather conditions groups and made small control pages for each group, and then call those with iFrames that hold the URLs via the IWS. It's really quite easy once you get the hang of it. If this all sounds like gibberish, I'm happy to help you if you like.
It's pretty amazing how much information one can get through calls to the wunderground API.
http://www.wunderground.com/weather/api/
Dave
Update: Here's the base code I use (contains a sample of one wunderground frame and one Indigo frame).
- Code: Select all
<html>
<title>
Indigo Weather Webpage
</title>
<body>
<body bgcolor="#000000">
<!-- http://www.wunderground.com/weather/api/d/docs?d=layers/radar&MR=1 -->
<iframe width="450" height="420" frameborder=0 seamless align="top" src="http://api.wunderground.com/api/API KEY/animatedradar/q/STATE/CITY.gif?newmaps=1&timelabel=1&timelabel.y=10&num=8&delay=50&noclutter=1&width=400&height=400&radius=100&timelabel.x=20&timelabel.y=395"></iframe>
<iframe width="550" height="400" frameborder=0 seamless align="top" src="http://USERNAME:PASSWORD@INDIGO IP_ADDRESS:8176/controlpage?name=iFrame%20Weather"></iframe>
</body>
</html>
- Attachments
-
- image.jpg (29.5 KiB) Viewed 9478 times
I came here to drink milk and kick ass....and I've just finished my milk.
[My Plugins] - [My Forums]
- HA1 offline
- Posts: 71
- Joined: Mar 15, 2012
Re: Post Pics of Your Control Pages HERE!
guitar486 wrote:Latest (Some new modules, slight redesign)
guitar486, are the surrounding outline blocks for each section of your page custom images you developed separately? There's no way to draw those in Indigo, correct?
- ckeyes888 offline
- Posts: 2425
- Joined: Nov 26, 2009
- Location: Kalispell, MT
Re: Post Pics of Your Control Pages HERE!
Dave, doesn't sound like gibberish...more like interesting.
Care to share how to implement the iFrame into Indigo?
Thanks,
Carl
Care to share how to implement the iFrame into Indigo?
Thanks,
Carl
- DaveL17 offline
-
- Posts: 6759
- Joined: Aug 20, 2013
- Location: Chicago, IL, USA
Re: Post Pics of Your Control Pages HERE!
ckeyes888 wrote:Dave, doesn't sound like gibberish...more like interesting.
Care to share how to implement the iFrame into Indigo?
Thanks,
Carl
Hi Carl,
We're not implementing iFrames into Indigo, rather, we're viewing web pages that serve Indigo content into an iFrame. What we need to do is to construct an HTML file that will be viewed by our device (and this file needs to be accessible where ever we want to view it, but it also needs to be able to reach the IP address of the Indigo Web Server.
This code loads the animated radar image into the webpage, and tells the browser how to place it on the page. As far as I know, current convention is to use CSS style properties for iFrames as several legacy iFrame style tags have been deprecated. All that is to say that the 'style' tag tells the browser how to display the frame.
- Code: Select all
<iframe style="position:absolute; top:100px; left:010px; border:none" width="420" height="420" src="http://api.wunderground.com/api/<API KEY>/animatedradar/q/<STATE>/<CITY>.gif?newmaps=1&timelabel=1&timelabel.y=10&num=8&delay=50&noclutter=1&width=400&height=400&radius=100&timelabe.x=20&timelabel.y=395"></iframe>
This code loads an iFrame with an Indigo control page inside it. The 'Indigo IP' is the IP address of the computer running the Indigo Web Server that will render the content.
- Code: Select all
<iframe style="position:absolute; top:010px; left:430px; border:none" width="500" height="310" src="http://<USERNAME>:<PASSWORD>@<INDIGO IP>:8176/controlpage?name=iFrame%20Weather"></iframe>
The image below includes a third iFrame which is accessing data that I upload to Thingspeak.com (Indigo uploads the data through the Thingspeak API) and includes a scroll bar because there are actually 12 graphs in that frame that I can view. If you start with the code from my post above, and adjust it for your setup, it should get you started.
Dave
- Attachments
-
- Screen shot 2013-09-25 at 10.18.21 AM.png (252.75 KiB) Viewed 9417 times
I came here to drink milk and kick ass....and I've just finished my milk.
[My Plugins] - [My Forums]
- ckeyes888 offline
- Posts: 2425
- Joined: Nov 26, 2009
- Location: Kalispell, MT
Re: Post Pics of Your Control Pages HERE!
Thanks a bunch for the great info Dave. I will definitely be checking that out.
Wish we could pull that off in Touch
Carl
Wish we could pull that off in Touch
Carl
- DaveL17 offline
-
- Posts: 6759
- Joined: Aug 20, 2013
- Location: Chicago, IL, USA
Re: Post Pics of Your Control Pages HERE!
ckeyes888 wrote:Thanks a bunch for the great info Dave. I will definitely be checking that out.
Wish we could pull that off in Touch
Carl
My pleasure. Let me know if you have any questions about this when you try it out.
Dave
I came here to drink milk and kick ass....and I've just finished my milk.
[My Plugins] - [My Forums]
- mundmc offline
-
- Posts: 1061
- Joined: Sep 14, 2012
Re: Post Pics of Your Control Pages HERE!
Here are my JARVIS inspired ipad shots. The first picture Airplays from my mac to my 64" TV, giving me a virtual view down Lexington Ave. The Teal circle-y thing doubles as a directional pad, and the central "core" of the circle-y thing glows red when there is server activity. Pretty neat.:
- Attachments
-
- Screen Shot 2013-09-27 at 6.33.58 PM.jpg (143.22 KiB) Viewed 9340 times
-
- Screen Shot 2013-09-27 at 6.33.26 PM.jpg (206.47 KiB) Viewed 9340 times
-
- Screen Shot 2013-09-27 at 6.32.58 PM.jpg (198.33 KiB) Viewed 9340 times
- gbiski offline
- Posts: 93
- Joined: Dec 19, 2012
Re: Post Pics of Your Control Pages HERE!
Dave hello,
Can you tell me which script do you run in order to feed thingspeak with data?
I have created the api code and the fields but how can i tell Indigo to feed it from the values of some variables ?
thanks for the help
George
Can you tell me which script do you run in order to feed thingspeak with data?
I have created the api code and the fields but how can i tell Indigo to feed it from the values of some variables ?
thanks for the help
George
- durosity offline
-
- Posts: 4320
- Joined: May 10, 2012
- Location: Newcastle Upon Tyne, Ye Ol' England.
Re: Post Pics of Your Control Pages HERE!
Very swish, mundmc. I’d love to see the icons down the left side look a bit more refined, but other than that really nicely laid out and designed!
Computer says no.
- Dewster35 offline
- Posts: 1030
- Joined: Jul 06, 2010
- Location: Petoskey, MI
Re: Post Pics of Your Control Pages HERE!
I'd like to see some constructive critical feedback here please! I already have an iOS 7'ish style of interface, but I'd like to see if I could make something else work. I'm using windows Metro style as my inspiration as well as an earlier post on Page 22 of this thread.
A solid white box denotes ON, OPEN, DELIVERED (Mailbox) or DONE (for appliances). 50% Transparent box denotes the opposite. A box with an outline is either informational, a scene or a link to a different control page.
All elements and styling are fair game!
A solid white box denotes ON, OPEN, DELIVERED (Mailbox) or DONE (for appliances). 50% Transparent box denotes the opposite. A box with an outline is either informational, a scene or a link to a different control page.
All elements and styling are fair game!
- Attachments
-
- October_05__2013_at_1035AM.png (82.48 KiB) Viewed 9243 times
- durosity offline
-
- Posts: 4320
- Joined: May 10, 2012
- Location: Newcastle Upon Tyne, Ye Ol' England.
Re: Post Pics of Your Control Pages HERE!
It’s a nice layout, BUT way too little colour.. would work well on an old Mac Plus from 1989 though! Have you considered introducing some chromatics into it? Perhaps have different shades of blue to red for the different temperatures of a room? Eg blue for 65º, a slightly lighter shade for 66º, again lighter for 67 working it’s way up to reds for the hotter temperatures? Same idea for alarm status perhaps? Other than that i like the concept!
Computer says no.
- Dewster35 offline
- Posts: 1030
- Joined: Jul 06, 2010
- Location: Petoskey, MI
Re: Post Pics of Your Control Pages HERE!
durosity wrote:It’s a nice layout, BUT way too little colour.. would work well on an old Mac Plus from 1989 though! Have you considered introducing some chromatics into it? Perhaps have different shades of blue to red for the different temperatures of a room? Eg blue for 65º, a slightly lighter shade for 66º, again lighter for 67 working it’s way up to reds for the hotter temperatures? Same idea for alarm status perhaps? Other than that i like the concept!
I'm the worst color choice designer in the world :/ I've picked up a color pallet of typical metro styling and would like to incorporate it somehow, not quite sure how yet. Perhaps add like items to a specific color or rooms of a specific color. I've added an image of a shortcut arrow to the pages that take you to a different control page to try to differentiate the items that just have the outlined box some more. I wish I could take credit for the concept, but C64 gave me the idea
I was thinking too... these are going to be a LOT easier on bandwidth so they should load nearly instantly once I get around to shrinking them down a bit.
In regards to your colors for your temperatures, the only way I can think of to accomplish what you are saying would be to have separate elements defined for each temperature that don't show when they aren't relevant? Hoping maybe you've got a more elegant way of accomplishing that because I've got some ideas for that on some other things I'm working on!
- durosity offline
-
- Posts: 4320
- Joined: May 10, 2012
- Location: Newcastle Upon Tyne, Ye Ol' England.
Re: Post Pics of Your Control Pages HERE!
Dewster35”] I'm the worst color choice designer in the world I've picked up a color pallet of typical metro styling and would like to incorporate it somehow, not quite sure how yet [/quote]
Indeed colour selection is difficult.. to be honest whenever i do anything colour based i tend to just work it by trial and error. I’d create some images and a dummy control page, then move them about until the pattern looked right.
[quote="Dewster35 wrote:I was thinking too... these are going to be a LOT easier on bandwidth so they should load nearly instantly once I get around to shrinking them down a bit.
Indeed.. although with most upstream speeds these days it’s becoming less and less of an issue of size vs convenience
Dewster35 wrote:In regards to your colors for your temperatures, the only way I can think of to accomplish what you are saying would be to have separate elements defined for each temperature that don't show when they aren't relevant? Hoping maybe you've got a more elegant way of accomplishing that because I've got some ideas for that on some other things I'm working on!
As far as i’m aware that’s the only way of doing it. I’ve currently got a control page i’m working on for some Z-Wave TRVs which i’m hoping to install on every radiator in my new house.. so i’ve created a test control page which has each room listed on a blue background, then on top the current temp, the desired temp and the up/down buttons. The background images are just variables with a naming scheme of bg_thermostat+.png bg_thermostat+5.png bg_thermostat+6.png etc.. each image getting progressively more red. In theory it’ll mean at a glance i’ll be able to tell which rooms are warm and which ones are cold..
Computer says no.
Who is online
Users browsing this forum: No registered users and 4 guests