diff options
| author | Simon Rettberg | 2019-03-18 17:50:59 +0100 |
|---|---|---|
| committer | Simon Rettberg | 2019-03-18 17:51:19 +0100 |
| commit | 892cba67fba9c442d77be1d467e2152b188c3a81 (patch) | |
| tree | ddf58d419339314c4170e48ef2c01427fde90bd9 /modules-available/roomplanner/templates/svg-plan.html | |
| parent | [locations] Fix division by zero (diff) | |
| download | slx-admin-892cba67fba9c442d77be1d467e2152b188c3a81.tar.gz slx-admin-892cba67fba9c442d77be1d467e2152b188c3a81.tar.xz slx-admin-892cba67fba9c442d77be1d467e2152b188c3a81.zip | |
[roomplanner] Implement (auto)rotating SVG, make SVG pretty
Diffstat (limited to 'modules-available/roomplanner/templates/svg-plan.html')
| -rw-r--r-- | modules-available/roomplanner/templates/svg-plan.html | 52 |
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> |