Evaluierungsversion 2.2

[fhainz]

Hallo setstate,

ich bekomme derzeit in der Konsole die Meldung

[Error] QuotaExceededError: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.
   setItem (fhem-tablet-ui.js:634)
   saveStatesLocal (fhem-tablet-ui.js:634)
   (anonyme Funktion) (fhem-tablet-ui.js:405)
   j (jquery.min.js:2:27301)
   fireWith (jquery.min.js:2:28110)
   x (jquery.min.js:4:22073)
   b (jquery.min.js:4:25982)

Läuft da bei mir irgendein Speicher über?

Grüße

[setstate]

Nein, das ist zu erwarten, wenn du beim iOS "privates" Browsen an hast. Dann darf nix in localStorage gespeichert werden. Ich könnte das vorher abfragen und dann nicht versuchen ...

[fhainz]

Die Meldung erhalte ich am Mac unter Safari. Ich habe zwar zum testen Caches deaktiviert, aber auch mit aktiviertem Cache erhalte ich die Meldung.

[fhainz]

Vergiss das ganze bitte.
Das muss irgendein Cache Bug von Safari sein.Wenn ich die TabletUI unter einem anderen FHEM-Port aufrufe, passt alles. Unter Chrome passt auch alles.

[roman1528]

Moin.

Mir ist schon wieder etwas aufgefallen.

Mal abgesehen davon, dass beim ersten laden der Seite #linkname gar nicht angezigt wird...

Wird er erst recht nicht angezeigt, wenn man die <div id="linkname"></div> in z.B. einer <table><tr><td> verpackt.
Auch nicht wenn man die <td> mit id="linkname" deklariert.

Die Layoutaufteilung mit col-X-X und row passt mir nämlich gar nicht, vorallem weil dann die ganze col-X-X klickbar ist und nicht nur das Widget selbst!!!

Kann man das ändern?

EDIT:

Uuuund noch etwas XD

Der PopUp-Dialog eines PopUp-Widgets liegt unter dem Shadow/Shade und ist somit nicht bedienbar obwohl der z-index passt. (Shade=1001, PopUp=2000).
Was ist hier nur los? 

Grüße^^

[setstate]

Hallo roman1528,

gib mal ein paar Beispiele als Code, ich weiß gerade nicht, an welcher Stelle du bist und was nicht geht.

[roman1528]

Hallo roman1528,

gib mal ein paar Beispiele als Code, ich weiß gerade nicht, an welcher Stelle du bist und was nicht geht.

Äh ja.. klar.. Mein Fehler 

Bin natürlich immer noch bei der SlideOut Geschichte.

#linkname:
index.html: Die Problemstelle:

Code Auswählen Erweitern


<main id="panel" class="">
<header id="header-nav" class="bg-lightgray row">
<table width="100%">
<tr>
<td width="10%">
<div data-type="slideout"
class="left-align notouch">
</div>
</td>
<td width="60%" style="border-right:1px solid black;">
<div id="linkname"
class="large bold middle">
</div>
</td>
.............


Die div#linkname wird nicht gefüllt seitdem ich sie in die <table> verpackt habe. Bei der Beispieleinbindung von dir (index_nav_mobil.html) funktioniert es eigentlich. Nur beim ersten Aufruf nicht.


PopUp:
content_home: Naja, wie gewohnt ein PopUp-Widget mit Push-Widget als Öffner.

Code Auswählen Erweitern


<td width="33.33%">
<div data-type="popup"
data-width="200px"
data-height="275px"
data-dragable="false"
class="">
<div data-type="push"
data-icon="fa-bell-slash">
</div>
<div class="dialog">
<header>ALARM DEAKTIVIEREN</header>
<div class="top-space">
<div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="1"
class="">1
</div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="2"
class="">2
</div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="3"
class="">3
</div>
</div>
<div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="4"
class="">4
</div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="5"
class="">5
</div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="6"
class="">6
</div>
</div>
<div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="7"
class="">7
</div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="8"
class="">8
</div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="9"
class="">9
</div>
</div>
<div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="0"
class="">0
</div>
<div data-type="push"
data-icon=""
data-device="dummy_keypad"
data-set-on="#"
class="">OK
</div>
</div>
</div>
</div>
</div>
</td>


Im Anhang noch 3 Screenshots dazu.

Und zur allgemeinen Verständlichkeit meine komplette index.html. Wenn man das "default" aus dem ersten Menü-Eintrag entfernt wird die Seite trotzdem geladen aber die weiter oben angesprochene Dopplung der Buttons passiert nicht!!!

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_margin" content="0"> <!-- Space between gridster-elements -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="shortpoll-interval" content="120">
<meta name="shortpoll-only-interval" content="30">
<meta name="longpoll-delay" content="0">
    <meta name="longpoll" content="1"> <!-- 1= LongPoll; 0= Shortpoll every 30s -->
    <meta name="debug" content="2"> <!-- 1= Output to console; 0= No output -->
<meta name="toast" content="1"> <!-- 1= Toast Messages; 0 = No Messages -->
<!-- Cache -->
    <meta http-equiv="Cache-Control" content="no-store" />
<!-- Style CSS -->
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/fhemSVG.css" />
<link rel="stylesheet" href="lib/openautomation.css" />
<!-- Custom Fonts -->
<link rel="stylesheet" href="fonts/roman/style.css" />
<link rel="stylesheet" href="fonts/material/style.css" />
<!-- Custom CSS -->
    <link rel="stylesheet" href="css/fhem-mobil-ui.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user_mobile.css" />
<!-- Scripts -->
    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>
</head>
<body>
<nav id="menu">
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-home"
data-color="white"
data-text-align="center"
data-load="div#content_home"
data-url="#content_home.html"
data-active-color="blue"
data-active-pattern="(.*index.html|.*#content_home.html)">Home
</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-tint"
data-color="white"
data-text-align="center"
data-load="div#content_bad"
data-url="#content_bad.html"
data-active-color="blue"
data-active-pattern=".*#content_bad.html">Bad
</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="ro-pc"
data-color="white"
data-text-align="center"
data-load="div#content_buro"
data-url="#content_buro.html"
data-active-color="blue"
data-active-pattern=".*#content_buro.html">Büro
</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="ro-hanger"
data-color="white"
data-text-align="center"
data-load="div#content_flur"
data-url="#content_flur.html"
data-active-color="blue"
data-active-pattern=".*#content_flur.html">Flur
</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-cutlery"
data-color="white"
data-text-align="center"
data-load="div#content_kuche"
data-url="#content_kuche.html"
data-active-color="blue"
data-active-pattern=".*#content_kuche.html">Küche
</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-bed"
data-color="white"
data-text-align="center"
data-load="div#content_schlafen"
data-url="#content_schlafen.html"
data-active-color="blue"
data-active-pattern=".*#content_schlafen.html">Schlafen
</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="ro-sofa"
data-color="white"
data-text-align="center"
data-load="div#content_wohnen"
data-url="#content_wohnen.html"
data-active-color="blue"
data-active-pattern=".*#content_wohnen.html">Wohnen
</div>
</nav>

<main id="panel" class="">
<header id="header-nav" class="bg-lightgray row">
<table width="100%">
<tr>
<td width="10%">
<div data-type="slideout"
class="left-align notouch">
</div>
</td>
<td width="60%" class="large bold middle" style="border-right:1px solid black;">
<div id="linkname"
class="large bold middle">
</div>"title"
</td>
<td width="10%">
<div data-type="symbol"
data-device="gds"
data-get="a_count"
data-states='["[1-9]{1}|[0-9]{2}","0"]'
data-icons='["fa-bolt warn","fa-bolt"]'
data-colors='["firebrick","black"]'
class="large">
</div>
</td>
<td width="20%">
<div data-type="clock"
data-format="H:i"
data-interval="1000"
class="large thin orange">
</div>
</td>
</tr>
</table>
</header>
        <div class="page" id="content_home"></div>
        <div class="page" id="content_bad"></div>
        <div class="page" id="content_buro"></div>
        <div class="page" id="content_flur"></div>
        <div class="page" id="content_kuche"></div>
        <div class="page" id="content_schlafen"></div>
        <div class="page" id="content_wohnen"></div>
    </main>

</body>
</html>


Grüße^^

Nicht von dem "title" im Screenshot verwirren lassen. Habe ich derzeit nur als Platzhalter drin!

[setstate]

Wodurch soll div#linkname gefüllt werden? Die Menü Punkte heißen alle div#content*

Btw: Laut HTML Kochbuch sollte man TABLE nur einsetzen, wenn man wirklich eine Tabelle ala Excel anzeigen will. TABLE sollte nicht für das Seiten Layout benutzt werden.

[hermann1514]

Liegt vermutlich nicht an DBLog. Die Aktuelle Version von widget_chart aus dem eval branch funktioniert bei mir auch nicht.
Eine funktionierende Version unter 2.2 ist diese hier. Ich kann nicht genau sagen aus welchem Thread ich sie habe. Hab zwar danach gesucht, aber sie nicht gefunden

Hey,

auch diese Version funktioniert bei mir nicht.
Gibt es noch eine andere Version?
Auch bei mir läuft dieses Widget unter 1.1

Gruß
Hermann

[roman1528]

Wodurch soll div#linkname gefüllt werden? Die Menü Punkte heißen alle div#content*

Btw: Laut HTML Kochbuch sollte man TABLE nur einsetzen, wenn man wirklich eine Tabelle ala Excel anzeigen will. TABLE sollte nicht für das Seiten Layout benutzt werden.

Na mit dem im Link befindlichen Namen

Code Auswählen Erweitern


<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-home"
data-color="white"
data-text-align="center"
data-load="div#content_home"
data-url="#content_home.html"
data-active-color="blue"
data-active-pattern="(.*index.html|.*#content_home.html)">Home
</div>

In dem Fall -> Home ... schau dir dein eigenes Beispiel an: index_nav_mobil.html

Funktionierte (mit der Ausnahme, dass beim ersten öffnen der Seite der "Titel" nicht angezeigt wurde, was ja möglicherweise noch geändert wird) ohne Probleme bis ich diese div in eine table gesteckt habe.

Dass table's nicht zur formatierung genutzt werden sollen mag ja stimmen und kann ich in bestimmten Fällen auch verstehen. Nur ist die ganze col-x-x Geschichte absoluter Mist wie ich finde!
Man kann es einfach nicht sauber auf die darin befindlichen Inhalte anpassen, geschweigedenn irgendwas sauber damit ausfüllen (bestes Beispiel der Header) und die Widgets (die meisten) sind dann über die gesamte Fläche des col-x-x klickbar, was ein scrollen über längere Seiten massiv behindert!

Ich stamme noch aus dem DOCTYPE HTML 4.4 Zeitalter und mag was HTML5 angeht reichlich beschränkt sein. Aber mit einer Table habe ich immer alles da hin bekommen wo ich es hin haben wollte.
Und das verhalten der Div's ist nun auch nicht sehr berauschend... vorallem wenn man ihnen ein paar Klassen verpasst ist der Text plötzlich unten ausgerichtet und der "float" ist völlig im Eimer. Dann man kann alles nochmal neu formatieren....

Grüße^^

[zap]

Dem kann ich uneingeschränkt zustimmen. Der Versuch, Tabellen mit CSS-Mitteln darzustellen ist ein reines Glücksspiel. Nicht alles an native HTML ist schlecht. Mit table Tags kann man Tabelleninhalte vernünftig formatieren und positionieren, und das Browser übergreifend.

[n4rrOx]

[...]
Bei der Beispieleinbindung von dir (index_nav_mobil.html) funktioniert es eigentlich. Nur beim ersten Aufruf nicht.
[...]

Kann ich bestätigen!

[setstate]

Sorry, ich bin jetzt wieder im Bilde. Ist schon wieder etwas her.
Ich schaue mir das an, muss am Selector liegen.

[roman1528]

Hey.

Öhm.. wenn du mal ganz viel Zeit hast schau dir doch bitte mal das angehängte Widget an..

Ich habe mich da schon dran probiert... allerdings komme ich mit dem neuen Readings-Handling nicht klar... ich habe das ding wahrschienlich auch schon komplett vermurkst...

Wäre super wenn du das Teil hinbiegen könntest und wenn dann kannst du es ja auch ins Repo aufnehmen.

Widget zum anzeigen der Meldungen im GDS-Modul:
data-get="alert" wird nur behandelt um zu schauen ob es gesetzt ist (nicht als Reading) da dort auch irgendwann die forecast behandelt werden sollte... Kann im Grunde aber raus.
data-max="10" um die Anzahl der anzuzeigenden Meldungen einzustellen/zu begrenzen.

Danke dir schon mal im Vorraus.
Grüße^^

[MichaelT]

Hallo setstate,

habe den Stand von gestern bei mir laufen. Jetzt wollte ich ein LW12 mit

Code Auswählen Erweitern

      <div data-type="volume" data-device="EG_WZ_LedTV" data-min='0' data-max='360' data-tickstep='4' data-get='RGB' data-set='RGB' class="cell small hue-tick rgb" > </div>
steuern.

Wenn ich aber class=".. rgb ..." setze, bekomme ich die Fehlermeldung

Code Auswählen Erweitern

initPage - area=
widget_volume.js:188 Uncaught ReferenceError: widget_knob is not defined(anonymous function)
@ widget_volume.js:188m.extend.each
@ jquery.min.js:2m.fn.m.each
@ jquery.min.js:2update
@ widget_volume.js:177(anonymous function)
@ fhem-tablet-ui.js:707j
@ jquery.min.js:2k.fireWith
@ jquery.min.js:2e.(anonymous function)
@ jquery.min.js:2(anonymous function)
@ fhem-tablet-ui.js:716j
@ jquery.min.js:2k.add
@ jquery.min.js:2d.always
@ jquery.min.js:2(anonymous function)
@ fhem-tablet-ui.js:693j
@ jquery.min.js:2k.fireWith
@ jquery.min.js:2e.(anonymous function)
@ jquery.min.js:2script.onload
@ fhem-tablet-ui.js:742
fhem-tablet-ui.js:340 get jsonlist2: 2410.817ms

Ohne class=" .. rgb ..." funktioniert es.

Hast Du eine Idee. Bin leider in JS und jquery nicht tief genug drin um ein Fehler zu lokalisieren.


Danke