Multiplying Panel & child components



  • There is a panel that contains 1 label and 2 buttons. I am trying to multiply this panel acording to the below json data. Is there any ideas?

    const var ProductList = [
      {
        "name": "Product_A",
      },  
     
      {
        "name": "Product_B",
      },   
      
      {
        "name": "Product_C",
      }   
      
    ]
    

    alt text

    HiseSnippet 1117.3ocsVstSabDEdVfAU6.sIpn96Q7KiB0ZswFbZZU7EfHqxE2XZTTihnC6NFOhYmwZ2wPbPHk1mj9nz+12h9HvaP6Y1cs8XGCh5prVx1y4198clybNSqPkGKJREhbxbxfdLjyJ31Cj5tM5R4RTycA43C3QZt7bT8A8nQQLejiyhuzn1IyRn3maeQcpfJ8XiEgPuVw8XGvC35wRaU8G4Bw9Te1I7.KqKUsomR1PIT8AnrH1E0i5cA8b1QTiYKfQNKumOWqBaqoZVDxYo5J+As6ptRlX+q4Q7yDLyhBn1PfRDuuR3aPrQJpQWtvu0PJGgfnzZbBXwjDvZ3C497QxGmHdbrBxXOryGNKbevqfM7be3vywBdKk.umfa6Ex6oGqwfsGgaJ0rvNTXKvFVI1hV3ubvMTfERc9.5Er8CgEi7H21ttaRJ65twyWMq4CrUDoIWRCMj0uum1TAP9AxaWMKgbs4KBYcIryr92QVO0jSqs9lFM2rIg.+deVVerkw1ce11H01Ql9tDHtZ1NpPRNNfJ2mS3ju2Fp4EL445tf7m9zMRBMv9HkfkuWHWpyYY6a4uKu4kZ3NI9sbSbz6K8zbkjnjGozrik41H60Yyj8lrjoU0oyL0Yx2gJgfENS0l5+v6ywbx9AmwB2D1GD8YiLDJDlrRCe2UZ1GD7R19sLTIaJ45i6wj2U8GJslA92O2bWplZJISkA10iEp4FH3rK6R3rdRAZF7trnKzpdvw1FpfdJoIBNY0wZWcX4KUxDHNTjtDt9KQuebqfbUGLdwQUuh6q6NR.42q1kwOu63VJ29gpmoB8Yguh5y6GY2.hqYACaorBtTwJa6VobwRtVJJNkljP0l+gI5jgr3wJ2EO9ZbZUkIAEK10lVkro0OMEs9ieaZZ8wZOHZ8Hbwx6TnRI.8SxJaEZ160iyCaUr7yJToh6VkmIau8ETgPcUC36yfVvva9qv0DBhkfEu6zwAzyRSGqMLcbBWKXwxmHerlc93wU6QCg3YE3YkNYPgOcTWTCsLDM0NRMDUvOWFD69xXAqidJpWp3NOaqcJsU4RnNPTaqGXh0xvIHgehjIRE4mZW5WUUsqDxjP8uLk506q0JYL2+lgXpFbl9R3X5o00Ra1+QsM6W6gw9D9lEOLnnIQ2e9KUinWxZJaExhX5jbDO5PkIgPCGL7P9+IBrKi5oOV9ID3uudtIvJ33f9+fBe5PQXzL7xDT8jyqMWRIUAzZchAilgexHtdfck+mkg3OT39DbKt1q6rw6By.uPy3O23M8JQqh2qSGFrWNBrKg2+Me9u+C5Up9laddHUGxghO7Q8CZCmk8X.RjPMkY7myBlFzIqcMqMYl1Loe7h+AdRUVvr1IUYggJQATuP0odICcMW55Khk.XRFe2yL3CMqIEPwChA+vt4cQAvcAO0yyjJ9V.6y1mhygOaMG9TZN7o7b3y1ygO6LG9T4d8wbM7Z80pfjiIffV6Ee6DGm8jl4CwUjn+Ej2TV2.
    


  • Don't do it. Use a panel + paint routine + mouse callback and a slider pack or two to store values.



  • @d-healey Thanks. Is there any starting point or example? I am really ignorant for this kind of things....



  • @orange I'll make an example, one moment...



  • Something like this

    HiseSnippet 1358.3ocsW0uSiaDD2FvsGoEodp8AXq+iSNGgPbtCZUy0Vf.zhJeDQtdsRnHzh8l3UrY2T60.QTd25iReD5aP6rd8WABAD8vHQ7NeryuY1YFOamPgGIJRDZXt36GOhXX94VcGykAsCvTtwdaCzs1mFIo7AFaMdDNJh3aXZN+OoXat3BFIO+yOtElg4djBRFFePP8H6SGRkET6rwuPYrcw9j2SGVR52twddBdaASDCPYdqFFivdmiGPNDqDaNKCyOYGepTD1UhkjHCyE1R3Otaf3RtV9OPinmwHpEtFcgMRSdWAyWgXEUi1ATlemLWNx.1kNEAf40Afux5.pOMmdQf3KRXfJznb7vbtYAO2xvqwiGdlkf2BZ38RqtdgzQxBNJr8YV6wkjv9X3HnLrzxZL2WtnUaAHAWVeH9bxtgvhbMbVuQiZn0ZznZqkpn9CNJhjnKvgJm0O1Spx.PeO5jkpfPWq9GBYygSF6uCYmJxoaZWSw4lZHD76rjbqBISjaVx1NU1bQ6U.vNXNgAvJyyFPjsECGI3vBG6Dtt1JeJ405QJ1bYnf0FyXmA4WNBdBqTxZ2mxYTNA0Ol6IoBNZRYb7xrPMH.whIUWpRJ1YBOLCMRCb.VkhcmjqUcerDWOUndszZp+OXgHAi.LoI3WKCDKPKmsq0UgGXoM5OQaEKkBtl8s19yRXUsUkaTNTt22AxjkGKhghYhSl+4LnpJ3qgf5HOTb4OSnCBTtfLfFoBqZBNUQqV1qpyH7AxfVE5pMbt5MWeBGruHD4PA5MZgnn2MssBQWd4pZoSipYaMVk+AooTzqQN4XrZsbL9aTeYfCPnvAVAsVVHt.EpmUWEsEb9OHTDy8KHOPminZB4n+IpNlKo+QL4x.pjTsUYY6CcxNVsAD+iIdRLe.i3fqgdS06yloNLRcJNaqdFCf2jlyODe4lL5.Nw+8jqjNkSun8RxLpg.yayH8k12KFzoMQy17CBIieDN6I3SZ1ChxMatFX5Sb6Aoh3SdSOHMoIPdhrAfTMjqpQSYx8tU35ALjq6GKCMa+eJm12N7auIT9bAzr2tF5iRbv1CpeCI91Ofc2lfuqk+eEXJY4DCeSkazsBy6bbfHNhj20Lu0A4BPwhFfz9HMo5dLp24D+oWIWzg7.rLndelPDlp2X.j2omyqmRihxwnhFOvVth6TOjKf1Une31sLzmbnW8JTlHuaJh31bspEan5I2nMJYSBKh7flCNtdPycuVysUV65LOKk0Wqb+RZc8jaPhMJ+4GXuReq08IYtQ0uLM47BfZThuS4ijaVpHQpzGROTHIGwcpV45JKV4lJnaype+oxK8SuLR3TYqljLbVJ5viGdFIL6C1YBBiTM4LaV2+LakGozSOtQIAE783T4QiH76aRNizYTf29081Fhrpg6RoAxMhDJoJHXtM4BXpY8ndKZsMI5boXThroeg2v7SkIbWJaPPUQpAEF26EV5YdLtJev5+53MFWLk89aboJ+pfv3MBRpxxo72wa.U4hKyp0iT1ospZNBcDmMFlf+NSjByECIQLrbxgkU2PHkAbZLwTopIO4QT43x2f3YYB5GKbeoUGpzKX53ctofW3764Fuo2GYIqc52G9RXAXWvZ2e+4+xGF5IEG.MoCoPFk0gwC6Beczi.HgC4YpJFy4T4150MTqUQltDtexh+EdRY5pValxzMiowPrWn3TOccp5FOuHgBfIdxE+Vz5.0ZjqQRsKnmUi5MLFBWD6TOOUnXE.6SWmlOAcdySPm29DzYsmfNq+Dz4adB57syTG0cf2LVJFpKS.Bc1Ioglo4NbLjkkjQZ7enPm0g.
    

    If you need to save values in the preset you can use a sliderpack. If you want to have a scrollable list you can put the panel inside a viewport. I have a few tutorials on YouTube about panels, paint routines, and mouse callbacks.



  • @d-healey Great example, thank you so much!



  • Nonononono, that's advice from 2019 🙂

    What you need is anonymous child panels that can be added dynamically:

    https://docs.hise.audio/tutorials/recipes/ui/scriptpanel.html#horizontal-list-example

    This way you can build up complex UI lists with dynamic content. You cannot add other UI elements in there (so the buttons need to be ScriptPanels, but that shouldn't be a big problem).



  • @Christoph-Hart Is performance affected by adding lots of a additional panels?



  • It starts to get laggy with 1000s of them, but they are much more lightweight than real UI elements in the tree hierarchy.



  • @Christoph-Hart Thank you, I will look at it.



  • And I'm using crazy mouse CB to simulate buttons and complex behaviours per line... 🤪


Log in to reply
 

23
Online

1.2k
Users

3.9k
Topics

34.4k
Posts