Creating dynamic fx's with Drag and Drop functionality in javascript?

d.healey

@orange HISE isn't really using JavaScript, it just looks like it

Christoph Hart

Yup, I thought about renaming the scripting language to HISEScript so that nobody gets false expectations and tries to run Node.js in HISE :)

Anyways, there are a few API calls that allow dynamic FX chains (HEXERACT is using 8 FX slots that can be dynamically loaded). The key ingredient is using the Effect Slot module which can dynamically load / unload effects.

HiseSnippet 960.3oc2V80aiSDDe2j3SWLDzcHD7pUEOjHcTk.2cfDBQulzfhf1KptTc7T0l0SZV006ZYutznS22G93w2.XV+mXmK9pZj.d.+jm++alclY24wZNjjniIztWrNBHzO1wesxrZ7JlPQlMgP+DmSYIFH1Km0wqiXIIP.gRa+SVFztcHYe+4OdLSxTbnhEgboVvgeQDJLUbmezOKjxor.3BQXMse9Qy3Z0XsTmh3osyPRDieC6Z3LlUsVND5iNIPXzw9FlARPcNVGr1ek92U45eoHQrPBVhQDezQ4rIiWIjAyKy0DBg1YdUl2NOy+LmSEAhM7qp.OISfWkE0qAzVaCoNaAoQeHHMUKCrN3C.OZM30IGdO0wmGKhLURrX6iblovCmkLrrWGV45RZ8GTmwZTCk4vP1MvzXjXiE8e4vgOy6ECGN36641yEK9IFuaYwdIRsw6G7x5DN7Zv3izSeS+CNY4Rfa7rjGjaiPIEJvaYphaDZkm87Kbg9X8cirwMVK6y0gQZEhfmg9VlBC5491dtcsw3vDvj6yJsrwalABu.tyzefMJuKKRkoAJdbot8OXSzNXf0YEwbLSJWf8N82ENVGVCsmoMvqU8G39V2ttuaGIKW1jnBWIg3ljZapiuGy5qRCW.wkUiB8vy4sajdzCqQhmWVponVMSILuNBJnqZ0F0PqFontZa5J.HppIqk6IEsbk0PhHv1wsojRxxfZi6GQ90YSXFVoyP+hwJBhMBaJQm.2hqCx6m65LARtwnixzs3.ES6GXnuiPcnmgwbs8mKweBYY7Zg+Jv9GLdegiuHLRBmC2BwKbmrVwBEbLo2c5Bmw0AoRlY6Ae6FtBA3Y3VSX1oHUhvrt9Fv8XavvF2Fz3QzCDtO0YtvvW0Lda0.dwio+swawt0dN4i4Ufsiyz27e7hzBr7Xm70YYvnDXY6z1FOsuu6ZFsG20TGCeZNFbc1zLZQwmWGEWsQz120ZfSTLLhA0O.sruXULjrBqCuufWYL3Rv58mVtmCRfkTar82NxN+EmgvFBQkvFCTk3ysMc0iVkn2GIeYsP1.dxdv.zDXJjzHRJjsaVWHXm.UGEmh2NlF0f61Uv+XcFjy0oFg55SYlXgc40Yog93ie3.NmnTfLobgVA8PKsEB9fJHi3uvuBgirzzBgiJE9+lXDx3w5q34WQYGqdbFGr1pxddXW7cpHs2lakr07P7gaWw410Me0HBoYK9581huYus346sEuXus3k6sEe6daw2cOVXek7qRM5v7KePFyOI60.T5lIYZaxeCTs1Ul

orange

@christoph-hart That's great!
How about this? I think Hexeract has similar function like this;

alt text

Could that Drag & Drop be implemented?

resonant

@christoph-hart Can we do that?

Christoph Hart

Yes, but it's complicated. You definitely require wizard skills in ScriptPanel coding if you want to do this kind of thing:

enable draggability of Script Panels
check in the dragging callback whether the position changes and update an internal array or the slot FX order.

Also these kind of things are hitting the limit of what's doable with a scripting engine. I've done that once but if I have to do it again, I'll probably write it in C++ since it's easier to debug.

resonant

@christoph-hart
If we want to make just one feature: "enabling draggability of Script Panels."
Can you give a starting point for that? A resource or hint?

Christoph Hart

That's the easiest part:

Panel.set("allowDragging", true);
Panel.set("allowCallbacks", "Clicks, Hover & Dragging");

Dan Korneff

@remarkablex Did you make any progress? I'm about to head down this rabbit hole. Might need someone for emotional support

resonant

@dustbro

No unfortunately :/ But I am sure @Christoph-Hart could find a cool way for this, like he always does...

Might need someone for emotional support

Yeah all need emotional support, dude :)

Christoph Hart

AFAIK, @ustk got pretty far with a draggable FX chain system a few months back.

lalalandsynth

@ustk Trying to work this out now , any tips on how you did this ?

ustk

@lalalandsynth The very first step is to learn how to update an object with mouse drag.
Create a panel that contains an object with several rows. Swap the rows with mouse drag
Each object should keep track of the position
Paint the object in the panel using the position

But first, start with very very simple things, like creating an index that follows the mouse inside the panel
Let say you divide the panel into 4 parts, the mouse should update the index from 0 to 3

lalalandsynth

@ustk Excellent , thanks mate , will work on this .
So starting with something like this ?
Draggable panels.

ustk

@lalalandsynth The main issue I encountered is to actually swap the FXs... Changing IDs in FX slots if I remember well...

lalalandsynth

@ustk You mean when they rotate around ? Its simple to change them when static so a problem arises when you swap them around I guess ?

ustk

@lalalandsynth Dragging panels is not my approach (although it might work)
I do everything in one unique panel. The object represents the rectangles, positions, FXs, and anything that needs to be painted...

lalalandsynth

@ustk I see, I guess I was thinking about that approach as I wanted to use a png , but I could use a vector facsimile of the png while dragging I guess ?

ustk

@lalalandsynth Yes as I said I don't remember well, but something wasn't clear about the IDs. like they are changing/ adding a suffix when you swap, so the name has changed and the module can't not be found later... Something like this...

ustk

@lalalandsynth Nothing prevents you to draw images instead of vectors. The only thing is to have the object that updates with mouse drag
Step by step is the only way.
Draw rectangles of different colors and move them according to the object data

lalalandsynth

Ok, as for the ids , I was thinking of having say 4 fx available per slot , then just switch which one is loaded , obviously i would need to think of having the sliders and buttons
copied between them.
Something in this direction , unless I am missing another obvious way to do this ?*

HiseSnippet 2860.3oc6as0bhajEVLdzLiIKISRsOrOpkWVbFGFIvfMYprwb0Fa.yvMi8VakHjZPBzM2pE2Rkp1G1eC6+u888g8evtcqKFAFayvXOWRfJoFzoO8oOc2eemVbNtqB0E.ll5Pp.a2XhAfJveft9DMjTVIdYMph4nB7kzk4MQ.HiinLSL3MMAhTABr0QDAA19oT1e9u+XFdEdMAvLQTTszkE.kjUkQyj9yGdprhRAdQPCYUeZu2gEEz0xpqnag8msnYoL3EFv2CTgmn1SnoB7r7hxHcXcDOBXRE3oYzEmTWRejli9sjMk6n.HOvQUGaHGwEzUDIdLQJUVIYEwpdyaSJrUpNaUXKmUg+HcYYQ4qkOa03k1MvLqG9WOB7j6x8376drqt68Det2Scbuultt.T1.MqEhu8MtRuEuyoQpmr0Koe82xzPR1jA+e7LY3MAI2iAL1PGh.hLlDu+6CELTvs4hxXBT.BHFjDfQUWzRArKCtgXQYHS0u6ulEBvZesMzDzE8LAVs3QYpR.O1c2DAk05wzEpqZ+rfhrQGcdnHVwPAY111iv..Dds1zViQR5J.GiwDwz182kwfGhgCD.4PdEKf4tL.jvNXaDgW.YwqnLgQF8WLY5aY531dNU6xkXvSFUfFBq9295PAwCFVmg7PFGiauuw7CLgieP7nw0EtnFqYsrYylOUN1SPYRLop94rokeaLVoig5Yjzpz5HoXJrhSyW5T0Z0LRzX+zWDauqjsxmRQqnoPhbY6UMUpJp0GGaO0QWdxQkKTKKTPAAyktU6psPsZb4YIaEe+5ox1I93ZnQcyGU1THawgoJ0Nmdo94RdtQ9S3q0Qtm1jlYtp6o4KfZV0HN5HDncazj57Sk6HLM+IW1Z5aeKppo1XN0yaD+hZRGnN5.oZBIQGU.AhKzznCX+2N3RX+qFoOscQvER8rzZHUOdK34SKUbvqppDOOjO9U8Dx.3mz1ntYOwipMVcRySZbYJ0y6O9pLkKVuQySU5kPrR5StJ0drcFLn9o4ZUS8BAfZ51IK2+jVJkUEqkFZlsPzXGWR5hZvz8easwfSye7.qLcDJxkfCTqK6T8gJWt+4bfoSsZrW4AFkS0t8zN8fs2OQJ0zQamo4E4MRZ0mmURMcqgMad5XsSDpTwnbRgNPyn.M13MNiKcuRMZ1HapwlWVtxP4KLKbDj63obShFqZ0qNVX7nVmsWmpI0poznQ2KqFuPCtxCiUqWhZmLLATN4dh.ViypTHUg1Wn7pZ4C+FBCvOFothNBCNrCOFsG.QdtP6HgI+a3crUm70nl.T9tcwjlHgyqZflTnsaqu90LMMIbALNGaPYdbr.FjNFfqCcnHBVPHFdx3z+PAgfddxbD8FhU9yL+vCvGlL55CT4gCHtluoYVE.OLiEBoqgmsYw7Q7nGkWTzQVjv9TH7tLbr3+mam2Plc+sSpeVE+F3uGzq+3EEbTIC.DICLKfCAPTcQa8K3v.LgM4GBJpUEBv8I72yvtqsTHunr9QPcKCrrvbgCE7WcGzWeiQMTPYMEYM.SWKMAjLdhfOVYV6DeBpqDQPW0PWC6c65DJAGU.6AaisYIcdQbjw5xpF3sHxwbtA+X30Dc2ujQLXwjcMu8xn3NO2tEAsr.hvwjDKZCJvA91tfLzDU0KpFQ4HgAZDCJhWSPPricqZ1h32QlaPIPyzHbr1NVHPD1cHc9Wswe9VBH80cYHKNjYG74rQV1ZzNON.N+rJ6Hu2EdyuFD.WBBhi0OhyuF2KjaAy89f4labIqv2D14Wk6A2s53.rG3dtKOCfDhw87KltimCftJ3Q6N5FhZaene6SNm6UBXhnfav4jYuCiISEYEfIgMPFY7BHYrsUxwXx3MCXWdAf6w06rnSE0sO1G9Fw2Awu2nd2oSznQYtP2hQfWiQTG6l3kK7zhQuK14jQx7Jxl7NaWccBNCbVsj.P2IA4SD7qYDkgrDvf4vVJ3H4XOGuQZRdGDrWwfrCnicqgduURTamvg84GIrb52RvJOR7ukS+3te9G2CLAj6CKCjaCEbCEzEJb+bPNejvG+26Z9034ohmpo2IR340.CHiyhYhyQDmWk6kJdCK5vE8f7eOSWd7h7tKkftHUbggdYTw4U4d3htjLIfv.F4tDZlCjXDuoMD.yIrIZ3ccYjISWhsY38vejsc4tyCPI39E.9lyAY8bf23CybSn+MAMKcdQrhu4dEcD3LsH6D7WBtcveMHyhM0s6Ray0XJ.3Ralj.E3c0wHZVpc.PuYlmhTAd57opH3smpB+YRQvAO4SQcshXF7YFfqe1Yl5Igk55IneQylW9kZOcVhZyDcy7iP4hwweqYwb7HdJp.AbkMCyikkCLTV.3j.ksoyALGfzMvKDY8veTAdFxt0uj1eX.JYQp.gn88xwTioBPGHHdDmP9xWf+he1A17OyK+WyN.yK+NqxnsfH6g6e4MbAWyg64yOb0UjEAP6g6kzyifcFvcC3NfDCah.F0km5kstC+2S+m+3s4DtgO755pMk+p4Dw89LmW07k8EzE8NYboIJC9mn8hepxO.fCapgttGQRRB9lfk08zgMYTaSF01jQs6KiZK9COrwGje2Q3Xr6Q.HVUJzmOS1r4xKTPBlCpymHu1QoG2L5wMMN8xlMDxKInUc+bRCJIJAEZvW4f7IqVMSwVYmXrWYvAuZh0zQr8iMoRzIotPSNZGT0KiOLYxtmwEM9oRRJELpreqDsp.uT6pwIKlua6BJM0lllqX1loGejokTyriak5b9Nm2OKOq3AoyJjtOrWc9SS2V3JNsSrR05rbSL1GUCVsQGiSKUhU5bKy7IOpoXoloSojL6kIGc1UYpb.H5IoLdU+9IEXmlf6jqFTZzv7wKc7EB8OWI9wYpM1nPuWIOoeaQoQEGs+URmM.zQownZw2K76bBHmWYtaSatUHek15caM9IbpLWLssqY9LCs7DZF5QNilg1jRyOOSo4Gdzbr6ENGyEOmf8AAOG6cBPG68BPG6CMhl6SPHcr6ESG6wFTG5AIU8gtkTEF5wNY8g9sU15yAT3mrIOg+9IU8u4Q7fkkSric+L6XdT6DOTT626SVdG41w9Tgbysgc+QkcG69o2ezNhcEKGmcQ.dvNjk6C7oreZVQN6W+qFXH.1YCe7S3px8nyGW2hxwwNOg7FEG6wtvbg1TYt6nxbe9TWN5Gp5xcWENyodYXuBq5sVjnuZNQbT1N9rxA8e9w0q7aO+2KkeidcK+l3cLfuG0V6Z6utSnWrxPkwW+23++H+gSt9geV6vQxhHoqEvHbnDPtmju6JPkCM7frEEsKjG9r5eZV9Yntt3UjleN841FbU2l8mIkEPUwV4UkXq0tPrEfUuSi2Mqv4KoKSx8EOZ9Kq.YIxsAb3m4pxIoRlZlxnI9uAGOJ2fgU0c+Z5pxHAok6uOYI9K4xQ7H6ut2GjPzNGKMyYeJcg1q6k+X42ME166xe35Kuf1oTN1twyreXdGYq4cjsVMGYICd.eC9Kt95AMi64rosHi71ugPTT1+DW+BNet..TWb3RtCQE0vuHNpptBObws+Gro5SWYLpchl+rgS8Mz1K4eN4v1PhOeb3WRWk+SA.QMcKjrVux73WZlbzREK055VPA.1U0z.JjWlLvSHuxfyyrd+84TGnIZ+v+C+wsQNxyAbajyqwOHiw8Dv641Ov8QLh2233AaB4sIj2lPdaB48YxXnxK.0+IAmemOg9+BaI30VM6aW81zkIOyb8OrmllMJKkprn7OIHPde2uCuGr79DaM5S70nO6sF8IwZzmjqQe1eM5yA2YeHWz7zVHcUGNFVP071IXIPf7d+E1FXKp+OgUkB1A

Creating dynamic fx's with Drag and Drop functionality in javascript?

15

1.9k

10.7k

93.0k