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

Tips and tricks series

• Tips and tricks #1: How to set output value
• Tips and tricks #2: How to make calculator translatable into different languages
• Tips and tricks #3: How to make calculator with custom errors
• Tips and tricks #4: How to make calculator with table output
• Tips and tricks #5: How to show/hide input and output controls in a calculator
• Tips and tricks #6: How to make calculator with virtual keyboard
• Tips and tricks #7: How to make calculator with SVG image map
• Tips and tricks #8: How to reuse existing calculator
• Tips and tricks #9: Big numbers
• Tips and tricks #10: Files, long calculation mode
• Tips and tricks #11: Dynamic table columns
• Tips and tricks #12: Long (infinite) calculations
• Tips and tricks #13: Bitmaps and Pixel manipulation
• Tips and tricks #14: How to use a masked input

This article may rely 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 messages 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 a Standard Galactic Alphabet decoder quite a long time ago, but this was impossible until now. The problem is that such a request requires means to enter symbols of Standard Galactic Alphabet for decoding, in other words, some sort of virtual keyboard. Finally, we have such a 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, of 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 the SVG file you need to follow a couple of rules for the keyboard to work:

1. Each entity (group, path, rect, etc), which is supposed to be a button of your keyboard, should have the 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 the id attribute set to something meaningful.

The class attribute is used to attach click handlers to elements, and the id attribute is used to identify the "button" being pressed. For SGA I used lowercase English letters as ids. 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 the "kbd_backspace" id is special and is used to treat the 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

To make your keyboard looks pretty, you may need to add some interactivity, like a change of background on hover and 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 the 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 the profile picture link at the top right corner, then choose  Personal. This will bring you to the Personal section of the site with a new top-left  menu. In the top left menu, click the  My calculators item.

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

Add the following input controls:

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:

We have described the 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 the change of inputs and calculation of outputs - to make the keyboard respond promptly to the user's input. To do so, just set the Instant calculation checkbox at the bottom of the calculator editor.

After that, click on the Preview button. In my opinion, the keyboard will look more natural, if the 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 decoder

Message

 

SGA Keyboard

 Link  Save  Widget