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)
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...