English | 简体中文
@ray-js/lamp-music-card
music rhythmic components
Installation
$ npm install @ray-js/lamp-music-card
# or
$ yarn add @ray-js/lamp-music-cardProps
interface IProps {
/**
* @description.zh 卡片数据
* @description.en Card data
* @default null
*/
data: {
title: string;
icon: string;
colorArr?: string[];
};
/**
* @description.zh 是否正在执行
* @description.en Whether it is executing
* @default false
*/
active: boolean;
/**
* @description.zh 整体样式
* @description.en Whole style
* @default {}
*/
style?: any;
/**
* @description.zh 内容样式
* @description.en Content style
* @default {}
*/
contentStyle?: any;
/**
* @description.zh icon颜色
* @description.en icon color
* @default {}
*/
iconColor?: string; // #xxxxxx
/**
* @description.zh 操作时的回调函数
* @description.en Callback function when the operation
* @default () => void
*/
onPlay: (active: boolean) => void;
/**
* @description.zh 自定义卡片内容
* @description.en Custom card content
* @default () => null
*/
renderCustom?: () => JSX.Element;
}Usage
import LampMusicCard from '@ray-js/lamp-music-card';
export default function Home() {
const [active, setActive] = useState(false);
const theme = 'dark';
const data = {
title: '音乐卡片', // 卡片标题
icon: JazzImage, // 展示的icon图
colorArr: musicColorArr1, // 可选 自定义颜色动画数据 默认使用musicColorArr1的颜色值
};
const onPlay = (active: boolean) => {
setActive(active);
console.log('onPlay', active);
// 此处可以根据状态进行dp的下发
};
return (
<View
style={{
background: '#000',
}}
>
<LampMusicCard
data={data}
active={active}
onPlay={onPlay}
renderCustom={() => {
return (
<View
style={{
width: '100%',
height: '100px',
}}
>
<Text style={{ color: '#fff' }}>自定义内容</Text>
</View>
);
}}
/>
</View>
);
}More - Music rhythmic ability development
1. Function introduction
1. Equipment Music Rhythm (Local Music rhythm)
Concept: The volume signal is collected through the local microphone, and the voltage value of the signal is calculated to achieve the effect of music rhythm. Since the scheme does not have a unified implementation logic, the lighting now has two local music rhythm logic.
2. app music rhythm
- The microphone of the mobile phone collects the audio information of the external music, converts the audio information in time domain and frequency domain through the TUYA intelligent API, and outputs the h s v to realize the effect of the light changing with the rhythm of the music.
- The app, combined with the control panel of the product, collects the surrounding sounds through the peripherals of the mobile phone. The API capability is responsible for receiving the sound and provides the interface of the panel with related capabilities. The panel is responsible for sending the dp of the music rhythm at an interval of 300ms according to the specified mode, and the device analyzes the control command according to the specified protocol to make the device display the corresponding color.
ui Example effect:
2. dp protocol
Select the dp protocol based on the dp configured in the scheme
1. Device music beats
a. mic_music_data
| index | name | Number of characters | identification | Data type | Field attribute | Field description |
|---|---|---|---|---|---|---|
| 1 | 版本号 | 字符串 | 初始版本：00 | |||
| 2 | 麦克风开关 | 布尔值 | 0：关闭；1：开启 | |||
| 3 | 律动风格编号 | 数值 | 最大值：255 最小值：0 步距：1 倍数：0 hex 格式，范围 0x00 ~ 0xff | |||
| 4 | 律动方式 | 枚举 | 跳变：00 闪烁：01 呼吸：02 | |||
| 5 | 变换速度 | 数值 | 最大值：100 最小值：1 步距：1 倍数：0 hex 格式，范围 0x01~0x64 | |||
| 6 | 灵敏度 | 数值 | 最大值：100 最小值：1 步距：1 倍数：0 hex 格式，范围 0x01~0x64 | |||
| 7 | 色度(循环) | 数值 | 最大值：360 最小值：0 步距：1 倍数：0 hex 格式，范围 0x0000~0x0168 | |||
| 8 | 饱和度（循环） | 数值 | 最大值：100 最小值：0 步距：1 倍数：0 hex 格式，范围 0x01~0x64 |
b. mic_music_data（beacon 照明本地 mic 音乐 dp ）
| index | name | Number of characters | identification | Data type | Field attribute | Field description |
|---|---|---|---|---|---|---|
| 1 | 本地音乐开关 | 8bit | ABBBCCDD | 字符串 | A：本地音乐开关，0：关；1：开； BBB：音乐模式 ID，最多支持 8 种； CC：无声音输入时的灯光状态； DD：变化方式 | |
| 2 | 变化速度 | speed | 数值 | 最大值：100 最小值：1 步距：1 倍数：0 | ||
| 3 | 灵敏度 | sensitivity | 数值 | 最大值：100 最小值：1 步距：1 倍数：0 | ||
| 4 | 亮度 | brightness | 数值 | 最大值：100 最小值：1 步距：1 倍数：0 |
c. 设备音乐律动 - dreamlightmic_music_data（适用于幻彩类型灯具）
| index | name | Number of characters | identification | Data type | Field attribute | Field description |
|---|---|---|---|---|---|---|
| 1 | 版本号 | 1 | version | 数值 | 最大值：255 最小值：0 步距：1 倍数：0 | |
| 2 | 本地麦克风开关 | 2 | switch | 数值 | 最大值：255 最小值：0 步距：1 倍数：0 | |
| 3 | 音乐模式编号 | 1 | ID | 数值 | 最大值：255 最小值：0 步距：1 倍数：0 | |
| 4 | 变化方式 | 1 | mode | 比特反算 | Bit0：变化方式标识：style1 0：变化方式 1：变化方式 Bit1：变化方式标识：style2 0：变化方式 1：变化方式 ... | |
| 5 | 变化速度 | 1 | speed | 数值 | 最大值：100 最小值：1 步距：1 倍数：0 | |
| 6 | 灵敏度 | 1 | sensitivity | 数值 | 最大值：100 最小值：1 步距：1 倍数：0 | |
| 7 | 设置项 A | 1 | setting_A | 数值 | 最大值：255 最小值：0 步距：1 倍数：0 | |
| 8 | 设置项 B | 1 | setting_B | 数值 | 最大值：255 最小值：0 步距：1 倍数：0 | |
| 9 | 设置项 C | 1 | setting_C | 数值 | 最大值：255 最小值：0 步距：1 倍数：0 | |
| 10 | 亮度 | 1 | V | 数值 | 最大值：100 最小值：0 步距：1 倍数：0 | |
| 11 | 色度 | 2 | H | 数值 | 最大值：360 最小值：0 步距：1 倍数：0 | |
| 12 | 饱和度 | 1 | S | 数值 | 最大值：100 最小值：0 步距：1 倍数：0 |
d. mic_music_sync(适用于 sigmesh)
| index | name | Number of characters | identification | Data type | Field attribute | Field description |
|---|---|---|---|---|---|---|
| 1 | 本地麦克风开关 | 1 | mic_switch | 枚举 | 关闭：0 打开：1 |
|
| 2 | 音乐模式编号 | 1 | music_number | 数值 | 最大值：255 最小值：0 步距：1 倍数：0 |
|
| 3 | 灯光变化方式 | 1 | change_mode | 字符串 | 无声音时灯光状态：6bit，7bit。 0-灭灯， 1-保持最后灯光状态， 2-缓慢渐变。 有声音时灯光状态：0bit，1bit，2bit，3bit，4bit，5bit。 0 - 呼吸模式， 1 - 跳变模式， 2 - 闪烁模式， 3 - 渐变模式。 | |
| 4 | 灵敏度 | 1 | sensitivity | 数值 | 最大值：100 最小值：1 步距：1 倍数：0 |
|
| 5 | 速度/数量律动方式 | 1 | Speed_rhythm_mode | 枚举 | 不律动：00 随分贝律动：01 随音调律动：02 |
|
| 6 | 亮度律动方式 | 1 | Brightness_rhythm_mode | 枚举 | 不律动：00 随分贝律动：01 随音调律动：02 |
|
| 7 | 颜色律动方式 | 1 | Color_rhythm_mode | 枚举 | 不律动：00 随分贝律动：01 随音调律动：02 |
|
| 8 | 速度/数量 | 1 | Speed_quantity | 数值 | 最大值：100 最小值：0 步距：1 倍数：0 |
|
| 9 | 亮度 | 1 | brightness | 数值 | 最大值：100 最小值：0 步距：1 倍数：0 |
|
| 10 | 颜色 | 2 | H | 数值 | 最大值：360 最小值：0 步距：1 倍数：0 |
【10 颜色】和【11 饱和度】不固定循环， 【10 颜色】和【11 饱和度】最多支持 8 组 |
| 11 | 饱和度 | 1 | S | 数值 | 最大值：100 最小值：0 步距：1 倍数：0 |
【10 颜色】和【11 饱和度】不固定循环， 【10 颜色】和【11 饱和度】最多支持 8 组 |
2. App 音乐律动
a.music_data
| index | name | Number of characters | identification | Data type | Field attribute | Field description |
|---|---|---|---|---|---|---|
| 1 | 变化方式 | 1 | change_mode | 枚举 | 跳变：0 渐变：1 | |
| 2 | 色度 | 4 | H | 数值 | 最大值：360 最小值：0 步距：1 倍数：0 色度：0 |
|
| 3 | 饱和度 | 4 | S | 数值 | 最大值：1000 最小值：0 步距：1 倍数：0 饱和度：0 |
|
| 4 | 明度 | 4 | V | 数值 | 最大值：1000 最小值：0 步距：1 倍数：0 明度：0 |
|
| 5 | 白光亮度 | 4 | B | 数值 | 最大值：1000 最小值：0 步距：1 倍数：0 白光亮度：0 |
|
| 6 | 色温值 | 4 | T | 数值 | 最大值：1000 最小值：0 步距：1 倍数：0 色温值：0 |
b. music_data_raw
| index | name | Number of characters | identification | Data type | Field attribute | Field description |
|---|---|---|---|---|---|---|
| 1 | 变化方式 | 1 | change_mode | 枚举 | 跳变：00 渐变：01 | |
| 2 | 色度 | 2 | hue | 数值 | 最大值：360 最小值：0 步距：1 倍数：0 | |
| 3 | 饱和度 | 1 | saturation | 数值 | 最大值：100 最小值：0 步距：1 倍数：0 | |
| 4 | 明度 | 1 | value | 数值 | 最大值：100 最小值：0 步距：1 倍数：0 |
3. How to develop
1. Introduce components into the project
import { LampMusicCard } from '@ray-js/components-ty-lamp';2. See component usage
3. Music rhythm development example:
- 1.Take mic_music_data dp as an example:
- 2.Protocol parsing Please refer to the specific protocol：https://developer.tuya.com/cn/miniapp/panels/extended/sdm/interceptors/dpkit#%E5%8F%AF%E9%80%89protocols
- 3.Protocol data delivery
import LampMusicCard from '@ray-js/lamp-music-card';
import { setKeepScreenOn } from '@ray-js/ray';
// The default local music data can be modified according to the specific project
const defaultLocalMusic: any[] = [
// 摇滚
{
title: '摇滚',
icon: 'icon图片地址',
version: 0,
power: false,
id: 0,
mode: 1,
speed: 100,
sensitivity: 50,
colors: [
{
hue: 0,
saturation: 1000,
},
{
hue: 120, // 0078
saturation: 1000,
},
{
hue: 240, // 00f0
saturation: 1000,
},
{
hue: 60, // 003c
saturation: 1000,
},
{
hue: 180, // 00b4
saturation: 1000,
},
{
hue: 300, // 012c
saturation: 1000,
},
],
},
// 爵士
{
title: '爵士',
icon: 'icon图片地址',
version: 0,
power: false,
id: 1,
mode: 0,
speed: 50,
sensitivity: 50,
colors: [
{
hue: 0,
saturation: 1000,
},
{
hue: 120, // 0078
saturation: 1000,
},
{
hue: 240, // 00f0
saturation: 1000,
},
],
},
// 古典
{
title: '古典',
icon: 'icon图片地址',
version: 0,
power: false,
id: 2,
mode: 0,
speed: 30,
sensitivity: 50,
colors: [
{
hue: 0,
saturation: 1000,
},
{
hue: 120, // 0078
saturation: 1000,
},
{
hue: 240, // 00f0
saturation: 1000,
},
{
hue: 60, // 003c
saturation: 1000,
},
{
hue: 180, // 00b4
saturation: 1000,
},
{
hue: 300, // 012c
saturation: 1000,
},
{
hue: 0,
saturation: 0,
},
],
},
// 球赛
{
title: '球赛',
icon: 'icon图片地址',
version: 0,
power: false,
id: 3,
mode: 1,
speed: 80,
sensitivity: 50,
colors: [
{
hue: 0,
saturation: 1000,
},
{
hue: 120, // 0078
saturation: 1000,
},
{
hue: 240, // 00f0
saturation: 1000,
},
],
},
// 游戏
{
title: '游戏',
icon: 'icon图片地址',
version: 0,
power: false,
id: 4,
mode: 2,
speed: 80,
sensitivity: 50,
colors: [
{
hue: 0,
saturation: 1000,
},
{
hue: 240, // 00f0
saturation: 1000,
},
{
hue: 180, // 00b4
saturation: 1000,
},
{
hue: 300, // 012c
saturation: 1000,
},
],
},
]
export default function Home() {
const [localMusicList, setLocalMusicList] = useState(defaultLocalMusic);
const onPlay = (active: boolean, index: boolean) => {
// You can deliver the dp based on the status
const currentItem = localMusicList[index];
if (!currentItem) {
return;
}
const _currentItem = {
...currentItem,
power: active,
};
localMusicList[index] = _currentItem;
setLocalMusicList([...localMusicList]);
// Call the dp method, the dp parsing and formatting has been completed in the template code
putDpData({
mic_music_data: _currentItem,
});
};
return (
<View
style={{
background: '#000',
}}
>
{localMusicList.map((item, index) => {
const data = {
title: item.title,
icon: item.icon,
active: item.power,
colorArr: item.colors.map(i => {
const { hue, saturation } = i;
// 转换为rgb或#xxxxxx颜色数据
return xxx
});
}
return (
<LampMusicCard
data={data}
active={data.active}
onPlay={(active: boolean) => {onPlay(active, index)}}
renderCustom={() => {
return (
<View
style={{
width: '100%',
height: '100px',
}}
>
<Text style={{ color: '#fff' }}>自定义内容</Text>
</View>
);
}}
/>
)
})}
</View>
);
}Precautions ⚠️
- Different protocols may use different DPS. You can query the protocol based on the dp configured in the solution