Grüße euch,
hab heute ein git pull für tablet-ui gemacht, danach wollte meine Abfall/Fenster-Status-Anzeige nicht mehr.
Keine farbliche Darstellung der Symbole/-Ringe.
Diese Files hab ich wieder hergestellt, dann gings wieder
Sende tablet/www/tablet/css/fhem-tablet-ui.css
Sende tablet/www/tablet/css/fhem-tablet-ui.min.css
Sende tablet/www/tablet/js/fhem-tablet-ui.js
Sende tablet/www/tablet/js/fhem-tablet-ui.min.js
Sende tablet/www/tablet/js/widget_famultibutton.js
Kann ich bestätigen, meine Symbole bemerke ich jetzt erst, sind auch etwas blaß geworden nach dem update :D
Vielen Dank für die Info. Aber viel kann ich damit nicht anfangen. Ich brauche schon ein Beispiel.
Hallo hier ein Beispiel
<li data-row="2" data-col="4" data-sizex="3" data-sizey="1">
<header><font size="+1">Abfall</font></header>
<div data-type="symbol"
data-device="Abfall"
data-get="Biotonne_days"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["SaddleBrown","SaddleBrown"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
class="bigger inline" >
</div>
<div data-type="symbol"
data-device="Abfall"
data-get="Gelbersack_days"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["yellow","yellow"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
class="bigger inline" >
</div>
<div data-type="symbol"
data-device="Abfall"
data-get="Papiertonne_days"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["blue","blue"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
class="bigger inline" >
</div>
<div data-type="symbol"
data-device="Abfall"
data-get="Restmuelltonne_days"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["black","black"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
class="bigger inline" >
</div>
</li>
MfG Benny
noch ein Beispiel:
<div
data-type="symbol"
data-background-icon="fa-circle-thin"
data-off-background-color="#7A7A7A"
data-on-background-colors='["#7A7A7A","red","#7A7A7A"]'
data-device="AbfallTermine"
data-get='Abfall_GelberSack_days'
data-off-color="#E6E600"
data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]'
data-icons='["fs-bag warn","fs-bag warn blink","fs-bag warn"]'
data-on-colors='["#E6E600","#E6E600","#E6E600"]' class="big" style="margin-bottom: 0px">
</div>
Noch zwei:
<div data-type="symbol" data-device="Calllist"
data-get="1-state"
data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div>
<div data-type="symbol" data-device="Calllist"
data-get="1-state"
data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div>
<div data-device="myAbfall"
data-type="symbol"
class="bigger symbol"
data-get="next"
data-get-warn=".*(\d+).*"
data-get-on='["RestabfallWertstoffe_1","Bioabfall_1","Hecken-undBaumschnitt_1","Schadstoffmobil_1","RestabfallWertstoffe_.*","Bioabfall_.*","Hecken-undBaumschnitt_.*","Schadstoffmobil_.*"]'
data-on-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn blink","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
Hallo,
ist mir auch aufgefallen nach dem ändern von data-on-colors= zu data-colors= waren die Farben wieder da.
Gruß Paul
Zitat von: paul79 am 07 Februar 2018, 08:54:49
Hallo,
ist mir auch aufgefallen nach dem ändern von data-on-colors= zu data-colors= waren die Farben wieder da.
Gruß Paul
Das ändern zu data-colors führt bei mir zu keiner Änderung.
Ich habe gestern noch ein Update hochgeladen
Danke.
Jetzt stellt sich mir aber auch die Frage welche Angabe bei den gezeigten Beispielen richtig ist. data-on-colors oder data-colors. Nach dem update sind die Farben wieder, auch mit data-colors.
Hi,
habe heute morgen ein update gezogen und bei mir werden die Farben zwar korrekt dargestellt, aber die Icons nichts. Die Abfall-Icons werden angezeigt.
Code:
<div class="compressed big" data-type="symbol" data-device="BAD_Fenster"
data-states='["open","closed"]'
data-icons='["ftui-window warn","ftui-window"]'
data-colors='["red","green"]' >
</div>
Was nun?
Hallo
nach folgender Änderung geht es bei mir.
Neu:
<div class="cell">
<div data-type="symbol"
data-device="Unifi"
data-get="state"
data-get-on='["disconnected","connected"]'
data-icons='["fa-unlink","fa-link"]'
data-colors='["#FA2828","#21a000"]'
class="readonly"
></div>
<div data-type="label">Unifi</div>
</div>
Alt:
<div class="cell">
<div data-type="symbol"
data-device="Unifi"
data-get-on="connected"
data-get-off="disconnected"
data-icon="fa-link"
data-on-color="#21a000"
data-off-color="#FA2828"
class="readonly"
></div>
<div data-type="label">Unifi</div>
</div>
Gruß
Eisix
Eigentlich solle kein Umbau notwendig sein.
Ich war nur gerade dabei, die Anwendung von Themes besser zu unterstützen.
<link rel="stylesheet" href="css/fhem-green-ui.css" data-type="theme" data-device="ftuitest" data-get="state" data-get-on="on" data-get-off="!on" />
Dabei sind halbfertige Änderungen mit ausgerollt worden. Ich versuche das auf Zuruf schnell zu fixen
Ein nötige Änderung wäre aber das
alt:
<div data-type="label">Unifi</div>
neu:
<div>Unifi</div>
Heist das der data-type Label wird rausgenommen???
Wenn ja habe ich glaube ich ein größeres Problem :o
Gruß
Eisix
Wenn es kein dynamischer Text sein soll, der von FHEM geholt werden soll, sondern nur statischer Text, sollte man data-type weglassen. Das spart Ressourcen
Also, meine Symbole scheinen seit einem Update mit RegExp nicht mehr klar zu kommen.
Funktioniert noch:
<div data-type="symbol"
data-device="hmTemperaturAussen"
data-get="battery"
data-get-on="ok"
data-get-off="!on"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-0"]'
class="cell compressed"></div>
Funktioniert nicht mehr:
<div data-type="symbol"
data-device="hmThermostatWz"
data-get="batteryLevel"
data-get-on="[\d]\.[\d]"
data-get-off="!on"
data-states='["(3|3.[0-9])","2.[789]","2.[56]","2.[234]","(2|(2.[01])|([01].[0-9]))"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'
class="cell compressed"></div>
Oder es liegt daran, dass mehr als zwei verschiedene Stati angegeben werden. Meine Homestatus-Symbole zeigen das selbe Phänomen (grau statt orange):
<div data-type="symbol"
data-device="par01"
data-set=""
data-states='["home","gotosleep","absent","gone"]'
data-icons='["par02","mi-hotel","mi-directions_run","mi-flight_takeoff"]'
data-background-icon="mi-lens"
data-on-color="#AA6900"
data-on-background-color="transparent"></div>
Sieht aus, wie im Anhang.
Gruß
Stefan
Jetzt sollte es erst einmal wieder funktionieren
Nope, hier nicht. :-[ Meine Fenster-Icons sind immernoch mit Fehler.
Weiterhin sind nun die anderen Symbole in Originalgröße, da scheint die class ignoriert zu werden.
<div data-type="symbol"
data-device="WaMa_Watt"
data-get="state"
data-part="1"
data-states='[0,0.5,2,6]'
data-background-icon=""
data-icons='["mi mi-local_laundry_service","mi mi-local_laundry_service","mi mi-local_laundry_service fa-blink","mi mi-local_laundry_service fa-spin"]'
data-colors='["grey","green","yellow","red"]'
class="big top-narrow">
</div>
ich hatte vergessen die passende fa-multi-button.js hochzuladen.
schaut wieder gut aus
Danke!
Habe eben ein Update durchgeführt.
Ok, das Waschmaschinen-Symbol ist wieder so große "wie gewohnt".
Aber bei den Fenstersymbolen hat sich nichts getan. :(
Edit: hier nochmal der code:
<div class="compressed big"
data-type="symbol"
data-device="BAD_Fenster"
data-states='["open","closed"]'
data-icons='["ftui-window warn","ftui-window"]'
data-colors='["red","green"]' >
</div>
und
<div class="bigger" data-type="symbol" data-device="BAD_Fenster"></div>
Fehlen bei dir unter ./fonts die FTUI Dateien?
Ich vermute, mein Darstellungsproblem seit dem Update gestern hängt auch irgendwie mit diesem Thread zusammen.
Hauptdatei:
<html>
<head>
...
<link rel="stylesheet" href="lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/openautomation.css" />
<link rel="stylesheet" href="lib/fhemSVG.css" />
<script src="pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
...
</head>
<body class="vbox" style="flex-wrap: initial; height: 100%;">
<!-- Header -->
<div class="hbox" style="height: auto;">
<div data-template="template_nav_eintrag.php" data-parameter='{"par01":"main","par02":"flex_main.php","par03":"fa-gears","par04":"default"}' class="inline"></div>
<div data-template="template_nav_eintrag.php" data-parameter='{"par01":"temperatur","par02":"flex_temp.php","par03":"fa-thermometer","par04":""}' class="inline"></div>
...
<div data-type="symbol" data-icon="fa-phone warn" data-device="dummy.VerpassteAnrufe" class="inline"></div>
<div data-type="symbol" data-icon="fa-bell" data-device="dummy2" data-get-on="on.*" data-get-off="off" class="inline"></div>
</div>
<!-- Hauptinhalt -->
<div style="flex: 1 1 auto; overflow-y: auto; " class="hbox full-width">
<div class="page" id="main"></div>
<div class="page" id="temperatur"></div>
</div>
</body>
</html>
flex_main
<div class="page" id="main">
<div class="hbox">
<div class="box vertical phone-width full-height">
<!-- Wetter -->
<div class="card lift grow-2">
<header>Wetter</header>
...
</div>
<!-- Arbeitszimmer -->
<div class="card lift">
<header>Arbeitszimmer</header>
...
</div>
...
</div>
<div class="box vertical phone-width full-height">
<!-- Schlafzimmer -->
<div class="card lift">
<header>Schlafzimmer</header>
... </div>
</div>
<!-- Treppenhaus / Flur-->
<div class="card lift">
<header>Treppenhaus</header>
...
</div>
...
</div>
...
</div>
</div>
Meine statische Kopfzeile mit diversen (hier gekürzten) Icon-Links rutscht zur Hälfte oben aus dem Bildschirm heraus und wird zudem vom Inhalt überlagert. Die Überlagerung resultiert wahrscheinlich daraus, dass einige Flexboxen seit dem Update viel größer sind als vorher und damit die vorgegebene Box sprengen. Die größeren Boxen sind mit viel freier Fläche gefüllt.
und noch zwei screenshots
Hallo,
bei mir hat das Update von heute den seltsame Darstellung von gestern wieder behoben. Danke!
Das Einzige, was mir aufgefallen ist:
Kann es sein, dass bei symbol die class "warn" jetzt kursiv angezeigt wird? Ich meine, dass das vorher etwas anders aussah ???
Sieht man auch schön an dem screenshot meines Vorposters (Tage bis Müll-Leerung).
schöne Grüße
Jo
Ja, sie sahen anders aus und waren auch kleiner.
ja, stimmt. Wird kursiv dargestellt. Das war unbeabsichtigt. Ist jetzt korrigiert.
Größer geworden sind sie aber auch.
@setstate:
Hast du irgendwo eine Zusammenstellung, was du seit Monatsanfang gravierend (in Vorbereitung der Themes?) umgestellt hast? Da steckt noch mehr drin, was ich gerade nicht sehe und wahrscheinlich mein Flex-Layout zerschießt.
Die data-type "label" habe ich überall rausgenommen, wo ich statische Texte habe. Das erklärt aber nicht die ausufernden Boxen, die bis vor zwei Tagen ordentlich aussagen.
Zitat von: setstate am 09 Februar 2018, 17:27:10
Fehlen bei dir unter ./fonts die FTUI Dateien?
Alle die, die ich vor dem Update auch schon hatte:
-rw-r--r-- 1 fhem dialout 3165 Oct 31 12:45 FTUI-icons.svg
-rw-r--r-- 1 fhem dialout 1688 Oct 31 12:45 FTUI-icons.ttf
-rw-r--r-- 1 fhem dialout 1764 Oct 31 12:45 FTUI-icons.woff
Im Backup vom 27.01.18 sind diese Dateien auch enthalten.
Ich hab soeben ein
update all gemacht und die icons sind immernoch nicht da. Bei mir began dies mit dem FTUI Update von Mittwoch.
Zitat von: setstate am 08 Februar 2018, 18:12:21
Jetzt sollte es erst einmal wieder funktionieren
Kann ich leider nicht bestätigen. Im Vergleich zu diesem Beitrag (https://forum.fhem.de/index.php/topic,83932.msg762762.html#msg762762) haben sich zwar die Homestatus-Symbole wieder orange eingefärbt, die Batterie-Symbole sind aber immer noch grau, sobald es mehr als zwei mögliche Stati gibt (oder die Regex werden nicht richtig interpretiert).
Hallo,
seit einem der letzten Updates haut das entfernen des aktiven Hintergrund Icons bei Pagebutton nicht mehr hin wenn die Pagebutton Definition mehrere Icons hat.
<div data-type="pagebutton" data-url="#flur_content1.html" data-load="#flur_content1" data-active-pattern="(.*/||.*index_flur.html||.*#flur_content1.html)" data-device="Flur_EG_Haustuerschloss" data-get="state" data-get-on='["locked","unlocked","locked (uncertain)","unlocked (uncertain)"]' data-icons='["mf1-home-locked","mf1-home-unlocked","mf1-home-locked-uncertain","mf1-home-unlocked-uncertain"]' data-off-color="white" data-on-color="white" data-fade-duration="fast" data-background-icon="fa-square" class="default"></div>
<div data-type="pagebutton" data-url="#flur_content2.html" data-load="#flur_content2" data-active-pattern=".*#flur_content2.html" data-icon="oa-sani_heating" data-off-color="white" data-on-color="white" data-fade-duration="fast" data-background-icon="fa-square"></div>
<div data-type="pagebutton" data-url="#flur_content3.html" data-load="#flur_content3" data-active-pattern=".*#flur_content3.html" data-off-color="white" data-on-color="white" data-device="dRolllaeden_Gesamtstatus" data-get="state" data-icons='["mf1-fts_shutter_10_medium","mf1-fts_shutter_50_medium","mf1-fts_shutter_100_medium","mf1-fts_shutter_20_attention_medium warn"]' data-get-on='["opened","partial","closed","attention"]' data-fade-duration="fast" data-background-icon="fa-square"></div>
<div data-type="pagebutton" data-url="#flur_content4.html" data-load="#flur_content4" data-active-pattern=".*#flur_content4.html" data-icon="mf1-verbraeuche" data-off-color="white" data-on-color="white" data-fade-duration="fast" data-background-icon="fa-square"></div>
<div data-type="pagebutton" data-url="#flur_content5.html" data-load="#flur_content5" data-active-pattern=".*#flur_content5.html" data-icon="mi-tune" data-off-color="white" data-on-color="white" data-fade-duration="fast" data-background-icon="fa-square"></div>
<div data-type="pagebutton" data-url="#flur_content6.html" data-load="#flur_content6" data-active-pattern=".*#flur_content6.html" data-icon="fa-calendar" data-off-color="white" data-on-color="white" data-fade-duration="fast" data-background-icon="fa-square"></div>
Grüße
Olli
Stimmt, dann war das zu viel optimiert. Ist wieder repariert.
Ja, ist wieder alles gut.
Vielen Dank, wie immer für die schnelle Behebung!
Ich reite nochmal schnell auf meinem Problem herum ;)
Konnte die Sache auf die Kombination von data-get-on und RegEx eingrenzen.
Ein paar Beispiele:
Dummy Test = 0
<div data-type="symbol"></div>
... Graues Symbol
Dummy Test = 0
<div data-type="symbol" data-device="Test"></div>
... Graues Symbol
Dummy Test = 1
<div data-type="symbol" data-device="Test"></div>
... Oranges Symbol
Dummy Test = 1.1
<div data-type="symbol" data-device="Test"></div>
... Graues Symbol
Dummy Test = 1.1
<div data-type="symbol" data-device="Test" data-get-on="1.1"></div>
... Oranges Symbol
Dummy Test = 1.1
<div data-type="symbol" data-device="Test" data-get-on="[d]\.[d]"></div>
... Graues Symbol
Und genau das letzte Beispiel ist mein Problem. Das sollte nach Adam Riese auch orange sein. War's zumindest bis vor der "Update-Orgie" immer ;).
Du meinst bestimmt "[\d]\.[\d]"
Ach, käse :(. Ja, meine ich.
Gut, dann liegt's nicht daran und ich suche weiter. Im "Original-Code" ist's richtig, die Symbole trotzdem grau.
data-get-on,data-get-off sollte man auch nicht mit data-states mixen
nimm lieber
data-classes='["","active","active","active","active"]'
oder
data-colors='["red","yellow","yellow","yellow","green"]'
Öhhhm, ähh, ja. Macht eigentlich total Sinn! Kopf -> Tisch
In meinem Fall reicht auch ein ganz einfaches data-color. Weil, der Akku ist ja eh immer da. Nur halt manchmal nicht voll. Aber das zeigt dann ja das eigene Icon.
Halt gemein, weil's mal funktioniert hat ;)
Danke dir!
ZitatHalt gemein, weil's mal funktioniert hat ;)
Ja, das glaube ich, aber hier leider bloß zufällig. Es passt nicht in die Philosophie, weil das meiste diesem Muster folgt:
Status-Array
oder on/off
if ($.isArray(states)) {
me.showMultiStates(elem, states, state);
} else {
....
if (elem.matchingState('get', state) === 'on') {
faelem.setOn();
}
if (elem.matchingState('get', state) === 'off') {
faelem.setOff();
}
}
Hallo Setstate,
hast du noch eine Idee, ob und wenn ja wodurch dieses Anfang-Februar-Update die Darstellungsprobleme mit meiner Kopfzeile aus den Beiträgen #22 und #23 hervorgerufen hat?
Gruß
Christian