From ba86d3fcb8bb2a13ff4865435fc510051ad168b4 Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Tue, 1 May 2012 09:19:03 +0000
Subject: [PATCH] Slider on the room level added

git-svn-id: https://svn.fhem.de/fhem/trunk@1513 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 fhem/contrib/FB7390/startfhem       | 21 +++----
 fhem/docs/commandref.html           | 21 +++++--
 fhem/webfrontend/pgm2/01_FHEMWEB.pm | 96 +++++++++++++++++++++--------
 fhem/webfrontend/pgm2/fhemweb.js    | 34 +++++++---
 fhem/webfrontend/pgm2/style.css     |  7 ++-
 5 files changed, 124 insertions(+), 55 deletions(-)

diff --git a/fhem/contrib/FB7390/startfhem b/fhem/contrib/FB7390/startfhem
index 3fa96cd25..561f7c21e 100755
--- a/fhem/contrib/FB7390/startfhem
+++ b/fhem/contrib/FB7390/startfhem
@@ -17,21 +17,20 @@ export PATH
 export LD_LIBRARY_PATH=$home/lib
 export PERL5LIB=$home/lib/perl5/site_perl/5.12.2/mips-linux:$home/lib/perl5/site_perl/5.12.2:$home/lib/perl5/5.12.2/mips-linux:$home/lib/perl5/5.12.2
 
+########### START fhem-user
 # let FHEM run as user boxusr80 by adding user fhem with uid of boxusr80
 # Using this feature the following will not work: ping,WOL,lcd4linux
-# start fhem-user
-id fhem > /dev/null 2>&1
-if [ "$?" -ne "0" ]; then
-  echo "user fhem does not exist. Adding it."
-  echo "fhem:any:1080:0:fhem:/home-not-used:/bin/sh" >>/var/tmp/passwd
-fi 
-# end fhem-user
+#id fhem > /dev/null 2>&1
+#if [ "$?" -ne "0" ]; then
+#  echo "user fhem does not exist. Adding it."
+#  echo "fhem:any:1080:0:fhem:/home-not-used:/bin/sh" >>/var/tmp/passwd
+#fi 
+#chown root ${home}/dfu-programmer
+#chmod 4755 ${home}/dfu-programmer
+########### END fhem-user
 
-# set file ownership
+# set file ownership, so that the webinterface can read it.
 chown -R boxusr80 ${home}/log
 chown -R boxusr80 ${home}/FHEM
 
-chown root ${home}/dfu-programmer
-chmod 4755 ${home}/dfu-programmer
-
 perl fhem.pl fhem.cfg
diff --git a/fhem/docs/commandref.html b/fhem/docs/commandref.html
index bcd75795e..bba6db0d5 100644
--- a/fhem/docs/commandref.html
+++ b/fhem/docs/commandref.html
@@ -8031,12 +8031,25 @@ KlikAanKlikUit, NEXA, CHACON, HomeEasy UK. <br> You need to define an RFXtrx433
     <a name="webCmd"></a>
     <li>webCmd<br>
         Colon separated list of commands to be shown in the room overview for a
-        certain device. Example:
+        certain device.  On smallscreen devices only the first value is
+        accessible.<br>
+        If the first value references a command, for which "set
+        device ?" lists a number possible choices (e.g. desired-temp for FHT
+        devices), then a select widget will be displayed. If the values are
+        "slider,min,step,max", then a javascript driven slider is displayed. If
+        the command is state, then the value will be used as a command.<br>
+        Examples:
         <ul>
-          attr lamp webCmd on:off:on-for-timer 10
+          attr lamp webCmd on:off:on-for-timer 10<br>
+          define d1 dummy<br>
+          attr d1 webCmd state<br>
+          attr d1 set setList state:on,off<br>
+          define d2 dummy<br>
+          attr d2 webCmd state<br>
+          attr d2 set setList state:slider,0,1,10<br>
         </ul>
-        On smallscreen devices only the first value is accessible.<br>
-        Note: this a device, not a FHEMWEB attribute.
+        Note: this an attribute for the displayed device, not for the FHEMWEB
+        instance.
         </li>
         <br>
 
diff --git a/fhem/webfrontend/pgm2/01_FHEMWEB.pm b/fhem/webfrontend/pgm2/01_FHEMWEB.pm
index 15690e75c..6f1e82145 100755
--- a/fhem/webfrontend/pgm2/01_FHEMWEB.pm
+++ b/fhem/webfrontend/pgm2/01_FHEMWEB.pm
@@ -575,7 +575,8 @@ FW_digestCgi($)
 
   }
   $cmd.=" $dev{$c}" if(defined($dev{$c}));
-  $cmd.=" $arg{$c}" if(defined($arg{$c}));
+  $cmd.=" $arg{$c}" if(defined($arg{$c}) &&
+                       ($arg{$c} ne "state" || $cmd !~ m/^set/));
   $cmd.=" $val{$c}" if(defined($val{$c}));
   return $cmd;
 }
@@ -669,7 +670,7 @@ FW_makeSelect($$$$)
   my @al = sort map { s/:.*//;$_ } split(" ", $list);
 
   my $selEl = $al[0];
-  $selEl = $1 if($list =~ m/([^ ]*):slider,/); # if available
+  $selEl = $1 if($list =~ m/([^ ]*):slider,/); # promote a slider if available
   $selEl = "room" if($list =~ m/room:/);
 
   FW_pO "<form method=\"get\" action=\"$FW_ME$FW_subdir\">";
@@ -699,6 +700,7 @@ FW_doDetail($)
 
   my $t = $defs{$d}{TYPE};
   FW_pO "<div id=\"content\">";
+
   if($FW_ss) { # FS20MS2 special: on and off, is not the same as toggle
     my $webCmd = AttrVal($d, "webCmd", undef);
     if($webCmd) {
@@ -713,7 +715,7 @@ FW_doDetail($)
     }
   }
   FW_pO "<table><tr><td>";
-  FW_makeSelect($d, "set", getAllSets($d),"set");
+  FW_makeSelect($d, "set", getAllSets($d), "set");
   FW_makeTable($d, $defs{$d});
   FW_pO "Readings" if($defs{$d}{READINGS});
   FW_makeTable($d, $defs{$d}{READINGS});
@@ -913,7 +915,9 @@ FW_showRoom()
   my %group;
   foreach my $dev (@devs) {
     next if($defs{$dev}{TYPE} eq "weblink");
-    $group{AttrVal($dev, "group", $defs{$dev}{TYPE})}{$dev} = 1;
+    foreach my $grp (split(",", AttrVal($dev, "group", $defs{$dev}{TYPE}))) {
+      $group{$grp}{$dev} = 1;
+    }
   }
 
   # row counter
@@ -952,26 +956,61 @@ FW_showRoom()
       if(!$FW_ss) {
         FW_pO "</td>";
         if($cmdlist) {
-          foreach my $cmd (split(":", $cmdlist)) {
-            FW_pH "cmd.$d=set $d $cmd$rf", ReplaceEventMap($d,$cmd,1),1,"col3";
+          my @cList = split(":", $cmdlist);
+          my @rList = map { ReplaceEventMap($d,$_,1) } @cList;
+          my $firstIdx = 0;
+
+          # Special handling (slider, dropdown)
+          my $cmd = $cList[0];
+          if($allSets && $allSets =~ m/$cmd:([^ ]*)/) {
+            my $values = $1;
+
+            if($values =~ m/^slider,(.*),(.*),(.*)/) { ##### Slider
+              my ($min,$stp, $max) = ($1, $2, $3);
+              my $srf = $FW_room ? "&room=$FW_room" : "";
+              my $curr = ReadingsVal($d, $cmd, Value($d));
+              $cmd = "" if($cmd eq "state");
+              $curr=~s/[^\d\.]//g;
+              FW_pO "<td colspan='2'>".
+                      "<div class='slider' id='slider.$d'>".
+                        "<div class='handle'>$min</div></div>".
+                      "</div>".
+                      "<script type=\"text/javascript\">" .
+                        "Slider(document.getElementById('slider.$d'),".
+                              "'$min','$stp','$max','$curr',".
+                              "'$FW_ME?cmd=set $d $cmd %$srf')".
+                      "</script>".
+                    "</td>";
+              $firstIdx=1;
+
+            } else {    ##### Dropdown
+              $firstIdx=1;
+              my @tv = split(",", $values);
+              if($cmd eq "desired-temp") {
+                $txt = ReadingsVal($d, "measured-temp", "");
+                $txt =~ s/ .*//;        # Cut off Celsius
+                $txt = sprintf("%2.1f", int(2*$txt)/2) if($txt =~ m/[0-9.-]/);
+                $txt = int($txt*20)/$txt if($txt =~ m/^[0-9].$/); # ???
+              } else {
+                $txt = Value($d);
+                $txt =~ s/$cmd //;
+              }
+              FW_pO "<td>".
+                FW_hidden("arg.$d", $cmd) .
+                FW_hidden("dev.$d", $d) .
+                ($FW_room ? FW_hidden("room", $FW_room) : "") .
+                FW_select("val.$d", \@tv, $txt, "dropdown").
+                "</td><td>".
+                FW_submit("cmd.$d", "set").
+                "</td>";
+            }
           }
 
-        } elsif($allSets =~ m/ desired-temp:([^ ]*)/) {
-          my @tv = split(",", $1);
-          $txt = ReadingsVal($d, "measured-temp", "");
-          $txt =~ s/ .*//;
-          $txt = sprintf("%2.1f", int(2*$txt)/2) if($txt =~ m/[0-9.-]/);
-          $txt = int($txt*20)/$txt if($txt =~ m/^[0-9].$/);
+          for(my $idx=$firstIdx; $idx < @cList; $idx++) {
+            FW_pH "cmd.$d=set $d $cList[$idx]$rf",
+                ReplaceEventMap($d,$cList[$idx],1),1,"col3";
+          }
 
-          FW_pO "<td>".
-            FW_hidden("arg.$d", "desired-temp") .
-            FW_hidden("dev.$d", $d) .
-            ($FW_room ? FW_hidden("room", $FW_room) : "") .
-            FW_select("val.$d", \@tv,
-                        ReadingsVal($d, "desired-temp", $txt),"fht") .
-            "</td><td>".
-            FW_submit("cmd.$d", "set").
-            "</td>";
 
         } elsif($type eq "FileLog") {
           $row = FW_dumpFileLog($d, 1, $row);
@@ -2021,20 +2060,21 @@ FW_FlushInform($)
   CommandDelete(undef, $name);
 }
 
+###################
+# Compute the state (==second) column
 sub
 FW_devState($$)
 {
   my ($d, $rf) = @_;
 
-  my ($allSets, $hasOnOff, $cmdlist, $link);
-  my $webCmd = AttrVal($d, "webCmd", "");
+  my ($hasOnOff, $cmdlist, $link);
 
+  my $webCmd = AttrVal($d, "webCmd", "");
+  my $allSets = " " . getAllSets($d) . " ";
   my $state = $defs{$d}{STATE};
   $state = "" if(!defined($state));
-  my $txt = $state;
 
   if(!$webCmd) {
-    $allSets = " " . getAllSets($d) . " ";
     $hasOnOff = ($allSets =~ m/ on / && $allSets =~ m/ off /);
 
     my $em = AttrVal($d, "eventMap", "");
@@ -2048,14 +2088,16 @@ FW_devState($$)
     }
   }
 
+  my $txt = $state;
   if(defined(AttrVal($d, "showtime", undef))) {
     my $v = $defs{$d}{READINGS}{state}{TIME};
     $txt = $v if(defined($v));
 
-  } elsif($allSets && $allSets =~ m/ desired-temp:/) {
+  } elsif($allSets =~ m/ desired-temp:/) {
     $txt = ReadingsVal($d, "measured-temp", "");
     $txt =~ s/ .*//;
-    $txt .= "&deg;"
+    $txt .= "&deg;";
+    $cmdlist = "desired-temp";
 
   } else {
     my $icon;
diff --git a/fhem/webfrontend/pgm2/fhemweb.js b/fhem/webfrontend/pgm2/fhemweb.js
index 464f5b476..258064906 100644
--- a/fhem/webfrontend/pgm2/fhemweb.js
+++ b/fhem/webfrontend/pgm2/fhemweb.js
@@ -52,10 +52,22 @@ FW_delayedStart()
 
 /*************** SLIDER **************/
 function
-Slider(slider, min, stp, max)
+Slider(slider, min, stp, max, curr, cmd)
 {
   var sh = slider.firstChild;
-  var lastX=-1, offX=-1, minX, maxX, val=-1;
+  var lastX=-1, offX=0, maxX=0, val=-1;
+
+  function
+  init()
+  {
+    maxX = slider.offsetWidth-sh.offsetWidth;
+    if(curr) {
+      offX += curr*maxX/(max-min);
+      sh.innerHTML = curr;
+      sh.setAttribute('style', 'left:'+offX+'px;');
+    }
+  }
+  init();
 
   function
   touchFn(e, fn)
@@ -73,10 +85,8 @@ Slider(slider, min, stp, max)
     var oldFn1 = document.onmousemove, oldFn2 = document.onmouseup,
         oldFn3 = document.ontouchmove, oldFn4 = document.ontouchend;
 
-    if(offX == -1) {
-      minX = offX = slider.offsetLeft;
-      maxX = minX+slider.offsetWidth-sh.offsetWidth;
-    }
+    if(maxX == 0)
+      init();
     lastX = e.clientX;
 
     function
@@ -84,9 +94,9 @@ Slider(slider, min, stp, max)
     {
       var diff = e.clientX-lastX; lastX = e.clientX;
       offX += diff;
-      if(offX < minX) offX = minX;
+      if(offX < 0) offX = 0;
       if(offX > maxX) offX = maxX;
-      val = min+((offX-minX)/(maxX-minX) * (max-min));
+      val = min+(offX/maxX * (max-min));
       val = Math.floor(Math.floor(val/stp)*stp);
       sh.innerHTML = val;
       sh.setAttribute('style', 'left:'+offX+'px;');
@@ -98,7 +108,11 @@ Slider(slider, min, stp, max)
     {
       document.onmousemove = oldFn1; document.onmouseup  = oldFn2;
       document.ontouchmove = oldFn3; document.ontouchend = oldFn4;
-      slider.nextSibling.setAttribute('value', val);
+      if(cmd) {
+        document.location = cmd.replace('%',val);
+      } else {
+        slider.nextSibling.setAttribute('value', val);
+      }
     };
   };
 
@@ -140,7 +154,7 @@ FW_selChange(sel, list, elName)
       newEl.innerHTML=
         '<div class="slider"><div class="handle">'+min+'</div></div>'+
         '<input type="hidden" name="'+name+'" value="'+min+'">';
-      Slider(newEl.firstChild, min, stp, max);
+      Slider(newEl.firstChild, min, stp, max, undefined, undefined);
 
     } else {
       newEl = document.createElement('select');
diff --git a/fhem/webfrontend/pgm2/style.css b/fhem/webfrontend/pgm2/style.css
index e1016815d..de40b430d 100644
--- a/fhem/webfrontend/pgm2/style.css
+++ b/fhem/webfrontend/pgm2/style.css
@@ -32,8 +32,9 @@ div#dist { padding-top:0.3em; }
 a img { border-style:none; }
 
 .set,.attr { margin-bottom:5px; float:left; }
-.slider { float:right; width:250px; height:26px; background:#F0F0D8;
-          margin-left:10px; -moz-border-radius:8px; border-radius:8px; }
-.handle { position:absolute; cursor:pointer; width:50px; height:20px; line-height:20px;
+.slider { float:right; width:250px; height:26px; }
+.set .slider { margin-left:10px; background:#F0F0D8;
+          -moz-border-radius:8px; border-radius:8px; }
+.handle { position:relative; cursor:pointer; width:50px; height:20px; line-height:20px;
           border:3px solid; color:#278727; text-align:center; } 
 .downText { margin-top:2px; }