diff --git a/CHANGED b/CHANGED index 95610277a..3c317b4f6 100644 --- a/CHANGED +++ b/CHANGED @@ -1,6 +1,7 @@ # 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: Tabs can set on top, bottom or hidden. - bugfix: SYSMON: another format for ifconfig output - feature: DASHBOARD: Use longpoll to update content. rowcentercolwidth can now be defined per column. diff --git a/FHEM/95_Dashboard.pm b/FHEM/95_Dashboard.pm index 8899e648a..6f3297c66 100644 --- a/FHEM/95_Dashboard.pm +++ b/FHEM/95_Dashboard.pm @@ -4,8 +4,7 @@ # ######################################################################################## # Released : 20.12.2013 @svenson08 -# Version : 2.00 -# Revisions: +# Version : # 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). @@ -31,15 +30,11 @@ # Provisionally the columns widths are dependent on the total width of the Dashboard. # 2.01: attibute dashboard_colwidth replace with dashboard_rowcentercolwidth. rowcentercolwidth can now be defined per # column. Delete Groups Attribut with Value 1. Dashboard can hide FHEMWEB Roomliste and Header => Fullscreenmode +# 2.02: Tabs can set on top, bottom or hidden. Fix "variable $tabgroups masks earlier" Errorlog. # # Known Bugs/Todos: -# x TODO: groups attribut with value 1 -> erase attribute? -# x 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 # BUG: wenn ich mehrere Tabs habe und zb. im Uten Tab eine Lampe schalte, springt er danach direkt in den ersten Tab. Finde ich etwas unglücklich. # TODO: Icon on Tabs -# x NICETOHAVE: Ich würde mir jetzt noch wünschen, das ich den linken und oberen Bereich in einem Style ausblenden kann # Log 1, "[DASHBOARD simple debug] '".$g."' "; ######################################################################################## # @@ -84,7 +79,7 @@ my $fwjquery = "jquery.min.js"; my $fwjqueryui = "jquery-ui.min.js"; my $dashboardname = "Dashboard"; # Link Text my $dashboardhiddenroom = "DashboardRoom"; # Hiddenroom -my $dashboardversion = "2.01"; +my $dashboardversion = "2.02"; # ------------------------------------------------------------------------------------------- sub Dashboard_Initialize ($) { @@ -100,8 +95,7 @@ sub Dashboard_Initialize ($) { "dashboard_lockstate:unlock,lock ". "dashboard_rowtopheight ". "dashboard_rowbottomheight ". - "dashboard_row:top,center,bottom,top-center,center-bottom,top-center-bottom ". - "dashboard_showbuttonbar:top,bottom,hidden ". + "dashboard_row:top,center,bottom,top-center,center-bottom,top-center-bottom ". "dashboard_showhelper:0,1 ". "dashboard_showtooglebuttons:0,1 ". @@ -128,12 +122,15 @@ sub Dashboard_Initialize ($) { #new attribute vers. 2.01 "dashboard_rowcentercolwidth ". "dashboard_showfullsize:0,1 ". + #new attribute vers. 2.02 + "dashboard_showtabs:tabs-and-buttonbar-at-the-top,tabs-at-the-top-buttonbar-hidden,tabs-and-buttonbar-on-the-bottom,tabs-on-the-bottom-buttonbar-hidden,tabs-and-buttonbar-hidden ". #obsolete - erase in future releases "dashboard_groups ". # obsolet -> erase in future releases "dashboard_colheight ". # obsolet -> erase in future releases "dashboard_sorting ". # obsolet -> erase in future releases "dashboard_colwidth ". # obsolet -> erase in future releases + "dashboard_showbuttonbar:dont-use-this-attribute ". # obsolet -> erase in future releases $readingFnAttributes; @@ -141,29 +138,15 @@ sub Dashboard_Initialize ($) { $data{FWEXT}{Dashboardx}{LINK} = "?room=".$dashboardhiddenroom; $data{FWEXT}{Dashboardx}{NAME} = $dashboardname; - #$hash->{FW_detailFn} = "Dashboard_detailFn"; - #$hash->{FW_summaryFn} = "Dashboard_detailFn"; - return undef; } -#sub Dashboard_detailFn() -#{ -# my ($FW_wname, $d, $room, $pageHash) = @_; # pageHash is set for summaryFn. -# return NewDashboardAsHtml($d); -#} -#sub NewDashboardAsHtml($) -#{ -# my $ret = ""; -# $ret .= "\n"; -# $ret .= "
\n"; -#} - sub DashboardAsHtml($) { my ($d) = @_; my $ret = ""; + my $showbuttonbar = "hidden"; my $debugfield = "hidden"; my $h = $defs{$d}; @@ -173,16 +156,14 @@ sub DashboardAsHtml($) ######################### Read Dashboard Attributes and set Default-Values #################################### my $disable = AttrVal($defs{$d}{NAME}, "disable", 0); my $colcount = AttrVal($defs{$d}{NAME}, "dashboard_colcount", 1); - #my $colwidth = AttrVal($defs{$d}{NAME}, "dashboard_colwidth", 320); #current - my $colwidth = AttrVal($defs{$d}{NAME}, "dashboard_rowcentercolwidth", 100); #future + my $colwidth = AttrVal($defs{$d}{NAME}, "dashboard_rowcentercolwidth", 100); 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); - my $showbuttonbar = AttrVal($defs{$d}{NAME}, "dashboard_showbuttonbar", "top"); + my $showtabs = AttrVal($defs{$d}{NAME}, "dashboard_showtabs", "tabs-and-buttonbar-at-the-top"); my $showtooglebuttons = AttrVal($defs{$d}{NAME}, "dashboard_showtooglebuttons", 1); - my $showfullsize = AttrVal($defs{$d}{NAME}, "dashboard_showfullsize", 0); - + my $showfullsize = AttrVal($defs{$d}{NAME}, "dashboard_showfullsize", 0); my $row = AttrVal($defs{$d}{NAME}, "dashboard_row", "center"); my $debug = AttrVal($defs{$d}{NAME}, "dashboard_debug", "0"); @@ -229,12 +210,14 @@ sub DashboardAsHtml($) } if ($debug == 1) { $debugfield = "edit" }; + if ($showtabs eq "tabs-and-buttonbar-at-the-top") { $showbuttonbar = "top"; } + if ($showtabs eq "tabs-and-buttonbar-on-the-bottom") { $showbuttonbar = "bottom"; } if ($showbuttonbar eq "hidden") { $lockstate = "lock" }; + if ($activetab > $tabcount) { $activetab = $tabcount; } - $colwidth =~ tr/,/:/; #future release - #if (not ($colwidth =~ /^\d+$/)) { $colwidth = 320 }; #current - #if ( ($colwidth =~ /[a-zA-Z]/)) { $colwidth = 150 }; #current + $colwidth =~ tr/,/:/; + #if ($colwidth =~/[a-zA-Z]+$/) { Log 1, "[DASHBOARD simple debug] Nicht nur zahlen ".$colwidth; } #future release if (not ($colheight =~ /^\d+$/)) { $colheight = 400 }; if (not ($rowtopheight =~ /^\d+$/)) { $rowtopheight = 50 }; @@ -254,12 +237,16 @@ sub DashboardAsHtml($) $ret .= "\n"; $ret .= "\n"; $ret .= "\n"; - $ret .= "
\n"; + ########################### Dashboard Tab-Liste ############################################## - $ret .= " \n"; $ret .= "
\n"; } - if ($showbuttonbar eq "bottom") { $ret .= BuildButtonBar($d,$showbuttonbar); } $ret .= "\n"; $ret .= "\n"; @@ -334,12 +320,19 @@ sub BuildDashboardBottomRow($$$$){ sub BuildButtonBar($$){ my ($d,$pos) = @_; - my $ret; - $ret .= "
\n"; - $ret .= "
Set
\n"; - $ret .= "
Lock
\n"; - $ret .= "
Detail
\n"; - $ret .= "
\n"; + my $ret = ""; + my $cssclass = "hidden"; + + if ($pos eq "tabs-and-buttonbar-at-the-top") { $cssclass = "top"; } + if ($pos eq "tabs-and-buttonbar-on-the-bottom") { $cssclass = "bottom"; } + + if ($pos ne "hidden") { + $ret .= "
\n"; + $ret .= "
Set
\n"; + $ret .= "
Lock
\n"; + $ret .= "
Detail
\n"; + $ret .= "
\n"; + } return $ret; } @@ -505,22 +498,16 @@ sub CheckDashboardAttributUssage($) { # replaces old disused attributes and thei # ---------------- Delete empty Groups entries ---------------------------------------------------------- my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab1groups", "999"); if ($tabgroups eq "1" ) { FW_fC("deleteattr ".$d." dashboard_tab1groups"); } - my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab2groups", "999"); + $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab2groups", "999"); if ($tabgroups eq "1" ) { FW_fC("deleteattr ".$d." dashboard_tab2groups"); } - my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab3groups", "999"); + $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab3groups", "999"); if ($tabgroups eq "1" ) { FW_fC("deleteattr ".$d." dashboard_tab3groups"); } - my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab4groups", "999"); + $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab4groups", "999"); if ($tabgroups eq "1" ) { FW_fC("deleteattr ".$d." dashboard_tab4groups"); } - my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab5groups", "999"); + $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab5groups", "999"); if ($tabgroups eq "1" ) { FW_fC("deleteattr ".$d." dashboard_tab5groups"); } # ------------------------------------------------------------------------------------------------- - # -------------- 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 $colwidth = AttrVal($defs{$d}{NAME}, "dashboard_colwidth", ""); if ($colwidth ne "") { @@ -540,7 +527,6 @@ sub CheckDashboardAttributUssage($) { # replaces old disused attributes and thei { 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); @@ -574,9 +560,17 @@ sub CheckDashboardAttributUssage($) { # replaces old disused attributes and thei $detailnote = $detailnote." [dashboard_sorting -> dashboard_tab1sorting]"; } # ------------------------------------------------------------------------------------------------------------------------ + + # ---- detached / transferred from the old attribute to the tab extension (outdated 02.2014) ------ + my $buttonbar = AttrVal($defs{$d}{NAME}, "dashboard_showbuttonbar", ""); + if ($buttonbar ne "") { + FW_fC("deleteattr ".$d." dashboard_showbuttonbar"); + $detailnote = $detailnote." [dashboard_showbuttonbar]"; + } + # ------------------------------------------------------------------------------------------------------------------------ # Get out any change to the Logfile - if ($showbuttonbarvalue eq "0" || $showbuttonbarvalue eq "1" || $groups ne "" || $sorting ne "") { + if ($buttonbar ne "" || $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; } } @@ -847,10 +841,10 @@ sub Dashboard_attr($$$) { Hide FHEMWEB Roomliste (complete left side) and Page Header if Value is 1.
Default: 0
- -
  • dashboard_showbuttonbar
    - Displayed a buttonbar panel. Can set on Top or on Bottom of the Dashboard If the bar is hidden dashboard_lockstate the "lock" is used.
    - Default: top + +
  • dashboard_showtabs
    + Displays the Tabs on top or bottom, or hides them. This also applies to the Buttonbar. If the Buttonbar is hidden dashboard_lockstate the "lock" is used.
    + Default: tabs-and-buttonbar-at-the-top

  • dashboard_showhelper
    @@ -1048,7 +1042,7 @@ sub Dashboard_attr($$$) {
  • dashboard_lockstate
    Bei Dashboard Einstellung "unlock" kann dieses bearbeitet werden. Bei der Einstellung "lock" können keine Änderung vorgenommen werden.
    - Wenn die Leiste ausgeblendet ist (dashboard_showbuttonbar) ist das Dashboard gespert. Die Bearbeitung ist daher nur mit sichtbarer Buttonbar möglich ist.
    + Wenn die Leiste ausgeblendet ist (dashboard_showtabs) ist das Dashboard gespert. Die Bearbeitung ist daher nur mit sichtbarer Buttonbar möglich ist.
    Standard: unlock

    • @@ -1063,11 +1057,11 @@ sub Dashboard_attr($$$) { Blendet die FHEMWEB Raumliste (kompleter linker Bereich der Seite) und den oberen Bereich von FHEMWEB aus wenn der Wert auf 1 gesetzt ist.
    Default: 0
    - -
  • dashboard_showbuttonbar
    - Eine Buttonbar kann über oder unter dem Dashboard angezeigt werden. Wenn die Leiste ausgeblendet wird ist das Dashboard gespert.
    - Standard: top -

    • + +
  • dashboard_showtabs
    + Zeigt die Tabs des Dashboards oben oder unten an, oder blendet diese aus. Dies gilt auch für die Schalterleiste. Wenn die Schalterleiste ausgeblendet wird ist das Dashboard gespert.
    + Standard: tabs-and-buttonbar-at-the-top +

  • dashboard_showhelper
    Blendet Ränder ein, die eine Positionierung der Gruppen erleichtern.
    diff --git a/www/pgm2/dashboard.js b/www/pgm2/dashboard.js index cf84bbad0..941fc89f4 100644 --- a/www/pgm2/dashboard.js +++ b/www/pgm2/dashboard.js @@ -9,6 +9,8 @@ // 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% // 2.01: Add Longpoll function. Dashboard can hide FHEMWEB Roomliste and Header. +// 2.02: Tabs can set on top, bottom or hidden +// // Known Bugs/Todo's // See 95_Dashboard.pm //######################################################################################## @@ -55,8 +57,7 @@ function restoreOrder() { 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 + var aColWidth = GetColWidth(params[7],params[12]); //--------------------------------------------- Set Row and Column Settings -------------------------------------------------------------------------------------------- $("#dashboard").width(params[1]); @@ -65,8 +66,7 @@ function restoreOrder() { 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 (ActiveTab.has("#dashboard_tab"+ActiveTabId+"column"+i).length) { $("#dashboard_tab"+ActiveTabId+"column"+i).width(aColWidth[i]+"%"); } } if (params[2] == 1) { $(".ui-row").addClass("dashboard_columnhelper"); } else { $(".ui-row").removeClass("dashboard_columnhelper"); }//set showhelper //-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- @@ -240,7 +240,7 @@ $(document).ready( function () { stop: function() { saveOrder(); } }); - if (params[4] == 0){ //set if buttonbar not show + if (params[4] == "hidden") { dashboard_modifyWidget(); dashboard_setlock(); } @@ -314,6 +314,8 @@ $(document).ready( function () { restoreOrder(); } }); + if ($("#dashboard_tabnav").hasClass("dashboard_tabnav_bottom")) { $(".dashboard_tabnav").appendTo(".dashboard_tabs"); } //set Tabs on the Bottom + $(".dashboard_tab_hidden").css("display", "none"); //hide Tabs //------------------------------------------------------------------------------------------------------------------------------------- }); diff --git a/www/pgm2/dashboard_darkstyle.css b/www/pgm2/dashboard_darkstyle.css index c7e678721..a409247f7 100644 --- a/www/pgm2/dashboard_darkstyle.css +++ b/www/pgm2/dashboard_darkstyle.css @@ -42,9 +42,13 @@ .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; +.dashboard_tab_top { 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_tab_top.ui-tabs-active { background-color: #333333; font-weight: bold; } +.dashboard_tab_bottom { border: 1px solid #cccccc; border-top-width: 0; border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; } +.dashboard_tab_bottom.ui-tabs-active { background-color: #333333; font-weight: bold; } + .dashboard_tabcontent { width: 100%; padding: 0; margin: 0; } .dashboard_row { width: 100%; height: inherit; } diff --git a/www/pgm2/dashboard_ios7.css b/www/pgm2/dashboard_ios7.css index a66779db5..cbeeef1a8 100644 --- a/www/pgm2/dashboard_ios7.css +++ b/www/pgm2/dashboard_ios7.css @@ -41,8 +41,10 @@ .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_tab_top { border: 1px solid #cccccc; border-bottom-width: 0; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; } +.dashboard_tab_top.ui-tabs-active { background-color: #cbcbcb; font-weight: bold; } +.dashboard_tab_bottom { border: 1px solid #cccccc; border-top-width: 0; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; } +.dashboard_tab_bottom.ui-tabs-active { background-color: #cbcbcb; font-weight: bold; } .dashboard_tabcontent { width: 100%; padding: 0; margin: 0; } .dashboard_row { width: 100%; height: inherit; } diff --git a/www/pgm2/dashboard_style.css b/www/pgm2/dashboard_style.css index 21a7977d4..0486a1890 100644 --- a/www/pgm2/dashboard_style.css +++ b/www/pgm2/dashboard_style.css @@ -42,9 +42,12 @@ .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; +.dashboard_tab_top { 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_tab_top.ui-tabs-active { background-color: #F0F0D8; font-weight: bold; } +.dashboard_tab_bottom { border: 1px solid #cccccc; border-top-width: 0; border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; } +.dashboard_tab_bottom.ui-tabs-active { background-color: #F0F0D8; font-weight: bold; } .dashboard_tabcontent { width: 100%; padding: 0; margin: 0; } .dashboard_row { width: 100%; height: inherit; }