Commit a634abf4 authored by zhushengjie's avatar zhushengjie

新建圆环

parent 5c20c32e
{
"projectname": "通用面板模板",
"projectname": "灯源",
"i18n": false,
"description": "项目描述",
"description": "",
"miniprogramRoot": "./dist/tuya",
"dependencies": {
"BaseKit": "2.4.11",
......
.led {
position: absolute;
align-items:center;
justify-content:center;
}
import React, { useState } from 'react';
import React, { useState, useCallback } from 'react';
import { utils } from '@ray-js/panel-sdk';
import { getElementById } from '@ray-js/api';
import { View, Text, Slider, Image, usePageEvent } from '@ray-js/ray';
......@@ -6,17 +6,118 @@ import styles from './index.module.less';
import { Props } from './index.type';
import imgs from '../../res';
const { hsv2rgbString } = utils;
const HubColorCircle: React.FC<Props> = props => {
const dpState = props.DpStateData;
const codeMap = props.DpCodesMap;
const LED_SIZE = 110;
const HUE_RADIUS = 135;
const HUE_INNER_RADIUS = 76;
const THUMB_RADIUS = 27.5;
const THUMB_INNER_RADIUS = 22.5;
const hue = 180;
const brightness = 500;
const saturation = 500;
const [styleState, setStyleState] = useState({
container: {
flex: 1,
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
marginTop: 40,
},
displayView: {
width: HUE_RADIUS * 2,
height: HUE_RADIUS * 2,
},
led: {
left: (HUE_RADIUS * 2 - LED_SIZE) * 0.5,
top: (HUE_RADIUS * 2 - LED_SIZE) * 0.5,
width: LED_SIZE,
height: LED_SIZE,
borderRadius: LED_SIZE * 0.5,
backgroundColor: 'transparent',
},
controlView: {
height: 120,
alignSelf: 'stretch',
justifyContent: 'space-around',
marginTop: 15,
},
});
const toParseInt = (value: number): number => {
return Math.floor(value);
};
const handleColorChange = useCallback(
(value, type) => {
let h = 0;
let s = saturation;
let v = brightness;
switch (type) {
case 'hue':
h = value;
break;
case 'saturation':
s = value;
break;
case 'brightness':
v = value;
break;
default:
break;
}
updatePreview(h, s, v);
// putControlDataDP(h, s, v);
},
[hue, saturation, brightness]
);
const updatePreview = (h: number, s: number, v: number) => {
const backgroundColor = hsv2rgbString(h, s, v);
const data = { ...styleState };
data.setStyleState({
...backgroundColor,
backgroundColor,
});
};
// 长度不够补齐位数
const format = (value: string, len = 2) => {
let v = `${value}`;
if (v.length < len) {
v = '0'.repeat(len - v.length) + v;
} else {
v = v.slice(0, len);
}
return v;
};
// m: mode; h: hue; s: saturation; v: lightValue; b: whiteBright; k: kelvin;
// mode: 0 - 跳变; 1 - 呼吸;
const encodeControlData = (m: number, h: number, s: number, v: number, b: number, k: number) => {
const hsvbk = [h, s, v, b, k].reduce((total: string, next: number) => {
let cur = parseInt(`${next}`, 10).toString(16);
cur = format(cur, 4);
return total + cur;
}, '');
return m + hsvbk;
};
return (
<View className={styles.box}>
<View className={styles.header}>123</View>
<View className={styles.header}>
<View style={styleState.displayView}>
<View className={styles.led} style={styleState.led} />
</View>
</View>
<View className={styles.panel}>
<View className={styles.configList}>
<View className={styles.configList}>
......@@ -27,9 +128,9 @@ const HubColorCircle: React.FC<Props> = props => {
backgroundColor="#333333"
min={0}
max={1000}
step={codeMap.temp_value.property.step}
value={dpState.temp_value}
onChange={e => props.onSetDpState('temp_value', e.value)}
step={1}
value={brightness}
onChange={e => handleColorChange(e.value, 'brightness')}
/>
</View>
<Text className={styles.SliderValue}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment