I've stumbled across a google code project named "c200remote", which can be installed through the popular and easy-to-use generic installer for 3rd party NMT applications "NMT Community Software Installer" (short: NMT CSI).
<meta name="viewport" content="width=device-width; user-scalable=0; initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
The first line sets the viewport to the device's width, locks the zoom to 1 and be prevents the user to change it.
Second line enables full screen mode to hide the upper mobile Safari toolbar (address field, ...) when being started from the home screen, which greatly improves the visible (and useable) area.
Of course there are plenty more things you are able to do, specifically for the iPhone.
So the first proof of concept, which actually worked pretty well, but looked like an old Windows 3.1 interface, was this one (heavily modified index.html from v1.0.1 of c200remote, later combined with the commanding PHP file):
Of course you could have stopped here, but I didn't like the overall experience. Let's face it: it does not look right for a device like the iPhone!
Everything in the mockup images is either text or vector(!)-shapes with layer styles, so it can be scaled up easily when needed - without getting blurred out (Exception: the icons).
I've tried various techniques (CSS sprites, DIVs, UL/LI for HOURS!!) but none of them worked well on the mobile browser, so I went back to the old days (kind of) using absolute positioned DIVs with separate images - not happy with that but it works nicely, even across mobile and desktop versions of several browsers.
You end up with a lot of images when done (hundreds) instead of at most 10 or so, but mobile Safari has some built-in limitations (like no images over 1024x1024 without applying scaling and such stuff), so I had to make a step back there.
To avoid step-by-step-loading with such a huge amount of image files I've added some pre-loading, so the overall appearance remains fine and smooth.
My framework of choice was jQTouch because it supports some basic swiping gestures and nice transitions. It also resembles the look and feel of the up-sliding popup lists quite nicely.
The final design of the remote consists of three main DIVs (for numerical, quicknav and advanced layout) which can either be changed by clicking the appropriate button at the top or swiping left/right.
In addition there are some other DIVs (for a pop-up menu list for switching Power States, TV Mode and an About Layer).
Long story short, here are screenshots of the final web app:
Although the web app can be mistaken to be a native iPhone app (when being added to your home screen it gets an icon, full screen-mode and various webkit-animations/-transitions including the sliding-in popup list/panels) it is just a web site hosted on the C-200, so virtually ANY device which can view PHP/HTML files off your Popcorn Hour is able to interact with it by this web site.
- completion time, first working proof-of-concept: 1 day
- completion time, iPhone-GUI-like version: 2 days
funny fact: 15.2. (Feb 15th) is my birthday :)
- images created for iPhone-GUI-like version: 161 (including onclick images)
- c200remote SVN and more at google code
- forum thread (at networkedmediatank.com)
- NMT Community Software Installer
This new GUI version is not in the CSI repository (yet), but if you want to try it right now, follow these easy steps:
2. Extract the ZIP and the containing TAR file to a temporary location on your computer
3. Install c200remote v1.0.1 by using the CSI installer
4. Copy and overwrite the complete webui folder you've extracted in steps 1 and 2 to your PCH-C200\share\Apps\c200remote folder (important: use SMB, NOT FTP)
to preserve the current version info, do not copy the appinfo.json file, so you'll be able to get notifications by CSI about updated c200remote packages when they officially arrive
To access the new GUI use the following URL: