Hi guys, here a new temaplte for HypePro4.
I’m a big fun of ROLI and this is the latest MIDI device. LUMI Keyboard 24 (video)
this is a simplified version, no polifinical of aftertouch features like a real keybord but is fun 
No code or images, just a bit of CSS and one small png but the rest is made only with timeline and vector shape.
DOWNLOAD TEMPLATE (845.2 KB)
More info in HypeDocks
hope you like it!
Michelangelo
Nice!
You used the colors of the rainbows, just like I did.
For me as a musician it would be nice when you add the 2nd octave. Playing the scale doesn’t end properly on the major 7th.
thanks
Not less than 2 pieces to play something.
I took a couple in kickstarted. Roli makes nice things.
yes, the notes sequence (if you click on the arrows) is only on the white keys.
Very nice! Mind if we use it in the Tumult Gallery? I’d like to replace my old Drum Pad example 
.
of course!!! thanks
Great stuff.
I know, no JS but with just a little you can simulate dragging you finger across the keys…
If we could set custom behaviour triggers in the on drag element property in the UI we would not need to use JS or the data attributes here ( @jonathan nudge, nudge, wink, wink ) ignore that brain fart… forgot we do need the js for detecting where the drag is… doh
Althoug this feature would be good.
Example. ( only on the first few colour keys … too lazy ( busy) to do the rest ))
All keys done…
Set up behavious for the mouse actions.
Set the mouse clicks to it’s behaviour and the JS action.
The js code
//-- The document.elementFromPoint will point to the svg of the vector so we need to get Parent of Vector.
var ele = document.elementFromPoint(event.clientX, event.clientY).closest(".key_circular_shading");
if(ele){
//-- only play once per drag over
if ( hypeDocument.customData['currentSustain'] != ele.id ){
hypeDocument.customData['currentSustain'] = ele.id
//-- get key number via dataset
var theKeyNumber = ele.dataset.keyname
hypeDocument.triggerCustomBehaviorNamed(theKeyNumber)
}
}
@MarkHunte Awesome thanks! I fixed some things and the keyboard is so much expressive and fun now.
Updated the V1.0.1 in Hypedocks with your credits ( also in the file)
VERSION 1.0.1 - Improvements and JS by @MarkHunte
keyboard_roli_lumi_version_1_0_1.hypetemplate.zip (847.7 KB)
@jonathan @MarkHunte (and other masters in the forum... )
Is it possible to do it also with the finger and not only with the mouse? this could be the key to turn a mockup in a more real demo, I tried with "on drag" options, with hype only but no luck.
I have in my mind also the LIGHTPAD BLOCK template. I wonder how to represent the trail of lights that go out gradually as we pass over it with the finger (I drag it over the surface) a bit like Hunt's example but progressive and with a delay. Maybe a symbols stack/grid
So you want a click to be a quick hit, but a drag to be a slower fade?
If that’s the case, I’d probably just use two separate timelines for the different cases (or use setElementProperty with a desired transition time).
I'm working on it, it look nice but I would extend the light trail in the correct direction
PREVIEW FIRST DRAFT LIGHTPAD
my first test, I used relative timeline, to move the same light across all keys
Here is the version that the drag across works also with touch ( can only test on iOS)
The code was a simple change to
var eventX = event.clientX || event.touches[0].pageX
var eventY = event.clientY || event.touches[0].pageY ;
var ele = document.elementFromPoint(eventX, eventY).closest(".key_circular_shading");
Roli Drag across keys example v2.hypetemplate.zip (890.0 KB)
cool
This is awesome mark! now the keyboard is really fun to play, working togheter is better! thanks again! I need to test the animation in android, in IOS is ok
Updated credtis and info in Hypedocks
I've updated also Lightpad Block with your code, the behavior is not exactly the same because the keyboard is so small but I love it.
Cool, love the look of the Lightpad.
One thing to note on iOS at least, you can have multi touch, I.e two fingers or more.
I had a quick play yesterday with it on the keyboard. I got it partially working but not to my satisfaction.
If you note that I used event.touches[0]
That is in effect saying finger 1. If there was two fingers then you could pick up finger two by
event.touches[1]
I used a for loop on the event.touches which gave some results but the logic and splitting multi touch and single tap would need to be worked out so you could do both at the same time and it make sense.
thanks. The polyphonic feature would be awesome but I’m not sure to understand if is possible. We have to remaping all keys with event.touches[1], 2, 3…? I think the minimum to play on two octaves is 4
Just triggering playing a sound for finger one and finger two at the same time.
I do not think any remapping is needed.
I did get multi sounds but as I mention above it needs some work