Moon Phase with correct phase and orientation

I always want to have a more realistic moon “phase” and its orientation shown on my HA and website, instead of a “guestimate” phase with fixed orientation. Ideally, it could be derived by mathematic formula to come up with a svg file; but I don’t have enough knowledge to do it. Therefore, I managed to crop the moon phase and its information from an excellent website which displays “live” moon phase, based on your location: Timeanddate Moonphase . You need to change the url to reflect your location.
Here is the end result shown on my Lovelace dashboard:

I also use the cropped moon phase for my website:

What I did (on my ubuntu server) is to use Firefox command line to extract part of the website, and command line to further crop it to my liking. All being done by a bash script and cron job.These are all the cropped images which I can use for several projects:

If you are interested, you can download the script and sample outputs from here:
moonphaselive google drive

Can you share a file once more ? :slight_smile:

Thanks for your interest. The latest links are here:
Two of the above links are two bash script files. The other is output from the first script file. I do not include all other output cropped images as shown in previous post.
Please also note that the bash scripts also include other screenshot (skychart) which part can be deleted before you use it.
Please also bear in mind the moon phase full website was revised a few times since my post here. The latest change was in Dec 2020. I need to adjust the cropping positions every time the original layout changes. The link to the script above should produce the correct cropping because I’m still using them.
Good luck


So how does your homeassistant code looks?
How it can be added into lovelace?
It’s just a link to image as i understund?



Yes, it’s just a link to the image.

I am not happy with the moon phase. need add all 30 moons images in.
to be more accurate. i have all moon images.

Is it possible to share the code? Because I want to do something similar but without success

Since I posted this, I have revised the way to get such Moon phase without much worrying about potential changes on the source website ( in the future. I also have 2 other ways to produce a more realistic Moon phase with the right phase orientation as seen from your location. All three methods are described in more details, with downloadable codes, in my blog here:
How to create a Moon Phase with correct phase orientation as seen from your location

Here is the output sample produced by the three methods I mentioned.

1 Like

thank you for your help, how did you integrate it into HA

Scheduling to produce the Moon phase image file and copy it to home assistant config folder every, say, 5 minutes. Create a Glance card and specify an entity named “camera.moonphasefilename” without .png

thank you for your help but I’m going to give up because I still can’t activate the script in HA

With scrape sensor :

Just know Homeassistant has a web scraping function. Great!

Update 30-4-2024: I’ve just posted another guide based on the Scrape and Generic Camera integration here:
Display the Accurate Moon Phase and Orientation with Home Assistant, by GUI only - Share your Projects! / Dashboards & Frontend - Home Assistant Community (

Amazing work! Thank you for sharing!

I have not yet played with HA’s scrape integration, but if one were so inclined… this NASA site is rich with images and data.