Skip to content

Commit ff4f343

Browse files
codeacme17codeacme17
committed
docs(LFO): add related files and example components
1 parent 38d2705 commit ff4f343

8 files changed

Lines changed: 296 additions & 4 deletions

File tree

‎docs/.island/config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,10 @@ function getSidebar(lang: 'zh' | 'en'): DefaultTheme.Sidebar {
141141
{
142142
text: getText('可视组件', 'Visualization'),
143143
items: [
144+
{
145+
text: getText('LFO 低频振荡器', 'LFO'),
146+
link: getLink('/component/LFO'),
147+
},
144148
{
145149
text: getText('Light 指示灯', 'Light'),
146150
link: getLink('/component/light'),

‎docs/en/component/LFO.mdx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Default, Delay } from '../../src/components/UsageBox/LFO.tsx'
2+
import { LFOAPITable } from '../../src/components/APITable/LFO.tsx'
3+
import { CodeBlock } from '../../src/components/CodeBlock.tsx'
4+
5+
# LFO
6+
7+
The LFO component is a flexible Low Frequency Oscillator (Low Frequency Oscillator) visualization component that provides a highly customizable and performance-optimized waveform display solution.
8+
9+
## Import
10+
11+
<CodeBlock code={`import { LFO } from 'echo-ui'`} />
12+
13+
## Usage
14+
15+
<Default />
16+
17+
### Delay
18+
19+
<Delay />
20+
21+
Sets the delay time before the waveform starts, in milliseconds (ms). This can be used to create a pause effect before the waveform starts. (Range: 0-1000)
22+
23+
## API
24+
25+
### LFO
26+
27+
<LFOAPITable />
28+
29+
## Type Declarations
30+
31+
<CodeBlock code={`export interface LFOProps extends React.HTMLAttributes<HTMLDivElement> {
32+
frequency?: number
33+
amplitude?: number
34+
delay?: number
35+
type?: 'sine' | 'square' | 'triangle'
36+
lineColor?: string
37+
lineWidth?: number
38+
}
39+
40+
export interface LFORef extends HTMLDivElement {}
41+
`} />

‎docs/src/components/APITable/LFO.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react'
2+
import { APITable, APITableDataType } from '.'
3+
import { Code } from '@nextui-org/react'
4+
5+
export const LFOAPITable = () => {
6+
const data: APITableDataType[] = [
7+
{
8+
attribute: 'frequency',
9+
description:
10+
'Controls the frequency of the waveform in Hertz (Hz). Frequency determines the number of cycles per second.',
11+
type: <Code>number</Code>,
12+
default: <Code>1</Code>,
13+
},
14+
{
15+
attribute: 'amplitude',
16+
description:
17+
"Controls the amplitude of the waveform. Amplitude determines the height of the waveform's peak. (range: 0-1)",
18+
type: <Code>number</Code>,
19+
default: <Code>0</Code>,
20+
},
21+
{
22+
attribute: 'delay',
23+
description:
24+
'Sets the delay time before the waveform starts, in milliseconds (ms). This can be used to create a pause effect before the waveform begins. (range: 0-1000)',
25+
type: <Code>number</Code>,
26+
default: <Code>0</Code>,
27+
},
28+
{
29+
attribute: 'type',
30+
description:
31+
"Specifies the type of the waveform. Options include sine wave ('sine'), square wave ('square'), and triangle wave ('triangle').",
32+
type: <Code>'sine' | 'square' | 'triangle'</Code>,
33+
default: <Code>'sine'</Code>,
34+
},
35+
{
36+
attribute: 'lineColor',
37+
description: 'Sets the color of the waveform line. Can be any valid CSS color value.',
38+
type: <Code>string</Code>,
39+
default: <Code>'var(--echo-primary)'</Code>,
40+
},
41+
{
42+
attribute: 'lineWidth',
43+
description: 'Determines the thickness of the waveform line, in pixels.',
44+
type: <Code>number</Code>,
45+
default: <Code>3</Code>,
46+
},
47+
]
48+
return <APITable data={data} />
49+
}

‎docs/src/components/Example/LFODefault.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from 'react'
2+
import * as Tone from 'tone'
3+
import { LFO, Knob, Button, LFOProps, SineIcon, SquareIcon, TriangleIcon } from 'echo-ui'
4+
import { Play, Pause } from 'lucide-react'
5+
6+
export const LFODefault = () => {
7+
const [type, setType] = React.useState<LFOProps['type']>('sine')
8+
const [frequency, setFrequency] = React.useState(1)
9+
const [amplitude, setAmplitude] = React.useState(0.7)
10+
const [isPlaying, setIsPlaying] = React.useState(false)
11+
12+
const autoFilter = React.useRef<Tone.AutoFilter | null>(null)
13+
const osc = React.useRef<Tone.Oscillator | null>(null)
14+
15+
React.useEffect(() => {
16+
autoFilter.current = new Tone.AutoFilter({
17+
frequency: frequency,
18+
depth: 1,
19+
})
20+
.toDestination()
21+
.start()
22+
23+
osc.current = new Tone.Oscillator({
24+
volume: -(1 - amplitude) * 100,
25+
frequency,
26+
}).connect(autoFilter.current)
27+
}, [])
28+
29+
React.useEffect(() => {
30+
autoFilter.current?.set({
31+
frequency: frequency,
32+
})
33+
34+
osc.current?.set({
35+
type,
36+
frequency: 440,
37+
volume: -(1 - amplitude) * 60,
38+
})
39+
}, [type, frequency, amplitude])
40+
41+
const triggerPlay = () => {
42+
if (isPlaying) {
43+
osc.current?.stop()
44+
setIsPlaying(false)
45+
} else {
46+
osc.current?.start()
47+
setIsPlaying(true)
48+
}
49+
}
50+
51+
return (
52+
<section className="h-32 mb-32 mx-auto">
53+
<Button.Group className="mb-2" radius="sm">
54+
<Button toggled={type === 'sine'} onClick={() => setType('sine')}>
55+
<SineIcon />
56+
</Button>
57+
<Button toggled={type === 'square'} onClick={() => setType('square')}>
58+
<SquareIcon />
59+
</Button>
60+
<Button toggled={type === 'triangle'} onClick={() => setType('triangle')}>
61+
<TriangleIcon />
62+
</Button>
63+
<Button
64+
onClick={triggerPlay}
65+
toggled={isPlaying}
66+
className="data-[toggled='true']:bg-green-500"
67+
>
68+
{isPlaying ? (
69+
<Pause className="fill-current" size={15} />
70+
) : (
71+
<Play className="fill-current" size={15} />
72+
)}
73+
</Button>
74+
</Button.Group>
75+
76+
<LFO amplitude={amplitude} frequency={frequency} type={type} />
77+
78+
<Knob.Group className="mt-2 flex justify-center" size={40} trackWidth={3} pointerHeight={6}>
79+
<Knob
80+
value={frequency}
81+
onChange={setFrequency}
82+
topLabel="Frequency"
83+
min={1}
84+
max={15}
85+
step={1}
86+
bottomLabel={frequency + 'Hz'}
87+
/>
88+
89+
<Knob
90+
className="mr-3"
91+
value={amplitude}
92+
min={0}
93+
max={1}
94+
step={0.1}
95+
onChange={setAmplitude}
96+
topLabel="Amplitude"
97+
bottomLabel={amplitude * 100 + '%'}
98+
/>
99+
</Knob.Group>
100+
</section>
101+
)
102+
}

‎docs/src/components/Example/LFODelay.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { LFO, Knob } from 'echo-ui'
3+
4+
export const LFODelay = () => {
5+
const [delay, setDelay] = React.useState(1)
6+
7+
return (
8+
<section className="">
9+
<LFO delay={delay} className="h-32" frequency={2} />
10+
11+
<Knob
12+
value={delay}
13+
onChange={setDelay}
14+
className="mt-3"
15+
topLabel="Delay"
16+
min={1}
17+
max={1000}
18+
step={1}
19+
sensitivity={10}
20+
size={40}
21+
trackWidth={3}
22+
pointerHeight={6}
23+
bottomLabel={delay + 'ms'}
24+
/>
25+
</section>
26+
)
27+
}

‎docs/src/components/UsageBox/LFO.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react'
2+
import { UsageBox } from '.'
3+
import { LFODefault } from '../Example/LFODefault'
4+
import { LFODelay } from '../Example/LFODelay'
5+
6+
export const Default = () => {
7+
const scope = { LFODefault }
8+
const code = `<LFODefault />`
9+
10+
return (
11+
<UsageBox
12+
code={code}
13+
scope={scope}
14+
type="link"
15+
url="https://github.com/codeacme17/echo-ui/blob/main/docs/src/components/Example/LFODefault.tsx"
16+
/>
17+
)
18+
}
19+
20+
export const Delay = () => {
21+
const scope = { LFODelay }
22+
const code = `<LFODelay />`
23+
24+
return (
25+
<UsageBox
26+
code={code}
27+
scope={scope}
28+
type="link"
29+
url="https://github.com/codeacme17/echo-ui/blob/main/docs/src/components/Example/LFODelay.tsx"
30+
/>
31+
)
32+
}

‎docs/zh/component/LFO.mdx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Default, Delay } from '../../src/components/UsageBox/LFO.tsx'
2+
import { LFOAPITable } from '../../src/components/APITable/LFO.tsx'
3+
import { CodeBlock } from '../../src/components/CodeBlock.tsx'
4+
5+
# LFO 低频振荡器
6+
7+
LFO 组件是一个灵活的低频振荡器（Low Frequency Oscillator）可视化组件，提供了一个高度可定制和性能优化的波形展示解决方案
8+
9+
## 引入
10+
11+
<CodeBlock code={`import { LFO } from 'echo-ui'`} />
12+
13+
## 代码演示
14+
15+
<Default />
16+
17+
### 延迟设置
18+
19+
<Delay />
20+
21+
设置波形开始之前的延迟时间，以毫秒 (ms) 为单位。 这可用于在波形开始之前创建暂停效果。 （范围：0-1000）
22+
23+
## API
24+
25+
### LFO
26+
27+
<LFOAPITable />
28+
29+
## 类型声明
30+
31+
<CodeBlock code={`export interface LFOProps extends React.HTMLAttributes<HTMLDivElement> {
32+
frequency?: number
33+
amplitude?: number
34+
delay?: number
35+
type?: 'sine' | 'square' | 'triangle'
36+
lineColor?: string
37+
lineWidth?: number
38+
}
39+
40+
export interface LFORef extends HTMLDivElement {}
41+
`} />

‎packages/components/visualization/LFO/types.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
export interface LFOProps extends React.HTMLAttributes<HTMLDivElement> {
22
frequency?: number
33
amplitude?: number
4-
minFrequency?: number
5-
maxFrequency?: number
6-
min?: number
7-
max?: number
84
delay?: number
95
type?: 'sine' | 'square' | 'triangle'
106
lineColor?: string

0 commit comments

Comments
 (0)