From 3bd4c2036552dfe8d3eb24fc8276fdf0c4ef600b Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Tue, 28 Jul 2020 18:46:43 +0200 Subject: [PATCH 1/5] WIP: replacing current color choosing mechanisms with a color picker #251 --- package-lock.json | 36 +++++++++ package.json | 1 + src/widget/edit-widget/color-picker.js | 79 +++++++++++++++++++ .../edit-widget/edit-widget-color-control.js | 74 ++++++++--------- 4 files changed, 148 insertions(+), 42 deletions(-) create mode 100644 src/widget/edit-widget/color-picker.js diff --git a/package-lock.json b/package-lock.json index 0f4ba67..aa96b4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1179,6 +1179,11 @@ "@hapi/hoek": "^8.3.0" } }, + "@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==" + }, "@jest/console": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz", @@ -8510,6 +8515,11 @@ "object-visit": "^1.0.0" } }, + "material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -11316,6 +11326,19 @@ "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.0.1.tgz", "integrity": "sha512-cN2tkxBWizhPQ2JHfe0aUSJtmMthKA17NZkTElpiQ2snQAAi1hssXZ2fv88rAPNNvG5ss4t0PbOZT0TIl9Lk3Q==" }, + "react-color": { + "version": "2.18.1", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz", + "integrity": "sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==", + "requires": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.11", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + } + }, "react-contexify": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/react-contexify/-/react-contexify-4.1.1.tgz", @@ -11847,6 +11870,14 @@ "prop-types": "^15.6.2" } }, + "reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "requires": { + "lodash": "^4.0.1" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -13796,6 +13827,11 @@ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, + "tinycolor2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", + "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index acf1e4a..c0546c5 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react": "^16.13.1", "react-bootstrap": "^1.2.2", "react-collapse": "^5.0.1", + "react-color": "^2.18.1", "react-contexify": "^4.1.1", "react-d3": "^0.4.0", "react-dnd": "^10.0.2", diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js new file mode 100644 index 0000000..a4b84a1 --- /dev/null +++ b/src/widget/edit-widget/color-picker.js @@ -0,0 +1,79 @@ +/** + * This file is part of VILLASweb. + * + * VILLASweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * VILLASweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with VILLASweb. If not, see . + ******************************************************************************/ + +import React from 'react'; +import { SketchPicker } from 'react-color'; +import Dialog from '../../common/dialogs/dialog'; + + +class ColorPicker extends React.Component { + valid = true; + + constructor(props) { + super(props); + + this.state = { + color: null + }; + } + + static getDerivedStateFromProps(props, state){ + let parts = props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } + let color = (isCustomProperty ? props.widget[parts[0]][parts[1]] : props.widget[props.controlId]); + + return { + color: color + }; + } + + handleChangeComplete = (color) => { + this.setState({ color: color.hex }); + }; + + onClose = canceled => { + if (canceled) { + if (this.props.onClose != null) { + this.props.onClose(); + } + + return; + } + + if (this.valid && this.props.onClose != null) { + this.props.onClose(this.state.color); + } + }; + + render() { + return this.onClose(c)} valid={true}> +
+ + + +
; + } +} + +export default ColorPicker; diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js index 2158a55..f5039d2 100644 --- a/src/widget/edit-widget/edit-widget-color-control.js +++ b/src/widget/edit-widget/edit-widget-color-control.js @@ -16,10 +16,12 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, Col, Row, FormCheck, FormLabel } from 'react-bootstrap'; -import classNames from 'classnames'; +import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap'; import { scaleOrdinal } from 'd3-scale'; -import {schemeCategory10} from 'd3-scale-chromatic' +import {schemeCategory10} from 'd3-scale-chromatic'; +import ColorPicker from './color-picker' +import Icon from "../../common/icon"; + // schemeCategory20 no longer available in d3 class EditWidgetColorControl extends Component { @@ -38,9 +40,8 @@ class EditWidgetColorControl extends Component { super(props); this.state = { - widget: { - - } + widget: {}, + showColorPicker: false }; } @@ -50,47 +51,36 @@ class EditWidgetColorControl extends Component { }; } - render() { + openColorPicker = () =>{ + this.setState({showColorPicker: true}) + } - let parts = this.props.controlId.split('.'); - let isCustomProperty = true; - if (parts.length === 1){ - isCustomProperty = false; + closeEditModal = (data) => { + this.setState({showColorPicker: false}) + if(data){ + this.props.handleChange({target: { id: this.props.controlId, value: data}}); } + } + + render() { + const currentColor = this.state.widget[this.props.controlId]; + return ( - - - - { this.props.label } - - - { - EditWidgetColorControl.ColorPalette.map( (color, idx ) => { - let colorStyle = { - background: color, - borderColor: color - }; + + {this.props.label} - let checkedClass = classNames({ - 'checked': idx === (isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]) - }); +
+ Change color } > + + +
- return ( this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />) - } - ) - } - - - ) + this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} /> + + + ) } } From 45d7e554496c1d253a7077d48ad32fd811c98e84 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Fri, 31 Jul 2020 14:35:59 +0200 Subject: [PATCH 2/5] Color Picker now works for widgets using edit-widget-color-control #251 --- src/widget/edit-widget/color-picker.js | 29 +++++++---- .../edit-widget/edit-widget-color-control.js | 51 ++++++++++++------- src/widget/widget-factory.js | 16 +++--- src/widget/widgets/box.js | 7 +-- src/widget/widgets/label.js | 3 +- src/widget/widgets/lamp.js | 6 +-- src/widget/widgets/line.js | 4 +- 7 files changed, 65 insertions(+), 51 deletions(-) diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js index a4b84a1..b150f33 100644 --- a/src/widget/edit-widget/color-picker.js +++ b/src/widget/edit-widget/color-picker.js @@ -27,25 +27,27 @@ class ColorPicker extends React.Component { super(props); this.state = { - color: null + widget: {} }; } static getDerivedStateFromProps(props, state){ - let parts = props.controlId.split('.'); - let isCustomProperty = true; - if (parts.length === 1){ - isCustomProperty = false; - } - let color = (isCustomProperty ? props.widget[parts[0]][parts[1]] : props.widget[props.controlId]); return { - color: color + widget: props.widget }; } handleChangeComplete = (color) => { - this.setState({ color: color.hex }); + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } + + let temp = this.state.widget; + isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex; + this.setState({ widget: temp }); }; onClose = canceled => { @@ -58,15 +60,20 @@ class ColorPicker extends React.Component { } if (this.valid && this.props.onClose != null) { - this.props.onClose(this.state.color); + this.props.onClose(this.state.widget); } }; render() { + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } return this.onClose(c)} valid={true}>
diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js index f5039d2..407a970 100644 --- a/src/widget/edit-widget/edit-widget-color-control.js +++ b/src/widget/edit-widget/edit-widget-color-control.js @@ -17,8 +17,6 @@ import React, { Component } from 'react'; import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap'; -import { scaleOrdinal } from 'd3-scale'; -import {schemeCategory10} from 'd3-scale-chromatic'; import ColorPicker from './color-picker' import Icon from "../../common/icon"; @@ -26,22 +24,13 @@ import Icon from "../../common/icon"; class EditWidgetColorControl extends Component { - static get ColorPalette() { - let colorCount = 0; - const colors = []; - const colorScale = scaleOrdinal(schemeCategory10); - while (colorCount < 10) { colors.push(colorScale(colorCount)); colorCount++; } - colors.unshift('#000', '#FFF'); // include black and white - - return colors; - } - constructor(props) { super(props); this.state = { widget: {}, - showColorPicker: false + showColorPicker: false, + originalColor: null }; } @@ -52,18 +41,44 @@ class EditWidgetColorControl extends Component { } openColorPicker = () =>{ - this.setState({showColorPicker: true}) + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } + let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]); + + this.setState({showColorPicker: true, originalColor: color}); } closeEditModal = (data) => { this.setState({showColorPicker: false}) - if(data){ - this.props.handleChange({target: { id: this.props.controlId, value: data}}); + if(typeof data === 'undefined'){ + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1) { + isCustomProperty = false; + } + + let temp = this.state.widget; + isCustomProperty ? temp[parts[0]][parts[1]] = this.state.originalColor : temp[this.props.controlId] = this.state.originalColor; + this.setState({ widget: temp }); } } render() { - const currentColor = this.state.widget[this.props.controlId]; + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } + let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]); + let style = { + backgroundColor: color, + width: '260px', + height: '40px' + } + return ( @@ -71,7 +86,7 @@ class EditWidgetColorControl extends Component {
Change color } > - diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js index 3fe95e6..dd2c77b 100644 --- a/src/widget/widget-factory.js +++ b/src/widget/widget-factory.js @@ -63,8 +63,8 @@ class WidgetFactory { widget.minHeight = 5; widget.width = 20; widget.height = 20; - widget.customProperties.on_color = 6; - widget.customProperties.off_color = 8; + widget.customProperties.on_color = '#4287f5'; + widget.customProperties.off_color = '#4287f5'; widget.customProperties.threshold = 0.5; break; case 'Value': @@ -102,7 +102,7 @@ class WidgetFactory { widget.height = 35; widget.name = 'Label'; widget.customProperties.textSize = 32; - widget.customProperties.fontColor = 0; + widget.customProperties.fontColor = '#4287f5'; widget.customProperties.resizeTopBottomLock = true; break; case 'Image': @@ -118,8 +118,8 @@ class WidgetFactory { widget.minHeight = 50; widget.width = 100; widget.height = 100; - widget.customProperties.background_color = 1; - widget.customProperties.font_color = 0; + widget.customProperties.background_color = '#4287f5'; + widget.customProperties.font_color = '#4287f5'; widget.customProperties.on_value = 1; widget.customProperties.off_value = 0; widget.customProperties.toggle = false; @@ -167,8 +167,8 @@ class WidgetFactory { widget.minHeight = 50; widget.width = 100; widget.height = 100; - widget.customProperties.border_color = 0; - widget.customProperties.background_color = 9; + widget.customProperties.border_color = '#4287f5'; + widget.customProperties.background_color = '#961520'; widget.customProperties.background_color_opacity = 0.5; widget.z = 0; break; @@ -183,7 +183,7 @@ class WidgetFactory { case 'Line': widget.height = 30; widget.width = 150; - widget.customProperties.border_color = 0; + widget.customProperties.border_color = '#4287f5'; widget.customProperties.border_width = 2; widget.customProperties.margin_top = 15; widget.customProperties.rotation = 0; diff --git a/src/widget/widgets/box.js b/src/widget/widgets/box.js index 88e7c67..bd0dbee 100644 --- a/src/widget/widgets/box.js +++ b/src/widget/widgets/box.js @@ -17,16 +17,13 @@ import React, { Component } from 'react'; -import EditWidgetColorControl from '../edit-widget/edit-widget-color-control'; class WidgetBox extends Component { render() { - let colors = EditWidgetColorControl.ColorPalette; - let colorStyle = { - borderColor: colors[this.props.widget.customProperties.border_color], - backgroundColor: colors[this.props.widget.customProperties.background_color], + borderColor: this.props.widget.customProperties.border_color, + backgroundColor: this.props.widget.customProperties.background_color, opacity: this.props.widget.customProperties.background_color_opacity, } diff --git a/src/widget/widgets/label.js b/src/widget/widgets/label.js index a7431e2..048e0e1 100644 --- a/src/widget/widgets/label.js +++ b/src/widget/widgets/label.js @@ -17,13 +17,12 @@ import React, { Component } from 'react'; -import EditWidgetColorControl from '../edit-widget/edit-widget-color-control'; class WidgetLabel extends Component { render() { const style = { fontSize: this.props.widget.customProperties.textSize + 'px', - color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor] + color: this.props.widget.customProperties.fontColor }; return ( diff --git a/src/widget/widgets/lamp.js b/src/widget/widgets/lamp.js index c6fd5e6..a686f37 100644 --- a/src/widget/widgets/lamp.js +++ b/src/widget/widgets/lamp.js @@ -17,7 +17,6 @@ import React, { Component } from 'react'; -import EditWidgetColorControl from '../edit-widget/edit-widget-color-control'; class WidgetLamp extends Component { constructor(props) { @@ -61,13 +60,12 @@ class WidgetLamp extends Component { render() { - let colors = EditWidgetColorControl.ColorPalette; let color; if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold)) - color = colors[this.props.widget.customProperties.on_color]; + color = this.props.widget.customProperties.on_color; else - color = colors[this.props.widget.customProperties.off_color]; + color = this.props.widget.customProperties.off_color; let style = { backgroundColor: color, diff --git a/src/widget/widgets/line.js b/src/widget/widgets/line.js index 680ca03..bee3112 100644 --- a/src/widget/widgets/line.js +++ b/src/widget/widgets/line.js @@ -17,12 +17,10 @@ import React, { Component } from 'react'; -import EditWidgetColorControl from '../edit-widget/edit-widget-color-control'; - class WidgetLine extends Component { render() { const lineStyle = { - borderColor: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.border_color], + borderColor: this.props.widget.customProperties.border_color, transform: 'rotate(' + this.props.widget.customProperties.rotation + 'deg)', borderWidth: '' + this.props.widget.customProperties.border_width + 'px' }; From 1430c650ae3bf01458a0dee2b186cc2fd9854461 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Sun, 2 Aug 2020 15:09:38 +0200 Subject: [PATCH 3/5] Opacity now changeable through color picker #251 --- src/widget/edit-widget/color-picker.js | 25 ++++++++++++++++++- .../edit-widget/edit-widget-color-control.js | 9 ++++++- .../edit-widget-control-creator.js | 1 - src/widget/widget-factory.js | 7 +++++- src/widget/widgets/label.js | 3 ++- src/widget/widgets/lamp.js | 10 ++++++-- src/widget/widgets/line.js | 1 + 7 files changed, 49 insertions(+), 7 deletions(-) diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js index b150f33..81a08b2 100644 --- a/src/widget/edit-widget/color-picker.js +++ b/src/widget/edit-widget/color-picker.js @@ -38,6 +38,16 @@ class ColorPicker extends React.Component { }; } + hexToRgb = (hex,opacity) => { + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + a: opacity + } : null; + } + handleChangeComplete = (color) => { let parts = this.props.controlId.split('.'); let isCustomProperty = true; @@ -47,6 +57,8 @@ class ColorPicker extends React.Component { let temp = this.state.widget; isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex; + isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a; + this.setState({ widget: temp }); }; @@ -65,15 +77,26 @@ class ColorPicker extends React.Component { }; render() { + let disableOpacity = false; let parts = this.props.controlId.split('.'); let isCustomProperty = true; if (parts.length === 1){ isCustomProperty = false; } + + if(this.state.widget.type === "Box" && parts[1] === "border_color"){ + disableOpacity = true; + } + + let hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]; + let opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"]; + let rgbColor = this.hexToRgb(hexColor, opacity); + return this.onClose(c)} valid={true}> diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js index 407a970..c50039f 100644 --- a/src/widget/edit-widget/edit-widget-color-control.js +++ b/src/widget/edit-widget/edit-widget-color-control.js @@ -73,19 +73,26 @@ class EditWidgetColorControl extends Component { isCustomProperty = false; } let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]); + let opacity = (isCustomProperty ? this.props.widget[parts[0]][parts[1] + "_opacity"] : this.props.widget[this.props.controlId + "_opacity"]); let style = { backgroundColor: color, + opacity: opacity, width: '260px', height: '40px' } + let tooltipText = "Change color and opacity"; + if(this.state.widget.type === "Box" && parts[1] === "border_color"){ + tooltipText = "Change border color"; + } + return ( {this.props.label}
- Change color } > + {tooltipText} } > diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js index b26bc04..0cc0713 100644 --- a/src/widget/edit-widget/edit-widget-control-creator.js +++ b/src/widget/edit-widget/edit-widget-control-creator.js @@ -122,7 +122,6 @@ export default function CreateControls(widgetType = null, widget = null, session DialogControls.push( handleChange(e)} />, handleChange(e)} />, - handleChange(e)} /> ); break; case 'Label': diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js index dd2c77b..29a0b6c 100644 --- a/src/widget/widget-factory.js +++ b/src/widget/widget-factory.js @@ -64,7 +64,9 @@ class WidgetFactory { widget.width = 20; widget.height = 20; widget.customProperties.on_color = '#4287f5'; + widget.customProperties.on_color_opacity = 1; widget.customProperties.off_color = '#4287f5'; + widget.customProperties.off_color_opacity = 1; widget.customProperties.threshold = 0.5; break; case 'Value': @@ -103,6 +105,7 @@ class WidgetFactory { widget.name = 'Label'; widget.customProperties.textSize = 32; widget.customProperties.fontColor = '#4287f5'; + widget.customProperties.fontColor_opacity = 1; widget.customProperties.resizeTopBottomLock = true; break; case 'Image': @@ -168,8 +171,9 @@ class WidgetFactory { widget.width = 100; widget.height = 100; widget.customProperties.border_color = '#4287f5'; + widget.customProperties.border_color_opacity = 1; widget.customProperties.background_color = '#961520'; - widget.customProperties.background_color_opacity = 0.5; + widget.customProperties.background_color_opacity = 1; widget.z = 0; break; case 'HTML': @@ -184,6 +188,7 @@ class WidgetFactory { widget.height = 30; widget.width = 150; widget.customProperties.border_color = '#4287f5'; + widget.customProperties.border_color_opacity = 1; widget.customProperties.border_width = 2; widget.customProperties.margin_top = 15; widget.customProperties.rotation = 0; diff --git a/src/widget/widgets/label.js b/src/widget/widgets/label.js index 048e0e1..2a29e1f 100644 --- a/src/widget/widgets/label.js +++ b/src/widget/widgets/label.js @@ -22,7 +22,8 @@ class WidgetLabel extends Component { render() { const style = { fontSize: this.props.widget.customProperties.textSize + 'px', - color: this.props.widget.customProperties.fontColor + color: this.props.widget.customProperties.fontColor, + opacity: this.props.widget.customProperties.fontColor_opacity, }; return ( diff --git a/src/widget/widgets/lamp.js b/src/widget/widgets/lamp.js index a686f37..d43aadf 100644 --- a/src/widget/widgets/lamp.js +++ b/src/widget/widgets/lamp.js @@ -61,14 +61,20 @@ class WidgetLamp extends Component { render() { let color; + let opacity; - if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold)) + if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold)){ color = this.props.widget.customProperties.on_color; - else + opacity = this.props.widget.customProperties.on_color_opacity; + } + else{ color = this.props.widget.customProperties.off_color; + opacity = this.props.widget.customProperties.off_color_opacity; + } let style = { backgroundColor: color, + opacity: opacity } return ( diff --git a/src/widget/widgets/line.js b/src/widget/widgets/line.js index bee3112..e587f62 100644 --- a/src/widget/widgets/line.js +++ b/src/widget/widgets/line.js @@ -21,6 +21,7 @@ class WidgetLine extends Component { render() { const lineStyle = { borderColor: this.props.widget.customProperties.border_color, + opacity: this.props.widget.customProperties.border_color_opacity, transform: 'rotate(' + this.props.widget.customProperties.rotation + 'deg)', borderWidth: '' + this.props.widget.customProperties.border_width + 'px' }; From e8fca667dcbbf736e2d4b1003eeb1bc13090a969 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Sun, 13 Sep 2020 13:06:52 +0200 Subject: [PATCH 4/5] WIP: implementing new way to change Gauge colorzones #251 --- src/widget/edit-widget/color-picker.js | 29 +++- .../edit-widget-color-zones-control.js | 151 ++++++++++++++---- src/widget/widgets/gauge.js | 2 +- 3 files changed, 144 insertions(+), 38 deletions(-) diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js index 81a08b2..2861333 100644 --- a/src/widget/edit-widget/color-picker.js +++ b/src/widget/edit-widget/color-picker.js @@ -49,15 +49,23 @@ class ColorPicker extends React.Component { } handleChangeComplete = (color) => { + + let temp = this.state.widget; + + if(this.props.controlId === 'strokeStyle'){ + temp.customProperties.zones[this.props.zoneIndex]['strokeStyle'] = color.hex; + } + else{ let parts = this.props.controlId.split('.'); let isCustomProperty = true; + if (parts.length === 1){ isCustomProperty = false; } - let temp = this.state.widget; isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex; isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a; + } this.setState({ widget: temp }); }; @@ -78,20 +86,33 @@ class ColorPicker extends React.Component { render() { let disableOpacity = false; + let hexColor; + let opacity = 1; let parts = this.props.controlId.split('.'); let isCustomProperty = true; if (parts.length === 1){ isCustomProperty = false; } - if(this.state.widget.type === "Box" && parts[1] === "border_color"){ + if((this.state.widget.type === "Box" && parts[1] === "border_color") || this.props.controlId === 'strokeStyle'){ disableOpacity = true; } + if(this.props.controlId === 'strokeStyle'){ + if(typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined'){ + hexColor = this.state.widget.customProperties.zones[this.props.zoneIndex]['strokeStyle']; + } + } + else{ + hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]; + opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"]; - let hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]; - let opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"]; + } + + let rgbColor = this.hexToRgb(hexColor, opacity); + + return this.onClose(c)} valid={true}> { // add row const widget = this.state.widget; - widget.customProperties.zones.push({ strokeStyle: 'ffffff', min: 0, max: 100 }); + widget.customProperties.zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 }); + + if(widget.customProperties.zones.length > 0){ + let length = widget.customProperties.zones.length + + for(let i= 0 ; i < length; i++){ + widget.customProperties.zones[i].min = i* 100/length; + widget.customProperties.zones[i].max = (i+1)* 100/length; + } + } this.setState({ widget }); @@ -57,11 +70,11 @@ class EditWidgetColorZonesControl extends React.Component { // remove zones const widget = this.state.widget; - this.state.selectedZones.forEach(row => { + /*this.state.selectedZones.forEach(row => { widget.customProperties.zones.splice(row, 1); }); - this.setState({ selectedZones: [], widget }); + this.setState({ selectedZones: [], widget });*/ this.sendEvent(widget); } @@ -83,6 +96,32 @@ class EditWidgetColorZonesControl extends React.Component { this.sendEvent(widget); } + editColorZone = (index) => { + this.setState({selectedZone: this.state.widget.customProperties.zones[index], selectedIndex: index , minValue: this.state.widget.customProperties.zones[index].min, maxValue: this.state.widget.customProperties.zones[index].max}); + + } + + openColorPicker = () =>{ + + let color = this.state.selectedZone.strokeStyle; + + this.setState({showColorPicker: true, originalColor: color}); + } + + closeEditModal = (data) => { + this.setState({showColorPicker: false}) + if(typeof data === 'undefined'){ + + let temp = this.state.selectedZone; + temp.strokeStyle = this.state.originalColor; + + this.setState({ selectedZone : temp }); + } + } + + handleMinMaxChange = () => { + } + sendEvent(widget) { // create event const event = { @@ -95,37 +134,83 @@ class EditWidgetColorZonesControl extends React.Component { this.props.handleChange(event); } - checkedCell = (row, event) => { - // update selected rows - const selectedZones = this.state.selectedZones; - - if (event.target.checked) { - if (selectedZones.indexOf(row) === -1) { - selectedZones.push(row); - } - } else { - let index = selectedZones.indexOf(row); - if (row > -1) { - selectedZones.splice(index, 1); - } - } - - this.setState({ selectedZones }); - } + render() { + + + let tempColor = 'FFFFFF'; + let collapse = false; + if(this.state.selectedZone !== null){ + collapse = true; + tempColor = this.state.selectedZone.strokeStyle; + } + + let pickerStyle = { + backgroundColor: tempColor, + width: '260px', + height: '40px', + marginTop: '20px' + } + return Color zones + - - - - - +
+ { + this.state.widget.customProperties.zones.map((zone, idx) => { + let color = zone.strokeStyle; + let width = (zone.max - zone.min)*(260/100); + let style = { + backgroundColor: color, + width: width, + height: '40px' + } + + + + return ( + ) + } + ) + + } +
+ + Change color} > + + +
+ + + + + +
+ Min: + this.handleMinMaxChange(e)} /> + + Max: + this.handleMinMaxChange(e)} /> +
- - - + + + this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} /> ; } } diff --git a/src/widget/widgets/gauge.js b/src/widget/widgets/gauge.js index e1f8bfc..b33494a 100644 --- a/src/widget/widgets/gauge.js +++ b/src/widget/widgets/gauge.js @@ -219,7 +219,7 @@ class WidgetGauge extends Component { const step = (maxValue - minValue) / 100; zones = zones.map(zone => { - return Object.assign({}, zone, { min: (zone.min * step) + +minValue, max: zone.max * step + +minValue, strokeStyle: '#' + zone.strokeStyle }); + return Object.assign({}, zone, { min: (zone.min * step) + +minValue, max: zone.max * step + +minValue, strokeStyle: zone.strokeStyle }); }); } From 91be57fc068098c0821eaca4a7a148393502b950 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Fri, 16 Oct 2020 21:31:15 +0200 Subject: [PATCH 5/5] added new way to change Gauge colorzones #251 --- .../edit-widget-color-zones-control.js | 66 +++++++++++++++---- src/widget/widgets/table.js | 1 - 2 files changed, 52 insertions(+), 15 deletions(-) diff --git a/src/widget/edit-widget/edit-widget-color-zones-control.js b/src/widget/edit-widget/edit-widget-color-zones-control.js index a4bdf7e..4ade39f 100644 --- a/src/widget/edit-widget/edit-widget-color-zones-control.js +++ b/src/widget/edit-widget/edit-widget-color-zones-control.js @@ -33,7 +33,7 @@ class EditWidgetColorZonesControl extends React.Component { } }, selectedZone: null, - selectedIndex: 0, + selectedIndex: null, showColorPicker: false, originalColor: null, minValue: 0, @@ -61,22 +61,28 @@ class EditWidgetColorZonesControl extends React.Component { } } - this.setState({ widget }); + this.setState({ widget, selectedZone: null, selectedIndex: null }); this.sendEvent(widget); } removeZones = () => { - // remove zones - const widget = this.state.widget; + + let temp = this.state.widget; - /*this.state.selectedZones.forEach(row => { - widget.customProperties.zones.splice(row, 1); - }); + temp.customProperties.zones.splice(this.state.selectedIndex, 1); - this.setState({ selectedZones: [], widget });*/ + if(temp.customProperties.zones.length > 0){ + let length = temp.customProperties.zones.length + + for(let i= 0 ; i < length; i++){ + temp.customProperties.zones[i].min = i* 100/length; + temp.customProperties.zones[i].max = (i+1)* 100/length; + } + } + + this.setState({widget: temp,selectedZone: null, selectedIndex: null}); - this.sendEvent(widget); } changeCell = (event, row, column) => { @@ -97,8 +103,12 @@ class EditWidgetColorZonesControl extends React.Component { } editColorZone = (index) => { + if(this.state.selectedIndex !== index){ this.setState({selectedZone: this.state.widget.customProperties.zones[index], selectedIndex: index , minValue: this.state.widget.customProperties.zones[index].min, maxValue: this.state.widget.customProperties.zones[index].max}); - + } + else{ + this.setState({selectedZone: null, selectedIndex: null}); + } } openColorPicker = () =>{ @@ -119,8 +129,35 @@ class EditWidgetColorZonesControl extends React.Component { } } - handleMinMaxChange = () => { - } + handleMinChange = (e) => { + + if(e.target.value < 0) return; + this.setState({minValue: e.target.value}); + + let temp = this.state.widget; + temp.customProperties.zones[this.state.selectedIndex]['min'] = e.target.value; + + if(this.state.selectedIndex !== 0){ + temp.customProperties.zones[this.state.selectedIndex - 1]['max'] = e.target.value + } + + this.setState({ widget: temp }); + } + + handleMaxChange = (e) => { + + if(e.target.value > 100) return; + this.setState({maxValue: e.target.value}); + + let temp = this.state.widget; + temp.customProperties.zones[this.state.selectedIndex]['max'] = e.target.value; + + if(this.state.selectedIndex !== this.state.widget.customProperties.zones.length -1){ + temp.customProperties.zones[this.state.selectedIndex + 1]['min'] = e.target.value + } + + this.setState({ widget: temp }); + } sendEvent(widget) { // create event @@ -194,7 +231,7 @@ class EditWidgetColorZonesControl extends React.Component { step="any" placeholder="Min" value={this.state.minValue} - onChange={e => this.handleMinMaxChange(e)} /> + onChange={e => this.handleMinChange(e)} /> Max: @@ -203,11 +240,12 @@ class EditWidgetColorZonesControl extends React.Component { step="any" placeholder="Max" value={ this.state.maxValue} - onChange={e => this.handleMinMaxChange(e)} /> + onChange={e => this.handleMaxChange(e)} /> + this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} /> diff --git a/src/widget/widgets/table.js b/src/widget/widgets/table.js index 2a31cc8..8058df7 100644 --- a/src/widget/widgets/table.js +++ b/src/widget/widgets/table.js @@ -45,7 +45,6 @@ class WidgetTable extends Component { if (sig.direction === "out") { if (props.data[icID] != null && props.data[icID].output != null && props.data[icID].output.values != null) { if (props.data[icID].output.values[sig.index-1] !== undefined) { - console.log("Table: sig", sig) let data = props.data[icID].output.values[sig.index-1]; rows.push({ name: sig.name,