iPhone...works
- pwfletcher offline
- Posts: 179
- Joined: Jul 19, 2006
(No subject)
That is the entirety of my html file ... the css file does not contain any iphone information.
- pwfletcher offline
- Posts: 179
- Joined: Jul 19, 2006
(No subject)
Here is how it looks on the iphone ... note that I had a lot more pictures and fancy stuff in it before but reduced things down to the bare minimum to speed up page loading while using edge. The interface I am using now has a nice balance between good looks and a small footprint.
- wallachee offline
- Posts: 141
- Joined: Apr 30, 2005
(No subject)
Which server file do you put the Meta tag into?
-Bradley
-Bradley
- Mark offline
-
- Posts: 263
- Joined: Apr 21, 2005
- Location: California
(No subject)
I didn't see a clear answer to exactly how you implement all this iPhone stuff.
I tried modifying the server's templates, by adding the "viewport" meta tag. This worked OK, but affected ALL my control pages. So the iPhone-specific pages viewed correctly, but I was unable to zoom in or out on my other control pages (which are optimized for Safari, not the iPhone).
I want a couple of pages optimized for the iPhone (just the most-used functions) but still be able to rely on my regular control pages when I need to have more control. And that means I have to be able to zoom in and out on those pages.
So I came up with an interesting approach ('cause I didn't know any better at the time). But it seems to be working better than what I've been reading about.
I created a control page for the iPhone using Indigo's interface, but in giant size. Giant buttons, giant text, etc. I used Apple's Developer guidelines for the iPhone to get the size and colors right.
Now that page loads on the iPhone at 100% size, and looks right (no initial zooming or double-tapping required). I only used a few, simple buttons so it loads fast.
This way, I can use the Indigo interface to modify the page. That gives me access to all of the various control page elements (links, actions, variables, etc.) without having to figure all that out on my own. I don't have to monkey with template code. Or use a static page.
Moronic, yet elegant!
If you're interested in how I did it, or the graphics I used, give me a shout...
Or do you have a better solution? It seems what we need is a selectable option within Indigo's control page interface that would indicate to the server to add iPhone viewing code (or not) for a control page. Similar to the existing option that controls if a page opens in a new window or not. A little checkbox, right? What to you think, Matt?
Or is there some way to add the metatag that controls the viewport to some control pages, but not others?
HELP!!
This is what I've got now. There are only four graphics (the underlying buttons). The arrows that indicate links to other pages, and the "lights" that indicate variable states are just text.
By the way... while Safari can remember your server's login info (user id and password) for instant access to your control pages, the iPhone doesn't. It asks you for your password each time you first access one of your control pages. There's a work-around for that. Let me know if you need that.
I tried modifying the server's templates, by adding the "viewport" meta tag. This worked OK, but affected ALL my control pages. So the iPhone-specific pages viewed correctly, but I was unable to zoom in or out on my other control pages (which are optimized for Safari, not the iPhone).
I want a couple of pages optimized for the iPhone (just the most-used functions) but still be able to rely on my regular control pages when I need to have more control. And that means I have to be able to zoom in and out on those pages.
So I came up with an interesting approach ('cause I didn't know any better at the time). But it seems to be working better than what I've been reading about.
I created a control page for the iPhone using Indigo's interface, but in giant size. Giant buttons, giant text, etc. I used Apple's Developer guidelines for the iPhone to get the size and colors right.
Now that page loads on the iPhone at 100% size, and looks right (no initial zooming or double-tapping required). I only used a few, simple buttons so it loads fast.
This way, I can use the Indigo interface to modify the page. That gives me access to all of the various control page elements (links, actions, variables, etc.) without having to figure all that out on my own. I don't have to monkey with template code. Or use a static page.
Moronic, yet elegant!
If you're interested in how I did it, or the graphics I used, give me a shout...
Or do you have a better solution? It seems what we need is a selectable option within Indigo's control page interface that would indicate to the server to add iPhone viewing code (or not) for a control page. Similar to the existing option that controls if a page opens in a new window or not. A little checkbox, right? What to you think, Matt?
Or is there some way to add the metatag that controls the viewport to some control pages, but not others?
HELP!!
This is what I've got now. There are only four graphics (the underlying buttons). The arrows that indicate links to other pages, and the "lights" that indicate variable states are just text.
By the way... while Safari can remember your server's login info (user id and password) for instant access to your control pages, the iPhone doesn't. It asks you for your password each time you first access one of your control pages. There's a work-around for that. Let me know if you need that.
- snowjay offline
- Posts: 274
- Joined: Aug 09, 2006
(No subject)
I'm trying to design for my iPhone now and would love to see some of your other screens for ideas.
Looks good so far!
Looks good so far!
Jason
- snowjay offline
- Posts: 274
- Joined: Aug 09, 2006
(No subject)
pwfletcher wrote:editordz wrote:could one of you kindly post how to accomplish this? I've looked at the templates, but it doesn't seem to be HTML code.
thanks,
dan
Here is an example ... note that I had to make it 500 instead of 480 to give it a 10 pixel border on each side. The control page is 480 x 480 ...
Here is the code I use for the page that contains the inline frame that contains the Indigo control pages. This allows you to set the meta tag and iframe tags at the same width without having any borders around the frame. It also makes the address bar disappear after the page completely loads.
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Stone Meadow</title>
<meta name="viewport" content="width=320; user-scalable=false" />
</head>
<body topmargin="0" leftmargin="0" onload='setTimeout(function(){window.scrollTo(0, 1);}, 100)'; >
<iframe src="http://192.168.0.175:8000/controlpage?name=iPhone" width="320" height="480" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"></iframe>
</body>
</html>
Jason
- snowjay offline
- Posts: 274
- Joined: Aug 09, 2006
(No subject)
Another question...
How are you all accessing your control pages with the iPhone when not on your local LAN? Looking at all of my options I would need to set up two separate bookmarks for internal and external access, no matter what I choose. So internally I hit the server directly and externally I would use dyndns or Prism addresses. Maybe I'm just being thick but I can't figure out another way around it. Not that it's a big deal either way.
How are you all accessing your control pages with the iPhone when not on your local LAN? Looking at all of my options I would need to set up two separate bookmarks for internal and external access, no matter what I choose. So internally I hit the server directly and externally I would use dyndns or Prism addresses. Maybe I'm just being thick but I can't figure out another way around it. Not that it's a big deal either way.
Jason
- macpro offline
-
- Posts: 765
- Joined: Dec 29, 2005
- Location: Third byte on the right
(No subject)
I'm also using two bookmarks to access my control pages on my PowerBook.
One for when I'm at home and one for internet access.
One for when I'm at home and one for internet access.
- snowjay offline
- Posts: 274
- Joined: Aug 09, 2006
(No subject)
macpro wrote:I'm also using two bookmarks to access my control pages on my PowerBook.
One for when I'm at home and one for internet access.
Are you using the Prism reflector or going straight to your Mac with authenticated access?
I'm probably going to do the latter, allowing anyone on my local network access to the web page and then external access will be guarded with a name/password. I'll also do some port forwarding on the router to hide the server.
Jason
- Mark offline
-
- Posts: 263
- Joined: Apr 21, 2005
- Location: California
(No subject)
snowjay wrote:I'm trying to design for my iPhone now and would love to see some of your other screens for ideas.
Looks good so far!
Thanks!
I've only developed two pages for my iPhone. There's more to the one shown (it scrolls down), but it's more of the same. And then there's a page that lists all my Actions. Super simple, clean. Loads fast. The other pages that are accessed by my "iPhone Home Page" are my regular control pages (designed for Safari on Mac). I didn't want to maintain two sets of control pages, so the idea was to put everything I might need while on my iPhone all on the one iPhone Home Page. I'll access my standard control pages (and just zoom and pan) when I need something that isn't on the iPhone interface.
I'll eventually get my iRed stuff going, so I'll control my home, while home, with my infrared remotes, not the iPhone (as cool as that is, it'll never be as fast as clicking a TV remote control button). So the iPhone interface will only contain items that I'll likely need while away from home. Don't want to get carried away here.
I, too, access my control pages with two URLs. One while home, another while away. I use a direct URL while away, not Prism. Works fine.
There's a shortcut for accessing these pages without having to enter a user ID and password each time. But I won't broadcast it. Send me a private note if you want to know how.
I've completely abandoned the aforementioned method of creating giant pages and giant buttons to address the screen size issue (like I said, that was before I knew better!). Instead, I created a 320x480 page, with normal buttons, and then modified the code of the control page template to get it to load on the iPhone correctly. It turns out that having all the control pages load on the iPhone at 100% size was a good thing. Even though I can't see all of my regular pages when they first load (they're zoomed in), that works better for me, as the first thing I was doing anyway was zooming in!
So the iPhone page loads great and my regular pages are "pre-zoomed." Perfect for me!
Not sure what all this talk is of margins and borders and frames, etc. I use a 320 x 480 control page, with a colored background (no graphic). And just four, tiny, 4K buttons. Everything else is just text. That's it. Loads like a bullet! My Actions page uses just ONE 4K graphic. Gotta hack and hew for that mighty "Edge" network!
I only added this one line to the head section of Indigo's html template file called "controlpage.html":
<meta name="viewport" content="width=320; initial-scale=1.0" />
That's it. I eliminated all portions of code that limited the zoom and pan (like: scrolling="no"), as that was affecting my other control pages.
None of this affects the control pages when viewed on Safari on Mac.
Happy to share more details or graphics, if you need...
Oh, graphics... One more tip for ya. I was shocked to see that my "simple" PNG buttons were measuring 52K+ in size. What?!? They're just tiny, white buttons!! Turns out, saving PNG files from Photoshop adds a bunch of junk (probably thumbnails, previews, whatever). So I opened the files in Apple's Preview app, then did a Save As. Now all my files read 4K, but are actually more like 1000 bytes or less! That's more like it!! Now I gotta go back and do all the graphics I created for my standard pages!! Yikes...
Last edited by Mark on Thu Aug 23, 2007 2:43 pm, edited 1 time in total.
- macpro offline
-
- Posts: 765
- Joined: Dec 29, 2005
- Location: Third byte on the right
(No subject)
snowjay wrote:Are you using the Prism reflector or going straight to your Mac with authenticated access?
I'm probably going to do the latter, allowing anyone on my local network access to the web page and then external access will be guarded with a name/password. I'll also do some port forwarding on the router to hide the server.
I'm using the method that you would like to use. Works fine.
Although I could also use a SSH tunnel, but this is easier because I only have to remember the portname, username and password to access my control pages from any internet connection.
- snowjay offline
- Posts: 274
- Joined: Aug 09, 2006
(No subject)
Mark wrote:I, too, access my control pages with two URLs. One while home, another while away. I use a direct URL while away, not Prism. Works fine.
...
Not sure what all this talk is of margins and borders and frames, etc. I use a 320 x 480 control page, with a colored background (no graphic). And just four, tiny, 4K buttons. Everything else is just text. That's it. Loads like a bullet! My Actions page uses just ONE 4K graphic. Gotta hack and hew for that mighty "Edge" network!
I only added this one line to the head section of Indigo's html template file called "controlpage.html":
<meta>
...
Thanks Mark. I'm pretty sure I know the name/password trick you speak of. But if I have questions I'll PM you.
What I did instead of editing the controlpage.html of the Indigo server is I turned on Personal Web Sharing. Then the file I posted is the index.html file of the personal web server which calls the Indigo server pages in the iframe. Either way works but I think Matt said the controlpage.html might/could get overwritten when you upgrade Indigo so you'd have to remember to back it up/restore it. This just saves me that hassle. I can post better instructions if you are anyone else is interested.
Does your Photoshop have a "Save for Web" option? I have Elements 4.0 and it does. That eleminates all that extra crap and saves it as small as possible (you can actually tweak the settings and see the preview and file size before saving).
Jason
- snowjay offline
- Posts: 274
- Joined: Aug 09, 2006
(No subject)
macpro wrote:snowjay wrote:Are you using the Prism reflector or going straight to your Mac with authenticated access?
I'm probably going to do the latter, allowing anyone on my local network access to the web page and then external access will be guarded with a name/password. I'll also do some port forwarding on the router to hide the server.
I'm using the method that you would like to use. Works fine.
Although I could also use a SSH tunnel, but this is easier because I only have to remember the portname, username and password to access my control pages from any internet connection.
I use the SSH Tunnel when I need to VNC to the box but for the web pages I don't really see a need. Plus you can't do an SSH tunnel on the iPhone, well at least not easily.
Now comes the most important part, picking a domain name from dyndns. :lol
http://www.dyndns.com/services/dns/dyndns/domains.html
Jason
- Cosmuk offline
-
- Posts: 115
- Joined: Jan 16, 2007
- Location: Chicago
(No subject)
Mark,
Using your,
I only added this one line to the head section of Indigo's html template file called "controlpage.html":
"{<meta>"}
Worked great!!
THX
Matt this has to be on your next version.
Using your,
I only added this one line to the head section of Indigo's html template file called "controlpage.html":
"{<meta>"}
Worked great!!
THX
Matt this has to be on your next version.
Skype : cosmuk
- macpro offline
-
- Posts: 765
- Joined: Dec 29, 2005
- Location: Third byte on the right
(No subject)
snowjay wrote:Plus you can't do an SSH tunnel on the iPhone, well at least not easily.
Right, I forgot. You have that iPhone thing overthere. Where I live we only know it from pictures...
Who is online
Users browsing this forum: No registered users and 3 guests