127 lines
3.2 KiB
Svelte
127 lines
3.2 KiB
Svelte
<script>
|
|
|
|
import Visualization from './Visualization.svelte';
|
|
import { config } from './stores.js';
|
|
|
|
import './vendor/normalize.css';
|
|
import './vendor/milligram.min.css';
|
|
|
|
let isAnimated = false;
|
|
let splitscreen = false;
|
|
let controlsOpen = false;
|
|
let left, right;
|
|
|
|
function handleKeyboard(event) {
|
|
switch (event.code) {
|
|
case 'ArrowLeft':
|
|
//i = (i>0) ? i-1 : data.length-1;
|
|
event.preventDefault();
|
|
break;
|
|
|
|
case 'ArrowRight':
|
|
//i = (i<data.length-1) ? i+1 : 0;
|
|
event.preventDefault();
|
|
break;
|
|
|
|
case 'ArrowUp':
|
|
$config.speed += 10;
|
|
event.preventDefault();
|
|
break;
|
|
|
|
case 'ArrowDown':
|
|
$config.speed -= 10;
|
|
event.preventDefault();
|
|
break;
|
|
|
|
case 'Space':
|
|
isAnimated = !isAnimated;
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
//log current index on the lower right
|
|
}
|
|
|
|
function reset() {
|
|
left.reset();
|
|
if (splitscreen) {
|
|
right.reset();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<svelte:window on:keydown={handleKeyboard} />
|
|
|
|
<main>
|
|
<Visualization bind:this={left} {isAnimated}/>
|
|
{#if splitscreen}<Visualization bind:this={right} {isAnimated}/>{/if}
|
|
</main>
|
|
<aside class:open={controlsOpen}>
|
|
<label class="hideCheckbox toggle" title="Open Controls">⚙<input type="checkbox" bind:checked={controlsOpen}></label>
|
|
<div id="controls">
|
|
<h3>Controls</h3>
|
|
<p><small>Press Space to pause and use arrow keys to skip or change speed</small></p>
|
|
<label>Zoom:<br/><input type="number" id="zoom" step="1" value={$config.zoom} on:change={e => $config.zoom = e.target.value}></label>
|
|
<label>Speed:<br/><input type="number" id="speed" step="1" value={$config.speed} on:change={e => $config.speed = e.target.value}></label>
|
|
<label>Duration Multiplier:<br/><input type="number" id="duration_multiplier" step="0.1" value={$config.duration_multiplier} on:change={e => $config.duration_multiplier = e.target.value}></label>
|
|
<label>Trace Length:<br/><input type="number" id="trace_length" step="1" value={$config.trace_length} on:change={e => $config.trace_length = e.target.value}></label>
|
|
<label>Duration Function Exponent:<br/><input type="number" id="exp" step="0.1" value={$config.duration_exponent} on:change={e => $config.duration_exponent = e.target.value}></label>
|
|
</div>
|
|
<label id="run" class="hideCheckbox toggle" title="Run Animation">{#if !isAnimated}▶{:else}⏸{/if}<input type="checkbox" bind:checked={isAnimated}></label>
|
|
<label id="split" class="hideCheckbox toggle" title="Make Splitscreen">{#if !splitscreen}🗖{:else}🗗{/if}<input type="checkbox" bind:checked={splitscreen}></label>
|
|
<span id="reset" class="toggle" title="Reset Animation" on:click={reset}>↶</span>
|
|
</aside>
|
|
|
|
<style>
|
|
|
|
main {
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
aside {
|
|
position: absolute;
|
|
left: -20vw;
|
|
transition: left 0.5s;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 20vw;
|
|
padding: 20px;
|
|
background: white;
|
|
}
|
|
|
|
.open {
|
|
left: 0;
|
|
}
|
|
|
|
.toggle {
|
|
position: absolute;
|
|
right: -30px;
|
|
width: 20px;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: left 0.5s;
|
|
margin: 0;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.hideCheckbox > input {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
|
|
#run {
|
|
bottom: 100px;
|
|
}
|
|
|
|
#split {
|
|
bottom: 60px;
|
|
}
|
|
|
|
#reset {
|
|
bottom: 20px;
|
|
}
|
|
</style> |