dat.gui.image

KO | EN

gitlite — search

#hacktoberfest #ai #llm #android #machine-learning #linux #docker #macos #windows #cli #kubernetes #vue #pytorch #ios

(★ 38)

dat.gui plugin to update images in realtime

dat.gui.image Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# dat.GUI.image

**[IMPORTANT] This plugin is temporary! It's waiting to me merged: https://github.com/dataarts/dat.gui/pull/265**

Give you another GUI function called `addImage()`.

It allows you to update new images in real time without recompiling your code or add them into your project.

Really useful to quickly try multiple images/textures/brushes during prototyping!

## How to use

```
 npm install --save dat.gui.image
```

```javascript
import dat from 'dat.gui';

// The magic here!
import datGuiImage from 'dat.gui.image';
datGuiImage(dat);

const PROPS = {
  texturePath: 'image.png';
};

const gui = new dat.GUI();

// Now, you can use it as a traditional gui method!
gui.addImage(PROPS, 'texturePath').onChange((image: HTMLImageElement, firstTime: boolean) => {
  body.append(image);
});
```

That's all! You will have a preview of the image into the GUI!

And now, to update the image, you can click on it or _directly drag and drop_ another one!

## Todo / next steps

- Make it works with the `recallSavedValue()` functions.

- Once one of those PRs is merged, only export the ImageController class:

- https://github.com/dataarts/dat.gui/pull/243
  - https://github.com/dataarts/dat.gui/pull/232

* UX improvements:
  - Show/hide button to collapse the controller
  - Add a loader
  - Add the image name

dat.gui.image

dat.gui.image Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

dat.gui.image

dat.gui.image Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README