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

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
0_entity_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.

3 Likes

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’)

1 Like

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

Thank you @bthoven for sharing this idea.

I used it to inspire for my card.
Capture d’écran, le 2024-05-16 à 23.55.09

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

1 Like

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 :slight_smile:

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.

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
image