Our little one loves to grab anything shiny, but is especially attracted to LCD screens of any type. He loves the netbook, the MacBook, my desktop’s dual monitors, and of course the big TV, but most of all he loves the iPhone. I often activate the camera in reverse mode and let him play with it, but there’s always been a problem: while he manipulates the phone, he will push some control or other and stop the camera, go to the desktop and start pushing random icons. I was wishing for some sort of ‘baby mode’ where something neat would be happening on the screen, but controls would be disabled.
I decided to use the Sunday morning to dust off my Canvas, CSS and JavaScript skills to code, with Alba’s design input and feedback, a little BabySaver that could keep his attention with bright colors, and be impossible to quit for him. Click here to see its current form. Click on the “Endless” button to enable interactions, otherwise any clicks will take you to my homepage.
The conclusion? He is much more interested in the iPhone’s back, the plastic cover, and trying to eat them, than in watching the flying colors. And he still manages to open the iOS Notification Center pull-down, and from there go to the Message Center or some other app, in effect leaving the BabySaver. In typical “we know better than you” Apple style, the pull down can’t be disabled, not even inside native apps or as a global configuration setting.
As usual, getting the CSS and scaffolding to work properly across browsers (including mobile Safari) was much more time consuming than programming the actual effects. Particularly disturbing was when the iPhone didn’t like the ‘Style’ button in the upper left corner: it worked fine in the beginning, but after adding the other buttons and the button style, it became unclickable (almost! With lots of trying, I could manage to click it). I have no idea why, and I couldn’t figure out how to revert this behaviour. This, along with the Notification Center issue, is the reason the buttons are at the bottom.
I haven’t tried it on any Androids or Windows Phones, but I have high hopes. Now that all the boring pieces are in place I’ll probably try to write more effects and sounds to see how he likes them.
Feedback is welcome!
Cool! Taking as a reference Windows7/IE9, these are the issues on Windows Phone 7.5/IE9:
– The sine wave doesn’t show. I just get a black screen.
– Interactions don’t work right. IE thinks you want to zoom/scroll. Tapping on the screen does restart the effect there, but there’s no dragging it around.
– The phone buttons (capacitive in many phones including mine) still do what they are supposed to (by design). Back, Home and Search(Bing). You might be able to get Back to at least reload the page (Gawd knows that happens in other websites, including your homepage, because opf the redirect to “Jare/wp/”). But the other buttons are off-limits by design.
Note that, on Win7/IE9, the fade-outs doesn’t quite finish, leaving shadows of the old effects on the screen. On WP7.5 I don’t see any shadows (might still be there, though, shown as black by the display).
I’ll try it on Win8/IE10 on my tablet later, see what I get.
Hey bro!
– I modified the sine wave yesterday night, not sure if you got the updated version or the old one.
– The page includes the standard apple keywords to disable zooming and panning, I will have to find out if WP supports these or some alternatives. Also, on the iPhone you can turn any web site you visit into a ‘web app’ Icon that runs without browser decorations at all (address bar, buttons, etc). Can you do that in WP7?
– As for scroll, there should absolutely be no scroll bars on the page – if there are, there’s some serious CSS bug in WP’s IE9.
– I’m not sure what you are saying about the buttons. What should ‘Back’ do instead of, well, going back to the previous page?
– The fadeouts work differently on different browsers depending on their bit precision & rounding of alpha operations, not much I can do about that. Personally, I prefer the ghostly backgrounds, but for example Chrome fades all the way to black.
– Did sound work?