Merge pull request #1305 from peuter/share-colorchooser

Use some features from pure-structure in tile
CometVisu · Jan 1, 2023 · 45bdbfa · 45bdbfa
2 parents a84ac28 + bb365f3
commit 45bdbfa
Show file tree

Hide file tree

Showing 14 changed files with 732 additions and 121 deletions.
diff --git a/compile.json b/compile.json
@@ -41,12 +41,20 @@
             "cv.Application",
             "cv.transforms.*",
             "cv.parser.widgets.*",
-            "cv.core.notifications.actions.*"
+            "cv.core.notifications.actions.*",
+            "cv.ui.structure.pure.AbstractBasicWidget",
+            "cv.ui.structure.pure.AbstractWidget",
+            "cv.ui.structure.pure.ColorChooser"
           ]
         },
         "structure-pure": {
           "include": [
             "cv.ui.structure.pure.*"
+          ],
+          "exclude": [
+            "cv.ui.structure.pure.AbstractBasicWidget",
+            "cv.ui.structure.pure.AbstractWidget",
+            "cv.ui.structure.pure.ColorChooser"
           ]
         },
         "structure-tile": {

diff --git a/doc/manual/de/config/structure-tile/components/chart.rst b/doc/manual/de/config/structure-tile/components/chart.rst
@@ -19,7 +19,7 @@ Für jedes ``<dataset>`` wird in dem Chart z.B. eine Linie eingezeichnet.
         <fixtures>
             <fixture source-file="source/test/fixtures/temp-chart.json" target-path="charts/Temperature_FF_Living" mime-type="application/json"/>
         </fixtures>
-        <screenshot name="cv-chart-temp" waitfor="cv-chart > svg > g > path[stroke-width='1.5']" />
+        <screenshot name="cv-chart-temp"/>
     </settings>
     <cv-tile size="2x1">
         <cv-chart title="Wohnzimmer" y-format="%.1f °C" series="day" refresh="300" colspan="3" rowspan="3">

diff --git a/doc/manual/de/config/structure-tile/components/color.rst b/doc/manual/de/config/structure-tile/components/color.rst
@@ -0,0 +1,59 @@
+.. _tile-component-color:
+
+Color
+=====
+
+.. api-doc:: cv.ui.structure.tile.components.Color
+
+
+Beschreibung
+------------
+
+Das Color-Element ermöglicht die Visualisierung und Manipulation einer RGB-Beleuchtung.
+Für die Farbauswahl wird der :ref:`ColorChooser <colorchooser>` aus der Pure-Struktur in einem Popup benutzt.
+Daher stehen auch alle Möglichkeiten die dieser bietet zur Verfügung.
+In der Kachel wird der aktuelle Farbwert über die Icon-Farbe dargestellt. Klickt man auf den Button öffnet sich
+das Popup mit dem ColorChooser.
+
+.. widget-example::
+
+    <settings design="tile">
+        <screenshot name="cv-color" selector="cv-tile" sleep="10">
+            <data address="1/2/59">50</data>
+            <data address="1/2/60">60</data>
+            <data address="1/2/61">100</data>
+            <caption>Normale Ansicht</caption>
+        </screenshot>
+        <screenshot name="cv-color-popup" clickpath="cv-color" waitfor="cv-popup" selector="cv-popup" margin="10 10 10 10">
+            <data address="1/2/59">50</data>
+            <data address="1/2/60">60</data>
+            <data address="1/2/61">100</data>
+            <caption>Farbauswahl im Popup</caption>
+        </screenshot>
+    </settings>
+    <cv-tile>
+      <cv-row colspan="3" row="2">
+        <cv-color controls="LCh-box;T:2500-15000;Y" title="Schranklicht">
+          <cv-address transform="DPT:5.001" mode="readwrite" variant="RGB-r">1/2/59</cv-address>
+          <cv-address transform="DPT:5.001" mode="readwrite" variant="RGB-g">1/2/60</cv-address>
+          <cv-address transform="DPT:5.001" mode="readwrite" variant="RGB-b">1/2/61</cv-address>
+          <cv-icon class="value">ri-lightbulb-line</cv-icon>
+        </cv-color>
+      </cv-row>
+      <cv-row colspan="3" row="last">
+        <label class="primary">Schranklicht</label>
+      </cv-row>
+    </cv-tile>
+
+
+
+Erlaubte Attribute
+^^^^^^^^^^^^^^^^^^
+
+.. parameter-information:: cv-color tile
+
+Erlaubte Kind-Elemente und deren Attribute
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+.. elements-information:: cv-color tile
+
diff --git a/doc/manual/de/config/structure-tile/index.rst b/doc/manual/de/config/structure-tile/index.rst
@@ -325,6 +325,7 @@ mehrere Komponenten in einer Kachel.
     Slider <components/slider>
     List <components/list>
     Chart <components/chart>
+    Color <components/color>
 
 
 .. toctree::

diff --git a/source/class/cv/parser/pure/widgets/ColorChooser.js b/source/class/cv/parser/pure/widgets/ColorChooser.js
@@ -51,6 +51,12 @@ qx.Class.define('cv.parser.pure.widgets.ColorChooser', {
       cv.parser.pure.WidgetParser.parseFormat(xml, path);
       cv.parser.pure.WidgetParser.parseAddress(xml, path, this.makeAddressListFn);
 
+      this.parseAttributes(xml, data);
+
+      return data;
+    },
+
+    parseAttributes(xml, data) {
       data.baseColors = {
         // default to sRGB color space with D65 white point
         r: { x: 0.64, y: 0.33, Y: 0.2126 },
@@ -209,8 +215,6 @@ qx.Class.define('cv.parser.pure.widgets.ColorChooser', {
         default:
           data.baseColors.w.curve = w_curve.split(';').map(x => parseFloat(x));
       }
-
-      return data;
     },
 
     makeAddressListFn(src, transform, mode, variant) {

diff --git a/source/class/cv/ui/structure/pure/ColorChooser.js b/source/class/cv/ui/structure/pure/ColorChooser.js
@@ -96,12 +96,14 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
     this.__animator = new cv.util.LimitedRateUpdateAnimator(this.__updateHandlePosition, this);
 
     this.__animator.setAnimationSpeed(100, 0.5);
-    this.__pageSizeListener = cv.ui.structure.pure.layout.ResizeHandler.states.addListener(
-      'changePageSizeInvalid',
-      () => {
-        this.__invalidateScreensize();
-      }
-    );
+    if (cv.ui.structure.pure.layout) {
+      this.__pageSizeListener = cv.ui.structure.pure.layout.ResizeHandler.states.addListener(
+        'changePageSizeInvalid',
+        () => {
+          this.invalidateScreensize();
+        }
+      );
+    }
 
     this.__components = new Set(Object.entries(this.getAddress()).map(v => v[1].variantInfo));
 
@@ -137,9 +139,23 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
     sendOnFinish: {
       check: 'Boolean',
       init: false
+    },
+
+    throttleInterval: {
+      check: 'Number',
+      init: 250
     }
   },
 
+  /*
+  ***********************************************
+    EVENTS
+  ***********************************************
+  */
+  events: {
+    colorChanged: 'qx.event.type.Event'
+  },
+
   /*
   ******************************************************
     MEMBERS
@@ -162,6 +178,10 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
     __Tmin: 2000, // minimal color temperature to show in slider
     __Tmax: 12500, // maximal color temperature to show in slider
 
+    getColor() {
+      return this.__color;
+    },
+
     // overridden
     _getInnerDomString() {
       const placeholder = this.getFormat() === '' ? '' : '-';
@@ -252,7 +272,7 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
     _onDomReady() {
       super._onDomReady();
 
-      this.__throttled = cv.util.Function.throttle(this.__onChangeValue, 250, { trailing: true }, this);
+      this.__throttled = cv.util.Function.throttle(this.__onChangeValue, this.getThrottleInterval(), { trailing: true }, this);
 
       this.getDomElement()
         .querySelectorAll('.actor')
@@ -451,15 +471,15 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
     },
 
     /**
-     * The the internal slider state and its handle and displayed value
+     * The internal slider state and its handle and displayed value
      * @param {number} value The new value
      * @param {string} variant The color component to change
      * @param {boolean} instant Animate or instant change
      * @private
      */
     __setSliderTo(value, variant, instant) {
       this.__colorOld = this.__colorCurrent === undefined ? this.__color.copy() : this.__colorCurrent.copy();
-      this.__color.changeComponent(variant, value);
+      this.__changeColor(variant, value);
       instant = instant || this.__color.delta(this.__colorOld) < 0.5;
       if (!instant) {
         this.__animator.setTo(this.__colorOld, true, false);
@@ -603,7 +623,7 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
       }
     },
 
-    __invalidateScreensize() {
+    invalidateScreensize() {
       this.__actors = undefined; // invalidate cached values
       this.__animator.setTo(this.__color, true /* tmp */);
     },
@@ -642,15 +662,15 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
                 sv[1] < 0.01 || (sv[0] < 0.01 && sv[1] > 0.99) || (sv[0] > 0.99 && sv[1] > 0.99);
               if (clearlyOnWheel || (closeToInerior && !closeToTriangleCorners)) {
                 this.__mode = 'wheel_h';
-                this.__color.changeComponent(
+                this.__changeColor(
                   actor.isLCh ? 'LCh-h' : 'h',
                   0.5 + Math.atan2(-relCoordX + 0.5, relCoordY - 0.5) / 2 / Math.PI
                 );
 
                 this.__inDrag = true;
               } else {
                 this.__mode = 'wheel_sv';
-                this.__color.changeComponent(actor.isLCh ? 'LCh-CL' : 'sv', sv);
+                this.__changeColor(actor.isLCh ? 'LCh-CL' : 'sv', sv);
                 this.__inDrag = true;
               }
             }
@@ -661,11 +681,11 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
             let sv = [-x / boxSize / 2 + 0.5, -y / boxSize / 2 + 0.5];
             if (Math.abs(x) < boxSize && Math.abs(y) < boxSize) {
               this.__mode = 'box_sv';
-              this.__color.changeComponent(actor.isLCh ? 'LCh-CL' : 'sv', sv);
+              this.__changeColor(actor.isLCh ? 'LCh-CL' : 'sv', sv);
               this.__inDrag = true;
             } else {
               this.__mode = 'box_h';
-              this.__color.changeComponent(actor.isLCh ? 'LCh-h' : 'h', 0.5 + Math.atan2(-x, y) / 2 / Math.PI);
+              this.__changeColor(actor.isLCh ? 'LCh-h' : 'h', 0.5 + Math.atan2(-x, y) / 2 / Math.PI);
 
               this.__inDrag = true;
             }
@@ -675,7 +695,7 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
               ratio = this.__Tmin + ratio * (this.__Tmax - this.__Tmin);
             }
             this.__mode = actorType;
-            this.__color.changeComponent(actorType, ratio);
+            this.__changeColor(actorType, ratio);
             this.__inDrag = true;
           }
           if (this.__inDrag) {
@@ -729,7 +749,7 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
               radius
             );
 
-            this.__color.changeComponent(actor.isLCh ? 'LCh-CL' : 'sv', [
+            this.__changeColor(actor.isLCh ? 'LCh-CL' : 'sv', [
               Math.min(Math.max(sv[0], 0), 1),
               Math.min(Math.max(sv[1], 0), 1)
             ]);
@@ -741,7 +761,7 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
             const x = relCoordX - 0.5;
             const y = relCoordY - 0.5;
             const sv = [-x / boxSize / 2 + 0.5, -y / boxSize / 2 + 0.5];
-            this.__color.changeComponent(actor.isLCh ? 'LCh-CL' : 'sv', [
+            this.__changeColor(actor.isLCh ? 'LCh-CL' : 'sv', [
               Math.min(Math.max(sv[0], 0), 1),
               Math.min(Math.max(sv[1], 0), 1)
             ]);
@@ -750,21 +770,21 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
           }
           case 'wheel_h':
           case 'box_h':
-            this.__color.changeComponent(
+            this.__changeColor(
               actor.isLCh ? 'LCh-h' : 'h',
               0.5 + Math.atan2(-relCoordX + 0.5, relCoordY - 0.5) / 2 / Math.PI
             );
 
             break;
           case 'T':
-            this.__color.changeComponent(
+            this.__changeColor(
               'T',
               this.__Tmin + Math.max(0, Math.min(relCoordX, 1)) * (this.__Tmax - this.__Tmin)
             );
 
             break;
           default:
-            this.__color.changeComponent(this.__mode, relCoordX);
+            this.__changeColor(this.__mode, relCoordX);
         }
       }
       this.__animator.setTo(this.__color, true);
@@ -773,6 +793,11 @@ qx.Class.define('cv.ui.structure.pure.ColorChooser', {
       }
     },
 
+    __changeColor(component, value) {
+      this.__color.changeComponent(component, value);
+      this.fireEvent('colorChanged');
+    },
+
     __onChangeValue() {
       this.__components.forEach(type => {
         let value = this.__color.getComponent(['xyY', 'x', 'y'].includes(type) ? 'xy' : type);

diff --git a/source/class/cv/ui/structure/tile/Controller.js b/source/class/cv/ui/structure/tile/Controller.js
@@ -423,6 +423,11 @@ qx.Class.define('cv.ui.structure.tile.Controller', {
         return this.__stylings[stylingName].mapValue(value, store);
       }
       return value;
+    },
+
+    // for compatibility with pure controller
+    parseLabel() {
+      return '';
     }
   },