MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Keyboard

    Scheduled Pinned Locked Moved Upcoming Features
    13 Posts 6 Posters 5.3k Views 5 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      sdetweil @pana507
      last edited by

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

      I installed, and so far nothing is different

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      lavolp3L 1 Reply Last reply Reply Quote 0
      • lavolp3L Offline
        lavolp3 Module Developer @sdetweil
        last edited by

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

        How to troubleshoot modules
        MMM-soccer v2, MMM-AVStock

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @lavolp3
          last edited by

          @lavolp3 u need getScripts to load the Keyboard js

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • lavolp3L Offline
            lavolp3 Module Developer @pana507
            last edited by 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.

            How to troubleshoot modules
            MMM-soccer v2, MMM-AVStock

            S 1 Reply Last reply Reply Quote 0
            • L Offline
              lally james @sdetweil
              last edited by

              @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

              1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @lavolp3
                last edited by

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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • 1
                • 2
                • 2 / 2
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy