Tips and tricks #6: How to make calculator with virtual keyboard

This article describes how to create calculator with virtual keyboard using SVG image

Tips and tricks series

This article relies on knowledge you should get from previous articles, so you may want to check them first.

Standard Galactic Alphabet

In this article we will create our next calculator, which will output english text for message typed with Standard Galactic Alphabet. If you want to learn more about Standard Galactic Alphabet, google can help.
Anyway, one of the site visitors has asked for Standard Galactic Alphabet decoder quite a long time ago, but this was impossible until now. The problem is that such request requires means to enter symbols of Standard Galactic Alphabet for decoding, in other words, some sort of virtual keyboard. Finally we have such feature. Now you can enter any symbols with the help of new input control SVG keyboard. and in this article I will tell you how to use it.

SVG keyboard image

First, or course, you need an SVG image of your keyboard with whatever symbols it needs to have. I've created one for this calculator, with SGA symbols based on SGA Rounded font which can be found here. During the creation of SVG file you need to follow couple of rules in order for keyboard to work:

  1. Each entity (group, path, rect, etc), which is supposed to be a button of your keyboard, should have class attribute set to "keyboard_key"
  2. Each entity (group, path, rect, etc), which is supposed to be a button of your keyboard, should have id attribute set to something meaningful.

Class attribute is used to attach click handlers to elements, and id attribute is used to identify "button" being pressed. For SGA I used lowercase english letters as id's. Below are attributed for typical opening g tag for english "D"

id="d" class="keyboard_key"

Keyboard used here also has two special keys - space with id "kbd_space" and backspace with id "kbd_backspace".

Note that "kbd_backspace" id is special and is used to treat pressed button as backspace by the input itself. So, if you want to use backspace on your keyboard, assign "kbd_backspace" id to it, and the platform will handle it for you.

SVG keyboard style

In order to make your keyboard looks pretty, you may need to add some interactivity, like change of background on hover and on click. This can be done using CSS styles. Here is the sample CSS, which uses :hover and :active pseudo classes to emulate hovering and clicking effects.

rect.keyboard_key:hover {
fill: #A9A9A9 !important;
fill-opacity: 1 !important;

.keyboard_key rect:hover {
fill: #A9A9A9 !important;
fill-opacity: 1 !important;

.keyboard_key rect:active {
fill: #D3D3D3 !important;
fill-opacity: 1 !important;

Concrete CSS, of course, depends on contents of your SVG, so I would not comment much here.


With SVG and CSS at hand we are ready to create a virtual keyboard calculator.

To create a calculator, login to the site and click profile picture link at the top right corner, then choose favorite Personal. This will bring you to the Personal section of the site with new top left menu menu. In the top left menu, click assignment My calculators item.

This will open My calculators page. Here, press add button in the table header. This will open calculator editor page.

Add the following input controls:

Name Variable Type Default value Note
SGA Keyboard keyboard SVG Keyboard
Resources resources Resources

For SGA Keyboard input, paste contents of SVG image into SVG Keyboard field and contents of CSS style to Keyboard style field. For Resources input, add "a"-"A", "b"-"B", etc. mapping of lowercase english letters to uppercase english letters.

Now, add the output control:

Name Variable Type Note
Message message String

We have described inputs and outputs of our calculator, so we only need to write code to do the decoding.

Add this code into Calculate function:

if (!keyboard.length) {
var symbols = keyboard.split(";");
var result = "";
for(var i = 0; i < symbols.length; ++i)
    if (symbols[i] != "kbd_space")
        result += resources[symbols[i]];
        result += " ";

Now you need to remove artificial delay between change of inputs and calculation of outputs - to make keyboard respond promptly on user's input. To do so, just set Instant calculation checkbox at the bottom of the calculator editor.

After that, click on Preview button. In my opinion, keyboard will look more naturally, if output will be placed above the keyboard. To do so, while in "Preview" mode, just move "message" output above all inputs by pressing Move up link in the table "Parameter order" at the bottom of the form, then press "Save".

If everything is working as expected, Publish the calculator. I embed it in this article below.

PLANETCALC, Standard Galactic Alphabet decoder

Standard Galactic Alphabet decoder


URL copied to clipboard
Creative Commons Attribution/Share-Alike License 3.0 (Unported) PLANETCALC, Tips and tricks #6: How to make calculator with virtual keyboard