add moon phase, add info.md for HACS, update screenshot

README.md

@@ -1,7 +1,7 @@
 # Sun Card
 
 Home Assistant Lovelace card to present `sun.sun` entity. Requires `sensor.time_utc` sensor from `date_time` component as well to work properly.
-It provides visual information about current sun elevation throughout the day, time of sunrise/sunset. Available data depends on used Sun component: pre-existing one from Home Assistant (Basic), extended available [here](https://github.com/pnbruckner/homeassistant-config/blob/master/docs/sun.md) (Extended) or leverage Sun2 extension available [here](https://github.com/pnbruckner/ha-sun2).
+It provides visual information about current sun elevation throughout the day, time of sunrise/sunset. Available data depends on used Sun component: pre-existing one from Home Assistant (Basic), extended available [here](https://github.com/pnbruckner/homeassistant-config/blob/master/docs/sun.md) (Extended) or leverage Sun2 extension available [here](https://github.com/pnbruckner/ha-sun2). Additionally it can depict current moon phase using `sensor.moon` from `moon` platform.
 
 [![GitHub Release][releases-shield]][releases]
 [![License MIT][license-shield]](LICENSE.md)
@@ -20,6 +20,8 @@ It provides visual information about current sun elevation throughout the day, t
 > * for `Extended sun` component: `elevation`, `max_elevation`, `daylight`, `sunrise`, `sunset`
 > * for `Sun2` component: `sunrise`, `sunset`, `solar_noon`, `max_elevation`, `daylight`
 
+The card depicts current moon phase if you have `sensor.moon` available in your _configuration.yaml_.
+
 ## Options
 
 | Name | Type | Requirement | Default value | Description |
@@ -66,7 +68,7 @@ resources:
 
 ### Manual Installation (not recommended)
 
-1. Download the [sun-card](https://github.com/mishaaq/sun-card/releases/download/v3.2/sun-card.js)
+1. Download the [sun-card](https://github.com/mishaaq/sun-card/releases/download/v3.3/sun-card.js)
 2. Place the file in your `config/www` folder
 3. Include the card code in your `ui-lovelace-card.yaml`
 

info.md

@@ -0,0 +1,34 @@
+# Sun Card
+
+Home Assistant Lovelace card to present `sun.sun` entity. Requires `sensor.time_utc` sensor from `date_time` component as well to work properly.
+It provides visual information about current sun elevation throughout the day, time of sunrise/sunset. Available data depends on used Sun component: pre-existing one from Home Assistant (Basic), extended available [here](https://github.com/pnbruckner/homeassistant-config/blob/master/docs/sun.md) (Extended) or leverage Sun2 extension available [here](https://github.com/pnbruckner/ha-sun2). Additionally it can depict current moon phase.
+
+## Capabilities
+
+| Used Sun component | Current sun elevation | Sunrise | Sunset | Noon | Daylight duration | Time to sunset |
+| ------------------ | --------------------- | ----------- | ----------- | ---- | ----------------- | -------------- |
+| Basic | yes | Only future | Only future | no | no | yes |
+| Extended | yes | yes | yes | no | yes | yes |
+| Sun2 | yes | yes | yes | yes | yes | yes |
+
+> You have to have mentioned `monitored_conditions` enabled in component:
+> * for `Extended sun` component: `elevation`, `max_elevation`, `daylight`, `sunrise`, `sunset`
+> * for `Sun2` component: `sunrise`, `sunset`, `solar_noon`, `max_elevation`, `daylight`
+
+The card depicts current moon phase if you have `sensor.moon` available in your _configuration.yaml_.
+
+## Options
+
+| Name | Type | Requirement | Default value | Description |
+| -------- | ------- | ------------ | ----------------- | -------------------------------------------------------- |
+| type | string | **Required** | `custom:sun-card` | Type of card, non-modifiable |
+| name | string | **Optional** | Language specific | Card name visible in header, no header when empty value |
+| meridiem | boolean | **Optional** | Language specific | Clock format: 12h or 24h |
+
+## Example
+
+<img src="https://raw.githubusercontent.com/mishaaq/sun-card/master/images/showcase.png" width="450px"/>
+
+## Additional info
+
+Check out the README file in repository for templating possibilities.

package.json

@@ -1,6 +1,6 @@
 {
  "name": "sun-card",
- "version": "3.2.0",
+ "version": "3.3.0",
  "description": "Lovelace sun card",
  "keywords": [
  "home-assistant",

src/card.ts

@@ -27,6 +27,7 @@ import {
  TimeEntity,
  SunEntity,
  createSunEntity,
+ MoonEntity,
 } from './types';
 
 import './editor';
@@ -80,7 +81,7 @@ class SunCard extends LitElement {
 
  readonly svgViewBoxH: number = 432; // viewBox height in local points
 
- // half of svg viewBox height / (|-zenith| + zenith elevation angle)
+ // half of svg viewBox height / (| -zenith | + zenith elevation angle)
  readonly yScale: number = this.svgViewBoxH / 180;
 
  readonly humanizer: HumanizeDuration = new HumanizeDuration(new HumanizeDurationLanguage());
@@ -127,6 +128,7 @@ class SunCard extends LitElement {
  const { localize, states } = this.hass;
 
  const sunStateObj: HassEntity = states['sun.sun'];
+ const moonStateObj: HassEntity = states['sensor.moon'];
  const timeStateObj: HassEntity = states['sensor.time_utc'];
 
  if (!sunStateObj || !timeStateObj) {
@@ -139,6 +141,7 @@ class SunCard extends LitElement {
 
  const currentTimeEntity: TimeEntity = new TimeEntity(timeStateObj);
  const sunEntity: SunEntity = createSunEntity(states, currentTimeEntity);
+ const moonEntity: MoonEntity | null = moonStateObj ? new MoonEntity(moonStateObj) : null;
 
  const renderSun = (): SVGTemplateResult => {
  const sunPos: Coords = this.metric(currentTimeEntity.time, sunEntity.elevation);
@@ -203,6 +206,15 @@ class SunCard extends LitElement {
  `;
  };
 
+ const renderMoon = (): TemplateResult => {
+ if (!moonEntity) {
+ return html``;
+ }
+ return html`
+ <ha-icon icon=${moonEntity.icon}></ha-icon>
+ `;
+ };
+
  const header = this._config.name === undefined
  ? sunEntity.friendly_name || localize('domain.sun')
  : this._config.name;
@@ -221,6 +233,9 @@ class SunCard extends LitElement {
  ${renderNoon()}
  ${renderSun()}
  </svg>
+ <div class="moon-icon">
+ ${renderMoon()}
+ </div>
  </div>
  <div class="info">
  ${renderTimeToSunset()}
@@ -252,6 +267,12 @@ class SunCard extends LitElement {
  rgba(171, 220, 40, 0%)));
  display: flex;
  flex-flow: column nowrap;
+ position: relative;
+ }
+ .moon-icon {
+ position: absolute;
+ right: 5px;
+ opacity: 0.5;
  }
  svg {
  width: 100%;
@@ -295,7 +316,7 @@ class SunCard extends LitElement {
  flex-flow: row nowrap;
  padding: 16px;
  }
- .info > * {
+ .info > div:not(:last-child) {
  margin-right: 30px;
  }
  .info span {

src/types.ts

@@ -35,6 +35,22 @@ export class TimeEntity {
  }
 }
 
+export class MoonEntity {
+ private _entity: HassEntity;
+
+ get phase(): string {
+ return this._entity.state;
+ }
+
+ get icon(): string {
+ return this._entity.attributes.icon || '';
+ }
+
+ constructor(haEntity: HassEntity) {
+ this._entity = haEntity;
+ }
+}
+
 export interface SunEntity {
  // get friendly name as defined on hass configuration
  friendly_name?: string;

tracker.json

@@ -1,7 +1,7 @@
 {
  "sun-card": {
- "version": "3.1",
- "remote_location": "https://github.com/mishaaq/sun-card/releases/download/v3.1/sun-card.js",
+ "version": "3.3",
+ "remote_location": "https://github.com/mishaaq/sun-card/releases/download/v3.3/sun-card.js",
  "visit_repo": "https://github.com/mishaaq/sun-card",
  "changelog": "https://github.com/mishaaq/sun-card/releases/latest"
  }