FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: FhemPiUser am 21 Mai 2016, 20:46:29

Titel: html code in myutils sub erzeugen und in tablet ui anzeigen
Beitrag von: FhemPiUser am 21 Mai 2016, 20:46:29
hallo,

gibt es eine Möglichkeit html code, den eine myutils sub erzeugt, in tablet ui anzuzeigen, ähnlich wie man das mit weblink htmlCode im fhemweb machen kann, z.B.:

define wl_gas weblink htmlCode { &printGasverbrauch() }

Ich würde gerne eine Tabelle meiner Monatsgasverbäuche im tablet ui darstellen...
Titel: Antw:html code in myutils sub erzeugen und in tablet ui anzeigen
Beitrag von: setstate am 22 Mai 2016, 09:02:15
Du kannst die HTML Tabelle in ein Reading ausgeben und dieses mit einem Label im FTUI anzeigen.
Titel: Antw:html code in myutils sub erzeugen und in tablet ui anzeigen
Beitrag von: FhemPiUser am 22 Mai 2016, 20:46:32
ok, wusst nicht, dass man umfangreichen HTML-Code im Reading speichern kann.

Allerdings klappt folgendes Kommando noch nicht:

{ fhem("setreading CUL_EM_9 printVerbrauch \'".&printVerbrauch("wl_gas","Gasverbrauch","CUL_EM_9_gesamt","CUL_EM_9.cum_month","1","m<sup>3</sup>")."\'") }

Bekomme eine Fehlermeldung "Last parameter must be quiet" und das Reading endet bei einem "&deg;". Er scheint das ";" nicht zu mögen...
Titel: Antw:html code in myutils sub erzeugen und in tablet ui anzeigen
Beitrag von: FhemPiUser am 23 Mai 2016, 19:27:23
Jemand eine Idee, wie man ein ";" in ein reading bekommt?

Ein

setreading CUL_EM_9 printVerbrauch "test;test"

geht auch nicht...
Titel: Antw:html code in myutils sub erzeugen und in tablet ui anzeigen
Beitrag von: Masterfunk am 04 Dezember 2016, 22:35:19
Zitat von: setstate am 22 Mai 2016, 09:02:15
Du kannst die HTML Tabelle in ein Reading ausgeben und dieses mit einem Label im FTUI anzeigen.

Hast Du mal einen Tip wie ich das hinbekomme?
Ich steh auf dem Schlauch.

Gruß Detlef
Titel: Antw:html code in myutils sub erzeugen und in tablet ui anzeigen
Beitrag von: Mario67 am 04 Dezember 2016, 23:29:20
In meinem FTUI mache ich das an einigen Stellen so:

1. Generierung des HTLM-Codes und Setzen eines Dummy-Readings (das muss natürlich zuvor angelegt worden sein)
2. Anzeige des Inhalts des Dummies mit dem Label-Widget (Vor einger Zeit war dazu noch eine Widget-Sonderanfertigung notwendig).

In einer 99_my...Utils.pm habe ich z.B. folgende Methode (hier noch mit Patzhaltern "_"), welche von einem passenden Notify getriggert wird.
sub UpdateHeatingTable()
{
    my $device = "";
    #id=\"heatingtable\"
    my $tableTemplate = sprintf(
"<div id=\"heatingtable\">
<style>
    tr { height: 25px;; }
    #spaltengruppe { width: 65px;; }
</style>
<table>
    <colgroup id=\"spaltengruppe\">
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
    </colgroup>
    <!-- 1 -->
    <tr>
        <td>1</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 2 -->
    <tr>
        <td>2</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 3 -->
    <tr>
        <td>3</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 4 -->
    <tr>
        <td>4</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 5 -->
    <tr>
        <td>5</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 6 -->
    <tr>
        <td>6</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 7 -->
    <tr>
        <td>7</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>%%.5s &deg;;C</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 8 -->
    <tr>
        <td>8</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 9 -->
    <tr>
        <td>9</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 10 -->
    <tr>
        <td>10</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 11 -->
    <tr>
        <td>11</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 12 -->
    <tr>
        <td>12</td>
        <td class=\"cell left-align vertical-align: top;;\">
            <div data-type=\"symbol\"
              data-device=\"Buderus_EMSClient\" 
              data-get=\"heateractive\"
              data-states=\'[\"on\",\"off\"]\'
              data-icons=\'[\"fa-fire\",\"fa-fire\"]\'
              data-colors=\'[\"red\", \"black\"]\'
              class=\"cell left-align\">
           </div>
        </td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>%%.5s &deg;;C</td>
    </tr>
    <!-- 13 -->
    <tr>
        <td>13</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>%%.4s bar</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 14 -->
    <tr>
        <td>14</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 15 -->
    <tr>
        <td>15</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 16 -->
    <tr>
        <td>16</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>%%.5s &deg;;C</td>
        <td>_</td>
        <td>%%.5s &deg;;C</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 17 -->
    <tr>
        <td>17</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>%%.5s &deg;;C</td>
    </tr>
    <!-- 18 -->
    <tr>
        <td>18</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 19 -->
    <tr>
        <td>19</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 20 -->
    <tr>
        <td>20</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
        <td>_</td>
    </tr>
    <!-- 21 -->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>
</div>");
my $tableTemplate1 = sprintf(
"<style>
    tr { height: 150px;; }
    #spaltengruppe { width: 150px;; }
</style>
<table>
    <colgroup id=\"spaltengruppe\">
      <col>
      <col>
      <col>
    </colgroup>
    <tr>
        <td>12</td>
        <td>
           <div data-type=\"symbol\"
                data-device=\"Buderus_EMSClient\"
                data-get=\"heateractive\"
                data-states=\'[\"on\",\"off\"]\'
                data-icons=\'[\"fa-fire\",\"fa-fire\"]\'
                data-colors=\'[\"red\", \"black\"]\'
                class=\"cell\">
            </div>
        </td>
    </tr>
</table>");

    my $returnflow_currenttemp = ReadingsVal("Buderus_EMSClient", "returnflow_currenttemp", "1");
    my $hk1_currenttemperature = ReadingsVal("Buderus_EMSClient", "hk1_currenttemperature", "2");
    my $hk2_currenttemperature = ReadingsVal("Buderus_EMSClient", "hk2_currenttemperature", "3");
    my $ww_currenttemp = ReadingsVal("Buderus_EMSClient", "ww_currenttemp", "0");
    my $pressure = ReadingsVal("Buderus_EMSClient", "pressure", "0");
    my $heateractive = ReadingsVal("Buderus_EMSClient", "heateractive", "42");
   
    my $HZG_Temperatur_Ruecklauf_Heizkoerper = ReadingsVal("HZG_Temperatur_Ruecklauf_Heizkoerper", "temperature", "3");
    my $HZG_Temperatur_Warmwasser_Zuleitung = ReadingsVal("HZG_Temperatur_Warmwasser_Zuleitung", "temperature", "4");
    my $HZG_Temperatur_Warmwasser_Rueckleitung = ReadingsVal("HZG_Temperatur_Warmwasser_Rueckleitung", "temperature", "5");
   
    my $table = sprintf($tableTemplate,
                $hk2_currenttemperature,
                $ww_currenttemp,
                $pressure,
                $returnflow_currenttemp,
                $hk1_currenttemperature,
                $HZG_Temperatur_Warmwasser_Rueckleitung
                );
    #Log 1,"HeatingSU160_HTML : $table";

    fhem "set HeatingSU160_HTML ". $table;
}

Das Ganze ist sicher nicht sehr elegant, funktioniert aber soweit ganz gut. Der Ansatz in der Tabelle auch noch FTUI-Widgets einzusetzen, ist nur teilweise von Erfolg gekrönt.
Siehe dazu: https://forum.fhem.de/index.php/topic,59699.msg510584.html#msg510584 (https://forum.fhem.de/index.php/topic,59699.msg510584.html#msg510584) Ich habe die Vorschläge von setstate soweit umgesetzt. Da sich der Erfolg aber nicht direkt einstellte  und die Positionierung vor dem Hintergrundbild sehr schwierig war, bin ich hier doch zu sehr kleinen Grid-Dimensionenen für die gesamte Oberfläche gegangen.

Aber grundsätzlich können Tabellen so schlicht als HTML-Code in ein Dummy gesetzt und als Label dargestellt werden.

Gruß,
Mario
Titel: Antw:html code in myutils sub erzeugen und in tablet ui anzeigen
Beitrag von: Masterfunk am 06 Dezember 2016, 21:51:47
Vielleicht habe ich meine Frage falsch gestellt, oder ich bin hier im falschen Beitrag.

Was ich möchte ist:

Ich habe auf fhem Seite einen Weblink:

Internals:
   DEF        htmlCode {'<div style="width: 400; overflow: hidden; height: 300px;"><iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q='.ReadingsVal('livetracking','location','').' " width="480" height="480" frameborder="0" style="pointer-events:none; border:0; margin-top: -100px; margin-left: -30px;"></iframe></div>'}
   LINK       {'<div style="width: 400; overflow: hidden; height: 300px;"><iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q='.ReadingsVal('livetracking','location','').' " width="480" height="480" frameborder="0" style="pointer-events:none; border:0; margin-top: -100px; margin-left: -30px;"></iframe></div>'}
   NAME       live_map
   NR         596
   STATE      initialized
   TYPE       weblink
   WLTYPE     htmlCode
Attributes:
   room       Live Tracking


und benötige jetzt ein Reading, welches den direkt aufrufbaren HTML Code beinhaltet, ohne "Readingval.... etc.".
Also die eigentlich im Weblink aufgerufene url um diese via "label" in ftui einzubinden.

Gruß Detlef