mtigas/sunrise.html

## sunrise.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sunlight</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">/*<![CDATA[*/
// TODO automate getting this data somehow

// http://aa.usno.navy.mil/data/docs/RS_OneDay.php

// Convert hours/minutes into minutes (60*hrs+minutes)
//   civil twilight 0453 -> 293
//   sunrise        0526 -> 326
//   sunset         2027 -> 1227
//   end twilight   2100 -> 1260

function init() {
    var vis = document.getElementById('vis');
    var WIDTH = jQuery(vis).attr('width');
    var HEIGHT = jQuery(vis).attr('height');
    var d = new Date();

    var TOTAL_MINUTES = 1440;
    var twilight = 293;
    var sunrise = 326;
    var sunset = 1227;
    var nightfall = 1260;
    var CURRENT_TIME = 60*d.getHours() + d.getMinutes();

    var context = vis.getContext('2d');
    context.fillStyle = "rgb(0,0,0)";
    context.fillRect(
        0,
        0,
        twilight * (WIDTH/TOTAL_MINUTES),
        HEIGHT
    );
    context.fillRect(
        nightfall * (WIDTH/TOTAL_MINUTES),
        0,
        (TOTAL_MINUTES-nightfall) * (WIDTH/TOTAL_MINUTES),
        HEIGHT
    );

    context.fillStyle = "rgb(100,100,100)";
    context.fillRect(
        twilight * (WIDTH/TOTAL_MINUTES),
        0,
        (sunrise-twilight) * (WIDTH/TOTAL_MINUTES),
        HEIGHT
    );
    context.fillRect(
        sunset * (WIDTH/TOTAL_MINUTES),
        0,
        (nightfall-sunset) * (WIDTH/TOTAL_MINUTES),
        HEIGHT
    );

    context.fillStyle = "rgb(250,250,210)";
    context.fillRect(
        sunrise * (WIDTH/TOTAL_MINUTES),
        0,
        (sunset-sunrise) * (WIDTH/TOTAL_MINUTES),
        HEIGHT
    );

    context.fillStyle = "rgb(0,0,255)";
    context.fillRect(
        CURRENT_TIME * (WIDTH/TOTAL_MINUTES)-1,
        0,
        3,
        HEIGHT
    );
}
jQuery(init);

/*]]>*/</script>

</head>
<body>
    <canvas id="vis" width="500" height="200" style="border:1px solid #000">
        You need a browser with <a href="https://secure.wikimedia.org/wikipedia/en/wiki/Canvas_element">HTML5 Canvas</a> support
    </canvas>
    <br />
    <img src="http://static.die.net/earth/mercator/800.jpg" alt="Map"/>
</body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Sunlight</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">/<![CDATA[/
	// TODO automate getting this data somehow

	// http://aa.usno.navy.mil/data/docs/RS_OneDay.php

	// Convert hours/minutes into minutes (60*hrs+minutes)
	// civil twilight 0453 -> 293
	// sunrise 0526 -> 326
	// sunset 2027 -> 1227
	// end twilight 2100 -> 1260

	function init() {
	var vis = document.getElementById('vis');
	var WIDTH = jQuery(vis).attr('width');
	var HEIGHT = jQuery(vis).attr('height');
	var d = new Date();

	var TOTAL_MINUTES = 1440;
	var twilight = 293;
	var sunrise = 326;
	var sunset = 1227;
	var nightfall = 1260;
	var CURRENT_TIME = 60*d.getHours() + d.getMinutes();

	var context = vis.getContext('2d');
	context.fillStyle = "rgb(0,0,0)";
	context.fillRect(
	0,
	0,
	twilight * (WIDTH/TOTAL_MINUTES),
	HEIGHT
	);
	context.fillRect(
	nightfall * (WIDTH/TOTAL_MINUTES),
	0,
	(TOTAL_MINUTES-nightfall) * (WIDTH/TOTAL_MINUTES),
	HEIGHT
	);

	context.fillStyle = "rgb(100,100,100)";
	context.fillRect(
	twilight * (WIDTH/TOTAL_MINUTES),
	0,
	(sunrise-twilight) * (WIDTH/TOTAL_MINUTES),
	HEIGHT
	);
	context.fillRect(
	sunset * (WIDTH/TOTAL_MINUTES),
	0,
	(nightfall-sunset) * (WIDTH/TOTAL_MINUTES),
	HEIGHT
	);

	context.fillStyle = "rgb(250,250,210)";
	context.fillRect(
	sunrise * (WIDTH/TOTAL_MINUTES),
	0,
	(sunset-sunrise) * (WIDTH/TOTAL_MINUTES),
	HEIGHT
	);

	context.fillStyle = "rgb(0,0,255)";
	context.fillRect(
	CURRENT_TIME * (WIDTH/TOTAL_MINUTES)-1,
	0,
	3,
	HEIGHT
	);
	}
	jQuery(init);

	/]]>/</script>

	</head>
	<body>
	<canvas id="vis" width="500" height="200" style="border:1px solid #000">
	You need a browser with <a href="https://secure.wikimedia.org/wikipedia/en/wiki/Canvas_element">HTML5 Canvas</a> support
	</canvas>
	<br />
	<img src="http://static.die.net/earth/mercator/800.jpg" alt="Map"/>
	</body>
	</html>