91 lines
1.7 KiB
Svelte
91 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition";
|
|
import { countPixels } from "../helpers";
|
|
export let img: Image;
|
|
|
|
import { quartInOut } from "svelte/easing";
|
|
|
|
let correctDistortion = true;
|
|
|
|
function scaleX(node, { duration, delay }) {
|
|
return {
|
|
delay,
|
|
duration,
|
|
css: (t) => {
|
|
const eased = quartInOut(t);
|
|
|
|
return `
|
|
transform: scaleX(${eased});`;
|
|
},
|
|
};
|
|
}
|
|
|
|
const prom = countPixels(img, correctDistortion);
|
|
</script>
|
|
|
|
<div id="header">
|
|
<h3>ANALYZER</h3>
|
|
<label for="correct-distort">Correct Distortion</label>
|
|
<input
|
|
id="correct-distort"
|
|
type="checkbox"
|
|
bind:checked={correctDistortion}
|
|
/>
|
|
</div>
|
|
|
|
{#await prom}
|
|
<p>Loading...</p>
|
|
{:then result}
|
|
<div class="list">
|
|
{#each result as color, i}
|
|
<p>
|
|
{Math.floor(
|
|
(correctDistortion ? color.value : color.distortedValue) * 10000
|
|
) / 100}%
|
|
</p>
|
|
<div
|
|
transition:scaleX={{ duration: 500, delay: i * 200 }}
|
|
class="bar"
|
|
style={`width: ${
|
|
(correctDistortion ? color.value : color.distortedValue) * 100
|
|
}%; background-color:${color.color}`}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{/await}
|
|
|
|
<style>
|
|
#header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#header > label {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#header > input {
|
|
margin: 0px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: min-content 1fr;
|
|
}
|
|
|
|
.list > p {
|
|
margin: 0;
|
|
text-align: right;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.bar {
|
|
height: 20px;
|
|
margin-bottom: 20px;
|
|
transform-origin: 0px 0px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
</style>
|