diff --git a/fhem/CHANGED b/fhem/CHANGED index b820905c3..0efab966b 100644 --- a/fhem/CHANGED +++ b/fhem/CHANGED @@ -1,6 +1,11 @@ # 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 show an icon. + - bugfix: DASHBOARD: dashboard_showfullsize only in DashboardRoom. + Fix showhelper Bug on lock/unlock. The error that after a trigger + action the curren tab is changed to the "old" activetab tab has + been fixed. - bugfix: SYSMON: Filesystems (absent medium) - feature: FLOORPLAN-menu-items can get icons attached by new attribute fp_roomIcons diff --git a/fhem/FHEM/95_Dashboard.pm b/fhem/FHEM/95_Dashboard.pm index 6f3297c66..59d979f51 100644 --- a/fhem/FHEM/95_Dashboard.pm +++ b/fhem/FHEM/95_Dashboard.pm @@ -31,10 +31,16 @@ # 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. +# 2.03: dashboard_showfullsize only in DashboardRoom. Tabs can show Icons (new Attributes). Fix showhelper Bug on lock/unlock. +# The error that after a trigger action the curren tab is changed to the "old" activetab tab has been fixed. dashboard_activetab +# is stored after tab change # # Known Bugs/Todos: -# 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 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. +# BUG: Nicht alle Inhalte aller Tabs laden, bei Plots dauert die bedienung des Dashboards zu lange. -> elemente hidden? +# x BUG: Lock blendet schow helper nicht aus? +# x BUG: dashboard_showfullsize nicht in room everything +# x TODO: Icon on Tabs # Log 1, "[DASHBOARD simple debug] '".$g."' "; ######################################################################################## # @@ -98,7 +104,6 @@ sub Dashboard_Initialize ($) { "dashboard_row:top,center,bottom,top-center,center-bottom,top-center-bottom ". "dashboard_showhelper:0,1 ". "dashboard_showtooglebuttons:0,1 ". - #new attribute vers. 2.00 "dashboard_tabcount:1,2,3,4,5 ". "dashboard_activetab:1,2,3,4,5 ". @@ -124,6 +129,12 @@ sub Dashboard_Initialize ($) { "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 ". + #new attribute vers. 2.03 + "dashboard_tab1icon ". + "dashboard_tab2icon ". + "dashboard_tab3icon ". + "dashboard_tab4icon ". + "dashboard_tab5icon ". #obsolete - erase in future releases "dashboard_groups ". # obsolet -> erase in future releases @@ -186,17 +197,24 @@ sub DashboardAsHtml($) AttrVal($defs{$d}{NAME}, "dashboard_tab2sorting", ""), AttrVal($defs{$d}{NAME}, "dashboard_tab3sorting", ""), AttrVal($defs{$d}{NAME}, "dashboard_tab4sorting", ""), - AttrVal($defs{$d}{NAME}, "dashboard_tab5sorting", "")); + AttrVal($defs{$d}{NAME}, "dashboard_tab5sorting", "")); + my @tabicons = (AttrVal($defs{$d}{NAME}, "dashboard_tab1icon", ""), + AttrVal($defs{$d}{NAME}, "dashboard_tab2icon", ""), + AttrVal($defs{$d}{NAME}, "dashboard_tab3icon", ""), + AttrVal($defs{$d}{NAME}, "dashboard_tab4icon", ""), + AttrVal($defs{$d}{NAME}, "dashboard_tab5icon", "")); ############################################################################################# #---------------- 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) { +# if ($showbuttonbar eq "hidden") {$showbuttonbar = "top" }; #Dashboard is always edited out the Room Dashboard +# $showhelper = 1; #Dashboard is always edited out the Room Dashboard +# $showtooglebuttons = 1 #Dashboard is always edited out the Room Dashboard +# $lockstate = "unlock"; #Dashboard is always edited out the Room Dashboard + + $showfullsize = 0; # Fullsize only in Dashboardroom + } ################ temp. deaktiviert #---------------------------------------------------------------------------- @@ -241,12 +259,17 @@ sub DashboardAsHtml($) ########################### Dashboard Tab-Liste ############################################## my $tabshow = "hidden"; + my $tabicon = ""; if ($showtabs eq "tabs-and-buttonbar-at-the-top" || $showtabs eq "tabs-at-the-top-buttonbar-hidden") { $tabshow = "top";} if ($showtabs eq "tabs-and-buttonbar-on-the-bottom" || $showtabs eq "tabs-on-the-bottom-buttonbar-hidden") { $tabshow = "bottom";} $ret .= " \n"; ############################################################################################## @@ -395,7 +418,7 @@ sub BuildGroup($) my $type = $defs{$d}{TYPE}; my $devName = AttrVal($d, "alias", $d); my $icon = AttrVal($d, "icon", ""); - $icon = FW_makeImage($icon,$icon,"icon") . " " if($icon); + $icon = FW_makeImage($icon,$icon,"icon dashboard_groupicon") . " " if($icon); if($FW_hiddenroom{detail}) { $ret .= "
$icon$devName
"; } else { @@ -823,7 +846,27 @@ sub Dashboard_attr($$$) {
  • dashboard_tab1groups
    Comma-separated list of the names of the groups to be displayed in Tab 5. -

    • +
    + +
  • dashboard_tab1icon
    + Set the icon for a Tab. There must exist an icon with the name ico.png in the modpath directory. If the image is referencing an SVG icon, then you can use the @colorname suffix to color the image. +

    • + +
  • dashboard_tab2icon
    + Set the icon for a Tab. There must exist an icon with the name ico.png in the modpath directory. If the image is referencing an SVG icon, then you can use the @colorname suffix to color the image. +

    • + +
  • dashboard_tab3icon
    + Set the icon for a Tab. There must exist an icon with the name ico.png in the modpath directory. If the image is referencing an SVG icon, then you can use the @colorname suffix to color the image. +

    • + +
  • dashboard_tab4icon
    + Set the icon for a Tab. There must exist an icon with the name ico.png in the modpath directory. If the image is referencing an SVG icon, then you can use the @colorname suffix to color the image. +

    • + +
  • dashboard_tab5icon
    + Set the icon for a Tab. There must exist an icon with the name ico.png in the modpath directory. If the image is referencing an SVG icon, then you can use the @colorname suffix to color the image. +

  • dashboard_lockstate
    When set to "unlock" you can edit the Dashboard. When set to "lock" no change can be made.
    @@ -1038,7 +1081,27 @@ sub Dashboard_attr($$$) {
  • dashboard_tab5groups
    Durch Komma getrennte Liste mit den Namen der Gruppen, die im Tab 5 angezeigt werden. Falsche Gruppennamen werden hervorgehoben. -

    • +
    + +
  • dashboard_tab1icon
    + Zeigt am Tab ein Icon an. Es muss sich dabei um ein exisitereindes Icon mit modpath Verzeichnis handeln. Handelt es sich um ein SVG Icon kann der Suffix @colorname für die Farbe des Icons angegeben werden. +

    • + +
  • dashboard_tab2icon
    + Zeigt am Tab ein Icon an. Es muss sich dabei um ein exisitereindes Icon mit modpath Verzeichnis handeln. Handelt es sich um ein SVG Icon kann der Suffix @colorname für die Farbe des Icons angegeben werden. +

    • + +
  • dashboard_tab3icon
    + Zeigt am Tab ein Icon an. Es muss sich dabei um ein exisitereindes Icon mit modpath Verzeichnis handeln. Handelt es sich um ein SVG Icon kann der Suffix @colorname für die Farbe des Icons angegeben werden. +

    • + +
  • dashboard_tab4icon
    + Zeigt am Tab ein Icon an. Es muss sich dabei um ein exisitereindes Icon mit modpath Verzeichnis handeln. Handelt es sich um ein SVG Icon kann der Suffix @colorname für die Farbe des Icons angegeben werden. +

    • + +
  • dashboard_tab5icon
    + Zeigt am Tab ein Icon an. Es muss sich dabei um ein exisitereindes Icon mit modpath Verzeichnis handeln. Handelt es sich um ein SVG Icon kann der Suffix @colorname für die Farbe des Icons angegeben werden. +

  • dashboard_lockstate
    Bei Dashboard Einstellung "unlock" kann dieses bearbeitet werden. Bei der Einstellung "lock" können keine Änderung vorgenommen werden.
    diff --git a/fhem/www/pgm2/dashboard.js b/fhem/www/pgm2/dashboard.js index 941fc89f4..f0a6bfdff 100644 --- a/fhem/www/pgm2/dashboard.js +++ b/fhem/www/pgm2/dashboard.js @@ -10,6 +10,8 @@ // 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 +// 2.03: Fix showhelper Bug on lock/unlock. The error that after a trigger action the curren tab is changed to the "old" activetab tab has +// been fixed. // // Known Bugs/Todo's // See 95_Dashboard.pm @@ -187,10 +189,10 @@ function dashboard_setposition(){ 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); - } + //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); +// } //--------------------------------------------------------------------- } @@ -277,6 +279,27 @@ $(document).ready( function () { event.stopImmediatePropagation(); }); } + + //--------------------------------- 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(); + + 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); + } + } + }); + 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 + //------------------------------------------------------------------------------------------------------------------------------------- + $("#dashboard_button_set").button({ create: function( event, ui ) { @@ -301,22 +324,8 @@ $(document).ready( function () { dashboard_unsetlock(); } } - }); - - //--------------------------------- 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(); - } }); - 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/fhem/www/pgm2/dashboard_darkstyle.css b/fhem/www/pgm2/dashboard_darkstyle.css index a409247f7..c8b0cb733 100644 --- a/fhem/www/pgm2/dashboard_darkstyle.css +++ b/fhem/www/pgm2/dashboard_darkstyle.css @@ -43,12 +43,12 @@ .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_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; } + border-top-right-radius: 8px; margin: 0 .5em -1px 0; float: left; padding: .5em 1em;} .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_tabicon {width: 16px; height: 16px; vertical-align: top; margin-left: -0.5em; } .dashboard_tabcontent { width: 100%; padding: 0; margin: 0; } .dashboard_row { width: 100%; height: inherit; } @@ -58,4 +58,3 @@ - diff --git a/fhem/www/pgm2/dashboard_ios7.css b/fhem/www/pgm2/dashboard_ios7.css index a2a2aeb95..5e839482d 100644 --- a/fhem/www/pgm2/dashboard_ios7.css +++ b/fhem/www/pgm2/dashboard_ios7.css @@ -43,6 +43,7 @@ a { outline: none; } .dashboard_tab_top.ui-tabs-active { background-color: #cbcbcb; } .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; } +.dashboard_tabicon {width: 16px; height: 16px; vertical-align: top; margin-left: -0.5em; } .dashboard_tabcontent { width: 100%; padding: 0; margin: 0; } .dashboard_row { width: 100%; height: inherit; } diff --git a/fhem/www/pgm2/dashboard_style.css b/fhem/www/pgm2/dashboard_style.css index 0486a1890..52fa4e339 100644 --- a/fhem/www/pgm2/dashboard_style.css +++ b/fhem/www/pgm2/dashboard_style.css @@ -47,7 +47,8 @@ .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_tab_bottom.ui-tabs-active { background-color: #F0F0D8; font-weight: bold; } +.dashboard_tabicon {width: 16px; height: 16px; vertical-align: top; margin-left: -0.5em; } .dashboard_tabcontent { width: 100%; padding: 0; margin: 0; } .dashboard_row { width: 100%; height: inherit; }