« vorheriges nächstes »
Seiten: [1] 2 3 ... 22   Nach unten

Autor Thema: FTUI 2.5  (Gelesen 48454 mal)

Online setstate

  • Hero Member
  • *****
  • Beiträge: 3893
  • FHEM TabletUI
    • FHEM Tablet UI
FTUI 2.5
« am: 23 Januar 2017, 22:25:41 »
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

Zitat
data-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.
« Letzte Änderung: 02 Februar 2017, 12:30:49 von setstate »
Gespeichert
Gefällt mir Gefällt mir x 10 Liste anzeigen

Offline gloob

  • Hero Member
  • *****
  • Beiträge: 2503
Antw:FTUI 2.5
« Antwort #1 am: 24 Januar 2017, 08:19:35 »
Kommt das Update auf 2.5 über das normale Update?
Gespeichert
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

Offline Tobias

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3586
Antw:FTUI 2.5
« Antwort #2 am: 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....
Gespeichert
FHEM auf ASRock J3455-ITX im 19" Rack mit Homematic, MAX, PCA301, Panstamp-Sensoren, RPi mit 2x 1wire, RPi mit Text2Speech.
Maintainer der Module: DbLog, Text2Speech, TrashCal, MediaList
Meine Projekte auf https://github.com/tobiasfaust

Offline scooty

  • Full Member
  • ***
  • Beiträge: 477
Antw:FTUI 2.5
« Antwort #3 am: 24 Januar 2017, 08:51:27 »
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!
« Letzte Änderung: 24 Januar 2017, 09:13:15 von scooty »
Gespeichert
Fhem auf RasPi
CUL V3 HM / CUL V3 MAX / MaxCube aFW Homematic / ZWave.me ZME_UZB1 / nanoCUL aFW 433 / SDuino 868 / Velux KLF200
Homematic / MAX / Logitech Hub / ZWave / Wifi LED / div. 433 Temperatursensoren / pywws WH10880 / IO Homecontrol

Offline tomster

  • Sr. Member
  • ****
  • Beiträge: 893
Antw:FTUI 2.5
« Antwort #4 am: 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...
Gespeichert

Online setstate

  • Hero Member
  • *****
  • Beiträge: 3893
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI 2.5
« Antwort #5 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.
Gespeichert

Offline SamNitro

  • Sr. Member
  • ****
  • Beiträge: 605
  • Kölner Wimpelbeauftragter
Antw:FTUI 2.5
« Antwort #6 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?!
Gespeichert
(Rpi 3, Stretch) (HM-LGW) (EnOcean) (MAX!) (CUL868) (CUL433) (Homematic) (FS20) (ESP8266) (Echo)

Offline tomster

  • Sr. Member
  • ****
  • Beiträge: 893
Antw:FTUI 2.5
« Antwort #7 am: 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!
Gespeichert

Offline cotecmania

  • Sr. Member
  • ****
  • Beiträge: 510
Antw:FTUI 2.5
« Antwort #8 am: 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
Gespeichert
FHEM auf RaspberryPI B (jessie)
2xCUL868 für MAX/Slow_RF, HM-LAN, JeeLink
MAX!/HM-Thermostate, FS20/HM-Rolladenschalter, FS20-EM, LevelJet-Ölstandsmessung, PCA301, IT, KM271, IPCAM, ACER Iconia One mit AMAD/FTUI

Offline eazy_isi

  • Jr. Member
  • **
  • Beiträge: 52
Antw:FTUI 2.5
« Antwort #9 am: 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
Gespeichert
Zustimmung Zustimmung x 1 Liste anzeigen

Offline roadghost

  • Full Member
  • ***
  • Beiträge: 133
Antw:FTUI 2.5
« Antwort #10 am: 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
Gespeichert
NUC / Ubuntu 16.04 / FHEM nanoCUL433 für 8x Intertechno
HMCFGUSBII für 9x HM-CC-RT 9x HM-TC-IT
Rademacher DuoFern Stick für 12 Jalousien
JeeLink für LaCrosse Temp.Sensor
Z-Wave smartPlugs über UZB1 Danalock V3 BTZE

Online setstate

  • Hero Member
  • *****
  • Beiträge: 3893
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI 2.5
« Antwort #11 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 
Gespeichert

Offline Eisix

  • Sr. Member
  • ****
  • Beiträge: 675
Antw:FTUI 2.5
« Antwort #12 am: 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
Gespeichert

Offline fhainz

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1262
Antw:FTUI 2.5
« Antwort #13 am: 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
Gespeichert

Offline eazy_isi

  • Jr. Member
  • **
  • Beiträge: 52
Antw:FTUI 2.5
« Antwort #14 am: 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


Gespeichert
Seiten: [1] 2 3 ... 22   Nach oben
« vorheriges nächstes »
 

decade-submarginal