tweakpane-plugin-file-import

tweakpane-plugin-file-import

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 use Tweakpane v3.

If you are using Tweakpane v4 (which you should upgrade to), go ahead and check out the main branch and install the latest version of this package.

Installation

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.

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(TweakpaneFileImportPlugin);
</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 TweakpaneFileImportPlugin from 'tweakpane-plugin-file-import';

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

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