Skip to content

Instantly share code, notes, and snippets.

@spencerthayer
Created November 17, 2014 17:23
Show Gist options
  • Save spencerthayer/ed7e4ae89d774a2d0113 to your computer and use it in GitHub Desktop.
Save spencerthayer/ed7e4ae89d774a2d0113 to your computer and use it in GitHub Desktop.
A Pen by Spencer Thayer.
<div id="info">
<div id="time">
<span id="hour"></span><span class="colon">:</span><span id="minute"></span><span class="colon">:</span><span id="second"></span><span id="meridian"></span>
</div>
<div id="date"></div>
<div id="weather">
<span id="verb"></span>
<span id="temp"></span>
<br/>
<span id="city"></span>
<span id="geolocation"></span>
</div>
/////////////////////
// GRADIENT COLORS
/////////////////////
var grads = [
[{
color: "00000c",
position: 0
}, {
color: "00000c",
position: 0
}],
[{
color: "020111",
position: 85
}, {
color: "191621",
position: 100
}],
[{
color: "020111",
position: 60
}, {
color: "20202c",
position: 100
}],
[{
color: "020111",
position: 10
}, {
color: "3a3a52",
position: 100
}],
[{
color: "20202c",
position: 0
}, {
color: "515175",
position: 100
}],
[{
color: "40405c",
position: 0
}, {
color: "6f71aa",
position: 80
}, {
color: "8a76ab",
position: 100
}],
[{
color: "4a4969",
position: 0
}, {
color: "7072ab",
position: 50
}, {
color: "cd82a0",
position: 100
}],
[{
color: "757abf",
position: 0
}, {
color: "8583be",
position: 60
}, {
color: "eab0d1",
position: 100
}],
[{
color: "82addb",
position: 0
}, {
color: "ebb2b1",
position: 100
}],
[{
color: "94c5f8",
position: 1
}, {
color: "a6e6ff",
position: 70
}, {
color: "b1b5ea",
position: 100
}],
[{
color: "b7eaff",
position: 0
}, {
color: "94dfff",
position: 100
}],
[{
color: "9be2fe",
position: 0
}, {
color: "67d1fb",
position: 100
}],
[{
color: "90dffe",
position: 0
}, {
color: "38a3d1",
position: 100
}],
[{
color: "57c1eb",
position: 0
}, {
color: "246fa8",
position: 100
}],
[{
color: "2d91c2",
position: 0
}, {
color: "1e528e",
position: 100
}],
[{
color: "2473ab",
position: 0
}, {
color: "1e528e",
position: 70
}, {
color: "5b7983",
position: 100
}],
[{
color: "1e528e",
position: 0
}, {
color: "265889",
position: 50
}, {
color: "9da671",
position: 100
}],
[{
color: "1e528e",
position: 0
}, {
color: "728a7c",
position: 50
}, {
color: "e9ce5d",
position: 100
}],
[{
color: "154277",
position: 0
}, {
color: "576e71",
position: 30
}, {
color: "e1c45e",
position: 70
}, {
color: "b26339",
position: 100
}],
[{
color: "163C52",
position: 0
}, {
color: "4F4F47",
position: 30
}, {
color: "C5752D",
position: 60
}, {
color: "B7490F",
position: 80
}, {
color: "2F1107",
position: 100
}],
[{
color: "071B26",
position: 0
}, {
color: "071B26",
position: 30
}, {
color: "8A3B12",
position: 80
}, {
color: "240E03",
position: 100
}],
[{
color: "010A10",
position: 30
}, {
color: "59230B",
position: 80
}, {
color: "2F1107",
position: 100
}],
[{
color: "090401",
position: 50
}, {
color: "4B1D06",
position: 100
}],
[{
color: "00000c",
position: 80
}, {
color: "150800",
position: 100
}],
];
/////////////////////
// TIME TO GRADIENT
/////////////////////
function toCSSGradient(data) {
var css = "linear-gradient(to bottom, ";
var len = data.length;
for (var i = 0; i < len; i++) {
var item = data[i];
css += " #" + item.color + " " + item.position + "%";
if (i < len - 1) css += ",";
}
return css + ")";
}
function updateTime() {
d = moment();
d.local();
return d.hours();
}
function updateBasedOnNow() {
setCSSGradientByIndex(updateTime());
}
function setCSSGradientByIndex(nInx) {
if (nInx != inx) {
inx = nInx;
var data = grads[inx];
if (data == null) return;
// convert data to gradient
var css = toCSSGradient(data);
// update the background
$("body").css("background", css);
}
/////////////////////
// SET TIME
/////////////////////
d.hours(inx);
$("#hour").html(d.format('hh'));
$("#minute").html(d.format('mm'));
$("#second").html(d.format('ss'));
$("#meridian").html(d.format('a'));
/**/
$("#date").html(d.format('MMMM Do YYYY'));
// CONSOLE out put for DEBUGGING ONLY
console.log(d.format('MMMM Do YYYY [\n]h:mm:ss a'));
}
/////////////////////
// GEO LOCATION
/////////////////////
function getLocation() {
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.getCurrentPosition(
showLocation,
function () {
showLocation(defaultLocation);
}, {
enableHighAccuracy: true,
timeout: timeoutVal,
maximumAge: 0
}
);
} else {
showLocation(defaultLocation);
alert("Geolocation is not supported by this browser");
}
}
function showLocation(position) {
console.log(position);
getSunInfo(position.coords.latitude, position.coords.longitude);
getWeather(position.coords.latitude, position.coords.longitude, showWeather);
}
/////////////////////
// GET WEATHER
/////////////////////
function getWeather(lat, lon, callback) {
var api = "http://api.openweathermap.org/data/2.5/weather";
api += "?lat=" + lat;
api += "&lon=" + lon;
$("#weatherId").html("Loading Weather Info...");
$.ajax({
url: api,
dataType: 'jsonp',
success: callback
});
}
/////////////////////
// GET SUN POSITION
/////////////////////
function getSunInfo(lat, lng) {
var data = new Date();
var di = SunCalc.getDayInfo(data, lat, lng);
var sunrisePos = SunCalc.getSunPosition(di.sunrise.start, lat, lng);
var sunsetPos = SunCalc.getSunPosition(di.sunset.end, lat, lng);
var sR = moment(di.sunrise.start);
var sS = moment(di.sunset.end);
var daylightHours = sS.diff(sR, 'hours');
console.log("getDayInfo", di);
console.log("daylightHours", daylightHours);
}
/////////////////////
// WEATHER OUTPUT
/////////////////////
function kelvinToFDegrees(kelvin) {
return Math.round((1.8 * (kelvin - 273) + 32));
}
function showWeather(response) {
var locationName = response.name +": ";
var lat = response.coord.lat;
var lon = response.coord.lon;
var weatherDesc = response.weather[0].description;
var temp = kelvinToFDegrees(response.main.temp) +
"&#186;";
var geolocation = lat + ', ' + lon;
$("#temp").html(temp);
$("#verb").html(weatherDesc);
$("#city").html(locationName);
$("#geolocation").html(geolocation);
console.log(response);
console.log(result);
}
/////////////////////
// XXX
/////////////////////
var d = moment();
var h = updateTime();
var inx = -1;
var defaultLocation = {
coords: {
latitude: 0.000,
longitude: 0.000
}
};
setCSSGradientByIndex(h);
getLocation();
/////////////////////
// CLOCK SPEED
/////////////////////
// TIME POLLING
var interval = setInterval(function () {
updateBasedOnNow();
}, 60 * 1);
// GEO POLLING
var interval2 = setInterval(function () {
getLocation();
}, 60 * 1000);
/////////////////////
// FORCE UPDATE
/////////////////////
$("#info").click(function () {
updateBasedOnNow();
});
/////////////////////
// SHADOW
/////////////////////
var shadowObject = $('#info')
var textCenterTop = shadowObject.offset().top + (shadowObject.height() / 2);
var textCenterLeft = shadowObject.offset().left + (shadowObject.width() / 2);
$(document).on('mousemove', function(e) {
var mx = e.clientX;
var my = e.clientY;
var deltaX = textCenterLeft - mx;
var deltaY = textCenterTop - my;
var shadowBlur = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY));
shadowObject.css({
"text-shadow" : deltaX / 20 + "px " + deltaY / 20 + "px " + shadowBlur / 20 +"px " + "rgba(0,0,0,.5)",
"-webkit-text-shadow" : deltaX / 20 + "px " + deltaY / 20 + "px " + shadowBlur / 20 +"px " + "rgba(0,0,0,.5)",
"-moz-text-shadow" : deltaX / 20 + "px " + deltaY / 20 + "px " + shadowBlur / 20 +"px " + "rgba(0,0,0,.5)",
"-o-text-shadow" : deltaX / 20 + "px " + deltaY / 20 + "px " + shadowBlur / 20 +"px " + "rgba(0,0,0,.5)"
});
});
@import url("http://fonts.googleapis.com/css?family=Lato:100");
html, body {
font-family: Lato, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
color: #FFF;
font-weight: 100;
font-size: 200%;
width: 100%; min-width: 100%;
height: 100%; min-height: 100%;
margin: 0; padding: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#info {
text-align:right;
margin-top: 0 auto;
margin-right: 0 auto;
margin-bottom: 0 auto;
margin-left: 0 auto;
}
#time {
font-size: 250%;
}
#hour {
}
#minute {
}
#second {
}
#meridian {
font-size: 25%;
}
.colon {
position: relative;
display: inline-block;
font-size: 50%;
}
#date {
font-size: 100%;
}
#verb {
font-size: 50%;
}
#city {
font-size: 50%;
}
#geolocation {
font-size: 50%;
}
#temp {
font-size: 300%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment