Datentabellen mit HTML in @Home anzeigen

Apps für Mobilgeräte (Smartphones, Tablets) wie Android, Apple iOS, Windows Phone etc. sowie Desktop-Betriebssysteme (Windows, Linux, OS X etc.)

Moderator: Co-Administratoren

Antworten
DidiTheE
Beiträge: 101
Registriert: 19.02.2018, 20:52
Wohnort: Waldshut-Tiengen
Hat sich bedankt: 11 Mal
Danksagung erhalten: 7 Mal

Datentabellen mit HTML in @Home anzeigen

Beitrag von DidiTheE » 01.01.2022, 20:38

Mit der neuen Version der iPhone App @Home (Okt/Nov.2021) können HTML Text in Systemvariablen in der App als entsprechende Web-Seiten angezeigt werden.
(Anmerkung: Mit dem Zusatz „@HomeWebView“ in der Variablenbeschreibung kann die Web-Ansicht schon in der vorherigen Version angewendet werden)

Diese Möglichkeit habe ich zur Anzeige einfacher Dashboards innerhalb der App genutzt.
Eine dreispaltige Tabelle in HTML stellt die Daten übersichtlich und gruppiert dar.
Alles wird in der CCU (zyklisch) verarbeitet, wird keine Online-Verbindung benötigt.

Für die Erstellung der Dashboards verwende ich zwei alternative Ansätze
1. Automatische Generierung der Tabelle aus einer Favoritenliste
-- Vorteil: Schnell implementiert, sofort anwendbar
-- Nachteil: Im Skript vorgegebenes Layout und Farbgestaltung
2. Nutzung eines Templates, das dann (periodisch) mit Daten befüllt wird
-- Vorteil: Flexible Gestaltung des Dashboards, schnelle Designänderung durch Anpassen des Templates
-- Nachteil: Größerer Aufwand für das Skript zum Befüllen des Templates

Ansatz 1: Automatik

Ein Skript liest in einer Schleife alle Objekte aus der Favoritenliste und erstellt daraus eine Tabelle. Der Objektname ist jeweils die Spaltenüberschrift, der Datenwert wird darunter angezeigt.
Beispiel mit Favoritenliste "X1. Einstellungen":
1. Eine neue Systemvariable anlegen
-- "Dashboard: Einstellungen" (Typ Zeichenkette. Wird für die Anzeige verwendet)
2. HM Skript erstellen
-- a. Favoritenliste und Dashboard Variable bei Bedarf anpassen
-- b. Alle Objekte in einer Schleife auslesen und in die Tabelle eintragen
-- c. Löschen aller Zeilenumbrüche (werden in @home noch als "\n" ausgegeben
-- d. Schreiben in die Systemvariable "Dashboard: Einstellungen"
3. HM Skript zyklisch ausführen, z.B. alle 1 Stunde
4. Systemvariable "Dashboard: Einstellungen" anzeigen
-- a. Systemvariable "Dashboard: Einstellungen" in eine Favoritenliste einfügen
-- b. In @home die Favoritenliste anzeigen und für "Dashboard: Einstellungen" die Web-Ansicht aktivieren

Skript:

Code: Alles auswählen

! HTML Dashboard für @Home App
!
! Generiert ein HTML Dashboard aller Systemvariable im Favoriten
!    "X1. Einstellungen"
!
! 09.11.21 ED: Inital Version
! ---------------------------------------------------------------------------

var oInput  = dom.GetObject("X1. Einstellungen");        ! Favoritenliste
var oOutput = dom.GetObject("Dashboard: Einstellungen"); ! Dashboard Variable
!--- ab hier keine Änderungen notwendig ---

string sHTML= "";
var    colmn= 3; ! Anzahl Spalten

! Aktueller Zeitstempel
var T00 = system.Date("%H:%M:%S");

! CSS Formatiertierung als Liste. Trennzeichen ist "#"
string off_on       = "<td>Aus#<td style=\"color:white;background-color:green;\">Ein";
string off_red_on   = "<td style=\"color:white;background-color:red;\">Aus#<td style=\"color:white;background-color:green;\">Ein";
string door_off_on  = "<td style=\"color:white;background-color:green; \">Verriegelt#<td style=\"color:white;background-color:red; \">Offen";

string css_on_ok    = "<td style=\"color:white; background-color:green;\">";
string css_off_ok   = "<td style=\"color:black; background-color:lightgrey;\">";
string css_on_fail  = "<td style=\"color:white; background-color:red;\">";
string css_off_fail = "<td style=\"color:white; background-color:red;\">";
string css_data     = "<td style=\"color:black; background-color:lightgrey;\">";
string css_tbl_head = "<tr style=\"font-size: 0.7em; color:white; background-color:blue;\">";
string css_tbl_row  = "<tr valign=\"top\" style=\"font-size: 0.7em; height: 2em;\">";

! HTML Text Template einer dreispaltigen Tabelle
! ----------------------------------------------
sHTML = "
<head>
  <style>
    table {text-align: center; font-size: 1.0em; font-family: sans-serif;}
  </style>
</head>

<body>
  <table>
    <tr style=\"font-size: 0.7em;\">
      <td style=\"width: 27%; text-align:left;\">Status: T00</td>
      <td style=\"width: 27%;\"></td>
      <td style=\"width: 27%;\"></td>
    </tr>
    <tr>
      <th colspan=\"3\">Einstellungen</th>
    </tr>
    ###
    ***
  </table>
</body>";

! ----------------------------------------------

! Daten auslesen und in HTML Text einfügen
! ----------------------------------------
sHTML = sHTML.Replace("T00", T00);

var    lst = oInput.EnumUsedNames(); ! Alle Objekte In Favorit in Liste übernehmen
object obj;     ! Für Abarbeitung der Liste
var    i = 0;   ! Zähler
string name;    ! Objektname aus Liste

WriteLine("lst = " # lst );

foreach(name, lst)
{
  obj = dom.GetObject(name);

  ! Dashboards in Favoriten ggf überspringen
  if (name.Substr(0,4) == "Dash") { continue; }

  ! Datenausgabe:
  ! -------------------
  ! Systemvariable
  if (obj.IsTypeOf(OT_VARDP))
  {
    if (i==0)
    {
      WriteLine("Zeile Start")
      ! Neue Reihe, Header- und Datenzeile einleiten
      sHTML = sHTML.Replace("###", css_tbl_head # "### " );
      sHTML = sHTML.Replace("***", css_tbl_row # "*** " );
    }
    WriteLine("i = " # i);

    ! Header
    sHTML = sHTML.Replace("###", ("<td>"#name#"</td>###"));

    if (obj.ValueType() == 16)
    {
      sHTML = sHTML.Replace("***", (css_data # (obj.ValueList().StrValueByIndex(";", obj.Value())) # " " # obj.ValueUnit()) #"</td>***");
    }
    elseif (obj.ValueType() == 2)
    {
      if (obj.Value() == 0)
      {sHTML = sHTML.Replace("***", (css_off_ok # obj.ValueName() # " " # obj.ValueUnit()) #"</td>***");}
      else
      {sHTML = sHTML.Replace("***", (css_on_ok # obj.ValueName() # " " # obj.ValueUnit()) #"</td>***");}
    }
    else
    {
      sHTML = sHTML.Replace("***", (css_data # obj.Value().ToString(1) # " " # obj.ValueUnit()) #"</td>***");
    }

    ! Nächstes Objekte
    i=i+1;
    if (i==colmn)
    {
      WriteLine("Zeile Ende")
      ! Reihe fertig, Header- und Datenzeile abschliessen
      sHTML = sHTML.Replace("###", "</tr> ");
      sHTML = sHTML.Replace("***", "</tr>###*** ");
      i=0;
    }
  }
}


! Ungültige Zeichen entfernen oder ersetzen
sHTML = sHTML.Replace("\n", "");   ! Zeilenumbrüche im String entfernen
sHTML = sHTML.Replace("###", "");  ! Einfügemarkierung löschen
sHTML = sHTML.Replace("***", "");  ! Einfügemarkierung löschen

WriteLine("Output = " # sHTML);

! HTML String in Anzeig-Variable schreiben
oOutput.Variable( sHTML );

WriteLine(" fertig");
Anzeige:
IMG_Settings.PNG

Ansatz 2: Template

Hier benötigt die Umsetzung mehr individuelle Arbeit im Skript, ist aber trotzdem recht einfach machbar.
Das beigefügte Beispiel zeigt Schaltzustände und zugehörigen Schaltzeitpunkt an:
1. Zwei neue Systemvariablen anlegen
-- a. "Dashboard: Licht" (Typ Zeichenkette. Wird für die Anzeige verwendet)
-- b. "Dashboard: Licht Template" (Typ Zeichenkette. Enthält den HTML Rohtext)
2. HTML Template Seite mit gewünschtem Layout und Inhalt erstellen
-- a. Eindeutig benannte Platzhalter für Daten innerhalb der Seite (z.B. "Lxx" wobei xx eine eindeutige Zahl ist)
-- b. Eindeutig benannte Platzhalter für Zeitstempel innerhalb der Seite (z.B. "tLxx" wobei xx eine eindeutige Zahl ist)
-- c. HTML Text über das HM WebGUI in die Systemvariable "Dashboard: Licht Template" kopieren
3. HM Skript erstellen
-- a. Lesen aller anzuzeigenden Daten und zugehöriger Zeitstempel
-- b. Lesen der Systemvariable "Dashboard: Licht Template"
-- c. Ersetzen der Platzhalter durch die jeweiligen Daten
-- d. Löschen aller Zeilenumbrüche (werden in @home sonst als "\n" ausgegeben)
-- e. Schreiben in die Systemvariable "Dashboard: Licht"
4. HM Skript zyklisch ausführen, z.B. alle 5 Minuten
5. Systemvariable "Dashboard: Licht" anzeigen
-- a. Systemvariable "Dashboard: Licht" in eine Favoritenliste einfügen
-- b. In @home die Favoritenliste anzeigen und für "Dashboard: Licht" die Web-Ansicht aktivieren

HTML Template:

Code: Alles auswählen

<head>
  <style>
    table {text-align: center; font-size: 1.0em; font-family: sans-serif;}
  </style>
</head>

<body>
  <table>
    <tr style="font-size: 0.7em;">
      <td style="width: 27%; text-align:left;">Status: T00</td>
      <td style="width: 27%;"></td>
      <td style="width: 27%;"></td>
    </tr>
    <tr>
      <th colspan="3">Eingang und UG</th>
    </tr>
    <tr style="font-size: 0.7em; color:white; background-color:blue;">
      <td>Büro Licht</td>
      <td>Büro Arbeitslicht</td>
      <td>Flur Deckenlicht</td>
    </tr>
    <tr style="font-size: 0.7em; color:black; background-color:lightgrey;">
      <td>L10</td>
      <td>L11</td>
      <td>L12</td>
    </tr>
    <tr style="font-size: 0.7em;">
      <td>tL10</td>
      <td>tL11</td>
      <td>tL12</td>
    </tr>


    <tr style="font-size: 0.7em; color:white; background-color:blue;">
      <td>Garage</td>
      <td>Treppenhaus</td>
      <td>UG Flurlampe</td>
    </tr>
    <tr style="font-size: 0.7em; color:black; background-color:lightgrey;">
      <td>L13</td>
      <td>L14</td>
      <td>L15</td>
    </tr>
    <tr style="font-size: 0.7em;">
      <td>tL13</td>
      <td>tL14</td>
      <td>tL15</td>
    </tr>

    <tr>
      <th colspan="3">EG und Garten</th>
    </tr>
    <tr style="font-size: 0.7em; color:white; background-color:blue;">
      <td>WZ Stehlampe</td>
      <td>WZ TV LED</td>
      <td>EG Flurlampe</td>
    </tr>
    <tr style="font-size: 0.7em; color:black; background-color:lightgrey;">
      <td>L16</td>
      <td>L17</td>
      <td>L21</td>
    </tr>
    <tr style="font-size: 0.7em;">
      <td>tL16</td>
      <td>tL17</td>
      <td>tL21</td>
    </tr>

    <tr style="font-size: 0.7em; color:white; background-color:blue;">
      <td>WZ Sofa LED</td>
      <td>WZ Leselampe</td>
      <td>Esstisch</td>
    </tr>
    <tr style="font-size: 0.7em; color:black; background-color:lightgrey;">
      <td>L19</td>
      <td>L18</td>
      <td>L20</td>
    </tr>
    <tr style="font-size: 0.7em; ">
      <td>tL19</td>
      <td>tL18</td>
      <td>tL20</td>
    </tr>

    <tr style="font-size: 0.7em; color:white; background-color:blue;">
      <td>Küche Arbeitsfläche</td>
      <td>Küche Unterlicht</td>
      <td>Terrassenlicht</td>
    </tr>
    <tr style="font-size: 0.7em; color:black; background-color:lightgrey;">
      <td>L22</td>
      <td>L23</td>
      <td>L24</td>
    </tr>
    <tr style="font-size: 0.7em;">
      <td>tL22</td>
      <td>tL23</td>
      <td>tL24</td>
    </tr>

    <tr style="font-size: 0.7em; color:white; background-color:blue;">
      <td>Gartenlicht</td>
      <td>Terrasse Steckdose</td>
    </tr>
    <tr style="font-size: 0.7em; color:black; background-color:lightgrey;">
      <td>L25</td>
      <td>L37</td>
    </tr>
    <tr style="font-size: 0.7em;">
      <td>tL25</td>
      <td>tL37</td>
    </tr>

    <tr>
      <th colspan="3">Sonstige Schalter</th>
    </tr>
    <tr style="font-size: 0.7em; color:white; background-color:blue;">
      <td>Waschmaschine</td>
      <td>Trockner</td>
      <td>PV Wasser</td>
    </tr>
    <tr style="font-size: 0.7em; color:black; background-color:lightgrey;">
      <td>L26</td>
      <td>L27</td>
      <td>L28</td>
    </tr>
    <tr style="font-size: 0.7em;">
      <td>tL26</td>
      <td>tL27</td>
      <td>tL28</td>
    </tr>
    <tr style="font-size: 0.7em;">
      <td>L30 W</td>
      <td>L31 W</td>
      <td>L32 W</td>
    </tr>
    <tr style="font-size: 0.7em; color:white; background-color:blue;">
      <td>Umwälzpumpe</td>
      <td>Haustürschloss</td>
    </tr>
    <tr style="font-size: 0.7em; color:black; background-color:lightgrey;">
      <td>L29</td>
      <td>L36</td>
    </tr>
    <tr style="font-size: 0.7em;">
      <td>tL29</td>
      <td>tL36</td>
    </tr>

    <tr>
      <th colspan="3">Einstellungen</th>
    </tr>
    <tr style="font-size: 0.7em; color:white; background-color:blue;">
      <td>Morgenlicht ein</td>
      <td>Abendlicht ein</td>
      <td>Abendlicht aus</td>
    </tr>
    <tr style="font-size: 0.7em;">
      <td>L33</td>
      <td>L34</td>
      <td>L35</td>
    </tr>

  </table>

<!----------------------------->
<!--END
<!----------------------------->
</body>

</html>
Skript:

Code: Alles auswählen

! HTML Dashboard für @Home App
!
! Füllt die Variable "Dashboard: Licht" mit entsprechenden Zustandsdaten.
! Verwendet dazu den String in "Dashboard: Licht Template" als Input.
! Prinzip: Wenn Zustand "True" dann wird Texthintergrund Grün eingefärbt
! Platzhalter im Template werden durch entsprechende CSS Formatierung ersetzt.
!
! In  @Home nicht darstellbare Zeichen (z.B. Zeilenumbrüche) werden entfernt.
!
! 07.11.21 ED: Inital Version
! ---------------------------------------------------------------------------

var oInput  = dom.GetObject("Dashboard: Licht Template");
var oOutput = dom.GetObject("Dashboard: Licht");

! Aktueller Zeitstempel
var T00 = system.Date("%H:%M:%S");

! CSS Formatiertierung als Liste. Trennzeichen ist "#"
string off_on = "<td>Aus#<td style=\"color:white;background-color:green;\">Ein";
string off_red_on = "<td style=\"color:white;background-color:red;\">Aus#<td style=\"color:white;background-color:green;\">Ein";
string door_off_on = "<td style=\"color:white;background-color:green; \">Verriegelt#<td style=\"color:white;background-color:red; \">Offen";

! Systemvariable

! Geräte
var L10 = dom.GetObject("Büro Dietmar Licht:Schalter").DPByHssDP("STATE").Value();
var L11 = dom.GetObject("Büro Dietmar Deckenlicht:Schalter").DPByHssDP("STATE").Value();
var L12 = dom.GetObject("Flurdeckenlicht:Schalter").DPByHssDP("STATE").Value();
var L13 = dom.GetObject("Garagenlicht:Schalter").DPByHssDP("STATE").Value();
var L14 = dom.GetObject("Treppenhauslicht:Schalter").DPByHssDP("STATE").Value();
var L15 = dom.GetObject("UG Flur-Lampe:Schalter").DPByHssDP("STATE").Value();
var L16 = dom.GetObject("Wohnzimmer Stehlampe:Schalter").DPByHssDP("STATE").Value();
var L17 = dom.GetObject("Wohnzimmer TV LED:Schalter").DPByHssDP("STATE").Value();
var L18 = dom.GetObject("Wohnzimmer Leselampe:Schalter").DPByHssDP("STATE").Value();
var L19 = dom.GetObject("Wohnzimmer Sofa LED:Schalter").DPByHssDP("STATE").Value();
var L20 = dom.GetObject("Esstisch:Schalter").DPByHssDP("STATE").Value();
var L21 = dom.GetObject("EG Flur-Lampe:Schalter").DPByHssDP("STATE").Value();
var L22 = dom.GetObject("Küche Arbeitsfläche:Schalter").DPByHssDP("STATE").Value();
var L23 = dom.GetObject("Küche Unterlicht:Schalter").DPByHssDP("STATE").Value();
var L24 = dom.GetObject("Terrasse Licht:Schalter").DPByHssDP("STATE").Value();
var L25 = dom.GetObject("Gartenbeleuchtung:Schalter").DPByHssDP("STATE").Value();
var L26 = dom.GetObject("Waschmaschine:Schalter").DPByHssDP("STATE").Value();
var L27 = dom.GetObject("Trockner:Schalter").DPByHssDP("STATE").Value();
var L28 = dom.GetObject("Warmwasser PV Heizstab:Schalter").DPByHssDP("STATE").Value();
var L29 = dom.GetObject("Wasser Umwälzpumpe:Schalter").DPByHssDP("STATE").Value();
var L30 = dom.GetObject("Trockner:Messwert").DPByHssDP("POWER").Value();
var L31 = dom.GetObject("Waschmaschine:Messwert").DPByHssDP("POWER").Value();
var L32 = dom.GetObject("Warmwasser PV Heizstab:Messwert").DPByHssDP("POWER").Value();

var L33 = dom.GetObject("S:Morgenlicht an");
var L34 = dom.GetObject("S:Abendlicht Sonnenuntergang");
var L35 = dom.GetObject("S:Abendlicht aus");

var L36 = dom.GetObject("Haustürschloss:1").DPByHssDP("STATE").Value();
var L37 = dom.GetObject("Terrasse Steckdose:Schalter").DPByHssDP("STATE").Value();

! Letzte Statusänderung auslesen
! ------------------------------
var tL10 = dom.GetObject("Büro Dietmar Licht:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL11 = dom.GetObject("Büro Dietmar Deckenlicht:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL12 = dom.GetObject("Flurdeckenlicht:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL13 = dom.GetObject("Garagenlicht:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL14 = dom.GetObject("Treppenhauslicht:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL15 = dom.GetObject("UG Flur-Lampe:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL16 = dom.GetObject("Wohnzimmer Stehlampe:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL17 = dom.GetObject("Wohnzimmer TV LED:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL18 = dom.GetObject("Wohnzimmer Leselampe:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL19 = dom.GetObject("Wohnzimmer Sofa LED:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL20 = dom.GetObject("Esstisch:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL21 = dom.GetObject("EG Flur-Lampe:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL22 = dom.GetObject("Küche Arbeitsfläche:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL23 = dom.GetObject("Küche Unterlicht:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL24 = dom.GetObject("Terrasse Licht:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL25 = dom.GetObject("Gartenbeleuchtung:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL26 = dom.GetObject("Waschmaschine:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL27 = dom.GetObject("Trockner:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL28 = dom.GetObject("Warmwasser PV Heizstab:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL29 = dom.GetObject("Wasser Umwälzpumpe:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL30 = dom.GetObject("Waschmaschine:Messwert").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL31 = dom.GetObject("Trockner:Messwert").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL32 = dom.GetObject("Warmwasser PV Heizstab:Messwert").LastDPActionTime().Format("%d.%m.%y %H:%M");

var tL36 = dom.GetObject("Haustürschloss:1").LastDPActionTime().Format("%d.%m.%y %H:%M");
var tL37 = dom.GetObject("Terrasse Steckdose:Schalter").LastDPActionTime().Format("%d.%m.%y %H:%M");

! ---------------------------------------------------
! Template in HTML String übernehmen und vorbereiten
var sHTML   = oInput.Value();
!WriteLine("Input  = " # sHTML);

! Ungültige Zeichen entfernen oder ersetzen
sHTML = sHTML.Replace("\n", "");   ! Zeilenumbrüche im String entfernen

! Daten in HTML String eintragen
sHTML = sHTML.Replace("T00", T00);

sHTML = sHTML.Replace("<td>L10", (off_on.StrValueByIndex("#",L10)));
sHTML = sHTML.Replace("<td>L11", (off_on.StrValueByIndex("#",L11)));
sHTML = sHTML.Replace("<td>L12", (off_on.StrValueByIndex("#",L12)));
sHTML = sHTML.Replace("<td>L13", (off_on.StrValueByIndex("#",L13)));
sHTML = sHTML.Replace("<td>L14", (off_on.StrValueByIndex("#",L14)));
sHTML = sHTML.Replace("<td>L15", (off_on.StrValueByIndex("#",L15)));
sHTML = sHTML.Replace("<td>L16", (off_on.StrValueByIndex("#",L16)));
sHTML = sHTML.Replace("<td>L17", (off_on.StrValueByIndex("#",L17)));
sHTML = sHTML.Replace("<td>L18", (off_on.StrValueByIndex("#",L18)));
sHTML = sHTML.Replace("<td>L19", (off_on.StrValueByIndex("#",L19)));
sHTML = sHTML.Replace("<td>L20", (off_on.StrValueByIndex("#",L20)));
sHTML = sHTML.Replace("<td>L21", (off_on.StrValueByIndex("#",L21)));
sHTML = sHTML.Replace("<td>L22", (off_on.StrValueByIndex("#",L22)));
sHTML = sHTML.Replace("<td>L23", (off_on.StrValueByIndex("#",L23)));
sHTML = sHTML.Replace("<td>L24", (off_on.StrValueByIndex("#",L24)));
sHTML = sHTML.Replace("<td>L25", (off_on.StrValueByIndex("#",L25)));
sHTML = sHTML.Replace("<td>L26", (off_red_on.StrValueByIndex("#",L26)));
sHTML = sHTML.Replace("<td>L27", (off_red_on.StrValueByIndex("#",L27)));
sHTML = sHTML.Replace("<td>L28", (off_red_on.StrValueByIndex("#",L28)));
sHTML = sHTML.Replace("<td>L29", (off_on.StrValueByIndex("#",L29)));
sHTML = sHTML.Replace("<td>L36", (door_off_on.StrValueByIndex("#",L36)));
sHTML = sHTML.Replace("<td>L37", (off_on.StrValueByIndex("#",L37)));

sHTML = sHTML.Replace("L30", L30.ToString(1));
sHTML = sHTML.Replace("L31", L31.ToString(1));
sHTML = sHTML.Replace("L32", L32.ToString(1));

sHTML = sHTML.Replace("L33", L33.ValueList().StrValueByIndex(";", L33.Value()));
sHTML = sHTML.Replace("L34", L34.ValueList().StrValueByIndex(";", L34.Value()));
sHTML = sHTML.Replace("L35", L35.ValueList().StrValueByIndex(";", L35.Value()));


sHTML = sHTML.Replace("tL10", tL10);
sHTML = sHTML.Replace("tL11", tL11);
sHTML = sHTML.Replace("tL12", tL12);
sHTML = sHTML.Replace("tL13", tL13);
sHTML = sHTML.Replace("tL14", tL14);
sHTML = sHTML.Replace("tL15", tL15);
sHTML = sHTML.Replace("tL16", tL16);
sHTML = sHTML.Replace("tL17", tL17);
sHTML = sHTML.Replace("tL18", tL18);
sHTML = sHTML.Replace("tL19", tL19);
sHTML = sHTML.Replace("tL20", tL20);
sHTML = sHTML.Replace("tL21", tL21);
sHTML = sHTML.Replace("tL22", tL22);
sHTML = sHTML.Replace("tL23", tL23);
sHTML = sHTML.Replace("tL24", tL24);
sHTML = sHTML.Replace("tL25", tL25);
sHTML = sHTML.Replace("tL26", tL26);
sHTML = sHTML.Replace("tL27", tL27);
sHTML = sHTML.Replace("tL28", tL28);
sHTML = sHTML.Replace("tL29", tL29);
sHTML = sHTML.Replace("tL30", tL30);
sHTML = sHTML.Replace("tL31", tL31);
sHTML = sHTML.Replace("tL32", tL32);

sHTML = sHTML.Replace("tL36", tL36);
sHTML = sHTML.Replace("tL37", tL37);

! Spezialbehandlungen
! -------------------

WriteLine("Output = " # sHTML);

! HTML String in Anzeig-Variable schreiben
oOutput.Variable( sHTML );

WriteLine(" fertig");
Anzeige:
IMG_Licht.PNG

Noch eine Anmerkung:
-- Bei mir lässt sich die Systemvariable mit dem HTML Text im HM WebGUI nur über einen Trick wieder ändern: Systemvariable öffnen, Typ der Variablen auf Logik ändern und wieder auf Zeichenkette zurücksetzen. Jetzt kann der neue HTML Text wieder hinein kopiert werden
- Raspberry 3B (Charly)
- 121 Geräten mit insgesamt 493 Kanälen, 1 HmIP-HAP als Repeater
- 2 separate Raspberry mit jeweils Historian und ioBroker
Nach oben
X-1978
Beiträge: 11
Registriert: 17.08.2018, 09:11

Re: Datentabellen mit HTML in @Home anzeigen

Beitrag von X-1978 » 06.02.2022, 22:32

Hallo,

super guter Beitrag, vielen Dank dafür. Hast du Erfahrungen mit dem einbinden von Webseiten (iFrames), z.B. Webcam Bild, Wetter Widget?

Gruß
Martin
Nach oben
DidiTheE
Beiträge: 101
Registriert: 19.02.2018, 20:52
Wohnort: Waldshut-Tiengen
Hat sich bedankt: 11 Mal
Danksagung erhalten: 7 Mal

Re: Datentabellen mit HTML in @Home anzeigen

Beitrag von DidiTheE » 07.02.2022, 15:47

Ja, ich binde z.B. HighChart über iframe ein.
Beispiel:

Code: Alles auswählen

<div style='position: relative; width: 100%; height: 500px;'><iframe src='http://192.168.123.42:8080/custom/h2-highchart/H2-HighChart.gy?periode=72&dp=535|Y1|F16,546|Y1|F18,267|Y1|L6|F13|W1&yaxis=Y1|F18|T&legend=6&navigator=3&refresh=600&filterline=false&fontsize=10' frameborder='0' allowfullscreen style='position: absolute; width: 100%; height: 100%; left: 0; top: 0;'></iframe></div>
Bringt folgende Darstellung:
IMG_7008.PNG
Geht natürlich auch mit anderen Webseiten, macht aber sicher nur Sinn, wenn die Seiten Mobile-tauglich sind.
Webcams habe ich selber noch nicht probiert, sollte aber nach obigem Prinzip auch funktionieren.
- Raspberry 3B (Charly)
- 121 Geräten mit insgesamt 493 Kanälen, 1 HmIP-HAP als Repeater
- 2 separate Raspberry mit jeweils Historian und ioBroker
Nach oben
Antworten

Zurück zu „HomeMatic Apps und Desktop-Anwendungen“