-
Notifications
You must be signed in to change notification settings - Fork 1
/
lightmilesianclock.html
105 lines (101 loc) · 4.93 KB
/
lightmilesianclock.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diem cognosce</title>
<!--
Versions M2021-09-11 see GitHub
-->
<meta name="creator" content="Louis-Aimé de Fouquières">
<meta name="description" content="This clock displays the day of the tropical year, using the Milesian calendar">
<meta name="keywords" content="Milesian clock, season's clock">
<meta name="viewport" content="width=device-width">
<link href="dialsandpanels.css" rel="stylesheet"/>
<script type="text/javascript" src="milesianclockinitiate.js"></script>
<script type="text/javascript">
lightClockInitiate = function () { // the autonomous version shall load all modules. In other cases, it should only wait for modules being loaded
loadComplete.then ( () => {
lightClock.lightMilesian = new modules.MilesianCalendar ("milesianClock");
lightClock.clockDial = new modules.SolarClock (document.querySelector("#clock1")); // Construct clock object, after HTML clock elements are identified.
setLightClockToNow(); // Initial setting
// lightClock.clockDial.setSeasons (lightClock.targetDate.year()); // Compute seasons at initialisation only.
lightClock.timeOutId1 = window.setInterval(setLightClockToNow , 1000); // Update every 1 s
})}
var lightClock = {
timeOutId1 : null, // Tick generator identifier
lightMilesian : null,
clockDial : null,
targetDate : null
}
function setLightClockToNow() { // Set clock to present date and time
lightClock.targetDate = new modules.ExtDate(lightClock.lightMilesian); // targeDate is today and now.
lightClock.clockDial.setHands (lightClock.targetDate); // Display date on clock.
}
</script>
</head>
<body>
<div class="centered">
<svg width="100%" height="100%" onload="javascript:lightClockInitiate()"
viewBox="-300 -300 600 600" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="clock1">
<!-- the dial -->
<image href="https://louis-aime.github.io/Milesian-calendar/milesian_dial.jpg" x="-300" y ="-300" width="600" height="599"/>
<!-- the motto on the dial -->
<text class="motto" x="0" y="36" >CERTUM MONSTRAT DIEM</text>
<!-- main dial: month, day; the rect enables to fetch the center of the dial -->
<rect class="center month day" x="0" y="0" width="0" height="0"/>
<!-- the year field -->
<text class="clock yeardisplay"
x="0" y="+100"></text>
<!-- no seasons' mark -->
<!-- center circle -->
<circle class="clockhand" r="9" />
<!-- set the secondary time dial which sould appear under the month-day hands -->
<!-- Hour clock centered at x=0, y=-80 -->
<g class="timeDial"> <!-- set a container for the time dial -->
<circle cx="0" cy="-80" r="60" fill="none" stroke="black" />
<rect class="center hour minute second" x="0" y="-80" width="0" height="0"/> <!-- center of the time dial -->
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(30,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(60,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(90,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(120,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(150,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(180,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(210,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(240,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(270,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(300,0,-80)"/>
<line x1="0" x2="0" y1="-133" y2="-140" stroke="black" stroke-width="6px" transform="rotate(330,0,-80)"/>
</g>
<!-- am/pm indicator -->
<text class="clock ampm"
x="0" y="-50">am</text>
<!-- hours, minutes and seconds hands -->
<g class="clockhand hour" transform="rotate(0)">
<line x1="0" x2="0" y1="-80" y2="-120" />
</g>
<g class="clockhand minute" transform="rotate(0)">
<line x1="0" x2="0" y1="-80" y2="-130" />
</g>
<g class="clockhand second" transform="rotate(0)">
<line stroke-width="1px" x1="0" x2="0" y1="-80" y2="-135" />
</g>
<!-- month and day hands are set at the end, in order to be above the rest of the clock -->
<!-- the month hand -->
<g class="clockhand month" transform="rotate(0)"
opacity="0.8">
<polygon points="0,0 12,-20 10,-185 0,-195 -10,-185 -12,-20" />
</g>
<!-- the day hand -->
<g class="clockhand day" transform="rotate(0)"
opacity="0.8" >
<polygon points="0,0 11,-20 8,-260 0,-270 -8,-260 -11,-20" />
</g>
</g>
</svg>
</div>
</body>
</html>