Options GUI Editor

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 👍 or 👎 to give our bot feedback!

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

[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();