diff --git a/fhem/webfrontend/pgm2/98_SVG.pm b/fhem/webfrontend/pgm2/98_SVG.pm index 19faf5162..fe5d8f2e4 100755 --- a/fhem/webfrontend/pgm2/98_SVG.pm +++ b/fhem/webfrontend/pgm2/98_SVG.pm @@ -42,6 +42,7 @@ SVG_render($$$$$$$) my ($x, $y) = (($SVG_ss ? 2 : 3)*$th, 1.2*$th); # Rect offset my %conf; # gnuplot file settings + ###################### # Convert the configuration to a "readable" form -> array to hash map { chomp; my @a=split(" ",$_, 3); if($a[0] && $a[0] eq "set") { $conf{$a[1]} = $a[2]; } } @{$confp}; @@ -53,14 +54,15 @@ SVG_render($$$$$$$) my ($ow,$oh) = split(",", $ps); # Original width my ($w, $h) = ($ow-2*$x, $oh-2*$y); # Rect size - # Html Header + ###################### + # Html Header FW_pO ''; FW_pO ''; FW_pO ''; my $prf = AttrVal($FW_wname, "stylesheetPrefix", ""); - FW_pO ""; + ###################### + # gradient definitions if(open(FH, "$FW_dir/${prf}svg_defs.svg") || - open(FH, "$FW_dir/svg_defs.svg")) { # gradient definitions + open(FH, "$FW_dir/svg_defs.svg")) { FW_pO join("", ); close(FH); } else { Log 0, "Can't open $FW_dir/svg_defs.svg" } - # Background + ###################### + # Draw the background FW_pO ""; # Rectangle FW_pO "$title"; + ###################### # Copy and Paste labels, hidden by default FW_pO " "; + ###################### + # Left and right labels my $t = ($conf{ylabel} ? $conf{ylabel} : ""); $t =~ s/"//g; if(!$SVG_ss) { @@ -114,25 +122,30 @@ SVG_render($$$$$$$) "class=\"y2label\" transform=\"rotate(270,$off1,$off2)\">$t"; } - # Digest axes/title/type from $plot (gnuplot) and draw the line-titles - my (@axes,@ltitle,@type,@linestyle,@linewidth); - my $i; - $i = 0; $plot =~ s/ axes (\w+)/$axes[$i++]=$1/gse; - $i = 0; $plot =~ s/ title '([^']*)'/$ltitle[$i++]=$1/gse; - $i = 0; $plot =~ s/ with (\w+)/$type[$i++]=$1/gse; - $i = 0; $plot =~ s/ ls (\d+)/$linestyle[$i++]=$1/gse; - $i = 0; $plot =~ s/ lw (\d+)/$linewidth[$i++]=$1/gse; + ###################### + # Digest axes/title/etc from $plot (gnuplot) and draw the line-titles + my (@lAxis,@lTitle,@lType,@lStyle,@lWidth); + my ($i, $pTemp); + $pTemp = $plot; $i = 0; $pTemp =~ s/ axes (\w+)/$lAxis[$i++]=$1/gse; + $pTemp = $plot; $i = 0; $pTemp =~ s/ title '([^']*)'/$lTitle[$i++]=$1/gse; + $pTemp = $plot; $i = 0; $pTemp =~ s/ with (\w+)/$lType[$i++]=$1/gse; + $pTemp = $plot; $i = 0; $pTemp =~ s/ ls (\w+)/$lStyle[$i++]=$1/gse; + $pTemp = $plot; $i = 0; $pTemp =~ s/ lw (\w+)/$lWidth[$i++]=$1/gse; - for my $i (0..int(@type)-1) { # axes is optional - $axes[$i] = "x1y2" if(!$axes[$i]); + for my $i (0..int(@lType)-1) { # lAxis is optional + $lAxis[$i] = "x1y2" if(!$lAxis[$i]); + $lStyle[$i] = "class=\"". (defined($lStyle[$i]) ? $lStyle[$i] : "l$i") . "\""; + $lWidth[$i] = (defined($lWidth[$i]) ? "style=\"stroke-width:$lWidth[$i]\"" :""); } ($off1,$off2) = ($ow-$x-$th, $y+$th); - for my $i (0..int(@ltitle)-1) { + ###################### + # Plot caption (title) + for my $i (0..int(@lTitle)-1) { my $j = $i+1; - my $t = $ltitle[$i]; + my $t = $lTitle[$i]; my $desc = ""; if(defined($data{"min$j"}) && $data{"min$j"} ne "undef") { $desc = sprintf("%s: Min:%g Max:%g Last:%g", @@ -140,11 +153,11 @@ SVG_render($$$$$$$) } FW_pO "$t"; + "x=\"$off1\" y=\"$off2\" text-anchor=\"end\" $lStyle[$i]>$t"; $off2 += $th; } + ###################### # Loop over the input, digest dates, calculate min/max values my ($fromsec, $tosec); $fromsec = time_to_sec($from) if($from ne "0"); # 0 is special @@ -168,7 +181,7 @@ SVG_render($$$$$$$) } $dpoff = $ndpoff+1; if($l =~ m/^#/) { - my $a = $axes[$idx]; + my $a = $lAxis[$idx]; if(defined($a)) { $hmin{$a} = $min if(!defined($hmin{$a}) || $hmin{$a} > $min); $hmax{$a} = $max if(!defined($hmax{$a}) || $hmax{$a} < $max); @@ -213,6 +226,7 @@ SVG_render($$$$$$$) } + ###################### # Compute & draw vertical tics, grid and labels my $ddur = ($tosec-$fromsec)/86400; my ($first_tag, $tag, $step, $tstep, $aligntext, $aligntics); @@ -230,6 +244,7 @@ SVG_render($$$$$$$) $aligntext = 2; $aligntics = 2; } + ###################### # First the tics $off2 = $y+4; my ($off3, $off4) = ($y+$h-4, $y+$h); @@ -242,6 +257,7 @@ SVG_render($$$$$$$) FW_pO ""; } + ###################### # then the text and the grid $off1 = $x; $off2 = $y+$h+$th; @@ -259,6 +275,7 @@ SVG_render($$$$$$$) } + ###################### # Left and right axis tics / text / grid $hmin{x1y1}=$hmin{x1y2}, $hmax{x1y1}=$hmax{x1y2} if(!defined($hmin{x1y1})); $hmin{x1y2}=$hmin{x1y1}, $hmax{x1y2}=$hmax{x1y1} if(!defined($hmin{x1y2})); @@ -340,9 +357,10 @@ SVG_render($$$$$$$) } + ###################### # Second loop over the data: draw the measured points - for my $idx (0..int(@hdx)-1) { - my $a = $axes[$idx]; + for(my $idx=$#hdx; $idx >= 0; $idx--) { + my $a = $lAxis[$idx]; next if(!defined($a)); $min = $hmin{$a}; @@ -353,30 +371,32 @@ SVG_render($$$$$$$) next if(!defined($dxp)); my $yh = $y+$h; - my $tl = $ltitle[$idx] ? $ltitle[$idx] : ""; - #my $dec = int(log($hmul*3)/log(10)); # Some perl implementations do not have log() + my $tl = $lTitle[$idx] ? $lTitle[$idx] : ""; + #my $dec = int(log($hmul*3)/log(10)); # perl can be compiled without log() ! my $dec = length(sprintf("%d",$hmul*3))-1; $dec = 0 if($dec < 0); - my $js_helpers = "id=\"line_$idx\" decimals=\"$dec\" ". + my $attributes = "id=\"line_$idx\" decimals=\"$dec\" ". "x_off=\"$fromsec\" x_min=\"$x\" x_mul=\"$tmul\" ". "y_h=\"$yh\" y_min=\"$min\" y_mul=\"$hmul\" title=\"$tl\" ". - "onclick=\"parent.svg_click(evt)\""; + "onclick=\"parent.svg_click(evt)\" $lWidth[$idx] $lStyle[$idx]"; + my $isFill = ($lStyle[$idx] =~ m/fill/); my ($lx, $ly) = (-1,-1); - if($type[$idx] eq "points" ) { + if($lType[$idx] eq "points" ) { - foreach my $i (0..int(@{$dxp})-1) { - my ($x1, $y1) = (int($x+$dxp->[$i]), - int($y+$h-($dyp->[$i]-$min)*$hmul)); - next if($x1 == $lx && $y1 == $ly); - $ly = $x1; $ly = $y1; - $ret = sprintf(" %d,%d %d,%d %d,%d %d,%d %d,%d", - $x1-3,$y1, $x1,$y1-3, $x1+3,$y1, $x1,$y1+3, $x1-3,$y1); - FW_pO ""; - } + foreach my $i (0..int(@{$dxp})-1) { + my ($x1, $y1) = (int($x+$dxp->[$i]), + int($y+$h-($dyp->[$i]-$min)*$hmul)); + next if($x1 == $lx && $y1 == $ly); + $ly = $x1; $ly = $y1; + $ret = sprintf(" %d,%d %d,%d %d,%d %d,%d %d,%d", + $x1-3,$y1, $x1,$y1-3, $x1+3,$y1, $x1,$y1+3, $x1-3,$y1); + FW_pO ""; + } - } elsif($type[$idx] eq "steps" || $type[$idx] eq "fsteps" ) { + } elsif($lType[$idx] eq "steps" || $lType[$idx] eq "fsteps" ) { + $ret .= sprintf(" %d,%d", $x+$dxp->[0], $y+$h) if($isFill && @{$dxp}); if(@{$dxp} == 1) { my $y1 = $y+$h-($dyp->[0]-$min)*$hmul; $ret .= sprintf(" %d,%d %d,%d %d,%d %d,%d", @@ -387,16 +407,19 @@ SVG_render($$$$$$$) my ($x2, $y2) = ($x+$dxp->[$i], $y+$h-($dyp->[$i] -$min)*$hmul); next if(int($x2) == $lx && int($y1) == $ly); $lx = int($x2); $ly = int($y2); - if($type[$idx] eq "steps") { + if($lType[$idx] eq "steps") { $ret .= sprintf(" %d,%d %d,%d %d,%d", $x1,$y1, $x2,$y1, $x2,$y2); } else { $ret .= sprintf(" %d,%d %d,%d %d,%d", $x1,$y1, $x1,$y2, $x2,$y2); } } } - FW_pO ""; + $ret .= sprintf(" %d,%d", $lx, $y+$h) if($isFill && $lx > -1); - } elsif($type[$idx] eq "histeps" ) { + FW_pO ""; + + } elsif($lType[$idx] eq "histeps" ) { + $ret .= sprintf(" %d,%d", $x+$dxp->[0], $y+$h) if($isFill && @{$dxp}); if(@{$dxp} == 1) { my $y1 = $y+$h-($dyp->[0]-$min)*$hmul; $ret .= sprintf(" %d,%d %d,%d %d,%d %d,%d", @@ -411,22 +434,21 @@ SVG_render($$$$$$$) $x1,$y1, ($x1+$x2)/2,$y1, ($x1+$x2)/2,$y2, $x2,$y2); } } - FW_pO ""; + $ret .= sprintf(" %d,%d", $lx, $y+$h) if($isFill && $lx > -1); + FW_pO ""; } else { # lines and everything else foreach my $i (0..int(@{$dxp})-1) { my ($x1, $y1) = (int($x+$dxp->[$i]), int($y+$h-($dyp->[$i]-$min)*$hmul)); next if($x1 == $lx && $y1 == $ly); + $ret .= sprintf(" %d,%d", $x1, $y+$h) if($i == 0 && $isFill); $lx = $x1; $ly = $y1; $ret .= sprintf(" %d,%d", $x1, $y1); } + $ret .= sprintf(" %d,%d", $lx, $y+$h) if($isFill && $lx > -1); - FW_pO ""; - + FW_pO ""; } } diff --git a/fhem/webfrontend/pgm2/km271_1.gplot b/fhem/webfrontend/pgm2/km271_1.gplot index d43116651..943c43a68 100644 --- a/fhem/webfrontend/pgm2/km271_1.gplot +++ b/fhem/webfrontend/pgm2/km271_1.gplot @@ -21,7 +21,7 @@ set yrange [0:] #FileLog 4:WW_Isttemperatur:0: #FileLog 4:Brenner_Laufzeit1_Minuten\x3a:0:delta-h -plot "" using 1:4 axes x1y2 title 'WW-Temp' with lines,\ +plot "" using 1:4 axes x1y2 ls l0 title 'WW-Temp' with lines,\ " | perl -ane '\ @a = split(\"[_:]\", $F[0]);\ if(defined($lh) && $lh ne $a[1])\ @@ -29,4 +29,4 @@ plot "" using 1:4 axes x1y2 title 'WW-Temp' with line if($lv) { $hv += ($F[3]-$lv); }\ $lh = $a[1]; $ld = $a[0]; $lv = $F[3];\ END { printf(\"${ld}_$lh:30:00 %f\n\", $hv) }'"\ - using 1:2 axes x1y1 title 'Runtime/h (Min)' with histeps + using 1:2 axes x1y1 ls l6fill title 'Runtime/h (Min)' with histeps diff --git a/fhem/webfrontend/pgm2/svg.js b/fhem/webfrontend/pgm2/svg.js index cdc1862ad..f97baae56 100644 --- a/fhem/webfrontend/pgm2/svg.js +++ b/fhem/webfrontend/pgm2/svg.js @@ -93,12 +93,23 @@ svg_paste(evt) } +function +showOtherLines(d, lid, on) +{ + for(var i=0; i < 9; i++) { + var id="line_"+i; + var el = d.getElementById(id); + if(el) + el.setAttribute("display", (on||id==lid) ? "block" : "none"); + } +} function svg_labelselect(evt) { var d = evt.target.ownerDocument; - var sel = d.getElementById(evt.target.getAttribute("line_id")); + var lid = evt.target.getAttribute("line_id"); + var sel = d.getElementById(lid); var tl = d.getElementById("svg_title"); var cp = d.getElementById("svg_copy"); var ps = d.getElementById("svg_paste"); @@ -109,6 +120,7 @@ svg_labelselect(evt) tl.firstChild.nodeValue = old_title; cp.firstChild.nodeValue = " "; ps.firstChild.nodeValue = " "; + showOtherLines(d, lid, true); } else { if(old_sel == null) @@ -122,6 +134,7 @@ svg_labelselect(evt) cp.firstChild.nodeValue = "Copy"; ps.firstChild.nodeValue = (get_cookie()==""?" ":"Paste"); } + showOtherLines(d, lid, false); } } diff --git a/fhem/webfrontend/pgm2/svg_defs.svg b/fhem/webfrontend/pgm2/svg_defs.svg index 2e553c1c8..aa934d9b6 100644 --- a/fhem/webfrontend/pgm2/svg_defs.svg +++ b/fhem/webfrontend/pgm2/svg_defs.svg @@ -1,7 +1,43 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fhem/webfrontend/pgm2/svg_style.css b/fhem/webfrontend/pgm2/svg_style.css index 67ced61b7..a9ef1537c 100644 --- a/fhem/webfrontend/pgm2/svg_style.css +++ b/fhem/webfrontend/pgm2/svg_style.css @@ -4,28 +4,28 @@ 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 { text-decoration:underline; stroke:none; fill:red; } -text.l1 { text-decoration:underline; stroke:none; fill:green; } -text.l2 { text-decoration:underline; stroke:none; fill:blue; } -text.l3 { text-decoration:underline; stroke:none; fill:magenta; } -text.l4 { text-decoration:underline; stroke:none; fill:brown; } -text.l5 { text-decoration:underline; stroke:none; fill:black; } -text.l6 { text-decoration:underline; stroke:none; fill:olive; } -text.l7 { text-decoration:underline; stroke:none; fill:gray; } -text.l8 { text-decoration:underline; stroke:none; fill:yellow; } polyline { stroke:black; fill:none; } -.border { stroke:black; fill:url(#grad1); } +.border { stroke:black; fill:url(#gr_bg); } .vgrid { stroke:gray; stroke-dasharray:2,6; } .hgrid { stroke:gray; stroke-dasharray:2,6; } .pasted { stroke:black; stroke-dasharray:1,1; } -.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; } +.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; } + +.l0fill{ stroke:#f00; fill:url(#gr_0); } text.l0fill{ stroke:none; fill:#f00; } +.l1fill{ stroke:#291; fill:url(#gr_1); } text.l1fill{ stroke:none; fill:#291; } +.l2fill{ stroke:#00f; fill:url(#gr_2); } text.l2fill{ stroke:none; fill:#00f; } +.l3fill{ stroke:#f0f; fill:url(#gr_3); } text.l3fill{ stroke:none; fill:#f0f; } +.l4fill{ stroke:#ff0; fill:url(#gr_4); } text.l4fill{ stroke:none; fill:#ff0; } +.l5fill{ stroke:#0ff; fill:url(#gr_5); } text.l5fill{ stroke:none; fill:#0ff; } +.l6fill{ stroke:#000; fill:url(#gr_6); } text.l6fill{ stroke:none; fill:#000; } + diff --git a/fhem/webfrontend/pgm2/temp4hum6.gplot b/fhem/webfrontend/pgm2/temp4hum6.gplot index 584b69c04..5b453e687 100644 --- a/fhem/webfrontend/pgm2/temp4hum6.gplot +++ b/fhem/webfrontend/pgm2/temp4hum6.gplot @@ -29,5 +29,5 @@ set ylabel "Humidity (%)" #FileLog 6:H\x3a:0: plot \ - "< awk '/T:/ {print $1, $4}' " using 1:2 axes x1y2 title 'Temperature' with lines,\ - "< awk '/H:/ {print $1, $6}' " using 1:2 axes x1y1 title 'Humidity' with lines + "< awk '/T:/ {print $1, $4}' " using 1:2 ls l0 axes x1y2 title 'Temperature' with lines,\ + "< awk '/H:/ {print $1, $6}' " using 1:2 ls l2fill axes x1y1 title 'Humidity' with lines diff --git a/fhem/webfrontend/pgm2/temp4rain10.gplot b/fhem/webfrontend/pgm2/temp4rain10.gplot index 25842be7c..836da3c19 100644 --- a/fhem/webfrontend/pgm2/temp4rain10.gplot +++ b/fhem/webfrontend/pgm2/temp4rain10.gplot @@ -24,7 +24,7 @@ set yrange [0:] #FileLog 10:IR\x3a:0:delta-h #FileLog 10:IR\x3a:0:delta-d -plot "" using 1:4 axes x1y2 title 'Temperature' with lines,\ +plot "" using 1:4 axes x1y2 ls l0 title 'Temperature' with lines,\ " | perl -ane '\ @a = split(\"[_:]\", $F[0]);\ if(defined($lh) && $lh ne $a[1])\ @@ -32,7 +32,7 @@ plot "" using 1:4 axes x1y2 title 'Temperature' with lines,\ if($lv) { $hv += ($F[9]-$lv); }\ $lh = $a[1]; $ld = $a[0]; $lv = $F[9];\ END { printf(\"${ld}_$lh:30:00 %f\n\", $hv) }'"\ - using 1:2 axes x1y1 title 'Rain/h' with histeps,\ + using 1:2 axes x1y1 ls l1fill title 'Rain/h' with histeps,\ " | perl -ane '\ @a = split(\"[_]\", $F[0]);\ if(defined($ld) && $ld ne $a[0]) {\ @@ -40,4 +40,4 @@ plot "" using 1:4 axes x1y2 title 'Temperature' with lines,\ if($lv) { $dv += ($F[9]-$lv); }\ $ld = $a[0]; $lv = $F[9];\ END {printf(\"${ld}_12:00:00 %f\n\", $dv)}'"\ - using 1:2 axes x1y1 title 'Rain/day' with histeps + using 1:2 axes x1y1 ls l2 title 'Rain/day' with histeps