Recommendation?

[Casmat]

Hey!

I have this keyboard design I'm looking to implement, but just don't know the best way to implement it. Here's what it looks like:

And it was designed using CSS:

white key active {
background-image: linear-gradient(-180deg, rgba(255,255,255,0.43) 0%,
rgba(237,237,237,0.00) 95%);
box-shadow: inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 3px;
}

white key active {
background: #FFFFFF;
box-shadow: 0px 2px 24px 0px #FFFFFF, inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 3px;
}

black key inactive {
background: #B8BBC6;
box-shadow: inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 3px;
}

black key active {
background: #E9EAEC;
box-shadow: 0px 2px 35px 0px #FFFFFF, inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 3px;
}

keyboard main bg {
background: #C8CAD0;
border: 1px solid #979797;
}

knob bg {
background-image: linear-gradient(-180deg, rgba(255,255,255,0.43) 0%,
rgba(237,237,237,0.00) 95%);
box-shadow: inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 22px;
}

I do have png versions of the keys, but I was thinking of using LaF to recreate this, but then after getting a good way through it, I realized it may not be the most processing efficient to go down this method as hise started slowing down a tad:

	const var keyboard = Content.createLocalLookAndFeel();
	const var maskWhiteKey = Content.createPath();
	const var maskBlackKey = Content.createPath();
	
	keyboard.registerFunction("drawWhiteNote", function(g, obj)
	{
		var areaFill = [obj.area[0] + 0.5,
						obj.area[1],
						obj.area[2] - 1,
						obj.area[3]
						];
						
		var areaBorder = [obj.area[0] + 1,
						  obj.area[1] + 0.5,
						  obj.area[2] - 2,
						  obj.area[3] - 1
						  ];
		//Console.print(trace(obj));

		
		g.beginLayer(false);
		maskWhiteKey.clear();
		g.drawDropShadow(areaFill, 0x80FFFFFFF, 16.5);
		maskWhiteKey.addRoundedRectangle(areaFill, 3);
		g.applyMask(maskWhiteKey, areaFill, false);
		g.endLayer();
		
		g.setGradientFill([0x6EFFFFFF, areaFill[2]/2, 0, 
						   0x00000000, areaFill[2]/2, areaFill[3]
						   ]);
						   
		g.fillRoundedRectangle(areaFill, 3);
		g.setGradientFill([0xFFFFFFFF, areaBorder[2]/2, 0, 
						   0xFFFFFFFF, areaBorder[2]/2, areaBorder[3],
						   false,
						   0x4AFFFFFF, 0.39,
						   0xA3FFFFFF, 0.62,
						   0xFFFFFFFF, 0.86
						   ]);
		g.drawRoundedRectangle(areaBorder, 1.5, 1);
		
	});
	
	keyboard.registerFunction("drawBlackNote", function(g, obj)
	{
		var areaFill = [obj.area[0] + 0.5,
						obj.area[1],
						obj.area[2] - 1,
						obj.area[3]
						];
						
		var areaBorder = [obj.area[0] + 1,
						  obj.area[1] + 0.5,
						  obj.area[2] - 2,
						  obj.area[3] - 1
						  ];
		
		
		/*g.setColour(0xFFB8BBC6);
		g.fillRoundedRectangle(areaFill, 3);
		
		g.beginLayer(false);
		maskBlackKey.clear();
		g.drawDropShadow(areaFill, 0x80FFFFFF, 16.5);
		maskBlackKey.addRoundedRectangle(areaFill, 3);
		g.applyMask(maskBlackKey, areaFill, false);
		g.endLayer();
		
		g.setGradientFill([0xFFFFFFFF, areaBorder[2]/2, 0, 
						   0xFFFFFFFF, areaBorder[2]/2, areaBorder[3],
						   false,
						   0x4AFFFFFF, 0.39,
						   0xA3FFFFFF, 0.62,
						   0xFFFFFFFF, 0.86
						   ]);
		g.drawRoundedRectangle(areaBorder, 1.5, 1);*/
	});

(just tinkering around)

So what's your recommendation? Go with images for all keys or continue to implement this in LaF, is there a more efficient way to tackle this in that case or will I have to continue using masks/dropshadows which seem to be the possible trouble maker when extending it to all keys.

Thank a ton!

[d.healey]

Use laf, but why the masks, that's probably what's causing the issue?

[Casmat]

@d-healey

to replicate the inset property of the box shadow... would there be an alternative? I asked a while back on the state of CSS for the keyboard floating tile, but I'm unsure if it has been implemented .

[d.healey]

@Casmat My thought with GUI building is adapt your design to fit the tools. So if you can't do what you want using LAF you either need to change what you want or use PNGs - and you don't want to use PNGs.

I think you can probably get pretty close to what you want just using gradients and drop shadows - and remember the user isn't going to care if it doesn't exactly match your original design because they haven't seen it before.

Here's something I quickly did with a panel.

[Casmat]

@d-healey Thanks! Yeah I'll have to do some modifying. Could you share a snippet for the one you made? How did you inset the drop shadow within the key?

[d.healey]

@Casmat said in Recommendation?:

How did you inset the drop shadow within the key?

I set the area to that position.

HiseSnippet 956.3ocsV0tiZaDEcL65p.sQpIpO.V4Wda2RMrKrrJppDfkTTCaPKoQsZEJZX703QqYFj83PPUQpuG8kKOB8Mn8Nd.rogzVQa7OfYl6WGty8bLihkLHIQFSrp7hUK.h0mYOdkPE1MjxEjA8HVOzNhFbGrZpjF6qB4hYjNqVPSR.ehk0QOU6mU4iIYO+920gFQELH+HB4kRNCdFeNWke5n1+.OJpO0GdAedAuOu8.lTzUFISQLcjsGYAkcGcFbMU6VIax2SSBIVeoMi50LfM8x.On9EA9SuXJbdC3Re3xlsXMBZ0n0Y0gyZ0jX8IW4yUx3wJpBRHVG2Q5uZbnbovTfWxS3Si.8lZjwXkMG2WF4q+IpOkzMjG4OZSyJgfYYTdq6HSq6KrGx84aOOuE94YFbxinXCzpztv6ncfWshvyq.71CjrJ.oiMP5A1iYw7EpbKZ77o1CDJHNfh2SEghwWRoeqjcWI5gPUcN8NneLtYaDtM87N0A+3jGWoBdWknbdMM1YDU.Q0b9VmMQNCTckyWHE3F2GYL+HcLlkUS.0HrAotQlp3BvMHUvTbovc1IU9kJk04jhoCm3Rz45YRFMpiLU3m3pKc4JkmoywSio9brD8wwI2a8dSP.zh52s+oNzaqOw4abpqWUaxoNZar5Mtf1cWamMYhNeypFfo3FcE.+a.lhJlEAt2Ru0ahyW4TuZCShxWio3qcZXRgdEViFEPlYH107UR0kgbEXJjeLc4+wBUyacwJuIg8hkKFGR8kKySUgLUHQd4YxaceoW+yeRGruTGyY4Ju8jGu41vQJtVpfmKbytUp71JN+USAA60ldNHVFEAw60rl1G+2EnqHc9TH9Tb5JJE15HNZuKew9CyWJRmYlwxBNJECDb0yW.hODImrdVFW8iC5QUTMIa8YneKfXEWCAqdvqQINCkqrcOH4NkbQluqI.nHjJy582PH0j.BGoc2y1PHHuYqJ36XsWscyuNr8RNJ7lqQ9ysCA9rvb0z2k1l79beT0Q5mFQU6JEoErWa.626v+0bbQBWspnf9+a5S+ag3CrGwUrv8iwR6Ai3sxGCLtVU+91WgZJLUN.O1t+O8wQBmXDCmMjph437f80oyGipGL.qt.mRzy6VkzSll8d585NvXP3ms4Ovm0Fqo2as1XsMFIyorX4qXFVl98F2K6DDShr2wV1dnduSMRFyqXedN9ZrWwX6lp2Kv5GZfmcnAd9gFXiCMvlGZfWbnA15eNP8+x3IoJ4bCsgPFN5pLYKKqqDTbBLaZk7mznd8VM

[Casmat]

@d-healey just a question about hise's box shadow:
is there funcionality to make a shadow like this (like a colored vignette - transparent middle)? 100% ok if not!

[d.healey]

@Casmat You can kind of get there using a white shadow

HiseSnippet 881.3ocsU0taaaCEkxIrnVaEnsXO.B8WJadAxIwNNnXXtwerYr5Ti51hVDDTPSQYQDIRAJplXLTf87rmp9Hr2fsKkrsjWc2JLZ0OL38iC4wWdtWNQIorzToBYY+hEILj02hmtPnC6ER3Bzn9HqGhiHAWyVLSRT95PtXN57EIjzTlOxxZuewjmU88Q4e+0OeNIhHnrRWHzqjbJ6o7Xttz6jt+FOJZHwm8BdbkrOo6HpTzSFIy.NsG1CkPnWSlytfXRqFF8qjzPj02ioDu1AzYmE3wN5z.+YmNicRK1Y9ryZ2g1JnSqNGeD63NsQV2YfOWKUS0DMKEYs+4R+ESCk2HJNfWwS4yhXFilnovIW3dnLx27Wz3E0KjG4OYUwJEA6xjxR2dEktuCOl6yW6urDd+7.NkHpV.spsI81aC50rJ87pPusPIqJTZ+BJ8.7TphmnKiX3y2fGIzLU.AtmpRkhbQ09SKbOIjgPeXL4Z1PEXrFgaaOuFNvOG7Xaa3tJU67NhxYBQvhZ57SNqPNmo6IiSjBvv8QEgejASwxCSY5IPAR+bYllKXtAYBplKEtyOv92sqa1SBrcfhK0rWOURIQmKyD9otlittc84GF.ZnmDE45caPvfgsOs8YlC.B3qH2zWISlFR7k23dI4Ruqb9AmVMbHW1b8pitx4GcZ5YVdbwxqZ33cKgDj+0voEbR0se+AOdE4bjhKjZ1yDt4jz981N+6PAAaMlornjQQL0VCa5BT+W.cEYwyXpFPwNJisNQ3ldS4C9SKepptoE2RURTJFI35mkvDeJMOZ4UKr5ki5SzDilaoOHuDlRyMTvpO6cPGegBrNtOK8ZsLIO2k5AnmTmG8dqzmFMAhCpv6hKzGnaWOT3CztKVa7Gi6dCGlCUNx3McCY74gkCW9PVWzG2J.MgR+rHhdyNSy7qkAf58FsCFIuHkqWTc91Wr10OWJ9.7DtlFtcNVaKbDtU9ZvwkC4tGdPP.ipKI393gu9qyDMTwrg4iIZEGzC3KxhmBOLPYvoK.UhQuaUynLKr8L1lJvTlvO23ugukAaZrsVFr4pfnXBUIeKsnKyLF8t4d.NIxexoNdrw1oIJuyqZcNFlp+VJcys5i.dztB73cE3I6JvV6Jv16JvS2Ufc9+AZdz8IYZYbQaCBMdxf7wVVVCDDPAlqVQ+CP1Y7AC

[Casmat]

@d-healey hmm, no way to make the center transparent?

[d.healey]

@Casmat Nope, you just have to match the shadow colour to the background. Experiment though you might get better results using radial gradients for example.