virtual keyboard : symbol replaced by "#@"

[oliverstefanov]

Hi,

With the virtual keyboard, i get "#@" when trying to exponentiate a symbol (e.g. button x^2 replaces the highlighted symbol "x" by "#@^2"). Is this a bug?

Also, there a few trig functions missing from the keyboard (e.g. sinh). Is there any way to customize the keyboard and modify its behavior further than with config keywords (e.g. manual) ?

[arnog]

It's a bug. Thanks for reporting it.
You can customize the virtual keyboard using config, and even though you can't modify the function keyboard, you can replace it (and keep the others). That said, I'd be happy to add more functions to the default function keyboard so they're available on a long press. Which functions would you like to have?

[oliverstefanov]

Hyperbolic trig functions would be nice for example.

How do you go about editing a new layer through config, I am not sure what you mean. I see there is a custom json example but how do I feed it into makeMathField? I tried including the various fields (customVirtualKeyboardLayers: and so on) from that custom json example into the makeMathField but then the virtual keyboard toggle button doesn't appear

<script type="module">

        import MathLive from 'https://unpkg.com/mathlive/dist/mathlive.mjs';
        const mf = MathLive.makeMathField('mf', {
            smartMode: true,
            virtualKeyboardMode: 'manual',
            customVirtualKeyboardLayers: {
                layer-name: {
                    styles: "",
                    rows: [
                        [
                            {
                                class: "keycap",
                                latex: "\\frac{x}{y}"
                            }
                        ]
                    ]
                }
            },
            customVirtualKeyboards: {
                keyboard-name: {
                    label: "Json",
                    tooltip: "Json keyboard",
                    layer: "layer-name"
                }
            },
            virtualKeyboards: "keyboard-name",

            onContentDidChange: (mf) => {
                const latex = mf.$text();
                document.getElementById('latex').innerHTML = escapeHtml(
                    latex
                );

             //   const mathJSON = MathLive.latexToAST(latex);
             //   document.getElementById('mathjson').innerHTML = escapeHtml(
             //       JSON.stringify(mathJSON)
              //  );
            },
        });

[arnog]

You have some syntax errors in the code above: in JavaScript, keys that contain non-alphanumeric characters must be quoted.
So

                layer-name: {

becomes

                "layer-name": {

and

                keyboard-name: {

becomes

                "keyboard-name": {

and then the keyboard button will show (you probably had some errors in the JavaScript console pointing at these problems).

[oliverstefanov]

Great it's working now, thanks!