Scale Control Pages for iPhone/iTouch

I've seen quite a bit in these forums for creating some pretty advanced control pages for an iPhone. Maybe I missed it, but until there are easy templates available, is there a way to scale my control page for the iPhone browser?

I just want to add my control page (created in Indigo with the canned buttons) as a web clip to the home screen of my iPhone (I've seen the thread for giving it a custom icon), and in one click have it ready to control my devices. Right now my page is tiny initially and I have to reverse pinch to get the buttons big enough to tap with accuracy. I assume this is an easy thing to do since no one else seems to be asking about it.

Thanks in advance.

-Paul

I can't really help much since I'm more of an outsider looking in when it comes to Indigo and the control pages side of things but I can provide some insight based on what I've been reading.

People can and are making changes to their Indigo web based control pages to more reasonably sized for the iPhone and I've seem some really neat html stuff that produces pretty dazzling results... The kicker seems to be this:

To make use of those really neat iPhone html templates (iui is the name I think) requires most of the following...

1 - css knowledge
2 - html knowlege
3 - how and where the current Indigo keeps the html and css that is uses
4 - some python knowledge (I think)

So you could do it today if you had the skill set above but unfortunately, most people do not.

I've read that 'native' to Indigo (as in part of the default install) iPhone friendly templates are being worked on and (perhaps?) are going to be released soon and even better still is an iPhone / iPod Touch native application is in the works that will speak directly to Indigo utilizing a truly iPhone native UI.

In short (too late) things are in the works on a number of different fronts but none of them are quite ready for prime time just yet. I'd expect to see lots more progress and news over the next few months...

Dave

Thanks for the reply, but maybe I wasn't clear about what I wanted. I don't need to make a fancy control page that looks like a native app, I just want my current page to scale correctly on an iPhone.

If you look at most iPhone web apps using a regular computer browser, they are just 320 x 480 web pages (like this one: http://furbo.org/stuff/conspiracy.html). I thought (incorrectly) that if I make my control page 320 x 480, when I navigate to it on my iPhone it would fill the screen. Instead, it looks just like it would on a PC browser with most of the page being blank space and scaled down versions of my controls in the upper left corner. Is there a way to get my 320 x 480 control page to automatically fill my iPhone browser page?

[matt (support)]

I thought (incorrectly) that if I make my control page 320 x 480, when I navigate to it on my iPhone it would fill the screen. Instead, it looks just like it would on a PC browser with most of the page being blank space and scaled down versions of my controls in the upper left corner.

You just need to upgrade to the latest public beta of 3.0. I added the correct view port scaling tags a while back.

Regards,
Matt

I thought (incorrectly) that if I make my control page 320 x 480, when I navigate to it on my iPhone it would fill the screen. Instead, it looks just like it would on a PC browser with most of the page being blank space and scaled down versions of my controls in the upper left corner.

You just need to upgrade to the latest public beta of 3.0. I added the correct view port scaling tags a while back.

Regards,
Matt

See that... I told ya I wasn't totally up on the Indigo iPhone control page thing... the good news I was way off in thinking it wasn't done when in fact it's been done..

How often does THAT happen?

Dave

It works great! And v2.5 has the Indigo WebApp icon!

Thanks Matt for the quick reply.

-Paul

You just need to upgrade to the latest public beta of 3.0. I added the correct view port scaling tags a while back.

Can you explain this? I just updated to 3.0b19, and found that neither basicpage.html nor basicpage_mini.html (in the server templates folder) had iPhone viewport tags.

I've added this:

Code: Select all

<meta name = "viewport" content = "width=device-width">


between the #if $iPhone and the #end if in both files, and that results in a list that's the same width as the iPhone screen.

[matt (support)]

The basicpage's have not yet been updated. The main (home) navigation screen was updated as was the page used to generate Control Pages.

Regards,
Matt

The basicpage's have not yet been updated. The main (home) navigation screen was updated as was the page used to generate Control Pages.

Regards,
Matt

This answers the question I came with, but prompts a new one.

Is it possible to make a Control Page that mimics the basic pages only scales properly for the iPhone? Or do I just need to sit quietly and wait for the basic pages to be updated?

I don't really want (right now anyway) to go graphical on the iPhone just yet (I'm not 3G). I'd rather have a basic page with text that I don't have to blow up.

Thanks,
Byron

[matt (support)]

Hi Byron,

You can definitely try editing the HTML template file used to generate that page. It is located here:

Code: Select all

/Library/Application Support/Perceptive Automation/Indigo 2/IndigoWebServer/templates/basicpage.html

Or the mini page which is the same path but the basicpage_mini.html file.

Those pages use HTML tables for formatting, which may not work that well for creating an iPhone appearance. But you can try adding the viewport scaling meta tag to those pages as a start.

The next major version of Indigo should have basic pages that work out-of-the-box with the iPhone. In the mean time you'll have to hack the template file yourself or use Control Pages.

Regards,
Matt