FTUI 2.5

setstate · 03 Februar 2017, 08:19:44

Das mit de Schriftgrösse beim Select könnte sein. Ich habe um viele Widgets jetzt ein Extra-DIV platziert, damit die Positionierung besser klappt. Kann sein, das die Klasse nicht beim richtigen Element ankommt.
Schaue ich mir an.

Dummbatz · 03 Februar 2017, 10:11:07

Kurze Frage,

Ich möchte auf meiner Startseite einen Platz freihalten wo später mal ein Live Kamera Bild rein soll.

Wie mache ich das am besten ??

Thx

LG Dummbatz

setstate · 03 Februar 2017, 10:18:46

Einfach eine ganze gridster <li> leer lassen, oder? Die Größe dem zukünftigen Bild entsprechend.

Garbsen · 03 Februar 2017, 15:28:55

Zitat- neues Layout Schema: Sheet > Row > Cell

Ein Tabellen ähnliches Layout um Widgets sehr einfach vertikal und horizontal zentrieren zu können

Code: [Auswählen]
<li data-row="1" data-col="3" data-sizey="2" data-sizex="2">
<header>Sheet > Row > Cell</header>
<div class="sheet">
<div class="row">
<div class="cell" data-type="symbol" data-device="dummy1"></div>
<div class="cell" data-type="symbol" data-device="dummy2"></div>
</div>
<div class="row">
<div class="cell" data-type="symbol" data-device="dummy3"></div>
<div class="cell" data-type="symbol" data-device="dummy4"></div>
</div>
</div>
</li>

Alignment: left-align, right-align, top-align, bottom-align

2 Fragen:

Kann man ähnlich wie bei table mit "colspan" auch hier 2 Zellen zusammenfassen?

Kann man auch "umgekehrt" aufbauen? D.h.
<div class="cell">
<div class="row">
....

Wäre manchmal einfacher

drhirn · 03 Februar 2017, 15:41:05

Zitat von: Garbsen am 03 Februar 2017, 15:28:55
Kann man ähnlich wie bei table mit "colspan" auch hier 2 Zellen zusammenfassen?

Nein, geht leider nicht.

Zitat
Kann man auch "umgekehrt" aufbauen? D.h.
<div class="cell">
<div class="row">

Kann nicht gehen. Was willst du erreichen?

Mario67 · 03 Februar 2017, 16:30:52

Ich habe versuchsweise den Übergang auf 2.5 gemacht und dabei relativ wenig Problem gehabt.
Allerdings sieht es bei mir so aus, als ob die Styles aus einer separaten CSS-Datei nicht wirksam werden. Bei der Inspektion mit den Entwicklertools ist von den Definitionen aus meiner custom.css
z.B.

Code Auswählen

.switch.on{background-color:#E6FF57 !important;}
.switch.off{color:#A6BF17 !important; background-color:#505050 !important;}

nichts zu sehen.

Gruß,
Mario

GELÖST: siehe https://forum.fhem.de/index.php/topic,66403.msg576897.html#msg576897

Der Header der index.html:

Code Auswählen

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="widget_base_width" content="29"/>            <!-- 116 -->
	<meta name="widget_base_height" content="32"/>           <!-- 131 -->
	<meta name="widget_margin" content="3">
	<meta name="mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="longpoll" content="1"/>        <!-- 1=longpoll; 0=shortpoll every 30sec -->
	<meta name="debug" content="3"/>           <!-- 1=output to console; 0=not output -->

        <link rel="icon" href="favicon.ico" type="image/x-icon" />

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

	<link rel="stylesheet" href="./fonts/nesges/style.css"/>
	<link rel="stylesheet" href="./fonts/Traffic/style.css"/>

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

Garbsen · 03 Februar 2017, 16:33:37

Zitat von: drhirn am 03 Februar 2017, 15:41:05
Nein, geht leider nicht.

Schade, das erschwert das vernünftige formatieren, kann das noch eingebaut werden?

Zitat von: drhirn am 03 Februar 2017, 15:41:05
Kann nicht gehen. Was willst du erreichen?

Nicht so dramatisch, wäre nur manchmal beim Bauen von Tabellen einfacher, wenn man spaltenweise vorgehen könnte, statt zeilenweise, ist aber letztlich nicht wesentlich

Standarduser · 03 Februar 2017, 16:43:45

Ich würde meine FTUI gerne so hinbasteln, dass ich nur durch den Austausch einer CSS die Farbe verändern kann. Ähnlich, wie wenn man die css/fhem-green-ui.css einbindet.
Allerdings bleiben die Buttons davon total unbeeindruckt, was bestimmt daran liegt, dass, sollten keine Attribute angegeben sein, die hart-codierten Farben aus der .js verwendet werden.
Wäre es vielleicht möglich, diese festen Farbvorgaben aus dem CSS zu holen?

Ich meine damit zum Beispiel das hier:

Code Auswählen

        // if data-colors isn't set, try using data-on-color, data-off-color or #505050 instead
        if (typeof colors == 'undefined') {
            colors = new Array(elem.data('on-color') || elem.data('off-color') || '#505050');

Statt #505050 könnte man doch symbol.on verwenden. Oder gibt es vielleicht einen anderen Grund?

setstate · 03 Februar 2017, 17:13:25

Zitat von: Mario67 am 03 Februar 2017, 16:30:52
Ich habe versuchsweise den Übergang auf 2.5 gemacht und dabei relativ wenig Problem gehabt.
Allerdings sieht es bei mir so aus, als ob die Styles aus einer separaten CSS-Datei nicht wirksam werden. Bei der Inspektion mit den Entwicklertools ist von den Definitionen aus meiner custom.css
z.B.
Code Auswählen Erweitern
.switch.on{background-color:#E6FF57 !important;} .switch.off{color:#A6BF17 !important; background-color:#505050 !important;}
nichts zu sehen.

Gruß,
Mario

Der Header der index.html:
Code Auswählen Erweitern
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="widget_base_width" content="29"/>  <meta name="widget_base_height" content="32"/>  <meta name="widget_margin" content="3"> <meta name="mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="longpoll" content="1"/>  <meta name="debug" content="3"/>  <link rel="icon" href="favicon.ico" type="image/x-icon" /> <script type="text/javascript" src="./js/fhem-tablet-ui.js" defer></script> <link rel="stylesheet" href="./fonts/nesges/style.css"/> <link rel="stylesheet" href="./fonts/Traffic/style.css"/>  <link rel="stylesheet" href="./css/custom.css"/>

Nimm mal aus deiner Farbdefinition die importants raus. Dieser Teil wird nicht wirklich als CSS benutzt.
Ich lese das beim Start mit einer js Funktion aus und initiiere die Buttons damit.

tekniker-69 · 03 Februar 2017, 22:27:40

Kann es sein, das sich beim Label-Widget was geändert hat ?
Ich habe eine Label in Label Konstruktion, die nur noch zur Hälfte funktioniert.

siehe hier:
https://forum.fhem.de/index.php/topic,59637.0.html

SirMarco · 03 Februar 2017, 22:52:03

Gibt es die Möglichkeit Sheets nebeneinander darzustellen? Ich habe es mit Inline probiert aber es will nicht so ganz. Ist das korrekkt das die Inline Class vor dem sheet kommen muss?

Code Auswählen


<section>	
<div style="width: 30%">
	<div class="inline">
	  <div class="sheet" class="inline">
          <div class="row left-align">
            <div class="cell" data-type="symbol" data-device="dummy1"></div>
            <div class="cell" data-type="symbol" data-device="dummy2"></div>
        </div>
        <div class="row right-align">
            <div class="cell" data-type="symbol" data-device="dummy3"></div>
            <div class="cell" data-type="symbol" data-device="dummy4"></div>
        </div>
    </div>
</div>
</div>
<div style="width: 30%">
	<div class="inline">
	<div class="sheet">
     <div class="row left-align">
            <div class="cell" data-type="symbol" data-device="dummy1"></div>
            <div class="cell" data-type="symbol" data-device="dummy2"></div>
        </div>
        <div class="row right-align">
            <div class="cell" data-type="symbol" data-device="dummy3"></div>
            <div class="cell" data-type="symbol" data-device="dummy4"></div>
        </div>
    </div>	
</div>
</div>
</section>

Gruss

ih-sqeezer · 03 Februar 2017, 23:59:31

Hallo,

ich habe möglicherweise einen Fehler im data-type="wdtimer" gefunden.
Und zwar verwende ich diesen um den Heizungsthermostaten unterschiedliche Heizprofile mitzuteilen. Diese sind über den wdtimer anpassbar.
Jedoch wird bei einer Änderung die komplette DEF durcheinander gewürfelt, sodass der wdtimer keinen Fehler bringt, aber auch nichts mehr schaltet.

Vor einer Editierung über FTUI:
WohnzimmerHeatingControlWork Heating_Control WohnzimmerWandthermostat de 12345|17:30|comfort 12340|22:00|eco 60|08:00|comfort 56|22:30|eco (ReadingsVal("WohnzimmerWandthermostat", "state", "") ne "off")

Nach einer Editierung über FTUI:
WohnzimmerHeatingControlWork de 12345|17:30|comfort 12340|22:00|eco 60|08:00|comfort 56|22:30|eco 0|00:00|18.0 Heating_Control WohnzimmerWandthermostat ne (ReadingsVal("WohnzimmerWandthermostat", "state", "") "off")

Dabei wurde der Eintrag "0|00:00|18.0" testweise hinzugefügt.

Vielleicht bin ich hier auch im falschen Thema gelandet. Bitte um Nachsicht.
Eventuell kann dies an die korrekte Stelle verschoben werden.

Danke und Grüße,
Ingo

moonsorrox · 04 Februar 2017, 13:07:08

ich muss hier nochmals nachfragen wegen der Verschiebung in einem Circlemenü, ich habe zwei davon und in beiden ist das Icon nach rechts verschoben.
Ich habe es schon ohne jegliche class="" probiert aber es tut sich nichts es beliebt verschoben, muss ich das evtl. in eine andere class packen damit das mittig ist..? momentan habe ich class=top-space" drin
Beispiel von einem Circlemenü im Screenshot, das andere hatte ich hier schon mal irgendwo. Setze ich da ein normales Icon rein mit code geht das.

Code Auswählen

<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" data-type="label">System</div>

ulli · 04 Februar 2017, 14:15:27

Eine Frage: ist damit die Nutzung der Page Funktion (index_page_demo) nicht mehr notwendig für ein schnelles wechseln von Seiten?

setstate · 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?