{"id":13583408,"url":"https://github.com/kalkih/simple-weather-card","last_synced_at":"2025-04-06T20:12:43.624Z","repository":{"id":39674534,"uuid":"172998062","full_name":"kalkih/simple-weather-card","owner":"kalkih","description":"Minimalistic weather card for Home Assistant","archived":false,"fork":false,"pushed_at":"2023-05-12T19:41:22.000Z","size":73,"stargazers_count":311,"open_issues_count":22,"forks_count":37,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T19:05:55.321Z","etag":null,"topics":["home-assistant","home-automation","homeassistant","lovelace","weather"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kalkih.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-02-27T22:08:16.000Z","updated_at":"2025-03-28T11:06:32.000Z","dependencies_parsed_at":"2024-01-05T21:05:28.523Z","dependency_job_id":null,"html_url":"https://github.com/kalkih/simple-weather-card","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalkih%2Fsimple-weather-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalkih%2Fsimple-weather-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalkih%2Fsimple-weather-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalkih%2Fsimple-weather-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kalkih","download_url":"https://codeload.github.com/kalkih/simple-weather-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247543593,"owners_count":20955865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["home-assistant","home-automation","homeassistant","lovelace","weather"],"created_at":"2024-08-01T15:03:27.675Z","updated_at":"2025-04-06T20:12:43.599Z","avatar_url":"https://github.com/kalkih.png","language":"JavaScript","funding_links":[],"categories":["Lovelace User Interface","JavaScript","Install from Source","Dashboards"],"sub_categories":["Custom Lovelace UI Cards","Smart Home Automation","Custom Cards"],"readme":"# Simple Weather Card\n\n[![](https://img.shields.io/github/release/kalkih/simple-weather-card.svg?style=flat-square)](https://github.com/kalkih/simple-weather-card/releases/latest)\n\nA minimalistic weather card for [Home Assistant](https://github.com/home-assistant/home-assistant) Lovelace UI, inspired by Google Material Design.\n\n![Preview](https://user-images.githubusercontent.com/457678/53588519-61dfdf80-3b8d-11e9-9f0d-f5995ba794ce.png)\n\n## Install\n\n_This card is available in [HACS](https://github.com/custom-components/hacs) (Home Assistant Community Store)_\n\n### Manual install\n\n1. Download and copy `simple-weather-card-bundle.js` from the [latest release](https://github.com/kalkih/simple-weather-card/releases/latest) into your `config/www` directory.\n\n2. Add a reference to `simple-weather-card-bundle.js` inside your `ui-lovelace.yaml` or through the raw config editor interface.\n\n   ```yaml\n   resources:\n     - url: /local/simple-weather-card-bundle.js?v=0.8.5\n       type: module\n   ```\n\n### CLI install\n\n1. Move into your `config/www` directory\n\n2. Download `simple-weather-card-bundle.js`\n\n   ```console\n   $ wget https://github.com/kalkih/simple-weather-card/releases/download/v0.8.5/simple-weather-card-bundle.js\n   ```\n\n3. Add a reference to `simple-weather-card-bundle.js` inside your `ui-lovelace.yaml` or through the raw config editor gui.\n\n   ```yaml\n   resources:\n     - url: /local/simple-weather-card-bundle.js?v=0.8.5\n       type: module\n   ```\n\n## Updating\n\n1. Find your `simple-weather-card-bundle.js` file in `config/www` or wherever you ended up storing it.\n\n2. Replace the local file with the one found in the [latest release](https://github.com/kalkih/simple-weather-card/releases/latest).\n\n3. Add the new version number to the end of the card reference url in your `ui-lovelace.yaml`. This will prevent the browser from loading the old version from cache.\n\n   ```yaml\n   resources:\n     - url: /local/simple-weather-card-bundle.js?v=0.8.5\n       type: module\n   ```\n\n## Using the card\n\n### Options\n\n#### Card options\n\n| Name           | Type                                    | Default         | Since  | Description                                                                                  |\n| -------------- | --------------------------------------- | --------------- | ------ | -------------------------------------------------------------------------------------------- |\n| type           | string                                  | **required**    | v0.1.0 | `custom:simple-weather-card`                                                                 |\n| entity         | string                                  | **required**    | v0.1.0 | The entity_id from an entity within the `weather` domain.                                    |\n| name           | string                                  | optional        | v0.1.0 | Set a custom name.                                                                           |\n| primary_info   | array/string                            | `extrema`       | v0.7.0 | Primary card information, one or more [weather attributes](#weather-attributes)              |\n| secondary_info | array/string                            | `precipitation` | v0.2.0 | Secondary card information, one or more [weather attributes](#weather-attributes)            |\n| backdrop       | boolean/object                          | `false`         | v0.1.0 | Colored background, accepts `true/false` or a [Backdrop object](#backdrop-object-options).   |\n| custom         | array                                   | optional        | v0.4.0 | Override weather information with custom sensors, see [Custom option](#custom-option-array). |\n| tap_action     | [action object](#action-object-options) | optional        | v0.5.0 | Action on click/tap.                                                                         |\n\n#### Weather attributes\n\n| Name                      | Description                       |\n| ------------------------- | --------------------------------- |\n| extrema                   | Forecast high and low temperature |\n| precipitation             | Forecast precipitation            |\n| precipitation_probability | Probability of precipitation      |\n| humidity                  | Current humidity                  |\n| wind_speed                | Current wind speed                |\n| wind_bearing              | Current wind direction            |\n| pressure                  | Current air pressure              |\n\n#### Backdrop object options\n\nSee [Backdrop example](#backdrop-example) for example usage.\n\n| Name  | Type    | Default                  | Description               |\n| ----- | ------- | ------------------------ | ------------------------- |\n| fade  | boolean | `false`                  | Faded background.         |\n| day   | string  | '#45aaf2'                | Background color (Day).   |\n| night | string  | '#a55eea'                | Background color (Night). |\n| text  | string  | 'var(--text-dark-color)' | Text color.               |\n\n#### Custom option array\n\nSee [Custom example](#custom-sensors-example) for example usage.\nPossible entries are: `temp`, `high`, `low`, `state`, `precipitation`, `humidity`, `icon-state`, `wind_speed`, `wind_bearing`, `pressure` \u0026 `precipitation_probability`.\n\n```yaml\ncustom:\n  - temp: sensor.home_temp\n  - high: sensor.home_high_temp\n  - low: sensor.home_low_temp\n```\n\n#### Action object options\n\n| Name            | Type   | Default     | Options                                         | Description                                                                             |\n| --------------- | ------ | ----------- | ----------------------------------------------- | --------------------------------------------------------------------------------------- |\n| action          | string | `more-info` | `more-info`, `navigate`, `call-service`, `none` | Action to perform                                                                       |\n| service         | string | none        | Any service                                     | Service to call (e.g. `media_player.toggle`) when `action` is defined as `call-service` |\n| service_data    | object | none        | Any service data                                | Service data to include with the service call (e.g. `entity_id: media_player.office`)   |\n| navigation_path | string | none        | Any path                                        | Path to navigate to (e.g. `/lovelace/0/`) when `action` is defined as `navigate`        |\n| entity          | string | none        | Any entity id                                   | Override default entity of more-info, when `action` is defined as `more-info`           |\n\n### Example usage\n\n#### Standard card\n\n![Standard card example](https://user-images.githubusercontent.com/457678/53588909-517c3480-3b8e-11e9-9d63-d49fa61507e3.png)\n\n```yaml\n- type: custom:simple-weather-card\n  entity: weather.smhi\n  name: in current location\n```\n\n#### Backdrop example\n\n![Backdrop example](https://user-images.githubusercontent.com/457678/53589125-d404f400-3b8e-11e9-8b54-977971fe83ea.png)\n\n```yaml\n- type: custom:simple-weather-card\n  entity: weather.smhi\n  name: \" \"\n  backdrop: true\n```\n\n#### Custom backdrop example\n\n![Custom backdrop example](https://user-images.githubusercontent.com/457678/53589746-7e314b80-3b90-11e9-9ee9-f90bd8c43690.png)\n\n```yaml\n- type: custom:simple-weather-card\n  entity: weather.smhi\n  name: at home\n  backdrop:\n    day: \"var(--primary-color)\"\n    night: \"#40445a\"\n```\n\n#### Customize weather information example\n\n![Customize weather information example](https://user-images.githubusercontent.com/457678/72923722-ead8aa00-3d4f-11ea-956f-05b706e00827.png)\n\n```yaml\n- type: custom:simple-weather-card\n  entity: weather.smhi\n  primary_info:\n    - wind_bearing\n    - humidity\n  secondary_info:\n    - precipitation\n    - precipitation_probability\n```\n\n#### Custom sensors example\n\n```yaml\n- type: custom:simple-weather-card\n  entity: weather.smhi\n  custom:\n    - temp: sensor.home_temp\n    - high: sensor.home_high_temp\n    - low: sensor.home_low_temp\n```\n\n## Problems?\n\nMake sure you have `javascript_version: latest` set in your `configuration.yaml` under `frontend:`.\n\nMake sure you got the latest version of `simple-weather-card-bundle.js`.\n\nIf you have issues after updating the card, try clearing the browser cache manually.\n\nIf you are getting \"Custom element doesn't exist: simple-weather-card\", or are running an older browser try replacing `type: module` with `type: js` in the resource reference in `ui-lovelace.yaml` or in the raw config editor.\n\n## License\n\nThis project is under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalkih%2Fsimple-weather-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkalkih%2Fsimple-weather-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalkih%2Fsimple-weather-card/lists"}