lucianoandClaude Fable 5
de85639aaf
New 'Area LED' controls in the Schermo tab: W x H @ X,Y. Everything (canvas, videos, images, logos, ticker) lives in a #stage box whose transform makes it the containing block for the fixed layers, so resizing it confines the whole show at once, black outside. The canvas resizes to the stage, so shaders render at the wall's native resolution. Persisted in localStorage and re-pushed when the output window (re)starts; the recorder follows the canvas position. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
55 lines
2.0 KiB
HTML
55 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="Content-Security-Policy"
|
|
content="default-src 'self'; img-src 'self' blob: data: file:; media-src 'self' blob: file:; style-src 'self' 'unsafe-inline'; script-src 'self'" />
|
|
<title>DJ Visualizer — Output</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body class="output">
|
|
<!-- LED-wall active area: every layer lives inside; black outside -->
|
|
<div id="stage">
|
|
<canvas id="gl"></canvas>
|
|
|
|
<!-- Video layer (VJ loop) that blends with the generated visuals -->
|
|
<video id="bg-video" class="bg-video" loop muted playsinline></video>
|
|
|
|
<!-- Playlist video track (full screen, with its own audio) -->
|
|
<video id="track-video" class="track-video" playsinline></video>
|
|
|
|
<!-- Image overlay layer -->
|
|
<div id="overlay-images"></div>
|
|
|
|
<!-- Per-track scene image -->
|
|
<img id="scene-image" class="scene-image" />
|
|
|
|
<!-- Two independent, freely-positioned & resizable logos -->
|
|
<img id="logo-0" class="logo" />
|
|
<img id="logo-1" class="logo" />
|
|
|
|
<!-- Scrolling text ticker -->
|
|
<div id="ticker"><div id="ticker-track"><span class="tick-copy"></span><span class="tick-copy"></span></div></div>
|
|
|
|
<!-- Side text: vertical stacked characters scrolling on both edges -->
|
|
<div id="side-text">
|
|
<div class="side-col left"><div class="side-track"><span class="side-copy"></span><span class="side-copy"></span></div></div>
|
|
<div class="side-col right"><div class="side-track"><span class="side-copy"></span><span class="side-copy"></span></div></div>
|
|
</div>
|
|
|
|
<div id="drop-hint">
|
|
<div class="big">🎛 In attesa dell'audio…</div>
|
|
<div class="small">Usa il pannello di controllo sull'altro schermo</div>
|
|
</div>
|
|
</div><!-- /#stage -->
|
|
|
|
<script src="shaders.js"></script>
|
|
<script src="effects.js"></script>
|
|
<script src="fluid.js"></script>
|
|
<script src="interactive.js"></script>
|
|
<script src="visualizer.js"></script>
|
|
<script src="audio.js"></script>
|
|
<script src="output.js"></script>
|
|
</body>
|
|
</html>
|