Posts Tagged ‘Android’

Android ADB Drivers for Cheap No-Name Tablets

// July 8th, 2012 // 1 Comment » // Dev, Mobile

I’ve recently purchased a Wise Tech Android 4.0 (Ice Cream Sandwich) 7″ tablet from Amazon, for the princely sum of £80 – I opted for the 1.5GHz 1Gb RAM, 16Gb storage version, you can spend less for a lower spec device still quite capable of running ICS. I had three main aims:

  1. Acquire a cheap ICS device for personal development, as the emulator is just too damn slow and I can’t really justify taking work phones home all the time;
  2. Get to know Android 4 as an end user (I use Windows Phone 7 as my main phone platform, an iPad for casual browsing and other tabletty jobs, and an iPod Touch for music but after my earlier experiences I haven’t encountered Android by choice for some time);
  3. Get a spare tablet, for when the iPad is in demand with guests or girlfriend.

The WiseTech tablet handles the second two admirably – for the money, it’s pretty amazingly good. I won’t be stopping using the iPad any time soon for tabletty things when I have a choice of device, but it can handle most things I need it do when needs must. The only bad thing I can say about the hardware is that the screen is fuzzy and a magnet for fingerprints – other than that, the multitouch is responsive, the processor fast, ICS isn’t nearly as bad as the previous versions of Android, and it comes with Google Play (the amiguously renamed Android Market) so you can download any apps you want.

The biggest frustration is the lack of ADB (Android Debug Bridge) drivers, without which it is fairly useless for development. My Windows 7 PC easily recognized the tablet as a USB storage device but refused to recognize the device for ADB and wouldn’t consider the generic ADB driver as appropriate, also refusing to make use of the other “named manufacturer” ADB drivers I already had installed.

Google’s advice is to try downloading the OEM driver from the manufacturer, at which point you hit a slight problem – who is the manufacturer? The box and slim manual are conspicuously unbranded, with no clues to follow, and the device itself only reports some pretty cryptic hardware IDs. Wise Tech seem markedly absent from Google’s OEM list, and also don’t appear on Google search results (part of my motivation for writing this post is to make something appear for those who follow me!).

Figuring that the rival devices I also considered – such famous names as the CloudNine Neuropad, the LB-01, the TabTronics M009s and the Ployer MoMo9 – probably all came from the same no-name Chinese or Taiwanese factory and possibly even the same mould, I started googling those names to and eventually ended up here.

In a nutshell, if you have any manufacture-less cheap Android phone or tablet and you can’t get Windows to recognize any drivers, try installing the PDAnet application and you’ll probably find that it includes an installation of the generic ADB drivers that work for your device. At which point these £60+ tablets really open up a world of very cheap development.

Bootnote: the tablet worked first time when plugged into a Mac. But for the price premium of a Mac, I could have bought a Galaxy Nexus with its working driver set, and used that instead…

Mobile Webapps – iUI Framework Extensions

// August 3rd, 2009 // 10 Comments » // Mobile, Web

As I explained in my earlier Masabists post, I’m finally able to show off some of the work I’ve been doing recently on local mobile webapps.  We’ve based our webapps on the rather excellent iUI framework, which has a great philosophy:

  • Clean, standard HTML markup;
  • Very lightweight – one CSS stylesheet and a single Javascript file;
  • Built-in AJAX support, so form values can be submitted and HTML fragment responses pasted into the document structure;
  • iPhone native-style look and feel, including slick screen to screen transitions and screen rotation support.

The screens are all embedded inside a single HTML file, which has two advantages:

  1. You get very rapid movement around the app, with no need for a reliable network connection and none of the slowdown associated with downloading every page;
  2. You can cache the app using an HTML 5 manifest, so even when the user has no network signal they can access the site.

This is great as far as it goes, but there were a number of screen types not supported.  I have added an optional extension script, following the same philosophy, to add them – this ost is just a reference point to describe what the extensions do, when discussing merging them into the framework.

Structure

The extensions are in a seperate script and CSS file, which creates the window.iui_ext object, much like the core iUI framework itself.

To work, iUI has been extended in one key way – it now fires off Javascript events to screens, specifically:

  • onFocus() is called whenever a screen is made visible;
  • onBlur() is called whenever a screen is left.

Both events are called at the point where the link is clicked and the sliding transition begins.

Adding the events gives the developer a huge amount of extra scope for controlling the webapp, which is then used to create the additional webapps without breaking away from clean markup.

Form Handling

The iUI extensions automatically add focus and blur event handlers for every form, which store all field values in a name/value store whenever a form is left and restore the values whenever a form is visited again.  These are added inside the iUI code, and once finished they will call any explicitly defined onFocus="..." / onBlur="..." attributes within the markup.

The map follows the same basic semantics as the HTML 5 sessionStore object, which I wanted to use but sadly it isn’t implemented on the iPhone yet (the latest desktop Safari seems to have it though).  The methods are exposed through the iui_ext object, for example window.iui_ext.getItem('key').

The purpose of this store is to allow the movement of values between screens, which enables a number of tricks – by declaring inputs on seperate forms (displayed as seperate screens) with the same name attribute, you can make sure they always mirror each other’s values.  If for any reason you don’t want this behaviour for some fields, you can declare an onBlur event and remove them from the store.

Option Lists

I needed a form screen which listed a number of fields which could be changes, such as railcard type in the screenshot below, and by tapping on the field the user would move to a list of all the possible options from which they could select one.  A few examples of this UI pattern from my iPod Touch Settings app are:

  • Settings > Music > Audiobook Speed (list of 3 options)
  • Settings > Video > Start Playing (list of 2 options)
  • Settings > Safari > Accept Cookies

Visually, it looks like this:

iPhone option selection UI widget

I implemented in two stages. Firstly, I generated CSS to render a radio input (with label) as a block with the tick if it is selected, using a bit of custom Safari CSS (-khtml-appearance:none;) to suppress the native style of a checkbox – which interestingly changes from relatively nice on an iPod Touch v2 to quite nasty on an iPhone 3GS.

Next up, I tried to think of a natural way to express the options in HTML, and ended up with the idea of getting a script to rewrite any select in a form which has the CSS class of ‘panel’ into a seperate linked panel.  The markup you write looks like this:

<div class="row">
 <label for="buy_railcard">Railcard</label>
 <select id="buy_railcard" name="railcard" class="panel">
  <option value="rc_none" selected>None</option>
  <option value="rc_youth">Youth</option>
  <option value="rc_family">Family</option>
  <option value="rc_senior">Senior</option>
  <option value="rc_disabled">Disabled</option>
  <option value="rc_network">Network</option>
  <option value="rc_hm">HM Services</option>
 </select>
</div>

By default, it would render like this (taken from desktop Safari, just to make my life easier):

Selects as they would render in Safari without the script

The script rewrites the above HTML on the original form like this:

<div class="row">
 <a href="#select__buy_railcard">Railcard
  <input type="hidden" name="railcard" value="rc_none"/>
  <var id="railcard-rc_none" class="_lookup rc_none">None</var>
 </a>
</div>

Points to note:

  • The original form will submit in exactly the same way to the server
    • the new hidden field within the link has the same name as the select and the value of the selected option.
  • The textual label of the selected option is copied into the var tag, which actually visually shows the selected option to the user
    • the var is also given the option value as a css class, which allows us to do the funky icons on all labels if we want (using :before generated content, in this case).

The script also creates a new form.panel screen containing the options as a radio group, like this:

<form id="select__buy_railcard" class="panel" title="Railcard">
 <fieldset class="radiogroup">
  <div class="row">
   <label class="rc_none" for="buy_railcard_option_rc_none">None
    <input id="buy_railcard_option_rc_none" type="radio" value="rc_none" name="railcard"/>
   </label>
  </div>
  <div class="row">
   <label class="rc_youth" for="buy_railcard_option_rc_youth">Youth
    <input id="buy_railcard_option_rc_youth" type="radio" value="rc_youth" name="railcard"/>
   </label>
  </div>
  <div class="row">
   <label class="rc_family" for="buy_railcard_option_rc_family">Family
    <input id="buy_railcard_option_rc_family" type="radio" value="rc_family" name="railcard"/>
   </label>
  </div>
  <div class="row">
   <label class="rc_senior" for="buy_railcard_option_rc_senior">Senior
    <input id="buy_railcard_option_rc_senior" type="radio" value="rc_senior" name="railcard"/>
   </label>
  </div>
  <div class="row">
   <label class="rc_disabled" for="buy_railcard_option_rc_disabled">Disabled
    <input id="buy_railcard_option_rc_disabled" type="radio" value="rc_disabled" name="railcard"/>
   </label>
  </div>
  <div class="row">
   <label class="rc_network" for="buy_railcard_option_rc_network">Network
    <input id="buy_railcard_option_rc_network" type="radio" value="rc_network" name="railcard"/>
   </label>
  </div>
  <div class="row">
   <label class="rc_hm" for="buy_railcard_option_rc_hm">HM Services
    <input id="buy_railcard_option_rc_hm" type="radio" value="rc_hm" name="railcard"/>
   </label>
  </div>
  </fieldset>
</form>

Date Selection

One of the greatest things in HTML 5, to me, is also one of the simplest – the input tag has now been extended to allow all sorts of new types, such as dates, telephone numbers and even colours. The idea is that browsers will then handle these specially with funky calendar drop downs etc that curretly have to be implemented in Javascript – and on mobiles, they can use a more appropriate native solution optimised for the keypad, with address book access etc.

Obviously, no mobile browser has bothered to implement these – today you’ll have to look at Opera desktop if you want to see a browser starting to do it correctly.

In the absence of a native widget, I implemented a date selector myself.  On the iPhone itself, this is implemented in a style similar to HTML drop-downs in Safari – difficult to achieve in HTML alone, and not actually that natural for selecting travel dates.  I opted to support date selection with a calendar reminiscent of theiPhone calendar app’s instead:

Date selection with iUI extension

As before, this is implemented with a standard piece of HTML that is rewritten by the script.  To add a calendar you add an input like this to your form:

<div class="row">
 <label for="buy_travelDate">Outbound Date</label>
 <input name="travelDate" id="buy_travelDate" type="date" class="date" value="1/1/2009">
</div>

The type you choose to assign can be either date or text.  If you set the input’s type to text by hand, the script will always replace it with a custom calendar.  Currently, Safari rewrites any type it doesn’t understand to text when the page loads; if and when date support is added, this will presumably cease and the script will stop handling dates for you and leave selection to the browser.  Your choice which you want!

When the form is first loaded, your markujp is rewritten like this:

<div class="row">
 <a href="#select__buy_journeytype">Journey Type
  <input type="hidden" name="journeytype" value="tt_single"/>
  <var id="journeytype-tt_single" class="_lookup tt_single">Single</var>
 </a>
</div>

There will also be a (singleton) extra screen created for the date picker like this:

<form id="_datepicker" class="panel">
 <p>
  <span id="_dpback" class="back"> </span>
  <span id="_dpmonth" class="month"/>
  <input id="_dphidden" type="hidden"/>
  <span id="_dpfwd" class="fwd"> </span>
 </p>
 <table id="_dptable" cellspacing="0" cellpadding="0" border="0">
  <colgroup>
   <col class="sun"/>
   <col class="mon"/>
   <col class="tue"/>
   <col class="wed"/>
   <col class="thu"/>
   <col class="fri"/>
   <col class="sat"/>
  </colgroup>
  <thead>
   <tr class="days">
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
   </tr>
  </thead>
  <tbody>
   <tr class="wk1">
    <td> </td>
    <!-- etc -->
   </tr>
   <tr class="wk2">...</tr>
   <tr class="wk3">...</tr>
   <tr class="wk4">...</tr>
   <tr class="wk5">...</tr>
   <tr class="wk6">...</tr>
  </tbody>
 </table>
</form>

The screen is a singleton, which means it will only be created once, and reused for every date picker in your app (which saves on memory).  Month and day names are taken from arrays which could be externalised and internationalised easily if required (CSS class names on cols are hardcoded though).

Every time the date picker is selected, the script refreshes the calendar, working out the date from the hidden field on the original form and copying over the relevant details.  Table cell contents are updated with the relevant date, and onClick events set to make selections work.

There are a few options, which can be passed in using CSS classes applied to the date field:

  1. If the today class is specified, then any selection of today’s date will be stored on the form (and shown visually) as ‘Today’ instead of the date;
  2. If the future class is specified, only today and future dates are visible and selectable;
  3. If the past class is specified, only today and past dates are visible and selectable;
  4. A date pattern can be specified using the following syntax:
    • Parts of the date:
      • d for the date eg. 28
      • D for the day’s abbreviated name eg. Mon or Fri
      • m for the month’s number eg. 1 (for January)
      • M for the month’s abbreviated name eg. Jan or Dec
      • y for the year as two digits eg. 09
      • Y for the year as four digits eg. 2009
    • Other symbols:
      • _ underscore is converted to a space
      • c is converted to a comma
      • Hyphens and slashes are also allowed.
    • Examples:
      • d/m/y goes to 3/8/09
      • d-M-y goes to 3-Aug-09
      • Dc_d_M_Y goes to Mon, 3 Aug 2009

If a date format is set, then only that format can be used to specify the value of the field.

That’s basically it for my extensions – having documented them, I’ll now see if anyone wants them merged in to the main iUI framework!

Masabists: Ticketing via Local Webapps

// July 31st, 2009 // Comments Off // Mobile

This was originally posted on the Masabists blog.

We’re finally able to show off some of the work we’ve been doing recently on local mobile webapps – interactive web pages which can be saved and run even when you’re offline.

Our mobile ticket sales app is now available as a local Java app for mass market handsets, and a local webapp for Android and iPhone – offering all the same functionality, security and slick branding:

Masabi Train Ticketing local webapp on an iPhone Masabi Train Ticketing Java app running on a Nokia N96

What Is A Local Webapp?

With the latest HTML 5 and Google Gears APIs support on Android, iPhone and Palm Pre, you can provide a fast multi-screen interactive app with local storage (to store tickets you have purchased), which behaves like a native local app and is accessible even when the phone is offline. Here’s how to store the app for later use on an iPhone – reached by clicking on the ‘+’ icon in the footer:

Why Webapps?

Traditionally at Masabi we have always written local apps in Java, because they offer the best mass market user experience for the sort of ticketing and financial services we provide; it’s only with the advent of handsets with fast, HTML 5-capable browsers that we have been able to explore the webapp route. We plan to use local webapps for many of our iPhone and Android products for two core reasons:

  1. With the proliferation of new platforms causing even more fragmentation in the mobile apps space, the Safari browser used on both platforms is actually the safest way to reduce fragmentation and streamline maintenance and development;
  2. There are some big advantages to the unrestricted installation of a webapp via the web, especially if your business model is not compatible with the rules or revenue shares of the relevant App Store; it can be hard to justify to a customer the extra expense of a dedicated app when you cannot guarantee the app will ever be allowed on the store or device.

Fortunately, it is easy to take a local webapp and wrap it up as a native iPhone or Android app, so we can make all of the services available through the relevant App Stores as well if that is what the users want.

It is worth noting that at Masabi we are producing free mass market services which pay for themselves through transaction fees, so the App Store’s billing system isn’t an issue for us – your mileage may vary…

Does It Feel Like A Normal App?

Webapps can very successfully replicate the look and feel of native apps, with quick scrolling between screens, button styles and the like.
Below are screenshots of the user selecting an option from a list, and a date from the calendar:

Selecting an option from a list on the Masabi Train Ticketing local webapp on an iPhone Picking a date on the Masabi Train Ticketing local webapp on an iPhone

These clearly follow the style and usability conventions of the built-in iPhone apps. With CSS targetted to the device through our DeployME server, we reskin the same application easily to adopt Android conventions and styling as well.

Please comment on the original post.

Masabists: Sony-Ericsson Handset Announcements

// June 1st, 2009 // Comments Off // Mobile

Note: this was first posted on the Masabists blog and featured on Carnival of the Mobilists 177.

There are a few interesting points raised in the technical details accompanying Sony-Ericsson’s recent announcement of the Aino and Yari handsets – app usability should improve, whilst Sony-Ericsson’s smartphone platform strategy is tending towards the Samsung “try ‘em all” approach…

Concessions to Usability

Most importantly for developers, the new handsets aim to reduce the permission dialogue hassle that users experience when running applications on their handsets. This is a huge bugbear which just adds user pain without really improving security – because users rarely read the (often opaque) language of the message, they just click and get annoyed at the jarring interruption in their workflow:

MIDP permissions dialogue

The absence of these interrupting dialogues in iPhone applications adds to their usability.  They have clear purpose, but MIDP has always erred too far to the side of caution, and allowed explanation messages to be written and translated by programmers not usability experts, to confusing effect. They simply annoy, and give the platform a slightly amateur feel.

Sony-Ericsson suggest that Unsigned apps will now show far fewer dialogues, and Trusted 3rd Party signed apps will be able to ask once and then never bother the user again.  This is absolutely excellent news because it eliminates a key barrier to regular app usage.

Sony-Ericsson says this is in line with recommendations in the MSA spec – an umbrella JSR mandating the support for a huge range of APIs adding up to a very powerful platform, which is now gaining a lot of traction. This is also a great thing, because it implies that Sun recognise the problem, and that other handset manufacturers may be following suit.

Whilst in general I am in favour of reudcing the permission overhead to a secure minimum, this can go too far.  I am quite worried about the idea that dialogues may not be required when implementing the upcoming Javascript APIs designed to allow webapps greater access to the handset hardware – the potential for malicious scripting is huge.

Hopefully Javascript will find a more sensible balance where MIDP at first did not, because HTML 5 is opening up some exciting opportunities. Given, however, that browsers shipping today appear to be replicating all of the proprietary manufacturer-specific API problems of early MIDP, I’m certainly not holding my breath!

Post-UIQ Smartphone OS Standardisation?

In the good old days, Sony-Ericsson were pioneers in the smartphone market with the P800, back when everyone thought a smartphone should be like a PDA.  Looking back, my gut feeling is that on every subsequent revision UIQ (a UI layer built on Symbian) dropped further and further from the leading edge, striking an unhappy balance between mainstream usability and PDA power. UIQ finally went under when Nokia took Symbian open source without them, leaving Sony-Ericsson without a smartphone platform.

This is roughly the point when Sony-Ericsson launched the Xperia, a Windows Mobile handset that was very interesting, though ultimately didn’t fully live up to expectations.  A lot of effort was put into encouraging developers to build panels and things (proprietary UI extensions), but to the best of my knowledge they haven’t announced any more Windows Mobile devices – and hopefully they’ll stay that way.

Subsequently, Sony-Ericsson stated they would be focussing on the Android platform for future smartphones… and then announced two S60 handsets.  They have dropped hints that Android wasn’t to displace other OS platforms, but can a company in Sony-Ericsson’s state really support simultaneous development on two or three smartphone OSs as well as their (actually very good) proprietary feature phone OS?  Note that smartphones are only around 13.5% of current world handset sales (although at the lucrative end)…

Please comment on the original post.