tweakpane-plugin-file-import

tweakpane-plugin-file-import

A Tweakpane plugin for importing files.

Installation

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

Browser

<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(FileInputPlugin);
</script>

Package

Alternatively, you can install with npm:

npm i tweakpane-plugin-file-import

And import it like so.

import {Pane} from 'tweakpane';
import * as FileImportPlugin from 'tweakpane-plugin-file-import';

const pane = new Pane();
pane.registerPlugin(FileImportPlugin);

Usage

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

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

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.

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