From 38c19ac1740dde0ad1d69f8484caceb46a2fc9f9 Mon Sep 17 00:00:00 2001
From: _eyewave <89079979+eye-wave@users.noreply.github.com>
Date: Tue, 26 Nov 2024 22:41:14 +0100
Subject: [PATCH] feat: image knob
---
package.json | 2 +-
src/lib/ImageKnob.svelte | 137 ++++++++++++
src/lib/Knob.svelte | 290 ++++++--------------------
src/lib/KnobBase.svelte | 231 ++++++++++++++++++++
src/lib/VideoKnob.svelte | 174 ++++++++++++++++
src/lib/index.ts | 4 +-
src/routes/+page.svelte | 61 ++++++
src/routes/LazyComponent.svelte | 1 -
src/routes/assets/PurpleKnob2.webm | Bin 0 -> 19054 bytes
src/routes/assets/PurpleKnob2.webp | Bin 0 -> 269294 bytes
src/routes/examples/ImageStrip.svelte | 26 +++
11 files changed, 700 insertions(+), 226 deletions(-)
create mode 100644 src/lib/ImageKnob.svelte
create mode 100644 src/lib/KnobBase.svelte
create mode 100644 src/lib/VideoKnob.svelte
create mode 100644 src/routes/assets/PurpleKnob2.webm
create mode 100644 src/routes/assets/PurpleKnob2.webp
create mode 100644 src/routes/examples/ImageStrip.svelte
diff --git a/package.json b/package.json
index 9015591..6f222f0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "svelte-knobs",
"description": "Svelte component library for building customizable knob controls.",
- "version": "0.3.0",
+ "version": "0.3.1",
"repository": {
"url": "https://github.com/eye-wave/svelte-knobs"
},
diff --git a/src/lib/ImageKnob.svelte b/src/lib/ImageKnob.svelte
new file mode 100644
index 0000000..4cc0d36
--- /dev/null
+++ b/src/lib/ImageKnob.svelte
@@ -0,0 +1,137 @@
+
+
+
+ You can also create interactive knobs with a image slice.
+ There's 2 ways of doing that here.
+ {'
and {'
+
Both having their own pros and cons. *
++ | video knob | +image knob | +
---|---|---|
file size | +tiny (20K) | +small - large (264K - 408K) | +
load time | +slow (~2.8s) | +fast (~15ms) | +
initial responsiveness | +delayed (only after video processing) | +immediate | +
+ To compensate for the video knob load time, the first animation frame is drawn as soon as it + loads. However, the knob won't be fully responsive until the entire video is processed. +
+ +
+ Also, try to always specify the numberOfFrames
property, even though it's not required
+ for image knob. It will help calculate the frames better and avoid flickering.
+