search

NYUMusEdLab / notio

Notio - A music theory learning React App that runs in the browser
https://nyumusedlab.github.io/notio/
Creative Commons Attribution Share Alike 4.0 International
1 stars 0 forks source link

#4[Menu / Custom Mode] : Color menu #14

Closed granfors closed 2 years ago

granfors commented 4 years ago

Specification

[NEED UPDATES] notio color menu.pdf

possible to choose : Notio colors Black & White Custom

under custom meny it is possible to choose colours for each step attached file for example in meny

notio_05_custom

Technical Solution

I will use this color picker : https://www.npmjs.com/package/react-color 13 possible widgets :

giphy

ezawadzki commented 4 years ago

Hi @granfors !

Yes for notio colors (currently rainbow) and to add black and white.

For custom, it's more complicated because it's depends on scale.

So, it's preferable to suggest pre-build "sets" of colors.

Does this menu has effects on Root circle also ?

granfors commented 4 years ago

Hi @ezawadzki it would only have effect on the Root circle not on the scale . So the custom should not be connected to scales. We would also like a chromatic mode where it would be possible to see all the colors. So Notio mode, Black & White, Chromatic and Custom. the custom mode is for users to be able to create scales that do not exist . Great work with the app ! it think it is going to be great!

ceciliabjork commented 4 years ago

@ezawadzki The chromatic mode is especially important because it allows the teacher to show how small changes (e.g., only one note) leads to a different scale sound. Could we make the chromatic mode toggle as easily available as possible and visible even if the rest of the menu is not visible? A tiny switch?

ceciliabjork commented 4 years ago

@ovaom @ezawadzki So, in addition to the scales that are already in the menu:

For the custom mode, we would love to have a possibility for the user also to customize the colours (maybe by dragging colours from a menu). This can come later!

granfors commented 4 years ago

@ezawadzki @ceciliabjork @ovaom More info about the custom mode : Custom mode.pdf

granfors commented 3 years ago

@ezawadzki @ceciliabjork @ovaom Hi one detail about the scale steps in the custom meny is that we have to be able to choose if we want sharp # or flat b. In some custom scales we would like to use both. so we have to be able to choose between #2 or b3 .

granfors commented 3 years ago

Screen Shot 2021-02-25 at 14 30 12

@ezawadzki @ceciliabjork @ovaom

We need this function in custom mode. To be able to choose f.ex either #2 or b3. Please have a look at the drawing. This also makes it possible to construct the chromatic scale and share it like a preset under the scale menu..... I hope i explained this in a good way

ezawadzki commented 3 years ago

@ceciliabjork @granfors if a teacher want to creates his own scale, for example three notes in xylo, if they activate the keyboard, it would be a bit strange. What do you think about that ?

ovaom commented 3 years ago

@ceciliabjork @granfors

Screen Shot 2021-02-25 at 14 30 12

@ezawadzki @ceciliabjork @ovaom

We need this function in custom mode. To be able to choose f.ex either #2 or b3. Please have a look at the drawing. This also makes it possible to construct the chromatic scale and share it like a preset under the scale menu..... I hope i explained this in a good way

@ceciliabjork @granfors @ezawadzki Maybe I think I understood ;) Here is a proposal : once you click on a "double notation", the color sample and two radio buttons appears. A default notation is selected (for example 4 sharp on the wireframe), you can change this by clicking on the radio button (5 flat). Is that what you'd like ? notio_menu9_cutom_00

ceciliabjork commented 3 years ago

@ceciliabjork @granfors if a teacher want to creates his own scale, for example three notes in xylo, if they activate the keyboard, it would be a bit strange. What do you think about that ? @ezawadzki We think that the solution is to have "Show notes that are not in scale" as default (so, no toggle) and let go of any other visualisations. That way, the piano can stay off or on no matter how many notes there are in the scale.

ceciliabjork commented 3 years ago

@ovaom @ezawadzki @granfors We are thinking about tiny radio buttons and big fingers, especially on a phone... Here's an idea - and apologies for the tipp-ex and awful drawing! - that would leave more space between the squares. @UxMajors would you like to comment on this? :)

Please note 1) that we added a square for 1, after all, because we think some users may want to make exercises where they custom the xylophone without the DO 2) that we now put the #1 at the bottom and b2 at the top, etc, inspired by your idea. Do we still have just a few millimeters left to have as much room horisontally between the squares as possible?
3) that we put in a triangle instead of Maj before the last 7. It's the same as on the xylophone, and it can still be Maj on the menu - remember, we used Maj just to get rid of the triangle that looked like an arrow, but here it doesn't matter. image

UxMajors commented 3 years ago

Hello @ovaom @ceciliabjork @granfors @ezawadzki !

I would avoid all kind of tiny target areas such as radio buttons. Make the target area bigger by grouping the items. Here is a suggestion on how to make it more user friendly.

notio suggestion

UxMajors commented 3 years ago

the darker box indicates the one that is selected / active. The colors in the example is just to illustrate the difference in contrast between the "boxes" or target areas.

granfors commented 3 years ago

@UxMajors @ezawadzki @ceciliabjork @ovaom The b2#3 is the same key but we have to be able so specify if we wnat it notated as a b2 or #3. On possibility is different boxes för b2 and #3 but this could add some confusion. So how could we choose the key for b2#3 and specify wich one we prefer for notation?

UxMajors commented 3 years ago

You could trigger an option / selection when the key is selected. Example: "Please chose the notation b2 or #3" - in a pop-up menu when the keys which have these options are selected.

notio suggestion 1

UxMajors commented 3 years ago

@granfors how about the example above? There should also be an ok / confirm button in the pop-up option as well. The notation chosen should then be the only notation visible on the key in the row of the other keys.

granfors commented 3 years ago

@UxMajors yes i think this will work great. After the b2 or #1 is chosen it should be visible that it possible to change back.

ceciliabjork commented 3 years ago

@granfors @UxMajors @ezawadzki @ovaom Thank you so much for your input! I noticed that Chrome Lab's Shared Piano has a solution that is similar to what Joachim is suggesting, see screenshot. We lose the elegance of having the boxes look a little like a piano, but we solve the problem with tiny buttons and big fingers... :) We would not have the "None" alternative of course. Click to select f sharp or d flat

ezawadzki commented 3 years ago

@saxjax After our meeting today with @ceciliabjork and @granfors, here are the last specifications of custom mode :

https://miro.com/app/board/o9J_l6kGofI=/

@ceciliabjork @granfors : I added a new suggestion about the color picker. Tell me if it okay for you.

saxjax commented 2 years ago

make color palettes selectable from number keys

make colors selectable from some menus

colorblind schemes

how about ipad users.??

saxjax commented 2 years ago

Ok I have read through this thread so to sum up:

User stories:

  1. A user should be able to select a color scheme from a menu (could be the custom-scale menu ) because they need to have a choice as to what aesthetics that apeals to them.
  2. A teacher, John, needs to be able to customise what color a particular scale step has, this is to be able to "highligt" certain tones making them stand out as important tones for the lesson. Criteria: Pasted Graphic 4

 CRITERIA:




Acceptance Criteria: Given the custom scale is pressent in the menu when a user selects the custom scale menu then a menu is presented that displays what colors the different steps are assigned to and what steps are active in the current scale.All scale steps colors can be selected and changed via a colorpicker. The colors assigned in this menu will impact the displayed color for that particular scale step throughout the whole app when the scale is submitted.

TECHNICAL DETAILS: