Replace label on key

[oz1cz]

Is there any way to replace the label on a character key with an image?

I'm trying to create a classical Hebrew keyboard, and some of the vowel characters are so small that they are almost impossible to view in any reasonable font size. So for some of those characters, I would like to display a small image on the key button instead of the actual character.

Is this possible with the current code?

[Mottie]

Hi @oz1cz!

There are two ways to add an image to the key... (demo)

Add a background image to the specific key. In this example, the α (alpha) key is targeted using it's unique class name based on it's decimal ascii value (945, also known as 03B1 in hex):

/* target greek letter alpha */
.ui-keyboard-945 span {
  /* keyboard icon used in this example */
  background: url(css/images/keyboard.png) center center no-repeat;
  display: block;
  width: 30px;
  /* hide key text */
  text-indent: -999em;
}
/* needed for inline image (second method below) */
.ui-keyboard-button {
  vertical-align: middle;
}

And a second, bit more complex method - I really need to fix it - is to make an action key, then set the display value to be an image.

I just found out that including http:// in the image URL breaks the url inside the image, so I'll need to fix that in the next update.

// making an action key, it needs an action
$.keyboard.keyaction['β'] = 'β';

$('#keyboard2').keyboard({
  layout: 'custom',
  customLayout: {
    // wrap the key in curly brackets to make it
    // an action key
    'default': ['α {β}']
  },
  display: {
    // including a colon in the url breaks the image :(
  	'β': '<img src="css/images/keyboard.png">'
  }
});

[oz1cz]

Thank you, @Mottie, the CSS-based solution works very nicely for me!

(Using "text-indent: -999em" to hide the original key text was an eye-opener. :-) )

[andrewvharris]

Thanks for this. Unfortunately I am not knowledgeable enough to be able to make this work.

[Mottie]

Hi @andrewvharris!

Did you look at the demo from my first response? Adding an image in the display option doesn't work correctly at this time, but adding it as a background image in CSS will work. Where are you having issues? If the background image is too big, you may not see it, be sure to include a background-size: cover to shrink it down.

[andrewvharris]

Hello Rob I did look at the demo, which is exactly what I need but I just don't have a great enough understanding of where the CSS and Script etc should go and how they should be configured to get the working. I am basically trying to make a keyboard with musical notes on that will produce a letter or symbol (£) so that I can use it will ABCJ notation. I am going to need to learn a lot more before I can do it. Cheers Andrew Andrew Harris

…

________________________________ From: Rob Garrison <notifications@github.com> Sent: 17 April 2018 14:27 To: Mottie/Keyboard Cc: Andrew Harris; Mention Subject: Re: [Mottie/Keyboard] Replace label on key (#555) Hi @andrewvharris<https://github.com/andrewvharris>! Did you look at the demo from my first response? Adding an image in the display doesn't work correctly, but adding it as a background image in CSS will work. Where are you having issues? If the background image is too big, you may not see it, be sure to include a background-size: cover<https://developer.mozilla.org/en-US/docs/Web/CSS/background-size> to shrink it down. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#555 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AkeVjNiIPZcgCfPlUb28-_cRrGIy2XPlks5tpe26gaJpZM4NKTfH>.

[Mottie]

Oh, well I think most musical symbols are included within unicode, so all you really would need is the unicode codepoint.

If you look in the demo I shared with you through email - copied to jsbin to show all the necessary code in the HTML panel - you'll see 'default': '\u{1d11e}:ABC_Music_Notation' added to the display setting. The \u{1d11e} portion is adding a "MUSICAL SYMBOL G CLEF" to the key using javascript unicode notation (\u{xxxx}); the "ABC_Music_Notation" portion becomes the tooltip (hover over the key to see it).

If you want to use an image, then I've updated the jsfiddle demo as follows (click the "ABC" button to switch layouts):

Script

// not really necessary, but changed to a space to not add any content
'default': ' :ABC_Music_Notation'

CSS

.ui-keyboard-default span {
  background-size: cover;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,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");
}

The following background image was reduced in size using https://tinypng.com/ and then converted into a data-uri using http://duri.me/.

[andrewvharris]

Hello Rob The link you sent me (http://jsbin.com/pawiyejupi/edit?html,output) looks much more understandable to me and is really helpful so thank you very much for that. I changed the key letters to musical symbols by cutting and pasting in from the Unicode library on Wikipedia. Is it possible to map the output of a key so that for example pressing one that shows [quarter rest] <https://en.wikipedia.org/wiki/File:QuarterRest.svg> on the key will produce "z1" in the textarea? Thanks again for your help with this, I'm learning fast Andrew [http://static.jsbin.com/images/logo.png]<http://jsbin.com/pawiyejupi/edit?html,output> JS Bin<http://jsbin.com/pawiyejupi/edit?html,output> jsbin.com A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more... Andrew Harris

…

________________________________ From: Rob Garrison <notifications@github.com> Sent: 17 April 2018 15:40 To: Mottie/Keyboard Cc: Andrew Harris; Mention Subject: Re: [Mottie/Keyboard] Replace label on key (#555) Oh, well I think most musical symbols are included within unicode<https://en.wiktionary.org/wiki/Appendix:Unicode/Musical_Symbols>, so all you really would need is the unicode codepoint. If you look in the demo I shared with you through email - copied to jsbin<http://jsbin.com/pawiyejupi/edit?html,output> to show all the necessary code in the HTML panel - you'll see 'default': '\u{1d11e}:ABC_Music_Notation' added to the display setting. The \u{1d11e} portion is adding a "MUSICAL SYMBOL G CLEF"<http://unicode.org/cldr/utility/character.jsp?a=1D11E> to the key using javascript unicode notation<https://mathiasbynens.be/notes/javascript-escapes#unicode-code-point> (\u{xxxx}); the "ABC_Music_Notation" portion becomes the tooltip (hover over the key to see it). If you want to use an image, then I've updated the jsfiddle demo<http://jsfiddle.net/Mottie/gtemw9y2/7/> as follows: Script // not really necessary, but changed to a space to not add any content 'default': ' :ABC_Music_Notation' CSS .ui-keyboard-default span { background-size: cover; display: inline-block; width: 20px; height: 20px; background-image: url(" data:image/png;base64,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"); } The following background image was reduced in size using https://tinypng.com/ and then converted into a data-uri using http://duri.me/. [clef]<https://user-images.githubusercontent.com/136959/38877010-58d817c2-4223-11e8-9de6-f8030b62a8b9.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#555 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AkeVjIvvgM3IDkEGgh9GCipogJH7NXREks5tpf7vgaJpZM4NKTfH>.

[Mottie]

In this example, we'll add an action key named {halfQuarter} (name it anything you want, but use the same name throughout the JavaScript and CSS).

1. First we'll define the key action - this is the text you see after clicking the key.
2. Then add it to the customLayout as {halfQuarter}.
3. Set it's display to a space
4. Define the background image in the css:

• I clicked on the half quarter svg image on the wikipage and was taken to a page with only the svg showing.
• Then go to https://dopiaza.org/tools/datauri/index.php, click on "Retrieve file from a URL" radio option.
• Leave "Use base64 encoding" checked.
• Click on "Generate Data URI".
• Copy the data URI from the resulting input.
• Paste the data URL inside the quotes of background-image: url('') in the CSS

$(function() {

	$.keyboard.keyaction.halfQuarter = 'z1';

  $('#keyboard').keyboard({
      layout: 'customLayout',
      customLayout: {
        'default': [
          '{halfQuarter}'
        ]
      },
      display: {
        'halfQuarter': ' '
      }
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });

});

CSS

.ui-keyboard-halfQuarter span {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgo8c3ZnCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4wIgogICB3aWR0aD0iMTIiCiAgIGhlaWdodD0iMjUiCiAgIGlkPSJzdmcxMzYxIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTM2MyIgLz4KICA8ZwogICAgIGlkPSJsYXllcjEiPgogICAgPGcKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzUuNzE5LC01NzIuMDA1KSIKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgICBpZD0iZzMwMDgiPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDE4MS42OTkwOSw1ODguNzYzOTggQyAxODIuNDczNjIsNTg5LjA4OTg4IDE4Mi4zNzk3LDU5MC40NjQ4MSAxODEuNDIzNzEsNTg5LjgwMjYxIEMgMTgwLjcwNjQ0LDU4OC45MTM1NCAxNzkuMzM4MzEsNTg4LjE0NDgxIDE3OC4zNDA5Myw1ODkuMTExNTUgQyAxNzcuNTEzOSw1ODkuODc3NiAxNzcuNzg2OTQsNTkxLjI3MDIzIDE3OC43MTYwOSw1OTEuODE1MDkgQyAxNzkuMzcwNDQsNTkxLjk0ODkzIDE3OS44NjczMiw1OTMuMDU3MDQgMTc4Ljc5NTE4LDU5Mi42NDIgQyAxNzcuMjUwMTUsNTkyLjExNTQzIDE3NS42MDA2Miw1OTAuNzkxNzYgMTc1LjcyNTcsNTg4Ljk5OTg1IEMgMTc1LjcwMjYxLDU4Ny43Nzg3IDE3Ni45NTc3LDU4Ny4wMjE3NSAxNzguMDcyMDksNTg3LjEwNiBDIDE3OC41MjAxMyw1ODYuOTQ1NTUgMTc5Ljc1ODI0LDU4Ny41ODYzMiAxNzkuNzAyNTEsNTg3LjMwMjUzIEMgMTc4Ljk0OTIxLDU4Ni4xNDU1MyAxNzguMDg5NTcsNTg1LjA1MTI2IDE3Ny40MTUwOSw1ODMuODQ3NjIgQyAxNzcuMTc2NjEsNTgzLjEyMDc4IDE3Ny42OTk0Miw1ODIuNDI5MDUgMTc3LjkxOTksNTgxLjc1MDIgQyAxNzguMzk5NjcsNTgwLjU1MzEzIDE3OC45MzYzNiw1NzkuMzc2NTEgMTc5LjM3NDA5LDU3OC4xNjQzOCBDIDE3OS40MTUyNSw1NzcuNDE4MDEgMTc4Ljc1MjQ5LDU3Ni44ODkxMiAxNzguNDA5MTQsNTc2LjI3NzIgQyAxNzguMDExNTMsNTc1LjY0MzM0IDE3Ny40OTE2OSw1NzUuMDczMDkgMTc3LjIwMjA5LDU3NC4zODIyNSBDIDE3Ny4yMjIyNSw1NzMuNTA0NTUgMTc4LjEzMDEyLDU3NC40ODU5NiAxNzguMzc2MzcsNTc0Ljg0MzkzIEMgMTc5LjQ1MDM2LDU3Ni4xMTgzMiAxODAuNTc5NDUsNTc3LjM0OTA2IDE4MS42MTUwOSw1NzguNjUzODMgQyAxODIuMzA3NDksNTc5LjQ5NzMgMTgxLjY2MTU4LDU4MC40ODUyNSAxODEuMzI1ODEsNTgxLjMyNzM0IEMgMTgwLjgyNzM1LDU4Mi41ODMwOSAxODAuMTkwMzMsNTgzLjc5MTY3IDE3OS44MjQwOSw1ODUuMDkzMjMgQyAxNzkuNzc2MzksNTg2LjE2NDYgMTgwLjU2MDMsNTg3LjA1MTg1IDE4MS4wNjM0Niw1ODcuOTQwNjIgQyAxODEuMjU2ODUsNTg4LjIyODgzIDE4MS40NzI4Miw1ODguNTAxMTIgMTgxLjY5OTA5LDU4OC43NjM5OCB6ICIKICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MSIKICAgICAgICAgaWQ9InBhdGgzMDEwIiAvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==');
}

[andrewvharris]

Hello Rob The example<http://jsfiddle.net/egb3a1sk/4379/> you sent is exactly it. So if I may ask one last (probably pretty dumb question) before I leave you alone and make it work. In order to get this to work I will need to upload and extract all the dependencies from the Mottie Keyboard depository into a directory and then make sure that the html page I generate points to them. The code from each area of the example you linked (the CSS, HTML and Java) then all go in that html page inside the correct tags ? Thanks for your patience and help. I will be able to achieve what I am now trying to get done thanks to you All the best Andrew Andrew Harris

…

________________________________ From: Rob Garrison <notifications@github.com> Sent: 18 April 2018 16:41 To: Mottie/Keyboard Cc: Andrew Harris; Mention Subject: Re: [Mottie/Keyboard] Replace label on key (#555) In this example<http://jsfiddle.net/egb3a1sk/4379/>, we'll add an action key named {halfQuarter} (name it anything you want, but use the same name throughout the JavaScript and CSS). 1. First we'll define the key action 2. Then add it to the customLayout as {halfQuarter} 3. Set it's display to a space 4. Define the background image in the css: * I clicked on the half quarter svg image on the wikipage and was taken to a page with only the svg showing. * Then go to https://dopiaza.org/tools/datauri/index.php, click on "Retrieve file from a URL" radio option. * Leave "Use base64 encoding" checked. * Click on "Generate Data URI". * Copy the data URI from the resulting input. * Paste the data URL inside the quotes of background-image: url('') in the CSS $(function() { $.keyboard.keyaction.halfQuarter = 'z1'; $('#keyboard').keyboard({ layout: 'customLayout', customLayout: { 'default': [ '{halfQuarter}' ] }, display: { 'halfQuarter': ' ' } }) // activate the typing extension .addTyping({ showTyping: true, delay: 250 }); }); CSS .ui-keyboard-halfQuarter span { width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-position: center center; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgo8c3ZnCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4wIgogICB3aWR0aD0iMTIiCiAgIGhlaWdodD0iMjUiCiAgIGlkPSJzdmcxMzYxIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTM2MyIgLz4KICA8ZwogICAgIGlkPSJsYXllcjEiPgogICAgPGcKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzUuNzE5LC01NzIuMDA1KSIKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgICBpZD0iZzMwMDgiPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDE4MS42OTkwOSw1ODguNzYzOTggQyAxODIuNDczNjIsNTg5LjA4OTg4IDE4Mi4zNzk3LDU5MC40NjQ4MSAxODEuNDIzNzEsNTg5LjgwMjYxIEMgMTgwLjcwNjQ0LDU4OC45MTM1NCAxNzkuMzM4MzEsNTg4LjE0NDgxIDE3OC4zNDA5Myw1ODkuMTExNTUgQyAxNzcuNTEzOSw1ODkuODc3NiAxNzcuNzg2OTQsNTkxLjI3MDIzIDE3OC43MTYwOSw1OTEuODE1MDkgQyAxNzkuMzcwNDQsNTkxLjk0ODkzIDE3OS44NjczMiw1OTMuMDU3MDQgMTc4Ljc5NTE4LDU5Mi42NDIgQyAxNzcuMjUwMTUsNTkyLjExNTQzIDE3NS42MDA2Miw1OTAuNzkxNzYgMTc1LjcyNTcsNTg4Ljk5OTg1IEMgMTc1LjcwMjYxLDU4Ny43Nzg3IDE3Ni45NTc3LDU4Ny4wMjE3NSAxNzguMDcyMDksNTg3LjEwNiBDIDE3OC41MjAxMyw1ODYuOTQ1NTUgMTc5Ljc1ODI0LDU4Ny41ODYzMiAxNzkuNzAyNTEsNTg3LjMwMjUzIEMgMTc4Ljk0OTIxLDU4Ni4xNDU1MyAxNzguMDg5NTcsNTg1LjA1MTI2IDE3Ny40MTUwOSw1ODMuODQ3NjIgQyAxNzcuMTc2NjEsNTgzLjEyMDc4IDE3Ny42OTk0Miw1ODIuNDI5MDUgMTc3LjkxOTksNTgxLjc1MDIgQyAxNzguMzk5NjcsNTgwLjU1MzEzIDE3OC45MzYzNiw1NzkuMzc2NTEgMTc5LjM3NDA5LDU3OC4xNjQzOCBDIDE3OS40MTUyNSw1NzcuNDE4MDEgMTc4Ljc1MjQ5LDU3Ni44ODkxMiAxNzguNDA5MTQsNTc2LjI3NzIgQyAxNzguMDExNTMsNTc1LjY0MzM0IDE3Ny40OTE2OSw1NzUuMDczMDkgMTc3LjIwMjA5LDU3NC4zODIyNSBDIDE3Ny4yMjIyNSw1NzMuNTA0NTUgMTc4LjEzMDEyLDU3NC40ODU5NiAxNzguMzc2MzcsNTc0Ljg0MzkzIEMgMTc5LjQ1MDM2LDU3Ni4xMTgzMiAxODAuNTc5NDUsNTc3LjM0OTA2IDE4MS42MTUwOSw1NzguNjUzODMgQyAxODIuMzA3NDksNTc5LjQ5NzMgMTgxLjY2MTU4LDU4MC40ODUyNSAxODEuMzI1ODEsNTgxLjMyNzM0IEMgMTgwLjgyNzM1LDU4Mi41ODMwOSAxODAuMTkwMzMsNTgzLjc5MTY3IDE3OS44MjQwOSw1ODUuMDkzMjMgQyAxNzkuNzc2MzksNTg2LjE2NDYgMTgwLjU2MDMsNTg3LjA1MTg1IDE4MS4wNjM0Niw1ODcuOTQwNjIgQyAxODEuMjU2ODUsNTg4LjIyODgzIDE4MS40NzI4Miw1ODguNTAxMTIgMTgxLjY5OTA5LDU4OC43NjM5OCB6ICIKICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MSIKICAgICAgICAgaWQ9InBhdGgzMDEwIiAvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=='); } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#555 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AkeVjAiaY9Brk2OWrPgXkt2-k3sCUFPnks5tp17CgaJpZM4NKTfH>.

[Mottie]

The code from each area of the example you linked (the CSS, HTML and Java) then all go in that html page inside the correct tags ?

Yes. But this is JavaScript. Java is a completely different language.

You don't really need to download all the files unless you plan to use it offline; but if you want, the whole package isn't that big. Download the zip file of the current build, extract and save the files to your hard drive somewhere. Then, make sure to point to the necessary files in the HTML. You'd need to repeat this process for any updates.

If you're planning on using the files online, then I would recommend pointing the js and css to cdnjs - it's a content delivery network so it will provide the needed files quickly. You'll need to manually change the links for any updates.