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
- 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:
- 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"
- 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:
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 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.
Calculadoras similares
- • Tips and tricks #1: How to set output value
- • Tips and tricks #3: How to make calculator with custom errors
- • Tips and tricks #5: How to show/hide input and output controls in a calculator
- • Tips and tricks #4: How to make calculator with table output
- • Tips and tricks #2: How to make calculator translatable into different languages
Comentários