Merge branch 'main' of https://github.com/ioBroker/ioBroker.vis-widge…

…t-thermostat
ioBroker · Aug 24, 2023 · 355a97e · 355a97e
2 parents e544227 + 42be764
commit 355a97e
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 73 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022-2023 bluefox <[email protected]>
+Copyright (c) 2022-2023 Denis Haev <[email protected]>
 
 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
@@ -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 <[email protected]>
+Copyright (c) 2022-2023 Denis Haev <[email protected]>
 
 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
@@ -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
@@ -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 <[email protected]>",
   "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
@@ -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
@@ -1,5 +1,5 @@
 /*
- * Copyright 2018-2023 bluefox <[email protected]>
+ * Copyright 2018-2023 Denis Haev <[email protected]>
  *
  * 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
@@ -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')}
             <Switch
-                checked={this.state.switch || false}
+                checked={this.getPropertyValue('switch') || false}
                 onChange={e => 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)}
             />
         </div>;
@@ -438,16 +423,13 @@ class RGBLight extends Generic {
             <Sketch
                 color={this.getWheelColor()}
                 disableAlpha
-                onChange={color => {
-                    this.setWheelColor(color.hsva);
-                }}
+                onChange={color => this.setWheelColor(color.hsva)}
             />
         </div>;
     }
 
     renderWheel() {
-        return (this.isRgb() || this.isHsl()) &&
-        <>
+        return (this.isRgb() || this.isHsl()) && <>
             <div>
                 {!this.isOnlyHue() &&
                 <Tooltip title={Generic.t('Switch color picker')}>
@@ -457,7 +439,7 @@ class RGBLight extends Generic {
                 </Tooltip>}
             </div>
             {
-                this.state.sketch ? this.renderSketch() :
+                this.getPropertyValue('sketch') ? this.renderSketch() :
                     <>
                         <div className={this.props.classes.wheel}>
                             <Wheel
@@ -471,9 +453,8 @@ class RGBLight extends Generic {
                         {!this.isOnlyHue() && <div>
                             <ShadeSlider
                                 hsva={this.getWheelColor()}
-                                onChange={shade => {
-                                    this.setWheelColor({ ...this.getWheelColor(), ...shade });
-                                }}
+                                onChange={shade =>
+                                    this.setWheelColor({ ...this.getWheelColor(), ...shade })}
                             />
                         </div>}
                     </>
@@ -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)}
                 />
             </div>
@@ -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 = <>
             <div className={this.props.classes.content} ref={this.contentRef}>
                 <IconButton
                     onClick={() => 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,
                     }}
                 >
-                    <ColorLens />
+                    <ColorLens
+                        style={{
+                            color: switchState === null || switchState ? undefined : this.getColor(),
+                        }}
+                    />
                 </IconButton>
             </div>
-            {
-                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
@@ -290,7 +290,7 @@ const WizardDialog = props => {
                                     <div style={{ fontSize: 12, opacity: 0.7, marginLeft: 20 }}>{Generic.t('%s of %s devices selected', counters[roomId], room.devices.length)}</div>
                                 </div>
                             </AccordionSummary>
-                            <AccordionDetails sx={{ backgroundColor: props.themeType ? '#111' : '#eee' }}>
+                            <AccordionDetails sx={{ backgroundColor: props.themeType === 'dark' ? '#111' : '#eee' }}>
                                 {room.devices.map((device, deviceId) => <div key={device._id} style={{ backgroundColor: 'transparent' }}>
                                     <div
                                         style={{