?
Solved

Dojo integrated virtual keyboard

Posted on 2011-09-09
6
Medium Priority
?
940 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
IF you are either unfamiliar with rootkits, or want to know more about them, read on ....
This Micro Tutorial will go in depth within Systems and Security in Windows 7 and will go into detail regarding Action Center, Windows Firewall, System, etc. This will be demonstrated using Windows 7 operating system.
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…
Suggested Courses

649 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