Is it possible to insert a looping video in a UI?

LozPetts

So I'm sort of getting there ('sort of' doing a lot of heavy lifting there).

I've got my film strip imported into a panel and linked to a knob, panel timer at 24ms for 24FPS. But I can't work out how to get it to 'play' without intervention (me turning the knob).

The other issue with this approach seems to be that obviously the knob has a certain range, is it possible to 'loop' the knob from 1.0 back to 0 automatically so that my filmstrip appears to loop forever? Then I guess I'd need to link the value of the knob to a timer to get it to move without input?

Here's a snippet, sorry the project is messy, I've been trying/struggling with a few things at once!

HiseSnippet 5308.3oc67jzaiikdT1ldQ10ROoBljCy.NBMvXmTkZRIYKotPGKunpJk1KJRtb00jYfaJwmjXLEoFRJaqtQAzYP.RNlq8s.LGSPPtlaFH4RP9AL2BxbbNk9Xtk788db4QJIa4kxU0Ikazk8a8ae4swp1VMINNV1BIV3fA8HBIVRr9.S2Na0QU2Tnx1BIlSbCmNDSgMGzS0wgnIjHwzOGaLwByHP+46VeSUCUyljvpDDNzRuIYG8t5tg0VszmqaX7LUMxA5c45ctRUZZYtkkgUe.QlVTVnmZyiUaS1SE61ThBIlsrltqkccWUWhiPhY1zRaP8NVmZx5+g5N5MLHXAEg5vDwp9YVFZHFi0JrUGcCsp9Dri.LoUCI+oYj+iD2UWSOn9P1vCoMHENBd9QhohhdSGA8T3QOYNzaDnTBNTZFFJ8Qh0aZq2yMrEDeVTrhoKwtkJv14QEVeEl5eXdwsrfdX5ltq5wjmYCEBFwx4jkerzZxxq7zj.m2wU5DUaotpMssPVtizmI8mmptpaeaUWcKyTOVJEnDj5W7zjkMaqaRR6PboyHwTaWbTNKGN3Ud5SSl7S9jC5PjLItmZYerD.CWfQpa1VxEptsspYeCUfgA8KD9OmUsMUADPA5uS2l3tQeMcq5pc6YPBXBKmJR2SsBEnOm3RgPKcaXRoiC9aChjigkqTKaqtzl8vq.nSa8yhh.A.9Yv3WVNb9G.ZoRNTrQxP2wMBMvpuqZOjGxPYablX+4tp81AFwxgSlpolTOqdH2fPQslVcaX0v5rHy5VXkaZclBLo9RUXRgp6YYBEVNUPOPFwm7IAEQI0xozcIcc.oXH1k9uvR2b4T+byTqvPlcrT0nHPPefJ0MM.osTq9lMQ8.IzH0ahQzv1xX4l93viAL0nOYEXXeM7+Kf7zzFvrR4eo95u30+rO8SCXCuIkzerDRhdiFImJ.Vd.4Lf8Pog2PwqKkbQJzCY1R0vnA34X4gwSjHC4mUUMIFimYxZNUzwb39U1dri.azSETptmNXWKMPjZAh3ARp1MzcsUsGvXRX2dE4mZXH0fH02AsKf46Pro8rr6pZn+UDskWQ5zN5M6HoYQbL+otRMUsIRpMr5ipbTPn1zsupgDn11ljDwAl3FgLZytMoodChgOhcPGcGITh3PGrdWvCKUADcP3HoCZiMQiKzUkjpiTJvxoqiK3OIURFKgJOqfiCDnUqs+eZ4sN3nms+NaWt1anfumYaDvgCzmm.9Bo.UizRsuAXwgdJ8mU.o8lzvA9XIvCkbLVZGUiVRmpqAtGrZwQDf.Wxl3papJoo6zyPc.kbNEh1.rWlgUq9PAahikQeTWdENfubJ5bBvLG0kHeKcH5s63FzDhMuf.xgSIro2A7hAbKXlaAUCAAQQNBuiMsZ3OSZptpowJtLEH..ARJ5z644jNiFpfpnG8Qz7zj3g.1ApRD.F4zxvjERIXDW6.CDeK5kWI4WmTB9A.ZMB3u2zI.4A+RN5TydpeS4zoSqP6KZMXRN0GRt.xFRgoGkh7SoiyGPa0gz7XIcl.jREff0QpYGTMVK4B5sVNX5+I7ye.8sBcpXXt2j1T0nYnWzAOwpUKGO+qNdZOTckfwPm1wp40S01g.wKCwj+HIEPC.90pxE7Hn.hxCGX5BgTUKKauvMmgVuLdeTDXH4lO7XP3MIeiuIfqpsKS33hhRP8.rBxJ20QZ4OC98K9JPLAgegH1jPcabPTI+xYytxS47iumkKYel3egjuIoT7lZ0Zjs44MEBpMxlYf5BF3xl861fXGDqvqiPtNQSfRb7IPwmeWSlsDWGsLqXp6teOh43x5Svy.DR1ZAOrB5pKMUqG5kpkezCAcHmpGHVEbaPbaXacpCwVfh5gIuNeIg3Sy88ll5F5Zv.vI4dhGBNd5Rj9bvFI9T3gTWxTjTb6J0N3y2a+MiM9uY+IBElSDGal3.uyUXvYiL3R+1u5ec8Iev4hB4eyu97IZvKJBokoaVG7jb83aKHtMwD7jM35M7YEQeywG6qOW3kU1FLdwb18zn.srdDaWcTANw1jSfE.wxfGw.mics5AJSA97A1BCl2yClTGQTPNi3lOW3LdDc.eAZvpvJFThEiJnly+UkvbdYKd5GKFOPMc4ba9bELXMxABvmEhhO6nB4NPwmORbuxGVt1t6WqrzFub6J6eCPNghkZArKFxcOwMUcNlXeBDpiHf0W2cfAkiUizFSEmUIJ64Vs3EfzgLwEE26vcqIsy9OmGcOuQoA73RLz80CwK+4b7xGODurl5IDSHmp1VR6nZCYhb.jKlCkydB+Z9Hlpveq4uruPze9wg9yJdP45GLVF8pktLF8+8eIGl+mLDlqjSdshYWqP1mzxnut1SLz+k3uZXX03IcItpMfvUOoqkc5t8xI3.Au7k.+ce629usNOIrjq2JmYjvyfbDgLwZe..bO+Ved4Wu49aTa6wQMm8MWJ0TpVIOqLlIELojAMrTs0DZz1emCVRLWlB4xCzUAYAbMO9MrnXtUyTrPtBYU3pOCaDEyUbs7YJtpfKDlleSHnl2S8KRHhIZjBf2qnYI9oRJ4RK+XrtsYIiseSWPOXOZnMn4VpFNDZ66XcJLLnphzhuPmURISdZ4s5CYLzEbu0Cxy2IxH2lkm7F85QTsw8VAZ00tOqwMMf7HfopFt5bnA4zqUj9SgBx4KJmWg1qCrZ2FVqEtV.9YF2FisfTsfDDPTgV2KcHGRZBwe4vk.nAM9LHwJpkYzYpZYegP75oYqDBkL90W1TiC1qk7MixAzDEE9LdiVNCi0iqJoOjGnOqTWUX3hIlEaFWZrPhsD2zV2cKChpY8cSh+8151tCf+9401XuiPawjPBx1VP1qV51IeYc+99x5d8THzu1888qwbrwSiezDlh.G88Pd56iiQeei5Pz2OqjCjPDtRZj4QUkcZhYs8pNDhg2Fr4mQTEMJxnS2NCbe8TDfbeApvkPaaVQ5l80keC+d84TFXnoriKoGmSZvEw+75c00zLHU8VCAm66yCR0l4sKwOYHmSzke3zCjBDpuTHqw53.bBmlmVh5T5YpnZKuqILbb.2dwwERymYaPqgmXJcAgy9l+rQnLArK.Vb.MpfbbQ6PuMf+eu9xG7adwJtvJmZJPfbhUChgbU749.wcqrcEcSM8l31rMVsoshasjaHBLWoPGrHZv6WEcelufRQY4HNbyv5Yb+oQbfeOwMf0FbBjV1NPbQpq1DZLOsX57nWJpzh2SDekoPBLkuCJ5l1pRcNG5GB31j0xw0TpTwb3buIIY6wDz57ytzjGJ8kCaIR2mzfzNWPjt8oRJwMgnaqNuU14GUJtcyOdz1MKmckwYz7kk705Ju6lkqUWXxLVtuW2k1YiMKuyXyI40WJCArZGxZgiSekRLLFkLbdhoKMYhZ+0EMlHJSlb91P1DU0.R51RZW9ptTUjSKEws9CDirg1Q8qyurpHZAIGuKyMp+hxucTB7kALg5bLHcw5CWfrN4ktL1y3yO3cgrdxETgKeMhXZgwartc48pW4fW+1SNk0SNsfOnFqjRXX2KWv9CvoJa+tWprnX8parU481e6xQkHywZPHz1CR732s9jZEQG7aQqnbWI6FeKNFIMYVQ79NFCET5WFmB93gnfO9Z5tJxhoirL6IC8CsnFCx+P6aWjmaGnlnMEX1nJOzMykh4yKx1X2IX+Wl8uMg2964i3A0DQQ8gW1FeMNPUINO5KhyifrkGgU1qGch6+t0MrZdr+g0Ojpc.kimsEiiROaqqwBSb52pkNt9OQIsMEF2xTxbtvvGE+CEgkSyN4Z9aF.tBIuFv4f+33wib2y6cXP63WWfYlrqKvEeaFlTz8iDqp61rynw2oFA9BJLusw2o8WSP4VsHMcCQ1YDe1W7V5lVLMG7miAeviO6NO3cGKVJrrRzKYQvUiviM8e92+u+er9qHtaz0puoKurtpMI5skAHbKGW959q+W9QmmX5IltTtx2fjQpG7CECoBoah160VDHTypOtp0cUAWDnA4df2BX0hMId6QDdPPIlBWlJqrLVFQh5DSMZg+G3GuFUvxI7ZTwuwQXUjzeQyeg2EoILL+HtHMI9aDCOGqd1DzyzAVUMTGrL6lRTC3BOVpA58B8zL7ge4EmXSrGK2zixtNmQ1r2RpH2I78fSYSXO1ksgpa582fEGi0SOKhCI1MDf+wgZOMmnbZ3+D1vvv5TLBftmhIHSn0U0xXPuNVl5MwpX8vGy8s+Xn+KTcNPU2.8qUuuSO.+1GxfvfPupZfujD6QClLKKVz.bWBP+idm4NwNcy.qEdTMTKgpgCRfp9Q6cXbebd824CFmCPytz.Y3kYaZrcF+fg.HDRJpYO3nSItJBiEeb5Yn6doPjtM3ExjK6p4yECYGMZLECMDCQidHnuD1RzYdRIYdX8.eR9nt5mAYcDAfOjBPvdH8YsTwbRFO7hPvQAK2YxA03UBbmMEC9flOGm7P1Y7MsXFZzI9tNK5Bk32i4E2AXDp1fR+oXvzCvy9wkBB9J7NaPSB0B2IZQOVQEMeddajoVcD68pv0aNQ953mSNxFiY3WB7RtqtoGYJhlhB6pdVPYEnL6RgxpZi9tVcA2Q9Q4GRelh.QjqKBxUaR51WrJTDQJehDQDuSEgJlliJlMjJlW7IJxwIDrb8fjCeDTF5C8GkbEkUTVCbgdL4T+rT+8DWMctLYxjWNe9bExojUtn.SsfxM4XCfimQiFwYlyKhP7pgFXGxJqHmE5PwhExULurhePrtVVtc.u595nyJlAmcg6dlxRh0vSpgMsQlbAdywHpfQZglCCu02RhUbNDaEV4f+LBL5HtsP082dtsldTdpybq3oNegUkyVL6U1S8hAdpUdq5pdV1hbh3pV4l4q1mjGqg82O7auXfKNkaOG2KF33V4cjmadx55559Rkvev08Gbc66Gy208UxOlxU02sHa2OZQHZ38v7HMBrHtXf7GxAxV5mkMyQzE1cMcfNCGfWRzkzsm0QNCLaFElOJv4IWOtZ.Lb46gdzFs2k4DojcTOKKJtMVI8Q4D08xLbpfhi2fXVQkBQT.482b.RUgJS4hoYGYZUhOsqMlocIwc6a3pCQYg4HxvElLTl04QM0KHV1aiYuNy6j5a.gz8EeoIJsIZTVu2LLGX8OrEGmpz7hsZbDrD93VK1rk0m1lzjneB4poCM0MKrRRwm4YW4SFHUWPNel7qlsn7ZYVEI9wSS95kCkVADuALDYFq2DJZp2It1CsqhGucx0lxjaLJp.O2+ozEn5rpRlKR0YNT0I9JxtefliCwT6pxjuXm+bNgBHIOs2XAQtEinLunV+tci6aOoHv+6jtaeiPR3iE2Pi8rmfXPRaWup+t0gOImNDP4Kc5gRtI3BCFkScSMg7yLKlWmgkjyFF07CIo8gjzd6kj1MSeddwssG7JXgObADfn.J.0TnfbgUKlM+pS3ZhFZ0mUidd7LHLVud2Cyv5DuG9UTqkeewV5FHElluKWsruvsf1fbl+qAH3Qi5DoDv0pXpQNCOTqmnHTtaChFX0wt4aCeYEpzsWeCGhR5SUOQHjci3CuNdtBn5Srr1Duoo.glctjaq7e3iXU0lvBkGSu8N2HZAwsU61iyd9QhOIa1zYn2iZY40jKlY0UGGh4Y6GhVKf4rMRxNt6kL.Djys5ZYxjMG5.1y0+Kz2pu6E3Z4ZIFuGKIY2N1DUsKOtB2FocqrsseHTxGBk71KTRNfopjaMEkBJqkCVfQ7PIim.hBel8G65OcY3RjBSVnq3mw0kG4ZRYoWm2eF+wgOevG7C5k++49G0YrWCv3+teHHPWdCeEuh6JAc929G95Ri3KCREyS.rrpkgpc76Yxs1kfXlI9xvfjz6nq+vDhi+.1pHeeGIoh92uQxGhWhr++wcc4GwXC+.w5tPv+t.j89Xj3k7ieoagupO8l3upOPxe3GPhnWA0yKsY+VsH1Qq8epDETwuOU8J4g30H8Hpt6xtLfAuD6Z0dtsU+di3VXQOGFa0lGigc4ZXeSBHNc4owsrsbbviwhNWNQt4V8sai7pvZpQ.mYNQqCDs7BUTN8RGBpBo2zW9G1aJTjOf8NefLknkUhUNSrxYiUNWrxqFq7ZwJmOrbvmjElhwg5VF5lNC8h7mcx7ECyC8hZx0yM0aG.CVMe+9yxzz9WVPDx612k3eYACJGMn4sVTMtubASMtGt9l8ccAGarGBfdaSHmcuph8.1+tw+364liG.KO9r5t8adL9UgvYDuf96rKI6sivaAebjkiSYHWDCHqof.szWcqesYhfk6ZYZ4euy3c..FzsaSr4w8QRPa35haOdPMOpTMhAQ0Ije9k+pRrymNpesqDu3V51g9GHxPWIzm962Q0uvKz7zSzEZ9VAGeGbIlmTVz88h2y9Jx7dnLbIQZXIILKh+uVVY9W4Wz5y6uYa52zAO.jDSY.4QXD4kK38JEfHzidQaQ+JMlTDem5ubmMpc2lRW7fa2NeXFm48tL.9dPbt6vG.x2W8WNpvewdN.weHWe3IAbm9j.lm8N+bde+8.Dfm25OF.u6DUWvoFCbwNupPrIrKWuqmThHGQV3Gk0QbMrvc9On869iGSRL9mOzWAoKztiqD1OfQOtCHipsGYuem8peyVBdbfS9c3X0HSUlQbNPqkUtXlh4WCOIzb4Kl26bfntl42l6hEKjMWwBExup7pqUnXTnNyEbjTyIVfdpAL0ovWO6EPDSD+H7wrdSmo4Eq2aTmL0U+vAHt8MuCO+hoie9Ag7jI7DDd.dRffTOqbt0JLwGCdTizpi9IFKDG43TfmPrid1UYxJuV17YjyKmUIypJ2bTjCOFBG4UPm.c5nseiwLdne2cTL2EgbuKfA8yVxQd2gUjoMOsFvLwj9MHXItGZ5ve4JwfXG0ro+rkXpl9ehQ0NpWnVxh3tQE483x0HCkCp3nQ.2tQO3pHOS7uacHKB9V6n2ldHVI+M+5deVx+q0c.e27cGeU4X4u9Q+iO+29U+UqqSOQKVNhnCMKSiAT8hqEsL8HnkEQaGWog+TbUH9KdOBoj9beRIXYkSNoLUDRIpLUDeNjwElUhKLiMHHafg1+vOLB+Qfqh0KhJ0EovtUKyx9IQ4f8IXZg+WKC283B

d.healey

@LozPetts said in Is it possible to insert a looping video in a UI?:

The other issue with this approach seems to be that obviously the knob has a certain range, is it possible to 'loop' the knob from 1.0 back to 0 automatically so that my filmstrip appears to loop forever?

HISE | Docs

(docs.hise.dev)

LozPetts

@d-healey I've found that but it doesn't seem to work, pasting it into hise in a blank project and filling in the filmstrip name etc throws an error

HiseSnippet 1366.3oc6W8taaaCDWJIpaw6OXEXO.D9CCxotJxaC6C0nXsw1YwsMIF0oYcXXHfQhRhnxjBjzNwqHOk6EYuAaGojrjbbBxFv91DRLDui2we2u6H4oIBd.QJ4BK6cOaYFwx9ycltjoRFjfoLqwCsr+RmiwREQfxEcvxLrTRBsrs29mzBr2cGKyye9iGfSwr.RkHKqy4z.xanynpJoSdwqoooGhCImQmUa1e+KFGvYC3o74.d11w2JCG7AbL4DrdZa4XY+nQgTEWLUgUDok8NGvCWNMgeEKe9mSkzKSI5A8rlBNJW7g7zPMh0RsFjPSCmTF2RKvKSpXgsyYgu14XZHck7J13qLJPUVTmOr2pI71tA75cWvaCPxtFj1IGRO1YZfflopznwym4LlAImHLP60gR9bs15O9DmAbXFLk2L7GHGJfAqrv8G786hfe5zueq9s1eu8PCDDM1QXDkQif+UjzkHAGhHL.cTBAG5g1a+VTVJkQPQyYAJJmgBLFdDndZl.rxkAIstnq6hV1o0GagfmTd.NEcEMLlnPOGUhKbX3DLijV2h9FCL+TNMIQG5YDghRjPbL6USO8jBax8OB0FbtJo8yPeKDXkxRHz3D0ZBk3EjwrIBB3VPkRLmrRGNMke0.32KgxOIns8fTJ7VWzQ7EvFguAMTfiior31FStoNb2eezqorPfzxD7ETntCc4RzHXiA5HvIof8OqiYl4DgWJGGNdFTk619iSd6ouZzfyt3vSeyvQu8lyOc7PuLXY5hZGQSmIUPRsc8UqvGZtApPUukOWAYE2xrhab9RUxOF3AQVv7THYgTIDHMGRtF4pec0RfRvRTOeejDhaBD2DbPhl9xtFk.j4Jus.KJbvyQYXgDnTE3JpzCP043z4D2N6ANxyu.zq.t9I1KTfupH1qhutneEpJg+JczOqSptcpDbjIi5142LSKG.6owWwprdB4LvND7mNHkDljpnKnpkHdjQjo5FXq5LZHTu6UetOG8c99Mc6TnFx3fPXGNvEP3h.hSPhHBBbNHJhKPPYDBByXTHIUgk2ZMz1ZXJXE.dZi41i4ykjxBxpjKYAruX8DLMJWtWftlkD1Yklp4The3np7.HXt.PrpHFzvtJHtJgvLQftfugKtqvXsBfpL+M2tFXEb0qv8f02IInK4pDD9ZchjiLaRQgTbLmgKn3KII3ET31iFVqKRMjO.sp058nmfdZOOenvoR3uzugkqCBFWLCmR+8hrtwmyk.sXFGSA+Tu9Zyn3jRmDB3I2G6mSYqWyc+fo41XF4pxJPVn93LVfVEUo4JeOOud2BMfIMxXqkGex5vsIbpY8pWeJ5XrJwKJkyEtkR6b+gw6xBKigL8s.MzavkrrR5N7nYRAIXVLIzcS5DjL8gi2tRrw4DBhZtfUTT2u0M8Wc0FmcBWQNk4puHa2VfsqqJJZi5zWcI3ovY9aTst6Gw8YnKa9rKIht4Y1USDZInYeFO5g0mQP9Mo0lHmMFtg+zLRw36uQIqhqhg2d23gP0htQkBYUWMCxFRV.2aj21xtNCIxOn3YPee2pmFnaJdntHtYKV59JKT.7Qi9Zz8tn2frrdemq220N2Me3+faK7gB2G6LgpBR1Ld2ZC3EXs+qwaQWregynnHRfpBr63b36+21xp+81xpUduGwvI.B50V1NmLe1T3n3.Br5LXiM3bG6szUQ4i80i0rwTBKzL3ufmBk8zisKT1qTo0LbffeQP9tCcexepQBfIl4SDfOdAC6hySClMM0o8YPm6WDDzzaqr0w4kxj+oFAeSx+awcZg9Skd4bEeVdBwx53IiLmaXaOho+bBSIn0eCxDkER.

d.healey

@LozPetts It was made in a really old version of HISE so probably requires some clean-up to run in a recent version

ulrik

@LozPetts I looked at the code and here's the error code

        if(event.clicked)
        {
            // Store the current value for reference when dragging
            widget.data.downValue = this.getValue();
        }

replacing "widget" with "this" solves it

ulrik

@ulrik tried to set it up as an animation with a very small sprite, 19 frames 50x50, and it works

here's the project:
project

Straticah

@LozPetts i see, you dont need the whole loop, you can loop this using davinci smooth cut to around 2 seconds. Other way is to separate dark and reflections ij photoshop and play them at different filmstrip speeds so it looks like an infinite loop.

LozPetts

@ulrik Thank you! Thank works beautifully - I had a few issues but I've got it going smoothly and it looks killer. Thank you to you all.

RE memory usage, I cropped the dead space from the video when I converted it to a film strip, according to the image pool table it looks like it's using around 100mb RAM, much better than expected.

@d-healey Once again thanks for your help - is there a way we can update the documentation to reflect the fix above? Or can only Christopher do that?

d.healey

@LozPetts said in Is it possible to insert a looping video in a UI?:

it looks like it's using around 100mb RAM

How are you checking that?

@LozPetts said in Is it possible to insert a looping video in a UI?:

is there a way we can update the documentation

HISE | Docs

(docs.hise.dev)

LozPetts

@d-healey I saw in another thread you advised someone to check the pool to see how much memory the bitmaps were using (if I understood correctly at least!). Created a popup window, Image pool table, although looking at it now it might not be showing the full size as hise sees it.

d.healey

@LozPetts Perfect!

ulrik

@LozPetts What software do you use to create the sprites?
I've searched for a simple application for Mac OS but I only found some online sites who had that service but the sprite sheet was always horizontal and I had problems using the "offset x" instead of y, I couldn't get it to work (probably some stupid writing error from my side)

So I tried another approach with png sequences and loaded all pngs into the panel, and used the

g.drawImage(images[index], [0, 0, this.getWidth(), this.getHeight()], 0, 0);

switching pngs instead of using the offset function.

Here's an example using 360 png files size 1920 x 1080, weight of 71mb
I scaled the display inside Hise to half the size.

It works quite well I think

But I would prefer to make sprite sheets so if you have any tip of software for Mac OS, let me know.

d.healey

@ulrik said in Is it possible to insert a looping video in a UI?:

But I would prefer to make sprite sheets so if you have any tip of software for Mac OS, let me know.

Strip Generator | Blog | Wavesfactory

Free app that creates vertical and horizontal strips from a collection of JPG - PNG images.

(www.wavesfactory.com)

ulrik

@d-healey I had forgotten this one, thanks David!

LozPetts

@ulrik That one didn't work properly for me so I use this:

CSS Sprite Generator - CSS Portal

Welcome to CSS Sprite Generator, the fastest way for you to make CSS sprites.

(www.cssportal.com)

What I did to get this working was:

Trim the empty space from the video edges.
Convert the video to GIF - https://ezgif.com/video-to-gif
Extract the frames from the GIF as PNG files - https://ezgif.com/split
Convert all the PNGs into a filmstrip with the above CSS Sprite Generator
attach filmstrip to Panel in HISE.

/** Looping Video Panel */
inline function createHeadSprite(name, x, y)
{
    local widget = Content.addPanel(name, x, y);
    
    Content.setPropertiesFromJSON(name, {
      "width": WIDTH OF SINGLE PNG,
      "height": HEIGHT OF SINGLE PNG,
      "saveInPreset": true,
      "allowCallbacks": "Clicks, Hover & Dragging"
    });
    
    // Asset Strip
    widget.loadImage("{PROJECT_FOLDER}FILMSTRIP.png", "filmstrip");
    
    widget.setPaintRoutine(function(g)
    {
        // Calculate the index (the filmstrip has 100 slices, each ???px high
        var index = parseInt(this.getValue()*197.0);
        
        g.drawImage("filmstrip", [0, 0, this.getWidth(), this.getHeight()], 0, index * ???);
    });
    
    // This is the sensitivity of the rotation
    widget.data.sensitivity = 300;
    
    // Save the down value as reference for all drag deltas
    widget.data.downValue = 0.0;
    
    widget.setMouseCallback(function(event)
    {
        if(event.clicked)
        {
            // Store the current value for reference when dragging
            this.data.downValue = this.getValue();
        }
        
        if(event.drag)
        {
            // Use both axis to allow diagonal drag behaviour
            var delta = event.dragX + -1.0 * event.dragY;
            
            // normalize the delta using the given sensitivity
            var deltaNormalized = delta / this.data.sensitivity;
            
            // Calculate the new value and truncate it to 0...1
            var newValue = this.data.downValue + deltaNormalized;
            newValue = newValue - Math.floor(newValue);
            
            // Update the panel
            this.setValue(newValue);
            this.changed();
            this.repaint();
        }
    });
    
    return widget;
};

const sprite = createHeadSprite("LOOPPANEL", X, Y);

//	timer for animation (FPS)
reg count = 0;
sprite.setTimerCallback(function()
{
	count = (count+1) % 24;
	this.setValue(count * 1/24);
	this.changed();
});
//Speed
sprite.startTimer(62); //Play with this to set speed

Hope that helps someone out!

Is it possible to insert a looping video in a UI?

HISE | Docs

HISE | Docs

Strip Generator | Blog | Wavesfactory

CSS Sprite Generator - CSS Portal

44

1.7k

11.7k

102.3k