Multiple parameters
Multiple Parameters, listening for layer:preview event
<canvas
id="c"
width="1024"
height="1024"
style="background-color: white"
></canvas>
<script src="https://script.layerstatic.com/layer/sdk-latest.js"></script>
<script type="module">
import App from './app.js';
const app = new App();
const canvas = document.getElementById('c');
canvas.width = $layer.width;
canvas.height = $layer.height;
$layer.registerCanvas(canvas);
globalThis.addEventListener('layer:paramchange', (event) => {
switch (event.detail.id) {
// optionally, $layer.parameters[event.detail.id]
case 'fps': app.setFPS(event.detail.value); break;
case 'color': app.setColor(event.detail.value); break;
case 'variance': app.setVariance(event.detail.value); break;
case 'choice': app.setChoice(event.detail.value); break;
case 'boolean': app.isConscious = event.detail.value; break;
}
});
const { fps, color, variance, choice, boolean } = await $layer
.params(
{
customization_level: 'ARTIST',
kind: 'NUMBER',
id: 'fps',
name: 'FPS',
min: 20,
max: 80,
step: 1,
default: 30,
},
{
customization_level: 'CURATOR',
kind: 'NUMBER',
id: 'variance',
name: 'Float',
description: 'Vary the skew',
min: -1,
max: 1,
step: 0.1,
default: 0.2,
},
{
customization_level: 'VIEWER',
id: 'color',
kind: 'COLOR',
name: 'Color',
default: '#ff0000',
},
{
customization_level: 'VIEWER',
id: 'boolean',
kind: 'BOOLEAN',
name: 'Boolean',
default: false,
},
{
customization_level: 'VIEWER',
id: 'choice',
kind: 'LIST',
name: 'List',
default: 'option2',
options: [
{
value: 'option1',
label: 'Best',
},
{
value: 'option2',
label: 'Better',
},
{
value: 'option3',
label: 'Good',
},
],
}
);
app.setFPS(fps);
app.setColor(color);
app.setVariance(variance);
app.setChoice(choice);
app.isConscious = boolean;
app.playing = true;
</script>