Hauptmenü

FTUI 2.5

Begonnen von setstate, 23 Januar 2017, 22:25:41

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1 2 3 ... 22
Benutzer-Aktionen

setstate

23 Januar 2017, 22:25:41 Letzte Bearbeitung: 02 Februar 2017, 12:30:49 von setstate
Bei der aktuellen, per Update verteilten Version gab es am 23.01.17 ein Upgrade im größeren Umfang.
Folgende Änderungen sind dabei:

- dynamisches Laden der Main-CSS Files und Standard-JS-Libs.

Es muss dadurch nicht mehr jedes benutze Icon-Set extra als CSS eingebunden werden. Wenn eines der inkludierten Icons benutzt wird, wird beim Start das benötigte CSS automatisch in den Header geladen.

Das gleiche gilt auch für die Gridster und Toast Libs.

Damit sieht ein HTML-Header minimal nur noch so aus

Code Auswählen

<!DOCTYPE html>
<html>

<head>

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

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

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

    <title>FHEM-Tablet-UI</title>
</head>


- dynamisches Berechnen der Gridster Kachel-Größen anhand der Bildschirmgröße und definierten Reihen und Spalten

Wenn man nicht möchte, dass die Anzahl der Spalten und Zeilen automatisch erkannt wird, kann man auch die Gridster Spalten und Reihen fest vorgeben

Code Auswählen

<meta name="gridster_cols" content="12">
<meta name="gridster_rows" content="9">


Keine automatische Anpassung an die Bildschirmgröße erfolgt, wenn man die Basis-Größen fest vorgibt

Code Auswählen

<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">


- verbessertes Laden von Templates

Damit sollte es nicht mehr vorkommen, dass bei Benutzung von Client-Side-Templates Symbole und Switches sporadisch fehlen.

- text/html content für push, symbol, switch, pagetab

Code Auswählen
<div data-type="symbol" data-device="dummy2" data-background-icon="fa-circle" data-on-background-color="green" data-off-background-color="red" data-color="#222" data-icon="">MS</div>

- Push Widget kann nun auch auf Inputs reagieren

Somit kann man bei Push-Widgets innerhalb eines Circlemenus den aktuell eingestellten Wert anzeigen

Code Auswählen

<div data-type="circlemenu" class="">
    <ul>
        <li>
            <div data-type="push" data-icon=""><div data-type="label" data-device="AvReceiver" data-get="subwoofer-temporary-level" class="small"></div></div>
        </li>
        <li>
            <div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level -15" data-get="subwoofer-temporary-level" data-get-on="-15" data-icon=""><div class="small">-15</div></div>
        </li>
        <li>
            <div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level -10" data-get="subwoofer-temporary-level" data-get-on="-10" data-icon=""><div class="small">-10</div></div>
        </li>
        <li>
            <div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level -5" data-get="subwoofer-temporary-level" data-get-on="-5"  data-icon=""><div class="small">-5</div></div>
        </li>
        <li>
            <div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 0" data-get="subwoofer-temporary-level" data-get-on="0"  data-icon=""><div class="small">0</div></div>
        </li>
        <li>
            <div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 5" data-get="subwoofer-temporary-level" data-get-on="5"  data-icon=""><div class="small">5</div></div>
        </li>
        <li>
            <div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 10" data-get="subwoofer-temporary-level" data-get-on="10"  data-icon=""><div class="small">10</div></div>
        </li>
        <li>
            <div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 12" data-get="subwoofer-temporary-level" data-get-on="12"  data-icon=""><div class="small">12</div></div>
        </li>
    </ul>
</div>


- Angeglichene Größen für Symbol/Switch und Label

- mini         : 50%
- tiny          : 60%
- small        : 80%
- normal      : 100%
- large        : 125%
- big           : 150%
- bigger      : 200%
- tall           : 350%
- grande      : 600%
- gigantic     : 144px

Durch die neuen Größen kann es bei bestehenden UIs zu Verschiebungen oder anderer Darstellung der Switches/Symbole kommen. Diese müssen angepasst werden.

- Push widgets kann jetzt zwei Status senden: off und on
Damit kann man Pfeiltasten für eine Camera-Steuerung bauen

Code Auswählen

<li data-row="3" data-col="3" data-sizey="2" data-sizex="2">
    <header>Joystick</header>
    <div class="vbox">
        <div class="hbox">
            <div data-type="push" data-device="dummy1" data-set-on="up" data-set-off="stop" data-icon="fa-arrow-up"></div>
        </div>
        <div class="hbox items-space-around">
            <div data-type="push" data-device="dummy1" data-set-on="left" data-set-off="stop" data-icon="fa-arrow-left"></div>
            <div data-type="label" data-device="dummy1"></div>
            <div data-type="push" data-device="dummy1" data-set-on="right" data-set-off="stop" data-icon="fa-arrow-right"></div>
        </div>
        <div class="hbox">
            <div data-type="push" data-device="dummy1" data-set-on="down" data-set-off="stop" data-icon="fa-arrow-down"></div>
        </div>
    </div>
</li>


- Departure: Auto refresh nach Popup öffnen oder Seitenwechsel mit Pagebutton

- Fade für Link + Pagebutton

Zitatdata-fade-duration   : time in millisecondes or 'slow'/'fast' to fade to next page (default 'slow')

- user language setting

Code Auswählen
<meta name='lang' content='de'>

- 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>


- 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

Code Auswählen

<li data-row="3" data-col="3" data-sizey="2" data-sizex="2">
    <header>Sheet > Row > Cell *-Align</header>
    <div class="sheet">
        <div class="row">
            <div class="cell left-align" data-type="symbol" data-device="dummy1"></div>
            <div class="cell right-align" data-type="symbol" data-device="dummy2"></div>
        </div>
        <div class="row">
            <div class="cell top-align" data-type="symbol" data-device="dummy3"></div>
            <div class="cell bottom-align" data-type="symbol" data-device="dummy4"></div>
        </div>
    </div>
</li>


- Slider und Thermostat können sich bei Berührung vergrößern

Für den Slider-Knopf
Zitat- **data-handle-diameter** : size for the handle (default 20)
- **data-touch-diameter** : size for the handle on movement (default: the normal size)

Für den Thermostat
Zitat
- **data-touch-height**  : vertical size of the widget  during changes (default: the normal size - 100)
- **data-touch-width**   : horizontal size of the widget during changes (default the normal size - 100)

- Änderung bei data-hidel

Einheitlich zu "lock", "warn" und "reachable" ist jetzt auch bei "hide" die Definition folgendermaßen :

data-hide        -  Das Reading (Default: STATE des data-device)
data-hide-on   -  Der Wert, den das Reading haben muss, damit es versteckt wird (Default: 'true|1|on')
data-hide-off   -  Der Wert, den das Reading haben muss, damit es wieder sichtbar wird (Default '!on' <- bedeutet: Gegenteil von data-hide-on )

- eigene jQuery - Version 3.* -

Wenn FTUI beim Starten kein jQuery findet (nicht bereits im Header eingebunden), dann nimmt er das aus dem lib Folder.
Wenn man also die neuste jQuery nutzen will, muss man im Header auf die eigene im lib Folder verweisen, oder den Verweis im Header ganz weglassen.

gloob

#1
24 Januar 2017, 08:19:35
Kommt das Update auf 2.5 über das normale Update?
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

Tobias

#2
24 Januar 2017, 08:21:04
Puhh, ich bin erschlagen von den Neuerungen :)
Respekt!
Allerdings habe ich Angst/Bedenken das viele der neuen und alten Features einfach untergehen, nicht benutzt werden oder in Vergessenheit für die breite Masse geraten weil das ReadMe auf der GitHub Seite nicht aktuell oder zu oberflächlich ist. Die Fhem Wiki Seite ist sowiso permanent veraltet :(

Ich selbst habe aber auch keine Idee wie ich/wir setstate dabei unterstützen können....
Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter

scooty

#3
24 Januar 2017, 08:51:27 Letzte Bearbeitung: 24 Januar 2017, 09:13:15 von scooty
Erst einmal danke für die tollen neuen Erweiterungen!
:)
Hier eine Rückmeldung auf die Schnelle:

select-widget:
Nur der Auswahlpfeil reagiert auf Grössenänderungen in class, der Text der Select-items und der Rahmen bleiben klein (s. Bild)

Code Auswählen
<div data-type="select"
data-device="XXDG_MTW"
data-set="desiredTemperature"
data-get="mode"
data-cmd="set"
data-items='["eco","auto","comfort","boost","off","on","manual"]'
class="tall centered top-narrow-2x">
</div>

symbol widget:
Widget wird trotz validem data-lock Wert angezeigt
Das data-warn Symbol (roter Kreis) wird nicht angezeigt

Code Auswählen
<div data-device="MUELL_Bio_Tage"
data-type="symbol"
data-states='["^[01]$",".*"]'
data-colors='["brown","brown"]'       
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn"]'
data-hide ='99'>
</div>

Oder vielleicht ist das ja auch nur bei mir so?

Vielen Dank nochmal,
Andreas

Edit:
PS: data-lock bei slider Widgest funktioniert nun hervorragend!
Fhem auf Gigabyte Brix
CUL V3 HM / CUL V3 MAX / MaxCube aFW Homematic&MAX / ZWave.me ZME_UZB1 / SDuino 433 / Velux KLF200
Homematic / MAX / Logitech Hub / ZWave / Wifi LED / div. 433 Temperatursensoren / pywws WH1080 / IO Homecontrol

tomster

#4
24 Januar 2017, 09:18:28
Cool! Vielen Dank!

Die Änderungen sind wirklich sehr umfangreich. Werd ich später Mal im Detail ausprobieren.
Ich muss nur zunächst mein Layout anpassen, da das Update dieses komplett "zerschossen" hat...

setstate

#5
24 Januar 2017, 09:35:35
Sorry, wenn es jetzt bei einigen die Anzeige durcheinander bringt, aber ich musste bei einigen Widgets alte billige Workarounds ausbauen, die mit festen Margins hantieren, nur damit es einigermaßen platziert aussah. Wenn man aber jetzt ein Layout benutzt, was alles ordentlich positioniert und zentriert, stört so etwas.

SamNitro

#6
24 Januar 2017, 09:53:01
Wer kann denn alles die Wiki Seite bearbeiten?

Kann man das nicht in irgend einer Weise so einrichten das jeder was dazu beitragen kann es aber dann noch freigegeben werden muss?!
(Intel-Nuc Proxmox) (Homematic) (EnOcean) (CUL868) (CUL433) (Zigbee2MQTT) (ESP8266) (Echo) (DUOFERN)

tomster

#7
24 Januar 2017, 10:00:00
Zitat von: setstate am 24 Januar 2017, 09:35:35
Sorry, wenn es jetzt bei einigen die Anzeige durcheinander bringt, aber ich musste bei einigen Widgets alte billige Workarounds ausbauen, die mit festen Margins hantieren, nur damit es einigermaßen platziert aussah. Wenn man aber jetzt ein Layout benutzt, was alles ordentlich positioniert und zentriert, stört so etwas.

Never mind. Obwohl ich nun erst mal wieder mit den neuen Position-Tags spielen muss ein erstes Statement: GEIL!
sheet, row und cell sind ein wahrer Gewinn. Das Pagebutton-Fading ist sehr "wertig" und eine Testseite mit den selbstanpassenden Gridster-Elementen begeistert mich.
Vielen Dank setstate!

cotecmania

#8
24 Januar 2017, 10:29:51
Ups.
Meine Seite ist nun auch komplett "zerschossen"  :'(

- Thermostat, SimpleChart und Range sind nun immer doppelt untereinander vorhanden ?
- Charts erscheinen gar nicht mehr
- Beim Abfall-Symbol fehlen die kleinen Zahlen im roten Kreis bis zur nächsten Leerung
- Switch und Pagebutton sind farblich nicht mehr zu erkennen, d.h. selbe Farbe wie Hintergrund
- ...
- ...

Gruss
FHEM auf RaspberryPI B (buster)
2xCUL868 für MAX/Slow_RF, HM-LAN, JeeLink
MAX!/HM-Thermostate, FS20/HM-Rolladenschalter, FS20-EM, LevelJet-Ölstandsmessung, PCA301, IT, KM271, IPCAM, FireTAB10 FTUI

eazy_isi

#9
24 Januar 2017, 11:24:26
Meine Seite sieht auch ein wenig "verbogen" aus, nach dem Update  :'(
Aber nachdem ich die Symbole angepasst habe, sieht es schon wieder ganz ordentlich aus.

Ansonsten das gleiche Probleme wie bei @cotecmania

- Beim Abfall-Symbol fehlen die kleinen Zahlen im roten Kreis bis zur nächsten Leerung

- neues Layout Schema: Sheet > Row > Cell  Super ! Habe ich schon kurz angetestet, komme allerdings nicht ganz klar,
wie ich ein Label für das Icon passend darunter platziere.

Gruß
Thomas

roadghost

#10
24 Januar 2017, 11:32:27
Hey Leute,

wenn ich vom 1.er FTUI auf die nun aktuelle Version wechseln möchte, welchen Aufwand muss ich denn dazu betreiben ??

Muss ich jede einzelne Seite (in meinem Fall gute 22 Stück) überarbeiten, oder was muss ich ersetzen bzw. anpassen ??

Die kleinen roten Zahlen an den Mülltonnen-Icons fehlen bei mir auch, der Rest sieht erstmal, bis auf größenveränderungen (bigger/bigplus) gut aus.

Grüße
NUC/Ubuntu 22.04 m. FHEM, div. Tasmota-Steckdosen, HMCFGUSB-2 für 12x HM-CC-RT-DN + 8x HM-TC-IT-WW
Rademacher DuoFern für 12 Jalousien, JeeLink für LaCrosse Temp.Sensor, WLAN-smart-Plugs, 
NUKI smartlock, 2xIP-CAM, Pylontech Speicher + Sungrow WR, Unifi-AP´s + Controller auf weiterem NUC

setstate

#11
24 Januar 2017, 11:56:59
Innerhalb einer "cell" -> untereinander
Neue cell -> neben der anderen cell

Code Auswählen

                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1"></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>


Das mit dem Warn-Kreis muss ich mir anschauen. Habe ich nicht explizit getestet 

Eisix

#12
24 Januar 2017, 12:33:53
Hallo,

Warnkreise sind bei mir da.
Bei den meisten Seiten hat das rausnehmen von cell die Ordnung einigermaßen wieder hergestellt.

Gruß
Eisix

fhainz

#13
24 Januar 2017, 14:17:42
Zitat von: SamNitro am 24 Januar 2017, 09:53:01
Wer kann denn alles die Wiki Seite bearbeiten?

Kann man das nicht in irgend einer Weise so einrichten das jeder was dazu beitragen kann es aber dann noch freigegeben werden muss?!
Jeder kann das Wiki bearbeiten. Account besorgen und schon gehts los.

Grüße

eazy_isi

#14
24 Januar 2017, 15:41:03
Danke für die Hilfe.

So funktioniert es jetzt wie gewünscht:
Code Auswählen
<header class="semitransparentheader">@Home</header>

   <div class="sheet">
        <div class="row">
            <div class="cell top-align">
    <div data-type="symbol"
data-device="Handy_Chefin"
data-icon="fa-user"
class="big"
data-on-color="orange"
          data-get-on="present"
          data-get-off="absent"></div>
    <div data-type="label" class="small narrow darker">Chefin</div>           
        </div>
            <div class="row">
            <div class="cell left-align">
    <div data-type="symbol"
data-device="Handy_Chef"
data-icon="fa-user"
class="big"
data-on-color="orange"
          data-get-on="present"
          data-get-off="absent"></div>
    <div data-type="label" class="small narrow darker">Chef</div>
    </div>
</li>

Allerdings nur mit top-align

Versuche ich es so:
Code Auswählen
<header class="semitransparentheader">@Home</header>

   <div class="sheet">
        <div class="row">
            <div class="cell left-align">
    <div data-type="symbol"
data-device="Handy_Chefin"
data-icon="fa-user"
class="big"
data-on-color="orange"
          data-get-on="present"
          data-get-off="absent"></div>
    <div data-type="label" class="small narrow darker">Chefin</div>           
        </div>
            <div class="row">
            <div class="cell right-align">
    <div data-type="symbol"
data-device="Handy_Chef"
data-icon="fa-user"
class="big"
data-on-color="orange"
          data-get-on="present"
          data-get-off="absent"></div>
    <div data-type="label" class="small narrow darker">Chef</div>
    </div>
</li>

oder mit bottom-align Sind die Symbole in der Höhe versetzt.
Siehe Bild




Zitat von: setstate am 24 Januar 2017, 11:56:59
Innerhalb einer "cell" -> untereinander
Neue cell -> neben der anderen cell

Code Auswählen

                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1"></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>


Das mit dem Warn-Kreis muss ich mir anschauen. Habe ich nicht explizit getestet


Drucken
Nach oben Seiten1 2 3 ... 22
Benutzer-Aktionen