FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-04-13 09:12:19 +00:00
Code Issues Releases Wiki Activity

Adding Dashboard Tab feature. Redesign saving of Group positioning. Many small changes and bugfixing.

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk@4717 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
svenson08 2014-01-22 20:39:53 +00:00
parent b43ac9fe1d
commit 3b36898cd6
6 changed files with 749 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
fhem/CHANGED
View File

@ -1,6 +1,8 @@
# Add changes at the top of the list. Keep it in ASCII, and 80-char wide.
# Do not insert empty lines here, update check depends on it.
- SVN
- feature: DASHBOARD: Dashboard get Tabs. Redesign saving of Group
positioning.
- bugfix: SYSMON: Log Warnings, unnoetige Readings erkenen und entfernen
- feature: Setting of controller parameter now possible for LUXTRONIK2
- feature: new module 71_YAMAHA_BD.pm to control Yamaha Blu-Ray

628
fhem/FHEM/95_Dashboard.pm
View File

@ -4,31 +4,39 @@
#
########################################################################################
# Released : 20.12.2013 @svenson08
# Version : 1.15
# Version : 2.00
# Revisions:
# 0001: Released to testers
# 0002: Don't show link on Groups with WebLinks. Hide GroupToogle Button (new Attribut dashboard_showtooglebuttons).
# 1.00: Released to testers
# 1.02: Don't show link on Groups with WebLinks. Hide GroupToogle Button (new Attribut dashboard_showtooglebuttons).
# Set the Columnheight (new Attribur dashboard_colheight).
# 0003: Dashboard Entry over the Room-List, set the Room "Dashboard" to hiddenroom. Build weblink independently.
# 1.03: Dashboard Entry over the Room-List, set the Room "Dashboard" to hiddenroom. Build weblink independently.
# Dashboard Row on Top and Bottom (no separately columns). Detail Button
# to jump into define Detailview. Don't show link on Groups with SVG and readingsGroup.
# 0004: Sort the Groupentrys (@gemx). Hide Room Dashboard.
# 0005: Fix dashboard_row center
# 0006: Released Version 1.10. Rename Module from 95_FWViews to 95_Dashboard. Rename view_* Attributes to
# 1.04: Sort the Groupentrys (@gemx). Hide Room Dashboard.
# 1.05: Fix dashboard_row center
# 1.10: Released Version 1.10. Rename Module from 95_FWViews to 95_Dashboard. Rename view_* Attributes to
# dashboard_*. Rename fhemweb_FWViews.js to dashboard.js. Cleanup CSS. Reduce single png-Images to one File only.
# Fix duplicated run of JS Script. Dashboard STAT show "Missing File" Information if installation is wrong.
# 0007: use jquery.min and jquery-ui.min. add dashboard_debug attribute. Check dashboard_sorting value plausibility.
# 1.11: use jquery.min and jquery-ui.min. add dashboard_debug attribute. Check dashboard_sorting value plausibility.
# Change default Values. First Release to FHEM SVN.
# 0008: Add Germyn command_ref Text. Add Default Values to command_ref (@cotecmania). Fix identification of an existing
# 1.12: Add Germyn command_ref Text. Add Default Values to command_ref (@cotecmania). Fix identification of an existing
# Dashboard-Weblink (Message *_weblink already defined, delete it first on rereadcfg). Remove white space from
# both ends of a group in dashboard_groups. Fix dashboard_sorting check. Wrong added hiddenroom to FHEMWEB
# Browsersession fixed. Buttonbar can now placed on top or bottom of the Dashboard (@cotecmania).
# Dashboard is always edited out the Room Dashboard (@justme1968)
# Fix Dashboard Entry over the Room-List after 01_FHEMWEB.pm changes
# 2.00: First Changes vor Dashboard Tabs. Change while saving positioning. Alterd max/min Group positioning.
# Many changes in Dasboard.js. Replaced the attributes dashboard_groups, dashboard_colheight and dashboard_sorting
# Many new Attributes vor Tabs, Dashboard sizing. Set of mimimal attributes (helpful for beginners).
# Provisionally the columns widths are dependent on the total width of the Dashboard.
#
# Known Bugs/Todos:
# Add/Write FHEM Wiki-Doku
# Nachträglich hinzufügen von gruppen
# TODO: demo.fhem.cfg
# TODO: sorting attribut with value 1 -> erase attribute?
# TODO: dashboard_colwidth -> <1.col, 2.col, 3.col ...> only <1.col>, first col = value, split rest on colcount.
# TODO: Tab top, bottom, hidden
# BUG: Longpoll dosen't work on Dashboard
# Log 1, "[DASHBOARD simple debug] '".$g."' ";
########################################################################################
#
# This program is free software: you can redistribute it and/or modify
@ -51,6 +59,7 @@
# http://jsfiddle.net/adamboduch/e6zdX/1/
# http://www.innovativephp.com/jquery-resizable-practical-examples-and-demos/
# http://jsfiddle.net/raulfernandez/mAuxn/
# http://jsfiddle.net/zeTP8/
package main;
@ -67,10 +76,12 @@ use vars qw(%FW_types); # device types
# --------------------------- Global Variable -----------------------------------------------
my %group;
#my %dashboarddata;
my $fwjquery = "jquery.min.js";
my $fwjqueryui = "jquery-ui.min.js";
my $dashboardname = "Dashboard"; # Link Text
my $dashboardhiddenroom = "DashboardRoom"; # Hiddenroom
my $dashboardversion = "2.00";
# -------------------------------------------------------------------------------------------
sub Dashboard_Initialize ($) {
@ -79,20 +90,45 @@ sub Dashboard_Initialize ($) {
$hash->{DefFn} = "Dashboard_define";
$hash->{UndefFn} = "Dashboard_Undef";
$hash->{FW_detailFn} = "Dashboard_detailFn";
$hash->{AttrFn} = "Dashboard_Attr";
$hash->{AttrList} = "disable:0,1 ".
"dashboard_sorting ".
"dashboard_colwidth ".
"dashboard_colheight ".
"dashboard_colcount:1,2,3,4,5 ".
"dashboard_colwidth ". # obsolet -> always calculated to 100%. future uses for separate columns wide
"dashboard_debug:0,1 ".
"dashboard_lockstate:unlock,lock ".
"dashboard_rowtopheight ".
"dashboard_rowbottomheight ".
"dashboard_groups ".
"dashboard_lockstate:unlock,lock ".
"dashboard_colcount:1,2,3,4,5 ".
"dashboard_row:top,center,bottom,top-center,center-bottom,top-center-bottom ".
"dashboard_showbuttonbar:top,bottom,hidden ".
"dashboard_showhelper:0,1 ".
"dashboard_showtooglebuttons:0,1 ".
"dashboard_row:top,center,bottom,top-center,center-bottom,top-center-bottom ".
"dashboard_debug:0,1 ".
"dashboard_showtooglebuttons:0,1 ".
#new attribute
"dashboard_tabcount:1,2,3,4,5 ".
"dashboard_activetab:1,2,3,4,5 ".
"dashboard_tab1name ".
"dashboard_tab2name ".
"dashboard_tab3name ".
"dashboard_tab4name ".
"dashboard_tab5name ".
"dashboard_tab1groups ".
"dashboard_tab2groups ".
"dashboard_tab3groups ".
"dashboard_tab4groups ".
"dashboard_tab5groups ".
"dashboard_tab1sorting ".
"dashboard_tab2sorting ".
"dashboard_tab3sorting ".
"dashboard_tab4sorting ".
"dashboard_tab5sorting ".
"dashboard_width ".
"dashboard_rowcenterheight ".
#obsolete - erase in future releases
"dashboard_groups ". # obsolet -> erase in future releases
"dashboard_colheight ". # obsolet -> erase in future releases
"dashboard_sorting ". # obsolet -> komplett ersetzen
$readingFnAttributes;
$data{FWEXT}{Dashboardx}{LINK} = "?room=".$dashboardhiddenroom;
@ -112,12 +148,11 @@ sub DashboardAsHtml($)
my $name = $defs{$d}{NAME};
my $id = $defs{$d}{NR};
############# Read Dashboard Attributes and set Default-Values ##############################
######################### Read Dashboard Attributes and set Default-Values ####################################
my $disable = AttrVal($defs{$d}{NAME}, "disable", 0);
my $sorting = AttrVal($defs{$d}{NAME}, "dashboard_sorting", ",");
my $colcount = AttrVal($defs{$d}{NAME}, "dashboard_colcount", 1);
my $colwidth = AttrVal($defs{$d}{NAME}, "dashboard_colwidth", 320);
my $colheight = AttrVal($defs{$d}{NAME}, "dashboard_colheight", 400);
my $colheight = AttrVal($defs{$d}{NAME}, "dashboard_rowcenterheight", 400);
my $rowtopheight = AttrVal($defs{$d}{NAME}, "dashboard_rowtopheight", 250);
my $rowbottomheight = AttrVal($defs{$d}{NAME}, "dashboard_rowbottomheight", 250);
my $showhelper = AttrVal($defs{$d}{NAME}, "dashboard_showhelper", 1);
@ -126,115 +161,188 @@ sub DashboardAsHtml($)
my $showtooglebuttons = AttrVal($defs{$d}{NAME}, "dashboard_showtooglebuttons", 1);
my $row = AttrVal($defs{$d}{NAME}, "dashboard_row", "center");
my $debug = AttrVal($defs{$d}{NAME}, "dashboard_debug", "0");
my $dashboardgroups = AttrVal($defs{$d}{NAME}, "dashboard_groups", "");
my $activetab = AttrVal($defs{$d}{NAME}, "dashboard_activetab", 1);
my $tabcount = AttrVal($defs{$d}{NAME}, "dashboard_tabcount", 1);
my $dbwidth = AttrVal($defs{$d}{NAME}, "dashboard_width", "100%");
my @tabnames = (AttrVal($defs{$d}{NAME}, "dashboard_tab1name", "Dashboard-Tab 1"),
AttrVal($defs{$d}{NAME}, "dashboard_tab2name", "Dashboard-Tab 2"),
AttrVal($defs{$d}{NAME}, "dashboard_tab3name", "Dashboard-Tab 3"),
AttrVal($defs{$d}{NAME}, "dashboard_tab4name", "Dashboard-Tab 4"),
AttrVal($defs{$d}{NAME}, "dashboard_tab5name", "Dashboard-Tab 5"));
my @tabgroups = (AttrVal($defs{$d}{NAME}, "dashboard_tab1groups", ""),
AttrVal($defs{$d}{NAME}, "dashboard_tab2groups", ""),
AttrVal($defs{$d}{NAME}, "dashboard_tab3groups", ""),
AttrVal($defs{$d}{NAME}, "dashboard_tab4groups", ""),
AttrVal($defs{$d}{NAME}, "dashboard_tab5groups", ""));
my @tabsortings = (AttrVal($defs{$d}{NAME}, "dashboard_tab1sorting", ""),
AttrVal($defs{$d}{NAME}, "dashboard_tab2sorting", ""),
AttrVal($defs{$d}{NAME}, "dashboard_tab3sorting", ""),
AttrVal($defs{$d}{NAME}, "dashboard_tab4sorting", ""),
AttrVal($defs{$d}{NAME}, "dashboard_tab5sorting", ""));
#############################################################################################
#---------------- Dashboard is always edited out the Room Dashboard -------------------------
if ($FW_room ne $dashboardhiddenroom) { #Dashboard is always edited out the Room Dashboard
if ($showbuttonbar eq "hidden") {$showbuttonbar = "top" };
$showhelper = 1;
$showtooglebuttons = 1;
$lockstate = "unlock";
#if ($FW_room ne $dashboardhiddenroom) { #Dashboard is always edited out the Room Dashboard
# if ($showbuttonbar eq "hidden") {$showbuttonbar = "top" };
# $showhelper = 1;
# $showtooglebuttons = 1;
# $lockstate = "unlock";
#}
################ temp. deaktiviert
#----------------------------------------------------------------------------
if ($disable == 1) {
$defs{$d}{STATE} = "disabled";
return $ret;
}
unless (@tabgroups) {
$defs{$d}{STATE} = "No Groups set";
return $ret;
}
#----------------------------------------------------------------------------
if ($disable == 1) { $defs{$d}{STATE} = "disabled"; }
if ($dashboardgroups eq "") { $defs{$d}{STATE} = "No Groups set"; }
return $ret if (($dashboardgroups eq "") || ($disable == 1));
if ($debug == 1) { $debugfield = "edit" };
if ($showbuttonbar eq "hidden") { $lockstate = "lock" };
if (not ($colwidth =~ /^\d+$/)) { $colwidth = 320 };
if ($activetab > $tabcount) { $activetab = $tabcount; }
#$colwidth =~ tr/,/:/; #future release
#if ($colwidth =~/[a-zA-Z]+$/) { Log 1, "[DASHBOARD simple debug] Nicht nur zahlen ".$colwidth; } #future release
if (not ($colwidth =~ /^\d+$/)) { $colwidth = 320 }; #current
if ( ($colwidth =~ /[a-zA-Z]/)) { $colwidth = 150 }; #current
if (not ($colheight =~ /^\d+$/)) { $colheight = 400 };
if (not ($rowtopheight =~ /^\d+$/)) { $rowtopheight = 50 };
if (not ($rowbottomheight =~ /^\d+$/)) { $rowbottomheight = 50 };
#------------------- Check dashboard_sorting on false content ------------------------------------
if (($sorting !~ /[0-9]/ || $sorting !~ /:/ || $sorting !~ /,/ ) && ($sorting ne ",")){
Log3 $d, 3, "[".$name."] Value of attribut dashboard_sorting is wrong. Saved sorting can not be set. Fix Value or delete the Attribute.";
} else { Log3 $d, 5, "[".$name."] Sorting OK: ".$sorting; }
for (my $i=0;$i<@tabsortings;$i++){
if (($tabsortings[$i-1] !~ /[0-9]/ || $tabsortings[$i-1] !~ /:/ || $tabsortings[$i-1] !~ /,/ ) && ($tabsortings[$i-1] ne "," && $tabsortings[$i-1] ne "")){
Log3 $d, 3, "[".$name." V".$dashboardversion."] Value of attribut dashboard_tab".$i."sorting is wrong. Saved sorting can not be set. Fix Value or delete the Attribute. [".$tabsortings[$i-1]."]";
} else { Log3 $d, 5, "[".$name." V".$dashboardversion."] Sorting OK or Empty: dashboard_tab".$i."sorting "; }
}
#-------------------------------------------------------------------------------------------------
%group = BuildGroupList($dashboardgroups);
$ret .= "<table class=\"dashboard\" id=\"dashboard\">";
############################ Dashboard-Optionbar ############################################
if ($showbuttonbar eq "top") { $ret .= BuildButtonBar($d); }
#############################################################################################
$ret .= "<tr><td><div class=\"dashboardhidden\">";
$ret .= "<input type=\"$debugfield\" size=\"100\" id=\"dashboard_attr\" value=\"$name,$colwidth,$showhelper,$lockstate,$showbuttonbar,$colheight,$showtooglebuttons,$colcount,$rowtopheight,$rowbottomheight\">";
$ret .= "<input type=\"$debugfield\" size=\"100\" id=\"dashboard_currentsorting\" value=\"$sorting\">";
$ret .= "<input type=\"$debugfield\" size=\"100\" id=\"dashboard_jsdebug\" value=\"\">";
$ret .= "</div></td></tr>";
$ret .= "<tr><td><div class=\"dashboardhidden\">";
$ret .= "<input type=\"$debugfield\" size=\"100%\" id=\"dashboard_attr\" value=\"$name,$dbwidth,$showhelper,$lockstate,$showbuttonbar,$colheight,$showtooglebuttons,$colcount,$rowtopheight,$rowbottomheight,$tabcount,$activetab,$colwidth\">";
$ret .= "<input type=\"$debugfield\" size=\"100%\" id=\"dashboard_jsdebug\" value=\"\">";
$ret .= "</div></td></tr>";
##################### Top Row (only one Column) #############################################
if ($row eq "top-center-bottom" || $row eq "top-center" || $row eq "top"){
$ret .= "<tr><td>";
$ret .= "<div id=\"top\">";
$ret .= " <div class=\"ui-row dashboard_column\" id=\"sortablecolumn100\">";
$ret .= " </div>";
$ret .= "</div>";
$ret .= "</td></tr>";
}
#############################################################################################
$ret .= "<tr><td><div id=\"tabs\" class=\"dashboard_tabs\">";
########################### Dashboard Tab-Liste ##############################################
$ret .= " <ul id=\"dashboard_tabnav\" class=\"dashboard_tabnav\">";
if ($showbuttonbar eq "top") { $ret .= BuildButtonBar($d,$showbuttonbar); }
for (my $i=0;$i<$tabcount;$i++){ $ret .= " <li class=\"dashboard_tab\"><a href=\"#dashboard_tab".$i."\">".trim($tabnames[$i])."</a></li>"; }
$ret .= " </ul>";
##############################################################################################
##################### Center Row (max. 5 Column) ############################################
if ($row eq "top-center-bottom" || $row eq "top-center" || $row eq "center-bottom" || $row eq "center"){
$ret .= "<tr><td>";
$ret .= "<div id=\"center\">";
$ret .= " <div class=\"dashboard_column\" id=\"sortablecolumn0\" >";
my @dashboardgroups = split(",", $dashboardgroups);
for (my $i=0;$i<@dashboardgroups;$i++){
$dashboardgroups[$i] = trim($dashboardgroups[$i]); #remove white space from both ends of a string
$dashboardgroups[$i] =~ tr/<+>/ /; #Fix Groupname if use wrong Groupnames from Bestpractice beginner configuration
$ret .= " <div class=\"dashboard_widget\" data-status=\"\" id=\"".$id."w".$i."\">";
$ret .= " <div class=\"dashboard_widgetinner\">";
$ret .= " <div class=\"dashboard_widgetheader\">".$dashboardgroups[$i]."</div>";
$ret .= " <div data-userheight=\"\" class=\"dashboard_content\">";
$ret .= BuildGroup($dashboardgroups[$i]);
$ret .= " </div>";
$ret .= " </div>";
$ret .= " </div>";
for (my $t=0;$t<$tabcount;$t++){
my @tabgroup = split(",", $tabgroups[$t]); #Set temp. position for groups without an stored position
for (my $i=0;$i<@tabgroup;$i++){
if (index($tabsortings[$t],trim($tabgroup[$i])) < 0) { $tabsortings[$t] = $tabsortings[$t]."t".$t."c".GetMaxColumnId($row,$colcount).",".trim($tabgroup[$i]).",true,0,0:"; }
}
$ret .= " </div>";
$ret .= BuildEmptyColumn($colcount);
$ret .= "</div>";
$ret .= "</td></tr>";
%group = BuildGroupList($tabgroups[$t]);
$ret .= " <div id=\"dashboard_tab".$t."\" data-tabwidgets=\"".$tabsortings[$t]."\" class=\"dashboard_tabpanel\">";
$ret .= " <ul class=\"dashboard_tabcontent\">";
$ret .= " <table class=\"dashboard_tabcontent\">"; # dashboard\">";
##################### Top Row (only one Column) #############################################
if ($row eq "top-center-bottom" || $row eq "top-center" || $row eq "top"){ $ret .= BuildDashboardTopRow($t,$id,$tabgroups[$t],$tabsortings[$t]); }
##################### Center Row (max. 5 Column) ############################################
if ($row eq "top-center-bottom" || $row eq "top-center" || $row eq "center-bottom" || $row eq "center"){ $ret .= BuildDashboardCenterRow($t,$id,$tabgroups[$t],$tabsortings[$t],$colcount);}
############################# Bottom Row (only one Column) ############################################
if ($row eq "top-center-bottom" || $row eq "center-bottom" || $row eq "bottom"){ $ret .= BuildDashboardBottomRow($t,$id,$tabgroups[$t],$tabsortings[$t]); }
#############################################################################################
$ret .= " </table>";
$ret .= " </ul>";
$ret .= " </div>";
}
#############################################################################################
##################### Bottom Row (only one Column) ##########################################
if ($row eq "top-center-bottom" || $row eq "center-bottom" || $row eq "bottom"){
$ret .= "<tr><td>";
$ret .= "<div id=\"bottom\">";
$ret .= " <div class=\"ui-row dashboard_column\" id=\"sortablecolumn200\">";
$ret .= " </div>";
$ret .= "</div>";
$ret .= "</td></tr>";
}
#############################################################################################
############################ Dashboard-Optionbar ############################################
if ($showbuttonbar eq "bottom") { $ret .= BuildButtonBar($d); }
#############################################################################################
if ($showbuttonbar eq "bottom") { $ret .= BuildButtonBar($d,$showbuttonbar); }
$ret .= "</div></td></tr>";
$ret .= "</table>";
return $ret;
}
sub BuildButtonBar($){
my ($d) = @_;
sub BuildDashboardTopRow($$$$){
my ($t,$id, $dbgroups, $dbsorting) = @_;
my $ret;
$ret .= "<tr><td>";
$ret .= "<div id=\"dashboard_rowtop_tab".$t."\" class=\"dashboard_rowtop\">";
$ret .= " <div class=\"ui-row dashboard_row dashboard_column\" id=\"dashboard_tab".$t."column100\">";
$ret .= BuildGroupWidgets($t,"100",$id,$dbgroups,$dbsorting);
$ret .= " </div>";
$ret .= "</div>";
$ret .= "</td></tr>";
return $ret;
}
sub BuildDashboardCenterRow($$$$$){
my ($t,$id, $dbgroups, $dbsorting, $colcount) = @_;
my $ret;
$ret .= "<tr><td>";
$ret .= "<div id=\"dashboard_rowcenter_tab".$t."\" class=\"dashboard_rowcenter\">";
for (my $i=0;$i<$colcount;$i++){
$ret .= " <div class=\"ui-row dashboard_row dashboard_column\" id=\"dashboard_tab".$t."column".$i."\">";
$ret .= BuildGroupWidgets($t,$i,$id,$dbgroups,$dbsorting);
$ret .= " </div>";
}
$ret .= "</div>";
$ret .= "</td></tr>";
return $ret;
}
sub BuildDashboardBottomRow($$$$){
my ($t,$id, $dbgroups, $dbsorting) = @_;
my $ret;
$ret .= "<tr><td>";
$ret .= "<div id=\"dashboard_rowbottom_tab".$t."\" class=\"dashboard_rowbottom\">";
$ret .= " <div class=\"ui-row dashboard_row dashboard_column\" id=\"dashboard_tab".$t."column200\">";
$ret .= BuildGroupWidgets($t,"200",$id,$dbgroups,$dbsorting);
$ret .= " </div>";
$ret .= "</div>";
$ret .= "</td></tr>";
return $ret;
}
sub BuildButtonBar($$){
my ($d,$pos) = @_;
my $ret;
$ret .= "<tr><td><div class=\"dashboard_buttonbar\">";
$ret .= "<div class=\"dashboard_buttonbar dashboard_buttonbar_".$pos."\">";
$ret .= " <div class=\"dashboard_button\"> <span class=\"dashboard_button_icon dashboard_button_iconset\"></span> <a id=\"dashboard_button_set\" href=\"javascript:dashboard_setposition()\" title=\"Set the Position\">Set</a> </div>";
$ret .= " <div class=\"dashboard_button\"> <a id=\"dashboard_button_lock\" href=\"javascript:dashboard_tooglelock()\" title=\"Lock Dashboard\">Lock</a> </div>";
$ret .= " <div class=\"dashboard_button\"> <span class=\"dashboard_button_icon dashboard_button_icondetail\"></span> <a id=\"dashboard_button_detail\" href=\"/fhem?detail=$d\" title=\"Dashboard Details\">Detail</a> </div>";
$ret .= "</div></td></tr>";
$ret .= "</div>";
return $ret;
}
sub BuildGroupWidgets($$$$$) {
my ($tab,$column,$id,$dbgroups, $dbsorting) = @_;
my $ret = "";
my $counter = 0;
my @storedsorting = split(":", $dbsorting);
foreach my $singlesorting (@storedsorting) {
my @groupdata = split(",", $singlesorting);
if (index($dbsorting, "t".$tab."c".$column.",".$groupdata[1]) >= 0 && index($dbgroups, $groupdata[1]) >= 0 && $groupdata[1] ne "" ) { #gruppe auch für tab hinterlegt
$ret .= " <div class=\"dashboard_widget\" data-groupwidget=\"".$singlesorting."\" id=\"".$id."t".$tab."c".$column."w".$counter."\">";
$ret .= " <div class=\"dashboard_widgetinner\">";
$ret .= " <div class=\"dashboard_widgetheader\">".$groupdata[1]."</div>";
$ret .= " <div data-userheight=\"\" class=\"dashboard_content\">";
$ret .= BuildGroup($groupdata[1]);
$ret .= " </div>";
$ret .= " </div>";
$ret .= " </div>";
$counter++;
}
}
return $ret;
}
sub BuildGroupList($) {
#----------------------------------------------------------------------------------------------------------
my @dashboardgroups = split(",", $_[0]); #array for all groups to build an widget
my %group = ();
@ -247,7 +355,6 @@ sub BuildGroupList($) {
}
}
}
#----------------------------------------------------------------------------------------------------------
return %group;
}
@ -318,38 +425,33 @@ sub BuildGroup($)
return $ret;
}
sub BuildEmptyColumn($) {
my ($colcount) = @_;
my $ret = "";
my $id = 1;
if ($colcount == 1) { return $ret } else { $colcount = $colcount -1};
for (my $i=0;$i<$colcount;$i++){
########### Empty Column ##################
$id = $id+$i;
$ret .= "<div class=\"dashboard_column\" id=\"sortablecolumn$id\"></div>";
###########################################
}
return $ret;
sub GetMaxColumnId($$) {
my ($row, $colcount) = @_;
my $maxcolid = "0";
if (index($row,"bottom") > 0) { $maxcolid = "200"; }
elsif (index($row,"center") > 0) { $maxcolid = $colcount-1; }
elsif (index($row,"top") > 0) { $maxcolid = "100"; }
return $maxcolid;
}
sub CheckInstallation($) {
my ($hash) = @_;
unless (-e $FW_dir."/pgm2/".$fwjquery) {
Log3 $hash, 3, "[".$hash->{NAME}. "] Missing File ".$FW_dir."/pgm2/".$fwjquery;
Log3 $hash, 3, "[".$hash->{NAME}. " V".$dashboardversion."] Missing File ".$FW_dir."/pgm2/".$fwjquery;
$hash->{STATE} = 'Missing File, see LogFile for Details';
}
unless (-e $FW_dir."/pgm2/".$fwjqueryui) {
Log3 $hash, 3, "[".$hash->{NAME}. "] Missing File ".$FW_dir."/pgm2/".$fwjqueryui;
Log3 $hash, 3, "[".$hash->{NAME}. " V".$dashboardversion."] Missing File ".$FW_dir."/pgm2/".$fwjqueryui;
$hash->{STATE} = 'Missing File, see LogFile for Details';
}
unless (-e $FW_dir."/pgm2/dashboard.js") {
Log3 $hash, 3, "[".$hash->{NAME}. "] Missing File ".$FW_dir."/pgm2/dashboard.js";
Log3 $hash, 3, "[".$hash->{NAME}. " V".$dashboardversion."] Missing File ".$FW_dir."/pgm2/dashboard.js";
$hash->{STATE} = 'Missing File, see LogFile for Details';
}
unless (-e $FW_icondir."/default/dashboardicons.png") {
Log3 $hash, 3, "[".$hash->{NAME}. "] Missing File ".$FW_icondir."/default/dashboardicons.png";
Log3 $hash, 3, "[".$hash->{NAME}. " V".$dashboardversion."] Missing File ".$FW_icondir."/default/dashboardicons.png";
$hash->{STATE} = 'Missing File, see LogFile for Details';
}
}
@ -364,18 +466,75 @@ sub CheckDashboardEntry($) {
InternalTimer ($timeToExec, 'CheckDashboardAttributUssage', $hash, 0);
}
sub CheckDashboardAttributUssage($) { # replaces old disused attributes and their values
sub CheckDashboardAttributUssage($) { # replaces old disused attributes and their values | set minimal attributes
my ($hash) = @_;
my $d = $hash->{NAME};
my $detailnote = "";
# Replae older dashboard_showbuttonbar value (outdated 01.2014)
# --------- Set minimal Attributes in the hope to make it easier for beginners --------------------
my $tabcount = AttrVal($defs{$d}{NAME}, "dashboard_tabcount", "0");
if ($tabcount eq "0") { FW_fC("attr ".$d." dashboard_tabcount 1"); }
my $tab1groups = AttrVal($defs{$d}{NAME}, "dashboard_tab1groups", "<noGroup>");
if ($tab1groups eq "<noGroup>") { FW_fC("attr ".$d." dashboard_tab1groups Set Your Groups - See Attribute dashboard_tab1groups-"); }
# -------------------------------------------------------------------------------------------------
# -------------- Replace older dashboard_showbuttonbar value (outdated 01.2014) ------------------------------
my $showbuttonbarvalue = AttrVal($defs{$d}{NAME}, "dashboard_showbuttonbar", "top");
if ($showbuttonbarvalue eq "0") { FW_fC("attr ".$d." dashboard_showbuttonbar hidden"); }
if ($showbuttonbarvalue eq "1") { FW_fC("attr ".$d." dashboard_showbuttonbar top"); }
# ------------------------------------------------------------------------------------------------------------------------
# ---- detached / transferred from the old attribute to the tab extension (outdated 02.2014) ------
my $colheight = AttrVal($defs{$d}{NAME}, "dashboard_colheight", "");
if ($colheight ne "") {
{ FW_fC("attr ".$d." dashboard_rowcenterheight ".$colheight); }
{ FW_fC("deleteattr ".$d." dashboard_colheight"); }
$detailnote = $detailnote." [dashboard_colheight -> dashboard_rowcenterheight]";
}
my $groups = AttrVal($defs{$d}{NAME}, "dashboard_groups", "");
if ($groups ne "") {
{ FW_fC("attr ".$d." dashboard_tab1groups ".$groups); }
{ FW_fC("deleteattr ".$d." dashboard_groups"); }
$detailnote = $detailnote." [dashboard_groups -> dashboard_tab1groups]";
}
my $sorting = AttrVal($defs{$d}{NAME}, "dashboard_sorting", "");
if ($sorting ne "") { #convert old sorting in new
my @sortings = split(":", $sorting);
my $newsorting = "";
my $groupcounter = 0;
for (my $s=0;$s<@sortings;$s++){ #0,590w3,true,246,826, 590w0,true,183,258:
my @groups = split(",", $sortings[$s]);
for (my $g=1;$g<@groups;$g+=4){
my $row = AttrVal($defs{$d}{NAME}, "dashboard_row", "center");
my $colcount = AttrVal($defs{$d}{NAME}, "dashboard_colcount", "1");
my @dbgroups = split(",", AttrVal($defs{$d}{NAME}, "dashboard_tab1groups", ",")); #1. gruppeneintrag = 1. gespeicherte gruppe
my @dbgroup = split("w",$groups[$g]);
my $column = "";
#Map old Column Count to new Count
if ($row eq "top" && $groups[0] == 0) { $column = "t0c100"; }
if ($row eq "center") { $column = "t0c".$groups[0]; }
if ($row eq "bottom" && $groups[0] == 0) { $column = "200"; }
if ($row eq "top-center" && $groups[0] == 0) { $column = "t0c100"; }
if ($row eq "top-center" && $groups[0] != 0) { $column = "t0c".($groups[0]-1); }
if ($row eq "center-bottom" && $groups[0] <= $colcount-1) { $column = "t0c".$groups[0]; }
if ($row eq "center-bottom" && $groups[0] > $colcount-1) { $column = "t0c200"; }
if ($row eq "top-center-bottom" && $groups[0] == "0") { $column = "t0c100"; }
if ($row eq "top-center-bottom" && $groups[0] != 0 && $groups[0] <= $colcount) { $column = "t0c".($groups[0]-1); }
if ($row eq "top-center-bottom" && $groups[0] > $colcount) { $column = "t0c200"; }
$newsorting = $newsorting.$column.",".$dbgroups[$dbgroup[1]].",".$groups[$g+1].",".$groups[$g+3].",".$groups[$g+2].":";
$groupcounter = $groupcounter +1;
}
}
{ FW_fC("attr ".$d." dashboard_tab1sorting ".$newsorting); }
{ FW_fC("deleteattr ".$d." dashboard_sorting"); }
$detailnote = $detailnote." [dashboard_sorting -> dashboard_tab1sorting]";
}
# ------------------------------------------------------------------------------------------------------------------------
# Get out any change to the Logfile
if ($showbuttonbarvalue eq "0" || $showbuttonbarvalue eq "1") {
Log3 $hash, 3, "[".$hash->{NAME}. "]"." Using an outdated no longer used Attribute or Value. This has been corrected. Don't forget to save config.";
if ($showbuttonbarvalue eq "0" || $showbuttonbarvalue eq "1" || $groups ne "" || $sorting ne "") {
Log3 $hash, 3, "[".$hash->{NAME}. " V".$dashboardversion."]"." Using an outdated no longer used Attribute or Value. This has been corrected. Don't forget to save config. ".$detailnote;
}
}
@ -385,7 +544,7 @@ sub CreateDashboardEntry($) {
my $h = $hash->{NAME};
if (!defined $defs{$h."_weblink"}) {
FW_fC("define ".$h."_weblink weblink htmlCode {DashboardAsHtml(\"".$h."\")}");
Log3 $hash, 3, "[".$hash->{NAME}. "]"." Weblink dosen't exists. Created weblink ".$h."_weblink. Don't forget to save config.";
Log3 $hash, 3, "[".$hash->{NAME}. " V".$dashboardversion."]"." Weblink dosen't exists. Created weblink ".$h."_weblink. Don't forget to save config.";
}
FW_fC("attr ".$h."_weblink room ".$dashboardhiddenroom);
@ -397,14 +556,14 @@ sub CreateDashboardEntry($) {
if (index($hr,$dashboardname) != -1 && index($hr,$dashboardhiddenroom) == -1) {
$hr =~ s/$dashboardname/$dashboardhiddenroom/g;
FW_fC("attr ".$defs{$dn}{NAME}." hiddenroom ".$hr);
Log3 $hash, 3, "[".$hash->{NAME}. "]"." Corrected hiddenroom '".$dashboardname."' -> '".$dashboardhiddenroom."' in ".$defs{$dn}{NAME}.". Don't forget to save config.";
Log3 $hash, 3, "[".$hash->{NAME}. " V".$dashboardversion."]"." Corrected hiddenroom '".$dashboardname."' -> '".$dashboardhiddenroom."' in ".$defs{$dn}{NAME}.". Don't forget to save config.";
}
#-------------------------------------------------------------------------------------------------
if (index($hr,$dashboardhiddenroom) == -1){
if ($hr eq "") {FW_fC("attr ".$defs{$dn}{NAME}." hiddenroom ".$dashboardhiddenroom);}
else {FW_fC("attr ".$defs{$dn}{NAME}." hiddenroom ".$hr.",".$dashboardhiddenroom);}
Log3 $hash, 3, "[".$hash->{NAME}. "]"." Added hiddenroom '".$dashboardhiddenroom."' to ".$defs{$dn}{NAME}.". Don't forget to save config.";
Log3 $hash, 3, "[".$hash->{NAME}. " V".$dashboardversion."]"." Added hiddenroom '".$dashboardhiddenroom."' to ".$defs{$dn}{NAME}.". Don't forget to save config.";
}
}
}
@ -420,8 +579,10 @@ sub Dashboard_define ($$) {
$data{FWEXT}{testjs}{SCRIPT} = "/pgm2/dashboard.js";
$hash->{STATE} = 'Initialized';
CheckInstallation($hash);
CheckDashboardEntry($hash);
return;
}
@ -436,7 +597,18 @@ sub Dashboard_Undef ($$) {
sub Dashboard_detailFn() {
my ($name, $d, $room, $pageHash) = @_;
my $hash = $defs{$name};
return DashboardAsHtml($d);
#return DashboardAsHtml($d); #creates confusion and leads to incorrect storage of items
return;
}
sub Dashboard_Attr($$$) {
my ($cmd, $name, $attrName, $attrVal) = @_;
#if ($cmd eq "set") {
# $dashboarddata{$attrName} = $attrVal;
# Log 1, "[DASHBOARD simple debug] ".$attrName." - ".$attrVal;
# }
return;
}
1;
@ -467,7 +639,7 @@ sub Dashboard_detailFn() {
define anyViews Dashboard<br>
attr anyViews dashboard_colcount 2<br>
attr anyViews dashboard_colwidth 400<br>
attr anyViews dashboard_groups &lt;Group1&gt;,&lt;Group2&gt;,&lt;Group3&gt;<br>
attr anyViews dashboard_tab1groups &lt;Group1&gt;,&lt;Group2&gt;,&lt;Group3&gt;<br>
attr anyViews dashboard_lockstate unlock<br>
attr anyViews dashboard_showhelper 1<br>
</code>
@ -486,15 +658,76 @@ sub Dashboard_detailFn() {
<a name="Dashboardattr"></a>
<h4>Attributes</h4>
<a name="dashboard_tabcount"></a>
<li>dashboard_tabcount<br>
Returns the number of displayed tabs.
Default: 1
</li><br>
<a name="dashboard_activetab"></a>
<li>dashboard_activetab<br>
Specifies which tab is activated. Can be set manually, but is also set by the switch "Set" to the currently active tab.
Default: 1
</li><br>
<a name="dashboard_tab1name"></a>
<li>dashboard_tab1name<br>
Title of Tab 1.
Default: Dashboard-Tab 1
</li><br>
<a name="dashboard_tab2name"></a>
<li>dashboard_tab2name<br>
Title of Tab 2.
Default: Dashboard-Tab 2
</li><br>
<a name="dashboard_tab3name"></a>
<li>dashboard_tab3name<br>
Title of Tab 3.
Default: Dashboard-Tab 3
</li><br>
<a name="dashboard_tab4name"></a>
<li>dashboard_tab4name<br>
Title of Tab 4.
Default: Dashboard-Tab 4
</li><br>
<a name="dashboard_tab5name"></a>
<li>dashboard_tab5name<br>
Title of Tab 5.
Default: Dashboard-Tab 5
</li><br>
<a name="dashboard_sorting"></a>
<li>dashboard_sorting<br>
Contains the position of each group. Value is written by the "Set" button. It is not recommended to take manual changes.
This attribute is no longer used and will be removed at a later date. It was replaced with <br>
dashboard_tab1sorting, dashboard_tab2sorting, dashboard_tab3sorting, dashboard_tab4sorting, dashboard_tab5sorting
</li><br>
<a name="dashboard_tab1sorting"></a>
<li>dashboard_tab1sorting<br>
Contains the position of each group in Tab 1. Value is written by the "Set" button. It is not recommended to take manual changes.
</li><br>
<a name="dashboard_tab2sorting"></a>
<li>dashboard_tab2sorting<br>
Contains the position of each group in Tab 2. Value is written by the "Set" button. It is not recommended to take manual changes.
</li><br>
<a name="dashboard_tab3sorting"></a>
<li>dashboard_tab3sorting<br>
Contains the position of each group in Tab 3. Value is written by the "Set" button. It is not recommended to take manual changes.
</li><br>
<a name="dashboard_tab4sorting"></a>
<li>dashboard_tab4sorting<br>
Contains the position of each group in Tab 4. Value is written by the "Set" button. It is not recommended to take manual changes.
</li><br>
<a name="dashboard_tab5sorting"></a>
<li>dashboard_tab5sorting<br>
Contains the position of each group in Tab 5. Value is written by the "Set" button. It is not recommended to take manual changes.
</li><br>
<a name="dashboard_row"></a>
<li>dashboard_row<br>
To select which rows are displayed. top only; center only; bottom only; top and center; center and bottom; top,center and bottom.<br>
Default: center
</li><br>
</li><br>
<a name="dashboard_width"></a>
<li>dashboard_width<br>
To determine the Dashboardwidth. The value can be specified, or an absolute width value (eg 1200) in pixels in% (eg 80%).<br>
Default: 100%
</li><br>
<a name="dashboard_colwidth"></a>
<li>dashboard_colwidth<br>
Width of each column in which the groups may be positioned. <br>
@ -502,23 +735,49 @@ sub Dashboard_detailFn() {
</li><br>
<a name="dashboard_colheight"></a>
<li>dashboard_colheight<br>
Height of each column in which the groups may be positioned. <br>
Default: 400
This attribute is no longer used and will be removed at a later date. It was replaced with <br>
dashboard_rowcenterheight
</li><br>
<a name="dashboard_rowcenterheight"></a>
<li>dashboard_rowcenterheight<br>
Height of the center row in which the groups may be positioned. <br>
Default: 400
</li><br>
<a name="dashboard_rowtopheight"></a>
<li>dashboard_rowtopheight<br>
Height of the top row in which the groups may be positioned. <br>
Default: 250
</li><br>
<a name=""dashboard_rowbottomheight"></a>
<a name="dashboard_rowbottomheight"></a>
<li>"dashboard_rowbottomheight<br>
Height of the bottom row in which the groups may be positioned.<br>
Default: 250
</li><br>
<a name="dashboard_groups"></a>
<li>dashboard_groups<br>
Comma-separated list of the names of the groups to be displayed.
This attribute is no longer used and will be removed at a later date. It was replaced with <br>
dashboard_tab1groups, dashboard_tab2groups, dashboard_tab3groups, dashboard_tab4groups, dashboard_tab5groups
</li><br>
<a name="dashboard_tab1groups"></a>
<li>dashboard_tab1groups<br>
Comma-separated list of the names of the groups to be displayed in Tab 1.
</li><br>
<a name="dashboard_tab2groups"></a>
<li>dashboard_tab1groups<br>
Comma-separated list of the names of the groups to be displayed in Tab 2.
</li><br>
<a name="dashboard_tab3groups"></a>
<li>dashboard_tab1groups<br>
Comma-separated list of the names of the groups to be displayed in Tab 3.
</li><br>
<a name="dashboard_tab4groups"></a>
<li>dashboard_tab1groups<br>
Comma-separated list of the names of the groups to be displayed in Tab 4.
</li><br>
<a name="dashboard_tab5groups"></a>
<li>dashboard_tab1groups<br>
Comma-separated list of the names of the groups to be displayed in Tab 5.
</li><br>
<a name="dashboard_lockstate"></a>
<li>dashboard_lockstate<br>
When set to "unlock" you can edit the Dashboard. When set to "lock" no change can be made. <br>
@ -580,7 +839,7 @@ sub Dashboard_detailFn() {
define anyViews Dashboard<br>
attr anyViews dashboard_colcount 2<br>
attr anyViews dashboard_colwidth 400<br>
attr anyViews dashboard_groups &lt;Group1&gt;,&lt;Group2&gt;,&lt;Group3&gt;<br>
attr anyViews dashboard_tab1groups &lt;Group1&gt;,&lt;Group2&gt;,&lt;Group3&gt;<br>
attr anyViews dashboard_lockstate unlock<br>
attr anyViews dashboard_showhelper 1<br>
</code>
@ -599,15 +858,76 @@ sub Dashboard_detailFn() {
<a name="Dashboardattr"></a>
<h4>Attributes</h4>
<a name="dashboard_tabcount"></a>
<li>dashboard_tabcount<br>
Gibt die Anzahl der angezeigten Tabs an.
Default: 1
</li><br>
<a name="dashboard_activetab"></a>
<li>dashboard_activetab<br>
Gibt an welches Tab aktiviert ist. Kann manuell gesetzt werden, wird aber auch durch den Schalter "Set" auf das gerade aktive Tab gesetzt.
Default: 1
</li><br>
<a name="dashboard_tab1name"></a>
<li>dashboard_tab1name<br>
Titel des 1. Tab.
Default: Dashboard-Tab 1
</li><br>
<a name="dashboard_tab2name"></a>
<li>dashboard_tab2name<br>
Titel des 2. Tab.
Default: Dashboard-Tab 2
</li><br>
<a name="dashboard_tab3name"></a>
<li>dashboard_tab3name<br>
Titel des 3. Tab.
Default: Dashboard-Tab 3
</li><br>
<a name="dashboard_tab4name"></a>
<li>dashboard_tab4name<br>
Titel des 4. Tab.
Default: Dashboard-Tab 4
</li><br>
<a name="dashboard_tab5name"></a>
<li>dashboard_tab5name<br>
Titel des 5. Tab.
Default: Dashboard-Tab 5
</li><br>
<a name="dashboard_sorting"></a>
<li>dashboard_sorting<br>
Enthält die Poistionierung jeder Gruppe. Der Wert wird mit der Schaltfläche "Set" geschrieben. Es wird nicht empfohlen dieses Attribut manuelle zu ändern
Dieses Attribut ist nicht mehr zu verwenden und wird zu einem späteren Zeitpunkt entfernt. Es wurde ersetzt durch <br>
dashboard_tab1sorting, dashboard_tab2sorting, dashboard_tab3sorting, dashboard_tab4sorting, dashboard_tab5sorting
</li><br>
<a name="dashboard_tab1sorting"></a>
<li>dashboard_tab1sorting<br>
Enthält die Poistionierung jeder Gruppe im Tab 1. Der Wert wird mit der Schaltfläche "Set" geschrieben. Es wird nicht empfohlen dieses Attribut manuelle zu ändern
</li><br>
<a name="dashboard_tab2sorting"></a>
<li>dashboard_tab2sorting<br>
Enthält die Poistionierung jeder Gruppe im Tab 2. Der Wert wird mit der Schaltfläche "Set" geschrieben. Es wird nicht empfohlen dieses Attribut manuelle zu ändern
</li><br>
<a name="dashboard_tab3sorting"></a>
<li>dashboard_tab3sorting<br>
Enthält die Poistionierung jeder Gruppe im Tab 3. Der Wert wird mit der Schaltfläche "Set" geschrieben. Es wird nicht empfohlen dieses Attribut manuelle zu ändern
</li><br>
<a name="dashboard_tab4sorting"></a>
<li>dashboard_tab4sorting<br>
Enthält die Poistionierung jeder Gruppe im Tab 4. Der Wert wird mit der Schaltfläche "Set" geschrieben. Es wird nicht empfohlen dieses Attribut manuelle zu ändern
</li><br>
<a name="dashboard_tab5sorting"></a>
<li>dashboard_tab5sorting<br>
Enthält die Poistionierung jeder Gruppe im Tab 5. Der Wert wird mit der Schaltfläche "Set" geschrieben. Es wird nicht empfohlen dieses Attribut manuelle zu ändern
</li><br>
<a name="dashboard_row"></a>
<li>dashboard_row<br>
Auswahl welche Zeilen angezeigt werden sollen. top (nur Oben), center (nur Mitte), bottom (nur Unten) und den Kombinationen daraus.<br>
Standard: center
</li><br>
</li><br>
<a name="dashboard_width"></a>
<li>dashboard_width<br>
Zum bestimmen der Dashboardbreite. Der Wert kann in % (z.B. 80%) angegeben werden oder als absolute Breite (z.B. 1200) in Pixel.<br>
Standard: 100%
</li><br>
<a name="dashboard_colwidth"></a>
<li>dashboard_colwidth<br>
Breite der Spalte, in der die Gruppen angeordnet werden. Gilt für "dashboard_row center, top-center-bottom, center-bottom".<br>
@ -616,7 +936,12 @@ sub Dashboard_detailFn() {
</li><br>
<a name="dashboard_colheight"></a>
<li>dashboard_colheight<br>
Höhe der Spalten, in der die Gruppen angeordnet werden. Gilt nur für "dashboard_row center, top-center-bottom, center-bottom". <br>
Dieses Attribut ist nicht mehr zu verwenden und wird zu einem späteren Zeitpunkt entfernt. Es wurde ersetzt durch <br>
dashboard_rowcenterheight
</li><br>
<a name="dashboard_rowcenterheight"></a>
<li>dashboard_rowcenterheight<br>
Höhe der mittleren Zeile, in der die Gruppen angeordnet werden. <br>
Standard: 400
</li><br>
<a name="dashboard_rowtopheight"></a>
@ -624,14 +949,35 @@ sub Dashboard_detailFn() {
Höhe der oberen Zeile, in der die Gruppen angeordnet werden. <br>
Standard: 250
</li><br>
<a name=""dashboard_rowbottomheight"></a>
<a name="dashboard_rowbottomheight"></a>
<li>"dashboard_rowbottomheight<br>
Höhe der unteren Zeile, in der die Gruppen angeordnet werden.<br>
Standard: 250
</li><br>
<a name="dashboard_groups"></a>
<li>dashboard_groups<br>
Durch Komma getrennte Liste mit den Namen der Gruppen, die angezeigt werden. Falsche Gruppennamen werden hervorgehoben.
Dieses Attribut ist nicht mehr zu verwenden und wird zu einem späteren Zeitpunkt entfernt. Es wurde ersetzt durch <br>
dashboard_tab1groups, dashboard_tab2groups, dashboard_tab3groups, dashboard_tab4groups, dashboard_tab5groups.
</li><br>
<a name="dashboard_tab1groups"></a>
<li>dashboard_tab1groups<br>
Durch Komma getrennte Liste mit den Namen der Gruppen, die im Tab 1 angezeigt werden. Falsche Gruppennamen werden hervorgehoben.
</li><br>
<a name="dashboard_tab2groups"></a>
<li>dashboard_tab2groups<br>
Durch Komma getrennte Liste mit den Namen der Gruppen, die im Tab 2 angezeigt werden. Falsche Gruppennamen werden hervorgehoben.
</li><br>
<a name="dashboard_tab3groups"></a>
<li>dashboard_tab3groups<br>
Durch Komma getrennte Liste mit den Namen der Gruppen, die im Tab 3 angezeigt werden. Falsche Gruppennamen werden hervorgehoben.
</li><br>
<a name="dashboard_tab4groups"></a>
<li>dashboard_tab4groups<br>
Durch Komma getrennte Liste mit den Namen der Gruppen, die im Tab 4 angezeigt werden. Falsche Gruppennamen werden hervorgehoben.
</li><br>
<a name="dashboard_tab5groups"></a>
<li>dashboard_tab5groups<br>
Durch Komma getrennte Liste mit den Namen der Gruppen, die im Tab 5 angezeigt werden. Falsche Gruppennamen werden hervorgehoben.
</li><br>
<a name="dashboard_lockstate"></a>
<li>dashboard_lockstate<br>

293
fhem/www/pgm2/dashboard.js
View File

@ -4,111 +4,137 @@
// Released : 14.11.2013 @svenson08
// Version : 1.00
// Revisions:
// 0001: Released to testers
// 0002: Add DebugMsg. Fix independent Groupsize adjustment after set & siterefresh. Fix
// wrong set of +Toogle Icon on Siderefresh
//
// 1.01: Released to testers
// 1.02: Add DebugMsg. Fix independent Groupsize adjustment after set & siterefresh. Fix
// wrong set of +Toogle Icon on Siderefresh
// 2.00: First Changes vor Dashboard Tabs. Change method store Positiondata. optimization restore Positiondata. Clear poor routines.
// Change max/min Values for Groupresize. Top- and Bottom-Row always 100%
// Known Bugs/Todo's
// See 95_Dashboard.pm
//########################################################################################
//########################################################################################
function saveOrder() {
var SaveResult = "";
//------------- Build new Position string ---------------
var EndSaveResult = "";
var ActiveTab = $("#tabs .ui-tabs-panel:visible").attr("id").substring(14,13);
//------------------- Build new Position string ----------------------
$(".dashboard_column").each(function(index, value){
var colid = value.id;
var order = $('#' + colid).sortable("toArray");
for ( var i = 0, n = order.length; i < n; i++ ) {
var v = $('#' + order[i]).find('.dashboard_content').is(':visible');
var w = $('#' + order[i]).outerWidth();
if ( $('#' + order[i]).find(".dashboard_content").data("userheight") == null ) {
var h = $('#' + order[i]).outerHeight();
} else {
var h = $('#' + order[i]).find(".dashboard_content").data("userheight");
if (h.length == 0) { var h = $('#' + order[i]).outerHeight(); }
var SaveResult = "";
var neworder = $('#' + colid).sortable("toArray");
for ( var i = 0, n = neworder.length; i < n; i++ ) {
var tab = $('#' + neworder[i]).parent().attr("id").substring(14,13);
var column = $('#' + neworder[i]).parent().attr("id").substring(20);
if (ActiveTab == tab) {
var groupdata = ($('#' + neworder[i]).data("groupwidget").split(",")); //get curren Group-Configuration
if (groupdata[1] != ''){
groupdata[0] = "t"+tab+"c"+$('#' + neworder[i]).parent().attr("id").substring(20);
groupdata[2] = $('#' + neworder[i]).find('.dashboard_content').is(':visible');
groupdata[3] = $('#' + neworder[i]).outerWidth();
if (groupdata[4] == 0) {groupdata[4] = $('#' + neworder[i]).outerHeight();}
if (groupdata[2] == true) {
groupdata[4] = $('#' + neworder[i]).outerHeight();
$('#' + neworder[i]).find(".dashboard_content").data("userheight", $('#' + neworder[i]).outerHeight());
}
$(neworder[i]).data("groupwidget",groupdata); //store in current Widget
SaveResult = SaveResult+groupdata+":";
}
}
order[i] = order[i]+","+v+","+h+","+w;
}
SaveResult = SaveResult + index+','+order+':';
//Result: <ColumNumber>,<portlet-1>,<status>,<height>,<width>,<portlet-n>,<status>,<height>,<width>:<columNumber.....
}
if (SaveResult != ""){ EndSaveResult = EndSaveResult + SaveResult; } //NewResult: <tab><column>,<portlet-1>,<status>,<height>,<width>,<portlet-n>,<status>,<height>,<width>:<columNumber.....
});
//-------------------------------------------------------
//------------ Set the new href String ------------------
document.getElementById("dashboard_currentsorting").value = SaveResult;
if (document.getElementById("dashboard_button_set")) {
document.getElementById("dashboard_button_set").classList.add('dashboard_button_changed'); //Mark that the Changes are not saved
}
//-------------------------------------------------------
//------------------------------------------------------------------------
//--------------------- Store new Positions ------------------------
if (EndSaveResult != "") { $("#tabs .ui-tabs-panel:visible").data("tabwidgets",EndSaveResult); } //store widgetposition in active tab Widget
document.getElementById("dashboard_button_set").classList.add('dashboard_button_changed'); //Mark that the Changes are not saved
//------------------------------------------------------------------------
}
function restoreOrder() {
$(".dashboard_column").each(function(index, value) {
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
var coldata = (document.getElementById("dashboard_currentsorting").value).split(":"); //get the position string from the hiddenfield
var rowwidth = params[7] * params[1];
//------------------------------------------------------------
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
var ActiveTab = $("#tabs .ui-tabs-panel:visible");
var ActiveTabId = ActiveTab.attr("id").substring(14,13);
var colwidth = ((100/params[7])-(0.5/params[7]))+"%"; //current
//var aColWidth = GetColWidth(params[7],params[12]); //future
$(".dashboard_column").width(params[1]); //Set Columwidth
$(".ui-row").width(rowwidth); //Set Rowwidth
if (value.id == "sortablecolumn100") { //Set RowHeight
$('#' + value.id).height(params[8]);
$('#' + value.id).width(rowwidth);
var widgetmaxwidth = rowwidth;
} else {
if (value.id == "sortablecolumn200") {
$('#' + value.id).height(params[9]);
$('#' + value.id).width(rowwidth);
var widgetmaxwidth = rowwidth;
} else {
$('#' + value.id).height(params[5]);
var widgetmaxwidth = params[1];
}
}
//--------------------------------------------- Set Row and Column Settings --------------------------------------------------------------------------------------------
$("#dashboard").width(params[1]);
if (ActiveTab.has("#dashboard_rowtop_tab"+ActiveTabId).length){ $("#dashboard_rowtop_tab"+ActiveTabId).height(params[8]); }
if (ActiveTab.has("#dashboard_rowcenter_tab"+ActiveTabId).length){ $("#dashboard_rowcenter_tab"+ActiveTabId).height(params[5]); }
if (ActiveTab.has("#dashboard_rowbottom_tab"+ActiveTabId).length){ $("#dashboard_rowbottom_tab"+ActiveTabId).height(params[9]); }
for (var i = 0, n = params[7]; i <= n; i++) {
if (ActiveTab.has("#dashboard_tab"+ActiveTabId+"column"+i).length) { $("#dashboard_tab"+ActiveTabId+"column"+i).width(colwidth); } //current
//if (ActiveTab.has("#dashboard_tab"+ActiveTabId+"column"+i).length) { $("#dashboard_tab"+ActiveTabId+"column"+i).width(aColWidth[i]+"%"); } //future
}
if (params[2] == 1) { $(".ui-row").addClass("dashboard_columnhelper"); } else { $(".ui-row").removeClass("dashboard_columnhelper"); }//set showhelper
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
$(".dashboard_widget").each(function(index, value) {
var groupdata = $(this).data("groupwidget").split(","); //get the position string from the data
var TabId = groupdata[0].substring(1,2);
var ColumnId = groupdata[0].substring(3,groupdata[0].length);
if (params[2] == 1) { $(".dashboard_column").addClass("dashboard_columnhelper"); } else { $(".dashboard_column").removeClass("dashboard_columnhelper"); }//set helperclass
if (TabId == ActiveTabId){ //Restore only for the current active tab
var groupname = groupdata[1];
var visible = groupdata[2];
var width = groupdata[3];
var height = groupdata[4];
for (var i = 0, n = coldata.length; i < n; i++ ) { //for each column (Value = 1,name1,state1,name2,state2)
var portletsdata = coldata[i].split(","); //protlet array / all portlets in this (=index) column
//---------- Max. Width of an Group. Reduce group-with if need | Min. Width if need ----------
var widgetmaxwidth = $(this).parent().width();
if (width == 0) { width = $(this).find(".dashboard_content").children().outerWidth()+10;}
if (width > widgetmaxwidth) {width = widgetmaxwidth}; //width is =< columnwith
$(this).outerWidth(width);
//---------------------------------------------------------------------------------------------------------------
//-------------------------------- Height of an Group. | Min. Height if need ---------------------------
if (height == 0) { height = $(this).outerHeight();}
if ($(this).outerHeight() > height) {$(this).outerHeight(height); } //set heigh only if > group min. height
//---------------------------------------------------------------------------------------------------------------
//alert("Load Event (1) \nColumn="+index+"\nSaveResult="+coldata+"\nColumndata=("+i+"/"+coldata.length+") "+portletsdata);
for (var j = 1, m = portletsdata.length; j < m; j += 4 ) {
//alert("Load Event (2) \nColumn="+index+"\nSaveResult="+coldata+"\nColumndata=("+i+"/"+coldata.length+"|"+j+"/"+portletsdata.length+") "+portletsdata+
//"\n\nPortletdata (ID)="+portletsdata[j]+"\nPortletdata (Visible)="+portletsdata[j+1]+"\nPortletheight (Height)="+portletsdata[j+2]+"\nPortletwidth (Width)="+portletsdata[j+3]);
if (portletsdata[0] == index && portletsdata[0] != '' && portletsdata[j] != '' && portletsdata[j+1] != '') {
var portletID = portletsdata[j];
var visible = portletsdata[j+1];
var height = portletsdata[j+2]-5; //( limited -5 by CSS)
var width = portletsdata[j+3]-5; //( limited -5 by CSS)
if (width > widgetmaxwidth) {width = widgetmaxwidth}; //Fix with ist widget width > current column width.
var portlet = $(".dashboard_column").find('#' + portletID);
portlet.appendTo($('#' + value.id));
portlet.outerHeight(height);
portlet.outerWidth(width);
if (params[2] == 1) { portlet.addClass("dashboard_widgethelper"); } else { portlet.removeClass("dashboard_widgethelper"); }//Show Widget-Helper Frame
if (visible === 'false') {
if (portlet.find(".dashboard_widgetheader").find(".dashboard_button_icon").hasClass("dashboard_button_iconminus")) {
portlet.find(".dashboard_widgetheader").find(".dashboard_button_icon").removeClass( "dashboard_button_iconminus" );
portlet.find(".dashboard_widgetheader").find(".dashboard_button_icon").addClass( "dashboard_button_iconplus" );
}
var currHeigth = Math.round(portlet.height());
portlet.find(".dashboard_content").data("userheight", currHeigth);
portlet.find(".dashboard_content").hide();
var newHeigth = portlet.find(".dashboard_widgetinner").height()+5;
portlet.height(newHeigth);
}
}
}
}
});
$(this).find(".dashboard_content").data("userheight", height-5);
if (params[2] == 1) { $(this).addClass("dashboard_widgethelper"); } else { $(this).removeClass("dashboard_widgethelper"); }//Show Widget-Helper Frame
if (visible === 'false') {
if ($(this).find("span").hasClass("dashboard_button_iconminus")){
$(this).find("span")
.removeClass( "dashboard_button_iconminus" )
.addClass( "dashboard_button_iconplus" );
}
$(this).find(".dashboard_content").hide();
$(this).height($(this).find(".dashboard_widgetinner").height()+5);
}
}
});
}
function GetColWidth(ColCount, ColWidth){
var aColWidth = ColWidth.replace(/%/g, "").split(":");
if (aColWidth.length > ColCount) { aColWidth.length = ColCount; }
if (aColWidth.length < ColCount) { for (var i = aColWidth.length; i < ColCount; i++) { aColWidth[i] = "20"; } } //fill missin width parts with 20%
var ColWidthCount = aColWidth.length;
var ColWidthSum = 0;
for (var i = 0; i < ColWidthCount; i++) { ColWidthSum = parseInt(aColWidth[i]) + ColWidthSum; }
if (ColWidthSum > 100) { //reduce width down to 100%
while (ColWidthSum > 100){
ColWidthSum = 0;
for (var i = 0; i < ColWidthCount; i++) {
if (parseInt(aColWidth[i]) > 10) { aColWidth[i] = parseInt(aColWidth[i])-1; }
ColWidthSum = parseInt(aColWidth[i]) + ColWidthSum;
}
}
}
if (ColWidthSum < 100) { aColWidth[ColWidthCount-1] = parseInt(aColWidth[ColWidthCount-1]) + (100 - ColWidthSum); } //fill up to 100% width
aColWidth[0] = parseInt(aColWidth[0])-(0.2 * ColCount);
return aColWidth;
}
//Only use for debugging
function showdebugMessage(msg){
document.getElementById("dashboard_jsdebug").value = document.getElementById("dashboard_jsdebug").value+" "+msg;
document.getElementById("dashboard_jsdebug").value = msg;
}
function dashboard_tooglelock(){
@ -144,66 +170,69 @@ function dashboard_unsetlock(){
$( ".dashboard_column" ).sortable( "option", "disabled", false );
if (params[2] == 1) { $( ".dashboard_widget" ).addClass("dashboard_widgethelper"); } else { $( ".dashboard_widget" ).removeClass("dashboard_widgethelper"); }//Show Widget-Helper Frame
if (params[2] == 1) { $( ".dashboard_column" ).addClass("dashboard_columnhelper"); } else { $( ".dashboard_column" ).removeClass("dashboard_columnhelper"); }//Show Widget-Helper Frame
dashboard_modifyWidget();
//############################################################
}
function dashboard_setposition(){
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
var sorting = document.getElementById("dashboard_currentsorting").value;
FW_cmd(document.location.pathname+'?XHR=1&cmd.'+params[0]+'=attr '+params[0]+' dashboard_sorting '+sorting);
document.getElementById("dashboard_button_set").classList.remove('dashboard_button_changed');
function dashboard_setposition(){
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
//------------------- store group position ----------------------------
for (var i = 0, n = params[10]; i < n; i++ ) {
if ($("#dashboard_tab"+i).data("tabwidgets") != null) {
var j = i+1;
FW_cmd(document.location.pathname+'?XHR=1&cmd.'+params[0]+'=attr '+params[0]+' dashboard_tab'+j+'sorting '+$("#dashboard_tab"+i).data("tabwidgets"));
}
}
document.getElementById("dashboard_button_set").classList.remove('dashboard_button_changed');
//---------------------------------------------------------------------
//--------------------- store active Tab ------------------------------
var activeTab = ($( "#tabs" ).tabs( "option", "active" ))+1;
if (params[11] != activeTab){
FW_cmd(document.location.pathname+'?XHR=1&cmd.'+params[0]+'=attr '+params[0]+' dashboard_activetab '+activeTab);
}
//---------------------------------------------------------------------
}
function dashboard_modifyWidget(){
$( ".dashboard_widget" ).resizable({
'grid': 1,
'minWidth': 150,
'grid': 5,
start: function(e, ui) {
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
//-------- Widgetbegrenzung festlegen -------------------
var rowid = $(this).parent().attr("id");
if (rowid == "sortablecolumn100") {
var widgetmaxwidth = (params[7] * params[1]) - 5;
var widgetmaxheight = params[8] - 5;
}
else { if (rowid == "sortablecolumn200") {
var widgetmaxwidth = (params[7] * params[1]) - 5;
var widgetmaxheight = params[9] -5 ;
}
else {
var widgetmaxwidth = params[1] - 5;
var widgetmaxheight = params[5] -5;
}
}
//-------------------------------------------------------
var groupdata = $(this).data("groupwidget").split(","); //get the position string from the data
var TabId = $(this).parent().attr("id").substring(14,13);
var ColumnId = $(this).parent().attr("id").substring(20);
var widgetmaxwidth = $(this).parent().width();
if (ColumnId == "100") { var widgetmaxheight = params[8]; }
if ((ColumnId != "100") && (ColumnId != "200")) { var widgetmaxheight = params[5]; }
if (ColumnId == "200") { var widgetmaxheight = params[9]; }
maxWidthOffset = widgetmaxwidth;
$(this).resizable("option","maxWidth",widgetmaxwidth);
$(this).resizable("option","maxWidth",widgetmaxwidth-5);
$(this).resizable("option","maxHeight",widgetmaxheight);
},
resize: function(e, ui) {
minHeightOffset = $(this).find(".dashboard_widgetinner").height()+5;
ui.size.width = Math.round(ui.size.width);
if (ui.size.width > (maxWidthOffset)) { $(this).resizable("option","maxWidth",maxWidthOffset); }
if (ui.size.height < (minHeightOffset)) { $(this).resizable("option","minHeight",minHeightOffset); }
if ($(this).find(".dashboard_widgetheader").outerWidth() < $(this).find(".dashboard_content").children().outerWidth()) {$(this).resizable("option","minWidth", $(this).find(".dashboard_content").children().outerWidth()+5 ); }
if ($(this).find(".dashboard_widget").outerHeight() < $(this).find(".dashboard_widgetinner").outerHeight()) { $(this).resizable("option","minHeight", $(this).find(".dashboard_widgetinner").outerHeight()); }
},
stop: function() {
minHeightOffset = $(this).find(".dashboard_widgetinner").height()+5;
$(this).resizable("option","minHeight",minHeightOffset);
saveOrder();
}
});
}
$(document).ready( function () {
//--------------------------------- Attribute des Dashboards ------------------------------------------------------------------
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
//-------------------------------------------------------------------------------------------------------------------------------------
$(".dashboard_column").sortable({
connectWith: ['.dashboard_column', '.ui-row'],
cursor: 'move',
stop: function() { saveOrder(); }
});
if (params[4] == 0){ //set if buttonbar not show
dashboard_modifyWidget();
dashboard_setlock();
@ -211,7 +240,7 @@ $(document).ready( function () {
if (params[6] == 1){ //ToogleButton show/hide
$(".dashboard_widget")
.addClass( "dashboard_widget dashboard_content ui-corner-all" )
.addClass( "dashboard_widget ui-corner-all" )
.find(".dashboard_widgetheader")
.addClass( "dashboard_widgetheader ui-corner-all" )
.prepend('<span class="dashboard_button_icon dashboard_button_iconminus"></span>')
@ -222,16 +251,21 @@ $(document).ready( function () {
$(this).removeClass( "dashboard_button_iconplus" );
$(this).addClass( "dashboard_button_iconminus" );
$(this).parents(".dashboard_widget:first").find(".dashboard_content").show();
var newHeigth = $(this).parents(".dashboard_widget:first").find(".dashboard_content").data("userheight");
var newHeigth = $(this).parents(".dashboard_widget:first").find(".dashboard_content").data("userheight");
//-------- set heigh only if > group min. height -------------
if ($(this).parents(".dashboard_widgetinner").outerHeight() > newHeigth) {
$(this).parents(".dashboard_widget:first").outerHeight($(this).parents(".dashboard_widgetinner").outerHeight()+10);
} else { $(this).parents(".dashboard_widget:first").outerHeight(newHeigth);}
//------------------------------------------------------------
} else {
$(this).removeClass( "dashboard_button_iconminus" );
$(this).addClass( "dashboard_button_iconplus" );
var currHeigth = Math.round($(this).parents(".dashboard_widget:first").height());
$(this).parents(".dashboard_widget:first").find(".dashboard_content").data("userheight", currHeigth);
$(this).parents(".dashboard_widget:first").find(".dashboard_content").hide();
var newHeigth = $(this).parents(".dashboard_widget:first").find(".dashboard_widgetinner").height()+5;
var newHeigth = $(this).parents(".dashboard_widget:first").find(".dashboard_widgetinner").height()+5;
$(this).parents(".dashboard_widget:first").height(newHeigth);
}
$(this).parents(".dashboard_widget:first").height(newHeigth);
saveOrder();
event.stopImmediatePropagation();
});
@ -254,17 +288,26 @@ $(document).ready( function () {
dashboard_modifyWidget();
if (params[3] == "lock") {
$(this).button( "option", "label", "Unlock" );
dashboard_setlock();
dashboard_setlock();
} else {
$(this).button( "option", "label", "Lock" );
dashboard_unsetlock();
dashboard_unsetlock();
}
}
});
restoreOrder();
//--------------------------------- Dashboard Tabs ------------------------------------------------------------------------------
$("#tabs").tabs({
active: 0,
create: function(event, ui) {
$( "#tabs" ).tabs( "option", "active", params[11]-1 ); //set active Tab
restoreOrder();
},
activate: function (event, ui) {
restoreOrder();
}
});
//-------------------------------------------------------------------------------------------------------------------------------------
});

46
fhem/www/pgm2/dashboard_darkstyle.css
View File

@ -1,25 +1,27 @@
/* Author: svenson08*/
.dashboard_buttonbar { background: none repeat scroll 0 0 #333333; border: 1px solid #FFFFFF;
box-shadow: 5px 5px 5px #000000; padding: 4px; border-radius: 8px 8px 8px 8px; float: left;}
.dashboard_buttonbar { background: none repeat scroll 0 0 #111111; border: 1px solid #FFFFFF; padding: 4px; margin: 0 .5em 0 0.4em; float: left; }
.dashboard_buttonbar_top { border-bottom-width: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.dashboard_buttonbar_bottom { border-top-width: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 5px 5px 5px #000000; }
.dashboard_button { border-radius: 8px; float: left; color: #1c94c4; font-weight: bold; font-size: 0.8em; background-repeat:no-repeat;
background-position: 4px 2px; border: 1px solid #cccccc; padding: 0.2em 0.7em 0.2em 0.4em; }
background-position: 4px 2px; border: 1px solid #cccccc; padding: 0.2em 0.7em 0.2em 0.4em; }
.dashboard_button_changed { color: red; font-weight:bold; }
.dashboard_column { float: left; }
.dashboard_columnhelper { border: 1px dotted #CCCCCC; }
.dashboard_widget { border-radius: 8px; float: left; }
.dashboard_widget { border-radius: 8px; float: left; padding: 0.2em;}
.dashboard_widgethelper { background-color: #111111; }
.dashboard_widgetheader { background: none repeat scroll 0 0 #333333; border: 1px solid #FFFFFF;
box-shadow: 5px 5px 5px #000000; border-radius: 8px; margin: 0.2em;
padding-bottom: 4px; padding-top: 3px; padding-left: 0.7em; }
box-shadow: 5px 5px 5px #000000; border-radius: 8px; margin: 0.2em;
padding-bottom: 4px; padding-top: 3px; padding-left: 0.7em; }
.dashboard_content { padding: 0.2em; }
.dashboard_button_icon { width: 13px; height: 14px; background-repeat: no-repeat;
float: left; background-image: url(../images/default/dashboardicons.png); }
float: left; background-image: url(../images/default/dashboardicons.png); }
.dashboard_button_iconplus { margin: 0.1em 0.4em; float: right; background-position: -65px 0px; }
.dashboard_button_iconminus { margin: 0.1em 0.4em; float: right; background-position: -52px 0px; }
.dashboard_button_iconset { background-position: -26px 0px; }
.dashboard_button_iconset { background-position: -26px 0px; }
.dashboard_button_iconlock { background-position: 0px 0px; }
.dashboard_button_iconunlock { background-position: -13px 0px; }
.dashboard_button_icondetail { background-position: -39px 0px; }
@ -27,7 +29,29 @@
.ui-resizable { position: relative; }
.ui-resizable-handle { position: absolute; font-size: 0.1px; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px;
bottom: 1px; background-image: url(../images/default/dashboardicons.png);
background-position: -78px 0px; background-repeat: no-repeat; }
bottom: 1px; background-image: url(../images/default/dashboardicons.png);
background-position: -78px 0px; background-repeat: no-repeat; }
.ui-sortable-placeholder { border: 1px dotted #FFFFFF; visibility: visible !important;
height: 25px !important; width: 150px; }
height: 25px !important; width: 150px; }
/* Neue CSS Einträge für Dashboard-Tabs */
.dashboard { padding: 0; margin: 0; }
.dashboard_tabnav { list-style: none; margin: 0; padding: 0 .5em 0; }
.dashboard_tabnav:before,
.dashboard_tabnav:after { content: ""; display: table; border-collapse: collapse; clear: both; }
.dashboard_tabpanel { border: 1px solid #cccccc; background-color: #333333; border: 1px solid #dddddd;
border-radius: 8px 8px 8px 8px; box-shadow: 5px 5px 5px #000000; }
.dashboard_tab { border: 1px solid #cccccc; border-bottom-width: 0; border-top-left-radius: 8px;
border-top-right-radius: 8px; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }
.dashboard_tab.ui-tabs-active { background-color: #333333; font-weight: bold; }
.dashboard_tabcontent { width: 100%; padding: 0; margin: 0; }
.dashboard_row { width: 100%; height: inherit; }
.dashboard_columncenter { height: inherit;}

40
fhem/www/pgm2/dashboard_ios7.css
View File

@ -1,25 +1,27 @@
/* Author: svenson08*/
.dashboard_buttonbar { background: none repeat scroll 0 0 #cbcbcb; border: 1px solid #d9d9d9;
padding: 4px; float: left;}
.dashboard_buttonbar { background: none repeat scroll 0 0 #a6a6a6; border: 1px solid #d9d9d9; padding: 6px; margin: 0 .5em 0 0.4em; float: left;}
.dashboard_buttonbar_top, .dashboard_buttonbar_bottom { border-bottom-width: 0; }
.dashboard_button { float: left; background-color: #fff; font-weight: bold; font-size: 0.8em; background-repeat:no-repeat;
background-position: 4px 2px; border: 1px solid #808080; padding: 0.2em 0.7em 0.2em 0.4em; }
.dashboard_button_changed { color: blue; font-weight:bold; }
background-position: 4px 2px; border: 1px solid #808080; padding: 0.2em 0.7em 0.2em 0.4em; }
.dashboard_button_changed { color: black; font-weight:bold; }
.dashboard_column { float: left; }
.dashboard_columnhelper { border: 1px dotted #808080; }
.dashboard_widget { float: left; }
.dashboard_widgethelper { background-color: #cbcbcb; }
.dashboard_widgetheader { background: none repeat scroll 0 0 #fff; border: 1px solid #d9d9d9;
margin: 0.2em;
padding-bottom: 2px; padding-top: 3px; padding-left: 0.2em; }
.dashboard_widgethelper { background-color: #a6a6a6; }
.dashboard_widgetheader { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #d9d9d9;
margin: 0.2em;
padding-bottom: 2px; padding-top: 3px; padding-left: 0.2em; }
.dashboard_content { padding: 0.2em; }
.dashboard_button_icon { width: 13px; height: 14px; background-repeat: no-repeat;
float: left; background-image: url(../images/default/dashboardicons.png); }
float: left; background-image: url(../images/default/dashboardicons.png); }
.dashboard_button_iconplus { margin: 0.1em 0.4em; float: right; background-position: -154px 0px; }
.dashboard_button_iconminus { margin: 0.1em 0.4em; float: right; background-position: -140px 0px; }
.dashboard_button_iconset { background-position: -116px 0px; }
.dashboard_button_iconset { background-position: -116px 0px; }
.dashboard_button_iconlock { background-position: -103px 0px; }
.dashboard_button_iconunlock { background-position: -91px 0px; }
.dashboard_button_icondetail { background-position: -128px 0px; }
@ -27,9 +29,21 @@
.ui-resizable { position: relative; }
.ui-resizable-handle { position: absolute; font-size: 0.1px; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px;
bottom: 1px; background-image: url(../images/default/dashboardicons.png);
background-position: -170px 0px; background-repeat: no-repeat; }
bottom: 1px; background-image: url(../images/default/dashboardicons.png);
background-position: -170px 0px; background-repeat: no-repeat; }
.ui-sortable-placeholder { border: 1px dotted #d9d9d9; visibility: visible !important;
height: 25px !important; width: 150px; }
height: 25px !important; width: 150px; }
/* Neue CSS Einträge für Dashboard-Tabs */
.dashboard { padding: 0; margin: 0; }
.dashboard_tabnav { list-style: none; margin: 0; padding: 0 .5em 0; }
.dashboard_tabnav:before,
.dashboard_tabnav:after { content: ""; display: table; border-collapse: collapse; clear: both; }
.dashboard_tabpanel { border: 1px solid #cccccc; background-color: #cbcbcb; }
.dashboard_tab { border: 1px solid #cccccc; border-bottom-width: 0; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }
.dashboard_tab.ui-tabs-active { background-color: #cbcbcb; font-weight: bold; }
.dashboard_tabcontent { width: 100%; padding: 0; margin: 0; }
.dashboard_row { width: 100%; height: inherit; }
.dashboard_columncenter { height: inherit;}

42
fhem/www/pgm2/dashboard_style.css
View File

@ -1,25 +1,27 @@
/* Author: svenson08*/
.dashboard_buttonbar { background: none repeat scroll 0 0 #F0F0D8; border: 1px solid #808080;
padding: 4px; border-radius: 8px 8px 8px 8px; float: left;}
.dashboard_button { border-radius: 8px; float: left; background-color: #FFFFE7; font-weight: bold; font-size: 0.8em; background-repeat:no-repeat;
background-position: 4px 2px; border: 1px solid #808080; padding: 0.2em 0.7em 0.2em 0.4em; }
.dashboard_buttonbar { background: none repeat scroll 0 0 #d3d3ad; border: 1px solid #808080;padding: 6px; margin: 0 .5em 0 0.4em;float: left; }
.dashboard_buttonbar_top { border-bottom-width: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.dashboard_buttonbar_bottom { border-top-width: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.dashboard_button { border-radius: 8px; float: left; color: #1c94c4; font-weight: bold; font-size: 0.8em; background-repeat:no-repeat;
background-position: 4px 2px; border: 1px solid #808080; padding: 0.2em 0.7em 0.2em 0.4em; }
.dashboard_button_changed { color: blue; font-weight:bold; }
.dashboard_column { float: left; }
.dashboard_columnhelper { border: 1px dotted #808080; }
.dashboard_widget { border-radius: 8px; float: left; }
.dashboard_widget { border-radius: 8px; float: left; padding: 0.2em;}
.dashboard_widgethelper { background-color: #A0FFFF; }
.dashboard_widgetheader { background: none repeat scroll 0 0 #F0F0D8; border: 1px solid #808080;
border-radius: 8px; margin: 0.2em;
padding-bottom: 2px; padding-top: 3px; padding-left: 0.2em; }
border-radius: 8px; margin: 0.2em;
padding-bottom: 4px; padding-top: 3px; padding-left: 0.7em; }
.dashboard_content { padding: 0.2em; }
.dashboard_button_icon { width: 13px; height: 14px; background-repeat: no-repeat;
float: left; background-image: url(../images/default/dashboardicons.png); }
float: left; background-image: url(../images/default/dashboardicons.png); }
.dashboard_button_iconplus { margin: 0.1em 0.4em; float: right; background-position: -154px 0px; }
.dashboard_button_iconminus { margin: 0.1em 0.4em; float: right; background-position: -140px 0px; }
.dashboard_button_iconset { background-position: -116px 0px; }
.dashboard_button_iconset { background-position: -116px 0px; }
.dashboard_button_iconlock { background-position: -103px 0px; }
.dashboard_button_iconunlock { background-position: -91px 0px; }
.dashboard_button_icondetail { background-position: -128px 0px; }
@ -27,7 +29,23 @@
.ui-resizable { position: relative; }
.ui-resizable-handle { position: absolute; font-size: 0.1px; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px;
bottom: 1px; background-image: url(../images/default/dashboardicons.png);
background-position: -170px 0px; background-repeat: no-repeat; }
bottom: 1px; background-image: url(../images/default/dashboardicons.png);
background-position: -170px 0px; background-repeat: no-repeat; }
.ui-sortable-placeholder { border: 1px dotted #808080; visibility: visible !important;
height: 25px !important; width: 150px; }
height: 25px !important; width: 150px; }
/* Neue CSS Einträge für Dashboard-Tabs */
.dashboard { padding: 0; margin: 0; }
.dashboard_tabnav { list-style: none; margin: 0; padding: 0 .5em 0; }
.dashboard_tabnav:before,
.dashboard_tabnav:after { content: ""; display: table; border-collapse: collapse; clear: both; }
.dashboard_tabpanel { border: 1px solid #cccccc; background-color: #F0F0D8; border: 1px solid #dddddd;
border-radius: 8px 8px 8px 8px; }
.dashboard_tab { border: 1px solid #cccccc; border-bottom-width: 0; border-top-left-radius: 8px;
border-top-right-radius: 8px; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }
.dashboard_tab.ui-tabs-active { background-color: #F0F0D8; font-weight: bold; }
.dashboard_tabcontent { width: 100%; padding: 0; margin: 0; }
.dashboard_row { width: 100%; height: inherit; }
.dashboard_columncenter { height: inherit;}