FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-01-31 06:39:11 +00:00
Code Issues Releases Wiki Activity

FHEMWEB: darksmallscreen added + some fhem-icon reorganizations

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk@3937 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2013-09-22 12:14:48 +00:00
parent ee1766af74
commit 006c0b9fd2
14 changed files with 181 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
fhem/FHEM/01_FHEMWEB.pm
View File

@ -404,6 +404,7 @@ FW_answerCall($)
$dir =~ s,www/,,g; # Want commandref.html to work from file://... $dir =~ s,www/,,g; # Want commandref.html to work from file://...
my $file = $ofile; my $file = $ofile;
$file =~ s/\?.*//; # Remove timestamp of CSS reloader
if($file =~ m/^(.*)\.([^.]*)$/) { if($file =~ m/^(.*)\.([^.]*)$/) {
$file = $1; $ext = $2; $file = $1; $ext = $2;
} }
@ -1002,7 +1003,7 @@ FW_roomOverview($)
foreach(my $idx = 0; $idx < @list1; $idx++) { foreach(my $idx = 0; $idx < @list1; $idx++) {
next if(!$list1[$idx]); next if(!$list1[$idx]);
my $sel = ($list1[$idx] eq $FW_room ? " selected=\"selected\"" : ""); my $sel = ($list1[$idx] eq $FW_room ? " selected=\"selected\"" : "");
FW_pO "<option value=$list2[$idx]$sel>$list1[$idx]</option>"; FW_pO "<option value='$list2[$idx]$sel'>$list1[$idx]</option>";
} }
FW_pO "</select></td>"; FW_pO "</select></td>";
FW_pO "</tr>"; FW_pO "</tr>";
@ -1511,7 +1512,7 @@ FW_iconTable($$$$)
$imgName =~ s/\.[^.]*$//; # Cut extension $imgName =~ s/\.[^.]*$//; # Cut extension
next if(!$FW_icons{$style}{$imgName}); # Dont cut it twice: FS20.on.png next if(!$FW_icons{$style}{$imgName}); # Dont cut it twice: FS20.on.png
next if($FW_icons{$style}{$imgName} !~ m/$imgName/); # Skip alias next if($FW_icons{$style}{$imgName} !~ m/$imgName/); # Skip alias
next if($imgName=~m+^(weather/|shutter.*big|fhemicon|favicon|darklogo)+); next if($imgName=~m+^(weather/|shutter.*big|fhemicon|favicon|ws_.*_kl)+);
$icoList{$imgName} = 1; $icoList{$imgName} = 1;
} }
} }

BIN
fhem/www/images/darktouchpad/darklogo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.5 KiB

BIN
fhem/www/images/default/fhemicon_bright.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

0
fhem/www/images/dark/darklogo.png → fhem/www/images/default/fhemicon_dark.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
fhem/www/images/default/fhemicon_darksmall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

0
fhem/www/images/smallscreen/fhem_smallscreen.png → fhem/www/images/default/fhemicon_smallscreen.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

2
fhem/www/pgm2/brightstyle.css
View File

@ -3,7 +3,7 @@ a:link, a:visited { color:#309bbd; text-decoration:none; }
a:hover { color:#003366; } a:hover { color:#003366; }
a img { border:medium none; } a img { border:medium none; }
div#logo { position: fixed; z-index:12000; top:3px; left:5px; float:left; width:24px;height:24px; background:url("/fhem/icons/fhem.png") no-repeat;} div#logo { position: fixed; z-index:12000; top:3px; left:5px; float:left; width:24px;height:24px; background:url("../images/default/fhemicon_bright.png") no-repeat;}
#menu { position: relative; top: 60px; float:left; width: 25%; padding: 0px 20px 120px;} #menu { position: relative; top: 60px; float:left; width: 25%; padding: 0px 20px 120px;}
#hdr { position: fixed; z-index: 1000; float: left; clear: both; height:32px; width: 100%; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box; background:black; background-image: linear-gradient(#333333,#222222); } #hdr { position: fixed; z-index: 1000; float: left; clear: both; height:32px; width: 100%; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box; background:black; background-image: linear-gradient(#333333,#222222); }
#content { width:70%; float:right; margin-top:60px; } #content { width:70%; float:right; margin-top:60px; }

4
fhem/www/pgm2/darkfloorplanstyle.css
View File

@ -1,8 +1,8 @@
body { background-color: #444444; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../icons/darklogo); background-repeat:no-repeat; } body { background-color: #444444; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../images/default/fhemicon_dark.png); background-repeat:no-repeat; }
body[id~=Media] { background-color: #A5A5A5; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../icons/Media.bak); background-repeat:no-repeat; } body[id~=Media] { background-color: #A5A5A5; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../icons/Media.bak); background-repeat:no-repeat; }
#backimg {position:absolute; top:15px; left:190px;} #backimg {position:absolute; top:15px; left:190px;}
#logo { position:absolute; top: 10px; left: 10px; width:180px; height:600px; background-image:url(../icons/darklogo); visibility:hidden;} #logo { position:absolute; top: 10px; left: 10px; width:180px; height:600px; background-image:url(../images/default/fhemicon_dark.png); visibility:hidden;}
#fpmenu.fp_arrange { position:absolute; bottom:20px; left:30px; min-width:310px; font-size:9px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px; #fpmenu.fp_arrange { position:absolute; bottom:20px; left:30px; min-width:310px; font-size:9px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; } box-shadow:5px 5px 5px #000; }

98
fhem/www/pgm2/darksmallscreenstyle.css Normal file
View File

@ -0,0 +1,98 @@
/* Author: Bernd auf Basis der Vorlage von Till*/
body { background-color: #444444; background-image:url(../images/default/fhemicon_darksmall.png); background-repeat:no-repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#logo { position:absolute; top:10px; left:20px; width:78px; visibility:hidden; }
#menu { position:absolute; top: 2px; left:65px; }
#hdr { position:absolute; top:40px; left:65px; }
#content { position:absolute; top:75px; left: 0px; right: 0px;}
#connect_err { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:0px; z-index: 10; }
a { color: #CCCCCC; text-decoration: none;}
a:hover { color: #ffffff; }
.wide { width:100%; }
table.block { border:1px solid #ffffff; width: 300px;
background: #333333; box-shadow:5px 5px 5px #000;}
table.block tr.odd { background: #111111; }
table.block tr.sel { background: red; }
table { border-radius:8px; border-spacing: 0px;
padding-bottom: 6px; padding-top: 6px; }
table.room { background: #111111; width: 140px; border:1px solid #CCCCCC; box-shadow:5px 5px 5px #000;}
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;}
input:disabled {color: #808080; }
input[type="submit"] { background-color: #353535; border-style:outset; border-width:2px }
textarea {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: #101010; padding:0.7em; }
div#dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
h2,h3,h4 { color:#EEE; line-height:1.3; margin-top:1.5em; font-family:Verdana; }
a img { border-style:none; }
.col2 { text-align:center; }
/* detail-selector & slider */
.makeTable { display:inline; float:left; clear:left;
margin-top:10px; margin-bottom:20px;}
.makeSelect { display:inline; float:left; clear:left; vertical-align:middle; }
select { margin-left:5px; margin-right:5px; }
.get,.set,.attr { margin-bottom:5px; float:left; }
.slider { float:right; width:300px; height:26px; }
.get .slider,.set .slider,.attr .slider {
background:#101010; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }
.slider { margin-left:10px; float:left; width:250px; height:26px;
border-style:solid; border-width:2px; border-color:#555555 }
.handle { position:relative; cursor:pointer; width:50px;
height:20px; line-height:20px;
-webkit-user-select:none; -moz-user-select:none; -user-select:none;
border:2px solid; color:white; text-align:center; }
.downText,.makeSelect select { margin:0.7em; }
svg { height:32px; width:32px; fill:#fff; }
g.on { fill:red; }
/* next lines are for remotecontrol */
.rc_body { border-style: solid; border-color: gray; border-width: 2px;
padding: 5px; background: #101010; font-size:6px;}
.rc_button { padding: 5px 7px;}
.rc_button img { border-style: solid; border-width: 1px;
border-color: transparent; }
.rc_button img:active { border-color: gray; }
.changed { color:red; }
div.dname, div.dval {
width: 152px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size:16px;
}
div.tiny { font-size:10px; }

43
fhem/www/pgm2/darksmallscreensvg_defs.svg Normal file
View File

@ -0,0 +1,43 @@
<!-- will be included in each svg plot -->
<defs>
<linearGradient id="gr_bg" 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>
<linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f00; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#f88; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#291; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#8f7; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#00f; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#88f; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f0f; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#f8f; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff0; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#0ff; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#000; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>
</linearGradient>
</defs>

31
fhem/www/pgm2/darksmallscreensvg_style.css Normal file
View File

@ -0,0 +1,31 @@
/* 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;}
polyline { stroke:black; fill:none; }
.border { stroke:black; fill:url(#gr_bg);}
.vgrid { stroke:gray; stroke-dasharray:2,6;}
.hgrid { stroke:gray; stroke-dasharray:2,6;}
.pasted { stroke:black; stroke-dasharray:1,1;}
.l0 { stroke:red; } text.l0 { stroke:none; fill:red; }
.l1 { stroke:green; } text.l1 { stroke:none; fill:green; }
.l2 { stroke:blue; } text.l2 { stroke:none; fill:blue; }
.l3 { stroke:magenta; } text.l3 { stroke:none; fill:magenta; }
.l4 { stroke:brown; } text.l4 { stroke:none; fill:brown; }
.l5 { stroke:black; } text.l5 { stroke:none; fill:black; }
.l6 { stroke:olive; } text.l6 { stroke:none; fill:olive; }
.l7 { stroke:gray; } text.l7 { stroke:none; fill:gray; }
.l8 { stroke:yellow; } text.l8 { stroke:none; fill:yellow; }
.l0fill{ stroke:#f00; fill:url(#gr_0); } text.l0fill{ stroke:none; fill:#f00; }
.l1fill{ stroke:#291; fill:url(#gr_1); } text.l1fill{ stroke:none; fill:#291; }
.l2fill{ stroke:#00f; fill:url(#gr_2); } text.l2fill{ stroke:none; fill:#00f; }
.l3fill{ stroke:#f0f; fill:url(#gr_3); } text.l3fill{ stroke:none; fill:#f0f; }
.l4fill{ stroke:#ff0; fill:url(#gr_4); } text.l4fill{ stroke:none; fill:#ff0; }
.l5fill{ stroke:#0ff; fill:url(#gr_5); } text.l5fill{ stroke:none; fill:#0ff; }
.l6fill{ stroke:#000; fill:url(#gr_6); } text.l6fill{ stroke:none; fill:#000; }

2
fhem/www/pgm2/darkstyle.css
View File

@ -1,5 +1,5 @@
/* Author: Till */ /* Author: Till */
body { background-color: #444444; background-image:url(../images/dark/darklogo.png); background-repeat:no-repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;} body { background-color: #444444; background-image:url(../images/default/fhemicon_dark.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; } #logo { position:absolute; top:10px; left:20px; width:140px; visibility:hidden; }
#menu { position:absolute; top:170px;left:20px; width:140px; } #menu { position:absolute; top:170px;left:20px; width:140px; }
#hdr { position:absolute; top:10px; left:180px; } #hdr { position:absolute; top:10px; left:180px; }

2
fhem/www/pgm2/ios7smallscreenstyle.css
View File

@ -8,7 +8,7 @@ input { font-family:Helvetica; font-weight:300; font-size:16px;}
select { font-family:Helvetica; font-weight:300; font-size:16px;} select { font-family:Helvetica; font-weight:300; 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(../images/smallscreen/fhem_smallscreen.png); } width:64px; height:67px; background-image:url(../images/default/fhemicon_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;}

2
fhem/www/pgm2/smallscreenstyle.css
View File

@ -5,7 +5,7 @@ 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(../images/smallscreen/fhem_smallscreen.png); } width:64px; height:67px; background-image:url(../images/default/fhemicon_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;}