Different-colored keys?

[lassik]

Would you accept a feature to assign different colors to depressed keys? E.g. some of the depressed keys would be green, some red, and the remaining non-depressed keys would be black/white. Something like:

type alias Color = String
notes : Set.Set Note
noteColor : Note -> Color

Or:

notes : Dict.Dict Note Color

[cript0nauta]

Hi @lassik! It seems to be a really nice feature to have. Now the color of the keys is hardcoded inside the CSS, but it would be great to control both pressed and unpressed keys colors from the model instead.

I think having a colorOverrides : Dict.Dict Note Color dict in the model would be a better approach than having a function, since it would be more extensible and because having a function in a model is not so common as having a dict.

If you wanted to use it with a function, you could do this when updating the model:

colors =
    List.range 0 127 -- MIDI note numbers
    |> List.map (\note -> (note, noteColor note) )
    |> Dict.fromList

newPianoModel = { pianoModel | colorOverrides = colors }

To check if each key is pressed or unpressed you could check if the note number is member of the pianoModel.notes.

I'm a bit busy this days to code it, but I'll probably have some free time in a couple of weeks to give a look to this. Pull Request are also welcome :P

[cript0nauta]

Hi again! Sorry for the delay. I have been working on this feature, it seems to be finished now but I would like some feedback before publishing.

I changed the approach a bit, but it is basically the same idea: having a dict allowing the users of the library to override the colors of some notes. I used the native Color type to specify the color.

If you still interested, you could review this changes. The files examples/Basic.elm and examples/PlayMIDI.elm (this last one should be used with the examples/playmidi.html file) show a simple and a more complex way of using custom colors.

To correctly run the PlayMIDI example you have to clone the repo https://github.com/mudcube/MIDI.js into the directory examples/bower_components/midi and to run elm-make examples/PlayMIDI.elm --output examples/PlayMIDI.js. (I know I should improve this process :P).

Let me know if you have any problems or suggestions.