Solved

Dojo integrated virtual keyboard

Posted on 2011-09-09
6
898 Views
Last Modified: 2012-06-21
For a website I developed there is a need for input through a touch screen.
That all works well, except for the input part.
The Windows 7 virtual keyboard keeps disappearing (I really don't know how users manage to do so, but they do)
I've tested several other offerings, but the all lack a solid 'monkey proof' design. (meaning 'always on top' really is always available, not minimized, program closed or nowhere visible).

So I decided I needed a virtual keyboard in my website.
As I'm using the Dojo framework, I thought that would be general available, but to my disappointment this isn't the case.
The only Dojo integrated example I found was the OpenSiteMobile Virtual Keyboard v1.2.3 but I didn't manage to get it working. Lots of references to other files that aren't in the package. I fetched some of them through lwp-download, but got stuck on lots of 'msos' errors.

Is there anyone who has managed to get this working or has some other working example of a virtual keyboard for IE9?
It would also be very nice if it was adaptable in size and keyboard layout.
0
Comment
Question by:G_Teley
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 10

Expert Comment

by:Arman Khodabande
ID: 36516178
I don't know anything about programming and virtual keyboards your talking about!
But if you want to get back to the windows 7 "virtual keyboard" idea, this can help you:

http://www.savardsoftware.com/launchontop/

Put it in a batch file on windows startup to open the virtual keyboard Always on top and visible!
This can be used too:
http://www.fadsoft.net/AlwaysOnTopMaker.htm
0
 

Assisted Solution

by:G_Teley
G_Teley earned 0 total points
ID: 36517188
I found a nice working example of a virtual keyboard at http://www.codeproject.com/KB/scripting/jvk.aspx.
I hooked it to the Dojo FilteringSelect input dijit, but to my surprise putting in a virtual keyboard generated new value is not handled.
What I mean is, when I click on the virtual keyboard, the clicked key value is correctly added to the input field value, but the FilteringSelect just complains that it is not a valid entry (that is, not in the supplied item store).
It looks like it only accepts input from the onKey() method and does not react on a onChange way.

Anyone out there with some more experience with dijit.form.FilteringSelect?
0
 
LVL 10

Expert Comment

by:Arman Khodabande
ID: 36517708
Is it the thing you're looking for?

http://bugs.dojotoolkit.org/ticket/11977

Here is a documention on virtual keyboard :

http://docs.dojocampus.org/dijit/form/FilteringSelect
0
Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

 

Assisted Solution

by:G_Teley
G_Teley earned 0 total points
ID: 36518707
Hi kpax77, thanks for your input.
But the references you gave are not part of my problem.

Th issue now is that when you type in the first letter of an option in the FilteringSelect, as the name indicated it filters on that letter. Typing more letters narrows the query to the entered value.
This all works fine, as long as you type through the physical keyboard.
If I input a value drawn from the virtual keyboard, the FilteringSelect reacts as if it is an invalid option.

So now I'm looking for an option to put the keystrokes from the virtual keyboard into the keyboard input queue, although I doubt the security model will allow me to do so.
0
 

Accepted Solution

by:
G_Teley earned 0 total points
ID: 36556286
I finally solved it by using the javascript virtual keyboard from http://www.codeproject.com/KB/scripting/jvk.aspx
The remaining problemn was that this doesn't work with an Dojo FilteringSelect widget.
I solved this with the following code that is called after the user enters an input field.

function showKeyboard(element) {
    if (!vkb) vkb = new VKeyboard("keyboard", // container's id
        keyb_callback, // reference to the callback function
        false, // create the arrow keys or not? (this and the following params are optional)
        false, // create up and down arrow keys?
        false, // reserved
        false, // create the numpad or not?
        "", // font name ("" == system default)
        "21px", // font size in px
        "#000", // font color
        "#F00", // font color for the dead keys
        "#AAA", // keyboard base background color
        "#EEE", // keys' background color
        "#DDD", // background color of switched/selected item
        "#777", // border color
        "#CCC", // border/font color of "inactive" key (key with no value/disabled)
        "#FFF", // background color of "inactive" key (key with no value/disabled)
        "#F77", // border color of the language selector's cell
        true, // show key flash on click? (false by default)
        "#CC3300", // font color during flash
        "#FF9966", // key background color during flash
        "#CC3300", // key border color during flash
        false, // embed VKeyboard into the page?
        true, // use 1-pixel gap between the keys?
        0); // index(0-based) of the initial layout

    text = dijit.byId(element);
    dojo.style("keyboard","position",'relative');
    dojo.style("keyboard","top",'-15px');//((window.screen.height / 8) * 3) + 'px');
    dojo.style("keyboard","left",'2px');
    dojo.style("keyboard","z-index",'1000');
    vkb.Show();
}
function hideKeyboard() {
    if (vkb)
        vkb.Show(false);
}
function keyb_callback(ch) {
    var val;
    var typeFS = (text.declaredClass == 'dijit.form.FilteringSelect');
    if (typeFS) {
        val = mySearch;
    } else val = text.displayedValue;
    switch(ch) {
        case "BackSpace":
            var min=(val.charCodeAt(val.length - 1) == 10) ? 2 : 1;
            val = val.substr(0, val.length - min);
            break;
        case "Enter":
            if (typeFS) {
                text.set('displayedValue', text.textbox.value); // = Enter
                mySearch = '';
                text.focus();
                return;
            } else val += "\n";
            break;

        default:
            val += ch;
    }
    mySearch = val;
    if (typeFS) {
        text.closeDropDown();
        text.set('displayedValue', mySearch);
        text.set('queryExpr', mySearch + '*');
        text.loadDropDown();
    } else text.set('value',val);
    text.focus();
}

The trick is to detect if we are handeling a FilteringSelect, and if so, administrate youw own search string in a global variable 'mySearch', set the searchExpr property to it  and close/open the FilteringSelect dropdown list.

There needs to be done some more tweaking but for now it works.

0
 

Author Closing Comment

by:G_Teley
ID: 36585504
Solved it myself.
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
arrays and radio buttons 10 40
Remote login in windows 7 8 41
REST call Failing 1 15
HP Laserjet Pro MFP M126nw 3 20
You may have a outside contractor who comes in once a week or seasonal to do some work in your office but you only want to give him access to the programs and files he needs and keep privet all other documents and programs, can you do this on a loca…
This article discusses how to implement server side field validation and display customized error messages to the client.
This Micro Tutorial will teach you the basics of configuring your computer to improve its speed. It will also teach you how to disable programs that are running in the background simultaneously. This will be demonstrated using Windows 7 operating…
The Task Scheduler is a powerful tool that is built into Windows. It allows you to schedule tasks (actions) on a recurring basis, such as hourly, daily, weekly, monthly, at log on, at startup, on idle, etc. This video Micro Tutorial is a brief intro…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question