2011-02-04: Working Prototype

Switch to PhoneGap

After spending the entire months of November and December 2010 making a Native iPad app in Objective-C, I realized it'll take me over a year to even have a working prototype. Moreover, the code would have to be rewritten from scratch if I want to make it work on Android or any other platforms. This would certainly go against my original plans of making a multi-platform device.

So in January 2011, I decided to switch to PhoneGap because it lets me write an app like it is a web-page while still giving me access to iPad's hardware capabilities like audio and wireless. This meant I would have to scrap months of work I had done in XCode/Objective-C and start from scratch. Fortunately, thanks to JQuery and LessJS, I was able to do more in one week using JavaScript than I did in two months using Objective-C. It was definitely worth the effort.


As of today, the KType application works on the iPad flawlessly. It can let you set up a user with their name, handedness (left/right) etc. It will let the user type on a large on-screen keyboard. The iPad will speak out the letters/words as the user touches the keys. You can edit the entire keyboard, move keys around, resize them, and organize keys in up to 4 tabs (A-Z, 123, Words, Actions etc.). KType currently does not have a dictionary and does not make suggestions based on the letters typed. That's next up on my todo list.


I abandoned the original tab-interface for a simpler menu-driven interface. When a user clicks on a button, the current screen slides to the left and the new screen slides in from the right.


Check out the demo to get a feel for the user experience. The demo does not work in Internet Explorer. I recommend opening it in Chrome, Firefox, or Safari and maximizing your browser window.


User Home

This is the opening screen for the KType iPad app. It automatically selects the last user who used the app. All the settings in KType are user-specific and changes made to one user's settings do not affect the others.

User Selection

You can switch users by clicking on the user's name in the main menu (blue-button in the above screenshot). This brings you to the following screen. It has a preset list of 10 users. Select any user and click on the green 'Change user' button (hidden behind the user list here).

User Settings

Clicking on the 'Settings' button next to the user's name in main menu takes you to the user's settings page. The handedness value will be used to stabilize touches for users with low dexterity. The gender value will be used to select the appropriate voice for text-to-speech. The grayed out buttons like 'Define Click', 'Custom Dictionary' etc. are unfinished. They will open additional screens to customize KType for each user.

Keyboard Selection

Back to the main menu, this is the list of all the available keyboard templates. The only keyboard currently functional is Optimus. Select the keyboard and click 'Use'. Remember, all of these steps are meant to be followed by the caretaker/guardian of the end-user.

Keyboard Menu

Selecting a keyboard brings you to the keyboard information menu. This screen lets you start using the selected keyboard as well as allows customizing the keyboard to be suit the user. All customizations are user-specific.

Keyboard Layout

The keyboard layout screen can be used to reorder the major sections of the keyboard. The text bar and suggestions bar can be moved up/down and hidden if necessary.

Keyboard Editor

The keyboard editor allows setting up to 40 keys in 4 tabs. Some users may only need 5-10 keys per tab while others might want 30 keys in one tab and nothing in the other tabs.

The selected tab is highlighted in red. To add a new key, simply drag in one of the unused buttons from the bottom of the key area.

To edit a key's label or other information, select it and press 'Edit Selected Key'. You can have a key with label 'GMORN' that types out 'Good morning' when pressed and says 'Good day to you all'.

Keyboard in Use

Clicking on 'Use' from the keyboard menu loads the selected keyboard in full-screen. This is the screen that the end-user will be using by themselves. The only way to get out of this screen is to tap the left-edge of the iPad with four-fingers. This ensures end-users do not exit the screen by mistake.

The tab bar on the left of the key area will be automatically hidden if only one tab has keys. The backspace/space-bar section will be hidden if the keys are only image/sound based. The text and suggestion bars can be hidden from the keyboard layout screen. The key area will automatically scale up to cover the available area.

research/articles/progress_20110204.txt · Last modified: 2019/11/08 03:39 (external edit)
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki