On Screen Keyboard

From WebOS Internals
Revision as of 23:24, 22 September 2009 by Addie goodvibes (talk | contribs) (→‎Introduction: These instructions need to be up-dated.)
Jump to navigation Jump to search
On Screen Keyboard.png

Warning. This software is in intense development. It is changing nearly daily.

While a number of people are having success with it, it makes DEEP changes in your Pre. You choose to use this entirely at your own risk. It may cause your pre to melt into a puddle and dissolve while turning blue. Use at your own risk!

On screen keyboard 2.png

Introduction

On screen keyboard 3.png
Messaging 2009-22-08 000708.png

The Palm Pre ships with a very limited on-screen keyboard for inserting symbols. It works in portrait and landscape, in all apps, in any text field. (It doesn't work in Search fields like email address or url, which has led to difficulties with enhancing it.) This on screen keyboard provided a basis for programmers to develop a fully functional on screen keyboard for the Pre.

Operation

Unlike the Palm Symbol keyboard, you do not have to open the Pre's hardware keyboard to get the on-screen keyboard. Double-tapping the gesture area (near the round silver button) will bring up the on-screen keyboard if you are in a text input field. Tap with two fingers separated or Double-tap quickly.

Installation Procedure

Install Via PreWare

If you have installed WebOS Internals over the air installer Preware you can simply select the software keyboard from the list of available applications and install it. Nothing more is required.

Install Via WebOS Quick Install

Using WebOS Quick Install press the third button on the right select WebOS Internals Feed (all) from the drop down list at the top, choose virtual keyboard, press DOWNLOAD and then install.

Command Line Installation

If you have completed the standard WebOS Internals "next steps" procedure, installing the keyboard from the command line is very simple:

/usr/bin/ipkg -o /var install org.webosinternals.virtual-keyboard
sh /var/usr/lib/ipkg/info/org.webosinternals.virtual-keyboard.postinst

Options and Themes

The keyboard has several user configurable options. As of 28 August 2009 there is no keyboard configuration app. However, you do not have to have root access to configure the keyboard. Simply attach your Pre to your computer in USB Drive Mode. Then, navigate to the Pre's USB drive. On your desktop, there will be a directory (folder) called virtual-keyboard. (From within the Pre this is /media/internal/virtual-keyboard which is the same place.)

Inside that folder, you will find a file named virtual-keyboard/kb_config.json. Use your editor of choice (such as Wordpad - do not use MS Word) to edit that file. You may change any of the following options:

  • haptic : <number> - How long to vibrate upon touch (0 - 100 ms) (50 seems good. 100 makes the keyboard lag a little.
  • clickFile : <string> - Sound file if any to play upon button click (e.g. click1.wav)
  • installed_themes : [{label:<string>,value:<string>},...] - Installed themes, label is the display name and value is the themes folder name
  • theme : <string> - Name of keyboard theme to use. Three themes ship with the keyboard:
    • remix_classic
    • remix_glossy
    • remix_ice
    You may choose any of the three or add your own theme in an appropriate folder and name it as you please. See below on creating theme files.
Remix Classic RemixClassic.pngRemix Glossy RemixGlossy.pngRemix Ice RemixIce.png

Additional Available Themes



Eazys Theme
28731d1251393689-screen-keyboard-bugs-functionality-enhancements-messaging 2009-27-08 121219.jpg
Download [1]
Eazys Theme 2
Eazystheme2.jpg
Download [2]
Eazys Theme Gloss
Eazysthemegloss.jpg
Download [3]
Eazys Trans
Eazystrans.png
Download [4]
dianehelen Glossy Blue
Glossyblue.jpg
Download [5]
2sslow Blue
Messaging 2009-27-08 213107.jpg
Download [6]
pychozoundz sleek light
SleekLight.jpg
and dark
SleekDark.jpg
[7]
Un-Designer LucasPapaya
LucasPapaya.jpg
[8]
dianehelen Autumn
Autumnkb.jpg
Download [9]
dianehelen Denali
Denalikb.jpg
Download [10]


dianehelen RBW(RedBlackWhite)
Rbwkb.jpg
Download [11]




Change Log

8/13/09 - Fixes

  • Functional backspace, space and enter keys added.

8/16/09 - Fixes

  • Added functional shift and sym capabilities.
  • Added landscape mode resize.


8/18/09 - Fixes/Enhancements

  • Added theme capabilities
  • Changed default theme to use remix2000's images (big thanks!)
  • Added missing symbols
  • Fixed landscape mode to correctly render in landscape if launched from that state.

Thanks again to remix2000 for the nice keyboard images. Specs will be posted eventually for the images/theme framework once a user-app callable way to switch themes is implemented.

8/18/09 (evening) - Fixes/Enhancements

  • Increased width of keyboard to span entire screen
  • Added orange-key functionality
  • Made keyboard draggable after tapping blank key
  • Added haptic feedback

8/21/09 - Fixes/Enhancements

  • Added support for Emulator (pageup will mimic gesture tap, double-tap for keyboard)
  • Separated themes from palm framework
  • Added customizable options and themes via .json files
  • Shrink keys when "active", i.e. shift, orange, sym...
  • Changed keyboard to come up with double-tap of gesture area (within 600ms)
  • Enabled usage within search fields (messaging/email apps etc...)
  • Changed position calculations to render keyboard as low as possible without covering cursor on initialization

8/26/09 - Fixes/Enhancements

  • Fixed duplication problem in messaging apps
  • Fixed symbols appearing in tasks app.
  • Fixed dragger not to interact with scene
  • Modified keyboard to allow scene interactions when touching outside of the keyboard. As long as a tap is inside the keyboard, it should not effect the scene. A tap outside of the keyboard should be passed to the scene controller, and not dismiss the keyboard. Tap the gesture area, enter (submit+dismiss), or anything on the hard keyboard to dismiss virtual keyboard.

8/26/09 (PM) - Fixes/Enhancements

  • Allow dragger to drag to bottom of screen regardless of cursor position (user control)
  • Send newline to text fields along with enter key event when enter is pressed
  • Close the keyboard only when gesture area is tapped

0.1.3 - Added packaging metadata

  • Added Icon, Homepage, Screenshots metadata to the ipkg for use in Preware 0.8.0 (not yet released)

0.2.2 - Fixes/Enhancements

  • Increased theme capabilities
  • Added dynamic theme changing capbilities
  • Updated all localizations with default .json so at the least the layout works for all.
  • Optimized code to reduce lag
  • New default theme made by un_designer

0.2.3 - Fixes/Enhancements

  • Fix default theme installation in postinst (LPC_Dark_Rounded_2e)

Issues

as of 26 August 2009 the following issues are known:

  • Auto-Correct is not functional (SmartTextEngine is handled in libWebKitLuna.so, so might need plugin to add this support)
  • Backspace/enter do not work in webview text fields (The text fields in webview seem to be handled by the browser adapter plugin).
  • Sym key re-draws and re-positions the keyboard, should at least not re-position.
  • Clipboard, orange-scroll and shift-highlight do not operate with virtual keyboard
  • There is no way to bring up Global Search without pressing a key on the hard keyboard. One idea is to add a top-bar item in between the app menu and device menu that will launch Global Search with the virtual keyboard displayed. The virtual keyboard already works properly once the Global Search is in the foreground (i.e. after a hard key press)
  • Hide kb when focus changes from text box (e.g. landscape in web browser, text box goes away)
  • Notifications and probably other scene re-sizes do not move the keyboard, however the text fields move and this may put them beneath the virtual keyboard. Keyboard should be able to adjust with the scene.

User requested options which are not currently under development

  • Explore T9-type, limited-width keyboard options


Issue tracker: [12]

Creating Keyboard Themes

The virtual keyboard layout is a "list" of rows containing 10 "elements" each. The design allows for the keys to span multiple elements.

The virtual keyboard will look for themes located at /media/internal/virtual-keyboard/themes/ In this directory there shall exist theme-named directories with the following structure and options:

theme_config.json is the file that will control what images in this directory should be used and how.

The first layer of the JSON for each key element will have 3 parts: index:<Integer>,portrait:{},landscape:{}

index - index of key portrait - orientation JSON describing theme layout for portrait mode landscape - orientation JSON describing theme layout for landscape mode


Inside of the orientation JSON's we have another 3 parts: normal:{},function:{},shift:{}

normal - key description JSON when in normal keyboard function - key description JSON when function (orange) key is active shift - key description JSON when shift key is active


The key description JSON has the following 4 parts: keyCode:<Integer>,display:{},output:<String>,span:<Integer>

keyCode - currently only used for special action keys (shift, function, etc..) display - key display JSON output - output string when key is pressed span - number of element-widths to span (1 element-width=10%)


The key display JSON has 2 parts: html:<String>,img:<String>

html - HTML to display as element if no img supplied img - Image (including relative path in this theme's directory) to display as element


Technical Background and Explanation

On an unmodified Pre if you press the "sym" key a scrollable 5x5 keyboard pops up full of alternate characters.

This is controlled by code incorporated into the framework.js. The specific functions there can be seeen in /usr/palm/frameworks/mojo/submissions/191.15/javascripts/widget_charselector.js

with the layout controlled by 3 files in /usr/palm/frameworks/mojo/submissions/191.15/templates/charselector

the actual list of characters that appear on the screen is controlled by /usr/palm/frameworks/mojo/submissions/191.15/resources/en_us/alternatechars_table.json

At the simplest level then, creating an on-screen keyboard requires editing the alternate characters table json, to add the "regular" charcters to it, and then when you want a keyboard, press SYM and poof, a keyboard. The problem with that is, the alternatechars_table.json is "fragile" the slightests mis-edit results in the pre entering a continuous book cycle.

At the next level, the framework's copy of widget_charselector.js needs to be modified to not close the keyboard after each keypress.

On 12 August 2009 Webos-internals contributor Eric Gaudet (irc egaudet) announced success at patching the framework.js to accept a new function derived from the charselector widget. This pre-alpha proof of concept on-screen keyboard was made available as a patch. Since that time, the keyboard has been extended to work in search fields, to be installable as an IPKG, and to be themeable.

Note that this requires patching the primary framework of WebOS. This is not an application running on top of WebOS but rather a modification of the operation of the OS itself.