Neuer Style: f18

[kennymc.c]

Ich hab jetzt mit Dragging active eine Ansicht für größere Auflösungen erstellt und nutzte column jetzt nur noch für die Sortierung mit horizontal kleineren Auflösungen. Obwohl ich das nur nur in einem Raum gemacht habe, gab es aber auch verschobene Elemente in andere Räumen. Konnte ich dann über das Verbotsschild zurücksetzten. Trotzdem stehen in styleData noch Daten für anderen Räume mit drin, die ich nie verändert habe.

[TomLee]

Hi und frohe Ostern,

hab jetzt genug gelesen und gesucht, komm wirklich nicht drauf.
Was muss ich denn genau tun um ein Hintergrundbild in f18 anzugeben.
Die Alternativen sind mir klar, aber direkt mit der Möglichkeit in f18 unter Edit Style einfach ein Icon auszuwählen welches  in /wwww/images/background hinterlegt ist gelingt mir nicht. Das Dialogfeld gibt mir auch nachdem ich ein Icon in dem Ordner background erstellt habe (restart wurde auch gemacht) "none" zurück. Es bringt auch nix den Ordner background in iconpath der FHEMWEB-Definition zu ergänzen.

Auf meinen Installationen verhält es sich genauso wie auf der Demo Seite.
Das Dalogfeld dort gibt auch weiterhin "none" zurück.

Dort hab ich zu Testzwecken auch eine frohe_ostern.svg in /wwww/images/background hinterlegt.

Was muss nach dem ergänzen der Datei noch gemacht werden ?
Falls es irgendwo dokumentiert ist, wo steht es, ich finde es nicht ?

Gruß

Thomas

[schwatter]

Frohe Ostern,

pack mal ein .jpg in den Ordner wwww/images/background


Gruß schwatter

[TomLee]

Danke. Im Eifer des Gefechts nicht einen Gedanken zugelassen das SVG-Dateien nicht unterstützt werden 

[myhome]

Problem mit dem Style "Transparent". Habe die Tage mal wieder ein Update von fhem gemacht, dabei gab es wohl ein f18 update. Leider ist dadurch der Hintergrund bei vielen Icons nicht mehr "Transparent". Bei den anderen Styles ist alles wie es soll, nur bei f18 nicht mehr.
Du darfst diesen Dateianhang nicht ansehen.Du darfst diesen Dateianhang nicht ansehen.   

Im ersten Bild ist ein transparenter DOIF Switch (ICON) über das Icon (Mülltonne) gelegt. Das 2te Bild ist glaube ich selbsterklärend.

So sieht es normal aus, bzw. hat es auch mal unter f18

Du darfst diesen Dateianhang nicht ansehen.

Hi zusammen  update 11.06.2024

ich habe den Fehler gefunden, warum unter f18.js seit dem Update die transparente Darstellung unter uiTable Funktionen wie switch etc. nicht funktioniert. Es liegt an den "Neu" eingefügten Zeilen ab 793 bis 797 für uzsu, wobei ich als OBER-Laie meine es liegt nur an Zeile 794 an
  style += ".ui-state-default "+bg(col("bg")+"!important");
.....
Diese Zeilen sind bei dem Update neu dazu gekommen; Nehme ich sie raus oder spiele die alte Version ein sind die grauen Kästchen oder bei den Icon diese wieder Transparent.

[Damian]

Man kann sich jetzt darüber streiten, ob es ein Bug ist oder ein Feature. Ich finde es gar nicht so schlecht, wenn das Widget iconSwitch, auf dem die Switch-Funktion basiert, einen Hintergrund bekommen hat, so weiß man jetzt, wo man klicken muss, um den Schalter zu betätigen.

Ich würde die zusätzlichen Zahlen (was immer sie bedeuten sollen), so wie die Anzahl der Tage neben der Tonne realisieren. Das ist der Code der Funktion icon_label, welche hier für die Tonne mit ihrer Anzahl der Tage benutzt wird:

Code Auswählen Erweitern

sub icon_label
 {
   my ($icon,$text,$color,$color_bg,$pos_left,$pos_top) = @_;
   $color = "" if (!defined ($color));
   $color_bg = "" if (!defined ($color_bg));
   $pos_left = -3 if (!defined ($pos_left));
   $pos_top = -8 if (!defined ($pos_top));
   my $pad = (length($text) > 1) ? 2 : 5;
   return '<div style="display:inline-table;">'.::FW_makeImage($icon).'<div style="display:inline;border-radius:20px;color:'.$color.';background-color:'.
          $color_bg.
          ';font-size:14px;font-weight:bold;text-align:center;position:relative;padding-top: 1px;padding-left: '.$pad.'px; padding-right: '.$pad.'px;padding-bottom: 1px;'.
          'left:'.$pos_left.'px;top:'.$pos_top.'px;">'.$text.'</div></div>'
 }

[mumpitzstuff]

Falls du eventuell die nächste und übernächste Leerung damit darstellen wolltest, dann könntest du das auch so realisieren.

Code Auswählen Erweitern

defmod doif_Abfall DOIF ##
attr doif_Abfall room KALENDER
attr doif_Abfall uiTable {\
  package ui_Table;;\
\
  $SHOWNOSTATE=1;;\
\
  sub ic\
  {\
    my ($icon, $days, $days2) = @_;;\
    \
    icon_label2($icon, $days, $days2, 'white', (1 == $days ? 'red' : 2 == $days ? 'darkorange' : 'green'));;\
  }\
  \
  sub icon_label2\
  {\
    my ($icon, $text, $text2, $color, $color_bg, $pos_left, $pos_top) = @_;;\
    my $pad = ((length($text) > 1) ? 2 : 5);;\
    my $pad2 = ((length($text2) > 1) ? 2 : 5);;\
    \
    $color = "" if (!defined ($color));;\
    $color_bg = "" if (!defined ($color_bg));;\
    $pos_left = -5 if (!defined ($pos_left));;\
    $pos_top = -10 if (!defined ($pos_top));;\
   \
    return '<div style="display:inline-table;;">'.::FW_makeImage($icon).\
           '<div style="display:inline;;width:16px;;height:14px;;border-radius:14px;;color:'.$color.';;background-color:'.$color_bg.\
           ';;font-size:10px;;font-weight:700;;text-align:center;;position:relative;;padding-top:1px;;padding-left:'.$pad.'px;;padding-right:'.$pad.'px;;padding-bottom:1px;;'.\
           'left:'.$pos_left.'px;;top:'.$pos_top.'px;;">'.$text.'</div>'.\
           '<div style="display:inline;;width:16px;;height:14px;;border-radius:14px;;color:'.$color.';;border:1px solid white;;'.\
           'font-size:10px;;font-weight:700;;text-align:center;;position:relative;;padding-top:1px;;padding-left:'.$pad2.'px;;padding-right:'.$pad2.'px;;padding-bottom:1px;;'.\
           'left:'.$pos_left.'px;;top:'.$pos_top.'px;;">'.$text2.'</div></div>';;\
  }\
\
  sub convDate\
  {\
    my ($date, $days) = @_;;\
\
    return 'Heute' if (0 == $days);;\
    return 'Morgen' if (1 == $days);;\
    return 'Übermorgen' if (2 == $days);;\
    \
    # the following line strips the year of the date (remove it if needed)\
    #return substr($date, 0, 5);;\
    return $date;;\
  }\
\
  sub textColor\
  {\
    my $days = shift;;\
    \
    return (1 == $days ? 'red' : 2 == $days ? 'darkorange' : 'white');;\
  }\
}\
\
DEF TPL_Abfall (style([ABFALL_LEERUNG:$1_weekday], textColor([ABFALL_LEERUNG:$1_days]))|\
style(convDate([ABFALL_LEERUNG:$1_date], [ABFALL_LEERUNG:$1_days]), textColor([ABFALL_LEERUNG:$1_days]))|\
style([ABFALL_LEERUNG:$1_text], textColor([ABFALL_LEERUNG:$1_days]))|\
ic("dustbin\@$2", [ABFALL_LEERUNG:$1_days], [ABFALL_LEERUNG:$1_daysnext]))\
\
TPL_Abfall (Restmuelltonne,red)\
TPL_Abfall (Gelbe_Tonne,green)\
TPL_Abfall (Papiertonne,limegreen)\
TPL_Abfall (Biotonne,yellow)\
TPL_Abfall (Glas,blue)\


[myhome]

Hallo
Die Zahlen neben der Tonne sagt mir in vielen Tagen die nächste Leerung ist.
Mit dem Switch zähle ich die Leerung, also wie oft ich die Tonne zur Leerung rausgestellt habe. Haben nämlich bei Rest und Bio Müll nur x Leerungen inkl.
Der Switch zählt immer +1 aber nur wenn 0Tage angezeigt wird. Danach ist er für den Rest des Tages gesperrt. DIE Zahl in der Mülltonne zeigt die Häufigkeit an. Eigentlich liegt der Switch als Icon Transparent über den Icon Mülltonne + Tage, also man kann diese gar nicht verfehlen. Vielen Danke für eure Vorschläge, ich werde es ausprobieren und mich melden. Danke!

siehe #469 Ergänzung vom 11.06.2024

Hier mal mein Code für uiTable. Das meiste mache ich mit einem Dummy geht einfach und schnell und man verliert den Überblick nicht und natürlich habe ich mir ein paar Icons gebaut wie z.B ein transparentes Icon für die switch Funktion, geht alles einfach und schnell. Der Switch hat nur die Funktion einen Zähler zu bedienen, ein kurzes on/off reicht dafür.

uiTable
{
  package ui_Table;
  $TC{0}="align='left'";
  $SHOWNOSTATE=1;
  ## Die Gerätezeile wird ausgeblendet in allen Räumen
  $SHOWNODEVICELINE = 'Status';

}
##

"<div style='position:relative;;width:50px;;height:50px'>
   <div style='position:absolute;;left:0px;;top:2px'>".
     icon_label("muelltonne\@yellow",[MuellterminDummy:GelberSack],"white",
        [MuellterminDummy:GelberSack] > 1 ? "green":"red",-4,-8).
   "</div> <div style='position:absolute;;left:60px;;top:2px'>".
      icon_label("muelltonne".[MuellterminDummy:ZaehlerBio]."\@brown",
         [MuellterminDummy:BioTonne],"white",[MuellterminDummy:BioTonne] > 1 ? "green":"red",28,-36).
   "</div> <div style='position:absolute;;left:58px;;top:2px'>".
      switch([BioTonnenZaehler:state],"muelltonneTransparent","muelltonne\@black","off","on").
   "</div><div style='position:absolute;;left:120px;;top:2px'>".
      icon_label("muelltonne\@blue",[MuellterminDummy:PapierTonne],"white",
       [MuellterminDummy:PapierTonne] > 1 ? "green":"red",28,-36).
   "</div> <div style='position:absolute;;left:180px;;top:2px'>".
       icon_label("muelltonne".[MuellterminDummy:ZaehlerRest]."\@grey",[MuellterminDummy:Restmuell],"white",
        [MuellterminDummy:RestMuell] > 1 ? "green":"red",28,-36).
   "</div><div style='position:absolute;;left:176px;;top:2px'>".
      switch([RestTonnenZaehler:state],"muelltonneTransparent","muelltonne\@black","off","on").
   "</div>
</div>" 

[dennisk]

Edit: Möglicher Fix unter: https://forum.fhem.de/index.php?msg=1323626

Ich habe ein kleines Darstellungsproblem, welches ich einfach nicht gelöst bekomme: Bei den ReadingsGroup ist der Abstand zwischen Tabelle mit den Readings und dem Heading (sprich Alias) der ReadingsGroup sehr klein, was dazu führt, dass Buchstaben wie ein kleines g in die Tabelle reinragen bzw. in die Trennlinie. Die beiden Screenshots zeigen das Problem auf dem PC und dem Smartphone, auf letzterem ist es schlimmer. Ich habe schon versucht mit height oder padding zu spielen, was zwar was bringt, aber eben auf PC und Smartphone unterschiedlich. Hat hier einer eine Idee, was man machen könnte, dass Buchstaben nicht mehr herausragen, sowohl auf dem PC als auch Smartphone?

Du darfst diesen Dateianhang nicht ansehen.
Du darfst diesen Dateianhang nicht ansehen.

[schwatter]

Tag,

mir war immer so, es gibt irgendwo eine Einstellung für "Seite laden wenn fertig" ? Vielleicht war das auch das Setting in Fully Kiosk Browser, den ich nutze.

Ich habe in f18 folgendes angepasst.

f18.js ganz oben

Code Auswählen Erweitern

$(window).on('load', function() {
    $('body').css('opacity', 1);
});
f18style.css

Code Auswählen Erweitern

body { opacity: 0; }

Dadurch wird die Seite erst eingeblendet wenn fertig. Das unschöne skalieren entfällt. Nebenwirkungen?

Edit:
Vielleicht etwas für "f18 special" ?

Gruß schwatter

[Gisbert]

Hallo schwatter,

also bei mir wird die jeweilige Seite erst angezeigt, wenn alles vorhanden ist. Das kann je nach Umfang etliche Sekunden dauern. Ich bin der Meinung, dass man das irgendwo einstellen konnte - nur hab ich nach der langen Zeit, in der ich den flex Style nutze, keine Ahnung mehr wo.

Unabhängig davon, kannst du etwas besser beschreiben, wo genau deine Ergänzungen oder Änderungen stehen?

Viele Grüße Gisbert

[schwatter]

Hey,

du nutzt flex. Da wird der "Fhem loading" Background kurz eingeblendet, bis die Seite fertig ist.
Bei f18 nicht. Die Anpassungen oben habe ich wie angegeben in den Dateien f18.js und f18style.css gemacht.

Gruß schwatter

[schwatter]

Tag,

mir war immer so, es gibt irgendwo eine Einstellung für "Seite laden wenn fertig" ? Vielleicht war das auch das Setting in Fully Kiosk Browser, den ich nutze.

Ich habe in f18 folgendes angepasst.

f18.js ganz oben

Code Auswählen Erweitern

$(window).on('load', function() {
    $('body').css('opacity', 1);
});
f18style.css

Code Auswählen Erweitern

body { opacity: 0; }

Dadurch wird die Seite erst eingeblendet wenn fertig. Das unschöne skalieren entfällt. Nebenwirkungen?

Edit:
Vielleicht etwas für "f18 special" ?

Gruß schwatter

@rudolfkoenig

Könntest du das so oder angepasst einbauen?

Edit:
Jetzt hat es klick gemacht. Ich habe ja noch Additional CSS gesetzt. Da wird @media getriggert und dadurch kommt das Verhalten
"Flash of Unstyled Content". Jedenfalls, würde ich mich über den Einbau freuen.

Edit2:
Hier mein Additional CSS:

Code Auswählen Erweitern

/* FHEM Style f18_dark@Simon74 - mod by schwatter */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

:root {
--myMod: #b5b5b3;
--myOrange: #aa6900;
--myRed: #ad3333;
--myGreen: #32a054;
--myBlue: #3373a6;
--myGray: #8C8C8C;
--myGreen: #52B26D;
--myTitle: White;
--myDevices: Blue;/* LightGray;*/
--myBackground: #222222;
--myButtonA: LightGray;
--mySyslink: #ff8c00;
--myTextBG: #dddddd;
--myMenuText: #fefefe;
}

html, body, html * {
    font-family: 'Roboto';
}

a#saveCheck span {
    color: red !important;
}

@font-face {
    font-style: normal;
    font-weight: 300;
}

/* Logfile Schriftart */
[class*="log"] {
    font-family: 'Roboto';
    font-size: 12px;
}

/* FhemWidget USZU */
.ui-button-text { font-weight:normal!important; color:red!important; }
.ui-state-active {border:1px solid var(--myDevices); }
.ui-button-text-only.ui-state-default { background:var(--myBackground); }
.ui-button-text-only.ui-state-active { background:var(--myMod); }
.ui-menu { background:var(--myBackground); }
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
 border: 1px solid var(--myGray);
 background: none;
 background-color: var(--myBackground);
 font-size: 14px;
}

/* Dropdown */
select {
/* -webkit-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* -moz-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
margin-left:3px;
margin-right:3px;
border-radius:3px;
background-color:var(--myBackground);
border:1px solid;
border-color:gray;
}

/* ReadingsGroup */
@media screen and (max-width: 480px) and (orientation: portrait) {
table#readingsGroup-rg_mms1 tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_mms1 tr {
    display: table-cell !important;
}
table#readingsGroup-rg_mms1 tr td {
    display: table-cell !important;
}

table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tr td {
width: 100% !important;
    display: table-cell !important;
}
}

/* Smartphone, zeige Commands auch Hochkant (Portait Mode) */
@media screen and (max-width: 480px) and (orientation: portrait) {
div#content table.block tr td:nth-child(n+3) { width:auto; display:block; }
}

body, input, select, textarea {
    font-weight: 400;
    font-size: 14px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 0px;
    color: white;
}

input.maininput {
    border-width: 0px;
    height: 20px;
    color: #333333;
}

input[type="text"] {
    background-color: var(--myTextBG);
    -webkit-appearance: none;
    padding: 2px;
}

body.touch a {
    font-size: 16px;
}

#menuBtn {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 28px;
    height: 35px;
    filter: brightness(3);
}

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 5px 8px 5px 8px;
}

div.pinHeader a {
    color: white !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #B0BEC5 !important;
    height: 30px;
    width: 30px;
    padding-right: 10px;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 2px solid #333333;
}

table.block.wide {
    font-weight: 300;
}

table.block.wide td > div {
    padding: 4px;
}

td {
    padding: 0px;
}

div#content > table {
    width: 100%;
}

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 250px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;

}

div#menu > .col_header {
    fill: var(--myRed);
    font-size: 16px;
    background-color: var(--myRed);
}

div#menu > .col_header:before {
    content: "Menü";
}

div#menu tr {
    border-width: 0px;
    background-color: #333333;
}

div#menu tr tr:hover {
    background-color: var(--myBlue);
}

div#menu tr:last-child {
    border-bottom: none !important;
}

.room tr > td {
    padding: 4px 8px 4px 8px;
}

div#menu a {
    color: var(--myMenuText) ! important;   
    padding-left: 5px;
    display: block;
}

body.touch #menu table.room div {
    padding: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

.get, .set, .attr {
    margin-bottom: 0px;
}

.downText {
    margin-top: 0px;
}

/* Command Eingabefelder*/
input[type="text"] {
    color: black;
padding-left: 8px;
}

/* Submit */
input[type=submit] {
background-color: var(--myOrange);
border: 1px solid var(--myTitle);
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
   width: 70px;
}

div#devSpecHelp {
    background: #333333;
    width: 100%;
    padding-top: 5px;
    margin-bottom: 0px;
}

.SVGplot * {
    padding-top: 5px;
    color: #222222;
}

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}

input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock2 div, .roomBlock5 div {
  height: 30px;
  /* text-transform: uppercase; */
  font-weight: 200;
  line-height: 25px;
  overflow: hidden;
}

.roomBlock1 div, .roomBlock4 div {
  height: 30px;
  /* text-transform: uppercase;  */
  font-weight: 300;
  line-height: 25px;
  overflow: hidden;
  display: flex;
}

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 4px;
background-color: var(--myTextBG);
    /*border: 1px solid #000000;*/
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: var(--mySyslink) !important;
}

table.block.wide.internals.wrapcolumns a {
    color: var(--mySyslink) !important;
}

a#DEFa {
    padding: 4px;
}

div.pinHeader {
   position: sticky;
   top: 0px;
}

.hgrid   {   
   stroke-dasharray:2,6;
}

svg.DOIF_ring {
    width: 75px !important;
    height: 75px !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 34px;
    height: 18px;
    padding: 1px;
    background: #9f1b1b;
    border-radius: 18px;
    border-width: 1px;
    bottom: 10px;
    text-align: center;
}

.handle:before {
    content: '';
    position: absolute;
    border-width: 5px 5px 5px;
    border-color: #cccccc transparent;
    display: block;
    width: 0;
    bottom: -8px;
    left: 20px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 18px;
    border-color: transparent;
    display: block;
    width: 9px;
    bottom: -9px;
    left: -5px;
}

.slider {
    background-color: var(--myOrange);
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}
Gruß

[rudolfkoenig]

Könntest du das so oder angepasst einbauen?

Erst müsste ich das Problem verstehen...

[schwatter]

Nabend,

mh, ich habe es jetzt versucht nachzustellen. Also an dem "Additional CSS" liegt es nicht.

1. Auf meinem Handy nutze ich aus alter Gewohnheit FHEMWEB (WEBphone) auf Port 8084
2. Ich glaube allein durch WEBphone blendet f18 das Seitenmenü aus. <-- Das ist auch gut so. Nicht ändern.
3. Lade ich jedoch einen Raum mit etwas leistungsintensiveren Grafiken und Modulen, glitched das Menü von links herein, bevor es ausgeblendet wird.
4. Auf meinem Tablet (Port 8085) tritt dasselbe Verhalten auf.
5. Der oben genannte Fix sorgt dafür, dass die HTML-Seite erst sichtbar wird, wenn sie vollständig geladen ist.

Port 8083 ist nicht betroffen, da dort immer Desktop oder Mobile je nach Endgerät eingeblendet wird.

Edit:
Ne doch nicht. Auch 8083 ist betroffen. Es ist das Menü das glitched (auf den ersten Blick).
Bzw. bestimmt auch noch etwas mehr leistungsintensiver Content vom jeweiligen Raum.

Edit2:
Video vom Glitch. Je nach Leistung des Endgeräts dauert es länger.
https://www.dropbox.com/scl/fi/3f9qpya8oci2224ic1ksw/glitch.mp4?rlkey=t1bbzqtunwoklszvlkyr6n6xc&st=pjfvher7&dl=0


Gruß schwatter