السلام علیکم،
گزشتہ روز ریلیز کردہ ویب پیڈ کی اپڈیٹ میں چند مسائل سامنے آئے تھے۔ ان بگز کو فکس کرنے کے بعد میں نے اس ڈاؤنلوڈ کو اپڈیٹ کر دیا ہے۔ ویب پیڈ کو استعمال کرنے والوں سے گزارش ہے کہ وہ اس تبدیلی کو نوٹ فرمائیں۔
اردو ویب پیڈ ڈاؤنلوڈ کریں
اردو ویب پیڈ کا ڈیمو ملاحظہ کریں
والسلام
Urdu WebPad’s update is finally there after a long wait. I had finished work on this update a few weeks ago and I was about to release it but I experienced some problems during its testing. Therefore I fixed these problems and now it is time to release it. The highlights of this release are easier integration with web applications and some opera compatibility. Read here for more details.
Download Urdu WebPad
View Urdu WebPad’s demo
Urdu WebPad’s documentation
Urdu WebPad’s user’s guide
السلام علیکم،
ایک طویل انتظار کے بعد اردو ویب پیڈ کی اپڈیٹ حاضر ہے۔ حسب وعدہ اس میں ویب اپلیکیشنز کے ساتھ انٹگریشن کو آسان بنا دیا گیا ہے۔ اس کے علاوہ اردو ویب پیڈ کسی حد تک اوپیرا کمپیٹبل بھی ہے۔
دراصل میں نے کئی دنوں پہلے ہی اس اپڈیٹ پر کام مکمل کر لیا تھا اور اسے ریلیز بھی کرنے والا تھا لیکن اس کی ٹیسٹنگ میں چند مسائل نکل آئے۔ اس ٹیسٹنگ کے لیے میں نے ایس ایم فورم میں اردو ویب پیڈ کی انٹگریشن کا تجربہ کیا۔ اس سلسلے میں پیش آنے والے مسائل کے پیش نظر میں نے یہ مناسب سمجھا کہ اس پر مزید کام کیا جائے اور اس کے بعد اسے ریلیز کیا جائے۔ باقی تفصیلات یہاں پر موجود ہیں۔
اردو ویب پیڈ ڈاؤنلوڈ کریں
اردو ویب پیڈ کا ڈیمو ملاحظہ کریں
اردو ویب پیڈ کی ڈاکومنٹیشن
اردو ویب پیڈ کی یوزر گائیڈ
I wrote Urdu WebPad earlier this year, which is effectively an open source version of the Urdu Pad from urdulife.com. This is a web-based editor that allows the editing of Urdu text without the need of installing Urdu keyboard and language support on the computer. It works with Internet Explorer and FireFox. Urdu WebPad is fairly easy to integrate in web applications . The first Unicode Urdu forum Urdu Mehfil is a well-known example of the use of Urdu WebPad. The keyboard mapping provided by Urdu WebPad is that of the Phonetic Urdu keyboard. An on screen keyboard assists in entering Urdu text.
I have been thinking about incorporating multiple keyboard layouts in Urdu WebPad. Such a feature would benefit those accustomed to other keyboard layouts as well as other local languages such as Pashto and Sindhi. I got the inspiration for this idea from Unipad. This feature has to be accompanied by an on-screen keyboard which would reflect the currently selected keyboard layout. The result of the this work is Urdu OpenPad. The word OpenPad hints at the openness of the editor. It is now possible to incorporate custom keyboard layouts for web-based editing.
Unipad Keyboard Definitions
Unipad supports multiple keyboard layouts and it allows the definition of custom keyboard layouts. Figure 1 shows the virtual keyboard layout used by Unipad. The details of how to define a new keyboard layout in Unipad can be found here. As can be seen there, Unipad used a four state keyboard i.e. normal, shift, Alt Gr and shift+Alt Gr states. Alt Gr key is found on some non-English keyboards and it is equivalent to the Ctrl+Alt key combination.
Figure 1 – Virtual key map used by Unipad
OpenPad Keyboard Definitions
I have decided to implement a three-state keyboard mapping i.e. normal, shift and Alt Gr states. This should be sufficient in most of the cases. I had to implement Alt Gr differently for Internet Explorer and FireFox because of the different ways handling of shift keys in these browsers. Alt Gr is equivalent to Ctrl+Alt in Internet Explorer and to Crtl+Shift in FireFox for Urdu OpenPad users.
Defining and adding a new keyboard mapping is very easy in Urdu OpenPad. All you have to do is to create an array of Key type objects. An object of type Key contains a single key mapping. It should contain at least the information about the normal key state and it can contain up to three key states. Following is the syntax of defining a key mapping.
Mapping[KeyCharacter]=new Key(x, [y], [z]);
Where;
x:= Normal key state
y:= Shift key state
z:= Alt Gr key state
The following shows a section of the Urdu Phonetic key-mapping included in Urdu OpenPad:
var UrduPhonetic= new Array();
UrduPhonetic['a']=new Key(0x0627, 0x0622);
UrduPhonetic['b']=new Key(0x0628, 0x0628);
UrduPhonetic['c']=new Key(0x0686, 0x062B);
.
.
Having completed the keyboard-mapping, it then has to be added to the list of available keyboard layouts inside the InitUrduEditor function as shown in the flowing:
KeyMaps["UrduPhonetic"]=UrduPhonetic;
All that remains is to set the current keyboard layout used in the editor with the following function call:
setKeymap("UrduPhonetic");
I am including three keyboard mappings, one each for Urdu Phoentic, Sindhi and Pashto. I used the Unipad keyboard mappings of Sindhi and Pashto.
On-Screen Keyboard
I have tried to model Window’s on-screen keyboard as closely as possible. Its display changes to reflect the shift keys pressed. The user can also click directly on the Shift or the AlrGr key. In that event, the on-screen keyboard remains in that state until the user clicks another button or presses some key. A small bar above the on-screen keyboard shows the help. I have used the Tahoma font for displaying characters in on-screen keyboard because it contains support for most of the languages based on the Arabic script. There may be mistakes in the on-screen display as well as in the implementation of the key mappings of Sindhi or Pashto. Unfortunately I cannot check this since I am not conversant with either of these languages. I hope, however, that soon Sindhi and Pashto speaking brothers and sisters will pounce onto these mistakes and inform me about these. Following figures show the keyboard layouts that come with Urdu OpenPad.
Figure 2 – Normal Urdu Phonetic Keyboard
Figure 3 – Shift State of Urdu Phonetic Keyboard
Figure 4 – Normal Sindhi Keyboard
Figure 5- Shift State of Sindhi Keyboard
Figure 6- Normal Pashto Keyboard
Figure 7- Shift State of Pashto Keyboard
Figure 8- Alt Gr State of Pashto Keyboard
Enhancements over Urdu WebPad
Following is the list of changes in Urdu OpenPad compared with Urdu WebPad:
Fonts
I have used many fonts in one of the demos included in the download to demonstrate the capability of setting fonts of the editor control. I have included on Sindhi (MB Sindhi Web) and one Pashto font (Pashto Kror Asisatype). The Tahoma font also contains supports for Sindhi and Pashto. You can find many other Unicode fonts for Sindhi and Pashto here. Figure 9 shows the use of Nafees Nastaleeq font in OpenPad editor control.
Figure 9- UsingNastaleeq Font in Urdu OpenPad
FireFox Issues
For some inexplicable reason, FireFox would not display diacritics (aerab) in their isolated forms inside the on-screen keyboard. That is why I had to add the character alif to the diacritic to make it appear properly. The result is shown in Figure 10.
Figure 10- Diacritics in FireFox
Future Work
I have heard many people complaining about the Phonetic Urdu keyboard because they are used to using some other keyboard layouts. I would appreciate if somebody sends me other Urdu key-mappings e.g. Aftab, Muqtadra etc. Though I think the on-screen keyboard in Urdu OpenPad to be a significant achievement, it still lacks in its visual appeal. Adding a the English character in the background in each key would enhance its utility. I find it very cumbersome to use the mouse every time I want to toggle the language mode. It would be better to implement a short-cut key for that.
Some of you already use Urdu Editor Lite which in fact just embeds an html page (Editor.htm) to provide Urdu editing capabilities and the Urdu text can saved in UTF-8 format. The Editor.htm file included in the download can be used in place of the one already in use by Urdu Editor Lite. Make sure to copy all the necessary files along i.e. OpenPad.js, OpenPad.css and the other graphics. This will at allow the use of new capabilities that come with OpenPad. This way Sindhi and Pashto text can also be processed and saved in UTF-8 format. I have not updated the sources of Urdu Editor Lite accordingly. This means that the Save As html function still saves an html file with a fixed font (Urdu Naskh Asiatype) and point size. I will try to update the sources of Urdu Editor Lite as soon as possible.
Another future prospect is that of using the same logic of key mapping in web-based WYSIWYG controls e.g. RTE, TinyMCE etc. I have already done some work in this direction and I hope to come up with some workable solution soon.
I will be looking forward to your feedback and comments. Those who are already using Urdu WebPad in their forums and websites are encouraged to give Urdu OpenPad a try. You may post a comment on this blog or you can discuss it on the Urdu Mehfil forum.
I released UrduEditor some time ago. Unfortunately it does not work on Windows 98. I did not realize at that time that right-to-left support needs to be installed in order for UrduEditor to work properly and this support is not available for Windows 98. Luckily I got a solution in my mind, which in fact is more of a hack, but it is still effective. Remember Urdu Webpad. It also works under Windows 98. Well, you need to have at least Internet Explorer 6 installed for it to work.
I then remembered that MFC also contains a CHTMLView class which is just a wrapper on Internet Explorer’s object model. It is capable of showing a html-page containing Urdu Webpad. This html-page loaded inside the application provides almost the same editing features as UrduEditor. Saving and loading Urdu text then requires accessing the contents of the Urdu Webpad control through the object model of Internet Explorer.
I call this application UrduEditor Lite since it provides a subset of the features available in UrduEditor. It is compiled using the Microsoft Layer for Unicode on Windows 98 systems (MSLU). This way the same application runs equally well both on Windows 98 as well as on Windows XP systems. The file unicows.dll needs to be in the application path in order for it to function properly in Windows 98. This program is useful for those who want to stick to their Windows 98 systems. Those Windows XP users who are too lazy to install support for Urdu language on their systems may also find it interesting.
Following are the UrduEditor features missing in UrduEditor Lite:
Following is needed for the proper functioning of UrduEditor Lite:
UrduEditor Lite can still save Urdu text as html. The missing features are not really impossible to program. I had some problems in compiling the CPJNSMTPConnection-class with UrduEditor Lite on Windows 98 and therefore I left out the email client functionality. This class implements the SMTP-protocol. It may work after some minor modifications. I may think about incorporating it into UrduEditor Lite if there is enough demand.
Creating a wrapper around Urdu Webpad adds an interesting perspective to the further development of the UrduEditor Lite application. Now only the JavaScript or html-modules can be updated to augment the functionality of UrduEditor Lite. The html-page that gets loaded inside UrduEditor Lite is Editor.htm. You can freely customize it to your taste e.g. by adding a background image. I have also made use of the Urdu keyboard available with Urdu Webpad in Editor.htm. This on-screen keyboard keyboard can be expanded or collapsed by clicking on the button as shown in the following figure. You can make as many modifications to the Editor.htm file as long as you do not change the file name. Another requirement is that thid html-page should contain a textarea-element whose identifier attribute is “Editor”.
The Urdu Webpad included with UrduEditor Lite contains some updates from Asif. There are some minor bug fixes and now the buttons on-screen keyboard show tool tips. You only need to unpack the zip-file containing UrduEditor Lite application in a folder and it is ready for use. No extra steps need to be performed for its installation. I have tested UrduEditor Lite on Windows XP as well as on Windows 98. I do not have a separate installation of Windows 98. I ran Windows 98 inside a virtual machine. I used VMWare for this purpose.
I am releasing UrduEditor Lite again under GPL. Have fun!
Updated location:
Download UrduEditor Lite with source code
This post contains the following sections
Introduction
Using UrduEditor
Where is the on-screen keyboard?
Sending Urdu Emails
Posting to Yahoo and Google Groups
Development
Futher Development
Download
Feedback
References
Introduction
With this post I am presenting you the UrduEditor, a Notepad like application especially tailored for editing Urdu text. You can think of it as a souped-up Notepad, a stripped down Unipad or whatever. After developing the web-based Urdu editor (I will call it Urdu Webpad from now on) I thought of developing a native windows version of a similar utility which I call UrduEditor. Since then I have been working on this idea. The progress has been very slow since I have been extremely busy. I do not have time even to add and test the tiniest of features. There is still a lot of unfinished functionality. I have no choice but to release a version and declare it as beta. I am also providing the source code of the UrduEditor application under GPL. Everybody is encouraged to make changes and add features to the UrduEditor. I am also ready to change the license from GPL to some other license if somebody finds it too restrictive.
The UrduEditor works in a way similar to that of Urdu Webpad. It is also capable of saving and loading Urdu text files. The Urdu text files are stored in UTF-8 format. Although the Urdu text files are plain text files, these are saved with a .uxt extension. This helps in identifying the Urdu text files in the windows file explorer and these also have shell association with the UrduEditor application i.e. double clicking on these files opens these in the UrduEditor application. The UrduEditor can even print, well, sort of. The problem is that the UrduEditor relies on the basic printing functionality of the MFC CEditView class. As a result the print-preview looks horrible and the printing is done left-aligned. I did not delve into the inner workings of the MFC/Windows printing mechanism. One solution would have been to use the CRichEditView class. That also would have meant a major re-write of the application. If there is anybody out there willing to augment the printing functionality of the UrduEditor application, they are most welcome to do it. One interesting feature of the UrduEditor is saving the Urdu text in html format. This html is of very primitive nature i.e. full of font tags and without any style. The reason why I chose this form of html was that I intended to use it for sending Urdu emails and this kind of html is most likely to be correctly displayed by any mail-client supporting html-mail.
At the moment UrduEditor uses the Urdu Naskh Asiatype font with a fixed point size. I will try to release a version soon that will allow selection of other Urdu fonts and point sizes. The keyboard mapping is similar to that of Urdu Webpad, which in turn mimics the keyboard mapping provided in the Inpage Urdu composing software.
I have also customized the Find and Replace dialogs to easily search and replace Urdu text. Figure 1 shows the main UrduEditor application window. Figure 2 illustrates the use of some toolbar buttons in UrduEditor.
Figure 1 : UrduEditor application
Figure 2 : UrduEditor’s Toolbar
Where is the on-screen keyboard?
This is probably the most glaring omission from the current release. I will try to provide an on-screen keyboard soon for aiding in entering Urdu text. Meanwhile the Windows 2000 and Windows XP users can use the on-screen keyboard provided with the standard windows installation.
An editor sending emails? Well, why not? I had an idea about sending Urdu emails but was too lazy to develop an extra application for that. I found out that the most feasible way of sending Urdu text based emails is sending it as html-mail. There are arguments about the security concerns when receiving html-mail but I still think that it is indispensable.
I wanted to incorporate html-mail functionality without relying on the Microsoft Outlook’s object libraries. I looked around for a c++ class that could provide a thorough encapsulation of the SMTP-protocol. The best open source class that I found was CPJNSMTPConnection written by P.J. Naughter. In fact the send mail dialog is also stolen from the sample application provided with the above-mentioned class. Figure 3 shows the send mail dialog.
Figure 3 : Send mail dialog
Some configuration is necessary before actually sending mails. As shown in the figure, the mail server name and the port number has to be specified. The mail server can also be a POP-server. I have experimented connecting to an Exchange server and the POP-server provided by the webmail provider www.gmx.de. I have not been able to make it work with Gmail’s POP-server yet. There is an almost infinite number of combinations of the mail-clients and message formats and I have been able to test only a few. The configuration dialog is shown in Figure 4.
Figure 4 : Configuration dialog
I have successfully tested sending Urdu emails to Hotmail, Yahoo and Gmail accounts. Figures 5,6 & 7 respectively show the screenshots of Hotmail, Gmail and Yahoo mail with Urdu mail messages. This text is taken from some article at BBC’s Urdu website.
Figure 5 : Urdu message in Hotmail
Figure 6 : Urdu message in Gmail
Figure 7 : Urdu message in Yahoo Mail
It must be noted that you may or may not be able to freely choose the sender’s email address. For example I was able to specify any sender address I liked when sending email through an Exchange server but I was only able to send email through GMX after I specified my correct GMX-address. It is also interesting to note that when sending Urdu email this way to a Gmail-account, the email is likely to land into the spam-mail folder. Watch out for that!
Posting to Yahoo and Google Groups
One of my goals was to enable the members of Yahoo- and Google-groups to post in Urdu. This is possible by sending html-mails to the groups’ email addresses. The key to participating in a particular discussion is its title which must be specified as the subject of the sent mail. Following are the discussion groups that I set up for my experimentation:
Yahoo UrduProjects Group:
URL: http://groups.yahoo.com/group/urduprojects/
Post message: urduprojects@yahoogroups.com
Figure 8 : Urdu post in Yahoo Group
Google UrduProjects Group:
URL : http://groups-beta.google.com/group/urduprojects
Post message: urduprojects@googlegroups.com
Figure 9 : Urdu post in Google Group
It can be seen from the above images that the Urdu text is displayed better in the Google group. The text in Figures 8 & 9 was copied from a post in Danial’s blog.
Note: If you see garbage instead of Urdu text, change the default encoding of your browser to Unicode (UTF-8).
I have developed the UrduEditor application using MFC and Visual C++ 6.0. I did not use Visual C++.NET because I wanted to avoid unnecessary dependencies that would prevent the program from running on Windows 98 systems. Asif has reported that the programs compiles fine with Visual C++.NET. I may gradually switch to Visual C++.NET for future development. The source code also presents an example of using Unicode with MFC. I have extended the MFC edit controls for editing of the Urdu text. I may at some later point create an MFC extension library useful for developing Urdu based applications.
A lot of work still remains to be done. I stay committed to the development of following features:
An on screen keyboard for helping in the entry of Urdu text.
Changing fonts and point sizes
More options for different html-templates
Dialog boxes for displaying and copying different types of html outputs
A toolbar for inserting diacritics
The ideas used in the development of the UrduEditor application can also be used in other directions. It is possible to develop a library of ActiveX controls to allow Visual Basic programmers to write Urdu based applications. The keyboard handling in the UrduEditor application can be made generic in order to support multiple keyboard layouts. This would make capable of editing text in local languages e.g. Sindhi, Balochi and Pashto. In fact I am already eying the keyboard layout format used in Unipad. I can accomplish this task only if I get enough support from people having interest in it.
You can download the UrduEditor application and its source code from the following links.
Updated: Dowload UrduEditor with source code
Your feedback is essential for the further development and improvement of the UrduEditor application. You can either post a comment on this blog or you can send a post to the above mentioned Yahoo or Google groups for your feedback.
A helper class for reading, writing and appending to/from Unicode text files by PEK, http://www.codeproject.com/file/textfiledocument.asp
Why is having a HTML-based Urdu editor so important? After all you could just set a few attributes of the HTML textarea element and you could start typing away both Urdu and English. The input language changes with the keyboard layout selected. As it turns out, this arrangement is not available to the Windows 98 users who still constitute the majority of computer users in Pakistan and probably in India too. The web-based Urdu Pad created by Urdu Life has proved highly popular in the Urdu community. Even many Windows XP and Windows 2000 users use Urdu Pad because of its easy to use and intuitive interface. You do not have to switch keyboard layouts. Instead you can just toggle the input language using the radio buttons. The key mappings, which are similar to those provided by the Urdu phonetic keyboard, are said to be similar to those present in the InPage Urdu composing system.
All of this is very nice until you notice that the people at urdulife.com do not allow the use of the Urdu Pad outside the premises of urdulife.com. That means you cannot integrate this as an input component in your web applications. Urdu Life also safeguards its intellectual property by obfuscating the JavaScript source code of the Urdu Pad. Though it is true that every business has the right to protect its intellectual property, we need more open source way of thinking if we want to promote Urdu. While open source is thriving in the rest of the world, Urdu is still struggling to get out of the stranglehold of closed standards and proprietary software.
Seeing the need for a web-based Urdu editor component that could match in functionality to Urdu Pad, I decided to develop one myself. Considering that I am a novice in JavaScript programming, this task was somewhat daunting. I had set out several goals before starting this development, not all of which I could meet. I wanted to make this a reusable component. I have been partially successful in achieving that goal. The work on Urdu Editor is not finished. I hope that the Urdu community takes interest in this project and contributes to it.
Compatibility Issues
I faced a setback when trying to make the Urdu Editor component compatible with FireFox. It is working only with Internet Explorer at the moment. The working of Urdu Editor is simple. It inspects the key codes in the keypress event and based on the language setting modifies this key code. The event model in FireFox does not allow this alteration of key codes. Maybe there is some workaround for making it work but since this exploration was taking so much time, I gave up on it. I would request my friends with JavaScript expertise to inform me of any workaround, if there is one.
Licence
I am distributing the Urdu Editor component under GPL.
Use
The Urdu Editor is different from Urdu Pad in that you can place as many single-line and multi-line Urdu enabled edit areas on your web page. The keyboard control is not tightly coupled with any one specific edit area. It sends characters to the edit area which currently has focus.
Include the following line in you HTML code before you can use the Urdu Editor:
<script language="javascript1.2" type="text/javascript" src="yourpath/UrduEditor.js"></script>
where yourpath is the path to the JavaScript file UrduEditor.js. Now you have to call the initUrduEditor function as shown in the following.
<script language="JavaScript" type=text/javascript>
initUrduEditor(cssPath);
</script>
As is shown by the semantics, cssPath is the relative path to the UrduEditor.css file. The function initUrduEditor initialises some variables and event handlers.
After the necessary initialisation, there are more than one ways to create an Urdu edit area in you web page. One possibility is to call the writeUrduEitor function. This function has the following semantics:
WriteUrduEditor(id, rows, cols, pointsize);
id is the identifier assigned to the edit control. The rows parameter determines height of the edit control. An input element of type text is placed if rows is equal to one, otherwise a multi-line textarea is created. The width of edit control is determined by the cols parameter and the pointsize parameter sets, well, the point size of the edit area. The Urdu Editor uses the Urdu Naskh Asiatype font. Use of this font makes sure that Urdu Editor also works in Windows 98.
There are situations where you may want to customize the edit areas of existing web pages. An existing edit area can be converted to an Urdu Editor control by carrying out the following steps:
lang="ur" and dir="rtl"style="font-family:Urdu Naskh Asiatype; font-size:16"onfocus="setEditor(this)"onkeypress="processKeypresses()"onclick="storeCaret(this)" onkeyup="storeCaret(this)"I have provided a function makeUrduEditor(id, pointsize) which does almost all of the above for an edit control identified by id. Strangely enough, setting the onfocus event does not work with makeUrduEditor. Therefore onfocus must be manually set as described above.
The keyboard control has a table-based layout. As you can see from the source code, it expands or shrinks to fit the space provided. How the keyboard control appears on screen and how easily it is accessible for all edit areas depends on how the web page was designed. The toggle language buttons are also part of the keyboard control. Calling the writeKeyboard function creates the keyboard control.
Example: Integration into phpBB
Our friend Qadeer was especially getting impatient to get his hands on the Urdu Editor because he wanted to integrate it with phpBB. In his opinion such a control would go a long way in promoting Urdu on the net. We have to wait and see if he his prognosis is right. I successfully integrated the Urdu Editor inside phpBB’s post page. I am including the modified template file posting_body.tpl in the download. First of all I copied the files UrduEditor.js and UrduEditor.css into the folder templates/subSilver/ and then added the reference to UrduEditor.js to the posting_body.tpl template file. Following shows the inclusion of the reference to the UrduEditor.js file and the call to the initUrduEditor function.
<script language="javascript1.2" type="text/javascript" src="templates/subSilver/UrduEditor.js"></script>
<script language="JavaScript" type="text/javascript">
initUrduEditor('templates/subSilver/');
</script>
There are two single-line edit controls and one textarea element on the posting page. The single line edit control correspond to the user name and the subject fields and hence are assigned name values of “username” and “subject”. As described above, I assigned id’s to both edit fields which were the same as their names. I also added the onfocus event handler. The final touches are given by the makeUrduEditor function call as shown in the following:
<script language="JavaScript" type=text/javascript>
makeUrduEditor("username", 12);
</script>
and
<script language="JavaScript" type="text/javascript">
makeUrduEditor("subject", 12);
</script>
The multi-line textarea element receives the actual message post text. The only customisation required in this case is the assignment of the id as well as the setting of the event handlers onfocus and onkeypress.
The elements on the post page are arranged using a table-based layout. I added another table row and a table cell where I inserted the keyboard control using the follwing code:
<tr>
<td colspan="9">
<script language="JavaScript" type="text/javascript">
writeKeyboard();
</script>
</td>
</tr>
The following figure shows the results of the customisation of the post page.
Download UrduEditor
View demo page
Enhancements
There is still lots of room for improvement. Possible improvements include opening the keyboard control in a separate modeless dialog, a better color scheme of the keyboard layout, adding more key codes and diacritics etc. You are most welcome to take the provided source code apart and introduce enhancements. My request is just to notify me of any new feature that you add or make it yourself available to the others.