diff --git a/CHANGED b/CHANGED index a19c6f3f3..8e47429a0 100644 --- a/CHANGED +++ b/CHANGED @@ -585,3 +585,4 @@ - feature: CUL_HOERMANN module added - bugfix: DST change: absolute at and relative sunrise fix - feature: FHEMWEB javascript additions for SVG plots (click on lines/labels) + - feature: FHEMWEB smallscreen attribute diff --git a/docs/HOWTO.html b/docs/HOWTO.html index 191fcbf3c..edafaa570 100644 --- a/docs/HOWTO.html +++ b/docs/HOWTO.html @@ -57,10 +57,14 @@ After starting, the logfile should look like:
       2008.06.15 16:17:03 2: FHEMWEB port 8083 opened
+      2008.06.15 16:17:03 2: FHEMWEB port 8084 opened
       2008.06.15 16:17:03 0: Server started (version ...)
       
Connect to fhem with an internet browser: - http://localhost:8083/fhem + http://localhost:8083/fhem
+ or + http://localhost:8084/fhem if + you are using a small-screen browser (e.g a smartphone). diff --git a/docs/commandref.html b/docs/commandref.html index e109e2c96..c4fdf609e 100644 --- a/docs/commandref.html +++ b/docs/commandref.html @@ -4247,7 +4247,8 @@ Terminating
  • plotsize
    the default size of the plot, in pixels, separated by comma: width,height. You can set individual sizes by setting the plotsize of - the weblink. + the weblink. Default is 800,160 for desktop, and 480,160 for + smallscreen.

  • @@ -4257,7 +4258,18 @@ Terminating In plotmode gnuplot-scroll or SVG the given time-range will be used, and no scrolling for this weblinks will be possible. Needed e.g. for looking at last-years data without scrolling. -
    +
    + + +
  • smallscreen
    + Optimize for small screen size, e.g. smartphones. + Note: The default configuration installed with make install-pgm2 + installs 2 FHEMWEB instances: port 8083 for desktop browsers and + port 8084 for smallscreen browsers. +

  • + + + diff --git a/examples/sample_pgm2 b/examples/sample_pgm2 index d405c008b..f5132b219 100644 --- a/examples/sample_pgm2 +++ b/examples/sample_pgm2 @@ -11,8 +11,9 @@ attr global verbose 3 # "normal" verbosity (min 1, max 5) #define FHEM FHEM /dev/USB0 define WEB FHEMWEB 8083 global -attr WEB plotmode SVG -attr WEB plotsize 800,160 + +define WEBS FHEMWEB 8084 global +attr WEBS smallscreen # Fake logfile, to access the global log define Logfile FileLog /tmp/fhem-%Y-%m.log fakelog diff --git a/webfrontend/pgm2/01_FHEMWEB.pm b/webfrontend/pgm2/01_FHEMWEB.pm index 66a0debab..9907f7847 100755 --- a/webfrontend/pgm2/01_FHEMWEB.pm +++ b/webfrontend/pgm2/01_FHEMWEB.pm @@ -57,6 +57,7 @@ my $__plotsize; # Global plot size (WEB attribute) my $__data; # Filecontent from browser when editing a file my $__dir; # FHEM directory my $__reldoc; # $__ME/commandref.html; +my $__ss; # smallscreen ##################################### @@ -70,7 +71,8 @@ FHEMWEB_Initialize($) $hash->{DefFn} = "FW_Define"; $hash->{UndefFn} = "FW_Undef"; $hash->{AttrList}= "loglevel:0,1,2,3,4,5,6 webname fwmodpath fwcompress " . - "plotmode:gnuplot,gnuplot-scroll,SVG plotsize refresh"; + "plotmode:gnuplot,gnuplot-scroll,SVG plotsize refresh " . + "smallscreen"; ############### # Initialize internal structures @@ -184,7 +186,7 @@ FW_Read($) } # This is a hack... Dont want to do it each time after a fork. - if(!$modules{SVG}{LOADED}) { + if(!$modules{SVG}{LOADED} && -f "$attr{global}{modpath}/FHEM/98_SVG.pm") { my $ret = CommandReload(undef, "98_SVG"); Log 0, $ret if($ret); } @@ -202,7 +204,7 @@ FW_Read($) $hash->{BUF} .= $buf; return if($hash->{BUF} !~ m/\n\n$/ && $hash->{BUF} !~ m/\r\n\r\n$/); - #Log(0, "Got: >$hash->{BUF}<"); + #Log 0, "Got: >$hash->{BUF}<"; my @lines = split("[\r\n]", $hash->{BUF}); my @enc = grep /Accept-Encoding/, @lines; @@ -254,6 +256,7 @@ FW_AnswerCall($) $__RETTYPE = "text/html; charset=ISO-8859-1"; $__ME = "/" . FW_getAttr($__wname, "webname", "fhem"); $__dir = FW_getAttr($__wname, "fwmodpath", "$attr{global}{modpath}/FHEM"); + $__ss = FW_getAttr($__wname, "smallscreen", 0); # Lets go: if($arg =~ m,^${__ME}/(.*html)$, || $arg =~ m,^${__ME}/(example.*)$,) { @@ -320,7 +323,7 @@ FW_AnswerCall($) $cmd !~ /^edit/); $__plotmode = FW_getAttr($__wname, "plotmode", "SVG"); - $__plotsize = FW_getAttr($__wname, "plotsize", "800,200"); + $__plotsize = FW_getAttr($__wname, "plotsize", $__ss ? "480,160" : "800,160"); $__reldoc = "$__ME/commandref.html"; $__cmdret = $docmd ? fC($cmd) : ""; @@ -353,7 +356,9 @@ FW_AnswerCall($) pO "\n$t"; my $rf = FW_getAttr($__wname, "refresh", ""); pO "" if($rf); - pO ""; + my $stylecss = ($__ss ? "style_smallscreen.css" : "style.css"); + pO ""; + pO "" if($__ss); pO "\n"; if($__cmdret) { @@ -361,7 +366,7 @@ FW_AnswerCall($) $__room = ""; $__cmdret =~ s//>/g; - pO "
    "; + pO "
    "; pO "
    $__cmdret
    "; pO "
    "; } @@ -499,7 +504,7 @@ FW_makeTable($$$$$$$$) pO ""; } pO " "; - pO "
    "; + pO "
    "; } @@ -517,7 +522,7 @@ FW_showArchive($) $fn = FW_getAttr($d, "archivedir", "") . "/" . $fn; my $t = $defs{$d}{TYPE}; - pO "
    "; + pO "
    "; pO "
    "; pO "
    "; @@ -556,7 +561,7 @@ FW_doDetail($) $__room = FW_getAttr($d, "room", undef); my $t = $defs{$d}{TYPE}; - pO "
    "; + pO "
    "; pO "" if($idx); + pO " \n
    "; pO "Delete $d"; @@ -592,15 +597,15 @@ sub FW_roomOverview($) { my ($cmd) = @_; - pO "
    "; + ############## + # HEADER + pO ""; pO "
    "; pO "
    "; - pO FW_textfield("cmd", 30); - + pO FW_textfield("cmd", $__ss ? 20 : 40); if($__room) { pO FW_hidden("room", "$__room"); - # plots navigation buttons if(!$__detail || $defs{$__detail}{TYPE} eq "weblink") { if(FW_calcWeblink(undef,undef)) { @@ -615,47 +620,72 @@ FW_roomOverview($) } pO "
    "; pO "
    "; + pO "
    "; - pO "
    "; - pO "

    "; - pO " "; - pO " "; - pO "
    "; - pO " "; + ############## + # LOGO + my $logofile = ($__ss ? "fhem_smallscreen.png" : "fhem.png"); + pO "
    "; + ############## + # MENU + my (@list1, @list2); + push(@list1, ""); push(@list2, ""); if(defined($data{FWEXT})) { foreach my $k (sort keys %{$data{FWEXT}}) { my $h = $data{FWEXT}{$k}; next if($h !~ m/HASH/ || !$h->{LINK} || !$h->{NAME}); - pO ""; + push(@list1, $h->{NAME}); + push(@list2, $__ME ."/".$h->{LINK}); } - pO ""; + push(@list1, ""); push(@list2, ""); } - $__room = "" if(!$__room); foreach my $r (sort keys %__rooms) { next if($r eq "hidden"); - pF " ", $r eq $__room ? " class=\"sel\"" : ""; - pO ""; + push @list1, $r; + push @list2, "$__ME?room=$r"; } - pF " ", "all" eq $__room ? " class=\"sel\"" : ""; - pO " "; - pO "
    {LINK} . "\">" - . $h->{NAME}. "
    $r
    All together
    "; + push(@list1, "All together"); push(@list2, "$__ME?room=all"); + push(@list1, ""); push(@list2, ""); + push(@list1, "Howto"); push(@list2, "$__ME/HOWTO.html"); + push(@list1, "FAQ"); push(@list2, "$__ME/faq.html"); + push(@list1, "Details"); push(@list2, "$__ME/commandref.html"); + push(@list1, "Examples"); push(@list2, "$__ME/cmd=style examples"); + push(@list1, "Edit files"); push(@list2, "$__ME/cmd=style list"); + push(@list1, ""); push(@list2, ""); - pO "
    "; - pO " "; - pO " "; - pO " "; - pO " "; - my $sel = ($cmd =~ m/examples/) ? " class=\"sel\"" : ""; - pO " "; - $sel = ($cmd =~ m/list/) ? " class=\"sel\"" : ""; - pO " "; - pO "
    Howto
    FAQ
    Details
    Examples
    Edit files
    "; - pO "
    "; + pO "
    "; + if($__ss) { + foreach(my $idx = 0; $idx < @list1; $idx++) { + if(!$list1[$idx]) { + pO "" if($idx); + pO ""; + foreach(my $idx = 0; $idx < @list1; $idx++) { + if(!$list1[$idx]) { + pO "
    " + if($idx", $list1[$idx] eq $__room ? " class=\"sel\"" : ""; + pO ""; + } + } + pO "
    $list1[$idx]
    "; + + } pO ""; - pO ""; } @@ -680,7 +710,7 @@ FW_showRoom() } pO "
    "; - pO "
    "; + pO "
    "; pO " "; } pO "
    "; # Need for equal width of subtables foreach my $type (sort keys %__types) { @@ -804,7 +834,7 @@ FW_showRoom() pO "
    "; - pO "
    "; # Empty line + pO "
    "; # Empty line } pO "
    "; pO "
    "; @@ -846,7 +876,7 @@ FW_logWrapper($) $path = FW_getAttr($d,"archivedir","") . "/$file" if(!-f $path); if(!open(FH, $path)) { - pO "
    $path: $!
    "; + pO "
    $path: $!
    "; return; } binmode (FH); # necessary for Windows @@ -855,13 +885,13 @@ FW_logWrapper($) $cnt =~ s//>/g; - pO "
    "; + pO "
    "; pO "
    $cnt
    "; pO "
    "; } else { - pO "
    "; + pO "
    "; pO "
    "; pO ""; + pO "
    Convert to weblink
    "; pO "
    "; pO ""; @@ -874,7 +904,7 @@ FW_logWrapper($) pO ""; } - pO "
    Convert to weblink
    "; pO "
    "; pO "
    "; @@ -1123,7 +1153,7 @@ FW_makeEdit($$$$) pO ""; - pO "
    " . FW_submit("cmd.${cmd}$name", "$cmd $name"); + pO "
    " . FW_submit("cmd.${cmd}$name", "$cmd $name"); pO "
    "; $eval = "
    $eval
    " if($eval =~ m/\n/); pO "
    $eval
    "; @@ -1310,13 +1340,15 @@ FW_style($$) push(@fl, "
    "); push(@fl, FW_fileList("$__dir/.*.css")); push(@fl, "
    "); + push(@fl, FW_fileList("$__dir/.*.js")); + push(@fl, "
    "); push(@fl, FW_fileList("$__dir/.*.gplot")); push(@fl, "
    "); push(@fl, FW_fileList("$__dir/.*html")); - pO "
    "; + pO "
    "; pO "
    "; - pO " $msg

    " if($msg); + pO " $msg

    " if($msg); pO " "; my $row = 0; foreach my $file (@fl) { @@ -1331,9 +1363,9 @@ FW_style($$) } elsif($a[1] eq "examples") { my @fl = FW_fileList("$__dir/example.*"); - pO "
    "; + pO "
    "; pO "
    "; - pO " $msg

    " if($msg); + pO " $msg

    " if($msg); pO " "; my $row = 0; foreach my $file (@fl) { @@ -1357,9 +1389,9 @@ FW_style($$) my $data = join("", ); close(FH); - pO "
    "; + pO "
    "; pO "
    "; - pO FW_submit("save", "Save $f") . "

    "; + pO FW_submit("save", "Save $f") . "

    "; pO FW_hidden("cmd", "style save $a[2]"); pO ""; @@ -1446,7 +1478,12 @@ FW_showWeblink($$$) $defs{$va[0]}{currentlogfile} =~ m,([^/]*)$,; $va[2] = $1; } - pO "
    "; + + if($__ss) { + pO "$d
    " + } else { + pO "
    "; + } my $wl = "&pos=" . join(";", map {"$_=$__pos{$_}"} keys %__pos); @@ -1459,9 +1496,11 @@ FW_showWeblink($$$) pO ""; } - pO ""; - pO "$d"; - pO "
    "; + if($__ss) { + pO "
    "; + } else { + pO "
    $d
    "; + } } } diff --git a/webfrontend/pgm2/98_SVG.pm b/webfrontend/pgm2/98_SVG.pm index a8739169a..1ac2f6856 100755 --- a/webfrontend/pgm2/98_SVG.pm +++ b/webfrontend/pgm2/98_SVG.pm @@ -101,8 +101,11 @@ SVG_render($$$$$$) for my $i (0..int(@ltitle)-1) { my $j = $i+1; my $t = $ltitle[$i]; - my $desc = sprintf("$t: Min:%g Max:%g Last:%g", + my $desc = ""; + if(defined($data{"min$j"}) && $data{"min$j"} ne "undef") { + $desc = sprintf("$t: Min:%g Max:%g Last:%g", $data{"min$j"}, $data{"max$j"}, $data{"currval$j"}); + } pO "$t"; diff --git a/webfrontend/pgm2/fhem_smallscreen.png b/webfrontend/pgm2/fhem_smallscreen.png new file mode 100644 index 000000000..3e5de7fc8 Binary files /dev/null and b/webfrontend/pgm2/fhem_smallscreen.png differ diff --git a/webfrontend/pgm2/style.css b/webfrontend/pgm2/style.css index f15f6b60c..c5c62421e 100644 --- a/webfrontend/pgm2/style.css +++ b/webfrontend/pgm2/style.css @@ -1,7 +1,8 @@ -body { background-color: #FFFFE7;} -#left { position:absolute; top:20px; left:20px; width:140px; } -#hdr { position:absolute; top:10px; left:180px; } -#right { position:absolute; top:50px; left:180px; bottom:20px; right:10px; } +body { background-color: #FFFFE7;} +#logo { position:absolute; top:10px; left:20px; width:140px; } +#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; } @@ -9,7 +10,6 @@ table.block tr.odd { background: #F0F0D8; } table.block tr.sel { background: #F0F0D8; } table { -moz-border-radius:8px; } - table#room { background: #D7FFFF; } table#room tr.sel { background: #A0FFFF; } diff --git a/webfrontend/pgm2/style_smallscreen.css b/webfrontend/pgm2/style_smallscreen.css new file mode 100644 index 000000000..0dacd872f --- /dev/null +++ b/webfrontend/pgm2/style_smallscreen.css @@ -0,0 +1,21 @@ +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; } +#content { position:absolute; top:85px; left: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; } + +table#room { background: #D7FFFF; } +table#room tr.sel { background: #A0FFFF; } + +/* Customize specific devices */ +/* +table#FS20 { background: #FF8080; } +table#FS20 tr.odd { background: #E08080; } +*/