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.
<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'
/>
Props flagged with
*
Are mandatory
-
labels
: BooleanDisplays key labels on the white keys if set
true
Default : true
-
half
: BooleanMakes a scale of standard seven white keys if value is
true
. Otherwise the Scale will consist of7 + 3
white keys.Default : true
-
start
: String -or- CharStarts 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 pressed1
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 ahalf
scale with7
white keys, and17
for afull
scale with10
white keysDefault : [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
-
color_black
: StringWill set the pressed black keys to be the color passed to this parameter.
Default :
#AA0044
-
color_white
: StringWill set the pressed white keys to be the color passed to this parameter.
Default :
#FF0055
-
width
* : StringSets 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