Compare commits
No commits in common. "8394c19c2cc1219bb86946ccf8ea9222f554f17a" and "9b6b5547baea22315f3224522f3bff5bd3a1c252" have entirely different histories.
8394c19c2c
...
9b6b5547ba
18 changed files with 14 additions and 332 deletions
|
|
@ -1,12 +1,8 @@
|
|||
<script lang="ts">
|
||||
import '@fontsource/b612';
|
||||
import '@fontsource/b612/700.css';
|
||||
import 'normalize.css/normalize.css';
|
||||
|
||||
// time in seconds
|
||||
import { onMount, tick } from 'svelte';
|
||||
import SectorIndicator from './components/SectorIndicator.svelte';
|
||||
import FlashIndicator from './components/FlashIndicator.svelte';
|
||||
import Scale from './components/Scale.svelte';
|
||||
|
||||
export let frame = 0;
|
||||
export let fps = 60;
|
||||
|
|
@ -54,10 +50,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scale">
|
||||
<Scale {frame} {fps} />
|
||||
</div>
|
||||
|
||||
{#if debug}
|
||||
<div class="controls">
|
||||
<input type="range" min="0" max={fps * 4} bind:value={frame} />
|
||||
|
|
@ -74,13 +66,6 @@
|
|||
color: white;
|
||||
--color-active: red;
|
||||
--color-inactive: white;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.circular {
|
||||
|
|
@ -89,16 +74,16 @@
|
|||
}
|
||||
|
||||
.cyclic {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100vw;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.scale {
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
main.debug {
|
||||
background: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let frame: number;
|
||||
export let fps: number;
|
||||
</script>
|
||||
|
||||
<div class="scale">
|
||||
<div class="labels">
|
||||
<div>Video Late</div>
|
||||
<div>Audio Late</div>
|
||||
</div>
|
||||
<div class="indicator"></div>
|
||||
<div class="ticks">
|
||||
{#each Array.from({ length: fps }, (_, i) => i) as i}
|
||||
<div class="tick"></div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="axis"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scale {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.labels {
|
||||
position: absolute;
|
||||
top: -3vw;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
.labels > div {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.axis {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 100%;
|
||||
background: white;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.ticks {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tick {
|
||||
width: 2px;
|
||||
height: 3vh;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -39,7 +39,6 @@
|
|||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tabler/icons-svelte": "^2.47.0",
|
||||
"lodash": "^4.17.21",
|
||||
"normalize.css": "^8.0.1",
|
||||
"svelte": "^4.2.7",
|
||||
|
|
|
|||
|
|
@ -20,9 +20,6 @@ dependencies:
|
|||
'@sveltejs/vite-plugin-svelte':
|
||||
specifier: ^3.0.0
|
||||
version: 3.0.2(svelte@4.2.9)(vite@5.0.12)
|
||||
'@tabler/icons-svelte':
|
||||
specifier: ^2.47.0
|
||||
version: 2.47.0(svelte@4.2.9)
|
||||
lodash:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
|
|
@ -677,19 +674,6 @@ packages:
|
|||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@tabler/icons-svelte@2.47.0(svelte@4.2.9):
|
||||
resolution: {integrity: sha512-xL2NyCUUhBQv0lXylgNCpfHtMW4Ihu0hCacaYXeX+NiS1LO0geqXk/0lkrBH+u/ZLX6vyqUYNFjawjzmxthFjw==}
|
||||
peerDependencies:
|
||||
svelte: '>=3 <5'
|
||||
dependencies:
|
||||
'@tabler/icons': 2.47.0
|
||||
svelte: 4.2.9
|
||||
dev: false
|
||||
|
||||
/@tabler/icons@2.47.0:
|
||||
resolution: {integrity: sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==}
|
||||
dev: false
|
||||
|
||||
/@tootallnate/quickjs-emscripten@0.23.0:
|
||||
resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
|
||||
dev: true
|
||||
|
|
|
|||
|
|
@ -15,7 +15,3 @@ body, html {
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -16,8 +16,7 @@
|
|||
let verticalMargin = MARGIN_SIZE;
|
||||
let unloaded = true;
|
||||
|
||||
export let transparent = false;
|
||||
export let subdued = false;
|
||||
let transparent = false;
|
||||
|
||||
function updateCounts() {
|
||||
const gridWidth = window.innerWidth - MARGIN_SIZE;
|
||||
|
|
@ -73,7 +72,6 @@
|
|||
class="background"
|
||||
class:unloaded
|
||||
class:transparent
|
||||
class:subdued
|
||||
class:even-vertical={verticalCount % 2 === 0}
|
||||
style="--horizontal-count: {horizontalCount};
|
||||
--vertical-count: {verticalCount};
|
||||
|
|
@ -268,13 +266,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.background.subdued {
|
||||
& .edge,
|
||||
& .corner {
|
||||
opacity: 0.33;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--horizontal-count), var(--block-size));
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@
|
|||
import BrightnessGradient from '$lib/BrightnessGradient.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let full = false;
|
||||
|
||||
let sizes = {
|
||||
blockSize: 64,
|
||||
horizontalCount: 16,
|
||||
|
|
@ -32,7 +30,6 @@
|
|||
|
||||
<div
|
||||
class="test-card"
|
||||
class:full
|
||||
style="--block-size: {sizes.blockSize}px;
|
||||
--horizontal-margin: {sizes.horizontalMargin}px;
|
||||
--vertical-margin: {sizes.verticalMargin}px;
|
||||
|
|
@ -41,11 +38,8 @@
|
|||
--column-height: {columnHeight};
|
||||
--left-column: {leftColumn};"
|
||||
>
|
||||
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={!full} />
|
||||
|
||||
<div class="axes">
|
||||
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} />
|
||||
<Axes />
|
||||
</div>
|
||||
|
||||
<div class="outer"></div>
|
||||
<div class="inner"></div>
|
||||
|
|
@ -143,13 +137,4 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.test-card:not(.full) {
|
||||
& .info,
|
||||
& .column,
|
||||
& .axes,
|
||||
& .inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
<script lang="ts">
|
||||
import 'normalize.css/normalize.css';
|
||||
import '@fontsource/b612';
|
||||
import '@fontsource/b612/700.css';
|
||||
import '../index.css';
|
||||
import TestCard from '$lib/TestCard.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let idleTimeout: NodeJS.Timeout | undefined;
|
||||
onMount(() => {
|
||||
window.addEventListener('mousemove', () => {
|
||||
clearTimeout(idleTimeout);
|
||||
document.body.classList.remove('idle');
|
||||
idleTimeout = setTimeout(() => {
|
||||
document.body.classList.add('idle');
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
|
||||
$: onlyCard = $page.url.pathname === '/card';
|
||||
</script>
|
||||
|
||||
<TestCard full={onlyCard} />
|
||||
<main class:content={!onlyCard}>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main.content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-height: 90vh;
|
||||
max-width: 90vw;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid white;
|
||||
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
:global(.hide-idle) {
|
||||
transition: opacity 1s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:global(body.idle .hide-idle) {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,70 +1,9 @@
|
|||
<script>
|
||||
import {
|
||||
IconCamera,
|
||||
IconCpu2,
|
||||
IconDeviceGamepad,
|
||||
IconKeyboard,
|
||||
IconMicrophone,
|
||||
IconMouse,
|
||||
IconVideo,
|
||||
IconVolume
|
||||
} from '@tabler/icons-svelte';
|
||||
import 'normalize.css/normalize.css';
|
||||
import '@fontsource/b612';
|
||||
import '@fontsource/b612/700.css';
|
||||
import '../index.css';
|
||||
import TestCard from '$lib/TestCard.svelte';
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<h1>Universal Test Card</h1>
|
||||
|
||||
<div class="options">
|
||||
<a href="card">
|
||||
<div class="icon"><IconVideo size={72} /></div>
|
||||
Video
|
||||
</a>
|
||||
<a href="audio">
|
||||
<div class="icon"><IconVolume size={72} /></div>
|
||||
Audio
|
||||
</a>
|
||||
<a href="keyboard">
|
||||
<div class="icon"><IconKeyboard size={72} /></div>
|
||||
Keyboard
|
||||
</a>
|
||||
<a href="mouse">
|
||||
<div class="icon"><IconMouse size={72} /></div>
|
||||
Mouse
|
||||
</a>
|
||||
<a href="gamepad">
|
||||
<div class="icon"><IconDeviceGamepad size={72} /></div>
|
||||
Gamepad
|
||||
</a>
|
||||
<a href="camera">
|
||||
<div class="icon"><IconCamera size={72} /></div>
|
||||
Camera
|
||||
</a>
|
||||
<a href="microphone">
|
||||
<div class="icon"><IconMicrophone size={72} /></div>
|
||||
Microphone
|
||||
</a>
|
||||
<a href="sensors">
|
||||
<div class="icon"><IconCpu2 size={72} /></div>
|
||||
Sensors
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 2em;
|
||||
|
||||
& a {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<TestCard />
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
<script>
|
||||
import { IconArrowBack } from '@tabler/icons-svelte';
|
||||
</script>
|
||||
|
||||
<a href="/" class="hide-idle"><IconArrowBack /> Back</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
|
||||
background: black;
|
||||
border: 1px solid white;
|
||||
border-radius: 0.2em;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5);
|
||||
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let key: string;
|
||||
let code: string;
|
||||
let pressedKeys: string[] = [];
|
||||
onMount(() => {
|
||||
document.addEventListener('keydown', (event) => {
|
||||
key = event.key;
|
||||
code = event.code;
|
||||
pressedKeys = [...pressedKeys, event.key];
|
||||
pressedKeys = pressedKeys.slice(-50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>Keyboard testing</h2>
|
||||
<p>Press a key on the keyboard to see the event object and the key code.</p>
|
||||
<div class="current">
|
||||
{#if key}
|
||||
<span>{key}</span>
|
||||
{/if}
|
||||
{#if code}
|
||||
<span class="code">({code})</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<p>Pressed keys:</p>
|
||||
<ul>
|
||||
{#each pressedKeys as key}
|
||||
<li>{key}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.current {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.code {
|
||||
margin-left: 1em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: safe space-evenly;
|
||||
gap: 0.2em;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue