Keyboard Where do I remap keys to get AZERTY keyboard?

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

Nov 20 '20 22:11 Philaine

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:

https://mottie.github.io/Keyboard/dist/layouts/french.min.js (source: https://github.com/Mottie/Keyboard/blob/master/layouts/french.js)
https://mottie.github.io/Keyboard/dist/languages/fr.min.js (source: https://github.com/Mottie/Keyboard/blob/master/languages/fr.js)

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.

Nov 22 '20 16:11 Mottie

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

For the Azerty problem, it doesn’t work either ; I replaced the existing files in the ‘layout’ and ‘languages’ directories and I declared the paths in the

of the html file:

no success either. Maybe I forgot Something (I’m a beginner in programming). Is it possible to limit the text in textarea so that it goes at the line below, because on a tablet (I’m working with the iPad example) it’s difficult to get the hidden text to show :°) Attachment : the console I get in chrome.

Thanks again for such a complex work !

Regards

Philippe

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

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: • https://mottie.github.io/Keyboard/dist/layouts/french.min.js (source: https://github.com/Mottie/Keyboard/blob/master/layouts/french.js) • https://mottie.github.io/Keyboard/dist/languages/fr.min.js (source: https://github.com/Mottie/Keyboard/blob/master/languages/fr.js) 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'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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Nov 23 '20 21:11 Philaine

It sounds like you want to use an input instead of a textarea - updated demo

Also, please make sure that you've included all of the following files:

jquery.min.js - load this first; use version 2.2.4 otherwise jQuery UI version 1.12.1 won't work
jquery-ui.css - CSS
jquery-ui.js - v1.12.1 - we really only need the position utility; this is what positions the keyboard next to the input/textarea
`jquery.keyboard.min.js - main keyboard file
jquery.mousewheel.min.js - load this if you want the mousewheel to scroll through the keys when you mouse hover
jquery.keyboard.extension-typing.js - typing extension that highlights the keys of the virtual keyboard to match the keys you press on the physical keyboard
fr.min.js - French language file
french.min.js - French layout file

Whew, I know that's a lot of files. Ideally, you would host these files on your own site, but alternatively, you can point to the cdnjs servers (https://cdnjs.com/libraries/virtual-keyboard) which would make it less intensive on your own servers

In the <head> add this:

<!-- css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.1/css/keyboard.min.css" />
<style>
/* Change keyboard key size */
.ui-keyboard span { font-size: 1.2em; }
.ui-keyboard-button { height: 2em; margin: .1em; cursor: pointer; }

/* Change input font size */
#keyboard { font-size: 2em; }
</style>

<!-- js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.1/js/jquery.keyboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.1/js/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.1/js/jquery.keyboard.extension-typing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.1/languages/fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.1/layouts/french.min.js"></script>
<script>
$(function() {
  $('#keyboard').keyboard({
    layout: 'french-azerty-1',
    usePreview: false
  })
  // activate the typing extension
  .addTyping({
    showTyping: true,
    delay: 250
  });
});
</script>

Inside the <body> add the input

<input id="keyboard" type="text" />

Nov 24 '20 01:11 Mottie

Hi Rob,

Many thanks for your help. I’ve create a new project with your prescriptions… and it worked ! I get the french keyboard and I can change the font size in the input (thanks for the input field!). The only thing I can’t do now… is to change easily the keyboard font : the scripts in the ‘head’ of the html file don’t work: I can only change the height of the keys, but I’ve found the parameters to change in jQuery-ui-min.css and keyboard-min.css ! The only parameter I didn’t find is the margin around the letters of the keyboard, because if I increase the font-size, the keys become too large. I would like to fill the space of the keys with the letters. Could you give me the name of the parameter ? But even with that small detail, I’m very happy with your this keyboard. It’s an incredible amount of work !

Thanks again, Best regards,

Philippe

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

It sounds like you want to use an input instead of a textarea... Also, please make sure that you've included all of the following files: • jquery.min.js - load this first; use version 2.2.4 otherwise jQuery UI version 1.12.1 won't work • jquery-ui.css - CSS • jquery-ui.js - v1.12.1 - we really only need the position utility; this is what positions the keyboard next to the input/textarea • `jquery.keyboard.min.js - main keyboard file • jquery.mousewheel.min.js - load this if you want the mousewheel to scroll through the keys when you mouse hover • jquery.keyboard.extension-typing.js - typing extension that highlights the keys of the virtual keyboard to match the keys you press on the physical keyboard • fr.min.js - French language file • french.min.js - French layout file Whew, I know that's a lot of files. Ideally, you would host these files on your own site, but alternatively, you can point to the cdnjs servers (https://cdnjs.com/libraries/virtual-keyboard) which would make it less intensive on your own servers In the

add this:

Inside the

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

Nov 26 '20 00:11 Philaine

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.

Nov 26 '20 00:11 Mottie

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.

Nov 26 '20 10:11 Philaine