path: root/modules-available/roomplanner/templates/svg-plan.html

<svg xmlns="http://www.w3.org/2000/svg"
	  xmlns:xlink="http://www.w3.org/1999/xlink"
	  version="1.1"
	  viewBox="0 0 {{width}} {{height}}"
	  width="{{width}}mm"
	  height="{{height}}mm">
	<style type="text/css">
		<![CDATA[
		rect {
			stroke: #000;
		}
		rect.kb {
			fill: #999;
			stroke-width: .1;
		}
		rect.scrn {
			stroke-width: .2;
			fill: url(#screen);
		}
		g.hl rect.scrn {
			fill: url(#screenhl);
		}
		g.muted rect.scrn {
			fill: url(#muted);
			stroke: #777;
		}
		g.muted rect.kb {
			fill: #eee;
			stroke: #777;
		}
		]]>
	</style>
	<defs>
		<radialGradient id="screen" cx=".4" cy=".3" r="1">
			<stop offset="0%" stop-color="#888" />
			<stop offset="100%" stop-color="#000" />
		</radialGradient>
		<radialGradient id="screenhl" cx=".4" cy=".3" r="1">
			<stop offset="0%" stop-color="#afa" />
			<stop offset="100%" stop-color="#074" />
		</radialGradient>
		<radialGradient id="muted" cx=".4" cy=".3" r="1">
			<stop offset="0%" stop-color="#fff" />
			<stop offset="100%" stop-color="#999" />
		</radialGradient>
	</defs>
	<g transform="scale({{scale}}) rotate({{rotate}} {{centerX}} {{centerY}})">
		<line x1="0" y1="{{line.y}}"
				x2="{{line.x}}" y2="{{line.y}}"
				style="stroke:#555;stroke-width:.2;opacity:.5" />
		{{#machines}}
			{{#links}}
				<a xlink:href="./?do=statistics&amp;uuid={{machineuuid}}">
			{{/links}}
			<g transform="translate({{gridCol}} {{gridRow}})" class="{{class}}">
				<rect transform="rotate({{rotation}} 1.9 1.9)"
						x=".1"
						y="2.6"
						height="1"
						width="3.6"
						class="kb" />
				<rect transform="rotate({{rotation}} 1.9 1.9)"
						x=".2"
						y=".2"
						rx=".4"
						ry=".4"
						height="2.2"
						width="3.4"
						class="scrn" />
			</g>
			{{#links}}
				</a>
			{{/links}}
		{{/machines}}
	</g>
</svg>