I want to build a tonnetz-diagram type of keyboard using hexagonal buttons like this:
https://previews.123rf.com/images/expressvectors/expressvectors1803/expressvectors180300025/97202535-seamless-hexagonal-pattern-vector-geometric-background.jpg
Is there a way to change the shape of the buttons to hexagonal?
Otherwise, how would you go about creating a button from an image?
I have skinman and knobman to create my own knobs and backgrounds, but is it possible to make use of the frames inside those images or should I somehow toggle between 2 images (and how would you do that)?
Hexagonal layout is not supported, you could use a conditional background image using css (see this) but the button’s actual shape wouldn’t change.
ok, thanks for your reply.
Too bad, as for a correct working of the keyboard, the button can’t have a square shape as sides will start to overlap. A circle would work a bit better already, even though I’ld have area’s that wouldn’t respond between them.
I have made a tonnetz keyboard using OSC/pilot, but it seems to still be in development stage and there are still some wrong/buggy behaviors of the buttons, making it hard to play right:
Turns out it’s actually possible to do it with css’ clip-path property: for example, a button with width to 70, height to 60, lineWidth to 0 and css to:
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Instead of writing this in every button, you could also write it only once in a container’s css to affect every button it contains:
.button-container {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
3 Likes
thanks, that works almost perfect (still got to get my head around the program. lining them up neatly next to each other is a bit tricky atm as they’re offset by the grid.)
This is a really nice feature as it allows you to give your buttons any shape you want, allowing to stuff some controls in left-over areas 
just found this website allowing a quick selection between different shapes:
https://css-tricks.com/almanac/properties/c/clip-path/#:~:text=The%20clip-path%20property%20in,or%20“clipped”)%20away.&text=There%20used%20to%20be%20a,it’s%20not%20limited%20to%20that.
Great ! You can toggle the grid with ctrl+g (cmd+g on mac).
See also: https://bennettfeely.com/clippy/
1 Like
The hexagon is flathened at the sides now, but if you use these coordinates, it creates a nice pointy hexagon:
clip-path: polygon( 50% 2% , 98% 26% , 98% 74% , 50% 98% , 2% 74% , 2% 26% );
yep and to remove the border i put colorStroke to none which works but is not correct (@jean-emmanuel may confirm)
according to him, lineWidth should be set to 0
exact !
What is the real css property corresponding to lineWidth ?
I don’t know, I’m new to this program. Only thing I can add is to put the css into a container, so you don’t have to add this line into each seperate button (see jean’s response below the picture of the tonnetz keyboard above).
This also allows you to quickly change the shape of all the buttons in the container in one go, if you’ld like them to be a bit different shape.
so, this would be a full range hexagonal keyboard.
tonnetz keyboard.json (155.1 KB)
Next things to figure out for me:
-how to control the main midi-channel that it’s sending from a drop-down or button selector.
-create a (couple of?) layer(s) behind it to show which root key and scale are selected and some controls to set the key and scale.
-a button to mute the response of the buttons outside the scale.
-some additional controls to somehow control the velocity and add pitchbend and pressure
Under the hood, lineWidth is associated to the css variable --line-width, so if you leave it to its default value (auto), you can change it with a generic css rule in the container’s css:
.button-container {
--line-width: 0;
}
The css property’s documentation lists the available css variables associated with style-related properties.
ah nice, I assume this could also somehow be used to set the main midi-channel?
Probably not since css is only for aesthetic changes. Your next questions will require using advanced syntaxes / scripting or a writing a custom module.
yes, I understand the css is for the graphics.
But the midichannel of those buttons should be able to be adjusted from another control,right?
Well the question was more what is the equivalent in pure css for --line-width ?
In pure css the border-width or border (as shorthand) property is used right ? So i was surprised not to be able to use it into the css zone. That's all 
Thanks for sharing
Just point out that i don’t know it’s a good idea to use a # into the id property.
Maybe it’s better to use the label to display C#6
@jean-emmanuel will tell us.
1 Like
well, I was a bit suprised not to find any tonnetz keyboard in the widgets… so I’m thinking to make a nice tonnetz keyboard widget with inbuild options for people to drag into their project. Any touch program should have a tonnetz keyboard…
I also want to add some visual feedback, so you could send notes to the keyboard to show what is already playing. One layer is gated that will light up for the duration of the note, another layer below that will (temporarily?) hold the notes that were played for easy reference for in which scale you can do some live jamming.
Also, the tonnetz keyboard I made in OSCpilot has two additional grid-keyboards, one is a 2d grid for easily playing chords and inversions that follows the selected scale on the keyboard with the layout:
root,3rd,5th,7th,9th(/2nd+1oct),11th(/4th+1oct),13th(/6th+1oct)
which is repeated once to the right with an octave added (so 14 keys in a row) and then +1 octave in each row below for 9 octaves (so a 14*9 grid). So for a normal major/minor chord, you just hold three buttons that are next to each other and for inversions, you just shift up your fingers up/down.
The second one is the same grid size with the same octave offset buildup, but the notes of the scale are ordered in a normal sense like the white keys on a keyboard.
root,2nd,3rd,4th,5th,6th,7th
And now I’m at it…I think there’s now an extra option thanks to this button clipping… if you look to the keyboard, going from C to E an octave below goes through G#, which is a dissonant when playing in root C, but sounds really nice sometimes. So, perhaps it’s nice to have an optional layer of small buttons for dissonants in the 14x8grid, with a shape that allows you to easily go past them if you don’t want to play them, but can if you want.
