How to display the core.peak & compressors to the UI?

HISEnberg

I feel as though I have seen posts about this, but is there a floating tile or anything for drawing the peak node from scriptnode onto the UI? Or do we have to use a buffer and panel paint routine to draw this ourselves? I feel like there ought to be a floating tile for this!

orange

@HISEnberg For now, there is no FloatingTile option for this purpose. It is necessary to use Display Buffer.

HISEnberg

@orange Thanks that is what I suspected, seems like a proper feature request.

Have you drawn the peak node using a display buffer? I refactored my oscilloscope script but I am still having issues:

The panel doesn't properly display the gain (magnitude) of the peak properly, it simply fills the whole height. I think I need to pull directly from the buffer instead of the node to scale it.
The path disappears when the amplitude hits 0. I am trying to continue drawing the path at the bottom of the panel but it isn't doing this.

HiseSnippet 2016.3oc2XE0aiabDlz17tXcwEMAAA8wE2Kk9hqNoXImq08ZNaYIeBwVVvTmSABBLVQtRZqo3xRtz1pG768OQeq+F5ei9+nOke.EnclcIMIk04yUM8PaEzCb2clY+1Y9lYGx9QBWVbrHxvrxfYgLCyO1xYVfbRqITdfQ2CLL2v5fD2KNfGG5SmYr+rPZbLyyvzb0CQQLWeMC0ue3q2m5SCbY4SYXblf6xNhOkKyms+q9FtueGpGa.eZAoa7ptthfVBeQB.mUspYDRcufNl0ihhshkwqowSLLel0Nt+xl0Fxp0r4KZr8KZzXmF6zr1nZaOZ3K1owvs+pFa60nYc2sMLeTaOtTD4HoRVrg4Z6K7l4LQbUfdCNiGyG5yvA0MbfcVOcGguGdDwYMZMg660OyOEaXXZ0O2qsp1q8YVGy832Net26mpVfjqQQGn4Jkg2pkfW8hvqVA3s.HYV.RqogzmX43FwCk4qf34IVcCjrnQTHNUDJZYMV4u7XqVBPh.Y0ozKXchfA2pgc8Z01hzr1l6tQkMp77mSNiFwo.Bi2nBD5hkjKoQjv.+yQJCOXbJqg7RRlQGyjsDSCEAv.6mdWQeJZ6ba0455fxJFIpZ6QiXtfdvzyI39uoSm1md9Auo02TTgTqteBnXjCPrfCwsZOm9Jk616PP+BV6NVwt9c1YkfmeT6dGN30f16zr416rKA7OutqSaBOl.tR3HRlxHIwLhbBL0PkwHw7+.qJYd6Mn8w8OWCBDMJQq5Fw.Zh8b6m9fjonS2C6s2QfNin9wrrvjiK0G2eHFBrsX0TRHGjbkHRALQPFnjDtjDOQj36QhXdItHbYjIL93IRhXjZTHidAZjgTf8nUlQnSC84xDOlFMw58riZKA.UqZy4b4d5.eepbRABh9ThSZeKMqOjMIImJRj7.F3rtKsoZLSpjJUH6QIAtRtHvd7ljJuciJD323pifC8d9915hLwUG5CUXzaCJ.hpq3dJ7f9CL1+s3XETxjH0WjKxqUSXmamBmrpt9LZTg03iH1EhT+FvwTaSRJBweEXhUcEgyNkQ8RYdyQMxMZFztdKxrcympHNhkzHYO1UNICUNWHQVePJakQPvxliwqcIbxudd1ML4W7EfGMS7B3F+cMnHn8ymWsMIOS6X2sr7XkgT24ufL+w663eOnV5xOqLgZy4LTwSJHEafvF8EEE6F8i2nAOCROlOV7xWpCF.ia.lMjlF3EQuhPIwxHpBJn8ITohzOTHkhoUUl7sUVe8GnGeNISQrxCUTnax3swXUSjxdKyExMyNbiqhHTsEEL5VjuC1P3eIq98aQd6SgCm6EAvcBO8WQ9xp0tAMzM2lrgWJGQZQ88GBIGKHgUKvKIsCFC3NMgUM4IC+cX4YzTEkEgu5gLilmclmbVp5ETgVcSQRTDTS3H1kLea3VGLxb.SB6AF5.+eD6mGS.BA+RVF5zVaAUHhXgXAB6xmVGLHoOyyCZbE0i1aC6ckJfBY3Fp40SHYm.GfJPXuxMUHyuznQKbMrLWjv2Gr5hVVue2ih1AISGxh1BBH9IraEDt0ubqDVu6VIJ1oiqtpaAAEAcC3xSBYAuq9eLRKUCO8ltGPkTr+iz4.4BYQRNBAyCXWBc+o6FYcqCXwWHEgJYSa..PsTs5FY8pPCX9FbOrgp6FBMttXqkyJNv3t8+.cdI7R7oxxsigMslt.3XK0CD1mSPLWNqXSs+n0i1CEhehUetzcxhw3JK.if6++DXLsy1MrzMckCv0r57a+.zFqkd+qjRMf8D2bKKn1PocuWxzR8mgjeyUfyRZKsl+Qq77nPrJPDTrsOHucL1yB6T.0aQF5KbuvA5F6tIegZPsOJgs6DZ.PRiWlbzG8f8S0u+vjtKmwGSkQbHovB7A5laakhtLeP53Z3Xjo3vB7TC9GvuzEqiiMSWrd1hExx6wjXihp.T5yFlOFiFerUrxIe9HHnbF36Q5p4isfqQqVy.5zRbElrySIxPzRMWeg+rvIh.tKNkVhLnu2TQBVYPie3M9FP49Hy2IIFJJ4cRfCHr50LAlmYOgG7zizcELCu3CyfvxZ.cEaZ9VZaIrlSfPOr9ELKI.Z2rWEU65.XNUUyBdQTf0AqiNjURAflaNZjznDT1vhFP8mEyphKsncUqz6a6PejO65rpsyQ3meFXb2.O10o7m9zHXqjrrL7rJzFFE.+irvt5Ki9m.NxHVU0BKB6o57d.+ZKO3qeefOuB4.ZDzsfRf2kzpRK3Hnv4JZ5P23yvUg1JMNCSTQR1RciVwpl+D8hOwxAnepWCUQ99b0Xx2RgFUNjADSrle824WS4u9m9aOzulR3C9qobhqD19AQzf3PQbIC6vlxG.WIGWbx2DCu9O62eJ5hKNeKAMZgK8CecG3PtPcbnxjHUrJK+tvsWqdeejl5K4GoYs+q6iz7+.8nT5B30yvnCGyeaG.cgC4BJL9o.4eDMwWlMaYt7wh.QVA97.8oL35pwiwT7bruvCzdRI7ZB4ybwqNkAuGcAR6e+O+pi.xFM5XUIrkxWT+e4uo1BiW+LKMbUuEA4em31ZOr318y7+QoOyU++59L+fz+zGh8XJ0MRbtqtsSjy9QpYfycf5B50sNFGSpabo9Ft7X4Tnh24ttkM0cT7KWVE2dYUrwxpXykUwcVVE+pkUwW79UDuPZuDoXpN0D51oeaUmIllsCvO4tJiv3eBWxqyF

Content.makeFrontInterface(100, 50);

// Variables
const var pnl_DuckingDisplay = Content.getComponent("pnl_DuckingDisplay");
const var Fx1 = Synth.getEffect("Fx1");
const var BUFFER_DUCK = Synth.getDisplayBufferSource("Fx1");

const var BUF_DUCKING = BUFFER_DUCK.getDisplayBuffer(1);
const var BUF_DUCK_LENGTH = 65536; // HISE is making me use this buffer size. 
const var BUF_TEMP_BUFFER = Buffer.create(BUF_DUCK_LENGTH);

var BUF_SIGNAL = false;

// Scaling factors
// Still working on this but it should reduce the height of the peak
// based on the amplitude
var scalingFactor = 0.5;

const var duckingPath = Content.createPath();

// Paint Routine 
pnl_DuckingDisplay.setPaintRoutine(function(g) 
{
    g.fillAll(Colours.black);

    var width = this.getWidth();
    var height = this.getHeight();

    duckingPath.clear();

    if (BUF_SIGNAL > 0.0) {
        BUF_DUCKING.copyReadBuffer(BUF_TEMP_BUFFER);

        var x, y;
        duckingPath.startNewSubPath(0, height);

        for (i = 0; i < BUF_DUCK_LENGTH; i++) 
        {
            x = (i / BUF_DUCK_LENGTH) * width;
            y = height - (BUF_TEMP_BUFFER[i] * height * scalingFactor);
            duckingPath.lineTo(x, y);
        }
    } 
    else if (BUF_SIGNAL == 0.0) // This should draw a straight line at the bottom.
    {
		duckingPath.startNewSubPath(0, height);
		duckingPath.lineTo(width, height);
	}
    g.setColour(Colours.red);
    g.drawPath(duckingPath, [0, 0, width, height], {"Thickness": 2.0});
});

// Timer Callback
const var duckingTimer = Engine.createTimerObject();
duckingTimer.setTimerCallback(function() 
{
    BUF_SIGNAL = Fx1.getCurrentLevel(0); // Detect if there's active ducking
    pnl_DuckingDisplay.repaint();
});

// Start Timer
duckingTimer.startTimer(30);

ustk

@HISEnberg Is there a reason you don't create your path directly from the display buffer?

HiseSnippet 1612.3oc2X0sSabDEdVfkTbhqZppp5kq3JmJpiWf.gFEEvFbpUBfE1PqTUEZX2w1S85Y1t6X.2nbeeIxc88ouG8p7.To1yYlcYWCFB0pMpo9hjcl47y2b9enYjziEGKiHVEZOJjQrtmcqQBUuZ8nbAow1Dqh1aOzq+173v.5HR0Qgz3XlOwxZ1mijXsvbD8u29rpz.pviksEgbjj6wdIe.WksayMeAOHnN0m0lOHG0qtYCOonlLPNDfyr1UHgTu9ztr8nHYyXS9FZbOh0WZW4QqwXquRGee5Jq3u1Zqswi2X0MbocprJ8D201X0kWc8ke75cHVyuiOWIiZonJVLwZtpR+Qs5IOSXTvQ7X9IALbgKoEnYy10kA93UD2kTqGOvuYpcJlPrralY0l0X09L6c497K1Oy58I5Cbx3HuAzZlwg2riAO27vqRN3MAHYkCRyYfz8sa4EwCUYmf34t1MDJVTGJ3mxCECsjYdyr10j.EBU4Az9r5QvhK3njakJK47nJO3IEKTrvCenyQzHNEPXbwBfqKV4bJMxITDbLFxvEcShZbdpSpP6xT0jCBkBXQoEuJoKhxNSV0O2EXVGQhrtSmNLOfOXafvB4or5g0quyAGu8g0dQdNRDa0g.mQsfHK3Vjv9k3VyZi8dNvcNYcEYTxE4zb8aBdYkyAxgJtf4TrvUuNkiYJMUIDUpyPgmhKEk59.mBupXAG3W2xcfDhsBBJYB9iKeR.D4i5YgBKnMoFPkBwxdQLHhoIU0qjpGOFA4KkdzfpxgB+3RUJW4AK478fuxcIG3e+J2e.9eXymTXgTUFiNBTaWnzHlOpRyw9QzyzxObImPT9Ih1UK5WsX6dbu9BHtZwu1Y4xUdMx4qyrLXlcjSMZPvIvMIuk12XeLD7TmcDcAyRxERu49m7inOFkUdZQ.q+HUnYlxLK4Db.QrPz9W5B.dYwpnQFAWZEz.gWfTI6HE6IUr8AUT3Ufu30Ebt7Qc5Lwyvv8HYP.H0IcrQe2.ikDCGbBKZIvjELjcAgPx83ULru9JF4Kn4Yx9xQnTzPvU6GxDWWYNRRJK70gM1lpnXYlj8.5BYQJNBAqsYmBE4MEcVvdaVbekLTSaRdNfZk9zhokjnBV.g6i0MupKibd9NHixufb0xbPAVo+v.pZ7ptXuojC.C6Xk5vxYhXtZT9dW+iUJ91Bw6a2jq75MYLNyDvHX9+2.iIMvJZapslAv4rq+cuG5VYazegjPCPmnxssgZzio88FNXr5vXvu0LvcIoyk0uXmkGEhY8Qr1xl.8khoCBCXG.ndImSBjd8aw+Y1US9BMfpJRQIudTADjFOM4nyeqsSt2raxzzn6tTUDGRJrAafoEVsDzkZCRVWAWiQJsXBe8h+D9kbnKt1J4P2zCykkuGSclLpu1Ak7Mw5Nn23d1wZi7wc.mxQfsGCWstiMzRobEBz3RdFlrySBjAukdulxfQg8jBtGtkghTnu0.nehJE+vfcso7.Lxu0vXnnj+9hV.w5oIwHu8j9vWyWm5AF1QXiILCBKqAgqPUbuKBaGCqYAPnE1LG4XDfxMchSioCf4.cMKXdSHpCNGMHo.vDa1oihLFTJZSEzfQwrx3QSRqFldWpCsQArySq1do.9KuCrtgvmcdR7SSZDnJEKMCOsBMgjC7yaGxn8GG82ELjQrx5ClD1S34c.94ldv6dSfOqBYaZDLHhlfqiZcoEbET3bFS3Pi3ivSgoiHGgIpXPFopT1e.UGrOUc2xWA8iMGdW6VPnndvScf3mqW67szSYNOmAAoX8e2q8AT+1a98a6CnBu0OfZeOEn91QTQbnLdLA2hMf2FZOGmeyCigI9Y+zAn4N+90jznIdzaeVc3RNQdZQUCiz9szb8bcxl8ldWl6T9tr49O26x9.XdkwZFuPJFawwb4cDmxBfbAMF+TH3uCcXfJc2wik2UJjoE6ybzGvfVWc6ho6YXehWnsTJXn9rc5u4Ar.FMWP6e7qa9RHXiFsqtb1TYKb+a+L5I5u9BaCb0uyw4C24Lm8+0yY9dY9o2G5X.0KRdrmYrSLN8iz6.2agtA8B16hqcbImZ5vk4KG.U4N1yabQcEFWdZYbkokwUmVFezzx3ZSKiqOsL932MiXSnsFpjCLolvzNM2QOMhk0NB7urlNif7W.QozA3C

HISEnberg

@ustk I just started working with the Buffer API recently but when I was working with creating the path from the display buffer it kept causing crashes on HISE. Your snippet seems to work perfectly however so I will start from here, thank you!

orange

@HISEnberg Yes creating paths directly from the display buffer is the way to go.

How to display the core.peak & compressors to the UI?

13

2.0k

10.9k

94.8k