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.
    • P Offline
      pana507
      last edited by

      Thanks for the help, but I need to know how I integrate it into a module so that I can select it as an option within my magic mirror

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

        @pana507 you can also add the npm for virtual keyboard and add it to your module
        https://www.npmjs.com/package/virtual-keyboard

        there are others
        do google search

        node js virtual keyboard
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        L 1 Reply Last reply Reply Quote 1
        • P Offline
          pana507
          last edited by

          @sdetweil said in Keyboard:

          there are others
          do google search

          Thank you, I will do the tests and tell you how it went
          Cheers

          1 Reply Last reply Reply Quote 0
          • P Offline
            pana507
            last edited by

            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

            S lavolp3L 3 Replies Last reply Reply Quote 0
            • S Offline
              sdetweil @pana507
              last edited by

              @pana507 i have not seen any implementations with a vk

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • 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
                        • 1
                        • 2
                        • 1 / 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