zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move rise/set markers inside, use unified sun radius

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 07:41:13 +02:00
1 parent 18c063c623
commit 8a0ac80341
1 file changed
+23 -26
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+23 -26
View File
@@ -96,16 +96,16 @@
<!-- Hour marks -->
<g id="hour-marks"></g>
<!-- Sunrise/sunset markers (outside clock) -->
<!-- Sunrise/sunset markers (inside, on inner orbit) -->
<g id="sun-marker" fill="#e0914f">
<circle id="sunrise-marker" cx="100" cy="100" r="3"/>
<circle id="sunset-marker" cx="100" cy="100" r="3"/>
<rect id="sunrise-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
<rect id="sunset-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
</g>
<!-- Moonrise/moonset markers (outside clock) -->
<!-- Moonrise/moonset markers (inside, on inner orbit) -->
<g id="moon-marker" fill="#b0a89a">
<circle id="moonrise-marker" cx="100" cy="100" r="3"/>
<circle id="moonset-marker" cx="100" cy="100" r="3"/>
<rect id="moonrise-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
<rect id="moonset-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
</g>
<!-- Clock hands -->
@@ -411,20 +411,22 @@
return { x: 100 + Math.cos(angle) * r, y: 100 + Math.sin(angle) * r };
}
var sunRadius = 55;
var sunOrbitRadius = 62;
var markerRadius = 48;
var sr = sunriseNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 6, 0, 0);
var ss = sunsetNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0);
var srPoint = timeToPoint(sr, sunRadius);
var ssPoint = timeToPoint(ss, sunRadius);
rpgArcBg.setAttribute('d', 'M ' + srPoint.x + ' ' + srPoint.y + ' A ' + sunRadius + ' ' + sunRadius + ' 0 0 1 ' + ssPoint.x + ' ' + ssPoint.y);
var srPoint = timeToPoint(sr, sunOrbitRadius);
var ssPoint = timeToPoint(ss, sunOrbitRadius);
rpgArcBg.setAttribute('d', 'M ' + srPoint.x + ' ' + srPoint.y + ' A ' + sunOrbitRadius + ' ' + sunOrbitRadius + ' 0 0 1 ' + ssPoint.x + ' ' + ssPoint.y);
if (now >= sunTimes.sunrise && now <= sunTimes.sunset) {
var sunP = timeToPoint(now, sunRadius);
var sunP = timeToPoint(now, sunOrbitRadius);
rpgSun.setAttribute('cx', sunP.x);
rpgSun.setAttribute('cy', sunP.y);
rpgSun.setAttribute('opacity', '1');
} else {
var sunP = timeToPoint(now, sunRadius);
var sunP = timeToPoint(now, sunOrbitRadius);
rpgSun.setAttribute('cx', sunP.x);
rpgSun.setAttribute('cy', sunP.y);
rpgSun.setAttribute('opacity', '0.25');
@@ -439,32 +441,27 @@
moonVisible = (now >= moonTimes.rise || now <= moonTimes.set);
}
}
var moonP = timeToPoint(now, sunRadius);
var moonP = timeToPoint(now, sunOrbitRadius);
rpgMoon.setAttribute('cx', moonP.x);
rpgMoon.setAttribute('cy', moonP.y);
rpgMoon.setAttribute('opacity', moonVisible ? '1' : '0.25');
var outerRadius = 98;
var srM = timeToPoint(sr, outerRadius);
sunriseMarker.setAttribute('cx', srM.x);
sunriseMarker.setAttribute('cy', srM.y);
var ssM = timeToPoint(ss, outerRadius);
sunsetMarker.setAttribute('cx', ssM.x);
sunsetMarker.setAttribute('cy', ssM.y);
var srM = timeToPoint(sr, markerRadius);
sunriseMarker.setAttribute('transform', 'translate(' + srM.x + ', ' + srM.y + ')');
var ssM = timeToPoint(ss, markerRadius);
sunsetMarker.setAttribute('transform', 'translate(' + ssM.x + ', ' + ssM.y + ')');
if (moonTimes.rise) {
var mrM = timeToPoint(moonTimes.rise, outerRadius);
moonriseMarker.setAttribute('cx', mrM.x);
moonriseMarker.setAttribute('cy', mrM.y);
var mrM = timeToPoint(moonTimes.rise, markerRadius);
moonriseMarker.setAttribute('transform', 'translate(' + mrM.x + ', ' + mrM.y + ')');
moonriseMarker.setAttribute('opacity', '1');
} else {
moonriseMarker.setAttribute('opacity', '0');
}
if (moonTimes.set) {
var msM = timeToPoint(moonTimes.set, outerRadius);
moonsetMarker.setAttribute('cx', msM.x);
moonsetMarker.setAttribute('cy', msM.y);
var msM = timeToPoint(moonTimes.set, markerRadius);
moonsetMarker.setAttribute('transform', 'translate(' + msM.x + ', ' + msM.y + ')');
moonsetMarker.setAttribute('opacity', '1');
} else {
moonsetMarker.setAttribute('opacity', '0');