1<?xml version="1.0" encoding="UTF-8"?>
2<svg version="1.1" baseProfile="full" width="606" height="406"
3  xmlns="http://www.w3.org/2000/svg">
4 <style type="text/css">
5  rect {
6   fill: #DDDDDD;
7   stroke: #000000;
8   stroke-width: 4;
9  }
10  rect.xwin {
11   fill: #000000;
12  }
13  polyline {
14   fill: none;
15   stroke: #000000;
16  }
17 </style>
18
19 <!-- Monitors -->
20 <rect width="400" height="200" x="3" y="3" class="monitors" />
21 <text x="15" y="25" class="monlabel">Mon1</text>
22 <rect width="200" height="400" x="403" y="3" class="monitors" />
23 <text x="585" y="25" text-anchor="end" class="monlabel">Mon2</text>
24
25 <!-- Fill out the rest of the root -->
26 <polyline points="2,202 2,404 402,404" class="monitors"
27   style="stroke-width: 2; stroke-dasharray: 2,3;" />
28 <text x="15" y="385" class="monlabel">(dead space)</text>
29
30 <!-- Horizontal stripes -->
31 <rect width="600" height="200" x="3" y="3" class="hstripe" />
32 <text x="15" y="25" class="hslabel">Hstripe1</text>
33 <rect width="200" height="200" x="403" y="203" class="hstripe" />
34 <text x="585" y="385" text-anchor="end" class="hslabel">Hstripe2</text>
35
36 <!-- Vertical stripes -->
37 <rect width="400" height="200" x="3" y="3" class="vstripe" />
38 <text x="15" y="25" class="vslabel">Vstripe1</text>
39 <rect width="200" height="400" x="403" y="3" class="vstripe" />
40 <text x="585" y="385" text-anchor="end" class="vslabel">Vstripe2</text>
41
42 <!-- A window to position -->
43 <rect width="150" height="150" x="25" y="25" class="xwin" id="xwin" />
44
45
46
47 <!-- JSery to grub out query params -->
48 <script type="text/javascript"><![CDATA[
49	// Parameters we expect and their defaults
50	var params = {
51		// Visibility
52		v_monitors: 0,
53		v_monlabel: 0,
54		v_hstripe: 0,
55		v_hslabel: 0,
56		v_vstripe: 0,
57		v_vslabel: 0,
58		v_xwin: 0,
59
60		// Opacity
61		o_monitors: 1.0,
62		o_hstripe:  1.0,
63		o_vstripe:  1.0,
64		o_xwin:     0.5,
65
66		// Flying around xtra window
67		g_xwin_w: 150,
68		g_xwin_h: 150,
69		g_xwin_x: 25,
70		g_xwin_y: 25,
71	};
72
73	// Stash keys
74	var pkeys = Object.keys(params);
75
76	// Params we were actually given (rather than defaulting)
77	var qpset = {};
78
79	// Parse params
80	(function() {
81		var qstr = window.location.hash.substring(1);
82		var xtr_re = /([^&=]+)=?([^&]*)/g;
83		var unencode = function (s) {
84			return decodeURIComponent(s.replace(/\+/g, " "));
85		};
86		var qv;
87
88		while(qv = xtr_re.exec(qstr)) {
89			if(typeof params[qv[1]] === 'undefined') {
90				console.log("Unexpected param: " + qv[1]);
91				continue;
92			}
93
94			params[unencode(qv[1])] = unencode(qv[2]);
95			qpset[unencode(qv[1])] = 1;
96		}
97	})();
98
99	// Do some defaulting
100	if(!qpset.v_monlabel)
101		params.v_monlabel = params.v_monitors;
102	if(!qpset.v_vslabel)
103		params.v_vslabel = params.v_vstripe;
104	if(!qpset.v_hslabel)
105		params.v_hslabel = params.v_hstripe;
106
107	function do_vis(fld) {
108		var vis;
109
110		// All vis params are v_
111		if(fld.indexOf('v_') !== 0) {
112			return;
113		}
114
115		if(typeof params[fld] === 'undefined')
116			return;
117		if(params[fld] != 0)
118			vis = 'visible';
119		else
120			vis = 'hidden';
121
122		var elclass = fld.substring(2);
123		var els = document.getElementsByClassName(elclass);
124		for(var i = 0 ; i < els.length ; i++) {
125			els[i].style.visibility = vis;
126		}
127
128		return;
129	}
130
131	function do_opacity(fld) {
132		// All opaq params are o_
133		if(fld.indexOf('o_') !== 0) {
134			return;
135		}
136
137		if(typeof params[fld] === 'undefined')
138			return;
139
140		var elclass = fld.substring(2);
141		var els = document.getElementsByClassName(elclass);
142		for(var i = 0 ; i < els.length ; i++) {
143			els[i].style.opacity = params[fld];
144		}
145
146		return;
147	}
148
149	function handle_geom(wname) {
150		var tw = document.getElementById(wname);
151		if(typeof tw === 'undefined' || tw == null) {
152			console.log("Can't find handle_geom(" + wname + ")");
153			return;
154		}
155
156		tw.setAttribute('width',  params["g_" + wname + "_w"]);
157		tw.setAttribute('height', params["g_" + wname + "_h"]);
158		tw.setAttribute('x',      params["g_" + wname + "_x"]);
159		tw.setAttribute('y',      params["g_" + wname + "_y"]);
160
161		return;
162	}
163
164	// Init
165	for(var i = 0 ; i < pkeys.length ; i++) {
166		var pk = pkeys[i];
167
168		if(pk.indexOf('v_') == 0) {
169			do_vis(pkeys[i]);
170		}
171		else if(pk.indexOf('o_') == 0) {
172			do_opacity(pkeys[i]);
173		}
174		else if(pk.indexOf('g_') == 0) {
175			// Geometry handling: do this separately
176		}
177	}
178
179	handle_geom('xwin');
180 ]]></script>
181</svg>
182