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
<!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 SpaltenWenn man nicht möchte, dass die Anzahl der Spalten und Zeilen automatisch erkannt wird, kann man auch die Gridster Spalten und Reihen fest vorgeben
<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
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">
- verbessertes Laden von TemplatesDamit 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<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 reagierenSomit kann man bei Push-Widgets innerhalb eines Circlemenus den aktuell eingestellten Wert anzeigen
<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
<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 data-fade-duration : time in millisecondes or 'slow'/'fast' to fade to next page (default 'slow')
- user language setting<meta name='lang' content='de'>- Slider/Level Widget: Timer zum Interpolieren von ZwischenschrittenZum 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.
<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 > CellEin Tabellen ähnliches Layout um Widgets sehr einfach vertikal und horizontal zentrieren zu können
<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
<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ößernFür den Slider-Knopf
- **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
- **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-hidelEinheitlich 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.
