tweakpane-plugin-file-import

tweakpane-plugin-file-import

A Tweakpane plugin for importing files.

[!WARNING]

The version 1.0.0 and upwards of this package only supports Tweakpane v4.

If you are still using Tweakpane v3, you can only use the v0 of this package.

You can install it.

npm i tweakpane-plugin-file-import@0.1.4

And use it like so.

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

Installation

You need Tweakpane v4 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.

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

[!TIP]

Check test/browser.html for an example of the plugin being used.

Usage

Simply initialize the params with an empty string and pass the optional parameters.

const params = {
	file: '',
};

// If you're using Tweakpane v3 -------
pane
	.addInput(params, 'file', {
		view: 'file-input',
		lineCount: 3,
		filetypes: ['.png', '.jpg'],
	})
	.on('change', (ev) => {
		console.log(ev.value);
	});

// If you're using Tweakpane v4 -------
pane
	.addBinding(params, 'file', {
		view: 'file-input',
		lineCount: 3,
		filetypes: ['.png', '.jpg'],
	})
	.on('change', (ev) => {
		console.log(ev.value);
	});

Optional parameters

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.

Contributing

If you want to contribute to this package, you are free to open a pull request. 😊

Quickstart

[!NOTE]

You'll need to have Node 16 or upwards installed in order to properly install and run package.json script commands.

Install dependencies:

npm install

To build the source code and watch changes, run:

npm start

After this, simply open test/browser.html to see the results.

File structure

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