Skip to content

Instantly share code, notes, and snippets.

@joshfinnie

joshfinnie/index.html

Created January 15, 2014 04:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joshfinnie/8430590 to your computer and use it in GitHub Desktop.
Save joshfinnie/8430590 to your computer and use it in GitHub Desktop.
Download ZIP
The source code for my Raspberry Pi "Dashboard"
Raw
index.html
!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<title>Today</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
body {
font-family: "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background-color: #B2E6FF;
color: white;
}
.clock {
font-size: 200px;
}
.cal {
font-size: 100px;
}
.weather-day {
font-size: 50px;
}
.weather-high {
font-size: 50px;
}
.weather-low {
font-size: 50px;
opacity:0.5;
}
</style>
<script>
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
var month = today.getMonth();
var day = today.getDate();
var year = today.getFullYear();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('time').innerHTML=h + " : " + m + " : " + s;
document.getElementById('date').innerHTML=(month+1) + "/" + day + "/" + year;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i) {
if (i < 10){
i = "0" + i;
}
return i;
}
$(document).ready(function () {
var url = 'https://api.forecast.io/forecast/<API_KEY>/<LAT>,<LON>';
var weekday=new Array(7);
weekday[0]="Sun";
weekday[1]="Mon";
weekday[2]="Tues";
weekday[3]="Wed";
weekday[4]="Thurs";
weekday[5]="Fri";
weekday[6]="Sat";
$.ajax({
type: 'GET',
url: url,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function(data) {
$.each(data.daily.data, function(i, item){
var day = new Date(item.time * 1000);
document.getElementById('weather-day-' + i).innerHTML = weekday[day.getDay()];
document.getElementById('weather-high-' + i).innerHTML = item.temperatureMax + '&deg;';
document.getElementById('weather-low-' + i).innerHTML = item.temperatureMin + '&deg;';
});
}
});
});
</script>
</head>
<body onload="startTime()">
<div id="time" class="text-center clock"></div>
<div id="date" class="text-center cal"></div>
<div class="row">
<div class="col-md-2 col-md-offset-1 text-center"><span id="weather-day-0" class='weather-day'></span><br /><span id="weather-high-0" class="weather-high"></span><br /><span id="weather-low-0" class="weather-low"></span></div>
<div class="col-md-2 text-center"><span id="weather-day-1" class='weather-day'></span><br /><span id="weather-high-1" class="weather-high"></span><br /><span id="weather-low-1" class="weather-low"></span></div>
<div class="col-md-2 text-center"><span id="weather-day-2" class='weather-day'></span><br /><span id="weather-high-2" class="weather-high"></span><br /><span id="weather-low-2" class="weather-low"></span></div>
<div class="col-md-2 text-center"><span id="weather-day-3" class='weather-day'></span><br /><span id="weather-high-3" class="weather-high"></span><br /><span id="weather-low-3" class="weather-low"></span></div>
<div class="col-md-2 text-center"><span id="weather-day-4" class='weather-day'></span><br /><span id="weather-high-4" class="weather-high"></span><br /><span id="weather-low-4" class="weather-low"></span></div>
</div>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment