Back to forums

I have published a small web tool called "Moon and Darkness Calendar"

DIY
Tristan FischerUlfGMarkus SelbachAli Alhawas
•46 replies•1.7k views
Tristan Fischer avatar
Tristan Fischer avatar
Hi everyone,

I wanted to share a small web tool I recently developed: Moon and Darkness Calendar.

Although I initially built it for my own needs, I thought it might also be helpful for others in the astronomy community.

I’ve been using tools like clearoutside.com, which I really like, but it only shows data for the next seven days (as it is primarily around weather forecasting).
For longer-term planning - such as for an upcoming vacation - I couldn’t find a tool that provided moon and darkness information over a longer period. That’s why I created this.

The usage is simple: you provide a location (or use the "Use my Location"-Button), and it generates a calendar for the next 30 days, showing moon phases and darkness levels (civil, nautical, astronomical) for each night. It also indicates when the moon will be above the horizon.  

You can try it out here: https://dersphere.github.io/moon-and-darkness-calendar/

Edit: Version 2 announcement here

(It is also fully open source)

I’d love to get feedback from the community! Is this something you’d find useful? Are there any features you’d like to see added? Any thoughts or suggestions would be greatly appreciated.

Thanks for your time, and I hope this tool helps fellow observers out there!
Clear skies,
Tristan
Well Written Helpful Engaging Supportive
Rostokko avatar
Rostokko avatar
Very well done; it would be great if somehow it also showed how brighter/dimmer a specific full moon will be compared to average (like the "supermoon" we just had).
Well Written Respectful Supportive
Tristan Fischer avatar
Tristan Fischer avatar
Very well done; it would be great if somehow it also showed how brighter/dimmer a specific full moon will be compared to average (like the "supermoon" we just had).

Thank you for trying it out and for your feedback!
Yes, I am still ideating on how I could show the moon cycle in addition to its "presence" above the horizon. I am sure I will come up with something to cover this soon. Right now, I am researching any kind of formula or something to account for this.
Well Written Respectful
Bill McLaughlin avatar
Bill McLaughlin avatar
Nice! Although the latitude and longitude do display in the URL, it would be nice to also have them display on the graph somewhere and although the city will get you pretty close it might be nice to allow lat/lon input as well.
Helpful Respectful Supportive
John Hayes avatar
John Hayes avatar
I like it!!  I also agree with all of the suggestions here.  I'd like to enter Lat/Lon so that I can put in the exact location of Obstech.  Also seeing an indication of moon phase would be a nice addition.  I could live with a percentage number showing on the moon bar, which should be really easy to add.  As it is, it's really useful…so good job–and thanks!!  

John
Respectful Supportive
Tristan Fischer avatar
Tristan Fischer avatar
Bill McLaughlin:
Nice! Although the latitude and longitude do display in the URL, it would be nice to also have them display on the graph somewhere and although the city will get you pretty close it might be nice to allow lat/lon input as well.

Yes good idea, thanks - I will add this to my list. However, it is already possible to enter exact coordinates simply by modifying the URL.
Helpful
Tristan Fischer avatar
Tristan Fischer avatar
John Hayes:
I like it!!  I also agree with all of the suggestions here.  I'd like to enter Lat/Lon so that I can put in the exact location of Obstech.  Also seeing an indication of moon phase would be a nice addition.  I could live with a percentage number showing on the moon bar, which should be really easy to add.  As it is, it's really useful...so good job--and thanks!!  

John

For the coordinates, see above.

About the other idea (showing the moon phase), please refresh the page; I just pushed a new version which shows more details when you hover over the segments with the mouse:

Richard Carande avatar
Richard Carande avatar
Great resource.  I always record the moon details in my logs, and include the rise/set time and as well as percent illuminated.  I've had to go to two sites to gather this info up to now (although maybe there's another site I don't know of that has it readily available).  I've book marked this page and will use it from now on.

One suggestion is to have the percent illumination as a column on the side, maybe next to the date, just to make it more obvious.  Also, it would be nice to have the rise/set times explicitly typed out within the grey bar. 

Those are personal nit-picks; the app as-is is very nice.
Well Written Respectful Concise
Tristan Fischer avatar
Tristan Fischer avatar
Richard Carande:
Great resource.  I always record the moon details in my logs, and include the rise/set time and as well as percent illuminated.  I've had to go to two sites to gather this info up to now (although maybe there's another site I don't know of that has it readily available).  I've book marked this page and will use it from now on.

One suggestion is to have the percent illumination as a column on the side, maybe next to the date, just to make it more obvious.  Also, it would be nice to have the rise/set times explicitly typed out within the grey bar. 

Those are personal nit-picks; the app as-is is very nice.

Thank you for testing it and and your feedback, I appreciate it!

Yes, multiple users have mentioned that they would prefer having the percentage and other numbers somewhere always visible. I am pretty sure I can make this work somehow. Currently, I am thinking about a toggle or checkbox.
Supportive
Dave Rust avatar
Dave Rust avatar
Really nice! Love this! Bravo!

Regarding moon phase, why not keep it visual and just have the horizontal gray bars get dimmer with shrinking phase. An easy hex coding effort for HTML.

Also, a strictly optional feature would be to have the center section of night sky background as black to emphasize approximately 11PM to 3AM, representing the overhead "sweet spot" and darkest skies overall. This helps in planning because some moon nights can still be useful with a late rising and early setting.

Regardless, this is is really useful. Every year I search online for an updated phase graph. This interactive tool can replace them all!
Helpful Insightful Respectful Engaging Supportive
Christian Bennich avatar
Christian Bennich avatar
Great stuff, very useful. 

Great with the additional info that’s currently implemented as mouse hovering. Mouse hovering is difficult on a mobile, it would be great if the info could be made more visual as already suggested. 

Will check out the site from my laptop….as soon as I get out of bed 😂😂😂
Engaging
Niels_L avatar
Niels_L avatar
Hi @Tristan Fischer,
Thanks for putting this together, so very useful!! I’ve always planned my getaways in advance and seem to always hot full moon  This tool will definitely help! 

Just one suggestion, but perhaps it is my iPad, the location does not show a drop-down menu and I’m not sure if I’m looking at the right place. 

Looks like this will become one of those frequently used sites! 

Thanks,
Niels.
Paolo avatar
Paolo avatar
Fantastic tool, thanks a lot!
Tristan Fischer avatar
Tristan Fischer avatar
I have updated the app to show the moon's illumination with the brightness of the moon segment.

Dave Rust avatar
Dave Rust avatar
Beautiful, man! The dimming moon bars also creates an overall sophisticated look with a gradient effect.
Markus Selbach avatar
Markus Selbach avatar
This is very usefull - thanks for publishing. May I ask to add an ontap event, so that the popover with the details also opens in mobile browsers?
I added you page as an app shortcut to my phones homescreen ;)
Habib Sekha avatar
Habib Sekha avatar
Thank you for this very nice and useful web tool, Tristan!  I've made shortcuts on several devices.
Well Written Respectful
Makrem Larnaout avatar
Makrem Larnaout avatar


Nice
Bill McLaughlin avatar
Bill McLaughlin avatar
What I think is maybe the most useful number for an imager might be worthwhile adding to the hover and that is the number of hours of total darkness available on that night.
UlfG avatar
UlfG avatar
A nice tool! As others have said, I would like a more clear indication on what location is actually used, rather than just having it show lat-long in the url. In particular, when pressing the "Use my location" button, I would like to see a response that tells me what location/city it found. When using this function on a computer, it may well use the location of my ISP, which can be quite far away.
Well Written Concise
Tristan Fischer avatar
Tristan Fischer avatar
Markus Selbach:
... so that the popover with the details also opens in mobile browsers?...

Yes, I am working on something like this. Can you tell me what the most important details for you are?
Bill McLaughlin:
... What I think is maybe the most useful number for an imager might be worthwhile adding to the hover and that is the number of hours of total darkness available on that night.

Good idea, will do, thanks!
A nice tool! As others have said, I would like a more clear indication on what location is actually used, rather than just having it show lat-long in the url. In particular, when pressing the "Use my location" button, I would like to see a response that tells me what location/city it found. When using this function on a computer, it may well use the location of my ISP, which can be quite far away.

I am also working on improving this bit. In the meantime, I can already tell that the "use my location" is a purely client-side function (same as with everything else on this site except the city search), so it's not your ISP or something, but your operating system, which tells the browser your location. 
I have experimented with reverse-geo-lookups but decided against it as it might distract or confuse users even more: The coordinates are as exact as it gets - a reverse search to the closest city would be "more wrong". Instead, I am currently thinking of adding link to openstreetmaps or google maps with a pin to the current in-use coordinates.
UlfG avatar
UlfG avatar
Tristan Fischer:
so it's not your ISP or something, but your operating system, which tells the browser your location.


Well, that may be so, but the computer/OS is still getting it from the network, which is still the ISP, so that's the source anyway.
Markus Selbach avatar
Markus Selbach avatar
Can you tell me what the most important details for you are?

Just the details that are currently displayed in a non mobile browser like moon visibility, phase and illumination. And I would also vote for the total hours of darkness that @Bill McLaughlin proposed 👍
Tristan Fischer avatar
Tristan Fischer avatar
Tristan Fischer:
so it's not your ISP or something, but your operating system, which tells the browser your location.


Well, that may be so, but the computer/OS is still getting it from the network, which is still the ISP, so that's the source anyway.

Yes, you are right. To my knowledge, some OS could fall back to something as inaccurate as reverse IP location lookup. But this happens rarely, the OS usually knows pretty good it's location. If I may ask, can you tell me how accurate your browser's geolocation is? You can use websites like this, which shows the accuracy and a map for your own reference: https://browserleaks.com/geo

But on the main point, I fully agree; that's why I will provide a better way to enter coordinates directly and will provide a way to look up the current in-use coordinates. Currently, I am working on a mode to show inline times; here is a preview of what keeps me busy right now:

UlfG avatar
UlfG avatar
This gives a location which is 50 km to north from my true position, or about 20' error in latitude. Sure, the difference for the purposes here is of minor importance.