Hello friends.

In another issue we agreed to release a "symbolic" version 1.0. Let's agree on the steps forward:

• #42
• #47
• #45
• Currently blocking: hacs/default#1808
• #43
• #33
• Release version 1.0 🎉
• Major next development step: #40

Anything else in terms of bugs or improvement wishes before we are proud to release v1.0 ?

Original PR by @Small-tailqwq AitorDB#139

I'm getting the following error when adding, any ideas?

<Integration rejuvenate/lovelace-horizon-card> Repository structure for v0.9.0 is not compliant

I've done a look on github, google etc but canty see a resolution.

Deleted

Version 1.0.0 does not refresh in chromium browser (FullPageOS). In Safari everything works, including the color of the moon

Hi!
Not sure if it is an issue, perhaps a misconfiguration or misunderstanding on my side. Please advise on these two cases.

First - I can see that the crescent on the graph rotates following the Sun. With some specific terms, like when having set manually
now: 2023-07-21T12:52:30+0000
the Sun and Moon are on the same elevation. I think, the crescent should be directed toward 0 degrees (if we consider co-ordinate system). Meanwhile, it is above zero, like on this picture:

Is it related to the logarithmic scale of the Moon elevation perhaps?

Second - With moon_phase_rotation unset, the icon should rotate to match the approximate view for the configured latitude. I did not enforce that setting. However, in my case, the icon does not change at all. Please compare the former picture to the following one obtained for
now: 2023-07-21T19:52:30+0000

How is it possible to get the blue icon rotated?

Best regards,
Jurek

Known requested tweaks that can be easily done through card-mod can be documented in the README:

• Making the field names Title Cased Like This
• Changing the font size
• Changing the Moon shadow color
• Changing the Moon phase color

In order to calculate the current sun position we rely on the event times provided by Home Assistant. These times are always the next time a given event occurs, e.g. "next_noon" will provide the time of today's noon only before it occurs, then it will report tomorrow's noon. The code tries to work around that limitation by normalizing all event times as if they all occur on the same day but uses UTC for normalization which may lead to errors - the further the local time zone is from UTC, the larger the error.

This was originally addressed by AitorDB#152 but then I dug deeper and discovered there are more issues with high latitude locations that experience times of the year when the sun doesn't rise or set. For those locations, Home Assistant reports the next sunrise even if it occurs many days after today. The only events that occur daily are solar noon and solar midnight (unused by the project), as they describe the highest and the lowest elevation of the sun regardless of whether it's above or below the horizon.

I'll open a PR after #4 is merged.

My current sun.sun state is:

next_dawn: 2023-09-27T04:20:06.460118+00:00
next_dusk: 2023-09-26T17:27:41.138746+00:00
next_midnight: 2023-09-26T22:53:18+00:00
next_noon: 2023-09-27T10:53:27+00:00
next_rising: 2023-09-27T04:53:21.657868+00:00
next_setting: 2023-09-26T16:54:31.506323+00:00
elevation: 37.64
azimuth: 195.27
rising: false
friendly_name: Sun

I am two hours ahead of UTC, so the sunset in the card should be at 18:54, but instead it is 18:58. The sunrise time is also two minutes out but this is presumably due to the fact that tomorrow's sunrise will be later than today. Maybe there is some additional adjustment that the card does, but, in any case, we are past the autumnal equinox, so the day should be less than 12 hours.

Here is my card's config:

type: custom:horizon-card
fields:
  elevation: true
  azimuth: true
  moonrise: true
  moonset: true

The latest version is the coolest card ever! Thanks for your effort.

Please consider making the white color black for the part of the moon in the earths shadow. Or a parameter so the user can select white/black/color. Alternatively a black border line for the visible moon.

The moon icon under Azimuth and Elevation, should they have the same icon as the moons form?

Hi,
I'm French so contact to change translation "midi solaire" to "Zénith" for best translation.

Thx and good job.

As the name suggests...

• I'm located in the southern hemisphere
• This issue only occurs when southern_flip=false.
• The moon textual information displayed in the card is correct.
• Correct location has been configured in HA settings

Screenshots

Left card: southern flip disabled. Right card: southern flip enabled

Card Configs

Left Card (incorrect display)

type: custom:horizon-card
moon: true
refresh_period: 60
fields:
  sunrise: true
  sunset: true
  dawn: true
  noon: true
  dusk: true
  azimuth: true
  sun_azimuth: true
  moon_azimuth: true
  elevation: false
  sun_elevation: true
  moon_elevation: true
  moonrise: true
  moonset: true
  moon_phase: true
southern_flip: false

Right Card (Correct Display)

type: custom:horizon-card
moon: true
refresh_period: 60
fields:
  sunrise: true
  sunset: true
  dawn: true
  noon: true
  dusk: true
  azimuth: true
  sun_azimuth: true
  moon_azimuth: true
  elevation: false
  sun_elevation: true
  moon_elevation: true
  moonrise: true
  moonset: true
  moon_phase: true
southern_flip: true

It would be great to add an Icon for this card within HACS:

Hi,
Already, a big thank you for taking over the sun-card project.

I use sun-card and I customized the font with card-mod to be able to display well with 2 cards side by side.

code:

              - type: custom:sun-card
                showAzimuth: true
                showElevation: true
                card_mod:
                  style: |
                    .sun-card-footer .sun-card-text-subtitle {
                        font-size: 0.91rem !important;
                        color: var(--primary-text-color) !important;
                    }
                    .sun-card-header .sun-card-text-subtitle {
                        font-size: 0.91rem  !important;
                        color: var(--primary-text-color) !important;
                    }
                    .sun-card-header .sun-card-text-time {
                        font-size: 0.8rem  !important;
                        color: var(--primary-text-color) !important;
                    }
                    .sun-card-footer .sun-card-text-time {
                        font-size: 0.8rem  !important;
                        color: var(--primary-text-color) !important;
                    }
                    ha-card > div > div.sun-card-body {
                      padding-top: 0;
                    }
                    ha-card > div > div.sun-card-footer > div:nth-child(1) {
                      padding-top: 0;
                    }
                    ha-card > div > div.sun-card-footer > div:nth-child(2) {
                      padding-top: 0.5rem;
                    }               

with Horizon-card by default:

I want to do the same with horizon-card, but it's impossible. When I modify the code with the editor it works and when I save it comes back to the default values.

code:

type: custom:horizon-card
fields:
  azimuth: true
  dawn: true
  dusk: true
  elevation: true
  noon: true
  sunrise: true
  sunset: true
card_mod:
  style: |
    ha-card > div > div.horizon-card-header > div:nth-child(1) >
    span.horizon-card-field-name {
      font-size: 1rem !important;
    }
    ha-card > div > div.horizon-card-header > div:nth-child(2) >
    span.horizon-card-field-name {
      font-size: 1rem !important;
    }

after save:

Can you make the modifications possible with card-mod or do you have a workaround?

Hi,

I was just wondering if there was any change that could be done to better layout the card on a small screen such as a cell phone?

I have a two-column section that your card is in, and on cell phones, it doesn't rearrange to fill the section like other cards (weather) next to it does. Maybe we could have the "Solar Noon" section appear on its own line in that scenario, so the three values (dawn, solar noon, dusk) appear over two rows which would extent it lower to fill the blank space, and declutter the text a little bit. Not sure what that would involve...

Here's an example of how it appears, and what I'd like to see improved, if possible.

Thanks for all the work...

The screenshots in the README were inherited from the original project and even though they are a close to the current look they don't reflect the latest changes in v1.0.0.

24h format not working. defaults to 12h system even when other HAOS is 24h

I updated the card through HACS. I added the new config options to enable moon support and removed the old option for 24 hour time. The card does not show the moon info and it reverted back to using 12 hour time. I redownloaded it again, I cleared cache and logged back in and even tried another device and it still shows the old card and none of the moon options.

My v0.9.1 config:

      - type: custom:horizon-card
        fields:
          azimuth: true
          elevation: true
        use12hourClock: false

My v1.0.0 config:

      - type: custom:horizon-card
        moon: true
        fields:
          azimuth: true
          elevation: true
          moonrise: true
          moonset: true
          moon_phase: true
        time_format: 24

no matter how many times i refresh or clear cache, my card still looks like this:

The original repository has a main branch and a develop branch with a few good additions.

I suggest to ff-merge develop back into main, either immediately or after it was tested. Anyhow, all PRs should be created against develop.

Since this repo is a fork of the original project and seen as such by github, when you open a new pull request the default base repository is the original archived project. Users have to remember to select this repo every time. The problem is described in detail here: community/community#11729

The solution seems to be to request the fork to be detached: community/community#11729 (comment). @ThomDietrich, could you look into this?

The original sun card respected my profile settings for 24h clock with English locale. Regardless if I set 12/24h clock in the profile settings or the card, I always get AM/PM. Changing the card to DE locale also changes the clock to 24h.
Am I missing something?

Great initiative to revive this card! I'm eager to switch to this one, but can find it in HACS.

Hey, maybe i´m completly stupid but the description says "Lovelace Horizon Card" is on HACS - but where ? I dont find it ?
Not under SunCard or Lovelace Horizon Card...

Здравствуйте.

Хочу предложить дополнительную функцию в реализации вашего проекта как отображение Северного сияния.
https://www.home-assistant.io/integrations/aurora/

Спасибо за проект.

thanks for rejuvenating! a much appreciated card, that can be given a future, and improvements, looking forward to that!.

Please let me ask.suggest something regarding formatting.
before I had set:

    card_mod:
      style: |
        .sun-card-header span {
         font-size: var(--mdc-typography-body1-font-size) !important;
         padding-bottom: 0px !important;
        }
        .sun-card-text-subtitle {
          color: var(--secondary-text-color) !important;
        }
        .sun-card-footer span {
          font-size: var(--mdc-typography-body1-font-size) !important;
        }
        .sun-card-footer-row {
          padding-top: 0px !important
        }

to get the top formatting (and have all fonts a bit more modest in the frontend)

now I have copied that exact same card-mod to the new card, changed it to horizon-card:

    card_mod:
      style: |
        .horizon-card-header span {
         font-size: var(--mdc-typography-body1-font-size) !important;
         padding-bottom: 0px !important;
        }
        .horizon-card-text-subtitle {
          color: var(--secondary-text-color) !important;
        }
        .horizon-card-footer span {
          font-size: var(--mdc-typography-body1-font-size) !important;
        }
        .horizon-card-footer-row {
          padding-top: 0px !important
        }

but it does not apply, probably the elements are different now.

it would however be a great feature, to have some formatting in the card config itself. Please consider adding that to the features?

also, it would be a nice gesture to us yaml users, to have a basic config with all option in the docs, so we can simply copy and paste. Why not add something like:

  - type: custom:horizon-card
    timeFormat: 24h
    fields:

#       sunrise: true
#       sunset: true
#       dawn: true
#       noon: true
#       dusk: true
      azimuth: true #false
      elevation: true #false

As a final remark for now:
note the text at 'zone-middag' (solar noon) in the original, and 'middag-uur' (midday our) in the new card. The latter seems incorrect, as it indicates the regular time name, and not the solar name.

This should probably be corrected in the translations.

thanks and please keep up the good work!

If you compare the new card (bottom) to the original one (top) when added with standard settings (no additional configuration other than adding the card) there are some visual differences:

• Azimuth and elevation showing as default in the new card.
  This will be seen as a breaking change for users migrating from the previous card, so I think we should set those two keys to be false as default.

• The position of sunset & sunrise has changed.
  I think this was an improvement.

• The font color used to the key names are different.
  I think this is minor and we should wait for feedback from users before spending time on this.

• The font size used to the key names are different.
  It looks a bit packed now. Is this just me feeling this?

With HA 2023.7, it is now possible to choose to show the interface in the server's timezone or in the browser's time (formerly it was displayed in the browser's timezone). This is useful when the user and the HA are not in the same time zone.

This extension seems to ignore that and is always showing with the browser's timezone

Since I have updated to v1.0 of the card I am not able to show the Sunrise, Sunset, Dawn and Dusk information any more. They've been replaced with dashes, as if there is no information on them any more. When I switch the card back to v0.9.1 I do see this information again.

This is how it looks to me, and this is the configuration I use

• Version of the card used v1.0.0
• HA version 2023.7.2

Cache is off by default

Is there any way for me to correct this?

There is no translation concept for the descriptions in the card when moon_phase is set to true. The text always appears in English and word separator is an underscore.

Maybe add the ability to set this up in other languages?

Hi, thanks for your hard work, congrats. I just got a small (but important) Spanish translate request: is it possible to change in the sun set translation "Atardecer", that is similar to afternoon and is not correct, for "Puesta del Sol" that is sun set? It got more sense. Thanks for your effort.

The latitude and longitude settings allow users to override the configured location of their HA. Originally these options were intended mostly for debugging but I realised they can be very useful for configuring a card that shows the Sun/Moon in a different location just because you want so. Unless you also explicitly configure the right time zone via time_zone (or the time zone of HA is close enough to the one of the explicit location) the computation for the location may be slightly wrong. Since the time_zone setting is meant to alter the displayed event times and not affect computation I plan to change the computational time zone to be derived from the longitude of the location (note for nerds: SunCalc, the library used to compute the events, needs to know when it's noon/midnight at the location).

The change should result in more accurate and stable calculations for everyone (i.e., regardless of whether an explicit location is configured) and allow for these use cases:

• I want to show the Sun/Moon events in a remote location and see the event times in that location's time zone (latitude, longitude, time_zone need to be set)
• I want to show the Sun/Moon events in a remote location and see the event times in my local time zone (latitude, longitude need to be set)

Original title: "Add Clock"

@Tontze commented on Dec 4, 2022 in AitorDB#155:

Awesome card ! Would be nice to have current time in this card :)

Hi,
Is config via GUI on your roadmap?
Yaml sucks so much :-/

Thanks and regards
Hyper

I wondered why the sun started going backwards recently, and see that the config setting southern_flip was added, and is on by default in the southern hemisphere. I intend turning it off because the X-axis of the graph represents time, and time is conventionally represented as increasing left-to-right, irrespective of the hemisphere.

Now that's just an opinion, but in any case with southern_flip on the position of the sunrise/sunset etc. times is simply wrong - the sun/moon graphics use a right-to-left X-axis, but the text labels are still using left-to-right.

Based on this view, the sun is travelling right to left, but is closer to sunrise than sunset (local time is around 3pm.) There's even a line from the Sunrise time down to the position of Sunset!

So if the sun (and time) is going to go right to left, then sunrise, both text and graphics, should be to the right of sunset. Similarly with dawn and dusk.

0.9.1
2023.7.0

In Edit mode, the card is not displayed:

type: custom:horizon-card

It is displayed in Editor:

and in "non-Edit" mode:

How to reproduce:

1. Open a view.
2. Select Edit mode.
3. Add a card.
4. Save the card.
5. Refresh the page.
6. The card is not displayed.

I was reading that Polymer is deprecated in HA and support for it is scheduled to be removed. I noticed some references to Polymer in the .js file. Will this impact the Horizon card?

HA 2023.7 introduced support for displaying date/time using the either the server or the browser local time zone (#58 in Horizon card). This works well when the card is not configured to use a explicit time zone (via time_zone: xxx). When an explicit time zone in configured it works only when the HA display time zone is set to "server". When it's set to "local" the card uses the browser time zone instead of the explicitly configured time zone.

The correct behaviour should be to use the explicitly configured time zone regardless of the HA setting.

{
"azimuth": "방위각",
"dawn": "새벽",
"dusk": "저녁",
"elevation": "태양 고도",
"moonrise": "월출",
"moonset": "월몰",
"noon": "태양 정오",
"sunrise": "해돋이",
"sunset": "해넘이"
}

this is original.

but after moon support. have some issue.
can you change some keyword?

"dawn": "새벽녘",
"dusk": "해질녘",
"elevation": "고도",
"moonrise": "달돋이",
"moonset": "달넘이",
"noon": "태양 남중",

thank you.

Hello,

i would like to see this in the hacs repository. May i add it? I will take care of the whole procedure if you would like that.

Thanks a lot in advance

Hey all,
looking forward to continue the development of home-assistant-sun-card in this repository.
AitorDB#164

Let's discuss first steps.

1. Add some context about this fork to the README file
2. Create PRs for the PRs currently open in the original repository
3. Merge all translation PRs from the original repository
4. Publish this repository to HACS

How about adding support for the moon?

The current visual editor was developed after the last version of the original card was released. It's based on Paper Elements, something that was removed in Home Assistant 2022.3 (see https://developers.home-assistant.io/blog/2022/02/18/paper-elements/). As such, it's broken and unusable in modern Home Assistant versions.

We'd like to have a new visual editor based on the suggested approach in the above link - any volunteers?

In the mean time, I will disable it is a temporary workaround.

Not sure but it seems a problem with AM/PM? See screenshots below, sun just went under but is already on the left?

Hi!
I'm subscribed to this repo, because I'm interested in moon implementation (maybe like others), but now I have mailbox overflowed by notifications about this repo releases.
I really apreciate your work but it's overwhelming and unnecessary.
If one want to be able update card for every change they can just set up hacs to track master branch instead of releases thats all.
Best regards.

Thanks for rejuvenate this card and the awesome update adding moon support 🥳
Cheers!

Hi dev. Would be great if you can add additional information when next new Moon will bee. "Full moon in: xx days:hours:minutes"
Or at least please explain how to implement it byself.
Thank you in advance.

The card appears to be using the time set on the client to determine the sun position. The expected behavior is that the card will use the server time to provide consistent, client agnostic positioning.

The provided screenshot shows the sun positioned around noon with the client time set around noon, while the server time is much earlier around 8:00.

This seems ridiculous, I know... But can you possibly rename "Solar noon" to "Solar Noon" with capital letters? Drives my A.D.D. crazy. LOL

Thanks for not letting this card die.

To me the values make no sense, currently what is shown

Sunrise : 7:49
Sunset : 17:59

Moonrise : 5:05
Moonset : 15:07

Surely the moonrise and moonset need to be swapped around.

Basically I would like to know what time the moon will rise (above the horizon) and what time it will set (below the horizon).

type: custom:horizon-card
moon: true
refresh_period: 120
southern_flip: true
fields:
  sunrise: true
  sunset: true
  dawn: true
  noon: true
  dusk: true
  azimuth: true
  sun_azimuth: true
  moon_azimuth: true
  elevation: true
  sun_elevation: true
  moon_elevation: true
  moonrise: true
  moonset: true
  moon_phase: true

The current version has two major drawbacks:

• Use of Sun Integration for the event times: the reported times are always the next occurrence of the event and shift throughout the day, which complicates calculations and may show misleading times.
• The graphics is fixed and too far from reality: the day part (upper part of the curve) is always bigger than the night (lower) part. In reality this varies by latitude and season. The further away from the equator and from the equinoxes you are, the larger the discrepancy. For example, in the winter in the northern parts of Scandinavia the Sun will crawl slowly through the night parts but pass quickly through the day part.

Proposed changes:

• Use own source for the event times. Ideally, the same library should support Moon times too.
  • Sun Integration requirement no longer applies.
  • This may lead to slight discrepancies between times reported by the library and times reported by the Sun Integration because of different methods used to calculate things.
• Adjust the Sun path curve/horizon line/travel to better reflect reality.
  • Constant speed of the Sun.
  • Size of day/night part corresponds to actual length.
  • Center the curve on solar noon and show 12 hours before and 12 hours after it.
    • This means the Sun will crawl to the right until it reaches solar midnight, which may be before or after midnight in the local time zone.
    • Shown event times always refer to the same -12/+12 hour around the current solar noon.
• Always show the Sun, even when below the horizon.
  • Change Sun colour when close the horizon (more orange tint) and when below horizon (darker).

This is a major change compared to the original project.

I've already implemented this using https://www.npmjs.com/package/suncalc3 as the data source + basic Moon support #11. I still need to fine tune things and write some tests.

Here is a teaser showing different locations and different seasons (the title of each card shows the latitude, longitude and local time):