Skip to content

@dhornbein /index.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A concept for the Phenological clock web app. This page pulls JSON from a Google Spreadsheet then renders it with canvas
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Phenological Clock</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script>
Date.prototype.getDOY = function() {
var onejan = new Date(this.getFullYear(),0,1);
return Math.ceil((this - onejan) / 86400000);
}
function trim (str) {
if (str instanceof Array) {
for(i = 0; i < str.length; i++){
str[i] = str[i].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
} else {
str = str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
return str;
}
function GDimport(json){
console.dir( json );
var out = [];
for(i = 0; i < json.feed.entry.length; i++){
entry = json.feed.entry[i];
out[i] = {
'id': entry.gsx$id.$t,
'categories': entry.gsx$category.$t.split(','),
'category': entry.gsx$category.$t,
'name': entry.gsx$name.$t,
'events': [
{
'start': entry.gsx$eventstart.$t,
'end': entry.gsx$eventend.$t
}
],
'description': entry.gsx$description.$t,
'color': entry.gsx$color.$t.replace('#','')
};
}
dataset = out;
console.log(dataset);
}
var dataset = {};
</script>
<script src="http://spreadsheets.google.com/feeds/list/0AgeC4_lD2gMbdHQyZEVhRS1tcmJRS21kTnYtOUR6bUE/1/public/values?alt=json-in-script&amp;callback=GDimport"></script>
<style>
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
* { margin:0;
padding:0; }
html, body { width:100%; height:100%; font-family: 'Varela Round', sans-serif;}
canvas { display:block; margin:0 auto; }
h3 { font-weight: normal; text-align: center; margin-top:1em; }
h3 a { color: #E32726;}
</style>
</head>
<body>
<h3>Phenological Clock Test</h3>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 25;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
var c = 0 //number of entries
for (var s=0; s<dataset.length; s++)
{
for (var i=0; i<dataset[i].events.length; i++)
{
var start = dataset[s].events[i].start;
var end = dataset[s].events[i].end;
console.log('context.arc(x, y, radius + (14.5 * '+s+'), '+date_to_radial(start)+', '+date_to_radial(end)+', '+counterClockwise+')');
context.beginPath();
context.arc(x, y, radius + (14.5 * s), date_to_radial(start), date_to_radial(end), counterClockwise); // Draw a circle
context.lineWidth = 15;
// line color
context.strokeStyle = dataset[s]['color'];
context.stroke();
c++;
}
}
function date_to_radial(date) {
var date = new Date(date);
var dayOfYear = date.getDOY();
var ratio = dayOfYear / 365; // do we really need to worry about leap years?
var degrees = ratio * 360;
var radians = degrees * ( Math.PI / 180);
return radians;
}
</script>
<p style="text-align:center">This data is being pulled <em>live</em> from a <a href="https://docs.google.com/spreadsheet/ccc?key=0AgeC4_lD2gMbdHQyZEVhRS1tcmJRS21kTnYtOUR6bUE">Google Spreadsheet</a>.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.