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 @@ + + + + {#snippet ui({ handleTouchStart, handleMouseDown, handleDblClick })} + e.preventDefault()} + draggable={false} + > + + {/snippet} + diff --git a/src/lib/Knob.svelte b/src/lib/Knob.svelte index 59e1eb2..39bdee8 100644 --- a/src/lib/Knob.svelte +++ b/src/lib/Knob.svelte @@ -1,31 +1,19 @@ - - -
- - - {#if snapValues.length > 0 || param.type === 'enum-param'} - - - {/if} - - - - - - - {#if label} -
{label}
- {/if} - {#if isDragging} -
- {formatted} - {#if unit} - {unit} + + {#snippet ui({ normalizedValue, handleTouchStart, handleMouseDown, handleDblClick })} + + + {#if snapValues.length > 0 || param.type === 'enum-param'} + + {/if} -
- {/if} -
- - + + + + + + + {/snippet} + diff --git a/src/lib/KnobBase.svelte b/src/lib/KnobBase.svelte new file mode 100644 index 0000000..ab595af --- /dev/null +++ b/src/lib/KnobBase.svelte @@ -0,0 +1,231 @@ + + + + + + +
+ {@render ui?.({ + normalizedValue, + handleTouchStart, + handleMouseDown, + handleDblClick + })} + {#if label} +
{label}
+ {/if} + {#if isDragging} +
+ {formatted} + {#if unit} + {unit} + {/if} +
+ {/if} +
+ + diff --git a/src/lib/VideoKnob.svelte b/src/lib/VideoKnob.svelte new file mode 100644 index 0000000..5e2e5df --- /dev/null +++ b/src/lib/VideoKnob.svelte @@ -0,0 +1,174 @@ + + + + {#snippet ui({ handleTouchStart, handleMouseDown, handleDblClick })} + e.preventDefault()} + draggable={false} + > + + {/snippet} + diff --git a/src/lib/index.ts b/src/lib/index.ts index 1a7acdb..e7ee96a 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,5 +1,7 @@ // Reexport your entry components here export * from './params.js'; import Knob from './Knob.svelte'; +import VideoKnob from './VideoKnob.svelte'; +import ImageKnob from './ImageKnob.svelte'; -export { Knob }; +export { Knob, ImageKnob, VideoKnob }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 478715a..4c52b5d 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -99,9 +99,70 @@ %import('./examples/ColoredKnobs.svelte')% + +
+

Image strip

+ + import('./examples/ImageStrip.svelte')} /> + +

+ 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 knobimage knob
file sizetiny (20K)small - large (264K - 408K)
load timeslow (~2.8s)fast (~15ms)
initial responsivenessdelayed (only after video processing)immediate
+ + * Values in parentheses were measured on this example page. + +

+ 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. +

+ + %import('./examples/ImageStrip.svelte')% +