diff --git a/LICENSE b/LICENSE index 6d590f8..d9501d2 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2022-2023 bluefox +Copyright (c) 2022-2023 Denis Haev Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 7250c54..6dcda68 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,7 @@ Additionally, you can show image or iframe with this widget too. - Dimmer → Switch and Buttons Slider - Shutter → Switch and Buttons Blinds - Temperature → Switch and Buttons info with chart --- humidity → Switch and Buttons info with chart +- Humidity → Switch and Buttons info with chart - Motion → Switch and Buttons Info specific icon, read only, active color rgba(52,170,68,1) - Fire → ISwitch and Buttons nfo specific icon (fire), read only, active color 'red' - Flood → Switch and Buttons Info with specific icon (water), read only, active color 'blue' @@ -145,7 +145,7 @@ Additionally, you can show image or iframe with this widget too. --> ## Changelog -### **WORK IN PROGRESS** +### 1.0.0 (2023-08-21) * (bluefox) Added RGB widget ### 0.8.5 (2023-08-11) @@ -209,7 +209,7 @@ Additionally, you can show image or iframe with this widget too. ## License The MIT License (MIT) -Copyright (c) 2022-2023 bluefox +Copyright (c) 2022-2023 Denis Haev Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/io-package.json b/io-package.json index 2e3038e..a2e020c 100644 --- a/io-package.json +++ b/io-package.json @@ -1,8 +1,21 @@ { "common": { "name": "vis-2-widgets-material", - "version": "0.8.5", + "version": "1.0.0", "news": { + "1.0.0": { + "en": "Added RGB widget", + "de": "Hinzugefügt RGB Widget", + "ru": "Добавлен RGB виджет", + "pt": "Adicionado widget RGB", + "nl": "Vertaling:", + "fr": "Ajouté RGB widget", + "it": "Aggiunto il widget RGB", + "es": "Widget RGB", + "pl": "Added RGB widget", + "uk": "Додано RGB віджет", + "zh-cn": "增加RGB wid目标" + }, "0.8.5": { "en": "Improvement of the widget loading", "de": "Verbesserung der Widget-Ladung", @@ -80,19 +93,6 @@ "pl": "Adddresser", "uk": "Доданий віджет шайби", "zh-cn": "死灰色" - }, - "0.6.2": { - "en": "Allowed usage without frame for all widgets", - "de": "Erlaubte Nutzung ohne Rahmen für alle Widgets", - "ru": "Разрешено использование без рамки для всех виджетов", - "pt": "Uso permitido sem moldura para todos os widgets", - "nl": "Vermogen zonder frame voor alle wedgets", - "fr": "Usage autorisé sans cadre pour tous les widgets", - "it": "Utilizzo consentito senza cornice per tutti i widget", - "es": "Permitido uso sin marco para todos los widgets", - "pl": "Wykorzystywanie bez ramki dla wszystkich widgetów", - "uk": "Допускається використання без рами для всіх віджетів", - "zh-cn": "允许在无任何框架的情况下使用所有植物目标" } }, "title": "Vis 2 Widgets Material", diff --git a/package.json b/package.json index 89d55c4..574949b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iobroker.vis-2-widgets-material", - "version": "0.8.5", + "version": "1.0.0", "description": "ioBroker vis2 material widgets", "author": "bluefox ", "contributors": [ @@ -25,7 +25,7 @@ "@iobroker/vis-2-widgets-react-dev": "^0.4.6", "@types/gulp": "^4.0.13", "@types/mocha": "^10.0.1", - "@types/node": "^20.5.0", + "@types/node": "^20.5.1", "eslint": "^8.47.0", "gulp": "^4.0.2", "mocha": "^10.2.0", diff --git a/src-widgets/package.json b/src-widgets/package.json index bc2dd8b..ee52842 100644 --- a/src-widgets/package.json +++ b/src-widgets/package.json @@ -8,7 +8,7 @@ "@craco/craco": "^7.1.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@iobroker/adapter-react-v5": "^4.5.0", + "@iobroker/adapter-react-v5": "^4.5.3", "@iobroker/vis-2-widgets-react-dev": "^0.4.6", "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.5", @@ -27,7 +27,7 @@ "eslint": "^8.47.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-eqeqeq-fix": "^1.0.3", - "eslint-plugin-import": "^2.28.0", + "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-only-warn": "^1.1.0", "eslint-plugin-react": "^7.33.2", @@ -42,7 +42,7 @@ "react-icons": "^4.10.1", "react-leaflet": "^4.2.1", "react-scripts": "^5.0.1", - "sass": "^1.66.0", + "sass": "^1.66.1", "uuid": "^9.0.0" }, "scripts": { diff --git a/src-widgets/src/Components/DialogBlinds.js b/src-widgets/src/Components/DialogBlinds.js index 33137e9..2a1030c 100644 --- a/src-widgets/src/Components/DialogBlinds.js +++ b/src-widgets/src/Components/DialogBlinds.js @@ -1,5 +1,5 @@ /* - * Copyright 2018-2023 bluefox + * Copyright 2018-2023 Denis Haev * * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src-widgets/src/RGBLight.jsx b/src-widgets/src/RGBLight.jsx index 19a1a1a..afecf51 100644 --- a/src-widgets/src/RGBLight.jsx +++ b/src-widgets/src/RGBLight.jsx @@ -222,15 +222,15 @@ class RGBLight extends Generic { setId = (id, value) => { if (this.state.objects[id]) { - this.setState({ [id]: value }); - if (this.timeouts[id]) { - clearTimeout(this.timeouts[id]); - } + this.timeouts[id] && clearTimeout(this.timeouts[id]); // control switch directly without timeout if (this.state.rxData.switch === id) { this.props.context.socket.setState(this.state.rxData[id], value); } else { + const values = { ...this.state.values, [`${id}.val`]: value }; + this.setState({ values }); + this.timeouts[id] = setTimeout(() => { this.timeouts[id] = null; this.props.context.socket.setState(this.state.rxData[id], value); @@ -250,16 +250,11 @@ class RGBLight extends Generic { } } const _objects = await this.props.context.socket.getObjectsById(idToRead); - const states = await this.props.context.socket.getStates(idToRead); const newState = {}; for (const k in ids) { const id = ids[k]; if (this.state.rxData[id]) { - const state = states[this.state.rxData[id]]; - if (state) { - newState[id] = state.val; - } const object = _objects[this.state.rxData[id]]; if (object) { objects[id] = object; @@ -300,16 +295,6 @@ class RGBLight extends Generic { await this.propertiesUpdate(); } - onStateUpdated(id, state) { - if (!this.state.dialog) { - ['switch', 'brightness', 'rgb', 'red', 'green', 'blue', 'white', 'color_temperature', 'hue', 'saturation', 'luminance'].forEach(_id => { - if (this.state.rxData[_id] === id) { - this.setState({ [_id]: state.val }); - } - }); - } - } - isOnlyHue = () => this.state.rxData.type === 'hue/sat/lum' && (!this.state.objects.saturation || !this.state.objects.luminance); getWheelColor = () => { @@ -322,25 +307,25 @@ class RGBLight extends Generic { if (this.state.rxData.type === 'hue/sat/lum') { result = hslaToHsva({ - h: this.state.hue, - s: this.isOnlyHue() ? 100 : this.state.saturation, - l: this.isOnlyHue() ? 50 : this.state.luminance, + h: this.getPropertyValue('hue'), + s: this.isOnlyHue() ? 100 : this.getPropertyValue('saturation'), + l: this.isOnlyHue() ? 50 : this.getPropertyValue('luminance'), }); } else if (this.state.rxData.type === 'r/g/b' || this.state.rxData.type === 'r/g/b/w') { result = rgbaToHsva({ - r: this.state.red, - g: this.state.green, - b: this.state.blue, + r: this.getPropertyValue('red'), + g: this.getPropertyValue('green'), + b: this.getPropertyValue('blue'), }); } else if (this.state.rxData.type === 'rgb') { try { - result = hexToHsva(this.state.rgb || ''); + result = hexToHsva(this.getPropertyValue('rgb') || ''); } catch (e) { console.error(e); } } else if (this.state.rxData.type === 'rgbw') { try { - result = hexToHsva(this.state.rgb || ''); + result = hexToHsva(this.getPropertyValue('rgb') || ''); } catch (e) { console.error(e); } @@ -370,10 +355,10 @@ class RGBLight extends Generic { getWhite = () => { if (this.state.rxData.type === 'r/g/b/w') { - return this.state.white; + return this.getPropertyValue('white'); } if (this.state.rxData.type === 'rgbw') { - return this.state.white; + return this.getPropertyValue('white'); } return 0; }; @@ -411,7 +396,7 @@ class RGBLight extends Generic { > {Generic.t('Off')} this.setId('switch', e.target.checked)} /> {Generic.t('On')} @@ -427,7 +412,7 @@ class RGBLight extends Generic { min={this.getIdMin('brightness') || 0} max={this.getIdMax('brightness') || 100} valueLabelDisplay="auto" - value={this.state.brightness || 0} + value={this.getPropertyValue('brightness') || 0} onChange={(e, value) => this.setId('brightness', value)} /> ; @@ -438,16 +423,13 @@ class RGBLight extends Generic { { - this.setWheelColor(color.hsva); - }} + onChange={color => this.setWheelColor(color.hsva)} /> ; } renderWheel() { - return (this.isRgb() || this.isHsl()) && - <> + return (this.isRgb() || this.isHsl()) && <>
{!this.isOnlyHue() && @@ -457,7 +439,7 @@ class RGBLight extends Generic { }
{ - this.state.sketch ? this.renderSketch() : + this.getPropertyValue('sketch') ? this.renderSketch() : <>
{ - this.setWheelColor({ ...this.getWheelColor(), ...shade }); - }} + onChange={shade => + this.setWheelColor({ ...this.getWheelColor(), ...shade })} />
} @@ -515,7 +496,7 @@ class RGBLight extends Generic { valueLabelDisplay="auto" min={this.getIdMin('color_temperature') || 3000} max={this.getIdMax('color_temperature') || 12000} - value={this.state.color_temperature || 0} + value={this.getPropertyValue('color_temperature') || 0} onChange={(e, value) => this.setId('color_temperature', value)} /> @@ -551,7 +532,7 @@ class RGBLight extends Generic { getColor = () => { if (this.state.rxData.type === 'ct') { - const color = colorTemperature2rgb(this.state.color_temperature); + const color = colorTemperature2rgb(this.getPropertyValue('color_temperature')); return rgbaToHex({ r: color.red, g: color.green, @@ -563,7 +544,7 @@ class RGBLight extends Generic { getTextColor = () => { if (this.state.rxData.type === 'ct') { - const color = colorTemperature2rgb(this.state.color_temperature); + const color = colorTemperature2rgb(this.getPropertyValue('color_temperature')); return color.red + color.green + color.blue > 3 * 128 ? '#000000' : '#ffffff'; } const color = hsvaToRgba(this.getWheelColor()); @@ -580,23 +561,31 @@ class RGBLight extends Generic { ? this.contentRef.current.offsetHeight : this.contentRef.current.offsetWidth; } + let switchState = null; + if (this.state.objects.switch) { + switchState = this.getPropertyValue('switch'); + } + const content = <>
this.setState({ dialog: true })} style={{ - backgroundColor: this.getColor(), + backgroundColor: switchState === null || switchState ? this.getColor() : + (this.props.context.themeType === 'dark' ? '#111' : '#eee'), color: this.getTextColor(), width: size, height: size, }} > - +
- { - this.renderDialog() - } + {this.renderDialog()} ; if (this.state.rxData.noCard || props.widget.usedInWidget) { diff --git a/src-widgets/src/Wizard.jsx b/src-widgets/src/Wizard.jsx index f705e08..18880c5 100644 --- a/src-widgets/src/Wizard.jsx +++ b/src-widgets/src/Wizard.jsx @@ -290,7 +290,7 @@ const WizardDialog = props => {
{Generic.t('%s of %s devices selected', counters[roomId], room.devices.length)}
- + {room.devices.map((device, deviceId) =>