New Case Turns Android Tablet Into Netbook

[ Empty Haipad case (left), Pandawill case (right) ]

Well it took forever to get to me, but I finally got the new case I ordered for my Haipad Android Tablet from Pandawill.com. Here's the link: http://www.pandawill.com/keyboardstyluscase-for-7-tablet-gpad-g10-g11-nupad-m002-apad-smart-q7-mid1black_p38465.html (they also sell it in white, btw).

[ Haipad case (left), Pandawill case (right) ]

The case that came with my Haipad Tablet is ok. It's very compact, light weight, easily fits in my purse, and does a good job of protecting the screen. What I didn't like about it was it's pretty much the same dimensions as the tablet itself, and with the little manufacturing defect on the tablet that makes the microSD card stick out a bit it's in great danger of being cracked off. Also, it uses elastic bands at the corners, one of which I always have to leave under the tablet or it presses on the button that wakes the tablet. Leaving one strap undone, though, means the tablet isn't really secured in the case very well. For general use, and when I'm putting that case inside a handbag or backpack it's fine I guess. Here are the specs on the one that came with it:

Covers: 5" x 8"
Thickness (closed): .75"
Maximum Tablet Size: 7.75" x 4.75"
Closure: Tab in Loop (friction holds it in place)
Material: Textured leather outside/Suede Inside sewn over heavy card
Tablet Holders: elastic bands

However, I discovered that my tablet touch screen sucks for playing games. You can either move or shoot - not both - and when playing a hardware accelerated game the touch screen isn't as responsive. Result? Most games, especially emulator ones, are completely unplayable on the tablet. It NEEDS hardware buttons to control it. Initially I thought I'd just hack apart some cheap USB keyboard and wire the controller board to an old NES gamepad (or buy one of the USB "Retrolink" ones and see if it worked). But then I saw a "leather" case with a built-in USB mini-keyboard on Pandawill.com for under $25 shipped!

This is a pretty neat case actually, because it effectively turns my Android Tablet into a Netbook - or actually it's more like a UMPC (Ultra-Mobile PC), what they used to call a "Palmtop" computer. And, yes, the games are playable now that I have actual buttons to push. Unlike the photos on the web site, mine has a mini-USB plug on the end, not a full-size USB. Here are the specs:

Covers/Keyboard: 5.5" x 9"
Thickness (closed): 1.5"
Maximum Tablet Size: 4.75" x 9" x .5"
Closure: Vinyl tab (magnetic catch)
Material: Textured artificial leather (aka "vinyl") inside and out
Tablet Holders: vinyl covered Metal Tabs

Another nice feature of it is the kickstand on the back so it can be propped open for use like a netbook:

[ Kickstand on back of case ]

I had to bend the top tab with a pliers a little to get it to catch the edge of my tablet. Mine is a Haipad M701-R, which isn't actually listed as one of the models on Pandawill's site - even though some of the ones listed are often referred to as interchangeable rebrands the actual tablet dimensions can be different. Once I adjusted things a bit, though, my tablet is VERY secure in this thing (I can barely slide it out at all in fact). Knowing it was for a tablet a little larger than mine, though, was part of the plan, as I mentioned the extra space means I can leave my micro-SD card inserted without worrying it will hit anything and it's actually enough space to leave the keyboard plugged in and not have the cable sticking out of the side (would be even better if they had put a 90 degree connector on it though).

It may be a little larger and heavier, but it's still better than lugging around my old HP Pavilion laptop!

Google Chrome Doesn't Count

The title of this post may be a little (intentionally) misleading. I'm not arguing the validity of Google's Chrome browser - in fact I generally like it and it has become my default browser. Using Chrome to browse the web is pretty sweet. Designing pages the work in it is not, and it's driving me around the bend.

I have a web project I've been working on for a while that uses linked stylesheets. Several of them, and it also has a feature that lets users switch one of the stylesheets out with any one of three others - which is only supposed to restyle part of the layout. In Safari it works as it is supposed to. In Chrome? Not so much.

Chrome has had a bug now for over a year that still isn't fixed, or at least not entirely. When working on the files locally (that is, just opening the HTML file in the browser right off my hard drive) Chrome doesn't "see" all the stylesheets properly. I'm only certain it is loading one of them (the third one) that styles the framework of the page, and I know it's loading because, well, the frame is styled.

However, when I try to use Javascript to reference the first stylesheet it complains that I'm trying to get values of elements that don't exist. Even more oddly, it WILL swap out that stylesheet it thinks doesn't exist with another. If I try to get the length of the array of linked stylesheets with "document.styleSheets.length" it says ZERO. That's right, it is obviously loading one of the stylesheets and swapping another out but the stylesheets array is EMPTY. Now, if I copy and past the content from the external stylesheet into the HTML document, though, then the array reports "1" for the length. So it would seem the array only works for stylesheets in the head of the document - it doesn't count the linked ones.

Ah! But here's where it gets really confusing. If I access the exact same document and linked stylesheets via a web server everything works. The stylesheets array iterates correctly, there are no "null" or "undefined object" errors. In other words, over a web server, it works perfectly. It's only when no web server is involved that it won't work!

Thankfully this isn't going to burn me too badly - the project (an HTML5/CSS3/Javascript "app" of sorts) was always intended to be hosted in the cloud and therefore accessed through a web server. There were initially some plans to wrap it up in a nice package and deliver it as an Android and iPhone app that could be used locally and offline. It also means - even though this is pretty static code - I'm going to have to do my development over a web server. Good thing I already have XAMPP installed!

Oh, and for anyone else who might run into this and be looking for a solution, it seems there isn't one. Or at least not a total one. You CAN actually reference the linked stylesheet with "document.getElementById("name")" if you gave the "link" tag an "id." You can create a linked stylesheet array with "document.getElementsByTagName("link")" and that will actually show the correct number for linked stylesheets. But neither of these methods will allow you to directly query the CSS rules within the stylesheet. If you apply a class from the stylesheet to an object in the HTML page, though, you can use that object as a way to get the attributes of the class. So, as a work-around you could create an object, hide it, and apply multiple classes to it from the stylesheet and then use javascript and the DOM to get the info. Obviously, though, you wouldn't be able to apply visibility or positioning classes, so this work-around is also limited.