Slider for the dimmer

git-svn-id: https://fhem.svn.sourceforge.net/svnroot/fhem/trunk/fhem@1472 2b470e98-0d58-463d-a4d8-8e2adae1ed80

webfrontend/pgm2/01_FHEMWEB.pm

@@ -26,7 +26,7 @@ sub FW_showLog($);
 sub FW_showRoom();
 sub FW_showWeblink($$$$);
 sub FW_style($$);
-sub FW_submit($$);
+sub FW_submit($$@);
 sub FW_substcfg($$$$$$);
 sub FW_textfield($$$);
 sub FW_updateHashes();
@@ -668,13 +668,22 @@ FW_makeSelect($$$$)
   return if(!$list || $FW_hiddenroom{input});
   my @al = sort map { s/:.*//;$_ } split(" ", $list);
 
+  my $selEl = $al[0];
+  $selEl = $1 if($list =~ m/([^ ]*):slider,/); # if available
+  $selEl = "room" if($list =~ m/room:/);
+
   FW_pO "<form method=\"get\" action=\"$FW_ME$FW_subdir\">";
   FW_pO FW_hidden("detail", $d);
   FW_pO FW_hidden("dev.$cmd$d", $d);
-  FW_pO FW_submit("cmd.$cmd$d", $cmd) . "&nbsp;$d";
-  FW_pO FW_select("arg.$cmd$d",\@al, undef, $class,
+  FW_pO FW_submit("cmd.$cmd$d", $cmd, $class);
+  FW_pO "<div class=\"$class downText\">&nbsp;$d&nbsp;</div>";
+  FW_pO FW_select("arg.$cmd$d",\@al, $selEl, $class,
         "FW_selChange(this.options[selectedIndex].text,'$list','val.$cmd$d')");
   FW_pO FW_textfield("val.$cmd$d", 30, $class);
+
+  # Initial setting
+  FW_pO "<script type=\"text/javascript\">" .
+        "FW_selChange('$selEl','$list','val.$cmd$d')</script>";
   FW_pO "</form>";
 }
 
@@ -696,7 +705,8 @@ FW_doDetail($)
       FW_pO "<table>";
       foreach my $cmd (split(":", $webCmd)) {
         FW_pO "<tr>";
-        FW_pH "cmd.$d=set $d $cmd&detail=$d",  ReplaceEventMap($d,$cmd,1), 1, "col1";
+        FW_pH "cmd.$d=set $d $cmd&detail=$d",
+                ReplaceEventMap($d,$cmd,1), 1, "col1";
         FW_pO "</tr>";
       }
       FW_pO "</table>";
@@ -707,10 +717,12 @@ FW_doDetail($)
   FW_makeTable($d, $defs{$d});
   FW_pO "Readings" if($defs{$d}{READINGS});
   FW_makeTable($d, $defs{$d}{READINGS});
+
   my $attrList = getAllAttr($d);
   my $roomList = join(",", sort keys %FW_rooms);
   $roomList=~s/ /\&nbsp;/g;
   $attrList =~ s/room /room:$roomList /;
+
   FW_makeSelect($d, "attr", $attrList,"attr");
   FW_makeTable($d, $attr{$d}, "deleteattr");
 
@@ -1282,9 +1294,9 @@ FW_hidden($$)
 sub
 FW_select($$$$@)
 {
-  my ($n, $va, $def,$class,$jfn) = @_;
-  $jfn = ($jfn ? "onchange=\"$jfn\"" : "");
-  my $s = "<select $jfn name=\"$n\" class=\"$class\">";
+  my ($n, $va, $def, $class, $jSelFn) = @_;
+  $jSelFn = ($jSelFn ? "onchange=\"$jSelFn\"" : "");
+  my $s = "<select $jSelFn name=\"$n\" class=\"$class\">";
 
   foreach my $v (@{$va}) {
     if($def && $v eq $def) {
@@ -1309,10 +1321,11 @@ FW_textfield($$$)
 
 ##################
 sub
-FW_submit($$)
+FW_submit($$@)
 {
-  my ($n, $v) = @_;
-  my $s ="<input type=\"submit\" name=\"$n\" value=\"$v\"/>";
+  my ($n, $v, $class) = @_;
+  $class = ($class ? "class=\"$class\"" : "");
+  my $s ="<input type=\"submit\" name=\"$n\" value=\"$v\" $class/>";
   return $s;
 }
 

webfrontend/pgm2/darkstyle.css

@@ -36,3 +36,10 @@ h2,h3,h4 { color:#EEE; line-height:1.3; margin-top:1.5em; font-family:Verdana; }
 
 select.attr,input.attr,select.set,input.set { margin-bottom:10px; }
 a img { border-style:none; }
+
+.set,.attr { margin-bottom:10px; 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;
+          border:3px solid; color:white; text-align:center; } 
+.downText { margin-top:2px; }

webfrontend/pgm2/fhemweb.js

@@ -48,7 +48,49 @@ FW_delayedStart()
 {
   setTimeout("FW_longpoll()", 1000);
 }
+/*************** LONGPOLL END **************/
 
+/*************** SLIDER **************/
+function
+Slider(slider, min, stp, max)
+{
+  var sh = slider.firstChild;
+  var lastX=-1, offX=-1, minX, maxX, val=-1;
+
+  sh.onselectstart = function() { return false; }
+  sh.onmousedown = function(e) {
+    var oldMoveFn = document['onmousemove'];
+    var oldUpFn = document['onmouseup'];
+
+    if(offX == -1) {
+      minX = offX = slider.offsetLeft;
+      maxX = minX+slider.offsetWidth-sh.offsetWidth;
+    }
+    lastX = e.clientX;
+
+    document['onmousemove'] = function(e) {
+      var diff = e.clientX-lastX; lastX = e.clientX;
+      offX += diff;
+      if(offX < minX) offX = minX;
+      if(offX > maxX) offX = maxX;
+      val = min+((offX-minX)/(maxX-minX) * (max-min));
+      val = Math.floor(Math.floor(val/stp)*stp);
+      sh.innerHTML = val;
+      sh.setAttribute('style', 'left:'+offX+'px;');
+    }
+
+    document.onmouseup = function(e) {
+      document['onmousemove'] = oldMoveFn;
+      document['onmouseup'] = oldUpFn;
+      slider.nextSibling.setAttribute('value', val);
+    };
+  };
+
+}
+
+
+/*************** Select **************/
+/** Change attr/set argument type to input:text or select **/
 function
 FW_selChange(sel, list, elName)
 {
@@ -62,17 +104,34 @@ FW_selChange(sel, list, elName)
   }
 
   var el = document.getElementsByName(elName)[0];
+  var name = el.getAttribute('name');
+
   if(value==undefined) {
     newEl = document.createElement('input');
     newEl.type='text'; newEl.size=30; 
+
   } else {
-    newEl = document.createElement('select');
-    var vArr = value.split(",");
-    for(var j=0; j < vArr.length; j++) {
-      newEl.options[j] = new Option(vArr[j], vArr[j]);
+    var vArr = value.split(","); 
+    if(vArr.length == 4 && vArr[0] == "slider") {
+      var min=parseFloat(vArr[1]),
+          stp=parseFloat(vArr[2]),
+          max=parseFloat(vArr[3]);
+      newEl = document.createElement('div');
+      newEl.innerHTML=
+        '<div class="slider"><div class="handle">'+min+'</div></div>'+
+        '<input type="hidden" name="'+name+'" value="'+min+'">';
+      Slider(newEl.firstChild, min, stp, max);
+
+    } else {
+      newEl = document.createElement('select');
+      for(var j=0; j < vArr.length; j++) {
+        newEl.options[j] = new Option(vArr[j], vArr[j]);
+      }
     }
   }
-  newEl.class=el.class; newEl.name=el.name;
+
+  newEl.setAttribute('class', el.getAttribute('class')); //changed from el.class
+  newEl.setAttribute('name', el.getAttribute('name'));
   el.parentNode.replaceChild(newEl, el);
+
 }
-/*************** LONGPOLL END **************/

webfrontend/pgm2/smallscreenstyle.css

@@ -58,3 +58,11 @@ h2,h3,h4 { color:#52865D; line-height:1.3;
            margin-top:1.5em; font-family:Arial,Sans-serif; }
 div#block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
 div#dist { padding-top:0.3em; }
+
+
+.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;
+          border:3px solid; color:#278727; text-align:center; } 
+.downText { margin-top:2px; }

webfrontend/pgm2/style.css

@@ -29,5 +29,11 @@ h2,h3,h4 { color:#52865D; line-height:1.3;
 div#block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
 div#dist { padding-top:0.3em; }
 
-select.attr,input.attr,select.set,input.set { margin-bottom:5px; }
 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;
+          border:3px solid; color:#278727; text-align:center; } 
+.downText { margin-top:2px; }

webfrontend/pgm2/touchpadstyle.css

@@ -23,3 +23,10 @@ table { -moz-border-radius:8px; border-radius:8px; }
 
 table#room { border:1px solid gray; width: 100%; background: #D7FFFF; }
 table#room tr.sel { background: #A0FFFF; }
+
+.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;
+          border:3px solid; color:#278727; text-align:center; } 
+.downText { margin-top:2px; }