Where do I remap keys to get AZERTY keyboard?

Philaine commented 3 years ago

Hi

Thanks for your amazing work! I'm in France so I use an AZERTY keyboard: how do I remap the keys? I've tried in the html files with no effect at all. Moreover, I want to use it for a disabled person but I can't find a way to change sizes of both keys and textarea font-sizes separately. I've tried in jquery-ui.min.css and keyboard.css with no success. ...and I'm a beginner, so maybe my questions may appear out of subject... but I want this virtual keyboard so much...

Thanks for your help

Mottie commented 3 years ago

Hi @Philaine!

Sorry for not responding sooner. I'm happy to hear that this work is helping others!

To increase the keyboard button font size use something like this (modified from FAQ):

.ui-keyboard span { font-size: 1.2em; }
.ui-keyboard-button { height: 2em; margin: .1em; cursor: pointer; }

To increase the textarea size, you'll need this CSS

textarea, .ui-widget textarea { font-size: 2em; }

The .ui-widget textarea selector overrides the setting from jQuery UI

And to show an AZERTY keyboard with French language, you'll need to load in the french.js layout file and french.js language file:

These are the minified (made super-small) versions of the files, so they aren't readable so I've included a link to the more readable source. Here is how to set up the keyboard:

$(function() {
  $('#keyboard').keyboard({
      layout: 'french-azerty-1',
      usePreview: false
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });
});

Here's a demo of it all working together - http://jsfiddle.net/Mottie/gs50by82/

Please let me know if you need more help. I'll try to respond quicker next time.

Philaine commented 3 years ago

Hi Rob,

Thanks for your fast response ; don’t worry for the delay, I find it very short. I succeeded for the keyboard font-size and key size but not for the widget, wherever I place it (I put it in keyboard.css); I tried also in a

Inside the add the input

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Mottie commented 3 years ago

Try this bit of CSS:

.ui-keyboard-button span {
    padding: 0px 15px;
}

The 0px adding top & bottom padding, while the 15px adjusts the left & right padding.

Philaine commented 3 years ago

Hi Rob,

Thanks ! Here is what I did : I took some parameters in keyboard.min.css that I put in the keyboard.css that I made with the one took on mottie.github.io/ - then I’ve deleted the call to keyboard.min.css… and that’s it !

I can do now ALL I want with that amazing keyboard !

Best regards,

Philippe

De : Rob Garrison Envoyé le :jeudi 26 novembre 2020 01:33 À : Mottie/Keyboard Cc : Philaine; Mention Objet :Re: [Mottie/Keyboard] Where do I remap keys to get AZERTY keyboard?(#796)

Try this bit of CSS: .ui-keyboard-button span { padding: 0px 15px; } The 0px adding top & bottom padding, while the 15px adjusts the left & right padding. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Mottie / Keyboard

Where do I remap keys to get AZERTY keyboard? #796