Useful things

Suchen

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

The version installable from within CSI was v1.0.1 and featured a very basic mobile interface (which did not even work, because the javascript had various errors). Additionally you had to zoom into the page after every single command.

Nevertheless I liked the idea and began to modify the HTML and JavaScript to work on my iPhone 3GS. There are various webkit meta keys to handle the mobile appearance, e.g.:


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

c200remote_old_poc

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!

So I've started to mockup a nicer GUI and did some research on JavaScript frameworks suitable for mobile devices, in this case especially the mobile Safari (WebKit engine).

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.

Some stats:

  • completion time, first working proof-of-concept: 1 day
  • completion time, iPhone-GUI-like version: 2 days
  • written code (PHP and JavaScript) for iPhone-GUI-like version: 1520 lines (including blank lines and comments)
    funny fact: 15.2. (Feb 15th) is my birthday :)
  • images created for iPhone-GUI-like version: 161 (including onclick images)

Some links:



This new GUI version is not in the CSI repository (yet), but if you want to try it right now, follow these easy steps:
1. Download

http://c200remote.googlecode.com/svn/trunk/misc/c200remote_tar_2.2.2_r60.zip


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:

http://pch-c200:9999/c200remote_web/skin/iphone/


 

Comments:

blog comments powered by Disqus