FTUI 2.5

octek0815 · 26 Januar 2017, 15:31:08

Zitat von: setstate am 26 Januar 2017, 01:53:31
Die Verschachteln wäre jetzt mehr nötig. Push kann jetzt auch auf Inputs reagieren. Also data-get und data-get-on an Push anfügen.

Die Vertchachtlung passt aber auch wieder, wenn man class="mini" an das Symbol setzt.

Hast du ein Beispiel wie ich das jetzt nur mit push hin bekomme?
Ziel ist es, das das Icon in der Mitte den Status zwischen "Weiß" und "Rot" wechselt aufgrund eines Device-Readings.
Push drumherum ist für die Optik (Fadeeffekt) des Kreises und für den Warn (Anzahl offener Fenster aus einem anderen Reading) und zum auslösen des Dialogs.

Mit 2.4 klappte das mit meiner Verschachtelung wunderbar. Ich habe die Formatierung so wie du es beschrieben hast hinbekommen, jedoch wenn ich zwei solcher Widgets in der Anzeige habe, stimmt irgendwas mit dem zweiten Widget nicht. Eigentlich sollte beim Drücken des Push´s nur der äußere Kreis den Fade ausführen und der Dialog geht dann auf, aber leider wird sowohl der äußere Kreis als auch das Icon in der Mitte Orange. Beim ersten der Beiden Widgets funktioniert es wiederum wie gewünscht.

Ralf.E · 26 Januar 2017, 17:31:56

Zitat von: setstate am 25 Januar 2017, 22:44:10
Das Problem mit dem Warn-Symbol habe ich gefixed.

Gibt da vielleicht noch 4 Stellen:
- widget_button.js
- widget_dimmer.js
- widget_mutistatebutton.js
- widget_pagebutton.js

Zumindest in 'widget_pagebutton.js' fehlte mir noch der Warn-Kringel und ich habe einfach Deine Änderung aus widget_symbol.js temporär übernommen:

Code Auswählen

#190: if (elem.hasClass('warn') || elem.children().find('#fg').hasClass('warn'))

Zitat von: setstate am 25 Januar 2017, 22:44:10
Noch kurze Erklärung zu Benutzung

Entweder man benutzt die Warn-Klasse im Icon-Status-Array. Damit erfolgt die Anzeige einfach über das data-get Reading und den data-get-on (bzw. data-states) Vergleich.

Danke! Das fehlte mir noch...

Gruß Ralf

Ralf.E · 26 Januar 2017, 17:52:25

Ein abweichendes Verhalten habe ich noch und ad hoc keine Idee wie das zu lösen ist:

Ich verwende ein kleines Menü mit 4 Pagetab-Widgets für "Home", "Wetter", "Müll" und "Heizung" (wird als Template eingebunden):

Code Auswählen


<!DOCTYPE html>
<html>
<body>
    <header><div class="large orange">MENÜ</div></header>
    <div class="sheet">
        <div class="row">
            <div class="cell big"
                data-type="pagetab" data-return-time="60" data-url="index.html" data-icon="fa-home" data-background-icon="fa-square-o"
                data-on-color="white" data-off-color="#505050" data-on-background-color="#aa6900" data-off-background-color="#505050">
            </div>
            <div class="cell big" 
                data-type="pagetab" data-url="wetter.html" data-icon="fa-cloud" data-background-icon="fa-square-o"
                data-on-color="white" data-off-color="#505050" data-on-background-color="#aa6900" data-off-background-color="#505050">
            </div>
            <div class="cell big" 
                data-type="pagetab" data-url="muell.html" data-device="sys_var_Muelltermine" data-get="NextEvent"
                data-get-on='["0","1"]' data-icons='["fs-dustbin warn fa-spin","fs-dustbin"]' 
                data-on-color="white" data-off-color="#505050"
                data-background-icon="fa-square-o" data-on-background-color="#aa6900" data-off-background-color="#505050">
            </div>
            <div class="cell big readonly" 
                data-type="pagetab" data-url="heizung.html" data-icon="oa-sani_heating" data-background-icon="fa-square-o"
                data-on-color="white" data-off-color="#505050" data-on-background-color="#aa6900" data-off-background-color="#505050">
            </div>
        </div>
    </div>
</body>
</html>

Auf dem Android-Tablet wird jetzt bei Auswahl von "Wetter", "Müll" oder "Heizung" neben dem gewählten Pagetab auch der erste Pagetab "Home" als aktiv gezeigt und lässt sich nicht mehr bedienen. Dieses trifft auch nur auf "Home" zu.

Unter Firefox (uf Windows) verhält sich das Menü dagegen wie bisher bzw. erwartet ?!?

Ralf.E · 26 Januar 2017, 18:39:23

Zitat von: reb am 26 Januar 2017, 17:52:25
Auf dem Android-Tablet wird jetzt bei Auswahl von "Wetter", "Müll" oder "Heizung" neben dem gewählten Pagetab auch der erste Pagetab "Home" als aktiv gezeigt und lässt sich nicht mehr bedienen. Dieses trifft auch nur auf "Home" zu.

Unter Firefox (uf Windows) verhält sich das Menü dagegen wie bisher bzw. erwartet ?!?

Hat sich wohl gelöst: dieses Verhalten tritt auf, wenn FTUI initial mit der URL /fhem/ftui/index.html anstelle /fhem/ftui/#index.html aufgerufen wird. Ob das jetzt mit dem Update zusammenhängt oder vorher auch schon so war kann ich nicht mehr nachvollziehen...

ujaudio · 26 Januar 2017, 19:50:23

Zitat von: Tabularasa am 24 Januar 2017, 17:03:43
Für einen Anfänger wie mich ist das gerade wieder ne extreme Herausforderung $:-\$ hatte nämlich schon ganz schön Mühe mir das alte hinzubasteln. Aber war jetzt schon langweilig weil ich am Sonntag fertig geworden bin Dann mal los...

Ja so ging es mir auch: ich war gestern gerade fertig, wollte alle Updates fahren und ins Bett gehen. Erst Frust, heute doch wieder Spaß und: setstate macht einen Klasse Job!!! Ganz vielen Dank.

Ralf.E · 26 Januar 2017, 21:13:09

Ich bin mit der Umstellung so in den letzten Züge und hänge hier noch an 2 Dingen:

Einmal am Weather-Widget - da will es mir nicht gelingen die Größe der Weather-Icons zu skalieren. Egal was ich in class eintrage bekomme ich immer die gleiche Größe des Icons. Diese skaliert auch mit der Größe des Bildschirms während das bei anderen Widgets nicht passiert.

Weiterhin bekomme ich das Link-Widget nicht richtig skaliert. Letztendlich versuche ich in einer Row zwei größere Links/Buttons mit Icon und Text darzustellen. Hier ist entweder nur das Icon zentriert und der Text rechts daneben oder die umgebende Box ist zu klein oder zu groß oder mit Angabe einer Breite ragt der Text rechts heraus.

Hat jemand einen Tip wie man das Link-Widget richtig verwendet?

Danke
Ralf

delight · 26 Januar 2017, 22:06:55

Im Rahmen des Updates habe ich mich auf diverse Herausforderungen bezüglich des Layouts eingestellt - stattdessen habe ich größere Probleme.

Ich bekomme beim Seitenaufruf diverse Meldungen über fehlende Klammern ("missing ) after argument list) u.a. in widget_switch.js (Zeile 23), widget_famultibutton.js (Zeile 439) und widget_button.js (Zeile 46).
Alle Buttons und Switches werden folglich nicht dargestellt.

Der Source-Code sieht an den entsprechenden Stellen nicht auffällig aus; sonstige Änderungen habe ich an FTUI und FHEM nicht vorgenommen.

Hat jemand eine Idee, warum ich den Wald vor lauter Bäumen nicht sehe?

Edit sagt: index-example.html ist auch betroffen .. es muss also global etwas im Argen liegen.

Danke und Gruß
Michael

pjakobs · 26 Januar 2017, 22:27:07

örgs, es wäre vielleicht gut, wenn so gravierende Änderungen nicht einfach mit einem "normalen" Update kämen.
Ich habe ein ein paar Räumen Lichtschalter, die ausschließlich über ftui zu bedienen sind, und das sind sie jetzt nicht mehr, scheinbar weil class="small col-1-4" nicht mehr funktioniert.

Zum Glück wohnt hier (derzeit zumindest) keine Frau, das wäre für den WAF ganz übel.

pj

setstate · 26 Januar 2017, 22:32:20

Zitat von: reb am 26 Januar 2017, 17:31:56
Gibt da vielleicht noch 4 Stellen:
- widget_button.js
- widget_dimmer.js
- widget_mutistatebutton.js
- widget_pagebutton.js

Danke, das ist ja schlimm. So viel vergessen ...

moonsorrox · 26 Januar 2017, 23:26:59

Zitat von: setstate am 26 Januar 2017, 15:19:24
Per default verhält sich der Push wie vorher passiv ohne Update von außen. Du muss data-get festlegen, damit er auf Updates reagiert.

Bedenke ich bin noch ganz am Anfang was FTUI betrifft
da brauche ich noch etwas mehr Info, dass mag für dich einfach sein... ich weiß damit leider nichts anzufangen... bin zufrieden wenn ich mein Layout überhaupt richtig hinbekomme $:-\$

Zitat von: octek0815 am 26 Januar 2017, 15:31:08
Hast du ein Beispiel wie ich das jetzt nur mit push hin bekomme?

hast du das schon hinbekommen..? ich nicht

setstate · 26 Januar 2017, 23:47:54

Sowas? Nur der Hörer, Warn wenn vorhanden und "clear" beim Drücken

Code Auswählen


<div class="large"
     data-type="push"
     data-warn="STATE"
     data-device="dummy1"
     data-set-on="clear"
     data-background-icon="none"
     data-icon="fa-phone">
</div>

setstate · 27 Januar 2017, 00:15:03

Zitat von: torte am 26 Januar 2017, 11:08:14
hab jetzt auch ein Problem mit einem ICONset welches ich so einbinde:
Code Auswählen Erweitern
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" />

Genutzt hab ich die ICONs dann z.b im PUSH Widget
Code Auswählen Erweitern
div data-type="push" data-device="Gong.Kids" data-set-on="on" data-icon="zmdi zmdi-notifications-active zmdi-hc-2x" data-background-icon="none" class="inline"></div>

Die Google Material Icons sind bei FTUI schon mit dabei

Code Auswählen

<div data-type="push" data-device="Gong.Kids" data-set-on="on" data-icon="mi-notifications_active" data-background-icon="none" class="big"></div>

https://material.io/icons/#ic_notifications_active

Prefix "mi-" plus die Namen mit Unterstrich verbunden

octek0815 · 27 Januar 2017, 06:16:25

Zitat von: moonsorrox am 26 Januar 2017, 23:26:59
Bedenke ich bin noch ganz am Anfang was FTUI betrifft
da brauche ich noch etwas mehr Info, dass mag für dich einfach sein... ich weiß damit leider nichts anzufangen... bin zufrieden wenn ich mein Layout überhaupt richtig hinbekomme :-\hast du das schon hinbekommen..? ich nicht

Leider nein, hoffe auf setstate.

setstate · 27 Januar 2017, 07:13:10

Zitat von: reb am 26 Januar 2017, 21:13:09

Einmal am Weather-Widget - da will es mir nicht gelingen die Größe der Weather-Icons zu skalieren. Egal was ich in class eintrage bekomme ich immer die gleiche Größe des Icons. Diese skaliert auch mit der Größe des Bildschirms während das bei anderen Widgets nicht passiert.

Code Auswählen


<li data-row="1" data-col="10" data-sizex="3" data-sizey="4">
    <header>WEATHER</header>
    <div class="vbox">
        <div data-type="weather" data-device="AgroWeather" data-get="fc2_weatherDay" class="big"></div>
        <div data-type="weather" data-device="AgroWeather" data-get="fc2_weatherDay" class="bigger"></div>
        <div data-type="weather" data-device="AgroWeather" data-get="fc2_weatherDay" class="tall"></div>
    </div>
</li>

torte · 27 Januar 2017, 07:15:46

Hallo Setstate,

danke für Deine Antwort, das ist aber nicht der MaterialIcons Font von Google sondern dieser hier:
http://zavoloklom.github.io/material-design-iconic-font/icons.html

Zitat von: setstate am 27 Januar 2017, 00:15:03
Die Google Material Icons sind bei FTUI schon mit dabei

Code Auswählen Erweitern
<div data-type="push" data-device="Gong.Kids" data-set-on="on" data-icon="mi-notifications_active" data-background-icon="none" class="big"></div>

https://material.io/icons/#ic_notifications_active

Prefix "mi-" plus die Namen mit Unterstrich verbunden

Habe mittlerweile gemerkt das ICONs richtig dargestellt werden, die es nur in dem Iconic ICONS Font vorhanden sind.
Beim laden der FTUI Seite wird eigentlich immer das von mir gewünschte Iconics Icon kurz angezeigt, nach 2-3 Sekunden
wenn die FTUI Seite durchgeladen ist wird es aber "überschrieben"
Muss ich das laden des Iconics FONT CSS an einer anderen stelle machen?

Viele Grüße
Torte

FTUI 2.5

delight