Skip to content

feat: support for initial card editor #1

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

Merged
troinine merged 7 commits into from
Dec 8, 2025
Merged

feat: support for initial card editor #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ded912c
feat: support for initial card editor
troinine Dec 8, 2025
b83eb9c
docs: update README with missing config properties
troinine Dec 8, 2025
e7bc741
fix: review fixes
troinine Dec 8, 2025
5e8b182
fix: review fixes. validation of show_current and show_forecast is en…
troinine Dec 8, 2025
4cbbcd1
fix: Update README.md
troinine Dec 8, 2025
c73d199
fix: update README.md
troinine Dec 8, 2025
a496e6c
fix: update README.md
troinine Dec 8, 2025
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
22 changes: 12 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,23 +89,25 @@ resources:
| `name` | string | optional | Custom name to display. Defaults to the entity's friendly name. |
| `temperature_entity` | string | optional | Bring your own temperature entity to override the temperature from the main weather `entity`. |
| `show_current` | boolean | `true` | Show current weather conditions. |
| `show_forecast` | boolean | `true` | Show forecast section. |
| `default_forecast` | string | `daily` | Default forecast to view (`daily` or `hourly`). |
| `icons_path` | string | optional | Path to custom icons. For example. `/local/img/my-custom-weather-icons`. See [Custom Weather Icons](#custom-weather-icons) for more details. |
| `forecast` | object | optional | Forecast configuration options. |
| `forecast_actions` | object | optional | Actions for the forecast area. See [actions](#actions) |
| `tap_action` | object | optional | Defines the type action to perform on tap for the main card. Action defaults to `more-info`. See [Home Assistant Actions](https://www.home-assistant.io/dashboards/actions/). |
| `icons_path` | string | optional | Path to custom icons. For example, `/local/img/my-custom-weather-icons`. See [Custom Weather Icons](#custom-weather-icons) for more details. |
| `forecast` | object | optional | Forecast configuration options. See [Forecast Object](#forecast-object). |
| `forecast_action` | object | optional | Actions for the forecast area. See [Forecast Actions](#forecast-actions). |
| `tap_action` | object | optional | Defines the type of action to perform on tap for the main card. Action defaults to `more-info`. See [Home Assistant Actions](https://www.home-assistant.io/dashboards/actions/). |
| `hold_action` | object | optional | Defines the type of action to perform on hold for the main card. See [Home Assistant Actions](https://www.home-assistant.io/dashboards/actions/). |
| `double_tap_action` | object | optional | Defines the type of action to perform on double click for the main card. See [Home Assistant Actions](https://www.home-assistant.io/dashboards/actions/). |

### Forecast Object

| Name | Type | Default | Description |
| :---------------- | :------ | :------- | :------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode` | string | `simple` | Forecast display mode (`simple` or `chart`). |
| `show_sun_times` | boolean | `true` | Show sunrise/sunset times in hourly forecast. |
| `extra_attribute` | string | optional | The extra attribute to show below the weather forecast. Currently supports, `precipitation_probability`, `wind_direction` and `wind_bearing` |
| Name | Type | Default | Description |
| :------------------ | :------ | :------- | :------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode` | string | `simple` | Forecast display mode (`simple` or `chart`). |
| `show_sun_times` | boolean | `true` | Show sunrise/sunset times in hourly forecast. |
| `hourly_group_size` | number | `1` | Number of hours to group together in hourly forecast. Group data will be aggregated per forecast attribute. |
| `extra_attribute` | string | optional | The extra attribute to show below the weather forecast. Currently supports, `precipitation_probability`, `wind_direction` and `wind_bearing` |

### Actions
### Forecast Actions

Actions support standard Home Assistant card actions. However, one additional action has been defined: `toggle-forecast` will toggle the forecast between daily and hourly forecast.

Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"source": [
"src/index.ts"
],
"publicUrl": "/hacsfiles/weather-forecast-card/",
"publicUrl": "/hacsfiles/ha-weather-forecast-card/",
"includeNodeModules": true
}
},
Expand Down Expand Up @@ -43,4 +43,4 @@
"parcel": "^2.16.1",
"typescript": "^5.9.3"
}
}
}
6 changes: 4 additions & 2 deletions src/components/wfc-weather-condition-icon-provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export class WfcWeatherConditionIconProvider extends LitElement {
}

private getWeatherStateIcon(): TemplateResult | typeof nothing {
if (this.config.icons_path) {
if (this.config?.icons_path?.trim()) {
const { path, state } = this.getCustomWeatherIconPath();

return html` <img src="${path}" alt="${state}" /> `;
Expand Down Expand Up @@ -78,8 +78,10 @@ export class WfcWeatherConditionIconProvider extends LitElement {
}
}

const iconsPath = this.config.icons_path?.trim().replace(/\/$/, "");

return {
path: `${this.config.icons_path}/${condition}.svg`,
path: `${iconsPath}/${condition}.svg`,
state: condition,
};
};
Expand Down
Loading