From 9eeafba508154b9e6d66da2d03892b60dd3dba01 Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Tue, 6 Jul 2010 11:29:20 +0000
Subject: [PATCH] SVG tweaks

git-svn-id: https://svn.fhem.de/fhem/trunk@649 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 fhem/webfrontend/pgm2/98_SVG.pm             |  9 +++-
 fhem/webfrontend/pgm2/style.css             |  2 +-
 fhem/webfrontend/pgm2/style_smallscreen.css |  3 +-
 fhem/webfrontend/pgm2/svg_defs.svg          |  7 +++
 fhem/webfrontend/pgm2/svg_style.css         | 48 +++++++++++++--------
 5 files changed, 46 insertions(+), 23 deletions(-)
 create mode 100644 fhem/webfrontend/pgm2/svg_defs.svg

diff --git a/fhem/webfrontend/pgm2/98_SVG.pm b/fhem/webfrontend/pgm2/98_SVG.pm
index edee9951f..ccc6ce4a3 100755
--- a/fhem/webfrontend/pgm2/98_SVG.pm
+++ b/fhem/webfrontend/pgm2/98_SVG.pm
@@ -67,10 +67,17 @@ SVG_render($$$$$$)
   }
   pO "]]></style>";
 
+  if(open(FH, "$__dir/svg_defs.svg")) { # gradient definitions
+    pO join("", <FH>);
+    close(FH);
+  } else {
+    Log 0, "Can't open $__dir/svg_defs.svg"
+  }
+
   # Background
   pO "<rect width =\"$ow\" height=\"$oh\" class=\"background\"/>";
   # Rectangle
-  pO "<rect x=\"$x\" y=\"$y\" width =\"$w\" height =\"$h\" ".
+  pO "<rect x=\"$x\" y=\"$y\" width =\"$w\" height =\"$h\" rx=\"8\" ry=\"8\" ".
         "fill=\"none\" class=\"border\"/>";
 
   my ($off1,$off2) = ($ow/2, 3*$y/4);
diff --git a/fhem/webfrontend/pgm2/style.css b/fhem/webfrontend/pgm2/style.css
index c5c62421e..beb611772 100644
--- a/fhem/webfrontend/pgm2/style.css
+++ b/fhem/webfrontend/pgm2/style.css
@@ -8,7 +8,7 @@ a {  color: #278727; }
 table.block { border:1px solid gray; width: 100%; background: #F8F8E0; }
 table.block tr.odd { background: #F0F0D8; }
 table.block tr.sel { background: #F0F0D8; }
-table { -moz-border-radius:8px; }
+table { -moz-border-radius:8px; -webkit-border-radius:8px; }
 
 table#room { background: #D7FFFF; }
 table#room tr.sel { background: #A0FFFF; }
diff --git a/fhem/webfrontend/pgm2/style_smallscreen.css b/fhem/webfrontend/pgm2/style_smallscreen.css
index 0dacd872f..d1f1fb05c 100644
--- a/fhem/webfrontend/pgm2/style_smallscreen.css
+++ b/fhem/webfrontend/pgm2/style_smallscreen.css
@@ -3,13 +3,12 @@ body     { background-color: #FFFFE7;}
 #menu    { position:absolute; top:10px; left:85px; }
 #hdr     { position:absolute; top:40px; left:85px; }
 #content { position:absolute; top:85px; left:10px; }
-
 a {  color: #278727; }
 
 table.block { border:1px solid gray; width: 100%; background: #F8F8E0; }
 table.block tr.odd { background: #F0F0D8; }
 table.block tr.sel { background: #F0F0D8; }
-table { -moz-border-radius:8px; }
+table { -moz-border-radius:8px; -webkit-border-radius:8px; }
 
 table#room { background: #D7FFFF; }
 table#room tr.sel { background: #A0FFFF; }
diff --git a/fhem/webfrontend/pgm2/svg_defs.svg b/fhem/webfrontend/pgm2/svg_defs.svg
new file mode 100644
index 000000000..2e553c1c8
--- /dev/null
+++ b/fhem/webfrontend/pgm2/svg_defs.svg
@@ -0,0 +1,7 @@
+<!-- will be included in each svg plot -->
+<defs>
+  <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%"   style="stop-color:#FFFFF7; stop-opacity:1"/>
+    <stop offset="100%" style="stop-color:#FFFFC7; stop-opacity:1"/>
+  </linearGradient>
+</defs>
diff --git a/fhem/webfrontend/pgm2/svg_style.css b/fhem/webfrontend/pgm2/svg_style.css
index 3e0105a4d..9d820390d 100644
--- a/fhem/webfrontend/pgm2/svg_style.css
+++ b/fhem/webfrontend/pgm2/svg_style.css
@@ -1,22 +1,32 @@
-text { font-family:Times; font-size:12px; }
-text.title { font-size:16px; }
-text.copy  { font-size:16px; stroke:none; fill:blue; }
-text.paste { font-size:16px; stroke:none; fill:blue; }
-
 .background { fill:#FFFFE7; }
-.border { stroke:black; stroke-width:1px; }
+
+text       { font-family:Times; font-size:12px; }
+text.title { font-size:16px; }
+text.copy  { text-decoration:underline; stroke:none; fill:blue;    }
+text.paste { text-decoration:underline; stroke:none; fill:blue;    }
+text.l0    { test-decoration:underline; stroke:none; fill:red;     } 
+text.l1    { test-decoration:underline; stroke:none; fill:green;   } 
+text.l2    { test-decoration:underline; stroke:none; fill:blue;    }
+text.l3    { test-decoration:underline; stroke:none; fill:magenta; }
+text.l4    { test-decoration:underline; stroke:none; fill:brown;   }
+text.l5    { test-decoration:underline; stroke:none; fill:black;   }
+text.l6    { test-decoration:underline; stroke:none; fill:olive;   }
+text.l7    { test-decoration:underline; stroke:none; fill:gray;    }
+text.l8    { test-decoration:underline; stroke:none; fill:yellow;  }
+
 polyline { stroke:black; fill:none; }
+;.border  { stroke:black; fill:none; }
+.border  { stroke:black; fill:url(#grad1); }
+.vgrid   { stroke:gray;  stroke-dasharray:2,6; }
+.hgrid   { stroke:gray;  stroke-dasharray:2,6; }
+.pasted  { stroke:black; stroke-dasharray:1,1; }
 
-.vgrid { stroke-dasharray:2,6; stroke:gray; }
-.hgrid { stroke-dasharray:2,6; stroke:gray; }
-
-.l0 { stroke:red;     } text.l0 { stroke:none; fill:red; } 
-.l1 { stroke:green;   } text.l1 { stroke:none; fill:green; } 
-.l2 { stroke:blue;    } text.l2 { stroke:none; fill:blue; }
-.l3 { stroke:magenta; } text.l3 { stroke:none; fill:magenta; }
-.l4 { stroke:brown;   } text.l4 { stroke:none; fill:brown; }
-.l5 { stroke:black;   } text.l5 { stroke:none; fill:black; }
-.l6 { stroke:olive;   } text.l6 { stroke:none; fill:olive; }
-.l7 { stroke:gray;    } text.l7 { stroke:none; fill:gray; }
-.l8 { stroke:yellow;  } text.l8 { stroke:none; fill:yellow; }
-.pasted { stroke-dasharray:1,1; stroke:black; }
+.l0 { stroke:red;     }
+.l1 { stroke:green;   }
+.l2 { stroke:blue;    }
+.l3 { stroke:magenta; }
+.l4 { stroke:brown;   }
+.l5 { stroke:black;   }
+.l6 { stroke:olive;   }
+.l7 { stroke:gray;    }
+.l8 { stroke:yellow;  }