Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Philaine opened this issue Nov 20, 2020 · 6 comments
Open

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

Philaine opened this issue Nov 20, 2020 · 6 comments
Labels
How to...

Comments

@Philaine
Copy link

Philaine commented Nov 20, 2020 •
edited
Loading

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
Copy link
Owner

Mottie commented Nov 22, 2020 •
edited
Loading

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
Copy link
Author

Philaine commented Nov 23, 2020 via email

@Mottie
Copy link
Owner

Mottie commented Nov 24, 2020 •
edited
Loading

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" />

@Philaine
Copy link
Author

Philaine commented Nov 26, 2020 via email

@Mottie
Copy link
Owner

Mottie commented Nov 26, 2020

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
Copy link
Author

Philaine commented Nov 26, 2020 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
How to...
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Mottie @Philaine