FTUI version 3

octek0815 · 06 Januar 2021, 13:27:13

Zitat von: yersinia am 06 Januar 2021, 13:24:32
SVGs für weather icons:
Code Auswählen Erweitern
cd /tmp wget https://github.com/erikflowers/weather-icons/archive/master.zip unzip master.zip sudo mv /tmp/weather-icons-master/svg /opt/fhem/www/ftui/wi-svg sudo chown fhem:dialout /opt/fhem/www/ftui/wi-svg sudo chown fhem:dialout /opt/fhem/www/ftui/wi-svg/*
Die weather-icons befinden sich dann, analog zu fa-svg, direkt unter wi-svg.

optional (löscht das runtergeladene Archiv sowie den Ordner, Benutzung auf eigene Gefahr):
Code Auswählen Erweitern
cd /tmp rm master.zip rm -r weather-icons-master/

oder diese wenn es bunt und animiert sein soll...

https://bas.dev/projects/weather-icons
https://www.amcharts.com/free-animated-svg-weather-icons/

Grüße
Olli

moonsorrox · 06 Januar 2021, 13:53:09

Zitat von: octek0815 am 06 Januar 2021, 12:25:39
Dein Code ist irgendwie sehr seltsam.
Hier mein Code (solltest du im übrigen schon haben) am Beispiel der Restmülltonne:

Erst das Icon, dann Badge (ist bei mir zweimal, da ich bei 0 Tage (also Leerungstag) ein Ausrufezeichen haben wollte.

Grüße
Olli

ja den habe ich natürlich den Code...

Ich habe das bisher auch komplett anders gelöst...!

Bei mir ist der Abfall nur mit einem Icon dargestellt in einer Stauszeile sage ich jetzt mal, weil ich nicht alle Icons ständig sehen muss, dieses Icon wechselt immer mal die Farbe, sobald es 2 Tage vor Leerung ist, erscheint das badge mit einer "2" und farbig - meine Farbe ist ein violett, genauso 1 Tag vor Leerung, aber am Tag der Leerung soll es eben ein badge in Rot (crimson) und eine "0"bei mir erscheinen. Das hat bisher auch funktioniert (version 2).
Zusätzlich wenn ich auf das Icon klicke erscheint ein Popup mit allen Abfall Anzeigen die sich drehen und weiteren Hinweisen wie aha Adresse und Öffnungszeiten.
Aber auch die drehenden spin Icon haben kein badge mehr ab Leerungstag dran und das verstehe ich nicht. Ansonsten hat es ja die Tage gut funktioniert.
In der badge Angabe habe ich doch aber

Code Auswählen

map('0:false, 1:false, 2:false')"

stehen...

siehe auch hier der gesamte badge Code

Code Auswählen

<ftui-badge [text]="myAbfall:Restmuell_tage | map('BioabfallGruengut_0:MediumSpringGreen, BioabfallGruengut_1:MediumSpringGreen, BioabfallGruengut_.*:MediumSpringGreen, GelberSackLeichtverpackungen_0:DarkOrange, GelberSackLeichtverpackungen_1:DarkOrange, GelberSackLeichtverpackungen_.*:DarkOrange, PapierAbfall_0:royalblue1, PapierAbfall_1:royalblue1, PapierAbfall_.*:royalblue1, Restmuell_0:lightslategray, Restmuell_1:lightslategray, Restmuell_.*:lightslategray')" path="icons"
						[hidden]="myAbfall:Restmuell_tage | map('0:false, 1:false, 2:false')"
						[color]="myAbfall:Restmuell_tage | map('0:crimson, 1:darkviolet, 2:darkviolet')"></ftui-badge>

Ich weiß jetzt nicht wo der Fehler ist..

octek0815 · 06 Januar 2021, 13:59:43

Zitat von: moonsorrox am 06 Januar 2021, 13:53:09
ja den habe ich natürlich den Code...

Ich habe das bisher auch komplett anders gelöst...!

Bei mir ist der Abfall nur mit einem Icon dargestellt in einer Stauszeile sage ich jetzt mal, weil ich nicht alle Icons ständig sehen muss, dieses Icon wechselt immer mal die Farbe, sobald es 2 Tage vor Leerung ist, erscheint das badge mit einer "2" und farbig - meine Farbe ist ein violett, genauso 1 Tag vor Leerung, aber am Tag der Leerung soll es eben ein badge in Rot (crimson) und eine "0"bei mir erscheinen. Das hat bisher auch funktioniert (version 2).
Zusätzlich wenn ich auf das Icon klicke erscheint ein Popup mit allen Abfall Anzeigen die sich drehen und weiteren Hinweisen wie aha Adresse und Öffnungszeiten.
Aber auch die drehenden spin Icon haben kein badge mehr ab Leerungstag dran und das verstehe ich nicht. Ansonsten hat es ja die Tage gut funktioniert.
In der badge Angabe habe ich doch aber
Code Auswählen Erweitern
map('0:false, 1:false, 2:false')"

stehen...

siehe auch hier der gesamte badge Code
Code Auswählen Erweitern
<ftui-badge [text]="myAbfall:Restmuell_tage | map('BioabfallGruengut_0:MediumSpringGreen, BioabfallGruengut_1:MediumSpringGreen, BioabfallGruengut_.*:MediumSpringGreen, GelberSackLeichtverpackungen_0:DarkOrange, GelberSackLeichtverpackungen_1:DarkOrange, GelberSackLeichtverpackungen_.*:DarkOrange, PapierAbfall_0:royalblue1, PapierAbfall_1:royalblue1, PapierAbfall_.*:royalblue1, Restmuell_0:lightslategray, Restmuell_1:lightslategray, Restmuell_.*:lightslategray')" path="icons" [hidden]="myAbfall:Restmuell_tage | map('0:false, 1:false, 2:false')" [color]="myAbfall:Restmuell_tage | map('0:crimson, 1:darkviolet, 2:darkviolet')"></ftui-badge>

Ich weiß jetzt nicht wo der Fehler ist..

Warum hast Du beim ftui-badge [text] mapping Farben oder Text-Mappings ?
Text ist doch das was im Badge angezeigt werden soll, also z.B. eine 1 oder eine 2 usw...

moonsorrox · 06 Januar 2021, 14:01:28

Zitat von: octek0815 am 06 Januar 2021, 13:59:43
Warum hast Du beim ftui-badge [text] mapping Farben oder Text-Mappings ?
Text ist doch das was im Badge angezeigt werden soll, also z.B. eine 1 oder eine 2 usw...

damit wird das badge eingefärbt... die Zahl wird auch angezeigt

octek0815 · 06 Januar 2021, 14:04:52

Zitat von: moonsorrox am 06 Januar 2021, 14:01:28
damit wird das badge eingefärbt... die Zahl wird auch angezeigt

[text]= ist aber nicht fürs einfärben, sondern [color]= oder color=

Würde ja gerne helfen, verstehe es aber nicht.

Was ist "MediumSpringGreen" ?

Du färbst doch mit...

Code Auswählen


[color]="myAbfall:Restmuell_tage | map('0:crimson, 1:darkviolet, 2:darkviolet')"

..ein

Ein [text] mapping ist doch dafür da, das wenn z.B. der Wert eines Readings in FHEM "Hasenfurz" heißt, du aber in FTUI "Kojotenkacke" angezeigt haben möchtest, oder habe ich das Prinzip falsch verstanden?

moonsorrox · 06 Januar 2021, 14:16:34

"MediumSpringGreen" ist eine von mit erstellte Farbe, die auf meinem Hintergund ein schöners grün zeigt

Zitat von: octek0815 am 06 Januar 2021, 14:04:52
Ein [text] mapping ist doch dafür da, das wenn z.B. der Wert eines Readungs in FHEM "Hasenfurz" heißt, du aber in FTUI "Kojotenkacke" angezeigt haben möchtest, oder habe ich das Prinzip falsch verstanden?

Habe ich etwa einen Fehler drin. $:-\$

Dieser Teil ist doch für das Icon:
hier ist name ind color drin und das funktioniert ja auch

Code Auswählen

<ftui-icon [(value)]="myAbfall" [name]="myAbfall:ftui_next | map('BioabfallGruengut_0:recycle, BioabfallGruengut_1:recycle, BioabfallGruengut_.*:recycle, GelberSackLeichtverpackungen_0:recycle, GelberSackLeichtverpackungen_1:recycle, GelberSackLeichtverpackungen_.*:recycle, PapierAbfall_0:recycle, PapierAbfall_1:recycle, PapierAbfall_.*:recycle, Restmuell_0:recycle, Restmuell_1:recycle, Restmuell_.*:recycle')" 
					   [color]="myAbfall:ftui_next | map('BioabfallGruengut_0:MediumSpringGreen, BioabfallGruengut_1:MediumSpringGreen, BioabfallGruengut_.*:MediumSpringGreen, GelberSackLeichtverpackungen_0:DarkOrange, GelberSackLeichtverpackungen_1:DarkOrange, GelberSackLeichtverpackungen_.*:DarkOrange, PapierAbfall_0:royalblue1, PapierAbfall_1:royalblue1, PapierAbfall_.*:royalblue1, Restmuell_0:lightslategray, Restmuell_1:lightslategray, Restmuell_.*:lightslategray')" path="icons" popup-target="popup-abfall" class="size-2">
			</ftui-icon>

im badge habe ich wohl tasächlich etwas falsch drin.... ich schaue es mir nochmal genau an.... melde mich wieder

moonsorrox · 06 Januar 2021, 15:36:03

Ich dachte ich habe es gefunden...! $:-\$ aber leider nicht... obwohl bei mir die Farben mit Doppelpunkt drin stehen und auf github und bei dir Olli habe ich gesehen es müsse Gleichheitszeichen rein...

Aber was ich absolut nicht verstehe in meinem Reading in Fhem steht bei "myAbfall:next_tage" eine "0" drin warum zeigt er mir das nicht an.
Wenn ich deinen Text eingebe den ich mal geändert habe zeigt er es mir an, in dem Fall ein "T"

Code Auswählen

[text]="myAbfall:next_tage | map('0:T')"

wenn ich das "badge" ganz einfach eingebe so wie unten ohne hidden usw. warum zeigt er nichts an.?

Code Auswählen

<ftui-badge color="danger" [text]="myAbfall:next_tage">
warum zeigt er denn keine "0" an $:-\$ im Reading steht doch eine "0" $:-\$

setstate · 06 Januar 2021, 15:40:16

0 ist nix und wird nicht als Badge angezeigt. Ist so Standard - im iOS und macOS zumindest

moonsorrox · 06 Januar 2021, 15:58:05

Ok, dann ist alles klar... ich bin schon verzweifelt

denn bei Version 2 hat er eine "0" angezeigt ich sehe es ja hier neben mir auf dem Tablet... puuh das hat mich echt jetzt 2 Stunden gekostet...

dann kann ich in dem Fall nur einen alternativen Text eingeben...!

setstate · 06 Januar 2021, 16:22:21

Aus Usability Sicht ist aber ein Ausblenden, wenn nichts da ist, besser. Der User kann damit die Info schneller erfassen.
Nichts da: alles okay. Es hängt etwas rotes dran: Ein Inhalt ist drin. Wie bei einem amerikanischen Briefkasten die roten Flagge.

moonsorrox · 06 Januar 2021, 16:34:50

Ja klar vom Grunde her hast du da absolut Recht.... ich komme aus der Industrie da ist das so, deshalb finde ich auch viele zeigen einen EIN Zustand mit grün an, in der Industrie ist das zum Teil nicht so, wenn etwas EIN ist da ist es Rot

Nicht immer aber oft. Grün signalisiert, wenn ein fehlerfreien Lauf...

Aber OK ich weiß jetzt bescheid, dann kann habe ich mit meine Anzeigen der Badge nichts falsch gemacht, außer das ich Doppelpunkte hatte, aber es hat auch funktioniert...

Wenn bei mir auf dem Tablet in der Anzeige etwas ROT ist weiß ich das es An oder EIN ist

yersinia · 06 Januar 2021, 16:36:08

Wird es eigentlich sowas wie eine swiper Funktion wieder geben?
Oder gibt es diese schon?

setstate · 06 Januar 2021, 16:41:49

Zitat von: yersinia am 06 Januar 2021, 16:36:08
Wird es eigentlich sowas wie eine swiper Funktion wieder geben?
Oder gibt es diese schon?

Ja, ich hoffe ich finde eine gute Lösung ohne extra Lib. Wenn jemand etwas schönes kennt (Examples, Demos, etc.), dann her damit.

moonsorrox · 06 Januar 2021, 16:45:26

Da wir schon beim fragen sind, ich hatte ein den badge vorher immer wenn es ein Kalender Termin war auch als badge ein kleinen Kalender dran, geht das jetzt nicht mehr..?

octek0815 · 06 Januar 2021, 16:48:26

Zitat von: moonsorrox am 06 Januar 2021, 15:36:03
Ich dachte ich habe es gefunden...! $:-\$ aber leider nicht... obwohl bei mir die Farben mit Doppelpunkt drin stehen und auf github und bei dir Olli habe ich gesehen es müsse Gleichheitszeichen rein...

Aber was ich absolut nicht verstehe in meinem Reading in Fhem steht bei "myAbfall:next_tage" eine "0" drin warum zeigt er mir das nicht an.
Wenn ich deinen Text eingebe den ich mal geändert habe zeigt er es mir an, in dem Fall ein "T"
Code Auswählen Erweitern
[text]="myAbfall:next_tage | map('0:T')"

wenn ich das "badge" ganz einfach eingebe so wie unten ohne hidden usw. warum zeigt er nichts an.?
Code Auswählen Erweitern
<ftui-badge color="danger" [text]="myAbfall:next_tage">
warum zeigt er denn keine "0" an $:-\$ im Reading steht doch eine "0" $:-\$

Jetzt verstehe ich erst was du meintest. Sorry für die lange Leitung.
Deshalb habe ich die Null in ein Ausrufezeichen umgemappt.

Code Auswählen


[text]="System_Abfall:urSchwarz | map('0:!')"

Grüße
Olli