Optimized Viewport UI Virtualization / Row Recycling

[Casmat]

Hey!

It's been a bit since I've HISE'd but I wanted to get back into it and decided to try tackling infinitely scrollable viewports. If you've ever tried creating many ScriptPanels inside a viewport, you know it quickly gets annoying and inefficient. Here's a Virtualized List solution that uses Row Recycling. It has a constant memory footprint as only the number of rows visible in the viewport + 2x the overscan amount of panels are used. It uses a 30hz timer that only processes panels if the scroll position changes. I'm definitely planning on using this within my custom preset browsers!

HiseSnippet 2752.3ocwa17aabbFFeorYpshcfSQOzCEAiYQBVIqPubIEIkUbskknhHhkDgHscBLLLFt6Pxsd4NK1conYKLP+SHG6w1a8XOl9EPO1i8RA5wbrGygbnnWZemY+lbUiGgMjDvFbmOeley6LyyHvsiCUi35RcjJrduY1DoB2nX2YVdi1eD1vRp8AREd2h8HtdniZ2skzilYiccI5REJbkOkUfBW+pR7OeyCdD1DaoQhSRR5oTCMxiMFa3EmZmG9YFllGh0I8LFmnz0dXaMp09TS5DPLWonhjMV6U3gjSvrhsVQoivtijJrYQrV0JJJ0pqWsOF2WWcmZCHUqWuVkpC1QoFdGbckcpqTqhTg2oktgG0oqG1i3JU3pOhpOq6H5TK+N3oFtF8MIrGpH0E5Y+jOjZpyFhrTk1ejgodmPJ4JAsRmXlcEel8iJdrgtQT5wr6V7LPw0HI.KrVZ4ckTxqRR4ojPdYHoBIjzU8kz6WrqligsWbN9ykss7HNCvv7TRo3WVo0zduh6SgRX4UdL9UjCcfGhpgbcEksPv+swtquNLWAAEm7jieY6dsNtK59nsUTT1MH8yN8Yu7nVs+zi5AYTKJ4m1t0y5b5Y8RlGj4528tnSeZqy5t+dmfLbQdiHnRsszm354LCA3wRG6nWBY6f07fHJz.pC5bCGuIXSieA1yfZUl0FOifbHV5DGnEflYL1ZFh7ZOGLxgN0Eg6SOmf16jCP8Ilzo7t4beFib0bHD+VoGqt1NjyAJ3hbIDCqgHVSUpuIDQVBMwZ.DASzQt1TnDSGQrX0mZZxJo6DaP.CvtdkCF0QCs6ipnrKJA55r2IsdLicGi8FUViXXJOOhtaBVtA5NH4nVaSj5FPqEzbGCgbO0fL0l53AMX3rHVWOLU4RIKSosfIL1+fIyjoW1k.kbpgt2HdQxN+QDigiXswbxcC+Iyd.YAY4A0CXgM1hXhLrbMzIAP2usBj99QkLkt6vplbonbgdCDLSOQI4KFaLLq6sOcrM0B9BTtzizEqQ3vqVSn4PffMIXHzvgRGyis7mM6icluhQi63.+MSNAEsvfOlcgAzyewtqyZR4ywNHCHAHBv.8IIl9gmuyc1X8e45H3CqT1YxgynS4eqDDDXvQgw78MqAruPlDCxzEMELRlQzfMiNQG6gKCqpfUojWC58iq3mSzfvL8f3w39ACB92BFDUXQfAso4EIb6xCYYXnWZizEMT3UUTRmQjvqpjVvlr9FDlYBwxGrc.v3cFchGvG4ASrzX6oHObCj+rB6yvxrU86YZJy1bYN.7gHUz8g4VzCPJu9vCqx+ftG+gZ7OABwukfdz+fNYVA7+jp.5N3omQz7jetBepl2k.FdFaHKuQbBGwGpxa7B.lkCGsuIbTyCBKaOwcjrMj1aBiN0mLd7rCfQv7An59An5AAn7Hb3QH9LfDQ0zuUKEskSGGBLpPsrXaY+SYyux5v+UYC+90vB1bD13N.snI1..I9g1bYx43VnPhtAZtED9ikmGW1WjXNDVAe7oc6gZeLaun8NoGpSqyNDs+Qs1+ytWXIN0xbFruN+3P91POoMxX.+aA6PAGQnwNSAJGbxnwPKXOdOJBi1zhLcSl1JG0XP0blZ3R1BoSQVTX9vZ3s44Bso77KPt88SNxXkJNvZwESgec2DkgGXOqTLgxZweDPB0QTg+YrfyO5ihqchI3jQ4I5rfiFgtzyYBIQODffmvlBYm3ow7i.62Grj08dy0ZwK87aXO3LYnUiBkddnndQhN4MHX5l7corAXnP9ageD6zkfsc8Fg8BsB.KpQzAn9zIV5twM+h7xtrCwlsOfb3xnrBboVc4GNHmbGa+yK5PcOg5LlebdhCLG5KYxTHeCVa7Ega.GUeOpG1zuc8WPCsg7EbDC5im+P2ciB6Vrc9D3.yLadk4jf+P3KfbROX1bwZmdgW2I88X9xPf4JGWML3EhhlBSET6IlvZ7v4jM41u1LsAfX.XeVb7O2Mz.SJ0QNTV2cNDD5BJgVdqNkM8ROVogfudzCf8agZkTFvATYrnBFvrylLgBLlpOwjhFAtSMItHKxPX4.2EA30D7.N.1+1bVp9hih8B2ZAliki68OLgXYF8R9Tx7hE0B6gF1xaEOnRFJCZ+LvUqCeQKruF69WN2C468mD4SjerMP88wLKPZuBcvos5hN4zdnAFNDXAPPDxsWmeNOXzsaXDC2HP4H699oy6FHmVVCgURkAi1fp4IdZ+eN6LNlqoKZYFub4wZM1xizUE1SNk3mO3X9QVpZGOKDugPBTmP7rsr3eIjmxoFarAepR6gc7KuL28BaV6PpCboGCKXDgMQCbfKDyl+LwyXatoQcb7C0RJk0SfxSndjSs3T75f5Pym0fAYlWPbfYvDv7YGO0bAUT1Zx39DmsfoMS3.jvBBWQM88dKdw26M40x07cSlnfTq1.SN0lXcQWVWJvBJ6NxApBJpG+Fx+vhyG4KY.WF98JlLhRhq8j+MMjdRa1gVgsHz3PGZyVUwFKENfbNbCU+6fe8hGPbeEroBurAGOJU3GHR++ZfOETgtcV3W31dgF+c91B9Bx2tKKkuLHkTq.Xh+er1Z+m6z829frzwMC+KEv1BgKg2sXzcE76eov9m8k4bnufhiz2Wuf9d3MuBOkBevamLBuyiRJYDLWf9yObAojT4+ezgbvTYJbbsz5feOkXcveLPGqGhihYgijxNRCasfF9f.MvbCIU3mT7BbRWoIKtVHZUIKZczxmVUDiVUxEZoJJsTyhV1KeZoJFsTyEZUUTZUMKZ8qW9zppXzpZtPqZhRqZYQq+5xmV0DiV0xEZssnzZ6rn0+Z4SqsEiVamKzptnzpdVz5V+kkNspKFspmKzpgnzpQVzp4xmVMDiVMxEZ0TTZ0LKZ86+pkNsZJFsZlGzZ6cDkV6jEs9mKeZsiXzZm7fV0Ud6n0Mhs4koYdo+vRBW2H1d5aka9TBOO.VEgAVl94kWA.qhf.KWbzWWUXfkok9Nq.foJHvxES80qJLvxzU+qWA.qpf.KW70Wulv.KSi8+lU.vpIHvxEq802VXfko29+1J.XaKHvxE280qKLvxzd+2rB.VcAAVtXvudCgAVlN7+w+wkOvZHHvxEO90aJLvxzj+CWA.qof.KWr4WeGgAVl97GsB.1NBBrbwoeCgc5qloS+ub4CLUAc5qlKN8aHrSe0Lc5+Uq.fInSe0bwoeCgc5qloS+udE.LAc5qlKN8aHrSe0Lc5es+zxGXB5zWMWb52PXm9pY5zWYE.LAc5qlKN8aHrSe0Lc5+4q.fInSe0bwoeCgc5qloS+e0J.XB5zWMWb52PXm9pY5z+2sB.lfN8UyEm9MD1ouZlN8+6q.fInSe0bwoeCgc5qloS++8J.XB5zWMWb52Db5u3KTzsJdL6G7H1K862D6s.KHCCpUpWpH1KNjkqg2rjukX41K8zaqDe+hcL7zFksFWKCMBSSeenwfWUraVr0.1uLzXAd0hG94e+7dgI4+FML7XrmiAKP5jIi6Rm3nQfd2h8qxkESsF6mIm+yJgQ8cIV57G9uvmfLqvdtPPlUByTZLVyg9RM+ebcrWFsqwSAzjE+E265EOl8Lpxh+T5Fana7RMszM0BUT8xVwpW1JV6xVwsurUr9kshMtrUr42cEYu5h6MwiN1eYijzwcZw+oOVnPKKLDAxiVk9e.xmeLdB

Enjoy!

P.S. I decided to test out the HISE MCP integration with Google's Antigravity for this snippet to see HISE's new AI-assisted development features. It works great! Although I had to tweak prompts and correct a couple javascript hallucination bugs, it was crazy to see Gemini integrate with HISEscript. Can't wait to see where AI integration goes in the future, it's definitely worth it!

[Christoph Hart]

@Casmat nice. if you want you can post the hallucination bugs and I'll add them to the MCP servers in the DONT section - that's an iterative process but since I'm working mainly with the Claude models it might be overfitting to their behaviour.

I'm also inclined to change the scripting language to support more "JS-type" constructs granted that it doesn't affect backwards compatibility and is within the scope of HiseScript - that's the gold standard of removing friction points, a DONT section in the unified style guide is a band-aid.

But the first line of defense against hallucinations should be the LSP server - this is another binary that is integrated with your coding agent and is executed after every file edit. This doesn't recompile HISE (and you have to disable the "recompile on file load" function in HISE for this to work), but it "shadow parses" the edited file and returns a multi-error diagnostic log with all syntax errors or hallucinated methods. It doesn't do real runtime inspection, but it catches missing API methods as well as a few custom diagnostics.

RE: your initial feature request. Have you checked using the Viewport's multicolumn mode for preset browsers? this should be vastly more efficient and is suitable for displaying hundreds of preset items without performance issues. ScriptPanels are too heavyweight to be used for a single row in high numbers.

[ulrik]

@Casmat Nice work!
I tried another approach, using only a viewport and a panel.
It goes from 0 => infinity and has a callback that spits out the index of the clicked object.
I am using a broadcaster instead of a timer.
You can set the number of visible rows, in this I have set it to 10 and the panel fit 20 slots
The downside with this is approach is that it jumps at item 20 back and starts at 30 etc,,,

I think it's possible to have a continuous flow without the jumps but I couldn't figure out how to accomplish it, maybe someone with great knowledge of math could tell me, @ustk maybe?

HiseSnippet 1845.3ocsXstaabiEdFaOYqTawtYw9y8GbGrsXjsihFaYGua1z56sFabpZrq2sHvnflCGMDYDovLT1QHH.8QnOB8QbeC1dNjyMYImTXzJX.Kd34xG+34bHoFjoX77bUlia6ymNl639IdmMUpSNHgJjNmbni6C8NQFKjBMmbFKSkl5r+zwz7bdjiq6xeEplaqUbLe9ee49zTpjwqE43bgRv3OWLRnqkNX2+sHM8XZD+bwnFZ2e2SXJ4ApT0D.RK60yYLk8Z5P9KnnZK4470z7DG2U8XQ8Y8YaeU+PJM9IgWsM+pcBeRHeG1VQ+CFix15JV3laRcbevQQBsJ6LMUyycbWYeUzzyRT2HsA3BQt3pTNNHz4LHxVwGqRivkHJ04fDQZzfRtJ2A7xfZlaYKy8W7NUDIpjWyf+IyDjZKZRftKMK7VdF3E1Dd8Z.uE.I2FPZEKjdnGrkIFqqmAwyGC6nZdVLE1mZBEqtNK8W+XuCTfFRc2QzWyONCFTYQP+M6sNYqd857z1sg8pbM4hAjmQJsXHWefZzXkDFD3ew.+Z8FPk7z6TUyrn1luzMmCxtQDoS7WGh.p7+AGEzg7HxXZVNGfTfch.+bSl49zrySDrWKg0pemNy5qDtXXhtxYesYXPmU2nRsHpl1kkBNfGAv7Qg0qPZ5D96G90pfqg5QXvG.YB5WplnERdP7DISKTxfgcZ+11sFhJbrBcQDOlNIEg3F8AeXmxVKDX+WdWUFUNjmwirJDkQuYuTwPIO5b9azA1PBHy.ffNqSzIhbTvyULZ59pIxn7fdfbeF.avOHZeGtG83G2BBGQNYzU7LhJlbsMyijotIufGfIKxGeIHD3hvdUbTdpRCRpPPIA+3faY0pDjxamwGRraamOISBVBtBkwljkAP66GqxqEZU7PQF2vcf4.dI6monQLZNjZR.xCaRASVfmqoYEMr1+.vQGIGBreWVFGpyZXXvaaSH9hH++IwuTc+0QYzrg4fzW4yJ2kgcFe903WtznglZ03xRFjP0ZJKgnUDidDrLrcoa6Zm8bUUZyopI47iPMyCdEVrbIDg8RSIGPSSuB57kigzuX6IU..VxyZ3vnnmWHzt0CZaoJvtpDMD+lbMQLwLvVybsfey.Utgy9d+Nj+1yZx8cZ2BrnExhR9ME6F2owPxXqasGApWZ3WLyl5WBzsj4S.BOhy7eJArsrlBxQS2KF1VNjmRmFDBsZrtEU.1eA9pfPZ0Z1DkhXAS7N6twuxpuX3bHfwC768l33MMeLt2T2X5HLtXYhQ4suClpcqXUFIP.iaj.u5spNVcimRDj+0bRIqQBdul0Aras0J3+l8.fH9YPsCRfHX2x7wvi3vsMerTyB.+qDWB38UHgBEpqZ7UvbgtQCihtsV8uD8J7GlAU67pdkOiH.71ZgcrtQnS1KcbBsVRBbYh0I851uiAssLqSbi3kX+IdzKgLHnMWJOXwKj0McPJrqNhkHun2mAV.YUFVVBMC53AUb.kMCVLNa9lo9vTiH9qQDErxB.Ry1nyk4YJuKKkqS8LsFpJHMiJoxFUchn2.aXmR0IciSUprBEm93xkY0IXym.UlBjWRFUGXhdcs423WsNirSmakBUeh3sH3J0.lENTJJvxAsZttFgTv2MtXcsHmhGyVLSFeLVqFzfKaKjoPcaUyr4ZGDXHxT7zMxTvck2HX9FTVXMWWpmUzN5y+bzd3Hst8JPK3p74cEl31aAMf.o0cAQhbs0JoCdJjycWAG6AVEbvI32aze3KHeH3DtP3Dda37nGUBGa9YCx9cKfmURiZHQCdHn5Lv0gCVgceCq23VNy5s26M7rUrF2VUaLaz.mz.GuPo4eiztOCNmb6ohiW3bE9JENZbQSiu6H68YXf8lPMWunhvcqm8B6d28E1a9dBlkRZnnRdBbgkuYLWdWuxvofGgu8cmbHT1f2xuPFn2XdlVfPv8P90varr24uk2g77WqUigmKUQ9vqfzlY+zxWDfzsiHBevW81nyapeJ1ee2oMGXtJdkfed5t16SWqxI65zHbsrg6OWDNdzEPV6XUl1DyU7tXvcEqe7a+fwBjjSuF5mMHiCISVBd9m..KZuPnhxA6iW9lxOwayvc1n2S1Y6M6aXyJH+Q2EC8G7libbbl1bPIfevO4ZETA3GzeYqDnCLDkFgyvAP9u5lpK6439G8l41evCkm6McvqIUQSRo5YehI9P7hIfz3YdWG91MIzuXZyGp+a16N+0BwG5MPnYIKFiKs.LBI6+dfwhWq+odGEGCsgqA3JdG+e+84o4N1aeNDNLOS.YQduXxnyfrQFGhtDRsv1HtKgE71w8vwHCbFWFYF7+gOESFhicKlLrbRmQTn.3GX1lW3uGvGYj.XRZ9sSZ4cJNlD5XZn0jmGIhD+.iMqqlyvMtuFt480v92WC259Z312WCex80vc9vFh+5Q6MQqFYKabbNcvQlSCbcORRgLPS1pyufzQjsY

[ulrik]

@ulrik I remade it so there's no big jumps now

HiseSnippet 1961.3ocsX01aajaDdki00J06.501e.rBs2sJ1QQxVNIsttwu2ynwIBw9T6g.iCT6xUKqWsTXWJaKDXz+J8mV+Z+V+T+Z6yPtuIK6qGLtSI.Vjb3LOyyLbFRMHQ4IRSUIN0Zd97oBmZeZ8ylGqCOHjKicN4PmZ+x5mDGHikZA6LuDUTDaCm8mOkmlJ7cpU6I+IRvZMV0w74e+584Q7XOQ4TNNCUROwajSj5xYGr6eVFEcL2WbtbREo6u6Idp3CTQpY.TOodWmobuK4iEukShsRcmuhmF5T6o08766026Ei52iyCdYuQuPL5U8dYOwq71x+244w81ZjWuM2j6T6SNxWpUImo4ZQpSsU2W4O+rP00wVCLTlJGEInA8bNCV1N8wpHexEoYcNHTF4OHmsRcfVFTxcOwxc+p5mJ8kEyWxg+byBrxcTk.qsxhv6IK.udUgW2Jv6dfTsJPZUKj975HnImpKWgvyOCwTsHIfi3TUnXk0Yk+Uy5GnfDw5NS3WJNNACJ1ga+M5tNaqW0s81MahXUplMb.aGV9NFKzGnlLUEiAtsFNnEja3fNoBL5Jo35ApToVph+lVqy51oWoVFviEQOnhLqR5x7Eq5BExwgZnGneH8WYF51dsMZucim+7F5PASbiNgy1fISYRnqDMOVyzJ1HAiCVk9JTUyFEex1GbopfkjqamsxLtOWy63EI8tT3C.+rdkLAOZl361QJEwvLEiHWZ.xXzuWMSKiEtAyh8Ha6NtcyO1rwXR.6ACW6eR6nR3wiEIBenIq.GqHa3KB3yhHlYi91k7S3WuWjbbrv+bvItS4IoBDScs1FPzfD21sWmoCkozLuQ4wi1WMK1O0sKlukGb.XLB22RwsDwXVpsnvNLcxLw1lo7lkj.I+lopTLeWHHHUfMV7rIiDILU.31zY7HVh55TyVvJCMS8dLC1TutYpGKjMU2sqXuCkIBC4XUNzCylLjEGRiTZrmEyKd9BVwrS19IJtuGOEI2LvZTgNn0LsbEOIqn29G.scT7XDW53kHvI0Jaz8iMYrVR+V+dVqbwasNMGOYbJl8Cs7xi+HjzRbE8kKLRn4VItvxn.Qbsl6ERIbF4XzA4l4psic0yUEITmplkJNhjL08CzwsKfE1CQjC3QQiPsyTxjTHqhR78eiDHOFXe3.rL7HeS9NjsHsivrIying4CLASZNhRu6QYJIqYCY.y0H3udG5zB6K9hrvU6lMfdZbmXGzmQ5+nQ3WCJL1qECjnuvqETHcVzWDwmiSY4nZcbhdpHA8L.0bsTChBmV0XLwXH94ytNjiDfYRcJatZFTS94PjMGsW.BXGRJ0sWWTGyBIY73LRJGj.aA7nTjQ231l1XSSYLDTT.kx85ZnoH53BkvZSVW1a2IyCeMIzZqAOE+8YOyPck444eaM5aaaI0749CrtfJarvgBr4riWTHgMcwJVrTESp+xTZdSeDZdvuRegYeWGJQxleAHAi8kIhRWqYiGt18VDeYqejHlRktbaW32EUD.8076YAt.bk.j551p6MAAaZ9XhIlBRlhtpQ+M.Txy+3sOTIuduvlMFnRXtxRFcalDDX1f0VrV.St1ZYIoKYrOHu.J4CTxBpp7TW4yxzQkRk+EouNzssUjKnznpkqkreKZAgDbxu5a9Xxyoga0k9mM0C+mh1RJUoDFYMZn.+81DfNErWzzPd4Lg35ZTDZy1450RtumJlK7eObKz3HR3deNKZZTtqRyk6pY8IHLJgOkaSuPdBZNfhQvyV.Hsszwc6.0BKMg0ZshNQxb9bI7TswCNNZNMVjRYJ.lWrqLmxT7zjWQTpYTElrHPml6PkG6NkqC6DDoTIYaa9yKb97VIse5B4OVZdoPFaG1cXsBw.cgN29tVOpQUTNgbnud5RoiKdgirUpdv61GnNkJ1PVTYPbxzsnWz5nAGPkgjvhopHQmoIj1ryCUV45IUrzsU4+L0VDAVzZF.0rBTdqRKdWrshIpMvt6RAA26ZYpKBcrtukoGQj7csQW6cOp5xjf3hxKd665O7suq93.OaKkJBphOA2c3cSEwOzSFbx5CQ2TOCUPTs4d5eV98zIpyQhai+Spa+tAuUeMkyWexgHcHWKPgvHnknVR3u1ghqvqsr29uQ8CEoWpUSwCmJtv.dOzCYyOsdY714lRi9a1cd0AWSE6JmX9t1qdUNyI65TwbMrl6WjYNg+PzIgtJtwlqVe3fp1peUa816Xq+wR1Z2+9t19M6ySNG8xtLFzcUvlxuBUWFjHPpJ8FmEZiUJ3+70DcdWL+vgkapFRlWcvcXmaJQ7m7epYmaQLQYKnHHraE.XnEbjRccw83H3b.UCHk8t3n43MzK8bO7PSk+rHtdwWeRuQOaA30K7jO5YcwfMlW8M7+f8jzuuP7yqOPp8BueLtx8fQj8+iAFydH+mU+nf.z8oDfqV+3+5ONuZ2wdanwnqShDYU0e6rImglmdBX8XjpQEkpsBU9vNtKMlXfyDw9lA+W7Iawdz3ZYK1KeQmIbbF4a8rEcnepfepYFfoXyOqRi5mRiY8VtbyDou7a87VTUKswMdrabyG6F6+X23VO1M9hG6Fe4iciu5++FoeXo8loUSrGabbNcvQl1C0pcTL8KbXxVc9e7HyW+N

[Casmat]

@Christoph-Hart yeah, here's what I could come up with!

• The model occasionally thought you could add child panels directly to viewports.
• It didn't properly cast/convert the raw result of vpt.get("scrollBarThickness") for calculations.
• It hallucinated a scroll event listener/callback for viewports. I needed to prompt it specifically to use a 30Hz timer loop for position updates instead.
• It had the most trouble with local, reg, and const. Especially in long generations with multi level functions, it tried standard JS var/let scoping, leading to long runs of compilation errors.
• I mainly used Google's Gemini 3.1 Pro via Antigravity, but I also tested Claude Opus/Sonnet 4.6. The Anthropic models had a couple fewer issues, making sense if the MCP server is currently tailored to their behavior.

I had checked out the viewport's multicolumn mode. I built this as a ScriptPanel recycler to have high LAF control over individual buttons and icons for a custom preset browser. I wouldn't be able to get the same component styling flexibility with multicolumn mode.

I'll try out the LSP server! I've been following HISE's ai journey and can't wait to see what's next! Being a dev who uses AI to assist in most my work nowadays, it'll make HISE development much much faster and accessible lol. Love the forum, but I dream for the days where I'll ask Claude to explain why my function call is wrong and @David-Healey can enjoy his vacation instead!

The MCP server in antigravity is amazing, but there's a couple things HISE struggles with against AI.

• Absolute positioning is a bottleneck. Is there anyway to expose JUCE's FlexBox/Grid to hisescript? It would be life changing. If the model can just write relative values, it wouldn't have to guess pixel coordinates anymore.
• Can't wait for scriptnode to work with MCP. Having models build scriptnode networks from text/json, or piggybacking faust, will make that rodeo a lot simpler.

I can envision HISE's future as a sidecar rendering engine alongside your everyday IDE, which wil be where the actual code writing/editing and prompting happens. Having HISE run in a headless like manner to compile the plugin, fix errors, and run tests would have massive potential. The LSP and MCP server are great starts for this.