Keyboard

pana507

Hi
I tried to install the virtual keyboard, but when I started the keyboard the whole MagicMirror was interrupted.
Could you give me lights on this or recommend a virtual keyboard already tested in MM

sdetweil

@pana507 i have not seen any implementations with a vk

sdetweil

@pana507 when u started the keyboard??? how did u do that?

I installed, and so far nothing is different

lavolp3

@sdetweil What a great coincidence that I’m currently working on a module for which I need a virtual keyboard as well.
What have you installed?
I have again stranded with the problem of not being able to properly include an npm module into the main .js file.
Is this only possible via the getScripts function?

I have installed the module “simple-keyboard” using npm and included it like this:

    getStyles: function () {
        return [
            this.file('node_modules/simple-keyboard/build/css/index.css')
        ];
    },

Then called the keyboard class as instructed by the authors like this:

    start: function () {

        this.keyboard = new Keyboard({
            onChange: input => this.onChange(input),
            onKeyPress: button => this.onKeyPress(button)
        });

Didn’t work. “Keyboard is not defined”

@pana507 what have you done to install a keyboard.

sdetweil

@lavolp3 u need getScripts to load the Keyboard js

lavolp3

@pana507 @sdetweil So, yay I got it working!
Guess I’ll need to write some kind of tutorial, not too easy but here a few first steps:

Install “simple-keyboard” in your module via npm
Bind it into the JS

    getStyles: function () {
        return [
            this.file('node_modules/simple-keyboard/build/css/index.css')
        ];
    },

    getScripts: function () {
        return [
            this.file('node_modules/simple-keyboard/build/index.js')
        ];
    },

Create a div in your DOM building function. Something like that:

          const kb = document.createElement("div");
          kb.className = "simple-keyboard";
          container.appendChild(kb);

The class is important!

Then, AFTER the DOM element is created, you can create the keyboard class. I did this as soon as a text field was clicked on. With this method I can make sure that the DOM is created already:

          input.addEventListener("focus", event => {
              if (!this.keyboard) {
                  var Keyboard = window.SimpleKeyboard.default;

                  this.keyboard = new Keyboard({
                      onChange: input => this.onChange(input),
                      onKeyPress: button => this.onKeyPress(button)
                  });
              }
              this.keyboard.keyboardDOM.classList.add("show-keyboard");
          });

I guess this can be shortened but I keep the running system for now.
You can see there are a lot of other functions (this.onChange, this.onKeyPress…)
Basically they are designed to hide the keyboard if I klick anywhere else and show it if I click on the input field. I have the concept from here:
https://franciscohodge.com/projects/simple-keyboard/demos/show-hide-demo/
Simple-keyboard is well documented for npm including lots of sample code, so with a bit of knowledge you’ll find your way around eventually.

Still need to test it on the raspi itself and for all it’s function.

lally james

@sdetweil said in Keyboard:

@pana507 you can also add the npm for virtual keyboard and add it to your module
https://www.npmjs.com/package/virtual-[keyboard](https://spacebarcounter.info/click-counter/)

there are others
do google search
node js virtual keyboard

thanks for sharing man i was also planning to add the npm for the keyboard

sdetweil

@lavolp3 said in Keyboard:

Then, AFTER the DOM element is created, you can create the keyboard class. I did this as soon as a text field was clicked on. With this method I can make sure that the DOM is created already:

I know it’s 2 years later, but that is what the MM notification DOM-OBJECTS-CREATED means… .