Ich habe mein neues TABLETUI Layout soweit am Laufen, aber mich stören für einen flüssigen Betrieb noch 2 Kleinigkeiten:
- da ich aktuell ein Gridster Layout mit Sheet-Layout zur besseren Positionierung verwende, werden noch die Punkte der <li> Tags angezeigt, bevor die Seite komplett geladen ist
- bei der Anzeige von Widgets wird noch ein alter Wert angezeigt, bis der neue abgerufen wurde
Ist es nicht möglich die Seite zuerst aufzubauen (also alle Inhalte zu laden und die Werte anzupassen) bevor sie tatsächlich angezeigt wird ?
Hier mal meine index.html, vielleicht kann man da ja was per <meta> Tag anpassen ....
<!DOCTYPE html>
<html>
<head>
<title>TabletUI</title>
<script src="js/fhem-tablet-ui.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="gridster_disable" content="1">
<meta name="gridster_cols" content="10">
<meta name="gridster_rows" content="7">
<meta name="widget_margin" content="5">
<meta name="longpoll" content="1">
<meta name="debug" content="0">
<meta http-equiv="refresh" content="600; URL=index.html">
</head>
<body style="background-image:url(); background-size:cover; background-position:center;">
<div data-template="includeWeatherBackground.inc"></div>
<div class="gridster">
<ul>
<!-- DIALOGS -->
<div data-template="popups/popupN5DL.inc"></div>
<!-- HEADER 10x1 -->
<li data-row="1" data-col="1" data-sizex="10" data-sizey="1" style="background-color:transparent"><div data-template="includeHeader.inc"></div></li>
<!-- MENU 2x6 -->
<li data-row="2" data-col="1" data-sizex="2" data-sizey="6" style="background-color:rgba(0,0,0,0.7)">
<div data-template="links/linkDashboard.inc"></div>
<div data-template="links/linkRooms.inc"></div>
<div data-template="links/linkGroups.inc"></div>
<div data-template="links/linkCharts.inc"></div>
<div data-template="links/linkWeather.inc"></div>
<div data-template="links/linkSystem.inc"></div>
</li>
<!-- CONTENT 8x6 -->
<li data-row="2" data-col="3" data-sizex="6" data-sizey="1" style="background-color:transparent"></li>
<li data-row="2" data-col="9" data-sizex="2" data-sizey="2" style="background-color:transparent">
<div data-template="previews/previewN5DL.inc"></div>
</li>
<li data-row="3" data-col="6" data-sizex="2" data-sizey="2" style="background-color:rgba(0,0,0,0.7)">
<div class="normal"><br></div>
<div class="tall center-align" data-template="switches/switchHomeStatusHome.inc"></div>
</li>
<li data-row="3" data-col="8" data-sizex="3" data-sizey="1" style="background-color:transparent"></li>
<li data-row="4" data-col="4" data-sizex="2" data-sizey="2" style="background-color:rgba(0,0,0,0.7)">
<div class="normal"><br></div>
<div class="tall center-align" data-template="switches/switchHomeStatusBed.inc"></div>
</li>
<li data-row="4" data-col="8" data-sizex="2" data-sizey="2" style="background-color:rgba(0,0,0,0.7)">
<div class="normal"><br></div>
<div class="tall center-align" data-template="switches/switchHomeStatusHoliday.inc"></div>
</li>
<li data-row="5" data-col="6" data-sizex="2" data-sizey="2" style="background-color:rgba(0,0,0,0.7)">
<div class="normal"><br></div>
<div class="tall center-align" data-template="switches/switchHomeStatusAway.inc"></div>
</li>
</ul>
</div>
</body>
</html>
Den ersten Punkt kann man verhindern, indem man das CSS File schon im Header angibt und das File nicht erst dynamisch nach dem Seitenaufbau injiziert.
Der zweite Punkt ist eine gewollte (psychologische) Geschwindigkeitsoptimierung. Es werden Werte aus dem Cache zum frühest möglichen Zeitpunkt geladen, bevor die Abfrage an FHEM rausgeht. Man könnte einen Schalter einbauen, der dieses frühe Update unterbindet.
welches .css-File wäre das ? Gibt es da ein Beispiel ?
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
Danke ! Hat funktioniert :)