0.1.6 • Published 11 months ago
tweakpane-media v0.1.6
tweakpane-media
Add image, video for Tweakpane. Based on leochocolat/tweakpane-plugin-media
Features
- ✨Highly customizable
- ✨Easy to use
- ✨Small size
- ✨Better support for ThreeJS
Usage
- Overview
import {
PluginVideoInputParams,
PluginVideoInput,
PluginImageInputParams,
PluginImageInput,
} from 'tweakpane-media';
const pane = new Pane();
pane.registerPlugin({plugins: [PluginVideoInput, PluginImageInput]});
//OR
<script src="../path/to/tweakpane.js"></script>
<script src="../path/to/tweakpane-media.min.js"></script>
<script>
const pane = new Tweakpane.Pane();
pane.registerPlugin({
plugins: [
TweakpaneMediaPlugin.PluginImageInput,
TweakpaneMediaPlugin.PluginVideoInput,
],
});
</script>
// <= 0.0.x
const PARAMS = {
image: './image.png',
video: './video.mp4',
};
// >= 0.1.x
const PARAMS = {
image: {src: './image.png', checked: true},
video: {src: './video.mp4', checked: true},
};
pane
.addInput(PARAMS, 'image', {
label: 'Image',
view: 'image',
containerProps: {},
imgProps: {
style: {
width: '100px',
},
},
inputImageProps: {},
labelImageProps: {},
containerCheckBoxProps: {},
checkBoxProps: {},
labelCheckBoxProps: {},
buttonClearProps: {
children: 'Clear',
}
} as PluginImageInputParams)
.on('change', (ev) => {
console.log(ev.value);
});
pane
.addInput(PARAMS, 'video', {
label: 'Video',
view: 'video',
containerProps: {},
videoProps: {
loop: true,
autoplay: true,
muted: true,
playsinline: true,
width: 100,
height: 90,
style: {
objectFit: 'cover',
},
}
inputVideoProps: {},
labelVideoProps: {},
containerCheckBoxProps: {},
checkBoxProps: {},
labelCheckBoxProps: {},
buttonClearProps: {
children: 'Clear',
}
} as PluginVideoInputParams)
.on('change', (ev) => {
console.log(ev.value);
});
- Custom checkbox similar Tweakpane core checkbox
<script>
pane
.addInput(PARAMS, 'video', {
label: 'Video',
view: 'video',
containerProps: {},
videoProps: {
loop: true,
autoplay: true,
muted: true,
playsinline: true,
width: 100,
height: 90,
style: {objectFit: 'cover'},
},
inputVideoProps: {},
labelVideoProps: {},
containerCheckBoxProps: {},
checkBoxProps: {},
labelCheckBoxProps: {},
buttonClearProps: {children: 'Clear'},
config: {templateCheckBox: 'tweakpane'},
})
.on('change', (ev) => {
console.log(ev.value);
});
</script>
- Work with React element, Tailwind
import {TiDeleteOutline} from 'react-icons/ti';
import {renderToStaticMarkup} from 'react-dom/server';
const configUI = {
buttonClearProps: {
innerHTML: renderToStaticMarkup(
TiDeleteOutline({
size: 19,
className: 'hover:text-slate-400 text-black',
}),
),
},
containerProps: {
className: 'gap-1 justify-between',
},
labelImageProps: {
className: 'border border-black hover:border-slate-300 rounded-sm',
},
config: {templateCheckBox: 'tweakpane'},
};
...
Migrate
0.0.x -> 0.1.x
- I added
checked
(checkbox's state) toev.value
, soev.value
is not a string anymore, it's object{src: string, checked: boolean}
Limitation
I don't know
Other
0.1.4
11 months ago
0.1.3
11 months ago
0.1.6
11 months ago
0.1.5
11 months ago
0.1.2
1 year ago
0.1.1
1 year ago
0.0.12
1 year ago
0.1.0
1 year ago
0.0.11
1 year ago
0.0.10
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago