9 |
10 | The percentages that are calculated and graphed are to be read like 100% is perfect, 0% is bad. This also means, that a percentage of e.g. 87% for cloud does stand for a sky being nearly cloud free ;-).
11 |
12 | Thanks for all picking this card up.
13 |
14 | PS: will redo the screenshot with better conditions...
15 |
16 | ## Installation
17 |
18 | ### HACS installation
19 |
20 | This Integration is part of the default HACS store, so go to the HACS page and search for *AstroWeather* within the Lovelace category.
21 |
22 | ### Manual Installation
23 |
24 | To add the AstroWeather card to your installation, download the `astroweather-card.js` from the [release](https://raw.githubusercontent.com/mawinkler/astroweather-card/main/dist/astroweather-card.js)-page and copy it to `/config/www/custom-lovelace/astroweather-card/`.
25 |
26 | Add the card to your dashboard by choosing `[Edit Dashboard]` and then `[Manage Resources]`.
27 |
28 | Use `/local/custom-lovelace/astroweather-card/astroweather-card.js` for the URL parameter and set the resource type to `JavaScript Module`.
29 |
30 | Alternatively, add the following to resources in your lovelace config:
31 |
32 | ```yaml
33 | resources:
34 | - url: /local/custom-lovelace/astroweather-card/astroweather-card.js
35 | type: module
36 | ```
37 |
38 | ## Configuration
39 |
40 | And add a card with type `custom:astroweather-card`:
41 |
42 | ```yaml
43 | type: custom:astroweather-card
44 | entity: weather.astroweather_backyard
45 | details: true
46 | current: true
47 | deepskydetails: true
48 | forecast: false
49 | graph: true
50 | graph_condition: true
51 | graph_cloudless: true
52 | graph_seeing: false
53 | graph_transparency: false
54 | graph_calm: true
55 | graph_li: false
56 | graph_precip: true
57 | graph_fog: true
58 | number_of_forecasts: "48"
59 | line_color_condition: "#f07178"
60 | line_color_condition_night: "#eeffff"
61 | line_color_cloudless: "#c3e88d"
62 | line_color_seeing: "#ffcb6b"
63 | line_color_transparency: "#82aaff"
64 | line_color_calm: "#ff5370"
65 | line_color_li: "#89ddff"
66 | line_color_precip: "#82aaff"
67 | line_color_fog: "#dde8ff"
68 | ```
69 |
70 | Optionally, you can define custom tap actions to happen when clicking on the card. Below are some examples:
71 |
72 | ```yaml
73 | tap_action:
74 | action: more-info
75 | ```
76 |
77 | ```yaml
78 | # Assumes an input boolean to put your house into stargazer mode
79 | tap_action:
80 | action: call-service
81 | service: input_boolean.toggle
82 | data:
83 | entity_id: input_boolean.stargazer_mode
84 | ```
85 |
86 | ```yaml
87 | # Assumes you have a view called astroweather
88 | tap_action:
89 | action: navigate
90 | navigation_path: /lovelace/astroweather
91 | ```
92 |
93 | ```yaml
94 | # Navigates you to Meteoblue seeing forecast
95 | tap_action:
96 | action: url
97 | url_path: https://www.meteoblue.com/en/weather/outdoorsports/seeing
98 | ```
99 |
100 | ```yaml
101 | # Assumes you have UpTonight and browser_mod
102 | tap_action:
103 | action: fire-dom-event
104 | browser_mod:
105 | service: browser_mod.popup
106 | data:
107 | title: UpTonight
108 | size: wide
109 | content:
110 | type: picture-entity
111 | entity: image.uptonight
112 | ```
113 |
114 | You can choose wich elements of the weather card you want to show:
115 |
116 | - The title and current view conditions.
117 | - The details about the current weather.
118 | - The deep sky forecast for today and tomorrow in plain text.
119 | - The hourly forecast for clouds, seeing, transparency, view conditions and temperature.
120 | - The graphical forecast. You can configure which conditions to display and define the line colors.
121 |
122 | If you enable either the forecast or the graph you can define the number of future forecasts in hourly steps. It is best to only choose the forecast table or the graphical forcast since the graphical variant can display 48hs easily which is not possible with the table. You might create a dedicated card for the table view, simply clone the card and enable forecast only.
123 |
124 | ```yaml
125 | type: custom:astroweather-card
126 | entity: weather.astroweather_LONGITUDE_LATITUDE
127 | name: Backyard
128 | current: false
129 | details: false
130 | deepskydetails: false
131 | forecast: true
132 | graph: false
133 | number_of_forecasts: '8'
134 | ```
135 |
136 | The card owns a card editor which pops up if you click on `[Edit]` which being in edit mode of your view.
137 |
138 | ## TS Migration
139 |
140 | ```sh
141 | npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs tslib custom-card-helpers
142 |
143 | npm install
144 | export PATH=$PWD/node_modules/.bin:$PATH
145 |
146 | npm run build
147 | ```
148 |
149 | ## Development Instructions
150 |
151 | To do development work on this card (either for your personal use, or to contribute via pull requests), follow these steps:
152 |
153 | 1. Create a fork of this repository on GitHub
154 | 2. Download and setup the repository on your local machine, by running:
155 | ```
156 | git clone https://github.com/mawinkler/astroweather-card
157 | cd astroweather-card
158 | git remote add upstream https://github.com/mawinkler/astroweather-card
159 | ```
160 | 3. Once the repository is setup, install the npm dependencies with `npm install`
161 | 4. Make local edits as needed to the grocy chores card.
162 | 5. To test changes, run `npm run build`. This will create a compiled version of the card in `dist/astroweather-card.js` and `dist/astroweather-card-editor.js`.
163 | 6. Copy the compiled card in the `dist/` folder to your Home Assistant installation and update the dashboard resources to point to it. Make sure the cache is cleared each time you try updating with new changes.
164 | 7. Push the changes back to your GitHub origin, and open a pull request if you want to contribute them to the main repository.
165 |
--------------------------------------------------------------------------------
/src/astroweather-card-editor.ts:
--------------------------------------------------------------------------------
1 | import { LitElement, html, TemplateResult, css } from "lit";
2 | import {
3 | HomeAssistant,
4 | LovelaceCardEditor,
5 | LovelaceCardConfig,
6 | fireEvent,
7 | } from "custom-card-helpers";
8 | import { customElement, property, state } from "lit/decorators.js";
9 |
10 | interface CardConfig extends LovelaceCardConfig {
11 | entity: string;
12 | [key: string]: any;
13 | }
14 |
15 | @customElement("astroweather-card-editor")
16 | export class AstroWeatherCardEditor
17 | extends LitElement
18 | implements LovelaceCardEditor
19 | {
20 | @property({ attribute: false }) public hass?: HomeAssistant;
21 |
22 | @state() private _hass!: HomeAssistant;
23 | @state() private _config!: CardConfig;
24 | @state() private _helpers?: any;
25 | private _glanceCard?: any;
26 |
27 | private _initialized = false;
28 |
29 | public setConfig(config: CardConfig): void {
30 | this._config = { ...config };
31 | this.loadCardHelpers();
32 | this.render();
33 | }
34 |
35 | protected shouldUpdate(): boolean {
36 | if (!this._initialized) {
37 | this._initialize();
38 | }
39 | return true;
40 | }
41 |
42 | private _initialize(): void {
43 | if (this.hass === undefined) return;
44 | if (this._config === undefined) return;
45 | if (this._helpers === undefined) return;
46 | this._initialized = true;
47 | }
48 |
49 | private async loadCardHelpers(): Promise