From db28d58815d8d6ba84fa9a6b01640740ff640f5f Mon Sep 17 00:00:00 2001 From: Will Rouesnel Date: Mon, 9 Oct 2023 00:07:28 +1100 Subject: [PATCH] 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. --- README.md | 1 + cypress/e2e/weather-bar.cy.ts | 13 +++++++++++++ src/hourly-weather.ts | 1 + src/types.ts | 1 + src/weather-bar.ts | 30 ++++++++++++++++++++++++++++-- 5 files changed, 44 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c0c2f4a9..553e98d1 100644 --- 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 index 3909d2c9..1cf4b078 100644 --- 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 index c1fd6248..d115d932 100644 --- 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 index 5b6ace36..f5f4ba8d 100644 --- 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 index f1959b49..52d3f1d4 100644 --- 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 = { gridColumnStart: String(gridStart), gridColumnEnd: String(gridStart += cond[1] * 2) }; + const classname = `${cond[0]} bar-span`; conditionBars.push(html` -
+
${this.icons ? html`` : html`${label}`} @@ -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`
${colorStyles ?? null} + ${borderStyles ?? null} ${this.hide_bar ? null : html`
${conditionBars}
`}
${barBlocks}
@@ -186,6 +197,15 @@ export class WeatherBar extends LitElement { `; } + private getBarSpanStyles(borders: ColorDefinition): TemplateResult | null { + if (!borders) return null; + return html``; + } + 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;