Skip to content

L
lamp
Commit 5c5375fe authored by zhushengjie123's avatar zhushengjie123
Browse files
Options

拖动条dp下发

parent b6e0f086
Show whitespace changes
Inline Side-by-side
Showing with 108 additions and 92 deletions
project.tuya.json
View file @ 5c5375fe
{
"projectname": "灯源",
"projectname": "彩灯",
"i18n": false,
"description": "",
"miniprogramRoot": "./dist/tuya",
......@@ -10,5 +10,5 @@
"DeviceKit": "2.4.7"
},
"baseversion": "2.9.5",
"productId": "hewd8dsaiwxpznpr"
"productId": "guim5is1399ovfv3"
}
src/components/hubCircle/index.tsx
View file @ 5c5375fe
......@@ -60,6 +60,7 @@ const HubCircle: React.FC<Props> = props => {
const [addFlag, setAddFlag] = useState(true);
const [modalShow, setModalShow] = useState(false);
const [brightValue, setbrightValue] = useState(dpState.bright_value);
const [colorArr, setColorArr] = useState<colorItem[]>([
{ temp_value: 100, bright_value: 100, color: '#CEEDFE', active: false },
......@@ -67,30 +68,39 @@ const HubCircle: React.FC<Props> = props => {
{ temp_value: 300, bright_value: 300, color: '#FFE2A4', active: false },
]);
const getTempshowByDpTemp = (dpTemp: number) => {
const start = dataSourse.tempValue[0];
const end = dataSourse.tempValue[1];
const tempValue = ((end - start) / 1000) * dpTemp + start;
return tempValue;
};
const getColor = (bright_value: number, KL = (6500 - 2700) / 2 + 2700) => {
const colorRgb = temperatureToRgb(KL);
const colorHsv = rgb2hsv(colorRgb[0], colorRgb[1], colorRgb[2]);
const nowColor = hsv2rgbString(colorHsv[0], colorHsv[1], colorHsv[2], bright_value / 1000);
return nowColor;
const color = hsv2rgbString(colorHsv[0], colorHsv[1], colorHsv[2], bright_value / 1000);
return color;
};
const [nowColor, setnowColor] = useState(
getColor(dpState.bright_value, getTempshowByDpTemp(dpState.temp_value))
);
const [dataState, setDataState] = useState({
angleValue: 0, // 角度值 0 ~ 360
angleShow: 0, // 角度展示 0 ~ 180
tempshow: (6500 - 2700) / 2 + 2700, // 色温展示
nowColor: '#000', // 当前颜色
bright_value: dpState.bright_value,
});
useEffect(() => {
const kl = getTempshowByDpTemp(dpState.temp_value);
const color = getColor(dpState.bright_value, kl);
setDataState({
...dataState,
nowColor: color,
tempshow: kl,
});
}, []);
// useEffect(() => {
// const kl = getTempshowByDpTemp(dpState.temp_value);
// const color = getColor(dpState.bright_value, kl);
// setDataState({
// ...dataState,
// nowColor: color,
// tempshow: kl,
// });
// }, [dpState.temp_value]);
// 442
const circleLocationOrigin = (tempValue: number) => {
let rad;
......@@ -154,14 +164,9 @@ const HubCircle: React.FC<Props> = props => {
setAddFlag(false);
return;
}
const colorRgb = temperatureToRgb(dataState.tempshow);
const colorHsv = rgb2hsv(colorRgb[0], colorRgb[1], colorRgb[2]);
const nowColor = hsv2rgbString(colorHsv[0], colorHsv[1], colorHsv[2], 1);
setDataState({
...dataState,
nowColor,
});
const color = getColor(dpState.bright_value, dataState.tempshow);
setnowColor(color);
const item = {
temp_value: dpState.temp_value,
......@@ -239,14 +244,8 @@ const HubCircle: React.FC<Props> = props => {
const handleBarEnd = () => {
setColorStateAtom({ ifDrag: false });
const dpValue = getTempDpValue(dataState.angleValue, dataState.angleShow);
const colorRgb = temperatureToRgb(dataState.tempshow);
const colorHsv = rgb2hsv(colorRgb[0], colorRgb[1], colorRgb[2]);
const nowColor = hsv2rgbString(colorHsv[0], colorHsv[1], dpState.bright_value, 1);
setDataState({
...dataState,
nowColor,
});
const color = getColor(dpState.bright_value, dataState.tempshow);
setnowColor(color);
props.onSetDpState('temp_value', dpValue);
};
......@@ -326,28 +325,12 @@ const HubCircle: React.FC<Props> = props => {
const handleSlidering = (type, e) => {
const bright_value = e.value;
const colorRgb = temperatureToRgb(dataState.tempshow);
const colorHsv = rgb2hsv(colorRgb[0], colorRgb[1], colorRgb[2]);
const nowColor = hsv2rgbString(
colorHsv[0],
colorHsv[1],
colorHsv[2],
dataState.bright_value / 1000
);
const color = getColor(dpState.bright_value, dataState.tempshow);
setDataState({
...dataState,
nowColor,
bright_value,
});
setnowColor(color);
setbrightValue(bright_value);
};
const getTempshowByDpTemp = (dpTemp: number) => {
const start = dataSourse.tempValue[0];
const end = dataSourse.tempValue[1];
const tempValue = ((end - start) / 1000) * dpTemp + start;
return tempValue;
};
// const [temperature, setTemperature] = useState(dpState.temp_value);
// const handleMove = (v: number) => {
// setTemperature(v);
......@@ -370,7 +353,7 @@ const HubCircle: React.FC<Props> = props => {
top: `${circleLocation.top}px`,
width: `${dataSourse.bar_r * 2}px`,
height: `${dataSourse.bar_r * 2}px`,
backgroundColor: dataState.nowColor,
backgroundColor: nowColor,
}}
onTouchStart={handleBarTouch}
onTouchMove={handleBarMove}
......@@ -385,45 +368,21 @@ const HubCircle: React.FC<Props> = props => {
/> */}
</View>
<View className={styles.panel}>
{/* <View className={styles.configList}>
<Image src={imgs.icon_bhd} className={styles.icoImg} />
<View className={styles.slider}>
<Slider
activeColor="#fff"
backgroundColor="#333333"
min={codeMap.temp_value.property.min}
max={codeMap.temp_value.property.max}
step={codeMap.temp_value.property.step}
value={dpState.temp_value}
onChange={e => props.onSetDpState('temp_value', e.value)}
/>
</View>
<Text className={styles.SliderValue}>
{toParseInt(
(dpState.temp_value /
(codeMap.temp_value.property.max - codeMap.temp_value.property.min)) *
100
)}
%
</Text>
</View> */}
<View className={styles.configList}>
<Image src={imgs.icon_ld} className={styles.icoImg} />
<View className={styles.slider}>
<Slider
activeColor="#fff"
backgroundColor="#333333"
min={codeMap.bright_value.property.min}
max={codeMap.bright_value.property.max}
step={codeMap.bright_value.property.step}
value={dataState.bright_value}
min={10}
max={1000}
step={1}
value={brightValue}
onChange={e => handleSlider('bright_value', e)}
onChanging={e => handleSlidering('bright_value', e)}
/>
</View>
<Text className={styles.SliderValue}>
{toParseInt((dataState.bright_value / 1000) * 100)}%
</Text>
<Text className={styles.SliderValue}>{toParseInt((brightValue / 1000) * 100)}%</Text>
</View>
<View className={styles.configList}>
{colorArr.map(item => (
......
src/components/hubColorCircle/index.tsx
View file @ 5c5375fe
......@@ -62,7 +62,7 @@ const HubCircle: React.FC<Props> = props => {
]);
const [dataState, setDataState] = useState({
hue: Hue, // 角度展示 0 ~ 180
hue: Hue, // 角度展示
temp_value: Temp_value,
bright_value: Bright_value,
nowColor: hueToColor(Hue), // 当前颜色
......@@ -251,12 +251,15 @@ const HubCircle: React.FC<Props> = props => {
});
};
const handleStateChange = (type, e) => {
const handleStateChange = (type: string, e: any, ifEnd?: string) => {
if (type === 'temp_value') {
const temp_value = e.value;
const nowColor = hueToColor(dataState.hue, temp_value / 10, dataState.bright_value / 9.9);
const dpValue = hsvToDpdata(dataState.hue, temp_value, dataState.bright_value);
if (ifEnd) {
props.onSetDpState('colour_data', dpValue);
return;
}
setDataState({
...dataState,
temp_value,
......@@ -267,7 +270,10 @@ const HubCircle: React.FC<Props> = props => {
const bright_value = e.value;
const nowColor = hueToColor(dataState.hue, dataState.temp_value / 10, bright_value / 9.9);
const dpValue = hsvToDpdata(dataState.hue, dataState.temp_value, bright_value);
if (ifEnd) {
props.onSetDpState('colour_data', dpValue);
return;
}
setDataState({
...dataState,
bright_value,
......@@ -327,11 +333,14 @@ const HubCircle: React.FC<Props> = props => {
min={0}
max={1000}
step={1}
value={Temp_value}
onChange={e => handleStateChange('temp_value', e)}
value={dpState.temp_value}
onChange={e => handleStateChange('temp_value', e, 'end')}
onChanging={e => handleStateChange('temp_value', e)}
/>
</View>
<Text className={styles.SliderValue}>{toParseInt((Temp_value / 1000) * 100)}%</Text>
<Text className={styles.SliderValue}>
{toParseInt((dpState.temp_value / 1000) * 100)}%
</Text>
</View>
<View className={styles.configList}>
<Image src={imgs.icon_ld} className={styles.icoImg} />
......@@ -342,11 +351,14 @@ const HubCircle: React.FC<Props> = props => {
min={10}
max={1000}
step={1}
value={Bright_value}
onChange={e => handleStateChange('bright_value', e)}
value={dataState.bright_value}
onChange={e => handleStateChange('bright_value', e, 'end')}
onChanging={e => handleStateChange('temp_value', e)}
/>
</View>
<Text className={styles.SliderValue}>{toParseInt((Bright_value / 990) * 100)}%</Text>
<Text className={styles.SliderValue}>
{toParseInt((dataState.bright_value / 990) * 100)}%
</Text>
</View>
<View className={styles.configList}>
{colorArr.map(item => (
......
src/utils/index.ts
View file @ 5c5375fe
......@@ -94,8 +94,7 @@ export const format = (value: string, len = 2) => {
};
/**
* @desc 将色温转化为rgb
* 范围为2700~6500
* @desc 将色温转化为rgb(高值白炽灯)
* 对应范围为1000~40000
* @param {number} temperature - 5000
*
......@@ -103,7 +102,7 @@ export const format = (value: string, len = 2) => {
*
*/
export const temperatureToRgb = (temperature: number): Array<any> => {
export const temperatureToRgbH = (temperature: number): Array<number> => {
let tempera = temperature;
if (tempera < 1000) {
tempera = 1000;
......@@ -161,3 +160,49 @@ export const temperatureToRgb = (temperature: number): Array<any> => {
}
return [Math.floor(red), Math.floor(green), Math.floor(blue)];
};
/**
* @desc 将色温转化为rgb(低值白炽灯)
* @param {number} temperature : 5000
*
* @return {array} [r,g,b]
*
*/
export const temperatureToRgb = (tempera: number): Array<number> => {
const temperature = tempera / 100.0;
let red;
let green;
let blue;
if (temperature < 66.0) {
red = 255;
} else {
red = temperature - 55.0;
red = 351.97690566805693 + 0.114206453784165 * red - 40.25366309332127 * Math.log(red);
if (red < 0) red = 0;
if (red > 255) red = 255;
}
if (temperature < 66.0) {
green = temperature - 2;
green =
-155.25485562709179 - 0.44596950469579133 * green + 104.49216199393888 * Math.log(green);
if (green < 0) green = 0;
if (green > 255) green = 255;
} else {
green = temperature - 50.0;
green = 325.4494125711974 + 0.07943456536662342 * green - 28.0852963507957 * Math.log(green);
if (green < 0) green = 0;
if (green > 255) green = 255;
}
if (temperature >= 66.0) {
blue = 255;
} else if (temperature <= 20.0) {
blue = 0;
} else {
blue = temperature - 10;
blue = -254.76935184120902 + 0.8274096064007395 * blue + 115.67994401066147 * Math.log(blue);
if (blue < 0) blue = 0;
if (blue > 255) blue = 255;
}
return [red, green, blue];
};
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