TabletUI in Fully Fullscreen Browser [Performance verbessern]

Shojo · 04 Juni 2018, 09:42:22

Guten Morgen FHEMler,

nach langem hin und her mit diversen UI-Lösungen für FHEM bin ich nun doch letztendlich wieder bei FTUI gelandet

"Damals" bei meinen ersten Gehversuchen mit mein alten Tab Galaxy Tab 2 P5110 (mit verschiedenen Custom-ROMs) zeigte es sich doch recht schnell das es einfach zu schwach auf der Brust war,
deshalb habe ich mir für den neuen Versuch ein aktuelleres Tab Lenovo Tab2 A10-30 geholt.
Dies läuft auch soweit mit der aktuellen Fully Fullscreen Browser Beta und aktueller WebViewe zufriedenstellend,
bis auf 2 Szenarien:

- Popups (Durch die Verdunkelung des hinteren Bereiches der Ui) schon etwas laggy
- Wenn parallel paar Stats Änderungen kommen hängt der Fully dann schon mal für 2- 5 Sek. (zB. Lampe schaltet ein und dimmt auf und auch die pct wird angezeigt)

Dabei scheint das Tab selbst nicht ausgelastet, da alles andere normal weiter läuft. (Auch andere Apps sind dann noch normal nutzbar)

Hat jemand eine Idee wo ich da am besten ansetzt kann?

Gruß
Dennis

setstate · 04 Juni 2018, 10:06:32

Das passiert meist beim Benutzen von CSS Animationen. Wenn sich bei mir das Waschmaschinen-Icon dreht, kann man fast kein Licht mehr ordentlich bedienen (total verzögert) an meinem Lenovo-Tablet.

Oder man flutet den Speicher/DOM durch zu viele Daten, Charts zum Beispiel mit tausenden Datenpunkten.

Shojo · 04 Juni 2018, 10:12:56

Zitat von: setstate am 04 Juni 2018, 10:06:32
Das passiert meist beim Benutzen von CSS Animationen....

Kann man den die einblende Animation beim Popup abschalten bzw. das abdunkeln?
Hatte zwar schon gesucht aber nichts gefunden.

setstate · 04 Juni 2018, 10:21:16

Gib mal ein data-mode="no-animate" hinzu.

dt2510 · 04 Juni 2018, 10:52:02

Es gibt kein "no-animate" alles außer "animate" und "animateTop" wird als "fade" behandelt.

setstate · 04 Juni 2018, 12:00:57

Ja, ich hätte auch "hoschi" vorschlagen können, aber so weiss man, was erreicht werden soll. Das Fade müsste man noch umgehen können, dafür fehlt aber noch der passende Zweig.

Shojo · 04 Juni 2018, 12:59:14

Zitat von: setstate am 04 Juni 2018, 12:00:57
Das Fade müsste man noch umgehen können, dafür fehlt aber noch der passende Zweig.

Schade, dachte ich mir aber schon.

Shojo · 04 Juni 2018, 21:22:44

Oder kann man das per CSS unterbinden?

ToM_ToM · 11 Juni 2018, 20:49:58

Hallo Zusammen,

da ich auch ständig mit dem Performance-Problem kämpfe und sowohl mit pagetab und pagebutton als auch mit der zusätzlichen Klasse prefetch keine zufriedenstellenden Ergebnisse erzielen konnte (nach Seitenwechsel stellenweise 1 bis 3 Sekunden Ladezeit), habe ich mich mal selbst hingesetzt und nach einer Lösung gesucht die mir jetzt Seitenumschaltzeiten deutlich unter einer Sekunde ermöglicht. Man muss lediglich beim ersten Seitenaufbau ein bisschen Zeit einplanen. Bei mir bis zu 15 Sekunden.

Hier mal meine Index-Datei in der ich Buttons verwende die man natürlich durch Sysmbol-Widgets ersetzen könnte um wieder sowas wie Pagebuttons zu haben:

Code Auswählen


<!DOCTYPE html>
<html>


<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * !!!! Evaluation version - run only in a staging enviroment !!!!
     *
     * - create a new folder named 'tablet_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     *
     * Create a Demo Device in FHEM
     * define ftuitest dummy
     */
    -->

	<link rel="icon" href="favicon_Mannheim.ico" type="image/x-icon" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="widget_base_width" content="51">
	<meta name="widget_base_height" content="57">
	<meta name="widget_margin" content="0">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name='gridster_disable' content='1'>
	<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
	<meta name="longpoll_type" content="websocket">
	<meta http-equiv="Cache-Control" content="no-store" />

	<!--<script type="text/javascript" src="/../fhem/pgm2/jquery.min.js"></script>-->
	<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script>
	

	<!-- define your personal style here, it wont be overwritten  -->
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user2.css" />

	
	<!-- Tab pages via Javascript -->
	<style>

		/* Style the tab */
		.tab {
			overflow: hidden;
			padding: 0px 0px;
			margin: 0px; 0px;
		}

		/* Style the buttons inside the tab */
		.tab button {
			background-color: inherit;
			border: none;
			outline: none;
			cursor: pointer;
			padding: 14px 16px;
			transition: 0.3s;
			font-size: 17px;
		}

		/* Change background color of buttons on hover */
		.tab button:hover {
			background-color: #ddd;
		}

		/* Style the tab content */
		.tabcontent {
			display: none;
			padding: 0px 0px;
			margin: 0px; 0px;
			width: 100%;
		}
		.defaultOpen {
			display: block;
		}
	</style>

		
	<script>
		function openTab(evt, contentName) {
			// Declare all variables
			var i, tabcontent, tablinks;

			// Get all elements with class="tabcontent" and hide them
			tabcontent = document.getElementsByClassName("tabcontent");
			for (i = 0; i < tabcontent.length; i++) {
				tabcontent[i].style.display = "none";
			}

			// Get all elements with class="tablinks" and remove the class "active"
			tablinks = document.getElementsByClassName("tablinks");
			for (i = 0; i < tablinks.length; i++) {
				tablinks[i].className = tablinks[i].className.replace(" active", "");
			}

			// Show the current tab
			document.getElementById(contentName).style.display = "block";
		}

	</script>
	<!-- ENDE Tab pages via Javascript -->
	
	
	
	<script>
		function includeHTML() {
		  var z, i, elmnt, file, xhttp;
		  /*loop through a collection of all HTML elements:*/
		  z = document.getElementsByTagName("*");
		  for (i = 0; i < z.length; i++) {
			elmnt = z[i];
			/*search for elements with a certain atrribute:*/
			file = elmnt.getAttribute("w3-include-html");
			if (file) {
			  /*make an HTTP request using the attribute value as the file name:*/
			  xhttp = new XMLHttpRequest();
			  xhttp.onreadystatechange = function() {
				if (this.readyState == 4) {
				  if (this.status == 200) {elmnt.innerHTML = this.responseText;}
				  if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
				  /*remove the attribute, and call this function once more:*/
				  elmnt.removeAttribute("w3-include-html");
				  includeHTML();
				}
			  }
			  xhttp.open("GET", file, true);
			  xhttp.send();
			  /*exit the function:*/
			  return;
			}
		  }
		}
	</script> 
	
	
	<title>FHEM-Tablet-UI</title>
</head>
<body>

	<div class="gridster">
		<ul>
			<li data-row="1" data-col="1" data-sizex="2" data-sizey="14" class="bg-gray-trans">

				<button class="tablinks" onclick="openTab(event, 'content_home')">Home</button>
				<br /><br />
				<button class="tablinks" onclick="openTab(event, 'content_kitchen')">Küche</button>
				<br /><br />
				<button class="tablinks" onclick="openTab(event, 'content_weather')">Wetter</button>
				<br /><br />
				<button class="tablinks" onclick="openTab(event, 'content_livingroom')">Wohnzimmer</button>
				<br /><br />
				<button class="tablinks" onclick="openTab(event, 'content_sonos')">Sonos</button>
				
			</li>

			<li data-row="1" data-col="3" data-sizex="23" data-sizey="14" style="margin-left:0px;">

				<!-- Tab content -->
				<div w3-include-html="content_home3.html"></div>
				<div w3-include-html="content_kitchen3.html"></div>
				<div w3-include-html="content_weather3.html"></div>
				<div w3-include-html="content_livingroom3.html"></div>

			</li>
			
		</ul>
	</div>

	<script>
		includeHTML();
	</script> 
	
</body>
</html>

Und hier dann die Definition der Seite (defaultOpen definiert die Startseite und darf nur einmal vergeben werden):

Code Auswählen


<div id="content_home" class="tabcontent defaultOpen">

	<div class="gridster">
		<ul>
			<li data-row="1" data-col="1" data-sizex="6" data-sizey="2">
				<header>Wohnzimmer</header>
				<div>
					Hier irgendein Widget...
				</div>
			</li>
			
		</ul>
	</div>
	
</div>

@setstate: Du bist in der Webentwicklung eher der Profi als ich. Kann man das irgendwie mit pagebutton vergleichen und in FTUI portieren oder spricht irgendwas gegen meine Lösung was ich übersehen habe?

VG, Thomas