Skip to content

Commit f20de48

Browse files
eye-waveeye-wave
committed
upload examples
1 parent daeda2d commit f20de48

15 files changed

Lines changed: 337 additions & 13 deletions

‎docs/src/examples/BasicKnob.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { useState } from 'react';
2+
import { SvgKnob } from '@eyewave/web-knobs/react';
3+
4+
export default function () {
5+
const [value, setValue] = useState(0.0);
6+
7+
return (
8+
<div style={{ color: '#22bfee' }}>
9+
<SvgKnob value={value} onValueChange={setValue} />
10+
<span>{value.toFixed(2)}</span>
11+
12+
<SvgKnob value={value} disabled />
13+
</div>
14+
);
15+
}

‎docs/src/examples/BasicKnob.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div>
3+
<SvgKnob v-model="value" />
4+
<span>{{ value.toFixed(2) }}</span>
5+
6+
<SvgKnob v-model="value" :disabled="true" />
7+
</div>
8+
</template>
9+
10+
<script>
11+
import { ref } from 'vue';
12+
import SvgKnob from '@eyewave/web-knobs/vue';
13+
14+
export default {
15+
components: { SvgKnob },
16+
setup() {
17+
const value = ref(0.0);
18+
return { value };
19+
}
20+
};
21+
</script>
22+
23+
<style scoped>
24+
div {
25+
color: #22bfee;
26+
}
27+
</style>

‎docs/src/examples/CustomKnob.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { useState, useMemo } from 'react';
2+
import { Draggable } from '@eyewave/web-knobs/react';
3+
import { valueToAngle } from '@eyewave/web-knobs/core/helpers';
4+
import styles from './CustomKnob.module.css';
5+
6+
export default function () {
7+
const [value, setValue] = useState(0.5);
8+
9+
const angle = useMemo(() => valueToAngle(value, -135, 135), [value]);
10+
11+
return (
12+
<Draggable value={value} onValueChange={setValue}>
13+
<div className={styles.knob}>
14+
<div
15+
className={styles.glow}
16+
style={{
17+
filter: `blur(${value * 5}px)`,
18+
transform: `scale(${value})`
19+
}}
20+
></div>
21+
<div
22+
className={styles.thumb}
23+
style={{
24+
transform: `rotate(${angle}deg) translateY(-10px)`
25+
}}
26+
></div>
27+
<span>{value.toFixed(2)}</span>
28+
</div>
29+
</Draggable>
30+
);
31+
}

‎docs/src/examples/CustomKnob.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<KnobDraggable v-model="value">
3+
<div class="knob">
4+
<div
5+
class="glow"
6+
:style="{
7+
filter: `blur(${value * 5}px)`,
8+
transform: `scale(${value})`
9+
}"
10+
></div>
11+
<div
12+
class="thumb"
13+
:style="{
14+
transform: `rotate(${angle}deg) translateY(-10px)`
15+
}"
16+
></div>
17+
<span>{{ value.toFixed(2) }}</span>
18+
</div>
19+
</KnobDraggable>
20+
</template>
21+
22+
<script setup>
23+
import { ref, computed } from 'vue';
24+
import { Draggable as KnobDraggable } from '@eyewave/web-knobs/vue';
25+
import { valueToAngle } from '@eyewave/web-knobs/core/helpers';
26+
27+
const value = ref(0.5);
28+
const angle = computed(() => valueToAngle(value.value, -135, 135));
29+
</script>
30+
31+
<style scoped>
32+
.knob {
33+
z-index: 0;
34+
user-select: none;
35+
width: 60px;
36+
height: 60px;
37+
border-radius: 100px;
38+
background: #000;
39+
position: relative;
40+
display: grid;
41+
place-items: center;
42+
}
43+
44+
.glow,
45+
.thumb {
46+
z-index: -1;
47+
position: absolute;
48+
background: red;
49+
border-radius: 30px;
50+
}
51+
52+
.glow {
53+
width: 30px;
54+
height: 30px;
55+
}
56+
57+
.thumb {
58+
width: 10px;
59+
height: 20px;
60+
}
61+
</style>

‎docs/src/examples/EnumParam.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React, { useState } from 'react';
2+
import { SvgKnob } from '@eyewave/web-knobs/react';
3+
import { BoolParam, EnumParam } from '@eyewave/web-knobs/core/params';
4+
5+
export default function () {
6+
const [value, setValue] = useState(0);
7+
8+
const fruitParam = new EnumParam(['🍍', '🍉', '🍌', '🍋', '🍇'] as const);
9+
const filterTypeParam = new EnumParam([
10+
'Low pass',
11+
'High pass',
12+
'Low shelf',
13+
'High shelf',
14+
'Bell',
15+
'Notch',
16+
'Allpass'
17+
] as const);
18+
19+
const booleanParam = new BoolParam();
20+
21+
return (
22+
<div>
23+
<SvgKnob
24+
value={value}
25+
onValueChange={setValue}
26+
snapPoints={fruitParam.snapPoints}
27+
snapThreshold={fruitParam.snapThreshold}
28+
/>
29+
<p>{fruitParam.denormalize(value)}</p>
30+
31+
<SvgKnob value={value} onValueChange={setValue} {...filterTypeParam.knobProps} />
32+
<p>{filterTypeParam.denormalize(value)}</p>
33+
34+
<SvgKnob value={value} onValueChange={setValue} {...booleanParam.knobProps} />
35+
<p>{booleanParam.denormalize(value)}</p>
36+
</div>
37+
);
38+
}

‎docs/src/examples/EnumParam.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<SvgKnob
3+
v-model="value"
4+
:snapPoints="fruitParam.snapPoints"
5+
:snapThreshold="fruitParam.snapThreshold"
6+
/>
7+
<p>{{ fruitParam.denormalize(value) }}</p>
8+
9+
<SvgKnob v-model="value" v-bind="filterTypeParam.knobProps" />
10+
<p>{{ filterTypeParam.denormalize(value) }}</p>
11+
12+
<SvgKnob v-model="value" v-bind="booleanParam.knobProps" />
13+
<p>{{ booleanParam.denormalize(value) }}</p>
14+
</template>
15+
16+
<script setup lang="ts">
17+
import { ref } from 'vue';
18+
import { BoolParam, EnumParam } from '@eyewave/web-knobs/core/params';
19+
import { SvgKnob } from '@eyewave/web-knobs/vue';
20+
21+
const value = ref(0);
22+
23+
const fruitParam = new EnumParam(['🍍', '🍉', '🍌', '🍋', '🍇'] as const);
24+
25+
const filterTypeParam = new EnumParam([
26+
'Low pass',
27+
'High pass',
28+
'Low shelf',
29+
'High shelf',
30+
'Bell',
31+
'Notch',
32+
'Allpass'
33+
] as const);
34+
35+
const booleanParam = new BoolParam();
36+
</script>

‎docs/src/examples/ImageKnob.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { useState } from 'react';
2+
import { ImageKnob } from '@eyewave/web-knobs/react';
3+
4+
export default function () {
5+
const [value, setValue] = useState(0.0);
6+
7+
return (
8+
<ImageKnob
9+
value={value}
10+
onValueChange={setValue}
11+
src="/web-knobs/PurpleKnob2.webp"
12+
width={90}
13+
height={90}
14+
/>
15+
);
16+
}

‎docs/src/examples/ImageKnob.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<ImageKnob v-model="value" src="/web-knobs/PurpleKnob2.webp" :width="90" :height="90" />
3+
</template>
4+
5+
<script setup lang="ts">
6+
import { ref } from 'vue';
7+
import { ImageKnob } from '@eyewave/web-knobs/vue';
8+
9+
const value = ref(0.0);
10+
</script>

‎docs/src/examples/ParamKnob.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { useState } from 'react';
2+
import { SvgKnob } from '@eyewave/web-knobs/react';
3+
import { LinearParam, LogParam } from '@eyewave/web-knobs/core/params';
4+
5+
export default function () {
6+
const [value, setValue] = useState(0.0);
7+
8+
const freqParam = new LogParam(20, 20_000, 10);
9+
const linParam = new LinearParam(0, 100);
10+
11+
return (
12+
<section style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
13+
<div>
14+
<SvgKnob value={value} onValueChange={setValue} />
15+
<span>{Math.floor(freqParam.denormalize(value))}hz</span>
16+
</div>
17+
18+
<div>
19+
<SvgKnob value={value} onValueChange={setValue} />
20+
<span>{Math.floor(linParam.denormalize(value))}%</span>
21+
</div>
22+
</section>
23+
);
24+
}

‎docs/src/examples/ParamKnob.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<section>
3+
<div>
4+
<SvgKnob v-model="value" />
5+
<span>{{ Math.floor(freqParam.denormalize(value)) }} Hz</span>
6+
</div>
7+
8+
<div>
9+
<SvgKnob v-model="value" />
10+
<span>{{ Math.floor(linParam.denormalize(value)) }}%</span>
11+
</div>
12+
</section>
13+
</template>
14+
15+
<script setup lang="ts">
16+
import { ref } from 'vue';
17+
import { LinearParam, LogParam } from '@eyewave/web-knobs/core/params';
18+
import { SvgKnob } from '@eyewave/web-knobs/vue';
19+
20+
const value = ref(0.0);
21+
22+
const freqParam = new LogParam(20, 20000, 10);
23+
const linParam = new LinearParam(0, 100);
24+
</script>
25+
26+
<style scoped>
27+
section {
28+
display: flex;
29+
gap: 0.5rem;
30+
flex-wrap: wrap;
31+
}
32+
</style>

0 commit comments

Comments
 (0)