This repository has been archived by the owner on Apr 18, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 318
/
index.html
156 lines (120 loc) · 4.29 KB
/
index.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<title>Skycons</title>
<meta charset="us-ascii">
<style type="text/css">
body {
font: 300 112.5%/1.5em "Helvetica", "Arial", sans-serif;
margin: 3em 3em 6em;
padding: 0;
}
article {
margin: auto;
width: 30em;
}
h1 {
font-size: 3em;
line-height: 1em;
text-align: center;
margin: 0.5em 0;
}
p {
margin: 1.5em 0;
}
figure {
margin: 3em auto;
width: 368px;
height: 152px;
}
canvas {
display: block;
float: left;
margin-left: 8px;
margin-top: 8px;
}
pre {
font: 77.8%/1.5em "Lucida Sans Typewriter", "Lucida Console", "Monaco", "Bitstream Vera Sans Mono", monospace;
margin: 3.375em 1.6875em;
}
a, pre span.comment {
color: royalblue;
}
a:visited, pre span.constant {
color: indianred;
}
</style>
</head>
<body>
<article>
<h1>Skycons</h1>
<p><strong>Skycons</strong> is a set of ten animated weather glyphs,
procedurally generated by JavaScript using the HTML5 canvas tag.</p>
<figure class="icons">
<canvas id="clear-day" width="64" height="64">
</canvas>
<canvas id="clear-night" width="64" height="64">
</canvas>
<canvas id="partly-cloudy-day" width="64" height="64">
</canvas>
<canvas id="partly-cloudy-night" width="64" height="64">
</canvas>
<canvas id="cloudy" width="64" height="64">
</canvas>
<canvas id="rain" width="64" height="64">
</canvas>
<canvas id="sleet" width="64" height="64">
</canvas>
<canvas id="snow" width="64" height="64">
</canvas>
<canvas id="wind" width="64" height="64">
</canvas>
<canvas id="fog" width="64" height="64">
</canvas>
</figure>
<p>They’re easy to use, and pretty lightweight, so they
shouldn’t rain on your parade:</p>
<pre><canvas id="icon1" width="128" height="128"></canvas>
<canvas id="icon2" width="128" height="128"></canvas>
<script>
var skycons = new Skycons({<span class="constant">"color"</span>: <span class="constant">"pink"</span>});
<span class="comment">// on Android, a nasty hack is needed: {"resizeClear": true}</span>
<span class="comment">// you can add a canvas by it's ID...</span>
skycons.add(<span class="constant">"icon1"</span>, Skycons.PARTLY_CLOUDY_DAY);
<span class="comment">// ...or by the canvas DOM element itself.</span>
skycons.add(document.getElementById(<span class="constant">"icon2"</span>), Skycons.RAIN);
<span class="comment">// if you're using the Forecast API, you can also supply
// strings: "partly-cloudy-day" or "rain".</span>
<span class="comment">// start animation!</span>
skycons.play();
<span class="comment">// you can also halt animation with skycons.pause()</span>
<span class="comment">// want to change the icon? no problem:</span>
skycons.set(<span class="constant">"icon1"</span>, Skycons.PARTLY_CLOUDY_NIGHT);
<span class="comment">// want to remove one altogether? no problem:</span>
skycons.remove(<span class="constant">"icon2"</span>);
</script></pre>
<p>Skycons were designed for <a href="http://forecast.io/">Forecast</a>
by those wacky folks at <strong>The Dark Sky Company</strong>, and were
heavily inspired by Adam Whitcroft’s excellent
<a href="http://adamwhitcroft.com/climacons/">Climacons</a>. The source
code is available on
<a href="http://github.com/darkskyapp/skycons">Github</a>, and has been
<a href="http://creativecommons.org/publicdomain/zero/1.0/">released
into the public domain</a>, so please do with it as you see fit!
♡</p>
</article>
<script src="skycons.js"></script>
<script>
var icons = new Skycons(),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for(i = list.length; i--; )
icons.set(list[i], list[i]);
icons.play();
</script>
</body>
</html>