FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-04-16 10:46:03 +00:00
Code Issues Releases Wiki Activity

Styling is now configurable

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk@1120 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2011-11-26 11:19:39 +00:00
parent 59e7411d63
commit e0de1d35d6
9 changed files with 151 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
fhem/webfrontend/pgm2/01_FHEMWEB.pm
View File

@ -87,7 +87,7 @@ FHEMWEB_Initialize($)
$hash->{AttrList}= "loglevel:0,1,2,3,4,5,6 webname fwmodpath fwcompress " . $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 " .
"touchpad smallscreen plotfork basicAuth basicAuthMsg ". "touchpad smallscreen plotfork basicAuth basicAuthMsg ".
"stylesheet hiddenroom HTTPS longpoll"; "stylesheetPrefix hiddenroom HTTPS longpoll";
############### ###############
# Initialize internal structures # Initialize internal structures
@ -334,7 +334,12 @@ FW_AnswerCall($)
return 1; return 1;
} elsif($arg =~ m,^$FW_ME/(.*).css,) { } elsif($arg =~ m,^$FW_ME/(.*).css,) {
open(FH, "$FW_dir/$1.css") || return 0; my $cssName = $1;
my $prf = AttrVal($FW_wname, "stylesheetPrefix", "");
$prf = "smallscreen" if(!$prf && $FW_ss);
$prf = "touchpad" if(!$prf && $FW_tp);
return 0 if(!open(FH, "$FW_dir/$prf$cssName.css") &&
!open(FH, "$FW_dir/$cssName.css"));
pO join("", <FH>); pO join("", <FH>);
close(FH); close(FH);
$FW_RETTYPE = "text/css"; $FW_RETTYPE = "text/css";
@ -459,10 +464,7 @@ FW_AnswerCall($)
my $rf = AttrVal($FW_wname, "refresh", ""); my $rf = AttrVal($FW_wname, "refresh", "");
pO "<meta http-equiv=\"refresh\" content=\"$rf\">" if($rf); pO "<meta http-equiv=\"refresh\" content=\"$rf\">" if($rf);
my $stylecss = ($FW_ss ? "style_smallscreen.css" : pO "<link href=\"$FW_ME/style.css\" rel=\"stylesheet\"/>";
$FW_tp ? "style_touchpad.css" : "style.css");
$stylecss = AttrVal($FW_wname, "stylesheet", $stylecss);
pO "<link href=\"$FW_ME/$stylecss\" rel=\"stylesheet\"/>";
pO "<script type=\"text/javascript\" src=\"$FW_ME/svg.js\"></script>" pO "<script type=\"text/javascript\" src=\"$FW_ME/svg.js\"></script>"
if($FW_plotmode eq "SVG"); if($FW_plotmode eq "SVG");
pO "<script type=\"text/javascript\" src=\"$FW_ME/longpoll.js\"></script>" pO "<script type=\"text/javascript\" src=\"$FW_ME/longpoll.js\"></script>"
@ -698,8 +700,7 @@ FW_roomOverview($)
return; return;
} else { } else {
my $logo = $FW_ss ? "fhem_smallscreen.png" : "fhem.png"; pO "<div id=\"logo\"></div>";
pO "<div id=\"logo\"><img src=\"$FW_ME/$logo\"></div>";
} }
@ -749,6 +750,7 @@ FW_roomOverview($)
"Details", "$FW_ME/commandref.html", "Details", "$FW_ME/commandref.html",
"Examples", "$FW_ME/cmd=style%20examples", "Examples", "$FW_ME/cmd=style%20examples",
"Edit files", "$FW_ME/cmd=style%20list", "Edit files", "$FW_ME/cmd=style%20list",
"Select style","$FW_ME/cmd=style%20select",
"", ""); "", "");
my $lastname = ","; # Avoid double "". my $lastname = ","; # Avoid double "".
for(my $idx = 0; $idx < @list; $idx+= 2) { for(my $idx = 0; $idx < @list; $idx+= 2) {
@ -1166,7 +1168,7 @@ FW_showLog($)
} }
$ret = fC("get $d $file INT $f $t " . join(" ", @{$flog})); $ret = fC("get $d $file INT $f $t " . join(" ", @{$flog}));
($cfg, $plot) = FW_substcfg(1, $wl, $cfg, $plot, $file, "<OuT>"); ($cfg, $plot) = FW_substcfg(1, $wl, $cfg, $plot, $file, "<OuT>");
SVG_render($wl, $f, $t, $cfg, $internal_data, $plot, $FW_ss); SVG_render($wl, $f, $t, $cfg, $internal_data, $plot, $FW_wname);
$FW_RETTYPE = "image/svg+xml"; $FW_RETTYPE = "image/svg+xml";
} }
@ -1380,22 +1382,21 @@ FW_style($$)
my ($cmd, $msg) = @_; my ($cmd, $msg) = @_;
my @a = split(" ", $cmd); my @a = split(" ", $cmd);
my $start = "<div id=\"content\"><table><tr><td>";
my $end = "</td></tr></table></div>";
if($a[1] eq "list") { if($a[1] eq "list") {
my @fl; my @fl = ("fhem.cfg");
push(@fl, "fhem.cfg");
push(@fl, ""); push(@fl, "");
push(@fl, FW_fileList("$FW_dir/.*.sh")); push(@fl, FW_fileList("$FW_dir/(.*.sh|.*Util.*)"));
push(@fl, FW_fileList("$FW_dir/.*Util.*")); push(@fl, "");
push(@fl, FW_fileList("$FW_dir/.*.css")); push(@fl, FW_fileList("$FW_dir/.*.(css|svg|js)"));
push(@fl, FW_fileList("$FW_dir/.*.js"));
push(@fl, ""); push(@fl, "");
push(@fl, FW_fileList("$FW_dir/.*.gplot")); push(@fl, FW_fileList("$FW_dir/.*.gplot"));
push(@fl, ""); push(@fl, "");
push(@fl, FW_fileList("$FW_dir/.*html")); push(@fl, FW_fileList("$FW_dir/.*html"));
pO "<div id=\"content\">"; pO $start;
pO "<table><tr><td>";
pO "$msg<br><br>" if($msg); pO "$msg<br><br>" if($msg);
pO "<table class=\"block\" id=\"at\">"; pO "<table class=\"block\" id=\"at\">";
my $row = 0; my $row = 0;
@ -1409,17 +1410,37 @@ FW_style($$)
pO "</tr>"; pO "</tr>";
$row = ($row+1)%2; $row = ($row+1)%2;
} }
pO "</table>"; pO "</table>$end";
pO "</td></tr></table>";
pO "</div>"; } elsif($a[1] eq "select") {
my @fl = FW_fileList("$FW_dir/.*style.css");
pO "$start<table class=\"block\" id=\"at\">";
my $row = 0;
foreach my $file (@fl) {
next if($file =~ m/(svg_|smallscreen|touchpad)style.css/);
$file =~ s/style.css//;
$file = "Default" if($file eq "");
pO "<tr class=\"" . ($row?"odd":"even") . "\">";
pH "cmd=style set $file", "$file", 1;
pO "</tr>";
$row = ($row+1)%2;
}
pO "</table>$end";
} elsif($a[1] eq "set") {
if($a[2] eq "Default") {
delete($attr{$FW_wname}{stylesheetPrefix});
} else {
$attr{$FW_wname}{stylesheetPrefix} = $a[2];
}
pO "${start}Reload the page in the browser.$end";
} elsif($a[1] eq "examples") { } elsif($a[1] eq "examples") {
my @fl = FW_fileList("$FW_dir/example.*"); my @fl = FW_fileList("$FW_dir/example.*");
pO "<div id=\"content\">"; pO "$start<table class=\"block\" id=\"at\">";
pO "<table><tr><td>";
pO "$msg<br><br>" if($msg);
pO "<table class=\"block\" id=\"at\">";
my $row = 0; my $row = 0;
foreach my $file (@fl) { foreach my $file (@fl) {
pO "<tr class=\"" . ($row?"odd":"even") . "\">"; pO "<tr class=\"" . ($row?"odd":"even") . "\">";
@ -1427,9 +1448,7 @@ FW_style($$)
pO "</tr>"; pO "</tr>";
$row = ($row+1)%2; $row = ($row+1)%2;
} }
pO "</table>"; pO "</table>$end";
pO "</td></tr></table>";
pO "</div>";
} elsif($a[1] eq "edit") { } elsif($a[1] eq "edit") {

10
fhem/webfrontend/pgm2/98_SVG.pm
View File

@ -34,8 +34,9 @@ SVG_render($$$$$$$)
my $confp = shift; # lines from the .gplot file, w/o FileLog and plot my $confp = shift; # lines from the .gplot file, w/o FileLog and plot
my $dp = shift; # pointer to data (one string) my $dp = shift; # pointer to data (one string)
my $plot = shift; # Plot lines from the .gplot file my $plot = shift; # Plot lines from the .gplot file
my $SVG_ss = shift; # small screen my $FW_wname = shift; # FHEMWEB instance name
my $SVG_ss = AttrVal($FW_wname, "smallscreen", 0);
return "" if(!defined($dp)); return "" if(!defined($dp));
my $th = 16; # "Font" height my $th = 16; # "Font" height
my ($x, $y) = (($SVG_ss ? 2 : 3)*$th, 1.2*$th); # Rect offset my ($x, $y) = (($SVG_ss ? 2 : 3)*$th, 1.2*$th); # Rect offset
@ -58,8 +59,10 @@ SVG_render($$$$$$$)
pO '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" '. pO '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" '.
'xmlns:xlink="http://www.w3.org/1999/xlink" >'; 'xmlns:xlink="http://www.w3.org/1999/xlink" >';
my $prf = AttrVal($FW_wname, "stylesheetPrefix", "");
pO "<style type=\"text/css\"><![CDATA["; pO "<style type=\"text/css\"><![CDATA[";
if(open(FH, "$FW_dir/svg_style.css")) { if(open(FH, "$FW_dir/${prf}svg_style.css") ||
open(FH, "$FW_dir/svg_style.css")) {
pO join("", <FH>); pO join("", <FH>);
close(FH); close(FH);
} else { } else {
@ -67,7 +70,8 @@ SVG_render($$$$$$$)
} }
pO "]]></style>"; pO "]]></style>";
if(open(FH, "$FW_dir/svg_defs.svg")) { # gradient definitions if(open(FH, "$FW_dir/${prf}svg_defs.svg") ||
open(FH, "$FW_dir/svg_defs.svg")) { # gradient definitions
pO join("", <FH>); pO join("", <FH>);
close(FH); close(FH);
} else { } else {

BIN
fhem/webfrontend/pgm2/darklogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

36
fhem/webfrontend/pgm2/darkstyle.css Normal file
View File

@ -0,0 +1,36 @@
/* Author: Till */
body { background-color: #444444; background-image:url(darklogo.png); background-repeat:no-repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#logo { position:absolute; top:10px; left:20px; width:140px; visibility:hidden; }
#menu { position:absolute; top:170px;left:20px; width:140px; }
#hdr { position:absolute; top:10px; left:180px; }
#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
a { color: #CCCCCC; text-decoration: none;}
a:hover { color: #ffffff; }
table.block { border:1px solid #ffffff; width: 100%; background: #333333; box-shadow:5px 5px 5px #000; }
table.block tr.odd { background: #111111; }
table.block tr.sel { background: red; }
table { -moz-border-radius:8px; border-radius:8px; border-spacing: 0px; padding-bottom: 6px; padding-top: 6px;}
table#room { background: #111111; width: 140px;}
table#room a { color: #CCCCCC; text-decoration: none; }
table#room a:hover { color: #ffffff; }
table#room tr.sel { background: red; }
th {color:red; text-align: left; padding-left: 10px; font-weight: bold;}
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
input {outline:none; background-color: #111111; border: 1px solid #ffffff; color: #cccccc; padding:5px; margin-left: 10px; border-radius:8px; box-shadow: 5px 5px 5px #000000;}
input:focus {border: 1px solid red;}
textarea {min-width:1000px; background-color: #111111; border: 1px solid #ffffff; color: #cccccc; padding:5px; margin-left: 10px; border-radius:8px; box-shadow: 5px 5px 5px #000000;}
/*
next lines are for commandref and faq
*/
#left { position:absolute; top:140px; left:60px; width:140px; }
#right { position:absolute; top:20px; left:200px; bottom:20px;
right:10px; }
body>div#left { position:fixed; }
div#block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
div#dist { padding-top:0.3em; }
h2,h3,h4 { color:#EEE; line-height:1.3; margin-top:1.5em;
font-family:Verdana; }

7
fhem/webfrontend/pgm2/darksvg_defs.svg Normal file
View File

@ -0,0 +1,7 @@
<!-- will be included in each svg plot -->
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FFFFF7; stop-opacity:1"/>
<stop offset="100%" style="stop-color:#A7A7A7; stop-opacity:1"/>
</linearGradient>
</defs>

32
fhem/webfrontend/pgm2/darksvg_style.css Normal file
View File

@ -0,0 +1,32 @@
/* Author: Volker */
.background { fill:#444444; }
text { font-family:Arial, Helvetica, sans-serif; font-size:12px; fill:#CCCCCC;}
text.title {font-family:Arial, Helvetica, sans-serif; font-size:16px; fill:#CCCCCC;}
text.copy { text-decoration:underline; stroke:none; fill:blue;}
text.paste { text-decoration:underline; stroke:none; fill:blue;}
text.l0 { text-decoration:underline; stroke:none; fill:red;}
text.l1 { text-decoration:underline; stroke:none; fill:green;}
text.l2 { text-decoration:underline; stroke:none; fill:blue;}
text.l3 { text-decoration:underline; stroke:none; fill:magenta;}
text.l4 { text-decoration:underline; stroke:none; fill:brown;}
text.l5 { text-decoration:underline; stroke:none; fill:black;}
text.l6 { text-decoration:underline; stroke:none; fill:olive;}
text.l7 { text-decoration:underline; stroke:none; fill:gray;}
text.l8 { text-decoration:underline; stroke:none; fill:yellow;}
polyline { stroke:black; fill:none; }
.border { stroke:black; fill:url(#grad1);}
.vgrid { stroke:gray; stroke-dasharray:2,6;}
.hgrid { stroke:gray; stroke-dasharray:2,6;}
.pasted { stroke:black; stroke-dasharray:1,1;}
.l0 { stroke:red;}
.l1 { stroke:green;}
.l2 { stroke:blue;}
.l3 { stroke:magenta;}
.l4 { stroke:brown;}
.l5 { stroke:black;}
.l6 { stroke:olive;}
.l7 { stroke:gray;}
.l8 { stroke:yellow;}

14
fhem/webfrontend/pgm2/style_smallscreen.css → fhem/webfrontend/pgm2/smallscreenstyle.css
View File

@ -1,11 +1,11 @@
body { background-color: #FFFFE7; body { background-color: #FFFFE7;
font-family:Arial, sans-serif; font-size:24px; font-family:Arial, sans-serif; font-size:24px; }
}
textarea { font-family:Arial, sans-serif; font-size:16px;} textarea { font-family:Arial, sans-serif; font-size:16px;}
input { font-family:Arial, sans-serif; font-size:16px;} input { font-family:Arial, sans-serif; font-size:16px;}
select { font-family:Arial, sans-serif; font-size:16px;} select { font-family:Arial, sans-serif; font-size:16px;}
#back { position:absolute; top: 2px; left:18px; } #back { position:absolute; top: 2px; left:18px; }
#logo { position:absolute; top: 2px; left: 2px; } #logo { position:absolute; top: 2px; left: 2px;
width:64px; height:67px; background-image:url(fhem_smallscreen.png); }
#menu { position:absolute; top: 2px; left:65px; } #menu { position:absolute; top: 2px; left:65px; }
#hdr { position:absolute; top:40px; left:65px; } #hdr { position:absolute; top:40px; left:65px; }
#content { position:absolute; top:85px; left: 0px; right: 0px;} #content { position:absolute; top:85px; left: 0px; right: 0px;}
@ -50,3 +50,11 @@ table { -moz-border-radius:8px; border-radius:8px; }
table#room { background: #D7FFFF; } table#room { background: #D7FFFF; }
table#room tr.sel { background: #A0FFFF; } table#room tr.sel { background: #A0FFFF; }
#menu #block { visibility: hidden; }
#right { position:absolute; top:85px; left: 0px; right: 0px;
font-family:Arial, sans-serif; font-size:16px; }
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; }

12
fhem/webfrontend/pgm2/style.css
View File

@ -3,8 +3,9 @@ body { background-color: #FFFFE7;
input { font-family:Arial, sans-serif; font-size:16px; } input { font-family:Arial, sans-serif; font-size:16px; }
select { font-family:Arial, sans-serif; font-size:16px; } select { font-family:Arial, sans-serif; font-size:16px; }
#logo { position:absolute; top:10px; left:20px; width:140px; } #logo { position:fixed; top:10px; left:20px;
#menu { position:absolute; top:120px;left:20px; width:140px; } width:100px; height:105px; background-image:url(fhem.png); }
#menu { position:fixed; top:120px;left:20px; width:140px; }
#hdr { position:absolute; top:10px; left:180px; } #hdr { position:absolute; top:10px; left:180px; }
#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; } #content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
@ -21,3 +22,10 @@ table { -moz-border-radius:8px; border-radius:8px; }
table#room { border:1px solid gray; width: 100%; background: #D7FFFF; } table#room { border:1px solid gray; width: 100%; background: #D7FFFF; }
table#room tr.sel { background: #A0FFFF; } table#room tr.sel { background: #A0FFFF; }
#right { position:absolute; top:20px; left:180px; bottom:20px; right:10px; }
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; }

3
fhem/webfrontend/pgm2/style_touchpad.css → fhem/webfrontend/pgm2/touchpadstyle.css
View File

@ -4,7 +4,8 @@ body { background-color: #FFFFE7;
textarea { font-family:Arial, sans-serif; font-size:16px} textarea { font-family:Arial, sans-serif; font-size:16px}
input { font-family:Arial, sans-serif; font-size:16px} input { font-family:Arial, sans-serif; font-size:16px}
select { font-family:Arial, sans-serif; font-size:16px} select { font-family:Arial, sans-serif; font-size:16px}
#logo { position:absolute; top:10px; left:10px; width:100px; } #logo { position:absolute; top:10px; left:10px;
width:100px; height:105px; background-image:url(fhem.png); }
#menu { position:absolute; top:120px;left:10px; width:100px; } #menu { position:absolute; top:120px;left:10px; width:100px; }
#hdr { position:absolute; top:10px; left:140px; } #hdr { position:absolute; top:10px; left:140px; }
#content { position:absolute; top:50px; left:140px; bottom:20px; right:10px; } #content { position:absolute; top:50px; left:140px; bottom:20px; right:10px; }