Evaluierungsversion 2.2

setstate · 22 April 2016, 17:02:46

Aber in deiner Content Page vergibst du wieder data-col="1", das besetzt doch schon das menü.

Wie beim Grundgesetz der Physik: "Wo ein Körper ist, kann ..."

Dann muss der Content nach unten rutschen, weil er ganz nach links soll

n4rrOx · 22 April 2016, 17:07:39

Hi zusammen,

bin stiller Mitleser und erst noch gaaaanz am Anfang von FHEM und FTUI

.... hätte aber eine Frage:
Muss in den Contentseiten ebenfalls <html>, <head> etc .... definiert sein??
oder reicht nur der reine Content, da es ja eigentlich in die index geladen wird?

Zitat von: StefanD am 22 April 2016, 16:49:58
[...]
Die dazugehörige Content-Page sieht so aus:
Code Auswählen Erweitern
<!DOCTYPE html> <html> <title>content_test</title> <head></head> <body> <div class="page" id="content_test"> [...] </div> </body> </html>

[...]

Btw....großen Respekt an die Entwickler hier, vor allem an setstate für die große Mühe mit FTUI!!!

setstate · 22 April 2016, 17:14:21

na dann, herzlich willkommen ... und Danke

Das kannst du machen, wie du willst, es wird eh nur der Teil der Seite entnommen und kein Script oder ähnliches gestartet. Ich würde die Seite so klein wie möglich halten, wegen Ladezeit vom Server. Zu Testzwecken (Standalone) kann man aber auch eine vollwertige FTUI Seite drausmachen.

siehe hier: http://api.jquery.com/load/

unter "Loading Page Fragments"

roman1528 · 22 April 2016, 17:28:52

Zitat von: StefanD am 22 April 2016, 16:49:58
Wenn ich die <div>s außerhalb des Gidsters habe, wird die Content-Page unter dem Gridster-Layout angzeigt (s. Screenshot).

also so:
Code Auswählen Erweitern
<body> <div class="gridster"> <ul>  <li data-row="1" data-col="1" data-sizex="1" data-sizey="7"> <header>Navigation</header> <div data-type="pagebutton" data-url="#content_index.html" data-load="#content_index" data-off-background-color="#AA6900" data-off-color="#2A2A2A" data-on-background-color="#AA6900" data-on-color="#CCCCCC" data-active-pattern=".*#content_index.html" data-icon="fa-home" class="default top-space"></div> <div data-type="pagebutton" data-url="#content_heating.html" data-load="#content_heating" data-off-background-color="#AA6900" data-off-color="#2A2A2A" data-on-background-color="#AA6900" data-on-color="#CCCCCC" data-active-pattern=".*#content_heating.html" data-icon="fa-fire" class="top-space"></div> <div data-type="pagebutton" data-url="#content_weather.html" data-load="#content_weather" data-off-background-color="#AA6900" data-off-color="#2A2A2A" data-on-background-color="#AA6900" data-on-color="#CCCCCC" data-active-pattern=".*#content_weather.html" data-icon="fa-cloud" class="top-space"></div> <div data-type="pagebutton" data-url="#content_info.html" data-load="#content_info" data-off-background-color="AA6900" data-off-color="#2A2A2A" data-on-background-color="#AA6900" data-on-color="#CCCCCC" data-active-pattern=".*#content_info.html" data-icon="fa-info" class="top-space"></div> <div data-type="pagebutton" data-url="#content_test.html" data-load="#content_test" data-off-background-color="AA6900" data-off-color="yellow" data-on-background-color="#AA6900" data-on-color="red" data-active-pattern=".*#content_test.html" data-icon="fa-info" class="top-space"></div> </li>   </ul> </div> <div class="page" id="content_index"></div> <div class="page" id="content_heating"></div> <div class="page" id="content_weather"></div> <div class="page" id="content_info"></div> <div class="page" id="content_test" style="background-color: #CCCCCC;"></div> </body>

Die dazugehörige Content-Page sieht so aus:
Code Auswählen Erweitern
<!DOCTYPE html> <html> <title>content_test</title> <head></head> <body> <div class="page" id="content_test"> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="2" data-sizey="1"> <header>Uhr</header> <div data-type="clock" data-format="H:i" style="color:#AA6900" class="bigger darker"></div> <div data-type="clock" data-format="D, d. M Y" shortday-length="2" class="darker"></div> </li> <li data-row="1" data-col="3" data-sizex="4" data-sizey="1" data-template="inc_tempoutside.html"></li> </ul> </div> </div> </body> </html>

Die 2.2er Version habe ich heute Nachmittag erst komplett neu gezogen, "Altlasten" sind somit ausgeschlossen. Zugegriffen wird über http://fhem.fritz.box:8083/fhem/tablet_eval/index.html#content_test.html, sprich ohne weitere Zwischenkomponenten, wie Nginx, Apache, etc.

VG Stefan

ich sagte ja... ggf. mit css-klassen experimentieren.

Code Auswählen


<div class=" gridster inline">
.....
</div>
<div class="inline">
 <div content.....></div>
</div>

wobei das wahrschienlich auch in die hose gehen wird... weil bei inline irendwie alles am unteren rand ausgerichtet wird...

versuch das mit

Code Auswählen

<div class="gridster" style="margin:-5px 0 0 -5px;">
in den content-seiten

StefanD · 22 April 2016, 17:33:19

Zitat von: setstate am 22 April 2016, 17:02:46
Aber in deiner Content Page vergibst du wieder data-col="1", das besetzt doch schon das menü.

Wie beim Grundgesetz der Physik: "Wo ein Körper ist, kann ..."

Dann muss der Content nach unten rutschen, weil er ganz nach links soll

Hajanaja, hängt immer davon ab, wie's für die Darstellung interprediert wird.

Lasse ich die <div>s fürn Content außerhalb von <ul> verschieben sich die Gridster Element zwar in Spalte 2, dennoch bleibt der Content unter dem Menü. Ich tippe mal drauf, dass diese Art nur dann funktioniert, wenn man das Menü ganz oben horizontal aufbaut.

Packt man die <div>s aber ohne <li> in <ul>, sieht's schon besser aus. Dann ist die Einrückung umlaufend, mit der man layouttechnisch besser leben kann, auch wenn dadurch ein paar Pixel "verschwendet" werden. Die Gretchenfrage ist nur, bleibt dieses Verhalten in der Zukunft gleich, nicht dass sich mal nach einem Update die Gridster-Elemente überlagern...

VG Stefan

fhainz · 22 April 2016, 17:37:29

Hallo!

Bezüglich des Problem mit dem CSS und content page. Mittlerweile sieht das bei mir so aus:

index.html

Code Auswählen


<body>
  <div class="gridster">
    <ul>
      <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
        <header>Uhrzeit</header>
        <div data-type="clock" data-format="H:i" class="container bigger"></div>
        <div data-type="clock" data-format="d-m-Y" class="cell"></div>
      </li>
      <li data-row="2" data-col="2" data-sizex="6" data-sizey="6" class="content">
	<div class="page" id="contentHome"></div>
      </li>
    </ul>
  </div>

home.html

Code Auswählen

<!DOCTYPE html>
<html>
<title>FHEM</title>
<head>
</head>
<body>
  <div class="page" id="contentHome">
    <div class="gridster content">
      <ul>
      	<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
      </ul>
    </div>
  </div>
</body>

css:

Code Auswählen


/*
 * Gridster mit Pagebutton und dataLoad
 */
li.content {
	background-color: #000000 !important;
}

div.gridster.content {
	margin:-5px 0 0 -5px !important;
}

Funktioniert bei mir wunderbar.

Grüße

StefanD · 22 April 2016, 17:38:04

Zitat von: roman1528 am 22 April 2016, 17:28:52
ich sagte ja... ggf. mit css-klassen experimentieren.
wobei das wahrschienlich auch in die hose gehen wird... weil bei inline irendwie alles am unteren rand ausgerichtet wird...

...und genau da wird's bei mir dünn, blitzdünn...

Zitat von: roman1528 am 22 April 2016, 17:28:52
versuch das mit
Code Auswählen Erweitern
<div class="gridster" style="margin:-5px 0 0 -5px;">
in den content-seiten

Bingo! Damit funzt's!

Das muss an das Gridster-Element in der Content-Page.

Besten Dank!

VG Stefan

setstate · 22 April 2016, 20:35:46

Zitat von: matzemoerk am 22 April 2016, 11:03:07
Hallo,
Ich habe mir gerade die 2.2 zum erneuten testen installiert. Ich hatte gestern Abend bereits eine funktionierende Version, die nun das selbe Verhalten aufweist. Daher die erneute Testinstallation.

Ich habe das Problem, dass die Kommunikation nur von ftui nach fhem funktioniert. D.h. ich kann den testdummy in ftui schalten und der Status wird korrekt in fhem gesetzt. Ändere ich den dummy aber in fhem, findet keine Aktualisierung von ftui statt. healthCheck liefert das folgende (die fetten Zeilen kommen mir komisch vor):

--------- start healthCheck --------------
fhem-tablet-ui.js:746 now: Fri Apr 22 2016 10:54:20 GMT+0200 (CEST)
fhem-tablet-ui.js:747 FTUI version: 2.2.0
fhem-tablet-ui.js:748 Longpoll: true
fhem-tablet-ui.js:749 Longpoll objects there: false
fhem-tablet-ui.js:750 Longpoll curent line: 0
fhem-tablet-ui.js:751 Longpoll last event before: 16913 Tag(e) 8 Stunde(n) 54 Minute(n) 21 Sekunde(n)
fhem-tablet-ui.js:752 Shortpoll interval: 30
fhem-tablet-ui.js:753 Shortpoll last run before: 16913 Tag(e) 9 Stunde(n) 54 Minute(n) 21 Sekunde(n)
fhem-tablet-ui.js:754 FHEM dev/par count: 0
fhem-tablet-ui.js:755 Page length: 11551
fhem-tablet-ui.js:756 Widgets count: 11
fhem-tablet-ui.js:757
--------- end healthCheck ---------------

Was kann das sein?
Grüße,
Matthias

Das verrät uns doch schon mal einiges. Update funktioniert nicht.

Du erreichst FHEM nicht mit deiner Konfig.

Was sagen die ersten Debug-Zeilen?

ZitatPlugin dir: js
Filename: index.html
FHEM dir: /fhem/

/fhem/

So müsste bei der URL: http://<IP>:<PORT>/fhem/ dein FHEM erreichbar sein

Dann kannst du testen, ob bei dieser URL Daten abgerufen werden können.

http://<IP>:<PORT>/fhem/?cmd=jsonlist2&XHR=1

Ob die Datenübertragung klappt, kann man im Browser > Entwicklertools > Netzwerkanalyse. Dort siehst du, welche URL für Shortpoll und Longpoll aufgerufen wird, mit dem Connectionstatus. Er muss grün sein und Status 200 zeigen. Ansonsten fragst du falsch ab.

Wenn /fhem/ bei dir nicht passt, kann man auch in der index.html etwas anderes vorgeben:

Code Auswählen

<meta name="fhemweb_url" content="/andererPfad/">

hermann1514 · 22 April 2016, 20:51:29

Hi...

bekomme das CHART Widget nicht zum laufen. Es kommt nur der Header vom DIV Object. Habe vom GIT die widget_chart genommen.

Hier mal der Code:

Code Auswählen

<li data-row="1" data-col="1" data-sizex="6" data-sizey="3">
  <header>Temperatur Schlafzimmer</header>
    <div class="normal"
         data-type="chart"
         data-device="MAX_00ddd2"
         data-logdevice='["logdb","logdb","logdb"]'
        data-logfile='["HISTORY","HISTORY","HISTORY"]'
         data-columnspec='["MAX_00ddd2:temperature","MAX_00ddd2:desiredTemperature","MAX_00ddd2:valveposition"]'
         data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
         data-ptype='["lines","lines","lines"]'
         data-uaxis='["primary","primary","secondary"]'
         data-legend='["Measured", "Desired", "Valve"]'
         data-yunit="°C"
         data-ytext="Temperature"
         data-minvalue="auto"
         data-maxvalue="auto"
         data-yunit_sec="%"
         data-ytext_sec="Percentage"
         data-yticks="auto"
         data-minvalue_sec="0"
         data-maxvalue_sec="100"
         data-daysago_start="0"
         data-daysago_end="-1"
         data-crosshair="true"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
         data-xticks="auto">
    </div>
</li>

Habe auch schon eine Minimal Version genommen. Geht auch nicht.
Hat jemand eine Idee?

Gruß
Hermann

matzemoerk · 22 April 2016, 21:58:44

Zitat von: setstate am 22 April 2016, 20:35:46
Ob die Datenübertragung klappt, kann man im Browser > Entwicklertools > Netzwerkanalyse. Dort siehst du, welche URL für Shortpoll und Longpoll aufgerufen wird, mit dem Connectionstatus. Er muss grün sein und Status 200 zeigen. Ansonsten fragst du falsch ab.

Der Connectionstatus scheint OK zu sein.

guna83 · 23 April 2016, 09:08:56

Hallo,

habe dasselbe Problem wie Hermann. Liegt es vielleicht am DbLog? Ich nutze auch DbLog und es funktioniert nicht.

Code Auswählen

<div data-type="chart"
             data-device="Umwelt.Feuchte.Schlafen"
             data-logdevice=["logdb","logdb","logdb","logdb"]
             data-logfile="HISTORY"
             data-columnspec='["Umwelt.Feuchte.Schlafen:state","Umwelt.Feuchte.Wohnen:state","Umwelt.Co2.Schlafen:state","Umwelt.Co2.Wohnen:state"]'
             data-legend='["Schlafen Feuchte","Wohnen Feuchte","Schlafen Co2","Wohnen Co2"]'
             data-style='["ftui l2dash","ftui l3dash","ftui l2dash","ftui l3dash"]'
             data-title="Hausklima"></div>

Selbiger Code tut unter der "alten" 1.x Tablet UI. Keine Fehlermeldungen in der Console bei Tablet UI 2.2

Viele Grüße
Andrea

fhainz · 23 April 2016, 09:17:03

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

setstate · 23 April 2016, 10:15:08

Danke fhainz, ich sehe mir die Version an und lade sie hoch.

fhainz · 23 April 2016, 10:17:55

@setstate

Hast du dir schon Gedanken über meinem PR gemacht? https://github.com/knowthelist/fhem-tablet-ui/pull/143

setstate · 23 April 2016, 10:48:54

Sorry, übersehen bzw. wieder vergessen. Ich merge das gerne rein.