Get reference code
Appearance
Sample
Tips and tricks #6: How to make calculator with virtual keyboard

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

This article describes how to create calculator with virtual keyboard using SVG image
Timur2017-05-22 12:39:43

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 is typical opening g tag for english "D"

<g   id="d"
       class="keyboard_key"
       transform="translate(121.62982,-105.35715)">

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.

Calculator

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 on My calculators link at the top right corner. This will bring you to the Personal section of the site with new top menu. In the top menu, hover Create New button and click on Calculator menu item. This will take you to the calculator editor.

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) {
    message.SetValue("");
    return;
}
var symbols = keyboard.split(";");
var result = "";
for(var i = 0; i < symbols.length; ++i)
    if (symbols[i] != "kbd_space")
        result += resources[symbols[i]];
    else
        result += " ";
message.SetValue(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.

Standard Galactic Alphabet decoderCreative Commons Attribution/Share-Alike License 3.0 (Unported)
 
image/svg+xml

Comments