GELÖST: TabletUI: Pagebutton mit Warn werden sporadisch als aktiv gezeigt

[StephanFHEM]

Hallo,

in meinem Menü per Pagebutton hab ich immer noch das Problem, dass Menüpunkte mit Warnings (zB Anzahl offener Fenster) als aktiv gezeigt werden obwohl ein anderer Punkt aktiv ist. Es werden dann quasi 2 Punkte aktiv angezeigt. Wenn ich auf den falsch gezeigten Punkt klicke und danach wieder auf einen anderen dann stimmt die Anzeige wieder. Ist das ein Bug oder hab ich etwas im Code falsch gemacht? Es wäre schön, wenn da mal jemand drauf schauen könnte. Anbei ein Auszug aus meinem Menü

Code Auswählen Erweitern


<div data-type="pagebutton" data-url="#home.html" data-load="#home" data-active-pattern="(.*index.html||.*#home.html)" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="fa-home" data-background-icon="fa-square" class="prefetch medium default"></div>

<div data-type="pagebutton" data-url="#heating.html" data-load="#heating" data-active-pattern=".*#heating.html" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="oa-sani_heating" data-background-icon="fa-square" class="prefetch medium"></div>

<div data-type="pagebutton" data-url="#battery.html" data-load="#battery" data-active-pattern=".*#battery.html" data-device="Fehler_Check.DOIF" data-get="FehlerAnzahl" data-warn="FehlerAnzahl" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="fa-battery-full" data-background-icon="fa-square" class="nocache prefetch medium"></div>

<div data-type="pagebutton" data-url="#safety.html" data-load="#safety" data-active-pattern=".*#safety.html" data-device="Fehler_Check.DOIF" data-get="SafetyAnzahl" data-warn="SafetyAnzahl" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="ftui-window" data-background-icon="fa-square" class="prefetch medium"></div>


[StephanFHEM]

hat keiner eine Idee oder ähnliche Installation? Es nervt etwas, dass ständig mehrere Menüpunkte als Aktiv gezeigt werden...

[StephanFHEM]

leider habe ich das o.g. Problem immer noch nicht lösen können und mir fällt auch einfach kein Fehler im Code auf. Manchmal funktioniert es und manchmal nicht. Wenn ich dann mehrfach auf andere Menü-Seiten wechsel und wieder zurück ist es irgenwann wieder richtig. Ab und zu kann ich die Seiten die als Aktiv gezeigt werden aber nicht Aktiv sind auch gar nicht mehr auswählen.

Es wäre wirklich prima, wenn jemand mal über meinen Code schauen könnte ob ich etwas falsch gemacht habe. Oder ob es sich um einen Bug in der Software handelt.

[StephanFHEM]

gibt es hierzu inzwischen eine Lösung? Langsam nervt es, dass zum Beispiel der Menü-Punkt Fenster ab und zu als aktiv gezeigt wird weil eine Anzahl Fenster >0 offen ist..... das zwei Menüs als aktiv gezeigt werden ist mir als Form-Fehler fast egal aber man kann dann nicht in das Menü Fenster wechseln weil dieses ja nach Meinung von TabletUI bereits aktiviert ist....

[StephanFHEM]

Falls das hier jemand liest wäre ich echt dankbar für etwas Hilfe. Ich komme da einfach nicht weiter. Ich hab schon viel probiert und der Code sieht für mich gut aus. Zudem ist der Fehler nicht permanent da sondern nur ab und zu. D.h., das grundsätzlich alles funktioniert. Ich hab den Fehler übrigens auch auf mehreren Tablets, liegt also auch eher nicht am Endgerät.

[amenomade]

Hast Du irgendwelche javascript Funktionen dazu gebastelt, z.B. um die Seite automatisch zu wechseln o.ä.?

Deine gesamte index.html Seite wäre interessant.

[StephanFHEM]

Hab keine automatischen Seitenwechsel drin. Schicke dir die Index heute Abend

[StephanFHEM]

hier die index (ich habe uninteressante Teile raus genommen weil es sonst einfach zu lang geworden wäre)
Das Problem tritt immer nur auf wenn ein "warn" auf den Pagebuttons angezeigt wird. Bei mir also bei den beiden Menüpunkten Safety (Anzahl offene Fenster) und Battery (Anzahl Funk/Batteriefehler). Der Fehler tritt aber nicht immer auf und manchmal ist durch einfaches umschalten des Menüs der Fehler weg. Manchmal bleibt das zusätzliche Menü aber auch aktiviert und lässt sich dann auch nicht mehr aufrufen. Aber alles nicht wirklich reproduzierbar.

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="gridster_cols" content="11">
    <meta name="gridster_rows" content="7">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="toast" content="0">
    <meta name="widget_margin" content="1">
    <meta name="longpoll" content="1">
    <meta name="longpoll_filter" content=".*">
    <meta name="longpoll_type" content="ajax">
    <meta name="longpoll_maxage" content="240">
    <meta name="shortpoll_interval" content="900">
    <meta name="debug" content="0">

    <!-- define your personal style here, it wont be overwritten  -->
    <script src="js/fhem-tablet-ui.min.js" defer></script>

<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/openautomation.css" />
<link rel="stylesheet" href="lib/fhemSVG.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

    <title>FHEM-Tablet-UI</title>
<link rel="shortcut icon" href="/fhem/tablet/favicon2.ico" />
</head>
<body>
       
    <div class="gridster">
        <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" class="bg-transparent">
<header class="bg-darkblue">Menü</header>
<div class="cell">
<div data-type="pagebutton" data-url="#home.html" data-load="#home" data-active-pattern="(.*index.html$||.*#home.html$)" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="fa-home" data-background-icon="fa-square" class="prefetch medium default"></div>
<div data-type="pagebutton" data-url="#heating.html" data-load="#heating" data-active-pattern=".*#heating.html$" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="oa-sani_heating" data-background-icon="fa-square" class="prefetch medium"></div>
<div data-type="pagebutton" data-url="#light.html" data-load="#light" data-active-pattern="(.*#light.html$||.*#light_.*.html$)" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="fa-bolt" data-background-icon="fa-square" class="prefetch medium"></div>
<div data-type="pagebutton" data-url="#rabbit.html" data-load="#rabbit" data-active-pattern=".*#rabbit.html$" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="fa-paw" data-background-icon="fa-square" class="medium nocache"></div>
<div data-type="pagebutton" data-url="#music.html" data-load="#music" data-active-pattern=".*#music.html$" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="fa-music" data-background-icon="fa-square" class="medium"></div>
<div data-type="pagebutton" data-url="#battery.html" data-load="#battery" data-active-pattern=".*#battery.html$" data-device="Fehler_Check.DOIF"
data-get="FehlerAnzahl" data-warn="FehlerAnzahl"
data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="fa-battery-full" data-background-icon="fa-square" class="nocache prefetch medium"></div>
<div data-type="pagebutton" data-url="#safety.html" data-load="#safety" data-active-pattern=".*#safety.html$" data-device="Fehler_Check.DOIF"
data-get="SafetyAnzahl" data-warn="SafetyAnzahl"
data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="ftui-window" data-background-icon="fa-square" class="prefetch medium"></div>
<div data-type="pagebutton" data-url="#chart_empty.html" data-load="#chart" data-active-pattern=".*#chart_empty.html$" data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="fa-bar-chart" data-background-icon="fa-square" class="medium"></div>


<div data-type="clock" data-format="H:i" class="white large"></div>

<div data-type="label" class="mini">&nbsp;</div>
<div class="container inline top-narrow-10">
<div data-type="symbol"
data-device="WandTablet_Fully"
data-get="Ladezustand"
data-states='["([0-9]|[1][0-9])","([2][0-5])","([2][6-9]|[3][0-9]|[4][0-9]|50)","([5][1-9]|[6][0-9]|[7][0-5])","([7][6-9]|[8][0-9]|[9][0-9]|100)","Laden"]'
data-icons='["fa-battery-0 fa-blink warn","fa-battery-1 warn","fa-battery-2","fa-battery-3","fa-battery-4","fa-plug warn"]'
data-warn="WandTablet_Fully:battery_level"
data-colors='["firebrick","firebrick","#aa6900","#6DE08E","#6DE08E","#6DE08E"]'
class="small" >
</div>
</div>
<div class="container inline">
<div data-type="push" data-device="WandTablet_Fully"
data-icon="fa-refresh"
data-background-icon=""
data-color="white"
data-set-on="clearCache; set WandTablet_Fully restart" class="small"></div>
</div>



</div>
</li>
<li data-row="3" data-col="2" data-sizex="10" data-sizey="4" class="bg-transparent">
<div class="page" id="home"></div>
<div class="page" id="heating"></div>
<div class="page" id="light"></div>
<div class="page" id="rabbit"></div>
<div class="page" id="music"></div>
<div class="page" id="battery"></div>
<div class="page" id="safety"></div>
<div class="page" id="chart"></div>
</li>

            <!-- Current Weather Start / RAUSGESCHNITTEN-->
            <li data-row="1" data-col="2" data-sizex="4" data-sizey="2" class="bg-darkblue-trans">

        </li>
            <!-- Current Weather End -->
                         

<!-- Yahoo Forecast Start/RAUSGESCHNITTEN -->
            <li data-row="1" data-col="6" data-sizex="6" data-sizey="2" class="bg-darkblue-trans">
            </li>
            <!-- Yahoo Forecast End -->

<!-- Abfallkalender Start / RAUSGESCHNITTEN-->
            <li data-row="7" data-col="1" data-sizex="4" data-sizey="1" class="bg-transparent">
            </li>
            <!-- Abfallkalender End -->

            <!-- Anwesenheit Start /RAUSGESCHNITTEN -->
            <li data-row="7" data-col="5" data-sizex="2" data-sizey="1" class="bg-transparent">
            </li>
            <!-- Anwesenheit End -->

<!-- Alarmleiste Start / RAUSGESCHNITTEN-->
<li data-row="7" data-col="7" data-sizex="3" data-sizey="1" class="bg-transparent">
            </li>
<!-- Alarmleiste End -->

<!-- Waschmaschine Start / RAUSGESCHNITTEN-->
            <li data-row="7" data-col="10" data-sizex="2" data-sizey="1" class="bg-transparent">
            </li>
<!-- Waschmaschine Ende -->


<!-- Hier geht automatisch ein POPUP auf wenn ein Timer gestellt wurde -->

<div class="top-space">
  <div data-type="popup" data-device="ECHO_xyz" data-get="tablet_anzeige" data-get-on="an" data-get-off="aus" data-height="280px" data-width="500px">
  <div></div>
<div class="dialog">
<header></header>
<h1>Timer in der Küche</h1>
<br>
<div data-type="label" class="great" data-device="ECHO_xyz" data-get="TimerRest" data-substitution="toDate().hhmmss()"></div>
<br>
<div data-type="link" class="round top-space-2x centered" data-width="130" data-height="50" data-color="white" data-background-color="green" data-icon="fa-check" onclick="$('.dialog-close').trigger('click');">Schließen</div>
</div>
  </div>
</div>


</ul>
    </div>
</body>
</html>




[amenomade]

Hmm. In erster Linie sehe ich nichts auffälliges.

Ich würde noch ein paar class nocache hinzufügen, insb bei den Seiten, die manchmal gleichzeitig als "active" markiert werden.
Welche genau werden gleichzeitig mit den "warn" Seiten als active markiert.

Ansonsten bleibt nur das debuggen, aber wenn es nicht einfach reproduzierbar ist... wird es schwierig.

[StephanFHEM]

Tatsächlich alle. Wenn das auftritt, dann kann zwischen den anderen Seiten noch normal umgeschaltet werden. Der Button mit warn wird dann parallel immer weiter als aktiv gezeigt und wenn ich drauf klicke passiert nichts

[StephanFHEM]

auch wenn das Thema schon alt ist ist es leider immer noch aktuell. Ich kann aber inzwischen sagen, dass das Icon als aktiviert gezeigt wird sobald sich die Warn-Zahl verändert. Wenn die Seite zu dem Zeitpunkt nicht ausgewählt ist zeigt er zwei Seiten als aktiv an.
Beispiel: Das Menü Fenster zeigt im Menü-Button im Warn die Anzahl der offenen Fenster an. Wenn ich jetzt die Seite Licht auswähle und danach ein Fenster öffne werden Licht und Fenster-Menü als Aktiv angezeigt.

[amenomade]

Kannst Du vielleicht eine sehr kurze Seite bauen, mit nur 1-2 Subseiten und 1-2 Widgets, die das Problem reproduziert? Oder deine aktuelle nach und nach abbauen, bis die so schlank wie möglich ist, aber trotzdem das Problem darstellt.

Dann hier posten, ich werde testen.

[StephanFHEM]

hab jetzt kurze Seiten gebaut die den Fehler im Moment nicht haben. Die original-Seiten aber auch gerade nicht. Ich lass das jetzt mal parallel etwas laufen um zu schauen ob der Fehler auftritt.

[StephanFHEM]

der Fehler ist wieder aufgetreten und ich habe noch mal meinen ganzen Code geprüft und dabei ist mir ein Fehler aufgefallen.

in der Doku vom Widget heißt es

Code Auswählen Erweitern

data-warn --> <device>:<reading> für den Inhalt des Warnhinweises

bei mir stand im Code

Code Auswählen Erweitern

<div data-type="pagebutton" data-url="#battery.html" data-load="#battery" data-active-pattern=".*#battery.html"

data-device="Fehler_Check.DOIF"
data-get="FehlerAnzahl"
data-warn="FehlerAnzahl"

data-off-background-color="#191970" data-off-color="white" data-on-background-color="green" data-on-color="white" data-icon="fa-battery-full" data-background-icon="fa-square" class="nocache prefetch medium"></div>

Hab jetzt date-device und data-get rausgelöscht und data-warn geändert in "Fehler_Check.DOIF:FehlerAnzahl"

damit scheint es tatsächlich zu laufen und mein Problem gelöst zu sein! Der Thread kann also nach 1,5 Jahre geschlossen werden:-)