FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-03-12 22:56:34 +00:00
Code Issues Releases Wiki Activity

98_SVG.pm / *svg_style.css: Add andre's content-patch (Forum #29271) and draw

Browse Source 
labels on top (Forum #29394)



git-svn-id: https://svn.fhem.de/fhem/trunk@7054 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2014-11-24 10:54:04 +00:00
parent 3085a99d1d
commit c43ccea90a
5 changed files with 269 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
fhem/FHEM/98_SVG.pm
View File

@ -1009,6 +1009,37 @@ SVG_openFile($$$)
#####################################
sub
SVG_getSteps($$$)
{
my ($range,$min,$max) = @_;
my $dh = $max - $min;
my ($step, $mi, $ma) = (1, 1, 1);
my @limit = (0.001, 0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50,
100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000, 100000,
200000, 500000, 1000000, 2000000);
for my $li (0..$#limit-1) {
my $l = $limit[$li];
next if($dh > $l*10);
$ma = $range ? $max : SVG_doround($max, $l, 1);
$mi = $range ? $min : SVG_doround($min, $l, 0);
if(($ma-$mi)/$l >= 7) { # If more then 7 steps, then choose next
$l = $limit[$li+1];
$ma = $range ? $max : SVG_doround($max, $l, 1);
$mi = $range ? $min : SVG_doround($min, $l, 0);
}
$step = $l;
last;
}
if($step==0.001 && $max==$min) { # Don't want 0.001 range for nil
$step = 1;
$ma = $mi + $step;
}
return ($step, $mi, $ma);
}
sub
SVG_render($$$$$$$$$;$$)
{
my $name = shift; # e.g. wl_8
@ -1137,22 +1168,17 @@ SVG_render($$$$$$$$$;$$)
($off1,$off2) = ($ow-$nr_right_axis*$axis_width-$th, $y+$th);
######################
# Plot caption (title)
for my $i (0..int(@{$conf{lTitle}})-1) {
my $j = $i+1;
my $t = $conf{lTitle}[$i];
my $desc = "";
if(defined($data{"min$j"}) && $data{"min$j"} ne "undef") {
$desc = sprintf("%s: Min:%g Max:%g Last:%g",
$t, $data{"min$j"}, $data{"max$j"}, $data{"currval$j"});
}
SVG_pO "<text title=\"$desc\" ".
"onclick=\"parent.svg_labelselect(evt)\" line_id=\"line_$i\" " .
"x=\"$off1\" y=\"$off2\" text-anchor=\"end\" ".
"$conf{lStyle}[$i]>$t</text>";
$off2 += $th;
my ($xmin, $xmax, $xtics);
if($conf{xrange} && $conf{xrange} =~ /\[(.*):(.*)\]/) {
$xmin = $1 if($1 ne "");
$xmax = $2 if($2 ne "");
#$fromsec = $xmin;
#$tosec = $xmax;
}
$xtics = defined($conf{xtics}) ? $conf{xtics} : "";
my ($txtoff1,$txtoff2) = ($off1, $off2);
######################
# Loop over the input, digest dates, calculate min/max values
@ -1188,6 +1214,26 @@ SVG_render($$$$$$$$$;$$)
($dxp, $dyp) = (\(), \());
$idx++;
} elsif( $l =~ /^;/ ) { #allow ;special lines
if( $l =~ m/^;p (\S+)\s(\S+)/ ) {# point
my $xmul = $w/($xmax-$xmin);
my $x1;
if( $conf{xrange} ) {
$x1 = int(($1-$xmin)*$xmul);
} else {
$x1 = $x1;
}
my $y1 = $2;
push @{$dxp}, $x1;
push @{$dyp}, $y1;
} elsif( $conf{lType}[$idx] eq "lines" ) {
push @{$dxp}, undef;
push @{$dyp}, $l;
}
} else {
($d, $v) = split(" ", $l);
$d = ($tmul ? int((SVG_time_to_sec($d)-$fromsec)*$tmul) : $d);
@ -1250,6 +1296,20 @@ SVG_render($$$$$$$$$;$$)
$off2 = $y+4;
my ($off3, $off4) = ($y+$h-4, $y+$h);
my $initoffset = $tstep;
if( $conf{xrange} ) { # user defined range
if( !$xtics || $xtics ne "()" ) { # auto tics
my $xmul = $w/($xmax-$xmin);
my ($step,$mi,$ma) = SVG_getSteps( $conf{xrange}, $xmin, $xmax );
$step /= 5 if( $step > 50 );
$step /= 2 if( $step > 10 );
for(my $i = $mi; $i <= $ma; $i += $step) {
$off1 = int($x+($i-$xmin)*$xmul);
SVG_pO "<polyline points=\"$off1,$y $off1,$off2\"/>";
SVG_pO "<polyline points=\"$off1,$off3 $off1,$off4\"/>";
}
}
} else { # times
$initoffset = int(($tstep/2)/86400)*86400 if($aligntics);
for(my $i = $fromsec+$initoffset; $i < $tosec; $i += $tstep) {
$i = SVG_time_align($i,$aligntics);
@ -1258,12 +1318,15 @@ SVG_render($$$$$$$$$;$$)
SVG_pO "<polyline points=\"$off1,$off3 $off1,$off4\"/>";
}
}
######################
# then the text and the grid
$off1 = $x;
$off2 = $y+$h+$th;
my $t = SVG_fmtTime($first_tag, $fromsec);
SVG_pO "<text x=\"0\" y=\"$off2\" class=\"ylabel\">$t</text>";
SVG_pO "<text x=\"0\" y=\"$off2\" class=\"ylabel\">$t</text>"
if(!$conf{xrange});
$initoffset = $step;
if(AttrVal($FW_wname, "endPlotNow", undef) && $ddur>1.1 && $ddur<7.1) {
@ -1271,6 +1334,39 @@ SVG_render($$$$$$$$$;$$)
$initoffset -= ($now+fhemTzOffset($now))%86400; # Forum #25768
}
if( $conf{xrange} ) { # user defined range
my $xmul = $w/($xmax-$xmin);
if( $xtics ) { #user tics and grid
my $tic = $xtics;
$tic =~ s/^\((.*)\)$/$1/; # Strip ()
foreach my $onetic (split(",", $tic)) {
$onetic =~ s/^ *(.*) *$/$1/;
my ($tlabel, $tvalue) = split(" ", $onetic);
$tlabel =~ s/^"(.*)"$/$1/;
$tvalue = 0 if( !$tvalue );
$off1 = int($x+($tvalue-$xmin)*$xmul);
$t = $tvalue;
SVG_pO "<text x=\"$off1\" y=\"$off2\" class=\"ylabel\" " .
"text-anchor=\"middle\">$t</text>";
SVG_pO " <polyline points=\"$off1,$y $off1,$off4\" class=\"hgrid\"/>";
}
} else { # auto grid
my ($step,$mi,$ma) = SVG_getSteps( $conf{xrange}, $xmin, $xmax );
for(my $i = $mi; $i <= $ma; $i += $step) {
$off1 = int($x+($i-$xmin)*$xmul);
$t = $i;
SVG_pO "<text x=\"$off1\" y=\"$off2\" class=\"ylabel\" " .
"text-anchor=\"middle\">$t</text>";
SVG_pO " <polyline points=\"$off1,$y $off1,$off4\" class=\"hgrid\"/>"
if( $i != $mi && $i != $ma );
}
}
} else { # times
$initoffset = int(($step/2)/86400)*86400 if($aligntext);
for(my $i = $fromsec+$initoffset; $i < $tosec; $i += $step) {
$i = SVG_time_align($i,$aligntext);
@ -1280,6 +1376,7 @@ SVG_render($$$$$$$$$;$$)
"text-anchor=\"middle\">$t</text>";
SVG_pO " <polyline points=\"$off1,$y $off1,$off4\" class=\"hgrid\"/>";
}
}
######################
@ -1307,32 +1404,7 @@ SVG_render($$$$$$$$$;$$)
$htics{$a} = defined($conf{$yt}) ? $conf{$yt} : "";
#-- Round values, compute a nice step
my $dh = $hmax{$a} - $hmin{$a};
my ($step, $mi, $ma) = (1, 1, 1);
my @limit = (0.001, 0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50,
100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000, 100000,
200000, 500000, 1000000, 2000000);
for my $li (0..$#limit-1) {
my $l = $limit[$li];
next if($dh > $l*10);
$ma = $conf{$yra} ? $hmax{$a} : SVG_doround($hmax{$a}, $l, 1);
$mi = $conf{$yra} ? $hmin{$a} : SVG_doround($hmin{$a}, $l, 0);
if(($ma-$mi)/$l >= 7) { # If more then 7 steps, then choose next
$l = $limit[$li+1];
$ma = $conf{$yra} ? $hmax{$a} : SVG_doround($hmax{$a}, $l, 1);
$mi = $conf{$yra} ? $hmin{$a} : SVG_doround($hmin{$a}, $l, 0);
}
$step = $l;
last;
}
if($step==0.001 && $hmax{$a}==$hmin{$a}) { # Don't want 0.001 range for nil
$step = 1;
$ma = $mi + $step;
}
$hmax{$a} = $ma;
$hmin{$a} = $mi;
$hstep{$a} = $step;
($hstep{$a}, $hmin{$a}, $hmax{$a}) = SVG_getSteps($conf{$yra},$hmin{$a},$hmax{$a});
$axdrawn{$a} = 0;
#Log3 $name, 2, "Axis $a has interval [$hmin{$a},$hmax{$a}], step $hstep{$a}, tics $htics{$a}\n";
@ -1448,10 +1520,13 @@ SVG_render($$$$$$$$$;$$)
for(my $idx=$#hdx; $idx >= 0; $idx--) {
my $a = $conf{lAxis}[$idx];
SVG_pO "<!-- Warning: No axis for data item $idx defined -->" if(!defined($a));
SVG_pO "<!-- Warning: No axis for data item $idx defined -->"
if(!defined($a));
next if(!defined($a));
$min = $hmin{$a};
$hmax{$a} += 1 if($min == $hmax{$a}); # Else division by 0 in the next line
my $xmul;
$xmul = $w/($xmax-$xmin) if( $conf{xrange} );
my $hmul = $h/($hmax{$a}-$min);
my $ret = "";
my ($dxp, $dyp) = ($hdx[$idx], $hdy[$idx]);
@ -1467,9 +1542,10 @@ SVG_render($$$$$$$$$;$$)
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)\" ".
"$conf{lWidth}[$idx] $conf{lStyle}[$idx]";
"onclick=\"parent.svg_click(evt)\" $conf{lWidth}[$idx]";
my $lStyle = $conf{lStyle}[$idx];
my $isFill = ($conf{lStyle}[$idx] =~ m/fill/);
my $doClose = $isFill;
my ($lx, $ly) = (-1,-1);
@ -1481,7 +1557,7 @@ SVG_render($$$$$$$$$;$$)
$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);
SVG_pO "<polyline $attributes points=\"$ret\"/>";
SVG_pO "<polyline $attributes $lStyle points=\"$ret\"/>";
}
} elsif($conf{lType}[$idx] eq "steps" || $conf{lType}[$idx] eq "fsteps" ) {
@ -1506,7 +1582,7 @@ SVG_render($$$$$$$$$;$$)
}
$ret .= sprintf(" %d,%d", $lx, $y+$h) if($isFill && $lx > -1);
SVG_pO "<polyline $attributes points=\"$ret\"/>";
SVG_pO "<polyline $attributes $lStyle points=\"$ret\"/>";
} elsif($conf{lType}[$idx] eq "histeps" ) {
$ret .= sprintf(" %d,%d", $x+$dxp->[0], $y+$h) if($isFill && @{$dxp});
@ -1525,7 +1601,7 @@ SVG_render($$$$$$$$$;$$)
}
}
$ret .= sprintf(" %d,%d", $lx, $y+$h) if($isFill && $lx > -1);
SVG_pO "<polyline $attributes points=\"$ret\"/>";
SVG_pO "<polyline $attributes $lStyle points=\"$ret\"/>";
} elsif( $conf{lType}[$idx] eq "bars" ) {
if(@{$dxp} == 1) {
@ -1540,26 +1616,124 @@ SVG_render($$$$$$$$$;$$)
my ($x1, $y1) = ( $x +4 + $dxp->[$i] - $barwidth,
$y +$h-($dyp->[$i]-$min)*$hmul);
my ($x2, $y2) = ($barwidth, ($dyp->[$i]-$min)*$hmul);
SVG_pO "<rect $attributes x=\"$x1\" y=\"$y1\" width=\"$x2\" height=\"$y2\"/>";
SVG_pO "<rect $attributes $lStyle x=\"$x1\" y=\"$y1\" ".
"width=\"$x2\" height=\"$y2\"/>";
}
}
} else { # lines and everything else
my ($ymin, $ymax) = (99999999, -99999999);
foreach my $i (0..int(@{$dxp})-1) {
if( !defined($dxp->[$i]) ) { # specials
if( $dyp->[$i] =~ m/^;$/ ) { # new line segment after newline
SVG_pO "<polyline $attributes $lStyle points=\"$ret\"/>";
$ret = "";
} elsif( $dyp->[$i] =~ m/^;c (.*)/ ) {# close polyline ?
$doClose = $1;
} elsif( $dyp->[$i] =~ m/^;ls (\w+)?/ ) {# line style
if( $1 ) {
$lStyle = "class='$1'";
} else {
$lStyle = $conf{lStyle}[$idx];
}
# marker with optional text
} elsif( $dyp->[$i] =~ m/^;m (\S+)\s(\S+)(\s(\S+)\s(.*))?/ ) {
my $x1;
if( defined($xmin) ) {
$x1 = int($x+($1-$xmin)*$xmul);
} else {
$x1 = ($tmul ? int((SVG_time_to_sec($1)-$fromsec)*$tmul) : $x);
}
my $y1 = int($y+$h-($2-$min)*$hmul);
my $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);
SVG_pO "<polyline $attributes $lStyle points=\"$ret\"/>";
SVG_pO "<text x=\"$x1\" y=\"$y1\" $lStyle text-anchor=\"$4\">$5".
"</text>" if( $3 );
} elsif( $dyp->[$i] =~ m/^;t (\S+)\s(\S+)\s(\S+)\s(.*)/ ) {# text
my $x1;
if( defined($xmin) ) {
$x1 = int($x+($1-$xmin)*$xmul);
} else {
$x1 = ($tmul ? int((SVG_time_to_sec($1)-$fromsec)*$tmul) : $x);
}
my $y1 = int($y+$h-($2-$min)*$hmul);
SVG_pO "<text x=\"$x1\" y=\"$y1\" $lStyle text-anchor=\"$3\">$4".
"</text>";
} else {
Log3 $name, 2, "unknown special $dyp->[$i]"
}
next;
}
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;
# calc ymin/ymax for points with the same x coordinates
if( $x1 == $lx ) {
$ymin = $y1 if( $y1 < $ymin );
$ymax = $y1 if( $y1 > $ymax );
$ly = $y1;
next;
}
$ret .= sprintf(" %d,%d", $x1, $y+$h) if($i == 0 && $doClose);
# plot ymin/ymax range for points with the same x coordinates
if( $ymin != 99999999 ) {
$ret .= sprintf(" %d,%d", $lx, $ymin);
$ret .= sprintf(" %d,%d", $lx, $ymax);
$ret .= sprintf(" %d,%d", $lx, $ly);
($ymin, $ymax) = (99999999, -99999999);
}
$ret .= sprintf(" %d,%d", $x1, $y1);
$lx = $x1; $ly = $y1;
}
#-- insert last point for filled line
$ret .= sprintf(" %d,%d", $lx, $y+$h) if($isFill && $lx > -1);
$ret .= sprintf(" %d,%d", $lx, $y+$h) if($doClose && $lx > -1);
SVG_pO "<polyline $attributes points=\"$ret\"/>";
SVG_pO "<polyline $attributes $lStyle points=\"$ret\"/>";
}
}
######################
# Plot caption (title) at the end, should be draw on top of the lines
for my $i (0..int(@{$conf{lTitle}})-1) {
my $j = $i+1;
my $t = $conf{lTitle}[$i];
next if( !$t );
my $desc = "";
if(defined($data{"min$j"}) && $data{"min$j"} ne "undef") {
$desc = sprintf("%s: Min:%g Max:%g Last:%g",
$t, $data{"min$j"}, $data{"max$j"}, $data{"currval$j"});
}
my $style = $conf{lStyle}[$i];
$style =~ s/class="/class="legend /;
SVG_pO "<text title=\"$desc\" ".
"onclick=\"parent.svg_labelselect(evt)\" line_id=\"line_$i\" " .
"x=\"$txtoff1\" y=\"$txtoff2\" text-anchor=\"end\" $style>$t</text>";
$txtoff2 += $th;
}
SVG_pO "</svg>";
return $SVG_RET;
}

6
fhem/www/pgm2/darksvg_style.css
View File

@ -1,8 +1,10 @@
/* Author: Volker */
text { font-family:Arial, Helvetica, sans-serif; font-size:12px; fill:#CCCCCC;}
text.title {font-family:Arial, Helvetica, sans-serif; font-size:16px; fill:#CCCCCC;}
text.copy { text-decoration:underline; stroke:none; fill:blue;}
text.paste { text-decoration:underline; stroke:none; fill:blue;}
text.legend{ cursor:pointer; }
text.copy { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}
text.paste { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}
polyline { stroke:black; fill:none; }
.border { stroke:black; fill:url(#gr_bg);}

5
fhem/www/pgm2/ios6svg_style.css
View File

@ -14,8 +14,9 @@ font-weight:bold;
fill:#4c566c;
text-shadow: 0px 1px #FFFFFF;
}
text.copy { text-decoration:underline; stroke:none; fill:blue;}
text.paste { text-decoration:underline; stroke:none; fill:blue;}
text.legend{ cursor:pointer; }
text.copy { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}
text.paste { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}
polyline { stroke:black; fill:none; }
.border { stroke:black; fill:url(#gr_bg);}

5
fhem/www/pgm2/ios7svg_style.css
View File

@ -1,8 +1,9 @@
/* Author: Volker Edit: fhainz */
text { font-family: Helvetica; font-weight:300; font-size:12px; fill:#343434;}
text.title {font-family: Helvetica; font-weight:300; font-size:16px; fill:#343434;}
text.copy { text-decoration:underline; stroke:none; fill:blue;}
text.paste { text-decoration:underline; stroke:none; fill:blue;}
text.legend{ cursor:pointer; }
text.copy { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}
text.paste { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}
polyline { stroke:black; fill:none; }
.border { stroke:black; fill:url(#gr_bg);}

5
fhem/www/pgm2/svg_style.css
View File

@ -1,7 +1,8 @@
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.legend{ cursor:pointer; }
text.copy { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}
text.paste { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}
polyline { stroke:black; fill:none; }
.border { stroke:black; fill:url(#gr_bg); }