• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 4.8k 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.
  • L Offline
    lavolp3 Module Developer @pana507
    last edited by lavolp3 Jan 5, 2020, 8:22 PM Jan 5, 2020, 8:20 PM

    @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 Aug 31, 2022, 12:21 PM Reply Quote 0
    • L Offline
      lally james @sdetweil
      last edited by Aug 31, 2022, 7:18 AM

      @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 Away
        sdetweil @lavolp3
        last edited by Aug 31, 2022, 12:21 PM

        @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