Tsparticles: Options GUI Editor

[matteobruni]

The tsParticles options are becoming huge and I think a GUI editor that can be easily added could help a lot find the right config for everyone.

I started from dat.GUI but it didn't fit very well because it handles array really bad, and undefined too.

So I restarted from scratch but it needs a lot of work for creating the right components, if you want to start contributing here it's a good place to start because you'll explore all the options combinations.

You can find the project here: https://github.com/matteobruni/tsparticles/tree/dev/core/editor (/core/editor from this project root folder, for now only in dev and staging branch)

This issue for now it's not scheduled for a deadline, but it has a requirement: No UI frameworks like React, Angular, Vue, jQuery or others, this must be easily added to all tsParticles installations.

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.79. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[matteobruni]

A little update on the current editor status https://codepen.io/matteobruni/pen/mdVOPyL

Made a library with the generic code so it's reusable: https://github.com/matteobruni/object-gui

[heaversm]

If I want to use dat.gui for now (I just have one thing I want to control, which is the interactivity mode), how do I trigger the interactivity "onchange" event. I can't see from the codepen how you are doing that.

In other words, what is the "reinitialize" method of tsparticles?

[matteobruni]

Hi @heaversm,

If you have the particles Container (the main class) you can call the refresh method.

If you don't know how to retrieve that there are two methods:

tsParticles.load(<id>, <options>).then(container => {
// container is what you need
});

// or

// index is 0-based, it is sequential to all tsParticles instances created.
const container = tsParticles.domItem(<index>);

// if you just have one tsParticles instance
const container = tsParticles.domItem(0);

// after that just call refresh method like this:
container.refresh();

[heaversm]

Thank you - this would be great to add to the wiki under the API section!