MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Keyboard


  • Module Developer

    @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.


Log in to reply