Dynamic Scale

This repository exports a react component which will render a piano scale with variable parameters as input. It is highly customisable. It is generated dynamically by passing as props the required parameters using html <svg> component.

The component is bundled into an NPM package using rollup

Visit the website https://dynamic-scale-frontend.vercel.app/ to customize the component and obtain the code for the same.

Example Screenshots

Scale functional Component

<Scale /> will be an independent standalone function that will genereate the required piano scale using all the input parameters

<Scale
    labels = true
    half = false
    start = 'C'
    pressed = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    color_black = '#AA0044' 
    color_white = '#FF0055'
    width = '600px'
/>

All Props and Types:

Props flagged with * Are mandatory

labels : Boolean

Displays key labels on the white keys if set true

Default : true

half : Boolean

Makes a scale of standard seven white keys if value is true. Otherwise the Scale will consist of 7 + 3 white keys.

Default : true

start : String -or- Char

Starts the scale with the character that is passed as the parameter to be the first key of the scale. Note that only the notations for white keys may be passed. As starting key should always be white. The preceeding or succeeding black key if present will be visible with half of it displayed.

Default : "C"

Accepted Values : ['C', 'D', 'E', 'F', 'G', 'A', 'B']

pressed : Array [12 | 17]

Higlights the keys which are to be shown as pressed, with the color passed to the color_white and the color_black parameters.
The Array will contain position of the keys to be pressed starting from the white key which was set to the start parameter. 0 for the key which should not be pressed 1 for the key to be pressed and so on. The numbers are going to be the respective position of the said key from the start key. Whatsoever key position is present in the array, will be highlited in color.

Note that the size of the array should be 12 for a half scale with 7 white keys, and 17 for a full scale with 10 white keys

Default : [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

color_black : String

Will set the pressed black keys to be the color passed to this parameter.

Default : #AA0044

color_white : String

Will set the pressed white keys to be the color passed to this parameter.

Default : #FF0055

width * : String

Sets the width of the finally rendered component. This parameter corresponds to a in-line jsx width.

Frontend of the Scale Maker is linked here https://github.com/amrutwali/dynamic-scale-frontend