Keyboard

A highly customizable virtual MIDI keyboard. To change the key colours, see Engine.setKeyColour() .

ID	Default Value	Description
`Font`	Oxygen Bold	Set the font type.
`FontSize`	14.0	Set the font size.
`CustomGraphics`	`false`	If true, it looks in the{IMAGE_FOLDER} Images/keyboard/ for keyboard imagefiles called up_0.png ... to up_11.png and down_0.png to down_11.png. The files have to be present to render the whole keyboard.
`KeyWidth`	14	Set the width of the keys.
`LowKey`	9	The lowest visible key as MIDI note number (C2 = 48).
`HiKey`	127	Set the highest key to display - no need to change that actually :)
`BlackKeyRatio`	0.7	Change the relative height of the black keys
`DefaultAppearance`	`true`	Set this to false to use custom graphics
`DisplayOctaveNumber`	`false`	Show the OctaveNumbers C-2 - C7 on each C key
`ToggleMode`	`false`	Set to true, to let the keys stick down.
`MidiChannel`	1	Connect the keyboard to a MidiChannel, defaults to 1
`MPEKeyboard`	`false`	If the MPE mode is enabled, this keyboard will show a MPE style keyboard with multi touch support.
`MPEStartChannel`	2	Set the MPE Start Channel
`MPEEndChannel`	16	Set the MPE End Channel
`UseVectorGraphics`	`true`	Toggle between the (old) filmstrip and the new vector based keyboard
`UseFlatStyle`	`false`	If VectorGraphics are activated you can change this value for a flat keyboard

CSS Styling

The MIDI keyboard can also be styled using the new CSS renderer in HISE. You can use animations, shadows & all nice CSS things to make a pretty keyboard. If you want to do so:

Make sure the CustomGraphics property is set to false.
Disable DefaultAppearance to be able to resize the keys.
Setup the KeyWidth and BlackKeyRatio properties to match your desired proportions
Assign a CSS LookAndFeel to this floating tile and define the style.

This is an example JSON property set which looks good with CSS.

{
  "KeyWidth": 18.0,
  "DisplayOctaveNumber": false,
  "LowKey": 24,
  "HiKey": 127,
  "CustomGraphics": false,
  "DefaultAppearance": false,
  "BlackKeyRatio": 0.6,
  "ToggleMode": false,
  "MidiChannel": 1,
  "UseVectorGraphics": true,
  "UseFlatStyle": false,
  "MPEKeyboard": false,
  "MPEStartChannel": 2,
  "MPEEndChannel": 16
}

Note that the CSS renderer will apply an additional margin of 10px to the black key area. This is so that you can render shadows properly that would otherwise be truncated by the bounding box.

Class Selectors

In CSS, the following class selectors are available:

.keyboard - use this to draw the background behind the keys.
.whitekey - this is used to render every white key.
.blackkey - this is used to render every black key.

Pseudo Elements & States

You can use the ::before and ::after pseudo elements for additional customizations for each key. It also supports these pseudo states:

:hover - this is used when the user hovers over the key
:active - this is used when a key is pressed down

Variables

There are a few additional variables that you can use in the CSS stylesheet:

keyColour - this will be either transparent or the colour defined with Engine.setKeyColour() for each key.
noteName - this will be a non-empty string containing the label for each C note (eg. "C2").

CSS Example

This is an example stylesheet for a noice keyboard that you can use as starting point for your custom CSS. Make sure you use the JSON property set from above to make it look as shown in the screenshot - all dimension properties should be relative so this should scale OKish with different proportions, but you might adapt it a bit.

/** CSS Stylesheet for the MIDI keyboard. */

/** Render the background. */
.keyboard
{
	background: red;
}

/** The class for the white key. */
.whitekey
{
	/** noteName will contain the C name if applicable. */
	content: var(--noteName);
	background: #eef;
	margin: 5% 5%;
	margin-bottom: 10%;
	border-radius: 2px;
	transition: margin 0.1s;
	transition: border-color 0.1s;
	box-shadow: none;
	vertical-align: bottom;
	font-size: 10px;
	padding-bottom: 3px;
	color: #666;
	border: 1px solid rgba(255,255,255,0.7);
}

/** This renders the key color overlay. */
.whitekey::after
{
	content: '';
	background-color: color-mix(in rgb, var(--keyColour) 60%, transparent);
	border-radius: 2px;
}

/** The hover state for the white key. */
.whitekey:hover
{
	background: white;
}

/** This renders the bottom element of the white key. */
.whitekey::before
{
	content: '';
	background: linear-gradient(to bottom, #333, #000);
	position: absolute;
	bottom: 0px;
	height: 8%;
	margin: 5%;
	border-radius: 15%;
	transition: bottom 0.05s;
}

/** The pressed state. */
.whitekey:active
{
	margin-bottom: 5%;
	background-color: linear-gradient(to bottom, #eef, #dde);
	box-shadow: inset 0px 2px 10px rgba(0, 0, 0, 0.3);
	border-color: transparent;
}

/** The first key. Could be used for additional shadows, but doesn't work. */
.whitekey:first-child
{
	background: red !important;
}

/** When pressed, the side element should be pushed down too. */
.whitekey::before:active
{
	bottom: -5%;
	background-color: #111;
}

/** Now the black keys. */
.blackkey
{
	background: #222;
	border-radius: 5%;
	
	border-width: 10px 4px;
	border-color: red;
	border-style: solid;
	
	transition: margin-top 0.1s;
	margin: 10px;
	box-shadow: 0px 3% 10% rgba(0, 0, 0, 0.5);
}

.blackkey:active
{
	margin-top: 12px;
}

/** This renders the "top surface" of the black key. */
.blackkey::before
{
	content: '';
	margin: 20%;
	/** Move it up to create a pseudo 3D effect. */
	margin-bottom: 20%;
	margin-top: 3%;
	transition: margin-bottom 0.1s;
	transition: background-color 0.1s;
	background: linear-gradient(to top, #363636, #282828);
	border-radius: 5%;
}


/** When pushed down we brighten it up and remove the bottom margin
    Note that this isn't 100% realistic but it enhances the visibility
    of the pressed black state. 
*/
.blackkey::before:active
{
	background: linear-gradient(to top, #404040, #363636);
	margin-bottom: 6px;
	
}

/** We'll use the after element for the colour overlay again. */
.blackkey::after
{
	content: '';
	margin: 1px;
	background-color: color-mix(in rgb, var(--keyColour) 20%, transparent);
	border-radius: 2px;
}

Edit on GitHub Next: PerformanceLabel

Christoph Hart