SOLVED: Keyboard - selective background color change of a key

[denisspycher]

On a Keyboard: Is there any change to change the background color of selected keys?

If I try this...

.key:nth-child(1) {
  background-color: red
}

.key:nth-child(2) {
  background-color: red
}

... the keyboard looks like this.

Is it possible that it looks more like that?

[jean-emmanuel]

.key:nth-child(2) inner {
  background-color: red
}

You can use the browser inspector to look into the widget's html/css and find out what needs to be changed.

[denisspycher]

Great... thanks
I only miss an black outline on the black keys.

But you said something about browser inspector, I found it with the F12 key. I'm overwhelmed by all the information, I have to find my way around first.

[Greenman]

try this

.key > inner {
  border: 1px solid #111;
}


.key:nth-child(2) inner, .key:nth-child(3) inner, .key:nth-child(5) inner {
  background-color: orange;
}

[Mike1]

Could this somehow be used to display an instruments playable range dynamically?

[denisspycher]

It is alway a question about the right syntax...
That is helpful... thanks

I plan to show the playable keys if you choose a scale...

[Greenman]

note that the on state doesn't not work... Can't find out to get it working...

[Greenman]

this post can help you to display notes of your scale

Label for each key in a keyboard container?

Yessss! [image] CSS is such a great deal! [image]

[denisspycher]

Hi
I updated the right bottom corner with a keyboard.
The keyboard shows which piano keys occur in the harp.
The red is the root key and the blue are the keys of the scale you play on the harp.
...and it adapts to your choice of your red "root key"-button or your blue "scaling"-button.

By the way... here the download:
Harp_v3.01.zip (5.1 KB)

[zig]

Thankyou for sharing this update.

[Sub3OneDay]

Question about this bit of css,, is it possible to update the n in nth child by sending .key:nth-child(variable) as a variable from a custom module?

I want to change the key that is coloured using a custom module.

[Sub3OneDay]

@denisspycher

Hi
I updated the right bottom corner with a keyboard.
The keyboard shows which piano keys occur in the harp.
The red is the root key and the blue are the keys of the scale you play on the harp.
...and it adapts to your choice of your red "root key"-button or your blue "scaling"-button.

This is great. I am trying to understand what you have done here but can't get the variable /variableharpScale to be collected. Where do I need to save it or address it?

Currently when I open the OSC panel I see a panel as per your image above but can't change the scale from C major.

[Sub3OneDay]

OMG don't worry.

It was all working correctly!!!! Totally a user error....

I just needed to double tap on the button!!!!!!!!! I don't use double tap functions so forgot that it was available!

[denisspycher]

Hi

please check the Harp with pedals, there is the last version.

Harp with pedals, keys and scales

@DMDComposer Thank you for your compliment. I'm also glad it has such a good present community here, without it I would be lost.... Here I have a corrected scaling file "harp_scale.json" (not all "bebobs" scalings were correct). Only replace the existing file. harp_scale.json (10.6 KB) Please use it together with the last harp version "Harp_v3.10.json" file Harp_v3.10.json (20.2 KB) If for the sake of completeness scalings are still missing or there are still errors, just contact me.

and maybe check this

Harp with pedals, keys and scales

Important is, that the harpScale.json file is in the same folder, where you start the HARP.json file. The Variable-Widget "variable_harpScale" is importing... [Bildschirmfoto 2023-04-13 um 19.26.48] ... the harpScale.json file to the value. [Bildschirmfoto 2023-04-13 um 19.27.18]