-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
196 lines (178 loc) · 11.5 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html>
<head>
<title>gloam.io – the discovery of the day</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="Nikolas Klein">
<meta name="keywords" content="Nikolas, Klein, Web, Design, Darmstadt, Interaktionsgestaltung, Ghana, Hochschule für Gestaltung, Schwäbisch Gmünd, HfG">
<meta name="language" content="German">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="content-type" content="text/html; charset=UTF-8;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script src="js/rainbowvis.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/transit.js"></script>
<script src="js/jquery.parse.min.js"></script>
<script src="js/basic.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/debounce.js"></script>
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
</script>
</head>
<body>
<div id="editingNow">developing right now — adding possibility to take a screenshot</div>
<div id="backgroundImage"></div>
<div id="fullscreenwrapper">
<div id="console"><span id="console_first">consol</span><br><span id="console_second"></span></div>
<div id="consoleTwo">dont find me??</div>
<div id="gradientwrapper"></div>
<div id="detailLatitude"></div>
<div id="groundlayer" class="layer">
<div id="timehandler">
<div id="timehandlerWrapper">
<div id="timehandlerCircle">
</div>
</div>
</div> </div>
<div id="secondlayer" class="layer" style="display:none"></div>
<div id="thirdlayer" class="layer">
<div class="cell vmiddle">
<div class="container" id="introductionText">
<h1 class="mainMenu fadeInBottomHideFar">gloam.io</h1>
<p class="mainMenu fadeInBottomHideFar">
gloam.io is an interactive data visualization, that calculates—based on given latitudes—the sunrise, sunset and twilight times and creates a mesmerizing and stunning experience. <a href="http://vimeo.com/nikolasklein/gloam" title="made with gloam.io">watch the video</a> <br>
<span class="betahide credit">– handcrafted by <a href="http://www.nikolasklein.de">Nikolas Klein</a></span>
</p>
<div id="readmoreText">
<h2>Where does it come from?</h2>
It started as a student project at the HfG Schwäbisch Gmünd. The task was to create something that visualizes programmed and repeated data. I found it interesting to work with sunrise and sunset times, because not only do they change over the course of a year, but they also change differently according to your location on earth.<br>
When I had submitted my project in July 2014, I decided to continue developing it and therefore created the interface and the touchversion.
<h2>Basic functionality</h2>
If you tap/click in gloam.io it triggers a series of events. gloam.io calculates the latitude depending on the y-position of your tap/click in relation to the whole window height. That latitude will be transferred to a PHP-Script to calculate the sunrise, sunset and twilight times. When these times come back from the server they are used to create a gradient according to the global date and time. gloam.io interpolates between sunrise, sunset and astronomically defined twilight times to create a smooth transition.
<h2>Colors</h2>
This was one of the hardest parts of my project. gloam.io interpolates on 4 different levels between 24 colors. So there are nearly 100 different color hues which are used to create this visualization. They were handpicked by watching a lot of sunrise/sunset time-lapses and then adjusted to the overall look and feel.
<h2>Who did this?</h2>
My name is <a href="http://www.nikolasklein.de" title="visit my website">Nikolas Klein</a> and im studying Interaction Design at the <a href="http://www.hfg-Gmünd.de" title="HfG Schwäbisch Gmünd">HfG in Schwäbisch Gmünd</a>. I love what I'm doing! If you have any feedback or want to contact me—<a href="mailto:[email protected]?subject=Hi%20Niko!">feel free to do so!</a><br>
<h2>presskit <span class="betahide"> / with high-res images</span></h2>
<a href="presskit.zip" title="presskit with high-res images … // 9MB" id="postcards"><img src="presskit.jpg" width="100%" height="auto" alt="presskit with high-res images … // 9MB"></a><br>
<h2>set of postcards <span class="betahide"> / ready to print</span></h2>
<a href="postcards.pdf" title="download a set of postcards here …" id="postcards"><img src="postcards.jpg" alt="postcards" width="100%" height="auto" alt="download a set of postcards / ready to print"></a>
<h2>#nicetohave<span class="betahide"> / my todo list</span></h2>
<ul class="nicetohave">
<li>sharing of created visualizations (!)</li>
<li>fixing rendering issues in safari and firefox</li>
<li>debounce and throttle a lot of inputs</li>
<li>swipe to navigate up and down in menu</li>
<li>PHP bug fixing when there is polar night/day</li>
<li>possibility to delete only one element</li>
<li>jump tutorial steps with keyboard</li>
<li>save skipped tutorial in cookie</li>
<li>modernizr check</li>
</ul>
<h2>#done <span class="betahide"> / <a href="https://github.com/nikolasklein/gloam.io" title="gloam.io on github" target="_blank">code on github</a></span></h2>
<ul class="nicetohave">
<li>adding capture button for screenshots (10-29-14)</li>
<li>not calling it beta anymore (10-27-14)</li>
<li>UX tweaking for mouse-input (10-27-14)</li>
<li>direct feedback while trying to delete (10-19-14)</li>
<li>better swipe detection when deleting (10-19-14)</li>
<li>added latitude information (10-17-14)</li>
<li>implement mouse input (10-16-14)</li>
<li>better cross browser support (10-16-14)</li>
</ul>
<h2>Thanks!</h2>
<p>
Thanks to everyone who helped me with my project. Thanks to all my friends at the HfG for enduring endless talks and being my hardest critics at the same time. Thanks to Frank and Torsten for helping me with print and photography. Thanks to my good friend Erik for translation support and thanks to Prof. Jens Döring and Prof. Michael Götte for getting me started on this project and all the advice along my way. And thanks to <a href="http://www.sonnenaufgang-sonnenuntergang.de" target="_blank">Guido Gerding</a> for the astronomical input.
</p>
<span class="betahide credit">This work and the downloadable content is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. Google Analytics is used.</span>
</div>
<div class="button mainMenu fadeInBottomHideFar" id="readmore">read more …</div>
<div class="button mainMenu fadeInBottomHideFar" id="start">start</div>
</div>
</div>
</div>
<div id="sharelayer" class="layer">
<div class="cell vmiddle">
<div class="container" id="sharingText">
<h1 class="shareMenu fadeInTopHideFar">sharing<span class="betahide">/not quite ready</span></h1>
<div class="shareMenu fadeInTopHideFar shareTextP">
<p>
Of course I want you to share your own beautiful visualisations—I'm working on that.
</p>
<p>
Clicking on capture will hide the GUI giving you the possibility to hold the moment with a screenshot.
</p>
<p>
In the meantime there is still the option to share gloam.io itself, if you like it. Or check it out on <a href="https://github.com/nikolasklein/gloam.io" title="gloam.io on github" target="_blank">github</a>.
</p>
</div>
<span id="captureButtonWrap" class="inactive"><div class="button shareMenu fadeInTopHideFar sharebutton" id="captureButton">capture</div></span>
<a target="_blank" class="shareLink" href="https://www.facebook.com/sharer/sharer.php?u=http://www.gloam.io" title="share gloam.io on facebook">
<div class="button shareMenu fadeInTopHideFar sharebutton socialShare" id="facebookshare">sh</div>
</a>
<a target="_blank" class="shareLink" href="https://twitter.com/share?text=&hashtags=dataviz,creativecoding,gloam" title="tweet about gloam.io">
<div class="button shareMenu fadeInTopHideFar sharebutton socialShare" id="twittershare">sh</div>
</a>
<a target="_blank" class="shareLink" href="https://plus.google.com/share?url=http://www.gloam.io" title="share gloam.io on google+">
<div class="button shareMenu fadeInTopHideFar sharebutton socialShare" id="googleshare">sh</div>
</a>
</div>
</div>
</div>
<div id="deletelayer" class="layer noselect"></div>
<div class="instructionwrapper">
<div class="instruction fadeInBottomHide" id="instructionTap">Tap anywhere to create a gradient.</div>
</div>
<div class="instructionwrapper">
<div class="instruction fadeInBottomHide" id="adjustTime">Swipe around to change date and time.</div><br>
<div class="fadeInBottomHide" id="adjustTimeText">XXX</div>
</div>
<div class="instructionwrapper">
<div class="instruction fadeInBottomHide" id="doubletapEnter">Tap and hold to adjust.</div><br>
</div>
<div class="instructionwrapper">
<div class="instruction fadeInBottomHide" id="adjustLatitude">Swipe around to adjust the latitudes.</div><br>
<div class="fadeInBottomHide" id="adjustLatitudeText">The latitudes are constrained from 65° to -65° because of polar night and day values.</div>
</div>
<div class="instructionwrapper">
<div class="instruction fadeInBottomHide" id="doubletapExit">After adjusting just hold again to reload.</div><br>
</div>
<div class="instructionwrapper">
<div class="instruction fadeInBottomHide" id="finished">There you go! Enjoy creating your visualisations.</div><br>
</div>
<div class="skipwrapper">
<div class="progressbg button fadeInTopHide" id="skip">skip tutorial</div>
</div>
<div class="menuwrapper">
<div class="button menuitem nohover fadeInSideHide coremenu" id="share"></div><br>
<!-- class extra ist das weiterführende menü - wie z.B. settings oder sowas -->
<div class="button menuitem nohover fadeInSideHide coremenu" id="menu"></div>
</div>
<div class="menuwrapper left">
<div class="button menuitem nohover fadeInSideHideRight coremenuLeft progressbg" id="delete">
<div id="deleteText" class="deleteTextHidden">To delete the gradients just swipe—up up and away.</div>
</div>
</div>
</div>
</body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41728625-5', 'auto');
ga('send', 'pageview');
</script>
</html>