Solved

Dojo integrated virtual keyboard

Posted on 2011-09-09
6
865 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
  • 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Article by: Lee
Windows 7 Ultimate and Enterprise (and 2008 R2) introduced a new feature you may not be aware of - Boot from VHD.   Boot from VHD (or what Microsoft refers to asNative Boot allows you to install Windows to a VHD (Virtual Hard Disk) file that is t…
This article discusses how to create an extensible mechanism for linked drop downs.
In this video, we discuss why the need for additional vertical screen space has become more important in recent years, namely, due to the transition in the marketplace of 4x3 computer screens to 16x9 and 16x10 screens (so-called widescreen format). …
This Micro Tutorial will teach you how to the overview of Microsoft Security Essentials. This is a free anti-virus software that guards your PC against viruses, spyware, worms, and other malicious software. This will be demonstrated using Windows…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now