Display the Accurate Moon Phase and Orientation with Home Assistant, by GUI only

[bthoven (Chote)]

Most Moon Phase entities available on HA only give you “estimated” phase of the Moon, and they always display an upright Moon with this estimated phase. However, in reality, we can get a more precise and almost “live” phase of the Moon and how the Moon is oriented as seen from the real sky at your location.

You may have come across a similar post I posted almost 4 years ago at
https://community.home-assistant.io/t/moon-phase-with-correct-phase-and-orientation/204631

That post gives you three options to produce similar results, but it requires backend bash scripts (also available for download) outside Home Assistant platform. This post, however, gives you one of the three options, but could be achieved without any coding.

I would also give credit to @Clemalex who made me aware of the Scrape integration and how he achieved the similar result. You may see his post (in French) at https://forum.hacf.fr/t/sensor-scrape/9677/10?u=clemalex

Below is what you would see as your end result I display it on an Entities card

Let’s begin.

If you go to the well-known timeanddate.com website, it will give you live updates on the Moon, its current phase, and its orientation (how tilted the rabbit feature on the Moon is at the moment). The concept of this exercise is to extract that almost “live” Moon Phase image from this website, without any coding, by just using HA GUI. I’ve been using this method for years and it still works.

There are three main steps:

1. Obtain the correct URL of timeanddate for your observing location (using any browser)
2. create a HA sensor containing the “current” Moon Phase URL by extracting from the above website (using Scrape integration)
3. convert the sensor to “camera” sensor which can be used to display the Moon Phase image on HA card (using Generic Camera integration)

Step 1: find a correct source URL
On your browser, enter this URL below, and allow your browser to detect your location: “Moon Phases 2024 – Lunar Calendar”

You can see that timeanddate can display Moon Phase as seen from your location right away.

click Moon Phase for your city

You can now see and copy your current city URL for Moon Phase
https://www.timeanddate.com/moon/phases/thailand/bangkok

Step 2: Create a new sensor containing the “current” Moon Phase URL

On HA: settings–>Devices and Services–>add integration–>scrape–>add entry
paste the above URL in Step 1 to Resource*, press Next
enter any name of your choice to Name input field, say, moon phase timeanddate, this will be used for creating the sensor name by HA (sensor.moon_phase_timeanddate)
enter #cur-moon to Select* input field (Scrape will download the whole webpage, and search for keyword #cur-moon
enter src in Attribute input field (once the keyword #cur-moon is found, find the next keyword src= and extract the value behind it, which is something like /scripts/moon.php?i=0.732&p=1.283&r=4.380)
enter https://www.timeanddate.com{{value}} to Value Template input field
(construct a template value as a URL final content), then press Submit

upon completing this step, your HA will create a new sensor named as sensor.moon_phase_timeanddate, which contains a dynamic url in the following format:
https://www.timeanddate.com/scripts/moon.php?i=0.732&p=1.283&r=4.380
(where: the i, p, and r values will change over time. These values will be used to display the current phase and its phase orientation as seen from your location.)

Step 3: create a “camera” sensor based on the obtained sensor above

On HA: Settings–>Devices and services–>add integration–>Generic Camera
enter {{states('sensor.moon_phase_timeanddate')}} to Still Image URL input field, then submit

HA will create a camera sensor named “camera.www.timeanddate_com”, which can be put on your card. I don’t know how to give a different sensor name. If anyone knows, please share.

Sample Glance card

source of data For someone who wondered why, on Step 2, we input such values in the Select and Attribute input fields. You can open the timeanddate URL in your browser, point the cursor at the moon image, right click and choose Inspect.

[dave_t_uk (Dave)]

You can change the camera entity name in the setting page and you can rename the device by clicking the … on the first integration page (next to ‘configure’)

[bthoven (Chote)]

Thanks. I forgot that part. Just rename the entity ID to be more meaningful…

[HadiHassaoui]

Thank you @bthoven for sharing this idea.

I used it to inspire for my card.

But instead of using timeanddate moon ilustration, i prefered the Nasa photos of the moon.

Here’s the rest Sensor that i used to get the moon picture from Nasa API :

  - platform: rest
    unique_id: nasa_moon_phase
    resource_template: https://svs.gsfc.nasa.gov/api/dialamoon/{{ states("sensor.nasa_date_et_heure_format") }} 
    name: Nasa Moon Phase Info
    value_template: "{{ value_json.image.url }}"
    json_attributes:
      - image

The sensor “sensor.nasa_date_et_heure_format” need to send the date and time in this format : 2024-05-17T00:13

I used a template sensor :

{{ now().strftime('%Y-%m-%dT%H:%M') }}

Then i made a generic camera has you explained

[bthoven (Chote)]

That looks awesome with the realistic Moon. Thanks for sharing back with detailed instructions.

One thing that Nasa could improve is to take the observer location into the calculation so that the Moon features/phase orients to the right angle. That’s what I like about timeanddate.

Well, we are not living in a perfect world

[HadiHassaoui]

You’re true, the angle would wrong depending of the location, but since i’m living in north america, the angle is almost perfect for me… I’m thinking, since the visualization is a round object, if in the card, after finding the right angle, you turn the moon in CSS, you’ll get the perfect angle for your location.

[bthoven (Chote)]

Thanks. Actually, I have my own solution already as mentioned in the original post; or as posted here: Moon Phase with correct phase and orientation - #8 by bthoven

[sbazzle]

I’ve implemented your method for grabbing the moon image, and it works great. My question on your card is how you achieved the transparency around the moon. The images I’m getting from the site are jpg with black backgrounds. If they were pngs or gifs that already had the transparency channel in them, that’d be great. But I’m not seeing that option.

[HadiHassaoui]

Hi, it’s in the CSS. Using Card_mod, i made a border-radius of the camera container at 50% so it mask the black background, and increase the image inside the container so it fit perfectly.
Here’s my card code, adjust the 118% of the background-size depending of the card and size that you use:

show_name: false
show_icon: true
show_state: true
type: glance
entities:
  - entity: sensor.sun_next_rising
    format: time
    card_mod:
      style: |
        state-badge {
          width: 120px  !important;
          height: 90px  !important;
          border-radius: 0 !important;
          margin-top: -20px !important;
          filter: drop-shadow(3px 5px 2px var(--shadow-color));
        }
  - entity: camera.nasa_moon_phase
    show_state: false
    card_mod:
      style: |
        state-badge {
          width: 100px  !important;
          height: 100px  !important;
          border-radius: 50% !important;
          margin-top: -5px !important;
          filter: drop-shadow(6px 6px 4px var(--shadow-color));
          background-position: center !important;
          background-repeat: no-repeat !important;
          background-size: 118% !important;
        }
  - entity: sensor.sun_next_setting
    format: time
    card_mod:
      style: |
        state-badge {
          width: 120px  !important;
          height: 90px  !important;
          border-radius: 0 !important;
          margin-top: -20px !important;
          filter: drop-shadow(3px 5px 2px var(--shadow-color));

        }
card_mod:
  style: |
    ha-card {
      background-image: url(/local/backgrounds/day_night.jpg) !important;      
      background-position: top center !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      max-height: 120px;
      font-size: 1.2rem;
      font-weight: 800;
      text-shadow: 3px 3px 3px var(--shadow-color)
    }

I’ve also manage to have the image has an entity_picture of a sensor entity instead of using the camera here’s the template sensor, i you wish to use it as an isnpiration :

      - unique_id: moon_phase_anime
        name: Phase de la lune
        state: >
          {% set phase = states('sensor.moon_phase') %}
          {% set moon_phases = {
              'new_moon': 'Nouvelle lune',
              'waxing_crescent': 'Premier croissant',
              'first_quarter': 'Premier quartier',
              'waxing_gibbous': 'Gibbeuse croissante',
              'full_moon': 'Pleine lune',
              'waning_gibbous': 'Gibbeuse décroissante',
              'last_quarter': 'Dernier quartier',
              'waning_crescent': 'Dernier croissant'
            }
          %}
          {{ moon_phases[phase] if phase in moon_phases.keys() else 'Inconnue' }}
        picture: "{{ states('sensor.nasa_moon_phase_info') }}"
        icon: >
          {% set phase = states('sensor.moon_phase') %}
          {% set moon_icons = {
              'new_moon': 'fapro:moon-new#fullcolor',
              'waxing_crescent': 'fapro:moon-waxing-crescent#fullcolor',
              'first_quarter': 'fapro:moon-first-quarter#fullcolor',
              'waxing_gibbous': 'fapro:moon-waxing-gibbous#fullcolor',
              'full_moon': 'fapro:moon-full#fullcolor',
              'waning_gibbous': 'fapro:moon-waning-gibbous#fullcolor',
              'last_quarter': 'fapro:moon-last-quarter#fullcolor',
              'waning_crescent': 'fapro:moon-waning-crescent#fullcolor'
            }
          %}
          {{ moon_icons[phase] if phase in moon_icons.keys() else 'fapro:moon-new#fullcolor' }}

[HadiHassaoui]

FInale card… with 7 days of moon phase, animated icons and weather condition, everything needed for a nice water front cottage

[ArtMel19981 (Art Mel1998)]

Hello,

For someone who is not so familiair with this:
Where did you put the -platform: rest code? I did put it in configuration.yaml but that produced an error. I got everything else working but I can not figure out how to get the nicer moonpictures.

[Tismo]

tbarkellah 3la khouya @HadiHassaoui .
Any chance you could share your images of sunset and sunrise please?
Also, I think the api rest command is not working . I keep getting “unknow” result

[theclue (Gabriele Baldassarre)]

@ArtMel19981

Where did you put the -platform: rest code? I did put it in configuration.yaml but that produced an error.

You have to add it inside the “sensor” node in configuration.yaml

[HadiHassaoui]

Hi, sorry for the late answer.

I got them from this GitHub repositary :

GitHub - basmilius/weather-icons: Free to use animated weather icons.

You need to install the Fontawesome integration to make it work. and create a folder inside your config disk named custom_icons

Hope it help

[cyn]

I’ve also manage to have the image has an entity_picture of a sensor entity instead of using the camera here’s the template sensor, i you wish to use it as an isnpiration :

I followed until this part, where are you inserting this yaml code?
thanks

[HadiHassaoui]

This code need to be put inside the file template.yaml in your config folder of your HA device. (you can use the Studio Code Server add-on to access those file directly inside HA.