mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-04-15 16:19:11 +00:00
Styling is now configurable
git-svn-id: https://svn.fhem.de/fhem/trunk@1120 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig
parent
59e7411d63
commit
e0de1d35d6
@ -87,7 +87,7 @@ FHEMWEB_Initialize($)
|
||||
$hash->{AttrList}= "loglevel:0,1,2,3,4,5,6 webname fwmodpath fwcompress " .
|
||||
"plotmode:gnuplot,gnuplot-scroll,SVG plotsize refresh " .
|
||||
"touchpad smallscreen plotfork basicAuth basicAuthMsg ".
|
||||
"stylesheet hiddenroom HTTPS longpoll";
|
||||
"stylesheetPrefix hiddenroom HTTPS longpoll";
|
||||
|
||||
###############
|
||||
# Initialize internal structures
|
||||
@ -334,7 +334,12 @@ FW_AnswerCall($)
|
||||
return 1;
|
||||
|
||||
} 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>);
|
||||
close(FH);
|
||||
$FW_RETTYPE = "text/css";
|
||||
@ -459,10 +464,7 @@ FW_AnswerCall($)
|
||||
|
||||
my $rf = AttrVal($FW_wname, "refresh", "");
|
||||
pO "<meta http-equiv=\"refresh\" content=\"$rf\">" if($rf);
|
||||
my $stylecss = ($FW_ss ? "style_smallscreen.css" :
|
||||
$FW_tp ? "style_touchpad.css" : "style.css");
|
||||
$stylecss = AttrVal($FW_wname, "stylesheet", $stylecss);
|
||||
pO "<link href=\"$FW_ME/$stylecss\" rel=\"stylesheet\"/>";
|
||||
pO "<link href=\"$FW_ME/style.css\" rel=\"stylesheet\"/>";
|
||||
pO "<script type=\"text/javascript\" src=\"$FW_ME/svg.js\"></script>"
|
||||
if($FW_plotmode eq "SVG");
|
||||
pO "<script type=\"text/javascript\" src=\"$FW_ME/longpoll.js\"></script>"
|
||||
@ -698,8 +700,7 @@ FW_roomOverview($)
|
||||
return;
|
||||
|
||||
} else {
|
||||
my $logo = $FW_ss ? "fhem_smallscreen.png" : "fhem.png";
|
||||
pO "<div id=\"logo\"><img src=\"$FW_ME/$logo\"></div>";
|
||||
pO "<div id=\"logo\"></div>";
|
||||
|
||||
}
|
||||
|
||||
@ -749,6 +750,7 @@ FW_roomOverview($)
|
||||
"Details", "$FW_ME/commandref.html",
|
||||
"Examples", "$FW_ME/cmd=style%20examples",
|
||||
"Edit files", "$FW_ME/cmd=style%20list",
|
||||
"Select style","$FW_ME/cmd=style%20select",
|
||||
"", "");
|
||||
my $lastname = ","; # Avoid double "".
|
||||
for(my $idx = 0; $idx < @list; $idx+= 2) {
|
||||
@ -1166,7 +1168,7 @@ FW_showLog($)
|
||||
}
|
||||
$ret = fC("get $d $file INT $f $t " . join(" ", @{$flog}));
|
||||
($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";
|
||||
|
||||
}
|
||||
@ -1380,22 +1382,21 @@ FW_style($$)
|
||||
my ($cmd, $msg) = @_;
|
||||
my @a = split(" ", $cmd);
|
||||
|
||||
my $start = "<div id=\"content\"><table><tr><td>";
|
||||
my $end = "</td></tr></table></div>";
|
||||
if($a[1] eq "list") {
|
||||
|
||||
my @fl;
|
||||
push(@fl, "fhem.cfg");
|
||||
my @fl = ("fhem.cfg");
|
||||
push(@fl, "");
|
||||
push(@fl, FW_fileList("$FW_dir/.*.sh"));
|
||||
push(@fl, FW_fileList("$FW_dir/.*Util.*"));
|
||||
push(@fl, FW_fileList("$FW_dir/.*.css"));
|
||||
push(@fl, FW_fileList("$FW_dir/.*.js"));
|
||||
push(@fl, FW_fileList("$FW_dir/(.*.sh|.*Util.*)"));
|
||||
push(@fl, "");
|
||||
push(@fl, FW_fileList("$FW_dir/.*.(css|svg|js)"));
|
||||
push(@fl, "");
|
||||
push(@fl, FW_fileList("$FW_dir/.*.gplot"));
|
||||
push(@fl, "");
|
||||
push(@fl, FW_fileList("$FW_dir/.*html"));
|
||||
|
||||
pO "<div id=\"content\">";
|
||||
pO "<table><tr><td>";
|
||||
pO $start;
|
||||
pO "$msg<br><br>" if($msg);
|
||||
pO "<table class=\"block\" id=\"at\">";
|
||||
my $row = 0;
|
||||
@ -1409,17 +1410,37 @@ FW_style($$)
|
||||
pO "</tr>";
|
||||
$row = ($row+1)%2;
|
||||
}
|
||||
pO "</table>";
|
||||
pO "</td></tr></table>";
|
||||
pO "</div>";
|
||||
pO "</table>$end";
|
||||
|
||||
} 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") {
|
||||
|
||||
my @fl = FW_fileList("$FW_dir/example.*");
|
||||
pO "<div id=\"content\">";
|
||||
pO "<table><tr><td>";
|
||||
pO "$msg<br><br>" if($msg);
|
||||
pO "<table class=\"block\" id=\"at\">";
|
||||
pO "$start<table class=\"block\" id=\"at\">";
|
||||
my $row = 0;
|
||||
foreach my $file (@fl) {
|
||||
pO "<tr class=\"" . ($row?"odd":"even") . "\">";
|
||||
@ -1427,9 +1448,7 @@ FW_style($$)
|
||||
pO "</tr>";
|
||||
$row = ($row+1)%2;
|
||||
}
|
||||
pO "</table>";
|
||||
pO "</td></tr></table>";
|
||||
pO "</div>";
|
||||
pO "</table>$end";
|
||||
|
||||
} elsif($a[1] eq "edit") {
|
||||
|
||||
|
||||
@ -34,8 +34,9 @@ SVG_render($$$$$$$)
|
||||
my $confp = shift; # lines from the .gplot file, w/o FileLog and plot
|
||||
my $dp = shift; # pointer to data (one string)
|
||||
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));
|
||||
my $th = 16; # "Font" height
|
||||
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" '.
|
||||
'xmlns:xlink="http://www.w3.org/1999/xlink" >';
|
||||
|
||||
my $prf = AttrVal($FW_wname, "stylesheetPrefix", "");
|
||||
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>);
|
||||
close(FH);
|
||||
} else {
|
||||
@ -67,7 +70,8 @@ SVG_render($$$$$$$)
|
||||
}
|
||||
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>);
|
||||
close(FH);
|
||||
} else {
|
||||
|
||||
BIN
fhem/webfrontend/pgm2/darklogo.png
Normal file
BIN
fhem/webfrontend/pgm2/darklogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
36
fhem/webfrontend/pgm2/darkstyle.css
Normal file
36
fhem/webfrontend/pgm2/darkstyle.css
Normal 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
7
fhem/webfrontend/pgm2/darksvg_defs.svg
Normal 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
32
fhem/webfrontend/pgm2/darksvg_style.css
Normal 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;}
|
||||
@ -1,11 +1,11 @@
|
||||
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;}
|
||||
input { font-family:Arial, sans-serif; font-size:16px;}
|
||||
select { font-family:Arial, sans-serif; font-size:16px;}
|
||||
#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; }
|
||||
#hdr { position:absolute; top:40px; left:65px; }
|
||||
#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 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; }
|
||||
@ -3,8 +3,9 @@ body { background-color: #FFFFE7;
|
||||
input { 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; }
|
||||
#menu { position:absolute; top:120px;left:20px; width:140px; }
|
||||
#logo { position:fixed; top:10px; left:20px;
|
||||
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; }
|
||||
#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 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; }
|
||||
|
||||
|
||||
@ -4,7 +4,8 @@ body { background-color: #FFFFE7;
|
||||
textarea { 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}
|
||||
#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; }
|
||||
#hdr { position:absolute; top:10px; left:140px; }
|
||||
#content { position:absolute; top:50px; left:140px; bottom:20px; right:10px; }
|
||||
Loading…
x
Reference in New Issue
Block a user