Hallo,
ich habe ein Device, welches mir in FHEMWEB eine schöne Tabelle anzeigt, siehe Screenshot 1.
Dieses Device gibt mir als Reading auch den kompletten HTML-Code der Tabelle aus, siehe Screenshot 2.
Frage:
Wie kann ich mir diese Tabelle (den HTML-Code habe ich ja) in TabletUI anzeigen lassen?
Für einen kurzen Code-Snippet wäre ich sehr dankbar.
Grüße Patrick
ps: Hier noch der HTML-Code zum kopieren:
<table class="block wide abstract-table"><thead><tr><th>Datum</th><th>Klasse</th><th>Stunde</th><th>Fach</th><th>Art</th><th>regulär_bei</th><th>Vertretung_durch</th><th>in_Raum</th><th>Schülergruppe</th></tr></thead><tbody><tr class="even"><td>2020-10-12</td><td>7B, 7A</td><td>3</td><td>ETH</td><td>Vertretung</td><td>STE</td><td>LUT</td><td>220</td><td></td></tr><tr class="odd"><td>2020-10-12</td><td>7B, 7A</td><td>4</td><td>ETH</td><td>Vertretung</td><td>STE</td><td>SHL</td><td>220</td><td></td></tr><tr class="even"><td>2020-10-13</td><td>7A</td><td>4</td><td>WBS</td><td>Vertretung</td><td>STE</td><td>SHZ</td><td>220</td><td></td></tr><tr class="odd"><td>2020-10-13</td><td>7A</td><td>5</td><td>GEO</td><td>Vertretung</td><td>STE</td><td>KNO</td><td>220</td><td></td></tr><tr class="even"><td>2020-10-13</td><td>7A</td><td>6</td><td>---</td><td>Entfall</td><td>STE</td><td>---</td><td>---</td><td></td></tr></tbody></table>
Wenn ich mich nicht irre, ist es in Fhem ein readingsGroup, richtig?
Dann https://wiki.fhem.de/wiki/FTUI_Widget_Readingsgroup
Nee, keine Readingsgroup.
Die FHEMWEB-Tabelle wird direkt durch das Device erzeugt.
Ok, das ist ein "DSB-view" Device von einem anderen Device Typ DSB oder so. Dann sehe ich keine andere Möglichkeit, als die einzelnen Readings von diesem DSB Quelldevice selbst in einer Tabelle in FTUI einzubauen.
Aber vielleicht wird jemand eine bessere Idee haben?
Wäre sicher als eines der bisher simpelsten Widgets für FTUI umsetzbar.
Das müsste ja nur ein Reading abbonieren und den Inhalt das als .innerHTML für das Widget setzen.
Das htmlcode Bild hatte ich verpasst (deswegen ist es immer besser, statt Bilder, ein "list <devicename>" hinzuzufügen)
Geht das nicht mit widget label?
Als Nachtrag:
Das Ursprungsdevice ist "dsbmobile", und das liefert auch schon brav Readings in der Art:
tt0_Art
tt0_Fach
tt0_Raum
...
tt1_Art
tt1_Fach
tt1_Raum
...
tt9_Art
tt9_Fach
tt9_Raum
Jedes tt* als einzelnes Reading, entsprechend durchnummeriert. Jedes tt* mit der gleichen Nummer gibt dann eine Tabellenzeile.
Aus diesen tt* macht das Device vom Typ "abstracttable" (siehe https://github.com/klein0r/fhem-abstracttable (https://github.com/klein0r/fhem-abstracttable)) dann die schön lesbare Tabelle aus Beitrag 1.
Ich habe dieses Device nur etwas aufgebohrt, dass es mir neben der Anzeige noch den html-Quellcode der Tabelle liefert.
Also so ähnlich macht es ja das Widget Calllist. Aber ich steh' noch auf dem Schlauch, wie ich das analog dazu mache.
Hoffe das hilft bei meiner Fragestellung....
Danke auf jeden Fall schon einmal.
Doofe Frage, aber hast du es mal mit dem Label Widget (https://wiki.fhem.de/wiki/FTUI_Widget_Label) versucht?
EDIT:
Zitat von: Thyraz am 12 Oktober 2020, 12:03:20Das müsste ja nur ein Reading abbonieren und den Inhalt das als .innerHTML für das Widget setzen.
Stimmt, es gibt ja durchaus JS Funktionen (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#JavaScript-Funktionen) - ungefähr so könnte ich es mir vorstellen, keine Ahnung ob das funktioniert:
<div data-type="label" data-device="DEVICE" data-get="HTMLCODEREADING" class="hidden" style="display:none;"></div>
<div id="meinContent"></div>
<script type="text/javascript">
this.document.getElementById('meinContent').innerHTML=ftui.getDeviceParameter('DEVICE','HTMLCODEREADING').val);
</script>Man muss jdfs warten bis das label widget den content geladen hat - was das script wahrscheinlich nicht macht.
Eventuell würde das auch mit JQuery gehen, das müsste sowieso mit FTUI ausgeliefert werden. In etwa so (auch ungetestet):
<div data-type="label" data-device="DEVICE" data-get="HTMLCODEREADING" class="hidden" style="display:none;"></div>
<div id="meinContent"></div>
<script type="text/javascript">
$(window).load(function() {
this.document.getElementById('meinContent').innerHTML=ftui.getDeviceParameter('DEVICE','HTMLCODEREADING').val);
});
</script>Oder du baust es selbst mit einer div-Tabelle (https://html-cleaner.com/features/replace-html-table-tags-with-divs/) und ganz vielen label widgets.
Ich probier' das heute abend mal aus....
Zitat von: yersinia am 13 Oktober 2020, 11:52:21
Oder du baust es selbst mit einer div-Tabelle (https://html-cleaner.com/features/replace-html-table-tags-with-divs/) und ganz vielen label widgets.
Ok. mal angenommen, ich würde als Reading statt einer HTML-Tabelle mit tr td etc. eine div-Tabelle bekommen, wie müsste ich das dann in eine Label-Widget einbauen?
Ganz normal mit
<div data-type="label"
data-device="Tabelle"
data-get="Reading wo die div-Tabelle hinterlegt ist">
</div>
?
In ein Label-Widget? Gar nicht. Zumal es kein Unterschied macht, wenn du via label widget den <table> code anzeigen lassen kannst, benötigst du eigtl kein <div> Code mMn.
Du nimmst dir den <table>-Code als Vorlage und baust darauf basierend die Tabelle mit <div> wie hier (https://html-cleaner.com/features/replace-html-table-tags-with-divs/) beschrieben durch Ersetzen in FTUI nach.
<div style="display:table;">
<!-- Kopfzeile -->
<div style="display:table-header-group;">
<div style="display:table-cell;">
1. Spaltenüberschrift
</div>
<div style="display:table-cell;">
2. Spaltenüberschrift
</div>
<!-- ... -->
</div>
<!-- /Kopfzeile -->
<!-- 1. Zeile -->
<div style="display:table-row;">
<div style="display:table-cell;">
<!-- 1. Spalte -->
<div data-type="label"
data-device="DEVICE"
data-get="READING"></div>
</div>
<div style="display:table-cell;">
<!-- 2. Spalte -->
<div data-type="label"
data-device="DEVICE"
data-get="READING"></div>
</div>
<!-- ... -->
</div>
<!-- /1. Zeile -->
</div>
EDIT: Ich sehe gerade, dass das auch etwas einfacher mit FTUI Boardmitteln gehen würde - hier für vier Spalten:
<div class="sheet">
<div class="row">
<div class="cell-25 bold">Art</div>
<div class="cell-25 bold">Fach</div>
<div class="cell-25 bold">Raum</div>
<div class="cell-25 bold">...</div>
</div> <!-- /row -->
<div class="row">
<div class="cell-25">
<div data-type="label"
data-device="dsbmobile"
data-get="tt0_Art"></div>
</div>
<div class="cell-25">
<div data-type="label"
data-device="dsbmobile"
data-get="tt0_Fach"></div>
</div>
<div class="cell-25">
<div data-type="label"
data-device="dsbmobile"
data-get="tt0_Raum"></div>
</div>
<div class="cell-25">
...
</div>
</div> <!-- /row -->
<div class="row">
<div class="cell-25">
<div data-type="label"
data-device="dsbmobile"
data-get="tt1_Art"></div>
</div>
<div class="cell-25">
<div data-type="label"
data-device="dsbmobile"
data-get="tt1_Fach"></div>
</div>
<div class="cell-25">
<div data-type="label"
data-device="dsbmobile"
data-get="tt1_Raum"></div>
</div>
<div class="cell-25">
...
</div>
</div> <!-- /row -->
</div> <!-- /sheet -->
Oder du kopierst den <table> HTML code und ersetzt die Datenfelder durch label widgets. Weniger elegant und eventuell grafisch nicht so einfach in FTUI zu integrieren.
Anhand deiner Frage vermute ich, dass alle weiteren Vorschläge aus #7 (https://forum.fhem.de/index.php/topic,114940.msg1092130.html#msg1092130) nicht funktioniert haben?
Und
<div data-type="label"
data-device="Tabelle"
data-get="Reading wo die <table>-Tabelle hinterlegt ist">
</div>wird nicht als HTML Code interpretiert?
Nee, das aus Post #7 hat nicht funktioniert.
Auf der Basis der Anzeige im WEB-Interface (siehe Anhang table_web) hab' mich mal ganz platt folgendes für ftui definiert:
<li data-row="1" data-col="1" data-sizex="5" data-sizey="4">
<header>Vertretungsplan</header>
<div data-type="label" data-device="dsb_view"
data-get="htmlcode">
</div>
</li>
und was kommt raus? Eiine gar nicht mal so schlechte Anzeige in FTUI (siehe Bild table_ftui).
Sieht also so aus, dass der Inhalt des Readings "htmlcode" vom Label-Widget auch als HTML-Code interpretiert wird. Da kann man doch drauf aufbauen :-)
Jetzt muss ich mal schauen, ob ich das noch ordentlich formatiert bekomme (so mit roter fetter Spaltenüberschift, Zeileinhalte linksbündig etc.)
Das sind zwar HTML-Basics aber für einen Tip wäre ich trotzdem dankbar.
Vielen Dank auf jeden Fall an alle, die mir bisher geholfen haben (und ggf. helfen werden)
Grüße Patrick
PS: Hier noch die momentane raw-Definition des Devices:
defmod dsb_view abstracttable dsbmobile
attr dsb_view icon time_calendar
attr dsb_view room Konfiguration->Websites
attr dsb_view table-header Datum,Klasse,Stunde,Fach,Art,regulär_bei,Vertretung_durch,in_Raum,Schülergruppe
attr dsb_view table-rowtemplate tt%d_sdate,tt%d_Stunde,tt%d_Fach,tt%d_Vertreter,tt%d_Text,tt%d_Art,tt%d_Raum,tt%d__Lehrer_,tt%Sch__lergruppe
setstate dsb_view 1
setstate dsb_view 2020-10-11 20:57:19 html 0
setstate dsb_view 2020-10-20 18:24:42 htmlcode <table class="block wide abstract-table"><thead><tr><th>Datum</th><th>Klasse</th><th>Stunde</th><th>Fach</th><th>Art</th><th>regulär_bei</th><th>Vertretung_durch</th><th>in_Raum</th><th>Schülergruppe</th></tr></thead><tbody><tr class="even"><td>2020-10-20</td><td>7C</td><td>6</td><td>---</td><td>Entfall</td><td>FLA</td><td>---</td><td>---</td><td></td></tr></tbody></table>
setstate dsb_view 2020-10-20 18:24:42 state 1
Zitat von: frankreed am 20 Oktober 2020, 18:38:17
Nee, das aus Post #7 hat nicht funktioniert.
Und aus Post #5 ? ;)
Meinst Du mit dem Post #5 das mit dem "innerhtlm"? Kann ich nicht sagen, habe ich nicht versucht da ich absolut keine blassen Schimmer habe wie das gehen soll ;)
Zitat von: amenomade am 21 Oktober 2020, 00:43:55Und aus Post #5 ? ;)
Viel wichtiger finde ich die Erkenntnis, dass das label-Widget HTML Code aus einem Reading ausliest und der Browser dies das dann auch interpretiert.
Zitat von: frankreed am 21 Oktober 2020, 07:51:50
Meinst Du mit dem Post #5 das mit dem "innerhtlm"? Kann ich nicht sagen, habe ich nicht versucht da ich absolut keine blassen Schimmer habe wie das gehen soll ;)
Nein, ich meinte:
ZitatGeht das nicht mit widget label?
Ich hatte damals eine Seite mit label widgets mit dem Browsertool "Inspect element" geschaut, und keinen Grund gesehen, warum es nicht funktionieren sollte, deswegen hatte ich das vorgeschlagen. Die Zeit hatte ich aber nicht, es mit einem dummy zu testen.