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


  • 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 [
        getScripts: function () {
            return [
    • Create a div in your DOM building function. Something like that:
              const kb = document.createElement("div");
              kb.className = "simple-keyboard";

    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)

    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:
    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