aitordb / home-assistant-sun-card

Home assistant sun card based on Google weather design

Home assistant Sun card

Home assistant Sun card based on Google weather design

Preview

Requirements

• This card uses Sun integration so it needs to be enabled

Install

HACS

Home assistant Sun card is available by default on HACS directory. More info here.

Manually

1. Download the home-assistant-sun-card.js file from the latest release available and save it in your configuration/www folder.
2. Go to Configuration > Lovelace dashboard > Resources in Home Assistant and click on Add resource.
   1. Add /local/community/home-assistant-sun-card.js to the URL.
   2. Choose Javascript Module as Resource type.

Set up

Using UI

1. Go to your dashboard, enter in edit mode and click on Add card, you should be able to find Custom: Sun card in the list.
2. Once in the UI editor you can modify the card behavior by adding some of the config that you will find below

Note: If Custom: Sun card doesn't appear you will have to reload cleaning the cache.

Using YAML

1. You just need to add a new card with type: 'custom:sun-card' to your cards list and any of the config that you will find below if you want to customize more your card.

Note: If you get an error similar to this Custom element doesn't exist you will have to reload cleaning the cache.

Config

Name	Accepted values	Description	Default
darkMode	boolean	Changes card colors to dark or light	Home assistant dark mode state
language	string1	Changes card language	Home assistant language or english if not supported
showAzimuth	boolean	Displays azimuth in the footer	false
showElevation	boolean	Displays elevation in the footer	false
timeFormat	'12h'/'24h'	Displayed time format	Locale based on Home assistant language
title	string	Card title	Doesn't display a title by default

(¹) Supported languages: da, de, en, es, et, fi, fr, hu, it, nl, pl, pt-BR, ru, sl, sv

Known issues

• Home assistant seems to provide next events instead today's one

home-assistant-sun-card's Issues

Manual installation steps clarifications

I tried following the manual installation steps from the README.md, but I'm getting custom:sun-card can't be found. I've got some questions about the installation steps.

I'm using a 'supervised' install, so the HA configuration directory is /usr/share/hassio/homeassistant. I created www and put the latest release of home-assistant-sun-card.js in that directory. So it's full path on the host is

/usr/share/hassio/homeassistant/www/home-assistant-sun-card.js

From README.md

Add /local/community/home-assistant-sun-card.js to the URL

Should community be part of the URL if HACS isn't being used?

By 'Add .. to the URL', do you mean to just add only that to the URL field, or do I need to put the base URL for hass and /local/... in the URL field for the resource?

Is a Home Assistant restart required after adding the custom component?

Should I be able to access http://<hass-hostname>:8123/local/home-assistant-sun-card.js via the browser? I'm getting a 404 for that. (If I understand things correctly, config/www on the host should map to baseurl/local.)

Card Conflict with Another

I love this card but realized it conflicted with another sun card (https://github.com/mishaaq/sun-card) using the same name. Can this one be edited to change the card name from Sun Card or sun-card to say ha-sun-card? Is that possible?

24 hour clock is wrong between 00 and 01

Should be 00:26

darkMode option with templating does not work correctly

Version: v0.1.4

My Home Assistant backend-selected theme changes based on sun entity. Automation for that uses this blueprint.

This is my sun card configuration:

type: 'custom:sun-card'
darkMode: '{{ is_state("sun.sun", "below_horizon") }}'

I tried converting it to string too (see below).

Issue:
The card does not change appearance correctly. It is constantly rendered as if darkMode was set to True.

Templating outputs:

{{ is_state("sun.sun", "below_horizon") }}                         # False

{{ is_state("sun.sun", "below_horizon") is boolean }}              # True

{{ is_state("sun.sun", "below_horizon") | string }}                # False

{{ (is_state("sun.sun", "below_horizon") | string) is boolean }}   # False

I tried {{ (states("sun.sun") == "below_horizon") }} too but it gives same results.

---

1. What would the correct/working configuration look like?
2. DIfferent Lovelace cards don't have darkMode option in configuration and they render correctly. Is that because they use themes colour palette for fonts? Why it's not the case with sun-card?

Update docs for contributions

Update README to explain development process and add a contribution guideline

Feature Request: Manually set sensors to be used

I'd quite like to use this card with the sun2 HACS Integration but for that, this card needs to offer the ability to select the sensors to use.

It would also be good to be able to include other custom information (such as day length) as provided by the Sun2 integration.

Also, that integration solves the issue of the 'sun' integration only returning 'next' instances of Dawn, Dusk etc.

I note there is a second 'sun-card' around that does allow this (and includes the moon).
https://github.com/mishaaq/sun-card

I do prefer this style of card though.

Add HACS/manual info about card name

I installed this card through HACS, but initially could not get the card to show up. I assumed that the card would be called like:

cards:
  - type: custom:home-assistant-sun-card

this kept giving me a

Custom element doesn't exist: home-assistant-sun-card.
type: 'custom:home-assistant-sun-card'

error. After going into the home-assistant-sun-card.js file, I was able to find out that the card is called by using:

cards:
  - type: custom:sun-card

Can you update the README to show people the name they need to use if they're adding this card through YAML and not the default home assistant UI editor? Thanks.

Set location

Living in 2 different places it would be great having the possibility to set a different location that overrides the home assistant one

Catalan translation

{
  "Azimuth": "Azimut",
  "Dawn": "Alba",
  "Dusk": "Capvespre",
  "Elevation": "Elevació",
  "Noon": "Migdia solar",
  "Sunrise": "Sortida del sol",
  "Sunset": "Posta del sol",
  "errors": {
    "SunIntegrationNotFound": "No s'ha trobat la integració Sun"
  }
}

language code => ca

For doubts check https://ca.wiktionary.org/wiki/capvespre

Italian translation

Hi, 'Sunrise' should be translated in italian into 'Levata' and only 'Dawn' must be translated into 'Alba'. If you look at the french, you have the right translation. Now we have, for italian, the same term for 'Sunrise' and 'Dawn' i.e.: 'Alba' and it's wrong.
Thank you

Czech translation (CZ-cs)

the language code is "cs"

var Azimuth = "Azimut";
var Dawn = "Svítání";
var Dusk = "Soumrak";
var Elevation = "Výška";
var Noon = "Zenit";
var Sunrise = "Východ";
var Sunset = "Západ";
var
errors = {

SunIntegrationNotFound: "Sun integration not found"

};

p.s.: Thank you for this lovely card!!!

Fix styles

Fix styles to use Home assistant theme where possible and improve how it looks in general.
More context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyelt6z

Add russian lang

Hey, thanks for greatfully card.
Can you please add russian (ru) language in next update?
Thanks

{
"Azimuth": "Азимут",
"Dawn": "Рассвет",
"Dusk": "Сумрак",
"Elevation": "Высота",
"Noon": "Полдень",
"Sunrise": "Восход",
"Sunset": "Закат"
}

Add total hours of sun and remaining sun hours

Add to the card 2 new elements to display the total hours of sun in the day and the remaining hours.
More context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyh7yrs

Times are incorrect by 1 hour

I am on EST and have confirmed that my operating system date and time is correct and in the correct time zone (EST). In Home Assistant configuration.yaml, I also have the correct time zone specified.

When I look at sun.sun in Developer Tools, I see:

next_dawn: 2022-01-26T11:49:05.209042+00:00
next_dusk: 2022-01-26T23:32:27.668985+00:00
next_midnight: 2022-01-26T05:40:39+00:00
next_noon: 2022-01-26T17:40:29+00:00
next_rising: 2022-01-26T12:13:44.614876+00:00
next_setting: 2022-01-26T23:07:48.178739+00:00
elevation: -26.91
azimuth: 260.96
rising: false
friendly_name: Sun

Since I am on EST, 5 hours behind UTC, I'd expect sun-card to show 7:13am and 6:07pm respectively for the next sunrise / sunset. Instead, I see:

All the times are 6 hours behind the UTC times, as if daylight savings time is in effect. With some other code using a value_template of {{ as_timestamp(states.sun.sun.attributes.next_rising) | timestamp_custom(' %I:%M %p') | replace(" 0", "") }}, I get the correct results:

Add tests

Add tests to ensure that the content displayed and the card functionalities are correct

Can you please add Slovenian language (int. code: sl)

{
"Azimuth": "Azimut",
"Dawn": "Zora",
"Dusk": "Mrak",
"Elevation": "Višina",
"Noon": "Sončno poldne",
"Sunrise": "Sončni vzhod",
"Sunset": "Sončni zahod"
}

Add option to set times to 12-Hour format.

Currently the card shows the time in 24-Hour format. It would be cool if there was an option to set it to 12-Hour format.

Dutch translation for Culmination of the Sun

Hi,

You mentioned "Zonne-middag" but it’s better to say "Hoogstepunt" because that value shows the Culmination of the Sun. :)

Chinese-Tradition (zh-tw) translation

{
"Azimuth": "方位",
"Dawn": "黎明",
"Dusk": "黃昏",
"Elevation": "仰角",
"Noon": "日正當中",
"Sunrise": "日昇",
"Sunset": "日落",
"errors": {
"SunIntegrationNotFound": "Sun integration not found"
}
}

Sunset after midnight

Sun disappears from the graph if sunset is after midnight.

Error when try to install via HACS

When I try to install this card via HACS, I'm getting reload notification at first, but if I look closer after reloading, I can see "not loaded" status of card

Server log says:
No content to download
and
Received invalid command: lovelace/resources/create
I tried to install all of the versions, reboot before install, install and then reboot etc.

Add extra functionalities

Add support for new functionalities and potentially different integrations instead sun.sun.

Context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyfm49g

wrong time of sunset and sunrise on one device

I use Home Assistant Lovelace on 4 differerent devices. On my PC Sun Card display times od sun events correctly, on the cell phones also, but there is problem with fourth device - my tablet mounted on wall where lovelace is running on Chrome browser. If real time of sunset is for example 17:10, this device displays 16:10. And all the times (sunrise, dusk, dawn, solar noon) are incorrect the same way - minus 1 hour (during summer season it is minus 2 hours). Timezone and system time of my tablet is set correctly. Is there any way to solve this? Thank you!

Not able to install on clean HA

I'm not able to install the card via HACS of manually. The card doesn't show when searching for custom:sun or sun. Cleaning cache doesn't help, nor does opening it freshly in another browser. When I try to add it anyway it says 'no card type configured'.

Suggestion: Length of day and remaining daylight

Hi, I use your card every day and it has become essential for me in HA, love it!

Is it possible to implement "length of day" and "remaining daylight" below the graph?

Like this:
https://ibb.co/m9Wy5MF

Thanks!

Wrong time for sunsire

If i look online tools, the sunrise is 8:21 for me (north germany)
But the card says 7:24

The Drawn in the card says 6:46 but when i look in online tools it says 7:45.

So it looks around 1 hour to early... why? Can i set somewhere the location or something so it takes correct?

Title theming

Could you please consider using the standard Home Assistant title element(s) so I don't have to create a new card-mod card class just to theme the title in your card to match everything else?

Make card colors configurable

Card colors, specially the graph ones, could be configurable so it can be adapted to each dashboard theme

Context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyeip4x
Context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyf2qdq

German Translations

var Azimuth = "Azimut";
var Dawn = "Morgendämmerung";
var Dusk = "Abenddämmerung";
var Elevation = "Elevation";
var Noon = "Sonnen Mittag";
var Sunrise = "Sonnenaufgang";
var Sunset = "Sonnenuntergang";
var de = {
Azimuth: Azimuth,
Dawn: Dawn,
Dusk: Dusk,
Elevation: Elevation,
Noon: Noon,
Sunrise: Sunrise,
Sunset: Sunset
};

Please merge our changes from develop branch

Please merge our changes from develop branch :)

Suggestion re: known issue of tomorrow's sunrise

Regarding the known issue of the card displaying the next events rather than the previous, the card could be adapted to use the Sun2 integration that always has these values available.

https://github.com/pnbruckner/ha-sun2

Reload cleaning the cache?

What does "reload cleaning the cache" mean? I have restarted Home Assitant several times and still cannot find the card.

How to change language

Hi·!
I want to change the interface language, what should I do

thank!

Changing language to 'fi' breaks the card

Hi,

thanks for the quick release. I tried setting the card language to 'fi', the translations are displayed correctly but the rest of the content disappears:

If there is an easy way to look at this locally, I can try fixing it myself.

System Configuration
Home Assistant Core: core-2021.5.4
home-assistant-sun-card: v0.1.2

Letters colors with black even changing darkmode status.

Im changing the darkmode to true/false, but the color of the letters still black, becaming unreadable.

Show friendly error when there is no sun.sun element

This card works awesome when there is default_config: (https://www.home-assistant.io/integrations/default_config/) in configuration.yaml

But when there is no default config and there is no sun: integration ( https://www.home-assistant.io/integrations/sun/ ) the card is shown this way:

I think that the card should show error text to make it clear that there must be sun.sun for this card to work.

Norwegian translation

{
"Azimuth": "Asimut",
"Dawn": "Daggry",
"Dusk": "Skumring",
"Elevation": "Høyde",
"Noon": "Middag",
"Sunrise": "Soloppgang",
"Sunset": "Solnedgang",
"errors": {
"SunIntegrationNotFound": "Sol integrasjon ikke funnet"
}
}

:)

Add UI configuration

Currently the card needs to be configured in yaml. It would be great to be able to configure it in the UI.

Sunset time is showing Dawn time

In the upper right corner, it's showing the dawn time instead of the sunset time as you would expect.
Looks like it's just a typo on line 32 of the card contents file.

Values are not displayed

The values are displayed on the PC Win10 chrome browser, but not on the android tablet with the WallPanel application.

Visualize Azimuth, Elevation and day length.

Very nice card. Good job!

It is not clear to me if the card actually changes the visualization of the elevation and/or length of the day. But it could be pretty nice if it was able to.
And it would also be cool if the azimuth could somehow be visualized, since I have absolutely no intuition about what direction any particular azimuth value means. I'm not sure how that could be done in a simple way that does not disturb the simple design of the card as it is now. I have been using this site a couple of times to get a sense of the azimuth: http://www.suninfo.dk/solhojde/solhojde.php?lang=en
Maybe there is some inspiration to get from that.

Add Italian

Provided translations:

{
  "Azimuth": "Azimuth",
  "Dawn": "Alba",
  "Dusk": "Crepuscolo",
  "Elevation": "Elevazione",
  "Noon": "Mezzogiorno solare",
  "Sunrise": "Alba",
  "Sunset": "Tramonto"
}

some configuration options not working

I tried configuring the card and it seems like only some of the configuration options are working. I wanted to use 24 hour time, and show the azimuth and elevation. However, only the title and language options have any affect on the card when I refresh/clear cache.

My config is:

      - type: 'custom:sun-card'
        title: Sunrise & Sunset
        language: en
        fields:
          - azimuth: true
          - elevation: true
        use12hourClock: false

The title shows up and changes, the language changes if I use another language. The times are still in 12 hour format and azimuth and elevation do not show. I even tried the following config and there was no change to the display:

      - type: 'custom:sun-card'
        use12hourClock: false

There are no errors in the logs.

Improve languages on README

The list of languages could be improved to include the name of the language (in English?), maybe we could consider also moving the list to a separate markdown file if it's too big

Context: #69

Add Dutch

Czech translation

Please, add czech translation.

{
"Azimuth": "Azimut",
"Dawn": "Svítání",
"Dusk": "Soumrak",
"Elevation": "Nadmořská výška",
"Noon": "Pravé poledne",
"Sunrise": "Východ",
"Sunset": "Západ"
}

Thanks

Allow to hide each text element

Keeping the current visibility as default, we could allow each text element to be hidden.

Context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyeip4x
Context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyepgsc

Bulgarian translation

{
  "Azimuth": "Азимут",
  "Dawn": "Разсъмване",
  "Dusk": "Здрач",
  "Elevation": "Издигане",
  "Noon": "Пладне",
  "Sunrise": "Изгрев",
  "Sunset": "Залез",
  "errors": {
    "SunIntegrationNotFound": "Слънчевата интеграция не е намерена"
  }
}

Proposal: Show moon

It would be great to the the moon as well.