From 7eda98be7d35f0bc938c71e93be0177aa4ccd1e9 Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Sat, 25 Jun 2011 13:47:04 +0000
Subject: [PATCH] Touchpad (i.e. iPad) support

git-svn-id: https://svn.fhem.de/fhem/trunk/fhem@919 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 FHEM/00_CUL.pm                      |  4 +-
 docs/commandref.html                | 17 ++++--
 webfrontend/pgm2/01_FHEMWEB.pm      | 86 ++++++++++++++++-------------
 webfrontend/pgm2/style_touchpad.css | 28 ++++++++++
 4 files changed, 88 insertions(+), 47 deletions(-)
 create mode 100644 webfrontend/pgm2/style_touchpad.css

diff --git a/FHEM/00_CUL.pm b/FHEM/00_CUL.pm
index 1842a1494..a12a624fd 100755
--- a/FHEM/00_CUL.pm
+++ b/FHEM/00_CUL.pm
@@ -46,8 +46,8 @@ my %sets = (
 
 my @ampllist = (24, 27, 30, 33, 36, 38, 40, 42); # rAmpl(dB) 
 
-my $clientsSlowRF = ":FS20:FHT:FHT8V:KS300:USF1000:BS:HMS" .
-                    ":CUL_EM:CUL_WS:CUL_FHTTK:CUL_RFR:CUL_HOERMANN" .
+my $clientsSlowRF = ":FS20:FHT:FHT8V:KS300:USF1000:BS:HMS: " .
+                    ":CUL_EM:CUL_WS:CUL_FHTTK:CUL_RFR:CUL_HOERMANN: " .
                     ":ESA2000:CUL_IR:";
 
 my $clientsHomeMatic = ":CUL_HM:HMS:";
diff --git a/docs/commandref.html b/docs/commandref.html
index bc0b41c8b..b50fcc56e 100644
--- a/docs/commandref.html
+++ b/docs/commandref.html
@@ -2017,8 +2017,10 @@ A line ending with \ will be concatenated with the next one, so long lines
   <b>Set </b>
   <ul>
     <li>raw<br>
-        Issue a CUL firmware command.  See the CUL firmware README document for
-        details on CUL commands.
+        Issue a CUL firmware command.  See the <a
+        href="http://www.koeniglich.de/culfw/commandref.html">this</a> document
+        for details on CUL commands.
+
         </li><br>
     <li>freq / bWidth / rAmpl / sens<br>
         <a href="#rfmode">SlowRF</a> mode only.<br>
@@ -5739,15 +5741,18 @@ Readings and STATE of temperature/humidity sensors are compatible with the CUL_W
         </li><br>
 
     <a name="smallscreen"></a>
-    <li>smallscreen<br/>
-        Optimize for small screen size, e.g. smartphones.<br>
+    <a name="touchpad"></a>
+    <li>smallscreen, touchpad<br/>
+        Optimize for small screen size (i.e. smartphones) or for touchpad
+        devices (i.e. tablets)<br>
         Note: The default configuration installed with make install-pgm2
         installs 2 FHEMWEB instances: port 8083 for desktop browsers and
         port 8084 for smallscreen browsers, both using SVG rendering. As
         Android does not support SVG at the moment, change plotmode to
         gnuplot-scroll.<br>
-        WebApp suppport: After viewing the site on the iPhone or iPad in
-        Safari, add it to the home-screen to get full-screen support.
+        WebApp suppport if specifying one of the above options: After viewing
+        the site on the iPhone or iPad in Safari, add it to the home-screen to
+        get full-screen support.
         </li><br>
 
     <a name="plotfork"></a>
diff --git a/webfrontend/pgm2/01_FHEMWEB.pm b/webfrontend/pgm2/01_FHEMWEB.pm
index 7dd8c0909..fe40882b4 100755
--- a/webfrontend/pgm2/01_FHEMWEB.pm
+++ b/webfrontend/pgm2/01_FHEMWEB.pm
@@ -36,6 +36,7 @@ sub FW_calcWeblink($$);
 use vars qw($FW_dir);  # moddir (./FHEM), needed by SVG
 use vars qw($FW_ME);   # webname (default is fhem), needed by 97_GROUP
 use vars qw($FW_ss);   # is smallscreen, needed by 97_GROUP/95_VIEW
+use vars qw($FW_tp);   # is touchpad (iPad / etc)
 use vars qw(%FW_types);# device types, for sorting, for 97_GROUP/95_VIEW
 my $zlib_loaded;
 
@@ -75,7 +76,8 @@ FHEMWEB_Initialize($)
   $hash->{UndefFn} = "FW_Undef";
   $hash->{AttrList}= "loglevel:0,1,2,3,4,5,6 webname fwmodpath fwcompress " .
                      "plotmode:gnuplot,gnuplot-scroll,SVG plotsize refresh " .
-                     "smallscreen plotfork basicAuth basicAuthMsg HTTPS";
+                     "touchpad smallscreen plotfork basicAuth basicAuthMsg ".
+                     "HTTPS";
 
   ###############
   # Initialize internal structures
@@ -255,7 +257,7 @@ FW_Read($)
   my ($mode, $arg, $method) = split(" ", $lines[0]);
   $hash->{BUF} = "";
 
-  Log($ll, "HTTP $name GET $arg");
+  Log $ll, "HTTP $name GET $arg";
   my $pid;
   if(AttrVal($FW_wname, "plotfork", undef)) {
     # Process SVG rendering as a parallel process
@@ -285,7 +287,7 @@ FW_Read($)
   my $length = length($FW_RET);
   my $expires = ($cacheable?
                         ("Expires: ".localtime(time()+900)." GMT\r\n") : "");
-  #Log 0, "$arg / RL: $length / $FW_RETTYPE / $compressed";
+  Log $ll, "$arg / RL: $length / $FW_RETTYPE / $compressed / $expires";
   print $c "HTTP/1.1 200 OK\r\n",
            "Content-Length: $length\r\n",
            $expires, $compressed,
@@ -305,6 +307,7 @@ FW_AnswerCall($)
   $FW_ME = "/" . AttrVal($FW_wname, "webname", "fhem");
   $FW_dir = AttrVal($FW_wname, "fwmodpath", "$attr{global}{modpath}/FHEM");
   $FW_ss = AttrVal($FW_wname, "smallscreen", 0);
+  $FW_tp = AttrVal($FW_wname, "touchpad", $FW_ss);
 
   # Lets go:
   if($arg =~ m,^${FW_ME}/(.*html)$, || $arg =~ m,^${FW_ME}/(example.*)$,) {
@@ -371,7 +374,8 @@ FW_AnswerCall($)
                 $cmd !~ /^edit/);
 
   $FW_plotmode = AttrVal($FW_wname, "plotmode", "SVG");
-  $FW_plotsize = AttrVal($FW_wname, "plotsize", $FW_ss ? "480,160" : "800,160");
+  $FW_plotsize = AttrVal($FW_wname, "plotsize", $FW_ss ? "480,160" :
+                                                $FW_tp ? "600,160" : "800,160");
   $FW_reldoc = "$FW_ME/commandref.html";
 
   $FW_cmdret = $docmd ? fC($cmd) : "";
@@ -402,7 +406,8 @@ FW_AnswerCall($)
   pO '<html xmlns="http://www.w3.org/1999/xhtml">';
   pO "<head>\n<title>$t</title>";
 
-  if($FW_ss) {
+  # Enable WebApp
+  if($FW_tp || $FW_ss) {
     pO '<link rel="apple-touch-icon-precomposed" href="'.$FW_ME.'/fhemicon.png"/>';
     pO '<meta name="apple-mobile-web-app-capable" content="yes"/>';
     pO '<meta name="viewport" content="width=device-width"/>';
@@ -410,7 +415,8 @@ FW_AnswerCall($)
 
   my $rf = AttrVal($FW_wname, "refresh", "");
   pO "<meta http-equiv=\"refresh\" content=\"$rf\">" if($rf);
-  my $stylecss = ($FW_ss ? "style_smallscreen.css" : "style.css");
+  my $stylecss = ($FW_ss ? "style_smallscreen.css" :
+                  $FW_tp ? "style_touchpad.css" : "style.css");
   pO "<link href=\"$FW_ME/$stylecss\" rel=\"stylesheet\"/>";
   pO "<script type=\"text/javascript\" src=\"$FW_ME/svg.js\"></script>"
                         if($FW_plotmode eq "SVG");
@@ -719,7 +725,7 @@ FW_roomOverview($)
   push(@list1, ""); push(@list2, "");
 
   pO "<div id=\"menu\">";
-  if($FW_ss) {
+  if($FW_ss) {  # Make a selection sensitive dropdown list
     foreach(my $idx = 0; $idx < @list1; $idx++) {
       if(!$list1[$idx]) {
         pO "</select>" if($idx);
@@ -736,13 +742,20 @@ FW_roomOverview($)
 
     pO "<table>";
     foreach(my $idx = 0; $idx < @list1; $idx++) {
-      if(!$list1[$idx]) {
+      my ($l1, $l2) = ($list1[$idx], $list2[$idx]);
+      if(!$l1) {
         pO "  </table></td></tr>" if($idx);
         pO "  <tr><td><table class=\"block\" id=\"room\">"
           if($idx<int(@list1)-1);
       } else {
-        pF "    <tr%s>", $list1[$idx] eq $FW_room ? " class=\"sel\"" : "";
-        pO "<td><a href=\"$list2[$idx]\">$list1[$idx]</a></td></tr>";
+        pF "    <tr%s>", $l1 eq $FW_room ? " class=\"sel\"" : "";
+        #pO "<td><a href=\"$l2\">$l1</a></td></tr>";
+        if($l2 =~ m/.html$/) {
+           pO "<td><a href=\"$l2\">$l1</a></td>";
+        } else {
+          pH $l2, $l1, 1;
+        }
+        pO "</tr>";
       }
     }
     pO "</table>";
@@ -847,8 +860,9 @@ FW_showRoom()
           pO "<td align=\"center\">$v</td>";
         }
         if($allSets) {
-          pH "cmd.$d=set $d on$rf", "on", 1;
-          pH "cmd.$d=set $d off$rf", "off", 1;
+          my $sp = "&nbsp;&nbsp;";
+          pH "cmd.$d=set $d on$rf",  "${sp}on${sp}", 1;
+          pH "cmd.$d=set $d off$rf", "${sp}off${sp}", 1;
         }
 
       } elsif($type eq "FHT") {
@@ -1427,13 +1441,13 @@ FW_style($$)
 
     my @fl;
     push(@fl, "fhem.cfg");
-    push(@fl, "<br>");
+    push(@fl, "");
     push(@fl, FW_fileList("$FW_dir/.*.css"));
-    push(@fl, "<br>");
+    push(@fl, "");
     push(@fl, FW_fileList("$FW_dir/.*.js"));
-    push(@fl, "<br>");
+    push(@fl, "");
     push(@fl, FW_fileList("$FW_dir/.*.gplot"));
-    push(@fl, "<br>");
+    push(@fl, "");
     push(@fl, FW_fileList("$FW_dir/.*html"));
 
     pO "<div id=\"content\">";
@@ -1443,7 +1457,11 @@ FW_style($$)
     my $row = 0;
     foreach my $file (@fl) {
       pO "<tr class=\"" . ($row?"odd":"even") . "\">";
-      pH "cmd=style edit $file", $file, 1;
+      if($file eq "") {
+        pO "<td><br></td>";
+      } else {
+        pH "cmd=style edit $file", $file, 1;
+      }
       pO "</tr>";
       $row = ($row+1)%2;
     }
@@ -1484,6 +1502,7 @@ FW_style($$)
     my $ncols = $FW_ss ? 40 : 80;
     pO "<div id=\"content\">";
     pO "  <form>";
+    $f =~ s,^.*/,,;
     pO     FW_submit("save", "Save $f") . "<br><br>";
     pO     FW_hidden("cmd", "style save $a[2]");
     pO     "<textarea name=\"data\" cols=\"$ncols\" rows=\"30\">" .
@@ -1504,9 +1523,8 @@ FW_style($$)
     binmode (FH);
     print FH $FW_data;
     close(FH);
-    FW_style("style list", "Saved file $f");
-    $f = ($a[2] eq "fhem.cfg" ? $attr{global}{configfile} : $a[2]);
-
+    $f =~ s,^.*/,,;
+    FW_style("style list", "Saved the file $f");
     fC("rereadcfg") if($a[2] eq "fhem.cfg");
   }
 
@@ -1529,10 +1547,11 @@ pH(@)
    my ($link, $txt, $td) = @_;
 
    pO "<td>" if($td);
-   if($FW_ss) {
-     pO "<a onClick=\"location.href='$FW_ME?$link'\"><div class=\"href\">$txt</div></a>";
+   $link = ($link =~ m,^/,) ? $link : "$FW_ME?$link";
+   if($FW_ss || $FW_tp) {
+     pO "<a onClick=\"location.href='$link'\"><div class=\"href\">$txt</div></a>";
    } else {
-     pO "<a href=\"$FW_ME?$link\">$txt</a>";
+     pO "<a href=\"$link\">$txt</a>";
    }
    pO "</td>" if($td);
 }
@@ -1542,7 +1561,7 @@ pHJava(@)
 {
    my ($link, $txt) = @_;
 
-   if($FW_ss) {
+   if($FW_ss || $FW_tp) {
      pO "<a onClick=\"$link\"><div class=\"href\">$txt</div></a>";
    } else {
      pO "<a onClick=\"$link\">$txt</a>";
@@ -1555,7 +1574,7 @@ pHPlain(@)
    my ($link, $txt, $td) = @_;
 
    pO "<td>" if($td);
-   if($FW_ss) {
+   if($FW_ss || $FW_tp) {
      pO "<a onClick=\"location.href='$FW_ME?$link'\">$txt</a>";
    } else {
      pO "<a href=\"$FW_ME?$link\">$txt</a>";
@@ -1608,13 +1627,6 @@ FW_showWeblink($$$)
         $va[2] = $1;
       }
 
-      if($FW_ss) {
-        pHPlain "detail=$d", $d;
-        pO "<br>";
-      } else {
-        pO "<table><tr><td>";
-      }
-
       my $wl = "&amp;pos=" . join(";", map {"$_=$FW_pos{$_}"} keys %FW_pos);
 
       my $arg="$FW_ME?cmd=showlog $d $va[0] $va[1] $va[2]$wl";
@@ -1627,13 +1639,9 @@ FW_showWeblink($$$)
         pO "<img src=\"$arg\"/>";
       }
 
-      if($FW_ss) {
-        pO "<br>";
-      } else {
-        pO "</td>";
-        pH "detail=$d", $d, 1;
-        pO "</tr></table>";
-      }
+      pO "<br>";
+      pHPlain "detail=$d", $d;
+      pO "<br>";
 
     }
   }
diff --git a/webfrontend/pgm2/style_touchpad.css b/webfrontend/pgm2/style_touchpad.css
new file mode 100644
index 000000000..e57fb0bae
--- /dev/null
+++ b/webfrontend/pgm2/style_touchpad.css
@@ -0,0 +1,28 @@
+body     { background-color: #FFFFE7;}
+#logo    { position:absolute; top:10px; left:10px; width:100px; }
+#menu    { position:absolute; top:120px;left:10px; width:100px; }
+#hdr     { position:absolute; top:10px; left:120px; }
+#content { position:absolute; top:50px; left:120px; bottom:20px; right:10px; }
+a {  color: #278727; }
+
+div.href { /* Push buttons */
+  padding:0; border:1px solid gray; height:1.5em;
+  -moz-border-radius:0.5em; -webkit-border-radius:0.5em;
+  display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center;
+  background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#fffff7), color-stop(49%,#ffffc7));
+  -webkit-box-shadow: 0 0.15em 0.15em rgba(0,0,0, .5);
+}
+
+table.block { border:1px solid gray; width: 100%; background: #F8F8E0; }
+table.block tr.odd { background: #F0F0D8; }
+table.block tr.sel { background: #F0F0D8; }
+table { -moz-border-radius:8px; -webkit-border-radius:8px; }
+
+table#room { background: #D7FFFF; }
+table#room tr.sel { background: #A0FFFF; }
+
+/* Customize specific devices */
+/*
+table#FS20 { background: #FF8080; }
+table#FS20 tr.odd { background: #E08080; }
+*/