0.0.7 • Published 11 months ago
@ray-js/lamp-strip-light-smear v0.0.7
English | 简体中文
@ray-js/lamp-strip-light-smear
lamp-strip-light-smear
Installation
$ npm install @ray-js/lamp-strip-light-smear
# or
$ yarn add @ray-js/lamp-strip-light-smear
Develop
# watch compile component code
yarn watch
# watch compile demo
yarn start:tuya
Usage
- ! Note ⚠️ : The current component supports 20 light segments by default, because different light segments display effect is not consistent, if you need to display other number of light segments, you can refer to the code development
- After installing this component, you can see the source code in the node_module/@ray-js/lamp-strip-light-smear/src folder
- The implementation logic is described in node_module/@ray-js/lamp-strip-light-smear/src/README.md
import DimmerStrip, { hsv2rgbString } from '@ray-js/lamp-strip-light-smear';
export default () => {
const [smearedColor, setSmearedColor] = useState<HSV>({ h: 0, s: 1000, v: 1000 });
const [lightColorMaps, setLightColorMaps] = useState({});
const [smearMode, setSmearMode] = useState(SmearMode.all);
useEffect(() => {
// Simulation modifies the color of the current smear
setTimeout(() => {
setSmearedColor({ h: 120, s: 1000, v: 1000 });
}, 1000);
}, []);
useEffect(() => {
const _lightColorMaps = {};
const { h, s, v } = smearedColor;
new Array(20).fill(0).forEach((_, index) => {
_lightColorMaps[index] = hsv2rgbString(h, s / 10, v / 10, 1);
});
setLightColorMaps(_lightColorMaps);
}, []);
const onChange = data => {
const newCheckedMapColor = {};
[...data].forEach(item => {
newCheckedMapColor[item] = hsv2rgbString(
smearedColor.h,
smearedColor.s / 10,
smearedColor.v / 10,
1
);
});
const _lightColorMaps = {
...lightColorMaps,
...newCheckedMapColor,
};
setLightColorMaps(_lightColorMaps);
};
const onEnd = data => {
const newCheckedMapColor = {};
[...data].forEach(item => {
newCheckedMapColor[item] = hsv2rgbString(
smearedColor.h,
smearedColor.s / 10,
smearedColor.v / 10,
1
);
});
const _lightColorMaps = {
...lightColorMaps,
...newCheckedMapColor,
};
setLightColorMaps(_lightColorMaps);
};
return (
<DimmerStrip
className="aaa"
disabled={false}
type={smearMode}
gradient
smearedColor={smearedColor}
lightColorMaps={lightColorMaps}
onLightChange={onChange}
onLightEnd={onEnd}
/>
);
};
0.0.8-beta-1
11 months ago
0.0.8-beta-2
11 months ago
0.0.7-beta-1
1 year ago
0.0.7
1 year ago
0.0.6-beta-1
1 year ago
0.0.6
1 year ago
0.0.5-beta-1
1 year ago
0.0.4-beta-1
1 year ago
0.0.3-beta-1
1 year ago
0.0.2-beta-1
1 year ago
0.0.1-beta-1
1 year ago