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

Replace label on key #555

Closed
oz1cz opened this issue Apr 27, 2017 · 34 comments
Closed

Replace label on key #555

oz1cz opened this issue Apr 27, 2017 · 34 comments
Labels
Bug Demo How to...

Comments

@oz1cz
Copy link

oz1cz commented Apr 27, 2017

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

Mottie commented Apr 27, 2017 •
edited
Loading

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

oz1cz commented Apr 28, 2017

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. :-) )

@Mottie Mottie mentioned this issue May 5, 2017
Open
28 tasks
@andrewvharris
Copy link

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

@Mottie
Copy link
Owner

Mottie commented Apr 17, 2018 •
edited
Loading

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

andrewvharris commented Apr 17, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Apr 17, 2018 •
edited
Loading

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

clef

@andrewvharris
Copy link

andrewvharris commented Apr 18, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Apr 18, 2018 •
edited
Loading

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

andrewvharris commented Apr 19, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Apr 19, 2018

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.

Mottie added a commit that referenced this issue Apr 19, 2018
@Mottie
Core: Allow urls in display option. See #555
7aaf207
@Mottie
Copy link
Owner

Mottie commented Apr 19, 2018

I just made a change, not on the CDN yet, that will allow you to add an <img> inside the display option, so you won't need to add the images as a background:

display: {
  'halfQuarter': '<img src="https://upload.wikimedia.org/wikipedia/commons/0/03/QuarterRest.svg">'
}

You'll need to tweak the css a bit to get stuff to line up (demo). Also, I wouldn't recommend using that wikimedia url if you're planning on making the program work offline.

@Mottie
Copy link
Owner

Mottie commented Apr 19, 2018

Version 1.28.2 has been released with this change. It should be available on CDNJS soon.

@Mottie Mottie closed this as completed Apr 19, 2018
@Mottie Mottie removed the Version 2 label Apr 19, 2018
@andrewvharris
Copy link

It works brilliantly. Thank you so much

@andrewvharris
Copy link

andrewvharris commented Apr 20, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Apr 20, 2018

Within in the keyboard initialization, add a change callback which calls the do_resize() function (demo):

change: function () {
  do_resize();
}

@andrewvharris
Copy link

andrewvharris commented Apr 20, 2018 via email

@andrewvharris
Copy link

andrewvharris commented Apr 23, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Apr 23, 2018

Set the usePreview option to false.

@andrewvharris
Copy link

andrewvharris commented May 1, 2018 via email

@andrewvharris
Copy link

andrewvharris commented Jun 8, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Jun 8, 2018 •
edited by ghost
Loading

Very nice!

figure out now how to take the contents of the text area and compare it against a correct version

I think you should check out this code which checks and highlights the difference between two strings.

style the keyboard so that it, in fact, looks like a piano keyboard?

Yes, I have this demo on the wiki page that uses css absolute positioning to position the enter key, but in your case I think you could use the css from beautiful piano - here's a demo - but I'm not sure if you're going to include the black keys?

.ui-keyboard-button[class*="-A"],
.ui-keyboard-button[class*="-B"],
.ui-keyboard-button[class*="-C"],
.ui-keyboard-button[class*="-D"],
.ui-keyboard-button[class*="-E"],
.ui-keyboard-button[class*="-F"],
.ui-keyboard-button[class*="-G"] {
  background: linear-gradient(-30deg, #f5f5f5, #fff);
  box-shadow: inset 0 1px 0px #fff, inset 0 -1px 0px #fff,
    inset 1px 0px 0px #fff, inset -1px 0px 0px #fff,
    0 4px 3px rgba(0, 0, 0, 0.7);
  height: 100px;
  position: relative;
  margin: 2px 0 6px;
}

.ui-keyboard-button[class*="-A"]:active,
.ui-keyboard-button[class*="-B"]:active,
.ui-keyboard-button[class*="-C"]:active,
.ui-keyboard-button[class*="-D"]:active,
.ui-keyboard-button[class*="-E"]:active,
.ui-keyboard-button[class*="-F"]:active,
.ui-keyboard-button[class*="-G"]:active {
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  position: relative;
  top: 2px;
}

.ui-keyboard-button[class*="-A"]:active:before,
.ui-keyboard-button[class*="-B"]:active:before,
.ui-keyboard-button[class*="-C"]:active:before,
.ui-keyboard-button[class*="-D"]:active:before,
.ui-keyboard-button[class*="-E"]:active:before,
.ui-keyboard-button[class*="-F"]:active:before,
.ui-keyboard-button[class*="-G"]:active:before {
  content: "";
  width: 0px;
  height: 0px;
  border-width: 216px 5px 0px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0px;
  top: 0px;
}

.ui-keyboard-button[class*="-A"]:active:after,
.ui-keyboard-button[class*="-B"]:active:after,
.ui-keyboard-button[class*="-C"]:active:after,
.ui-keyboard-button[class*="-D"]:active:after,
.ui-keyboard-button[class*="-E"]:active:after,
.ui-keyboard-button[class*="-F"]:active:after,
.ui-keyboard-button[class*="-G"]:active:after {
  content: "";
  width: 0px;
  height: 0px;
  border-width: 216px 5px 0px;
  border-style: solid;
  border-color: transparent rgba(0, 0, 0, 0.1) transparent transparent;
  position: absolute;
  right: 0px;
  top: 0px;
}

I also cleaned up the $.keyboard.keyaction key settings in that demo.

@Mottie
Copy link
Owner

Mottie commented Jun 8, 2018

Also, have you seen this pianoKeyboard library? It doesn't looks like it works with ABC notation, but it looks nice. 😸

@andrewvharris
Copy link

andrewvharris commented Jun 14, 2018 via email

@andrewvharris
Copy link

andrewvharris commented Jun 14, 2018 via email

@andrewvharris
Copy link

andrewvharris commented Jun 14, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Jun 14, 2018

Oh? I was going to say yes, it is possible... but my OCD kicked in and I started working on it LOL

@andrewvharris
Copy link

andrewvharris commented Jun 14, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Jun 14, 2018

What about something like this? demo

@Mottie
Copy link
Owner

Mottie commented Jun 14, 2018

Oops, I forgot to fix the shifted keyset to make flats... but I think you get the idea.

@andrewvharris
Copy link

andrewvharris commented Jun 14, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Jun 14, 2018

LOL, and here's one with the black keys overlapping the white... demo.

@andrewvharris
Copy link

andrewvharris commented Jun 14, 2018 via email

@Mottie
Copy link
Owner

Mottie commented Jun 14, 2018

The demo is using the relative urls copied from the finaltest demo... I didn't bother changing them. It shouldn't alter the look on your web site.

@andrewvharris
Copy link

andrewvharris commented Jun 15, 2018 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
Bug Demo How to...
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Mottie @oz1cz @andrewvharris