Discuss your custom applets, calculation tools


Postby oliver » Sun Oct 20, 2013 8:24 pm

An interactive Unicode chooser that let's you enter a Unicode code or paste a character and then search its neighborhood of codes using a slider that will go one hundred codes up or down. A -100 button provides that offset to extend the search range. The unicode is displayed as a large character along with its code number, in hex, octal, binary or decimal format, as per user choice.

Calc in action
unicodes.png (66.02 KiB) Viewed 7715 times

unicodes_definition.png (90.86 KiB) Viewed 7715 times

How it's done:

options is a segmented control that let's a user make it choice. The choices are given in parentheses.
The function line says under which name the choice will be referable by other components.

label is a text label, its text content is in the parentheses.

input is a field where the user can enter text.
The function line again gives the name under which the user-typed text will be referable by other components.

Show is a button.
Its function is to invoke the function @showUnicode with two variables. These are the number format and the text the user typed.

[3] -100 is a button with text "-100". The [3] gives the size of the button: 1/3 of the available width. (That is, you could have three buttons marked with [3] in a row. The default is 4 or 5, depending on button content.)
It, too, invokes the function @showUnicode albeit with different--and as of yet--undefined variables.

slider is a slider that will provide values from 0.0 to 1.0.
The second line, codeSlider, again specifies the name of its result.

While these definitions hook up some of the tool, there's code missing to actual display something, deal with the slider changing, and the function @showUnicode is as of yet undefined.

That's where the Injection page of the tools comes in. It provides these things with JavaScript code.
unicodes injection.png
Injection page
unicodes injection.png (124.13 KiB) Viewed 7715 times

For better readability, here's the full code:
Code: Select all
var v = calculator.vars.local; // simplify typing
v.sliderBaseCode = v.lastCode = 0x3c0;
v.updateSliderBaseCode = true;

var f = calculator.functions;

window.onUIChange = function(obj) {
    v.updateSliderBaseCode = false;
    f["@showUnicode"](v.lastCode, obj.numberFormat);
    v.updateSliderBaseCode = true;

window.onSliderChange = function(obj) {
    v.updateSliderBaseCode = false;
    f["@showUnicode"](Math.floor(obj.codeSlider * 100 + v.sliderBaseCode), v.lastFormat);
    v.updateSliderBaseCode = true;

f["@showUnicode"] =
function(charOrCode, format) {
    charOrCode = calculator.unquote(charOrCode);
    var character, code;
    var result = this.unicode(charOrCode);
    if (typeof result == "number") {
        character = charOrCode;
        code = result;
    else {
        character = result;
        code = +charOrCode;

    v.lastCode = code;
    if (v.updateSliderBaseCode)
        v.sliderBaseCode = v.lastCode;
    v.lastFormat = format;

    if (format == 0) code = "0x" + this.binary.decimalToHex(code);
    else if (format == 2) code = this.binary.decimalToOct(code) + "o";
    else if (format == 3) code = this.binary.decimalToBinary(code) + "b";

    display.showPage("(" + code + ")"+ "<span style='font-size:118px; margin-left:15%'>" + character + "</span>");
Site Admin
Posts: 433
Joined: Sat May 01, 2010 2:11 pm

Return to Applets / Calculators

Who is online

Users browsing this forum: No registered users and 1 guest