Fehlerhafte Darstellung symbol

Begonnen von knopf_piano, 06 Februar 2018, 14:03:25

Vorheriges Thema - Nächstes Thema

knopf_piano

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

zotac nano mit proxmox und ganz viel zeug drauf

TomLee

Kann ich bestätigen, meine Symbole bemerke ich jetzt erst, sind auch etwas blaß geworden nach dem update  :D

setstate

Vielen Dank für die Info. Aber viel kann ich damit nicht anfangen. Ich brauche schon ein Beispiel.

benz_freak

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

knopf_piano

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>
zotac nano mit proxmox und ganz viel zeug drauf

TomLee

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>


paul79

Hallo,

ist mir auch aufgefallen nach dem ändern von data-on-colors= zu data-colors= waren die Farben wieder da.


Gruß Paul
FHEM5.7 auf Pi3
Busware CUL433 (IT), JeeLink Lacrosse, HM-MOD-RPI-PCB, HM, TabletUI

TomLee

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.

setstate

Ich habe gestern noch ein Update hochgeladen

TomLee

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.

yersinia

#10
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?
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Eisix

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

setstate

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

Eisix

Heist das der data-type Label wird rausgenommen???

Wenn ja habe ich glaube ich ein größeres Problem :o

Gruß
Eisix


setstate

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

drhirn

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

setstate

Jetzt sollte es erst einmal wieder funktionieren

yersinia

#17
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>
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

setstate

ich hatte vergessen die passende fa-multi-button.js hochzuladen.


knopf_piano

zotac nano mit proxmox und ganz viel zeug drauf

yersinia

#20
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>
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

setstate

Fehlen bei dir unter ./fonts die FTUI Dateien?

cbl

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.


cbl


Jojo11

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

cbl

Ja, sie sahen anders aus und waren auch kleiner.

setstate

ja, stimmt. Wird kursiv dargestellt. Das war unbeabsichtigt. Ist jetzt korrigiert.

cbl

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.

yersinia

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.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

drhirn

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

octek0815

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



setstate

Stimmt, dann war das zu viel optimiert. Ist wieder repariert.

octek0815

Ja, ist wieder alles gut.

Vielen Dank, wie immer für die schnelle Behebung!

drhirn

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 ;).

setstate


drhirn

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.

setstate

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"]'

drhirn

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

setstate

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();
   }

}


cbl

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