Skip to content

Commit 1b49a18

Browse files
bufferoverflowbufferoverflow
committed
initial version based on Rüdiger Appel's Siemens clock
1 parent def2dbd commit 1b49a18

File tree

6 files changed

+183
-1
lines changed

6 files changed

+183
-1
lines changed

‎CONTRIBUTING.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Contributing
2+
Contributions via pull requests are prefered.
3+
4+
# TODO
5+
You can help with one of these tasks:
6+
7+
* create icons
8+
* publish open web app
9+
* merge manifest.webapp with package.json
10+
* clarify copyright of Swiss Railway Clock
11+
* desktop web app
12+
* configurable options
13+
* make it perfect
14+
15+
thank you for making this happen!
16+
;-r

‎LICENSE.md

100644100755
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
The MIT License (MIT)
22

3+
Copyright (c) 2012 Rüdiger Appel
4+
35
Copyright (c) 2015 Roger Meier <[email protected]>
46

57
Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -19,4 +21,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1921
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2022
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2123
SOFTWARE.
22-

‎README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
This is the current clock I have.
2+
3+
-Roger Meier
4+
5+
# Goal
6+
7+
The goal is to provide a well readable clock based on open standards.
8+
9+
* [Source Code](https://github.com/bufferoverflow/clock/)
10+
* [CONTRIBUTING](CONTRIBUTING.md)
11+
* [LICENSE](LICENSE.md)
12+
13+
# Origin
14+
The initial source code for index.html and js/app.js is from http://www.3quarks.com/images/svg/siemens-clock.svg
15+
16+
Copyright (c) 2012 Rüdiger Appel
17+
Dual licensed under the MIT and GPL licenses.
18+
19+
Date: 2012-03-14
20+
Version: 1.0
21+
Email: ludi(at)me(dot)com
22+
URI: http://www.3Quarks.com/de/Bahnhofsuhr/

‎index.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright (c) 2012 Rüdiger Appel
4+
Copyright (c) 2015 Roger Meier <[email protected]>
5+
6+
SPDX-License-Identifier: MIT
7+
-->
8+
<script type="text/javascript" src="js/app.js" charset="utf-8"></script>
9+
<svg xmlns="http://www.w3.org/2000/svg"
10+
xmlns:xlink="http://www.w3.org/1999/xlink"
11+
xmlns:ev="http://www.w3.org/2001/xml-events"
12+
version="1.1"
13+
baseProfile="full"
14+
width="100%"
15+
height="100%"
16+
viewBox="0 0 200 200">
17+
18+
<defs>
19+
20+
<!-- three hour stroke (DIN 41091.1) -->
21+
<symbol id="threeHourStroke">
22+
<line x1="100" y1="0" x2="100" y2="30" style="stroke:#333; stroke-width:8.4; stroke-linecap:butt"/>
23+
</symbol>
24+
25+
<!-- hour stroke (DIN 41091.1) -->
26+
<symbol id="hourStroke">
27+
<line x1="100" y1="0" x2="100" y2="24" style="stroke:#333; stroke-width:8.4; stroke-linecap:butt"/>
28+
</symbol>
29+
30+
<!-- minute stroke (DIN 41091.1) -->
31+
<symbol id="minuteStroke">
32+
<line x1="100" y1="0" x2="100" y2="8" style="stroke:#333; stroke-width:3.6; stroke-linecap:butt"/>
33+
</symbol>
34+
35+
<!-- quarter strokes -->
36+
<symbol id="quarterStrokes">
37+
<use xlink:href="#threeHourStroke" />
38+
<use xlink:href="#minuteStroke" transform="rotate( 6, 100, 100)"/>
39+
<use xlink:href="#minuteStroke" transform="rotate(12, 100, 100)"/>
40+
<use xlink:href="#minuteStroke" transform="rotate(18, 100, 100)"/>
41+
<use xlink:href="#minuteStroke" transform="rotate(24, 100, 100)"/>
42+
<use xlink:href="#hourStroke" transform="rotate(30, 100, 100)"/>
43+
<use xlink:href="#minuteStroke" transform="rotate(36, 100, 100)"/>
44+
<use xlink:href="#minuteStroke" transform="rotate(42, 100, 100)"/>
45+
<use xlink:href="#minuteStroke" transform="rotate(48, 100, 100)"/>
46+
<use xlink:href="#minuteStroke" transform="rotate(54, 100, 100)"/>
47+
<use xlink:href="#hourStroke" transform="rotate(60, 100, 100)"/>
48+
<use xlink:href="#minuteStroke" transform="rotate(66, 100, 100)"/>
49+
<use xlink:href="#minuteStroke" transform="rotate(72, 100, 100)"/>
50+
<use xlink:href="#minuteStroke" transform="rotate(78, 100, 100)"/>
51+
<use xlink:href="#minuteStroke" transform="rotate(84, 100, 100)"/>
52+
</symbol>
53+
54+
<!-- visible dial circle -->
55+
<clipPath id="dialCircle">
56+
<circle cx="100" cy="100" r="100"/>
57+
</clipPath>
58+
59+
</defs>
60+
61+
<!-- dial -->
62+
<g clip-path="url(#dialCircle)">
63+
<use xlink:href="#quarterStrokes"/>
64+
<use xlink:href="#quarterStrokes" transform="rotate( 90, 100, 100)"/>
65+
<use xlink:href="#quarterStrokes" transform="rotate(180, 100, 100)"/>
66+
<use xlink:href="#quarterStrokes" transform="rotate(270, 100, 100)"/>
67+
</g>
68+
69+
<!-- hour hand -->
70+
<g id="hourHand" style="fill:#222" visibility="hidden">
71+
<rect x="97.3" y="65" width="5.4" height="35" style="stroke:none"/>
72+
<circle cx="97.3" cy="58.5" r="9" style="stroke:none"/>
73+
<circle cx="102.7" cy="58.5" r="9" style="stroke:none"/>
74+
<path d="M 88.3,58.5 Q 88.3,52 100,37.5 Q 111.7,52 111.7,58.5 Z" style="stroke:none"/>
75+
<path d="M 93.5,123 Q 100,125.5 106.5,123 Q 103,116 102.7,100 L 97.3,100 Q 97.3,116 93.5,123 Z" style="stroke:none"/>
76+
<circle cx="100" cy="100" r="7.4" style="stroke:none"/>
77+
</g>
78+
79+
<!-- minute hand -->
80+
<g id="minuteHand" style="fill:#222" visibility="hidden">
81+
<polygon points="95.3,49 99.5,2 100.5,2 104.7,49 102.7,100 97.3,100" style="stroke:none"/>
82+
<path d="M 93.5,123 Q 100,125.5 106.5,123 Q 103,116 102.7,100 L 97.3,100 Q 97.3,116 93.5,123 Z" style="stroke:none"/>
83+
<circle cx="100" cy="100" r="7" style="stroke:none"/>
84+
</g>
85+
86+
<!-- second hand -->
87+
<g id="secondHand" visibility="hidden">
88+
<polygon points="98,4 102,4 102.3,36 97.7,36" style="fill:#ad1a14; stroke:none"/>
89+
<circle cx="100" cy="45" r="10" style="fill:none; stroke:#ad1a14; stroke-width:4"/>
90+
<polygon points="97.5,56 102.5,55 103,102 97,102" style="fill:#ad1a14; stroke:none"/>
91+
</g>
92+
93+
<!-- axis cover -->
94+
<g id="axisCover" style="fill:#222">
95+
<circle id="axisCoverCircle" cx="100" cy="100" r="7" style="stroke:none"/>
96+
</g>
97+
98+
</svg>
99+

‎js/app.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/*
2+
Copyright (c) 2012 Rüdiger Appel
3+
Copyright (c) 2015 Roger Meier <[email protected]>
4+
5+
SPDX-License-Identifier: MIT
6+
*/
7+
8+
window.setInterval(function() {
9+
var now = new Date();
10+
var hours = now.getHours();
11+
var minutes = now.getMinutes();
12+
var time = Math.min(60000, 1.025 * (1000 * now.getSeconds() + now.getMilliseconds()));
13+
var seconds = Math.floor(time / 1000);
14+
var millis = time % 1000;
15+
rotate('hourHand', hours * 30 + minutes * 0.5);
16+
rotate('minuteHand', minutes * 6);
17+
rotate('secondHand', 6 * seconds + 3 * (1 + Math.cos(Math.PI + Math.PI * (0.001 * millis))));
18+
}, 50);
19+
20+
function rotate(id, angle) {
21+
var element = document.getElementById(id);
22+
if (element) {
23+
element.setAttribute('transform', 'rotate(' + angle + ', 100, 100)');
24+
if (element.getAttribute('visibility') == 'hidden') {
25+
element.setAttribute('visibility', 'visible');
26+
}
27+
}
28+
}

‎manifest.webapp

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"version": "0.1.0",
3+
"name": "clock",
4+
"description": "the CLOCK",
5+
"launch_path": "/index.html",
6+
"icons": {
7+
"16": "/img/icons/icon16x16.png",
8+
"48": "/img/icons/icon48x48.png",
9+
"60": "/img/icons/icon60x60.png",
10+
"128": "/img/icons/icon128x128.png"
11+
},
12+
"developer": {
13+
"name": "Roger Meier <[email protected]>",
14+
"url": "https://github.com/bufferoverflow/clock/"
15+
}
16+
}

0 commit comments

Comments
 (0)