DAT.gui - production ready alternative [closed]

Question

i am a happy user of DAT.gui for local debugging and controls of charts that i'm working on, but i need something that has basically the same functionality

• control int or float range with a slider
• pick a color

but i need it to be bit more customizable so i can style it to match our product and eventually add new features.

Is there anything like that out there?

Montford

Btw, i realized that some people might know the answer, but not know what DAT.gui is, so here is the link workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage – Montford

What's wrong with editing dat.GUI's CSS file? – Heelpiece

@JosephLennox, nothing, that is my last resort. But i remember that when i was looking at the source code that i saw few places in code where they set css properties directly from code. I would prefer something with clear separation of code, style and templates. Btw i totally understand that style for dat.GUI, it works really great as a controller for demos and experiments. – Montford

I made a list of alternatives once gist.github.com/SMUsamaShah/71d5ac6849cdc0bffff4c19329e9d0bb – Vu

Answer 1

Since dat.GUI already fulfills your needs your best bet is to stick with it. It's licensed under the Apache License V2 so you are free to modify it, make it into a closed-source project, etc. You can even release your new code under a completely different license (see Wiki for license comparisons).

As for changing the styling and adding features, there's nothing stopping you from adding your own CSS styles to override the defaults, or from adding your own js features.

Edit: Looking at the source, it appears the styles are set in the style.scss file in the gui directory. So you could edit this and re-build it, or just mess with the output css file itself and then re-compile the whole package (the source page has instructions for this).

Tiro

Thanks, see my response to Joseph above i just wrote. Customising DAT is my last option, if there is nothing else already there. – Montford

@Montford Note my edit. DAT.gui already has separation of style from js. You just have to rebuild the package after editing the provided css or scss. – Tiro

Answer 2

Another option would be controlkit. As shown in the image below, it has a lot of options for manipulating and visualizing data; Color pickers and sliders included.

Oberland