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

Posted on
Sat Dec 09, 2006 11:18 pm
morps offline
Posts: 122
Joined: Nov 01, 2003

(No subject)

dsnider wrote:
How do you get the custom html into your control page? You created it in iWeb, but then what did you do to get the control page to use it?


No you're not dense. And for the last 20 minutes, I have been trying to get the forum to accept my posting with the "answers to the quiz" here, but it seems that phpbb doesn't like any references to iframe code and as a result it keeps whiping out my code snippets I am trying to post. If you email me off line at mike at morper do net I will be more than happy to send ya an email detailing how I do it.

Matt -
I think something is foobar'd with the forum. Pls email me off line if you're interested and I'll show you the post I'm trying to do but the code keeps getting deleted.

Posted on
Sun Dec 10, 2006 8:35 am
nsosnicki offline
Posts: 168
Joined: Nov 14, 2004
Location: Boston, MA, US

(No subject)

I think you need to click "disable HTML in this post" when posting the message.

Posted on
Sun Dec 10, 2006 9:39 am
morps offline
Posts: 122
Joined: Nov 01, 2003

(No subject)

nsosnicki wrote:
I think you need to click "disable HTML in this post" when posting the message.


(NOTE TO SELF: Never, never try posting to the Indigo forum after returning from a holiday party. Alcohol disables one's ability to tick the "disable HTML in this post" box below) :oops:

dsnider wrote:
How do you get the custom html into your control page? You created it in iWeb, but then what did you do to get the control page to use it?


No you're no dense... I wasn't completely clear on what I did. Here are the steps:

1. Create your Control Page in Indigo
For this example, let's say your Control Page is named "downstairs." To access that page, you would have a url that looks something like:

Code: Select all
http://192.168.123.100:9999/controlpage?name=downstairs


2. Create a page in iWeb
iWeb employes the use of <div> tags extensively. This is what allows you to have specific content in particular areas of the page without needing to worry about creating tables and dropping content into the appropriate "cells" of the table. Where content within <div> tags resides on your page is typically explicitly indicated by pixel location (think X, Y coordinates from the top, left corner of your browser window).

Keeping that in mind, I created a text box the exact same pixel size as the background image of my Control Page within my iWeb page. Within that text box, key in "REPLACE WITH INDIGO" or something meaningful to you. You will need to find this text later in step 4 below. Now, why the text box the same size as your Control Page? Because in a second, you're going to publish the iWeb page locally, open up the resulting published page with a text editor and add a snippet of code which will insert your Control Page WITHIN the iWeb-produced page.

3. Publish iWeb Page
As I just referenced, locally publish the iWeb page to any location you see fit (desktop works).

4. HTML Embellishment Time
Remember the text box you created in step #2 above, you're about to open up the published HTML file with a text editor (Text Edit works, but I prefer Text Wrangler). Look for the text you entered in step #2 ("REPLACE WITH INDIGO"). That text will be bounded by <div> and </div> tags.

Select the text denoted above and replace it with

Code: Select all
<iframe src="http://192.168.123.100:9999/controlpage?name=downstairs" width="320" height="650" align="center" scrolling="no" frameborder="0"></iframe>


Notice that the http://... is the full url to your Indigo Control Page. Additionally, width and height parameters (the width and height of your Control Page) should also be included into the url. I also included align and scrolling options too.

If you're not familiar with iframes, they're good stuff. iframes allow you to inject a webpage into another one. Safari and FireFox fully support iframe tags.

Now save the page.

5. Move "Embellished" HTML file
Now that you have embellished your iWeb produced file, go ahead and move it to wherever you host your site. A few things to consider:

A. If you plan to host this page outside your own network, then you are going to need to have your external IP address referenced within the http://... portion of the iframe. A 192.168... address is a local network address. Of course you will also need to make certain you have the appropriate port redirection taking place with your router/cable modem so external network requests to the server can be successfully resolved.

B. If you plan to access this page ONLY from within your local home network, then leave the local IP address in place and you'll be fine.

Last caveat:
As soon as you crack open iWeb again and make ANY changes to the file, it will break all your hard work above (inserting the <iframe> gobbly-goop.) So, remember to repeat above if you change anything in iWeb.

I hope this helps a bit.

Cheers...

Posted on
Sun Dec 10, 2006 9:43 am
czvi offline
Posts: 79
Joined: Jul 23, 2006

Re: Personal Web Sharing Basic Authentication Tip

Morps,

It seems that you answered most of my questons above as I was typing this post. One thing: In 5A above, you mention the cable modem/router. Can you be more specific about how to do this? Thanks. This is great stuff.

Posted on
Wed Dec 20, 2006 5:48 pm
Otis69 offline
Posts: 36
Joined: Jul 12, 2006
Location: Shasta Lake, CA

Picture of my controlpage

:D :D :D This is so much fun that I keep playing with it.
Anyway, I figured that I'd better post it before I change my set-up and the page again. :D :D :D

Please click the link to view my control page.

http://google.com/base/a/1465189/D1416126170620743883 :D

Posted on
Wed Dec 20, 2006 8:17 pm
czvi offline
Posts: 79
Joined: Jul 23, 2006

(No subject)

Otis,

Looks like you've been having too much fun! :D

Posted on
Wed Dec 20, 2006 8:36 pm
HighwayStar offline
Posts: 82
Joined: Sep 07, 2005
Location: NY

Re: Picture of my controlpage

Otis69 wrote:
:D :D :D This is so much fun that I keep playing with it.
Anyway, I figured that I'd better post it before I change my set-up and the page again. :D :D :D
Please click the link to view my control page.
http://google.com/base/a/1465189/D1416126170620743883 :D


Very nice ! Where did you get the graphics for the furniture, etc. ? Thanks,

Ken

Posted on
Thu Dec 21, 2006 11:02 pm
dsnider offline
Posts: 62
Joined: Jul 20, 2006
Location: Utah

(No subject)

OK, so it took me longer than I thought, but here is what I have for my control pages.

Image
Image
Image

And yes... the "Sexy Romance" playlist is for when... well... I'm feeling sexy... :oops:

Posted on
Sun Dec 24, 2006 9:40 am
Otis69 offline
Posts: 36
Joined: Jul 12, 2006
Location: Shasta Lake, CA

Graphics

Hi, I was asked where I got my graphics from.

I got the graphics off the internet by doing a search for what I wanted. For instance "bedroom furniture".
When I found what I liked, I simply dragged it to my desktop. I then used ColorIt! to clean up the background, crop & resize it. ColorIt! is back & available for OS X.
Also available is Enhance 4.0 for Mac OS 9/Classic.

Those of you who are not familiar with these 2 programs should really take a look at them.
Here:
http://www.digimagearts.com/

Posted on
Wed Jan 10, 2007 8:25 pm
pwfletcher offline
Posts: 179
Joined: Jul 19, 2006

Remote Controls

I have started making image based remote controls for each of my components. I just finished the first one which is the remote for my hack-a-mac mini. If anyone needs the images to put an apple remote together on their control page, I attached them below ...

(You may need to hit refresh a couple of times to make the new image show up in your browser ... I had to)

Image

Image

Image

Image

Image

Image

Image

Image

Posted on
Tue Jan 23, 2007 6:04 pm
ollivier_le_roch offline
Posts: 18
Joined: Jan 19, 2007
Location: France

Full CSS template for indigo web server with drag and drop f

Hi,

just a template in full CSS mode for skinning your own Indigo Web Server. With drag and drop function for all elements…
This page is under developpemnt…
To try it :
http://www.leroch.org/x10/fond-brosse2/

Image

Regards
Ollivier

Ozone : Web Design, photography and X10…
Ollivier Le Roch : http://www.leroch.org/

Posted on
Fri Jan 26, 2007 12:04 pm
Paul T offline
Posts: 1
Joined: Jan 26, 2007

I'm as newbie as can bee!

Hi everyone,

I have been wanting to do this forever and have finally found the time to get going.

I downloaded the trial to see what I may be in for (heaven knows how many unopened programs I have in my closet already).

Can you all convince me how simple the interface is and how quickly I can actually have this working and not sit in an inoperable state on my laptop?

The trial doesn't show me how the floor plan is integrated into the foundation or how one actually tells the program where and how it communicates with the modules.

I didn't want to pay the money before feeling assured that I can have it actually working,
not looking nice as a control page that doesn't function.

I was even willing to have someone set it up for me and send it over if this would assure complete functionality. Any takers?

Looking forward to sounding more confident in my future postings...

...and to having some Indigo fun!

Paul T - NYC

Posted on
Fri Jan 26, 2007 1:45 pm
matt (support) offline
Site Admin
User avatar
Posts: 21411
Joined: Jan 27, 2003
Location: Texas

Re: I'm as newbie as can bee!

Hi Paul,

Paul T wrote:
Can you all convince me how simple the interface is and how quickly I can actually have this working and not sit in an inoperable state on my laptop?

Have you read the user manual page on how to create Control Pages? It isn't a step-by-step tutorial, but it is definitely a good place to start when first creating a Control Page. I also suggest you open the Control Page on the sample database file and select the various controls to see how they are defined and what options they use.

Regards,
Matt

Posted on
Wed Jan 31, 2007 8:36 am
gregss offline
Posts: 88
Joined: Sep 21, 2006
Location: Atlanta, GA

Control Page Template

I finally got around to putting together control pages in 2.0.

I wanted a nice, clean look, so I put a locator map with navigator buttons by zone on the left. In the upper-right, an Apple-style control toggles the main view between a floorplan view and a device list view. (Within a zone, the actions in the upper-right are consistent between floorplan and list views, which are implemented as separate control pages.)

For anyone who is interested, I have put the background and navigation image files in a ZIP archive for download. The archive includes a "Basement" button as well that isn't shown in the examples below, since that might come in handy. The folders in the ZIP archive correspond to the server folders I have placed the image files in.

Image
Image[/b]

Posted on
Wed Jan 31, 2007 8:50 am
matt (support) offline
Site Admin
User avatar
Posts: 21411
Joined: Jan 27, 2003
Location: Texas

Re: Control Page Template

Hi Greg,

I really like your navigation concept. What do the green/red dot controls do in the navigation area -- turn on the lights on/off for that "zone"?

And thanks again for the great new device icons (now included in the 2.0.3 installer).

Regards,
Matt

Page 8 of 68 1 ... 5, 6, 7, 8, 9, 10, 11 ... 68

Who is online

Users browsing this forum: No registered users and 2 guests