15

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?

Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297
kodisha
  • 1,074
  • 13
  • 24
  • Btw, i realized that some people might know the answer, but not know what DAT.gui is, so here is the link http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage – kodisha Mar 18 '13 at 13:25
  • 1
    What's wrong with editing dat.GUI's CSS file? – Joseph Lennox Mar 24 '13 at 20:04
  • @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. – kodisha Mar 24 '13 at 20:28
  • I made a list of alternatives once https://gist.github.com/SMUsamaShah/71d5ac6849cdc0bffff4c19329e9d0bb – SMUsamaShah Jul 25 '20 at 23:14

2 Answers2

10

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.

enter image description here

posit labs
  • 8,951
  • 4
  • 36
  • 66
7

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).

Cianan Sims
  • 3,419
  • 1
  • 21
  • 30
  • 1
    Thanks, see my response to Joseph above i just wrote. Customising DAT is my last option, if there is nothing else already there. – kodisha Mar 24 '13 at 20:32
  • @kodisha 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. – Cianan Sims Mar 24 '13 at 20:36