HTML-Box Skalierung


Hier ist der Chart unten nicht abgeschnitten (verkleinert)

Die Tablle „Ladezeiten“

Das Wetter

Interessanterweise stimmt es auch nicht wenn ich die Kachel vergrößere. Vorher (wann immer das auch war) wurde die HTML verkleinert angezeigt und ich konnte mit der Geste aufzoomen.

Das sieht jetzt auf den ersten Blick für mich richtig aus, auch wenn offenbar nicht wie von dir gewollt. Was würdest du anders erwarten bzw. was war vorher anders? Ich vermute das sind Variablen mit dem Profil ~HTML-Box? Oder sind das Instanzen mit einer individuellen Darstellung oder gar Variablen mit der neuen Darstellung Web Inhalt?

Richtig oder falsch ist eine Glaubensfrage :smiley:

Eher nicht erwaret.

Das das HTML Code in die Größe der verlinkten Variable gequetscht wird. So war es bisher. Klar, die Tabelle der Ladezeiten war zwar unleserlich und nicht bedienbar, aber dafür hatte ich den Zoom. Dafür hat die Gesamtoptik gestimmt. Beim Wetter ist es wirklich unschön, weil es vorher reingepasst hat. Komplett.

Ja genau. Die Variablen sind direkt in der Visu verlinkt, ohne in einer Instanz (ich verwende wenn, dann nur Dummy-Instanze in der Visualisierung) darüber.

Ah, es geht gar nicht um die Textgröße. Ich habe es gerade mal mit einer 7.2 abgeglichen und da sieht es genau so aus. Daher sehe ich nichts, was wir da direkt machen könnten, da müsste da eher der HTML-Inhalt angepasst werden müssen. Alternativ könntest du die mobile Optimierung einfach wieder aktivieren, indem du im HTML

<meta name="viewport">

am Anfang einfügst. Vielleicht erreicht das deinen gewünschten Effekt.

Ich probier das mal, obwohl mir nicht bewußt war, das gelöscht zu haben :wink:

Also <meta name="viewport">hilft bei der Tabelle tatsächlich.
Jetzt muss ich bei den Grafana Graphen noch schauen.
Da muss es irgendwie in den iframe rein

Ja, wenn ich bei allen HTML-Variablen das einfüge, dann sieht es so aus, wie vor dem Update.

Postest Du das Ergebnis hier? Ich habe es noch nicht geschaftt :frowning:

//Tabelle Erstellen


$columnHeaders = ["Restbezug " . $jahrheuer, "Restkosten " . $jahrheuer,  "Lieferung " . $jahrheuer, "EinspeiseVG. " . $jahrheuer,  "EigenV. " . $jahrheuer, "EigenV. Ersparnis " . $jahrvorjahr, "Restbezug " . $jahrvorjahr, "Restkosten " . $jahrvorjahr,  "Lieferung " . $jahrvorjahr, "EinspeiseVG. " . $jahrvorjahr,  "EigenV. " . $jahrvorjahr, "EigenV. Ersparnis " . $jahrvorjahr, "Restbezug " . $jahrvorvorjahr, "Restkosten " . $jahrvorvorjahr,  "Lieferung " . $jahrvorvorjahr, "EinspeiseVG. " . $jahrvorvorjahr,  "EigenV. " . $jahrvorvorjahr, "EigenV. Ersparnis " . $jahrvorvorjahr ];
$months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", "Gesamt"];


$style = "";
$style .= '<style type="text/css">';
$style .= 'table { border-collapse: collapse; font-size: 12px; width: 100%; border: 2px solid black; }';
$style .= 'th, td { vertical-align: middle; text-align: center; padding: 1px; border: 1px solid rgba(255, 255, 255, 0.2); border: 2px solid black; }';
$style .= 'td.fst { text-align: left; }';
$style .= 'td.mid { vertical-align: middle; white-space: nowrap; text-align: center; padding: 1px; border-top: 1px solid rgba(255, 255, 255, 0.2); }';
$style .= 'td.lst { white-space: nowrap; bold; color: yellow; font-size: 12px; }';
$style .= '.th { color: rgb(255, 255, 255); background-color: rgb(160,160,0); font-weight: bold; height: 10px; font-size: 12px; }';
$style .= '.month-cell { font-weight: bold; background-color: rgba(0, 0, 0, 0.2); text-align: left; }';
$style .= '.total-cell { color:lightgreen; font-size: 15px; background-color: rgba(212, 237, 218, 0.2); }';
$style .= '.heating-section th { color: rgb(255, 255, 255); background-color: rgb(34,139,34); font-weight: bold; height: 10px; }';
$style .= '.heating-section th.empty-cell { background-color: rgba(0, 0, 0, 0.2); }';
$style .= 'tr:nth-child(even) { background-color: rgba(207,207,207, 0.2); }';
$style .= 'tr:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }';
$style .= '<meta name="viewport">';
$style .= '</style>';
$html = $style;

$html .= " <table>
    <tr>
        <th class='fst th'>Monat</th>"; // Beschriftung für die Spalte der Monatsnamen

foreach ($columnHeaders as $header) {
    $html .= "<th class='mid th'>" . $header . "</th>";  
}

$html .= "</tr>";

foreach ($months as $monthI) {
    $html .= "<tr><td class='fst month-cell'>" . $monthI . "</td>";
    // Dynamisch die Daten für jede Spalte einfügen
    if ($monthI !== "Gesamt") {
        $html .= "<td class='mid'>" . (is_numeric($monatSummenHeuerBez[$monthI]) ? round($monatSummenHeuerBez[$monthI], 2) : 'no value') . " kWh</td>";
        $html .= "<td class='mid'>" . (is_numeric($arGesamtHeuerKostenBezTab[$monthI]) ? round($arGesamtHeuerKostenBezTab[$monthI], 2) : 'no value') . " €</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenHeuerL[$monthI]) ? round($monatSummenHeuerL[$monthI], 2) : 'no value') . " kWh</td>";
        $html .= "<td class='mid'>" . (is_numeric($arGesamtHeuerKostenLTab[$monthI]) ? round($arGesamtHeuerKostenLTab[$monthI], 2) : 'no value') . " €</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenHeuerEV[$monthI]["kWh"]) ? round($monatSummenHeuerEV[$monthI]["kWh"], 2) : 'no value') . " kWh</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenHeuerEV[$monthI]["kosten"]) ? round($monatSummenHeuerEV[$monthI]["kosten"], 2) : 'no value') . " €</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenVorjahrBez[$monthI]) ? round($monatSummenVorjahrBez[$monthI], 2) : 'no value') . " kWh</td>";
        $html .= "<td class='mid'>" . (is_numeric($arGesamtVorjahrKostenBezTab[$monthI]) ? round($arGesamtVorjahrKostenBezTab[$monthI], 2) : 'no value') . " €</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenVorjahrL[$monthI]) ? round($monatSummenVorjahrL[$monthI], 2) : 'no value') . " kWh</td>";
        $html .= "<td class='mid'>" . (is_numeric($arGesamtVorjahrKostenLTab[$monthI]) ? round($arGesamtVorjahrKostenLTab[$monthI], 2) : 'no value') . " €</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenVorjahrEV[$monthI]["kWh"]) ? round($monatSummenVorjahrEV[$monthI]["kWh"], 2) : 'no value') . " kWh</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenVorjahrEV[$monthI]["kosten"]) ? round($monatSummenVorjahrEV[$monthI]["kosten"], 2) : 'no value') . " €</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenVorvorjahrBez[$monthI]) ? round($monatSummenVorvorjahrBez[$monthI], 2) : 'no value') . " kWh</td>";
        $html .= "<td class='mid'>" . (is_numeric($arGesamtVorvorjahrKostenBezTab[$monthI]) ? round($arGesamtVorvorjahrKostenBezTab[$monthI], 2) : 'no value') . " €</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenVorvorjahrL[$monthI]) ? round($monatSummenVorvorjahrL[$monthI], 2) : 'no value') . " kWh</td>";
        $html .= "<td class='mid'>" . (is_numeric($arGesamtVorvorjahrKostenLTab[$monthI]) ? round($arGesamtVorvorjahrKostenLTab[$monthI], 2) : 'no value') . " €</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenVorvorjahrEV[$monthI]["kWh"]) ? round($monatSummenVorvorjahrEV[$monthI]["kWh"], 2) : 'no value') . " kWh</td>";
        $html .= "<td class='mid'>" . (is_numeric($monatSummenVorvorjahrEV[$monthI]["kosten"]) ? round($monatSummenVorvorjahrEV[$monthI]["kosten"], 2) : 'no value') . " €</td>";
    } else {
        // Gesamtwerte
        $html .= "<td class='lst'>" . (is_numeric($GesamtHeuerBezTab) ? round($GesamtHeuerBezTab, 2) : 'no value') . " kWh</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtHeuerKostenBezTab) ? round($GesamtHeuerKostenBezTab, 2) : 'no value') . " €</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtHeuerLTab) ? round($GesamtHeuerLTab, 2) : 'no value') . " kWh</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtHeuerKostenLTab) ? round($GesamtHeuerKostenLTab, 2) : 'no value') . " €</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtHeuerEVTab) ? round($GesamtHeuerEVTab, 2) : 'no value') . " kWh</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtHeuerKostenEVTab) ? round($GesamtHeuerKostenEVTab, 2) : 'no value') . " €</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorjahrBezTab) ? round($GesamtVorjahrBezTab, 2) : 'no value') . " kWh</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorjahrKostenBezTab) ? round($GesamtVorjahrKostenBezTab, 2) : 'no value') . " €</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorjahrLTab) ? round($GesamtVorjahrLTab, 2) : 'no value') . " kWh</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorjahrKostenLTab) ? round($GesamtVorjahrKostenLTab, 2) : 'no value') . " €</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorjahrEVTab) ? round($GesamtVorjahrEVTab, 2) : 'no value') . " kWh</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorjahrKostenEVTab) ? round($GesamtVorjahrKostenEVTab, 2) : 'no value') . " €</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorvorjahrBezTab) ? round($GesamtVorvorjahrBezTab, 2) : 'no value') . " kWh</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorvorjahrKostenBezTab) ? round($GesamtVorvorjahrKostenBezTab, 2) : 'no value') . " €</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorvorjahrLTab) ? round($GesamtVorvorjahrLTab, 2) : 'no value') . " kWh</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorvorjahrKostenLTab) ? round($GesamtVorvorjahrKostenLTab, 2) : 'no value') . " €</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorvorjahrEVTab) ? round($GesamtVorvorjahrEVTab, 2) : 'no value') . " kWh</td>";
        $html .= "<td class='lst'>" . (is_numeric($GesamtVorvorjahrKostenEVTab) ? round($GesamtVorvorjahrKostenEVTab, 2) : 'no value') . " €</td>";        
}
    $html .= "</tr>";    
}

// Hier fügen wir die Gesamtergebnisse hinzu, die über die entsprechenden Spalten gehen
$html .= "<tr>";
$html .= "<td colspan='1'</td>";
$html .= "<td colspan='6' class='total-cell'>Das Gesamtergebnis $jahrheuer beträgt&nbsp;&nbsp;&nbsp; <span style='color: orange;'>" . (is_numeric($GesamtertragHeuerTab) ? round($GesamtertragHeuerTab, 2) : 'no value') . " €</span></td>";
$html .= "<td colspan='6' class='total-cell'>Das Gesamtergebnis $jahrvorjahr beträgt&nbsp;&nbsp;&nbsp; <span style='color: orange;'>" .(is_numeric($GesamtertragVorjahrTab) ? round($GesamtertragVorjahrTab, 2) : 'no value') . " €</span></td>";
$html .= "<td colspan='6' class='total-cell'>Das Gesamtergebnis $jahrvorvorjahr beträgt&nbsp;&nbsp;&nbsp; <span style='color: orange;'>" .(is_numeric($GesamtertragVorvorjahrTab) ? round($GesamtertragVorvorjahrTab, 2) : 'no value') . " €</span></td>";
$html .= "</tr>";

SetValue($variable, $html);

Ziemlich am Ende der Style Variable findest du die Zeile.

Und für Grafana, auch einfach am Ende vom iframe

$s = '<iframe src="http://'.$IPAddr.'/d-solo/............../pv-anlage?orgId=1&refresh=30m'.$from.$start.$millisec.$to.$stopp.$millisec.'&panelId=1" width="730" height="850" frameborder="0" <meta name="viewport">></iframe>';

Das Ergebnis mit dem IFrame löst zwar unseren Check aus, dass es bereits einen entsprechenden Meta-Tag gibt und wir ihn nicht überschreiben, aber ist vom HTML her nicht ganz korrekt :wink: Korrekt wäre es mit dem Tag einfach vor dem IFrame, also:

$s = '<meta name="viewport"><iframe src="http://'.$IPAddr.'/d-solo/............../pv-anlage?orgId=1&refresh=30m'.$from.$start.$millisec.$to.$stopp.$millisec.'&panelId=1" width="730" height="850" frameborder="0"></iframe>';