A Tweakpane plugin for importing files.
[!WARNING]
This branch pertains the
v0
of this package. This version is meant to add support to those that still useTweakpane v3
.If you are using
Tweakpane v4
(which you should upgrade to), go ahead and check out themain
branch and install the latest version of this package.
You need Tweakpane v3 to install this plugin.
You may use https://unpkg.com/tweakpane-plugin-file-import to get the latest version
and add it as a <script>
tag on your HTML page.
<script src="https://unpkg.com/tweakpane@3.0.5/dist/tweakpane.js"></script>
<script src="./tweakpane-plugin-file-import.min.js"></script>
<script>
const pane = new Tweakpane.Pane();
pane.registerPlugin(TweakpaneFileImportPlugin);
</script>
Alternatively, you can install with npm
:
npm i tweakpane-plugin-file-import
And import it like so.
import {Pane} from 'tweakpane';
import * as TweakpaneFileImportPlugin from 'tweakpane-plugin-file-import';
const pane = new Pane();
pane.registerPlugin(TweakpaneFileImportPlugin);
Simply initialize the params with an empty string and pass the optional parameters.
const params = {
file: '',
};
pane
.addInput(params, 'file', {
view: 'file-input',
lineCount: 3,
filetypes: ['.png', '.jpg'],
})
.on('change', (ev) => {
console.log(ev.value);
});
property | type | description |
---|---|---|
lineCount | int | Number of lines for the height of the container. Similar to FPS graph |
filetypes | array | Array of valid file extensions. |
If you want to contribute to this package, you are free to open a pull request.
Install dependencies:
npm install
To build the source codes and watch changes, run:
npm watch
After this, simply open test/browser.html
to see the results.
This project follows the same structure as any other Tweakpane third-party plugin.
|- src
| |- controller ...... Controller for the custom view
| |- sass ............ Plugin CSS
| `- view ............ Custom view
| |- index.ts ........ Entrypoint
| |- plugin.ts ....... Plugin
|- dist ............... Compiled files
`- test
`- browser.html .... Plugin usage in an HTML file