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