- Feature: colors are not configurable.

- console.log commented out. - version to 0.10.0
aukedejong · Apr 28, 2023 · 58b3529 · 58b3529
1 parent ef2e7ac
commit 58b3529
Show file tree

Hide file tree

Showing 14 changed files with 163 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -77,6 +77,7 @@ Else, if you prefer the graphical editor, use the menu to add the resource:
 | windrose_draw_north_offset | number  |              0               |    -     | At what degrees the north direction is drawn. For example, if you want the windrose north orientation the same as your properties north orientation                   |
 | matching_strategy          | string  |       direction-first        |    -     | How to match direction and speed measurements. Find a speed with each direction or a direction with each speed measurement. Options: `direction-first`, `speed-first` |
 | direction_speed_time_diff  | string  |              1               |    -     | How many seconds a speed measurement time can be earlier or later then the direction measurement time. Or the other way around, depending on thie matching_strategy   |
+| colors                     | object  |                              |          | Configure colors for different parts of the windrose and windspeedbar. See object Colors.                                                                             |
 
 #### Object windspeed_entities
 
@@ -92,6 +93,35 @@ Else, if you prefer the graphical editor, use the menu to add the resource:
 | from_value | number |         |    x     | Start speed of a speed range |
 | color      | string |         |    x     | Color CSS value              |
 
+#### Object colors
+For some value the theme variable --primary-text-color is used. This is needed if HA switches theme
+light/dark mode.
+CSS color values are allowed.
+
+| Name                     |  Type  | Default |       Required       | Description                          |
+|--------------------------|:------:|:-------:|:--------------------:|--------------------------------------|
+| rose_lines               | string |         |  rgb(160, 160, 160)  | Circles, borders and the cross color |
+| rose_direction_letters   | string |         | --primary-text-color | Direction letters color              |
+| rose_percentages         | string |         | --primary-text-color | Percentage legend  color             |
+| bar_border               | string |         |  rgb(160, 160, 160)  | Bar border color                     |
+| bar_unit_name            | string |         | --primary-text-color | Unit name color                      |
+| bar_name                 | string |         | --primary-text-color | Entity name color                    |
+| bar_unit_values          | string |         | --primary-text-color | Unit value color                     |
+| bar_percentages          | string |         |        black         | Percentage color                     |
+
+#### Example colors yaml
+```yaml
+colors:
+  rose_lines: 'rgb(0,255,0)'
+  rose_direction_letters: 'yellow'
+  rose_percentages: 'blue'
+  bar_border: 'hsl(200, 100%, 60%)'
+  bar_unit_name: 'purple'
+  bar_name: 'yellow'
+  bar_unit_values: 'blue'
+  bar_percentages: 'orange'
+```
+
 #### Speed unit options:
 
 | Name |    Description     | Input | Output |

diff --git a/src/CardColors.ts b/src/CardColors.ts
@@ -0,0 +1,22 @@
+export class CardColors {
+    roseLines: string;
+    roseDirectionLetters: string;
+    rosePercentages: string;
+    barBorder: string;
+    barUnitName: string;
+    barName: string
+    barUnitValues: string
+    barPercentages: string;
+
+    constructor() {
+        const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-text-color');
+        this.roseLines = 'rgb(160, 160, 160)';
+        this.roseDirectionLetters = primaryColor;
+        this.rosePercentages = primaryColor
+        this.barBorder = 'rgb(160, 160, 160)';
+        this.barUnitName = primaryColor;
+        this.barName = primaryColor;
+        this.barUnitValues = primaryColor;
+        this.barPercentages = 'black';
+    }
+}
diff --git a/src/CardConfig.ts b/src/CardConfig.ts
@@ -22,9 +22,22 @@ export interface CardConfig {
     wind_direction_count: number;
     matching_strategy: string;
     direction_speed_time_diff: number;
+
+    colors: CardConfigColors;
 }
 
 export interface CardConfigSpeedRange {
     from_value: number;
     color: string;
+}
+
+export interface CardConfigColors {
+    rose_lines: string;
+    rose_direction_letters: string;
+    rose_percentages: string;
+    bar_border: string;
+    bar_unit_name: string;
+    bar_name: string
+    bar_unit_values: string
+    bar_percentages: string;
 }
diff --git a/src/CardConfigWrapper.ts b/src/CardConfigWrapper.ts
@@ -1,6 +1,7 @@
 import {GlobalConfig} from "./GlobalConfig";
 import {CardConfig} from "./CardConfig";
 import {SpeedRange} from "./WindSpeedConverter";
+import {CardColors} from "./CardColors";
 
 export class CardConfigWrapper {
 
@@ -24,6 +25,7 @@ export class CardConfigWrapper {
     speedRanges: SpeedRange[] = [];
     matchingStrategy: string;
     directionSpeedTimeDiff: number;
+    cardColor: CardColors;
 
     entities: string[];
     filterEntitiesQueryParameter: string;
@@ -53,7 +55,7 @@ export class CardConfigWrapper {
             windrose_draw_north_offset: 0,
             cardinal_direction_letters: GlobalConfig.defaultCardinalDirectionLetters,
             matching_strategy: GlobalConfig.defaultMatchingStategy,
-            direction_speed_time_diff: GlobalConfig.defaultDirectionSpeedTimeDiff
+            direction_speed_time_diff: GlobalConfig.defaultDirectionSpeedTimeDiff,
         };
     }
 
@@ -81,6 +83,7 @@ export class CardConfigWrapper {
         this.directionSpeedTimeDiff = this.checkDirectionSpeedTimeDiff();
         this.filterEntitiesQueryParameter = this.createEntitiesQueryParameter();
         this.entities = this.createEntitiesArray();
+        this.cardColor = this.checkCardColors();
     }
 
     windBarCount(): number {
@@ -313,4 +316,35 @@ export class CardConfigWrapper {
         entities.push(this.windDirectionEntity);
         return entities.concat(this.windspeedEntities.map(config => config.entity));
     }
+
+    private checkCardColors(): CardColors {
+        const cardColors = new CardColors();
+        if (this.cardConfig.colors) {
+            if (this.cardConfig.colors.rose_direction_letters) {
+                cardColors.roseDirectionLetters = this.cardConfig.colors.rose_direction_letters;
+            }
+            if (this.cardConfig.colors.rose_lines) {
+                cardColors.roseLines = this.cardConfig.colors.rose_lines;
+            }
+            if (this.cardConfig.colors.rose_percentages) {
+                cardColors.rosePercentages = this.cardConfig.colors.rose_percentages;
+            }
+            if (this.cardConfig.colors.bar_border) {
+                cardColors.barBorder = this.cardConfig.colors.bar_border;
+            }
+            if (this.cardConfig.colors.bar_name) {
+                cardColors.barName = this.cardConfig.colors.bar_name;
+            }
+            if (this.cardConfig.colors.bar_percentages) {
+                cardColors.barPercentages = this.cardConfig.colors.bar_percentages;
+            }
+            if (this.cardConfig.colors.bar_unit_name) {
+                cardColors.barUnitName = this.cardConfig.colors.bar_unit_name;
+            }
+            if (this.cardConfig.colors.bar_unit_values) {
+                cardColors.barUnitValues = this.cardConfig.colors.bar_unit_values;
+            }
+        }
+        return cardColors;
+    }
 }
diff --git a/src/GlobalConfig.ts b/src/GlobalConfig.ts
@@ -1,11 +1,5 @@
 export class GlobalConfig {
 
-    static leaveBorderColor = 'rgb(160, 160, 160)';
-    static circlesColor = 'rgb(160, 160, 160)';
-    static crossColor = this.circlesColor;
-
-    static barBorderColor = this.circlesColor;
-
     static defaultCardinalDirectionLetters = "NESW";
     static defaultWindspeedBarLocation = 'bottom';
     static defaultHoursToShow = 4;
@@ -21,7 +15,4 @@ export class GlobalConfig {
     static verticalBarHeight = 30;
     static horizontalBarHeight = 15;
 
-    static getTextColor() {
-        return getComputedStyle(document.documentElement).getPropertyValue('--primary-text-color')
-    }
 }
diff --git a/src/WindBarCanvas.ts b/src/WindBarCanvas.ts
@@ -1,7 +1,6 @@
 import {DrawUtil} from "./DrawUtil";
 import {WindBarData} from "./WindBarData";
 import {WindBarConfig} from "./WindBarConfig";
-import {GlobalConfig} from "./GlobalConfig";
 import {SpeedRange, WindSpeedConverter} from "./WindSpeedConverter";
 
 export class WindBarCanvas {
@@ -29,37 +28,9 @@ export class WindBarCanvas {
         }
     }
 
-    private drawBarLegendHorizontal2(speedRangePercentages: number[],
-                                    canvasContext: CanvasRenderingContext2D) {
-
-        canvasContext.font = '13px Arial';
-        canvasContext.textAlign = 'left';
-        canvasContext.textBaseline = 'middle';
-        canvasContext.lineWidth = 1;
-        canvasContext.fillStyle = GlobalConfig.getTextColor();
-        canvasContext.fillText(this.config.label, this.config.posX, this.config.posY);
-        let posX = this.config.posX;
-        for (let i = 0; i <= speedRangePercentages.length; i++) {
-            if (speedRangePercentages[i] > 0) {
-
-                length = speedRangePercentages[i] * (this.config.length / 100);
-
-                canvasContext.beginPath();
-                canvasContext.strokeStyle = GlobalConfig.barBorderColor;
-                canvasContext.fillStyle = this.speedRanges[i].color;
-                canvasContext.rect(posX, this.config.posY + 6, length, this.config.height);
-                canvasContext.fill();
-
-                canvasContext.fillStyle = 'black';
-                canvasContext.fillText(`${i}`, posX + (length / 2) - 3, this.config.posY + (this.config.height / 2) + 7);
-                canvasContext.stroke();
-                posX += length;
-            }
-        }
-    }
-
     private drawBarLegendVertical(speedRangePercentages: number[],
                                   canvasContext: CanvasRenderingContext2D) {
+
         let highestRangeMeasured = speedRangePercentages.length;
         if (!this.config.full) {
             highestRangeMeasured = this.getIndexHighestRangeWithMeasurements(speedRangePercentages);
@@ -70,7 +41,7 @@ export class WindBarCanvas {
         canvasContext.font = '13px Arial';
         canvasContext.textAlign = 'left';
         canvasContext.textBaseline = 'bottom';
-        canvasContext.fillStyle = GlobalConfig.getTextColor();
+        canvasContext.fillStyle = this.config.barNameColor;
         canvasContext.save();
         canvasContext.translate(this.config.posX, this.config.posY);
         canvasContext.rotate(DrawUtil.toRadians(-90));
@@ -93,7 +64,7 @@ export class WindBarCanvas {
             canvasContext.fill();
 
             canvasContext.textAlign = 'left';
-            canvasContext.fillStyle = GlobalConfig.getTextColor();
+            canvasContext.fillStyle = this.config.barUnitValuesColor;
 
             if (this.config.outputUnit === 'bft') {
                 if (i == 12) {
@@ -106,7 +77,7 @@ export class WindBarCanvas {
             }
 
             canvasContext.textAlign = 'center';
-            canvasContext.fillStyle = 'black';
+            canvasContext.fillStyle = this.config.barPercentagesColor;
             if (speedRangePercentages[i] > 0) {
                 canvasContext.fillText(`${Math.round(speedRangePercentages[i])}%`, this.config.posX + (this.config.height / 2), posY + (length / 2));
             }
@@ -115,14 +86,14 @@ export class WindBarCanvas {
             posY += length;
         }
         canvasContext.lineWidth = 1;
-        canvasContext.strokeStyle = GlobalConfig.barBorderColor;
+        canvasContext.strokeStyle = this.config.barBorderColor;
         canvasContext.rect(this.config.posX, this.config.posY, this.config.height, this.config.length * -1);
         canvasContext.stroke();
 
         canvasContext.beginPath();
         canvasContext.textAlign = 'center';
         canvasContext.textBaseline = 'bottom';
-        canvasContext.fillStyle = GlobalConfig.getTextColor();
+        canvasContext.fillStyle = this.config.barUnitNameColor;
         canvasContext.fillText(this.outputUnitName, this.config.posX + (this.config.height / 2), this.config.posY - this.config.length - 2);
         canvasContext.fill();
     }
@@ -141,7 +112,7 @@ export class WindBarCanvas {
         canvasContext.textAlign = 'left';
         canvasContext.textBaseline = 'bottom';
         canvasContext.lineWidth = 1;
-        canvasContext.fillStyle = GlobalConfig.getTextColor();
+        canvasContext.fillStyle = this.config.barNameColor;
         canvasContext.fillText(this.config.label, this.config.posX, this.config.posY);
 
         canvasContext.textAlign = 'center';
@@ -160,7 +131,7 @@ export class WindBarCanvas {
             canvasContext.fill();
 
             canvasContext.textAlign = 'center';
-            canvasContext.fillStyle = GlobalConfig.getTextColor();
+            canvasContext.fillStyle = this.config.barUnitValuesColor;
 
             if (this.config.outputUnit === 'bft') {
                 canvasContext.fillText(i+'', posX + (length / 2), this.config.posY + this.config.height + 2);
@@ -169,7 +140,7 @@ export class WindBarCanvas {
             }
 
             canvasContext.textAlign = 'center';
-            canvasContext.fillStyle = 'black';
+            canvasContext.fillStyle = this.config.barPercentagesColor;
             if (speedRangePercentages[i] > 0) {
                 canvasContext.fillText(`${Math.round(speedRangePercentages[i])}%`, posX + (length / 2), this.config.posY + 2);
             }
@@ -178,14 +149,14 @@ export class WindBarCanvas {
             posX += length;
         }
         canvasContext.lineWidth = 1;
-        canvasContext.strokeStyle = GlobalConfig.barBorderColor;
+        canvasContext.strokeStyle = this.config.barBorderColor;
         canvasContext.rect(this.config.posX, this.config.posY, this.config.length, this.config.height);
         canvasContext.stroke();
 
         canvasContext.beginPath();
         canvasContext.textAlign = 'right';
         canvasContext.textBaseline = 'bottom';
-        canvasContext.fillStyle = GlobalConfig.getTextColor();
+        canvasContext.fillStyle = this.config.barUnitNameColor;
         canvasContext.fillText(this.outputUnitName, this.config.posX + this.config.length, this.config.posY);
         canvasContext.fill();
     }

diff --git a/src/WindBarConfig.ts b/src/WindBarConfig.ts
@@ -10,6 +10,13 @@ export class WindBarConfig {
         public orientation: string,
         public full: boolean,
         public inputUnit: string,
-        public outputUnit: string) {
+        public outputUnit: string,
+
+        public barBorderColor: string,
+        public barUnitNameColor: string,
+        public barNameColor: string,
+        public barUnitValuesColor: string,
+        public barPercentagesColor: string,
+        ) {
     }
 }
diff --git a/src/WindDirectionCalculator.ts b/src/WindDirectionCalculator.ts
@@ -7,7 +7,7 @@ export class WindDirectionCalculator {
     data = new WindDirectionData();
     speeds: number[] = [];
     speedRangeCounts: number[] = [];
-    speedRangeCount: number = 0;
+    speedRangeCount = 0;
     config: WindRoseConfig;
 
     speedRangeFunction: (speed: number) => number;