Google Virtual Keyboard

Google Virtual Keyboard

by Dean Stringer -
Number of replies: 12
Google have released a Virtual Keyboard API this week as part of their AJAX Language toolkit, the idea being users can pop-up an alternative language set keyboard without having to have any other software to manage or configure. Here's a screenshot:

File?id=chj3qbn7_3ccmdkrkf_b

Moodle currently ships with the YUI library now right? so this would be something extra a site would need to install, but the idea of the pop-up keyboard is quite nice and there are some interesting multi-lingual support possibilities.
Average of ratings: -
In reply to Dean Stringer

Re: Google Virtual Keyboard

by Leandro Righini -
I was interested in whether you had tried this yet and if so what was the outcome, and lastly, how do you do it?
In reply to Leandro Righini

Re: Google Virtual Keyboard

by Mauno Korpelainen -

Google is slowly adding new languages to their Virtual keyboard API and http://code.google.com/apis/ajaxlanguage/documentation/#Keyboard explains the basic ways to use it. It is possible to create some plugin for editor of moodle (later) or simply use an external document/textarea like http://korpelainen.net/virtual.html

You are free to check the source, copy and use the code... created by Google.

In reply to Mauno Korpelainen

Re: Google Virtual Keyboard

by Mauno Korpelainen -

There is still a long way to go from current supported languages of Google Virtual Keyboard

var google.elements.keyboard.LayoutCode = {
  ARABIC: 'ar',
  BULGARIAN: 'bg',
  CZECH: 'cs',
  GREEK: 'el',
  HEBREW: 'he',
  HINDI: 'hi',
  HUNGARIAN_101: 'hu_101',
  PERSIAN: 'fa',
  POLISH: 'pl',
  RUSSIAN: 'ru',
  SLOVAK: 'sk',
  SLOVENIAN: 'sl',
  THAI: 'th',
  TURKISH_Q: 'tr_q',
  UKRAINIAN_101: 'uk_101'
};

to all supported languages of Google Translate

In reply to Mauno Korpelainen

જઃ Re: Google Virtual Keyboard

by Dr. Amitkumar Mali -
hi,
I think, if google provides code of its multilanguage keybord, It should be incluided in moodle. It will help a lot. There are many people like me who uses moodle in their Computer lab over LAN. If students get the k/b in their local language it is a great help to them and their teachers.
Thanks
In reply to Dr. Amitkumar Mali

Re: જઃ Re: Google Virtual Keyboard

by Mauno Korpelainen -
I just made the first alpha version of Virtual Keyboard HTMLArea plugin that supports the same languages that Google Virtual Keyboard supports - it uses exactly the same code and will be updated when Google adds new languages to Virtual Keyboard API.

HTMLArea plugin will be available for downloading as soon as I have cleaned and fully tested the code, added language strings and some settings. The coming plugin can be used with all versions of moodle that use HTMLArea and have javascript enabled.

I will create a similar TinyMCE plugin for moodle 2.0 next week.
In reply to Mauno Korpelainen

Google Virtual Keyboard plugin for testing

by Mauno Korpelainen -

OK - here you have the first alpha version of Virtual keyboard plugin for HTMLArea.

I will test later a filter that could output just a button for launching external "layer" (iframe) with Google Virtual keyboard anywhere in moodle without editor - and with editable settings in administration menu. It could be done also with theme but let's try this plugin first. It will add a new button to editor toolbar for virtual keyboard.

To test it download a package from http://korpelainen.net/virtualkeyboard.zip and either unzip all those files (latest htmlarea and one lang file) to correct folders (lang and lib) inside your moodle or modify only the next 2 files and add 3 new files... 

File lib/editor/htmlarea/htmlarea.php:

line 177:

"insertvirtuals", "insertsmile", "insertchar", "search_replace",

line 280:

insertvirtuals: ["Insert virtuals", "virtual.gif", false, function(e) {e.execCommand("insertvirtuals");} ],

lines 1787 to 1804:

HTMLArea.prototype._insertvirtuals = function() {
    // Make sure that editor has focus
    this.focusEditor();
    var sel = this._getSelection();
    var range = this._createRange(sel);
    var editor = this;  // for nested functions
    this._popupDialog("dlg_ins_virtuals.php?id=<?php echo $id; ?>", function(imgString) {
        if(!imgString) {
            return false;
        }
        if (HTMLArea.is_ie) {
            range.pasteHTML(imgString);
        } else {
            editor.insertHTML(imgString);
        }
        return true;
    }, null);
};

line 2115:

case "insertvirtuals": this._insertvirtuals(); break;

File lib/editor/htmlarea/dialog.js:

line 35:

case "dlg_ins_virtuals": x = 420; y = 500; break;

New files:
lang/en_utf8/virtual.php
lib/editor/htmlarea/images/virtual.gif
lib/editor/htmlarea/popups/dlg_ins_virtuals.php

Beta version will come after some feedback and improvements...

In reply to Mauno Korpelainen

Re: Google Virtual Keyboard plugin for testing

by Mauno Korpelainen -
Using Virtual Keyboard through filter or theme may be risky (may disturb some other javascripts) but here you have one example about using it from theme:

If you have a custom theme check first that theme config.php has

$THEME->metainclude = true;

Then add to custom theme meta.php (or header.html or footer.html) something like attached meta.txt (default language is defined in script with [google.elements.keyboard.LayoutCode.THAI] )

Supposing you would like to see virtual keyboard in footer you could add for example

<div id="virtkb" style="position:fixed;bottom:0;left:0"></div>

just before </body> tag in footer.html - remember to check dimensions of this textarea and that footer has enough padding, margin etc or some parts of footer will be overfilled by virtual keyboard and textarea...
In reply to Mauno Korpelainen

Re: Google Virtual Keyboard plugin for testing

by Mauno Korpelainen -
And if you need to type english to virtual keyboard (or use your current keyboard) you can disable virtual keyboard from top right corner - see attached image.

Note that if Virtual keyboard is enabled in theme and you try to login your password and username will be written with language of virtual keyboard so you need to hide or disable virtual keyboard on such pages...

If we use only editor plugins such risk is not present...wink
Attachment hiding.gif
In reply to Mauno Korpelainen

જઃ Re: Google Virtual Keyboard plugin for testing

by Dr. Amitkumar Mali -
Hi,
I will test your plugin. I wish to thank you for your work. Hope this will help a lot of students and teachers who want to use moodle in their local language.
Thanks and All the best
Amit
In reply to Dr. Amitkumar Mali

Re: જઃ Re: Google Virtual Keyboard plugin for testing

by Mauno Korpelainen -

Great!

First notes: I had changed 3 times "content" to "virtcontent" in lib/editor/htmlarea/popups/dlg_ins_virtuals.php

(I replaced original word "content" everywhere with "virtcontent" because themes use content for different purpose and it might have caused problems to some theme css...)

line 5:     @header('content-Type: text/html; charset=utf-8');
line 11: <meta http-equiv="content-Type" content="text/html; charset=utf-8"/>

Note also that if you need only one language for virtual keyboard in lib/editor/htmlarea/popups/dlg_ins_virtuals.php then function onLoad() can be much simpler, for example

    function onLoad() {
      var virtcontent = document.getElementById('virtcontent');
      kbd = new google.elements.keyboard.Keyboard(
          [google.elements.keyboard.LayoutCode.HINDI],
          ['virtual_kb']);
    }

Would it be better to use language menu in editor plugin (drop down list) ?

I could use filter to change administration of settings but it could be done with $CFG as well... and the possible use of virtual keyboard for such input fields that do not render editor is still an open issue...

In reply to Dean Stringer

Re: Google Virtual Keyboard

by N Hansen -
Unfortunately, for students learning Arabic that keyboard won't be very useful. It only shows what typing the lower case letters will produce, which doesn't include a lot of punctuation and vowels and other minor characters. A real Arabic keyboard doesn't look like that.