Flex Envelope - No UI control for Hold

DanH

@Orvillain oh I see, it's more about operating the mouse in the highlighted stages than on the line, despite there being handles for the curves on the lines as well.

Christoph Hart

@DanH there‘s a snippet that shows how to setup the knobs to sync when dragging the flex display

DanH

@Christoph-Hart that's perfect, thanks. FYI obj.itemColour3 is missing !

DanH

@Christoph-Hart is there a option to customise the pop up text when hovering over a stage?

DanH

@Christoph-Hart last thing Perhaps the mouse handles should be an updown arrow for the curve nodes, rather than the hand, since the curve nodes can only move up and down...

Straticah

@DanH @Christoph-Hart the flex envelope is essentially missing the spline XY handles to create an envelope in the first place.

From a UX design standpoint:
01 Base level (priority): conventional ADSR controls — Unconstrained handles for Attack, Decay, Sustain, Release, no dials required, easy to read/adjust.

02 Secondary / advanced: spline-shaped ADSR curves with Bezier handles for fine-tuning shape.

Current Issue:
The existing flex envelope design inverts this hierarchy, prioritizing Bezier-based curve editing as the default interaction. (Which can feel slow and constrained for user since base level controls are missing.)

Initial envelope discussion:
https://forum.hise.audio/topic/11509/custom-envelope/19?_=1754988313518

Christoph Hart

@Straticah Yes I think the main issue is that weird distinction between horizontal and vertical adjustment (which is hinted by the mouse cursor change). If I change that to allow changing both dimensions at once, then you just need to slap a rectangle at the corner points and voila you have your UX, right?

Straticah

@Christoph-Hart exactly

Oli Ullmann

@Christoph-Hart
FYI
obj.active does not work. It is always 0.

HISEnberg

Just to add to this, laf.registerFunction("drawFlexAhdsText", function(g, obj) doesn't seem to work either....

d.healey

@HISEnberg said in Flex Envelope - No UI control for Hold:

drawFlexAhdsText

You're missing an r

Christoph Hart

Alright, I've pushed a change that allows to switch the UX to the proposed method. There's now a UseOneDimensionDrag property in the floating tile - the default is still true so it keeps the old behaviour unless you change that.

Once this is set to false you can drag in both directions to change the length and level simultaneously.

obj.active does not work. It is always 0.

Nope, works here, but it is true whenever the segment is currently played by the last active voice, not if you hover over it or anything else.

That's the snippet from the snippet browser with a colour change for the active segment:

HiseSnippet 2633.3oc2ZsDiajTFtclzgXuIQIKvlMvkRVfvCZvqsmIOgUSOOrSFXd3LdxiUQQ6VS2kcWLsqpoeLO1nHEIj35dlaHtwMtv8vANvMNwsUJbiKH16HwveUU2tqdFOy3wjPxh0Fkz+0+eUe++0+qppsc.2lDFxCLJTZi87IFEtfYm8XQtK3hoLikVznv6Y1xir6FjvnFFyumONLj3XTnvD2UvPghm0P96qlcdrGlYSxHYX7PN0lrLsOMJiZaqeF0yqE1grAsuF2yXsjMms.2iGCfYByZF9X6sv8HqhErcFSi6gCcMJ7CMuwsu8M6dSR8ZNXmYpSZLciaQt4L2pqS8aLyz2t1zWeSbsMm1FaT3bMcnQ7fNQ3HRnQgyNO2YuNt7cXpE3gzP5ldDwG0M5.qrhbKtmiPEETMVvk54zN0JEZXTvrclMaBkM6aYtB0gNfdls6xxAPYRna.Kbl7vahbvqtN7poAug.oBZP5rJHcEyN1AT+nrQT6kKwhHAcwv9jNTT7Zbl+cQyE3.Grnp8waQZE.eLPhJ2nVsoPyTq1j+3RkXvtRHrCQPBui4t2hcV+dXliGInzyJUpDrUFFg1FGf7vcQeLJcVsCHfxtL2F6sLmu0bLmVDhWEwL9QeDZCWRHAgCf+34gVdtVntwL6HJmgvaiodXvbf5xCPQtveCqKhv1l3w8IkfkoZ.oGMD.aqDgpT1I.uiDetNgAyC9S8B3wLmxSMXhqzaJDeye9j.pK1qZWv0bNOuJ01sUqFxe.xdt.civ72J1yqMNx8Hm8PRjx+th5uBqtiKMh.SOLnXpDRWA3upO7OjRJ+WyAFsoP0qV6T.lEhC1lzlSYQi.bDpasqeqF2dFEVDlglddT+PRkmHPg8fY6I0dJ5GccE1znVGnh.x0qI9ySOE.sCoWexHgRwRhAN1lflEkZACHNn6L3qM8hIYpvALmqSrivrddD0LAF0IEhGaSbpTu1jmBL2lGREjGuc5CYc8Elv0XB3JMuSmr0qQVZeA52.9uAV2zfpdhUquOmAeTo7f3w6Ff8cKOo.LGJfCTxjXtU46f1gfXDvPFwQPfKCrSxHLPm60SFy4PC88v6IXH12AhfkiuEiuYHBBNEyifPnLMBk0C8fkphVhg3ANj.gTNbTHGVme.DWGKhwQaFvwN1XgUFjEGIlC.G3nHrsqPDQJfLD3iCfLN.ygHHMyAQAjoA14CQ63RXBh6IlMQdDaWXGm3TUOizBqsR60Vs4pazARLAaWyIVxstCpHBMbKphgxSNUoh2CpM.bdjrJFWx3hDa7dGGmRFjr1INLBJXbL.HgCI2qS7H3PxwvcBGYvPlK3NniEIRdjhnz1TYNNKRlLIKYhPGKrN3BsLAxfeBKjjmxSV544bY2LFpCJcA7ffUDuqtSB3.IJugfPHtjGM+MMeg1ys9bqzbilqK7EdxSg4GJuTwGDSyMYxREy3qpebnaE+jnmHWJrFgGyJHbgmWyW+iQMY8nLRRoPsgp.9hTv6prnx1h4EqLXuvA8BuC5InxTQArxCTVwGR++xOUkWP36qBinQnD0uO2INeXDXuNbYzCf1pp4YC9JRwamJMjkY4lOFV3L6B.BgvHWUW.kE45jHIezpc5daZHKj9X.nRBWqhdDIc2SJzOsyZqJSx.oEEIm1gF4dfYKfzkDPf9Og7CgpskDlE8KfQjciBvPVNbDJD5uEuawCqqNNKKx5y.8KayGzqD3+fkTY7zy5SclB4OkRWj49Eq7S7epHo6CEDqnFRkwtXomC8FUZPSMb1p7HxZrJRQgAQGbntcG5Xhfk.tGXmG5vhNqCNNAqvh6uIIPG3BFgtGy2Rp4Q2RpdGy1pXWMF4rkXzn07IripOZij.dn80hInBXMR175kRZdsiGEpeXPgdTOuoJUfgDwIGa3kc9s+RKiQP5yYJRLmS1W829B9HI62vTlfLmvV+jM+cijvEMSR6kSbiK1+OMRheQSsDf4lheyef+2mczPPR0i7Jv+369Wm8zf.YZ6bSwm83+0nMEWvLqBS9sflW8KGoY3Rl5EOxaJk+dvRKhivhSBk3UAdZ9jfHpvItvhjsgygpNWTQ.LgaEw8gC7NnNCfwnjCxoV6VdbrnOlMnfyt.AW1LeaUF6NX8egk0dYfop0l8RODawyAD1WPE58qeF082e+uSdpMRH+BA4HHWUtoP9aGpSj6f0w5EVtDZO2rCV+hsrRzckhdHDKsPE9UlOqDBUdPj3RNkgJNpr4hAVh4P1EHUS9EbTXO9NOhGrk7rd.8tXuPhbrrSXrAGRDIN6OLdiZUUh9fPHwFYQHSDKDx8HpmkJdomKh9GX6KcxA86peOAYV6OquUeb1XK+kV8oNP0mz9yyLWegkelFKxGHzXiAEdVRewfRkDAKx6mvgzEG6oxkmAhumktBT7jx6nAeGM3a85D9IKUNvOZV4zDbYH4kAiCJM9jSFkoq0IaiALLZvOKEqVL4ydSYlyVsWipP9z7ZpwC0SsDbxnK+DoP3GXtJOnO1i94Dm1j.a.K3dDiv3tco6JpN+8MNpMzWM6vc++pYG0slzZOY5DZmSoNkMIuwzmWM6oaeRUF5HRJ8h3QeeRMQu00qbUnOhz.ihZkaddqqUGnqgiH6vnnWGXldSpYG9lburo7vW3n7Wrr352SFPL252lq3FaghtQ6oGw9Z61lGUHdEy1zHa2giwyLDLBsu8l.iI2Q+EMa1sKbdvL.dVyVO9MyExqu7WUs7um4ivaSjOshbw+1xugyl1GcWwINE1t5Gy6q7WF02Wwejeek0ri.HrAz4VnOOjTWel6P5S2.hvByQ8.RzXnRji5hjnX1fo1Z5o+luTQJGWBSQKvTnsXm2JkXCchswLMl9jWBe2PuAjUn6pGN0jIt7vNDPycVKzFLLB6rdXQ6XngzGI5stttfYjanS9d3.GXOzNmS6DG2qLUeLekoy8N2qL80fTS4dHrhoXrCsuuGoYxUbIw36CEpjIfSolOzaENi66xYzbazqShBn85Qx4+LTEJ4fD4jU0zXJo6+6sVlxH3fUj0RFKaQ8S8iBNz8qOLoWDjHeA5qukTl3+qKoLLW622rM2aOkiZKpGzrhDDEMUebbkSLLZEP9EwDlcp0x5eZccq6md6R+5O+BV4cM+Pq6GCM6Lv5ht109y+w4o9bObv+sdGmfm7YGQ2iOvbfR8tterX23caLdMyjMWjvnhd6mO+JoMRM3dsj3Loe8wL8chNdjpRtL4xqaVdKKZWgr59LztV3zSqpcQqGH6u31eOXde8ysqcCu5GST6ZW0Nlk1Uol6PJiWNv5uV7ctj48e214VzwztuaCwqZBMr1.IK3gd6Twacdr3RvWACANPa0lqF2uCb5AaBfRFi3IdfnBmQ7TNpuqI9VcV.li7i8geICVW7cgjAqmN3+SVi9X6.9mZqdmAQZkyKo.5MS9+aYEMWQ7Mp9geYA3D7zO01N+TcHAaLtBN83J3LiqfWebE7Fiqf2bbE7Vmrfhy8LWbDuuJ1vvXk1MUuyQA0Q+jgIF+G7K2E1.

Oli Ullmann

@Christoph-Hart
Got it, thanks! :-)

HISEnberg

@Christoph-Hart Nice this feels much better, thank you for prioritizing it!

My only immediate comment would be to add a small amount of padding on the borders. It's quite difficult to drag one of the points (for example the release) when it is close to the edges. Not really a big deal, probably there is a way to get around in HISE script as well.

HISEnberg

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);

d.healey

The thing about the flex envelope in Kontakt that makes it a flex envelope, is that you can add a flexible number of points to it and adjust them. You can't do this with the HISE "flex envelope" which is really just an AHDSR with a nice UX.

Peek 2025-08-22 20-54.gif

I'd really like it if the flex envelope at least allowed us to define custom shapes for the sustain section. Or if the table envelope could loop its sustain part which would achieve the same thing.

Lindon

@d-healey also called a.multisegment or mseg envelope...

DanH

@Christoph-Hart nice thanks!

HISEnberg

@Christoph-Hart Just following up on this, is it necessary to set up the Flex Envelope with all the sliders and this broadcaster in order to save/load from a preset (i.e. was that your intention)?

Using just the floating tile doesn't seem to save the settings to the user preset. It would be nice if this were possible, but obviously we can just hide the sliders if we don't want them.

HISEnberg

Just seeing that using Engine.addModuleStateToUserPreset("MyFlex") solves this!

Flex Envelope - No UI control for Hold

18

1.9k

12.4k

108.3k