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

LozPetts

@d-healey960 × 540 - though when I remove the background I'll be able to crop a lot of empty space

d.healey

@LozPetts Ok so when you multiply the height by the frames you get 960px x 129600px

Which will use about 500mb of RAM

LozPetts

@d-healey I'm not new to computers at all but I'm pretty new to this - is that a lot for a HISE plugin? In a world where most machines have a minimum of 8GB and those running DAWs likely a minimum of 16GB, is 500mb really a deal breaker? Kontakt libraries can be 10x that, or is it different in terms of performance impact?

d.healey

@LozPetts I think 500mb for an image is a lot - unless that is the primary purpose of your plugin. And once the UI is closed, which it will be 99% of the time if it's like most audio plugins, then you're using RAM for no purpose.

Usually plugins aren't used in isolation, so the less RAM each plugin requires the more plugins a user can make use of.

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

28

1.7k

11.8k

102.3k