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

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

andioak

@lalalandsynth said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

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.

I know this one is quite old, but still relevant! :)

Perhaps it is more efficient having an object store all latest values with each knob twist or button on-off action. Then loading the new set of configured plugins into place followed by initiating the values of the current states object. The states retrieved into the plugin structure will be the latest recorded for each UI elements.

Not sure all plugin states or knobs can actually be stored. I mean, it can be stored ahead of time in data inside the HISE design application, the one we use to design a plugin, but to be entered into the same strings or structures in a finalized plugin? Hopefully.

Example (calling JS/HISE object "currentstates"):

initiate plugin, currentstates.plugins.plugin-in-question.control-name stores initial values if not loaded from a preset.
twisting the knob of the plugin-in-question updates the value in currentstates.plugins.plugin-in-question.control-name
reordering using the drag-and-drop re-initiates the reading of the object based on released state

This approach is common in web dev and the tech stack item is called Redux.

I guess that part could be seen as pretty obvious but still, if the saving of all of a plugin's states can be done easily, the approach is simple. Perhaps the even easier thing would be to run the UI elements's UI callbacks on re-initiation.

Is it possible to run a callback from script? Or is that just possible with actual user input?

(there is also a way to just run a function that does the same, extracting the actual actions from the designated callback function, which would do the same)

Fortune

Beatskillz has just released their latest product, Techno Keyz. I think they used Hise for this (Like Retro Volt), and also it seems like they implemented the Drag n Drop FX chain in this product :) Who did this?? :D Does anybody have an idea how to do it?

https://www.youtube.com/watch?v=ice_3i1_A78

Natan

@fortune I Don't think It Created With Hise, It's Ugly BTW :grinning_squinting_face:
LOL The Changing FX Page was The Worst UI I Saw On My Entire Life, Even When I Was On Mars LOL

orange

@natan It's so natural that you can find this ugly. Because you make great GUI stuff ;)

Natan

@orange said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

@natan It's so natural that you can find this ugly. Because you make great GUI stuff ;)

Oh My God :folded_hands: Legend Is Here :raising_hands: :raising_hands: :raising_hands:
Not Like Yours :raising_hands: :raising_hands:

But For Real, Why Those Adsr Knobs and AB Knobs Are Located There, That's Simply Madness

Like He Making A Spaceship, Or Airplane???

Natan

A Combination Of The Center 3D and Every other Element Flat And Minimal Just Makes The UI Standout,
I Like @hisefilo Designs, I Wish he Join The Vector Party While Keeping The Center 3d, That's Going To Make Me Like Orgasm HAHA LOL Thumbs Up :thumbs_up:

And New Designs Of @orange With The Combination Of Top / Bottom Flat Bars :smiling_face_with_heart-eyes: and Middle High-Quality 3D Modeling. Just Super Nice, Room For Everything, and GUI Kinda Breathes, Well Done

Yeah, Not Everyone knows how to Dance With Graphics, and Make The UI Eye Catchy.

Christoph Hart

@natan the arpeggiatior controls gave it away, they are basically 1:1 the HISE arpeggiator features...

Natan

@christoph-hart
I Know The Guy From BeatSkillz,
He's More Like an Investor In Audio Plugins Market.
Nothing Made In-House,

lalalandsynth

I would love to be able to shuffle FX around like mentioned before , has anyone come closer on how to achieve this ?

Lindon

@natan said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

@christoph-hart
I Know The Guy From BeatSkillz,
He's More Like an Investor In Audio Plugins Market.
Nothing Made In-House,

Yeah well RetroVolt was done in HISE (cause I did it) but Gaurav has moved away from HISE as far as I know... so I dont think this was made in HISE...could be wrong...

orange

@natan said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

A Combination Of The Center 3D and Every other Element Flat And Minimal Just Makes The UI Standout,

For the plugins, now I make the combination of the vector and 3D stuff but definitely need to go with fully vector in some projects ;) :)

Christoph Hart

@lindon said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

could be wrong...

I'm 99% sure the arpeggiator are the HISE slider packs connected to the 3 slider packs that the HISE arpeggiator offers - everything else would be a superweird coincidence.

orange

@christoph-hart said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

@lindon said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

could be wrong...

I'm 99% sure the arpeggiator are the HISE slider packs connected to the 3 slider packs that the HISE arpeggiator offers - everything else would be a superweird coincidence.

That's why I thought so.

Lindon

@christoph-hart said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

@lindon said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

could be wrong...

I'm 99% sure the arpeggiator are the HISE slider packs connected to the 3 slider packs that the HISE arpeggiator offers - everything else would be a superweird coincidence.

Well last time I spoke with him he said he didn't like the way HISE based instruments did the sample install and it generated too many support calls - but hey maybe he has a way round that now...

DabDab

Once upon a time Gaurav Dayal used to use Maize sampler (Like @orange also used). Now Gaurav is claiming he is making Plugins with only JUCE (not interested to take HISE FW name)
Watch his so called video

https://www.youtube.com/watch?v=spIRIAjlAic

orange

@dabdab This video is from 2018. But 2 years after that video, in 2020 they released RetroVolt which is made with Hise. But I've just checked their website, it seems like the plugin is discontinued now.

Natan

@orange

For the plugins, now I make the combination of the vector and 3D stuff but definitely need to go with fully vector in some projects ;) :)

No WAY!!!!
Vector GANG :raising_hands: :raising_hands: :raising_hands:

Svg & Vectors are so 21 Century, Can't wait too See You Magics :raising_hands:

Natan

@dabdab said in Creating dynamic fx's with Drag and Drop functionality in javascript?:

Once upon a time Gaurav Dayal used to use Maize sampler (Like @orange also used). Now Gaurav is claiming he is making Plugins with only JUCE (not interested to take HISE FW name)
Watch his so-called video

https://www.youtube.com/watch?v=spIRIAjlAic

The dude Looks Like Car Dealers :grinning_squinting_face: :face_with_tears_of_joy:

@orange All Of Their Plugins Made By AudioThing, I Believe AT Stopped Supporting it, and Also All Their Maize Plugins, Now Fail on Mac ( Because of The Maize Guy Disappread Too / and Maize is Down / and Notary Issue).

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

19

1.8k

10.4k

90.8k