html code in myutils sub erzeugen und in tablet ui anzeigen

Begonnen von FhemPiUser, 21 Mai 2016, 20:46:29

Vorheriges Thema - Nächstes Thema

FhemPiUser

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...

setstate

Du kannst die HTML Tabelle in ein Reading ausgeben und dieses mit einem Label im FTUI anzeigen.

FhemPiUser

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...

FhemPiUser

Jemand eine Idee, wie man ein ";" in ein reading bekommt?

Ein

setreading CUL_EM_9 printVerbrauch "test;test"

geht auch nicht...

Masterfunk

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

Mario67

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 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
FHEM auf Raspberry Pi 4 mit CUL868, WMBUS,
FS20 ST, FS20 AS4-3, FS20 SU-2, FS20 DF, 1-Wire + RS-232: AB Electronics Com Pi RS232, Brandmelder + Fenster: AB Electronics IO Pi 32
BUDERUS GB142 über EMS/AVR-NET-IO, WESTAFLEX WAC250 über RS232, MySensors
mit fhem.cfg & includes glücklich

Masterfunk

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