Hello, i created velocity histogram looks like VSL, maybe it will be useful to someone.
This is a not ideal version based on 128 sliders (i know that need uses sliderpack for more effiency). I want update this in the future.
Feedback on the quality of the code, suggestions for improvements, and reviews are most important to me. 
️
Screenshot:
Snippet:
HiseSnippet 3779.3oc6ctscaabEFFzxzITI1wIMM8bJpZZBUrBMAHAOj3DaKIKa0HYqZ43C00McD4PRDCAvB.JaEW2ld3p9lzWm9hzz66Z0tGfM3AQJGq8t9lnQQNKxYlMlM9mu4vOEzRaEFzRFEEDZja9aseeoQtWM+166G2akdBWei0W0H2YxuoHJVFZlVzx62WDEIaajK2bWUUPtBmzH4qu9hKK7D9sjiJxv31Atsja3tqa7nR25Repqm2Zh1xa4t6Xst5kVuUf+JAdACf7Yt7kM5KZ8PQW40Eplch7FWSD0yH26mW1tS8xsrDssKKqWGdSMKmNxcpVUZUuS8c1oovtZCQCKibm5JsciCB2NVDKiLxcxkCZu+18BdjeZGba2H2c7jp2XYrMzyoEuVfWa0snpTiU5450dqLgJx.tJaMR1lKU1dy7a511cX4ijuylTg4nHFW.ychISu4lH8rFO8JOV5MiTJ2XozISSoWO+1sBc6GOpFU9jOeTqIShzVYbh+0Yye9yattuabo48AEOBTeo4skdWyMJNX9mL+7Ef5WU1xSDJM6oJrqX24K.iYQwl6IBM666AMOnka79IwzMTrq4GatRferzOtjnc6sD9RuhKLqFtvRlkguW7iluvrptTjLt3BOxscbOnkV1MLOmoEzZSHmNmiYmvfcM8jchM2IHrsLbogEF51sWVokdVW6dRUKgKdkjjXh61HOWH7n4KntM2ChGtst+CR5bkf4J7b+Roob29w6aJBCE6WJsoQwhv39AQ2EZuSRy2VUhITDDUf+cMK5z+wKdfVeuCo02ahVeGnUVIs5NJUwrn0n5tFTmc4jJuVxs0vZ6DDZVzEpFp007BJkDdw4N2hlic6pjW7VFB4IyWnf5d99tOXxQyO0OXmhKnpZAXzvcowtcm3s2SomYWhIGHuyzUMbb3ZSWWT79dRnpEtsLL1skvagoaytt9KffzApP7XE5zXVWVY+sgQPUbkJW1ZFs.lTdK4iiWNPcM5H7hjynQsBC77tSOoz6vajzW.SoUKJrgTD5+LtZR+12V3MPdC+UCEceFMDxsjFtUP+A8Upy0ClktDLHRtszWwR6A3uRKJCeMcK2KcYmCqGS5qhIw8T07jChTNi.pMEOTN9zRyvfA9vRqSRUiO7nlW6Z99pK34gACmEmtarrqLC1MoqFex92beY0v7CLU+Ctref5pMryd57yCWxsfEwgYep0rFeIwjEwRpy0uKrtX5RE3TUrXnSyV4rzgsjSxk3lACf1KK1YfeK0b7hcWLMeguGaFIrZMDpvOYgVWEAolYlLWekfPeXhpheSV2.KV.uIFVktTWY7FAvTkkUxQTQmEyZw18DsCdTeAr1wno0sBkvdQaAEVLogiZjZF+MSkzaJaA4RWOYQwRi2+IQfIdn3QlQIAmjocKsirqq+Fh8kgEGgUcK0FZ3pgA8S6n0fkrS57Q86RlIch5TAQkdjabuK60umnX4GWN4K0TVamEWxzdIy6qd2CvKrneeu8gyt7vCdshCGj04vTrzL5fYd2cRSZXXJsqKNqLXkqn9ujLn7h3krCb1linLsGRGl9C1cGnMlB+1ld.UDUBtzOG4wDJAlGPDqAioEW3lhuncOguqZx0XZtZ0rhKTFJ89NvTg5KYBe23Aika1Uew121US5bXBuMlAVkGlBGhPNr4pVCeW6AKkrJwnr1o1K1r1oVVV6T6Hk0plenYciluXy5FMyx5FMORYsp4GZVaU9EbZCcPVdCuDSb6mqDOo8Sm4OM4rcv56iVOWM8ac+1vwIfihugnyvkzWIYsPSOQGyfc9B3xWZ7S6pVSGZ8TqclrX6FAAO7x9sWCNJPxZKXiKEBKBpbSsV1x8KntY2.lqKB2N4DWpccGtWvRpNF2P3nszzHM24Yuzz8gdnDrEi39kAUp3v2U4AvFv1Kp1cTU1dpM8yJAtnIYVZKsg3r.EeXyf2Obyu6.wXMtzO0wEF1T03PIOoe23doaqO0F2SIsnrlts8DCpY1KCGNZlsUZrpzIFIyZKjSWwG1jRhijIweijQ9hSYInCDznUtcy3mgCdPO35qVDeXII8yPPqHd6kHG6AWfjKFTXRoEb6.kp16N8zVKZdAPvT0lVcg8JoRfUB1sefOvdoaoBaB5jddNUCl7nZETGroPAIzLyot3exAt1CCchVoF3KaWVc5rIJGlrs3nt3o340FdlnLAe3PRorWo5mjRVQ34sCX1ezwfRUmTrWUapdm7+loVW3.haFuMqNUkUIkUzVIMoG16pxXS+f3Qiokl+fievs70gVjcXNHGgTzSwjlJddSvksnqLQYF1D0AKgzHChmbPScRDXtiJOSFRvFM9.CLpa9tuq4Lp5BiWX5QZWb5oL3v3zgeNyJ3ocUHQZbgx3Ag9oSl9n4OvWCkg.ekJbC0XzSvEJUCPcOn.N9vyTRmR1O3UrSmTIEpxbr5TKupLVoNl1LpNcj7YDXwziUsjYxhSCanQtSN4m9R9C+SeY7ObnVoq1OVCC7UeH.2nuz+v9HiLvsHLLx8UXVAMMN4yo4L3mSS5x+FtsMx8R4UZXYijD1HWgSk8woY7bGrEmfs4DbENAWkSvNbBtFmfqyI3FbBtIsfe4THoLqnsXEsMqnqvJ5prh1gUz0XEccVQ2fUzrXMaVrlMKVylEqYyh0rYwZ1rXMaVrlMKVylEqYyh0pvh0pvh0pvh0pvh0pvh0pvh0pvh0pvh0pvh0pvh0pxh0pxh0pxh0pxh0pxh0pxh0pxh0pxh0pxh0pxh0bXwZNrXMGVrlCKVygEq4vh0bXwZNrXMGVrlCKVqFKVqFKVqFKVqFKVqFKVqFKVqFKVqFKVqFKVqFKVqNKVqNKVqNKVqNKVqNKVqNKVqNKVqNKVqNKVqNKVqAKVqAKVqAKVqAKVqAKVqAKVqAKVqAKVqAKVqAKVqIKVqIKVqIKVqIKVqIKVqIKVqIKVqIKVqIKVqIQVq.9Y4VlW3V7B2lW3U3EdUdg6vK7Z7BuNuvavKbdTmEOpyhG0Ywi5r3QcV7nNKdTmEOpyhG0Ywi5r3Qc17nNadTmMOpylG0Yyi5r4Qc17ntY9yT3yVeUQrP8aw.9iIeqvf9pGva0OU9bqJ2yskL82ogB4WUF8v3f9IsEeLJLxcpzt8zY+FOnd.cS502J+rd3aMdrQt74T879YuH44QWkT+cLmReJzUk71XIpex8C6wy9M9ytOoOxm0GpWj7vqaja97YO75FYO24peGX9O+i+8+byc15h6Jd7nekXLuzvDK2TI1ahkL1yld1syXOI5YEcfm67gsbxmx7rhO3CKtp+N66k1e8EgfFLlXbHp7dYO+DoWRiif7YkJemho78NGSkO6T46kXJekOlJeURkuWlo78gGSkupoxWAlx2pGSkOmT4adpx2odCTaNdJe0RkuWQKejju5ox2qpkORxWiT46zZ4ij70LU9NiV9Nhx2vmmyj6kWSqezzOz2wY05GM8CMd75Z8il9gNOdCs9QS+PqGeGs9QS+PuGuoV+noen4iu62F0uCnKOux4QR+P2Gukl+nwen8iumV+noen+iuuV+Hoe1n+iefV+noen+iend+CR6eXi9O9QZ9iF+g9O9wZ9iF+g9O9IZ9iF+g9Odas9QS+P+G+T87WZyeQ+GlZ9iF+g9O9YZ9iF+g9OVPyej3uJn+ietl+HweUP+Guil+nwen+iegV+noen+i2UqezzOz+w6o0OZ5G5+nnd+CZ6ef9OVTyez3Oz+w6q0OZ5G5+3bZ8il9g9OVRqejzupn+iOPqezzOz+QIs9QS+P+GmWqezzOz+QYs9QS+P+GVZ8il9g9Or05GM8C8eTQ6eij+spn+ipZ9iF+g9Obz5GM8C8eTSqejzOGz+Qcs9QS+P+GMz6ePZ+CGz+QSM+Qi+P+Genl+nwen+iORyez3Oz+wEz5GM8C8e7w54uzl+h9O9DM+Qi+P+GWTyez3Oz+wkz7GI9qF5+3xZ9iD+UC8errl+nwen+iUz5GM8C8erpV+noen+iqn0OZ5G5+XMs9QS+P+GWUqezzOz+w0z5GM8C8ertV+noen+ieo97yjN+bcz+wmp4OR7Wcz+wFZ8il9g9O1TqezzOz+w005GM8C8ebC89Gz1+.8erkl+nwen+iekl+nwen+iap4OZ7G5+Xas9QS+P+G2RO+kz72Fn+iOSyej3uFn+iaq4OZ7G5+3NZ9iF+g9Otql+nwen+i6o4OZ7G5+3Wq0OZ5G5+3954uzl+h9O9MZ9iF+g9Odfl+nwen+ieql+HweMQ+GetV+noen+iemV+noen+CgV+noen+icz6ePZ+iln+iVZ9iF+g9OZq0OZ5G5+Pp0OZ5G5+niV+noen+itZ8il9g9O5o2+8Ht+K9m28xnADWM.dDAvLADcf7EZAjn.hVPdnV.IJfnGDOs.RT.QSH6p2Dg3lHnKDeMARj.QaHAZBjHAh9P5qIPhDHZD42qEPhBH5DITOEl1T3r+TnGoIPZDX1eKzi0DHQBDchLPSfDIPzIxdZBjHAhNQdjl.IRfnSjGqEPhBH5DYe8TXhSgQmHeol.IRfnSjmnIPhDH5D4OnIPZDX1eTzepV.IJfnSj+nV.IJfnSj+jV.IJfnSjuhr.9ZGyEPzIxelr.dli4BH5D4uPV.O8wbADch7WIKfu5wbADch72HKfux29NH8VgAsjQQAgF4N4sRDvyleyf1C7DwAgqzS35ar9ppBuJ7RrB2.eik2uuHJRBpat4V2ONIoTIzISSmu9h4NwUZ6BWisiEwxHibysbP682FTE3tbt7VF2NKgmKeYisC7BRekwJ8b8ZOLqTe32Omo3qmeK23V8lcNdhYjiFFuPxw4RywSm+Jc5HaEOJAOY90t6D51++59aFLH10u6lh3PWEuc8A6tcvfvVRn288kdQJt3Dp4KouubFm.zT6j27eguvJsTuOGVoUVkF6J.98yaE3GCXLzo4d4jRfbxWrqZ1R9MUu2zxXOE5NtNuK.3edqVSdolJPapAVgZfUoFnC0.qQMv5TCrw2bfp0et7f3fcSm1XXr4VWYUQr.Xzqjr.UBsZ7+.J9soE
Code:
// Init.
namespace VelHisto
{
// Declare histogam
const var pnlVelocityHistogram = Content.addPanel("pnlVelocityHistogram", 0, 0);
pnlVelocityHistogram.set("width", 128 + 10); // +5 from left border, +5 from right border.
pnlVelocityHistogram.set("height", 30);
// Declare sliders
var velo = []; // Initialize empty array.
var startposX = 5; // Start positionX (5px).
var startposY = 5; // Start positionY (5px).
var W = 1; // Width (1px).
var H = 20; // Height (1px).
for (i = 0; i < 128; i++) // Declare 128 sliders.
{
velo[i] = Content.addKnob("velo" + i, startposX + i, startposY);
velo[i].set("width", W);
velo[i].set("height", H);
velo[i].set("style", "Vertical");
velo[i].set("min", 0);
velo[i].set("max", 18);
velo[i].set("stepSize", 0.001);
velo[i].set("showTextBox", false);
velo[i].set("scrollWheel", false);
velo[i].set("enableMidiLearn", false);
velo[i].set("sendValueOnDrag", false);
velo[i].set("showValuePopup", "No");
velo[i].set("mouseSensitivity", 10000);
velo[i].set("visible", false);
velo[i].setValue(0);
}
for (i = 0; i < 5; i++) // Make left border rounded.
{
velo[i].set("max", 8 + i * (i / 0.5));
}
for (i = 123; i < 128; i++) // Make right border rounded.
{
velo[i].set("max", 18 - 8 - (i - 128));
}
}
// Paint panel.
namespace PanelPainting
{
// Start painting.
VelHisto.pnlVelocityHistogram.setPaintRoutine(function(g)
{
// Declare assistant variables.
var CornersSize = 5;
var a = this.getLocalBounds(5);
var Shadowpath = Content.createPath();
Shadowpath.addRoundedRectangle(a, CornersSize);
// Draw shadows.
g.beginLayer(false);
g.drawDropShadowFromPath(Shadowpath, a, Colours.withAlpha(0x000000, 0.25), 2, [0, 0]);
g.applyMask(Shadowpath, a, true);
g.endLayer();
// Draw gb.
g.setColour(Colours.withAlpha(0xCECECE, 0.20));
g.fillRoundedRectangle(a, CornersSize);
// Draw velocity numbers and lines. 0.
g.setColour(Colours.withAlpha(0x000000, 0.25));
g.setFont("Rajdhani", 8);
g.drawText("0", [5, 17, 7, 8]);
// 24.
g.setColour(Colours.withAlpha(0x000000, 0.25));
g.setFont("Rajdhani", 8);
g.drawText("24", [5 + 25, 17, 10, 8]);
g.fillRoundedRectangle([5 + 25, 7, 1, 16], 0.5);
// 56.
g.setColour(Colours.withAlpha(0x000000, 0.25));
g.setFont("Rajdhani", 8);
g.drawText("56", [5 + 56, 17, 10, 8]);
g.fillRoundedRectangle([5 + 56, 7, 1, 16], 0.5);
// 89.
g.setColour(Colours.withAlpha(0x000000, 0.25));
g.setFont("Rajdhani", 8);
g.drawText("89", [5 + 89, 17, 10, 8]);
g.fillRoundedRectangle([5 + 89, 7, 1, 16], 0.5);
// 109.
g.setColour(Colours.withAlpha(0x000000, 0.25));
g.setFont("Rajdhani", 8);
g.drawText("109", [5 + 109, 17, 12, 8]);
g.fillRoundedRectangle([5 + 109, 7, 1, 16], 0.5);
});
}
namespace veloIndicatorLaf
{
// Create laf object.
const var VeloLaf = Content.createLocalLookAndFeel();
VeloLaf.registerFunction("drawLinearSlider", function(g, obj)
{
// Draw gb.
g.setColour(Colours.withAlpha(0x000000, 0.50));
g.fillRoundedRectangle([obj.area[0], (obj.area[3] / 2) - (obj.value / 2) - 0.5, obj.area[2], 1 + obj.value], VelHisto.W / 1.5);
});
for (i = 0; i < VelHisto.velo.length; i++)
{
velo[i].setLocalLookAndFeel(VeloLaf);
}
}
namespace FadeTimer
{
// Declare timer.
const var FadeTime = Engine.createTimerObject();
// Declare fade velocity indicator function.
inline function FadeIndicator()
{
for (v in velo)
{
if (v.getValue() <= 0)
{
v.fadeComponent(false, 250);
v.setValue(0);
}
else if (v.getValue() > 0)
{
v.setValue(v.getValue() - 0.020 * (v.getValue() + 1));
}
}
}
// Start timer.
FadeTimer.FadeTime.setTimerCallback(function()
{
// Call fade fade indicator function.
FadeIndicator();
});
FadeTimer.FadeTime.startTimer(20);
}
// Get note velocity.
inline function getNoteVelocity()
{
local i = Message.getVelocity() - 1;
velo[i].fadeComponent(true, 1);
if (velo[i].getValue() >= 0 && velo[i].getValue() < velo[i].get("max"))
{
velo[i].setValue(velo[i].getValue() + 3);
}
else
{
return;
}
};
function onNoteOn()
{
// Call get note velocity function.
getNoteVelocity();
}
function onNoteOff()
{
}
function onController()
{
}
function onTimer()
{
}
function onControl(number, value)
{
}
