Browse Source

Changed colorpicker

master
Rino Grupp 3 years ago
parent
commit
63506abb20
8 changed files with 986 additions and 303 deletions
  1. +819
    -291
      package-lock.json
  2. +1
    -0
      package.json
  3. +108
    -0
      src/components/ManualView/CustomPicker.js
  4. +12
    -2
      src/components/ManualView/lampList.js
  5. +9
    -7
      src/components/ManualView/rgbLamp.js
  6. +36
    -1
      src/containers/ManualTab.js
  7. +1
    -1
      src/redux/actions.js
  8. +0
    -1
      src/static.js

+ 819
- 291
package-lock.json
File diff suppressed because it is too large
View File


+ 1
- 0
package.json View File

@ -8,6 +8,7 @@
"@material-ui/styles": "^4.5.0",
"axios": "^0.18.1",
"clsx": "^1.0.4",
"colorconverter": "^0.1.1",
"react": "^16.10.2",
"react-color": "^2.17.3",
"react-dom": "^16.10.2",

+ 108
- 0
src/components/ManualView/CustomPicker.js View File

@ -0,0 +1,108 @@
import React from 'react';
import { CustomPicker } from 'react-color';
const { Hue, Alpha } = require('react-color/lib/components/common');
const colors= ['#ffffff', '#ff0000','#ff8000','#ffff00','#80ff00','#00ff00','#00ff80','#00ffff',
'#0080ff','#0000ff','#8000ff','#ff00ff','#ff0080']
const inlineStyles = {
container: {
boxShadow: 'rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px',
display: 'flex',
flexDirection: 'column',
height: 282,
width: 200,
},
pointer: {
width: '18px',
height: '18px',
borderRadius: '50%',
transform: 'translate(-9px, -1px)',
backgroundColor: 'rgb(248, 248, 248)',
boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
},
slider: {
marginTop: '1px',
width: '4px',
borderRadius: '1px',
height: '20px',
boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
background: '#fff',
transform: 'translateX(-2px)'
},
saturation: {
width: '100%',
paddingBottom: '75%',
position: 'relative',
overflow: 'hidden',
},
swatchSquare: {
minWidth: 20,
minHeight: 20,
margin: '1px 2px',
cursor: 'pointer',
boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
},
preview: {
minHeight: 50,
minWidth: 100
}
}
const CustomSlider = () => {
return (
<div style={ inlineStyles.slider } />
)
}
class CustomColorPicker extends React.Component {
displayColorSwatches = colors => {
return colors.map(color => {
return (
<div
onClick={() => this.props.onChange(color)}
key={color}
style={{ ...inlineStyles.swatchSquare, backgroundColor: color, }}
/>
);
})
}
render() {
return (
<div style={inlineStyles.container}>
<div style={{ backgroundColor: this.props.colorHex, minHeight: 50 }}></div>
<div style={{ minHeight: 20, position: 'relative', margin: 2 }}>
<Hue
hsl={this.props.colorHsl}
pointer={CustomSlider}
onChange={(color) => this.props.onChange(color)}
direction={'horizontal'}
/>
</div>
<div style={{ position: 'relative', minHeight:20}}>
<Alpha
hsl={this.props.colorHsl}
rgb={this.props.colorRgb}
pointer={CustomSlider}
onChange={(color) => this.props.onChange(color)}
/>
</div>
<div style={{ display: 'flex', width: '100%', flexWrap: 'wrap', padding: 3 }}>
{this.displayColorSwatches(colors)
}
</div>
</div>
);
}
}
export default CustomPicker(CustomColorPicker);

+ 12
- 2
src/components/ManualView/lampList.js View File

@ -30,6 +30,7 @@ class LampList extends React.Component {
})
}
/*
addLamp = (onChange, lamp, adminMode) => {
switch (lamp.type) {
case 'rgb':
@ -39,6 +40,7 @@ class LampList extends React.Component {
}
}
*/
handleClose = () => {
this.setState({ dialogOpen: false })
@ -73,7 +75,7 @@ class LampList extends React.Component {
typeID: this.state.createLightType,
boardID: this.state.createBoardAddress
}
switch(this.state.createLightType){
switch (this.state.createLightType) {
case 1:
light.channels = {
r: this.state.createR,
@ -223,7 +225,15 @@ class LampList extends React.Component {
this.props.lamps.map(lamp => {
switch (lamp.type) {
case 'rgb':
return (<RGBLamp key={lamp.id} lamp={lamp} adminMode={this.props.adminMode} colorMode={this.props.colorMode} onChange={this.props.onChangeColor} />)
return (
<RGBLamp
key={lamp.id}
lamp={lamp}
adminMode={this.props.adminMode}
colorMode={this.props.colorMode}
onChange={this.props.onChangeColor}
/>
)
default:
return ""
}

+ 9
- 7
src/components/ManualView/rgbLamp.js View File

@ -1,6 +1,6 @@
import React from 'react'
import Popover from '@material-ui/core/Popover';
import { ChromePicker, SwatchesPicker } from 'react-color';
import { SketchPicker } from 'react-color';
import { Grid } from '@material-ui/core';
import Card from '@material-ui/core/Card';
@ -9,6 +9,7 @@ import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button'
import api from '../../static'
import CustomPicker from './CustomPicker'
class RGBLamp extends React.Component {
@ -46,20 +47,21 @@ class RGBLamp extends React.Component {
colorPicker() {
if (this.props.colorMode) {
return (
<ChromePicker
<SketchPicker
disableAlpha={false}
color={this.props.lamp.color}
disableAlpha={true}
onChange={(color) => { this.props.onChange(this.props.lamp.id, color) }}
/>
)
} else {
return (
<SwatchesPicker
width="100%"
height="50%"
color={this.props.lamp.color}
<CustomPicker
colorHex={this.props.lamp.color.hex}
colorHsl={this.props.lamp.color.hsl}
colorRgb={this.props.lamp.color.rgb}
onChange={(color) => { this.props.onChange(this.props.lamp.id, color) }}
/>
)

+ 36
- 1
src/containers/ManualTab.js View File

@ -12,12 +12,47 @@ const mapStateToProps = state => {
}
function hslToHex(h, s, l, a) {
h /= 360;
let r, g, b;
if (s === 0) {
r = g = b = l; // achromatic
} else {
const hue2rgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
const toHex = x => {
const hex = Math.round(x * 255 * a).toString(16);
console.log(hex)
return hex.length === 1 ? '0' + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
const mapDispatchToProps = dispatch => {
return {
onChangeColor: (id, color) => {
api.setLampColor(id, color.rgb)
.then(()=>{
dispatch(setColor(color.rgb, id))
console.log(color.hsl)
color.hex = hslToHex(color.hsl.h,color.hsl.s,color.hsl.l,color.hsl.a)
console.log(color.hex)
dispatch(setColor(color, id))
})
.catch(err=>{
console.log(err)

+ 1
- 1
src/redux/actions.js View File

@ -22,7 +22,7 @@ export function addPreset(preset) {
}
export function addRGBLamp(lamp) {
return { type: ADD_LAMP, lamp, color: {r: 0,g: 0,b: 0} }
return { type: ADD_LAMP, lamp, color: {rgb: {r: 255,g: 0,b: 0,a: 1}, hex: '#ff0000', hsl: {h: 0, s: 1, l: 0.5}, hsv: {h: 0, s: 0, v: 0} }}
}
export function addNormalLamp(lamp) {

+ 0
- 1
src/static.js View File

@ -29,7 +29,6 @@ class API {
}
setLampColor(id, color){
console.log(color)
return axios.post(this.url+'/setLamp', {id: id, color: color})
}

Loading…
Cancel
Save