Targeting iPad/iPod/iPhone in JavaScript and CSS

Now that the iPad is out, web developers can expect a lot more hits from mobile Safari, which does not behave exactly like its desktop version.

A real-world example of needing to distinguish mobile Safari is the excellent simpleCombo jQuery plugin that allows you to dynamically type a new OPTION element in a SELECT list. Because mobile Safari's keyboard is only available during places where text entry is expected, you can't make this plugin useful in it. However, the plugin still runs and creates an undesired blank OPTION element, so we need to make instantiating the plugin dependent on the browser not being mobile Safari.

As we all know, browser sniffing is a no-no for many reasons, not the least of which is it's not guaranteed forward-compatible. Object detection is the preferred method, and a method common to all three of Apple's mobile platforms is createTouch, the superclass for creating touch events. a method common to both Apple mobile and Android mobile is window.ontouchstart.

if (!(window.ontouchstart===null)) {$("#Department").simpleCombo();}

It's as simple as that.

Now, you ask, what about style sheets? When the platform was iPhone/iPod Touch, you could easily specify a separate style sheet with the MEDIA selector:

<link media="only screen and (max-device-width: 480px)" href="/css/iphone.css">

In CSS:

@media screen and (max-device-width: 480px) {...}

Of course, most of that separate style sheet need had to do with screen space, but there are other considerations as well. So, how do we select both the iPhone/iPod and iPad in one MEDIA selector?

@media screen and (max-device-width: 480px),(max-device-width: 1024px)

That's all there is to it. To exclude this selector (e.g. you want to create a style sheet which contains both normal and mobile Safari styles), just prepend 'not' to 'screen'.

portable jQuery

Drag this to your toolbar to inject the current jQuery library into any website you're visiting: portable jQuery

lol mobile Safari

This is a short demo of how HTML5's CANVAS element can be animated. You'll notice the absence of sound. This demo works in FF 3.5, Safari, Chrome and Opera.

On mobile Safari, it actually hangs the browser, freezing somewhere around the time the characters introduce themselves. Also, because the title font isn't in SVG format the browser falls back to Trebuchet.

If someone with the faster, 256Mb-based iPhone 3gs would test this page's performance I'd be interested to know how far it gets.


-- Post From My iPod touch

Tiny yet amusing differences between Safari 4.0 for desktop and Safari for iPhone

Safari 4 for desktop and mobile Safari (mouse over for UA strings) are almost identical in their featureset. However, some testing of the HTML5 features shows where they differ. Tests were run here.

Feature	Desktop	Mobile	Comment
<VIDEO> H.264	Yes	Unsure	I believe this can be chalked up to the test's API failing to properly detect capability
Web workers	Yes	No	Probably an executive decision at Apple not to overtax Safari within the 128Mb it runs inside
Geolocation	No	Yes	There are several ways geolocation works; I surmise mobile Safari is borrowing the Skyhook methods among others
<INPUT type="range">	Yes	No	Given the absence of scrollbars on mobile Safari, the lacking range attribute value isn't surprising
@font-face	TTF/OTF	SVG	If I had to guess I'd probably say that malformed SVG is less likely to take down the rendering code than malformed TTFs

Mythbuntu 9.10

Laundry list of observations:

• new interface no longer handles "delete recordings" properly, 'd' had to be mapped to red remote button
• transcode still defaults to RTJpeg instead of MPEG-4
• initially delete did not take -- recordings would reappear in listing
• MythStream has not been updated so does not appear
• MythExport is not integrated with frontend or backend, requiring web interface to configure
• keyboard volume knob is no longer recognized
  

Basic iPhone app list

These are the ones I like:

• Stanza (free): an ebook reader which can connect to online stores and several free content repositories such as Project Gutenberg. It's so good Amazon bought it.
• ReLiSimple Free: a shopping list manager which can sync with an online account (in case someone at home adds something useful to it)
• IRChon Free: An IRC client.
• IM+ Lite (free): an IM client which supports multiple IM networks (Yahoo, AIM, Twitter, and many others). Unlike most IM clients for iPhone, this one doesn't require you to set up an account at the vendor's website. If you want Facebook or Skype, you'll need to pony up $11 (at time of writing) for the full version.
• TouchTerm SSH ($0.99): terminal emulator which supports a full keyboard: Ctrl/Alt/Function, arrows, and more.
  
• UrbanSpoon (free): one of the better restaurant finders/review apps out there. Maps, reviews, and if the restaurateur is registered with UrbanSpoon, even menus. It's the one you see in the Apple iPhone ads.
  
• Last.fm (free): internet radio tailored to your favorite music. Requires a free signup at last.fm.
• Mint.com Personal Finance (free): Arguably one of the better ways to keep track of all your finances at a glance is to register with mint.com (also free). This app gives you an iPhone-optimized view of your finances at mint.
• Sally's Spa ($0.99, on sale): Amusing time-management game where you run a spa and must manage multiple customers.
• Nutrition Menu ($2.99): Type 1 diabetics usually have a pocket-sized copy of the Calorie, Fat & Carbohydrate Counter book in their purse: it covers basic foods, prepared foods and a large variety of chain restaurant food. While this invaluable database of nutrition facts has been made into an app for the old PalmOS and Windows Mobile platforms, its authors have been dragging their heels on porting it to the iPhone platform, and Nutrition Menu is gaining on them. It keeps the database locally, so you don't need a wifi/3G connection to pull up nutrition information on the spot.

DUH moment of the day or Getting Coldfusion to parse § correctly

We were confused at work today as to why CF kept translating the section symbol § as � (your browser is behaving correcrly, that's "Replacement Character") every time the section symbol was included in a form. As it turns out, if your form lives on a page with Western encoding (iso-8859-1) instead of Unicode-8 (UTF-8), some characters will not be parsed correctly, even though the section symbol isn't even technically in the range associated with Unicode.

Porting Ren'Py to iPhone project

Ren'Py is a visual novel framework written in C and Python which conveniently compiles Win32, OS X and Linux targets for you. For those of you old enough to remember "Choose Your Own Adventure" books, visual novels are basically the same idea.

One platform Ren'Py does not support is iPhone, likely due to these factors:

1. The Ren'Py developer community's doubts about the viability of the iPhone app economy (commercial visual novels cost more than most iPhone apps) compounded by recent dustups concerning App Store authors not being paid in a timely fashion
   
2. Apple's public stance against App Store apps with code interpreters. Under the terms of clause 3.3.2 of the iPhone 3.0 SDK, it would seem to be impossible to develop any kind of software with a code interpreter that uses its own frameworks. And yet this is being debated endlessly across forums ever since the 3.0 SDK came out. I suspect the more hardline Apple tries to be on this point, the harder developers will push to create better toolchains of their own, leaving Apple in the unenviable position of trying to add EULA language prohibiting you the end user from choosing what kind of software you want to run on a device you outright own (they had the choice not to port the iPhone to the iPod Touch).
   

Despite these obstacles, we have to remember that the iPhone platform was designed for a very specific purpose: to waste as much time as humanly possible. And to this end, visual novels are IMO a killer pocket app.
Just to make it all fun, I have zero experience with Python or XCode and limited experience with C-based languages -- but then, most of my learning new stuff has been to build real-world projects.
So, let's enumerate what has to be done to accomplish this particular project:

Goalposts:

• Learn Ren'Py/Python
• Learn SDL framework
  
• Learn enough Objective-C/C++
  
• Learn enough iPhone dev process/XCode/alternate toolchains
  

Ren'Py main dependencies:

• PyGame
  
• Python (found, available from Cydia)
• libsdl (found)
  
• ffmpeg (proven, on Cydia)
  
• libogg (proven, on Cydia)
  

Possible final product distribution:

1. unjailbroken app distributed via ad hoc (ad hoc is limited to 100 users)
2. jailbroken app distributed via Cydia
   
3. self-distributed manually installed .ipa package (potential path, not enjoyable yet for end users)
   

Possible packaging:

1. Standalone package (possibly a compile option for Ren'Py main)
2. Shell app to be fed game files from existing games (i.e. jailbroken app)

Issues/obstacles:

• Licensing for Python / SDL incompatible with AppStore (irrelevant) and not necessarily free for commercial products
• This suggests a shell app feature which can load Ren'Py /game
  
• Performance hits from multiple software abstraction layers and interpreters (could be serious)

Recently discovered resource:

haXe for iPhone (iPhone port takes care of SDL wrapper, among other things)

6.28: found libsdl for iPhone
6.29: iPhone 3.0 SDK installed
6.30: Looking into open source toolchains to bypass iPhone 3.0 SDK licensing issues

Uploading Lucida Grande to your iPhone

Preface: this would not be possible without Tukulesto's sparse tutorial. Recommended software: TouchTerm Lite and FontViewer on your iPhone.
Amazingly, Apple chose not to put OS X's signature font on their mobile platform. This can be corrected if you have a Mac handy and your iPhone is jailbroken.
For starters, have an sftp client on your Mac (Cyberduck is good). Log in and navigate to /System/Library/Fonts. There should be two things in it: CGFontCache.plist and the Cache directory (where the fonts actually live). Since 10.4, OS X has stored its property list files in binary rather than XML format: this can be converted using the plutil command line utility. The astute among you will notice that the OS on the iPhone itself has a plutil utility, but beware: the converters were stripped out by Apple.
The basic procedure is as follows: sftp into your iPhone, drag the fonts you want added into the Cache folder, then convert-edit-convert the CGFontCache property list to add the font's metadata, then shutdown/restart your iPhone to make the change take effect.
Why would you bother doing this? In my case, I wanted to see the Apple website rendered more faithfully, and to add more diversity of sans-serif fonts to Stanza's ebook reader (many of the defaults are derivatives of the same Grotesk gothic family). It's also good practice for hacking your iPhone.


-- Post From My iPod touch

The 21st century inflight

I generally avoid flying since the TSA decided an insulin pump was grounds for unpacking all my luggage, but I really like my in-laws and they live across the country in North Carolina (not too far from where Ruth and I used to live before we moved to Arizona).
We've both got 8Gb iPod Touches and we planned to keep ours stocked with entertainment media for the long drives and flights. Archive.org is a good source of public domain MP4 content including vintage cartoons. Ruth found smoking deals on some childrens' classics in audiobook format as well as the large free assortment from vox libris. Stanza connects to the Gutenberg Project where much is there to be downloaded.
Aboard our flight, I was surprised how many laptops, netbooks and iPods popped out.


-- Post From My iPod touch

iPod Touch: 10 days later

A few gripes:

Arrow key gestures were really useful in the Palm GUI. Trying to fix text in the middle of a word or URL is maddening.
The search function in AppStore should remember the last thing I typed, not the last result I clicked.
A graphic equalizer in Music would be nice.
Map needs to be able to save/cache directions. Not all of us have 3G connections, and realistically there are places in Arizona where it wouldn't matter if you did. Offline is a reality for many of us. [edit: Map does cache directions and pictures for offline. I did not do my homework here.]
4x4 is not enough real estate for power users.
Lantern mode should be a feature, not a $.99 app.
The bug where all AppStore apps suddenly stop working until you're connected enough to delete and reinstall one of your AppStore apps: fucking fix it already. This is unacceptable.
Calculator: shit sandwich until it has scientific like OS X proper has. [edit: there are many fine free calculators I overlooked.]

-- Post From My iPod touch

Suggested apps for new Mac owners

So, you bought a new Mac and you're wondering what Apple left out. Here's my suggested list of things to add:

• Firefox: it should be obvious, but just in case it wasn't (but check out Flock below first)
  
• Adium: universal IM client. Yahoo, AIM, MSN, Facebook, Myspace, whatever, it has support for it
• Audacity: sound recorder and converter
• CoconutBattery: if you've got a MacBook, gives you detailed information about your battery's lifespan
• Cyberduck: if you do FTP work, this is essential
• Flip4Mac: plays WMV video in QuickTime Player
• Flock: Firefox on steroids for social networking site users. Built in tools for YouTube, Flickr, Digg, Facebook, Blogger, Twitter, and many more. I use it instead of Firefox.
• HandBrake: DVD ripper extraordinaire.
• MPEG Streamclip: convert video to a number of formats. Particularly useful for converting videos to iPod-friendly formats
  
• OpenOffice.org: free alternative to Microsoft Office which can read and write Microsoft's formats
• Perian: adds more video codecs to QuickTime Player (e.g. natively play .flv Flash video)
  
• Smultron: advanced text editor for coders
• The Unarchiver: OS X can unzip zipfiles but doesn't recognize other formats like .rar or .7z or many, many others.
• UnRarX: more sophisticated .rar decoder, can unpack .rars that the Unarchiver can't
• Transmission: fast, lightweight BitTorrent client
• VLC: excellent media player for playing media formats other players can't. Also plays ShoutCast internet radio stations from around the world
  

iPod touch

My better half suggested I get one of these as a PDA with benefits. So far I've been impressed with the following:

• Opening powerpoint presentations from web
• Dailymotion video working without flash
• Bundled web fonts
• Shrooms app for carb/nutrition database
• Blogpress app
• Comicszeal app
• Mail being out of box compatible with work email (Exchange) and my webmail (Gmail, Yahoo)
  

Not impressed with iTunes' conversion of an .MP4 to an iPod Touch compatible movie: it choked and I'm using MPEG Streamclip to convert it.
Other gripes:
safari won't upload files, so no starting threads on imageboards
-- Post From My iPod touch

Workflow for getting DVD captions

Disclaimer: this is a process aimed at putting educational videos on Flash Media Server, with the addition of closed captions for the Longtail video player.

Prerequisites:
DVDfab (which is our DVD -> .mp4 ripper as well)
CCExtractor


Rip DVD to .mp4 first. For ease, we'll By default, DVDFab selects a subtitle ("subpicture") and we want to uncheck that. Click Next.


Click Conversion Settings to make this an MP4.

We want Device: Generic which should default to an h264+aac .MP4, perfect for FMS. Change the filename and the title to something a little more human-friendly. Note the Fixed Bitrate/Fixed File Size boxes: if the Fixed File Size would be much more than 600MB, select it and tweak it down to 650MB. Subpicture should read "No subpicture". Click OK and click Start to start ripping the DVD to .MP4. On a slow single-core P4, this will take about the same time as playback; others with more recent equipment report it taking about half that time. The .MP4 is ready for putting up on the Flash Media Server in its proper directory.

CCExtractor can't read this .MP4 for captions (and that may be because the author isn't familiar with MP4 or because DVDfab's cropping strips scanline 21, or both or neither), so we'll have to rip the DVD a second time, this time to an MPEG2 stream. Good news is, the second rip is direct to .vob ("DVD Passthrough") and requires the least transcoding (essentially all it's doing is stripping out the disc's CSS encryption).


This time, go to the main DVDFab screen and click Crop Settings. In the Crop Settings window, click Disabled and OK. This is to prevent DVDFab from stripping out the scanline that contains the closed caption data. In the main screen, click Conversion Settings.


This time, select vob as the device and click OK. Click Start: a 105 min movie (Ghostbusters) took all of 9 minutes on a crappy Dell Optiplex GX270. (edit: A scratched 125 min. disc of Spirited Away took 24 minutes)


Open CCExtractor, go to the Input files tab if it's not already open and drag the .vob you just made to the window. Click the Output tab and make sure ".srt (SubRip)" is selected.


Click the awkwardly-named Execution tab and click Start. Extracting the captions on this old machine takes roughly a tenth the time of playback. When it's finished, in the same directory as the filename.vob is now filename.srt, ready to be put anywhere that the Longtail player can find it (either locally to the player or accessible with an http url). Do not delete the .vob file until you've made sure the captions remain synched with the video all the way through; if they don't, run CCExtractor again.

An alternate method would be to only use DVDFab to rip to .vob and then use HandBrake to transcode the .vob to .MP4, but HandBrake's speed at transcoding is roughly comparable to DVDFab's direct rip to .MP4 (I have not tested this on other machines yet).

Fixing the Shoutcast parser in Mythstream

Goddamnit, why does MythTV need to have duplicate config files between /usr/share/mythtv and ~/.mythtv ? Shoutcast's parser broke sometime in September 2008 and after Ruth brought it to my attention I wasted an hour downloading the patched parser to /usr/share/mythtv/mythstream/parsers/ and watched it do nothing -- because as usual Myth defaults to looking in the home directory instead. I seem to recall the same problem configuring MAME.

It seems really improbable that someone's going to cobble together a multiple user mythbox (especially since Mythbuntu mooted having to create a regular user first). I'd make all of ~/.mythtv a link to /usr/share/mythtv if there weren't permission issues with doing so (i.e. updates attempting to insert changes into the home version without rights).

Powered by Qumana

Getting the Creative SoundBlaster Live! audio card to work in MythTV

I finally got this to work by going into the master backend's BIOS and disabling the onboard VIA 82xx audio chipset and rebooting. Given no choice but the SoundBlaster card, GNOME's audio settings no longer present 25-odd choices for configuration and now Myth plays sound on recordings and the remote correctly controls the volume.

Postscript: Master better than PCM.

Powered by Qumana

Double tuners finally working

There are a lot of blind roads I got led down trying to figure this one out. To recap: Master backend in living room, slave backend in bedroom, PVR-150 in each. MBE refuses to see tuner in SBE, SBE refuses to see tuner in SBE.

Part of problem is related to both boxes defining tuner card as /dev/video0 which confuses MBE's database (not sure why). Googling 'force /dev/video1' was a mistake because the solutions to that had to do with boxes with multiple tuners, not ecologies with multiple tuners in separate boxes, and udev rules won't really fix my problem because they're more useful to fixing which device inside a box gets enumerated first.

No, what I needed was to tell the MBE that it was /dev/video1 and let the SBE stay /dev/video0. This isn't done with /etc/udev/rules.d/ rules files, this is done in /etc/modprobe/aliases with a simple line:

options ivtv ivtv_first_minor=1

Much, much easier than futzing with udev. The next step is to follow these instructions: Delete all the tuners on both boxes, set up the tuner on the SBE first (Mythbuntu deliberately doesn't have a menu option for mythtv-setup, so you'll have to run it from a terminal), then set up the tuner on the MBE. Nota Bene: you will not see the SBE tuner in the list of tuners as you create the MBE tuner. Do not freak.

Now, I have two machines which can simultaneously show separate live TV feeds, and the MBE automatically reshuffled the recording schedule to permit simultaneous recordings on both boxes. Amusingly the two tuners are known as 2 and 3 globally and each is Tuner 1 locally.

The remaining PITA at this point has to do with the audio on the new MBE: neither the VIA 82xx chipset nor the ancient Creative card I put in it allow Myth to control the volume, despite GNOME being able to do so. But the dual tuner situation has been a major victory.

Further improvements and fixes

After years of unsuccessfully trying to have the Myth backend transcode its MPEG2 recordings (provided by the Hauppauge PVR-150's onboard MPEG2 encoder chip) down to H.264 MPEG4s which consume only a quarter the disk space, I finally managed it.

The key seems to be not using any of the default Transcoder profiles and creating a new one which is specifically MP4 based; the two Autodetect ones don't do what I expected them to and the Low-Medium-High are RTJPEG rather than MP4 (the anal retentive in me refuses to change their definition).

Commercial detection is good; what I expected was that once a recording was commercial flagged, it would automatically insert cutpoints for future DVD export. This is not the case, but if I watch a flagged recording and hit M to edit it, once in the editor hitting Z imports the commercial flagpoints as cutpoints. Sweet.

The slave backend in the bedroom does not automatically configure itself to find the videos on the MBE; however, once NFS was configured for both boxes, the slave backend's ftab now mounts the MBE's ~/ at startup and the SBE's videos directory is pointed at it.

The master backend's media settings now include /media as a directory, so that CDs/DVDs/USB sticks with standard format videos can be recognized by Myth's video player. Irritatingly, Myth still has to be told to scan the media, and incomprehensibly does not filter out files outside the list of allowed media file extensions. It also does not purge the scans when the media is removed.

Burning shows to Memorex DVD+R single layer media has had spotty results: two DVDs made with Mytharchive have reported success, but had major bad sectors resulting in unplayability. Both were exported again as DVDs using identical settings successfully (as far as I can tell from casual scanning). I don't know if Myth is doing a crap job of verifying the media.

A problem since the box swap with Mythdvd not playing discs was resolved when the udev rules for optical media were discovered to have added the new box's optical drive but not removed the old one, effectively removing /dev/dvd from the device tree. Commenting out the old one and rebooting fixed this and Myth's default DVD player now works again.

Tuner card and audio card problems are still on the "to be fixed" list.

More myth nonsense

The ability of Myth to burn DVDs quietly disappeared some time back and more recently for people using the Medibuntu repository. Apparently several ffmpeg-related libraries in Intrepid no longer work with Medibuntu's version of ffmpeg, and alternates had to be installed to get it to work.

I had foolishly believed that the PVR-150s could not capture closed-captioning based on several forum posts, when I tripped across something which pointed out that NTSC-capable tuners are legally required to decode this VBI information. As it so happens, all I had to do was go into Myth's preferences and tell it from now on to capture VBI CC. On this note, the maintainers should point their caption fonts at the default install's fonts directory instead of copying just two fonts to the Mythtv directory.

The bedroom slave backend needs to have its tuner assigned to something other than /dev/video0 in order to avoid conflicting with the master backend's tuner, but supposedly once this is done the MBE should be able to tune while recording.

Nota Bene for people swapping out PCs in Myth systems

In the past I've gotten away with swapping out HDs from Linux systems to newer PCs. After the most recent swap, I noticed two things stopped working: sound volume and DVD playback in Myth's internal player. Checking the settings between the troubled backend and the slave backend did me no good; they were identical.

What had happened with the DVD was that /dev/dvd wasn't being created properly at boot. Error messages reading "can't stat /dev/dvd" turned up a search which led to /etc/udev/rules.d/70-persistent-cd.rules, the config file which describes your optical drives' default /dev/ creation. Another blogger had discovered that replacing his optical drive did not automagically bring everything up to snuff; another set of rules were added but the previous set of rules were not deleted.

I haven't nailed down the audio problem yet, but I suspect it's similar. Edit: Apparently this is a problem with Intrepid and the onboard VIA 82xx audio chipset driver. I'll be experimenting with an audio card to see what I can do there.