FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-04-22 08:11:44 +00:00
Code Issues Releases Wiki Activity

95_Dashboard: contrib 3.17.0

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk@20316 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
nasseeder1 2019-10-05 09:11:30 +00:00
parent c1bf1b2ba1
commit 657b191777
1 changed files with 171 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
fhem/contrib/DS_Starter/95_Dashboard.pm
View File

@ -76,6 +76,8 @@ our %Dashboard_vNotesIntern = (
######################### #########################
# Forward declaration # Forward declaration
sub Dashboard_GetGroupList(); sub Dashboard_GetGroupList();
sub Dashboard_searchImage($$$$);
use vars qw($FW_dir); # base directory for web server
######################### #########################
# Global variables # Global variables
@ -271,11 +273,11 @@ sub Dashboard_Get($@) {
# Attr # Attr
################################################################ ################################################################
sub Dashboard_Attr($$$) { sub Dashboard_Attr($$$) {
my ($cmd, $name, $attrName, $attrVal) = @_; my ($cmd, $name, $aName, $aVal) = @_;
my $hash = $defs{$name}; my $hash = $defs{$name};
if ($cmd eq "set") { if ($cmd eq "set") {
if ($attrName =~ m/dashboard_tab([1-9][0-9]*)groups/ || $attrName =~ m/dashboard_tab([1-9][0-9]*)devices/) { if ($aName =~ m/dashboard_tab([1-9][0-9]*)groups/ || $aName =~ m/dashboard_tab([1-9][0-9]*)devices/) {
# add dynamic attributes # add dynamic attributes
addToDevAttrList($name, "dashboard_tab" . ($1 + 1) . "name"); addToDevAttrList($name, "dashboard_tab" . ($1 + 1) . "name");
addToDevAttrList($name, "dashboard_tab" . ($1 + 1) . "devices"); addToDevAttrList($name, "dashboard_tab" . ($1 + 1) . "devices");
@ -287,14 +289,31 @@ sub Dashboard_Attr($$$) {
addToDevAttrList($name, "dashboard_tab" . ($1 + 1) . "backgroundimage"); addToDevAttrList($name, "dashboard_tab" . ($1 + 1) . "backgroundimage");
} }
if ($attrName =~ m/alias/) { if ($aName =~ m/alias/) {
# if an alias is set to the dashboard, replace the name shown in the left navigation by this alias # if an alias is set to the dashboard, replace the name shown in the left navigation by this alias
my $url = '/dashboard/'.$name; my $url = '/dashboard/'.$name;
$data{FWEXT}{$url}{NAME} = $attrVal; $data{FWEXT}{$url}{NAME} = $aVal;
} }
if ($attrName =~ m/dashboard_homeTab/) { if ($aName =~ m/dashboard_homeTab/) {
Dashboard_activateTab ($name,$attrVal); Dashboard_activateTab ($name,$aVal);
}
}
if ($aName =~ m/dashboard_(.*)backgroundimage/) {
my $container = "";
if (!$1) {
$container = "MAIN";
} else {
$container = $1;
}
delete $hash->{HELPER}{BIMG}{$container};
if($cmd eq "set") {
Dashboard_searchImage($name, "$FW_dir/images", $aVal,$container);
if (!$hash->{HELPER}{BIMG}{$container}) {
Log3 ($name, 2, "Dashboard $name - Background image file not found: $aVal");
return "Background image file not found: $aVal";
}
} }
} }
@ -411,7 +430,6 @@ sub Dashboard_SummaryFN ($$$$) {
my $showfullsize = AttrVal($name, "dashboard_showfullsize", 0); my $showfullsize = AttrVal($name, "dashboard_showfullsize", 0);
my $flexible = AttrVal($name, "dashboard_flexible", 0); my $flexible = AttrVal($name, "dashboard_flexible", 0);
my $customcss = AttrVal($name, "dashboard_customcss", "none"); my $customcss = AttrVal($name, "dashboard_customcss", "none");
my $backgroundimage = AttrVal($name, "dashboard_backgroundimage", "");
my $row = AttrVal($name, "dashboard_row", "center"); my $row = AttrVal($name, "dashboard_row", "center");
my $debug = AttrVal($name, "dashboard_debug", "0"); my $debug = AttrVal($name, "dashboard_debug", "0");
my ($activetab,$tabname) = Dashboard_GetActiveTab($name,1); my ($activetab,$tabname) = Dashboard_GetActiveTab($name,1);
@ -432,8 +450,7 @@ sub Dashboard_SummaryFN ($$$$) {
} }
# Hintergrundbild bauen # Hintergrundbild bauen
my $bimg = $backgroundimage?"url(/fhem/images/$backgroundimage)":""; my $bimg = $hash->{HELPER}{BIMG}{MAIN}?"url(/fhem/images/$hash->{HELPER}{BIMG}{MAIN})":"none";
Log3 ($name, 5, "Dashboard $name - Backgroundimage to display: $bimg");
if ($debug == 1) { $debugfield = "edit"; } if ($debug == 1) { $debugfield = "edit"; }
if ($showtabs eq "tabs-and-buttonbar-at-the-top") { $showbuttonbar = "top"; } if ($showtabs eq "tabs-and-buttonbar-at-the-top") { $showbuttonbar = "top"; }
@ -531,14 +548,13 @@ sub Dashboard_BuildDashboardTab ($$) {
my $hash = $defs{$name}; my $hash = $defs{$name};
my $id = $hash->{NR}; my $id = $hash->{NR};
my $colcount = AttrVal($name, 'dashboard_tab'.($t + 1).'colcount', AttrVal($name, "dashboard_colcount", 1)); my $colcount = AttrVal($name, 'dashboard_tab'.($t+1).'colcount', AttrVal($name, "dashboard_colcount", 1));
my $colwidths = AttrVal($name, 'dashboard_tab'.($t + 1).'rowcentercolwidth', AttrVal($name, "dashboard_rowcentercolwidth", 100)); my $colwidths = AttrVal($name, 'dashboard_tab'.($t+1).'rowcentercolwidth', AttrVal($name, "dashboard_rowcentercolwidth", 100));
$colwidths =~ tr/,/:/; $colwidths =~ tr/,/:/;
my $backgroundimage = AttrVal($name, 'dashboard_tab'.($t + 1).'backgroundimage', "");
my $row = AttrVal($name, "dashboard_row", "center"); my $row = AttrVal($name, "dashboard_row", "center");
my $tabgroups = AttrVal($name, "dashboard_tab".($t + 1)."groups", ""); my $tabgroups = AttrVal($name, "dashboard_tab".($t+1)."groups", "");
my $tabsortings = AttrVal($name, "dashboard_tab".($t + 1)."sorting", ""); my $tabsortings = AttrVal($name, "dashboard_tab".($t+1)."sorting", "");
my $tabdevicegroups = AttrVal($name, "dashboard_tab".($t + 1)."devices", ""); my $tabdevicegroups = AttrVal($name, "dashboard_tab".($t+1)."devices", "");
my $tabcount = Dashboard_GetTabCount($hash, 1); my $tabcount = Dashboard_GetTabCount($hash, 1);
unless ($tabgroups || $tabdevicegroups) { unless ($tabgroups || $tabdevicegroups) {
@ -546,6 +562,10 @@ sub Dashboard_BuildDashboardTab ($$) {
return ""; return "";
} }
# Hintergrundbild bauen
my $container = "tab".($t+1);
my $bimg = $hash->{HELPER}{BIMG}{$container}?"url(/fhem/images/$hash->{HELPER}{BIMG}{$container})":"none";
my @temptabdevicegroup = split(' ', $tabdevicegroups); my @temptabdevicegroup = split(' ', $tabdevicegroups);
my @tabdevicegroups = (); my @tabdevicegroups = ();
@ -600,7 +620,7 @@ sub Dashboard_BuildDashboardTab ($$) {
} }
} }
my $ret = " <div id=\"dashboard_tab".$t."\" data-tabwidgets=\"".$tabsortings."\" data-tabcolwidths=\"".$colwidths."\" class=\"dashboard dashboard_tabpanel\" style=\"background: " . ($backgroundimage ? "url(/fhem/images/" . FW_iconPath($backgroundimage) . ")" : "none") . " no-repeat !important;\">\n"; my $ret = " <div id=\"dashboard_tab".$t."\" data-tabwidgets=\"".$tabsortings."\" data-tabcolwidths=\"".$colwidths."\" class=\"dashboard dashboard_tabpanel\" style=\"background: ".$bimg." no-repeat !important;\">\n";
$ret .= " <ul class=\"dashboard_tabcontent\">\n"; $ret .= " <ul class=\"dashboard_tabcontent\">\n";
$ret .= " <table class=\"dashboard_tabcontent\">\n"; $ret .= " <table class=\"dashboard_tabcontent\">\n";
@ -1145,6 +1165,30 @@ sub Dashboard_Escape($) {
return $a; return $a;
} }
######################################################################################
# angegebenes $file im $dir und Unterverzeichnissen suchen
# und mit Pfad ab ".../images/" in $container speichern wenn gefunden
######################################################################################
sub Dashboard_searchImage($$$$) {
my ($name,$dir,$file,$container) = @_;
my $hash = $defs{$name};
my ($t,$im);
opendir(DIR, $dir);
my(@files) = grep {!/^\.\.?$/ } readdir(DIR);
closedir(DIR);
foreach (@files) {
if (-d ($t = "$dir/$_")) { # -d returns true if the following string is a directory.
Dashboard_searchImage($name,$t,$file,$container);
} else {
next if ($_ ne $file);
$im = (split("images\/", $dir."/".$_))[1];
$hash->{HELPER}{BIMG}{$container} = $im; # Ergebnisfile in Container speichern wenn gefunden
Log3 ($name, 5, "Dashboard $name - Background image file found in: $dir/$_");
}
}
}
1; 1;
=pod =pod
@ -1259,6 +1303,20 @@ return $a;
# File ./www/images/cam_video.PNG is shown <br> # File ./www/images/cam_video.PNG is shown <br>
</li><br> </li><br>
<a name="dashboard_backgroundimage"></a>
<li><b>dashboard_backgroundimage </b><br>
Displays a background image for the complete dashboard. The image is not stretched in any way. So the size should
match/extend the dashboard height/width. Only the filename has to be set. <br>
The file must be located anywhere below the directory "./www/images/". <br>
<b>Suggestion: </b> Create the directory "./www/images/dashboard" and put the image file into.
<br><br>
<b>Example</b><br>
attr dashboard_backgroundimage cam_video.PNG <br>
</li>
<br>
<a name="dashboard_colcount"></a> <a name="dashboard_colcount"></a>
<li><b>dashboard_colcount </b><br> <li><b>dashboard_colcount </b><br>
Number of columns in which the groups can be displayed. Nevertheless, it is possible to have multiple groups <br> Number of columns in which the groups can be displayed. Nevertheless, it is possible to have multiple groups <br>
@ -1349,15 +1407,39 @@ return $a;
Default: 0 Default: 0
</li><br> </li><br>
<a name="dashboard_tab1name"></a> <a name="dashboard_tab1backgroundimage"></a>
<li><b>dashboard_tab1name </b><br> <li><b>dashboard_tab1backgroundimage </b><br>
Title of Tab. (also valid for further dashboard_tabXname) Shows a background image for the tab. (also valid for further dashboard_tabXbackgroundimage) <br>
The image is not stretched in any way, it should therefore match the tab size or extend it.
Only the filename has to be set. <br>
The file must be located anywhere below the directory "./www/images/". <br>
<b>Suggestion: </b> Create the directory "./www/images/dashboard" and put the image file into.
<br><br>
<b>Example</b><br>
attr dashboard_tab1backgroundimage cam_video.PNG <br>
</li>
<br>
<a name="dashboard_tab1colcount"></a>
<li><b>dashboard_tab1colcount </b><br>
Number of columns for a specific tab in which the groups can be displayed. (also valid for further dashboard_tabXcolcount) <br>
Nevertheless, it is possible to have multiple groups to be positioned in a column next to each other.
This depends on the width of columns and groups. <br>
Default: &lt;dashboard_colcount&gt;
</li><br> </li><br>
<a name="dashboard_tab1sorting"></a> <a name="dashboard_tab1devices"></a>
<li><b>dashboard_tab1sorting </b><br> <li><b>dashboard_tab1devices </b><br>
Contains the position of each group in Tab. (also valid for further dashboard_tabXsorting) <br> DevSpec list of devices that should appear in the tab. (also valid for further dashboard_tabXdevices) <br>
Value is written by the "Set" button. It is not recommended to take manual changes. The format is: <br><br>
<ul>
GROUPNAME:devspec1,devspec2,...,devspecX:ICONNAME <br><br>
</ul>
ICONNAME is optional. Also GROUPNAME is optional. In case of missing GROUPNAME, the matching devices are
not grouped, but shown as separate widgets without titles.
For further details on the DevSpec format see <a href="#devspec">DevSpec</a>.
</li><br> </li><br>
<a name="dashboard_tab1groups"></a> <a name="dashboard_tab1groups"></a>
@ -1376,18 +1458,6 @@ return $a;
.*Light.* to show all groups that contain the string "Light" .*Light.* to show all groups that contain the string "Light"
</li><br> </li><br>
<a name="dashboard_tab1devices"></a>
<li><b>dashboard_tab1devices </b><br>
DevSpec list of devices that should appear in the tab. (also valid for further dashboard_tabXdevices) <br>
The format is: <br><br>
<ul>
GROUPNAME:devspec1,devspec2,...,devspecX:ICONNAME <br><br>
</ul>
ICONNAME is optional. Also GROUPNAME is optional. In case of missing GROUPNAME, the matching devices are
not grouped, but shown as separate widgets without titles.
For further details on the DevSpec format see <a href="#devspec">DevSpec</a>.
</li><br>
<a name="dashboard_tab1icon"></a> <a name="dashboard_tab1icon"></a>
<li><b>dashboard_tab1icon </b><br> <li><b>dashboard_tab1icon </b><br>
Set the icon for a Tab. (also valid for further dashboard_tabXicon) <br> Set the icon for a Tab. (also valid for further dashboard_tabXicon) <br>
@ -1395,18 +1465,15 @@ return $a;
referencing an SVG icon, then you can use the @colorname suffix to color the image. referencing an SVG icon, then you can use the @colorname suffix to color the image.
</li><br> </li><br>
<a name="dashboard_tab1colcount"></a> <a name="dashboard_tab1name"></a>
<li><b>dashboard_tab1colcount </b><br> <li><b>dashboard_tab1name </b><br>
Number of columns for a specific tab in which the groups can be displayed. (also valid for further dashboard_tabXcolcount) <br> Title of Tab. (also valid for further dashboard_tabXname)
Nevertheless, it is possible to have multiple groups to be positioned in a column next to each other.
This depends on the width of columns and groups. <br>
Default: &lt;dashboard_colcount&gt;
</li><br> </li><br>
<a name="dashboard_tab1backgroundimage"></a> <a name="dashboard_tab1sorting"></a>
<li><b>dashboard_tab1backgroundimage </b><br> <li><b>dashboard_tab1sorting </b><br>
Shows a background image for the tab. (also valid for further dashboard_tabXbackgroundimage) <br> Contains the position of each group in Tab. (also valid for further dashboard_tabXsorting) <br>
The image is not stretched in any way, it should therefore match the tab size or extend it. Value is written by the "Set" button. It is not recommended to take manual changes.
</li><br> </li><br>
<a name="dashboard_noLinks"></a> <a name="dashboard_noLinks"></a>
@ -1539,13 +1606,14 @@ return $a;
<a name="dashboard_backgroundimage"></a> <a name="dashboard_backgroundimage"></a>
<li><b>dashboard_backgroundimage </b><br> <li><b>dashboard_backgroundimage </b><br>
Zeigt ein Hintergrundbild im Dashboard an. Das Bild wird nicht gestreckt, es sollte daher auf die Größe des Dashboards Zeigt ein Hintergrundbild im Dashboard an. Das Bild wird nicht gestreckt, es sollte daher auf die Größe des Dashboards
passen oder diese überschreiten. Es ist der relative Pfad zum Verzeichnis "./www/images" anzugeben. <br><br> passen oder diese überschreiten. Es ist nur der Filename anzugeben. <br>
Das File muss sich irgendwo unterhalb des Verzeichnisses "./www/images/" befinden. <br>
<b>Empfehlung: </b> Das Verzeichnis "./www/images/dashboard" anlegen und das Bildfile in diesem Verzeichnis ablegen.
<br><br>
<b>Beispiel</b><br> <b>Beispiel</b><br>
attr dashboard_backgroundimage dashboard/cam_video.PNG <br> attr dashboard_backgroundimage cam_video.PNG <br>
# Bild ./www/images/dashboard/cam_video.PNG wird angezeigt <br>
attr dashboard_backgroundimage cam_video.PNG <br>
# Bild ./www/images/cam_video.PNG wird angezeigt <br>
</li> </li>
<br> <br>
@ -1648,16 +1716,41 @@ return $a;
Default: 0 Default: 0
</li><br> </li><br>
<a name="dashboard_tab1name"></a> <a name="dashboard_tab1backgroundimage"></a>
<li><b>dashboard_tab1name </b><br> <li><b>dashboard_tab1backgroundimage </b><br>
Titel des Tab. (gilt ebenfalls für weitere dashboard_tabXname) Zeigt ein Hintergrundbild für den Tab an. (gilt ebenfalls für weitere dashboard_tabXbackgroundimage) <br>
Das Bild wird nicht gestreckt, es sollte also auf die Größe des Tabs passen oder diese überschreiten. Es ist nur der
Filename anzugeben. <br>
Das File muss sich irgendwo unterhalb des Verzeichnisses "./www/images/" befinden. <br>
<b>Empfehlung: </b> Das Verzeichnis "./www/images/dashboard" anlegen und das Bildfile in diesem Verzeichnis ablegen.
<br><br>
<b>Beispiel</b><br>
attr dashboard_tab1backgroundimage cam_video.PNG <br>
</li> </li>
<br> <br>
<a name="dashboard_tab1sorting"></a> <a name="dashboard_tab1colcount"></a>
<li><b>dashboard_tab1sorting </b><br> <li><b>dashboard_tab1colcount </b><br>
Enthält die Positionierung jeder Gruppe im Tab. Der Wert wird mit der Schaltfläche "Set" geschrieben. Es wird nicht Die Anzahl der Spalten im Tab in der Gruppen dargestellt werden können. (gilt ebenfalls für weitere dashboard_tabXcolcount) <br>
empfohlen dieses Attribut manuell zu ändern. (gilt ebenfalls für weitere dashboard_tabXsorting) Dennoch ist es möglich, mehrere Gruppen in einer Spalte nebeneinander zu positionieren. Dies ist abhängig von der Breite
der Spalten und Gruppen. <br>
Gilt nur für die mittlere Spalte! <br>
Default: &lt;dashboard_colcount&gt;
</li>
<br>
<a name="dashboard_tab1devices"></a>
<li><b>dashboard_tab1devices </b><br>
DevSpec Liste von Geräten, die im Tab angezeigt werden sollen. (gilt ebenfalls für weitere dashboard_tabXdevices) <br>
Das Format ist: <br><br>
<ul>
GROUPNAME:devspec1,devspec2,...,devspecX:ICONNAME <br><br>
</ul>
ICONNAME ist optional. Auch GROUPNAME muss nicht vorhanden sein. Fehlt GROUPNAME, werden die angegebenen
Geräte nicht gruppiert, sondern als einzelne Widgets im Tab angezeigt. Für weitere Details bezüglich DevSpec:
<a href="#devspec">DevSpec</a>
</li> </li>
<br> <br>
@ -1679,40 +1772,25 @@ return $a;
</li> </li>
<br> <br>
<a name="dashboard_tab1devices"></a> <a name="dashboard_tab1icon"></a>
<li><b>dashboard_tab1devices </b><br> <li><b>dashboard_tab1icon </b><br>
DevSpec Liste von Geräten, die im Tab angezeigt werden sollen. (gilt ebenfalls für weitere dashboard_tabXdevices) <br> Zeigt am Tab ein Icon an (gilt ebenfalls für weitere dashboard_tabXicon).
Das Format ist: <br><br> Es muss sich dabei um ein exisitereindes Icon mit modpath Verzeichnis handeln. Handelt es
<ul>
GROUPNAME:devspec1,devspec2,...,devspecX:ICONNAME <br><br>
</ul>
ICONNAME ist optional. Auch GROUPNAME muss nicht vorhanden sein. Fehlt GROUPNAME, werden die angegebenen
Geräte nicht gruppiert, sondern als einzelne Widgets im Tab angezeigt. Für weitere Details bezüglich DevSpec:
<a href="#devspec">DevSpec</a>
</li>
<br>
<a name="dashboard_tabXicon"></a>
<li><b>dashboard_tabXicon </b><br>
Zeigt am Tab ein Icon an. Es muss sich dabei um ein exisitereindes Icon mit modpath Verzeichnis handeln. Handelt es
sich um ein SVG Icon kann der Suffix @colorname für die Farbe des Icons angegeben werden. sich um ein SVG Icon kann der Suffix @colorname für die Farbe des Icons angegeben werden.
</li> </li>
<br> <br>
<a name="dashboard_tab1colcount"></a> <a name="dashboard_tab1name"></a>
<li><b>dashboard_tab1colcount </b><br> <li><b>dashboard_tab1name </b><br>
Die Anzahl der Spalten im Tab in der Gruppen dargestellt werden können. (gilt ebenfalls für weitere dashboard_tabXcolcount) <br> Titel des Tab. (gilt ebenfalls für weitere dashboard_tabXname)
Dennoch ist es möglich, mehrere Gruppen in einer Spalte nebeneinander zu positionieren. Dies ist abhängig von der Breite
der Spalten und Gruppen. <br>
Gilt nur für die mittlere Spalte! <br>
Default: &lt;dashboard_colcount&gt;
</li> </li>
<br> <br>
<a name="dashboard_tab1backgroundimage"></a> <a name="dashboard_tab1sorting"></a>
<li><b>dashboard_tab1backgroundimage </b><br> <li><b>dashboard_tab1sorting </b><br>
Zeigt ein Hintergrundbild für den Tab an. (gilt ebenfalls für weitere dashboard_tabXbackgroundimage) <br> Enthält die Positionierung jeder Gruppe im Tab (gilt ebenfalls für weitere dashboard_tabXsorting). <br>
Das Bild wird nicht gestreckt, es sollte also auf die Größe des Tabs passen oder diese überschreiten. Der Wert wird mit der Schaltfläche "Set" geschrieben. Es wird nicht
empfohlen dieses Attribut manuell zu ändern.
</li> </li>
<br> <br>