Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Opacity now changeable through color picker #251

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-08-02 15:09:38 +02:00
parent 45d7e55449
commit 1430c650ae
7 changed files with 49 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/widget/edit-widget/color-picker.js
View file

@ -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 <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
<form>
<SketchPicker
color={isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]}
color={rgbColor}
disableAlpha={disableOpacity}
onChangeComplete={ this.handleChangeComplete }
width={"300"}
/>

9
src/widget/edit-widget/edit-widget-color-control.js
View file

@ -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 (
<FormGroup>
<FormLabel>{this.props.label}</FormLabel>
<div className='section-buttons-group-right'>
<OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> Change color </Tooltip>} >
<OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> {tooltipText} </Tooltip>} >
<Button key={2} style={style} onClick={this.openColorPicker.bind(this)} >
<Icon icon="paint-brush"/>
</Button>

1
src/widget/edit-widget/edit-widget-control-creator.js
View file

@ -122,7 +122,6 @@ export default function CreateControls(widgetType = null, widget = null, session
DialogControls.push(
<EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Border color'} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={1} widget={widget} controlId={'customProperties.background_color'} label={'Background color'} handleChange={e => handleChange(e)} />,
<EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.background_color_opacity'} label={'Background opacity (0.0 - 1.0)'} defaultValue={0.5} handleChange={(e) => handleChange(e)} />
);
break;
case 'Label':

7
src/widget/widget-factory.js
View file

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

3
src/widget/widgets/label.js
View file

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

10
src/widget/widgets/lamp.js
View file

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

1
src/widget/widgets/line.js
View file

@ -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'
};