[roomplanner] Implement (auto)rotating SVG, make SVG pretty

1 files changed, 41 insertions, 11 deletions

diff --git a/modules-available/roomplanner/templates/svg-plan.html b/modules-available/roomplanner/templates/svg-plan.html
index 1fdb5d1a..5e1e13b2 100644
--- a/modules-available/roomplanner/templates/svg-plan.html
+++ b/modules-available/roomplanner/templates/svg-plan.html
@@ -7,24 +7,54 @@
 	  height="{{height}}mm">
 	<style type="text/css">
 		<![CDATA[
-      rect {
+		rect {
 			stroke: #000;
-			fill: #fff;
-			stroke-width: .5;
+		}
+		rect.kb {
+			fill: #999;
+			stroke-width: .1;
+		}
+		rect.scrn {
+			stroke-width: .2;
+			fill: url(#screen);
 		}
 		rect.hl {
-			fill: #f00;
+			fill: url(#screenhl);
 		}
 		]]>
 	</style>
-	<g transform="translate(-{{minX}}, -{{minY}})">
+	<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="#f83" />
+			<stop offset="100%" stop-color="#b55" />
+		</radialGradient>
+	</defs>
+	<g transform="translate({{shiftX}}, {{shiftY}}) rotate({{rotate}} {{centerX}} {{centerY}})">
+		<line x1="{{line.x1}}" y1="{{line.y1}}"
+				x2="{{line.x2}}" y2="{{line.y2}}"
+				style="stroke:#555;stroke-width:.2;opacity:.5" />
 		{{#machines}}
-		<rect
-				x="{{gridCol}}"
-				y="{{gridRow}}"
-				height="3.8"
-				width="3.8"
-				class="{{class}}" />
+			<g transform="translate({{gridCol}} {{gridRow}})">
+				<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 {{class}}"
+						/>
+			</g>
 		{{/machines}}
 	</g>
 </svg>