current lunar calendar on the Allsky website

[Adler6907]

I added a lunar calendar as a small extension in the left menu of the Allsky website. The lunar calendar is a configurable service for websites from 'https://www.der-mond.de/homepagetool/moon-current-for-your-website' The current calculations are based on the GPS data from an der-mond.de transmitting location. The language can also be passed via parameter.
This is what it looks like when you click on the moon icon:

Here is an overview:

If you click again on the moon icon or on the star overlay icon (if available) you will return to the Allsky image.

There are 3 URL calls to create the 3 images from der-mond.de.

https://www.der-mond.de/feature/luna.php?version=5&txue=Monn+phase&zeko=1&rand=1&trans=1&julia=0&daem=3&zefu=0&grmo=1&grmoueber=0&txph=0&txmoal=1&txmoph=1&txmobe=1&txmophti=1&txmost=1&txmostau=0&txze=1&zezo=1&zeso=1&format=1&schgr=11&schriftart=Standard&schriftschnitt=0&grafikausdehnung=1&grafikpx=200&faan=1&scro=192&scgr=192&scbl=192&hiro=0&higr=0&hibl=0&grsoho=2&grsohoueber=1&soep=1&txsost=1&txsostau=0&geolagr=13&geolami=12&geolase=0&geola=o&geobrgr=48&geobrmi=7&geobrse=0&geobr=n&lang=en

https://www.der-mond.de/feature/luna_kalender.php?version=5&txue=Rising+of+moon+and+sun&trans=0&zefu=0&txph=0&txmoph=0&txmophti=0&txmost=0&txmostau=1&txze=1&zezo=1&zeso=1&schgr=11&schriftart=Standard&schriftschnitt=0&faan=1&scro=255&ragr=128&rabl=255&raro=0&scgr=255&scbl=255&hiro=0&higr=0&hibl=0&soep=1&txsost=0&txsostau=1&geolagr=13&geolami=12&geolase=0&geola=o&geobrgr=48&geobrmi=7&geobrse=0&geobr=n&lang=en&kalender_zeitraum=0

https://www.der-mond.de/feature/luna_kalender.php?version=5&txue=Rising+of+moon+and+sun&trans=0&zefu=0&txph=0&txmoph=0&txmophti=0&txmost=0&txmostau=1&txze=1&zezo=1&zeso=1&schgr=11&schriftart=Standard&schriftschnitt=0&faan=1&scro=255&ragr=128&rabl=255&raro=0&scgr=255&scbl=255&hiro=0&higr=0&hibl=0&soep=1&txsost=0&txsostau=1&geolagr=13&geolami=12&geolase=0&geola=o&geobrgr=48&geobrmi=7&geobrse=0&geobr=n&lang=en&kalender_zeitraum=1

I think the parameters are self-explanatory.

(you could also have the URL calls generated dynamically from the Allsky configuration, but I kept it simple for myself)

Now you have to make some small changes in ~/allsky/html/allsky/controller.js, ~/allsky/html/allsky/allsky.css, ~/allsky/html/allsky/configuration.json and ~/allsky/html/allsky/index.php.

Change in controller.js:
Adding a new function (preferably at $scope.toggleOverlay):
$scope.toggleMoon = function () { $scope.showMoon = !$scope.showMoon; if($scope.toggleMoon) { toggleOverlay(); } $scope.showOverlay = false; };
Add 4 new lines in the $scope.toggleOverlay function

$scope.toggleOverlay = function () {

      $scope.showOverlay = !$scope.showOverlay;
       if ($scope.showOverlay && $scope.showMoon) {
       overlayBuilt = false;
       }
      $scope.showMoon = false;

      if (! overlayBuilt && $scope.showOverlay) { .....

Change in allsky/allsky.css:
just add these lines at the end

.moon {
position: relative;
bottom: 0%;
text-align: center;
width: 100%;
max-width: 100%;
border: 1px solid #969696;
}

Change in configuration.json:
adding the 7 lines under "leftSidebar": [

		"leftSidebar": [
			{
				"display": true,
				"title": "Mooncalendar",
				"icon": "fa fa-2x fa-fw fa-moon",
				"other": "ng-click='toggleMoon()' ng-class=\"{'active': showMoon}\"",
				"style": ""
			},	

Change in allsky/index.php:
Replacing the original container <div id="imageContainer" ......</div>
with the new original container

	<div id="imageContainer" ng-show="showMoon==false" <?php if ($imageBorder) echo "class='imageContainer'"; ?> style="max-width: <?php echo $imageWidth ?>px">
		<div id="starmap_container" ng-show="showOverlay==true">
			<div id="starmap"></div>
		</div>
		<div id="live_container">
			<img title="allsky image" alt="allsky image" id="current" class="current" src="<?php echo $loadingImage ?>">
		</div>
	</div>
	<div class="moon" ng-show="showMoon==true">
		<img src="https://www.der-mond.de/feature/luna.php?version=5&txue=Monn+phase&zeko=1&rand=1&trans=1&julia=0&daem=3&zefu=0&grmo=1&grmoueber=0&txph=0&txmoal=1&txmoph=1&txmobe=1&txmophti=1&txmost=1&txmostau=0&txze=1&zezo=1&zeso=1&format=1&schgr=11&schriftart=Standard&schriftschnitt=0&grafikausdehnung=1&grafikpx=200&faan=1&scro=192&scgr=192&scbl=192&hiro=0&higr=0&hibl=0&grsoho=2&grsohoueber=1&soep=1&txsost=1&txsostau=0&geolagr=13&geolami=12&geolase=0&geola=o&geobrgr=48&geobrmi=7&geobrse=0&geobr=n&lang=en" alt="The moon - our earth's mysterious companion" style="max-width: 100%">
		<img src="https://www.der-mond.de/feature/luna_kalender.php?version=5&txue=Rising+of+moon+and+sun&trans=0&zefu=0&txph=0&txmoph=0&txmophti=0&txmost=0&txmostau=1&txze=1&zezo=1&zeso=1&schgr=11&schriftart=Standard&schriftschnitt=0&faan=1&scro=255&ragr=128&rabl=255&raro=0&scgr=255&scbl=255&hiro=0&higr=0&hibl=0&soep=1&txsost=0&txsostau=1&geolagr=13&geolami=12&geolase=0&geola=o&geobrgr=48&geobrmi=7&geobrse=0&geobr=n&lang=en&kalender_zeitraum=0" alt="current lunar calendar this month" style="max-width: 100%">
		<img src="https://www.der-mond.de/feature/luna_kalender.php?version=5&txue=Rising+of+moon+and+sun&trans=0&zefu=0&txph=0&txmoph=0&txmophti=0&txmost=0&txmostau=1&txze=1&zezo=1&zeso=1&schgr=11&schriftart=Standard&schriftschnitt=0&faan=1&scro=255&ragr=128&rabl=255&raro=0&scgr=255&scbl=255&hiro=0&higr=0&hibl=0&soep=1&txsost=0&txsostau=1&geolagr=13&geolami=12&geolase=0&geola=o&geobrgr=48&geobrmi=7&geobrse=0&geobr=n&lang=en&kalender_zeitraum=1" alt="Lunar calendar next month" style="max-width: 100%">
	</div>

I hope I didn't make any mistakes when putting it together. This little feature works perfectly for me :-)

[EricClaeys]

Good job.
Did you consider having a new page appear when you click on the moon icon on the left bar? This would be done by replacing the "other" field in leftSidebar with a "url" field that pointed to myFiles/moon.php That file would contain the css lines and display the images.

This would eliminate the need to change any Allsky source files whenever a new Allsky release came out. Th we myFiles directory is preserved during upgrades as is the configuration.json file.

[Adler6907]

Thanks.

Honestly no, I haven't thought about it. But it's a good way to keep it simple for the future. At first glance, it's not clear to me how the Mondicon should appear in the configuration.json file without making any changes :-/

[EricClaeys]

You would use your current configuration.json file but replace the other field with:

"url" : "myFiles/moon.php",

You would then create the moon.php file.
If you needed the latitude and longitude that web page could read them from configuration.json.

Does this make sense?

[Adler6907]

yes I understand. I thought you meant that you no longer have to edit the “configuration.json” after a future Allsky update.
Of course, it makes sense to pack as much as possible into “moon.php” for the lunar calendar. You then save yourself the toggleMoon function in “controler.js”. I’ll take a closer look at it in the next few days...

[EricClaeys]

Using the mechanism I mentioned you only edit your configuration.json ONCE to replace "other" with "url". Every Allsky update after that will use your existing configuration.json file and the myFiles directory so you don't have to update ANYTHING. With your method you need to update several Allsky files every time you upgrade.

[Adler6907]

okay, I thought “configuration.json” would be overwritten in an update (in case there is something new)

[EricClaeys]

My intent is for configuration.json to be updated if needed by the installation script. For example, in the next major release one of the settings is going away so it will be automatically removed from the file.