Keyboard Generator is another app. in the Chordography series. This time the image is a musical keyboard. Images can be quickly generated and downloaded in a variety of formats. Or, you can use the JavaScript routines in your own web pages to generate charts on the fly.

The current graphic is Initially rendered directly as in-line svg code, so you can't copy it normally, as a regular image (right-clip and copy). But you can if you change the chart's format to png or jpeg (anything but xml). See the Format section, below, if you prefer to copy the chart as in-line svg code.

Image Generation

Span		Labels
Layout	uniform centred	Gloss	along across angled none
Style		Format

keyboard image goes here

Note: The generated image can fail to display in some browsers. If this happens, try a different format, disable your ad-blocker, or change your browser.  …more▶

SVG is well supported in modern browsers. However, rasterizing a cross-sourced svg image can lead to potential security issues. Although images generated locally, as above, should not be affected, some browsers err on the side of caution and refuse to display a rasterized svg image, whether generated locally or otherwise.

Resolution of these issues has improved of late, and rasterized images now display in many popular browsers, including Chrome, Firefox, Opera, and MS Edge, but alas not in Safari and IE in which only xml and svg format options display correctly.

The image is generated as a Scalable Vector Graphic (svg) from two text inputs (Span, Labels) and four drop-down selectors (Layout, Gloss, Style, Format). Click the Update button to implement any changes.

• Span is the keyboard span in octaves (default: 2). The default value is used if the text input is not a positive number.
• Labels specifies optional characters to display on the white keys. Up to seven characters repeat, one per white key, in each octave. Only those characters specified will be displayed. e.g. to display only C in each octave, change the labels input from "CDEFGAB" to "C". Blanks may replace any character.
• Layout determines how the black keys are spaced:  …more▶
  centred: the black keys are centred between adjacent white keys. While intuitively correct, this is not how practical keyboards are constructed as the width at the rear of white keys D, G and A would be unnecessarily restricted.
  
  uniform: ideally each of the five black keys should be one twelfth of an octave wide, and spaced to provide a similar width at the rear of each white key. However this is not possible with white keys of uniform width.
  The black keys are spaced to give a uniform width at the rear of the white keys, but independently in the two sections CDE and FGAB. As a result C, D and E are about one mm wider at the rear than F, G, A and B
• Gloss provides a pseudo 3D shine effect on the black keys. A white rectangle is superimposed with variable opacity, allowing the black to partially show through. Options none, along, across and angled vary the direction and position of the opacity gradient.
• Style offers a range of in-line styles to make the image self-contained, enabling it to be displayed without an external style-sheet. Choose none if you intend to use an external style-sheet with your svg image files, as in-line styles will take precedence.
• Format determines how the image is rendered. Initially generated as a Scalable Vector Graphic (svg), the image looks much the same whatever format is selected, so you may notice a difference only as you save it to a file:  …more▶
  Only old browsers should fail to render in line XML.

  xml The svg code is rendered directly as in line XML markup. This is the default format as it is the most reliable way to display a generated image. The downside is that saving the image is a little less simple than usual:
  

  1. right-click the image and select Inspect Element to open the Developer Console
  2. right-click the <svg> root element, and Copy to the clipboard
  3. paste the image code to Notepad and Save As an svg file (not as a txt file)

  svg The generated svg code is displayed as a regular HTML <img> element in which the generated svg code is converted into a pseudo URL using the Data URI scheme.
  

  Safari and IE both fail to display rasterized svg images due to potential security issues

  png, jpeg, bmp, gif, etc. The svg code is converted into a non-scalable raster format and displayed as a regular HTML <img> element. Which raster formats are available varies with the browser, but usually includes png and jpeg. As for svg above, the image code has to be converted into a pseudo URL.

Adding style

In line styles take precedence over style sheets.

Rather than use one of the pre-defined in line styles, you may prefer to give your images a more customised look with your own style sheet. In that case you will need to select style = none and add an internal or an external style sheet. …more▶

Image elements are arranged in groups, and each group is given a CSS class. The main <svg> element is assigned the class keyboard; white keys, black keys, labels and gloss elements are assigned classes whites, blacks, labels and gloss respectively. A minimal style-sheet would need to include something like:

svg.keyboard .whites{fill: white; stroke: grey;)
svg.keyboard .labels{fill: black; font-family: Arial, sans-serif;}

This is all of the style used for the in-line option style = default. The option style = red is only slightly more elaborate:

svg.keyboard .whites{fill: #ffa; stroke:grey;}
svg.keyboard .blacks{fill: #700;}
svg.keyboard .labels{fill: black; font-family: Arial, sans-serif;}

Roll your own

Rather than save your images to file, you can also use Keyboard Generator's JavaScript code to generate and render svg images dynamically in your own web-pages. This would allow you full control of the image geometry and style (lines, fills, fonts etc.). You will need to download the source code, and provide a reference link to it in your HTML <head> section ...more▶

The code comprises a single JavaScript function, keyboard(placeholder,udi):

• placeholder is a document node that relates to an initially empty <svg> element placed at the required image location.
• udi is an optional data object used to modify the image geometry etc. (see below):

Typically, your HTML <body> element would contain the empty svg element e.g.:

<svg id="myKeyboard">image goes here</svg>

You then add some JavaScript to create the placeholder node from the svg element's id and the keyboard() function does the rest:

var placeholder = document.getElementById("myKeyboard");
keyboard(placeholder);

User Data Input

udi may be an empty object {}, or it may be omitted completely.

User Data Input (udi) is an optional object parameter that provides full access to the Graphic Object Data (god). Any valid property name:value pair in udi will modify the corresponding value in god e.g. udi = {span:7, layout:false} would extend the image span to seven octaves and centre the black keys; all unmodified god properties retain their default values shown in the table below.

Graphic Object Data default values

Name	Value	Description
keyWidth	24	White key width, px
keyHeight	150	White key height, px
blackWidth	14	Black key width, px
blackHeight	100	Black key height, px
maxWidth	600	max. diagram width, px
radius	4	Key corner radius, px
span	2	Keyboard span, octaves
labels	""	No white key labels
layout	"uniform"	Uniform black keys
gloss	"none"	No 3D gloss effect
style	""	No in-line styles

Image geometry

An octave is typically about 165 mm wide on a full-size piano.

Default image geometry is based on an octave width of 168 screen pixels, a convenient size divisible by both 7 and 12 to give whole number key-widths. Default key lengths are scaled in proportion and rounded to the nearest pixel. Feel free to change the geometry, but be careful to keep things in proportion or the image won't look right. The width and height of the image are scaled down if the overall width would otherwise exceed maxWidth set, by default, at 600 pixels.

And finally...

This software (images and/or source code) is provided free of charge, licence fees or royalties, and without warranty. You may link to it, download it, redistribute it and/or modify it under the terms of the GNU General Public License.
The code is minified which makes it load more quickly, but more difficult to reverse-engineer. Ideas on how it might be improved are very welcome.