Add "borders" option

The `borders` config option is added which allows setting a rendered border for bar `span` elements. This makes them more visible when used without colors on things like e-ink displays.
decompil3d · Apr 7, 2024 · db28d58 · db28d58
1 parent 13b4958
commit db28d58
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,7 @@ decimal by 1). Otherwise, the integration may complain of a duplicate unique ID.
 | `offset`                         | number           | **Optional** | Number of forecast segments to offset from start                                                                                                                | `0`                 |
 | `label_spacing`                  | number           | **Optional** | Space between time/temperature labels (integer >= 1)                                                                                                            | `2`                 |
 | `colors`                         | [object][color]  | **Optional** | Set colors for all or some conditions                                                                                                                           |                     |
+| `borders`                        | [color]          | **Optional** | Set color for a border around segments. Defaults to null (no border)                                                                                            |                     |
 | `hide_hours`                     | bool             | **Optional** | Whether to hide hour labels under the bar                                                                                                                       | `false`             |
 | `hide_temperatures`              | bool             | **Optional** | Whether to hide temperatures under the bar                                                                                                                      | `false`             |
 | `round_temperatures`             | bool             | **Optional** | Whether to round temperatures to the nearest whole number                                                                                                       | `false`             |

diff --git a/cypress/e2e/weather-bar.cy.ts b/cypress/e2e/weather-bar.cy.ts
@@ -131,6 +131,19 @@ describe('Weather bar', () => {
         expect(cs.color).to.eq(expectedCustomObjectColors[i].fg);
       });
   });
+
+  it('draws borders when a border color is specified', () => {
+    cy.configure({
+      borders: 'limegreen'
+    });
+    cy.get('weather-bar')
+        .shadow()
+        .find('div.bar > div.bar-span')
+        .each((el) => {
+          cy.wrap(el).should('have.css', 'border-color', 'rgb(50, 205, 50)');
+        });
+  });
+
   describe('Labels', () => {
     it('shows text descriptions on condition blocks', () => {
       cy.get('weather-bar')

diff --git a/src/hourly-weather.ts b/src/hourly-weather.ts
@@ -397,6 +397,7 @@ export class HourlyWeatherCard extends LitElement {
             .precipitation=${precipitation}
             .icons=${!!config.icons}
             .colors=${colorSettings.validColors}
+            .borders=${config.borders}
             .hide_hours=${!!config.hide_hours}
             .hide_temperatures=${!!config.hide_temperatures}
             .round_temperatures=${!!config.round_temperatures}

diff --git a/src/types.ts b/src/types.ts
@@ -21,6 +21,7 @@ export interface HourlyWeatherCardConfig extends LovelaceCardConfig {
   icons?: boolean;
   offset?: string; // number
   colors?: ColorConfig;
+  borders?: ColorDefinition;
   hide_bar?: boolean;
   hide_hours?: boolean;
   hide_temperatures?: boolean;

diff --git a/src/weather-bar.ts b/src/weather-bar.ts
@@ -4,7 +4,7 @@ import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import tippy, { Instance } from 'tippy.js';
 import { LABELS, ICONS } from "./conditions";
 import { getWindBarbSVG } from "./lib/svg-wind-barbs";
-import type { ColorMap, ConditionSpan, SegmentTemperature, SegmentWind, SegmentPrecipitation, WindType, ShowDateType } from "./types";
+import type { ColorMap, ConditionSpan, SegmentTemperature, SegmentWind, SegmentPrecipitation, WindType, ShowDateType, ColorDefinition } from "./types";
 
 const tippyStyles: string = process.env.TIPPY_CSS || '';
 
@@ -27,6 +27,9 @@ export class WeatherBar extends LitElement {
   @property({ attribute: false })
   colors: ColorMap | undefined = void 0;
 
+  @property({ attribute: false })
+  borders: ColorDefinition | undefined = void 0;
+
   @property({ type: Boolean })
   hide_hours = false;
 
@@ -69,8 +72,9 @@ export class WeatherBar extends LitElement {
         if (icon === cond[0]) icon = 'mdi:weather-' + icon;
         else icon = 'mdi:' + icon;
         const barStyles: Readonly<StyleInfo> = { gridColumnStart: String(gridStart), gridColumnEnd: String(gridStart += cond[1] * 2) };
+        const classname = `${cond[0]} bar-span`;
         conditionBars.push(html`
-          <div class=${cond[0]} style=${styleMap(barStyles)} data-tippy-content=${label}>
+          <div class=${classname} style=${styleMap(barStyles)} data-tippy-content=${label}>
             ${this.icons ?
             html`<span class="condition-icon"><ha-icon icon=${icon}></ha-icon></span>` :
             html`<span class="condition-label">${label}</span>`}
@@ -150,9 +154,16 @@ export class WeatherBar extends LitElement {
       colorStyles = this.getColorStyles(this.colors);
     }
 
+    let borderStyles: TemplateResult | null = null;
+    if (this.borders) {
+      borderStyles = this.getBarSpanStyles(this.borders);
+    }
+    console.log(borderStyles);
+
     return html`
       <div class="main">
         ${colorStyles ?? null}
+        ${borderStyles ?? null}
         ${this.hide_bar ? null : html`<div class="bar">${conditionBars}</div>`}
         <div class="axes">${barBlocks}</div>
       </div>
@@ -186,6 +197,15 @@ export class WeatherBar extends LitElement {
     </style>`;
   }
 
+  private getBarSpanStyles(borders: ColorDefinition): TemplateResult | null {
+    if (!borders) return null;
+    return html`<style>
+      .main > div.bar > div.bar-span {
+        border-color: ${borders};
+      }
+    </style>`;
+  }
+
   private getWindBarb(speed: number, direction: number): TemplateResult {
     const svgStyles = {
       transform: `rotate(${direction}deg)`
@@ -308,6 +328,11 @@ export class WeatherBar extends LitElement {
       background-color: var(--color-exceptional);
       color: var(--color-exceptional-foreground, var(--primary-text-color));
     }
+    .bar-span {
+      border-style: solid;
+      border-width: 1px;
+      border-color: transparent
+    }
     .axes {
       display: grid;
       grid-auto-flow: column;
@@ -331,6 +356,7 @@ export class WeatherBar extends LitElement {
       grid-area: right;
       border: 1px solid var(--divider-color, lightgray);
       border-width: 0 0 0 1px;
+      border-collapse: collapse;
     }
     .bar-block-bottom {
       text-align: center;