Customize Dialogue Box

orange

@Felipe-Flores yes you can do it with custom look and feel.

HISE | Docs

(docs.hise.audio)

Straticah

@orange just found out about this! Very cool, where would i have to place the example code in my case?

HiseSnippet 1766.3ocwXstaiSDEdb25UMFVtHsO.ihPnrP1fsSZSaWshzzzfpn6tQMKWDcqPSrmjLTmYBimz1vxJg3EfWAdT3Qgeyu3M.NisSrcp6Ro.BWoFOmKy7cNy4xLtmT3QCCERjQomOeJEY7ll8myUi2eLgwQG1AYbeydRZHUgaKEWDRk3i1qKp87ojvPpOxv3NehVRiRqihd98OtMIfv8nojPnOWv7nGwlvToT605SYAAcI9zmyljQ5FsNzSv2WDHlAn5Nl1noDuyHinOknEaMSjwcOvmoDx9JhhFhLVusved+whK3wx+4rP1f.pdfCpOLQwj6JB70HVSEs+XVfeuEVeHBlkdo9h6D6Ktu4SX9rkzS8IuSDCbpFY8GFqkGd2IG7bxBO6Lvq.HYjARqGCo20rumjMUkxQim2v7PthJGR.2dVnDKKZsKW2beAHAWUaB4LZWILXoFU1x1tJtwl1O3QVVfqOTgGDuUeDYH9w3C3iXbZMOIErmOIPLfDDOuGIDmsG2uKkFTQqapV0jzQrPX96Ni6oXBdkx9RxEwARIwQGABbnhNobU7vERMpJVL3adf0KsrJMpFHaW.nUJ+rKmOhxAAcZTSixRmSjXB.sS.oqQ.fch8oQpFOvI6.2rCpe5of5VkJggG1PbEMGE8RE9wOFWdOeeXZaS3mU9AIxneRkAWtOMf5o.oBXCjD47xOJifW27tTIHpd1D9e8juO3oGIJd10OkJYYY8QejGD7HwSiSOCiTFnWhMLZ4iIP8gU6kftQ9y3zpJ1WtyNa55z00U6MAVCgTwiEy3PBxwfRD9n.ZkEdspX2H2NrhRJ3g77f.IPsBlzC5T2sdyG7nD7dMS7Iw6WwaT5cH7CwtMqqeG1fphe49BImJ6y9N5tX2p3jIX2SbphgPU8+O8UZj+JqnmU7DL+.ZQvy11de8e2H3g+P8RkCh1KAnar2HZeqfkd4zmt5w+DV6hwLEMwoqSI1KfMhS8eNLSKiYphWff54gvx0ub.cnprFDVZ+f0hDHrf+Tgh9LdEcNTIqWYgWk0vgExSWdPJBBnxBYqKQKecJVgOax.prJ9bRvL5RAg5V4KFZd8ECyVq1KtZUFAE7C4L0ylR4WWEbTRIN3sO6vNDEQWAMgFH2TpTwzPvnC8bncTb8zRlcngmoDSgtJ6KlLUv0yfgkJh68VTskvoAHlut8XanazHoNlAcY1dbyyN3BluZ7RB+xO1ZLkMZbZ2O722ZvnE83dSyFtM2Yq5aW21EAgGS9KX3tBmABoeb1RVHftYlSeJQ5MFJ5IyXN+.oUFy48Zk2bvxUMGTyVEChXpGS7YyBSouQqqZkNMa5VeqhrxDNYsm2RkzeN1d5FHHJFezyYPjj1rdayrjbdMaTIwGwACusYtNTnzsHKSmsZB3vYybaPERNA36zXGamlaYihBEWq2ZluzBC03gP59jyosmoTBd4cwJ4LZ0EbN3xoDdHjYEtWXRyhcwCIAgohDcLFYwpqyvCuxbBIfwhmiUJYnl.Xz.OG6kJAsBKdINlxgygULuNPGG00vqK4bgDbR5C2kkWBxNDrZeZ6nvkbl7SmMI1QnAuaDo3wegNl7XXSV.LNwRWy0tVisql71lNvKmFIu9jF6A8wVZmIRWsneVpU7pbr3hdDeeHR5lpWbBEjO0VWiPi5ShY7DgLw2rJmz3gU4rvqcEtVu5lTiIMnrdR1z1tNM1wwAoOXExXCy3iVgzscRyGqa2n41Mcc2bS371YR6diqqLxFlQumKQ69YKgzo0T3jDbUlIa0bzULmu8J0X57OrFy1a63tY856b0T0kbP+MLV2LFaO4+Hi8Wk+ear2KuwdDYvRiM58b6ruWdiUG6nm5jCsp6wl27ftIW07H5C9LIZwuqo93LngPHY7c7VFVRgZTjk2URKPd+gaq7At51EM2B5KlHrZtV26BG5Hv+uk8lcy8mkEYu2CtxUHTESaB+6YvEYh4cB2RCdi7F7gSfKTmXvQumcCF6k0fsaAGRN4x2uu4Ws6K5.mICBl8CegtVNlbAMTLg9vvn5d0lxGsh2.hWV0a7Af2X5XRBA7K9oe6iQW8ttvsrE9yBHp7W8V+8FRX.MJyceW8cZgFIp4Y+dD+qce7aJDeWydLk23hw3ZEfQ3fp+Wfwjuhw8LOX3P3xMo.bcyte4+MexBDbYJcUtmPTRFDQYBsu6CwpdTX04PUS8U.LVSevq3w15wZOPeJ2OZve.OILcziMRX5rfIZBwSJ9Zu3Kdn+NIaDQAvDOJJsj4SziwNnnKi.5YZWyFMg4y9ZOOs4+P39CEqi6sPm52BcZbKzYyagNacKzo4sPmses5n+ZY6MSIlDmN.D5cPzwhMLNfqqsEEEh9S3jMngJ

Straticah

@Straticah thats what i found in the docs cant get it to work

inline function removeFromTop(area, amountToRemove)
{
    local a = [area[0], area[1], area[2], amountToRemove];
    
    area[1] += amountToRemove;
    area[2] -= amountToRemove;
    return a;
}

laf.registerFunction("drawPresetBrowserDialog", function(g, obj)
{
   g.fillAll(0x88000000) ;
   g.setColour(0xEE555555);
   g.fillRoundedRectangle(obj.area, 5.0);
   g.setColour(0xFF333333);
   g.fillRoundedRectangle(obj.labelArea, 5.0);
   g.setColour(0xFF000000);
   g.drawAlignedText(obj.title, removeFromTop(obj.area, 20), "right");
   g.drawAlignedText(obj.text, removeFromTop(obj.area, 30), "left");
    
});

orange

@Straticah For this, you need to customize Dialog Buttons' LAF functions.

// Dialog Buttons LAF
laf.registerFunction("drawDialogButton", function(g, obj)
{    

    if (obj.text == "Add")
    {

        
    }
    
    else if (obj.text == "Rename")
    {


    }
    
    else if (obj.text == "Delete")
    {

    }  
    
    
    else if (obj.text == "Save Preset")
    {

    }    
    
    
    
    
    else if (obj.text == "More")
    {

    }  
    
    
    else if (obj.text == "OK")
    {

    } 
    
    
    else if (obj.text == "Cancel")
    {

    } 
       
    
    else if (obj.text == "Replace All")
    {

    } 

    else if (obj.text == "Replace Next")
    {

    } 

    else if (obj.text == "Next")
    {

    }  

    
    else if (obj.text == "Undo")
    {

    }  
    
    
    else if (obj.text == "Save")
    {

    }  
    
     
    else if (obj.text == "Change sample folder location")
    {

    }  

    
    else 
    {

    }  

});

Straticah

@orange ah i see thx a lot! You were right, the documentation has some nice tricks for the preset browser styling!

orange

@Straticah said in Customize Dialogue Box:

@orange ah i see thx a lot! You were right, the documentation has some nice tricks for the preset browser styling!

Yes. Regarding the Dialog Buttons, you can also draw paths as well as change the text to differentiate the design. Path drawing examples are already on the LAF Library: https://github.com/christoph-hart/hise_laf_library/blob/main/Examples.md

Straticah

@orange can you or anyone else help me with the laf styled popup? The Buttons await a styling which i think goes inside the curly brackets but it did not work for me. Maybe you can show how it works with one of the ifs?

HiseSnippet 1173.3ocsW8taaaCDmxIpXVcCcEaO.D4SN.dt1sccCsHXwN1tvn4OFwocCnXnfVh1lKTjBTTIwKHeYXOX6QZuAcGEkskiUcSLV0GTBu69c53wi+ty8UReZbrTgbJe1zHJx4qcGLUnmbvDBSf50F47ct8UzXptkRdYLUgOjLB0ZZDINlFfbb150FCcJuMJ84e+kVDNQ3SWHBgdmj4SOjExzKj1e+2v37tj.5YrvbV+7864KEGH4xDHn1xsNJh3eNYL8XhwrRtHmGzIfokpAZhlFib1tkLX5fIxKEV6eGKlMjSMKZfF.NxJtqjGXhXiTzASX7f9y17wHvK8WjJ1xlJ9d2iXAr4xWjR91TE3EHxmObJsb3s0RgWi7gW8bgWAgjStPZaaH8X2A9JVjdgFS77P2dBMUMh.o87gh0VTo+ba2CjfEBcsPx4ztJXwbDUdQ85UwvqcekmGj5i03g1iZ3jFuGtiXLSPq4qnv940b4PB252CkxyaJB5Ro7JFrO4I31LBWNF2JQqAGgOrYWOuENqlhNlECe1tIBeMSJprSfhboEjEyNUwilobbUrb3erq20X3wyy7lMBWAjUSSuRi2aO7NMCB1Y2TUW6YM4lz2oun7X5pPNkJfJo6Kp1TNUmCUJnLDeNrCHWPw1KQq3fUbwZ7yQR0FFAm7lai6NA6.yEYdgPuCnOkFwg5KbS9pt3N.6XPv8AWQ1mAXMndqHPt4mpqA4ZyqSHhwTbLILhSwiLDSJLW5SL08e18vJpuY2WM6RCVJNVpomHp.2a7J6A002V0nQEpyPPnjbNUUnZCIsZc.qHRBGRUUwWP3Iz4FBLWKSG59ooCyyV6a4qxYnTzSvzmDQEeJNbTFIG7eusWahlX3PyjA1EQUZlIDbZSu.ZHYYTK61lFetVFkZaXjTX7fyC0Ys.rbcc4R3vQL9LFDpLfb8Qt4E0.cU99cSyuHK.resGsbyTzvwy5zU9AHzGSAvzzvER+H7rrzmZM19jtMK82kbuFpG1wjtL0kYjouDqUIzpyzz4pHhHFN0haFCtJIzXwHBTSM2jzljphgapdhWwmvgaFcedUKDC0aFduWhaTeNHf0t3OgkatXcVF3h00kbgTAYHynC40kEY8fcc.skTA6sk1xGmDZSDlf+oohrq+UVfdxol6ifh2mdUqdsmcqmp2S4f3eO8abHzErIzOcdtI6KTsn+LGkMxNUdYeRP.T3cWwMfRT9SZQTsjIh.yN88VEl9I1Lzs0rnF51ZlkoWQq2MnKMIs4k9+yes+DJa7DcdInUGoAFlRFjvI5kmvxLVYlBnhcowZLit.mn5o4G67+swttqg3ic6yz9SJNFKUPLBrQeIhwrgU+F2NiFQ80KBvsc69aeYlLEcpLwP8cDQqX.ymKbOZ.vL4SMc1DPWJPlSIC4mcccyZSFX.UDjtvPqkorgYsSlxFyThBI9J4G7scWLiC+UoRfXRj9KAJ6djYMtAJsiCfysds5nPXx7O36a19+.zjnXLOcCv7rM.yy2.L+3Ff4Ea.leZCv7yqEi4GE0LQKCsWG.A86j1exwoif.UVoUgn+CPNEWMR

orange

@Straticah

Since it is a Global LAF, it will affect all of the Dialogue Boxes in Hise. You need to define all of the styles for each situation (including "Ok", "Cancel"...).

Otherwise these buttons will be blank since the styles aren't there.

HiseSnippet 1393.3oc6X0saaaCElxIpXRcCcEaO.D9JGLOW6ztthVDrXmXUDz7iWbZ2.JJ5Xjnk4hLoKEcRLJxMC6AaOR6Mn6PQIaYGYG2.rBLrpKjMO+P9wOdH44nNRgOMNVHQVNmLdHEY8k1cGyU82oOgwQ6sKx5ar6HowTUKo3hXpDuOoGp03gj3XZ.xxZsmqMzxYcTxye+SsHQDtOcpHD5UBlOce1.lZpzNa+BVTjGIfdBaPNqez164K36HhDi.PslcczPh+YjP5gDsYkrQV2oc.SIjcUDEMFYsdKQv3t8EWvM1+JVL6zHptQCTWniLh8DQAZDqkh1oOKJnS1jOFA8RmoTwZFp3asOfEvlHeJk70IJvS8HOeXUZV3s1LvqQd3UOG7J.RV4fz5FHce6t9R1P0TMZ7bW683JprGAn87PwXKpzu4Xui.rfqpMfbF0SBMl3QkGWudUL7Zim45BTerBepYoFVowagayCYbZMeIElOOORbJIxzu6KDm0jG3QoQUz99fGf2kQhDg3ViTJniv62zy0cZmUSRCYwvv5Mh6qXBdkxARxEFmL9TtJtWlxvpXwo+9Ftu200g0CWAZTSQuTg2ZKb4lAAk2v048tNNg05AQRMihpnmBNNX3wM4MqWhShyoxMLRzO4r+xM2rdxi1wL8y3a.rts59Z9SXMX6hGvwUJezkiCo5YUiMqUvfjXoIVuh4m3ZWzmonYlFVSyPMiXgbZvIvjeJK7c3xXyNyxIDUMBrBUEW1GVlkTfcftv04J8KWGZTLEeMR7XJG1TU.Olet8Y5LkNctQ9bWZDUkwmfsZbsXq6RNmlMj4bIyoE41AB4JODG8haXw8+K6VV7R5UKk.2QeUVzMRhelFuxz4K6rlgQvsMXXZjK58ls+PPvJ4vbFtzk0WxCDeLaSm2V7BiW5S3gTbLYvvHJtmNkCINR3Sz2nsfQ7+jaPexmlHKCWkLBWswyxRM.K3GJTzi3UzYG33dkKddU85UnNcZPRQTDUVnZcpnxk4XE9nAmRkUwmShFQmXHje1rI8Yu3j9xmSpuIqrbFJ36wYpiFR4KJSUTZpbv+d4d6RTDclhox.6FRkJlFBV6ROGR61j2ni8tz3yThgI1NXnfq6Aq6pRSz0jQmWj.BT4gmv.nxfTHumcdQMPWlOq9w4ajB.yncuYKY.cZXV97N2Ag9PhCPTwfoR+.7LqzMMFadRllk9yR1uGhEJqoK8txzTFeJVIGQqloo8kCI7XXUKtYLzUiFnsnGA1oMwjjRAjE6tN5I9Z8Ir3llTadUSECwa5qweJtQ8INAonV7PXR6pXclTHJVmG4bgDXHcAR40khr8fYc.skPBysYlxGNZfgHzfeyDQl1+BKP0+X8YSfhWmrMqdsGN2S0OR4f32jLF6C452D1POgaRGgpE8yDuLH6XwEcHAAPf2p5WWJQ52uEQ1RLhGnmou1nPmujgglWyzXn40jwzWSq6UnKzj1jP++5O1tOkE1WkWB55EtAkLJBFEQTyVGot34TEPD6LEuoKPCVQUiyWb87EWt9pUb4xq8cUg68s6vT98KFukJ.uvIS+ai2zR0+J6185Q8USA651d+5RqKe8U6H5oP4FqQ2N6r1cFIOm19coqwcHRX6tRxdGt8O2XFLA6L8XQPEw5qLrzDlm2Is4D.GFLu1J+sDZrzuk.5XwH8w3GP.b.mhaCibW3TVepNiENjGhF.kzGjaZWOCPco7fjF5inSU1P21JUYiLkeRFiADeo3s9lai0K.eQhDXdyS99PN1GnaiafRtgF7ytds5nAr.1a880gEeODRUrOadK74g2Bedzsvme3V3yiuE97i2BedxR8Q+oxZNRIFXNx.Dzocx84VV4hzQ+CPRFb3.

Straticah

you are the best! @orange is this the correct code to change the popup windows that show up when i press add or delete?

@Straticah said in Customize Dialogue Box:

@Straticah thats what i found in the docs cant get it to work

inline function removeFromTop(area, amountToRemove)
{
    local a = [area[0], area[1], area[2], amountToRemove];
    
    area[1] += amountToRemove;
    area[2] -= amountToRemove;
    return a;
}

laf.registerFunction("drawPresetBrowserDialog", function(g, obj)
{
   g.fillAll(0x88000000) ;
   g.setColour(0xEE555555);
   g.fillRoundedRectangle(obj.area, 5.0);
   g.setColour(0xFF333333);
   g.fillRoundedRectangle(obj.labelArea, 5.0);
   g.setColour(0xFF000000);
   g.drawAlignedText(obj.title, removeFromTop(obj.area, 20), "right");
   g.drawAlignedText(obj.text, removeFromTop(obj.area, 30), "left");
    
});

orange

@Straticah

Yes.

drawPresetBrowserDialog is for changing the popup window that appears when you want to add/delete/rename a preset. But not for the buttons, only for the popup window container.

drawDialogButton is for all of the buttons in all kind of dialog popup windows (including the Preset Browser Dialog).

Straticah

@orange ah got it good to know :)

Customize Dialogue Box

HISE | Docs

56

1.7k

11.7k

101.9k