拖动条dp下发

project.tuya.json

 {
-  "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

@@ -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

@@ -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);
-      props.onSetDpState('colour_data', dpValue);
+      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);
-      props.onSetDpState('colour_data', dpValue);
+      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

@@ -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];
+};