From 239d43ef60ad09d0cb5037a92f13bdb6dcc0c099 Mon Sep 17 00:00:00 2001 From: rudolfkoenig <> Date: Tue, 12 Jul 2016 12:43:37 +0000 Subject: [PATCH] 00_ZWDongle.pm: neighbor map fixes / enhancements (Forum #54574) git-svn-id: https://svn.fhem.de/fhem/trunk@11788 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/FHEM/00_ZWDongle.pm | 14 ++++++- fhem/FHEM/10_ZWave.pm | 18 +++++++++ fhem/www/pgm2/brightstyle.css | 10 ++--- fhem/www/pgm2/darkCommon.css | 10 ++--- fhem/www/pgm2/defaultCommon.css | 10 ++--- fhem/www/pgm2/ios6Common.css | 10 ++--- fhem/www/pgm2/ios7Common.css | 10 ++--- fhem/www/pgm2/zwave_neighborlist.js | 60 +++++++++++++++++++++-------- 8 files changed, 98 insertions(+), 44 deletions(-) diff --git a/fhem/FHEM/00_ZWDongle.pm b/fhem/FHEM/00_ZWDongle.pm index d50c981a9..389a53f71 100755 --- a/fhem/FHEM/00_ZWDongle.pm +++ b/fhem/FHEM/00_ZWDongle.pm @@ -175,13 +175,23 @@ ZWDongle_nlData($) for my $e (@a) { next if($defs{$e}{ZWaveSubDevice} ne "no"); + + my $title = ReadingsVal($e, "timeToAck", ""); + $title = "timeToAck: $title" if($title); + + my $img = ZWave_getPic(ReadingsVal($e, "modelId", "")); + my $nl = ReadingsVal($e, "neighborList", ""); $nl =~ s/,/ /g; $nl =~ s/\bempty\b//g; my $pos = AttrVal($e, "neighborListPos", ""); push @dn, $e if($nl =~ m/\b$d\b/); + $nl = '"'.join('","',split(" ", $nl)).'"' if($nl); - push @ret, "\"$e\":{\"txt\":\"$e\",\"pos\":[$pos],". - "\"class\":\"zwBox\",\"neighbors\":[$nl] }"; + push @ret, "\"$e\":{\"txt\":\"$e\",\"pos\":[$pos],\"class\":\"zwBox\",". + "\"neighbors\":[$nl]". + ($title ? ",\"title\" : \"$title\"" : ""). + ($img ? ",\"img\" : \"$img\"" : ""). + "}"; $nb{$e} = $nl; } my $pos = AttrVal($d, "neighborListPos", ""); diff --git a/fhem/FHEM/10_ZWave.pm b/fhem/FHEM/10_ZWave.pm index 1cffa5ee3..b45295b91 100755 --- a/fhem/FHEM/10_ZWave.pm +++ b/fhem/FHEM/10_ZWave.pm @@ -4246,6 +4246,24 @@ ZWave_helpFn($$) return $ret; } +sub +ZWave_getPic($) +{ + my ($model) = @_; + my $img = $zwave_pepperImg{$model}; + return "" if(!$img); + + my $fn = $attr{global}{modpath}."/www/deviceimages/zwave/$img"; + if(!-f $fn) { # Cache the picture + my $data = GetFileFromURL("http://fhem.de/deviceimages/zwave/$img"); + if($data && open(FH,">$fn")) { + print FH $data; + close(FH) + } + } + return "$FW_ME/deviceimages/zwave/$img"; +} + sub ZWave_fhemwebFn($$$$) { diff --git a/fhem/www/pgm2/brightstyle.css b/fhem/www/pgm2/brightstyle.css index 65d8f83b0..8dc348d7f 100644 --- a/fhem/www/pgm2/brightstyle.css +++ b/fhem/www/pgm2/brightstyle.css @@ -108,9 +108,9 @@ div#svgmarker { div.detLink { display:inline-block; margin-right:0.5em; } -.zwBox { stroke:#333333; stroke-width:2px; fill:#eeeeee; } -.zwDongle { stroke:red; stroke-width:2px; fill:#eeeeee; } -.zwMargin { stroke:#333333; stroke-width:1px; fill:none; } -.zwLine { stroke:#333333; stroke-width:1px; } -.zwArrowHead { fill:#333333; stroke-width:1px; } +svg.zw_nr .zwBox { stroke:#333333; stroke-width:2px; fill:#eeeeee; } +svg.zw_nr .zwDongle { stroke:red; stroke-width:2px; fill:#eeeeee; } +svg.zw_nr .zwMargin { stroke:#333333; stroke-width:1px; fill:none; } +svg.zw_nr .zwLine { stroke:#333333; stroke-width:1px; } +svg.zw_nr .zwArrowHead { fill:#333333; stroke-width:1px; } svg.zw_nr { height:auto; width:auto; margin:0; } diff --git a/fhem/www/pgm2/darkCommon.css b/fhem/www/pgm2/darkCommon.css index a362b5c9c..751717a71 100644 --- a/fhem/www/pgm2/darkCommon.css +++ b/fhem/www/pgm2/darkCommon.css @@ -14,9 +14,9 @@ div.detLink { display:inline-block; margin-right:0.5em; } .fhemlog { color:#FFFFFF; } -.zwBox { stroke:#fff; stroke-width:2px; fill:#000; } -.zwDongle { stroke:red; stroke-width:2px; fill:#000; } -.zwMargin { stroke:#fff; stroke-width:1px; fill:none; } -.zwLine { stroke:#fff; stroke-width:1px; } -.zwArrowHead { fill:#fff; stroke-width:1px; } +svg.zw_nr .zwBox { stroke:#fff; stroke-width:2px; fill:#000; } +svg.zw_nr .zwDongle { stroke:red; stroke-width:2px; fill:#000; } +svg.zw_nr .zwMargin { stroke:#fff; stroke-width:1px; fill:none; } +svg.zw_nr .zwLine { stroke:#fff; stroke-width:1px; } +svg.zw_nr .zwArrowHead { fill:#fff; stroke-width:1px; } svg.zw_nr { height:auto; width:auto; margin:0; } diff --git a/fhem/www/pgm2/defaultCommon.css b/fhem/www/pgm2/defaultCommon.css index 48a62b3f3..a843e6c4e 100644 --- a/fhem/www/pgm2/defaultCommon.css +++ b/fhem/www/pgm2/defaultCommon.css @@ -133,9 +133,9 @@ select [value^=l6] { color: olive; } select [value^=l7] { color: gray; } select [value^=l8] { color: yellow; } -.zwBox { stroke:#278727; stroke-width:2px; fill:#F0F0D8; } -.zwDongle { stroke:red; stroke-width:2px; fill:#F0F0D8; } -.zwMargin { stroke:#278727; stroke-width:1px; fill:none; } -.zwLine { stroke:#278727; stroke-width:1px; } -.zwArrowHead { fill:#278727; stroke-width:1px; } +svg.zw_nr .zwBox { stroke:#278727; stroke-width:2px; fill:#F0F0D8; } +svg.zw_nr .zwDongle { stroke:red; stroke-width:2px; fill:#F0F0D8; } +svg.zw_nr .zwMargin { stroke:#278727; stroke-width:1px; fill:none; } +svg.zw_nr .zwLine { stroke:#278727; stroke-width:1px; } +svg.zw_nr .zwArrowHead { fill:#278727; stroke-width:1px; } svg.zw_nr { height:auto; width:auto; margin:0; } diff --git a/fhem/www/pgm2/ios6Common.css b/fhem/www/pgm2/ios6Common.css index aec2af48e..ea10164b6 100644 --- a/fhem/www/pgm2/ios6Common.css +++ b/fhem/www/pgm2/ios6Common.css @@ -250,9 +250,9 @@ div#svgmarker { border:1px solid #fff; border-radius:4px; } -.zwBox { stroke:#c0c0c0; stroke-width:2px; fill:#f7f7f7; } -.zwDongle { stroke:red; stroke-width:2px; fill:#f7f7f7; } -.zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; } -.zwLine { stroke:#c0c0c0; stroke-width:1px; } -.zwArrowHead { fill:#c0c0c0; stroke-width:1px; } +svg.zw_nr .zwBox { stroke:#c0c0c0; stroke-width:2px; fill:#f7f7f7; } +svg.zw_nr .zwDongle { stroke:red; stroke-width:2px; fill:#f7f7f7; } +svg.zw_nr .zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; } +svg.zw_nr .zwLine { stroke:#c0c0c0; stroke-width:1px; } +svg.zw_nr .zwArrowHead { fill:#c0c0c0; stroke-width:1px; } svg.zw_nr { height:auto; width:auto; margin:0; } diff --git a/fhem/www/pgm2/ios7Common.css b/fhem/www/pgm2/ios7Common.css index 4450b88c7..1b1eebf51 100644 --- a/fhem/www/pgm2/ios7Common.css +++ b/fhem/www/pgm2/ios7Common.css @@ -29,9 +29,9 @@ div#svgmarker { color:black; background:#e5e5e5; } -.zwBox { stroke:#c0c0c0; stroke-width:2px; fill:#f7f7f7; } -.zwDongle { stroke:red; stroke-width:2px; fill:#f7f7f7; } -.zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; } -.zwLine { stroke:#c0c0c0; stroke-width:1px; } -.zwArrowHead { fill:#147bff; stroke-width:1px; } +svg.zw_nr .zwBox { stroke:#c0c0c0; stroke-width:2px; fill:#f7f7f7; } +svg.zw_nr .zwDongle { stroke:red; stroke-width:2px; fill:#f7f7f7; } +svg.zw_nr .zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; } +svg.zw_nr .zwLine { stroke:#c0c0c0; stroke-width:1px; } +svg.zw_nr .zwArrowHead { fill:#147bff; stroke-width:1px; } svg.zw_nr { height:auto; width:auto; margin:0; } diff --git a/fhem/www/pgm2/zwave_neighborlist.js b/fhem/www/pgm2/zwave_neighborlist.js index 527a3e047..743e2b621 100644 --- a/fhem/www/pgm2/zwave_neighborlist.js +++ b/fhem/www/pgm2/zwave_neighborlist.js @@ -1,8 +1,6 @@ var zw_visible; var svgns = 'xmlns="http://www.w3.org/2000/svg"'; -log("HELLO"); - function zw_nl(fhemFn) { @@ -34,7 +32,12 @@ zw_nl(fhemFn) el.lines = []; el.name = elName; el.elHash = fnRet.el; - el.width = el.height = 30; + if(el.img) { + el.width = 64; el.height = 64+20; + } else { + el.width = el.height = 30; + } + if(!el.pos.length) { el.pos = [xpos, ypos]; xpos += 150; @@ -102,17 +105,25 @@ zw_draw(fnRet, width, height) .css({width:width, height:height}) .html(svg); - $("svg g").each(function(){ - var name = $(this).attr("data-name"); - var text = $(this).find("text"); - var rect = $(this).find("rect"); - var w = $(text)[0].getBBox().width; - $(rect).attr("width",w+10); - $(this).find("rect").attr("width",w+10); + $("svg.zw_nr g").each(function(){ $(this).css({cursor:"pointer", position:"absolute"}); // firefox is relative - h[name].width = w+10; - h[name].rect = rect; - h[name].text = text; + var name = $(this).attr("data-name"); + var o = h[name]; + o.text = $(this).find("text"); + o.rect = $(this).find("rect"); + if(o.img) { + o.image = $(this).find("image"); + o.imgOffX = 0; + } + o.width = $(o.text)[0].getBBox().width+10; + if(o.img && o.width < 64) + o.width = 64; + if(o.image) { + o.imgOffX = (o.width-60)/2; + $(o.image).attr("x", o.x+o.imgOffX); + } + + $(o.rect).attr("width",o.width); zw_adjustLines(h, name); }) .draggable() @@ -126,6 +137,10 @@ zw_draw(fnRet, width, height) o.y = oy + (p.top -op.top); $(o.rect).attr("x", o.x); $(o.rect).attr("y", o.y); $(o.text).attr("x", o.x+5); $(o.text).attr("y", o.y+20); + if(o.image) { + $(o.image).attr("x", o.x+o.imgOffX); + $(o.image).attr("y", o.y+20); + } zw_adjustLines(h, o.name); }); } @@ -133,10 +148,17 @@ zw_draw(fnRet, width, height) function zw_drawbox(o) { - var s = ''+ - ''; + if(o.title) + s += ''+o.title+''; + s += ''; - s += ''+o.txt+''; + if(o.img) + s += ''; + s += ''+o.txt+'' + s +=''; return s; } @@ -520,7 +542,11 @@ GM() { $(this.rect).attr("x", this.x); $(this.rect).attr("y", this.y); $(this.text).attr("x", this.x+5); $(this.text).attr("y", this.y+20); - zw_adjustLines(this.elHash, this.name); + if(this.image) { + $(this.image).attr("x", this.x+this.imgOffX); + $(this.image).attr("y", this.y+20); + } + zw_adjustLines(this.elHash, this.name, 0); this.x+=this.speedX/damper; this.y+=this.speedY/damper;