luchoturtle/tweakpane-plugin-file-import

🗂️ File import plugin for Tweakpane

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 [email protected]

And use it like so.

<script src="https://unpkg.com/[email protected]/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'],
		invalidFiletypeMessage: "We can't accept those filetypes!"
	})
	.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'],
		invalidFiletypeMessage: "We can't accept those filetypes!"
	})
	.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.
invalidFiletypeMessage	string	String shown when the user tries to upload an invalid filetype.

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

tweakpane-plugin-file-import's Issues

Button instead of input field?

Hi

I am pretty new to JS, trying to learn as I go.

I have tried your Tweakpane plugin, but for some reason I get a text input field instead of a button.

This is my code:

const createPane = () => {
    const pane = new Tweakpane.Pane();
    pane.registerPlugin(FileImportPlugin);
    let folder;

    folder = pane.addFolder({ title: 'Settings'});
    
    folder.addInput(params, 'File', {
		view: 'file-input',
		lineCount: 3,
		filetypes: ['.mp3'],
	})
        .on('change', (ev) => {
            AudioPath(params.File);
	});
}

And this is what I get:

What do I need to do to get this?:

Any help will be greatly appreciated.

Chore: Update `homepage` from "http://lisperator.net/uglifyjs"

Consider updating the homepage link on NPM:
https://www.npmjs.com/package/tweakpane-plugin-file-import

This is the line:

tweakpane-plugin-file-import/package.json

Line 5 in 6345e13

"homepage": "http://lisperator.net/uglifyjs",

Should be: "https://github.com/LuchoTurtle/tweakpane-plugin-file-import" 🔗
Unless you have a web page for the package. 💭

iOS: input file click not triggered

Hello, it seems that the input.click() is not triggered with a mousedown or touchstart event. It should be attached on the click event instead. Found this bug on iOS 16

chore: Upgrade to Tweakpane v4

Check
https://github.com/shoedler/tweakpane-plugin-waveform/pull/2/files
or
https://github.com/metehus/tweakpane-image-plugin/pull/1/files#top

(from cocopon/tweakpane#396 (comment))
to see an example PR on how to do this.

Because Tweakpane is now on v4, this package should be split into two branches: the v0 version will support Tweakpane 3 and main will support Tweakpane 4.

compatible issue under vite+vue project

the console says:

_TpError {message: "Not compatible with plugin 'undefined.file-input'", name: '_TpError', stack: "Error: Not compatible with plugin 'undefined.file…ode_modules/.vite/deps/vue.js?v=55e2a4eb:9044:36)", type: 'notcompatible'}message: "Not compatible with plugin 'undefined.file-input'"name: "_TpError"stack: "Error: Not compatible with plugin 'undefined.file-input'\n at new _TpError (http://10.0.0.64:5173/node_modules/.vite/deps/tweakpane.js?v=55e2a4eb:83:18)\n at _TpError.notCompatible (http://10.0.0.64:5173/node_modules/.vite/deps/tweakpane.js?v=55e2a4eb:61:12)\n at PluginPool.register (http://10.0.0.64:5173/node_modules/.vite/deps/tweakpane.js?v=55e2a4eb:6924:21)\n at http://10.0.0.64:5173/node_modules/.vite/deps/tweakpane.js?v=55e2a4eb:7477:18\n at Array.forEach (<anonymous>)\n at Pane.registerPlugin (http://10.0.0.64:5173/node_modules/.vite/deps/tweakpane.js?v=55e2a4eb:7476:13)\n at setup (http://10.0.0.64:5173/src/App.vue?t=1718564959498:24:6)\n at callWithErrorHandling (http://10.0.0.64:5173/node_modules/.vite/deps/vue.js?v=55e2a4eb:1662:19)\n at setupStatefulComponent (http://10.0.0.64:5173/node_modules/.vite/deps/vue.js?v=55e2a4eb:9083:25)\n at setupComponent (http://10.0.0.64:5173/node_modules/.vite/deps/vue.js?v=55e2a4eb:9044:36)"type: "notcompatible"[[Prototype]]: Object (anonymous) @ vue.js?v=55e2a4eb:2019 (anonymous) @ App.vue?t=1718564958825:123 (anonymous) @ client:34 (anonymous) @ client:218 (anonymous) @ client:193 queueUpdate @ client:193 await in queueUpdate (async) (anonymous) @ client:638 handleMessage @ client:636 (anonymous) @ client:546 Show 1 more frame Show less

the code:

`<script setup>

import { ref } from "vue";
import { Pane } from "tweakpane";

import * as TweakpaneFileImportPlugin from "tweakpane-plugin-file-import";

const pane = new Pane();
pane.registerPlugin(TweakpaneFileImportPlugin);
</script>`

Start here

I'll try to get a simple plugin to import files with Tweakpane.

This feature has been requested at tweakpane/plugin-essentials#8 (comment). You can find a rough implementation there.

You may find other 3rd-party plugins at https://github.com/topics/tweakpane. Try to follow the same structure.

For example, https://github.com/donmccurdy/tweakpane-plugin-thumbnail-list.