FTUI 2.5

ulli · 04 Februar 2017, 16:16:57

Habe das update auf 2.5 gerade gemacht und ärgere mich jetzt schon 3 std damit herum....alles ist verschoben, größen passen nicht mehr und ich bekomme in 90% der Browser refreshs folgende Meldung
fhem-tablet-ui.js:891
InvalidAccessError: A parameter or an operation is not supported by the underlying object

Familienpapi · 04 Februar 2017, 18:03:02

habe soeben auf 2.5 upgedatet und danach meine HTMLs neu formatiert.
Wie es beschrieben wurde, war klar, dass man neu formatieren muss, somit wusste ich, auf was ich mich einlasse.
Jetzt nach einem Samstag (geschätzte 6h) sieht alles wieder gut, vieles sogar deutlich besser, aus.

Ich liebe die UI. Man kann einfach alles sauber darstellen und selbst meine Frau ist entzückt.

Wann wird das Wiki auf den aktuellen Stand gebracht?

Eisix · 04 Februar 2017, 18:17:36

Hallo setstate,

nochmal Danke für die Arbeit die du dir machst!

Habe heute mal versucht

- Slider/Level Widget: Timer zum Interpolieren von Zwischenschritten

Zum Beispiel bei einer Song-Vortschrittsanzeige, die nur aller 10 Sekunden ein Update bekommt, kann mit data-timer-step="1" und data-timer-interval="1000" (Default-Werte) die Anzeige automatisch weiterlaufen lassen. Aber nur, wenn das data-timer-state Reading einen gültigen Status zum Laufenlassen des Timers hat. Entsprechend zu den data-timer-on und data-timer-off Definitionen.

Code Auswählen


<div data-type="level" data-device="MPD1" data-get="elapsed" data-max="Time" data-width="280" data-timer-state="MPD1:STATE" data-timer-state-on="play" data-timer-state-off="!on" data-margin="15px"  class="horizontal"></div>

umzusetzen. Hat mich immer schon gestört das ich nur alle 30s ein update hatte.

Das ganze auf mein Bose System umgesetzt sollte dann meiner Meinung nach so passen.

Code Auswählen


<div data-type="level" data-device="BOSE" data-get="time" data-max="timeTotal" data-timer-state="BOSE:STATE" data-timer-state-on="playing" data-timer-step="1" data-timer-interval="3000" data-width="200" class="horizontal inline middle"></div>

Funktioniert aber nicht. Habe ich da was falsch verstanden? Wenn ich dann ein Reload der Page mache kriege ich folgenden error.

Code Auswählen


widget_slider.js:35
TypeError: Cannot read property 'options' of undefined

Gruß
Eisix

Grimm80 · 04 Februar 2017, 18:57:05

Die Darstellung auf meine Galaxy-Tab 4 mit Maxthon Browser ist nicht wirklich prickelnd.
Die Schrift ist unscharf und das Hintergrundbild wurde abgeschnitten, als würde die Auflösung nicht mehr passen.

Gibt es da eine Lösung für?

Familienpapi · 04 Februar 2017, 21:39:24

Zitat von: Grimm80 am 04 Februar 2017, 18:57:05
Die Darstellung auf meine Galaxy-Tab 4 mit Maxthon Browser ist nicht wirklich prickelnd.
Die Schrift ist unscharf und das Hintergrundbild wurde abgeschnitten, als würde die Auflösung nicht mehr passen.

Gibt es da eine Lösung für?

Wie sieht denn Dein Header Code aus?

gesendet von meinem Note via Tapatalk

Grimm80 · 04 Februar 2017, 21:47:32

Folgendes hab ich im HEAD stehen:

Code Auswählen


<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <meta name="widget_base_width" content="71">
    <meta name="widget_base_height" content="71">
	<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
	
	    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>Zentrale</title>
</head>

Grimm80 · 04 Februar 2017, 21:59:54

Ich hab mal zwei Bilder ran.
Klein: das ist die akteulle Auflösung auf dem Tab mit dem neuen FTUI

Normal: das sollte das eigentliche Bild sein, aber ist es leider nicht. Wenn ich das auf der größe anpasse dann ist es auf dem TAB zu groß und ich muss scrollen

Aktuell: So ist es bei mir aktuell in Betrieb. Nach dem Update war alles futsch....hatte zum Glück noch ein Backup

Familienpapi · 04 Februar 2017, 23:11:42

bei mir steht im Head deutlich mehr:

Code Auswählen

<html>
<head>
  <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="widget_base_width" content="75">
  <meta name="widget_base_height" content="79">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="gridster_disable" content="1">
  <meta name="longpoll" content="1">
  <meta name="debug" content="3">
  <meta name="lang" content="de">
...

Vielleicht möchtest Du das Fehlende ergänzen und dann versuchen. Vor allem die erste Zeile "viewport" ist der Knackpunkt bei mir gewesen.

gesendet von meinem Note via Tapatalk

moonsorrox · 05 Februar 2017, 01:06:28

@setstate
EDITH:// mach dir keine Gedanken mehr ich habe den Fehler jetzt endlich gefunden, ich hatte in meiner ****user-ui.css ein Teil drin der so aussah und es liegt am inline-block, den ich jetzt auskommentiert habe.

Code Auswählen

.circlemenu {
    min-height: 52px;
    min-width: 52px;
    margin-bottom: -3px;
    /*display: inline-block;*/
}

Ich denke ich brauche das gar nicht mehr in meiner css Datei, also kann es wohl raus

Zitat von: setstate am 04 Februar 2017, 15:44:57
Zum Circlemenu: Das Circlemenu selbst ist unschuldig, das positioniert sich mittig. Die Frage ist: wie sieht der übergeordneten Container aus? Was positioniert die anderen Schalter?

hier mal der komplette Code mit den anderen Schalter:

Code Auswählen

<header style="border-top-left-radius:8px;border-top-right-radius:8px;">App - Men&uuml;</header>

<!-- ========= Charts ===================== -->	
<!-- ====================================== -->
<div class="top-space"
	data-type="pagetab"
	data-url="Tab_index_wetter1.html"
	data-background-icon="fa-circle-thin" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
	data-icon="oa-temp_temperature">
</div>
<div class="medium silver" data-type="label">Hausklima</div>


<!-- ========= Wetter ===================== -->	
<!-- ====================================== -->
<div class="top-space"
	data-type="pagetab"
	data-url="Tab_index_wetter.html"
	data-background-icon="fa-circle-thin" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
	data-icon="oa-weather_sunrise">
</div>
<div class="medium silver" data-type="label">Wetter</div>


<!-- ========= System ===================== -->	
<!-- ====================================== -->	
<div class="top-space"
	data-type="circlemenu" 
	data-circle-radius="60" 
	data-direction="left-half" 
	data-colors="lightgray">
		<ul>
			<li>
				<div data-type="symbol"
					data-background-icon="fa-circle-thin" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
					data-icon="fa-server">
                </div>
			</li>
			<li><div data-type="pagetab" data-on-color="#DC143C" data-url="Tab_index_server.html" data-icon="oa-it_server"></div>
 			</li>
			<li><div data-type="pagetab" data-on-color="#DC143C" data-url="Tab_index_batterien.html" data-icon="oa-measure_battery_100"></div>
			</li>
			<li><div data-type="pagetab" data-on-color="#DC143C" data-url="Tab_index_netzwerk.html" data-icon="oa-it_network"></div>
			</li>
		</ul>
</div>
<div class="medium silver" data-type="label">System</div>

	
<!-- ========= Anrufe  ==================== -->
<!-- ====================================== -->
<div class="top-space" 
	data-type="pagetab"
	data-url="Tab_index_anrufe.html"
	data-background-icon="fa-circle-thin" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
	data-icon="fa-phone">
</div>
<div class="medium narrower silver" data-type="label">Anrufe</div>


<!-- ========= Logitech =================== -->
<!-- ====================================== -->
<div class="top-space" 
	data-type="pagetab"
	data-url="Tab_index_logitech.html"
	data-background-icon="fa-circle-thin" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
	data-icon="oa-audio_sound">
</div>
<div class="medium silver" data-type="label">SqueezeBoxen</div>

	
<!-- ============== Wetter 2 ============== -->
<!-- ====================================== -->
<div class="top-space" 
	data-type="pagetab"
	data-url="Tab_index_wetter2.html"
	data-background-icon="fa-circle-thin" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
	data-icon="oa-weather_sunrise">
</div>
<div class="medium silver" data-type="label">Wetter 2</div>


<!-- =============== Kamera =============== -->
<!-- ====================================== -->
<div class="top-space" 
	data-type="pagetab"
	data-url="Tab_index_kamera.html"
	data-background-icon="fa-circle-thin" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
	data-icon="oa-it_camera">
</div>
<div class="medium silver" data-type="label">Kamera</div>

Grimm80 · 05 Februar 2017, 09:40:26

@Familienpapi: Danke! Lag wirklich daran.

Ich dachte bei dem neuen ist das normal das da so wenig drin ist weil alles autom. geladen wird.

Amenophis86 · 05 Februar 2017, 12:16:47

Zitat von: Familienpapi am 04 Februar 2017, 18:03:02
Wann wird das Wiki auf den aktuellen Stand gebracht?

Account beantragen und selbst aktiv dran mitarbeiten

TWART016 · 05 Februar 2017, 19:17:36

Ich habe einen Ordner /opt/fhem/www/tablet/mobile. Darin liegt eine index.html.

Jedoch wird bei mir in der html nichts angezeigt.

Wie muss der header der Datei aussehen?

Familienpapi · 05 Februar 2017, 19:49:22

Vermutlich müsste man im Header den einzelnen Einträgen vollständige Pfadangaben mitgeben. z.B.

Code Auswählen

<script src="/fhem/ftui/js/fhem-tablet-ui.js" defer></script>
Ist ungetestet, einfach mal versuchen, jeden einzelnen Headereintrag in Deiner index.html entsprechend Deiner Installation abzuändern.

gesendet von meinem Note via Tapatalk

Familienpapi · 05 Februar 2017, 19:51:31

Zitat von: Amenophis86 am 05 Februar 2017, 12:16:47
Account beantragen und selbst aktiv dran mitarbeiten

Ich sehe mich bei der Tablet UI noch als lernender Anfänger.
Unterstütze aber gerne und werde mich da kommende Woche mal dran machen.

gesendet von meinem Note via Tapatalk

TWART016 · 05 Februar 2017, 20:45:57

Zitat von: Familienpapi am 05 Februar 2017, 19:49:22
Vermutlich müsste man im Header den einzelnen Einträgen vollständige Pfadangaben mitgeben. z.B.
Code Auswählen Erweitern
<script src="/fhem/ftui/js/fhem-tablet-ui.js" defer></script>
Ist ungetestet, einfach mal versuchen, jeden einzelnen Headereintrag in Deiner index.html entsprechend Deiner Installation abzuändern.

gesendet von meinem Note via Tapatalk

Hatte ich alles schon getestet, ohne Erfolg.