Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for icon_map #753

Merged
merged 3 commits into from
Oct 14, 2024
Merged

Support for icon_map #753

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c99595a
Support for icon_map
scinos Oct 13, 2024
302d17b
Fix indentation
scinos Oct 13, 2024
8aa7d8c
Improve Condition type, minor style tweaks
scinos Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ decimal by 1). Otherwise, the integration may complain of a duplicate unique ID.
| `forecast_type` | string | **Optional** | The type of forecast data to use. One of `hourly`, `daily`, or `twice-daily`. If not specified, the card will attempt to use the finest-grained data available. | |
| `name` | string | **Optional** | Card name (set to `null` to hide) | `Hourly Weather` |
| `icons` | bool | **Optional** | Whether to show icons instead of text labels | `false` |
| `icon_map` | [Icon map][icon_map] | **Optional** | Custom icons to use for the weather conditions. Uses `mdi` icons by default. | |
| `num_segments` | number | **Optional** | Number of forecast segments to show (integer >= 1) | `12` |
| ~~`num_hours`~~ | number | **Optional** | _Deprecated:_ Use `num_segments` instead | `12` |
| `offset` | number | **Optional** | Number of forecast segments to offset from start | `0` |
Expand Down Expand Up @@ -183,6 +184,37 @@ colors:
foreground: '#000'
```

## Icon map Options

`icon_map` can be used to customize the icon used for each weather condition. It is specified as an object containing
one or more of the keys listed below and values that are valid icons installed in Home Assistant.

| Key | Default |
|-------------------|--------------------------------|
| `clear-night` | `mdi:weather-night` |
| `cloudy` | `mdi:weather-cloudy` |
| `fog` | `mdi:weather-fog` |
| `hail` | `mdi:weather-hail` |
| `lightning` | `mdi:weather-lightning` |
| `lightning-rainy` | `mdi:weather-lightning-rainy` |
| `partlycloudy` | `mdi:weather-partly-cloudy` |
| `pouring` | `mdi:weather-pouring` |
| `rainy` | `mdi:weather-rainy` |
| `snowy` | `mdi:weather-snowy` |
| `snowy-rainy` | `mdi:weather-snowy-rainy` |
| `sunny` | `mdi:weather-sunny` |
| `windy` | `mdi:weather-windy` |
| `windy-variant` | `mdi:weather-windy-variant` |
| `exceptional` | `mdi:alert-outline` |

### Sample icon map configuration

```yaml
icon_map:
sunny: mdi:emotion-cool
cloudy: phu:nextcloud # can use any icon set
```

### Wind Options

`show_wind` can be one of the following values:
Expand Down Expand Up @@ -243,6 +275,7 @@ structure.
[releases-shield]: https://img.shields.io/github/release/decompil3d/lovelace-hourly-weather.svg?style=for-the-badge
[releases]: https://github.com/decompil3d/lovelace-hourly-weather/releases

[icon_map]: #icon-map-options
[color]: #color-options
[wind]: #wind-options
[icon_fill]: #icon-fill-options
Expand Down
26 changes: 26 additions & 0 deletions cypress/e2e/weather-bar.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,32 @@ describe('Weather bar', () => {
expect(cs.width).to.not.eq('0px');
});
});
it('uses custom icons when specified', () => {
const expectedIcons = [
'mdi:customIcon1',
'foo:bar',
'mdi:weather-sunny',
'mdi:weather-night'
];
cy.configure({
icons: true,
icon_map: {
cloudy: 'mdi:customIcon1',
"partlycloudy": "foo:bar"
}
});
cy.get('weather-bar')
.shadow()
.find('div.bar > div > span.condition-icon')
.should('have.length', 4)
.find('ha-icon')
.each((el, i) => {
cy.wrap(el).invoke('attr', 'icon')
.should('exist')
.and('eq', expectedIcons[i]);
});
});

});
describe('Icon fill', () => {
function verifyIcons (cy, expectedIcons) {
Expand Down
1 change: 1 addition & 0 deletions src/hourly-weather.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,7 @@ export class HourlyWeatherCard extends LitElement {
.wind=${wind}
.precipitation=${precipitation}
.icons=${!!config.icons}
.icon_map = ${config.icon_map}
scinos marked this conversation as resolved.
Show resolved Hide resolved
.colors=${colorSettings.validColors}
.hide_hours=${!!config.hide_hours}
.hide_temperatures=${!!config.hide_temperatures}
Expand Down
3 changes: 3 additions & 0 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ declare global {
export type WindType = 'true' | 'false' | 'speed' | 'direction' | 'barb' | 'barb-and-speed' | 'barb-and-direction' | 'barb-speed-and-direction';
export type ShowDateType = 'false' | 'boundary' | 'all';
export type IconFillType = 'single' | 'full' | number;
export type Conditions = 'clear-night' | 'cloudy' | 'fog' | 'hail' | 'lightning' | 'lightning-rainy' | 'partlycloudy' | 'pouring' | 'rainy' | 'snowy' | 'snowy-rainy' | 'sunny' | 'windy' | 'windy-variant' | 'exceptional'
export type IconMap = Partial<Record<Conditions, string>>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export type Conditions = 'clear-night' | 'cloudy' | 'fog' | 'hail' | 'lightning' | 'lightning-rainy' | 'partlycloudy' | 'pouring' | 'rainy' | 'snowy' | 'snowy-rainy' | 'sunny' | 'windy' | 'windy-variant' | 'exceptional'
export type IconMap = Partial<Record<Conditions, string>>
export type Condition = 'clear-night' | 'cloudy' | 'fog' | 'hail' | 'lightning' | 'lightning-rainy' | 'partlycloudy' | 'pouring' | 'rainy' | 'snowy' | 'snowy-rainy' | 'sunny' | 'windy' | 'windy-variant' | 'exceptional';
type PerConditionConfig<TValue> = Partial<Record<Condition, TValue>>;
export type IconMap = PerRecordConfig<string>;

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And then replace the ColorConfig interface below with:

export type ColorConfig extends PerConditionConfig<ColorDefinition>;

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And edit the type of condition in ConditionSpan and ForecastSegment to Condition instead of string.

Copy link
Contributor Author

@scinos scinos Oct 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't make it work with export type ColorConfig extends PerConditionConfig<ColorDefinition>;. I tried export interface ColorConfig extends PerConditionConfig<ColorDefinition> {}; but then I got a bunch of type errors every time it iterates over ColorConfig key/value because it thinks value is unknown.

Example:
image
I guess I can fix it with a bunch of as ColorDefinition, but the forced cast feels wrong to me.

I'm not sure if what I did is equivalent tbh. Let me know what you think.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, my bad - I originally had that comment suggesting an interface, but changed to a type and forgot to adjust the syntax. You got it right.


export interface HourlyWeatherCardConfig extends LovelaceCardConfig {
type: string;
Expand All @@ -20,6 +22,7 @@ export interface HourlyWeatherCardConfig extends LovelaceCardConfig {
forecast_type?: ForecastType;
name?: string;
icons?: boolean;
icon_map?: IconMap;
offset?: string; // number
colors?: ColorConfig;
hide_bar?: boolean;
Expand Down
15 changes: 12 additions & 3 deletions src/weather-bar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ export class WeatherBar extends LitElement {
@property({ type: Boolean })
icons = false;

@property({ type: Object })
icon_map = null;
scinos marked this conversation as resolved.
Show resolved Hide resolved

@property({ attribute: false })
colors: ColorMap | undefined = void 0;

Expand Down Expand Up @@ -68,9 +71,15 @@ export class WeatherBar extends LitElement {
if (!this.hide_bar) {
for (const cond of this.conditions) {
const label = this.labels[cond[0]];
let icon = ICONS[cond[0]];
if (icon === cond[0]) icon = 'mdi:weather-' + icon;
else icon = 'mdi:' + icon;

let icon;
if (this.icon_map && cond[0] in this.icon_map) {
icon = this.icon_map[cond[0]]
} else {
icon = ICONS[cond[0]];
if (icon === cond[0]) icon = 'mdi:weather-' + icon;
else icon = 'mdi:' + icon;
}
scinos marked this conversation as resolved.
Show resolved Hide resolved

const iconMarkup: TemplateResult[] = [];
if (!this.icons) {
Expand Down