[5.0] iOS Client HTML Box

Hallo Andreas,
bei mir (iOS Client) wird eine vorher passende HTML Box im neuen Client viel zu groß angezeigt - die View ist die gleiche geblieben - woran könnte das liegen? Ich habe mal Screenshots der alten Version sowie der neuen Version (mit Testflight) angehängt.

Gruß


Der alte iOS Client konnte HTML Content automatisch skalieren, dass kann der neue leider nicht mehr - wenn Du die Breite in HMTL mit 100% definierst (und nicht in Pixel), dann sollte es klappen :wink:

Hi,
unten das Script welches meine HTML Box füllt - die Breite ist da doch in 100% definiert, oder schaue ich an der falschen Stelle? Muss gestehen, dass ich das Script damals zusammenkopiert habe - bin in HTML absolut nicht fit, vielleicht findet ja jemand den Fehler.

<?
$max_elements = 30; // max elements in table
$message = GetValue(44538); // Wert aus der Variable auslesen
$sender = GetValueString(56712); // Name des Senders
$list_id = 46113; // String Variable mit Profil ~HTMLBox
// CSS Helper for tables http://divtable.com/table-styler/
$css = 'body {color:white; font-size:100%;}
table.liste { width: 100%; border-collapse: true; border: 0px; }
table.liste td { border: 1px solid white; }
table.liste th { border: 1px solid white; }'; // configuration of the table layout

$HTML = SetHTMLList($list_id, $sender, $message, $max_elements, $css);
//var_dump($HTML);

function SetHTMLList($list_id, $sender, $message, $max_elements, $css)
{
    $table_info = GetTable($list_id);
    $table_header = $table_info["table_header"];
    $table_rows = $table_info["table_rows"];
    $HTML = WriteTable($list_id, $table_header, $table_rows, $sender, $message, $max_elements, $css);
    return $HTML;
}

function WriteTable($list_id, $table_header, $table_rows, $sender, $message, $max_elements, $css)
{
    $HTML_Head = '<html>
    <head>
        <title>HTML Table</title>
    </head>
    <style type="text/css">'
    .$css.
    '</style>
    <body>';
    $HTML_Footer = '</body>
    </html>';

    $html_table_header ='<table border = "0" class="liste"><tr align="left">';
    $html_table_header.='<th>'.$table_header[0].'</th>';
    $html_table_header.='<th>'.$table_header[1].'</th>';
    $html_table_header.='<th>'.$table_header[2].'</th>';
    $html_table_header.='<th>'.$table_header[3].'</th></tr>';
    
    $data = array($table_header[0] => date("d.m.Y"), $table_header[1] => date("H:i:s"), $table_header[2] => $sender, $table_header[3] => $message);
    array_unshift ($table_rows, $data);                            // add new value to array
    $table_rows = array_slice($table_rows, 0, $max_elements);        // cut off old value
    $html_table_rows = '';
    foreach($table_rows as $key => $table_row)
    {
        $html_table_rows .= '<tr align="left"><td>'.$table_row[$table_header[0]].'</td>';
        $html_table_rows .= '<td>'.$table_row[$table_header[1]].'</td>';
        $html_table_rows .= '<td>'.$table_row[$table_header[2]].'</td>';
        $html_table_rows .= '<td>'.$table_row[$table_header[3]].'</td></tr>';
    }
    $HTML_Table = $html_table_header.$html_table_rows;
    $HTML = $HTML_Head.$HTML_Table.$HTML_Footer;
    SetValue($list_id, $HTML);
    return $HTML;
}

function GetTable($list_id)
{    
    
    $htmlContent = GetValue($list_id);
        
    $DOM = new DOMDocument();
    $domhtmlcontent = @$DOM->loadHTML($htmlContent);
    if(empty($domhtmlcontent))
    {
        $aDataTableHeaderHTML = array("Datum", "Uhrzeit", "Sender", "Meldung");
        $aDataTableDetailHTML = array();
    }
    else
    {
        $DOM->loadHTML($htmlContent);
    
        $Header = $DOM->getElementsByTagName('th');
        $Detail = $DOM->getElementsByTagName('td');
        
        //#Get header name of the table
        foreach($Header as $NodeHeader) 
        {
            $aDataTableHeaderHTML[] = utf8_decode(trim($NodeHeader->textContent));
        }
        
        if(empty($aDataTableHeaderHTML))
        {
            $aDataTableHeaderHTML = array("Datum", "Uhrzeit", "Sender", "Meldung");
            $aDataTableDetailHTML = array();
        }
        else
        {
            //#Get row data/detail table without header name as key
            $i = 0;
            $j = 0;
            foreach($Detail as $sNodeDetail) 
            {
                $aDataTableDetailHTML[$j][] = utf8_decode(trim($sNodeDetail->textContent));
                $i = $i + 1;
                $j = $i % count($aDataTableHeaderHTML) == 0 ? $j + 1 : $j;
            }
            
            //#Get row data/detail table with header name as key and outer array index as row number
            for($i = 0; $i < count($aDataTableDetailHTML); $i++)
            {
                for($j = 0; $j < count($aDataTableHeaderHTML); $j++)
                {
                    $aTempData[$i][$aDataTableHeaderHTML[$j]] = $aDataTableDetailHTML[$i][$j];
                }
            }
            $aDataTableDetailHTML = $aTempData; unset($aTempData);
        }
    }    
    $table_header = $aDataTableHeaderHTML;
    $table_rows = $aDataTableDetailHTML;
    return array("table_header" => $table_header, "table_rows" => $table_rows);
}
?>  

Gruß

EDIT: Wenn ich mit dem Width Wert spiele (gleiches gilt übrigens für die Schriftgröße), dann ändern sehe ich die Änderung in der HTML Box im Webfront, in IPSView ändert sich jedoch nichts, ist das ein Bug?

Poste doch mal das HTML, dann kann ich das mal zum Nachstellen versuchen;)

Hi Andreas,
das ist der Content der Variable für die HTML Box:

<html>    <head>        <title>HTML Table</title>    </head>    <style type="text/css">body {color:white; font-size:1em;}table.liste { width: 20%; border-collapse: true; border: 0px; }table.liste td { border: 1px solid white; }table.liste th { border: 1px solid white; }</style>    <body><table border = "0" class="liste"><tr align="left"><th>Datum</th><th>Uhrzeit</th><th>Sender</th><th>Meldung</th></tr><tr align="left"><td>20.09.2020</td><td>23:28:59</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>20.09.2020</td><td>19:30:57</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>20.09.2020</td><td>19:19:46</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>20.09.2020</td><td>19:19:16</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>20.09.2020</td><td>19:09:50</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>20.09.2020</td><td>19:09:38</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>20.09.2020</td><td>19:08:32</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>20.09.2020</td><td>13:11:20</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>20.09.2020</td><td>02:58:19</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>19.09.2020</td><td>17:21:39</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>19.09.2020</td><td>12:39:08</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>19.09.2020</td><td>12:09:41</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>21:38:34</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>17:04:44</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>16:50:05</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>16:49:50</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>16:49:40</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>16:35:03</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>16:34:53</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>16:34:44</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>16:34:13</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>15:53:35</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>18.09.2020</td><td>15:53:31</td><td>999001902003405</td><td>Zutritt verweigert!</td></tr><tr align="left"><td>18.09.2020</td><td>15:50:12</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>17.09.2020</td><td>21:36:46</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>17.09.2020</td><td>20:07:50</td><td>Testchip 1</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>11.09.2020</td><td>09:41:44</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>10.09.2020</td><td>06:27:22</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>10.09.2020</td><td>06:27:19</td><td>Ginger</td><td>Zutritt gewährt!</td></tr><tr align="left"><td>09.09.2020</td><td>10:54:08</td><td>Ginger</td><td>Zutritt gewährt!</td></tr></body>    </html>

Gruß

Dein HTML wird bei mir genau so angezeigt wie im WebFront, auch im WebFront wird der Content nicht vollständig angezeigt wenn man das Fenster dementsprechend klein macht.

Der alte Client hatte eine Option um das automatisch zu skalieren, das ist im neuen Client leider nicht mehr vorhanden. Hab bis dato leider auch noch keine Möglichkeit gefunden, wie ich das selber realisieren könnte.

Du kannst das aber selber machen, indem Du zB in den Styles einen Zoom Faktor angibst:

html, body {zoom: 80%}

Hi,
das wird daran gelegen haben, dass in meinem Beispiel HTML die Width zum testen noch auf 20% stand - bei 100% sah man den Unterschied zwischen IPSView und dem WF. Der Zoom Parameter war aber der entscheidende Hinweis - damit klappt es nun - vielen Dank! Allerdings zoomt bei mir hierbei das komplette Webfront inkl. der Menüstruktur - für mich hier aber kein großes Problem, da ich eh nur IPSView nutze.

Gruß