Here is a LAF I was working on for anyone who is interested. It would be nice to be able change the square handles for controlling the lengths, but otherwise this new FLEX Envelope is quite sexy. 
HiseSnippet 3363.3oc2arriabbbnjFEy0OfsShkSN0fHFgxZEEI2m1BFh6KJsN6CJwUR1XAgbuyzjryNbZlYFpcWKH.cJWctjDja4CHGxmfAxgjiw.9ZB7kb1F4GPoptmG8vkuVFoH4PIsKmpqp5pptd0cOplmvh46K7LxLydmzkYj40LqehaP60ZS4tFattQlrlUcXGuEsowpmzk56yrMxj472DGNS1KXH+7c2XUpC00hk.xv3dBtEaKdGdPBzZU9EbGmpTa1d7NZXOekMsDtqIbD8.Q47lEM5RsNj1hsCEQ6blF2h521Hy6aVjcvA1MOXtOfUtToxevBEWXoCJCfliYQK2bo4KUboEVp7G.B4E2vlGH7pGPCX9FYtvpB6Sp2VbjqZBtG2mefCCenjQcXlUfqJbrQUDgZrVaticsHajugQFyZIVryqrX+Hys417X3IVt2TN.IgBcCXlykV7NeJwqjt3UTS7FfHkQSjtfRjdKy5Vd7tAIifxyqZtoa.yqIEVmzEEEtFm6OcIy0D.FtAE5POjU0CdHlh7KVr3rj4KV7xWelYf0J+.xCodjlAO.cOHeDIhzVrf0Dc5JbgGxmKb7b.UID4Pa9flooxxiA1gsDVTmsDhCWw0tJi4jGmLWvEvGbGXDjSqbq0qemaQcscXdy7nryj8ZWirJ3qzxSzy0lbDOnMokG2dlrQyRAOVKtOnFU64ZEvEt4yY6QORxr119dITmaVRyHbZMKQbvu7xyj8Qyjk.eZUvmEbSOpMGD2pfSb98Kdb0pkn3elkTT82zP.FTfBJ19y0.3L0wm0.TnP10D3wcXVA4ivBG5w3Oj5TMJnHGcMxbj5AdhCY9DPmAMSI.Dj5IWEq1ywAY3nUvC.l3tE8DlW9.udrHQUS+UAn4Kd7bvmUVoZ0D0AmObJjpSW3KJ0G+1JfxMKY4BEGEGWXgyLGmezbrZ0yLGKOJNp9kegiZyCXmAlV5zLk4ZqrywCf+.W1uY5EXDrLLCxXBYJ7BfPFctueoFjqjFxbMHuOoXgEuNYDNtKTTYaRKq6Wrwr8y9YCYy.9T73hEaJ+L.1DKwC1yeDVrzwAq0y6gLRWAGrIskg89jI2wWRcMj3Q45iVX4LTm+4LvBu70Sf2l5zLDbBJWiTtuUzgD6j1ib9462iDMEa33v65yxuOZDrhEXvJRtZxzeUxbJyjFFkNMFCbwJQvuBYwYS+n15xo8JGUluEWb0UibfFlTOZId1Q3YA4QWYoUVasAw+qLR9qOJtTzXJr1iQtSrfZeswYOWzyOYAx5jVbPWYtqKyKzWdtq2G7aALDfmfShOdZUY4kqJ+bFLqwSvf0Esgimdsu1HcBgMcs4Oja2i5P7Ys5f4J8.OWlG2skp7OEhxgbF9XmU.ar4VTLrexyZTWw2wkxviY2yhYi4r.K29wU6ktnKqU9uT+.JipcoES0gfDRiTKZ7lDU2ARE5xJfOJIpYzYWFZxVM4VG2gw2kVZP7c.k8z3apRoOV8KFTEXLpPoEldU3wo5dR3yw0snkegGjLnM2mzEqgB+dkMmb2gHlMN+gNTuCiCvJM+fKhngTRDlr.TOv9bZjtBYaPiK3ycyugKTiggMXe2tAv1mxeYnR+x3ONEeBilS3Y+Ur.azt8.UlzxQbDzPNj1eJKkgrZUmdLImFZJAYpoccwkQUNgDw7pj4Ca.PCmRC.mAWaKVEkgXodb701.YeaX6ZI8UyTB8DW46T5U5z1mRkN6095aFtxnmgyR0uoV107O0+diSYak9EhdANfe6TVV7YtPhMjuvojz6iM0SrDdLRadq1Nv+BRhoP3CnvIBNLRKFigU1rZ0wV17TpZD+GhplLbzrm7s9JZtE8.1YX+h6wNd7MLSsswRteDobQMaR.P5fqH1W0uhEwHbES5uVYL3R3gNLWwFWmLgejBR7pJpGZKFUE3QRrhGm5.ZWoxW95StS4JfKgKyF4nrNDpmyFqsyRx4gtL4zL6gG8Ax6SctFQKDwKP6.YgOhQbYLaRf.VFgterBfZVLBL6sZQOvA9F2uKjpFQnWWar6Fb7CcEG3SfZcRFgP7kGnCt3b2MK.MLQDdP+QHY1Bhu.lnetiComOiPIG3In1VTzY.nkFHYBHIzf.pUajFJfahL.EPocX.1pCjnO4.bAfPdexQsYtHvSjrCVXIVvl2ZwrKf5axIAs1taWa2c1Xm8pC9KfyU1Uvo8vOj.V9AefRJDxcYHAZ1aIbrATGJt33JLWmYQOYTnJQPga8dPmib2QHCgXnP+NLGF0mMBzCwPSRjaK8CIiTXj3nnQoyQDMJ6hFQgyZHUiTxN0TsE6gLmwLURbxA4Ddbe9vGzi6XK8HbfbLDQSceFveBO3QnuL3aHNZ9e5NF0V4Nqr8F6swcPGi8anBnDd46BTp40.Se1DTKzsme67ciCpjc7A+cDyC5XupVHvGQB6xRcfjZCkGcO4f+VNLvc8zzkCscTuV9eHYeRNNdRh4h0Z7AYbQtF54jCiv3AjPSQGgcuzQXfsCGPdVoLWvdK5B0Q6SlKnXzdhskzWKh774pt0FeBL4IFHPPPhCOHEOY1pPgIcrrUzpcT.MjdIVtBikKPtOKZwTRzGWe2cTIgfDjX1K4twRyNOVSFrcMK77L8UKPgHCqtP5HHepGERCRCH9m3FPON6.zWa6svpWv9Cym3J.5VnBb2MU4D0qfwsgdCmUoMp5XYwIe+tMv7y2CAmWMXbB7GOC7IhAfAXGQ.aW27WdlGIGjz+PMaNvwvXHOgiC164.FFuGDuQQXd2dcNf4EK6gHZj4Bou.AygeAB52ugkJjVCQg6lt7fc6xbG1sdXDlGvvHS1PoBPMPdUCuQ3UMT2gC0XL31FYdESUFBCoDGdIO+w+4WHpXLATeQSLscJZqb0+5uahn8GXJSclhXxW+o+9Ih3rlgoCSS92szuchH+0M0xKlhEO4i+Me6MlLIHrxRJx+rr+6u9FmEIPlNOMKB9p+0DwhWyLo1SZNboFSlP7Fl5EURwCi26u8Wtgwc2bcZ.Eu2pPuJvSqKyKfiNwYVm8PtEScKVYAgw+v.QWiLyDW9AjwfvqcSM2UcDTrWm83fytxJF14kwwwWv3SpT4jjaarPkCZEcWiYuH.3oHTXC.cRf9zm9zeZZnkCA+DDL13WJVH+bD2Nnc77T4IUZyvtBSDiCqDpzJM7MMiuRKXalcaaHMMY90lOZFBIWbH3l14fxNpr43.a5ZyNF.UT9TUH4h3n6K7NTdKY.b4AtKGK47u2S.YfvqnEFubwBJRuqOjQisNjBx0GR5fE0hHelGig8wF8YFez9w5Wmah09y5ToCMYrs9GU5vsgpOQmpRh45KpzMQiwDAnFaDW1YS8ICpUxPTjWirMqIsmiJKdhP7ypnq.YGWBGMw2VS7q7rT7CmpTB+jYkixrkHIeo2zHkFe53kxn4Z71XPFlLwOI2pVL4iddYlSlsmgpP576Zpw8zSs3MdoKMiTR36XtivqC0A14tcMlmEHKzVLC+dMaxOFKK+dFCaA8atwfc++taLoKMQEcRzIxQmQcJgIO2zmu4Fms0IU8mgjT5I8l70IEidgqWoJMOjz.ShZkhOuv0p9ZWXHYGlD8pON87TyN8KbyaZJ27EdQC5u+O3aIU3.Hu0eoavWrFnnavI5QrOydoflTQ7sLqwCrZOXY7bCPFg91ddHiguJUut4FMaBaFLQ.ufY0O44y6Mk9zeI0z+pl2m9Pl78eSN4+X4yvFS6PtItaSz1UZDuFb+8I80fq6D+ZvsqU.HB6Act42U3yJoy45rN78fHL+TP6ihxCjhTPWmEzyMl0Ulate3Wp.kBKzTTELEZS1qTIBXYcf0ntZH8oeI7bY8FP1lerd3zFt3AKVmAZt8t9VfgAsy5gE0vK049Xu0kzILAbYcv2h5YCqgVobZO+ndY.KMkuLfW7ktWFvuGjZJ06qX1HYrNuSWG1FgmwkTFeanPkLAbDzzgdaKbEcaKb4oVnuCKvi2pEKk+y.UnvMRjhVUSiQft8etxVbWF0aaYsjoxVT5L+taNv0q2MrWDBluf782RJm++qKoLHW621rlv4DkiZUtCzrRzaUs7gQUNwvnpG6W0i4ZEYsp7sUVnxsiNQs+vm+ZUR6Z9tUtcOnYmzV2U4cENTu+a8NFim7ElP2i2wLVodY2OFWMd4VF+IlgKtDznRdwmO+shZjJ9bsjxYX+5SY56PcbnpRpL4xyYVdJKZmcr57LzNO3ncqpcBqoy9KO129y6quucsi1UeahZm2p11rzNC0TaRQ6bQelEINo9Nug4se414F6X53WtEwKYBMrVlHK3QdwTw6Nhd3oeuMEBbf1pM2oWm5vtGrXfT55xbvaFJy4v6vQ8bQ7Y0dAbskO7T3S3fkvmyDNXonA+exbzgZ4Idfk5BFvzJuhDBn2tx+K.k0ba7YRozWo.9A1AO+AVVoY0oHr7zR3bSKgyOsDtvzR3hSKgKMsDt73ID22yJ8BDcTwFFFaWaC08bjQs0OYXhw+APh6k1o
const var ft_Flex = Content.getComponent("ft_Flex");
const var laf_flex = Content.createLocalLookAndFeel();
// Background
laf_flex.registerFunction("drawFlexAhdsrBackground", function(g, obj)
{
g.setGradientFill([0xFF1a1a1a, 0, 0, 0xFF1a1a1a, 0, obj.area[3], false]);
g.fillRect(obj.area);
});
// Path w/ 3 Strokes and gradient fill
laf_flex.registerFunction("drawFlexAhdsrFullPath", function(g, obj)
{
g.beginLayer(true);
g.setColour(0x3333AAFF);
g.drawPath(obj.path, obj.pathArea, 8.0);
g.setColour(0x5533AAFF);
g.drawPath(obj.path, obj.pathArea, 4.0);
g.setColour(0xFF33AAFF);
g.drawPath(obj.path, obj.pathArea, 2.0);
g.setColour(Colours.white);
g.drawPath(obj.path, obj.pathArea, 1.0);
g.endLayer();
// Gradient fill
var fadeStart = obj.pathArea[1] + obj.pathArea[3] * 0.6;
g.setGradientFill([0x5033AAFF, obj.pathArea[0], obj.pathArea[1],
0x00ffffff, obj.pathArea[0], fadeStart, false]);
g.fillPath(obj.path, obj.pathArea);
});
// Curve point handles
laf_flex.registerFunction("drawFlexAhdsrCurvePoint", function(g, obj)
{
var pointSize = 8;
var halfSize = pointSize / 2;
g.beginLayer(true);
g.setColour(0x4433AAFF);
g.fillEllipse([obj.curvePoint[0] - halfSize - 3, obj.curvePoint[1] - halfSize - 3,
pointSize + 6, pointSize + 6]);
g.endLayer();
g.setGradientFill([0xFF66BBFF, obj.curvePoint[0] - halfSize, obj.curvePoint[1] - halfSize,
0xFF1A7ACC, obj.curvePoint[0] + halfSize, obj.curvePoint[1] + halfSize, true]);
g.fillEllipse([obj.curvePoint[0] - halfSize, obj.curvePoint[1] - halfSize, pointSize, pointSize]);
g.setColour(0xFF33AAFF);
g.drawEllipse([obj.curvePoint[0] - halfSize, obj.curvePoint[1] - halfSize, pointSize, pointSize], 1);
var innerSize = 3;
var innerHalf = innerSize / 2;
g.setColour(0x88FFFFFF);
g.fillEllipse([obj.curvePoint[0] - innerHalf, obj.curvePoint[1] - innerHalf, innerSize, innerSize]);
});
// Individual segment rendering with active state indication
laf_flex.registerFunction("drawFlexAhdsrSegment", function(g, obj)
{
var reducedArea = [obj.area[0] + 8, obj.area[1] + 8, obj.area[2] - 16, obj.area[3] - 16];
if (obj.active)
{
g.setColour(0x4433AAFF);
g.fillPath(obj.path, reducedArea);
g.setColour(0x7733AAFF);
g.drawPath(obj.path, reducedArea, 2.0);
}
else
{
g.setColour(0x1533AAFF);
g.fillPath(obj.path, reducedArea);
}
});
// Position indicator, this part is AI
laf_flex.registerFunction("drawFlexAhdsrPosition", function(g, obj)
{
var markerSize = 14;
var halfSize = markerSize / 2;
var pulseSize = markerSize + Math.sin(Engine.getUptime() * 8) * 2;
var pulseHalf = pulseSize / 2;
// Outer glow layer
g.beginLayer(true);
g.setColour(0x4433AAFF); // Blue glow
g.fillEllipse([obj.pointOnPath[0] - pulseHalf - 4, obj.pointOnPath[1] - pulseHalf - 4,
pulseSize + 8, pulseSize + 8]);
g.endLayer();
// Main gradient ellipse
g.setGradientFill([0xFF66BBFF, obj.pointOnPath[0] - halfSize, obj.pointOnPath[1] - halfSize,
0xFF1A7ACC, obj.pointOnPath[0] + halfSize, obj.pointOnPath[1] + halfSize, true]);
g.fillEllipse([obj.pointOnPath[0] - halfSize, obj.pointOnPath[1] - halfSize, markerSize, markerSize]);
// Blue outline
g.setColour(0xFF33AAFF);
g.drawEllipse([obj.pointOnPath[0] - halfSize, obj.pointOnPath[1] - halfSize, markerSize, markerSize], 1.5);
// White core highlight
var coreSize = 3;
var coreHalf = coreSize / 2;
g.setColour(0xFFFFFFFF);
g.fillEllipse([obj.pointOnPath[0] - coreHalf, obj.pointOnPath[1] - coreHalf, coreSize, coreSize]);
});
// Label
laf_flex.registerFunction("drawFlexAhdsrText", function(g, obj)
{
var padding = 20;
var textArea = [obj.area[0] + obj.area[2] - 100 - padding, obj.area[1] + padding, 100, 30];
// Text
g.setFont("Arial", 12);
g.setColour(0xFF33AAFF);
g.drawAlignedText(obj.text, textArea, "right");
});
ft_Flex.setLocalLookAndFeel(laf_flex);
