geographicalloadbalancing.github.com/svgmap.xhtml at master · geographicalloadbalancing/geographicalloadbalancing.github.com · GitHub

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Data center visualization</title>
	<style type="text/css">
		body {
			font-family: "DejaVu Sans", sans-serif;
			font-size: 9pt;
		}
		.accel {
			text-decoration: underline;
		}
	</style>
	<script type="text/javascript"><![CDATA[
		var svgmap;
		var timing_elem;
		var num_steps;
		var timelapse_factor;
		var duration;
		var seeker;

		/** Updates the position of the slider according to the animation's current position. */
		function update_seeker() {
			var cur_time = svgmap.getCurrentTime();
			seeker.value = cur_time;
			update_seeker_indicator(cur_time);
		}
		var seeker_updater = undefined;

		/** Whether the animation is currently set to paused (as opposed to just being temporarily paused while user drags the slider). */
		var underlying_is_playing = true;	// Browser starts playing automatically
		/** Toggles whether the animation is set to running, and updates the play/pause button's label. */
		function toggle_paused() {
			underlying_is_playing = !underlying_is_playing;
			set_playing(underlying_is_playing);
			if(!underlying_is_playing)
				update_seeker();	// Display the final value when pausing
			// Update label according to setting
			document.getElementById('pause_btn').innerHTML =
				underlying_is_playing ? '<span class="accel">P</span>ause' : '<span class="accel">P</span>lay';
		}
		/**
		Sets whether the animation is playing as opposed to paused.
		@param play specify true to start playing, false to pause
		*/
		function set_playing(play) {
			if(play) {
				seeker_updater = setInterval(update_seeker, 50 /*ms*/);	// resume seeker updating
				svgmap.unpauseAnimations();
			} else {
				svgmap.pauseAnimations();
				// Pause updating of seeker, freezing on the current time of the animation while paused
				if(seeker_updater != undefined) {
					clearInterval(seeker_updater);
					seeker_updater = undefined;
				}
			}
		}

		/** Pauses updating of the seeker while the user is dragging the slider. */
		function pause_while_dragging() {
			set_playing(false);
		}
		function resume_after_dragging() {
			set_playing(underlying_is_playing);
		}
		/** Updates the textual display of the exact time. */
		function update_seeker_indicator(f ) {
			document.getElementById('seeker_indicator').innerHTML = (f * timelapse_factor / 3600.0).toFixed(2);
		}

		/** Sets the animation's current position. */
		function seek(new_time) {
			svgmap.setCurrentTime(new_time);
		}

		/** Stuff to execute as soon as all the DOM elements are finished loading */
		window.onload = function init() {
			/** The svgmap DOM object. */
			svgmap = document.getElementById('svgmap').contentDocument.documentElement;

			// Read time info from the map's metadata
			timing_elem = document.getElementById('svgmap').contentDocument.getElementById('timing');
			num_steps = +timing_elem.getAttribute('numSteps');
			// world_time_per_step / anim_time_per_step
			timelapse_factor = +timing_elem.getAttribute('timelapseFactor');
			duration = +timing_elem.getAttribute('duration');
			// Set properties of the seeker
			seeker = document.getElementById('seeker');
			seeker.max = duration;
			seeker.step = duration / num_steps;	// Make each step of the slider match one step of the animation

			// Start animation paused @@@@HACK
			toggle_paused();
		};
	]]></script>
</head>
<body>
	<header>
		<h1>Data center visualization</h1>
	</header>
	<object id="svgmap" data="out.svg" width="100%"/>
	<nav id="controls">
		<button id="pause_btn"
			onclick="toggle_paused()"
			style="width: 4em;"
			autofocus="autofocus" accesskey="p">Play/pause
		</button>
		<input id="seeker"
			type="range" min="0.0" max="123.0" value="0.0"
			style="
				width: -moz-calc(100% - 15em);
				width: -webkit-calc(100% - 15em);
				width: calc(100% - 15em);
			"
			onchange="update_seeker_indicator(this.value); seek(this.value);"
			onmousedown="pause_while_dragging();"
			onmouseup="resume_after_dragging();"
		/>
		<label for="seeker" style="display: inline-block; width: 7em">
			<span id="seeker_indicator">0.0</span>
			hrs.
		</label>
	</nav>
</body>
</html>