Smallscreen fixes for Opera&Firefox (Android)

git-svn-id: https://svn.fhem.de/fhem/trunk@942 2b470e98-0d58-463d-a4d8-8e2adae1ed80

fhem/CHANGED

@@ -1,3 +1,6 @@
+- CVS
+  - bugfix:  applying smallscreen attributes to firefox/opera
+
 - 2011-07-08 (5.1)
   - feature: smallscreen optimizations for iPhone
   - feature: FHT8V rewrite (and moved from contrib into the FHEM directory).

fhem/docs/HOWTO.html

@@ -276,7 +276,7 @@
       your browser must support SVG. Firefox, Opera, Chrome, Safari
       (both on OSX and iOS) support SVG out of the box, Internet Explorer
       from version 9. IE prior to version 9 does it via the Adobe "SVG viewer"
-      plugin, and some Android versions prior to 3.0 do not support it.
+      plugin, on Android you need Opera or Firefox.<br><br>
 
       SVG mode is the default, to change it set the <a
       href="commandref.html#plotmode">plotmode</a> attribute to gnuplot or

fhem/docs/commandref.html

@@ -5748,9 +5748,9 @@ Readings and STATE of temperature/humidity sensors are compatible with the CUL_W
               The same scrolling as with gnuplot scroll, but the data is sent
               as an SVG script to the frontend, which will compute
               the image: no need for gnuplot on the backend.
-              This is the default. Note: SVG is not supported on the Android
+              This is the default. Note: SVG is supported on the Android
-              platform and the Internet Explorer needs a plugin (as of
+              platform by Opera/Firefox and the Internet Explorer before 9
-              2010-05-15)
+              needs a plugin.
               </li>
         </ul>
         See also the attribute fixedrange.
@@ -5786,9 +5786,9 @@ Readings and STATE of temperature/humidity sensors are compatible with the CUL_W
         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
+        port 8084 for smallscreen browsers, both using SVG rendering. 
-        Android does not support SVG at the moment, change plotmode to
+        On Android SVG is supported by Opera/Firefox.<br>
-        gnuplot-scroll.<br>
+
         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.

fhem/docs/fhem.html

@@ -220,6 +220,9 @@
     <h3>Documentation</h3>
     <ul>
 
+      <div id="dist"><a href="fhem-fuer-Einsteiger_V1.pdf">fhem fuer
+      Einsteiger</a> (pdf, german)</div>
+
       <div id="dist"><a href="HOWTO.html">HOWTO.html</a> for a short
       installation/configuration.</div> 
 

fhem/fhem.pl

@@ -167,7 +167,7 @@ my $nextat;                     # Time when next timer will be triggered.
 my $intAtCnt=0;
 my %duplicate;                  # Pool of received msg for multi-fhz/cul setups
 my $duplidx=0;                  # helper for the above pool
-my $cvsid = '$Id: fhem.pl,v 1.146 2011-07-08 12:14:12 rudolfkoenig Exp $';
+my $cvsid = '$Id: fhem.pl,v 1.147 2011-07-15 08:59:31 rudolfkoenig Exp $';
 my $namedef =
   "where <name> is either:\n" .
   "- a single device name\n" .
@@ -298,7 +298,7 @@ if($attr{global}{logfile} ne "-" && !$attr{global}{nofork}) {
 }
 
 # FritzBox special: Wait until the time is set via NTP,
-# but no more then 2 hours
+# but not more than 2 hours
 while(time() < 2*3600) {
   sleep(5);
 }

fhem/webfrontend/pgm2/01_FHEMWEB.pm

@@ -410,7 +410,8 @@ FW_AnswerCall($)
   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"/>';
+    #pO '<meta name="viewport" content="width=device-width"/>'
+    pO '<meta name="viewport" content="width=320"/>' if($FW_ss);
   }
 
   my $rf = AttrVal($FW_wname, "refresh", "");
@@ -861,9 +862,8 @@ FW_showRoom()
           pO "<td align=\"center\">$v</td>";
         }
         if($allSets) {
-          my $sp = "&nbsp;&nbsp;";
+          pH "cmd.$d=set $d on$rf",  "on", 1;
-          pH "cmd.$d=set $d on$rf",  "${sp}on${sp}", 1;
+          pH "cmd.$d=set $d off$rf", "off", 1;
-          pH "cmd.$d=set $d off$rf", "${sp}off${sp}", 1;
         }
 
       } elsif($type eq "FHT") {
@@ -1551,7 +1551,9 @@ pH(@)
    pO "<td>" if($td);
    $link = ($link =~ m,^/,) ? $link : "$FW_ME?$link";
    if($FW_ss || $FW_tp) {
-     pO "<a onClick=\"location.href='$link'\"><div class=\"href\">$txt</div></a>";
+     #pO "<a onClick=\"location.href='$link'\"><div class=\"href\">$txt</div></a>";
+     my $sp = "&nbsp;&nbsp;";
+     pO "<div class=\"href\"><a onClick=\"location.href='$link'\">$sp$txt$sp</a></div>";
    } else {
      pO "<a href=\"$link\">$txt</a>";
    }
@@ -1564,7 +1566,9 @@ pHJava(@)
    my ($link, $txt) = @_;
 
    if($FW_ss || $FW_tp) {
-     pO "<a onClick=\"$link\"><div class=\"href\">$txt</div></a>";
+     #pO "<a onClick=\"$link\"><div class=\"href\">$txt</div></a>";
+     my $sp = "&nbsp;&nbsp;";
+     pO "<div class=\"href\"><a onClick=\"$link\">$sp$txt$sp</a></div>";
    } else {
      pO "<a onClick=\"$link\">$txt</a>";
    }

fhem/webfrontend/pgm2/style.css

@@ -3,12 +3,13 @@ body     { background-color: #FFFFE7;}
 #menu    { position:absolute; top:120px;left:20px; width:140px; }
 #hdr     { position:absolute; top:10px; left:180px; }
 #content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
+
 a {  color: #278727; }
 
 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 { -moz-border-radius:8px; border-radius:8px; }
 
 table#room { background: #D7FFFF; }
 table#room tr.sel { background: #A0FFFF; }

fhem/webfrontend/pgm2/style_smallscreen.css

@@ -1,4 +1,4 @@
-body     { background-color: #FFFFE7;}
+body     { background-color: #FFFFE7; }
 #logo    { position:absolute; top:10px; left:10px; }
 #menu    { position:absolute; top:10px; left:85px; }
 #hdr     { position:absolute; top:40px; left:85px; }
@@ -8,16 +8,26 @@ 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;
+  -moz-border-radius:0.5em; border-radius:0.5em;
-  background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#fffff7), color-stop(49%,#ffffc7));
+
+  display: -webkit-box; -webkit-box-align: center;
+  display: -moz-box; -moz-box-align: center;
+
+  background-image:-webkit-gradient(linear, right top, right bottom,
+                   color-stop(0%,#fffff7), color-stop(49%,#ffffc7));
+  background-image:-moz-linear-gradient(top, #fffff7, #ffffc7);
+  background-image:-o-linear-gradient(top, #fffff7, #ffffc7);
+
   -webkit-box-shadow: 0 0.15em 0.15em rgba(0,0,0, .5);
+  -moz-box-shadow: 0 0.15em 0.15em rgba(0,0,0, .5);
+  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 { -moz-border-radius:8px; border-radius:8px; }
 
 table#room { background: #D7FFFF; }
 table#room tr.sel { background: #A0FFFF; }

fhem/webfrontend/pgm2/style_touchpad.css

@@ -3,20 +3,31 @@ body     { background-color: #FFFFE7;}
 #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;
+  -moz-border-radius:0.5em; border-radius:0.5em;
-  background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#fffff7), color-stop(49%,#ffffc7));
+
+  display: -webkit-box; -webkit-box-align: center;
+  display: -moz-box; -moz-box-align: center;
+
+  background-image:-webkit-gradient(linear, right top, right bottom,
+                   color-stop(0%,#fffff7), color-stop(49%,#ffffc7));
+  background-image:-moz-linear-gradient(top, #fffff7, #ffffc7);
+  background-image:-o-linear-gradient(top, #fffff7, #ffffc7);
+
   -webkit-box-shadow: 0 0.15em 0.15em rgba(0,0,0, .5);
+  -moz-box-shadow: 0 0.15em 0.15em rgba(0,0,0, .5);
+  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 { -moz-border-radius:8px; border-radius:8px; }
 
 table#room { background: #D7FFFF; }
 table#room tr.sel { background: #A0FFFF; }