Hallo Zusammen,
ich wollte jetzt anfangen mir eine UI auf Basis von FTUI zusammen zu bauen. Dabei habe ich festgestellt, dass setstate seit einigen Monaten an einer neuen Version (3) arbeitet (https://github.com/knowthelist/ftui). Im Repository stehen folgende Hinweise:
* This version is not compatible with older fhem-tablet-ui versions.
* This version is under construction.
Über die Suche bin ich nicht schlau geworden, daher möchte ich hier meine Fragen loswerden:
Wie stabil ist die neue Version? Kann ich diese schon (vielleicht mit kleineren Einschränkungen) verwenden?
Grüße,
Bunnu
Weiterentwickeln werde ich nur noch Version 3. Aber, wie du festgestellt hast, gibt es noch kaum (keine) Doku. Man kann sich das bis jetzt nur aus den Examples oder dem Code selbst rauslesen, was geht. Für Version zwei gibt es ein super Wiki, viele Beispiele und Experten hier im Forum.
Ich fange jetzt auch erst beim ersten Gerät an, auf die neue Version umzustellen. Dabei werde ich bestimmt auch noch feststellen, dass noch einiges fehlt oder noch nicht so optimal läuft.
Ich hatte mir das heute Vormittag angeschaut und bei meinem ersten Versuch gleich in etwas gelaufen, was noch nicht funktioniert: Punkte in Device-Namen (z.B. WC.Fenster). Wenn ich das auf die Schnelle richtig sehe, hat das etwas mit der Art und Weise zu tun, wie die Readings in der Config abgelegt werden. Das Reading enthalt noch den Punkt aus dem Device-Name, was vermutlich beim Parsen / Auslesen der config stört. (Z 118/119 in ftui.binding.js)
Die Art und Weise des Binding Parsen habe ich nochmal überarbeitet. Jetzt funktionieren auch Punkte '.' im Devicename und Reading
<body>
<ftui-grid base-width="120" base-height="120">
<ftui-grid-tile row="1" col="2" height="1" width="1" shape="round">
<header>TEXT</header>
<ftui-label [text]="dummy.P1:read.1"></ftui-label>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="3" height="1" width="2" shape="round">
<header>SLIDER</header>
<ftui-slider [value]="dummy.P1:read.1" (value)="setreading dummy.P1:read.1"></ftui-slider>
</ftui-grid-tile>
</ftui-grid>
</body>
Super vielen Dank. Konnte es bei mir auch erfolgreich testen. :)
Generelle Frage: Wo soll ich Fehler melden, wenn mir welche auffallen
* Als Issue bei Github ? (meine Präferenz)
* In diesem Thread ?
* Als eigener Thread ?
Grüße,
Bunnu
Wie du möchtest: GitHub issue, PR oder hier im Forum.
Hallo,
ich spiele gerade mit der neuen Version rum, sieht wirklich sehr gut aus und scheint auch recht flott zu sein.
Was mir aufgefallen ist, in der index.html sind wohl ein paar Tags zu viel, wenn ich das richtig sehe:
<ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
<div class="column">
<ftui-tab view="View1" active><ftui-icon name="home1"></ftui-icon></ftui-tab>
<ftui-tab view="View2"><ftui-icon name="music"></ftui-icon></ftui-tab>
<ftui-tab view="View3"><ftui-icon name="feed"></ftui-icon></ftui-tab></ftui-tab> <-------------------Hier z.b.
<ftui-tab view="View4"><ftui-icon name="lightbulb"></ftui-icon></ftui-tab></ftui-tab>
<ftui-tab view="View5"><ftui-icon name="bath"></ftui-icon></ftui-tab></ftui-tab>
<ftui-tab view="View6"><ftui-icon name="bath"></ftui-icon></ftui-tab></ftui-tab>
</div>
</ftui-grid-tile>
Dann versuche ich mich gerade an einem Müllkalender, wobei ich beim Versuch einen Badge anzulegen...
<ftui-badge color="danger" [text]="Tonnen:MuellKalender_Altpapier_days"></ftui-badge>
...eine Fehlermeldung erhalte:
label.component.js 41
Type Error: Cannot set Property
'Inner Text' of null
Mache ich was falsch oder ist es ein Bug?
Diese Fehlermeldung bekommt man allerdings auch, wenn man das Beispiel im Github ausprobiert.
Und gleich noch zwei Fragen, mir ist der Unterschied zwischen den eckigen und den runden Klammern bei z.B. 'value' nicht ganz klar.
Ist die eckige Klammer eine Ausgabe und die Runde eine Eingabe?
Und, lässt sich der 'Knob' "feststellen", also daß man den Wert beispielsweise bei einer Temperaturanzeige nicht verändern kann?
Soviel soweit, danke für Deine Arbeit!
gm
ja, da sind einige Tags zu viel. Zum Glück sind da die Browser tolerant. Das korrigiere ich.
Den Badge Bug habe ich korrigiert. Danke für den Hinweis.
Zum Thema Klammern bei Attributen:
Die Klammern bedeuten, dass diese Attribute eine direkte Bindung zu FHEM Readings haben.
eckige Klammer [value]="..." ist die Kurzform für bind:value="..." und bedeutet Input oder Get
Man kann damit den Wert eines FHEM-Readings auf das Attribute binden.
Wenn man zum Beispiel das Label Attribute "text" folgendermaßen an ein Reading bindet ...
<ftui-label [text]="AgroWeather:state"></ftui-label>
... sieht man dann nachher, wenn man die Seite startet, in der Webconsole folgendes Bild im DOM
<ftui-label [text]="Weather:state" text="Tmin: 1 Tmax: 9 T: 5.9 H: 80.9 W: 10.8 P: 1025.4"></ftui-label>
Jede Änderung im Reading wird in das Attribute "text" geschrieben. Beim ftui-label sieht man text direkt als Text auf der Seite.
Man kann auch text ohne Binding fix definieren, um dann z.B. color per FHEM-Reading verändern lassen.
<ftui-label text="Warnungen" [color]="Weather:color""></ftui-label>
Für color sind einige feste Werte definiert, damit die Seite einheitlich wirken kann und nicht zu bunt wird. Die RBG Werte für diese Farben sind im benutzen Theme definiert
/* "primary", "secondary", "success", "warning", "danger", "light", "medium", "dark" */
Runde Klammer (value)="..." ist die Kurzform für on:value="..." bedeutet Output oder Set
Also jede Änderung des Attributes value wird an FHEM geschickt, um das gebundene Reading zu verändern.
<ftui-slider (value)="dummy1" ></ftui-slider>
Beim Slider will man eine Bindung ja in beide Richtungen haben, deshalb schreibt man
<ftui-slider [value]="dummy1" (value)="dummy1"></ftui-slider>
Ein Binding für Input und Output für das selbe Reading kann man auch per [(value)]="..." bzw. bindon:value zusammenfassen.
<ftui-slider [(value)]="dummy1"></ftui-slider>
Man kann jedes Binding auch durch eine Pipe von Funktionen schieben.
<ftui-icon [name]="dummy1 | map('on: window-open, off: window-closed')" [color]="dummy1 | map('on: danger, off: medium')">
Bis jetzt gibt es folgende Pipe-Funktionen:
part(value)
toDate(value)
toBool()
toInt()
format(value)
round(value)
add(value)
multiply(value)
replace(find, replace)
map(value)
<ftui-label [text]="AgroWeather:state | part(4) | toInt() | multiply(2) | round(1) "></ftui-label>
Thema Knob:
Feststellen geht per readonly Attribute
<ftui-knob [value]="THSensorWZ:temperature" width="120" offset-y="10"
type="handle" min="19" max="25" unit="°C" readonly has-value-text></ftui-knob>
man könnte auch noch die Farbe per color Attribute verändern
[color]="THSensorWZ:temperature | map('0: success, 10: warning, 30: danger')"
Zitat von: setstate am 11 November 2020, 22:04:31
Bis jetzt gibt es folgende Pipe-Funktionen:
part(value)
toDate(value)
toBool()
toInt()
format(value)
round(value)
add(value)
multiply(value)
replace(find, replace)
map(value)
<ftui-label [text]="AgroWeather:state | part(4) | toInt() | multiply(2) | round(1) "></ftui-label>
Auch wenn ich schon viel Zeit im Code von v3 verbracht habe, dass war mir bisher auch noch nicht klar. :)
Gut, dass jemand gefragt hat. ;D
Danke sehr für Deine Ausführung und die Behebung der Bugs, setstate!
Zitatman könnte auch noch die Farbe per color Attribute verändern
Das hatte ich bereits eingebaut. :)
Noch zu den Farben, wenn ich das richtig verstehe kann man nur die im Theme hinterlegten Farben nutzen und nicht durch die Angabe von z.B. '#123456' eigene Farben verwenden?
Hintergrund der Frage sind die Farben der "Mülltonnen", die mit den Theme Farben nicht alle abgebildet werden könnten.
Achso und nochwas, gibt es eine Möglichkeit Templates zu nutzen?
Mir ist gerade noch etwas auf einem Android 8 Smartfon aufgefallen, dort habe ich Ftui 3 in einem Fully Browser (mit Brave* ist das Verhalten gleich) laufen.
Eine Checkbox:
<ftui-grid-tile row="3" col="7" height="2" width="2" shape="round">
<header>Licht Wohnzimmer</header>
<div class="cell">
<ftui-icon [name]="wz.alle | map('on:lightbulb-on-outline, off:lightbulb-outline')" [value]="wz.alle"></ftui-icon>
<ftui-checkbox [(value)]="wz.alle" texts="on,off" class="small"></ftui-checkbox>
</div>
</ftui-grid-tile>Schalte ich auf 'on' werden die Lampen nicht geschaltet, schalte ich auf 'off' gibt es eine Fehlermeldung:
ftu.binding,js:84
TypeError.String(...) replaceAll is not a functionAuf einem iPhone und einem Mac funktioniert's wie gewünscht.
Und gleich noch eine Frage, wenn ich schonmal dabei bin(;), lässt sich auch ein Icon als Button nutzen, das will mir nämlich nicht gelingen?
* Da gibt es noch eine weitere Fehlermeldung:
chart.min.js:6
Error: 1605135600000 and
1605222000000 are too far apart with
stepSize of 1 millisecond
Wenn man in die color-attributes CSS schaut, sieht man dass hier je nach gesetztem color Wert im HMTL ein paar CSS Variablen belegt werden.
Zum Beispiel so:
[color="primary"] {
--color-base: var(--primary-color);
--color-contrast: var(--primary-contrast-color);
--color-shade: var(--seagreen);
}
In den Komponenten wird dann die Variable im CSS File verwendet um die aktive Farbe zu setzen:
color: var(--color-base);
Du kannst ja wie früher wieder User CSS Files in deiner Index.html einbinden und dort eigene Farben nach dem obigen Schema anlegen
[color="biotonne-on"] {
--color-base: #8B4513
--color-contrast: var(--white);
--color-shade: var(--seagreen);
}
[color="biotonne-off"] {
--color-base: #000000
--color-contrast: var(--white);
--color-shade: var(--seagreen);
}
Der CSS Code bedeuted ja nichts anderes, als dass der CSS Block für jedes Element greift, welches ein color Attribute hat, welche einen bestimmten Wert hat.
Zitat von: grossmaggul am 12 November 2020, 13:50:56
Und gleich noch eine Frage, wenn ich schonmal dabei bin(;), lässt sich auch ein Icon als Button nutzen, das will mir nämlich nicht gelingen?
* Da gibt es noch eine weitere Fehlermeldung:
chart.min.js:6
Error: 1605135600000 and
1605222000000 are too far apart with
stepSize of 1 millisecond
Wie sieht denn dein Code dazu aus?
Der Fehler sieht aus als ob du ein Chart erstellen willst und kein Icon. :o
Zitat von: grossmaggul am 12 November 2020, 13:50:56
lässt sich auch ein Icon als Button nutzen, das will mir nämlich nicht gelingen?
Ich denke andersrum wird ein Schuh draus: Man kann ein Button mit Icon nutzen (und ohne Text).
So z.B:
<ftui-button color="transparent">
<ftui-icon name="lightbulb" [name]="MyDevice:MyReading | map('on:primary, off:danger')"></ftui-icon>
</ftui-button>
ZitatDu kannst ja wie früher wieder User CSS Files in deiner Index.html einbinden und dort eigene Farben nach dem obigen Schema anlegen
Ja, das war mir klar, allerdings konnte man in der 2er Version von Ftui einfach einen RGB Farbwert angeben, das erscheint mir dann doch einfacher, als für jede Farbe die man vielleicht einmal braucht im User-CSS eine dafür anzulegen. Z.B. würde ich die Biotonne gerne Braun darstellen, die Farbe werde ich aber wohl sonst nirgendwo brauchen.
ZitatWie sieht denn dein Code dazu aus?
Der Code ist der aus der Beispiel index.html für das Humidity Chart. Die Fehlermeldung bezog sich auch nicht auf den Button, deshalb habe ich sie unten drunter geschrieben.
ZitatIch denke andersrum wird ein Schuh draus:
Örks, ja so kann man das natürlich auch machen. ;D
Zitat von: grossmaggul am 12 November 2020, 13:50:56
Und gleich noch eine Frage, wenn ich schonmal dabei bin(;), lässt sich auch ein Icon als Button nutzen, das will mir nämlich nicht gelingen?
Schau mal in den examples/button.html, da gibt es sowas
<ftui-button shape="circle"
[(value)]="ftuitest"
[fill]="ftuitest | map('off: outline, on: solid')">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
https://knowthelist.github.io/ftui/examples/button.html
Die replaceAll() Funktion ist bei Chrome ab Version 85 dabei. Ist aber nicht so wichtig. Ich kann das auch mit replace() + Regular expression ersetzen. Update folgt gleich.
Zitat von: grossmaggul am 12 November 2020, 16:05:42
Ja, das war mir klar, allerdings konnte man in der 2er Version von Ftui einfach einen RGB Farbwert angeben, das erscheint mir dann doch einfacher, als für jede Farbe die man vielleicht einmal braucht im User-CSS eine dafür anzulegen. Z.B. würde ich die Biotonne gerne Braun darstellen, die Farbe werde ich aber wohl sonst nirgendwo brauchen.
Ich versuche in dieser Version den Farbenwildwuchs so gut wie möglich einzudämmen. Noch ein paar Grundfarben in das CSS aufzunehmen, werde ich vermutlich noch machen. Ich erwische mich selber oft, einfach rot / grün nehmen zu wollen. Also braun, blau usw.
Diese Werte gibt es aktuell (gleiche Spalte = gleiche Farbe)
/* "primary", "secondary", "success", "warning", "danger", "light", "medium", "dark" */
/* "primary", "secondary", "ok", "error", "white", "medium", "dark" */
/* "green", "yellow", "red", "light", "medium", "dark" */Für Komponenten, wo der RGB-Wet wirklich gebraucht wird, z.B. aktuelle Farbe der HUE-Lampen anzeigen, wird es auch ein rgb-Attribute geben.
FTUI-Icon hat das schon
<ftui-icon [name]="dummy1 | map('on:lightbulb-on-outline, off:lightbulb-outline')" [rgb]="HUEDevice6:rgb">
</ftui-icon>
https://knowthelist.github.io/ftui/examples/icon.html
ZitatSchau mal in den examples/button.html, da gibt es sowas
Oh, manchmal sieht man einfach den Button vor lauter CSS nicht. ;)
ZitatIch versuche in dieser Version den Farbenwildwuchs so gut wie möglich einzudämmen.
O.K., sehe ich ein, ist ja auch eigentlich besser so, was aber irgendwie fehlt ist richtiges Schwarz.
ZitatFür Komponenten, wo der RGB-Wet wirklich gebraucht wird, z.B. aktuelle Farbe der HUE-Lampen anzeigen, wird es auch ein rgb-Attribute geben.
Das wiederum habe ich schon gefunden und auch bei meinen HUEs erfolgreich eingesetzt.
ZitatUpdate folgt gleich.
Super!
Die Frage nach den Templates ist vermutlich untergegangen.
Content aus einem File holen habe ich schon fertig. Ist nur noch nicht hochgeladen. Ich überlege noch, ob man Platzhaltervariablen braucht und wie ich das umsetze.
Außerdem ist User Thyraz gerade dabei Panel-Componenten zu bauen. Das sind dann auch wiederverwendbare Sachen, die aus mehreren Einzelkomponenten bestehen. Damit hat man dann mit wenigen Zeilen umfangreiche Seiten schnell fertig. Panel-Blind oder Panel-Slider zum Beispiel.
Das könnte man zu einem schönen Panel Baukasten ausbauen.
https://thyraz.github.io/ftui/examples/page.html
Hört sich gut an, ich bin gespannt. :)
Jetzt habe ich aber doch noch ein Problem.
Dieses Konstrukt soll bei verschiedenen Temperaturen unterschiedliche Farben anzeigen, das hat auch schon mal funktioniert, jetzt nicht mehr:
<div class="cell small">
<ftui-knob [value]="proplanta:temperature" [color]="proplanta:temperature | map('0: success, 10: warning, 30: danger')" width="120" height="100" offset-y="15" type="arc" min="-30" max="40" unit="°C" readonly has-value-text></ftui-knob>
</div>
Was mache ich da falsch?
Leider ist an dem Code nix falsch. Das funktioniert so.
Ich habe auch extra eine frischen Installation von Github gezogen und auf einer leeren Seite probiert.
<!DOCTYPE html>
<html>
<head>
<meta name='debug' content='2'>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<script src="ftui.js" defer></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<ftui-grid>
<ftui-grid-tile row="1" col="1" height="1" width="1">
<header>OUT-TEMP</header>
<div class="cell small">
<ftui-knob [value]="AgroWeather:temperature"
[color]="AgroWeather:temperature | map('0: success, 10: warning, 30: danger')"
width="120"
height="100"
offset-y="15"
type="arc"
min="-30"
max="40"
unit="°C"
readonly
has-value-text>
</ftui-knob>
</div>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>
Da muss was anderes innerhalb der Seite zum Fehler führen.
Ich habe ünbrigens noch eine paar Standardfarben hinzugefügt
<ftui-grid-tile row="1" col="10" height="2" width="4">
<header>COLOR</header>
<div class="row">
<ftui-icon name="trash" color="brown"></ftui-icon>
<ftui-icon name="trash" color="yellow"></ftui-icon>
<ftui-icon name="trash" color="blue"></ftui-icon>
<ftui-icon name="trash" color="black"></ftui-icon>
<ftui-icon name="trash" color="gray"></ftui-icon>
</div>
</ftui-grid-tile>
Ich teste auch ein wenig und wollte nur eine mgl Definition des charts bei Verwendung von DBLog zeigen, die bei mir funktioniert:
<ftui-chart class="row" width="150px" height="75px">
<ftui-chart-data fill log="DBLogDEVICE" file="history" spec="DEVICE:READING" [update]="DEVICE:state:time"></ftui-chart-data>
</ftui-chart>
Falls das nicht gewünscht ist, einfach löschen und danke für deine Arbeit, setstate (man kann sich ja gut durch die widgets lesen :) )
Da ich auch DbLog nutze sind hier auch noch ein paar Beispiele im Quellcode der Seite zu finden:
https://thyraz.github.io/ftui/examples/page.html
Hallo Setstate,
Content aus einem File laden, also ein aufsplitten der index.html wäre mir sehr wichtig, da ich sonst den Überblick verliere. Würde vorschlagen das ein Demo Tread angelegt wird wo jeder seine bisherigen Teile rein packt wie bei FTUI2.
Oder gleich ins wiki?!
Gruß
Eisix
Die aktuelle ,,offizielle" Version ist ja immer noch die 2er.
Wer hier mitmacht muss recht schmerzfrei sein was fehlende Features oder Fehler angeht.
Somit würde ich mit mehreren Threads oder gar Wiki noch warten.
Hallo Thyraz,
Hab schon seit ein paar Wochen eine Seite damit laufen zum Test. Wetter, Abfall, Anrufliste und Videostreams habe ich am laufen. Die Einbindung des Kleinklima Iconsets habe ich setstate schon mal geschickt.
Gruß
Eisix
Zitat von: Eisix am 15 November 2020, 16:08:42
Die Einbindung des Kleinklima Iconsets habe ich setstate schon mal geschickt.
Oh, das ist untergegangen. Gut, dass du mich erinnerst.
ZitatLeider ist an dem Code nix falsch. Das funktioniert so.
Ich habe auch extra eine frischen Installation von Github gezogen und auf einer leeren Seite probiert.
Habe ich auch gemacht und bei mir funktioniert es leider nicht, keine Ahnung was das Problem bei mir ist.:-/Geht doch, wenn ich die runden Klammern hinzufüge, aber laut Deinem Beispiel sollte das ja auch ohne gehen.
<ftui-knob [(value)]="proplanta:temperature" [color]="proplanta:temperature | map('-30:blue,0:green,15:warning,30:danger')" width="120" height="100" offset-y="15" type="arc" min="-30" max="40" unit="°C" readonly has-value-text></ftui-knob>ZitatIch habe ünbrigens noch eine paar Standardfarben hinzugefügt
Super!
Ich hoffe ich nerve nicht zu sehr. ::)
Kann man Icons auch spinnen oder blinken lassen abhängig von bestimmten Werten?
Als z.B. die rotierenden Mülltonnen ab einem bestimmten Tag vor dem Abholtag.
Und lässt sich Text in einem Label ausrichten? Ich habe es mit align-center/left/right versucht, das klappt aber nicht.
Animationen gehen per class:
spin,
hop,
blinkMan kann für class auch ein Binding per [class-name]="Device:Reading" realisieren.
<ftui-icon name="trash" color="brown" class="spin"></ftui-icon>
<ftui-icon name="trash" color="yellow" class="hop"></ftui-icon>
<ftui-icon name="trash" color="blue" [class-name]="dummy2 | map('1:hop,2:')"></ftui-icon>
Siehe Beispiel: https://knowthelist.github.io/ftui/examples/icon.html
Thyraz hat schöne Multichlor-Icons gebaut, die man auch animieren kann:
https://thyraz.github.io/ftui/examples/icon-multicolor.html
ZitatContent aus einem File laden, also ein aufsplitten der index.html wäre mir sehr wichtig, da ich sonst den Überblick verliere.
Es gibt jetzt auch
ftui-content<ftui-content file="examples/contents/content-view1.html" room="Room1"></ftui-content>Im Template-File kann man auch Platzhalter mit doppelter geschweifter Klammer verbauen, die im
ftui-content als beliebiges Attribute
angegeben werden können.
<ftui-title>{{room}}</ftui-title>
Zitat von: grossmaggul am 16 November 2020, 20:45:02
Ich hoffe ich nerve nicht zu sehr. ::)
Quatsch, ist doch gut, dass der Code mal von ein paar Leuten getestet wird abseits der Example Seiten.
So fällt am Ehesten auf, wo noch was hakt.
Zitat von: setstate am 17 November 2020, 02:42:23
Thyraz hat schöne Multichlor-Icons gebaut, die man auch animieren kann:
https://thyraz.github.io/ftui/examples/icon-multicolor.html
Bin gerade noch zu sehr mit dem Programmieren von weiteren Komponenten beschäftigt,
aber der Plan is hier noch eine Haufen passender Icons zu erstellen.
Außerdem ein Template + kleine Anleitung, damit andere User auch dazu beitragen können.
Da mit Figma mittlerweile ein super Multiplattform UI-Designtool kostenlos nutzbar ist, wird das Tutorial wahrscheinlich dafür sein.
Zitat von: setstate am 17 November 2020, 02:42:23
Es gibt jetzt auch ftui-content
Super, danke auch von mir. :)
Hallo
Wirklich cool, was da wieder auf die Beine gestellt wird - ein grosses DANKESCHOEN an dieser Stelle.
Frage: Wie updated ihr euer lokales FTUI Verzeichnis (opt/fhem/www/ftui)? In der Version 2 gab es die Möglichkeit diese mittels der controls_fhemtabletui.txt Datei in den Update-Prozess von FHEM aufzunehmen... Macht ihr das auf Kommandozeilen-Ebene mit den GIT Befehlen oder zieht ihr jeweils das Zip herunter?
Danke und viele Grüsse Eppi
Ich würde zu gegebener Zeit wieder ein Update File anbieten. Oder gibt es mittlerweile etwas besseres?
Je mehr ich mit der 3er Version rumspiele desto mehr merke ich was Ihr, setstate und Thyraz, da Geniales gebastelt habt. :)
Und vor allen Dingen bin ich von der Geschwindigkeit begeistert.
Cool finde ich die Möglichkeiten mit den maps, z.B der nächste Geburtstag wird am Tag vorher gelb, am Geburtstag rot und blinkt.
Eine Anmerkung noch, mir fehlt bei den Fontgrößen zwischen "big" und "normal" noch eine Größe mit 125%, hin und wieder kommt es vor, daß "big" zu groß und "normal" zu klein ist.
Ich habe das mal in der css ergänzt und bei den Terminen eingestellt, da die 150% zu groß und die 100% für meine sehschwachen Augen zu klein waren.
Ich hänge mal mein bisheriges Machwerk dran(ist allerdings erst eine Seite fertig):
Hallo,
bin am testen von einfachen Sachen (Abfallkalender) und melde einfach was mir aufgefallen ist oder was ich mit meinem Verständnis nicht lösen konnte.
Hier greift die class big und das Icon wird größer dargestellt
<ftui-icon class="big"
[name]="WLAN_GUEST | map('`.*`:wifi1')"
[color]="WLAN_GUEST | map('`.*`: blue')">
</ftui-icon>
Hier wird es kurz groß dargestellt springt dann aber wieder auf die kleine Variante zurück
<div class="row">
<div class="cell">
<ftui-icon name="trash-o" color="brown" [class-name]="Abfall:AbfallCalendar_BiomuellAbholungfuerdays | map('1:hop,2:')"></ftui-icon>
<ftui-badge color="danger" [text]="Abfall:AbfallCalendar_BiomuellAbholungfuerdays"></ftui-badge>
</div>
Gibt es eine Möglichkeit das badge weiter rechts oben darzustellen, da es mir in der Standardeinstellung zuviel vom Icon verdeckt?
Gruß
Eisix
Zitat von: Eisix am 18 November 2020, 14:12:14
Hier wird es kurz groß dargestellt springt dann aber wieder auf die kleine Variante zurück
weil [class-name] alles überschreibt. Wenn class="big" vorher drinsteht, ist es damit dann mit dem neuen Inhalt gefüllt.
Ich werde ein animation Attribute für das Icon anbieten müssen, dann muss man nicht class dafür "verschwenden"
@setstate
Ich verfolge die Entwicklung von FTUI 3 schon seit Anfang des Jahres und muss sagen, dass es mir immer besser gefällt - langsam ja zum Glück auch immer mehr FTUI-Freunden.
Zwischenzeitig hatte ich in "meinem" Stand eine ago bzw. till-Funktion integriert, die mir die Zeit seit bzw. bis zu einem Ereignis aufbereitete.
Damals hieß es noch:
text-filter="toDate(), ago('[ dd T + hh:mm:ss ]')"
Heute sollte/muss es vermutlilch eher heissen:
[text]="ftuitest:onoff:time | toDate() | ago | format('[ dd T + hh:mm:ss ]')"
[text]="ftuitest:dateTime | toDate() | till | format('[ dd T + hh:mm:ss ]')"
dd, hh, mm und ss stehen für Tage, Stunden, Minuten bzw. Sekunden; [, T, + und : sind beliebig wählbare Freitexte.
Können diese beiden Funktionen als allgemeine "Pipes" bereitgestellt werden ?
Abschließend noch eine Anmerkung zur Update-Bereitstellung: Unter Umständen wäre es besser, die neue FTUI-Version nicht als www/ftui, sondern als www/ftui3 bereitzustellen. In meinen Augen grenzt das "alt" und "neu" besser ab - gilt vermutlich auch fürs Wiki. Ist aber natürlich nur eine persönliche Einschätzung und kann im Ernstfall auch ohne Nebenwirkungen einfach ignoriert werden.
Neue Pipe Funktionen kann ich gerne hinzufügen.
Beim Ordnernamen würde ich nur ungern eine Versionsnummer mitgeben. Selten nutzt man zwei Versionen ewig parallel. Das ist immer nur in der Übergangszeit so. Zumal jetzt nach www/tablet deployed wird und ich die Version 3 nach www/ftui updaten lassen will. User, die das jetzt schon für die Version 2 benutzen und Version 3 ausprobieren wollen, müssten die v2 in www/ftui2 oder www/ftui _old umbenennen.
Fürs Wiki habe ich noch keine Idee. Dort sollte eine Unterscheidung langfristig gegeben bleiben.
Aber mal abwarten, ob die neue Version überhaupt Nutzer findet. :o
Offiziell habe ich ja noch nix vorgestellt. Ist immer noch alles in der Betaphase, obwohl die Version 3 schon viel weiter fortgeschritten ist, als die Version 1 damals, als ich sie präsentiert hatte.
ZitatAber mal abwarten, ob die neue Version überhaupt Nutzer findet. :o
Offiziell habe ich ja noch nix vorgestellt. Ist immer noch alles in der Betaphase, obwohl die Version 3 schon viel weiter fortgeschritten ist, als die Version 1 damals, als ich sie präsentiert hatte.
Also ich nutze momentan 3 verschiedene Versionen
Die 2.7.1 für Android und IOS da geht die Verbindung nicht so oft verloren
Die 2.7.15 für Tablets
Die 3 wird die neue für alles, aus der Nummer kommst du nicht mehr raus jetzt ;)
Gruß
Eisix
Hallo setstate,
<ftui-image
src="images/Minion-Kungfu-icon.png"
width="45" height="45"
[color]="rr_Test:state | map('absent:faded, gone:faded, home:solid, gotosleep:solid ')"
></ftui-image>
Je nach Residence Status soll das image normal zu sehen sein oder grau sein.
Color ist da wahrscheinlich nicht der richtige Parameter, muss wahrscheinlich ein neuer her.
Gruß
Eisix
und noch einer!
Wie kriege ich Datum und Uhrzeit ganz unten hin.
<ftui-grid-tile row="1" col="1" height="15" width="1">
<div class="column">
<ftui-tab view="View1" active><ftui-icon name="home1"></ftui-icon></ftui-tab>
<ftui-tab view="View2"><ftui-icon name="video-camera"></ftui-icon></ftui-tab>
<ftui-tab view="View3"><ftui-icon name="sunny-rain-mix"></ftui-icon></ftui-tab>
<div class="footer">
<ftui-clock format="eeee" class="small text-center"></ftui-clock>
<ftui-clock format="DD.MM.YYYY" class="small text-center"></ftui-clock>
<ftui-clock format="hh:mm" class="text-center"></ftui-clock>
</div>
</div>
</ftui-grid-tile>
Gruß
Eisix
Zitat von: Eisix am 19 November 2020, 13:11:04
src="images/Minion-Kungfu-icon.png"
Je nach Residence Status soll das image normal zu sehen sein oder grau sein.
Color ist da wahrscheinlich nicht der richtige Parameter, muss wahrscheinlich ein neuer her.
Pixelgrafiken kannst du ja nicht einfach so umfärben.
Ist das mit Transparenz und du willst alle sichtbaren Pixel in Grau fräben? Oder das Bild in Graustufen wandeln?
Für Graustufen gäbe es die CSS Eigenschaft filter:
.myImage {
filter: grayscale(1);
}
Dann könntest du das wahrscheinlich per Class mit Map zuweisen.
Ich habe ein Problem mit dem neuen "content", das will nicht so, wie ich will, möglicherweise habe ich aber auch die Funktionsweise nicht verstanden.
Mal ein paar Codeschnipsel
In der index.html:
<ftui-tab-view id="View3">
<ftui-content file="templates/licht_template.html"></ftui-content>
</ftui-tab-view>
Und die einzufügende Seite:
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-colorpicker [hex]="wz.stehlampe_1:rgb" (hex)="replace('#','') | wz.stehlampe_1:rgb"></ftui-colorpicker>
</ftui-grid-tile>
Wenn ich den Menüpunkt aufrufe, hängt der "Tab" oben links in der Ecke über dem Menü.
Was stimmt da nicht, bzw. habe ich vergessen?
Oh, ftui-grid-tile nachladen habe ich noch nicht probiert.
Da könnte noch was mit der Größe nicht passen.
@Thyraz
so war der alte code
<div class="round top-narrow grow-1 inline" data-type="image" data-device="rr_Eisix" data-state-get="state" data-states='["((home)|(gotosleep))","((absent)|(gone))"]' data-classes='["","faded"]' data-width="45" data-height="45" data-url="/fhem/images/Minion-Amazed-icon.png"></div>
Denke faded hatte eine niedrige opacity. Beispiel hängt dran.
Gruß
Thorsten
Wird evtl. beides gewesen sein, da man wirklich keine Farben mehr sieht.
Zitat von: Eisix am 19 November 2020, 13:15:11
Wie kriege ich Datum und Uhrzeit ganz unten hin.
footer als class gibts glaub nicht.
Da wirst du dir ne eigene Klasse im CSS File erstellen müssen und dem DIV dann statt footer zuweisen.
Evtl. in die Richtung?
Weiß aber nicht ob irgendwas aus dem CSS vom Grid sich damit beißt.
.fixed-clock {
bottom: 10px;
position: absolute;
}
fixed-clock hat funktioniert.
Das andere nicht
<ftui-image
src="images/Minion-Kungfu-icon.png"
width="45" height="45"
[class]="rr_Test:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
src="images/Minion-Kungfu-icon.png"
width="45" height="45"
[class-map]="rr_Eisix:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
CSS
.myImage {
filter: grayscale(1);
opacity: 0.5;
}
Gruß
Eisix
myImage ist ungleich myimage
Ja, habe ich auch gemerkt. Das mapping funktioniert aber trotzdem nicht.
<ftui-image
class="myImage"
src="images/Minion-Kungfu-icon.png"
width="45" height="45"
></ftui-image>
<ftui-image
src="images/Minion-Kungfu-icon.png"
width="45" height="45"
[class-map]="rr_Eisix:state | map('absent:myImage, gone:myImage ')"
></ftui-image>
Classnamen immer klein oder kebab-case
Und es muss doch class-name und nicht class-map sein, oder?
Der Mechanismus geht doch auf "className", also die Property des Attributs "class".
Oder ist das was selbstgestricktes in FTUI was ich bisher noch nicht entdeckt habe?
Geht jetzt, merci!
CSS
.myimage {
opacity: 0.5;
}
HTML
<ftui-image
src="images/Minion-Kungfu-icon.png"
width="45" height="45"
[class-name]="rr_Eisix:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
Ja, richtig - das nutzt nur
ElementNodeReference.className
das kann man als [class-name] Attribute setzen.
camelCase Properties kann man im FTUI per kebab-case Attribute setzen.
Hab mal eine frühe Version einer Kalender Komponente die gern getestet werden darf.
Eingebunden wird das Ganze dann so:
<ftui-calendar view="listWeek" height="500px">
<ftui-calendar-data calendar="iCloud" color="primary"></ftui-calendar-data>
<ftui-calendar-data calendar="Abfall" color="brown"></ftui-calendar-data>
</ftui-calendar>
Optionen der Calendar Komponente:
- height
- view: Kann aktuell mit listWeek und listMonth belegt werden
- no-header: Versteckt die Kopfzeile (muss keinen Wert haben, also einfach <ftui-calendar no-header view="listWeek"...)
Wenn height nicht angegeben wird, ist Autosizing aktiv. Das macht aber nur Sinn, wenn der Kalender nicht in einem Container mit fixer Höhe steckt.
Wahrscheinlich kann man für die Höhe auch "90%" oder sowas angeben kommt mir gerade, hab ich aber noch nicht getestet.
Ist die Liste länger als der Anzeigebereich, ist Scrollen möglich.
Optionen der Calendar-Data Subkomponente:
- calendar: Calendar Name in Fhem
- color: Farbe mit der Einträge des Kalenders dargestellt werden sollen. Kann eine der FTUI Standardfarben wie Primary, Warning, Red, Brown usw. sein, oder ein Farbwert wie #00FF00
Schriftgrößen, Abstände, usw. im Modul sind als "em" Angaben definiert.
Es wächst und schrumpft also alles mit der aktuellen Schriftgröße.
Wenn ihr <ftui-calendar> über eine CSS-Regel also eine andere Schriftgröße zuweist, könnt ihr in der Größe anpassen.
Alternativ kann die Größe für alle Kalender auch über die User- oder Theme-CSS Dateien mit der Variable --calendar-font-size gesetzt werden.
Achtung: Das Modul grenzt den abzurufenden Zeitraum noch nicht ein, sondern holt alle Termine die der Calendar in Fhem ausspuckt. Also aktuell noch Vorsicht beim Abruf über Mobilfunk, könnte datenintensiv sein. :P
edit: Fixed...
Zum Testen braucht man von hier: https://github.com/Thyraz/ftui
- /components/calendar/
- /modules/fullcalendar/
Bisher nur manuell installierbar, wenn setstate seinen Updateprozess aktiv hat, schaue ich auch mal wie ich zusätzliche Module zum automatischen Update anbieten kann...
@Thyraz
teste gerade Blinds.
Meine Rolladen sind bei position 0 offen bei 100 zu. Bei deinem Widget ist das glaube ich genau umgekehrt definiert. Gibt es ein setting das zu invertieren?
Gruß
Eisix
Kann man das auch so nutzen?
Ich möchte das neue animierte Icon nutzen
<ftui-circlemenu direction="bottom-half">
<ftui-icon-multicolor name="blind" [value]=""Rolladen_1:position></ftui-icon-multicolor>
<ftui-button (value)="Rolladen_1" states="opens">Auf</ftui-button>
<ftui-button (value)="Rolladen_1" states="25">25</ftui-button>
<ftui-button (value)="Rolladen_1" states="50">50</ftui-button>
<ftui-button (value)="Rolladen_1" states="75">75</ftui-button>
<ftui-button (value)="Rolladen_1" states="opens">Zu</ftui-button>
</ftui-circlemenu>
In FTUI2 war der Code so:
<div data-type="circlemenu" class="narrow circlemenu noshade" data-circle-radius="80" data-direction="bottom-half">
<ul>
<li><div data-type="symbol"
data-device="Rolladen_WZ_aussen"
data-get="position"
data-states='["[0-9]","open","up","[1-3][0-9]","[4-6][0-9]","[7-9][0-9]","100"]'
data-icons='["oa-fts_window_2w","oa-fts_window_2w","oa-fts_window_2w","oa-fts_shutter_30","oa-fts_shutter_50","oa-fts_shutter_80","oa-fts_shutter_100"]'
data-colors='["lightgray","lightgray","lightgray","lightgray","lightgray","lightgray","lightgray"]'
></div></li>
<li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen opens" data-icon="oa-fts_window_2w" data-background-icon=""></div></li>
<li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen 25" data-icon="oa-fts_shutter_20" data-background-icon=""></div></li>
<li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen 50" data-icon="oa-fts_shutter_50" data-background-icon=""></div></li>
<li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen 75" data-icon="oa-fts_shutter_80" data-background-icon=""></div></li>
<li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen closes" data-icon="oa-fts_shutter_100" data-background-icon=""></div></li>
</ul>
</div>
Gruß
Eisix
Zitat von: Eisix am 19 November 2020, 16:56:32
Meine Rolladen sind bei position 0 offen bei 100 zu. Bei deinem Widget ist das glaube ich genau umgekehrt definiert. Gibt es ein setting das zu invertieren?
Geht noch nicht, schau ich mir aber an.
Zitat von: Eisix am 19 November 2020, 17:55:19
Kann man das auch so nutzen?
Ich möchte das neue animierte Icon nutzen
<ftui-circlemenu direction="bottom-half">
<ftui-icon-multicolor name="blind" [value]=""Rolladen_1:position></ftui-icon-multicolor>
<ftui-button (value)="Rolladen_1" states="opens">Auf</ftui-button>
<ftui-button (value)="Rolladen_1" states="25">25</ftui-button>
<ftui-button (value)="Rolladen_1" states="50">50</ftui-button>
<ftui-button (value)="Rolladen_1" states="75">75</ftui-button>
<ftui-button (value)="Rolladen_1" states="opens">Zu</ftui-button>
</ftui-circlemenu>
Mal kurz erklärt wie die Animationen von Icon-Multicolor funktionieren:
Innerhalb des SVG Codes gibt es Groups, welche als Namen bestimmte Transform-Beschreibungen haben (inklusive Zwischenpositionen als Keyframes)..
Diese Gruppen, welche Teile des Icons beinhalten, werden dann anhand dieser Transforms über die Animation hinweg verändert.
Zum Beispiel gedreht, verschoben, skaliert, etc...
Beim Blind Icon gibt es hier mehrere Gruppen mit jeweils einer Rollladen-Lamelle, damit die Animation so funktioniert.
Hier mal die Attribute von Icon-Multicolor mit ihren Defaultwerten:
path: 'icons/multicolor',
duration: 1.0, // in seconds
iterations: 1, // -1 for infinite
direction: 'normal', // normal, reverse, alternate, alternate-reverse
autoplay: 1, // start animation automatically when the icon changed
trigger: 0, // events with values that are mapped to '1' start the animation (best used with autoplay 0)
progress: 0 // jumps to a specific animation frame when no animation is running (best used with autoplay 0). From 0.0 to 1.0
Das Standardverhalten von Icon Multicolor ist also, bei einer Änderung des Icons dieses einmalig abzuspielen (Mit einer Animationsdauer von 1 Sekunde).
Danach verhält es sich ruhig, bis wieder ein neues Icon gesetzt wird.
Alternativ kann man auch das
trigger Attribut setzen, oder iterations auf -1 setzen für eine dauerhafte Animation z.B. bei einer Waschmaschine.
Was du erreichen willst ist allerdings eine manuelle Ansteuerung des Animationsfortschritts.
Dazu muss du erstmal das automatische Abspielen verhindern mit
autoplay="0".
Danach kannst du progress an ein Reading von Fhem binden:
[progress]="Rollo:position"Weiß gerade nicht auswendig wie herum die Animation von dem Icon war.
Ob 0 oben oder 0 unten ist.
Dies sollte aber an sich notfalls über das Attribut
direction="reverse" auch ohne invertierendes Userreading in Fhem lösbar sein.
Falls es nicht klappt, sag Bescheid, dann versuch ich das mal hier nachzustellen...
Zitat von: Eisix am 19 November 2020, 16:56:32
teste gerade Blinds.
Meine Rolladen sind bei position 0 offen bei 100 zu. Bei deinem Widget ist das glaube ich genau umgekehrt definiert. Gibt es ein setting das zu invertieren?
Mal noch eine Frage dazu:
Der Slider soll schon so bleiben, oder?
Also 0 (Slider rechts) dann eben bei dir offen statt zu?
Nur das Icon muss eben von der Anzeige invertiert sein und die up/down Buttons eben in die andere Richtung fahren (die fahren zum konfigurierten min / max Wert).
Oder überseh ich da noch was?
Thyraz, der Kalender ist extrem cool!! 8)
Und ja % Angaben funktionieren auch.
Schön wäre, wenn man noch die Headergröße anpassen könnte, ohne im CSS rumfuhrwerken zu müssen.
@Thyraz: Momentan arbeite ich an meiner Hauptansicht die nach dem öffnen angezeigt wird. Da packe ich relativ viel drauf um das meiste direkt zumindest rudimentär zu bedienen und angezeigt zu bekommen. Die Rolläden möchte ich mit circlemenue ansteuern und da Icon sollte der Multistate Blind sein, der mir den momentanen Stand anzeigen soll, so wie es in FTUI2 war. Auf einer extra View werden dann alle Rolläden mit deinen Bedienelementen angezeigt. Ich weiss aber nicht ob es Sinn macht einen Slider zu benutzen um etwas das 30 - 40 Sekunden braucht um die Position zu erreichen zu bedienen. Denke das macht mehr Sinn bei Licht oder Lautstärke.
Momentaner Stand, das Icon bleibt statisch auf offen
<ftui-circlemenu direction="bottom-half">
<ftui-icon-multicolor name="blind" min="0" max="99" autoplay="0" [progress]="Rolladen:position"></ftui-icon-multicolor>
<ftui-button (value)="Rolladen" states="opens">Auf</ftui-button>
<ftui-button (value)="Rolladen:position" states="25">25</ftui-button>
<ftui-button (value)="Rolladen" states="position 50">50</ftui-button>
<ftui-button (value)="Rolladen" states="position 75">75</ftui-button>
<ftui-button (value)="Rolladen" states="closes">Zu</ftui-button>
</ftui-circlemenu>
@setstate & @thyraz
Bei den buttons ist mir aufgefallen das nur die für Auf und Zu funktionieren. Sobald position beim set angegeben wird funktioniert es nicht. Die Toast message zeigt bei beiden getesteten Varianten (:position bei value, position bei states) das korrekte Kommando. Glaub da fehlt noch was.
Gruß
Eisix
Zitat von: Eisix am 20 November 2020, 13:58:56
@setstate & @thyraz
Bei den buttons ist mir aufgefallen das nur die für Auf und Zu funktionieren. Sobald position beim set angegeben wird funktioniert es nicht. Die Toast message zeigt bei beiden getesteten Varianten (:position bei value, position bei states) das korrekte Kommando. Glaub da fehlt noch was.
Gruß
Eisix
Die Anforderung verstehe ich noch nicht ganz. Zeig mal was du bis jetzt hast und in Worten dazu, was bei jedem Drücken gesendet werden soll.
Hallo,
das set Kommando um auf position 25 zu fahren ist
set Rolladen position 25
<ftui-button (value)="Rolladen" states="opens">Auf</ftui-button> <--- funktioniert
<ftui-button (value)="Rolladen:position" states="25">25</ftui-button> <--- funktioniert nicht
<ftui-button (value)="Rolladen" states="position 25">25</ftui-button> <--- funktioniert nicht
Bei beiden Varianten wird in der Toast message das korrekte set Kommando angezeigt aber nichts passiert
Wo gebe ich position an?
Gruß
Eisix
@setstate vergiss was ich geschrieben hab das set Kommando ist falsch, mein Fehler
set Rolladen 25
ist korrekt.
Zitat von: grossmaggul am 20 November 2020, 13:54:05
Thyraz, der Kalender ist extrem cool!! 8)
Und ja % Angaben funktionieren auch.
Schön wäre, wenn man noch die Headergröße anpassen könnte, ohne im CSS rumfuhrwerken zu müssen.
Also die Schriftgröße der Kopfzeile getrennt steuerbar?
Da kann ich die Tage auch noch eine CSS Variable anlegen, mit der man das nach eigenem Belieben in seiner User CSS anpassen kann.
Zitat von: Eisix am 20 November 2020, 13:58:56
Momentaner Stand, das Icon bleibt statisch auf offen
<ftui-circlemenu direction="bottom-half">
<ftui-icon-multicolor name="blind" min="0" max="99" autoplay="0" [progress]="Rolladen:position"></ftui-icon-multicolor>
<ftui-button (value)="Rolladen" states="opens">Auf</ftui-button>
<ftui-button (value)="Rolladen:position" states="25">25</ftui-button>
<ftui-button (value)="Rolladen" states="position 50">50</ftui-button>
<ftui-button (value)="Rolladen" states="position 75">75</ftui-button>
<ftui-button (value)="Rolladen" states="closes">Zu</ftui-button>
</ftui-circlemenu>
min / max hilft hier auf alle Fälle nichts, das gibts bei icon-multicolor nicht.
Ist aber an sich auch nicht so wild, da das Icon bei 99% genauso aus wie bei 100% ;)
Schaue mir später mal an ob das bei mir so funktioniert oder ob ich rausbekomme was da nicht stimmt.
ZitatAlso die Schriftgröße der Kopfzeile getrennt steuerbar?
Ja, genau so.
Und gleich noch ein paar Wünsche.:-)
Ich baue gerade einen Mediaplayer für meinen LMS.
Ich habe eine Fortschrittanzeige, die auch soweit funktioniert, jetzt würde ich gerne die Dauer des Songs anzeigen lassen, allerdings liegt diese nur in Sekunden vor, lässt sich das irgendwie in Minuten umrechnen. (Bei ftui2 gab's da data-substitution="toMinFromSec()")
Außerdem eine Frage zum Slider, lässt sich der dicke, runde Anfasser irgendwie verkleinern, bzw. ganz entfernen?
Ich hatte in meiner naiven Vorstellung versucht eine Medialiste der Playlist darzustellen und dazu folgendes Konstrukt versucht, das funktionierte aber natürlich nicht, ist das überhaupt möglich?
<ftui-label [text]="wz.krachnase_air:ftuiMedialist" [(value)]="wz.krachnase_air:ftuiMedialist"></ftui-label>
Hallo grossmaggul,
denke da fehlt noch ein Medialist widget.
LMS player fehlt bei mir auch noch, kannst du mir den code den du schon hast zukommen lassen?
Gruß
Eisix
Hallo Eisix,
ja das mit dem Medialistmodul ist mir inzwischen auch aufgegangen.;)
Mein Player ist noch nicht ganz fertig, sobald ich damit durch bin kann ich ihn gerne hier hochladen.
Medialist gibt es noch nicht. Kommt aber noch. Genauso ein Processbar für Player.
Aber, so schnell wie ihr konsumiert, kann man garnicht produzieren ;D
;D
Zitat von: Thyraz am 19 November 2020, 15:55:40
Hab mal eine frühe Version einer Kalender Komponente die gern getestet werden darf.
...
Hi,
bei mir wird 'No events to display' angezeigt.
HTML in ftui:
<ftui-tab-view id="View3">
<ftui-grid-tile row="1" col="3" height="5" width="9">
<header>Kalender</header>
<ftui-calendar view="listWeek">
<ftui-calendar-data calendar="Kalender_Abfall" color="primary"></ftui-calendar-data>
</ftui-calendar>
</ftui-grid-tile>
</ftui-tab-view>
Ist doch richtig, das ich da mein 'Calendar'-Device einsetze - oder?
In ftui 2.x habe ich ne Anzeige.
Andreas
Da sollten die Kalender eingesetzt werden, bei mir sieht das für verschiedene Kalender so aus:
<header>Termine/Geburtstage</header>
<ftui-calendar view="listMonth" height="90%" no-header>
<ftui-calendar-data calendar="termine" color="primary"></ftui-calendar-data>
<ftui-calendar-data calendar="birthdays" color="brown"></ftui-calendar-data>
<ftui-calendar-data calendar="motorradtreffen" color="green"></ftui-calendar-data>
<ftui-calendar-data calendar="arbeit" color="yellow"></ftui-calendar-data>
</ftui-calendar>
Ich hoffe Du verstehst was ich meine.:-)
Hallo,
ist es nur bei mir so das beim durchschalten durch die verschiedenen Views die Höhe des linken ftui-grid-tile ändert?
Auch bei der der Demo Seite.
Gruß
Eisix
Zitat von: grossmaggul am 20 November 2020, 18:30:23
Da sollten die Kalender eingesetzt werden, bei mir sieht das für verschiedene Kalender so aus:
<header>Termine/Geburtstage</header>
<ftui-calendar view="listMonth" height="90%" no-header>
<ftui-calendar-data calendar="termine" color="primary"></ftui-calendar-data>
<ftui-calendar-data calendar="birthdays" color="brown"></ftui-calendar-data>
<ftui-calendar-data calendar="motorradtreffen" color="green"></ftui-calendar-data>
<ftui-calendar-data calendar="arbeit" color="yellow"></ftui-calendar-data>
</ftui-calendar>
Ich hoffe Du verstehst was ich meine.:-)
Genauso sieht es ja bei mir auch aus, nur das Du mehrere Kalender einbindest.
'termine' ist bei Dir das Calendar-Device?
Das ist mein Abfall-Kalender:
defmod Kalender_Abfall Calendar ical url https://calendar.google.com/calendar/ical/achgottwasfuereinezangebuchstabenkombi0o%40group.calendar.google.com/private-unddieistauchnochsolan1d/basic.ics 21600
attr Kalender_Abfall room Kalender
Müssen da noch irgendein Attribut gesetzt werden?
Andreas
Was meinst Du denn genau mit KalenderDevice?
Die "termine" sind genauso Kalender wie die anderen.
Zitat von: Loetkolben am 20 November 2020, 18:19:36
bei mir wird 'No events to display' angezeigt.
HTML in ftui:
<ftui-tab-view id="View3">
<ftui-grid-tile row="1" col="3" height="5" width="9">
<header>Kalender</header>
<ftui-calendar view="listWeek">
<ftui-calendar-data calendar="Kalender_Abfall" color="primary"></ftui-calendar-data>
</ftui-calendar>
</ftui-grid-tile>
</ftui-tab-view>
Hi Andreas,
das sieht eigentlich gut aus vom HTML Code.
Ja, Kalender_Abfall sollte der Name der Instanz vom FHEM Calendar Modul sein (Achtung, case-sensitive).
Siehst du, wenn du im Browser die Entwicklertools öffnest und dort die Console irgendwelche Errors?
Falls da alles ok ist: Was spuckt ein
get Kalender_Abfall events format:custom="$U|$T1|$T2|$S|$L|$DS|$CA|$d" timeFormat:"%Y-%m-%dT%H:%M:%S" limit:from=-31d,to=+31d
in Fhem aus?
Siehst du da Ereignisse (und auch welche die in der aktuellen Woche liegen)?
@setstate die Pipes sind übrigens genial.
Gerade gemerkt, dass man Steigung und Achsenverschiebung von Readings / Kommando so ja sogar lösen kann, ohne dass eine Komponente das unterstützt:
<ftui-blind [value]="Rollo:positionReading | multiply(-1.01010101) | add(100)" (value)="multiply(-0.99) | add(99) | Rollo:positionCmd" ...
Damit wird ein Rollo mit Werten von 99 bis 0 in Fhem auf 0 bis 100 in FTUI umgemapped.
Also sowohl der Wertebereich skaliert als auch invertiert (also 99 = Rollo zu statt Rollo offen).
Meine Frage wäre, ob du evtl. für ein Pipe zu begeistern wäre, dass das etwas einfacher konfigurierbar macht (also ohne Taschenrechner :P).
Irgendwie in die Richtung scale(minWertFhem, maxWertFhem, minWertFTUI, maxWertFTUI).
Dann könnte man damit beliebig einen Wertebereich ummappen.
die Pipe müsste halt je nach Richtung (FHEM->FTUI oder FTUI->FHEM) anders herum rechnen, trotz gleicher Konfiguration:
<ftui-blind [value]="Rollo:positionReading | scale(99,0,0,100)" (value)="scale(99,0,0,100) | Rollo:positionCmd" ...
Sprich eingehend aus Fhem wäre es ReadingsVal * Steigung + Achsenabschnitt und ausgehend wäre es (SetVal - Achsenabschnittt) / Steigung.
@Thyraz:
In der Browserkonsole sieht man nur die regelmäßigen Daten von meinem Stromzähler (sicherlich für das Chart vom Stromverbrauch).
ftui-label-38 - onReadingEvent: set this.text=9.453 ftui.helper.js:101:17
ftui-chart-data-1 - onReadingEvent: set this.update=2020-11-20 21:35:11 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
ftui-label-38 - onReadingEvent: set this.text=9.454 ftui.helper.js:101:17
ftui-chart-data-1 - onReadingEvent: set this.update=2020-11-20 21:35:16 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
ftui-label-38 - onReadingEvent: set this.text=9.455 ftui.helper.js:101:17
ftui-label-38 - onReadingEvent: set this.text=9.456 ftui.helper.js:101:17
ftui-chart-data-1 - onReadingEvent: set this.update=2020-11-20 21:35:26 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
ftui-label-38 - onReadingEvent: set this.text=9.457 ftui.helper.js:101:17
ftui-chart-data-1 - onReadingEvent: set this.update=2020-11-20 21:35:31 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
Page became visible again -> start healthCheck in 3 secondes ftui.helper.js:101:17
ftui-label-38 - onReadingEvent: set this.text=9.458 ftui.helper.js:101:17
ftui-chart-data-1 - onReadingEvent: set this.update=2020-11-20 21:35:36 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
ftui-label-38 - onReadingEvent: set this.text=9.459 ftui.helper.js:101:17
ftui-chart-data-1 - onReadingEvent: set this.update=2020-11-20 21:35:41 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbra
Das 'get Kalender_Abfall.....' bringt ein leeres Ergebnisfenster mit nem OK-Button.
[Edit:]
Kommando zurück!
Irgendetwas scheint mit meinem Abfallkalender nicht zu stimmen.
Ich habe zum Test mal meinen Dienstkalender genommen, da klappt es.
Jetzt muss ich mal schauen was da nicht stimmt, im FTUI 2.x funktioniert alles reibungslos, auch der Abfallkalender.
Puh, evlt. liegt es auch einfach an meinem mangelnden Verständnis von iCal Dateien oder dem Calendar Modul in Fhem.
Hatte bis ich vor 2 Tagen die FTUI Komponente programmiert habe keine wirklichen Berührungspunkte damit gehabt.
Was passiert denn wenn du den letzten Parameter (das limit mit +/-31 Tagen) weglässt?
Dann solltest du ja alle Einträge aus dem Kalender bekommen.
Siehst du da welche für den aktuellen Zeitraum?
Oder muss man sich die nachfolgenden Termine bei Serienterminen alle selbst berechnen?
Bei meinem iCloud Kalender kommen wir wiederholenden Termine korrekt rein, dort scheint das also als einzelne Termine über die API ausgeliefert zu werden.
Aber we weiß ob der iCal Standard das auch anders erlaubt...
Zitat von: Thyraz am 20 November 2020, 21:09:52
Meine Frage wäre, ob du evtl. für ein Pipe zu begeistern wäre, dass das etwas einfacher konfigurierbar macht (also ohne Taschenrechner :P).
Irgendwie in die Richtung scale(minWertFhem, maxWertFhem, minWertFTUI, maxWertFTUI).
Dann könnte man damit beliebig einen Wertebereich ummappen.
die Pipe müsste halt je nach Richtung (FHEM->FTUI oder FTUI->FHEM) anders herum rechnen, trotz gleicher Konfiguration:
<ftui-blind [value]="Rollo:positionReading | scale(99,0,0,100)" (value)="scale(99,0,0,100) | Rollo:positionCmd" ...
Sprich eingehend aus Fhem wäre es ReadingsVal * Steigung + Achsenabschnitt und ausgehend wäre es (SetVal - Achsenabschnittt) / Steigung.
Die Pipe-Funktion habe ich jetzt eingebaut, aber das mit der Richtungsumkehr habe ich mir gespart. Es ist immer von links nach rechts (---->) gemeint
scale(minIn, maxIn, minOut, maxOut)
50 | scale(50,0,50,100) = 50
0 | scale(50,0,50,100) = 100
Kommt mit dem nächsten Commit
@setstate
Ich habe gestern die Pipes bzgl. 'ago' und 'till' als Pull Request bereitgestellt.
Jetzt bleiben noch ein paar Fragen:
- Könnte das so übernommen werden, obwohl die Basis mittlerweile schon anders ist ?
- Ich habe einige Beispiele in das label-example integriert. Gibt es derzeit noch eine andere Möglichkeit, Beispiele für den Einsatz von Pipes zu hinterlegen ?
- Wenn es um eher spezielle Pipes wie z.B. scale geht, könnten die dann auch genau von der entsprechenden Komponente eingeschleust werden ? Vermutlich interessant für "externe" Komponenten.
Super, danke setstate. :)
@OdFhem mit der Komponente würde ich das nicht einschleusen, da Pipes ja vor der Komponente wirken und auch für alle Komponenten nutzbar sind.
Aber die Idee eigene Pipes anbieten zu können klingt an sich cool.
Denke man müsste die Pipes dann in eigene Files stecken, und diese dann wie die Pipe benennen. Das Ganze dann eben in einen Pipes Ordner in FTUI, aus dem die dann anhand des Names gesucht und geladen werden.
Ist aber für setstate sicher ein etwas größerer Umbau.
Daher ist die Frage ob es da wirklich so viele Use-Cases gibt, oder ob man in der Realität gar nicht so viele verschiedene Pipes benötigt...
Zitat von: Thyraz am 20 November 2020, 22:50:35
Puh, evlt. liegt es auch einfach an meinem mangelnden Verständnis von iCal Dateien oder dem Calendar Modul in Fhem.
Hatte bis ich vor 2 Tagen die FTUI Komponente programmiert habe keine wirklichen Berührungspunkte damit gehabt.
Was passiert denn wenn du den letzten Parameter (das limit mit +/-31 Tagen) weglässt?
Dann solltest du ja alle Einträge aus dem Kalender bekommen.
Siehst du da welche für den aktuellen Zeitraum?
Oder muss man sich die nachfolgenden Termine bei Serienterminen alle selbst berechnen?
Bei meinem iCloud Kalender kommen wir wiederholenden Termine korrekt rein, dort scheint das also als einzelne Termine über die API ausgeliefert zu werden.
Aber we weiß ob der iCal Standard das auch anders erlaubt...
Es funktioniert jetzt. :)
Irgendwas war mit der URL für meinen Abfall-Kalender faul. Habe die im FHEM-Device eingetragene mal mit der URL verglichen die Google mir gibt und da ist es aufgefallen.
Warum aber im FTUI2.x mein Abfallkalender richtig angezeigt wurde - keine Ahnung.
Vielen Dank für die Hilfe!
Andreas
Ich steige nicht so recht durch, gibt es irgendwelche Möglichkeiten der Ausrichtung von Text oder auch Widgets, also linksbündig, zentriert oder rechtsbündig?
Ich habe in der css gesehen, daß man in der "cell" ein paar Möglichkeiten hat, die sich aber scheinbar nicht auf alle Objekte anwenden lassen.
Ein bißchen Licht im Dunkel wäre nett.
Zitat von: OdfFhem am 21 November 2020, 02:59:33
@setstate
Ich habe gestern die Pipes bzgl. 'ago' und 'till' als Pull Request bereitgestellt.
Jetzt bleiben noch ein paar Fragen:
- Könnte das so übernommen werden, obwohl die Basis mittlerweile schon anders ist ?
- Ich habe einige Beispiele in das label-example integriert. Gibt es derzeit noch eine andere Möglichkeit, Beispiele für den Einsatz von Pipes zu hinterlegen ?
- Wenn es um eher spezielle Pipes wie z.B. scale geht, könnten die dann auch genau von der entsprechenden Komponente eingeschleust werden ? Vermutlich interessant für "externe" Komponenten.
Vielen Dank für die Zuarbeiten!
Lustigerweise hatte ich gestern auch ago schon fertig, bei till fielen mir dann aber die Augen zu.
Ich überlege immer noch, wo eine Trennung in ago und agoFormat Sinn macht. Würde man ago mit anderen Nachfolgern als agoFormat nutzen? Könnte agoFormat andere Vorfunktionen verarbeiten? Ich finde keine sinnvollen UseCases. Deshalb habe ich es bei mir in einer Funktion gelassen.
Die Angabe tillFormat('%SSSSSSSSs','upper') finde ich sehr unübersichtlich. Habe ich jetzt 8xS oder nur 7xS getippt? Wofür steht %? Warum muss ich 'upper' angeben, wenn SSSSSSSS ja schon UpperCase ist.
Ich denke noch ein bisschen darüber nach und schreibe ein paar Klugscheißerkommentare an den PR 8)
Zitat von: grossmaggul am 21 November 2020, 09:47:21
Ich steige nicht so recht durch, gibt es irgendwelche Möglichkeiten der Ausrichtung von Text oder auch Widgets, also linksbündig, zentriert oder rechtsbündig?
Ich habe in der css gesehen, daß man in der "cell" ein paar Möglichkeiten hat, die sich aber scheinbar nicht auf alle Objekte anwenden lassen.
Ein bißchen Licht im Dunkel wäre nett.
Das ist noch eine Baustelle. Da ist immer noch kein Konzept final.
Letzte Änderung war, anstatt von <div class="column" muss man jetzt <ftui-column> benutzen.
<ftui-grid-tile row="1" col="4" height="2" width="2" shape="round"
[color]="WCLuft | map('0:ok, 1000:warning, 2000:danger')">
<ftui-column width="80%">
<ftui-label class="size-5 align-left">CO²</ftui-label>
<ftui-label class="size-7 align-left" [text]="WCLuft | part(1) | toInt()"></ftui-label>
<ftui-label class="size-0 align-right">ppm</ftui-label>
</ftui-column>
</ftui-grid-tile>
Bei der Version 3 muss man jetzt auch nicht mehr unbedingt <link href="ftui.css" rel="stylesheet"> einbinden.
Man kann das weglassen und jedes X-beliebige CSS Framework nutzen.
z.B.
- W3.CSS - https://www.w3schools.com/w3css/default.asp
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">- ionic - https://ionicframework.com/docs/api/grid
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css"/>
- Bootstrap - https://getbootstrap.com
- onsen - https://onsen.io/v2/api/css.html
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
Die meisten Frameworks sind mir aber zu überladen bzw. die Semantic ist nicht so toll. Deshalb versuche ich mit ftui.css die (für mich) besten und einfachsten Ideen aus allen Welten zu kombinieren - beschränkt auf das Nötigste.
3rd-Party Web Components kann man einbinden, wenn man die
ftuiBinding "Directive" benutzt.
<ion-item>
<ion-label ftuiBinding [text-content]="ftuitest" >Grape</ion-label>
<ion-range ftuiBinding color="danger" pin="true" debounce="200"
[(value)]="ftuitest"
@ion-change="this.setAttribute('value', this.value)"></ion-range>
</ion-item>
Wenn die Web Components keine Property <-> Attribute Reflektion implementiert haben ( https://developers.google.com/web/fundamentals/web-components/best-practices => '... keep primitive data attributes and properties in sync, reflecting from property to attribute, and vice versa.'),
muss man sich das über die angebotenen Events + this.setAttribute selbst "verknüppern"
<ion-toggle ftuiBinding slot="start" name="kiwi" color="success" checked
[checked]="dummy3 | map('on: true, off: false')"
(value-out)="map('false: off, true: on') | dummy3"
@ion-change="this.setAttribute('value-out', this.value)"
></ion-toggle>
</ion-item>
Danke!
ZitatDeshalb versuche ich mit ftui.css die (für mich) besten und einfachsten Ideen aus allen Welten zu kombinieren - beschränkt auf das Nötigste.
Das finde ich sehr löblich und kommt mir sehr entgegen, da mein Gedächtnis nicht mehr das Beste ist, müsste ich bei umfangreichen CSS Frameworks dauernd nachsehen, wie was geht. :-\
Schon in der 2er Version von ftui kam ich bestens zurecht und konnte damit eigentlich alles bauen, wie ich es mir vorgestellt habe.
Mein Mediaplayer ist soweit fertig oder sagen wir mal so, er funktioniert(hoffe ich zumindest ;)), das Design ist noch nicht der Weisheit letzter Schluss, die Repat und Shuffle Icons sind auch eher nur, weil nix anderes da war.;)
Der Code des "grid-tile" hängt dran.
Perfekt, das geht ja schnell.
Am Slider habe ich doch noch etwas "geschraubt".
readonly und handle="none" konnte ich ganz easy per CSS realisieren und etwas dünner sieht er besser aus.
<ftui-grid-tile row="3" col="4" height="1" width="3">
<header>READONLY</header>
<ftui-slider [(value)]="ftuitest" min="10" max="70" handle="none" readonly></ftui-slider>
</ftui-grid-tile>
Zur Info: hidden, readonly und disabled Attribute gibt es bei allen ftui-* Elementen.
<ftui-icon name="exclamation-triangle"
[hidden]="ftuitest | map('on:false, off:true')">
</ftui-icon>
Zitatreadonly und handle="none" konnte ich ganz easy per CSS realisieren und etwas dünner sieht er besser aus.
Na, die Erfüllung meiner Wünsche geht aber auch recht fix. ;)
@Thyraz: hab gerade den Kalender reingepackt. Sieht wirklich klasse aus!
@setstate
Leider hatte ich am gestrigen Tag keine Möglichkeit mehr zu Kommentaren/Hinweisen/...; heute sollten die Antwortzeiten wieder deutlich kürzer sein.
ZitatVielen Dank für die Zuarbeiten!
Äußerst gern geschehen, wenn auch bis jetzt noch kein endgültiges Ergebnis vorliegt ...
ZitatLustigerweise hatte ich gestern auch ago schon fertig, bei till fielen mir dann aber die Augen zu.
Nach dem kurzen Austausch weiter oben wollte ich nicht noch mal nachfragen, wer jetzt was macht und hab das beginnende Wochenende einfach für einen kleinen Beitrag zum Gesamtprojekt genutzt. Beim nächsten Mal wird es "teamorientierter" laufen ...
ZitatIch überlege immer noch, wo eine Trennung in ago und agoFormat Sinn macht. Würde man ago mit anderen Nachfolgern als agoFormat nutzen? Könnte agoFormat andere Vorfunktionen verarbeiten? Ich finde keine sinnvollen UseCases. Deshalb habe ich es bei mir in einer Funktion gelassen.
Hier kann ich schon mal meine neuen Erkenntnisse bzgl. Deiner ago-Pipe mitteilen: meine Umsetzung vom Anfang des Jahres sah - abgesehen von
const/let bzw.
~~ - quasi identisch aus; mit einem solchen Stand hatte ich auch am Wochenende begonnen. Die Trennung von
ago und
format beruht bei mir auf einigen Tests, wo ich feststellen musste, dass - ein passendes Reading vorausgesetzt - nur noch die Formatierung benötigt wird; daraufhin habe ich mich an eine Aufteilung wie
toDate und
format angelehnt.
ZitatDie Angabe tillFormat('%SSSSSSSSs','upper') finde ich sehr unübersichtlich. Habe ich jetzt 8xS oder nur 7xS getippt? Wofür steht %? Warum muss ich 'upper' angeben, wenn SSSSSSSS ja schon UpperCase ist.
Die kleingeschriebenen Platzhalter 'ssssssss','mmmmmm','hhhh','dd' bzw. 'dd','hh','mm','ss','h','m','s' entstammen gesammelten Angaben bzgl. "Elapsed time formats".
Damit werden 2 Theorien umgesetzt:
Darstellung der ersten Gruppe beruht auf der gesamte Zeitspanne (Sekunden/Minuten/Stunden/Tage im Bereich 0..<beliebig>).
Normalerweise wird hier nur ein Platzhalter angegeben.
z.B. 439742 Sekunden liefern: 'ssssssss'=439742 ; 'mmmmmm'=7329 ; 'hhhh'=122 ; 'dd'=5
Darstellung der zweiten Gruppe beruht auf der übriggebliebenen Zeitspanne (Sekunden/Minuten im Bereich 00..59, Stunden im Bereich 00..23, Tage im Bereich 0..<beliebig>).
Hier werden normalerweise mehrere, aber vielleicht auch nur ein Platzhalter angegeben.
z.B. 439742 Sekunden liefern: 'dd'=5 ; 'hh'=02 ; 'mm'=09 ; 'ss'=02 ; 'h'=2 ; 'm'=9 ; 's'=2
Damit wäre man eigentlich schon fertig, wäre da nicht die gängige Praxis der Einstreuung von Texten ...
timeFormat('[ dd days + hh:mm:ss ]','s') liefert '[ 5 day2 + 02:09:02 ]'
Klingt nicht gut, daher Erweiterung der Routine um reguläre Ausdrücke:
timeFormat('[ dd days + hh:mm:ss ]','s') liefert '[ 5 days + 02:09:02 ]'
Prima, eigentlich erledigt. Eine kleine Änderung des gewünschten Textes führt aber zu:
timeFormat('[ dd day(s) + hh:mm:ss ]','s') liefert '[ 5 day(2) + 02:09:02 ]'
Um auch diese (bislang) letzte Hürde zu überwinden, habe ich zusätzlich besser erkennbare Platzhalter integriert:
timeFormat('[ %DD day(s) + %HH:%MM:%SS ]','s','upper') liefert '[ 5 day(s) + 02:09:02 ]'
Ich habe noch einige andere Beispiele durchgespielt und die gewünschten/erwarteten Ergebnisse bekommen, aber wer weiß ...
Übrigens sind die Problemlösungsvorschläge nicht auf englische Texte beschränkt; deutsche Formulierungen wie 'seit', 'wir treffen uns in' oder 'der Besuch kommt in' führen ebenfalls zu ansonsten interessanten/unbrauchbaren Darstellungen.
Wichtig ist, dass man erst mal nur die kleingeschriebenen Platzhalter nutzen kann; im Zweifel greift man aber auf die eindeutigeren Platzhalter zurück.
ZitatIch denke noch ein bisschen darüber nach und schreibe ein paar Klugscheißerkommentare an den PR
Kommentare - egal welcher Art - sind ja in der Regel zielführend ...
Hier berichte ich kurz, was ich noch geändert habe:
var nach const bzw. let überführt
Math.floor in ~~ überführt (kommt übrigens unverändert noch in knob.component.js, circle-menu.js, iro.js und vor allem chart.js vor)
let ret = format habe ich um String erweitert
Die ursprünglich benamte Pipe 'agoTillFormat' heisst jetzt allgemeiner 'timeFormat'
Ich habe auch die bis jetzt aufgelaufenen Änderungen bei den zu übertragenden Modulen eingearbeitet (bei Deiner ago-Pipe ging das natürlich nicht).
Abschließend noch zwei Fragen:
Ich nutze optionale Parameter für zumindest eine Pipe und das klappt auch soweit. Gebe ich aber beispielsweise den zweiten, optionalen Parameter als Parameter mit, muss man alle davorliegenden, optionalen Parameter mitgeben. Funktioniert es auch irgendwie, dass ich nur den einen optionalen Parameter mitgeben kann?
Angenommen, ich darf meinen 2.ten Versuch noch einstellen, muss ich den alten Versuch löschen und einen neuen anfordern? Oder kann ich den alten irgendwie anpassen?
@Thyraz
ZitatAber die Idee eigene Pipes anbieten zu können klingt an sich cool.
Das fände ich auch gut. Allgemein anwendbare Pipes sollten logischerweise im allgemeinen Bereich liegen; spezielle Pipes vielleicht eher beim "Verursacher".
Zitat
Ist aber für setstate sicher ein etwas größerer Umbau.
Daran wäre ich auch nicht interessiert. Mein Hintergedanke war, dass es vielleicht ausreicht, die gewünschte Pipe beim Starten eines Widgets anzumelden - Werte sollten zu dem Zeitpunkt ja noch keine Rolle spielen und die benötigte Funktion liegt tatsächlich einzig im speziellen Widget-Modul und kann von ausserhalb angesprochen werden.
Es ging mir aber auch gar nicht um eine zwingend notwendige Realisierung, sondern eher um die Machbarkeit. Bei leichter Umsetzung würde dies z.B. allein schon zu einem schmalen Basissystem beitragen.
@Thyraz
Hallo,
ich hatte heute Gelegenheit, mich ein wenig näher mit der calendar-Komponente zu beschäftigen. Und mir fiel sofort auf, dass fullcalendar in Deiner genutzen Version v5.3.2 (nur zur Info: aktuell ist mittlerweile v5.4.0) eine deutlich schlankere Auslieferform hat. Ich habe bis etwa Mitte Februar diesen Jahres im Rahmen von ftui3-Tests und EPG-Darstellung die damals aktuelle Version v4.3.1 genutzt und musste eine ganze Reihe von notwendigen Modulen einbeziehen. Allein diese Erfahrung macht schon Laune. Auch die etwas andere Art von Vereinigung verschiedener Devices unter einem gemeinsamen Hut finde ich interessant. Bei mir war es zum damaligen Zeitpunkt noch nach dem bekannten Widget-Prinzip gestrickt, bei dem alle relevanten Devices über ein gemeinsames Array verwaltet wurden.
Die Darstellung mit Deiner Kalender-Variante klappte ohne jegliche Probleme - sehr gut.
Die Frage meinerseits wäre jetzt, hast Du schon Ausbaupläne für diese Komponente?
Zitat von: OdfFhem am 22 November 2020, 09:42:31
@Thyraz
Das fände ich auch gut. Allgemein anwendbare Pipes sollten logischerweise im allgemeinen Bereich liegen; spezielle Pipes vielleicht eher beim "Verursacher".
Hi OdFhem. :)
Ich glaub mein Problem ist, dass mir gerade kein Beispiel für Component-spezifische Pipes einfällt und ich deswegen nicht so recht eine Meinung dazu äußern kann...
Hast du da ein Beispiel dafür parat?
Zitat von: OdfFhem am 22 November 2020, 11:03:30
ich hatte heute Gelegenheit, mich ein wenig näher mit der calendar-Komponente zu beschäftigen. Und mir fiel sofort auf, dass fullcalendar in Deiner genutzen Version v5.3.2 (nur zur Info: aktuell ist mittlerweile v5.4.0)
Stimmt hatte die Version schon vor einiger Zeit runtergeladen, als ich dachte damit könnte man mal eine nette FTUI Komponente basteln.
Update ich mal bei Gelegenheit.
Zitat von: OdfFhem am 22 November 2020, 11:03:30
Auch die etwas andere Art von Vereinigung verschiedener Devices unter einem gemeinsamen Hut finde ich interessant. Bei mir war es zum damaligen Zeitpunkt noch nach dem bekannten Widget-Prinzip gestrickt, bei dem alle relevanten Devices über ein gemeinsames Array verwaltet wurden.
Da haben setstate und ich irgendwann mal darüber sinniert, wie man diese fehleranfälligen (aus Enduser-HTML-Sicht) Konfig-Würmer innerhalb eines HTML-Attributs besser löst.
Bei der Chart Komponente kam uns dann dieser Idee.
Es wird auch besser deutlich, was zur einer Signalkonfiguration (früher Arraywert) und was zum Chart selbst gehört.
Bei der Kalender Komponente hat sich das dann ja auch angeboten.
Zitat von: OdfFhem am 22 November 2020, 11:03:30
Die Darstellung mit Deiner Kalender-Variante klappte ohne jegliche Probleme - sehr gut.
Die Frage meinerseits wäre jetzt, hast Du schon Ausbaupläne für diese Komponente?
Jein, Pläne es auszubauen auf alle Fälle.
Wie weit ich hier gehen will und was so rein soll ist noch ein wenig unklar.
Ich denke eine Listenversion mit fixer Anzahl nächster Termine macht definitiv noch Sinn, ebenso eine Grid-Ansicht z.B. für den aktuellen Monat.
Ob ich auch eine Detailansicht für die Termine dazubasteln soll / will weiß ich noch nicht so recht.
Evlt. in Verwendung mit einer Popup Komponente wenn es sowas mal gibt. :P
@Thyraz
Ich hatte zunächst scale in Verdacht, aber das war wohl doch eher eine Fehleinschätzung. Einen direkten Kandidaten habe ich nicht auf der Liste ...
@all
Kann ich in einer Komponente ein Reading subscriben, das für alle Einsatzfälle gleich ist und nicht von außen mitgegeben werden muss?
Einsatzszenario wäre bei mir z.B. eine EPG-Komponente, deren Aktualisierung eigentlich immer von innen gesteuert wird. Der Initialwert einer Property kennt zwar den Namen des Readings, nicht aber den Namen des Gerätes ...
Zitat von: OdfFhem am 22 November 2020, 09:01:00
Angenommen, ich darf meinen 2.ten Versuch noch einstellen, muss ich den alten Versuch löschen und einen neuen anfordern? Oder kann ich den alten irgendwie anpassen?
Wenn der Branch geändert wird, müsste sich auch der Pull Request aktualisieren. Also, ein neuer PR ist nicht nötig.
Vielen Dank für die ausführlichen Erklärungen. Das mit den eingestreuten Texten hate ich garnicht auf dem Schirm.
Zitat von: OdfFhem am 23 November 2020, 07:02:03
Kann ich in einer Komponente ein Reading subscriben, das für alle Einsatzfälle gleich ist und nicht von außen mitgegeben werden muss?
Einsatzszenario wäre bei mir z.B. eine EPG-Komponente, deren Aktualisierung eigentlich immer von innen gesteuert wird. Der Initialwert einer Property kennt zwar den Namen des Readings, nicht aber den Namen des Gerätes ...
Das hatte ich auch schon gedanklich angerissen. Eine Komponente kann eine andere auf der Seite mit const elem = document.querySelector('<selector>') finden und dann mit elem.setAttribute('device', 'neuesDevice') beeinflussen.
Ein Unsubscribe und neu Subscribe für die kontinuierlichen Updates habe ich aber noch nicht eingebaut. Eine AdHoc Abfrage an FHEM ist aber möglich, um aktuelle Werte zu bekommen.
Eine Anwendung wäre zum Beispiel: Eine Select für das Gerät (z.B. Sonos1, Sonos2, Sonos3) - nach Änderung dessen wird ein zweiter Select neu geladen und zeigt zum Beispiel die Playlisten des Geräts an. Bei diesem UseCase würde ein einmaliger Update der Playlisten reichen. Hier bräuchte man nicht unbedingt einen Update.
Zitat von: OdfFhem am 23 November 2020, 07:02:03
Ich hatte zunächst scale in Verdacht, aber das war wohl doch eher eine Fehleinschätzung.
Ja, das war an sich gerade so eine Geschichte bei der ich gedacht hatte, dass man das nicht nur in Blind oder Icon-Multicolor benötigt, sondern ein Standardfall ist den man öfter braucht.
Damit man Attribute wie min, max, invert nicht in jeder zweiten Komponente umsetzen muss.
An sich dasselbe wie die min, max Parameter beim homebridgeMapping für Alexa oder Homekit.
Also wenn man einen Ausgangswert in Fhem hat, der vom Wertebereich nicht zum erwarteten Eingangswert einer Komponente passt.
Dann kann ich das eben beliebig umskalieren.
Und an sich ist das ja genau der Einsatzzweck von den Pipes: Der User hat etwas, dass er umwandeln muss damit die Komponente es versteht (Oder eben andersrum für den Weg Komponente -> Fhem).
Für etwas anderes würde ich Pipes glaube ich auch nicht verwenden.
Oder anders ausgedrückt: Die Pipes gehören dem User, nicht der Komponente.
Sprich, wirklich komponentenabhängiger Code der etwas mit den Readingswerten anstellt, gehört meinem aktuellen Gefühl nach eher in die Komponente und nicht als Pipe zur Verfügung gestellt.
Denn die Pipes muss der User ja händisch befüllen, was die Konfiguration komplexer macht.
Aber wer weiß, evtl. kommt ja doch noch eine Komponentenidee bei der man das anders sieht... ;)
Zitat von: OdfFhem am 23 November 2020, 07:02:03
Kann ich in einer Komponente ein Reading subscriben, das für alle Einsatzfälle gleich ist und nicht von außen mitgegeben werden muss?
Hab es noch nicht benötigt, würde es aber so aus setstates Quellcode rauslesen:
import { fhemService } from './fhem.service.js';
...
fhemService.getReadingEvents('MyDevice:myReading).subscribe(data => {
console.log('New Value: ' + data.value);
});
edit: Nachdem setstate schon geantwortet hat während ich noch getippt habe, bin ich mir jetzt nicht mehr so sicher ob das wirklich funktioniert (zumindest so wie gewollt ohne Nebenenffekte). :P
Zitat von: Thyraz am 22 November 2020, 20:17:17
Ich glaub mein Problem ist, dass mir gerade kein Beispiel für Component-spezifische Pipes einfällt und ich deswegen nicht so recht eine Meinung dazu äußern kann...
Hast du da ein Beispiel dafür parat?
Wenn nicht, wäre das auch gut. Ich habe nämlich ein Problem mit dem Scope/Context der zusätzlichen Funktion. Noch kann ich mit dem (evil) eval arbeiten und muss den Pipe-String nicht selber parsen. Damit muss aber die Funktion im aktuellen Scope liegen, damit man sie ohne Präfix angeben kann, sonst würde es so aussehen: this.scale(...) oder FtuiSlider.scale(...)
Update:Obwohl, mit einer weiter ganz bösen Art und Weise könnte man das erreichen:
window.scale = (minIn, maxIn, minOut, maxOut) => input => ftui.scale(input, minIn, maxIn, minOut, maxOut);
Aus gutem Grund ist das Bad Practice - man kommt schnell in Namenskonflikte (map, toInt usw.) und muss dann wieder mit kruden Namen hantieren: ftuiMap, ftuiToInt
@setstate hast du das mit getReadingEvents oben von mir gesehen?
Wäre das so ok, oder ist das aus irgendeinem Grund pfui? ;)
Grundsätzlich ist das okay. So subscribe't man sich die Readings.
Aktuelle Probleme:
Wenn das zuvor (beim Init) keiner gemacht hat, bekommt man keine Events, da das Device:Reading dann nicht im Filter für jsonlist und inform mit drin ist.
Also müsste man nach einer Änderung createFilterParameter() rufen, damit das aufgenommen wird und dann die WebSocket Verbindung neu aufbauen.
Weiterhin müsste man vorher das alte Reading unsubsciben. Dafür muss ich erst noch ein unsubscribe() in die Subject Klasse bauen.
Alles nix wildes, aber viele Baustellen noch.
Ok, dan vermerke ich das mal als "richtigen Weg", versuche es aber in naher Zukunft noch zu vermeiden. ;D
Ich oute mich mal, leider verstehe ich von den letzten Ausführungen nur Bahnhof. :-\
Was hat man als normalsterblicher Anwender davon?
Bitte in einfachen Worten, ich bin blond. ;)
Da gehts um die Entwicklung von Komponenten. ;)
Wie man Reading-Updates aus FHEM abonniert wenn das Reading nicht in der Komponenten-Konfig (also den HTML-Attributen) angegeben werden soll.
Also z.B. eine Komponente für ein bestimmtes FHEM-Modul mit vielen zu überwachenden Readings.
Die soll der User aber natürlich nicht alle in sein HTML-Konstrukt reinkloppen müssen.
Stattdessen reicht da ja ein device="DeviceWithManyReadyings" und die Komponente kann die Readings selber abonnieren, da sie ja weiß wie die in diesem FHEM-Modul heißen.
Achso, noch ein Hinweis zur Chart Komponente:
Nachdem setstate neulich meinen PullRequest übernommen hat:
In der neusten Version heißt das Attribut border-color nun color.
Vorteil ist, dass hier wieder der Mechanismus greift, der color="primary" oder color="brown" durch die Farbwerte ersetzt.
Analog zu den anderen Modulen bei denen das bereits ging wie Button, Icon etc.
Man kann so die Farben der Signale einfacher konfigurieren und es verleitet dazu die Theme Farben zu verwenden womit das Seitendesign einheitlicher wird. ;)
Ein Beispiel für ein entsprechendes Chart-Data ist im Example zu Chart bereits drin:
https://github.com/knowthelist/ftui/blob/master/examples/chart.html
Hallo,
frage zur Einbindung von OA Icons. Wenn ich sie in den Icons Ordner packe werden sie angezeigt aber die Farbe kann ich nicht ändern. Was ist da noch anzupassen?
Gruss
Eisix
Zitat von: Eisix am 23 November 2020, 16:48:02
Hallo,
frage zur Einbindung von OA Icons. Wenn ich sie in den Icons Ordner packe werden sie angezeigt aber die Farbe kann ich nicht ändern. Was ist da noch anzupassen?
Gruss
Eisix
Du musst die OA Icons nicht unbedingt kopieren. Mit dem path Attribute kannst du dahin zeigen
<ftui-icon class="size-5" path="../images/openautomation" name="audio_audio" color="green"></ftui-icon>
<ftui-icon class="size-5" path="../images/openautomation" name="it_wifi" color="red"></ftui-icon>
Per default zeigt path auf "icons".
Wegen der Farbe: leider haben diese Icons unterhalb von svg Tag ein g Tag mit fill="#000000". Mit einer kleinen Änderung im css konnte ich das überschreiben.
path funktioniert, fehlt mir nur noch der CSS Eintrag.
ist schon hochgeladen: https://github.com/knowthelist/ftui/blob/master/components/icon/icon.component.css
Zitat von: Eisix am 18 November 2020, 14:12:14
Gibt es eine Möglichkeit das badge weiter rechts oben darzustellen, da es mir in der Standardeinstellung zuviel vom Icon verdeckt?
Das habe ich für Safari optimiert, im Chrome sieht das aber ganz anders aus (siehe Screenshot unten)
Mit einer margin Optimierung verhalten sich jetzt beide Browser gleich
Nur wenn man Margin für alle vier Seiten angibt, rechnen bei gleich. Bei nur zwei Seiten rechnen sie unterschiedlich. Wusste ich auch noch nicht.
vorher nachher
margin-top: -1.1em; margin: -1.5em -1.5em 1em 1em;
margin-left: 1em;
Unter Brave sieht das jetzt so aus, soll das so?
>:(
Mein Beispiel sieht im Brave nicht anders aus. Mmmm.
Zeig mal bitte dein Beispiel (am besten das ganze ftui-grid-tile)
Sieht bei mir jetzt auch so aus, sorry, ich hatte den Abfallkalender mit content ausgelagert, aber Du schriebst ja bereits, daß Du das noch nicht implementiert hast. Ich hatte das aber vergessen, tut mir leid für die Wallung. :(
@grossmaggul die Titelschriftgröße vom Kalender lässt sich jetzt über die CSS Variable --calendar-title-font-size beeinflussen.
Super, danke!
Wollte ich jetzt gerade mal ausprobieren, ich bekomme es aber irgendwie nicht hin, ist das so falsch?
<ftui-grid-tile row="3" col="6" height="2" width="4" shape="round">
<header>Termine/Geburtstage</header>
<ftui-calendar view="listMonth" height="90%" calendar-title-font-size="16">
<ftui-calendar-data calendar="termine" color="primary"></ftui-calendar-data>
<ftui-calendar-data calendar="birthdays" color="brown"></ftui-calendar-data>
<ftui-calendar-data calendar="motorradtreffen" color="green"></ftui-calendar-data>
<ftui-calendar-data calendar="arbeit" color="yellow"></ftui-calendar-data>
</ftui-calendar>
</ftui-grid-tile>
@grossmaggul
Es geht um eine CSS-Variable, die in einer eigenen css-Datei definiert werden kann. Wird kein eigener Wert definiert, fällt die CSS-Variable auf einen Standardwert zurück.
@Thyraz
Bin mir nicht sicher, ob das meine Lösung wäre. Da ich sowieso in der eigenen css-Datei eingreifen muss, würde ich dort einfach die Klasse .fc-toolbar-title redefinieren ("the most basic technique") und damit das Aussehen/Verhalten beeinflussen - z.B. font-weight oder animation, also auch Dinge, die bislang u.U. noch gar nicht via fullcalendar-css berücksichtigt wurden.
Allgemein kann man festhalten, dass fullcalendar für praktisch jedes Darstellungselement eine eigene Klasse - teilweise sogar CSS-Variablen - definiert hat und damit schon eine extreme Beeinflussbarkeit anbietet.
Übrigens bin ich mir auch nicht sicher, ob die component in einer eigenen css-Datei überhaupt die fc-Vorgaben überschreiben sollte, denn fullcalendar bietet ja bereits ein komplettes "Standard"-Design, das jeder Nutzer selbst beeinflussen kann. Nur mal angenommen, man wollte auf das Standard-Design zurück, dann wird es schwierig ...
Ist aber - wie immer - nur eine Meinung, kein "Gesetz" ...
@setstate
Vielen Dank für die Übernahme des Vorschlags und den angeregten Feinschliff - das Vier-Augen-Prinzip ist da wirklich praktisch.
Hi OdFhem :)
Zitat von: OdfFhem am 24 November 2020, 03:35:05
Bin mir nicht sicher, ob das meine Lösung wäre. Da ich sowieso in der eigenen css-Datei eingreifen muss, würde ich dort einfach die Klasse .fc-toolbar-title redefinieren ("the most basic technique")
Das wird mit FTUI3 nicht mehr klappen.
Die Widgets sind ja mittlerweile echte Web Komponenten.
Ihr Inhalt ist also in einem Shadow DOM gekapselt und damit auch die CSS Rules.
Von außen kommst du da nicht ran (von fiesen Javascript Tricksereien mal abgesehen).
Der neue Weg ist also, dem Nutzer der Komponente die nötigen Infos und Settings von außen erreichbar/konfigurierbar zu machen.
Bei der eigentlichen Konfiguration einer Web Komponente wären das dann die Attribute/Properties.
Styling Eigenschaften die jetzt nicht zur normalen Konfiguration gehören, sondern nur der optischen Anpassung außerhalb der Standardnutzung dienen,
stellt man hingegen für gewöhnlich als CSS-Variablen zur Verfügung. (Siehe z.B. auch die neue Chart Komponente die davon stark Gebrauch macht.)
Diese wirken auf alle untergeordneten Elemente und passieren dabei auch die Grenze des Shadow-DOM.
Sind sozusagen die Brücke über die Kapselung hinweg.
Zitat von: OdfFhem am 24 November 2020, 03:35:05
Allgemein kann man festhalten, dass fullcalendar für praktisch jedes Darstellungselement eine eigene Klasse - teilweise sogar CSS-Variablen - definiert hat und damit schon eine extreme Beeinflussbarkeit anbietet.
Übrigens bin ich mir auch nicht sicher, ob die component in einer eigenen css-Datei überhaupt die fc-Vorgaben überschreiben sollte, denn fullcalendar bietet ja bereits ein komplettes "Standard"-Design, das jeder Nutzer selbst beeinflussen kann. Nur mal angenommen, man wollte auf das Standard-Design zurück, dann wird es schwierig ...
Ist aber - wie immer - nur eine Meinung, kein "Gesetz" ...
Ich weiß aus der Vergangenheit natürlich auch, dass es sehr viele verschiedene "Typen" von FTUI-Nutzern gibt.
Die, die in diesem Forumsbereich am stärksten auffallen, sind sicher die Bastler die gern an jeder Stellschraube drehen. ;)
Ich hab mir allerdings auf die Fahnen geschrieben FTUI durch spezielle Komponenten auch für einen Nutzerkreis zu erschließen, die entweder nicht so HTML-versiert sind,
oder einfach keine Lust auf lange Konfigurationsorgien haben.
Entsprechend versuche ich Komponenten, Templates, ... zu bauen die nicht zuuuu komplex von der Konfiguration sind und möglichst einfach dazu genutzt werden können um Standardanwendungen abzubilden.
Siehe auch die Idee mit fertigen Panels wie panel-dimmer oder panel-blind.
Entsprechend bin ich hier auch nicht aus der Sicht
Ich will FullCalendar in FTUI nutzbar machen herangegangen,
sondern hatte ein bestimmtes Ergebnis im Sinn und FullCalendar war eben das Werkzeug das den Weg dorthin schnell und einfach gemacht hat.
Die CSS Anpassungen dienen auch nur diesem Zweck:
- Der Kalender soll sich von den Farben an FTUI anpassen
- Das Ganze soll sich auch ohne eigene CSS Anpassungen soweit optisch gut integrieren
- Das Layout wird soweit angepasst, dass ich den Kalender für gut lesbar und nutzbar halte (das ist natürlich subjektiv und evtl. leidet ihr dann unter meinen Fehleinschätzungen. :P)
Als Beispiel für den letzten Punkt: Mir gefällt z.B. bei FullCalendar nicht, dass sich in der Listenansicht die ganztätigen Events optisch kaum von normalen Terminen unterscheiden.
Also hab ich das geändert. Damit müsst ihr nun eben leben. ;D
Das Ganze ist ja aber nur eine 3rd Party Komponente unter vielen.
Wenn das für die Hardcore User nicht ausreicht, wird sicher irgendwann zusätzlich zu dieser Calendar Komponente noch eine FullCalendar Komponente von irgendjemand auftauchen. ;)
Gab bisher ja auch schon diverse Chart-Lösungen für FTUI 2.x
ZitatEs geht um eine CSS-Variable, die in einer eigenen css-Datei definiert werden kann.
Danke, ich stecke in CSS nicht so drin, deshalb war mir das bisher nicht bekannt, daß es da auch Variablen gibt, werde mich mal schlau machen.
ZitatIch hab mir allerdings auf die Fahnen geschrieben FTUI durch spezielle Komponenten auch für einen Nutzerkreis zu erschließen, die entweder nicht so HTML-versiert sind,
oder einfach keine Lust auf lange Konfigurationsorgien haben.
Das finde ich sehr lobenswert. :)
edit:
Zitat von: grossmaggul am 24 November 2020, 10:01:31
Danke, ich stecke in CSS nicht so drin, deshalb war mir das bisher nicht bekannt, daß es da auch Variablen gibt, werde mich mal schlau machen.
War gerade schon dabei dir auch noch eine Antwort zu tippen. ;)
Zitat von: grossmaggul am 24 November 2020, 00:05:41
Super, danke!
Wollte ich jetzt gerade mal ausprobieren, ich bekomme es aber irgendwie nicht hin, ist das so falsch?
Das ist etwas, an das man sich als FTUI 3 Nutzer gewöhnen muss. ;)
Wie im langen letzten Beitrag erwähnt, kann man die CSS Eigenschaften der Komponenten "von außen" nicht mehr direkt beeinflussen.
Fast alle Komponenten nutzen daher mittlerweile für diverse grafische Anpassungsmöglichkeiten die CSS Variablen.
Kurz zu den Basics:
CSS Variablen wirken von außen nach innen.
Sprich, wenn du eine Variable in body oder :root definierst, ist der Wert auch in allen Unterelementen lesbar.
Man kann Variablen in Unterelementen aber auch überschreiben.
Außerhalb ist dann weiterhin der alte Wert gültig. Aber alle Elemente die innerhalb dieser überschriebenen Zuweisung liegen sehen dann den neuen Wert.
Nehmen wir an du hast nur einen Kalender in deinem Setup, oder willst zumindest bei allen Kalendern einen einheitlichen Header-Style.
Dann belegst du in deinem User CSS File diese Variable:
:root {
--calendar-title-font-size: 12px;
}
Damit bist du dann schon fertig.
Willst du hingegen nur bei einem Kalender einen kleinen Header und bei den restlichen nicht, darfst du den Variablenwert nur dort zuweisen, wo sie nicht auf die anderen Kalender wirkt.
Zum Beispiel über eine Klasse die du direkt diesem Kalender-Element zuweist.
User CSS File:
.calendar-small-title{
--calendar-title-font-size: 12px;
}
HTML Code:
<ftui-calendar class="calendar-small-title">
<ftui-calendar-data calendar="Calendar"></ftui-calendar-data>
</ftui-calendar>
man muss nicht unbedingt - gerade für Tests oder wenn man das nicht überall haben will - eine User CSS einbinden.
Man kann auch nur ein Style Tag in der Header der Seite angeben
Beispiel aus dem Knob Example:
<title>FTUI Example Knob</title>
<style>
#myKnob1 {
--knob-needle-color: #da3745;
}
</style>
Man kann aber auch die persönlichen Überschreibungen auch in einem Theme-File sammeln und dann der Allgemeinheit als neues Supi-Dupi-Theme zur Verfügung stellen. :D
Danke, Thyraz und setstate, ich habe das zwischenzeitlich schon selber herausbekommen, aber so zusammengefasst hilft das auch schon sehr weiter.
Aber nochwas anderes zu Deinem Kalender, hin und wieder, wenn man die Seite neu lädt bekommt man folgende Fehlermeldung:
calendar.component.js:118
TypeError: dataElement.fetch is not a
function
Und auf iOS Geräten kommt diese Meldung immer, wenn man eine Seite neu lädt:
calendar.component.js:113
TypeError: dataElement.fetch is not a
function. (In 'dataElement.fetch()',
dataElement.fetch' is undefined)
Und im Widget steht dann "No events to display"
Ok.
Das sieht so aus, als ob die calendar-data Elemente noch nicht bereit sind.
Dort soll ja die Funktion fetch() aufgerufen werden.
Muss ich mir mal anschauen.
@setstate weißt du, was da vom Lifecycle der Elemente schiefgehen kann?
Der Ablauf ist genauso wie wir das beim Chart Widget haben:
- Im Constructor von calendar hole ich mir die calendar-data Elemente
- Im ConnectedCallback von calendar rufe ich refresh() im calendar auf
- In refresh() loope ich dann über die calendar-data Elemente und rufe bei diesen fetch() auf.
Die Methode fetch() ist dann bei grossmaggul teilweise noch nicht bekannt und es knallt.
Das könnte bei Chart genauso passieren, da der Mechanismus identisch ist.
Ich bin mir nicht sicher wie der Seitenaufbau und das Initialisieren der einzelnen Komponenten abläuft.
Geht das von oben nach unten im HTML Code?
Also außere Elemente vor Inneren?
Und ConnectedCallback scheint aufgerufen zu werden sobald ein Element fertig geladen ist wie es aussieht.
Hatte gedacht, das passiert wenn alle Elemente initialisiert sind.
Ich weiß nicht ob man eher auf DOMContentLoaded lauschen sollte für den initialen Refresh?
Aber ist da sichergestellt, dass die Komponenten wirklich initialisiert sind, oder kann es sein, dass die Custom Web Components auch noch nicht fertig geladen sind?
Beim Chart passt der Ablauf.
readystatechange
DOMContentLoaded
readystatechange
pageshow
2 chart control connected
3 chart data connected
chart data connected
2 chart connected
refresh ftui-chart-1
refresh ftui-chart-2
Ich benutze das pageshow Event, um FTUI zu initialisieren. Dann werden alle ':not(:defined)' Elemente gesucht und deren Module geladen.
Dort gebe ich keine Reihenfolge vor.
Ich bin der Meinung, wenn man sichergehen will, dass eine Subkomponente vorher geladen ist, reicht es, das als import anzugeben.
Ich habe beim Chart extra ein import { FtuiChartData } from './chart-data.component.js'; reingenommen (auch schon als wir das noch nicht direkt brauchten), damit das vorher geladen und definiert werden kann.
Zitat von: setstate am 24 November 2020, 15:09:57
Ich bin der Meinung, wenn man sichergehen will, dass eine Subkomponente vorher geladen ist, reicht es, das als import anzugeben.
Top das war es. :)
@grossmaggul Update is online
@Thyraz
zunächst mal vielen Dank für die ausführlichen Informationen rund um CSS.
Ich kann die Schilderungen gut nachverfolgen, denn grundsätzlich gab es das Problem ja auch schon unter dem "alten" FTUI. Hat man in einem Widget eine widget-css-Datei geladen, dann war es im Grunde mit einer user-css-Datei schon vorbei - Überladen quasi unmöglich.
Vom Prinzip her habe ich aber ein wenig den Eindruck, dass beide Welten das gleiche und eigentlich lösbare Problem besitzen.
Aus dem Grund habe ich mich mal einfach spielerisch um eine Lösung bemüht, die für den Entwickler praktisch keinen Mehraufwand bedeutet, die Tür für die auffälligen "Typen" aber zum Glück weit auflässt.
Letztlich waren zwei zusätzliche Zeilen in calendar.component.js nötig und eine (praktisch) leere Datei - Tricksereien waren nicht notwendig.
Herausgekommen ist dann - ohne Einsatz von css-Variablen - eine Ausgabe, die unten im Screenshot zu sehen ist.
Das Unmögliche scheint also doch lösbar zu sein ...
Zitat@grossmaggul Update is online
Das ging ja fix. :)
Und gleich ein neues Problem, also ich habe eins, nicht FTUI3(vermute ich zumindest). ;)
Ich habe versucht mit folgendem Code eine Telefonliste zu basteln:
<ftui-grid-tile row="3" col="9" height="2" width="3" shape="round">
<header>Telefon</header>
<ftui-row class="size-0">
<ftui-icon path="../images/openautomation/" [name]="fritzlist:1-state | map('=>:phone_call_end_in,=> X:phone_missed_out,<=:phone_call_end_out,=> ((o)):phone_ring,=> [=]:phone_ring_in,=> O_O:phone_answering" [color]="fritlist:1-state | '=>:green,=> X:danger,<=:blue,=> ((o)):danger,=> [=]:green,=> O_O:yellow'"></ftui-icon>
<ftui-label [text]="fritzlist:1-name"></ftui-label>
<ftui-label [text]="fritzlist:1-number"></ftui-label>
<ftui-label [text]="fritzlist:1-timestamp"></ftui-label>
</ftui-row>
</ftui-grid-tile>
Leider werden nicht wie erwartet die entsprechenden Icons angezeigt sondern nur ein kleiner, roter Punkt, was mache ich da falsch?
Die Icons befinden sich wirklich dort, gebe ich einfach über "name=dingsbums_icon" ein Icon an, wird es angezeigt.
Hallo grossmaggul,
Anrufliste habe ich fertig, hängt dran.
Gruß
Eisix
rot umrahmt werden Komponenten, die einen Fehler in der Config haben. Die Sonderzeichen in der Map musst du quoten.
Sobald eines folgender Zeichen im String vorkommen, musst du den String in Quotes angeben.
[]():=.!$&?*+,#'^@
Da schon " und ' vergeben sind, habe ich ` dafür benutzt.
anstatt
=>:phone_call_end_in
musst du
`=>`:phone_call_end_in
schreiben
Für das Map benutze ich HOCON, das ist wie JSON nur ohne immer alles in Quotes angeben zu müssen
https://github.com/lightbend/config/blob/master/HOCON.md
https://hocon-playground.herokuapp.com
ZitatSobald eines folgender Zeichen im String vorkommen, musst du den String in Quotes angeben
Ich dachte es mir fast, wußte nur nicht welche Quotes ich benutzen sollte, da " und ' ja schon vergeben waren. ;D
ZitatAnrufliste habe ich fertig, hängt dran.
Ah, sehr schön, danke!
Hallo,
wie bindet man fa icons ein?
Gruß
Eisix
Viele fa Icon sind im Icon-Set mit drin. Ich habe selektiv Interessantes für Homeautomation aufgenommen.
Wenn was fehlt und es für viele interessant ist, könnte ich es noch mit aufnehmen.
Ansonsten musst du das komplette ZIP downloaden und die *.svg Files aus dem /svgs Ordner irgendwo hin kopieren. Den neuen Folder kann man dann mit dem path Attribut im ftui-icon angeben.
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Bastele gerade an meiner Lüftung.
<div class="cell">
<ftui-circlemenu direction="top-half">
<ftui-icon class="size-3"
path="../images/openautomation"
[name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_automatic, off:power-off')"
[color]="Luefter:state | map('auto:mygreen, man:mygreen, off:mygreen')"
></ftui-icon>
<ftui-button class="size-3" shape="circle" color="light" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
<ftui-icon name="power-off" color="mygreen"></ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="dark" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
<ftui-icon class="size-5" color="mygreen">1</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="medium" fill="outline" (value)="set Luefter man;setreading Luefter stufe 2">
<ftui-icon class="size-5" color="mygreen">2</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
<ftui-icon class="size-5" color="mygreen">3</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
<ftui-icon class="size-5" color="mygreen">4</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
<ftui-icon class="size-2"
path="../images/openautomation"
name="vent_ventilation_level_automatic"
color="mygreen"
></ftui-icon>
</ftui-button>
</ftui-circlemenu>
<ftui-badge
color="mygreen"
[text]="Luefter:stufe">
</ftui-badge>
</div>
Zwei Fragen:
Das Badge legt sich nicht über das circlemenue sondern wird eine Zeile tiefer gepackt, geht nicht oder habe ich einen Fehler?
Ist es möglich beim Button ein fill="solid" und ein fill="outline" übereinander zu legen? Also farbiger Hintergrund, Kreis und dann Icon oder Text?
Gruß
Eisix
Muss ich mir heute Abend live ansehen.
Riesen Danke an Alle :) Genial was ihr hier macht....!
Hat jemand eine Idee wie ich einen Apache2 Webserver konfigurieren muss, damit die svg's angezeigt werden?
Bekomme 404 Fehler beim öffnen der Page. Die Pfadangaben sind korrekt
<VirtualHost *:83>
ServerAdmin webmaster@localhost
ServerName ftui3
ServerAlias www.ftui3
DocumentRoot /var/www/ftui3
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory /var/www/ftui3>
Options -Indexes
AllowOverride All
AddType text/css .css
AddType text/javascript .js
</Directory>
<IfModule mod_dir.c>
DirectoryIndex index.php index.html index.cgi index.pl index.xhtml index.htm
</IfModule>
</VirtualHost>
Danke
Gruss
SirMarco
Mit Apache kann ich dir leider nicht helfen. Ich nutzte den lighttpd, den Pi-Hole mitbringt und habe nur einen symlink von /opt/fhem/www/ftui nach /var/www/html/ftui gesetzt. FHEMWEB ist mir auch zu langsam geworden. Mit Freezemon finde ich auch keine Ursache. Dort erscheint jeder Funktionsaufruf mit 1-2 Sekunden freeze.
Habe ein Problem mit der Formatierung oder besser ein nicht konsistentes Verhalten.
<div class="row">
<p style="text-align:center">
<ftui-icon class="size-2"
path="../images/openautomation"
[name]="Terrassentuer_WZ:state | map('open:,fts_door_slide_2w_open_lr, closed:fts_door_slide_2w')"
[color]="Terrassentuer_WZ:state | map('open:red, closed:mygreen')"></ftui-icon>
</ftui-icon>Terrassentür
</p>
.
.
.
</div>
platziert Terrassentür neben das Icon
<div class="row">
<p style="text-align:center">
<ftui-button (value)="GaragenMotor_unten" states="A0" fill="">
<ftui-icon class="size-2"
path="../images/openautomation"
[name]="Garage_unten:state | map('open:fts_garage_door_10, closed:fts_garage_door_100')"
[color]="Garage_unten:state | map('closed:mygreen,open:red')"
></ftui-icon>
</ftui-button>unten
</p>
.
.
.
</div>
platziert unten unter dem Icon.
Beide Texte sollten zentral unter dem Icon stehen. Was mit einem zusätzlichen "column" auch funktioniert.
<div class="column cell"
<p style="text-align:center">
<ftui-icon class="size-2"
path="../images/openautomation"
[name]="Terrassentuer_WZ:state | map('open:,fts_door_slide_2w_open_lr, closed:fts_door_slide_2w')"
[color]="Terrassentuer_WZ:state | map('open:danger, closed:mygreen')"></ftui-icon>
</ftui-icon>Terrassentür
</p>
</div>
Gruß
Eisix
Nur als Anmerkung, soweit ich das mitbekommen habe gibt es jetzt eine <ftui-column> und auch eine <ftui-row> wenn mich nicht alles täuscht.
genau
<ftui-row>
<ftui-label>links</ftui-label>
<ftui-label>rechts</ftui-label>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>oben</ftui-label>
<ftui-label>unten</ftui-label>
</ftui-column>
</ftui-row>
Danke, nur leider geht es damit nicht :-\
<ftui-row>
<ftui-column>
<p style="text-align:center">
<ftui-icon class="size-2"
path="../images/openautomation"
[name]="Terrassentuer_WZ:state | map('open:,fts_door_slide_2w_open_lr, closed:fts_door_slide_2w')"
[color]="Terrassentuer_WZ:state | map('open:danger, closed:mygreen')"></ftui-icon>
</ftui-icon>Terrassentür
</p>
</ftui-column>
</ftui-row>
Ich will eigentlich nur eine Reihe von Icons mit einer Beschriftung mittig darunter.
Wo ist mein Fehler?
Gruß
Eisix
ich würd ma probieren
<ftui-icon>Terrassentür</ftui-icon>
irgenwie ist das tag </ftui-icon> zuviel in deinen Zeilen es fehlt das open <ftui-icon>
grüße
torte
PS: ü in HTML ist nicht so gut schreibt man in HTML eigentlich so ü
Zitat von: Eisix am 25 November 2020, 19:37:17
Ich will eigentlich nur eine Reihe von Icons mit einer Beschriftung mittig darunter.
<body>
<ftui-grid base-width="100" base-height="90">
<ftui-grid-tile row="1" col="1" height="2" width="3">
<header>COLUMNS</header>
<ftui-row>
<ftui-column space="between">
<ftui-icon class="size-2"
path="../images/openautomation"
name="fts_garage_door_10">
</ftui-icon>
<ftui-label>between</ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon class="size-2"
path="../images/openautomation"
name="fts_garage_door_30"
color="green">
</ftui-icon>
<ftui-label>default</ftui-label>
</ftui-column>
<ftui-column space="evenly">
<ftui-icon class="size-2"
path="../images/openautomation"
name="fts_garage_door_60"
color="red">
</ftui-icon>
<ftui-label>evenly</ftui-label>
</ftui-column>
<ftui-column height="80px">
<ftui-icon class="size-2"
path="../images/openautomation"
name="fts_garage_door_90"
color="brown">
</ftui-icon>
<ftui-label>height-80</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
</ftui-grid>
</body>
Das space-Attribute habe ich gerade erst eingebaut.
Zitat von: Eisix am 25 November 2020, 13:49:51
Das Badge legt sich nicht über das circlemenue sondern wird eine Zeile tiefer gepackt, geht nicht oder habe ich einen Fehler?
es fehlte noch eine ftui-circlemenu ~ ftui-badge CSS-Regel ähnlich zu ftui-icon ~ ftui-badge (Update ist auf Github)
Eine kurze Zwischenfrage, kann der knob auch 360°?
Zitat von: grossmaggul am 25 November 2020, 23:34:37
Eine kurze Zwischenfrage, kann der knob auch 360°?
ja
<ftui-grid-tile row="4" col="1" height="1" width="1">
<header>360° start right</header>
<ftui-knob [(value)]="dummy1" start-angle="0" end-angle="359" offset-y="0"></ftui-knob>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="2" height="1" width="1">
<header>360° start left</header>
<ftui-knob [(value)]="dummy1" start-angle="-179" end-angle="180" offset-y="0"></ftui-knob>
</ftui-grid-tile>
dicker geht auch
<ftui-grid-tile row="4" col="3" height="1" width="1">
<header>360°</header>
<ftui-knob [(value)]="dummy1" start-angle="-179" end-angle="180" offset-y="0" stroke-width="40" ></ftui-knob>
</ftui-grid-tile>
Ah, sehr schön, danke!
@setstate
hab gerade den aktuellen Stand gezogen. Mir ist noch aufgefallen das
bei weather.component.js die Auswahlmöglichkeit für die Iconsets fehlt.
Sollte das nicht so in der Art funktionieren?
<ftui-weather [iconSet]="kleinklima" [condition]="Wetter:fc0_weatherDay"></ftui-weather>
Hatte es vorher hardcoded in der weather.component
Gruß
Eisix
Das ist drin.
properties: default
provider: 'proplanta',
iconSet: 'meteocons',
Änderbar per Attribute:
<ftui-weather icon-set="kleinklima" provider="proplanta" [condition]="Wetter:fc0_weatherDay"></ftui-weather>
In der Map gibt es aktuell nur:
- proplanta > meteocons
- proplanta > kleinklima
kleinklima sucht die Icons unter ./icons/weather/kleinklima/*
Das wird aber nicht mitgeliefert und muss sich jeder selber dorthin kopieren
Vielleicht kann es ja jemand gebrauchen, mein Machwerk einer Windrose:
<ftui-grid-tile row="7" col="2" height="2" width="2" shape="round">
<header>Wind</header>
<ftui-row class="w-60 h-80">
<ftui-label text="W"></ftui-label>
<ftui-column>
<ftui-label text="N"></ftui-label>
<ftui-knob [(value)]="proplanta:windDir" min="0" max="360" start-angle="-90" end-angle="270" offset-y="0" height="80" width="80" has-scale has-needle></ftui-knob>
<ftui-label text="S"></ftui-label>
</ftui-column>
<ftui-label text="O"></ftui-label>
</ftui-row>
</ftui-grid-tile>
Hallo zusammen
Hat jemand Lust mit mir zusammen ein Slideout Navigation Menu in V3 einzubauen?
Finde das Mega, aber bin aber mit dem einbinden noch nicht so weit vom wissen ;-)
https://slideout.js.org/ (https://slideout.js.org/)
Grüsse
Hallo zusammen,
gibt es schon die Möglichkeit ein icon etc. per hide verschwinden zu lassen?
grüße
Zitat von: torte am 26 November 2020, 14:30:11
Hallo zusammen,
gibt es schon die Möglichkeit ein icon etc. per hide verschwinden zu lassen?
grüße
ja
<ftui-icon name="exclamation-triangle"
[hidden]="ftuitest | map('on:false, off:true')">
</ftui-icon>
Moin zusammen,
das ist super was hier wieder auf die Beine gestellt wird, endlich schneller Bildaufbau!
Ich bin schon sehr frustriert mit der Speed von FTUI 2.
Hier mein erster Versuch im Anhang.
Ich habe noch Fragen (will nicht hetzen):
- Ist es möglich beim Label die Anzahl Nachkommastellen zu definieren?
- Kommt das Popup Modul irgendwann (Das vermisse ich derzeit schmerzlich)?
- Ich bekomme derzeit nicht hin mein Kamerabild (bewegt von motionEye) via Image Modul anzeigen zulassen. Hat das einer von euch schon geschafft?
- Wie kann ich die Grundfarben (Iconfarbe, Schriftfarbe, Hintergrund) ändern?
- Ist es möglich die Rahmen zwischen den "ftui-grid-tile" zu verkleinern bzw. ganz zu entfernen?
Und nochmals vielen Dank für eure Mühen!
Grüße
Olli
Zitat von: octek0815 am 26 November 2020, 15:31:34
- Kommt das Popup Modul irgendwann (Das vermisse ich derzeit schmerzlich)?
ja, werde ich auch noch bauen
Zitat von: octek0815 am 26 November 2020, 15:31:34
- Wie kann ich die Grundfarben (Iconfarbe, Schriftfarbe, Hintergrund) ändern?
mit dem color Attribute
Geht bei ftui-grid-tile, ftui-icon, ftui-label, ftui-column, ftui-row, usw.
<ftui-grid-tile row="3" col="1" height="1" width="1"
[color]="ftuitest | map('0=dark,70=medium,100=light')">
</ftui-grid-tile>
Welcher Farbwert dahinter steht, ist im Theme-css definiert. ftui-theme.css und bright-theme.css. Du könntest dein eigenes Theme anlegen.
Da gibt es aber bestimmt noch viele Baustellen, wichtige Teile zur Individualisierung der Komponenten als Variable im Theme verfügbar zu haben.
Zitat von: octek0815 am 26 November 2020, 15:31:34
- Ist es möglich die Rahmen zwischen den "ftui-grid-tile" zu verkleinern bzw. ganz zu entfernen?
ja, mit margin
<ftui-grid base-width="150" base-height="120" margin="1">Zitat von: octek0815 am 26 November 2020, 15:31:34
- Ist es möglich beim Label die Anzahl Nachkommastellen zu definieren?
ja, mit round()
<ftui-label [text]="FritzBox:box_rateDown | round(1)"></ftui-label>
Hallo setstate,
vielen Dank für Deine schelle Antwort.
Das mit round(1) z.B. funktioniert nur bedingt.
Wenn die gelieferte Temperatur z.B. genau 21 Grad beträgt, wird mit round(1) leider auch nur 21 Grad angezeigt.
Ich hätte aber gern das dann mit round(1) 21.0 Grad zurück geliefert wird.
Ist das umsetzbar? In FTUI 2 war das so.
Anbei ein Beispiel.
Danke und Grüße
Olli
Zitat von: setstate am 26 November 2020, 14:38:45
ja
<ftui-icon name="exclamation-triangle"
[hidden]="ftuitest | map('on:false, off:true')">
</ftui-icon>
Wenn aber hidden angewendet wird, wird der Platz aber in einer Row trotzdem weiter belegt und die Icons rücken nicht zusammen.
Kann man das Verhalten verändern?
Gut fände ich wenn man eine "unit" beim Label angeben könnte. ::)
Zitat von: grossmaggul am 26 November 2020, 16:54:25
Gut fände ich wenn man eine "unit" beim Label angeben könnte. ::)
Moin,
das geht wie folgt (Beispiel)...
Pretext:
<span slot="start">Temperatur:</span>
Posttext:
<span slot="end">°C</span>
Kannst Du auch mit style und class dann noch in Größe und Form anpassen.
Grüße
Olli
Zitat von: octek0815 am 26 November 2020, 16:37:21
Wenn aber hidden angewendet wird, wird der Platz aber in einer Row trotzdem weiter belegt und die Icons rücken nicht zusammen.
Kann man das Verhalten verändern?
Müsste aber, ich nehme extra display: none; anstatt visibility: hidden;
Ist noch etwas anderes in der Row? Evtl. die Row mit hidden=. ausblenden
Zitatdas geht wie folgt (Beispiel)...
Danke, aber viel zuviel Tipperei. ;)
Zitat von: setstate am 26 November 2020, 17:21:15
Müsste aber, ich nehme extra display: none; anstatt visibility: hidden;
Ist noch etwas anderes in der Row? Evtl. die Row mit hidden=. ausblenden
es liegt vermutlich am "cell" was ich darum gepackt habe.
Wie kann ich mehrere Icons (zum Teil mit Badge) in einer Reihe zentriert platzieren, so das wenn ein Icon ausgeblendet wird, die übrigen zusammenrücken.
In FTUI 2 war das in einer "li" mit "class="center" recht einfach zu bewerkstelligen.
Zitat von: grossmaggul am 26 November 2020, 17:42:20
Danke, aber viel zuviel Tipperei. ;)
ja, war vorher einfacher, kommt aber bestimmt noch.
Wir sollten nicht vergessen das hier ist noch "beta", aber dafür schon Top!
Da hilft im Moment nur Copy/Paste...
ZitatWir sollten nicht vergessen das hier ist noch "beta", aber dafür schon Top!
Das vergesse ich nicht und ja, das bisherige Ergebnis ist wirklich top.
Ich mache auch nur Vorschläge und habe keinerlei Forderungen(wäre ja auch noch schöner ;)), wenn's kommt freut's mich, wenn nicht, freue ich mich trotzdem. ;D
Zitat von: grossmaggul am 26 November 2020, 18:08:23
wenn's kommt freut's mich. ;D
Dann würde ich mal in setstates Github Repository vorbei schauen. ;)
Dort hab ich gerade was entdeckt...
Hab mal eine neue Testversion von der Calendar Komponente hochgeladen.
Die unterstützt neben listMonth und listWeek nun auch dayGridMonth beim Attribut "view".
Dieser Monatsansicht hab ich 3 verschiedene Ansichten spendiert, je nachdem wie breit das Parent-Element ist.
Bisher ist das ein Automatismus. Eine Property zum direkten Wählen einer der Ansichten kommt noch.
Die Ansichten sind
- Schmal: Nur Punkte für Events
- Mittel: Event-Ttitel sind sichtbar
- Breit: Startzeit und Event-Titel sind sichtbar
Wenn man einen Parent ohne fixe Höhe hat,
Berechnet der Kalender selbst die optimale Höhe für sich.
Gibt man eine Höhe vor, versucht der Kalender sich einzupassen.
Klappt dies wegen zuvielen Terminen an manchen Tagen bei Ansicht Mittel oder Breit nicht, werden nicht alle Events dargesellt und es gibt ein "More" Button der ein Popup mit allen Events des Tages anzeigt.
Wird die Höhe selbst dafür zu klein, wird der Kalender scrollbar im Parent Element.
Die Höhe kann auf verschiedene Wege festgelegt werden:
- Standard bei Parent ohne festgelegte Höhe ist, dass der Calendar selbst die Höhe festlegt.
- Dies kann über das Attribut height überschrieben werden.
- Ist der Calendar in einen Parent mit fixer Höhe eingebunden (z.B. non-responsive Grid-Tile), dann passt er sich von der Größe ein. Das height Attribut muss nicht gesetzt werden.
- Ist die Höhe nicht ausreichend, ist der Kalender scrollbar.
Anbei ein paar Bilder um sich das besser vorstellen zu können:
Jungs, Ihr seid ganz schön fix.;)
Thyraz, sehr schick!
ZitatDort hab ich gerade was entdeckt...
Ich auch. ;D
Mir ist aufgefallen, daß bei manchen Beispielseiten im git nur eine schwarze Seite zu sehen ist und bei allen Seiten kommt eine Fehlermeldung.
Zitat von: grossmaggul am 26 November 2020, 23:50:36
Mir ist aufgefallen, daß bei manchen Beispielseiten im git nur eine schwarze Seite zu sehen ist und bei allen Seiten kommt eine Fehlermeldung.
das könnte an den
<!-- when serving the page with other web servers, e.g. lighttpd -->
<meta name="fhemweb_url" content="http://fhem.local:8083/fhem/">
liegen. Lösch das mal raus.
Wie kann ich das denn rauslöschen, wenn es um die Seiten im github geht?
Also mir wird der Fehler angezeigt wenn ich die im Bild gezeigten Seiten aufrufe.
ach das. Das ist, weil versucht wird, FHEM zu erreichen. Das schaue ich mir an und versuche den Demo-Mode zu erkennen.
Hallo
Kann mir jemand einen Tip geben, wie ich "Home" direkt unter das Icon schieben kann, ohne das so ein grosser Abstand entsteht?
<ftui-grid-tile row="1" col="1" height="8" width="1" shape="round">
<div class="column">
<ftui-tab view="View1" fill="solid" shape="circle" active><ftui-icon name="home1"></ftui-icon></ftui-tab>
<ftui-label class="size-1">HOME</ftui-label>
<ftui-tab view="View2" fill="solid" shape="circle"><ftui-icon name="user"></ftui-icon></ftui-tab>
<ftui-tab view="View3" fill="solid" shape="circle"><ftui-icon name="music"></ftui-icon></ftui-tab>
<ftui-tab view="View4" fill="solid" shape="circle"><ftui-icon name="music"></ftui-icon></ftui-tab>
<ftui-tab view="View5" fill="solid" shape="circle"><ftui-icon name="music"></ftui-icon></ftui-tab>
<ftui-tab view="View6" fill="solid" shape="circle"><ftui-icon name="music"></ftui-icon></ftui-tab>
</div>
</ftui-grid-tile>
Danke vielmals und Gruss Eppi
Zitat von: eppi am 28 November 2020, 08:06:29
Kann mir jemand einen Tip geben, wie ich "Home" direkt unter das Icon schieben kann, ohne das so ein grosser Abstand entsteht?
Mit
direction="vertical"
<ftui-tab view="View1" direction="vertical" active>
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="View2" direction="vertical">
<ftui-icon name="music"></ftui-icon>
<ftui-label>Music</ftui-label>
</ftui-tab>
Hallo,
ich habe gerade mal mit den Transparenzen rumgespielt, dabei ist mir aufgefallen, daß sich die Transparenz immer auf den gesamten Inhalt eine Tiles auswirkt, also beim Menü z.B. auch auf die Icons. Wäre es nicht sinnvoller, wenn man bei <ftui-grid-tile< die Transparenz setzt, daß dann nur das Tile die Transparenz annehmen würde, zumindest bei FTUI2 war das so.
Vielleicht mache ich aber auch was falsch, Beispiel Menü:
<ftui-grid-tile row="1" col="1" height="8" width="1" shape="round" class="half-transparent">
<ftui-column class="size-3">
<ftui-tab view="Home" active><ftui-icon name="home1"></ftui-icon></ftui-tab>
<ftui-tab view="Wetter"><ftui-icon name="weather"></ftui-icon></ftui-tab>
<ftui-tab view="Licht"><ftui-icon name="lightbulb"></ftui-icon></ftui-tab>
<ftui-tab view="View4"><ftui-icon name="coffee"></ftui-icon></ftui-tab>
<ftui-tab view="View5"><ftui-icon name="music"></ftui-icon></ftui-tab>
</ftui-column>
</ftui-grid-tile>
Ich hoffe ich konnte mich verständlich machen.
transparent ist was anderes als translucent.
Ich habe jetzt color="translucent" ergänzt.
Aber mit den Bezeichnungen bin ich auch noch nicht zufrieden.
Jetzt:
- transparent: nix
- translucent: durchscheinend
Vielleicht so:
- none: nix
- transparent: durchscheinend
Oder so:
- clear: nix
- transparent: durchscheinend
Siehe examples/tab-trans.html
Einige Sonderanpassungen habe ich direkt in den Header geschrieben. Umfangreichere Anpassungen könnte man als Theme-File sammeln.
<style>
body {
background-image: url("https://hdhintergrundbilder.net/image/natur/1151/gebirge-nachthimmel-sterne-milchstrase.jpg");
--tab-color: var(--dark-color);
--tab-active-color: var(--medium-color);
--tab-contrast-color: var(--light-color);
}
</style>
https://knowthelist.github.io/ftui/examples/tab-trans.html
Zitat von: setstate am 25 November 2020, 14:47:53
Mit Apache kann ich dir leider nicht helfen. Ich nutzte den lighttpd, den Pi-Hole mitbringt und habe nur einen symlink von /opt/fhem/www/ftui nach /var/www/html/ftui gesetzt. FHEMWEB ist mir auch zu langsam geworden. Mit Freezemon finde ich auch keine Ursache. Dort erscheint jeder Funktionsaufruf mit 1-2 Sekunden freeze.
Hallo setstate,
wie hast Du das eingerichtet? Wollte schauen ob ich FTUI 2 noch ein wenig beschleunigen kann, vor ich komplett auf 3 umstelle.
Ich habe lighttpd installiert und ein link erzeugt, aber die Seite wird nicht richtig aus geliefert (sowhl FTUI 2 als auch 3).
Hast ein Tipp?
Grüße
Olli
Mmmm,
Rechte kopieren?
sudo chmod -R --reference=/var/www/html/admin /var/www/html/ftui
Gibt es Fehlermeldungen?
setstate, ich glaube wir reden aneinander vorbei. :)
Ich habe mal zwei Bilder angehängt, das Erste zeigt FTUI3 mit class="half-transparent", das Zweite zeigt FTUI2 mit class="semitransparent"*.
Wie man deutlich sieht, ist bei FTUI2 nur der Hintergrund transluzent, der Vordergrund (die Icons) bleiben undurchscheinend.
Bei FTUI3 sind aber alle Elemente transparent, Hintergrund und Icons und "color="translucent" verhält sich ebenso.
*semitransparent (also eigentlich transluzent) hatte ich selber definiert:
.semitransparent {
background: rgba(0, 0, 0, 0.4) !important;
}
Ich hoffe es wird jetzt klarer, was ich meine.
Zitat von: setstate am 28 November 2020, 14:20:42
Mmmm,
Rechte kopieren?
sudo chmod -R --reference=/var/www/html/admin /var/www/html/ftui
Gibt es Fehlermeldungen?
Habe mit FTUI 2.7.15 getestet und bekomme die folgende Meldung:
Zitat von: octek0815 am 28 November 2020, 14:52:17
Habe mit FTUI 2.7.15 getestet und bekomme die folgende Meldung:
Dann sind die Seiten aber schon ausgeliefert und du bekommst keine Verbindung zu FHEM. Das ist dann Schritt zwei.
Hast du die FHEM URL angegeben?
<!-- when serving the page with other web servers, e.g. lighttpd -->
<meta name="fhemweb_url" content="http://fhem.local:8083/fhem/">
Zitat von: setstate am 28 November 2020, 14:54:30
Hast du die FHEM URL angegeben?
<!-- when serving the page with other web servers, e.g. lighttpd -->
<meta name="fhemweb_url" content="http://fhem.local:8083/fhem/">
Jetzt ja, und bekomme nun folgendes:
Zitat von: octek0815 am 28 November 2020, 15:20:47
Jetzt ja, und bekomme nun folgendes:
Im FHEMWEB musst du das CORS Attribute auf 1 setzen.
Zitat von: octek0815 am 28 November 2020, 15:20:47
Jetzt ja, und bekomme nun folgendes:
Habe nun selber geschafft. Musste CORS auf 1 setzen.
Zitat von: octek0815 am 28 November 2020, 15:28:06
Habe nun selber geschafft. Musste CORS auf 1 setzen.
Oh, hatte dein Post jetzt erst gesehen.
Vielen dank für deine Hilfe!
@setstate
Beim letzten PR habe ich wohl übersehen, dass der übernommene Vorschlag auch im README-File auftauchen sollte, ansonsten verliert man schnell den Überblick. Wäre das noch einen PR wert (fix würde ich auch aufnehmen) oder machst Du das bei Gelegenheit lieber selbst ?
Der geplante Update-Weg läuft ja vermutlich wieder über FHEM. Wenn ja, würdest Du neben dem UPD-Befehl auch den CRE-Befehl unterstützen?
Hallo,
ich wollte sowas wie einen Spinner von FTUI2 realisieren
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value-0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:minus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:blue')"
></ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label
[text]="Heizung.Status_WZ:TempMan"
[color]="Heizung.Status_WZ:TempMan | map('5:blue, 20:mygreen, 23:red')"
class="size-1">
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:plus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:red')"
></ftui-icon>
</ftui-button>
</ftui-cell>
Jemand einen Tip für mich wie ich die Werte übergebe
(value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
Gruß
Eisix
Mal wieder Zeit dumme Fragen zu stellen. ;)
1.) Zuerst möchte ich nochmal wegen der Transparenz/Transluzenz auf mein Posting (https://forum.fhem.de/index.php/topic,115259.msg1105246.html#msg1105246) hinweisen, das ist wohl untergegangen.
2.) Dann würde ich gerne eine Batterielevelanzeige mit verschiedenen Icons realisieren. Bei meinem Homematic Heizungsthermostaten wird das Level in Dezimalzahlen geliefert. Jetzt habe ich versucht das so zu lösen:
<ftui-icon [name]="wz.heizkoerper:batteryLevel | map('3 | 2.[89]:battery, 2.[67]:battery-3, 2.[345]:battery-2, 2.[012]:battery-1, 2:battery-0')"
[color]="wz.heizkoerper:batteryLevel | map('3:green, 2.[6789]:secondary, 2.[345]:success, 2.[012]:warning, 2:danger')">
</ftui-icon>
Das funktioniert leider nicht, ich vermute wegen der Regex oder man muss es quoten?
3.) setstate war wieder fleißig, wie ich eben gesehen habe und hat uns ein Popup beschert. ;D
Da sage ich schonmal artig vielen Dank dafür!
Natürlich habe ich gleich eine Frage dazu, lässt sich das Popup nur mit Icons oder Images auslösen?
Gut wäre nämlich auch, wenn man z.B. auch Gridteile anklicken könnte. Als Beispiel, man könnte dann eine kurze Telefonliste anklicken und lässt sich mehr Einträge im Popup anzeigen.
Ja, habe ich auch schon gesehen, bin schon fleißig am umbauen.
Zu Popup fehlt mir auch noch ein Trigger (z.B. von einem FHEM Device) und ein Close-Timer dann wäre es perfekt.
fix() ist nun auch da, um die Anzahl der Nachkommastellen zu definieren.
Auch vom mir ein herzliches Dankeschön!
@grossmaggul
tab-trans hast du gesehen.
Gruß
Eisix
Zitattab-trans hast du gesehen
Nein, bisher nicht, wo finde ich das?
Zitat von: grossmaggul am 30 November 2020, 15:11:26
Nein, bisher nicht, wo finde ich das?
https://knowthelist.github.io/ftui/examples/tab-trans.html
Achso das, doch das habe ich gesehen, ist aber nicht das was ich meine. Genaueres steht in dem Post auf der vorigen Seiten von mir.
Ich habe mir jetzt in meiner User CSS eine eigene Klasse angelegt, die das macht was ich mir vorstelle.
.semitransparent {
background: rgba(0, 0, 0, 0.4) !important;
}
Zitat von: grossmaggul am 30 November 2020, 14:16:08
2.) Dann würde ich gerne eine Batterielevelanzeige mit verschiedenen Icons realisieren. Bei meinem Homematic Heizungsthermostaten wird das Level in Dezimalzahlen geliefert. Jetzt habe ich versucht das so zu lösen:
<ftui-icon [name]="wz.heizkoerper:batteryLevel | map('3 | 2.[89]:battery, 2.[67]:battery-3, 2.[345]:battery-2, 2.[012]:battery-1, 2:battery-0')"
[color]="wz.heizkoerper:batteryLevel | map('3:green, 2.[6789]:secondary, 2.[345]:success, 2.[012]:warning, 2:danger')">
</ftui-icon>
Das funktioniert leider nicht, ich vermute wegen der Regex oder man muss es quoten?
Was für Zahlen liefert das Thermostat denn als Batteriewert 2.0 bis 3.0? ???
Das Mapping klappt doch normal so, dass man einfach Zwischenwerte angibt ab dem der Wert gilt bis zum nächsten angegebenen Wert.
Siehe Beispiel von setState:
Zitat
<ftui-icon name="battery-0" color="light"
[name]="ftuitest | map('`.*`:battery-0, 25: battery-1, 50:battery-2, 75: battery-3, 100: battery')"
[color]="ftuitest | map('0:danger, 50:warning, 75: success')">
</ftui-icon>
Das was du da mit eckigen Klammern versuchst ist daher meiner Meinung nach unnötig.
Zitat von: grossmaggul am 30 November 2020, 15:39:01
Achso das, doch das habe ich gesehen, ist aber nicht das was ich meine. Genaueres steht in dem Post auf der vorigen Seiten von mir.
Ich habe mir jetzt in meiner User CSS eine eigene Klasse angelegt, die das macht was ich mir vorstelle.
.semitransparent {
background: rgba(0, 0, 0, 0.4) !important;
}
Zitat von: grossmaggul am 30 November 2020, 15:39:01
Wie man deutlich sieht, ist bei FTUI2 nur der Hintergrund transluzent, der Vordergrund (die Icons) bleiben undurchscheinend.
Bei FTUI3 sind aber alle Elemente transparent, Hintergrund und Icons und "color="translucent" verhält sich ebenso.
Bei dem verlinkten Beispiel von tab-trans ist der Tab-Content bei mir aber undurchsichtig.
Oder stört hier der Blur-Effekt?
Solche RegEx Ausdrücke muss man in `setzen.
[name]="wz.heizkoerper:batteryLevel | map('`3 | 2.[89]`:battery, `2.[67]`:battery-3, `2.[345]`:battery-2, `2.[012]`:battery-1, `2`:battery-0')"
nur numerisch würde es so gehen
[name]="wz.heizkoerper:batteryLevel | map('3:battery, 2.7:battery-3, 2.5:battery-2, 2.2:battery-1, 2:battery-0')"
Da es ja auf Weihnachten zugeht schreibe ich mal meine unvollständige Wunschliste ::)
- popup über reading auslösen: z.B. es klingelt und das Kamerabild der Haustür wird eingeblendet
- spinner widget oder ein Beispiel wie man es aus bestehenden Komponenten zusammenbauen kann.
- Medialist widget
Danke nochmal für euere Arbeit!
Gruß
Eisix
ZitatSolche RegEx Ausdrücke muss man in `setzen.
Das war mir ja bekannt, klappte aber irgendwie nicht, vermutlich irgendwo ein Tippfehler.
Zitatdass man einfach Zwischenwerte angibt ab dem der Wert gilt bis zum nächsten angegebenen Wert.
O.K., das war mir nicht klar, dann isses ja einfach. ;D
ZitatBei dem verlinkten Beispiel von tab-trans ist der Tab-Content bei mir aber undurchsichtig.
Ja, das ist schon richtig, aber diese Opaleszenz(das ist vermutlich der Blur Effekt) des Hintergrundes gefällt mir nicht, das ist mir zu hell.
Ich habe das mit dem Batterie Level jetzt mal geändert, aber irgendwie will es immer noch nicht so wie ich mir das vorstelle.
[name]="wz.heizkoerper:batteryLevel | map('3:battery, 2.7:battery-3, 2.5:battery-2, 2.2:battery-1, 2:battery-0')"
Trage ich das so ein, wird mir schon das Batteriesymbol "battery-3" angezeigt, obwohl der Level der Batterie erst bei 2.9 liegt, müsste das nicht erst eintreten, wenn die Batterie ein Level von 2.7 erreicht hat? Oder verstehe ich da mal wieder was nicht?
Kann mir jemand einen Tip geben wie ich beim Chart einen lp Abfrage hinkriege und die offset Geschichte im columspec
FTUI2
<div data-type="chart"
data-logdevice='["logdb","lp","lp","logdb"]'
data-columnspec='["Schildis_Temp:temperature:::","FileLog:Schildis_TempMin,offset=60*60*24:4:Wetter.fc1_tempMin::","ConstY:4","Sensor_aussen:CleanTemp:::"]'
data-logfile = "-"
data-style='["ftui l4","ftui l6","ftui l2","ftui l0fill"]'
data-ptype='["lines","lines","lines","lines"]'
data-uaxis='["primary","primary","primary","primary"]'
data-legend='["Schildkröten", "morgen", "kritisch", "außen"]'
data-yunit="°C"
Gruß
Eisix
Super mit dem Popup, jetzt müsste nur noch das Popup geschlossen werden, sobald der Button gedrückt wurde ;)
Gruss Eppi
Zitat von: grossmaggul am 30 November 2020, 16:38:11
Ich habe das mit dem Batterie Level jetzt mal geändert, aber irgendwie will es immer noch nicht so wie ich mir das vorstelle.
[name]="wz.heizkoerper:batteryLevel | map('3:battery, 2.7:battery-3, 2.5:battery-2, 2.2:battery-1, 2:battery-0')"
Trage ich das so ein, wird mir schon das Batteriesymbol "battery-3" angezeigt, obwohl der Level der Batterie erst bei 2.9 liegt, müsste das nicht erst eintreten, wenn die Batterie ein Level von 2.7 erreicht hat? Oder verstehe ich da mal wieder was nicht?
setstates Beispiele in den Examples sind andersrum sortiert und dann wirds evtl. klarer:
[name]="wz.heizkoerper:batteryLevel | map('2:battery-0, 2.2:battery-1, 2.5:battery-2, 2.7:battery-3, 3:battery')"
Ich würde das dann so (ungetestet) interpretieren:
von 2.7 aufwärts wird
battery-3 angezeigt, ab 3.0 dann
battery.
Hoffe das stimmt, was ich erzähle. :P
@Thyraz
Sollte so funktionieren wie du sagtes.
Bei meinem color mapping funktioniert es jedenfalls genau so. Getestet.
<ftui-label
[text]="EnO_4BS:temperature"
[color]="EnO_4BS:temperature | map('5:blue, 20:mygreen, 23:red')"
class="size-5"><span slot="end">°C</span>
</ftui-label>
Und bei meiner Zisterne geht es auch. Getestet
<ftui-row>
<ftui-icon class="size-3"
path="../images/openautomation"
[name]="Zisterne:Percent | map('0:zisterne_00, 10:zisterne_10, 20:zisterne_20, 30:zisterne_30, 40:zisterne_40, 50:zisterne_50, 60:zisterne_60, 70:zisterne_70, 80:zisterne_80, 90:zisterne_90, 100:zisterne_100')">
</ftui-icon>
<ftui-column>
<ftui-label [text]="Zisterne:payload_measure_content"><span slot="end">l</span></ftui-label>
</ftui-column>
</ftui-row>
Gruß
Eisix
Noch eine Frage:
FTUI2 code Schnipsel
data-background-color="Heizung_WZ:stateColor"
Über die data-background-color lasse ich mir da den Heizungszustand an/aus anzeigen. ist sowas auch in FTUI3 zu realisieren?
Gruß
Eisix
ZitatSollte so funktionieren wie du sagtes.
Tut's bei mir aber nicht, hat ja möglicherweise etwas mit den Dezimalwerten zu tun.
Zitat von: Eisix am 30 November 2020, 17:10:10
Kann mir jemand einen Tip geben wie ich beim Chart einen lp Abfrage hinkriege und die offset Geschichte im columspec
FTUI2
<div data-type="chart"
data-logdevice='["logdb","lp","lp","logdb"]'
data-columnspec='["Schildis_Temp:temperature:::","FileLog:Schildis_TempMin,offset=60*60*24:4:Wetter.fc1_tempMin::","ConstY:4","Sensor_aussen:CleanTemp:::"]'
data-logfile = "-"
data-style='["ftui l4","ftui l6","ftui l2","ftui l0fill"]'
data-ptype='["lines","lines","lines","lines"]'
data-uaxis='["primary","primary","primary","primary"]'
data-legend='["Schildkröten", "morgen", "kritisch", "außen"]'
data-yunit="°C"
Gruß
Eisix
Bin nicht soooo fit mit LogProxy...
Das hier funktioniert bei mir mal allgemein zum Abruf über LogProxy ohne irgendwelche Änderungen an den Daten:
<ftui-chart-data label="Test" log="DeinLogProxy" file="-" spec="DbLog:DeinDBLogDevice:Thermometer02:temperature"></ftui-chart-data>
Vielleicht hilft das schon um den Aufbau zu erkennen wenn du weißt wie du das bei einem normalen FHEM Plot machen müsstest?
Wenn ich die Doku recht verstehe, müsste es so gehen:
<ftui-chart-data label="Test" log="DeinLogProxy" file="-" spec="DbLog:DeinDBLogDevice,offset=60*60*24:Thermometer02:temperature"></ftui-chart-data>
Bei FileLog bin ich hingegen wieder raus, das habe ich nie genutzt.
Aber da du ja scheinbar beides verwendest, kannst du das Beispiel ja evtl. recht einfach konvertieren.
Zitat von: grossmaggul am 30 November 2020, 16:38:11
Ich habe das mit dem Batterie Level jetzt mal geändert, aber irgendwie will es immer noch nicht so wie ich mir das vorstelle.
[name]="wz.heizkoerper:batteryLevel | map('3:battery, 2.7:battery-3, 2.5:battery-2, 2.2:battery-1, 2:battery-0')"
Trage ich das so ein, wird mir schon das Batteriesymbol "battery-3" angezeigt, obwohl der Level der Batterie erst bei 2.9 liegt, müsste das nicht erst eintreten, wenn die Batterie ein Level von 2.7 erreicht hat? Oder verstehe ich da mal wieder was nicht?
Das Map erzeugt diese Bereiche
2-2.1: battery-0
2.2-2.4: battery-1
2.5-2.6: battery-2
2.7-2.9: battery-3
3.0-~: battery
Bei meinem Homatic Thermostat tut es so
<ftui-cell>
<ftui-icon [name]="HM_22A1DB:batteryLevel| map('3:battery, 2.7:battery-3, 2.5:battery-2, 2.2:battery-1, 2:battery-0')"></ftui-icon>
<ftui-label [text]="HM_22A1DB:batteryLevel"></ftui-label>
</ftui-cell>
ZitatDas Map erzeugt diese Bereiche
2-2.1: battery-0
2.2-2.4: battery-1
2.5-2.6: battery-2
2.7-2.9: battery-3
3.0-~: battery
Ah, o.k., ich habe das falsch verstanden und zwar so:
3-2.8: battery
2.7-2.6: battery-3
2.5-2.3: battery-2
2.2-2.1: battery-1
2-0: battery-0
Danke für die Aufklärung
Zitat von: eppi am 30 November 2020, 18:39:18
Super mit dem Popup, jetzt müsste nur noch das Popup geschlossen werden, sobald der Button gedrückt wurde ;)
Gruss Eppi
Das geht jetzt.
Man setzt einfach dem Schließer-Element das Attribute popup-close
<ftui-button popup-close>close</ftui-button>Siehe: https://knowthelist.github.io/ftui/examples/popup.html
Zitat von: Eisix am 30 November 2020, 16:11:09
- popup über reading auslösen: z.B. es klingelt und das Kamerabild der Haustür wird eingeblendet
Popup hat jetzt neu
open: false,
trigger: '',
timeout: 10,
<ftui-popup id="pop2" [trigger]="dummy3:state:time" [open]="dummy2 | map('on: true, off: false')">Siehe: https://knowthelist.github.io/ftui/examples/popup.html
Zitat von: Eisix am 30 November 2020, 16:11:09
- spinner widget oder ein Beispiel wie man es aus bestehenden Komponenten zusammenbauen kann.
Was ist für dich ein Spinner? Ein drehender Kreisel als Loading-Symbol? Oder das links-rechts verschiebbare Fenster-Element?
Danke für das popup!
https://wiki.fhem.de/wiki/FTUI_Widget_Spinner (https://wiki.fhem.de/wiki/FTUI_Widget_Spinner)
Hatte ich in einem post (#186) gestern schon versucht aus Einzelteilen nachzubauen, aber das habe ich nicht hingekriegt, geht vielleicht über mapping.
Gruß
Eisix
Zitat von: setstate am 01 Dezember 2020, 09:40:25
Popup hat jetzt neu
open: false,
trigger: '',
timeout: 10,
<ftui-popup id="pop2" [trigger]="dummy3:state:time" [open]="dummy2 | map('on: true, off: false')">
Siehe: https://knowthelist.github.io/ftui/examples/popup.html
Super! Vielen Dank. Dann kann ich jetzt komplett umstellen.
Kann es sein das die klasse "blink" noch nicht funktioniert?
@Thyraz
Die Zugriffe auf die verschiedenen Log Arten funktionieren wie hier im Beispiel und auch das ConstY:4 klappt.
was mir noch fehlt ist in welchem Format ich startDate und endDate angebe?
<ftui-chart title="Schildkröten">
<ftui-chart-data label="Schildkröten" color="green" log="logdb" file="history" spec="Schildis_Temp:temperature"></ftui-chart-data>
<ftui-chart-data label="morgen" color="blue" log="lp" spec="FileLog:Schildis_TempMin,offset=60*60*24:4:Wetter.fc1_tempMin::"></ftui-chart-data>
<ftui-chart-data label="kritisch" color="red" log="lp" file="-" spec="ConstY:4"></ftui-chart-data>
<ftui-chart-data label="aussen" fill background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="Sensor_aussen:CleanTemp"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Und zu den verschiedenen Line styles die es gibt habe ich auch keine Info gefunden.
Gruß
Eisix
Popup mit Trigger geht bei mir nicht auf. Kann mal jemand schauen wo mein Fehler ist?
<ftui-row>
<ftui-cell>
<ftui-icon class="size-1"
[name]="Klingel | map('.*:bell-o')"
[color]="Klingel | map('on:green, off:white')"
popup-target="popup-Klingel"
></ftui-icon>
<ftui-label>Klingel</ftui-label>
</ftui-cell>
</ftui-row>
<ftui-popup id="popup-Klingel" [trigger]="Klinge:state" [open]="Klinge:state | map('on: true, off: false')">
<header>Hof</header>
<ftui-row>
<label> Video </label>
</ftui-row>
</ftui-popup>
Gruß
Eisix
@Eisix
Mit "Klingel:state" solle es funktionieren.
Manchmal sind es die kleinen Dinge im Leben, die Probleme bereiten.
[trigger] oder [open] nicht beides
trigger nimmt man, wenn man durch ein Reading-Update ein Popup öffnen will.
open, wenn man auf direkte Zustände reagieren will: on => geöffnet, off => geschlossen
Kann es sein, dass ein l bei Klingel fehlt?
Zitat von: setstate am 01 Dezember 2020, 17:56:39
[trigger] oder [open] nicht beides
trigger nimmt man, wenn man durch ein Reading-Update ein Popup öffnen will.
open, wenn man auf direkte Zustände reagieren will: on => geöffnet, off => geschlossen
Kann es sein, dass ein l bei Klingel fehlt?
Hatte mich bei trigger und open auch schon gewundert, kam mir zu viel vor, ist in deinem Beispiel drin.
Und l hat auch gefehlt. Normale Code-Blindheit nach einer Weile.
So funktioniert es
<ftui-row>
<ftui-cell>
<ftui-icon class="size-1"
[name]="Klingel:state | map('.*:bell-o')"
[color]="Klingel:state | map('on:mygreen, off:mywhite')"
popup-target="popup-Klingel"
></ftui-icon>
<ftui-label>Klingel</ftui-label>
</ftui-cell>
</ftui-row>
<ftui-popup id="popup-Klingel" [open]="Klingel:state | map('on: true, off: false')">
<header>Hof</header>
<ftui-row>
<video>
....
</video>
</ftui-row>
</ftui-popup>
Gruß
Eisix
Ich versuche mich gerade an einer Chart, ich habe einen Heizkörperthermostaten, den ich gerne grafisch darstellen würde.
Das sieht bei mir so aus:
<!-- Heizkörper -->
<ftui-chart title="Heizkörper" >
<ftui-chart-data fill
label="Ist"
log="logdb"
file="history"
spec="wz.heizkoerper:measured-temp"
type="lines"
color="danger"
unit="°C"
[update]="wz.heizkoerper:state:time">
</ftui-chart-data>
<ftui-chart-data
label="Soll"
log="logdb"
file="history"
spec="wz.heizkoerper_Clima:desired-temp"
type="lines"
color="primary"
unit="°C"
[update]="wz.heizkoerper:state:time">
</ftui-chart-data>
<ftui-chart-data
label="Ventil"
log="logdb"
file="history"
spec="wz.heizkoerper_Clima:ValvePosition"
type="lines"
color="warning"
unit="%"
[update]="wz.heizkoerper_Clima:state:time">
</ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Mein Problem, wie bekomme ich die unterschiedlichen Einheiten bzw. Werte unter einen Hut, die Temperatur liegt ja immer so um 20 Grad, während das Ventil von 0-100% annehmen kann?
Hallo zusammen
Ich versuche gerade mein Sonos in FTUI 3 zu integrieren. Für Die Favoriten benutze ich ein Dropdown-Menu. Bei FTUI 2 sieht das wie folgt aus:
<li class="transparent50" data-row="4" data-col="3" data-sizex="3" data-sizey="1">
<div class="cell">
<div data-type="label" class="cell">Favoriten</div>
<div data-type="select" data-device="Sonos_Essen" data-list="FavouritesList" data-alias="FavouritesListAlias" data-delimiter="|" data-quote="/" data-get="currentFavouriteNameMasked" data-set="StartFavourite" class="narrow small"></div>
</div>
</li>
Gibt es bei FTUI 3 auch die Möglichkeit für Delimiter und Quotes? Das habe ich in der Beispiel Seite nicht gefunden...
Danke und viele Grüsse Eppi
Ist es schon möglich, mit ftui-content in einem freigehaltenen Bereich im Grid html Inhalte einzubinden, die sich an das Grid der index.html halten. Ich bekomme das nicht hin.
Egal was ich versuche, der per ftui-content eingeblendete Inhalt landet nicht da, wo er hin soll, sondern klebt oben am Rand.
Button zum Anzeigen des Inhaltes:
<!-- Menü Links Content -->
<ftui-grid-tile row="1" col="1" height="20" width="3" shape="round">
<ftui-column>
<ftui-tab view="cont1" fill="solid" shape="circle" class="size-5" active>
<ftui-icon size="large" name="home1"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
Hier soll der Inhalt hin:
<!-- Inhalt Content -->
<ftui-grid-tile row="4" col="4" height="17" width="26" shape="round">
<ftui-tab-view id="cont1">
<ftui-content file="cont1_main.html" room="Main"></ftui-content>
</ftui-tab-view>
</ftui-grid-tile>
Alle Tiles eines Grids müssen immer zugleich vorhanden sein und dürfen nicht per Content-Nachladenen verteilt sein. Wenn FTUI-GRID instanziert wird, müssen alle Tiles da sein. Später Nachkommende werden ignoriert, also nicht ausgerichtet.
Zitat von: setstate am 01 Dezember 2020, 23:22:49
Alle Tiles eines Grids müssen immer zugleich vorhanden sein und dürfen nicht per Content-Nachladenen verteilt sein. Wenn FTUI-GRID instanziert wird, müssen alle Tiles da sein. Später Nachkommende werden ignoriert, also nicht ausgerichtet.
Heißt das, dass ich alles in die index.html packen muss?
Ist es möglich, in der content1.html ein neues FTUI-GRID anzulegen, also FTUI-GRID's zu veschachteln, oder darf es nur ein FTUI-GRID geben?
Ich hatte im FTUI2 auf der index.html nur einen Menü-Bereich, einen Kopfbereich und einen leeren Inhaltbereich, in den dann mit pagetab's die verschiedenen inhalt_xy.html nachgeladen wurden.
Ist das jetzt in FTUI3 nicht möglich oder nur noch nicht möglich?
Grid im Grid geht. Im nachgeladen Teil kann wieder ein neues Grid liegen. Aber immer grid und tiles zusammen.
Zitat von: SirMarco am 26 November 2020, 13:00:12
Hallo zusammen
Hat jemand Lust mit mir zusammen ein Slideout Navigation Menu in V3 einzubauen?
Finde das Mega, aber bin aber mit dem einbinden noch nicht so weit vom wissen ;-)
https://slideout.js.org/ (https://slideout.js.org/)
Grüsse
ich versuche das gerade ohne zusätzlich Lib nachzubauen.
Moin,
Wie kann ich in meiner eigene user.css Eigenschaften der popup.component.css überschreiben?
Ich möchte das close X von der Position anpassen, da ich den Header breiter mache.
Des Weiteren möchte ich das die Popups runde ecken bekommen (border-radius).
Kann es sein das die Popups sich nicht zentrieren, zumindest haut das bei mir nicht hin?
VG
Zitat von: setstate am 02 Dezember 2020, 08:02:11
Grid im Grid geht. Im nachgeladen Teil kann wieder ein neues Grid liegen. Aber immer grid und tiles zusammen.
@setstate erst mal möchte ich mich für die super Arbeit und den schnellen Support bedanken.
aber...
Das mit dem Grid im Grid bekomme ich nicht gebacken. Das "Master" Grid ist in der index.html definiert und das "Sub" Grid ist in einer content.html definiert. Dieses Grid wird aber ignoriert und der Inhalt wird irgendwo angezeigt, aber nicht dort, wo es hin soll. Durch Größenveränderung des Browser-Fenster kann man den Inhalt der content.html verschieben. Die nachgeladene html scheint ihren "Nullpunkt" irgendwo anders zu haben und nicht links oben, bzw. es gibt noch einen Offset / Multiplikator.
Wenn man in der content.html das Grid weg läßt, wird der Inhalt mittig in der vorgesehenen Fläche angezeigt.
Gibt es Ideen was ich falsch mache?
Zitat von: octek0815 am 02 Dezember 2020, 14:59:12
Moin,
Wie kann ich in meiner eigene user.css Eigenschaften der popup.component.css überschreiben?
Ich möchte das close X von der Position anpassen, da ich den Header breiter mache.
Des Weiteren möchte ich das die Popups runde ecken bekommen (border-radius).
Kann es sein das die Popups sich nicht zentrieren, zumindest haut das bei mir nicht hin?
VG
Elemente innerhalb einer Komponente sind geschützt per Shadow-Dom. Per user.css kann man da nichts anpassen. Ich müsste für allgemein interessante Styles extra Variablen bereitstellen oder für ganz Wichtiges auch als Attribute anbieten.
Weiter oben hatte ich mich ja schon mal zum user-orientierten CSS-Thema geäußert, bislang allerdings ohne finale Reaktionen. Deshalb stelle ich hier mal etwas konkreter einen Anwendungsfall dar.
Generell möchte ich den "close"-Part vom Popup individuell beeinflussen.
Zunächst soll gelten - unabhängig von "--popup-header-color":
- das "x" allgemein in "lightblue" einfärben
- das "x" für das Popup mit der id "pop1" in "magenta" einfärben
Dies kann leicht realisiert werden, indem der Entwickler "--popup-close-color" einführt.
In der vom Anwender verwalteten css- oder html-Datei steht dann:
:root { --popup-close-color: lightblue; }
#pop1 { --popup-close-color: magenta; }
Das Ergebnis entspricht den Erwartungen.
Weiterhin soll gelten:
Jetzt wird's etwas aufwendiger, da im Shadow-DOM die in ftui.css eingeführten Animationen gar nicht zur Verfügung stehen. Neben der Einführung einer Variablen muss der Entwickler also auch noch ein paar Zeilen duplizieren.
In der vom Anwender verwalteten css- oder html-Datei steht schließlich:
:root { --popup-close-color: lightblue; --popup-animation: blink 1s step-start 0s infinite; }
#pop1 { --popup-close-color: magenta; }
Das Ergebnis entspricht den Erwartungen.
Problematisch wird es vermutlich, wenn man gar keine Animation haben möchte, denn der mögliche Fehlwert für die Variable ist zumindest mir unbekannt.
Abschließend soll gelten:
- das "x" beim Popup mit der id "pop1" dreht sich horizontal
Eigentlich gilt das weiter oben Gesagte; allerdings kommt man damit nicht zum Ziel, da der Entwickler die gewünschte Animation im Zweifel noch gar nicht kennt und dementsprechend auch nicht einfach in die allgemeine Popup-css kopieren kann. Unter Umständen reicht Rücksprache oder die fehlende Animation wird nachgereicht.
In der vom Anwender verwalteten css- oder html-Datei steht schließlich:
:root { --popup-close-color: lightblue; --popup-animation: blink 1s step-start 0s infinite; }
#pop1 { --popup-close-color: magenta; --popup-animation: anim-flip-horizontal 4.0s infinite linear; }
Das Ergebnis entspricht den Erwartungen.
Klar, dass dies nur ein (kleiner) Auszug von möglichen Individualisierungen ist und das Ganze doch leicht ausarten kann. Der Entwickler ist auf jeden Fall immer mittendrin und "muss" quasi reagieren/zustimmen.
Um der Individualisierung mehr Raum zu geben, würde ich folgendes Vorgehen im Beispielfall "Popup" bevorzugen:
1) Neben "popup.component.css" sollte auch ein z.B. "popup.component.user.css" bereitgestellt werden.
2) Die "id" (und im Zweifel auch "class") sollte durchgereicht werden.
Aus meiner Sicht minimaler Aufwand und der Anwender kann im Grunde frei individualisieren.
Interessant ist wahrscheinlich, ob eine derartige oder ähnliche Lösung Gefallen findet. Daher hoffe ich, dass Reaktionen dafür oder dagegen folgen ...
Hallo,
erst einmal danke für die super Arbeit an FTUI3.
Ich habe ein problem mit
<ftui-cell>
<ftui-clock format="eeee, den D.M" class="size-4 top-narrow"></ftui-clock>
</ftui-cell>
Leider wird ftui-cell irgendwie nicht identifiziert und bekommt folgendes zugewiesen:
:not(:defined) {
opacity: 0;
}
was mach ich falsch?
Zitat von: MiniBlister am 03 Dezember 2020, 08:37:25
Hallo,
erst einmal danke für die super Arbeit an FTUI3.
Ich habe ein problem mit
<ftui-cell>
<ftui-clock format="eeee, den D.M" class="size-4 top-narrow"></ftui-clock>
</ftui-cell>
Leider wird ftui-cell irgendwie nicht identifiziert und bekommt folgendes zugewiesen:
:not(:defined) {
opacity: 0;
}
was mach ich falsch?
Aktueller Stand von GitHub geladen? Unter Components muss es Cell geben.
Zitat von: OdfFhem am 03 Dezember 2020, 08:31:18
Interessant ist wahrscheinlich, ob eine derartige oder ähnliche Lösung Gefallen findet. Daher hoffe ich, dass Reaktionen dafür oder dagegen folgen ...
Lass mich ehrlich sein: Eher nicht. Das ist mir alles zu überfrachtet und zu individuell/speziell. Ich will auch nicht dahin, am Ende alle CSS-Rules als Variable nach außen reichen zu müssen und eine componente.user.css lehne ich auch eher ab. Schon das Einlesen als eigenständiges CSS-File frisst wertvolle ms. Eigentlich müsste man das direkt ins component.js-Template legen. Das mache ich auch schon bei kleinen Styles.
Bei diesem direkten Fall mit dem Popup-X tendiere ich eher zu einem eigenen Slot für das X mit default X, wie es jetzt ist. Die UserInnen (die Usenden ;) ) könnten dann den Slot von außen mit ihrem eigenen Element füllen. Das wäre dann wieder per user.css stylbar.
<span slot="close">
<div class="spin size-10" style="color: magenta">×</div>
</span>
ZitatLass mich ehrlich sein: Eher nicht.
Das würde auch Deinem Ansatz "Keep it simple", den ich sehr begrüße, widersprechen. :)
Moin Setstate,
im Popup gibt es scheinbar noch ein Bug.
Ein Image aus einem FHEM Reading mit einer URL wird im Popup nicht angezeigt.
<ftui-image [src]="myDummy:state"></ftui-image>
Kannst Du das bestätigen oder ist das noch nicht fertig?
VG
Hallo,
fhemSVG Icons zicken auch noch teilweise rum sind wohl alle nur schwarz.
Was mache ich mit path wenn ich ein multistate Icon habe das Icons aus verschiedenen Pfaden zieht?
Gruß
Eisix
@setstate
ZitatLass mich ehrlich sein
Da sollte definitiv kein Weg dran vorbeiführen ...
Eine Anmerkung zu einer xxxxx.component.user.css hätte ich noch: Diese Datei wäre ja im Normalfall vollständig leer und kann nur durch den Anwender verändert werden. Und sie würde natürlich in der template-Routine der zugehörigen Komponente "importiert" und das (vermutlich) genau einmal. Hattest Du das auch so verstanden oder hattest Du eine andere Interpretation?
Das mit dem Slot bzgl. X hatte ich mal ausprobiert. Damit kommt man schon ziemlich weit - Aufwand hängt aber stark davon ab, ob der zugehörige span um den Slot oder im Slot steht. Aufgefallen ist mir noch, dass z.B. die hover-Angabe aus dem Shadow-DOM nicht mehr vollständig greift - Cursorform ja, Farbe nein.
octek0815 war in seinem Beitrag u.a. an runden Ecken beim Popup interessiert. Slots (in geschachteler Form) wären hier vermutlich keine Lösung ...
Irgendwie bin ich noch unschlüssig ... scheinbar aber ein Einzelfall ...
Kann mir noch jemand ein Beispiel zeigen wie ich die Größe eines popups festlege?
Gruß
Eisix
Zitat von: Eisix am 03 Dezember 2020, 20:40:35
Hallo,
fhemSVG Icons zicken auch noch teilweise rum sind wohl alle nur schwarz.
Was mache ich mit path wenn ich ein multistate Icon habe das Icons aus verschiedenen Pfaden zieht?
Gruß
Eisix
Zitat von: Eisix am 03 Dezember 2020, 20:58:39
Kann mir noch jemand ein Beispiel zeigen wie ich die Größe eines popups festlege?
Gruß
Eisix
<ftui-popup id="popup-verpasste-anrufe" timeout="60" width="900px" height="500px">
@octek0815
merci!, die px hatte ich nicht drin :o
einen hab ich noch bevor ich heute aufhoere.
Beim chart wird das fill unter null abgeschnitten, vermute mal das soll nicht so sein.
Gruss
Eisix
@octek0815
mit den Icons meine ich folgendes Konstrukt
<ftui-cell>
<ftui-button (value)="Heizung.Status_WZ:Heizung" states="manuell,automatic,boost,off" shape="circle" color="Heizung_WZ:stateColor" fill="solid">
<ftui-icon class="size-1"
path="../images/openautomation/"
[name]="Heizung.Status_WZ:Heizung | map('manuell:sani_heating_manual, automatic:sani_heating_automatic, boost:sani_heating_boost, off:general_aus')"
[color]="Heizung.Status_WZ:Heizung | map('manuell:blue, automatic:mygreen, boost:red, off:grey')"
></ftui-icon>
</ftui-button>
</ftui-cell>
Die Icons kommen aus openautomation und fhemSVG, ../image funtioniert nicht da anscheinend die Unterverzeichnisse nicht durchsucht werden.
Gruss
Eisix
Zitat von: octek0815 am 03 Dezember 2020, 18:36:16
Moin Setstate,
im Popup gibt es scheinbar noch ein Bug.
Ein Image aus einem FHEM Reading mit einer URL wird im Popup nicht angezeigt.
<ftui-image [src]="myDummy:state"></ftui-image>
Kannst Du das bestätigen oder ist das noch nicht fertig?
VG
oh, ja. Das ist ein kniffliger Bug. Ich suche ...
Zitat von: Eisix am 03 Dezember 2020, 21:23:59
@octek0815
mit den Icons meine ich folgendes Konstrukt
<ftui-cell>
<ftui-button (value)="Heizung.Status_WZ:Heizung" states="manuell,automatic,boost,off" shape="circle" color="Heizung_WZ:stateColor" fill="solid">
<ftui-icon class="size-1"
path="../images/openautomation/"
[name]="Heizung.Status_WZ:Heizung | map('manuell:sani_heating_manual, automatic:sani_heating_automatic, boost:sani_heating_boost, off:general_aus')"
[color]="Heizung.Status_WZ:Heizung | map('manuell:blue, automatic:mygreen, boost:red, off:grey')"
></ftui-icon>
</ftui-button>
</ftui-cell>
Die Icons kommen aus openautomation und fhemSVG, ../image funtioniert nicht da anscheinend die Unterverzeichnisse nicht durchsucht werden.
Gruss
Eisix
Moin Esix,
das mit den original Icons funktioniert nicht (Farbproblem).
Kopiere doch die SVG Icons nach ../icons im neuen FTUI3 Pfad (vorher natürlich durch IconMoon jagen damit das mit den Farben funktioniert).
Ich packe immer ein Unterstrich an den Anfang des Namens vom Icon, um diese von den vorhanden Icons abzugrenzen.
So könnte dann der Code aussehen...
<ftui-cell>
<ftui-button (value)="Heizung.Status_WZ:Heizung" states="manuell,automatic,boost,off" shape="circle" color="Heizung_WZ:stateColor" fill="solid">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:Heizung | map('manuell:_sani_heating_manual, automatic:_sani_heating_automatic, boost:_sani_heating_boost, off:_general_aus')"
[color]="Heizung.Status_WZ:Heizung | map('manuell:blue, automatic:mygreen, boost:red, off:grey')"></ftui-icon>
</ftui-button>
</ftui-cell>
Grüße
Olli
Hallo octek,
das war mein Plan b. Habe ich bei den Kleinklima Icons schon so gemacht. Für die openautomation icons hatte setstate schon mal was an der css gedreht. Grundsätzlich bevorzuge ich aber ein zentrales Icon Repository.
Danke
Eisix
Farbige OA Icons funktionieren doch. Siehe https://forum.fhem.de/index.php/topic,115259.msg1103837/topicseen.html#msg1103837
Wie kann ich in einem Popup bei ftui-row oder ftui-column die gesamte Breite ausnutzen.
Irgendwie gelingt mir das nicht. Hier mein Code...
<ftui-popup id="popup-wetterwarnung" timeout="120" width="1093px" height="651px">
<header class="size-5">Wetterwarnung</header>
<ftui-row>
<ftui-column>
<ftui-row>
<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_0_IconURL" nocache></ftui-image>
</ftui-column>
<ftui-column>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_0_ShortText"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_0_LongText"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_0_Start_Date"><span slot="start">Von: </span><span slot="end">|<ftui-label [text]="System_Unwetterzentrale:Warn_0_Start_Time"></ftui-label></span></ftui-label></ftui-label>
<ftui-label [text]="System_Unwetterzentrale:Warn_0_End_Date"><span slot="start">Bis: </span><span slot="end">|<ftui-label [text]="System_Unwetterzentrale:Warn_0_End_Time"></ftui-label></span></ftui-label></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_1_IconURL" nocache></ftui-image>
</ftui-column>
<ftui-column>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_1_ShortText"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_1_LongText"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_1_Start_Date"><span slot="start">Von: </span><span slot="end">|<ftui-label [text]="System_Unwetterzentrale:Warn_1_Start_Time"></ftui-label></span></ftui-label></ftui-label>
<ftui-label [text]="System_Unwetterzentrale:Warn_1_End_Date"><span slot="start">Bis: </span><span slot="end">|<ftui-label [text]="System_Unwetterzentrale:Warn_1_End_Time"></ftui-label></span></ftui-label></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
</ftui-column>
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-image src="http://www.unwetterzentrale.de/images/map/bayern_index.png" nocache width="400"></ftui-image>
</ftui-column>
</ftui-row>
</ftui-popup>
du hast ganz viele <ftui-label>, wo das > fehlt.
Muss aber nicht die Ursache deines Problems sein.
Wo soll mehr Breite hin? In der linken Spalte hast du pro Reihe 3 Spalten, die sich gleichmässig den Platz teilen. Link hast du ein Icon, was im Screenshot nicht zu sehen ist, Mitte der Text und rechts eine leere Spalte, die aber auch 1/3 des Platzes einnimmt.
<ftui-row>
<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_0_IconURL" nocache></ftui-image>
</ftui-column>
<ftui-column>
... Text
</ftui-column>
<ftui-column>
</ftui-column>
</ftui-row>
Zitat von: setstate am 04 Dezember 2020, 10:51:12
du hast ganz viele <ftui-label>, wo das > fehlt.
Muss aber nicht die Ursache deines Problems sein.
Wo soll mehr Breite hin? In der linken Spalte hast du pro Reihe 3 Spalten, die sich gleichmässig den Platz teilen. Link hast du ein Icon, was im Screenshot nicht zu sehen ist, Mitte der Text und rechts eine leere Spalte, die aber auch 1/3 des Platzes einnimmt.
<ftui-row>
<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_0_IconURL" nocache></ftui-image>
</ftui-column>
<ftui-column>
... Text
</ftui-column>
<ftui-column>
</ftui-column>
</ftui-row>
Das mit den fehleneden > hatte ich inder Tat übersehen, danke für den Hinweis. Ist aber nicht die Ursache.
Wenn ich das hier...
<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_0_IconURL" nocache></ftui-image>
</ftui-column>
...komplett wegnehme sieht es aus wie im angehängten Bild. Keine Zentrierung und keine Nutzung der vollen Column Breite.
PS: Das mit dem Icon ist das Problem mit dem Image im Popup aus einem Reading.
Am Image Bug bin ich dran. Im Chrome geht es schon, Safari stäubt sich aber noch.
Weite kannst du mit width anpassen
<ftui-column width="20%">
Zitat von: setstate am 04 Dezember 2020, 11:48:35
Am Image Bug bin ich dran. Im Chrome geht es schon, Safari stäubt sich aber noch.
Weite kannst du mit width anpassen
<ftui-column width="20%">
Ja super, damit ist es gut und der Bugfix für Image im Popup funktioniert auch perfekt. Danke!!!
Wie kann ich das hier realisieren?
Es soll beim Drücken des Buttons die URL in den State eines Dummy geschrieben werden:
<ftui-button (value)="dIPCAMhaustuerURL" states='http://10.20.8.99:58081' fill="clear">
<ftui-icon style="font-size:1em;" name="_security_camera" popup-target="popup-ipcam-haustuer" color="white"></ftui-icon>
</ftui-button>
Ausgeführt wird das...
Zitat von: setstate am 04 Dezember 2020, 09:28:11
Farbige OA Icons funktionieren doch. Siehe https://forum.fhem.de/index.php/topic,115259.msg1103837/topicseen.html#msg1103837
Ja aber nicht die von fhemSVG.
Gruß
Eisix
Zitat von: Eisix am 04 Dezember 2020, 13:29:50
Ja aber nicht die von fhemSVG.
Gruß
Eisix
Jetzt aber.
Leider musste ich auf die pösen inline Styles mit ganz pöse, pöse !important draufhauen ;)
Und wie mach ich das dann wenn ich fhemSVG und openautomation in einem Icon hab. Kann ich zwei Pfade in path angeben oder wie?
Zitat von: Eisix am 04 Dezember 2020, 15:05:29
Und wie mach ich das dann wenn ich fhemSVG und openautomation in einem Icon hab. Kann ich zwei Pfade in path angeben oder wie?
ach, jetzt versteh ich ... Durch das map - einmal Icons aus dem Path und andermal aus dem anderen
Dann muss man für path auch ein map machen
[path]="dummy1 | map('0: `../images/openautomation/`, 1: `../images/fhemSVG/`')"
[name]="dummy1 | map('0: audio_audio, 1: alexa')"
Oder alles in einen Folder werfen, wie schon vorgeschlagen.
Hallo,
ich hab jetzt seit einiger Zeit ein altes Ipad3 an der Wand, jetzt wollte ich FTUI 3 testen, aber siehe da, alle Geräte und Browser spielen mit, das Ipad aber nicht mehr. Nichtmal die verlinkten Examples funktionieren. Javascript-Problem? Wird es jetzt Zeit, das Ipad in Rente zu schicken?
Grüße
Piccer
Zitat von: piccer am 04 Dezember 2020, 17:25:29
Hallo,
ich hab jetzt seit einiger Zeit ein altes Ipad3 an der Wand, jetzt wollte ich FTUI 3 testen, aber siehe da, alle Geräte und Browser spielen mit, das Ipad aber nicht mehr. Nichtmal die verlinkten Examples funktionieren. Javascript-Problem? Wird es jetzt Zeit, das Ipad in Rente zu schicken?
Grüße
Piccer
ja, das ist zu alt. Dessen Safari kennt viele der ES6 Features noch nicht. Manche sogar erst ab Version 11.
https://caniuse.com/?search=es6
Nachtrag: ich sehe gerade, bei einem neueren iPad (Gen.6) geht es auch nicht. Ich untersuche das nochmal.
Nach-Nachtrag: Nach Update auf iOS 14.2 geht alles.
@setstate
Vielen Dank für die runden Ecken.
Ist zusätzlich noch folgende Änderung möglich?
34c34
< <span class="close">×</span>
---
> <span class="close"><slot name="close">×</slot></span>
P.S.: Ich war echt überrascht, dass ich "};" eingeschleust hatte ...
Eine Frage zur Formatierung, ich habe mittels diesem Code:
<ftui-grid-tile row="7" col="9" height="2" width="2" shape="round" class="semitransparent">
<ftui-row>
<ftui-label text="Thermostat"></ftui-label>
<ftui-label [text]="wz.thermostat:temperature" unit="°C"></ftui-label>
<ftui-icon [name]="wz.thermostat:battery | map('low:battery-1,ok:battery')"
[color]="wz.thermostat:battery | map('low:danger,ok:green')"></ftui-icon>
</ftui-row>
<ftui-row>
<ftui-label text="Radiator"></ftui-label>
<ftui-label [text]="wz.radiator:temperature" unit="°C"></ftui-label>
<ftui-icon [name]="wz.radiator:battery | map('low:battery-1,ok:battery')"
[color]="wz.radiator:battery | map('low:danger,ok:green')"></ftui-icon>
</ftui-row>
<ftui-row>
<ftui-label text="Heizkörper"></ftui-label>
<ftui-label [text]="wz.heizkoerper_Clima:measured-temp" unit="°C"></ftui-label>
<ftui-icon [name]="wz.heizkoerper:batteryLevel | map('1.8:battery-0, 2.0:battery-1, 2.3:battery-2, 2.5:battery-3, 2.8:battery')"
[color]="wz.heizkoerper:batteryLevel | map('1.8:danger, 2.0:warning, 2.3:success, 2.5:secondary, 2.8:green')">
</ftui-icon>
</ftui-row>
</ftui-grid-tile>
das unten angehängte Tile gebaut, kann ich den Text und auch die Icons irgendwie linksbündig ausrichten?
Da du eine bündige Ausrichtung von untereinander angeordneten Elementen brauchst, würde ich diese in eine gemeinsame Column setzten.
Anstatt:
row
row
row
dann:
row
column. column column
<ftui-grid-tile row="4" col="3" height="2" width="2" shape="round">
<ftui-row>
<ftui-column align-items="left" margin="2">
<ftui-label text="Thermostat"></ftui-label>
<ftui-label text="Radiator"></ftui-label>
<ftui-label text="Heizkörper"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="ftuitest" unit="°C"></ftui-label>
<ftui-label [text]="ftuitest" unit="°C"></ftui-label>
<ftui-label [text]="ftuitest" unit="°C"></ftui-label>
</ftui-column>
<ftui-column position="left" margin="2" height="95%">
<ftui-icon [name]="ftuitest| map('0:battery-1,1:battery')"
[color]="ftuitest| map('0:danger,1:green')"></ftui-icon>
<ftui-icon [name]="ftuitest| map('0:battery-1,1:battery')"
[color]="ftuitest| map('0:danger,1:green')"></ftui-icon>
<ftui-icon [name]="ftuitest| map('0:battery-0, 2.0:battery-1, 2.3:battery-2, 2.5:battery-3, 2.8:battery')"
[color]="ftuitest| map('0:danger, 2.0:warning, 2.3:success, 2.5:secondary, 2.8:green')">
</ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Die ganze Ausrichtungsgeschichte ist, wie gesagt, noch eine Baustelle, aber ich habe jetzt schnell mal align-items und margin hinzugefügt, damit dein Fall funktioniert.
Oh, super, danke!!
Zitat von: LuGu am 02 Dezember 2020, 21:29:57
Das mit dem Grid im Grid bekomme ich nicht gebacken. Das "Master" Grid ist in der index.html definiert und das "Sub" Grid ist in einer content.html definiert. Dieses Grid wird aber ignoriert und der Inhalt wird irgendwo angezeigt, aber nicht dort, wo es hin soll. Durch Größenveränderung des Browser-Fenster kann man den Inhalt der content.html verschieben. Die nachgeladene html scheint ihren "Nullpunkt" irgendwo anders zu haben und nicht links oben, bzw. es gibt noch einen Offset / Multiplikator.
Wenn man in der content.html das Grid weg läßt, wird der Inhalt mittig in der vorgesehenen Fläche angezeigt.
Gibt es Ideen was ich falsch mache?
Das Problem ist jetzt gelöst. Es fehlt der Trigger zu Neuberechnen des Grids, wenn etwas nachgeladen wurde.
Zitat von: OdfFhem am 05 Dezember 2020, 06:51:48
Ist zusätzlich noch folgende Änderung möglich?
34c34
< <span class="close">×</span>
---
> <span class="close"><slot name="close">×</slot></span>
Done
Zitat von: OdfFhem am 05 Dezember 2020, 06:51:48
P.S.: Ich war echt überrascht, dass ich "};" eingeschleust hatte ...
? Wo? Was habe ich verpasst?
Zitat von: setstate am 02 Dezember 2020, 14:21:37
ich versuche das gerade ohne zusätzlich Lib nachzubauen.
Freue mich schon drauf, da ich FTUI zu 90% auf mobilen Geräten nutze. in Deiner css habe ich etwas gefunden zu einem Menu, aber schaffe das nicht zum einbauen.
Es geht unter 480px einfach nicht auf :-(
html:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<!-- when serving the page with other web servers, e.g. lighttpd -->
<meta name="fhemweb_url" content="http://192.168.2.15:8001/fhem/">
<!-- verbose level 0-4 -->
<meta name="debug" content="2">
<title>FTUI Demo</title>
</head>
<body>
<nav class="menu">
<div class="menu-trigger"></div>
<header class="white">Slideout Demo</header>
<ul>
</ul>
</nav>
<main id="panel" class="">
<header id="header-nav" class="fixed row">
</header>
</main>
</body>
</html>aus deiner ftui.css
@media screen and (max-width: 480px) {
.menu ~ main>.page {
padding-left: 0px;
}
.menu {
width: 230px !important;
box-shadow: 0 0 0 100em rgba(0, 0, 0, 0);
transform: translate3d(-230px, 0, 0);
-webkit-transform: translate3d(-230px, 0, 0);
transition: all 0.3s ease-in-out;
}
.menu .menu-trigger {
width: 40px;
height: 40px;
position: absolute;
left: 100%;
background: #1D1F20;
}
.menu .menu-trigger:before, .menu .menu-trigger:after {
content: '';
width: 50%;
height: 2px;
background: #fff;
border-radius: 10px;
position: absolute;
top: 45%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
}
.menu .menu-trigger:after {
top: 55%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
}
.menu.show {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.6);
}
}
Das sind Reste aus der Version 2. Das fliegt bald raus
Wäre es wohl möglich das "popup_target" auch noch in <ftui-image> einzubauen?
Oh, sorry, geht ja schon, hatte einen Tippfehler. :-[
Mir ist aber nochwas anderes eingefallen, wäre es möglich beim Slider eine Skala einzubauen oder geht das schon?
@setstate
Durch die Änderung der Grid handlings der contentfiles werden popups jetzt nur noch innerhalb des grid-tile geöffnet und nicht bezogen auf das globale Grid.
Gruß
Eisix
Kurze Frage, kann man beim knob die Größe des "Valuetextes" beeinflussen?
Zitat von: grossmaggul am 09 Dezember 2020, 10:56:42
Kurze Frage, kann man beim knob die Größe des "Valuetextes" beeinflussen?
nein, noch nicht. Ich bin mir auch noch nicht sicher, ob mal das als css Variable anbieten sollte
--knob-value-text-size,
--knob-scale-text-size,
oder als Attribute
<ftui-knob [(value)]="dummy1" type="scale" has-value-text value-text-size="1em"></ftui-knob>
Schwierige Frage, aber konsistenter fände ich es, wenn man es über class="size-x" angeben könnte, wie bei "label".
Und dann hat sich eben noch eine Frage für mich ergeben, beim Mediaplayer habe ich ja einen Fortschrittsbalken, der auch die Dauer des Songs anzeigt. Zur Zeit allerdings nur in Sekunden. Gibt es eine Möglichkeit, das in Minuten umrechnen zu lassen?
Zitat von: setstate am 17 November 2020, 02:42:23
Es gibt jetzt auch ftui-content
<ftui-content file="examples/contents/content-view1.html" room="Room1"></ftui-content>
Im Template-File kann man auch Platzhalter mit doppelter geschweifter Klammer verbauen, die im ftui-content als beliebiges Attribute
angegeben werden können.
<ftui-title>{{room}}</ftui-title>
Hallo zusammen
Verstehe ich das Richtig, das auch device Namen übergeben werden können?
Wenn ja, mag mir jemand ein Beispiel machen?
Besten Dank
Grüsse
@setstate
Mir ist heute beim ersten Schneefall aufgefallen, dass beim meteocons icon set N/A angezeigt wird.
In der weather.map.js scheinen noch ein paar Mappings zu fehlen, für die aber ja icons vorhanden sind.
'Schneefall': './icons/snowy2.svg',
'Schneeschauer': './icons/snowy,svg',
und vielleicht auch noch
'Gewitter': './icons/lightning1.svg',
'Nebel': './icons/lines,svg',
Könntest Du das bei Gelegenheit mal bitte ergänzen?
Moin,
sind mit Chart Modul schon Funktionen für Logproxy möglich?
Also die quasi folgendes: { FHEM::Buienradar::LogProxy("System_Regenvorhersage")}
Ging vorher mit: Func:FHEM::Buienradar::LogProxy("System_Regenvorhersage")
Grüße
Olli
Hallo,
ja habe ich hier schon mal gepostet
<ftui-chart title="Schildkröten">
<ftui-chart-data label="Schildkröten" color="#21a000" log="logdb" file="-" spec="Sensor_Schildies:temperature"></ftui-chart-data>
<ftui-chart-data label="morgen" color="blue" log="lp" spec="FileLog:Schildis_TempMin,offset=60*60*24:4:Wetter.fc1_tempMin::"></ftui-chart-data>
<ftui-chart-data label="kritisch" color="#ff0000" log="lp" file="-" spec="ConstY:4"></ftui-chart-data>
<ftui-chart-data label="aussen" fill background-color="#ffad33" color="#ff9900" log="logdb" file="-" spec="Sensor_aussen:CleanTemp"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Gruß
Eisix
ich muss mal ganz zum Anfang zurück und etwas fragen, ich habe die Install aus dem Github genutzt.
Ich habe also das Vezeichnis erstellt mit "mkdir /opt/fhem/www/ftui" dann bin ich eben auf die Server IP gegangen und lande so auf meiner alten FTUI Version :-\
Da ich nun parallel die Version 3 so langsam erstellen möchte habe ich das Verzeichnis erst einmal umbenannt in "ftuineu" damit ich wenigstens drauf komme, aber hier erscheint mir nur eine schwarze Seite, kann es sein das die beiden Versionen sich gegenseitig beeinflussen..?
Es sollte doch eine Demo Seite zu sehen sein, oder muss ich da etwas ändern.?
Klar kann ich auch die index anders nennen, aber die Seite bleibt schwarz :-\
Hab ich ein Brett vorm Kopf :D
http://IP:8083/fhem/www/ftuineu/index.html
müßte dein Link sein.
Gruß
Eisix
und mach noch ein chown -R fhem:dialout /opt/fhem/www/ftuineu
Hallo,
ich möchte ein reading formatiert mit label ausgeben
reading ist z.B. 23:14:54 ---> 23:14 soll aber nur ausgegeben werden.
<ftui-label [text]="Receiver:eventstart_hr | timeFormat('hh:mm')"></ftui-label>
Der code gibt mir aber nur 00:00 aus.
Jemand einen Tip für mich.
Gruß
Eisix
nee, dass ist mir schon klar, aber er zeigt mir trotzdem eine schwarze Seite
Müßte der Befehl nicht "chown -R fhem:dialout /opt/fhem/www/ftuineu" heißen:?
Läuft Dein ftui über einen eigenen Server? Wenn nicht, dann diese Zeile in der index.html mal auskommentieren
<!-- when serving the page with other web servers, e.g. lighttpd -->
<meta name="fhemweb_url" content="http://fhem.local:8083/fhem/">
Zitat von: moonsorrox am 11 Dezember 2020, 15:34:28
nee, dass ist mir schon klar, aber er zeigt mir trotzdem eine schwarze Seite
Müßte der Befehl nicht "chown -R fhem:dialout /opt/fhem/www/ftuineu" heißen:?
Du liest schneller als ich meine Fehler korrigieren kann ;) verschrieben.
Ok das war's grossmaggul ;) Dankeschön
Demo Seite kommt ;)
Zitat von: Eisix am 11 Dezember 2020, 15:41:24
Du liest schneller als ich meine Fehler korrigieren kann ;) verschrieben.
alles gut kein Problem ;) geht jetzt alles...
Nun werde ich mich mal durchwurschteln, habe ja schon ein paar schöne Sachen hier gesehen...
Zitat von: Eisix am 11 Dezember 2020, 15:33:30
<ftui-label [text]="Receiver:eventstart_hr | timeFormat('hh:mm')"></ftui-label>
Der code gibt mir aber nur 00:00 aus.
timeFormat geht davon aus, dass eine Zeitangabe in Millisekunden (Standard, 'ms') bzw. Sekunden ('s') vorliegt.
Eine bereits formatierte Zeit müsste vorher entsprechend umgerechnet werden.
Zitat von: Eisix am 11 Dezember 2020, 15:33:30
reading ist z.B. 23:14:54 ---> 23:14 soll aber nur ausgegeben werden.
Ist die Zeit bereits ausreichend formatiert, könnte man mit replace den gewünschten Teil ausschneiden:
<ftui-label [text]="ftuitest:time_hhmmss | replace(/:..$/, '')"></ftui-label>
Funktioniert das auch bei einem Slider?
Zitat von: setstate am 06 Dezember 2020, 11:14:08
? Wo? Was habe ich verpasst?
dateAgo und
dateTill endeten auf "};" - woher auch immer das ";" kam ...
Zitat von: setstate am 06 Dezember 2020, 11:14:08
Done
Funktioniert grundsätzlich; allerdings ist die CSS-Kontrolle doch ein wenig schleierhaft.
Ich habe mal ein einfaches label-Beispiel (popup verhält sich ähnlich, erfordert aber mehr Bedienschritte) konstruiert, an dem man ein paar Ungereimtheiten ausmachen kann:
<!DOCTYPE html>
<html>
<head>
<base href="../" />
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- <meta name="debug" content="2"> -->
<title>FTUI Example Label</title>
<style>
.special {
color: lightblue;
animation: blink 1s step-start 0s infinite;
}
#label-1,#label-2,#label-3 .special {
color: magenta;
animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
}
.special:hover {
color: #FF0000;
}
#label-1,#label-2,#label-3 .special:hover {
color: #00FF00;
}
</style>
</head>
<body>
<ftui-grid base-width="150" base-height="150">
<ftui-grid-tile row="1" col="1" height="1" width="1">
<header>label-1</header>
<ftui-label id="label-1" class="special">Close1</ftui-label>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="2" height="1" width="1">
<header>label-2</header>
<ftui-label id="label-2">
<span class="special" slot="content">Close2</span>
</ftui-label>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="3" height="1" width="1">
<header>label-3</header>
<ftui-label>
<span id="label-3" class="special" slot="content">Close3</span>
</ftui-label>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>
Bei label-1 werden zunächst die allgemeinen CSS-Einstellungen angewendet und dann von den id-bezogenen CSS-Einstellungen überschrieben - die erwartete Animation ist aktiv. hover wird ständig angewendet und nicht nur, wenn ein hover-Fall vorliegt.
Bei label-2 werden zunächst die id-bezogenen CSS-Einstellungen angewendet, dann aber von den allgemeinen CSS-Einstellungen überschrieben; interessanterweise bleiben beide Animationen aktiv. Für hover gilt das gleiche Verhalten und wird auch nur angewendet, wenn ein hover-Fall vorliegt.
Bei label-3 werden zunächst die id-bezogenen CSS-Einstellungen angewendet, dann aber von den allgemeinen CSS-Einstellungen überschrieben. Für hover gilt das gleiche Verhalten; hover wird auch nur angewendet, wenn ein hover-Fall vorliegt.
Vielleicht gibt es (einfache) Erklärungen für das Verhalten ... würde mich auf jeden Fall interessieren ...
Zitat von: grossmaggul am 11 Dezember 2020, 19:50:38
Funktioniert das auch bei einem Slider?
Aktuell bietet der slider (scheinbar) keine Möglichkeit, textliche Beschriftungen anzuzeigen.
Die Min/Max-Werte auszublenden, scheint auch (noch) nicht möglich.
Somit wäre der Einsatz zusätzlicher label-Elemente (vermutlich) noch keine Lösung.
Eine von vielen Varianten für eine label-Darstellung wäre:
<ftui-label [text]="ftuitest:timeInSeconds | timeFormat('[ m:ss minutes ]','s')"></ftui-label>
Vielleicht gibt es ja bald eine Attribut-Möglichkeit für minText bzw. maxText in der slider-Komponente ...
für
<ftui-label id="label-2">
<span class="special"></span>
</ftui-label>
passt
#label-1 .special
Child Element
----------------------
für
<ftui-label id="label-2" class="special"></ftui-label>
passt
#label-1.special
selbes Element
Zitat von: SirMarco am 09 Dezember 2020, 14:35:44
Verstehe ich das Richtig, das auch device Namen übergeben werden können?
Wenn ja, mag mir jemand ein Beispiel machen?
So wie im examples/content.html und dessen content-view1.html & content-view2.html
<ftui-checkbox slot="end" [(value)]="{{room}}_option"></ftui-checkbox>
Ich habe das label-Beispiel noch einmal um #label-1.special, #label-2.special, #label-3.special erweitert:
<!DOCTYPE html>
<html>
<head>
<base href="../" />
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- <meta name="debug" content="2"> -->
<title>FTUI Example Label</title>
<style>
.special {
color: lightblue;
animation: blink 1s step-start 0s infinite;
}
#label-1,#label-2,#label-3 .special {
color: magenta;
animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
}
#label-1.special,#label-2.special,#label-3.special {
color: magenta;
animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
}
.special:hover {
color: #FF0000;
}
#label-1,#label-2,#label-3 .special:hover {
color: #00FF00;
}
</style>
</head>
<body>
<ftui-grid base-width="150" base-height="150">
<ftui-grid-tile row="1" col="1" height="1" width="1">
<header>label-1</header>
<ftui-label id="label-1" class="special">Close1</ftui-label>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="2" height="1" width="1">
<header>label-2</header>
<ftui-label id="label-2">
<span class="special" slot="content">Close2</span>
</ftui-label>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="3" height="1" width="1">
<header>label-3</header>
<ftui-label>
<span id="label-3" class="special" slot="content">Close3</span>
</ftui-label>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>
Laut Browser gilt folgende Auswert-Reihenfolge (das oberste Element gewinnt):
für label-1:
#label-1.special { color: magenta; }
#label-1 .special:hover { color: #00FF00; }
#label-1 .special { color: magenta; }
.special { color: lightblue; }
magenta-Farbe gewinnt; gewünschte Animation ebenso; hover hat keinerlei Auswirkung mehr - auch nicht im hover-Fall.
für label-2:
.special { color: lightblue; }
#label-2 .special:hover { color: #00FF00; }
#label-2 .special { color: magenta; }
magenta-Farbe gewinnt nicht; gewünschte Animation auch nicht, da zwei Animationen überleben; hover funktioniert - wie gewünscht nur im hover-Fall.
für label-3:
#label-3.special { color: magenta; }
.special { color: lightblue; }
magenta-Farbe gewinnt; keine gewünschte Animation wird ausgeführt; hover hat keinerlei Auswirkung mehr - auch nicht im hover-Fall.
Keine der getesteten Beispiele funktioniert wie gewünscht/erwartet ...
#label-1 und auch #label-2 werten "#label-1 .special" bzw. "#label-2 .special" aus; Ebene spielt wohl keine Rolle ...
#label-1 und #label-3 befinden sich auf derselben Ebene wie .special, verhalten sich aber sehr verschieden ...
Wie könnte man das erwartete Verhalten erzielen?
ich weiß garnicht, was das Ziel sein soll. Soll eines der drei Varianten funktionieren? Warum so unterschiedliche Ebenen und so komplizierte Kaskadierung des Styles? Da muss man sehr auf die Spezifität der Regeln achten.
Ich werfe mal sowas in die Runde
alle 3 gleiche Animation, drei verschieden Normal-Farben, alle 3 gleiche Hover-Farbe
<style>
.special {
color: lightblue;
animation: blink 1s step-start 0s infinite;
}
.special:hover,
#label-3.special:hover,
#label-2 .special:hover {
color: #FF0000;
}
#label-2 .special {
color: lightyellow;
}
#label-3.special {
color: lightseagreen;
}
</style>
alle 3 gleiche Animation, alle 3 gleiche Normal-Farben, alle 3 gleiche Hover-Farbe
<style>
.special {
color: lightblue;
animation: blink 1s step-start 0s infinite;
}
.special:hover {
color: #FF0000;
}
</style>
3 verschiedene Animation, alle 3 gleiche Normal-Farben, alle 3 gleiche Hover-Farbe
<style>
#label-1 {
animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
}
#label-2 {
animation: shake 1s step-start 0s infinite;
}
#label-3 {
animation: blink 1s step-start 0s infinite;
}
.special {
color: lightblue;
}
.special:hover {
color: #FF0000;
}
</style>
@setstate
Zunächst mal vielen Dank für die Unterstützung.
Ich habe die in die Runde geworfenen Vorschläge mal in meinem label-Beispiel angetestet ...
Zitatalle 3 gleiche Animation, drei verschieden Normal-Farben, alle 3 gleiche Hover-Farbe
--> Farben erwartungsgemäß
--> Animation "blink" funktioniert wie gewünscht; verwendet man z.B. die Animation "hop", dann nur bei label-1
Zitatalle 3 gleiche Animation, alle 3 gleiche Normal-Farben, alle 3 gleiche Hover-Farbe
--> Farben erwartungsgemäß
--> Animation "blink" funktioniert wie gewünscht; verwendet man z.B. die Animation "hop", dann nur bei label-1
Zitat3 verschiedene Animation, alle 3 gleiche Normal-Farben, alle 3 gleiche Hover-Farbe
--> Farben erwartungsgemäß
--> Animation funktioniert einwandfrei wie gewünscht, falls man hop,shake,blink verwendet
--> verwendet man shake,blink,hop oder blink,hop,shake ... dann funktioniert es bei label-3 nicht
Weitere Tests haben ergeben, dass "blink" und auch "flash" wohl immer funktionieren.
"hop" sowie "shake" hingegen eher seltener.
Warum das so ist, ist mir im Moment noch schleierhaft ...
Das label-Beispiel habe ich noch mal ein wenig überarbeitet:
<!DOCTYPE html>
<html>
<head>
<base href="../" />
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<title>FTUI Example Label</title>
<style>
#label-1 { color: lightblue; animation: shake 3s step-start 0s infinite; }
#label-2 { color: lightyellow; animation: shake 3s step-start 0s infinite; }
#label-3 { color: lightgreen; animation: shake 3s step-start 0s infinite; }
.special { color: orange; animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1); }
#label-1.special { color: blue; }
#label-2 .special { color: yellow; }
#label-3.special { color: green; }
#label-1.special { animation: flash .8s infinite ease-out; }
#label-2 .special { animation: flash .8s infinite ease-out; }
#label-3.special { animation: flash .8s infinite ease-out; }
.special:hover { color: #FFFFFF; }
#label-1.special:hover { color: #FF0000; }
#label-2 .special:hover { color: #00FF00; }
#label-3.special:hover { color: #0000FF; }
</style>
</head>
<body>
<ftui-grid base-width="150" base-height="150">
<ftui-grid-tile row="1" col="1" height="1" width="1">
<header>label-0</header>
<ftui-label class="special">Close1</ftui-label>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="2" height="1" width="1">
<header>label-1</header>
<ftui-label id="label-1" class="special">Close1</ftui-label>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="3" height="1" width="1">
<header>label-2</header>
<ftui-label id="label-2">
<span class="special" slot="content">Close2</span>
</ftui-label>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="4" height="1" width="1">
<header>label-3</header>
<ftui-label>
<span id="label-3" class="special" slot="content">Close3</span>
</ftui-label>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>
Anmerkungen dazu:
Einige CSS-Regeln habe ich aufgesplittet, um sie gezielt aktivieren bzw. deaktivieren zu können - dies hat aber wohl keine unerwarteten Nebenwirkungen.
label-0 ist der allgemeine Fall - ohne <id>. Funktioniert wohl einwandfrei.
Reine "<id>"- und verknüpfte "<id> .special"-Fälle werden im verschachtelten label-2-Fall gemixt, in den anderen ersetzt. Probleme gäbe es wohl nur bei den scheinbar nicht anwendbaren Animationen.
Die aktuell hinterlegten CSS-hover-Regeln funktionieren einwandfrei. Deaktiviert man die <id>-bezogenen CSS-hover-Regeln, dann klappt hover nur im allgemeinen label-0-Fall.
Bei meiner hauptsächlich verbleibenden Frage geht es um die problematischen Animationen ... wieso sind diese nicht generell anwendbar ? ...
Zitat von: OdfFhem am 12 Dezember 2020, 06:33:51
Bei meiner hauptsächlich verbleibenden Frage geht es um die problematischen Animationen ... wieso sind diese nicht generell anwendbar ? ...
Das habe ich auch schon bemerkt. Label-1 hat zum Beispiel auch Probleme mit Blink im Safari, im Chrome geht es.
Es könnte daran liegen, das einige Konstellationen die Veränderung der im Keyframe geänderten Eigenschaften, nicht unterstützen. Genaues kann ich dir da auch nicht sagen.
Kann die Uhr als analog Uhr dargestellt werden mit den Anpassungen der Zeiger, wie bei Version 2.x.x
Zitat von: moonsorrox am 13 Dezember 2020, 11:54:29
Kann die Uhr als analog Uhr dargestellt werden mit den Anpassungen der Zeiger, wie bei Version 2.x.x
nein, nur wenn ein geneigter Entwickler solch eine Uhr für V3 erstellt.
Das lässt sich doch relativ einfach selber einbinden.
Ich habe das so gemacht:
Auf dieser Webseite (http://www.3quarks.com/en/SVGClock/) eine schöne analoge Uhr zusammenbasteln und mit dem folgenden Schnipsel in ftui eingebunden.
<ftui-grid-tile row="1" col="2" height="2" width="2" shape="round" class="semitransparent">
<ftui-row>
<ftui-column>
<ftui-cell>
<!-- Bahnhofsuhr -->
<object data="images/station-clock.svg" type="image/svg+xml" width="96" height="96">
<param name="dial" value="din 41091.1"/>
<param name="hourHand" value="din 41092.3"/>
<param name="minuteHand" value="din 41092.3"/>
<param name="secondHand" value="german"/>
<param name="minuteHandBehavior" value="stepping"/>
<param name="secondHandBehavior" value="stepping"/>
<param name="secondHandStopToGo" value="yes"/>
<param name="secondHandStopTime" value="1.5"/>
<param name="backgroundColor" value="rgba(150,150,150,150)"/>
<param name="dialColor" value="rgb(40,40,40)"/>
<param name="hourHandColor" value="rgb(20,20,20)"/>
<param name="minuteHandColor" value="rgb(20,20,20)"/>
<param name="secondHandColor" value="rgb(160,50,40)"/>
<param name="axisCoverColor" value="rgb(20,20,20)"/>
<param name="axisCoverRadius" value="7"/>
<param name="updateInterval" value="50"/>
</object>
</ftui-cell>
<ftui-cell>
<ftui-clock format="eeee" class="size-1"></ftui-clock>
<ftui-clock format="DD.MM." class="size-2"></ftui-clock>
</ftui-cell>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Das sieht in meinem Fall dann so aus, wie im angehängten Bild.
Ich finde, die sehen besser aus, als jede mit css zusammengefrickelte Analoguhr. ::)
Hallo zusammen
Besteht die Möglichkeit sich im Button ein Image anzeigen zulassen?
Habe es so probiert, Button funktioniert, aber Image wird nicht angezeigt. Der Pfad zum Bild korrekt
<ftui-column height="80px">
<ftui-button fill="transparent"
[value]="{{device}}"
(value)="{{device}}"
states="favorites SWR3">
<ftui-image src="http://192.168.2.30:82/images/radio/radio_swr3.png" width="100"></ftui-image>
</ftui-button>
<ftui-label>SWR3</ftui-label>
</ftui-column>
Grüsse
Zitat von: grossmaggul am 13 Dezember 2020, 13:37:52
Das lässt sich doch relativ einfach selber einbinden.
Ich finde, die sehen besser aus, als jede mit css zusammengefrickelte Analoguhr. ::)
ich fand meine angepaßte gar nicht so schlecht, schau mal mein Screenshot 1... sie passt zumindest in mein Design.
Aber mal schauen ob man das auf dieser Seite evtl. hinbekommt. ;)
EDIT:/7 jetzt erinnere ich mich... daher habe ich meine ja ;)
Ich habe aber nochmal eine Frage wie bekomme ich die Icons "größer" und "enger" zusammen, denn "large" bringt nicht unbedingt ein viel größeres Icon zustande, klar könnte ich mir eine weitere Klasse bauen, aber evtl. übersehe ich was.?
Screenshot 2
Übrigens die Icons sind nicht der Burner, da fehlen ja sämtliche Rollladen Icons, denke aber da wir noch in einer sehr frühen Phase sind kommt das später, würde da gerne noch die "oa_icons" nutzen.
Zitat von: moonsorrox am 13 Dezember 2020, 15:55:41
ich fand meine angepaßte gar nicht so schlecht, schau mal mein Screenshot 1... sie passt zumindest in mein Design.
Aber mal schauen ob man das auf dieser Seite evtl. hinbekommt. ;)
Ich habe aber nochmal eine Frage wie bekomme ich die Icons "größer" und "enger" zusammen, denn "large" bringt nicht unbedingt ein viel größeres Icon zustande, klar könnte ich mir eine weitere Klasse bauen, aber evtl. übersehe ich was.?
Screenshot 2
Übrigens die Icons sind nicht der Burner, da fehlen ja sämtliche Rollladen Icons, denke aber da wir noch in einer sehr frühen Phase sind kommt das später, würde da gerne noch die "oa_icons" nutzen.
Die Größen heißen jetzt size-0, size-1, size-2...
OA icons kannst du nutzen z.B. so
<ftui-icon class="size-1"
path="../images/openautomation"
[name]="Unifi:Viera | map('.*:it_television')"
[color]="Unifi:Viera | map('connected:mygreen, disconnected:grey')">
</ftui-icon>
Gruß
Eisix
Zitat von: octek0815 am 13 Dezember 2020, 16:00:06
Die Größen heißen jetzt size-0, size-1, size-2...
DANKE
ich hatte im github nur "small" | "normal" | "large" gefunden, weil bei den Icons auch normal drin stand... etwas verwirrend, dann werde ich das mal mit den Größen machen.
Zitat von: Eisix am 13 Dezember 2020, 16:00:16
OA icons kannst du nutzen z.B. so
<ftui-icon class="size-1"
path="../images/openautomation"
[name]="Unifi:Viera | map('.*:it_television')"
[color]="Unifi:Viera | map('connected:mygreen, disconnected:grey')">
</ftui-icon>
Gruß
Eisix
super danke werde ich gleich mal einbauen
Zitat von: grossmaggul am 13 Dezember 2020, 13:37:52
Das lässt sich doch relativ einfach selber einbinden.
ist die Uhr bei dir zu sehen:?
Ich hatte nämlich gestern schon probiert und deshalb heute meine Frage, denn bei mir ist keine Uhr zu sehen und da dachte ich mir, dass es nicht funktioniert mit diesen Parametern :-\
Ich denke man braucht noch ein svg Icon, sonst wird das wohl nichts :D ;)
Zitat von: Eisix am 13 Dezember 2020, 16:00:16
OA icons kannst du nutzen z.B. so
<ftui-icon class="size-1"
path="../images/openautomation"
[name]="Unifi:Viera | map('.*:it_television')"
[color]="Unifi:Viera | map('connected:mygreen, disconnected:grey')">
</ftui-icon>
Gruß
Eisix
Der Iconname ändert sich doch nie?
Dann würde auch ein
name="it_television"ausreichen
Zitat von: setstate am 13 Dezember 2020, 17:05:05
Der Iconname ändert sich doch nie?
Dann würde auch ein
name="it_television"
ausreichen
besser wäre es dies gleich in einer *.css Datei unterzubringen
Zitat von: Eisix am 11 Dezember 2020, 13:00:49
Hallo,
ja habe ich hier schon mal gepostet
<ftui-chart title="Schildkröten">
<ftui-chart-data label="Schildkröten" color="#21a000" log="logdb" file="-" spec="Sensor_Schildies:temperature"></ftui-chart-data>
<ftui-chart-data label="morgen" color="blue" log="lp" spec="FileLog:Schildis_TempMin,offset=60*60*24:4:Wetter.fc1_tempMin::"></ftui-chart-data>
<ftui-chart-data label="kritisch" color="#ff0000" log="lp" file="-" spec="ConstY:4"></ftui-chart-data>
<ftui-chart-data label="aussen" fill background-color="#ffad33" color="#ff9900" log="logdb" file="-" spec="Sensor_aussen:CleanTemp"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Gruß
Eisix
Hallo,
Danke für den Hinweis.
funktioniert jetzt halbwegs, aber wie kann ich den Zeitraum eines Charts eingrenzen?
Das Modul "Buienradar" liefert die readings rainDataStart und rainDataEnd mit einer Uhrzeit z.B. 18:35 für Start und 20:10 für Ende.
Wie kann ich das so an den Chart übergeben, das auch nur dieser Bereich angezeigt wird?
VG
Olli
was mich jetzt nochmal interessiert, auf welchen Android Systemen läuft denn die Version 3.
Ich habe gerade mit erschrecken festgestellt auf meinem Samsung Tablet geht gar nichts nur weiss und alles was geschreiben wurde steht auf der ersten Seite.
Ich weiß gar nicht welches Android das ist, aber nicht mehr ganz frisch.
Zitat von: moonsorrox am 13 Dezember 2020, 18:11:52
was mich jetzt nochmal interessiert, auf welchen Android Systemen läuft denn die Version 3.
Ich habe gerade mit erschrecken festgestellt auf meinem Samsung Tablet geht gar nichts nur weiss und alles was geschreiben wurde steht auf der ersten Seite.
Ich weiß gar nicht welches Android das ist, aber nicht mehr ganz frisch.
Wurde schon mal gefragt...
https://caniuse.com/?search=es6
Zitat von: moonsorrox am 13 Dezember 2020, 18:11:52
was mich jetzt nochmal interessiert, auf welchen Android Systemen läuft denn die Version 3.
Ich habe gerade mit erschrecken festgestellt auf meinem Samsung Tablet geht gar nichts nur weiss und alles was geschreiben wurde steht auf der ersten Seite.
Ich weiß gar nicht welches Android das ist, aber nicht mehr ganz frisch.
Am Android liegt das nicht. Einfach einen aktuellen Chromium Browser per apk installieren.
Edit: Ich muss das relativieren: neuere Chrome Version gibt es nur ab einer bestimmten Android Version.
Android 4.2 kann nur bis Chrome 70+, wird also nicht unterstützt.
Es braucht schon Chrome 80+. Ich habe ein Android 6 hier, da ist ein Chromium 81 drauf, damit läuft es.
Edit2: Ohne die Nutzung von Optional chaining '?.' , würde auch Chrome 70+ funktionieren und ich müsste mein Uralt-Tablet nicht ersetzen.
Zum Testen habe ich mal auf dem iPad geschaut...
Ich brauche es zwar nicht auf dem iPad, aber Safari kann das auch nicht so richtig
@setstate
Betrifft das mit dem Popup nur mich? Bei mir werden die popups nur im aktuellen Grid gezeigt und nicht im globalen.
Gruß
Eisix
Ich habe noch kein Popup im Einsatz, bin da leider noch nicht soweit
Zitat von: Eisix am 13 Dezember 2020, 20:11:11
@setstate
Betrifft das mit dem Popup nur mich? Bei mir werden die popups nur im aktuellen Grid gezeigt und nicht im globalen.
Gruß
Eisix
Das Popup muss man im Hauptgrid ansiedeln. Der Trigger zum Öffnen kann dann aber im Subgrid liegen.
Edit: Gerade probiert. Es würde auch im Subgrid funktionieren, wenn man
.overlay {
position: fixed;
setzt. Wenn ich keine Nachteile finde, checke ich das so ein.
Zitatist die Uhr bei dir zu sehen:?
Ja, ist bei mir zu sehen, s.u.
ZitatZum Testen habe ich mal auf dem iPad geschaut...
Was für ein iPad denn? Auf meinem iPad 2017 läuft's einwandfrei.
Ja mit der Uhr habe ich hinbekommen, wie geschrieben es fehlte das svg :-\
Ich habe nicht das Neuste iPad, aber das mit dem A10, ich glaube is nen 2018er, also eine Generation vor dem Neuesten.
Aber du siehst ja mein Screenshot, da ist einiges verschoben im oberen Menü zum Beispiel und die Uhr auch zu groß.
Im Firefox ist alles gut....
Habe die aktuelle iOS...
Aber wie gesagt war nur ein Test, ich nutze ja das iPad dafür nicht.
Hast Du mal mit den Parametern rumgespielt?
<!-- <ftui-grid cols="30" rows="20" resize> -->
<ftui-grid base-width="100" base-height="80" margin="5">
<!-- <ftui-grid responsive> -->
Edit: Gerade probiert. Es würde auch im Subgrid funktionieren, wenn man
.overlay {
position: fixed;
setzt. Wenn ich keine Nachteile finde, checke ich das so ein.
[/quote]
Kann bestätigen das es so wieder funktioniert. Nachteile konnte ich bis jetzt keine feststellen.
Gruß
Eisix
Zitat von: grossmaggul am 14 Dezember 2020, 09:44:56
Hast Du mal mit den Parametern rumgespielt?
<!-- <ftui-grid cols="30" rows="20" resize> -->
<ftui-grid base-width="100" base-height="80" margin="5">
<!-- <ftui-grid responsive> -->
da habe ich nichts verändert, schaue ich mal
Zitat von: setstate am 13 Dezember 2020, 18:43:15
Am Android liegt das nicht. Einfach einen aktuellen Chromium Browser per apk installieren.
Ich nutze kein Chromium Browser, ich nutze den Fully Browser... der ist vom 29.11.2020
Dann ist da aber irgendwas anderes bei Dir im Argen, ich nutze auf einem Android 8 Handy auch Fully und das klappt einwandfrei.
Zitat von: grossmaggul am 14 Dezember 2020, 14:46:14
Dann ist da aber irgendwas anderes bei Dir im Argen, ich nutze auf einem Android 8 Handy auch Fully und das klappt einwandfrei.
Ja.. glaube ich auch
momentan bin ich grad etwas verzweifelt, warum..?
Ich habe folgendes gemacht, alles mit der Original Demo dabei ist folgendes raus gekommen.
folgende Geräte habe ich zum Anzeigen mal getestet
Firefox, Edge, iPad, Lenovo Android Tablet, alle zeigen es richtig an, nur mein Samsung zeigt ne weiße Seite
Auf Android nutze ich den Fully Browser.
Jetzt habe ich meine Anpassungen genommen, heißt index.html, ftui.css, ftui-theme.css und der Firefox und mein Lenovo Tablet zeigen es richtig an, also kann da soviel nicht falsch sein, denke ich..!! :-\
Alle anderen Geräte machen da irgendwelche Verschiebungen und das Samsung Tablet weigert sich wieder mit einer weißen Seite
Achso der Edge zeigt es auch richtig an, ist aber jetzt glaube ich ein Chromium Unterbau.
Wo fange ich jetzt am besten an.?
Hallo,
wie kann ich bei chart nur einen bestimmten Bereich anzeigen lassen.
Das FHEM Modul Buienradar liefert die Readings rainDataStart und rainDataEnd im Format HH:mm
Ich weiß aber nicht wie ich die an Chart übergeben kann.
Leider geht als Anzeigezeitraum hour, day oder week.
Bei Day ist die Anzeige zu klein und nur der Bereich ausgefüllt den der Logproxy zurück liefert.
Und bei Hour ist das leider so das nur die aktuelle Stunde angezeigt wird auch wenn diese schon fast zu Ende ist.
Hier der FTUI3 Code...
<ftui-chart title="Regenvorhersage" type="bar" unit="hour">
<ftui-chart-data log="System_logProxy" spec='Func:FHEM::Buienradar::LogProxy("System_Regenvorhersage")' [update]="System_Regenvorhersage:rainDataStart:time"
startDate="System_Regenvorhersage:rainDataStart:time" endDate="System_Regenvorhersage:rainDataEnd:time"></ftui-chart-data>
</ftui-chart>
Ich baue auf eure Hilfe. Danke!
VG
Olli
Die Chart Komponente unterstützt bisher nur die fixen Zeitbereiche.
Ich hab aber auf meiner Todo-Liste hier noch relative Zeitbereiche als PullRequest nachzuliefern.
Also die letzten x Tage, Stunden, ...
Das was du mit startDate und endDate versuchst klappt so nicht, da die angezeigte Zeitspanne über die Chart-Komponente gewählt wird und nicht über die Subkomponenten (Chart-Date).
(Es kann eben nur einen angezeigten Zeitraum geben.)
Chart setzt startDate und endDate in seinen Subkomponenten bevor der Datenabruf erfolgt,
damit diese wissen für welchen Zeitraum sie Daten laden müssen.
Wenn du da händisch einzugreifen versuchst, überschreibt die Chart-Komponente das wieder.
Zitat von: Thyraz am 15 Dezember 2020, 20:25:41
Die Chart Komponente unterstützt bisher nur die fixen Zeitbereiche.
Ich hab aber auf meiner Todo-Liste hier noch relative Zeitbereiche als PullRequest nachzuliefern.
Also die letzten x Tage, Stunden, ...
Das was du mit startDate und endDate versuchst klappt so nicht, da die angezeigte Zeitspanne über die Chart-Komponente gewählt wird und nicht über die Subkomponenten (Chart-Date).
(Es kann eben nur einen angezeigten Zeitraum geben.)
Chart setzt startDate und endDate in seinen Subkomponenten bevor der Datenabruf erfolgt,
damit diese wissen für welchen Zeitraum sie Daten laden müssen.
Wenn du da händisch einzugreifen versuchst, überschreibt die Chart-Komponente das wieder.
Alles klar, vielen Dank für Deine ausführliche Antwort.
Dann freue ich mich auf die zukünftigen Ergänzungen.
VG
Zitat von: LuGu am 09 Dezember 2020, 22:12:44
@setstate
Mir ist heute beim ersten Schneefall aufgefallen, dass beim meteocons icon set N/A angezeigt wird.
In der weather.map.js scheinen noch ein paar Mappings zu fehlen, für die aber ja icons vorhanden sind.
'Schneefall': './icons/snowy2.svg',
'Schneeschauer': './icons/snowy,svg',
und vielleicht auch noch
'Gewitter': './icons/lightning1.svg',
'Nebel': './icons/lines,svg',
Könntest Du das bei Gelegenheit mal bitte ergänzen?
@setstate
Hier hat sich eine Fehler eingeschlichen. Da sind "," anstatt "." verwendet worden.
Dies verursacht einen unschönen Fehler (Die FHEM Webseite wird eingeblendet) bei Verwendung.
Bei...
'Schneeschauer': './icons/snowy,svg',
müsste es snowy.svg heißen
und bei..
'Nebel': './icons/lines,svg',
müsste es lines.svg heißen und das Komma am Ende muss weg.
VG
Olli
Danke, das habe ich gestern auch gefunden und schon gefixed. Muss ich nur noch hochladen.
Zitat von: octek0815 am 16 Dezember 2020, 10:49:35
Hier hat sich eine Fehler eingeschlichen. Da sind "," anstatt "." verwendet worden.
@octek0815
Danke, muss ich wohl doch mal über eine Brille nachdenken.
Gruß
Lutz
@setstate
@Thyraz
Ich möchte hier mal zwei Varianten von Tabellen zeigen und fragen, was läuft hier nicht richtig..?
Vorab noch im Screenshot rechts habe ich die Bezeichnung "Eingang Norden" absichtlich nciht ausgeschrieben, denn sobald ich das "e" dran setze ruscht das Wort Norden unter Eingang :-\ weiß ich auch noch nicht warum das nicht geht, es sind ja in beiden 13 Buchstaben + Leerzeichen.
1. Screenshot ist auf dem Firefox und ebenfalls auf dem Microsoft Edge.
keine Probleme alles sieht gut aus
2. Screenshot auf meinem Lenovo Tablet mit dem Fully Browser, ich nutze dieses Tablet nur um die Anzeigen zu kontrollieren.
links passen die Abstände von Temperatur und Luftfeuchte nciht und es ragt nach unten heraus
rechts passen die ABstände gut, aber auch hier ragt es nach unten heraus.
3. Google Chrome geht gar nciht :-\ :-* da ist das gesamte Layout zerschossen
Hier die beiden Code Schnippsel zum drüber schauen, ich verzweifel hier an den Darstellungen, evtl. sieht jemand was hier falsch ist.
<!-- Seite 1 - START -->
<ftui-tab-view id="Temperaturen">
<ftui-grid-tile row="4" col="2" height="10" width="8" class="semitransparent3d">
<!--div class="size-10">Tab2</div-->
<!--table class="size-3" style="margin-left:4%; margin-right:4%; margin-bottom:4%; width:90%; height:95%; line-height:0.75em;"-->
<table class="size-3" style="margin-left:-1%; margin-right:1%; height:95%;">
<tr>
<td style="text-align:left;">
<div>Wohnzimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Wohnzimmer:temperature" [color]="Temperatur_Wohnzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)" [color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Küche</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Kueche:temperature" [color]="Temperatur_Kueche:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)" [color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>HWR</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature" [color]="Temperatur_HWR_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)" [color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Gäste WC</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature" [color]="Temperatur_GWC_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)" [color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Badezimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp" [color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)" [color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Schlafzimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Schlafzimmer:temperature" [color]="Temperatur_Schlafzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)" [color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Gästezimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature" [color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)" [color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')")><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Arbeitszimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature" [color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)" [color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">
<div>Garage</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Garage:temperature" [color]="Temperatur_Garage:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Garage:humidity | fix(0)" [color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Eingang Norden</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Norden:temperature" [color]="Temperatur_Norden:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Norden:humidity | fix(0)" [color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Terrasse Süden</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Terrasse:temperature" [color]="Temperatur_Terrasse:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)" [color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">
<div>Helligkeit</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Terrasse:luminosity | fix(1)"><span slot="end" style="margin-left:-0.5em;" class="size-1"> Lux</span></ftui-label>
</td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">
<div>Luftdruck</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)" [color]="Temperatur_Terrasse:pressure | map(' 1015: crimson, 1005: mediumpringreen, 0: mediumblue')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> hPa</span></ftui-label>
</td>
<td></td>
</tr>
</table>
</ftui-grid-tile>
<!---- ######################################## ------>
<ftui-grid-tile row="4" col="20" height="10" width="8" class="semitransparent3d">
<ftui-row class="size-3">
<ftui-column align-items="left" margin="1">
<ftui-label text="Wohnzimmer"></ftui-label>
<ftui-label text="Küche"></ftui-label>
<ftui-label text="HWR"></ftui-label>
<ftui-label text="Gäste WC"></ftui-label>
<ftui-label text="Badezimmer"></ftui-label>
<ftui-label text="Schlafzimmer"></ftui-label>
<ftui-label text="Gästezimmer"></ftui-label>
<ftui-label text="Arbeitszimmer"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Garage"></ftui-label>
<ftui-label text="Eingang Norde"></ftui-label>
<ftui-label text="Terrasse Süden"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Helligkeit"></ftui-label>
<ftui-label text="Luftdruck"></ftui-label>
</ftui-column>
<ftui-column align-items="right">
<ftui-label [text]="Temperatur_Wohnzimmer:temperature"
[color]="Temperatur_Wohnzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:temperature"
[color]="Temperatur_Kueche:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature"
[color]="Temperatur_HWR_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature"
[color]="Temperatur_GWC_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp"
[color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:temperature"
[color]="Temperatur_Schlafzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature"
[color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature"
[color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:temperature"
[color]="Temperatur_Garage:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:temperature"
[color]="Temperatur_Norden:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:temperature"
[color]="Temperatur_Terrasse:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:luminosity | fix(1)"><span slot="end" style="margin-left:-0.5em;" class="size-1"> Lux</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)"
[color]="Temperatur_Terrasse:pressure | map(' 1015: crimson, 1005: mediumpringreen, 0: mediumblue')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> hPa</span></ftui-label>
</ftui-column>
<ftui-column align-items="center">
<ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)"
[color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)"
[color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)"
[color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)"
[color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)"
[color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:humidity | fix(0)"
[color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:humidity | fix(0)"
[color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)"
[color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
</ftui-tab-view>
<!-- Seite 1 - ENDE -->
Darf ich mal fragen warum Du <table> benutzt und nicht die von ftui3 bereitgestellten <ftui-row> und <ftui-column>?
Soweit ich weiß sind die <table> Konstrukte schon lange "böse".;)
Das habe ich nur zum ausprobieren erstellt.. :D, wollte ich aber nicht mehr nutzen, da ich es zuletzt noch in Version 2.7.x
Der Code zum rechten Bild besteht ja aus <ftui-row><ftui-column>, aber auch hier stellt er unter Android die Schrift nach unten raus.
Ich habe dort keine Formatierung mit css drin. Das hatte ich in deinem Code gesehen, wie diese 3 Spalten dargestellt werden und habe eben nur erweitert :-\
Hast Du mal mit <ftui-grid base_x> experimentiert?
Vielleicht erst mal mit einfacherem Code anfangen und dann nach und nach erweitern.
ZitatDas habe ich nur zum ausprobieren erstellt.. :D, wollte ich aber nicht mehr nutzen, da ich es zuletzt noch in Version 2.7.x
O.K., dann erteile ich Dir hiermit Absolution, mein Sohn. ;) ;D
Hallo zusammen
Folgenden Effekt habe ich festgestellt - Möchte mir an 2 unterschiedlichen Pages die Temperatur von einem Device anzeigen lassen, es wird auf einer von den 2 Seiten nicht immer angezeigt. Lasse ich es nur auf einer Seite anzeigen funktioniert es ohne Probleme.
auf der index.html lasse ich mir im Header Temp anzeigen:
<a class="navbar-brand"><ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature"><span slot="end">°C</span></ftui-label></a>
<a class="navbar-brand"><ftui-label [text]="netatmo_D70_ee_50_06_78_96:temperature"><span slot="end">°C</span></ftui-label></a>
dann auf meiner content_klima.html auch noch einmal
<ftui-view>
<ftui-title>Klima</ftui-title>
<ftui-page-section>
<ftui-content class="no-ftui-content" file="template/template_ klima_1er.html" name="Garten" device="netatmo_M02_00_00_06_7e_16"></ftui-content>
<div style="margin:8px;display:inline-block;height:1px;width:100%;background-color:#4F4F4E"></div>
<ftui-content class="no-ftui-content" file="template/template_ klima_1er.html" name="Wohnzimmer" device="netatmo_D70_ee_50_06_78_96"></ftui-content>
<div style="margin:8px;display:inline-block;height:1px;width:100%;background-color:#4F4F4E"></div>
</ftui-page-section>
</ftui-view>
template_ klima_1er.html
<ftui-row height="43.875px">
<ftui-column>
<ftui-label class="align-left" >{{name}}</ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="bars" class="size-0" popup-target="{{name}}"></ftui-icon>
</ftui-column>
<ftui-column>
<ftui-label [text]="{{device}}:temperature" ><span slot="end">°C</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="{{device}}:humidity"><span slot="end">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-popup id="{{name}}" timeout="0" width="400px" height="400px">
<header>{{name}}</header>
<ftui-row>
<ftui-chart title="{{name}}" unit="day" prefetch="21600" extend>
<ftui-chart-data label="Temperatur" point-radius="0" tension="0.3" fill color="#27ae60" log="DBLogging" file="history" spec="{{device}}:temperature"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
</ftui-row>
</ftui-popup>
Jemand eine Idee warum sich das so verhält?
Grüsse
Hallo,
wie kann ich beim drücken eines Buttons den Wert eines Devices um eins addieren oder um eins subtrahieren?
Grüße
Olli
Zitat von: grossmaggul am 17 Dezember 2020, 09:30:00
O.K., dann erteile ich Dir hiermit Absolution, mein Sohn. ;) ;D
;) :D
Zitat von: grossmaggul am 17 Dezember 2020, 09:30:00
Hast Du mal mit <ftui-grid base_x> experimentiert?
Vielleicht erst mal mit einfacherem Code anfangen und dann nach und nach erweitern.
ich habe tatsächlich ganz klein angefangen und hatte dafür das Beispiel von dir mit dem Thermostat und den Batterieanzeigen genommen und war eigentlich damit zufrieden als ich es am Firefox angeschaut habe... dann aber eben auf dem Tablet war enttäuschend :-\
Das
<ftui-grid base_x> hatte ich ausprobiert und werde ich nochmals versuchen, ich habe dafür bisher keine Erklärung im github gefunden was es genau bedeutet und deshalb habe ich dann gewechselt auf Reihen und Spalten
<ftui-grid cols="32" rows="22" resize margin="2">
<!--ftui-grid base-width="70" base-height="70" margin="5"-->
</ftui-grid>
aber trotzdem sollte doch in meinem Fall die gesamte Schrift der Temperaturen in dem Container/Block mit
<ftui-grid-tile row="4" col="20" height="10" width="8" class="semitransparent3d">
.....
</ftui-grid-tile>bleiben und nicht nach oben und unten ausbrechen.. :-\
Zitataber trotzdem sollte doch in meinem Fall die gesamte Schrift der Temperaturen in dem Container/Block mit
...
bleiben und nicht nach oben und unten ausbrechen..
Sollte wohl nicht, aber da wird wohl eher setstate was zu sagen können.
Hallo,
das ausbrechen hatte ich auch schon nach unten. Interessanterweise nur wenn kein Anderes Grid-Tile sich darunter befindet. Habe einfach mal auf der Seite unten sozusagen einen Balken eingezogen dann war es ok.
Was mir auch noch aufgefallen ist beim bauen einer Fernbedienung ist, die ftui-buttons beanspruchen unterschiedlich viel Platz in X-Richtung. Wenn man dann mehrere rows mit unterschiedlichen Typen (fill, shape) kombiniert passen die Abstände nicht mehr.
Mit dem bösen Table ging das dann Problemlos.
Gruß
Eisix
ich habe jetzt mal
<ftui-grid base-width="100" base-height="80" margin="2">
genommen, da bekomme ich ein riesen Bild mit Scrollleisten, dass heißt er scheibt sich nicht autoamtisch zusammen.
Was ich noch probiert habe ist folgendes
<ftui-grid responsive margin="2">
hier bleibt die gesamte Ansicht mit Backgroundbild immer zentriert und passt sich gut ein, soll heißen auch die Schrift bleibt im Container, aber...
ab einer bestimmten Größe ich sage jetzt mal auf meinem 10" Tablet schiebt sich die Schrift wieder nach oben und unten raus aus dem
<ftui-grid-tile>Inhalt siehe code</ftui-grid-tile>
<ftui-grid-tile row="4" col="20" height="10" width="8" class="semitransparent3d">
<ftui-row class="size-3">
<ftui-column align-items="left" margin="1">
<ftui-label text="Wohnzimmer"></ftui-label>
<ftui-label text="Küche"></ftui-label>
<ftui-label text="HWR"></ftui-label>
<ftui-label text="Gäste WC"></ftui-label>
<ftui-label text="Badezimmer"></ftui-label>
<ftui-label text="Schlafzimmer"></ftui-label>
<ftui-label text="Gästezimmer"></ftui-label>
<ftui-label text="Arbeitszimmer"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Garage"></ftui-label>
<ftui-label text="Eingang Norde"></ftui-label>
<ftui-label text="Terrasse Süden"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Helligkeit"></ftui-label>
<ftui-label text="Luftdruck"></ftui-label>
</ftui-column>
<ftui-column align-items="right">
<ftui-label [text]="Temperatur_Wohnzimmer:temperature"
[color]="Temperatur_Wohnzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:temperature"
[color]="Temperatur_Kueche:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature"
[color]="Temperatur_HWR_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature"
[color]="Temperatur_GWC_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp"
[color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:temperature"
[color]="Temperatur_Schlafzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature"
[color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature"
[color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:temperature"
[color]="Temperatur_Garage:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:temperature"
[color]="Temperatur_Norden:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:temperature"
[color]="Temperatur_Terrasse:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:luminosity | fix(1)"><span slot="end" style="margin-left:-0.5em;" class="size-1"> Lux</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)"
[color]="Temperatur_Terrasse:pressure | map(' 1015: crimson, 1005: mediumpringreen, 0: mediumblue')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> hPa</span></ftui-label>
</ftui-column>
<ftui-column align-items="center">
<ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)"
[color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)"
[color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)"
[color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)"
[color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)"
[color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:humidity | fix(0)"
[color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:humidity | fix(0)"
[color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)"
[color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
die "böse" Tabelle dei ich immer noch als Test drin habe sieht wiederum sehr gut aus und es passt alles.. :-\
Aber mit Tabelle wollte ich jetzt nicht mehr arbeiten.
ich denke wir sollten mal auf eine Antwort von setstate warten, weil ich ehrlich gesagt noch nicht weiß welches Layout nun was genau tut.
Wenn ich in einem s.g. Container Inhalt habe, dann sollte der normalerweise nicht ausbrechen, sondern sich eher zusammen schieben, bis sich sage ich mal die einzelnen Zeilen übereinander schieben und unleserlich werden, dann erst weiß ich Ok es ist zu wenig Platz, aber so kann ich vergrößern und vergrößern die Schrift bleibt trotzdem ausserhalb.
Ich habe jetzt nochmal eine Aktualisierung vorgenommen:
Ich arbeit aktuell noch mit dem "responsiven" Layout
Screenshot 1 ist auf dem PC mit Firefox hier wird alles wunderbar angezeigt
Screenshot 2 auf meinem geößeren Tablet, hier wird die Schrift nach oben und unten heraus geschoben weil die beiden Temperatur Namen zu lang sind schreibt er die untereinander, ansonsten würde es wohl gehen ich experimentiere weiter... ;)
Links ist immer noch die" böse" Tabelle die bei beiden Screenshots die Namen der beiden Außentemperaturen richtig anzeigt, aber auch auf dem Tablet 2. Screenshot nach unten raus schiebt.
Rechts ist aber das Code Layout welches ich nutzen möchte..!!
Hier noch mal der Code dazu.
<ftui-grid-tile row="4" col="20" height="11" width="9" class="semitransparent3d">
<ftui-row class="size-3">
<ftui-column align-items="left" margin="1">
<ftui-label text="Wohnzimmer"></ftui-label>
<ftui-label text="Küche"></ftui-label>
<ftui-label text="HWR"></ftui-label>
<ftui-label text="Gäste WC"></ftui-label>
<ftui-label text="Badezimmer"></ftui-label>
<ftui-label text="Schlafzimmer"></ftui-label>
<ftui-label text="Gästezimmer"></ftui-label>
<ftui-label text="Arbeitszimmer"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Garage"></ftui-label>
<ftui-label text="Eingang Norden"></ftui-label>
<ftui-label text="Terrasse Süden"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Helligkeit"></ftui-label>
<ftui-label text="Luftdruck"></ftui-label>
</ftui-column>
<ftui-column align-items="right">
<ftui-label [text]="Temperatur_Wohnzimmer:temperature"
[color]="Temperatur_Wohnzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:temperature"
[color]="Temperatur_Kueche:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature"
[color]="Temperatur_HWR_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature"
[color]="Temperatur_GWC_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp"
[color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:temperature"
[color]="Temperatur_Schlafzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature"
[color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature"
[color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:temperature"
[color]="Temperatur_Garage:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:temperature"
[color]="Temperatur_Norden:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:temperature"
[color]="Temperatur_Terrasse:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> °C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:luminosity | fix(1)"><span slot="end" style="margin-left:-0.5em;" class="size-1"> Lux</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)"
[color]="Temperatur_Terrasse:pressure | map(' 1015: crimson, 1005: mediumpringreen, 0: mediumblue')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> hPa</span></ftui-label>
</ftui-column>
<ftui-column align-items="center">
<ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)"
[color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)"
[color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)"
[color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)"
[color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)"
[color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:humidity | fix(0)"
[color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:humidity | fix(0)"
[color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)"
[color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1"> %</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
ich habe jetzt die Schrift mal auf size-2 geändert, ist etwas klein, aber damit kann ich Leben, wenn ich jetzt mit allem so weitermache wäre ich schon zufrieden... ;)
Was ich mir immer als Hilfe nutze ist eine Seite, wo ich mal eben schnell die Reihen und Spalten nach schauen kann...
Vllt. kann es jemand brauchen (sind allerdings von mir mit css gemachte Farben drin)
<ftui-tab-view id="View9">
<ftui-grid-tile row="1" col="1" height="1" width="32" color="success">row 1 col 1-32
</ftui-grid-tile>
<ftui-grid-tile row="2" col="1" height="1" width="32" color="crimson">row 2 col 1-32
</ftui-grid-tile>
<ftui-grid-tile row="3" col="1" height="1" width="32" color="darkorange">row 3 col 1-32
</ftui-grid-tile>
<ftui-grid-tile row="4" col="2" height="19" width="1" color="ligt">row4-23 col 2
</ftui-grid-tile>
<ftui-grid-tile row="4" col="3" height="19" width="1" color="dark">row5-23 col 3
</ftui-grid-tile>
<ftui-grid-tile row="4" col="4" height="19" width="1" color="medium">row6-23 col 4
</ftui-grid-tile>
<ftui-grid-tile row="4" col="30" height="16" width="1" color="darkgray">row4-19 col 30
</ftui-grid-tile>
<ftui-grid-tile row="4" col="31" height="16" width="1" color="medium">row4-19 col 31
</ftui-grid-tile>
<ftui-grid-tile row="4" col="32" height="16" width="1" color="orange1">row4-19 col 32
</ftui-grid-tile>
<ftui-grid-tile row="4" col="10" height="16" width="1" color="darkviolet">row4-19 col 10
</ftui-grid-tile>
<ftui-grid-tile row="4" col="20" height="16" width="1" color="warning">row4-19 col 20
</ftui-grid-tile>
<ftui-grid-tile row="20" col="5" height="1" width="28" color="orange1">row 20 col 5-32
</ftui-grid-tile>
<ftui-grid-tile row="21" col="5" height="1" width="28" color="royalblue1">row 21 col 5-32
</ftui-grid-tile>
<ftui-grid-tile row="22" col="5" height="1" width="28" color="lightgreen">row 22 col 5-32
</ftui-grid-tile>
</ftui-tab-view>
Zitat von: setstate am 23 November 2020, 11:21:28
Grundsätzlich ist das okay. So subscribe't man sich die Readings.
Aktuelle Probleme:
Wenn das zuvor (beim Init) keiner gemacht hat, bekommt man keine Events, da das Device:Reading dann nicht im Filter für jsonlist und inform mit drin ist.
Also müsste man nach einer Änderung createFilterParameter() rufen, damit das aufgenommen wird und dann die WebSocket Verbindung neu aufbauen.
Weiterhin müsste man vorher das alte Reading unsubsciben. Dafür muss ich erst noch ein unsubscribe() in die Subject Klasse bauen.
Alles nix wildes, aber viele Baustellen noch.
Aktuell hätte ich doch einen Fall, bei dem ich das brauchen könnte.
Wenn man ein Modul für ein fixes FHEM Device baut, macht es ja durchaus Sinn die nötigen Readings "fest zu verdrahten" anstatt den User das manuell (auf die sowieso einzig mögliche Weise) machen zu lassen.
Falls sich da also etwas tut, gern hier informieren. ;)
@Thyraz
Angenommen, die zu abonnierenden Readings stehen von Anfang an fest, dann funktioniert folgender Weg einwandfrei:
Calendar-Komponente mit device-Attribut calendar ... innerhalb von onAttributeChanged:
case 'calendar':
fhemService.getReadingEvents(this.calendar + ':' + 'lastUpdate').subscribe(param => this.onUpdateCalendar(param));
break;
EPG-Komponente mit device-Attribut epg ... innerhalb von onAttributeChanged:
case 'epg':
fhemService.getReadingEvents(this.epg + ':' + 'EPG_last_loaded').subscribe(param => this.onUpdateEPG(param));
break;
@setstate, habe eben durch Zufall diesen Thread gefunden und bin begeistert, das eine neue Version in Arbeit ist. Meine Frage äre, ob es acuh wieder sowas wie den "Rotor" geben wird oder gibt. Ich suche sowas für meine Wetteranzeige, wo ich die Werte im 10 Sekundentakt durchwechseln lasse. Was beim FTUI2 doch rechenintensiv zu sein scheint und den Raspberry teilweise an seine Grenzen bringt.
Gruß
Zitat von: moonsorrox am 17 Dezember 2020, 15:00:09
ich denke wir sollten mal auf eine Antwort von setstate warten, weil ich ehrlich gesagt noch nicht weiß welches Layout nun was genau tut.
nderbar angezeigt
Du musst entweder die Grid base-height größer machen, oder bei kleinen base-height die Grid-Tile height entsprechend höher setzen.
Das Gerät berechnet aus den den Font-Size em einen absoluten px Wert und wenn die Summe der px der Zeilen über die px des Parent-Containers geht, ragt es darüber hinaus. Das sollte man vermeiden, oder eine Behandlung per overflow Regel einbauen: scroll, hidden ...
geht es eigentlich schon mit den "kleinklima" Anzeigen beim Wetter, ich habe bisher noch nichts gefunden. Ich meine die farbigen Icons..?
Zitat von: Eisix am 30 November 2020, 14:09:05
Hallo,
ich wollte sowas wie einen Spinner von FTUI2 realisieren
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value-0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:minus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:blue')"
></ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label
[text]="Heizung.Status_WZ:TempMan"
[color]="Heizung.Status_WZ:TempMan | map('5:blue, 20:mygreen, 23:red')"
class="size-1">
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:plus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:red')"
></ftui-icon>
</ftui-button>
</ftui-cell>
Jemand einen Tip für mich wie ich die Werte übergebe
(value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
Gruß
Eisix
Moin Eisix,
hast Du das irgendwie hinbekommen, mir fehlt der Spinner für die Thermostatsteuerung auch.
Grüße
Olli
Zitat von: moonsorrox am 18 Dezember 2020, 13:18:21
geht es eigentlich schon mit den "kleinklima" Anzeigen beim Wetter, ich habe bisher noch nichts gefunden. Ich meine die farbigen Icons..?
https://forum.fhem.de/index.php/topic,115259.msg1104525.html#msg1104525
@octek0815
Könnte mir vorstellen das es über mapping geht, mir fehlen aber die variablen, sprich momentaner Wert + oder - Änderung und das als set an Fhem
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value-0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:minus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:blue')"
></ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label
[text]="Heizung.Status_WZ:TempMan"
[color]="Heizung.Status_WZ:TempMan | map('5:blue, 20:mygreen, 23:red')"
class="size-1">
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:plus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:red')"
></ftui-icon>
</ftui-button>
</ftui-cell>
Gruß
Eisix
Zitat von: octek0815 am 18 Dezember 2020, 13:37:57
https://forum.fhem.de/index.php/topic,115259.msg1104525.html#msg1104525
Vielen Dank, ich habe immer auf github gesucht ;) :D
setstate schreibt das man sich die Icons selber integrieren muss, ich dachte die kommen vom Wetteranbieter, naja ich probiere mal...
@moonsorrox
Hatte die kleinklima Icons eingebunden als nur .svg unterstützt wurde. Sie liegen aber nur als .png vor und ich habe sie in .svg konvertiert. Somit dürfte einfaches kopieren nicht reichen. Also entweder icons auch konvertieren und in den Pfad
./icons/weather/kleinklima/
oder die weather.map.js entsprechend anpassen. Png sollte mittlerweile auch funktionieren.
Gruß
Eisix
Bzgl. spinner widget
Habe noch etwas gebastelt
<ftui-row shape="round" class="myspinner">
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value-0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:minus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:blue')"
></ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label
[text]="Heizung.Status_WZ:TempMan"
[color]="Heizung.Status_WZ:TempMan | map('5:blue, 20:mygreen, 23:red')"
class="size-4">
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:plus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:red')"
></ftui-icon>
</ftui-button>
</ftui-cell>
</ftui-row>
myspinner custom css
.myspinner {
background-color: #d1d1e0;
border-radius: 25px;
width: 200px;
height: 50px;
}
Wenn mich jetzt noch einer mit der Funktionalität erleuchtet würde mir das reichen ;)
Gruß
Eisix
Zitat von: Eisix am 18 Dezember 2020, 16:46:39
Wenn mich jetzt noch einer mit der Funktionalität erleuchtet würde mir das reichen ;)
Gruß
Eisix
schaue ich mir an, sollte nicht viel sein
Zitat von: Eisix am 18 Dezember 2020, 16:05:09
@moonsorrox
Hatte die kleinklima Icons eingebunden als nur .svg unterstützt wurde. Sie liegen aber nur als .png vor und ich habe sie in .svg konvertiert. Somit dürfte einfaches kopieren nicht reichen. Also entweder icons auch konvertieren und in den Pfad
./icons/weather/kleinklima/
oder die weather.map.js entsprechend anpassen. Png sollte mittlerweile auch funktionieren.
Gruß
Eisix
Ok, also ich muss sie mir ja erst einmal runterladen und das was ich gefunden habe ist auf der Seite bei kleinklima, aber da sind immer nur die aktuellen des Tages drauf.
Die ich gefunden habe das sind alles png da hast du absolut recht, aber so richtig habe ich noch nicht gefunden wie ich den Pfad eintragen muss..
Aber ich mache jetzt erst mal Pause habe den ganzen Tag gebastelt.. ;) :D
was ich irgendwie gar nicht hinbekomme ist so etwas wie es in der Version 2 der "classchanger" gemacht hat.
Eine Frage vorher wie kann ich in meiner reneftui.css Datei einfügen das die oa-Icons verwendet werden können."
Das könnte man ja irgendwo auch für die Zukunft hinterlegen, denn vorher war das möglich, denn die Icons hier sind doch nicht so der Hit, es fehlt mir zuviel.!?
Das heißt:
In einer Spalte ein Text, also das neue Label und in der zweiten Spalte ein Icon und das eben 10 oder mehr untereinander.
dabei ist mir aufgefallen das in dem Fall das zugehörige Icon sehr groß dargestellt wird und der Text davor sehr klein und dadurch ergeben sich Höhenunterschiede welche das gesamte Layout verschiebt. Ich habe mir in dem Fall ein <ftui-grid-tile> gebaut welches eben untereinander eine viel Zahl an devices darstellen kann und eben wenn aktiv das Zeile zu sehen ist ist und wenn inaktiv alles komplett weg ist.
Dann noch dazu, da die Icon SPalte ja recht wenig Platz braucht, kann ich die Breite der Spalte klein halten und dafür die 1.Spalte größer da hier der Text länger sein..
Mit "width" habe ich es nicht geschafft. :-\
Ich hänge mal den Code Versuch ran
<ftui-grid-tile row="11" col="12" height="11" class="">
<ftui-row>
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on:Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on:white')"></ftui-label>
<ftui-label [text]="Uhrzeit:state | map('on:Schlafzimmer Uhr')"</ftui-label>
<ftui-label [text]="BU_4CH:POWER1 | map('on:Büro - LED Leiste Tisch')"</ftui-label>
<!--ftui-label text="4"></ftui-label>
<ftui-label text="5"></ftui-label>
<ftui-label text="6"></ftui-label>
<ftui-label text="7"></ftui-label>
<ftui-label text="8"></ftui-label>
<ftui-label text="9"></ftui-label>
<ftui-label text="10"></ftui-label-->
</ftui-column>
<ftui-column align-items="right" margin="1">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [hidden]="WegLampe_Sw_01:state | map('on:false, off:true')"
[color]="WegLampe_Sw_01:state | map('off:white, on:crimson')"></ftui-icon>
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [hidden]="Uhrzeit:state | map('on:false, off:true')"
[color]="Uhrzeit:state | map('off:white, on:crimson')"></ftui-icon>
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [hidden]="BU_4CH:POWER1 | map('on:false, off:true')"
[color]="BU_4CH:POWER1 | map('off:white, on:crimson')"></ftui-icon>
<!--ftui-label text="14"></ftui-label>
<ftui-label text="15"></ftui-label>
<ftui-label text="16"></ftui-label>
<ftui-label text="17"></ftui-label>
<ftui-label text="18"></ftui-label>
<ftui-label text="19"></ftui-label>
<ftui-label text="20"></ftui-label-->
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
</ftui-column>
Aber wenn du Icons aus und einblendest und die Texte davor nicht, würde ich beide in eine Row stecken, sonst verschiebt sich alles. Die Spalten werden immer gleichmässig verteilt gefüllt.
Hallo zusammen
In meinem Reading habe ich ein "/", das schein mit ftui-icon nicht zu funktionieren:
<ftui-icon [color]="EG_WOH_Controller_HomeCinemaAudio:input | map('Sat/Cbl: green, .*: dark')" name="arrow-circle-o-right"></ftui-icon>
Geht "/" allgemein nicht bei Javascript als "Wert"? Konnte mir erstmal mit
map('Sat.*: green,......
helfen
Grüsse
Zitat von: SirMarco am 19 Dezember 2020, 16:24:30
Hallo zusammen
In meinem Reading habe ich ein "/", das schein mit ftui-icon nicht zu funktionieren:
<ftui-icon [color]="EG_WOH_Controller_HomeCinemaAudio:input | map('Sat/Cbl: green, .*: dark')" name="arrow-circle-o-right"></ftui-icon>
Geht "/" allgemein nicht bei Javascript als "Wert"? Konnte mir erstmal mit
map('Sat.*: green,......
helfen
Grüsse
Moin,
wenn du dieses "`" darum machst sollte es klappen...
map('`Sat/Cbl`: green, .*: dark')"
Grüße
Olli
Zitat von: setstate am 19 Dezember 2020, 14:48:57
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
</ftui-column>
Aber wenn du Icons aus und einblendest und die Texte davor nicht, würde ich beide in eine Row stecken, sonst verschiebt sich alles. Die Spalten werden immer gleichmässig verteilt gefüllt.
das kam evtl. nicht so rüber, aber doch ich möchte immer das Icon und auch den Text ausblenden, ich brauche ja keine Anzeige wenn nichts an oder aktiviert ist, also soll schon Text und Icon weg.. bei Status "off" oder auch manchmal "OFF" oder "closed" je nach dem was gerade im state oder bei Sonoff auch "POWER1" usw.
EDIT:// hier mal ein Beispiel (sieh Screenshot
ich habe 3 Geräte, davon ist das 1. und 3. Gerät jeweils ein und in der Mitte ist es aus. der Code sieht folegndermassen aus, ich verstehe es nicht warum solch ein durcheinander angezeigt wird. Das home1 Zeichen ist nur zur Probe drin, dass gehört aber zum ersten Status Wegbeleuchtung
Was habe ich falsch gemacht.?
Ich bekomme sie auch nicht an den oberen Rand, dann würde es wohl auch besser aussehen.
Später werden es ja mehr Geräte, aber ich möchte erst mal begreifen warum, es so angezeigt wird.
<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
<ftui-row>
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on: Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on: white')"></ftui-label>
<ftui-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>
<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>
<!--ftui-label text="4"></ftui-label>
<ftui-label text="5"></ftui-label>
<ftui-label text="6"></ftui-label>
<ftui-label text="7"></ftui-label>
<ftui-label text="8"></ftui-label>
<ftui-label text="9"></ftui-label>
<ftui-label text="10"></ftui-label-->
</ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')"
[color]="WegLampe_Sw_01:state | map('off: white, on: crimson')"></ftui-icon>
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [hidden]="Uhrzeit:state | map('on: false, off: true')"
[color]="Uhrzeit:state | map('off: white, on: crimson')"></ftui-icon>
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [hidden]="BU_4CH:POWER1 | map('on: false, off: true')"
[color]="BU_4CH:POWER1 | map('off: white, on: crimson')"></ftui-icon>
<!--ftui-label text="14"></ftui-label>
<ftui-label text="15"></ftui-label>
<ftui-label text="16"></ftui-label>
<ftui-label text="17"></ftui-label>
<ftui-label text="18"></ftui-label>
<ftui-label text="19"></ftui-label>
<ftui-label text="20"></ftui-label-->
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Zitat von: moonsorrox am 19 Dezember 2020, 17:09:45
das kam evtl. nicht so rüber, aber doch ich möchte immer das Icon und auch den Text ausblenden, ich brauche ja keine Anzeige wenn nichts an oder aktiviert ist, also soll schon Text und Icon weg.. bei Status "off" oder auch manchmal "OFF" oder "closed" je nach dem was gerade im state oder bei Sonoff auch "POWER1" usw.
EDIT:// hier mal ein Beispiel (sieh Screenshot
ich habe 3 Geräte, davon ist das 1. und 3. Gerät jeweils ein und in der Mitte ist es aus. der Code sieht folegndermassen aus, ich verstehe es nicht warum solch ein durcheinander angezeigt wird. Das home1 Zeichen ist nur zur Probe drin, dass gehört aber zum ersten Status Wegbeleuchtung
Was habe ich falsch gemacht.?
Ich bekomme sie auch nicht an den oberen Rand, dann würde es wohl auch besser aussehen.
Später werden es ja mehr Geräte, aber ich möchte erst mal begreifen warum, es so angezeigt wird.
<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
<ftui-row>
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on: Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on: white')"></ftui-label>
<ftui-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>
<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>
<!--ftui-label text="4"></ftui-label>
<ftui-label text="5"></ftui-label>
<ftui-label text="6"></ftui-label>
<ftui-label text="7"></ftui-label>
<ftui-label text="8"></ftui-label>
<ftui-label text="9"></ftui-label>
<ftui-label text="10"></ftui-label-->
</ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')"
[color]="WegLampe_Sw_01:state | map('off: white, on: crimson')"></ftui-icon>
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [hidden]="Uhrzeit:state | map('on: false, off: true')"
[color]="Uhrzeit:state | map('off: white, on: crimson')"></ftui-icon>
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [hidden]="BU_4CH:POWER1 | map('on: false, off: true')"
[color]="BU_4CH:POWER1 | map('off: white, on: crimson')"></ftui-icon>
<!--ftui-label text="14"></ftui-label>
<ftui-label text="15"></ftui-label>
<ftui-label text="16"></ftui-label>
<ftui-label text="17"></ftui-label>
<ftui-label text="18"></ftui-label>
<ftui-label text="19"></ftui-label>
<ftui-label text="20"></ftui-label-->
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Ich würde das so machen...
<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
<ftui-row [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on: Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [color]="WegLampe_Sw_01:state | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="Uhrzeit:state | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [color]="Uhrzeit:state | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="BU_4CH:POWER1 | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [color]="BU_4CH:POWER1 | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Zitat von: octek0815 am 19 Dezember 2020, 18:27:18
Ich würde das so machen...
<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
<ftui-row [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on: Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [color]="WegLampe_Sw_01:state | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="Uhrzeit:state | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [color]="Uhrzeit:state | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="BU_4CH:POWER1 | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [color]="BU_4CH:POWER1 | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
ja super Olli, dass funktioniert hervorragend, manchmal sieht man echt nicht durch :-\
Das einzige Problem ist eben noch das die Anzeige nicht direkt oben ist... aber ich denke das ist eine Formatierungssache, da kann @setstate etwas zu sagen... denn top-narrow greift hier nicht... hatte ich zum testen drin, aber muss wohl jetzt anders heißen...
Hallo, könnte mir einer zeigen wie ich meine IP Kamera einbinde. In FTUI hatte ich das so gelöst.
<li data-row="2" data-col="1" data-sizey="3" data-sizex="5"> <!-- data-row="Zeile" data-col="Spalte" data-sizex="Breite der Box" data-sizey="Tiefe der Box" -->
<header>TOR</header>
<div data-type="image"
data-url="http://IP:PORT/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=BENUTZERt&-pwd=PASSWORT"
data-size="100%"
class="nocache"></div>
</li>
Danke und weihnachtliche Grüße
Habs schon. Danke
<ftui-grid-tile row="3" col="2" height="4" width="6" shape="round">
<ftui-image
base="http://IP:PORT/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=BENUTZER&-pwd=PASSWORT"
height="250"
width="400"
nocache="false">
</ftui-image>
</ftui-grid-tile>
Zitat von: coolice am 20 Dezember 2020, 11:42:06
Habs schon. Danke
schreibs gern hier rein, ist für alle späteren Suchenden von Vorteil... ;)
Ich weiß nicht ob das überhaupt hier rein passt, denn wenn ich mir den Code von coolice ansehe, hat das mit FTUI3 nicht so allzuviel zu tun, oder?
Zitat von: grossmaggul am 20 Dezember 2020, 14:02:58
Ich weiß nicht ob das überhaupt hier rein passt, denn wenn ich mir den Code von coolice ansehe, hat das mit FTUI3 nicht so allzuviel zu tun, oder?
War auch mein Code aus der Vorgängerversion. Wollte diese in FTUI3 umsetzen.
Ich habe bei dem "altem" FTUI meine LightScene Szenen mit einem switch gesteuert. Wie mache ich das jetzt bei FTUI3 ?
Zitat von: coolice am 20 Dezember 2020, 16:28:37
Ich habe bei dem "altem" FTUI meine LightScene Szenen mit einem switch gesteuert. Wie mache ich das jetzt bei FTUI3 ?
wenn du einen Button meinst womit du schlaten möchtest, dann so
<ftui-button [(value)]="WZ_Schrank" fill="clear">
<ftui-icon class="size-2" [name]="WZ_Schrank:state | map('off:lightbulb-outline, on:lightbulb-on-outline')" [color]="WZ_Schrank:state | map('off:white, on:crimson')"></ftui-icon>
</ftui-button>so als kleines Beispiel, richtig einfügen in deine Struktur mußt du es natürlich noch.
Oder meinstest du etwas anderes.?
Der Befehl den die Lightscen braucht ist ,,set LightSchen scene Licht_gemuetlich. Wenn ich das mit einem Button mache lautet der Befehl ,,set Lightscene Licht_gemuetlich.
@setstate
ich wollte mal fragen ob es zu dem jetzigen Zeitpunkt schon möglich ist ein Popup zu erstellen in welchem ich meine eigenen Hintergrundicons nutzen kann.
Voraussetzung ist allerdings auch das ich die "oa-icons" schon einsetzen kann.
Ich hänge mal ein Screenshot ran wie mein PopUp mit FTUI 2 aussah
Die Icons in grün da ist das jeweilige Gerät "Aus/off und die Icons in Rot da ist das jeweilige Gerät on/Ein, dann habe ich noch Blaue und gelbe für sogenannten Status
Ich hatte diese so eingebunden in FTUI 2, hier nur das Beispiel für das Wohnzimmer:
<div class="hbox" style="margin-top:0px;">
<div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div>
<div class="card"><div data-type="switch" data-device="WZ_Schrank" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_cabinet" data-background-icon="fa-square-o" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Schrank & Vitrine</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_Lampe_TV" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>TV Tisch</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_Stehlampe" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_floor_lamp" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Gruppe<br>Stehlampe</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_Licht_Weihnachten_Sw" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Licht Bogen</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_Marantz" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-audio_volume_high" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Marantz<br>NR 1506</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_TVBildschirm" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-it_television" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Hisense<br>TV</div>
</div>
<div class="card"><div style="margin-top:15px; font-size:160%;" data-type="label" data-device="Temperatur_Wohnzimmer" data-get="temperature" data-limits='[-73,19,25]' data-colors='["#6699FF","#00FA9A","#FF0000"]' data-unit=" °C" data-fix="1"></div>
<div style="margin-top:10px; font-size:110%;">Temperatur<br>Wohnzimmer</div>
</div>
<div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div>
</div>
Im Moment stehe ich da noch auf dem Schlauch ob das überhaupt möglich ist.
Schreenshot ist vom PopUp vorher
Popup und Oa-icons geht. Du kannst alles mögliche an Icons mit path einbinden oder in den icons Ordner kopieren.
Gruß
Eisix
Zitat von: Eisix am 20 Dezember 2020, 22:57:13
Popup und Oa-icons geht. Du kannst alles mögliche an Icons mit path einbinden oder in den icons Ordner kopieren.
Gruß
Eisix
mit den Wetter Icons habe ich hinbekommen, vielen Dank nochmal dafür.
Ich denke wenn ich das per css Datei mache, muss ich nicht jedesmal als Pfad machen, oder.
Ich hatte ein Beispiel von setstate gefunden, das sah so aus
<ftui-icon class="size-2" path="../images/openautomation" name="it_wifi" color="crimson" id="ftui-icon-9" type="svg" rgb=""></ftui-icon>das sind aber nur die beiden Beispiel Icons drin, die er auch bei github hat
wenn ich jetzt da noch mein Hintergrund Icon und das "oa-icon" und dazu einen Button haben möchte, da stehe ich mometan echt im Wald :-\ ;)
Ich habe heute Abend unzählige Versuche gehabt, ich glaube ich brauch eine Pause ich habe nicht mehr hinbekommen.
Ich habe das an einem Beispiel mit meiner Ladestation probiert... einschalten geht aber nichtmehr ausschalten :-\ :-\
das war mein kläglicher Versuch, er schaltet vom Icon her auch, aber tatsächlich das Gerät nicht.
<ftui-button [(value)]="Ladestation_Samsung:state" fill="outline" shape="circle" states="on,off" color="primary" size="normal" direction="horizontal" value="off">
<ftui-icon [name]="Ladestation_Samsung:state | map('on:lightbulb-on, off:lightbulb-off')" id="ftui-icon-8" type="svg" path="icons" name="" color="" rgb=""></ftui-icon>
</ftui-button>
Hallo,
hier mal ein komplexeres Beispiel
<ftui-circlemenu direction="top-half">
<ftui-icon class="size-3"
path="../images/openautomation"
[name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_manual_m, off:power-off')"
[color]="Luefter:state | map('auto:green, man:green, off:green')"
></ftui-icon>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
<ftui-icon name="power-off" color="green"></ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
<ftui-icon class="size-5" color="green">1</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 2">
<ftui-icon class="size-5" color="green">2</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
<ftui-icon class="size-5" color="green">3</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
<ftui-icon class="size-5" color="green">4</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
<ftui-icon class="size-2"
path="../images/openautomation"
name="vent_ventilation_level_automatic"
color="green"
></ftui-icon>
</ftui-button>
</ftui-circlemenu>
<ftui-badge
backgroundcolor="secondary"
[text]="Luefter:stufe">
</ftui-badge>
Wenn du die OA Icons in den ftui icons Pfad kopierst geht es auch ohne path. Generell werden manche Icons noch nicht ganz korrekt angezeigt (z.B.:Icon_Fisch) aber da habe ich noch keine Ursache gefunden.
Gruß
Eisix
Zitat von: coolice am 20 Dezember 2020, 21:45:40
Der Befehl den die Lightscen braucht ist ,,set LightSchen scene Licht_gemuetlich. Wenn ich das mit einem Button mache lautet der Befehl ,,set Lightscene Licht_gemuetlich.
Das hier ist aus den Beispielen
<ftui-button fill="outline" shape="circle"
[value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
(value)="Sonos_Kueche" states="play, pause">
<ftui-icon [name]="Sonos_Kueche:transportState | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
Sonos_Kueche:state | map('play: stop, pause: play')">
</ftui-icon>
</ftui-button>
sollte der gleiche Fall wie bei deinen Szenen sein.
Gruß
Eisix
Jetz muss ich mich auch Mal hier reinhängen...
Was ich bislang gesehen habe "jefällt mir" und ist ziemlichvzackig auf meinem Tablet!
Zitat von: Eisix am 21 Dezember 2020, 09:24:02
Das hier ist aus den Beispielen
<ftui-button fill="outline" shape="circle"
[value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
(value)="Sonos_Kueche" states="play, pause">
<ftui-icon [name]="Sonos_Kueche:transportState | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
Sonos_Kueche:state | map('play: stop, pause: play')">
</ftui-icon>
</ftui-button>
sollte der gleiche Fall wie bei deinen Szenen sein.
Gruß
Eisix
Funktioniert. Danke
Eine Formatierungsfrage, wenn ich ein einem Grid tile mehre Meldungen als Statusmitteilungen habe die ich einblende weil sie "aktiv" oder "on" sind, und es sind andere [hidden] dann teilen sich die aktiven Geräte die Höhe.
Wie erreiche ich das die angezeigten alle nach oben rutschen.? In FTUI 2 funktionierte das mit top-narrow, aber das greift hier nicht.
Als Beispiele mal 5 Reihen untereinander, sind aber viel mehr bei mir
<ftui-grid-tile>
<ftui-row>[hidden]inhalt1</ftui-row>
<ftui-row>[hidden]inhalt2</ftui-row>
<ftui-row>[hidden]inhalt3</ftui-row>
<ftui-row>[hidden]inhalt4</ftui-row>
<ftui-row>[hidden]inhalt5</ftui-row>
</ftui-grid-tile>
Zitat von: Eisix am 18 Dezember 2020, 16:46:39
Bzgl. spinner widget
Habe noch etwas gebastelt
<ftui-row shape="round" class="myspinner">
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value-0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:minus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:blue')"
></ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label
[text]="Heizung.Status_WZ:TempMan"
[color]="Heizung.Status_WZ:TempMan | map('5:blue, 20:mygreen, 23:red')"
class="size-4">
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="Heizung.Status_WZ:TempMan"
(value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
fill="">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:TempMan | map('.*:plus')"
[color]="Heizung.Status_WZ:TempMan | map('.*:red')"
></ftui-icon>
</ftui-button>
</ftui-cell>
</ftui-row>
myspinner custom css
.myspinner {
background-color: #d1d1e0;
border-radius: 25px;
width: 200px;
height: 50px;
}
Wenn mich jetzt noch einer mit der Funktionalität erleuchtet würde mir das reichen ;)
Gruß
Eisix
nach einem kleinen Umbau geht es jetzt so:
<ftui-row class="myspinner">
<ftui-cell>
<ftui-button [value]="dummy2"
(value)="add(-0.5) | dummy2"
states="$value"
fill="">
<ftui-icon class="size-1"
name="minus"
color="blue"></ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label
[text]="dummy2"
[color]="dummy2 | map('5:blue, 20:mygreen, 23:red')"
class="size-4">
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="dummy2"
(value)="add(0.5) | dummy2"
states="$value"
fill="">
<ftui-icon class="size-1"
name="plus"
color="red"></ftui-icon>
</ftui-button>
</ftui-cell>
</ftui-row>
Aber das ganze ein eigene Komponente zu packen, werde ich noch tun
Zitat von: setstate am 22 Dezember 2020, 19:20:52
nach einem kleinen Umbau geht es jetzt so:
<ftui-row class="myspinner">
<ftui-cell>
<ftui-button [value]="dummy2"
(value)="add(-0.5) | dummy2"
states="$value"
fill="">
<ftui-icon class="size-1"
name="minus"
color="blue"></ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label
[text]="dummy2"
[color]="dummy2 | map('5:blue, 20:mygreen, 23:red')"
class="size-4">
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="dummy2"
(value)="add(0.5) | dummy2"
states="$value"
fill="">
<ftui-icon class="size-1"
name="plus"
color="red"></ftui-icon>
</ftui-button>
</ftui-cell>
</ftui-row>
Aber das ganze ein eigene Komponente zu packen, werde ich noch tun
@setstate
Besten Dank, dann kann ich nun die Funktionalität nun einbauen...
Grüße
Olli
PS: Gerade umgebaut: Funktioniert perfekt!
Zitat von: moonsorrox am 22 Dezember 2020, 18:13:57
Eine Formatierungsfrage, wenn ich ein einem Grid tile mehre Meldungen als Statusmitteilungen habe die ich einblende weil sie "aktiv" oder "on" sind, und es sind andere [hidden] dann teilen sich die aktiven Geräte die Höhe.
Wie erreiche ich das die angezeigten alle nach oben rutschen.? In FTUI 2 funktionierte das mit top-narrow, aber das greift hier nicht.
Als Beispiele mal 5 Reihen untereinander, sind aber viel mehr bei mir
<ftui-grid-tile>
<ftui-row>[hidden]inhalt1</ftui-row>
<ftui-row>[hidden]inhalt2</ftui-row>
<ftui-row>[hidden]inhalt3</ftui-row>
<ftui-row>[hidden]inhalt4</ftui-row>
<ftui-row>[hidden]inhalt5</ftui-row>
</ftui-grid-tile>
Ich musste noch etwas Kleines ändern, aber grundsätzlich könnte man das so umsetzen:
Man muss die Rows in der Höhe begrenzen, damit man sie zusammenschieben kann
<ftui-row height="10%">
und dann die Items im Column Container mit align-items="top" dekorieren.
<ftui-column align-items="top">Zusammen beispielhaft ungefähr so:
<ftui-grid-tile row="8" col="5" height="10" width="3">
<ftui-button [(value)]="dummy1">dummy1</ftui-button>
<ftui-button [(value)]="dummy2">dummy2</ftui-button>
<ftui-button [(value)]="dummy3">dummy3</ftui-button>
<ftui-button [(value)]="dummy4">dummy4</ftui-button>
</ftui-grid-tile>
<ftui-grid-tile row="8" col="9" height="10" width="3">
<ftui-column align-items="top">
<ftui-row [hidden]="dummy1 | map('on:false')" color="warning" height="10%">
<ftui-label>dummy1</ftui-label>
</ftui-row>
<ftui-row [hidden]="dummy2 | map('on:false')" color="danger" height="10%">
<ftui-label>dummy2</ftui-label>
</ftui-row>
<ftui-row [hidden]="dummy3 | map('on:false')" color="ok" height="10%">
<ftui-label>dummy3</ftui-label>
</ftui-row>
<ftui-row [hidden]="dummy4 | map('on:false')" height="10%">
<ftui-label>dummy4</ftui-label>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
ich weiß nicht ob ich es an der richtigen Stelle eingesetzt habe, warum..?
Ich sage mal solange es genügen Geräte sind werden die nach oben geschoben, aber wenn es dann nur noch 3 oder 1 Geräte sind, die aktiv sind, teilen die sich das gesamte grid wieder auf.
Vorher war das mit top-narrow so das auch nur einer allein ganz oben stand.
Hier mal 3 Beispiele wie ich das gelöst habe, evtl. habe ich es nicht richtig gemacht.?
<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-row [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on: Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_wall_1" [color]="WegLampe_Sw_01:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Weg hinten ==== -->
<ftui-row [hidden]="WegLampe_Sw_02:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_02:state | map ('on: Beleuchtung Weg hinten')"
[color]="WegLampe_Sw_02:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_uplight" [color]="WegLampe_Sw_02:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Garten ==== -->
<ftui-row [hidden]="AU_Garten:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="AU_Garten:state | map ('on: Beleuchtung Garten')"
[color]="AU_Garten:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_uplight" [color]="AU_Garten:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Terrasse ==== -->
<ftui-row [hidden]="NI3_LichtTerrasse:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="NI3_LichtTerrasse:state | map ('on: Beleuchtung Terrasse')"
[color]="NI3_LichtTerrasse:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_outdoor" [color]="NI3_LichtTerrasse:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Zitat von: octek0815 am 22 Dezember 2020, 19:30:26
@setstate
Besten Dank, dann kann ich nun die Funktionalität nun einbauen...
Grüße
Olli
PS: Gerade umgebaut: Funktioniert perfekt!
Hey Olli, würdest Du mir das Icon ganz oben rechts zur Verfügung stellen?
Ich hatte das Icon als svg. Schon im Internet gefunden, aber bei mir wird es nicht angezeigt... war ja in der Unwetterzentrale im FTUI 2 enthalten.
Frohe Weihnachten, kann mir jemand sagen, wie ich rechts den Spinner und den Button weiter auseinander bekomme ?
<ftui-grid-tile row="9" col="12" height="3" width="8" shape="round">
<ftui-label>TEMPERATUR</ftui-label>
<ftui-row>
<ftui-column>
<table width="100%">
<tr>
<td width="40%">
<ftui-cell>
<ftui-knob [(value)]="OG.wz.TH_Climate:measured-temp"
[color]="OG.wz.TH_Climate:measured-temp | map('18:blue,22:green,23:warning,25:danger')"
width="150" height="100" offset-y="15" type="arc" min="18" max="26" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-label>IST TEMP</ftui-label>
</ftui-cell>
</td>
<td width="20%">
<ftui-cell>
<ftui-knob [(value)]="OG.wz.TH_Climate:desired-temp"
[color]="OG.wz.TH_Climate:desired-temp | map('18:blue,22:green,23:warning,25:danger')"
width="150" height="100" offset-y="15" type="arc" min="18" max="26" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-label>SOLL TEMP</ftui-label>
</ftui-cell>
</ftui-column>
</td>
<td width="60%">
<ftui-column>
<ftui-row class="myspinner">
<ftui-cell>
<ftui-button [value]="OG.wz.TH_Climate:desired-temp"
(value)="add(-0.5) | OG.wz.TH_Climate:desired-temp"
states="$value"
fill="">
<ftui-icon class="size-1"
name="minus"
color="blue"></ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label [text]="OG.wz.TH_Climate:desired-temp"
[color]="OG.wz.TH_Climate:desired-temp | map('5:blue, 20:mygreen, 23:red')"
class="size-6">
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="OG.wz.TH_Climate:desired-temp"
(value)="add(0.5) | OG.wz.TH_Climate:desired-temp"
states="$value"
fill="">
<ftui-icon class="size-1"
name="plus"
color="red"></ftui-icon>
</ftui-button>
</ftui-cell>
</ftui-row>
<ftui-button color="dark"
(value)="OG.wz.TH_Climate:controlMode" states="manual, auto">
<ftui-icon class="size-2" [name]="OG.wz.TH_Climate:controlMode | map('manual: sani_heating_manual, auto: sani_heating_automatic')">
</ftui-icon>
</ftui-button>
</ftui-column>
</td>
</tr>
</table>
</ftui-row>
</ftui-grid-tile>
<table> sollte man nur für richtige Tabellen benutzen, für Messwertlisten zum Beispiel. Aber niemals für das Seitenlayout.
Dir brauchst nur eine ftui-row und darin 3 ftui-columns. Die letzte column bekommt dann ein width="40%", um breiter zu sein.
Zitat von: setstate am 24 Dezember 2020, 11:22:52
<table> sollte man nur für richtige Tabellen benutzen, für Messwertlisten zum Beispiel. Aber niemals für das Seitenlayout.
Dir brauchst nur eine ftui-row und darin 3 ftui-columns. Die letzte column bekommt dann ein width="40%", um breiter zu sein.
Ah ok. Wusste ich nicht. Hab es so geändert
<ftui-grid-tile row="9" col="12" height="3" width="8" shape="round">
<ftui-label>TEMPERATUR</ftui-label>
<ftui-row>
<ftui-column>
<ftui-knob [(value)]="OG.wz.TH_Climate:measured-temp"
[color]="OG.wz.TH_Climate:measured-temp | map('18:blue,22:green,23:warning,25:danger')"
width="150" height="100" offset-y="15" type="arc" min="18" max="26" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-label>IST TEMP</ftui-label>
</ftui-column>
<ftui-column>
<ftui-knob [(value)]="OG.wz.TH_Climate:desired-temp"
[color]="OG.wz.TH_Climate:desired-temp | map('18:blue,22:green,23:warning,25:danger')"
width="150" height="100" offset-y="15" type="arc" min="18" max="26" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-label>SOLL TEMP</ftui-label>
</ftui-column>
<ftui-column class="myspinner" width="40%">
<ftui-button [value]="OG.wz.TH_Climate:desired-temp"
(value)="add(-0.5) | OG.wz.TH_Climate:desired-temp"
states="$value" fill="">
<ftui-icon class="size-1"
name="minus" color="blue"></ftui-icon>
</ftui-button>
<ftui-label [text]="OG.wz.TH_Climate:desired-temp"
[color]="OG.wz.TH_Climate:desired-temp | map('5:blue, 20:mygreen, 23:red')"
class="size-6">
</ftui-label>
<ftui-button [value]="OG.wz.TH_Climate:desired-temp"
(value)="add(0.5) | OG.wz.TH_Climate:desired-temp"
states="$value" fill="">
<ftui-icon class="size-1"
name="plus" color="red"></ftui-icon>
</ftui-button>
<ftui-button color="dark"
(value)="OG.wz.TH_Climate:controlMode" states="manual, auto">
<ftui-icon class="size-2" [name]="OG.wz.TH_Climate:controlMode | map('manual: sani_heating_manual, auto: sani_heating_automatic')">
</ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
</ftui-grid-tile> Verrätst Du mir wie ich das Spinner waagerecht bekomme, spricht plus und minus recht und links. Temp mittig.
ZitatVerrätst Du mir wie ich das Spinner waagerecht bekomme, spricht plus und minus recht und links. Temp mittig.
Hat setstate doch oben geschrieben.
"Dir brauchst nur eine ftui-row und darin 3 ftui-columns. Die letzte column bekommt dann ein width="40%", um breiter zu sein."
Ich glaube, so langsam ist es an der Zeit den Thread mal aufzusplitten, in Userfragen und Entwicklerprobleme, wird sonst ein wenig unübersichtlich.
Zitat von: grossmaggul am 24 Dezember 2020, 13:02:47
Hat setstate doch oben geschrieben.
"Dir brauchst nur eine ftui-row und darin 3 ftui-columns. Die letzte column bekommt dann ein width="40%", um breiter zu sein."
Ich glaube, so langsam ist es an der Zeit den Thread mal aufzusplitten, in Userfragen und Entwicklerprobleme, wird sonst ein wenig unübersichtlich.
Hab ich
Ein ftui-column positioniert alle Childelemente untereinander. Bei nur einen Child ist das easy: genau in der Mitte. Bei der Spinner-Imitation (eine eigenes Element dafür werde ich noch bauen) sind dann auch alle Unterteile untereinander. Man müsste diese wieder einen ftui-row Container einbetten, damit sie wieder nebeneinander sind.
ZitatHab ich
Die Umsetzung kann ich aber bei Deinem Code nicht entdecken.
Hallo,
hoffe Ihr hattet alle erholsame Tage. Habe heute mit Colorpicker experimentiert, dabei bin ich auf ein Problem mit der Hex-Werte Übergabe gestoßen.
Das Widget erzeugt
set Strip rgb #ffffff
der Espled Controller erwartet
set Strip rgb ffffff
Also ohne #
Wie habt Ihr das gelöst?
Gruß
Eisix
Hallo zusammen,
ich habe Probleme mit dem ftui-button. Man kann damit Schalten und auch den Status sehen. Immer wenn die Seite neu geladen wurde ist der erste Klick "set xyz on" und der nächste Klick "set xyz off". Das Ganze ist unabhängig vom Status. D.h. wenn von einer anderen Stelle ON geschaltet wurde ist der erste Klick auf den Button trotzdem ein "set xyz on".
Wie habt ihr das gelöst, das beim Satus ON immer ein "set xyz off" kommt und beim Status OFF immer ein "set xyz of" kommt.
<ftui-button shape="circle" size="large"
[(value)]="Gast-WLAN"
[fill]="Gast-WLAN | map('off: outline, on: solid')">
<ftui-icon name="wifi1"></ftui-icon>
</ftui-button>
Man kann das aus meiner Sicht Fehlverhalten auch auf der https://knowthelist.github.io/ftui/examples/button.html (https://knowthelist.github.io/ftui/examples/button.html) nachvollziehen.
Wenn man einem Button ftuitest auf on setzt und dann einen anderen Button benutzt, der mit ftuitest verknüpft ist kommt trotzdem ein "set ftuitest on" obwohl ftuitest ja schon on ist.
In der Hoffnung auf hilfreiche Tipps
Gruß LuGu
Oh, ja. Da ist beim letzten "+1" Update ein bug rein gekommen. Muss ich checken, was man dagegen machen kann.
Done! Ist jetzt gefixed
Zitat von: grossmaggul am 24 Dezember 2020, 13:02:47
Ich glaube, so langsam ist es an der Zeit den Thread mal aufzusplitten, in Userfragen und Entwicklerprobleme, wird sonst ein wenig unübersichtlich.
würde ich auch begrüßen..!
wir lassen den Thread hier zum schreiben und @setstate macht einen neuen in dem nur er schreiben kann, wenn es etwas neues zur Entwicklung von FTUI 3 gibt...!
Zitat von: Eisix am 27 Dezember 2020, 12:29:06
Hallo,
hoffe Ihr hattet alle erholsame Tage. Habe heute mit Colorpicker experimentiert, dabei bin ich auf ein Problem mit der Hex-Werte Übergabe gestoßen.
Das Widget erzeugt
set Strip rgb #ffffff
So wie bei den Examples gemacht funktioniert es nicht?
(hex)="replace('#','') | HUEDevice6:rgb"
der Espled Controller erwartet
set Strip rgb ffffff
Also ohne #
Wie habt Ihr das gelöst?
Gruß
Eisix
Moin,
kann man bei den Charts die Schriftgröße ändern?
Grüße
Olli
Hallo Olli,
gibt mehrere Variablen die man z.B. in seinem User CSS File setzen kann:
--chart-title-font-size
--chart-legend-font-size
--chart-tick-font-size
Grüße,
Tobias
Hallo Tobias,
vielen Dank für deine schnelle Antwort.
Grüße
Olli
Zitat von: Thyraz am 27 Dezember 2020, 21:13:18
Hallo Olli,
gibt mehrere Variablen die man z.B. in seinem User CSS File setzen kann:
--chart-title-font-size
--chart-legend-font-size
--chart-tick-font-size
Grüße,
Tobias
Hallo Tobias,
gibt es da auch noch was für die Chart-Controls?
VG
Olli
Zitat von: LuGu am 27 Dezember 2020, 13:45:58
Man kann das aus meiner Sicht Fehlverhalten auch auf der https://knowthelist.github.io/ftui/examples/button.html (https://knowthelist.github.io/ftui/examples/button.html) nachvollziehen.
Wenn man einem Button ftuitest auf on setzt und dann einen anderen Button benutzt, der mit ftuitest verknüpft ist kommt trotzdem ein "set ftuitest on" obwohl ftuitest ja schon on ist.
@setstate
Danke für den schnellen Support, jetzt funkt es.
Gruß Lutz
Zitat von: Thyraz am 17 Dezember 2020, 20:59:35
Aktuell hätte ich doch einen Fall, bei dem ich das brauchen könnte.
Wenn man ein Modul für ein fixes FHEM Device baut, macht es ja durchaus Sinn die nötigen Readings "fest zu verdrahten" anstatt den User das manuell (auf die sowieso einzig mögliche Weise) machen zu lassen.
Falls sich da also etwas tut, gern hier informieren. ;)
Es sollte jetzt (nach Update) funktionieren. Beispiel hier:
<!DOCTYPE html>
<html>
<head>
<base href="../" />
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<meta name='debug' content='2'>
</head>
<body>
<button id="dummy1">dummy1</button>
<button id="dummy2">dummy2</button>
<div class="output"></div>
</body>
<script type="module">
import { fhemService } from './modules/ftui/fhem.service.js';
let oldReading;
function changeSubscription(newReading) {
fhemService.getReadingEvents(oldReading).unsubscribe(onReadingEvent);
fhemService.getReadingEvents(newReading).subscribe(onReadingEvent);
fhemService.createFilterParameter();
fhemService.forceRefresh();
oldReading = newReading;
}
function onReadingEvent(param) {
const output = document.querySelector('.output');
output.innerHTML = `Reading: ${param.id} Value: ${param.value}`;
}
document.querySelector('#dummy1').addEventListener('click', () => changeSubscription('dummy1'));
document.querySelector('#dummy2').addEventListener('click', () => changeSubscription('dummy2'));
</script>
</html>
Meine Probleme nochmal mit der Anzeige der Geräte ganz oben, das sich mehrere dann zusammen schieben, aber umso weniger es werden teilen sie sich den Platz und rutschen nicht nach oben. Siehe Screenshot
Ich hatte es eingetragen mit "align-items="top" height="10%"
Hier mal der Code
<!-- Gerätestatus Beleuchtung usw. - START -->
<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
<!-- ==== Terrasse - Fensterkontakt ==== -->
<ftui-row [hidden]="WZ_TK_Terrasse:state | map('open: false, closed: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WZ_TK_Terrasse:state | map ('open: Terrassentür - OFFEN')"
[color]="WZ_TK_Terrasse:state | map('open: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="fs-fts_door_tilt" [color]="WZ_TK_Terrasse:state | map('off: white, open: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ========== Garagentor ========== -->
<ftui-row [hidden]="Garagentorsensor:state | map('open: false, closed: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="Garagentorsensor:state | map ('open: Garagen Tor - OFFEN')"
[color]="Garagentorsensor:state | map('open: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="fts_garage_door_50" [color]="Garagentorsensor:state | map('off: white, open: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Gardena Pumpe ==== -->
<ftui-row [hidden]="NI8_GardenaPumpe:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="NI8_GardenaPumpe:state | map ('on: Gardena Pumpe')"
[color]="NI8_GardenaPumpe:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="sani_garden_pump" [color]="NI8_GardenaPumpe:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Ladestation Landroid ==== -->
<ftui-row [hidden]="AU_Landroid:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="AU_Landroid:state | map ('on: Ladestation Landroid')"
[color]="AU_Landroid:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="fa-charging-station" [color]="AU_Landroid:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== AVR Marantz NR1506 ==== -->
<ftui-row [hidden]="WZ_Marantz:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WZ_Marantz:state | map ('on: AVR Marantz NR1506')"
[color]="WZ_Marantz:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="audio_volume_high" [color]="WZ_Marantz:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== LED TV Stripe ==== -->
<ftui-row [hidden]="WZ_Lampe_TV:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WZ_Lampe_TV:state | map ('on: LED-TV Stripe')"
[color]="WZ_Lampe_TV:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_wall_1" [color]="WZ_Lampe_TV:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== LED Schrank und Vitrine ==== -->
<ftui-row [hidden]="WZ_Schrank:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WZ_Schrank:state | map ('on: LED Schrank & Vitrine')"
[color]="WZ_Schrank:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_cabinet" [color]="WZ_Schrank:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-row [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on: Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_wall_1" [color]="WegLampe_Sw_01:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Weg hinten ==== -->
<ftui-row [hidden]="WegLampe_Sw_02:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_02:state | map ('on: Beleuchtung Weg hinten')"
[color]="WegLampe_Sw_02:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_uplight" [color]="WegLampe_Sw_02:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Garten ==== -->
<ftui-row [hidden]="AU_Garten:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="AU_Garten:state | map ('on: Beleuchtung Garten')"
[color]="AU_Garten:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_uplight" [color]="AU_Garten:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Terrasse ==== -->
<ftui-row [hidden]="NI3_LichtTerrasse:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="NI3_LichtTerrasse:state | map ('on: Beleuchtung Terrasse')"
[color]="NI3_LichtTerrasse:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_outdoor" [color]="NI3_LichtTerrasse:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung 3x LED Eingang ==== -->
<ftui-row [hidden]="3xLED_lampe:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="3xLED_lampe:state | map ('on: 3x LED Eingang')"
[color]="3xLED_lampe:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_downlight" [color]="3xLED_lampe:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Licht Fenster Flur ==== -->
<ftui-row [hidden]="Flurfenster:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="Flurfenster:state | map ('on: Fensterlicht Flur')"
[color]="Flurfenster:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_stairs" [color]="Flurfenster:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Tablet Samsung Ladestation ==== -->
<ftui-row [hidden]="Ladestation_Samsung:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="Ladestation_Samsung:state | map ('on: Samsung Tablet wird geladen')"
[color]="Ladestation_Samsung:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="it_smartphone" [color]="Ladestation_Samsung:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Tablet Lenovo Ladestation ==== -->
<ftui-row [hidden]="Ladestation_Lenovo:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="Ladestation_Lenovo:state | map ('on: Lenovo Tablet wird geladen')"
[color]="Ladestation_Lenovo:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="it_smartphone" [color]="Ladestation_Lenovo:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-row [hidden]="Uhrzeit:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr - EIN')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="right" margin="1" width="10%">
<ftui-icon name="time_clock" [color]="Uhrzeit:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-row [hidden]="BU_4CH:POWER1 | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch - EIN')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_wire_system_1" [color]="BU_4CH:POWER1 | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Garage ==== -->
<ftui-row [hidden]="NI7_LichtGarage:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="NI7_LichtGarage:state | map('on: Beleuchtung Garage')"
[color]="NI7_LichtGarage:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="right" margin="1" width="10%">
<ftui-icon name="fts_garage" [color]="NI7_LichtGarage:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Schlafzimmer ==== -->
<ftui-row [hidden]="NI2_LichtSZ:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="NI2_LichtSZ:state | map('on: Beleuchtung Schlafzimmer')"
[color]="NI2_LichtSZ:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="right" margin="1" width="10%">
<ftui-icon name="light_led_stripe" [color]="NI2_LichtSZ:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Windows 10 - Gaming-PC ==== -->
<ftui-row [hidden]="BU_4CH:POWER2 | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="BU_4CH:POWER2 | map('on: Windows 10 - Gaming-PC')"
[color]="BU_4CH:POWER2 | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="right" margin="1" width="10%">
<ftui-icon name="television" [color]="BU_4CH:POWER2 | map('off: white, on: crimson')" path="icons"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Netzwerkdrucker Büro ==== -->
<ftui-row [hidden]="BU_4CH:POWER3 | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="BU_4CH:POWER3 | map('on: Netzwerkdrucker Büro')"
[color]="BU_4CH:POWER3 | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="right" margin="1" width="10%">
<ftui-icon name="print" [color]="BU_4CH:POWER3 | map('off: white, on: crimson')" path="icons"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== BuschLicht Weihnachten ==== -->
<ftui-row [hidden]="AU_BuschLicht:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="AU_BuschLicht:state | map('on: BuschLicht Weihnachten')"
[color]="AU_BuschLicht:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="right" margin="1" width="10%">
<ftui-icon name="light_fairy_lights" [color]="AU_BuschLicht:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<!-- Gerätestatus Beleuchtung usw. - ENDE -->
Hallo,
würde gerne ein ftui-tab in ein ftui-tab packen. Kriege es nicht zum laufen. Hat das jemand hingekriegt? Wenn ja wie?
Ist als Ersatz für einen swiper aus FTUI2 gedacht.
Gruß
Eisix
Mal kurz dazwischen, vor dem letzten Update sah das so aus wie auf dem ersten Bild, jetzt so wie auf dem zweiten Bild.
Wo muß ich da eingreifen um das wieder in die "Reihe" zu bekommen, bzw. was wurde da geändert?
Der Code dazu:
Zitat<ftui-row>
<ftui-column align-items="top" margin="1">
<ftui-label text="Thermostat"></ftui-label>
<ftui-label text="Radiator"></ftui-label>
<ftui-label text="Heizkörper"></ftui-label>
</ftui-column>
<ftui-column align-items="left" margin="1">
<ftui-label [text]="wz.thermostat:temperature" unit="°C"></ftui-label>
<ftui-label [text]="wz.radiator:temperature" unit="°C"></ftui-label>
<ftui-label [text]="wz.heizkoerper_Clima:measured-temp" unit="°C"></ftui-label>
</ftui-column>
<ftui-column align-items="left" margin="1">
<ftui-icon [name]="wz.thermostat:battery | map('low:battery-1,ok:battery')"
[color]="wz.thermostat:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="wz.radiator:battery | map('low:battery-1,ok:battery')"
[color]="wz.radiator:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="wz.heizkoerper:batteryLevel | map('1.8:battery-0, 2.0:battery-1, 2.3:battery-2, 2.5:battery-3, 2.8:battery')"
[color]="wz.heizkoerper:batteryLevel | map('1.8:danger, 2.0:warning, 2.3:success, 2.5:secondary, 2.8:green')">
</ftui-icon>
</ftui-column>
</ftui-row>
Zitat von: Eisix am 28 Dezember 2020, 17:30:38
Hallo,
würde gerne ein ftui-tab in ein ftui-tab packen. Kriege es nicht zum laufen. Hat das jemand hingekriegt? Wenn ja wie?
Ist als Ersatz für einen swiper aus FTUI2 gedacht.
Gruß
Eisix
Habe mir einen Workaround mit dummy und hidden gebaut, das funktioniert erstmal.
<ftui-grid base-width="69" base-height="48" margin="1">
<ftui-grid-tile row="17" col="1" height="1" width="18" shape="round" class="mybgimage">
<ftui-row>
<ftui-button class="size-2" (value)="test" states="Bose"><ftui-icon class="size-2" name="Bose_Soundtouch10"></ftui-icon></ftui-button>
<ftui-button class="size-2" (value)="test" states="Onkyo"><ftui-icon class="size-2" name="onkyo_tx-nr807"></ftui-icon></ftui-button>
<ftui-button class="size-2" (value)="test" states="MediaPad"><ftui-icon class="size-2" name="mediapad"></ftui-icon></ftui-button>
<ftui-button class="size-2" (value)="test" states="Yoga"><ftui-icon class="size-2" name="yoga"></ftui-icon></ftui-button>
<ftui-button class="size-2" (value)="test" states="LMS"><ftui-icon class="size-2" name="lms"></ftui-icon></ftui-button>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="1" height="2" width="2" color="danger" [hidden]="test | map('Onkyo:false, `[Bose|MediaPad|Yoga|LMS]`:true')">
<header>
Onkyo Player
</header>
</ftui-grid-tile>
Gruß
Eisix
Zitat von: grossmaggul am 28 Dezember 2020, 18:22:21
Mal kurz dazwischen, vor dem letzten Update sah das so aus wie auf dem ersten Bild, jetzt so wie auf dem zweiten Bild.
Wo muß ich da eingreifen um das wieder in die "Reihe" zu bekommen, bzw. was wurde da geändert?
Der Code dazu:
Ich hatte so ein ähnlichen Fall, da habe ich mir 3 Reihen gebaut mit jeweils zwei Spalten, da ging das wieder, weil er Icons und Label anders in der Höhe behandelt... sage ich jetzt mal so...
Ich sag es nicht gerne, aber mit dem bösen <table> wäre das nicht passiert ;D ::) :-X
Moin,
ich hatte das selbe Phänomen mit einem der letzten Bugfixes bzw. Updates. Alles war verschoben.
Ich habe nun alles auf <table> umgebaut, und so ist erstmal alles wieder gut.
Da setstate in eimem seiner vergangenen Posts geschrieben hatte, das mit der Positionierung noch nicht alles fertig ist bzw. noch nicht alles in Stein gemeißelt ist, warte ich noch.
Grüße
Olli
Zitat von: octek0815 am 27 Dezember 2020, 23:05:42
Hallo Tobias,
gibt es da auch noch was für die Chart-Controls?
VG
Olli
Müsste glaub --chart-footer-font-size sein
ZitatIch sag es nicht gerne, aber mit dem bösen <table> wäre das nicht passiert
Das mag sein, aber ich bin nicht Dr. Evil. ;D
Ich nutze FTUI3 ja noch nicht produktiv, von daher stört mich das nicht, wollte nur mal wissen ob es vielleicht ein Bug ist oder man es beheben kann.
Jedenfalls werde ich das jetzt nicht auf das Tag umfrickeln, dessen Namen man nicht nennen darf.;)
Zitat von: Thyraz am 28 Dezember 2020, 21:33:02
Müsste glaub --chart-footer-font-size sein
Besten Dank, funktioniert.
Ist es Möglich auch noch die Bezeichnung der Units die in Englisch angezeigt werden irgendwie in Deutsch umzumappen?
Zitat von: grossmaggul am 28 Dezember 2020, 18:22:21
Mal kurz dazwischen, vor dem letzten Update sah das so aus wie auf dem ersten Bild, jetzt so wie auf dem zweiten Bild.
Wo muß ich da eingreifen um das wieder in die "Reihe" zu bekommen, bzw. was wurde da geändert?
Der Code dazu:
Da habe ich Quatsch bei den Aligment-Eigenschaften eingebaut. Ist jetzt wieder repariert.
Supi, danke, daß Du mich vor dem Tag, dessen Namen man nicht nennen darf, bewahrt hast! ;)
Zitat von: octek0815 am 28 Dezember 2020, 23:24:18
Besten Dank, funktioniert.
Ist es Möglich auch noch die Bezeichnung der Units die in Englisch angezeigt werden irgendwie in Deutsch umzumappen?
Da die Datumsangaben ja auch in Deutsch sind, hab ich mal nen PullRequest an setstate geschickt, dass die Zeiteinheiten in den Chart-Controls auch erstmal fix auf Deutsch sind, bis man irgendwann einen language-tag einbaut...
Zitat von: Thyraz am 29 Dezember 2020, 10:18:28
Da die Datumsangaben ja auch in Deutsch sind, hab ich mal nen PullRequest an setstate geschickt, dass die Zeiteinheiten in den Chart-Controls auch erstmal fix auf Deutsch sind, bis man irgendwann einen language-tag einbaut...
Die Spracheinstellung kann man per
fhemService.config.lang bzw. per
ftuiApp.config.lang abfragen.
Das liefert die Spracheinstellung des Browsers oder was der User per Meta-Tag 'lang' im HTML mitgegeben hat.
in FTUI 2.x.y habe ich eine Anzeige für Termine genutzt die so aussah:
<div class="card">
<div class="vbox" style="background-color:#1f222e;">
<div class="" style="margin-top:0px; font-size:100%; color:MediumSpringGreen">Termine</div>
<div class="card grow-2">
<div class="hbox" style="margin-top:10px;">
<div class="top-narrow" data-type="popup" data-height="260px" data-width="1200px" data-return-time="45" data-mode="fade" data-draggable="true">
<div class="vbox">
<div class="hbox">
<div class="large" data-type="symbol" data-device="View_T" data-get-off="0"
data-get-on="(1|2|3|4|5|6|7|8|9)" data-get="c-tomorrow" data-warn="c-tomorrow" data-warn-background-color="crimson"
data-off-color="white" data-on-color="MediumSpringGreen" data-icon="oa-time_calendar">
</div>
</div>
</div>
<div class="dialog bg-darkgray">
<header style="background-color:#1f222e;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:MediumSpringGreen;">=== Nächste Termine ===</div>
<div data-type="link" data-color="crimson" data-icon-left="fa-times" data-background-color="#1f222e" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="card bg-darkgray" style="margin-left:15px; margin-top:0px">
<!--div class="crimson" style="font-size:130%" data-type="calview" data-device="View_T" data-get="today" data-detailwidth='["8","10","10","26","46"]' data-detail='["daysleftLong","weekdayname","btime","summary","location"]' data-showempty="false" data-max="3"></div-->
<!--div class="MediumSpringGreen" style="font-size:130%" data-type="calview" data-device="View_T" data-get="tomorrow" data-detailwidth='["8","10","10","26","46"]' data-detail='["daysleftLong","weekdayname","btime","summary","location"]' data-max="3"></div-->
<div class="MediumSpringGreen border-top-blue1" style="left-align; font-size:130%" data-type="calview" data-device="View_T" data-get="tomorrow" data-detailwidth='["8","10","10","26","46"]' data-detail='["daysleftLong","weekdayname","btime","summary","location"]' data-max="3"></div>
<div class="border-top-blue1" style="font-size:120%" data-type="calview" data-device="View_T" data-get="all" data-class='left-align' data-detailwidth='["10","8","8","5","30","39"]' data-detail='["daysleftLong","weekdayname","bdate","btime","summary","location"]' data-start="notomorrow" data-max="4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
kann ich das in der Version 3 schon umsetzen, oder ist es noch nicht möglich..?
2. Frage wie ist es möglich z.B. Icons ehemals FHEM_SVG einzubinden..?
Ich dachte es ist ganz einfach entweder ich mache einen Ordner /fs und schiebe die Icons dort hinein und gebe den Pfad an, oder ich schiebe die Icons mit in den Ordner von openautomation "path="../images/openautomation", jetzt kommt das Problem, weder die eine noch die andere Variante funktioniert.
Habe Fhem auch schon neu gestartet... aber kein neues Icon funktioniert.
Aber ein anderes Icon funktioniert aus dem selben Ordner "openautomation" funktioniert... :-\
Keine Ahnung warum das nicht funktioniert.... hat das auch noch jemand so.?
Ich habe das mit dem ring.svg und dem frost.svg ausprobiert die ich neu kopiert habe.
Zitat von: moonsorrox am 30 Dezember 2020, 14:30:23
2. Frage wie ist es möglich z.B. Icons ehemals FHEM_SVG einzubinden..?
Ich dachte es ist ganz einfach entweder ich mache einen Ordner /fs und schiebe die Icons dort hinein und gebe den Pfad an, oder ich schiebe die Icons mit in den Ordner von openautomation "path="../images/openautomation", jetzt kommt das Problem, weder die eine noch die andere Variante funktioniert.
Habe Fhem auch schon neu gestartet... aber kein neues Icon funktioniert.
Aber ein anderes Icon funktioniert aus dem selben Ordner "openautomation" funktioniert... :-\
Keine Ahnung warum das nicht funktioniert.... hat das auch noch jemand so.?
Ich habe das mit dem ring.svg und dem frost.svg ausprobiert die ich neu kopiert habe.
Bei mir funktioniert es ohne Probleme.
<ftui-icon path="../images/openautomation" name="weather_cloudy_light"></ftui-icon></ftui-tab>
<ftui-icon path="../images/fhemSVG" name="dustbin" color="yellow"
[class-name]="dmy_Abfalltermine:Gelbe | map('-1:hop,1:spin,2:')">
</ftui-icon>
Hallo,
Manche der alten Icon machen Probleme, das was die Farbe wechseln sollte bleibt schwarz. Habe alle die bei mir Probleme hatten mit Inkscape geöffnet und die schwarzen Bereiche nochmal gefüllt und dann im. /Icons gespeichert. Dann geht es auch ohne path.
Gruß
Eisix
Zitat von: Eisix am 30 Dezember 2020, 20:42:48
Hallo,
Manche der alten Icon machen Probleme, das was die Farbe wechseln sollte bleibt schwarz. Habe alle die bei mir Probleme hatten mit Inkscape geöffnet und die schwarzen Bereiche nochmal gefüllt und dann im. /Icons gespeichert. Dann geht es auch ohne path.
Gruß
Eisix
Oder Online mit IcoMoon. Da geht das auch prima...
https://icomoon.io/app/#/select
Grüße
Olli
Zitat von: Eisix am 30 Dezember 2020, 20:42:48
Hallo,
Manche der alten Icon machen Probleme, das was die Farbe wechseln sollte bleibt schwarz. Habe alle die bei mir Probleme hatten mit Inkscape geöffnet und die schwarzen Bereiche nochmal gefüllt und dann im. /Icons gespeichert. Dann geht es auch ohne path.
Gruß
Eisix
ja ganz genau ich wußte nur nicht mehr was man da machen muss, ich habe damals auch die Icons mit Inkscape geöffnet. Mir hatte aber mal jemand in einem anderen Forum (weiß leider nicht mehr welches) das man die svg Icons mit Notepad++ öffnen kann und da muss nur eine Kleinigkeit umgeändert werden, leider habe ich auch das nicht mehr auf dem Schirm...
Evtl. weiß es hier jemand.
Ich habe das Klingelzeichen welches sich ring.svg nennt genommen und es ist nur die kleine Glocke unten eingefärbt der Rest bleibt schwarz...
Anmerkung noch von mir:
klar kann ich das Icon in Notepad++ öffnen und meine Farbe eintragen die ich möchte, dass geht selbstverständlich.
Wenn ich es aber in schwarz mache bleibt es schwarz, keine Ahnung warum.Das mit dem Icon habe ich jetzt gefunden wichtig für das einfärben ist, dass stroke und fill nicht als CSS-Style sondern als Attribute definiert wird z.B. <path fill="#fff" und nicht <path style="fill: #fff"
Ist mir aber zu aufwendig, wenn ich ein Icon habe einfach nur hier https://jakearchibald.github.io/svgomg/
hochladen und gleich wieder downloaden, dann funktioniertes auch mit der Farbe ;) ;)
Erstmal Danke für das neue FTUI3.
Kann es sein damit beim Circlemenu "circleRadius" nicht geht? Ich habe versucht mit
<ftui-circlemenu direction="right-half" circleRadius="8" >
den Abstand zwischen den Buttons zu ändern leider ohne Erfolg.
Gruß BlasterX
Ich habe mir eine Anruf Popup gebaut welches soweit funktioniert, aber...
1. mir gelingt es nicht das "Icon" mit dem "Badge" zurück zu setzen, ist das mometan schon möglich.
In FTUI 2.x. habe ich das mit dem data-fhem-cmd="set VerpassteAnrufe clear" gemacht
<div style="font-size:150%;" data-type="switch" data-device="VerpassteAnrufe" data-states='["0","1"]' data-icons='["fa-phone","fa-phone fa-blink"]' data-colors='["white","crimson"]' data-on-background-color="#3d445c" data-off-background-color="#1f222e" data-warn-color="#ffffff" data-warn-on="!0" data-warn-off="0" data-warn="VerpassteAnrufe:state" data-fhem-cmd="set VerpassteAnrufe clear"></div>
2. ich bekomme es nicht hin die Größe zu ändern, ich habe verschieden Stellen probiert, aber es wird nicht größer :-\
hier der Code, evtl kann jemand helfen..?
<ftui-grid-tile row="16" col="9" height="2" width="2" class="semitransparent3d">
<ftui-icon popup-target="popup-vanruf" path="icons" class="size-3"
[name]="VerpassteAnrufe:state | map('1:phone1, 0:phone1')"
[color]="VerpassteAnrufe:state | map('1:Crimson, 0:royalblue1')"
[class-name]="VerpassteAnrufe:state | map('1:blink, 0:')">
</ftui-icon>
<ftui-badge color="crimson" [text]="VerpassteAnrufe:state"></ftui-badge>
<ftui-label class="size-1" text="Anrufe" color=""></ftui-label>
</ftui-grid-tile>
Zitat von: moonsorrox am 01 Januar 2021, 16:39:11
Ich habe mir eine Anruf Popup gebaut welches soweit funktioniert, aber...
1. mir gelingt es nicht das "Icon" mit dem "Badge" zurück zu setzen, ist das mometan schon möglich.
In FTUI 2.x. habe ich das mit dem data-fhem-cmd="set VerpassteAnrufe clear" gemacht
<div style="font-size:150%;" data-type="switch" data-device="VerpassteAnrufe" data-states='["0","1"]' data-icons='["fa-phone","fa-phone fa-blink"]' data-colors='["white","crimson"]' data-on-background-color="#3d445c" data-off-background-color="#1f222e" data-warn-color="#ffffff" data-warn-on="!0" data-warn-off="0" data-warn="VerpassteAnrufe:state" data-fhem-cmd="set VerpassteAnrufe clear"></div>
2. ich bekomme es nicht hin die Größe zu ändern, ich habe verschieden Stellen probiert, aber es wird nicht größer :-\
hier der Code, evtl kann jemand helfen..?
<ftui-grid-tile row="16" col="9" height="2" width="2" class="semitransparent3d">
<ftui-icon popup-target="popup-vanruf" path="icons" class="size-3"
[name]="VerpassteAnrufe:state | map('1:phone1, 0:phone1')"
[color]="VerpassteAnrufe:state | map('1:Crimson, 0:royalblue1')"
[class-name]="VerpassteAnrufe:state | map('1:blink, 0:')">
</ftui-icon>
<ftui-badge color="crimson" [text]="VerpassteAnrufe:state"></ftui-badge>
<ftui-label class="size-1" text="Anrufe" color=""></ftui-label>
</ftui-grid-tile>
Moin,
du musst ein Button nutzen und dann mit (value) das setzen was du möchtest.
Hier mein Code...
<ftui-column [hidden]="System_Verpasste_Anrufe | map('0:true, 1:false')">
<ftui-button (value)="System_Verpasste_Anrufe" states='0'
[fill]="System_Verpasste_Anrufe | map('0:clear, 1:clear')">
<ftui-icon style="font-size:1em; margin-top:0.1em;"
[name]="System_Verpasste_Anrufe | map('0:phone1, 1:phone1')" class="hop" popup-target="popup-verpasste-anrufe"
[color]="System_Verpasste_Anrufe | map('0:white, 1:white')">
</ftui-icon>
<ftui-badge style="font-size:0.9em;"
[color]="System_Verpasste_Anrufe | map('0=gray, 1=gray')"
[text]="System_Verpasste_Anrufe">
</ftui-badge>
</ftui-button>
</ftui-column>
Grüße
Olli
ich hatte das in deinem Code auch schon gefunden, nur ich möchte es in einem Popup nutzen. ;) bei mir ist der Telefon Hörer auch immer zu sehen.
Mit Button hatte ich es und das funktioniert, nur im Popup einegebaut ging es nicht. :-\
EDIT:// oh jetzt habe ich es gesehen das du da ein popup drin hast
oh, ich bin aber auch blöd oder Code blind mittlerweile...! :-\ :-\
Da ich den Hourcounter nutze muss ich natürlich bei states auch "clear" enigeben anstatt "0"
Das hatte ich schon, aber jetzt erst bin ich wach geworden... puuh ;) :D
Hallo zusammen
Ich habe mich an die Smartphone Ansicht gewagt (/examples/menu.html) und dabei habe ich festegstellt, dass die Checkboxes korrekt ausgerichtet werden, circlemenu und Button zu weit oben sind, respektive zu fest recht kleben (siehe Bild).
Mein Code sieht wie folgt aus:
<ftui-view>
<ftui-view-toolbar>
<ftui-title>{{room}}</ftui-title>
</ftui-view-toolbar>
<ftui-view-section>
<ftui-label slot="start">Alarmanlage</ftui-label>
<ftui-checkbox slot="end" [(value)]="dummy1" color="success"></ftui-checkbox>
</ftui-view-section>
<ftui-view-section>
<ftui-label slot="start">Kühlschublade</ftui-label>
<ftui-checkbox slot="end" [(value)]="dummy2" color="success"></ftui-checkbox>
</ftui-view-section>
<ftui-view-section>
<ftui-label slot="start">Boiler</ftui-label>
<ftui-checkbox slot="end" [(value)]="dummy2" color="success"></ftui-checkbox>
</ftui-view-section>
<ftui-view-section>
<ftui-label slot="start">Heizung</ftui-label>
<ftui-checkbox slot="end" [(value)]="dummy2" color="success"></ftui-checkbox>
</ftui-view-section>
<ftui-view-section>
<ftui-label slot="start">Pool</ftui-label>
<ftui-circlemenu direction="vertical" slot="end">
<ftui-icon name="home1" class="size-3"></ftui-icon>
<ftui-button (value)="Poolpumpensteuerung" states="auto" color="blue">auto</ftui-button>
<ftui-button (value)="Poolpumpensteuerung" states="ein" color="blue"><center> ein </center></ftui-button>
<ftui-button (value)="Poolpumpensteuerung" states="aus" color="blue"><center> aus </center></ftui-button>
</ftui-circlemenu>
</ftui-view-section>
<ftui-view-section>
<ftui-label slot="start">Testschalter</ftui-label>
<ftui-button slot="end" shape="circle" states="on,off" [(value)]="dummy1" [fill]="dummy1 | map('off: outline, on: solid')">
<ftui-icon name="power-off" [color]="dummy1 | map('off: white, on: white')"></ftui-icon>
</ftui-button>
</ftui-view-section>
</ftui-view>
Danke für eure Hilfe. Viele Grüsse Eppi
gerade wollte ich mal auf github wegen einiger Einstellungen im Code schauen..!
Da kommt eine Fehlerseite 404 :-\
Ist es bei euch erreichbar, alle verlinkten Seiten wie Icons und Examples kommen nicht.
@moonsorrox
Dei Seite wurde neu strukturiert .
Gruß BlasterX
Zitat von: moonsorrox am 02 Januar 2021, 14:41:54
gerade wollte ich mal auf github wegen einiger Einstellungen im Code schauen..!
Da kommt eine Fehlerseite 404 :-\
Ist es bei euch erreichbar, alle verlinkten Seiten wie Icons und Examples kommen nicht.
Geht jetzt wieder, ich musste www/ftui Subfolder einbauen, damit das FHEM Update per controlfile nutzbar ist.
Ich hatte vergessen, die Links anzupassen
Zitat von: setstate am 02 Januar 2021, 15:31:56
Geht jetzt wieder, ich musste www/ftui Subfolder einbauen, damit das FHEM Update per controlfile nutzbar ist.
Ich hatte vergessen, die Links anzupassen
Vielen Dank setstate für deine unermüdliche Arbeit, super Job ;)
Zitat von: eppi am 02 Januar 2021, 09:38:14
Hallo zusammen
Ich habe mich an die Smartphone Ansicht gewagt (/examples/menu.html) und dabei habe ich festegstellt, dass die Checkboxes korrekt ausgerichtet werden, circlemenu und Button zu weit oben sind, respektive zu fest recht kleben (siehe Bild).
Mein Code sieht wie folgt aus:
Danke für eure Hilfe. Viele Grüsse Eppi
Das Mobile-Beispiel mit SideNavigation war meine aktuelle Baustelle, bevor ich das Thema FHEM-Update und FTUI-Docker angefangen hatte.
Da muss ich erst noch weiter optimieren / bauen.
ich habe mir für Batterien etwas gebaut und habe festgestellt das er das Icon in der Größe verändert.
Mal ein Beispiel:
Wenn ich das so erstelle, kann man das Icon kleiner und größer machen
<ftui-column height="80px">
<ftui-icon class="size-3" path="../images/openautomation"
[name]="Temperatur_Wohnzimmer:battery | map('ok:measure_battery_25, low:measure_battery_25')"
[color]="Temperatur_Wohnzimmer:battery | map('ok:crimson, low:MediumSpringGreen')">
</ftui-icon>
bringe ich die Anzeige mit einem animierten Icon, egal ob nun "hop" oder "blink" rein wird das Icon automatisch kleiner und ich kann es nicht mehr ändern.
Ist das so gewollt. (im Beispiel ist "hop" für ok nur zum testen drin, sollte natürlich bei low rein)
hier das Code Beispiel:
<ftui-column height="80px">
<ftui-icon class="size-3" path="../images/openautomation"
[name]="Temperatur_Wohnzimmer:battery | map('ok:measure_battery_25, low:measure_battery_25')"
[color]="Temperatur_Wohnzimmer:battery | map('ok:crimson, low:MediumSpringGreen')"
[class-name]="Temperatur_Wohnzimmer:battery | map('ok:hop, low:')">
</ftui-icon>
Mal eine kurze Zwischenfrage, über welche Widgets lassen sich Popups aufrufen? Nur per Image oder Icon?
Zitat von: grossmaggul am 02 Januar 2021, 17:46:51
Mal eine kurze Zwischenfrage, über welche Widgets lassen sich Popups aufrufen? Nur per Image oder Icon?
wenn das Icon in Zusammenhang mit einem Button ist geht es wie im Code.
Weiß nicht ob du es so meinst, wobei das Popup ja wieder am Icon hängt. :-\ ;)
<ftui-button (value)="VerpassteAnrufe" states='clear' class="size-2" fill="clear"
[fill]="VerpassteAnrufe | map('0:clear, 1:clear')">
<ftui-icon style="font-size:1em; margin-top:0.1em;"
[name]="VerpassteAnrufe | map('0:phone1, 1:phone1')" popup-target="popup-verpasste-anrufe"
[class-name]="VerpassteAnrufe:state | map('1:blink, 0:')"
[color]="VerpassteAnrufe | map('0:royalblue1, 1:crimson')">
</ftui-icon>
<ftui-badge style="font-size:0.8em;"
[color]="VerpassteAnrufe | map('0=gray, 1=crimson')"
[text]="VerpassteAnrufe">
</ftui-badge>
</ftui-button>
gibt es eine Möglichkeit bei einem Image die Ecken abzurunden? Mit shape="round" geht es nicht.
zb
<ftui-image src="http://lorempixel.com/400/200/technics" width="100" shape="round"[refresh]="ftuitest:state:time"></ftui-image>
Gruß BlasterX
Zitat von: blasterx am 02 Januar 2021, 20:42:12
gibt es eine Möglichkeit bei einem Image die Ecken abzurunden? Mit shape="round" geht es nicht.
zb
<ftui-image src="http://lorempixel.com/400/200/technics" width="100" shape="round"[refresh]="ftuitest:state:time"></ftui-image>
Gruß BlasterX
Ich denke das musst du in deiner user.css machen anders wird das nichts
Zitat von: blasterx am 02 Januar 2021, 20:42:12
gibt es eine Möglichkeit bei einem Image die Ecken abzurunden? Mit shape="round" geht es nicht.
zb
<ftui-image src="http://lorempixel.com/400/200/technics" width="100" shape="round"[refresh]="ftuitest:state:time"></ftui-image>
Gruß BlasterX
Baue ich ganz schnell ein. Wie bei Button: shape="circle" und shape="round"
ZitatBaue ich ganz schnell ein. Wie bei Button: shape="circle" und shape="round"
Super Danke tolle Arbeit setstate. Hast du auch hierfür eine Lösung
ZitatKann es sein damit beim Circlemenu "circleRadius" nicht geht? Ich habe versucht mit
Code: [Auswählen]
<ftui-circlemenu direction="right-half" circleRadius="8" >
den Abstand zwischen den Buttons zu ändern leider ohne Erfolg.
egal welchen Wert ich für circleRadius angebe es ändert sich nichts.
Gruß BlasterX
ZitatWeiß nicht ob du es so meinst
Nee, so meinte ich das nicht, ich meinte eigentlich ob es auch bei anderen Widgets geht, z.B. label oder knob.
Zitat von: blasterx am 02 Januar 2021, 22:16:35
Super Danke tolle Arbeit setstate. Hast du auch hierfür eine Lösung
egal welchen Wert ich für circleRadius angebe es ändert sich nichts.
Gruß BlasterX
Ja, als Attribute muss man
circle-radius angeben. Ich habe es im Beispiel korrigiert.
Zitat von: grossmaggul am 02 Januar 2021, 23:22:57
Nee, so meinte ich das nicht, ich meinte eigentlich ob es auch bei anderen Widgets geht, z.B. label oder knob.
Label geht sicher habe ich im Einsatz.
Gruß
Eisix
ZitatLabel geht sicher habe ich im Einsatz.
O.K., dann muß ich nochmal forschen, habe ich nicht hinbekommen, danke!
Hier ein Beispiel
<ftui-row>
<ftui-label
[text]="Aquarium_Temp:temperature"
[color]="Aquarium_Temp:temperature | map('27.5:blue, 28.5:mygreen, 31:red')"
popup-target="popup-Aquarium"
class="size-6"><span slot="end">°C</span>
</ftui-label>
</ftui-row>
<ftui-popup id="popup-Aquarium" width="800px" height="300px" timeout="120">
<ftui-chart title="Aquarium Temperatur">
<ftui-chart-data label="Temperatur" color="#21a000" log="logdb" file="-" spec="Aquarium_Temp:temperature"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
<ftui-popup>
Gruß
Eisix
Zitat von: grossmaggul am 03 Januar 2021, 10:17:14
O.K., dann muß ich nochmal forschen, habe ich nicht hinbekommen, danke!
Popup reagiert auf beliebige Elemente, die ein popup-target Attribute mit ihrer ID haben und das Click Event bis zum Document aufsteigen lassen, also nicht selbst abfangen und dann die Propagation stoppen.
<div popup-target="my-popup">
@setstate
kann bei einem ftui-tab das view ein fhem reading sein?
momentan
<ftui-tab view="View2"><ftui-icon class="size-2" name="television"></ftui-icon></ftui-tab>
pseudo code
<ftui-tab view="[Fhemreading]"><ftui-icon class="size-2" name="television"></ftui-icon></ftui-tab>
geht das?
Gruß
Eisix
Spontan würde ich sagen: ja
Versuch macht schlau ;D
ZitatPopup reagiert auf beliebige Elemente
Ja, merke ich auch gerade, hatte ich wohl gestern einen Typo drin. :-[
Hallo,
noch eine Frage. Bei chart wie kriege ich andere Linien-Typen hin, z.B.: steps.
Konnte kein Beispiel finden und attribut stepped war es auch nicht.
Jemand einen Tip für mich?
Gruß
Eisix
Hallo zusammen
Chart Widget:
Wenn ich Sonntags im Chart auf die Ansicht "week" klicke, wird mir die kommenden Woche angezeigt.
Wird das über chart.components.js gesteuert oder über FHEM?
Grüsse
@Thyraz
Ich wollte die Waschmaschine per icon-multicolor visualisieren.
<ftui-icon-multicolor
[name]="Waschmaschine_Strg | map('aus:washing_off, an:washing_on, arbeitet:washing_on, fertig:washing_on')">
</ftui-icon-multicolor>
Wo muss ich das iterations="1" einbauen, damit die die Animation nur im state=arbeitet aktiv ist?
Ich hab da mal wieder ein Problem.
Ich würde gerne meine Telefonliste mit Bildern der Anrufer aufmöbeln, zur Zeit befindet sich meine FTUI3 Installation noch unter fhem/www/phone
Dazu habe ich folgendes Konstrukt gebaut:
<ftui-image [base]="http://192.168.1.12:8083/fhem/phone/images/kontakte/" [src]="fritzlist:1-image" width="20"></ftui-image>
"1-image" enthält den Dateinamen des Bildes.
Führe ich das aus erhalte ich als Pfad für das Bild aber immer nur das hier:
http://192.168.1.12:8083/fhem/ftui/01758707410.jpg
Wo habe ich da ein Verständnisproblem bei der Erstellung des Pfades?
Die [] bei base müssen weg, so läuft es bei mir
<ftui-image base="http://192.168.1.12:8083/fhem/phone/images/kontakte/" [src]="fritzlist:1-image" width="20"></ftui-image>
ZitatDie [] bei base müssen weg, so läuft es bei mir
Bei mir jetzt auch, war wohl doch schon ein bißchen spät gestern. :o
Danke Dir!
Zur Info: mit shape="circle" kann man Images jetzt auch zu schicken Profilbildern wandeln.
https://knowthelist.github.io/ftui/www/ftui/examples/image.html
Zitat von: setstate am 03 Januar 2021, 10:52:48
Spontan würde ich sagen: ja
Versuch macht schlau ;D
Geht allerdings muss man das Icon nochmal klicken um einen refresh zu haben
<ftui-tab [view]="TEST"><ftui-icon class="size-2" name="television"></ftui-icon></ftui-tab>
Gruß
Eisix
ja, nur bei Click wird der View neu aktiviert.
Was ist dein Anwendungsfall genau?
Man könnte noch das Attribute value von zwei Tabs von FHEM auf 'on' setzen lassen. Einmal bekommt Tab1 'on', oder Tab2.
<ftui-tab fill="clear" direction="vertical" view="View1" [value]="dummy1 | map('Wert1:on, .*:off')" active>
<ftui-icon name="home1"></ftui-icon>
<label class="small">Tab1</label>
</ftui-tab>
<ftui-tab fill="clear" direction="vertical" view="View2" [value]="dummy1 | map('Wert2:on, .*:off')">
<ftui-icon name="cog"></ftui-icon>
<label class="small">Tab2</label>
</ftui-tab>
<ftui-tab fill="clear" direction="vertical" view="View3" [value]="dummy1 | map('Wert3:on, .*:off')">
<ftui-icon name="clock-o"></ftui-icon>
<label class="small">Tab3</label>
</ftui-tab>
Mit dem Click kann ich leben, war bei FTUI2 auch so. Da hatte ich es mit hide gelöst. So ist eleganter.
Mein Anwendungsfall ist das ich Wohnzimmer einen Harmony Hub habe der alle Multimedia Geräte ansteuert. Je nach ausgewähltem Szenario (Fernsehen, Musik, Filme, Zocken, ...) zeige ich dann andere Bedienelemente auf meiner Multimedia Seite an.
Gruß
Eisix
ich stehe nach wie vor mit den Botton zum schalten auf Kriegsfuß, warum ich weiß es nicht...
Hier mal mein Beispiel: setze ich es so ein schaltet er mir die Leuchte auch ein, aber nicht mehr aus, es kommt immer nur das Signal "set WegLampe_Sw_01 on" zu sehen an den Meldungen unten links
<ftui-column height="80px">
<ftui-button [(value)]="WegLampe_Sw_01" fill="outline" [color]="WegLampe_Sw_01:state | map('off:MediumSpringGreen, on:Crimson')">
<ftui-icon class="normal" path="../images/openautomation"
[name]="WegLampe_Sw_01:state | map('off:light_uplight, on:light_uplight')"
[color]="WegLampe_Sw_01:state | map('off:MediumSpringGreen, on:Crimson')"></ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Kugelleuchte &</ftui-label>
<ftui-label class="size-0" color="white">Schuppen</ftui-label>
</ftui-column>
Die andere Variante ist die folgende: hiermit funktioniert das EIN und AUS schalten.
<ftui-column height="80px">
<ftui-button [value]="WegLampe_Sw_01:state" fill="outline"
[color]="WegLampe_Sw_01:state | map('off:MediumSpringGreen, on:Crimson')"
(value)="WegLampe_Sw_01" states="on, off">
<ftui-icon class="normal" path="../images/openautomation"
[name]="WegLampe_Sw_01:state | map('off:light_uplight, on:light_uplight')"
[color]="WegLampe_Sw_01:state | map('off:MediumSpringGreen, on:Crimson')"></ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Kugelleuchte &</ftui-label>
<ftui-label class="size-0" color="white">Schuppen</ftui-label>
</ftui-column>
was ich damit sagen will, ich habe es gerade heute bemerkt das die Variante 1 nicht funktioniert, obwohl ich der Meinung bin das es mal funktioniert hat.
@setstate evtl. kannst du mir sagen ob es eine Änderung gab ich hatte zwischenzeitlich eine aktuellere Version runter geladen.
Was ich noch festgestellt habe ist, ich muss das Icon beim tippen exakt treffen sonst schaltet er nicht..!
Ich würde gern meine alten Background Icons einsetzen die ich mir gebaut hatte, ist das irgendwie möglich..? ich habe es noch nicht hinbekommen.
Es gab vor der letzten Version ein Problem mit Button ist hier im Thread. Mit der aktuellen Version konnte ich noch keine Probleme feststellen.
Beispiel
<ftui-column>
<ftui-cell>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="Steckerleiste_AQ_grau" states="on,off">
<ftui-icon class="size-3" [name]="Steckerleiste_AQ_grau | map('on:lightbulb-on, off:lightbulb-off')"
[color]="Steckerleiste_AQ_grau |map('on:yellow, off:grey')"
></ftui-icon>
</ftui-button>
<ftui-label text="Aquarium"></ftui-label>
</ftui-cell>
</ftui-column>
Gruß
Eisix
Moin,
also bei mir klappt so (FHEM Device ist ein Shelly 1)...
<ftui-button [(value)]="Arbeitszimmer_OG_Licht_Arbeitstisch" fill="clear">
<ftui-icon [name]="Arbeitszimmer_OG_Licht_Arbeitstisch:state | map('off:lightbulb-outline, on:lightbulb-on-outline')"
[color]="Arbeitszimmer_OG_Licht_Arbeitstisch:state | map('off:white, on:yellow')"></ftui-icon>
</ftui-button>
oder so (FHEM Device ist Homematic)...
<ftui-button [(value)]="Schlafzimmer_EG_Licht_Decke" fill="clear">
<ftui-icon [name]="Schlafzimmer_EG_Licht_Decke:state | map('set.*:cog, off:lightbulb-outline, on:lightbulb-on-outline')"
[color]="Schlafzimmer_EG_Licht_Decke:state | map('off:white, on:yellow')"
[class-name]="Schlafzimmer_EG_Licht_Decke:state | map('set.*:spin')">
</ftui-icon>
</ftui-button>
oder auch mit einem SONOFF Basic (Tasmota)...
<ftui-button [(value)]="Wohnzimmer_EG_Licht_Stehlampe" fill="clear">
<ftui-icon [name]="Wohnzimmer_EG_Licht_Stehlampe:state | map('set.*:cog, off:lightbulb-outline, on:lightbulb-on-outline')"
[color]="Wohnzimmer_EG_Licht_Stehlampe:state | map('off:white, on:yellow')"
[class-name]="Wohnzimmer_EG_Licht_Stehlampe:state | map('set.*:spin')">
</ftui-icon>
</ftui-button>
Grüße
Olli
PS: Ist "toast" aktiv um zu sehen was an FHEM gesendet wird?
Zitat von: Eisix am 04 Januar 2021, 16:10:47
Es gab vor der letzten Version ein Problem mit Button ist hier im Thread. Mit der aktuellen Version konnte ich noch keine Probleme feststellen.
Gruß
Eisix
OK, so habe ich es ja jetzt geändert an allen Button... daran wird es dann wohl gelegen haben, hatte ich wohl die defekte Version, denn ich habe immer Probleme gehabt beim schalten
Zitat von: octek0815 am 04 Januar 2021, 16:25:45
Moin,
also bei mir klappt so (FHEM Device ist ein Shelly 1)...
Grüße
Olli
PS: Ist "toast" aktiv um zu sehen was an FHEM gesendet wird?
hi, Olli... ja ich weiß ich hatte es ja seinerzeit umgebaut, als du es mir geschickt hast und ich weiß auch das es funktioniert hat...
Heute nun wollte ich etwas testen, weil ich fast immer nur am Tablet einschalte und dann am Ort eben aus, oder so ähnlich mit z.B. Fernbdienung.
Aber das ging heute nicht mehr....
Waren alle divices Homematic, Shelly und auch Tasmota sonoff.
Ja an den Toast Meldungen hatte ich es ja gesehen das er immer nur ein "on" geschickt hat
Ok, dann hast du es ja mit nem Update jetzt behoben.
Ist ja jetzt auch bequemer seitdem setstate auf das das Updateverfahren von FHEM umgebaut hat.
Zitat von: octek0815 am 04 Januar 2021, 18:16:22
Ist ja jetzt auch bequemer seitdem setstate auf das das Updateverfahren von FHEM umgebaut hat.
Geht bei dir "update add" damit es im Update Prozess von FHEM integriert ist? Oder gibst du auch jedesmal manuell in die Befehszeile "update all https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txt" ein?
LG Eppi
Zitat von: eppi am 04 Januar 2021, 18:22:29
Geht bei dir "update add" damit es im Update Prozess von FHEM integriert ist? Oder gibst du auch jedesmal manuell in die Befehszeile "update all https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txt" ein?
LG Eppi
Moin Eppi,
ich habe einfach im FHEMWEB Device WEB das Attribut "menuEntries" genutzt.
Und folgendes eingetragen:
FTUI Update Check,cmd=update check https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txt,FTUI Update,cmd=update all https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txt
Einmal zum Checken und einmal zum ausführen.
Grüße
Olli
Zitat von: eppi am 04 Januar 2021, 18:22:29Geht bei dir "update add" damit es im Update Prozess von FHEM integriert ist? Oder gibst du auch jedesmal manuell in die Befehszeile "update all https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txt" ein?
Für ein update all müsste, laut Fehlermeldung, die Datein
controls_.*.txt heissen, in etwa so:
update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
Zitat von: yersinia am 05 Januar 2021, 10:07:29
Für ein update all müsste, laut Fehlermeldung, die Datein controls_.*.txt heissen, in etwa so:
update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
update all geht auch mit update_ftui.txt.
update
add braucht ein
controls_ftui.txt.
@setstate könntest du die index.html aus der update_ftui.txt bzw. controls_ftui.txt rausnehmen oder in index_demo.html umbenennen? Dann muss man nach dem Update nicht immer die eigene index.html wieder rein kopieren.
Grüße
LuGu
Zitat von: LuGu am 05 Januar 2021, 11:18:17
update all geht auch mit update_ftui.txt.
update add braucht ein controls_ftui.txt.
@setstate könntest du die index.html aus der update_ftui.txt bzw. controls_ftui.txt rausnehmen oder in index_demo.html umbenennen? Dann muss man nach dem Update nicht immer die eigene index.html wieder rein kopieren.
Ich finde controls_*.txt so verwirrend. Welche Controls? Aber, wenn das nur so geht, dann ändere ich den Namen.
index.html wird mit CRE geliefert, also wird nur angelegt, wenn es sie noch nicht gibt.
Warum werden eigentlich keine Directories angelegt? Wenn die nicht da sind, bricht die Aktualisierung mit Fehler ab. In einem Beispiel habe ich mal DIR gelesen, das gibt es aber leider nicht mehr?
Zitat von: setstate am 05 Januar 2021, 12:48:20
Warum werden eigentlich keine Directories angelegt? Wenn die nicht da sind, bricht die Aktualisierung mit Fehler ab. In einem Beispiel habe ich mal DIR gelesen, das gibt es aber leider nicht mehr?
Bei mir wurden beim ersten
update all https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txtAlle nicht vorhandenen Directories ohne Probleme angelegt. Kann das aber gerne heute Abend noch mal testen.
Grüße
LuGu
Zitat von: LuGu am 05 Januar 2021, 13:57:57Bei mir wurden beim ersten
update all https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txt
Alle nicht vorhandenen Directories ohne Probleme angelegt.
Das kann ich bestätigen. Beim ersten
update all wurden alle Verzeichnisse angelegt.
Zitat von: setstate am 05 Januar 2021, 12:48:20Ich finde controls_*.txt so verwirrend. Welche Controls? Aber, wenn das nur so geht, dann ändere ich den Namen.
Ein
update add https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txtgibt
Usage: update add http://.../controls_.*.txtzurück.
Entweder den Namen des txts ändern oder Rudi fragen, ob man die Einschränkung ändern kann (im Übrigen fand ich diesbezüglich auch nichts in der Doku).
Zitat von: yersinia am 05 Januar 2021, 15:16:25
Das kann ich bestätigen. Beim ersten update all wurden alle Verzeichnisse angelegt.
Bei mir kommt das
Downloading https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txt
UPD www/ftui/components/badge/badge.component.css
open ./www/ftui/components/badge/badge.component.css failed: No such file or directory, trying to restore the previous version and aborting the update
Habe das Verzeichnis noch mal gelöscht und per FHEM command line update all ausgeführt.
update all https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txt
Hat alles ohne Fehlermeldung geklappt.
2021.01.05 20:57:45 1: Downloading https://raw.githubusercontent.com/knowthelist/ftui/master/update_ftui.txt
2021.01.05 20:57:45 2: Backup with command: tar czf ./backup/FHEM-20210105_205745.tar.gz "./docs" "./log" "./contrib" "./www" "./GPL_V2.txt" "./unused" 2021.01.05 20:57:56 1: backup done: FHEM-20210105_205745.tar.gz (72399775 Bytes)
2021.01.05 20:57:57 1: UPD www/ftui/components/badge/badge.component.css
2021.01.05 20:57:57 1: UPD www/ftui/components/badge/badge.component.js
2021.01.05 20:57:57 1: UPD www/ftui/components/button/button-nice.component.js
2021.01.05 20:57:57 1: UPD www/ftui/components/button/button.component.css
2021.01.05 20:57:57 1: UPD www/ftui/components/button/button.component.js
2021.01.05 20:57:58 1: UPD www/ftui/components/cell/cell.component.js
2021.01.05 20:57:58 1: UPD www/ftui/components/chart/chart-controls.component.css
2021.01.05 20:57:58 1: UPD www/ftui/components/chart/chart-controls.component.js
2021.01.05 20:57:58 1: UPD www/ftui/components/chart/chart-data.component.js
2021.01.05 20:57:58 1: UPD www/ftui/components/chart/chart.component.css
2021.01.05 20:57:59 1: UPD www/ftui/components/chart/chart.component.js
2021.01.05 20:57:59 1: UPD www/ftui/components/checkbox/checkbox.component.css
2021.01.05 20:57:59 1: UPD www/ftui/components/checkbox/checkbox.component.js
2021.01.05 20:57:59 1: UPD www/ftui/components/circlemenu/circlemenu.component.css
2021.01.05 20:57:59 1: UPD www/ftui/components/circlemenu/circlemenu.component.js
2021.01.05 20:57:59 1: UPD www/ftui/components/clock/clock.component.js
2021.01.05 20:58:00 1: UPD www/ftui/components/colorpicker/colorpicker.component.js
2021.01.05 20:58:00 1: UPD www/ftui/components/column/column.component.js
2021.01.05 20:58:00 1: UPD www/ftui/components/content/content.component.css
2021.01.05 20:58:00 1: UPD www/ftui/components/content/content.component.js
2021.01.05 20:58:00 1: UPD www/ftui/components/dropdown/dropdown.component.css
2021.01.05 20:58:01 1: UPD www/ftui/components/dropdown/dropdown.component.js
2021.01.05 20:58:01 1: UPD www/ftui/components/element.component.js
2021.01.05 20:58:01 1: UPD www/ftui/components/grid/grid-tile.component.css
2021.01.05 20:58:01 1: UPD www/ftui/components/grid/grid-tile.component.js
2021.01.05 20:58:01 1: UPD www/ftui/components/grid/grid.component.js
2021.01.05 20:58:02 1: UPD www/ftui/components/icon/icon.component.css
2021.01.05 20:58:02 1: UPD www/ftui/components/icon/icon.component.js
2021.01.05 20:58:02 1: UPD www/ftui/components/image/image.component.js
2021.01.05 20:58:02 1: UPD www/ftui/components/knob/knob.component.css
2021.01.05 20:58:02 1: UPD www/ftui/components/knob/knob.component.js
2021.01.05 20:58:03 1: UPD www/ftui/components/label/label.component.js
2021.01.05 20:58:03 1: UPD www/ftui/components/main/main.component.css
2021.01.05 20:58:03 1: UPD www/ftui/components/main/main.component.js
2021.01.05 20:58:03 1: UPD www/ftui/components/menu/menu-button.component.js
2021.01.05 20:58:03 1: UPD www/ftui/components/menu/menu.component.css
2021.01.05 20:58:04 1: UPD www/ftui/components/menu/menu.component.js
2021.01.05 20:58:04 1: UPD www/ftui/components/popup/popup.component.css
2021.01.05 20:58:04 1: UPD www/ftui/components/popup/popup.component.js
2021.01.05 20:58:04 1: UPD www/ftui/components/row/row.component.js
2021.01.05 20:58:04 1: UPD www/ftui/components/slider/slider.component.css
2021.01.05 20:58:04 1: UPD www/ftui/components/slider/slider.component.js
2021.01.05 20:58:05 1: UPD www/ftui/components/speak/speak.component.js
2021.01.05 20:58:05 1: UPD www/ftui/components/tab/tab-view.component.js
2021.01.05 20:58:05 1: UPD www/ftui/components/tab/tab.component.css
2021.01.05 20:58:05 1: UPD www/ftui/components/tab/tab.component.js
2021.01.05 20:58:05 1: UPD www/ftui/components/title/title.component.js
2021.01.05 20:58:06 1: UPD www/ftui/components/view/view-section.component.css
2021.01.05 20:58:06 1: UPD www/ftui/components/view/view-section.component.js
2021.01.05 20:58:06 1: UPD www/ftui/components/view/view-toolbar.component.css
2021.01.05 20:58:06 1: UPD www/ftui/components/view/view-toolbar.component.js
2021.01.05 20:58:06 1: UPD www/ftui/components/view/view.component.js
2021.01.05 20:58:07 1: UPD www/ftui/components/weather/weather.component.js
2021.01.05 20:58:07 1: UPD www/ftui/components/weather/weather.map.js
2021.01.05 20:58:07 1: UPD www/ftui/examples/badge.html
2021.01.05 20:58:07 1: UPD www/ftui/examples/button-nice.html
2021.01.05 20:58:07 1: UPD www/ftui/examples/button.html
2021.01.05 20:58:07 1: UPD www/ftui/examples/chart.html
2021.01.05 20:58:08 1: UPD www/ftui/examples/checkbox.html
2021.01.05 20:58:08 1: UPD www/ftui/examples/circlemenu.html
2021.01.05 20:58:08 1: UPD www/ftui/examples/clock.html
2021.01.05 20:58:08 1: UPD www/ftui/examples/colorpicker.html
2021.01.05 20:58:08 1: UPD www/ftui/examples/content.html
2021.01.05 20:58:09 1: UPD www/ftui/examples/contents/content-grid.html
2021.01.05 20:58:09 1: UPD www/ftui/examples/contents/content-view1.html
2021.01.05 20:58:09 1: UPD www/ftui/examples/contents/content-view2.html
2021.01.05 20:58:09 1: UPD www/ftui/examples/contents/content-weather.html
2021.01.05 20:58:10 1: UPD www/ftui/examples/dropdown.html
2021.01.05 20:58:10 1: UPD www/ftui/examples/grid.html
2021.01.05 20:58:10 1: UPD www/ftui/examples/icon.html
2021.01.05 20:58:10 1: UPD www/ftui/examples/image.html
2021.01.05 20:58:10 1: UPD www/ftui/examples/knob.html
2021.01.05 20:58:10 1: UPD www/ftui/examples/label.html
2021.01.05 20:58:11 1: UPD www/ftui/examples/menu.html
2021.01.05 20:58:11 1: UPD www/ftui/examples/mobile.html
2021.01.05 20:58:11 1: UPD www/ftui/examples/popup.html
2021.01.05 20:58:11 1: UPD www/ftui/examples/slider.html
2021.01.05 20:58:11 1: UPD www/ftui/examples/speak.html
2021.01.05 20:58:12 1: UPD www/ftui/examples/tab-trans.html
2021.01.05 20:58:12 1: UPD www/ftui/examples/tab.html
2021.01.05 20:58:12 1: UPD www/ftui/examples/weather.html
2021.01.05 20:58:12 1: UPD www/ftui/ftui.css
2021.01.05 20:58:12 1: UPD www/ftui/ftui.js
2021.01.05 20:58:13 1: UPD www/ftui/icons/Celsius.svg
2021.01.05 20:58:13 1: UPD www/ftui/icons/Fahrenheit.svg
2021.01.05 20:58:13 1: UPD www/ftui/icons/address-book-o.svg
2021.01.05 20:58:13 1: UPD www/ftui/icons/address-book.svg
2021.01.05 20:58:13 1: UPD www/ftui/icons/address-card-o.svg
2021.01.05 20:58:13 1: UPD www/ftui/icons/address-card.svg
2021.01.05 20:58:14 1: UPD www/ftui/icons/adjust1.svg
2021.01.05 20:58:14 1: UPD www/ftui/icons/ambulance.svg
2021.01.05 20:58:14 1: UPD www/ftui/icons/american-sign-language-interpreting.svg
2021.01.05 20:58:14 1: UPD www/ftui/icons/anchor.svg
2021.01.05 20:58:14 1: UPD www/ftui/icons/android1.svg
2021.01.05 20:58:15 1: UPD www/ftui/icons/angle-double-down.svg
2021.01.05 20:58:15 1: UPD www/ftui/icons/angle-double-left.svg
2021.01.05 20:58:15 1: UPD www/ftui/icons/angle-double-right.svg
2021.01.05 20:58:15 1: UPD www/ftui/icons/angle-double-up.svg
2021.01.05 20:58:15 1: UPD www/ftui/icons/angle-down.svg
2021.01.05 20:58:16 1: UPD www/ftui/icons/angle-left.svg
2021.01.05 20:58:16 1: UPD www/ftui/icons/angle-right.svg
2021.01.05 20:58:16 1: UPD www/ftui/icons/angle-up.svg
2021.01.05 20:58:16 1: UPD www/ftui/icons/apple.svg
2021.01.05 20:58:16 1: UPD www/ftui/icons/archive1.svg
2021.01.05 20:58:16 1: UPD www/ftui/icons/area-chart.svg
2021.01.05 20:58:17 1: UPD www/ftui/icons/arrow-circle-down.svg
2021.01.05 20:58:17 1: UPD www/ftui/icons/arrow-circle-left.svg
2021.01.05 20:58:17 1: UPD www/ftui/icons/arrow-circle-o-down.svg
2021.01.05 20:58:17 1: UPD www/ftui/icons/arrow-circle-o-left.svg
2021.01.05 20:58:17 1: UPD www/ftui/icons/arrow-circle-o-right.svg
2021.01.05 20:58:18 1: UPD www/ftui/icons/arrow-circle-o-up.svg
2021.01.05 20:58:18 1: UPD www/ftui/icons/arrow-circle-right.svg
2021.01.05 20:58:18 1: UPD www/ftui/icons/arrow-circle-up.svg
2021.01.05 20:58:18 1: UPD www/ftui/icons/arrow-down.svg
2021.01.05 20:58:18 1: UPD www/ftui/icons/arrow-left.svg
2021.01.05 20:58:19 1: UPD www/ftui/icons/arrow-right.svg
2021.01.05 20:58:19 1: UPD www/ftui/icons/arrow-up.svg
2021.01.05 20:58:19 1: UPD www/ftui/icons/arrows-alt.svg
2021.01.05 20:58:19 1: UPD www/ftui/icons/arrows-h.svg
2021.01.05 20:58:19 1: UPD www/ftui/icons/arrows-v.svg
2021.01.05 20:58:19 1: UPD www/ftui/icons/arrows.svg
2021.01.05 20:58:20 1: UPD www/ftui/icons/assistive-listening-systems.svg
2021.01.05 20:58:20 1: UPD www/ftui/icons/asterisk.svg
2021.01.05 20:58:20 1: UPD www/ftui/icons/at.svg
2021.01.05 20:58:20 1: UPD www/ftui/icons/automobile.svg
2021.01.05 20:58:20 1: UPD www/ftui/icons/backward.svg
2021.01.05 20:58:21 1: UPD www/ftui/icons/balance-scale.svg
2021.01.05 20:58:21 1: UPD www/ftui/icons/ban.svg
2021.01.05 20:58:21 1: UPD www/ftui/icons/bank.svg
2021.01.05 20:58:21 1: UPD www/ftui/icons/bar-chart.svg
2021.01.05 20:58:21 1: UPD www/ftui/icons/barcode.svg
2021.01.05 20:58:22 1: UPD www/ftui/icons/bars.svg
2021.01.05 20:58:22 1: UPD www/ftui/icons/bath.svg
2021.01.05 20:58:22 1: UPD www/ftui/icons/battery-0.svg
2021.01.05 20:58:22 1: UPD www/ftui/icons/battery-1.svg
2021.01.05 20:58:22 1: UPD www/ftui/icons/battery-2.svg
2021.01.05 20:58:23 1: UPD www/ftui/icons/battery-3.svg
2021.01.05 20:58:23 1: UPD www/ftui/icons/battery.svg
2021.01.05 20:58:23 1: UPD www/ftui/icons/bed.svg
2021.01.05 20:58:23 1: UPD www/ftui/icons/beer.svg
2021.01.05 20:58:23 1: UPD www/ftui/icons/bell-o.svg
2021.01.05 20:58:24 1: UPD www/ftui/icons/bell-slash-o.svg
2021.01.05 20:58:24 1: UPD www/ftui/icons/bell-slash.svg
2021.01.05 20:58:24 1: UPD www/ftui/icons/bell.svg
2021.01.05 20:58:24 1: UPD www/ftui/icons/bicycle.svg
2021.01.05 20:58:24 1: UPD www/ftui/icons/binoculars.svg
2021.01.05 20:58:24 1: UPD www/ftui/icons/birthday-cake.svg
2021.01.05 20:58:25 1: UPD www/ftui/icons/bitbucket-square.svg
2021.01.05 20:58:25 1: UPD www/ftui/icons/bitbucket.svg
2021.01.05 20:58:25 1: UPD www/ftui/icons/blind.svg
2021.01.05 20:58:25 1: UPD www/ftui/icons/bluetooth-b.svg
2021.01.05 20:58:25 1: UPD www/ftui/icons/bluetooth1.svg
2021.01.05 20:58:26 1: UPD www/ftui/icons/bolt1.svg
2021.01.05 20:58:26 1: UPD www/ftui/icons/bomb.svg
2021.01.05 20:58:26 1: UPD www/ftui/icons/book1.svg
2021.01.05 20:58:26 1: UPD www/ftui/icons/bookmark-o.svg
2021.01.05 20:58:26 1: UPD www/ftui/icons/bookmark1.svg
2021.01.05 20:58:27 1: UPD www/ftui/icons/braille.svg
2021.01.05 20:58:27 1: UPD www/ftui/icons/briefcase.svg
2021.01.05 20:58:27 1: UPD www/ftui/icons/bug.svg
2021.01.05 20:58:27 1: UPD www/ftui/icons/building-o.svg
2021.01.05 20:58:27 1: UPD www/ftui/icons/building.svg
2021.01.05 20:58:28 1: UPD www/ftui/icons/bullhorn.svg
2021.01.05 20:58:28 1: UPD www/ftui/icons/bullseye.svg
2021.01.05 20:58:28 1: UPD www/ftui/icons/bus.svg
2021.01.05 20:58:28 1: UPD www/ftui/icons/cab.svg
2021.01.05 20:58:28 1: UPD www/ftui/icons/calculator.svg
2021.01.05 20:58:28 1: UPD www/ftui/icons/calendar-check-o.svg
2021.01.05 20:58:29 1: UPD www/ftui/icons/calendar-minus-o.svg
2021.01.05 20:58:29 1: UPD www/ftui/icons/calendar-o.svg
2021.01.05 20:58:29 1: UPD www/ftui/icons/calendar-plus-o.svg
2021.01.05 20:58:29 1: UPD www/ftui/icons/calendar-times-o.svg
2021.01.05 20:58:29 1: UPD www/ftui/icons/calendar.svg
2021.01.05 20:58:30 1: UPD www/ftui/icons/camera-retro.svg
2021.01.05 20:58:30 1: UPD www/ftui/icons/camera1.svg
2021.01.05 20:58:30 1: UPD www/ftui/icons/caret-down.svg
2021.01.05 20:58:30 1: UPD www/ftui/icons/caret-left.svg
2021.01.05 20:58:30 1: UPD www/ftui/icons/caret-right.svg
2021.01.05 20:58:31 1: UPD www/ftui/icons/caret-square-o-down.svg
2021.01.05 20:58:31 1: UPD www/ftui/icons/caret-square-o-left.svg
2021.01.05 20:58:31 1: UPD www/ftui/icons/caret-square-o-right.svg
2021.01.05 20:58:31 1: UPD www/ftui/icons/caret-square-o-up.svg
2021.01.05 20:58:31 1: UPD www/ftui/icons/caret-up.svg
2021.01.05 20:58:31 1: UPD www/ftui/icons/cart-arrow-down.svg
2021.01.05 20:58:32 1: UPD www/ftui/icons/cart-plus.svg
2021.01.05 20:58:32 1: UPD www/ftui/icons/certificate.svg
2021.01.05 20:58:32 1: UPD www/ftui/icons/chain-broken.svg
2021.01.05 20:58:32 1: UPD www/ftui/icons/chain.svg
2021.01.05 20:58:32 1: UPD www/ftui/icons/check-circle-o.svg
2021.01.05 20:58:33 1: UPD www/ftui/icons/check-circle.svg
2021.01.05 20:58:33 1: UPD www/ftui/icons/check-square-o.svg
2021.01.05 20:58:33 1: UPD www/ftui/icons/check-square.svg
2021.01.05 20:58:33 1: UPD www/ftui/icons/check1.svg
2021.01.05 20:58:33 1: UPD www/ftui/icons/chevron-circle-down.svg
2021.01.05 20:58:34 1: UPD www/ftui/icons/chevron-circle-left.svg
2021.01.05 20:58:34 1: UPD www/ftui/icons/chevron-circle-right.svg
2021.01.05 20:58:34 1: UPD www/ftui/icons/chevron-circle-up.svg
2021.01.05 20:58:34 1: UPD www/ftui/icons/chevron-down.svg
2021.01.05 20:58:34 1: UPD www/ftui/icons/chevron-left.svg
2021.01.05 20:58:34 1: UPD www/ftui/icons/chevron-right.svg
2021.01.05 20:58:35 1: UPD www/ftui/icons/chevron-up.svg
2021.01.05 20:58:35 1: UPD www/ftui/icons/child.svg
2021.01.05 20:58:35 1: UPD www/ftui/icons/circle-o-notch.svg
2021.01.05 20:58:35 1: UPD www/ftui/icons/circle-o.svg
2021.01.05 20:58:35 1: UPD www/ftui/icons/circle.svg
2021.01.05 20:58:36 1: UPD www/ftui/icons/classic-window.svg
2021.01.05 20:58:36 1: UPD www/ftui/icons/clipboard.svg
2021.01.05 20:58:36 1: UPD www/ftui/icons/clock-o.svg
2021.01.05 20:58:36 1: UPD www/ftui/icons/clone.svg
2021.01.05 20:58:36 1: UPD www/ftui/icons/close.svg
2021.01.05 20:58:36 1: UPD www/ftui/icons/cloud-download.svg
2021.01.05 20:58:37 1: UPD www/ftui/icons/cloud-upload.svg
2021.01.05 20:58:37 1: UPD www/ftui/icons/cloud1.svg
2021.01.05 20:58:37 1: UPD www/ftui/icons/cloud11.svg
2021.01.05 20:58:37 1: UPD www/ftui/icons/cloud2.svg
2021.01.05 20:58:38 1: UPD www/ftui/icons/cloud3.svg
2021.01.05 20:58:38 1: UPD www/ftui/icons/cloud4.svg
2021.01.05 20:58:38 1: UPD www/ftui/icons/cloud5.svg
2021.01.05 20:58:38 1: UPD www/ftui/icons/cloudy.svg
2021.01.05 20:58:38 1: UPD www/ftui/icons/cloudy1.svg
2021.01.05 20:58:39 1: UPD www/ftui/icons/cloudy2.svg
2021.01.05 20:58:39 1: UPD www/ftui/icons/cloudy3.svg
2021.01.05 20:58:39 1: UPD www/ftui/icons/code-fork.svg
2021.01.05 20:58:39 1: UPD www/ftui/icons/code1.svg
2021.01.05 20:58:39 1: UPD www/ftui/icons/coffee.svg
2021.01.05 20:58:39 1: UPD www/ftui/icons/cog.svg
2021.01.05 20:58:40 1: UPD www/ftui/icons/cogs.svg
2021.01.05 20:58:40 1: UPD www/ftui/icons/columns.svg
2021.01.05 20:58:40 1: UPD www/ftui/icons/comment-o.svg
2021.01.05 20:58:40 1: UPD www/ftui/icons/comment1.svg
2021.01.05 20:58:40 1: UPD www/ftui/icons/commenting-o.svg
2021.01.05 20:58:41 1: UPD www/ftui/icons/commenting.svg
2021.01.05 20:58:41 1: UPD www/ftui/icons/comments-o.svg
2021.01.05 20:58:41 1: UPD www/ftui/icons/comments.svg
2021.01.05 20:58:41 1: UPD www/ftui/icons/compass.svg
2021.01.05 20:58:41 1: UPD www/ftui/icons/compass1.svg
2021.01.05 20:58:41 1: UPD www/ftui/icons/compress1.svg
2021.01.05 20:58:42 1: UPD www/ftui/icons/connectdevelop.svg
2021.01.05 20:58:42 1: UPD www/ftui/icons/copy.svg
2021.01.05 20:58:42 1: UPD www/ftui/icons/credit-card-alt.svg
2021.01.05 20:58:42 1: UPD www/ftui/icons/credit-card.svg
2021.01.05 20:58:42 1: UPD www/ftui/icons/crop1.svg
2021.01.05 20:58:43 1: UPD www/ftui/icons/crosshairs.svg
2021.01.05 20:58:43 1: UPD www/ftui/icons/cube.svg
2021.01.05 20:58:43 1: UPD www/ftui/icons/cubes.svg
2021.01.05 20:58:43 1: UPD www/ftui/icons/cut.svg
2021.01.05 20:58:43 1: UPD www/ftui/icons/cutlery.svg
2021.01.05 20:58:44 1: UPD www/ftui/icons/dashboard1.svg
2021.01.05 20:58:44 1: UPD www/ftui/icons/database.svg
2021.01.05 20:58:44 1: UPD www/ftui/icons/deaf.svg
2021.01.05 20:58:44 1: UPD www/ftui/icons/delicious.svg
2021.01.05 20:58:44 1: UPD www/ftui/icons/demo-files/demo.css
2021.01.05 20:58:45 1: UPD www/ftui/icons/demo.html
2021.01.05 20:58:45 1: UPD www/ftui/icons/desktop.svg
2021.01.05 20:58:45 1: UPD www/ftui/icons/diamond.svg
2021.01.05 20:58:45 1: UPD www/ftui/icons/dollar.svg
2021.01.05 20:58:45 1: UPD www/ftui/icons/dot-circle-o.svg
2021.01.05 20:58:46 1: UPD www/ftui/icons/download.svg
2021.01.05 20:58:46 1: UPD www/ftui/icons/drivers-license-o.svg
2021.01.05 20:58:46 1: UPD www/ftui/icons/drivers-license.svg
2021.01.05 20:58:46 1: UPD www/ftui/icons/dropbox.svg
2021.01.05 20:58:46 1: UPD www/ftui/icons/edit.svg
2021.01.05 20:58:47 1: UPD www/ftui/icons/eject1.svg
2021.01.05 20:58:47 1: UPD www/ftui/icons/ellipsis-h.svg
2021.01.05 20:58:47 1: UPD www/ftui/icons/ellipsis-v.svg
2021.01.05 20:58:47 1: UPD www/ftui/icons/envelope-o.svg
2021.01.05 20:58:47 1: UPD www/ftui/icons/envelope-open-o.svg
2021.01.05 20:58:48 1: UPD www/ftui/icons/envelope-open.svg
2021.01.05 20:58:48 1: UPD www/ftui/icons/envelope-square.svg
2021.01.05 20:58:48 1: UPD www/ftui/icons/envelope.svg
2021.01.05 20:58:48 1: UPD www/ftui/icons/eraser.svg
2021.01.05 20:58:48 1: UPD www/ftui/icons/eur.svg
2021.01.05 20:58:49 1: UPD www/ftui/icons/exchange.svg
2021.01.05 20:58:49 1: UPD www/ftui/icons/exclamation-circle.svg
2021.01.05 20:58:49 1: UPD www/ftui/icons/exclamation-triangle.svg
2021.01.05 20:58:49 1: UPD www/ftui/icons/exclamation.svg
2021.01.05 20:58:49 1: UPD www/ftui/icons/expand1.svg
2021.01.05 20:58:49 1: UPD www/ftui/icons/expeditedssl.svg
2021.01.05 20:58:50 1: UPD www/ftui/icons/external-link-square.svg
2021.01.05 20:58:50 1: UPD www/ftui/icons/external-link.svg
2021.01.05 20:58:50 1: UPD www/ftui/icons/eye-slash.svg
2021.01.05 20:58:50 1: UPD www/ftui/icons/eye.svg
2021.01.05 20:58:50 1: UPD www/ftui/icons/eyedropper.svg
2021.01.05 20:58:51 1: UPD www/ftui/icons/fa.svg
2021.01.05 20:58:51 1: UPD www/ftui/icons/fast-backward.svg
2021.01.05 20:58:51 1: UPD www/ftui/icons/fast-forward.svg
2021.01.05 20:58:51 1: UPD www/ftui/icons/fax.svg
2021.01.05 20:58:52 1: UPD www/ftui/icons/feed.svg
2021.01.05 20:58:52 1: UPD www/ftui/icons/female.svg
2021.01.05 20:58:52 1: UPD www/ftui/icons/fighter-jet.svg
2021.01.05 20:58:53 1: UPD www/ftui/icons/file-o.svg
2021.01.05 20:58:53 1: UPD www/ftui/icons/file-text-o.svg
2021.01.05 20:58:53 1: UPD www/ftui/icons/file-text.svg
2021.01.05 20:58:53 1: UPD www/ftui/icons/file.svg
2021.01.05 20:58:53 1: UPD www/ftui/icons/film.svg
2021.01.05 20:58:53 1: UPD www/ftui/icons/filter1.svg
2021.01.05 20:58:54 1: UPD www/ftui/icons/fire-extinguisher.svg
2021.01.05 20:58:54 1: UPD www/ftui/icons/fire.svg
2021.01.05 20:58:54 1: UPD www/ftui/icons/flag-checkered.svg
2021.01.05 20:58:54 1: UPD www/ftui/icons/flag-o.svg
2021.01.05 20:58:54 1: UPD www/ftui/icons/flag1.svg
2021.01.05 20:58:55 1: UPD www/ftui/icons/flask.svg
2021.01.05 20:58:55 1: UPD www/ftui/icons/flickr.svg
2021.01.05 20:58:55 1: UPD www/ftui/icons/floppy-o.svg
2021.01.05 20:58:55 1: UPD www/ftui/icons/folder-o.svg
2021.01.05 20:58:55 1: UPD www/ftui/icons/folder-open-o.svg
2021.01.05 20:58:56 1: UPD www/ftui/icons/folder-open.svg
2021.01.05 20:58:56 1: UPD www/ftui/icons/folder1.svg
2021.01.05 20:58:56 1: UPD www/ftui/icons/fort-awesome.svg
2021.01.05 20:58:56 1: UPD www/ftui/icons/forward1.svg
2021.01.05 20:58:56 1: UPD www/ftui/icons/front-door.svg
2021.01.05 20:58:56 1: UPD www/ftui/icons/frown-o.svg
2021.01.05 20:58:57 1: UPD www/ftui/icons/ftui-circle-thin1.svg
2021.01.05 20:58:57 1: UPD www/ftui/icons/ftui-door.svg
2021.01.05 20:58:57 1: UPD www/ftui/icons/ftui-square-o.svg
2021.01.05 20:58:57 1: UPD www/ftui/icons/futbol-o.svg
2021.01.05 20:58:58 1: UPD www/ftui/icons/gamepad.svg
2021.01.05 20:58:58 1: UPD www/ftui/icons/gavel1.svg
2021.01.05 20:58:58 1: UPD www/ftui/icons/gbp.svg
2021.01.05 20:58:58 1: UPD www/ftui/icons/genderless.svg
2021.01.05 20:58:58 1: UPD www/ftui/icons/get-pocket.svg
2021.01.05 20:58:59 1: UPD www/ftui/icons/gift.svg
2021.01.05 20:58:59 1: UPD www/ftui/icons/gittip.svg
2021.01.05 20:58:59 1: UPD www/ftui/icons/glass.svg
2021.01.05 20:58:59 1: UPD www/ftui/icons/globe.svg
2021.01.05 20:58:59 1: UPD www/ftui/icons/graduation-cap.svg
2021.01.05 20:59:00 1: UPD www/ftui/icons/group1.svg
2021.01.05 20:59:00 1: UPD www/ftui/icons/h-square.svg
2021.01.05 20:59:00 1: UPD www/ftui/icons/hand-grab-o.svg
2021.01.05 20:59:00 1: UPD www/ftui/icons/hand-lizard-o.svg
2021.01.05 20:59:00 1: UPD www/ftui/icons/hand-o-down.svg
2021.01.05 20:59:00 1: UPD www/ftui/icons/hand-o-left.svg
2021.01.05 20:59:01 1: UPD www/ftui/icons/hand-o-right.svg
2021.01.05 20:59:01 1: UPD www/ftui/icons/hand-o-up.svg
2021.01.05 20:59:01 1: UPD www/ftui/icons/hand-paper-o.svg
2021.01.05 20:59:01 1: UPD www/ftui/icons/hand-peace-o.svg
2021.01.05 20:59:02 1: UPD www/ftui/icons/hand-pointer-o.svg
2021.01.05 20:59:02 1: UPD www/ftui/icons/hand-scissors-o.svg
2021.01.05 20:59:02 1: UPD www/ftui/icons/hand-spock-o.svg
2021.01.05 20:59:02 1: UPD www/ftui/icons/handshake-o.svg
2021.01.05 20:59:02 1: UPD www/ftui/icons/hashtag.svg
2021.01.05 20:59:02 1: UPD www/ftui/icons/hdd-o.svg
2021.01.05 20:59:03 1: UPD www/ftui/icons/headphones.svg
2021.01.05 20:59:03 1: UPD www/ftui/icons/heart-o.svg
2021.01.05 20:59:03 1: UPD www/ftui/icons/heart.svg
2021.01.05 20:59:03 1: UPD www/ftui/icons/heartbeat.svg
2021.01.05 20:59:03 1: UPD www/ftui/icons/history1.svg
2021.01.05 20:59:04 1: UPD www/ftui/icons/home1.svg
2021.01.05 20:59:04 1: UPD www/ftui/icons/hospital-o.svg
2021.01.05 20:59:04 1: UPD www/ftui/icons/hourglass-1.svg
2021.01.05 20:59:04 1: UPD www/ftui/icons/hourglass-2.svg
2021.01.05 20:59:04 1: UPD www/ftui/icons/hourglass-3.svg
2021.01.05 20:59:05 1: UPD www/ftui/icons/hourglass-o.svg
2021.01.05 20:59:05 1: UPD www/ftui/icons/hourglass.svg
2021.01.05 20:59:05 1: UPD www/ftui/icons/id-badge.svg
2021.01.05 20:59:05 1: UPD www/ftui/icons/image.svg
2021.01.05 20:59:05 1: UPD www/ftui/icons/inbox1.svg
2021.01.05 20:59:06 1: UPD www/ftui/icons/industry.svg
2021.01.05 20:59:06 1: UPD www/ftui/icons/info-circle.svg
2021.01.05 20:59:06 1: UPD www/ftui/icons/info1.svg
2021.01.05 20:59:06 1: UPD www/ftui/icons/instagram.svg
2021.01.05 20:59:06 1: UPD www/ftui/icons/intersex.svg
2021.01.05 20:59:06 1: UPD www/ftui/icons/joomla.svg
2021.01.05 20:59:07 1: UPD www/ftui/icons/key.svg
2021.01.05 20:59:07 1: UPD www/ftui/icons/keyboard-o.svg
2021.01.05 20:59:07 1: UPD www/ftui/icons/laptop.svg
2021.01.05 20:59:07 1: UPD www/ftui/icons/leaf.svg
2021.01.05 20:59:07 1: UPD www/ftui/icons/leanpub.svg
2021.01.05 20:59:08 1: UPD www/ftui/icons/lemon-o.svg
2021.01.05 20:59:08 1: UPD www/ftui/icons/level-down.svg
2021.01.05 20:59:08 1: UPD www/ftui/icons/level-up.svg
2021.01.05 20:59:08 1: UPD www/ftui/icons/life-bouy.svg
2021.01.05 20:59:08 1: UPD www/ftui/icons/lightbulb-o.svg
2021.01.05 20:59:09 1: UPD www/ftui/icons/lightbulb-off.svg
2021.01.05 20:59:09 1: UPD www/ftui/icons/lightbulb-on-outline.svg
2021.01.05 20:59:09 1: UPD www/ftui/icons/lightbulb-on.svg
2021.01.05 20:59:09 1: UPD www/ftui/icons/lightbulb-outline.svg
2021.01.05 20:59:09 1: UPD www/ftui/icons/lightbulb.svg
2021.01.05 20:59:09 1: UPD www/ftui/icons/lightning.svg
2021.01.05 20:59:10 1: UPD www/ftui/icons/lightning1.svg
2021.01.05 20:59:10 1: UPD www/ftui/icons/lightning2.svg
2021.01.05 20:59:10 1: UPD www/ftui/icons/lightning3.svg
2021.01.05 20:59:10 1: UPD www/ftui/icons/lightning4.svg
2021.01.05 20:59:10 1: UPD www/ftui/icons/line-chart.svg
2021.01.05 20:59:11 1: UPD www/ftui/icons/lines.svg
2021.01.05 20:59:11 1: UPD www/ftui/icons/linux.svg
2021.01.05 20:59:11 1: UPD www/ftui/icons/list-alt.svg
2021.01.05 20:59:11 1: UPD www/ftui/icons/list-ol.svg
2021.01.05 20:59:11 1: UPD www/ftui/icons/list-ul.svg
2021.01.05 20:59:12 1: UPD www/ftui/icons/location-arrow.svg
2021.01.05 20:59:12 1: UPD www/ftui/icons/lock.svg
2021.01.05 20:59:12 1: UPD www/ftui/icons/long-arrow-down.svg
2021.01.05 20:59:12 1: UPD www/ftui/icons/long-arrow-left.svg
2021.01.05 20:59:12 1: UPD www/ftui/icons/long-arrow-right.svg
2021.01.05 20:59:12 1: UPD www/ftui/icons/long-arrow-up.svg
2021.01.05 20:59:13 1: UPD www/ftui/icons/low-vision.svg
2021.01.05 20:59:13 1: UPD www/ftui/icons/magic.svg
2021.01.05 20:59:13 1: UPD www/ftui/icons/mail-forward.svg
2021.01.05 20:59:13 1: UPD www/ftui/icons/mail-reply-all.svg
2021.01.05 20:59:13 1: UPD www/ftui/icons/mail-reply.svg
2021.01.05 20:59:14 1: UPD www/ftui/icons/male.svg
2021.01.05 20:59:14 1: UPD www/ftui/icons/map-marker.svg
2021.01.05 20:59:14 1: UPD www/ftui/icons/map-o.svg
2021.01.05 20:59:14 1: UPD www/ftui/icons/map-pin.svg
2021.01.05 20:59:14 1: UPD www/ftui/icons/map-signs.svg
2021.01.05 20:59:14 1: UPD www/ftui/icons/map1.svg
2021.01.05 20:59:15 1: UPD www/ftui/icons/mars-double.svg
2021.01.05 20:59:15 1: UPD www/ftui/icons/mars-stroke-h.svg
2021.01.05 20:59:15 1: UPD www/ftui/icons/mars-stroke-v.svg
2021.01.05 20:59:15 1: UPD www/ftui/icons/mars-stroke.svg
2021.01.05 20:59:15 1: UPD www/ftui/icons/mars.svg
2021.01.05 20:59:16 1: UPD www/ftui/icons/medkit.svg
2021.01.05 20:59:16 1: UPD www/ftui/icons/meh-o.svg
2021.01.05 20:59:16 1: UPD www/ftui/icons/mercury.svg
2021.01.05 20:59:16 1: UPD www/ftui/icons/microchip.svg
2021.01.05 20:59:16 1: UPD www/ftui/icons/microphone-slash.svg
2021.01.05 20:59:17 1: UPD www/ftui/icons/microphone.svg
2021.01.05 20:59:17 1: UPD www/ftui/icons/minus-circle.svg
2021.01.05 20:59:17 1: UPD www/ftui/icons/minus-square-o.svg
2021.01.05 20:59:17 1: UPD www/ftui/icons/minus-square.svg
2021.01.05 20:59:17 1: UPD www/ftui/icons/minus.svg
2021.01.05 20:59:18 1: UPD www/ftui/icons/mixcloud.svg
2021.01.05 20:59:18 1: UPD www/ftui/icons/mobile.svg
2021.01.05 20:59:18 1: UPD www/ftui/icons/money1.svg
2021.01.05 20:59:18 1: UPD www/ftui/icons/moon-o.svg
2021.01.05 20:59:18 1: UPD www/ftui/icons/moon.svg
2021.01.05 20:59:18 1: UPD www/ftui/icons/moon1.svg
2021.01.05 20:59:19 1: UPD www/ftui/icons/motorcycle1.svg
2021.01.05 20:59:19 1: UPD www/ftui/icons/mouse-pointer.svg
2021.01.05 20:59:19 1: UPD www/ftui/icons/music.svg
2021.01.05 20:59:19 1: UPD www/ftui/icons/neuter.svg
2021.01.05 20:59:19 1: UPD www/ftui/icons/newspaper-o.svg
2021.01.05 20:59:20 1: UPD www/ftui/icons/none.svg
2021.01.05 20:59:20 1: UPD www/ftui/icons/odnoklassniki-square.svg
2021.01.05 20:59:20 1: UPD www/ftui/icons/odnoklassniki.svg
2021.01.05 20:59:20 1: UPD www/ftui/icons/pagelines.svg
2021.01.05 20:59:20 1: UPD www/ftui/icons/paint-brush.svg
2021.01.05 20:59:20 1: UPD www/ftui/icons/paper-plane-o.svg
2021.01.05 20:59:21 1: UPD www/ftui/icons/paper-plane.svg
2021.01.05 20:59:21 1: UPD www/ftui/icons/paperclip.svg
2021.01.05 20:59:21 1: UPD www/ftui/icons/pause-circle-o.svg
2021.01.05 20:59:21 1: UPD www/ftui/icons/pause-circle.svg
2021.01.05 20:59:21 1: UPD www/ftui/icons/pause1.svg
2021.01.05 20:59:22 1: UPD www/ftui/icons/paw.svg
2021.01.05 20:59:22 1: UPD www/ftui/icons/pencil-square.svg
2021.01.05 20:59:22 1: UPD www/ftui/icons/pencil.svg
2021.01.05 20:59:22 1: UPD www/ftui/icons/percent.svg
2021.01.05 20:59:22 1: UPD www/ftui/icons/phone-square.svg
2021.01.05 20:59:23 1: UPD www/ftui/icons/phone1.svg
2021.01.05 20:59:23 1: UPD www/ftui/icons/pie-chart.svg
2021.01.05 20:59:23 1: UPD www/ftui/icons/plane.svg
2021.01.05 20:59:23 1: UPD www/ftui/icons/play-circle-o.svg
2021.01.05 20:59:23 1: UPD www/ftui/icons/play-circle.svg
2021.01.05 20:59:24 1: UPD www/ftui/icons/play.svg
2021.01.05 20:59:24 1: UPD www/ftui/icons/plug.svg
2021.01.05 20:59:24 1: UPD www/ftui/icons/plus-circle.svg
2021.01.05 20:59:24 1: UPD www/ftui/icons/plus-square-o.svg
2021.01.05 20:59:24 1: UPD www/ftui/icons/plus-square.svg
2021.01.05 20:59:24 1: UPD www/ftui/icons/plus.svg
2021.01.05 20:59:25 1: UPD www/ftui/icons/podcast.svg
2021.01.05 20:59:25 1: UPD www/ftui/icons/power-off.svg
2021.01.05 20:59:25 1: UPD www/ftui/icons/print.svg
2021.01.05 20:59:25 1: UPD www/ftui/icons/product-hunt.svg
2021.01.05 20:59:25 1: UPD www/ftui/icons/puzzle-piece.svg
2021.01.05 20:59:26 1: UPD www/ftui/icons/qrcode.svg
2021.01.05 20:59:26 1: UPD www/ftui/icons/question-circle-o.svg
2021.01.05 20:59:26 1: UPD www/ftui/icons/question-circle.svg
2021.01.05 20:59:26 1: UPD www/ftui/icons/question.svg
2021.01.05 20:59:26 1: UPD www/ftui/icons/quote-right.svg
2021.01.05 20:59:27 1: UPD www/ftui/icons/rainy.svg
2021.01.05 20:59:27 1: UPD www/ftui/icons/rainy1.svg
2021.01.05 20:59:27 1: UPD www/ftui/icons/rainy2.svg
2021.01.05 20:59:27 1: UPD www/ftui/icons/rainy3.svg
2021.01.05 20:59:27 1: UPD www/ftui/icons/random.svg
2021.01.05 20:59:28 1: UPD www/ftui/icons/recycle.svg
2021.01.05 20:59:28 1: UPD www/ftui/icons/refresh1.svg
2021.01.05 20:59:28 1: UPD www/ftui/icons/renren.svg
2021.01.05 20:59:28 1: UPD www/ftui/icons/repeat1.svg
2021.01.05 20:59:28 1: UPD www/ftui/icons/retweet.svg
2021.01.05 20:59:29 1: UPD www/ftui/icons/road.svg
2021.01.05 20:59:29 1: UPD www/ftui/icons/rocket.svg
2021.01.05 20:59:29 1: UPD www/ftui/icons/rotate-left.svg
2021.01.05 20:59:29 1: UPD www/ftui/icons/rss-square.svg
2021.01.05 20:59:29 1: UPD www/ftui/icons/search-minus.svg
2021.01.05 20:59:29 1: UPD www/ftui/icons/search-plus.svg
2021.01.05 20:59:30 1: UPD www/ftui/icons/search1.svg
2021.01.05 20:59:30 1: UPD www/ftui/icons/sellsy.svg
2021.01.05 20:59:30 1: UPD www/ftui/icons/server.svg
2021.01.05 20:59:30 1: UPD www/ftui/icons/share-alt-square.svg
2021.01.05 20:59:30 1: UPD www/ftui/icons/share-alt.svg
2021.01.05 20:59:31 1: UPD www/ftui/icons/share-square-o.svg
2021.01.05 20:59:31 1: UPD www/ftui/icons/share-square.svg
2021.01.05 20:59:31 1: UPD www/ftui/icons/shield1.svg
2021.01.05 20:59:31 1: UPD www/ftui/icons/ship.svg
2021.01.05 20:59:31 1: UPD www/ftui/icons/shopping-bag.svg
2021.01.05 20:59:32 1: UPD www/ftui/icons/shopping-basket.svg
2021.01.05 20:59:32 1: UPD www/ftui/icons/shopping-cart.svg
2021.01.05 20:59:32 1: UPD www/ftui/icons/shower.svg
2021.01.05 20:59:32 1: UPD www/ftui/icons/sign-in.svg
2021.01.05 20:59:32 1: UPD www/ftui/icons/sign-language.svg
2021.01.05 20:59:32 1: UPD www/ftui/icons/sign-out.svg
2021.01.05 20:59:33 1: UPD www/ftui/icons/signal.svg
2021.01.05 20:59:33 1: UPD www/ftui/icons/sitemap.svg
2021.01.05 20:59:33 1: UPD www/ftui/icons/slack.svg
2021.01.05 20:59:33 1: UPD www/ftui/icons/sliders.svg
2021.01.05 20:59:33 1: UPD www/ftui/icons/slideshare.svg
2021.01.05 20:59:34 1: UPD www/ftui/icons/smile-o.svg
2021.01.05 20:59:34 1: UPD www/ftui/icons/snapchat-ghost.svg
2021.01.05 20:59:34 1: UPD www/ftui/icons/snowflake-o.svg
2021.01.05 20:59:34 1: UPD www/ftui/icons/snowflake.svg
2021.01.05 20:59:34 1: UPD www/ftui/icons/snowy.svg
2021.01.05 20:59:34 1: UPD www/ftui/icons/snowy1.svg
2021.01.05 20:59:35 1: UPD www/ftui/icons/snowy2.svg
2021.01.05 20:59:35 1: UPD www/ftui/icons/snowy3.svg
2021.01.05 20:59:35 1: UPD www/ftui/icons/snowy4.svg
2021.01.05 20:59:35 1: UPD www/ftui/icons/sort-alpha-asc.svg
2021.01.05 20:59:35 1: UPD www/ftui/icons/sort-alpha-desc.svg
2021.01.05 20:59:36 1: UPD www/ftui/icons/sort-amount-asc.svg
2021.01.05 20:59:36 1: UPD www/ftui/icons/sort-amount-desc.svg
2021.01.05 20:59:36 1: UPD www/ftui/icons/sort-asc.svg
2021.01.05 20:59:36 1: UPD www/ftui/icons/sort-desc.svg
2021.01.05 20:59:36 1: UPD www/ftui/icons/sort-numeric-asc.svg
2021.01.05 20:59:37 1: UPD www/ftui/icons/sort-numeric-desc.svg
2021.01.05 20:59:37 1: UPD www/ftui/icons/sort1.svg
2021.01.05 20:59:37 1: UPD www/ftui/icons/space-shuttle.svg
2021.01.05 20:59:37 1: UPD www/ftui/icons/spinner.svg
2021.01.05 20:59:37 1: UPD www/ftui/icons/spoon.svg
2021.01.05 20:59:38 1: UPD www/ftui/icons/spotify.svg
2021.01.05 20:59:38 1: UPD www/ftui/icons/square.svg
2021.01.05 20:59:38 1: UPD www/ftui/icons/stack-exchange.svg
2021.01.05 20:59:38 1: UPD www/ftui/icons/stack-overflow.svg
2021.01.05 20:59:38 1: UPD www/ftui/icons/star-half-empty.svg
2021.01.05 20:59:39 1: UPD www/ftui/icons/star-half.svg
2021.01.05 20:59:39 1: UPD www/ftui/icons/star-o.svg
2021.01.05 20:59:39 1: UPD www/ftui/icons/star1.svg
2021.01.05 20:59:39 1: UPD www/ftui/icons/steam-square.svg
2021.01.05 20:59:39 1: UPD www/ftui/icons/steam.svg
2021.01.05 20:59:39 1: UPD www/ftui/icons/step-backward.svg
2021.01.05 20:59:40 1: UPD www/ftui/icons/step-forward.svg
2021.01.05 20:59:40 1: UPD www/ftui/icons/stethoscope.svg
2021.01.05 20:59:40 1: UPD www/ftui/icons/sticky-note-o.svg
2021.01.05 20:59:40 1: UPD www/ftui/icons/sticky-note.svg
2021.01.05 20:59:40 1: UPD www/ftui/icons/stop-circle-o.svg
2021.01.05 20:59:41 1: UPD www/ftui/icons/stop-circle.svg
2021.01.05 20:59:41 1: UPD www/ftui/icons/stop.svg
2021.01.05 20:59:41 1: UPD www/ftui/icons/street-view.svg
2021.01.05 20:59:41 1: UPD www/ftui/icons/stumbleupon-circle.svg
2021.01.05 20:59:41 1: UPD www/ftui/icons/style.css
2021.01.05 20:59:42 1: UPD www/ftui/icons/subway1.svg
2021.01.05 20:59:42 1: UPD www/ftui/icons/suitcase.svg
2021.01.05 20:59:42 1: UPD www/ftui/icons/sun-o.svg
2021.01.05 20:59:42 1: UPD www/ftui/icons/sun.svg
2021.01.05 20:59:42 1: UPD www/ftui/icons/sun1.svg
2021.01.05 20:59:42 1: UPD www/ftui/icons/sun2.svg
2021.01.05 20:59:43 1: UPD www/ftui/icons/sunny-fog.svg
2021.01.05 20:59:43 1: UPD www/ftui/icons/sunny-lightning.svg
2021.01.05 20:59:43 1: UPD www/ftui/icons/sunny-rain-mix.svg
2021.01.05 20:59:43 1: UPD www/ftui/icons/sunny-rain-wind.svg
2021.01.05 20:59:43 1: UPD www/ftui/icons/sunny-rain.svg
2021.01.05 20:59:44 1: UPD www/ftui/icons/sunny-showers.svg
2021.01.05 20:59:44 1: UPD www/ftui/icons/sunny-sleet-storm.svg
2021.01.05 20:59:44 1: UPD www/ftui/icons/sunny-snow-thunderstorm.svg
2021.01.05 20:59:44 1: UPD www/ftui/icons/sunny-thunderstorm.svg
2021.01.05 20:59:44 1: UPD www/ftui/icons/sunrise.svg
2021.01.05 20:59:45 1: UPD www/ftui/icons/table.svg
2021.01.05 20:59:45 1: UPD www/ftui/icons/tablet1.svg
2021.01.05 20:59:45 1: UPD www/ftui/icons/tag1.svg
2021.01.05 20:59:45 1: UPD www/ftui/icons/tags.svg
2021.01.05 20:59:45 1: UPD www/ftui/icons/tasks.svg
2021.01.05 20:59:45 1: UPD www/ftui/icons/television.svg
2021.01.05 20:59:46 1: UPD www/ftui/icons/terminal.svg
2021.01.05 20:59:46 1: UPD www/ftui/icons/th-large.svg
2021.01.05 20:59:46 1: UPD www/ftui/icons/th-list.svg
2021.01.05 20:59:46 1: UPD www/ftui/icons/th.svg
2021.01.05 20:59:46 1: UPD www/ftui/icons/thermometer-0.svg
2021.01.05 20:59:47 1: UPD www/ftui/icons/thermometer-1.svg
2021.01.05 20:59:47 1: UPD www/ftui/icons/thermometer-2.svg
2021.01.05 20:59:47 1: UPD www/ftui/icons/thermometer-3.svg
2021.01.05 20:59:47 1: UPD www/ftui/icons/thermometer.svg
2021.01.05 20:59:48 1: UPD www/ftui/icons/thermometer1.svg
2021.01.05 20:59:48 1: UPD www/ftui/icons/thumb-tack.svg
2021.01.05 20:59:48 1: UPD www/ftui/icons/thumbs-down.svg
2021.01.05 20:59:48 1: UPD www/ftui/icons/thumbs-o-down.svg
2021.01.05 20:59:49 1: UPD www/ftui/icons/thumbs-o-up.svg
2021.01.05 20:59:49 1: UPD www/ftui/icons/thumbs-up.svg
2021.01.05 20:59:49 1: UPD www/ftui/icons/ticket.svg
2021.01.05 20:59:49 1: UPD www/ftui/icons/times-circle-o.svg
2021.01.05 20:59:49 1: UPD www/ftui/icons/times-circle.svg
2021.01.05 20:59:49 1: UPD www/ftui/icons/times-rectangle-o.svg
2021.01.05 20:59:50 1: UPD www/ftui/icons/times-rectangle.svg
2021.01.05 20:59:50 1: UPD www/ftui/icons/tint.svg
2021.01.05 20:59:50 1: UPD www/ftui/icons/toggle-off.svg
2021.01.05 20:59:50 1: UPD www/ftui/icons/toggle-on.svg
2021.01.05 20:59:50 1: UPD www/ftui/icons/train1.svg
2021.01.05 20:59:51 1: UPD www/ftui/icons/transgender-alt.svg
2021.01.05 20:59:51 1: UPD www/ftui/icons/trash-o.svg
2021.01.05 20:59:51 1: UPD www/ftui/icons/trash.svg
2021.01.05 20:59:51 1: UPD www/ftui/icons/tree.svg
2021.01.05 20:59:52 1: UPD www/ftui/icons/trello.svg
2021.01.05 20:59:52 1: UPD www/ftui/icons/trophy.svg
2021.01.05 20:59:52 1: UPD www/ftui/icons/truck.svg
2021.01.05 20:59:52 1: UPD www/ftui/icons/tty.svg
2021.01.05 20:59:52 1: UPD www/ftui/icons/umbrella.svg
2021.01.05 20:59:52 1: UPD www/ftui/icons/universal-access.svg
2021.01.05 20:59:53 1: UPD www/ftui/icons/unlock-alt.svg
2021.01.05 20:59:53 1: UPD www/ftui/icons/unlock.svg
2021.01.05 20:59:53 1: UPD www/ftui/icons/upload.svg
2021.01.05 20:59:53 1: UPD www/ftui/icons/usb1.svg
2021.01.05 20:59:54 1: UPD www/ftui/icons/user-circle-o.svg
2021.01.05 20:59:54 1: UPD www/ftui/icons/user-circle.svg
2021.01.05 20:59:54 1: UPD www/ftui/icons/user-md.svg
2021.01.05 20:59:54 1: UPD www/ftui/icons/user-o.svg
2021.01.05 20:59:54 1: UPD www/ftui/icons/user-plus.svg
2021.01.05 20:59:55 1: UPD www/ftui/icons/user-secret.svg
2021.01.05 20:59:55 1: UPD www/ftui/icons/user-times.svg
2021.01.05 20:59:55 1: UPD www/ftui/icons/user.svg
2021.01.05 20:59:55 1: UPD www/ftui/icons/venus-double.svg
2021.01.05 20:59:55 1: UPD www/ftui/icons/venus-mars.svg
2021.01.05 20:59:55 1: UPD www/ftui/icons/venus.svg
2021.01.05 20:59:56 1: UPD www/ftui/icons/video-camera.svg
2021.01.05 20:59:56 1: UPD www/ftui/icons/volume-control-phone.svg
2021.01.05 20:59:56 1: UPD www/ftui/icons/volume-down.svg
2021.01.05 20:59:56 1: UPD www/ftui/icons/volume-off.svg
2021.01.05 20:59:56 1: UPD www/ftui/icons/volume-up.svg
2021.01.05 20:59:57 1: UPD www/ftui/icons/weather-partly-lightning.svg
2021.01.05 20:59:57 1: UPD www/ftui/icons/weather.svg
2021.01.05 20:59:57 1: UPD www/ftui/icons/weather1.svg
2021.01.05 20:59:57 1: UPD www/ftui/icons/weather2.svg
2021.01.05 20:59:57 1: UPD www/ftui/icons/weather3.svg
2021.01.05 20:59:58 1: UPD www/ftui/icons/weather4.svg
2021.01.05 20:59:58 1: UPD www/ftui/icons/whatsapp.svg
2021.01.05 20:59:58 1: UPD www/ftui/icons/wheelchair-alt.svg
2021.01.05 20:59:58 1: UPD www/ftui/icons/wheelchair.svg
2021.01.05 20:59:58 1: UPD www/ftui/icons/wifi1.svg
2021.01.05 20:59:58 1: UPD www/ftui/icons/wikipedia-w.svg
2021.01.05 20:59:59 1: UPD www/ftui/icons/wind.svg
2021.01.05 20:59:59 1: UPD www/ftui/icons/window-closed-variant.svg
2021.01.05 20:59:59 1: UPD www/ftui/icons/window-closed.svg
2021.01.05 20:59:59 1: UPD www/ftui/icons/window-closed1.svg
2021.01.05 20:59:59 1: UPD www/ftui/icons/window-maximize.svg
2021.01.05 21:00:00 1: UPD www/ftui/icons/window-minimize.svg
2021.01.05 21:00:00 1: UPD www/ftui/icons/window-open-variant.svg
2021.01.05 21:00:00 1: UPD www/ftui/icons/window-open.svg
2021.01.05 21:00:00 1: UPD www/ftui/icons/window-open1.svg
2021.01.05 21:00:00 1: UPD www/ftui/icons/window-restore.svg
2021.01.05 21:00:01 1: UPD www/ftui/icons/window-shutter-alert.svg
2021.01.05 21:00:01 1: UPD www/ftui/icons/window-shutter-open.svg
2021.01.05 21:00:01 1: UPD www/ftui/icons/window-shutter.svg
2021.01.05 21:00:02 1: UPD www/ftui/icons/window.svg
2021.01.05 21:00:02 1: UPD www/ftui/icons/windows.svg
2021.01.05 21:00:02 1: UPD www/ftui/icons/windy.svg
2021.01.05 21:00:02 1: UPD www/ftui/icons/windy1.svg
2021.01.05 21:00:03 1: UPD www/ftui/icons/windy2.svg
2021.01.05 21:00:03 1: UPD www/ftui/icons/windy3.svg
2021.01.05 21:00:03 1: UPD www/ftui/icons/windy4.svg
2021.01.05 21:00:03 1: UPD www/ftui/icons/wpforms.svg
2021.01.05 21:00:04 1: UPD www/ftui/icons/wrench.svg
2021.01.05 21:00:04 1: UPD www/ftui/icons/youtube-play.svg
2021.01.05 21:00:04 1: CRE www/ftui/index.html
2021.01.05 21:00:04 1: UPD www/ftui/modules/chart.js/chart.js
2021.01.05 21:00:04 1: UPD www/ftui/modules/chart.js/chart.min.js
2021.01.05 21:00:05 1: UPD www/ftui/modules/chart.js/chartjs-adapter-date-fns.bundle.min.js
2021.01.05 21:00:05 1: UPD www/ftui/modules/circle-menu/circle-menu.js
2021.01.05 21:00:05 1: UPD www/ftui/modules/circle-menu/circle-menu.min.js
2021.01.05 21:00:05 1: UPD www/ftui/modules/ftui/fhem.service.js
2021.01.05 21:00:06 1: UPD www/ftui/modules/ftui/ftui.app.js
2021.01.05 21:00:06 1: UPD www/ftui/modules/ftui/ftui.binding.js
2021.01.05 21:00:06 1: UPD www/ftui/modules/ftui/ftui.helper.js
2021.01.05 21:00:06 1: UPD www/ftui/modules/ftui/ftui.subject.js
2021.01.05 21:00:07 1: UPD www/ftui/modules/hocon/hocon.js
2021.01.05 21:00:07 1: UPD www/ftui/modules/hocon/hocon.min.js
2021.01.05 21:00:07 1: UPD www/ftui/modules/iro.js/iro.js
2021.01.05 21:00:07 1: UPD www/ftui/modules/iro.js/iro.min.js
2021.01.05 21:00:07 1: UPD www/ftui/modules/rangeable/rangeable.js
2021.01.05 21:00:08 1: UPD www/ftui/modules/rangeable/rangeable.min.css
2021.01.05 21:00:08 1: UPD www/ftui/modules/rangeable/rangeable.min.js
2021.01.05 21:00:08 1: UPD www/ftui/modules/vanilla-notify/vanilla-notify.css
2021.01.05 21:00:08 1: UPD www/ftui/modules/vanilla-notify/vanilla-notify.js
2021.01.05 21:00:08 1: UPD www/ftui/modules/vanilla-notify/vanilla-notify.min.js
2021.01.05 21:00:09 1: UPD www/ftui/themes/bright-theme.css
2021.01.05 21:00:09 1: UPD www/ftui/themes/color-attributes.css
2021.01.05 21:00:09 1: UPD www/ftui/themes/ftui-theme.css
2021.01.05 21:00:09 1: saving fhem.cfg
2021.01.05 21:00:09 1: saving ./log/fhem.save
2021.01.05 21:00:09 1:
2021.01.05 21:00:09 1: New entries in the CHANGED file:
2021.01.05 21:00:09 1: 2021-01-01 FTUI version 3 - work in progress
2021.01.05 21:00:09 1:
2021.01.05 21:00:09 1: update finished, "shutdown restart" is needed to activate the changes.
Grüße
LuGu
Hallo Leute, da jetzt aktuell wieder die Wetterwarnungen rein kommen, ich habe das alte Wettericon mf1-cloud-alert ja bisher nur in der ehemalige demo.html drin.
Gibt es dieses irgendwo einzeln, oder hat das jemand von euch.?
Ich habe zwar ein wetter-warning.svg aber das gefällt mir nicht so richtig
Wer Icons sucht
https://forum.fhem.de/index.php/topic,117254.msg1117538.html#msg1117538 (https://forum.fhem.de/index.php/topic,117254.msg1117538.html#msg1117538)
Gruß
Eisix
oder hier...
https://www.onlinewebfonts.com/icon/426272
Wie kann ich, analog zu FTUI2.x, font-icons wie font-awesome einbinden? Via
<ftui-icon class="fas fa-blah"></ftui-icon>
geht es nicht (ja, fa.css ist in der index.html eingebunden), einen path kann ich nicht angeben, einen Namen ebenso wenig (es gibt ja nicht das icon-spezifische svg). Mir fehlen einige Icons, wie zum Beispiel sunset, laundry usw. (die Frage gilt dann auch später für die weather-icons und matrial-icons wenn diese nicht als einzelne svg vorliegen)
Und wie kann ich mit <ftui-clock> denn sowas ausgeben: "Mittwoch, 6. Januar 2021"? Mit
<ftui-clock format="eeee, DD.MM.YYYY" class="size-3"></ftui-clock>
bekomm ich "Mittwoch, 06.01.2021" - FTUI2.x hatte als format "eeee, j. F Y" welches hier aber nicht funktioniert.
OK, ich habe erst mal eines gefunden, ist nicht das aus der 2er Version aber geht soweit...
Ganz andere Frage, da wir heute Mülltag haben, weiß ich nicht warum er bei "0" Tagen kein "badge" anzeigt, obwohl alle bei "0" stehen.
Habe ich etwas übersehen.?
Die anderen Tage, also bis 2 Tagen lasse ich mir in meinem Icon auf der Übersichtseite anzeigen und das hat funktioniert, aber ab heute sollte er "rot" anzeigen macht er aber nicht... Code Blindheit..?
<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>
<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>
@yersinia
<div class="fixed-bottom">
<ftui-clock format="eeee" class="small text-center"></ftui-clock>
<ftui-clock format="DD.MM.YYYY" class="small text-center"></ftui-clock>
<ftui-clock format="hh:mm" class="text-center"></ftui-clock>
</div>
Gruß
Eisix
Zitat von: yersinia am 06 Januar 2021, 11:30:05
Wie kann ich, analog zu FTUI2.x, font-icons wie font-awesome einbinden? Via
<ftui-icon class="fas fa-blah"></ftui-icon>
geht es nicht (ja, fa.css ist in der index.html eingebunden), einen path kann ich nicht angeben, einen Namen ebenso wenig (es gibt ja nicht das icon-spezifische svg). Mir fehlen einige Icons, wie zum Beispiel sunset, laundry usw. (die Frage gilt dann auch später für die weather-icons und matrial-icons wenn diese nicht als einzelne svg vorliegen)
Meines Erachtens sollte das Ziel bei FTUI3 die Ladezeiten zu verringern, insofern wäre es kontraproduktiv ganze Icon-Fonts zu laden.
Du kannst Dir doch deine bevorzugten SVG Icons einfach herunterladen und in ./icons reinkopieren und dann nutzen.
Dann werden für deine Seiten auch nur die Icons geladen bzw. gezogen die benötigt werden.
Grüße
Olli
Zitat von: moonsorrox am 06 Januar 2021, 12:04:08
OK, ich habe erst mal eines gefunden, ist nicht das aus der 2er Version aber geht soweit...
Ganz andere Frage, da wir heute Mülltag haben, weiß ich nicht warum er bei "0" Tagen kein "badge" anzeigt, obwohl alle bei "0" stehen.
Habe ich etwas übersehen.?
Die anderen Tage, also bis 2 Tagen lasse ich mir in meinem Icon auf der Übersichtseite anzeigen und das hat funktioniert, aber ab heute sollte er "rot" anzeigen macht er aber nicht... Code Blindheit..?
<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>
<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>
Dein Code ist irgendwie sehr seltsam.
Hier mein Code (solltest du im übrigen schon haben) am Beispiel der Restmülltonne:
<ftui-icon [name]="System_Abfall:urSchwarz | map('0:_abfalltonne_auf, 1:_abfalltonne_zu')" color="_grau1"
[class-name]="System_Abfall:urSchwarz | map('0:spin, 1:hop, 2:')"></ftui-icon>
<ftui-badge [color]="System_Abfall:urSchwarz | map('1=_rot1, 2=_orange1, 3=gray')"
[text]="System_Abfall:urSchwarz"
[hidden]="System_Abfall:urSchwarz | map('0:true, 1:false')">
</ftui-badge>
<ftui-badge [color]="System_Abfall:urSchwarz | map('0=_rot1')"
[text]="System_Abfall:urSchwarz | map('0:!')"
[hidden]="System_Abfall:urSchwarz | map(' 0:false, 1:true')">
</ftui-badge>
Erst das Icon, dann Badge (ist bei mir zweimal, da ich bei 0 Tage (also Leerungstag) ein Ausrufezeichen haben wollte.
Grüße
Olli
Zitat von: Eisix am 06 Januar 2021, 12:10:28
@yersinia
<div class="fixed-bottom">
<ftui-clock format="eeee" class="small text-center"></ftui-clock>
<ftui-clock format="DD.MM.YYYY" class="small text-center"></ftui-clock>
<ftui-clock format="hh:mm" class="text-center"></ftui-clock>
</div>
Ergibt doch das gleiche!? Derzeit habe ich
<ftui-clock format="eeee, DD.MM.YYYY" class="size-3"></ftui-clock>was
ZitatMittwoch, 06.01.2021
ergibt. Ich hätte den Monat aber gern als Text:
ZitatMittwoch, 6. Januar 2021
Mit FTUI2.x war das durch
data-format="eeee, j. F Y"möglich.
Zitat von: octek0815 am 06 Januar 2021, 12:16:24Meines Erachtens sollte das Ziel bei FTUI3 die Ladezeiten zu verringern, insofern wäre es kontraproduktiv ganze Icon-Fonts zu laden.
Verstehe ich. Macht es, was die Ladezeiten angeht, wirklich _den_ Unterschied, wenn ich zB font-awesome icon fonts nachlade? (Ich weiss gar nicht, ob ich immer das gesamte font-set lade oder nur jene Icons via der css aus der svg, welche ich tatsächlich benötige) Ja, als Anwender muss ich das fa icon set integrieren.
Zitat von: octek0815 am 06 Januar 2021, 12:16:24Du kannst Dir doch deine bevorzugten SVG Icons einfach herunterladen und in ./icons reinkopieren und dann nutzen.
Dann werden für deine Seiten auch nur die Icons geladen bzw. gezogen die benötigt werden.
Ist das aus Endanwender-Sicht denn sinnvoll,
jedes icon als svg aus dem Netz zu laden? Ich kann mir vorstellen, dass das für den ein oder Anderen schon eine immense Hürde ist - das richtige Icon zu finden und zu integrieren.
Wo bekomm' ich zB ein Waschmaschinen icon her?
Wie sieht es mit Widgets in Zukunft bei FTUI3 aus? Wie gibt der 'Entwickler' denn 'seine' Icons mit? Ich denke an das UWZ oder DWDwarn Widget, welche auch wi icons verwenden....
Zitat von: yersinia am 06 Januar 2021, 12:26:22
Verstehe ich. Macht es, was die Ladezeiten angeht, wirklich _den_ Unterschied, wenn ich zB font-awesome icon fonts nachlade? (Ich weiss gar nicht, ob ich immer das gesamte font-set lade oder nur jene Icons via der css aus der svg, welche ich tatsächlich benötige) Ja, als Anwender muss ich das fa icon set integrieren.
Ist das aus Endanwender-Sicht denn sinnvoll, jedes icon als svg aus dem Netz zu laden? Ich kann mir vorstellen, dass das für den ein oder Anderen schon eine immense Hürde ist - das richtige Icon zu finden und zu integrieren.
Wo bekomm' ich zB ein Waschmaschinen icon her?
Am Ende des Tages kann ja jeder machen was er möchte. Es bleibt aber das Ziel kurze Ladezeiten zu haben.
Dies wurde ja beim alten Tablet-UI vielfach bemängelt, insofern ist der Ansatz bei FTUI3 von setstate genau der richtige weg.
Dieses System ist ja kein Fertigsystem sondern ein super Baukasten für Leute die gern "customisen".
Wer die nötigen Kenntnisse nicht hat muss halt zu FUIP oder so greifen.
Man wird es nicht jedem Recht machen können.
Und ich denke wer die HTML "Sachen" zusammen schreiben kann, wird auch in der Lage sein Icons aus dem Netz zu ziehen und in einen Ordner zu kopieren.
Icons gibt es wie "Sand am Meer" im Netz, einfach die "Suchseite deines Vertrauens" konsultieren
VG
Olli
Zitat von: yersinia am 06 Januar 2021, 11:30:05
Und wie kann ich mit <ftui-clock> denn sowas ausgeben: "Mittwoch, 6. Januar 2021"? Mit
<ftui-clock format="eeee, DD.MM.YYYY" class="size-3"></ftui-clock>
bekomm ich "Mittwoch, 06.01.2021" - FTUI2.x hatte als format "eeee, j. F Y" welches hier aber nicht funktioniert.
Habe ich jetzt hinzugefügt
<ftui-clock format="eeee, DD.MMMM YYYY" class="size-5"></ftui-clock>
Wichtige Icons füge ich auch gerne noch hinzu
Ok, verstehe ich. Wenn man fa will geht es zB so auf der console für Version 5.15.1:
cd /tmp
wget https://use.fontawesome.com/releases/v5.15.1/fontawesome-free-5.15.1-web.zip
unzip fontawesome-free-5.15.1-web.zip
sudo mv /tmp/fontawesome-free-5.15.1-web/svgs /opt/fhem/www/ftui/fa-svg
sudo chown fhem:dialout /opt/fhem/www/ftui/fa-svg
sudo chown fhem:dialout /opt/fhem/www/ftui/fa-svg/*
Die fa-svg icons liegen nun im ftui Verzeichnis unter fa-svg, welche sich dann nochmal in brands, regular und solid (https://fontawesome.com/icons?d=gallery&s=brands,regular,solid&m=free) unterteilen.
optional (löscht das runtergeladene Archiv sowie den Ordner, Benutzung auf eigene Gefahr):
cd /tmp
rm fontawesome-free-5.15.1-web.zip
rm -r fontawesome-free-5.15.1-web
@setstate: thx, schau ich mir an.
SVGs für weather icons (http://erikflowers.github.io/weather-icons/):
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):
cd /tmp
rm master.zip
rm -r weather-icons-master/
EDIT:
material icons von Christoph Morrison (https://forum.fhem.de/index.php?action=profile;u=17701) bereitgestellte icons (https://forum.fhem.de/index.php/topic,117254.0.html) können, wenn man sie nicht wie im Thread (https://forum.fhem.de/index.php/topic,117254.0.html) beschrieben in FHEM via update integrieren möchte, auch -wie oben beschrieben- via wget direkt von github laden:
FHEM-Icons-Material-Templarian (https://github.com/fhem/FHEM-Icons-Material-Templarian/archive/master.zip)
FHEM-Icons-Material-Google (https://github.com/fhem/FHEM-Icons-Material-Google/archive/master.zip) (Dateigröße: 333MB !!!)
Zitat von: yersinia am 06 Januar 2021, 13:24:32
SVGs für weather icons (http://erikflowers.github.io/weather-icons/):
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):
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
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
map('0:false, 1:false, 2:false')"stehen... ;)
siehe auch hier der gesamte badge Code
<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..
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
map('0:false, 1:false, 2:false')"
stehen... ;)
siehe auch hier der gesamte badge Code
<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...
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
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...
[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?
"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
<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
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"
[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.?
<ftui-badge color="danger" [text]="myAbfall:next_tage">
warum zeigt er denn keine "0" an :-\ im Reading steht doch eine "0" :-\
0 ist nix und wird nicht als Badge angezeigt. Ist so Standard - im iOS und macOS zumindest
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... ;) :D
dann kann ich in dem Fall nur einen alternativen Text eingeben...!
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.
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... :D
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
Wird es eigentlich sowas wie eine swiper Funktion wieder geben?
Oder gibt es diese schon?
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.
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..?
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"
[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.?
<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.
[text]="System_Abfall:urSchwarz | map('0:!')"
Grüße
Olli
Zitat von: octek0815 am 06 Januar 2021, 16:48:26
Jetzt verstehe ich erst was du meintest. Sorry für die lange Leitung.
Deshalb habe ich die Null in ein Ausrufezeichen umgemappt.
Grüße
Olli
weißt du Olli man hat sich praktisch an etwas gewöhnt und denkt das ist jetzt immer so... und ich sehe auf meinem kleinem Tablet neben mir ständig die Null und verzweifel weil ich es nicht hinbekomme.
Trotz alledem hatte ich etwas im Code was es nicht gebraucht hat, ging auch ohne nicht... ;)
Aber du mußt dir keine Gedanken machen, hast alles richtig gemacht und mich in meinem Tran hier wachgerüttelt :D dadurch habe ich etwas besseres gefunden und lasse Text anzeigen.... ;)
Es hat auch Vorteile... wenn was nicht so funktioniert, da tüftelt man :D
Zitat von: moonsorrox am 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..?
Nicht so richtig. Muss ich mir mal anschauen
ist jetzt nicht so wichtig... habe erst mal Text dran ;) :D
@setstate
Ich hatte da auch noch ein Anliegen bzgl. der weather.map.js
Diese wird ja von dir gepflegt und beim update überschrieben.
Nun gibt es ja in FHEM außer ProPlanta auch noch weitere Wetter Module wie z.B. DarkSky oder OpenWeatherMap.
Diese liefern auch leicht abweichende Wetterzustände. Z.B. "Nieselregen" oder "Nieselregen möglich" oder "Sprührehen" für den selben Zustand.
Nun habe meine weather.map.js um diese zusätzlichen Zustände erweitert.
Des Weiteren nutzte ich für Tag und Nacht unterschiedliche Icons (animierte).
Ich schalte den Zustand über ein DOIF in FHEM und in FTUI über ein [hidden] im column.
Hier meine Erweiterung:
animate_day: {
'Regen': './icons/weather/animate/partly-cloudy-day-rain.svg',
'stark bewölkt': './icons/weather/animate/cloudy.svg',
'Regenschauer': './icons/weather/animate/partly-cloudy-day-rain.svg',
'wolkig': './icons/weather/animate/partly-cloudy-day.svg',
'bedeckt': './icons/weather/animate/cloudy.svg',
'heiter': './icons/weather/animate/partly-cloudy-day.svg',
'sonnig': './icons/weather/animate/clear-day.svg',
'Sonnig': './icons/weather/animate/clear-day.svg',
'Sprühregen': './icons/weather/animate/drizzle.svg',
'Schneeregen': './icons/weather/animate/partly-cloudy-day-snow.svg',
'unterschiedlich bewölkt, vereinzelt Schauer und Gewitter': './icons/weather/animate/sunny-sleet-storm.svg',
'Schneefall': './icons/weather/animate/partly-cloudy-day-snow.svg',
'Schneeschauer': './icons/weather/animate/partly-cloudy-day-snow.svg',
'Gewitter': './icons/weather/animate/thunderstorms.svg',
'Nebel': './icons/weather/animate/mist.svg',
'Leichter Schneefall möglich': './icons/weather/animate/partly-cloudy-day-snow.svg',
'Leichter Regen möglich': './icons/weather/animate/partly-cloudy-day-rain.svg',
'Nieselregen möglich': './icons/weather/animate/partly-cloudy-day-drizzle.svg',
'Stark bewölkt': './icons/weather/animate/cloudy.svg',
'Leicht bewölkt': './icons/weather/animate/partly-cloudy-day.svg',
'Überwiegend bewölkt': './icons/weather/animate/partly-cloudy-day.svg'
},
animate_night: {
'Regen': './icons/weather/animate/partly-cloudy-night-rain.svg',
'stark bewölkt': './icons/weather/animate/cloudy.svg',
'Regenschauer': './icons/weather/animate/partly-cloudy-night-rain.svg',
'wolkig': './icons/weather/animate/partly-cloudy-night.svg',
'bedeckt': './icons/weather/animate/cloudy.svg',
'heiter': './icons/weather/animate/partly-cloudy-night.svg',
'klar': './icons/weather/animate/clear-night.svg',
'Klar': './icons/weather/animate/clear-night.svg',
'Sprühregen': './icons/weather/animate/drizzle.svg',
'Schneeregen': './icons/weather/animate/partly-cloudy-night-snow.svg',
'unterschiedlich bewölkt, vereinzelt Schauer und Gewitter': './icons/weather/animate/sunny-sleet-storm.svg',
'Schneefall': './icons/weather/animate/partly-cloudy-night-snow.svg',
'Schneeschauer': './icons/weather/animate/partly-cloudy-night-snow.svg',
'Gewitter': './icons/weather/animate/thunderstorms.svg',
'Nebel': './icons/weather/animate/mist.svg',
'Leichter Schneefall möglich': './icons/weather/animate/partly-cloudy-night-snow.svg',
'Leichter Regen möglich': './icons/weather/animate/partly-cloudy-night-rain.svg',
'Nieselregen möglich': './icons/weather/animate/partly-cloudy-night-drizzle.svg',
'Stark bewölkt': './icons/weather/animate/cloudy.svg',
'Leicht bewölkt': './icons/weather/animate/partly-cloudy-night.svg',
'Überwiegend bewölkt': './icons/weather/animate/partly-cloudy-night.svg'
Nun ist das lästig das die Datei bei jedem Update überschrieben wird.
Wäre es möglich hierfür eine Updateresistente Lösung zu schaffen?
VG
Olli
Zitat von: octek0815 am 06 Januar 2021, 17:33:07
@setstate
Ich hatte da auch noch ein Anliegen bzgl. der weather.map.js
Diese wird ja von dir gepflegt und beim update überschrieben.
Nun gibt es ja in FHEM außer ProPlanta auch noch weitere Wetter Module wie z.B. DarkSky oder OpenWeatherMap.
Diese liefern auch leicht abweichende Wetterzustände. Z.B. "Nieselregen" oder "Nieselregen möglich" oder "Sprührehen" für den selben Zustand.
Nun habe meine weather.map.js um diese zusätzlichen Zustände erweitert.
Des Weiteren nutzte ich für Tag und Nacht unterschiedliche Icons (animierte).
Ich schalte den Zustand über ein DOIF in FHEM und in FTUI über ein [hidden] im column.
Hier meine Erweiterung:
...
Nun ist das lästig das die Datei bei jedem Update überschrieben wird.
Wäre es möglich hierfür eine Updateresistente Lösung zu schaffen?
VG
Olli
Ich würde das in das Map File einbauen. Damit die Matrix aber nicht zu groß wird, habe ich einen Zwischenwert eingeführt.
Provider-Condition -> Weather-Condition -> IconDamit braucht man bei einem neuem Provider nur noch ein
Provider-Condition -> Weather-Condition hinzufügen.
Und bei einem neuen IconSet ein
Weather-Condition -> IconKönntest du dein Map daraufhin umstellen, dann übernehme ich das?
Zitat von: setstate am 06 Januar 2021, 16:55:56Zitat von: moonsorrox am 06 Januar 2021, 16:45:26Da 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..?
Nicht so richtig. Muss ich mir mal anschauen
Klappt bei mir auch nur wenn das Attribut
text gefüllt ist - auch wenn es nur ein (Leerzeichen) ist.
Zitat von: yersinia am 07 Januar 2021, 09:57:38
Nicht so richtig. Muss ich mir mal anschauen
Klappt bei mir auch nur wenn das Attribut text gefüllt ist - auch wenn es nur ein (Leerzeichen) ist.
jou, man muß es nur wissen, aber wir sind ja noch in einer frühen Phase der Vers. 3. da wir mir das neu... manchmal denke ich bin ich zu blöd... und dann wieder gefällt es mir sehr gut.
Ich finde das mit dem Text darin gar nicht so schlecht, auf die Idee hat mich Olli gebracht und finde ich besser als ein Icon im Badge
Zitat von: moonsorrox am 07 Januar 2021, 11:47:36jou, man muß es nur wissen, aber wir sind ja noch in einer frühen Phase der Vers. 3. da wir mir das neu... manchmal denke ich bin ich zu blöd... und dann wieder gefällt es mir sehr gut.
Bin ich bei dir. Man darf halt nicht vergessen, dass FTUI3 'noch' Alpha-Status hat - vieles ist neu (und vor allem ganz anders zu FTUI v2.x), die Doku ist noch spärlich, die Beispiele funktionieren nicht alle adhoc oder sind immer selbsterklärend. Trotz alledem funktioniert das insgesamt imho schon sehr gut und ist -gefühlt- wesentlich einfacher zu handeln als FTUI v2.x. Von dem Performanceschub ganz zu schweigen. Danke @setstate. :)
Aber mal was anderes: lohnt es sich, eigene Threads ([FTUI3 label], [FTUI3 badge] usw) aufzumachen und nur Ideen/Issues/Weiterentwicklungen _hier_ zu diskutieren?
der Vorschlag kam schon einmal und ich hatte "ja" dazu gesagt.
Evtl macht setstate das in einer späteren Phase, da kann man das besser sehen und irgendwann sollte er ein Thread aufmachen in dem nur er schreiben kann, wenn es neue fertige Dinge gibt.
Denke das ist dann wohl übersichtlicher....
Ich ertappe mchi auch dabei das ich die über 30 Seiten laufend durch suche weil ich wieder was vergessen habe... ;)
So auch jetzt---- :-\ :-\
Ich bin mit dem "badge" immer noch nicht im reinen, da heute nun der Mülltag vorbei ist steht wieder etwas drin was falsch ist :-\ ich bin gerade am Fehler suchen. ;)
Zitat von: yersinia am 07 Januar 2021, 12:08:45
Aber mal was anderes: lohnt es sich, eigene Threads ([FTUI3 label], [FTUI3 badge] usw) aufzumachen und nur Ideen/Issues/Weiterentwicklungen _hier_ zu diskutieren?
Unbedingt! So lange sich keiner bemüßigt fühlt einen Wiki-Eintrag nebst Untereinträgen anzulegen, sehe ich das als einzigen Weg um das "Durcheinander" hier im Thread etwas zu entzerren.
Die Infos wären zwar da, aber man findet sie nicht ohne Weiteres...
Wiki in dieser frühen Phase denke ich lohnt noch nicht... da für gibt es noch zuwenig, da ist gerade github am besten... denke ich ;)
Ok, ist vielleicht wirklich noch etwas früh für das Wiki...
Aber ich denke, es wäre wirklich von Vorteil gleich jetzt am Anfang entsprechende Threads zu den einzelnen Widgets zu eröffnen. Dadurch konnte vielleicht in Zukunft vermieden werden, dass unzählige Threads zum eigentlich gleichen Widget eröffnet werden.
Klar, ein einziger "Label-Thread" wird irgendwann auch unübersichtlich, aber bis es soweit ist, sind hoffentlich die meisten Entwicklerfragen geklärt und man kann einen entsprechenden Wiki-Eintrag erstellen mit der geballten Information.
da ich momentan noch etwas auf Kriegsfuß mit dem "Badge" stehe hier mal meine Frage...
Beispiele dazu evtl. kann mir jemand helfen.. Problem ist der Restmüll der heute bei mir auf 13 Tage steht , alle anderen zeigen mir die 6 im badge.
Also ich sehe ja heute im Abfall bei Restmüll gerade nichts, heißt die Tonne ist ohne badge.
Ich habe verschiedene Versuche gestartet, aber ich habs nicht geschnallt. Nicht wundern ich habe es z.T. verschiedenen Texten probiert.
Ich fange mal an Papierabfall 6 im badge wid angezeigt mit folgendem Code:
<ftui-badge [text]="myAbfall:PapierAbfall_tage | map('PapierAbfall_0:Heute, PapierAbfall_1:false, PapierAbfall_.*:')"
[color]="myAbfall:PapierAbfall_tage | map('0=crimson, 1=darkviolet, 2=darkblue')"
[hidden]="myAbfall:PapierAbfall_tage | map('0:false, 1:false')" class="size-0">
</ftui-badge>
Gelber Sack wird angezeigt mit 6 im badge mit folgendem Code:
<ftui-badge [text]="myAbfall:GelberSackLeichtverpackungen_tage | map('GelberSackLeichtverpackungen_0:Heute, GelberSackLeichtverpackungen_.*:')"
[color]="myAbfall:GelberSackLeichtverpackungen_tage | map('0=crimson, 1=darkviolet, 2=darkblue')"
[hidden]="myAbfall:GelberSackLeichtverpackungen_tage | map('0:false, 1:false')" class="size-0">
</ftui-badge>
Grüngut im badge mit 6 wird angezeigt mit folgendem Code:
<ftui-badge [text]="myAbfall:BioabfallGruengut_tage | map('BioabfallGruengut_0:Heute, BioabfallGruengut_1:')"
[color]="myAbfall:BioabfallGruengut_tage | map('0=crimson, 1=darkviolet, 2=darkblue')"
[hidden]="myAbfall:BioabfallGruengut_tage | map('0:false, 1:false')" class="size-0">
</ftui-badge>
Jetzt der Problemfall Restmüll hier wird nichts angezeigt und hier der Code:
<ftui-badge [text]="myAbfall:Restmuell_tage | map('Restmuell_0:Heute, Restmuell_.*:Test')
[color]="myAbfall:Restmuell_tage | map('0=crimson, 1=darkviolet, 2=darkblue')"
[hidden]="myAbfall:Restmuell_tage | map('0:false, 1:false')" class="size-0">
</ftui-badge>
Nicht wundern wenn da was drin steht, ist nur zum testen.
die Abfall Sorten Papier, GelberSack und Grüngut werden mit 6 Tagen im badge angezeigt, obwohl auch hier der Code unterschiedlich ist.
Restmüll zeigt mir gar nichts - sollte aber 13 anzeigen..!!
Am Leerungstag also bei "0" soll bei allen "Heute" drin stehen das hat er gestern auch gemacht.
Wo liegt mein Fehler..? ich sehe es absolut nicht... :-\
Müsste das nicht eher so aussehen?
<ftui-badge [text]="myAbfall:PapierAbfall_tage | map('0:Heute, 1:Morgen, .*:Bald')"
[color]="myAbfall:PapierAbfall_tage | map('0:crimson, 1:darkviolet, 2:darkblue')"
[hidden]="myAbfall:PapierAbfall_tage | map('0:false, 1:false, .*:true')" class="size-0">
</ftui-badge>
Der Inhalt von PapierAbfall_tage ist doch nicht "PapierAbfall_0" oder? Zumal weiss ich nicht, ob die Farben crimson, darkviolet und darkblue existieren.
Zum sukzessive Testen würde ich das [hidden] erstmal weglassen, oder auf false setzen.
dto:
<ftui-badge [text]="myAbfall:GelberSackLeichtverpackungen_tage | map('0:Heute, 1:Morgen, .*:')"
[color]="myAbfall:GelberSackLeichtverpackungen_tage | map('0:crimson, 1:darkviolet, 2:darkblue')"
[hidden]="myAbfall:GelberSackLeichtverpackungen_tage | map('0:false, 1:false, .*:true')" class="size-0">
</ftui-badge>
<ftui-badge [text]="myAbfall:BioabfallGruengut_tage | map('0:Heute, 1:Morgen, .*:')"
[color]="myAbfall:BioabfallGruengut_tage | map('0:crimson, 1:darkviolet, 2:darkblue')"
[hidden]="myAbfall:BioabfallGruengut_tage | map('0:false, 1:false, .*:true')" class="size-0">
</ftui-badge>
<ftui-badge [text]="myAbfall:Restmuell_tage | map('0:Heute, 1:Morgen, .*: ')
[color]="myAbfall:Restmuell_tage | map('0:crimson, 1:darkviolet, 2:darkblue')"
[hidden]="myAbfall:Restmuell_tage | map('0:false, 1:false, .*:true')" class="size-0">
</ftui-badge>
Mir genügt eigtl nur ein Icon als badge wenn die Tage rankommen - und die Tonnen bekommen Farbe und blinken/drehen sich:
<header>Restmüll</header>
<ftui-icon path="fa-svg/regular" name="trash-alt"
[class-name]="Muelltonnen:Restmuell_days | map('0:size-6 blink, 2:size-6 spin, 3:size-6')"
[color]="Muelltonnen:Restmuell_days | map('0:green, 2:green, 3:light')">
</ftui-icon>
<ftui-badge color="clear" text="">
[hidden]="Muelltonnen:Restmuell_days | map('0:false, 1:false, .*:true')">
<ftui-icon name="exclamation-triangle" path="fa-svg/solid" color="warning">
</ftui-icon>
</ftui-badge>
<br />
<ftui-label [text]="Muelltonnen:Restmuell_date | toDate() | format('ee DD.MM.')" class="size-3">
</ftui-label>
Ich habe mal eine Frage zum "content" ausgelagert.
Ich probiere mal...
Die Farben nutze ich schon seit ewig, sind bei mir im css hinterlegt, sind alles Webfeste Farben die es auch gibt..
[hidden] ist überall auf false... mache ich sowieso immer erst mal
Noch zu den Restmuell_0 und Restmuell_1 das sind meine alten readings aus Version 2.x. evtl. ist es Zufall das es damit funktioniert und die sind gar nicht aktuell... :-\
Was mich jetzt wundert das es damit ja funktioniert, nur eben bei Restmüll nicht. Ich bekomme zwar den Text angezeigt , aber nicht die Zahl.
Ich glaube ich brauche ne Pause :-\
dazu müsstest du mal ein list vom Abfall-Device (list myAbfall) liefern.
Was ergibt denn:
<ftui-badge [text]="myAbfall:Restmuell_tage"
[color]="myAbfall:Restmuell_tage | map('0:crimson, 1:darkviolet, 2:darkblue')"
[hidden]="myAbfall:Restmuell_tage | map('0:false, 1:false, .*:true')" class="size-0">
</ftui-badge>
ohne map hatte ich schon, dass war das einzige mal das mir die richtige Zahl eingetragen wurde und ist jetzt auch noch so... mit deinem Code 13
Dann muss mein Fehler wohl in der map liegen.. :-\
hier das list
Internals:
DEF AbfallKalender
FUUID 5f9ff55d-f33f-a6c6-802d-8abd963bc2fb0d0c
FVERSION 57_ABFALL.pm:0.105810/2016-01-21
INTERVAL 43200
KALENDER AbfallKalender
NAME myAbfall
NR 5940
NTFY_ORDER 50-myAbfall
STATE Tage bis zur nächsten Leerung: 6
TYPE ABFALL
READINGS:
2021-01-07 15:44:30 BioabfallGruengut_datum 13.01.21
2021-01-07 15:44:30 BioabfallGruengut_tage 6
2021-01-07 15:44:30 BioabfallGruengut_text Bioabfall, Grüngut
2021-01-07 15:44:30 BioabfallGruengut_wochentag Mittwoch
2021-01-07 15:44:30 GelberSackLeichtverpackungen_datum 13.01.21
2021-01-07 15:44:30 GelberSackLeichtverpackungen_tage 6
2021-01-07 15:44:30 GelberSackLeichtverpackungen_text Gelber Sack, Leichtverpackungen
2021-01-07 15:44:30 GelberSackLeichtverpackungen_wochentag Mittwoch
2021-01-07 15:44:30 PapierAbfall_datum 13.01.21
2021-01-07 15:44:30 PapierAbfall_tage 6
2021-01-07 15:44:30 PapierAbfall_text Papier Abfall
2021-01-07 15:44:30 PapierAbfall_wochentag Mittwoch
2021-01-07 15:44:30 Restmuell_datum 20.01.21
2021-01-07 15:44:30 Restmuell_tage 13
2021-01-07 15:44:30 Restmuell_text Restmüll
2021-01-07 15:44:30 Restmuell_wochentag Mittwoch
2021-01-07 15:44:30 ftui_datum
2021-01-07 15:44:30 ftui_next PapierAbfall_6
2021-01-07 15:44:30 next PapierAbfall_6
2021-01-07 15:44:30 next_datum 13.01.21
2021-01-07 15:44:30 next_tage 6
2021-01-07 15:44:30 next_text Papier Abfall
2021-01-07 15:44:30 next_wochentag Mittwoch
2021-01-07 15:44:30 state 6
Attributes:
alias Müllabfuhr
icon recycling@blue
room HWR
sortby 01
stateFormat Tage bis zur nächsten Leerung: next_tage
userReadings ftui_datum {ReadingsVal("myAbfall","now_text","") eq "" ? datumHeuteMorgen(ReadingsVal("myAbfall","next_date","")) : "heute";},ftui_next {ReadingsVal("myAbfall","now_text","") eq "" ? ReadingsVal("myAbfall","next","") : ReadingsVal("myAbfall","now","")."_0";}
verbose 0
Zitat von: moonsorrox am 07 Januar 2021, 16:26:55ohne map hatte ich schon, dass war das einzige mal das mir die richtige Zahl eingetragen wurde und ist jetzt auch noch so... mit deinem Code 13
Was hast du eigtl mit dem badge vor? "zeige _immer_ die Resttage an" (dann ist der Code oben zu nehmen) oder willst du mit eher "zeige die Resttage bis auf 1bzw 2 tage vorher und ersetze durch den Wert x,y" (das weiss ich zZt gar nicht, ob das geht)?
<ftui-badge [text]="myAbfall:Restmuell_tage | map('0:Heute, 1:Morgen, .*:')
[color]="myAbfall:Restmuell_tage | map('0:crimson, 1:darkviolet, 2:darkblue')"
[hidden]="myAbfall:Restmuell_tage | map('0:false, 1:false, .*:true')" class="size-0">
</ftui-badge>Bei diesem map ist der letzte Fall leer, du würdest keine Resttage-Anzeige bekommen, imho.
Hallo,
bei badge ist mir noch was aufgefallen. Ich muss immer ein reload machen nach einem "Empty Cache and Hard Reload".
Ist das nur bei mir so oder generell?
Gruß
Eisix
ich glaube ich weiß wo der Fehler liegt...
Es muss am " Zeichen liegen, dass war bei mir an der falschen Stelle...
Es muss hier
[text]="myAbfall:Restmuell_tage [/color]| map('0:Heute, 1:Morgen, .*:')"
und nicht hier
[text]="myAbfall:Restmuell_tage" | map('0:Heute, 1:Morgen, .*:')
Du meinst den Cache vom Browser, den leere ich generell sofort nach einer Änderung.. weil auf dieses Ding bin ich zu oft rein gefallen
Zitat von: Eisix am 03 Januar 2021, 12:43:09
Hallo,
noch eine Frage. Bei chart wie kriege ich andere Linien-Typen hin, z.B.: steps.
Konnte kein Beispiel finden und attribut stepped war es auch nicht.
Jemand einen Tip für mich?
Gruß
Eisix
Nutz Ihr alle nur line?
Gruß
Eisix
wenn ich eine linie brauche die erstelle ich mir in css, meinst du das..?
falsch gelesen du meinst Chart... damit habe ich noch gar nichts gemacht
Zitat von: yersinia am 07 Januar 2021, 16:39:25
Was hast du eigtl mit dem badge vor? "zeige _immer_ die Resttage an" (dann ist der Code oben zu nehmen) oder willst du mit eher "zeige die Resttage bis auf 1bzw 2 tage vorher
ich möchte nur die Tage sehen und am letzten Tag soll er heute zeigen, mache ich das " z.B. falsch zeigt er immer "heute" an... das war mein Problem, oder eben gar nücht.
EDIT:// geht doch nicht so wie ich es gedacht hatte :-\ :-\
Zitat von: Eisix am 07 Januar 2021, 16:42:52
Nutz Ihr alle nur line?
Gruß
Eisix
Steps hätte ich auch gerne. Z.B. für meine Regenanzeige.
Hallo,
auch ich würde gerne mit der Version 3 anfangen, scheitere aber schon beim Einstieg.
Mein Test: ich rufe aus der mobile.html die tab.html auf.
Bei mir werden jedoch die Unterseiten der tab.html nicht angezeigt.
Was mache ich falsch ?
In der Version 2 geht das über die Einträge <div class="page" id="tab"></div>
Könnt ihr mir bitte helfen ?
LG Ralf
Hast Du Dir mal die Beispiel-index.html und den examples Ordner angesehen? Da steht eigentlich alles drin, was man wissen muss um ftui3 ans Fliegen zu bekommen.
Zitat von: RalfPit am 07 Januar 2021, 17:32:59
Mein Test: ich rufe aus der mobile.html die tab.html auf.
Wie sieht das aus?
Zitat von: grossmaggul am 07 Januar 2021, 17:35:57
Hast Du Dir mal die Beispiel-index.html und den examples Ordner angesehen? Da steht eigentlich alles drin, was man wissen muss um ftui3 ans Fliegen zu bekommen.
Genau das mache ich seit Tagen und bin begeistert.
Zu meinem Problem habe ich jedoch in github und im Forum kein Beispiel gefunden.
Wenn ich die index.html oder tab.html aufrufe werden die Unterseiten angezeigt,
gehe ich aber eine Stufe tiefer, funktioniert das nicht mehr.
LG Ralf
Zitat von: RalfPit am 07 Januar 2021, 17:50:21
Genau das mache ich seit Tagen und bin begeistert.
Zu meinem Problem habe ich jedoch in github und im Forum kein Beispiel gefunden.
Wenn ich die index.html oder tab.html aufrufe werden die Unterseiten angezeigt,
gehe ich aber eine Stufe tiefer, funktioniert das nicht mehr.
LG Ralf
Da die Beispielsseiten in einem Subfolder sind, habe ich diesen Tag im Header
<base href="../" />Wenn du eine Seite, die du aus Examples kopiert hast, neben der index.html im Main-Verzeichnis haben willst, musst du diese Zeile rauslöschen
Zitat von: setstate am 07 Januar 2021, 17:55:56
Da die Beispielsseiten in einem Subfolder sind, habe ich diesen Tag im Header
<base href="../" />
Wenn du eine Seite, die du aus Examples kopiert hast, neben der index.html im Main-Verzeichnis haben willst, musst du diese Zeile rauslöschen
Habe ich gemacht, mit diesem Eintrag wird nichts angezeigt.
LG Ralf
@setstate beim controls_ftui.txt hat sich ein Fehler eingeschlichen, der zum Abruch des Updates führt.
UPD www/ftui/icons/lightbulb-on-outline.svg
UPD www/ftui/icons/lightbulb-outline.svg
Grüße
LuGu
Danke, ist korrigiert
Zitat von: setstate am 07 Januar 2021, 17:55:56
Da die Beispielsseiten in einem Subfolder sind, habe ich diesen Tag im Header
<base href="../" />
Wenn du eine Seite, die du aus Examples kopiert hast, neben der index.html im Main-Verzeichnis haben willst, musst du diese Zeile rauslöschen
Das habe ich gemacht, hier meine Beispielseiten, beide liegen im Hauptverzeichnis
meine index.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<base href="./" />
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/bright-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>FTUI Mobile Example</title>
</head>
<body>
<ftui-tab-view id="View1">
<div class="cell huge">Tab1</div>
</ftui-tab-view>
<ftui-tab-view id="View2">
<ftui-content file="tab.html"></ftui-content>
</ftui-tab-view>
<footer class="row fixed border-top">
<ftui-tab fill="clear" direction="vertical" view="View1" active>
<ftui-icon name="home1"></ftui-icon>
<label class="small">Tab1</label>
</ftui-tab>
<ftui-tab fill="clear" direction="vertical" view="View2">
<ftui-icon name="cog"></ftui-icon>
<label class="small">Tab2</label>
</ftui-tab>
</footer>
</body>
</html>meine tab.html
<!DOCTYPE html>
<html>
<body>
<ftui-grid>
<ftui-grid-tile row="1" col="1" height="5" width="1">
<ftui-column>
<ftui-tab view="tab1" active>
<ftui-icon name="home1"></ftui-icon>
</ftui-tab>
<ftui-tab view="tab2">
<ftui-icon name="music"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="tab1">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<div class="size-10">Tab1</div>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="tab2">
<ftui-grid-tile row="1" col="2" height="5" width="9" color="green">
<ftui-content file="examples/contents/content-grid.html" placeholder="huhu"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>Die Seite mit Tab1 und die Seite mit examples/contents/content-grid.html werden nicht angezeigt.
LG und Danke für eure Hilfe
Zitat von: RalfPit am 07 Januar 2021, 18:37:31
Die Seite mit Tab1 und die Seite mit examples/contents/content-grid.html werden nicht angezeigt.
LG und Danke für eure Hilfe
Ich habe mir auch ein paar Seite mit dem Mobile Menu gebaut. Um Änderungen anzuzeigen, nützt bei mir (Firefox) nichts die Seite neu zu laden. Ich musste die Seite im Privat-Browsermode starten, dann war es ersichtlich... Hast du das mal probiert?
Zitat von: eppi am 07 Januar 2021, 18:47:25
Ich habe mir auch ein paar Seite mit dem Mobile Menu gebaut. Um Änderungen anzuzeigen, nützt bei mir (Firefox) nichts die Seite neu zu laden. Ich musste die Seite im Privat-Browsermode starten, dann war es ersichtlich... Hast du das mal probiert?
Das hilft mir nicht.
In der Version 2 habe ich alle Verschachtelungen mit pagebutton gelöst.
Zitat von: setstate am 06 Januar 2021, 13:03:30Zitat von: yersinia am 06 Januar 2021, 11:30:05Und wie kann ich mit <ftui-clock> denn sowas ausgeben: "Mittwoch, 6. Januar 2021"? Mit
<ftui-clock format="eeee, DD.MM.YYYY" class="size-3"></ftui-clock>
bekomm ich "Mittwoch, 06.01.2021" - FTUI2.x hatte als format "eeee, j. F Y" welches hier aber nicht funktioniert.
Habe ich jetzt hinzugefügt
<ftui-clock format="eeee, DD.MMMM YYYY" class="size-5"></ftui-clock>
Es funktioniert, aber MMMM gibt für Heute Februar zurück. ^^
(Ja, Systemzeiten FHEm/Browser-OS sind korrekt)
Kann es sein, dass die CSS Klasse
spin nicht mehr funktioniert? Genausowenig
hop. Oder ist das nur nicht implementiert?
blink klappt perfekt.
Apropos, für alle, die es noch nicht mitbekommen haben: die neue Update-URL ist jetzt:
https://raw.githubusercontent.com/knowthelist/ftui/master/
controls_ftui.txt (https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt)
Damit geht auch ein
update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txtum FTUI3 mit dem regulärem FHEM update Prozess durchzuführen.
Zitat von: setstate am 06 Januar 2021, 16:55:56
Nicht so richtig. Muss ich mir mal anschauen
Moin,
geht das mit einem Icon im Badge schon?
Wenn ja wie?
VG
Olli
Zitat von: octek0815 am 08 Januar 2021, 08:48:56geht das mit einem Icon im Badge schon?
Wenn ja wie?
Si, Sir! Bsp:
<ftui-badge text=" " color="clear">
<ftui-icon name="battery-0"
color="warning"
class="size-0">
</ftui-icon>
</ftui-badge>
(Allerdings ist der text hier noch leer ( erzeugt ein Leerzeichen).
(EDIT: typo, '>' vergessen)
@setstate: wird es CSS Klassen für Rotation (rotate-90, rotate-180, rotate-270) oder spiegeln (vertical/horizontal) der SVGs geben (nicht animiert wie bei spin)?
ZitatKann es sein, dass die CSS Klasse spin nicht mehr funktioniert? Genausowenig hop. Oder ist das nur nicht implementiert? blink klappt perfekt.
Meinst Du allgemein oder bei bestimmten Elementen?
Zumindest bei mir funktioniert sowohl spin als auch hop in dem u.a Beispiel
<!-- Frost -->
<ftui-column>
<ftui-icon [name]="proplanta:fc0_frost | map('1:snowflake-o, 0:')"
[color]="proplanta:fc0_frost | map('1:primary, 0:')"
[class-name]="proplanta:fc0_frost | map('1:spin,0:')">
</ftui-icon>
</ftui-column>
Zitat von: grossmaggul am 08 Januar 2021, 08:58:53Meinst Du allgemein oder bei bestimmten Elementen?
Zumindest bei mir funktioniert sowohl spin als auch hop in dem u.a Beispiel
mmmh, dann scheine ich das eventuell im map falsch zu verwenden:
<ftui-icon [name]="WaMa_Watt:state | map('0=washing-machine-off, 1=washing-machine')" path="mdt-svg"
[color]="WaMa_Watt:state | map('0=light, 1=green, 5=warning, 10=danger')"
[class-name]="WaMa_Watt:state | map('0=size-2, 5=size-2 blink, 10=size-2 spin')">
</ftui-icon>
Oder wäre es so korrekt:
[class-name]="WaMa_Watt:state | map('0=`size-2`, 5=`size-2 blink`, 10=`size-2 spin`')">
ZitatOder wäre es so korrekt:
Ja.
Zitat von: yersinia am 08 Januar 2021, 08:56:41
Si, Sir! Bsp:
<ftui-badge text=" " color="clear"
<ftui-icon name="battery-0"
color="warning"
class="size-0">
</ftui-icon>
</ftui-badge>
(Allerdings ist der text hier noch leer ( erzeugt ein Leerzeichen).
Seltsam, gestern in etwa genau so eingerichtet und ohne funktion.
Heute erneut, und nun funktioniert es.
Habe aber text=" " rein getan, dann wird auch nur das Icon angezeigt.
Danke und Grüße
Olli
@setstate: wird es CSS Klassen für Rotation (rotate-90, rotate-180, rotate-270) oder spiegeln (vertical/horizontal) der SVGs geben (nicht animiert wie bei spin)?
Läuft auch nicht. Allerdings läuft auch ein
class="size-2 spin"
nicht.
Ich sehe auch gerade, dass die CSS Klasse .spin nicht referenziert wird obwohl sie in der ftui.css definiert ist. Ich werde mal den Browser neu starten.
EDIT: scheint ein Browser-Problem zu sein bei mir, die Klasse wird geladen, aber der FF (84.0.1) interpretiert das auf meiner FTUI3x Seite nicht. Auf anderen (nicht-FTUI-)Seiten funktioniert spin allerdings.
Zitat von: yersinia am 08 Januar 2021, 09:33:12
Läuft auch nicht. Allerdings läuft auch ein
class="size-2 spin"
nicht.
Ich sehe auch gerade, dass die CSS Klasse .spin nicht referenziert wird obwohl sie in der ftui.css definiert ist. Ich werde mal den Browser neu starten.
EDIT: scheint ein Browser-Problem zu sein bei mir, die Klasse wird geladen, aber der FF (84.0.1) interpretiert das auf meiner FTUI3x Seite nicht. Auf anderen (nicht-FTUI-)Seiten funktioniert spin allerdings.
Beim map muss doch : anstatt = sein oder?
Bei mir funktioniert es so
<ftui-icon name="trash-o" color="black" [class-name]="Abfall:Calendar_RestmuellAWB_days | map('1:muellspin, 2:size-2')"></ftui-icon>
Die css Einträge habe ich wegen der Icongröße gemacht da die sonst nicht stimmen oder kann man mittlerweile 2 class angeben?
custom.css
.muellhop {
animation-name: hop;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
animation-duration: 2s;
animation-iteration-count: infinite;
font-size: 1rem;
}
.muellspin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
font-size: 1rem;
}
Gruß
Eisix
Zitat von: Eisix am 08 Januar 2021, 10:57:52
Die css Einträge habe ich wegen der Icongröße gemacht da die sonst nicht stimmen oder kann man mittlerweile 2 class angeben?
Ja geht.
[class-name]="HWR1_EG_Fensterrollladen:moving | map('up:blink size-0, down:blink size-0, stop:size-0')">
Zitat von: Eisix am 08 Januar 2021, 10:57:52
Beim map muss doch : anstatt = sein oder?
Bei mir geht beides, sowohl : als auch =. ich vermute = kann/soll bei numerischen Werten benutzt werden.
Zitat von: Eisix am 08 Januar 2021, 10:57:52
Die css Einträge habe ich wegen der Icongröße gemacht da die sonst nicht stimmen oder kann man mittlerweile 2 class angeben?
Ja, mit ` (ging bei mir aber auch ohne):
<ftui-icon name="trash-o" color="black" [class-name]="Abfall:Calendar_RestmuellAWB_days | map('1:`size-2 spin`, 2:`size-2`')"></ftui-icon>
Zitat von: yersinia am 08 Januar 2021, 11:18:09
Bei mir geht beides, sowohl : als auch =. ich vermute = kann/soll bei numerischen Werten benutzt werden.
Es geht beides. Der String muss ein gültiges HOCON sein.
https://en.wikipedia.org/wiki/HOCON
https://hocon-playground.herokuapp.com
@ setstate hast du mal bei meinem Problem mit der map im badge geschaut... ich bekomme es aktuell nicht hin ab Tag 2 eine Zahl anzuzeigen und am letzten Tag im Badge stehen zu haben Heute...
Nur Zahlen geht wunderbar
Es geht mit den Zahlen und werden jetzt auch richtig, wenn ich aber bei 0:Heute in die map eintrage zeigt er mir immer Heute an, evtl hast du es verfolgt...
Zitat von: moonsorrox am 08 Januar 2021, 13:08:56
@ setstate hast du mal bei meinem Problem mit der map im badge geschaut... ich bekomme es aktuell nicht hin ab Tag 2 eine Zahl anzuzeigen und am letzten Tag im Badge stehen zu haben Heute...
Nur Zahlen geht wunderbar
Es geht mit den Zahlen und werden jetzt auch richtig, wenn ich aber bei 0:Heute in die map eintrage zeigt er mir immer Heute an, evtl hast du es verfolgt...
Entweder du nimmst nur Zahlen
| map('0:Heute, 1:Morgen, 2:')also: ab 0, ab 1, ab 2
Oder du zwingst zu einem RegEx Vergleich
| map('`[0]`:Heute, `[1]`:Morgen, .*:')Hintergrund ist die benutze Funktion, die versucht den Vergleichstyp zu erraten:
export function isEqualOrGreater(pattern, value) {
return value === pattern ||
parseFloat(value) >= parseFloat(pattern) ||
String(value).match('^' + pattern + '$');
}
Ich glaube es wäre besser, das map aufzusplittern in map (nur String und RegEx) und <andererNameAnstattMap> (Nummer ist gleich oder größer)
Oder man erzeugt einfach zwei badges und versteckt immer ein Element:
<ftui-badge [text]="myAbfall:Restmuell_tage | map('0:Heute, 1:Morgen, 2:')"
[color]="myAbfall:Restmuell_tage | map('0:crimson, 1:darkviolet, 2:transparent')"
[hidden]="myAbfall:Restmuell_tage | map('0:false, 1:false, 2:true')" class="size-0">
</ftui-badge> <!-- Heute und Morgen -->
<ftui-badge [text]="myAbfall:Restmuell_tage"
color="darkblue"
[hidden]="myAbfall:Restmuell_tage | map('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->
Zitat von: yersinia am 08 Januar 2021, 14:59:38
Oder man erzeugt einfach zwei badges und versteckt immer ein Element:
das ist eine gute Idee, ich werde mal die Varianten probieren.
Kein Wunder da ich das gestern nicht mehr hinbekommen habe... weil beides eben so nicht geht, dass hattest du ja schon vermutet... ;)
Zitat von: yersinia am 08 Januar 2021, 14:59:38
Oder man erzeugt einfach zwei badges und versteckt immer ein Element:
So habe ich das auch von Anfang an laufen...
<ftui-column>
<ftui-icon [name]="System_Abfall:urSchwarz | map('0:_abfalltonne_auf, 1:_abfalltonne_zu')" color="_grau1"
[class-name]="System_Abfall:urSchwarz | map('0:spin, 1:hop, 2:')"></ftui-icon>
<ftui-badge [color]="System_Abfall:urSchwarz | map('0=_rot1, 1=_rot1, 2=_orange1, 3=gray')"
[text]="System_Abfall:urSchwarz" [hidden]="System_Abfall:urSchwarz | map('0:true, 1:false')"></ftui-badge>
<ftui-badge [color]="System_Abfall:urSchwarz | map('0=_rot1, 1=_rot1, 2=_orange1, 3=gray')"
[text]="System_Abfall:urSchwarz | map('0:!')"
[hidden]="System_Abfall:urSchwarz | map(' 0:false, 1:true')"></ftui-badge>
</ftui-column>
Wie kann ich bei Chart die Punkte verkleinern oder gar weglassen?
Zitat von: octek0815 am 08 Januar 2021, 18:47:08
So habe ich das auch von Anfang an laufen...
;)
das hat mich schon gewundert das du zwei badge hast, aber ich habe es nicht für wahr genommen..... :-\
War mir so nicht klar, dann hätte ich nur etwas mehr aufpassen müssen ;)
Aber jetzt geht es ja
wäre es möglich bei <ftui-content> das file aus einem FHEM Reading zu bekommen?
Beispielhaft...
<ftui-content [file]="Test_Dummy:state"></ftui-content>
Im Reading steht dann z.B. mein_content.html
Zitat von: Eisix am 04 Januar 2021, 12:43:34
Geht allerdings muss man das Icon nochmal klicken um einen refresh zu haben
<ftui-tab [view]="TEST"><ftui-icon class="size-2" name="television"></ftui-icon></ftui-tab>
Gruß
Eisix
Geht bei ftui-tab, TEST ist ein reading.
besseres beispiel
<ftui-tab [view]="hub:activity | map('Fernsehen|Musik|PowerOff:TV, AmazonPrime:AmazonPrime')"><ftui-icon class="size-2" name="television"></ftui-icon></ftui-tab>
Gruß
Eisix
Zitat von: octek0815 am 09 Januar 2021, 08:22:19
wäre es möglich bei <ftui-content> das file aus einem FHEM Reading zu bekommen?
Beispielhaft...
<ftui-content [file]="Test_Dummy:state"></ftui-content>
Im Reading steht dann z.B. mein_content.html
teils teils
Das Attribute
file wird bei Readingänderung gesetzt, aber die Komponente hat noch kein onAttributeChanged() implementiert, was darauf reagiert, um dann loadFileContent() zu rufen.
Müsste ich mal versuchen.
Ein Problemchen sehe ich: es wird dann immer ein ftuiApp.initComponents() für den neuen Content gerufen, aber die alten Inhalte werden nicht sauber aufgeräumt. Ich habe noch keine Ahnung, was die Subscriptions dann machen. Ob es knallt oder nur Datenmüll entsteht.
Zitat von: yersinia am 08 Januar 2021, 08:39:18
Habe ich jetzt hinzugefügt
<ftui-clock format="eeee, DD.MMMM YYYY" class="size-5"></ftui-clock>
Es funktioniert, aber MMMM gibt für Heute Februar zurück. ^^
(Ja, Systemzeiten FHEm/Browser-OS sind korrekt)
Danke, ist mir garnicht aufgefallen: ist aber jetzt korrigiert.
Zitat von: setstate am 09 Januar 2021, 10:34:06
Danke, ist mir garnicht aufgefallen: ist aber jetzt korrigiert.
da wir hier beim Datum sind, wie ist es möglich dieses in einer anderen Farbe darzustellen, geht das nur mit css. Denn ein "color="farbe"" macht er nicht..?
Ein eingestzter style im <div><div> macht er auch nicht
Zitat von: moonsorrox am 09 Januar 2021, 13:35:34
da wir hier beim Datum sind, wie ist es möglich dieses in einer anderen Farbe darzustellen, geht das nur mit css. Denn ein "color="farbe"" macht er nicht..?
Ein eingestzter style im <div><div> macht er auch nicht
ist jetzt geändert. FtuiClock extends FtuiLabel, damit kann Clock jetzt alles, was auch Label kann
Zitat von: setstate am 09 Januar 2021, 14:01:25
ist jetzt geändert. FtuiClock extends FtuiLabel, damit kann Clock jetzt alles, was auch Label kann
Super und Danke für deinen unermüdlichen Einsatz...
welche Datei muss ich dazu von github holen..? ah schon gesehen
@setstate
Mal eine Zwischenfrage zur Ladezeit der gesamten Seite, eigntlich ist es logisch das es umso länger dauert, je mehr und länger die index.html wird.
Welche Ladezeiten wären denn akzeptabel, kannst du das ungefähr sagen..?
Ich sage jetzt mal wenn ich ca. bei 1600 ms bin ist das ja doch schon etwas an Zeit.
Was ich wissen möchte dahingehend bedarf es da einer Code Bereinigung, oder ist das alles im Rahmen.?
Ich habe z.B. sehr oft Codeschnipsel womit ich probiere und die kommentiere ich dann aus, macht das die Seite langsamer und sollte ich alles was grün im Code ist raus nehmen, oder spielt das für die ladezeit keine Rolle.
Und was mich noch interessiert, würde es was bringen wenn man einige Dinge auslagert, so wie es vorher möglich war mit Templates. Momentan geht das ja noch nicht... aber du hast ja schon einmal was dazu gesagt.
Ich habe z.B. gerade beim Wetter Webseiten drin, wo ich unten genau sehe wo er drauf wartet... das sind dann wohl auch die Seiten die den Seitenaufbau verzögern.
Meine Fragen deshalb weil alles so Mega schnell aufbaut, dass es Spass macht FTUI 3 zu nutzen... und ich möchte natürlich wenig an Zeit zum Aufbau der Seite verlieren.
Ein großer Dank geht hier nochmals raus für deine unermüdliche Arbeit ;D ;)
Zitat von: setstate am 07 Januar 2021, 03:22:09
Ich würde das in das Map File einbauen. Damit die Matrix aber nicht zu groß wird, habe ich einen Zwischenwert eingeführt.
Provider-Condition -> Weather-Condition -> Icon
Damit braucht man bei einem neuem Provider nur noch ein Provider-Condition -> Weather-Condition hinzufügen.
Und bei einem neuen IconSet ein Weather-Condition -> Icon
Könntest du dein Map daraufhin umstellen, dann übernehme ich das?
@setstate,
ich klinke mich jetzt auch mal hier ein. Sehr spannend, was hier gerade entsteht :).
Im Moment pflege ich ja das Wettericon-Mapping für "FTUI 2" und habe dort mehr als 1700 Übersetzungen (https://forum.fhem.de/index.php?action=dlattach;topic=96954.0;attach=143378 (https://forum.fhem.de/index.php?action=dlattach;topic=96954.0;attach=143378)) an Hand der API Readings sämtlicher Wetterprovider (DarkSky, OpenWeather, Wunderground, Proplanta, DWD und Netatmo) gemacht. Somit wird die unterschiedliche Schreibweise und auch der Tag/Nacht Unterschied geregelt.
Der Vorschlag des neuen Matrix-Ansatzes finde ich sehr gut, gibt es hier schon etwas? Ich schlage vor, diese Thematik in dem neuen Thread "[FTUI3ß] Andere Wettericons" https://forum.fhem.de/index.php/topic,117473.0.html (https://forum.fhem.de/index.php/topic,117473.0.html) weiterzuverfolgen.
Viele Grüße
Andreas
Ich habe eine Fage ist es geplant eine Componente wie das Homestatus-Widget wom FTUI2 zu entwickeln?
Gruß BlasterX
Zitat von: yersinia am 08 Januar 2021, 08:39:18
Habe ich jetzt hinzugefügt
<ftui-clock format="eeee, DD.MMMM YYYY" class="size-5"></ftui-clock>
Es funktioniert, aber MMMM gibt für Heute Februar zurück. ^^
(Ja, Systemzeiten FHEm/Browser-OS sind korrekt)
Kann es sein, dass die CSS Klasse spin nicht mehr funktioniert? Genausowenig hop. Oder ist das nur nicht implementiert? blink klappt perfekt.
Apropos, für alle, die es noch nicht mitbekommen haben: die neue Update-URL ist jetzt:
https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt (https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt)
Damit geht auch ein
update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
um FTUI3 mit dem regulärem FHEM update Prozess durchzuführen.
Mir gefällt diese Ansicht das Datum auszugeben, komischer Weise steht hier der 10. Februar, während mein momentanes Datum aber richtig ist..! Hat das jemand auch so.?
@moonsorrox
Angenommen, ich habe die Frage richtig verstanden, dann steht die Antwort hier: https://forum.fhem.de/index.php/topic,115259.msg1119805.html#msg1119805 (https://forum.fhem.de/index.php/topic,115259.msg1119805.html#msg1119805)
Heute morgen habe ich selbst den aktuellen ftui3-Stand gezogen und es wird der "10.Januar" dargestellt.
Ok, dann wird es an der Version liegen, ich ziehe den nicht jeden Tag ;)
Zitat von: OdfFhem am 10 Januar 2021, 12:50:32
@moonsorrox
Angenommen, ich habe die Frage richtig verstanden, dann steht die Antwort hier: https://forum.fhem.de/index.php/topic,115259.msg1119805.html#msg1119805 (https://forum.fhem.de/index.php/topic,115259.msg1119805.html#msg1119805)
Heute morgen habe ich selbst den aktuellen ftui3-Stand gezogen und es wird der "10.Januar" dargestellt.
heute mal die aktuelle Version gezogen, aber mein so erstelltes Datum hat immer noch den Februar drin, mein benutztes Datum ist aber richtig...! :-\Kommando zurück.... der leidige Browsercache musste geleert werden ;)
@setstate
Unter dem bisherigen FTUI gab es beim label-Widget ein refresh-Attribut. Gibt es (jetzt schon bzw. bald) etwas Vergleichbares auch unter FTUI3?
Ich verwende dies z.B., um das Alter eines Readings automatisch anzupassen ... von FHEM-Seite kommt logischerweise kein Event - es sei denn, der Wert des Readings hat sich geändert ...
Nein, gibt es noch nicht. Hatte ich garnicht mehr auf dem Schirm. Schaue ich mir später mal an.
@setstate
Kann man schon eine 2 Navigationsebene erstellen (wie mit pagebutton in Version 2) ?
VG
Peter
Hallo zusammen
Ich suche eine kreative Idee, wie ich meinen Briefkasten in FTUI3 implementieren kann. Bei FTUI2 habe ich das FileLog Modul verwendet, dass mir anzeigt hat wann jemand die Klappe bewegt hat (HM Fensterkontakt). Ich möchte das mit FTUI3 auch wieder lösen können und eine History von mindestens 10 Bewegungen haben mit Datum und Zeit. Wäre das ev möglich mit Label? Hat jemand etwas ähnliches oder eine Idee?
Danke und viele Grüsse, Eppi
Es wäre vielleicht besser, wenn Du dafür einen eigenen Thread eröffnen würdest.
@setstate
Zitat von: setstate am 06 Januar 2021, 16:41:49Zitat 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.
Da ich gerade teste, ob und wie man das DWD Warn Widget (https://forum.fhem.de/index.php/topic,97204.msg918623.html#msg918623) in FTUI3 überführen kann (was, btw, schon mit den vorhandenen Bordmitteln relativ trivial ist) und ich eine Art swiper bzw. slide benötige, bin ich auf folgendes gestoßen.
Using animation for automatic slideshows (https://www.w3.org/Style/Examples/007/slideshow.en.html)
Slider als Keyframe-Animation mit CSS3 (https://ebene11.com/slider-als-keyframe-animation-mit-css3)
Das funktioniert echt gut -ausschließlich- mit CSS3 und vergleichsweise wenig Code - wenn man eine vorher definierte, statische Anzahl an slides hat, da man die animationszeiten der childs definieren muss. Für statische Slideshows wie zB Wettervorhersagen (jeder Tag 1 slide) durchaus einfach machbar. Ich denke, dass kann anhand eines Beispiels jeder, der FTUI-Code zusammenbauen kann, auch definieren.
Für dynamische slide-Generierung wie zB bei Anzeige von DWD-Warnungen (Anzahl 0 bis m) müsste die CSS dynamisch angepasst werden, eventuell kann hier ftui3-eigenes JS aushelfen (welches die Animations-Gesamtzeit an die Anzahl der slides sowie das animations-delay der childs anpasst). Das CSS für ein slide-set könnte so aussehen (ich verwende die class als Selektor), dabei ist die Anzeige der slides 5s, die Gesamtanimation also 15s.
.dwd-warn-slideset {
position: relative;
}
.dwd-warn-slideset > * {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
animation: 15s dwd-warn-autoplay infinite; /* <-- depends on # of slides; overall animation time in seconds */
}
@keyframes dwd-warn-autoplay {
0% {visibility: visible;}
33.33% {visibility: hidden;} /* <-- percentage depends on # of slides (fraction of 100%) */
}
/* below block depends on # of slides; defines animation delay of x seconds for every child */
.dwd-warn-slideset > *:nth-child(1) {animation-delay: 0s;}
.dwd-warn-slideset > *:nth-child(2) {animation-delay: 5s;}
.dwd-warn-slideset > *:nth-child(3) {animation-delay: 10s;}Was denkst du? Ist da was machbar? Getestet habe ich das mit FF 84.0.2.
Im einfachen Ansatz gibt es aber so ohne weiteres keine Möglichkeit, dass der Benutzer hier interagieren (zB wischen bzw manuelles wechseln der Slides) kann.
Ich habe noch eine andere Frage. ;) Bei mir funktioniert auf meiner FTUI-Seite die Animation von
.hop und
.spin nicht. Die Klassen werden eingebunden (kann ich im Inspektor sehen) und die Animationen funktioniert grundsätzlich (getestet im gleichen Browser (FF 84.0.2) mit der icon.html im examples Ordner - da funktionieren
.hop und
.spin).
.blink funktioniert allerdings. Es betrifft anscheinend nur
<ftui-icon> wenn ich 'fremde' SVGs wie font-awesome via path einbinde.
Mir fehlt irgendwie ein Ansatz zum debuggen. Hat hier jemand eine Idee und kann mich in eine Richtung schubsen?
Edit:
gibt es eine Möglichkeit, den für den <header> reservierten Platz im grid content los zu werden? In einem tile bau' ich den header dynamisch zusammen und irgendwie bekomm' ich 'meinen' div container nicht an die Kante geschoben. ::) hat sich erledigt, richtige positionierung ist das Stichwort.
Hallo zusammen,
habe eine Componente erstellt für die FlipClock hatte ich auch mal für FTUI2 gemacht, damals war dies mit einer gesonderten .js Lib.
Nun hab ich mal nur rein CSS probiert. Funktioniert soweit auch, da ich aber Javascript mäßig totaler Anfänger bin könnte dort ja mal einer der Profis drüber gucken.
Das Hauptproblem war, dass ich damit die Animation startet, dass Element mit den CSS Animation Keyframes erst Clonen muss und dann neu erstellen.
Hab das mal ins git gepackt. https://github.com/T0RST3N/fhem-ftui-components-flip-clock
Die frage die sich mir stellt, da ich das mit den Shadow-Objekten noch nicht so ganz gepeilt habe, es ist doch so das template() genutzt wird innerhalb des shadow Objekts.
Kann ich in der FlipClock Componente auch weitere shadow tree objekte anlegen? Ich wusste nicht ob FTUI das zulässt oder ob das uncool ist.
Würde mich jedenfalls freuen wenn mal einer drüber guckt und mir sagen kann was man verbessern sollte/müsste.
Danke!
Grüße
Torte
ich hab mal heute mal probiert ein Popup komplett durchsichtig zu gestalten, was mir zwar gelungen ist aber damit macht er alle Popups durchsichtig, was jetzt unproduktiv ist.
Hintergrund ist ich habe Kameras die mir ein Popup öffnen sollen und da reicht es mir wenn auf dem Tablet nur das Bild der Kamera zusehen ist, da brauche ich keinen Header und auch keinen Hintegrund, den Header auszublenden ist kein Problem, aber das Popup mit transparent oder einer class habe ich nicht hinbekommen.
Hat das einer von euch schon probiert.?
Was natürlich geht das Popup kleiner als das Bild zu machen, dann ist es auch nicht zusehen. So habe ich es zumindest jetzt erst mal...
ZitatHat das einer von euch schon probiert.?
Ja, ich, ist mir aber auch nicht gelungen.
Ok, also ich habe es jetzt erst mal so am laufen wie oben beschrieben... ist ja eigentlich auch OK so.
Das Popup verkleinert zumindest nicht das Bild sondern versteckt sich dahinter, damit kann ich leben ;)
Zitat von: moonsorrox am 12 Januar 2021, 12:30:27
ich hab mal heute mal probiert ein Popup komplett durchsichtig zu gestalten, was mir zwar gelungen ist aber damit macht er alle Popups durchsichtig, was jetzt unproduktiv ist.
Hintergrund ist ich habe Kameras die mir ein Popup öffnen sollen und da reicht es mir wenn auf dem Tablet nur das Bild der Kamera zusehen ist, da brauche ich keinen Header und auch keinen Hintegrund, den Header auszublenden ist kein Problem, aber das Popup mit transparent oder einer class habe ich nicht hinbekommen.
Hat das einer von euch schon probiert.?
Was natürlich geht das Popup kleiner als das Bild zu machen, dann ist es auch nicht zusehen. So habe ich es zumindest jetzt erst mal...
Hey René,
ich habe das so gelöst...
<ftui-popup id="popup-ipcam-haustuer" timeout="55" [open]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:true, off:false')" width="1692px" height="1006px">
<header class="size-6">Kamera Haustür</header>
<ftui-label slot="close" class="cell size-9" style="font-weight:bold; margin-top:-0.15em; margin-right:0.1em; color: white" popup-close>×</ftui-label>
<ftui-column>
<iframe style="overflow:hidden; border:0; width:100%; height:100%;" loading="lazy" src="http://10.20.8.99:8765/picture/1/frame/"></iframe>
</ftui-column>
</ftui-popup>
Header und Slot kannst Du ja weglassen.
Wenn du dann das Popup richtig dimensionierst, sollte das iframe die fläche es popup vollständig ausfüllen.
Grüße
Olli
Zitatist ja eigentlich auch OK so.
Solange man kein rundes Bild hat, z.B. das Mondphasenbild.
Zitat von: octek0815 am 12 Januar 2021, 15:36:19
Hey René,
ich habe das so gelöst...
Grüße
Olli
Ok mir hat eigentlich nur die Ansteuerung gefehlt, damit das Popup öffnet
[open]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:true, off:false')" Hab mir da mal ein dummy gebaut welches den state raus gibt, da brauche ich nicht immer raus laufen ;)
aber funktioniert und mit der Größenanpassung auch....
Zitat von: grossmaggul am 12 Januar 2021, 15:50:33
Solange man kein rundes Bild hat, z.B. das Mondphasenbild.
ich hatte das mal ausprobiert, wenn der Mond in so einem durchsichtigen Popup drin ist, sieht so schlecht nicht aus :)
Zitat von: moonsorrox am 12 Januar 2021, 12:30:27
ich hab mal heute mal probiert ein Popup komplett durchsichtig zu gestalten, was mir zwar gelungen ist aber damit macht er alle Popups durchsichtig, was jetzt unproduktiv ist.
Hintergrund ist ich habe Kameras die mir ein Popup öffnen sollen und da reicht es mir wenn auf dem Tablet nur das Bild der Kamera zusehen ist, da brauche ich keinen Header und auch keinen Hintegrund, den Header auszublenden ist kein Problem, aber das Popup mit transparent oder einer class habe ich nicht hinbekommen.
Hat das einer von euch schon probiert.?
Was natürlich geht das Popup kleiner als das Bild zu machen, dann ist es auch nicht zusehen. So habe ich es zumindest jetzt erst mal...
Du kannst mit der ID des Popup arbeiten
<style>
#pop2 {
--popup-background-color: translucent;
}
</style>
Ok danke dir setstate.
eine weitere Frage ich stelle ein kleines Bild meiner WebCam ein, dass ist aber so groß das ich auch etwas erkennen kann oder ich kann es mit dem Popup öffen.
Jetzt gibt es doch im ftui-image einen refresh... der sollte dieses Bild doch regelmäßig aktualisieren ist das richtig.?
ich habe den auf refresh="10" stehen im Code
<ftui-image src="http://10.0.0.66:8066/record/current.jpg" nocache shape="round" height="100" popup-target="popup-ipcam-eingang" refresh="10"></ftui-image>
Gestern am Abend immer noch das Tagesbild, er zeigt mir kein aktualisiertes Bild an, es bleibt Stunden gleich, irre ich mich mit dem refresh.?
Wenn ich mir das image.html aus dem examples Ordner ansehe, dann wird der refresh da so angewandt:
<ftui-image src="http://lorempixel.com/400/200/technics" width="100" [refresh]="ftuitest:state:time"></ftui-image>
Dann gibt's aber auch noch den Parameter "interval", möglicherweise führt das ja zum Ziel?
<ftui-image src="https://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_deutschland.jpg"
interval="300" nocache
width="250" height="200"></ftui-image>
Vielleicht muß aber auch noch eine Einheit dahinter.
Zitat von: grossmaggul am 13 Januar 2021, 13:29:08
Wenn ich mir das image.html aus dem examples Ordner ansehe, dann wird der refresh da so angewandt:
<ftui-image src="http://lorempixel.com/400/200/technics" width="100" [refresh]="ftuitest:state:time"></ftui-image>
Dann gibt's aber auch noch den Parameter "interval", möglicherweise führt das ja zum Ziel?
<ftui-image src="https://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_deutschland.jpg"
interval="300" nocache
width="250" height="200"></ftui-image>
Vielleicht muß aber auch noch eine Einheit dahinter.
vielen Dank erstmal ich hatte da auch schon einiges gefunden, aber bisher nicht weiter dran gearbeitet. Momentan aktualisiert sich das Bild wenn ich einmal drauf war.. mal abwareten was setstate sagt dazu wie man es einsetzen muss.... oder sollte.
Mit dem Intervall das mache ich aber mal
Baue grad fleißig an meiner letzten Seite und werde dann sehen was mir noch fehlt.
Aber eines ist mir klar geworden, dass ich längst nicht mehr soviele Seiten brauche das reduziert sich auf 4 Menüpunkte wobei die Wetter Seite noch recht leer ist.
Zitat von: moonsorrox am 19 Dezember 2020, 13:15:18
was ich irgendwie gar nicht hinbekomme ist so etwas wie es in der Version 2 der "classchanger" gemacht hat.
Moin
Hast du es schon geschafft einen "classchanger" umzusetzen?
Grüsse
Hallo,
classchanger
<ftui-icon name="trash-o" color="black" [class-name]="Abfall:RestmuellAbholung_days | map('1:`size-2 spin`, 2:size-2')"></ftui-icon>
Wenn es das ist was du meinst.
Gruß
Eisix
ich habe das mit [hidden] gemacht falls du mehr brauchst, stelle ich mal ein stück Code ein, bin nur gerade nicht am PC
Zitat von: SirMarco am 13 Januar 2021, 18:35:05
Moin
Hast du es schon geschafft einen "classchanger" umzusetzen?
Grüsse
Was möchtest Du umsetzen bzw. erreichen?
Ja genau, verstanden ;)
Wollte eigentlich Label 3 ausblenden lassen. Mit hidden funktioniert das Bestens.
Weiss jemand warum "blink" nicht auf align-left reagiert in ftui-label Zeile 4?
<ftui-row>
<ftui-column>
<ftui-label class="align-left" >{{name}}</ftui-label>
<ftui-label class="align-left" [text]="{{device}}:actifity | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')"></ftui-label>
<ftui-label class="align-left" >Letzter Verbindungserfolg:</ftui-label>
<ftui-label class="align-left" [text]="{{device}}:connectionCheck | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')" [class-name]="{{device}}:actifity | map('dead:blink')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label></ftui-label>
</ftui-column>
<ftui-column>
</ftui-column>
</ftui-row>
[class-name]="" überschreibt class komplett. Das align muss mit in das map.
Zitat von: setstate am 13 Januar 2021, 19:26:22
[class-name]="" überschreibt class komplett. Das align muss mit in das map.
oder so...
<ftui-column align-items="left">
<ftui-label>{{name}}</ftui-label>
<ftui-label [text]="{{device}}:actifity | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')"></ftui-label>
<ftui-label>Letzter Verbindungserfolg:</ftui-label>
<ftui-label [text]="{{device}}:connectionCheck | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')" [class-name]="{{device}}:actifity | map('dead:blink')"></ftui-label>
</ftui-column>
Grüße
Olli
Hallo,
hab heute weather ausprobiert, die ICONs werden nicht geladen da Weather Komponente das LoadIcon der ICON Komponente mit der Url aufruft aber
in der LoadIcon Function die Variable name dann nicht gesetzt ist.
Ich meine die Zeile 67
this.elementIcon.innerHTML = `<img src="${name}"></img>`;
kann es sein da es nicht so sein müsste
this.elementIcon.innerHTML = `<img src="${url}"></img>`;
Danach lädt er bei mir die ICONS, bei mir PNGs
Grüße
Torte
danke, das war ein Fehler.
danke auch :)
kurze nachfrage: einige Wetter <IMG> Icons sind rechteckig es bräuchte ein width: 100% mach ich das am besten im CSS oder gibt es da was für?
Grüße
Torte
Edit:
Habt die Variable dann auch gefunden :-)
style="--icon-width: 100%;"
Zitat von: Eisix am 07 Januar 2021, 16:42:52
Nutz Ihr alle nur line?
Gruß
Eisix
Kann mir immer noch keiner sagen wie ich steps im Chart hinkriege?
Gruß
Eisix
hat jemand von euch schon eine vernünftige Rollladensteuerung zusammen bekommen bzw. auch eine schöne Ansicht.
Ich weiß gar nicht wie ich das machen soll, er nimmt meine Icons gar nicht richtig an, dass steuern eines Rollladens habe ich probiert das ist kein Problem, aber eine vernünftige Iconansicht wäre schon toll.
Ich habe natürlich auch gemerkt wieviel ich davon beutze, soll heißen ein Circlemenü brauche ich gar nicht mehr, dass wäre im Screenshot direkt neben dem Namen POSITION, denn der Rollladen macht ja alles soweit alleine.
Eigentlich reichen die Beschattungspositionen und Hoch/Runter/Stop und die Modusumschaltungen vollkommen aus.
Ich hänge mal den Screenshot ran.
@setstate
In ftui.css fehlt bei size-5 ein r ...
Zitat von: moonsorrox am 14 Januar 2021, 22:54:08
hat jemand von euch schon eine vernünftige Rollladensteuerung zusammen bekommen bzw. auch eine schöne Ansicht.
Ich weiß gar nicht wie ich das machen soll, er nimmt meine Icons gar nicht richtig an, dass steuern eines Rollladens habe ich probiert das ist kein Problem, aber eine vernünftige Iconansicht wäre schon toll.
Ich habe natürlich auch gemerkt wieviel ich davon beutze, soll heißen ein Circlemenü brauche ich gar nicht mehr, dass wäre im Screenshot direkt neben dem Namen POSITION, denn der Rollladen macht ja alles soweit alleine.
Eigentlich reichen die Beschattungspositionen und Hoch/Runter/Stop und die Modusumschaltungen vollkommen aus.
Ich hänge mal den Screenshot ran.
Meinst Du so in etwa?
Hier der Code für ein Rollladen:
<ftui-row class="size-6">
<ftui-column align-items="left" style="margin-left:25px;" height="50%">
<ftui-label text="Bad unten"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-row width="60%">
<ftui-icon [name]="Badezimmer_EG_Fensterrollladen:state | map('0:_shutter_1w_l_0, 5:_shutter_1w_l_10, 10:_shutter_1w_l_20, 15:_shutter_1w_l_30, 20:_shutter_1w_l_40, 25:_shutter_1w_l_50, 30:_shutter_1w_l_60, 40:_shutter_1w_l_70, 53:_shutter_1w_l_80, 60:_shutter_1w_l_90, 70:_shutter_1w_l_100, opened:_shutter_1w_l_0, closed:_shutter_1w_l_100, Initialized:exclamation-triangle, MISSING.*:exclamation-triangle')" [color]="Badezimmer_EG_Fensterrollladen:state | map('0:white, 100:white, off:white, on:white, set.*:primary, MISSING.*:_rot1, Initialized:_rot1')" [class-name]="Badezimmer_EG_Fensterrollladen | map('set.*:spin, MISSING.*:blink, Initialized:blink')">
</ftui-icon>
<ftui-column height="12%">
<ftui-icon class="size-0" name="sun" [color]="Badezimmer_EG_Fensterrollladen:ASC_ShuttersLastDrive | map('`shading in`:yellow, .*:gray')"></ftui-icon>
<ftui-icon [name]="Badezimmer_EG_Fensterrollladen:moving | map('up:chevron-circle-up, down:chevron-circle-down, stop:stop-circle')" [color]="Badezimmer_EG_Fensterrollladen:moving | map('up:primary, down:primary, stop:gray')"
[class-name]="Badezimmer_EG_Fensterrollladen:moving | map('up:blink size-0, down:blink size-0, stop:size-0')">
</ftui-icon>
</ftui-column>
</ftui-row>
</ftui-column>
<ftui-column style="margin-right:25px;">
<ftui-row>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen up">
<ftui-icon style="margin-top:-0.5em;" color="white" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen stop">
<ftui-icon color="white" name="minus"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen down">
<ftui-icon color="white" name="chevron-down"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen position 15">
<ftui-icon color="white" name="_shutter_1w_l_30"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen position 25">
<ftui-icon color="white" name="_shutter_1w_l_50"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen position 45">
<ftui-icon color="white" name="_shutter_1w_l_70"></ftui-icon>
</ftui-button>
<ftui-button class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen getStatus">
<ftui-icon color="white" name="refresh1"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
@moonsorox
Ich habe alles in einem Icon aber noch mit Circlemenue, allerdings fährt eigentlich alles automatisch, somit zeigt das Icon den aktuellen Status an und wenn wirklich nötig kann man dann die Positionen anfahren.
Das ganze mit den animierten Icons von Thyraz sieht auch gut aus.
<ftui-column>
<ftui-circlemenu direction="bottom-half">
<ftui-icon class="size-3" [name]="Rolladen_WZ_mitte:position | map('0:fts_window_2w, 25:fts_shutter_30, 50:fts_shutter_50, 75:fts_shutter_80, 100:fts_shutter_100')"></ftui-icon>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="opens">Auf</ftui-button>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="25">25</ftui-button>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="50">50</ftui-button>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="75">75</ftui-button>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="closes">Zu</ftui-button>
</ftui-circlemenu>
<ftui-label>Mitte</ftui-label>
</ftui-column>
Gruß
Eisix
Zitat von: EisixKann mir immer noch keiner sagen wie ich steps im Chart hinkriege?
Ich habe das mal "outgesourced":
https://forum.fhem.de/index.php/topic,117779.0.html
Danke Olli und Danke Eisix
schaue mir beide Varianten mal an, hatte noch gar keinen Ansatz dazu. Den habe ich jetzt ;)
Hallo zusammen
In der Toolbar habe ich ein label eingefügt:
<ftui-main>
<ftui-view-toolbar class="fixed">
<ftui-menu-button slot="start" align-items="left"></ftui-menu-button>
<ftui-title group="default" class="size-5 titleroom" slot="start"></ftui-title>
<ftui-title slot="end">
<ftui-tab view="content_klima" title="Klima" color="black">
<ftui-weather class="size-1" [condition]="Controller_myProPlanta:fc0_weatherDay"></ftui-weather>
<ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>
</ftui-tab>
</ftui-title>
</ftui-view-toolbar>
</ftui-main>
Wenn ich das label auf einer anderen Seite anzeigen lassen möchte, wird es nicht angezeigt - erst wenn ich das label in der Toolbar lösche.
Liegt das daran, das die 2. Seite ein Template ist?
Hier möchte ich es ebenfalls anzeigen lassen:
content_klima.html
<ftui-page>
<ftui-column align-items="left" class="tabsection">
<ftui-title style="padding-left: 10px" class="size-4">Klima</ftui-title>
</ftui-column>
<ftui-view-section>
<ftui-content file="template/template_klima_2er.html" name="Lounge" device="netatmo_M02_00_00_06_7e_16"></ftui-content>
</ftui-view-section>
</ftui-page>
template_klima_2er.html
<ftui-row>
<ftui-column>
<ftui-label class="align-left" >{{name}}</ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="bars" class="size-0" popup-target="{{name}}"></ftui-icon>
</ftui-column>
<ftui-column>
<ftui-label [text]="{{device}}:temperature" [color]="{{device}}:temperature | map('0=secondary,16=warning,30=danger')" class="size-5"><span slot="end">°C</span></ftui-label>
<ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="{{device}}:humidity" [color]="{{device}}:humidity | map('0=secondary,50=warning,80=primary')" class="size-5"><span slot="end">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-popup id="{{name}}" timeout="0" width="400px" height="400px">
<ftui-row>
<ftui-chart title="{{name}}" unit="day" prefetch="21600" extend>
<ftui-chart-data label="Temperatur" point-radius="0" tension="0.3" fill color="#27ae60" log="DBLogging" file="history" spec="{{device}}:temperature"></ftui-chart-data>
<ftui-chart-data label="Luftfeuchtigkeit" point-radius="0" tension="0.3" fill color="#228ace" log="DBLogging" file="history" spec="{{device}}:humidity"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
</ftui-row>
</ftui-popup>
Danke 8)
Grüsse
wenn ich mit einem Button mehrere Geräte mit set steuern möchte kann ich das in FTUI machen oder musss ich mir in Fhem etwas basteln.?
Moin,
ich steig hier auch mal mit ein. Bin seit Jahren? begeisterter Nutzer von FTUI und werde mir (nach Lösung meiner aktuellen Baustellen) dann auch mal die Version 3 zulegen. Mach auf jeden Fall weiter:)
Danke für deine Mühen, und viele Grüße,
stephan
Zitat von: moonsorrox am 17 Januar 2021, 14:47:51
wenn ich mit einem Button mehrere Geräte mit set steuern möchte kann ich das in FTUI machen oder musss ich mir in Fhem etwas basteln.?
Beispiel...
<ftui-button style="margin-right:0.25em;" class="_size-2punkt25vh" shape="circle" fill="outline" color="white" (value)="set HWR2_EG_Fensterrollladen up; set Badezimmer_EG_Fensterrollladen up; set HWR1_EG_Fensterrollladen up; set Kueche_EG_Fensterrollladen up; set Wohnzimmer_EG_Fensterrollladen up; set Wohnzimmer_EG_Terrassentuerrollladen up; set Schlafzimmer_EG_Fensterrollladen up; set Flur_OG_Dachfensterrollladen up; set Arbeitszimmer_OG_Fensterrollladen1 down; set Arbeitszimmer_OG_Fensterrollladen2 down; set Badezimmer_OG_Dachfensterrollladen up; set Kinderzimmer1_OG_Fensterrollladen down; set Kinderzimmer2_OG_Fensterrollladen down">
<ftui-icon style="margin-top:-0.5em;" color="white" name="chevron-up"></ftui-icon>
</ftui-button>
VG
Olli
Danke Olli ;)
alles mögliche habe ich versucht, nur nicht das Semikolon :-\
Guten Morgen,
gibt es schon sowas wie data-return-time?
Um nach einer angegebenen Zeit zur HOME Ansicht automatisch zurück zukehren.
Frage für einen Freund :o 8)
Grüße
Torte
Zitat von: torte am 19 Januar 2021, 06:51:07
gibt es schon sowas wie data-return-time?
Um nach einer angegebenen Zeit zur HOME Ansicht automatisch zurück zukehren.
Ich hätte gedacht, sowas ist schon drin.
Aber ist es leider noch nicht. Werde ich noch einbauen.
Hallo setstate
Die neue Mobile-View sieht super aus. Könntest du noch in eine detail-view eine Checkbox einbauen? Ich habe noch probleme mit dem Ausrichten der Checkbox (rechts), da greift bei mir das Attribut slot="end" nicht...
Danke vielmals und Gruss Eppi
Zitat von: eppi am 19 Januar 2021, 07:47:29
Hallo setstate
Die neue Mobile-View sieht super aus. Könntest du noch in eine detail-view eine Checkbox einbauen? Ich habe noch probleme mit dem Ausrichten der Checkbox (rechts), da greift bei mir das Attribut slot="end" nicht...
Danke vielmals und Gruss Eppi
So weit war ich noch nicht. 8)
Mit dem Content wollte ich mich als nächstes befassen ;D
Ist aber jetzt gefixed
<ftui-view id="view-2">
<ftui-view-toolbar>
<ftui-nav-link slot="start"></ftui-nav-link>
Level 2
</ftui-view-toolbar>
<ftui-view-item target="details-1">Item 2-1</ftui-view-item>
<ftui-view-item target="details-2">Item 2-2</ftui-view-item>
<ftui-view-item target="details-3">Item 2-3</ftui-view-item>
<ftui-view-item>
Property 1
<ftui-checkbox slot="end" value="on"></ftui-checkbox>
</ftui-view-item>
<ftui-view-item>
Property 2
<ftui-checkbox slot="end" color="success" value="on"></ftui-checkbox>
</ftui-view-item>
<ftui-view-item>
Property 3
<ftui-checkbox slot="end" color="danger" value="on"></ftui-checkbox>
</ftui-view-item>
Hallo,
kann es sein das ftui-view-section seit heute einen header und einen footer haben mit einer min-height von 2em?
Habe bei mir mit ftui-view-section benutzt um alle geöffneten Türen/Fenster anzuzeigen, wenn Tür close dann wird die section hidden.
Durch header und footer ist in der Liste jetzt viel platz zwischen den Zeilen.
Soll das so? Oder mach ich was falsch.
Grüße
Torte
Wenn man
<ftui-view-section hidden>
setzt, ist der ganze Block weg und beansprucht kein Platz.
Ohne view-section geht es auch. Nur die view-items klammern und dann hidden setzen geht auch:
<ftui-view-item>Item 2-7</ftui-view-item>
<ftui-view-item>Item 2-8</ftui-view-item>
<ftui-view-item>Item 2-9</ftui-view-item>
<div hidden>
<ftui-view-item>Item 2-10</ftui-view-item>
<ftui-view-item>Item 2-11</ftui-view-item>
<ftui-view-item>Item 2-12</ftui-view-item>
<ftui-view-item>Item 2-13</ftui-view-item>
<ftui-view-item>Item 2-14</ftui-view-item>
<ftui-view-item>Item 2-15</ftui-view-item>
<ftui-view-item>Item 2-16</ftui-view-item>
<ftui-view-item>Item 2-17</ftui-view-item>
<ftui-view-item>Item 2-18</ftui-view-item>
</div>
</ftui-view>
Aber der Platz zwischen den sichtbaren Sections ist zu groß. Das ändere ich
Ich will die Frage noch mal stellen dann hätte ich eigentlich meine FTUI2 komplett nach FTUI3 umgestellt.
Ist es geplant eine Componente wie das Homestatus-Widget wom FTUI2 für FTUI3 zu entwickeln?
Gruß BlasterX
Keine Ahnung, ob ich sowas wie den HomeStatus nochmal verbauen würde. Nimmt doch recht viel Platz weg.
Ich tendiere eher zu einem Segmented Button. Sowas wird es zuvor geben. Und vorher auch noch andere offene Controls: Playlist
https://www.google.de/search?q=segment+button
@setstate
Gerade festgestellt das <ftui-image> bei width und height nicht mit % Werten funktioniert wäre es möglich das einzubauen?
Danke und Grüße
Olli
Das kann das HTML <img> nicht
Zitatheight
The intrinsic height of the image, in pixels. Must be an integer without a unit.
siehe Doc (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
Zitat von: setstate am 20 Januar 2021, 09:43:16
Das kann das HTML <img> nicht
siehe Doc (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
Ok, verstanden, schade.
Gibt es eine andere Möglichkeit ein Link zu einer IPcam dynamisch über ein FHEM Reading nachzuladen bzw. zu aktivieren oder zu deaktivieren?
Ich möchte nicht das der Webcam Stream ständig im Hintergrund (popup) geladen wird.
Über iframe lässt sich das Bild mit Prozentangaben skalieren.
gerade noch gesehen das es object-fit gibt.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Habe gerade getestet mit object-fit:fill; oder object-fit:scale-down;
Funktioniert aber beides nicht.
Zitat von: setstate am 20 Januar 2021, 09:43:16
Das kann das HTML <img> nicht
siehe Doc (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
Erstaunlicherweise skaliert <img> aber doch mit Prozentangeben...
<img style="width:100%; height:100%;" src="..."></img>
ja, über style geht das.
https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent
Ich könnte ja versuchen, den Wert height des ftui-image auf den style anzuwenden, anstatt auf das height des img.
Zitat von: setstate am 20 Januar 2021, 10:27:34
ja, über style geht das.
https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent
Ich könnte ja versuchen, den Wert height des ftui-image auf den style anzuwenden, anstatt auf das height des img.
Das wäre super, aber kein Stress wenn das zu viel Arbeit macht.
Ich danke dir schon mal im voraus!
@setstate
ZitatKeine Ahnung, ob ich sowas wie den HomeStatus nochmal verbauen würde. Nimmt doch recht viel Platz weg.
Ich tendiere eher zu einem Segmented Button. Sowas wird es zuvor geben. Und vorher auch noch andere offene Controls: Playlist
https://www.google.de/search?q=segment+button
Danke für die Info da werde ich es anders Gestalten.
Gruß BlasterX
Hallo @setstate
Zitat von: setstate am 25 Oktober 2020, 12:42:34
Weiterentwickeln werde ich nur noch Version 3.
Das ist ja nicht so ganz unbedeutend:
Wäre es Dir bitte möglich, einen schreibgesperrten Thread mit dem jeweils aktuellen Stand der Dinge ganz oben in diesem Unterforum anzutackern?
Eine der Fragen wäre nach dem WARUM:
Welche Verbesserungen versprichst Du Dir?
Eine weitere, nicht ganz unwichtige Frage ist die nach der Abwärtskompatibilität der bisherigen Widgets.
Zitat von: setstate am 25 Oktober 2020, 12:42:34
Aber, wie du festgestellt hast, gibt es noch kaum (keine) Doku.
Ist das noch so?
Zitat von: setstate am 25 Oktober 2020, 12:42:34
Ich fange jetzt auch erst beim ersten Gerät an, auf die neue Version umzustellen.
Falls man sich was wünschen dürfte: Ein HowTo wäre dafür nicht schlecht.
Danke!
ZitatWäre es Dir bitte möglich, einen schreibgesperrten Thread mit dem jeweils aktuellen Stand der Dinge ganz oben in diesem Unterforum anzutackern?
Warum? Man kann doch im git sehen was sich ändert und was es gibt. Und wenn Du den Updatemechanismus von FHEM nutzt wird das dort auch angezeigt, wenn Du einen Updatecheck machst.
ZitatWelche Verbesserungen versprichst Du Dir?
Ich bin zwar nicht setstate, aber die wohl größte Verbesserung an FTUI3 ist die enorme Geschwindigkeitssteigerung gegenüber FTUI2.
ZitatEin HowTo wäre dafür nicht schlecht.
Eigentlich steht doch alles auf setstates Seite im github und anhand der Beispiele sollte es jedem möglich sein das an seine Bedürfnisse anzupassen und bei Problemen kann man hier fragen.
Das soll Dich aber nicht davon abhalten eine Howto dafür zu schreiben.;)
Zitat von: grossmaggul am 21 Januar 2021, 10:14:30
ZitatWäre es Dir bitte möglich, einen schreibgesperrten Thread mit dem jeweils aktuellen Stand der Dinge ganz oben in diesem Unterforum anzutackern?
Warum?
Weil hier das Forum ist.
Zitat von: setstate am 19 Januar 2021, 10:01:49
DEMO (https://knowthelist.github.io/ftui/www/ftui/examples/mobile_plain.html)
Hallo setstate
vom neuen Mobile-View bin ich begeistert, vielen DANK hierfür.
Eine Frage hierzu: Kann ich das > Zeichen ausblenden (ich nutze nur Icon und hier stört es ein wenig).
LG Peter
Zitat von: Peter68 am 21 Januar 2021, 11:30:27
Hallo setstate
vom neuen Mobile-View bin ich begeistert, vielen DANK hierfür.
Eine Frage hierzu: Kann ich das > Zeichen ausblenden (ich nutze nur Icon und hier stört es ein wenig).
LG Peter
Ein Workaround wäre:
Zeile 54 in view-item.component.css ändern
content: "";Grüsse
Zitat von: Peter68 am 21 Januar 2021, 11:30:27
Hallo setstate
vom neuen Mobile-View bin ich begeistert, vielen DANK hierfür.
Eine Frage hierzu: Kann ich das > Zeichen ausblenden (ich nutze nur Icon und hier stört es ein wenig).
LG Peter
Das > in einem ftui-view-item kommt nur, wenn ein target="" angegeben ist. Also, wenn man irgendwo hin navigieren kann. Zu einer Detailpage oder einem sub-view.
Zitat von: curt am 21 Januar 2021, 10:48:05
Warum?
Weil hier das Forum ist.
ich sage mal so...FTUI 3 ist doch noch gar nicht fertig und im "fast" Anfangsstadium...
setstate arbeitet doch unermüdlich dran und ein Howto wird doch momentan noch gar nicht gebraucht... wie die Vorredner schon schrieben "github" und ein klein wenig html und css sollte man schon können, dann kommt man auch schon ein ganzes Stück weiter....
...und wenn du Probleme hast wir fragen hier alle und wenn sie speziell sind meldet sich setstate schon...
Zitat von: moonsorrox am 21 Januar 2021, 12:15:56
ich sage mal so...FTUI 3 ist doch noch gar nicht fertig und im "fast" Anfangsstadium...
Mit der Ansage, dass @setstate FTUI2 nicht weiterentwickelt. Selbiges dürfte aber auf mehreren 1.000 Endgeräten sein. Da darf man schon an die treue Nutzerschaft denken ...
Ich zitiere mich selbst:
Zitat
Das ist ja nicht so ganz unbedeutend:
Wäre es Dir bitte möglich, einen schreibgesperrten Thread mit dem jeweils aktuellen Stand der Dinge ganz oben in diesem Unterforum anzutackern?
Das ist eine ganz einfache Bitte, überhaupt nichts schlimmes.
Wegen mir halt einen schreibgesperrten Thread mit den Basics - und dem Link auf sein github-Dingens. Das muss doch machbar sein.
Zitat von: curt am 21 Januar 2021, 12:22:23Mit der Ansage, dass @setstate FTUI2 nicht weiterentwickelt. Selbiges dürfte aber auf mehreren 1.000 Endgeräten sein. Da darf man schon an die treue Nutzerschaft denken ...
Nicht weiterentwickelt heisst nicht, dass es nicht mehr benutzbar/funktionell ist. Man kann es weiterhin nutzen, es wird aber durch setstate nicht mehr
aktiv weiterentwickelt. Viele widgets werden ohnehin von anderen Forenmitglieder beigesteuert bzw. gepflegt.
Es steht hier, dass es noch eine frühe Entwicklungsversion ist. Also alpha-status. Wir reden nicht von beta-release oder gar RC. Von daher finde
ich das Vorgehen hier
derzeit in Ordnung.
Ansonsten schließe ich mich moonsorrox' Aussage an.
Und Doku gibt es schon hier => https://github.com/knowthelist/ftui (https://github.com/knowthelist/ftui) (runterscrollen)
sOT: FTUI ist nicht das einzige Projekt, das so vorgeht. Siehe zB hyperion:
hperion discontinued (https://github.com/hyperion-project/hyperion) vs. hyperion-ng unreleased (https://github.com/hyperion-project/hyperion.ng)
Moin,
mal ne blöde Frage, kann mir einer mal ein Beispiel zeigen wie das mit Ago (dateAgo) gehen soll. Bei mir tut das nicht so.
Ich möchte gerne wissen wie lange der Zustand eines Devices schon vorbei ist.
Danke!
Grüße
Torte
Zitat von: setstate am 21 Januar 2021, 12:14:30
Das > in einem ftui-view-item kommt nur, wenn ein target="" angegeben ist. Also, wenn man irgendwo hin navigieren kann. Zu einer Detailpage oder einem sub-view.
Das stimmt, aber ich nutze zum Navigieren fast nur Icons und dann klebt das > direkt neben dem Icon und sieht etwas unschön aus.
Zitat von: Peter68 am 21 Januar 2021, 13:11:58
Das stimmt, aber ich nutze zum Navigieren fast nur Icons und dann klebt das > direkt neben dem Icon und sieht etwas unschön aus.
Ich könnte ja noch ein arrow="false" einbauen. Dann kann man steuern.
@torte
Eine Reihe von Beispielen für ago bzw. till stehen in examples/label.html
Eine von mir gern verwendete Variante sieht so aus:
<ftui-label [text]="device:READING:time | toDate() | ago() | timeFormat('[ dd+hh:mm:ss ]')"></ftui-label>
Zitat von: setstate am 21 Januar 2021, 13:34:22
Ich könnte ja noch ein arrow="false" einbauen. Dann kann man steuern.
Das wäre genial !!! Vielen vielen Dank
LG Peter
Hallo zusammen
Weiss grad nicht weiter, irgendwie habe ich das noch nicht ganz verstanden. Wie kann ich die Breite einer <ftui-column> steuern?
Ist der Text von ersten Label zu lang, wird es zweizeilig, obwohl genügend Platz vorhanden ist.
<ftui-row>
<ftui-column width="250px">
<ftui-label class="align-left">{{name}}</ftui-label>
<ftui-label class="align-left" [text]="{{device}}:state" [color]="{{device}}:state | map('on: green, dim.*: green, .*: red')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label></ftui-label>
</ftui-column>
<ftui-column>
</ftui-column>
<ftui-column>
<ftui-button class="align-right" shape="circle"
[value]="{{device}} | map('on|dim.*: on, off|0: off')"
(value)="{{device}}"
[fill]="{{device}}:state | map('off: outline, unreachable: outline, dim.*: solid, on: solid')">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
Grüsse
@OdfFhem
Danke!! hab irgendwie Tomaten auf den Augen hatte .time statt :time :( so gehts.
Bin mir nicht sicher aber bei den Examples/label.html -> ago geht keins.
<ftui-label [text]="ftuitest:dateTime4ago"></ftui-label>
Die sind alle mit dateTime4ago ? Aber egalo!
Bei FTUI2 gabs in dem Zusammenhang mit (zb.)Ago data-refresh="xx" um nach xx Sekunden neu zu berechnen gibt es sowas auch schon?
Grüße
Torte
Zitat von: SirMarco am 21 Januar 2021, 13:48:37
Hallo zusammen
Weiss grad nicht weiter, irgendwie habe ich das noch nicht ganz verstanden. Wie kann ich die Breite einer <ftui-column> steuern?
Ist der Text von ersten Label zu lang, wird es zweizeilig, obwohl genügend Platz vorhanden ist.
<ftui-row>
<ftui-column width="250px">
<ftui-label class="align-left">{{name}}</ftui-label>
<ftui-label class="align-left" [text]="{{device}}:state" [color]="{{device}}:state | map('on: green, dim.*: green, .*: red')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label></ftui-label>
</ftui-column>
<ftui-column>
</ftui-column>
<ftui-column>
<ftui-button class="align-right" shape="circle"
[value]="{{device}} | map('on|dim.*: on, off|0: off')"
(value)="{{device}}"
[fill]="{{device}}:state | map('off: outline, unreachable: outline, dim.*: solid, on: solid')">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
Grüsse
Das ist mir noch gar nicht aufgefallen, dass das nicht geht ...
ist jetzt gefixed.
Formatierungsfrage zu zwei Icons und einem Knob, ich bekomme es nicht hin wenn ich eine <row> habe mit 3 column das diese alle in der Mitte zentriert sind der knob sitz immer tiefer, evtl. könnte ich mit einem margin-top arbeiten, aber vlt. habe ich etwas übersehen.
siehe Screenshot code hänge ich ran.. Farben sind nur zur Anschauung da drin damit ich es genau sehe
<!-- PopUp - Modus Markise - START -->
<ftui-popup id="popup-modus_markise" timeout="40" width="400px" height="150px" shape="round">
<header class="size-2">=== Modus Markise & Temperatur ===</header>
<ftui-row height="5%"><ftui-label class="size-2" color="white"></ftui-label></ftui-row>
<ftui-row width="60%" height="">
<ftui-column width="30%">
<ftui-button fill="clear" (value)="du_Modus_Markise" states="FHEM"
[color]="du_Modus_Markise:state | map('FHEM:MediumSpringGreen')">
<ftui-icon class="size-2" path="../images/openautomation"
[name]="du_Modus_Markise:state | map('FHEM:fts_sunblind, .*:fts_sunblind')"
[color]="du_Modus_Markise:state | map('FHEM:MediumSpringGreen, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Fhem</ftui-label>
</ftui-column>
<ftui-column width="30%" color="green">
<ftui-button fill="clear" (value)="du_Modus_Markise" states="Aus"
[color]="du_Modus_Markise:state | map('Aus:yellow')">
<ftui-icon class="size-2" path="../images/openautomation"
[name]="du_Modus_Markise:state | map('Aus:time_manual_mode, .*:time_manual_mode')"
[color]="du_Modus_Markise:state | map('Aus:yellow, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Aus</ftui-label>
</ftui-column>
<ftui-column width="40%" color="dark">
<ftui-knob [(value)]="du_Temperatur_Markise" has-arc="2" type="scale" has-value-text="" value="5" min="17" max="30" offset-y="20" stroke-width="11" debounce="200" value-size="1.2em" unit-size="1.1em" has-scale="5" has-needle=""
[color]="du_Temperatur_Markise | map('17:lightgreen, 22:crimson')" unit="°C" start-angle="-210" end-angle="30" height="100" width="100">
</ftui-knob>
<ftui-label class="size-0" color="white">Temperatur</ftui-label>
</ftui-column>
</ftui-row>
</ftui-popup>
<!-- PopUp - Modus Markise - ENDE -->
Zitat von: torte am 21 Januar 2021, 14:03:00
Bei FTUI2 gabs in dem Zusammenhang mit (zb.)Ago data-refresh="xx" um nach xx Sekunden neu zu berechnen gibt es sowas auch schon?
@setstate
Dieses Feature hatte ich ja auch schon mal angemerkt. Ich habe mittlerweile ein wenig experimentiert und würde dieses Problem lösen können - momentan leider festverdrahtet. Ich weiss (noch) nicht, wie man in einer Komponente an die benötigte ReadingId herankommt? Mir ist bislang die notwendige Funktion bekannt, aber sowohl DEVICE als auch READING vollkommen unbekannt ...
Gibt es dafür einen gangbaren, allgemeinen Weg ?
ich habe mir das jetzt mal mit margin-top ein wenig hin gewurschtelt, aber evtl. fehlt ja da tatsächlich ne Anpassung...
so vielleicht
column: align-items="top"
knob: offset-y="10" height="80"
<ftui-column width="40%" color="dark" align-items="top">
<ftui-knob style="border: 1px solid red;" [(value)]="du_Temperatur_Markise" has-arc="2" type="scale" has-value-text="" value="5" min="17" max="30" offset-y="10" height="80" stroke-width="11" debounce="200" value-size="1.2em" unit-size="1.1em" has-scale="5" has-needle=""
[color]="du_Temperatur_Markise | map('17:lightgreen, 22:crimson')" unit="°C" start-angle="-210" end-angle="30" height="100" width="100">
</ftui-knob>
<ftui-label style="border: 1px solid red;" class="size-0" color="white">Temperatur</ftui-label>
</ftui-column>
Ja, so ein knob ist ein widerspenstiges Ding, aber mit offset-y bekommt man ihn einigermaßen gebändigt.
Apropos knob, schön fände ich, wenn man in der Mitte beliebige Werte anzeigen lassen könnte. ::)
Zitat von: setstate am 21 Januar 2021, 16:21:26
so vielleicht
column: align-items="top"
knob: offset-y="10" height="80"
das werde ich mir morgen auf jeden Fall mal in Ruhe anschauen, ich habe es nur kurz eingebaut und es sieht sehr gut aus... aber ich möchte auch verstehen was da umgesetzt wurde da ich einige Parameter von Knob noch gar nicht kenne.
Danke setstate
Zitat von: OdfFhem am 21 Januar 2021, 16:11:17
@setstate
Dieses Feature hatte ich ja auch schon mal angemerkt. Ich habe mittlerweile ein wenig experimentiert und würde dieses Problem lösen können - momentan leider festverdrahtet. Ich weiss (noch) nicht, wie man in einer Komponente an die benötigte ReadingId herankommt? Mir ist bislang die notwendige Funktion bekannt, aber sowohl DEVICE als auch READING vollkommen unbekannt ...
Gibt es dafür einen gangbaren, allgemeinen Weg ?
ja, das ist echt nicht sehr einfach.
Man muss die ReadingId zum Attribut aus den Bindings raussuchen und dann die alten Daten des Readings nochmal publizieren.
Läuft bei mir schon. Mache ich noch schick und lade es hoch.
Edit: ist jetzt drin:
interval="x" x in Sekunden
<ftui-grid-tile row="4" col="1" height="1" width="1">
<header>AUTO REFRESH</header>
<ftui-label
[text]="AussenTemp:temperature | toInt()"
unit="°C">
</ftui-label>
<ftui-label
[text]="AussenTemp:temperature:time | toDate() | ago() | timeFormat('mm:ss')"
[color]="AussenTemp:temperature:time | toDate() | ago() | timeFormat('%MMMMMM') | map('0: blue, 4: warning, 5: alert')"
unit=" min"
interval="10">
</ftui-label>
</ftui-grid-tile>
Zitat von: setstate am 20 Januar 2021, 10:27:34
ja, über style geht das.
https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent
Ich könnte ja versuchen, den Wert height des ftui-image auf den style anzuwenden, anstatt auf das height des img.
@setstate
Hast Du hier schonmal nachschauen können ob das umsetzbar ist?
Hallo setstate ich habe heute mal das neuste Update eingespielt und nun hat es mir ein wenig die Struktur zuerhauen, evtl. muss ich etwas anpassen oder es sind andere Fehler.
vielleicht habe ich Fehler gemacht beim erstellen..!!! aber es hat bis heute morgen funktioniert. ich weiß jetzt nicht wo ich ansetzen muss
Ich beschreibe es mal so, ich hatte bis gestern die ganzen popups ausgelagert in der Form
<ftui-tab-view id="View3">
<!-- PopUp - Modus & Zeiten Wohnzimmer - ausgelagert -->
<ftui-content file="content-popup-rollladen_wz.html"></ftui-content>
<!-- PopUp - Modus & Zeiten Schlafzimmer - ausgelagert -->
<ftui-content file="content-popup-rollladen_sz.html"></ftui-content>
<!-- PopUp - Modus & Zeiten Gästezimmer - ausgelagert -->
<ftui-content file="content-popup-rollladen_ga.html"></ftui-content>
<!-- PopUp - Modus & Zeiten Büro - ausgelagert -->
<ftui-content file="content-popup-rollladen_bu.html"></ftui-content>
<!-- PopUp - Modus & Zeiten Markise - ausgelagert -->
<ftui-content file="content-popup-markise.html"></ftui-content>
</ftui-tab-view>
Dei Popups selber hat es auch komplett zerhauen, vllt muss ich was ändern ich stelle mal ein Popup stellvertretend für alle hier ein. (screenshot
Die Zeiten in dem Popup bitte nicht beachten da habe ich noch keine Zuordnung zu Fhem, aber die Modusumstellungen für Fhem, Beschattung und Aus haben funktioniert, aber es hat mir das gesamte Layout nach oben und unten auseinander gezogen über die Popup Begrenzung hinaus und der Header ist komplett weg..
<!-- PopUp - Modus & Zeiten Schlafzimmer - START -->
<ftui-popup id="popup-modus_sz" timeout="40" width="500px" height="230px" shape="round">
<header class="size-2">=== Rollladen Modus & Zeiten Schlafzimmer ===</header>
<ftui-row height="5%"><ftui-label class="size-2" color="white"></ftui-label></ftui-row>
<ftui-row width="60%" height="40%">
<ftui-column align-items="top" width="33%">
<ftui-button fill="clear" (value)="du_RolloSZmodus" states="FHEM"
[color]="du_RolloSZmodus:state | map('FHEM:MediumSpringGreen')">
<ftui-icon class="size-1" path="../images/openautomation"
[name]="du_RolloSZmodus:state | map('FHEM:fts_shutter_automatic, .*:fts_shutter_automatic')"
[color]="du_RolloSZmodus:state | map('FHEM:MediumSpringGreen, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Fhem</ftui-label>
</ftui-column>
<ftui-column align-items="top" width="33%">
<ftui-button fill="clear" (value)="du_RolloSZmodus" states="Beschattung"
[color]="du_RolloSZmodus:state | map('Beschattung:royalblue1')">
<ftui-icon class="size-1" path="../images/openautomation"
[name]="du_RolloSZmodus:state | map('Beschattung:fts_shutter_down, .*:fts_shutter_down')"
[color]="du_RolloSZmodus:state | map('Beschattung:royalblue1, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Beschattung</ftui-label>
</ftui-column>
<ftui-column align-items="top" width="33%">
<ftui-button fill="clear" (value)="du_RolloSZmodus" states="Aus"
[color]="du_RolloSZmodus:state | map('Aus:yellow')">
<ftui-icon class="size-1" path="../images/openautomation"
[name]="du_RolloSZmodus:state | map('Aus:fts_shutter_manual, .*:fts_shutter_manual')"
[color]="du_RolloSZmodus:state | map('Aus:yellow, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Aus</ftui-label>
</ftui-column>
</ftui-row>
<ftui-column width="80%" height="25%">
<ftui-row color="darkblue" shape="round1">
<ftui-column width="40%">
<ftui-row>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch:Stunde"
(value)="add(1) | du_RolloZeitSZ_hoch:Stunde" states="$value">
<ftui-icon color="royalblue1" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-label class="size-2" color="white" [text]="du_RolloZeitSZ_hoch:Stunde"></ftui-label>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch:Stunde"
(value)="add(-1) | du_RolloZeitSZ_hoch:Stunde" states="$value">
<ftui-icon color="crimson" name="chevron-down"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
<ftui-column width="40%">
<ftui-row>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch:Minute"
(value)="add(5) | du_RolloZeitSZ_hoch:Minute" states="$value">
<ftui-icon color="royalblue1" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-label class="size-2" color="white" [text]="du_RolloZeitSZ_hoch:Minute"></ftui-label>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch:Minute"
(value)="add(-5) | du_RolloZeitSZ_hoch:Minute" states="$value">
<ftui-icon color="crimson" name="chevron-down"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-label class="size-2" color="MediumSpringGreen">Öffnen - WochenTag</ftui-label>
</ftui-row>
</ftui-column>
<ftui-row height="10%"><ftui-label class="size-2" color="white"></ftui-label></ftui-row>
<ftui-column width="80%" height="25%">
<ftui-row color="darkblue">
<ftui-column width="40%">
<ftui-row>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch_WoE:setreading"
(value)=""setreading:Stunde {$value-1}">
<ftui-icon color="royalblue1" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-label class="size-2" color="royalblue1" [text]="du_RolloZeitSZ_hoch_WoE:Stunde"></ftui-label>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white" (value)="set du_RolloZeitSZ_hoch_WoE ">
<ftui-icon color="crimson" name="chevron-down"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
<ftui-column width="40%">
<ftui-row>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white" (value)="set du_RolloZeitSZ_hoch_WoE Minute">
<ftui-icon color="royalblue1" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-label [text]="du_RolloZeitSZ_hoch_WoE:Minute"></ftui-label>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white" (value)="set du_RolloZeitSZ_hoch_WoE ">
<ftui-icon color="crimson" name="chevron-down"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-label class="size-2" color="MediumSpringGreen">Öffnen - WochenEnde</ftui-label>
</ftui-row>
</ftui-column>
<ftui-row height="5%"><ftui-label class="size-2" color="white"></ftui-label></ftui-row>
</ftui-popup>
<!-- PopUp - Modus & Zeiten Schlafzimmer - ENDE -->
Ich habe gestern Abend auch das Update gefahren.
Es liegt an den neuen width Anpssungen (vermutlich auch height).
Es ist jetzt so das 100% auch 100% sind und du nun die Breite entsprechen in den Spalten aufteilen musst.
Grüße
Olli
PS: So finde ich es aber nun richtig!
Wie kann ich mit FTUI3 einen Hyperlink generieren?
Der Link ist der Inhalt eines (user)reading eines Devices, die Beschreibung (Text) wäre aus einem anderen Reading. Wie könnte man das realisieren? label oder button?
Ok Olli, ich habe eigentlich überall die Prozente drin nur gerade bei den Popups noch nicht, das wollte ich noch ändern... nun muss ich es wohl ;)
Deshalb ist mein Markisen Popup auch in Ordnung, da habe ich schon Prozente drin... :D
EDIT:// obwohl beim Schalfzimmer habe ich auch schon Prozent drin und auch das ist auseinander gezogen.
Die Angaben jetzt auch in Prozent..?
<ftui-popup id="popup-modus_sz" timeout="40" width="500px" height="230px" shape="round">
Ohne width bzw. height wird der vorhandene Platz gleichmäßig ausgefüllt. Willst du eine Zeile oder Spalte etwas breiter/höher machen, braucht man auch nur dort eine Angabe zu machen. %, px oder em ist egal. Der Rest begnügt sich dann mit dem Rest des Platzes. Wenn noch weitere Vorhaben dazukommen, dürfen diese in Summe nicht über 100% kommen. Weniger ist mehr ...
Also muss ich um das richtig hinzubekommen erst einmal alle height und width raus nehmen und dann neu anpassen.?
Ja genau, besser hätte ich nicht sagen können.
OK so dachte ich es mir ;) gut dann mache ich das mal, war ja grad dabei die Popups anzupassen...
@setstate
das refresh-Attribut im ftui-label funktioniert einwandfrei - herzlichen Dank.
Ich habe aktuell noch zwei "Auffälligkeiten":
die class size-5 scheint fehlerhaft ... s. angehängtes Bild.
ich nutze gerne das shape-Attribut und zwar in der round-Variante. Nutze ich diese Form z.B. im ftui-grid-tile, dann wird die Form durch eine Farbänderung in ftui-row oder ftui-column zerstört ... s. die angehängten Bilder
ähnlicher Fall bei mir bei einigen Popup's Wetter und auch einige Kalender
Screenshot 1
<ftui-popup id="wetter_heute" width="750px" height="380px" timeout="20" position="top" shape="round">
und hier ein Kalender Screenshot und immer unten der Radius
ein Problem habe ich noch obwohl ich hier nichts an "height" eingestellt habe, dass die rechte Spalte anders ist, da weiß ich grad nichts zu, alle anderen Dinge habe ich hinbekommen. Liegt das evtl. an den Formatierungen vom Text (screenshot)
<!-- Temperaturen START -->
<ftui-grid-tile row="5" col="2" height="10" width="9" class="semitransparent3d">
<ftui-row class="size-2">
<ftui-column align-items="left" margin="1" width="60%">
<ftui-label text="Wohnzimmer"></ftui-label>
<ftui-label text="Küche"></ftui-label>
<ftui-label text="HWR"></ftui-label>
<ftui-label text="Gäste WC"></ftui-label>
<ftui-label text="Badezimmer"></ftui-label>
<ftui-label text="Schlafzimmer"></ftui-label>
<ftui-label text="Gästezimmer"></ftui-label>
<ftui-label text="Arbeitszimmer"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Garage"></ftui-label>
<ftui-label text="Eingang Norden"></ftui-label>
<ftui-label text="Terrasse Süden"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Helligkeit"></ftui-label>
<ftui-label text="Luftdruck"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="20%">
<ftui-label [text]="Temperatur_Wohnzimmer:temperature"
[color]="Temperatur_Wohnzimmer:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:temperature"
[color]="Temperatur_Kueche:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature"
[color]="Temperatur_HWR_Xiaomi:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature"
[color]="Temperatur_GWC_Xiaomi:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp | fix(1)"
[color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:temperature"
[color]="Temperatur_Schlafzimmer:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature"
[color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature"
[color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:temperature"
[color]="Temperatur_Garage:temperature | map('-73:SteelBlue, 0:MediumBlue, 10:Orange1, 15:Danger, 24:Crimson ')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:temperature"
[color]="Temperatur_Norden:temperature | map('-73:SteelBlue, 0:MediumBlue, 10:Orange1, 15:Danger, 24:Crimson ')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:temperature"
[color]="Temperatur_Terrasse:temperature | map('-73:SteelBlue, 0:MediumBlue, 10:Orange1, 15:Danger, 24:Crimson ')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="BWM_Terrasse:brightness | fix(0)"><span slot="end" style="margin-left:0.3em;" class="size-0">Lux</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)"
[color]="Temperatur_Terrasse:pressure | map(' 1015:Crimson, 1005:MediumSpringGreen, 0:MediumBlue')"><span slot="end" style="margin-left:0.3em;" class="size-0">hPa</span></ftui-label>
</ftui-column>
<ftui-column align-items="center" width="20%">
<ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)"
[color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)"
[color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)"
[color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)"
[color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)"
[color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:humidity | fix(0)"
[color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0:MediumSpringGreen')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:humidity | fix(0)"
[color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0:MediumSpringGreen')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)"
[color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0:MediumSpringGreen')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<!-- Temperaturen ENDE -->
EDIT:// ich denke ich baue das ganze Gebilde um auf <row> mit jeweils 3 <column> die ich dann mit height und width anpasse... Hab das mal mit einer Reihe gemacht das sieht gut aus.
Zitat von: OdfFhem am 22 Januar 2021, 17:59:03
@setstate
das refresh-Attribut im ftui-label funktioniert einwandfrei - herzlichen Dank.
Ich habe aktuell noch zwei "Auffälligkeiten":
die class size-5 scheint fehlerhaft ... s. angehängtes Bild.
ich nutze gerne das shape-Attribut und zwar in der round-Variante. Nutze ich diese Form z.B. im ftui-grid-tile, dann wird die Form durch eine Farbänderung in ftui-row oder ftui-column zerstört ... s. die angehängten Bilder
Danke, ist beides jetzt gefixed.
Zitat von: setstate am 22 Januar 2021, 21:59:14
Danke, ist beides jetzt gefixed.
@setstate nur zur Info
ich habe das Update mal herunter geladen, habe aber nach wie vor bei zwei Kalendern das unten die Ecken nicht abgerundet sind... und auch bei den Wetter Popups.
Da sind es alle, heißt der header oben hat einen Radius aber das Popup unten nicht.
beim popup geht es jetzt auch
Zitat von: yersinia am 22 Januar 2021, 15:38:49
Wie kann ich mit FTUI3 einen Hyperlink generieren?
Der Link ist der Inhalt eines (user)reading eines Devices, die Beschreibung (Text) wäre aus einem anderen Reading. Wie könnte man das realisieren? label oder button?
solange es noch kein
ftui-link gibt, kann man
<a> benutzen.
Mit dem Dekorator
ftui-binding kann man bei beliebigen HTML Elementen deren Attribute mit FHEM-Readings koppeln.
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon">
<ftui-label [text]="AgroWeather:fc0_weather00Icon"></ftui-label>
</a>
target="_blank" scheint nicht zu funktionieren. Workaround:
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon" onclick="window.open(this.href,'_blank');return false;">Wettericon</a>
Zitat von: setstate am 23 Januar 2021, 13:15:34
Mit dem Dekorator ftui-binding kann man bei beliebigen HTML Elementen deren Attribute mit FHEM-Readings koppeln.
Moin setstate,
vielen Dank für den tollen Hinweis, damit konnte ich auch mein Problem mit <ftui-image> und den % Angaben für height oder width lösen.
Zitat von: setstate am 20 Januar 2021, 10:27:34
ja, über style geht das.
https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent
Ich könnte ja versuchen, den Wert height des ftui-image auf den style anzuwenden, anstatt auf das height des img.
So geht es dann mit % werten für ein Image aus einem Reading...
<img ftui-binding [src]="System_Unwetterzentrale:Warn_0_IconURL" style="width:65%;"></img>
Grüße
Olli
Zitat von: setstate am 23 Januar 2021, 13:15:34solange es noch kein ftui-link gibt, kann man <a> benutzen.
Mit dem Dekorator ftui-binding kann man bei beliebigen HTML Elementen deren Attribute mit FHEM-Readings koppeln.
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon" onclick="window.open(this.href,'_blank');return false;">Wettericon</a>
Danke, funktioniert. Dann benötigt man eigtl auch
<ftui-link> mMn nicht.
@setstate
Ist es möglich eine Aktion in FHEM (set...) auszuführen wenn ein Popup beim timeout sich automatisch schließt?
Zitat von: octek0815 am 23 Januar 2021, 15:58:39
@setstate
Ist es möglich eine Aktion in FHEM (set...) auszuführen wenn ein Popup beim timeout sich automatisch schließt?
8) jetzt ja:
<ftui-popup id="pop5" shape="round" @close="sendFhem('set dummy1 on')">
<header>Popup 5</header>
<ftui-row>
<ftui-column shape="round" color="light">light</ftui-column>
<ftui-column shape="round" color="medium">medium</ftui-column>
<ftui-column shape="round" color="dark">dark</ftui-column>
</ftui-row>
</ftui-popup>
Zitat von: setstate am 23 Januar 2021, 19:22:40
<ftui-popup id="pop5" shape="round" @close="sendFhem('set dummy1 on')">
Das funktioniert perfekt, vielen dank nochmal für die schnelle Umsetzung!
Hallo setstate
Habe heute ein Update gemacht und festgestellt, dass das Circle-Menu nicht mehr bediendar ist, da es nicht mehr im Vordergrund der umliegenden Kacheln angezeigt wird. Gut sichtbar ist es auf auf der Example-Site: https://knowthelist.github.io/ftui/www/ftui/examples/circlemenu.html
Danke und viele Grüsse Eppi
Zitat von: octek0815 am 24 Januar 2021, 07:30:35
Das funktioniert perfekt, vielen dank nochmal für die schnelle Umsetzung!
Interessante Funktion die du dir gewünscht hast :)
Was hast du damit vor?
Grüsse
Zitat von: eppi am 24 Januar 2021, 10:20:13
Hallo setstate
Habe heute ein Update gemacht und festgestellt, dass das Circle-Menu nicht mehr bediendar ist, da es nicht mehr im Vordergrund der umliegenden Kacheln angezeigt wird. Gut sichtbar ist es auf auf der Example-Site: https://knowthelist.github.io/ftui/www/ftui/examples/circlemenu.html
Danke und viele Grüsse Eppi
oh oooh, das liegt am overflow: hidden für grid-tile, um shape=round nicht durch die Inhalte zu überdecken.
Beides, Circlemenu und overflow: hidden, unter einen Hut zu bringen, ist nicht einfach, ohne größeren Umbau.
Zitat von: SirMarco am 24 Januar 2021, 10:39:55
Interessante Funktion die du dir gewünscht hast :)
Was hast du damit vor?
Grüsse
Moin,
ich steuere damit ob der Stream meiner IP-Cam aktiv zu meinem Tablet an oder aus ist.
Heir meine Konfiguration:
Popup mit IP-Cam Stream öffnen und aktivieren
<ftui-column>
<ftui-button (value)="set System_IPcam_Haustuer_URL http://10.20.8.99:8765/picture/1/frame/" states='' fill="clear">
<ftui-icon style="font-size:1em;" name="_security_camera" popup-target="popup-ipcam-haustuer" color="white"></ftui-icon>
</ftui-button>
</ftui-column>
Hier dann die Popup Konfig...
<ftui-popup id="popup-ipcam-haustuer" timeout="60" [open]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:true, off:false')" width="86.5%" height="91.5%" @close="sendFhem('set System_IPcam_Haustuer_URL http://10.20.8.248:8084/fhem/ftui/_leer.html; set System_FTUI_IPcam_Haustuer_PopUp_Anzeigen off')">
<header class="_size-3vh">Kamera Haustür</header>
<ftui-label slot="close" class="_header-close-style" popup-close>×</ftui-label>
<iframe ftui-binding [src]="System_IPcam_Haustuer_URL:state" style="overflow:hidden; border:0; width:100%; height:100%;"></iframe>
</ftui-popup>
Und dann noch der FHEM Dummy...
defmod System_IPcam_Haustuer_URL dummy
attr System_IPcam_Haustuer_URL room System
setstate System_IPcam_Haustuer_URL http://10.20.8.248:8084/fhem/ftui/_leer.html
Und der Inhalt der _leer.html
<!DOCTYPE html>
<html>
<body>
<img src="http://10.20.8.248:8084/fhem/ftui/images/no_cam.png"></img>
</body>
</html>
Das Image no_cam.png ist ein 1 Pixel großes png.
Und somit verursacht das Popup der IP-Cam nicht ständig last im Hintergrund.
Quelle ist im Übrigen motionEye, um RTSP Streams nutzen zu können.
Ursprünglich wollte ich das mit <ftui-image> lösen, aber da ich in meine Konfig. alles auf 100% Angaben umgestellt habe (für unterschiedliche Screengrößen) und <ftui-image> damit nicht umgehen kann, habe ich das jetzt so
gelöst.
VG
Olli
Hallo,
ich habe mir mit einem Slider eine Fortschrittsanzeige für meinen Squeezeboxplayer gebastelt:
<ftui-slider (max)="bz.yamaha_air:duration"
[(value)]="bz.yamaha_air:currentTrackPosition" handle="none">
</ftui-slider>
In "duration" und "currentTrackPosition" befindet sich die Zeit in Sekunden.
Jetzt ist es aber so, daß der Slider wohl als max-Wert immer 100 an nimmt und damit natürlich viel zu früh am Ende ist.
Mache ich was falsch oder ist das ein Bug?
gm
@grossmaggul
Ich nutze u.a. folgenden Code für die Fortschrittsanzeige und diese läuft auch nach dem (gestrigen) Update wie gewünscht. Der max-Wert schwankt, aber ist in der Regel sehr deutlich über 100 und wird auch entsprechend angezeigt (s. has-ruler) ... die relative Anzeige scheint zu passen ...
<ftui-slider [max]="LS_Buero:currentTrackDurationSec"
[value]="LS_Buero:currentTrackPositionSimulatedSec" handle="none" has-ruler>
</ftui-slider>
Ja, so geht's, ich war mir eigentlich sicher, daß ich das schon probiert hatte. :o
Erst einmal danke für die tolle Weiterentwicklung zur Version 3.
Ich habe mal eine Frage, die nur am Rande etwas mit FTUI 3 selbst zu tun hat. Mich würde mal interessieren, wie ihr die Dateien editiert. Macht ihr das in dafür spezialisierte (Quelltext) Editoren (welche) und übertragt die Dateien dann auf den FHEM-Server oder macht ihr das direkt auf dem Server und ändert dort die Dateien direkt?
Vielleicht stelle ich mich einfach nur zu umständlich an. Meine Vorgehensweise ist derzeit direkt auf dem Server mit MC, finde das aber wenig komfortabel und suche nach Verbesserungspotential. Hat jemand einen Vorschlag für mich, wie ich das optimieren kann?
Gruß und schönes Restwochenende
eurofinder
weitere Formatierungs Frage
Ich habe zwei Button mit denen ich Popups bediene linker Button in der index.html (nicht ausgelagert) rechts Button mit ausgelagert also nicht in der index vorhanden.
Der Button rutscht komplett an den linken Rand sollte default nicht immer "center" sein..?
Es ist auch nicht möglich den button mit align-items="center" in die Mitte zu bekommen. Muss ich etwas beachten oder ist das ein Formatierungsfehler.?
Habe es erst einmal ohne auslagern gemacht..
Hatte den Screenshot vergessen
@eurofinder
ich habe die gleiche Struktur auf meinem PC wie auf dem Server, ich editiere die Datei immer lokal und schiebe sie dann mit FTP rüber
@eurofinder
Ich habe die fhem Installation per nfs eingebunden und kann dann so darauf zugreifen, als würde die Datei auf dem Rechner liegen.
@eurofinder
Ich habe in der Regel via Samba den gewünschten Serverpfad freigegeben und kann dann auf jedem geeigneten Endgerät editieren - quasi "lokal".
Zitat von: eurofinder am 24 Januar 2021, 14:39:34
Erst einmal danke für die tolle Weiterentwicklung zur Version 3.
Ich habe mal eine Frage, die nur am Rande etwas mit FTUI 3 selbst zu tun hat. Mich würde mal interessieren, wie ihr die Dateien editiert. Macht ihr das in dafür spezialisierte (Quelltext) Editoren (welche) und übertragt die Dateien dann auf den FHEM-Server oder macht ihr das direkt auf dem Server und ändert dort die Dateien direkt?
Vielleicht stelle ich mich einfach nur zu umständlich an. Meine Vorgehensweise ist derzeit direkt auf dem Server mit MC, finde das aber wenig komfortabel und suche nach Verbesserungspotential. Hat jemand einen Vorschlag für mich, wie ich das optimieren kann?
Gruß und schönes Restwochenende
eurofinder
Ich habe das FHEM Verzeichnis als Samba Share freigeben und dieses dann am Mac eingebunden (Finder > Go > connect to server). Im Visual Studio Code editiert man somit die Files damit direkt. Beim Speichern sind sie sofort im FHEM aktualisiert. VS Code hat auch gute Plugins für ES Linter, Formatter usw.
Hallo,
seit einigen Tagen versuche ich mich auch mit der neue FTUI Version. Echt sehr cool 8)
Auf meiner ersten ganz eifachen Oberfläche soll u.a. von meinem Internetradio der aktuelle Titel angezeigt werden.
Hier habe ich nun ein Problem mit der Aktualität der Anzeige. Das Device wirft genau ein Event, wenn der Titel wechselt. Auf der FTUI-Oberfläche tut sich meist erst einige Titel später wieder etwas. longpoll steht bei mir auf websocket und ich habe auch mal den Wert 1 versucht, was aber keinen Unterschied im Verhalten zeigt.
Ich habe mir das Ganze auch mal mit FTUI 2 angeschaut. Mir ist aufgefallen, dass der Titel dort auch erst nach einem automatischen "Full-Refresh" von FTUI erfolgt. Warum eigentlich?
Dann dachte mir, dass ich in FTUI 3 mal "interval" aus folgendem Post ausprobieren könnte:
Zitat von: setstate am 22 Januar 2021, 08:27:01
Edit: ist jetzt drin: interval="x" x in Sekunden
<ftui-grid-tile row="4" col="1" height="1" width="1">
<header>AUTO REFRESH</header>
<ftui-label
[text]="AussenTemp:temperature | toInt()"
unit="°C">
</ftui-label>
<ftui-label
[text]="AussenTemp:temperature:time | toDate() | ago() | timeFormat('mm:ss')"
[color]="AussenTemp:temperature:time | toDate() | ago() | timeFormat('%MMMMMM') | map('0: blue, 4: warning, 5: alert')"
unit=" min"
interval="10">
</ftui-label>
</ftui-grid-tile>
Wenn ich das mit dem Reading und dem Readinalter wie im Beispiel versuche, bekomme ich tatsächlich alle 10 Sekunden das Alter hochgezählt. Seltsamerweise wir dann auch das Alter weitergezählt, obwohl sich das Reading bereits auf den nächsten gespielten Titel des Radios umgestellt hat und das Reading einen neuen Zeitstempel erhalten hat. Die Anzeige des Titels bleibt auch alt.
interval ganz ohne Alter des Reading, sozusagen einfach nur mit der Textanzeige bewirkt auch keinerlei Änderung.
Hier mein kleiner Codeschnipsel:
<ftui-label class="size-11" [text]="MedionRadioLAN:infoText" [hidden]="MedionRadioLAN:currentTitle | map('ROCK ANTENNE.*:true, .*:false')" interval="10"></ftui-label>
<ftui-label class="size-11" [text]="MedionRadioLAN:infoText | part('(.*)gerade läuft:(.*)--- demnächst:.*')" [hidden]="MedionRadioLAN:currentTitle | map('ROCK ANTENNE.*:false, .*:true')" interval="10"></ftui-label>
<ftui-label class="size-9" [text]="MedionRadioLAN:infoText | part('.*demnächst:(.*)')" [hidden]="MedionRadioLAN:currentTitle | map('ROCK ANTENNE.*:false, .*:true')" interval="10"></ftui-label>
Sollte interval nicht alle 10 Sekunden das Reading neu lesen oder verstehe ich hier etwas grundsätzlich falsch?
Viele Grüße
Dieter
@RockFan
das finde ich sehr interessant, würde ich doch glatt bei mir auch einbauen... da du den gleichen Sender hörst wie ich täglich ;) :D
Mach doch mal im fhem den Eventviewer auf, ob überhaupt ein Event dazu vom device/Reading kommt.
Zitat von: setstate am 24 Januar 2021, 15:14:47
Mach doch mal im fhem den Eventviewer auf, ob überhaupt ein Event dazu vom device/Reading kommt.
Ja, Events kommen. Aktuelles Beispiel:
2021-01-24 15:33:55 SIRD MedionRadioLAN infoText: Homepage: www.rockantenne.de --- demnächst: Brunhilde - Where Are You Going
2021-01-24 15:37:25 SIRD MedionRadioLAN infoText: Euer direkter Draht ins Studio: 08000 - 804000 --- demnächst: Bring Me The Horizon - Teardrops
2021-01-24 15:37:34 SIRD MedionRadioLAN infoText: gerade läuft: Bring Me The Horizon - Teardrops --- demnächst: Die Kassierer - Das Schlimmste Ist, Wenn Das Bier Alle Ist
Zitat von: RockFan am 24 Januar 2021, 15:11:21
Sollte interval nicht alle 10 Sekunden das Reading neu lesen oder verstehe ich hier etwas grundsätzlich falsch?
Viele Grüße
Dieter
Nein, damit werden nur die lokal vorhanden Daten (value, timestamp) nochmal an die Komponenten geschickt, damit die Zeitdifferenz neu berechnet werden kann. Neue Daten kommen nur per Websocket oder aller 15min per jsonlisr2 Aufruf. Ich würde in den Entwicklungertools des Browsers nachsehen, ob das Device/Reading mit in dem Websocketaufruf gelistet ist und ob websocktsevents reinkommen
@moonsorrox, grossmaggul, OdfFhem und setstate:
Danke für die Rückmeldungen. Ich werde mal die verschiedenen Varianten probieren, welche für mich am praktikabelsten ist - tendenziell favorisiere ich die Freigabe per NFS oder Samba. Das transferieren per ftp wollte ich ja umgehen:-)
Gruß und weiterhin frohes Schaffen. Man liest sich
eurofinder
Zitat von: eurofinder am 24 Januar 2021, 14:39:34
Erst einmal danke für die tolle Weiterentwicklung zur Version 3.
Ich habe mal eine Frage, die nur am Rande etwas mit FTUI 3 selbst zu tun hat. Mich würde mal interessieren, wie ihr die Dateien editiert. Macht ihr das in dafür spezialisierte (Quelltext) Editoren (welche) und übertragt die Dateien dann auf den FHEM-Server oder macht ihr das direkt auf dem Server und ändert dort die Dateien direkt?
Vielleicht stelle ich mich einfach nur zu umständlich an. Meine Vorgehensweise ist derzeit direkt auf dem Server mit MC, finde das aber wenig komfortabel und suche nach Verbesserungspotential. Hat jemand einen Vorschlag für mich, wie ich das optimieren kann?
Gruß und schönes Restwochenende
eurofinder
Mit Filezilla via sftp und dann mit Notepad++ direkt Editieren.
Zitat von: setstate am 24 Januar 2021, 16:04:32
Nein, damit werden nur die lokal vorhanden Daten (value, timestamp) nochmal an die Komponenten geschickt, damit die Zeitdifferenz neu berechnet werden kann. Neue Daten kommen nur per Websocket oder aller 15min per jsonlisr2 Aufruf. Ich würde in den Entwicklungertools des Browsers nachsehen, ob das Device/Reading mit in dem Websocketaufruf gelistet ist und ob websocktsevents reinkommen
Verstehe die Aussage bzgl interval!
Mit Browserentwicklertools bin ich jetzt nicht so fit. Das Verhalten ist auf allen Browsern (Firefox, Chrome auf meinem PC und Fully auf dem Tablet) identisch.
Meinst du sowas:
ftui.helper.js:101 websockets URL=wss://raspberrypi4:8083/fhem/?XHR=1&inform=type=status;filter=gt_Temperatur,Buderus,Lifetab_klein_alt,MedionRadioLAN,Winamp, temperature OutdoorTemp batteryPercent currentTitle infoText CurrentTitle state powerPlugged;since=1611501919873;fmt=JSON×tamp=1611502091815
...
fhem.service.js:243 WebSocket connection to 'wss://raspberrypi4:8083/fhem/?XHR=1&inform=type=status;filter=gt_Temperatur,Buderus,Lifetab_klein_alt,MedionRadioLAN,Winamp,%20temperature%20OutdoorTemp%20batteryPercent%20currentTitle%20infoText%20CurrentTitle%20state%20powerPlugged;since=1611501919873;fmt=JSON×tamp=1611502091815' failed: Invalid frame header
connect @ fhem.service.js:243
(anonymous) @ fhem.service.js:288
ftui.helper.js:101 Error with fhem connection
ftui.helper.js:101 websocket (url=wss://raspberrypi4:8083/fhem/?XHR=1&inform=type=status;filter=gt_Temperatur,Buderus,Lifetab_klein_alt,MedionRadioLAN,Winamp,%20temperature%20OutdoorTemp%20batteryPercent%20currentTitle%20infoText%20CurrentTitle%20state%20powerPlugged;since=1611501919873;fmt=JSON×tamp=1611502091815) closed! reason=The connection was closed abnormally, e.g., without sending or receiving a Close control frame
...
ftui.helper.js:101 websockets URL=wss://raspberrypi4:8083/fhem/?XHR=1&inform=type=status;filter=gt_Temperatur,Buderus,Lifetab_klein_alt,MedionRadioLAN,Winamp, temperature OutdoorTemp batteryPercent currentTitle infoText CurrentTitle state powerPlugged;since=1611502091925;fmt=JSON×tamp=1611502277965
ftui.helper.js:101 ftui-clock-1 - attributeChangedCallback name=text, oldValue=16:31:17, newValue=16:31:18
FhemService.updateReadingItem - update for MedionRadioLAN-infoText newData= undefined doPublish= true
FhemService.updateReadingItem - update for MedionRadioLAN-infoText newData= undefined doPublish= true
FhemService.updateReadingItem - update for MedionRadioLAN-infoText newData= undefined doPublish= true
ftui-clock-1 - attributeChangedCallback name=text, oldValue=16:31:18, newValue=16:31:19
WebSocket connection to 'wss://raspberrypi4:8083/fhem/?XHR=1&inform=type=status;filter=gt_Temperatur,Buderus,Lifetab_klein_alt,MedionRadioLAN,Winamp,%20temperature%20OutdoorTemp%20batteryPercent%20currentTitle%20infoText%20CurrentTitle%20state%20powerPlugged;since=1611502091925;fmt=JSON×tamp=1611502277965' failed: Invalid frame header
connect @
(anonymous) @
Error with fhem connection
websocket (url=wss://raspberrypi4:8083/fhem/?XHR=1&inform=type=status;filter=gt_Temperatur,Buderus,Lifetab_klein_alt,MedionRadioLAN,Winamp,%20temperature%20OutdoorTemp%20batteryPercent%20currentTitle%20infoText%20CurrentTitle%20state%20powerPlugged;since=1611502091925;fmt=JSON×tamp=1611502277965) closed! reason=The connection was closed abnormally, e.g., without sending or receiving a Close control frame
Mir fällt hier immer wieder "Error with fhem connection" auf.
@setstate
Tests in den letzten Tagen haben einige Anregungen/Ungereimtheiten zu Tage gefördert:
***
In ftui.css fehlt der Klasse faded ein Punkt ... "faded {" sollte zu ".faded {" werden.
***
Ich nutze gerne das img-Tag - unter FTUI3 würde ich natürlich lieber ftui-image und seine aktuellen/zukünftigen Möglichkeiten verwenden. Das Aufgeben der Komponenten-css-Datei hat aber dazu geführt, dass scheinbar keinerlei Definitionen mehr aus der eigenen css-Datei bzw. ftui.css angewendet werden können (ein Beispiel wäre .faded). Nimmt man das style-Tag aus der js-Datei der Komponente heraus, funktioniert es wieder - ist dies ein gewolltes Verhalten?
Bei Type- bzw. Attribut-Selektoren bzgl. des innerhalb der Komponente verwendeten img-Tags hat man scheinbar wenig bis gar keine Chance; bei grid-tile z.B. funktioniert dies aber aktuell problemlos ... ??? ...
***
Grundsätzlich scheint das popup-Target ja quasi überall eingesetzt werden zu können, allerdings fehlt bei fast allen Einsatzfällen die pointer-Optik. Wäre es ein Problem, die zugehörige Klasse allgemein bereitzustellen?
***
Wäre es möglich, für die genaue/gewünschte Positionierung eines Popups das top- sowie left-Attribut verfügbar zu machen?
***
Die angebotenen Formen via shape sind schön und ich nutze diese gerne.
Bei der popup-Komponente würde ich - zumindest teilweise - auch gerne die circle-Form verwenden. Anpassen der Komponenten-Datei führt direkt zum Ziel, eigene css-Erweiterungen leider nicht. Könnte diese Form für die popup-Komponente nachgerüstet werden? (header und close können meiner Meinung nach für diese "Spezial"-Form ignoriert werden)
Neben den vorhandenen Formen habe ich auch weitere Formen in meiner eigenen css-Datei ergänzt. Diese können z.B. für die grid-tile-Tags ohne weitere Eingriffe verwendet werden - sehr praktisch.
Es handelt sich dabei um den kreisförmigen grid-tile und um die grid-tile-"Zungen", deren Ankerpunkt eckiges Aussehen hat und in der Rundform endet (s. Testbild mit konstruiertem Beispiel). Die "Zungen" werden fast ausschließlich am äußeren Rand genutzt und stellen am Ankerpunkt quasi einen Titel bereit. Ich bin mir nicht sicher, ob eigene css-Definitionen langfristig überleben können - qualifizieren sich solche Formen für den allgemeinen Einsatz?
***
Das interval-Attribut bzgl. ftui-label setze ich bei allen fraglichen Readings ein. Bei der "Langzeitbeobachtung" ist aufgefallen, dass beim Eintreffen neuer Daten das Intervall nicht zurückgesetzt wird - das alte, angefangene Intervall läuft einfach weiter. Ist jetzt nicht dramatisch, aber die Aussagekraft leidet doch ein wenig.
Beträgt das Intervall z.B. 1 Stunde, dann wird jede Stunde geprüft. Die Oberfläche wird gestartet und das Intervall beginnt quasi mit dem Eintreffen der ersten Daten. Neue Daten kommen zufällig nach z.B. 15 Minuten, dann wird die erste Überschreitung des Stundenintervalls erst nach 1,75 Stunden festgestellt.
Daher wäre ein reset schön, aber ob (so einfach) machbar? Alternativlösung wäre vermutlich ansonsten eine deutliche Verkürzung des Intervalls.
***
Zitat von: OdfFhem am 24 Januar 2021, 17:28:41
@setstate
Tests in den letzten Tagen haben einige Anregungen/Ungereimtheiten zu Tage gefördert:
***
In ftui.css fehlt der Klasse faded ein Punkt ... "faded {" sollte zu ".faded {" werden.
--> fixed
***
Ich nutze gerne das img-Tag - unter FTUI3 würde ich natürlich lieber ftui-image und seine aktuellen/zukünftigen Möglichkeiten verwenden. Das Aufgeben der Komponenten-css-Datei hat aber dazu geführt, dass scheinbar keinerlei Definitionen mehr aus der eigenen css-Datei bzw. ftui.css angewendet werden können (ein Beispiel wäre .faded). Nimmt man das style-Tag aus der js-Datei der Komponente heraus, funktioniert es wieder - ist dies ein gewolltes Verhalten?
Bei Type- bzw. Attribut-Selektoren bzgl. des innerhalb der Komponente verwendeten img-Tags hat man scheinbar wenig bis gar keine Chance; bei grid-tile z.B. funktioniert dies aber aktuell problemlos ... ??? ...
--> fixed
***
Grundsätzlich scheint das popup-Target ja quasi überall eingesetzt werden zu können, allerdings fehlt bei fast allen Einsatzfällen die pointer-Optik. Wäre es ein Problem, die zugehörige Klasse allgemein bereitzustellen?
--> fixed
***
Wäre es möglich, für die genaue/gewünschte Positionierung eines Popups das top- sowie left-Attribut verfügbar zu machen?
--> done
***
Die angebotenen Formen via shape sind schön und ich nutze diese gerne.
Bei der popup-Komponente würde ich - zumindest teilweise - auch gerne die circle-Form verwenden. Anpassen der Komponenten-Datei führt direkt zum Ziel, eigene css-Erweiterungen leider nicht. Könnte diese Form für die popup-Komponente nachgerüstet werden? (header und close können meiner Meinung nach für diese "Spezial"-Form ignoriert werden)
Neben den vorhandenen Formen habe ich auch weitere Formen in meiner eigenen css-Datei ergänzt. Diese können z.B. für die grid-tile-Tags ohne weitere Eingriffe verwendet werden - sehr praktisch.
Es handelt sich dabei um den kreisförmigen grid-tile und um die grid-tile-"Zungen", deren Ankerpunkt eckiges Aussehen hat und in der Rundform endet (s. Testbild mit konstruiertem Beispiel). Die "Zungen" werden fast ausschließlich am äußeren Rand genutzt und stellen am Ankerpunkt quasi einen Titel bereit. Ich bin mir nicht sicher, ob eigene css-Definitionen langfristig überleben können - qualifizieren sich solche Formen für den allgemeinen Einsatz?
--> schaue ich mir noch an
***
Das interval-Attribut bzgl. ftui-label setze ich bei allen fraglichen Readings ein. Bei der "Langzeitbeobachtung" ist aufgefallen, dass beim Eintreffen neuer Daten das Intervall nicht zurückgesetzt wird - das alte, angefangene Intervall läuft einfach weiter. Ist jetzt nicht dramatisch, aber die Aussagekraft leidet doch ein wenig.
Beträgt das Intervall z.B. 1 Stunde, dann wird jede Stunde geprüft. Die Oberfläche wird gestartet und das Intervall beginnt quasi mit dem Eintreffen der ersten Daten. Neue Daten kommen zufällig nach z.B. 15 Minuten, dann wird die erste Überschreitung des Stundenintervalls erst nach 1,75 Stunden festgestellt.
Daher wäre ein reset schön, aber ob (so einfach) machbar? Alternativlösung wäre vermutlich ansonsten eine deutliche Verkürzung des Intervalls.
--> fixed
***
Zitat von: octek0815 am 24 Januar 2021, 11:49:01
Ursprünglich wollte ich das mit <ftui-image> lösen, aber da ich in meine Konfig. alles auf % Angaben umgestellt habe (für unterschiedliche Screengrößen) und <ftui-image> damit nicht umgehen kann, habe
Mit dem neuen Update von setstate ist das nun obsolet, da nun auch style Angaben mit <ftui-image> funktionieren und diese mit interval nur aktualisiert werden, wenn im sichtbaren Bereich.
@setsate: Danke hierfür!
Hallo,
ich hab noch ein Problem mit <ftui-content> wie kann man es schaffen das ftui-content keinen Platz verbraucht wenn das eingeladene Element hidden ist?
Ich könnte das hidden auch an <ftui-content> hängen aber dann muss ich es doppelt machen, oder gibt es dort einen Trick?
Danke
Grüße
Torte
Zitat von: eurofinder am 24 Januar 2021, 14:39:34Mich würde mal interessieren, wie ihr die Dateien editiert.
vim (https://de.wikibooks.org/wiki/Vi-Befehlsreferenz:_Bearbeitung) direkt in der shell. ;D
Zitat von: moonsorrox am 24 Januar 2021, 14:41:47Es ist auch nicht möglich den button mit align-items="center" in die Mitte zu bekommen. Muss ich etwas beachten oder ist das ein Formatierungsfehler.?
Wo setzt du das align-items? align-items (https://www.w3schools.com/CSSref/css3_pr_align-items.asp) wirkt sich auf die Kinder aus. Eventuell hilft es, sich das mal per CSS Inspektor anzusehen.
Zitat von: torte am 25 Januar 2021, 10:11:05Ich könnte das hidden auch an <ftui-content> hängen aber dann muss ich es doppelt machen, oder gibt es dort einen Trick?
Wieso doppelt? Vererbt sich das hidden nicht auf die Kindelemente?
Zitat von: yersinia am 25 Januar 2021, 10:25:04
vim (https://de.wikibooks.org/wiki/Vi-Befehlsreferenz:_Bearbeitung) direkt in der shell. ;D
Danke, dachte schon ich bin das letzte Relikt einer aussterbenden Art. 8)
Nutze auch vi in der Shell.
Gruß
Eisix
Zitat von: yersinia am 25 Januar 2021, 10:25:04
Wieso doppelt? Vererbt sich das hidden nicht auf die Kindelemente?
mh, ja weil ich das device auch in dem content file nutze welches auch für hidden Ausschlaggebend ist.
index.html
<ftui-content file="content/content_system_door_status.html" device="device" devicename="tuer" reading="state" displayicon="circle"></ftui-content>
content_system_door_status.html
<ftui-view-section [hidden]="{{device}}:{{reading}} | map('close:true, open:false')" class="size-2">
<ftui-view-item>
<ftui-row class="size-2">
<ftui-column align-items="left" width="10%">
<ftui-icon class="size-0" name="{{displayicon}}" [color]="{{device}}:{{reading}} | map('`close`:green, .*:danger')"></ftui-icon></ftui-tab>
</ftui-column>
<ftui-column align-items="left" width="60%" >
<ftui-label class="size-p65" text="{{devicename}}"></ftui-label>
</ftui-column>
<ftui-column align-items="left" width="30%">
<ftui-label class="size-p65" [text]="{{device}}:{{reading}}:time | toDate() | ago() | timeFormat('mmmmmm minutes')" interval="60"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-view-item>
</ftui-view-section>
Das hidden müsste eigentlich auch in dem FTUI Content angegeben werden aber wie bekomme ich das dann in content_system_door_status.html genutzt? Klar kann ich das mit in der Zeile des FTUI Content eintragen aber dann ist ja doppelt einmal so wie oben und dann noch mal als Attribut hinter hidden
Hoffe du verstehst wie ich das meine.
Grüße
Torte
Zitat von: Eisix am 25 Januar 2021, 10:38:42
Danke, dachte schon ich bin das letzte Relikt einer aussterbenden Art. 8)
Nutze auch vi in der Shell.
Vor allem, vi[m] ist auf fast jedem Linux/Unix-System zu finden und optimal fürs schnelle Edit von irgendwelchen Dateien in der shell, insb. via ssh.
Ich dachte, es ginge so:
<ftui-content file="content/content_system_door_status.html" device="device" devicename="tuer" reading="state" displayicon="circle" [hidden]="device:state | map('close:true, open:false')"></ftui-content>Also das <ftui-content> auf hidden setzen.
Zitat von: yersinia am 25 Januar 2021, 10:44:01
Ich dachte, es ginge so:
<ftui-content file="content/content_system_door_status.html" device="device" devicename="tuer" reading="state" displayicon="circle" [hidden]="device:state | map('close:true, open:false')"></ftui-content>
Also das <ftui-content> auf hidden setzen.
Ja so geht es klar, ist doch aber doof, weil ich zweimal das device und angeben muss. 8)
<ftui-content file="content/content_system_door_status.html" device="device" devicename="tuer" reading="state" displayicon="circle" [hidden]="device:state | map('close:true, open:false')"></ftui-content>
ZitatVor allem, vi[m] ist auf fast jedem Linux/Unix-System zu finden und optimal fürs schnelle Edit von irgendwelchen Dateien in der shell, insb. via ssh.
Das ist schon richtig, trotzdem editiere ich größere Texte doch lieber mit Brackets auf dem Mac, da habe ich Syntax Highlighting direkt verfügbar und muß mir nicht tausend Shortcuts merken.;)
Hab was gebastelt für homestatus. Geht bestimmt schöner wenn sich jemand damit auskennt :o :P
<ftui-column>
<ftui-row align-items="top" width="100%" height="70%">
<ftui-column align-items="top" width="90%" class="homebox">
<ftui-row>
<ftui-button fill="" (value)="set rgr_Residents" states="gotosleep" [class-name]="rgr_Residents:state | map('home:homebuttons, gotosleep:homebuttonsok, absent:homebuttons, gone:homebuttons')">
<ftui-icon class="size-3" name="bed" color="mywhite"></ftui-icon>
</ftui-button>
<ftui-button fill="" (value)="set rgr_Residents" states="absent" [class-name]="rgr_Residents:state | map('home:homebuttons, gotosleep:homebuttons, absent:homebuttonsok, gone:homebuttons')">
<ftui-icon class="size-4 my-top-10" name="car" color="mywhite"></ftui-icon>
</ftui-button>
<ftui-button fill="" (value)="set rgr_Residents" states="gone" [class-name]="rgr_Residents:state | map('home:homebuttons, gotosleep:homebuttons, absent:homebuttons, gone:homebuttonsok')">
<ftui-icon class="size-1" name="suitcase" color="mywhite"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row>
<ftui-button fill="" (value)="set rgr_Residents" states="home" [class-name]="rgr_Residents:state | map('home:homebuttonok, gotosleep:homebutton, absent:homebutton, gone:homebutton')">
<ftui-icon class="size-3" name="home1"
color="mywhite"
></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<ftui-row fixed-bottom">
<ftui-image
src="../images/Minion-Hello-icon.png"
width="45px" height="45px"
[class-name]="rr_User5:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
src="../images/Minion-Girl-icon.png"
width="45px" height="45px"
[class-name]="rr_User4:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
src="../images/Minion-Kungfu-icon.png"
width="45px" height="45px"
[class-name]="rr_User3:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
src="../images/Minion-Dancing-icon.png"
width="45px" height="45px"
[class-name]="rr_User1:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
src="../images/Minion-Amazed-icon.png"
width="45px" height="45px"
[class-name]="rr_User2:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
</ftui-row>
</ftui-column>
custom.css
ftui-column.homebox {
width: 90%;
height: 100px;
border: 5px solid green;
padding: 0px;
border-radius: 10px 10px 10px 10px;
}
ftui-button.homebuttons {
width: 100%;
float: left;
border-right: 3px solid green;
border-left: 3px solid green;
}
ftui-button.homebuttonsok {
width: 100%;
float: left;
border-right: 3px solid green;
border-left: 3px solid green;
background-color: green;
}
ftui-button.homebutton {
width: 100%;
float: left;
height: 60px;
border-right: 3px solid green;
border-left: 3px solid green;
}
ftui-button.homebuttonok {
width: 100%;
float: left;
height: 60px;
border-right: 3px solid green;
border-left: 3px solid green;
background-color: green;
}
.myimage {
opacity: 0.3;
}
Vielleicht kanns jemand brauchen oder teilt was besseres.
Gruß
Eisix
Zitat von: moonsorrox am 24 Januar 2021, 14:41:47
weitere Formatierungs Frage
Ich habe zwei Button mit denen ich Popups bediene linker Button in der index.html (nicht ausgelagert) rechts Button mit ausgelagert also nicht in der index vorhanden.
Der Button rutscht komplett an den linken Rand sollte default nicht immer "center" sein..?
Klappt bei mir mit folgender ausgelagerter Definition:
ftui-column>
<ftui-icon name="trash-o"
[name]="Abfall:next | map('Biotonne_.*:trash-o, Gartenabfaelle_.*:trash-o, GelberSack_.*:glass, Altapier_.*:trash-o, Restmuell_.*:trash-o, Sondermuell_.*:recycle')" popup-target="popup-abfall"
[color]="Abfall:next | map('Biotonne_.*:green, Gartenabfaelle_.*:green, GelberSack_.*:yellow, Altpapier_.*:blue, Restmuell_.*:gray, Sondermuell_.*:danger')">
</ftui-icon>
<ftui-badge color="danger" [text]="Abfall:next_days"></ftui-badge>
<ftui-label [text]="Abfall:next | replace(/_./g, '')"></ftui-label>
</ftui-column>
ja danke für die Antwort, ich habe es jetzt auch schon komplett ohne alles drin... warum das nicht ging weiß ich jetzt auch nicht.
Icon ist mittig sollte eigentlich default center sein.
Tipp:
man kann sich eigene Pipe-Functions für häufig genutzte Anwendungen anlegen.
Direkt im HTML per Script-Tag oder in einem user.js Files
<script >
const minusBlue = () => input => Number(input) < 0 ? 'blue' : null;
</script>
Immer wenn der Wert unter 0 ist, dann Farbe das Labels in blau. Wenn man das häufig braucht, spart man sich viele gleiche, lange map().
<ftui-label [text]="AgroWeather:fc0_tempMin" [color]="AgroWeather:fc0_tempMin | minusBlue()" size="4" unit="°C"></ftui-label>
Wenn ich bei ftui-weather type="png" angebe, wird trotzdem das svg-icon gesucht. Was mache ich da falsch?
<ftui-weather class="size-4" icon-set="kleinklima" provider="proplanta" type="png" [condition]="Wetterext:fc1_weatherDay"></ftui-weather>
Zitat von: khk123 am 26 Januar 2021, 20:21:19
Wenn ich bei ftui-weather type="png" angebe, wird trotzdem das svg-icon gesucht. Was mache ich da falsch?
<ftui-weather class="size-4" icon-set="kleinklima" provider="proplanta" type="png" [condition]="Wetterext:fc1_weatherDay"></ftui-weather>
type greift bei weather nicht. Die Icon-Name wird komplett im weather.map.js festgelegt.
Hab jetzt die Definitionen in weather.map.js auf ,,png" geändert. Es wäre aber schön, wenn type hier auch ziehen würde, denn nach dem nächsten Update ist meine Änderung wahrscheinlich wieder obsolet.
Ich bin gerade dabei meine alte Version auf FTUI3 umzubauen. Tolles Framework!
Ist denn vorgesehen Schleifen (FOR, WHILE) und Bedingungen (IF ELSE, CASE) einzubauen?
Zitat von: setstate am 26 Januar 2021, 20:09:26Direkt im HTML per Script-Tag oder in einem user.js Files
Coole Sache, nur findet die ftui.helper.js diese nicht wenn via script direkt im HTML eingebunden; die Konsole sagt:
ReferenceError: minusBlue is not defined ftui.helper.js:107:17Über extener, eigener JS eingebunden funktioniert es.
Zitat von: Mano am 27 Januar 2021, 08:48:53
Ich bin gerade dabei meine alte Version auf FTUI3 umzubauen. Tolles Framework!
Ist denn vorgesehen Schleifen (FOR, WHILE) und Bedingungen (IF ELSE, CASE) einzubauen?
Bis jetzt beinhaltet FTUI3 keine Render-Engine, die komplette Templates parsed und zyklisch oder eventbasiert den DOM neu rendert.
Es werden nur Attribute ausgelesen und der Dom einmalig beim Kreieren der Componenten erweitert.
Vielleicht wird es dann mal mit FTUI4 geben 8)
Also nein, Schleifen und Bedingungen wird es in absehbarer Zeit nicht geben.
Zitat von: yersinia am 27 Januar 2021, 09:21:54
Coole Sache, nur findet die ftui.helper.js diese nicht wenn via script direkt im HTML eingebunden; die Konsole sagt:
ReferenceError: minusBlue is not defined ftui.helper.js:107:17
Über extener, eigener JS eingebunden funktioniert es.
Kann ich nicht nachvollziehen. Ein <Script> funktioniert bei mir überall im HTML. Achtung: <Script> nicht in ein mit ftui-content nachgeladenes File schreiben. Das wird ignoriert. Nur ins Main-HTML.
Zitat von: setstate am 27 Januar 2021, 12:11:49Achtung: <Script> nicht in ein mit ftui-content nachgeladenes File schreiben. Das wird ignoriert. Nur ins Main-HTML.
Das ist der entscheidende Hinweis. Das erklärt auch, warum es bei mir nicht funktioniert - ich habe den Inhalt über ftui-content geladen. Dann geht diesbezgl. nur über mainHTML.
Zitat von: Eisix am 24 November 2020, 21:32:41
Hallo grossmaggul,
Anrufliste habe ich fertig, hängt dran.
Gruß
Eisix
In der Anrufliste waren noch ein paar Tippfehler. Daher hatte das Mapping der Icons bei mir nicht funktioniert. Außerdem habe ich die letzten fünf Anrufe aufgelistet und die Anordnung verändert. Vielliecht kann es ja jemand gebrauchen. Screenshot und Definitionen hängen dran.
meine Telefonliste sieht exakt genauso aus... blöd das er die Icons nicht komplett in Farbe macht... denn das finde ich nicht so toll, hatte versucht auch die Icons Online zu bearbeiten aber das hat nicht funktioniert mit dem Link hie raus dem Thread...
@setstate
Anfang der Woche war leider nur wenig Zeit - heute konnte ich mich dann aber wieder ein wenig mehr mit FTUI3 beschäftigen. Nachträglich noch mal vielen Dank für die Klärung der meisten Punkte ...
***
css-Klassen können bei ftui-image jetzt auf jeden Fall angewendet werden. Aufgefallen dabei ist mir noch, dass quasi idente Klassen für img und ftui-image zu einem anderen Ergebnis führen können. Ich nutze z.B. die border-Funktionalität und erhalte dabei das unten angehängte Ergebnis (ftui-image in der oberen Zeile ; img in der unteren Zeile): reines img macht was es soll, ftui-image positioniert das Bild im bereitgestellten Rahmen "falsch".
img { border: 3px solid #ddd; }
.image { border: 3px solid #ddd; }
***
Die "neuen" pipe-Möglichkeiten sind bei vielen Dingen anwendbar - Deine const-Umstellung habe ich noch gut im Hinterkopf; hoffentlich finden bei der breiteren Anwendung noch etliche Allgemeinfunktionen ihren Weg zur Basis ...
***
Die Rückgabe der m2-Variante im dateFromString (z.Zt. Zeile 169) scheint noch mit dem ermittelten offset beeinflusst werden zu müssen. Ich übergebe z.B. die epoch 1611954000, erhalte dann aber nicht das Date für meine Zeitzone, sondern für GMT.
--> GMT: Friday, January 29, 2021 9:00:00 PM
--> eigene Zeitzone: Friday, January 29, 2021 10:00:00 PM GMT+01:00
***
Das hidden-Attribute bzgl. ftui-column sorgt für das erwartete Ergebnis. Bei ftui-row hat es scheinbar keinerlei Auswirkung - display:none ist zwar vorhanden, aber der Platz ist trotzdem verbraucht. Ist dies korrekt?
***
ftui-knob habe ich um ein desired-Attribut erweitert, damit man bei einem Thermostat das eigentliche Ziel sichtbar machen kann. Meine Frage wäre, ob dies nicht eine allgemeine Erweiterung wäre ... (s. angehängtes Bild)
***
Da ich doch reichlich Readings mit einer kompletten URL-Angabe für Icons verwende, habe ich ftui-icon um ein url-Attribut erweitert. Scheint mir auch von allgemeinem Interesse ...
===
Für die Erweiterungen - sofern notwendig bzw. gewünscht - würde ich auch einen PR bereitstellen ...
Zitat von: moonsorrox am 27 Januar 2021, 14:16:06
meine Telefonliste sieht exakt genauso aus... blöd das er die Icons nicht komplett in Farbe macht... denn das finde ich nicht so toll, hatte versucht auch die Icons Online zu bearbeiten aber das hat nicht funktioniert mit dem Link hie raus dem Thread...
Hab meine Telefonliste noch etwas angepasst. Da die Icons nich völlig eingefärbt wurden, habe ich die Icons entsprechen gefärbt und bei meinen Icons abgelegt. Telefonliste und Icons sind angehängt. Vielleicht braucht es jemand.
Edit: Oops, falsche Bild angehängt. Kommt gleich noch.
Hier das richtige Bild.
Moin setstate,
gestern Abend gesehen das du nun eine "swiper" Komponente gebaut hast, sieht im übrigen schick aus.
Gibt es ein Parameter für ein Autoscroll, z.B. in Sekunden?
Grüße
Olli
Es gibt noch keine Parameter. Muss ich erst noch alles einbauen. Autoscroll wird es auch geben.
DEMO (https://knowthelist.github.io/ftui/www/ftui/examples/swiper.html)
Hallo,
hatte gestern auch den swiper kurz getestet. Ist es auch möglich Icons einzubinden wie in meinem Anhang? Hat mir bei einem schnellen Test alles zerschossen.
Gruß
Eisix
Hallo,
ich hab so ein ähnliches Problem wie moonsorrox ende des Jahres schon.
Zitat von: moonsorrox am 28 Dezember 2020, 13:27:03
Meine Probleme nochmal mit der Anzeige der Geräte ganz oben, das sich mehrere dann zusammen schieben, aber umso weniger es werden teilen sie sich den Platz und rutschen nicht nach oben. Siehe Screenshot
Ich hatte es eingetragen mit "align-items="top" height="10%"
Hab mir ein Content File gemacht für Türen und Fenster. Seit dem ich Hidden mit eingebaut habe schieben sich die Elemente nicht mehr nach oben. Jemand einen Idee warum das so ist?
Content File
<ftui-row align-items="top" class="size-0" [hidden]="{{device}}:state | map('close:true, open:false')">
<ftui-column align-items="left" width="10%" >
<ftui-icon class="size-0" name="{{displayicon}}" [color]="{{device}}:{{reading}} | map('`open`:blue,`off`:green,`close`:green,`open_warning`:red,`tilted`:blue,`tilted_warning`:orange, .*:danger')" ></ftui-icon>
</ftui-column>
<ftui-column align-items="left" width="60%" >
<ftui-label class="size-0" text="{{devicename}}" ></ftui-label>
</ftui-column>
<ftui-column align-items="left" width="30%" >
<ftui-label class="size-0" [text]="{{device}}:state:time | toDate() | ago() | timeFormat('h:mm Min')" interval="60" ></ftui-label>
</ftui-column>
</ftui-row>
Grüße
Torte
Zitat von: torte am 28 Januar 2021, 17:24:15
Hallo,
ich hab so ein ähnliches Problem wie moonsorrox ende des Jahres schon.
Hab mir ein Content File gemacht für Türen und Fenster. Seit dem ich Hidden mit eingebaut habe schieben sich die Elemente nicht mehr nach oben. Jemand einen Idee warum das so ist?
Content File
<ftui-row align-items="top" class="size-0" [hidden]="{{device}}:state | map('close:true, open:false')">
<ftui-column align-items="left" width="10%" >
<ftui-icon class="size-0" name="{{displayicon}}" [color]="{{device}}:{{reading}} | map('`open`:blue,`off`:green,`close`:green,`open_warning`:red,`tilted`:blue,`tilted_warning`:orange, .*:danger')" ></ftui-icon>
</ftui-column>
<ftui-column align-items="left" width="60%" >
<ftui-label class="size-0" text="{{devicename}}" ></ftui-label>
</ftui-column>
<ftui-column align-items="left" width="30%" >
<ftui-label class="size-0" [text]="{{device}}:state:time | toDate() | ago() | timeFormat('h:mm Min')" interval="60" ></ftui-label>
</ftui-column>
</ftui-row>
Grüße
Torte
align-items="top" ist im ftui-row. Also werden alle Kinder in row hochgezogen (anstatt mittig). Die Kinder sind die ftui-column. Die haben 100% Höhe.
Was soll da hochgezogen werden? Wenn du den Columns 50% Höhe geben würdest, könnte man sehen, wie sie hochgezogen werden. Oder 10%
hi setstate
ich glaube das hier fehlt um zu verstehen was ich gebastelt habe
<ftui-grid-tile row="1" col="14" height="4" width="3" shape="normal">
<header>Türen und Fenster</header>
<ftui-content device="tuer2" devicename="Küche" reading="eventState" displayicon="circle" align-items="top" class="size-0" width="100%" height="10%" file="content/content_system_door_status.html"></ftui-content>
<ftui-content device="tuer1" devicename="Dachfenster" reading="state" displayicon="circle" [hidden]="tuer1:state | map('close:true, open:false')"align-items="top" class="size-0 no-content" width="100%" height="70%" file="content/content_system_door_status.html" ></ftui-content>
<...>
Hab die height jetzt mal auf 20% in der Column gesetzt bleibt aber so. Wenn ich in der Row das hidden wegnehme ist alles schön untereinander.
Der Abstand zwischen den Element wird immer größer je mehr ftui-content man nutzt.
Grüße
Torte
Hallo Zusammen,
gibt es eine Möglichkeit ein popup-target von einem DIV aus zu setzen?
Ich möchte eine Anzeige mit Icons und Knob basteln welches readonly ist und sobald ich auf den Bereich drücke, das Popup aufgeht.
VG, Thomas
Zitat von: torte am 28 Januar 2021, 19:46:28
hi setstate
ich glaube das hier fehlt um zu verstehen was ich gebastelt habe
<ftui-grid-tile row="1" col="14" height="4" width="3" shape="normal">
<header>Türen und Fenster</header>
<ftui-content device="tuer2" devicename="Küche" reading="eventState" displayicon="circle" align-items="top" class="size-0" width="100%" height="10%" file="content/content_system_door_status.html"></ftui-content>
<ftui-content device="tuer1" devicename="Dachfenster" reading="state" displayicon="circle" [hidden]="tuer1:state | map('close:true, open:false')"align-items="top" class="size-0 no-content" width="100%" height="70%" file="content/content_system_door_status.html" ></ftui-content>
<...>
Hab die height jetzt mal auf 20% in der Column gesetzt bleibt aber so. Wenn ich in der Row das hidden wegnehme ist alles schön untereinander.
Der Abstand zwischen den Element wird immer größer je mehr ftui-content man nutzt.
Grüße
Torte
Okay, jetzt ist mir deine Absicht klarer.
Ich würde folgendes setzen:
<ftui-grid-tile align-items="top" ...
<ftui-content height="3em" [hidden]="....Grid-Tile zieht seine Kinder nach oben.
Feste Höhe der Kinder, damit sich diese nicht durch den freiwerdende Raum auseinander ziehen.
Hidden auf die Kinder direkt, nicht innerhalb. Sonst verbleiben die leeren ftui-content Container stehen.
Ich habe noch etwas angepasst. align-items="top" bei ftui-grid-tile gibt es nur nach einem Update
Zitat von: Eisix am 28 Januar 2021, 11:41:31
Hallo,
hatte gestern auch den swiper kurz getestet. Ist es auch möglich Icons einzubinden wie in meinem Anhang? Hat mir bei einem schnellen Test alles zerschossen.
Gruß
Eisix
ja, habe ich gerade so probiert
<ftui-swiper>
<ftui-icon name="washing-machine" size="6"></ftui-icon>
<ftui-icon name="garage-variant" size="6"></ftui-icon>
<ftui-icon name="car-battery" size="6"></ftui-icon>
<ftui-icon name="mower" size="6"></ftui-icon>
<ftui-icon name="projector" size="6"></ftui-icon>
</ftui-swiper>
Zitat von: setstate am 28 Januar 2021, 23:26:51
Okay, jetzt ist mir deine Absicht klarer.
Ich würde folgendes setzen:
<ftui-grid-tile align-items="top" ...
<ftui-content height="3em" [hidden]="....
Grid-Tile zieht seine Kinder nach oben.
Feste Höhe der Kinder, damit sich diese nicht durch den freiwerdende Raum auseinander ziehen.
Hidden auf die Kinder direkt, nicht innerhalb. Sonst verbleiben die leeren ftui-content Container stehen.
Ich habe noch etwas angepasst. align-items="top" bei ftui-grid-tile gibt es nur nach einem Update
DANKE!!! :D
Funktioniert jetzt.
Grüße
Torte
Zitat von: setstate am 28 Januar 2021, 23:40:05
ja, habe ich gerade so probiert
<ftui-swiper>
<ftui-icon name="washing-machine" size="6"></ftui-icon>
<ftui-icon name="garage-variant" size="6"></ftui-icon>
<ftui-icon name="car-battery" size="6"></ftui-icon>
<ftui-icon name="mower" size="6"></ftui-icon>
<ftui-icon name="projector" size="6"></ftui-icon>
</ftui-swiper>
Hallo setstate,
das funktioniert, aber das ist nicht was ich erreichen wollte. Mein screenshot war zu klein um zu verdeutlichen was ich meine. Anstatt des schmalen swiper Balkens wollte ich die Icons zur Auswahl setzen. Mache das momentan mit einem Dummy und hide.
Gruß
Eisix
Nein, ein Selektor oder Parameter zum Steuern gibt es noch nicht.
Zitat von: setstate am 28 Januar 2021, 23:26:51
Ich habe noch etwas angepasst. align-items="top" bei ftui-grid-tile gibt es nur nach einem Update
Bei mir hat das neue Update alles zerhauen, stimmt da was noch nicht?
Anbei vorher - Nachher Beispiele...
dto, das commit (https://github.com/knowthelist/ftui/commit/285958a097cfd1f6b10269f4c67271363bdf82fe) lässt meine index.html leer anzeigen, der html-code wird geladen aber die tiles sind nicht sichtbar.
Bei mir ist alles bestens nach dem update.
Zitat von: octek0815 am 29 Januar 2021, 10:37:38
Bei mir hat das neue Update alles zerhauen, stimmt da was noch nicht?
Anbei vorher - Nachher Beispiele...
Oh je da werde ich mal nicht updaten.... hatte ja letztens auch ein Dinge anzupassen
Hallo octek0815,
hast du eine height gesetzt für den ftui-Content?
so sieht das zb bei mir aus:
<ftui-content device="tuer1" devicename="Balkon vorne" reading="eventState" displayicon="circle" [hidden]="tuer1:state | map('close:true, open:false')" align-items="top" height="8%" file="content/content_system_door_status.html"></ftui-content>
Kann ich die Backgound-Farbe eines grid-tile headers ändern?
Zitat von: khk123 am 29 Januar 2021, 14:35:31
Kann ich die Backgound-Farbe eines grid-tile headers ändern?
Habe ich auch gemacht in der user-ftui.css
hier
--grid-header-background-color: var(--DarkBlue);
Zitat von: moonsorrox am 29 Januar 2021, 14:51:06
Habe ich auch gemacht in der user-ftui.css
hier --grid-header-background-color: var(--DarkBlue);
Dank für die schnelle Antwort. Hab es mir fast gedacht. Allerding wirkt die Änderung dann generell. Ich möchte nur einen einzelnen, ganz bestimmten Header anders einfärben.
Zitat von: khk123 am 29 Januar 2021, 15:01:45Allerding wirkt die Änderung dann generell. Ich möchte nur einen einzelnen, ganz bestimmten Header anders einfärben.
Entweder einen eigenen Selektor als Kopie des header-selektor erstellen und über custom CSS einbinden oder inline-CSS benutzen:
<header style="background-color: var(--DarkBlue);">TEXT</header>
Zitat von: khk123 am 29 Januar 2021, 15:01:45
Dank für die schnelle Antwort. Hab es mir fast gedacht. Allerding wirkt die Änderung dann generell. Ich möchte nur einen einzelnen, ganz bestimmten Header anders einfärben.
du kannst auch das so erstellen und dann über ID aufrufen, so habe ich ein einzelnes Popup z.B. für den Mond durchsichtig gestaltet. Da kannst du all die Dinge die du verändern möchtest eintragen.
#popup-moon {
--popup-background-color: translucent;
--popup-header-color: translucent;
--popup-header-background-color: translucent;
}
Zitat von: torte am 29 Januar 2021, 12:54:00
Hallo octek0815,
hast du eine height gesetzt für den ftui-Content?
so sieht das zb bei mir aus:
<ftui-content device="tuer1" devicename="Balkon vorne" reading="eventState" displayicon="circle" [hidden]="tuer1:state | map('close:true, open:false')" align-items="top" height="8%" file="content/content_system_door_status.html"></ftui-content>
Egal was ich mache, es funktioniert nicht mehr. Hier ein Beispiel der vorher funktionierte...
Aufruf aus der index.html:
<ftui-grid-tile row="6" col="1" height="30" width="19">
<ftui-row>
<ftui-content file="./_contents/tablet-flur/content-home-temp-feuchte.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
...und der der Content:
<ftui-column class="_size-standard" style="margin-top:5%; margin-bottom:5%; line-height:75%;" height="92.5%">
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Bad oben"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:humidity"
[color]="Badezimmer_OG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Bad unten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:humidity"
[color]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Büro"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Arbeitszimmer_OG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Arbeitszimmer_OG_Wandthermostat_Climate:humidity"
[color]="Arbeitszimmer_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Dean"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kinderzimmer2_OG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kinderzimmer2_OG_Wandthermostat_Climate:humidity"
[color]="Kinderzimmer2_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Flur oben"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Flur_OG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Flur_OG_TempRH_Sensor:humidity"
[color]="Flur_OG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Flur unten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Flur_EG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Flur_EG_TempRH_Sensor:humidity"
[color]="Flur_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Fynn"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kinderzimmer1_OG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kinderzimmer1_OG_Wandthermostat_Climate:humidity"
[color]="Kinderzimmer1_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="HWR1"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR1_EG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="HWR1_EG_TempRH_Sensor:humidity"
[color]="HWR1_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="HWR2"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR2_EG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="HWR2_EG_TempRH_Sensor:humidity"
[color]="HWR2_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Küche"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kueche_EG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kueche_EG_TempRH_Sensor:humidity"
[color]="Kueche_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Schlafzimmer"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Schlafzimmer_EG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Schlafzimmer_EG_Wandthermostat_Climate:humidity"
[color]="Schlafzimmer_EG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Wohnzimmer"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Wohnzimmer_EG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Wohnzimmer_EG_Wandthermostat_Climate:humidity"
[color]="Wohnzimmer_EG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="2%" class="size-0"> </ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Garage"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Garage_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Garage_TempRH_Sensor:humidity"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Garten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Garten_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Garten_TempRH_Sensor:humidity"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Terrasse"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Terrasse_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Terrasse_TempRH_Sensor:humidity"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="2%" class="size-0"> </ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Gefrierschrank"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR2_EG_Gefrierschrank_Temp_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Kühlschrank HWR2"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [hidden]="HWR2_EG_Steckdose_Kuehlschrank:state | map('off:true, on:false')"
[text]="HWR2_EG_Kuehlschrank_Temp_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span>
</ftui-label>
<ftui-label [hidden]="HWR2_EG_Steckdose_Kuehlschrank:state | map('on:true, off:false')"
[text]="HWR2_EG_Steckdose_Kuehlschrank:state | map('off: AUS, on:')">
</ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Kühlschrank Küche"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kueche_EG_Kuehlschrank_Temp_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
</ftui-column>
Bin erstmal zurückgerollt und hoffe auf Antwort von setstate.
Zitat von: yersinia am 29 Januar 2021, 15:05:45
Entweder einen eigenen Selektor als Kopie des header-selektor erstellen und über custom CSS einbinden oder inline-CSS benutzen:
Prima. Das war es. Danke!
<header style="background-color: var(--secondary-color);">TEXT</header>
Zitat von: octek0815 am 29 Januar 2021, 15:23:01
Egal was ich mache, es funktioniert nicht mehr. Hier ein Beispiel der vorher funktionierte...
...
Bin erstmal zurückgerollt und hoffe auf Antwort von setstate.
Oooorr Nö, bei den ganzen User-Classes und Inline-Styles weigere ich mich, das anzuschauen. Das sind mir zu viele Unbekannte und "Verbiegungen"
Sorry 8)
Mir hat es auch einiges zerhauen einmal links unter Temperaturen ist alles aueinander gerutscht und besonders hat es mir die Fenster zerrissen in denen Bilder drin sind, eigentlich alle Fenster mit Bilder drin, ich stelle die mal jetzt nicht alle rein auf dem Screenshot ist es rechts an den Tankstellen Bildern zu sehen.
Kann es sein, dass die geschweiften Klammern (L68 (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/cell/cell.component.js#L68) & L71 (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/cell/cell.component.js#L71)) in der cell.component.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/cell/cell.component.js) möglicherweise unnötig, gar falsch, sind? Sieht irgendwie komisch aus.
Müssten zudem die Attribut-Selektoren in der grid-tile.component.css (https://github.com/knowthelist/ftui/commit/285958a097cfd1f6b10269f4c67271363bdf82fe#diff-ba7321dc427b7fc75266a5f3de3901c4044cbe55d1aaa059e357b046f23daf7d) nicht eher so aussehen (https://www.w3schools.com/css/css_attribute_selectors.asp) (Attributwert in Anführungszeichen):
:host([align-items~="top"]) .content { justify-content: flex-start; }
:host([align-items~="bottom"]) .content { justify-content: flex-end; }
:host([align-items~="left"]) .content { align-items: flex-start; }
:host([align-items~="right"]) .content { align-items: flex-end; }
:host([align-items~="center"]) .content { justify-content: center; }
:host([align-items~="stretch"]) .content { justify-content: space-between; }
:host([align-items~="around"]) .content { justify-content: space-around; }dto für row.component.css (https://github.com/knowthelist/ftui/commit/285958a097cfd1f6b10269f4c67271363bdf82fe#diff-794b8b6552f52ba54e6f0e57b34c949f9a66c9e4ae5929ba550b6f93074167cb):
:host([align-items~="top"]) {
align-items: flex-start;
}
:host([align-items~="bottom"]) {
align-items: flex-end;
}
:host([align-items~="left"]) {
justify-content: flex-start;
}
:host([align-items~="right"]) {
justify-content: flex-end;
}& cell.component.css (https://github.com/knowthelist/ftui/commit/285958a097cfd1f6b10269f4c67271363bdf82fe#diff-d88458751cd18fdbb9703ac40e8d562e91a3f174aad98db681143216ecf8b6f1):
:host(:not(ftui-row)[align-items~="top"]) { justify-content: flex-start; }
:host(:not(ftui-row)[align-items~="bottom"]) { justify-content: flex-end; }
:host(:not(ftui-row)[align-items~="left"]) { align-items: flex-start; }
:host(:not(ftui-row)[align-items~="right"]) { align-items: flex-end; }
:host([align-items~="center"]) { justify-content: center; }
:host([align-items~="stretch"]) { justify-content: space-between; }
:host([align-items~="around"]) { justify-content: space-around; }Ich frag' fürn Freund. 8)
Zitat von: setstate am 29 Januar 2021, 16:30:06Oooorr Nö, bei den ganzen User-Classes und Inline-Styles weigere ich mich, das anzuschauen. Das sind mir zu viele Unbekannte und "Verbiegungen"
Mmh, ich nutze ungefähr diese Struktur, ohne inline bzw user_custom CSS:
<body>
<ftui-grid base-width="317" base-height="262" margin="1">
<!-- Tile1 -->
<ftui-grid-tile row="1" col="1" height="1" width="1">
<ftui-content file="tile.html"></ftui-content>
</ftui-grid-tile>
<!-- Tile2 -->
<ftui-grid-tile row="1" col="2" height="1" width="2">
<ftui-content file="tile2.html"></ftui-content>
</ftui-grid-tile>
</ftui-grid>
</body>Und in den Tiles dann
<ftui-grid base-width="317" base-height="262" margin="1">
<ftui-grid-tile row="1" col="1" height="1" width="1">
<!-- CONTENT -->
</ftui-grid-tile>
</ftui-grid>Und genau das wird mit dem letzten commit von gestern Abend nicht mehr angezeigt.
Bis auf die Temperatur Leiste betrifft es bei mir alle Bilder egal wo drin ob im Gridtile oder im Popup, entweder sind sie zu groß oder gar kleiner geworden, ich habe es mal anhand von einem Bild probiert, ich bekomme es gar nicht kleiner bei meinem Mondbild steht width="40" drin egal was ich eintrage es bleibt riesig.
Weiterhin sind Kamera bilder willkürlich größer oder sogar kleiner in einem Popup geworden.
Zitat von: setstate am 29 Januar 2021, 16:30:06
Oooorr Nö, bei den ganzen User-Classes und Inline-Styles weigere ich mich, das anzuschauen. Das sind mir zu viele Unbekannte und "Verbiegungen"
Sorry 8)
Kann ich durchaus nachvollziehen, aber hier mal das Ganze nativ ohne User-Gedöns und es ist irgendwas faul.
<ftui-column class="size-7" height="92.5%">
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Bad oben"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:humidity"
[color]="Badezimmer_OG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Bad unten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:humidity"
[color]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Büro"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Arbeitszimmer_OG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Arbeitszimmer_OG_Wandthermostat_Climate:humidity"
[color]="Arbeitszimmer_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Dean"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kinderzimmer2_OG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kinderzimmer2_OG_Wandthermostat_Climate:humidity"
[color]="Kinderzimmer2_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Flur oben"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Flur_OG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Flur_OG_TempRH_Sensor:humidity"
[color]="Flur_OG_TempRH_Sensor:humidity | map('64: white, 65: danger')"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Flur unten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Flur_EG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Flur_EG_TempRH_Sensor:humidity"
[color]="Flur_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Fynn"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kinderzimmer1_OG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kinderzimmer1_OG_Wandthermostat_Climate:humidity"
[color]="Kinderzimmer1_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="HWR1"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR1_EG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="HWR1_EG_TempRH_Sensor:humidity"
[color]="HWR1_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="HWR2"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR2_EG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="HWR2_EG_TempRH_Sensor:humidity"
[color]="HWR2_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Küche"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kueche_EG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kueche_EG_TempRH_Sensor:humidity"
[color]="Kueche_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Schlafzimmer"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Schlafzimmer_EG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Schlafzimmer_EG_Wandthermostat_Climate:humidity"
[color]="Schlafzimmer_EG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Wohnzimmer"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Wohnzimmer_EG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Wohnzimmer_EG_Wandthermostat_Climate:humidity"
[color]="Wohnzimmer_EG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="2%" class="size-0"> </ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Garage"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Garage_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Garage_TempRH_Sensor:humidity"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Garten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Garten_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Garten_TempRH_Sensor:humidity"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Terrasse"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Terrasse_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Terrasse_TempRH_Sensor:humidity"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="2%" class="size-0"> </ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Gefrierschrank"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR2_EG_Gefrierschrank_Temp_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Kühlschrank HWR2"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [hidden]="HWR2_EG_Steckdose_Kuehlschrank:state | map('off:true, on:false')"
[text]="HWR2_EG_Kuehlschrank_Temp_Sensor:temperature | fix(1)">
</ftui-label>
<ftui-label [hidden]="HWR2_EG_Steckdose_Kuehlschrank:state | map('on:true, off:false')"
[text]="HWR2_EG_Steckdose_Kuehlschrank:state | map('off: AUS, on:')">
</ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Kühlschrank Küche"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kueche_EG_Kuehlschrank_Temp_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-column>
Anbei nochmal Bilder vor dem Update mit dem obigen Code und nach dem Update.
bei mir mal das Beispiel vom Mond die Größe habe ich hinbekommen jetzt mit Prozentangaben, aber ohne etwas formatiert zu haben rutscht er links an den Rand
<!-- Auruf - Mond - START -->
<ftui-grid-tile row="5" col="16" height="4" width="4" class="semitransparent3d">
<ftui-column>
<ftui-row height="60%">
<ftui-image popup-target="popup-moon" [src]="myAstro:ftui" width="50%" height="50%"></ftui-image>
</ftui-row>
<ftui-row height="15%">
<ftui-column>
<ftui-label [text]="myAstro:MoonRise" class="size-0">A : </ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="myAstro:MoonSet" class="size-0">U : </ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="25%" align-items="top" class="size-0">
<ftui-label [text]="myAstro:MoonPhaseS" [color]="myAstro:MoonPhaseS | map('`Letztes Viertel`:darkorange, `Abnehmende Sichel`:mediumslateblue, Neumond:MediumSpringGreen, `Zunehmende Sichel`:yellow, `Erstes Viertel`:crimson, `Zunehmender Mond`:darkviolet, Vollmond:MediumSpringGreen')"></ftui-label>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
<!-- Auruf - Mond - ENDE -->
<!-- PopUp - Mond - START -->
<ftui-popup id="popup-moon" width="450px" height="450px" timeout="15" position="top">
<!--header>Mond (<ftui-label [text]="myAstro:MoonPhaseS | toDate() | format('eeee')"></ftui-label>)</header-->
<header>Mond - <ftui-label [text]="myAstro:MoonPhaseS" [color]="myAstro:MoonPhaseS | map('`Abnehmende Sichel`:mediumslateblue, `Letztes Viertel`:darkorange, Neumond:MediumSpringGreen, `Zunehmende Sichel`:yellow,`Erstes Viertel`:crimson, `Zunehmender Mond`:darkviolet, Vollmond:MediumSpringGreen')"></ftui-label></header>
<ftui-image [src]="myAstro:ftui"></ftui-image>
</ftui-popup>
<!-- PopUp - Mond - ENDE -->
Das mit den Temperaturen habe ich hinbekommen, aber ich denke dabei immer an die Aussage von setstate, dass sich alle Reihen den Platz teilen und so hatte ich keine Prozentangabe in der row drin, jetzt haben alle row eine Prozentangabe von 6% drin, siehe Screenshot.
Aber das dies Mondbild nicht zentriert ist verstehe ich nicht, so auch wohl dann alle anderen Bilder die ich irgendwo überall drin habe
Wenn mich nicht alles täuscht, muss bei den Angaben <width> und <height> eine Einheit angegeben werden, also entweder "%" für relative oder "px" für absolute Positionierungen.
Gibt man keine Einheit an, werden <width> und <height> ignoriert.
Anbei mal mein Mond, der funktioniert
<!-- Moon -->
<ftui-grid-tile row="1" col="7" height="2" width="2" shape="round" shape="round" class="semitransparent">
<!-- <header>Mond</header> -->
<ftui-column height="80%">
<ftui-row>
<ftui-image popup-target="moon" [src]="astro:ftui" width="95px"></ftui-image>
</ftui-row>
<ftui-row>
<ftui-label [text]="proplanta:fc0_moonRise">A:</ftui-label>
<ftui-label [text]="proplanta:fc0_moonSet"> U:</ftui-label>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
<!-- Moon Popup -->
<ftui-popup id="moon" width="480px" height="480px" timeout="10" shape="round" position="top">
<ftui-image [src]="astro:ftui" width="380px"></ftui-image>
</ftui-popup>
ich bekomme das Bild im Popup überhaupt nicht größer oder auch kleiner, es ignoriert die Prozente die ich eingebe... :-\
Ah ich sehe du hast nur eine Angabe in px drin
Prozent hat bei mir nicht funktioniert, mit deiner Angabe in width="65px" geht es ;)
Zitat von: octek0815 am 29 Januar 2021, 17:06:32
Kann ich durchaus nachvollziehen, aber hier mal das Ganze nativ ohne User-Gedöns und es ist irgendwas faul.
<ftui-column class="size-7" height="92.5%">
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Bad oben"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:humidity"
[color]="Badezimmer_OG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Bad unten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:humidity"
[color]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Büro"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Arbeitszimmer_OG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Arbeitszimmer_OG_Wandthermostat_Climate:humidity"
[color]="Arbeitszimmer_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Dean"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kinderzimmer2_OG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kinderzimmer2_OG_Wandthermostat_Climate:humidity"
[color]="Kinderzimmer2_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Flur oben"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Flur_OG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Flur_OG_TempRH_Sensor:humidity"
[color]="Flur_OG_TempRH_Sensor:humidity | map('64: white, 65: danger')"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Flur unten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Flur_EG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Flur_EG_TempRH_Sensor:humidity"
[color]="Flur_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Fynn"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kinderzimmer1_OG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kinderzimmer1_OG_Wandthermostat_Climate:humidity"
[color]="Kinderzimmer1_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="HWR1"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR1_EG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="HWR1_EG_TempRH_Sensor:humidity"
[color]="HWR1_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="HWR2"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR2_EG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="HWR2_EG_TempRH_Sensor:humidity"
[color]="HWR2_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Küche"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kueche_EG_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kueche_EG_TempRH_Sensor:humidity"
[color]="Kueche_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Schlafzimmer"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Schlafzimmer_EG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Schlafzimmer_EG_Wandthermostat_Climate:humidity"
[color]="Schlafzimmer_EG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Wohnzimmer"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Wohnzimmer_EG_Wandthermostat_Climate:measured-temp | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Wohnzimmer_EG_Wandthermostat_Climate:humidity"
[color]="Wohnzimmer_EG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="2%" class="size-0"> </ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Garage"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Garage_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Garage_TempRH_Sensor:humidity"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Garten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Garten_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Garten_TempRH_Sensor:humidity"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Terrasse"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Terrasse_TempRH_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Terrasse_TempRH_Sensor:humidity"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="2%" class="size-0"> </ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Gefrierschrank"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR2_EG_Gefrierschrank_Temp_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Kühlschrank HWR2"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [hidden]="HWR2_EG_Steckdose_Kuehlschrank:state | map('off:true, on:false')"
[text]="HWR2_EG_Kuehlschrank_Temp_Sensor:temperature | fix(1)">
</ftui-label>
<ftui-label [hidden]="HWR2_EG_Steckdose_Kuehlschrank:state | map('on:true, off:false')"
[text]="HWR2_EG_Steckdose_Kuehlschrank:state | map('off: AUS, on:')">
</ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Kühlschrank Küche"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kueche_EG_Kuehlschrank_Temp_Sensor:temperature | fix(1)"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-column>
Anbei nochmal Bilder vor dem Update mit dem obigen Code und nach dem Update.
Schon viiiiiiel besser. Da schaue ich gern nach.
Sieht aber erstmal gut aus, oder? Außer die Zeilenabstände?
Das sind deine vielen Margins! Die wirken ringsum.
margin="1em" ist eine Fonthöhe oben, rechts, unten, links
Ich würde nur dort margin setzen, wo es gebraucht wird. links oder recht. ggf. unten weniger
margin="0 0 0 0.5em" => oben: 0, rechts: 0, unten: 0, links: 0.5em
Nachtrag: ja das könnte es sein. Vorher wurde Margin autom. nur an die Seite gesetzt, wohin aligned wurde. Jetzt wirkt es ringsum.
Schau ich mir an. Die Angabe margin="0 0 0 0.5em" ist aber flexibler.
Zitat von: setstate am 29 Januar 2021, 17:48:26
margin="0 0 0 0.5em" => oben: 0, rechts: 0, unten: 0, links: 0.5em
Alles klar, vielen dank für deine Erklärung.
Jetzt wird es logisch, dann kann ich das ja recht schnell fixen.
Das muss aber neu sein mir den vier Werten im margin oder?
@yersinia
***
*** Attribut-Selektoren ***
***
Die Anführungszeichen spielen im Normalfall keine Rolle, können aber auch angegeben werden - das Ergebnis ist in beiden Fällen identisch.
Dein Link trägt interessanterweise auch nicht wirklich zur eindeutigen Klärung der Frage bei ...
Die Erläuterungsseite definiert:
[title~="flower"] {
border: 5px solid yellow;
}
Im zugehörigen Try-It-Bereich wird definiert:
[title~=flower] {
border: 5px solid yellow;
}
***
*** content ***
***
Ausschnitt aus Datei test.html
<body>
<ftui-grid base-height="27" base-width="27">
...
<ftui-tab-view id="content">
<ftui-grid-tile row="1" col="1" height="1" width="1">
<ftui-content file="tab-view_content.html" color="green"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
...
</ftui-grid>
</body>
Datei tab-view_content.html
<ftui-grid base-height="27" base-width="27" margin="0">
<ftui-grid-tile row="1" col="1" height="1" width="1" color="blue">
<ftui-content file="content_content.html"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="2" height="1" width="1">
<ftui-content file="content_content.html"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="1" height="1" width="1">
<ftui-content file="content_content.html"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="2" height="1" width="1" color="blue">
<ftui-content file="content_content.html"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="1" height="2" width="2">
<ftui-content file="content_content.html"></ftui-content>
</ftui-grid-tile>
</ftui-grid>
Datei content_content.html
<ftui-column>
<div style="color:#0000ff;">blau</div>
</ftui-column>
- Kachelgröße in test.html (27x27) und tab-view_content.html (27x27) stimmen überein
- In test.html wird 1 Kachel (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird zentriert ausgerichtet
Ergebnis s. Anhang Screenshot_1
Datei test.html verändert
...
<ftui-grid-tile row="1" col="1" height="1" width="1">
<ftui-content file="tab-view_content.html" color="green" align-items="left"></ftui-content>
</ftui-grid-tile>
...
- Kachelgröße in test.html (27x27) und tab-view_content.html (27x27) stimmen überein
- In test.html wird 1 Kachel (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird links ausgerichtet
Ergebnis s. Anhang Screenshot_2
Datei test.html verändert
...
<ftui-grid-tile row="1" col="1" height="2" width="2">
<ftui-content file="tab-view_content.html" color="green" align-items="left"></ftui-content>
</ftui-grid-tile>
...
- Kachelgröße in test.html (27x27) und tab-view_content.html (27x27) stimmen überein
- In test.html werden 4 Kacheln (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird links ausgerichtet
Ergebnis s. Anhang Screenshot_3
Datei test.html verändert
<ftui-grid-tile row="1" col="1" height="4" width="4">
<ftui-content file="tab-view_content.html" color="green" align-items="left"></ftui-content>
</ftui-grid-tile>
Datei tab-view_content.html verändert
<ftui-grid base-height="54" base-width="54" margin="0">
...
</ftui-grid>
- Kachelgröße in test.html (27x27) und tab-view_content.html (54x54) stimmen nicht überein
- In test.html werden 16 Kacheln (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird links ausgerichtet
Ergebnis s. Anhang Screenshot_4
Datei test.html verändert
<ftui-grid-tile row="1" col="1" height="34" width="26">
<ftui-content file="tab-view_content.html" color="green"></ftui-content>
</ftui-grid-tile>
- Kachelgröße in test.html (27x27) und tab-view_content.html (54x54) stimmen nicht überein
- In test.html werden alle Kacheln (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird zentriert ausgerichtet
Ergebnis s. Anhang Screenshot_5
Ich selbst nutze eigentlich immer die letzte Variante, da dann die komplette Kachelfläche zur Verfügung gestellt wird und die linke obere Ecke des Sub-Grid immer mit der oberen linken Ecke vom Master-Grid übereinstimmt.
Welche Kachelgröße zur Ausnutzung der kompletten Kachelfläche dann im Sub-Grid verwendet werden soll, kann man individuell festlegen. Zu große oder zu viele Kacheln werden am Rand der kompletten Kachelfläche abgeschnitten und sind somit nicht sichtbar.
Zitat von: setstate am 29 Januar 2021, 17:48:26
margin="0 0 0 0.5em" => oben: 0, rechts: 0, unten: 0, links: 0.5em
das heißt jetzt für alle weiteren Formatierungen muss margin so eingesetzt werden margin="0 0 0 0.5em"
Ein margin="1" gilt jetzt für alle 4 Seiten
@OdfFhem: Danke fürs Testen und den Hineweis. Interessant, dass w3schools da etwas inkonsequent ist. ::)
Ich hab' meinen Fehler auch gefunden, ich hatte quasi ein grid in grid, was vorher Problemlos funktioniert hat, aber nach dem Update von gestern nicht mehr. Update gemacht, Zeilen gelöscht, läuft.
Zitat von: moonsorrox am 30 Januar 2021, 15:13:50
das heißt jetzt für alle weiteren Formatierungen muss margin so eingesetzt werden margin="0 0 0 0.5em"
Ein margin="1" gilt jetzt für alle 4 Seiten
na ja, das wäre die einfachste Umsetzung. Besser als margin-left, margin-top, margin....
Oder per Automatismus:
wenn align-items="left" und margin="1", dann setzte margin-left="1em"
wenn align-items="left top" und margin="1", dann setzte margin-left="1em" und margin-top="1em"
nicht falsch verstehen, ich finde die Umsetzung absolut gut, man kann alles super positionieren.
Klar mußte ich erstmal wieder einiges umbauen, da ich aber sowieso schon Höhe und Weite in % nutze war es jetzt nicht so schlimm einmal wieder alles raus nehmen um es dann mit der neuen Technik ;) wieder richtig einzustellen.
Bisher geht es super gut :)
Danke setstate
Da bei mir nach dem letzten Update von ftui über FHEM anscheinend Grid-in-Grid nicht mehr funktioniert, habe ich die aktuelle Version von Github eingespielt. Aber auch hier das gleiche Problem. Auch der Aufruf von FTUI Example Tab positioniert die Grids nicht richtig S. Screenshot). Ich habe nur die original ftui-Komponenten ohne Änderungen für den Test aktiv.
Die Auswirkungen habe ich jetzt etwas minimiert.
Ich glaube bei der vorherigen Version war die Begrenzung der Grids etwas toleranter. Zwischenzeitlich habe ich das Problem in Griff. Bei FTUI Example Tab habe ich
base-width und base-hight angegeben:
<ftui-grid base-width="140" base-height="74">
und beim View3 width auf 12 geändert:
<ftui-tab-view id="View3">
<ftui-grid-tile row="1" col="2" height="5" width="12" color="green">
<ftui-content file="examples/contents/content-grid.html" placeholder="h$
</ftui-grid-tile>
</ftui-tab-view>
Ergebnis s. Screenshot.
Der Fehler bei mir lag an der zu klein gewählten Weite bei der ftui-tab-view Definition. Width stand fehlerhaft auf 2. Dadurch wurden alle Felder an dem rechten Rand ausgerichtet und vieles verschwand links aussen. Korrekt wäre 12 gewesen. Die vorherige Version hatte das anscheinend kommentarlos geschluckt.
Viele Grüße
Karlheinz
Genau, das ist die primäre Ursache. Ich hatte nur Änderungen an der Ausrichtung (zentriert) gemacht, wodurch das auffiel.
Hi, ich bin auch gerade am testen gewesen. Erstmal großes Lob am Weiterentwickeln.
Nur eine Sache. Man sollte vielleicht auf eine aktuelle WebView Version hinweisen.
Ich hatte noch eine 55´er drauf und da ging nix (mit FTUIv2 lief die).
Danach habe ich auf 61 upgedated und siehe da die FTUIv3 lief.
Jetzt habe ich noch die 88´er drauf gemacht...
mfg Thomas
Hallo setstate,
wäre es möglich, ein Popup auch von einem Knob oder sogar einer row aus zu öffnen wenn man drauf klickt/tippt?
Beispielcode:
<ftui-row popup-target="popHeat">
<ftui-column style="margin-left:0px">
<ftui-icon [name]="{{t_device}}:controlMode | map('manual:sani_heating_manual,auto:oa-sani_heating_automatic,holyday:control_arrow_up,boost:control_arrow_upward')" path="/fhem/www/images/openautomation" class="size-1" style="vertical-align:middle"></ftui-icon>
</ftui-column>
<ftui-column>
<ftui-knob has-scale has-arc has-scale-text has-value-text has-needle readonly
[value]="{{t_device}}:measured-temp" min="10" max="35"
(value)="{{t_device}}:desired-temp" min="10" max="35"
[color]="{{t_device}}:measured-temp | map('0: success, 10: warning, 30: danger')">
</ftui-knob>
</ftui-column>
</ftui-row>
<ftui-popup id="popHeat" timeout="60" width="750px" height="720px">
<header>Heizung</header>
</ftui-popup>
setstate hat da mal was zu geschrieben https://forum.fhem.de/index.php/topic,115259.msg1117166.html#msg1117166
Zitatsetstate hat da mal was zu geschrieben
Danke. Ah okay mit einem div um den Knob funtkioniert es.
Cool wäre wenn man es über mehrere Elemente hinweg machen könnte. Also Popup auf div welches mehrere readonly Elemente enthält.
Du kannst auch ftui3 konform ein <ftui-row> oder <ftui-column> nehmen, statt eines <div>
Guten morgen,
bei mir kommt es zur Zeit zu einem komischen Verhalten. Nutze FTUI-Badge innerhalb eines Content Files.
Beim ersten anbrowsen (Inkognito/normal Chrome Browser) wird das Badge nicht angezeigt erst nach einem nochmaligen aktualisieren der Seite.
So ähnlich ist das Verhalten auch beim multi-icon auch innerhalb eines Content Files verbaut wird erstmalig nicht angezeigt nach dem aktualisieren aber schon.
Berechnungen todate() | Ago() mit intervall=60 werden auch erst nach Ablauf des ersten Intervalls angezeigt oder nach einem Refresh der Seite. (Auch in einem Content File verbautes ftui-label.
Ist ein Problem bei mir oder bei euch auch?
Grüße
Torte
Zitat von: torte am 01 Februar 2021, 10:12:59
bei mir kommt es zur Zeit zu einem komischen Verhalten. Nutze FTUI-Badge innerhalb eines Content Files.
Beim ersten anbrowsen (Inkognito/normal Chrome Browser) wird das Badge nicht angezeigt erst nach einem nochmaligen aktualisieren der Seite.
Ist ein Problem bei mir oder bei euch auch?
Kann ich bestätigen ist bei mir auch so.
Grüße
Olli
@torte, @octek0815
Ich nutze auch ftui-badge und zwar bislang ausnahmlos in einer content-Datei - keinerlei Probleme.
Zeitberechnungen gibt es auf der Hauptseite, aber auch zahlreich in einer content-Datei - keinerlei Probleme.
Habt Ihr ein "kleines" Beispiel, an dem man das angesprochene Verhalten nachvollziehen kann?
Zitat von: OdfFhem am 01 Februar 2021, 18:13:05
@torte, @octek0815
Ich nutze auch ftui-badge und zwar bislang ausnahmlos in einer content-Datei - keinerlei Probleme.
Zeitberechnungen gibt es auf der Hauptseite, aber auch zahlreich in einer content-Datei - keinerlei Probleme.
Habt Ihr ein "kleines" Beispiel, an dem man das angesprochene Verhalten nachvollziehen kann?
Anbei zwei Beispiele. In Firefox konnte ich das Verhalten auch ohne F12 reproduzieren und Chrome nur nach drücken von F12.
@setstate
Wie ich gerade gesehen habe, hast Du auto-play für den swiper verbaut.
Gerade getestet: In Firefox (PC) funktioniert es, in Chrome (PC) keine Funktion, Android Tablet (Fully Kiosk Brower) ebenfalls keine Funktion.
Nur mal als keines Feedback.
Grüße
Olli
Wird es für die round() Funktion auch eine Fixierung der Dezimalstellen geben (analog zu data-fix bei FTUI2 label Widget)?
Zitat von: yersinia am 02 Februar 2021, 13:04:12
Wird es für die round() Funktion auch eine Fixierung der Dezimalstellen geben (analog zu data-fix bei FTUI2 label Widget)?
gibt es doch:
fix(x) und round(x)
Ah, gut, dass
round(2) | fix(2)
funktioniert, war mir nicht bewusst - und irgendwie aus der bisher bestehenden Doku nicht ersichtlich.
Thx.
Hi setstate
Können wir in <ftui-image> einen check einbauen, ob das Bild geladen werden konnte oder nicht?
Bei Error -> fallback image
Das wäre super :-)
Liebe Grüsse
@setstate
Da die desired-Erweiterung in der knob-Komponente bislang kein allgemeines Interesse gefunden hat, habe ich (zunächst einmal) eine von knob abgeleitete Komponente erstellt - so erspare ich mir die ansonsten notwendige Anpassung mit jedem Update.
Allerdings musste ich auch in der knob-Komponente eingreifen, da dort bislang FtuiKnob nicht exportiert wird.
Könnte das noch angepasst werden?
Wenn ja, betroffen vom fehlenden export sind lediglich FtuiKnob und FtuiCheckbox, FtuiSwiper, FtuiTab sowie FtuiWeather; alle anderen Komponenten machen dies bereits.
ZitatDa die desired-Erweiterung in der knob-Komponente bislang kein allgemeines Interesse
Also ich fänds cool wenn das Standard wird. Gerade für Thermostate finde ich das echt super.
Zitat von: OdfFhem am 02 Februar 2021, 23:31:54Da die desired-Erweiterung in der knob-Komponente bislang kein allgemeines Interesse gefunden hat, habe ich (zunächst einmal) eine von knob abgeleitete Komponente erstellt - so erspare ich mir die ansonsten notwendige Anpassung mit jedem Update.
Ich finde die auch optisch sehr gelungen. Rein in den Standard! +1
Guten Morgen,
ich habe mir vom Anfang des Threads die Anrufliste .html heruntergeladen und angepasst.
Diese möchte ich mit einem Popup öffnen.
Das versuche ich mit <ftui-grid-tile row="3" col="19" height="1" width="1" shape="round">
<ftui-icon name="phone1" class="size-3"
[color]="FB_CALLLIST:count-missed-calls | map('^1:primary, 0:')"
popup-target="Anrufliste">
</ftui-icon>
</ftui-grid-tile>
<ftui-popup id="Anrufliste" timeout="60" width="1093px" height="651px">
</ftui-popup> leider bekomme ich nur ein leeres Popup angezeigt ohne Inhalt. Ich Seher den Fehler leider nicht.
Kann mir jemand helfen ?
Zitat<ftui-popup id="Anrufliste" timeout="60" width="1093px" height="651px">
</ftui-popup>
Sollte da nicht auch irgendwas drin stehen, so öffnest Du nur, wie Du schon gemerkt hast, ein leeres Popup.
Das steht in der Datei Anrufliste.html
Du musst noch das content in den popup einfügen
<ftui-popup id="Anrufliste" timeout="60" width="1093px" height="651px">
<ftui-content file="Anrufliste.html"></ftui-content>
</ftui-popup>
Zitat von: SirMarco am 03 Februar 2021, 10:13:19
Du musst noch das content in den popup einfügen
<ftui-popup id="Anrufliste" timeout="60" width="1093px" height="651px">
<ftui-content file="Anrufliste.html"></ftui-content>
</ftui-popup>
Danke Dir
Zitat von: OdfFhem am 02 Februar 2021, 23:31:54
@setstate
Da die desired-Erweiterung in der knob-Komponente bislang kein allgemeines Interesse gefunden hat, habe ich (zunächst einmal) eine
Ich habe Interresse!
Gruß
Eisix
Ich fand es auch nice.
Ist nur wieder in Vergessenheit geraten bei mir.
Zitat von: SirMarco am 02 Februar 2021, 18:30:35
Hi setstate
Können wir in <ftui-image> einen check einbauen, ob das Bild geladen werden konnte oder nicht?
Bei Error -> fallback image
Das wäre super :-)
Liebe Grüsse
Soll man das Bild vorgeben können oder ein fixes? Oder nur Text?
Den Segment Button finde ich schick, danke dafür setstate.
Zitat von: setstate am 03 Februar 2021, 13:23:33
Soll man das Bild vorgeben können oder ein fixes? Oder nur Text?
Ein fixes Bild wäre Klasse :-)
ich suche immer noch krampfhaft nach etwas mehr Erklärung für einen Slider, den ich als Fortschritts Anzeige nutzen möchte.
Was ich dabei gern hätte wäre win schlichter Slider der von links nach rechts läuft und evtl. rechts oder links die ablaufende Zeit anzeigt, entweder runter zählt oder die verbleibende Zeit zeigt.
Ich bekomme es nur teilweise hin was ich nicht bekomme ist die Zeit, da zeigt er alles mögliche an.
Gibt es schon mehr Informationen zum Slider auf github habe ich nicht soviel gefunden nur die Beispiele senkrecht und waagerecht, aber keine Details
Bei der Fortschrittsanzeige meines Squeezeplayers habe ich das so gelöst.
<!-- Fortschrittanzeige -->
<ftui-row>
<ftui-column align-items="right" width="20%">
<ftui-label [text]="wz.krachnase_air:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="wz.krachnase_air:duration"
[(value)]="wz.krachnase_air:currentTrackPosition" handle="none">
</ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="wz.krachnase_air:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>
Links wird dann die abgelaufene Zeit abgezählt.
Vielleicht hilft's Dir ja weiter.
Zitat von: grossmaggul am 03 Februar 2021, 13:55:03
Bei der Fortschrittsanzeige meines Squeezeplayers habe ich das so gelöst.
<!-- Fortschrittanzeige -->
<ftui-row>
<ftui-column align-items="right" width="20%">
<ftui-label [text]="wz.krachnase_air:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="wz.krachnase_air:duration"
[(value)]="wz.krachnase_air:currentTrackPosition" handle="none">
</ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="wz.krachnase_air:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>
Links wird dann die abgelaufene Zeit abgezählt.
Vielleicht hilft's Dir ja weiter.
TOP!!
Magst du mal das List vom wz.krachnase_air posten?
Besten Dank
Grüsse
Zitat von: SirMarco am 15 Januar 2021, 14:38:57
Hallo zusammen
In der Toolbar habe ich ein label eingefügt:
<ftui-main>
<ftui-view-toolbar class="fixed">
<ftui-menu-button slot="start" align-items="left"></ftui-menu-button>
<ftui-title group="default" class="size-5 titleroom" slot="start"></ftui-title>
<ftui-title slot="end">
<ftui-tab view="content_klima" title="Klima" color="black">
<ftui-weather class="size-1" [condition]="Controller_myProPlanta:fc0_weatherDay"></ftui-weather>
<ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>
</ftui-tab>
</ftui-title>
</ftui-view-toolbar>
</ftui-main>
Wenn ich das label auf einer anderen Seite anzeigen lassen möchte, wird es nicht angezeigt - erst wenn ich das label in der Toolbar lösche.
Liegt das daran, das die 2. Seite ein Template ist?
Hier möchte ich es ebenfalls anzeigen lassen:
content_klima.html
<ftui-page>
<ftui-column align-items="left" class="tabsection">
<ftui-title style="padding-left: 10px" class="size-4">Klima</ftui-title>
</ftui-column>
<ftui-view-section>
<ftui-content file="template/template_klima_2er.html" name="Lounge" device="netatmo_M02_00_00_06_7e_16"></ftui-content>
</ftui-view-section>
</ftui-page>
template_klima_2er.html
<ftui-row>
<ftui-column>
<ftui-label class="align-left" >{{name}}</ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="bars" class="size-0" popup-target="{{name}}"></ftui-icon>
</ftui-column>
<ftui-column>
<ftui-label [text]="{{device}}:temperature" [color]="{{device}}:temperature | map('0=secondary,16=warning,30=danger')" class="size-5"><span slot="end">°C</span></ftui-label>
<ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="{{device}}:humidity" [color]="{{device}}:humidity | map('0=secondary,50=warning,80=primary')" class="size-5"><span slot="end">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-popup id="{{name}}" timeout="0" width="400px" height="400px">
<ftui-row>
<ftui-chart title="{{name}}" unit="day" prefetch="21600" extend>
<ftui-chart-data label="Temperatur" point-radius="0" tension="0.3" fill color="#27ae60" log="DBLogging" file="history" spec="{{device}}:temperature"></ftui-chart-data>
<ftui-chart-data label="Luftfeuchtigkeit" point-radius="0" tension="0.3" fill color="#228ace" log="DBLogging" file="history" spec="{{device}}:humidity"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
</ftui-row>
</ftui-popup>
Danke 8)
Grüsse
Hallo zusammen
Könnte das jemand von euch einmal nachbauen und testen?
Oder habe ich einen Gedankenfehler?
Als Workaround lasse ich mir das reading in ein Dummy schreiben und das Dummy an der zweiten Stelle anzeigen.
Grüsse
Magst du mal das List vom wz.krachnase_air posten?
Ehrlich gesagt nicht, weil das Teil mehrere hundert Zeilen hat.
Zitat von: grossmaggul am 03 Februar 2021, 13:55:03
Bei der Fortschrittsanzeige meines Squeezeplayers habe ich das so gelöst.
Links wird dann die abgelaufene Zeit abgezählt.
Vielleicht hilft's Dir ja weiter.
Das sieht doch sehr gut aus werde ich gleich mal einbauen...! ;)
Mal 'ne Verständnisfrage zu popup. Wenn ich popup-target bei ftui-row angebe, zeigt der Cursor im Firefox zwar an, dass etwas ausgewähl werden kann. Aber beim Klick darauf passiert nichts. Der Klick auf das Label ruft das popup-Fenster korrekt auf. Geht es bei ftui-row oder ftui-column generell nicht? Es wäre halt schön, wenn das komplette Tile auf den Klick reagieren würde. Oder mache ich etwas falsch?
<ftui-row popup-target="wetter">
<ftui-column>
<ftui-row>
<ftui-label popup-target="wetter">Heute</ftui-label>
</ftui-row>
....
@SirMarco, @setstate
Ich habe mal einen kleinen Test gemacht und Folgendes festgestellt:
- Die Hauptseite enthält direkt ein Reading namens XYZ.
- Außerdem enthält die Hauptseite noch als content ein Popup.
- Dieses Popup enthält dasselbe Reading XYZ wie die Hauptseite.
Wird die Seite neu geladen, wird auf der Hauptseite das Reading XYZ angezeigt.
Öffne ich das Popup, wird das gewünschte Reading XYZ dort nicht angezeigt.
Mehrmaliges Öffnen des Popup ändert nichts an diesem Verhalten.
Letztlich habe ich festgestellt, dass eine Wertänderung des fraglichen Readings XYZ das Verhalten ändert.
- Ist das Popup geschlossen und wird nach der Wertänderung von Reading XYZ geöffnet, dann wird der zugehörige Wert angezeigt.
- Ist das Popup bereits geöffnet, dann wird mit der Wertänderung das Reading XYZ unmittelbar angezeigt.
Ich vermute, dass das Verhalten daran liegt, dass das Reading XYZ schon im Rahmen der Hauptseite genutzt und "verteilt" wurde. Anschließend abonniert das Popup das Reading XYZ, so dass der Wert neu geholt wird - es unterscheidet sich aber nicht vom bisherigen Wert und wird entsprechend nicht nochmals "verteilt". Ändert sich der Wert auf der FHEM-Seite, dann wird das Reading neu gesendet und wegen abweichendem Wert neu "verteilt".
Angenommen, die Theorie stimmt halbwegs, dann müsste ein erneutes Abonnieren zum Zurücksetzen des Readings XYZ führen ...
ZitatDer Klick auf das Label ruft das popup-Fenster korrekt auf. Geht es bei ftui-row oder ftui-column generell nicht?
Doch das geht.
Probiere mal so, Du hast übrigens ein </ftui-row> und ein</ftui-column> vergessen:
<ftui-row>
<ftui-column>
<ftui-row popup-target="wetter">
<ftui-label>Heute</ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>oder wenn die gesamte column als klickbarer Bereich genutzt werden soll, so
<ftui-row>
<ftui-column popup-target="wetter">
<ftui-row>
<ftui-label>Heute</ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
Zitat von: khk123 am 03 Februar 2021, 16:49:47
Mal 'ne Verständnisfrage zu popup. Wenn ich popup-target bei ftui-row angebe, zeigt der Cursor im Firefox zwar an, dass etwas ausgewähl werden kann. Aber beim Klick darauf passiert nichts. Der Klick auf das Label ruft das popup-Fenster korrekt auf. Geht es bei ftui-row oder ftui-column generell nicht? Es wäre halt schön, wenn das komplette Tile auf den Klick reagieren würde. Oder mach eich etwas falsch?
<ftui-row popup-target="wetter">
<ftui-column>
<ftui-row>
<ftui-label popup-target="wetter">Heute</ftui-label>
</ftui-row>
....
So muss das aussehen:
<ftui-row popup-target="wetter" height="50px" style="background-color: red;"></ftui-row>
<ftui-popup id="wetter" timeout="0" width="400px" height="400px" shape="round">
heute
</ftui-popup>
ich habe mit dem Popups auch so meine Probleme, ich habe mir ein Popup erstellt welches "content-multimedia.html" heißt über meine index.html öffne ich das Popup folgendermaßen und das funktioniert auch.
Ich habe Quatsch erzählt ist ja gar kein Popup, ich öffne einfach nur eine Datei, aber das funktioniert eben auch nicht
Die Dateien heißen "content-multimedia.html" und "content-multimedia1.html"
<ftui-grid-tile row="4" col="18" height="13" width="14" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
jetzt habe ich ein zweites Popup welches "content-multimedia1.html" heißt dieses möchte ich gern in meiner index.html so öffnen
<ftui-grid-tile row="4" col="2" height="13" width="14" class="semitransparent3d">
<!--ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row-->
</ftui-grid-tile>
das funktioniert leider nicht, es öffnet sich das Grid-tile, aber es ist leer
Evtl. ist das das gleiche Problem wie vorher schon geschrieben
Was ich noch habe ich möchte in einem Slider noch die aktuelle Anzeige haben, so wie bei github mit dem Beispiel "invert" das ich scale anders einstellen muss habe ich schon hinbekommen, aber ich bekomme es in den Slider unten nicht rein und die Farben der map funktionieren beim Slider auch nicht.
scale sollte so aussehen wenn er hoch zählt "scale(0,100,0,100)"
<ftui-slider [(value)]=SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:blue, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="" has-ruler has-wide-ticks>
</ftui-slider>
@moonsorrox
<!--ftui-row>
... egal, was hier steht ...
</ftui-row-->
"<!--" ... "-->" sorgt dafür, dass der dazwischen stehende Code auskommentiert wird und dementsprechend auch nichts angezeigt wird.
Zitat von: OdfFhem am 03 Februar 2021, 18:16:27
@moonsorrox
<!--ftui-row>
... egal, was hier steht ...
</ftui-row-->
"<!--" ... "-->" sorgt dafür, dass der dazwischen stehende Code auskommentiert wird und dementsprechend auch nichts angezeigt wird.
ja ist klar ;)
ich hatte das falsche drin, sieht natürlich so aus... ;) :D
<ftui-grid-tile row="4" col="2" height="11" width="14" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="18" height="11" width="14" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
@moonsorrox
Lösungen helfen also nicht immer ;D
Ich nutze in der Hauptseite z.B.:
<ftui-grid-tile row="7" col="1" height="2" width="13" shape="round">
<ftui-row>
<ftui-content file="content_abfall.html" device="Abfalltermin"></ftui-content>
...
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="13" col="1" height="4" width="26" shape="round">
<ftui-row>
<ftui-content file="content_thermostat.html" device="HM_xyz_Clima"></ftui-content>
...
</ftui-row>
</ftui-grid-tile>
Sieht ja recht ähnlich aus und funktioniert problemlos - vielleicht ist Dein Problem dann eher im content-File ...
Zitat von: coolice am 03 Februar 2021, 10:22:39
Danke Dir
Du könntest es auch noch ein wenig ausdünnen und eleganter machen.
Beispiel:
Popup Aufruf:
<ftui-button (value)="System_Verpasste_Anrufe" states='0' fill="clear">
<ftui-icon name="phone1" class="hop" popup-target="popup-verpasste-anrufe"></ftui-icon>
<ftui-badge [text]="System_Verpasste_Anrufe"></ftui-badge>
</ftui-button>
Popup:
<ftui-popup id="popup-verpasste-anrufe" timeout="60" width="89%" height="74%">
<header>Verpasste Anrufe</header>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe.html"></ftui-content>
</ftui-popup>
content-popup-verpasste-anrufe.html
<ftui-column>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="1"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="2"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="3"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="4"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="5"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="6"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="7"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="8"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="9"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="10"></ftui-content>
</ftui-column>
content-popup-verpasste-anrufe-content-anrufer.html
<ftui-row>
<ftui-column align-items="left" width="1%">
<ftui-icon [name]="System_Fritzbox_Anruferliste:{{nummer}}-state | map('`<=`:_phone_call_end_out, `<= X`:_phone_missed_out, `=>`:_phone_call_end_in, `=> X`:_phone_missed_in, `=> ((o))`:_phone_ring_in, `=> [=]`:_phone_call, `=> O_O`:_phone_answering, `<= ((o))`:_phone_ring_out, `<= [=]`:_phone_call')" [color]="System_Fritzbox_Anruferliste:{{nummer}}-state | map('`<=`:green, `<= X`:green, `=>`:blue, `=> X`:danger, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:blue, `<= ((o))`:green, `<= [=]`:green')"></ftui-icon>
</ftui-column>
<ftui-column align-items="left" width="17%">
<ftui-label [text]="System_Fritzbox_Anruferliste:{{nummer}}-timestamp"><span slot="start"> </span></ftui-label>
</ftui-column>
<ftui-column align-items="left" width="17%">
<ftui-label style="overflow:hidden; text-overflow:ellipsis;" [text]="System_Fritzbox_Anruferliste:{{nummer}}-number"></ftui-label>
</ftui-column>
<ftui-column align-items="left" width="45%">
<ftui-label style="overflow:hidden; text-overflow:ellipsis;" [text]="System_Fritzbox_Anruferliste:{{nummer}}-name"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="7%">
<ftui-label [text]="System_Fritzbox_Anruferliste:{{nummer}}-duration"></ftui-label>
</ftui-column>
</ftui-row>
Styling, Größen, Klassen usw. habe ich entfernt, müsstest Du dann selbst definieren.
So sparst Du Code und es macht das Ganze übersichtlicher.
Grüße
Olli
@moonsorrox
Zitat
<ftui-slider [(value)]=SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:blue, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="" has-ruler has-wide-ticks>
</ftui-slider>
Hinter
[(value)]= fehlt ein Anführungszeichen ... falls der Code 1:1 mit dem verwendeten übereinstimmt ;)
Hey, ich habe ein Problem mit dem circlemenü seit ich bei den Buttons value und states hinzugefügt habe, und auf einen button clicke, nachdem sich das circlemenü geöffent hat, schließt es zwar und der Befehl wird ausgeführt, das Display (quasi das unkle overlay) bleibt aber. Man kann dann nichts mehr bedienen.
<ftui-circlemenu class="size-5">
<ftui-icon [name]="HM_KU_Shutter:1.LEVEL | map('0:fts_window_2w, 20:fts_shutter_20, 30:fts_shutter_30, 40:fts_shutter_40, 50:fts_shutter_50, 60:fts_shutter_60, 80:fts_shutter_80, 100:fts_shutter_100')" path="/fhem/www/images/openautomation"></ftui-icon>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="0">
<ftui-icon name="fts_window_2w" path="/fhem/www/images/openautomation"></ftui-icon>
</ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="20">
<ftui-icon name="fts_shutter_20" path="/fhem/www/images/openautomation"></ftui-icon>
</ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="30">
<ftui-icon name="fts_shutter_30" path="/fhem/www/images/openautomation"></ftui-icon>
</ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="40">
<ftui-icon name="fts_shutter_40" path="/fhem/www/images/openautomation"></ftui-icon>
</ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="50">
<ftui-icon name="fts_shutter_50" path="/fhem/www/images/openautomation"></ftui-icon>
</ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="60">
<ftui-icon name="fts_shutter_60" path="/fhem/www/images/openautomation"></ftui-icon>
</ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="80">
<ftui-icon name="fts_shutter_80" path="/fhem/www/images/openautomation"></ftui-icon>
</ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="100">
<ftui-icon name="fts_shutter_100" path="/fhem/www/images/openautomation"></ftui-icon>
</ftui-button>
</ftui-circlemenu>
Hat jemand eine Idee?
Habe ich auch schon mehrfach gehabt, tritt seit der letzten Änderungen an ftui-grid auf wenn ich mich richtig erinnere.
Konnte aber noch nicht genau festmachen woran das liegt.
Gruß
Eisix
Zitat von: grossmaggul am 03 Februar 2021, 17:06:38
Doch das geht.
Probiere mal so, Du hast übrigens ein </ftui-row> und ein</ftui-column> vergessen:
<ftui-row>
<ftui-column>
<ftui-row popup-target="wetter">
<ftui-label>Heute</ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
oder wenn die gesamte column als klickbarer Bereich genutzt werden soll, so
<ftui-row>
<ftui-column popup-target="wetter">
<ftui-row>
<ftui-label>Heute</ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
@grossmaggul
Die letzte Code-Zeile war leider etwas unglücklich formatiert. </ftui-row> und </ftui-column> sind definiert, aber nicht mit im Code-Schnipsel. Ich hatte versucht durch .... anzudeuten.
Korrekt wäre es so gewesen:
ftui-row popup-target="wetter">
<ftui-column>
<ftui-row>
<ftui-label popup-target="wetter">Heute</ftui-label>
</ftui-row>
...
Deine erste Version funktioniert bei mir. Die zweite allerdings nicht.
@SirMarco
Deine Version geht. Aber sobald ich noch <ftui-column> reinpacke geht es nicht mehr.
<ftui-row popup-target="wetter" height="50px" style="background-color:red">
<ftui-column>
<ftui-label>Heute</ftui-label>
</ftui-column>
</ftui-row>
<ftui-popup id="wetter" timeout="0" width="400px" height="400px" shape="round">
heute
</ftui-popup>
Was mir noch aufgefallen ist. Wenn der Cursor über dem Labeltext "Heute" steht wird zwar der Auswahlcursor immer noch angezeigt, aber es wird nicht mehr auf den Klick reagiert. Auch muss die popup-id anscheinend eindeutig sein, denn wenn zweimal die id wetter vorkommt, dann werden auch beide popups übereinander gelegt.
Zitat von: OdfFhem am 03 Februar 2021, 19:19:33
@moonsorrox
Hinter [(value)]= fehlt ein Anführungszeichen ... falls der Code 1:1 mit dem verwendeten übereinstimmt ;)
ja Danke der fehlt tatsächlich und habe ich ergänzt manchmal sind es die kleinen Dinge... ;)
Warum er das zweite Fenster nicht anzeigt habe ich bisher noch nicht gefunden, ich hattee das schon einmal in meinem Code, vor einiger Zeit.
Bisher hatte ich das dann so gelöst, dass ich es in die index.html eingetragen habe, warum das auslagern nur bei bestimmten Codeteilen nicht funktioniert ist mir noch ein Rätsel.
Der Mediaplayer ist exakt der selbe nur eben mit meiner anderen Box, soll heißen es ist nur der device Name ausgetauscht, der Slider mit dem Fehler [(value)]= fehlt ein Anführungszeichen - ist da noch gar nicht dabei weil ich diesen erst am bauen bin. Daran kann es also nicht liegen.
Aber das er gar nichts anzeigt ist mir noch nicht klar.... :-\ zumal jetzt das zweite mal
ZitatDu könntest es auch noch ein wenig ausdünnen und eleganter machen.
Beispiel:
Ich habe jetzt auch versucht die Anrufliste mittels content auszulagern, aber irgendwie gibt das Probleme mit der Formatierung.
Egal was ich anstelle, mal wird die Liste korrekt angezeigt, dann mal wieder so wie unten.
Meine content Calllist sieht so aus:
<ftui-row>
<!-- Icon -->
<ftui-column align-items="left" width="10px">
<ftui-icon path="../images/openautomation/"
[name]="fritzlist:{{nummer}}-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
[color]="fritzlist:{{nummer}}-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')">
</ftui-icon>
</ftui-column>
<!-- Name -->
<ftui-column align-items="left">
<ftui-label [text]="fritzlist:{{nummer}}-timestamp"></ftui-label>
</ftui-column>
<!-- Nummer -->
<ftui-column align-items="left">
<ftui-label [text]="fritzlist:{{nummer}}-number"></ftui-label>
</ftui-column>
<!-- Timestamp -->
<ftui-column align-items="left">
<ftui-label [text]="fritzlist:{{nummer}}-name"></ftui-label>
</ftui-column>
<!-- Dauer -->
<ftui-column align-items="left">
<ftui-label [text]="fritzlist:{{nummer}}-duration"></ftui-label>
</ftui-column>
<!-- Anruferbild -->
<ftui-column align-items="left">
<ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/"
[src]="fritzlist:{{nummer}}-image" width="40px" shape="circle"></ftui-image>
</ftui-column>
</ftui-row>Das Popup so:
<ftui-column>
<ftui-content file="./content/calllist.html" nummer="1"></ftui-content>
<ftui-content file="./content/calllist.html" nummer="2"></ftui-content>
<ftui-content file="./content/calllist.html" nummer="3"></ftui-content>
<ftui-content file="./content/calllist.html" nummer="4"></ftui-content>
<ftui-content file="./content/calllist.html" nummer="5"></ftui-content>
<ftui-content file="./content/calllist.html" nummer="6"></ftui-content>
<ftui-content file="./content/calllist.html" nummer="7"></ftui-content>
</ftui-column>Ist da ein Fehler drin, den ich nicht sehe?
@grossmaggul
ich wollte das mal nachbauen um zu schauen ob es bei mir funktioniert, aber ich bekomme damit
vAnrufliste:{{nummer}}-state
gar nichts angezeigt... :-\
@setstate
ich muss jetzt nochmal fragen wegen der Auslagerung einiger Seiten oder auch Popups, welche mir ums verrecken absolut nicht angezeigt werden.
selbst wenn ich den selben Inhalt in die ausgelagerte Datei schreibe wird mir nichts angezeigt, dass Fenster ist einfach leer ich begreife es absolut nicht :-\ :-\
Beide Dateien sind natürlich vorhanden... muss ich evtl eine ID vergeben oder warum geht das nicht. Ich habe selbiges Problem auch noch mit einem Popup, aber das lasse ich hier mal.
Dafür mal hier das Beispiel zweier Mediaplayer. (mit Screenshot)
Ich habe in der index.html diese beiden Player folgendermaßen eingebunden. Der Code des unteren ist rechts im Screenshot zu sehen
<ftui-tab-view id="View4">
<!--ftui-grid-tile row="4" col="2" height="5" width="9">
<div class="size-10">Tab4</div>
</ftui-grid-tile-->
<ftui-grid-tile row="4" col="2" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="19" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
</ftui-tab-view>
hier mal ein Media Player dazu
<header class="size-4 thin"><ftui-label color="MediumSpringGreen">DreamSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="45%" color="">
<ftui-image [src]="SB3_DreamSqueezy:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%" color="">
<ftui-dropdown [list]="SB3_DreamSqueezy:ftuiPlaylistsAlias" [(value)]="SB3_DreamSqueezy:playlists" [color]="SB3_DreamSqueezy:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB3_DreamSqueezy:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB3_DreamSqueezy:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB3_DreamSqueezy:duration" [(value)]="SB3_DreamSqueezy:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB3_DreamSqueezy" [fill]="SB3_DreamSqueezy | map('on:solid, off:outline')"
[color]="SB3_DreamSqueezy | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB3_DreamSqueezy | map('on:power-off, off:power-off')"
[color]="SB3_DreamSqueezy | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:prev" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB3_DreamSqueezy:prev | map('on:step-backward, off:step-backward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB3_DreamSqueezy:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB3_DreamSqueezy" states="play,pause" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:stop" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:next" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB3_DreamSqueezy:next | map('on:step-forward, off:step-forward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:shuffle" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>
<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:repeat" states="off,one,all" [color]="SB3_DreamSqueezy:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB3_DreamSqueezy:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>
@setstate
Wäre es möglich bei ftui-label noch eine unit-size (in %) einzuführen.
Derzeit nutze ich <span slot="end"> und eine eigene Klasse um die Unit-Größe auf 50% zu reduzieren.
Grüße
Olli
Zitat von: moonsorrox am 04 Februar 2021, 15:32:22
@setstate
ich muss jetzt nochmal fragen wegen der Auslagerung einiger Seiten oder auch Popups, welche mir ums verrecken absolut nicht angezeigt werden.
selbst wenn ich den selben Inhalt in die ausgelagerte Datei schreibe wird mir nichts angezeigt, dass Fenster ist einfach leer ich begreife es absolut nicht :-\ :-\
Beide Dateien sind natürlich vorhanden... muss ich evtl eine ID vergeben oder warum geht das nicht. Ich habe selbiges Problem auch noch mit einem Popup, aber das lasse ich hier mal.
Dafür mal hier das Beispiel zweier Mediaplayer. (mit Screenshot)
Ich habe in der index.html diese beiden Player folgendermaßen eingebunden. Der Code des unteren ist rechts im Screenshot zu sehen
<ftui-tab-view id="View4">
<!--ftui-grid-tile row="4" col="2" height="5" width="9">
<div class="size-10">Tab4</div>
</ftui-grid-tile-->
<ftui-grid-tile row="4" col="2" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="19" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
</ftui-tab-view>
hier mal ein Media Player dazu
<header class="size-4 thin"><ftui-label color="MediumSpringGreen">DreamSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="45%" color="">
<ftui-image [src]="SB3_DreamSqueezy:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%" color="">
<ftui-dropdown [list]="SB3_DreamSqueezy:ftuiPlaylistsAlias" [(value)]="SB3_DreamSqueezy:playlists" [color]="SB3_DreamSqueezy:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB3_DreamSqueezy:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB3_DreamSqueezy:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB3_DreamSqueezy:duration" [(value)]="SB3_DreamSqueezy:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB3_DreamSqueezy" [fill]="SB3_DreamSqueezy | map('on:solid, off:outline')"
[color]="SB3_DreamSqueezy | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB3_DreamSqueezy | map('on:power-off, off:power-off')"
[color]="SB3_DreamSqueezy | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:prev" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB3_DreamSqueezy:prev | map('on:step-backward, off:step-backward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB3_DreamSqueezy:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB3_DreamSqueezy" states="play,pause" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:stop" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:next" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB3_DreamSqueezy:next | map('on:step-forward, off:step-forward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:shuffle" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>
<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:repeat" states="off,one,all" [color]="SB3_DreamSqueezy:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB3_DreamSqueezy:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>
Also bei mir werden beide Player angezeigt.
Lade doch mal deine komplette Index.html hoch
Ps: update gemacht?
Grüsse
@setstate
Ich sehe in der Console vom Browser den im Bild dargestellten Fehler.
Ist das bedingt dadurch das ich mit hidden arbeite um Karten auszublenden?
Wenn ja, könnte man das abfangen?
Swiper nutze ich derzeit nur an einer Stelle. Hier der Code:
<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play>
<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | map('0:true, 1:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="System_DWD_Wetter:a_count | map('0:true, 2:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="System_DWD_Wetter:a_count | map('0:true, 3:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="System_DWD_Wetter:a_count | map('0:true, 4:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="System_DWD_Wetter:a_count | map('0:true, 5:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="System_DWD_Wetter:a_count | map('0:true, 6:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="System_DWD_Wetter:a_count | map('0:true, 7:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="System_DWD_Wetter:a_count | map('0:true, 8:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="System_DWD_Wetter:a_count | map('0:true, 9:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="System_DWD_Wetter:a_count | map('0:true, 10:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="System_DWD_Wetter:a_count | map('0:true, 11:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="System_DWD_Wetter:a_count | map('0:true, 12:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>
Zitat von: octek0815 am 04 Februar 2021, 17:54:48
@setstate
Ich sehe in der Console vom Browser den im Bild dargestellten Fehler.
Ist das bedingt dadurch das ich mit hidden arbeite um Karten auszublenden?
Wenn ja, könnte man das abfangen?
Swiper nutze ich derzeit nur an einer Stelle. Hier der Code:
<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play>
<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | map('0:true, 1:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="System_DWD_Wetter:a_count | map('0:true, 2:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="System_DWD_Wetter:a_count | map('0:true, 3:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="System_DWD_Wetter:a_count | map('0:true, 4:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="System_DWD_Wetter:a_count | map('0:true, 5:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="System_DWD_Wetter:a_count | map('0:true, 6:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="System_DWD_Wetter:a_count | map('0:true, 7:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="System_DWD_Wetter:a_count | map('0:true, 8:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="System_DWD_Wetter:a_count | map('0:true, 9:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="System_DWD_Wetter:a_count | map('0:true, 10:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="System_DWD_Wetter:a_count | map('0:true, 11:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="System_DWD_Wetter:a_count | map('0:true, 12:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>
Den Fehler kann ich nicht nachvollziehen. Eigentlich läuft das so. Nur wartet das AutoPlay auch bei den nicht sichtbaren Slides 5s. Dadurch wirkt der Ablauf nicht gerade gleichmässig.
Zitat von: setstate am 04 Februar 2021, 19:08:13
Den Fehler kann ich nicht nachvollziehen. Eigentlich läuft das so. Nur wartet das AutoPlay auch bei den nicht sichtbaren Slides 5s. Dadurch wirkt der Ablauf nicht gerade gleichmässig.
Ich habe das hidden mal überall rausgenommen. Selber Fehler.
Nachtrag:
Es liegt auch nicht am Browser (Chrome). In Firefox das Selbe.
ich habe es jetzt etwas optimiert, aber damit ist die Ursache nicht weg, sondern nur der Fehler unterdrückt. Interessant wäre, welcher Index benutzt wird, wenn er kein Item dazu findet.
Zitat von: SirMarco am 03 Februar 2021, 13:26:32
Ein fixes Bild wäre Klasse :-)
ist jetzt mit drin
Hi @setstate, könntest du dir mal bitte den Beitrag ein paar posts vorher ansehen?
https://forum.fhem.de/index.php/topic,115259.msg1128889.html#msg1128889 (https://forum.fhem.de/index.php/topic,115259.msg1128889.html#msg1128889)
Hast du dazu ein Idee?
Zitat von: moonsorrox am 04 Februar 2021, 15:32:22
@setstate
ich muss jetzt nochmal fragen wegen der Auslagerung einiger Seiten oder auch Popups, welche mir ums verrecken absolut nicht angezeigt werden.
selbst wenn ich den selben Inhalt in die ausgelagerte Datei schreibe wird mir nichts angezeigt, dass Fenster ist einfach leer ich begreife es absolut nicht :-\ :-\
Beide Dateien sind natürlich vorhanden... muss ich evtl eine ID vergeben oder warum geht das nicht. Ich habe selbiges Problem auch noch mit einem Popup, aber das lasse ich hier mal.
Kann ich mir nicht erklären. content-multimedia1.html gibt es, sagst du ... Gibt es keine Fehler in der Console oder im Network-Tab? Und was passiert, wenn du zweimal content-multimedia.html reinschreibst, geht es dann?
Hi @setstate,
ich habe gerade den Segment-Button ausprobiert. Erst mal vielen Dank - ziemlich cool.
Wenn ich diesen jedoch nicht auf der Startseite, sondern auf auf einer eingebundenen content-Page integriere, wird dieser immer oben links dargestellt und die Grid-Tile -Row, -Col und -Width ignoriert.
<ftui-grid-tile row="19" col="1" height="2" width="4">
<ftui-segment id="segmentHomeState">
<ftui-segment-button value="home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="sleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="holiday">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>
VG, Thomas
EDIT: Hat sich erledgit. Passt jetzt. :)
Zitat von: ToM_ToM am 04 Februar 2021, 21:51:08
Hi @setstate, könntest du dir mal bitte den Beitrag ein paar posts vorher ansehen?
https://forum.fhem.de/index.php/topic,115259.msg1128889.html#msg1128889 (https://forum.fhem.de/index.php/topic,115259.msg1128889.html#msg1128889)
Hast du dazu ein Idee?
Sorry, das war ein Bug. Ist jetzt gefixed
Hiho, ich weiß nicht ob das jetzt auf einer der 55 Seiten schon Thema war,
aber kann ich theoretisch FTUI2 und V3 gleichzeitig auf einem System betreiben? Dann könnte man schon mal ein bisschen rumbasteln. :D
ja klar, durch unterschiedliche Foldernamen geht das ohne Probleme
FTUI2
/opt/fhem/www/tablet
FTUI3
/opt/fhem/www/ftui
Zitat von: setstate am 04 Februar 2021, 22:07:44
Kann ich mir nicht erklären. content-multimedia1.html gibt es, sagst du ... Gibt es keine Fehler in der Console oder im Network-Tab? Und was passiert, wenn du zweimal content-multimedia.html reinschreibst, geht es dann?
ja klar gibt es die content-multimedia1.html
wenn ich content-multimedia.html zweimal rein schriebe, sehe ich 2x den gleichen Player... Fehler gibt es keine
und ich habe auf dieser Seite nichts weiter als diese beiden Player
hier mal alles was in View4 drin steht
<ftui-tab-view id="View4">
<ftui-grid-tile row="4" col="2" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="19" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
</ftui-tab-view>Aber wie schon geschrieben ich habe dieses Phänomen nochmal das er es einfach nicht öffnet oder es leer ist.
Ich kann auch gerne beide content Dateien hier rein stellen, die sehen bis auf die Bezeichnung des Players absolut identisch aus.
hier sind sie
content-multimedia1.html
<header class="size-4 thin"><ftui-label color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="45%" color="light">
<ftui-image [src]="SB_Wohnzimmer:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%" color="dark">
<ftui-dropdown [list]="SB_Wohnzimmer:ftuiPlaylistsAlias" [(value)]="SB_Wohnzimmer:playlists" [color]="SB_Wohnzimmer:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB_Wohnzimmer:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB_Wohnzimmer:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB_Wohnzimmer:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB_Wohnzimmer:duration" [(value)]="SB_Wohnzimmer:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB_Wohnzimmer:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB_Wohnzimmer" [fill]="SB_Wohnzimmer | map('on:solid, off:outline')"
[color]="SB_Wohnzimmer | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB_Wohnzimmer | map('on:power-off, off:power-off')"
[color]="SB_Wohnzimmer | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:prev" [color]="SB_Wohnzimmer | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB_Wohnzimmer:prev | map('on:step-backward, off:step-backward')" [color]="SB_Wohnzimmer | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB_Wohnzimmer:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB_Wohnzimmer" states="play,pause" [color]="SB_Wohnzimmer:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB_Wohnzimmer:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:stop" [color]="SB_Wohnzimmer:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB_Wohnzimmer:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:next" [color]="SB_Wohnzimmer | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB_Wohnzimmer:next | map('on:step-forward, off:step-forward')" [color]="SB_Wohnzimmer | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:shuffle" states="off,song,album" [color]="SB_Wohnzimmer:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB_Wohnzimmer:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>
<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:repeat" states="off,one,all" [color]="SB_Wohnzimmer:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB_Wohnzimmer:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB_Wohnzimmer:volume"
[color]="SB_Wohnzimmer:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB_Wohnzimmer:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>content-multimedia.html
<header class="size-4 thin"><ftui-label color="MediumSpringGreen">DreamSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="45%" color="">
<ftui-image [src]="SB3_DreamSqueezy:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%" color="">
<ftui-dropdown [list]="SB3_DreamSqueezy:ftuiPlaylistsAlias" [(value)]="SB3_DreamSqueezy:playlists" [color]="SB3_DreamSqueezy:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB3_DreamSqueezy:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB3_DreamSqueezy:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB3_DreamSqueezy:duration" [(value)]="SB3_DreamSqueezy:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB3_DreamSqueezy" [fill]="SB3_DreamSqueezy | map('on:solid, off:outline')"
[color]="SB3_DreamSqueezy | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB3_DreamSqueezy | map('on:power-off, off:power-off')"
[color]="SB3_DreamSqueezy | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:prev" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB3_DreamSqueezy:prev | map('on:step-backward, off:step-backward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB3_DreamSqueezy:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB3_DreamSqueezy" states="play,pause" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:stop" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:next" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB3_DreamSqueezy:next | map('on:step-forward, off:step-forward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:shuffle" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>
<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:repeat" states="off,one,all" [color]="SB3_DreamSqueezy:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB3_DreamSqueezy:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>
möchte ja zu gern ewissen was hier falsch läuft...?
@moonsorrox
stimmen die Dateirechte? (könnte ja sein, dug un wech) 8)
Zitat von: torte am 05 Februar 2021, 06:34:38
@moonsorrox
stimmen die Dateirechte? (könnte ja sein, dug un wech) 8)
Oooooh wie recht du hast.... kann ja wohl nicht war sein.... daran habe ich nun überhaupt nicht gedacht.... ;)
ich habe hier diesen Slider in Benutzung
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>
ich kann ja mit
<ftui-slider (value)="scale(0,100,0,100) | fhemDev1" max="100"></ftui-slider>
den aktuellen Wert anziegen lassen, mir ist es aber nicht gelungen dieses bei mir einzubauen, evtl. weiß jemand wo das hin muss, am liebsten wäre es mir wenn ich das rechts neben dem Slider hinbekommen würde.
Zitat von: moonsorrox am 05 Februar 2021, 14:23:28
ich habe hier diesen Slider in Benutzung
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>
ich kann ja mit
<ftui-slider (value)="scale(0,100,0,100) | fhemDev1" max="100"></ftui-slider>
den aktuellen Wert anziegen lassen, mir ist es aber nicht gelungen dieses bei mir einzubauen, evtl. weiß jemand wo das hin muss, am liebsten wäre es mir wenn ich das rechts neben dem Slider hinbekommen würde.
so...
<ftui-row>
<ftui-column align-items="center" width="80%">
<ftui-slider class="_size-2em" [(value)]="Wohnzimmer_EG_Licht_Decke:pct" min="0" max="100"></ftui-slider>
</ftui-column>
<ftui-column width="20%">
<ftui-label class="_size-standard"
[text]="Wohnzimmer_EG_Licht_Decke:pct"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
oder so...
<ftui-row width="125%">
<ftui-column>
<ftui-slider class="_size-0punkt5em" [value]="Badezimmer_OG_Heizung_Clima:ValvePosition" min="0" max="100" handle="none" has-ruler readonly></ftui-slider>
<ftui-label style="margin-top:-1.1em;" class="_size-0punkt75em" [text]="Badezimmer_OG_Heizung_Clima:ValvePosition"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
Oder meinst Du was Anderes?
Zitat von: octek0815 am 05 Februar 2021, 15:20:04
Oder meinst Du was Anderes?
das ist schon richtig einmal bei dir die 53% der Beleuchtung und die Ventilstellung 10%, bei mir soll es die eingestellte Lautstärke sein....
Das hast du durch die class="_UnitStyle" gemacht, die gibt es aber doch nicht, oder sehe ich da was falsch.?
Du machst ja alles mit dem Unterstrich davor aber auch class="UnitStyle" gibt es nicht, deshalb hatte ich diese "scale" Sache auf github gefunden.
Aber ich bekomme die nicht eingebaut.
Zitat von: moonsorrox am 05 Februar 2021, 16:29:45
das ist schon richtig einmal bei dir die 53% der Beleuchtung und die Ventilstellung 10%, bei mir soll es die eingestellte Lautstärke sein....
Das hast du durch die class="_UnitStyle" gemacht, die gibt es aber doch nicht, oder sehe ich da was falsch.?
Du machst ja alles mit dem Unterstrich davor aber auch class="UnitStyle" gibt es nicht, deshalb hatte ich diese "scale" Sache auf github gefunden.
Aber ich bekomme die nicht eingebaut.
_UnitStyle ist eine eigene CSS Klasse.
._UnitStyle {
margin-left: 0.2em;
font-size: 0.5em;
}
Die nutze ich für alle Units da ich diese nur halb so groß wie der eigentliche Text sein sollen (Beispiel) siehe Bild.
Ich hatte schon bei setstate angefragt ob sowas als Option für ftui-label möglich wäre, da es ja unit in der Komponente schon gibt.
Beispielcode:
<ftui-row>
<ftui-column align-items="left">
<ftui-label text="{{displayname}}"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0 0 0 0.75" width="16%">
<ftui-label [text]="{{device}}:{{t-reading}} | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="16%">
<ftui-label [text]="{{device}}:humidity"
[color]="{{device}}:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label
</ftui-column>
</ftui-row>
Der Unterstrich (_) ist bei mir inzwischen Standard für alles was ich selbst definiere (quasi um unterscheiden zu können).
@moonsorrox
Habe übrigens Unwetterzentale entfernt und gegen DWD ersetzt (mit den neuen swiper von setstate).
Hier das Ergebnis...
Hallo
Ich tue mich gerade es schwer mit dem segment-button.
Ich habe in FHEM ein Device names "Pool" welches 3 states haben kann:
ein
auto
aus
Ich habe dann folgendes versucht:
<ftui-segment id="Pool">
<ftui-segment-button value="ein" >
<ftui-label>ein</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="auto">
<ftui-label>auto</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="aus">
<ftui-label>aus</ftui-label>
</ftui-segment-button>
</ftui-segment>
Der Button schaltet aber nicht beim drücken und wenn ich in Fhem klicke reagiert er auch nicht. Was habe ich missverstanden daran?
Danke für einen Hint...
Viele Grüsse Eppi
Du hast das Binding von und nach FHEM vergessen: [(value)]="<device>:<reading>"
<ftui-segment [(value)]="ftuitest">
<ftui-segment-button value="1">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="2">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="3">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="4">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Zitat von: setstate am 05 Februar 2021, 19:12:42
Du hast das Binding von und nach FHEM vergessen: [(value)]="<device>:<reading>"
Genau das war es! Vielen Dank setstate!
Ich nochmal. Bei einem reload der Seite schaltet der Segment-Button automatisch den ersten Zustand, bei mir ist das "ein".
<ftui-segment [(value)]="Pool" id="segment1">
<ftui-segment-button value="ein" >
<ftui-label>ein</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="auto">
<ftui-label>auto</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="aus">
<ftui-label>aus</ftui-label>
</ftui-segment-button>
</ftui-segment>
Danke für die analyse.
Viele Grüsse Eppi
ja, das stimmt. Ist jetzt gefixed
Zitat von: setstate am 05 Februar 2021, 20:22:33
ja, das stimmt. Ist jetzt gefixed
Danke vielmals!
Hinweis.
in der Clock ist glaube ein bug.
wenn ich das Datum so eingebe (Jahr 2-stellig):
<ftui-clock format="DD.MM.YY" class="size-1"></ftui-clock>
dann wird mir:
06.02.121
angezeigt.
wenn ich das Jahr 4-stellig (YYYY) angebe, wird das korrekte Jahr 2021 angezeigt.
oder mache ich was falsch???
mfg Thomas
Zitat von: mr_petz am 06 Februar 2021, 14:35:09
Hinweis.
in der Clock ist glaube ein bug.
wenn ich das Datum so eingebe (Jahr 2-stellig):
<ftui-clock format="DD.MM.YY" class="size-1"></ftui-clock>
dann wird mir:
06.02.121
angezeigt.
wenn ich das Jahr 4-stellig (YYYY) angebe, wird das korrekte Jahr 2021 angezeigt.
oder mache ich was falsch???
mfg Thomas
ja, das lag an der veralteten Funktion getYear(). Habe ich jetzt geändert.
Zitat von: setstate am 06 Februar 2021, 14:56:31
ja, das lag an der veralteten Funktion getYear(). Habe ich jetzt geändert.
@setstate
Da hier eh gerade das Thema Uhr behandelt wird...
Bei Android hängt nach einiger zeit die Uhr immer einige Sekunden zurück.
Wenn dann das Bild der Webcam mit der richtigen Zeit angezeigt wird, sieht das unschön aus.
Ich habe bisher keine vernünftige App gefunden um die regelmäßig mit NTP abzugleichen.
Wäre es nicht möglich die Zeit von FHEM zu holen und anzeigen zulassen?
In der Clock Komponente habe ich die Parameter "isFhemTime", "serverDiff" und "offset" gefunden.
Zitat von: octek0815 am 05 Februar 2021, 17:36:30
@moonsorrox
Habe übrigens Unwetterzentale entfernt und gegen DWD ersetzt (mit den neuen swiper von setstate).
Hier das Ergebnis...
das sieht super aus... meine alte Variante funktioniert aber auch noch hatte gerade die Tage das Popup neu gemacht für FTUI V.3
das mit der Anzeige habe ich noch nicht hinbekommen, denn bei mir wird gar nix angezeigt
Zitat von: octek0815 am 06 Februar 2021, 15:54:17
...
In der Clock Komponente habe ich die Parameter "isFhemTime", "serverDiff" und "offset" gefunden.
<ftui-clock is-fhem-time></ftui-clock>Damit wird die Zeit einmal beim Start von FHEM ermittelt und als serverDiff gespeichert.
Der JS Timer muss auf deinem Tablet dann aber trotzdem richtig "ticken"
Einen Offset kann man noch zusätzlich angeben.
offset="3"
Zitat
ftui-knob habe ich um ein desired-Attribut erweitert, damit man bei einem Thermostat das eigentliche Ziel sichtbar machen kann. Meine Frage wäre, ob dies nicht eine allgemeine Erweiterung wäre ... (s. angehängtes Bild)
Soweit ich das sehe ist das im aktuellen Stand noch nicht drin kommt das noch oder nicht?
Gruß
Eisix
Vielleicht sollten wir für setstate mal eine ToDo Liste machen. ;) ;D
Zitat von: grossmaggul am 06 Februar 2021, 17:57:12
Vielleicht sollten wir für setstate mal eine ToDo Liste machen. ;) ;D
Oder vielleicht etwas senden 8)
Link in seiner Signatur ;)
ZitatOder vielleicht etwas senden
Habsch schon.
Hi setstate und Community.
Ich habe mir natürlich auch gleich die V3 gekrallt und stelle mal wieder fest, dass das Grid gar nicht so hässlich ist ;D
Auf folgendes Problem bin ich jetzt nach vielen Stunden gestoßen... Ich komme da einfach nicht weiter...
<ftui-button [(value)]="bu_WT_Climate:controlMode" states="auto,manual" [fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')" [color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')" shape="circle">
<ftui-icon [name]="bu_WT_Climate:controlMode | map('auto|set_auto:oa-auto, manual|set_manual:oa-manual')" [color]="bu_WT_Climate:controlMode | map('auto:medium, manual:, set_auto|set_manual:danger')" [class-name]="bu_WT_Climate:controlMode | map('auto|manual:, set_auto|set_manual:blink')"></ftui-icon>
</ftui-button>
Das Icon macht ärger und ich komme nicht dahinter wo, wieso, weshalb, warum und schon gar nicht an welcher Stelle XD
Konsole sagt:
parseHoconException: Already met seperator 2 ftui.helper.js:115:17
error https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.helper.js:115
filter https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.binding.js:282
onReadingEvent https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.binding.js:87
onReadingEvent https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.binding.js:84
FtuiBinding https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.binding.js:49
publish https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.helper.js:410
publish https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.helper.js:410
updateReadingItem https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:82
parseRefreshResultSection https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:223
parseRefreshResult https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:155
parseRefreshResult https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:151
request https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:140
(Async: promise callback)
refresh https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:140
timer https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:116
(Async: setTimeout handler)
startRefreshInterval https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:114
startBinding https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.app.js:161
initComponents https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.app.js:96
initPage https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.app.js:78
init https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.app.js:65
main https://192.168.1.5:8083/fhem/ftui/ftui.js:7
<anonym> https://192.168.1.5:8083/fhem/ftui/ftui.js:19
(Async: EventListener.handleEvent)
<anonym> https://192.168.1.5:8083/fhem/ftui/ftui.js:16
Wäre toll wenn da mal jemand drüber schauen könnte :)
Dann hab ich noch Probleme mit den Dropdowns. Vielleicht kann setstate da noch ein - zwei Beispiele liefern?
zu: list
und vorallem die "verlinkung" zwischen "schön geschriebenem" Listeneintrag und dem "set-kommando"
Zudem ist mir aufgefallen, dass der "segment-button" noch ärger macht. auf der "active"-page lädt er die werte korrekt (darstellung). auf anderen seiten ist die darstellung fehlerhaft..
Danke schonmal und schönes Wochenende.
Grüße^^
Ich weiß es jetzt nicht genau, könnte aber sein, daß Du sowas
map('auto|set_auto:oa-auto, manual|set_manual:oa-manual')
mit Backticks quoten musst, also so
map('`auto|set_auto`:oa-auto, `manual|set_manual`:oa-manual')
Zitat von: setstate am 06 Februar 2021, 16:32:40
<ftui-clock is-fhem-time></ftui-clock>
Damit wird die Zeit einmal beim Start von FHEM ermittelt und als serverDiff gespeichert.
Der JS Timer muss auf deinem Tablet dann aber trotzdem richtig "ticken"
Einen Offset kann man noch zusätzlich angeben.
offset="3"
Alles klar danke, aber warum nun is-fhem-time und nicht wie in clock.component.js isFhemTime ?
@octek0815
Zitat
camelCase Properties kann man im FTUI per kebab-case Attribute setzen.
Im js-File nutzt man die übliche camelCase-Schreibweise - Worte werden durch Großbuchstaben getrennt.
Im html-File nutzt man die (nur aus Kleinbuchstaben bestehende) kebab-case-Schreibweise - Worttrenner ist ein Bindestrich.
@OdfFhem
Alles klar, besten Dank für die Erklärung.
Grad nochmal nachgelesen: https://medium.com/@bendcosta/famous-camelcase-vs-kebab-case-javascript-6415cac2052b
@roman1528
<ftui-grid-tile row="5" col="1" height="16" width="5" shape="round">
<ftui-button [(value)]="bu_WT_Climate:controlMode"
[fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')"
[color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')"
shape="circle" states="auto,manual" class="size-5">
<ftui-icon path="../images/openautomation/"
[name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')"
[color]="bu_WT_Climate:controlMode | map('auto:medium, manual:, set_auto|set_manual:danger')"
[class-name]="bu_WT_Climate:controlMode | map('auto|manual:, set_auto|set_manual:blink')"></ftui-icon>
</ftui-button>
<ftui-label [text]="bu_WT_Climate:controlMode"></ftui-label>
<ftui-button [(value)]="bu_WT_Climate:controlMode"
[fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')"
[color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')"
shape="circle" states="auto,manual" class="size-5">
<ftui-icon path="../images/openautomation/"
[name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')"
[color]="bu_WT_Climate:controlMode | map('auto:medium, manual:``, set_auto|set_manual:danger')"
[class-name]="bu_WT_Climate:controlMode | map('auto|manual:``, set_auto|set_manual:blink')"></ftui-icon>
</ftui-button>
<ftui-button [(value)]="bu_WT_Climate:controlMode"
[fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')"
[color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')"
shape="circle" states="auto,manual" class="size-5">
<ftui-icon path="../images/openautomation/"
[name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')"
[color]="bu_WT_Climate:controlMode | map('auto:medium, set_auto|set_manual:danger, manual:')"
[class-name]="bu_WT_Climate:controlMode | map('set_auto|set_manual:blink, auto|manual:')"></ftui-icon>
</ftui-button>
</ftui-grid-tile>
Test enthält drei Button mit jeweils einem Icon:
- Das erste/Dein Icon scheitert an der Zeichenfolge ":," - also praktisch kein Ergebnis bzw. setzt Error-Attribut.
- Das zweite Icon löst das Problem durch ":``," - es ergibt sich ein leeres Ergebnis
- Das dritte Icon stellt ":," ans Ende - hilft, falls man genau ein leeres Ergebnis hat
@setstet
Wäre es möglich für ftui-label noch unit-size und unit-position einzuführen?
Wie ich gesehen habe gibt es unit-size für ftui-knob.
Zitat von: OdfFhem am 07 Februar 2021, 07:22:17
@roman1528
<ftui-grid-tile row="5" col="1" height="16" width="5" shape="round">
<ftui-button [(value)]="bu_WT_Climate:controlMode"
[fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')"
[color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')"
shape="circle" states="auto,manual" class="size-5">
<ftui-icon path="../images/openautomation/"
[name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')"
[color]="bu_WT_Climate:controlMode | map('auto:medium, manual:, set_auto|set_manual:danger')"
[class-name]="bu_WT_Climate:controlMode | map('auto|manual:, set_auto|set_manual:blink')"></ftui-icon>
</ftui-button>
<ftui-label [text]="bu_WT_Climate:controlMode"></ftui-label>
<ftui-button [(value)]="bu_WT_Climate:controlMode"
[fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')"
[color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')"
shape="circle" states="auto,manual" class="size-5">
<ftui-icon path="../images/openautomation/"
[name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')"
[color]="bu_WT_Climate:controlMode | map('auto:medium, manual:``, set_auto|set_manual:danger')"
[class-name]="bu_WT_Climate:controlMode | map('auto|manual:``, set_auto|set_manual:blink')"></ftui-icon>
</ftui-button>
<ftui-button [(value)]="bu_WT_Climate:controlMode"
[fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')"
[color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')"
shape="circle" states="auto,manual" class="size-5">
<ftui-icon path="../images/openautomation/"
[name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')"
[color]="bu_WT_Climate:controlMode | map('auto:medium, set_auto|set_manual:danger, manual:')"
[class-name]="bu_WT_Climate:controlMode | map('set_auto|set_manual:blink, auto|manual:')"></ftui-icon>
</ftui-button>
</ftui-grid-tile>
Test enthält drei Button mit jeweils einem Icon:
- Das erste/Dein Icon scheitert an der Zeichenfolge ":," - also praktisch kein Ergebnis bzw. setzt Error-Attribut.
- Das zweite Icon löst das Problem durch ":``," - es ergibt sich ein leeres Ergebnis
- Das dritte Icon stellt ":," ans Ende - hilft, falls man genau ein leeres Ergebnis hat
Perfekt. Vielen vielen Dank.
Grüße^^
@setstate
Ich habe einen PR als Vorschlag für das desired-Feature der knob-Komponente angelegt.
Zitat von: octek0815 am 07 Februar 2021, 07:31:18
@setstet
Wäre es möglich für ftui-label noch unit-size und unit-position einzuführen?
Wie ich gesehen habe gibt es unit-size für ftui-knob.
ein
unit="°C" unit-size="4" unit-position="upper"ist nicht nicht wirklich kürzer oder einfacher als
<sup slot="end" class="size-4">°C</sup>Was gibt es denn für Ausprägungen? Maximal "half-size" und "half-size-upper". Dann könnte man auch size und position zusammenfassen?
Zitat von: OdfFhem am 07 Februar 2021, 10:53:14
@setstate
Ich habe einen PR als Vorschlag für das desired-Feature der knob-Komponente angelegt.
danke, werde ich mir ansehen.
Zitat von: roman1528 am 06 Februar 2021, 22:07:21
Hi setstate und Community.
....
Zudem ist mir aufgefallen, dass der "segment-button" noch ärger macht. auf der "active"-page lädt er die werte korrekt (darstellung). auf anderen seiten ist die darstellung fehlerhaft..
Grüße^^
Was passt da nicht, ich sehe auf dem Bild keine Fehler?
Zitat von: setstate am 07 Februar 2021, 11:23:07
Was passt da nicht, ich sehe auf dem Bild keine Fehler?
das blau hinterlegte passt nicht... steht auf der ersten option obwohl die 2. (15°C) aktiv ist (text ist heller).
Grüße^^
Hallo,
mit FTUI2 konnte ich die Temperatur meines HM-Thermostates auf folgendem Wege anzeigen (data-get) und schalten(data-set):
<div data-type="thermostat" data-device="HM_WohnzimmerGruppe" data-valve="valve_position"
data-get="1.SET_POINT_TEMPERATURE"
data-set="datapoint 1.CONTROL_MODE 0 1.SET_POINT_TEMPERATURE"
data-temp="1.ACTUAL_TEMPERATURE"
data-unit="°"
data-min="10"
class="large">
In FTUI3 sieht mein Versuch wie folgt aus:
<ftui-knob [value]="HM_WohnzimmerGruppe:1.SET_POINT_TEMPERATURE"
[color]="HM_WohnzimmerGruppe:1.SET_POINT_TEMPERATURE | map('10: blue, 18: warning, 23: danger')"
(value)="HM_WohnzimmerGruppe:datapoint 1.CONTROL_MODE 0 1.SET_POINT_TEMPERATURE"
max="30" min="10" unit="°C" has-scale has-arc has-scale-text has-needle size="2">
Leider wird beim Setzen der Temperatur der Value aus dem Widget nicht übertragen. In der JS-Konsole wird folgender Befehl Richtung FHEM gesendet
send to FHEM: set HM_WohnzimmerGruppe datapoint 1.CONTROL_MODE 0 1.SET_POINT_TEMPERATURE
Die am Widget eingestellte Temperatur wird nicht mit übertragen. Ich habe bereits versucht, den set-Befehl mit Backticks zu escapen. Leider ohne Erfolg.
Habt ihr eine Idee, wie ich zum Ziel komme?
Danke für die gute Arbeit!
Beim Output-Bindung wird versucht, das Muster
set Device Reading Wert zu finden und gegebenfalls die fehlenden Teile ergänzt.
Bei dir ist viel da und damit nur noch das "set" vorangestellt.
Ich weiß nicht, wo bei deinem Befehl der Wert aus dem Control hin muss.
Setze an dieser Stelle ein $value
Bei (value)="HM_WohnzimmerGruppe:datapoint" und einem eingestellten Wert von 23 wird
set HM_WohnzimmerGruppe datapoint 23 gesendet.
bei ftui-knob gibt es aber nur einen Augangswert. ControlMode, der sich ändert bei bestimmten Einstellungen, wie max oder min gibt es nicht.
Zitat von: setstate am 07 Februar 2021, 11:18:16
ein
unit="°C" unit-size="4" unit-position="upper"
ist nicht nicht wirklich kürzer oder einfacher als
<sup slot="end" class="size-4">°C</sup>
Was gibt es denn für Ausprägungen? Maximal "half-size" und "half-size-upper". Dann könnte man auch size und position zusammenfassen?
Hast natürlich Recht, über sup und sub habe ich garn nicht nachgedacht.
Hallo,
gibt es beim Knob eine Möglichkeit Decimal Stellen zu beschriften?
Siehe im Bild den ersten Knob, die Anzeige geht von 0 - 2 Bar und die Beschriftung sieht hier unvorteilhaft aus da nur ganze Zahlen dargestellt werden.
LG
@Reinhart
Aktuell kann man die Berücksichtigung der Dezimalstellen scheinbar nicht beeinflussen. Ich habe ein wenig rumprobiert und eine kleine Änderung in der Komponente vorgenommen. Anschließend erhält man ein Ergebnis wie im angehängten Bild. Ich weiss nicht, ob es jemand nutzen würde, aber auch die dezimalgenaue Übernahme eines eingestellten Wertes wäre möglich.
Sollte das in Ordnung sein, kann ich es vielleicht noch in den aktuellen PR übernehmen.
.
oh, ich habe die Dezimalstellenbeachtung jetzt auch schnell eingebaut
<ftui-knob value="1.2" max="2.0" min="1.0" ticks="6" type="scale" has-value-text has-scale-text></ftui-knob>
Automatisch per max="2.0" Vorgabe oder explizit per decimals="1"
Zitat von: roman1528 am 07 Februar 2021, 11:28:32
das blau hinterlegte passt nicht... steht auf der ersten option obwohl die 2. (15°C) aktiv ist (text ist heller).
Grüße^^
Ist jetzt gefixed
@setstate
bis gestern glaube ich war es so das der header immer mittig war, nun bekommen ich aber komplett links zu sehen.
<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>
ein align-items="center" bringt nichts, wie bekomme ich das wieder mittig muss ich mir einen header in css anlegen.?
@setstate
Das decimals-Attribut war auch meine Lösung ... allerdings ohne automatische Ermittlung. Im Übrigen finde ich die ticks-Erweiterung sehr nützlich ...
Da der knob-PR jetzt nicht mehr aktuell ist, sollte ich den entsprechend aktualisieren ?
Zitat von: setstate am 07 Februar 2021, 15:19:37
Ist jetzt gefixed
Perfekt. Vielen Dank! Läuft.
Hast du zum Dropdown noch ein paar Info's für uns?
Wie kann ich die list-Einträge mappen?
also sowas wie:
list="weiss25:Weiß 25%, weiss50:Weiß 50%, rot:Rot"oder:
list="RauteMusik.FM%20Harder:RauteMusik-Harder, radio%20ffn%20101.9%20%28Hot%20AC%29:FFN"ich habe einiges probiert... aber nichts klappt... und vorallem wie ist dann das linking zu "set"
ganz blicke ich durch FTUI 3 tatsächlich noch nicht durch... noch ist alles irgendwie "try and error"
Grüße^^
alles Perfekt, vielen Dank!
Funktioniert bestens da ich den Maxwert schon auf 2.0 hatte!
LG
Zitat von: moonsorrox am 07 Februar 2021, 15:34:46
@setstate
bis gestern glaube ich war es so das der header immer mittig war, nun bekommen ich aber komplett links zu sehen.
<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>
ein align-items="center" bringt nichts, wie bekomme ich das wieder mittig muss ich mir einen header in css anlegen.?
Nein, das muss bei dir durch etwas anderes hervorgerufen werden
<ftui-grid-tile row="1" col="2" height="1" width="2">
<header class="size-4 thin"><ftui-label color="green">CUSTOM-HEADER</ftui-label></header>
<ftui-row>
<div>1</div>
<div>2</div>
<div>3</div>
</ftui-row>
</ftui-grid-tile>
Zitat von: setstate am 07 Februar 2021, 16:17:25
Nein, das muss bei dir durch etwas anderes hervorgerufen werden
sieht bei mir so aus, ich habe am header nicht verändert bis auf das label
<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="40%">
<ftui-image [src]="SB_Wohnzimmer:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%">
<ftui-dropdown [list]="SB_Wohnzimmer:ftuiPlaylistsAlias" [(value)]="SB_Wohnzimmer:playlists" [color]="SB_Wohnzimmer:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB_Wohnzimmer:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB_Wohnzimmer:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>der aufruf der dateien so, nichts weiter im Tab drin
<ftui-tab-view id="multimedia">
<ftui-grid-tile row="4" col="2" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="19" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
</ftui-tab-view>
Zitat von: roman1528 am 07 Februar 2021, 15:51:22
Wie kann ich die list-Einträge mappen?
also sowas wie: list="weiss25:Weiß 25%, weiss50:Weiß 50%, rot:Rot"
oder: list="RauteMusik.FM%20Harder:RauteMusik-Harder, radio%20ffn%20101.9%20%28Hot%20AC%29:FFN"
Wie ich sehe, ist das noch nicht eingebaut. Value und Text ist gleich. Muss ich noch nachholen
EDIT:// habe den header weggenommen und es in eine row gepackt.... ist erst mal die beste Lösung, brauche ja keinen header
das ist mir jetzt ein Rätsel vorallem weil es gestern noch mittig war
ich habe dein Beispiel mal eingetragen auch der wandert nach links...! Habe meine user.css mal kontrolliert ich habe keine "header" Formatierung drin...
Was kann das noch sein
Alle header die ich habe egal ob nun im Popup oder so, sind alle mittig...
Meine komplette multimedia Datei, aber deine reicht ja schon aus um es zu sehen. :-\
<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="40%">
<ftui-image [src]="SB_Wohnzimmer:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%">
<ftui-dropdown [list]="SB_Wohnzimmer:ftuiPlaylistsAlias" [(value)]="SB_Wohnzimmer:playlists" [color]="SB_Wohnzimmer:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB_Wohnzimmer:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB_Wohnzimmer:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB_Wohnzimmer:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB_Wohnzimmer:duration" [(value)]="SB_Wohnzimmer:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB_Wohnzimmer:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>
<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB_Wohnzimmer" [fill]="SB_Wohnzimmer | map('on:solid, off:outline')"
[color]="SB_Wohnzimmer | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB_Wohnzimmer | map('on:power-off, off:power-off')"
[color]="SB_Wohnzimmer | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:prev" [color]="SB_Wohnzimmer | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB_Wohnzimmer:prev | map('on:step-backward, off:step-backward')" [color]="SB_Wohnzimmer | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB_Wohnzimmer:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB_Wohnzimmer" states="play,pause" [color]="SB_Wohnzimmer:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB_Wohnzimmer:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:stop" [color]="SB_Wohnzimmer:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB_Wohnzimmer:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>
<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:next" [color]="SB_Wohnzimmer | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB_Wohnzimmer:next | map('on:step-forward, off:step-forward')" [color]="SB_Wohnzimmer | map('on:white, off:white')"></ftui-icon>
</ftui-button>
<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:shuffle" states="off,song,album" [color]="SB_Wohnzimmer:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB_Wohnzimmer:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>
<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:repeat" states="off,one,all" [color]="SB_Wohnzimmer:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB_Wohnzimmer:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB_Wohnzimmer:volume"
[color]="SB_Wohnzimmer:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB_Wohnzimmer:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>
Hi setstate,
bei ftui-circlemenu kann ich anscheinend fill und shape nicht angeben. Ist das gewollt? Die Menu-Buttons haben dadurch ein unterschiedliches Aussehen.
<ftui-circlemenu fill="solid" shape="circle" direction="right-half" circle-radius="8">
Viele Grüße
Karlheinz
@setstate
Mir ist aufgefallen, dass das decimals-Attribut bei der knob-Komponente nicht nur die Skala beeinflusst, sondern auch die Wert-Darstellung.
Beim Thermometer sorgt die neue Theorie z.B. für folgendes Problem:
Man möchte volle Gradzahlen (decimals="0") einstellen können, erhält dann aber auch immer automatisch und unbeeinflussbar einen auf 0 Nachkommastellen gerundeten Messwert (x.5 wird zu x+1). Um den genauen Messwert darstellen zu können, muss man decimals beispielsweise auf 1 oder 2 stellen, muss dann aber auch entsprechend konzentriert die Einstellung für volle Gradzahlen vornehmen.
Ich persönlich fände es besser, wenn decimals ebenso wie ticks nur die Skala und damit die Einstellmöglichkeiten beeinflussen würde. Wer den darzustellenden Messwert beeinflussen möchte, sollte dabei eher auf die vorhandenen Pipes zurückgreifen.
Zitat von: torte am 01 Februar 2021, 10:12:59
Guten morgen,
bei mir kommt es zur Zeit zu einem komischen Verhalten. Nutze FTUI-Badge innerhalb eines Content Files.
Beim ersten anbrowsen (Inkognito/normal Chrome Browser) wird das Badge nicht angezeigt erst nach einem nochmaligen aktualisieren der Seite.
So ähnlich ist das Verhalten auch beim multi-icon auch innerhalb eines Content Files verbaut wird erstmalig nicht angezeigt nach dem aktualisieren aber schon.
Berechnungen todate() | Ago() mit intervall=60 werden auch erst nach Ablauf des ersten Intervalls angezeigt oder nach einem Refresh der Seite. (Auch in einem Content File verbautes ftui-label.
Ist ein Problem bei mir oder bei euch auch?
Grüße
Torte
Hallo, ich muss nochmal zurückkommen auf meine Post vom, 01.02. #760 @octek0815 scheint ja auch von diesem Verhalten betroffen zu sein.
Habe mir das heute morgen noch mal angeguckt und finde den Fehler nicht.
Nutze ich nur contentfiles mit der selben Datei läuft das sofort beim ersten anbrowsen der Seite. Sobald ich zwei unterschiedliche Contentfiles nutze wird das badge oder die Berechnung ago nicht durchgeführt bzw. erst nach nochmaligen aktualisieren der Seite.
hier mal meine contentfiles
Müll
<ftui-row>
<ftui-icon name="trash" color="{{iconcolor}}" [class-list]="{{device}} | map('0:blink size-4,1:hop size-3,2:size-2')"></ftui-icon>
<ftui-badge [text]="{{device}} | map('0:Heute, 1:Morgen, 2:')"
[color]="{{device}} | map('0:danger, 1:danger, 2:blue')"
[hidden]="{{device}} | map('0:false, 1:false, 2:true')" class="size-06">
</ftui-badge>
<ftui-badge [text]="{{device}}"
[color]="{{device}} | map('0:danger, 1:danger, 2:blue')"
[hidden]="{{device}} | map('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge>
</ftui-row>
Türen
<ftui-row align-items="top" class="size-0">
<ftui-column align-items="left" width="10%">
<ftui-icon class="size-06" name="{{displayicon}}" ></ftui-icon>
</ftui-column>
<ftui-column align-items="left" width="60%">
<ftui-label class="size-0" text="{{devicename}}"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="30%">
<ftui-label class="size-0" [text]="{{device}}:state:time | toDate() | ago() | timeFormat('h:mm Min')" interval="60" ></ftui-label>
</ftui-column>
</ftui-row>
Jetzt habe ich mal die Original Index.html von Setstate genommen und nur die beiden ContentFiles eingebaut aber auch selbst da ist das Verhalten so.
Ich finde den Fehler nicht, seht ihr einen? Ich verstehe es auch nicht weil es ja alles funktioniert aber halt nicht beim ersten mal nur nach nochmaligen aktualisieren der Webseite.
In der BrowserDebugConsole sind auch keine Fehler mmn.
Grüße
Torte
Moin zusammen.
Hat irgendjemand schon Weekprofile umgesetzt?
Danke euch, Grüße // André
@setstate
Wäre es möglich ftui-knob bei width und height nicht nur px anzugeben sondern auch Nutzung von % Werte einzubauen?
Zitat von: khk123 am 07 Februar 2021, 18:39:01
Hi setstate,
bei ftui-circlemenu kann ich anscheinend fill und shape nicht angeben. Ist das gewollt? Die Menu-Buttons haben dadurch ein unterschiedliches Aussehen.
<ftui-circlemenu fill="solid" shape="circle" direction="right-half" circle-radius="8">
Viele Grüße
Karlheinz
circlemenu ist nur das Zusammen/Auseinaderschieben der Child-Nodes. Stylen musst du die Kinder. Das erste Kind ist das sichtbare open/close Item.
Zitat von: octek0815 am 08 Februar 2021, 16:05:33
@setstate
Wäre es möglich ftui-knob bei width und height nicht nur px anzugeben sondern auch Nutzung von % Werte einzubauen?
leider erweist sich das als schwierig und bis jetzt habe ich das noch nicht hinbekommen.
Zitat von: setstate am 08 Februar 2021, 18:06:53
circlemenu ist nur das Zusammen/Auseinaderschieben der Child-Nodes. Stylen musst du die Kinder. Das erste Kind ist das sichtbare open/close Item.
Danke dir für die Erklärung. Wenn ich nur ein ftui-label als erstes Element des Circle-Menues einbaue, funktioniert es nicht.
<ftui-icon path="../images/openautomation" name="control_building_empty" fill="solid" shape="circle" color="dark" color="success"></ftui-icon>Mit einem ftui-tab als erstes Element geht es.
<ftui-circlemenu direction="right-half" circle-radius="8">
<ftui-tab fill="solid" shape="circle" color="dark">
<ftui-icon path="../images/openautomation" name="control_building_empty" color="success"></ftui-icon>
</ftui-tab>
<ftui-tab view="flur" fill="solid" shape="circle" color="Aquamarine" direction="vertical" title="Flur">
<ftui-icon path="../images/openautomation" name="scene_hall"></ftui-icon>
</ftui-tab>
<ftui-tab view="wohnen" fill="solid" shape="circle" color="YellowGreen" direction="vertical" title="Wohnzimmer">
<ftui-icon path="../images/openautomation" name="scene_livingroom"></ftui-icon>
</ftui-tab>
<ftui-tab view="kueche" fill="solid" shape="circle" color="Peru" direction="vertical" title="Küche">
<ftui-icon path="../images/openautomation" name="scene_cooking"></ftui-icon>
</ftui-tab>
...
Die Background-Farbe des Icons ändert sich bei Aktivierung nicht. Kann ich eine Farbe bei Aktivierung des Circlemenues irgenwie angeben?
Viele Grüße
Karlheinz
Zitat von: setstate am 08 Februar 2021, 22:12:18
leider erweist sich das als schwierig und bis jetzt habe ich das noch nicht hinbekommen.
Alles klar, kein Stress.
Moin,
ich bin gerade mit Fhem auf einem PI 4 umgezogen, habe mir ein neues Tablet gegönnt (Samsung Galaxy Tab A8) und da lag es nahe hier auf FTUI v3 umzusteigen.
Von FTUI 3 bin ich bisher recht begeistert und bin da über ein paar Dinge gestolpert:
1. Auf https://knowthelist.github.io/ftui/www/ftui/examples/swiper.html ist zu sehen wie <ftui-content> verwendet werden kann und wie Parameter an die referenzierte Datei übergeben werden.
<ftui-content id="sw1_1" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
<ftui-row align-items="bottom">
<ftui-label [text]="AgroWeather:{{day}}_tempMin" size="5" unit="°C" class="thin"></ftui-label>
<ftui-label [text]="AgroWeather:{{day}}_tempMax" size="10"><sup slot="end" class="size-4">°C</sup></ftui-label>
</ftui-row>
Hier würde ich gerne "day" und ggf. weitere Parameter via Reading übergeben können, was mir aber nicht gelungen ist. Gibt es dafür einen Weg?
Aufgefallen ist mir noch, dass ich gelegentlich öfter ein Reload der Seite ausführen muss, um die Änderungen in einer content-Datei zu sehen zu bekommen.
2. Lässt sich in einem Popup auch <ftui-grid> verwenden?
3. Warum auch immer habe ich es in einem Popup nicht hinbekommen ein <ftui-column shape="round" color="green"> mit abgerundeten Ecken zu erstellen (im Beispiel sind davon jetzt ganz viele drin).
<ftui-popup id="wetter_fc0" timeout="10", height="188px" width="861px">
<header>WETTER HEUTE</header>
<ftui-content file="content/content-weather-popup.html" day="fc0"></ftui-content>
</ftui-popup>
content/content-weather-popup.html:
<ftui-row>
<ftui-column shape="round">
<header>MORGENS</header>
<ftui-content file="content/content-weather-day-part.html" day="{{day}}" time="06">
</ftui-content>
</ftui-column>
<ftui-column shape="round" margin="1">
<header>MITTAGS</header>
<ftui-content file="content/content-weather-day-part.html" day="{{day}}" time="12">
</ftui-content>
</ftui-column>
<ftui-column shape="round">
<header>ABENDS</header>
<ftui-content file="content/content-weather-day-part.html" day="{{day}}" time="18">
</ftui-content>
</ftui-column>
</ftui-row>
content/content-weather-day-part.html:
<ftui-column color="green" shape="round">
<ftui-row>
<ftui-column height="70%"">
<ftui-row align-items="bottom">
<ftui-label [text]="sys_Wetter:{{day}}_temp{{time}}" size="10"><sup slot="end" class="size-4">°C</sup></ftui-label>
</ftui-row>
<ftui-row>
<ftui-icon name="umbrella" size="1"></ftui-icon>
<ftui-label [text]="sys_Wetter:{{day}}_rain{{time}}" size="2" unit="mm"></ftui-label>
<ftui-label [text]="sys_Wetter:{{day}}_chOfRain{{time}}" size="2" unit="%"></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-weather [condition]="sys_Wetter:{{day}}_weather{{time}}" class="size-6"></ftui-weather>
<ftui-label [text]="sys_Wetter:{{day}}_weather{{time}}"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-column>
4. Für eine Hue-Laterne möchte ich gerne 2-3 Readings (HUEDevice4.ct, HUEDevice4.pct, ...) mit einem einzigen Button setzen können - lässt sich auch mit einem Dummy machen. Gibt es auch einen Weg via FTUI?
Danke
Ralf
Hallo,
kann mich mal jemand vom Schlauch schubsen :)
Ich möchte die Farbe des Button je nach on/off eines readings verändern, aber ein anderes reading damit schalten. Geht das nicht oder wo habe ich einen Fehler?
<ftui-button [value]="FBH_WZ:status" (value)="setreading FBH_WZ status $value" states="auto,man,frost,off" shape="circle" fill="solid"
[color]="FBH_WZ:actorState | map('on:orange, off:grey')">
<ftui-icon class="size-2"
[name]="FBH_WZ:status | map('man:sani_heating_manual, auto:sani_heating_automatic, frost:snowflake-o, off:general_aus')"
[color]="FBH_WZ:status | map('man:blue, auto:mygreen, frost:yellow, off:white')"
></ftui-icon>
</ftui-button>
Gruß
Eisix
sieht eigentlich OK aus... mal den Browsercache geleert... ich falle darauf immer wieder rein
Zitat von: Eisix am 09 Februar 2021, 17:12:14
Ich möchte die Farbe des Button je nach on/off eines readings verändern, aber ein anderes reading damit schalten. Geht das nicht oder wo habe ich einen Fehler?
Oder wäre das nicht einfacher zu lösen mit einem Segment-Button?
https://knowthelist.github.io/ftui/www/ftui/examples/segment.html
Gruss Eppi
Cache ist es nicht.
@Thyraz
Hi, kannst du noch bei dem calendar das Alter mit errechnen und ausgeben lassen wie im alten calview? Ich nutze den nur als Geburtstagskalender.
Und kann man entweder alles mit dot's oder gar kein dot einstellen, weil ja der erste Eintrag farbig ohne dot ist und die anderen am selben Tag mit und ohne Farbe?
Es erscheint ja auch hinter dem dot bei mir all-day (wegen gleichen Start/End). Das habe ich im main-Code für mich raus genommen.
Die Colors der Events der einzelnen Tage würde ich auch gern für jeden Tag anpassen wollen. Geht das?
Beim neu laden der Seite kommt auch durch den selben Start End Eintrag folgender Fehler:
calendar.component.js:59
TypeError: arg.event.end is null
Kalender *.ics sieht im Format so aus:
BEGIN:VCALENDAR
PRODID:-//calcurse//NONSGML v4.0.0//EN
VERSION:2.0
BEGIN:VEVENT
DTSTART:19500910
DTEND:19500910
RRULE:FREQ=YEARLY
SUMMARY: Wolfgang
DESCRIPTION: 1950
END:VEVENT
Danke für deine mühen.
mfg Thomas
Hey, kann mir jemand beim Segment-Button für den Homestatus helfen?
Ich versuche das was in FTUI2 funktioniert, zu FTUI3 zu portieren. Jedoch finde ich nicht ganz raus welche Angaben der Segment Button in welcher Form benötigt.
FTUI 2
<div data-type="homestatus" data-device='Homestatus'
data-get-on='["Home","Sleep","Away","Holiday", "Work"]'
data-alias='["Daheim","Schlafen","Abwesend","Urlaub", "Arbeit"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase", "fa-desktop"]'
data-version='residents'
class="narrow bigger">
</div>
FTUI 3
<ftui-segment id="segmentHomeState" [value]="Homestatus" class="size-2">
<ftui-segment-button (value)="Homestatus.Home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Sleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
VG, Thomas
Hi Thomas,
bei "[(value)]" dein gewünschtes Device eintragen und bei "value=" den Wert des Devices.
<ftui-segment id="segmentHomeState" [(value)]="HomeStatus1" class="size-2">
<ftui-segment-button value="1">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="2">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="3">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="4">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
In den FTUI-Examples findest du auch entsprechende Beispiele.
Viele Grüße
Karlheinz
Hi Karlheinz,
die Examples hatte ich mir angesehen und das auch entsprechend nachgebaut, aber leider funktioniert das Ganze nicht.
Anbei nochmal mein FHEM Device und mein FTUI3 Code-Schnipsel:
Internals:
FUUID 5c4434b4-f33f-762f-7e0a-886e914ef8498f9e
FVERSION 98_dummy.pm:0.206650/2019-12-06
NAME Homestatus
NR 361
STATE Work
TYPE dummy
READINGS:
2021-02-10 13:25:01 state Work
Attributes:
room Allgemein
setList Home Away Work Holiday Sleep
<ftui-grid-tile row="19" col="1" height="2" width="5">
<ftui-segment id="segmentHomeState" ([value])="Homestatus" class="size-2">
<ftui-segment-button value="Home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Sleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Away">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Holiday">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>
VG, Thomas
Schick mal die Definitionen deines Homestatuss-Devices.
Gruß
Karlheinz
ZitatSchick mal die Definitionen deines Homestatuss-Devices.
defmod Homestatus dummy
attr Homestatus DbLogExclude .*
attr Homestatus room Allgemein
attr Homestatus setList Home Away Work Holiday Sleep
setstate Homestatus Work
setstate Homestatus 2021-02-10 13:25:01 state Work
Hallo,
nochmal konkret die Frage die ich habe, kann ich zwei readings in einem button benutzen?
<ftui-button
[value]="{{FBH}}:status"
(value)="setreading {{FBH}} status $value" states="auto,man,frost,off" shape="circle" fill="solid"
[color]="{{FBH}}:actorState | map('on:orange, off:grey')">
<ftui-icon class="size-2"
[name]="{{FBH}}:status | map('man:sani_heating_manual, auto:sani_heating_automatic, frost:snowflake-o, off:general_aus')"
[color]="{{FBH}}:status | map('man:blue, auto:mygreen, frost:yellow, off:white')"
></ftui-icon>
</ftui-button>
Ist das grundsätzlich nicht möglich oder habe ich einen Syntaxfehler?
Gruß
Eisix
Das geht. Probier doch mal ohne ftui-content.
Funktioniert mit den folgenden Definitionen bei mir einwandfrei. Hab beide Richtungen getestet. Zustand in FHEM geändert, wird korrekt in FTUI angezeigt und auch umgekehrt.
Falls es bei dir nicht funktioniert, evtl. mal FTUI updaten?
defmod HomeStatus2 dummy
attr HomeStatus2 DbLogExclude .*
attr HomeStatus2 room Allgemein
attr HomeStatus2 setList Home Away Work Holiday Sleep
<ftui-segment id="segmentHomeState" [(value)]="HomeStatus2" class="size-2">
<ftui-segment-button value="Home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Away">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Work">
<ftui-icon name="wrench"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Holiday">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Sleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Gruß
Karlheinz
Mit den Farben primary, secondary, .. geht es mit und ohne content file so wie es aussieht.
<ftui-button [value]="FBH_A:status" (value)="setreading FBH_A status $value" states="auto,man,frost,off" shape="circle" fill="solid" class="size-3"
[color]="FBH_A:actorState | map('on:third, off:primary')">
<ftui-icon class="size-2"
[name]="FBH_A:status | map('man:sani_heating_manual, auto:sani_heating_automatic, frost:snowflake-o, off:general_aus')"
[color]="FBH_A:status | map('man:blue, auto:mygreen, frost:yellow, off:white')"
></ftui-icon>
</ftui-button>
Gruß
Eisix
Zitat von: octek0815 am 05 Februar 2021, 15:20:04
Hi octek0815,
mir gefällt deine Thermostat-Anzeige. Hab aber ein paar Formatierungs-Probleme dies nachzubauen. Würdest du mal deine Definitionen auflisten, wenn ich höflich darum bitte? :)
VG
Karlheinz
Zitat von: khk123 am 10 Februar 2021, 18:15:07
Zitat von: octek0815 am 05 Februar 2021, 15:20:04
Hi octek0815,
mir gefällt deine Thermostat-Anzeige. Hab aber ein paar Formatierungs-Probleme dies nachzubauen. Würdest du mal deine Definitionen auflisten, wenn ich höflich darum bitte? :)
VG
Karlheinz
Moin Karlheinz,
klar kann ich dir (euch das zur Verfügung stellen)...
Grundgerüst für eine Zeile...
<ftui-row>
<ftui-column class="_size-standard">
<ftui-row align-items="left" height="50%">
<ftui-label text="Raum" class="bold"></ftui-label>
</ftui-row>
<ftui-row align-items="left">
<ftui-label text="Bad oben"></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column class="_size-standard">
<ftui-row height="50%">
<ftui-label text="Solltemp." class="bold"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-content file="./_contents/tablet-flur/content-heizung-thermostate-content-solltemp.html" device="Badezimmer_OG_Heizung_Clima"></ftui-content>
</ftui-row>
</ftui-column>
<ftui-column class="_size-standard">
<ftui-row height="50%">
<ftui-label text="Temp." class="bold"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column width="3%">
</ftui-column>
<ftui-column class="_size-standard">
<ftui-row height="50%">
<ftui-label text="Ventil(e)" class="bold"></ftui-label>
</ftui-row>
<ftui-row width="125%">
<ftui-column>
<ftui-slider class="_size-0punkt5em" [value]="Badezimmer_OG_Heizung_Clima:ValvePosition" min="0" max="100" handle="none" has-ruler readonly></ftui-slider>
<ftui-label style="margin-top:-1.1em;" class="_size-0punkt75em" [text]="Badezimmer_OG_Heizung_Clima:ValvePosition"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
</ftui-column>
<ftui-column width="3%">
</ftui-column>
<ftui-column class="_size-standard">
<ftui-row height="50%">
<ftui-label text="Modus" class="bold"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-content file="./_contents/tablet-flur/content-heizung-thermostate-content-modus.html" device="Badezimmer_OG_Heizung_Clima"></ftui-content>
</ftui-row>
</ftui-column>
</ftui-row>
content-heizung-thermostate-content-solltemp.html...
<ftui-column>
<ftui-row class="_spinner">
<ftui-column>
<ftui-button [value]="{{device}}:desired-temp"
(value)="add(-0.5) | {{device}}:desired-temp" states="$value" fill="">
<ftui-icon class="_size-0punkt5em" name="minus" color="blue"></ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column style="width:25%;">
<ftui-label [text]="{{device}}:desired-temp | fix(1)" style="margin-left:0.2em;" class="bold"><span slot="end" class="_UnitStyle">°C</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="{{device}}:desired-temp"
(value)="add(0.5) | {{device}}:desired-temp" states="$value" fill="">
<ftui-icon class="_size-0punkt5em" name="plus" color="red"></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
</ftui-column>
content-heizung-thermostate-content-modus.html
<ftui-row [hidden]="{{device}}:controlMode | map('set_auto:true, set_manual:true, set_boost:true, auto:false, boost:false, manual:false')">
<ftui-button style="margin-right:0.25em;" class="_size-2punkt25vh" shape="circle" [fill]="{{device}}:controlMode | map('.*auto:solid, .*manual:outline, .*boost:outline')"
[color]="{{device}}:controlMode | map('.*auto:primary, .*manual:white, .*boost:white')"
(value)="set {{device}}:controlMode auto">
<ftui-icon color="white" name="_heating_automatic"
[class-name]="{{device}}:controlMode | map('set_auto:blink')"></ftui-icon>
</ftui-button>
<ftui-button class="_size-2punkt25vh" shape="circle" [fill]="{{device}}:controlMode | map('.*auto:outline, .*manual:solid, .*boost:outline')"
[color]="{{device}}:controlMode | map('.*auto:white, .*manual:primary, .*boost:white')"
(value)="set {{device}}:controlMode manual">
<ftui-icon color="white" name="_heating_manual"
[class-name]="{{device}}:controlMode | map('set_manual:blink')"></ftui-icon>
</ftui-button>
<ftui-button style="margin-left:0.25em;" class="_size-2punkt25vh" shape="circle" [fill]="{{device}}:controlMode | map('.*auto:outline, .*manual:outline, .*boost:solid')"
[color]="{{device}}:controlMode | map('.*auto:white, .*manual:white, .*boost:primary')"
(value)="set {{device}}:controlMode boost">
<ftui-icon color="white" name="_heating_boost"
[class-name]="{{device}}:controlMode | map('set_boost:blink')"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row [hidden]="{{device}}:controlMode | map('set_auto:false, set_manual:false, set_boost:false, auto:true, boost:true, manual:true')">
<ftui-icon class="_size-2punkt25vh spin" color="primary" name="cog"></ftui-icon>
<ftui-icon class="_size-2punkt25vh spin" color="primary" name="cog"></ftui-icon>
<ftui-icon class="_size-2punkt25vh spin" color="primary" name="cog"></ftui-icon>
</ftui-row>
CSS Klassen...
._UnitStyle {
margin-left: 0.2em;
font-size: 0.5em;
}
._size-standard {
font-size: 2.9vh;
}
._size-0punkt5em {
font-size: 0.5em;
}
._size-0punkt75em {
font-size: 0.75em;
}
._size-2punkt25vh {
font-size: 2.25vh;
}
._spinner {
background-color: #696969;
border-radius: 1.5em;
width: 80%;
height: 2.25em;
}
Bei Fragen einfach melden...
Viele Grüße
Olli
ZitatFunktioniert mit den folgenden Definitionen bei mir einwandfrei.
Danke Karlheinz. Wenn
[(value)]="Homestatus" schreibe, geht's bei mir auch. Hatte das vorher vertauscht gehabt. Also so:
([value])="Homestatus" Doofer Fehler. ::)
VG, Thomas
Zitat von: ToM_ToM am 10 Februar 2021, 21:59:52
Danke Karlheinz. Wenn [(value)]="Homestatus" schreibe, geht's bei mir auch. Hatte das vorher vertauscht gehabt. Also so: ([value])="Homestatus" Doofer Fehler. ::)
VG, Thomas
Man kann sich das leicht merken:
"BANANA IN A BOX"
[] = box
() = banana.
[()] = banana in a box 😃
Zitat von: ToM_ToM am 10 Februar 2021, 21:59:52
Danke Karlheinz. Wenn [(value)]="Homestatus" schreibe, geht's bei mir auch. Hatte das vorher vertauscht gehabt. Also so: ([value])="Homestatus" Doofer Fehler. ::)
VG, Thomas
Ooops, das habe ich auch übersehen. Aber schön, wenn wir es gemeinsam lösen konnten. :D
Gruß
Karlheinz
Zitat von: octek0815 am 10 Februar 2021, 20:41:16
Moin Karlheinz,
klar kann ich dir (euch das zur Verfügung stellen)...
Bei Fragen einfach melden...
Viele Grüße
Olli
Vielen Dank für deine Anregungen! :)
Gruß
Karlheinz
@setstate, @all
Entweder habe ich ein Denkfehler oder habe den SegmentedButton mit Binding nicht verstanden.
Ich wollte meine Betriebsmodi darüber steuern und anzeigen lassen. Hier im Test off, on und auto.
Es werden aber nicht die richtigen einzelnen segment-button- icons angezeigt. die set Befehle gehen alle. Das Blaue Feld switcht auch nicht mit um wenn ich aus fhem oder Alexa schalte. Irgendwas will nicht. Er will auch immer ein on bzw auto.svg, obwohl ich ja die richtigen Icons angegeben habe.
<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2">
<ftui-segment-button value="off">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
</ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="on">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('on|set_on:an_mode')"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('on:red')">
</ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="auto">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('auto|set_auto:auto_mode')"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('auto:blue')">
</ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="4">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Heizmodus=setBefehle
Mode_hcmode1_value=Reading
Geht das so nicht?
Danke für nen Tip.
mfg Thomas
Zitat von: mr_petz am 11 Februar 2021, 12:09:07
@setstate, @all
Entweder habe ich ein Denkfehler oder habe den SegmentedButton mit Binding nicht verstanden.
Ich wollte meine Betriebsmodi darüber steuern und anzeigen lassen. Hier im Test off, on und auto.
Es werden aber nicht die richtigen einzelnen segment-button- icons angezeigt. die set Befehle gehen alle. Das Blaue Feld switcht auch nicht mit um wenn ich aus fhem oder Alexa schalte. Irgendwas will nicht. Er will auch immer ein on bzw auto.svg, obwohl ich ja die richtigen Icons angegeben habe.
<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2">
<ftui-segment-button value="off">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
</ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="on">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('on|set_on:an_mode')"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('on:red')">
</ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="auto">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('auto|set_auto:auto_mode')"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('auto:blue')">
</ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="4">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Heizmodus=setBefehle
Mode_hcmode1_value=Reading
Geht das so nicht?
Danke für nen Tip.
mfg Thomas
Hallo Thomas,
du musst bei den einzelnen Segments die Icons fest definieren, siehe Example von setstate...
<ftui-segment [(value)]="ftuitest">
<ftui-segment-button value="1">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="2">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="3">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="4">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Grüße
Olli
Zitat von: octek0815 am 11 Februar 2021, 12:18:23
Hallo Thomas,
du musst bei den einzelnen Segments die Icons fest definieren, siehe Example von setstate...
Dein Device und Reading "MQTT2_ebusd:Mode_hcmode1_value" liefert ja ein Wert und wenn du mappst und kein passende Mapping da ist versucht ftui dann das Icon entsprechend dem gelieferten Rückgabewert anzuzeigen.
In deinem Fall (im Bild) "auto". Da es das Icon scheinbar nicht findet wird der Fehler angezeigt.
<ftui-segment [(value)]="ftuitest">
<ftui-segment-button value="1">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="2">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="3">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="4">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Grüße
Olli
ich versteh´s trotzdem nicht. ???
Ich muss ja einerseits den set Befehl angeben und andererseits das Reading.
wie muss ich dann hier das Icon angeben?
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
</ftui-icon>
Ich habe ja das Icon angegeben:
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')"
muss ich das dann so schreiben?
name="MQTT2_ebusd:Mode_hcmode1_value off|set_off:aus_mode"
Ich habe keine Ahnung sorry???
OK so geht es:
name="auto_mode"
nur das der Blaue Balken sich nicht automatisch verschiebt.
Zitat von: mr_petz am 11 Februar 2021, 13:29:41
ich versteh´s trotzdem nicht. ???
Ich muss ja einerseits den set Befehl angeben und andererseits das Reading.
wie muss ich dann hier das Icon angeben?
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
</ftui-icon>
Ich habe ja das Icon angegeben:
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')"
muss ich das dann so schreiben?
name="MQTT2_ebusd:Mode_hcmode1_value off|set_off:aus_mode"
Ich habe keine Ahnung sorry???
Bei ftui-icon ist "name" der Icon-Name.
In deinem Fall würde es dann so aussehen...
<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2">
<ftui-segment-button value="off">
<ftui-icon name="aus_mode"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="on">
<ftui-icon name="an_mode"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="auto">
<ftui-icon name="auto_mode"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Deine gewünschten Farben solltest Du dann in CSS definieren.
Wenn Du in die ftui-theme.css in themes schaust, findest du den passenden Bereich:
--segments-background-color: var(--medium-color);
--segments-separator-color: var(--dark-color);
--segments-selection-color: var(--primary-color);
--segments-selection-contrast-color: var(--primary-contrast-color);
--segments-hover-color: var(--light-color);
Diese kann Du entweder in einer eigenen Theme definieren oder in deiner index.html im body Bereich mit style.
Grüße
Olli
Danke dir Olli.
Jetzt muss sich doch der Blaue Balken mit zum entsprechenden Status bewegen oder?
Zitat von: mr_petz am 11 Februar 2021, 13:50:28
Danke dir Olli.
Jetzt muss sich doch der Blaue Balken mit zum entsprechenden Status bewegen oder?
Ich habe das gerade mit einem Dummy nachgebaut und es funktioniert.
Um zu helfen muss man wissen was Mode_hcmode1_value und was Heizmodus sind.
Und wie wird das Device gesteuert?
Zitat von: octek0815 am 11 Februar 2021, 14:58:10
Ich habe das gerade mit einem Dummy nachgebaut und es funktioniert.
Um zu helfen muss man wissen was Mode_hcmode1_value und was Heizmodus sind.
Und wie wird das Device gesteuert?
Hatte ich oben schon geschrieben:
Heizmodus=set Befehle
Mode_hcmode1_value=Reading
Und was meinst du mit Device gesteuert?
Edit:
die Farben wechseln zum entsprechenden segment-button. nur der Blaue darüber nicht. Hier nochmal der Codeausschnitt von off:
<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2" shape="round">
<ftui-segment-button value="off">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value | map('off:off')"
name="aus_mode"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
</ftui-icon>
</ftui-segment-button>
@mr_petz
hör doch mal auf, immer die icon-color manipulieren zu wollen, dass macht ftui-segment für dich. ftui-segment setzt den blauen Block über das Feld, was dem Value entspricht.
Wenn für den ftui-segment über deinen MQTT2_ebusd:Heizmodus der value 'off' reinkommt, wir der blaue Block über das Segment mit dem value = 'off' geschoben. Die Icons oder der Text innerhalb des Segments sind statisch und haben keine [...]
Zitat von: mr_petz am 11 Februar 2021, 15:58:14
Hatte ich oben schon geschrieben:
Heizmodus=set Befehle
Mode_hcmode1_value=Reading
Und was meinst du mit Device gesteuert?
Edit:
die Farben wechseln zum entsprechenden segment-button. nur der Blaue darüber nicht. Hier nochmal der Codeausschnitt von off:
<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2" shape="round">
<ftui-segment-button value="off">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value | map('off:off')"
name="aus_mode"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
</ftui-icon>
</ftui-segment-button>
So ich habe es nun nochmal nachgebaut und jetzt habe ich es verstanden.
Korrigiere mich wenn ich falsch liege.
Ein set MQTT2_ebusd Heizmodus auto in FHEM ändert den Heizmodus deiner Vaillant Heizung in den Automatikmodus und dabei wird das Reading Mode_hcmode1_value dann auf den Wert auto gesetzt?
Dann muss dein Code so aussehen...
<ftui-segment id="setVaillantState" [value]="MQTT2_ebusd:Mode_hcmode1_value" (value)="MQTT2_ebusd:Heizmodus" class="size-2">
<ftui-segment-button value="off">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
name="aus_mode"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
</ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="on">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
name="an_mode"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('on:red')">
</ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="auto">
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
name="auto_mode"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('auto:blue')">
</ftui-icon>
</ftui-segment-button>
</ftui-segment>
"BANANA IN A BOX" geht in diesem Fall nicht...
Grüße
Olli
Aber Icon hat gar kein value Parameter. Und warum soll Color bei Icon geändert werden?
Danke Olli so geht es. ich hatte auch schon mit den Klammern gespielt, aber ohne Erfolg...
Der blaue Block wird nur nicht nach einem Reload der Seite an die riechtige Stelle gesetzt. Erst nach einem Event...
Gruß Thomas
Zitat von: setstate am 11 Februar 2021, 17:39:20
Aber Icon hat gar kein value Parameter. Und warum soll Color bei Icon geändert werden?
Ich weiss ja das dafür der blaue Balken da ist, aber ich wollte testen was geht...
@setstate
Ist es möglich Icon mit Badge im Swiper zu nutzen. Habs nicht hinbekommen...
Mochte meine obere Statusleiste entschlacken (den Abfall Bereich).
Meine Idee war die Vier Icons in ein Automatik-Swiper zu packen.
Hier der Code...
<ftui-column>
<ftui-row>
<ftui-swiper id="abfall" auto-play interval="2">
<ftui-content id="abfall_1" file="./_contents/tablet-flur/content-obere-leiste-content-abfall.html" abfall="urBlau" farbe="_blau1"></ftui-content>
<ftui-content id="abfall_2" file="./_contents/tablet-flur/content-obere-leiste-content-abfall.html" abfall="urBraun" farbe="_braun1"></ftui-content>
<ftui-content id="abfall_3" file="./_contents/tablet-flur/content-obere-leiste-content-abfall.html" abfall="urGelb" farbe="yellow"></ftui-content>
<ftui-content id="abfall_4" file="./_contents/tablet-flur/content-obere-leiste-content-abfall.html" abfall="urSchwarz" farbe="_grau1"></ftui-content>
</ftui-swiper>
</ftui-row>
</ftui-column>
content-obere-leiste-content-abfall.html
<ftui-row>
<ftui-icon [name]="System_Abfall:{{abfall}} | map('0:_abfalltonne_auf, 1:_abfalltonne_zu')" color="{{farbe}}" [class-name]="System_Abfall:{{abfall}} | map('0:spin, 1:hop, 2:')"></ftui-icon>
<ftui-badge style="margin-top:-2%;" [color]="System_Abfall:{{abfall}} | map('0=_rot1, 1=_rot1, 2=_orange1, 3=gray')" [text]="System_Abfall:{{abfall}}" [hidden]="System_Abfall:{{abfall}} | map('0:true, 1:false')"></ftui-badge>
<ftui-badge style="margin-top:-2%;" [color]="System_Abfall:{{abfall}} | map('0=_rot1, 1=_rot1, 2=_orange1, 3=gray')"
[text]="System_Abfall:{{abfall}} | map('0:!')"
[hidden]="System_Abfall:{{abfall}} | map(' 0:false, 1:true')">
</ftui-badge>
</ftui-row>
Leider sind die Badges nicht alle im Swiper und "swipen" auch nicht mit dem Icon.
Und es ist so Breit wie alle Icons zusammen.
Eine Idee, oder zu aufwändig?
Anbei ein Bild des Abfalls ohne Swiper und mit Swiper um das Problem zu sehen.
@setstate
Mit dem letzten Update (made ftui-content more neutral in style) berücksichtigt der swiper bei content hidden nicht mehr.
Beispiel-Code:
<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play interval="15">
<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | map('0:true, 1:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="System_DWD_Wetter:a_count | map('0:true, 2:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="System_DWD_Wetter:a_count | map('0:true, 3:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="System_DWD_Wetter:a_count | map('0:true, 4:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="System_DWD_Wetter:a_count | map('0:true, 5:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="System_DWD_Wetter:a_count | map('0:true, 6:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="System_DWD_Wetter:a_count | map('0:true, 7:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="System_DWD_Wetter:a_count | map('0:true, 8:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="System_DWD_Wetter:a_count | map('0:true, 9:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="System_DWD_Wetter:a_count | map('0:true, 10:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="System_DWD_Wetter:a_count | map('0:true, 11:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="System_DWD_Wetter:a_count | map('0:true, 12:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>
Derzeit gibt es nur zwei Warnungen, es werden aber alle Swiper-Karten angezeigt.
Ich nochmal.
Wird es für das iframe auch wieder ein reload/refresh nach Zeit (wie in FTUI2: data-refresh="1") geben, oder geht das schon?
mfg Thomas
Zitat von: roman1528 am 07 Februar 2021, 15:51:22
Perfekt. Vielen Dank! Läuft.
Hast du zum Dropdown noch ein paar Info's für uns?
Wie kann ich die list-Einträge mappen?
also sowas wie: list="weiss25:Weiß 25%, weiss50:Weiß 50%, rot:Rot"
oder: list="RauteMusik.FM%20Harder:RauteMusik-Harder, radio%20ffn%20101.9%20%28Hot%20AC%29:FFN"
ich habe einiges probiert... aber nichts klappt... und vorallem wie ist dann das linking zu "set"
ganz blicke ich durch FTUI 3 tatsächlich noch nicht durch... noch ist alles irgendwie "try and error"
Grüße^^
man kann jetzt die Liste als options - Kinderknoten angeben
<ftui-dropdown
[value]="ftuitest:whiteValue"
(value)="setreading ftuitest:whiteValue">
<option value="white0">White 0%</option>
<option value="white25">Weiß 25%</option>
<option value="white50">Weiß 50%</option>
<option value="white100">Weiß 100%</option>
</ftui-dropdown>
@octek0815, @setstate
Bzgl. Swiper habe ich ein wenig rumgespielt und nachvollzogen, dass die Badge-Darstellung nicht passt (s. angehängtes Bild).
- Die linke Kachel (ohne Swiper) zeigt eine typische Icon/Badge-Darstellung - funktioniert.
- Die mittlere Kachel (mit Swiper ; unveränderter Badge-Style) zeigt, dass die erste Badge-Darstellung (von der grauen Tonne) stehenbleibt - nur das Icon wechselt.
- Die rechte Kachel (mit swiper ; ab zweitem Badge mit "position:relative"-Style) zeigt, dass die erste Badge-Darstellung (von der grauen Tonne) nach wie vor stehenbleibt und das eigentlich erwartete Badge zumindest dargestellt wird.
Interessant ist weitherhin, dass der Swiper in der mittleren Kachel mit initialem autoplay keinen Wechsel vornimmt. Die Debug-Console zeigt aber, dass man stets zum scrollIntoView mit dem richtigen target kommt. Dann habe ich mal die dots aktiviert und man sieht, dass der active-dot wandert - die eigentliche Darstellung bleibt aber unverändert. Klickt man auf einen dot, wird die Darstellung aktualisiert, aber dann wandert wieder nur der dot. Schaltet man autoplay ab- und anschließend wieder an, dann kommt Schwung in die korrekte Darstellung. Bei der rechten Kachel klappt es ohne Zutun von Anfang an wie gewünscht ...
@OdfFhem
Kannst du den Test-Code bereitstellen, dann kann ich das schneller nachvollziehen.
Eigentlich müsste man sowas im JSfiddle, Stackblitz oder ähnlichem anbieten, um schneller debugged zu können. Habe es leider bis jetzt noch nicht hin bekommen oder es ist not for free.
Hallöchen,
nach dem letzten update schein align-items="top" bei row via content nicht mehr zu tun.
Muss das jetzt anders?
Grüße
Torte
@setstate
Ich teste momentan vorrangig mit "Chromium - Version 86.0.4240.197 (Offizieller Build)".
Eben hatte ich auch noch unter "Firefox - 78.6.1esr" getestet.
- dort startet in der zweiten Kachel unmittelbar das autoplay
- beide swiper zeigen einen untenstehenden scrollbar ...
- das restliche Verhalten scheint identisch zum Chromium
Habe das Test-Exemplar noch ein wenig reduziert. Verhalten ist noch identisch und ich hoffe, dass es hilft ...
<!DOCTYPE html>
<html>
<head>
<base href="../" />
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<style>
.my-fg-black { color:#000000; }
.my-fg-white { color:#FFFFFF; }
.my-bg-muell-braun { background-color: #8D6039; }
.my-bg-muell-gelb { background-color: #FFFF00; }
.my-bg-muell-gruen { background-color: #007F00; }
.my-bg-muell-grau { background-color: #808080; }
.my-fg-muell-braun { color: #8D6039; }
.my-fg-muell-gelb { color: #FFFF00; }
.my-fg-muell-gruen { color: #007F00; }
.my-fg-muell-grau { color: #808080; }
</style>
<title>FTUI Swiper Test Example</title>
</head>
<body>
<ftui-grid base-width="75" base-height="60" margin="1" shape="round">
<ftui-grid-tile row="12" col="4" height="2" width="2">
<label>abfall1.auto-play</label>
<ftui-checkbox value="on" @value-change="abfall1.autoPlay = (event.detail==='on')">
</ftui-checkbox>
</ftui-grid-tile>
<ftui-grid-tile row="12" col="6" height="2" width="2">
<label>abfall2.auto-play</label>
<ftui-checkbox value="on" @value-change="abfall2.autoPlay = (event.detail==='on')">
</ftui-checkbox>
</ftui-grid-tile>
<ftui-grid-tile row="14" col="2" height="2" width="2">
<ftui-column>
<ftui-icon name="trash"
[class-name]="Abfalltermin:GelbeTonne | map('`^0$`:my-fg-muell-gelb emptying,`^1$`:my-fg-muell-gelb rolling,.*:my-fg-muell-gelb')"></ftui-icon>
<ftui-badge [class-name]="Abfalltermin:GelbeTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gelb')"
[text]="Abfalltermin:GelbeTonne"></ftui-badge>
</ftui-column>
</ftui-grid-tile>
<ftui-grid-tile row="14" col="4" height="2" width="2">
<ftui-column>
<ftui-swiper id="abfall1" auto-play interval="2" dots>
<ftui-row>
<ftui-icon name="trash"
[class-name]="Abfalltermin:GraueTonne | map('`^0$`:my-fg-muell-grau emptying,`^1$`:my-fg-muell-grau rolling,.*:my-fg-muell-grau')"></ftui-icon>
<ftui-badge [class-name]="Abfalltermin:GraueTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-grau')"
[text]="Abfalltermin:GraueTonne"></ftui-badge>
</ftui-row>
<ftui-row>
<ftui-icon name="trash"
[class-name]="Abfalltermin:GrueneTonne | map('`^0$`:my-fg-muell-gruen emptying,`^1$`:my-fg-muell-gruen rolling,.*:my-fg-muell-gruen')"></ftui-icon>
<ftui-badge [class-name]="Abfalltermin:GrueneTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gruen')"
[text]="Abfalltermin:GrueneTonne"></ftui-badge>
</ftui-row>
<ftui-row>
<ftui-icon name="trash"
[class-name]="Abfalltermin:GelbeTonne | map('`^0$`:my-fg-muell-gelb emptying,`^1$`:my-fg-muell-gelb rolling,.*:my-fg-muell-gelb')"></ftui-icon>
<ftui-badge [class-name]="Abfalltermin:GelbeTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gelb')"
[text]="Abfalltermin:GelbeTonne"></ftui-badge>
</ftui-row>
<ftui-row>
<ftui-icon name="trash"
[class-name]="Abfalltermin:BrauneTonne | map('`^0$`:my-fg-muell-braun emptying,`^1$`:my-fg-muell-braun rolling,.*:my-fg-muell-braun')"></ftui-icon>
<ftui-badge [class-name]="Abfalltermin:BrauneTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-braun')"
[text]="Abfalltermin:BrauneTonne"></ftui-badge>
</ftui-row>
</ftui-swiper>
</ftui-column>
</ftui-grid-tile>
<ftui-grid-tile row="14" col="6" height="2" width="2">
<ftui-column>
<ftui-swiper id="abfall2" auto-play interval="2" dots>
<ftui-row>
<ftui-icon name="trash"
[class-name]="Abfalltermin:GraueTonne | map('`^0$`:my-fg-muell-grau emptying,`^1$`:my-fg-muell-grau rolling,.*:my-fg-muell-grau')">
</ftui-icon>
<ftui-badge [class-name]="Abfalltermin:GraueTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-grau')"
[text]="Abfalltermin:GraueTonne">
</ftui-badge>
</ftui-row>
<ftui-row>
<ftui-icon name="trash"
[class-name]="Abfalltermin:GrueneTonne | map('`^0$`:my-fg-muell-gruen emptying,`^1$`:my-fg-muell-gruen rolling,.*:my-fg-muell-gruen')"></ftui-icon>
<ftui-badge [class-name]="Abfalltermin:GrueneTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gruen')"
[text]="Abfalltermin:GrueneTonne" style="position:relative;"></ftui-badge>
</ftui-row>
<ftui-row>
<ftui-icon name="trash"
[class-name]="Abfalltermin:GelbeTonne | map('`^0$`:my-fg-muell-gelb emptying,`^1$`:my-fg-muell-gelb rolling,.*:my-fg-muell-gelb')"></ftui-icon>
<ftui-badge [class-name]="Abfalltermin:GelbeTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gelb')"
[text]="Abfalltermin:GelbeTonne" style="position:relative;"></ftui-badge>
</ftui-row>
<ftui-row>
<ftui-icon name="trash"
[class-name]="Abfalltermin:BrauneTonne | map('`^0$`:my-fg-muell-braun emptying,`^1$`:my-fg-muell-braun rolling,.*:my-fg-muell-braun')"></ftui-icon>
<ftui-badge [class-name]="Abfalltermin:BrauneTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-braun')"
[text]="Abfalltermin:BrauneTonne" style="position:relative;"></ftui-badge>
</ftui-row>
</ftui-swiper>
</ftui-column>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>
Zitat von: torte am 12 Februar 2021, 11:45:03
Hallöchen,
nach dem letzten update schein align-items="top" bei row via content nicht mehr zu tun.
Muss das jetzt anders?
Grüße
Torte
Ich habe mich entschieden, dass ftui-content so weit wie möglich unsichtbar sein soll. Also kein richtiges Element ist. Als wenn dessen Inhalt stattdessen dort eingeschoben ist. Man muss also im content das Alignment einbauen.
Hallo,
ich möchte ein Attribut statt eines readings verändern, geht das?
<ftui-button [value]="{{FBH}}:tempDay"
(value)="add(-0.5) | attr {{FBH}} tempDay $value"
states="$value"
fill="">
<ftui-icon class="size-1"
name="minus"
color="blue">
</ftui-icon>
</ftui-button>
Mein Beispiel erzeugt "set attr FHB tempDay 22", wie kriege ich das set weg?
Gruß
Eisix
Zitat von: Eisix am 12 Februar 2021, 15:02:13
Hallo,
ich möchte ein Attribut statt eines readings verändern, geht das?
attr, das benutze ich fast nie. Habe ich vergessen.
Ist jetzt mit als gültiger Befehl aufgenommen:
set, setreading, attr In Sachen Semantik ist auch noch viel Platz nach oben bei FHEM ;-)
Zitat von: setstate am 12 Februar 2021, 15:26:08
attr, das benutze ich fast nie. Habe ich vergessen.
Ist jetzt mit als gültiger Befehl aufgenommen:
set, setreading, attr
In Sachen Semantik ist auch noch viel Platz nach oben bei FHEM ;-)
Funktioniert, danke.
Gruß
Thorsten
Zitat von: OdfFhem am 12 Februar 2021, 12:02:58
@setstate
..
Habe das Test-Exemplar noch ein wenig reduziert. Verhalten ist noch identisch und ich hoffe, dass es hilft ...
Danke für das kompakte TestFile.
Mit ftui-badge als Child von ftui-icon klappt das
<ftui-icon>
<ftui-badge></ftui-badge>
</ftui-icon>
Den anderen Fehler, dass es nicht los läuft, suche ich noch.
Zwischenstand:
Das scrollIntoView() im Zusammenhang mit scroll-behavior: smooth; macht Probleme bei mehreren Elementen zur selben Zeit. => Workaround bis jetzt: interval="2.1" beim einen und interval="2" beim anderen.
Bei Firefox und Safari gibt es keine Probleme mit dem Auto-Scrolling. Safari hat nur keine Animation dabei.
Wenn man scroll-behavior: smooth; wegnimmt, geht es auch bei Chromium, nur ohne Animation, wie bei Safari.
@setstate
Da ich jetzt Attribute setzen kann möchte ich sie auch danach mit "save" sichern. Wie?
Oder besser generell gefragt wie kriegt man fhem-Befehle übergeben? (save, backup, shutdown restart, update,...)
Gruß
Eisix
Hallo zusammen,
in der weather.maps.js fehlen folgende Einträge:
Proplanta:
klar: 'CLEAR'
Kleinklima:
CLEAR: './icons/weather/kleinklima/clear.png'
Meteocons:
CLEAR: './icons/moon.svg'
Gruß
Wilfried
d
@willi§99: danke, ist eingepflegt
Zitat von: Eisix am 12 Februar 2021, 16:43:29
@setstate
Da ich jetzt Attribute setzen kann möchte ich sie auch danach mit "save" sichern. Wie?
Oder besser generell gefragt wie kriegt man fhem-Befehle übergeben? (save, backup, shutdown restart, update,...)
Gruß
Eisix
Man könnte das save doch gleich an das attr hängen, oder?
attr lamp1 huhu 1;saveOder aktiv per Klick:
<span onclick="ftuiApp.fhemService.sendCommand('save')">SAVE</span>
Zitat von: setstate am 12 Februar 2021, 14:53:28
Ich habe mich entschieden, dass ftui-content so weit wie möglich unsichtbar sein soll. Also kein richtiges Element ist. Als wenn dessen Inhalt stattdessen dort eingeschoben ist. Man muss also im content das Alignment einbauen.
mein content hat eine row mit 3 column die row(im content) hat align-items=top die einzelnen rows der contentfiles werden aber nicht nach oben sortiert sondern verteilen sich auf den platz auf.
hab ich das falsch gemacht/verstanden?
grüße
Torte
@setstate
Anbei ein Screenshot (unten bzw. rechts grid-technisch abgeschnitten) für den Einsatz der knob-Komponente;
er zeigt das Ergebnis einer prozentualen Skalierung - px-Skalierung würde ebenfalls funktionieren.
Folgende Schritte waren notwendig (ist aber nur ein Beispiel):
- Zeile #36 --- W fixiert auf 96
- Zeile #37 --- H fixiert auf 96
- Zeile #63 --- Tag erweitert um viewBox="0 0 96 96"
- knob-Tag erweitert um style="display:contents;" (aktuell im content-File);
ansonsten zwar Skalierung, aber keine zentrierte Darstellung, sondern immer links oben.
Inhalt von tab-view_svg.html
<ftui-grid base-height="27" base-width="27">
<ftui-grid-tile row="3" col="1" height="4" width="4" shape="round">
<ftui-content file="content_svg.html" height="100%" width="100%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="6" height="4" width="4" shape="round">
<ftui-content file="content_svg.html" height="80%" width="80%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="11" height="4" width="4" shape="round">
<ftui-content file="content_svg.html" height="60%" width="60%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="16" height="4" width="4" shape="round">
<ftui-content file="content_svg.html" height="40%" width="40%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="21" height="4" width="4" shape="round">
<ftui-content file="content_svg.html" height="20%" width="20%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="7" col="1" height="6" width="6" shape="round">
<ftui-content file="content_svg.html" height="100%" width="100%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="7" col="7" height="6" width="6" shape="round">
<ftui-content file="content_svg.html" height="75%" width="75%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="7" col="13" height="6" width="6" shape="round">
<ftui-content file="content_svg.html" height="50%" width="50%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="7" col="19" height="6" width="6" shape="round">
<ftui-content file="content_svg.html" height="25%" width="25%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="13" col="1" height="8" width="8" shape="round">
<ftui-content file="content_svg.html" height="100%" width="100%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="13" col="9" height="8" width="8" shape="round">
<ftui-content file="content_svg.html" height="66%" width="66%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="13" col="17" height="8" width="8" shape="round">
<ftui-content file="content_svg.html" height="33%" width="33%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="21" col="1" height="16" width="16" shape="round">
<ftui-content file="content_svg.html" height="100%" width="100%"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="21" col="17" height="16" width="16" shape="round">
<ftui-content file="content_svg.html" height="50%" width="50%"></ftui-content>
</ftui-grid-tile>
</ftui-grid>
Inhalt von content_svg.html (wegen einheitlichem Test nur height bzw. width variabel)
<ftui-knob height="{{height}}" width="{{width}}" offset-y="10" type="handle" has-desired
value="21.4"
desired-value="20"
unit="14%"
min="15"
max="25"
readonly has-value-text value-size="2em" style="display:contents;"></ftui-knob>
Vielleicht hilft es ...
Perfekt, das sieht doch gut aus. Mit viewBox habe ich auch experimentiert :o
Wie es es aussieht, kommt der Erfolg mit dem display: contents;
Ohne erscheint nur der Viertelkreis, den ich immer hatte.
Ich experimentiere ein bisschen ...
@moonsorrox
Hi, ich habe mal dein WohnSqueezy - Mediaplayer zur Grundlage für meine Sonos Lautsprecher genommen.
Jetzt die Frage: wie sieht deine Playlist im Format aus? Die von Sonos sieht ja in Fhem so aus (hier FavouritesList):
161FM|181.FM.Energy.98|538.Dance.Department|80s80s.christmas..Festtag,.traditionell.|Aloha.Joe's.Relaxation.Island|Ambi.Nature.Radio..Sleep,.Relaxation.&.Meditation.|FFH.Weihnachtsradio..Festtagsmusik.|Fritz.vom.rbb|HITRADIO.RTL.-.Dresden|HouseTime.FM..House.|MDR.JUMP.89.0..Adult.Contemporary.|MDR.SPUTNIK.Club.Channel|Minimal.Mix.Radio|Radio.Dresden|Radio.PSR.102.4..Adult.Contemporary.|Radio.Schlagerparadies..Schlager.|Radio.TEDDY|Select.Radio|Weihnachtsradio..Festtagsmusik.|sunshine.live|sunshine.live.-.classics|sunshine.live.-.house
in FTUI2 hatte ich die so eingebunden:
<div data-type="select"
data-device="Sonos_Kueche"
data-list="FavouritesList"
data-alias="FavouritesListAlias"
data-delimiter="|"
data-quote="/"
data-get="currentFavouriteNameMasked"
data-set="StartFavourite"
class="inline w3x"
onchange="$('.dialog-close').trigger('click');">
</div>
Wie kann man das umsetzen?
Code vom stand jetzt (geht alles bis auf Playlist/FavouritesList):
<ftui-grid-tile row="1" col="2" height="5" width="9">
<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">Sonos Küche</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="40%">
<ftui-image [src]="Sonos_Kueche:currentAlbumArtURL" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%">
<ftui-label class="size-3" color="darkorange"
[text]="Sonos_Kueche:currentArtist"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-label>
<ftui-label class="size-2" color="white"
[text]="Sonos_Kueche:currentTitle"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-label>
<ftui-label class="size-3" color="darkorange"
[text]="Sonos_Kueche:currentSender"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:true, 1:false')">
</ftui-label>
<ftui-label class="size-2" color="white"
[text]="Sonos_Kueche:currentSenderInfo"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:true, 1:false')">
</ftui-label>
</ftui-column>
</ftui-row>
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="Sonos_Kueche:currentTrackPositionSimulatedSec | timeFormat('mm:ss','s')"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="Sonos_Kueche:currentTrackDurationSec"
[(value)]="Sonos_Kueche:currentTrackPositionSimulatedSec" handle="none" color="blue"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="Sonos_Kueche:currentTrackDurationSec | timeFormat('mm:ss','s')"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-label>
</ftui-column>
</ftui-row>
<!-- Botton -->
<ftui-row height="10%">
<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<ftui-dropdown [list]="Sonos_Kueche:FavouritesListAlias" [(value)]="Sonos_Kueche:currentFavouriteNameMasked"></ftui-dropdown>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" (value)="Sonos_Kueche:previous" states="0,1"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
<ftui-icon name="step-backward"
>
</ftui-icon>
</ftui-button>
<!-- Play/Pause -->
<ftui-button fill="outline" shape="normal"
[value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')" (value)="Sonos_Kueche" states="play,pause">
<ftui-icon [name]="Sonos_Kueche:transportState | map('PLAYING:pause, PAUSED_PLAYBACK|STOPPED:play')"
[color]="Sonos_Kueche:transportState | map('PAUSED_PLAYBACK|STOPPED:``, PLAYING:white')">
</ftui-icon>
</ftui-button>
<!-- Next -->
<ftui-button shape="normal" fill="outline" (value)="Sonos_Kueche:next" states="0,1"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
<ftui-icon name="step-forward"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')"></ftui-icon>
</ftui-button>
<!-- Shuffle
<ftui-button shape="normal" fill="outline" [(value)]="Sonos_Kueche:shuffle" states="off,song,album" [color]="Sonos_Kueche:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="Sonos_Kueche:shuffle | map('0:lines, song:random, album:image')" states="off,song,album" [color]="Sonos_Kueche:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button> -->
<!-- Repeat -->
<ftui-button shape="normal" fill="outline" (value)="Sonos_Kueche:Repeat" states="0,1"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
<ftui-icon [name]="Sonos_Kueche:Repeat | map('0:repeat1, 1:repeat1')" [color]="Sonos_Kueche:Repeat | map('0:``, 1:white')"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="Sonos_Kueche:Volume"
[color]="Sonos_Kueche:Volume | map('0:green, 30:blue, 50:yellow, 70:red')"
[text]="Sonos_Kueche:Volume" text="0"
max="100" tick="5" wide-tick="20" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
<!-- Mute -->
<ftui-button shape="normal" fill="outline" [(value)]="Sonos_Kueche:Mute" states="0,1">
<ftui-icon [name]="Sonos_Kueche:Mute | map('0:volume-up, 1:volume-off')" [color]="Sonos_Kueche:Mute | map('0:white, 1:red')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-grid-tile>
mfg Thomas
Hallo Thomas,
Zitat von: mr_petz am 13 Februar 2021, 10:24:52
Jetzt die Frage: wie sieht deine Playlist im Format aus? Die von Sonos sieht ja in Fhem so aus (hier FavouritesList):
Ich habe die im Popup drin und bei mir sieht es in FTUI 2 so aus. Aber die Playlist ist nicht die Favoritenliste, dass sind zwei verschiedene Dinge bei Squeezebox. Evtl. bei Sonos anders.
<div data-type="popup" data-height="400px" data-width="450px" data-return-time="60" data-draggable="false">
<div class="cell narrow" data-type="symbol" data-device="SB_Wohnzimmer" data-states="on" data-on-color="white" data-off-color="royalblue" data-icon="fa-server"></div>
<div class="dialog bg-darkgray">
<header style="background-color:#1f222e">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">=== WohnSqueezy ===</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" data-background-color="#1f222e" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell top-space">
<div class="cell inline" data-device="SB_Wohnzimmer" data-get="coverarturl" data-type="image" data-size="120px" data-width="120px" data-opacity="1"></div>
<div class="cell inline" data-type="label" data-device="SB_Wohnzimmer" data-get="currentArtist"></div>
<div class="cell inline" data-type="label">-</div>
<div class="cell inline" data-type="label" data-device="SB_Wohnzimmer" data-get="currentTitle"></div>
</div>
<div class="top-space">
<div data-type="label" class="inline">Sender</div>
<div class="w3x crimson" data-type="select" data-device="SB_Wohnzimmer" data-list="ftuiFavoritesItems" data-alias="ftuiFavoritesAlias" data-get="favorites" data-set="favorites" data-delimiter=":"></div>
</div>
<div class="top-space">
<div data-type="label" class="inline">Artist </div>
<div class="w3x crimson" data-type="select" data-device="SB_Wohnzimmer" data-list="ftuiArtistsList" data-alias="ftuiArtistsAlias" data-set="ftuicmd artist" data-delimiter=":"></div>
</div>
<div class="top-space">
<div data-type="label" class="inline">Album</div>
<div class="w3x crimson" data-type="select" data-device="SB_Wohnzimmer" data-list="ftuiAlbumsList" data-alias="ftuiAlbumsAlias" data-set="ftuicmd album" data-delimiter=":"></div>
</div>
</div>
</div>in Fhem/Squeezeboxen ist es bei mir die
ftuiFavoritesAlias
ftuiFavoritesItemsdie Senderliste die ich als Favoriten auf dem Server gespeichert habe, also nicht die Playlist..!
Die Playlist - nutze ich kaum da ich nur zwei habe und die immer mit dem Editor erstellt habe - als ganz normale xxx.m3u
die heißen bei mir so:
ftuiPlaylistsAlias
ftuiPlaylistsItemsich weiß nicht ob es dir hilft, aber es gibt ja unzählige Threads über Sonos und evtl. findest du da was du suchst, wenn nicht ich helfe gerne weiter soweit es mir möglich ist. ;)
Ok. Danke. Dachte ist auch eine Liste in Fhem und nicht *.m3u...
Da muss ich setstate bitten ob man das wieder umsetzen kann für Sonos Player.
mfg Thomas
Zitat von: setstate am 12 Februar 2021, 00:28:58
man kann jetzt die Liste als options - Kinderknoten angeben
<ftui-dropdown
[value]="ftuitest:whiteValue"
(value)="setreading ftuitest:whiteValue">
<option value="white0">White 0%</option>
<option value="white25">Weiß 25%</option>
<option value="white50">Weiß 50%</option>
<option value="white100">Weiß 100%</option>
</ftui-dropdown>
Vielen, vielen Dank setstate. Jetzt komme ich weiter :)
@octek0815
Kannst du mir deine "content-popup-dwd-wetterwarung-swiper-content.html" schicken... bzw. den Inhalt? Wäre super lieb.
Dank im Voraus.
Grüße^^
Zitat von: octek0815 am 11 Februar 2021, 20:02:46
@setstate
Mit dem letzten Update (made ftui-content more neutral in style) berücksichtigt der swiper bei content hidden nicht mehr.
Beispiel-Code:
<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play interval="15">
<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | map('0:true, 1:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="System_DWD_Wetter:a_count | map('0:true, 2:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="System_DWD_Wetter:a_count | map('0:true, 3:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="System_DWD_Wetter:a_count | map('0:true, 4:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="System_DWD_Wetter:a_count | map('0:true, 5:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="System_DWD_Wetter:a_count | map('0:true, 6:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="System_DWD_Wetter:a_count | map('0:true, 7:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="System_DWD_Wetter:a_count | map('0:true, 8:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="System_DWD_Wetter:a_count | map('0:true, 9:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="System_DWD_Wetter:a_count | map('0:true, 10:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="System_DWD_Wetter:a_count | map('0:true, 11:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="System_DWD_Wetter:a_count | map('0:true, 12:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>
Derzeit gibt es nur zwei Warnungen, es werden aber alle Swiper-Karten angezeigt.
@setstate
Ich konnte jetzt die Ursache finden.
Sobald die option "scrollbar" als Parameter angegeben ist greift hidden nicht mehr.
Dots wiederum funktioniert, hat aber ein anderes Problem. Es werden zwar nur die Swiper-Karten angezeigt die nicht mit hidden versteckt sind, aber es erden alle Punkte angezeigt (auch die der versteckten "slides".
Zitat von: roman1528 am 13 Februar 2021, 16:47:00
Vielen, vielen Dank setstate. Jetzt komme ich weiter :)
@octek0815
Kannst du mir deine "content-popup-dwd-wetterwarung-swiper-content.html" schicken... bzw. den Inhalt? Wäre super lieb.
Dank im Voraus.
Grüße^^
Ja sicher, kein Problem...
<ftui-column>
<ftui-row style="padding:2%;">
<ftui-row style="padding:1%;" [color]="System_DWD_Wetter:{{warn-number}}_severity | map('Minor:_dwd_minor, Moderate:_dwd_moderate, Severe:_dwd_severe, Extreme:_dwd_extreme')"
[class-name]="System_DWD_Wetter:{{warn-number}}_urgency | map('Future:_dwd_vorwarnung')">
<ftui-column width="15%" color="_grau3">
<ftui-row height="70%">
<ftui-image base="http://10.20.8.248:8084/fhem/ftui/images/" [src]="System_DWD_Wetter:{{warn-number}}_eventDesc | map('`.*BÖEN`:warn_icons_sturm.png, `.*TAUWETTER`:warn_icons_tauwetter.png, .*SCHNEE.*:warn_icons_schnee.png, .*FROST.*:warn_icons_frost.png, GLÄTTE|GLATTEIS:warn_icons_glatteis.png, `.*REGEN`:warn_icons_regen.png')" color="_grau3" width="80%" height="80%" nocache></ftui-image>
</ftui-row>
<ftui-row>
<ftui-image color="_grau3" width="80%" height="80%" src="https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png" nocache></ftui-image>
</ftui-row>
</ftui-column>
<ftui-column width="85%" color="_grau3">
<ftui-label class="_dwd_description_headline" [text]="System_DWD_Wetter:{{warn-number}}_headline"></ftui-label>
<ftui-label class="_dwd_description_style" [text]="System_DWD_Wetter:{{warn-number}}_description"></ftui-label>
<ftui-label class="_dwd_instruction_style" [text]="System_DWD_Wetter:{{warn-number}}_instruction" [hidden]="System_DWD_Wetter:{{warn-number}}_instruction | map(':true, .*:false')"></ftui-label>
<ftui-row class="_center _size-2vh" height="5%">
<ftui-label [text]="System_DWD_Wetter:{{warn-number}}_onset | toDate() | format('DD.MM. hh:mm')"><span slot="start">Gültig von </span><span slot="end"> bis </span></ftui-label>
<ftui-label [text]="System_DWD_Wetter:{{warn-number}}_expires | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<ftui-label [text]="System_DWD_Wetter:a_time | toDate() | format('DD.MM. hh:mm')"><span slot="start"> - Letztes Update: </span></ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
</ftui-row>
</ftui-column>
css:
._dwd_vorwarnung {
background-image: repeating-linear-gradient(315deg, #555555 0%, #555555 0.25%, transparent 0.25%, transparent 0.5%, #555555 0.5%);
}
._dwd_description_headline {
font-weight: 900;
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 3.5vh;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
._dwd_description_style {
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 2.5vh;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
._dwd_instruction_style {
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 2vh;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
._center {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin-left: auto !important;
margin-right: auto !important;
}
[color="_grau3"] {
--color-base: #555555;
}
[color="_dwd_minor"] {
--color-base: #FFEB3C;
}
[color="_dwd_moderate"] {
--color-base: #fb8c00;
}
[color="_dwd_severe"] {
--color-base: #E53935;
}
[color="_dwd_extreme"] {
--color-base: #880E4F;
}
Anbei noch die von mir angepassten png´s als zip (Farbe verändert, da meine Standard Farbe Weiß ist).
VG
Olli
Zitat von: octek0815 am 13 Februar 2021, 17:04:56
Ja sicher, kein Problem...
<ftui-column>
<ftui-row style="padding:2%;">
<ftui-row style="padding:1%;" [color]="System_DWD_Wetter:{{warn-number}}_severity | map('Minor:_dwd_minor, Moderate:_dwd_moderate, Severe:_dwd_severe, Extreme:_dwd_extreme')"
[class-name]="System_DWD_Wetter:{{warn-number}}_urgency | map('Future:_dwd_vorwarnung')">
<ftui-column width="15%" color="_grau3">
<ftui-row height="70%">
<ftui-image base="http://10.20.8.248:8084/fhem/ftui/images/" [src]="System_DWD_Wetter:{{warn-number}}_eventDesc | map('`.*BÖEN`:warn_icons_sturm.png, `.*TAUWETTER`:warn_icons_tauwetter.png, .*SCHNEE.*:warn_icons_schnee.png, .*FROST.*:warn_icons_frost.png, GLÄTTE|GLATTEIS:warn_icons_glatteis.png, `.*REGEN`:warn_icons_regen.png')" color="_grau3" width="80%" height="80%" nocache></ftui-image>
</ftui-row>
<ftui-row>
<ftui-image color="_grau3" width="80%" height="80%" src="https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png" nocache></ftui-image>
</ftui-row>
</ftui-column>
<ftui-column width="85%" color="_grau3">
<ftui-label class="_dwd_description_headline" [text]="System_DWD_Wetter:{{warn-number}}_headline"></ftui-label>
<ftui-label class="_dwd_description_style" [text]="System_DWD_Wetter:{{warn-number}}_description"></ftui-label>
<ftui-label class="_dwd_instruction_style" [text]="System_DWD_Wetter:{{warn-number}}_instruction" [hidden]="System_DWD_Wetter:{{warn-number}}_instruction | map(':true, .*:false')"></ftui-label>
<ftui-row class="_center _size-2vh" height="5%">
<ftui-label [text]="System_DWD_Wetter:{{warn-number}}_onset | toDate() | format('DD.MM. hh:mm')"><span slot="start">Gültig von </span><span slot="end"> bis </span></ftui-label>
<ftui-label [text]="System_DWD_Wetter:{{warn-number}}_expires | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<ftui-label [text]="System_DWD_Wetter:a_time | toDate() | format('DD.MM. hh:mm')"><span slot="start"> - Letztes Update: </span></ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
</ftui-row>
</ftui-column>
css:
._dwd_vorwarnung {
background-image: repeating-linear-gradient(315deg, #555555 0%, #555555 0.25%, transparent 0.25%, transparent 0.5%, #555555 0.5%);
}
._dwd_description_headline {
font-weight: 900;
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 3.5vh;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
._dwd_description_style {
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 2.5vh;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
._dwd_instruction_style {
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 2vh;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
._center {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin-left: auto !important;
margin-right: auto !important;
}
[color="_grau3"] {
--color-base: #555555;
}
[color="_dwd_minor"] {
--color-base: #FFEB3C;
}
[color="_dwd_moderate"] {
--color-base: #fb8c00;
}
[color="_dwd_severe"] {
--color-base: #E53935;
}
[color="_dwd_extreme"] {
--color-base: #880E4F;
}
Anbei noch die von mir angepassten png´s als zip (Farbe verändert, da meine Standard Farbe Weiß ist).
VG
Olli
Sehr geil. Danke, Danke, Danke ;D
Grüße^^
Hallo,
habe mal wieder eine spezielle syntax Frage. Ist es möglich den Wert für das mapping aus einem Reading zu lesen?
Im konkreten Beispiel möchte ich in einem Template für meine Heizung unterschiedliche Grenzwerte benutzen. Die Readings werden pro Raum (variable FHB) als userreading erzeugt basierend auf der desired Temp.
Habe diverse Klammern und Hochkomma ausprobiert, funktioniert aber nichts. Jemand einen Tip für mich?
<ftui-label
[text]="{{SENSOR}}:CleanTemp |part (1)"
[color]="{{SENSOR}}:CleanTemp |part (1) | map('[{{FBH}}:TEMPmin]:blue, [{{FBH}}:TEMPmed]:green, [{{FBH}}:TEMPmin]:red')"
class="size-9 bold">
<span slot="end">°C</span>
</ftui-label>
Gruß
Eisix
Zitat von: torte am 13 Februar 2021, 00:04:52
mein content hat eine row mit 3 column die row(im content) hat align-items=top die einzelnen rows der contentfiles werden aber nicht nach oben sortiert sondern verteilen sich auf den platz auf.
hab ich das falsch gemacht/verstanden?
so (Variante 1) oder so (Variante 2) geht es
<ftui-tab-view id="View1">
<ftui-grid-tile row="1" col="2" height="5" width="9" align-items="top">
<ftui-content file="examples/contents/content-rows.html" header="VARIANT1"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View2">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-column align-items="top">
<ftui-content file="examples/contents/content-rows.html" header="VARIANT2"></ftui-content>
</ftui-column>
</ftui-grid-tile>
</ftui-tab-view>
Meine content-rows.html sieht so aus
<ftui-row color="dark" height="5%">
{{header}}
</ftui-row>
<ftui-row color="danger" height="20%">
<ftui-column color="light" margin="1em">
COLUMN 1
</ftui-column>
<ftui-column color="medium" margin="1em">
COLUMN 2
</ftui-column>
</ftui-row>
<ftui-row color="success" height="20%">
<ftui-column color="light" margin="1em">
COLUMN 1
</ftui-column>
<ftui-column color="medium" margin="1em">
COLUMN 2
</ftui-column>
</ftui-row>
@setstate
circle-menu zerstört komplett ein formuliertes style-Attribut der enthaltenen Menüelemente. Besteht die Aussicht, dass man dieses Verhalten "neutralisiert"? Ansonsten muss man für jeden Individualfall Klassen definieren ... das Löschen der fraglichen Anweisung förderte (bislang) keine Auffälligkeiten zu Tage ...
Im normalen js:
item.style = null;
Im min.js:
t.style=null;
@setstate
Hi, ich weiss jetzt was das Sonos-Modul in fhem und dein dropdown brauchen damit es funktioniert.
Das Modul will entweder die Sendernamen zusammenhängend ohne Lehrstellen oder
mit Lehrstellen müssen diese mit %20 gefüllt sein oder
das Format des Sender-Namen muss z.B.: /sunshine.live/ so aussehen, damit man mit set MySonos StartFavourite/StartRadio/StartPlaylist die Sender/Titel gestartet werden.
Ich habe im Modul ein UserReading angelegt, wo die originale Favourites bissl umgestrickt wird. Vielleicht kann man das noch tunen?:
my_Favourites { my $string = ReadingsVal($name,'FavouritesList',''); $string =~ s/\|$//, $string =~ s/\|/\/\,\//g; return $string }
Liste vorher:
161FM|181.FM.Energy.98|538.Dance.Department|80s80s.christmas..Festtag,.traditionell.|Aloha.Joe's.Relaxation.Island|Ambi.Nature.Radio..Sleep,.Relaxation.&.Meditation.|FFH.Weihnachtsradio..Festtagsmusik.|Fritz.vom.rbb|HITRADIO.RTL.-.Dresden|HouseTime.FM..House.|MDR.JUMP.89.0..Adult.Contemporary.|MDR.SPUTNIK.Club.Channel|Minimal.Mix.Radio|Radio.Dresden|Radio.PSR.102.4..Adult.Contemporary.|Radio.Schlagerparadies..Schlager.|Radio.TEDDY|Select.Radio|Weihnachtsradio..Festtagsmusik.|sunshine.live|sunshine.live.-.classics|sunshine.live.-.house
Liste nachher:
161FM/,/181.FM.Energy.98/,/538.Dance.Department/,/80s80s.christmas..Festtag,.traditionell./,/Aloha.Joe's.Relaxation.Island/,/Ambi.Nature.Radio..Sleep,.Relaxation.&.Meditation./,/FFH.Weihnachtsradio..Festtagsmusik./,/Fritz.vom.rbb/,/HITRADIO.RTL.-.Dresden/,/HouseTime.FM..House./,/MDR.JUMP.89.0..Adult.Contemporary./,/MDR.SPUTNIK.Club.Channel/,/Minimal.Mix.Radio/,/Radio.Dresden/,/Radio.PSR.102.4..Adult.Contemporary./,/Radio.Schlagerparadies..Schlager./,/Radio.TEDDY/,/Select.Radio/,/Weihnachtsradio..Festtagsmusik./,/sunshine.live/,/sunshine.live.-.classics/,/sunshine.live.-.house
Jetzt zum dropdown. Die Einträge müssen ja mit "," getrennt sein um sie einzeln in der Liste zu haben.
Jetzt habe ich auch Sendereinträge die z.B. so: 80s80s christmas (Festtag, traditionell) oder so: Aloha Joe's Relaxation Island aussehen in fhem.
Im FTUI2 funktionieren diese auch. Hier in FTUI3 nicht, weil der Name durch das "," getrennt wird. (siehe Anhang)
Wie könnte man das gescheit lösen?
ps. die [hidden]-Funktion ist Top. Kann man hier im Player gut als classchanger benutzen...
mfg Thomas
Edit: den gerade im Bild abgespielten Sender konnte ich starten aus FTUI3..
Ich nochmal.
(Nur zum Verständnis wurde der Code angepasst.)
So funktioniert es für mich im angepassten dropdown.component.js Code:
fillList() {
const list = String(this.list).split(/[|]+/);
this.selectElement.length = 0;
list.forEach((item) => {
const opt = document.createElement('option');
opt.value = item.replace(/ /g,"%20");
//opt.style.width = '200px';
opt.innerHTML = item ;
this.selectElement.appendChild(opt);
});
this.selectElement.value = this.value;
}
Da nehme ich die FavouritesListAlias vom Sonos-Modul die so aussieht:
161FM|181.FM Energy 98|538 Dance Department|80s80s christmas (Festtag, traditionell)|Aloha Joe's Relaxation Island|Ambi Nature Radio (Sleep, Relaxation & Meditation)|FFH Weihnachtsradio (Festtagsmusik)|Fritz vom rbb|HITRADIO RTL - Dresden|HouseTime FM (House)|MDR JUMP 89.0 (Adult Contemporary)|MDR SPUTNIK Club Channel|Minimal Mix Radio|Radio Dresden|Radio PSR 102.4 (Adult Contemporary)|Radio Schlagerparadies (Schlager)|Radio TEDDY|Select Radio|Weihnachtsradio (Festtagsmusik)|sunshine live|sunshine live - classics|sunshine live - house
Jetzt wird immer %20 mitgegeben als Space.
delimiter ist halt nur "|"
Und die Liste sieht wieder normal aus.
Du wirst schon wissen wie man das für alle Systeme integrieren kann ;)...
Gruß Thomas
Zitat von: Eisix am 13 Februar 2021, 17:48:58
Hallo,
habe mal wieder eine spezielle syntax Frage. Ist es möglich den Wert für das mapping aus einem Reading zu lesen?
Im konkreten Beispiel möchte ich in einem Template für meine Heizung unterschiedliche Grenzwerte benutzen. Die Readings werden pro Raum (variable FHB) als userreading erzeugt basierend auf der desired Temp.
Habe diverse Klammern und Hochkomma ausprobiert, funktioniert aber nichts. Jemand einen Tip für mich?
<ftui-label
[text]="{{SENSOR}}:CleanTemp |part (1)"
[color]="{{SENSOR}}:CleanTemp |part (1) | map('[{{FBH}}:TEMPmin]:blue, [{{FBH}}:TEMPmed]:green, [{{FBH}}:TEMPmin]:red')"
class="size-9 bold">
<span slot="end">°C</span>
</ftui-label>
Gruß
Eisix
Als weiter Möglichkeit mein Problem zu lösen sehe ich eine Variable die ans content File übergeben wird mit einem Reading zu füllen.
Geht das irgendwie?
<ftui-content file="templates/Heizung_template.html" TEMPmin="Inhalt Eines Reading"></ftui-content>
Gruß
Eisix
Sowas geht nicht. In FTUI 4 dann vielleicht mal 8)
Zitat von: setstate am 15 Februar 2021, 17:30:56
Sowas geht nicht. In FTUI 4 dann vielleicht mal 8)
<script> ?
Die Hintergrundfarbe bei einem ftui-label setzten funtioniert ja:
<ftui-label class="size-4" style="background-color: yellow;"
[hidden]="Staumelder:{{warn-number}}_road | map('`-`:true, .*:false')"
[text]="Staumelder:{{warn-number}}_road"
[color]="Staumelder:{{warn-number}}_road | map('A.*:white, .*:black')">
</ftui-label>
Aber wie kann ich die Hintergrundfarbe in Abhängikeit eines Werte verändern?
Es wäre schön, wenn es in der Art funktionieren würde:
<ftui-label class="size-4"
[hidden]="Staumelder:{{warn-number}}_road | map('`-`:true, .*:false')"
[text]="Staumelder:{{warn-number}}_road"
[color]="Staumelder:{{warn-number}}_road | map('A.*:white, .*:black')"
[style]="Staumelder:{{warn-number}}_road | map('A.*:background-color:blue, L.*:background-color:yellow, .*:background-color:white">
</ftui-label>
Oder gibt es eine andere Möglichkeit?
VG
Karlheinz
@mr_petz @setstate
Für Sonos in FTUI3 dachte ich, man könnte folgendes Konstrukt nutzen:
<ftui-dropdown [list]="{{device}}:FavouritesListAlias | replace(/\|/g',';')"
[value]="{{device}}:currentFavouriteName"
(value)="replace(/\s/g,'.') | {{device}}:StartFavourite /$value/"></ftui-dropdown>
Kann man aber leider nicht, da das Pipe-Zeichen im Rahmen der Pipe-Nutzung eine ganz spezielle Bedeutung hat und außerhalb von Strings durch ein Komma ersetzt wird.
Daher habe ich mich entschlossen eine eigene replace-Pipe bereitzustellen. Dann ergibt sich folgendes Konstrukt:
<ftui-dropdown [list]="{{device}}:FavouritesListAlias | replace2('[|]','g',';')"
[value]="{{device}}:currentFavouriteName"
(value)="replace(/\s/g,'.') | {{device}}:StartFavourite /$value/"></ftui-dropdown>
Dieses funktioniert reibungslos.
Um das dropdown-Konstrukt universeller nutzen zu können, hatte ich auch hier ein wenig rumprobiert und folgendes Konstrukt eingesetzt:
<ftui-dropdown [list]="{{device}}:FavouritesListAlias"
[value]="{{device}}:currentFavouriteName"
(value)="replace(/\s/,'.') | {{device}}:StartFavourite /$value/"
delimiter="[|]"></ftui-dropdown>
</ftui-column>
In der dropdown-Komponente war nur eine kleine Änderung notwendig.
Falls man immer nur ein Zeichen als delimiter verwenden können soll:
delimiter: ';'
const list = String(this.list).split(this.delimiter);
Falls man fast beliebige Ausdrücke als delimiter verwenden können soll:
delimiter: '[;,:]'
const list = String(this.list).split(new RegExp(this.delimiter));
Die letzte Theorie bietet die meisten Möglichkeiten fürs dropdown-Konstrukt. Die "neue" Pipe erlaubt geringfügig mehr Möglichkeiten; evtl. kann man aber in Zusammenhang mit replace noch das Pipe-Ersetzen durch Komma unterbinden.
Vielleicht findet ja die ein oder andere Änderung ihren Weg in die Allgemeinheit ...
@khk123
Ungetestet - vermutlich muss es so aussehen:
<ftui-label class="size-4"
[hidden]="Staumelder:{{warn-number}}_road | map('`-`:true, .*:false')"
[text]="Staumelder:{{warn-number}}_road"
[color]="Staumelder:{{warn-number}}_road | map('A.*:white, .*:black')"
[style]="Staumelder:{{warn-number}}_road | map('A.*:`background-color:blue;`, L.*:`background-color:yellow;`, .*:`background-color:white;`">
</ftui-label>
Zitat von: OdfFhem am 15 Februar 2021, 18:07:21
@khk123
Ungetestet - vermutlich muss es so aussehen:
[style]="Staumelder:{{warn-number}}_road | map('A.*:`background-color:blue;`, L.*:`background-color:yellow;`, .*:`background-color:white;`">
Das geht nicht. Ich bin kein HTML-Experte, aber in <ftui-label> gibt es nur die folgenden Properties:
static get properties() {
return {
text: '',
color: '',
unit: '',
size: -1,
interval: 0,
width: '',
height: '',
};
}
@OdfFhem
Hi, könnte man nicht als zusätzliche Option wie in FTUI2 den delimiter übergeben
und die %20 als space im Quellcode einfach mit integrieren?
opt.value = item.replace(/\s/g,"%20");
Die %20 werden doch in fhem auch als space erkannt oder?
<ftui-dropdown [list]="{{device}}:FavouritesListAlias"
[(value)]="Sonos_Kueche:StartFavourite"
[delimiter]="|"</ftui-dropdown>
(k.A. ob so richtig)
so kann jeder den Trenner selber wählen?
Ich denke sonst wird das schon für den "Laien" zu viel Programmierung...??
Gruß Thomas
@khk123
Doch mal einen kleinen Test durchgeführt:
<ftui-label [text]="{{device}}:alias"
[style]="{{device}}:alias | map('.*:`background-color:red;`')"></ftui-label>
Und es funktioniert.
Es muss keine speziell unterstützte Property sein. Wichtig sind die eckigen Klammern und wegen der vorkommenden Doppelpunkte die "rückwärtigen" Anführungszeichen ...
@mr_petz
Ich habe FavouritesList mit FavouritesListAlias verglichen und deshalb für den Umgang mit Sonos die sich anbietende Punkt-Ersetzung in Richtung FHEM gewählt; hat meiner Meinung nach aber nichts im Dropdown-Modul verloren ... dort sollte eher nur der Weg von FHEM nach FTUI "entschlüsselt" werden ...
setstate wird sich vielleicht das Geschehen mal näher ansehen ...
@setstate und @OdfFhem
Danke für die Umsetzung!
Funktioniert so (FavouritesList mit "." als space):
<ftui-dropdown width="30%" [list]="Sonos_Kueche:FavouritesList"
[value]="Sonos_Kueche:currentFavouriteName"
(value)="Sonos_Kueche:StartFavourite /$value/"
delimiter="|"></ftui-dropdown>
als auch so (FavouritesListAlias mit "%20" als space):
<ftui-dropdown width="30%" [list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:currentFavouriteName"
(value)="replace(/\s/g,'%20') | Sonos_Kueche:StartFavourite $value"
delimiter="|"></ftui-dropdown>
Gruß Thomas
Edit: Oder muss noch was in encode() rein? Eigendlich nicht, Oder?
Ich werde heute noch das: (value)="encode() | Sonos_Play5 StartRadio $value" testen.
Zitat von: OdfFhem am 15 Februar 2021, 18:53:11
@khk123
Doch mal einen kleinen Test durchgeführt:
Und es funktioniert.
Es muss keine speziell unterstützte Property sein. Wichtig sind die eckigen Klammern und wegen der vorkommenden Doppelpunkte die "rückwärtigen" Anführungszeichen ...
Entweder hatte ich doch noch einen kleinen Fehler oder es war noch etwas gecached.
<ftui-label class="streetIcon"
[hidden]="Staumelder:{{warn-number}}_road | map('`-`:true, .*:false')"
[text]="Staumelder:{{warn-number}}_road"
[color]="Staumelder:{{warn-number}}_road | map('A.*:weiss, .*:black')"
[style]="Staumelder:{{warn-number}}_road | map('A.*:`background-color:#003abd;`, B.*:`background-color:#ffc505;`, .*:`background-color:#ffffff;`')">
</ftui-label>
Jetzt funktioniert es bei mir auch. Danke für die Hilfe.
VG
Karlheinz
Hallo,
ich habe den DWD Wetterwarnungsswiper von octek0815 (https://forum.fhem.de/index.php/topic,115259.msg1132066.html#msg1132066) eingebaut.
Im Moment gibt es bei uns keine Wetterwarnungen, nun bekomme ich die unten angehängte Fehlermeldung.
gm
Zitat von: grossmaggul am 16 Februar 2021, 11:41:12
Hallo,
ich habe den DWD Wetterwarnungsswiper von octek0815 (https://forum.fhem.de/index.php/topic,115259.msg1132066.html#msg1132066) eingebaut.
Im Moment gibt es bei uns keine Wetterwarnungen, nun bekomme ich die unten angehängte Fehlermeldung.
gm
jou habe ich auch.... sind wir schon zwei ;) evtl. hat Olli das auch mal schauen ob er sich meldet.
Muss noch dazu sagen der Firefox blendet es aus, aber auf meinen Android Tablets läuft es laufend
Der FF macht es doch dauert aber wohl immer ne Weile..
Zitat von: moonsorrox am 16 Februar 2021, 12:50:52
jou habe ich auch.... sind wir schon zwei ;) evtl. hat Olli das auch mal schauen ob er sich meldet.
Muss noch dazu sagen der Firefox blendet es aus, aber auf meinen Android Tablets läuft es laufend
Moin zusammen,
ja bekomme ich auch, kommt aber ersten wenn ich mit den Pfeiltasten die Swiper-Karten druchblättern will.
Hab es mal nachgestellt ohne den ganzen DWD Kram.
Grüße
Olli
Zitat von: octek0815 am 13 Februar 2021, 16:53:38
@setstate
Ich konnte jetzt die Ursache finden.
Sobald die option "scrollbar" als Parameter angegeben ist greift hidden nicht mehr.
Dots wiederum funktioniert, hat aber ein anderes Problem. Es werden zwar nur die Swiper-Karten angezeigt die nicht mit hidden versteckt sind, aber es erden alle Punkte angezeigt (auch die der versteckten "slides".
@setstate
Komando zürück, es funktioniert weiterhin nicht, egal ob mit oder ohne scrollbar.
Habe mal die folgende Testumgebung gebaut, damit du das einfacher nachstellen kannst:
In FHEM das folgende dummy device erstellen:
defmod test_dummy dummy
setstate test_dummy 2021-02-16 12:05:51 a_1_text1 a_1_text1
setstate test_dummy 2021-02-16 12:06:08 a_1_text2 a_1_text2
setstate test_dummy 2021-02-16 12:06:21 a_2_text1 a_2_text1
setstate test_dummy 2021-02-16 12:06:40 a_2_text2 a_2_text2
setstate test_dummy 2021-02-16 12:06:28 a_3_text1 a_3_text1
setstate test_dummy 2021-02-16 12:06:34 a_3_text2 a_3_text2
setstate test_dummy 2021-02-16 13:04:59 a_count 2
Hier der Swiper
<ftui-swiper scrollbar auto-play interval="2">
<ftui-content [hidden]="test_dummy:a_count | map('0:true, 1:false')" file="./test_dummy_content.html" warn-number="a_1"></ftui-content>
<ftui-content [hidden]="test_dummy:a_count | map('0:true, 2:false')" file="./test_dummy_content.html" warn-number="a_2"></ftui-content>
<ftui-content [hidden]="test_dummy:a_count | map('0:true, 3:false')" file="./test_dummy_content.html" warn-number="a_3"></ftui-content>
</ftui-swiper>
Und hier die Content-Datei
<ftui-column>
<ftui-label [text]="test_dummy:{{warn-number}}_text1"></ftui-label>
<ftui-label [text]="test_dummy:{{warn-number}}_text2"></ftui-label>
</ftui-column>
Beim FHEM dummy device ist a_count auf 1 und es werden trotzdem alle drei Swiper-Karten angezeigt obwohl aufgrund des hidden mappings nur eine Karte angezeigt werden dürfet.
Updates vor dem 11.02. hatten diesen Fehler nicht, da funktionierte das hidden mapping.
Im ersten Bild ist a_count auf 2, es werden alle drei Karten angezeigt (siehe Länge des scrollbars) und zwischen Karte 1 und 2 hin und her gescrollt.
Im zweiten Bild ist a_count auf 3, es werden alle drei Karten angezeigt (siehe Länge des scrollbars).
Bei a_count 1 wird nicht gescrollt, aber es werden alle Karten angezeigt.
Grüße
Olli
Das Problem mit den Swiper-Karten, die eigentlich hidden sein sollten, habe ich auch. Und außerdem habe ich plötzlich eine Fehlermeldung.
Letzte FTUI-Update war heute. Die Recursions-Fehlermeldung ist aber schon vorher aufgetreten. Nachdem ich alle Swiper rausgenommen habe,
tritt der Fehler nicht mehr auf. Nach Aktivierung des DWD-Swipers ist die Fehlermeldung wieder da.
Geht doch alles...
Hatte nicht die ftui.binding.js nicht mit aktualisiert...
Asche über mein Haupt :-[ :o
geht so:
<ftui-dropdown width="30%" [list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:currentFavouriteName"
(value)="encode() | Sonos_Kueche:StartFavourite $value"
delimiter="|"></ftui-dropdown>
als auch so:
<ftui-dropdown width="30%" [list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:currentFavouriteName"
(value)="encode() | Sonos_Kueche LoadFavourite $value; set Sonos_Kueche Play"
delimiter="|"></ftui-dropdown>
Danke nochmal...
Guten Tag,
hat jemand ein Beispiel für eine Checkbox mit unterschiedlichen Reading und Set binding?
Ich check das nicht, bei mir geht nur ein/aus aber nicht auslesen des Zustands aus FHEM.
<ftui-checkbox [value]="{{device1}}:POWER | map('ON: on, OFF: off')" states="off,on" (value)="{{device1}}" ></ftui-checkbox>
Danke
Grüße
Torte
Zitat von: torte am 18 Februar 2021, 15:25:39
Guten Tag,
hat jemand ein Beispiel für eine Checkbox mit unterschiedlichen Reading und Set binding?
Ich check das nicht, bei mir geht nur ein/aus aber nicht auslesen des Zustands aus FHEM.
<ftui-checkbox [value]="{{device1}}:POWER | map('ON: on, OFF: off')" states="off,on" (value)="{{device1}}" ></ftui-checkbox>
Danke
Grüße
Torte
Hi Torte,
geht bei mir mit deiner Definition problemlos. Das Device läßt sich schalten und die Checkbox erhält auch den korrekten Zustand (on oder off), wenn von einer anderen Stelle aus geschaltet wird. Egal ob map('ON: on, OFF: off') oder map('on: on, off: off'). Dein Device reagiert auch auf Kleinbuchstaben?
VG
Karlheinz
Ich möchte das attr eines devices auslesen. So in der Art:
<ftui-label [text]="ftuiApp.fhemService.sendCommand('AttrVal(`"{{device}}","{{attr}}",""`)')"></ftui-label>
Aber ich habe Probleme mit den diversen Anführungszeichen oder es geht prinzipiell nicht. Oder gibt es einen eleganteren Weg?
VG
Karlheinz
Hallo,
tempEnergy ist ein Attribut
<ftui-label
[text]="{{FBH}}:tempEnergy"
[color]="{{FBH}}:tempEnergy | map('5:blue, 20:mygreen, 23:red')"
class="size-4"><span slot="end">°C</span>
</ftui-label>
Gruß
Eisix
@Eisix
Danke für die schnelle Antwort. Funktioniert. Auf die einfache Idee kam ich nicht, da ich dachte, dass damit nur ein Reading ausgelesen werden kann. Wie unterscheide ich aber, wenn ein Reading und ein Attr den gleichen Namen haben? In dem Fall wird ja bevorzugt das Reading ausgelesen.
VG
Karlheinz
Moin.
Ich habe noch riesige Probleme mit "Grid im Grid"
in meiner index.html habe ich ein grid:
<ftui-grid rows="16" cols="12" resize>
in diesem befinden sich 2 fixe grid-tiles (menü (ftui-tab) und sowas wie ein header (uhrzeit, ein icon)).
in dem frei gebliebenen bereich will ich per ftui-content den inhalt laden (ftui-tab-view) welcher selbstredend in grid-optik dargestellt werden soll.
muss ich den freien bereich nun auch als grid-tile definieren und darin ftui-tab-view und dann ftui-content?
wenn ich das tue ist die darstellung völlig verschoben, kann aber das menü bedienen...
wenn ich das nicht tue, also nur ftui-tab-view ohne grid-tile, ist die darstellung genau richtig, kann aber das menü nicht mehr bedienen.
in der content_***.html habe ich wieder ein grid:
<ftui-grid rows="16" cols="12" resize>
plus die von mir gewünschten grid-tiles natürlich an den richtigen positionen zum ersten grid.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>FHEM - Hausautomatisierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/roman-theme.css" rel="stylesheet">
<link href="home.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<!-- when serving the page with other web servers, e.g. lighttpd -->
<!-- <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/"> -->
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('loading').style.display = 'block';
document.getElementById('shade').style.display = 'block';
});
document.addEventListener('updateDone', function() {
loading.style.display = 'none';
shade.style.display = 'none';
});
</script>
</head>
<body>
<ftui-grid rows="16" cols="12" resize>
<div id="shade" style="display: none;"></div>
<ftui-icon id="loading" name="refresh1" color="danger" class="spin" size="6"></ftui-icon>
<!-- #### LEISTE #### -->
<ftui-grid-tile row="1" col="3" height="1" width="10" shape="round" style="border-bottom: 1px solid darkorange;">
<ftui-row>
<ftui-column>
<ftui-cell>
<ftui-tab view="dwd">
<ftui-icon name="bolt" class="size-2 align-left" [color]="DWD:a_count | map('0:medium, 1:danger')"></ftui-icon>
<ftui-badge [text]="DWD:a_count" color="danger" class="size-0 align-left"></ftui-badge>
</ftui-tab>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
<ftui-clock format="hh:mm" class="size-6 thin"></ftui-clock>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
<ftui-icon name="clear" class="size-1 align-right" onclick="fully.exit()"></ftui-icon>
</ftui-cell>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<!-- #### MENÜ #### -->
<ftui-grid-tile row="1" col="1" height="16" width="2" shape="round">
<header>Menü</header>
<ftui-column>
<ftui-tab view="home" direction="vertical" >
<ftui-icon name="home1" class="size-0"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="bad" direction="vertical" active>
<ftui-icon name="shower" class="size-0"></ftui-icon>
<ftui-label>Bad</ftui-label>
</ftui-tab>
<ftui-tab view="buro" direction="vertical" >
<ftui-icon name="desktop" class="size-0"></ftui-icon>
<ftui-label>Büro</ftui-label>
</ftui-tab>
<ftui-tab view="flur" direction="vertical" >
<ftui-icon name="hanger" class="size-0"></ftui-icon>
<ftui-label>Flur</ftui-label>
</ftui-tab>
<ftui-tab view="kuche" direction="vertical" >
<ftui-icon name="cutlery" class="size-0"></ftui-icon>
<ftui-label>Küche</ftui-label>
</ftui-tab>
<ftui-tab view="schlafen" direction="vertical" >
<ftui-icon name="bed" class="size-0"></ftui-icon>
<ftui-label>Schlafen</ftui-label>
</ftui-tab>
<ftui-tab view="wohnen" direction="vertical" >
<ftui-icon name="sofa" class="size-0"></ftui-icon>
<ftui-label>Wohnen</ftui-label>
</ftui-tab>
<ftui-tab view="draussen" direction="vertical" >
<ftui-icon name="draussen_garage" class="size-0"></ftui-icon>
<ftui-label>Draußen</ftui-label>
<ftui-label>Garage</ftui-label>
</ftui-tab>
<ftui-tab view="solar" direction="vertical" >
<ftui-icon name="solar-panel" class="size-0"></ftui-icon>
<ftui-label>Solar</ftui-label>
</ftui-tab>
<ftui-tab view="dwd" direction="vertical" >
<ftui-icon name="bolt" class="size-0"></ftui-icon>
<ftui-label>DWD</ftui-label>
</ftui-tab>
<ftui-tab view="wetter" direction="vertical" >
<ftui-icon name="sunny-sleet-storm" class="size-0"></ftui-icon>
<ftui-label>Wetter</ftui-label>
</ftui-tab>
<ftui-tab view="info" direction="vertical" >
<ftui-icon name="info" class="size-0"></ftui-icon>
<ftui-label>Listen</ftui-label>
<ftui-label>Benzinpreise</ftui-label>
</ftui-tab>
<ftui-tab view="system" direction="vertical" >
<ftui-icon name="cogs" class="size-0"></ftui-icon>
<ftui-label>System &</ftui-label>
<ftui-label>Einstellungen</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<!-- #### CONTENT #### -->
<ftui-grid-tile row="2" col="3" height="15" width="10" shape="round">
<ftui-tab-view id="home">
<ftui-content file="./content_home.html" view="home"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="bad">
<ftui-content file="./content_bad.html" view="bad"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="buro">
<ftui-content file="./content_buro.html" view="buro"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="flur">
<ftui-content file="./content_flur.html" view="flur"></ftui-content>
</ftui-tab-view>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>
content_bad.html: (keine namen oder privates enthalten)
<ftui-grid rows="16" cols="12" resize>
<ftui-grid-tile row="2" col="3" height="1" width="10" shape="round" is-row>
<ftui-icon name="classic-window" [color]="bad_SC_L | map('open:danger, closed:medium')"></ftui-icon>
<ftui-label [text]="bad_WT_Weather:temperature | replace('.',',')" class="size-6 thin" [color]="bad_WT_Weather:temperature | map('0:info, 20:success, 25:warning, 30:danger')"><sup slot="end" class="size-2">°C</sup></ftui-label>
<ftui-label [text]="bad_WT_Weather:humidity | replace('.',',')" class="size-6 thin" [color]="bad_WT_Weather:humidity | map('0:info, 40:success, 71:danger')"><sup slot="end" class="size-2">%</sup></ftui-label>
<ftui-icon name="classic-window" [color]="bad_SC_R | map('open:danger, closed:medium')"></ftui-icon>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="3" height="3" width="10" shape="round">
<header>Heizung</header>
<ftui-segment [(value)]="bad_WT_Climate:desired-temp">
<ftui-segment-button value="off">
<ftui-icon name="frost"></ftui-icon>
<ftui-label>Aus</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="15.0">
<ftui-icon name="brightness_3" class="rotate-180"></ftui-icon>
<ftui-label>15°C</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="18.0">
<ftui-label>18°C</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="20.0">
<ftui-label>20°C</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="22.0">
<ftui-icon name="sun2"></ftui-icon>
<ftui-label>22°C</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="25.0">
<ftui-label>25°C</ftui-label>
</ftui-segment-button>
</ftui-segment>
<ftui-row>
<ftui-column>
<ftui-cell>
<ftui-button [(value)]="bad_WT_Climate:controlMode" states="auto,manual" [fill]="bad_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')" [color]="bad_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')" shape="circle">
<ftui-icon [name]="bad_WT_Climate:controlMode | map('auto|set_auto:oa-auto, manual|set_manual:oa-manual')" [color]="bad_WT_Climate:controlMode | map('auto:medium, set_auto|set_manual:danger, manual:')" [class-name]="bad_WT_Climate:controlMode | map('set_auto|set_manual:blink, auto|manual:')"></ftui-icon>
</ftui-button>
<ftui-label>Auto/Manuell</ftui-label>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
<ftui-button (value)="bad_WT_Climate:controlMode" states="boost" fill="outline" color="medium" shape="circle">
<ftui-icon name="heating_boost" color="medium"></ftui-icon>
</ftui-button>
<ftui-label>Boost</ftui-label>
</ftui-cell>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="6" col="3" height="2" width="10" shape="round">
<header>Rollladen</header>
<ftui-segment [(value)]="bad_rollladen:position">
<ftui-segment-button value="0">
<ftui-label>Auf</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>75%</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="55">
<ftui-label>Stop</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="80">
<ftui-label>90%</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="100">
<ftui-label>Zu</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>
<ftui-grid-tile row="8" col="3" height="2" width="2" shape="round">
<header>Decke</header>
<ftui-cell>
<ftui-button [(value)]="bad_licht" [fill]="bad_licht | map('off:outline, on:solid')" [color]="bad_licht | map('off:medium, on:primary')" shape="circle">
<ftui-icon [name]="bad_licht | map('off:lightbulb-off, on:lightbulb-on')" [color]="bad_licht | map('off:medium, on:')"></ftui-icon>
</ftui-button>
<ftui-label>An/Aus</ftui-label>
</ftui-cell>
</ftui-grid-tile>
<ftui-grid-tile row="8" col="11" height="2" width="2" shape="round">
<header>Spiegel</header>
<ftui-cell>
<ftui-button [(value)]="bad_spiegelschrank" [fill]="bad_spiegelschrank | map('off:outline, on:solid')" [color]="bad_spiegelschrank | map('off:medium, on:primary')" shape="circle">
<ftui-icon [name]="bad_spiegelschrank | map('off:lightbulb-off, on:lightbulb-on')" [color]="bad_spiegelschrank | map('off:medium, on:')"></ftui-icon>
</ftui-button>
<ftui-label>An/Aus</ftui-label>
</ftui-cell>
</ftui-grid-tile>
<!-- #### Batterie Bad #### -->
<ftui-grid-tile row="15" col="3" height="2" width="10" shape="round" is-row>
<header>Batteriestatus</header>
<ftui-cell>
<ftui-icon [name]="bad_SC_L:battery | map('low:battery-0, ok:battery')" [color]="bad_SC_L:battery | map('low:danger, ok:success')" [class-name]="bad_SC_L:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Fenster L</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon [name]="bad_SC_R:battery | map('low:battery-0, ok:battery')" [color]="bad_SC_R:battery | map('low:danger, ok:success')" [class-name]="bad_SC_R:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Fenster R</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon [name]="bad_HT:battery | map('low:battery-0, ok:battery')" [color]="bad_HT:battery | map('low:danger, ok:success')" [class-name]="bad_HT:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Heizung</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon [name]="bad_taster:battery | map('low:battery-0, ok:battery')" [color]="bad_taster:battery | map('low:danger, ok:success')" [class-name]="bad_taster:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Taster</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon [name]="bad_WT:battery | map('low:battery-0, ok:battery')" [color]="bad_WT:battery | map('low:danger, ok:success')" [class-name]="bad_WT:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Thermostat</ftui-label>
</ftui-cell>
</ftui-grid-tile>
</ftui-grid>
Wie geht es denn nun richtig mit dem Grid im Grid? wie bekomme ich eine vernünftige und funktionierende darstellung?
Grüße^^
EDIT: habe natürlich weiter probiert....
wenn ich den z-index von Menü und dem "Header" per style-Attribut auf 1 setze dann kann ich auch die "Menüpunkte" wieder anwählen.
Zitat von: khk123 am 18 Februar 2021, 16:57:19
Hi Torte,
geht bei mir mit deiner Definition problemlos. Das Device läßt sich schalten und die Checkbox erhält auch den korrekten Zustand (on oder off), wenn von einer anderen Stelle aus geschaltet wird. Egal ob map('ON: on, OFF: off') oder map('on: on, off: off'). Dein Device reagiert auch auf Kleinbuchstaben?
VG
Karlheinz
Hi Karlheinz,
danke! Ich hab die Checkbox jetzt mal 1:1 aus dem Content File direkt in die Index.html, Variable ersetzt und dann geht es, es geht dann aber auch die Checkbox aus dem ContentFile. WTF?? geht das bei Dir über ein ContentFile?
Danke Grüße Torte
Zitat von: roman1528 am 18 Februar 2021, 18:00:50
Moin.
Ich habe noch riesige Probleme mit "Grid im Grid"
roman hast du mal <ftui-grid responsive margin="2"> ausprobiert, ich hatte mal ganz amAnfang das Problem das sich ewig alles verschoben hat.
Ich habe nichts vernünftig hinbekommen und war schon am verzweifeln, seit ich es so einsetze funktioniert das sehr gut.
Das mit der Menübedienung allerdings kenne ich nicht...
Zitat von: roman1528 am 18 Februar 2021, 18:00:50
Moin.
Ich habe noch riesige Probleme mit "Grid im Grid"
in meiner index.html habe ich ein grid:
<ftui-grid rows="16" cols="12" resize>
in der content_***.html habe ich wieder ein grid:
<ftui-grid rows="16" cols="12" resize>
plus die von mir gewünschten grid-tiles natürlich an den richtigen positionen zum ersten grid.
Ich denke, du musst in der content_*** die in der index.html fixen row's und col's abziehen.
<ftui-grid rows="15" cols="10" resize>Der ftui-grid-tile muss auch in jedes ftui-tab-view rein.
Dann must du mit deinem content auch bei row=1 und col=1 beginnen.
<ftui-grid-tile row="1" col="1" height="1" width="10" shape="round" is-row>Bei mir sieht es so aus und funktioniert:
index.html
<ftui-grid base-width="40" base-height="40" margin="4">
<!-- Inhalte -->
<!-- View1 Hauptseite -->
<ftui-tab-view id="View1">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="./_content/cont_1_main.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<!-- View2 Dachgeschoss -->
<ftui-tab-view id="View2">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont2_dg.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<!-- View3 Obergeschoss -->
<ftui-tab-view id="View3">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont3_og.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<!-- View4 Erdgeschoss -->
<ftui-tab-view id="View4">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont4_eg.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<!-- View5 Kellergeschoss -->
<ftui-tab-view id="View5">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont5_kg.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<!-- View6 Draußen -->
<ftui-tab-view id="View6">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont6_dr.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<!-- View7 Wetter -->
<ftui-tab-view id="View7">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="./_content/cont_7_wetter.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
cont_7_wetter.html
<ftui-grid base-width="40" base-height="40" margin="4">
<ftui-grid-tile row="1" col="1" height="5" width="26" shape="round">
</ftui-grid-tile>
</ftui-grid>
Ich hoffe, es hilft dir weiter.
Gruß LuGu
Zitat von: torte am 18 Februar 2021, 18:34:12
Hi Karlheinz,
danke! Ich hab die Checkbox jetzt mal 1:1 aus dem Content File direkt in die Index.html, Variable ersetzt und dann geht es, es geht dann aber auch die Checkbox aus dem ContentFile. WTF?? geht das bei Dir über ein ContentFile?
Danke Grüße Torte
Ja, geht. Hab folgende Aufrufe:
index.html:
<ftui-tab-view id="home">
<ftui-grid-tile row="3" col="2" height="9" width="12" color="translucent">
<ftui-content file="p_home.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
p_home.html:
<ftui-grid-tile row="7" col="1" height="1" width="11" shape="round" color="translucent">
<ftui-content file="inc_test.html" device1="K_Licht_links"></ftui-content>
</ftui-grid-tile>
inc_test.html:
<ftui-checkbox [value]="{{device1}}:POWER | map('ON: on, OFF: off')" states="off,on" (value)="{{device1}}" ></ftui-checkbox>
VG
Karlheinz
Hallo Karlheinz,
so hab das Problem wohl gefunden.
Vielen Dank für deine Dateien, das hat mir geholfen die Augen auf zu machen :P.
Unterschied zwischen Deinen und meinen in der Index.html hab ich noch ein Hidden verarbeitet.
<ftui-content device1="SOO.WeihnachtsBeleuchtung.1" reading="POWER1" devicename="3D Printer" ico="lightbulb-on" [hidden]="SOO.WeihnachtsBeleuchtung.1:POWER1 | map('on:false, off:true')" file="./content/content_system_switch_status.html"></ftui-content>
Sobald das Hidden auf das selbe Reading geht wie die Checkbox zum anzeigen nutzt, zeigt die Checkbox den Status aus fhem nicht an. Nutze ich zb. für Hidden das Reading LWT dann geht alles wunderbar.
Kannst du das vielleicht mal bei Dir prüfen ob das Verhalten bei Dir auch so ist?
Danke und Grüße
Torte
Zitat von: torte am 19 Februar 2021, 07:34:26
Hallo Karlheinz,
so hab das Problem wohl gefunden.
Vielen Dank für deine Dateien, das hat mir geholfen die Augen auf zu machen :P.
Unterschied zwischen Deinen und meinen in der Index.html hab ich noch ein Hidden verarbeitet.
<ftui-content device1="SOO.WeihnachtsBeleuchtung.1" reading="POWER1" devicename="3D Printer" ico="lightbulb-on" [hidden]="SOO.WeihnachtsBeleuchtung.1:POWER1 | map('on:false, off:true')" file="./content/content_system_switch_status.html"></ftui-content>
Sobald das Hidden auf das selbe Reading geht wie die Checkbox zum anzeigen nutzt, zeigt die Checkbox den Status aus fhem nicht an. Nutze ich zb. für Hidden das Reading LWT dann geht alles wunderbar.
Kannst du das vielleicht mal bei Dir prüfen ob das Verhalten bei Dir auch so ist?
Danke und Grüße
Torte
Geht bei mir tadellos. Ist die Lampe an, erscheint die Checkbox. Wird sie ausgeschaltet, ist die Checkbox hidden.
Hab es mit folgenden Definitionen ausprobiert:
<ftui-content device1="K_Licht_links" reading="POWER" devicename="Licht" [hidden]="K_Licht_links:POWER | map('on:false, off:true')" file="inc_test.html"></ftui-content>
und
<ftui-checkbox [value]="{{device1}}:{{reading}} | map('ON: on, OFF: off')" states="off,on" (value)="{{device1}}"></ftui-checkbox>
Ist in deinen Definitionen ico Absicht, oder sollte das icon heißen?
VG
Karlheinz
Hi Karlheinz,
das ist Absicht, Ziel unterschiedliche Icons mit der selben Content Datei.
Ich glaube das ist das Problem welches ich schon länger habe, ich aber nicht weiß wo es herkommt.
Beim ersten anbrowsen der Seite wird nicht alles korrekt dargestellt badge zb oder togo Zeiten werden erst nach dem Refresh(F5) angezeigt.
Wenn ich jetzt zweimal F5 drücke werden auch die Stati richtig angezeigt. Manchmal auch beim ersten mal sofort. Bin ratlos zur Zeit.
Danke für deine Hilfe.
Grüße
Torte
Hab mal nochmal alles vom git in ein separates Verzeichnis kopiert.
Dann nur die beiden Schalter eingefügt. Alles andere ist original vom Git.
Browser Chrome www auf dem Fhem Server.
Zweites Bild ist nach F5
Ich verwende Firefox auf Windows. Hab es aber auch mit Safari und Firefox auf einem iPad probiert. Funktioniert. Ebenfalls mit Chrome auf dem Android-Handy. Aufgefallen ist mir aber, dass beim erstmaligen Anzeigen die Checkbox angezeigt wird und der Status allerdings nicht stimmt. Erst nach einem Schaltvorgang lief alles weitere richtig. Firefos/Windows war da richtig. Ich habe den Eindruck, dass die Stati der Anzeigen manchmal recht spät oder auch garnicht kommen. Bei einer Anzeige mit Firefox/windows von wird das Icon von 17 Batterie-Stati öfter mal nicht korrekt angezeigt. Evtl. braucht die Abfrage bei FHEM zu lange?
VG
Karlheinz
Hi, ich habe mal ein wenig gespielt.
Da Wünsche für Weihnachten noch in weiter Ferne sind und ich ein View sperren muss, habe ich mir mit einfachen Mitteln ein PinPad gebastelt.
Wenn setstate oder ein ander Dev das mal richtig machen will, kann er gern machen :).
Wer hier noch Verbesserungen sieht, kann er gern sagen.
Vorlage stammt von hier:
https://forum.fhem.de/index.php/topic,47461.msg689723.html#msg689723 (https://forum.fhem.de/index.php/topic,47461.msg689723.html#msg689723)
index.html (Auszug)
<ftui-tab view="View4">
<ftui-button (value)="set keypad_unscharf on; set KeypadDummy locked">
<ftui-icon name="lightbulb" popup-target="pinpad"></ftui-icon>
</ftui-button>
</ftui-tab>
<div style="pointer-events:none;">
<ftui-popup id="pinpad"
[trigger]="keypad_unscharf:state | map('on: true, off: false')"
[hidden]="keypad_unscharf:state | map('on:false, off:true')"
width="20%" height="52%" shape="round" timeout="0">
<header>PinPad</header>
<ftui-label color="danger" slot="close" popup-close></ftui-label>
<div style=" display:block; pointer-events:auto;">
<ftui-row height="5%">
<ftui-column margin="1">
<ftui-label
[hidden]="KeypadDummy:inputPin | map('1:false, ``:true')">*
</ftui-label>
<ftui-label
[class-name]="KeypadDummy:inputPin | map('``: blink, ``: blink')"
[hidden]="KeypadDummy:inputPin | map('``:false, 1:true')">-
</ftui-label>
</ftui-column>
<ftui-column margin="1">
<ftui-label [hidden]="KeypadDummy:inputPin | map('11:false, ``:true')">*
</ftui-label>
<ftui-label
[class-name]="KeypadDummy:inputPin | map('1: blink, ``: ')"
[hidden]="KeypadDummy:inputPin | map('1:false, 11:true')">-
</ftui-label>
</ftui-column>
<ftui-column margin="1">
<ftui-label [hidden]="KeypadDummy:inputPin | map('111:false, ``:true')">*
</ftui-label>
<ftui-label
[class-name]="KeypadDummy:inputPin | map('11: blink, ``: ')"
[hidden]="KeypadDummy:inputPin | map('1:false, 111:true')">-
</ftui-label>
</ftui-column>
<ftui-column margin="1">
<ftui-label [hidden]="KeypadDummy:inputPin | map('1111:false, ``:true')">*
</ftui-label>
<ftui-label
[class-name]="KeypadDummy:inputPin | map('111: blink, ``: ')"
[hidden]="KeypadDummy:inputPin | map('1:false, 1111:true')">-
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="25%">
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="1">
<ftui-icon name="rc_1" >
</ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="2">
<ftui-icon name="rc_2" >
</ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="3">
<ftui-icon name="rc_3" >
</ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="25%">
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="4">
<ftui-icon name="rc_4" >
</ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="5">
<ftui-icon name="rc_5" >
</ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="6">
<ftui-icon name="rc_6" >
</ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="25%">
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="7">
<ftui-icon name="rc_7" >
</ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="8">
<ftui-icon name="rc_8" >
</ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="9">
<ftui-icon name="rc_9" >
</ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="25%">
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="<">
<ftui-icon name="delete" >
</ftui-icon>
</ftui-button>
</ftui-column >
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="0">
<ftui-icon name="rc_0" >
</ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column margin="1">
<ftui-button (value)="KeypadDummy:key" states="#">
<ftui-icon name="key1" >
</ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
</div>
</ftui-popup>
</div>
<ftui-tab-view id="View4">
<ftui-grid-tile row="1" col="2" height="7" width="10" shape="round"
[hidden]="keypad_unscharf:state | map('off:false, on:true')">
<div class="size-10">Tab4</div>
</ftui-grid-tile>
</ftui-tab-view>
in fhem:
defmod keypad_unscharf dummy
attr keypad_unscharf room Heizung
attr keypad_unscharf setList on off
defmod KeypadDummy dummy
attr KeypadDummy alarmDevice Sensor
attr KeypadDummy event-on-change-reading state,inputPin
attr KeypadDummy event-on-update-reading key
attr KeypadDummy genericDeviceType security
attr KeypadDummy readingList key inputPin fails unlockPin
attr KeypadDummy room Heizung
attr KeypadDummy setList unlockPin
attr KeypadDummy userReadings inputPin:key:.[0-9] { return ReadingsVal($NAME, "inputPin", "") . ReadingsVal($NAME, "key", "")},\
fails:key:.# { if (ReadingsVal($NAME, "inputPin", "") ne ReadingsVal($NAME, "unlockPin", "")) { return ReadingsVal($NAME, "fails", 0)+1} else { return 0}},\
state:key:.# { if (ReadingsVal($NAME, "inputPin", "") ne ReadingsVal($NAME, "unlockPin", "")) { return "locked"} else { return "unlocked"}},\
inputPin:key:.[\<] { return ""},\
inputPin:key:.# { return ""},
defmod KeypadUnlocked notify KeypadDummy:unlocked set keypad_unscharf off
attr KeypadUnlocked room Heizung
Mit <div style="pointer-events:none;"> wird der Hintergrund des Popup von View4 deaktiviert für Tastendrücke/Touch.
ps.: in WebViewControl mit aktueller Android WebView geht es sogar ;)
Ich muss auch nochmal sagen wie toll die [hidden] Funktion ist.
Für mich als Laien reicht das aus (nur noch schön machen :D).
Also wer mag kann es nachstellen.
Ich habe auch schon andere Vorlagen studiert um die in FTUI3 einzufügen, aber da komme ich mit den ganzen DOM/Shadow´s nicht klar.
Hier noch paar Vorlagen für ein PinPad:
https://codepen.io/dcode-software/pen/orXrXQ (https://codepen.io/dcode-software/pen/orXrXQ)
https://www.youtube.com/watch?v=wWh8hwgeAMw (https://www.youtube.com/watch?v=wWh8hwgeAMw)
https://codepen.io/totalnerd_es/pen/AwKLk (https://codepen.io/totalnerd_es/pen/AwKLk)
https://code-boxx.com/pure-javascript-numeric-keypad/#sec-download (https://code-boxx.com/pure-javascript-numeric-keypad/#sec-download)
Gruß Thomas
Guten Tag zusammen..
kann es sein, dass beim Button die Pipes nicht richtig laufen?
<ftui-label [text]="PostMe:postme01Cont | replace(',',' ') | part(1)"></ftui-label>
<ftui-button [value]="PostMe:postme01Cont | replace(',',' ') | part(1)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
oder habe ich da einen massiven denkfehler?
Reading vom Device ist:
abc,def,ghi,jkl,mno,pqr,stu,vwx,yz
Das Label gibt es richtig aus: abc
Mir ist bewusst, dass ein Button für gewöhnlich on und off spricht, dennoch denke ich, dass das machbar ist was ich da vor habe.
Vielleicht muss man ja noch was mappen... habe ich bereits versucht... aber was bleibt denn schon als
map('.*:on, .*:off')
wenn man den inhalt von part(1) ja theoretisch nicht kennt, weil's einfach alles sein könnte...
Oder hat schon jemand eine funktionierende PostMe-List?
Nachtrag: hat sich wahrscheinlich erledigt, weil die replace-Pipe das nicht hergibt. (nur das erste vorkommen wird ersetzt).
oder: ftui.binding.js
+17 const replaceAll = (find, replace) => input => String(input).replaceAll(find, replace);
Grüße^^
@roman1528
Zitat
Nachtrag: hat sich wahrscheinlich erledigt, weil die replace-Pipe das nicht hergibt. (nur das erste vorkommen wird ersetzt).
Stimmt, aber nur auf den ersten Blick ... reguläre Ausdrücke erhöhen die Chance auf erfolgreichen Einsatz deutlich ...
Folgende Beispiele (#1-#7)
<ftui-label [text]="ftuitest:string"></ftui-label>
<ftui-label [text]="ftuitest:string | replace(',',' ')"></ftui-label>
<ftui-label [text]="ftuitest:string | replace(/,/,' ')"></ftui-label>
<ftui-label [text]="ftuitest:string | replace(/,/g,' ')"></ftui-label>
<ftui-label [text]="ftuitest:string | replace(/.*/,function (x) { return x.replaceAll(',',' ') })"></ftui-label>
<ftui-label [text]="ftuitest:string | replace(new RegExp('(ab|mn)','g'),'äöüß')"></ftui-label>
<ftui-label [text]="ftuitest:string | replace(/[bye]/g,function (x) { return x.toUpperCase() })"></ftui-label>
liefern folgende Ausgabe
abc,def,ghi,jkl,mno,pqr,stu,vwx,yz
abc def,ghi,jkl,mno,pqr,stu,vwx,yz
abc def,ghi,jkl,mno,pqr,stu,vwx,yz
abc def ghi jkl mno pqr stu vwx yz
abc def ghi jkl mno pqr stu vwx yz
äöüßc,def,ghi,jkl,äöüßo,pqr,stu,vwx,yz
aBc,dEf,ghi,jkl,mno,pqr,stu,vwx,Yz
Beispiel #4 wäre wahrscheinlich in Deinem aktuellen Fall interessant. Bei Verwendung von part(1) würde aber auch Beispiel #2 oder #3 reichen; ich gehe aber mal davon aus, dass es auch andere part-Zugriffe gibt ...
Beispiel #6-#7 haben mit dem aktuellen Fall nicht direkt was zu tun, verdeutlichen aber, dass man replace sehr vielfältig einsetzen kann ...
Zitat von: OdfFhem am 21 Februar 2021, 06:12:34
Beispiel #4 wäre wahrscheinlich in Deinem aktuellen Fall interessant. Bei Verwendung von part(1) würde aber auch Beispiel #2 oder #3 reichen; ich gehe aber mal davon aus, dass es auch andere part-Zugriffe gibt ...
Moin und Danke.
RegEx ist natürlich eine gute Möglichkeit an die ich immer erst als letztes denke, weil ich da nicht so fit drin bin. Das nächste was ich mich frage: Ist es dann immer noch "Keep it simple"? Ich finde nicht...
Ein ganz anderes Problem, an das ich vorher natürlich nicht gedacht habe, ist, Einträge, die aus mehreren Wörtern bestehen... z.B. "Joghurt mit der Ecke" ...werden natürlich auch in Parts aufgeteilt... Also muss definitiv ein Modul her, welches das eingehende Array nach "Trennzeichen" zerlegt.
Ein paar Post's vorher hat das jemand schon richtig erkannt, dass das mittlerweile, für den Hobby-Coder, sehr undurchschaubar geworden ist durch die ganzen shadow's und was weiß ich was. Habe gestern bereits versucht mich am <ftui-label> zu orientieren... mit nur sehr wenig Erfolg.
Fazit: ich versuche es weiter, werde aber wohl auf eine von setstate oder der Community gelieferten Lösung warten müssen.
Danke trotzdem.
Grüße^^
@roman1528
Ich setze PostMe aktuell (noch) nicht ein, aber das kann sich ja noch ändern.
Mich würde interessieren, was Du jetzt (optisch und inhaltlich) genau abbilden willst.
Kannst Du mal Deinen Versuch posten und sagen, was nicht gefällt bzw. fehlt?
(am Besten an einem konkreteren Beispiel)
Vielleicht habe ich es 3 einfach bisher nur überlesen - gibt es eine Möglichkeit ein Slidemenu in FTUI3 zu erstellen. Würde gerne für ein Handy ein ein- ausblendbares Menü nutzen. Wenn ja, hat jemand bitte ein Beispiel?
Gruß und sonniges Wochenende
eurofinder
Zitat von: OdfFhem am 21 Februar 2021, 11:01:45
@roman1528
Ich setze PostMe aktuell (noch) nicht ein, aber das kann sich ja noch ändern.
Mich würde interessieren, was Du jetzt (optisch und inhaltlich) genau abbilden willst.
Kannst Du mal Deinen Versuch posten und sagen, was nicht gefällt bzw. fehlt?
(am Besten an einem konkreteren Beispiel)
Für FTUI 2 gab es ein PostMe-Widget (s.u.)
Das habe ich versucht mit Boardmitteln in FTUI 3 nach zu bauen.
Im PostMe-Modul (FHEM) wird der Listenname und die Liste in je einem Reading abgelegt. Das Trennzeichen in der Liste kann selbst bestimmt werden (Standard ist Komma, Leerzeichen geht nicht).
Ich frage also derzeit die ganze Liste (Reading) ab, schmeiße die Kommas raus und filtere dann mit part(). Das geht so lange gut, wie nur ein Wort im Listeneintrag steht (siehe vorheriger Post /Joghurt und so).
Der nächste griff ins Klo passiert dann bei [hidden]... Gibt es z.B. part(6) nicht wird trotzdem angezeigt und die ganze Liste dargestellt. Filter für [hidden] ist natürlich auch schwierig, weil man ja theoretisch nicht wissen kann was drin steht, bzw. es ja immer was anderes sein kann.
Hier mal mein Versuch:
<ftui-grid-tile row="4" col="3" height="9" width="10" shape="round" [hidden]="PostMe:list1 | map('.*:true, LIDL:false')">
<header>Einträge</header>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(1) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(1)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(1) | map('on:.*, off:.*')" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(2) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(2)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(2)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(3) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(3)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(3)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(4) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(4)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(4)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(5) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(5)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(5)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(6) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(6)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(6)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(7) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(7)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(7)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(8) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(8)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(8)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(9) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(9)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(9)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(10) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(10)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(10)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(11) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(11)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(11)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(12) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(12)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(12)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(13) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(13)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(13)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row height="10%" [hidden]="PostMe:postme01Cont | replace(/,/g,' ') | part(14) | map('.*:false, ``:true')">
<ftui-column width="60%">
<ftui-label [text]="PostMe:postme01Cont | replace(/,/g,' ') | part(14)"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="PostMe:postme01Cont | replace(/,/g,' ') | part(14)" (value)="set PostMe remove LIDL $value" fill="clear">
<ftui-icon name="check" color="white" invert></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
[hidden]="PostMe:list1 | map('.*:true, LIDL:false')" (Zeile 1) setze ich per Dropdown und ist für die eigentliche Liste irrelevant.
Der ftui-button funktioniert auch (noch) nicht. Da weiß ich aber echt nicht was das Problem ist. Von wegen 'Keep it simple' :P ;D
Grüße^^ ...erstmal...
Mahlzeit !
Nachdem ich nun doch schon einige Zeit mit FHEM meine Hütte automatisiert habe, habe ich mich ans FTUI herangemacht. Ich habe wie im WIKI beschrieben die Installationsprozedur durchgeführt und mir ein paar Seiten abgekupfert. Dann bin ich drauf gekommen, dass es eine neue Version V3 gibt und habe mir gedacht: da fang ich gleich mal damit an. Komatibilitätsprobleme konnte ich keine feststellen - ich hatte ja noch fast nichts auf meinen Seiten.
Doch heute machte ich mal Updates (mit der FTUI-Installation kamen Update-Buttons mit die ungefähr so aussehen):
defmod systemCommands weblink cmdList system_fhem:Reload:rereadcfg system_fhem_update:Update:update system_fhem_update:Update-Check:update+check system_fhem_reboot:Restart:shutdown+restart it_smartphone:Update-TabletUI:update+all+https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt it_smartphone:Update-Tablet-Widgets:update+all+https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt
attr systemCommands group FHEM-Wartung
attr systemCommands room Server
setstate systemCommands initialized
Dann habe uch noch ein
update
shutdown restart
durchgeführt. Und dann war ich überrascht. Denn plötzlich sehe ich auf meinem Tablet-UI die Uhr und die Statistics nicht mehr. Eine Untersuchung meiner Seite ergibt:
:8083/fhem/ftui/js/widget_clock.js:2 Uncaught ReferenceError: loadplugin is not defined
at :8083/fhem/ftui/js/widget_clock.js:2
:8083/fhem/ftui/js/widget_klimatrend.js:2 Uncaught ReferenceError: loadplugin is not defined
at :8083/fhem/ftui/js/widget_klimatrend.js:2
Habe ich meine Installation "zerschossen" und ist diese nun "unsauber" - ein Mix zwische V2 und V3 ? Wie kann ich das bereinigen ?
Danke für die Unterstützung !
du mußt auf jeden Fall zwei verschiedene Ordner wählen einer noch für FTUI 2 und einer für die 3.
Habe ich jedenfalls so und beide laufen zusammen ;)
Zitat von: rallye am 21 Februar 2021, 13:12:08
Mahlzeit !
Nachdem ich nun doch schon einige Zeit mit FHEM meine Hütte automatisiert habe, habe ich mich ans FTUI herangemacht. Ich habe wie im WIKI beschrieben die Installationsprozedur durchgeführt und mir ein paar Seiten abgekupfert. Dann bin ich drauf gekommen, dass es eine neue Version V3 gibt und habe mir gedacht: da fang ich gleich mal damit an. Komatibilitätsprobleme konnte ich keine feststellen - ich hatte ja noch fast nichts auf meinen Seiten.
Doch heute machte ich mal Updates (mit der FTUI-Installation kamen Update-Buttons mit die ungefähr so aussehen):
defmod systemCommands weblink cmdList system_fhem:Reload:rereadcfg system_fhem_update:Update:update system_fhem_update:Update-Check:update+check system_fhem_reboot:Restart:shutdown+restart it_smartphone:Update-TabletUI:update+all+https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt it_smartphone:Update-Tablet-Widgets:update+all+https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt
attr systemCommands group FHEM-Wartung
attr systemCommands room Server
setstate systemCommands initialized
Dann habe uch noch ein
update
shutdown restart
durchgeführt. Und dann war ich überrascht. Denn plötzlich sehe ich auf meinem Tablet-UI die Uhr und die Statistics nicht mehr. Eine Untersuchung meiner Seite ergibt:
:8083/fhem/ftui/js/widget_clock.js:2 Uncaught ReferenceError: loadplugin is not defined
at :8083/fhem/ftui/js/widget_clock.js:2
:8083/fhem/ftui/js/widget_klimatrend.js:2 Uncaught ReferenceError: loadplugin is not defined
at :8083/fhem/ftui/js/widget_klimatrend.js:2
Habe ich meine Installation "zerschossen" und ist diese nun "unsauber" - ein Mix zwische V2 und V3 ? Wie kann ich das bereinigen ?
Danke für die Unterstützung !
update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txtDann wird FTUI 3 automatisch nach /ftui installiert und /tablet bleibt wie es ist.
Backup laden... Befehl oben ausführen und Spass haben^^
Grüße^^
Button und FS20 ?
hat von euch jemand Erfahrung mit FS20 Komponenten? Ich kann diese einschalten aber nicht mehr aus, es wird dann immer nur der "on" Befehl gesendet. Schalte ich in Fhem um ändert sich das Icon in Blau, also wird der Status richtig erkannt. Der selbe Code bei einem HM oder MQTT funktioniert fehlerfrei.
<ftui-grid-tile row="6" col="1" height="4" width="1" shape="round">
<header>Eingang</header>
<div class="cell">
<ftui-button [(value)]="Eingang"
[fill]="Eingang:state | map('on|set_on:solid, off|set_off:outline')"
[color]="Eingang:state | map('on|set_on:primary, off|set_off:medium')"
shape="circle" states="on,off" class="size-3">
<ftui-icon path="../images/openautomation/"
[name]="Eingang:state | map('on|set_on:light_outdoor, off|set_off:light_outdoor')"
[class-name]="Eingang:state | map('set_on|set_off:blink, on|off:')"></ftui-icon>
</ftui-button>
</div>
</ftui-grid-tile>
Ich habe schon vieles probiert, komme aber da nicht weiter.
Internals:
BTN 05
DEF eb6e 05
FUUID 5c44db9c-f33f-27bd-69cd-1b770ae89a29cfcf
IODev mapleCUN
NAME Eingang
NR 475
STATE Ein
TYPE FS20
XMIT eb6e
CODE:
1 eb6e 05
READINGS:
2021-02-21 16:15:44 state on
Attributes:
IODev mapleCUN
alexaName eingangslicht
alexaRoom alexaroom
alias Eingangslicht
devStateIcon Aus:rc_RED:Ein Ein:rc_GREEN:Aus
eventMap on:Ein off:Aus
fp_Garten 171,837,1,Eingang,
fp_Grundriss 596,366,1,Eingang
group Licht
icon light_outdoor
model fs20st
room Licht,_Garten,_Wohnzimmer,alexaroom
webCmd Ein:Aus
ein List des FS20 Devices, es ist egal ob sich um einen Wandschalter oder einer Steckdose handelt, der Fehler ist bei beiden da. In der FTUI V2 funktioniert das.
LG
Zitat von: Reinhart am 21 Februar 2021, 16:26:08
Button und FS20 ?
hat von euch jemand Erfahrung mit FS20 Komponenten? Ich kann diese einschalten aber nicht mehr aus, es wird dann immer nur der "on" Befehl gesendet. Schalte ich in Fhem um ändert sich das Icon in Blau, also wird der Status richtig erkannt. Der selbe Code bei einem HM oder MQTT funktioniert fehlerfrei.
<ftui-grid-tile row="6" col="1" height="4" width="1" shape="round">
<div class="cell">
<ftui-button [(value)]="Eingang"
[fill]="Eingang:state | map('on|set_on:solid, off|set_off:outline')"
[color]="Eingang:state | map('on|set_on:primary, off|set_off:medium')"
shape="circle" states="on,off" class="size-3">
<ftui-icon path="../images/openautomation/"
[name]="Eingang:state | map('on|set_on:light_outdoor, off|set_off:light_outdoor')"
[class-name]="Eingang:state | map('set_on|set_off:blink, on|off:')"></ftui-icon>
</ftui-button>
</div>
</ftui-grid-tile>
Ich habe schon vieles probiert, komme aber da nicht weiter.
Internals:
BTN 05
DEF eb6e 05
FUUID 5c44db9c-f33f-27bd-69cd-1b770ae89a29cfcf
IODev mapleCUN
NAME Eingang
NR 475
STATE Ein
TYPE FS20
XMIT eb6e
CODE:
1 eb6e 05
READINGS:
2021-02-21 16:15:44 state on
Attributes:
IODev mapleCUN
alexaName eingangslicht
alexaRoom alexaroom
alias Eingangslicht
devStateIcon Aus:rc_RED:Ein Ein:rc_GREEN:Aus
eventMap on:Ein off:Aus
fp_Garten 171,837,1,Eingang,
fp_Grundriss 596,366,1,Eingang
group Licht
icon light_outdoor
model fs20st
room Licht,_Garten,_Wohnzimmer,alexaroom
webCmd Ein:Aus
ein List des FS20 Devices, es ist egal ob sich um einen Wandschalter oder einer Steckdose handelt, der Fehler ist bei beiden da. In der FTUI V2 funktioniert das.
LG
Hallo Reinhart,
in der Example Datei button.html
Ist ein gutes Beispiel für die Umsetzung hier ein Ausschnitt...
<div class="cell">
<ftui-button [value]="Stehlampe | map('on|dim.*: on, off|0: off')" (value)="set dummy1 $value; set Stehlampe $value">
on,off
</ftui-button>
</div>
<div class="cell">
<ftui-button fill="outline" shape="circle"
[value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
(value)="Sonos_Kueche" states="play, pause">
<ftui-icon [name]="Sonos_Kueche:transportState | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
Sonos_Kueche:state | map('play: stop, pause: play')">
</ftui-icon>
</ftui-button>
</div>
VG
Olli
@Reinhart
Probiere mal so:
<ftui-button [(value)]="Eingang">on,off</ftui-button>
mfg Thomas
Bedanke mich für eure Vorschläge!
Mit dem obigen Beispiel des Sonos habe ich schon experimentiert aber auch keine vollständigen Ergebnisse bekommen.
Auch der wirklich einfache Vorschlag von mr_petz liefert exakt mein Ergebnis, also nur einschalten und das wars.
Ich habs jetzt auch noch mit einem alten IT Schalter vom Bauhaus versucht, das gleiche Ergebnis wie bei FS20, nur einschalten geht.
LG
Zitat von: mr_petz am 21 Februar 2021, 18:15:16
@Reinhart
Probiere mal so:
<ftui-button [(value)]="Eingang">on,off</ftui-button>
mfg Thomas
Hallo Reinhard,
ich habe das mal eben mit einem Dummy nachgebaut. Die Ursache ist dein eventMap.
Wenn du mit eventMap weitermachen möchtest, musst du bei [value] "Eingange:state" auslesen, da STATE bei dir auf Ein oder Aus gemappt wird.
Also wie folgt...
<ftui-button [value]="Eingang:state" (value)="Eingang" states="off, on"
[fill]="Eingang:state | map('on|set_on:solid, off|set_off:outline')"
[color]="Eingang:state | map('on|set_on:primary, off|set_off:medium')"
shape="circle" states="on,off" class="size-3">
<ftui-icon path="../images/openautomation/"
[name]="Eingang:state | map('on|set_on:light_outdoor, off|set_off:light_outdoor')"
[class-name]="Eingang:state | map('set_on|set_off:blink, on|off:')"></ftui-icon>
</ftui-button>
LG
Olli
so wie ich das sehe, treten diese Probleme bei mir bei allen Devices auf die keinen Rückkanal haben.
Man kann einmal einschalten, das Icon ändert sich korrekt und färbt sich blau. Wir erneut geklickt, dann kommt immer der gleiche Befehl "set Eingang on", siehe Bild. Ändere ich den Devicenamen auf einen mit Rückkanal (HM oder Kasa) dann funktioniert der gleiche Code.
LG
@octek0815
das wars, dein Vorschlag funktioniert!!!
Warum das so ist muss ich jetzt in Ruhe durchdenken, aber das funktioniert nun auch bei der IT Steckdose!
Danke für deine Bemühungen!
LG
@roman1528
Ich habe mal ein wenig mit dem PostMe-Modul rumprobiert und über ein (individuelles) Reading namens userRead_selectedName (bei Dir vermutlich list1) die Sichtbarkeit einer Liste gesteuert. Sich wiederholende Inhalte habe ich entsprechend ausgelagert und es ergeben sich folgende HTML-Teile.
Ausschnitt aus dem Inhalt von index.html oder tab-view_postme.html:
<ftui-grid-tile row="4" col="3" height="31" width="10" shape="round">
<header>Einkaufsliste</header>
<ftui-content file="content_postme.html" device="PostIt" list-num="01" list-name="ALDI" list-bg-color="green"></ftui-content>
<ftui-content file="content_postme.html" device="PostIt" list-num="02" list-name="LIDL" list-bg-color="yellow"></ftui-content>
<ftui-content file="content_postme.html" device="PostIt" list-num="03" list-name="markt3" list-bg-color="orange"></ftui-content>
<ftui-content file="content_postme.html" device="PostIt" list-num="04" list-name="markt4" list-bg-color="violet"></ftui-content>
</ftui-grid-tile>
Inhalt von content_postme.html:
<ftui-row [hidden]="{{device}}:userRead_selectedName | map('`{{list-name}}`:false,.*:true')" class="{{list-bg-color}}">
<ftui-column class="w-90">
<ftui-row height="10%" margin="5px 5px 0 5px">
<ftui-label [text]="{{device}}:postme{{list-num}}Name" class="blue w-100 size-3 text-center"></ftui-label>
</ftui-row>
<ftui-row height="5%" margin="5px">
<input type="text" id="newEntry{{list-num}}" class="w-80">
<ftui-icon name="plus" color="black" size="0" onclick="ftuiApp.fhemService.updateFhem('set {{device}} add {{list-name}} ' + newEntry{{list-num}}.value)"></ftui-icon>
</ftui-row>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="1" entry-bg-color="black-80"></ftui-content>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="2" entry-bg-color="black-75"></ftui-content>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="3" entry-bg-color="black-80"></ftui-content>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="4" entry-bg-color="black-75"></ftui-content>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="5" entry-bg-color="black-80"></ftui-content>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="6" entry-bg-color="black-75"></ftui-content>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="7" entry-bg-color="black-80"></ftui-content>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="8" entry-bg-color="black-75"></ftui-content>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="9" entry-bg-color="black-80"></ftui-content>
<ftui-content file="content_postme_entry.html" device="{{device}}" list-num="{{list-num}}" list-name="{{list-name}}" entry-num="10" entry-bg-color="black-75"></ftui-content>
<ftui-row height="5%" margin="5px 0 0 0">
</ftui-row>
</ftui-column>
</ftui-row>
Inhalt von content_postme_entry.html:
<ftui-row [hidden]="{{device}}:postme{{list-num}}Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true,{{entry-num}}:false')"
class="{{entry-bg-color}}">
<ftui-column width="75%">
<ftui-label [text]="{{device}}:postme{{list-num}}Cont | replace(/.*/,function (x) { return x.split(',')[{{entry-num}}-1] })"
id="oldEntry{{list-num}}_{{entry-num}}"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="minus" onclick="ftuiApp.fhemService.updateFhem('set {{device}} remove {{list-name}} ' + oldEntry{{list-num}}_{{entry-num}}.text)"></ftui-icon>
</ftui-column>
</ftui-row>
Eine mögliche Darstellung sieht dann ungefähr so aus wie auf den angehängten Screenshots.
sehr interessant... habe ich mich noch nie mit beschäftigt solch eine Einkaufliste ;)
Zitat von: OdfFhem am 22 Februar 2021, 06:03:35
@roman1528
Ich habe mal ein wenig mit dem PostMe-Modul rumprobiert und über ein (individuelles) Reading namens userRead_selectedName (bei Dir vermutlich list1) die Sichtbarkeit einer Liste gesteuert. Sich wiederholende Inhalte habe ich entsprechend ausgelagert und es ergeben sich folgende HTML-Teile.
Danke Danke Danke :-*
Ich habe das jetzt so gelöst:
<ftui-grid-tile row="2" col="3" height="1.5" width="10" shape="round">
<header>Liste</header>
<ftui-dropdown
[value]="PostMe:list"
(value)="setreading PostMe:list">
<option value="LIDL">LIDL</option>
<option value="EDEKA">EDEKA</option>
<option value="Andere">Andere</option>
<option value="To-Do-Liste">To-Do-Liste</option>
</ftui-dropdown>
</ftui-grid-tile>
<!-- #### LIDL #### -->
<ftui-grid-tile row="3.5" col="3" height="9.5" width="10" shape="round" [hidden]="PostMe:list | map ('LIDL:false, .*:true')" is-row>
<header>Einträge</header>
<ftui-column width="90%" align-items="top">
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 1:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[1-1] })" id="oldEntry1_1"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_1.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 2:false')" style="background-color: var(--gray20); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[2-1] })" id="oldEntry1_2"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_2.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 3:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[3-1] })" id="oldEntry1_3"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_3.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 4:false')" style="background-color: var(--gray20); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[4-1] })" id="oldEntry1_4"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_4.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 5:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[5-1] })" id="oldEntry1_5"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_5.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 6:false')" style="background-color: var(--gray20); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[6-1] })" id="oldEntry1_6"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_6.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 7:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[7-1] })" id="oldEntry1_7"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_7.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 8:false')" style="background-color: var(--gray20); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[8-1] })" id="oldEntry1_8"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_8.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 9:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[9-1] })" id="oldEntry1_9"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_9.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 10:false')" style="background-color: var(--gray20); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[10-1] })" id="oldEntry1_10"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_10.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 11:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[11-1] })" id="oldEntry1_11"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_11.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 12:false')" style="background-color: var(--gray20); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[12-1] })" id="oldEntry1_12"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_12.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 13:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[13-1] })" id="oldEntry1_13"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_13.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 14:false')" style="background-color: var(--gray20); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[14-1] })" id="oldEntry1_14"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_14.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 15:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[15-1] })" id="oldEntry1_15"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_15.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 16:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[16-1] })" id="oldEntry1_16"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_16.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 17:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[17-1] })" id="oldEntry1_17"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_17.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 18:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[18-1] })" id="oldEntry1_18"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_18.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 19:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[19-1] })" id="oldEntry1_19"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_19.text)"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',').length }) | map('0:true, 20:false')" style="background-color: var(--gray15); min-height:8%; max-height:8%;">
<ftui-column width="80%">
<ftui-label [text]="PostMe:postme01Cont | replace(/.*/,function (x) { return x.split(',')[20-1] })" id="oldEntry1_20"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set PostMe remove LIDL ' + oldEntry1_20.text)"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
<ftui-grid-tile row="13" col="3" height="1" width="10" shape="round" [hidden]="PostMe:list | map ('LIDL:false, .*:true')" is-row>
<ftui-column width="90%">
<ftui-row>
<ftui-column width="80%">
<input type="text" id="newEntry01">
</ftui-column>
<ftui-column>
<ftui-icon name="cart-plus" size="2" onclick="ftuiApp.fhemService.updateFhem('set PostMe add LIDL ' + newEntry01.value); newEntry01.value='';"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-column>
</ftui-grid-tile>aus dem einfachen grund, weil es bei mir ewigkeiten gedauert hat wenn er 4x (postme) mal 30x (postme_entry) geholt hat um dann festzustellen dass 90% davon hidden sind.
hab tausend dank dafür!!!
Grüße^^
Ich würde mir gerne eine Bahnhofsuhr nach diesemhttps://forum.fhem.de/index.php/topic,115259.msg1110167.html#msg1110167 thread bauen, bin aber noch blutiger Anfänger im FTUI. Die Seite habe ich, wo ich die Uhr konfigurieren kann. Sieht so aus:
<object data="station-clock.svg" type="image/svg+xml"
width="200" height="200">
<param name="dial" value="din 41091.1"/>
<param name="hourHand" value="siemens"/>
<param name="minuteHand" value="siemens"/>
<param name="secondHand" value="din 41071.1"/>
<param name="minuteHandBehavior" value="stepping"/>
<param name="secondHandBehavior" value="swinging"/>
<param name="secondHandStopToGo" value="yes"/>
<param name="secondHandStopTime" value="1.5"/>
<param name="backgroundColor" value="rgba(0,0,0,0)"/>
<param name="dialColor" value="rgb(40,40,40)"/>
<param name="hourHandColor" value="rgb(20,20,20)"/>
<param name="minuteHandColor" value="rgb(20,20,20)"/>
<param name="secondHandColor" value="rgb(160,50,40)"/>
<param name="axisCoverColor" value="rgb(20,20,20)"/>
<param name="axisCoverRadius" value="7"/>
<param name="updateInterval" value="50"/>
</object>
Wie bekomme ich das in ein station-clock.svg ? Also was muss vor bzw nach dem obigen Codeschnipsel stehen und wo kommt das dann hin ? In die /opt/fhem/www/images ?
Danke
Hallo,
Du baust Dir auf dieser Seite (http://www.3quarks.com/en/SVGClock/) Deine Wunschuhr zusammen und lädst sie dann in Form des station-clock.svg herunter, diese Datei legst Du dann in Deinem ftui/images Ordner ab.
Ansonsten steht alles was Du wissen musst in dem von Dir verlinkten Post.
Eine Bitte noch für die Zukunft, bitte Links auch als solche in Postings einstellen, so muss man sich den kopieren und in den Browser einsetzen um dahin zu gelangen.
Einen Link kannst Du mit dem Icon oben unter der "B" erstellen.
Danke, werd mich gleich dran machen und sorry wg.
Zitat von: grossmaggul am 23 Februar 2021, 18:53:05
Eine Bitte noch für die Zukunft, bitte Links auch als solche in Postings einstellen, so muss man sich den kopieren und in den Browser einsetzen um dahin zu gelangen.
Einen Link kannst Du mit dem Icon oben unter der "B" erstellen.
Jetzt bekomme ich die Fehlermeldung
File not found: ./www/ftui//images/station-clock.svg
Ich weiss nicht wie ich den Doppel-Slash weg bekomme. Ich hab's auch voll qualifiziert versucht
<object data="/opt/fhem/www/images/station-clock.svg" type="image/svg+xml" width="100" height="100"> und ende damit, dass mir das FHEM-Home-Icon angezeigt wird, das ich auch anklicken kann und ins "normale" FHEM WEB IF führt.
Heruntergeladen habe ich das hier => http://www.3quarks.com/images/svg/station-clock.svg (ftp://www.3quarks.com/images/svg/station-clock.svg)
Du musst den Pfad relativ zum ftui Verzeichnis angeben.
<object data="images/station-clock.svg" ...
Hallo zusammen,
gibt es eigentlich mittlerweile ein Thread mit Beispielen analog dem vom FTUI2?
Ich versuche gerade ein komplett neues ftui bei mir aufzubauen, das gelingt mir leider nur bedingt, da ich in HTML/CSS nicht sonderlich tief stecke und mir alles irgendwie zusammensuchen muss.
Beispiele würden (vermutlich nicht nur mich) wirklich weiterbringen.
Gruß
Alex
Zitat von: Nighthawk am 24 Februar 2021, 09:41:36gibt es eigentlich mittlerweile ein Thread mit Beispielen analog dem vom FTUI2?
Ja, liefert FTUI3 direkt mit im Ordner
examples, die dann auf deiner FTUI3-Instanz laufen.
Oder auf dem Github-Repository (https://github.com/knowthelist/ftui) (runterscrollen zum Menüpunkt Examples).
Und direkt als Code: https://github.com/knowthelist/ftui/tree/master/www/ftui/examples (https://github.com/knowthelist/ftui/tree/master/www/ftui/examples).
gefällt mir auch sehr gut, Danke dafür :)
Wird es für Docker auch eine x86 Version geben?
Moin,
ich habe ein Problem mit einem Icon/Button und den Hue Lampen, folgendes Konstrukt habe ich erstellt.
<ftui-column>
<ftui-button shape="circle" [(value)]="wz.stehlampe_1" [fill]="wz.stehlampe_1:state | map('off:outline, on:solid')">
<ftui-icon [name]="wz.stehlampe_1 | map('on:lightbulb-on-outline, off:lightbulb-outline')"></ftui-icon>
</ftui-button>
<ftui-colorpicker [hex]="wz.stehlampe_1:rgb" (hex)="replace('#','') | wz.stehlampe_1:rgb"
direction="horizontal" has-hue-slider has-value-slider>
</ftui-colorpicker>
<ftui-label text="Stehlampe 1"></ftui-label>
</ftui-column>
Das funktioniert so lange, bis ich den Dimmer des colorpickers betätige, dann verschwindet das Icon und ich bekomme eine Fehlermeldung:
File not found:
./www/ftui/icons/dimXX%.svg
Was mache ich da falsch, bzw. wie kann ich das Problem umgehen?
@grossmaggul
Liegt wohl daran, dass Du den state bzw. STATE für den icon-name nutzt. Der liefert on,off,dim...
Wenn nur an oder aus interessant ist, besser auf das onoff-Reading wechseln. Dies liefert 0 oder 1.
Danke, das war's und ist ja auch logisch, manchmal ist man irgendwie betriebsblind.
Jetzt muß ich aber nochmal auf den Colorpicker zurück kommen, der funktioniert irgendwie nicht richtig.
Das Problem bezieht sich auf den Slider und lässt sich auch mit der Beispielseite im github nachvollziehen.
Lampe ist eingeschaltet, Dimmer voll aufgedreht, irgendeine Farbe eingestellt. Wenn man jetzt den Dimmer auf Null zieht und dann wieder auf 100% lässt sich der RGB Slider nicht mehr bewegen, weder durch ziehen noch durch Klicken in irgendeine Farbe. Beim Colorpickerkreis funktioniert das aber.
Achso, müsste die direction nicht <vertical> heißen statt <horizontal>, mir scheint die sind vertauscht?
Hallo,
habe Probleme mit einem Slider, funktioniert nur 1 mal. Nach einem reload geht es wieder 1 mal.
<ftui-slider [(value)]="RGBWC:raw_cw" min="0" max="1023" (value)="set RGBWC raw 0,0,0,0,$value" tick="250" wide-tick="500" handle="retro" is-horizontal has-ruler has-wide-ticksdebounce="200" step="1" type="single" color="primary">
</ftui-slider>
Habe ich einen error eingebaut oder ist das ein generelles Problem?
Gruß
Eisix
@Eisix
Wird am Banana in the Box liegen.
[ ]=get
( )=set
mfg Thomas
Hi@all:
Ich würde gern im weather die Nacht-Icons haben wollen.
Wird anhand der n1-14 und t1-14 Icons gemappt...
Könnte man es wieder mit integrieren?
Habe es erstmal wie im Anhang gelöst.
Dazu habe ich auch noch die Bas-Icons genommen.
Ich weiss, das es mit den Readings "heiter", "sonnig" etc. einfacher ist, aber da hat man halt keine Nacht-Icons.
Vielleicht kann man es an eine Zeit koppeln? So von 20 bis 6 Uhr ist Nacht und mappt dann die Icons der Nacht??
Wird dann nur bei der Tagesübersicht blöd "früh", "tag", "abend", "nacht".
Ist nur eine Idee...
Bsp. für aktuellen Tag:
<ftui-weather class="size-6" [conditionnight]="Wetter_ProPlanta:weatherIcon"></ftui-weather>
Gruß Thomas
Edit: Anhang geändert (zusätzliche Icons zu animated Bas-Icon hinzugefügt) und js entfernt
Zitat von: mr_petz am 27 Februar 2021, 09:15:15
@Eisix
Wird am Banana in the Box liegen.
[ ]=get
( )=set
mfg Thomas
Habs entsprechend geändert doch das Verhalten ist gleich. Der set Befehl wird immer nur 1 mal ausgeführt, nur ein reload erlaubt wieder 1 mal set. Da ist noch was faul.
<ftui-slider [value]="RGBWC_Aquarium:raw_cw" min="0" max="1023" (value)="set RGBWC_Aquarium raw 0,0,0,0,$value" tick="250" wide-tick="500" handle="retro" is-horizontal has-ruler has-wide-ticksdebounce="200" step="1" type="single" color="primary">
</ftui-slider>
Gruß
Eisix
Ich würde gerne "kleinklima" verwenden und die Icons zu kopieren wäre nicht der Issue. Doch WO finde ich die Icons (Source zum Kopieren) ? Danke
Zitat von: setstate am 26 November 2020, 10:13:57
kleinklima sucht die Icons unter ./icons/weather/kleinklima/*
Das wird aber nicht mitgeliefert und muss sich jeder selber dorthin kopieren
mir hat die netter User hier geschickt, ich hänge sie mal ran
@Eisix
Ich kann zumindest nachstellen, wenn man den slider bissl hin und her schiebt, dann geht es bei mir auch nur einmal (set).
Wenn man am slider einzelne klicks macht, dann geht es mehrfach.
habe es mit meinem sonoff Dimmer getestet.
Da fällt mir gerade auch auf, dass es bei meinem Volume-Slider vom Sonos genau so ist...
Da muss glaube setstate was dazu sagen???
Edit: Mit knob funktioniert das mehrfache schieben. Muss man jetzt die Unterschiede anschauen.
mit knob das selbe problem...
wenn man schiebt/slidet, dann macht knob und slider "unterwegs" mehrere set´s und danach keine Reaktion mehr...
Also: Wenn ich direkt auf einen Wert schiebe geht es mehrfach. Wenn ich hin und her schiebe um z.B. zu einem exakten Wert von 50 zu kommen und ein wenig zwischen 45 und 55 pendele, dann geht es danach nicht mehr.
@setstate:
Für den März scheint das date-format nicht richtig zu funktionieren. Wenn ich
<ftui-label [text]="Wetter_Proplanta:fc1_date | toDate() | format('eeee, D. MMMM')"></ftui-label>nutze, kommt sowas dabei raus:
ZitatMontag, 1. 3ärz
Das zugrundeliegende Reading:
2021-02-28 19:19:25 fc1_date 01.03.2021Oder nutze ich
format hier falsch? ???
Zitat von: yersinia am 28 Februar 2021, 19:29:33
@setstate:
Für den März scheint das date-format nicht richtig zu funktionieren. Wenn ich
<ftui-label [text]="Wetter_Proplanta:fc1_date | toDate() | format('eeee, D. MMMM')"></ftui-label>
nutze, kommt sowas dabei raus:Das zugrundeliegende Reading:
2021-02-28 19:19:25 fc1_date 01.03.2021
Oder nutze ich format hier falsch? ???
Hi, bin zwar nicht setstate, aber das konnte ich jetzt raus finden.
Liegt an Zeile 204 in der ftui.helper.js.
ret = ret.replace('M', MM);Der nimmt das M von März weg.
Wenn man die Zeile löscht, dann wird der März angezeigt.
setstate wird das bestimmt noch fixen...
Gruß Thomas
Edit: Das einfachste wäre in Zeile 184 das M von März und in Zeile 185 das M von March durch
M zu ersetzen. So funktioniert es bei mir.
Hat noch jemand schonmal Probleme mit ":time" beobachtet? Ich verwende ein Badge mit [text]="device:basicSet:time | toDate() | ago() | timeFormat('mmmmmm')" um anzuzeigen wie lange ein Fenster geöffnet ist. Das klappt an sich auch, aber manchmal habe ich beobachtet, dass der angezeigte Wert zeitweise falsch war. Zum Debugging habe ich mir dann einfach mal "device:basicSet:time" anzeigen lassen und stelle fest, dass dort erst der korrekte Wert der Zustandsänderung steht und nach einiger Zeit plötzlich ab Zeitpunkt x nicht mehr der Schaltzeitpunkt, sondern Zeitpunkt x angezeigt wird. Also z.B. nach einer Zustandsänderung um 19:00 Uhr wird korrekt 19:00 angezeigt. Plötzlich ab z.B. 22:10 Uhr wird 22:10 angezeigt. Nach einiger Zeit geht die Anzeige dann ggf. auch wieder auf den korrekten Wert 19:00 zurück. Es sieht also so aus als ob gelegentlich die aktuelle Zeit statt dem Schaltzeitpunkt verwendet wird. Ob das nun ein Fhem oder ein Ftui Problem ist kann ich nicht sagen, daher die Frage ob das außer mir sonst schonmal jemand beobachtet hat.
Gruß
Michael
Zitat von: mr_petz am 28 Februar 2021, 20:08:34Liegt an Zeile 204 in der ftui.helper.js.
ret = ret.replace('M', MM);
Der nimmt das M von März weg.
Edit: Das einfachste wäre in Zeile 184 das M von März und in Zeile 185 das M von March durch M zu ersetzen. So funktioniert es bei mir.
Und für
Mai sowie
May. ;)
Das hat es gefixt, danke!
Hallo zusammen,
erst mal ein grosses Lob an alle Beteiligten fuer diese grossartige Verbesserung ggue. FTUI2, die es mir ermoeglicht, wieder ein paar aeltere Tablets (Huawei T2 Pro 10.1) zu verwenden.
In FTUI2 hatte ich ein bisschen per JS gefummelt, um eine graphische Uebersicht von Sonos Radios, Favoriten, etc. zu erstellen und eine Auswahl des abzuspielenden Mediums darueber zu ermoeglichen. Fand ich ansprechender als nur ueber ein Dropdown. Screenshot in Anhang 1.
Hier wurden die Listen aus FHEM in ein hidden label geholt (hier in einem Template):
<div class="hide" data-device="vDevice" data-type="label" data-get="FavouritesJSON"></div>
<div data-type="label" class="hide"
data-device="vDevice"
data-get="FavouritesList" >
</div>
<div data-type="label" class="hide"
data-device="vDevice"
data-get="FavouritesListAlias" >
</div>
<div data-type="label" class="hide"
data-device="vDevice"
data-get="currentFavouriteNameMasked">
</div>
var items = eval ('ftui.deviceStates.' + player + '.' + type + 'sJSON.val');
var fhemlist = eval ('ftui.deviceStates.' + player + '.' + type + 'sList.val');
var fhemAliases = eval ('ftui.deviceStates.' + player + '.' + type + 'sListAlias.val');
var currentList = eval ('ftui.deviceStates.' + player + '.current' + type + 'NameMasked.val');
var itemsObj = $.parseJSON(items);
var itemList = fhemlist.replace('&', '&').split('|');
var aliases = fhemAliases.replace('&', '&').split('|');
... snip - siehe Anhang ...
zur Weiterverarbeitung geladen (die Liste mit JSON im Namen ist ein UserReading im Sonos Device - die anderen sind schon "normal" drin).
Ich habe herausgefunden/verstanden, dass ich in FTUI3 mit:
ftuiApp.fhemService.getReadingEvents(player + ':' + 'RadiosList').subscribe(
param => alert(param.value)
);
ftuiApp.fhemService.createFilterParameter();
ftuiApp.fhemService.forceRefresh();
ein Reading subscriben kann, auch wenn es nicht irgendwo in einem <ftui-xxx> geholt wird.
Die Frage ist: Wie greife ich nun auf die Information aus dem subscribe'den Reading zu bzw. geht das schon?
Habe mal ebenfalls das komplette musicplayer.js angehaengt.
Danke + Gruss
/elle
Hallo nochmal,
bevor jemand zu viel Gehirnschmalz hier hineinsteckt - ich habe da schon etwas vielversprechendes zusammen, nur kriege ich im Moment das Popup nicht dazu, sich zu oeffnen.
Sobald ich das habe, teile ich hier mal meine Loesung.
Danke + Gruss
/elle
Nicht wundern, ftui-checkbox heißt jetzt ftui-switch.
Die neue ftui-checkbox ist jetzt ein richtiges Häkchen.
Siehe Bild: oben Switch unten Checkbox
Zitat von: mdescher am 28 Februar 2021, 22:40:53
Hat noch jemand schonmal Probleme mit ":time" beobachtet? Ich verwende ein Badge mit [text]="device:basicSet:time | toDate() | ago() | timeFormat('mmmmmm')" um anzuzeigen wie lange ein Fenster geöffnet ist. Das klappt an sich auch, aber manchmal habe ich beobachtet, dass der angezeigte Wert zeitweise falsch war. Zum Debugging habe ich mir dann einfach mal "device:basicSet:time" anzeigen lassen und stelle fest, dass dort erst der korrekte Wert der Zustandsänderung steht und nach einiger Zeit plötzlich ab Zeitpunkt x nicht mehr der Schaltzeitpunkt, sondern Zeitpunkt x angezeigt wird. Also z.B. nach einer Zustandsänderung um 19:00 Uhr wird korrekt 19:00 angezeigt. Plötzlich ab z.B. 22:10 Uhr wird 22:10 angezeigt. Nach einiger Zeit geht die Anzeige dann ggf. auch wieder auf den korrekten Wert 19:00 zurück. Es sieht also so aus als ob gelegentlich die aktuelle Zeit statt dem Schaltzeitpunkt verwendet wird. Ob das nun ein Fhem oder ein Ftui Problem ist kann ich nicht sagen, daher die Frage ob das außer mir sonst schonmal jemand beobachtet hat.
Bitte ignorieren, Problem lag "bei mir". :-) Sorry.
Hallo,
ich habe ein Multistate Icon gebaut:
<!-- Waschmaschine -->
<ftui-column>
<ftui-icon-multicolor autoplay="1" iterations="-1" path="icons/multicolor"
[name]="wk.waschmaschine_doif:state | map ('`.*`:washing_off, Ein:washing_off, Start:washing_on, Ende:washing_off')">
</ftui-icon-multicolor>
<ftui-label [text]="wk.waschmaschine_doif:state"
[color]="wk.waschmaschine_doif:state | map ('`.*`:green, Ein:orange, Start:orange, Ende:yellow')"></ftui-label>
</ftui-column>
Jetzt bekomme ich beim Reload der Seite immer unten angehängte Fehlermeldung, was will mir das sagen?
Hi@all.
Das Departure fehlte noch auf meiner Seite, deshalb habe ich das mal gebaut/gebastelt.
Bitte nicht lachen, ich habe hier als Hobby-Progger gearbeitet ;).
Was geht:
icon = bus, bahn etc.
list = Device:Reading
color = anpassbar auf DVB und RVSOE
station = eigener Name der Haltestelle
interval = in sec für´s get
get = fhemCommand zum neu lesen des Reading
Was nicht geht ist:
keine verschieden farbige Reihen,
Breite und Höhe anpassbar,
Zeit anpassen (rest minuten<->hh:mm)
Bsp.:
<ftui-departure [list]="BusfahrPlan_ZOB:ZOB" color="DVB" icon="bus" interval="60" station="ZOB" get="BusfahrPlan_ZOB ZOB">
</ftui-departure>
Format des JSON String:
[["G/L","Pirna ZOB / Bahnhof","19:42"],["H/S","Pirna Sonnenstein Süd","20:00"]]
Jetzt würde ich setstate Bitten das er mal drüber schaut, ob das so programmiertechnisch ok ist und vielleicht hilft weiter zu entwickelten.
Man muss ja von js, css und html plan haben. Ich habe leider nur von allen ein wenig.
Es können natürlich auch andere User mit wirken (bei css z.B.).
Ich habe mein möglichstes gegeben....
In der departure.zip ist das js und example File.
Gruß Thomas
Edit:
Ich weiss, das man auch ein ext. css erstellen und importieren kann. Habe es aber in der template mit drinn...
Ich hoffe ich kann damit einen Teil zum Entwickeln FTUI 3 beitragen und ander User zu animieren mit zu machen...
Edit
https://forum.fhem.de/index.php/topic,115259.msg1137897.html#msg1137897 (https://forum.fhem.de/index.php/topic,115259.msg1137897.html#msg1137897)
@mr_petz
schon mal nicht schlecht ...
- das CSS würde ich wirklich auslagern, wenn es soooo viele Zeilen sind. Der Übersichtlichkeit halber. Für die Performance ist innerhalb natürlich besser.
- die Daten würde ich auch weiter in tr / td packen und nicht als div
- var benutzt man nicht mehr. Entweder let oder const.
ich habe mal ne Frage zur Abfallentsorgung, kann man über FTUI die Anzeige des Badges steuern, denn ich sage mal ab 13 Uhr brauche ich die Anzeige das heute Müll war ja nicht mehr.
Wie habt ihr das gemacht.?
Zitat von: moonsorrox am 03 März 2021, 23:43:14
ich habe mal ne Frage zur Abfallentsorgung, kann man über FTUI die Anzeige des Badges steuern, denn ich sage mal ab 13 Uhr brauche ich die Anzeige das heute Müll war ja nicht mehr.
Wie habt ihr das gemacht.?
in FHEM (am Beispiel Gelber Sack):
GelberSack_Anzeige:GelberSack_days.* {if(((localtime)[2]/24-ReadingsVal("<Name_Abfallkalender>","GelberSack_days",0)>-0.375)&&((localtime)[2]/24-ReadingsVal("<Name_Abfallkalender>","GelberSack_days",0)<0.375)){"true"}else{"false"}}Das so definierte Userreading ist
true zwischen 15:00 Uhr des Vortages bis 9:00 Uhr des Abholtages (kann natürlich variiert werden). Damit kann man in FTUI2 über
data-hide die Anzeige steuern. Wer möchte, kann am Abholtag die Anzeige auch blinken lassen.
Ok ich dachte mir es schon mit FHEM, habe aber keine Ahnung wie und werde mir mal dein Beispiel nehmen und schauen ob ich das hinbekomme.
Vielen Dank
Hallo,
Zitat von: octek0815 am 24 Januar 2021, 11:49:01
Moin,
ich steuere damit ob der Stream meiner IP-Cam aktiv zu meinem Tablet an oder aus ist.
Heir meine Konfiguration:
Popup mit IP-Cam Stream öffnen und aktivieren
<ftui-column>
<ftui-button (value)="set System_IPcam_Haustuer_URL http://10.20.8.99:8765/picture/1/frame/" states='' fill="clear">
<ftui-icon style="font-size:1em;" name="_security_camera" popup-target="popup-ipcam-haustuer" color="white"></ftui-icon>
</ftui-button>
</ftui-column>
Danke für das Beispiel! Habe noch eine Variante gebaut da ich das Vorschaubild sehen will.
<ftui-row>
<ftui-cell>
<span onclick="ftuiApp.fhemService.sendCommand('set System_Meisen_TV_URL http://10.1.1.225/picture/1/frame/')">
<ftui-image src="http://10.1.1.225/picture/1/current/"
width="450px" height="450px"
interval="30"
nocache
popup-target="popup-Meisen_TV"
></ftui-image>
</span>
</ftui-cell>
</ftui-row>
Vielleicht kann es jemand brauchen.
Gruß
Eisix
Hallo zusammen,
ich bräuchte mal etwas Unterstützung.
Wo finde ich eine Info, welche Farben ich bei ftui-icon und ftui-label benutzen kann?
Einige Farben aus der ftui-theme.css werden angezeigt einige nicht (siehe Anhang).
<ftui-row>
<ftui-column>
<ftui-icon name="trash" color="gray"></ftui-icon>
<ftui-label text="gray" color="gray"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="trash" color="yellow"></ftui-icon>
<ftui-label text="yellow" color="yellow"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="trash" color="tomato"></ftui-icon>
<ftui-label text="tomato" color="tomato"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="trash" color="red1"></ftui-icon>
<ftui-label text="red1" color="red1"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="trash" color="red"></ftui-icon>
<ftui-label text="red" color="red"></ftui-label>
</ftui-column>
</ftui-row>
Gruß LuGu
Guten Morgen, habe heute morgen ein Update eingespielt. Jetzt wird das ein oder andere nicht mehr richtig im Fully dargestellt.
Kann das jemand bestätigen? Tablet zu alt? Ist ein Samsung Tab mit Android 8.1.0 (SDK 27)
Hallo coolice,
es gab diese Tage auch ein Fully update, nicht sicher ob es nicht daran liegt. Was genau hast du an Veränderungen, bei mir sind manche Icons die vorher eng am Rand des Grids waren jetzt teilweise aus dem Grid und meine Tabelle mit der Telefonliste wird nicht sauber geladen. das tritt aber nur bei Fully auf. Tritt auch bei anderen Browsern auf.
Gruß
Eisix
Zitat von: Eisix am 05 März 2021, 08:13:48
Hallo coolice,
es gab diese Tage auch ein Fully update, nicht sicher ob es nicht daran liegt. Was genau hast du an Veränderungen, bei mir sind manche Icons die vorher eng am Rand des Grids waren jetzt teilweise aus dem Grid und meine Tabelle mit der Telefonliste wird nicht sauber geladen. das tritt aber nur bei Fully auf. Tritt auch bei anderen Browsern auf.
Gruß
Eisix
Ja, die Updates hatte ich parallel gefahren.
Ich möchte gerne einen "concatenated" String ausgeben der ungefähr so aussehen soll:
Status: ok
Dies versuche ich zu erreichen indem ich in einer Zelle folgenden Code habe:
<ftui-row>
<ftui-label color="light">Status: </ftui-label>
<ftui-label class="inline" color="light" [text]="home2dest:status"></ftui-label>
</ftui-row>
Leider sieht das wie im Anhang aus - also über die Zeile "verteilt" anstatt zusammen. Gibt's da ein "inline" oder "condensed" o.ä. ?
mittig:
<ftui-row align-items="center">
oder links mit Abstand nach links
<ftui-row align-items="left" margin="0 0 0 3em">
Dein Leerzeichen wird nicht funktionieren, da musst du nehmen.
Hi@all,
habe noch das alternate hinzugefügt.
musste aber mit div weiter machen, da sonst der background nicht durchgängig wäre.
@setstate
wie bekommt man die aktuelle Uhrzeit mit integriert in den Code?
Gruß Thomas
Edit
https://forum.fhem.de/index.php/topic,115259.msg1137897.html#msg1137897 (https://forum.fhem.de/index.php/topic,115259.msg1137897.html#msg1137897)
Zitat von: mr_petz am 06 März 2021, 12:59:38
Hi@all,
habe noch das alternate hinzugefügt.
musste aber mit div weiter machen, da sonst der background nicht durchgängig wäre.
@mr_petz:
Schöne Arbeit!
Kannst Du mir einen Tip geben, warum das bei mir nicht den Rahmen ausfüllt!?
Ich habe in deien .html nur mein fhem device eingesetzt.
<ftui-departure [list]="DepatureDB:Neuer-Friedhof" color="DVB" icon="bus" interval="10" get="DepatureDB Neuer-Friedhof" station="Neuer-Friedhof" alternate>
</ftui-departure>
Gruß LuGu
Ja das müsstest du anpassen in der js im template bereich. Da ist die css drin.
Ich hatte schon weiter vorn geschrieben, das noch jemand die css anpassen müsste wegen size. Bin da nicht so fit.
Welche größe von grid-tile benutzt du? Ich hatte alles auf 6x4 oder 7x5 getestet. Und dann kommt es noch auf die Auflösung an. Ich kann noch die css extern machen wenn du magst.
Gruß Thomas
Na ja, ich habe deine departure.html genommen und nur mein Chemiker device reingebaut.
Da hätte ich angenommen, dass es genauso aussieht, wie bei dir.
Ich habe es mir mit Crome, Firefox und edge angesehen. Sieht überall aus, wie auf meinem angehängten Bild. Die Daten klemmen links oben in der Ecke.
Ich werde mal etwas weiter experimentieren.
Gruß Lutz
Zitat von: LuGu am 06 März 2021, 21:24:27
Na ja, ich habe deine departure.html genommen und nur mein Chemiker device reingebaut.
Da hätte ich angenommen, dass es genauso aussieht, wie bei dir.
Ich habe es mir mit Crome, Firefox und edge angesehen. Sieht überall aus, wie auf meinem angehängten Bild. Die Daten klemmen links oben in der Ecke.
Ich werde mal etwas weiter experimentieren.
Gruß Lutz
Das sind die css Einträge für die Listen:
:host .id{
display: inline-block;
width: 15%;
text-align: end;
white-space: nowrap;
overflow: hidden;
font-size: 11px;
}
:host .dest{
display: inline-block;
width: 70%;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
}
:host .time{
display: inline-block;
width: 15%;
text-align: end;
font-size: 11px;
}
Hallo zusammen.
Gibt es eine Möglichkeit einen Refresh einzubauen? Also ein Button über den alle Werte (oder bestimmte) aus FHEM neu geladen werden?
@Mano
Klingt auf den ersten Blick (fast) überflüssig. Denn die Oberfläche hat ja die in Frage kommenden Readings abonniert und bekommt bei jeder Aktualisierung eines solchen Readings den neuen Wert - sollte also immer auf dem neuesten Stand sein.
Vielleicht kannst Du ja die Frage bzw. Dein "Problem" noch ein wenig konkretisieren ...
@LuGu
das sollte gehen:
:host .id{
position: absolute;
width: 15%;
text-align: end;
white-space: nowrap;
overflow: hidden;
font-size: 11px;
}
:host .dest{
position: absolute;
left: 15%;
width: 70%;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
}
:host .time{
position: absolute;
left: 85%;
width: 15%;
text-align: end;
font-size: 11px;
}
Habe das css jetzt extern ausgelagert.
Aktuelle Uhrzeit hinzugefügt.
Positionen sollten jetzt sich der Größe anpassen.
Jetzt sollte es fast wie in FTUI2 sein. Denke ich.
setstate kann es gern (wenn er will) mit in sein GitHub rein nehmen.
Es fehlt noch fadeIn/fadeOut und width/hight...
Gruß Thomas
Edit: hier geht es weiter:https://forum.fhem.de/index.php/topic,120143.msg1146192.html#msg1146192 (https://forum.fhem.de/index.php/topic,120143.msg1146192.html#msg1146192)
Edit: js setInterval und zeit geändert.
css geändert (fade), auto in Min wenn nur Restzeit
umrechnung mm in hh:min mit depInTime Attr. Dank an @LuGu
Zitat von: OdfFhem
link=topic=115259.msg1137825#msg1137825 date=1615103633
@Mano
Klingt auf den ersten Blick (fast) überflüssig. Denn die Oberfläche hat ja die in Frage kommenden Readings abonniert und bekommt bei jeder Aktualisierung eines solchen Readings den neuen Wert - sollte also immer auf dem neuesten Stand sein.
Vielleicht kannst Du ja die Frage bzw. Dein "Problem" noch ein wenig konkretisieren ...
Erstmal danke für die flotte Rückmeldung. Leider funktioniert das mit dem abonnieren mobil nicht so gut. Bei Charts anscheinend gar nicht?
Ich denke, dass auch ein Wechsel zwischen WLAN und Mobilfunknetz Probleme darstellt.
Es wäre einfach schön einen Button zu haben mit dem man einmal die neuen Daten zieht bzw. das Abo erneuert.
mir fällt heute gerade auf was mit dem Datum los ist... hat das noch jemand so..?
Zitat von: moonsorrox am 07 März 2021, 15:40:53
mir fällt heute gerade auf was mit dem Datum los ist... hat das noch jemand so..?
War hier:
https://forum.fhem.de/index.php/topic,115259.msg1136236.html#msg1136236 (https://forum.fhem.de/index.php/topic,115259.msg1136236.html#msg1136236)
schon Thema...
für Mai zählt das selbe..
Gruß Thomas
;) super danke, werde ich gleich mal machen...!
Dann sicher für Juni und Juli ebenfalls, da auch 4 Buchstaben ;)
Zitat von: moonsorrox am 07 März 2021, 17:07:52
;) super danke, werde ich gleich mal machen...!
Dann sicher für Juni und Juli ebenfalls, da auch 4 Buchstaben ;)
Es geht nur um das 1. M
also nur März,Mai,March und May...
@mr_petz
ich hatte heute Gelegenheit, Deine Komponente zu testen und sie läuft eigentlich wie gewünscht.
Unterschied bei mir ist nur, dass mein FHEM-Device keine konkrete Abfahrtszeit liefert, sondern die noch zur Verfügung stehende Minutenzahl bis zur Ankunft/Abfahrt.
Beim Blick ins js-File ist mir auf die Schnelle Folgendes aufgefallen:
Eine kleine Änderung erlaubt die Nutzung der von FTUI3 bereitgestellten dateFormat-Routine.
import { dateFormat } from '../../modules/ftui/ftui.helper.js';
...
const datum = dateFormat(new Date(), 'hh:mm');
oder
import * as ftuiHelper from '../../modules/ftui/ftui.helper.js';
...
const datum = ftuiHelper.dateFormat(new Date(), 'hh:mm');
Den Umweg über eine Zwischenvariable (datum) könnte man auch weglassen.
Du verwendest
let Timeout = '';
...
clearTimeout(this.Timeout);
Timeout = setTimeout(() => this.updateTime(), 5000);
Timeout und this.Timeout sind nicht identisch; this.Timeout wurde nie gesetzt und hat dementsprechend stets den Wert undefined. Das 5 Sekunden-Intervall scheint ein wenig zu kurz, da die Zeit nur minutengenau dargestellt wird.
Du öffnest zunächst drei Spalten und schließt erst anschließend die so geöffneten Spalten; normalerweise wird eine Spalte geöffnet und vor dem Öffnen der nächsten Spalte geschlossen.
Interessant wäre vermutlich, die Uhrzeit analog zu thead als tfoot-Tag zu realisieren.
Weiterhin könnte man statt eine "starre" Datenreihe bereitzustellen, in der fillList-Routine die benötigten Datenreihen zusammenbauen.
Um die css zu straffen, könnte man insbesondere die .list<Default|DVB|RVSOE> teilen; der bis auf Farbe identische Teil könnte ausgelagert werden. Gleiches gilt für .<Default|DVB|RVSOE>
Interessant wäre noch, ob man andere Verkehrsverbünde aus farblicher SIcht dynamisch integrieren könnte ...
Dies sind natürlich nur Anregungen ... keine Notwendigkeiten
@OdfFhem
Danke fürs Feedback.
Ich hatte schon vorher mal geschrieben, dass ich nur ein HobbyProgger bin und wollte halt auch andere User animieren was auf die Beine zu stellen. Wir können ja alle nur gemeinsam das Projekt V3 voran treiben. setstate leistet hier ja super Arbeit.
Zitat von: OdfFhem am 07 März 2021, 20:46:33
@mr_petz
Beim Blick ins js-File ist mir auf die Schnelle Folgendes aufgefallen:
Eine kleine Änderung erlaubt die Nutzung der von FTUI3 bereitgestellten dateFormat-Routine.
import { dateFormat } from '../../modules/ftui/ftui.helper.js';
...
const datum = dateFormat(new Date(), 'hh:mm');
oder
import * as ftuiHelper from '../../modules/ftui/ftui.helper.js';
...
const datum = ftuiHelper.dateFormat(new Date(), 'hh:mm');
Den Umweg über eine Zwischenvariable (datum) könnte man auch weglassen.
Ja das mit der Zeit hatte ich auch probiert, aber nicht hinbekommen.
Das in min (rechte Spalte), muss auch noch mit rein.
Zitat von: OdfFhem am 07 März 2021, 20:46:33
Du verwendest
let Timeout = '';
...
clearTimeout(this.Timeout);
Timeout = setTimeout(() => this.updateTime(), 5000);
Timeout und this.Timeout sind nicht identisch; this.Timeout wurde nie gesetzt und hat dementsprechend stets den Wert undefined. Das 5 Sekunden-Intervall scheint ein wenig zu kurz, da die Zeit nur minutengenau dargestellt wird.
Das habe ich bereits umgestellt auf setInterval.
Man sollte glaube eh besser auf setInterval setzen.
Ist im letzten geposteten Beitrag mit den Dateien schon hochgeladen.
https://forum.fhem.de/index.php/topic,115259.msg1137897.html#msg1137897 (https://forum.fhem.de/index.php/topic,115259.msg1137897.html#msg1137897)
Zitat von: OdfFhem am 07 März 2021, 20:46:33
Du öffnest zunächst drei Spalten und schließt erst anschließend die so geöffneten Spalten; normalerweise wird eine Spalte geöffnet und vor dem Öffnen der nächsten Spalte geschlossen.
Ich habe das nicht anders hinbekommen. Das musste ich durch das alternate-Attribut so machen, weil sonst der dunklere Background der wechselnden Reihen unterbrochen waren.
Zitat von: OdfFhem am 07 März 2021, 20:46:33
Interessant wäre vermutlich, die Uhrzeit analog zu thead als tfoot-Tag zu realisieren.
Weiterhin könnte man statt eine "starre" Datenreihe bereitzustellen, in der fillList-Routine die benötigten Datenreihen zusammenbauen.
Um die css zu straffen, könnte man insbesondere die .list<Default|DVB|RVSOE> teilen; der bis auf Farbe identische Teil könnte ausgelagert werden. Gleiches gilt für .<Default|DVB|RVSOE>
Interessant wäre noch, ob man andere Verkehrsverbünde aus farblicher SIcht dynamisch integrieren könnte ...
Da bin ich glaube raus.
Wenn du Muse hast daran zu Arbeiten, dann kannst du gern die Anpassungen vornehmen.
Ich bin auch weiterhin gern Bereit zu testen und mit zu entwickeln.
Danke und Gruß Thomas
Zitat von: octek0815 am 10 Februar 2021, 20:41:16
Bei Fragen einfach melden...
Viele Grüße
Olli
Danke für deine Code-Schnippsel. Eine Bitte noch: Kannst du uns auch deine Icons zur Verfügung stellen ? Wäre ganz toll ! Danke
Hi @all,
Update für´s departure...
Paar CSS Anpassungen vorgenommen und fading bei change Reading hinzugefügt.
Dann wird automatisch entw. Zeit bei hh:mm oder in Min bei nur mm angezeigt.
Hier die neuen Dateien:
Datei Forum Link (https://forum.fhem.de/index.php/topic,120143.msg1146192.html#msg1146192)
Gruß Thomas
Zitat von: mr_petz am 08 März 2021, 19:27:24
Update für´s departure...
@mr_petz:
Tolle Arbeit und schnelle Weiterentwicklung.
Ich habe ein fehm-device, dass mir die Abfahrtszeit nur in min anzeigt. Ich möchte aber alternative auch die direkte Abfahrtszeit anzeige (siehe Anhang).
Dafür musste ich nur ein paar kleine Änderungen einbauen und in der .html das Attribut depInMin hinzugefügt.
Magst Du mal testen, ob das auch mit deinem fehm-device funktioniert. Wäre ja schön, wenn wir eine Lösung für beide Varianten hätten.
const line = json[idx];
let when = line[2];
const currentDate = new Date();
const departureTime = new Date(currentDate.getTime() + (when * 60 * 1000));
if (this.hasAttribute('depInMin') && !when.match(/:/)) {
when = dateFormat(departureTime, 'hh:mm');
}
text = (n % 2 === 0 && (this.hasAttribute('alternate')) ? '<div class="alt"><div class="fade">' : '<div><div class="fade">');
text0 += text + '<div class="id0">' + line[0] + '</div></div></div>';
text1 += text + '<div class="dest0">' + line[1] + '</div></div></div>';
text2 += text + '<div class="time0">' + when + '</div></div></div>';
min = (when.match(/\:/g) ? 'Zeit' : 'in Min');
};
Bestimmt nicht der optimale code, aber es funktioniert.
Gruß LuGu
@LuGu
Ja super das du hier mit machst. Code funktioniert so. War im widget vom FTUI2 auch so drin...
Wollte ich auch noch mit rein nehmen, aber da warst du schneller ;).
Ja man kann noch vieles per Attribut integrieren wzB. Größe der Schrift, fade an/aus oder was man im header stehen haben will usw...
Ob man es braucht ist dann die andere Seite...
Ich werde jetzt erstmal mit dem departure abschließen, weil ich denke das es so passt für alle.
Mal schauen ob setstate das so mit ins GitHub rein nimmt. kA.
Ansonsten mache ich dafür einen neuen Thread auf.
Würde dann die Erweiterung so übernehmen wenn´s recht ist...
ps depInTime träfe es besser...denke ich, weil ja mm in hh:mm
Nächstes Projekt wird das Pinpad. Das geht zwar auch so wie ich es hier:
https://forum.fhem.de/index.php/topic,115259.msg1134096.html#msg1134096 (https://forum.fhem.de/index.php/topic,115259.msg1134096.html#msg1134096)
schon beschrieben habe, aber das ist halt bissl aufwendig in der Form.
Gruß Thomas
Zitat von: mr_petz am 08 März 2021, 23:18:56
Würde dann die Erweiterung so übernehmen wenn´s recht ist...
ps depInTime träfe es besser...denke ich, weil ja mm in hh:mm
Ja klar!
Gruß LuGu
Ich übernehme das gerne. Danke für "Bauen"
Zitat von: setstate am 09 März 2021, 08:52:14
Ich übernehme das gerne. Danke für "Bauen"
Aber gerne. Du machst ja sonst die ganze Arbet alleine.
Fehlen nur noch paar Layouts. DB z.B.
Moinsen zusammen
Nachdem ich eine umfangreiches Bedienpanel in FTUI2 zusammengestellt habe und mein Raspi4 4GB des Controlpanels im Flur nunmehr Minuten braucht um auf die Clicks zu reagieren,
will ich auf FTUI3 umsteigen und scheitere schon am ersten File.
In der Beispiel - index.html ist die gesamte Seite in einer Datei (index.html) abgelegt.
Wie bekomme ich wieder verschiedene Unter-html-Dateien hin, die von der pagebutton aufgerufen werden?
Wie gesagt, ich fuchse mich noch rein, aber ich brauche irgendwo einen Anfang...
Gibt es vielleicht irgendwo was zum lesen?
Alter FTUI2 Code:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
*/
-->
<!-- Basic Stylesheet with Darkblue AddOn -->
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />
<link rel="stylesheet" href="css/OwnIcons.css">
<!-- Different Stylesheet depending on daylight conditions calculated by the twilight module -->
<link rel="stylesheet" href="css/lightscene-0.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="0" data-get-off="!0" />
<link rel="stylesheet" href="css/lightscene-1.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="1" data-get-off="!1" />
<link rel="stylesheet" href="css/lightscene-2.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="2" data-get-off="!2" />
<link rel="stylesheet" href="css/lightscene-3.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="3" data-get-off="!3" />
<link rel="stylesheet" href="css/lightscene-4.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="4" data-get-off="!4" />
<link rel="stylesheet" href="css/lightscene-5.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="5" data-get-off="!5" />
<link rel="stylesheet" href="css/lightscene-6.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="6" data-get-off="!6" />
<!-- Load main script -->
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- The title -->
<title>The Deeke Home</title>
</head>
<!-- Misc. definitions -->
<!-- <meta http-equiv = "Cache-Control" content = "no-cache, no-store, must-revalidate" /> -->
<!-- <meta http-equiv = "pragma" content = "no-cache" /> -->
<!-- <meta http-equiv = "expires" content = "0" /> -->
<meta name = "gridster_disable" content = "1" />
<meta name = "gridster_cols" content = "9" />
<meta name = "gridster_rows" content = "13" />
<meta name = "longpoll" content = "1" />
<meta name = "longpoll_type" content = "websocket" />
<meta name = "longpoll_maxage" content = "240" />
<meta name = "toast" content = "0" />
<meta name = "TomTomApiKey" content = "poam8gUOAMWeXlTWoLEqEk0GVwrjmh4h" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name = "widget_base_width" content = "116" />
<meta name = "widget_base_height" content = "144" />
<meta name = "widget_margin" content = "2" />
<!-- External trigger for reloading the page -->
<div data-type = "reload"
data-device = "UI_ReloadFtui"
data-command = "setreading"
data-get = "state"
data-set = ""
data-reload-on = "on"
data-reset-to = "off"
data-get-on = "1"
data-set-off = "0">
</div>
<body style="overflow:hidden;" topmargin="0" leftmargin="0" margin="0">
<!-- Table border for debugging and programming "transparent" <-> "white" -->
<style>
table, th, td {
padding: 1px;
border: 1px solid white;
border-collapse: collapse;
}
</style>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="13" class="semitransparent">
<div data-type = "pagebutton"
data-url = "#page_content_home.html"
data-load = "#content_home"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = "(.*/||.*index.html||.*#page_content_home.html)"
data-icon = "fa-home"
onclick = "ftui.setFhemStatus('setreading UI_ActivePage state home');"
class = "default top-space">
</div>
<div data-type = "pagebutton"
data-url = "#page_content_gf1.html"
data-load = "#content_gf1"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = ".*#page_content_gf1.html"
data-icon = "oa-control_building_modern_s_okg_eg"
onclick = "ftui.setFhemStatus('setreading UI_ActivePage state gf');"
class = "prefetch top-space">
</div>
<li data-row="1" data-col="2" data-sizex="8" data-sizey="13">
<div class="page prefetch" id="content_home"> </div>
<div class="page prefetch" id="content_gf1"> </div>
</li>
</ul>
</div>
</body>
</html>
Danke fuer die Starthilfe!
Gruss
Sailor
Hallo Sailor,
Die Beispiele im /examples Ordner hast du gesehen?
Auf github https://github.com/knowthelist/ftui (https://github.com/knowthelist/ftui) ist auch was.
Gruß
Eisix
@Sailor
Hier ist ein gutes Beispiel für dich:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/menu.html
(https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/menu.html)
Hallo Eisix
Zitat von: Eisix am 12 März 2021, 23:06:23
Die Beispiele im /examples Ordner hast du gesehen?
Auf github https://github.com/knowthelist/ftui (https://github.com/knowthelist/ftui) ist auch was.
Perfect - Gleich einen Favoriten Schortcut gesetzt. :)
Gruß
Sailor
Hallo Mr. Petz
Zitat von: mr_petz am 13 März 2021, 09:52:10
Hier ist ein gutes Beispiel für dich:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/menu.html
(https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/menu.html)
Das ist es nicht ganz...
Ich wollte die Buttons wie in der originalen Index - Datei auf der linken Seite in Spalte 1.
Der erste Button Home verweist auf page_home.html in welcher wieder ein Gridster aufgemacht werden soll.
Dein Beispiel zielt auf die Mobil-Variante mit Toolbar ab...
Gruss
Sailor
In FTUI3 funktioniert das etwas anders, als in FTUI2, Du nimmst das Beispiel aus der index.html und lagerst die Seiten mittels <content> aus.
Das kann dann z.B. so aussehen wie hier (https://forum.fhem.de/index.php/topic,115259.msg1102148.html#msg1102148).
Zitat von: Sailor am 13 März 2021, 18:14:23
Hallo Mr. Petz
Das ist es nicht ganz...
Ich wollte die Buttons wie in der originalen Index - Datei auf der linken Seite in Spalte 1.
Der erste Button Home verweist auf page_home.html in welcher wieder ein Gridster aufgemacht werden soll.
Dein Beispiel zielt auf die Mobil-Variante mit Toolbar ab...
Gruss
Sailor
Ok.
Dann so. Menü und ext. html.
(Steht in der index https://github.com/knowthelist/ftui/blob/master/www/ftui/index.html (https://github.com/knowthelist/ftui/blob/master/www/ftui/index.html))
Bsp.
<ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
<ftui-column>
<ftui-tab view="View1" direction="vertical" active>
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="View1">
<ftui-grid-tile row="1" col="2" height="10" width="10" shape="round">
<ftui-content file="examples/contents/content-weather.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
Gruß Thomas
Guten Morgen !
Ich verwende seit mehreren Wochen problemlos "kleinklima". Seit 1-2 Tagen jedoch werden die Icons nur manchmal (kann leider kein Pattern feststellen) angezeigt. Ist da irgendetwas geändert worden was ich beachten muss ?
Danke
Hallo zusammen,
aufgrund einer Überarbeitung meines FTUI habe ich mir die Version 3 angesehen und bekomme leider das Menü nicht so hin wie ich es gerne haben würde. Wobei ich nicht weiß ob ich einfach einen Bock in meinen Dateien habe oder ob die geforderte Funktionalität vielleicht noch gar nicht möglich ist.
Ich möchte gerne ein TAB Menü in einem TAB Menü darstellen, das bedeutet das je nach Anwahl des oberen Menüs unterschiedliche Unterpunkte aufgerufen werden können. In FTUI2 habe ich das über das Pagebutton Widget gelöst (siehe Bilder Menu1_alt und Menu2_alt), in FTUI sehe ich derzeit eine ähnliche Funktionalität im TAB Widget.
In FTUI 3 habe ich das mit einer einfachen Struktur mit je zwei Menüpunkten aufgebaut, das Prinzip ist sichtbar, aber es werden keine Seiteninhalte dargestellt (siehe Bilder menu1_neu und menu2_neu; der Versatz im Menu1 ist Absicht zur einfacheren Darstellung).
hier die Code Blöcke
index.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<!-- when serving the page with other web servers, e.g. lighttpd -->
<!-- <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/"> -->
<!-- verbose level 0-4 -->
<meta name="debug" content="2">
<title>FTUI3 Tab in Tab</title>
</head>
<body>
<ftui-grid base-width="70" base-height="70" margin="5">
<ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_Start_View1" direction="vertical">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="Index_Start_View2" direction="vertical">
<ftui-icon name="sun"></ftui-icon>
<ftui-label>Weather</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="Index_Start_View1">
<ftui-grid-tile row="1" col="2" height="9" width="2" shape="round">
<ftui-content file="index_1.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View2">
<ftui-grid-tile row="1" col="2" height="9" width="2" shape="round">
<ftui-content file="index_2.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
index1.html (erste Unterseite)
<ftui-grid base-width="70" base-height="70" margin="5">
<ftui-grid-tile row="1" col="2" height=8 width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_1_View1" direction="vertical" active >
<ftui-icon name="home1"></ftui-icon>
<ftui-label>A1</ftui-label>
</ftui-tab>
<ftui-tab view="Index_1_View2" direction="vertical">
<ftui-icon name="music"></ftui-icon>
<ftui-label>B1</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="Index_1_View1">
<ftui-grid-tile row="1" col="3" height="5" width="5" shape="round">
<div class="size-10">Tab11</div>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_1_View2">
<ftui-grid-tile row="1" col="3" height="6" width="6" shape="round">
<div class="size-10">Tab12</div>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
index2.html
<ftui-grid base-width="70" base-height="70" margin="5">
<ftui-grid-tile row="1" col="1" height=8 width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_2_View1" direction="vertical">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>A2</ftui-label>
</ftui-tab>
<ftui-tab view="Index_2_View2" direction="vertical">
<ftui-icon name="music"></ftui-icon>
<ftui-label>B2</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="Index_2_View1">
<ftui-grid-tile row="1" col="2" height="4" width="4" shape="round">
<div class="size-10">Tab21</div>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_2_View2">
<ftui-grid-tile row="1" col="2" height="7" width="7" shape="round">
<div class="size-10">Tab22</div>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
Jetzt die Frage, habe ich einen Fehler in den Dateien oder erwarte ich hier eine noch nicht vorhandene Funktionalität?
Einen schönen Abend
ekur
@ekur
Ich denke so meinst du, oder??
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<!-- when serving the page with other web servers, e.g. lighttpd -->
<!-- <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/"> -->
<!-- verbose level 0-4 -->
<meta name="debug" content="2">
<title>FTUI3 Tab in Tab</title>
</head>
<body>
<ftui-grid base-width="70" base-height="70" margin="5">
<ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_Start_View1" direction="vertical">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="Index_Start_View2" direction="vertical">
<ftui-icon name="sun"></ftui-icon>
<ftui-label>Weather</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="Index_Start_View1">
<ftui-grid-tile row="1" col="2" height="9" width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_Start_View3" direction="vertical">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home2</ftui-label>
</ftui-tab>
<ftui-tab view="Index_Start_View4" direction="vertical">
<ftui-icon name="sun"></ftui-icon>
<ftui-label>Weather2</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View2">
<ftui-grid-tile row="1" col="2" height="9" width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_Start_View3" direction="vertical">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home3</ftui-label>
</ftui-tab>
<ftui-tab view="Index_Start_View4" direction="vertical">
<ftui-icon name="sun"></ftui-icon>
<ftui-label>Weather3</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View3">
<ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
<ftui-content file="index_1.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View4">
<ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
<ftui-content file="index_2.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
Das zweite Menü verschwindet aber wieder durch das "ftui-tab-view".
Anders habe ich es erstmal auf die schnelle auch nicht hinbekommen...
ZitatAutor: mr_petz Ich denke so meinst du, oder??
Im Prinzip ja, mit einer kleinen Änderung, Tab1 verzweigt auf Tab1_1 und 1_2, Tab2 auf Tab 2_1 und Tab 2_2, und in den Tabs der zweiten Ordnung erfolgt dann der Seitenaufbau oder Verweis auf getrennte Dateien
siehe hier (nur der eigentliche codeblock)
<ftui-grid base-width="70" base-height="70" margin="5">
<ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_Start_View1" direction="vertical">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="Index_Start_View2" direction="vertical">
<ftui-icon name="sun"></ftui-icon>
<ftui-label>Weather</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="Index_Start_View1">
<ftui-grid-tile row="1" col="2" height="9" width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_Start_View1_1" direction="vertical">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home2</ftui-label>
</ftui-tab>
<ftui-tab view="Index_Start_View1_2" direction="vertical">
<ftui-icon name="sun"></ftui-icon>
<ftui-label>Weather2</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View1_1">
<ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
<ftui-content file="datei_1_1.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View1_2">
<ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
<ftui-content file="datei_1_2.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View2">
<ftui-grid-tile row="1" col="2" height="9" width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_Start_View2_1" direction="vertical">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home3</ftui-label>
</ftui-tab>
<ftui-tab view="Index_Start_View2_2" direction="vertical">
<ftui-icon name="sun"></ftui-icon>
<ftui-label>Weather3</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View2_1">
<ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
<ftui-content file="datei_2_1.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View2_2">
<ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
<ftui-content file="datei_2_2.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>Mit Deiner Struktur hast Du mir schon mal den Weg gezeigt das Menü in einer Indexdatei zu strukturieren, danke dafür.
Aber wie Du schon richtig gesehen hast ist das Problem dass die Menüstruktur zweiter Ordnung verschwindet.
Es wäre schön wenn diese Funktionalität einer Menüstruktur integriert werden könnte, ich bin leider nicht mit den Programmierkenntnisse bewandert um das selber zu machen. Oder es geht doch schon und wir wissen aktuell nur nicht wie.
Moinsen
Hat Jemand in ftui ein Reading - abhängiges Stylesheet zum ändern des Hintergrunds hinbekommen?
In ftui 2 hatte ich das so gelöst:
index.html:
<!-- Different Stylesheet depending on daylight conditions calculated by the astro module -->
<link rel="stylesheet" href="css/lightscene-0.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="0" data-get-off="!0" />
<link rel="stylesheet" href="css/lightscene-1.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="1" data-get-off="!1" />
<link rel="stylesheet" href="css/lightscene-2.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="2" data-get-off="!2" />
<link rel="stylesheet" href="css/lightscene-3.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="3" data-get-off="!3" />
<link rel="stylesheet" href="css/lightscene-4.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="4" data-get-off="!4" />
<link rel="stylesheet" href="css/lightscene-5.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="5" data-get-off="!5" />
<link rel="stylesheet" href="css/lightscene-6.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="6" data-get-off="!6" />
lightscene-0.css:
body {
background-color: transparent;
background-image: url('../images/Background-0.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-clip: border-box;
}
.semitransparent {
background: rgba(0, 0, 0, 0.7) !important;
}
Danke und Gruß
Sailor
Danke für das tolle Tool, das Ihr bereitstellt. Ich hatte ein wenig Anlaufschwierigkeiten, aber dank der examples ist das sehr eingängig (die github-Seite ist auch informativ).
Zitat von: Sailor am 15 März 2021, 22:20:02Hat Jemand in ftui ein Reading - abhängiges Stylesheet zum ändern des Hintergrunds hinbekommen?
Interessante Frage. Ich wüsste adhoc nicht, ob dies derzeit geht.
Ich würde versuchen, den style des body elements via ftui-binding zu ändern. Ich vermute (!), dass sich nur der Hintergrund ändert?
Eine Lösungsansatz wäre zum Beispiel
<!-- html header kram -->
<body ftui-binding [style]="OS_Astro:light | map('`0`:`background-image: url('../images/Background-0.png');`, `1`:`background-image: url('../images/Background-1.png');`, `2`:`background-image: url('../images/Background-2.png');`, `3`:`background-image: url('../images/Background-3.png');`, `4`:`background-image: url('../images/Background-4.png');`, `5`:`background-image: url('../images/Background-5.png');`, `6`:`background-image: url('../images/Background-6.png');`')">
<!-- content -->
</body>
</html>Oder so:
<!-- html header kram -->
<body ftui-binding [class]="OS_Astro:light | map('`0`:`background-0`, `1`:`background-1`, `2`:`background-2`, `3`:`background-3`, `4`:`background-4`, `5`:`background-5`, `6`:`background-6`')">
<!-- content -->
</body>
</html>mit diesem CSS:
body {
background-color: transparent;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-clip: border-box;
}
body.background-0 { background-image: url('../images/Background-0.png'); }
body.background-1 { background-image: url('../images/Background-1.png'); }
body.background-2 { background-image: url('../images/Background-2.png'); }
body.background-3 { background-image: url('../images/Background-3.png'); }
body.background-4 { background-image: url('../images/Background-4.png'); }
body.background-5 { background-image: url('../images/Background-5.png'); }
body.background-6 { background-image: url('../images/Background-6.png'); }
.semitransparent {
background: rgba(0, 0, 0, 0.7) !important;
}
Ansonsten kannst du das ftui-binding auch im link element versuchen - kann aber leider nicht sagen ob das funktioniert:
<link ftui-binding rel="stylesheet" [link]="OS_Astro:light | map('`0`:`css/lightscene-0.css`, `1`:`css/lightscene-1.css`, `2`:`css/lightscene-2.css`, `3`:`css/lightscene-3.css`, `4`:`css/lightscene-4.css`, `5`:`css/lightscene-5.css`, `6`:`css/lightscene-6.css`')" />
Zitat von: yersinia am 16 März 2021, 08:30:02
Interessante Frage. Ich wüsste adhoc nicht, ob dies derzeit geht.
Habe alle drei nicht zum Laufen gebracht.
Der Code
<body style="background-image: url('./images/Background-6.png');">
zeigt mir brav das Bild an.
Der Code
<body ftui-binding [style]="OS_Astro:light | map('`0`:`"background-image: url('./images/Background-0.png');"`, `1`:`"background-image: url('./images/Background-1.png');"`, `2`:`"background-image: url('./images/Background-2.png');"`, `3`:`"background-image: url('./images/Background-3.png');"`, `4`:`"background-image: url('./images/Background-4.png');"`, `5`:`"background-image: url('./images/Background-5.png');"`, `6`:`"background-image: url('./images/Background-6.png');`')">
zeigt mir nur einen roten gestrichelten Rahmen, wo eigentlich das Bild sein sollte.
Immerhin etwas...
Hast Du noch eine Idee?
Gruß
Sailor
Zitatmap('`0`:`[b]"[/b]background-image: url('./images/Background-0.png');[b]"[/b]`,
Ist das richtig mit den Anführungszeichen?
gestrichelter Rahmen bedeutet "Fehler im Code"
Zitat von: grossmaggul am 16 März 2021, 13:27:27Ist das richtig mit den Anführungszeichen?
Das ist definitiv falsch.
Falsch ist auch
`0`:`background-image: url('../images/Background-0.png');`,man müsste die zweiten ' maskieren, vlt klappt das ja so:
`0`:`background-image: url(\'../images/Background-0.png\');`,Aber bevor man das -^ versucht, würde ich es eher über einen Selektor versuchen. Möglicherweise habe
ich auch ftui-binding falsch benutzt (
ftui-binding vs
ftui-binding="class").
<body ftui-binding="class" [class]="OS_Astro:light | map('`0`:`background-0`, `1`:`background-1`, `2`:`background-2`, `3`:`background-3`, `4`:`background-4`, `5`:`background-5`, `6`:`background-6`')">zusammen mit einer CSS Definition:
body {
background-color: transparent;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-clip: border-box;
}
body.background-0 { background-image: url('../images/Background-0.png'); }
body.background-1 { background-image: url('../images/Background-1.png'); }
body.background-2 { background-image: url('../images/Background-2.png'); }
body.background-3 { background-image: url('../images/Background-3.png'); }
body.background-4 { background-image: url('../images/Background-4.png'); }
body.background-5 { background-image: url('../images/Background-5.png'); }
body.background-6 { background-image: url('../images/Background-6.png'); }
.semitransparent {
background: rgba(0, 0, 0, 0.7) !important;
}
Ich weiss nicht, ob und wie du das .semitransparent nutzt.
<body ftui-binding [class]="OS_Astro:light | map('`0`:`background-0`, `1`:`background-1`, `2`:`background-2`, `3`:`background-3`, `4`:`background-4`, `5`:`background-5`, `6`:`background-6`')">
ich denke das die `0`,`1`,`2` usw. nicht diese `` brauchen, da es ja nur Zahlen sind das brauchst du doch nur bei getrennten "state" wie z.B. `Abnehmende Sichel` die Abnehmende Sichel nur als Beispiel.
Evtl. mal testen
Hallo Yersinia
Zitat von: yersinia am 16 März 2021, 13:55:28
Aber bevor man das -^ versucht, würde ich es eher über einen Selektor versuchen. Möglicherweise habe ich auch ftui-binding falsch benutzt (ftui-binding vs ftui-binding="class").
Ich weiss nicht, ob und wie du das .semitransparent nutzt.
Danke. Das .semitransparent wollte ich fuer die einzelnen kacheln spaeter verwenden, damit das Background-Bild nicht komplett abgedeckt wird.
Deine oben genannte css-Definition trage ich zusätzlich in die ftui.css ein?
Zum Beispiel ftui.css
html, body, main {
height: 100%;
width: 100%;
touch-action: manipulation;
}
main {
overflow: auto;
}
body {
width: auto;
margin: 0;
/* disable selection */
user-select: none;
}
body {
background-color: transparent;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-clip: border-box;
}
body.background-0 { background-image: url('./images/Background-0.png'); }
body.background-1 { background-image: url('./images/Background-1.png'); }
body.background-2 { background-image: url('./images/Background-2.png'); }
body.background-3 { background-image: url('./images/Background-3.png'); }
body.background-4 { background-image: url('./images/Background-4.png'); }
body.background-5 { background-image: url('./images/Background-5.png'); }
body.background-6 { background-image: url('./images/Background-6.png'); }
.semitransparent {
background: rgba(0, 0, 0, 0.7) !important;
}
body.loading:before {
content: "";
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1500;
background-color: rgba(0, 0, 0, 0.8);
}
body:before {
background-color: rgba(0, 0, 0, 0);
transition: background-color 200ms;
}
*, *:after, *:before {
box-sizing: border-box;
}
*:not(:defined){
opacity: 0;
}
.fixed {
position: fixed;
z-index: 2;
}
footer {
bottom: 0;
width: 100%;
padding: 0.5em 0 0.5em 0;
background: var(--view-footer-color);
display: flex;
justify-content: space-evenly;
}
.bold {
font-weight: bold;
}
.lift {
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.h-5 {
height: 5%;
}
.h-8 {
height: 8.3%;
}
.h-10 {
height: 10%;
}
.h-15 {
height: 15%;
}
.h-12 {
height: 12.5%;
}
.h-20 {
height: 20%;
}
.h-25 {
height: 25%;
}
.h-30 {
height: 30%;
}
.h-33 {
height: 33%;
}
.h-35 {
height: 35%;
}
.h-40 {
height: 40%;
}
.h-45 {
height: 45%;
}
.h-50 {
height: 50%;
}
.h-55 {
height: 55%;
}
.h-60 {
height: 60%;
}
.h-65 {
height: 65%;
}
.h-66 {
height: 66%;
}
.h-70 {
height: 70%;
}
.h-75 {
height: 75%;
}
.h-80 {
height: 80%;
}
.h-85 {
height: 85%;
}
.h-90 {
height: 80%;
}
.h-95 {
height: 95%;
}
.h-100 {
height: 100%;
}
.w-20 {
width: 20%;
}
.w-50 {
width: 50%;
}
.w-60 {
width: 60%;
}
.w-80 {
width: 80%;
}
.w-100 {
width: 100%;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.top-align {
vertical-align: top;
}
.bottom-align {
vertical-align: bottom;
}
.truncate, .nowrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wordwrap {
white-space: pre-wrap;
/* CSS3 */
white-space: -moz-pre-wrap;
/* Firefox */
white-space: -pre-wrap;
/* Opera <7 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* IE */
}
.darker {
color: #8C8C8C;
}
.thin {
font-weight: 100;
}
.size-12 {
font-size: 8rem;
font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}
.size-11 {
font-size: 6rem;
font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}
.size-10 {
font-size: 4rem;
font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}
.size-9 {
font-size: 3.5rem;
}
.size-8 {
font-size: 3rem;
}
.size-7 {
font-size: 2.5rem;
}
.size-6 {
font-size: 2rem;
}
.size-5 {
font-size: 1.75rem;
}
.size-4 {
font-size: 1.5rem;
}
.size-3 {
font-size: 1.25rem;
}
.size-2 {
font-size: 1rem;
}
.size-1 {
font-size: 0.875rem;
}
.size-0 {
font-size: 0.75rem;
}
/* end font sizes */
.verticalLine {
border-right-style: outset;
}
.border-top {
border-top: 1px solid var(--border-color);
}
/* toDo: sort */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
ul, ol {
list-style: none;
}
ul, li {
margin: 0;
padding: 0;
}
.hw-accelerate {
transform: translateZ(0);
will-change: transform;
}
.led {
height: 2em;
width: 2em;
}
.led:after {
content: " ";
}
.led.square {
height: 1em;
width: 2em;
border-radius: 3px;
}
#shade {
position: absolute;
z-index: 1001;
background-color: #000000;
opacity: 0.5;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.blurry {
color: transparent !important;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.half-transparent {
opacity: .5 !important;
}
.transparent {
opacity: 0;
}
.faded {
filter: grayscale(100%);
opacity: .2 !important;
}
.hidden {
display: none;
}
.has-error {
border: dashed 2px red;
min-height: 1em;
min-width: 1em;
}
/* animations */
.blink {
animation: blink 1s step-start 0s infinite;
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.shake {
animation: shake 100ms ease-in-out infinite;
}
.fail-shake {
animation: fail-shake .5s linear;
}
.hop {
animation-name: hop;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
animation-duration: 2s;
animation-iteration-count: infinite;
}
.flash {
animation-name: flash;
animation-timing-function: ease-out;
animation-duration: .4s;
}
.marquee {
width: 100%;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
animation: marquee 10s linear infinite;
}
/* animation keyframes */
@keyframes hop {
0% { transform: scale(1,1) translateY(0); }
10% { transform: scale(1.1,.9) translateY(0); }
30% { transform: scale(.9,1.1) translateY(-1em); }
50% { transform: scale(1.05,.95) translateY(0); }
57% { transform: scale(1,1) translateY(-0.1em); }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes marquee {
0% {
text-indent: 100%
}
100% {
text-indent: 0%
}
}
@keyframes shake {
2% {
transform: translate(1.5px, 2.5px) rotate(-0.5deg);
}
4% {
transform: translate(1.5px, -1.5px) rotate(0.5deg);
}
6% {
transform: translate(1.5px, -1.5px) rotate(-0.5deg);
}
8% {
transform: translate(0.5px, 2.5px) rotate(0.5deg);
}
10% {
transform: translate(-0.5px, -0.5px) rotate(1.5deg);
}
12% {
transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
}
14% {
transform: translate(2.5px, 0.5px) rotate(-0.5deg);
}
16% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
18% {
transform: translate(2.5px, 0.5px) rotate(-0.5deg);
}
20% {
transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
}
22% {
transform: translate(2.5px, -1.5px) rotate(-0.5deg);
}
24% {
transform: translate(1.5px, 2.5px) rotate(1.5deg);
}
26% {
transform: translate(-1.5px, -0.5px) rotate(0.5deg);
}
28% {
transform: translate(1.5px, 1.5px) rotate(-0.5deg);
}
30% {
transform: translate(2.5px, -1.5px) rotate(-0.5deg);
}
32% {
transform: translate(0.5px, 2.5px) rotate(-0.5deg);
}
34% {
transform: translate(-0.5px, 1.5px) rotate(1.5deg);
}
36% {
transform: translate(0.5px, 1.5px) rotate(1.5deg);
}
38% {
transform: translate(1.5px, 1.5px) rotate(0.5deg);
}
40% {
transform: translate(-0.5px, 1.5px) rotate(0.5deg);
}
42% {
transform: translate(-0.5px, 0.5px) rotate(1.5deg);
}
44% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
46% {
transform: translate(0.5px, -0.5px) rotate(0.5deg);
}
48% {
transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
}
50% {
transform: translate(2.5px, -0.5px) rotate(-0.5deg);
}
52% {
transform: translate(0.5px, -1.5px) rotate(0.5deg);
}
54% {
transform: translate(2.5px, -1.5px) rotate(0.5deg);
}
56% {
transform: translate(-1.5px, -0.5px) rotate(0.5deg);
}
58% {
transform: translate(-1.5px, 2.5px) rotate(1.5deg);
}
60% {
transform: translate(0.5px, -1.5px) rotate(0.5deg);
}
62% {
transform: translate(-0.5px, 2.5px) rotate(1.5deg);
}
64% {
transform: translate(0.5px, 0.5px) rotate(-0.5deg);
}
66% {
transform: translate(1.5px, -0.5px) rotate(1.5deg);
}
68% {
transform: translate(-1.5px, -0.5px) rotate(0.5deg);
}
70% {
transform: translate(-0.5px, 2.5px) rotate(1.5deg);
}
72% {
transform: translate(1.5px, 0.5px) rotate(0.5deg);
}
74% {
transform: translate(0.5px, -1.5px) rotate(0.5deg);
}
76% {
transform: translate(1.5px, 1.5px) rotate(-0.5deg);
}
78% {
transform: translate(2.5px, -1.5px) rotate(0.5deg);
}
80% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
82% {
transform: translate(-0.5px, 2.5px) rotate(1.5deg);
}
84% {
transform: translate(1.5px, 1.5px) rotate(-0.5deg);
}
86% {
transform: translate(2.5px, 0.5px) rotate(1.5deg);
}
88% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
}
90% {
transform: translate(1.5px, -0.5px) rotate(-0.5deg);
}
92% {
transform: translate(0.5px, -1.5px) rotate(1.5deg);
}
94% {
transform: translate(-0.5px, -0.5px) rotate(0.5deg);
}
96% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
}
98% {
transform: translate(-0.5px, -1.5px) rotate(1.5deg);
}
0%, 100% {
transform: translate(0, 0) rotate(0);
}
}
@keyframes fail-shake {
8%, 41% {
transform: translateX(-10px);
}
25%, 58% {
transform: translateX(10px);
}
75% {
transform: translateX(-5px);
}
92% {
transform: translateX(5px);
}
0%, 100% {
transform: translateX(0);
}
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
@keyframes flash {
0% {
background: white;
}
100% {
background: none;
}
}
@keyframes blink {
50% {
opacity: 0.0;
}
}
@-webkit-keyframes blink {
50% {
opacity: 0.0;
}
}
.drop-hover {
border: 3px dotted #3a7999;
color: #3a7999;
background: rgba(0, 0, 0, 0);
}
.drag {
transition: all 0.15s ease-out;
cursor: move;
}
.drag:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
/* components specials */
/* icon badge */
ftui-circlemenu ~ ftui-badge,
ftui-icon ~ ftui-badge {
position: absolute;
margin: -1.5em -1.5em 1em 1em;
min-width: 1.2em;
min-height: 1em;
--padding-top: 0.15em;
--padding-bottom: 0.15em;
z-index: 1;
}
[popup-target],
[onclick] {
cursor: pointer;
}
So realisiert, ist zwar der rote Rahmen weg, aber kein Bild da...
PS: im ftui-Verzeichnis befindet sich das images - Verzeichnis. Daher ist "./images/Background-0.png" richtig
Gruss
Sailor
Zitat von: moonsorrox am 16 März 2021, 14:04:28
<body ftui-binding [class]="OS_Astro:light | map('`0`:`background-0`, `1`:`background-1`, `2`:`background-2`, `3`:`background-3`, `4`:`background-4`, `5`:`background-5`, `6`:`background-6`')">
ich denke das die `0`,`1`,`2` usw. nicht diese `` brauchen, da es ja nur Zahlen sind das brauchst du doch nur bei getrennten "state" wie z.B. `Abnehmende Sichel` die Abnehmende Sichel nur als Beispiel.
Evtl. mal testen
Hallo moonsorrox
Weder
<body ftui-binding="class" [class]="OS_Astro:light | map('0:`background-0`, 1:`background-1`, 2:`background-2`, 3:`background-3`, 4:`background-4`, 5:`background-5`, 6:`background-6`')">noch
<body ftui-binding="class" [class]="OS_Astro:light | map('0:background-0, 1:background-1, 2:background-2, 3:background-3, 4:Background-4, 5:background-5, 6:background-6')">brachten das gewuenschte Bild herbei.
Wobei ich mir noch nicht sicher bin, ob ich die css-Datei überhaupt richtig umgesetzt habe. :-\
Aber Danke, dass ihr noch Ideen habt.
Gruß
Sailor
Hallo,
den Eintrag hat setstate in der popup.component.css gesetzt und da muss auch nichts geändert werden.
Was ist das eigentliche Problem?
Brauchst du ein Beispiel für Popup?
<ftui-row>
<ftui-label
[text]="Aquarium_Temp:temperature"
[color]="Aquarium_Temp:temperature | map('27.5:blue, 28.5:green, 31:red')"
popup-target="popup-Aquarium"
class="size-6"><span slot="end">°C</span>
</ftui-label>
</ftui-row>
<ftui-popup id="popup-Aquarium" width="800px" height="300px" timeout="120">
<ftui-chart title="Aquarium Temperatur">
<ftui-chart-data label="Temperatur" color="#21a000" log="logdb" file="-" spec="Aquarium_Temp:temperature"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
<ftui-popup>
Gruß
Eisix
Hallo Eisix
Zitat von: Eisix am 16 März 2021, 20:13:23
Was ist das eigentliche Problem?
Brauchst du ein Beispiel für Popup?
Hat sich mittlerweile erledigt.
Ich hatte ein ">" vergessen und schon ging gar nix mehr!
<ftui-grid-tile row="1" col="1" height="10" width="10" shape="round" class="semitransparent">
<ftui-column>
<div popup-target="calllist">Popup</div>
</ftui-column>
</ftui-grid-tile>
<ftui-popup shape="round" id="calllist" height="400px" width="600px">
<header class="size-5">Hier soll was poppen</header>
Hier ist mein Popup!
</ftui-popup>
Funzt prima!
Sorry für den Anfaengerfehler!
PS: Wenn man entwickelt und außerhalb der index.html etwas verändert, muss ich ständig den Cache unter Firefox leeren, damit mir selbst mit F5 die Aenderung angezeigt werden.
Wie macht Ihr das eigentlich? Das ist ja ultranervig!
@Sailor: Kein Problem.
Noch ein kleiner wahrscheinlich offensichtlicher Tip für alle die migrieren. FTUI2 Sachen lassen sich auch per Iframe einbinden.
<ftui-row>
<iframe width="100%" height="100%" src="http://192.168.100.5:8083/fhem/www/tablet/Meteogram.html" frameborder="0"> </iframe>
</ftui-row>
Gruß
Eisix
Hallo Eisix
Zitat von: Eisix am 16 März 2021, 20:30:08
Noch ein kleiner wahrscheinlich offensichtlicher Tip für alle die migrieren. FTUI2 Sachen lassen sich auch per Iframe einbinden.
Och noee, wenn ich schon alles neu aufsetze, dann richtig von Grund auf.
Mein heutiges Projekt war Icon auf Popup mit Tabelle von Icons auf ein jeweiliges Unter-Popup.
<!--
/* FHEM tablet ui - FTUI */
* UI builder framework for FHEM
* Version: 3.0.0
*
* Alarm Status
*
* Subsequent tile content for the FTUI "The Deeke Home"
* Copyright (c) matthias.deeke@deeke.eu
*
-->
<ftui-column>
<ftui-icon [name] = "AllAttentionGetter:state | map('silent: check-circle, warning: exclamation-triangle, alert: exclamation-triangle')"
[color] = "AllAttentionGetter:state | map('silent: success, warning: warning, alert: danger')"
[class-name] = "AllAttentionGetter:state | map('silent: size-5, warning: size-5, alert: blink size-5')"
popup-target = "alarmstatus">
</ftui-icon>
</ftui-column>
<ftui-popup shape="round" id="alarmstatus" height="400px" width="600px">
<header>Alarms</header>
<table width="100%" border="1">
<tr>
<td colspan="100%">
<ftui-column>
<ftui-icon [name] = "AllAttentionGetter:state | map('silent: check-circle, warning: exclamation-triangle, alert: exclamation-triangle')"
[color] = "AllAttentionGetter:state | map('silent: success, warning: warning, alert: danger')"
[class-name] = "AllAttentionGetter:state | map('silent: size-5, warning: size-5, alert: blink size-5')">
</ftui-icon>
</ftui-column>
</td>
</tr>
<tr>
<td>
<ftui-column>
<ftui-icon [name] = "AttentionGetter_SmokeDetector:state | map('silent: secur_smoke_detector, warning: secur_smoke_detector, alert: secur_smoke_detector')"
[color] = "AttentionGetter_SmokeDetector:state | map('silent: success, warning: warning, alert: danger')"
[class-name] = "AttentionGetter_SmokeDetector:state | map('silent: size-5, warning: size-5, alert: blink size-5')"
popup-target = "smokedetector">
</ftui-icon>
</ftui-column>
</td>
<td>
<ftui-column>
<ftui-icon [name] = "AttentionGetter_Humidity:state | map('silent: weather_humidity, warning: weather_humidity, alert: weather_humidity')"
[color] = "AttentionGetter_Humidity:state | map('silent: success, warning: warning, alert: danger')"
[class-name] = "AttentionGetter_Humidity:state | map('silent: size-5, warning: size-5, alert: blink size-5')"
popup-target = "humidity">
</ftui-icon>
</ftui-column>
</td>
<td>
<ftui-column>
<ftui-icon [name] = "AttentionGetter_DeadDevice:state | map('silent: it_network, warning: it_network, alert: it_network')"
[color] = "AttentionGetter_DeadDevice:state | map('silent: success, warning: warning, alert: danger')"
[class-name] = "AttentionGetter_DeadDevice:state | map('silent: size-5, warning: size-5, alert: blink size-5')"
popup-target = "actiondetector">
</ftui-icon>
</ftui-column>
</td>
</tr>
<tr>
<td>
<ftui-column>
<ftui-icon [name] = "AttentionGetter_Battery:state | map('silent: measure_battery_25, warning: measure_battery_25, alert: measure_battery_25')"
[color] = "AttentionGetter_Battery:state | map('silent: success, warning: warning, alert: danger')"
[class-name] = "AttentionGetter_Battery:state | map('silent: size-5, warning: size-5, alert: blink size-5')"
popup-target = "battery">
</ftui-icon>
</ftui-column>
</td>
<td>
<ftui-column>
<ftui-icon [name] = "AttentionGetter_Pressure:state | map('silent: weather_barometric_pressure, warning: weather_barometric_pressure, alert: weather_barometric_pressure')"
[color] = "AttentionGetter_Pressure:state | map('silent: success, warning: warning, alert: danger')"
[class-name] = "AttentionGetter_Pressure:state | map('silent: size-5, warning: size-5, alert: blink size-5')"
popup-target = "pressure">
</ftui-icon>
</ftui-column>
</td>
<td>
<!-- Reserved -->
</td>
</tr>
</table>
</ftui-popup>
<ftui-popup shape="round" id="smokedetector" height="200px" width="200px">
<header>Smoke</header>
</ftui-popup>
<ftui-popup shape="round" id="humidity" height="200px" width="200px">
<header>Humidity</header>
</ftui-popup>
<ftui-popup shape="round" id="actiondetector" height="200px" width="200px">
<header>ActionDetector</header>
</ftui-popup>
<ftui-popup shape="round" id="battery" height="200px" width="200px">
<header>Battery</header>
</ftui-popup>
<ftui-popup shape="round" id="pressure" height="200px" width="200px">
<header>Pressure</header>
</ftui-popup>
Jetzt muss ich nur noch hinbekommen ein ganzes Readingsgroup in dem jeweiligen Unter-Popup angezeigt zu bekommen.
In den Examples habe ich hierzu noch nichts gefunden.
Gruß
Sailor
PS: Langsam nimmt die Sache fahrt auf. Wenn man erst mal die Semantik verstanden hat, lernen die Codezeilen nur so das Fliegen. ;D
Zitat von: Sailor am 16 März 2021, 19:22:56
Deine oben genannte css-Definition trage ich zusätzlich in die ftui.css ein?
das wird nichts, spätestens beim nächsten Update ist deins weider weg.
Schreibe zusätzlichen css Code in eine userftui.css die bleibt erhalten.
Habe ich dich da richtig verstanden, hatte es oben als Frage erkannt...?
Ich habe mich noch nicht richtig beschäftigt damit, aber ich finde diese Stelle sieht komisch aus
<body ftui-binding="class" [class]="OS_Astro:light.........>
Dein OS_Astro:light hat auch die Werte "0", "1" usw. frage deshalb weil mein Astro solch einen Wert nicht hat, mein altes Twilight hat diesen Wert aber schon...!
Nur eine Vermutung..... ;)
Ich habe mal probiert FTUI in Docker zu installieren. Beim starten bekomme ich den Fehler:
standard_init_linux.go:219: exec user process caused: exec format error
Muss nur die index.html im Ordner liegen, oder die ganzen Installationsdateien?
docker run -d -p 8080:80 -v /opt/containers/ftui/index.html:/usr/share/nginx/html/index.html --name ftui3 knowthelist/ftui
Zitat von: Sailor am 16 März 2021, 19:22:56Deine oben genannte css-Definition trage ich zusätzlich in die ftui.css ein?
Zum Beispiel ftui.css
Nein, weil -wie moonsorrox schreibt- du dann bei jedem FTUI3 Update die datei überschreibst. Leg eine eigene CSS Datei an und binde diese in deiner Hauptseite (index.html?) ein. In diese fügst du folgendes ein (in Bezug auf body) um die body-Deklaration aus ftui.css zu ergänzen bzw nicht zu überschreiben.
body.background-0, body.background-1, body.background-2,
body.background-3, body.background-4, body.background-5,
body.background-6 {
background-color: transparent;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-clip: border-box;
}
body.background-0 { background-image: url('./images/Background-0.png'); }
body.background-1 { background-image: url('./images/Background-1.png'); }
body.background-2 { background-image: url('./images/Background-2.png'); }
body.background-3 { background-image: url('./images/Background-3.png'); }
body.background-4 { background-image: url('./images/Background-4.png'); }
body.background-5 { background-image: url('./images/Background-5.png'); }
body.background-6 { background-image: url('./images/Background-6.png'); }
.semitransparent {
background: rgba(0, 0, 0, 0.7) !important;
}
Damit hast du eine eigene CSS für deine individuelle Gestaltungsmöglichkeiten.
Natürlich auch das Verzeichnis ./images überpüfen, ob die Dateien dort auch liegen (von der ftui-seite aus gesehen).
Schau dir an, welche Werte das Reading
light von
OS_Astro zur Verfügung stellt - sind es wirklich 0 bis 6?
Wenn alles gegeben ist, müsste zumindest
<body ftui-binding="class" [class]="OS_Astro:light | map('0:`background-0`, 1:`background-1`, 2:`background-2`, 3:`background-3`, 4:`background-4`, 5:`background-5`, 6:`background-6`')">dazu führen, dass der richtige Selektor ausgewählt wird. Eventuell mit einem Code-Inspektor überprüfen. Dazu müssen aber vorher die ftui.js und zumindest deine user-CSS geladen sein.
Wenn <body> gar nicht will, kannst du auch ein div Container unterhalb des <body> definieren welcher 100% des Platzes einnimmt - und dann den Hintergrund aufnimmt. Dazu müsstest du in der CSS oben das
body weglassen.
Zitat von: moonsorrox am 16 März 2021, 23:12:54Ich habe mich noch nicht richtig beschäftigt damit, aber ich finde diese Stelle sieht komisch aus
<body ftui-binding="class" [class]="OS_Astro:light.........>
So genau ist mir die Syntax auch nicht klar, ob es eher
<body ftui-binding="class" [class]="...">oder
<body ftui-binding [class]="...">oder
<ftui-binding body [class]="...">ist.
Ich nutze erste Version (allerdings mit einem div-Container) und das funktioniert, ob es nötig ist weiss ich nicht - insb wenn man mehr als einen Wert binden möchte...
Zitat von: TWART016 am 17 März 2021, 01:40:47Muss nur die index.html im Ordner liegen, oder die ganzen Installationsdateien?
Ich vermute, damit es vernünftig läuft, benötigst du alles unter www/ftui (https://github.com/knowthelist/ftui/tree/master/www/ftui) auf deinem Docker-Webserver.
Hallo moonsorrox
Zitat von: moonsorrox am 16 März 2021, 23:12:54
das wird nichts, spätestens beim nächsten Update ist deins weider weg.
Schreibe zusätzlichen css Code in eine userftui.css die bleibt erhalten.
Habe ich dich da richtig verstanden, hatte es oben als Frage erkannt...?
Hast du richtig verstanden!
Danke, werde ich so umsetzen.
Zitat von: moonsorrox am 16 März 2021, 23:12:54
Ich habe mich noch nicht richtig beschäftigt damit, aber ich finde diese Stelle sieht komisch aus
<body ftui-binding="class" [class]="OS_Astro:light.........>
Dein OS_Astro:light hat auch die Werte "0", "1" usw. frage deshalb weil mein Astro solch einen Wert nicht hat, mein altes Twilight hat diesen Wert aber schon...!
Nur eine Vermutung..... ;)
Aha! Ein Experte mit Hintergrundwissen! ;)
Ja, nachdem Twilight mir nervige Meldungen ueber die Einstellung des yahoo-Service ausgespuckt hat, bin ich auf das ASTRO - Modul umgestiegen mit folgendem User-Reading:
light {
my $SunAlt = ReadingsVal($name,"SunAlt",0);
my $Indoor_Horizon = AttrVal($name, "indoor_horizon", 0);
my $LightIndex;
### 0 - total night, sun is at least -18 degree below horizon
if ($SunAlt <= -18) {
$LightIndex = 0;
}
### 1 - astronomical twilight, sun is between -12 and -18 degree below horizon
elsif (($SunAlt > -18) && ($SunAlt <= -12)) {
$LightIndex = 1;
}
### 2 - nautical twilight, sun is between -6 and -12 degree below horizon
elsif (($SunAlt > -12) && ($SunAlt <= -6)) {
$LightIndex = 2;
}
### 3 - civil twilight, sun is between 0 and -6 degree below horizon
elsif (($SunAlt > -6) && ($SunAlt <= 0)) {
$LightIndex = 3;
}
### 4 - indoor twilight, sun is between the indoor_horizon and 0 degree below horizon (not used if indoor_horizon=0)
elsif (($Indoor_Horizon < 0) && ($SunAlt <= 0) && ($SunAlt > $Indoor_Horizon)) {
$LightIndex = 4;
}
### 5 - weather twilight, sun is between indoor_horizon and a virtual weather horizon (the weather horizon depends on weather conditions (optional)
### 6 - maximum daylight
elsif ($SunAlt > 0) {
$LightIndex = 6;
}
$LightIndex
}
Gruß
Sailor
[OT]
Zitat von: Sailor am 17 März 2021, 08:23:58Ja, nachdem Twilight mir nervige Meldungen ueber die Einstellung des yahoo-Service ausgespuckt hat, bin ich auf das ASTRO - Modul umgestiegen mit folgendem User-Reading:
Beta-User hat sich bezgl Twilight richtig ins Zeug gelegt und das Modul tiefgründig überarbeitet (https://forum.fhem.de/index.php/topic,114061.0.html) - mit dem Verzicht auf Yahoo und der Möglichkeit, externe Wetterdatendevices einzubinden. Schau es dir an, wenn es dich interessiert. Bist du zufrieden mit Astro, dann bleib dabei.
[/OT]
Hallo yersinia
Zitat von: yersinia am 17 März 2021, 07:41:18
Nein, weil -wie moonsorrox schreibt- du dann bei jedem FTUI3 Update die datei überschreibst. Leg eine eigene CSS Datei an und binde diese in deiner Hauptseite (index.html?) ein. In diese fügst du folgendes ein (in Bezug auf body) um die body-Deklaration aus ftui.css zu ergänzen bzw nicht zu überschreiben.
Damit hast du eine eigene CSS für deine individuelle Gestaltungsmöglichkeiten.
Natürlich auch das Verzeichnis ./images überpüfen, ob die Dateien dort auch liegen (von der ftui-seite aus gesehen).
Erledigt: "myftui.css"
Zitat von: yersinia am 17 März 2021, 07:41:18
Schau dir an, welche Werte das Reading light von OS_Astro zur Verfügung stellt - sind es wirklich 0 bis 6?
Ja, siehe oben.
Zitat von: yersinia am 17 März 2021, 07:41:18
Wenn alles gegeben ist, müsste zumindest
<body ftui-binding="class" [class]="OS_Astro:light | map('0:`background-0`, 1:`background-1`, 2:`background-2`, 3:`background-3`, 4:`background-4`, 5:`background-5`, 6:`background-6`')">
dazu führen, dass der richtige Selektor ausgewählt wird. Eventuell mit einem Code-Inspektor überprüfen. Dazu müssen aber vorher die ftui.js und zumindest deine user-CSS geladen sein.
Wenn <body> gar nicht will, kannst du auch ein div Container unterhalb des <body> definieren welcher 100% des Platzes einnimmt - und dann den Hintergrund aufnimmt. Dazu müsstest du in der CSS oben das body weglassen.
So genau ist mir die Syntax auch nicht klar, ob es eher
<body ftui-binding="class" [class]="...">
oder
<body ftui-binding [class]="...">
oder
<ftui-binding body [class]="...">
ist.
Werde ich ausprobieren und berichten.
Gruß
Sailor
Ein herzerfrischendesMoin vom achtern Diek vorweg!
[Gelöst]
Leute, Ihr seid absolute Spitze!!! DANKE! ;D
Es funzt und zwar rattenschnell (im Gegensatz zu v 2.x)!
Die Zusammenfassung für die Nachwelt:
index.html
<!-- Add line after -->
<link href = "ftui.css" rel="stylesheet">
<link href = "myftui.css" rel="stylesheet">
<!-- Replace TestDummy with Twilight device -->
<body ftui-binding="class" [class]="TestDummy:light | map('0:`background-0`, 1:`background-1`, 2:`background-2`, 3:`background-3`, 4:`background-4`, 5:`background-5`, 6:`background-6`')">
<!-- Your ftui content -->
</body>
myftui.css im gleichen Verzeichnis wie ftui.css
body.background-0, body.background-1, body.background-2,
body.background-3, body.background-4, body.background-5,
body.background-6 {
background-color: transparent;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-clip: border-box;
}
body.background-0 { background-image: url('./images/Background-0.png'); }
body.background-1 { background-image: url('./images/Background-1.png'); }
body.background-2 { background-image: url('./images/Background-2.png'); }
body.background-3 { background-image: url('./images/Background-3.png'); }
body.background-4 { background-image: url('./images/Background-4.png'); }
body.background-5 { background-image: url('./images/Background-5.png'); }
body.background-6 { background-image: url('./images/Background-6.png'); }
.semitransparent {
background: rgba(0, 0, 0, 0.7) !important;
}
Unterverzeichnis "images" im ftui - Ordner
-rw-rw-rw- 1 pi pi 2478881 Sep 21 2018 Background-0.png
-rw-rw-rw- 1 pi pi 1998613 Sep 21 2018 Background-1.png
-rw-rw-rw- 1 pi pi 1505728 Sep 21 2018 Background-2.png
-rw-rw-rw- 1 pi pi 1797516 Sep 21 2018 Background-3.png
-rw-rw-rw- 1 pi pi 1673802 Sep 21 2018 Background-4.png
-rw-rw-rw- 1 pi pi 644889 Sep 21 2018 Background-5.png
-rw-rw-rw- 1 pi pi 2541812 Sep 21 2018 Background-6.png
Gruß
Sailor
@ Sailor
na super...! gemeinsam ist nie Einsam ;)
Schön das es geklappt hat, finde die Idee ganz super, kann man ja mit den verschiedensten Szenarien erstellen
Moin zusammen
Ich habe hier ein ReadingsGroup mit 54 Einträgen, die bei Installation weiterer Geräte auch größer wird.
Um zu vermeiden für jeden dieser Einträge einen eigenen Tabelleneintrag mit einem ftui-label erstellen zu müssen meine Frage:
Hat schon Jemand ftui3 - Erfahrungen mit der Darstellung einer Readingsgroup?
Gruß
Sailor
Moin zusammen
Noch eine Frage: Wie muss ich das Label gestalten, wenn ich aus einem Reading
2021-03-18T19:31+0100
nur das
19:31
angezeigt haben möchte?
In ftui 2.x lautete die Regex dafuer: .*T(\d+).*(\:)(\d+).*
In den Example "Label" steht allerlei drin aber ich verstehe diese Pipes nicht.
Ich habe auch nirgendwo eine Beschreibung für die einzelnen Parameter gefunden.
Gruß
Sailor
@Sailor
Folgendes könnte helfen:
<ftui-label [text]="device:reading | toDate() | format('hh:mm')"></ftui-label>
Zitat von: yersinia am 17 März 2021, 07:41:18
Ich vermute, damit es vernünftig läuft, benötigst du alles unter www/ftui (https://github.com/knowthelist/ftui/tree/master/www/ftui) auf deinem Docker-Webserver.
Das habe ich auch schon probiert. Unter ftui habe ich folgende Dateien & Ordner
user@docker:/opt/containers/ftui$ ls -l
total 60
drwxrwxr-x 32 root root 4096 Mär 1 21:35 components
drwxrwxr-x 3 root root 4096 Mär 1 21:35 examples
-rwxrwxr-x 1 root root 9894 Mär 1 21:35 ftui.css
-rwxrwxr-x 1 root root 1323 Mär 1 21:35 ftui.js
drwxrwxr-x 3 root root 20480 Mär 1 21:35 icons
-rwxrwxr-x 1 root root 6069 Mär 17 01:38 index.html
drwxrwxr-x 9 root root 4096 Mär 1 21:35 modules
drwxrwxr-x 2 root root 4096 Mär 1 21:35 themes
Hallo OdfFhem
Zitat von: OdfFhem am 18 März 2021, 21:16:58
Folgendes könnte helfen:
<ftui-label [text]="device:reading | toDate() | format('hh:mm')"></ftui-label>
Habe ich leider schon ohne Erfolg getestet.
Kann man das widget "Label" nicht mit RegEx aktivieren. Das wäre eine universelle Loesung.
Gruß
Sailor
ZitatKann man das widget "Label" nicht mit RegEx aktivieren.
Damit wäre es aber vorbei mit "keep it simple".;)
Was ist das denn genau für ein Reading, bzw. wo kommt das her?
@Sailor
Könnte es sein, dass die Zeitangabe nicht der Wert des Readings, sondern der Zeitstempel des Readings ist?
Wenn ja, dann musst Du device:reading:time verwenden.
device und reading müssen ersetzt werden; time nicht.
Mit den zur Verfügung gestellten Pipes bzgl. Datum/Zeit kann man gezielt umformatieren ... sehr viele Möglichkeiten.
Kannst Du denn mal einen (datum-/zeitlosen) Beispielfall nennen, der den Einsatz von RegExp erfordert? Dann kann man einen expliziten Lösungsansatz herausarbeiten ...
Moin zusammen!
Zitat von: OdfFhem am 19 März 2021, 13:11:59
Könnte es sein, dass die Zeitangabe nicht der Wert des Readings, sondern der Zeitstempel des Readings ist?
Nein, dort steht die Abfahrtszeit der nächsten Busverbindung vom Departure Modul drin.
[/quote]
Zitat von: grossmaggul am 19 März 2021, 13:08:43
Damit wäre es aber vorbei mit "keep it simple".;)
Was ist das denn genau für ein Reading, bzw. wo kommt das her?
Ich habe das jetzt mit einem UserReading geloest und schon im Modul das gewuenschte Format bereit gestellt.
Das letzte was ich will ist, wenn ftui3 vor lauter Features genauso so lahm wird wie ftui2.
Gruß
Sailor
Hi@all,
mal wieder was zum Testen für euch.
Das PinPad habe ich gebaut um meinen View der Heizungssteuerung mit einer kleinen (Kinder)Sicherung zu versehen.
Das PinPad kann nach dem <ftui-tab-view> oder <ftui-grid-tile> kommen um den View zu sperren.
<ftui-pinpad
(device)="PinPad"
[pin]="PinPad:pin"
shape="round"
name="PinPad"
bgcolor="#ededed"
[hidden]="PinPad:state | map('on:false, off:true')"
full>
</ftui-pinpad>
(device) = fhem Dummy
[pin] = fhem Dummy pin
shape = round ->wenn nicht gesetzt, eckig
name = header über dotsbox
bgcolor = Farbe des PinPad (default=#444444)
wenn "full" gesetzt, dann wird der komplette Hintergrund für PointerEvents gesperrt. Wenn nicht gesetzt, dann bleibt das linke grid Menü mit einem width von 1 weiterhin bediehnbar.
[hidden] = muss gesetzt sein
In fhem wird ein Dummy-Device angelegt. Bsp.:
defmod PinPad dummy
attr PinPad readingList pin
attr PinPad setList on off pin
hier im Beispiel ist pin der pin der hier gesetzt werden kann.
Den Dummy kann man dann mit einem <ftui-button> auf "on" setzen und das PinPad poppt auf. Bsp:
<ftui-button fill="none" (value)="PinPad" states="on">
<ftui-icon name="th"></ftui-icon>
</ftui-button>
Ich hoffe ein paar User können es gebrauchen. Man kann es bestimmt auch zum AlarmPad umbauen.
Man kann bestimmt auch noch Optimierungen vornehmen. Für meinen Zweck ist es aber ausreichend.
Das PinPad kann auch wie hier von mir geschrieben erstellt werden (ist aber aufwendiger):
Link (https://forum.fhem.de/index.php/topic,115259.msg1134096.html#msg1134096)
Gruß Thomas
Edit: ps Failshake ist mit drin...
edit: hier geht es weiter:https://forum.fhem.de/index.php/topic,120107.msg1145784.html#msg1145784 (https://forum.fhem.de/index.php/topic,120107.msg1145784.html#msg1145784)
@Sailor
Du hast Dich ja jetzt für ein userReading entschieden, daher sind die folgenden Ausführungen nur zur Information gedacht.
Ich hatte inzwischen Zeit, den von Dir angegebenen Readingwert zu testen und der erste Verdacht vom 18 März 2021, 21:16:58 führte nachvollziehbar nicht zum richtigen Ergebnis. Problem ist dabei, dass das im Readingwert verwendete Format nicht von FTUI in ein Datum konvertiert werden kann.
Jetzt könnte man den Readingwert kompatibel machen und den entsprechenden Teil ausgeben:
<ftui-label [text]="ftuitest:deptime | replace(/(.*)T(.*)\+.*/,'$1 $2:00') | toDate() | format('hh:mm')"></ftui-label>
oder schneidet tatsächlich einfach den relevanten Teil aus:
<ftui-label [text]="ftuitest:deptime | replace(/.*T(.*)\+.*/,'$1')"></ftui-label>
Beide Label-Beispiele zeigen beim Readingwert "2021-03-18T19:31+0100" die Uhrzeit "19:31" an.
Wenn ich das Abfall-Modul unter FTUI 3 nutze, erhalte ich in der Badge-Anzeige der Tage für die "0" ein "!".
Kann mir da einer helfen? Ich glaube das war hier schon mal Thema, finde das aber nicht mehr.
Gruß und schönes Restwochenende
eurofinder
Musst du so mappen...
[text]="myABFALL:PapierPappe240lTonne_days | map('0:`!`')"
@mr_petz:
Danke.
Gruß
eurofinder
Hi OdfFhem
Zitat von: OdfFhem am 21 März 2021, 17:22:48
Jetzt könnte man den Readingwert kompatibel machen und den entsprechenden Teil ausgeben:
<ftui-label [text]="ftuitest:deptime | replace(/(.*)T(.*)\+.*/,'$1 $2:00') | toDate() | format('hh:mm')"></ftui-label>
oder schneidet tatsächlich einfach den relevanten Teil aus:
<ftui-label [text]="ftuitest:deptime | replace(/.*T(.*)\+.*/,'$1')"></ftui-label>
Ja siehste, geht doch mit Regex im label!
Habe ich mir sofort in mein "ftui3-Nicht_vergessen" - Datei abgelegt! Danke!
Gruß
Sailor
Ein herzerfrischendes Moin vom achtern Diek vorweg!
Anbei an alle ftui - Programmierer, die sich Gedanken um die Grid - Aufteilung auf kleineren oder - wie in meinem Fall - gedrehten Monitoren Gedanken Machen müssen:
http://www.infobyip.com/testwebsiteresolution.php (http://www.infobyip.com/testwebsiteresolution.php)
Lokale ftui - Webadresse eingeben, Zielauflösung eingeben und schon hat man eine gute Simulation dessen, was sein wird.
Einzig die Tatsache, dass man ständig den Cache manuell loeschen muss.
F5, CTRL-F5 und Shift-R helfen nur für die index.html aber nicht für die durch <ftui-content file= verlinkten Dateien.
Gruß
Sailor
Moin Moin
Helfen dir die Browser Entwicklertools nicht weiter?
https://blog.kulturbanause.de/2018/03/die-chrome-entwicklertools-devtools-fuer-designer-und-einsteiger/
(https://blog.kulturbanause.de/2018/03/die-chrome-entwicklertools-devtools-fuer-designer-und-einsteiger/)
Grüsse
Oder für diejenigen mit dem Fuchsbrowser:
https://developer.mozilla.org/de/docs/Tools/Responsive_Design_Mode (https://developer.mozilla.org/de/docs/Tools/Responsive_Design_Mode)
Für grid-handling im CSS3 hat mir dies ganz gut geholfen:
https://css-tricks.com/snippets/css/complete-guide-grid (https://css-tricks.com/snippets/css/complete-guide-grid)
Hallo yersinia
Zitat von: yersinia am 23 März 2021, 08:52:13
Oder für diejenigen mit dem Fuchsbrowser:
https://developer.mozilla.org/de/docs/Tools/Responsive_Design_Mode (https://developer.mozilla.org/de/docs/Tools/Responsive_Design_Mode)
Wieder was gelernt!
Danke!
Gruß
Sailor
Moin zusammen
Mal wieder eine Frage...
Um zu verhindern, dass ich 76 mal den gleichen Popup mit unterschiedlichen Parameter im Code kopieren muss meine Frage:
Ist es möglich den Popup mit einem Satz Parameter aufzurufen?
Also so etwas wie
<ftui-image [src] = "OS_DoorBird:HistoryFilePath_doorbell_Image_00" width="180px"
popup-target = "frontdoorcam"
[popup-parameter] = 'Parameter1: Value1, Parameter2: Value2, Parameter3; Value3'>
</ftui-image>
<ftui-popup shape="round" id="frontdoorcam" height="870px" width="1080px">
<header>{{Parameter1}}</header>
<ftui-image [src] ="{{Parameter2}}" height="810px" width="1080px"</ftui-image>
<ftui-label [text]="{{Parameter3}}"></ftui-label
<ftui-button color="danger" popup-close>Close</ftui-button>
</ftui-popup>
Kennt da Jemand die Lösung?
Gruß
Sailor
Müsste das nicht so funktionieren:
<ftui-image [src] = "OS_DoorBird:HistoryFilePath_doorbell_Image_00" width="180px"
popup-target = "frontdoorcam"
parameter1="Value1"
parameter2="Value2"
parameter3="Value3">
</ftui-image>
<ftui-popup shape="round" id="frontdoorcam" height="870px" width="1080px">
<header>{{parameter1}}</header>
<ftui-image [src] ="{{parameter2}}" height="810px" width="1080px"</ftui-image>
<ftui-label [text]="{{parameter3}}"></ftui-label
<ftui-button color="danger" popup-close>Close</ftui-button>
</ftui-popup>
Hi Yersinia
Zitat von: yersinia am 23 März 2021, 16:01:15
Müsste das nicht so funktionieren:
<ftui-image [src] = "OS_DoorBird:HistoryFilePath_doorbell_Image_00" width="180px"
popup-target = "frontdoorcam"
parameter1="Value1"
parameter2="Value2"
parameter3="Value3">
</ftui-image>
<ftui-popup shape="round" id="frontdoorcam" height="870px" width="1080px">
<header>{{parameter1}}</header>
<ftui-image [src] ="{{parameter2}}" height="810px" width="1080px"</ftui-image>
<ftui-label [text]="{{parameter3}}"></ftui-label
<ftui-button color="danger" popup-close>Close</ftui-button>
</ftui-popup>
Nein, leider werden die Parameter nicht übergeben.
Was sagt den setstate dazu?
Gruß
Sailor
Und schon mal eine Frage im voraus, wenn sich das Problem um die Parameter - Übergabe auf die ein oder andere Weise erledigt hat:
Hat schon Jemand Erfahrung mit maps?
Da schon bei ftui v2.x dies ein externes Modul vom user eki ist, vermute ich, dass nur dieser ein entsprechendes ftui3 - Modul bereitstellen kann?
Gruß
Sailor
Zitat von: Sailor am 23 März 2021, 20:26:09Hi Yersinia
Nein, leider werden die Parameter nicht übergeben.
Was sagt den setstate dazu?
Möglicherweise funktioniert das auch aus einem ftui-image in ein ftui-popup nicht. Ich nutze es nur um ftui-content einzubinden.
<ftui-content file="cam.html"
parameter0="OS_DoorBird:HistoryFilePath_doorbell_Image_00"
parameter1="Value1"
parameter2="Value2"
parameter3="Value3">
</ftui-content>und cam.html könnte ich mir so vorstellen:
<ftui-image [src] = "{{parameter0}}" width="180px"
popup-target = "frontdoorcam">
</ftui-image>
<ftui-popup shape="round" id="frontdoorcam" height="870px" width="1080px">
<header>{{parameter1}}</header>
<ftui-image [src] ="{{parameter2}}" height="810px" width="1080px"</ftui-image>
<ftui-label [text]="{{parameter3}}"></ftui-label
<ftui-button color="danger" popup-close>Close</ftui-button>
</ftui-popup>
Hallo Yersinia
Zitat von: yersinia am 24 März 2021, 08:41:15
Möglicherweise funktioniert das auch aus einem ftui-image in ein ftui-popup nicht. Ich nutze es nur um ftui-content einzubinden.
Du bist Spitze!
Dein Code klappt am Anfang gut, aber wenn man dann ein Popup aufmache, dann öffnen sich alle 60 weil alle den gleichen Popup-Namen tragen... ;D
Aber dieser Code klappt:
<table>
<tr>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_doorbell_Image_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_doorbell_Video_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_motionsensor_Image_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_motionsensor_Video_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_snapshot_Image_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_manual_Video_00"> </ftui-content></td>
</tr>
</table>
content/home/content_home_historyevent.html:
<ftui-image [src] = "{{DbImageUrl}}" width="110px"
popup-target = "{{DbImageUrl}}">
</ftui-image>
<ftui-popup shape="round" id="{{DbImageUrl}}" height="900px" width="1000px">
<header>Timestamp of historical event: <ftui-label [text]="{{DbImageUrl}}_Timestamp"></ftui-label></header>
<ftui-image [src] ="{{DbImageUrl}}" width="990px"></ftui-image>
</ftui-popup>
Der Trick: Man muss die ID auch individuell gestalten. In diesem Fall ist der Übergabeparameter für die Datei gleichzeitig die ID für das Popup!
Nur die Videos werden nicht mit <ftui-Images> angezeigt... Daran arbeite ich noch (mit eurer Hilfe?)
Der html- tag <video> funktioniert nicht mit {{DbImageUrl}}, Der auskommentierte Link darüber schon wie gewuencht
<video width="110" controls>
<!-- <source src="../doorbird/20210324-102602_motionsensor.mp4"> -->
<source src="{{DbImageUrl}}">
Your browser does not support the video tag.
</video> Gruß
Sailor
Ja, die id sollte eindeutig sein. ;)
Anstatt die ganze Url mitzugeben, könntest du dies auch kürzen weil der prefix/device:reading immer gleich (
OS_DoorBird:HistoryFilePath_) zu sein scheint.
<table>
<tr>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "doorbell_Image_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "doorbell_Video_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "motionsensor_Image_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "motionsensor_Video_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "snapshot_Image_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/home/content_home_historyevent.html" DbImageUrl = "manual_Video_00"> </ftui-content></td>
</tr>
</table>
Die HTML dann entsprechend:
<ftui-image [src] = "OS_DoorBird:HistoryFilePath_{{DbImageUrl}}" width="110px"
popup-target = "{{DbImageUrl}}">
</ftui-image>
<ftui-popup shape="round" id="{{DbImageUrl}}" height="900px" width="1000px">
<header>Timestamp of historical event: <ftui-label [text]="OS_DoorBird:HistoryFilePath_{{DbImageUrl}}_Timestamp"></ftui-label></header>
<ftui-image [src] ="OS_DoorBird:HistoryFilePath_{{DbImageUrl}}" width="990px"></ftui-image>
</ftui-popup>
Zitat von: Sailor am 24 März 2021, 11:35:49Nur die Videos werden nicht mit <ftui-Images> angezeigt... Daran arbeite ich noch (mit eurer Hilfe?)
Welches format liefert die Kamera? Ein jpg?
Ob ftui-image für einen stream geeignet ist, kann ich dir nicht beantworten (@setstate?). Aber es gibt die Option das Bild automatisch zu refreshen:
<ftui-image [src] ="OS_DoorBird:HistoryFilePath_{{DbImageUrl}}" width="990px" interval="300" nocache></ftui-image>https://knowthelist.github.io/ftui/www/ftui/examples/image.html (https://knowthelist.github.io/ftui/www/ftui/examples/image.html)
Hallo Yersinia
Zitat von: yersinia am 24 März 2021, 12:12:58
Ja, die id sollte eindeutig sein. ;)
Anstatt die ganze Url mitzugeben, könntest du dies auch kürzen weil der prefix/device:reading immer gleich (OS_DoorBird:HistoryFilePath_) zu sein scheint.
Das könnte man in der Tat vereinfachen...
Zitat von: yersinia am 24 März 2021, 12:12:58
Welches format liefert die Kamera? Ein jpg?
Ob ftui-image für einen stream geeignet ist, kann ich dir nicht beantworten (@setstate?). Aber es gibt die Option das Bild automatisch zu refreshen:
<ftui-image [src] ="OS_DoorBird:HistoryFilePath_{{DbImageUrl}}" width="990px" interval="300" nocache></ftui-image>
https://knowthelist.github.io/ftui/www/ftui/examples/image.html (https://knowthelist.github.io/ftui/www/ftui/examples/image.html)
Das habe ich so versucht und es kommt nur ein "Image not available" angezeigt.
Und wie ich oben schon nachgetragen habe (nachdem du geschrieben hast) funktioniert das <video>-tag nicht mit den {{DbImageUrl}} - Parameter zusammen.
Gruß
Sailor
Möglicherweise lädt dann ftui-image auch keine mp4 streams, ist ja auch kein Bild.
Zitat von: Sailor am 24 März 2021, 12:17:03Und wie ich oben schon nachgetragen habe (nachdem du geschrieben hast) funktioniert das <video>-tag nicht mit den {{DbImageUrl}} - Parameter zusammen.
Eventuell hilft dir ftui-binding wieder
<video width="110" controls>
<!-- <source src="../doorbird/20210324-102602_motionsensor.mp4"> -->
<source ftui-binding="src" [src]="{{DbImageUrl}}">
Your browser does not support the video tag.
</video> Dazu müsstest du aber DbImageUrl auch entsprechend korrigieren, wenn die URL entsprechend gekürzt ist.
Hallo Yersinia
Zitat von: yersinia am 24 März 2021, 12:21:23
Eventuell hilft dir ftui-binding wieder
<video width="110" controls>
<!-- <source src="../doorbird/20210324-102602_motionsensor.mp4"> -->
<source ftui-binding="src" [src]="{{DbImageUrl}}">
Your browser does not support the video tag.
</video>
Jau, das hat immerhin geklappt, dass jetzt keine Fehlermeldung mehr kommt und der Verwies auf die richtige Datei da ist.
Jetzt muss der Player nur noch die blöde Datei abspielen... :-\
Aber das ist was fürs html - Forum... Ich berichte
Aber irgendwas ist immer!
(Woher weisst du das bloss alles? ;))
Gruß
Sailor
Zitat von: Sailor am 24 März 2021, 12:40:51Jetzt muss der Player nur noch die blöde Datei abspielen... :-\
Aber das ist was fürs html - Forum... Ich berichte
https://www.w3schools.com/tags/att_video_autoplay.asp (https://www.w3schools.com/tags/att_video_autoplay.asp)
<video width="110" controls autoplay>
<!-- <source src="../doorbird/20210324-102602_motionsensor.mp4"> -->
<source ftui-binding="src" [src]="{{DbImageUrl}}">
Your browser does not support the video tag.
</video>
video.js schon probiert?
So geht es bei mir mit Netatmo
<video id="my-video1" class="video-js" controls preload="auto" style="width: 100%; height: 100%"
poster="http://192.168.X.Xlive/snapshot_720.jpg" data-setup="{}">
<source src="http://192.168.X.X/live/files/medium/index.m3u8" type='application/x-mpegURL'>
</video>
Du müßtest den mime type ändern.
Gruß
Eisix
Zitat von: Eisix am 24 März 2021, 13:21:12video.js schon probiert?
Wo gibbets die bei ftui3?
garnicht ;)
muss man extra dazu packen.
Gruß
Eisix
Zitat von: Eisix am 24 März 2021, 13:30:57garnicht ;)
muss man extra dazu packen.
Und bekommt man woher? ;)
EDIT
https://videojs.com (https://videojs.com/)?
https://videojs.com/getting-started (https://videojs.com/getting-started)
Mit .mp4 Beispiel.
Gruß
Eisix
Zitat von: yersinia am 24 März 2021, 12:44:25
https://www.w3schools.com/tags/att_video_autoplay.asp (https://www.w3schools.com/tags/att_video_autoplay.asp)
<video width="110" controls autoplay>
<!-- <source src="../doorbird/20210324-102602_motionsensor.mp4"> -->
<source ftui-binding="src" [src]="{{DbImageUrl}}">
Your browser does not support the video tag.
</video>
Naja, da scheint immer noch nicht was mit der Uebergabe durch ftui-binding zu funktionieren...
Wenn ich naemlich
<source src="../doorbird/20210324-102602_motionsensor.mp4"> direkt eingebe, funktioniert das Abspielen nämlich...
Gruß
Sailor
Hallo,
nutze verschieden Tablets zum anzeigen und wollte wenn möglich den gleichen html code nutzen. Mit viewport komme ich zu keiner vernünftigen Lösung. Also habe ich etwas experimentiert.
index.html
<body>
<ftui-grid base-width="1%" base-height="1%" margin="1">
<ftui-grid-tile row="1" col="1" width="7" style="height: 100%;left: 1px;top: 1px;">
<ftui-column>
<ftui-tab view="Main" active><ftui-icon class="size-2" name="home1"></ftui-icon></ftui-tab>
....
<ftui-tab-view id="Main" height="100" width="100">
<ftui-grid-tile row="1" col="8" height="100" width="93" class="">
<ftui-content file="1_Main.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
1_Main.html
<ftui-grid base-width="1%" base-height="1%" margin="1" class="">
<ftui-grid-tile row="100" col="1" height="1" width="100" class="">
</ftui-grid-tile>
<ftui-grid-tile row="1" col="100" height="100" width="1" class="">
</ftui-grid-tile>
<ftui-grid-tile row="1" col="1" height="25" width="24" class="">
<header>Zuhause</header>
<ftui-content file="templates/Homestatus.html"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="26" col="1" height="13" width="24" class="">
<header>Abfall</header>
<ftui-content file="templates/Abfall.html"></ftui-content>
</ftui-grid-tile>
....
Also ist das Grid 1%.
Die beiden ftui-grid-tile sind nötig sonst passt das Layout nicht.
<ftui-grid-tile row="100" col="1" height="1" width="100" class="">
</ftui-grid-tile>
<ftui-grid-tile row="1" col="100" height="100" width="1" class="">
</ftui-grid-tile>
Generell funktioniert es, aber da gibt es doch bestimmt einen eleganteren Weg, oder?
Gruß
Eisix
Bezgl grid kann ich https://css-tricks.com/snippets/css/complete-guide-grid (https://css-tricks.com/snippets/css/complete-guide-grid/) als Einstieg empfehlen - insbesondere der untere Teil bezgl grid auto flow (https://css-tricks.com/snippets/css/complete-guide-grid/#grid-auto-flow).
Aus SirMarcos Post (https://forum.fhem.de/index.php/topic,115259.msg1142342.html#msg1142342) heraus habe ich auch clamp() (https://blog.kulturbanause.de/2021/03/min-max-und-clamp-drei-css-funktionen-fuer-dynamischere-websites/) gefunden.
Vielleicht hilft dir das, fixe (menu, header, footer; zusammen mit clamp) und flexible grid-items (content) für die verschiedenen displaygrößen anzugeben (siehe auch [1] (https://blog.kulturbanause.de/2018/07/css-grid-auto-fill-responsive-layouts-ohne-media-queries/) oder [2] (https://blog.kulturbanause.de/2013/12/css-grid-layout-module/)). Dies würde dann aber derzeit stark außerhalb von dem ftui3 standard rauslaufen.
@setstate
Hi, ich weiss nicht ob die Frage schon kam.
Wäre es möglich das du wieder das 'ftui.getGradientColor' wie im thermostat widget mit ins knob Modul rein nimmst?
(siehe Bild)
Also wieder min- und maxcolor?
Das finde ich optisch besser ;).
Ich habe es ohne Erfolg versucht.
Danke und Gruß
Thomas
Moin zusammen
Wo wir mal gerade beim Thema sind...
Ich habe mir folgenden Knob gebaut:
<ftui-knob [(value)] = "{{RoomPrefix}}_Thermostat_Climate:desired-temp"
type = "scale"
min = "5"
max = "30"
unit = "°C"
has-value-text>
</ftui-knob>
und versuchsweise auch diesen
<ftui-knob [value] = "{{RoomPrefix}}_Thermostat_Climate:desired-temp"
(value) = "set {{RoomPrefix}}_Thermostat_Climate desired-temp"
type = "scale"
min = "5"
max = "30"
unit = "°C"
has-value-text>
</ftui-knob>
Bei beiden habe ich das Phänomen, dass ich die Temperatur 2 mal einstellen kann und danach nicht mehr.
Erst nach einem F5 kann ich wieder für 2 mal die Temperatur einstellen.
Das erkenne ich an der Toast - Meldung unten, die nach 2 Einstellungen nicht mehr kommt und an dem Reading "{{RoomPrefix}}_Thermostat_Climate:desired-temp"
Könnt Ihr das Verhalten reproduzieren?
Gruß
Sailor
Zitat von: Sailor am 25 März 2021, 11:05:25
....
Könnt Ihr das Verhalten reproduzieren?
Gruß
Sailor
Ja. War schon hier Thema. Du musst einzeln tippen dann geht es immer. Also nicht "sliden"...
Beim Slider ist es bei mir genauso.
Es gab aber noch kein Statement von setstate.
Hat er vielleicht auch überlesen.
Zitat von: mr_petz am 25 März 2021, 13:10:49
Ja. War schon hier Thema. Du musst einzeln tippen dann geht es immer. Also nicht "sliden"...
Beim Slider ist es bei mir genauso.
Es gab aber noch kein Statement von setstate.
Hat er vielleicht auch überlesen.
Das tippen hilft auch nichts. Nach 2 mal tippen ists auch vorbei.
Dies betrifft Slider and Knob gleichermassen.
Also der Bug steht auf meiner Wunschliste "To-be-fixed" ganz oben...
Gruß
Sailor
Bei den buttons https://knowthelist.github.io/ftui/www/ftui/examples/button.html (https://knowthelist.github.io/ftui/www/ftui/examples/button.html) gibt es nur primary, der während des eigentlich Drückens die Farbe wechselt. Die anderen tun das nicht. Kann man das irgendwie bei den anderen dennoch einstellen?
Hallo Andies
Zitat von: andies am 25 März 2021, 18:40:08
Bei den buttons https://knowthelist.github.io/ftui/www/ftui/examples/button.html (https://knowthelist.github.io/ftui/www/ftui/examples/button.html) gibt es nur primary, der während des eigentlich Drückens die Farbe wechselt. Die anderen tun das nicht. Kann man das irgendwie bei den anderen dennoch einstellen?
Ich weiß nicht genau was du meinst, aber ich beeinflusse sowohl das Verhalten der Buttons als auch das der darin enthaltenen Icons wie folgt:
<ftui-button shape = "circle"
[(value)] = "FhemDevice:Reading"
[fill] = "FhemDevice:Reading | map('off: outline, on: solid ')"
[class-name] = "FhemDevice:Reading | map('off: size-3, on: size-3 blink ')"
states = "off, on">
<ftui-icon [name] = "FhemDevice:Reading | map('off: lightbulb_dim-000, on: lightbulb_dim-100 ')"
[color] = "FhemDevice:Reading | map('off: dark, on: light ')"
class = "size-2">
</ftui-icon>
</ftui-button>
Gruß
Sailor
Hallo setstate,
Zitat von: setstate am 26 November 2020, 14:38:45
ja
<ftui-icon name="exclamation-triangle"
[hidden]="ftuitest | map('on:false, off:true')">
</ftui-icon>
Das ist schon mal die halbe Miete von dem was ich Suche.
Wie muss ich die Zeile um [hidden] abändern, damit der Wert true ist, wenn das Device bzw. das Reading nicht existiert?
Quasi das Button / Icon verschwinden lassen wenn "ftuitest" nicht existiert.
Gruß
Sailor
Zitat von: Sailor am 25 März 2021, 19:12:20
Ich weiß nicht genau was du meinst, aber ich beeinflusse sowohl das Verhalten der Buttons als auch das der darin enthaltenen Icons wie folgt:
Das passt schon mal fast. Es gibt beim Drücken ja drei Zustände:
- Ich gehe mit der Maus über den Button (keine Veränderung der Icons)
- Ich drücke die Maustaste nieder (keine Veränderung der Icons)
- Ich lasse die Maustaste los (Veränderung der Icons)
Ich hätte gern im zweiten Schritt bereits eine Farbänderung. Wenn man ausschaltet, kommt die auch: Da blitzt der Buttons grün auf. Aber nicht beim einschalten.
Moin moin,
ich hab da mal eine Frage wegen Popup. In den examples werden die alle über ftui-icons aufgerufen, ich würde das aber gern über ftui-label oder ganz und gar über ftui-grid-tile machen (ich habe eine kleine Kachel mit nur Text). Unterstützt derzeit wirklich nur ftui-icon das popup-target?
Danke
Piccer
Zitat von: piccer am 26 März 2021, 11:35:35
Moin moin,
ich hab da mal eine Frage wegen Popup. In den examples werden die alle über ftui-icons aufgerufen, ich würde das aber gern über ftui-label oder ganz und gar über ftui-grid-tile machen (ich habe eine kleine Kachel mit nur Text). Unterstützt derzeit wirklich nur ftui-icon das popup-target?
Danke
Piccer
Hi, du kannst auch über ftui-image, ftui-button oder per [hidden] das popup erscheinen lassen...
Es muss halt das target angegeben sein..
popup-target="id"Gruß Thomas
Edit: geht auch mit ftui-label
Zitat von: mr_petz am 26 März 2021, 12:15:14
Hi, du kannst auch über ftui-image, ftui-button oder per [hidden] das popup erscheinen lassen...
Es muss halt das target angegeben sein..
popup-target="id"
Gruß Thomas
Danke. Ich habe eine Kachel, die mit labels gefüllt ist. Ich möchte, dass ein Klick auf die gesamte Kachel ein Popup öffnet. Taget ist ja klar. Ich habe versucht, den kompletten Inhalt in ein Icon zu verschachteln (halt ohne [name], weil ich ja nicht wirklich ein Icon da haben möchte. Funktioniert aber leider nicht. Auch mit button fünktioniert das nicht (schätze der Inhalt mit ftui-row / ftui-label mit [text] usw. schmeckt ftui-button und ftui-icon nicht...
Gerade getestet.
Muss gehen. poste mal deinen code.
Es geht auch im header, grid-tile oder ftui-tab...
bsp:
<ftui-label class="size-1" popup-target="1">Home</ftui-label>
<ftui-popup id="1" width="40%" height="40%" timeout="15" shape="round">
<header><ftui-label class="size-1">Home</ftui-label></header>
</ftui-popup>
<ftui-grid-tile row="5" col="6" height="1" width="1" [hidden]="popup-target='strompopup'">
<header>Strom</header>
<ftui-icon popup-target="strompopup">
<ftui-column>
<ftui-row>
Solar:<ftui-label [text]="Fronius:Body_Data_Inverters_1_P"><ftui-label>
</ftui-row>
<ftui-row>
Verbrauch:<ftui-label [text]="Fronius:Verbrauch"><ftui-label>
</ftui-row>
<ftui-row>
Bezug:<ftui-label [text]="Fronius:Body_Data_Site_P_Grid"><ftui-label>
</ftui-row>
</ftui-column>
</ftui-icon>
</ftui-grid-tile>
und das Popup:
<ftui-popup id="strompopup" width="80%" height="80%">
<header>Strom</header>
<ftui-column>
Noch zu machen....
<ftui-button popup-close>Close</ftui-button>
</ftui-column>
</ftui-popup>
Das Popup funktioniert, wenn ich es normal über das icon / button aufrufe, aber sobald ich den code oben rein verschachtele, geht es nicht mehr.
habs jetzt auch so probiert:
<ftui-grid-tile row="5" col="6" height="1" width="1" popup-target="strompopup">
<header>Strom</header>
<ftui-column>
<ftui-row>
Solar:<ftui-label [text]="Fronius:Body_Data_Inverters_1_P"><ftui-label>
</ftui-row>
<ftui-row>
Verbrauch:<ftui-label [text]="Fronius:Verbrauch"><ftui-label>
</ftui-row>
<ftui-row>
Bezug:<ftui-label [text]="Fronius:Body_Data_Site_P_Grid"><ftui-label>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
Geht auch nicht.
<ftui-grid-tile row="5" col="6" height="2" width="2">
<header popup-target="strompopup">Strom</header>
<ftui-column popup-target="strompopup">
<ftui-row popup-target="strompopup">
Solar:<ftui-label [text]="Fronius:Body_Data_Inverters_1_P"><ftui-label>
</ftui-row>
<ftui-row popup-target="strompopup">
Verbrauch:<ftui-label [text]="Fronius:Verbrauch"><ftui-label>
</ftui-row>
<ftui-row popup-target="strompopup">
Bezug:<ftui-label [text]="Fronius:Body_Data_Site_P_Grid"><ftui-label>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
so geht es bei mir
Zitat von: mr_petz am 26 März 2021, 13:13:54
<ftui-grid-tile row="5" col="6" height="2" width="2">
<header popup-target="strompopup">Strom</header>
<ftui-column popup-target="strompopup">
<ftui-row popup-target="strompopup">
Solar:<ftui-label [text]="Fronius:Body_Data_Inverters_1_P"><ftui-label>
</ftui-row>
<ftui-row popup-target="strompopup">
Verbrauch:<ftui-label [text]="Fronius:Verbrauch"><ftui-label>
</ftui-row>
<ftui-row popup-target="strompopup">
Bezug:<ftui-label [text]="Fronius:Body_Data_Site_P_Grid"><ftui-label>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
so geht es bei mir
Stimmt, so geht es. Nach meinem Verständnis hätte es aber auch nur in ftui-column reichen sollen, scheinbar hebt das anschließende row das wieder auf....
Danke, so kann ich es erstmal lassen. :)
@all
wer "diese" Probleme mit dem knob und slider hat bzgl. "Einfrieren" kann auch noch mit dem
debounce="1000"
experimentieren.
Das ist die Wartezeit/Entprellzeit bis ein "set" gesendet wird.
Ich denke das es mit Standard "200"ms zu kurz ist, weil es wird ja immer auch gleich das Reading wieder abfragt und da kommt es vielleicht zum durcheinander und zum Einfrieren...
Sprich es gibt aller 200ms ein set und read beim "sliden".
Wurde natürlich bedeuten, dass es länger dauert bis die Aktion ausgeführt wird....
Ich teste es auch noch zu Hause.
Gruß Thomas
Moin,
ich bastele auch gerade etwas rum.
Mein UI 2 gefällt mir recht gut und ist seit langem im Einsatz. Leider ist es recht lahm und ich hoffe, dass es mit UI 3 besser wird.
Jedoch fehlt mir eine Kleinigkeit beim Knob-Widget.
Ich bräuchte eine value in 0,5 er Schritten für meine Heizung da Ganzzahlen nicht akzeptiert werden.
19.0 19.5 20.0 20.5 usw.
Sobald ich mit decimal arbeite bekomme ich leider auch 19.2 usw. und die FHEM springt auf NaN.
Ist mein Vorhaben möglich?
Mit freundlichen Grüßen
Hi Thomas
Zitat von: mr_petz am 26 März 2021, 16:57:28
wer "diese" Probleme mit dem knob und slider hat bzgl. "Einfrieren" kann auch noch mit dem
debounce="1000"
experimentieren.
Das löst zwar das Problem, dass der neue Wert nicht zu früh gesendet wird sondern erst wenn man ihn sicher eingestellt hat, aber nicht das Einfrieren nach 1 bis 2 Einstellungen...
Der Bug besteht nach wie vor...
Gruß
Sailor
Moin zusammen
Nebenbei gefragt: Wie kann ich aus einem
<ftui-label [text] = "OS_Hydrawise:rl1_run_minutes"
[hidden] = "OS_Hydrawise:rl1_run_minutes | map('none: true, .*: false')"
unit = " min"
class = "size-2">
</ftui-label>
Aus den 4,67777777777 eine 5 machen?
Quasi aufrunden.
Bin unfähig (zu müde) um das in den Examples zu finden.
Danke
Gruß
Sailor
<ftui-label [text]="AgroWeather:state | round(1) "></ftui-label>
So
MfG
Zitat von: Shadow3561 am 26 März 2021, 20:53:38
<ftui-label [text]="AgroWeather:state | round(1) "></ftui-label>
Outsch... :-\
Danke!
Gruß
Sailor
@Sailor
Benutzt du das SonosModul und stellst mit dem ftui-slider die Lautstärke ein?
Ich ja und habe auch dieses "set" Problem.
Ich habe jetzt mal testhalber die Bananen aus der Box geholt und die Box "entsorgt" ;).
Also so:
<ftui-slider
(value)="Sonos_Kueche:Volume"
[color]="Sonos_Kueche:Volume | map('0:green, 30:blue, 50:yellow, 70:red')"
step="5"
min="0" max="100" tick="5" wide-tick="10" handle="" has-ruler has-wide-ticks>
</ftui-slider>
Da gibt es zwar kein "get", aber so kann man machen was man will und es funktioniert.
Es wird halt kein Status zurück gegeben. Nur das Value gesetzt.
Ich denke dass durch das setzen und lesen vom Volume es zu diesen Bug kommt...
Ich konnte beim sliden/tippen beobachten, dass irgendwann der slider kurz zum letzen Wert springt und dann wieder zum neu gesetzten. Danach ging nichts mehr zu setzen...
@setstate
Woran könnte es liegen. An fhem oder sonosmodul oder was auch immer???
Was könnten wir noch testen bzw einstellen?
Gruß Thomas
ps.:
Wir dürfen hier nicht vergessen, dass das ganze ftui3 "noch" im Betastatus ist und setstate hier viel Zeit "opfert".
Ich denke man sollte nicht immer gleich losfragen wie was geht, sondern konstruktiv hier mitwirken und sich einbringen...
Wie zum Beispiel bei einem "Fehler" in der Darstellung. Erstmal testen/probieren/nachlesen ob man das selber beheben kann...
Paar Fragen musste ich am Anfang auch stellen ::),aber wenn man sich mit der Thematik bissl auseinandersetzt kommt man auch alleine auf viele settings...
Ich hoffe ich bin niemanden zu nahe getreten... ???
Sorry musste ich mal loswerden...
Zitat von: grossmaggul am 26 November 2020, 10:28:46
Vielleicht kann es ja jemand gebrauchen, mein Machwerk einer Windrose:
Das konnte ich gebrauchen.
Jetzt muss ich nur noch herausfinden, wie ich verhindere, dass ich per Mausklick die Windrichtung verändere...
Das gibt sonst Ärger mit dem DWD ;D
Gruß
Sailor
Versuch es mal mit "readonly"
<ftui-knob [value]="proplanta:windDir" min="0" max="360" width="110" height="80" start-angle="-90" end-angle="270" stroke-width="4" offset-y="0" has-needle has-scale readonly>
Hallöchen.
Hat schon mal jemand ein circlemenu in Verbindung mit tabs verwendet?
Etwa so?
<ftui-circlemenu direction="vertical">
<ftui-tab view="View1" active>
<ftui-icon name="home1" class="size-3"></ftui-icon>
</ftui-tab>
<ftui-tab view="View2">
<ftui-icon name="lightbulb" class="size-3"></ftui-icon>
</ftui-tab>
</ftui-circlemenu>
Wäre echt cool, wenn das gehen würde. Die Umschaltung der tab-view geht sogar, aber es müsste noch der Tab\Button der Selektion im Circlemenu (Zentrum) sich wechseln.
Noch eine allgemeine Frage zum Layout. Was ist die empfohlene Methode (geht es überhaupt) mit unterschiedlichen Auflösungen umzugehen. Habe auf den aktuell 78 Seiten nichts passendes gefunden.
base-width und base-height in % anzugeben ist es wohl nicht.
Danke.
ZitatWas ist die empfohlene Methode (geht es überhaupt) mit unterschiedlichen Auflösungen umzugehen.
Vielleicht mit <ftui-grid responsive>
Hallo.
Stehe bei der map etwas auf dem Schlauch.
[text]="test:state | map('0:Heute, 1:Morgen')"
Möchte nur, dass 0 und 1 ersetzt wird. Sonst soll text den Inhalt des Readings annehmen.
Funktioniert so leider nur nicht und ich verstehe nicht warum. Ist sicher nur eine Kleinigkeit.
Danke.
@Risiko
Dein Mapping entspricht einer numerischen Interpetation (als Vergleichsgröße):
- ab 0 den Wert Heute einsetzen
- ab 1 den Wert Morgen einsetzen
`0` bzw. `1` sorgt für eine rein textuelle Interpretation:
- aus 0 wird Heute
- aus 1 wird Morgen
Danke.
Funktioniert aber auch nicht wie erwartet. Die Ersetzungen funktionieren, aber wenn im Reading was anderes steht, bleibt es bei "Morgen" und nicht der Wert aus dem Reading wird genommen
map('0:Heute, 1:Morgen, .*:')
So in etwa.
Mfg
Zitat von: Risiko am 28 März 2021, 19:48:56
Hallöchen.
Hat schon mal jemand ein circlemenu in Verbindung mit tabs verwendet?
Etwa so?
<ftui-circlemenu direction="vertical">
<ftui-tab view="View1" active>
<ftui-icon name="home1" class="size-3"></ftui-icon>
</ftui-tab>
<ftui-tab view="View2">
<ftui-icon name="lightbulb" class="size-3"></ftui-icon>
</ftui-tab>
</ftui-circlemenu>
Wäre echt cool, wenn das gehen würde. Die Umschaltung der tab-view geht sogar, aber es müsste noch der Tab\Button der Selektion im Circlemenu (Zentrum) sich wechseln.
Noch eine allgemeine Frage zum Layout. Was ist die empfohlene Methode (geht es überhaupt) mit unterschiedlichen Auflösungen umzugehen. Habe auf den aktuell 78 Seiten nichts passendes gefunden.
base-width und base-height in % anzugeben ist es wohl nicht.
Danke.
Hallo,
bei diesem circlemenue ändert sich das zentrale Icon. Du brauchst dann aber ein Device/Dummy.
<ftui-circlemenu direction="top-half">
<ftui-icon class="size-3"
path="../images/openautomation"
[name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_manual_m, off:power-off')"
[color]="Luefter:state | map('auto:mygreen, man:mygreen, off:mygreen')"
></ftui-icon>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
<ftui-icon name="power-off" color="mygreen"></ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
<ftui-icon class="size-5" color="mygreen">1</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 2">
<ftui-icon class="size-5" color="mygreen">2</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
<ftui-icon class="size-5" color="mygreen">3</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
<ftui-icon class="size-5" color="mygreen">4</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
<ftui-icon class="size-2"
path="../images/openautomation"
name="vent_ventilation_level_automatic"
color="mygreen"
></ftui-icon>
</ftui-button>
</ftui-circlemenu>
Zu deiner responsive design Frage hatte ich schon mal eine nicht wirklich elegante aber funktionierende Lösung
https://forum.fhem.de/index.php/topic,115259.msg1142782.html#msg1142782 (https://forum.fhem.de/index.php/topic,115259.msg1142782.html#msg1142782)
Gruß
Eisix
Hallo grossmaggul
Zitat von: grossmaggul am 27 März 2021, 19:49:31
Versuch es mal mit "readonly"
Funzt, Danke!
Gruß
Sailor
Zitat von: Eisix am 29 März 2021, 09:16:36
Hallo,
bei diesem circlemenue ändert sich das zentrale Icon. Du brauchst dann aber ein Device/Dummy.
Danke. Prinzip verstanden.
Das wegblenden des doppelten Icons kann man ja auch noch einbauen ;)
Zitat von: Shadow3561 am 29 März 2021, 08:17:38
map('0:Heute, 1:Morgen, .*:')
Hatte ich auch schon versucht. Geht nicht. .*: ersetzt alles zu nichts.
Hab es jetzt auf FHEM-Seite in perl gelöst ;)
@Risiko:
ZitatHab es jetzt auf FHEM-Seite in perl gelöst
Würdest du uns an deiner Lösung teilhaben lassen?
Gruß
eurofinder
Hallo zusammen.
Bisher hatte ich mit der früheren FTUI-Version versucht, ein Colorwheel mit einem LED RGBW-Modul mit Tasmota zu verheiraten. Wollte mir nicht gelingen.
Nun bin ich probeweise mit FTUI3 gestartet, was sofort geklappt. Es funktioniert in beide Richtungen. Die Einfachheit gefällt mir sehr 8)
Kleiner Wermutstropfen: ich erhalte bei Farbauswahl im Colorwheel immer frische Toasts serviert, dass er meine Auswahl nicht schön findet.
iro.min.js:1
Error: Invalid hex string
Testweise eingebaut habe ich das so:
<ftui-grid-tile row="1" col="4" height="5" width="3">
<header>Farbauswahl</header>
<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | part(6)" (hex)="replace('#','') | part(6) | MQTT2_RGBW02:Color"></ftui-colorpicker>
</ftui-grid-tile>
Im Device steht im Reading Color alles hintereinander drin: RRGGBBWW, weshalb ich WW mit part(6) abschneide.
READINGS:
2021-03-30 07:56:58 Color 81F51400
2021-03-30 07:56:58 Fade off
2021-03-30 07:56:53 FallbackTopic cmnd/RGBW02_fb/
2021-02-25 15:39:10 Free 112
2021-03-30 07:56:53 GroupTopic cmnd/tasmotas/
2021-03-30 07:56:58 Heap 29
2021-03-30 07:56:53 Hostname RGBW_02
...
2021-03-30 07:56:53 LWT Online
2021-03-30 07:56:58 LedTable on
2021-02-25 15:39:10 Length 399
2021-03-30 07:56:58 LoadAvg 99
2021-03-30 07:56:53 Module Generic
2021-03-30 07:56:58 MqttCount 1
2021-02-25 15:39:10 Once off
2021-03-30 07:56:53 RestartReason Hardware Watchdog
2021-02-25 15:39:09 Rule1 on
2021-02-25 15:39:10 Rule2 on
2021-02-25 15:39:10 Rule3 on
2021-02-25 15:39:10 Rules On IrReceived#Data=0x00FFB04F Do Power 1 EndOn On IrReceived#Data=0x00FFA857 Do Color2 12 EndOn On IrReceived#Data=0x00FFB24D Do Backlog Power 0; WakeupDuration 1; Dimmer 100; Wakeup EndOn On IrReceived#Data=0x00FF00FF Do Backlog Power 0; WakeupDuration 5; Wakeup EndOn On IrReceived#Data=0x00FF58A7 Do Backlog Scheme 2; Speed 1 EndOn On IrReceived#Data=0x00FF30CF Do Backlog Scheme 3; Speed 5 EndOn
2021-02-25 15:37:39 SaveData on
2021-03-30 07:56:58 Scheme 0
2021-02-25 15:37:39 SetOption26 on
2021-03-30 07:56:58 Sleep 10
2021-03-30 07:56:58 SleepMode Dynamic
2021-03-30 07:56:58 Speed 5
2021-02-25 15:37:38 StateText1 off
2021-02-25 15:37:38 StateText2 on
2021-02-25 15:37:38 StateText3 toggle
2021-02-25 15:37:39 StateText4 hold
...
2021-03-30 07:56:53 Version 9.3.1(tasmota)
2021-03-30 07:56:53 WebServerMode Admin
2021-03-30 07:56:58 White 0
...
2021-02-25 15:37:38 attrTemplateVersion 20200522 or prior
2021-03-30 07:56:58 pct 96
2021-03-30 07:50:16 saturation 92
2021-03-30 07:56:53 state on
2021-03-25 07:46:48 subscriptions cmnd/RGBW02_fb/# cmnd/tasmota_RGBW02/# cmnd/tasmotas/#
2021-03-30 07:56:58 white 0
Ob ich replace oder part rein/raus lasse macht am Toast keinen Unterschied. Ist die Meldung dem frühen Stadium geschuldet oder muss ich das anders machen?
Vorschlag:
Falls als sinnvoll erachtet, könnten vielleicht im HTML zwei Attribute für ftui-colorpicker eingeführt werden: "has-warmwhite" und "has-coldwhite". Ist eines gesetzt, könnte ein Reading wie z.B. "Color" um hinten zwei Stellen gekürzt werden und wären beide gesetzt, um hinten vier. Dann bliebe es im HTML á la KISS und man müsste nicht mit part() was machen.
Denkbar wäre dann auch die Ergänzung von "has-red-slider has-green-slider has-blue-slider" um "has-ww-slider has-cw-slider", was das Steuern mit einem Widget sehr simpel machen würde.
Vielen Dank und beste Grüße
rob
Ich denke, die Fehlermeldung ist richtig, Dein Hex String hat einen Fehler.
Wenn ich mich recht erinnere funktioniert part() nicht so, mit part() kannst Du Teile ansprechen, die in einer Liste stehen.
Z.B.
Zitatstat_cpu_text user: 2.75 %, nice: 0.02 %, sys: 1.34 %, idle: 94.77 %, io: 1.08 %, irq: 0.00 %, sirq: 0.03 %
Da würde part(2) z.B. 2,75 ausgeben, part(4) 0,02 usw.
In Deinem Fall gehe ich davon aus, daß part(6) gar nicht ausgewertet wird und der komplette RGBW Wert übergeben wird, daher die Fehlermeldung, weil er 2 Stellen zuviel hat.
Ob es da eine Möglichkeit gibt die zwei letzten Stellen des RBGW Wertes abzuschneiden, weiß ich gerade nicht.
Man möge mich korrigieren, wenn ich falsch liege.
Ok. Ich hatte part() als eine Art Substring-Operation verstanden. Aber anscheinend arbeitet es eher wie bei einem Array-Zugriff.
Dank Dir. Das erklärt auch, warum es keinen Unterschied macht, ob part() drin oder draußen ist :)
VG
rob
@rob
Mit replace kann man gezielt mit regulären Ausdrücken festlegen, was übernommen werden soll.
Beispiel aus dem Gedächtnis - also ungetestet: Folgendes übernimmt alles
replace(/(.*)/,'$1')
Sehr nice. Hab das gleich mal an einem unschuldigen Label getestet:
<ftui-label [text]="MQTT2_RGBW02:Color | replace(/(\d{2})$/,'')"></ftui-label>
ergibt z.B. F8FF21; im Reading Color steht F8FF2100 --> schaut also gut aus :D
dann mal flink eingebaut zum Colorwheel:
<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | replace(/(\d{2})$/,'')" (hex)="replace(/(\d{2})$/,'') | MQTT2_RGBW02:Color"></ftui-colorpicker>
Das mag er noch nicht. Gleiche Fehlermeldung, aber wird korrekt an Fhem übergeben:
set MQTT2_RGBW02 Color 00eaff
Kommt als Toast und in Fhem schaut es gut aus.
Nach mehrmaligem Rumklickern wird zuviel abgeschnitten, da kommt dann set ... fbff". Also habe ich in regeex101 dies ausgelotet:
replace(/[0-9a-fA-F]{6}([0-9]{2})/,'')
Funktioniert in replace() leider generell nicht.
Also habe ich ihm das anders hingebogen:
<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | replace(/([0-9a-fA-F]{6})([0-9]{2})/,'$1')" (hex)="replace('#','') | replace(/([0-9a-fA-F]{6})([0-9]{2})/,'$1') | MQTT2_RGBW02:Color"></ftui-colorpicker>
Wird auch korrekt übergeben, aber leider mag er das hex noch immer nicht.
Die Fehlermeldung scheint nur beim Zuweisen des Readings ans Colorwheel zu kommen. Ändere ich das Binding auf einen Dummy, ist alles fein:
<ftui-colorpicker [hex]="testdummy:rgb" (hex)="replace('#','') | MQTT2_RGBW02:Color"></ftui-colorpicker>
Das selbe mit einem Fixwert, klappt auch - nur halt lila :)
<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | replace(/(.*)/,'FF00FF')" (hex)="replace('#','') | MQTT2_RGBW02:Color"></ftui-colorpicker>
Das klappt leider nicht mehr, obwohl im Test-Label ein korrekter Wert steht:
<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | replace(/([0-9a-fA-F]{6})/,'$1')" (hex)="replace('#','') | MQTT2_RGBW02:Color"></ftui-colorpicker>
Schwieriger als ich dachte so ein RGBW :o
VG
rob
Moin zusammen
Ich habe mir jetzt Charts eingerichtet und dafür sowohl
https://github.com/knowthelist/ftui (https://github.com/knowthelist/ftui)
als auch
https://knowthelist.github.io/ftui/www/ftui/examples/chart.html (https://knowthelist.github.io/ftui/www/ftui/examples/chart.html)
sowie
https://www.chartjs.org/docs/latest/ (https://www.chartjs.org/docs/latest/) Kapitel "Dataset Properties"
durchgelesen, aber ich finde einfach nicht heraus wie ich HerschafftszeitenKreizKruzifixSackZementUndKuebelmischerNochmal! diese runden Datenpunkte wegbekomme...
Ich hoffe das hat schon Jemand von Euch herausgefunden...
Danke
Gruß
Sailor
Versuche mal pointRadius="0" mitzugeben.
Ich nutze das ChartModul nicht...
Mach es mit Grafana, sieht eh besser aus. ;)
Zitat von: mr_petz am 30 März 2021, 15:32:52
Versuche mal pointRadius="0" mitzugeben.
Ich nutze das ChartModul nicht...
Das war das Erste was ich versucht habe. Funzt aber nicht.
Trotzdem Danke!
Gruß
Sailor
Zitat von: Sailor am 30 März 2021, 20:42:33
Das war das Erste was ich versucht habe. Funzt aber nicht.
Trotzdem Danke!
Gruß
Sailor
point-radius="0"
Funktioniert bei mir ohne Probleme.
Gruß
LuGu
Zitat von: LuGu am 30 März 2021, 20:59:44
point-radius="0"
Funktioniert bei mir ohne Probleme.
Gruß
LuGu
Hi, kannst du bitte deine gesamte Codezeile für Sailor posten, damit er mit seiner vergleichen kann...
Gerne!
<ftui-chart title="Luftfeuchte" height="130px" width="300px">
<ftui-chart-data point-radius="0" tension="0.3" fill log="FileLog_eg_wz_Klima_2_ZB" spec="4:eg_wz_Klima_2_ZB.humidity" [update]="eg_wz_Klima_2_ZB:state:time"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Um es nochmal genauer zu schreiben.
pointRadius="0"
Ist falsch.
point-radius="0"
Ist richtig.
Zitat von: LuGu am 30 März 2021, 21:30:22
Um es nochmal genauer zu schreiben.
point-radius="0"
Ist richtig.
DANKE!!!!! Funzt.
Aber wo steht denn so was, wenn nicht in der Beschreibung von https://www.chartjs.org/docs/latest/ (https://www.chartjs.org/docs/latest/)Kapitel "Dataset Properties"
Gruß
Sailor
Leute, ich verstehe es nicht. Habe nun ein UserReading "myRGB" angelegt und schneide somit schon im Device die Stellen 7-8 ab. Es steht immer der korrekte RGB-Wert drin. Trotzdem mag FTUI das nicht.
myRGB {
my $tmp = ReadingsVal("MQTT2_RGBW02","Color","") ;
$tmp =~ s/^([0-9a-fA-F]{6}).*/$1/ ;
$tmp
}
Readings:
Color FFFF4A00
myRGB FFFF4A
Eingebunden so:
<ftui-colorpicker [hex]="MQTT2_RGBW02:myRGB" (hex)="replace('#','') | MQTT2_RGBW02:Color"></ftui-colorpicker>
Immer kommt die Fehlermeldung. Alles Upcase, alles Lowcase oder # vorne dran - nix hilft. Wo ist der Unterschied zu einem Dummy oder Fixwert?
Was könnte ich noch probieren? Toasts generell abschalten sind doch auch keine Lösung (hab ich jetzt aber erstmal).
Vielen Dank für Eure Unterstützung und beste Grüße
rob
@rob
Ich habe zum Testen 2 Colorpicker verwendet und beide funktionieren ohne irgendeine Fehlermeldung.
Wheel- bzw. Slider-Darstellung ist korrekt - Toasts mit Information zu setreading werden aufgeblendet.
iro.js kann hex-Werte verarbeiten, die dem Muster RGB RGBA RRGGBB oder RRGGBBAA entsprechen - mit oder ohne führendem # bzw. 0x.
<ftui-colorpicker [hex]="ftuitest:hexcolor" (hex)="setreading ftuitest:hexcolor"></ftui-colorpicker>
<ftui-colorpicker [hex]="ftuitest:hexcolor" (hex)="replace('#','') | setreading ftuitest:hexcolor"></ftui-colorpicker>
Anmerken kann man noch, dass bei "heftigem" Nutzen irgendwann die Kontrolle verloren geht; das Wheel stellt Wertänderungen durch Mausklick, o.ä. korrekt dar, aber es werden keine Werte mehr an FHEM geschickt - evtl. mit debounce lösbar.
@Sailor
Unter https://www.chartjs.org/docs/latest/configuration/elements.html (https://www.chartjs.org/docs/latest/configuration/elements.html) findet man die Eigenschaften, die Points unterstützen. pointStyle als Name ist aber scheinbar ein Fehler, denn hier stehen eigentlich nur die reduzierten Namen der Eigenschaft; dass sie für point gelten, erübrigt sich ja eigentlich.
chart.js verrät dann ein wenig mehr:
pointStyle: 'pointStyle',
radius: 'pointRadius',
rotation: 'pointRotation'
Die meisten Eigenschaften sind aber aktuell nicht nutzbar, da man sie nur nutzen kann, wenn sie in der entsprechenden Komponente integriert sind.
Erweitert man die Komponente "minimal", kann man z.B. style sowie rotation nutzen, was ein wenig mehr Flexibilität verleiht.
Das Attribut pointRadius folgt in der für Javascript verbreiteten Schreibweise dem "camel case"-Prinzip.
Eigentlich alles Kleinbuchstaben; nur ab dem 2.Wort ist der erste Buchstabe eines Wortes ein Großbuchstabe.
Bei HTML kennt man eher das "kebab case"-Prinzip.
Alles Kleinbuchstaben; Worte werden durch "-" getrennt.
pointRadius wird also zu point-radius
pointRotation würde zu point-rotation
pointStyle würde zu point-style
Angehängter Screenshot zeigt statt Kreis ein um 45 Grad gedrehtes Kreuz.
Vielen Dank fürs Testen. Dann verstehe ich es noch weniger, warum es bei mir nicht geht. Ja, mit einem Dummy schon. Mit den echten Devices (habe zwei davon) bei mir leider nicht, trotz korrektem RGB-Wert im Userreading.
Ich habe es in einem frischen Fhem-Docker, per autocreate neu erstellten MQTT-Device + frisches FTUI3 in diesem Container nochmals nachgestellt (nicht das auf dem produktiven etwas vermurkst ist). Ist das selbe.
Fhem und FTUI arbeiten ja mit RGB und setzen das auch so ins Reading Color. Dann wird das Commando an Tasmota ausgelöst und dieses reportet die Farbe zurück - nur halt hinten mit 00 dran. Setzen in Fhem und Feedback durch Tasmota laufen so schnell ab, dass es wirkt, als würde Fhems-Colorpicker-Widget schon die Nullen dran hängen. Macht es aber nicht, das kommt von Tasmota.
Baue ich das in einem Dummy 1:1 nach passt alles. Denn weder Fhem noch FTUI hängen hinten die Null ran. Sogar wenn ich extra ein "setreading dummy color FF00FF00" mache, zieht mein Userreading und im FTUI ist alles super. Nur eben nicht im Zusammenspiel mit Tasmota.
Ich gebe es auf. Tasmota-RGBW und FTUI gehen nicht so einfach zusammen. Dann bleiben die Toasts halt deaktiviert und gut.
Zitat von: OdfFhem am 31 März 2021, 06:55:40
Anmerken kann man noch, dass bei "heftigem" Nutzen irgendwann die Kontrolle verloren geht; das Wheel stellt Wertänderungen durch Mausklick, o.ä. korrekt dar, aber es werden keine Werte mehr an FHEM geschickt - evtl. mit debounce lösbar.
Ja, hatte ich beim Testing gemerkt. Störte mich aber nicht weiter. Für neue Tests hatte ich eh die Seite neu geladen.
VG
rob
Hi Odf
Zitat von: OdfFhem am 31 März 2021, 08:14:40
Das Attribut pointRadius folgt in der für Javascript verbreiteten Schreibweise dem "camel case"-Prinzip.
Eigentlich alles Kleinbuchstaben; nur ab dem 2.Wort ist der erste Buchstabe eines Wortes ein Großbuchstabe.
Bei HTML kennt man eher das "kebab case"-Prinzip.
Alles Kleinbuchstaben; Worte werden durch "-" getrennt.
Himmel, da soll mal einer drauf kommen!
Danke, hast mir sehr geholfen!
Ich werde da mal etwas tiefer einsteigen...
Gruß
Sailor
@rob
Angenommen, Du hast doch noch Lust, den Fehler greifbarer zu machen:
- in der colorpicker-Komponente von iro.min.js auf iro.js umschwenken
- in iro.js die Meldung "('Invalid hex string')" auf "('Invalid hex string' + value)" erweitern, so dass man sieht, was das Problem sein soll
Zitat von: OdfFhem am 31 März 2021, 14:16:54
Angenommen, Du hast doch noch Lust, den Fehler greifbarer zu machen:
Klaro. Vielen Dank für Deine Geduld.
Hab alles angepasst. Erster Toast
set MQTT2_RGBW02 Color 00c8ff
und zweiter Toast
iro.js:582
Error: Invalid hex string#set
Aha! Da kommt gar kein hex an.
Erklärt warum kein Replace usw. wirkte. Tatsächlich steht im Color für 1/2sec "set" und wechselt dann zum Hex-Wert. Fhem ist flink genug, dass dies auch im UserReading so ist.
Das scheint mit der Wirkweise der MQTT-Kommunikation zu tun haben. Schalte ich vom Tasmota-Webif kommt keine Fehlermeldung. Wert "set" steht von Fhem aus drin bis Tasmota geantwortet hat. Nehme ich Tasmota offline, bleibt generell set drin.
Ich müsste also eine Art Verzögerung einbauen (z.B. ins UserReading?). Dann sollte es doch hoffentlich klappen, dass auch der hex-Wert ankommt. Ein kallhartes sleep bringt jedenfalls nix, weil Fhem dann komplett wartet - also auch set zunächst angehalten wird.
Heißt vielleicht auch: Thema betrifft nicht unbedingt RGBW, sondern auch RGB-Teile die MQTT mit Tasmota machen (?).
Vielen Dank und beste Grüße
rob
Hi. Kannst auch erstmal mit
debounce="1000"
oder höher auf der ftui seite testen...
Ist in ms
@rob
Bzgl. Wert vom UserReading würde es vermutlich reichen, einen neuen Tasmota-Wert nur zu übernehmen, wenn die "Quelle" eine gültige Hexzahl zur Verfügung stellt - ansonsten behält man den veralteten, aber noch fehlerfrei darstellbaren Wert.
Ist aber nur eine Idee ...
Guten Morgen,
leider habe ich über mein Anliegen hier im Forum nichts gehört/gelesen. Erleide ich hier ein Einzelschicksal ? Ich kann nur sagen, dass nach mehreren (unterschiedlich oft) refresh des Bildschirms die entsprechenden Icons auftauchen.
Danke für eure Unterstützung
Zitat von: rallye am 14 März 2021, 11:00:07
Guten Morgen !
Ich verwende seit mehreren Wochen problemlos "kleinklima". Seit 1-2 Tagen jedoch werden die Icons nur manchmal (kann leider kein Pattern feststellen) angezeigt. Ist da irgendetwas geändert worden was ich beachten muss ?
Danke
Hallo ralley,
kann bestätigen das ich dieses Problem auch habe.
Gruß
Eisix
Hallo Ralley, Eisix,
bei mir ist das auch so, nachvollziehen kann ich das am besten wenn ich über eine FHEMWEB Instanz gehe die OHNE BasicAuth läuft.
Evtl. tritt das Problem bei den anderen ja nicht auf weil sie über einen separaten WEBServer arbeiten hatte aber noch keine Zeit
das mal auszuprobieren.
Grüße
Torte
@mr_petz
Zitat von: mr_petz am 31 März 2021, 18:00:40
debounce="1000"
Danke Dir. Hab ich direkt ausprobiert. Ich muss jedoch zugeben, dass ich keinen Hinweis in den Dokus fand, wie / wo das konkret hin muss. So habe ich es probiert, brachte erstmal keinen Unterschied = meine Anwendung wird falsch sein:
<ftui-colorpicker [hex]="MQTT2_RGBW02:myRGB" (hex)="replace('#','') | MQTT2_RGBW02:Color" debounce="1000"></ftui-colorpicker>
@OdfFhem
Zitat von: OdfFhem am 31 März 2021, 18:12:54
Bzgl. Wert vom UserReading würde es vermutlich reichen, einen neuen Tasmota-Wert nur zu übernehmen, wenn die "Quelle" eine gültige Hexzahl zur Verfügung stellt - ansonsten behält man den veralteten, aber noch fehlerfrei darstellbaren Wert.
Ist aber nur eine Idee ...
Ja, gute Idee. Und das klappt auch. Durch den Wechsel "hoppst" das im Widget kurz, macht aber nix. Keine Fehlermeldung (no red Toast :) ). Alternativ geht auch ersetzen via replace('set','FFFFFF') - dadurch hoppst er nur zur Mitte (weiß) und dann zur Farbe.
Weiter vertiefen muss ich das hier nicht, da die Ursache, nicht im FTUI liegt und es somit nicht (mehr) in den Fred passen würde.
Eines habe ich in dem Zusammenhang noch beobachtet: wahrscheinlich durch die schnellen Inhaltswechsel im Reading greift das genannte Phänomen:
Zitat von: OdfFhem am 31 März 2021, 06:55:40
...dass bei "heftigem" Nutzen irgendwann die Kontrolle verloren geht; das Wheel stellt Wertänderungen durch Mausklick, o.ä. korrekt dar, aber es werden keine Werte mehr an FHEM geschickt - evtl. mit debounce lösbar.
praktisch sofort. Nachdem ich 1x eine Farbe im Wheel auswähle und den "Hoppser" sehe, steht alles korrekt da (FTUI-FHEM-Tasmota). Ein zweites Mal eine andere Farbe auswählen wird jedoch nicht mehr an Fhem übergeben. Es hilft auch kein site reload oder bewusstes Warten zw. 1. und 2. Klick. Nach Seitenreload kann ich also genau 1x eine Farbe setzen.
Also doch mit debounce?
Viele Grüße
rob
@rob
Hast du schon richtig plaziert.
Hier im Code der Standardwert zu sehen:
https://github.com/knowthelist/ftui/blob/6d0eda00fe22903757445dfe8bd58e56fdafb88e/www/ftui/components/colorpicker/colorpicker.component.js#L42 (https://github.com/knowthelist/ftui/blob/6d0eda00fe22903757445dfe8bd58e56fdafb88e/www/ftui/components/colorpicker/colorpicker.component.js#L42)
Du kannst auch höher gehen mit der Zeit.
Da dauert der set halt länger...
Einen ähnlichen Effekt gibt es beim Slider und Knob.
Ich musste da den debounce auf 2000 setzen...
Gruß Thomas
@Thomas
Danke Dir. Mit saftigen debounce="3000" merke sogar ich den Unterschied ;)
Den Color-Wert bekomme ich noch immer nur einmalig übermittelt. Sprich, da ist noch etwas ganz anderes was gestreichelt werden möchte. Ich werde mal die empfohlenen Standardeinstellen FTUI<->Fhem durchchecken. Irgendwo hab ich da ggf. einen Wurm drin.
Viele Grüße
rob
@all
Anderes Thema. Ich modde gerade mein PinPad für ftui3.
Habe ein paar Bilder angehangen.
Farben können direkt gesetzt werden oder auch eine transparente Ansicht geht.
Sieht das ganze zu verspielt aus oder schaut so ein "3D" Effekt gut aus.
Ich kann auch noch ein attr für "default" integrieren.
Möchte nur mal euer Feedback hören.
Ich werde noch ein set Befehl mit integrieren um zum Beispiel eine Alarmanlage scharf zu schalten.
Gruß Thomas
Zitat von: mr_petz am 01 April 2021, 15:07:04
@all
Anderes Thema. Ich modde gerade mein PinPad für ftui3.
Habe ein paar Bilder angehangen.
Farben können direkt gesetzt werden oder auch eine transparente Ansicht geht.
Sieht das ganze zu verspielt aus oder schaut so ein "3D" Effekt gut aus.
Ich kann auch noch ein attr für "default" integrieren.
Möchte nur mal euer Feedback hören.
Ich werde noch ein set Befehl mit integrieren um zum Beispiel eine Alarmanlage scharf zu schalten.
Gruß Thomas
Ich finds gut
Hi Thomas.
Ja, schaut gut aus 8) . Verspielt finde ich es nicht.
Um versch. Geschmäckern gerecht zu werden, könnte das ja ggf. konfigurierbar gehalten werden. Z.b. via style-tags, sodass Puristen im flat-style bleiben könnten, sofern es jmd. nicht corporate design genug wäre, weil FTUI3 per default flat ist usw. (Feinheiten auf hohem Niveau ;) ).
Viele Grüße
rob
Moin zusammen
Eine Frage an die Wissenden:
Wie bekomme ich neben dem Blinken (blink) auch ein Rotieren hin.
[class-name] = "FhemDevice:Reading | map('off: size-3, on: size-3 blink ')"
"rotate" statt "blink" funktioniert schon mal nicht. :(
Danke
Gruß
Sailor
@Sailor
"spin" sorgt für Rotation ... vielleicht das, was Du suchst ...
Zitat von: OdfFhem am 02 April 2021, 20:00:35
"spin" sorgt für Rotation ... vielleicht das, was Du suchst ...
Genau das... Danke!
Gruß
Sailor
Zitat von: rob am 01 April 2021, 14:48:12
Irgendwo hab ich da ggf. einen Wurm drin.
Mein UserReading war daran schuld, dass ich nur einmalig Color setzen konnte. Hab den Ansatz verworfen und das UserReading gelöscht. Ich löse das "set"-Thema nun im Colorwheel selbst. Läuft fehlerfrei mit aktiven Toasts und sogar ohne debounce im Color-Wheel :) (Der Slider möchte das aber gerne haben ;D ).
Wer auch ein Tasmota generic device mit RGBW und tasmota_rgbw_led-Template via FTUI3 Colorwheel steuern mag, möchte sich ggf. hiervon inspirieren lassen:
<ftui-grid-tile row="1" col="2" height="2" width="2">
<header>LED</header>
<ftui-button shape="circle"
size="large"
[(value)]="MQTT2_RGBW02"
[fill]="MQTT2_RGBW02 | map('off: outline, on: solid')">
<ftui-icon name="lightbulb" ></ftui-icon>
</ftui-button>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="2" height="3" width="2">
<header>Dimmer</header>
<ftui-slider [(value)]="MQTT2_RGBW02:pct" max="100" is-vertical debounce="1000"></ftui-slider>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="4" height="5" width="3">
<header>Farbauswahl</header>
<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | replace('set','FFFFFF') | replace('/([0-9a-fA-F]{6})/','$1')" (hex)="replace('#','') | MQTT2_RGBW02:Color"></ftui-colorpicker>
</ftui-grid-tile>
Der kurze Hoppser zum Weiß ist mir dabei Wurscht. Ente gut, alles gut :) Thema für mich damit abgeschlossen.
Nochmals vielen Dank für Eure geduldige Unterstützung.
Viele Grüße und frohe Osterfeiertage Euch allen
rob
Hi@all.
Habe mal das PinPad hierher:
https://forum.fhem.de/index.php/topic,120107.msg1145784.html#msg1145784 (https://forum.fhem.de/index.php/topic,120107.msg1145784.html#msg1145784)
verschoben.
Vielleicht kann wieder setstate oder OdfFhem drüber schauen... Danke. ;)
Gruß Thomas
Wieder mal eine Frage an die Wissenden
Wenn ich einen Button mit einem fhem - Befehl (shutdown restart) ausstatten moechte, wie muss ich das in die Syntax eingeben?
<ftui-button (value) = "shutdown restart"
color = "blue"
class = "size-3">
Restart
</ftui-button>
Sorgt für ein
set shutdown restart on
Ich bin mir ziemlich sicher, dass ich mal wieder den Wald vor lauter Bäumen nicht mehr sehe.
Gruß
Sailor
Zweite Frage
Nach einem "shutdown restart" ist die Verbindung zwischen dem anzeigenden Browser und dem fhem-Server natürlich unterbrochen.
Nach einem "F5" ist natürlich alles wieder im Lot.
Aber wie kann ich den "F5" vom fhem-Server nach einem Neustart per Remote erzwingen?
Gruß
Sailor
Hi@all.
Habe mal das Departure hierher:
https://forum.fhem.de/index.php/topic,120143.msg1146192.html#msg1146192 (https://forum.fhem.de/index.php/topic,120143.msg1146192.html#msg1146192)
verschoben.
Gruß Thomas
Nur eine Anmerkung.
@mr_petz: Vielleicht wäre es besser wenn Du die Threadtitel für FTUI3 an den Anfang des Titels stellst, als z.B. so: [FTUI3] Departure für FTUI3
Dann lässt sich das m.E. besser erfassen, daß es für FTUI3 sein soll.
Zitat von: grossmaggul am 06 April 2021, 15:08:36
Nur eine Anmerkung.
@mr_petz: Vielleicht wäre es besser wenn Du die Threadtitel für FTUI3 an den Anfang des Titels stellst, als z.B. so: [FTUI3] Departure für FTUI3
Dann lässt sich das m.E. besser erfassen, daß es für FTUI3 sein soll.
erledigt ;)
Zitat von: Sailor am 06 April 2021, 14:25:18
Wieder mal eine Frage an die Wissenden
Wenn ich einen Button mit einem fhem - Befehl (shutdown restart) ausstatten moechte, wie muss ich das in die Syntax eingeben?
<ftui-button (value) = "shutdown restart"
color = "blue"
class = "size-3">
Restart
</ftui-button>
Sorgt für ein
set shutdown restart on
Ich bin mir ziemlich sicher, dass ich mal wieder den Wald vor lauter Bäumen nicht mehr sehe.
Gruß
Sailor
Gem. https://forum.fhem.de/index.php/topic,115259.msg1131664.html#msg1131664 ist nur setreading, set & attr ein gültiger Befehl. M.E. müste da setstate Hand anlegen, ob Perl {Befehle} gehen weiss ich nicht...
Gruss eppi
Nachtrag: probiere doch mal in der ftui/modules/ftui/ftui.binding.js zeile 264 "shutdown" als weiteren Befehl aufzunehmen, ev funktioniert es ja...
Hallo,
so sollte es funktionieren.
<ftui-button shape="circle" class="size-2">
<span onclick="ftuiApp.fhemService.sendCommand('shutdown restart')"><ftui-icon class="size-1"
name="edit_save"
color="red">
</ftui-icon></span>
</ftui-button>
Gruß
Eisix
@setstate und @OdfFhem
Nur eine kleine Anmerkung.
Ich hatte mich schon im Android Tablet gewundert, warum beim dropdown das U+2304 (down arrowhead) nicht angezeigt wird.
Bei mir kommt ein umrandetes x.
Ich habe den passenden fonts nicht.
siehe hier welcher fonts bzw System unterstützt wird:
https://www.htmlsymbols.xyz/unicode/U+2304 (https://www.htmlsymbols.xyz/unicode/U+2304)
Könnte man vielleicht den passenden fonts (Segoe UI Symbol) mit ins FTUI aufnehmen oder einfach das kleine "v" nehmen?
hier im css:
https://github.com/knowthelist/ftui/blob/6d0eda00fe22903757445dfe8bd58e56fdafb88e/www/ftui/components/dropdown/dropdown.component.css#L10 (https://github.com/knowthelist/ftui/blob/6d0eda00fe22903757445dfe8bd58e56fdafb88e/www/ftui/components/dropdown/dropdown.component.css#L10)
Danke und Gruß Thomas
@Eisix @Sailor
onclick kann auch direkt in ftui-icon verwendet werden, soweit ich mich an das postme-Beispiel erinnere ... span wäre vermutlich nur dann interessant, wenn man mehrere Elemente gruppieren möchte.
@mr_petz
Nett, dass Du mich öfter erwähnst, aber ich habe keinen direkten Einfluss auf FTUI - ich bin quasi reiner Nutzer. Dieses sehr gut verwendbare Werkzeug ist allein setstate zu verdanken und unterliegt auch vollständig seiner Pflege.
Zitat von: OdfFhem am 06 April 2021, 22:47:41
@mr_petz
Nett, dass Du mich öfter erwähnst, aber ich habe keinen direkten Einfluss auf FTUI - ich bin quasi reiner Nutzer. Dieses sehr gut verwendbare Werkzeug ist allein setstate zu verdanken und unterliegt auch vollständig seiner Pflege.
Achso, ich dachte du mischst da mit, weil du als Mitwirkender im GitHub drin stehst....
Und ja sonst sehr fit bist mit dem programmieren... ;)
Zitat von: Sailor am 06 April 2021, 14:25:18
<ftui-button (value) = "shutdown restart"
color = "blue"
class = "size-3">
Restart
</ftui-button>
Du musst states = "" setzen. Dann wird auch nix mitgegeben.
Default ist "on,off" => somit wieder immer abwechselnd on und off als $value mitgegeben
Zitat von: torte am 01 April 2021, 12:51:24
Hallo Ralley, Eisix,
bei mir ist das auch so, nachvollziehen kann ich das am besten wenn ich über eine FHEMWEB Instanz gehe die OHNE BasicAuth läuft.
Evtl. tritt das Problem bei den anderen ja nicht auf weil sie über einen separaten WEBServer arbeiten hatte aber noch keine Zeit
das mal auszuprobieren.
Grüße
Torte
Hallo zusammen,
mir ist heute beim rumspielen was aufgefallen. Bei mir ist ja das Problem das beim ersten anbrowsen die Stati nicht immer vollkommen angezeigt werden.
Ich hab heute festgestellt das das nur passiert wenn das Element über ein ContentFile geladen wird.(Ausschließlich)
zb. habe ich die Mülleimer mit Badge in einem ausgelagerten Contentfile, es kommt dann vor das Badge nicht angezeigt wird. Nehme ich nun einfach
<ftui-badge></ftui-badge> mit in die index.html auf dann geht es immer. Ist bei mir zb mit switch genauso.
Kann das evtl. damit zusammenhängen da ja in den einzelnen Components JS Dateien nachgeladen werden?
Grüße
Torte
Hallo,
bei mir ist eigentlich fast alles in verschiedenen ContentFiles, muss ich mal testen. Wäre jedenfalls eine plausible Erklärung
Gruß
Eisix
Zitat von: Thyraz am 19 November 2020, 15:55:40
Hab mal eine frühe Version einer Kalender Komponente die gern getestet werden darf.
...
- view: Kann aktuell mit listWeek und listMonth belegt werden
Hallo Thyraz.
Der Kalender kommt mir sehr gelegen und gefällt mir gut :) 8)
Lässt sich dort eine Art "rolling" 2-Weeks oder Month abfragen?
Was meine ich damit:
- an den Grenztagen sehe ich noch nicht den anstehenden Termin der nächsten Wochen/ des nä. Monats
- z.B. Abfallkalender, wo in Fhem das ganze Jahr bereits drin steht
- am Freitag sehe ich noch nicht, dass am Montag eine Tonne abgeholt wird, welche ich am Sonntag raus stellen sollte --> listWeek
- mit listMonth sehe ich natürlich den Montag, solange er im aktuellen Monat liegt
- ist der Abholmontag im neuen Monat, sehe ich am Freitag zuvor den Termin auch nicht
Deshalb würde ich gern die Termine rollierend darstellen, z.B. heute +14Tage. Geht das schon irgendwie?
Vielen Dank und beste Grüße
rob
Zitat von: rob am 09 April 2021, 09:17:06
Hallo Thyraz.
Der Kalender kommt mir sehr gelegen und gefällt mir gut :) 8)
Lässt sich dort eine Art "rolling" 2-Weeks oder Month abfragen?
Hallo rob,
ich habe mir in /modules/fullcalendar/main.js noch ein "list4Weeks" eingebaut.
list4Weeks: {
type: 'list',
duration: { weeks: 4 },
listDayFormat: { weekday: 'long' },
listDaySideFormat: { month: 'long', day: 'numeric', year: 'numeric' },
},
und dann entsprechend im Kalender benutzt
<ftui-calendar no-header view="list4Weeks">
<ftui-calendar-data calendar="calGeburtstage" color="primary"></ftui-calendar-data>
</ftui-calendar>
Gruß LuGu
Hi Torte
Zitat von: torte am 08 April 2021, 07:58:20
Ich hab heute festgestellt das das nur passiert wenn das Element über ein ContentFile geladen wird.(Ausschließlich)
zb. habe ich die Mülleimer mit Badge in einem ausgelagerten Contentfile, es kommt dann vor das Badge nicht angezeigt wird. Nehme ich nun einfach
<ftui-badge></ftui-badge> mit in die index.html auf dann geht es immer. Ist bei mir zb mit switch genauso.
Kann das evtl. damit zusammenhängen da ja in den einzelnen Components JS Dateien nachgeladen werden?
Das Problem habe ich nur, wenn ich beim programmieren (rumspielen) der Seite den Cache nicht richtig loesche.
Ein "F5" drücken reicht nur für Veränderungen in der index.html.
Aller weiteren content-Inhalte muessen vorher mittels manueller Cache - History und anschliessendem F5 neu geladen werden.
Erst dann werden die Änderungen der Inhalte aus den content-Files übernommen.
Sehr nervig, aber ich habe noch keinen Work-Around gefunden.
Gruß
Sailor
Fürs Programmieren kann man in den Browser-Entwicklertools unter Network > Disable Cache einschalten.
Nachher wieder rausnehmen nicht vergessen.
Zitat von: setstate am 09 April 2021, 18:58:18
Fürs Programmieren kann man in den Browser-Entwicklertools unter Network > Disable Cache einschalten.
Nachher wieder rausnehmen nicht vergessen.
Na siehste, jetzt wird die Sache doch schon wesentlich angenehmer!
;D
Danke!
Gruß
Sailor
@Sailor
Ne Cache hab ich schon ausgeschlossen. Teste meistens jede Änderung im Inkognito Mode vom Chrome. Ich hab auch nix an der Seite geändert und das Problem hab ich auf verschiedene Browsern incl. Fully.
Und reproduzieren geht auch, einfach das zb. "Ftui-badge" nicht mehr in der root index.html und schon fehlt die Badge Anzeige aus dem ContentFile beim ersten anbrowsen der Webseite.
Möchte nicht ausschließen das noch wo anders das Problem sein kann, wie schon geschrieben ich hab FTUI auf FHEMWEB vielleicht ist da noch was!?
Ich glaub Eisix und noch jemand anderes hatte das auch.
Viele Grüße
Torte
@Sailor
ich weiß nicht ob wir uns falsch verstanden haben, ich hatte das verhalten schon hier
mal beschrieben hier:
#872 am: 08 Februar 2021, 09:33:44 »
Grüße
Torte
Muss mich hier auch mal anschließen, habe zur Zeit auch das gleiche bzw. zumindest ein ähnliches Problem.
Habe meine Mülltonnen auf der Hauptseite, mein Wetter auf eine content-Seite ausgelagert. Habe mit beidem Probleme mit der Anzeige, siehe Anhang.
Ich arbeite normalerweise mit Chrome, selbst im Inkognito-Browser mag er das nicht. Habe da noch nicht wirklich herausgefunden woran das liegt. Im Edge scheint es aber zu funktionieren. Nein, hier funktioniert es auch nicht richtig.
Es geht einmal, Seite aktualisieren und dann geht nichts mehr, ab und zu funktionieren die Mülltonnen wieder aber das Wetter mag nicht wirklich, im Inkognito-Browser geht das schon besser aber auch nicht beständig, im Edge geht es noch am besten, ist aber auch ab und zu nach der Aktualisierung nicht richtig.
@meier81
hast du mal probiert, einfach in der Haupt index.html ein <ftui-badge></ftui-badge> einzufügen? Seit dem läuft es bei mir.
Grüße
Torte
Zitat von: torte am 08 April 2021, 07:58:20
Hallo zusammen,
mir ist heute beim rumspielen was aufgefallen. Bei mir ist ja das Problem das beim ersten anbrowsen die Stati nicht immer vollkommen angezeigt werden.
Ich hab heute festgestellt das das nur passiert wenn das Element über ein ContentFile geladen wird.(Ausschließlich)
zb. habe ich die Mülleimer mit Badge in einem ausgelagerten Contentfile, es kommt dann vor das Badge nicht angezeigt wird. Nehme ich nun einfach
<ftui-badge></ftui-badge> mit in die index.html auf dann geht es immer. Ist bei mir zb mit switch genauso.
Kann das evtl. damit zusammenhängen da ja in den einzelnen Components JS Dateien nachgeladen werden?
Grüße
Torte
ja, das ist ein Timing-Problem. Bei jedem Contentfiles wird die Websocket-Connection und das Refresh neu angestoßen. Ich habe jetzt ein delay eingebaut, damit das nicht zu früh und zu oft passiert.
Zitat von: torte am 09 April 2021, 22:21:51
@meier81
hast du mal probiert, einfach in der Haupt index.html ein <ftui-badge></ftui-badge> einzufügen? Seit dem läuft es bei mir.
Grüße
Torte
@torte
Das ist ja interessant, hab das in die index.html mal ganz unten mit eingebaut, funktioniert jetzt einwandfrei. Hab dann mal das gleiche für meine Wettersymbole gemacht, funktionieren nun auch einwandfrei:
<ftui-badge></ftui-badge>
<ftui-weather></ftui-weather>
Zitat von: setstate am 09 April 2021, 22:28:24
ja, das ist ein Timing-Problem. Bei jedem Contentfiles wird die Websocket-Connection und das Refresh neu angestoßen. Ich habe jetzt ein delay eingebaut, damit das nicht zu früh und zu oft passiert.
Hi setstate, hab eben mal geupdatet und die Zwischenlösung mit der Definition von torte aus der index.html wieder rausgenommen, scheint jetzt fehlerfrei zu funktionieren. Man sieht jetzt bei der Seitenaktualisierung einen kurzen Versatz beim Laden (du hast ja glaube ich 500ms eingestellt) und dann sind die Symbole alle korrekt da.
Vielen Dank schonmal.
Gruß Markus
Zitat von: setstate am 09 April 2021, 22:28:24
ja, das ist ein Timing-Problem. Bei jedem Contentfiles wird die Websocket-Connection und das Refresh neu angestoßen. Ich habe jetzt ein delay eingebaut, damit das nicht zu früh und zu oft passiert.
Hallo Setstate,
vielen Dank. läuft ! :D :D
Viele Grüße
Torte
Nabend euch allen,
hab nochmal ein Problem. Ich möchte hier den Button für meinen "Schlafmodus" verwenden, dies ist eine Systemvariable im Modul HMCCU.
Folgendes habe ich bislang definiert:
<ftui-button [(value)]="ftuitest">
<ftui-icon [name]="debmatic:Schlafmodus_Eltern | map('true:bed, false:child')"></ftui-icon>
</ftui-button>
Die Anzeige des Icons funktioniert soweit problemlos, um die Variable aber zu setzen muss ich folgendes in der Komandozeile von fhem eingeben:
set debmatic var Schlafmodus_Eltern true
bzw. zum ausschalten
set debmatic var Schlafmodus_Eltern false
Lässt sich das hier so einfach umsetzen und falls ja wie? Hab da erstmal keinen Plan wie ich das anstelle von ftuitest eintragen soll.
Gruß Markus
@click="sendFhem('set debmatic var Schlafmodus_Eltern true')"
wäre eine möglichkeit...
Zitat von: mr_petz am 10 April 2021, 20:38:28
@click="sendFhem('set debmatic var Schlafmodus_Eltern true')"
wäre eine möglichkeit...
Das wäre dann aber rein als "Tastfunktion", mit der Anweisung könnte ich nicht toggeln, also hinten true/false umschalten, richtig?
oder so:
(value)="debmatic" states="var Schlafmodus_Eltern true,var Schlafmodus_Eltern false"
und zum mappen:
debmatic:Schlafmodus_Eltern | map('true:bed, false:child')
wenn das Reading so stimmt
Danke dir mal für die Antwort, glaube ich bekomme damit auch das gleiche Problem bezüglich dem Nachführen. Hier nochmal meine jetzige Definition, bis auf ne Kleinigkeit geht soweit alles:
<ftui-button [value]="debmatic:Schlafmodus_Eltern" (value)="set debmatic var Schlafmodus_Eltern $value" states="true,false">
<ftui-icon [name]="debmatic:Schlafmodus_Eltern | map('true:bed, false:child')"></ftui-icon>
</ftui-button>
Im fhem gibt es bei mir ein Device Namens "debmatic", in diesem Device gibt es ein Reading mit dem Namen "Schlafmodus_Eltern". Dieses Reading hat den Wert "false" bzw. "true". Von daher ist das lesen ja alles ganz normaler Standard, funktioniert auch einwandfrei bei der Icon-Zuweisung von oben.
Setzen kann man dieses Reading leider nicht klassisch wie z.B. bei einem Dummy, sondern mit "set debmatic var Schlafmodus_Eltern true" bzw. auch false.
Selbst das geht mit dem Output Binding von oben, Befehl wird korrekt gesetzt.
Das einzige Problem das ich jetzt noch habe ist das irgend etwas im Input Binding klemmt, wobei die Definition ja so korrekt sein sollte, ist ja die gleiche wie für das Icon. Ich habe deshalb auch das Output Binding extra so gewählt, damit beim Befehl der state true und false gesetzt wird und bei der Rückmeldung auch true und false drinsteht. Sobald ich aber von anderer Stelle die Variable umschalte wird zwar das Icon korrekt geändert, will ich jetzt aber über den Button wieder bedienen lässt der sich zwar drücken, ich bekomme aber unten links keine Meldung das ein Befehl abgesetzt wurde. Abhilfe schafft nur ein Refresh der Seite.
Also ich bin jetzt erstmal mit meinem Latein am Ende, vielleicht hat von euch da noch jemand eine Idee.
Ein herzerfrischendes "Moin" vom achtern Diek vorweg
Ich bin zur Zeit auf der Zielgeraden was die Portierung meiner ftui von v2 auf v3 betrifft.
Leider habe ich bei der Einbindung meines Video-Streams noch so meine Probleme...
Ich habe den Code
<ftui-image src = "http://192.168.178.66/bha-api/video.cgi?http-user=Username%26http-password=Geheim"
height = "150px"
width = "200px"
shape = "round"
popup-target = "frontdoorcam">
</ftui-image>
So meine Probleme... Mal funktioniert es oder auch nicht.
Nach dem Neustart vom Browser funktioniert es mal und mal wieder nicht.
Cache habe ich geloecht aber ohne Erfolg...
Kann Jemand dieses Problem reproduzieren?
Gruß
Sailor
Hallo zusammen,
ich habe gerade meinen ersten Gehversucht mit FTUI3 gestartet.
Ich würde gerne erstmal das Fundament für die Seite schaffen.
Die Seite soll im Wohnzimmer auf einem Tablet an der Wand mit 1280 x 800 laufen und auf unseren iPhones.
Als Basis habe ich "examples/content.html" genommen, da ich die Anordnung vom Menü in der Fußzeile gut finde.
Da ich nicht auf den Unterseiten jeweils einen Header redundant hinzufügen möchte, habe ich in der index.html einen <header> Bereich definiert.
Das klappt auch ganz gut, es fehlt nur noch die Übernahme der Raumbezeichnung im Header, aber da muss ich mich noch mit den Bindings beschäftigen.
Aufgefallen ist mir jetzt nur, dass der Scrollbereich von meinem main bis in den footer geht und dann ggf. das Ende meiner Unterseite durch den Footer überlagert wird.
Mit dem Header habe ich das Problem nicht.
Könnt ihr mal über meine index schauen und mir Anregungen geben, bevor ich mich verrenne?
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/bright-theme.css" rel="stylesheet">
<link rel="icon" href="/fhem/ftui/images/favicon.ico" type="image/x-icon" />
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="/fhem/ftui/images/snail120.png" sizes="120x120">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="/fhem/ftui/images/snail152.png" sizes="152x152">
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- verbose level 0-4 -->
<meta name="debug" content="2">
<title>Schneckendashboard</title>
</head>
<body>
<header >
<ftui-row>
<ftui-column width="20%">Logo</ftui-column>
<ftui-column >{{room}}</ftui-column>
<ftui-column width="20%"><ftui-clock format="eeee, DD.MMMM YYYY" class="size-3" color="warning"></ftui-clock></ftui-column>
</ftui-row>
</header>
<main>
<ftui-tab-view id="View1">
<ftui-content file="contents/content-home.html" room="Room1"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="View2">
<ftui-content file="contents/content-energy.html" room="Room2"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="View3">
<ftui-content file="contents/content-garden.html" room="Room3"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="View4">
<ftui-content file="contents/content-music.html" room="Room4"></ftui-content>
</ftui-tab-view>
</main>
<footer class="row fixed border-top">
<ftui-tab fill="clear" direction="vertical" view="View1" [value]="dummy1 | map('Wert1:on, .*:off')" active>
<ftui-icon name="home1"></ftui-icon>
<label class="small">Home</label>
</ftui-tab>
<ftui-tab fill="clear" direction="vertical" view="View2" [value]="dummy1 | map('Wert2:on, .*:off')">
<ftui-icon name="weather-partly-lightning"></ftui-icon>
<label class="small">Energie</label>
</ftui-tab>
<ftui-tab fill="clear" direction="vertical" view="View3" [value]="dummy1 | map('Wert3:on, .*:off')">
<ftui-icon name="leaf"></ftui-icon>
<label class="small">Garten</label>
</ftui-tab>
<ftui-tab fill="clear" direction="vertical" view="View4" [value]="dummy1 | map('Wert4:on, .*:off')">
<ftui-icon name="music"></ftui-icon>
<label class="small">Multimedia</label>
</ftui-tab>
</footer>
</body>
</html>
Die Unterseite sieht dann so aus:
<ftui-grid base-width="70" base-height="70" margin="5" resize>
<ftui-grid-tile row="1" col="1" height="6" width="6">
<header></header>
<ftui-chart title="Wärmepumpe">
<ftui-chart-data label="Außen" log="FileLog_ALPHA_INNOTEC_SWC_60H" spec="4:ambientTemperature" color="warning"></ftui-chart-data>
<ftui-chart-data label="Vorlauf" log="FileLog_ALPHA_INNOTEC_SWC_60H" spec="4:flowTemperature" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)"></ftui-chart-data>
<ftui-chart-data label="Rücklauf" log="FileLog_ALPHA_INNOTEC_SWC_60H" spec="4:returnTemperature" color="#d63056"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
</ftui-grid-tile>
<ftui-grid-tile row="7" col="1" height="6" width="6">
<ftui-chart title="Hauskraftwerk">
<ftui-chart-data label="Solarleistung" log="FileLog_S10E" spec="4:Solarleistung" color="warning"></ftui-chart-data>
<ftui-chart-data label="Hausleistung" log="FileLog_S10E" spec="4:Hausleistung" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)"></ftui-chart-data>
<ftui-chart-data label="Batterieleistung" log="FileLog_S10E" spec="4:Batterieleistung" background-color="#d6305650" color="#d63056"></ftui-chart-data>
<ftui-chart-data label="Netzleistung" log="FileLog_S10E" spec="4:Netzleistung" color="red"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
</ftui-grid-tile>
</ftui-grid>
Ich bin für alle Anregungen dankbar.
Viele Grüße
Marc
Hallo Marc
Zitat von: Init am 11 April 2021, 17:45:11
Da ich nicht auf den Unterseiten jeweils einen Header redundant hinzufügen möchte, habe ich in der index.html einen <header> Bereich definiert.
Das klappt auch ganz gut, es fehlt nur noch die Übernahme der Raumbezeichnung im Header, aber da muss ich mich noch mit den Bindings beschäftigen.
Eine aehnliche Frage hatte ich auch schon gestellt:
https://forum.fhem.de/index.php/topic,115259.msg1139417.html#msg1139417
Ich habe es jetz so gemacht wie im Beispiel- index.html und dann viel mit <ftui-content> fuer jede Kachel gearbeitet.
Gruß
Matthias
N'abend allerseits,
ich habe hier mal eine rudimentaere <ftui-video> Komponente angefangen, da ich so etwas fuer meinen Unifi Recording Monitor brauchte.
Derzeit werden folgende Attribute (mit defaults) unterstuetzt:
src: '', // URL to video
width: '100%',
height: 'auto',
autoplay: true,
controls: true,
muted: false,
type: 'video/mp4',
pauseonvisibilitychange: true
Einbindung - im Beispiel ohne URL, da ich die mit meiner Unifivideo Komponente fuelle - und unter Nutzung der Defaultwerte:
<ftui-video src="" id="unifivideo-recordingplayer"></ftui-video>
Ihr findet es im Anhang, falls Ihr es gebrauchen koennt.
Da es ein HTML5 Video Tag nutzt, sollte es alle vom jew. Browser abspielbaren Formate unterstuetzen - ich habe es nur mit MP4, wie es vom Unifi Video Controller kommt, getestet.
Ich wuerde mich ueber Feedback freuen.
@setstate - falls Du es direkt in FTUI integrieren moechtest - feel free!
Viele Gruesse
Jens
P.S.: Ich war mir nicht sicher, ob ich einen eigenen Thread dafuer aufmachen sollte...
Hallo Jens
Zitat von: elle am 11 April 2021, 22:15:02
Ich wuerde mich ueber Feedback freuen.
Habe es getestet.
Dein File ist in
/opt/fhem/www/ftui/components/video/video.component.jsabgespeichert.
Code:
<ftui-label [text]="OS_DoorBird:HistoryFilePath_{{DbUrl}}"></ftui-label>
<ftui-video
src = "OS_DoorBird:HistoryFilePath_{{DbUrl}}"
width = "100%"
height = "auto"
type = "video/mp4"
autoplay = "true"
controls = "true"
muted = "false"
pauseonvisibilitychange= "true">
</ftui-video>
Dateipfad
/opt/fhem/www/doorbird/20210412-114252_motionsensor.mp4ist vorhanden
Ergebnis ist leider eine Fehlermeldung
Gruß
Sailor
Hi Sailor,
habe gerade mal Deinen Test nachgestellt und bei mir funktioniert's wie es soll.
Zitat von: Sailor am 12 April 2021, 12:27:04
/opt/fhem/www/ftui/components/video/video.component.js
abgespeichert.
Richtig.
Zitat von: Sailor am 12 April 2021, 12:27:04
...
Dateipfad
/opt/fhem/www/doorbird/20210412-114252_motionsensor.mp4
ist vorhanden
Hast Du mal nachgeschaut, ob die Rechte auf dem File so sind, dass FHEM sie lesen kann?
Und - ist der relative Pfad vom FTUI zum mp4 file wirklich der im Screenshot angezeigte?
Zitat von: Sailor am 12 April 2021, 12:27:04
Ergebnis ist leider eine Fehlermeldung
Mein Testcase sieht so aus:
Internals:
CFGFN
FUUID 60743375-f33f-71bd-a26e-bd92371f996c94e7
NAME OS_Doorbird
NR 651826
STATE ???
TYPE dummy
.attraggr:
.attrminint:
READINGS:
2021-04-12 13:57:53 HistoryFilePath_URL ../doorbell/20210412.131956.Eingang.mp4
Attributes:
Permissions:
root@shc:/opt/fhem/www/doorbell# ls -l
total 8412
-rwxr--r-- 1 fhem dialout 8610791 Apr 12 13:45 20210412.131956.Eingang.mp4
Testseite:
<!DOCTYPE html>
<html>
<head>
<script src="ftui.js"></script>
<title>Video Test</title>
</head>
<body>
<ftui-label [text]="OS_Doorbird:HistoryFilePath_URL"></ftui-label>
<ftui-video [src]="OS_Doorbird:HistoryFilePath_URL"></ftui-video>
</body>
</html>
Ergebnis: Video wird in Edge, Chrome und Firefox wiedergegeben - s. Anhang.
Ansonsten koennte ich Dir noch vorschlagen, im Inspector des Browsers (Rechtsklick auf die Seite -> Inspektor), dann im Tab Network,nachzuschauen, was er vom Webserver als Antwort bekommt, wenn er versucht, Dein Video herunterzuladen (auch im Anhang zu sehen). Eventuell musst Du das Video nochmal laden.
Dort darf bei der URL Deines Videos als "Status Code:" nicht 404 oder ein 5xx Code stehen, sondern da muss 200 oder - wie hier - 206 ...
Gruss
Jens
Zitat von: Sailor am 11 April 2021, 18:01:41
Eine aehnliche Frage hatte ich auch schon gestellt:
https://forum.fhem.de/index.php/topic,115259.msg1139417.html#msg1139417
Ich habe es jetz so gemacht wie im Beispiel- index.html und dann viel mit <ftui-content> fuer jede Kachel gearbeitet.
Hallo Matthias,
danke für deine Antwort. Ich habe jetzt noch ein bisschen getestet und meine index sind nun so aus:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/mobile-theme.css" rel="stylesheet">
<link href="themes/custom.css" rel="stylesheet">
<link rel="icon" href="/fhem/ftui/images/favicon.ico" type="image/x-icon" />
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="/fhem/ftui/images/snail120.png" sizes="120x120">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="/fhem/ftui/images/snail152.png" sizes="152x152">
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width, initial-scale=0.8">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- verbose level 0-4 -->
<meta name="debug" content="2">
</head>
<body>
<header >
<ftui-row>
<ftui-column width="20%">Logo</ftui-column>
<ftui-column >{{room}}</ftui-column>
<ftui-column width="20%"><ftui-clock format="eeee, DD.MMMM YYYY" class="size-3" color="warning"></ftui-clock></ftui-column>
</ftui-row>
</header>
<main>
<ftui-tab-view id="View1">
<ftui-content file="contents/content-home.html" room="Room1"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="View2">
<ftui-content file="contents/content-energy.html" room="Room2"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="View3">
<ftui-content file="contents/content-garden.html" room="Room3"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="View4">
<ftui-content file="contents/content-music.html" room="Room4"></ftui-content>
</ftui-tab-view>
</main>
<footer class="">
<ftui-tab fill="clear" direction="vertical" view="View1" [value]="dummy1 | map('Wert1:on, .*:off')" active>
<ftui-icon name="home1"></ftui-icon>
<label class="small">Home</label>
</ftui-tab>
<ftui-tab fill="clear" direction="vertical" view="View2" [value]="dummy1 | map('Wert2:on, .*:off')">
<ftui-icon name="weather-partly-lightning"></ftui-icon>
<label class="small">Energie</label>
</ftui-tab>
<ftui-tab fill="clear" direction="vertical" view="View3" [value]="dummy1 | map('Wert3:on, .*:off')">
<ftui-icon name="leaf"></ftui-icon>
<label class="small">Garten</label>
</ftui-tab>
<ftui-tab fill="clear" direction="vertical" view="View4" [value]="dummy1 | map('Wert4:on, .*:off')">
<ftui-icon name="music"></ftui-icon>
<label class="small">Multimedia</label>
</ftui-tab>
</footer>
</body>
</html>
Ich verwende nun das mobile-theme.css und habe ein themes/custom.css hinzugefügt.
In der themes/custom.css habe ich folgenden Inhalt:
body {
display: flex;
flex-direction: column;
}
header {
bottom: 0;
width: 100%;
padding: 0.5em 0 0.5em 0;
background: var(--view-footer-color);
display: flex;
justify-content: space-evenly;
}
Jetzt bleiben Header und Footer wie gewünscht stehen :D
Hast du oder jemand anderes eine Idee, wie ich "initial-scale" in <meta name="viewport"> Deviceabhängig setzen kann?
Und wo kann man am besten nachschauen, welche möglichen Attribute eine Component besitzt?
Viele Grüße
Marc
Hallo Jens
Zitat von: elle am 12 April 2021, 14:17:27
habe gerade mal Deinen Test nachgestellt und bei mir funktioniert's wie es soll.
Ja, wenn man es richtig macht, funktioniert es... Komisch! ;D
[src] = "OS_DoorBird:HistoryFilePath_{{DbUrl}}" Sorry für den Aufwand.
Jetzt geht es auch bei mir...
Gruß
Sailor
Zitat von: Sailor am 12 April 2021, 19:53:28
Sorry für den Aufwand.
Jetzt geht es auch bei mir...
;D
Zitat von: meier81 am 10 April 2021, 22:45:31
Danke dir mal für die Antwort, glaube ich bekomme damit auch das gleiche Problem bezüglich dem Nachführen. Hier nochmal meine jetzige Definition, bis auf ne Kleinigkeit geht soweit alles:
<ftui-button [value]="debmatic:Schlafmodus_Eltern" (value)="set debmatic var Schlafmodus_Eltern $value" states="true,false">
<ftui-icon [name]="debmatic:Schlafmodus_Eltern | map('true:bed, false:child')"></ftui-icon>
</ftui-button>
Im fhem gibt es bei mir ein Device Namens "debmatic", in diesem Device gibt es ein Reading mit dem Namen "Schlafmodus_Eltern". Dieses Reading hat den Wert "false" bzw. "true". Von daher ist das lesen ja alles ganz normaler Standard, funktioniert auch einwandfrei bei der Icon-Zuweisung von oben.
Setzen kann man dieses Reading leider nicht klassisch wie z.B. bei einem Dummy, sondern mit "set debmatic var Schlafmodus_Eltern true" bzw. auch false.
Selbst das geht mit dem Output Binding von oben, Befehl wird korrekt gesetzt.
Das einzige Problem das ich jetzt noch habe ist das irgend etwas im Input Binding klemmt, wobei die Definition ja so korrekt sein sollte, ist ja die gleiche wie für das Icon. Ich habe deshalb auch das Output Binding extra so gewählt, damit beim Befehl der state true und false gesetzt wird und bei der Rückmeldung auch true und false drinsteht. Sobald ich aber von anderer Stelle die Variable umschalte wird zwar das Icon korrekt geändert, will ich jetzt aber über den Button wieder bedienen lässt der sich zwar drücken, ich bekomme aber unten links keine Meldung das ein Befehl abgesetzt wurde. Abhilfe schafft nur ein Refresh der Seite.
Also ich bin jetzt erstmal mit meinem Latein am Ende, vielleicht hat von euch da noch jemand eine Idee.
Hallo und guten Abend,
wollte euch nur nochmal kurz berichten, da ich den von mir beschriebenen Fehler leider nicht rausbekommen habe habe ich einen anderen Ansatz gewählt, den wollte ich hier nur kurz mitteilen falls jemand auch mal über so ein Problem stolpert. Ich habe jetzt zwei Buttons definiert und je nachdem was in der Variable steht zeige ich den einen oder den anderen an und setzte mit diesem nur einen Zustand. Der benötigt dann auch kein Input Bindung. Hier mal der Code dazu:
<ftui-column>
<ftui-button (value)="set debmatic var Schlafmodus_Eltern true"
[hidden]="debmatic:Schlafmodus_Eltern | map('true:true, false:false')">
<ftui-icon name="child"></ftui-icon>
</ftui-button>
<ftui-button (value)="set debmatic var Schlafmodus_Eltern false"
[hidden]="debmatic:Schlafmodus_Eltern | map('false:true, true:false')">
<ftui-icon name="bed"></ftui-icon>
</ftui-button>
<ftui-label class="size-0">Eltern</ftui-label>
</ftui-column>
@OdfFhem
Hi, Leider muss ich schon wieder deinen Namen nennen :)
Ich hätte eine bitte an dich.
Könntest du vielleicht das "alte" calview_widget für FTUI3 umschreiben/aufleben lassen? Du hast da ja sehr aktiv mitgewirkt.
Also es geht um ein "simple calview" für einen Geburtstagskalender.
Der calendar von Thyraz ist mir zu üppig (von der Programmierung) und ich kann ihn nicht nach meinen Bedürfnissen anpassen.
Ich hatte Thyraz deswegen schon angeschrieben, habe aber keine Rückmeldung bekommen.
Im screenshot zeige ich wie mein Layout aussieht. Ich habe es erstmal mit label etc gelöst. Ist halt ein wenig aufwändig...
Ich würde da auch mit helfen wenn du willst.
Danke und Gruß
@mr_petz: Da sollte sich doch was mit FTUI3 Bordmitteln basteln lassen.
@grossmaggul
Habe ich ja schon...
Habe ich auch mitgeteilt. Das bild zeigt die FTUI3 ansicht...
Der Code dafür ist halt laaaaaaang.. ;)
Wenn man das mit content macht, dann hält es sich doch in Grenzen.
ZitatHabe ich ja schon...
Man sollte doch immer alles lesen. ::)
Mir wäre im Moment ein Medialist Widget wichtiger. ::)
Zitat von: grossmaggul am 13 April 2021, 14:37:26
Mir wäre im Moment ein Medialist Widget wichtiger. ::)
TIP: Könntest ja für dich das dropdown als Grundlage nehmen und daraus deine Liste erstellen (wenn setstate da mitgeht)...
nur so ein Gedanke... ::)
Zitat von: grossmaggul am 13 April 2021, 14:37:26
Mir wäre im Moment ein Medialist Widget wichtiger. ::)
Ich hole mir die Medialists von FTUI2 bis es was gibt, genau wie die komplexeren Charts ;D
Gruß
Eisix
ZitatIch hole mir die Medialists von FTUI2 bis es was gibt
Auch ne Idee.:-)
Zitat, genau wie die komplexeren Charts
Charts mache ich mit Grafana, daher stört mich das nicht so.
ZitatKönntest ja für dich das dropdown als Grundlage nehmen
Da müsste ich mich mal schlau machen, wie das gehen könnte.
Ein herzerfirschendes Moin vom achtern Diek vorweg
Wenn man ein <ftui-label> auf ein Reading (Liste der fhem-Updates) eingerichtet hat, dessen Inhalt zu groß für die Kachel ist:
Gibt es eine Moeglichkeit fuer diese Kachel eine Scrollbar zu aktivieren oder muss man mit dem Abschnitt leben?
Gruß
Sailor
Zitat von: mr_petz am 13 April 2021, 10:02:48
Könntest du vielleicht das "alte" calview_widget für FTUI3 umschreiben/aufleben lassen?
Das Thema kann ich mir am Wochenende gerne mal anschauen.
Grundsätzlich finde ich die reine Verwendung von FTUI3 Bordmitteln aber auch nicht schlecht.
Könntest Du (als Einstiegspunkt) mal Deine FTUI2- und FTUI3-Definitionen veröffentlichen ?
Vielleicht starten wir bzw. Du am besten ein "Neues Thema" ...
Danke. Thread ist on.
Zitat von: Sailor am 13 April 2021, 21:05:32
Ein herzerfirschendes Moin vom achtern Diek vorweg
Wenn man ein <ftui-label> auf ein Reading (Liste der fhem-Updates) eingerichtet hat, dessen Inhalt zu groß für die Kachel ist:
Gibt es eine Moeglichkeit fuer diese Kachel eine Scrollbar zu aktivieren oder muss man mit dem Abschnitt leben?
Gruß
Sailor
ich habe jetzt ein scroll Attribute bei ftui-label eingebaut. Damit geht das so:
<ftui-grid-tile row="2" col="9" height="1" width="2" shape="round">
<header>LONG</header>
<ftui-label margin="1" scroll>
Lorem Ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</ftui-label>
</ftui-grid-tile>
Hallo setstate
Zitat von: setstate am 13 April 2021, 22:29:51
ich habe jetzt ein scroll Attribute bei ftui-label eingebaut. Damit geht das so:
Funzt! Danke!
Gruß
Sailor
Moin zusammen
Ich beobachte gerade, dass meine Charts sich nicht fortlaufend automatisch "updaten".
Erst nach einem "F5" stehen die aktuellen Werte da.
Bei den anderen Elementen (e.g. Buttons, Slider etc.) werden die Werte automatisch aktuell übermittelt.
Ist das ein Bug oder ein Feature?
Gruß
Sailor
Hallo zusammen,
ich bin weiter beschäftigt mit der Migration von FTUI2 auf FTUI3.
In FTUI2 frage ich Button auf disable ab, um diese dann zu deaktivieren.
Ich habe mich jetzt ein bisschen in den Code von FTUI eingearbeitet und folgende Anpassungen zu Testzwecken gemacht:
button.component.js:
static get properties() {
return {
states: 'on,off',
fill: 'solid',
color: 'primary',
size: 'normal',
shape: 'normal',
direction: 'horizontal',
value: 'off',
disable: 0
};
button.component.css:
:host([disable="1"]) {
background: #9b2020;
}
Jetzt bekomme ich den Hintergrund Rot angezeigt, wenn der Butten in fhem disabled ist.
Wo muss ich hinlangen, damit der Button selbst das Attribut disabled bekommt? Hat jemand eine Idee?
Viele Grüße
Marc
Alle Componenten erben von FtuiElement das Attribute "disabled"
Mit gesetztem disabled ist dann das Element nicht mehr bedienbar und mit einem grau+blur-Effekt als nicht mehr bedienbar visualisiert.
<ftui-slider [(value)]="ftuitest" min="10" max="70" disabled>
</ftui-slider>
Wenn man diese Eigenschaft von FHEM aus steuern will, muss man das Attribute disabled mit einem Fhem-Reading binden.
<ftui-slider [(value)]="ftuitest" min="10" max="70" [disabled]="ftuitest:disable | toBool()">
</ftui-slider>
<ftui-slider [(value)]="ftuitest" min="10" max="70" [disabled]="ftuitest:reachable | map('0=true, 1=false')">
</ftui-slider>
Es müsste doch auch so gehen ohne in der js und css was zu ändern:
<ftui-button
[(value)]="ftuitest"
states="on,disabled"
[color]="ftuitest | map('disabled:red, on:blue')"
[text]="ftuitest | map('disabled:disabled, on:on')">
</ftui-button>
oder habe ich was falsch verstanden?
Moin zusammen,
gibt es schon einen Timer für tabview? Ich meine das er nach einer gewissen Zeit wieder zb. den HomeTab anzeigt.
Grüße
Torte
Zitat von: setstate am 15 April 2021, 08:48:10
<ftui-slider [(value)]="ftuitest" min="10" max="70" [disabled]="ftuitest:disable | toBool()">
</ftui-slider>
Danke für Eure Antworten.
Das Beispiel oben funktioniert initial sehr gut. So ähnlich hatte ich es auch schon versucht, aber mir fehlte das " | toBool()".
Leider funktioniert es nur, wenn die Seite komplett neu geladen wird. FTUI bekommt zwar die Änderung von disable in FHEM mit, aber danach ist der Button komplett Weiss bzw. verschwindet.
Hat jemand eine Idee?
Zitat von: torte am 15 April 2021, 09:25:57
Moin zusammen,
gibt es schon einen Timer für tabview? Ich meine das er nach einer gewissen Zeit wieder zb. den HomeTab anzeigt.
Grüße
Torte
nein, noch nicht. Das wollte ich noch einbauen.
Hallo und guten Abend,
kann mir von euch jemand mal auf die Sprünge helfen wie ich hier ein Chart von Grafana eingebunden bekomme, stehe zur Zeit etwas auf dem Schlauch. Ich habe es über Image probiert, funzt aber nicht:
<ftui-image src="http://192.168.179.50:3000/d-solo/TI2UB-kgk/stromverbrauch?orgId=1&from=now-6h&to=now&panelId=8"></ftui-image>
Bekomme nur ein "Image not available".
Zitat von: meier81 am 17 April 2021, 20:57:28
Hallo und guten Abend,
kann mir von euch jemand mal auf die Sprünge helfen wie ich hier ein Chart von Grafana eingebunden bekomme, stehe zur Zeit etwas auf dem Schlauch. Ich habe es über Image probiert, funzt aber nicht:
<ftui-image src="http://192.168.179.50:3000/d-solo/TI2UB-kgk/stromverbrauch?orgId=1&from=now-6h&to=now&panelId=8"></ftui-image>
Bekomme nur ein "Image not available".
Wollt nur Bescheid geben, hat sich erledigt, am nächsten Tag nochmal mit frischem Kopf schauen erweist sich doch als gut ;D
<ftui-row>
<ftui-column>
<iframe src="http://192.168.179.50:3000/d-solo/TI2UB-kgk/stromverbrauch?orgId=1&from=now-6h&to=now&panelId=8" style="overflow:hidden; border:0; width:100%; height:100%;"></iframe>
</ftui-column>
</ftui-row>
Moin zusammen
Ich habe mal eine Syntax - Frage:
Wie kann ich in dem Code
<ftui-icon name = "weather_uv-warning"
[color] = "TestDummy | map('0:green, 2:yellow, 6:amber, 8:red, 11:purple')"
class = "size-3">
</ftui-icon>
den Farbcode so einfügen, dass ich die Hexadezimalwerte verwenden kann?
Der Versuch
<ftui-icon name = "weather_uv-warning"
[color] = "TestDummy | map('0:#00ff00, 2:#ffff00, 6:#ffa500, 8:#ff0000, 11:#ff00ff')"
class = "size-3">
</ftui-icon>
funktioniert leider nicht...
Danke
Gruss
Sailor
Kann das color Attribut überhaupt mit hex-Werten umgehen? Aber wenn, dann mal in ` setzen:
<ftui-icon name = "weather_uv-warning"
[color] = "TestDummy | map('0:`#00ff00`, 2:`#ffff00`, 6:`#ffa500`, 8:`#ff0000`, 11:`#ff00ff`')"
class = "size-3">
</ftui-icon>
Ansonsten mal mit inline CSS versuchen:
<ftui-icon name = "weather_uv-warning"
[style] = "TestDummy | map('0:`color: #00ff00;`, 2:`color: #ffff00;`, 6:`color: #ffa500;`, 8:`color: #ff0000;`, 11:`color: #ff00ff;`')"
class = "size-3">
</ftui-icon>
ZitatKann das color Attribut überhaupt mit hex-Werten umgehen?
Soweit ich weiß, nein, recht weit vorne im Strang schrieb setstate auch mal warum das so ist.
Ah, gefunden (https://forum.fhem.de/index.php/topic,115259.msg1100492.html#msg1100492), etwa in der Mitte des Postings.
Zitat von: grossmaggul am 20 April 2021, 16:20:33
Soweit ich weiß, nein, recht weit vorne im Strang schrieb setstate auch mal warum das so ist.
Ah, gefunden (https://forum.fhem.de/index.php/topic,115259.msg1100492.html#msg1100492), etwa in der Mitte des Postings.
Schade
Ich habe gedacht, man könnte mittels Manipulation des myftui.css datei so manipulieren
[color="orange"] {
--color-base: #ff4500
--color-contrast: var(--orange);
}
[color="violet"] {
--color-base: #9400d3
--color-contrast: var(--violet);
}
die zwei Farben noch hinzuzufügen.
Ansonsten kann ich nicht die volle Palette des UV-Index darstellen weil mir noch Orange und Violet fehlen
https://www.bfs.de/SharedDocs/Bilder/BfS/DE/opt/uv/uv-Index.jpg?__blob=poster&v=5 (https://www.bfs.de/SharedDocs/Bilder/BfS/DE/opt/uv/uv-Index.jpg?__blob=poster&v=5)
Gruß
Sailor
Das geht schon.
1. Musst natürlich deine "mytui.css" einbinden --> <link href....
2. Wo hast du die Variablen '--orange' und --violet definiert --> ggf. besser -color-contrast: var(--dark-contrast-color) oder so verwenden
So jetzt mein Problem ;)
badge (und wahrscheinlich auch label) stellen keine '0' (Null) dar.
Auch eine Ersetzung mit replace(/^0$/,'0')" (html code) geht nicht.
1. Kann das jemand bestätigen?
2. hat jemand eine Lösungsidee? - meine Lsg. replace(/^0$/,'O')" (Ersetzung mit Buchstaben O) gefällt mir nicht so wirklich.
Wahrscheinlich liegt es hieran!?
:host(.is-empty) { display: none; }
Hi Risiko
Zitat von: Risiko am 21 April 2021, 20:22:50
1. Musst natürlich deine "mytui.css" einbinden --> <link href....
2. Wo hast du die Variablen '--orange' und --violet definiert --> ggf. besser -color-contrast: var(--dark-contrast-color) oder so verwenden
die myftui.css ist eingebunden. Ist auch bestätigt, da die anderen Funktionen funktionieren...
body.background-0, body.background-1, body.background-2,
body.background-3, body.background-4, body.background-5,
body.background-6 {
background-color: transparent;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-clip: border-box;
}
body.background-0 { background-image: url('./images/Background-0.png'); }
body.background-1 { background-image: url('./images/Background-1.png'); }
body.background-2 { background-image: url('./images/Background-2.png'); }
body.background-3 { background-image: url('./images/Background-3.png'); }
body.background-4 { background-image: url('./images/Background-4.png'); }
body.background-5 { background-image: url('./images/Background-5.png'); }
body.background-6 { background-image: url('./images/Background-6.png'); }
.semitransparent {
background: rgba(0, 0, 0, 0.7) !important;
}
.supsub {position: absolute}
.subscript {color: green; display:block; position:relative; left:2px; top: -5px}
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}
[color="orange"] {
--color-base: #ff4500
--color-contrast: var(--dark-contrast-color)
}
[color="violet"] {
--color-base: #9400d3
--color-contrast: var(--dark-contrast-color)
}
Funktioniert aber leider nicht, das Icon
<ftui-icon name = "weather_uv-warning"
[color] = "TestDummy | map('0:green, 2:yellow, 6:orange, 8:red, 11:violet')"
class = "size-3">
</ftui-icon>
bleibt Wert 2-5 und 11+ leider grau.
Gruß
Sailor
Vielleicht weil hinter dem Farbcode bzw. überall am Ende ein ';' fehlt ?
Hi Risiko
Zitat von: Risiko am 21 April 2021, 20:29:17
So jetzt mein Problem ;)
badge (und wahrscheinlich auch label) stellen keine '0' (Null) dar.
1. Kann das jemand bestätigen?
Kann ich bestätigen. Ist aber auch bei ftui v2 schon so gewesen.
Ist also kein Bug sondern ein Feature.
Gruß
Sailor
Zitat von: Risiko am 21 April 2021, 20:29:17
So jetzt mein Problem ;)
badge (und wahrscheinlich auch label) stellen keine '0' (Null) dar.
Auch eine Ersetzung mit replace(/^0$/,'0')" (html code) geht nicht.
1. Kann das jemand bestätigen?
2. hat jemand eine Lösungsidee? - meine Lsg. replace(/^0$/,'O')" (Ersetzung mit Buchstaben O) gefällt mir nicht so wirklich.
Wahrscheinlich liegt es hieran!?
:host(.is-empty) { display: none; }
Kann nur das badge bestätigen.
Du kannst aber eine Leerstelle vor die 0 setzen, dann wird die im badge angezeigt...:
<ftui-badge color="danger"
[text]="test:test | map('neu:` 0`,alt:``')"
[hidden]="test:test | map('neu:false, alt:true')">
</ftui-badge>
Beispiel eines map.
Im Label gehts bei mir auch so...
<ftui-label text="0">0</ftui-label>hier werden beide Nullen angezeigt.
Liegt dann am Reading oder wie es Verarbeitet wird.Nein geht auch aus dem reading raus bsp.:
<ftui-label [text]="test1"></ftui-label> hier ist state 0
Zitat von: Risiko am 21 April 2021, 20:39:53
Vielleicht weil hinter dem Farbcode bzw. überall am Ende ein ';' fehlt ?
Jetzt wir "orange" schwarz und "violet" wird unsichtbar... :o
Gruß
Sailor
Zitat von: grossmaggul am 13 April 2021, 14:37:26
Mir wäre im Moment ein Medialist Widget wichtiger. ::)
Hat setstate jetzt schon gebaut...
LG
Oh, fein, werde ich mir gleich mal zu Gemüte führen, danke setstate!
Gerade mal kurz angetestet funktioniert leider nicht, zumindest nicht mit squeezebox, wahrscheinlich mache ich mal wieder was falsch.
<ftui-medialist [list]="wz.krachnase_air:ftuiMedialist"
[track]="wz.krachnase_air:currentTitle"
(track)="setreading wz.krachnase_air:currentTitle">
</ftui-medialist>
Die Liste in <ftuiMedialist> sieht so aus:
{"Artist":"Earth, Wind & Fire","Title":"Sing A Song","Album":"The Best Of","Time":"203","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/10%20Sing%20A%20Song.mp3","Track":"10","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},{"Artist":"Earth, Wind & Fire","Title":"Got To Get You Into My Life","Album":"The Best Of","Time":"243","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/01%20Got%20To%20Get%20You%20Into%20My%20Life.mp3","Track":"1","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},...
Die zwei Farben habe ich auch noch hinzugefügt
siehe Beispiel hier: https://knowthelist.github.io/ftui/www/ftui/examples/colors.html
Zitat von: grossmaggul am 21 April 2021, 23:04:57
Die Liste in <ftuiMedialist> sieht so aus:
{"Artist":"Earth, Wind & Fire","Title":"Sing A Song","Album":"The Best Of","Time":"203","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/10%20Sing%20A%20Song.mp3","Track":"10","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},{"Artist":"Earth, Wind & Fire","Title":"Got To Get You Into My Life","Album":"The Best Of","Time":"243","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/01%20Got%20To%20Get%20You%20Into%20My%20Life.mp3","Track":"1","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},...
Probiere Deine Liste in dieser Form aus:
[{"Artist":"Earth, Wind & Fire","Title":"Sing A Song","Album":"The Best Of","Time":"203","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/10%20Sing%20A%20Song.mp3","Track":"10","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},{"Artist":"Earth, Wind & Fire","Title":"Got To Get You Into My Life","Album":"The Best Of","Time":"243","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/01%20Got%20To%20Get%20You%20Into%20My%20Life.mp3","Track":"1","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"}]Dir fehlen die [] Klammern...
Gruß
Edit:
@setstate
Du hast glaube das Album nicht mit in die fillList reingenommen...
(soll keine Kritik sondern ein Hinweis sein!)
ZitatProbiere Deine Liste in dieser Form aus:
Die Liste wird von squeezebox im Reading "ftuiMedialist" bereitgestellt, die kann ich nicht ändern.
Mir ist noch aufgefallen, daß die ftui Oberfläche nicht mehr bündig in der oberen linken Ecke sitzt sondern jetzt oben und links etwas eingerückt ist, soll das so?
Kommando zurück, beim Update ist wohl irgendwas schief gelaufen.:-/
Schau ich mir an, ob man das flexibler machen kann.
Wegen der Abstände: hast du das letzte Update? Bei den Margins musste ich gestern noch was nach-korrigieren.
ZitatWegen der Abstände: hast du das letzte Update?
Nein, hatte ich wohl nicht.
Hi setstate
Zitat von: setstate am 22 April 2021, 00:21:01
Die zwei Farben habe ich auch noch hinzugefügt
siehe Beispiel hier: https://knowthelist.github.io/ftui/www/ftui/examples/colors.html
Ick könnt dir knutschen! ;D
Gruß
Sailor
Das Anzeigen der Medialiste funktioniert, nur das Auswählen eines Titels funktioniert nicht recht. Beim Klicken auf einen Eintrag werden mehrere Titel ausgewählt und die Werte die übergeben werden ergeben auch irgendwie keinen Sinn.
Guten Abend,
hab eine Frage an euch bezüglich eines kleinen "Schönheitsproblems" meiner Seite. Ich bekomme es nicht hin das die Content-Seite an der unten Kante gleich wie das Menü abschließt, die Content-Seite wird da etwas abgeschnitten. Habe schon einiges probiert, finde aber die richtige "Schraube" nicht. Hab euch mal einen Screenshot des Problems angefügt und zudem die Definitionen der html-Dateien.
Ihr könnt das Problem an der Unterkante des Schlafmodus-Grids sehen.
index.html:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<!-- when serving the page with other web servers, e.g. lighttpd -->
<!-- <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/"> -->
<!-- verbose level 0-4 -->
<meta name="debug" content="2">
<title>FHEM - Hausautomatisierung</title>
</head>
<body>
<ftui-grid base-width="150" base-height="150">
<ftui-grid-tile row="1" col="1" height="5" width="1" shape="round">
<header>Menü</header>
<ftui-column>
<ftui-tab view="View1" direction="vertical" active>
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="View2" direction="vertical">
<ftui-icon name="music"></ftui-icon>
<ftui-label>Music</ftui-label>
</ftui-tab>
<ftui-tab view="View3" direction="vertical">
<ftui-icon name="feed"></ftui-icon>
<ftui-label>Feed</ftui-label>
</ftui-tab>
<ftui-tab view="View4" direction="vertical">
<ftui-icon name="lightbulb"></ftui-icon>
<ftui-label>Licht</ftui-label>
</ftui-tab>
<ftui-tab view="View5" direction="vertical">
<ftui-icon name="bath"></ftui-icon>
<ftui-label>Bad</ftui-label>
</ftui-tab>
<ftui-tab view="View6" direction="vertical">
<ftui-icon name="road"></ftui-icon>
<ftui-label>Verkehr</ftui-label>
</ftui-tab>
<ftui-tab view="View7" direction="vertical">
<ftui-icon name="camera"></ftui-icon>
<ftui-label>Kamera</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="View1">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-content file="content-home.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View2">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-content file="content-heizung.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View3">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-content file="content-energie.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View4">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-content file="examples/contents/content-rows.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View5">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-content file="examples/contents/content-grid.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View6">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-content file="examples/contents/content-components.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View7">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-content file="examples/contents/content-components2.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
content-home.html:
<ftui-grid base-width="70" base-height="150">
<ftui-grid-tile row="1" col="1" height="1" width="3" shape="round">
<header>Datum + Uhrzeit</header>
<ftui-clock format="hh:mm:ss" class="size-6"></ftui-clock>
<ftui-clock format="eeee" class="size-3"></ftui-clock>
<ftui-clock format="DD.MM.YYYY" class="size-3"></ftui-clock>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="4" height="1" width="3" shape="round">
<header>Rollladen</header>
<ftui-row>
<ftui-column>
<ftui-circlemenu keep-open>
<ftui-button shape="circle" fill="outline" color="light">
<ftui-label class="big" [text]="Rolladen_Wohnzimmer:pct"></ftui-label>
</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer:pct" states='100'
[color]="Rolladen_Wohnzimmer:pct | map('`100`: primary, .*: light')">
<span class="big">100</span>
</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer:pct" states='50'
[color]="Rolladen_Wohnzimmer:pct | map('´50´: primary, .*: light')">
<span class="big">50</span>
</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer:pct" states='10'
[color]="Rolladen_Wohnzimmer:pct | map('´10´: primary, .*: light')">
<span class="big">10</span>
</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer:pct" states='0'
[color]="Rolladen_Wohnzimmer:pct | map('´0´: primary, .*: light')">
<span class="big">0</span>
</ftui-button>
</ftui-circlemenu>
<ftui-label>Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-circlemenu keep-open style="height:3em">
<ftui-button shape="circle" fill="outline" color="light">
<ftui-label class="big" [text]="Rolladen_Wohnzimmer_Tuer:pct"></ftui-label>
</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer_Tuer:pct" states='100'
[color]="Rolladen_Wohnzimmer_Tuer:pct | map('`100`: primary, .*: light')">
<span class="big">100</span>
</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer_Tuer:pct" states='50'
[color]="Rolladen_Wohnzimmer_Tuer:pct | map('´50´: primary, .*: light')">
<span class="big">50</span>
</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer_Tuer:pct" states='10'
[color]="Rolladen_Wohnzimmer_Tuer:pct | map('´10´: primary, .*: light')">
<span class="big">10</span>
</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer_Tuer:pct" states='0'
[color]="Rolladen_Wohnzimmer_Tuer:pct | map('´0´: primary, .*: light')">
<span class="big">0</span>
</ftui-button>
</ftui-circlemenu>
<ftui-label>Tür</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="7" height="2" width="12" shape="round">
<header>Wettervorhersage</header>
<ftui-content file="content-weather.html"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="1" height="1" width="6" shape="round">
<header>Müll</header>
<ftui-row>
<ftui-column>
<ftui-icon name="trash" color="black" [class-name]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
<ftui-badge [text]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
[color]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:red, 1:yellow')"
[hidden]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
</ftui-badge> <!-- Heute und Morgen -->
<ftui-badge [text]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days"
[hidden]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->
</ftui-column>
<ftui-column>
<ftui-icon name="trash" color="yellow" [class-name]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
<ftui-badge [text]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
[color]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:red, 1:yellow')"
[hidden]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
</ftui-badge> <!-- Heute und Morgen -->
<ftui-badge [text]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days"
[hidden]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->
</ftui-column>
<ftui-column>
<ftui-icon name="trash" color="blue" [class-name]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
<ftui-badge [text]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
[color]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:red, 1:yellow')"
[hidden]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
</ftui-badge> <!-- Heute und Morgen -->
<ftui-badge [text]="Abfall:Abfallkalender_PapierinBadDuerkheim_days"
[hidden]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->
</ftui-column>
<ftui-column>
<ftui-icon name="trash" color="green" [class-name]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
<ftui-badge [text]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
[color]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:red, 1:yellow')"
[hidden]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
</ftui-badge> <!-- Heute und Morgen -->
<ftui-badge [text]="Abfall:Abfallkalender_BioinBadDuerkheim_days"
[hidden]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->
</ftui-column>
<ftui-column>
<ftui-icon name="trash" color="red" [class-name]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
<ftui-badge [text]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
[color]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:red, 1:yellow')"
[hidden]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
</ftui-badge> <!-- Heute und Morgen -->
<ftui-badge [text]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days"
[hidden]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="1" height="1" width="5" shape="round">
<header>Raumfühler</header>
<ftui-row>
<ftui-column>
<ftui-label class="size-7" [text]="Fuehler_Wohnzimmer:temperature"
[color]="Fuehler_Wohnzimmer:temperature | map('0:blue, 24:yellow, 26:red')"><span class="size-0" slot="end">°C</span>
</ftui-label>
<ftui-label class="size-0">Temperatur</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label class="size-7" [text]="Fuehler_Wohnzimmer:humidity"
[color]="Fuehler_Wohnzimmer:humidity | map('0:blue, 60:yellow, 65:red')"><span class="size-0" slot="end">%</span>
</ftui-label>
<ftui-label class="size-0">Feuchte</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label class="size-7" [text]="Fuehler_Wohnzimmer:dewpoint"
[color]="Fuehler_Wohnzimmer:dewpoint | map('0:blue, 10:yellow, 12:red')"><span class="size-0" slot="end">°C</span>
</ftui-label>
<ftui-label class="size-0">Taupunkt</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="13" height="2" width="6" shape="round">
<header>Raumfühler</header>
<ftui-content file="content-fuehler.html"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="1" height="1" width="2" shape="round">
<header>Rolladen</header>
<ftui-icon class="size-5" name="window-shutter" popup-target="pop1"></ftui-icon>
</ftui-grid-tile>
<ftui-popup id="pop1" width="500px" height="600px" timeout="0" shape="round">
<header>Rolladen</header>
<ftui-content file="content-rolladen.html"></ftui-content>
</ftui-popup>
<ftui-grid-tile row="4" col="3" height="1" width="2" shape="round">
<header>Waschmaschine</header>
<ftui-icon class="size-5" name="washing-machine"
[color]="di_Waschmaschine | map('on: green, off: light')">
</ftui-icon>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="5" height="1" width="2" shape="round">
<header>Trockner</header>
<ftui-icon class="size-5" name="tumble-dryer"
[color]="di_Trockner | map('on: green, off: light')">
</ftui-icon>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="7" height="1" width="2" shape="round">
<header>Anrufbeantworter</header>
<ftui-row>
<ftui-column>
<ftui-icon class="size-5" name="phone" [color]="FritzBox7590:tam1_newMsg | map('0:light,1:yellow')"></ftui-icon>
<ftui-badge [text]="FritzBox7590:tam1_newMsg"
[hidden]="FritzBox7590:tam1_newMsg | map('0:true, 1:false')" class="size-0">
</ftui-badge>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="5" col="1" height="1" width="4" shape="round">
<header>Schlafmodus</header>
<ftui-row>
<ftui-column>
<ftui-button (value)="set debmatic var Schlafmodus_Eltern true"
[hidden]="debmatic:Schlafmodus_Eltern | map('true:true, false:false')">
<ftui-icon name="child"></ftui-icon>
</ftui-button>
<ftui-button (value)="set debmatic var Schlafmodus_Eltern false"
[hidden]="debmatic:Schlafmodus_Eltern | map('false:true, true:false')">
<ftui-icon name="bed"></ftui-icon>
</ftui-button>
<ftui-label class="size-0">Eltern</ftui-label>
</ftui-column>
<ftui-column>
<ftui-button (value)="set debmatic var Schlafmodus_Elias true"
[hidden]="debmatic:Schlafmodus_Elias | map('true:true, false:false')">
<ftui-icon name="child"></ftui-icon>
</ftui-button>
<ftui-button (value)="set debmatic var Schlafmodus_Elias false"
[hidden]="debmatic:Schlafmodus_Elias | map('false:true, true:false')">
<ftui-icon name="bed"></ftui-icon>
</ftui-button>
<ftui-label class="size-0">Elias</ftui-label>
</ftui-column>
<ftui-column>
<ftui-button (value)="set debmatic var Schlafmodus_Constantin true"
[hidden]="debmatic:Schlafmodus_Constantin | map('true:true, false:false')">
<ftui-icon name="child"></ftui-icon>
</ftui-button>
<ftui-button (value)="set debmatic var Schlafmodus_Constantin false"
[hidden]="debmatic:Schlafmodus_Constantin | map('false:true, true:false')">
<ftui-icon name="bed"></ftui-icon>
</ftui-button>
<ftui-label class="size-0">Constantin</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="5" col="5" height="1" width="2" shape="round">
<header>Licht</header>
<ftui-button [(value)]="Steckdose_Sideboard">
<ftui-icon [name]="Steckdose_Sideboard | map('.*on:lightbulb-on, .*off:lightbulb-off')"></ftui-icon>
</ftui-button>
<ftui-label class="size-0">Sideboard</ftui-label>
</ftui-grid-tile>
</ftui-grid>
Zudem wäre noch meine Frage wie ich die Seite komplett in den Browser einpassen kann, also noch etwas nach rechts und etwas nach unten vergrößern.
Mercy mal, Gruß Markus
Das ist zweimal das gleiche File angefügt. Es fehlt die content-home.html
Zitat von: meier81 am 22 April 2021, 21:29:15
hab eine Frage an euch bezüglich eines kleinen "Schönheitsproblems" meiner Seite. Ich bekomme es nicht hin das die Content-Seite an der unten Kante gleich wie das Menü abschließt, die Content-Seite wird da etwas abgeschnitten. Habe schon einiges probiert, finde aber die richtige "Schraube" nicht. Hab euch mal einen Screenshot des Problems angefügt und zudem die Definitionen der html-Dateien.
Hallo Markus,
ich hatte ein ähnliches Problem und hatte meine Lösung hier https://forum.fhem.de/index.php/topic,115259.msg1148545.html#msg1148545 (https://forum.fhem.de/index.php/topic,115259.msg1148545.html#msg1148545)beschrieben.
Vieleicht hilft das bei dir auch.
VG
Marc
Zitat von: setstate am 22 April 2021, 21:45:28
Das ist zweimal das gleiche File angefügt. Es fehlt die content-home.html
Habe ich angepasst, ist jetzt das richtige File, siehe Post #1288.
Zitat von: Init am 23 April 2021, 16:50:26
Hallo Markus,
ich hatte ein ähnliches Problem und hatte meine Lösung hier https://forum.fhem.de/index.php/topic,115259.msg1148545.html#msg1148545 (https://forum.fhem.de/index.php/topic,115259.msg1148545.html#msg1148545)beschrieben.
Vieleicht hilft das bei dir auch.
VG
Marc
Hallo Marc,
hab mir eben mal deine Variante angeschaut und zum Test mal eingespielt, sieht auch super aus. Habe für mich mal ein paar Sachen wie die Farben etc. angepasst, ich auch eine schöne Lösung.
Eine Frage hätte ich an dich noch, hast du das mit dem Seitennamen oben in der Mitte des Headers laufen? So wie in deinem Beitrag beschrieben funktioniert das bei mir nämlich nicht.
Gruß Markus
Ich spiele gerade mit der Medialist rum, folgendes Konstrukt erzeugt eine Medialist:
<ftui-grid-tile row="1" col="6" height="8" width="5" shape="round" class="semitransparent">
<header>Medialist</header>
<ftui-medialist [list]="bz.yamaha_air:ftuiMedialist"
[track]="bz.yamaha_air:track"
(track)="set bz.yamaha_air:track">
</ftui-medialist>
</ftui-grid-tile>
Das funktioniert soweit, nur das Anwählen einzelner Tracks funktioniert nicht wirklich.
Ich habe mal eine kleine Testplaylist erstellt, die von Fhem squeezebox im Reading "ftuiMedialist" folgendermaßen aussieht:
[{"Artist":"Beatsteaks","Title":"Summer","Album":"Living Targets","Time":"206","File":"file:///media/nas/music/Beatsteaks/Living%20Targets/01%20Summer.mp3","Track":"1","Cover":"http://192.168.1.12:9000/music/0bfb13ba/cover_50x50_o"},{"Artist":"Canned Heat","Title":"On The Road Again","Album":"Boogie with Canned Heat","Time":"203","File":"file:///media/nas/music/Canned%20Heat/Boogie%20with%20Canned%20Heat/03%20On%20The%20Road%20Again.mp3","Track":"3","Cover":"http://192.168.1.12:9000/music/ccf35309/cover_50x50_o"},{"Artist":"David Lee Roth","Title":"California Girls","Album":"Crazy From The Heat","Time":"170","File":"file:///media/nas/music/David%20Lee%20Roth/Crazy%20From%20The%20Heat/03%20California%20Girls.mp3","Track":"3","Cover":"http://192.168.1.12:9000/music/c25eac12/cover_50x50_o"},{"Artist":"Emerson, Lake & Palmer","Title":"Lucky Man","Album":"Emerson, Lake & Palmer","Time":"270","File":"file:///media/nas/music/Emerson,%20Lake%20&%20Palmer/Emerson,%20Lake%20&%20Palmer/08%20Lucky%20Man.mp3","Track":"8","Cover":"http://192.168.1.12:9000/music/c0735cbc/cover_50x50_o"},{"Artist":"Gary Moore","Title":"Parisienne walkways","Album":"Ballads & Blues 1982-1994","Time":"407","File":"file:///media/nas/music/Gary%20Moore/Ballads%20&%20Blues%201982-1994/04%20Parisienne%20walkways.mp3","Track":"4","Cover":"http://192.168.1.12:9000/music/1b1a7e46/cover_50x50_o"},{"Artist":"Madness","Title":"Baggy Trousers","Album":"Divine Madness","Time":"159","File":"file:///media/nas/music/Madness/Divine%20Madness/05%20Baggy%20Trousers.mp3","Track":"5","Cover":"http://192.168.1.12:9000/music/0fdf0b81/cover_50x50_o"},{"Artist":"The Brian Setzer Orchestra","Title":"The Dirty Boogie","Album":"The Dirty Boogie","Time":"193","File":"file:///media/nas/music/The%20Brian%20Setzer%20Orchestra/The%20Dirty%20Boogie/02%20The%20Dirty%20Boogie.mp3","Track":"2","Cover":"http://192.168.1.12:9000/music/b59c6a53/cover_50x50_o"},{"Artist":"Toy Dolls","Title":"We're Mad","Album":"A Far Out Disc","Time":"297","File":"file:///media/nas/music/Toy%20Dolls/A%20Far%20Out%20Disc/13%20We%27re%20Mad.mp3","Track":"13","Cover":"http://192.168.1.12:9000/music/c68dfece/cover_50x50_o"}]
Wenn ich auf den ersten Eintrag in ftui klicke wird Tack Eins abgespielt, soweit ist das ja auch richtig, klicke ich dann aber auf Track 2, wird Track 3 abgespielt, ich drösele das mal etwas auf, vielleicht hilft es ja.
Geklickt Abgespielt
Track 1. Track 1
Track 2. Track 3
Track 3. Track 3
Track 4. Track 8
Track 5. Track 4
Track 6. Track 5
Track 7. Track 2
Track 8. Track 5 (Toast zeigt aber Track 13)
Hinzu kommt, daß beim Anwählen von Track 2 sowohl Track 2, als auch Tack 3 angewählt dargestellt werden.
gm
@ grossmaggul
Hast du auch noch mehr Tracks die höher als Tracknummer 9 sind?
Ist nur zum Testen ob da auch der falsche Track abgespielt wird!
Vielleicht hängt es an der Zahl??? k.A.? Nur so ein Gedanke...
Ich habe es auch mit Listen, die wesentlich mehr Einträge hatten ausprobiert, da konnte ich aber nicht mehr nachvollziehen was da wo hin gesprungen ist.
Da wählt man den ersten Eintrag in der Liste und es wird irgendwo weit hinten in die Liste gesprungen, die Zahl die Toast anzeigt ist aber auch falsch.
Läuft das denn bei irgendjemandem so wie es soll?
Habe ein ähnliches Verhalten wie bei grossmaggul.
Gruß
Eisix
Guten Morgen,
hab mal wieder etwas weiter gebastelt und habe gerade folgendes Problem: Ich würde gerne in meinem header den Raumnamen anzeigen, hab ihn folgendermaßen zugewiesen:
<ftui-tab-view id="View1">
<ftui-content file="content-home.html" room="Room1"></ftui-content>
</ftui-tab-view>
und dann folgendermaßen abgefragt:
<ftui-column>{{room}}</ftui-column>
Wenn ich die Abfrage des Raumnamens in der content-home.html mache funktioniert das auch einwandfrei, ich würde die Abfrage ja aber gerne für den header benutzen der ja in der index.html angegeben ist, dort funktioniert es aber nicht.
Gibt es da die Möglichkeit das so zu benutzten?
Der Vollständigkeit halber hier meine gesamte index.html:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="themes/custom.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width, initial-scale=0.95">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- verbose level 0-4 -->
<meta name="debug" content="2">
<title>FHEM - Hausautomatisierung</title>
</head>
<body>
<header>
<ftui-row>
<ftui-column width="20%"><ftui-clock format="hh:mm:ss" class="size-3" color="warning"></ftui-clock></ftui-column>
<ftui-column>{{room}}</ftui-column>
<ftui-column width="20%"><ftui-clock format="eeee, DD.MMMM YYYY" class="size-3" color="warning"></ftui-clock></ftui-column>
</ftui-row>
</header>
<main>
<ftui-tab-view id="View1">
<ftui-content file="content-home.html" room="Room1"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="View2">
<ftui-content file="content-energie.html" room="Room2"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="View3">
<ftui-content file="content-heizung.html" room="Room3"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="View4">
<ftui-content file="content-heizung.html" room="Room4"></ftui-content>
</ftui-tab-view>
</main>
<footer>
<ftui-tab view="View1" direction="vertical" active>
<ftui-icon name="home1"></ftui-icon>
<label class="small">Home</label>
</ftui-tab>
<ftui-tab view="View2" direction="vertical">
<ftui-icon name="weather-partly-lightning"></ftui-icon>
<label class="small">Energie</label>
</ftui-tab>
<ftui-tab view="View3" direction="vertical">
<ftui-icon name="leaf"></ftui-icon>
<label class="small">Garten</label>
</ftui-tab>
<ftui-tab view="View4" direction="vertical">
<ftui-icon name="music"></ftui-icon>
<label class="small">Multimedia</label>
</ftui-tab>
</footer>
</body>
</html>
Hallo Markus,
leider habe ich aus Zeitmangel noch keine Lösung gesucht, da ich momentan die Prio auf andere Dinge gelegt habe, um eine für mich 100% Basis zu haben.
Aktuell suche ich nach einer Möglichkeit, dass tui-grid-tile die Seite in der Breite mit den Containern immer komplett füllt.
Mit native flex ist das ja möglich. Fraglich ist nur, wie ich das anständig in FTUI eingebunden bekomme.
Und mit @media würde ich gerne abhängig von der Auflösung die Container anders anordnen, damit ich die Seite auf Smartphone, Tablet und PC-Browser optimal angepasst ist.
Viele Grüße
Marc
Hallo
Wenn ich das richtig sehe, dann ist im index.html ein </div> zuviel? Das wäre dann entweder in Zeile 92 oder 97 auf github. Mit meinem gefährlichen Halbwissen würde ich jetzt Zeile 97 durch </ftui-column> ersetzen.
<ftui-grid-tile row="3" col="4" height="2" width="3" shape="round">
<ftui-column>
<div class="row h-40">
<ftui-label>Humidity</ftui-label>
<ftui-label class="size-7" [text]="THSensorWZ:humidity">
<span slot="end" class="size-0">%</span>
</ftui-label>
</div>
<ftui-chart class="row" width="150px" height="75px">
<ftui-chart-data fill log="FileLog_THSensorWZ" spec="4:THSensorWZ.humidity"
[update]="THSensorWZ:state:time"></ftui-chart-data>
</ftui-chart>
</div>
</ftui-grid-tile>
Ein herzerfrischendes Moin vomn achtern Diek
Ich habe mein Control Panel ist soweit fertig und auf dem 27" TouchScreen integriert.
Siehe Anlage (Wetterseite)
Bei 4 Punkten hoffe ich aber noch eure Hilfe bzw. setstate's flinke Finger:
1) DoorBird Stream laesst sich nur im ftui nicht anzeigen. Zweimal hatte es geklappt aber nach 3 Reloads war der Stream wieder weg.
Im Fhem selber mit Weblink bzw. direkt in der Adresszeile eingegeben funktioniert es von Anfang an ohne ohne Probleme.
<ftui-image src = "http://192.168.178.66/bha-api/video.cgi?http-user=Username%26http-password=Geheim!"
height = "150px"
width = "200px"
shape = "round"
popup-target = "frontdoorcam"
interval = "5">
</ftui-image>
2) Es gibt kein ftui3-Modul fuer OpenStreetMap mit PoI.
Im ftui2 gab es https://wiki.fhem.de/wiki/FTUI_Widget_Maps (https://wiki.fhem.de/wiki/FTUI_Widget_Maps)
3) Gegenwaertig habe ich noch keine Wege gefunden, einen Reload - Button bzw. einen ferngesteuerter Reload durchzufuehren.
Diesen brauch man aber nach einen Fhem - Restart, da hierbei die websocket - Verbindung unterbrochen wird.
Eine F5 - Taste steht nicht zur verfuegung, da an dem Control Panel keine Tastatur angebunden ist.
4) Der "popup-close" - button im Popup 2 welches aus einem Popup 1 aufgerufen wird schliesst nicht nur Popup2 sondern auch Popup1 geschlossen.
Besser waere die Option die id mit anzugeben. z.B.: <ftui-button color="danger" popup-close id="PopupName">Close</ftui-button>
Danke fuer Eure Hilfe
Gruss
Sailor
Zitat von: Sailor am 29 April 2021, 15:04:38
3) Gegenwaertig habe ich noch keine Wege gefunden, einen Reload - Button bzw. einen ferngesteuerter Reload durchzufuehren.
Diesen brauch man aber nach einen Fhem - Restart, da hierbei die websocket - Verbindung unterbrochen wird.
Eine F5 - Taste steht nicht zur verfuegung, da an dem Control Panel keine Tastatur angebunden ist.
Hi, als Übergangslösung:
<button onclick="javascript:window.location.reload(true);">Reload</button>
kannst du ja noch stylen per css...
oder so:
<ftui-label class="size-1" @click="javascript:window.location.reload(true);">Reload</ftui-label>
<ftui-button class="size-1" @click="javascript:window.location.reload(true);">Reload</ftui-button>
<ftui-icon class="size-1" name="refresh1" @click="javascript:window.location.reload(true);"></ftui-icon>
Gruß
Hallo Mr. Petz
Zitat von: mr_petz am 29 April 2021, 15:19:29
Hi, als Übergangslösung:
kannst du ja noch stylen per css...
Danke
Habe ich ins ftui uebernommen:
<ftui-button fill = "solid"
class = "size-3"
shape = "circle"
states = "">
<ftui-icon
name = "refresh"
color = "white"
class = "size-2"
onclick = "javascript:window.location.reload(true);">
</ftui-icon>
</ftui-button>
Gruss
Sailor
Zitat von: pingus am 29 April 2021, 14:41:09
Hallo
Wenn ich das richtig sehe, dann ist im index.html ein </div> zuviel? Das wäre dann entweder in Zeile 92 oder 97 auf github. Mit meinem gefährlichen Halbwissen würde ich jetzt Zeile 97 durch </ftui-column> ersetzen.
ja, da hast du Recht. Danke. Erstaunlich, wie tolerant der Browser das abtut. Ich habe es nicht nicht bemerkt. Ich werde mir mal einen html-Linter installieren
@Sailor
Zitat2) Es gibt kein ftui3-Modul fuer OpenStreetMap mit PoI.
Ich selbst nutze eine bislang "kleine" Modul-Variante zur Kartendarstellung.
Kannst Du etwas genauer - mit Beispiel-Tag - beschreiben, was Du darstellen möchtest ?
Hallo OdfFhem
Zitat von: OdfFhem am 30 April 2021, 05:44:01
Ich selbst nutze eine bislang "kleine" Modul-Variante zur Kartendarstellung.
Kannst Du etwas genauer - mit Beispiel-Tag - beschreiben, was Du darstellen möchtest ?
Ich möchte quasi die alte Karte aus ftuiV2 wieder integrieren können.
Diese Karte kann auch eine Datei mit PoI (Points of Interest) darstellen.
Siehe Anlage
Code aus V2
<div id = "TraffictMapBig"
style = "height:100%; width:100%;"
class = "fullsize"
data-type = "maps"
data-device = "UI_GeojsonUpdate"
data-map_type = "OSM"
data-showdetails = "true"
data-mapgroup = "1"
data-language = "en"
data-scrollgroup = "1"
data-traffic = "true"
data-center = "53.569531,9.619997"
data-zoom = "9"
data-stroke = "#FF0000,30,80"
data-geojson = "geojson/features.geojson"
data-feature_style = '{"popup_properties_click":"name address phone website lastupdate arrival vmax timeframe",
"popup_properties_move":"name",
"display_styles":{
"personal.Papa":{ "strokeColor":"yellow","label":"fa-user"},
"personal.Mama":{ "strokeColor":"red" ,"label":"fa-user"},
"personal.Tochter":{ "strokeColor":"green" ,"label":"fa-user"},
"personal.Sohn":{ "strokeColor":"blue" ,"label":"fa-user"},
"poi.home" :{ "strokeColor":"black" ,"label":"fa-home"},
"poi.hospital" :{"icon":"../tablet/images/hospital.png" ,"fontSize":"15px" },
"poi.veterinarian" :{"icon":"../tablet/images/veterinarian.png","fontSize":"15px" },
"emergency.pharmacy" :{"icon":"../tablet/images/pharmacy_de.png" ,"fontSize":"15px" },
"vmax." :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"!" },
"vmax.10" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"10" },
"vmax.20" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"20" },
"vmax.30" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"30" },
"vmax.40" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"40" },
"vmax.50" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"50" },
"vmax.60" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"60" },
"vmax.70" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"70" },
"vmax.80" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"80" },
"vmax.90" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"90" },
"vmax.100" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"100" },
"vmax.110" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"110" },
"vmax.120" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"120" },
"vmax.130" :{"icon":"../tablet/images/Blitzer2.png" ,"fontSize":"15px","strokeColor":"black" ,"label":"130" }
}
}'>
</div>
Gruß
Sailor
Hallo zusammen,
auf meiner alten FTUI-Oberfläche hatte ich ein circle-menu, mit dem ich unser Einfahrtstor für die gewählte Zeit aus dem Menü aufstellen konnte.
Hierfür hatte ich on-for-timer verwendet.
Meine alte Definition sah so aus:
<div data-type="circlemenu" data-direction="left-half" data-item-diameter="1" data-circle-radius="100" class="cell circlemenu">
<ul>
<li>
<div data-type="symbol"
data-device="HMW_NSK1_Toroeffner"
data-on-color="white"
data-off-color="white"
data-on-background-color="green"
data-off-background-color="grey"
data-icon="oa-fts_sliding_gate"
data-background-icon="oa-fts_sliding_gate"
class="yellow bold">
</div>
</li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 60" data-off-background-color="white" class="yellow bold" data-icon="">1</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 300" data-off-background-color="white" class="yellow bold" data-icon="">5</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 600" data-off-background-color="white" class="yellow bold" data-icon="">10</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 900" data-off-background-color="white" class="yellow bold" data-icon="">15</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 1800" data-off-background-color="white" class="yellow bold" data-icon="">30</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 3600" data-off-background-color="white" class="yellow bold" data-icon="">60</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="off" data-off-background-color="white" class="yellow bold" data-icon="">off</div></li>
</ul>
</div>
<div data-type="label" class="large">aufstellen</div>
Hat jemand eine Idee, wie ich das mit FTUI3 realisieren kann?
Ich bin leider noch nicht so fit in FTUI3.
Würde mich freuen, wenn ich Anregungen bekomme.
Gruß
Marc
Zitat von: Init am 30 April 2021, 17:46:14
auf meiner alten FTUI-Oberfläche hatte ich ein circle-menu, mit dem ich unser Einfahrtstor für die gewählte Zeit aus dem Menü aufstellen konnte.
Hierfür hatte ich on-for-timer verwendet.
....
Hat jemand eine Idee, wie ich das mit FTUI3 realisieren kann?
Bin nun ein Stück weiter:
<ftui-circlemenu style="height:3em">
<ftui-button shape="circle" [value]="dummy1" ><ftui-icon name="gate" color="grid"></ftui-icon><ftui-badge color="danger" [text]="dummy1 | map('on-for-timer 5: 5, on-for-timer 10: 10, off: off')"></ftui-badge></ftui-button>
<ftui-button shape="circle" fill="outline" (value)="dummy1:off" [value]="dummy1" [fill]="dummy1 | map('off: outline')">off</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="dummy1:on-for-timer 5" [value]="dummy1" [fill]="dummy1 | map('on-for-timer 5: outline')">5</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="dummy1:on-for-timer 10" [value]="dummy1" [fill]="dummy1 | map('on-for-timer 10: outline')">10</ftui-button>
</ftui-circlemenu>
Funktioniert schon ganz gut, aber das badge wird nicht am Circle-Menü angezeigt, sondern nur, wenn man das Menü öffnet.
Hat jemand eine Idee?
Gruß
Marc
@Sailor
Heute hatte ich ein wenig Zeit, mich mit der FTUI2-Lösung zu beschäftigen.
Bislang nutze ich in FTUI3 nur etwas Vergleichbares zum geojson-Attribut; allerdings fehlt bislang ein beeinflussbares feature_style-Attribut. Da ich die dadurch erlangbare Dynamik aber nützlich fände, würde ich mich mal daran versuchen. Wann und ob es lauffähig sein wird, (noch) keine Ahnung ...
Ganz sicher bin ich noch nicht, aber ist die Darstellung der im geojson-Attribut angegebenen Datei Dein wichtigster Einsatzzweck ?
Hi OdfFhem
Zitat von: OdfFhem am 01 Mai 2021, 19:58:16
Heute hatte ich ein wenig Zeit, mich mit der FTUI2-Lösung zu beschäftigen.
Bislang nutze ich in FTUI3 nur etwas Vergleichbares zum geojson-Attribut; allerdings fehlt bislang ein beeinflussbares feature_style-Attribut. Da ich die dadurch erlangbare Dynamik aber nützlich fände, würde ich mich mal daran versuchen. Wann und ob es lauffähig sein wird, (noch) keine Ahnung ...
Ganz sicher bin ich noch nicht, aber ist die Darstellung der im geojson-Attribut angegebenen Datei Dein wichtigster Einsatzzweck ?
Ich nutze die GeoJson - Datei Variante um mit verschiedenen anderen Modulen die augenblicklichen Bereitschaftsdienste der Apotheken, der aktuellen Blitzer und der Handypositionen der Familienmitglieder auf der Karte anzuzeigen.
Daneben lasse ich mir die Verkehrssituation der Straße um mich herum anzeigen.
Daher kann man das wohl als primäre Funktion betrachten...
Danke für deinen Einsatz und kein Stress!
Gruß
Sailor
Ein herzerfrischendes "Moin" vom achtern Diek
Hat nicht ganz direkt mit ftui3 zu tun, aber ich wollte meine Arbeit nur für diejenigen teilen, die ftui3 auch auf einem Monitor mit DPMS verwenden/anzeigen und das Display aus der Ferne (von fhem aus) aufwecken wollen und ohne erst auf dem Keyboard/Touchscreen tippen zu müssen.
a) Systemvorbereitung linux rechner fuer das Display (Entfernter RasPi "ConPan"):
########## Set up general PI settings ##########
sudo raspi-config
raspi-config: Update raspi-config
raspi-config: Interfacing Options -> SSH -> Enable
raspi-config: System Options -> Boot -> B4 Desktop Autologin
raspi-config: Advanced Options -> Expand Filesystem
raspi-config: Reboot
### Rewrite ssh certificates
sudo rm /etc/ssh/ssh_host_*
sudo dpkg-reconfigure openssh-server
sudo reboot
### Prepare Desktop ###
sudo apt-get install unclutter
sudo nano /etc/xdg/pcmanfm/LXDE-pi/desktop-items-0.conf
trash=0
nano /home/pi/.config/pcmanfm/LXDE-pi/desktop-items-0.conf
trash=0
sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
# Mauszeiger ausblenden
@unclutter
# Bildschirmschoner ausschalten
#@xset s off
#@xset -dpms
@xset s noblank
# Firefoxstarten und control panel aufrufen
@firefox-esr -kiosk -private-window http://<fhem-Server IP>:8083/fhem/ftui/index.html
b) Systemvorbereitung fhem Server:
sudo mkdir /home/fhem
sudo usermod fhem --home /home/fhem
sudo usermod -s /bin/bash fhem
sudo chown -R fhem:dialout /home/fhem
sudo usermod -a -G tty fhem
sudo passwd fhem
GeheimesFhemPasswort!
sudo nano /etc/ssh/sshd_config
# Allow user fhem to access via ssh
AllowUsers pi fhem
exit
login via ssh as user "fhem" within Homeserver to ConPan
ssh pi@<IP des linux Rechners welcher das ftui3 Display beinhaltet>
Confirm public key certificates
exit
exit
login via ssh as user "pi" on HomeServer
sudo nano /etc/ssh/sshd_config
# Allow user fhem to access via ssh
AllowUsers pi
c) 99_myUtils.pm auf dem fhem Server
use Net::OpenSSH;
sub WakeConpan() {
my %opts = (
user => "pi",
passwd => "GeheimesConPanPasswort",
ssh_cmd => "/usr/bin/ssh",
timeout => 5
);
my $cmd = "xset -display :0 dpms force on";
my $hostname = "<IP des linux Rechners welcher das ftui3 Display beinhaltet>";
my $ssh = Net::OpenSSH->new($hostname, %opts);
$ssh->error and die (Log 2, "WakeConpan - Result : Couldn't establish SSH connection: " . $ssh->error);
$ssh->system($cmd) or die (Log 2, "WakeConpan - Result : remote command failed: " . $ssh->error);
$ssh->system("exit") or die (Log 2, "WakeConpan - Result : remote command failed: " . $ssh->error);
}
Warten bis das Display in den Ruhemodus/Standby gefallen ist und dann in der fhem Commandline den Befehl {WakeConpan()} ausfuehren.
Viel Spass!
Gruss
Sailor
Zitat von: Init am 30 April 2021, 21:23:06
Hat jemand eine Idee?
Hallo zusammen,
mittlerweile funktioniert mein circlemenu zum Öffnen von unserem Tor, mit Anzeige der Restlaufzeit der Öffnung.
Mir erscheint das alles ein bisschen "von hinten durch die Brust ins Auge" :-)
Hier jedenfalls meine Lösung in FTUI3:
<ftui-column>
<ftui-circlemenu style="height:3em">
<ftui-button shape="circle" [value]="HMW_NSK1_Schalter_Unused_07" [color]="HMW_NSK1_Schalter_Unused_07 | map('on:primary, off:light')"><ftui-icon name="gate" color="grid"></ftui-icon></ftui-button>
<ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:off">off</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:on-for-timer 60">1</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:on-for-timer 300">5</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:on-for-timer 600">10</ftui-button>
<ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:on-for-timer 900">15</ftui-button>
<ftui-badge color="danger" [text]="HMW_NSK1_Schalter_Unused_07:timerValue"></ftui-badge>
</ftui-circlemenu>
<ftui-label>Gehtor <ftui-badge color="danger" [text]="HMW_NSK1_Schalter_Unused_07:timerValue"></ftui-badge></ftui-label>
</ftui-column>
Hier mein Schalter, welchen ich zur Toröffnung nutzen möchte bzw. ein Testschalter:
defmod HMW_NSK1_Schalter_Unused_07 HM485 00009067_19
attr HMW_NSK1_Schalter_Unused_07 custDeviceValue 0
attr HMW_NSK1_Schalter_Unused_07 userReadings timerValue { \
if(AttrVal("HMW_NSK1_Schalter_Unused_07","custDeviceValue",0)>0){\
AttrVal("HMW_NSK1_Schalter_Unused_07","custDeviceValue",0)\
}\
else {\
"off"\
}\
}\
Hier mein Notify, welches meinen AT aktiviert und die eingestellte Laufzeit in mein userAttr schreibt:
defmod HMW_NSK1_Schalter_Unused_07_notify_1 notify HMW_NSK1_Schalter_Unused_07:(on-for-timer.*|off|on) {\
if($EVENT =~ /on-for-timer/) {\
my @EVENTPART = split(" ", $EVENT);;\
fhem ("attr HMW_NSK1_Schalter_Unused_07 custDeviceValue ". int($EVENTPART[1]/60));;\
}\
elsif ($EVENT eq "on") {\
fhem ("attr HMW_NSK1_Schalter_Unused_07TimerAt disable 0");;\
}\
elsif ($EVENT eq "off") {\
fhem ("attr HMW_NSK1_Schalter_Unused_07 custDeviceValue 0");;\
fhem "attr HMW_NSK1_Schalter_Unused_07TimerAt disable 1";;\
}\
}
Zu guter Letzt noch mein AT, zum Runterzählen der Restlaufzeit:
defmod HMW_NSK1_Schalter_Unused_07TimerAt at +*00:01:00 {\
if(AttrVal("HMW_NSK1_Schalter_Unused_07","custDeviceValue",0)>0){\
fhem("attr HMW_NSK1_Schalter_Unused_07 custDeviceValue ".(AttrVal("HMW_NSK1_Schalter_Unused_07","custDeviceValue",1)-1));;\
}\
else {\
fhem("attr HMW_NSK1_Schalter_Unused_07TimerAt disable 1");;\
}\
}
attr HMW_NSK1_Schalter_Unused_07TimerAt disable 1
Meiner Meinung nach zu viel Overhead, welchen ich benötige, um die Restlaufzeit anzuzeigen.
Und dann habe ich noch das Problem, das ftui-badge innerhalb von circlemenu nicht richtig funktioniert, daher habe ich alternativ ftui-badge in mein Lable gepackt.
Wäre toll, wenn hierfür jemand eine Lösung kennt.
Natürlich wäre es auch super, wenn jemand eine andere Lösung für die Berechnung der Restlaufzeit hat.
Ich bin für jeden Hinweis/Rat dankbar.
Viele Grüße
Marc
Mal wieder ein herzerfrischendes "Moin" vom achtern Diek vorweg! ;)
Ich habe (mal wieder) eine Frage: Besteht irgendwie die Möglichkeit eine bestimmte hinter <ftui-tab> hinterlegte Seite (z.B. Home) mit einem Timeout zu versehnen, so dass auf diese nach einem Zeitraum x (z.B. 5min ohne Aktivitaet) zurück gekehrt wird?
Alternativ: Kann man die aktive Seite, welche man durch <ftui-tab> ausgewählt hat an ein fhem - Dummy übertragen, bzw. kann man von fhem aus eine <ftui-tab> - Seite auswählen?
Gruß
Sailor
Ich meine, setstate hätte irgendwo geschrieben, daß er den Timeout noch einbauen wollte, hat er aber bisher nicht getan, wenn ich das richtig sehe.
Zur Docker Installation für FTUI3. Muss FTUI auf dem gleichen Docker Host wie FHEM installiert sein?
In der Anleitung steht nur Image herunterladen, FHEM URL anpassen und den Container starten.
Muss nicht vorher noch die Dateien aus github heruntergeladen werden?
Zitat von: grossmaggul am 05 Mai 2021, 01:38:12
Ich meine, setstate hätte irgendwo geschrieben, daß er den Timeout noch einbauen wollte, hat er aber bisher nicht getan, wenn ich das richtig sehe.
Danke für die Info!
Gruß
Sailor
Zitat von: Sailor am 29 April 2021, 15:04:38
Ein herzerfrischendes Moin vomn achtern Diek
Ich habe mein Control Panel ist soweit fertig und auf dem 27" TouchScreen integriert.
Siehe Anlage (Wetterseite)
@Sailor: Echt super Arbeit, sieht echt gut aus! Eine Frage bezüglich deiner verwendeten Symbole: Hast du da ein fertiges Symbolpaket benutzt oder dir die benötigten Symbole einzeln in den Icon-Ordner kopiert. Da mit den kleinklima-Symbolen habe ich schon gelöst und in den Unterordner von icons gelegt, mir fehlen jetzt nur noch die anderen Symbole wie z.B. Luftdruck, Außenfeuchte und so. Die habe ich zur Zeit in meinem ftui2-Version auch benutzt, habe die aber noch nicht wirklich gefunden. Muss mal schauen wo dort das mapping stattfindet.
Falls du möchtest kannst du ja mal ein paar Bilder deiner anderen Seiten zeigen, finde so etwas als "Ideenanreicherung" immer cool.
Gruß Markus
Hallo Markus
Zitat von: meier81 am 05 Mai 2021, 21:15:35
@Sailor: Echt super Arbeit, sieht echt gut aus! Eine Frage bezüglich deiner verwendeten Symbole: Hast du da ein fertiges Symbolpaket benutzt oder dir die benötigten Symbole einzeln in den Icon-Ordner kopiert. Da mit den kleinklima-Symbolen habe ich schon gelöst und in den Unterordner von icons gelegt, mir fehlen jetzt nur noch die anderen Symbole wie z.B. Luftdruck, Außenfeuchte und so. Die habe ich zur Zeit in meinem ftui2-Version auch benutzt, habe die aber noch nicht wirklich gefunden. Muss mal schauen wo dort das mapping stattfindet.
Ich habe die benötigten Symbole alle ins icons-Verzeichnis reinkopiert die ich brauchte.
Entweder habe ich sie im /opt/fhem/www/images/fhemSVG oder /opt/fhem/www/images/openautomation rueber kopiert,
oder ich habe sie von https://www.svgrepo.com/ (https://www.svgrepo.com/) heruntergeladen.
Bilder folgen...
Gruß
Sailor
Zitat von: TWART016 am 05 Mai 2021, 02:33:54
Muss nicht vorher noch die Dateien aus github heruntergeladen werden?
Ich meine schon. Zumindest lief es bei mir erst vollständig, als ich den kompletten Pfad incl. der Komponenten in den Container durchgereicht habe (wie yersinia unter #1089 schrieb).
Scheint mir erst recht nötig, wenn man "custom components" z.B. aus diesem Fred benötigt.
Hab es so gemacht:
docker run -d \
--rm \
-p 8181:80 \
-v /opt/fhem/www/ftui/:/usr/share/nginx/html/ \
--name ftui3 \
knowthelist/ftui
Auf dem selben Host muss es m.E. nicht zwingend installiert sein, wenn man FTUI3 z.B. nur via Docker nutzen will. Es muss halt alles aus ...www/ftui auf dem Zweit-Host bereit stehen, sodass es in den Container durchgereicht werden kann (z.B. dort lokal abgelegt oder via share z.B. nfs usw.).
Weil ich aber aktuell beides nutze/ teste: FTUI3 via lokaler Fhem-URL und Docker, ist es für mich bequemer alles auf einem Host zusammen zu haben.
Btw: Der (Zweit-)Host müsste natürlich ein PI o.ä. sein, weil der Container aktuell für ARM-Prozis gebaut ist (https://hub.docker.com/r/knowthelist/ftui/tags?page=1&ordering=last_updated (https://hub.docker.com/r/knowthelist/ftui/tags?page=1&ordering=last_updated)).
Viele Grüße
rob
Zitat von: rob am 07 Mai 2021, 09:48:10
Ich meine schon. Zumindest lief es bei mir erst vollständig, als ich den kompletten Pfad incl. der Komponenten in den Container durchgereicht habe (wie yersinia unter #1089 schrieb).
Scheint mir erst recht nötig, wenn man "custom components" z.B. aus diesem Fred benötigt.
Den Ordner habe ich mittlerweile heruntergeladen
Zitat von: rob am 07 Mai 2021, 09:48:10
Hab es so gemacht:
docker run -d \
--rm \
-p 8181:80 \
-v /opt/fhem/www/ftui/:/usr/share/nginx/html/ \
--name ftui3 \
knowthelist/ftui
Der Container wird so zwar erstellt, läuft aber nicht. Wenn ich die index.html mappe, läuft er zumindest, allerdings ohne einen Port nach außen weiterzugeben.
Zitat von: rob am 07 Mai 2021, 09:48:10
Btw: Der (Zweit-)Host müsste natürlich ein PI o.ä. sein, weil der Container aktuell für ARM-Prozis gebaut ist (https://hub.docker.com/r/knowthelist/ftui/tags?page=1&ordering=last_updated (https://hub.docker.com/r/knowthelist/ftui/tags?page=1&ordering=last_updated)).
Der Docker ist leider kein Pi, sondern ein Ubuntu. Ist eine Version für x86 angedacht oder wie kann ich das selber bauen?
Ich fände es schön, wenn Ihr die Probleme mit Docker in einen eigenen Thread auslagern würdet, hat ja jetzt nicht direkt etwas mit FTUI 3 zu tun.
@Sailor
Mittlerweile gab es etwas Zeit, um sich mit der Kartendarstellung besser vertraut zu machen und eine (nutzbare) Komponente zu entwickeln.
Neben meiner (speziellen) GeoJSON-Datei habe ich auch eine allgemeinere GeoJSON-Datei genutzt. Dies führt aktuell beispielsweise zum angehängten Screenshot.
Meine Frage wäre, ob Du eine anonymisierte Fassung Deiner GeoJSON-Datei zum Testen bereitstellen kannst - gerne per Mitteilung.
Ein herzerfrischendes Moin vom achtern Diek vorweg
Mal wieder nicht ganz ftui3 aber ein bisschen doch.
Da es noch keine ftui3 - Loesung fuer das entfernte Refresh eines Mozilla Firefox Browsers gibt, habe ich bis dahin ein Workaround entwickelt.
Dazu wie folgt vorgehen:
Shell am entfernten Pi mit Firefox Browser (192.168.178.8)
sudo apt-get install xdotool
sudo nano /home/pi/f5mf.sh
Insert text below
export DISPLAY=:0.0
WID=`xdotool search --name "Mozilla Firefox" | head -1`
xdotool windowactivate $WID
xdotool key F5
Make executeable
sudo chmod +x /home/pi/f5mf.sh
Datei 99_myUtils.pm
###START########## Refresh Conpan Browser #######################################################################START###
use Net::OpenSSH;
sub RefreshConpanBrowser() {
my %opts = (
user => "pi",
passwd => "Geheim!",
ssh_cmd => "/usr/bin/ssh",
timeout => 5
);
my $cmd = "/home/pi/f5mf.sh";
my $hostname = "192.168.178.8";
my $ssh = Net::OpenSSH->new($hostname, %opts);
$ssh->error and die (Log 2, "RefreshConpanBrowser - Result : Couldn't establish SSH connection: " . $ssh->error);
$ssh->system($cmd) or die (Log 2, "RefreshConpanBrowser - Result : remote command failed: " . $ssh->error);
$ssh->system("exit") or die (Log 2, "RefreshConpanBrowser - Result : remote command failed: " . $ssh->error);
}
####END########### Refresh Conpan Browser ########################################################################END####
Shell Command
reload 99_myUtils
{RefreshConpanBrowser}
Gruss
Sailor
Ein herzerfrischendes Moin vom actern Diek vorweg
Ich bin mit meinem ControlPanel in der Langzeit-Testphase und mir sind da ein paar Eigenarten beim image aufgefallen, die ich gerne von Euch bestaetigt haben moechte.
Zusammenfassung: Update von Images scheint nicht mit bestimmter Webadresse zu funktionieren.
Anfrage: Koennt Ihr bitte mal bei Euch den folgenden Code testen und beobachten, ob sich die Anzeige entsprechend dem Interval (300s bzw. 300000ms) neu laedt?
Code a) ftui3 - Variante
<ftui-image src = "https://www.niederschlagsradar.de/image.ashx?type=regioloop®io=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942"
height = "150px"
width = "200px"
shape = "round"
interval = 300>
</ftui-image>
Code b) JavaScript mit Image - Variante
<img id="RainRadarHome"src="https://www.niederschlagsradar.de/image.ashx?type=regioloop®io=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942" height="90%" alt="niederschlagsradar.de"></img>
<script>
window.setInterval("reloadRainRadarHome();", 300000);
function reloadRainRadarHome() {
var frameHolder=document.getElementById('RainRadarHome');
frameHolder.src="https://www.niederschlagsradar.de/image.ashx?type=regioloop®io=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942"
}
</script>
Code c) JavaScript mit iFrame - Variante
<iframe id="RainRadarHome" src="https://www.niederschlagsradar.de/image.ashx?type=regioloop®io=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942" width="100%" frameBorder="0"></iframe>
<script>
window.setInterval("reloadRainRadarHome();", 300000);
function reloadRainRadarHome() {
var frameHolder=document.getElementById('RainRadarHome');
frameHolder.src="https://www.niederschlagsradar.de/image.ashx?type=regioloop®io=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942"
}
</script>
Danke
Gruss
Sailor
Hi Sailor,
wenn ich das richtig sehe, hast du folgende Fehler drin:
a) keine Anführungszeichen um den Wert des Intervalls, da weiss ich aber nicht, ob die Browser das trotzdem akzeptieren
b) und c) in das setInterval schreibt man nur den Namen der Funktion ohne Anführungszeichen, Klammern und Semikolon
window.setInterval(reloadRainRadarHome, 300000);
Alles ungetestet...
Siehe auch hier: https://www.w3schools.com/jsref/met_win_setinterval.asp (https://www.w3schools.com/jsref/met_win_setinterval.asp)
Gruß
Jens
Hallo Jens
Zitat von: elle am 11 Mai 2021, 18:42:12
wenn ich das richtig sehe, hast du folgende Fehler drin:
a) keine Anführungszeichen um den Wert des Intervalls, da weiss ich aber nicht, ob die Browser das trotzdem akzeptieren
Also laut https://github.com/knowthelist/ftui#image ist das ohne "
Zitat von: elle am 11 Mai 2021, 18:42:12
b) und c) in das setInterval schreibt man nur den Namen der Funktion ohne Anführungszeichen, Klammern und Semikolon
window.setInterval(reloadRainRadarHome, 300000);
Werde ich sofort ausprobieren
[Nachtrag]Mit
<ftui-image src = "https://www.niederschlagsradar.de/image.ashx?type=loop1stunde&jaar=®io=homepage&tijdid=202104300848&time=&bliksem=0"
height = "300px"
width = "400px"
interval = "60"
nocache>
</ftui-image> funktioniert prima!
Danke
Sailor
Ist es möglich ein komplettes Grid als "Button" zu verwenden, ähnlich wie bei Flex?
Zum Beispiel soll eine Lampe damit geschalten werden. Zudem wäre es schön, wenn die Hintergrundfarbe abhängig von einem Reading ist.
Zitat von: TWART016 am 13 Mai 2021, 03:14:02
Ist es möglich ein komplettes Grid als "Button" zu verwenden...
Jain mit @click="sendFhem('')" kannst du einen Befehl senden, aber nicht toggeln..
Du könntest aber im ftui-grid-tile das so machen bsp:
<ftui-grid base-width="50" base-height="50">
<!--Button Anfang-->
<ftui-button fill="none" [(value)]="LampenDevice">
<ftui-grid-tile row="1" col="1" height="8" width="6" [color]="LampenDevice | map('on:primary, off:grey')">
</ftui-grid-tile>
<ftui-grid-tile row="9" col="1" height="6" width="6">
</ftui-grid-tile>
<ftui-grid-tile row="1" col="7" height="7" width="5">
</ftui-grid-tile>
<ftui-grid-tile row="1" col="12" height="6" width="5">
</ftui-grid-tile>
<ftui-grid-tile row="7" col="12" height="8" width="5">
</ftui-grid-tile>
<ftui-grid-tile row="8" col="7" height="7" width="5">
</ftui-grid-tile>
<!--Button Ende-->
</ftui-button>
</ftui-grid>
hier werden alle grid-tile zum Button.
[color] geht nur bei grid-tile
kannst natürlich auch noch ein grid im grid testen...
Gruß
Hallo,
ich bin dabei mich in die FTUI3 einzuarbeiten. Bisher finde ich das klasse was hier entstanden ist. Allerdings komme ich mit dem HomematicIP Heizkörperthermostat nicht klar. Ich möchte mit einem Button den Modus zwischen Auto und Manu umschalten- hier mein Code:
<ftui-button color="dark" fill="outline" shape="circle"
[value]="EG_Jan_Heizung:1.SET_POINT_MODE'"
(value)="EG_Jan_Heizung:datapoint 1.CONTROL_MODE" states="1, 0">
<ftui-icon [name]="EG_Jan_Heizung:1.SET_POINT_MODE | map('1:lightbulb, 0:lightbulb-on')"></ftui-icon>
</ftui-button>
Bei der Übermittlung des Befehles sehe ich "set EG_Jan_Heizung datapoint 1.CONTROL_MODE"- es fehlt also die 1 bzw. 0- was mache ich fasch? Danke für Eure Hilfe.
VG
Thomas
Hi, versuche mal so ob der Befehl gesendet wird (Test):
<ftui-button class="size-1" @click="sendFhem('set EG_Jan_Heizung datapoint 1.CONTROL_MODE 1')">TEST1</ftui-button>
Wird nicht gehen!
Wie sieht der set-Befehl in fhem aus?
Ich denke das liegt am Leerzeichen hinter datapoint???
ftui denkt 1.CONTROL_MODE muss er setzen und nicht die 1....
Vielleicht muss es ja so sein?:
(value)="EG_Jan_Heizung:1.CONTROL_MODE" states="1, 0">
oder so:
(value)="EG_Jan_Heizung:1.SET_POINT_MODE" states="1, 0">
Hi, danke Dir erst mal für den Tipp- ich versuche das heute abend mal. Mit dem Leerzeichen sollte das aber nichts zu tun haben- ich nutze für Homematic IP in meiner Installation HMCCU. Da ist der FHEM Befehl set <Device> datapoint <datapoint> <value>. Und das funktioniert soweit.
Gruß
Thomas
Dann könnte das vielleicht funktionieren:
(value)="EG_Jan_Heizung:datapoint" states="1.CONTROL_MODE 1, 1.CONTROL_MODE 0">
alternative:
(value)="EG_Jan_Heizung" states="datapoint 1.CONTROL_MODE 0,datapoint 1.CONTROL_MODE 1">
so werden die Befehle/states gesetzt/gesendet...
Gruß
Ich noch mal- Danke für den Tipp- das hat funktioniert:
(value)="EG_Jan_Heizung:datapoint" states="1.CONTROL_MODE 1, 1.CONTROL_MODE 0">
einen schönen Abend noch!
P.S.
Der Button "Test" hat übrigens auch funktioniert- halt nur in eine Richtung...
Hallo,
ich habe eine Frage zu "icon". Wenn ich eine Bezeichnung zu den Icons wie folgt verwende, dann ist diese, offensichtlich abhängig von der Länge des Textes, nicht mittig unter dem Icon (siehe angehängten Screenshot). Gibt es eine Möglichkeit dies zu ändern, ohne über "label" arbeiten zu müssen? Vom Coding her betrachtet finde ich das eigentlich schön übersichtlich ;)
<ftui-grid-tile row="3" col="2" height="3" width="1" shape="round">
<ftui-icon name="wifi" class="align-center"
[color]="Handy1 | map('absent: red, present: green')">Pocophone
</ftui-icon>
<ftui-icon name="wifi"
[color]="Handy2 | map('absent: red, present: green')">Redmi
</ftui-icon>
<ftui-icon name="wifi"
[color]="Handy3 | map('absent: red, present: green')">HuaweiP20Lite
</ftui-icon>
<ftui-icon name="wifi"
[color]="Handy4 | map('absent: red, present: green')">iPhone
</ftui-icon>
</ftui-grid-tile>
Viele Grüße
Dieter
Hi, du könntest es einfach auch so machen wenn du kein label magst:
<ftui-icon name="wifi"
[color]="Handy1 | map('absent: red, present: green')">
</ftui-icon><br>Pocophone
<ftui-icon name="wifi"
[color]="Handy2 | map('absent: red, present: green')">
</ftui-icon><br>Redmi
<ftui-icon name="wifi"
[color]="Handy3 | map('absent: red, present: green')">
</ftui-icon><br>HuaweiP20Lite
<ftui-icon name="wifi"
[color]="Handy4 | map('absent: red, present: green')">
</ftui-icon><br>iPhone
<ftui-icon name="wifi"
[color]="Handy3 | map('absent: red, present: green')">
</ftui-icon><br>HuaweiP20Lite
<ftui-icon name="wifi"
[color]="Handy4 | map('absent: red, present: green')">
</ftui-icon><br>iPhone
Die schieben sich je nach grid Größe zusammen... siehe screenshot
Edit oder so in einer cell:
<ftui-cell>
<ftui-icon name="wifi"></ftui-icon>
iPhone
</ftui-cell>
Danke @mr_petz!
Mit
ZitatEdit oder so in einer cell:
klappt das super, da der Text schön beim Icon bleibt (siehe Screenshot).
Bei der Variante mit dem Umbruch verteilt sich (wie beim Label) und wie Du es eigentlich auch geschrieben hast, Icons und Texte über den ganzen Grid. Das ist nicht so hübsch oder eben erst mit mehr Code in den Griff zu bekommen (zumindest für mich ::) )
Viele Grüße
Dieter
Zitat von: setstate am 12 November 2020, 16:18:18
Ich versuche in dieser Version den Farbenwildwuchs so gut wie möglich einzudämmen. Noch ein paar Grundfarben in das CSS aufzunehmen, werde ich vermutlich noch machen. Ich erwische mich selber oft, einfach rot / grün nehmen zu wollen. Also braun, blau usw.
Diese Werte gibt es aktuell (gleiche Spalte = gleiche Farbe)
/* "primary", "secondary", "success", "warning", "danger", "light", "medium", "dark" */
/* "primary", "secondary", "ok", "error", "white", "medium", "dark" */
/* "green", "yellow", "red", "light", "medium", "dark" */
Für Komponenten, wo der RGB-Wet wirklich gebraucht wird, z.B. aktuelle Farbe der HUE-Lampen anzeigen, wird es auch ein rgb-Attribute geben.
FTUI-Icon hat das schon
<ftui-icon [name]="dummy1 | map('on:lightbulb-on-outline, off:lightbulb-outline')" [rgb]="HUEDevice6:rgb">
</ftui-icon>
https://knowthelist.github.io/ftui/examples/icon.html
Ich würde es gut finden, wenn man die Farben auch aus einem Reading ziehen kann. Ich bekomme von meinem Wetterprovider für jede Temperatur eine passende Hintergrund- und Vordergrundfarbe mit der ich den Text und den Hintergrund einfärbe.
Geht mit den Farben die in FTUI3 drin sind:
<ftui-icon name="wifi" [color]="<device>:<reading>"></ftui-icon>
Das sind die Farben die es gibt:
https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/ftui-theme.css
(https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/ftui-theme.css)
Also wenn dein Reading zB green als text hat, dann kannst du es wie oben verwenden...
Edit: oder du dir die Farben in einer user.css anlegst
Icon hat auch ein rgb Attribute. Damit geht das
rgb="#556677
Oder per Reading
[rgb]="myWeather:colorValue"
setstate, könntest Du Dir bitte nochmal die Medialist anschauen, da funktioniert das Auswählen noch nicht richtig. ::)
Danke für die schnelle Antwort.
Das mit dem Icon funkioniert soweit.
Wie bringe ich den Text aus einem anderen Reading auf das Icon (siehe Anhang wie es in FTUI 2 aussieht und im Moment in FTUI3)?
In FTUI 3 habe ich es so probiert
<ftui-column>
<ftui-icon name="circle" [rgb]="srfmeteo:forecast_day_2_min_color_background_color">
<ftui-label [text]="srfmeteo:forecast_day_1_min_color_temperature"><span slot="end">°C</span></ftui-label>
</ftui-icon>
</ftui-column>
<ftui-column shape="round" color="light">
<ftui-label [text]="srfmeteo:forecast_day_1_max_color_temperature" class="size-7 thin"><span class="size-0"
slot="end">°C</span>
</ftui-label>
</ftui-column>
In FTUI 2 mache ich es so:
<div data-type="symbol" data-icon="none" data-device="srfmeteo"
data-color="srfmeteo:forecast_day_2_min_color_text_color" data-background-icon="fa-circle"
data-on-background-color="srfmeteo:forecast_day_2_min_color_background_color"
data-off-background-color="srfmeteo:forecast_day_2_min_color_background_color" class="cell inline ">
<div data-type="label" data-device="srfmeteo" data-color="srfmeteo:forecast_day_2_min_color_text_color"
data-get="forecast_day_2_min_color_temperature" data-unit="%B0C%0A" class="">
</div>
</div>
Hallo Pingus
Zitat von: pingus am 25 Mai 2021, 10:21:31
In FTUI 3 habe ich es so probiert
<ftui-column>
<ftui-icon name="circle" [rgb]="srfmeteo:forecast_day_2_min_color_background_color">
<ftui-label [text]="srfmeteo:forecast_day_1_min_color_temperature"><span slot="end">°C</span></ftui-label>
</ftui-icon>
</ftui-column>
<ftui-column shape="round" color="light">
<ftui-label [text]="srfmeteo:forecast_day_1_max_color_temperature" class="size-7 thin"><span class="size-0"
slot="end">°C</span>
</ftui-label>
</ftui-column>
[/code]
Nur ein Vorschlag der besseren Lesbarkeit: Darf ich dir empfehlen deinen Code besser so zu schreiben:
<ftui-column>
<ftui-icon name = "circle"
[rgb] = "srfmeteo:forecast_day_2_min_color_background_color">
<ftui-label [text] ="srfmeteo:forecast_day_1_min_color_temperature"
unit = "°C">
</ftui-label>
</ftui-icon>
</ftui-column>
<ftui-column shape = "round"
color = "light">
<ftui-label [text] = "srfmeteo:forecast_day_1_max_color_temperature"
class = "size-7 thin unit="°C"
</ftui-label>
</ftui-column>
@pingus
Das mit dem Icon geht so nicht.
Als Lösungsvorschlag könntest du es so machen:
<ftui-button shape="circle" class="size-1" [color]="srfmeteo:forecast_day_2_min_color_background_color" states="" style="pointer-events:none">
<ftui-label class="size-3 thin" [text]="srfmeteo:forecast_day_1_min_color_temperature"><span class="size-0" slot="end">°C</span></ftui-label>
</ftui-button>
Ansonsten musst du halt mit css und Standard-html arbeiten...
Gruß
Edit ungetestet... oh sorry button hat kein rgb, nur color...
Zitat von: Sailor am 25 Mai 2021, 10:55:34
Hallo Pingus
Nur ein Vorschlag der besseren Lesbarkeit: Darf ich dir empfehlen deinen Code besser so zu schreiben:
<ftui-column>
<ftui-icon name = "circle"
[rgb] = "srfmeteo:forecast_day_2_min_color_background_color">
<ftui-label [text] ="srfmeteo:forecast_day_1_min_color_temperature"
unit = "°C">
</ftui-label>
</ftui-icon>
</ftui-column>
<ftui-column shape = "round"
color = "light">
<ftui-label [text] = "srfmeteo:forecast_day_1_max_color_temperature"
class = "size-7 thin unit="°C"
</ftui-label>
</ftui-column>
Danke, versuche ich so umzusetzen. Mal schauen was der Codeformatierer von VScode damit anstellt :)
Edit und völlig OT: Codeformatierung mit VSCode damit alle Attribute auf einer neuen Linie sind und untereinander: Siehe Bild
Zitat von: pingus am 25 Mai 2021, 14:39:28
Danke, versuche ich so umzusetzen. Mal schauen was der Codeformatierer von VScode damit anstellt :)
Edit und völlig OT: Codeformatierung mit VSCode damit alle Attribute auf einer neuen Linie sind und untereinander: Siehe Bild
Hello
Welchen Code formatter nutzt du?
Grüsse
Standard HTML von VSCode
@pingus und @all
Ich habe mal für dein [rgb] color hinter deiner Temperatur ein kleines Tool für FTUI3 zusammengestellt.
Ist halt "nur" ein farbiger Hintergrund in kombination mit ftui-label oder anderen Kombinationen.
Name ist frei erfunden...
Settings:
size,
shape,
fill,
color,
direction,
rgb,
class,
Bsp für dich:
<ftui-bgcolor shape="circle" class="size-1" [rgb]="srfmeteo:forecast_day_2_min_color_background_color">
<ftui-label class="size-3 thin" [text]="srfmeteo:forecast_day_1_min_color_temperature"><span class="size-0" slot="end">°C</span></ftui-label>
</ftui-bgcolor>
CSS Teile vom Tool sind vom ftui-button.
Kannst es ja testen wenn du magst.
zum installieren: einfach ins components-Verzeichnis von ftui3
Sieht dann so aus wie oben von mir das Bild.
ps Farben werden nach Änderung des Reading auch neu gesetzt...
[color] funzt natürlich auch...
Gruß
Edit:
fill outline für rgb hinzugefügt => Definition: fill="outline_rgb"
fill="solid" muss nicht angegeben werden..
Bilder angehangen
noch ein Beispiel:
<ftui-bgcolor shape="" class="size-5" [rgb]="colordummy:color" fill="">
<ftui-cell>
<ftui-icon name="sun2" class="size-1"></ftui-icon>
<ftui-label class="size-3 thin" [text]="colordummy:temp" color="white"><span class="size-1" slot="end">°C</span></ftui-label>
</ftui-cell>
</ftui-bgcolor>
Hallo,
vielleicht habt ihr es übersehen eki hat eine Umfrage bzgl. Charts gestartet.
https://forum.fhem.de/index.php/topic,121272.0.html (https://forum.fhem.de/index.php/topic,121272.0.html)
Gruß
Eisix
Hei mr_petz
Vielen Dank! Ich bin leider noch nicht dazu gekommen das auszuprobieren :-[
Ich werde aber sicher ein Feedback geben, sobald es bei mir läuft.
Danke
Pingus
Ein herzerfrischendes "Moin" vom achtern Diek vorweg!
Ich habe zwei Fragen zu <ftui-label>
Wenn ich in einem fhem-dummy einen ganzen Text (Warnung! Die Feuchtigkeit ist zu hoch!) abgelegt habe
a) wie bekomme ich einen Zeilenumbruch in den Text
Warnung!<BR>Die Feuchtigkeit ist zu hoch! oder Warnung!\nDie Feuchtigkeit ist zu hoch! funktionieren nicht.
<BR> funktioniert, solange man es richtig ohne Tippfehler schreibt...
b) wie bekomme ich die Anzeige von linksbuendig in die zentrierte Ansicht. Ich finde keinen "class=" Parameter.
Danke
Gruß
Sailor
Ich mache die Positionierung über die column:
<ftui-column align-items="center">
<ftui-label>{{name}}</ftui-label>
</ftui-column>
Grüsse
Hallo SirMarco
Dein
Zitat von: SirMarco am 08 Juni 2021, 11:04:46
Ich mache die Positionierung über die column:
Dies funktioniert leider nicht mit dem eigentlichen Text im Reading.
Ich habe mir jetzt damit beholfen, dass ich aus dem Reading Text
Warnung! Die Feuchtigkeit ist zu hoch!ein
<center>Warnung!<BR>Die Feuchtigkeit ist zu hoch!</center>gemacht habe.
Aber eigentlich müsste das auch vom <ftui-label> her gehen.
Trotzdem Danke!
Gruß
Sailor
Ich habe bei mir eine der Anzeigen auf einem älteren iPad Mini 2 laufen. Das hat ja nur IOS 12.5.
Leider läuft dort schon nicht mal die Default index.html aus dem Repo. Das sieht dann so aus wie im Screenshot (ist gleich im Safari/Chrome/Firefox).
Auf einem neueren iPad geht es, also muss da irgendwas inkompatibel sein.
Bevor ich mir jetzt somit die Arbeit mache die Anzeige auf die v3 anzupassen, mal die Frage ob da was zu machen ist?
Die Frage ist doch eher, welcher Browser? Safari? Läuft's vielleicht mit Firefox oder iCab?
Zitat von: grossmaggul am 16 Juni 2021, 18:18:46
Die Frage ist doch eher, welcher Browser? Safari? Läuft's vielleicht mit Firefox oder iCab?
Wie ich oben schon schrieb - sieht gleich so in Safari, Chrome und Firefox aus.
Oh, sorry, habe ich überlesen. ::)
Ich vermute der Knackpunkt wird das hier sein: "FTUI 3 uses Web Components technologies in pure ES2020 javascript."
Zitat von: grossmaggul am 16 Juni 2021, 21:50:22
Ich vermute der Knackpunkt wird das hier sein: "FTUI 3 uses Web Components technologies in pure ES2020 javascript."
Danke, dies hatte ich wohl überlesen. Japp, mit diesen Features kann ich es vergessen:
https://kangax.github.io/compat-table/es2016plus/
Dann muss ich wohl doch das Tablett austauschen. :(
Hallo, läuft bei euch das menu.html aus dem examples - Verzeichnis?
ftui/examples/menu.html
Irgendwie geht bei mir kein Menü auf.
Viele Grüße
Hmmmm, ich mach mal keinen neuen Thread auf:
Es geht um einen Slider, der bei mir die Lautstärke am Onkyo regelt.
Der Onkyo hat per googlecast ein Webradio laufen. Mit dem Slider möchte ich die Lautstärke regeln.
Das geht prinizipiell, nur manchmal "bricht die Verbindung ab". D.h. dass der Slider keine Wirkung mehr zeigt und keine Befehl (set onkyo.chromecast volume 0815) mehr sendet.
Aktualisiere ich den fully-Browser tuts erst mal wieder.
Warum passiert das? Habe ich was übersehen?
Internals:
CASTNAME Onkyo
DEF googlecast "Onkyo"
FUUID 5fcca5a0-f33f-bfeb-e5ba-7a0919ff696042be
IODev local_pybinding
NAME onkyo.chromecast
NR 1018
PYTHONTYPE googlecast
STATE online
TYPE PythonModule
READINGS:
2021-06-28 22:09:00 IODev local_pybinding
2021-07-02 17:08:30 app_id CC1AD845
2021-01-16 14:10:51 cast_type cast
2021-06-28 22:09:40 connection connected
2021-07-02 17:08:30 display_name Default Media Receiver
2021-06-28 23:56:16 icon_url
2021-01-16 14:10:51 ignore_cec 0
2021-01-16 14:10:52 is_active_input 0
2021-01-16 14:10:52 is_stand_by 1
2021-06-21 17:17:01 mediaAlbum
2021-06-21 17:17:01 mediaArtist
2021-06-28 23:32:20 mediaContentId
2021-06-28 23:32:20 mediaContentType
2021-06-21 17:17:01 mediaCurrentPosPercent
2021-06-28 23:32:20 mediaCurrentPosition
2021-06-21 17:17:01 mediaDuration
2021-06-21 17:17:01 mediaImageHeight
2021-06-21 17:17:01 mediaImageUrl
2021-06-21 17:17:01 mediaImageWidth
2021-06-28 23:32:20 mediaPlayerState UNKNOWN
2021-06-28 23:32:20 mediaStreamType UNKNOWN
2021-06-21 17:17:01 mediaTitle
2021-01-16 14:10:51 model_name Onkyo TX-RZ830
2021-06-29 23:09:43 mute 0
2021-01-16 14:10:51 name Onkyo
2021-07-02 17:08:30 session_id b6d3241a-91c2-4404-aa13-c48861b1e6d9
2021-06-28 22:09:30 spotify_login <html><a href="https://accounts.spotify.com/authorize?client_id=e92855a009e74eb69ba6609d3bfd7d96&response_type=code&redirect_uri=https%3A%2F%2Feurope-west1-fhem-ga-connector.cloudfunctions.net%2Fcodelanding%2Fstart&code_challenge_method=S256&code_challenge=DYOYjNUV-zVSKa74H0lmbOlbvO3MatwZFrbhlvvZdxE&scope=user-read-recently-played+user-top-read+user-read-playback-position+user-read-playback-state+user-modify-playback-state+user-read-currently-playing+streaming+playlist-read-private+playlist-read-collaborative+user-follow-read+user-library-read+user-read-email+user-read-private" target="_blank">Connect Spotify account (new window/tab)</a><br></html>
2021-06-28 22:09:30 spotify_user login required
2021-06-28 23:32:20 state online
2021-07-02 17:08:30 status_text Default Media Receiver
2021-07-02 17:08:30 transport_id b6d3241a-91c2-4404-aa13-c48861b1e6d9
2021-01-16 14:10:51 uuid 8b81bbd6-e105-25bf-4e46-29936e9c8040
2021-07-02 21:25:04 volume 35
args:
onkyo.chromecast
PythonModule
googlecast
Onkyo
argsh:
Attributes:
IODev local_pybinding
icon scene_scene
player DefaultMediaRenderer
room HiFi
userattr favorite_1 favorite_2 favorite_3 favorite_4 favorite_5
<ftui-row>
<ftui-column>
<ftui-slider [(value)]="onkyo.chromecast:volume" max="80"
tick="10"
wide-tick="40"
handle="retro"
has-ruler
has-wide-ticks></ftui-slider>
<ftui-label style="margin-top:-1.1em;" class="_size-0punkt75em" [text]="onkyo.chromecast:vol$
</ftui-column>
</ftui-row>
Edit:
Brutal, kaum geschrieben, habe ich den ebenfalls gerade erstellten Thread von mr_petz entdeckt:
https://forum.fhem.de/index.php/topic,121901.0.html
Hi presskopf schau mal hier:
https://forum.fhem.de/index.php/topic,121901.msg1165068.html#msg1165068 (https://forum.fhem.de/index.php/topic,121901.msg1165068.html#msg1165068)
Ich habe das selbe Problem gehabt...
Gruß
Hallo Leute,
Ich habe da mal eine ganz doofe frage. Habe jetzt wieder Zeit mein TabletUI auf den neusten Stand zu bringen und umzubauen. Bin nun über FTUI 3 gestoßen. Installation hat auch geklappt. Nur leider lässt es sich nicht so wie auf meinem PC Bildschirm anzeigen. Auf dem PC Bildschirm bekomme ich das DEMO gezeigt, auf meinem IPad bekomme ich nur TAb 2- Tab 5 gezeigt an der Linken seite.
Lässt es sich nicht auf einem IPad anzeigen oder habe ich etwas nicht eingestellt?
Danke für eure Hilfe.
Hi Wasserwerk33.
Hast du hier schon weiter oben und eine Seite weiter vorn gelesen?
Es könnte sein dass dein IPad den ES2020 nicht unterstützt.
Gruß mr_petz
Zitat von: mr_petz am 16 Juli 2021, 09:41:58
Hi Wasserwerk33.
Hast du hier schon weiter oben und eine Seite weiter vorn gelesen?
Es könnte sein dass dein IPad den ES2020 nicht unterstützt.
Gruß mr_petz
Hi
Ja scheint daran zu liegen. Den auf meinem neuerem IPad geht es. So ein dreck. Wie ich gelesen habe kann man da auch nix machen. 😞
kurz eine Frage....was ist den der Plan von FTUI3 nach vorne gerichtet? Richtig guter Start aber und ich habe es sehr erfolgreich im Einsatz aber wird daran noch aktiv gearbeitet?
Zitat von: MiniBlister am 18 Juli 2021, 10:47:26
kurz eine Frage....was ist den der Plan von FTUI3 nach vorne gerichtet? Richtig guter Start aber und ich habe es sehr erfolgreich im Einsatz aber wird daran noch aktiv gearbeitet?
Hi.
Ich denke schon, aber jetzt ist "Sommerpause (Sommerloch)".
Ein paar Sachen sind auch in den Threads die mit [FTUI3] anfangen.
Jetzt ist die Frage was du vermisst oder hast du sonst irgendwelche Sachen die du noch brauchst oder die nicht gehen bei dir?
Gruß mr_petz
Hallo zusammen
Zitat von: mr_petz am 19 Juli 2021, 09:26:49
Ich denke schon, aber jetzt ist "Sommerpause (Sommerloch)".
Genau - In diesem Sinne: Einen schönen Urlaub alle zusammen! Wir sehen uns im September wieder!
Gruß
Sailor
Hab gerade auch mal angefangen mit FTUI3, funktioniert eigentlich alles ganz gut.
Ein Problem hab ich aber, vorher gab es für Labels die class "autohide", da wurde der Text ausgeblendet wen das Reading nicht mehr vorhanden war. autohide gibt es jetzt nciht mehr, aber hat da jemand eine Lösung?
Die Readings für Unwetterwarnungen aus dem DWD Modul werden halt einfach gelöscht und in FTUI bleibt der Text dann bis man die Seite mal aktualisiert. Ich könnte dann höchstens aus FHEM ein Reload der Seite anstossen.
Ja, das geht mit dem Attribut hidden. Für DWD in etwa so (ungetestet):
<ftui-label [text]="DWD_DEVICE:a_0_eventDesc"
[hidden]="DWD_DEVICE:a_count | map('0:true, .*:false')"
class=""></ftui-label>
Bezgl DWD kannst du dir auch diese Lösungen anschauen:
Lösung von octek0815 in den Posts #938 und #939 (https://forum.fhem.de/index.php/topic,115259.msg1132061.html#msg1132061)
[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen (https://forum.fhem.de/index.php/topic,117858.0.html)
Ah, danke. Hatte gerade überlegt wie das mit Map gehen könnte wenn das Reading ja weg ist, aber klar auf a_count geht das natürlich.
Gerade getestet, genau muss es so aussehen:
<ftui-label [text]="DWD_DEVICE:a_0_eventDesc"
[hidden]="DWD_DEVICE:a_count | map('0:true, 1:false')"
class=""></ftui-label>
Weiß jemand, warum der ausgeschriebene Monat beim "Clock-Modul" nicht funktioniert? Die ersten vier Buchstaben sind ok, dann kommen die aktuellen Sekunden und dann geht es weiter.
Bei vier Buchstaben war noch alles ok.
Angehängt ein Screenshot der Beispielseite (nachdem ich den "Long" Teil freigelegt habe)
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<base href="../" />
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<title>FTUI Example Clock</title>
</head>
<body>
<ftui-grid base-width="150" base-height="150">
<ftui-grid-tile row="1" col="1" height="1" width="1">
<header>DEFAULT</header>
<ftui-clock></ftui-clock>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="2" height="1" width="1">
<header>FHEM TIME</header>
<ftui-clock is-fhem-time></ftui-clock>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="3" height="1" width="1">
<header>Format</header>
<ftui-clock format="eeee" class="size7"></ftui-clock>
<ftui-clock format="hh:mm" class="size-8"></ftui-clock>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="4" height="1" width="2">
<header>LONG</header>
<ftui-clock format="eeee, DD.MMMM YYYY" class="size-5" color="warning"></ftui-clock>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="4" height="1" width="2">
<header>SHORT</header>
<ftui-clock format="DD.MM.YY" class="size-1"></ftui-clock>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>
Ja, das liegt an dem Sekunden replacement in der ftui.helper.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L213). Analog zum März/Mai-Problem (https://forum.fhem.de/index.php/topic,115259.msg1136236.html#msg1136236) kannst du dies umgehen durch unicode; ersetze Zeile 185 (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L185) durch diese:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
Und der Vollständigkeit halber, Zeilen 185+186:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
Zitat von: yersinia am 03 August 2021, 09:44:03
Ja, das liegt an dem Sekunden replacement in der ftui.helper.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L213). Analog zum März/Mai-Problem (https://forum.fhem.de/index.php/topic,115259.msg1136236.html#msg1136236) kannst du dies umgehen durch unicode; ersetze Zeile 185 (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L185) durch diese:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
Und der Vollständigkeit halber, Zeilen 185+186:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
Danke. Jetzt geht es. :)
Fall es jemanden interessiert: Hier die Lösung zum Problem mit der nicht funktionierenden Medialiste in Verbindung mit SB_Player Devices:
https://forum.fhem.de/index.php/topic,17667.msg1169608.html#msg1169608
Hi,
sorry ich muss leider auch noch mal zum example/menu.html fragen.
Finde das mit dem 3 Strich Menü super, leider funktioniert es bei mir nicht.
Ich sehe zwar die Seite kann das Menü aber nicht öffnen. Also ein Klick auf die 3 Striche öffnet nichts.
Es passiert einfach garnichts.
Ich benutze Chrome und habe es sowohl auf dem Desktop als auch auf dem Handy versucht.
In der Development Console des Browsers sehe ich beim laden der Seite:
{"message":"The message port closed before a response was received."}
in toolbarContentscript.js
Hat es damit etwas zu tun?
Gruß,
Stefan
Nochmal zum Thema "medialist", die scheint Probleme mit Unterstrichen in Dateinamen zu haben. Zumindest werden bei mir Medienlisten, die einen Dateinamen mit Unterstrich enthalten in FTUI3 gar nicht angezeigt.
In iTunes/Music werden Unterstriche bei Backticks erzeugt, z.B. I´m. Aber auch Doppelpunkte in Liednamen erzeugen Unterstriche.
Hallo Thyraz
Zitat von: Thyraz am 19 November 2020, 15:55:40
Hab mal eine frühe Version einer Kalender Komponente die gern getestet werden darf.
Eingebunden wird das Ganze dann so:
<ftui-calendar view="listWeek" height="500px">
<ftui-calendar-data calendar="iCloud" color="primary"></ftui-calendar-data>
<ftui-calendar-data calendar="Abfall" color="brown"></ftui-calendar-data>
</ftui-calendar>
Zum Testen braucht man von hier: https://github.com/Thyraz/ftui
- /components/calendar/
- /modules/fullcalendar/
Habe soeben den Goggle - Kalender von 3 unserer Familienmitglieder erfolgreich importiert.
Dank für dieses Modul/Komponente!
Dabei ist mir folgendes aufgefallen bzw. habe ich folgende Fragen:
a) Wenn sich der Calendar in fhem neu einliest und dabei neue Termine herunterlädt, wird das leider nicht automatisch im ftui angezeigt.
Man muss erst ein reload (F5) vornehmen.
b) Wenn ich die Termine aller Mitglieder tabellarisch nebeneinander darstellen will kann ich das nur mit
<table width="100%" border="0">
<tr>
<td style="width: 25%; vertical-align:top">
Papa
</td>
<td style="width: 25%; vertical-align:top">
Sohn
</td>
<td style="width: 25%; vertical-align:top">
Tochter
</td>
<tr>
<tr>
<td style="width: 25%; vertical-align:top">
<ftui-calendar view="listMonth" height="90%" calendar-title-font-size="16">
<ftui-calendar-data calendar="UI_Calendar_Papa" color="red"> </ftui-calendar-data>
</ftui-calendar>
</td>
<td style="width: 25%; vertical-align:top">
<ftui-calendar view="listMonth" height="90%" calendar-title-font-size="16">
<ftui-calendar-data calendar="UI_Calendar_Sohn" color="green"> </ftui-calendar-data>
</ftui-calendar>
</td>
<td style="width: 25%; vertical-align:top">
<ftui-calendar view="listMonth" height="90%" calendar-title-font-size="16">
<ftui-calendar-data calendar="UI_Calendar_Tochter" color="blue"> </ftui-calendar-data>
</ftui-calendar>
</td>
</tr>
</table>
Leider sind hierbei die Sprünge der "leeren" Tage nebeneinander nicht so schön.
Kann man das Modul dazu zwingen jeden Tag aufzulisten, auch wenn keine Einträge vorhanden sind und dabei die Zahl der Einträge auf beispielsweise 3 fixiert?
c) Wie kann man in den Monaten blättern (Pfeil nach links/rechts)?
d) Kann man das Alias-Attribut des Calendar-Device als automatische Überschrift verwenden?
Gruß
Sailor
Zitat von: yersinia am 03 August 2021, 09:44:03
Ja, das liegt an dem Sekunden replacement in der ftui.helper.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L213). Analog zum März/Mai-Problem (https://forum.fhem.de/index.php/topic,115259.msg1136236.html#msg1136236) kannst du dies umgehen durch unicode; ersetze Zeile 185 (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L185) durch diese:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
Und für Septe
mber, Nove
mber und
Deze
mber:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'Dece%#109;ber'];
Zwischenfrage:
Gibt es eine (deutschsprachige) Doku zu FTUI version 3? Im Wiki scheint es nichts zu geben - oder bin ich blind?
Anders gefragt:
Wie fängt man am besten an, wie habt ihr angefangen?
P.S: https://forum.fhem.de/index.php/topic,34233.0.html - erster Beitrag gelesen. Aber wie fängt man real an, wo liest man konkret Beispiele?
Den Beitrag, den Du verlinkt hast bezieht sich auf FTUI 2.
Alles was es an Doku und Beispielen zu FTUI3 gibt, findest Du hier: https://github.com/knowthelist/ftui
Ich habe festgestellt, dass cmdalias die über FTUI 3 per Button ausgeführt werden sollen irgendwie nicht funktionieren.
FTUI 3
<ftui-button (value)="AlleRollos" states="Hoch" shape="circle" fill="outline" color="gray">
<ftui-icon name="arrow-up" type="svg" color="gray"></ftui-icon>
</ftui-button>
mit FTUI 2 stellte das kein Problem dar.
Der Befehl set AlleRollos Hoch funktioniert auch sonst ohne Probleme in FHEMWEB.
Mache ich etwas falsch, oder irgendwelche hat jemand Ideen was ich anders machen muss?
Ich habe somfy und sie alle nochmal angelernt.
Ich habe auch angefangen, mein "altes" FTUI auf Version 3 um zu stellen.
Man muss natürlich aufgrund der fehlenden Dokumentation noch relativ viel im Code suchen und probieren, aber im Großen und Ganzen habe ich alles hinbekommen, was vorher auch ging.
Subjektiv ist es viel performanter als das alte UI, was man vor allem auf Tablets merkt die schon ein paar Jahre alt sind und es wirkt auch einfach moderner und mehr aus einem Guss. Gute Arbeit. :)
Die gröbsten Sachen die mir aufgefallen sind:
- Bei ftui-row/column/cell fehlen mir noch "einfache" Möglichkeiten, die Abstände zu reduzieren. Manchmal möchte ich in einem Tile in dem mehrere ftui-row Elemente sind, 2 rows enger zusammen stehen haben als die übrigen. Das kann ich zwar mit negativem margin-top styles o.ä. "irgendwie" hinbasteln, oft hat das aber Einfluss auf all die darunter stehenden Elemente die dann nicht mehr ins Schema passen. Früher gab es sowas wie top-space / narrow / compressed mit denen man Abstände zwischen Elementen beeinflußen konnte. Sowas fehlt mir an einigen Stellen noch.
Edit: Nach ein bisschen basteln, funktioniert das mit dem height Attribut zumindest bei den ftui-rows ganz gut.
- Im alten FTUI konnte man über class "inline" Zeilenumbrüche verhindern. Auch hier fehlt mir in v3 die passende Möglichkeit. In einer ftui-row werden mehrere Elemente wenn genug Platz ist problemlos nebeneinander angeordnet, aber sobald ich in eine ftui-column gehe, baut das UI mehrere Elemente in der Column nur noch untereinander auf, selbst wenn die Column ausreichend breit ist. Auch hier kann ich natürlich wieder versuchen auf Standard-HTML auszuweichen und die table selber hinbiegen, aber dafür gibt's die Layout Komponenten ja eigentlich.
- Bei der Weather Component habe ich es nicht hinbekommen, das iconSet zu wechseln. Ein "iconSet" oder "iconset" Attribut im Tag wird einfach ignoriert. Am Ende musste ich das iconset in der weather.component.js hardcoded ändern.
<ftui-weather size="6" provider="dwdamcharts" iconSet="amcharts" [condition]="dwdWeather:fc1_4_cond"></ftui-weather>
Edit: Das geht doch, aber hier muss das Attribut wegen der automatischen Camel-case Umwandlung "icon-set" heissen:
<ftui-weather size="6" provider="dwdamcharts" icon-set="amcharts" [condition]="dwdWeather:fc1_4_cond"></ftui-weather>
- Ebenfalls im Weather Bereich fehlen noch diverse Iconsets aus dem alten UI. Ich verwende DWD und Amcharts und habe mir das auch in V3 hingebastelt, meine entsprechenden Mappings in der weather.map.js sind aber im Moment noch etwas wirr - das kann man noch schöner machen. Das war jetzt auch nur eine Knappe Stunde Aufwand und funktioniert erst mal.
- Die Popup Component braucht unbedingt wieder sowas wie das alte "interlock", so dass man das Popup nicht schließen und auch kein Hintergrund-Element anklicken kann, um Pin-Pads für die Alarmanlage zu erstellen. :)
- Images in Popups werden nicht so einfach angezeigt, da die Image component immer erst auf isVisible checked, das aber wohl nur zutrifft, wenn das Popup geöffnet ist. Wird also keine Aktualisierung (updateImage()) durchgeführt beim Öffnen des Popups, ist die src vom img tag im popup leer und es wird nichts angezeigt.
- Ich benutze den Slider als Ersatz für das alte "range" plugin. Es wäre schön, wenn man sich den aktuellen Wert eines readonly-sliders optional permanent anzeigen lassen könnte, z.B. in dem der Tooltip mit dem aktuellen Wert per Option permanent eingeblendet werden kann und nicht nur beim Verstellen des Sliders sichtbar ist (was bei einem readonly Slider ja gar nicht geht). Alternativ könnte man Badges/Slots für Slider verfügbar machen, indem man z.B. am seitlich am oberen/unteren Ende des Sliders Werte einblenden kann.
Werde später, wenn ich alles fertig habe, noch einen Screenshot vom UI einfügen.
Hi Phiolin, für ne Alarmanlage hätte ich was für dich...
Zitat von: Phiolin am 18 September 2021, 16:05:45
...
- Die Popup Component braucht unbedingt wieder sowas wie das alte "interlock", so dass man das Popup nicht schließen und auch kein Hintergrund-Element anklicken kann, um Pin-Pads für die Alarmanlage zu erstellen. :)
...
https://forum.fhem.de/index.php/topic,120107.msg1145784.html#msg1145784 (https://forum.fhem.de/index.php/topic,120107.msg1145784.html#msg1145784)
oder hier zum selbst erstellen mit pointer-events:none
https://forum.fhem.de/index.php/topic,115259.msg1134096.html#msg1134096 (https://forum.fhem.de/index.php/topic,115259.msg1134096.html#msg1134096)
Edit:
Zu den WetterIcons kannst du dich hier belesen. Risiko hat da was erstellt. Könntest du für dich temporär anpassen...
https://forum.fhem.de/index.php/topic,117473.msg1150166.html#msg1150166 (https://forum.fhem.de/index.php/topic,117473.msg1150166.html#msg1150166)
Gruß mr_petz
Danke für die Tips.
So sieht's bei mir jetzt aus. Bin recht zufrieden. Es ist noch ein bisschen Platz für mehr Widgets, aber alles funktioniert so wie es soll. Im Großen und Ganzen habe ich nachgebaut, was ich auch schon in der vorherigen FTUI hatte. Sieht aber jetzt im Vergleich doch alles etwas moderner aus und ist trotz einer Menge Komponenten doch subjektiv deutlich performanter als die alte Version.
Das hängt so als UI auf dem Tablet bei uns im Flur an der Wand.
ich hänge ganz am Anfang. Möchte bei den ftui-tab das Icon gerne in einer bestimmten Größe haben (hab ich mit class="size-1" gelöst). Leider wächst das Hintergrund-Feld nicht mit. Zudem möchte ich es gerne als Quadrat haben mit abgerundeten Ecken. mit shape="normal" wird der Hintergrund aber länglich dargestellt... wäre prima, wenn einer einen Tipp hätte
<ftui-tab view="home" fill="solid" shape="normal" active>
<ftui-icon class="size-0" name="home"></ftui-icon>
</ftui-tab>
<ftui-tab view="heating" fill="solid" direction="vertical">
<ftui-icon class="size-0" name="sani_heating"></ftui-icon>
</ftui-tab>
<ftui-tab view="light" fill="solid">
<ftui-icon class="size-0" name="bolt"></ftui-icon>
</ftui-tab>
Hi.
Kannst auch mit:
style="width:5px"
arbeiten.
Bsp.:
<ftui-tab view="home" fill="solid" direction="vertical" style="width:5px">
<ftui-icon class="size-1" name="home1"></ftui-icon>
</ftui-tab>
Grüße mr_petz
danke! sieht schon etwas besser aus wenn das Kästchen klein genug ist. Wenn ich den Wert erhöhe wird es irgendwann wieder länglich;-)
Und es ist (warum auch immer) nach rechts verrutscht und nicht mehr zentriert....
Zitat von: StephanFHEM am 24 September 2021, 22:47:57
Und es ist (warum auch immer) nach rechts verrutscht und nicht mehr zentriert....
Du darfst den style nicht am Icon anwenden, sondern nur wie ich im Bsp. im ftui-tab.
Da verschiebt sich nichts.
nächstes Bsp. mit height:
<ftui-tab view="home" fill="solid" direction="vertical" style="width:30px;height:60px">
<ftui-icon class="size-4" name="home1"></ftui-icon>
</ftui-tab>
Jetzt sieht es perfekt aus mit height... aber es ist immer noch eingerückt. Und ich hab es im ftui-tab gemacht und nicht im icon.
hier der Code
<ftui-grid cols="11" rows="7" margin="1" resize>
<ftui-grid-tile row="1" col="1" height="6" width="1" color="transparent">
<header class="size-0">Menü</header>
<ftui-column>
<ftui-tab view="home" fill="solid" style="width:18px;height:40px" active>
<ftui-icon class="size-0" name="home"></ftui-icon>
</ftui-tab>
<ftui-tab view="heating" fill="solid" direction="vertical">
<ftui-icon class="size-0" name="sani_heating"></ftui-icon>
</ftui-tab>
<ftui-tab view="light" fill="solid">
<ftui-icon class="size-0" name="bolt"></ftui-icon>
</ftui-tab>
<ftui-tab view="rabbit" fill="solid">
<ftui-icon class="size-0" name="paw"></ftui-icon>
</ftui-tab>
[...]
Versuch mal:
style="width:10px;height:40px"
bei home.
Das sieht bei mir proportional gut aus.
ändert bei mir leider nichts daran, dass es eindeutig nach rechts verschoben ist.
hab das jetzt bei allen FTUI-Tabs gemacht und wenigstens sind jetzt alle gleich nach rechts verschoben und damit wieder untereinander. Ändert aber nichts daran, dass sie Rechtsseitig unter dem Header-Namen stehen...
noch eine zusätzliche Sache:
1. wenn ich ein Icon mit einem farbigen Kreis im Hintergrund haben möchte geht das wohl nur mit der Definition über einem Button und solid oder? Hab das mal gemacht und sieht aus wie gewollt, ist aber noch klickbar (blendet dann eine Millisekunde aus und wieder ein - kann man das abstellen?)
2. hab für die Senkrechten Menü-Items im Column jetzt align-items="top" gemacht und sie hängen nun ohne Abstand aneinander. Mit margin kann man ja für die gesamte Column den Abstand setzen, kann man auch den Abstand für die einzelnen Tab-View-Icons setzen? Oder muss in jedes Tab-View ein Margin rein?
Zitat von: StephanFHEM am 25 September 2021, 20:26:40
...
noch eine zusätzliche Sache:
1. wenn ich ein Icon mit einem farbigen Kreis im Hintergrund haben möchte geht das wohl nur mit der Definition über einem Button und solid oder? Hab das mal gemacht und sieht aus wie gewollt, ist aber noch klickbar (blendet dann eine Millisekunde aus und wieder ein - kann man das abstellen?)
Schau hier:
https://forum.fhem.de/index.php/topic,115259.msg1159210.html#msg1159210 (https://forum.fhem.de/index.php/topic,115259.msg1159210.html#msg1159210)
Das hatte ich mal genau dafür gebaut...
danke, schau ich mir an! es ist echt frustrierend. Es muss alles neu aufgebaut werden und vieles geht gefühlt erst mal nicht mehr. Aber die Hoffnung auf den Geschwindigkeitszuwachs treibt an...
jetzt noch einer: ich möchte in einer Liste (Column/Row) Icons drin haben die selbst mit class="size-0" leider noch sehr groß dargestellt werden. Gibt es eine Möglichkeit die noch kleiner zu machen?
Das stimmt, wirklich klein geht das nicht.
Deshalb habe ich jetzt noch etwas den Minusbereich erschlossen.
size="-4" bis size="12"
<ftui-grid-tile row="4" col="4" height="4" width="3">
<header>TABLE</header>
<ftui-row>
<ftui-column width="40%">
<ftui-icon name="smile-o" color="green" size="-3"></ftui-icon>
<ftui-icon name="meh-o" color="yellow" size="-3"></ftui-icon>
<ftui-icon name="frown-o" color="red" size="-3"></ftui-icon>
</ftui-column>
<ftui-column>
<ftui-label> name="smile-o" size="-3"</ftui-label>
<ftui-label> name="meh-o" size="-3"</ftui-label>
<ftui-label> name="frown-o" size="-3"</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
klappt super! Dank dir.
hab jetzt nur noch Ausrichtungs-Probleme. In einem anderen Fall hab ich Columns in einer Reihe angeordnet und das funktioniert prima.
Jetzt geht das aber nicht wg. den Icons wg. der unterscheidlichen Größe (die Column ist länger und etwas verschoben). Daher hab ich jetzt einzelne Reihen gemacht.
Das klappt auch soweit aber sie lassen sich nicht Top align.. egal was ich mache.
Jemand eine Idee?;-)
Schau mal im Grid Example nach. Man kann bei Column und Row die Attribute
align-items und
margin
padding
setzen
<ftui-grid-tile row="4" col="4" height="4" width="3">
<header>TABLE</header>
<ftui-row>
<ftui-column width="40%" align-items="top" padding="2">
<ftui-icon name="smile-o" color="green" size="-3"></ftui-icon>
<ftui-icon name="meh-o" color="yellow" size="-3"></ftui-icon>
<ftui-icon name="frown-o" color="red" size="-3"></ftui-icon>
</ftui-column>
<ftui-column>
<ftui-label> name="smile-o" size="-3"</ftui-label>
<ftui-label> name="meh-o" size="-3"</ftui-label>
<ftui-label> name="frown-o" size="-3"</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Das ganze Fein-Verschieben kann man sich aber sparen, wenn die Element, die gleich ausgerichtet sein sollen, sich in der gleichen Row (für vertikale Ausrichtung) oder in der gleichen Column (für horizontale Ausrichtung) befinden.
Siehe hier mein letztes Beispiel nur Column und Row vertauscht. Dadurch bleibt der rechte Text auf der gleichen Höhe, wie das größere Icon.
<ftui-grid-tile row="8" col="4" height="4" width="3">
<header>TABLE</header>
<ftui-column>
<ftui-row>
<ftui-icon name="smile-o" color="green" margin="1" size="3"></ftui-icon>
<ftui-label> name="smile-o" size="-3"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-icon name="meh-o" color="yellow" margin="1" size="-3"></ftui-icon>
<ftui-label> name="meh-o" size="-3"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-icon name="frown-o" color="red" margin="1" size="-3"></ftui-icon>
<ftui-label> name="frown-o" size="-3"</ftui-label>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
Nachtrag:
man kann aber auch den kleineren Icons in einer Column etwas padding oben und unten geben, damit sie in Summe dem großen Icon hoch sind.
<ftui-grid-tile row="4" col="4" height="4" width="3">
<header>TABLE</header>
<ftui-row>
<ftui-column width="40%">
<ftui-icon name="smile-o" color="green" size="3"></ftui-icon>
<ftui-icon name="meh-o" padding="1rem 0" color="yellow" size="-3"></ftui-icon>
<ftui-icon name="frown-o" padding="1rem 0" color="red" size="-3"></ftui-icon>
</ftui-column>
<ftui-column>
<ftui-label> name="smile-o" size="-3"</ftui-label>
<ftui-label> name="meh-o" size="-3"</ftui-label>
<ftui-label> name="frown-o" size="-3"</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
hmm .... .hab ich aber auch schon alles probiert... vielleicht sehe ich auch einfach den Wald vor lauter Bäumen nicht...
hier mein Code und wie es aussieht:
<ftui-grid-tile row="1" col="1" height="4" width="5" color="blue-translucent">
<header class="size-0">Sicherheit</header>
<ftui-column align-items="top">
<ftui-row align-items="top">
<ftui-label color="white" class="size-2 bold" width="40%">Name</ftui-label>
<ftui-label color="white" class="size-2 bold" width="25%" align="center">Status</ftui-label>
<ftui-label color="white" class="size-2 bold" width="35%">seit....</ftui-label>
</ftui-row>
<ftui-row align-items="top">
<ftui-label color="white" class="size-2" [text]="Fensterstatus:001_device" width="40%"></ftui-label>
<ftui-cell width="25%"><ftui-icon [name]="Fensterstatus:001_state | map('open: fts_window_1w_open, close: fts_window_1w')" color="orange" size="-2"></ftui-icon></ftui-cell>
<ftui-label color="white" class="size-2" [text]="Fensterstatus:001_age" width="35%"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label color="white" class="size-2" [text]="Fensterstatus:002_device" width="40%"></ftui-label>
<ftui-cell width="25%"><ftui-icon [name]="Fensterstatus:002_state | map('open: fts_window_1w_open, close: fts_window_1w')" color="orange" size="-2"></ftui-icon></ftui-cell>
<ftui-label color="white" class="size-2" [text]="Fensterstatus:002_age" width="35%"></ftui-label>
</ftui-row>
</ftui-column>
Das Cell um das Icon musste ich übrigens einsetzen weil er das width 25% direkt im Icon nicht geschluckt hat
Beim Updaten kommt übrigens eine Fehlermeldung: "021.10.02 20:31:31 1 : Got 5065 bytes for www/ftui/examples/icon.html, expected 5038" ... evnt muss da noch etwas angepasst werden?
Hallo und guten Morgen,
wollte heute morgen mein FHEM auf den aktuellen Stand bringen, das Update meckert aber bei den Änderungen von gestern. Hier mal der LOG-Auszug:
2021.10.03 08:15:43.314 1 : Downloading https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
2021.10.03 08:15:43.315 1 :
2021.10.03 08:15:43.316 1 : ftui
2021.10.03 08:15:43.388 1 : UPD www/ftui/components/button/button.component.css
2021.10.03 08:15:43.403 1 : UPD www/ftui/components/element.component.js
2021.10.03 08:15:43.415 1 : UPD www/ftui/components/grid/grid.component.js
2021.10.03 08:15:43.427 1 : UPD www/ftui/components/icon/icon.component.js
2021.10.03 08:15:43.439 1 : UPD www/ftui/components/knob/knob.component.js
2021.10.03 08:15:43.451 1 : UPD www/ftui/components/label/label.component.js
2021.10.03 08:15:43.493 1 : UPD www/ftui/examples/contents/content-components.html
2021.10.03 08:15:43.494 1 : UPD www/ftui/examples/icon.html
2021.10.03 08:15:43.495 1 : Got 5065 bytes for www/ftui/examples/icon.html, expected 5038
2021.10.03 08:15:43.495 1 : aborting.Denke da passt wohl was nicht bezüglich der Dateigrösse.
Ich habe auch mal einen Pull-Request für das Problem mit der Datumsanzeige bei GitHub eingestellt, Quelle war von yersinia, siehe hier:
Zitat von: yersinia am 03 August 2021, 09:44:03
Ja, das liegt an dem Sekunden replacement in der ftui.helper.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L213). Analog zum März/Mai-Problem (https://forum.fhem.de/index.php/topic,115259.msg1136236.html#msg1136236) kannst du dies umgehen durch unicode; ersetze Zeile 185 (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L185) durch diese:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
Und der Vollständigkeit halber, Zeilen 185+186:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
Zitat von: yersinia am 04 September 2021, 19:59:17
Und für September, November und Dezember:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'Dece%#109;ber'];
Gruß Markus
Merge ist gemacht und Controlfile Fehler ist behoben.
lief nun ohne Probleme durch bei mir....
den Fehler mit dem aling-items="top" hab ich jetzt wieder genau so auf der nächsten Seite mit einer Liste von Heizungs-Thermostaten....
Jetzt muss ich da nur noch eine Lösung finden und einer müsste sich erbarmen und das weekprofile-widget von FTUI2 umsetzen;-)
und schon wieder der nächste Fehler... wenn ich den Button für Plus/Minus drücke sendet er nicht nur einmal den um 0.5 reduzierten Wert sondern macht daraus eine Dauerschleife. Er sendet also in Folge 21.0, 20.5, 20.0, 19.5 ... usw bis ich den Browser beende:-) nSieht jemand auf den ersten Blick was daran falsch ist?
<ftui-button [value]="{{device}}:desired-temp" (value)="add(-0.5) | {{device}}:desired-temp" states="$value" fill="">
<ftui-icon size="-2" name="minus"></ftui-icon>
</ftui-button>
Zitat von: setstate am 03 Oktober 2021, 13:38:08
Merge ist gemacht und Controlfile Fehler ist behoben.
Super, bei mir auch alles geklappt. Mercy mal.
hab jetzt noch mal mit der Add-Pipe gespielt und in FHEM ein Dummy mit einfachem Zähler angelegt. Das Verhalten bleibt immer das selbe. Man klickt einmal drauf und er zählt dauerhaft hoch. Hab es auch in meiner Haupt-Index-Seite benutzt um andere Fehler auszuschließen aber auch dort das gleiche Verhalten. Mich wundert etwas, dass andere bisher nicht auf diesen Fehler gestoßen sind... vielleicht mache ich auch etwas fundamentales verkehrt...
hier nochmal der vereinfachte Code der den Fehler erzeugt:
<ftui-button [value]="Test:zaehler" (value)="add(1) | Test:zaehler" states="$value" fill="">
<ftui-icon size="-2" name="plus"></ftui-icon>
</ftui-button>
nochmal geändert mit setreading.. aber gleicher Fehler.... kann den Button evnt. mal jemand ausprobieren, ob das Verhalten nur bei mir zu beobachten ist? Man muss quasi nur ein "define Test dummy" und ein "setreading Test zaehler 1" in FHEM eingeben und dann den Button in FTUI3 reinsetzen. Nehmt aber eine extra Instanz des Browsers da sich der Browser ggf. aufhängt und so noch beendet werden kann...
<ftui-button [value]="Test:zaehler" (value)="add(1) | setreading Test zaehler $value" states="$value" fill="">
<ftui-icon size="-2" name="plus"></ftui-icon>
</ftui-button>
Zitat von: StephanFHEM am 03 Oktober 2021, 22:30:33
...
Mich wundert etwas, dass andere bisher nicht auf diesen Fehler gestoßen sind... vielleicht mache ich auch etwas fundamentales verkehrt...
...
Hilft dir nicht wirklich weiter, aber ich habe bei mir noch ne ältere ftui3 (03.2021) Version, da ist das Verhalten mit deinen Settings normal...
Muss sich setstate anschauen.
Bin dabei. Bei der Loop Erkennung hatte ich was geändert und dieser Fall funktioniert jetzt nicht mehr.
Zitat von: setstate am 04 Oktober 2021, 13:59:17
Bin dabei. Bei der Loop Erkennung hatte ich was geändert und dieser Fall funktioniert jetzt nicht mehr.
Super! War schon am verzweifeln.... gibt es eigentlich eine Möglichkeit, diesen tollen SegmentButton auch als Tab-View zu nutzen?
Hier habe ich mal zwei Tab-Segment Beispiel zusammengebaut:
1. mit Speichern in einem FHEM Reading
https://knowthelist.github.io/ftui/www/ftui/examples/tab-segment.html
2. nur lokal über script
https://knowthelist.github.io/ftui/www/ftui/examples/tab-segment-local.html
super vielen Dank dafür! das klappt wie gewünscht... allerdings dann leider doch noch nicht bei mir da ich das für ein Menü-Unterbaum nutzen wollte. Das scheint aktuell nicht zu funktionieren wie in FTUI2
Siehe https://forum.fhem.de/index.php/topic,115259.msg1140100.html#msg1140100 (https://forum.fhem.de/index.php/topic,115259.msg1140100.html#msg1140100)
Edit: hab gerade noch ein Update gemacht und jetzt läuft das Menü im Menü!
By the way: wäre es möglich aus der Update-Prozedur die Index.html rauszunehmen? Er überschreibt immer wieder meine Seite;-)
Mein Problem mit der Darstellung besteht immer noch.... hab jetzt ein ähnliches Problem mit vertikal angeordneten Buttons in einem Feld.
Ich möchte diese zentriert haben (also align-items="center"). Das führt allerdings dazu, dass er die Icons mit gleichem Abstand auf die komplette Breite verteilt.
gibt es die Möglichkeit, dass man ohne viel gebastel die Buttons/Icons mittig anordnet mit einem bestimmten Abstand zueinander so dass je nach vorhandener Breite nur links und rechts der Rand wächst?
Mit margin bin ich da auch nicht weiter gekommen....
Ich habe eine Lösung für das Darstellungsproblem gefunden.
Wenn man die ganzen columns/rows in eine ftui-cell packt, dann nimmt er die komplette Standard-Formatierung raus und man kann die einzelnen Elemente mit Margin und co dahin rücken wo man sie haben möchte.
Zitat von: setstate am 04 Oktober 2021, 19:59:36
Hier habe ich mal zwei Tab-Segment Beispiel zusammengebaut:
1. mit Speichern in einem FHEM Reading
https://knowthelist.github.io/ftui/www/ftui/examples/tab-segment.html
...
hab das bei mir auch erfolgreich umgesetzt (mit Reading in FHEM). Was ich noch nicht hinbekommen habe: wenn ich über mein Haupt-Menü auf Licht schalte macht er den Licht-TAB auf. Darauf ist der Segment-Button über den man den Raum auswählen kann welcher dann wieder über einen eigenen View angezeigt wird. Obwohl die ID im Reading bereits auf einem Raum steht wird beim ersten öffnen aber nichts angezeigt. Ich muss quasi erst nochmal einen Raum wählen bevor er etwas zeigt. Kann man da nicht irgendwas als Standard-Aktiv setzen? Das gleiche Verhalten hast du in deinem Beispiel übrigens auch. Beim ersten öffnen der Seite wird nichts angezeigt.
Dank fürs Update!
Irgendwie fehlt mir bei der map Verarbeitung mit dem Update die Intervalle:
<ftui-label [text]="Temp_Draussen:temp"
[color]="Temp_Draussen:temp | map('-50:blue, 5:light, 15:success, 25:danger')"
unit="°C"
class="inline size-5">
</ftui-label>
Vor dem Update hat map die Zwischenräume interpretiert und die Werte entsprechend gefüllt (bei 18 zB success), mittlerweile funktioniert dies nur beim genauen Wert. Hat sich hier was grundlegendes geändert?
EDIT
Ok, hab es selbst gefunden: man nehme das Binding step anstelle von map, dann funktioniert es auch. ::)
Genau. Gut entdeckt! Das hatte ich schon seit Ewig vor, dass zu trennen.
@Setstate: gibt es eigentlich irgendwo einen Change-log für Updates oder lohnt sich das im aktuellen Status noch nicht? (es kommen ja sicher ab und zu Änderungen die eine Anpassung im Code erforderlich machen). Und ich hab bei mir jetzt Dropdowns eingebaut und würde die Schrift im Feld (nicht in der Liste) gerne Weiß haben. Color ändert leider nichts. Baust du das noch ein?
Im git findest Du doch immer die aktuellen Änderungen.
.... sorry, hatte ich bisher nicht gesehen... hab jetzt nochmal alles durchgeklickt und die Änderungen unter "commits" gefunden;-)
Hallo,
seit dem letzten Update werden bei mir beim Aufrufen der Seite diverse Aktionen durchgeführt, z.B. werden meine Squeezebox immer eingeschaltet und der Satelitenreceiver.
Hat sich da irgendwas geändert?
Gruß
Eisix
hab ich bei mir auch bei einem Button wenn ich auf dem Tablet bei FULLY den Cache löschen und neu starte. Bei Chrome hab ich es nicht. Bei mir steuert der Button eine Sirene die beim Start immer ausgeschaltet wird (den Zustand hat sie zwar auch schon vorher aber es gibt durch das erneute Ausschalten einen lauten Piepston von sich - ansonsten wäre es mir wohl garnicht aufgefallen)
Der Button
<ftui-button margin="0.5" fill="solid" shape="circle" class="size-2" [value]="Alarm_Sirene:Alarm_Sirene_Zustand" (value)="setreading Alarm_Sirene:Alarm_Sirene_Zustand" states="an,aus" [color]="Alarm_Sirene:Alarm_Sirene_Zustand | map('an:green, aus:midnightblue, still:yellow, laut:red')">
<ftui-icon name="bullhorn" color="white" size="0"></ftui-icon>
</ftui-button>
Moin zusammen
Auch ich habe seit den Updates einige seltsame Aktionen.
Immer wenn ich den Browser neu lade (F5 etc.), werden einzelne Buttons ausgelöst.
<td width="25%" align="center">
<ftui-button [value] = "OS_DoorBird"
(value) = "set OS_DoorBird Open_Door 2"
fill = "solid"
class = "size-3"
shape = "circle"
states = "">
<ftui-icon name = "fts_garage"
color = "light"
class = "size-2">
</ftui-icon>
</ftui-button>
<ftui-label text = "Toggle Carport"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
Ist mir nur aufgefallen, weil ich ein "at" am Laufen habe, welches mir den Browser jeden Morgen um 06:00Uhr neu ladet und mir dabei das Garagentor auffährt! :o
Der Fehler ist reproduzierbar und ein auskommentieren des obigen Codes "behebt" den Fehler.
Gruß
Sailor
Zitat von: yersinia am 10 Oktober 2021, 14:48:12
Irgendwie fehlt mir bei der map Verarbeitung mit dem Update die Intervalle:
<ftui-label [text]="Temp_Draussen:temp"
[color]="Temp_Draussen:temp | map('-50:blue, 5:light, 15:success, 25:danger')"
unit="°C"
class="inline size-5">
</ftui-label>
EDIT
Ok, hab es selbst gefunden: man nehme das Binding step anstelle von map, dann funktioniert es auch. ::)
Heißt das, man muss den Code jetzt so ändern?
<ftui-label [text]="Temp_Draussen:temp"
[color]="Temp_Draussen:temp | step('-50:blue, 5:light, 15:success, 25:danger')"
unit="°C"
class="inline size-5">
</ftui-label>Gruß
Sailor
Zitat von: Sailor am 12 Oktober 2021, 10:30:42Heißt das, man muss den Code jetzt so ändern?
<ftui-label [text]="Temp_Draussen:temp"
[color]="Temp_Draussen:temp | step('-50:blue, 5:light, 15:success, 25:danger')"
unit="°C"
class="inline size-5">
</ftui-label>
Jup, aber nur für solche Werte in denen man auch Zahlen-Schwellenwerte hat. Für direkte mappings wie
open:success, closed:danger bleibt map.
Und für alle die via vi[m] suchen und ersetzen wollen:
:%s/map(/step(/gc
OK, dann scheint das ja ein generelles Problem zu sein. Ich mache mal ein Rollback da mir das ganze alle Temperaturwerte meiner Heizung löscht.
Gruß
Eisix
Zitat von: Sailor am 12 Oktober 2021, 10:28:30
Moin zusammen
Auch ich habe seit den Updates einige seltsame Aktionen.
Immer wenn ich den Browser neu lade (F5 etc.), werden einzelne Buttons ausgelöst.
<td width="25%" align="center">
<ftui-button [value] = "OS_DoorBird"
(value) = "set OS_DoorBird Open_Door 2"
fill = "solid"
class = "size-3"
shape = "circle"
states = "">
<ftui-icon name = "fts_garage"
color = "light"
class = "size-2">
</ftui-icon>
</ftui-button>
<ftui-label text = "Toggle Carport"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
Ist mir nur aufgefallen, weil ich ein "at" am Laufen habe, welches mir den Browser jeden Morgen um 06:00Uhr neu ladet und mir dabei das Garagentor auffährt! :o
Der Fehler ist reproduzierbar und ein auskommentieren des obigen Codes "behebt" den Fehler.
Gruß
Sailor
Habe das selbe Problem. Habe ein Roll-Back gemacht, nun ist alles wieder gut.
Grüße
Olli
Zitat von: Eisix am 11 Oktober 2021, 09:54:34
Hallo,
seit dem letzten Update werden bei mir beim Aufrufen der Seite diverse Aktionen durchgeführt, z.B. werden meine Squeezebox immer eingeschaltet und der Satelitenreceiver.
Hat sich da irgendwas geändert?
Gruß
Eisix
Sollte sich seit gestern Abend erledigt haben. Ich habe das Ganze noch mal grundlegend geändert.
Für alle mit eigenen Komponenten:
Soll eine Wertänderungen auch ein Senden auslösen, muss sie per
this.submitChange(<propertyName>, <value>);
aufgerufen werden. Bei nur this.value = value; passiert das nicht mehr
https://github.com/knowthelist/ftui/commit/684ce106a4c6c5f2634d40897d51584c5db53e3a
Update installiert und Fehler mit den selbst auslösenden Buttons taucht nicht mehr auf.
Nach dem Update mussten wie schon geschrieben alle Icons die für einen Zahlenraum angezeigt werden von map auf step umgestellt werden
Hallo,
mal ne Frage, wurde bezüglich dem Attribut "badge" was angepasst? Habe bei mir meine Müllsymbole wie folgt definiert
<ftui-column>
<ftui-icon name="trash" color="black" [class-name]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
<ftui-badge [text]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
[color]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:red, 1:yellow')"
[hidden]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
</ftui-badge> <!-- Heute und Morgen -->
<ftui-badge [text]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days"
[hidden]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->
</ftui-column>
Hab aber leider hier nur noch die Icons angezeigt, leider keine badges mehr.
du musst bei der Anzeige größer 1 das map in step ändern. Er prüft bei map nur noch den genauen Wert. In deinem Fall definierst du aber ab 1 ab 2 ... also step
Zitat von: StephanFHEM am 09 Oktober 2021, 16:54:51
hab das bei mir auch erfolgreich umgesetzt (mit Reading in FHEM). Was ich noch nicht hinbekommen habe: wenn ich über mein Haupt-Menü auf Licht schalte macht er den Licht-TAB auf. Darauf ist der Segment-Button über den man den Raum auswählen kann welcher dann wieder über einen eigenen View angezeigt wird. Obwohl die ID im Reading bereits auf einem Raum steht wird beim ersten öffnen aber nichts angezeigt. Ich muss quasi erst nochmal einen Raum wählen bevor er etwas zeigt. Kann man da nicht irgendwas als Standard-Aktiv setzen? Das gleiche Verhalten hast du in deinem Beispiel übrigens auch. Beim ersten öffnen der Seite wird nichts angezeigt.
Falls jemand das gleiche Problem hat, ich habe es jetzt wie folgt gelöst: ich habe die Tab-Views gegen rows ersetzt und die rows anstatt der tab-views mit dem hidden Attribut versorgt
<ftui-row [hidden] = "Raum | isNot('Flur')">Er blendet jetzt immer den per Segment-Button gewählten Raum direkt an und merkt sich diesen auch wenn die Seite gewechselt wird.
Hallo zusammen,
zunächst:
Ich bin echt begeistert was diese UI in der Version 3 kann. Ich bin erst jetzt in die Welt der Automation eigestiegen, zwangsläufig, da der Bau des Eigenheims mit starken Schritten voranschreitet.
Ich versuche jetzt schon Erfahrung zu sammeln um später möglichst schnell meine Automatisierung aufzubauen.
Bei der Auswahl der vielen Systeme fiel meine Wahl zuletzt auf FHEM.
Jetzt zur eigentlichen Frage:
Ich möchte ein Weather Forecast auf dem FTUI anzeigen lassen aber ich kriege nur N/A angezeigt.
Mein Code sieht folgendermaßen aus:
<ftui-grid-tile row="5" col="5" height="4" width="8" shape="round">
<ftui-weather size="3" provider="proplanta" icon-set="proplantaICON" [condition]="ProPlanta:fc1_temp18"></ftui-weather>
<!-- <ftui-weather size="3" provider="proplanta" icon-set="proplantaICON" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather> -->
<!-- <ftui-weather size="3" provider="proplanta" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather> -->
<!-- <ftui-weather size="3" provider="proplanta" [condition]="ProPlanta:fc1_weatherDay"></ftui-weather> -->
</ftui-grid-tile>
Mein Device heißt ganz einfallslos ProPlanta.
Die Readings sind soweit alle vorhanden.
Laut Doku soll ich das Reading fc1_weatherDayIcon für das Icon nehmen, das tut aber nicht.
Offensichtlich habe ich noch Fehler im Code. Ich sehe sie nur nicht.
Die auskommentierten Zeilen sind meine Versuche. Alle gescheitert.
Weiß jemand weiter?
Zitat von: StephanFHEM am 12 Oktober 2021, 21:10:21
du musst bei der Anzeige größer 1 das map in step ändern. Er prüft bei map nur noch den genauen Wert. In deinem Fall definierst du aber ab 1 ab 2 ... also step
Super, ich danke dir. Hab ich echt übersehen, an den anderen Stellen hatte ich das schon angepasst, bei dieser hier war ich wohl zu blind und dachte die kann so bleiben :o
Gruß Markus
Das Update hat bei mir nicht gereicht.
<ftui-row align-items="right">
<ftui-row class="myspinner" style="margin-right:30px;">
<ftui-cell>
<ftui-button [value]="{{FBH}}:tempDay"
(value)="add(-0.5) | attr {{FBH}} tempDay $value"
states="$value"
fill="">
<ftui-icon class="size-1"
name="minus"
color="blue">
</ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label
[text]="{{FBH}}:tempDay"
[color]="{{FBH}}:tempDay | map('5:blue, 20:mygreen, 23:red')"
class="size-4"><span slot="end">°C</span>
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="{{FBH}}:tempDay"
(value)="add(0.5) | attr {{FBH}} tempDay $value"
states="$value"
fill="">
<ftui-icon class="size-1"
name="plus"
color="red">
</ftui-icon>
</ftui-button>
</ftui-cell>
</ftui-row>
</ftui-row>
Setzt mir alle Temperaturwerte beim öffnen zurück. Hat vielleicht was mit dem selbstgebauten spinner zu tun. Bin die nächsten 10 Tage weg und hab das Backup eingespielt. Geht also erstmal.
Gruß
Eisix
Zitat von: flauschkoenig am 12 Oktober 2021, 21:35:24
Ich möchte ein Weather Forecast auf dem FTUI anzeigen lassen aber ich kriege nur N/A angezeigt.
[...]
Weiß jemand weiter?
ich würde dir raten unter ftui/components/weather mal genau in die weather.map.js zu schauen.
Dort findest du die genaue Auflösung für dein Provider und dein Icon-Set. Es geht quasi von deinem Reading im FHEM-Device "Regen" zu "SHOWERS" im Proplanta-Provider. Wenn du dann das "Bas" Icon-Set jetzt wird "SHOWERS" zu "'./icons/weather/bas/bas_rain.svg'" ... damit kannst du dann in der Regel schauen was genau bei deiner Einstellung aus deinem Reading wird und wo genau das Icon liegen muss mit welchem Namen...
Zitat von: flauschkoenig am 12 Oktober 2021, 21:35:24
...
Jetzt zur eigentlichen Frage:
Ich möchte ein Weather Forecast auf dem FTUI anzeigen lassen aber ich kriege nur N/A angezeigt.
Mein Code sieht folgendermaßen aus:
<ftui-grid-tile row="5" col="5" height="4" width="8" shape="round">
<ftui-weather size="3" provider="proplanta" icon-set="proplantaICON" [condition]="ProPlanta:fc1_temp18"></ftui-weather>
<!-- <ftui-weather size="3" provider="proplanta" icon-set="proplantaICON" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather> -->
<!-- <ftui-weather size="3" provider="proplanta" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather> -->
<!-- <ftui-weather size="3" provider="proplanta" [condition]="ProPlanta:fc1_weatherDay"></ftui-weather> -->
</ftui-grid-tile>
...
Hi. Du brauchst keinen provider und icon-set mit angeben wenn du die Standardicons haben willst.
Hier mal eine Demo ohne dein Device anzusprechen. Nur um zu sehen ob deine Icons auch vorhanden sind:
<ftui-weather size="1" condition="sonnig"></ftui-weather>
Die Sonne sollte jetzt angezeigt werden.
Wenn ja sollte das so funktionieren:
<ftui-weather size="3" [condition]="ProPlanta:fc1_weather06"></ftui-weather>
proplanta Provider ist Standard und muss nicht angegeben werden.
Die Standardicons sind die von dem Demobild auf Github.
Bsp. für bas-Icons:
<ftui-weather size="3" icon-set="bas" [condition]="ProPlanta:fc1_weather06"></ftui-weather>
Diese icon-set´s gibt es:
icon-set="meteocons" (muss nicht angegeben/definiert werden) --> sind Standard in {dein ftui3 Ordner}/icons/
icon-set="kleinklima" --> Ordnerpfad = {dein ftui3 Ordner}/icons/weather/kleinklima/
icon-set="kleinklimaFHEM" --> Ordnerpfad = {fhem}/www/images/default/weather/ (kann auch in Verbindung mit provider="proplantaICON" gesetzt werden (hier muss das Reading aber auf t1,t2 usw zielen))
icon-set="bas" --> Ordnerpfad = {dein ftui3 Ordner}/icons/weather/bas/ (kann auch in Verbindung mit provider="proplantaICON" gesetzt werden (hier muss das Reading aber auf t1,t2 usw zielen-->
[condition]="device:fc0_weather06Icon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"))
Diese Ordner-Pfade und deren Inhalt muss natürlich vorhanden sein.
LG
Ok, so ein scheiss..ich muss meinen gesamten Beitrag neu schreiben..hoffentlich krieg ich das wieder zusammen..
Zunächst, vielen Dank für die Antworten, ich habe dadurch das System etwas besser verstanden.
Ich habe somit folgende Sachen probiert:
<ftui-weather size="1" condition="sonnig"></ftui-weather>
Funktioniert.
<ftui-weather size="3" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather>
Funktioniert nicht.
<ftui-weather size="3" icon-set="bas" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather>
Funktioniert ebenfalls nicht.
Es erscheint immer nur N/A.
Aber selbst das Beispiel weather.html aus den examples liefert keine Icons, wie soll das dann bei mir funktionieren?
Ich habe nach den proplanta Icons gesucht aber auch gar keine gefunden.
Das Reading fc1_weatherDayIcon ist auch eine URL: https://www.proplanta.de/wetterdaten/images/symbole/t4.gif
Da sieht man das "t4".
Das ist auch in der weather_map.js vorhanden:
t4: 'CLOUDY',
Unter dem providerSet proplandaICON.
Das habe ich mal versucht zu ändern in:
'https://www.proplanta.de/wetterdaten/images/symbole/t4.gif': 'CLOUDY',
Auch wieder N/A.
Was aber am Ende auch logisch ist, da die Icons nicht auf dem System sind.
Ich dachte er ruft die Url auf und holt sich das Icon da her, das geht nämlich problemlos:
ubuntu@ubuntu:~$ curl --output gif.gif https://www.proplanta.de/wetterdaten/images/symbole/t4.gif
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 637 100 637 0 0 5491 0 --:--:-- --:--:-- --:--:-- 5491
ubuntu@ubuntu:~$ ls -l g*
-rw-rw-r-- 1 ubuntu ubuntu 637 Oct 13 09:25 gif.gif
ubuntu@ubuntu:~$
Ich könnte mir natürlich so in einer Stunde Arbeit alle Icons holen und sie in den Ordner icon packen, dachte ich.
Hab ich mal so für das t4 icon gemacht
ubuntu@ubuntu:/opt/fhem/www/ftui/icons$ ls -l t4
-rwxrwxrwx 1 fhem dialout 637 Oct 13 10:10 t4
ubuntu@ubuntu:/opt/fhem/www/ftui/icons$
Und es funktioniert..nicht.
Auch hiermit nicht (dann wird ja nur t4 ausgegeben)
<ftui-weather size="3" [condition]="ProPlanta:fc1_weatherDayIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>
Ich muss doch irgendwie einen Denkfehler haben, so schwierig kann das doch nicht sein?
Das Device ProPlanta gibt es?
Was Steht im Reading?
Edit:
Zeig am besten mal dein Device.
Moin, klar :)
Internals
CFGFN
DEF
Frankfurt+am+Main de
FUUID
6165db03-f33f-823f-f392-4eb67a4db79325f3
INTERVAL
3600
NAME
ProPlanta
NR
546
STATE
Tmin: 5 Tmax: 13 T: 7.2 H: 100 W: 7.2 P: 1024.8
TYPE
PROPLANTA
URL
https://www.proplanta.de/Wetter/profi-wetter.php?SITEID=60&PLZ=Frankfu[...]
Readings:
fc1_weatherDayIcon
https://www.proplanta.de/wetterdaten/images/symbole/t4.gif
2021-10-13 10:00:20
Ja das Reading muss ja sonnig usw liefern. Hast du da eins?
War von mir falsch geschrieben mit Icon. Sorry
so müsste es sein:
ProPlanta:fc1_weatherDay
Moin,
ja
fc1_weatherDay
stark bewölkt
2021-10-13 10:00:20
Und da liegt auch der Hund begraben.
Jetzt wird auch ein Symbol angezeigt, vielen Dank.
Leider ist es an zu vielen Stellen im Forum einfach unverständlich oder gar falsch angegeben. Ich hoffe, dass der Post auch anderen hilft.
Der Rest dürfte sich dann automatisch erschließen, wenn man einmal weiß was die Software eigentlich von einem will. :)
Zitat von: setstate am 12 Oktober 2021, 12:24:11
Sollte sich seit gestern Abend erledigt haben. Ich habe das Ganze noch mal grundlegend geändert.
Für alle mit eigenen Komponenten:
Soll eine Wertänderungen auch ein Senden auslösen, muss sie per
this.submitChange(<propertyName>, <value>);
aufgerufen werden. Bei nur this.value = value; passiert das nicht mehr
https://github.com/knowthelist/ftui/commit/684ce106a4c6c5f2634d40897d51584c5db53e3a
Hi setstate.
Danke für den Hinweis.
Da muss man nicht mit this.getAttribute() auslesen was definiert ist.
Aber jetzt zur Frage (Da blicke ich noch nicht durch).
Wie kann ich trotzdem das definierte device:reading als Text auslesen? Mit this.getAttribute() ja nicht mehr???
Macht dann noch fhemService.sendCommand() sinn? Oder wie kann man das dann noch nutzen?
Danke für die Erleuchtung :D
LG mr_petz
Nachher die Bindingkonstrukte noch im DOM zu haben macht keinen Sinn, da sie ja geordnet in den entsprechenden Membern abgelegt sind und man sie ganz leicht abfragen kann. Ich habe auch schon für gängige Abfragen Helperfunktionen gebaut.
Habe ich erst neulich im Speak benutzt. Schau dir das dort mal an.
Abfragen, welches FHEM-Reading für Attribute XY benutzt wird:
this.readingName = this.binding.getReadingsOfAttribute('text')[0];
Das ist ein Array, deshalb das [0]
Abfrage, welche Werte, Zeiten und Gültigkeit dazu bekannt sind:
const readingData = fhemService.getReadingItem(this.readingName).data;
.... readingData.time
.... readingData.value
Hi ich nochmal.
wie muss jetzt eigentlich das @click aussehen?
scheint ja so nicht mehr zu gehen...
Bei mir wurde über ein label und icon ein:
@click="sendFhem('setreading device reading value')"
gesendet.
oder geht das auch anders?
LG
das war nur ein Bug. Ich hatte beim Umbauen was vergessen. Ist gefixed.
Danke. Geht wieder. Sowohl bei Label und Icon...
Jetzt hab ich mich auf Grund des Baus eines neuen "Smart Mirrors" endlich auch Mal mit FTUI3 auseinandergesetzt (Zeit ist's geworden...)-
Dabei sind mir aber ein paar Dinge aufgefallen:
@setstate
1. Hat das eigentlich einen tieferen Sinn, dass in der ftui.css ab gewissen Schriftgrößen die Schriftart explizit angegeben ist:
.size-12 {
font-size: 8rem;
font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}
.size-11 {
font-size: 6rem;
font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}
.size-10 {
font-size: 4rem;
font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}
2. Könntest Du bei der Abhandlung von Datum/Zeit in der ftui.helper.js auch noch "Week in Year" aufnehmen? Angeblich kann die Klasse DateFormat das auch. Ich bin nur leider ein hoffnungsloser Java-SuperDAU und hab bislang nur Beispielcode für SimpleDateFormat gefunden, nix für DateFormat.
3. In welcher Datei, bzw. wie wird eigentlich "align-items" abgehandelt? Ich hab das Phänomen, dass am PC in Firefox eine row mit align-items="right" wunderbar umgesetzt wird. Leider aber nicht auf dem Raspi unter Chromium. Den scheint das Tag überhaupt nicht zu interessieren...
Auch wenn ich bislang nur ein paar Devices in meine Seite eingebunden habe, scheint FTUI3 deutlich performanter zu sein als das "alte" TabletUI. Zumindest läuft Chromium seither bei Weitem nicht mehr auf +100% CPU beim Reload und idled zudem bei ein paar mickrigen Prozentchen. Danke hierfür!
Zitat von: tomster am 15 Oktober 2021, 11:53:06
...
2. Könntest Du bei der Abhandlung von Datum/Zeit in der ftui.helper.js auch noch "Week in Year" aufnehmen? Angeblich kann die Klasse DateFormat das auch. Ich bin nur leider ein hoffnungsloser Java-SuperDAU und hab bislang nur Beispielcode für SimpleDateFormat gefunden, nix für DateFormat.
...
Hi. Ich habe diesen Code für dich, bis setstate das eingebaut hat:
<ftui-cell class="size-3">
<script>
const date = new Date();
const currentThursday = new Date(date.getTime() +(3-((date.getDay()+6) % 7)) * 86400000);
const yearOfThursday = currentThursday.getFullYear();
const firstThursday = new Date(new Date(yearOfThursday,0,4).getTime() +(3-((new Date(yearOfThursday,0,4).getDay()+6) % 7)) * 86400000);
const weekNumber = Math.floor(1 + 0.5 + (currentThursday.getTime() - firstThursday.getTime()) / 86400000/7);
document.write(weekNumber+'. Kalenderwoche');
</script>
</ftui-cell>
einfach in dein row oder was auch immer einfügen...
Edit: Code geändert....
LG mr_petz
Das ging schnell und es läuft (natürlich)! Viiieelen Dank!
Moin moin in die Runde,
ich habe viel gesucht aber so richtig schlau werde ich daraus nicht.
Ich habe mir ein nettes DBLog gebaut. Dort werden Luftfeuchtigkeit und Temperatur, aktuell nur von zwei Sensoren weggeloggt.
Das sieht ungefähr so aus:
select * from histroy;
[...]
| 2021-10-16 10:52:20 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.HUMIDITY: 91 | 1.HUMIDITY | 91 | |
| 2021-10-16 10:52:20 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 7.2 | 1.ACTUAL_TEMPERATURE | 7.2 | |
| 2021-10-16 10:53:14 | HmIP_HmIP_STHO_000EDD898A625E | HMCCUDEV | 1.HUMIDITY: 74 | 1.HUMIDITY | 74 | |
| 2021-10-16 10:53:14 | HmIP_HmIP_STHO_000EDD898A625E | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 19.1 | 1.ACTUAL_TEMPERATURE | 19.1 | |
| 2021-10-16 10:55:01 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 7.3 | 1.ACTUAL_TEMPERATURE | 7.3 | |
| 2021-10-16 10:55:01 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.HUMIDITY: 91 | 1.HUMIDITY | 91 | |
| 2021-10-16 10:56:01 | HmIP_HmIP_STHO_000EDD898A625E | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 19.1 | 1.ACTUAL_TEMPERATURE | 19.1 | |
| 2021-10-16 10:56:01 | HmIP_HmIP_STHO_000EDD898A625E | HMCCUDEV | 1.HUMIDITY: 74 | 1.HUMIDITY | 74 | |
| 2021-10-16 10:57:28 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 7.3 | 1.ACTUAL_TEMPERATURE | 7.3 | |
| 2021-10-16 10:57:28 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.HUMIDITY: 91 | 1.HUMIDITY | 91 | |
| 2021-10-16 10:58:34 | HmIP_HmIP_STHO_000EDD898A625E | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 19.1 | 1.ACTUAL_TEMPERATURE | 19.1 | |
| 2021-10-16 10:58:34 | HmIP_HmIP_STHO_000EDD898A625E | HMCCUDEV | 1.HUMIDITY: 74 | 1.HUMIDITY | 74 | |
| 2021-10-16 10:59:41 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.HUMIDITY: 91 | 1.HUMIDITY | 91 | |
| 2021-10-16 10:59:41 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 7.4 | 1.ACTUAL_TEMPERATURE | 7.4 | |
| 2021-10-16 11:00:52 | HmIP_HmIP_STHO_000EDD898A625E | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 19.1 | 1.ACTUAL_TEMPERATURE | 19.1 | |
| 2021-10-16 11:00:52 | HmIP_HmIP_STHO_000EDD898A625E | HMCCUDEV | 1.HUMIDITY: 74 | 1.HUMIDITY | 74 | |
[...]
Soweit eigentlich alles gut.
Jetzt möchte ich hingehen und das Ganze in einem ftui-Chart anzeigen, erstmal nur ein Wert.
Dazu habe ich folgenden Code:
<ftui-grid-tile row="5" col="1" height="4" width="4" shape="round">
<header class="size-5">Feuchtigkeit WZ</header>
<ftui-chart class="row" width="300px" height="150px">
<ftui-chart-data fill log="DbLog" spec="HmIP_HmIP_STHO_000EDD898A625E.1.HUMIDITY" [update]="HmIP_HmIP_STHO_000EDD898A625E:state:time"></ftui-chart-data>
</ftui-chart>
</ftui-grid-tile>
Bitte um Nachsicht bei den Einrückungen..das Kopieren macht sie irgendwie kaputt.
Ich hatte auch schon probiert mit zusätzlich
file="history"
da meine Tabelle so heißt aber das brachte auch keinen Erfolg.
Ich hatte auch Ausschau nach einem Reading Attribut gehalten aber keins gefunden.
Mein DBLog hat _keine_ richtigen Readings.
Das sind die einzigen:
Readings
CacheOverflowLastNum
0
2021-10-16 01:00:43
CacheOverflowLastState
normal
2021-10-12 23:20:23
state
connected
2021-10-16 10:59:41
Weiß da jemand weiter? Ich hab sicherlich etwas übersehen..
Zitat von: flauschkoenig am 16 Oktober 2021, 11:07:47
Moin moin in die Runde,
ich habe viel gesucht aber so richtig schlau werde ich daraus nicht.
Ich habe mir ein nettes DBLog gebaut. Dort werden Luftfeuchtigkeit und Temperatur, aktuell nur von zwei Sensoren weggeloggt.
Weiß da jemand weiter? Ich hab sicherlich etwas übersehen..
Versuche es mal Testweise mit
<ftui-chart class="row" width="300px" height="150px">
<ftui-chart-data fill log="DbLog" file="history" update="HmIP_HmIP_STHO_000EDD898A625E:1.HUMIDITY:time" spec="HmIP_HmIP_STHO_000EDD898A625E:1.HUMIDITY" label="Humidity/[φ/%rel]" color="blue" update="60" type="lines" point-radius="0"></ftui-chart-data>
<ftui-chart-controls units="Day, Week, Month, Year"></ftui-chart-controls>
</ftui-chart>
Gruß
Sailor
Wow, super! Funktioniert direkt.
Vielen Dank!
Wenn ich das richtig sehe hat mir lediglich das hier gefehlt:
color="blue" update="60" type="lines" point-radius="0"
Der Rest dürfte eher optional sein.
Nachtrag: Kann man die y-Skala auch fest einstellen? Aktuell ist der niedrigste mögliche Wert immer der unterste Wert der y-Skala. Heißt heute mal 50, gestern aber 55, usw. Von 0-100 fest wäre eigentlich am besten.
Ist diese Doku überhaupt zutreffend für das chart-widget in ftui 3?
https://wiki.fhem.de/wiki/FTUI_Widget_Chart
Edit2: ups.. :-[
LG Flauschi
Zitat von: flauschkoenig am 16 Oktober 2021, 11:49:31
Wow, super! Funktioniert direkt.
Vielen Dank!
Wenn ich das richtig sehe hat mir lediglich das hier gefehlt:
Nein, du hast ein . statt ein : verwendet.
spec="HmIP_HmIP_STHO_000EDD898A625E
:1.HUMIDITY"
Gruß
Sailor
Hier: https://knowthelist.github.io/ftui/www/ftui/examples/themes.html findet ihr ein Beispiel, wie man eine automatische Tag-Nacht Thema Umschaltung realisieren kann.
Einmal per FHEM-Reading
<link href="themes/bright-theme.css" rel="stylesheet"
ftui-binding [disabled]="dummy11 | map('dark:true, light:false') | toBool()">
Oder per Browser-OS-Dark-Mode Erkennung
<link href="themes/bright-theme.css" rel="stylesheet" id="lightCSS">
<script>
// automatic change of color theme
const darkSchema = '(prefers-color-scheme: dark)';
const isDark = window.matchMedia && window.matchMedia(darkSchema).matches;
setTheme(isDark);
window.matchMedia(darkSchema).addEventListener('change', e => {
const isDark = e.matches;
setTheme(isDark);
});
function setTheme(isDark) {
if (isDark) {
lightCSS.setAttribute('disabled', '');
} else {
lightCSS.removeAttribute('disabled');
}
}
</script>
Ein sauberes Theming funktioniert aber nur, wenn man sich strikt an das "Benutze niemals Style-Tags im HTML-Code!" hält.
Ein style="background-color: #ffdd33;" würde dann einem in die Suppe spucken.
Hi setstate,
willkommen zurück aus der Sommerpause. 8)
Könntest du dir bei Gelegenheit nochmal das menu example ansehen? Das läuft nämlich irgendwie nicht.
https://forum.fhem.de/index.php/topic,115259.msg1163582.html#msg1163582
Beste Grüße
Hi 8)
Das habe ich ja schon ewig nicht mehr angefasst ...
Es muss im menu-button.component.js Zeile 35 richtig heißen
menu: 'ftui_menu_1',
Oder du gibst die korrekte ID per HTML mit
<ftui-menu-button menu="ftui_menu_1"
Oder einer anderen, von dir vergebenen ID im ftui-menu
<ftui-menu id="ftui_menu_1"
Das kommt dann richtig im nächsten Commit mit.
@setstate: wäre es möglich, das du in das circlemenu noch eine Variable für die Transparenz einbaust (damit er den Rest nicht komplett abdunkelt)? Hab es für mich aktuell in der css geändert aber vielleicht gibt es noch mehr Nutzer die das gerne hätten. Wäre auch für die Popups toll...
Zitat von: StephanFHEM am 17 Oktober 2021, 23:21:56
@setstate: wäre es möglich, das du in das circlemenu noch eine Variable für die Transparenz einbaust (damit er den Rest nicht komplett abdunkelt)? Hab es für mich aktuell in der css geändert aber vielleicht gibt es noch mehr Nutzer die das gerne hätten. Wäre auch für die Popups toll...
Done.
Man kann jetzt mit opacity="0.3" die Abdunklung etwas schwächer machen. 0 ist ganz aus, 1 ist ganz abgedeckt.
Hi setstate,
da Du ja Deine Sommerpause beendet hast, kann ich ja nochmal ein wenig zum Thema Medialist quengeln. ;)
Zum einen hat ChrisD das Problem gefunden, daß das Auswählen in der Medialist nicht richtig funktioniert, siehe hier (https://forum.fhem.de/index.php/topic,17667.msg1169608.html#msg1169608)
Zum anderen habe ich festegestellt, daß die Medialist Probleme mit Unterstrichen hat, habe ich hier schonmal beschrieben. (https://forum.fhem.de/index.php/topic,115259.msg1170480.html#msg1170480)
Es wäre schön, wenn Du Dich bei Gelegenheit da mal drum kümmern könntest, danke!
gm
Kann es sein, dass mit dem commit gestern (https://github.com/knowthelist/ftui/commit/6841a6d48aaaae881db9e801e5317947b4e2304d) die unit am label ignoriert wird? Bei mir werden seit diesem Update alle units ignoriert.
<ftui-label [text]="FB_Gesendet:FB_Gesendet | round(2) | fix(2)" unit="GB" class="size-0"></ftui-label>
Unit geht wieder. Da hatte ich zu viel am letzten PR verändert.
da hat sich etwas in der Update-Datei verhakt...
10.18 20:20:15 1 : UPD www/ftui/components/button/button-nice.component.js
2021.10.18 20:20:15 1 : UPD www/ftui/components/button/button.component.js
2021.10.18 20:20:15 1 : UPD www/ftui/components/chart/chart-data.component.js
2021.10.18 20:20:16 1 : UPD www/ftui/components/chart/chart.component.js
2021.10.18 20:20:16 1 : UPD
2021.10.18 20:20:16 1 : PERL WARNING: Use of uninitialized value $fName in concatenation (.) or string at ./FHEM/98_update.pm line 392.
2021.10.18 20:20:16 1 : PERL WARNING: Use of uninitialized value in string ne at ./FHEM/98_update.pm line 395.
2021.10.18 20:20:16 1 : PERL WARNING: Use of uninitialized value $fName in concatenation (.) or string at ./FHEM/98_update.pm line 396.
2021.10.18 20:20:16 1 : PERL WARNING: Use of uninitialized value in concatenation (.) or string at ./FHEM/98_update.pm line 396.
2021.10.18 20:20:16 1 : Got 20 bytes for , expected
2021.10.18 20:20:16 1 : aborting.
schätzungsweise hier:
UPD 2021-10-11_22:43:44 2257 www/ftui/components/checkbox/checkbox.component.js
UPD www/ftui/components/circlemenu/circlemenu.component.css
UPD 2021-10-18_08:47:23 2554 www/ftui/components/circlemenu/circlemenu.component.js
also.... das Update lief wieder durch nach deiner Anpassung.
Aber Chrome Debugger spuckt mir seit dem Update folgende Fehlermeldung aus..
products Cant create ecmwf calendar from meta tag noMinifestStr
okay: es kommt von windy.com ... hab es als iframe in einem popup eingebunden
und er meckert bei label.js rum in Zeile 62
this.unitSlotElement.innerHTML = this.text.length === 0 ? '' : this.unit; mit Fehlermeldung "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')"
Zitat von: StephanFHEM am 18 Oktober 2021, 22:01:16und er meckert bei label.js rum in Zeile 62
this.unitSlotElement.innerHTML = this.text.length === 0 ? '' : this.unit; mit Fehlermeldung "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')"
dto mit letztem commit der label.component.js.
Ich frage mich, warum bei einer Änderung von text du unit mit aktualisiert werden muss. Ich hab in der Zeile 37 wieder die unit Vorbelegung ergänzt und 62 auskommentiert:
[37] <slot name="pre"></slot><slot></slot><slot name="content"></slot><slot name="unit">${this.unit}</slot>`;
[62] //this.unitSlotElement.innerHTML = this.text.length === 0 ? '' : this.unit;
Ich glaube, der Usecase hinter dem PR (https://github.com/knowthelist/ftui/pull/16) ist, dass Readings manchmal NULL sind und dann aber noch die Unit stehen bleibt. Wenn dann wieder ein Wert vorliegt, sollte die Einheit wieder dabei sein. Ich kann das technisch verstehen, aber praktisch habe ich keine Beispiel dafür. Alle Messwerte mit Einheiten sind nicht plötzlich weg, oder? Wind: 10km/h => 0km/h, Stromverbrauch: 109W => 9W => 0W, Zeit: 29s => 3s => 1s => 0s
Ich kann aber auch eure Fehler nicht nachvollziehen. In welchen Fällen sollte this.unitSlotElement nicht definiert sein? Es wird am Anfang statisch erzeugt und wird nicht verändert. Was sieht euer HTML für so ein problematisches Label aus?
Zitat von: setstate am 19 Oktober 2021, 12:09:01Ich glaube, der Usecase hinter dem PR (https://github.com/knowthelist/ftui/pull/16) ist, dass Readings manchmal NULL sind und dann aber noch die Unit stehen bleibt. Wenn dann wieder ein Wert vorliegt, sollte die Einheit wieder dabei sein. Ich kann das technisch verstehen, aber praktisch habe ich keine Beispiel dafür. Alle Messwerte mit Einheiten sind nicht plötzlich weg, oder? Wind: 10km/h => 0km/h, Stromverbrauch: 109W => 9W => 0W, Zeit: 29s => 3s => 1s => 0s
Ich kann verstehen, dass man die unit weghaben will, wenn text leer ist. Würde ich dann aber nicht eher [hidden] nutzen? Was ist der Unterschied zwischen [hidden] und leerem text und unit?
Zitat von: setstate am 19 Oktober 2021, 12:09:01Ich kann aber auch eure Fehler nicht nachvollziehen. In welchen Fällen sollte this.unitSlotElement nicht definiert sein? Es wird am Anfang statisch erzeugt und wird nicht verändert. Was sieht euer HTML für so ein problematisches Label aus?
Nicht außergewöhnlich würde ich sagen:
<ftui-label [text]="DUM_Temp_Draussen:temp"
[color]="DUM_Temp_Draussen:temp | step('-50:blue, 5:light, 15:success, 25:danger')"
unit="°C"
class="inline size-5">
</ftui-label>Aber aus irgendeinem Grund ist bei der Initialisierung unit noch nicht Verfügbar (null) wenn es durch den text-case läuft. Das spuckt die FF Konsole aus:
12:25:17.786 Uncaught TypeError: this.unitSlotElement is null label.component.js:62:11
onAttributeChanged http://meinfhem.lan:8085/fhem/ftui3/components/label/label.component.js:62
attributeChangedCallback http://meinfhem.lan:8085/fhem/ftui3/components/element.component.js:76
loadFileContent http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:41
FtuiContent http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:21
loadFileContent http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:41
FtuiContent http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:21
<anonymous> http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:49
onAttributeChanged http://meinfhem.lan:8085/fhem/ftui3/components/label/label.component.js:62
attributeChangedCallback http://meinfhem.lan:8085/fhem/ftui3/components/element.component.js:76
loadFileContent http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:41
AsyncFunctionNext self-hosted:692
(Async: async)
FtuiContent http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:21
loadFileContent http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:41
AsyncFunctionNext self-hosted:692
(Async: async)
FtuiContent http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:21
<anonym> http://meinfhem.lan:8085/fhem/ftui3/components/content/content.component.js:49
InnerModuleEvaluation self-hosted:2371
evaluation self-hosted:2332Der PR prüft ja auch auf null:
[59]+ if (this.unitSlotElement) { Wenn ich 62 um die null-Prüfung ergänze, habe ich keinen Fehlerfall (ohne Adaption der Zeile 37):
[62] if(this.unitSlotElement) {
[63] this.unitSlotElement.innerHTML = this.text.length === 0 ? '' : this.unit;
[64] }Und die Unit wird auch angezeigt.
ich kann das immer noch nicht nachvollziehen. Nicht im Safari, Chromium, Firefox; mit und ohne content-file
Warum sollte this.mainSlotElement das sein und this.unitSlotElement nicht?
Seit dem letzten Update bekomme ich immer die unten angehängte Toastmeldung in mehrfacher Ausführung.
Zitat von: grossmaggul am 19 Oktober 2021, 15:07:44Seit dem letzten Update bekomme ich immer die unten angehängte Toastmeldung in mehrfacher Ausführung.
dto, hier mit FF93.0
Zitat von: setstate am 19 Oktober 2021, 13:58:13
ich kann das immer noch nicht nachvollziehen. Nicht im Safari, Chromium, Firefox; mit und ohne content-file
Warum sollte this.mainSlotElement das sein und this.unitSlotElement nicht?
Ich hab mal alle meine Sachen Stück für Stück rausgeworfen... hatte anfangs 12 Fehler und am Ende noch zwei (aber kein Label mehr).
Hab dann rausgefunden, dass der Fehler komischerweise wohl direkt durch ein Badge ausgelöst wird. Hier mein Code:
<ftui-badge color="danger" [text]="Fehler_Check.DOIF:FehlerAnzahl" class="size-1"></ftui-badge>Das passt auch zu meinen 12 Fehlern. Bei den Mülltonnen hab ich je Tonne 2 mögliche Badges und dann noch 2 extra ....
Aaaaahhhhh, das ist es !!!! Badge erweitert Label und hat aber ein anderes Template. Dann hätte das Abchecken der Verfügbarkeit des Slots durchaus einen Sinn. Ich habe es jetzt aber durch reines CSS gelöst.
Danke aber trotzdem für's Suchen
Hallo euch allen,
kann das sein das sich in den letzen Änderungen irgendetwas bezüglich der span class und slot geändert hat, ich hatte die ganze Zeit meine Units wie folgt angegeben:
<ftui-column>
<ftui-label [text]="Fuehler_Kueche:temperature"
[color]="Fuehler_Kueche:temperature | step('0:blue, 24:yellow, 26:red')"><span class="size-0" slot="end">°C</span>
</ftui-label>
</ftui-column>
Funktioniert jetzt nicht mehr, habe nirgends mehr eine Einheit dran stehen. Ist das ein Fehler oder muss ich auf das Attribut unit="°C" umsteigen?
slot="unit"
Zitat von: setstate am 19 Oktober 2021, 18:58:08
slot="unit"
Mercy, danke dir. Geändert und wieder alles super!
Gruß Markus
Zitat von: setstate am 19 Oktober 2021, 18:29:37
Aaaaahhhhh, das ist es !!!! Badge erweitert Label und hat aber ein anderes Template. Dann hätte das Abchecken der Verfügbarkeit des Slots durchaus einen Sinn. Ich habe es jetzt aber durch reines CSS gelöst.
Danke aber trotzdem für's Suchen
Deswegen hatte ich es im eigentlichem Review ja auch abgeprüft ;)
Ich stehe auf dem Schlauch.
Wie bekomme ich ein Refresh einer Seite hin, ohne den Cache des Browsers explizit zu loeschen ?
Bei dem 'alten' FTUI genuegte dafuer ein 'Reload page' im Browser, aber bei dieser Version geht das so nicht.
Was habe ich jetzt vergessen ?
Danke für's fixen der medialist Auswahl, leider funktionieren Playlists, die Unterstriche in den Dateinamen haben noch nicht. ::)
Hallo Wolfgang
Zitat von: Wolfgang Hochweller am 19 Oktober 2021, 23:35:27
Ich stehe auf dem Schlauch.
Wie bekomme ich ein Refresh einer Seite hin, ohne den Cache des Browsers explizit zu loeschen ?
Bei dem 'alten' FTUI genuegte dafuer ein 'Reload page' im Browser, aber bei dieser Version geht das so nicht.
Was habe ich jetzt vergessen ?
Eigentlich will man ja mit einem Reload den Cache ja löschen.
Zum Beispiel, wenn man die Sub-Seiten unter index.html verändert hat.
Was möchtest du denn erreichen?
Gruß
Sailor
Kann ich nicht nachvollziehen. Kannst du mir mal eine solche Playlisten mit 2-3 items als json zuschicken?!
Zitat von: Wolfgang Hochweller am 19 Oktober 2021, 23:35:27
Ich stehe auf dem Schlauch.
Wie bekomme ich ein Refresh einer Seite hin, ohne den Cache des Browsers explizit zu loeschen ?
Bei dem 'alten' FTUI genuegte dafuer ein 'Reload page' im Browser, aber bei dieser Version geht das so nicht.
Was habe ich jetzt vergessen ?
Bei Firefox an meinem PC muss ich auch jedes Mal vor dem Reload erst den Cache löschen, sonst zeigt er mir die Änderungen nicht an.
Auf dem Raspi starte ich Chromium im Kiosk-Mode mit sämtlichen Flags (no-cache, etc.) dort wird bei einem Reload dann natürlich alles korrekt angezeigt.
Zitat von: tomster am 20 Oktober 2021, 11:09:31Bei Firefox an meinem PC muss ich auch jedes Mal erst vor dem Reload den Cache löschen, sonst zeigt er mir die Änderungen nicht an.
[Strg]+[F5] (https://support.mozilla.org/de/kb/Tastaturkuerzel#w_navigation) tuts bei mir auch. Imho [shift]+[F5] ebenso, ist aber nicht (mehr) dokumentiert.
Ich muss leider eine doofe Frage vom Seitenrand einwerfen: Wie macht Ihr Eure Buttons größer als size="large"?
---------------------------------------
Hintergrund:
Ich habs per size="large" eingestellt, was mir auf meinem 10' Tablet noch zu klein ist. Grid steht auf 70x70 und die konkrete Kachel auf 4x4. Wäre der Button in etwa ausfüllend, fänd ich es optimal :)
Versucht habe ich size="200%" und size="120px" - wird aber ignoriert, klar, ist ja auch so nicht dokumentiert. Im CSS wollte ich nicht rumpfuschen, weil updates mir das eh überschreiben.
Danke und beste Grüße
rob
NIcht ganz, ich will den Cache bei einem Reload nicht loeschen, sondern mindesten die aktuelle Seite nachladen.
Bei mir gehen weder shift - f5 oder Cctrl - f5, d.h., das funktioniert, die Seite wird neu aufgebaut, aber mit dem alten Inhalt.
Etwas ueberraschend : Nach einem Browser-refresh muss ich nur lange genug warten, dann wird irgendwann beim naechsten Aufruf die neueste Version geladen.
Dann kann ja nicht die Loesung sein.
Bei FTUI2 ging das immer problemlos; html geaendert, Browser page reload, und die neue Version war da.
Hier sieht es so aus, als wuerde der Server erst mit reichlich Verzoegerung die neue Version liefern
ZitatKann ich nicht nachvollziehen. Kannst du mir mal eine solche Playlisten mit 2-3 items als json zuschicken?!
Ich habe die mal dran gehängt, die Originalplaylist von iTunes(Music) und die JSON Liste, die SBPLAYER erzeugt.
Das "Yesterday_s" ist das Problem, lösche ich diesen Eintrag aus der Playlist oder ersetze das "_" z.B. durch ein " ' ", dann wird die Liste angezeigt.
Mist den Anhang vergessen.
@rob
Hast du das schon probiert?
style="width:100px;height:100px"
@mr_petz
Nein, hatte ich nicht. Jetzt schon ;D Ja, damit krieg ich das hin. Danke Dir 8)
Das ebenfalls betroffene Icon bekomme ich dann laut Doku via "class="size-5"" optimiert. Sehr schön.
Muss ich diesen Hinweis mitbedenken oder bezieht sich er sich allein auf background-color?
Zitat von: setstate am 17 Oktober 2021, 11:54:18
...
Ein sauberes Theming funktioniert aber nur, wenn man sich strikt an das "Benutze niemals Style-Tags im HTML-Code!" hält.
...
Edit: was bin ich doof: das 'class="size-5"' vom Icon klappt auch beim Button :)
Nochmal zum Cache :
Die Darstellung ueberlebt oft auch einen harten Reset des Browser-Caches.
Folgerung : das sieht wie ein Server-Problem aus.
Manchmal wirkt eine Aenderung und ein anschliessendes Reload im Browser,
manchmal kann ich ein File mal wegnehmen und das stoert die Darstellung nicht im Geringsten, mit oder ohne Browser-Cache.
Zitat von: rob am 20 Oktober 2021, 13:25:40
Edit: was bin ich doof: das 'class="size-5"' vom Icon klappt auch beim Button :)
Oh sorry, ich dachte das hättest du schon probiert...
Zitat von: rob am 20 Oktober 2021, 13:25:40
Muss ich diesen Hinweis mitbedenken oder bezieht sich er sich allein auf background-color?
Ich lese es so, dass es "nur" bei Theme eine Rolle spielen wird...
Zitat von: grossmaggul am 20 Oktober 2021, 12:39:08
Mist den Anhang vergessen.
Der eine Titel hat ein ´ anstatt ein '. Das müsste man mit einem MP3-Tag Editor korrigieren, dann geht es.
Ich probiere aber noch, ob man das irgendwie Quoten oder Escapen kann
edit: gefixed
mal eine ganz andere Frage: ich habe Bilder im Verzeichnis /opt/fhem/www/arlo liegen (snapshots von einer Cam)
wenn ich die in Fully darstellen will läd er das Bild nicht weil er kein User+Password hat
Kann ich dem ftui-image irgendwie die BasicAuth-Daten mitgeben? http://user:pass@xyz.de/fhem geht nicht weil der Browser das nicht mehr unterstützt
BasicAuth geht nicht bei <img src="URL">
Man müsste das Bild per fetch() holen. Dort kann man User /pass mitgeben. Da wäre aber einiges umzubauen.
Es ist auch noch was anderes, was mit dem Server-Cache zu tun haben muss.
1. Bild : FTUI 2 : Bei einem page refresh/reload im Browser bekomme ich dieselbe Seite wieder aufgebaut.
2. Bild : FTUI 3 : Bei einem page refresh/reload bekomme ich Bild 3
Zitat von: Wolfgang Hochweller am 20 Oktober 2021, 23:56:54Es ist auch noch was anderes, was mit dem Server-Cache zu tun haben muss.
Du müsstest
wesentlich mehr Informationen liefern - alles andere ist stochern im Nebel. Welcher Browser und Version; Betriebssystem des Browsers; list des HTTPSRV devices für FTUI3; Auszug deiner FTUI3 index.html; hast du alle FTUI3 updates eingespielt?
Sicher.
- Windows 10
- Chrome, letzte Version, Firefox ist genauso
- FTUI3 up-to-date
- define FTUI3 HTTPSRV ftui3/ ./www/ftui/ FTUI3
Internals:
CFGFN
DEF ftui3/ ./www/ftui/ FTUI3
FUUID 617132e0-f33f-775d-e89e-50d3b95ed5f14500
NAME FTUI3
NR 753
STATE FTUI3
TYPE HTTPSRV
fhem:
directory ./www/ftui/
friendlyname FTUI3
infix ftui3/
Attributes:
- Index.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>FTUI Home</title>
</head>
<body>
<ftui-grid base-width="78" base-height="70" margin="5" shape="round">
<ftui-grid-tile row="1" col="1" height="10" width="1">
<ftui-column>
<ftui-tab view="View1" size="large" >
<ftui-icon name="home1"></ftui-icon>
</ftui-tab>
<ftui-tab view="View2" direction="vertical" active>
<ftui-icon name="home1"></ftui-icon>
</ftui-tab>
<ftui-tab view="View3">
<ftui-icon name="feed"></ftui-icon>
</ftui-tab>
<ftui-tab view="View4">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-tab>
<ftui-tab view="View5">
<ftui-icon name="bath"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="View1">
<ftui-content file="main.html"></ftui-content>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
Hier noch ein Update :
Nachdem ich fuer FTUI3 ein eigenes HTTPSRV-Device definiert habe, scheint das page refresh/reload zu funktionieren.
( ob das was damit zu tun hat, weiss ich aber nicht, zum Testen habe ich den URL der index.html direkt aufgerufen)
Bleibt noch , dass nach einem page refresh immer der am Anfang als 'active' definierte Tab angezeigt wird, nicht aber das beim Refresh aktive Tab.
Zitat von: Wolfgang Hochweller am 21 Oktober 2021, 11:36:38Sicher.
- Windows 10
- Chrome, letzte Version, Firefox ist genauso
Ist imho nicht genau genug - aber wahrscheinlich jetzt auch nicht mehr relevant.
Zitat von: Wolfgang Hochweller am 21 Oktober 2021, 11:47:07Nachdem ich fuer FTUI3 ein eigenes HTTPSRV-Device definiert habe, scheint das page refresh/reload zu funktionieren.
( ob das was damit zu tun hat, weiss ich aber nicht, zum Testen habe ich den URL der index.html direkt aufgerufen)
Mit der Tastenkombination lädt der Firefox die Seite komplett neu vom Server:
Zitat von: yersinia am 20 Oktober 2021, 11:19:22[Strg]+[F5] (https://support.mozilla.org/de/kb/Tastaturkuerzel#w_navigation) tuts bei mir auch. Imho [shift]+[F5] ebenso, ist aber nicht (mehr) dokumentiert.
Vermutlich hat dir das FTUI3 eigene HTTPSRV-Device schon geholfen.
Darüberhinaus würde sich noch die Frage stellen, wie du die HTML Dateien editierst? Per Console auf dem FHEM Server? Es kann delays geben wenn nicht direkt auf dem Server editiert&gespeichert wird.
Zitat von: Wolfgang Hochweller am 21 Oktober 2021, 11:47:07Bleibt noch , dass nach einem page refresh immer der am Anfang als 'active' definierte Tab angezeigt wird, nicht aber das beim Refresh aktive Tab.
Das ist imho das erwartete Verhalten - die index.html wird komplett neu geladen, da gibt es keine Historie wenn der Cache gelöscht worden ist.
Long story short, dein Problem scheint aber gelöst zu sein!?
Dateien werden direkt editiert, aber du hast recht, Problem scheint sich geloest zu haben.
Danke fuer die Muehe.
Und, ich habe das nochmal verifiziert :
Die Seite direkt zu laden, also etwa :
http://192.168.10.41:8083/fhem/www/ftui/index.html
ist keine gute Idee. Dann treten die vorher beschriebenen Probleme auf.
Eigentlich braucht es kein HTTPSRV. Es reicht FHEMWEB. HTTPSRV unterstützt kein Cache, was in deinem Fall vllt gerade hilft, aber im Normalbetrieb die Ladezeit verlängert.
Danke, das stimmt..
Ich wollte auch nur vermitteln, dass direkte Aufruf der Seite ohne FHEMWEB oder HTTPSRV keine gute Wahl war.
Auch auf die Gefahr hin, dass ihr mich steinigt, weil ich mit so "kosmetischem Zeugs" daherkomme, welches wohl zudem höchstens die Perfomance von FTUI3 bremst:
Mit geht mein geliebtes 'rotor-widget' ganz schmerzlich ab. *schnief*
Ich habe zwar schon probiert das "rotate1"-Beispiel aus https://codyhouse.co/gem/css-animated-headlines zu adaptieren, aber ich steige - ehrlich gesagt - überhaupt nicht durch den Aufbau von FTUI3 (mei, DAU halt). Bestehen Chancen, dass sich jemand...ähh *räusper* setstate... diesem Wunsch annehmen will?
Zitat von: StephanFHEM am 20 Oktober 2021, 22:24:39
mal eine ganz andere Frage: ich habe Bilder im Verzeichnis /opt/fhem/www/arlo liegen (snapshots von einer Cam)
wenn ich die in Fully darstellen will läd er das Bild nicht weil er kein User+Password hat
Kann ich dem ftui-image irgendwie die BasicAuth-Daten mitgeben? http://user:pass@xyz.de/fhem geht nicht weil der Browser das nicht mehr unterstützt
Ich habe das fetch jetzt eingebaut. Versuche es mal ungefähr so:
<ftui-image base="http://fhem:8083/fhem/images/default/" src="black_up.png" user="fhemuser" pass="fhempass"></ftui-image>
oder so
<ftui-image src="http://fhem:8083/fhem/images/default/black_up.png" user="fhemuser" pass="fhempass"></ftui-image>
Zitat von: tomster am 22 Oktober 2021, 11:53:10
Auch auf die Gefahr hin, dass ihr mich steinigt, weil ich mit so "kosmetischem Zeugs" daherkomme, welches wohl zudem höchstens die Perfomance von FTUI3 bremst:
Mit geht mein geliebtes 'rotor-widget' ganz schmerzlich ab. *schnief*
Ich habe zwar schon probiert das "rotate1"-Beispiel aus https://codyhouse.co/gem/css-animated-headlines zu adaptieren, aber ich steige - ehrlich gesagt - überhaupt nicht durch den Aufbau von FTUI3 (mei, DAU halt). Bestehen Chancen, dass sich jemand...ähh *räusper* setstate... diesem Wunsch annehmen will?
Was hatte das rotor-widget, was ftui-swiper nicht hat?
<ftui-swiper auto-play>
<ftui-image src="https://i.pravatar.cc/100?img=6" width="90px" shape="circle"></ftui-image>
<ftui-image src="https://i.pravatar.cc/100?img=7" width="90px" shape="circle"></ftui-image>
<ftui-image src="https://i.pravatar.cc/100?img=8" width="90px" shape="circle"></ftui-image>
<ftui-image src="https://i.pravatar.cc/100?img=9" width="90px" shape="circle"></ftui-image>
<ftui-image src="https://i.pravatar.cc/100?img=10" width="90px" shape="circle"></ftui-image>
</ftui-swiper>
Edit: habe mir gerade das Beispiel angesehen. Die Animation sieht doch etwas anders aus :-)
Hier was zum Probieren:
https://knowthelist.github.io/ftui/www/ftui/examples/rotor.html
@setstate
In der Funktion dateFormat dient "z" als Platzhalter, daher erfordert "März" bzw. "Dezember" die Anpassung mit z
Hi setstate.
Nach deinem Hinweis von hier:
https://forum.fhem.de/index.php/topic,115259.msg1179254.html#msg1179254
habe ich ja alles umgestellt und wollte nur nachfragen ob es hier Probleme geben kann:
Hinter dem device sind zwei Leerstellen drin.
Egal ob ftui-button oder was auch immer...
Auszug vom XHRGET
cmd=set+dummy++on&asyncCmd=0&fwcsrf=null&XHR=1
Ich hoffe du verstehst was ich meine. ;)
LG mr_petz
Ein herzerfrischendes Moin vom achtern Diek vorwech!
Ich habe seit Kurzem das Phänomen, das die Popup nicht mehr mittig auf dem Bildschirm angezeigt werden, sonder in das aufrufende ftui-grid-tile gequetscht werden.
Ist das ein Bug oder ein Feature?
Ich kann hierzu keinen entsprechenden Beitrag finden, dass dies schon mal vorgekommen ist, geschweige wie man das Popup wieder global über alles darstellt.
Danke für die Hilfe vorweg!
Gruß
Sailor
Ich habe das Problem nicht mit den Popups, werden nachwievor mittig ausgegeben.
Zum Beispiel das Mondpopup bei mir:
<!-- Moon -->
<ftui-grid-tile row="1" col="7" height="2" width="2" shape="round" shape="round" class="semitransparent">
<!-- <header>Mond</header> -->
<ftui-column height="80%">
<ftui-row>
<ftui-image popup-target="moon" [src]="astro:ftui" width="95px"></ftui-image>
</ftui-row>
<ftui-row>
<ftui-label [text]="proplanta:fc0_moonRise">A:</ftui-label>
<ftui-label [text]="proplanta:fc0_moonSet"> U:</ftui-label>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
<!-- Moon Popup -->
<ftui-popup id="moon" width="480px" height="480px" timeout="10" shape="round" position="top">
<ftui-image [src]="astro:ftui" width="380px"></ftui-image>
</ftui-popup>
Vielleicht liegt der Popup Aufruf bei Dir im grid-tile, der sollte aber außerhalb liegen.
Zitat von: grossmaggul am 23 Oktober 2021, 18:49:59
Vielleicht liegt der Popup Aufruf bei Dir im grid-tile, der sollte aber außerhalb liegen.
Hab das gleiche Problem bei mir auch schon festgestellt. Denke aus, dass es sich mit einem Update geändert hat und er jetzt darauf achtet, ob das Popup im Grid-Tile lag. Vorher war er da nicht so konsequent.
Leider ist das außerhalb legen nicht immer möglich: ich habe eine Content-Seite und in dieser wird ein Popup aufgerufen welches mit Namen abhängig von dem geklickten Button ist (Popup-Name ist {{Device_Popup}}... daher kann ich das auch nicht in die Hauptseite auslagern...
Man kann dem entgegenwirken indem man die Größe festlegt und mit top und left arbeitet...
Hallo Stephan
Zitat von: StephanFHEM am 23 Oktober 2021, 19:24:09
Leider ist das außerhalb legen nicht immer möglich: ich habe eine Content-Seite und in dieser wird ein Popup aufgerufen welches mit Namen abhängig von dem geklickten Button ist (Popup-Name ist {{Device_Popup}}... daher kann ich das auch nicht in die Hauptseite auslagern...
Genau so ist es auch bei mir.
In der Index Seite sind nur die ftui-grid-tiles mit Verweisen auf weitere Content-Files
Zitat von: StephanFHEM am 23 Oktober 2021, 19:24:09
Man kann dem entgegenwirken indem man die Größe festlegt und mit top und left arbeitet...
Hast du hier ein Code-Beispiel für uns?
Danke
Sailor
hier zum Beispiel ein Kamera-Popup welches fast den kompletten Schirm abdeckt. Es hat übrigens nur mit den Prozentangaben richtig geklappt.
<ftui-popup id="Eingangcam" shape="round" width="92%" height="88%" left="4%" timeout="120">
Zitat von: setstate am 23 Oktober 2021, 00:13:34
Hier was zum Probieren:
https://knowthelist.github.io/ftui/www/ftui/examples/rotor.html
Funktioniert prima. Danke für die rasche Umsetzung!
Zitat
Was hatte das rotor-widget, was ftui-swiper nicht hat?
Nun, im rotor-widget konnte man auch direkt im Widget mehrzeilige Contents bauen. Im Swiper wird hingegen jede Zeile als Swipe-Element gesehen und geswiped. Von daher geht dann nur der Umweg über eine content-Seite. Zudem kann der Swiper kein "Endlos-Swipe". Beim letzten Swipe-Element wird erst wieder durch alle Elemente zurückgeswiped und dann von vorne angefangen: 1->2->3. Dann schnell 3->2->1. und wieder 1->2->3. Im rotor-widget war das 1->2->3->-1->2->3, etc.
Ach ja, und das rotor-widget hatte einen fade-Effekt.
Hast Du auch was an der blink-Klasse geschraubt?
Zumindest bei mir blinkt es nun äußerst "unrhythmisch"...
Von [FTUI3] Updateproblem (https://forum.fhem.de/index.php/topic,123634.0.html)
Zitat von: Wolfgang Hochweller am 24 Oktober 2021, 11:34:37
Meldung :
2021.10.24 11:32:49 1 : Got 2341 bytes for www/ftui/examples/chart.html, expected 2342
und das Update bricht ab.
@setstate: würde gerne den Dropdown farblich verändern. Kannst du dort bitte attribute für color (Textfarbe) und background-color (Hintergrundfarbe im Auswahlfeld) einbauen? Das wäre echt prima!
Hallo Stephan
Zitat von: StephanFHEM am 23 Oktober 2021, 20:57:08
hier zum Beispiel ein Kamera-Popup welches fast den kompletten Schirm abdeckt. Es hat übrigens nur mit den Prozentangaben richtig geklappt.
<ftui-popup id="Eingangcam" shape="round" width="92%" height="88%" left="4%" timeout="120">
Das war es leider nicht!
Der Code
index.html
<!-- Window and Door Status -->
<ftui-grid-tile row="2" col="8" height="2" width="2" shape="round" class="semitransparent">
<header>Windows & Doors</header>
<ftui-content file="content/content_home_windowstatus.html"></ftui-content>
</ftui-grid-tile>
content/content_home_windowstatus.html
<ftui-popup shape="round" id="windowstatus" height="80%" width="80%" left="10%" top="10%" position="top">
führt nicht dazu, dass das Popup außerhalb des Grids angezeigt wird.
Siehe Anlage
@setstate: Wie bekomme ich meine alte Anzeige des Popup wie vor den Updates hin, wo diese ueber alles gelegt wurden.
Ich möchte der Übersicht halber nicht meine ganzen Popups and Ende der index.html übertragen wollen.
Wäre es nicht sinnvoll hierbei eine Option einzuführen eg. Layer="Grid/Desktop"?
Gruss
Sailor
ZitatWäre es nicht sinnvoll hierbei eine Option einzuführen eg. Layer="Grid/Desktop"?
Wäre diese zusätzliche Option nicht überflüssig, wenn man das PopUp eben genau dort platziert, wo man es haben möchte? Wenn Du ein PopUp über den ganzen Bildschirm haben willst, gehört das PopUp in die index.html/Hauptseite, wenn Du es aber nur in einem grid-Element haben willst, dann muss es eben in das grid-Element. Dafür braucht man doch eigentlich kein(e) zusätzliche(s) Flag/Variable/"Option", oder?
Hallo Tomster
Zitat von: tomster am 26 Oktober 2021, 14:50:09
Wäre diese zusätzliche Option nicht überflüssig, wenn man das PopUp eben genau dort platziert, wo man es haben möchte? Wenn Du ein PopUp über den ganzen Bildschirm haben willst, gehört das PopUp in die index.html/Hauptseite, wenn Du es aber nur in einem grid-Element haben willst, dann muss es eben in das grid-Element. Dafür braucht man doch eigentlich kein(e) zusätzliche(s) Flag/Variable/"Option", oder?
Prinzipiell hast du Recht, aber ich habe mittlerweile 41 content-files in denen ich den entsprechenden Aufruf untergebracht habe.
Jede dieser files beinhaltet für sich komplett was diese Aufgabe beinhalten soll.
Würde ich die Popups alle ans Ende der index.html rein-pferchen, würde das die Datei vollkommen unübersichtlich machen...
Gruß
Sailor
Beim Popup kann man jetzt position="page" setzen.
Zitat von: setstate am 26 Oktober 2021, 15:38:09
Beim Popup kann man jetzt position="page" setzen.
Danke, Danke!
Funzt perfekt! ;D
Gruß
Sailor
Nachtrag: Eine Sache ist mir noch aufgefallen. Mit position="page" sind die popups zwar wieder aus den tiles befreit, aber sie sind nicht mehr zentriert in der Mitte sondern teilweise (je nach Groesse) zur Haelfte aus dem Bildschirmrand verschwunden.
Und das obwohl die Parameter "left" und "top" gar nicht gesetzt sind.
Kann das Jemand reproduzieren?
Zitat von: Sailor am 26 Oktober 2021, 20:49:10
Nachtrag:
Eine Sache ist mir noch aufgefallen. Mit position="page" sind die popups zwar wieder aus den tiles befreit, aber sie sind nicht mehr zentriert in der Mitte sondern teilweise (je nach Groesse) zur Haelfte aus dem Bildschirmrand verschwunden.
Und das obwohl die Parameter "left" und "top" gar nicht gesetzt sind.
Kann das Jemand reproduzieren?
Ja das kann ich reproduzieren, habe noch keinen Workaround gefunden.
Grüsse
Erledigt: habe vergessen die position="page" zu setzen
Folgendes ist mir noch aufgefallen:
Wenn sich der Popup Button im unteren Teil der Seite befinden, dann wird das Popup auch im unteren Teil geöffnet und nicht zentriert auf der PageSo funktioniert es bei mir, wenn man "left" anpasst:
<ftui-popup id="{{name}}" timeout="0" width="300px" height="200px" position="page" left="15%" shape="round">
<header>{{name}}</header>
<ftui-row>
<ftui-slider [(value)]="{{device}}:pct"></ftui-slider>
</ftui-row>
</ftui-popup>
Hi SirMarco
Zitat von: SirMarco am 27 Oktober 2021, 16:42:57
So funktioniert es bei mir, wenn man "left" anpasst:
<ftui-popup id="{{name}}" timeout="0" width="300px" height="200px" position="page" left="15%" shape="round">
Darum geht es... Mann muss jedes Popup individuell justieren.
Eigentlich hätte ich erwartet, dass ohne diese left-top - Parameter die Popups wie früher zentriert mittig im Bildschirm sitzen.
Manche Popups sind ohne diese Parameter vollkommen unlesbar, da sie sich bis zu 75% außerhalb des Bildschirms befinden.
Gruß
Sailor
Ich habe ein Label definiert :
<ftui-row>
<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)" decimals="1" size="10" class="bold" color="red"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="Letzte Stunde Verbrauch (kWh)" size="2" color="white" ></ftui-label>
</ftui-row>
Das Ergebnis, siehe Bild oben links, die 1.19 .
Ein Problem mit 'decimals' ? Oder bei mir ? Bei den anderen dieser Art sieht es gut aus.
Vielleicht haengt damit auch zusammen, dass Label auch mal voll aus dem Ruder laufen, etwa
statt 1.2 erscheint 1.00000000002 oder aehnliches.
Letzteres kann ich aber nicht kontrolliert erzeugen .
Noch habe ich dein Problem nicht ganz verstanden. Meinst du, dass das label dann 1.0000000000000002 anzeigt anstelle von 1.0 bzw 1.1 (es geht nicht aus dem Screenshot hervor)? Dies hätte mit der Gleitkommaberechnung zu tun imho.
Du könntest noch ein round versuchen um das abzufangen.
<ftui-row>
<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01) | round(2)" decimals="1" size="10" class="bold" color="red"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="Letzte Stunde Verbrauch (kWh)" size="2" color="white" ></ftui-label>
</ftui-row>
PS: super das du doch kleinere Anfragen hier stellst. :)
Das ist korrekt, es taucht schon mal 1.00000002 oder aehnliches auf.
Besseres Beispiel :
Der Ausgangswert ist 197.
<ftui-label [text]="MQTT2_ams:diffVerbrauch" size="10" class="bold" color="red"></ftui-label>
zeigt 197, ok.
<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)" size="10" class="bold" color="red"></ftui-label>
oder divide(100) zeigt 1.97 , ok
<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)| round(0) " size="10" class="bold" color="red"></ftui-label>
zeigt 2, ok
<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)| round(1) " size="10" class="bold" color="red"></ftui-label>
zeigt 2. Wenn die Zahl bei round die Anzahl der Nachkommastellen ist, ist es falsch. Sonst weiss ich nicht , was die Zahl bei round bedeuten koennte.
<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01) | round(2) " size="10" class="bold" color="red"></ftui-label>
zeigt 1.97 : falsch, sollte 1.98 sein, falls Zahl bei round = Anzahl der Nachkommastellen.
<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)" decimals = "1" size="10" class="bold" color="red"></ftui-label>
zeigt 1.97 : falsch
<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01) | round (2) " decimals = "1" size="10" class="bold" color="red"></ftui-label>
zeigt 1.97 : falsch
Zum Vergleich FTUI :
<div class="cell">
<div data-type="label" data-device="MQTT2_ams"
data-get="diffVerbrauch"
data-fix="1" data-factor=".01"
data-color="red"
data-unit="kWh" class="inline grande bold">
</div>
<div>Letzte Stunde Verbrauch</div>
</div>
zeigt 1.9 : ok
Fazit :
decimals tut gar nichts, es ist egal, welche Zahl ich da angebe..
round hat numerische Probleme.
[<ftui-chart-controls units="day, week"></ftui-chart-controls>code]
Sobald in den Controls 'day' dabei ist , wird das sofort aktiviert, alles andere braucht einen Klick, das ist auch ok.
<ftui-chart-controls units="week, year"></ftui-chart-controls>
Wenn 'day' nicht dabei ist, steht links unten das Datum und die Tagesansicht ist aktiviert. siehe Bild.
Das ist sicher so nicht gedacht.
Nach einem Klick auf 'week' oder 'year' ist alles ok.
Bin auf der Suche nach einer Spinner componente.
Wie macht man das mit ftui3?
Danke esk
Zitat von: Wolfgang Hochweller am 28 Oktober 2021, 08:49:33Das ist korrekt, es taucht schon mal 1.00000002 oder aehnliches auf.
Besseres Beispiel :
[...]
decimals tut gar nichts, es ist egal, welche Zahl ich da angebe..
round hat numerische Probleme.
Kannst du dazu bitte mal beispielhaft die Readingswerte von
MQTT2_ams:diffVerbrauch posten? So ist das relativ schwierig nachzuvollziehen.
round(n) müsste mit n die Nachkommastellen (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L349) sein - das weiß ich allerdings nicht genau. Das kann setstate sicher besser beschreiben.
Zitat von: esk am 28 Oktober 2021, 11:42:16Bin auf der Suche nach einer Spinner componente.
Dumme Frage:w as ist ein spinner?
Sowas in der Art?
https://forum.fhem.de/index.php/topic,123084.msg1176152.html#msg1176152
https://forum.fhem.de/index.php/topic,121901.msg1165068.html#msg1165068
Ich denke, es ist das hier gemeint:
https://wiki.fhem.de/wiki/FTUI_Widget_Spinner
Könnte man mit dem Volume-Slider wohl auch abbilden, oder?
Spinner hin und Spinner her ..
Ein Spinner ist was zum Drehen oder was sich selbst dreht.
Ein Beispiel wäre auch eine Seitenladeanzeige(Lade-Spinner)... ;)
@yersinia :
Zitat
Kannst du dazu bitte mal beispielhaft die Readingswerte von MQTT2_ams:diffVerbrauch posten? So ist das relativ schwierig nachzuvollziehen.
round(n) müsste mit n die Nachkommastellen sein - das weiß ich allerdings nicht genau. Das kann setstate sicher besser beschreiben.
Steht oben im Beispiel : Wert ist 197
ZitatSpinner hin und Spinner her ..
Ein Spinner ist was zum Drehen oder was sich selbst dreht.
Ein Beispiel wäre auch eine Seitenladeanzeige(Lade-Spinner)... ;)
Ich musste erstmal checken, wieso das Spinner-Widget eigentlich Spinner heisst, aber egal.
Ich denke, wenn man sich den Temp-Stepper aus dem Beispiel vornimmt, kann man das loesen
Vielleicht sowas in der Art :
<ftui-grid-tile row="16" col="2" height="2" width="2" shape="round">
<ftui-row>
<ftui-button [value]="testcount" (value)=" add(-0.5)| testcount " states="$value" fill="">
<ftui-icon size="-2" name="minus"></ftui-icon>
</ftui-button>
<ftui-label [text]="testcount"></ftui-label>
<ftui-button [value]="testcount" (value)="add(0.5) | testcount" states="$value" fill="">
<ftui-icon size="-2" name="plus"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-grid-tile>
Hallo,
wenn ihr mit Spinner (attachment) meint, das habe ich hier schon mal gepostet, kann ich aber nochmal machen.
Gruß
Eisix
Noch eine Frage zu map/step
<ftui-icon class="size-3" [name]="Markise:position | map('`closed|0`:fts_sunblind_0, 25:fts_sunblind_20, 50:fts_sunblind_50, 75:fts_sunblind_80, `open|99|100`:fts_sunblind_100')"></ftui-icon>
Solche Fälle bleiben weiter map?
Gruß
Eisix
Zitat von: setstate am 23 Oktober 2021, 00:13:34
Hier was zum Probieren:
https://knowthelist.github.io/ftui/www/ftui/examples/rotor.html
Je mehr ich damit rumspiele, desto mehr komme ich zu dem Schluß, dass es schon wichtig wäre die einzelnen rotor-Elemente in einen delimiter zu packen.
Bislang wird z.B. jedes
icon/
label als eigenes Element gesehen und ge-rotort. Will man nun aber ein
icon mit darunter stehendem
label rotor'en lassen geht das aktuell nicht.
Du brauchst nur die zusammengehörenden Elemente zu klammern. Mit ftui-cell zum Beispiel
<ftui-grid-tile row="3" col="7" height="3" width="3">
<ftui-rotor class="size-5">
<ftui-cell>
<ftui-icon name="bed"></ftui-icon>
<ftui-label>Bed</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon name="train"></ftui-icon>
<ftui-label>Train</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon name="industry"></ftui-icon>
<ftui-label>Industry</ftui-label>
</ftui-cell>
</ftui-rotor>
</ftui-grid-tile>
Zitat von: setstate am 29 Oktober 2021, 10:34:03
Du brauchst nur die zusammengehörenden Elemente zu klammern. Mit ftui-cell zum Beispiel
Yep, läuft. Danke!
Noch eine Frage zum
tab, bzw.
view, die wohl nur am Rande mit rotor zu tun hat:
Ich hab einen Tab, der aus einem rotor besteht. Nun möchte ich bei Click auf das jeweilige rotor-Element auf die entsprechende Tab-Seite (View5, bzw. View6) gelangen.
<ftui-tab direction="vertical">
<ftui-rotor interval="5" [hidden]="LifteHide:cmd | map('4:true, .*:false')">
<ftui-cell view="View5">
<ftui-icon name="trello" align="bottom" class="size-2">
<ftui-badge [text]="Lifte:Lifte_geschlossen" color="red" class="bold">
</ftui-badge></ftui-icon>
<ftui-label>Lifte</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon name="code-fork" align="bottom" class="size-2" view="View6">
<ftui-badge [text]="Pisten:Pisten_geschlossen" color="red" class="bold">
</ftui-badge></ftui-icon>
<ftui-label>Pisten</ftui-label>
</ftui-cell>
</ftui-rotor>
</ftui-tab>
So geht es schon Mal nicht. view="View5/6" wird ignoriert, egal ob in cell oder beim icon. Denkfehler bei mir oder geht nicht?
-edit im Code-Tag-
das geht so einfach nicht.
Entweder du nimmst statt ftui-cell -> ftui-tab (dann bekommt man aber auch dessen Style-Schema)
oder mit einem kleinen Skript im HTML
<ftui-xxx ... @click="onClicked('View2')">
...
<script>
function onClicked(view) {
document.querySelectorAll('ftui-tab-view').forEach(elem => {
if (elem.id !== view) {
elem.setAttribute('hidden', '');
} else {
elem.removeAttribute('hidden');
}
});
}
</script>
Der Austausch von cell nach tab funktioniert einwandfrei. In meinem Fall passt der Style, weil ich ja nur die view-tabs rotor'en möchte.
Danke für die rasche Rückmeldung!
Hallo zusammen, ich versuche gerade einen Button-Text abhängig vom Device Status anzuzeigen.
Aber irgendwie funtkioniert das mit dem Setzten des Resume oder Pause - Befehls nicht.
Kann mir jemand einen Tipp geben was ich hier falsch mache?
<ftui-button shape="round" fill="solid" [value]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Pause, Paused|Sleeping:Resume')" (value)="VacuumCleaner_Roborock" states="Resume, Pause" [color]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:red, Paused|Sleeping:green')">
<span class="big"><ftui-label [text]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Pause, Paused|Sleeping:Resume')"></ftui-label></span>
</ftui-button>
Grüße, Thomas
Alter Schwede... da hat sich ja viel getan. 103 Seiten...
Gibts irgendwo auch ein howto, wie man von der 2er auf die 3er Version umsteigt?
Hab da noch einige 2er widgets (vdr/kodi, todoist)...
Cheers,
Pula
@ToM_ToM :
Ich kenne die Einzelheiten des Roborock nicht, aber der Code sieht so aus, als kenne Roborock als 'state' : 'Cleaning' 'Zoned Clean' 'Paused' 'Sleeping'
und du versuchst, ihm 'state' zu 'Pause' oder 'Resume' zu setzen.
@Wolfgang Hochweller: Ja genau. Es gibt die States die ich abfrage und ich möchte abhängig davon die Sets setzen.
Also z.b:
set VacuumCleaner_Roborock Pause
wenn er sich im Sate "Cleaning" oder "Zoned Clean" befindet.
und
set VacuumCleaner_Roborock Resume
wenn er sich im State "Paused" oder "Sleeping" befindet.
Hast du eine Idee wie ich meinen Code anpassen muss?
VG, Thomas
Ich vermute, Du musst das Leerzeichen in "Zoned Clean" escapen. Da ich sich aber meine Programmierfähigkeiten auch nur auf "Monkey see- Monkey do" beschränken, würde ich es damit versuchen, den Case "Zoned clean" erstmal wegzulassen. Wenn die übrigen states dann funktionieren, liegt es wohl am Leerzeichen. Ob man aber hier dann "grave accents", backslashs oder Hochkomma oder Anführungszeichen benutzt, weiß ich auch nie und probier dann einfach aus ;-)
Zitat von: pula am 30 Oktober 2021, 00:59:02
Gibts irgendwo auch ein howto, wie man von der 2er auf die 3er Version umsteigt?
Hab da noch einige 2er widgets (vdr/kodi, todoist)...
Cheers,
Pula
Nein, ein Umstieg ist quasi eine Neuprogrammierung.
Da Du zudem auf Widgets angewiesen bist, die (noch) nicht existieren (und jetzt Module heißen), ist ein jetziger Umstieg nicht 1:1 zu machen.
Aber pack Dir doch die FTUI3-Files in ein separates Unterverzeichnis und probiere damit herum.
Nach kurzer Einarbeitung in die neue Struktur/Syntax kommt man da schnell auf sehr ansprechende und vor allem flotte Ergebnisse.
@ToM_ToM :
Poste doch mal ein Devicelisting, dann sehen wir mehr.
Hallo setstate,
ist es eigentlich möglich mit "Variablen" (weiß gerade nicht wie ich es besser ausdrücken soll) zu arbeiten, das heißt das ich z.B. beim umschalten der Seite eine Variable setzte mit der neuen Seite, um diese mir im Headerbereich anzeigen zu lassen. Hier wäre mal ein Beispiel:
<header>
<ftui-row>
<ftui-column width="20%"><ftui-clock format="hh:mm:ss" class="size-3" color="warning"></ftui-clock></ftui-column>
<ftui-column>{{room}}</ftui-column>
<ftui-column width="20%"><ftui-clock format="eeee, DD.MMMM YYYY" class="size-3" color="warning"></ftui-clock></ftui-column>
</ftui-row>
</header>
<main>
<ftui-tab-view id="View1">
<ftui-content file="content-home.html" room="Room1"</ftui-content>
</ftui-tab-view>
</main>
<footer>
<ftui-tab view="View1" direction="vertical" active>
<ftui-icon name="home1"></ftui-icon>
<label class="small">Home</label>
</ftui-tab>
</footer>
Es geht also hier im Beispiel um die Zeile <ftui-column>{{room}}</ftui-column> und <ftui-content file="content-home.html" room="Room1"</ftui-content>
Lässt sich so etwas bewerkstelligen oder gibt es die Möglichkeit hier nicht?
@ToM_ToM
Anscheind muss man nix escapen. FTUI kann mit diesen Stati umgehen. Zumindest konnte es mein Test-dummy.
Zu meines Schande muss ich zudem gestehen, dass ich bislang noch keinen Button verwendet habe (weil mein Magic Mirror einfach "touchless" ist).
Wenn ich aber die Button-Example-Seite ansehe, dann glaube ich, Du hast einen Dreher in der Logik mit dem Mapping und den value-states.
Probier Mal:
<ftui-button shape="round" fill="solid" [value]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Resume, Paused|Sleeping:Pause')" (value)="VacuumCleaner_Roborock" states="Resume, Pause" [color]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:red, Paused|Sleeping:green')">
<span class="big"><ftui-label [text]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Pause, Paused|Sleeping:Resume')"></ftui-label></span>
</ftui-button>
Hat jemand versucht, FTUI3 auf einem aelteren iPad mit iOS 10.3 laufen zu lassen ?
Kriege es nicht hin, FTUI laeuft dagegen noch problemlos.
Liegt wohl am WebKit, habe alle gaengigen Browser mal probiert.
Hatte das gleiche Problem mit einem älteren Kindle. Es lag am zu alten Webview und das konnte man nicht aktualisieren. Am Ende hab ich das Tablet gegen ein neueres getauscht
Gibt es eigentlich eine Art Countdown in Ftui3? Vielleicht kann man da bei FTUI-clock etwas einbauen (lesen aus einem Device:Reading und sekündlich runterzählen? Oder kann Label sich sekündlich aktualisieren wenn man ein Device in FHEM bastelt welches jede Sekunde das Reading ändert?
Zitat von: tomster am 30 Oktober 2021, 13:54:41
@ToM_ToM
Anscheind muss man nix escapen...
Hi tomster, danke für deinen Tipp. Jetzt habe ich es. Hier der Code falls es noch jemand braucht:
<ftui-button shape="round" fill="solid" [value]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:start, Paused|Sleeping:pause')" (value)="VacuumCleaner_Roborock" states="start, pause" [color]="VacuumCleaner_Roborock:state | map('Cleaning:red, Paused|Sleeping:green')">
<span class="big"><ftui-label [text]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Pause, Paused|Sleeping:Fortsetzen')"></ftui-label></span>
</ftui-button>
Ich möchte mich auch langsam an FTUI version 3 wagen.
Wie installiere ich FTUI 3 parallel zu meinem produktiv laufenden FTUI?
Meine bisherigen Files liegen in /opt/fhem/www/tablet und der Browseraufruf erfolgt mittels http://ip:8083/fhem/ftui/index.html
Zitat von: Dracolein am 31 Oktober 2021, 11:40:49
Ich möchte mich auch langsam an FTUI version 3 wagen.
Wie installiere ich FTUI 3 parallel zu meinem produktiv laufenden FTUI?
Meine bisherigen Files liegen in /opt/fhem/www/tablet und der Browseraufruf erfolgt mittels http://ip:8083/fhem/ftui/index.html
Du holst dir die Files wie hier beschrieben: https://github.com/knowthelist/ftui (https://github.com/knowthelist/ftui)
also in FHEM mit
update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txtdie Dateien liegen dann unter /opt/fhem/ww/ftui
Dann definierst du dir ein 2. HTTPSRV-Device mit z.B.
define TabletUI3 HTTPSRV ftui3/ ./www/ftui/ Tablet-UI3Und dann hast du beide parallel laufen.
Mega, vielen Dank. Hat geklappt. Ich hab mir glaube ich sogar das zukünftige Updaten vereinfach, indem ich hinten drauf noch
update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
gepackt habe.
Dann werde ich die nächsten Wochenenden mal loslegen und versuchen, mein oldschool FTUI nachzubauen.
Zitat von: Dracolein am 31 Oktober 2021, 13:17:28
Mega, vielen Dank. Hat geklappt. Ich hab mir glaube ich sogar das zukünftige Updaten vereinfach, indem ich hinten drauf noch
update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
gepackt habe.
Dann werde ich die nächsten Wochenenden mal loslegen und versuchen, mein oldschool FTUI nachzubauen.
Ja das "add" fügt es als feste Datenquelle für Updates hinzu.
Wünsche dir auf jeden Fall viel Spaß, ist echt toll was machbar ist, und ich bin erst (wenn überhaupt) halb fertig ;)
ich finde es auf jeden Fall viel viel schneller...
@setstate: Da es sich bei FTUI3 quasi um ein neues System handelt welches nicht kompatibel mit FTUI2 ist und sich die Beiträge ja jetzt anfangen zu häufen, würde es da nicht Sinn ergeben dafür einen neuen Sub-Bereich im Forum zu nutzen? Aufgrund der hohen Arbeitslast beim Umbau gehe ich mal davon aus, dass es beide Systeme noch länger parallel geben wird...
Moin zusammen,
die ersten Schritte habe ich gemacht, mein Grid steht und wird Stück um Stück mit Inhalt gefüllt. Fast alle meine Fragen fanden tatsächlich in den zahlreichen Beispielcodes ihre Antworten, echt klasse.
Auch die Möglichkeit mit Tabs / id=view1 usw. zu arbeiten, ist wirklich toll.
An folgenden 2 Dingen bin ich bisher hängen geblieben, bei denen ich mir nicht zu helfen vermag:
1.) Text über einem Bild an beliebiger Stelle darstellen
(Hintergrund: Regenradar-Bild des DWD, über den ich meine Stadt punktgenau per ".Stadtname" markieren möchte). Das hatte ich in der alten FTUI so gelöst:
<div class="ontop tall white" data-type="label" style="left: 833px; top: 245px">.</div>
2.) Ein Element anzeigen lassen in Abhängigkeit eines Device-Readings
(Hintergrund: die Uhrzeit der nächsten Aktorschaltung soll dargestellt werden, aber nur, wenn diese Schaltautomatik aktiviert ist. Sonst soll an dieser Stelle "inaktiv" angezeigt werden)
Habe ich bisher im alten FTUI so gelöst:
<div data-type="classchanger" data-device="Nachtlichtautomatikschalter" data-get="state" data-get-on="off" data-on-class="hide">
3.) Einbindung Kalender
Ich fand per Suche hier im Forum dieses Posting ( https://forum.fhem.de/index.php/topic,115259.msg1103009.html#msg1103009 )
Leider konnte ich den Code bei mir nicht wirklich brauchen, es funktioniert nichts. Wo finde ich dazu etwas Doku?
So sieht das ganze bei mir im alten FTUI aus
<div data-type="calview"
data-device="FamilyCal"
data-get="all"
data-header='["Datum:","Zeit:","Terminbeschreibung:"]'
data-header-color="white"
data-header-class="bold"
data-daysleft-values='[0,5]'
data-daysleft-colors='["#aa6900"]'
class="bigger darker"
data-detail='["bdate","btime","summary"]'
data-detailwidth='["20","10","70"]'
data-showempty="Derzeit keine Termine"
data-oneline="yes"></div>
</div>
Zitat von: Dracolein am 01 November 2021, 08:27:46
2.) Ein Element anzeigen lassen in Abhängigkeit eines Device-Readings
(Hintergrund: die Uhrzeit der nächsten Aktorschaltung soll dargestellt werden, aber nur, wenn diese Schaltautomatik aktiviert ist. Sonst soll an dieser Stelle "inaktiv" angezeigt werden)
Habe ich bisher im alten FTUI so gelöst:
<div data-type="classchanger" data-device="Nachtlichtautomatikschalter" data-get="state" data-get-on="off" data-on-class="hide">
Morgen,
bei Punkt 2 kann ich dir helfen, das geht mit dem Parameter
[hidden], hier mal ein Beispiel von mir, da schalte ich bei mir das badge am Müllsymbol um zwischen Zahlen und text:
<ftui-column>
<ftui-icon name="trash" color="blue" [class-name]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:hop,1:')"></ftui-icon>
<ftui-badge [text]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:Heute, 1:Morgen')"
[color]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:red, 1:yellow')"
[hidden]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:false, 1:false, 2:true')" class="size-0">
</ftui-badge> <!-- Heute und Morgen -->
<ftui-badge [text]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days"
[hidden]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->
</ftui-column>Das heißt wenn das Attribut [hidden] erfüllt ist blendest du das Element aus. Mapping machst du bei dir ja dann "map" und nicht wie bei mir mit "step", du hast ja nur zwei Zustände[/code]
Zu Punkt 3, hast du hier schonmal geschaut: https://forum.fhem.de/index.php/topic,120379.0.html
Gruß Markus
Vielen Dank.
Punkt 2.) = gelöst 8)
Punkt 1.) = nicht so dramatisch wichtig
Punkt 3.) = habe im separaten Thread gefragt
Punkt 4.) Einbindung eines Live-Videostreams, geht das schon irgendwie?
Über das bekannte Modul SSCAM sind meine zwei Livecams in FHEM eingebunden; in FTUI 2 gibts dafür ein Widget, eingebunden bei mir bisher so:
<div data-type="sscamstrm" data-device="SSCamSTRM.CamCarport.generic" class="center"></div>
Vermutlich ist das in FTUI Version 3 ohne Weiteres nicht mehr nutzbar, oder?
ZitatVermutlich ist das in FTUI Version 3 ohne Weiteres nicht mehr nutzbar, oder?
Kommt drauf an, wie Deine Kamera den Stream zur Verfügung stellt.
Meine Cam binde ich in FTUI3 so ein:
<ftui-grid-tile row="7" col="7" height="2" width="2" shape="round" class="semitransparent">
<ftui-image src="https://DEINE_CAM_IP/videostream.cgi" width="160px">
</ftui-image>
</ftui-grid-tile>
Tja gute Frage...
Also auf der klassischen FHEMWEB Oberfläche - dank des SSCAM-Moduls - sehe ich die Livestreams eingebunden und funktionsfähig laufen.
Irgendwie muss es möglich sein. Leider laufen bei mir die Links nicht in einem img-Element (obwohl der jew. Link in einem sep. Browser-Tap ebenfalls läuft!)
edit:
hier ist die Lösung:
https://forum.fhem.de/index.php/topic,45671.msg1183917.html#msg1183917
Davon ab, eine weitere Frage:
Lassen sich weitere Icons irgendwie nutzen und falls ja, wie ? (z.B. die Font-Awesome Sammlung, auf die man auch in FTUI 2 Zugriff hat).
Hintergrund: mir fehlen so einige Icons, auf die ich nicht mehr verzichten möchte, wie z.B. mehr unterschiedliche Shutter-Status-Icons oder Door-open / -cloed usw.
Wie gebe ich einem Button entsprechend seines Status unterschiedliche Befehle mit?
Das hier funktioniert soweit schon
<ftui-button [value]="HUEGroup2:any_on" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="set HUEGroup2 pct 20">
<ftui-icon [namce]="HUEGroup2:any_on | map('1:lightbulb-on, 0:lightbulb')"
[color]="HUEGroup2:any_on | map('1:dark, 0:light')"></ftui-icon>
</ftui-button>
jedoch kann ich erwartungsgemäß die Lampengruppe lediglich mit Helligkeit=20 einschalten; aber sie nicht mehr ausschalten.
Hier das Ganze funktional aus FTUI 2.x:
<div data-type="switch" data-get="any_on" data-get-on="1" data-get-off="0" data-set="pct" data-set-on="20" data-set-off="0" data-device="HUEGroup2" data-off-color="lightgray" data-on-color="#282828"></div>
So sollte es funzen...
<ftui-button [value]="HUEGroup2:any_on" states="pct 20, off" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="HUEGroup2">
</ftui-button>
Zitat von: Dracolein am 01 November 2021, 15:48:09Davon ab, eine weitere Frage:
Lassen sich weitere Icons irgendwie nutzen und falls ja, wie ? (z.B. die Font-Awesome Sammlung, auf die man auch in FTUI 2 Zugriff hat).
Hintergrund: mir fehlen so einige Icons, auf die ich nicht mehr verzichten möchte, wie z.B. mehr unterschiedliche Shutter-Status-Icons oder Door-open / -cloed usw.
Schau mal hier: https://forum.fhem.de/index.php/topic,117545.0.html
Zitat von: mr_petz am 01 November 2021, 19:57:48
So sollte es funzen...
<ftui-button [value]="HUEGroup2:any_on" states="pct 20, off" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="HUEGroup2">
</ftui-button>
Dankeschön, das bringt mich ein Stück weiter. Das Attribut "states=" war mir nicht bekannt.
.... aber der Knopf mag noch immer nicht so richtig mit Deinem Code.
Einschalten = klappt perfekt
Ausschalten = muss ich 2x betätigen. Er klickert die Reihenfolge von "states" durch, wie ich sehen kann.
Zitat von: Dracolein am 01 November 2021, 20:02:43
Dankeschön, das bringt mich ein Stück weiter. Das Attribut "states=" war mir nicht bekannt.
.... aber der Knopf mag noch immer nicht so richtig mit Deinem Code.
Einschalten = klappt perfekt
Ausschalten = muss ich 2x betätigen. Er klickert die Reihenfolge von "states" durch, wie ich sehen kann.
Du könntest noch das probieren wenn off auch pct 0 =off sein kann:
<ftui-button [value]="HUEGroup2:any_on" states="20,0" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="HUEGroup2:pct">
</ftui-button>
Ansonsten musst du mal ein list zeigen...
Ist ein bischen Glaskugel gucken... ;)
Zitat von: mr_petz am 01 November 2021, 20:09:38
Du könntest noch das probieren wenn off auch pct 0 =off sein kann:
<ftui-button [value]="HUEGroup2:any_on" states="20,0" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="HUEGroup2:pct">
</ftui-button>
Ansonsten musst du mal ein list zeigen...
klappt auch nicht. HUEGroup2 ist ein ganz langweiliges Device
Das Attribut "any_on" geht auf 1, sobald eine der 4 Birnen leuchtet und damit lässt sich wunderbar der optische Button-Zustand abbilden (klappt ja auch).
Die Lampengruppe schalte ich über "pct".
Das hier ist ein passender Drehknopf, der bereits für stufenlose Einstellung funktioniert:
<ftui-knob has-scale has-arc has-value-text has-needle
[(value)]="HUEGroup2:pct" max="100"
[color]="HUEGroup2:pct | step('0: light, 1: brown, 70: warning')">
</ftui-knob>
Die alten FTUI 2.x Attribute data-set-on="20" data-set-off="0" waren eindeutiger lesbar.
Hier das List:
Internals:
DEF group 2 IODev=deCONZ
FUUID 5e06744e-f33f-4dec-91b8-5dcfc5ada10e5296
FVERSION 31_HUEDevice.pm:0.239120/2021-03-08
ID G2
INTERVAL
IODev deCONZ
NAME HUEGroup2
NR 47
STATE off
TYPE HUEDevice
desired 0
lights 6,7,11,12
name lampeesstisch
type LightGroup
READINGS:
2021-11-01 19:52:05 IODev deCONZ
2021-11-01 19:52:14 alert none
2021-11-01 20:11:58 all_on 0
2021-11-01 20:11:58 any_on 0
2021-11-01 19:59:43 bri 50
2021-11-01 19:52:14 colormode
2021-11-01 19:52:14 ct 0
2021-11-01 19:52:14 effect
2021-11-01 20:11:58 onoff 0
2021-11-01 20:11:58 pct 0
2021-11-01 19:52:14 reachable 1
2021-11-01 19:52:14 sat 0
2021-11-01 20:11:58 state off
helper:
alert none
bri 50
colormode
ct 0
devtype G
effect
onoff 0
pct 0
reachable 1
sat 0
state off
update_timeout 1
json:
etag f1e5c70db59517735257cc1a35e0baf7
id 2
name lampeesstisch
type LightGroup
action:
alert none
bri 50
colormode hs
ct 0
effect none
hue 0
sat 0
scene
xy:
0.312703
0.328985
devicemembership:
lights:
7
11
12
6
scenes:
HASH(0x29c7510)
state:
lights:
11 1
12 1
6 1
7 1
scenes:
HASH(0x29c7510)
Attributes:
IODev deCONZ
alias Esstischlampe
color-icons 2
delayedUpdate 1
devStateIcon {(HUEDevice_devStateIcon($name),"toggle")}
group HUEGroup
room HUEDevice,Homekit
userattr createActionReadings:1,0 createGroupReadings:1,0
webCmd pct:toggle:on:off
<ftui-button [(value)]="HUEGroup2:pct" states="20,0" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')">
</ftui-button>
Dann so. das get brauchst du ja nur für die Farben...
Einwandfrei. Danke.
Zitat von: Dracolein am 01 November 2021, 20:15:46
...
Das hier ist ein passender Drehknopf, der bereits für stufenlose Einstellung funktioniert:
<ftui-knob has-scale has-arc has-value-text has-needle
[(value)]="HUEGroup2:pct" max="100"
[color]="HUEGroup2:pct | step('0: light, 1: brown, 70: warning')">
</ftui-knob>
.....
Nur eine Frage. Funzt der Knob bei dir mehrfach?
Also kannst du den mehrfach hintereinander hoch und runter "drehen" und werden dann neue Werte gesetzt?
Wenn ja, sag mal bitte deine Systemconfig/Hardware von Fhem. Hintergrund ist folgender:
Bei manchen funzt das drehen nur einmal oder zweimal und ich suche da den Grund warum...
Ich muss es heute nochmal vor Ort genauer prüfen für Dich, da ich gestern physisch eine Etage höher saß, wie die Deckenlampe zum zugehörigen Knopf.
Aber rein von der Anzeige des Drehknopfes schien es zu funktionieren, also ich konnte problemlos die Lampe von Null auf z.B. 20% hochdrehen, danach weiterdrehen auf z.B. 60& und sie auch wieder ganz abschalten.
Mein FHEM läuft auf einem raspberry Pi 4 2GB mit Raspbian & aktiver GUI. FTUI läuft fullscreen lokal am angeschlossenen 15" Touchscreen im Chromebrowser
edit:
nachgetestet, der Drehregler funktioniert zuverlässig auch mehrfach direkt hintereinander. Habe keine Schwierigkeiten.
Hier noch mal ein Beispiel fuer reelle Zahlen :
<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)" size="10" decimals="1" class="bold" color="red"></ftui-label>
Ausgangswert : 482
Ergebnis, siehe Bild , rechts unten.
Auffallen tut es eigentlich nur, weil 'decimals' keine Funktion hat.
das ist ein Javascript Rundungsfehler.
Am besten du machst noch ein | fix(1) hinter das multiply
Oder nur mit Integer arbeiten, dann passiert das Problem auch nicht. Also anstatt des | multiply(.01) ein | divide(100)
Zitat von: mr_petz am 01 November 2021, 20:38:06
Nur eine Frage. Funzt der Knob bei dir mehrfach?
Ich hab eine abgewandelte Form jetzt für anderweitige Zwecke in einem Popup untergebracht. Code sieht so aus:
<ftui-knob has-scale has-arc has-value-text has-needle
[(value)]="HUEDevice2:ct" min="155" max="370"
[color]="HUEDevice2:ct | step('0: light, 1: brown, 70: warning')">
</ftui-knob>
Hier funktioniert die Nutzereingabe problemlos und auch mehrfach (die Soll-Werte werden auch zuverlässig übermittelt & ausgeführt), aber die Knob-Darstellung funktioniert überhaupt nicht.
Sprich, die Anzeigeelemente bleiben auf niedrigster Stufe bzw. hüpfen nach Eingabe sofort wieder dort hin.
Kann mir jmd. Hilfestellung zum Verständnis des Circlemenu geben?
Anhand dieses Default-Beispiels:
<ftui-circlemenu>
<ftui-icon name="home1"></ftui-icon>
<ftui-button-nice get="dummy1"></ftui-button-nice>
<ftui-button-nice get="dummy2"></ftui-button-nice>
<ftui-button-nice get="dummy3"></ftui-button-nice>
<ftui-button-nice get="ftuitest"></ftui-button-nice>
</ftui-circlemenu>
Wie kann ich jedem Menüpunkt ein individuelles Icon verpassen? Ich hätte gedacht so:
<ftui-button-nice get="set shelly5 pct 90">
<ftui-icon name="wind" color="light"></ftui-icon>
</ftui-button-nice>
aber das klappt nicht, da weiterhin die default-Lightbulb dargestellt wird.
Hallo Dracolein,
einfach ftui-icon dazu
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
<ftui-icon name="power-off" color="mygreen"></ftui-icon>
</ftui-button>
hier nochmal komplett
<ftui-row>
<ftui-circlemenu direction="top-half">
<ftui-icon class="size-3"
path="../images/openautomation"
[name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_manual_m, off:power-off')"
[color]="Luefter:state | map('auto:mygreen, man:mygreen, off:mygreen')"
></ftui-icon>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
<ftui-icon name="power-off" color="mygreen"></ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
<ftui-icon class="size-5" color="mygreen">1</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 2">
<ftui-icon class="size-5" color="mygreen">2</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
<ftui-icon class="size-5" color="mygreen">3</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
<ftui-icon class="size-5" color="mygreen">4</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
<ftui-icon class="size-2"
path="../images/openautomation"
name="vent_ventilation_level_automatic"
color="mygreen"
></ftui-icon>
</ftui-button>
</ftui-circlemenu>
<ftui-badge
backgroundcolor="secondary"
[text]="Luefter:stufe">
</ftui-badge>
</ftui-row>
oder fehlt dir der Path zu den Icons?
path="../images/openautomation"
Gruß
Eisix
@setstate
ZitatDas ist ein Javascript Rundungsfehler.
Am besten du machst noch ein | fix(1) hinter das multiply
Oder nur mit Integer arbeiten, dann passiert das Problem auch nicht. Also anstatt des | multiply(.01) ein | divide(100)
Danke, das funktioniert.
Dabei haette ich schwoeren koennen, dass ich das auch mal probiert habe ....
Zitat von: Eisix am 03 November 2021, 15:50:52
Hallo Dracolein,
einfach ftui-icon dazu
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
<ftui-icon name="power-off" color="mygreen"></ftui-icon>
</ftui-button>
hier nochmal komplett
<ftui-row>
<ftui-circlemenu direction="top-half">
<ftui-icon class="size-3"
path="../images/openautomation"
[name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_manual_m, off:power-off')"
[color]="Luefter:state | map('auto:mygreen, man:mygreen, off:mygreen')"
></ftui-icon>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
<ftui-icon name="power-off" color="mygreen"></ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
<ftui-icon class="size-5" color="mygreen">1</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 2">
<ftui-icon class="size-5" color="mygreen">2</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
<ftui-icon class="size-5" color="mygreen">3</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
<ftui-icon class="size-5" color="mygreen">4</ftui-icon>
</ftui-button>
<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
<ftui-icon class="size-2"
path="../images/openautomation"
name="vent_ventilation_level_automatic"
color="mygreen"
></ftui-icon>
</ftui-button>
</ftui-circlemenu>
<ftui-badge
backgroundcolor="secondary"
[text]="Luefter:stufe">
</ftui-badge>
</ftui-row>
oder fehlt dir der Path zu den Icons?
path="../images/openautomation"
Gruß
Eisix
Ich hab mein Problem dank Deines Beispiels gefunden. Mein Lösungsweg war schon richtig, aber was zum Geier bedeutet
<ftui-button-nice> ?
Mit dem klassischen <ftui-button> habe ich mein circlemenu hinbekommen, danke.
Edit:
Ein Problem habe ich doch noch. Und zwar vermutlich, da ich die genaue Syntax nicht begreife.
Hier der Schnipsel, um den es geht:
<ftui-icon size="3" path="../images/openautomation"
[name]="shelly5:pct | map('0:fts_shutter_100, 10:fts_shutter_90, 20:fts_shutter_80, 30:fts_shutter_70, 40:fts_shutter_60, 50:fts_shutter_50, 60:fts_shutter_40, 70:fts_shutter_30, 80:fts_shutter_20, 90:fts_shutter_10, 100:fts_shutter_10')"
[color]="shelly5:pct | step('0:light, 1:brown, 100: green')"></ftui-icon>
- Icons werden korrekt dargestellt
- Farben wird korrekt dargestellt
- Icon wird aber nur angezeigt, wenn der Wert des Readings
exakt zutrifft. Ist der Rolladen z.b. bei pct=43, wird kein Icon dargestellt.
Mein Problem ist logisch, das kann nicht funktionieren, weil die Funktion eine Auswahl meiner exakt vorgegebenen Werte vornimmt.
Aber wie müsste es korrekt formuliert werden, zumal ich für den Wert pct=0 ein eigenes Icon nutze, ebenso wie für pct=100.
Als Beispiel müsste das Icon "fts_shutter_90" für den Wertebereich zwischen 1-10 dargestellt werden. Aber ich kann ja nur entweder "map" oder "step" definieren.
Glaube jedoch, dass ich einen Denkfehler habe...
edit2:
habs gelöst. Beim Schreiben von Text löst sich manchmal der Knoten :-)
Lösung:
<ftui-icon size="3" path="../images/openautomation"
[name]="shelly5:pct | step('0:fts_shutter_100, 1:fts_shutter_90, 11:fts_shutter_80, 21:fts_shutter_70, 31:fts_shutter_60, 41:fts_shutter_50, 51:fts_shutter_40, 61:fts_shutter_30, 71:fts_shutter_20, 81:fts_shutter_10')"
[color]="shelly5:pct | step('0:light, 1:brown, 100: green')"></ftui-icon>
Besteht die Möglichkeit, ein Badge-Element abzuwandeln, um es als zusätzliches Hinweis-Icon zu benutzen?
Im Anhang habe ich mal ein Screenshot meines FTUI 2.x angehängt; es zeigt einen Teil einer Menüleiste.
Mit den dort verfügbaren Möglichkeiten konnte man z.B. an ein Symbol-Element zusätzlich ein eventabhängiges Icon dranhängen.
Hier im Beispiel ist optisch ein Hinweis signalisiert, dass ein Termin unmittelbar bevorsteht, bzw. draußen grade Frostgefahr besteht.
data-warn="daycheck"
data-warn-on="1"
data-warn-off="0"
data-warn-icon="mi mi-priority_high"
data-warn-background-color='["#aa6900"]'
data-warn-color='["lightgray"]'
Ich fand sowas sehr nützlich.
Kann mir jmd mit der replace Pipe weiterhelfen? Ich begreife es leider nicht.
<ftui-label [text]="Sonnenaufgang"></ftui-label>ergibt z.B.
ZitatNext: 07:35:25
und ich möchte lediglich die Ausgabe
Zitat07:35
sehen.
Vielen Dank vorab.
Hallo Dracolein,
müsste mit
<ftui-label [text]="Sonnenaufgang | part(2)"></ftui-label>
klappen.
Gruß Lutz
Zitat von: Dracolein am 03 November 2021, 20:10:20Besteht die Möglichkeit, ein Badge-Element abzuwandeln, um es als zusätzliches Hinweis-Icon zu benutzen?
Ja, das sollte gehen, da du dem badge ein icon unterschieben kannst. In etwa so:
<ftui-icon>
<!-- hier dein icon an dem das badge ran soll -->
</ftui-icon>
<ftui-badge text=" " color="clear"
[hidden]="DEIN-DEVICE:daycheck | map('0:true, 1:false')">
<ftui-icon path="icons/materialicons/"
name="mi-priority_high"
color="lightgray"
class="">
</ftui-icon>
</ftui-badge>Vorrausgesetzt, deine materialicons sind vorhanden unter dem Pfad und das icon heisst so.
Zitat von: LuGu am 03 November 2021, 23:18:15
Hallo Dracolein,
müsste mit
<ftui-label [text]="Sonnenaufgang | part(2)"></ftui-label>
klappen.
Gruß Lutz
Hallo Lutz, vielen Dank, das bringt mich einen Schritt weiter.
Ich habe nun immerhin die Ausgabe
Zitat07:33:54
jetzt fehlt noch das Wegschneiden der Sekunden, falls möglich.
Davon ab würde mich interessieren, wie ich die Funktion nachvollziehen kann zwecks Lerneffekt für mich.
Zitat von: yersinia am 04 November 2021, 09:00:01
Ja, das sollte gehen, da du dem badge ein icon unterschieben kannst. In etwa so:
<ftui-icon>
<!-- hier dein icon an dem das badge ran soll -->
</ftui-icon>
<ftui-badge text=" " color="clear"
[hidden]="DEIN-DEVICE:daycheck | map('0:true, 1:false')">
<ftui-icon path="icons/materialicons/"
name="mi-priority_high"
color="lightgray"
class="">
</ftui-icon>
</ftui-badge>
Vorrausgesetzt, deine materialicons sind vorhanden unter dem Pfad und das icon heisst so.
Cooler Tip, das funktioniert generell schon gut. Aber ich schaffe es nicht, dass das "Badge-Icon" transparent ist. Color="clear" wirkt nicht, ebenso wenig wie fill="clear". Hier mein Code und im Anhang der Screenshot dazu
<ftui-badge text=" " color="clear" [hidden]="FamilyCal:daycheck | map('0:true, 1:false')">
<ftui-icon name="info" color="brown" class="" size="-2"></ftui-icon>
</ftui-badge>
P.S.:
und überhaupt, dieser Thread ist voll mit geballter Kompetenz, das müsste unbedingt in einen Wiki-Eintrag untergebracht werden. Was ich hier an Möglichkeiten durch puren Zufall entdeckt hatte, ist der Hammer. Allein die Möglichkeiten mit <ftui-weather> kannte ich zuvor auch alle nicht.
Zitat von: Dracolein am 04 November 2021, 15:33:08Cooler Tip, das funktioniert generell schon gut. Aber ich schaffe es nicht, dass das "Badge-Icon" transparent ist. Color="clear" wirkt nicht, ebenso wenig wie fill="clear". Hier mein Code und im Anhang der Screenshot dazu
<ftui-badge text=" " color="clear" [hidden]="FamilyCal:daycheck | map('0:true, 1:false')">
<ftui-icon name="info" color="brown" class="" size="-2"></ftui-icon>
</ftui-badge>
<ftui-badge text=" " color="transparent" [hidden]="FamilyCal:daycheck | map('0:true, 1:false')">
<ftui-icon name="info" color="brown" class="" size="-2"></ftui-icon>
</ftui-badge>Versuch mal
color="transparent" beim badge. Ich weiss gar nicht mehr, ob
text=" " noch benötigt wird. "Früher" wurde das benötigt, damit badge ohne text auch angezeigt worden ist.
Das geile an FTUI3 ist auch, dass du hier beliebig kombinieren könntest, zB verschiedene batches die je nach Zustand angezeigt werden
<ftui-badge text=" " color="transparent" [hidden]="FamilyCal:daycheck | map('0:true, 1:false')">
<ftui-icon name="info" color="brown" class="" size="-2"></ftui-icon>
</ftui-badge>
<ftui-badge text=" " color="transparent" [hidden]="FamilyCal:daycheck | map('0:false, 1:true')">
<ftui-icon name="info" color="green" class="" size="-2"></ftui-icon>
</ftui-badge>Oder das icon je nach Zustände im batch definieren.
<ftui-badge text=" " color="transparent" [hidden]="FamilyCal:daycheck | map('0:true, .*:false')">
<ftui-icon [name]="FamilyCal:daycheck | map('0:info, 1:info, 2:warning')" [color]="FamilyCal:daycheck | map('0:brown, 1:brown, 2:green')" class="" size="-2"></ftui-icon>
</ftui-badge>
Perfekt, color="transparent" hat Abhilfe geschaffen. Wieso zum Geier bin ich da nicht selbst drauf gekommen...
Aber schlimm, wie lange man sich als Perfektionist mit den kleinsten Details aufhalten kann ::) ;D
Wie ändere ich die tatsächlich dargestellte Farbe hinter dem Wort "green" innerhalb des HTML Konstrukts? Also die dargestellte Farbe, wenn ich z.B.
<ftui-row color="green">green</ftui-row>schreibe. Ich dachte, dazu gehe ich in die ftui-theme.css und ändere einfach den Farbwert von
Zitat--green: #32a054;
aber 1.) entspricht der dort stenden Farbcode gar nicht dem in meinem Browser dargestellten Farbwert und 2.) kann ich durch Änderung dieses Farbcodes gar nichts bewirken.
ich habe im Style-Tag auf der Index-Seite einfach folgendes geschrieben:
[color="green"] {
--color-base: #32a054;
}
Den Color-Code kannst du dir zB hier holen oder anschauen: http://html-color.org/de/
Ohne die genauen Hintergründe zu kennen, aber kann es sein, dass in der Funktion <ftui-weather> bei der Zuordnung der richtigen Bilddateien für die bunten Grafiken ein Bug enthalten ist?
<ftui-weather size="6" [condition]="WetterProplanta:weather"></ftui-weather>
Funktioniert perfekt
<ftui-weather size="7" icon-set="kleinklimaFHEM" path="../images/default/weather/" [condition]="WetterProplanta:weather"></ftui-weather>
Funktioniert auch, aber es werden - so glaube ich jedenfalls - nicht immer die richtigen Bilddateien ausgewählt.
Gestern abend war es draußen am regnen und anstelle der Regenwolke mit Mond (=Nacht) wurde mir eine Regenwolke mit Sonne angezeigt.
In meinem alten FTUI 2 funktioniert das kleinklima-Iconset weiterhin zuverlässig, dort siehts so aus:
<div data-type="weather" data-device="WetterProplanta" data-get="weatherIcon" data-imageset="kleinklima" style="width:120px"></div>
Ja, hier frage ich das Reading "weatherIcon" ab, während ich oben in FTUI3 das Reading "Weather" abfrage. Aber die Textdarstellung des Readings "Weather" ist auch korrekt gewesen ("Sprühregen" am gestrigen Abend)
Möglicherweise beobachtet jemand auch dies Problemchen?
Ich hatte das schonmal gemeldet, ist aber wahrscheinlich untergegangen.
Beim Colorpicker sind horizontal und vertikal vertauscht, wenn man das Attribut direction=horizontal angibt, wird der Regler vertikal gezeichnet. Sieht man auch im Beispiel im git.
Zitat von: grossmaggul am 05 November 2021, 12:57:55
Ich hatte das schonmal gemeldet, ist aber wahrscheinlich untergegangen.
Beim Colorpicker sind horizontal und vertikal vertauscht, wenn man das Attribut direction=horizontal angibt, wird der Regler vertikal gezeichnet. Sieht man auch im Beispiel im git.
Dachte ich auch erst, aber im Sinne des iro.js bedeutet "horizontal", dass die Elemente nebeneinander sind, und "vertical" ist ein Stack von oben nach unten.
Bei Slider, die eher Länglich sind, wirkt das Wording schnell verwirrend.
Zitataber im Sinne des iro.js bedeutet "horizontal", dass die Elemente nebeneinander sind, und "vertical" ist ein Stack von oben nach unten.
O.K., wenn man's so sieht, das kommt halt dabei heraus wenn Nerds versuchen logisch zu sein. ;) ;D
Zitat von: setstate am 15 Februar 2021, 17:30:56
Sowas geht nicht. In FTUI 4 dann vielleicht mal 8)
Hallo setstate, wäre es nicht möglich, eine Content zu erweitern damit es möglich ist, kompletten html code aus einem Reading darzustellen?
z.B statt
<ftui-content file="mainTablet/templates/template_Sonos.html"></ftui-content>dann:
<ftui-content [reading]="MeinDevice:meinHTMLCodeReading"></ftui-content>Beste Grüße
Thomas
Hi,
gibt es schon einen Bildschirmschoner für Version3?
Zitat von: ToM_ToM am 05 November 2021, 21:37:29
Hallo setstate, wäre es nicht möglich, eine Content zu erweitern damit es möglich ist, kompletten html code aus einem Reading darzustellen?
z.B statt
<ftui-content file="mainTablet/templates/template_Sonos.html"></ftui-content>
dann:
<ftui-content [reading]="MeinDevice:meinHTMLCodeReading"></ftui-content>
Beste Grüße
Thomas
habe ich so ähnlich jetzt eingebaut
<ftui-content [content]="ftuitest:html"></ftui-content>
Ich hatte irgendwo in diesem Thread einen Screenshot eines Popups gesehen, bei dem zum Schließen des Fensters anstelle des "X" rechts oben in der Ecke der String "Close" stand.
Wie kann ich das erreichen?
Schau mal hier:
https://knowthelist.github.io/ftui/www/ftui/examples/popup.html
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/popup.html
Das CUSTOM-CLOSE
Zitat von: yersinia am 06 Januar 2021, 13:24:32
EDIT:
material icons von Christoph Morrison (https://forum.fhem.de/index.php?action=profile;u=17701) bereitgestellte icons (https://forum.fhem.de/index.php/topic,117254.0.html) können, wenn man sie nicht wie im Thread (https://forum.fhem.de/index.php/topic,117254.0.html) beschrieben in FHEM via update integrieren möchte, auch -wie oben beschrieben- via wget direkt von github laden:
Ich hab die Material Icons so wie von Christoph beschrieben in das FHEM-update aufgenommen und ge-updated. Nach den im Thread genannten
exclude-from-updates lief es auch problemlos durch. Leider bekomme ich aber die Icons in FTUI nur in "schwarz" angezeigt;
color- oder
style-tags in der
<ftui-icon>-Definition bleiben wohl unberücksichtigt. Ich hab auch schon einen Softlink in /ftui/icons/ angelegt, im Glauben dass das CSS nur auf Dateien im Icon-Ordner greift. Geht auch ned. Hab ich irgendwo einen Denkfehler?
Zitat von: StephanFHEM am 31 Oktober 2021, 14:03:46
ich finde es auf jeden Fall viel viel schneller...
@setstate: Da es sich bei FTUI3 quasi um ein neues System handelt welches nicht kompatibel mit FTUI2 ist und sich die Beiträge ja jetzt anfangen zu häufen, würde es da nicht Sinn ergeben dafür einen neuen Sub-Bereich im Forum zu nutzen? Aufgrund der hohen Arbeitslast beim Umbau gehe ich mal davon aus, dass es beide Systeme noch länger parallel geben wird...
gibt es dazu keine Meinung? finde die Mischung der beiden Systeme im Forum echt unpraktisch
zusätzlich noch eine Frage:
Ich hab ein Button eingebaut mit add 0.5 ... wenn ich den Button mehrfach drücke verschluckt sich das Device irgendwann und springt in den Werten. Gibt es eine Möglichkeit das abzufangen und nur einmal zu senden nach x sekunden? wenn man zum Beispiel in 2 Sekunden 5x drückt dann erhöht er den Wert nur einmal um 2.5
Slider - Wie kann ich das machen ?
Ich habe einen Slider definiert :
<ftui-slider
[value]="AirconUp:setpointTemp | part(1)"
(value)="AirconUp thermostatSetpointSet $value C 1" min="18" max="25" tick="1" has-ruler >
</ftui-slider>
setpointTemp hat auch einen 3. Teil, etwa 'cooling' oder 'heating'.
Wie erreiche ich es, dass
im Fall von 'heating' :
(value)="AirconUp thermostatSetpointSet $value C 1" min="18" max="25" tick="1" has-ruler >
im Fall von 'cooling' :
(value)="AirconUp thermostatSetpointSet $value C 2" min="18" max="25" tick="1" has-ruler >
ausgefuehrt wird.
So etwas funktioniert :
<ftui-slider [value]="AirconWohn:setpointTemp | part(1)"
(value)="AirconWohn thermostatSetpointSet $value C 1" min="18" max="25" tick="1" has-ruler
[class-name]= "AirconWohn:setpointTemp | part(3)| map('cooling:hidden, .*:´´')"></ftui-slider>
<ftui-slider [value]="AirconWohn:setpointTemp | part(1)"
(value)="AirconWohn thermostatSetpointSet $value C 2" min="18" max="25" tick="1" has-ruler
[class-name]= "AirconWohn:setpointTemp | part(3)| map('heating:hidden, .*:´´')"></ftui-slider>
aber geht das nicht auch eleganter ?
Mal eine Frage bezüglich den Buttons,
habe ich die Möglichkeit mit einer Bedienung mehrere Befehle auszulösen,
hier mal ein Beispiel wie ist es in FTUI2 hatte:
<div data-type="push" data-fhem-cmd="set Agip reread;set JET reread;set bft reread;set HEM reread" data-icon="fa-refresh"></div>
Kann ich das so in FTUI3 auch umsetzen oder muss ich das anders lösen?
Update: Hab´s eben gefunden, hier die Lösung:
<ftui-button (value)="set NN_xx_SW_Agip reread; set NN_xx_SW_HEM reread; set NN_xx_SW_JET reread; set NN_xx_SW_bft reread">aktualisieren</ftui-button>
Seit dem letzten Update bekomme ich beim Seitenrefresh immer u.a. Toastmeldung.
Die chart dazu sieht so aus:
<ftui-chart title="CPU Temperatur">
<ftui-chart-data fill
label="CPU 1"
color="red"
log="logdb"
file="history"
spec="sys.ueberwachung:cpu1_temp"
point-radius="0">
</ftui-chart-data>
<ftui-chart-data fill
label="CPU 2"
color="green"
log="logdb"
file="history"
spec="wz.radiator:temperature"
point-radius="0">
</ftui-chart-data>
<ftui-chart-controls></ftui-chart-controls>
</ftui-chart>
Zitat von: tomster am 06 November 2021, 14:51:21
Ich hab die Material Icons so wie von Christoph beschrieben in das FHEM-update aufgenommen und ge-updated. Nach den im Thread genannten exclude-from-updates lief es auch problemlos durch. Leider bekomme ich aber die Icons in FTUI nur in "schwarz" angezeigt; color- oder style-tags in der <ftui-icon>-Definition bleiben wohl unberücksichtigt. Ich hab auch schon einen Softlink in /ftui/icons/ angelegt, im Glauben dass das CSS nur auf Dateien im Icon-Ordner greift. Geht auch ned. Hab ich irgendwo einen Denkfehler?
OK, hab's gefunden. Um die Icons farblich im jeweiligen Style anzupassen, musste ich in der ./components/icon/icon.component.css noch einen Selektor um "svg [fill]" erweitern:
svg g[fill], svg [fill] {
fill: inherit;
}
Bislang habe ich noch keine "unerwünschten Nebenwirkungen" feststellen können.
@setstate:
Magst Du hierzu vielleicht kurz ein Feedback geben, und das dann ggfls. in's repository mitaufnehmen?
Zitat von: StephanFHEM am 24 Oktober 2021, 23:17:01
Gibt es schon Pläne, diese Widget für FTUI3 lauffähig zu machen? Meine Frau nutzt es gerne weil sie so am Tablet relativ einfach die Timer für Heizungen, etc. bearbeiten kann.
@StephanFHEM
Hi, ich habe hier einen einfachen Timerset um den WeekdayTimer zu füttern und auszulesen.
Ich habe den in anderer Form für meine HeizungsTimer genutzt und für den WeekdayTimer umgebaut.
Vielleicht kann man darauf aufbauen den wdtimer_widget zu portieren.
Für meine Anwendung reicht dieser aus...
Das ist wieder eine "
Übergangslösung" von mir und ich werde da nicht mehr viel Zeit reinstecken (ist nicht böse gemeint).
Optisch ist er sehr einfach gehalten.
Wer hier lust hat weiter zu stylen oder zu ändern kann es gerne machen ;)
Ein grid-tile witdth="10" ist ein muss! Sonst verschieben sich die Reihen. Wie gesagt, für mich ausreichend... 8)
Wenn kein Device in fhem vorhanden ist, wird mit hilfe von setdevice="" ein neues in fhem definiert...
Er ist nur für eine Standarddefinition ausgelegt wie hier im Beispiel:
define dummy WeekdayTimer dummy1 1234560|05:20|on 1234560|20:30|off
Ich hoffe du kannst es erstmal so verwenden für deine Timer... :)
Settings:
device="DEVICE" => WeekdayTimer Device
setdevice="DEVICE" => wird nur bei undefinierten/nicht vorhandenen WeekdayTimer Device benötigt
setcmd='on,off' => commands (erscheinen dann im AuswahlSelect), (werden aber auch vom definierten WeekdayTimer gelesen)
Bsp.:
<ftui-grid-tile row="1" col="1" height="7" width="10">
<header>Timer</header>
<ftui-weekdaytimer
device="dummy"
setcmd='on,off'
>
</ftui-weekdaytimer>
</ftui-grid-tile>
Bsp im Popup:
<ftui-grid-tile row="1" col="1" height="7" width="10">
<header>Timer</header>
<ftui-icon name="th" popup-target="pop1"></ftui-icon>
<ftui-popup id="pop1" shape="round" height="auto">
<header>Timer</header>
<ftui-weekdaytimer
device="dummy"
setcmd='on,off'
>
</ftui-weekdaytimer>
</ftui-popup>
</ftui-grid-tile>
zum runterladen hier hingehen:
https://github.com/mr-petz/ftui/tree/addons
LG mr_petz
Zitat von: tomster am 07 November 2021, 15:28:30
Bislang habe ich noch keine "unerwünschten Nebenwirkungen" feststellen können.
Anzumerken ist, dass beim Einsatz von z.B. mehrfarbigen SVGs (Apotheke, Verkehrszeichen, ...) Nebenwirkungen auftreten (können). Eigentlich dürfte nur die Platzhalter-Farbe (als Hex-Angabe) ersetzt werden ... jede andere Farbangabe sollte erhalten bleiben.
Guten Morgen
Gibt es schon eine Möglichkeit, aus FTUI heraus eine Webseite aufzurufen (und damit im Browser die FTUI Umgebung zu verlassen)?
zB um zur klassischen FHEM Übersicht zu gelangen?
Viele Grüße
Ralph
PS: FTUIv3 ist toll! Vielen Dank!
Hi.
meinst du einfach so?:
<a href="http://127.0.0.1:8083/fhem/">FHEM</a>
Kannst du so einbinden...
oder möchtest du einen FTUI3 Button? oder im I-Frame???
Bsp button gleicher Tab/Seite:
<ftui-button class="size-1" @click="javascript:window.location.href='http://127.0.0.1:8083';">FHEM</ftui-button>
Bsp button neuer Tab(about:blank):
<ftui-button class="size-1" @click="javascript:window.open('http://127.0.0.1:8083');">FHEM</ftui-button>
ps.: gleiches gilt/funktioniert bei ftui-icon und ftui-label
@mr_petz: Super! Dankeschön!
Ich bräuchte mal kurz ne kleine Hilfe,
ich habe bei mir Kästchen für den Apothekennotdienst gemacht. Folgendes habe ich definiert:
<ftui-grid-tile row="5" col="7" height="1" width="4" shape="round">
<header>Apothekennotdienst</header>
<ftui-row>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Name"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Strasse"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-column align-items="right" padding=5px>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Plz"></ftui-label>
</ftui-column>
<ftui-column align-items="left">
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Ort"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Telefon"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label class="size-1" text="Entfernung"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Entfernung"><span class="size-1" slot="unit"> km</span></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Wie man im Screenshot sehen kann sind alle Zeilen schön mittig, Probleme hab ich nur in den Zeilen mit der PLZ/Ort und Entfernung/km.
Die Zeile mit der Entfernung/km hab ich mit zwei columns definiert, ganz ohne Angaben von Tabellengröße, Ausrichtung o.a. Demnach teilt er die Zeile mittig auf und zentriert die Einträge, ist ja gut erkennbar.
Die Zeile mit der PLZ/Ort habe ich rechts- bzw. linksbündig formatiert mit einem kleinen padding, sodass eine kleine Lücke entsteht, auch gut erkennbar. Ist aber leider vom Format auch nicht ganz das was ich gerne hätte, die Zeile ist in sich etwas zu weit rechts mit den Einträgen, sieht komisch aus. Besteht die Möglichkeit in einem label mehrere Textangaben zu machen, super wäre PLZ, dann ein Leerzeichen, Ort und das in Summe zentriert. Oder habe ich die Möglichkeit das alles über die Formatierung zu schaffen?
Zitat von: meier81 am 08 November 2021, 21:21:14
Ich bräuchte mal kurz ne kleine Hilfe,
Die Zeile mit der Entfernung/km hab ich mit zwei columns definiert, ganz ohne Angaben von Tabellengröße, Ausrichtung o.a. Demnach teilt er die Zeile mittig auf und zentriert die Einträge, ist ja gut erkennbar.
Die Zeile mit der PLZ/Ort habe ich rechts- bzw. linksbündig formatiert mit einem kleinen padding, sodass eine kleine Lücke entsteht, auch gut erkennbar. Ist aber leider vom Format auch nicht ganz das was ich gerne hätte, die Zeile ist in sich etwas zu weit rechts mit den Einträgen, sieht komisch aus. Besteht die Möglichkeit in einem label mehrere Textangaben zu machen, super wäre PLZ, dann ein Leerzeichen, Ort und das in Summe zentriert. Oder habe ich die Möglichkeit das alles über die Formatierung zu schaffen?
Du kannst die ftui-row mit PLZ/Ort noch in ein ftui-cell "einpacken".
Gruß Lutz
Vielleicht kann mir jemand nochmal mit der Funktion <ftui-weather> weiterhelfen in Kombination mit dem Proplanta Wettermodul mit Bezug auf das Wettericon für das aktuelle Wetter.
Reading: weatherIcon
Wie kann ich dies verwenden, um das aktuelle Wetter darzustellen?
@Dracolein
Hi. Ich weiß dieser Thread ist sehr groß, aber die meisten Antworten stehen schon drin. ;)
Hier gab es schon mal das Thema über die Icons von <ftui-weather>:
https://forum.fhem.de/index.php/topic,115259.msg1179381.html#msg1179381
LG mr_petz
Du wirst mir nicht glauben, aber ich habe diesen Thread tatsächlich vollständig überflogen. So fand ich auch die Infos aus Deinem Link.
Mein Problem ist nicht grundsätzlich dass (z.B.) kein Icon dargestellt wird - das funktioniert!
Mein Problemchen ist, dass ich derzeit das Reading "weather" zur optischen Darstellung nutze und hier steht bei entspr. Wetter auch nachts der String heiter.
Entsprechend wird mir nachts eine strahlende Sonne dargestellt.
Das Reading "weatherIcon" hingegen zeigt im gleichen Moment einen klaren Mond an, damit man optisch die Nacht dargestellt erkennen kann. Genau das vermisse ich.
@meier81
meinst du so?
center:
<ftui-grid-tile row="5" col="7" height="auto" width="4" shape="round">
<header>Apothekennotdienst</header>
<ftui-cell align-items="center">
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Name"></ftui-label>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Strasse"></ftui-label>
<ftui-row>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Plz" style="padding-right:5px"></ftui-label>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Ort"></ftui-label>
</ftui-row>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Telefon"></ftui-label>
</ftui-cell>
<ftui-row>
<ftui-label class="size-1" text="Entfernung"></ftui-label>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Entfernung"><span class="size-1" slot="end"> km</span></ftui-label>
</ftui-row>
</ftui-grid-tile>
left:
<ftui-grid-tile row="5" col="7" height="auto" width="4" shape="round">
<header>Apothekennotdienst</header>
<ftui-cell align-items="left">
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Name"></ftui-label>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Strasse"></ftui-label>
<ftui-row>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Plz" style="padding-right:5px"></ftui-label>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Ort"></ftui-label>
</ftui-row>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Telefon"></ftui-label>
</ftui-cell>
<ftui-row>
<ftui-label class="size-1" text="Entfernung"></ftui-label>
<ftui-label class="size-1" [text]="NN_xx_SW_Apotheke:Entfernung"><span class="size-1" slot="end"> km</span></ftui-label>
</ftui-row>
</ftui-grid-tile>
getestet habe ich mit den reinen Textangaben...
LG mr_petz
Zitat von: Dracolein am 09 November 2021, 08:59:30
Du wirst mir nicht glauben, aber ich habe diesen Thread tatsächlich vollständig überflogen. So fand ich auch die Infos aus Deinem Link.
Mein Problem ist nicht grundsätzlich dass (z.B.) kein Icon dargestellt wird - das funktioniert!
Mein Problemchen ist, dass ich derzeit das Reading "weather" zur optischen Darstellung nutze und hier steht bei entspr. Wetter auch nachts der String heiter.
Entsprechend wird mir nachts eine strahlende Sonne dargestellt.
Das Reading "weatherIcon" hingegen zeigt im gleichen Moment einen klaren Mond an, damit man optisch die Nacht dargestellt erkennen kann. Genau das vermisse ich.
Dann schau hier:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js
Es geht nur mit bas und kleinklimaFHEM Iconset.
provider="proplantaICON"
hier muss das Reading aber auf t1,t2 usw zielen
Guten Morgen.
Ist es möglich View per URL Aufruf direkt anzufahren?
zB mit einem http://localhost:8083/fhem/ftuiv3/index.html?view="AZ"
Ein View "AZ" existiert und kann innerhalb FTUI per Klick angefahren werden.
Versuchsweise habe ich mal "?" und "#" in Kombination mit "view" bzw "tab-view" probiert, allerdings ohne Erfolg.
Hintergründe:
1.) ich stelle mir vor, dass ich dann auf zB ein FHEM Event reagieren könnte (zB Motion) und FTUI mir den View mit der Kameraübersicht einblendet.
2.) ich möchte einen Fehler im FHEM Fully Modul (URL an Fully übermitteln schlägt bei einigen URLs fehl, https://forum.fhem.de/index.php/topic,78977.360.html) kompensieren
Vielen Dank vorab
Ralph.
Zitat von: megadodopublications am 09 November 2021, 10:21:34
...
1.) ich stelle mir vor, dass ich dann auf zB ein FHEM Event reagieren könnte (zB Motion) und FTUI mir den View mit der Kameraübersicht einblendet.
Vielen Dank vorab
Ralph.
Das kannst du auch mit hidden oder open lösen.
Da kannst du dann zB. ein Popup öffnen lassen...
ftui-tab kann man per value attribute steuern
<ftui-tab view="View7" fill="solid" shape="circle" [value]="ftuitest | map('1:on, .*:off')">
<ftui-icon name="camera"></ftui-icon>
</ftui-tab>
Wenn Value auf on geht, ist das so, als hätte man den tab gedrückt.
Frage:
in der Beispiel index.html ist ein Codeteil drin
<ftui-grid-tile row="5" col="4" height="3" width="4">
<ftui-content file="_content-weather-2-day.html"></ftui-content>
</ftui-grid-tile>
die entsprechende html-Datei liegt aber weder im Hauptverzeichnis noch in examples/contents. Gibt es die trotzdem noch irgendwo?
@setstate
kann es sein dass die header der grid-tile keine Farbe mehr haben?
oder muss man die jetzt angeben?
oder muss man die jetzt als <ftui-grid-header>
angeben?
lg
header background color ist wieder gefixed
Zitat von: mr_petz am 09 November 2021, 09:54:17
Dann schau hier:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js
Es geht nur mit bas und kleinklimaFHEM Iconset.
provider="proplantaICON"
hier muss das Reading aber auf t1,t2 usw zielen
So siehts bei mir aus und funktionier grundsätzlich, zeigt aber sporadisch nicht die richtigen Grafiken an (d.h. teils falsche Darstellungen des aktuellen Wetters):
Zitat<ftui-weather size="7" icon-set="kleinklimaFHEM" path="../images/default/weather/" [condition]="WetterProplanta:weather"></ftui-weather>
Deswegen wollte ich das Reading "weatherIcon" nutzen wie zuvor, aber wenn ich in obiger Codezeile dies Reading einsetze, wird gar kein Icon mehr angezeigt ("N/A"). Was muss denn dann noch angepasst werden?
edit:
Zitat von: mr_petz am 09 November 2021, 09:54:17
hier muss das Reading aber auf t1,t2 usw zielen
d.h. = ?
Da muss ich wieder hierhin verweisen :)
https://forum.fhem.de/index.php/topic,115259.msg1179381.html#msg1179381
steht ganz unten.
[condition]="device:fc0_weather06Icon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"
lg mr_petz
> ftui-tab kann man per value attribute steuern
Super! Danke!
Zitat von: mr_petz am 09 November 2021, 11:30:16
Da muss ich wieder hierhin verweisen :)
https://forum.fhem.de/index.php/topic,115259.msg1179381.html#msg1179381
steht ganz unten.
[condition]="device:fc0_weather06Icon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"
lg mr_petz
Hmm,
<ftui-weather size="7" icon-set="kleinklimaFHEM" path="../images/default/weather/" [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>funktioniert leider nicht ---> N/A
Im Reading aktuell steht:
weatherIcon: https://www.proplanta.de/wetterdaten/images/symbole/t1.gifDas definierte Icon-Set grundsätzlich klappt wie gesagt; der Pfad muss entsprechend ebenfalls stimmen. :-[
provider="proplantaICON" hatte ich auch dazu geschrieben... ;)
<ftui-weather size="7" provider="proplantaICON" icon-set="kleinklimaFHEM" path="../images/default/weather/" [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>
oh man, dankeschön.
Alles gut, so habe ich auch mal angefangen.
Man muss sich erst einarbeiten in die Materie...
LG
Also ich werd noch wirklich verrückt mit diesem %//%/$&$ Icon; ja es wird jetzt korrekt ausgewählt, aber warum wird es zusammengequetscht dargestellt?
<ftui-grid-tile row="1" col="2" height="3" width="5">
<ftui-weather size="7" icon-set="kleinklimaFHEM" provider="proplantaICON" path="../images/default/weather/" [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>
</ftui-grid-tile>
Attribute wie "width" oder "height" haben faktisch keine Auswirkungen.
Das tatsächliche Image als Datei geöffnet ist selbstverständlich korrekt.
Und wie sieht's aus, wenn Du mal ein <ftui-cell></ftui-cell> drum machst?
Das ändert leider gar nichts.
Ich habe es bei mir mal gerade eingebaut, da ist das Icon auch gequetscht, verschiedene Größen, column, cell und row brachten keine Änderung, keine Ahnung warum.
Du kannst in der icon.component.css diesen Eintrag
img {
width: var(--icon-width, 2.5em);
height: var(--icon-height, 2.5em);
}
in diesen ändern:
img {
width: var(--icon-width, 2.5em);
}
Da sieht es wieder rund aus.
Browsercache leeren!
Ist nach einem Update wieder weg!
oder in einer user.css definieren.
Da haut irgendein Format nicht hin...
muss sich setstate anschauen...
edit:
schaut mal nach der H,B vom png size. diese sind nicht gleich groß. Breiter wie Höher...
Deswegen wird es zusammengequetscht....
@setstate
Ich denke, hier müsste man für das kleinklimaFHEM iconset die Höhe raus nehmen oder anders behandeln im icon-modul...
lg
@mr_petz und @LuGu,
vielen Dank für den Tipp mit dem ftui-cell für meinen Apothekennotdienst, da bin ich gestern Abend nicht mehr draufgekommen. Ich hab auch mal geschaut, bin bislang sogar ohne ftui-cell ausgekommen.
Gruß Markus
@StephanFHEM
Ich habe am timerset noch paar Änderungen vorgenommen und einen "Fehler behoben".
Bitte aktualisiere deine Version dass es nicht zum falschen setzen der Werte kommt. :)
LG mr_petz
Zitat von: mr_petz am 09 November 2021, 18:55:14
@setstate
Ich denke, hier müsste man für das kleinklimaFHEM iconset die Höhe raus nehmen oder anders behandeln im icon-modul...
lg
Ich warte dann einfach auf ein Update von professioneller Seite.
Beruhigend zu wissen, dass es nicht an meiner Formatierung liegt.
Ursprünglich habt Ihr vermutlich den Code auf quadratische Bilddateien ausgelegt und die kleinklima Bildchen erfüllen nicht alle diese Voraussetzung, oder ?
Zitat von: Dracolein am 10 November 2021, 08:17:12
Ich warte dann einfach auf ein Update von professioneller Seite.
Beruhigend zu wissen, dass es nicht an meiner Formatierung liegt.
Ursprünglich habt Ihr vermutlich den Code auf quadratische Bilddateien ausgelegt und die kleinklima Bildchen erfüllen nicht alle diese Voraussetzung, oder ?
@Dracolein
Ich gebe dir mal ein "unprofessionelles Update" ;D (Spass) bis setstate das gefixt hat.
Füge einfach das in deine Definitionen von <ftui-weather> mit ein und die png´s sind nicht mehr zusammengequetscht.
style="--icon-height: 0em,0em"
oder legst eine user.css an mit folgenden Inhalt an:
ftui-weather{
--icon-height: 1;
}
und bindest sie so im <head> mit ein:
<link href="themes/user.css" rel="stylesheet">
Aber das ist nur ein Hinweis. Du kannst natürlich auch auf das Update warten...
LG mr_petz
Zitat von: mr_petz am 10 November 2021, 10:58:27
Füge einfach das in deine Definitionen von <ftui-weather> mit ein und die png´s sind nicht mehr zusammengequetscht.
style="--icon-height: 0em,0em"
Trotz geleertem Browsercache & Browserneustart ändert das nichts.
<ftui-weather style="--icon-height: 0em,0em" size="7" icon-set="kleinklimaFHEM" provider="proplantaICON" path="../images/default/weather/" [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>
Mmhh.
Ich habe hier die aktuelle Version und mit FF,Chrome und Edge getestet.
Geht bei mir in Chrome auch ohne Browsercache leeren...
Was benutzt du für ein Browser?
ZitatVersion 74.0.3729.157 (Offizieller Build) Built on Raspbian , running on Raspbian 10 (32-Bit)
Ich habe Chrome Version 95.0.4638.69 (Offizieller Build) (64-Bit).
Musst du dafür vielleicht updaten...?
Ich hab den Raspi seit Indienststellung vor 2 Jahren bzgl. des Betriebssystems inkl Browser nie wieder angefasst, vermutlich wirst Du recht behalten.
Muss mich mal schlau machen, wie ich Updates einspiele
Ein herzerfrischendes Moin vom achtern Diek vorweg
Kann mir Jemand sagen, was ich falsch mache wenn ich je nach dummy (stae) verschiedene Images anzeigen lassen will?
<ftui-image [src] = "SmokeDetector_ResetButton | map('armed:./images/icoSmokeDetectorResetArmed.gif, stdby:./images/icoSmokeDetectorResetStdby.gif, resetting:./images/icoSmokeDetectorResetResetting.gif, silent:')">
</ftui-image>
Der hier funktioniert:
<ftui-image src = "./images/icoSmokeDetectorResetArmed.gif">
</ftui-image>
Danke
Nachtrag
Ein kleines Zeichen ` für den Code aber ein großes Zeichen für den Erfolg:
<ftui-image [src] = "SmokeDetector_ResetButton | map('armed:`./images/icoSmokeDetectorResetArmed.gif`, stdby:`./images/icoSmokeDetectorResetStdby.gif`, resetting:`./images/icoSmokeDetectorResetResetting.gif`, silent:')"></ftui-image>
Gruß
Sailor
Zitat von: mr_petz am 10 November 2021, 14:28:02
Musst du dafür vielleicht updaten...?
Update Raspbian vollständig durchgeführt inkl. neuestem chromium... problem solved.
Danke Dir.
Zitat von: Dracolein am 10 November 2021, 16:48:06
Update Raspbian vollständig durchgeführt inkl. neuestem chromium... problem solved.
Danke Dir.
Immer wieder gern...
Soll heissen dass der Tip mit dem style jetzt funzt? Dann ist ja erstmal gut :).
Denke daran, wenn setstate das jetzt in irgendeiner Form abändert, sieht es dann vielleicht wieder komisch aus...
Kannst hier gern berichten ob es jetzt Verhaltensänderungen im ftui3 gibt.
Ist ja schon ein Sprung von v.74 zur aktuellen Version....
Moin nochmal von der FTUI-Front,
heute morgen wird mir browserübergreifend anstelle des WeatherIcons ein "N/A" angezeigt.
Der aktuelle Wert des Proplanta-Device-Readings "weatherIcon" lautet:
https://www.proplanta.de/wetterdaten/images/symbole/n12.gif
P.S.:
Irgendwelche Änderungen / Auffälligkeiten durch meinen gestrigen Versionssprung kann ich auf Anhieb nicht feststellen.
Hi, HAZE_NIGHT (n12) gibt es nicht als mapping zum haze_night.png für kleinklimaFHEM in der weather.map.js.
haze_night.png icon ist in der map FOGGY_NIGHT (n13).
Dafür gibt es aber kein foggy_night.png icon von kleinklima?
Es müsste also HAZE_NIGHT (n12) und FOGGY_NIGHT(n13) auf haze_night.png zielen...
Es sei denn es gibt ein foggy_night.png.
Darum muss sich aber Risiko oder setstate kümmern...
LG mr_petz
EDIT:
Kannst auch hier deinen "Fehler" mit dem mapping rein schreiben:
[FTUI3ß] Andere Wettericons (https://forum.fhem.de/index.php/topic,117473.0.html)
Ein herzerfrischendes Moin vom achtern Diek vorweg!
Ich habe eine Frage bei der Darstellung von verschiedenen Images übereinander.
Ich möchte über ein Image von einem Grundriss einzelne Images von diversen Icons und anderen Images legen.
Bisher war es mir nur möglich diese untereinander oder nebeneinander zu legen.
Gibt es eine Möglichkeit die absoluten Koordinaten der Images/Icons anzugeben so dass dieser ggf, vorhandene Icons/Images ignoriert und diese darüber legt?
Das einbinden des vorhandenen Floorplans mittels <object> ist leider nicht von Erfolg gekrönt, da dort zwar das Hintergrundbild übertragen wird aber nicht die Bilder der Icons.
Danke für Eure Hilfe
Gruß
Sailor
Zitat von: Sailor am 11 November 2021, 09:49:43
Gibt es eine Möglichkeit die absoluten Koordinaten der Images/Icons anzugeben so dass dieser ggf, vorhandene Icons/Images ignoriert und diese darüber legt?
Ich hänge meine Anfrage dazu auch nochmal dran, da ich genau das Gleiche für z.B. simple Textobjekte bräuchte, welche sich pixelgenau innerhalb einer ftui-Zelle über ein Bild positionieren lassen können.
Dafür ist eine kleine Style Änderung bei Image und Icon nötig. Mache ich fertig und poste dann ein Beispiel.
Zitat von: setstate am 11 November 2021, 10:07:54
Dafür ist eine kleine Style Änderung bei Image und Icon nötig. Mache ich fertig und poste dann ein Beispiel.
Du bist und bleibst der Beste!
;D
Danke!
Gruß
Sailor
Darf ich nochmal auf diesen Bug(?) hinweisen: https://forum.fhem.de/index.php/topic,115259.msg1185206.html#msg1185206
Oder ist das nur bei mir so?
Zitat von: grossmaggul am 11 November 2021, 13:28:57
Darf ich nochmal auf diesen Bug(?) hinweisen: https://forum.fhem.de/index.php/topic,115259.msg1185206.html#msg1185206
Oder ist das nur bei mir so?
Ich hatte auch das Phänomen, dass 2 der 4 Charts seit einigen Wochen nichts mehr anzeigen obwohl Daten vorhanden sind und sie vorher funktioniert haben.
Gruß
Sailor
Nachtrag:Mit dem genaueren hinsehen ist mir der Fehler aufgefallen... Aus type="lines" musste type="line" werden und schon waren die Charts wieder da.
Typisch... Kaum macht man es richtig, funktioniert es!
Hallo zusammen.
Mit
<ftui-tab view="{{room}}" >
<ftui-icon ...
kann ich bei Klick auf ein Icon einen View (Raum) anspringen.
In diesem Raum habe ich per Swiper verschiedene Ansichten "Heizung", Beleuchtung",..
Diese kann ich innerhalb des Raums anspringen
<ftui-icon name="lightbulb-o" onclick="az_1.value = 'az_1_1'"></ftui-icon>
Tiptop soweit! (und noch einmal vielen Dank für die Hilfestellungen!)
Jetzt die nächste Herausforderung:
Gibt es eine Möglichkeit, bei Klick direkt in einen View/Raum *und* in eine Swiper Ansicht zu springen?
Also zB
<ftui-tab view="{{room}}" id="{{room}}.value = 'xx'">
(nur ein Beispiel, nein, so einfach geht es nicht..)
Danke und Gruss
Ralph
ZitatIch hatte auch das Phänomen
Wieso auch, ich hatte das Phänomen nicht, die Charts werden korrekt angezeigt, aber die Fehlermeldung kommt bei jedem Site reload und zwar drei Stück, für jede Chart eine.
Vielleicht hat es auch was damit zu tun, daß ich die über content aufrufe.
Aufruf
<!-- Chart Thermostat -->
<ftui-content file="content/heizung_charts.html" titel="Thermostat"
y_label="Temperatur" label1="Ist" label2="Soll"
geraet="wz.thermostat" ist="temperature" soll="desiredTemperature"
farbe_ist="#d63056" hg-farbe_ist="#d6305650" farbe_soll="#d67054" hg-farbe_soll="#d6407650"
punkt_radius="0">
</ftui-content>Und content file:
<ftui-chart title="{{titel}}" y-label="{{y_label}}" y1-label="{{y1_label}}" unit="week">
<ftui-chart-data fill label="{{label1}}"
background-color="{{hg-farbe_ist}}"
color="{{farbe_ist}}"
log="logdb"
file="history"
spec="{{geraet}}:{{ist}}"
point-radius="{{punkt_radius}}">
</ftui-chart-data>
<ftui-chart-data fill label="{{label2}}"
background-color="{{hg-farbe_soll}}"
color="{{farbe_soll}}"
log="logdb"
file="history"
spec="{{geraet}}:{{soll}}"
point-radius="{{punkt_radius}}">
</ftui-chart-data>
<ftui-chart-data fill label="{{label3}}"
background-color="{{hg-farbe_ventil}}"
color="{{farbe_ventil}}"
log="logdb"
file="history"
spec="{{geraet}}:{{ventil}}"
y-axis-id="y1"
point-radius="{{punkt_radius}}">
</ftui-chart-data>
<ftui-chart-controls units="day,week,month"></ftui-chart-controls>
</ftui-chart>
'Nabend,
die Übergabe einer URL als Parameter scheint nicht zu funktionieren.. ?
geht:
<ftui-button class="size-3" @click="javascript:window.location.href='http://ambiente-schreibtisch.xxx.yy';">zu WLED</ftui-button>
geht nicht:
@click="javascript:window.location.href='{{url}}';"
wobei die URL
so definiert wurde
<ftui-content file="firehd8/tile-1x9-WLED.html"
device="MQTT2_WLED_AZ_Schreibtisch"
name="Schreibtisch"
url="'http://ambiente-schreibtisch.xx.yy''">
</ftui-content>
Hinweis / evtl relevant: der ftui-button steckt innerhalb des ftui-content noch in einem Popup.
Bug oder ist die Syntax fehlerhaft?
Vielen Dank vorab und Grüße
Ralph
Zitat von: Sailor am 11 November 2021, 09:49:43
Ein herzerfrischendes Moin vom achtern Diek vorweg!
Ich habe eine Frage bei der Darstellung von verschiedenen Images übereinander.
Ich möchte über ein Image von einem Grundriss einzelne Images von diversen Icons und anderen Images legen.
Bisher war es mir nur möglich diese untereinander oder nebeneinander zu legen.
Gibt es eine Möglichkeit die absoluten Koordinaten der Images/Icons anzugeben so dass dieser ggf, vorhandene Icons/Images ignoriert und diese darüber legt?
Das einbinden des vorhandenen Floorplans mittels <object> ist leider nicht von Erfolg gekrönt, da dort zwar das Hintergrundbild übertragen wird aber nicht die Bilder der Icons.
Danke für Eure Hilfe
Gruß
Sailor
Das geht jetzt. Das Icon/Text muss innerhalb eines Images liegen:
<ftui-image>
<ftui-icon left="60%" top="50%"></ftui-icon>
</ftui-image>
<ftui-grid-tile row="1" col="1" height="1" width="1">
<header>RELATIVE</header>
<ftui-image src="https://pluspng.com/img-png/germany-png-file-map-germany-with-coats-of-arms-png-1971.png">
<ftui-icon name="plane" color="red" left="60%" top="50%"></ftui-icon>
<ftui-label text="A123" color="red" left="60%" top="calc(50% + 2em)"></ftui-label>
<ftui-icon name="plane" color="black" left="20%" top="50%"></ftui-icon>
<ftui-label text="A456" color="black" left="20%" top="calc(50% + 2em)"></ftui-label>
<ftui-icon name="plane" color="white" left="50%" top="70%"></ftui-icon>
<ftui-label text="A789" color="white" left="50%" top="calc(70% + 2em)"></ftui-label>
</ftui-image>
</ftui-grid-tile>
Bestätige (für Text): klappt super. Dankeschön
Zitat von: setstate am 11 November 2021, 20:45:48
Das geht jetzt. Das Icon/Text muss innerhalb eines Images liegen:
Und Image in Image?
<ftui-image src = "./images/GroundPlan.png"
height = "50%"
top = "5%"
left = "5%">
<ftui-image [src] = "GR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"
height = "10%"
width = "10%"
top = "50%"
left = "50%">
</ftui-image>
</ftui-image>
Gruß
Sailor
@Sailor
Ich habe auch mal versucht das nachzustellen.
Image in Image geht zur Zeit bei mir nur so wie hier im Beispiel:
<ftui-grid-tile row="5" col="7" height="auto" width="4" shape="round">
<header>Test</header>
<ftui-image src="https://pluspng.com/img-png/germany-png-file-map-germany-with-coats-of-arms-png-1971.png">
<ftui-image style="position:absolute;left:79%;top:55%" width="20px" height="20px" src="https://pluspng.com/img-png/star-png-star-icon-1600.png"></ftui-image>
</ftui-image>
</ftui-grid-tile>
oder so:
<ftui-grid-tile row="5" col="7" height="auto" width="4" shape="round">
<header>TEST</header>
<ftui-image src="https://pluspng.com/img-png/germany-png-file-map-germany-with-coats-of-arms-png-1971.png"></ftui-image>
<ftui-image style="position:absolute;top:55%;left:79%" width="20px" height="20px" src="https://pluspng.com/img-png/star-png-star-icon-1600.png"></ftui-image>
</ftui-grid-tile>
Edit Bild angehangen...
Hallo zusammen,
auch auf die Gefahr hin dass ich nerve... noch eine Frage
gibt es auch innerhalb eines beliebigen Grid Elements (Row, Column, Cell,..) eine Möglichkeit mit Variablen zu arbeiten, die dann in den eingeschlossenen Elementen genutzt werden können ?
(Ausnahme: content, dort funktioniert das bereits prima) ?
also zB
<ftui-cell device="meindevice" ....>
<ftui-label [text]="{meindevice}...>
Vielen Dank und Grüße
Ralph.
@megadodopublications: Würdest Du bitte Deinen Code in Codetags (oben in der Toolbar das #) einschließen, dann werden Deine Postings besser lesbar.
Allgemeine Frage, sagt mal beeinflussen (=behindern!) die allgemein nutzbaren Attribute "event-on-update-reading" bzw. "event-min-interval" auch die Aktualisierung von Readings?
Genannte Attribute nutze ich zur Steuerung von FileLogs, aber meine mir einzubilden, dass dadurch auch die dargestellten Readings in FTUI erheblich seltener aktualisiert werden?
Zitat von: Dracolein am 12 November 2021, 17:20:17
Allgemeine Frage, sagt mal beeinflussen (=behindern!) die allgemein nutzbaren Attribute "event-on-update-reading" bzw. "event-min-interval" auch die Aktualisierung von Readings?
Genannte Attribute nutze ich zur Steuerung von FileLogs, aber meine mir einzubilden, dass dadurch auch die dargestellten Readings in FTUI erheblich seltener aktualisiert werden?
Hallo Dracolein, die Attribute beeinflussen die Aktualisierung deines readings eigentlich nicht, hier geht es vielmehr um das event welches ausgelöst wird. Wenn du z.B. ein doif hast und ein reading abfragst und du hast kein event-* gesetzt, dann wird jedes mal das doif getriggert wenn sich das reading aktualisiert, auch wenn das reading sich nicht geändert hat. Wenn du jetzt z.B. event-on-change-reading setzt, wird das doif nur noch getriggert wenn sich das reading vom Wert ändert. Das event-on-update-reading ist ja eigentlich der Standard in FHEM, das musst du eigentlich nicht extra setzen, das brauchst du nur in Kombination mit event-on-change-reading.
Hoffe mich korrigiert einer falls ich hier irgendwo was falsches geschrieben haben sollte ;)
Zitat von: meier81 am 12 November 2021, 17:39:59
Hallo Dracolein, die Attribute beeinflussen die Aktualisierung deines readings eigentlich nicht, [...]
Hoffe mich korrigiert einer falls ich hier irgendwo was falsches geschrieben haben sollte ;)
Danke, das fett markierte wollte ich wissen. Die Funktionalitäten der genannten Attribs sind mir bekannt; ein möglicher Einfluss auf die Aktualisierungsintervalle in der FTUI-Darstellung hingegen nicht.
Zitat von: grossmaggul am 12 November 2021, 17:17:43
@megadodopublications: Würdest Du bitte Deinen Code in Codetags (oben in der Toolbar das #) einschließen, dann werden Deine Postings besser lesbar.
klar doch.
Zitat von: megadodopublications am 11 November 2021, 20:44:55
geht nicht:
@click="javascript:window.location.href='{{url}}';"
wobei die URL
so definiert wurde
<ftui-content file="firehd8/tile-1x9-WLED.html"
device="MQTT2_WLED_AZ_Schreibtisch"
name="Schreibtisch"
url="'http://ambiente-schreibtisch.xx.yy''">
</ftui-content>
ich antworte mir mal selber, kann ggf noch jemand mal brauchen. So geht's
So gehts
<ftui-content file="firehd8/tile-1x9-WLED.html"
device="MQTT2_WLED_AZ_Schreibtisch"
name="Schreibtisch"
url="javascript:window.location.href='http://ambiente-schreibtisch.xx.xx';">
</ftui-content>[/quote]
und dann
<ftui-button
class="size-3"
@click={{url}}>
zu WLED
</ftui-button>
VG
Ralph
Ich hätte da noch eine Optik-Anfrage, und zwar die Möglichkeit der "tiefgestellten Schrift" der dargestellten Einheit/Dimension bei Verwendung von unit="€" als Beispiel.
Sowas:
21°C
Meinst du so?:
<ftui-label [text]="Wetter_ProPlanta:fc0_temp06" class="size-7 thin"><span class="size-1" slot="unit">°C</span></ftui-label>
oder:
<ftui-label [text]="Wetter_ProPlanta:fc0_temp06" class="size-7 thin"><span class="size-1" slot="end">°C</span></ftui-label>
lg
Edit Code angepasst...
Zitat von: megadodopublications am 12 November 2021, 16:22:32
Hallo zusammen,
auch auf die Gefahr hin dass ich nerve... noch eine Frage
gibt es auch innerhalb eines beliebigen Grid Elements (Row, Column, Cell,..) eine Möglichkeit mit Variablen zu arbeiten, die dann in den eingeschlossenen Elementen genutzt werden können ?
(Ausnahme: content, dort funktioniert das bereits prima) ?
also zB
<ftui-cell device="meindevice" ....>
<ftui-label [text]="{meindevice}...>
Vielen Dank und Grüße
Ralph.
Nein, das geht nicht.
Gibts eine Möglichkeit das "Knob"-Element als reines Anzeigeelement zu nutzen in Form eines runden Kuchens (gibts ja schon in den Beispielen --> 360°), womit man den Wert eines Readings zwischen 0% und 100% darstellen kann?
(Nachteil am Knob: ich müsste die Gesamtgröße reduzieren können, was damit leider nicht zu klappen scheint)
Oder gibts eventuell eine gänzliche Alternative?
Beispiel als Bild im Anhang
Zitat von: setstate am 11 November 2021, 20:45:48
Das geht jetzt. Das Icon/Text muss innerhalb eines Images liegen:
<ftui-image>
<ftui-icon left="60%" top="50%"></ftui-icon>
</ftui-image>
[ ..]
Hi, vielen Dank für die direkte Integration und überhaupt der Version 3 insgesamt!
Das macht den Code bestimmt übersichtlicher, ich hatte das nämlich vorher zB. so gelöst:
<ftui-icon [name]="..." [color]="..."
style="position:absolute; top:60px; left:560px;" >
</ftui-icon>Den Floorplan habe ich als Hintergrundbild zum grid-tile definiert:
<ftui-grid-tile row="1" col="6" height="2" width="8" shape="round"
style="background:#333333 url('../images/Zentrale/DG.png') no-repeat; background-position:120px -60px; background-size:280px;>[\code]
Das Ergebnis sieht bei mir so aus wie im Anhang ;-)
Vorher habe ich immer nur FLOORPLAN genutzt und FTUI2 übersprungen, aber das Circle-Menu hat mich zum Umstieg bewogen und ich habe es noch nicht bereut :)
Sowas kann man aktuell mit dem ftui-knob realisieren
<ftui-knob [(value)]="dummy1" type="scale" start-angle="0" end-angle="359" ticks="60" stroke-width="10" width="120" color="danger" value-size="2em" unit="%" has-value-text></ftui-knob>
Zitat von: setstate am 13 November 2021, 12:44:24
Sowas kann man aktuell mit dem ftui-knob realisieren
<ftui-knob [(value)]="dummy1" type="scale" start-angle="0" end-angle="359" ticks="60" stroke-width="10" width="120" color="danger" value-size="2em" unit="%" has-value-text></ftui-knob>
Diverse Parameter haben mir weitergeholfen, danke. Jetzt scheitere ich an der perfekten Ausrichtung, anbei Code & Foto (hatte alles durchprobiert mit/ohne cell / Column / width / height...)
Geht da noch etwas? Es wirkt, als sei das Element im unsichtbaren Bereich größer...
<!-- Energie -->
<ftui-grid-tile row="4" col="9" height="5" width="4">
<header>PV-Anlage / Strombedarf</header>
<ftui-row height="30px">
<ftui-icon path="fa-svg/solid" name="solar-panel" size="-1" color="orange"></ftui-icon>
<ftui-label [text]="SMATripower6:SPOT_PACTOT | fix(0)" class="size-4"
[color]="SMATripower6:SPOT_PACTOT | step('1: green, 1500: orange, 3500: yellow')">
<span class="size-0" slot="unit">W</span></ftui-label>
<ftui-label>Autarkie:</ftui-label>
</ftui-row>
<ftui-row height="40px">
<ftui-icon path="../images/openautomation" name="control_arrow_down_right" size="-2" color="red"></ftui-icon>
<ftui-label [text]="HomeManager:SMAEM3011845853_Bezug_Wirkleistung | fix(0)" class="size-4"
[color]="HomeManager:SMAEM3011845853_Bezug_Wirkleistung | step('1: light, 1500: orange, 3500: red')">
<span class="size-0" slot="unit">W</span></ftui-label>
<ftui-knob [value]="PVVorschau:Current_AutarkyRate | part(1)" start-angle="-90" end-angle="269" width="50" color="green" stroke-width="6"></ftui-knob>
</ftui-row>
<ftui-row height="30px">
<ftui-icon path="../images/openautomation" name="control_arrow_up_right" size="-2" color="green"></ftui-icon>
<ftui-label [text]="HomeManager:SMAEM3011845853_Einspeisung_Wirkleistung | fix(0)" class="size-4"
[color]="HomeManager:SMAEM3011845853_Einspeisung_Wirkleistung | step('1: green, 500: green, 1000: green')">
<span class="size-0" slot="unit">W</span></ftui-label>
<ftui-label>Eigenverbr.:</ftui-label>
</ftui-row>
<ftui-row height="40px">
<ftui-icon path="fa-svg/solid" name="home" size="-1" color="light"></ftui-icon>
<ftui-label [text]="Gesamtverbrauch:state | fix(0)" class="size-4"
[color]="Gesamtverbrauch:state | step('1: light, 500: light, 1000: light')">
<span class="size-0" slot="unit">W</span></ftui-label>
<ftui-knob [value]="PVVorschau:Current_SelfConsumptionRate | part(1)" start-angle="-90" end-angle="269" width="50" color="green" stroke-width="6"></ftui-knob>
</ftui-row>
<ftui-chart height="120px" width="100%" popup-target="pvleistung">
<ftui-chart-data log="Log_PVLeistung" spec="4:SMATripower6.SPOT_PACTOT"
fill background-color="#ffcc0050" color="#ffcc00" point-radius="0"></ftui-chart-data>
<ftui-chart-data log="Log_PVLeistung" spec="4:HomeManager.SMAEM3011845853_Einspeisung_Wirkleistung"
fill background-color="#00cc3350" color="#00cc33" point-radius="0"></ftui-chart-data>
</ftui-chart>
</ftui-grid-tile>
du musst den offset-y verändern. Der liegt default bei offset-y="20", damit die Standard-Nachuntenoffen-Halbkreise mittig wirken. Wenn man einen Vollkreis macht, sollte man offset-y="0" setzen. Das ist in den Knob-Examples auch zu sehen.
Hi Mr Petz
Zitat von: mr_petz am 12 November 2021, 12:40:30
@Sailor
Ich habe auch mal versucht das nachzustellen.
Image in Image geht zur Zeit bei mir nur so wie hier im Beispiel:
Brillant! Danke!
Gruß
Sailor
Image in image sollte jetzt auch wir Icon funktionieren
Moin setstate
Zitat von: setstate am 13 November 2021, 17:55:08
Image in image sollte jetzt auch wir Icon funktionieren
Klappt fast...
Folgender Code
<ftui-image src = "./images/GroundPlan.png"
height = "100%"
top = "5%"
left = "5%">
<ftui-image left="45%" top="34%" width="10%" height="08%" [src]="GR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
<ftui-image left="10%" top="12%" width="10%" height="08%" [src]="BR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
<ftui-image left="48%" top="17%" width="10%" height="08%" [src]="CE_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
<ftui-image left="48%" top="06%" width="10%" height="08%" [src]="CW_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
<ftui-image left="40%" top="49%" width="10%" height="08%" [src]="CH_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
<ftui-image left="77%" top="57%" width="10%" height="08%" [src]="CR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
<ftui-image left="28%" top="12%" width="10%" height="08%" [src]="HW_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
<ftui-image left="12%" top="36%" width="10%" height="08%" [src]="TR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
<ftui-image left="11%" top="52%" width="10%" height="08%" [src]="TR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`, off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
</ftui-image>
Sorgt fuer folgendes Bild (Siehe Anhang.
Mann kann erkennen, dass der Rauchmelder von links nach rechts immer kleiner wird. :o
Gruß
Sailor
Frage zur Performanceoptimierung, da meine index.html inzwischen fast die 2.000 Zeilen sprengt und die Ladezeiten am Raspi wieder deutlich länger geworden sind (wobei nach dem Laden immerhin alles sehr performant läuft!), würde es helfen, wenn ich diverse Codeschnipsel in externe html-Seiten mittels <ftui-content file="dingsbums.html"></ftui-content> auslagere?
Falls ja, gehe ich davon aus, dass diese externe html-Datei ausschließlich und 1:1 den ausgeschnittenen Codeschnipsel enthalten darf, und nichts anderes, richtig?
Danke für Eure Meinung.
Moin Draco
Zitat von: Dracolein am 15 November 2021, 08:05:53
Frage zur Performanceoptimierung, da meine index.html inzwischen fast die 2.000 Zeilen sprengt und die Ladezeiten am Raspi wieder deutlich länger geworden sind (wobei nach dem Laden immerhin alles sehr performant läuft!), würde es helfen, wenn ich diverse Codeschnipsel in externe html-Seiten mittels <ftui-content file="dingsbums.html"></ftui-content> auslagere?
Falls ja, gehe ich davon aus, dass diese externe html-Datei ausschließlich und 1:1 den ausgeschnittenen Codeschnipsel enthalten darf, und nichts anderes, richtig?
Danke für Eure Meinung.
Aus Gründen der Übersichtlichkeit habe ich ganz intensiv Gebrauch von <ftui-content gemacht.
Die Performance verändert sich meiner Erfahrung nach nicht. Weder zum Positiven noch zum Negativen.
Allerdings hat die Verwendung der <ftui-content - Dateien einen kleinen Nachteil während der Entwicklungsphase:
Während bei einer reinen index.html - Geschichte die F5 - Taste des Browsers reicht um alles neu zu laden, muss man bei der Implementierung von <ftui-content - Verweisen vorher den gesamten Browser Cache leeren, da diese Seiten sonst aus dem Cache geholt werden und noch den alten Stand haben.
Dennoch bin ich von der Verwendung der <ftui-content - Verweise überzeugt.
Wenn du es gaaaanz formell machen willst (wie ich) dann kopierst du vor jeder html - Datei den Kommentar - Kopf mit den Copyright - Bestimmungen aus der index.html.
Gruß
Sailor
Wie läuft das technisch im Hintergrund dann ab? Wird der Inhalt der html-Seiten mit ausgelagertem Content auch sofort beim Laden der index.html mitgeladen, oder erst bei Aufruf des Elements?
@setstate:
Habe im segmentbutton das Problem beim Binding, dass er erst nach einem Klick/einer Aktion auf der Seite den korrekten Index bzw. Treffer findet. Es wird zwar beim onConnected das update getriggert, aber zu dem Zeitpunkt ist this.value noch leer. Erst nach der Aktion ist der Wert dann gefüllt und die Segmente "springen" an die richtige Stelle zurück? Das ist natürlich etwas doof, wenn man sich auf den Homestatus verlassen möchte :( :D
Cheers,
h3ll
Hallo Zuammen,
ich versuche mich gerade im Umbau von V2 auf V3.
Aktuell scheitere ich bei Anzeigen für Readings aus Geräten, sei es "Meter" oder "Knob".
Was mache ich falsch?
<ftui-grid-tile row="7" col="10" height="4" width="7">
<ftui-meter [value]="Heizung:ENERGY_Power" min="0" max="1000"> </ftui-meter>
<ftui-label [text]="Heizung:ENERGY_Power" size="2"></ftui-label>
<ftui-knob [value]="Heizung:ENERGY_Power"></ftui-knob>
Das Meter schießt - mit Range bis 1000 - über das Tile hinaus, obwohl der Wert bei 335 liegt.
Der Knob bringt gar nichts zur Anzeige.
:-\
Hi.
Beim Knob musst du
min="0" max="1000"
mit hinzufügen, weil der im Standard "nur" von 0-100 geht. Woher soll er wissen das dein Reading bis 1000 geht?;)
Der meter scheint allgemein "nur" von 0 bis 100 zugehen und keine definierbaren min/max Werte zu besitzen... Alles andere läuft über...
LG
@h3llsp4wn
Hast du den segmentedbutton auf der index/start-seite?
Ich frage deswegen, weil er bei mir nicht auf der index-seite drauf ist und erst nachdem ich oder fhem das Reading upgedatet haben wird der richtige Reiter gesetzt...
Ist er auf der Indexseite (also beim initialisieren/laden) wird er gleich richtig gesetzt...
LG
@mr_petz:
Ich habe die menu.html aus dem examples Ordner aufgebohrt - dort wo das Menü auffährt, habe ich über den Buttons noch den
segmentedbutton. Dieser dient zur Anzeige und Umschaltung des "homestatus". Es würde wahrscheinlich ausreichen, wenn ich das Update triggern könnte, wenn das Menü angeklickt wird. Da habe ich mich jetzt noch nicht reingefuchst, um da ggf. einen onclick o.ä. auszulösen.
Wenn ich von dort aus beispielsweise eine Unterseite für die Heizung aufrufe, sehe ich auch, dass dort die segementedbuttons für die Heizprogramme nicht aktuell sind, aber dann beim klick auf den Menüpunkt (Seite wird ja sofort eingeblendet) - sehe ich die Animation, die den Fokus aus das korrekte Programm legt. Damit kann ich leben.
Beim Homestatus wird die Funktion wohl zu früh geladen - ich denke das Event über den Klick auf das Menü auszulösen, wäre wohl die clevere Variante.
D.h. die kurze Antwort ist - ja - der eine segmentedbutton ist quasi in die Startseite integriert.
Anmerkung dazu: Also die Icon-Farbe ist korrekt - nur die Hintergrundfarbe, die über die translateX transformation durchgeführt wird - die steht falsch und wird erst nach einer Aktion "zurechtgerückt".
Zitat von: h3llsp4wn am 15 November 2021, 22:48:31
....
Wenn ich von dort aus beispielsweise eine Unterseite für die Heizung aufrufe, sehe ich auch, dass dort die segementedbuttons für die Heizprogramme nicht aktuell sind, aber dann beim klick auf den Menüpunkt (Seite wird ja sofort eingeblendet) - sehe ich die Animation, die den Fokus aus das korrekte Programm legt. Damit kann ich leben.
Bei mir ist das genauso auf der Heizungspage.
Zitat
Beim Homestatus wird die Funktion wohl zu früh geladen - ich denke das Event über den Klick auf das Menü auszulösen, wäre wohl die clevere Variante.
Diese Funktion sollte setstate mit integrieren. Ob das geht weiss nur er...
Er hat das Initialisieren glaube bei onConnected...
Zitat
D.h. die kurze Antwort ist - ja - der eine segmentedbutton ist quasi in die Startseite integriert.
Anmerkung dazu: Also die Icon-Farbe ist korrekt - nur die Hintergrundfarbe, die über die translateX transformation durchgeführt wird - die steht falsch und wird erst nach einer Aktion "zurechtgerückt".
Das sollte aber gehen.
Du kannst hier Mal deine Definition posten, um zu sehen ob alles korrekt ist...
Lg
Ok, anbei die Definition:
<ftui-segment [(value)]="homeStatus" style="margin-top: 40px;">
<ftui-segment-button value="home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="night">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="away">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="holiday">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Ich habe noch zwei Dinge getan:
1. Roll-Back auf einen älteren Stand vom FTUI - Problem behoben. Bringt mich aber nicht in der Weiterentwicklung nach vorne, da ich auch noch das eine oder andere dazuentwickle.
2. onConnected bzw this.update extern getriggert - hat aber nicht den gewünschten Effekt, da müsste ich jetzt wirklich weiter debuggen und ich glaube es macht wenig Sinn, wenn ich da lange an der Stelle Suche, die für setstate wahrscheinlich leicht zu finden ist.
Danke für die Unterstützung!
Cheers,
h3ll
Nachtrag:
Die Änderung kam wohl mit dem Change 'tab segment examples' rein, mit einer Version der segment.component.js vor dem 04.10.2021 tritt der Fehler nicht auf.
Die Farben vom Icon solltest du mit mappen hinbekommen...
Bsp. Von meiner Heizungspage:
<ftui-icon
[value]="MQTT2_ebusd:Mode_hcmode1_value"
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('on|set_on:an_mode')"
[color]="MQTT2_ebusd:Mode_hcmode1_value | map('on:red')">
</ftui-icon>
Edit. Ignoriere das einfach. Ich habe nicht richtig gelesen... :o
Lg
Designerfrage:
Wenn ich zwei <ftui-label></ftui-label> Elemente mit Text untereinander definiere, wird zwischen den Elementen Platz gelassen entsprechend der freien Gesamthöhe des übergeordneten Elements (cell, column, grid-tile...).
Gibt es eine smarte Lösung, diesen zwei Elementen beizubringen, dass sie keinen freien Platz zwischeneinander lassen sollen, ohne verhältnismäßig aufwendige Tabellenkonstrukte zu basteln?
@Dracolein
Was besseres wie das fällt mir erst mal nicht ein:
Extrembeispiel:
<ftui-cell>
<ftui-label height="35px" text="1.Zeile mit height='35px'" class="size-7 thin"></ftui-label>
<ftui-label height="28px" text="2.Zeile mit height='28px'" class="size-6 thin"></ftui-label>
<ftui-label height="22px" text="3.ZEILE MIT HEIGHT='22px'" class="size-5 thin"></ftui-label>
<ftui-label text="4.ZEILE NORMAL" class="size-4 thin"></ftui-label>
</ftui-cell>
muss aber in der cell sein, sonst rutscht alles wieder auseinander...
LG mr_petz
Zitat von: h3llsp4wn am 16 November 2021, 10:16:08
Ok, anbei die Definition:
<ftui-segment [(value)]="homeStatus" style="margin-top: 40px;">
<ftui-segment-button value="home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="night">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="away">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="holiday">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Ich habe noch zwei Dinge getan:
1. Roll-Back auf einen älteren Stand vom FTUI - Problem behoben. Bringt mich aber nicht in der Weiterentwicklung nach vorne, da ich auch noch das eine oder andere dazuentwickle.
2. onConnected bzw this.update extern getriggert - hat aber nicht den gewünschten Effekt, da müsste ich jetzt wirklich weiter debuggen und ich glaube es macht wenig Sinn, wenn ich da lange an der Stelle Suche, die für setstate wahrscheinlich leicht zu finden ist.
Danke für die Unterstützung!
Cheers,
h3ll
Nachtrag:
Die Änderung kam wohl mit dem Change 'tab segment examples' rein, mit einer Version der segment.component.js vor dem 04.10.2021 tritt der Fehler nicht auf.
Das Zusammenschieben des Menüs und die relativen Weite des Segment-Controls (100%) verursachen den Fehler. Mit einem
style="width:250px" beim Segment-Controls kann man das lösen.
Zitat von: mr_petz am 16 November 2021, 21:52:59
@Dracolein
Was besseres wie das fällt mir erst mal nicht ein:
Extrembeispiel:
<ftui-cell>
<ftui-label height="35px" text="1.Zeile mit height='35px'" class="size-7 thin"></ftui-label>
<ftui-label height="28px" text="2.Zeile mit height='28px'" class="size-6 thin"></ftui-label>
<ftui-label height="22px" text="3.ZEILE MIT HEIGHT='22px'" class="size-5 thin"></ftui-label>
<ftui-label text="4.ZEILE NORMAL" class="size-4 thin"></ftui-label>
</ftui-cell>
muss aber in der cell sein, sonst rutscht alles wieder auseinander...
LG mr_petz
Verstehe, na das sieht nach einer guten Lösung aus. Ich dachte bisher, das Cell-Element sei nur in Verbindung mit row/column sinnvoll und ich hatte weiterhin nicht auf dem Schirm, dass man einem label-Element eine Höhe zuweisen kann.
Meine HTML-Skills sind 20 Jahre alt.
Ja geil, danke, baue ich heute abend ein.
Zitat von: setstate am 16 November 2021, 22:25:16
Das Zusammenschieben des Menüs und die relativen Weite des Segment-Controls (100%) verursachen den Fehler. Mit einem
style="width:250px" beim Segment-Controls kann man das lösen.
@setstate:
Awesome! Das war's! ;)
Vielen Dank!
Zitat von: mr_petz am 15 November 2021, 21:43:36
Hi.
Beim Knob musst du
min="0" max="1000"
mit hinzufügen, weil der im Standard "nur" von 0-100 geht. Woher soll er wissen das dein Reading bis 1000 geht?;)
Der meter scheint allgemein "nur" von 0 bis 100 zugehen und keine definierbaren min/max Werte zu besitzen... Alles andere läuft über...
LG
Danke für den Tip.
Den Knob habe ich nun mit der 1000er Skalierung zur Anzeige bringen können.
Nun hatte ich weitergespielt und wieder Parameter mit eingebaut, mit denen ich vorher auch schon rumgespielt hatte, und stelle fest:
Wenn ich zum Beispiel
has-scale-text einbaue, verschwindet der Knob wieder.
Wenn ich
has-value-text einbaue, verschwindet der Knob ebenfalls aber es steht zumindest der Werte an dieser Stelle. :o
@kafi
Schau dir am besten mal die demo hier an:
https://knowthelist.github.io/ftui/www/ftui/examples/knob.html
um zu sehen was deinen Vorstellungen entspricht.
und danach das examples File:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/knob.html
da wird einiges klarer wie man den knob definiert...
LG
Edit: Falls du das optisch wie im Bildanhang vorhast, sollte deine Definition so aussehen (ist hier readonly):
<ftui-knob [value]="Heizung:ENERGY_Power" min="0" max="1000" has-scale has-arc has-scale-text readonly></ftui-knob>
und wenn du mit value haben möchtest so:
<ftui-knob [value]="Heizung:ENERGY_Power" min="0" max="1000" has-scale has-arc has-scale-text has-value-text readonly></ftui-knob>
und wenn du value mit unit haben möchtest so:
<ftui-knob [value]="Heizung:ENERGY_Power" min="0" max="1000" has-scale has-arc has-scale-text has-value-text unit="%" readonly></ftui-knob>
ps. ohne has-scale funktioniert auch kein has-scale-text
@mr_petz
Danke.
Die Links hatte ich alle schon vor meinem ersten Post mehr oder weniger intensiv durchprobiert
Ich bin nur nicht auf die Idee mit Abhängigkeiten der Parameter untereinander gekommen und habe blöderweise beim Testen mit einzelnen / den falschen Parametern angefangen.
Jetzt hauts hin! ;D
Gibt es folgende Option auch in FTUI3, um ein Datum in einen Wochentag zu wandeln ?
Zitat von: setstate am 29 März 2016, 23:15:13
Input Format ist FHEM Reading TS Format: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY
.eeee() liefert 'Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'
.eee() liefert 'Son','Mon','Die','Mit','Don','Fre','Sam'
.ee() liefert 'So','Mo','Di','Mi','Do','Fr','Sa'
Ich fand dies Beispiel via SuFu:
<ftui-label [text]="device:reading | toDate() | format('hh:mm')"></ftui-label>Aber was gebe ich bei format() an, um den Wochentag dargestellt zu bekommen?
Jup: bei ftui-clock (https://knowthelist.github.io/ftui/www/ftui/examples/clock.html) gibt es das format
eeee:
<ftui-clock format="eeee, D. MMMM YYYY" is-fhem-time></ftui-clock>ergibt
ZitatFreitag, 19. November 2021
Zitat von: Dracolein am 19 November 2021, 10:25:17Ich fand dies Beispiel via SuFu:
<ftui-label [text]="device:reading | toDate() | format('hh:mm')"></ftui-label>
Aber was gebe ich bei format() an, um den Wochentag dargestellt zu bekommen?
Versuch mal
eeee (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L221).
@setstate
Hi setstate.
Ich benutze deine letzte ftui3 Version.
Ich habe die Befürchtung, dass der step bei icon nicht richtig funktioniert.
Es geht speziell hierbei um das `.*`.
Er stept hier die Werte des Device und möchte dann z.Bsp.: 15.svg (gibt es ja nicht!)...
Bei [color] + step verhält sich das genauso.
Bei map funktioniert `.*`, aber es wird da ja nur der exakte Wert gemappt...
Bsp:
<ftui-icon
name="battery-0"
[name]="dummy | step('`.*`:battery-0, 25:battery-1, 50:battery-2, 75:battery-3, 100:battery')"
[color]="dummy | step('0:danger, 50:warning, 75: success')">
</ftui-icon>
Muss ich das anders definieren (habe hier im Thread auf die schnelle nix dazu gefunden) oder ist es ein Bug oder ein Bug bei mir selbst :D?
LG mr_petz
.* gibt es nicht bei step(). Nur numerische Werte, die mit >= verglichen werden können.
Man könnte stattdessen -99 angeben, um ganz unten anzufangen.
Hallo zusammen
Mal schauen, ob ich mit meiner Frage hier richtig bin :)
Es geht um Philips Hue Lampen. Ich habe mehrere Lampen in einer structure.
Wenn ich eine Lampe aus der structure ausschalte, möchte ich gerne nur die eingeschalteten Lampen mit einem Slider dimmen.
Jemand eine Idee, ob das mit FTUI umsetzbar ist?
Grüsse
ich nutze für meine Heizungssteuerung Buttons die die Temperatur jeweils um 0.5 Grad erhöhen oder senken
hier das Beispiel:
<ftui-button [value]="{{device}}:desired-temp" (value)="add(0.5) | {{device}}:desired-temp" states="$value" fill="">
wenn ich jetzt die Temperatur um 2 Grad erhöhen will tippe ich 4x auf den Button. Das erzeugt leider auch 4 Log-Einträge im FileLog. Besser wäre es eine Sekunde zu warten und dann den "gesammelten" set-Befehl abzusenden. Ist das irgendwie möglich?
dafür musst du debounce="400" setzen. Siehe /examples/button.html
super Danke! war mir auch irgendwie so als ob ich davon etwas gelesen habe. Aber hatte es nicht wiedergefunden
Moin zusammen,
ich beobachte derzeit, dass meine Charts im aktuell dargestellten FTUI3 nicht immer aktualisiert werden, sondern teils erst nach einem Refresh der Seite.
Hingegen aktualisieren sich die ganzen Icons und labels usw. alle ganz normal.
Woran kann das liegen? Gibts hier auch ein Parameter "interval" o.ä. ?
Zitat von: Dracolein am 23 November 2021, 11:50:40
Woran kann das liegen? Gibts hier auch ein Parameter "interval" o.ä. ?
Hast Du auch den "[update]" - Parameter eingetragen?
<ftui-chart unit="year">
<ftui-chart-data fill log="myDbLog" file="history" spec="CH_GasCalculator:CH_GasCounter_counters.A_EnergyMonthLast" [update]="CH_GasCalculator:CH_GasCounter_counters.A_EnergyMonthLast:time" color="blue" label="W /[kWh] per Month" type="line" point-radius="0"></ftui-chart-data>
<ftui-chart-data fill log="myDbLog" file="history" spec="CH_GasCalculator:CH_GasCounter_counters.A_EnergyMeter" [update]="CH_GasCalculator:CH_GasCounter_counters.A_EnergyMeter:time" color="red" label="W /[kWh] per Meter Year" type="line" point-radius="0"></ftui-chart-data>
<ftui-chart-controls units="year"></ftui-chart-controls>
</ftui-chart>
Gruß
Sailor
nein! Interessant. Hole ich gleich nach.
Kurios: oft funktionieren die Charts trotzdem problemlos
Hallo und guten Abend euch allen,
wie ist das eigentlich bezüglich der Charts, wenn ich das so richtig sehe sind die ja auf DBLog ausgelegt, ich nutze mittlerweile bei mir das Modul InfluxDBLogger und logge meine Daten in eine InfluxDB, da visualisiere ich das Ganze zur Zeit mit Grafana und binde die Grafana-Grafen dann mittels iframe in ftui3 ein.
Gibt es da eine Möglichkeit diese für InfluxDB zu erweitern?
Zitat von: setstate am 22 Oktober 2021, 23:45:37
Ich habe das fetch jetzt eingebaut. Versuche es mal ungefähr so:
<ftui-image base="http://fhem:8083/fhem/images/default/" src="black_up.png" user="fhemuser" pass="fhempass"></ftui-image>
oder so
<ftui-image src="http://fhem:8083/fhem/images/default/black_up.png" user="fhemuser" pass="fhempass"></ftui-image>
Hi,
ich habe das Problem, ein Livebild von meiner dlink-Kamera einzubinden. Trotz beider oben genannten Varianten funktioniert es nicht mit dem basicauth und in der Browserkonsole sehe ich folgende Meldung:
ZitatEnsure CORS response header values are valid
A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request.
To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.
Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).
Request: mjpg.cgi?profileid=2
Status: blocked
Header: Access-Control-Allow-Origin
Problem: Missing Header
Learn more: Cross-Origin Resource Sharing (CORS)
https://web.dev/cross-origin-resource-sharing (https://web.dev/cross-origin-resource-sharing)
Kopiere ich den Link direkt in die Adresszeile, fragt der Browser (richtigerweise) nach den Zugangsdaten und anschließend sehe ich das Livevideo.
Könnte es noch ein Problem in dem implementierten "fetch" sein, ist dlink einfach "blöd" oder habe ich irgendwas übersehen?
Außerdem fiel mir auf, dass ftui bei einem
<ftui-button (value)="get out_IPcam_Gartenhaus180 image"> immer ein "set" zusätzlich voranstellt. In meinem Fall benötige ich aber ein "get". Gibt es ein Weg, das "set" zu unterdrücken?
Danke!
Ergänzung zum Text unten: Aktuell funktioniert das wieder wie von Geisterhand. Das war aber definitiv vorher nicht der Fall. Ich werde das auf jeden Fall mal weiter beobachten.
Ergänzung 2: Ich denke ich habe das Problem gefunden. Ich hatte nach einem Neustart die Browser Tabs wiederherstellen lassen. Dabei geht dann vermutlich die Verbindung im Hintergrund verloren, da die Session ja bereits weg war. Sorry für die Verwirrung :-[.
Hi, habe gerade mit ftui3 gestartet und bin bisher echt begeistert. Tolle Arbeit!
Habe nur ein kleines Problem was ich bisher nicht mit Hilfe der Doku und des Forums lösen konnte.
Ich habe mehrere Button-nice die mit FS20 Schaltern verbunden sind. Die Oberfläche zeigt deren Status bei neu laden der Seite korrekt und synchron mit FHEM an. Wenn ich aber in FHEM den Status ändere kommt das auf der bereits geladenen Seite nicht an => asynchrone Anzeige :-/
Sollte sich die ftui nicht automatisch mit den Änderungen in FHEM synchronisieren? Habe ich da etwas vergessen zu konfigurieren?
Das hier ist meine ftui definition:
<ftui-grid-tile row="1" col="7" height="2" width="5" >
<header>Schalter</header>
<ftui-row>
<ftui-column>
<ftui-button-nice get="Pool"></ftui-button-nice>
<ftui-label [text]="Pool:web_label"></ftui-label>
</ftui-column>
</ftui-column>
<ftui-column>
<ftui-button-nice get="Huette"></ftui-button-nice>
<ftui-label [text]="Huette:web_label"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button-nice get="Brunnen"></ftui-button-nice>
<ftui-label [text]="Brunnen:web_label"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button-nice get="Zisterne"></ftui-button-nice>
<ftui-label [text]="Zisterne:web_label"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button-nice get="Shelly_Pool"></ftui-button-nice>
<ftui-label [text]="Shelly_Pool:web_label"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Das hier ist das Listing des Gerätes in fhem
Internals:
BTN 01
DEF A04B 01
FUUID 5ef78bed-f33f-a09f-17dd-ab351ca302500297
IODev nanoCUL
NAME Huette
NR 18
STATE off
TYPE FS20
XMIT a04b
CODE:
1 a04b 01
READINGS:
2021-11-19 20:39:19 IODev nanoCUL
2021-11-24 13:04:52 state off
2021-11-24 13:04:52 web_label Hütte
Attributes:
IODev nanoCUL
alexaName Hütte
alexaRoom Garten
genericDeviceType switch
model fs20as4
room Garten
userReadings web_label {return"Hütte"}
@ vaulie
Zitat von: vaulie am 23 November 2021, 22:19:28
Hi,
ich habe das Problem, ein Livebild von meiner dlink-Kamera einzubinden. Trotz beider oben genannten Varianten funktioniert es nicht mit dem basicauth und in der Browserkonsole sehe ich folgende Meldung:Kopiere ich den Link direkt in die Adresszeile, fragt der Browser (richtigerweise) nach den Zugangsdaten und anschließend sehe ich das Livevideo.
Könnte es noch ein Problem in dem implementierten "fetch" sein, ist dlink einfach "blöd" oder habe ich irgendwas übersehen?
Hi,
hast du das schon probiert?:
<ftui-image src="../images/default/black_up.png" user="fhemuser" pass="fhempass"></ftui-image><ftui-image src="images/default/black_up.png" user="fhemuser" pass="fhempass"></ftui-image>Wenn dein Bild unter www/ftui3(oder tablet, oder was auch immer)/images/default/ liegt...
Ist dein Aufruf so wie hier beschrieben?
https://eu.dlink.com/de/de/support/faq/cameras/de_dcs_urls
Edit: Wenn ja, dann ignoriere das oben...
Dann sollte das ja so in der form gehen oder?:
<ftui-image src="http(s)://ip_der_kamera/image/jpeg.cgi" user="user" pass="pass"></ftui-image>
um das zu senden:
http(s)://benutzername:passwort@ip_der_kamera/image/jpeg.cgi
oder???
Sorry, ich hatte nicht richtig gelesen ???
Zitat von: vaulie am 23 November 2021, 22:19:28
Außerdem fiel mir auf, dass ftui bei einem
<ftui-button (value)="get out_IPcam_Gartenhaus180 image">
immer ein "set" zusätzlich voranstellt. In meinem Fall benötige ich aber ein "get". Gibt es ein Weg, das "set" zu unterdrücken?
Danke!
Zur Erläuterung für den Button:
[device]===get
(device)===set
man kann auch [(device)] angeben um beides (Banana in the Box) zu benutzen!
Für dein Buttonproblem:
<ftui-button class="size-1" @click="sendFhem('get out_IPcam_Gartenhaus180 image')">get FHEM</ftui-button>
Vielen Dank für Deine Kommentare!
Ich fange mal mit dem Ende an ;-) Das get über den fhem-Link funktioniert einwandfrei.
Nun zu dem Holen eines Live-Bildes von meiner dlink-Kamera...
Das Bild möchte ich tatsächlich direkt von der Kamera holen und nicht vom fhem-Rechner. Sorry für die Verwirrung, ich hatte in dem Post das Beispiel von setstate nicht auf meine Umgebung angepasst.
Ich habe auch gemäß der dlink-Webseite (danke, die kannte ich tastächlich schon) diverse Varianten ausprobiert:
<ftui-image src="http://xxx:yyy@192.168.2.127/video/mjpg.cgi"></ftui-image>
<ftui-image src="http://192.168.2.127/video/mjpg.cgi?http-user=xxx&http-password=yyy"></ftui-image> //und auch ohne "http-"
<ftui-image src="http://192.168.2.127/video/mjpg.cgi?profileid=2" user="xxx" pass="yyy"></ftui-image>
<ftui-image base="http://192.168.2.127/video/" src="mjpg.cgi?profileid=2" user="xxx" pass="yyy"></ftui-image>
Ich habe alle Varianten auch mit der Bild-URL (anstatt Video als mjpg) probiert, aber auch kein Erfolg erzielt.
Leider funktioniert die bei dlink angegebenen Beispiele auch nicht, wenn ich die Links unabhängig von ftui in ein iframe oder <img> einer beliebigen Internetseite einbaue. Ich schiebe das auf eine Änderung der Browser vor einigen Jahren, die so die Sicherheit erhöhen wollten, siehe zB. https://medium.com/@lmakarov/say-goodbye-to-urls-with-embedded-credentials-b051f6c7b6a3 (https://medium.com/@lmakarov/say-goodbye-to-urls-with-embedded-credentials-b051f6c7b6a3) (Leider habe ich auf die Schnelle keinen besseren Link gefunden).
Daher hatte ich die Hoffnung, dass ftui3 mit dem fetch die Authentifizierung vielleicht anders (über http header?) umsetzt und der Zugriff möglich ist. Im fhem-Modul IPCAM funktioniert es mit der basicauth-Angabe. Aber über das Modul kann ich leider kein Live-Video/Foto "anzapfen"...
Zitat von: Dracolein am 23 November 2021, 15:29:25
nein! Interessant. Hole ich gleich nach.
Kurios: oft funktionieren die Charts trotzdem problemlos
Ja, nach einem Reload immer! ;)
Das "
:time" am Ende nicht vergessen!
Ich habe bis heute übrigens noch keine Aussage von setstate bekommen, ob das entsprechende zu kartierende Reading ein "
event-on-update-Reading" - Attribut benötigt.
Gruss
Sailor
Zitat von: Sailor am 25 November 2021, 08:01:04
Ich habe bis heute übrigens noch keine Aussage von setstate bekommen, ob das entsprechende zu kartierende Reading ein "event-on-update-Reading" - Attribut benötigt.
dafür bin ich kein Experte. Soviel ich weiß, senden Devices immer Update Events für alles. Erst, wenn du event-on-update-Reading setzt, schränkst du die Gesprächigkeit auf bestimmte Readings ein.
@Sailor, @setstate
1) Devices senden standardmäßig bei jeder Aktualisierung Events - egal, ob Wert geändert wurde oder nicht.
2) Attribut event-on-change-reading dient dazu, Events auf Wert-Änderungen einzuschränken. Optional muss sich der Wert sogar um einen anzugebenden Mindestwert geändert haben; ansonsten gibt es trotz Wertänderung kein Event.
3) Um eine solche Einschränkung zu entschärfen, kann man (zusätzlich) event-min-interval bzw. event-on-update-reading verwenden.
- event-min-interval erlaubt mit einer Sekundenangabe, dass nach Verstreichen dieser Zeitspanne die nächste Aktualisierung auf jeden Fall zu einem Event führt - Wert spielt dabei keine Rolle.
- event-on-update-reading sorgt dafür, dass jede Aktualisierung zu einem Event führt
4) Standardmäßig führt jede Aktualisierung eines Readings zu einer Anpassung des zugehörigen Zeitstempels - unabhängig, ob ein Event ausgelöst wird oder nicht. Will man erreichen, dass der Zeitstempel eines Readings nur bei Auslösung eines Events angepasst wird, muss man timestamp-on-change-reading verwenden.
attr <device> event-on-change-reading .*
attr <device> event-min-interval <reading1>:3600
attr <device> event-on-update-reading <reading2>
attr <device> timestamp-on-change-reading <reading3>
Bedeutet, dass beim Device <device> bei jeder Aktualisierung eines Readings nur dann Events generiert werden, falls sich dabei der Wert des Readings geändert hat. Beim Reading <reading1> wird diese Einschränkung 3600 Sekunden aufrecht erhalten; anschließend führt jede (wertunabhängige) Aktualisierung des Readings zu einem Event. Beim Reading <reading2> wird festgelgt, dass jede Aktualisierung zu einem Event führt. Beim Reading <reading3> wird festgelegt, dass der Zeitstempel nur bei einer (eventauslösenden) Wertänderung angepasst wird. Dieses Beispiel zeigt natürlich nur eine Art der Verwendung; die Vielfalt der Verwendung ist relativ groß und hängt vom jeweiligen Einzelfall ab.
Damit FTUI3 zeitnah reagiert, sind Events wichtig
- in der Regel nur, wenn sich auch der Wert geändert hat ...
- in eher wenigen Fällen aber auch unabhängig von einer Wertänderung
Zitat von: setstate am 25 November 2021, 22:22:51
dafür bin ich kein Experte. Soviel ich weiß, senden Devices immer Update Events für alles. Erst, wenn du event-on-update-Reading setzt, schränkst du die Gesprächigkeit auf bestimmte Readings ein.
OK, aber beeinflussen diese Attribute die Auffrischung [update] der Charts?
Gruß
Sailor
Hallo zusammen,
gibt es eine Möglichkeit bei einem (bestimmten) event einen Sound im Browser abzuspielen.
Gedacht ist, wenn das Garagentor auf geht ein kleiner beep o.ä.
Danke und viele Grüße
Max
Zitat von: Sailor am 25 März 2021, 19:34:06
Hallo setstate,
Das ist schon mal die halbe Miete von dem was ich Suche.
Wie muss ich die Zeile um [hidden] abändern, damit der Wert true ist, wenn das Device bzw. das Reading nicht existiert?
Quasi das Button / Icon verschwinden lassen wenn "ftuitest" nicht existiert.
Gruß
Sailor
Servus (=Moin-800km) Sailor,
hast Du für dieses Problem schon eine Lösung gefunden?
Allerbestigste Grüße aus dem Süden!
Das Get-Binding gibt man so an:
get-<HTML-Attribute>=<Device>:<Reading>:<Property>
Default für <Reading> ist 'STATE'
Default für < Property > ist 'value
Property kann folgendes sein:
invalid: boolean,
value: string,
time: date,
update: date
Wenn man also das schreibt
get-text="ftuitest"
bedeutet das
get-text="ftuitest:STATE:value"
Wenn man wissen will, ob das Reading gültig ist, fragt man
get-text="ftuitest:state:invalid"
Das Reading muss man angeben. get-text="ftuitest:invalid" wäre falsch.
Das Reading-Property 'invalid' wird true, wenn es das Reading im FHEM nicht gibt. Damit kann man folgende schöne Dinge machen (Farben ändern, Wert anzeigen, Verstecken)
<ftui-icon name="lightning"
[color]="dummyXY:state:invalid | map('true: danger, false: medium')"></ftui-icon>
<ftui-label [text]="dummyXY:state:invalid"></ftui-label>
<ftui-icon name="lightning"
[hidden]="dummyXY:state:invalid"></ftui-icon>
BTW.:
get-text = [text]
set-text = (text)
gset-text = [(text)]
Danke setstate!
Damit kann ich die Contentseiten (Wetterwarnungen) zu denen es derzeit keine Meldungen gibt endlich verstecken. Super!
Hi @setstate,
wegen ftui.helper.js L239 (https://github.com/knowthelist/ftui/blob/ded094b8efa1c7bccdd3918571ce9db72f091b0d/www/ftui/modules/ftui/ftui.helper.js#L239) sollte auch die Zeile 206 (https://github.com/knowthelist/ftui/blob/ded094b8efa1c7bccdd3918571ce9db72f091b0d/www/ftui/modules/ftui/ftui.helper.js#L226) entsprechend bei Dezember angepasst werden:
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
Zitat von: OdfFhem am 23 Oktober 2021, 03:50:43
@setstate
In der Funktion dateFormat dient "z" als Platzhalter, daher erfordert "März" bzw. "Dezember" die Anpassung mit z
Hallo Zusammen,
gibt's für die TabView eigentlich auch einen Timeout oder eine Return Time um nach einer bestimmten Zeit zum Haupt-Tab zurückzukehren?
VG, Thomas
Zitat von: ToM_ToM am 30 November 2021, 19:10:09
Hallo Zusammen,
gibt's für die TabView eigentlich auch einen Timeout oder eine Return Time um nach einer bestimmten Zeit zum Haupt-Tab zurückzukehren?
VG, Thomas
Nein, dass habe ich bis jetzt noch nicht eingebaut. Wird aber kommen ...
Hallo zusammen,
habe jetzt schon eine Weile dran rum gebastelt, bin aber leider nicht firm genug in JavaScript um den Code 100% zu verstehen :o.
Ich würde gerne eine Farbtemperatur setzen (3000-6500). Ich kann zwar einen Slider mit dem Typ KelvinSlider anlegen, allerdings werden damit keine Werte gesetzt.
Geht das überhaupt als eigenständiger Slider aus dem Colorpicker oder würde dieser das immer generell in einen Hex-Wert rechnen?
Kann man das mit dem hinterlegten Farbverlauf auch auf einem normalen Slider machen? Stehe irgendwie im dunklen :-\
Beim ColorPicker habe ich jetzt Kelvin als Attribute nach außen geführt
Die Komponente liefert 2200K bis 11000K.
In diesem Beispiel skaliere ich die Werte für eine HUE-Lampe nach 154 bis 454.
154 <-> 11000K
454 <-> 2200K
<ftui-grid-tile row="2" col="4" height="1" width="1">
<header>KELVIN</header>
<ftui-colorpicker layout="kelvinSlider"
(kelvin)="scale(2200,11000,454,154) | toInt() | Stehlampe:ct"
[kelvin]="Stehlampe:ct | toInt() | scale(154,454,11000,2200)"></ftui-colorpicker>
</ftui-grid-tile>
Zitat von: octek0815 am 11 Februar 2021, 20:02:46
@setstate
Mit dem letzten Update (made ftui-content more neutral in style) berücksichtigt der swiper bei content hidden nicht mehr.
Beispiel-Code:
<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play interval="15">
<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | map('0:true, 1:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="System_DWD_Wetter:a_count | map('0:true, 2:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="System_DWD_Wetter:a_count | map('0:true, 3:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="System_DWD_Wetter:a_count | map('0:true, 4:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="System_DWD_Wetter:a_count | map('0:true, 5:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="System_DWD_Wetter:a_count | map('0:true, 6:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="System_DWD_Wetter:a_count | map('0:true, 7:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="System_DWD_Wetter:a_count | map('0:true, 8:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="System_DWD_Wetter:a_count | map('0:true, 9:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="System_DWD_Wetter:a_count | map('0:true, 10:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="System_DWD_Wetter:a_count | map('0:true, 11:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="System_DWD_Wetter:a_count | map('0:true, 12:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>
Derzeit gibt es nur zwei Warnungen, es werden aber alle Swiper-Karten angezeigt.
Hallo setstate,
ich möchte diese Thema nochmal in Erinnerung bringen, da hidden leider weiterhin beim ftui-swiper nicht greift. Könntest Du dir das nochmal anschauen.
Im alten Post ist ein Beispiel GIF (animiert dazu).
VG
Olli
Hallo,
align-items="right" scheint seit dem letzten Update nicht mehr zu funktionieren wenn in einem ftui-content file.
align-items="left" funktioniert wiederum.
VG
oh ja, danke.
Ist jetzt wieder gefixed.
https://knowthelist.github.io/ftui/www/ftui/examples/grid.html
Zitat von: setstate am 01 Dezember 2021, 20:42:41
oh ja, danke.
Ist jetzt wieder gefixed.
https://knowthelist.github.io/ftui/www/ftui/examples/grid.html
Besten Dank für die schnelle Behebung. Hast Du auch noch eine Idee zum anderen Thema vom mir mit dem hidden beim swiper?
Zitat von: octek0815 am 01 Dezember 2021, 09:12:49
Hallo setstate,
ich möchte diese Thema nochmal in Erinnerung bringen, da hidden leider weiterhin beim ftui-swiper nicht greift. Könntest Du dir das nochmal anschauen.
Im alten Post ist ein Beispiel GIF (animiert dazu).
VG
Olli
statt map() musst du step() benutzen
Zitat von: setstate am 01 Dezember 2021, 22:45:25
statt map() musst du step() benutzen
Oh ja, das hatte ich bereits geändert (im alten Post war noch die frühere alte Funktion).
Es sieht nun so aus, funktioniert aber genauso wenig bzw. hidden greift nicht.
<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play interval="15">
<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | step('0:true, 1:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="System_DWD_Wetter:a_count | step('0:true, 2:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="System_DWD_Wetter:a_count | step('0:true, 3:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="System_DWD_Wetter:a_count | step('0:true, 4:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="System_DWD_Wetter:a_count | step('0:true, 5:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="System_DWD_Wetter:a_count | step('0:true, 6:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="System_DWD_Wetter:a_count | step('0:true, 7:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="System_DWD_Wetter:a_count | step('0:true, 8:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="System_DWD_Wetter:a_count | step('0:true, 9:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="System_DWD_Wetter:a_count | step('0:true, 10:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="System_DWD_Wetter:a_count | step('0:true, 11:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="System_DWD_Wetter:a_count | step('0:true, 12:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>
Zitat von: octek0815 am 02 Dezember 2021, 08:21:48Es sieht nun so aus, funktioniert aber genauso wenig bzw. hidden greift nicht.
Ja, das wäre schon cool wenn swiper hidden nicht ignoriert, dann könnte ich das bei
meiner DWD Warn-Variante (https://forum.fhem.de/index.php/topic,117858.0.html) auch übernehmen.
dann habe ich auch keine Idee mehr, bei mir geht es. Was passiert bei diesem Beispiel? Geht es ohne content, nur mit label?
<ftui-grid base-width="75" base-height="60" margin="1" shape="round">
<ftui-grid-tile row="1" col="1" height="2" width="2">
<label>dwd.auto-play</label>
<ftui-checkbox value="on" @value-change="dwd.autoPlay = (event.detail==='on')">
</ftui-checkbox>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="1" height="4" width="4">
<ftui-column>
<ftui-button [ value]="ftuitest:count" (value)="setreading ftuitest:count" states="0,1,2,3,4,5,6,7,8">
<ftui-label [text]="ftuitest:count"></ftui-label>
</ftui-button>
<ftui-swiper id="dwd" scrollbar dots auto-play interval="2">
<ftui-content [hidden]="ftuitest:count | step('0:true, 1:false')"
file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 2:false')"
file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 3:false')"
file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 4:false')"
file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 5:false')"
file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 6:false')"
file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 7:false')"
file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
</ftui-swiper>
</ftui-column>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="5" height="4" width="4">
<ftui-column>
<ftui-button [ value]="ftuitest:count" (value)="setreading ftuitest:count" states="0,1,2,3,4,5,6,7,8">
<ftui-label [text]="ftuitest:count"></ftui-label>
</ftui-button>
<ftui-swiper scrollbar dots auto-play interval="1">
<ftui-label [hidden]="ftuitest:count | step('0:true, 1:false')" size="6">1</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 2:false')" size="6">2</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 3:false')" size="6">3</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 4:false')" size="6">4</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 5:false')" size="6">5</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 6:false')" size="6">6</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 7:false')" size="6">7</ftui-label>
</ftui-swiper>
</ftui-column>
</ftui-grid-tile>
</ftui-grid>
Zitat von: setstate am 02 Dezember 2021, 09:01:33
dann habe ich auch keine Idee mehr, bei mir geht es. Was passiert bei diesem Beispiel? Geht es ohne content, nur mit label?
<ftui-grid base-width="75" base-height="60" margin="1" shape="round">
<ftui-grid-tile row="1" col="1" height="2" width="2">
<label>dwd.auto-play</label>
<ftui-checkbox value="on" @value-change="dwd.autoPlay = (event.detail==='on')">
</ftui-checkbox>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="1" height="4" width="4">
<ftui-column>
<ftui-button [ value]="ftuitest:count" (value)="setreading ftuitest:count" states="0,1,2,3,4,5,6,7,8">
<ftui-label [text]="ftuitest:count"></ftui-label>
</ftui-button>
<ftui-swiper id="dwd" scrollbar dots auto-play interval="2">
<ftui-content [hidden]="ftuitest:count | step('0:true, 1:false')"
file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 2:false')"
file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 3:false')"
file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 4:false')"
file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 5:false')"
file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 6:false')"
file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
<ftui-content [hidden]="ftuitest:count | step('0:true, 7:false')"
file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
</ftui-swiper>
</ftui-column>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="5" height="4" width="4">
<ftui-column>
<ftui-button [ value]="ftuitest:count" (value)="setreading ftuitest:count" states="0,1,2,3,4,5,6,7,8">
<ftui-label [text]="ftuitest:count"></ftui-label>
</ftui-button>
<ftui-swiper scrollbar dots auto-play interval="1">
<ftui-label [hidden]="ftuitest:count | step('0:true, 1:false')" size="6">1</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 2:false')" size="6">2</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 3:false')" size="6">3</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 4:false')" size="6">4</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 5:false')" size="6">5</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 6:false')" size="6">6</ftui-label>
<ftui-label [hidden]="ftuitest:count | step('0:true, 7:false')" size="6">7</ftui-label>
</ftui-swiper>
</ftui-column>
</ftui-grid-tile>
</ftui-grid>
Ja mit Label funktioniert es. Mit content wiederum nicht.
Es werden dann weiterhin die vermeintlich versteckten Karten angezeigt und man kann durchswipen.
Allerdings funktioniert Autoplay richtig und scrollt automatisch nur durch die Karten die auch dagestellt werden sollen.
Die restlichen Karten die zwar da sind werden von Autoplay ignoriert.
Zitat von: yersinia am 02 Dezember 2021, 08:52:42
Ja, das wäre schon cool wenn swiper hidden nicht ignoriert, dann könnte ich das bei meiner DWD Warn-Variante (https://forum.fhem.de/index.php/topic,117858.0.html) auch übernehmen.
Ich dachte grad noch: komisch, bei mir geht's doch. Aber dann ist mir eingefallen, dass ich das Swiper-"Widget" gar nicht mehr verwende, sondern mir vor einiger Zeit (eigentlich für einen Nachrichtenüberblick) ein "Fade-Widget" gebaut habe.
Ich hab zwar keine Ahnung, ob ich dieses nach der "setstate'schen FTUI3-Konvention" aufgebaut habe, aber für meine Zwecke reicht es. Vielleicht mag ja einer der Code-Experten die angehängte Datei Mal querlesen. Dann könnte man das ja auch in's Repo aufnehmen, falls es jemand Anderes auch gebrauchen kann.
Im HTML-Code funktioniert damit das
hidden für die einzelnen content-Seiten wunderbar:
<!-- Wetterwarnungen -->
<ftui-grid-tile row="2" col="13" width="13" color="primary" align-items="top" [hidden]="ZAMG_Warn:properties_warnings_01_properties_chgid:invalid">
<ftui-row align-items="left top">
<ftui-fade interval="20">
<ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_01"></ftui-content>
<ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_02" [hidden]="ZAMG_Warn:properties_warnings_02_properties_chgid:invalid"></ftui-content>
<ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_03" [hidden]="ZAMG_Warn:properties_warnings_03_properties_chgid:invalid"></ftui-content>
</ftui-fade>
</ftui-row>
</ftui-row>
</ftui-grid-tile>
Zitat von: octek0815 am 02 Dezember 2021, 09:37:28
Ja mit Label funktioniert es. Mit content wiederum nicht.
Es werden dann weiterhin die vermeintlich versteckten Karten angezeigt und man kann durchswipen.
Allerdings funktioniert Autoplay richtig und scrollt automatisch nur durch die Karten die auch dagestellt werden sollen.
Die restlichen Karten die zwar da sind werden von Autoplay ignoriert.
Der Swiper bekommt von den hidden gesetzen Items nix mit und zeigt erst einmal alle an. Erst wenn man einmal schiebt, wird das ganze Konstrukt aktualisiert und es ist die richtige Anzahl da. Beim Autoplay passiert das nach dem ersten Interval. Kannst du das so bestätigen, dass das das Problem ist?
Dann müsste man sich überlegen, wie die Änderung der Unteritems nach oben notifiziert werden kann.
Zitat von: tomster am 02 Dezember 2021, 10:40:44
Ich dachte grad noch: komisch, bei mir geht's doch. Aber dann ist mir eingefallen, dass ich das Swiper-"Widget" gar nicht mehr verwende, sondern mir vor einiger Zeit (eigentlich für einen Nachrichtenüberblick) ein "Fade-Widget" gebaut habe.
Ich hab zwar keine Ahnung, ob ich dieses nach der "setstate'schen FTUI3-Konvention" aufgebaut habe, aber für meine Zwecke reicht es. Vielleicht mag ja einer der Code-Experten die angehängte Datei Mal querlesen. Dann könnte man das ja auch in's Repo aufnehmen, falls es jemand Anderes auch gebrauchen kann.
Im HTML-Code funktioniert damit das hidden für die einzelnen content-Seiten wunderbar:
<!-- Wetterwarnungen -->
<ftui-grid-tile row="2" col="13" width="13" color="primary" align-items="top" [hidden]="ZAMG_Warn:properties_warnings_01_properties_chgid:invalid">
<ftui-row align-items="left top">
<ftui-fade interval="20">
<ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_01"></ftui-content>
<ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_02" [hidden]="ZAMG_Warn:properties_warnings_02_properties_chgid:invalid"></ftui-content>
<ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_03" [hidden]="ZAMG_Warn:properties_warnings_03_properties_chgid:invalid"></ftui-content>
</ftui-fade>
</ftui-row>
</ftui-row>
</ftui-grid-tile>
Hallo tomster,
ist das nicht das ftui-rotor nur mit anderen Effekten?
Das könnte man zusammenführen, mit einem effect-Attribute oder beide von einer gemeinsamen Basis-Klasse ableiten.
Zitat von: setstate am 02 Dezember 2021, 10:57:04
Hallo tomster,
ist das nicht das ftui-rotor nur mit anderen Effekten?
Das könnte man zusammenführen, mit einem effect-Attribute oder beide von einer gemeinsamen Basis-Klasse ableiten.
Mist, erwischt ;-)
Aber was will man als Code-DAU auch Anderes machen, als Dinge, die nachweislich funktionieren schlichtweg "adaptieren"...
Aber zurück zu Deiner Frage:
Logo könnte man das. Dafür haben aber meine Fähigkeiten nicht gereicht, auch wenn es wohl nur ein case=... oder so gebraucht hätte.
Vielleicht stehe ich auf dem Schlauch oder habe es einfach nicht im Forum gefunden.
Ich habe ein Tile, welches ich tabellarisch mit Device-Informationen fülle.
Hier tät ich gerne ein Popup-Integrieren, um meinetwegen einen Chart im Popup zu zeigen.
Dabei dachte ich an ein Icon, welches (halb)transparent vor oder hinter dem Tabellentext liegt und auf das Popup referenziert.
Kann man das machen und wenn ja wie?
Bei meinen bisherigen Versuchen wurde das Icon im voran oder hintendran gestellt.
Zitat von: setstate am 02 Dezember 2021, 10:52:10
Der Swiper bekommt von den hidden gesetzen Items nix mit und zeigt erst einmal alle an. Erst wenn man einmal schiebt, wird das ganze Konstrukt aktualisiert und es ist die richtige Anzahl da. Beim Autoplay passiert das nach dem ersten Interval. Kannst du das so bestätigen, dass das das Problem ist?
Dann müsste man sich überlegen, wie die Änderung der Unteritems nach oben notifiziert werden kann.
Nein das kann ich so nicht bestätigen. Es werden gleich alle Karten (in meinem Code-Beispiel 12) angezeigt.
AutoPlay scrollt dann aber nur automatisch durch Anzahl der Karten zu der auch mein a_count passt.
Manuell kann man leider durch alle 12 Karten swipen und die scrollbar länge ist dann natürlich auch flasch.
okay, stimmt. Das kann ich bestätigen. Ich arbeite dran ...
Update: ist jetzt gefixed
Zitat von: presskopf am 02 Dezember 2021, 11:55:29
Ich habe ein Tile, welches ich tabellarisch mit Device-Informationen fülle.
Hier tät ich gerne ein Popup-Integrieren, um meinetwegen einen Chart im Popup zu zeigen.
Dabei dachte ich an ein Icon, welches (halb)transparent vor oder hinter dem Tabellentext liegt und auf das Popup referenziert.
Ein Icon vor/hinter dem Text erschwert doch nur die Lesbarkeit. Wäre das nicht ein Fall für "Click auf row/column öffnet Pop-Up"?
<ftui-row popup-target="pop1" ....>Und eben an anderer Stelle das entsprechende Pop-Up definieren.
Oder verstehe ich Dich komplett falsch?
Doch Du verstehst mich! :)
Ich dachte immer das popup geht nur basierend auf einem Icon, dass das auch mit Tabellenelementen geht - daran habe ich nicht gedacht.
Und gleich mal ausprobiert.
Hmmm, das popup-target bei column funktionert, bei row komischerweise nicht. Vielleicht sind meine Finger zu unförmig.
Auf alle Fälle erst mal Danke, damit kann ich weitermachen.
Schön, dass wir uns verstehen ;-)
Ausprobiert habe ich den usecase bisher selber noch nicht, aber irgendwann hier im Thread davon gelesen. Von daher kann es wirklich sein, dass nur columns funktionieren.
Genaueres kann wohl nur setstate dazu sagen.
Hallo setstate,
mir ist heute aufgefallen dass bei ftui-image das Bild nicht aktualisiert wird.
<ftui-image src="http://192.168.178.44/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=user=USER&password=PASSWORD" interval="10" height="220px"></ftui-image>
Sobald ich noch nocache hinzufüge, zeigt er mir gar kein Bild mehr an (Image not available).
<ftui-image src="http://192.168.178.44/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=user=USER&password=PASSWORD" interval="10" height="220px" nocache></ftui-image>
Hast du eine Idee?
VG, Thomas
Hallo Community,
Super Dank an setstate für die Umsetzung der neuen Version und dem Support hier im Forum!
Eine Frage habe ich, vielleicht hat jemand eine Lösung.
Im segment.component.js gibt es die Funktion für "next" und "back". Leider scheitert es an der Umsetzung des Befehls. In der Swiper Beispielsweise steht irgendwas von <ftui-icon name="chevron-left" onclick="swiper2.back()"></ftui-icon> , das trifft aber leider nicht auf Segment zu. Hat jemand ne Idee wie der Befehl beim Segment angefügt wird?
Dieser Code ist jedenfalls falsch:
<ftui-segment-button value="back()">
<ftui-icon name="chevron-left" size="3"></ftui-icon>
</ftui-segment-button>
Anbei die HTML-Datei aus meinem /examples/ Folder
Vielen Dank und liebe Grüße, Schalter
Zitat von: setstate am 02 Dezember 2021, 12:17:09
okay, stimmt. Das kann ich bestätigen. Ich arbeite dran ...
Update: ist jetzt gefixed
Funktioniert perfekt, vielen Dank für die schnelle Korrektur!
VG
@setstate
Ich hab gestern Mal ein FTUI-Update gefahren. Seither sind auf dem Smart Mirror/ Raspberry Pi sämtliche Datumsangaben im clock-widget in Englisch. Witzigerweise nur dort. Wenn ich vom PC oder dem Tablet zugreife, dann ist alles Deutsch.
Laut der Versionshistorie auf github wurde aber zumindest in diesem Widget nix geändert. Ich hab allerdings noch was im Hinterkopf, dass hier im Thread irgendwo von einem "z-Platzhalter-Bug" die Rede war. Das hast Du inzwischen wohl gefixt, weil der Dezember wieder richtig geschrieben wird (und auf dem Pi als Dece%#109;ber). Darf ich fragen in welcher Datei Du diese Änderungen vorgenommen hast?
--edit--
Hab's gefunden. Steht in der ftui.helper.js
So wie ich den Code (me=Code-DAU) verstehe, hast Du eine Abfrage nach der verwendeten "User-Language" des Browsers eingebaut. Dann schau ich Mal, was da auf dem Pi in Chromium steht.
Guten Morgen in die Runde,
grundsätzlich funktioniert alles tiptop, FTUI ist super-schnell, WAF ist hoch, ich bin sehr glücklich mit dieser Lösung!
Aber
ich beobachte wiederkehrend, dass Teile von FTUI in unregelmäßigen Abständen die Verbindung zu FHEM verlieren scheinen (=nicht aktualisiert werden). Lösung ist dann ein Reload der Webseite/von FTUI.
Konkret aufgefallen ist mir das heute bei mehreren Dummies (gab es aber auch schon bei nativen HM Devices).
Die Dummies aktualisieren sich grundsätzlich einwandfrei und aktualisierten sich heute nach einem Reload auch direkt wieder.
FTUI läuft auf FireHD10 mit Fully Browser, es sind 2 Tablets im Dauer-Einsatz.
FHEM-seitig verbinden sich FTUI via FHEMWEB.
Alles aktueller SW Stand
Aufgetreten ist das Verhalten auf beiden Tablets.
Bisher nicht beobachtet habe ich ein zeitgleiches Auftreten auf beiden Tablets.
Auf einem parallel mitlaufenden Chrome auf einem Desktop habe ich das Verhalten bis dato nicht beobachtet.
Das FHEM Log zeigt keine Auffälligkeiten.
Habt ihr Vorschläge, wie ich mich dem Problem nähern kann?
Ungern würde ich den Loglevel server-zeitig erhöhen da es sich um ein umfangreiches "Produktions"System handelt und das Logging >36h laufen müsste; Timingprobleme oder gar Funktions-Beeinträchtigungen sind unbedingt zu vermeiden.
Gäbe es zB auf dem Client eine sinnvolle Möglichkeit, ein langlauf-taugliches Logging zu aktivieren?
Danke und Gruss
Ralph.
Man könnte eine Anzeige des lastEventTimestamp einbauen, die aller x Minuten aktualisiert wird
Script ins HTML einfügen:
</head>
<script>
setInterval(
() => myout.innerText =
ftuiApp.fhemService.states.connection.lastEventTimestamp.toLocaleString(),
60000
);
</script>
<body>
Output-Div irgendwo hinsetzen
<div id="myout"></div>
Hallo setstate.
Zitat von: setstate am 03 Dezember 2021, 10:58:02
Man könnte eine Anzeige des lastEventTimestamp einbauen, die aller x Minuten aktualisiert wird
Funktioniert und aktualisiert sich. Aber was genau sehe ich hier?
Der "lastEventTimestamp" schreibt den Timestamp des letzten Event, welches bei FTUI ankommt - egal für welches Device.. - korrekt?
Gibt es eine Möglichkeit, den Suchbereich mit einem Filter/Regex einzuschränken?
Apropos, ich habe mal nach "ftuiApp" und "fhemService" gesucht und diese Zeilen in der ftui.app.js gefunden
this.config.updateCheckInterval = this.getMetaNumber('update_check_interval', 5);
this.config.refreshInterval = this.getMetaNumber('refresh_interval', 15 * 60); // 15 minutes
this.config.refreshDelay = this.getMetaString('refresh_restart_delay', 3);
Das liest sich wie eine Art Keepalive.. Hast du einen Hinweis, was sie machen und wie sie ineinander greifen? (eine spontane Suche im Forum war nicht erfolgreich)
Danke und Gruss
Ralph.
Die Events kommen grundsätzlich per WebSocket live rein.
Als Initialbetankung beim Start und als Absicherung (aller 15min) gegen verlorene Events gibt es zusätzlich ein Total-Refresh per jsonlist2 Kommando für alles.
Interval per Meta Tag einstellbar:
<meta name="refresh_interval" content="10">
Sollte man aber sparsam einsetzen. Eigentlich sollte das garnicht notwendig sein, oder 1 mal am Tag.
Du kannst dir auch den letzten Stand bestimmter Devices-Daten anzeigen lassen
ftuiApp.fhemService.getReadingItem('AussenTemp:temperature').data.time
ftuiApp.fhemService.getReadingItem('AussenTemp:temperature').data.update
ftuiApp.fhemService.getReadingItem('AussenTemp:temperature').data.value
Aber, wenn die Events im Reading-Map-Object vorliegen, gibt es keinen Grund, dass die Daten in der Anzeigen fehlen sollten.
Ich vermute ein Stromsparmodus im Tablet, was Netzwerk oder Browsertabs schlafen legt.
Eingebaut habe ich auch einen HealthCheck aller 5min, der die Verbindung prüft. Interval per Meta Tag einstellbar:
<meta name="update_check_interval" content="10">
Zitat von: setstate am 03 Dezember 2021, 12:20:56
Ich vermute ein Stromsparmodus im Tablet, was Netzwerk oder Browsertabs schlafen legt.
Habe Ähnliches im Verdacht, obwohl das laut config eigentlich nicht so sein sollte, ggf greifen verschiedene Mechanismen einfach nicht bei den Amazon Tablets... das OS soll ja massiv modifiziert sein.
Vielen Dank für deine Tips.
Mechanismen sind scharf geschaltet, jetzt abwarten.
/r
Hey, ist mit einem Update bei ftui-content was kaputt gegangen?
Folgendes liefert mir jetzt nur noch "undefined" zurück.
<ftui-content [content]="{{t_device}}:FavouritesFtui3"></ftui-content>
VG, Thomas
Zitat von: ToM_ToM am 03 Dezember 2021, 22:59:00
Hey, ist mit einem Update bei ftui-content was kaputt gegangen?
Folgendes liefert mir jetzt nur noch "undefined" zurück.
<ftui-content [content]="{{t_device}}:FavouritesFtui3"></ftui-content>
VG, Thomas
Stimmt, diese Art der Anwendung hatte ich nicht mehr auf dem Schirm. Habe es jetzt nochmal anders umgebaut.
Das war schon mal im Mai ein Thema.
Bei mir funktioniert das weder mit noch ohne "" um das Intervall.
Hi setstate,
ich habe jetzt festegestellt dass interval bei ftui-image mittlerweile gar nicht mehr funktioniert.
VG, Thomas
Kann ich mit der aktuellen Version nicht bestätigen...
Bsp:
<ftui-image id="weather" src="https://www.vvo-online.de/img/webcamimages/carolaplatz-110.jpg"
interval="300" nocache></ftui-image>
hier wird aller 5min ein neues Bild angezeigt wenn man im Zeitfenster der Webcam ist ...
LG mr_petz
Kann ich mit der aktuellen Version nicht bestätigen...
Hey du hast Recht. Es war ein dummer Zufall dass der das Image vom DWD irgendwie 24 Stunden nicht aktualisiert hatte. Jetzt ist es wieder aktuell.
Zu den Kamerabildern bin ich jetzt mit der Netzwerkanalyse dran. Die Reloads werden gefeuert. Allerdings bekomme ich folgende Fehlermeldung:
CORS Missing Allow Origin
Hast du einen Tipp für mich?
VG, Thomas
Hi. Erster Treffer bei Goog..:
https://developer.mozilla.org/de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
Oder:
https://developer.mozilla.org/de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight
LG mr_petz
ZitatHi. Erster Treffer bei Goog..:
Danke, aber soweit war ich auch schon. ;)
In FHEM habe ich CORS auf 0 und auf 1 gestellt. Hat beides nicht geholfen.
Bei meinem Apache habe ich
Header set Access-Control-Allow-Origin "*" hinzugefügt.
Da das Gleiche mit dem alten FTUI image funktioniert, ist meine Vermutung dass man irgendwas im Header der Website mitliefern muss.
Nur steige ich hier noch nicht ganz durch.
VG, Thomas
OK. Ich habe da auch nicht den Plan davon...
Aber könnte auch ausschlaggebend sein für Private Netze:
Zitat
Mithilfe der "*"-Wildcard kann man eine Seite so konfigureren, dass Sie jeder anderen Webseite Zugriff gewährt. Dies sollte man ausschließlich für öffentliche APIs tun. Private APIs sollten niemals "*" verwenden, sondern stattdessen eine spezifische Domain oder eine Liste von Domains. Zudem funktioniert die Wildcard nur für Requests, die mit dem crossorigin-Attribut, gesetzt auf "anonymous", erstellt wurden.
Oder vielleicht fehlt der Token von fhem???
Edit: Diesen Thread kennst du schon?:
https://forum.fhem.de/index.php?topic=38764.0
LG mr_petz
Hi mr_petz,
das mit dem csrf token habe ich auf "none" stehen. Den Thread hatte ich mir auch schon angesehen.
Im alten FTUI gab es sowas:
<meta name='web_device' content='WEBtablet'>
Meine fhem config dazu lautet:
defmod WEBtablet FHEMWEB 8085 global
attr WEBtablet allowfrom localhost
attr WEBtablet csrfToken none
attr WEBtablet longpoll websocket
VG, Thomas
Nachdem ich seit längerem FTUI2 nutze, bin ich jetzt zufällig auf FTUI3 gestoßen - das sieht sehr gut aus, vielen Dank dafür :)
Bin gerade fleißig dabei mir eine neue Oberfläche zu basteln.
Jetzt stoße ich auf ein Problem, wenn ich bei meinen Rollladen Schalter einfügen will, verschiebt es das Icon nach oben. Was mache ich falsch? :o
<!-- REIHE 4 -->
<!-- ROLLADEN OG -->
<ftui-grid-tile row="8" col="1" height="2" width="1" shape="round">
<ftui-grid-header>Rollladen OG</ftui-grid-header>
<ftui-row>
<ftui-button (value)="Rolladen.Zentral.OG" states="open" color="current" fill="none" margin="-1em">
<ftui-icon name="angle-up" size="2"></ftui-icon>
</ftui-button>
<ftui-icon [name]="Rolladen.Zentral.OG:state | map('open:window-shutter-open,closed:window-shutter')" size="5"></ftui-icon>
<ftui-button (value)="Rolladen.Zentral.OG" states="closed" color="current" fill="none" margin="-1em">
<ftui-icon name="angle-down" size="2"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row>
<ftui-row width="80%" height="10%">
<ftui-label>dummy</ftui-label>
</ftui-row>
</ftui-row>
</ftui-grid-tile>
<!-- VERGLEICH -->
<ftui-grid-tile shape="round" row="8" col="2" height="2" width="1">
<ftui-grid-header>Vergleich</ftui-grid-header>
<ftui-icon name="window-shutter" size="5" ></ftui-icon>
<ftui-row width="80%" height="10%">
<ftui-label>dummy</ftui-label>
</ftui-row>
</ftui-grid-tile>
Hi blenni.
pack es einfach in eine ftui-cell.
Bsp:
<!-- REIHE 4 -->
<!-- ROLLADEN OG -->
<ftui-grid-tile row="8" col="1" height="auto" width="1" shape="round">
<ftui-grid-header>Rollladen OG</ftui-grid-header>
<ftui-cell>
<ftui-row>
<ftui-button (value)="Rolladen.Zentral.OG" states="open" color="current" fill="none" margin="-1em">
<ftui-icon name="angle-up" size="2"></ftui-icon>
</ftui-button>
<ftui-icon [name]="Rolladen.Zentral.OG:state | map('open:window-shutter-open,closed:window-shutter')" size="5"></ftui-icon>
<ftui-button (value)="Rolladen.Zentral.OG" states="closed" color="current" fill="none" margin="-1em">
<ftui-icon name="angle-down" size="2"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row>
<ftui-row width="80%" height="10%">
<ftui-label>dummy</ftui-label>
</ftui-row>
</ftui-row>
</ftui-cell>
</ftui-grid-tile>
<!-- VERGLEICH -->
<ftui-grid-tile shape="round" row="8" col="2" height="auto" width="1">
<ftui-grid-header>Vergleich</ftui-grid-header>
<ftui-icon name="window-shutter" size="5" ></ftui-icon>
<ftui-row width="80%" height="10%">
<ftui-label>dummy</ftui-label>
</ftui-row>
</ftui-grid-tile>
ftui-cell ist fast immer das Allheilmittel... ;)
ps. height="auto" ist auch von Vorteil...
Edit: alleine mit height="auto" wie oben im Beispiel sollte es auch ohne cell gehen...
Die Formatierung will bei mir auch noch nicht so wie es soll.
Wie bekomme ich das alles zentriert?
<ftui-label size="3">Ankleide</ftui-label>
<ftui-row>
<ftui-button (value)="Rollo_OG_O_Ankleide" states="up" direction="vertical" color="current" fill="none"
margin="-1em">
<ftui-icon name="angle-up" class="size-1" height="100%"></ftui-icon>
</ftui-button>
<ftui-icon [name]="Rollo_OG_O_Ankleide:pct | map('100: fts_shutter_100, 0: fts_shutter_10, `.*`: fts_shutter_40')"
[color]="Rollo_OG_O_Ankleide:pct | map('0: green, `.*`: red')">
<ftui-dropdown [list]="Rollo_EG_O_AZ:ftui"
[value]="Rollo_OG_O_Ankleide:pct"
(value)="Rollo_OG_O_Ankleide pct $value"></ftui-dropdown>
</ftui-icon>
<ftui-button (value)="Rollo_OG_O_Ankleide" states="down" direction="vertical" color="current" fill="none"
margin="-1em">
<ftui-icon name="angle-down" class="size-1" height="100%"></ftui-icon>
</ftui-button>
</ftui-row>
Was ist denn das Ziel?
ftui-dropdown innerhalb von ftui-icon
ist das gewollt?
Ich dachte wegen der Ausrichtung, macht ja aber keinen Sinn.
Der Code funktioniert aber trotzdem.
Sollte das so aussehen?
<ftui-grid-tile row="3" col="4" height="1" width="1" shape="round">
<ftui-label size="3">Ankleide</ftui-label>
<ftui-row height="40%">
<ftui-button states="up" direction="vertical" color="current" fill="none" margin="-1em">
<ftui-icon name="angle-up" class="size-1"></ftui-icon>
</ftui-button>
<ftui-icon name="window-shutter-open" size="4"></ftui-icon>
<ftui-button states="down" direction="vertical" color="current" fill="none" margin="-1em">
<ftui-icon name="angle-down" class="size-1"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-dropdown list=",item1,item2,item3" value="item2"></ftui-dropdown>
</ftui-grid-tile>
Hallo,
ich habe gerade ein Update gemacht und es hat mir bei allen ftui-row Zeilen mit einem height Parameter die komplette Ansicht zerhackt.
Nachdem ich die height Angabe entfernt hab ist es einigermaßen passend wieder.
Scheibar wird height nicht mehr nur auf die entsprechende ftui-row.
Kann das geprüft werden?
VG
Olli
ja, an ftui-row height habe ich gestern was geändert. Es war falsch implementiert und funktioniert jetzt erst, wie es sollte.
100% muss sich auf die Höhe des Containers beziehen. Das tat es vorher nicht.
Deine height-Werte, vermutlich durch Probieren ermittelt, müssten angepasst werden.
Zitat von: setstate am 10 Dezember 2021, 10:30:02
ja, an ftui-row height habe ich gestern was geändert. Es war falsch implementiert und funktioniert jetzt erst, wie es sollte.
100% muss sich auf die Höhe des Containers beziehen. Das tat es vorher nicht.
Deine height-Werte, vermutlich durch Probieren ermittelt, müssten angepasst werden.
Alles klar, danke für die schnelle Antwort.
Ich habe hier ein Popup mit recht viel Text (DWD Warnwetter), mir ist so, daß der Text vor einiger Zeit noch umgebrochen wurde, wenn er nicht in die Box passte, jetzt wird er einfach zusammengeschoben(s.u.), wenn er nicht in die Box passt oder irre ich mich da?
Oder gibt es eine Möglichkeit, die ich übersehen habe, den Text in einem Label umzubrechen?
<ftui-column width="80%" class="semitransparent">
<ftui-row>
<ftui-label class="size-3" [text]="DWD:{{warn-number}}_headline"></ftui-label>
<ftui-label class="size-2" [text]="DWD:{{warn-number}}_description"></ftui-label>
<ftui-label [text]="DWD:{{warn-number}}_instruction"
[hidden]="DWD:{{warn-number}}_instruction | step(':true, .*:false')">
</ftui-label>
</ftui-row>
</ftui-column>
Zitat von: grossmaggul am 10 Dezember 2021, 11:41:29
Ich habe hier ein Popup mit recht viel Text (DWD Warnwetter), mir ist so, daß der Text vor einiger Zeit noch umgebrochen wurde, wenn er nicht in die Box passte, jetzt wird er einfach zusammengeschoben(s.u.), wenn er nicht in die Box passt oder irre ich mich da?
Oder gibt es eine Möglichkeit, die ich übersehen habe, den Text in einem Label umzubrechen?
<ftui-column width="80%" class="semitransparent">
<ftui-row>
<ftui-label class="size-3" [text]="DWD:{{warn-number}}_headline"></ftui-label>
<ftui-label class="size-2" [text]="DWD:{{warn-number}}_description"></ftui-label>
<ftui-label [text]="DWD:{{warn-number}}_instruction"
[hidden]="DWD:{{warn-number}}_instruction | step(':true, .*:false')">
</ftui-label>
</ftui-row>
</ftui-column>
Kann ich bestätigen.
Ja. im Label ist white-space: nowrap aktiv.
Ist bei setstate auf der Demo vom Label unter Long zusehen.
Dort sollte scroll aktiv sein. wird aber durch nowrap verhindert..
Abhilfe kann erstmal "nur" style="white-space: normal;" im Label helfen...
LG mr_petz
Edit: setstate hat was am Label geändert. Also testen ob es wieder geht...
ps: mit scroll Attribute wird jetzt umgebrochen...
Ich habe auch noch einen kleinen Fehler entdeckt - bei Segmented Buttons ist die Markierung für die aktive Auswahl etwas zu groß und zu weit nach rechts verschoben.
Kann man auch im Beispiel sehen:
https://knowthelist.github.io/ftui/www/ftui/examples/segment.html
Ist das Feld ganz links ausgewählt, kann man links noch einen grauen Rand erkennen, der Trenner rechts ist kaum sichtbar.
Ist das Feld ganz rechts ausgewählt, ist vom Trenner zur Markierung ein kleiner Abstannd, aber rechts geht die Markierung über die Leiste hinaus.
@setstate
Hi. Könntest du bitte beim popup in der class .window bei gesetzten shape="round" den border-radius von einer user.css ansprechen lassen?
Ich habe vieles versucht ohne Erfolg. Mir ist der Radius von 1.5em bissl zu stark..
Oder gib mir bitte einen Tip wie ich den Eintrag:
:host([shape="round"]) .window {
border-radius: 1.5em;
}
ansprechen kann.
Danke und LG mr_petz
So passt es von der Anordnung, Danke.
Noch etwas...
Ich möchte den Pfeil aus "ftui-dropdown" weg haben. Wenn ich in der "dropdown.component.css" die Schriftgröße auf 0 setzte passt es. Dies ist ja die schlechteste Möglichkeit für Änderungen.
:host:after {
font-size: 0rem;
}
Gibt es eine "user.css" ? Wie kann man diese Änderung dauerhaft implementieren?
So funktioniert es auch nicht:
<ftui-dropdown font-size="0" [list]="Rollo_EG_O_AZ:ftui"
[value]="Rollo_OG_O_Ankleide:pct"
(value)="Rollo_OG_O_Ankleide pct $value"></ftui-dropdown>
ich habe dafür jetzt erst einmal ein nochevron Attribute eingebaut. Namensvorschläge zur Umbenennung sind willkommen ;)
<ftui-dropdown list=",item1,item2,item3" value="item2" nochevron></ftui-dropdown>
Zitat von: mr_petz am 10 Dezember 2021, 15:16:02
@setstate
Hi. Könntest du bitte beim popup in der class .window bei gesetzten shape="round" den border-radius von einer user.css ansprechen lassen?
Ich habe vieles versucht ohne Erfolg. Mir ist der Radius von 1.5em bissl zu stark..
Oder gib mir bitte einen Tip wie ich den Eintrag:
:host([shape="round"]) .window {
border-radius: 1.5em;
}
ansprechen kann.
Danke und LG mr_petz
es gibt jetzt
--popup-border-radius
#pop3 {
--popup-border-radius: 0.5em;
}
Zitat von: stefan-dd am 10 Dezember 2021, 16:46:38
...
Gibt es eine "user.css" ? ...
Die musst du dir selber anlegen im themes-Ordner am besten und dann im <head> Bereich nach allen anderen css links mit einfügen.
Bsp.:
<link href="themes/user.css" rel="stylesheet">
@setstate
Danke funzt.
ftui-popup {
--popup-border-radius: 0.5em;
}
LG mr_petz
@setstate
Zum chevron Symbol hatte ich auch schonmal was geschrieben.
Bei mir wird es garnicht angezeigt, weil ich kein apple-system und keine Segoe UI Symbol-Schriftart besitze.
Es wird stattdessen ein X angezeigt.
Ich hatte damals darum gebeten ein anderes Symbol oder Zeichencode oder nur das kleine v zuverwenden.
Wäre das in einer anderen Form möglich das darzustellen oder das auch per Bsp.: --dropdown-content-chevron zu deklarieren?
Danke und LG mr_petz
Edit:
\02C5 (U+02C5)
sollte für alle Fonts gehen...
ich habe jetzt var(--dropdown-chevron, "\2335"); eingesetzt
Danke funktioniert ;)
Zitat von: blenni am 10 Dezember 2021, 13:41:42
Ich habe auch noch einen kleinen Fehler entdeckt - bei Segmented Buttons ist die Markierung für die aktive Auswahl etwas zu groß und zu weit nach rechts verschoben.
Kann man auch im Beispiel sehen:
https://knowthelist.github.io/ftui/www/ftui/examples/segment.html
Ist das Feld ganz links ausgewählt, kann man links noch einen grauen Rand erkennen, der Trenner rechts ist kaum sichtbar.
Ist das Feld ganz rechts ausgewählt, ist vom Trenner zur Markierung ein kleiner Abstannd, aber rechts geht die Markierung über die Leiste hinaus.
Kann ich so bestätigen, eben Update gemacht auf die aktuelle Version, da ist es jetzt bei mir auch so.
Gruß Markus
Ich möchte folgenden Code vereinfachen:
<ftui-icon [name]="Rollo_OG_O_Ankleide:position | map('0: fts_shutter_10, 10: fts_shutter_10, 20: fts_shutter_20, 30: fts_shutter_30, 40: fts_shutter_40, 50: fts_shutter_50, 60: fts_shutter_60, 70: fts_shutter_70, 80: fts_shutter_80, 90: fts_shutter_90, 100: fts_shutter_100, drive-up: fts_shutter_up, drive-down: fts_shutter_down')"
[color]="Rollo_OG_O_Ankleide:position | map('0: green, `.*`: red, d.*: yellow')"></ftui-icon>
Meine Idee wäre so:
map(': fts_shutter_.$value, drive-up: fts_shutter_up, drive-down: fts_shutter_down')"
Wie kann ich die Werte für den Bildnamen zusammensetzen? fts_shutter_.$value
Das geht nicht. Selbst wenn, es gibt keine icons für _66, _67, _68 usw.
Update:
Ich habe nochmal drüber nachgedacht. $value Ersetzung ist schnell eingebaut gewesen und die Fallunterscheidung bekommt man mit RegEx gut gelöst.
Die Anforderung macht also durchaus Sinn
<ftui-label [text]="dummy2 | map('`0|1|2|3`: battery-$value, `.*`: battery')"></ftui-label>
<ftui-icon [name]="dummy2 | map('`0|1|2|3`: battery-$value, `.*`: battery')"></ftui-icon>
Hi setstate.
Geht das dann mit color step/map genauso?
LG mr_petz
Ich habe das nicht in die einzelnen Funktionen eingebaut, sondern nur am Ende der Pipe als Replace
Wenn die Pipe also ein MyIcon_$value ausspuckt, wird am Ende $value durch den Wert des Readings ersetzt => MyIcon_42
geht bei allen Attributen und mit allen Pipe-Funktionen
Was willst du bei color damit machen?
Das war ne dumme (unüberlegte) Frage von mir. Bei color macht es doch keinen sinn oder?
Sorry...
Kann ich circlemenu dazu bringen, mit allen Teilen immer im Browserfenster zu bleiben ?
Gegebenenfalls das Menu auch zu verschieben ?
ZitatGegebenenfalls das Menu auch zu verschieben ?
Hallo Wolfgang,
du könntest die einzelnen Einträge natürlich mit CSS positionieren.
Zusätzlich kannst du dir mal das "direction" Attribut anschauen.
VG, Thomas
Hallo setstate, hallo mr_petz,
wegen des ftui-image und Webcambild habe ich jetzt mal von der Netzwerkanalyse einen Screenshot mit angehängt.
Wenn ich die verwendete URL im Browser aufrufe und per F5 aktualisiere, bekomme ich jedes Mal ein aktualisiertes Webcam-Bild.
Sobald ich das per ftui-image einbinde und das Attribut interval verwende, erscheint jedoch kein Bild mehr auf meiner Seite.
<ftui-popup id="popKameraGarten1" position="page" timeout="60" width="1200px" height="700px">
<header>Kamera - Garten 1</header>
<ftui-image src="http://192.168.178.44/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=user=XXXXXX&password=XXXXXX" user="XXXXXX" pass="XXXXXX" interval="10" nocache height="650px"></ftui-image>
</ftui-popup>
In der Netzwerkanalyse sehe ich dass er jedoch ein aktualisiertes Bild laden kann, es mir aber auf der Seite nicht ausgibt.
Könnt ihr das anhand des Screenshots nachvollziehen?
VG, Thomas
Danke.
Dann muesste ich in CSS eingreifen - nur sehr ungern.
Wahrscheinlich wuerde es mir schon helfen, wenn 'vertical' neben oben oder unten auch links oder rechts verstehen wuerde.
Mal sehen, vielleicht packe ich es in ein popup, dann erscheint es mittig.
@ToM_ToM
Eine Frage Vorweg. Wieso hast du ein extra user und pass vergeben? Du hast doch in der url schon user und pass drin...
<ftui-image src="http://192.168.178.44/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=user=XXXXXX&password=XXXXXX" user="XXXXXX" pass="XXXXXX" interval="10" nocache height="650px"></ftui-image>
Edit: Das könnte zum Fehlverhalten führen...
LG mr_petz
ZitatWieso hast du ein extra user und pass vergeben? Du hast doch in der url schon user und pass drin...
@mr_petz: Wenn ich die Attribute weglasse, zeigt mir
ftui-image nur an: "Image not available" (siehe Anhang).
Wenn ich das Bild per
html img einbinde, bekomme ich es korrekt angezeigt. Allerdings habe ich dann ja wieder keine regelmäßige Aktualisierung.
<img src="http://192.168.178.44/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=user=XXXXXX&password=XXXXXX"></img>VG, Thomas
Zitat von: mr_petz am 07 November 2021, 17:39:00
@StephanFHEM
Hi, ich habe hier einen einfachen Timerset um den WeekdayTimer zu füttern und auszulesen.
Ich habe den in anderer Form für meine HeizungsTimer genutzt und für den WeekdayTimer umgebaut.
Vielleicht kann man darauf aufbauen den wdtimer_widget zu portieren.
finde jetzt langsam wieder etwas Zeit für FTUI und hab mir deinen Timer mit einem WeekdayTimer von mir angeschaut (Weihnachtsbeleuchtung). Das sieht soweit echt gut aus. Falls du es noch updaten möchtest könntest du noch den Fall "active" mit einbauen. Der Timer zeigt normal on oder off aber ist bis zu einer ersten Schaltung im Status "active".. in diesem Fall spuckt dein Modul eine hässliche Fehlermeldung auf dem Tablet aus...
@StephanFHEM
Wäre gut wenn du den Fehler zeigst und was genau wird activ geschalten? In Fhem der Timer den du in meinem Modul an und aus schalten kannst?
Edit: oder meinst du den state active im WeekdayTimer?
LG mr_petz
Zitat von: ToM_ToM am 11 Dezember 2021, 20:29:04
@mr_petz: Wenn ich die Attribute weglasse, zeigt mir ftui-image nur an: "Image not available" (siehe Anhang).
Wenn ich das Bild per html img einbinde, bekomme ich es korrekt angezeigt. Allerdings habe ich dann ja wieder keine regelmäßige Aktualisierung.
<img src="http://192.168.178.44/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=user=XXXXXX&password=XXXXXX"></img>
VG, Thomas
Du scheinst einen Fehler in der url zu haben! Du hast "...&rs=user=XXXXX..."
Hinter rs= sollte was stehen.
Snap URL:
http://(ip address)/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=(any combination of numbers and letters)&user=(user name)&password=(user password)
probiere bitte nochmal so:
<ftui-popup id="popKameraGarten1" position="page" timeout="60" width="1200px" height="700px">
<header>Kamera - Garten 1</header>
<ftui-image src="http://192.168.178.44/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=wuuPhkmUCeI9WG7C&user=XXXXXX&password=XXXXXX" interval="10" nocache height="650px"></ftui-image>
</ftui-popup>
natürlich mit deinen richtigen user und password...
LG mr_petz
Zitat von: mr_petz am 11 Dezember 2021, 22:45:44
Edit: oder meinst du den state active im WeekdayTimer?
Jup
Zitat von: Schalter am 03 Dezember 2021, 00:09:43
Im segment.component.js gibt es die Funktion für "next" und "back". Leider scheitert es an der Umsetzung des Befehls. In der Swiper Beispielsweise steht irgendwas von <ftui-icon name="chevron-left" onclick="swiper2.back()"></ftui-icon> , das trifft aber leider nicht auf Segment zu. Hat jemand ne Idee wie der Befehl beim Segment angefügt wird?
Dieser Code ist jedenfalls falsch:
<ftui-segment-button value="back()">
<ftui-icon name="chevron-left" size="3"></ftui-icon>
</ftui-segment-button>
Niemand eine Idee?
@Schalter
In einem der Segment-Beispiele gibt es die Zustände "Home", "Sleep", "Absent" sowie "Holiday".
Um diese z.B. über Icons durchzuschalten, das ausgelieferte Beispiel leicht erweitert ...
<ftui-segment id="segment2" [value]="ftuitest:home" (value)="setreading ftuitest:home">
... hier stehen die einzelnen Zustände ...
</ftui-segment>
<ftui-icon name="chevron-left" onclick="segment2.back()"></ftui-icon>
<ftui-icon name="chevron-right" onclick="segment2.next()"></ftui-icon>
Über die beiden Icons kann man dann ohne einen Zustand selbst anzuklicken, die Zustände aktivieren ...
ZitatDu scheinst einen Fehler in der url zu haben! Du hast "...&rs=user=XXXXX..."
Guten Morgen mr_petz, ich habe mir schon gedacht dass da was falsch ist. Aber bin nie auf die Idee gekommen, da mal irgendwas zum Test einzusetzen.
Jetzt läuft es endlich wie es sein soll. :)
Vielen Dank!
LG, Thomas
Zitat von: StephanFHEM am 12 Dezember 2021, 01:20:45
Jup
Der state kann ja mehrere Zustände haben.
off und active oder?
Hinzu kommt noch disabled 0/1?
Wie war es in dem FTUI2 widget mit dem switchstate?
Ich habe mal den Fehler behoben.
Wenn state active===switch on
und wenn state oder currValue off===switch off.
Jetzt muss ich nur noch wissen wie es sich mit disabled verhält...
Teste es bitte einfach nochmal..
LG mr_petz
Zitat von: ToM_ToM am 12 Dezember 2021, 10:09:04
Guten Morgen mr_petz, ich habe mir schon gedacht dass da was falsch ist. Aber bin nie auf die Idee gekommen, da mal irgendwas zum Test einzusetzen.
Jetzt läuft es endlich wie es sein soll. :)
Vielen Dank!
LG, Thomas
Immer wieder gern.
4 Augen sehen mehr als 2 ;)
LG mr_petz
Zitat von: StephanFHEM am 12 Dezember 2021, 01:20:45
Jup
lag wohl doch nicht daran. Es lief mit einem alten Timer der disabled war. Sobald ich den Enabled habe lief es nicht mehr. Und auch die erste Schaltung in FHEM direkt und somit die STATE-Änderung von "active" auf "on" brachte keine Lösung...
daher jetzt doch hier die Fehlermeldung als Screen (Text lies sich leider nicht kopieren)
Hast du jetzt schon die neue Version geladen?
ok... mit deiner neuen Version läuft es jetzt doch (hatte die nicht gesehen). Er zeigt auch Timer an die disabled sind. Man kann sie auch wieder aktivieren. Aber die Checkbox rutscht immer wieder rüber auf aktivieren wenn man es deaktivieren will. Das deaktivieren geht also nicht. Ist für mich aber erstmal lauffähig. Und Zeiten kann ich auch umstellen. Super!
Achso..
disabled timer erscheinen sonst nicht im alten widget?
Deswegen hatte ich ja gefragt wie es im alten widget lief mit disabled,on,off,active???
Edit: Ist der switch nur zum disablen da? Wie sieht man ob der timer an ist wenn disabled=0 (eine extra Anzeige?)?
Ich habe jetzt im alten widget geschaut. Da wird der view rot bei disabled. Werde ich auch so umsetzen...
@StephanFHEM du darfst nochmal testen bitte :)
switch ist jetzt nur zum disablen und enablen da...
LG mr_petz
Ist es Absicht, dass bei jedem Update alle Icons nachgeladen werden ?
Waehrend die Achsenbeschriftung den globalen Einstellungen zu folgen scheint, also etwa 12:00, 18:00 usw., fuehrt die Popup-Anzeige ein Eigenleben :
12:00:00 pm, 6:00:00 pm.
Gleiches gilt bei der Datumsanzeige.
Vielleicht kann man das anpassen ?
Zitat von: setstate am 10 Dezember 2021, 10:30:02
ja, an ftui-row height habe ich gestern was geändert. Es war falsch implementiert und funktioniert jetzt erst, wie es sollte.
100% muss sich auf die Höhe des Containers beziehen. Das tat es vorher nicht.
Deine height-Werte, vermutlich durch Probieren ermittelt, müssten angepasst werden.
Ich habe die gleichen Probleme (heute nach dem Update) mit width-Werten.
<table width="100%"> schießt aus dem Container raus.
Das funktionierte vorher tadellos.
Auch wenn man aus einem popup 1 heraus ein popup 2 öffnet, welches kleiner ist als popup 1, wird alles abgeschnitten wirkt.
Gruß
Sailor
Ich habe es wieder hinbekommen
Meine Frage da ich kein Update gemacht habe, sondern heute nur die Monatsanzeige von Dezember berichtigt in der ftui.helper.js.
Aber mein FTUI zeigt mir nun die Zahlen alle rot umrandet, was ja ein Fehler bedeutet soweit ich es weiß.
Habe ich irgendwo etwas verpaßt.? Ich weiß des es sicher etwas mit den farben zutun hat.
Ich hatte letztens erst das Thema mit map und step geändert..!!
@setstate
Wurde auch an ftui-popup geschraubt?
Seit dem letzten Update funktioniert das Schließen des Popups nicht mehr wenn es von einem Reading aus FHEM getriggert wird.
<ftui-popup id="popup-ipcam-haustuer" timeout="60" [open]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:true, off:false')" width="86.5%" height="91.5%" @close="sendFhem('set System_FTUI_IPcam_Haustuer_PopUp_Anzeigen off')">
<header>Kamera Haustür</header>
<ftui-content file="./_contents/tablet-flur/content-popup-ipcam-haustuer.html"></ftui-content>
</ftui-popup>
"System_FTUI_IPcam_Haustuer_PopUp_Anzeigen" ist ein FHEM Dummy welches den Status on oder off erhalt (getriggert z.B. von einem Klingelsensor.
Wenn ich das Popup manuel ansteuere z.B. über ein ftui-icon oder ein ftui-butten lässt sich das Popup danach auch einwandfrei schließen.
Grüße
Olli
Wie kann ich dieses Event nachverfolgen ?
Fuehrt zu :
_proto.alpha = function alpha(a) {
this._rgb.a = n2b(a);
return this;
};
Zitat von: mr_petz am 12 Dezember 2021, 14:39:13
@StephanFHEM du darfst nochmal testen bitte :)
switch ist jetzt nur zum disablen und enablen da...
Hab es getestet und funktioniert jetzt einwandfrei. Super!
Zitat von: octek0815 am 13 Dezember 2021, 17:44:33
@setstate
Wurde auch an ftui-popup geschraubt?
Seit dem letzten Update funktioniert das Schließen des Popups nicht mehr wenn es von einem Reading aus FHEM getriggert wird.
<ftui-popup id="popup-ipcam-haustuer" timeout="60" [open]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:true, off:false')" width="86.5%" height="91.5%" @close="sendFhem('set System_FTUI_IPcam_Haustuer_PopUp_Anzeigen off')">
<header>Kamera Haustür</header>
<ftui-content file="./_contents/tablet-flur/content-popup-ipcam-haustuer.html"></ftui-content>
</ftui-popup>
"System_FTUI_IPcam_Haustuer_PopUp_Anzeigen" ist ein FHEM Dummy welches den Status on oder off erhalt (getriggert z.B. von einem Klingelsensor.
Wenn ich das Popup manuel ansteuere z.B. über ein ftui-icon oder ein ftui-butten lässt sich das Popup danach auch einwandfrei schließen.
Grüße
Olli
Hi Olli.
Könntest du anstatt mit [open] mal mit [hidden] testen ob es da auch so ist?
Müsstest dann halt nur on und off tauschen in der Definition...
Also so z.Bsp.:
<ftui-popup id="popup-ipcam-haustuer" timeout="60" [hidden]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:false, off:true')" width="86.5%" height="91.5%" @close="sendFhem('set System_FTUI_IPcam_Haustuer_PopUp_Anzeigen off')">
<header>Kamera Haustür</header>
<ftui-content file="./_contents/tablet-flur/content-popup-ipcam-haustuer.html"></ftui-content>
</ftui-popup>
Edit:
Wieso sendest du bei @close dass der System_FTUI_IPcam_Haustuer_PopUp_Anzeigen auf off gehen soll. Der wird doch von [open] oder [hidden] getriggert. Der ist doch dann schon auf off wenn er getriggert wurde oder verstehe ich was falsch???Edit2: Achso verstehe jetzt das @close von dir, wenn du es manuell schließen willst...
LG mr_petz
Zitat von: mr_petz am 15 Dezember 2021, 14:45:12
Hi Olli.
Könntest du anstatt mit [open] mal mit [hidden] testen ob es da auch so ist?
Müsstest dann halt nur on und off tauschen in der Definition...
Also so z.Bsp.:
<ftui-popup id="popup-ipcam-haustuer" timeout="60" [hidden]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:false, off:true')" width="86.5%" height="91.5%" @close="sendFhem('set System_FTUI_IPcam_Haustuer_PopUp_Anzeigen off')">
<header>Kamera Haustür</header>
<ftui-content file="./_contents/tablet-flur/content-popup-ipcam-haustuer.html"></ftui-content>
</ftui-popup>
Edit: Wieso sendest du bei @close dass der System_FTUI_IPcam_Haustuer_PopUp_Anzeigen auf off gehen soll. Der wird doch von [open] oder [hidden] getriggert. Der ist doch dann schon auf off wenn er getriggert wurde oder verstehe ich was falsch???
Edit2: Achso verstehe jetzt das @close von dir, wenn du es manuell schließen willst...
LG mr_petz
Hi mr_petz,
auf hidden reagiert Popup gar nicht.
Grüße
Olli
Eigenartig. hidden sollte auch funktionieren im popup.
ps. trigger gibt es ja auch noch...
LG mr_petz
Edit: in einer älteren Version reichten sogar diese Definitionen:
[open]="dummy | map('off:false')"
[hidden]="dummy | map('off:true')"
Hat sich in den letzten Tagen etwas wesentliches geaendert ?
Das GUI ist mehr oder weniger traege, manchmal so gut wie gar keine Antwort, alles dauert endlos.
Allerdings nicht immer, und ich kann es nicht provozieren.
Hey,
V3 sieht echt klasse aus. Ich bin gerade dabei mein V2 auf V3 neu zu bauen.
Jetzt bin ich am Switch gelandet, der soll aber nicht auf on, off reagieren, sondern active und inactive.
Wie bekomme ich das hin?
In V2 war das so:
<div data-type="checkbox" data-device='alarm_scharf_auto_on'
data-get-on="!off" data-get-off="inactive"
data-set-on="active" data-set-off="inactive"
class="inline left-space green"></div>
in V3 bin ich soweit:
<ftui-switch [(value)]="alarm_scharf_auto_on"></ftui-switch>
aber wie teile ich es hier mit?
Vielen Dank schonmal für eure Hilfe!
MfG
netlars
@netlars
Das erreichst du mit:
<ftui-switch [(value)]="alarm_scharf_auto_on" states="active,inactive"></ftui-switch>
LG mr_petz
@mr_petz
Vielen Dank, jetzt kann ich ein und ausschalten, das funktioniert.
Aber bei einem Refresh, wird der Status nicht ausgelesen, es ist im übrigen in Fhem eine at Funktion, die ich da ein und ausschalten möchte.
Hat denn dein Device alarm_scharf_auto_on im state die stati active und inactive?
Wenn nein, musst du die Bananas aus der Box holen und für die Box das entsprechende Device:Reading einsetzten was die states hat...
Also [] und () trennen.
Kurz wegen Handy...
Edit: ein at hat "Next+Zeit" im state...
der State active wird nirgends dargestellt, wenn aktiv ist steht im State Next: 22:30:00 z.B.
wenn inactive dann seht im State inactive.
in einer anderen Variable, wird es nicht abgespeichert.
Dann müsstest du dafür ein userReading erstellen denke ich.
Oder was sagen die Profis hier?
Edit: oder erstellst einen dummy der dann dein at schaltet und den du dann als switch nimmst...
geht doch bestimmt mit replace('Next','active') oder so zu realisieren. Nur ich komm mit dem regex nicht klar. Next+x weitere Zeichen ersetzen?
<ftui-switch [value]="AtSeven | map('`Next.*`:active')" (value)="AtSeven" states="inactive,active"></ftui-switch>
Du musst nur das mappen: Next.* => active
alles andere kann so durch: inactive => inactive
top, danke. Bin der Meinung heute schonmal .* probiert zu haben.
Aber nicht mit getrennten () []
Hier noch die Lösung:
<ftui-switch [value]="alarm_scharf_auto_on | map('Next.*: active')" states="inactive,active" (value)="alarm_scharf_auto_on"></ftui-switch>
Noch zu state von einem at :
Next+Zeit steht dort nur, wenn das at aktiv ist, setzt man es suf inaktiv, steht dort inactive.
Problem : Modifiziert man die Zeit des at, geht der zugehoerige Button in FTUI3 in den Zustand 'on', was aber gelogen ist.
Damit der Zustand mit der Anzeige uebereinstimmt, muss ich den Button einmal durchschalten.
Zitat von: Wolfgang Hochweller am 17 Dezember 2021, 09:20:05
Noch zu state von einem at :
Next+Zeit steht dort nur, wenn das at aktiv ist, setzt man es suf inaktiv, steht dort inactive.
Problem : Modifiziert man die Zeit des at, geht der zugehoerige Button in FTUI3 in den Zustand 'on', was aber gelogen ist.
Damit der Zustand mit der Anzeige uebereinstimmt, muss ich den Button einmal durchschalten.
Das wurde in den vorhergehenden Beiträgen beschrieben wie es anzuwenden ist.
Am besten wie setstate schrieb mit map('Next.*: active'). (wobei auch ein map('N.*: active') reichen würde)
Die Zeit hinter Next ist dann egal!
Das kannst du auch im button so machen. Zum sichtbar machen könntest du mit color und label oder icon arbeiten:
Habe es gerade mal nachgestellt...
Bsp.:
<ftui-button [value]="dein_at_Device | map('N.*:active')"
(value)="dein_at_Device"
[color]="dein_at_Device | map('N.*:green,inactive:blue')"
states="inactive,active">
<ftui-label [text]="dein_at_Device | map('N.*:An,inactive:Aus')"></ftui-label>
</ftui-button>
Edit: Wichtig hierbei sind die states="inactive,active"!
LG mr_petz
Mir ist eben bei den Wettersymbolen aufgefallen, das ein Bild bzw. Mapping fehlt.
ProplantaICON t12 Nebel HAZE aus Meteocons
@netlars
Meteocons haben kein mapping auf Night und wie du sagst Nebel und paar Andere.
Und keine Icons dafür!
Du musst bei ProplantaICON dazu das bas oder kleinklimaFHEM icon-set verwenden:
Bsp.:
<ftui-weather size="7" provider="proplantaICON" icon-set="kleinklimaFHEM" path="../images/default/weather/" [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>
LG mr_petz
ok, danke für die Info.
Ich fande die gerade schick, passend zum Design.
Die bas Icons sind auch so ähnlich, aber halt animiert und farbig...
https://bas.dev/projects/weather-icons
Weiter unten sind die unfilled...
Edit: wobei es hier bei meteocons auch Nebel und Nacht Icons etc gibt...
https://www.alessioatzeni.com/meteocons/
könnte setstate vielleicht mit integrieren...
Nein die icons hat setstate bereits drin. Da fehlt "nur" das mapping...
hhm, besser, aber nicht ganz.
Hier ein FTUI-Listing :
<ftui-row>
<ftui-button shape="circle"
[value]="StromAus | map ('Next.*: active')"
(value)="StromAus" states="inactive, active"
[fill]="StromAus | map('Next.*:solid')">
<ftui-icon name="power-off"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row>
<ftui-timeset
[(value)]="StromAusDummy"
color="yellow"
class="size-3">
</ftui-timeset>
</ftui-row>
<ftui-row>
<ftui-label text="Warmwasser aus" color="white" size="2"></ftui-label>
</ftui-row>
Sprich,
1. ein Button zum aktiv/nichtaktiv schalten
2. ein timeset fuer das Setzen der Zeit
3. ein Label
Was passiert ?
Startzustand :
Button : Aus
Timeset zeigt eine Zeit
Ich waehle eine neue Zeit, die wird auch per modify timespec an das at weitergerecht und dort eingetragen.
Sonst soll und darf erstmal nichts passieren, und Button sieht immer noch 'aus' aus
Wenn ich jetzt den Button betaetige, erhalte ich als ausgefuehrtes Kommando :
a - wenn oben steht
(value)="StromAus" states="inactive, active"
passiert das hier :
set StromAus inactive
Erwarten wuerde ich
set StromAus active
b- Wenn ich oben active und inactive vertausche,
schiebt sich das Problem ein Stueck weiter.
Ist der Button 'on', geht er nach Timeset erstmal aus, was gar nicht stimmt.
Lange Rede, kurzer Sinn :
Das Ausfuehren des timeset ( also das 'modify timespec' des at ) wirkt auf den Button, obwohl die Anleitung explizit sagt, das ein Modify des Timespec kein Event erzeugt.
Wie genau modifizierst du deine Zeit im at?
Ich frage nur wegen einer Nachstellung!
Zitat von: OdfFhem am 12 Dezember 2021, 08:15:28
@Schalter
In einem der Segment-Beispiele gibt es die Zustände "Home", "Sleep", "Absent" sowie "Holiday".
Um diese z.B. über Icons durchzuschalten, das ausgelieferte Beispiel leicht erweitert ...
Vielen Dank, ich probier mal rum. Die Segment Button Exmaple-Datei hatte ich übersehen.
Hier das Listing des Notify, dass den Timer modifiziert :
Internals:
DEF HeizungSchlafStromAnDummy:.* {fhem("modify HeizungSchlafStromAn *$EVENT");}
FUUID 61b868ea-f33f-775d-82de-48a6e809422b6c41
NAME n_HeizungSchlafStromAn
NOTIFYDEV HeizungSchlafStromAnDummy
NR 403
NTFY_ORDER 50-n_HeizungSchlafStromAn
REGEXP HeizungSchlafStromAnDummy:.*
STATE active
TYPE notify
READINGS:
2021-12-19 14:19:11 state active
Attributes:
room Verbrauch
Das Timeset versorgt den Dummy mit der gewuenschten Zeit, das Notify uebertraegt sie in das at-Kommando.
Ich bin fast sicher, dass das nicht ein FTUI-Problem, sondern ein FHEM-Problem ist, aber in FTUI3 ist es mir halt aufgefallen.
Gibt es mehr Info zu dem in Antwort #1813 erwaehnten Chart-Fehler ?
Hi, ich verwende FTUI3 nun schon geraume Zeit. Vielen Dank für die großartige UI !
Bisher hab ich immer wieder schöne neue Lösunge gefunden und meine FHEM UI ständig erweitert.
Nun hab ich doch auch mal eine Frage:
Das hidden Attribut verwende ich seit geraumer Zeit, hat immer funktioniert (bis einschließlich 20.11.21).
Mit der aktuellen Version aus dem git (heruntergeladen 12.12.21) bring ich das nicht mehr hin.
Beispiel, ein Label soll angezeigt werden, wenn test=auto, und versteckt wenn test=off:
Ich lade die Seite, während test=auto: Das Viewitem wird angezeigt.
Durch das Setzen des Readings test=off wird das Viewitem versteckt - soweit so richtig. Aber dies bleibt es auch fortan.
Durch Setzen von test=auto wird das Viewitem nicht mehr angezeigt.
Erst wenn ich die Seite neu während test=auto neu lade, wird das Viewitem wieder angezeigt.
Mit der Version vom 20.11. wird das Viewitem mit Änderung des Readings versteckt und wieder angezeigt.
<!DOCTYPE html>
<html>
<head>
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/mobile-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<ftui-view>
<ftui-view-section>
<ftui-label slot="header">Test</ftui-label>
<ftui-view-item [hidden]="dummy:test | map('auto:false, off:true')">
<ftui-label slot="start">Test</ftui-label>
</ftui-view-item>
</ftui-view-section>
</ftui-view>
</body>
</html>
Hat jemand eine Idee ?
Fehlt mir irgendwas zu der neuen FTUI3 Version ?
In den Codes von FTUI3 finde ich keine Unterschiede, die das Verhalten erklären könnten.
Noch einen schönen 4. Advent
Gruß Torsten
danke für den Hinweise.
Es gab tatsächlich seit dem $value patch Probleme mit Boolean Attributes (wie hidden)
Sollte jetzt gelöst sein.
Hallo,
ich bin noch bei den Basics.
Bei ftui-label hätte ich den Zahlenwert gern abhängig farbig. Aber irgendwas mache ich falsch:
<ftui-label [text]="coronaSpreadCounties:392_cases7_per_100k | round(0)" | map('0:green, 35:orange, 50:red, 100:yellow, 500:danger')" unit="" interval="3600" class="size-0 bold">
</ftui-label>
<ftui-label [text]="coronaSpreadCounties:392_cases7_per_100k | round(0)" unit="" interval="3600" class="size-0 bold"
[color]="coronaSpreadCounties:392_cases7_per_100k | map('0:green, 35:orange, 50:red, 100:yellow, 500:danger')">
</ftui-label>
Beide Versionen funktionieren nicht. Wo ist mein Fehler?
Du musst da step statt map nehmen.
LG mr_petz
@setstate Vielen Dank, das war ja eine superschnelle Reaktion und Lösung.
Das Thema hidden aus Reading funktioniert nur halb, ist tatsächlich gelöst ! Das Bool wird wieder richtig übernommen.
Wünsche allen noch eine besinnliche Weihnachtszeit und guten Rutsch...
Zitat von: mr_petz am 20 Dezember 2021, 05:43:16
Du musst da step statt map nehmen.
Danke! Super, ganz schick!
Leider habe ich nicht verstanden warum das so ist. Und warum es neben map auch noch step gibt - hat das einen Grund, den ich verstehen muss? Oder buche ich das unter "ISSO!"?
Ich denke mal, map deckt Werte ab, step dagegen Bereiche.
Hi, wegen dem Unterschied step und map hatte yersinia das schon mal gut erläutert:
https://forum.fhem.de/index.php/topic,123701.msg1182722.html#msg1182722
LG mr_petz
Wie modifiziert man denn ein at?
mit folgendem Befehl verändert die Zeit sich nicht.
<ftui-timeset class="size-2" [value]="kueche_heizung_an:TIMESPEC" (value)="kueche_heizung_an"></ftui-timeset>
Es wird zwar die aktuell eingestellte Uhrzeit angezeigt, aber nicht verändert. Wenn ich bei (value) TIMESPEC mit übergeben geht es ebenfalls nicht.
das geht ueber modifyTimespec.
Check mal die Referenz fuer at.
boah, danke.
Auf diesen Befehl muss man erstmal kommen
<ftui-timeset class="size-2" [value]="kueche_heizung_an:TIMESPEC" (value)="kueche_heizung_an:modifyTimeSpec"></ftui-timeset>
Ich habe seit mehreren Tagen ein Riesenproblem mit den FTUI3-Seiten.
Am Anfang sieht das alles sehr gut aus, aber nach wenigen Seitenwechseln wird es mehr oder weniger instabil :
Eingaben werden nicht mehr angenommen, das Gui zeigt Fehler,
Popups bleiben dunkel, etc.
Nur selten erholt sich das System dann wieder, meist braucht es einen Neustart.
Irgendeine Idee, wie ich das nachverfolgen koennte ?
Moeglicherweise ein Memory-Problem ?
Ich habe den Eindruck, dass Geraete mit mehr Speicher laenger durchhalten....
Mehr Info :
Ich kann das auf allen Android-Tablets mit Chrome erleben, nicht auf einem Windows-PC, ebenfalls mit Chrome
Aeussern tut es sich z. B. auf folgende Weise:
Klicke ich ein Circle-Menu an, wird normalerweise der Hintergrung abgedunkelt, die einzelnen Positionen des Menus erscheinen hell leuchtend.
Auf den Android-Tablets geht das nur einige Male, nach kurzer Zeit haengt das ganze System, Hintergrund und Menuteile sind abgedunkelt, nichts geht mehr.
Teilweise fehlen dann auch Menuteile, also Neustart.
@netlars :
Ich meine, die meisten loesen das ueber ein Dummy, das die Zeit haelt , ueber Timeset oder auch manuell gefuellt wird, waehrend ein Notify auf den Dummy dann die Zeit ins at uebertraegt.
Zitat von: Wolfgang Hochweller am 20 Dezember 2021, 11:54:00
@netlars :
Ich meine, die meisten loesen das ueber ein Dummy, das die Zeit haelt , ueber Timeset oder auch manuell gefuellt wird, waehrend ein Notify auf den Dummy dann die Zeit ins at uebertraegt.
ja, das ist aber zu umständlich. Vielen Dank für den Denkansatz.
Obiger Code von mir funktioniert.
Prima, danke.
Hallo in die Runde.
Ich suche in FTUI3 eine Möglichkeit, gefilterte Inhalte darzustellen.
Ideal wäre die Anzeige des Inhalts einer vorhandenen Readingsgroup - dazu scheint es aber noch kein Modul zu geben..? Gäbe es Stand heute Alternativen?
Danke und Gruß
Ralph
Funktioniert "data-substitution" schon? Bzw. wird wird dies angewendet? Oder gibt es eine einfache Alternative?
Zitat von: stefan-dd am 20 Dezember 2021, 23:06:18
Funktioniert "data-substitution" schon? Bzw. wird wird dies angewendet? Oder gibt es eine einfache Alternative?
Du meinst bestimmt das hier oder?:
https://github.com/knowthelist/ftui#pipes
LG mr_petz
Zitat von: octek0815 am 13 Dezember 2021, 17:44:33
@setstate
Wurde auch an ftui-popup geschraubt?
Seit dem letzten Update funktioniert das Schließen des Popups nicht mehr wenn es von einem Reading aus FHEM getriggert wird.
<ftui-popup id="popup-ipcam-haustuer" timeout="60" [open]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:true, off:false')" width="86.5%" height="91.5%" @close="sendFhem('set System_FTUI_IPcam_Haustuer_PopUp_Anzeigen off')">
<header>Kamera Haustür</header>
<ftui-content file="./_contents/tablet-flur/content-popup-ipcam-haustuer.html"></ftui-content>
</ftui-popup>
"System_FTUI_IPcam_Haustuer_PopUp_Anzeigen" ist ein FHEM Dummy welches den Status on oder off erhalt (getriggert z.B. von einem Klingelsensor.
Wenn ich das Popup manuel ansteuere z.B. über ein ftui-icon oder ein ftui-butten lässt sich das Popup danach auch einwandfrei schließen.
Grüße
Olli
Das Problem wurde mit den letzten Änderungen an FTUI behoben. Vielen Dank dafür!
In bin in den Anfängen der Umstellung von FTUI auf FTUI3 und tue mich etwas schwer: Mir fehlt eine nachvollziehbare Doku. Also bitte nicht falsch verstehen: Ich finde toll, was gemacht wird.
Aktuell krampfe ich an der Temperaturanzeige - da vorab die Frage: Gibt es andere Möglichkeiten als nur das Kreissegment? Löst ihr das anders?
Derzeit sieht das bei mir so aus - und meine Frage ist, ob man die Breite des Halbkreises ändern (hier: verkleinern) kann. Zusatzfrage: Wie mache ich die Textausgabe der Temperatur bold?
<ftui-grid-tile row="2" col="6" height="1" width="1" color="black">
<ftui-knob [(value)]="Temperatur_Blumen_Flur:temperature"
[color]="Temperatur_Blumen_Flur:temperature | step('10:blue,21:green,23:warning,25:danger')"
height="90" width="90" offset-y="10" type="arc" min="-20" max="40" unit="°C" readonly
has-value-text value-size="20px" stroke-width="1" decimals="1">
<ftui-label>Flur</ftui-label>
</ftui-knob>
</ftui-grid-tile>
@curt
Schau dir immer am besten die Demos von setstate an und oder überfliege den Thread hier auch wenn er sehr groß ist...:
https://github.com/knowthelist/ftui/tree/master/www/ftui/examples
Hier kann man schon viel rauslesen wie was geht....
Zum verkleinern nimmst du stroke-width (ist auch so in der Demo).
<ftui-knob [(value)]="AvReceiver-volume" max="50" stroke-width="25"></ftui-knob>
in deiner Variante musst du statt type="arc" has-arc nehmen dass stroke-width zieht..:
<ftui-knob [(value)]="Temperatur_Blumen_Flur:temperature"
[color]="Temperatur_Blumen_Flur:temperature | step('10:blue,21:green,23:warning,25:danger')"
height="90" width="90" offset-y="10" has-arc min="-20" max="40" unit="°C" readonly
has-value-text value-size="20px" stroke-width="1" decimals="1">
</ftui-knob>
Um den Text fett zu haben, gibst du einfach bold im class mit:
<ftui-label class="size-1 bold" text="Mein Text"></ftui-label>
in der ftui.css kannst du nachschauen was es alles für Klassen gibt (die mit vorangestellten dot):
https://github.com/knowthelist/ftui/blob/master/www/ftui/ftui.css
Edit: es scheint type="arc" nicht an stroke-width gebunden zu sein!
LG mr_petz
Ich nutze das Wetter von Proplanta.
Es gibt schon Ausführungen zu den Wettericons, aber irgendwie ist alles undurchsichtig und man bekommt es nicht Ideal hin.
Mit diesen Readings scheint auch in der Nacht die Sonne.
fc0_weather00
stark bewölktDie Readings unter dieser Verlinkung sind einfach nicht schön, unterscheiden aber Tag und Nacht.
fc0_weather00Icon
https://www.proplanta.de/wetterdaten/images/symbole/n4.gif
Kann man diese auch Nutzbar für individuelle Icons machen? z.B. Das n4 selektieren und unter einem extra Icon Ordner nutzbar machen.
Zitat von: mr_petz am 13 Oktober 2021, 08:19:04
Hi. Du brauchst keinen provider und icon-set mit angeben wenn du die Standardicons haben willst.
Hier mal eine Demo ohne dein Device anzusprechen. Nur um zu sehen ob deine Icons auch vorhanden sind:
<ftui-weather size="1" condition="sonnig"></ftui-weather>
Die Sonne sollte jetzt angezeigt werden.
Wenn ja sollte das so funktionieren:
<ftui-weather size="3" [condition]="ProPlanta:fc1_weather06"></ftui-weather>
proplanta Provider ist Standard und muss nicht angegeben werden.
Die Standardicons sind die von dem Demobild auf Github.
Bsp. für bas-Icons:
<ftui-weather size="3" icon-set="bas" [condition]="ProPlanta:fc1_weather06"></ftui-weather>
Diese icon-set´s gibt es:
icon-set="meteocons" (muss nicht angegeben/definiert werden) --> sind Standard in {dein ftui3 Ordner}/icons/
icon-set="kleinklima" --> Ordnerpfad = {dein ftui3 Ordner}/icons/weather/kleinklima/
icon-set="kleinklimaFHEM" --> Ordnerpfad = {fhem}/www/images/default/weather/ (kann auch in Verbindung mit provider="proplantaICON" gesetzt werden (hier muss das Reading aber auf t1,t2 usw zielen))
icon-set="bas" --> Ordnerpfad = {dein ftui3 Ordner}/icons/weather/bas/ (kann auch in Verbindung mit provider="proplantaICON" gesetzt werden (hier muss das Reading aber auf t1,t2 usw zielen--> [condition]="device:fc0_weather06Icon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"))
Diese Ordner-Pfade und deren Inhalt muss natürlich vorhanden sein.
LG
@stefan-dd
Es geht nur wie sie im mapping sind:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js
Da musst du sonst alle deinen eigenen Icons umbenennen...
LG mr_petz
Wie komme ich aber zu den Proplanta-Icons? Der Ansatz ist ja gut.
proplantaICON: {
t1: 'CLOUDLESS',
t2: 'PARTLY_CLOUDY',
so wie hier:?
https://forum.fhem.de/index.php/topic,115259.msg1193840.html#msg1193840
Welche Icons (icon-set) möchtest du nun?
Edit:
proplantaICON: {
t1: 'CLOUDLESS',
t2: 'PARTLY_CLOUDY',
etc wird ja weiter unten im Code verarbeitet auf die entsprechenden icon-set´s:
icon-set="meteocons"
icon-set="kleinklima"
icon-set="kleinklimaFHEM"
icon-set="bas"
Bsp:
kleinklimaFHEM: {
CLOUDLESS: '../images/default/weather/sunny.png',
SUNNY: '../images/default/weather/sunny.png',
usw...
Gibt es eine Lösung, die Einheiten werden nicht angezeigt?
<ftui-label [text]="Wetter_DD_Proplanta:fc0_tempMax"><span slot="end">°C</span></ftui-label>
Zitat von: stefan-dd am 22 Dezember 2021, 16:20:26
Gibt es eine Lösung, die Einheiten werden nicht angezeigt?
<ftui-label [text]="Wetter_DD_Proplanta:fc0_tempMax"><span slot="end">°C</span></ftui-label>
Hallo Stefan,
probiere mal
<span slot="unit">°C</span>, das hatte sich mal geändert ;)
Gruß Markus
@stefan-dd
Jetzt fängst du mit einem neuen Thema an und hast dich zu deinem vorherigen nicht geäußert...
Das würde auch anderen helfen wie du es jetzt gemacht hast...
LG mr_petz
beide Themen sind erledigt, Danke
Moin aus dem Schnee an der Ostsee
Da ich im Moment etwas Zeit habe, hab ich damit angefangen auf FTUI 3 umzustellen. An dieser Stelle herzlichen dank an setstate, mr_petz und alle anderen, welche sich hierfür engagieren und Zeit investieren.
Die Componenten sehen gut aus und auch die Performance ist gut, mit der Auffälligkeit, dass ein "initpage" > 5000 ms benötigt.
Mein "Problem" bzw. Thema:
um eine unabsichtliche Bedienung zu verhindern, habe ich bei meinen Homematic Thermostaten das Register 'modusBtnLock' auf on gesetzt.
Mit FTUI 2 hat das so geklappt:
<!-- Checkbox für modusBtnLock -->
<div data-type="checkbox"
data-off-color="green"
data-on-color="red"
data-set-on="on"
data-set-off="off"
data-device="HM_Hzg_Poel_Kueche"
data-get="R-modusBtnLock"
data-set="regSet modusBtnLock"
class="inline small compressed top-space">
<div data-type="label"
data-device="HM_Hzg_Poel_Kueche"
data-set="getConfig"
data-get="R-modusBtnLock"
class="">
</div>
</div> <!-- Checkbox für modusBtnLock -->
Im Moment scheitere ich schon daran das Register mit dem Reading 'R-modusBtnLock' dem Text eines ftui-label zu zuweisen.
Die einfache Variante:
<ftui-label
[text]="HM_Hzg_Poel_Kueche:R-modusBtnLock">
</ftui-label>
funktioniert nicht, da bekomme ich nur "" als Ergebnis.
Es wäre toll einen Tipp zu bekommen, damit ich an den Feiertagen etwas zu tun habe ;)
Ich wünsche allen hier im Board geruhsame Feiertage und viel Glück und Gesundheit (auf der Titanic waren die meisten gesund)
LG MDietrich
Hi MDietrich.
Danke füs Danke :), hier muss man aber setstate in den Vordergrund rücken... er macht eigentlich die meiste Arbeit damit alles läuft wie es läuft...
Jetzt zu deiner Situation.
Was sollte im Label den erscheinen und was ist das für ein Device und Reading (R-modusBtnLock)?
Was steht in diesem Reading on/off? Steht das vielleicht auch im state?
Wenn du uns ein list zeigst kann man mehr sehen und es nachstellen...
LG mr_petz
Edit: Habe mal im Forum gesucht. R-btnLock oder R-modusBtnLock sollten normale Reading´s mit on und off sein.
Dann sollte es auch angezeigt werden...
Ist es Vielleicht aus dem sichtbaren Bereich gerutscht im View oder grid-tile?
zum testen ob es an der richtigen Stelle ist mal mit:
<ftui-label text="HM_Hzg_Poel_Kueche:R-modusBtnLock"></ftui-label>
versuchen. Jetzt solltest du das was hinter text steht lesen können...
und auch nur:
<ftui-label [text]="HM_Hzg_Poel_Kueche"></ftui-label>
Hallo mr_petz,
habe das Problem gelöst, es saß zum Teil vor dem Bildschirm.
Ich hatte einfach einen bestehenden Zugriff kopiert, aber nicht realisiert, dass ich zwar auf das Register über FHEM zugreifen konnte es aber nicht bei den Readings aufgelistet war.
Nachdem ich das Attribut des Homematic Thermostats "expert" auf 'allreg' gesetzt habe klappt es mit:
<ftui-label get-text="HM_Hzg_Poel_Kueche:R-modusBtnLock"> </ftui-label>
Es könnte sein, das hier bei einem FHEM update was geändert wurde.
Danke für die Unterstützung
MDietrich
Zitat von: MDietrich am 24 Dezember 2021, 07:38:43
...
<ftui-label get-text="HM_Hzg_Poel_Kueche:R-modusBtnLock"> </ftui-label>
...
Ok schön das es jetzt geht. Es sollte aber auch mit dem short-binding [text] gehen.
Siehe hier:
https://github.com/knowthelist/ftui#input-binding
LG mr_petz
Ein Bug?
Zitat von: mr_petz am 22 Dezember 2021, 11:05:52
@curt
Schau dir immer am besten die Demos von setstate an
Das habe ich getan.
Zitat von: mr_petz am 22 Dezember 2021, 11:05:52
Zum verkleinern nimmst du stroke-width (ist auch so in der Demo).
Da das nicht funktionierte, schrieb ich hier: Kann ja auch sein, dass ich irgendwie einen Fehler einbaute, ich arbeite mich erst ein.
Zitat von: mr_petz am 22 Dezember 2021, 11:05:52
Edit: es scheint type="arc" nicht an stroke-width gebunden zu sein!
LG mr_petz
Meine Rede.
Aber das ist nicht das einzige Problem. Nicht stringent ist auch folgendes:
Es gibt ja das PIPE-Konzept. Um bei ftui-knob zu runden, würde ich nun erwarten, dass ich round(1) nutzen kann bzw. muss. So ist das aber nicht, da gilt nun wieder decimals="1". Warum auch immer.
Zitat von: curt am 26 Dezember 2021, 05:00:01
Ein Bug?
Das wird kein bug sein, weil es ja mit has-arc funktioniert wie ich es dir gezeigt habe:
<ftui-knob [(value)]="Temperatur_Blumen_Flur:temperature"
[color]="Temperatur_Blumen_Flur:temperature | step('10:blue,21:green,23:warning,25:danger')"
height="90" width="90" offset-y="10" has-arc min="-20" max="40" unit="°C" readonly
has-value-text value-size="20px" stroke-width="1" decimals="1">
</ftui-knob>
setstate kann da bestimmt was dazu sagen zu den unterschiedlichen Möglichkeiten der Definition has-arc und type="arc" etc...
Man sollte immer eins bedenken, dass hier alles noch in der Entwicklung ist, auch wenn schon der Großteil bereits gut läuft.
Zitat
...
Es gibt ja das PIPE-Konzept. Um bei ftui-knob zu runden, würde ich nun erwarten, dass ich round(1) nutzen kann bzw. muss. So ist das aber nicht, da gilt nun wieder decimals="1". Warum auch immer.
Irgendwo im Thread wurde dazu was geschrieben. setstate hatte deswegen extra das decimals für den knob integriert...
Das war im Februar:
https://github.com/knowthelist/ftui/commit/1652e0f8045b3424417150bcd3941fb562b11b0b#diff-8a501780dee08f895d535b83501b16db4f91924bc3e1ac5f1103051f587a57dd
Da es noch keine vollständige Doku gibt, bleibt manches ungewiss und man bekommt es erst nach viel lesen und oder testen raus...
LG mr_petz
Edit: Habe einen Beitrag von setstate gefunden:
https://forum.fhem.de/index.php/topic,115259.msg1130024.html#msg1130024
In den vorherigen Beiträgen geht es auch darum...
Fazit:
Du brauchst also nur min="-20.0" max="40.0" angeben, da würde decimals="1" unnötig werden...
round() hingegen zieht normalerweise alleinstehend und oder bei einer vorangegangen Berechnung. Bsp.:
| divide(3.1) | multiply(100) | round(1)(!beim knob funktioniert es aber so nicht alllein! da funktioniert es nur mit zusätzlichen decimals="")
Danke für Deine Mühen. Es ist eine neue Oberfläche, die die Schwächen der alten Oberfläche beheben soll, so verstehe ich wenigstens. Rein konzeptionell denke ich ja, dass damit sofort eine neue Schwäche eingebaut ist: Das Pipe-Konzept ist hier durchbrochen. Aber ok, man muss die Dinge nehmen wie sie sind - wer bin ich denn?
Die fehlende Doku macht es schwierig: Jeder braucht an den immer gleichen Stellen Zeit. Mir fehlen da zudem best-practices-Beispiele, also das Leute zeigen, wie das insgesamt bei ihnen aussieht.
Aktuell scheitere ich übrigens an Farben. @setstate möchte, dass es nur wenige Farben gibt, ich möchte meinen Tuschkasten behalten. Gleich auf Seite 1 dieses Threads wird das Thema behandelt - wie immer aber in Andeutungen und Ausrissen - prompt funktioniert es bei mir nicht:
user.css
[color=b1] {
--color-base: #0B4513
--color-contrast: (var(--white);
--color-shade: var(--seagreen);
}
index.html
<link href="ftui.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
...
<ftui-button [(dummy)]="dummy1" shape="circle" color="b1"></ftui-button>
Wie sie sehen - sehen Sie nichts: Der Button verschwindet.
Das kann ich auch gern mal bei label machen - da wird die Schrift dann weiß.
Und ich habe nicht die geringste Ahnung, was da nun wieder schief läuft. (Und mir graust es vor den Umstellungen, die komplexer werden, das Widget "Link" gibt es offenbar ja auch nicht mehr.)
Ok, erstmal Farben: Was mache ich denn da nun wieder falsch?
Hi curt.
Nicht verzweifeln. Es dauert bei jeden ein wenig um sich einzuarbeiten... :)
Jetzt zu deinem color und gleichzeitig link:
im head mal am besten die user.css als letztes setzen:
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">
Deine user.css sollte laut deiner Angabe im Hauptverzeichnis wie die ftui.css liegen!
jetzt zur Definition in der user.css:
[color=b1] {
--color-base: #0B4513;
--color-contrast: var(--white);
--color-shade: var(--seagreen);
}
aufpassen das die ; gesetzt sind und bei contrast war eine ( zu viel.
jetzt zum button und button inkl. linkfunktion und deinem color:
<ftui-button [(dummy)]="dummy1" shape="circle" color="b1"></ftui-button>
hier mit Link:
<ftui-button class="size-1" @click="javascript:window.open('http://127.0.0.1:8083');" color="b1">FHEM color</ftui-button>
<ftui-button class="size-1" @click="javascript:window.location.href='http://127.0.0.1:8083';" color="b1">FHEM color</ftui-button>
Jetzt funktioniert dein color. IP-Adresse/Url musst du natürlich anpassen.
In icon oder label könntest du das @click auch anwenden...
Du kannst auch einen klassischen Link einfügen:
<a href="http://127.0.0.1:8083/fhem/">FHEM</a>
LG mr_petz
Edit:
Hier noch ein Beispiel für ein Reload der Seite mit @click:
<ftui-icon class="size-1" name="refresh1" @click="javascript:window.location.reload(true);"></ftui-icon>
und du kannst auch einen Befehl an fhem senden mit @click:
@click="sendFhem('get oder set Device was auch immer....')"
setstate stellt uns den Baukasten und wir können ihn benutzen... ;)
Ich finde es gerade nicht, gab es eine Möglichkeit, daß nach einer eingestellten Zeit wieder auf die Hauptseite zurück gesprungen wird?
<ftui-popup id="pop-custom-close" timeout="0" opacity="0.1">.....
Danke, aber das meinte ich nicht, das ist ja ein Popup was wieder geschlossen wird.
Ich meine wenn man ein Tabmenü hat und einen anderen Tab angewählt hat, daß dann nach einer eingestellten Zeit wieder auf die "Home"-Seite zurückgesprungen wird.
Zitat von: grossmaggul am 27 Dezember 2021, 15:12:38
Ich finde es gerade nicht, gab es eine Möglichkeit, daß nach einer eingestellten Zeit wieder auf die Hauptseite zurück gesprungen wird?
hi grossmaggul.
setstate hatte mal was zur Nachverfolgung vom Timestamp und oder Reading geschrieben.
Hatte es mir zum Glück notiert... :)
<script>
setInterval(
() => myout.innerText =
ftuiApp.fhemService.states.connection.lastEventTimestamp.toLocaleString(),
//ftuiApp.fhemService.getReadingItem('AussenTemp:temperature').data.time,
//ftuiApp.fhemService.getReadingItem('AussenTemp:temperature').data.update,
//ftuiApp.fhemService.getReadingItem('AussenTemp:temperature').data.value,
6000
);
</script>
Das könntest du dafür in abgewandelter Form vielleicht für dich verwenden Bsp.:
<script>
setInterval(
() => window.location.href='http://127.0.0.1:8083/fhem/ftui/',
10000
);
</script>
in ms.
Hier wird aber immer ein href durchgeführt! Das Beispiel entspricht wie einem automatischen Reload der Seite.
In dieser Version nur einmalig bei Aufruf der entsprechenden Seite:
<script>
setTimeout(
() => window.location.href='http://127.0.0.1:8083/fhem/ftui/',
10000
);
</script>
Das alles muss dann ins <head> rein...
Kannst es ja auch in anderer Form von href testen...:
window.location.href="view/heizung.html"Ich hoffe das Hilft erstmal :)
LG mr_petz
Edit: ich habe in den letzten 30 Seiten auch dazu nix gefunden...
Edit2:
ODER besser im ftui-tab mit @click:
@click="setTimeout(() => window.location.href='view/heizung.html',10000);"
Danke Dir, werde ich mir mal in einer ruhigen Minute zu Gemüte führen.
Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
im head mal am besten die user.css als letztes setzen:
Ok, erledigt.
Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
Deine user.css sollte laut deiner Angabe im Hauptverzeichnis wie die ftui.css liegen!
Klar.
Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
jetzt zur Definition in der user.css:
...
aufpassen das die ; gesetzt sind und bei contrast war eine ( zu viel.
Das fehlende Semikolon geht auf den Autoren von Seite 1, die Klammer geht auf mich. Sooo - jetzt funktioniert das mit den Farben und ich kann erstmal die Grundlagen für meine Umstellung schaffen. Sehr herzlichen Dank Dir!
Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
jetzt zum button und button inkl. linkfunktion und deinem color:
...
Du kannst auch einen klassischen Link einfügen:
Ohne den ersten Teil jetzt probiert zu haben - da reden wir vermutlich aneinander vorbei. Also bei diesem Kästchen-Beispiel https://knowthelist.github.io/ftui/www/ftui/examples/tab.html wird ja rechts in Abhängigkeit eines Klicks auf ein Icon der linken Spalte der Inhalt verändert. Bei ftui2 gab es nun ein Widget "Link", da konnte man das gleiche Verhalten derart provozieren: Man klickt auf ein Icon, welches sich rechts befindet -> der Inhalt der rechten Seite (bei setstate "Tab-View genannt) ändert sich. Also es ist ausdrücklich
nicht popup gemeint, das wäre im Falle des Falles nur der letzte Notnagel.
Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
setstate stellt uns den Baukasten und wir können ihn benutzen... ;)
Also das ich setstate und allen Mitarbeitenden dankbar bin ist ja ohne Frage. Trotzdem sollte es erlaubt sein zu sagen, was nicht so ganz schön ist. Und das ist einerseits die fehlende Doku, andererseits das leider fast niemand mal zeigt, was er so mit FTUI3 anstellt. Bei FTUI2 war das noch anders, da zeigten so einige stolz, was man damit so alles machen kann. Und erst das führte oft dazu, dass andere sagten "will auch" und das insbesondere andere die Idee weiterentwickelten.
Ich weiß beispielsweise noch immer nicht, wie man Temperaturen anzeigt. Ja, das geht über knob - aber vielleicht geht das auch noch anders und viel ergonomischer?
Zitat von: grossmaggul am 27 Dezember 2021, 15:12:38
Ich finde es gerade nicht, gab es eine Möglichkeit, daß nach einer eingestellten Zeit wieder auf die Hauptseite zurück gesprungen wird?
Ich weiß was Du meinst. Bei FTUI2 konnte man das so lösen:
index.html
<meta http-equiv="refresh" content="3600; URL=/fhem/www/tablet/index.html">
Das müsste eigentlich auch bei FTUI3 funktionieren - ich habe das aber nicht getestet.
P.S: URL natürlich auf ftui-Verzeichnis anpassen...
Zitat von: curt am 26 Dezember 2021, 05:00:01
Nicht stringent ist auch folgendes:
Es gibt ja das PIPE-Konzept. Um bei ftui-knob zu runden, würde ich nun erwarten, dass ich round(1) nutzen kann bzw. muss. So ist das aber nicht, da gilt nun wieder decimals="1". Warum auch immer.
Die Pipe-Funktionen benutzt man, um die Werte von oder zu FHEM zu bearbeiten. Zum Beispiel x10 oder um zu runden
Für KNOB benötigt man aber auch schon vorher einige Attribute, um das grundsätzliche Verhalten festzulegen: Soll die Zahl in der Mitte 18 oder 18.5 anzeigen; oder: ist max jetzt 24 oder 24.5.; Oder: man hat min="18" und max="26", will aber auch Werte 0.1 Grad fein einstellen.
<ftui-knob value="18" min="18" max="26" decimals="1" ticks="8" type="scale" has-value-text has-scale-text></ftui-knob>Aber ich merke gerade, vielleicht will man in 0.5 Schritten springen und nicht 0.1. Und vielleicht will man die große Zahl als 23.5 angezeigt haben, die Skala-Zahlen aber ohne Komma. Muss ich also noch etwas umgebaut werden.
ZitatDas müsste eigentlich auch bei FTUI3 funktionieren -
Ja, tut es, aber das ging in ftui2 noch anders, weil mit Deiner Version wird ja einfach nur ein refresh der Homeseite ausgeführt, aber eben immer alle 3600s, das finde ich aber nicht so optimal.
Zitatandererseits das leider fast niemand mal zeigt, was er so mit FTUI3 anstellt.
Dann erstelle doch einfach selber einen Thread und zeige schonmal was Du gebaut hast, dann werden sich sicher andere anschließen.
Und was die Doku betrifft, sicher, das ist im Moment nicht optimal, aber da das Ganze noch Betastadium hat, wäre es auch nicht sinnvoll eine ausführliche Doku zu schreiben, weil sich ständig was ändert.
Aber davon mal ab, find ich, daß man nicht von setstate auch noch verlangen kann(mal abgesehen davon, daß man eh nix verlangen kann) eine ausführliche Doku zu schreiben, da bleibt dann u.U. keine Zeit mehr für FTUI3, da müssten dann vielleicht mal die User tätig werden, mache doch mal den Anfang.
Zitat von: curt am 28 Dezember 2021, 02:42:10
Ohne den ersten Teil jetzt probiert zu haben - da reden wir vermutlich aneinander vorbei. Also bei diesem Kästchen-Beispiel https://knowthelist.github.io/ftui/www/ftui/examples/tab.html wird ja rechts in Abhängigkeit eines Klicks auf ein Icon der linken Spalte der Inhalt verändert. Bei ftui2 gab es nun ein Widget "Link", da konnte man das gleiche Verhalten derart provozieren: Man klickt auf ein Icon, welches sich rechts befindet -> der Inhalt der rechten Seite (bei setstate "Tab-View genannt) ändert sich. Also es ist ausdrücklich nicht popup gemeint, das wäre im Falle des Falles nur der letzte Notnagel.
Verstehe ich leider nicht ganz...
Zitat
Also das ich setstate und allen Mitarbeitenden dankbar bin ist ja ohne Frage. Trotzdem sollte es erlaubt sein zu sagen, was nicht so ganz schön ist. Und das ist einerseits die fehlende Doku, andererseits das leider fast niemand mal zeigt, was er so mit FTUI3 anstellt. Bei FTUI2 war das noch anders, da zeigten so einige stolz, was man damit so alles machen kann. Und erst das führte oft dazu, dass andere sagten "will auch" und das insbesondere andere die Idee weiterentwickelten.
Da bin ich bei grossmaggul´s Meinung. Jeder sollte hier eigeninitiative an den Tag legen und gegebenfalls setstate und alle anderen bei dieser Entwicklung unterstützen wie und wo sie können...
Zitat
Ich weiß beispielsweise noch immer nicht, wie man Temperaturen anzeigt. Ja, das geht über knob - aber vielleicht geht das auch noch anders und viel ergonomischer?
Bringe doch bitte konkrete Vorschläge wie du dir das vorstellst. Es gibt mehrere Möglichkeiten in FTUI3 eine Temperatur darzustellen...
icon mit label, nur label, icon was sich abhängig vom Reading ändert usw...
LG mr_petz
Zitat von: grossmaggul am 28 Dezember 2021, 00:50:31
Danke Dir, werde ich mir mal in einer ruhigen Minute zu Gemüte führen.
Hi ich nochmal. Ich konnte es nicht lassen... ::)
Ich habe mal ein @click-script geschrieben.
Ich habe es bei mir gerade getestet. Hier im ftui-tab view="View2".
Wenn man auf diesen tab drückt springt er in den View1 (der ja hier im Beispiel Standard ist) nach 10s zurück:
<ftui-tab view="View2" direction="vertical" @click="setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))}),10000);">
@click kann ja bei vielen Sachen (icon,label usw.) verwendet werden.
Du müsstest nur View1 umbenennen in deinen ersten Startview, dann geht er nach 10s (10000ms) zurück.
Die 10000 hinten kannst du nach deiner Zeit anpassen.
Somit wird kein reload des View oder der Page provoziert...
Ich sag ja... setstate gibt uns den Baukasten...
Jetzt bist du drann... ;)
LG mr_petz
Edit: Ich weiss nicht ob man da extra ein eigenes Modul machen muss. Man muss es nur irgendwo festhalten oder???
ps. der Timeout wird auch nur einmal ausgeführt.
Edit2: Code gekürzt.
Edit3: Nochmal angepasst: https://forum.fhem.de/index.php/topic,115259.msg1196540.html#msg1196540
ZitatIch sag ja... setstate gibt uns den Baukasten...
Leider bin ich zu doof für die Bauklötzchen. ;D
Irgendwie war das in FTUI2 einfacher. ::)
Zitat von: blenni am 10 Dezember 2021, 13:41:42
Ich habe auch noch einen kleinen Fehler entdeckt - bei Segmented Buttons ist die Markierung für die aktive Auswahl etwas zu groß und zu weit nach rechts verschoben.
Kann man auch im Beispiel sehen:
https://knowthelist.github.io/ftui/www/ftui/examples/segment.html
Ist das Feld ganz links ausgewählt, kann man links noch einen grauen Rand erkennen, der Trenner rechts ist kaum sichtbar.
Ist das Feld ganz rechts ausgewählt, ist vom Trenner zur Markierung ein kleiner Abstand, aber rechts geht die Markierung über die Leiste hinaus.
Wollte nochmal nachfragen bezüglich dieses Posts, habe nämlich das gleiche Anzeigeproblem, muss irgendwann in den letzten Updates passiert sein, ging nämlich mal ohne Probleme.
Vielleicht könnte sich das setstate mal anschauen.
Hier mal der Link mit Bild zum Originalpost: https://forum.fhem.de/index.php/topic,115259.msg1192500.html#msg1192500 (https://forum.fhem.de/index.php/topic,115259.msg1192500.html#msg1192500)
Gruß Markus
Zitat von: setstate am 28 Dezember 2021, 10:49:38
Für KNOB [...]
Aber ich merke gerade, vielleicht will man in 0.5 Schritten springen und nicht 0.1. Und vielleicht will man die große Zahl als 23.5 angezeigt haben, die Skala-Zahlen aber ohne Komma. Muss ich also noch etwas umgebaut werden.
Aus meiner Sicht wäre es sinnvoll, Skalenangaben zu trennen von (Mess)Werten, das sind zwei Paar Schuh. Von daher würde das in Deinem Konzept eigentlich vorgesehene Pipe auf round schon gut passen.
ZitatIch habe mal ein @click-script geschrieben.
Und das funktioniert perfekt, danke dafür!!
Zitat von: mr_petz am 28 Dezember 2021, 20:09:44
Hi ich nochmal. Ich konnte es nicht lassen... ::)
Das ist schön. (Ich mache einige Tage Pause, lese aber mit.)
Zitat von: mr_petz am 28 Dezember 2021, 20:09:44
Ich habe mal ein @click-script geschrieben.
Ich habe es bei mir gerade getestet. Hier im ftui-tab view="View2".
Wenn man auf diesen tab drückt springt er in den View1 (der ja hier im Beispiel Standard ist) nach 10s zurück:
Leider kann ich aktuell nichts testen. Aber genau das
könnte die Lösung für das Link-Problem sein, was ich beschrieb (und Du antwortestest, dass Du das Problem nicht verstanden habest).
Und gleich mal noch eine andere Frage, möglicherweise auch schon gelöst:
In einem Reading ist textlich ein HTML-Script oder ein HTML-Codefragment. Dieses soll in einer Kachel zur Anzeige kommen (Bei ftui2 ging das, dwdweblink als Beispiel). Wie stellt man das denn bei ftui3 an?
Am Rande:
Du und andere haben den best-practices-Ball ja zu mir zurück gespielt. Ja klar, habe ich immer gemacht, kann ich auch wieder machen. Nur habe ich aktuell noch nichts, was man vorzeigen könnte.
Zitat von: grossmaggul am 29 Dezember 2021, 00:59:53
Und das funktioniert perfekt, danke dafür!!
Leider nicht ganz...
Aber jetzt. Jetzt wird auch der active-Status mit gesetzt!:
<ftui-tab view="View2" direction="vertical" @click="setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),10000);">
Leider ist das active im tab und da musste ich ein neuen forEach machen.
Ich denke setstate kann einen autoreturn/backToMain ins tab-modul mit einbauen...
LG mr_petz
Edit: Das einzige was jetzt passieren kann ist, dass immer ein neuer timer bei jedem click auf einem tab oder was auch immer gesetzt wird!
Also wenn man seinen ganzen view durchklickt und bei jedem ein @click hat wie oben, dann wird immer wieder ein neuer timer gestartet... leider :-\.
Mal sehen ob das auch anders geht...
Edit 2:So ist besser im ftui-grid-tile vom eigenen Menü Bsp.:
<ftui-grid-tile row="2" col="1" height="10" width="1" shape="round" @click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),10000);">Hier brauch man nur einmal definieren und bei jedem click wird der alte timer als erstes gelöscht.
Also beim ersten click wird der timer gelöscht und die Zeit neu gesetzt, bei jedem weiteren click geht die Zeit von vorne los...
ps. View1 in den eigenen Startview umbenennen und hinten die Zeit in ms...
Zitat von: curt am 29 Dezember 2021, 02:10:08
Das ist schön. (Ich mache einige Tage Pause, lese aber mit.)
Das machst du richtig!
Zitat
Leider kann ich aktuell nichts testen. Aber genau das könnte die Lösung für das Link-Problem sein, was ich beschrieb (und Du antwortestest, dass Du das Problem nicht verstanden habest).
Ich weiss es trotzdem nicht genau was du willst. Kannst du es genauer Beschreiben?
@click hatte ich hier schon mehrfach erwähnt.
Zitat
Und gleich mal noch eine andere Frage, möglicherweise auch schon gelöst:
In einem Reading ist textlich ein HTML-Script oder ein HTML-Codefragment. Dieses soll in einer Kachel zur Anzeige kommen (Bei ftui2 ging das, dwdweblink als Beispiel). Wie stellt man das denn bei ftui3 an?
Deswegen hatte ich auch schon erwähnt dass das Meiste schon im Thread steht.
Eine Antwort für dich:
https://forum.fhem.de/index.php/topic,115259.msg1184952.html#msg1184952
Zitat
Am Rande:
Du und andere haben den best-practices-Ball ja zu mir zurück gespielt. Ja klar, habe ich immer gemacht, kann ich auch wieder machen. Nur habe ich aktuell noch nichts, was man vorzeigen könnte.
Jeder muss doch erstmal selber ein Grundkonzept/Aufbau erstellen. Wenn du alles nur copy/paste machst lernst du es nicht mit dem neuen FTUI3 umzugehen.
Beispiele (Teilbeispiele) von Usern sind hier im Thread auch schon zu hauf... (vielleicht nicht gleich und leicht zu finden, aber wer suchet der findet ;))
Und in den demos von setstate gibt es auch genug für den Anfang...
LG mr_petz
Zitat von: mr_petz am 29 Dezember 2021, 11:22:14
Leider nicht ganz...
Aber jetzt. Jetzt wird auch der active-Status mit gesetzt!:
<ftui-tab view="View2" direction="vertical" @click="setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),10000);">
Leider ist das active im tab und da musste ich ein neuen forEach machen.
Ich denke setstate kann einen return/backToMain ins tab-modul mit einbauen...
LG mr_petz
Kurze Rückmeldung, eben eingebaut, getestet und: funktioniert tadellos :)
Gruß Markus
Zitat von: mr_petz am 29 Dezember 2021, 11:22:14
Leider nicht ganz...
Aber jetzt. Jetzt wird auch der active-Status mit gesetzt!:
<ftui-tab view="View2" direction="vertical" @click="setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),10000);">
Durch Zufall entdeckt, eingebaut, läuft.
Prima, Danke mr_petz!
Gruß LuGu
Was mache ich falsch? Oder geht es nicht?
ich möchte die Text Farbe Reading abhängig ändern. Irgendwie will es nicht. Eine feste Farbe vergeben funktioniert.
<ftui-label [text]="Fenster_state:windows"
[color]=Fenster_state:windows | map('keine: green, `.*`: red')"></ftui-label>
@stefan-dd
Bei color fehlt vor Fenster ein doppeltes Anführungszeichen ...
Das hat sich durchs probieren davon geschlichen, Danke.
@setstate
Dein ftui-tab timeout funktioniert ;)
Hier ist nur zu erwähnen, dass bei jedem tab-click der alte Timer bleibt und ein neuer Timer gestartet wird.
Zum Test:
Def-Bsp.:
<ftui-tab view="View3" direction="vertical" timeout="20">
Ich habe mehr als 3 ftui-tab´s. Bei denen habe ich je einen timer definiert. Einen mit 10s, mit 20s und einen mit 30s.
Ich clicke auf den ersten mit 10s, dann nach 5s auf den mit 30s. Jetzt sollte er ja 30s haben. Hat er aber nicht. Er springt nach weiteren 5s zurück zu Home. Wenn ich jetzt aber auf einen tab ohne timer gehe, sieht man dass er wieder nach 20s zurück geht auf Home und somit dass der 2.Timer auch an war. Sprich es waren beide gleichzeitig aktiv...
Das Beispiel ist mit 10s,20s und 30s natürlich ziehmlich kurz, aber bei einer längeren Zeit könnte er natürlich bei einer nachträglichen Bedienung ungewollt mehrfach zu Home springen durch die gestarteten Timer....
Irgenwie scheint das clearTimeout(this.timer) nicht zu wirken.
Ich weiss jetzt nicht ob das jetzt von Relevanz ist, ich denke aber es wäre besser wenn der timeout immer wieder neu von vorn beginnt oder?
Das alles soll nur ein Hinweis sein.
ps. vielleicht liege ich hier aber auch falsch? k.A.
vielleicht falsch definiert? k.A.
LG mr_petz
Edit: Ich hoffe du verstehst was ich damit sagen möchte...
Zitat von: mr_petz am 30 Dezember 2021, 23:52:44
@setstate
Dein ftui-tab timeout funktioniert ;)
Hier ist nur zu erwähnen, dass bei jedem tab-click der alte Timer bleibt und ein neuer Timer gestartet wird.
LG mr_petz
Edit: Ich hoffe du verstehst was ich damit sagen möchte...
Moin mr_petz,
das war doch bei deiner Lösung auch so, oder hatte ich da was falsch übernommen?
Ein globaler Timer wäre natürlich schöner.
Gruß LuGu
Zitat von: mr_petz am 29 Dezember 2021, 11:22:14
Edit 2:
So ist besser im ftui-grid-tile vom eigenen Menü Bsp.:
<ftui-grid-tile row="2" col="1" height="10" width="1" shape="round" @click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),10000);">
Hier brauch man nur einmal definieren und bei jedem click wird der alte timer als erstes gelöscht.
Also beim ersten click wird der timer gelöscht und die Zeit neu gesetzt, bei jedem weiteren click geht die Zeit von vorne los...
ps. View1 in den eigenen Startview umbenennen und hinten die Zeit in ms...
Hi LuGu.
Hatte ich geändert. wie hier oben im Zitat.
Vielleicht sollte das setstate auch in den ftui-grid-tile einbauen. k.A.?
LG mr_petz
Zitat von: mr_petz am 31 Dezember 2021, 11:03:22
Hi LuGu.
Hatte ich geändert. wie hier oben im Zitat.
Vielleicht sollte das setstate auch in den ftui-grid-tile einbauen. k.A.?
LG mr_petz
Hi mr_petz,
war meine Vermutung ja richtig, dass ich es falsche implementiert habe.
Ich habe "Edit 2" wohl überlesen.
Edit: ;-)
Ich habe es in ftui-grid implementiert, da ich zwei ftui-grid-tile mit einem Tab-Menue habe.
Edit 2:
Hat den Vorteil, dass wenn ich auf einem tab-view etwas bediene, der timeout immer wieder neu gestartet wird.
Nach der letzten Bedienung und dem anschließenden timeout wird dann auf view1 zurückgeschaltet.
So ist es für mich perfekt.
Gruß LuGu
Hallo setstate
vielen Dank für die Timeout Funktion in ftui-tab.
Ich habe eine Verständnisfrage:
<ftui-tab view="Lights-Overview-2" class="size-5" timeout="10">
Es gibt einen Timeout, um die Ansicht 5 Sekunden nach Aufruf des View "Lights-Overview-2" zurückzusetzen.
Was mir fehlt, ist die Möglichkeit, ein "Sprungziel" angeben zu können... ? also wohin wird nach 5 Sekunden gesprungen?
Vielen Dank und einen Guten Rutsch nach 2022!!
Ralph
@megadodopublications
Er geht zum Startview. heisst ja auch im git "goHome timeout"...
@all
Mal was ganz anderes.
Hat jemand interresse an einer TV-Programm Übersicht unabhängig von fhem?
Daten werden direkt online geholt.
Zum verdeutlichen hier mal ein Bsp wie man es aufbauen könnte zum testen:
<ftui-button class="size-1" id="Button1" popup-target="Popup1"></ftui-button>
<ftui-popup id="Popup1" timeout="20" width="70%" height="25%"></ftui-popup>
<script>
const button1 = document.getElementById("Button1");
const popup1 = document.getElementById("Popup1");
fetchdata();
function fetchdata(){
fetch('https://api.factmaven.com/xml-to-json/?xml=https://www.tvspielfilm.de/tv-programm/rss/heute2015.xml')
.then(response => response.json())
.then(tv => {
const info = tv.rss.channel.item[0].title.split('|');
button1.innerHTML = info[1]+' '+info[0];
popup1.innerHTML = '<header slot=\"header\">'+info[1]+' '+info[0]+'<\/header>';
popup1.innerHTML += '<p style=\"padding-left:5px;\">'+info[2]+'<\/p><span style=\"padding-left:5px;\">'+tv.rss.channel.item[0].encoded+'<\/span>';
})
};
setInterval(() => fetchdata(),3600*1000);
</script>
Also, macht das für jemanden sinn?
Im Anhang sieht man das popup was über den Button aufgerufen wird.
Das soll nur Beispielhaft sein wie es aussehen könnte...
LG und guten Start ins neue Jahr ;)
mr_petz
@all
FROHES NEUES JAHR
@mr_petz
Vor Kurzem habe ich mit einer Komponente für TV-Programmübersicht begonnen. Um das generelle FTUI3-Thema zu "schonen", wäre die Anlage eines neuen Themas zum Gedankenaustausch bzgl. TV-Programm vermutlich besser geeignet, oder ?
@all
Ich wünsche euch ein vorallen gesundes neues Jahr!
@OdfFhem
Ja gerne.
Ich wollte halt nur ermitteln ob es den ein oder anderen gibt der das benutzen würde.
Es wurde ja bis dato noch keine Anfrage diesbezüglich gestellt.
Das wir wieder unsere Gedanken zusammenführen, war ne Frage der Zeit ;)
LG mr_petz
Ein Frohes Neues in die Runde!
@mr_petz, @setstate
ZitatEr geht zum Startview. heisst ja auch im git "goHome timeout"...
Da ein "StartView" nicht definiert ist... scheint es aus meiner Sicht eher so zu sein, dass in die "aufrufende" Seite zurück gesprungen wird, im examples/tab.html ist das dann die Spalte links, also das "Hauptmenü".
Nicht funktioniert es, wenn die aufrufende Ansicht verschachtelt ist:
index.html: <ftui-content file="home/home_AZ.html"></ftui-content>
home/home_AZ.html: <ftui-content file="home/AZ/menu_buttons_AZ.html" ></ftui-content>
Alle ftui-tab-view sind in der index.html definiert.
In der menu_buttons_AZ.html erfolgen nun mehrere Aufrufe, zB
<ftui-tab view="HOME-TuerenFenster" timeout="5">
<ftui-tab view="HOME-Musik" timeout="10">
<ftui-tab view="HOME-Raumlicht">
etc.pp.
Nach meinem Verständnis des "goHome timeout" sollte es nun möglich sein, je ftui-tab Aufruf unterschiedliche timeouts zu definieren. Genau das funktioniert aber nicht. Stattdessen
1. greift grundsätzlich der kürzeste Timeout
2. erfolgt auch bei Aufrufen ohne timeout ein Rücksprung
Der Rücksprung erfolgt dann stets (mit dem kürzesten Timeout) nach home_AZ.html
Bug oder Feature?
Vielen Dank vorab und Grüße
Ralph
Zitat von: megadodopublications am 01 Januar 2022, 12:09:20
Ein Frohes Neues in die Runde!
@mr_petz, @setstate
Da ein "StartView" nicht definiert ist... scheint es aus meiner Sicht eher so zu sein, dass in die "aufrufende" Seite zurück gesprungen wird, im examples/tab.html ist das dann die Spalte links, also das "Hauptmenü".
Nicht funktioniert es, wenn die aufrufende Ansicht verschachtelt ist:
index.html: <ftui-content file="home/home_AZ.html"></ftui-content>
home/home_AZ.html: <ftui-content file="home/AZ/menu_buttons_AZ.html" ></ftui-content>
Alle ftui-tab-view sind in der index.html definiert.
In der menu_buttons_AZ.html erfolgen nun mehrere Aufrufe, zB
<ftui-tab view="HOME-TuerenFenster" timeout="5">
<ftui-tab view="HOME-Musik" timeout="10">
<ftui-tab view="HOME-Raumlicht">
etc.pp.
Nach meinem Verständnis des "goHome timeout" sollte es nun möglich sein, je ftui-tab Aufruf unterschiedliche timeouts zu definieren. Genau das funktioniert aber nicht. Stattdessen
1. greift grundsätzlich der kürzeste Timeout
2. erfolgt auch bei Aufrufen ohne timeout ein Rücksprung
Der Rücksprung erfolgt dann stets (mit dem kürzesten Timeout) nach home_AZ.html
Bug oder Feature?
Vielen Dank vorab und Grüße
Ralph
setstate hat es gefixt. lade mal die neue Version!
gerade getestet.
ftui-tab 10s -> 10s pass
ftui-tab 30s -> 30s pass
ftui-tab 10s -> ftui-tab 30s -> 30s pass
ftui-tab 10s -> ftui-tab 30s -> ftui-tab ohne timeout -> kein goHome pass
ftui-tab 10s -> im view geklickt und geklickt -> timeout fängt immer wieder neu an (also springt nicht innerhalb beim bearbeiten des view zurück) pass
ps. 1. ftui-tab view = Startview ist standardmäßig der erste der geladen wird...
LG mr_petz
Edit: ungetestet. Kannst vielleicht auch mal mit group testen???
Edit2: im der tab-content demo geht es auch. Er springt zu
<ftui-content file="examples/contents/content-rows.html" header="VARIANT1"></ftui-content>zurück.
wenn ich die tab-content.html in den tab 4 als untermenü tab-content2.html setze
<ftui-content file="examples/contents/tab-content2.html" header="VARIANT1"></ftui-content>und da auf einen tab mit timer drücke dann springt er wieder auf die tab-content.html mit content-rows.html...
Also scheint auch eine Verschachtelung zu funktionieren...
Gibt es in FTUI3 ein äquivalent zu der FTUI2 "level" Funktion?
<div data-type="level" style="height:10px; left:-22px; position: absolute"
data-device='Zisterne_Inhalt'
data-get="inhalt"
data-min="0"
data-max="10000"
data-limits='[0,1000,2500,9999]'
data-colors='["#FF0000","#FFFF00","green","#0066CC"]'
data-height="10px"
data-width="260px"
class="horizontal"></div>
Ja gibt es.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/meter/meter.component.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/meter/meter.component.js)
und Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/meter.html (https://knowthelist.github.io/ftui/www/ftui/examples/meter.html)
LG
Edit: Bsp:
<ftui-meter [value]="Zisterne_Inhalt" min="1" max="10000"
[color]="Zisterne_Inhalt | step('0:alert, 5000:warning, 9999:primary')"> </ftui-meter>
Zitatps. 1. ftui-tab view = Startview ist standardmäßig der erste der geladen wird...
Kann man das auch irgendwo selbst definieren welches die Haupt-Seite sein soll?
VG, Thomas
Ja kannst du mit der neuesten Version von setstate
Gib deinem ftui-tab einfach home mit. Bsp.:
<ftui-tab view="View3" direction="vertical" home>
LG mr_petz
Hallo zusammen,
nach dem Jahreswechsel werden in meinen ftui-charts mit aktivem Parameter unit="30d" lediglich die Daten seit dem 01.01.2022 berücksichtigt, nicht aber die (vorhandenen) Daten einer anderen FileLog-Datei (die sich aufgrund des Jahreswechsels automatisch geändert hat; sprich für jedes Jahr wird eine neue Datei angelegt). Kopfkratz, muss man hier noch etwas konfigurieren?
Zweitens:
nach einem "update all" heute abend haben sich diverse Layout-Formatierungen bei mir verabschiedet, hat sich etwas Wesentliches geändert? In einem ftui-grid-tile Element hüpfen die beinhalteten Elemente nun oben/unten drüber hinaus, obwohl es vorher passte. Leider finde ich auf Anhieb auch keinen wirklichen Fehler meinerseits, hier der Codeschnipsel mit Screenshot vorher/nachher:
<!-- Energie -->
<ftui-grid-tile row="4" col="9" height="5" width="4">
<header>PV-Anlage / Strombedarf</header>
<ftui-row height="30px" width="370px">
<ftui-icon path="fa-svg/solid" name="solar-panel" size="-1" color="orange"></ftui-icon>
<ftui-label [text]="SMATripower6:SPOT_PACTOT | fix(0)" class="size-4"
[color]="SMATripower6:SPOT_PACTOT | step('1: green, 1500: orange, 3500: yellow')">
<span class="size-0" slot="unit">W</span></ftui-label>
<ftui-label>Autarkie:</ftui-label>
</ftui-row>
<ftui-row height="30px" width="350px">
<ftui-icon path="../images/openautomation" name="control_arrow_down_right" size="-2" color="red"></ftui-icon>
<ftui-label [text]="HomeManager:SMAEM3011845853_Bezug_Wirkleistung | fix(0)" class="size-4"
[color]="HomeManager:SMAEM3011845853_Bezug_Wirkleistung | step('1: light, 1500: orange, 3500: red')">
<span class="size-0" slot="unit">W</span></ftui-label>
<ftui-knob [value]="PVVorschau:Current_AutarkyRate | part(1)" start-angle="-90" end-angle="269" width="50" color="light" offset-y="0" stroke-width="6"></ftui-knob>
</ftui-row>
<ftui-row height="30px" width="380px">
<ftui-icon path="../images/openautomation" name="control_arrow_up_right" size="-2" color="green"></ftui-icon>
<ftui-label [text]="HomeManager:SMAEM3011845853_Einspeisung_Wirkleistung | fix(0)" class="size-4"
[color]="HomeManager:SMAEM3011845853_Einspeisung_Wirkleistung | step('1: green, 500: green, 1000: green')">
<span class="size-0" slot="unit">W</span></ftui-label>
<ftui-label>Eigenverbr:</ftui-label>
</ftui-row>
<ftui-row height="30px" width="350px">
<ftui-icon path="fa-svg/solid" name="home" size="-1" color="light"></ftui-icon>
<ftui-label [text]="Gesamtverbrauch:state | fix(0)" class="size-4"
[color]="Gesamtverbrauch:state | step('1: light, 500: light, 1000: light')">
<span class="size-0" slot="unit">W</span></ftui-label>
<ftui-knob [value]="PVVorschau:Current_SelfConsumptionRate | part(1)" start-angle="-90" end-angle="269" width="50" color="light" offset-y="0" stroke-width="6" ></ftui-knob>
</ftui-row>
<ftui-chart height="120px" width="100%" popup-target="pvleistung" x-min="6" x-max="20">
<ftui-chart-data log="Log_PVLeistung" spec="4:SMATripower6.SPOT_PACTOT" [update]="SMATripower6:SPOT_PACTOT:time"
fill background-color="#ffcc0050" color="#ffcc00" point-radius="0"></ftui-chart-data>
<ftui-chart-data log="Log_PVLeistung" spec="4:HomeManager.SMAEM3011845853_Einspeisung_Wirkleistung" [update]="HomeManager:SMAEM3011845853_Einspeisung_Wirkleistung:time"
fill background-color="#00cc3350" color="#00cc33" point-radius="0"></ftui-chart-data>
</ftui-chart>
</ftui-grid-tile>
EDIT:
es sind die ftui-knob Elemente! Wenn ich die rauslösche, passt der Rest wieder. Ich habe bei beiden Elementen den Parameter "offset-y="0" eingetragen, wie viele Seiten vorher mir geholfen wurde. (hier: https://forum.fhem.de/index.php/topic,115259.msg1186715/topicseen.html#msg1186715 )
Scheinbar muss das nun anders? Oder so? :o
EDIT2:
habe einfach "height="50" dazugepackt, nun passts wieder.
@Dracolein
Das FileLog-Attribut createGluedFile könnte helfen ...
Außerdem bleibt der "update all" Prozess ständig beim Download irgendwelcher Icons stehen, was dann so aussieht:
Zitat
[...]
2022.01.04 18:51:55 1 : UPD www/ftui/icons/question-circle-o.svg
2022.01.04 18:51:55 1 : UPD www/ftui/icons/question-circle.svg
2022.01.04 18:51:57 1 : UPD www/ftui/icons/question.svg
2022.01.04 18:51:57 1 : UPD www/ftui/icons/quote-right.svg
2022.01.04 18:52:01 1 : https://raw.githubusercontent.com/knowthelist/ftui/master/www/ftui/icons/quote-right.svg: Select timeout/error:
edit:
jetzt, beim 5-6 Versuch ist das Update wenigstens fehlerfrei durchgelaufen.
Gibt es eigentlich die Möglichkeit, dass man durch den bloßen Sprung auf ein <ftui-tab-view> ein Event auslöst oder einen Dummy schaltet?
Und genauso wieder einen, wenn man diesen view verlässt?
Zitat von: presskopf am 04 Januar 2022, 19:07:04
Gibt es eigentlich die Möglichkeit, dass man durch den bloßen Sprung auf ein <ftui-tab-view> ein Event auslöst oder einen Dummy schaltet?
Und genauso wieder einen, wenn man diesen view verlässt?
Kannst du mit dem oft erwähnten @click. Bsp:
@click="sendFhem('set dummy on')"
Das kannst du so gut wie Überall einsetzen.
Oder hast du dir das anders vorgestellt?
LG mr_petz
Edit: Oder meinst du ausschließlich beim laden? Verstehe ich nicht ganz...
Doch, doch! Wir verstehen uns. :)
Funktioniert (natürlich) prima. Herzlichen Dank!
Zitat von: presskopf am 04 Januar 2022, 19:32:29
Doch, doch! Wir verstehen uns. :)
Funktioniert (natürlich) prima. Herzlichen Dank!
Dann ist ja gut ;)
Du kannst das natürlich auch über einen ftui-button lösen. Bsp:
<ftui-tab view="View4" direction="vertical">
<ftui-button [(value)]="dummy" states="on,off" fill="none">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
<ftui-label class="size-1">Licht</ftui-label>
</ftui-tab>
LG mr_petz
Zitat von: OdfFhem am 04 Januar 2022, 18:47:40
@Dracolein
Das FileLog-Attribut createGluedFile könnte helfen ...
Das habe ich erfolglos ausprobiert.
@Dracolein
Zu Testzwecken habe ich Folgendes verwendet ... Logfile wechselt monatlich ... s. Screenshot.
attr FileLog_Wetter createGluedFile 1
<ftui-chart title="temperature" unit="week">
<ftui-chart-data log="FileLog_Wetter" spec="4:Wetter.temperature" file="CURRENT"></ftui-chart-data>
<ftui-chart-controls units="week,month"></ftui-chart-controls>
</ftui-chart>
Wichtig ist vermutlich file="CURRENT"; standardmäßig gilt file="-" und fixiert auf die aktuelle Logdatei.
Hallo!
Vielleicht wurde die Frage schon mal gestellt.. aber ich muss auch mal fragen...
Kann man FTUI3 parallen zur schon voll konfigurierten FTUI2 laufen lassen und dort schon mal anfangen uns schauen ob es was für einen ist? Oder geht das nicht?
Ich würde ungern meine komplett fertigen FTUI 2 Oberflächen "entsorgen" ohne vorher die v3 fertig zu haben und zu wissen das alles so funktioniert wie es soll...
Vielen Dnak!
Zitat von: presskopf am 04 Januar 2022, 19:07:04
Gibt es eigentlich die Möglichkeit, dass man durch den bloßen Sprung auf ein <ftui-tab-view> ein Event auslöst oder einen Dummy schaltet?
Und genauso wieder einen, wenn man diesen view verlässt?
Hello
Mich interessiert was du mir der Funktion vor hast ;)
Grüsse
@misux
https://forum.fhem.de/index.php/topic,115259.msg1183624.html#msg1183624
(https://forum.fhem.de/index.php/topic,115259.msg1183624.html#msg1183624)
Zitat von: OdfFhem am 05 Januar 2022, 16:59:36
@Dracolein
Zu Testzwecken habe ich Folgendes verwendet ... Logfile wechselt monatlich ... s. Screenshot.
attr FileLog_Wetter createGluedFile 1
<ftui-chart title="temperature" unit="week">
<ftui-chart-data log="FileLog_Wetter" spec="4:Wetter.temperature" file="CURRENT"></ftui-chart-data>
<ftui-chart-controls units="week,month"></ftui-chart-controls>
</ftui-chart>
Wichtig ist vermutlich file="CURRENT"; standardmäßig gilt file="-" und fixiert auf die aktuelle Logdatei.
Super, das war es, danke Dir.
Zitat von: SirMarco am 05 Januar 2022, 23:07:04
Hello
Mich interessiert was du mir der Funktion vor hast ;)
Grüsse
Hi.
Hier mal 2 Beispiele von mir. Ich nutze es um mein PinPad scharf zu schalten beim klick auf den tab und bei meinem Vertretungsplan (wird ein badge angezeigt wenn ein neuer da ist), der dann durch einen klick auf den tab auf gelesen geschaltet wird....
alles mit @click. Man kann das natürlich auch mit einem Button lösen, aber beim VP muss ich mit setreading arbeiten...
LG mr_petz
Zitat von: meier81 am 31 Oktober 2021, 12:33:11
also in FHEM mit update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
Hi! Habe dies gemacht, bekomme leider eine Fehlermeldung. Kann mir vielleicht jemand sagen was man in diesem Fall machen muss...?
2022.01.06 12:45:26 1 : Downloading https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
2022.01.06 12:45:26 1 : UPD www/ftui/components/badge/badge.component.js
2022.01.06 12:45:26 1 : open ./www/ftui/components/badge/badge.component.js failed: Permission denied, trying to restore the previous version and aborting the update
@misux
Nach der Fehlermeldung scheint der Ausführende keine Rechte im www-Ordner zu haben ...
Alternative #1) www-Verzeichnis prüfen und ggfls. ändern
(schlechtere) Alternative #2) ftui-Verzeichnis im www-Verzeichnis vorab anlegen und (zumindest temporär) für die "Allgemeinheit" öffnen
Hallo zusammen,
ich habe seit einigen jahren das "alte" TabletUI im Einsatz und überlege zu migrieren - meistens haut die Arbeit von setstate ja zu 100% hin ;D
Eine elementare Funktion bei uns sind die Bilder der Kameras, die bei Bewegungserkennung (dummy camAlarm) oder beim klicken auf das Bild groß werden.
Im alten TabletUI löse ich das mit dem popup widget:
<!-- ============== KameraHof ============== -->
<!-- ======================================= -->
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
<header>Cam Haus</header>
<div data-type="popup" data-height="700px" data-width="1224px" data-device="camAlarm" data-get="192.168.178.13" data-get-on="alarm" data-return-time="30">
<div data-type="image"
data-size="100%"
data-url="http://192.168.178.13:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=...&t="
data-refresh="1"
class="nocache"
data-width="354px"
data-height=auto
style="padding-top: 37px;">
</div>
<div class="dialog">
<header>Cam Haus Gross</header>
<div class="container">
<div data-type="image"
data-size="100%"
data-url="http://192.168.178.13:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=...&t="
data-refresh="1"
class="nocache"
data-width="1224px"
data-height="auto">
</div>
</div>
</div>
</div>
</li>
Bekomme es mit dem neuen Popup widget leider nicht zum laufen, mit meinen ersten versuchen erhalte ich: image not available...:
<ftui-grid-tile row="1" col="2" height="1" width="1">
<ftui-icon name="sitemap" popup-target="pop1"></ftui-icon>
</ftui-grid-tile>
...
</ftui-grid>
<ftui-popup id="pop1" shape="round" [trigger]="dummy3:state:time" timeout="0" left="10%" top="50%" opacity="1">
<header>Popup 3</header>
<ftui-image [src]="http://192.168.178.13:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=Admin123&t="></ftui-image>
</ftui-popup>
Hi. Was ist das &t= am Schluß der url?
Nimm das mal raus...
LG mr_petz
Edit: Scheint eine FOSCAM zu sein. da gibt es kein &t=
Das hat leider nicht geholfen.
Die url funktioniert mit und auch ohne &t= im browser und auch im alten ftui...
Ach sorry mach noch bitte aus [src]= nur ein src=
[] will ein Device/Reading von fhem!
LG mr_petz
Edit: am besten auch noch ein:
interval="10" nocache
mit ins <ftui-image>
interval in sec
also so:
<ftui-image src="http://192.168.178.13:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=Admin123" interval="10" nocache></ftui-image>
Super, vielen Dank! Das funktioniert.
ist es jetzt auch möglich, dass sich das bild automatisch aktualisiert?
"Früher" ging das mit data-refresh="1"
Danke, refresh geht jetzt auch.
Habe nun noch zwei probleme damit.
- Auf dem Bild im Anhang ist das Popup geöffnet, das Bild an sich ist aber zu klein - und nur ein Ausschnitt davon.
- wie bekomme ich es hin, dass wenn das popup geschlossen ist, statt des symbols (icon name="sitemap") das Kamerabild in klein angezeigt wird, und es auch mit einem klick groß wird?
Wenn du es im ftui-tab hast, setzt es in dein ftui-tab ein und vergiebst height="deineGröße" und width="deineGröße"
Bsp:
<ftui-tab view="View" direction="vertical">
<ftui-image src="http://192.168.178.13:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=Admin123" interval="10" nocache height="50%" width="50%"></ftui-image>
<ftui-label class="size-1">CamHof</ftui-label>
</ftui-tab>
Eins ist beim Popup mit Cam zu bedenken. Das permanent traffic ensteht auch wenn das popup hidden ist!...
Abhilfe kann ein dummy schaffen der bei @close eine leere url bekommt und beim öffnen mit @click wird dann die richtige übergeben und aus dem Reading gelesen.
Bei Interesse kann ich ein Beispiel posten. (irgendwo wurde das hier im Thread schon mal erwähnt (gefühlte 1000Seiten vorher :o))
LG mr_petz
Edit: Wenn das popup größer sein soll, dann machst du das auch mit: height="deineGröße" und width="deineGröße"
Wenn es über den gesamten grid-Bereich gehen soll dann auch noch mit: position="page"
Super, vielen dank! Das funktioniert nun soweit.
Gibt es auch ein autoclose?
Beim händischen schließen besteht noch das problem, dass ftui-tab view="View_home" nicht mehr aktiv ist - man muss händisch das home-tab aktivieren um wieder zurück zu kommen.
Schau dir am besten immer erst die Demos und die dazu gehörigen Files an um die Settings zu haben:
https://github.com/knowthelist/ftui/tree/master/www/ftui/examples (https://github.com/knowthelist/ftui/tree/master/www/ftui/examples)
Demo Popup:
https://knowthelist.github.io/ftui/www/ftui/examples/popup.html (https://knowthelist.github.io/ftui/www/ftui/examples/popup.html)
und hier Timeout. Wurde erst behandelt (auch nachfolgende Beiträge):
https://forum.fhem.de/index.php/topic,115259.msg1197161.html#msg1197161 (https://forum.fhem.de/index.php/topic,115259.msg1197161.html#msg1197161)
Ein wenig mitlesen ist hier angesagt... ;)
Edit: Bsp:
<ftui-tab view="HOME" home>
<ftui-tab view="HOME-TuerenFenster" timeout="5">
<ftui-tab view="HOME-Musik" timeout="10">
<ftui-tab view="HOME-Raumlicht">
hier wird zum view="HOME" gesprungen. mit home gibt man sein "TimeOutZiel" an...
LG mr_petz
Es funktioniert jetzt alles, vielen Dank für die Hilfe.
Ich habe auch vorher gelesen und mir natürlich auch die Demos angeschaut.
Mein Fehler war, dass in der Demo Timeout mit Timeout="0" schon drin war, ich hab es doppelt mit timeout="10" hinzugefügt - das hatte logischerweise nicht funktioniert.
Zitat von: mr_petz am 06 Januar 2022, 21:37:55
Wenn du es im ftui-tab hast, setzt es in dein ftui-tab ein und vergiebst height="deineGröße" und width="deineGröße"
Bsp:
<ftui-tab view="View" direction="vertical">
<ftui-image src="http://192.168.178.13:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=Admin123" interval="10" nocache height="50%" width="50%"></ftui-image>
<ftui-label class="size-1">CamHof</ftui-label>
</ftui-tab>
Eins ist beim Popup mit Cam zu bedenken. Das permanent traffic ensteht auch wenn das popup hidden ist!...
Abhilfe kann ein dummy schaffen der bei @close eine leere url bekommt und beim öffnen mit @click wird dann die richtige übergeben und aus dem Reading gelesen.
Bei Interesse kann ich ein Beispiel posten. (irgendwo wurde das hier im Thread schon mal erwähnt (gefühlte 1000Seiten vorher :o))
LG mr_petz
Edit: Wenn das popup größer sein soll, dann machst du das auch mit: height="deineGröße" und width="deineGröße"
Wenn es über den gesamten grid-Bereich gehen soll dann auch noch mit: position="page"
Hi @mr_petz,
ich hätte da definitiv an Deinem Beispiel Interesse.
Meine aktuelle Lösung:
Ein Motion-Dienst zapft die Cams an und liefert dann die Bilder per Webserver.
Den permanenten Traffic verhindere ich, dass ich motion per @Click (->servicd) an und ausschalte.
Das funktioniert sehr gut, nur gibt's da ein bis drei "Gedenksekunden".
VG Matthias
Das hab ich ganz überlesen, an dem Beispiel habe ich auch Interesse ::)
Wie bekomme ich sämtliche Kommastellen Weg. Mit fix(2) kann ich welche dazu setzen, aber mit fix(0) gehen sie nicht weg. Wo liegt der Fehler?
<ftui-label [text]="Wetter_DD_Proplanta:humidity | fix(0)" size="3" unit=" %"></ftui-label>
@presskopf, @hackepeter
Ich habe den Beitrag gefunden (ist von Januar 2021):D:
https://forum.fhem.de/index.php/topic,115259.msg1125250.html#msg1125250 (https://forum.fhem.de/index.php/topic,115259.msg1125250.html#msg1125250)
Ich habe es auch so in der Art umgesetzt.
LG mr_petz
Zitat von: stefan-dd am 06 Januar 2022, 23:04:45
Wie bekomme ich sämtliche Kommastellen Weg. Mit fix(2) kann ich welche dazu setzen, aber mit fix(0) gehen sie nicht weg. Wo liegt der Fehler?
<ftui-label [text]="Wetter_DD_Proplanta:humidity | fix(0)" size="3" unit=" %"></ftui-label>
<ftui-label [text]="RaumsensorFranzi_T:temperature | fix(0)" class="size-4"
[color]="RaumsensorFranzi_T:temperature | step('19: blue, 20: green, 23: orange, 25: red')">
<span class="size-1" slot="unit">°C</span></ftui-label>Readingwert aktuell:
Zitattemperature 20.75
@stefan-dd
Bei einem Readingstring mit "," kannst du nicht mit fix() kürzen. fix() geht nur bei zBsp.: 20.123 als Reading mit dot.
Bei proplanta wird z.Bsp. Luftfeuchte und Wind mit einem "," versehen.
Du müsstest mit replace() arbeiten wenn dein Reading ein "," im string hat.
LG mr_petz
Edit: Hier ein Beispiel:
Reading ist: 20,123
Würdest du mit replace(/\,(.*)/g,'') eine 20 draus machen.
oder (ungetestet) erst ein
| replace(/\,/g,'.')
und dann noch ein fix
| replace(/\,/g,'.') | fix(0)
hinterher...
ps. mit round() verhält sich das genauso wie mit fix(). nur Zahl mit "."
Bei mir sind alle Proplanta Readings mit . (wenn nötig) - nicht ein , irgendwo.
Wie sehen deine Server local settings aus? Bei mir: en_US.utf8
Zitat von: setstate am 07 Januar 2022, 08:40:22
Bei mir sind alle Proplanta Readings mit . (wenn nötig) - nicht ein , irgendwo.
Wie sehen deine Server local settings aus? Bei mir: en_US.utf8
Ok. ich hatte mir es nicht im fhem-modul angeschaut, sondern online auf proplanta.
Reading sollte mit dot sein. Warum geht dann der fix(0) bei stefan-dd nicht?
Da muss er mal das Reading zeigen oder?
LG mr_petz
sehr komisch ...
Bei mir geht es auch, wenn es mit part() abgetrennt wurde
<ftui-label [text]="AgroWeather:temperature | fix(0)"></ftui-label>
<ftui-label [text]="AgroWeather:temperature | round(0)"></ftui-label>
<ftui-label [text]="AgroWeather:state | part(6)"></ftui-label>
<ftui-label [text]="AgroWeather:state | part(6) | fix(0)"></ftui-label>
<ftui-label [text]="AgroWeather:state | part(6) | round(0)"></ftui-label>
Zitat von: mr_petz am 01 November 2021, 19:57:48
So sollte es funzen...
<ftui-button [value]="HUEGroup2:any_on" states="pct 20, off" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="HUEGroup2">
</ftui-button>
Moin, ich habe dies ähnlich gemacht, nur "ein" und "aus", aber es wird nur jedes 2. Mal ausgeschaltet:
<ftui-button states= "on,off" fill="solid" size="large"
shape="normal" direction="horizontal"
[(value)]="HUEGroup51694"
[color]="HUEGroup51694:onoff | map('1:success, 0:light')">
<ftui-label size="3"
[text]="HUEGroup51694:onoff | map('1: An, 0: Aus')">
</ftui-label>
<ftui-icon type= "svg" path= "icons" size= "2"
[name]="HUEGroup51694:onoff | map('1: lightbulb-on, 0: lightbulb')">
</ftui-icon>
</ftui-button>Hat sich gerade erledigt, so funktioniert es jetzt nachdem ich ein map für [value] ergänzt habe:
<ftui-button states= "on,off" fill="solid" size="large"
shape="normal" direction="horizontal"
[value]="HUEGroup51694:onoff | map('1: on, 0: off')"
[color]="HUEGroup51694:onoff | map('1:success, 0:light')"
(value)="HUEGroup51694">
<ftui-label size="3"
[text]="HUEGroup51694:onoff | map('1: An, 0: Aus')">
</ftui-label>
<ftui-icon type= "svg" path= "icons" size= "2"
[name]="HUEGroup51694:onoff | map('1: lightbulb-on, 0: lightbulb')">
</ftui-icon>
</ftui-button>Gruß,
MDietrich
@MDietrich
Wir hatten uns auf die Lösung hingetastet...
Das war dann das Resultat:
Zitat von: mr_petz am 01 November 2021, 20:19:39
<ftui-button [(value)]="HUEGroup2:pct" states="20,0" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')">
</ftui-button>
Dann so. das get brauchst du ja nur für die Farben...
LG mr_petz
Ich möchte noch einmal darauf hinweisen, daß es Probleme mit Charts gibt, die man in einem content File aufbaut.
Man erhält dann immer beim Reload der Seite unten angehängte Fehlermeldung.
Außerdem fehlen teilweise die Achsenbeschriftungen.
Zitat von: grossmaggul am 07 Januar 2022, 10:01:38
Ich möchte noch einmal darauf hinweisen, daß es Probleme mit Charts gibt, die man in einem content File aufbaut.
Man erhält dann immer beim Reload der Seite unten angehängte Fehlermeldung.
Außerdem fehlen teilweise die Achsenbeschriftungen.
Moin,
ich habe ähnliche Beobachtungen gemacht und schon mal nachgefragt. Bisher hatte aber noch keiner eine Idee.
https://forum.fhem.de/index.php/topic,117779.msg1193973/topicseen.html#msg1193973
(https://forum.fhem.de/index.php/topic,117779.msg1193973/topicseen.html#msg1193973)
Gruß LuGu
Zitat von: mr_petz am 07 Januar 2022, 07:19:00
@presskopf, @hackepeter
Ich habe den Beitrag gefunden (ist von Januar 2021):D:
https://forum.fhem.de/index.php/topic,115259.msg1125250.html#msg1125250 (https://forum.fhem.de/index.php/topic,115259.msg1125250.html#msg1125250)
Ich habe es auch so in der Art umgesetzt.
LG mr_petz
Echt cool!
Ich versuche das gerade auf einen tab-view zu portieren.
mit dem @click klappt es prima, den Dummy mit der neuen URL zu füttern.
Wenn ich den tab-view verlasse, dann muss ich es mit einem anderen Tab-View-Icon entsprechend steuern.
Gibt es auch eine Möglichkeit à la @
Verlassen-des-aktuellen-tab-view="sendFhem ..." ?
<ftui-tab view="View3" (value)="dummy1">
<ftui-label size="5">Tab3</ftui-label>
</ftui-tab>
Bei Anwählen von Tab3 wird 'on' an dummy1 gesendet. Beim Verlassen 'off'
Danke.
Mittels dummy1 und einem doif kriege ich den URL-Dummy prima gefüttert!
@setstate
Das hast Du doch gerade eben - on the fly - eingebaut, oder?
War nämlich gerade am verzweifeln, weil meine Produktiv- und Test-Installation nicht identisch liefen! :o Ein Update hat's gefixt. ;D
Sagemal, welche Vorteile hat FTUI 3 eigentlich gegenüber der 2er? Außer das es Edler aussieht und Moderner ist...?
Zitat von: misux am 07 Januar 2022, 17:22:04
Sagemal, welche Vorteile hat FTUI 3 eigentlich gegenüber der 2er? Außer das es Edler aussieht und Moderner ist...?
Nicht falsch verstehen, aber die Vorteile stehen hier in den 131 langen Thread ;).
mpm
LG mr_petz
Ich wünsche allen vor allem Gesundheit im neuen Jahr!
(Und meinen sehr freundlichen Helfer @mr_petz grüße ich ganz besonders, danke!)
[Pause zum Jahreswechsel machen]
Zitat von: mr_petz am 29 Dezember 2021, 12:31:28
Das machst du richtig!
Back on stage.
Zitat von: mr_petz am 29 Dezember 2021, 12:31:28
Deswegen hatte ich auch schon erwähnt dass das Meiste schon im Thread steht.
Kein Mensch liest sich jedesmal 120 Seiten durch. Daher @setstate @rudolfkoenig
Wäre ein eigenes Unterforum für ftui3 nicht viel sinnvoller? Da kann es dann Threads für die einzelnen Elemente geben - es kann doch nicht wirklich sinnvoll sein, dass jeder das Rad neu erfindet.
Zitat von: mr_petz am 29 Dezember 2021, 12:31:28
Ich weiss es trotzdem nicht genau was du willst. Kannst du es genauer Beschreiben?
@click hatte ich hier schon mehrfach erwähnt.
Dafür habe ich eine Lösung gefunden (die vielleicht nicht so gedacht war) und gleich mal einen Bug dazu @setstate. Ich fange von vorne an:
Wir reden über das Kacheldesign, links senkrecht untereinander die Icons, die bei Klick auf die "Unterseiten" verzweigen. Nun möchte ich es so haben, dass
zusätzlich ein Klick auf ein Icon in einer
beliebigen Kachel eine konkrete
vorhandene Unterseite aufgerufen wird.
Die Kachel mit dem Fenstersymbol soll bei Klick auf die 'Seite' "View2" führen, das ist das konkrete Ziel.
Ohne Verlinkung ist der Code so (und das Ergebnis im ersten Bild):
<ftui-grid-tile row="1" col="2" height="1" width="1" color="black">
<ftui-column>
<ftui-label>Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon class="size-4" [name]=" structure_Fenster | map('open: window-open, closed: window-closed')"
[color]="structure_Fenster | map('open:my_signalred, closed:my_signalgreen')"
interval="60" nocache></ftui-icon>
</ftui-column>
</ftui-grid-tile>
Mit Verlinkung ist der Code so (und das Ergebnis im zweiten Bild):
<ftui-grid-tile row="1" col="2" height="1" width="1" color="black">
<ftui-column>
<ftui-label>Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-tab view="View2" direction="vertical">
<ftui-icon class="size-4" [name]=" structure_Fenster | map('open: window-open, closed: window-closed')"
[color]="structure_Fenster | map('open:my_signalred, closed:my_signalgreen')"
interval="60" nocache></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
Nun funktioniert der 'Link' sehr schön - aber mir hat es die Gestaltung zerhauen, "size-4" wird offensichtlich nicht mehr umgesetzt. Ist das ein Bug?
Nachtrag, Verständnisfragen:
Also 'interval="60"' sorgt offenbar dafür, dass der Status der Summe aller meiner Fenster alle 60 Sekunden erneuert wird, richtig?
Aber was bewirkt die Anwesenheit bzw. Abwesenheit von 'nocache' genau?
Mit Knob stehe ich leider auch noch auf dem Kriegsfuß, da gibt es (aus meiner bescheidenen Sicht) mehrere Formatierungsprobleme.
Basis (Größe der Kachel) ist
<ftui-grid base-width="96" base-height="86" margin="4">
Bei der linken Kachel sieht die Skala ganz schön aus - aber da kriege ich den Text nicht drunter:
<ftui-grid-tile row="2" col="6" height="1" width="1" color="black">
<ftui-row>
<ftui-knob [value]="Temperatur_Blumen_Flur:temperature"
[color]="Temperatur_Blumen_Flur:temperature | step('-25:my_darkred,0:my_darkblue,17:blue,21:my_signalgreen,25:my_signalorange,30:my_darkred')"
height="90" width="90" offset-y="10" has-arc min="-20" max="40" unit="°C" readonly
interval="60" nocache
has-value-text value-size="20px" stroke-width="6" decimals="1" class="size-1 bold">
</ftui-knob>
</ftui-row>
<ftui-row>
<ftui-label>Flur</ftui-label>
</ftui-row>
</ftui-grid-tile>
Bei der rechten Kachel klappt das, weil ich die Größe von Knob auf 65x65 setzte - aber das sieht Sheiße aus:
<ftui-grid-tile row="2" col="8" height="1" width="1" color="black">
<ftui-row>
<ftui-knob [value]="Gewaechshaus:temperature"
[color]="Gewaechshaus:temperature | step('-25:my_darkred,0:my_darkblue,17:blue,21:my_signalgreen,25:my_signalorange,30:my_darkred')"
height="65" width="65" offset-y="10" has-arc min="-20" max="40" readonly
interval="60" nocache
has-value-text value-size="20px" stroke-width="6" decimals="1" class="size-1 bold">
</ftui-knob>
</ftui-row>
<ftui-column>
<ftui-label>Gewächshaus</ftui-label>
</ftui-row>
</ftui-grid-tile>
Kriegt man das irgendwie besser hin? Also optisch wie links, aber den unten stehenden Text noch sichtbar?
Zusatzfrage:
'decimals="1"' soll ja theoretisch eine Nachkommastelle bringen. Aber warum wird die mir bei Knob nicht angezeigt? Mache ich da was falsch?
Zitat von: curt am 08 Januar 2022, 04:53:27
Nun funktioniert der 'Link' sehr schön - aber mir hat es die Gestaltung zerhauen, "size-4" wird offensichtlich nicht mehr umgesetzt. Ist das ein Bug?
Nachtrag, Verständnisfragen:
Also 'interval="60"' sorgt offenbar dafür, dass der Status der Summe aller meiner Fenster alle 60 Sekunden erneuert wird, richtig?
Aber was bewirkt die Anwesenheit bzw. Abwesenheit von 'nocache' genau?
"icon" unterstützt selbst auch ein Attribut namens
size; hier kann die gewünscht Größe angegeben werden: z.B. aus class="size-4" könnte dann size="4" werden - wohlgemerkt im "ftui-icon"-Tag.
"icon" unterstützt weder
interval noch
nocache - "image" natürlich schon, da man ja z.B. auf "externe", sich ständig ändernde Bilder zurückgreift.
Laut Deinem Beispiel wird autom. dann aktualisiert, wenn
structure_Fenster ein EVENT auslöst.
Die von @setstate bereitgestellten Beispiele vermitteln einen ungefähren Überblick, daher lohnt ein Blick ...
Zitat von: curt am 08 Januar 2022, 06:08:59
Kriegt man das irgendwie besser hin? Also optisch wie links, aber den unten stehenden Text noch sichtbar?
Zusatzfrage:
'decimals="1"' soll ja theoretisch eine Nachkommastelle bringen. Aber warum wird die mir bei Knob nicht angezeigt? Mache ich da was falsch?
Ich nutze das ungefähr nach folgendem Muster:
<ftui-row height="80%" color="yellow">
<ftui-knob [value]="Temperatur_Blumen_Flur:temperature"
[color]="Temperatur_Blumen_Flur:temperature | step('-25:my_darkred,0:my_darkblue,17:blue,21:my_signalgreen,25:my_signalorange,30:my_darkred')"
height="90" width="90" offset-y="10" has-arc min="-20" max="40" unit="°C" readonly
interval="60" nocache
has-value-text value-size="20px" stroke-width="6" decimals="1" class="size-1 bold">
</ftui-knob>
</ftui-row>
<ftui-row height="20%" color="red">
<ftui-label>Flur</ftui-label>
</ftui-row>
Die color-Angabe im ftui-row-Tag ist natürlich nur zur Anschauung und hat im echten Leben keine Bedeutung.
Die height-Angabe im ftui-row-Tag hingegen ist wichtig, sobald sie in einem der beiden ftui-row-Tags fehlt, verliert man die Kontrolle. Hat man sie in beiden ftui-row-Tags, nimmt der obere Teil 80% und der untere 20% des verfügbaren Platzes ein.
Bzgl. decimals="1": Ich verwende nicht die allerneueste Fassung von FTUI3 und da funktioniert es so, wie Du es Dir vorstellst. Also, egal ob ich keine oder zehn Nachkommastellen anlliefere, die Anzeige hat genau eine Nachkommastelle. Entweder Bug oder mittlerweile andere Funktionsweise - dunkel erinnere ich mich da ...
Zitat von: OdfFhem am 08 Januar 2022, 07:35:26
Ich nutze das ungefähr nach folgendem Muster:
Danke, teste ich nachher.
Zitat von: OdfFhem am 08 Januar 2022, 07:35:26
Bzgl. decimals="1": Ich verwende nicht die allerneueste Fassung von FTUI3
Ich hatte ja rumgemault, dass Nachkommastellen konzeptgemäß eigentlich in die Pipe und damit in round(x) gehören. @setstate hatte dazu allgemein und sybillisch reagiert - mag sein, er schraubt(e) da nun rum.
Zitat von: OdfFhem am 08 Januar 2022, 07:35:26
Also, egal ob ich keine oder zehn Nachkommastellen anlliefere, die Anzeige hat genau eine Nachkommastelle. Entweder Bug oder mittlerweile andere Funktionsweise - dunkel erinnere ich mich da ...
Ich würde mal von Bug ausgehen wollen - als ich anfing, war die Nachkommastelle noch da ... meine ich.
Zitat von: OdfFhem am 08 Januar 2022, 06:54:38
"icon" unterstützt selbst auch ein Attribut namens size
Ahhh - danke!
Zitat von: OdfFhem am 08 Januar 2022, 06:54:38
Laut Deinem Beispiel wird autom. dann aktualisiert, wenn structure_Fenster ein EVENT auslöst.
Das tut es.
(Das Icon ist grün, wenn sämtliche Fenster geschlossen ist. Wenn eins [oder mehrere] offen sind, ist es rot.)
Zitat von: OdfFhem am 08 Januar 2022, 06:54:38
Die von @setstate bereitgestellten Beispiele vermitteln einen ungefähren Überblick, daher lohnt ein Blick ...
... um einen Blick auf Javascript-Fehler zu nehmen. Aber ok, ist Beta.
Um da noch einen Schritt weiterzukommen:
Die Struktur
header ist insoweit klar, als das sie oben steht. Aber kann ich da auch dafür sorgen, dass der Hintergrund dem Hintergrund der Kachel entspricht? Und kann ich die Schrift manipulieren, also beispielsweise
nicht fett? Oder kleiner oder so?
Geil wäre natürlich auch eine Struktur
footer. @setstate
Zitat von: curt am 08 Januar 2022, 08:18:03
Um da noch einen Schritt weiterzukommen:
Die Struktur header ist insoweit klar, als das sie oben steht. Aber kann ich da auch dafür sorgen, dass der Hintergrund dem Hintergrund der Kachel entspricht? Und kann ich die Schrift manipulieren, also beispielsweise nicht fett? Oder kleiner oder so?
Geil wäre natürlich auch eine Struktur footer. @setstate
style- und/oder
class-Attribut hilft im Zweifel weiter ...
<header style="background-color:inherit !important;" class="size-6 thin"></header>
Es gibt auch ein footer-Tag ... allerdings funktioniert es in meinem (nicht aktuellen) Stand nicht richtig:
<footer style="color:green;">Ich bin ein Footer</footer>
Zitat von: curt am 08 Januar 2022, 06:08:59
Mit Knob stehe ich leider auch noch auf dem Kriegsfuß, da gibt es (aus meiner bescheidenen Sicht) mehrere Formatierungsprobleme.
Basis (Größe der Kachel) ist
<ftui-grid base-width="96" base-height="86" margin="4">
Du gibst deiner Kachel nur 96x86 Pixel und der Knob bekommt davon 90x90. Für das Label bleibt da echt nicht wirklich viel Rest-Platz übrig. Da kommt man nur mit Pixelschubserei weiter.
margin="-18px 0 0 0" unit-offset-y="13" value-offset-y="-5"Dafür habe ich jetzt unit-offset-y und value-offset-y eingeführt.
<ftui-grid base-width="96" base-height="86" margin="4">
<ftui-grid-tile row="2" col="6" height="1" width="1">
<ftui-knob value="-1.44453"
value-decimals="1"
height="90" width="90" offset-y="10" has-arc min="-20" max="40" unit="°C" readonly
margin="-18px 0 0 0" unit-offset-y="13" value-offset-y="-5"
has-value-text value-size="18px" stroke-width="6" class="bold">
</ftui-knob>
<ftui-label margin="-20px 0 0 0">Flur</ftui-label>
</ftui-grid-tile>
</ftui-grid>
decimals wurde ersetzt durch value-decimals und scale-decimals
@setstate
mir ist gerade aufgefallen, dass das hbus.svg nicht mehr im branch existiert und du das ehemals refresh1.svg in refresh.svg umbenannt hast.
Jetzt kommt ein Fehler auf der Departure Demo.
Ich habe da mal ein pull request angestoßen ;)
LG mr_petz
Edit: oh misst. vertippt.. (renamed)
Zitat von: curt am 08 Januar 2022, 07:53:58
Ich hatte ja rumgemault, dass Nachkommastellen konzeptgemäß eigentlich in die Pipe und damit in round(x) gehören. @setstate hatte dazu allgemein und sybillisch reagiert - mag sein, er schraubt(e) da nun rum.
Ich würde mal von Bug ausgehen wollen - als ich anfing, war die Nachkommastelle noch da ... meine ich.
ja, ich schraube da manchmal herum, wenn sich die Anforderungen konkretisieren.
decimals ist jetzt value-decimals bzw. scale-decimals
Die Bedeutung von *-decimals kann ich nur wieder per Beispiel verdeutlichen. Wenn ich ein steuerendes Control habe, brauche ich eine Vorgabe für die Darstellung für die Skala und Soll-Wert
value-decimals="2" -> z.B. 20.52
scale-decimals="1". -> z.B. 20.2
Da ist noch kein Wert raus an FHEM oder durch eine Pipe. Nur Darstellungbeeinflussung ohne Input/Output Verkehr.
Die Pipe-Funktionen sind nur für die Bearbeitung Input/Output Daten, nicht für die Skalen-Formatierung.
Man könnte sich jetzt einige Input-Automatismen vorstellen, wie: wenn der Wert von FHEM 19.1 ist, soll die Skale 20-30 anzeigen und wenn der Wert 19.15 wäre 20.5 - 30.5 besser usw. Das ist aber sehr einschränkend und vllt. bei einem spezifischen Thermostat Control optimal, aber für ein generisches KNOB Element unpassend.
<ftui-knob (value)="multiply(3.1415) | round(1) | dummy2"
value-decimals="2"
scale-decimals="1"
ticks="9"
step="0.01"
min="20" max="21"
has-arc has-value-text has-scale has-scale-text
value-size="18px" stroke-width="6"
scale-text-offset="15"
class="bold">
</ftui-knob>
Ich möchte in einem Popup ein schließen Button einbauen.
In FTUI2 hatte ich das so gelöst.
<div data-type="link" class="round right wider centered left-narrow-3x"
data-width="130" data-height="50"
data-color="white"
data-background-color="#505050"
data-icon="fa-check"
onclick="$('.dialog-close').trigger('click');">OK</div>
Gibt es in FTUI3 auch eine einfache Möglichkeit, ohne über ein Reading zu gehen?
@stefan-dd
So zum Beispiel?:
<ftui-popup id="pop1" timeout="0">
<header>Popup 1</header>
<ftui-button popup-close>close</ftui-button>
</ftui-popup>
steht auch in dem examples-File vom Popup.
Konntest du jetzt dein fix(0) Problem lösen? Wenn ja Wie?
Wenn nein, zeige bitte mal dein Reading.
LG mr_petz
Danke, beide Probleme gelöst.
Zitat von: setstate am 08 Januar 2022, 13:19:32
Du gibst deiner Kachel nur 96x86 Pixel und der Knob bekommt davon 90x90.
Sei gegrüßt, alles Gute und Gesundheit im neuen Jahr!
Bei einem Originaldisplay für Raspberry Pi bekommt man so ein Design von 8x5 Kacheln. Wäre es ggf. sinnvoll, die 90x90 einer Konstruktion wie
class="size-5" zu überlassen?
Zitat von: setstate am 08 Januar 2022, 14:03:00
ja, ich schraube da manchmal herum, wenn sich die Anforderungen konkretisieren.
Ja, klar.
Zitat von: setstate am 08 Januar 2022, 14:03:00
decimals ist jetzt value-decimals bzw. scale-decimals
Ok, danke Dir.
Und Dank auch an alle anderen - ich habe noch nicht alles probieren bzw. umsetzen können - bin aber dran.
Wenn ich das bei Chartdata angebe ;
<ftui-chart-data label="Verbrauch" log="HeizungBadStrom_Log" spec="4:Stunden" file="CURRENT"
type="line" unit="kWh" color="red" point-radius=1></ftui-chart-data>
bekomme ich alle Readings geplottet, die 'Stunden' enthalten, so als haette ich 'Stunden.*' oder aehnliches angegeben.
Das soll sicher nicht so sein ?
Zitat von: Wolfgang Hochweller am 09 Januar 2022, 10:42:22
Das soll sicher nicht so sein ?
Das
.* wird auf FHEM-Seite unterstellt, um einen Match erzielen zu können - hat nichts mit FTUI3 zu tun.
Um Readingnamen passend zum Logfile begrenzen zu können, muss man den
: anhängen und zwar kodiert als
\x3a, da der reine
: auf der FHEM-Seite schon eine andere Bedutung hat.
<ftui-chart-data label="Verbrauch" log="HeizungBadStrom_Log" spec="4:Stunden\x3a" file="CURRENT"
type="line" unit="kWh" color="red" point-radius=1></ftui-chart-data>
Ah, ok.
Dann war das schon immer so ?
Hab ich wohl bisher Glueck gehabt ...
Wenn es weiter nichts ist, danke.
Nabend zusammen,
ich habe noch Ansichtsprobleme bei den Müll Terminen, wo ich nicht weiterkomme.
<ftui-grid-tile row="7" col="13" height="2" width="2">
<header>Müll</header>
<ftui-row>
<ftui-column>
<ftui-icon name="trash" color="black" [class-name]="MuellterminDummy:Restmuell_days | map('0:spin,1:hop')"></ftui-icon>
<ftui-badge [color]="MuellterminDummy:Restmuell_days | step('0:red, 1:red')"> </ftui-badge>
<ftui-badge [text]="MuellterminDummy:Restmuell_days"> </ftui-badge>
</ftui-column>
<ftui-column>
<ftui-icon name="trash" color="yellow" [class-name]="MuellterminDummy:GelbeTonne_days | map('0:spin,1:hop')"></ftui-icon>
<ftui-badge [color]="MuellterminDummy:GelbeTonne_days | step('0:red, 1:red')"> </ftui-badge>
<ftui-badge [text]="MuellterminDummy:GelbeTonne_days"> </ftui-badge>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-icon name="trash" color="blue" [class-name]="MuellterminDummy:PapierPappeKarton_days | map('0:spin,1:hop')"></ftui-icon>
<ftui-badge [color]="MuellterminDummy:PapierPappeKarton_days | step('0:red, 1:red')"> </ftui-badge>
<ftui-badge [text]="MuellterminDummy:PapierPappeKarton_days"> </ftui-badge>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Funktional passt alles, aber es ist zu klein. Im Anhang sind zwei screenshots FTUI2 und FTUI3.
Mit align-items="center" oder align-items="around" bin ich nicht weiter gekommen.
Zitat von: setstate am 08 Januar 2022, 13:19:32
Du gibst deiner Kachel nur 96x86 Pixel und der Knob bekommt davon 90x90. Für das Label bleibt da echt nicht wirklich viel Rest-Platz übrig. Da kommt man nur mit Pixelschubserei weiter.
margin="-18px 0 0 0" unit-offset-y="13" value-offset-y="-5"
Dafür habe ich jetzt unit-offset-y und value-offset-y eingeführt.
Also mit margin komme ich gut zurecht, danke dafür.
Aktuell hakt es bei meiner Kachelgröße 96x86 mit dem Slider;
<ftui-slider [value]="Putzi_2:batteryPercent" min="0" max="100" is-vertical handle="none" readonly
[color]="Putzi_2:batteryPercent | step('3:my_darkred, 10:my_signalorange, 80:my_signalgreen')">
</ftui-slider>
In 2x2 verbundenen Kacheln wird der angezeigt, in einer Einzelkachel wird er nicht angezeigt. Was kann ich da tun?
Kann ich erreichen, dass bei einem Popup-Menu der Rest des Schirms inaktiv bleibt, solange das Popup geöffnet ist ?
Zitat von: Wolfgang Hochweller am 10 Januar 2022, 17:18:00
Kann ich erreichen, dass bei einem Popup-Menu der Rest des Schirms inaktiv bleibt, solange das Popup geöffnet ist ?
Die Elemente hinter dem Popup sind durch ein Overlay verdeckt. Mit Klick auf diese Overlay verschwindet das Popup.
Das willst du verhindern? Das könnte man mit einem Attribute des Popup bewerkstelligen. Ich tue mich aber gerade schwer, einen passenden Namen für dieses Attribute zu finden. Der Name sollte nicht zu lang und auch nicht unbedingt negiert lauten.
no-click-overlay ist so ein unschöner Name, der mir einfällt. Jemand Ideen?
@setstate
Du kannst es doch auch per css im template() Teil vom popup Code lösen:
<style>
.overlay {
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
overflow: auto;
background-color:var(--popup-overlay-color, #000);
z-index: 99;
opacity: ${this.opacity};
pointer-events:var(--popup-pointer-events, all);
}
</style>
Dann kann jeder per style Tag oder per user.css einfügen/benutzen und das auch für jedes popup einzeln aktivieren?
LG mr_petz
haben es ja schon per css gelöst (wenn das das Ziel von Wolfgang war), aber ohne guten Namen will ich das nicht freigeben
:host([no-click]) .overlay {
pointer-events: none;
}
Ok. Habe ich nicht gewusst.
Habe paar Vorschläge:
disabled-overlay
deactivated-overlay
switched-off-overlay
none-interacting-overlay
none-pointer-event
pointer-event-none
click-outside-none
clickoutside-none
outsideclick-none
none-outsideclick
passive-outsideclick
passive-overlay
Ich kann mir noch paar ausdenken ;)
oder lieber nicht mehr... ;D
LG mr_petz
Edit: einen hatte ich noch :)
Hallo zusammen
Kann mir jemand erklären wie ich den Title in examples/menu.html anpassen kann? Color etc?
Welche components ist dafür verantwortlich? view-toolbar.js?
Definieren tue ich den Title in:
<ftui-tab-view id="View2">
<ftui-content file="examples/contents/content-view1.html" room="sound"></ftui-content>
</ftui-tab-view>
Grüsse und danke :-)
EDIT:
gefunden
Uhi.... Vielleicht sollte ich auch mal in die content-view1 schauen >:(
aber ein linksbündig nimmt er dort leider nicht. Gedankenfehler?
<ftui-view-toolbar>
<ftui-title align-items="left" >{{room}}</ftui-title>
</ftui-view-toolbar>
Muss das ftui-view-toolbar mir dem title in jede content Seite? Ging das nicht mal über die Index ?
<ftui-tab view="view2" title="Sound"></ftui-tab>
Zitat von: curt am 10 Januar 2022, 03:23:16
Aktuell hakt es bei meiner Kachelgröße 96x86 mit dem Slider;
<ftui-slider [value]="Putzi_2:batteryPercent" min="0" max="100" is-vertical handle="none" readonly
[color]="Putzi_2:batteryPercent | step('3:my_darkred, 10:my_signalorange, 80:my_signalgreen')">
</ftui-slider>
In 2x2 verbundenen Kacheln wird der angezeigt, in einer Einzelkachel wird er nicht angezeigt. Was kann ich da tun?
Zu dieser unbeantworteten Frage kommt eine neue Frage: Kann Slider seine Farbe überhaupt in Abhängigkeit des Werts (siehe Konstrukt oben) ändern? Bei mir tut sich da nämlich nichts.
Und noch eine ganz allgemeine Frage:
Bei ftui2 konnte man mit Includes arbeiten (die ich immer in Verdacht hatte, dass sie für nicht aktualisierte Daten verantwortlich sind): Also man hatte nicht nur index.html sondern einen Sack weiterer Textdateien - das machte die Sache übersichtlicher. Gibt es sowas auch für FTUI3?
Zitat von: curt am 11 Januar 2022, 03:02:00
Und noch eine ganz allgemeine Frage:
Bei ftui2 konnte man mit Includes arbeiten (die ich immer in Verdacht hatte, dass sie für nicht aktualisierte Daten verantwortlich sind): Also man hatte nicht nur index.html sondern einen Sack weiterer Textdateien - das machte die Sache übersichtlicher. Gibt es sowas auch für FTUI3?
ftui-contentBeispiele im examples-Ordner wie content.html oder tab-content.html oder ... zeigen die Verwendungsweise ...
Ich will errreichen, dass, wenn man z. B. die Popup-Icons nicht trifft, nicht das dahinter/darunter liegende Element bedient wird.
Sorry fuer die Verwirrung .....
Das ging nicht um Popups, sondern um Circle-Menu.
Sicher im Zusammenhang mit dem in Antwort #1984 Problem.
Ich stosse auf ein generelles Problem mit den Circle-Menus, gar nicht so einfach zu beschreiben :
Ich starte meine FTUI3-Oberflaeche, klicke mich ein paarmal durch einige Seiten ( Tabview ).
Will ich dann ein Circle-Menu oeffnen, ist erstmal Pause, sprich , es dauert lange, bis sich das Circle-Menu oeffnet.
Wenn es sich oeffnet, geschieht alles so wie in Super-Zeitlupe; manchmal kann ich sehen, wie ein Icon nach dem anderen erscheint.
Manchmal erscheinen die Icons auch unter den Nachbarkacheln und kommen erst viel spaeter in den Vordergrund.
Warte ich dann auf das automatische Close des Menus, dauert auch das gerne mal 10 - 20 sek laenger als sonst.
Fuehlt sich so an, als kaemen laufend Timeouts, bis es zwischendurch mal wieder weitergeht.
Meist erholt sich das System wieder, ich kann das Cirle-Menu dann oeffnen und schliessen, ganz normal.
Klicke ich mich jetzt wieder ein bisschen durch die TabViews ( geht schnell und ohne Verzoegerungen ),
habe ich bei dem naechsten Circle-Menu wieder das gleiche Spiel.
Im allerschimmsten Fall muss ich den Browser neu starten, weil es zu lange dauert oder das System scheinbar haengt.
Machen andere aehnliche Erfahrungen ?
Das betrifft immer nur Circle-Menus, nicht etwa andere Popups.
Android-Tablets tun sich dabei besonders hervor ( auch wenn sie gut bestueckt sind ), Android-Handys weniger, Desktop-Pc keine Probleme ( oder ich habe nicht lange genug probiert ).
Browser ist immer Chrome.
Ich kann das noch ein bisschen vertiefen.
Ich habe jetzt meine Circle-Menus durch standard Popups ersetzt.
Ergebnis :
Viel besser, aber nicht wirklich ok.
1. Popups mit Charts machen offenbar keine Probleme.
2. Popups, die Buttons mit Bindings enthalten, schleichen geradezu dahin.
Das Kommando des Buttons ist schon laengst ausgefuehrt, dann kann man sehen, wie die Toastmessage langsam und schrittweise erscheint,
und auch wieder verschwindet.
Das variiert ein bisschen, ist aber deutlich zu bemerken.
Zitat von: SirMarco am 10 Januar 2022, 21:45:00
Hallo zusammen
Kann mir jemand erklären wie ich den Title in examples/menu.html anpassen kann? Color etc?
Welche components ist dafür verantwortlich? view-toolbar.js?
Definieren tue ich den Title in:
<ftui-tab-view id="View2">
<ftui-content file="examples/contents/content-view1.html" room="sound"></ftui-content>
</ftui-tab-view>
Grüsse und danke :-)
EDIT:
gefunden
Uhi.... Vielleicht sollte ich auch mal in die content-view1 schauen >:(
aber ein linksbündig nimmt er dort leider nicht. Gedankenfehler?
<ftui-view-toolbar>
<ftui-title align-items="left" >{{room}}</ftui-title>
</ftui-view-toolbar>
Muss das ftui-view-toolbar mir dem title in jede content Seite? Ging das nicht mal über die Index ?
<ftui-tab view="view2" title="Sound"></ftui-tab>
Da geht einiges schief, das sehe ich bei mir auch. Gerade, dass der Titel so hell ist, ist auch ein Fehler durch Überlagerungen. Bin ich dran.
Darüber würde ich mich sehr freuen :)
Was mache ich falsch, oder was stimmt nicht?
Einschalten geht immer sofort, zum Ausschalten muss der Button immer 2x betätigt werden.
Mit FTUI2 gab es das Problem nicht.
<ftui-button [(value)]="WoZi_Klavier" states="on:off" >Klavier</ftui-button>
Internals:
CID DVES_80FE89
DEF DVES_80FE89
DEVICETOPIC WoZi_Klavier
FUUID 5c914ed7-f33f-804b-739a-d7599a9ac51bc997
IODev MQTT_Server
LASTInputDev MQTT_Server
MQTT_Server_CONN MQTT_Server_192.168.1.217_63117
MQTT_Server_MSGCNT 6404
MQTT_Server_TIME 2022-01-12 18:37:17
MSGCNT 6404
NAME WoZi_Klavier
NR 1080
STATE OFF
TYPE MQTT2_DEVICE
READINGS:
2022-01-08 12:36:17 FallbackTopic cmnd/DVES_80FE89_fb/
2022-01-08 12:36:17 GroupTopic sonoff/sonoffs/cmnd/
2022-01-12 18:36:24 Heap 28
2022-01-08 12:36:17 Hostname klavier-7817
2021-12-22 21:57:22 IODev MQTT_Server
2022-01-08 12:36:17 IPAddress 192.168.1.217
2022-01-12 12:59:08 LWT Online
2022-01-12 18:36:24 LoadAvg 19
2022-01-08 12:36:17 Module Sonoff Basic
2022-01-12 18:36:24 MqttCount 9
2019-10-13 20:50:33 OtaUrl http://thehackbox.org/tasmota/release/sonoff-DE.bin
2022-01-12 18:37:17 POWER OFF
2022-01-08 12:36:17 RestartReason Power On
2022-01-12 18:36:24 Sleep 50
2022-01-12 18:36:24 SleepMode Dynamic
2022-01-12 18:36:24 Time 2022-01-12T18:36:24
2019-10-13 20:50:33 Upgrade Version 6.6.0 from http://thehackbox.org/tasmota/release/sonoff-DE.bin
2022-01-12 18:36:24 Uptime 4T06:00:12
2022-01-12 18:36:24 UptimeSec 367212
2020-12-26 14:09:37 Vcc 3.506
2022-01-08 12:36:17 Version 9.2.0.1(tasmota)
2019-12-19 09:47:41 WebColor_1 #eaeaea
2019-12-19 09:47:41 WebColor_10 #faffff
2019-12-19 09:47:41 WebColor_11 #1fa3ec
2019-12-19 09:47:41 WebColor_12 #0e70a4
2019-12-19 09:47:41 WebColor_13 #d43535
2019-12-19 09:47:41 WebColor_14 #931f1f
2019-12-19 09:47:41 WebColor_15 #47c266
2019-12-19 09:47:41 WebColor_16 #5aaf6f
2019-12-19 09:47:41 WebColor_17 #faffff
2019-12-19 09:47:41 WebColor_18 #999999
2019-12-19 09:47:41 WebColor_19 #eaeaea
2019-12-19 09:47:41 WebColor_2 #252525
2019-12-19 09:47:41 WebColor_3 #4f4f4f
2019-12-19 09:47:41 WebColor_4 #000000
2019-12-19 09:47:41 WebColor_5 #dddddd
2019-12-19 09:47:41 WebColor_6 #65c115
2019-12-19 09:47:41 WebColor_7 #1f1f1f
2019-12-19 09:47:41 WebColor_8 #ff5661
2019-12-19 09:47:41 WebColor_9 #008000
2022-01-08 12:36:17 WebServerMode Admin
2022-01-12 18:36:24 Wifi_AP 1
2022-01-12 18:36:24 Wifi_BSSId 7C:FF:4D:5A:F0:56
2022-01-12 18:36:24 Wifi_Channel 1
2022-01-12 18:36:24 Wifi_Downtime 0T00:00:15
2022-01-12 18:36:24 Wifi_LinkCount 6
2022-01-12 18:36:24 Wifi_RSSI 64
2022-01-12 18:36:24 Wifi_SSId Airport
2022-01-12 18:36:24 Wifi_Signal -68
2022-01-12 18:34:34 actifity alive
2022-01-12 18:37:17 state off
2020-05-04 20:27:31 status ON
2021-12-22 21:58:52 subscriptions cmnd/DVES_80FE89_fb/# sonoff/klavier/cmnd/# sonoff/sonoffs/cmnd/#
2019-08-23 21:36:30 visibility 1
hmccu:
Attributes:
IODev MQTT_Server
alias Klavier
autocreate 1
cmdIcon on:general_an off:general_aus
devStateIcon ON:10px-kreis-rot OFF:10px-kreis-gruen Offline:10px-kreis-gelb
event-on-change-reading POWER,Wifi_RSSI,state
group Beleuchtung
readingList DVES_80FE89:sonoff/klavier/tele/LWT:.* LWT
DVES_80FE89:sonoff/klavier/cmnd/POWER:.* POWER
DVES_80FE89:sonoff/klavier/tele/STATE:.* { json2nameValue($EVENT) }
DVES_80FE89:sonoff/klavier/tele/UPTIME:.* { json2nameValue($EVENT) }
DVES_80FE89:sonoff/klavier/stat/RESULT:.* { json2nameValue($EVENT) }
DVES_80FE89:sonoff/klavier/stat/POWER:.* POWER
DVES_80FE89:sonoff/klavier/tele/INFO1:.* { json2nameValue($EVENT) }
DVES_80FE89:sonoff/klavier/tele/INFO2:.* { json2nameValue($EVENT) }
DVES_80FE89:sonoff/klavier/tele/INFO3:.* { json2nameValue($EVENT) }
readingsWatcher 300,,Wifi_RSSI
room Wohnzimmer
setList on sonoff/klavier/cmnd/power on
off sonoff/klavier/cmnd/power off
stateFormat {ReadingsVal($name,"LWT","") eq "Offline" ? "Offline" : ReadingsVal($name,"POWER","")}
userReadings POWER {ReadingsVal($name,"LWT","") eq "Offline" ? "Offline" : ReadingsVal($name,"POWER","")}
webCmd on:off
FTUI2
<div data-type="switch"
data-device="WoZi_Klavier"
data-get="POWER"
data-set-states='["off","on",""]'
data-states='["ON","OFF","Offline"]'
data-colors='["#2A2A2A","#2A2A2A","#2A2A2A"]'
data-background-colors='["Red","#505050","blue"]'
class="top-space"></div>
@stefan-dd
Ich glaube die states müssen mit Komma getrennt sein.
<ftui-button [(value)]="WoZi_Klavier" states="on,off" >Klavier</ftui-button>
Gruß LuGu
Das ist richtig, der Doppelpunkt ist falsch. Spielt aber praktisch keine Rolle.
Irgendwie hängt das mit den Tasmota Zwischensteckern zusammen. Alle anderen Aktoren funktionieren richtig.
Zitat von: stefan-dd am 12 Januar 2022, 20:27:08
Das ist richtig, der Doppelpunkt ist falsch. Spielt aber praktisch keine Rolle.
Irgendwie hängt das mit den Tasmota Zwischensteckern zusammen. Alle anderen Aktoren funktionieren richtig.
Bei FTUI2 hast du POWER benutzt. Das musst du hier denke ich auch.
<ftui-button size="large" shape="circle"
[value]="Gosund90:POWER"
(value)="Gosund90:POWER"
[fill]="Gosund90:POWER | map('off: outline, on: solid')"
[color]="Gosund90:POWER | map('off: medium, on: primary')">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
So funktioniert es bei mir auch beim ersten Click.
Also bei dir dann:
<ftui-button [(value)]="WoZi_Klavier:POWER" states="on,off" >Klavier</ftui-button>
Gruß LuGu
Ich moechte neben den Button-Bindings bei einem Klick auch noch ein FHEM-Kommando ausfuehren.
Kann ich das und wenn ja, wie mache ich das ?
Zitat von: Wolfgang Hochweller am 13 Januar 2022, 10:56:11
Ich moechte neben den Button-Bindings bei einem Klick auch noch ein FHEM-Kommando ausfuehren.
Kann ich das und wenn ja, wie mache ich das ?
Bsp:
<ftui-button [(value)]="device" class="size-1" @click="sendFhem('set dummy on')">set FHEMdummy</ftui-button>
LG mr_petz
Super, danke.
Das @click wird natürlich bei jedem click auf dem button gesendet...
LG
Danke. Genau das moechte ich haben.
Da ich mit den Circlemenus nicht wirklich gluecklich war, habe ich sie durch Popups mit Buttons ersetzt.
Und schliesse das Popup, wenn ich irgendeinen der Buttons angeklickt habe, damit ich nicht auf das automatische Close warten muss.
Also entweder ist bei dem letzten Update vor einer Stunde was schief gelaufen oder man muss eine andere Syntax verwenden.
Jedenfalls sehe ich jetzt gar nichts mehr, die Seite ist leer, weder Menü noch Tabs zu sehen.
@grossmaggul
In einem solchen Fall wäre ein Blick in die (hoffentlich zugängliche) "Console" des Browsers hilfreich ... dort werden (normalerweise) u.a. aufgetretene Fehler ausgegeben ...
nach dem Update habe ich das gleiche Problem.
Gemäß GOOGLE: 21 errors
ftui.helper.js:152 Failed to load ../../components/title/title.component.js TypeError: Failed to fetch dynamically imported module: http://xxx.xxx.xxx.xxx:8083/fhem/ftui3/components/title/title.component.js
error @ ftui.helper.js:152
loadModule @ ftui.app.js:107
await in loadModule (async)
(anonymous) @ ftui.app.js:136
loadUndefinedComponents @ ftui.app.js:132
initComponents @ ftui.app.js:95
initContent @ content.component.js:98
loadFileContent @ content.component.js:89
await in loadFileContent (async)
FtuiContent @ content.component.js:26
(anonymous) @ content.component.js:103
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
(anonymous) @ thermostat.component.js:498
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
(anonymous) @ thermostat.component.js:498
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
(anonymous) @ thermostat.component.js:498
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
(anonymous) @ thermostat.component.js:498
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonymous) @ button.component.js:82
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonymous) @ button.component.js:82
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonymous) @ button.component.js:82
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonymous) @ button.component.js:82
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
Zitat von: SirMarco am 10 Januar 2022, 21:45:00
Hallo zusammen
Kann mir jemand erklären wie ich den Title in examples/menu.html anpassen kann? Color etc?
Welche components ist dafür verantwortlich? view-toolbar.js?
Definieren tue ich den Title in:
<ftui-tab-view id="View2">
<ftui-content file="examples/contents/content-view1.html" room="sound"></ftui-content>
</ftui-tab-view>
Grüsse und danke :-)
EDIT:
gefunden
Uhi.... Vielleicht sollte ich auch mal in die content-view1 schauen >:(
aber ein linksbündig nimmt er dort leider nicht. Gedankenfehler?
<ftui-view-toolbar>
<ftui-title align-items="left" >{{room}}</ftui-title>
</ftui-view-toolbar>
Muss das ftui-view-toolbar mir dem title in jede content Seite? Ging das nicht mal über die Index ?
<ftui-tab view="view2" title="Sound"></ftui-tab>
Die Beispiel habe ich jetzt überarbeitet. Es gibt jetzt beide Möglichkeiten:
1.) einmal ist die Toolbar mit Menü-Button und Titel in jedem View wiederholt mit drin.
https://knowthelist.github.io/ftui/www/ftui/examples/menu.html
<ftui-main>
<ftui-tab-view>
<ftui-view>
<ftui-view-toolbar>
{{beliebigerTextAlsTitle}}
2.) oder, Menü-Button und Titel gibt es nur einmal
https://knowthelist.github.io/ftui/www/ftui/examples/menu2.html oder https://knowthelist.github.io/ftui/www/ftui/examples/mobile.html
<ftui-main>
<ftui-view>
<ftui-view-toolbar slot="header">
<ftui-menu-button slot="start"></ftui-menu-button>
<ftui-tab-title text-align="left"></ftui-tab-title>
</ftui-view-toolbar>
<ftui-tab-view>
Dann muss man ftui-tab-title benutzen, um von den aktivierten Tabs den Text zu bekommen.
Zitat von: MDietrich am 14 Januar 2022, 07:23:56
nach dem Update habe ich das gleiche Problem.
Gemäß GOOGLE: 21 errors
ftui.helper.js:152 Failed to load ../../components/title/title.component.js TypeError: Failed to fetch dynamically imported module: http://xxx.xxx.xxx.xxx:8083/fhem/ftui3/components/title/title.component.js
error @ ftui.helper.js:152
loadModule @ ftui.app.js:107
await in loadModule (async)
(anonymous) @ ftui.app.js:136
loadUndefinedComponents @ ftui.app.js:132
initComponents @ ftui.app.js:95
initContent @ content.component.js:98
loadFileContent @ content.component.js:89
await in loadFileContent (async)
FtuiContent @ content.component.js:26
(anonymous) @ content.component.js:103
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
(anonymous) @ thermostat.component.js:498
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
(anonymous) @ thermostat.component.js:498
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
(anonymous) @ thermostat.component.js:498
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
(anonymous) @ thermostat.component.js:498
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonymous) @ button.component.js:82
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonymous) @ button.component.js:82
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonymous) @ button.component.js:82
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonymous) @ button.component.js:82
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
Es sieht so aus, als ob in der thermostat.component.js <ftui-title> benutzt wird. Die gibt es nicht mehr. Müsste durch <ftui-label> ersetzt werden.
thermostat.component.js verwendet scheinbar weder ftui-title noch ftui-label ...
Kann es denn sein, dass die nutzereigene Seite ftui- title verwendet ?
Ja ich habe weder <ftui-title> noch <ftui-label>...
"nur" <ftui-icon>. Wird da auch auf title zugegriffen?
Der Fehler sagt ja was von touchmove bei thermostat und bei button von touchstart event listener???
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonymous) @ button.component.js:82
thermostat.component.js:38 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiThermostat @ thermostat.component.js:38
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
Edit: kann bei mir ohne content keinen Fehler unter Chrome am thermostat feststellen...
@setstate
sollte man jetzt
{ passive: true }
oder
{ passive: !ns.includes('noPreventDefault') }
dem EventListener mitgeben? (bei eigener Komponente)
Guten Morgen,
ja, in einem content-file hatte ich ftui-title verwendet und gerade entfernt.
Die Fehlermeldung sieht jetzt so aus:
Failed to load resource: the server responded with a status of 404 (Not Found)
components/tab/tab-title.component.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
5ftui.helper.js:152 Failed to load ../../components/tab/tab.component.js TypeError: Failed to fetch dynamically imported module: http://xxx.xxx.xxx.xxx:8083/fhem/ftui3/components/tab/tab.component.js
error @ ftui.helper.js:152
color-attributes.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
color-attributes.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
color-attributes.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
color-attributes.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
5ftui.helper.js:152 [ftuiApp] error: initComponents - Timed out in 5000ms.
Könnte sich da ein "/" eingeschlichen haben:
File not found: ./www/ftui//components/tab/tab-title.component.js
EDIT: Die Datei ist nicht vorhanden und wird auch bei einem "update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt" nicht geladen
EDIT 2: Habe die Datei manuell aus dem git kopiert, habe jetzt neue Meldungen:
GET http://matthiasdietrich.noip.me:8083/fhem/themes/color-attributes.css net::ERR_ABORTED 404 (Not Found)
was nachvollziehbar ist, das sie Datei ja im FTUI Verzeichnis liegt
ftui.helper.js:152 Failed to load ../../components/tab/tab.component.js SyntaxError: Unexpected token '<'
error @ ftui.helper.js:152
loadModule @ ftui.app.js:107
await in loadModule (async)
(anonymous) @ ftui.app.js:136
loadUndefinedComponents @ ftui.app.js:132
initComponents @ ftui.app.js:95
initContent @ content.component.js:98
loadFileContent @ content.component.js:89
await in loadFileContent (async)
FtuiContent @ content.component.js:26
(anonymous) @ content.component.js:103
Viele Grüße
MDietrich
ZitatIn einem solchen Fall wäre ein Blick in die (hoffentlich zugängliche) "Console" des Browsers hilfreich
Bevor ich hier alles mit Konsolenausgaben vollmülle, wollte ich erstmal wissen, ob das Problem mal wieder vor meinem Rechner sitzt.;)
Aber gut, beim Reload der Seite bekomme ich zig Fehlermeldung mit diesem Wortlaut:
button.component.js:19 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
FtuiButton @ button.component.js:19
(anonym) @ button.component.js:82
Allerdings nicht nur für "button.component.js" sondern auch für "thermostat.*, knob.* und volume3d.*"
Da kommen aber noch mehr Fehler:
jquery.flot.js:3151 Uncaught TypeError: Cannot read properties of null (reading 'save')
at G (jquery.flot.js:3151:18)
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
about:client:1 GET http://192.168.1.12:8083/fhem/themes/color-attributes.css net::ERR_ABORTED 404 (Not Found)
ftui.helper.js:152 Failed to load ../../components/tab/tab.component.js TypeError: Failed to fetch dynamically imported module: http://192.168.1.12:8083/fhem/ftui/components/tab/tab.component.js
error @ ftui.helper.js:152
loadModule @ ftui.app.js:107
await in loadModule (async)
(anonym) @ ftui.app.js:136
loadUndefinedComponents @ ftui.app.js:132
initComponents @ ftui.app.js:95
initPage @ ftui.app.js:79
init @ ftui.app.js:66
await in init (async)
main @ ftui.js:7
await in main (async)
(anonym) @ ftui.js:19
calendar.component.js:138 refresh ftui_calendar_1
chart.component.js:321 Uncaught TypeError: dataElement.fetch is not a function
at chart.component.js:321:19
at NodeList.forEach (<anonymous>)
at FtuiChart.refresh (chart.component.js:315:23)
at FtuiChart.onAttributeChanged (chart.component.js:301:14)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at FtuiChart.set (element.component.js:164:25)
at FtuiChart.onAttributeChanged (chart.component.js:296:21)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at HTMLElement.initContent (content.component.js:96:20)
at HTMLElement.loadFileContent (content.component.js:89:10)
(anonym) @ chart.component.js:321
refresh @ chart.component.js:315
onAttributeChanged @ chart.component.js:301
attributeChangedCallback @ element.component.js:76
set @ element.component.js:164
onAttributeChanged @ chart.component.js:296
attributeChangedCallback @ element.component.js:76
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
await in loadFileContent (async)
FtuiContent @ content.component.js:26
(anonym) @ content.component.js:103
7[Violation] 'ftuiDataChanged' handler Zeit: <N> msAchso, das passiert übrigens auch, wenn man die mitgelieferte index.html aufruft und die Fehlermeldung dazu:
[Violation] Added non-passive event listener to a scroll-blocking <some>-Ereignis. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
[Violation] Forced reflow while executing JavaScript took 50ms
tab-title.component.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
ftui.helper.js:152 Failed to load ../../components/tab/tab.component.js TypeError: Failed to fetch dynamically imported module: http://192.168.1.12:8083/fhem/ftui/components/tab/tab.component.js
error @ ftui.helper.js:152
loadModule @ ftui.app.js:107
await in loadModule (async)
(anonym) @ ftui.app.js:136
loadUndefinedComponents @ ftui.app.js:132
initComponents @ ftui.app.js:95
initPage @ ftui.app.js:79
init @ ftui.app.js:66
await in init (async)
main @ ftui.js:7
await in main (async)
(anonym) @ ftui.js:19
fhem.service.js:232 connect visible: true
fhem.service.js:131 Fri Jan 14 2022 09:57:00 GMT+0100 (Mitteleuropäische Normalzeit) '[refresh] start now isOffline:' false 'isAppVisible()' true
ftui.helper.js:152 [ftuiApp] error: initComponents - Timed out in 5000ms.
error @ ftui.helper.js:152
(anonym) @ ftui.app.js:97
Promise.catch (async)
initComponents @ ftui.app.js:96
initPage @ ftui.app.js:79
init @ ftui.app.js:66
await in init (async)
main @ ftui.js:7
await in main (async)
(anonym) @ ftui.js:19
fhem.service.js:232 connect visible: true
fhem.service.js:131 Fri Jan 14 2022 09:57:04 GMT+0100 (Mitteleuropäische Normalzeit) '[refresh] start now isOffline:' false 'isAppVisible()' true
fhem.service.js:399 [healthCheck] Fri Jan 14 2022 09:58:11 GMT+0100 (Mitteleuropäische Normalzeit) 3 isAppVisible(): true
Hallo,
ich habe es gerade auch noch einmal mit dem Laden der Original index.html versucht.
Auch hier bleibt der Bildschirm mit Ausnahme eines grid-tiles leer.
Fehlermeldungen:
ftui.helper.js:152 Failed to load ../../components/tab/tab.component.js SyntaxError: Unexpected token '<'
error @ ftui.helper.js:152
ftui.helper.js:152 [ftuiApp] error: initComponents - Timed out in 5000ms.
error @ ftui.helper.js:152
(anonymous) @ ftui.app.js:97
Es wäre toll, wenn es bald wieder vorwärts ginge. Wenn ich helfen kann, dann bitte melden!
Gruß,
MDietrich
In der Online Demo index.html geht es aber...
https://knowthelist.github.io/ftui/www/ftui/index.html
cache leeren???
LG mr_petz
Hallo mr_petz,
ja, wenn ich die Datei im git öffne funktioniert es.
Auf meinem pi habe ich gerade die Dateien im Ordner ..\components\tab sowie die index.html gelöscht,
und mit "update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt" neu installiert.
Die Datei tab-title.components wird dabei wieder nicht geladen. Es händisch kopiert, jetzt funktioniert es wieder.
ftui-label war nicht die Ursache, hier wird jetzt einfach Nichts angezeigt.
Danke Allen für die Unterstüzung. :)
Auf zur nächsten Herausforderung grid im grid (via content mit mehrfachem Aufruf) ::)
Gruß,
MDietrich
Ah, danke, es reicht aber einfach die tab-title.components herunterzuladen und ins component/tab Verzeichnis zu legen.
Zitat von: setstate am 14 Januar 2022, 08:18:03
Die Beispiel habe ich jetzt überarbeitet. Es gibt jetzt beide Möglichkeiten:
1.) einmal ist die Toolbar mit Menü-Button und Titel in jedem View wiederholt mit drin.
https://knowthelist.github.io/ftui/www/ftui/examples/menu.html
<ftui-main>
<ftui-tab-view>
<ftui-view>
<ftui-view-toolbar>
{{beliebigerTextAlsTitle}}
2.) oder, Menü-Button und Titel gibt es nur einmal
https://knowthelist.github.io/ftui/www/ftui/examples/menu2.html oder https://knowthelist.github.io/ftui/www/ftui/examples/mobile.html
<ftui-main>
<ftui-view>
<ftui-view-toolbar slot="header">
<ftui-menu-button slot="start"></ftui-menu-button>
<ftui-tab-title text-align="left"></ftui-tab-title>
</ftui-view-toolbar>
<ftui-tab-view>
Dann muss man ftui-tab-title benutzen, um von den aktivierten Tabs den Text zu bekommen.
Hab eben die Variante wie menu2.html eingebaut, funktioniert einwandfrei. Hatte die Frage auch schonmal vor ein paar Wochen gestellt, hat sich somit geklärt.
Mercy und Gruß, Markus
Hello
Zeig doch mal dein Mobile UI :)
Grüsse
Zitat von: SirMarco am 14 Januar 2022, 22:44:02
Hello
Zeig doch mal dein Mobile UI :)
Grüsse
Gerne, gibt´s aber noch nicht viel zu sehen, hab mal einiges angefangen und umgesetzt, muss die endgültige Anordnung noch vornehmen (mit der Regierung zusammen)
Ich stelle auf jeden Fall noch mehr Bilder ein die Tage wenn ich das alles mal noch etwas mehr in Form gebracht habe, jetzt ging es erstmal um die "Funktionen".
Gruß Markus
Moin Moin,
gibts beim chart die Möglichkeit min / avg / max mit anzuzeigen? Wie z.B. hier: https://codepen.io/jordanwillis/pen/EWwVrK (https://codepen.io/jordanwillis/pen/EWwVrK) oder im Anhang(Grafana)
Bei Grafana geht es - und im FHEM auch - in der doku von chart.js und hier im Thread finde ich nichts :(
Seid einem Update letzte Woche funktionieren Reading abhängige Popups nicht mehr.
<ftui-popup [open]="Popup_Kamera:state | map('off: false, on: true')" shape="round" timeout="0" height="700px" width="1200px">
<header>Kamera</header><br>
<ftui-row>.....
Spiele ist die popup.component.js vom 20.11.21 ein, funktioniert es wieder.
Statt open muss man jetzt active benutzten. open brauchte ich als Gegenstück for close. Siehe Beispiele.
Zitat von: hackepeter am 15 Januar 2022, 12:17:35
gibts beim chart die Möglichkeit min / avg / max mit anzuzeigen? Wie z.B. hier: https://codepen.io/jordanwillis/pen/EWwVrK (https://codepen.io/jordanwillis/pen/EWwVrK) oder im Anhang(Grafana)
Bei Grafana geht es - und im FHEM auch - in der doku von chart.js und hier im Thread finde ich nichts :(
chart.js hat früher helpers.min und helpers.max unterstützt. Seit Version 3.x werden diese unter "Removed from Helpers" aufgeführt und stehen damit nicht mehr zur Verfügung. Eine integrierte Alternative dazu scheint es (noch) nicht zu geben ...
FTUI3 könnte man aber natürlich dahingehend erweitern und beispielsweise mit folgenden Attributen eine erweiterte Ausgabe erzielen:
<ftui-chart-data ... calc-min calc-max label="Daten ... Min: #min# ... Max: #max#"></ftui-chart-data>
Ob dies eine brauchbare Lösung sein könnte bzw. allgemeine Zustimmung findet ?
"Anregung": Chart-Themen besser in https://forum.fhem.de/index.php/topic,117779.0.html (https://forum.fhem.de/index.php/topic,117779.0.html) behandeln - in diesem allgemeinen Teil geht sowas schnell unter ...
Meine Zustimmung findet es!
Es gibt jetzt $min, $max, $avg, $last beim chart-data
<ftui-chart-data label="Humidity (Min: $min %, Max: $max %, Last: $last %)"
Einwandfrei, es funktioniert sensationell!
Hat jmd. von Euch das Light-Theme im Einsatz?
An meinem Küchentablet kann ich mit Dark wenig/ schlecht erkennen. Also Light. Klappt soweit.
Nur meine Slider erinnern mich an Otto Waalkes "weißer Adler auf weißem Grund" ;D ;D
Die classes "rangeable-progress" und "rangeable-handle" stehen bei mir auf weiß. Lässt sich das ändern im Widget oder der Kachel (außer im CSS selbst)?
Du kannst
--slider-track-color: var(--gray55);
--slider-handle-shadow: 1px 1px 4px #ddd;
--slider-handle-border: 1px solid green;
deinem Theme hinzufügen und anpassen
Ja, OK also nur im CSS selbst. Dann werd ich mir mal ein eigenes Theme zusammenwursten :)
Hab ich für FHEM auch schon, bin also quasi in "Übung" ;)
Danke und beste Grüße
rob
Wenn das in den vorhandenen Themes fehlt, werde ich das natürlich noch nachpflegen
Das wäre prima :) Hab im File "bright-theme.css" gespickt: dort nicht definiert/ enthalten. Im File "ftui-theme.css" ist es drin. Für mich ist es nicht eilig.
Zitat von: mr_petz am 13 Januar 2022, 11:13:39
Das @click wird natürlich bei jedem click auf dem button gesendet...
Würde das auch anders gehen? Also einmal Klick ist an, das nächste Klick ist aus?
Beispiel meines Lichtschalters, ich klicke und das Licht geht an und die Farbe des Icons geht auf gelb. Ich klicke nochmal und das Licht geht aus und die Farbe des Icons geht auf grau. (Und wenn da eine automatische Zeitschaltung läuft, funktioniert das auch noch!) Ich hoffe ich machte alles richtig, es geht jedenfalls:
<ftui-button [(value)]="Stecker_01" states="on,off" fill="none">
<ftui-icon margin="-10px 0 0 0" name="circle" class="size-0"
[(name)]="Stecker_01 | map('on:circle,off:circle')"
[color]="Stecker_01 | map('on:my_yellow, off:my_grey2')"></ftui-icon>
</ftui-button>
Bei einem anderen Device würde ich gern für 'anschalten' "set Putzi_2 reconnect; set Putzi_2 start" senden und für 'ausschalten' "set Putzi_1 stop". Wie würde das denn gehen, falls es geht?
Hi curt.
Ich hoffe ich habe dich richtig verstanden? Habe 2 Lösungsansätze...
Mir fällt als erstes dazu das ein:
<ftui-button
[(value)]="Putzi_2"
[hidden]="Putzi_2 | map('.*: true, stop: false')"
states="start"
@click="javascript:sendFhem('set Putzi_2 reconnect')"
fill="none">Putzi_2_start
</ftui-button>
<ftui-button
[(value)]="Putzi_2"
[hidden]="Putzi_2 | map('.*: true, start: false')"
states="stop"
fill="none">Putzi_2_stop
</ftui-button>
Es sind zwar 2 Button, aber je nach Zustand vom Putzi_2 wird immer einer von beiden versteckt.
[hidden]="Putzi_2 | map('.*: true, stop: false')" --> wird beim Putzi_2:state stop versteckt (gegebenfalls anpassen)
[hidden]="Putzi_2 | map('.*: true, start: false')" --> wird beim Putzi_2:state start versteckt (gegebenfalls anpassen)
In meiner Testumgebung wurde immer zuerst der @click ausgeführt und deswegen ist der Befehl reconnect im @click.
Und das machst du für Putzi_1 genauso...
und als zweites wenn alle Befehle gesendet werden sollen das:
<ftui-button
(value)="Putzi_1"
states="stop"
@click="javascript:fhemService.sendCommand('set Putzi_2 reconnect');ftuiApp.toast('set Putzi_2 reconnect');fhemService.sendCommand('set Putzi_2 start');ftuiApp.toast('set Putzi_2 start')"
fill="none">Putzi_2_start an Putzi_2_stop
</ftui-button>
Hier ist ein reiner senden-Button mit den einzelnen Befehlen!
ftuiApp.toast kann man auch weglassen. (sind die Toastnachrichten)..
Das fiel mir auf die schnelle ein und hoffe @setstate sagt eine bessere Lösung :D
LG mr_petz
Edit: Du kannst natürlich bei dem ersten Vorschlag auch ein Label oder Icon mit einfügen und da dann auch wieder ein @click...
Hallo zusammen,
ich beobachte wiederkehrend Verzögerungen beim Anzeigen der Weather Icons, wenn FTUI in einen leeren Browser Cache geladen wird. Und auch nur dann. Im laufenden Betrieb werden die Icons problemlos aktualisiert.
Verzögerung = bis zu mehreren Stunden
Jetzt / ad hoc reproduzieren kann ich das Verhalten auf 3 FireHD10 Tabletts. Der Chrome auf einem Desktop zeigt sofort / unmittelbar korrekt an.
Es scheint eine Abhängigkeit zur Performance des anzeigenden Gerätes zu geben:
zB dauert es im Fully auf einem FireHD10 mehrere Stunden
beim Chrome auf einem Desktop werden sie entweder sofort, spätestens aber nach ein paar Minuten geladen.
Die Readings selber sind zu jeder Zeit vorhanden, enthalten die richtigen Werte und aktuellen Timstamp
die Devices (zwei Dummies) schicken Events bei Update und Change.
Ich gebe zu, dass mein Setup durchaus umfangreich ist und aus sehr vielen Devices + Readings bestehen mag.
Aber wie geschrieben: Abwarten hat bisher immer geholfen, die Definition im Code kann also nicht grundsätzlich falsch sein. und: Bei keinem anderen Element (Button, Label, etc pp.) habe ich derartige Verzögerungen. FTUI reagiert super fix.
Es leidet halt der WAF und die persönliche Ungeduld.
Eingebunden ist das wie folgt (Auszüge)
<ftui-column width="35%">
<ftui-label size="3"
[text]="ProplantaWetter_fc0_next:timeofday">
</ftui-label>
<ftui-weather
class="size-10" color="light"
provider="proplantaICON_LONG"
[condition]="ProplantaWetter_fc0_next:weather_next" >
</ftui-weather>
...
bzw
[code <ftui-column>
<ftui-label [text]="ProplantaWetter:fc2_date | toDate() | format('eeee')"></ftui-label>
<ftui-weather size="4" [condition]="ProplantaWetter:fc2_weatherDay"></ftui-weather>
....
[/code]
Dankbar für Hinweise
Ralph.
Hello @all,
ich würde gern die fhemSVG icons nutzen. Einbindung ist kein Problem, aber leider lassen sich keine Farben setzen (icon bleibt schwarz).
Das Problem wurde Anfang Dez. '21 schon mal diskutiert, leider verstehe ich die Lösung nicht ganz ... kennt jemand "IconMoon", durch das man die icons "durchjagen" muß?
Für Hinweise dankbar :)
LG Christina
Zitat von: octek0815 am 04 Dezember 2020, 08:14:47
das mit den original Icons funktioniert nicht (Farbproblem).
Kopiere doch die SVG Icons nach ../icons im neuen FTUI3 Pfad (vorher natürlich durch IconMoon jagen damit das mit den Farben funktioniert).
Ich packe immer ein Unterstrich an den Anfang des Namens vom Icon, um diese von den vorhanden Icons abzugrenzen.
...
Welche fhemSVG Icons willst du nutzen. Die ersten beiden konnte ich bunt machen
<ftui-grid-tile row="8" col="1" height="4" width="3">
<header>fhemSVG</header>
<ftui-icon class="size-5" path="../images/fhemSVG" name="alexa" color="green"></ftui-icon>
<ftui-icon class="size-5" path="../images/fhemSVG" name="dustbin" color="red"></ftui-icon>
</ftui-grid-tile>
Edit: einen habe ich gefunden: tradfri_dimmerswitch
Ich schau mal, was man da machen kann ...
Edit2: Ist jetzt gefixed. Zumindest für das Icon, was ich gefunden habe. Wenn noch was auffällt, einfach Bescheid geben.
Zitat von: setstate am 20 Januar 2022, 18:27:43
Welche fhemSVG Icons willst du nutzen. Die ersten beiden konnte ich bunt machen
Danke für deinen input ... hat mir etwas die Augen geöffnet. Ich gebe zu ich bin weit davon entfernt das Problem zu verstehen, insofern möchte ich gerne meinen virtuellen Hut ziehen, und dir gleichzeitig für deine bisherigen Beiträge danken, ich nutze FTUI2 intensiv, wenns das nicht gäbe wäre FHEM nicht das was es heute ist <thumbsup>
Zur aktuellen Diskussion: aktuell aufgefallen ist mir "system_fhem" und "people_sensor". Beide erscheinen schwarz und lassen sich nicht einfärben.
Ich habe etwas weiter gegraben, und eine Seite mit (zur Zeit) allen (fhemSVG) icons gebaut, einfach um zu sehen was sonst noch problematisch sein könnte. Die Farbe die ich verwendet habe ist rot, alles was "anders" ist könnte die Darstellungen evtl. kaputtmachen. Wie gesagt, alles user-view .... siehe screenshot.
Wenn ich etwas zu Verbesserungen beitragen kann ... sehr gerne :)
LG Christina
Hallo setstate
Gibt es eine Möglichkeit die visibleDuration vom vanilla-notify über eine variable zu ändern?
Grüsse
Zitat von: mr_petz am 19 Januar 2022, 14:27:58
Hi curt.
Ich hoffe ich habe dich richtig verstanden? Habe 2 Lösungsansätze...
Mir fällt als erstes dazu das ein:
<ftui-button
[(value)]="Putzi_2"
[hidden]="Putzi_2 | map('.*: true, stop: false')"
states="start"
@click="javascript:sendFhem('set Putzi_2 reconnect')"
fill="none">Putzi_2_start
</ftui-button>
[...]
Es sind zwar 2 Button, aber je nach Zustand vom Putzi_2 wird immer einer von beiden versteckt.
Zwischenbericht:
Danke für Deine Mühen. Ja, in diese Richtung soll es gehen - aber ich muss das derzeit doch einfacher machen. Der Hintergrund ist: Putzi_2 ist der Staubsaugerroboter (die 1 gibt es nicht). Im state steht leider nicht nur binär, da gibt es zig Möglichkeiten. Es gibt zudem noch das Reading run_state, da sind nochmals (abweichende) Stati. Ja, ich habe verstanden, dass man bei map als letzte Direktive ".*" angeben kann.
Frage:
Mir ist bei dem obigen Konstrukt die Bedeutung von "states" unklar, was bewirkt das?
Ist das nun ein Bug oder muss das so?
Ich muss da mal was ganz Dummes fragen ...
In einer Kachel möchte ich links eine durchgehende Spalte und in der rechten Spalte zwei Zeilen - klingt einfach, geht aber schief, siehe Screenshot:
<ftui-grid-tile row="3" col="2" height="1" width="1" color="black">
<ftui-column>
<ftui-row>
L
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-row>
R-O
</ftui-row>
<ftui-row>
R-U
</ftui-row>
</ftui-column>
</ftui-grid-tile>
Wenn ich nun den kompletten Block nochmals mit ftui-row klammere, geht es:
<ftui-grid-tile row="3" col="2" height="1" width="1" color="black">
<ftui-row>
<ftui-column>
<ftui-row>
L
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-row>
R-O
</ftui-row>
<ftui-row>
R-U
</ftui-row>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Muss das so sein? Und falls ja: Warum muss das so sein? (Ich möchte es nur verstehen.)
@curt
Ich würde sagen, dass dies kein Bug ist, da die Grundausrichtung von Elementen "von oben nach unten" läuft.
ftui-column ist ein Gruppierungselement und dessen Anordnung folgt der aktuell eingestellten Grundausrichtung.
ftui-row ist ebenfalls ein Gruppierungselement, schaltet aber zusätzlich die Grundausrichtung auf "von links nach rechts" um.
Die reine Kombination von ftui-column-Elementen - verschachtelt oder nicht - sorgt dafür, dass man zwar "vererbbare" Eigenschaften - Größe,Farbe,... - je Gruppierung festlegen kann, aber die eingestellte Grundausrichtung bleibt unverändert erhalten.
Erst die Kombination mit ftui-row ändert die Grundausrichtung ...
@curt
states geben die Befehle an die man per Button mitgeben kann. Standard ist hier on,off und muss nicht mit states angegeben werden.
LG mr_petz
Zitat von: Wetterhexe am 20 Januar 2022, 20:57:52
Danke für deinen input ... hat mir etwas die Augen geöffnet. Ich gebe zu ich bin weit davon entfernt das Problem zu verstehen, insofern möchte ich gerne meinen virtuellen Hut ziehen, und dir gleichzeitig für deine bisherigen Beiträge danken, ich nutze FTUI2 intensiv, wenns das nicht gäbe wäre FHEM nicht das was es heute ist <thumbsup>
Zur aktuellen Diskussion: aktuell aufgefallen ist mir "system_fhem" und "people_sensor". Beide erscheinen schwarz und lassen sich nicht einfärben.
Ich habe etwas weiter gegraben, und eine Seite mit (zur Zeit) allen (fhemSVG) icons gebaut, einfach um zu sehen was sonst noch problematisch sein könnte. Die Farbe die ich verwendet habe ist rot, alles was "anders" ist könnte die Darstellungen evtl. kaputtmachen. Wie gesagt, alles user-view .... siehe screenshot.
Wenn ich etwas zu Verbesserungen beitragen kann ... sehr gerne :)
LG Christina
Ich hab noch was von vor etlicher Zeit im Kopf, dass das Problem von den jeweiligen tags/descriptors im SVG-File herrührt. Einige Iconssets haben ein "g"-tag, andere nicht. Ich hab deshalb in meiner ftui-user.css Folgendes hinzugefügt:
svg g[fill], svg [fill] {
fill: inherit !important;
}
Damit sind die von mir verwendeten Icons - wie gewohnt - einfärbbar.
Zitat von: OdfFhem am 21 Januar 2022, 03:47:18
@curt
Ich würde sagen, dass dies kein Bug ist, da die Grundausrichtung von Elementen "von oben nach unten" läuft.
ftui-column ist ein Gruppierungselement und dessen Anordnung folgt der aktuell eingestellten Grundausrichtung.
ftui-row ist ebenfalls ein Gruppierungselement, schaltet aber zusätzlich die Grundausrichtung auf "von links nach rechts" um.
Die reine Kombination von ftui-column-Elementen - verschachtelt oder nicht - sorgt dafür, dass man zwar "vererbbare" Eigenschaften - Größe,Farbe,... - je Gruppierung festlegen kann, aber die eingestellte Grundausrichtung bleibt unverändert erhalten.
Erst die Kombination mit ftui-row ändert die Grundausrichtung ...
Genau, richtig.
oder kurz gesagt:
<ftui-grid-tile> ist schon eine / verhält sich wie eine <ftui-column>
Zitat von: tomster am 21 Januar 2022, 09:45:53
Ich hab noch was von vor etlicher Zeit im Kopf, dass das Problem von den jeweiligen tags/descriptors im SVG-File herrührt. Einige Iconssets haben ein "g"-tag, andere nicht. Ich hab deshalb in meiner ftui-user.css Folgendes hinzugefügt:
...
Danke für den Hinweis! Ich bin leider nicht sehr fit was css betrifft :o
Ich hatte noch keine ftui-user.css, deshalb habe ich eine angelegt und deinen Text eingefügt. Danach in der index.html verlinkt und browser-cache gelöscht. Leider hat sich nichts geändert ... hab ich was falsch gemacht?
LG, Christina
Hast du schon ein Update gemacht? Ich habe gestern zwei Änderungen gemacht. Alle icons sollten jetzt bunt werden.
Zitat von: setstate am 21 Januar 2022, 15:19:03
Hast du schon ein Update gemacht? Ich habe gestern zwei Änderungen gemacht. Alle icons sollten jetzt bunt werden.
hatte ich tatsächlich noch nicht ... eben nachgeholt, das sieht sehr viel besser aus, vielen Dank!! 8)
Ich häng noch eine aktuelle view dran ... einzelne icons sind noch schwarz, stört mich aber nicht weiter.
LG, Christina
Hi Christina
Zitat von: Wetterhexe am 21 Januar 2022, 16:12:42
einzelne icons sind noch schwarz, stört mich aber nicht weiter.
Naja, eine rote Ampel die ihrerseits rot ist, bildet wohl keinen guten Kontrast. ;D
Gruß
Sailor
Zitat von: Sailor am 21 Januar 2022, 17:20:19
Naja, eine rote Ampel die ihrerseits rot ist, bildet wohl keinen guten Kontrast. ;D
die Farbe der Ampel läßt sich ja ändern, nur der schwarz dargestellte Korpus nicht ;)
Nachdem geklärt wurde, wie row/column in einer Kachel funktionieren, habe ich nun ein Problem mit ftui-slider, genauer gesagt mit dessen Positionierung.
Die Basis ist ein relativ kleines Kachel-Design:
<ftui-grid base-width="96" base-height="86" margin="4">
Im ersten Screenshot sieht man Putzi, meinen niedlichen Staubsaugerroboter mit drei Elementen, es soll um das linke Element gehen, das soll den Ladezustand der Batterie anzeigen. Ich bin in der Lage, dass Element so zu positionieren, dass es bezogen auf die obere Kante richtig steht. Leider ist es nicht lang genug - und ich habe keine Ahnung, wie ich das "länger" machen kann, meine Versuche scheiterten. Was kann/muss ich tun?
Der komplette Code der Kachel, gern auch bitte kritisieren, ich übe noch:
<ftui-grid-tile row="3" col="3" height="1" width="1" color="black">
<!-- Putzi -->
<ftui-row>
<ftui-column>
<ftui-row>
<ftui-slider margin="-34px 0 0 0" class="size-0"
[value]="Putzi_2:batteryPercent" min="0" max="100" is-vertical handle="none" readonly
[color]="Putzi_2:batteryPercent | step('3:my_darkred, 96:my_signalorange, 99:my_signalgreen')">
</ftui-slider>
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-row>
<ftui-button
[(value)]="Putzi_2"
states="start" fill="none"
@click="javascript:sendFhem('set Putzi_2 reconnect; set Putzi_2 start')"
>
<ftui-icon margin="-10px 0 0 0" name="circle" class="size-0"
[color]="Putzi_2 | map('`cleaning vacuum`:my_signalgreen, paused:my_signalred, Charging:my_darkblue, `Fully charged`:my_green, `Insufficient battery, continuing cleaning after recharge`:my_darkblue, .*:my_grey2')"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row>
<ftui-icon margin="-18px 0 0 0" name="icons-eigene/putzfrau" class="size-2"
[color]="Putzi_2:run_state | map('dock:my_grey2, standby:my_grey2, closed:my_grey2, self-test:my_green, `cleaning vacuum`:my_signalgreen, paused:my_signalorange, `return to dock`:my_darkblue')">
</ftui-icon>
</ftui-row>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
P.S. @mr_petz
slider (o.ä, jedenfalls das Thermometer-Konzept von Slider) wäre nach meine unmaßgeblichen Meinung auch was für Dich: Gleitende Farbwertänderung bezogen auf Reading, Ticks, ich kann mir da wahnsinnig dolle Sachen vorstellen. :)
Der zweite Screenshot dient nur der Illustrierung dessen, was gehen könnte und wie ich "solid" meine, habe ich aus meinem FHEM - und dafür war das gemopst: Den Autoren (nickname nicht momentan) habe ich aus dem Augenwinkel auch schon mal in FTUI3-Threads gesehen; sein Avatur wechselt, manchmal hat er als Avatar genau diese Kachel ...
Ich möchte ein Menü zum wechseln der Radiosender erstellen.
Problem dabei, die Sender kann ich nur durch Anwahl des Speicherplatzes verstellen z.B." set AV_Receiver preset 1", ich erhalte aber keine Rückmeldung über den Speicherplatz, nur über die TunerFrequenz oder currentStation kann ich den eingestellten Sender erkennen. Die Anzeige der Sendermit meinem dargestellten Code funktioniert, wie bekomme ich aber die Senderverstellung noch hin? Statt "set AV_Receiver:preset $value" müsste ich die Speicherplatznummern übergeben 1...2...3..
<ftui-dropdown nochevron class="size-3"
[value]="AV_Receiver:tunerFrequency"
(value)="set AV_Receiver:preset $value">
<option value="202.928">MDR Sputnik</option>
<option value="178.352">sunshine live</option>
</ftui-dropdown>
Bekommt man das so überhaupt hin? Oder muss ich über Userreadings gehen?
Zitat von: curt am 22 Januar 2022, 05:08:16
Leider ist es nicht lang genug - und ich habe keine Ahnung, wie ich das "länger" machen kann, meine Versuche scheiterten. Was kann/muss ich tun?
Um die Position des Sliders zumindest temporär sichtbar zu machen, habe ich die entsprechende "Spalte" gelb eingefärbt.
Die Höhe des Sliders wird im css "speziell" berechnet; um sie zu individualisieren, kann man das style-Attribut einschalten ...
style="height:90%;" ... s. Screenshot__height
<ftui-column color="yellow">
<ftui-row>
<ftui-slider style="height:90%;" class="size-0"
[value]="Putzi_2:batteryPercent" min="0" max="100" is-vertical handle="none" readonly
[color]="Putzi_2:batteryPercent | step('3:my_darkred, 96:my_signalorange, 99:my_signalgreen')">
</ftui-slider>
</ftui-row>
</ftui-column>
Die horizontale Ausrichtung des Sliders zielt auf die Mitte der "Spalte" - allerdings bezogen auf den rechten Rand des Sliders (s.o.).
Um dies auf die Mitte des Sliders zu beziehen, kann man auch hier das Attribut style einschalten ...
style="height:90%; margin:0 -8px 0 0;" ... s. Screenshot__height_margin
<ftui-column color="yellow">
<ftui-row>
<ftui-slider style="height:90%; margin:0 -8px 0 0;" class="size-0"
[value]="Putzi_2:batteryPercent" min="0" max="100" is-vertical handle="none" readonly
[color]="Putzi_2:batteryPercent | step('3:my_darkred, 96:my_signalorange, 99:my_signalgreen')">
</ftui-slider>
</ftui-row>
</ftui-column>
Jetzt befindet sich der Slider in seiner "Spalte" zentriert bzgl. oben/unten und links/rechts ...
@curt
Zitat von: curt am 22 Januar 2022, 05:08:16
....
P.S. @mr_petz
slider (o.ä, jedenfalls das Thermometer-Konzept von Slider) wäre nach meine unmaßgeblichen Meinung auch was für Dich: Gleitende Farbwertänderung bezogen auf Reading, Ticks, ich kann mir da wahnsinnig dolle Sachen vorstellen. :)
...
Hier ist noch der ftui-meter zu erwähnen.
https://knowthelist.github.io/ftui/www/ftui/examples/meter.html
Er dient als reine Anzeige. Hier wäre es für @setstate ein leichtes gradient und vertikal hinzuzufügen.
LG mr_petz
Edit: setstate hat Farbverlauf und Vertikal hinzugefügt...
Könnte man eventuell noch ein Attribut für die Dateiendung integrieren? Oder ist dies über map lösbar?
data-suffix=".png"
<ftui-image base="icons/" [src]="AV_Receiver:currentStation" </ftui-image>
Zitat von: stefan-dd am 23 Januar 2022, 18:10:53
Könnte man eventuell noch ein Attribut für die Dateiendung integrieren? Oder ist dies über map lösbar?
data-suffix=".png"
<ftui-image base="icons/" [src]="AV_Receiver:currentStation" </ftui-image>
So würdest du die Endung .png zum gelesenen Reading, was ein numerischer Wert ist, hinzufügen/dranhängen wenn du das meinst:
<ftui-image base="icons/" [src]="AV_Receiver:currentStation | add('.png')"></ftui-image>LG mr_petz
Edit: Es steht auf GitHub add(number) bei den Pipes, aber habe es gerade bei einem ftui-label getestet und wird hinten als string angehangen...
Oh sorry es geht nur bei Number(input)...
Also nur wenn dein Reading ein
numerischer Wert ist...
Bei mir stand dann halt 20.png usw...
Sorry nochmal für die Verwirrung.
So hatte ich mir das grundsätzlich gedacht. Schön wäre es, wenn es auch für nicht nummerische Werte funktioniert.
kleines Update:
<ftui-label [text]="AV_Receiver:currentStation | replace(/(.*)/,text+'.png')"></ftui-label>
damit geht der gelesene Reading-string von [text] zu erweitern mit der Endung .png.
Jetzt kannst du es mit:
<ftui-image base="icons/" [src]="AV_Receiver:currentStation | replace(/(.*)/,text+'.png')"></ftui-image>
testen und es sollte [src] erweitert werden mit .png.
Edit: Habe es gerade getestet und funktioniert. Man muss hier auch text+'.png' nehmen im replace().
Das Bild muss natürlich dann auch unter icons zu finden sein...
LG mr_petz
Edit: Es geht jetzt mit append() Pipe:
<ftui-image base="icons/" [src]="AV_Receiver:currentStation | append('.png')"></ftui-image>
@mr_petz
Woher kommt denn die Variable text bzw. wie kommt text an ihren Wert ?
@OdfFhem
k.A. aber ich denke das kommt irgendwo von den Helpern oder Bindings oder von der replace-funktion?
setstate weiß das bestimmt.
Hast du es auch mal getestet?
Edit: Hier mal ein Test:
<ftui-button (value)="dummy" states="Bild">Test</ftui-button>
<ftui-label [text]="dummy | replace(/(.*)/,text+'.png')"></ftui-label>
Ausgabe von label ist Bild.png
@mr_petz
Nein, aber ich hätte wie früher $1 verwendet - dem runden Klammerpaar sei dank ...
setstate hatte vor einer ganzen weile die get/setDevice+Reading mal geändert. Kommt vielleicht daher?
@mr_petz
<ftui-label [text]="ftuitest | replace(/(.*)/,text+'.png')"></ftui-label>
<ftui-label [text]="ftuitest | replace(/(.*)/,'$1.png')"></ftui-label>
Schlaflose Nächste sind ja eher unbeliebt, daher habe ich noch schnell einen kleinen Test durchgeführt ...
1.Variante liefert nach Deinen Ausführungen das gewünschte, aber insgeheim unerwartete Ergebnis; text kann/darf man eigentlich nicht kennen/nutzen ...
2.Variante liefert gemäß Erinnerung bzw. JavaScript-Doku das erwartete Ergebnis ...
EDIT: text ist der Name des Parameters der "umgebenden" Funktion für die Pipe-Ausführung ... also eigentlich rein INTERN
Zitat von: OdfFhem am 22 Januar 2022, 18:31:06
Um die Position des Sliders zumindest temporär sichtbar zu machen, habe ich die entsprechende "Spalte" gelb eingefärbt.
...
style="height:90%;" ... s. Screenshot__height
Danke lieber @OdfFhem - Deine Beiträge waren mir schon oft sehr hilfreich. Du kennst meinen goldenen Papporden ja schon ... :)
Zitat von: mr_petz am 23 Januar 2022, 11:17:50
@curt
Hier ist noch der ftui-meter zu erwähnen.
https://knowthelist.github.io/ftui/www/ftui/examples/meter.html
Er dient als reine Anzeige.
Momentan für meine Zwecke unbrauchbar, darüber schrieb und frug ich ja schon.
Zitat von: mr_petz am 23 Januar 2022, 11:17:50
Hier wäre es für @setstate ein leichtes gradient und vertikal hinzuzufügen.
Ich muss akzeptieren, wenn @setstate darauf nicht reagiert. - Inzwischen bin ich da aber an einem anderen Punkt, leider als Bittender - der weiß wie es aussehen soll, aber nicht weiß wie man das macht:
Eigentlich brauchen wir für Thermometer-ähnliche Anzeigebalken auch so einen solid-Farbverlauf (den man optional zuschalten kann). Und mehrere vordefinierte Farbverläufe: Von Gelb nach Grün. Von Blau nach Rot. Von Grün über Gelb nach Rot ... ach, an Ideen mangelt es nun weniger. :)
Zitat von: OdfFhem am 23 Januar 2022, 23:41:31
EDIT: text ist der Name des Parameters der "umgebenden" Funktion für die Pipe-Ausführung ... also eigentlich rein INTERN
Bedeutet es kommt von setstate. Wenn er was an den pipes ändert, dann funktioniert es vielleicht nicht mehr?
Gut zu wissen, aber man lernt ja nie aus...
LG mr_petz
Was mache ich falsch? FTUI-meter funktioniert nicht mehr.
<ftui-meter style="height:50px" [value]="Zisterne_Inhalt:inhalt" width="200px" height="5px"</ftui-meter>
Zitat<ftui-meter style="height:50px" [value]="Zisterne_Inhalt:inhalt" width="200px" height="5px" --> > <--- </ftui-meter>
Da fehlt was.
ZitatDas ist aber nicht das Problem.
Was ist denn genau das Problem, bzw. was funktioniert denn genau nicht?
Zitat von: stefan-dd am 27 Januar 2022, 20:09:07
Mein Fehler beim rein kopieren ins Forum. Das ist aber nicht das Problem.
<ftui-meter style="height:50px" [value]="Zisterne_Inhalt:inhalt" width="200px" height="5px"
[color]="Zisterne_Inhalt:inhalt | step('0:red, 1000:orange, 2500:green, 9990:primary')">
</ftui-meter>
Dir fehlt min und max.
Edit: hatte ich dir hier schon gesagt/gezeigt:
https://forum.fhem.de/index.php/topic,115259.msg1197742.html#msg1197742
Wollte ich auch gerade schreiben. ::)
Hallo zusammen
Habe da mal 1 Frage zum ftui-label:
wie ist es möglich, 2 verschiedene Abfragen nebeneinander darzustellen und diese mit einem Zeichen (z.B.: |) oder einem Text (z.B.: bis) zu trennen?
Beispiel: [text]="Stehlampe:mybegin" und ([text]="Stehlampe:myend"
Resultat: 17:15 bis 22:15
Gruss Chris
Zitat von: outhouse am 28 Januar 2022, 08:56:52
Hallo zusammen
Habe da mal 1 Frage zum ftui-label:
wie ist es möglich, 2 verschiedene Abfragen nebeneinander darzustellen und diese mit einem Zeichen (z.B.: |) oder einem Text (z.B.: bis) zu trennen?
Beispiel: [text]="Stehlampe:mybegin" und ([text]="Stehlampe:myend"
Resultat: 17:15 bis 22:15
Du könntest z.B. mit <span> arbeiten.
Das
bis am ersten Label hinten dran:
<ftui-label [text]="Stehlampe:mybegin"><span slot="unit"> bis </span></ftui-label>
<ftui-label [text]="Stehlampe:myend"></ftui-label>Das
bis vor dem zweiten Label:
<ftui-label [text]="Stehlampe:myend"></ftui-label>
<ftui-label [text]="Stehlampe:myend"><span slot="pre"> bis </span></ftui-label>Die notwendige Formatierungsklassen musst Du natürlich nach Bedarf auch noch einfügen.
Das sollte aber auch mit einfachen Bordmitteln gehen.
<ftui-row width="20%">
<ftui-label text="17:15"></ftui-label>bis<ftui-label text="18:20"></ftui-label>
</ftui-row>
Über "width=" kann man dann den Abstand steuern.
Ich gebe auch meinen Senf dazu :D
Hier ist auch alles in einer Reihe:
<ftui-label text="18:20"><ftui-label text="17:15"></ftui-label> bis </ftui-label>
LG mr_petz
Zitat von: mr_petz am 28 Januar 2022, 11:26:50
Ich gebe auch meinen Senf dazu :D
Hier ist auch alles in einer Reihe:
<ftui-label text="18:20"><ftui-label text="17:15"></ftui-label> bis </ftui-label>
LG mr_petz
Wau. Allen zusammen herzlichen Dank!!!
@mr_petz: Der "letzte Senf" ist für mich der Beste!
@tomster: Bei Variante 1 wird nur Wort "bis" angezeigt, bei Variante 2 die Wörter "bis 22:15"
@grossmaggul: Bei deinem Vorschlag verschiebt es mir die Button oberhalb des Labels
Allen zusammen besten Dank
Ooops, ich hab in meinem Beispiel die Anführungszeichen nach den Devicenamen vergessen...
Zitat von: curt am 24 Januar 2022, 03:42:34
...
Zitat von: mr_petz am 23 Januar 2022, 11:17:50
ZitatHier wäre es für @setstate ein leichtes gradient und vertikal hinzuzufügen.
Ich muss akzeptieren, wenn @setstate darauf nicht reagiert.
...
Hi curt.
@setstate hat reagiert ;)
LG mr_petz
Hallo zusammen,
ich hab mir jetzt mal nach zwei Jahren Inaktivität mal wieder vorgenommen alles auf den aktuellen Stand zu bringen.
Ein punkt dabei ist meinen Smart-Mirror von FTUI 2 auf FTUI 3 Upzudaten.
Was ich dabei aber einfach nicht hin bekomme ist einen Automatischen Zeilenumbruch zu erzwingen.
<!-- Zitat des Tages -->
<ftui-cell align-item="center" width="680px"style="position: absolute; top: 80%; left: 25%;">
<ftui-label [text]="ZitatdesTages" size="4"
margin="1"
></ftui-label>
</ftui-cell>
Der Text schreibt einfach nach rechts raus und bricht nicht nach den 680px um.
Der Block dazu im FTUI 2 war dieser:
<div data-type="label"
data-device="ZitatdesTages"
class="cell big"
style="position: absolute; top: 80%; left: 25%; width: 680px">
</div>
Gibts da einen Trick, den ich bisher übersehen habe?
Hi, gib mal scroll mit im label.
Also so:
<!-- Zitat des Tages -->
<ftui-cell align-item="center" width="680px"style="position: absolute; top: 80%; left: 25%;">
<ftui-label [text]="ZitatdesTages" size="4"
margin="1"
scroll
></ftui-label>
</ftui-cell>
LG mr_petz
Edit: Alternativ mit style:
<!-- Zitat des Tages -->
<ftui-cell align-item="center" width="680px"style="position: absolute; top: 80%; left: 25%;">
<ftui-label [text]="ZitatdesTages" size="4"
margin="1"
style="white-space:normal;"
></ftui-label>
</ftui-cell>
super das klappt, vielen Dank!
Hallo zusammen,
nachdem ich zunächst eine Tablet-Oberfläche erstellt habe, konnte ich keine Probleme mit dem colorpicker feststellen, da ich immer das "wheel"-layout verwendet habe.
Jetzt habe ich eine mobile-Version erstellt. Dabei muss ich leider feststellen, das der hueSlider bei keinem meiner Geräte geht.
Hat auch ein anderer User dieses Problem - Farbwahl mit wheel funktioniert, mit hueSlider nicht? :o
Beim hueSlider nimmt das device keine Farbbefehle an. Es geht nur der Dim-Modus in weißer Farbe.
Ich nutze drei unterschiedliche Systeme:
- LED382 RGB mit Originalfirmware, Befehl: RGB
- magicolor RGB mit tasmota, Befehl: Color, pct
- WEMOS D1 mini RGBW mit tasmota, Befehl: Color, pct, white
LG, muede
@muede
Hi, am besten du zeigst dazu auch deine Definitionen.
LG mr_petz
Irgendwie funktionieren die knobs nicht mehr seit dem letzten Update, der Wert wird noch angezeigt, aber das war's auch.
Muss man da noch irgendwas ergänzen?
<ftui-column>
<ftui-label text="user"></ftui-label>
<ftui-knob class="size-0"
[value]="sys.ueberwachung:stat_cpu_text | part(2) | toInt()" min="0" max="100" width="100" offset-y="-10" stroke-width="5" unit="%" value-size="20px" has-arc has-value-text readonly></ftui-knob>
</ftui-column>
@grossmaggul
Ein wenig habe ich Mitschuld daran gehabt. setstate hat es aber jetzt gefixt und gradient hinzugefügt ;)
Da könnte curt das zur Temperaturanzeige nutzen...
LG mr_petz
ZitatEin wenig habe ich Mitschuld daran gehabt
Ist doch nicht schlimm, wollte nur drauf hinweisen.
Ist doch alles noch beta, da kann sowas halt schonmal passieren, da habe ich gar kein Problem mit.
Ich weiß nicht ob das hier der richtige Platz ist um das zu fragen. Wie funktioniert das mit den git Branches, bzw. wie bekommt man es hin, daß man auf Deinen Branch zugreifen kann und der bei einem update auch aktualisiert wird. Ich muss zugeben, ich kenne mich mit git überhaupt nicht aus und verstehe das auch nicht so wirklich, wie das funktioniert. :-\
Zitat von: grossmaggul am 31 Januar 2022, 18:44:12
Ist doch nicht schlimm, wollte nur drauf hinweisen.
Ist doch alles noch beta, da kann sowas halt schonmal passieren, da habe ich gar kein Problem mit.
Ich weiß nicht ob das hier der richtige Platz ist um das zu fragen. Wie funktioniert das mit den git Branches, bzw. wie bekommt man es hin, daß man auf Deinen Branch zugreifen kann und der bei einem update auch aktualisiert wird. Ich muss zugeben, ich kenne mich mit git überhaupt nicht aus und verstehe das auch nicht so wirklich, wie das funktioniert. :-\
Ich würde dir empfehlen die einzelnen Daten/Dateien per wget zu holen, da ich den Branch nicht immer abgleiche mit setstate´s. Sprich wenn du einen meiner Unterbranches holen würdest, dann kann es sein dass der geholte am bestehenden lokalen Branch von setstate überschrieben wird mit meiner "älteren Version". Ich habe es noch nicht getestet, aber vielleicht kann man erst einen von mir holen und danach den von setstate. Das kann dir aber bestimmt hier sagen.
Hier ein Beispiel von curt mit wget:
wget https://raw.githubusercontent.com/mr-petz/ftui/calview/www/ftui/components/calview/calview.component.css
wget https://raw.githubusercontent.com/mr-petz/ftui/calview/www/ftui/components/calview/calview.component.js
LG mr_petz
O.K., danke, mit wget kann ich umgehen. :D
Hab eben mal ein Update auf die aktuelle Version durchgeführt, folgendes Verhalten ist mir aufgefallen:
Wenn ich auf z.B. auf meiner home-Seite ein Popup öffne und dies wieder über das "X" oben rechts schließe und anschließend z.B. auf eine andere Seite wechsle auf der ich auch das gleiche Popup definiert habe ist dies beim Seitenaufruf gleich geöffnet und ich muss es erst wieder schließen.
Denke das sollte so nicht richtig sein.
Gruß Markus
Genau dieses Verhalten mit dem Popup ist mir schon seit geraumer Zeit aufgefallen, nicht erst seit dem letzten Update.
Grüsse
Habt ihr beim popup noch open oder schon active zum öffnen definiert?
Bsp:
[active]="dummy2 | map('on: true, off: false')
LG mr_petz
Weder noch
<ftui-popup id="{{name}}" width="150px" height="150px">
<header>{{name}}</header>
<ftui-column>
<ftui-button class="center" shape="circle" [value]="{{device}} | map('on|dim.*: on, off|0: off')" (value)="{{device}}" [fill]="{{device}}:state | map('off: outline, unreachable: outline, dim.*: solid, on: solid')">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-popup>
Grüsse
Bei mir auch weder noch, hier ein Beispiel:
<ftui-grid-tile row="3" col="3" height="1" width="2" shape="round">
<header>Fenster / Türen</header>
<ftui-icon class="size-5" name="window" popup-target="pop2"
[color]="di_Monitoring_Fenster_Tueren:openWindowsCount | step('0:light, 1:yellow')"></ftui-icon>
<ftui-badge [text]="di_Monitoring_Fenster_Tueren:openWindowsCount"
[hidden]="di_Monitoring_Fenster_Tueren:openWindowsCount | step('0:true, 1:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->
</ftui-grid-tile>
<ftui-popup id="pop2" width="500px" height="600px" timeout="0" shape="round">
<header>Fenster / Türen</header>
<ftui-content file="content-sensoren.html"></ftui-content>
</ftui-popup>
Und die popups haben immer eine andere id oder die gleiche?
So habe ich es verstanden von euch:
Wenn popup-target="pop2" auf zwei gleiche popups mit id="pop2" schießt, dann würde ich sagen das zweite öffnet sich mit und wird beim schließen des ersten popup nicht mit geschlossen.
Sollte man entweder triggern oder halt verschiedene target-id´s vergeben.
LG mr_petz
Genau, das ist die Ursache.
Oder man setzt Pop1 nur einmal auf die Seite. Irgendwo außerhalb der Tab-View.
<ftui-grid >
<ftui-popup id="pop1" width="600px" height="600px" timeout="0" shape="round">
<header>Rolladen</header>
<ftui-content file="tests/content-rolladen.html"></ftui-content>
</ftui-popup>
<ftui-grid-tile row="1" col="1" height="5" width="1">
Irgendwie ist das "Grün" seit dem letzten update, etwas "sehr grün".;)
Das war vorher passender zu den anderen Farben und dezenter.
Oben vorher, unten nachher.
Zitat von: grossmaggul am 01 Februar 2022, 09:51:14Irgendwie ist das "Grün" seit dem letzten update, etwas "sehr grün".;)
Das war vorher passender zu den anderen Farben und dezenter.
Ja, da gab es gestern größere Änderungen in der Farbdefinition (https://github.com/knowthelist/ftui/commit/f7a30a6eb6ad2106f17b505aa943dcf4bd7e70fc#diff-503eb3f1aded0166f651233f5423b770c005a38390e170ffe46624118f88b296):
so wurde aus
--green1: #3caea3;
--success-color: var(--green1);dann
--green-light: #80d534;
--success-color: var(--green-light);Ich habe auch wieder auf das alte grün #3caea3 umgestellt.
Hallo,
erstmal großes Kompliment für Eure Arbeit an FTUI3 - ist super in der Performance, sieht klasse aus und ist auch schön kompakt in den Definitionen. :-)
ich hab zwei Fragen/Bitten:
Beim Knob wird auf den Min-Wert gemappt, wenn der anzuzeigende Wert über dem Max-Wert liegt. Das passiert bei mir mitunter bei Spitzen in der Leistungsmessung der Waschmaschine oder auch bei der Lichtstärke - ok, letzteres bei dem Wetter gerade nicht so sehr, aber prinzipiell hat man das bei Messungen, wo es kein natürliches Maximum gibt. Daher wär's super, wenn man den Wert auf Max mappt, also sowas in valueToAngle(val) (knob.component.js) einfügt:
const newVal = (!isNaN(val) && val >= min && val <= max) ? parseFloat(val) : ((!isNaN(val) && val <= max) ? min : max);
Für die Spracheinstellung des Datums im Chart habe ich das hier im HTML eingefügt:
<meta name="lang" content="de" />
was aber irgendwie keine Änderung bewirkt. Was mache ich da falsch bzw. wie wäre das richtige Statement?
Danke Euch schon mal!
ZitatJa, da gab es gestern größere Änderungen in der Farbdefinition:
so wurde aus
Ahso, deshalb, danke Yersinia, ich hab's auch gleich wieder umgestellt, ist doch etwas augenschonender. ;D
Zitat von: mr_petz am 31 Januar 2022, 22:38:38
Und die popups haben immer eine andere id oder die gleiche?
So habe ich es verstanden von euch:
Wenn popup-target="pop2" auf zwei gleiche popups mit id="pop2" schießt, dann würde ich sagen das zweite öffnet sich mit und wird beim schließen des ersten popup nicht mit geschlossen.
Sollte man entweder triggern oder halt verschiedene target-id´s vergeben.
LG mr_petz
Moin
Mein Beispiel im Anhang
Grüsse
Zitat von: mr_petz am 31 Januar 2022, 22:38:38
Und die popups haben immer eine andere id oder die gleiche?
So habe ich es verstanden von euch:
Wenn popup-target="pop2" auf zwei gleiche popups mit id="pop2" schießt, dann würde ich sagen das zweite öffnet sich mit und wird beim schließen des ersten popup nicht mit geschlossen.
Sollte man entweder triggern oder halt verschiedene target-id´s vergeben.
LG mr_petz
Vielen Dank für die Info, hab das eben mal geändert (waren nur zum Glück 3 Stellen) uns das Problem ist weg. setstate hatte dazu ja noch eine zweite Lösung gepostet, die werde ich bei Gelegenheit mal ausprobieren.
Gruß Markus
@SirMarco
Dein popup mit dem <header> Musikprogramm hat die gleiche id wie dein popup mit <header> Lounge, deswegen werden immer beide popups geöffnet.
Es fehlt dir der Eintrag in der tab_id die content_musik wo ja das zweite Popup hinzeigt. (zumindest habe ich da nix gefunden) Die html ist ja da.
Was soll denn beim footer passieren und was soll oben bei Lounge passieren?
Er nimmt halt hier für beide Popups immer Lounge als id und zuerst wird Lounge und dann gleichzeitig/immer Musikprogramm geöffnet
LG mr_petz
Edit: verstehe. Dein musikTemplate soll im zweiten popup per footer Snowflake- und das erste per oben (content_lounge) th-Icon geöffnet werden. Richtig?
Wenn du eine feste id in der template_musik vergiebst, denke ich dass es dann so ist wie du willst. Ich teste es aber noch mal anders mit {{name}}.
Bsp.:
<ftui-view-item>
<ftui-row style="margin: 5px 0px;">
<ftui-column>
<ftui-label [text]="{{device}}:volume"><span slot="start">Vol </span></ftui-label>
<ftui-label class="size">{{name}}</ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon class="size" color="black" name="th" popup-target="1"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-view-item>
<ftui-popup id="1" timeout="0" width="95%" height="400px" shape="round">
<header>Musikprogramm</header>
<ftui-row height="80px">
<ftui-column>
<ftui-button fill="transparent" class="size-0" shape="circle" [value]="{{device}}" (value)="{{device}}" states="favorites ">
<ftui-image base="/images/radio/" src=".png" width="45px"></ftui-image>
</ftui-button>
<ftui-label class="size-1">1</ftui-label>
</ftui-column>
<ftui-column>
<ftui-button fill="transparent" class="size-0" shape="circle" [value]="{{device}}" (value)="{{device}}" states="favorites ">
<ftui-image base="/images/radio/" src=".png" width="45px"></ftui-image>
</ftui-button>
<ftui-label class="size-1">2</ftui-label>
</ftui-column>
<ftui-column>
<ftui-button fill="transparent" class="size-0" shape="circle" [value]="{{device}}" (value)="{{device}}" states="favorites ">
<ftui-image base="/images/radio/" src=".png" width="45px"></ftui-image>
</ftui-button>
<ftui-label class="size-1">3</ftui-label>
</ftui-column>
<ftui-column>
<ftui-button fill="transparent" class="size-0" shape="circle" [value]="{{device}}" (value)="{{device}}" states="favorites ">
<ftui-image base="/images/radio/" src=".png" width="45px"></ftui-image>
</ftui-button>
<ftui-label class="size-1">4</ftui-label>
</ftui-column>
</ftui-row>
</ftui-popup>
Ok habe es gefunden. du musst im content_lounge den namen ändern:
<ftui-view-section>
<ftui-label slot="header">overview</ftui-label>
<ftui-content class="no-ftui-content" file="template/template_musik.html" name="Musik" device="SB_PLAYER_Lounge"></ftui-content>
</ftui-view-section>
anders wird es nicht gehen.
Oder halt mit festen id´s
Ganz oben steht ja noch dein room Lounge!
LG mr_petz
Zitat von: mr_petz am 01 Februar 2022, 21:02:25
@SirMarco
Dein popup mit dem <header> Musikprogramm hat die gleiche id wie dein popup mit <header> Lounge, deswegen werden immer beide popups geöffnet.
Es fehlt dir der Eintrag in der tab_id die content_musik wo ja das zweite Popup hinzeigt. (zumindest habe ich da nix gefunden) Die html ist ja da.
Was soll denn beim footer passieren und was soll oben bei Lounge passieren?
Er nimmt halt hier für beide Popups immer Lounge als id und zuerst wird Lounge und dann gleichzeitig/immer Musikprogramm geöffnet
Na logisch. Die heissen ja beide "Lounge". Bin da auf den Namen gegangen. name="Lounge" für template_musik.html und name="Lounge" für template_klima_2er.html. Danke Danke!! Das war es!
Zitat
Edit: verstehe. Dein musikTemplate soll im zweiten popup per footer Snowflake- und das erste per oben (content_lounge) th-Icon geöffnet werden. Richtig?
Wenn du eine feste id in der template_musik vergiebst, denke ich dass es dann so ist wie du willst. Ich teste es aber noch mal anders mit {{name}}.
Nein so war das nicht gedacht. Der Footer sind "Shortcuts" um schneller in die Räume zu kommen. Es sieht eigentlich alles ganz anders aus :)
Zitat von: mr_petz am 01 Februar 2022, 21:48:09
Ok habe es gefunden. du musst im content_lounge den namen ändern:
<ftui-view-section>
<ftui-label slot="header">overview</ftui-label>
<ftui-content class="no-ftui-content" file="template/template_musik.html" name="Musik" device="SB_PLAYER_Lounge"></ftui-content>
</ftui-view-section>
anders wird es nicht gehen.
Oder halt mit festen id´s
Ganz oben steht ja noch dein room Lounge!
LG mr_petz
Du bist DER Beste. Suche schon so ewig nach dem "Fehler". Danke. Ich gehe auf das {{device}}
Grüsse
Der beste bin ich zwar nicht , aber ich helfe immer wieder gern :D
LG mr_petz
Zitat von: yersinia am 01 Februar 2022, 09:57:41
Ja, da gab es gestern größere Änderungen in der Farbdefinition (https://github.com/knowthelist/ftui/commit/f7a30a6eb6ad2106f17b505aa943dcf4bd7e70fc#diff-503eb3f1aded0166f651233f5423b770c005a38390e170ffe46624118f88b296):
Zwei Fragen zu Farben:
Also ich habe ja in meiner user.css abgeschrieben:
[color=my_darkblue] {
--color-base: #00008B;
--color-contrast: var(--white);
--color-shade: var(--seagreen);
}
1) Ist das so noch richtig oder hat sich da was geändert?
2) color-base ist klar, das nutze ich ja. Aber was machen eigentlich color-contrast und color-shade konkret?
Ich habe da gern mal ein Problem sowie eine Frage, aktuell mit ftui-content.
Die Frage:
ftui-content wird erst bei Ereignis (z.B. Klick) geladen, das ist so richtig?
Das Problem:
Ich nutze das (ftui-content) nun auch für ftui-tab(-view), das funktioniert im Prinzip ganz gut. Leider funktioniert es nicht für ftui-tab active, da würde ich erwarten, dass genau dieser ftui-content sofort bei Aufruf von index.html erfolgt. Aber dem ist nicht der Fall. (Erst wenn ich aktiv auf "home" klicke, wird der Inhalt geladen.)
Zur Illustration Auszug aus index.html:
<ftui-grid base-width="96" base-height="86" margin="4">
...
<ftui-grid-tile row="1" col="1" height="5" width="1" color="black">
<ftui-column>
<ftui-tab view="home" direction="vertical" style="z-index:1" active>
<ftui-icon name="circle"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="haus" direction="vertical" style="z-index:1">
<ftui-icon name="home1" color="my_yellow"></ftui-icon>
<ftui-label>Haus</ftui-label>
</ftui-tab>
...
</ftui-column>
</ftui-grid-tile>
...
<!-- Home: taktischer Bildschirm -->
<ftui-tab-view id="home">
<ftui-content file="home/home.html"></ftui-content>
</ftui-tab-view>
<!-- Fenster und Heizung -->
<ftui-tab-view id="haus">
<ftui-content file="haus/haus.html"></ftui-content>
</ftui-tab-view>
Mache ich da jetzt wieder was falsch, fehlt mir da eine Info? Oder geht das im Moment (noch) gar nicht und ich sollte @setstate freundlich bitten?
Zitat von: grossmaggul am 01 Februar 2022, 09:51:14
Irgendwie ist das "Grün" seit dem letzten update, etwas "sehr grün".;)
Also mir gefaellts! ;D
Sailor
Zitat von: Sailor am 02 Februar 2022, 09:52:14Also mir gefaellts! ;D
Das grün ansich gefiel mir auch, aber es passte nicht auf die Oberfläche bei dem gewählten Hintergrund.
Es gab gestern eine Korrektur (https://github.com/knowthelist/ftui/commit/69afbd91743daa9475e6d942affeefa9a92ac6be#diff-503eb3f1aded0166f651233f5423b770c005a38390e170ffe46624118f88b296) (das neue alte grün ist anders aber dunkler - passt!) und es sind einige weitere Themes (https://github.com/knowthelist/ftui/commit/535238e0a2d22275cfc84d80e72996d40fe67a6e#diff-a26c2392e67003f15981b0f1b78f6d09d430c0880f93e0881b112a2a1dffd05f) hinzugekommen. 8)
Hi yersinia
Zitat von: yersinia am 02 Februar 2022, 09:57:30
Ja, seit heute ist alles wieder Seegras-Blaugrün.
Gruß
Sailor
Ein herzerfrischendes Moin vom achtern Diek vorweg
Ich habe festgestellt, dass sich ein Standard - Popup nicht mehr auf den Dummy hin oeffnet.
<ftui-popup id="FloorPlanSmokeDetector" position="page" height="100%" width="100%" top="0%" left="0%" [open]="SmokeDetector_ResetButton:state | map('armed: true, stdby: true, resetting: true, silent: false')" timeout="0">
<ftui-content file="content/content_popup_smokedetector.html"></ftui-content>
</ftui-popup>
Es hatte schon mal funktioniert und das Device:Reading ist auch richtig geschrieben.
Hat sich an der Syntax etwas geändert?
Danke!
Gruß
Sailor
ZitatJa, seit heute ist alles wieder Seegras-Blaugrün.
Das sollte Dir doch gerade gut gefallen.;)
@Sailor
Zitat von: Sailor am 02 Februar 2022, 10:44:22
Ein herzerfrischendes Moin vom achtern Diek vorweg
Ich habe festgestellt, dass sich ein Standard - Popup nicht mehr auf den Dummy hin oeffnet.
<ftui-popup id="FloorPlanSmokeDetector" position="page" height="100%" width="100%" top="0%" left="0%" [open]="SmokeDetector_ResetButton:state | map('armed: true, stdby: true, resetting: true, silent: false')" timeout="0">
<ftui-content file="content/content_popup_smokedetector.html"></ftui-content>
</ftui-popup>
Es hatte schon mal funktioniert und das Device:Reading ist auch richtig geschrieben.
Hat sich an der Syntax etwas geändert?
Danke!
Gruß
Sailor
open wurde zu
active im popup!
open brauchte setstate als gegensatz zu close!
also:
<ftui-popup id="FloorPlanSmokeDetector" position="page" height="100%" width="100%" top="0%" left="0%" [active]="SmokeDetector_ResetButton:state | map('armed: true, stdby: true, resetting: true, silent: false')" timeout="0">
<ftui-content file="content/content_popup_smokedetector.html"></ftui-content>
</ftui-popup>
LG mr_petz
Hi Mr. Petz
Zitat von: mr_petz am 02 Februar 2022, 11:34:44
open wurde zu active im popup!
Danke, das war es!
Ich glaube, wir sollten mal langsam an ein Wiki arbeiten.
Wenn sich jeder hier im Forum ein widget vornimmt, sollte das doch zu schaffen sein. ???
Gruß
Sailor
Hallo zusammen
Kann es sein das dem Slider in slider.component.css .rangeable-handle ein z-index:1; fehlt?
.rangeable-handle {
border: none;
width: 2em;
height: 2em;
box-shadow: var(--slider-handle-shadow, none);
border: var(--slider-handle-border, none);
z-index: 1;
}
<ftui-slider [(value)]="{{device}}:pct"></ftui-slider>
Aktuell ist der handle bei mir im Hintergrund.
Grüsse
Zitat von: Sailor am 02 Februar 2022, 15:55:29
Hi Mr. Petz
Danke, das war es!
Ich glaube, wir sollten mal langsam an ein Wiki arbeiten.
Wenn sich jeder hier im Forum ein widget vornimmt, sollte das doch zu schaffen sein. ???
Gruß
Sailor
Das wäre natürlich Mega. Nur muss jemand den Lead übernehmen.
Zitat von: grossmaggul am 01 Februar 2022, 09:51:14
Irgendwie ist das "Grün" seit dem letzten update, etwas "sehr grün". :)
Finde auch das neue grün eigentlich schöner ;), ist aber Geschmackssache
Nachtrag: Eben gesehen, wurde wieder zurückgeändert ???
Muss ich dann wohl selbst im css anpassen ;)
@setstate
Ich habe ein Problem mit ftui-content, das beschreibe ich ausführlich in meinem Beitrag #2099. Kannst Du Dir das mal bitte durchlesen?
Ich vermute das einen bug bzw. ein "habe ich noch gar nicht realisiert". Es mag aber auch sein, dass ich etwas übersah.
Danke!
@curt
Zu deinem content Problem.
Es sollte wie hier in setstate's Beispiel funktionieren.
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/tab-content.html
und hier die Demo dazu:
https://knowthelist.github.io/ftui/www/ftui/examples/tab-content.html
Ich glaube dir fehlt der ftui-grid-tile im <ftui-tab-view id="home"> und haus
Schaue es dir nochmal im example an und vergleiche mit deinem.
LG mr_petz
Edit also so:
<ftui-grid base-width="96" base-height="86" margin="4">
...
<ftui-grid-tile row="1" col="1" height="5" width="1" color="black">
<ftui-column>
<ftui-tab view="home" direction="vertical" style="z-index:1" active>
<ftui-icon name="circle"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="haus" direction="vertical" style="z-index:1">
<ftui-icon name="home1" color="my_yellow"></ftui-icon>
<ftui-label>Haus</ftui-label>
</ftui-tab>
...
</ftui-column>
</ftui-grid-tile>
...
<!-- Home: taktischer Bildschirm -->
<ftui-tab-view id="home">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-content file="home/home.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<!-- Fenster und Heizung -->
<ftui-tab-view id="haus">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<ftui-content file="haus/haus.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
Zitat von: Sailor am 02 Februar 2022, 15:55:29
...
Ich glaube, wir sollten mal langsam an ein Wiki arbeiten.
Wenn sich jeder hier im Forum ein widget vornimmt, sollte das doch zu schaffen sein. ???
...
Ist vielleicht noch ein wendig früh denke ich. warte mal noch paar Monate ab, da ja @setstate immer wieder was umstrickt. (natürlich zum guten :) )
Das Grundkonzept hat ja @setstate in seinem Git stehen und er hat ja auch schon sehr viele examples drin die er nach einer Änderung immer anpasst.
Ich denke wenn du jetzt was anfängst kann es morgen schon "veraltet" sein und du musst dann das wiki permanent ändern. Siehe an deinem Beispiel mit open und active.
Da muss der Ersteller jede Änderung erfassen (also immer mitlesen) und dann im wiki korrigieren.
@setstate reagiert ja immer auf die Nutzer mit ihren Wünschen und setzt sie dann in den meisten Fällen um.
Also ist erstmal mitlesen angesagt und sich ggf. Notizen machen.
Ich habe z.Bsp. eine Demoseite wo ich die ganzen "speziellen" configs die hier in dem langen Thread stehen rein schreibe um immer darauf zurückgreifen zu können.
LG mr_petz
evtl. wäre es aber angebracht einen Thread zu erstellen mit aktuellen Änderungen.
Damit man sich erstens nicht den Wolf sucht und zweitens wäre das alles zentral angelegt, aber eben ohne irgendwelche Fragen darin zu stellen. Kann man sicher so einrichten.
Ich habe seit ca. 2 Monaten kein Update gemacht und komme mir vor wie ein Anfänger, weiß überhaupt nicht wo ich anfangen soll.... so war es zumindest gestern Nachmittag und auch noch heute früh.
Aktuell habe ich in meinem FTUI 3 noch immer einige Baustellen und der Sonntag ist rum und sicher habe ich noch einiges zu berichtigen.
Selbst da weiß ich noch nicht wo ich anfangen soll, betrifft die Tabelle mit meinen Temperaturen die ich hier schon dargestellt habe.
So wie es aussieht muss ich das gesamte Teil neu bauen.
Moin,
ich habe gerade ein Update für FTUI 3 gemacht.
Mein Layout ist total zerschossen - gibt es da einen Fehler oder muss ich die Seite neu aufbauen?
Ich hänge mal zwei Bilder an, ALT vor dem Update, NEU nach dem Update
Gruß,
Matthias
EDIT: nach der "Wiederherstellung" der Dateien im Ordner ./components/grid/ geht es wieder, muss jetzt mal ansehen, was geändert wurde
Zitat von: moonsorrox am 07 Februar 2022, 00:16:49
evtl. wäre es aber angebracht einen Thread zu erstellen mit aktuellen Änderungen.
Ich denke das ist wirklich sinnvoll, damit man anfangen kann FTUI3 in einem Produktivsystem einsetzen kann und VORHER weiß, welche Auswirkungen ein Update haben kann, siehe meinen Post oben.
Gruß,
MDietrich
ZitatIch denke das ist wirklich sinnvoll
Das finde ich noch nicht, da FTUI3 immer noch Betastatus hat, finde ich es besser setstate verwendet seine Zeit und Energie in FTUI3 anstatt im Schreiben von Histories.
Wenn wirklich jemand ein Wiki oder eine History möchte, sowas kann ja jeder anfangen, dann muss man sich aber auch im Klaren sein, daß man FTUI3 ständig beobachten und zeitnah alle Änderungen einpflegen muss, also, Freiwillige vor. ;D
Zitatdamit man anfangen kann FTUI3 in einem Produktivsystem einsetzen kann
Aufgrund des Betastatus sollte man das eigentlich noch nicht machen, es sei denn man verfolgt hier alle Threads zum Thema FTUI3 und passt die Änderungen entsprechend an.
Ich denke, daß FTUI3 noch nicht so weit ist, es zu installieren und sich dann drei Monate nicht mehr darum zu kümmern, wer das doch tut muss eben mit den Konsequenzen leben.
Beta heißt nunmal, daß es noch in der Testphase ist und noch nicht alles immer rund läuft und häufiger etwas geändert wird.
Man muss eben auch bereit sein, im git zu lesen was geändert wurde und kann sich dann überlegen, ob man das Update fahren will oder nicht.
Moin,
ich habe länger überlegt ob und wie ich antworten soll.
a) klar befindet sich das neue FTUI noch in der Entwicklung, und auch ich bin mir in klaren darüber des es Änderungen geben muss.
b) als "Anwender" ist es aber erheblicher Aufwand in diesem und den mittlerweile vielen anderen FTUI Threads zu suchen, was bei unerwartetem Verhalten passiert ist. Die Updates nicht zu nutzen wäre Blödsinn, man sollte aber das "Risiko" abschätzen können, was dann passiert.
c) Für ein WIKI wie für FTUI2 ist es sicher noch etwas früh (obwohl es toll wäre) - ein Minimum an Doku sollte es aber schon geben. Lösungen könnten sein ein Changelog für das ganze Projekt oder in der jeweilig geänderten Datei (was m.E. später auch die Maintainability verbessert). Ich möchte auch noch einmal den, bereits mehrfach gemachten Vorschlag, einen Thread für Beispiele und Lösungen einzurichten zur Diskussion stellen.
d) ich ziehe bald um und wollte nicht mehr mit FTUI 2 anfangen, hatte wohl das Risiko unterschätzt.
ZitatEine Beta-Version ist die erste Version eines Computerprogramms, die vom Hersteller zu Testzwecken veröffentlicht wird. Der Begriff ist nicht exakt definiert, als Faustregel zur Abgrenzung einer Beta-Version von anderen Versionen gilt in der Regel, dass in ihr zwar alle wesentlichen Funktionen des Programms implementiert, aber noch nicht vollständig getestet sind. Das Programm kann oder wird daher unter Umständen noch viele, evtl. auch schwerwiegende Fehler enthalten, die einen produktiven Einsatz nicht empfehlenswert machen.
Es geht mir nicht um die Entwickler und Supporter die alle viel Arbeit und know-how investieren. Nachmals Danke dafür!
Als Anwender bin ich aber im Moment ein wenig gestresst. Am Wochenende habe ich zu einem anderen Thema >500 Seiten im Forum durchsucht und leider nichts gefunden.
LG MDietrich
ZitatAls Anwender bin ich aber im Moment ein wenig gestresst.
Vielleicht sollte man mal klar stellen, daß Betaversionen eigentlich nicht für "normale" Anwender gedacht sind.
Ich weiß auch nicht wirklich was das Problem ist, ich nutze FTUI3 jetzt schon so um ein Jahr und hatte bisher selten Probleme damit und wenn doch hat mir das git und die Suchfunktion im Forum eigentlich immer genügt dem "Problem" auf die Spur zu kommen und wenn es mal nicht geklappt hat half eine Frage im Forum weiter.
Das mag sich jetzt ein wenig überheblich anhören, aber wer Betaversionen nutzt, unabhängig von FTUI3, sollte sich schon irgendwie zu helfen wissen und auch auf dem Schirm haben, wenn er das auf einem Produktivsystem einsetzt welches Risiko er da eingeht.
@grossmaggul
das sollte ja auch nicht von setstate kommen, damit meine ich eher uns alle, also die Leute die etwas neues entdecken so z.B. mr_petz der steckt da wohl aktuell am besten drin, habe ich so den Eindruck ;)
Aber es gibt sicher noch einige andere die ne gute Übersicht haben.
Ich dachte echt nicht das FTUI 3 noch Betastatus hat, aber gut es sit dann wohl so. :-[
Also ich habe nun schon den 3.Tag zutun und habe meine Seiten immer noch nicht aktuell, aber ich bekomme das sicher hin.
Was mir absolutes Kopfzerbrechen bereitet ist das nicht "arbeiten" des Swipers, den ich von Olli (octek0815) übernommen habe, der bewegt sich absolut gar nicht und hat unten einen zusätzlichen Scrolbalken im Bild welcher vorher nicht da war.
Das mit der Breite im Popup habe ich hinbekommen, aber das swipen eben.
Ich bin da im Moment ratlos :-\
Zitatdamit meine ich eher uns alle
Schön, aber im Bezug auf die geforderte Doku/Changelog/Beispielthread kommt doch da von denen, die das dauernd fordern eher gar nix, das ist Anspruchsdenken, was dem Projekt nicht hilft.
Wenn ich beispielsweise gerne einen Beispielethread hätte, gehe ich mit gutem Beispiel voran und eröffne den Thread selbst mit einem Beispiel. ;)
ich nutze FTUI3 genau wie du schon ca. 1 Jahr und hatte bisher auch keine Probleme etwas zu richten. Diesmal ist es aber wohl etwas mehr.
Hast du nicht auch diesen Swiper in Betrieb mit den Wetterwarnungen..? Wenn ja läuft deiner.?
ZitatHast du nicht auch diesen Swiper in Betrieb mit den Wetterwarnungen..? Wenn ja läuft deiner.?
Ja, bei mir läuft der, allerdings habe ich den auch schon seit Ewigkeiten nicht aktualisiert, ich wüsste auch nicht warum, der läuft ja.:-)
Es muss also irgend etwas sein was mit dem aktuellem Update gekommen ist, in dem Thread den ich dafür eröffnet habe hat mich ein User angeschrieben das er auch Problem hat.
Vorher lief der ja bei mir seit ca. 1 Jahr problemlos.
Evtl. kann setstate mal was dazu sagen.
Möchte mein FTUI schon aktuell halten und jetzt nicht zurück downgraden
Da die Swiper auf der Demoseite funktionieren vermute ich eher einen Fehler in den Warnwetterkomponenten, vielleicht mal Yersinia fragen im entsprechenden Thread.
Oh, habe ich übersehen, Du hattest das schon gefragt.
Yersinia hatte sich gestern dazu gemeldet, seine Problem sind etwas anders, wenn er aktualisiert funktioniert es wohl bei ihm, aber dann auch wieder nicht.
Ich werde weiter suchen...!
Zitat von: SirMarco am 02 Februar 2022, 16:05:48
Das wäre natürlich Mega. Nur muss jemand den Lead übernehmen.
Ich habe mal versucht anzufangen:
https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3
Gruß
Sailor
Leute das Update von heute zerschiesst mir komplett das FTUI....
Gerade aktualisiert, keine Probleme bisher.
Möglicherweise hat das was mit der geänderten base-width und base-height zu tun.
Ich arbeite mit
<ftui-grid responsive margin="2">
<ftui-grid-tile row="1" col="1" height="3" width="3" color="transparent">
.
.
.
</ftui-grid-tile>
</ftui-grid>
Zitat von: moonsorrox am 07 Februar 2022, 17:08:56
Leute das Update von heute zerschiesst mir komplett das FTUI....
Hallo, willkommen im Club :(
https://forum.fhem.de/index.php/topic,115259.msg1206414.html#msg1206414 (https://forum.fhem.de/index.php/topic,115259.msg1206414.html#msg1206414)
AN alles Betroffenen: Könntet ihr bitte gefundene Lösungen hier posten?
LG
MDietrich
erstmal die Version von gestern nehmen
diese hier nutze ich nicht
<!--ftui-grid cols="32" rows="22" resize margin="2"-->
<!--ftui-grid base-width="45" base-height="50" margin="2"-->
<!-- <ftui-grid base-width="100" base-height="80" margin="2"-->
<ftui-grid <ftui-grid responsive margin="2"> >
gab es bis gestern so nicht, obwohl das in einem Beispiel noch als Restposten drin war.
Weil ich die Idee von responsive im Grid aber interessant fand, habe ich es gestern richtig eingebaut.
https://knowthelist.github.io/ftui/www/ftui/examples/grid_responsive.html
zum Testen - einfach mal das Browser-Fenster größer oder kleiner schieben.
Um auf den alten Stand zu kommen, einfach das responsive Attribute rausnehmen.
cols und rows gibt es auch nicht mehr beim Grid, nur noch base-width und base-height - mit jeweils 140 als default.
Hallo setstate,
mir ist aufgefallen das es aktuell Probleme mit dem anzeigen von Umlauten gibt, bin der Meinung das ist seit dem Update heute.
Anbei mal ein Screenshot.
Dadurch wird das Wettericon nicht mehr richtig gemappt da hier das "ö" nicht richtig funktioniert und etwas weiter unten funktioniert das "ß" bei der Apotheke nicht.
Kannst du dir ja mal anschauen.
Gruß Markus
P.S.: Hab das mit dem "responsive" mal ausprobiert, da wird bei mir aber alles riesengroß, hab´s auch mal angefügt als Screenshot, einmal normal und einmal mit responsive
Zitat von: meier81 am 07 Februar 2022, 21:03:37
Hallo setstate,
mir ist aufgefallen das es aktuell Probleme mit dem anzeigen von Umlauten gibt, bin der Meinung das ist seit dem Update heute.
Anbei mal ein Screenshot.
Dadurch wird das Wettericon nicht mehr richtig gemappt da hier das "ö" nicht richtig funktioniert und etwas weiter unten funktioniert das "ß" bei der Apotheke nicht.
Kannst du dir ja mal anschauen.
Gruß Markus
Das liegt am Update des fhemweb Modul.
Edit: Ist mit dem heutigen fhemweb Update wieder ok.
Gruß LuGu
Also am FTUI3 liegt´s nicht.
Man muss auch aufpassen ob der Editor den man verwendet nur UTF-8 oder UTF-8-BOM verwendet.
Selber Effekt.
LG mr_petz
Zitat von: setstate am 07 Februar 2022, 19:21:30
<ftui-grid <ftui-grid responsive margin="2"> >
gab es bis gestern so nicht, obwohl das in einem Beispiel noch als Restposten drin war.
Weil ich die Idee von responsive im Grid aber interessant fand, habe ich es gestern richtig eingebaut.
https://knowthelist.github.io/ftui/www/ftui/examples/grid_responsive.html
zum Testen - einfach mal das Browser-Fenster größer oder kleiner schieben.
Um auf den alten Stand zu kommen, einfach das responsive Attribute rausnehmen.
cols und rows gibt es auch nicht mehr beim Grid, nur noch base-width und base-height - mit jeweils 140 als default.
ich stehe bei github immer etwas auf dem Schlauch, klar ist das Beispiel gut zu sehen wie komme ich aber an den aktuellen Code dieses Beispiels.
Kenne mich da leider nicht so gut uas
Hallo setstate,
ich habe die von dir beschriebenen notwendigen Änderungen ausprobiert:
<ftui-grid base-width="80" base-height="60" margin="3">
Nach dem Entfernen von 'responsive' passt mein Layout prinzipiell wieder, die dynamische Anpassung an die aktuelle Fenstergröße ist aber weg. :(
Bei den Grid-Tiles verwende ich jedoch:
<ftui-grid-tile row="1" col="19" height="15" width="2" shape="round">
Wenn ich versuche die Grid-Definition wie von dir oben beschrieben zu machen mit:
<ftui-grid <ftui-grid margin="2" responsive>></ftui-grid>
Dann werden alle Grid-Tiles mit der gleichen Breite vertikal untereinander dargestellt, mit Ausnahme des zuerst definierten, dies ist dann ca. bei 130% der Fensterbreite ganz unten.
Dritter Versuch, ohne das umschließende ftui-grid:
<ftui-grid margin="2" responsive>
Die Reihenfolge der Tiles ändert sich, sie werden in der Reihenfolge wie im Code dargestellt, die Breite ist wie im Beispiel oben, erst bei einem Zoom-Faktor von 50 sehe ich alles Tiles vollständig in der beschriebenen Form. Dann unterscheiden sich die beiden letzten Varianten in der Darstellung nicht mehr.
Wenn es hilfreich ist, hänge ich gerne ein paar Bilder zur Veranschaulichung an. Gibt es eine Variante um das Verhalten wie vor dem Update zu realisieren?
LG
MDietrich
@moonsorrox
Es gibt viele Möglichkeiten, um auf eine Datei bei GitHub zuzugreifen; 3 davon sind unten aufgeführt.
*** Datei wird ausgeführt
https://knowthelist.github.io/ftui/www/ftui/examples/grid_responsive.html (https://knowthelist.github.io/ftui/www/ftui/examples/grid_responsive.html)
- macht im Grunde nur bei den Beispiel-Hauptdateien Sinn
*** Inhalt der Datei wird mit "GitHub-Umgebung" angezeigt
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/grid_responsive.html (https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/grid_responsive.html)
- Inhalt der Datei kann in Zwischenablage kopiert werden
- Ansicht der Datei kann umgeschaltet werden
- Historie der Datei kann eingesehen werden
- man kann sich ähnlich zu einem Dateimanager im gesamten Projekt bewegen
- ...
*** Inhalt der Datei wird als reine Text-Datei angezeigt
https://github.com/knowthelist/ftui/raw/master/www/ftui/examples/grid_responsive.html (https://github.com/knowthelist/ftui/raw/master/www/ftui/examples/grid_responsive.html)
- Inhalt der Datei kann in Zwischenablage kopiert werden
examples/grid_responsive.html kann quasi als Schablone angesehen und "beliebig" ersetzt werden ... examples/label.html oder components/timeset/timeset.component.js oder ...
oh, da habe ich beim Grid zu viel raus gelöscht. Das Resize geht wirklich nicht mehr. Hatte ich nicht mehr auf dem Schirm. Muss ich nochmal überarbeiten ...
@OdfFhem
ich danke dir für die tolle Erklärung, werde ich mal genau anschauen.!!
@setstate
Was ich aktuell absolut nicht weiß, wie ich jetzt was einstelle um das aktuelle Update zu fahren, denn gestern habe ich ja mein gesamtes Layout zerschossen.
Hier nochmal zur Info ich arbeite mit folgendem Code, wobei wohl wichtig ist wie ich das mit "responsive" umsetze damit es nicht aussieht wie Kraut und Rüben ;)
<ftui-grid responsive margin="2">
<!-- Menü Leiste waagerecht - START -->
<ftui-grid-tile row="1" col="10" height="2" width="10" color="transparent">
<ftui-row id="ftui-row-1" height="" width="" align-items="center" space="evenly" class="size-1" color="" margin="0">
<ftui-tab view="home" id="ftui-tab-1" states="on,off" fill="clear" color="" size="large" shape="" direction="horizontal" value="off" group="default" active><ftui-icon name="home1" id="ftui-icon-1" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab>
<ftui-tab view="wetter" id="ftui-tab-2" states="on,off" fill="clear" color="" size="large" shape="" direction="horizontal" value="off" group="default"><ftui-icon name="cloudy" id="ftui-icon-2" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab>
<ftui-tab view="rollladen" id="ftui-tab-3" states="on,off" fill="clear" color="" size="large" shape="normal" direction="horizontal" value="off" group="default"><ftui-icon name="fts_shutter_30" id="ftui-icon-3" type="svg" path="../images/openautomation" color="" rgb=""></ftui-icon></ftui-tab>
<ftui-tab view="multimedia" id="ftui-tab-4" states="on,off" fill="clear" color="" size="large" shape="normal" direction="horizontal" value="off" group="default"><ftui-icon name="music" id="ftui-icon-4" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab>
<ftui-tab view="webcams" id="ftui-tab-5" states="on,off" fill="clear" color="" size="large" shape="normal" direction="horizontal" value="off" group="default"><ftui-icon name="camera1" id="ftui-icon-5" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab>
<!--ftui-tab view="View6" id="ftui-tab-6" states="on,off" fill="clear" color="" size="large" shape="large" direction="horizontal" value="off" group="default"><ftui-icon name="cogs" id="ftui-icon-6" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab-->
<!--ftui-tab view="View7" id="ftui-tab-7" states="on,off" fill="clear" color="" size="large" shape="large" direction="horizontal" value="off" group="default"><ftui-icon name="connectdevelop" id="ftui-icon-7" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab-->
</ftui-row>
</ftui-grid-tile>
<!-- Menü Leiste waagerecht - ENDE -->
.
.
.
</ftui-grid>
Hi,
ich wollte es gerade auf docker installieren.
Kann es sein, dass dies nicht (mehr) funktioniert?
standard_init_linux.go:228: exec user process caused: exec format error
Hallo,
habe gerade einmal eine Verständnisfrage. Ich will einen Wert aus einem Input-Feld per Klick auf ein Icon in ein Dummy schreien. So hatte ich das gedacht:
<input type="text" id="neuerEintrag">
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set testdummy2 ' + neuerEintrag.value);"></ftui-icon>
Klappt aber irgendwie nicht - es wird nur ein "undefined" übergeben. Was mache ich da falsch? Würd mich echt freuen, wenn mir jemand auf die Sprünge helfen kann! :-)
immer Kleinschreibung für IDs
neuereintrag oder neuer_eintrag anstatt neuerEintrag
oder etwas anders ;D:
<input type="text" id="neuerEintrag">
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set testdummy2 ' + document.querySelector('#neuerEintrag').value)"></ftui-icon>
;)
oder:
<input type="text" id="neuer_eintrag">
<ftui-icon name="check" @click="javascript:sendFhem('set testdummy2 ' + neuer_eintrag.value)"></ftui-icon>
LG mr_petz
Edit:
<ftui-input id="neuer_eintrag"></ftui-input>
<ftui-icon name="check" @click="javascript:sendFhem('set testdummy2 ' + neuer_eintrag.value);neuer_eintrag.value='';"></ftui-icon>
Hier mit ftui-input und es wird noch nach dem klick das value geleert.
Ich habe gerade nochmal ein Update gemacht... dazu folgendes
Ich habe im Grid immer folgendes drin gehabt:
<ftui-grid responsive margin="2">
das geht gar nicht da wird das ganze Layout komplett zerschossen
Jetzt habe ich das mal rein gesetzt, weil es bei mir auskommentiert drin stand
<ftui-grid resize margin="2">
das läuft mit dem neuen Update welches ich eben gemacht habe.
Ich weiß jetzt aber nicht ob das noch Gültigkeit hat, aber es funktioniert bei mir grad im Moment.
@setstate
Danke für den schnellen Fix, nach dem Update funktioniert 'resize' wieder.
LG
MDietrich
Zitat von: setstate am 23 Januar 2021, 13:15:34
solange es noch kein ftui-link gibt, kann man <a> benutzen.
target="_blank" scheint nicht zu funktionieren. Workaround:
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon" onclick="window.open(this.href,'_blank');return false;">Wettericon</a>
Hallo zusammen
wie kann ich dem href noch ein "http://" mit übergeben? Mein Reading vom device zeigt nur die IP ohne "http://" an und die Seite wird nicht geöffnet
Danke
Grüsse
EDIT:
Ein Userreading wäre noch eine Option, aber dann muss ich das jedem Device machen
ip_link {return("http://".ReadingsVal("$name","ip","")."/")}
@SirMarco
Probiere mal so
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon" onclick="window.open('http://'+this.href,'_blank');return false;">Wettericon</a>
LG mr_petz
Das habe ich auch probiert. Klappt leider nicht. Wird auch komisch formatiert in VSCode
Grüsse
Hi, ich nochmal:
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon" onclick="javascript:window.location.href='http://'+this.href;">Wettericon</a>
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon" onclick="javascript:window.open('http://'+this.href,'_blank');return false;">Wettericon</a>
wenn ich das hier teste mit meinem Testserver(localhost) kommt immer bei meinen Test mit folgenden Codes:
<a ftui-binding href="192.168.0.1" onclick="javascript:window.location.href='http://'+this.href;">Wettericon</a>
<a ftui-binding href="192.168.0.1" onclick="javascript:window.open('http://'+this.href,'_blank');return false;">Wettericon</a>
das raus:
http://127.0.0.1/192.168.0.1
http://http//127.0.0.1/192.168.0.1
Ich frage mich wo du hinwillst???
Edit:
Wenn ich das mit :: mache :
<a ftui-binding href="192.168.0.1" onclick="javascript:window.open('http:://'+this.href,'_blank');return false;">Wettericon</a>
http://127.0.0.1/://http://127.0.0.1/192.168.0.1
und:
Wenn ich das mit \: mache :
<a ftui-binding href="192.168.0.1" onclick="javascript:window.open('http\:/'+this.href,'_blank');return false;">Wettericon</a>
http://127.0.0.1/http://127.0.0.1/192.168.0.1
Der setzt immer den localhost vorn drann... egal ob mit oder ohne ftui-binding
EDIT:
Ich glaube so geht es:
<a ftui-binding [id]="AgroWeather:fc0_weather00Icon" onclick="javascript:window.open('http://'+id,'_blank');return false;">Wettericon</a>
so konnte ich meine Fritzbox-Seite öffnen...
Bei mir war hier ein dummy mit state 192.168.xxx.xxx
Bei den anderen defs. haut glaube das href in die quere...
Ich hoffe in die Richtung wolltest du.?
Danke fürs testen.
Die Idee ist direkt aus FTUI auf das Webinterface vom Device zu kommen.
Werde das über ein userreading anpassen
Danke
Grüsse
Ich kann es nur nochmal sagen. So geht es:
<a ftui-binding [id]="AgroWeather:fc0_weather00Icon" onclick="javascript:window.open('http://'+id,'_blank');return false;">Wettericon</a>
Du kannst sogar eine IP+Port noch eintragen:
<a ftui-binding [id]="AgroWeather:fc0_weather00Icon" onclick="javascript:window.open('http://127.0.0.1:8083'+id,'_blank');return false;">Wettericon</a>
Der Link sieht dann so aus:
http://127.0.0.1:8083/fhem?detail%3ddummy
Hier muss aber für das = ein URL Encode mit %3d stehen. nur so ging es bei mir ein device aufzurufen.
Das kannst du dann auch mit replace erledigen:
<a ftui-binding [id]="AgroWeather:fc0_weather00Icon" onclick="javascript:window.open('http://'+id.replace(/=/g,'%3d'),'_blank');return false;">Wettericon</a>
LG mr_petz
ps. getestet unter Chrome und FF
Das ist genau das was ich gesucht habe :)
Hast du kein Spendenkonto? ;)
Grüsse
Zitat von: SirMarco am 09 Februar 2022, 21:33:42
..
Hast du kein Spendenkonto? ;)
Grüsse
Ich mache das aus lieber langer Weile für lau ;D und weil ich hier auch viel lernen kann.
Was auch manche Nutzer immer für Ideen haben... ::)
LG mr_petz
Zitat von: mr_petz am 09 Februar 2022, 21:18:30
Ich kann es nur nochmal sagen. So geht es:
<a ftui-binding [id]="AgroWeather:fc0_weather00Icon" onclick="javascript:window.open('http://'+id,'_blank');return false;">Wettericon</a>
Du kannst sogar eine IP+Port noch eintragen:
<a ftui-binding [id]="AgroWeather:fc0_weather00Icon" onclick="javascript:window.open('http://127.0.0.1:8083'+id,'_blank');return false;">Wettericon</a>
Der Link sieht dann so aus:
http://127.0.0.1:8083/fhem?detail%3ddummy
Hier muss aber für das = ein URL Encode mit %3d stehen. nur so ging es bei mir ein device aufzurufen.
Das kannst du dann auch mit replace erledigen:
<a ftui-binding [id]="AgroWeather:fc0_weather00Icon" onclick="javascript:window.open('http://'+id.replace(/=/g,'%3d'),'_blank');return false;">Wettericon</a>
LG mr_petz
ps. getestet unter Chrome und FF
Ich zitiere mich mal selber.
Mir ist gerade aufgefallen, dass @setstate (der Schlingel hat nichts erwähnt :D) noch ein paar pipes eingebaut hat. Damit wird es einfacher etwas vorn oder hinten anzuhängen:
für vorn:
prepend()für hinten:
append()@SirMarco
Da ist es einfacher für dich und du kannst weiterhin mit href arbeiten und wir bleiben FTUI3-Konform:
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon | prepend('http://')" onclick="javascript:window.open(href,'_blank');return false;">Wettericon</a>
@stefan-dd
Auch hier wäre es mit append() besser:
https://forum.fhem.de/index.php/topic,115259.msg1203014.html#msg1203014
<ftui-image base="icons/" [src]="AV_Receiver:currentStation | append('.png')"></ftui-image>LG mr_petz
Ich versuche gerade mit <ftui-image [src]="http://192.168.1.58/cgi-bin/snapshot.cgi" user="xx" password="xx" interval="300" ></ftui-image>
ein Bild einer webcam einzubinden, aber irgendwie gelingt es mir nicht. Funktioniert da irgendwas noch grundsätzlich nicht? Mache ich da etwas komplett falsch?
Zitat von: omnior am 11 Februar 2022, 15:16:48
Ich versuche gerade mit <ftui-image [src]="http://192.168.1.58/cgi-bin/snapshot.cgi" user="xx" password="xx" interval="300" ></ftui-image>
ein Bild einer webcam einzubinden, aber irgendwie gelingt es mir nicht. Funktioniert da irgendwas noch grundsätzlich nicht? Mache ich da etwas komplett falsch?
statt [src] -> src verwenden.
[src] erwartet ein device von fhem.
[] -> get
() -> set
<ftui-image src="http://192.168.1.58/cgi-bin/snapshot.cgi" user="xx" password="xx" interval="300" ></ftui-image>LG mr_petz
Danke mr_petz, das habe ich natürlich in meiner Verzweiflung schon ausprobiert gehabt, sämtliche Kombinationen die mir selber eingefallen sind. Die Klammern sind einfach noch Überreste einer der letzten Versuche. Sorry. Leider funktioniert es aber auch ohne die Klammern nicht. Irgendwas anderes fehlt offensichtlich weiterhin.
Dann wird deine url nicht so stimmen.
Kannn es sein, dass dein string ungefähr so aussieht?:
http://192.168.1.58/cgi-bin/snapshot.cgi?chn=[CHANNEL]&user=[USERNAME]&pass=[PASSWORD]
Wenn ja musst du das user und password in ftui-image weglassen und die url so direkt eintragen.
Wie sieht deine url aus?
LG mr_petz
Die URL sieht direkt so aus: http://192.168.1.58/cgi-bin/snapshot.cgi
Beim ersten Aufruf im Browser wird user und passwort abgefragt. Ich habe es FTUI mit [user]=xx und [password]=xx probiert aber auch direkt in der URL mit user:password@ vorangestellt, beides klappt nicht.
Was mir noch auffällt, der direkte URL Abruf dauert relativ lange, ich meine damit 1-2 Sekunden, das Bild ist 1280x960 Pixel groß, vielleicht kommt es irgendwo zu einem Timeout?
Was ist das für ein Hersteller?
Kann mir nicht Vorstellen dass man user und pass nicht direkt mitgeben kann in der url.
Eine Lupus LE201.
User und Passwort kann man mitgeben, zumindest in der direkten Eingabe der URL mit user:password@ klappt es ja. Ich bekomme nur in FTUI nix angezeigt.
Laut meinen Recherchen gibt es mehre urls dafür.
Zum einen:
http://192.168.1.58/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=admin&
und zum anderen:
http://admin:admin@192.168.1.58/cgi-bin/snapshot.cgi?1
Teste nochmal mit ?1 und nicht mit password sondern pass
<ftui-image src="http://192.168.1.58/cgi-bin/snapshot.cgi?1" user="xx" pass="xx" interval="300" ></ftui-image>
Und
<ftui-image src="http://192.168.1.58/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=admin&" interval="300" ></ftui-image>
LG mr_petz
Zitat von: mr_petz am 11 Februar 2022, 18:56:04
Laut meinen Recherchen gibt es mehre urls dafür.
Zum einen:
http://192.168.1.58/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=admin&
hier erhalte ich bei der URL (natürlich mit korrektem user/password) bereits:
Error
Bad Request!
Zitat
und zum anderen:
http://admin:admin@192.168.1.58/cgi-bin/snapshot.cgi?1
mit der zweiten Variante, mit der zusätzlichen ?1 geht die URL genauso. Allerdings klappt es in FTUI weder mit oder ohne ?1 bzw. mit password oder pass nicht.
LG Robert
Ok. Ich habe nochwas gefunden.
Lasse mal den interval weg. Kannst auch mit refresh probieren.
Oder setze den mal auf 10.
Hier die Info:
https://forum.fhem.de/index.php/topic,115259.msg1192700/topicseen.html#msg1192700
Edit: Ich glaube das geht doch (noch) nicht. @setstate hatte zwar den fetch für user:pass@ip eingebaut, aber es scheint nicht immer zu gehen. Die direkte externe Abfrage wurde von den Browsern abgeschalten.
@setstate, vielleicht fehlt hier ein header mit base64??
const login = btoa(this.user+':'+this.pass);
const response = await fetch(src, {
method: 'GET',
headers: new Headers({"Authorization": `Basic ${login}`})
});
Keine Ahnung. Du wirst das schon wissen...
Edit2:
ich habe es bei meiner cam mal getestet. Ich kann aber beide auth´s benutzen.
einmal mit:
http://user:pass@ip/cgi-bin/images_cgi?channel=0
Ergebnis ist wie bei @omnior. egal ob src=direkt oder als user und pass.
und einmal mit:
http://ip/cgi-bin/images_cgi?channel=0&usr=user&pwd=pass
Ergebnis ist hier ok bei src=direkt.
@omnior
was passiert bei diesem Aufruf:
http://192.168.1.58/cgi-bin/GetImage.cgi?Size=640x480&user=user&password=pass
Hier soll es auch mit &user=user&password=pass gehen. (Benutzer und Passwort muss natürlich angepasst werden!)
oder
http://192.168.1.58/cgi-bin/GetImage.cgi?Size=640x480&usr=admin&pwd=admin
LG mr_petz
Gibt es denn schon eine Lösung für den Swiper, denn bei mir läuft er nicht, bleibt auf einer Warnmeldung stehen
Zitat von: moonsorrox am 12 Februar 2022, 11:53:48
Gibt es denn schon eine Lösung für den Swiper, denn bei mir läuft er nicht, bleibt auf einer Warnmeldung stehen
Ich sehe keine Probleme beim Swiper an sich. Es muss etwas an deiner Umsetzung nicht passen.
Zum Test habe ich gerade zwei verschiedene Beispiele gebaut.
https://knowthelist.github.io/ftui/www/ftui/examples/swiper.html
Am besten, du vergleichst die mal mit deiner Umsetzung.
Zitat von: setstate am 12 Februar 2022, 19:16:24
Ich sehe keine Probleme beim Swiper an sich. Es muss etwas an deiner Umsetzung nicht passen.
Zum Test habe ich gerade zwei verschiedene Beispiele gebaut.
https://knowthelist.github.io/ftui/www/ftui/examples/swiper.html
Am besten, du vergleichst die mal mit deiner Umsetzung.
Hallo setstate,
ich bin der Meinung, dass dein Beispiel examples/swiper.html auch nicht richtig funktioniert oder ich verstehe es nicht richtig.
Wenn ich 1 und 2 auswähle, wird zwischen 1 und 2 "geswipt".
Wenn ich 1, 2 und 3 auswähle wird nur zwischen 2 und 3 geswipt.
Wenn ich 1, 2, 3 und 4 auswähle wird nur zwischen 2, 3 und 4 geswipt.
Wenn ich 1, 2, 3, 4 und 5 auswähle wird nur zwischen 3, 5 und 5 geswipt.
Wenn ich 1, 2, 3, 4, 5 und 6 auswähle wird nur zwischen 4, 5 und 6 geswipt.
Wenn ich 1, 2, 3, 4, 5, 6 und 7 auswähle wird nur zwischen 4, 5, 6 und 7 geswipt.
Also es werden nicht alle ausgewählten Anzeigen geswipt.
Ich wäre für einen Tip in die richtige Richtung dankbar.
Gruß LuGu
Zitat von: LuGu am 12 Februar 2022, 19:54:38
Wenn ich 1 und 2 auswähle, wird zwischen 1 und 2 "geswipt".
Wenn ich 1, 2 und 3 auswähle wird nur zwischen 2 und 3 geswipt.
Wenn ich 1, 2, 3 und 4 auswähle wird nur zwischen 2, 3 und 4 geswipt.
Wenn ich 1, 2, 3, 4 und 5 auswähle wird nur zwischen 3, 5 und 5 geswipt.
Wenn ich 1, 2, 3, 4, 5 und 6 auswähle wird nur zwischen 4, 5 und 6 geswipt.
Wenn ich 1, 2, 3, 4, 5, 6 und 7 auswähle wird nur zwischen 4, 5, 6 und 7 geswipt.
Hallo LuGu,
hab eben mal bei die Testseite aufgerufen und muss sagen bei mir funktioniert das alles soweit richtig. Aktivieren, deaktivieren, alles okay. Ich hab lediglich den Fall das direkt nach dem deaktivieren bzw. aktivieren er nicht von vorne anfängt sondern mal irgendwo mittendrin, dann läuft er aber ohne Probleme richtig durch. Oder ist das der Fall den du meintest?
Gruß Markus
Zitat von: meier81 am 12 Februar 2022, 20:36:09
Hallo LuGu,
hab eben mal bei die Testseite aufgerufen und muss sagen bei mir funktioniert das alles soweit richtig. Aktivieren, deaktivieren, alles okay. Ich hab lediglich den Fall das direkt nach dem deaktivieren bzw. aktivieren er nicht von vorne anfängt sondern mal irgendwo mittendrin, dann läuft er aber ohne Probleme richtig durch. Oder ist das der Fall den du meintest?
Gruß Markus
Hallo Markus,
mein Fehler. Mann sollte immer mit verschiedenen Browsenr testen. Mit
Firefox ist es wie von mir oben beschrieben und mit
Chrom ist alles so, wie es soll.
Wäre noch die Frage @moonsorrox mit welchem Browser er getestet hat.
Gruß LuGu
Zitat von: mr_petz am 12 Februar 2022, 09:06:45
@omnior
was passiert bei diesem Aufruf:
http://192.168.1.58/GetImage.cgi?Size=640x480&user=user&password=pass
Hier soll es auch mit &user=user&password=pass gehen. (Benutzer und Passwort muss natürlich angepasst werden!)
oder
http://192.168.1.58/GetImage.cgi?Size=640x480&usr=admin&pwd=admin
LG mr_petz
Hallo mr_petz, leider kommt in beiden Fällen mit diesem Befehl ein: 404 not found
@omnior
Wenn ich das richtig verstehe, ist noch nicht ganz klar, über welche Anfrage man an den Snapshot kommt.
Du schaffst es aber "indirekt" auch heute schon ...
Könntest Du einmal über den Debugger vom Browser die den Snapshot liefernde Abfrage im Netzwerk-Tab ausfindig machen.
Hast Du diese ausfindig gemacht, mit rechter Maustaste auf dieser Abfrage den Menüpunkt "Copy Request Headers" auswählen und hier das anonymisierte Ergebnis veröffentlichen.
Unter Umständen sollte zumindest ein Teil des Rätsels damit gelöst werden können ...
Ja bei ihm geht es auch mit:
http://192.168.1.58/cgi-bin/snapshot.cgi?1&user=USERNAME&password=PASSWORT
Haben wir gerade geklärt.
LG mr_petz
Zitat von: OdfFhem am 13 Februar 2022, 00:51:34
@omnior
Wenn ich das richtig verstehe, ist noch nicht ganz klar, über welche Anfrage man an den Snapshot kommt.
Du schaffst es aber "indirekt" auch heute schon ...
Könntest Du einmal über den Debugger vom Browser die den Snapshot liefernde Abfrage im Netzwerk-Tab ausfindig machen.
Hast Du diese ausfindig gemacht, mit rechter Maustaste auf dieser Abfrage den Menüpunkt "Copy Request Headers" auswählen und hier das anonymisierte Ergebnis veröffentlichen.
Unter Umständen sollte zumindest ein Teil des Rätsels damit gelöst werden können ...
Durch das user:pass@ip/cgi geht der fetch nicht. Also durch den Basic Auth
Zitat von: OdfFhem am 13 Februar 2022, 00:51:34
Könntest Du einmal über den Debugger vom Browser die den Snapshot liefernde Abfrage im Netzwerk-Tab ausfindig machen.
Hast Du diese ausfindig gemacht, mit rechter Maustaste auf dieser Abfrage den Menüpunkt "Copy Request Headers" auswählen und hier das anonymisierte Ergebnis veröffentlichen.
Unter Umständen sollte zumindest ein Teil des Rätsels damit gelöst werden können ...
Voilà:
GET /cgi-bin/snapshot.cgi HTTP/1.1
Host: 192.168.1.58
Connection: keep-alive
Cache-Control: max-age=0
Authorization: Basic xxxxx
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.82 Mobile Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: de-DE,de;q=0.9,en-DE;q=0.8,en;q=0.7,es-419;q=0.6,es;q=0.5,ca-ES;q=0.4,ca;q=0.3,en-US;q=0.2
Cookie: username=xxxx; DhWebClientSessionID=xxxx
Nimm die
Authorization: Basic XXXXX
und cookie
raus!
und teste auch nochmal so. Das geht (user und password anpassen):
<ftui-image src="http://192.168.1.58/cgi-bin/snapshot.cgi?1&user=USERNAME&password=PASSWORT" interval="300"></ftui-image>
Zitat von: mr_petz am 13 Februar 2022, 01:23:21
und teste auch nochmal so. Das geht (user und password anpassen):
<ftui-image src="http://192.168.1.58/cgi-bin/snapshot.cgi?1&user=USERNAME&password=PASSWORT" interval="300"></ftui-image>
Super das war es, damit geht es jetzt zumindest mit dieser Kamera. Ich werde weitere Kameras testen und sehen ob es damit auch so gut funktioniert. Danke für die Hilfestellung und das testen!
Zitat von: LuGu am 12 Februar 2022, 20:52:52
Wäre noch die Frage @moonsorrox mit welchem Browser er getestet hat.
Gruß LuGu
ich arbeite mit dem Firefox.
Aktuell, aber keine Warnmeldungen, somit kann ich es nicht richtig testen.
Werde einen ganz einfachen Swiper probieren.
Zitat von: moonsorrox am 13 Februar 2022, 15:18:25
ich arbeite mit dem Firefox.
Aktuell, aber keine Warnmeldungen, somit kann ich es nicht richtig testen.
Werde einen ganz einfachen Swiper probieren.
mit dem aktuellen Update funktioniert es auch unter Firefox.
Danke @setstate!
@moonsorrox
Nimm einfach temporär eine Warnzelle wo was los ist zum Testen (z.B. 815085370 Wernigerode da ist der a_count = 4).
Gruß LuGu
Zum Thema swiper kann ich mich dem anschließen:
Zitat von: LuGu am 13 Februar 2022, 18:04:32mit dem aktuellen Update funktioniert es auch unter Firefox.
Mit dem FF 97.0 64Bit auf Linux läuft es nach dem Update (https://github.com/knowthelist/ftui/commit/eab597eb8e2476afcb242d03ba77707d5df722b3) auch besser.
Interessanterweise scheint es Unterschiede zwischen FF 97.0 32Bit für Win10 und FF 97.0 64Bit auf Linux gegeben zu haben - auf dem Windows-Tablet waren die Swiper Probleme größer als gedacht. ::)
Ich werds mit den Warnmeldungen auch beobachten. Danke @setstate.
Meine Wettericons werden verzerrt dargestellt.
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="Wetter_DD_Proplanta:weatherIcon" size="7" ></ftui-weather>
Wie kann man das Seitenverhältnis beeinflussen?
Hast du schon width und height probiert?
height="5em" width="5em"
Ich bin nun ein wenig weiter mit meinem Swiper, aber so richtig weiß ich nicht was ich nun gemacht habe das er aufeinmal läuft.
Kann es mit dem longpoll Attribut zusammen hängen welches ich im Fhem drin habe, ich hatte das im Wiki gelesen und eingestellt, weiß aber das ich es nie drin hatte, momentan ist es egal ob es drin ist oder nicht, es ändert sich nichts.
EDIT:// das folgende Problem habe ich jetzt erst gesehen habe ich nur im Firefox 97.0 (64-Bit) auf meinen Android Tablets funktioniert es und im Chrome Browser habe ich es auch gerade getestet, funktioniert es auch.
Das Problem was jetzt ist, er startet und geht sofort an Ende, d.h. ich habe aktuell 3 Warnmeldungen und er zuckt nur nach der abgelaufenen Zeit.
Ich stelle mal den Code hier ein:
<!-- Auruf- Wetterwarnung DWD - START -->
<ftui-grid-tile id="dwd" row="19" col="9" height="2" width="2" class="transparentFTUI">
<ftui-column [hidden]="DWD:a_count | map('0:true, 1:false, 2:false, 3:false')" width="10%" class="size-2.5">
<ftui-icon [name]="DWD:a_count | map('1:weather-partly-lightning, 2:wetter-warning, 3:wetter-warning, 4:wetter-warning')"
[color]="DWD:a_count | map('1:yellow, 2:darkorange, 3:crimson, 4:darkviolet')"
[class-name]="DWD:a_count | map('4:blink,3:hop,2:')" popup-target="popup-wetterwarnung-dwd" class="size-3">
</ftui-icon>
<ftui-badge color="crimson" [text]="DWD:a_count"></ftui-badge>
</ftui-column>
</ftui-grid-tile>
<!-- Auruf- Wetterwarnung DWD - ENDE -->
<!-- PopUp - Wetterwarnung DWD - ausgelagert -->
<ftui-popup id="popup-wetterwarnung-dwd" timeout="50" width="1100px" height="580px" shape="round">
<header class="size-4"><ftui-label [color]="DWD:a_count | map('1:yellow, 2:darkorange, 3:crimson, 4:darkviolet')">=== Wetterwarnungen ===</ftui-label></header>
<ftui-content file="content-popup-wetterwarnung-dwd.html"></ftui-content>
</ftui-popup>
content-popup-wetterwarnung-dwd.html
<ftui-row>
<ftui-swiper auto-play interval="5">
<ftui-content id="dwd_1" [hidden]="DWD:a_count | step('0:true, 1:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="DWD:a_count | step('0:true, 2:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="DWD:a_count | step('0:true, 3:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="DWD:a_count | step('0:true, 4:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="DWD:a_count | step('0:true, 5:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="DWD:a_count | step('0:true, 6:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="DWD:a_count | step('0:true, 7:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="DWD:a_count | step('0:true, 8:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="DWD:a_count | step('0:true, 9:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="DWD:a_count | step('0:true, 10:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="DWD:a_count | step('0:true, 11:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="DWD:a_count | step('0:true, 12:false')" file="content-popup-wetterwarung-dwd-swiper.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>
content-popup-wetterwarung-dwd-swiper.html
<ftui-column>
<ftui-row style="padding:2%;">
<ftui-row style="padding:1%;" [color]="DWD:{{warn-number}}_severity | map('Minor:_dwd_minor, Moderate:_dwd_moderate, Severe:_dwd_severe, Extreme:_dwd_extreme')"
[class-name]="DWD:{{warn-number}}_urgency | map('Future:_dwd_vorwarnung')">
<ftui-column width="15%" color="darkblue">
<ftui-row height="70%">
<ftui-image base="http://10.0.0.50:8083/fhem/ftui_neu/icons/warn/" [src]="DWD:{{warn-number}}_eventDesc | map('`.*BÖEN`:warn_icons_sturm.png, `.*TAUWETTER`:warn_icons_tauwetter.png, .*SCHNEE.*:warn_icons_schnee.png, .*FROST.*:warn_icons_frost.png, GLÄTTE|GLATTEIS:warn_icons_glatteis.png, `.*REGEN`:warn_icons_regen.png')" color="_grau3" width="80%" height="80%" nocache></ftui-image>
<!--ftui-image base="http://10.0.0.50:8083/fhem/ftui_neu/icons/warn/" [src]="DWD:{{warn-number}}_eventDesc | map('`.*BÖEN`:warn_icons_sturm.png, `.*NEBEL`:warn_icons_nebel.png, `.*TAUWETTER`:warn_icons_tauwetter.png, .*SCHNEE.*:warn_icons_schnee.png, .*FROST.*:warn_icons_frost.png, .*GLÄTTE|GLATTEIS:warn_icons_glatteis.png, `.*REGEN`:warn_icons_regen.png, `.*STURM`:warn_icons_sturm.png, `.*GEWITTER`:warn_icons_gewitter.png, `.*UV-INDEX`:warn_icons_uv.png, `.*HITZE`:warn_icons_hitze.png')" color="_grau3" width="80%" height="80%" nocache></ftui-image-->
</ftui-row>
<ftui-row>
<ftui-image color="" width="80%" height="60%" src="https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png" nocache></ftui-image>
</ftui-row>
</ftui-column>
<ftui-column width="85%" color="darkblue">
<ftui-label color="crimson" style="white-space: normal;" class="_dwd_description_headline" [text]="DWD:{{warn-number}}_headline"></ftui-label>
<ftui-label color="white" style="white-space: normal;" class="_dwd_description_style" [text]="DWD:{{warn-number}}_description"></ftui-label>
<ftui-label style="white-space: normal;" class="_dwd_instruction_style" [text]="DWD:{{warn-number}}_instruction" [hidden]="DWD:{{warn-number}}_instruction | map(':true, .*:false')"></ftui-label>
<ftui-row class="size-2" height="5%" align-items="center">
<ftui-label>Gültig vom </ftui-label>
<ftui-label color="MediumSpringGreen" [text]="DWD:{{warn-number}}_onset | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<ftui-label> bis </ftui-label>
<ftui-label color="MediumSpringGreen" [text]="DWD:{{warn-number}}_expires | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<ftui-label> - Letztes Update: </ftui-label>
<ftui-label color="MediumSpringGreen" [text]="DWD:a_time | toDate() | format('DD.MM. hh:mm')"></ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
</ftui-row>
</ftui-column>
Zitatheight="5em" width="8em"
Das funktioniert nicht. Die Bildchen sind rechteckig und werden in ein Quadrat gezwängt. Da ist irgendwie eine Blockade im ftui-weather Modul.
Zitat von: moonsorrox am 14 Februar 2022, 00:33:37
Ich bin nun ein wenig weiter mit meinem Swiper, aber so richtig weiß ich nicht was ich nun gemacht habe das er aufeinmal läuft.
Kann es mit dem longpoll Attribut zusammen hängen welches ich im Fhem drin habe, ich hatte das im Wiki gelesen und eingestellt, weiß aber das ich es nie drin hatte, momentan ist es egal ob es drin ist oder nicht, es ändert sich nichts.
EDIT:// das folgende Problem habe ich jetzt erst gesehen habe ich nur im Firefox 97.0 (64-Bit) auf meinen Android Tablets funktioniert es und im Chrome Browser habe ich es auch gerade getestet, funktioniert es auch.
Das Problem was jetzt ist, er startet und geht sofort an Ende, d.h. ich habe aktuell 3 Warnmeldungen und er zuckt nur nach der abgelaufenen Zeit.
@moonsorrox
Hast du das aktuelle Update installiert?
Danach konnte ich bei mir beim Swiper keine Fehler mehr erkennen, auch nicht bei Firefox.
Gruß LuGu
Zitat von: stefan-dd am 14 Februar 2022, 08:18:39
Das funktioniert nicht. Die Bildchen sind rechteckig und werden in ein Quadrat gezwängt. Da ist irgendwie eine Blockade im ftui-weather Modul.
schau hier:
https://forum.fhem.de/index.php/topic,115259.msg1185845.html#msg1185845
LG mr_petz
Moinsen!
Hat jemand beim Update eine ähnliche Fehlermeldung?
2022.02.14 14:37:52.915 1 : Got 21486 bytes for www/ftui/examples/mobile_full.html, expected 21495
2022.02.14 14:37:52.915 1 : aborting.
Gruß
Sailor
Zitat von: mr_petz am 14 Februar 2022, 11:04:33
schau hier:
https://forum.fhem.de/index.php/topic,115259.msg1185845.html#msg1185845
LG mr_petz
Dann habe ich das eben mal professionell gelöst ... 8)
<ftui-grid-tile row="2" col="1" height="1" width="1" shape="round">
<header>KLEINKLIMA</header>
<ftui-weather
icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
condition="https://www.proplanta.de/wetterdaten/images/symbole/t1.gif"></ftui-weather>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="1" height="1" width="1" shape="round">
<header>SIZE</header>
<ftui-weather size="6"
icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
condition="https://www.proplanta.de/wetterdaten/images/symbole/t1.gif"></ftui-weather>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="1" height="1" width="1" shape="round">
<header>CROP</header>
<ftui-weather size="3" crop shape="round"
icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
condition="https://www.proplanta.de/wetterdaten/images/symbole/t1.gif"></ftui-weather>
</ftui-grid-tile>
Zitat von: setstate am 14 Februar 2022, 14:41:37
Dann habe ich das eben mal professionell gelöst ... 8)
Du bist eben ein guter ... :D
LG mr_petz
Danke!
@omnior
Habe es endlich rausbekommen 8)
Für deine 2.Kamera funktioniert folgender Linkaufbau:
http://IP:PORT/jpgmulreq/1/image.jpg?usr=USER&pwd=PASSWORD
Kannst du so einbinden:
<ftui-image src="http://IP:PORT/jpgmulreq/1/image.jpg?usr=USER&pwd=PASSWORD" interval="10" nocache></ftui-image>
Noch eine Info:
Ich weis nicht ob in FHEM ein Modul existiert für deine Steurung vom PTZ, aber hier wäre ein Beispielcommand (stop) über die url:
entweder mit cgi oder form (cgi ist hier besser)
http://user:pass@IP:PORT/cgi/setPTZCfg/?command=0
0 to stop
1 for up
2 for down
3 for left
4 for right
5 for bottom left
6 for up left
7 for up right
8 for bottom right
9 for open Iris
10 for close Iris
11 for Focus near
12 for Focus far
13 for Zoom in
14 for Zoom out
und
//Horizontal Patrol//
/cgi/setSpecialFunc?command=1&flag=2
/cgi/tourSet?existFlag=0&flag=5&language=en&presetNum=0 -> call Tour
/cgi/presetSet?existFlag=1&flag=4&language=en&presetNum=1;
/cgi/reboot?language=en
/cgi/presetSet?flag=4&existFlag=1&language=cn&presetNum=0 --> Gehe zu Pos 1
/cgi/presetSet?flag=4&existFlag=1&language=cn&presetNum=4 --> Gehe zu Pos 5
/cgi/setPTZCfg?ZFSpeed=0&PTSpeed=0&panSpeed=2&tiltSpeed=2&command=13 --> Zoom in
/cgi/setPTZCfg?ZFSpeed=0&PTSpeed=0&panSpeed=2&tiltSpeed=2&command=14 --> Zoom out4
/cgi/IRset?IRmode=3&c2bwthr=20&bw2cthr=70&IRenabled=1&IRdelay=3 --> IR-DAY
Die commands sind aufsteigend 1-xx.
Liste der Attribute vom ptz:
command,
ZFSpeed,
PTSpeed,
panSpeed,
tiltSpeed,
focusSpeed,
zoomSpeed,
Kannst es ja mal testen.
Das konnte ich noch herausfinden.
Edit:
Ich habe deine cgi gefunden:
CGI.pdf (https://apexis.cz/download/CGI.pdf)
Beispiel. So geht es auch für ptz:
/cgi/ptz_set?Channel=1&Group=PTZCtrlInfo&Stop=0
/cgi/ptz_set?Channel=1&Group=PTZCtrlInfo&Direction=4 ->right
LG mr_petz
Die Hintergrundfarbe wurde geändert, wie komme ich zur alten Hintergrundfarbe? Wie kann ich die Einstellungen überschreiben?
root {
--dark: #333333; !important;
}
Zitat von: stefan-dd am 15 Februar 2022, 23:45:26
Die Hintergrundfarbe wurde geändert, wie komme ich zur alten Hintergrundfarbe? Wie kann ich die Einstellungen überschreiben?
root {
--dark: #333333; !important;
}
Wie und wo und was willst du genau ändern? Die Fragestellung ist hier unzureichend!
LG
Seit dem letzten Update kann ich in Popups keine pdf-Files mehr automatisch oeffnen.
Es ist nur ein Platzhalter da; wenn man den anklickt, oeffnet sich das pdf auf einer neuen Seite.
Das soll nicht so sein.
<ftui-popup id="pop16" width="100%" height="100%" timeout="0">
<header>RANDABERG</header>
<iframe src="https://www.yr.no/nb/utskrift/v%C3%A6rvarsel/1-24780/Norge/Rogaland/Randaberg/Randaberg" width="100%" height="100%"></iframe>
</ftui-popup>
Was tun ?
Zitat von: Wolfgang Hochweller am 18 Februar 2022, 09:53:08
Seit dem letzten Update kann ich in Popups keine pdf-Files mehr automatisch oeffnen.
Es ist nur ein Platzhalter da; wenn man den anklickt, oeffnet sich das pdf auf einer neuen Seite.
Das soll nicht so sein.
<ftui-popup id="pop16" width="100%" height="100%" timeout="0">
<header>RANDABERG</header>
<iframe src="https://www.yr.no/nb/utskrift/v%C3%A6rvarsel/1-24780/Norge/Rogaland/Randaberg/Randaberg" width="100%" height="100%"></iframe>
</ftui-popup>
Was tun ?
unter Edge, Chrome und FF kann ich das nicht bestätigen (hier in meiner Testumgebung).
Ich kann immer über einem ftui-button öffnen und wird mir sofort angezeigt.
Auch getriggert funktioniert es bei mir.
Das einzige was nach dem Update hier in meiner Testumgebung auftritt ist, dass immer beim ersten Start der Seiten (unter Firefox) ein:
window.ftuiApp.setTheme is not a function at main (ftui.js:8)
und:
ftuiApp is not defined
kommt. Nicht als Toast sondern in der Konsole.
LG
ist es eigentlich normal wenn ich ein Update mit
update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
mache das er mir nach dem update und erneuter Abfrage diese Dateien immer noch anzeigt?
normal sollten die doch nach dem Update weg sein und er zeigt an "nothing to do..."
Zitat von: moonsorrox am 18 Februar 2022, 18:11:24
normal sollten die doch nach dem Update weg sein und er zeigt an "nothing to do..."
So ist es zumindest bei mir
Downloading https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
ftui
nothing to do...
Wie kann ich in einem ftui-label mehrere device:readings oder auch Kombinationen mit festen Zeichen in einem [text]="..." miteinander verketten? Oder geht das gar nicht?
Zitat von: omnior am 18 Februar 2022, 20:03:53
Wie kann ich in einem ftui-label mehrere device:readings oder auch Kombinationen mit festen Zeichen in einem [text]="..." miteinander verketten? Oder geht das gar nicht?
du brauchst nur zwei ftui-label mit <span> verbinden. Dann werden sie nebeneinander angeordnet.
<span>
<ftui-label [text]="Sonos_Terasse:currentArtist"></ftui-label> -
<ftui-label [text]="Sonos_Terasse:currentTitle"></ftui-label>
</span>
Ohne <span> werden die Label untereinander angeordnet.
Zitat von: setstate am 18 Februar 2022, 20:21:24
du brauchst nur zwei ftui-label mit <span> verbinden. Dann werden sie nebeneinander angeordnet.
perfekt, vielen herzlichen Dank!
@mr_petz:
Es ist komplizierter, da es nur Androideinheiten betrifft.
Auf Handys sieht man obiges Verhalten,
auf Tablets ist das Popup leer.
Beides ist nicht ok.
habe heute den Fehler gefunden weshalb er das Update nicht zu Ende gemacht hat für FTUI
Im log beobachtet
./www/ftui/examples/contents/content-warn.html failed: Permission denied, trying to restore the previous version and aborting the update
Hallo,
habe nochmal eine Frage. Ich nutze einen Swiper, der so ähnlich ist wie der auf der Beispielseite:
<ftui-icon name="chevron-left" onclick="swiper2.back()"></ftui-icon>
<ftui-icon name="garage-variant" onclick="swiper2.value = 'sw2_2'"></ftui-icon>
<ftui-icon name="projector" onclick="swiper2.value = 'sw2_5'"></ftui-icon>
<ftui-icon name="chevron-right" onclick="swiper2.next()"></ftui-icon>
Ich will da die mittleren Icons nicht nur dazu nutzen, den Swiper zu steuern, sondern auch den Zustand anzuzeigen, also sprich: Das Projektor-Icon soll die Primary-Farbe bekommen, wenn swiper2.value = sw2_5 ist, bei einem anderen swiper2.value-Wert soll es die Light-Farbe kriegen - entsprechend dann auch so für das Garage-Icon.
Habe da jetzt jede Menge probiert, aber war bisher nicht erfolgreich. Könnt Ihr mir da einen Tipp geben? Danke Euch schon mal! :-)
Wenn es vom einem Device kommt kannst du die icon-color mappen:
[color]="device | map('sw2_5:primary,.*:currentColor')"
LG mr_petz
Edit:
eckige Klammer vergessen :o
ps. Du kannst auch @click verwenden.
swiper2 ist nur die id des Swiper, keine Reading, was man beim Binding benutzen kann.
Man müsste dem Swiper erst ein passendes Binding verpassen
entweder Richtung FHEM
<ftui-swiper id="swiper2" [(value)]=dummySwiper >
oder rein lokal
<ftui-swiper id="swiper2" [(value)]=local:swiper2 >
Dann kann man die Änderung auch als Farbänderung nutzen.
[color]="local:swiper2 | map('sw2_5:primary,.*:currentColor')"
Prima, funktioniert mit dem lokalen Binding! Großes Dankeschön an Euch beide! :-)
Ich benutze die Icons quasi als "Überschrift", um zu zeigen, welche Seite (sagt man das so?) des Swiper gerade aktiv ist. Ist natürlich keine essenzielle Funktion, aber eine nette optische Spielerei. Bei mir sieht es jetzt so aus wie in dem angehängten Screenshot.
Ahh... jetzt verstehe ich dein vorhaben...
Schön das es funktioniert..
LG
@setstate
ftui-label besitzt neuerdings zwei (scheinbar) gleiche Properties: text und value.
value nutze ich bislang nirgendwo und ist daher immer leer;
trotzdem kommt es vor, dass das Attribut value als "changed" gemeldet wird und den eigentlich darzustellenden Wert gemäß text überschreibt bzw. "erdet" ...
Um das Problem zu "neutralisieren", muss momentan value wie text befüllt werden ...
Zwei Fragen ergeben sich:
- Wozu dient die Property value ?
- Ist dies nur ein Test oder fehlt noch ein Teil der Umsetzung ?
ich habe mich immer wieder erwischt, bei Label value zu benutzen und mich gewundert, warum es nicht funktioniert.
Deshalb habe ich value parallel zu text eingebaut. Wenn das aber Probleme macht, schmeiße ich es wieder raus.
@setstate
Danke für die prompte und einleuchtende Rückinfo ... value wäre danach ja fast die einheitlichere Benamung für das datenliefernde Attribut, aber würde für großen Änderungsaufwand sorgen ... ftui-label wird bei Allen sehr gerne genutzt ...
Nochmal zu dem Problem mit dem Anzeigen von PDF's :
Ein unglueckliches Zusammentreffen, will sagen, ein Google-Problem fuer Android.
Ein Onlinedisplay eines PDF ist im Androidchrome nicht (mehr ) so einfach zu realisieren.
Immer wieder das File downzuloaden, ist natuerlich nicht wirklich eine Option.
Moin,
vermutlich ist es ja eine "Anfängerfrage".
Ist es möglich einen Text, welcher mit scroll automatisch umgebrochen wird dann zentriert darzustellen.
Ein align-items="center" im ftui-label bzw. in ftui-row wird ignoriert...
Danke im Voraus
MDietrich
soweit ich mich erinnern kann, gibt es hier einige die in FTUI3 diese 4-Tageswetter Anzeige nutzen.
Ich weiß leider nicht mehr wer dies hatte.
diese Anzeige hat es mir jetzt zerrissen, wahrscheinlich auch schon länger denn ich hatte schon länger nicht mehr drauf geschaut.
Die Popups sind alle viel zu klein obwohl sie in der Größenangabe in der Datei recht groß sind, aber wenn ich diese größer mache wird der Inhalt auch größer und damit noch schlechter zu sehen sein.
Das ist der Originalcode wie er bei mir immer drin war, nur klappt das so nicht mehr, welche Angabe fehlt mir damit das wieder paßt.?
Das alles was in der ersten ftui-row drin ist paßt auch noch, nur die Popups die sich auf dem Icon öffnen da paßt gar nichts mehr und das Popup verdeckt die 4-Tagesansicht komplett.
Wenn ich dazu im github schaue ist z.B. Pop1 oder auch Popup5 ohne Größenangaben schon viel größer als meins mit Höhe und Weite Angaben
<!-- 4 Tages Wetter - START-->
<ftui-row>
<ftui-column margin="0 0 0 1em">
<ftui-label color="SteelBlue" class="size-2">Heute</ftui-label>
<ftui-weather popup-target="wetter_heute" class="size-4" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc0_weatherDay"></ftui-weather>
<ftui-label class="size-2" [text]="Proplanta:fc0_weatherDay"></ftui-label>
<ftui-row class="w-80">
<ftui-label [text]="Proplanta:fc0_tempMin"><span slot="unit">°C</span></ftui-label>
<ftui-label [text]="Proplanta:fc0_tempMax" class="size-3 thin"><span class="mini" slot="unit">°C</span></ftui-label>
</ftui-row>
<ftui-row class="w-80">
<ftui-label [text]="Proplanta:fc0_chOfRainDay" color="SteelBlue"><span slot="unit">%</span></ftui-label>
<ftui-label [text]="Proplanta:fc0_rain" color="SteelBlue"><span slot="unit">mm</span></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-label color="darkorange" class="size-2">Morgen</ftui-label>
<ftui-weather popup-target="wetter_morgen" class="size-4" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc1_weatherDay"></ftui-weather>
<!--ftui-weather popup-target="w_morgen" class="size-4" [condition]="Proplanta:fc1_weatherDay"></ftui-weather-->
<ftui-label class="size-2" [text]="Proplanta:fc1_weatherDay"></ftui-label>
<ftui-row class="w-80">
<ftui-label [text]="Proplanta:fc1_tempMin"><span slot="unit">°C</span></ftui-label>
<ftui-label [text]="Proplanta:fc1_tempMax" class="size-3 thin"><span slot="unit">°C</span></ftui-label>
</ftui-row>
<ftui-row class="w-80">
<ftui-label [text]="Proplanta:fc1_chOfRainDay" color="SteelBlue"><span slot="unit">%</span></ftui-label>
<ftui-label [text]="Proplanta:fc1_rain" color="SteelBlue"><span slot="unit">mm</span></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-label class="size-2" [text]="Proplanta:fc2_date | toDate() | format('eeee')"></ftui-label>
<ftui-weather popup-target="wetter_uebermorgen" class="size-4" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc2_weatherDay"></ftui-weather>
<!--ftui-weather popup-target="w_uebermorgen" class="size-4" [condition]="Proplanta:fc2_weatherDay"></ftui-weather-->
<ftui-label class="size-2" [text]="Proplanta:fc2_weatherDay"></ftui-label>
<ftui-row class="w-80">
<ftui-label [text]="Proplanta:fc2_tempMin"><span slot="unit">°C</span></ftui-label>
<ftui-label [text]="Proplanta:fc2_tempMax" class="size-3 thin"><span slot="unit">°C</span></ftui-label>
</ftui-row>
<ftui-row class="w-80">
<ftui-label [text]="Proplanta:fc2_chOfRainDay" color="SteelBlue"><span slot="unit">%</span></ftui-label>
<ftui-label [text]="Proplanta:fc2_rain" color="SteelBlue"><span slot="unit">mm</span></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-label class="size-2" [text]="Proplanta:fc3_date | toDate() | format('eeee')"></ftui-label>
<ftui-weather popup-target="wetter_tag4" class="size-4" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc3_weatherDay"></ftui-weather>
<!--ftui-weather popup-target="w_tag4" class="size-4" [condition]="Proplanta:fc3_weatherDay"></ftui-weather-->
<ftui-label class="size-2" [text]="Proplanta:fc3_weatherDay"></ftui-label>
<ftui-row class="w-80">
<ftui-label [text]="Proplanta:fc3_tempMin"><span slot="unit">°C</span></ftui-label>
<ftui-label [text]="Proplanta:fc3_tempMax" class="size-3 thin"><span slot="unit">°C</span></ftui-label>
</ftui-row>
<ftui-row class="w-80">
<ftui-label [text]="Proplanta:fc3_chOfRainDay" color="SteelBlue"><span slot="unit">%</span></ftui-label>
<ftui-label [text]="Proplanta:fc3_rain" color="SteelBlue"><span slot="unit">mm</span></ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
<!-- 4 Tages Wetter - ENDE -->
<!-- PopUps Wetter - START -->
<!-- Heute -->
<ftui-popup id="wetter_heute" width="820px" height="420px" timeout="20" position="top" shape="round">
<header class="size-2 thin">Wetter Tagesverlauf - <ftui-label [text]="Proplanta:fc0_date | toDate() | format('eeee')" color="mediumslateblue"></ftui-label></header>
<ftui-row>
<ftui-column color="darkgray">
<ftui-label text="00:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc0_weather00"></ftui-weather>
<ftui-label [text]="Proplanta:fc0_weather00"></ftui-label>
<ftui-label [text]="Proplanta:fc0_temp00" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc0_wind00" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc0_windDir00" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc0_rain00" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="03:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc0_weather03"></ftui-weather>
<ftui-label [text]="Proplanta:fc0_weather03"></ftui-label>
<ftui-label [text]="Proplanta:fc0_temp03" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc0_wind03" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc0_windDir03" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc0_rain03" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="06:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc0_weather06"></ftui-weather>
<ftui-label [text]="Proplanta:fc0_weather06"></ftui-label>
<ftui-label [text]="Proplanta:fc0_temp06" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc0_wind06" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc0_windDir06" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc0_rain06" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="09:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc0_weather09"></ftui-weather>
<ftui-label [text]="Proplanta:fc0_weather09"></ftui-label>
<ftui-label [text]="Proplanta:fc0_temp09" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc0_wind09" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc0_windDir09" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc0_rain09" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="12:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc0_weather12"></ftui-weather>
<ftui-label [text]="Proplanta:fc0_weather12"></ftui-label>
<ftui-label [text]="Proplanta:fc0_temp12" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc0_wind12" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc0_windDir12" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc0_rain12" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="15:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc0_weather15"></ftui-weather>
<ftui-label [text]="Proplanta:fc0_weather15"></ftui-label>
<ftui-label [text]="Proplanta:fc0_temp15" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc0_wind15" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc0_windDir15" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc0_rain15" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="18:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc0_weather18"></ftui-weather>
<ftui-label [text]="Proplanta:fc0_weather18"></ftui-label>
<ftui-label [text]="Proplanta:fc0_temp18" unit="°C"></ftui-label><ftui-label [text]="Proplanta:fc0_wind18" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc0_windDir18" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc0_rain18" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="21:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc0_weather21"></ftui-weather>
<ftui-label [text]="Proplanta:fc0_weather21"></ftui-label>
<ftui-label [text]="Proplanta:fc0_temp21" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc0_wind21" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc0_windDir21" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc0_rain21" unit="%"></ftui-label></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-popup>
<!-- Morgen -->
<ftui-popup id="wetter_morgen" width="820px" height="420px" timeout="20" position="top" shape="round">
<header class="size-2 thin">Wetter Tagesverlauf - <ftui-label [text]="Proplanta:fc1_date | toDate() | format('eeee')" color="darkorange"></ftui-label></header>
<ftui-row>
<ftui-column color="darkgray">
<ftui-label text="00:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc1_weather00"></ftui-weather>
<ftui-label [text]="Proplanta:fc1_weather00"></ftui-label>
<ftui-label [text]="Proplanta:fc1_temp00" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc1_wind00" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc1_windDir00" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc1_rain00" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="03:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc1_weather03"></ftui-weather>
<ftui-label [text]="Proplanta:fc1_weather03"></ftui-label>
<ftui-label [text]="Proplanta:fc1_temp03" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc1_wind03" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc1_windDir03" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc1_rain03" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="06:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc1_weather06"></ftui-weather>
<ftui-label [text]="Proplanta:fc1_weather06"></ftui-label>
<ftui-label [text]="Proplanta:fc1_temp06" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc1_wind06" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc1_windDir06" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc1_rain06" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="09:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc1_weather09"></ftui-weather>
<ftui-label [text]="Proplanta:fc1_weather09"></ftui-label>
<ftui-label [text]="Proplanta:fc1_temp09" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc1_wind09" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc1_windDir09" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc1_rain09" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="12:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc1_weather12"></ftui-weather>
<ftui-label [text]="Proplanta:fc1_weather12"></ftui-label>
<ftui-label [text]="Proplanta:fc1_temp12" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc1_wind12" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc1_windDir12" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc1_rain12" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="15:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc1_weather15"></ftui-weather>
<ftui-label [text]="Proplanta:fc1_weather15"></ftui-label>
<ftui-label [text]="Proplanta:fc1_temp15" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc1_wind15" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc1_windDir15" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc1_rain15" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="18:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc1_weather18"></ftui-weather>
<ftui-label [text]="Proplanta:fc1_weather18"></ftui-label>
<ftui-label [text]="Proplanta:fc1_temp18" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc1_wind18" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc1_windDir18" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc1_rain18" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="21:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc1_weather21"></ftui-weather>
<ftui-label [text]="Proplanta:fc1_weather21"></ftui-label>
<ftui-label [text]="Proplanta:fc1_temp21" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc1_wind21" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc1_windDir21" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc1_rain21" unit="%"></ftui-label></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-popup>
<!-- Übermorgen -->
<ftui-popup id="wetter_uebermorgen" width="750px" height="380px" timeout="20" position="top" shape="round">
<header class="size-2 thin">Wetter Tagesverlauf - <ftui-label [text]="Proplanta:fc2_date | toDate() | format('eeee')" color="white"></ftui-label></header>
<ftui-row>
<ftui-column color="darkgray">
<ftui-label text="00:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc2_weather00"></ftui-weather>
<ftui-label [text]="Proplanta:fc2_weather00"></ftui-label>
<ftui-label [text]="Proplanta:fc2_temp00" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc2_wind00" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc2_windDir00" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc2_rain00" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="03:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc2_weather03"></ftui-weather>
<ftui-label [text]="Proplanta:fc2_weather03"></ftui-label>
<ftui-label [text]="Proplanta:fc2_temp03" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc2_wind03" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc2_windDir03" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc2_rain03" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="06:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc2_weather06"></ftui-weather>
<ftui-label [text]="Proplanta:fc2_weather06"></ftui-label>
<ftui-label [text]="Proplanta:fc2_temp06" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc2_wind06" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc2_windDir06" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc2_rain06" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="09:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc2_weather09"></ftui-weather>
<ftui-label [text]="Proplanta:fc2_weather09"></ftui-label>
<ftui-label [text]="Proplanta:fc2_temp09" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc2_wind09" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc2_windDir09" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc2_rain09" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="12:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc2_weather12"></ftui-weather>
<ftui-label [text]="Proplanta:fc2_weather12"></ftui-label>
<ftui-label [text]="Proplanta:fc2_temp12" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc2_wind12" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc2_windDir12" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc2_rain12" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="15:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc2_weather15"></ftui-weather>
<ftui-label [text]="Proplanta:fc2_weather15"></ftui-label>
<ftui-label [text]="Proplanta:fc2_temp15" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc2_wind15" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc2_windDir15" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc2_rain15" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="18:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc2_weather18"></ftui-weather>
<ftui-label [text]="Proplanta:fc2_weather18"></ftui-label>
<ftui-label [text]="Proplanta:fc2_temp18" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc2_wind18" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc2_windDir18" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc2_rain18" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="21:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc2_weather21"></ftui-weather>
<ftui-label [text]="Proplanta:fc2_weather21"></ftui-label>
<ftui-label [text]="Proplanta:fc2_temp21" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc2_wind21" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc2_windDir21" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc2_rain21" unit="%"></ftui-label></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-popup>
<!-- 4. Tag -->
<ftui-popup id="wetter_tag4" width="750px" height="380px" timeout="20" position="top" shape="round">
<header class="size-2 thin">Wetter Tagesverlauf - <ftui-label [text]="Proplanta:fc3_date | toDate() | format('eeee')" color="MediumSpringGreen"></ftui-label></header>
<ftui-row>
<ftui-column color="darkgray">
<ftui-label text="00:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc3_weather00"></ftui-weather>
<ftui-label [text]="Proplanta:fc3_weather00"></ftui-label>
<ftui-label [text]="Proplanta:fc3_temp00" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc3_wind00" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc3_windDir00" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc3_rain00" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="03:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc3_weather03"></ftui-weather>
<ftui-label [text]="Proplanta:fc3_weather03"></ftui-label>
<ftui-label [text]="Proplanta:fc3_temp03" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc3_wind03" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc3_windDir03" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc3_rain03" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="06:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc3_weather06"></ftui-weather>
<ftui-label [text]="Proplanta:fc3_weather06"></ftui-label>
<ftui-label [text]="Proplanta:fc3_temp06" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc3_wind06" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc3_windDir06" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc3_rain06" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="09:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc3_weather09"></ftui-weather>
<ftui-label [text]="Proplanta:fc3_weather09"></ftui-label>
<ftui-label [text]="Proplanta:fc3_temp09" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc3_wind09" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc3_windDir09" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc3_rain09" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="12:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc3_weather12"></ftui-weather>
<ftui-label [text]="Proplanta:fc3_weather12"></ftui-label>
<ftui-label [text]="Proplanta:fc3_temp12" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc3_wind12" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc3_windDir12" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc3_rain12" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="15:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc3_weather15"></ftui-weather>
<ftui-label [text]="Proplanta:fc3_weather15"></ftui-label>
<ftui-label [text]="Proplanta:fc3_temp15" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc3_wind15" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc3_windDir15" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc3_rain15" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkgray">
<ftui-label text="18:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc3_weather18"></ftui-weather>
<ftui-label [text]="Proplanta:fc3_weather18"></ftui-label>
<ftui-label [text]="Proplanta:fc3_temp18" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc3_wind18" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc3_windDir18" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc3_rain18" unit="%"></ftui-label></ftui-icon>
</ftui-column>
<ftui-column color="darkblue">
<ftui-label text="21:00 Uhr"></ftui-label>
<ftui-weather class="size-3" icon-set="kleinklima" provider="proplanta" [condition]="Proplanta:fc3_weather21"></ftui-weather>
<ftui-label [text]="Proplanta:fc3_weather21"></ftui-label>
<ftui-label [text]="Proplanta:fc3_temp21" unit="°C"></ftui-label>
<ftui-label [text]="Proplanta:fc3_wind21" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="Proplanta:fc3_windDir21" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle></ftui-knob>
<ftui-icon name="umbrella"><ftui-label [text]="Proplanta:fc3_rain21" unit="%"></ftui-label></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-popup>
<!-- PopUps Wetter - ENDE -->
Ich benutze zwar nicht die 4 Tage Wetteranzeige, sondern eine Stundenanzeige, aber das Prinzip dürfte dasselbe sein.
Ich habe das mittels content files gelöst, das ist einfach etwas übersichtlicher, ich führe es mal auf, vielleicht kommst Du dann dem Fehler auf die Spur.
Popup wird so aufgerufen:
<ftui-weather popup-target="w_heute" class="size-2" [condition]="proplanta:fc0_weatherDay" icon-set="meteocons"></ftui-weather>
<ftui-content file="content/wetter_popup.html" callup="w_heute" tag="fc0"></ftui-content>
wetter_popup.html sieht dann so aus:
<ftui-popup id="{{callup}}" width="750px" height="400px" timeout="20" shape="round" position="top">
<header>Wetter Tagesverlauf (<ftui-label [text]="proplanta:{{tag}}_date | toDate() | format('eeee')"></ftui-label>)</header>
<ftui-row>
<ftui-content file="content/vorhersage.html" color="medium" fc="{{tag}}" uhrzeit="00:00 Uhr" wetter="weather00" temperatur="temp00" wind="wind00" chofrain="chOfRain00" regen="rain00" winddir="windDir00"></ftui-content>
<ftui-content file="content/vorhersage.html" color="dark" fc="{{tag}}" uhrzeit="03:00 Uhr" wetter="weather03" temperatur="temp03" wind="wind03" chofrain="chOfRain03" regen="rain03" winddir="windDir03"></ftui-content>
<ftui-content file="content/vorhersage.html" color="medium" fc="{{tag}}" uhrzeit="06:00 Uhr" wetter="weather06" temperatur="temp06" wind="wind06" chofrain="chOfRain06" regen="rain06" winddir="windDir06"></ftui-content>
<ftui-content file="content/vorhersage.html" color="dark" fc="{{tag}}" uhrzeit="09:00 Uhr" wetter="weather09" temperatur="temp09" wind="wind09" chofrain="chOfRain09" regen="rain09" winddir="windDir09"></ftui-content>
<ftui-content file="content/vorhersage.html" color="medium" fc="{{tag}}" uhrzeit="12:00 Uhr" wetter="weather12" temperatur="temp12" wind="wind12" chofrain="chOfRain12" regen="rain12" winddir="windDir12"></ftui-content>
<ftui-content file="content/vorhersage.html" color="dark" fc="{{tag}}" uhrzeit="15:00 Uhr" wetter="weather15" temperatur="temp15" wind="wind15" chofrain="chOfRain15" regen="rain15" winddir="windDir15"></ftui-content>
<ftui-content file="content/vorhersage.html" color="medium" fc="{{tag}}" uhrzeit="18:00 Uhr" wetter="weather18" temperatur="temp18" wind="wind18" chofrain="chOfRain18" regen="rain18" winddir="windDir18"></ftui-content>
<ftui-content file="content/vorhersage.html" color="dark" fc="{{tag}}" uhrzeit="21:00 Uhr" wetter="weather21" temperatur="temp21" wind="wind21" chofrain="chOfRain21" regen="rain21" winddir="windDir21"></ftui-content>
</ftui-row>
</ftui-popup>
Und die vorhersage.html so:
<ftui-column color="{{medium}}">
<ftui-label text="{{uhrzeit}}"></ftui-label>
<ftui-weather class="size-3" [condition]="proplanta:{{fc}}_{{wetter}}" icon-set="meteocons"></ftui-weather>
<ftui-label [text]="proplanta:{{fc}}_{{wetter}}"></ftui-label>
<ftui-label [text]="proplanta:{{fc}}_{{temperatur}}" unit="°C"></ftui-label>
<ftui-label [text]="proplanta:{{fc}}_{{wind}}" unit="km/h"></ftui-label>
<ftui-knob id="myKnob1" [(value)]="proplanta:{{fc}}_{{winddir}}" min="0" max="360" start-angle="-90" end-angle="270" offset-y="" height="40" width="40" stroke-width="2" has-scale has-needle readonly></ftui-knob>
<ftui-row height="10%">
<ftui-icon name="umbrella"></ftui-icon><ftui-label [text]="proplanta:{{fc}}_{{chofrain}}" unit="%"></ftui-label>
</ftui-row>
<ftui-row height="10%">
<ftui-icon name="rainy1"></ftui-icon><ftui-label [text]="proplanta:{{fc}}_{{regen}}" unit="mm"></ftui-label>
</ftui-row>
</ftui-column>
Das sieht dann so aus wie unten angehängt.
Ich wollte vorhin schon deinen Namen schreiben, weil ich es noch in Erinnerung hatte, das du diese Ansicht hast :D ;)
Ja es sind bei mir 4 Tage und dann im Popup natürlich die Stunden, da hast du absolut Recht, hätte mich etwas besser ausdrücken sollen
OK ich werde das mal testen
Zitat von: MDietrich am 22 Februar 2022, 16:40:47
Moin,
vermutlich ist es ja eine "Anfängerfrage".
Ist es möglich einen Text, welcher mit scroll automatisch umgebrochen wird dann zentriert darzustellen.
Ein align-items="center" im ftui-label bzw. in ftui-row wird ignoriert...
Danke im Voraus
MDietrich
text-align="center" fehlte noch => Update holen! Bis jetzt gab es nur left und right.
Hello setstate
Ist es möglich in der ftui.app.js ein
this.config.toastPosition = this.getMetaString('toast_position', );
hinzuzufügen? Dann kann ich die Position der Meldungen steuern.
Besten Dank
Grüsse
Zitat von: SirMarco am 22 Februar 2022, 20:59:02
this.config.toastPosition = this.getMetaString('toast_position', );
Wo ist das hin? Bis jetzt dachte ich, das ist drin.
Habe ich jetzt wieder eingebaut
Zitat von: mr_petz am 18 Februar 2022, 12:40:30
...
Das einzige was nach dem Update hier in meiner Testumgebung auftritt ist, dass immer beim ersten Start der Seiten (unter Firefox) ein:
window.ftuiApp.setTheme is not a function at main (ftui.js:8)
und:
ftuiApp is not defined
kommt. Nicht als Toast sondern in der Konsole.
LG
Tritt mit dem aktuellen Update nicht mehr auf!
LG
Danke setstate,
funktioniert jetzt wie ich es mir gewünscht habe.
Gruß,
MDietrich
Hi setstate,
kannst du in der ftui.helper.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L231) months_de für März ersetzen? m vom ä sowie das z werden weiter unten ersetzt.
Aus
'März'
sollte
'März'
werden.
Probleme mit den label von ftui-chart.
Seit einem der letzten Updates ich denke der Themes werden die label in schwarz dargestellt (siehe Anhänge).
Ich finde nicht, wo ich das korrigieren / ändern kann.
Hat vielleicht noch jemand die gleichen Probleme?
<!-- Luftfeuchte Wohnzimmer -->
<ftui-grid-tile row="1" col="22" height="4" width="8" shape="round">
<ftui-chart height="130px" width="300px" y-unit="%">
<ftui-chart-data label= "Essen" point-radius="0" color="yellow" log="FileLog_eg_wz_Klima_2_ZB" spec="4:humidity" [update]="eg_wz_Heizung_2:humidity:time"></ftui-chart-data>
<ftui-chart-data label="Wohnen" point-radius="0" color="violet" log="FileLog_eg_wz_Klima_1_ZB" spec="4:humidity" [update]="eg_wz_Heizung_1:humidity:time"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
</ftui-grid-tile>
Gruß LuGu
Hallo Leute, bei mir wird es auch mal Zeit von FTUI 2 auf FTUI 3 umzusteigen. Allerdings habe ich dazu noch ein paar Fragen...
Gibt es irgendwo eine fertige Userdemo, die ich mir zum Anschauen mal downloaden kann?
Ich hab aktuell meine Navigation in V2 mit einem festen Navbar links in der index.html und den darauf verweisenden dashbuttons mit den links zu den anderen "Unterseiten" gelöst. Wenn ich mir im github das Example zu tab anschaue, ist das dort aber anders gelöst - habe ich beim FTUI3 dann keine weiteren "Unterseiten" als html, auf die dann verwiesen wird? Schreib ich alles dann in die index.html? Ich raff grad nix, kann aber auch an der Nachtschicht liegen. :)
du schreibst alles in die index.html, kannst aber genauso gut auch bestimmte Seiten oder Popups auslagern.
Am besten wenn du dann zu den Fragen kommst, meldest du dich hier.
Die Demo Seite ist enthalten wenn du FTUI aus dem Github lädst, aber freunde dich schon mal gleich damit an, dass es da täglich Änderungen gibt und es eigentlich noch alles Beta ist ;)
https://github.com/knowthelist/ftui
Ein herzerfrischendes Moin vom achtern Diek vorweg!
Ich habe seit einem der letzten Updates die Beobachtung gemacht, dass beim Label
<ftui-label [text] = "AS_Thermostat_Climate:humidity" unit=" %<sub>rel</sub>"></ftui-label>
der htmlCode <sub>rel</sub> nicht mehr als html interpretiert und somit tiefer gestellt wird, sondern als gesamter Text ausgeschrieben wird.
Also statt
%rel
gibt das Label
%<sub>rel</sub>
aus.
Muss man da jetzt was anders machen?
Gruß
Sailor
@Sailor
Seit Kurzem wird nicht mehr innerHTML, sondern textContent bei der Verwendung vom unit-Attribut genutzt. Dadurch wird HTML-Code nicht mehr interpretiert ...
Hi Odf
Zitat von: OdfFhem am 24 Februar 2022, 13:32:29
Seit Kurzem wird nicht mehr innerHTML, sondern textContent bei der Verwendung vom unit-Attribut genutzt. Dadurch wird HTML-Code nicht mehr interpretiert ...
Schade, dann muss es eben auch ohne Subscript gehen. :'(
Danke für die Info
Gruß
Sailor
Du kannst HMTL mit slot="unit" einfügen
<ftui-label text="100"><span slot="unit"> %<sub>rel</sub></span></ftui-label>
Würde diese oder eine ähnliche Lösung auch für dynamische Units funktionieren ?
Ich verwende je nach Wert z.B. gerne Wh (normal) oder kWh (fett) ...
Zitat von: LuGu am 23 Februar 2022, 19:52:38
Probleme mit den label von ftui-chart.
Seit einem der letzten Updates ich denke der Themes werden die label in schwarz dargestellt (siehe Anhänge).
Ich finde nicht, wo ich das korrigieren / ändern kann.
Hat vielleicht noch jemand die gleichen Probleme?
Danke setstate für das Update.
Ich glaube in der ftui-themes.css fehlt noch die --chart-legend-color oder?
Gruß LuGu
Gibt es ne Möglichkeit, dass ich das FTUI 3 neben dem alten FTUI in meinem Produktivsystem zum testen installiere? Ich hab keine Testumgebung. Mein aktuelles FTUI wird über IP:8083/fhem/ftui/ aufgerufen...
Ich habe das so gelöst:
defmod TABLETUI3 HTTPSRV ftui3/ ./www/ftui/ Tablet-UI3
attr TABLETUI3 room System
setstate TABLETUI3 TABLETUI3
Gruß,
MDietrich
Zitat von: Stonemuc am 25 Februar 2022, 09:56:26
Gibt es ne Möglichkeit, dass ich das FTUI 3 neben dem alten FTUI in meinem Produktivsystem zum testen installiere? Ich hab keine Testumgebung. Mein aktuelles FTUI wird über IP:8083/fhem/ftui/ aufgerufen...
Wurde schon mehrfach gefragt und beantwortet.
https://forum.fhem.de/index.php/topic,115259.msg1183634/topicseen.html#msg1183634 (https://forum.fhem.de/index.php/topic,115259.msg1183634/topicseen.html#msg1183634)
Gruß LuGu
kann man eigentlich in FTUI 3 eine Anzeige z.B. vom Monat 1.März bis 31.September und eine weitere von 1.Oktober bis 31.Februar anzeigen lassen.?
Geht das mit einer Kalenderanzeige schon
So in der Art:
<ftui-row [hidden]="1.Oktober-31.Februar">
<ftui-label>März-September</ftui-label>
</ftui-row>
<ftui-row [hidden]="1.März-31.September">
<ftui-label>Oktober-Februar</ftui-label>
</ftui-row>
Ohne jetzt Deinen genauen Use-Case zu kennen, klingt es sinnvoll für mich, hier ein Dummy-Device zu spendieren, dessen Wert Du 2x pro Jahr änderst und damit das Label kontrollierst.
Das Dummy-Device könntest Du über ein DOIF steuern, vielleicht so: https://forum.fhem.de/index.php?topic=82782.0 (https://forum.fhem.de/index.php?topic=82782.0), damit landet dann die Logik nicht in FTUI.
;)
ja ich habe ein dummy dafür im Einsatz, aber ich dachte das kann FTUI schon von sich aus
Zitat von: setstate am 24 Februar 2022, 14:12:21
Du kannst HMTL mit slot="unit" einfügen
<ftui-label text="100"><span slot="unit"> %<sub>rel</sub></span></ftui-label>
Perfekt! Danke
<ftui-label [text] = "WS_Thermostat_Climate:humidity"
[color] = "WS_Thermostat_Climate:humidity | step('0: success, 66: warning, 79: danger')"
[class-name] = "WS_Thermostat_Climate:humidity | step('0: size-0, 66: size-0, 79: blink size-0')">
<span slot="unit"> %<sub>rel</sub></span>
</ftui-label>
Gruß
Sailor
Zitat von: GSK19 am 25 Februar 2022, 22:48:57
Ohne jetzt Deinen genauen Use-Case zu kennen, klingt es sinnvoll für mich, hier ein Dummy-Device zu spendieren, dessen Wert Du 2x pro Jahr änderst und damit das Label kontrollierst.
Das Dummy-Device könntest Du über ein DOIF steuern, vielleicht so: https://forum.fhem.de/index.php?topic=82782.0 (https://forum.fhem.de/index.php?topic=82782.0), damit landet dann die Logik nicht in FTUI.
habe deinen Rat befolgt ich hatte ja schon ein DOIF welches mir die Tage runter zählt und nun habe ich das dummy auch automatisiert mit Hilfe deines Links ;)
Danke.
Vllt. kann das FTUI ja eines Tages auch... :D
Gibt es die Möglichkeit ein Label mit dem Farbwert eines readings einzufärben?
Natürlich:
<ftui-label [text]="Device" [color]="Device:ColorReading"></ftui-label>
LG mr_petz
Edit:
Ist auch hier in dem Examplesfile so: https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/label.html#L48
Ich glaube es geht aber keine Hexangabe. Nur green, blue, primary usw...
Das funktioniert so nicht. Im reading steht bei mir z. B #DD0000. Wenn ich es auch als text ausgebe wird der Wert auch so angezeigt. Auch der Wert ohne # geht nicht.
Es gehen nur die vorbelegten Farbwerte
Wieviele Farbangaben hast du im Reading?
Da könnte man auch die entsprechende Farbe (oder ähnliche) mappen.
.* ersetzt das # Zeichen. Mit dem # direkt geht es sonst nicht.
<ftui-label [text]="Device" [color]="Device:ColorReading | map('.*DD0000:red,.*ffffff:white')"></ftui-label>
LG mr_petz
So geht es. Zum Glück sind es nur 3 Werte.
Im Prinzip habe ich das Problem dass ich 2 Temperaturwerte als Reading habe (Soll und Ist). Wenn Ist mehr als 1 Grad über Soll ist, soll es rot werden, bei Ist kleiner als 1 Grad unter Soll blau und sonst grün.
Man kann natürlich auch Werte vom Reading im color steppen, aber da wird leider nicht verglichen.
Deshalb hatte ich bei der Version 2.x ja auch den Farbwert als Reading eingebaut. Ich finde es gut dass die Farbwerte vorgegeben werden damit die Oberfläche einheitlich bleibt, wenn ich auch manche Farben sehr komisch finde. Für bestimmte Zwecke sollte aber auf den gesamten Farbraum zugegriffen werden können.
Ich denke das wird ein bug sein mit dem HexCode.
Irgendwie wird das # nicht übergeben/gelesen.
Ich würde behaupten das es schonmal ging.
Du könntest auch die Farben in einer user.css vorgeben die du magst.
LG mr_petz
Edit: zBsp. so:
:root{
--red:#DD0000;
}
So wird aber alles in diesem Rot dargestellt wenn red definiert ist.
Oder nur für das Label:
[labelTemp]{
--red:#DD0000;
}
<ftui-label [text]="Device" [color]="Device:ColorReading | map('.*DD0000:red,.*ffffff:white')" labelTemp></ftui-label>
Warum soll ein Label das Hex Color von FHEM bekommen? Eine Anwendung die ich mir vorstellen kann ist die Darstellung der aktuellen Farbe eines LED-Stripes. Das macht Sinn mit einem Icon
<ftui-icon name="circle" size="0"
[rgb]="KNX_KuechenSchrankLicht:wert-get">
</ftui-icon>
siehe Antwort #2243
habe gerade versucht für einen Batteriestatus (Label mit text) vorgegebene Farben zu finden - sehr schwierig wenn man nicht nur rot gelb und grün verwenden will. Bisher verwendete ich "#E50005","#FB5909","#F5FF10","#42BC0A","#0CFB0C"
Muss man jetzt wohl als eigene css anlegen.
Farben der einzelnen Themes sind hier zu finden:
https://github.com/knowthelist/ftui/tree/master/www/ftui/themes
gibt schon einige...
und wenn die dir nicht reichen, dann könntest du es so in einer user.css erweitern:
[color="E50005"]{
--color-base:#E50005;
}
<ftui-label text="Device" color="E50005"></ftui-label>
oder als map/step...
Gerade mal ne Bitte: Wäre es möglich, auf Basis des Icons "window-shutter-alert" ein neues Icon "window-shutter-half" (also das gleiche Bild, nur ohne Ausrufungszeichen) zu erstellen? Meine Kenntnisse, um das selbst zu erstellen (naja, genaugenommen meine Google-Kenntnisse nach einem brauchbaren svg-Editor) reichen da irgendwie nicht so wirklich aus. :-( Danke schon mal!
Zitat von: GSK19 am 27 Februar 2022, 22:29:30
Gerade mal ne Bitte: Wäre es möglich, auf Basis des Icons "window-shutter-alert" ein neues Icon "window-shutter-half" (also das gleiche Bild, nur ohne Ausrufungszeichen) zu erstellen? Meine Kenntnisse, um das selbst zu erstellen (naja, genaugenommen meine Google-Kenntnisse nach einem brauchbaren svg-Editor) reichen da irgendwie nicht so wirklich aus. :-( Danke schon mal!
Ich habe mich mal der Sache angenommen 8)
Edit: @setstate kann es auch Übernehmen wenn er mag. Ich habe nur das ! aus dem path genommen...
Edit2: habe das auch noch für die Garage gemacht.
LG mr_petz
Zitat von: Medel am 27 Februar 2022, 20:09:46habe gerade versucht für einen Batteriestatus (Label mit text) vorgegebene Farben zu finden - sehr schwierig wenn man nicht nur rot gelb und grün verwenden will. Bisher verwendete ich "#E50005","#FB5909","#F5FF10","#42BC0A","#0CFB0C"
Muss man jetzt wohl als eigene css anlegen.
Du brauchst aber nur ein eigens inline-CSS, das kann ftui selber - du musst aber etwas stückeln und zusammenbauen:
<ftui-label [text]="Device:TextReading" [style]="Device:ColorReading | prepend('color: ') | append(';')"></ftui-label>Sollte die Textfarbe entsprechend setzen - generiert dann sowas wie
style="color: #E50005;". Setzt voraus, dass auch ein event kommt wenn sich eines der Readings ändert.
Hallo,
seit einem der letzten Updates, ich kann aber nicht genau sagen seit welchem Update, habe ich ein kleines Formatierungsproblem.
Ich habe im unteren Bereich meiner FTUI Oberfläche eine Statuszeile mit verschiedenen Icons und Buttons mit Labeln.
Bisher waren diese einwandfrei vertikal ausgerichtet, nun ist es aber seit einiger Zeit so, daß die Buttons aus der Reihe tanzen.
Die Statuszeile ist wie folgt aufgebaut.
<ftui-grid-tile row="9" col="1" height="1" width="10" shape="round" class="semitransparent">
<ftui-row padding="1">
...
<!-- RAID -->
<ftui-column>
<ftui-icon path="../images/openautomation"
[name]="sys.raid_status:state | map('OK:it_nas,:it_nas')"
[class-name]="sys.raid_status:state | map('OK:normal,:blink')"
[color]="sys.raid_status:state | map('OK:white,:danger')" size="-1">
<ftui-badge [text]="sys.raid_status:hddtemp1 | part(4)"></ftui-badge>
</ftui-icon>
<ftui-label text="sda"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon path="../images/openautomation"
[name]="sys.raid_status:state | map('OK:it_nas,:it_nas')"
[class-name]="sys.raid_status:state | map('OK:normal,:blink')"
[color]="sys.raid_status:state | map('OK:white,:danger')" size="-1">
<ftui-badge [text]="sys.raid_status:hddtemp2 | part(4)"></ftui-badge>
</ftui-icon>
<ftui-label text="sdb"></ftui-label>
</ftui-column>
<!-- Debian Updates -->
<ftui-column>
<ftui-button (value)="set knotenkopf" states="repoSync" fill="clear">
<ftui-icon path="../images/fhemSVG" name="linux" size="-1">
<ftui-badge [text]="knotenkopf:updatesAvailable" color="danger"></ftui-badge>
</ftui-icon>
</ftui-button>
<ftui-label text="Debian"></ftui-label>
</ftui-column>
<!-- Tablet Batterie -->
<ftui-column>
<ftui-icon name="tablet" size="-1">
<ftui-badge [text]="TabletWohnzimmer:batteryPercent"></ftui-badge>
</ftui-icon>
<ftui-label text="Tablet"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Das sieht dann so aus, wie unten angehängt, wie man unschwer sieht, tanzt der Pinguin aus der Reihe.
Kann man da noch was machen?
@yersinia
Das ist natürlich auch eine gute Lösung.
Soweit habe ich garnicht gedacht...
@grossmaggul
Ich denke das liegt irgendwie am ftui-button in Kombination mit Icon. Oder das Icon ist bisschen größer. (das habe ich jetzt nicht hier) Da würde ich dann size="-2" probieren.
Ansonsten würde ich es so definieren da du ja nur ein set sendest und kein get brauchst.
Das @click kannst du auch noch auf das label setzen.
Wenn du den Pinguin wieder primary haben willst, kannst du noch color="primary" ins Icon setzen.
<!-- Debian Updates -->
<ftui-column>
<ftui-icon path="../images/fhemSVG" name="linux" size="-1" @click="sendFhem('set knotenkopf repoSync')">
<ftui-badge [text]="knotenkopf:updatesAvailable" color="danger"></ftui-badge>
</ftui-icon>
<ftui-label text="Debian"></ftui-label>
</ftui-column>
Edit: hast du auch das Standardicon linux getestet?
Edit2: Oder wolltest du alles vertical???
LG mr_petz
Zitat von: mr_petz am 28 Februar 2022, 07:42:25
Ich habe mich mal der Sache angenommen 8)
Perfekt - großes Dankeschön an Dich! :-)
Sollten die Farben in der color-attributes.css nicht alle möglich sein?
Zitat von: Medel am 28 Februar 2022, 18:25:54
Sollten die Farben in der color-attributes.css nicht alle möglich sein?
Wie der Name schon sagt Attribute.
Das hat mit den Farben ansich nichts zu tun.
Die Farben stehen in den einzelnen Themes...
Die Attribute in der color-attributes.css können alle so angegeben werden ..
Aber
<ftui-label text="Device" color="teal"></ftui-label>
<ftui-label text="Device" color="indigo"></ftui-label>
<ftui-label text="Device" color="purple"></ftui-label>
<ftui-label text="Device" color="pink"></ftui-label>
und einige weitere funktionieren nicht.
Habe ich da was falsch verstanden?
Verstehe jetzt glaube was du meinst...
Da müsstest du so rangehen mit style.
<ftui-label text="Device" style="color:var(--indigo)"></ftui-label>
In der color-attributes.css sind die fest vergebenen Farbattribute die setstate schonmal als Standard vorgegeben hat.
Bsp.:
color="primary" wird gemappt zu --primary: #20639b; im Standardtheme.
Wenn du eigene Attribute möchtest gib sie in einer user.css an, wie ich es beschrieben habe.
[color="teal"]{
--color-base: #20c997;
}
Dann kannst du auch mit color="teal" arbeiten. oder halt mit style...
Das mit
[color="teal"]{
--color-base: #20c997;
}
funktioniert, das habe ich schon getestet.
Man sollte aber auch die Farben direkt nach Namen setzen können ohne ein größeres Konstrukt.
Bei rot, blau, grün usw geht es.
Ja verstehe was du meinst.
Da müsste setstate noch mehr vordefinieren...
Die ganzen Grundfarben sind ja drin.
Aber ist ja noch alles in der Entwicklung und da muss man Kompromisse eingehen...
Vielleicht ist es auch so gewollt, dass jeder selbst seine Farben wählt. kA
Noch ein Problem mit einem "popup" im "template". Es wird immer nur das Erste "device" an das "popup" weitergereicht. Da scheint auch noch ein Fehler zu sein.
@Medel
Zitat von: Medel am 28 Februar 2022, 21:10:45
Noch ein Problem mit einem "popup" im "template". Es wird immer nur das Erste "device" an das "popup" weitergereicht. Da scheint auch noch ein Fehler zu sein.
Du solltest bitte zu solchen Beiträgen deinen Code Zeigen. Nur so kann man Hilfestellung geben.
Das ist sonst Glaskugel gucken... ;)
Hier der Code
index.html:
...
<ftui-content class="no-ftui-content" file="template_Heizung.html" name="Bad Handt." device="Bad_Handtuchheizkoerper"></ftui-content>
<ftui-content class="no-ftui-content" file="template_Heizung.html" name="Esszimmer" device="Heizung_Esszimmer"></ftui-content>
...
template_Heizung.html:
...
<ftui-label @click="popup.open()">{{name}}</ftui-label>
...
<ftui-popup id="popup" timeout="0">
<header>Popup</header>
<ftui-knob has-scale has-arc has-scale-text has-value-text has-needle
(value)="{{device}}:control" min="15" max="25"
[value]="{{device}}:4.SET_TEMPERATURE"
</ftui-knob>
<ftui-button popup-close>close</ftui-button>
<ftui-label @click="popup.close()">Close Popup</ftui-label>
</ftui-popup>
ZitatIch denke das liegt irgendwie am ftui-button in Kombination mit Icon.
Davon gehe ich auch aus, bis vor einigen Versionen war das aber kein Problem und alles war in einer Linie, da wurde wohl was geändert.
Ich habe bisher noch keine anderen Klimmzüge gemacht um das wieder ins Lot zu bringen, außer size=-2 was aber nix gebracht hat.
Werde es mal mit @click realisieren, danke Dir!
Habe es jetzt durch einfügen von {{device}} hinbekommen damit jedes popup eine eindeutige id hat.
index.html:
...
<ftui-content class="no-ftui-content" file="template_Heizung.html" name="Bad Handt." device="Bad_Handtuchheizkoerper"></ftui-content>
<ftui-content class="no-ftui-content" file="template_Heizung.html" name="Esszimmer" device="Heizung_Esszimmer"></ftui-content>
...
template_Heizung.html:
...
<ftui-label @click="popup{{device}}.open()">{{name}}</ftui-label>
...
<ftui-popup id="popup{{device}}" timeout="0">
<header>Popup</header>
<ftui-knob has-scale has-arc has-scale-text has-value-text has-needle
(value)="{{device}}:control" min="15" max="25"
[value]="{{device}}:4.SET_TEMPERATURE"
</ftui-knob>
<ftui-button @click="popup{{device}}.close()</ftui-button>
</ftui-popup>
So ging es bei mir:
<ftui-label popup-target="{{name}}">{{name}}</ftui-label>
...
<ftui-popup id="{{name}}" timeout="0">
<header>{{name}}</header>
<ftui-knob has-scale has-arc has-scale-text has-value-text has-needle
(value)="{{device}}:control" min="15" max="25"
[value]="{{device}}:4.SET_TEMPERATURE">
</ftui-knob>
</ftui-popup>
Edit: dir fehlt noch das > hinter 4.SET_TEMPERATURE"
Zitat
Edit: dir fehlt noch das > hinter 4.SET_TEMPERATURE"
Ist beim umkopieren verloren gegangen.
Daß mit dem "aus der Reihe tanzen" der Buttons hat mir jetzt ja doch keine Ruhe gelassen und ich habe mir mal die "button.component.css" zur Brust genommen.
Ich habe dort mal bei dieser Definition das padding von 0.9em auf 0.8em geändert und bei <ftui-button> size="small" angegeben, dann passt's wieder.
/* size */
:host([size="small"]) {
--border-radius: 6px;
--padding-top: 0;
--padding-start: 0.9em;
--padding-end: 0.9em;
--padding-bottom: 0;
height: 2em;
font-size: 0.9em;
}
Ob das irgendwelche negativen Nebeneffekte hat muss sich noch zeigen.
Nachtrag: Gerade noch festgestellt, daß sich nach der Änderung auch die Icons in der Größe ändern lassen ohne, daß das Label verschoben wird.
Hallo zusammen, bin nun auch dabei meine grafische Oberfläche auf FTUI3 umzustellen. Klappt auch soweit ganz gut.
Im Moment bekomme ich aber bei jedem neu laden der Seite auf meinem Ipad folgende Fehlermeldung:
slider.component.js:49 ,ReferenceError: Can´t find variable: ResizeObserver
Seltsamerweise nur auf meinem Ipad. In einem Windows Browser erscheint nichts. Kennt das jemand?
aktuelle Version ist installiert.
Edit: Ich denke, ich habe die Lösung gefunden. Ich habe folgende Zeile in die slider.component.js geschrieben und danach war die Fehlermeldung verschwunden.
if (!window.ResizeObserver) install();
Ich betreibe ein Tablet mit Linux/Chrom und FTUI3 ohne Probleme.
Für die mobilen Geräte habe ich eine mobile Seite, dort liegt das Problem, dass Readings werden nur beim neu laden der Seite aktualisiert.
Auf Windows Geräten funktioniert alles, auf iOS Safari bleibt der Status hängen. Auch die Tabletseite funktioniert auf dem iPhone nicht richtig.
Bei FTUI2 gab es das Problem nie. An fhem liegt es nicht, weil es nur in der Kombination FTUI3 und iPhone nicht funktioniert.
Was kann man da machen?
<head>
<link rel="apple-touch-icon" href="icons/apple.png"/>
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/mobile-dark-theme.css" rel="stylesheet">
<link href="themes/mobile-theme.css" rel="stylesheet" ftui-binding [disabled]="local:dark | toBool()">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>FTUI Mobile</title>
</head>
Gibt es mittlerweile eine möglichkeit eine readingsgroup anzeigen zu lassen bzw. leicht einzubinden? Oder muss ich es selbst über eine Tabelle lösen in die ich alle Werte einbinde?
Zitat von: Stonemuc am 03 März 2022, 07:43:34
Gibt es mittlerweile eine möglichkeit eine readingsgroup anzeigen zu lassen bzw. leicht einzubinden? Oder muss ich es selbst über eine Tabelle lösen in die ich alle Werte einbinde?
Hi. Wurde nicht in Ftui2 die HTML von der ReadingsGroup gelesen?
Dann sollte es doch mit ftui-content gehen.?
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/content2.html
Habe es aber auch noch nicht getestet...
Hier noch der Link zum Beitrag:
https://forum.fhem.de/index.php/topic,115259.msg1184952.html#msg1184952
LG mr_petz
Edit: gerade mal getestet. geht leider nur mit reinen html-code.
Wie war das nochmal mit der Monatsanzeige in FTUI 3, ich finde es gerade nicht was in welcher Datei geändert werden muss.
Da gerade März wiedere so "M&au21I;r7" aussieht
Hatte das nicht setstate jetzt erst gefixt?
Hast du die letzte Version?
LG
Ok das muss dann aber ganz aktuell sein, habe gerade nochmal ein Update gefahren und nun ist es es wieder OK.Mein letzter Stand war irgendwie letzte Woche Mittwoch.
@moonsorrox
Fix war vor 8 Tagen am 24.2.
LG
Zitat von: mr_petz am 03 März 2022, 15:04:41
Hi. Wurde nicht in Ftui2 die HTML von der ReadingsGroup gelesen?
Dann sollte es doch mit ftui-content gehen.?
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/content2.html
Habe es aber auch noch nicht getestet...
Hier noch der Link zum Beitrag:
https://forum.fhem.de/index.php/topic,115259.msg1184952.html#msg1184952
LG mr_petz
Ich glaube jetzt bin ich überfordert...ich check nix....
Hier mal meine readingsgroup - Ansicht siehe Grafik im Anhang:
Internals:
DEF Mythz:<Schaltprogramm_aktiv>,SwitchingProg Mythz:<Verdichter>,Compressor Mythz:<Heizen>,HeatingHC Mythz:<Warmwasserbereitung>,HeatingDHW Mythz:<Nachheizstufen>,BoosterHC Mythz:<Filterwechsel>,FilterBoth Mythz:<Lüftungsstufe_manuell>,VentStage Mythz:<Lüftungsstufe_aktuell>,fanstage Mythz:<Heizkreispumpe>,PumpHC Mythz:<Abtauen>,Defrost Mythz:<Störung>,Service
FUUID 5c51c5c4-f33f-6467-999a-ca96fc1d8e1ed243
NAME rg_thz_stat
NR 87
NTFY_ORDER 50-rg_thz_stat
STATE Initialized
TYPE readingsGroup
changed 0
mayBeVisible 1
CONTENT:
Mythz 1
CONTENT2:
DEVICES:
ARRAY(0x6177cb0)
ARRAY(0x5d4e738)
ARRAY(0x676adb8)
ARRAY(0x3dd5368)
ARRAY(0x67e0828)
ARRAY(0x64d2bc0)
ARRAY(0x5d66520)
ARRAY(0x6561388)
ARRAY(0x67b9108)
ARRAY(0x6178e10)
ARRAY(0x67df368)
fhem:
lastDefChange 4
last_update 1646229944.78328
helper:
DEF
positions:
Mythz.BoosterHC 5:2
Mythz.Compressor 2:2
Mythz.Defrost 10:2
Mythz.FilterBoth 6:2
Mythz.HeatingDHW 4:2
Mythz.HeatingHC 3:2
Mythz.PumpHC 9:2
Mythz.Service 11:2
Mythz.SwitchingProg 1:2
Mythz.VentStage 7:2
Mythz.fanstage 8:2
valueIcon:
BoosterHC.0 sani_heating_level_0
BoosterHC.1 sani_heating_level_60@red
BoosterHC.2 sani_heating_level_80@red
BoosterHC.3 sani_heating_level_100@red
Compressor.0 sani_garden_pump
Compressor.1 sani_garden_pump@red
Defrost.0 frost
Defrost.1 frost@red
FilterBoth.0 recycling
FilterBoth.1 recycling@red
HeatingDHW.0 sani_water_hot
HeatingDHW.1 sani_water_hot@red
HeatingHC.0 sani_heating
HeatingHC.1 sani_heating@red
PumpHC.0 sani_pump
PumpHC.1 sani_pump@red
Service.0 hue_room_garage
Service.1 hue_room_garage@red
SwitchingProg.0 hourglass
SwitchingProg.1 hourglass@red
VentStage.0 vent_ventilation_level_manual_m
VentStage.1 vent_ventilation_level_manual_m@red
fanstage.0 vent_ventilation_level_0@red
fanstage.1 vent_ventilation_level_1@green
fanstage.2 vent_ventilation_level_2@blue
fanstage.3 vent_ventilation_level_3@red
values:
formated:
undef
undef
ARRAY(0x64d59c8)
orig:
undef
undef
ARRAY(0x65d9dc0)
prefixsuffix:
undef
undef
ARRAY(0x6438c00)
Attributes:
alias Status
group Heizungsstatus
nonames 1
room Heizung
sortby 1
valueIcon {'SwitchingProg.1'=>'hourglass@red',
'SwitchingProg.0'=>'hourglass',
'Compressor.1'=>'sani_garden_pump@red',
'Compressor.0'=>'sani_garden_pump',
'HeatingHC.1'=>'sani_heating@red',
'HeatingHC.0'=>'sani_heating',
'HeatingDHW.1'=>'sani_water_hot@red',
'HeatingDHW.0'=>'sani_water_hot',
'BoosterHC.3'=>'sani_heating_level_100@red',
'BoosterHC.2'=>'sani_heating_level_80@red',
'BoosterHC.1'=>'sani_heating_level_60@red',
'BoosterHC.0'=>'sani_heating_level_0',
'FilterBoth.1'=>'recycling@red',
'FilterBoth.0'=>'recycling',
'VentStage.1'=>'vent_ventilation_level_manual_m@red',
'VentStage.0'=>'vent_ventilation_level_manual_m',
'fanstage.3'=>'vent_ventilation_level_3@red',
'fanstage.2'=>'vent_ventilation_level_2@blue',
'fanstage.1'=>'vent_ventilation_level_1@green',
'fanstage.0'=>'vent_ventilation_level_0@red',
'PumpHC.1'=>'sani_pump@red',
'PumpHC.0'=>'sani_pump',
'Defrost.1'=>'frost@red',
'Defrost.0'=>'frost',
'Service.1'=>'hue_room_garage@red',
'Service.0'=>'hue_room_garage',
}Binde ich es jetzt so ein?
<ftui-content [content]="rg_thz_stat:html"></ftui-content>Soe infach kann es doch nicht sein?
Hatte eben auch getestet und es geht nur mit reinem html-code oder einem state-Format.
Sorry hatte vielleicht auch zu einfach gedacht, aber es wird ja erst alles in der Readingsgroup erstellt und ist kein Reading mit html-code.
LG
Und mit Label geht das nicht? Das text attribute wird doch ins innerHtml geschrieben.
Zitat von: setstate am 03 März 2022, 23:13:07
Und mit Label geht das nicht? Das text attribute wird doch ins innerHtml geschrieben.
Da wird mehr nötig sein. Da sind ja auch Icons mit im spiel ...
Label geht ja auch nur auf state wenn ich das readingsgroup-device angebe oder?
Selbst wenn ich einen Response auf das Device mache, sehe ich nur die attr und internals.
Ich habe auch versucht das readingsgroup widget aus ftui2.x nachzuvollziehen, aber da werde ich nicht schlau.
Wie wurde denn das Html im widget aus fhem ausgelesen?
In fhem wird das Html der Readingsgroup per js erstellt. Zumindest lese ich es so
LG mr_petz
Eigentlich gibt es kein get bei readingsGroup, aber get <readingsGroup> html gibt es trotzdem ...
Ok. Also müsste man nur ein get readingsgroup html als sendfhem erstellen?
Würde das im content gehen?
Kann es gerade nicht testen.
Oder würde es sogar so gehen?:
<ftui-content [content]="readingsgroup html"></ftui-content>
Oder würde das .join(' ') fehlen?
LG
ich habe eine Möglichkeit gefunden. Ich werde ftui-content erweitern
Ok. Schön das du einen Weg gefunden hast.
Ich habe auch gerade mal gespielt aus langer weile und hinbekommen.
Die table wird direkt gelesen und so wie sie kommt angezeigt.
Bei mir ist nur das Frost SVG riesig groß und sprengt die Tabelle. Da muss man/ich bestimmt nochwas in fhem am css tunen...
In fhem ist es klein.
Ich bin mal auf deine Version gespannt. (du bist hier ja der Profi ;))
LG
Edit: Wenn man die fhemSVG´s in der RG verwendet und kein width/height angegeben hat, dann wird die Tabelle in FTUI übergroß.
Hat den Grund, weil sie ansich mit großer width und height angegeben sind.
Da sollte man aufpassen... denke ich.
Zitat von: setstate am 04 März 2022, 15:42:51
ich habe eine Möglichkeit gefunden. Ich werde ftui-content erweitern
Da freu ich mich..danke.
Zitat von: setstate am 04 März 2022, 15:42:51
ich habe eine Möglichkeit gefunden. Ich werde ftui-content erweitern
ich habe es doch nicht im ftui-content eingebaut. Das passte alles nicht ins allgemeine Konzept. Es gibt jetzt im Binding eine neue Pipe-Function:
sendCommand()
Damit kann man durch eine Readingupdate ein Command an FHEM schicken und das Ergebnis in das Attribute schieben.
<ftui-label [text]="BadFenster | sendCommand('{countOpenWindows()}')"></ftui-label>
Damit kann man auch ein readingGroup HTML holen.
<ftui-content [content]="Sonos_Play5 | sendCommand('get Sonos_Play5RG_Favourites html')"></ftui-content>
Oder in Kurzform:
<ftui-content [content]="Sonos_Play5 | getHTML('Sonos_Play5RG_Favourites')"></ftui-content>
Schönen Sonntag euch allen,
ich habe mit dem Popup im Zusammenhang mit tab-view noch ein kleines Problem.
Das popup befindet sich im Tab "View_home". Es öffnet und schließt sich per dummy wie gewünscht. Auch händisch öffnet sich das popup wie gewünscht. Nur beim schließen (egal ob per "x" oder via Touch abseits des popups) ist kein Tab mehr aktiv - "View_home" sollte aber aktiv sein. In den beispielen und in der Suche bin ich leider nicht fündig geworden.
<ftui-grid base-width="100%" base-height="100%" margin="2" shape="round"> <!--keine ahnung ob das mit % richtig ist-->
<ftui-tab-view id="View_home">
<!--************CAM Haus***************-->
<ftui-grid-tile row="3" col="3" height="4" width="5">
<header>CamHaus</header>
<ftui-tab view="View" direction="vertical">
<ftui-image src="http://192.168.178.13:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=xxxxx" interval="2" nocache height="100%" width="400px" popup-target="popupcam1"></ftui-image>
</ftui-tab>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
<!--************Popup CAM Haus***************-->
<ftui-popup id="popupcam1" [active]="camAlarm:192.168.178.13 | map('alarm: true, NoAlarm: false')"timeout="15" left="2%" top="2%" opacity="0" autoclose="10" position="page" height="92%" width="92%">
<ftui-image src="http://192.168.178.13:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=xxxxx&t=" interval="2" nocache></ftui-image>
</ftui-popup>
@setstate
bezüglich der Anzeige von einer Readingsgroup.
du hast ja auch mit den Sonos_Favourits_RG getestet.
Da sind ja Standardmäßig onclick im <div> der einzelnen icons/images integriert.
Diese "Links" kann man ja so nicht nutzen, da sie mit der function FW_cmd() aus der fhemweb.js verknüpft sind.
Durch eine kleine funktion könnte man sie zum starten der FavouritesSender nutzen. Ich habe das zur Zeit so gelöst in einem script-tag der entsprechenden Seite:
function FW_cmd(arg) {
ftuiApp.fhemService.sendCommand(arg.replace('/fhem?XHR=1&cmd.Sonos_Bad%3D','').replace(/%20/g,' ').replace(/%2520/g,'%20'));
}
replace(/%20/g,' ') muss fürs set sein und
replace(/%2520/g,'%20') muss für den Favouriten sein.
Sonos_Bad muss natürlich durch das entsprechende Device ersetzt werden.
Könnte man es irgendwie ins FTUI3 integrieren?
Ansonsten funktioniert das holen der RG.
LG mr_petz
Edit. es gibt noch mehr "SonderUrlEncodes" im Favouritsnamen Bsp:
%2528 muss zu %28 werden und
%2529 zu %29
Die beiden sind ().
Da werden bestimmt auch noch mehr drin sein.
Die werden aber von fhem erstellt...
Guten Abend,
ich muss gestehen, eigentlich bin ich erst auf Seite 49 dieses Megathreads. Trotzdem quält mich aktuell ein Problem mit ftui-icon und map:<ftui-icon [name]="WZ_Heizung:batteryLevel | map('1.8:battery-0, 2.0:battery-1, 2.3:battery-2, 2.5:battery-3, 2.8:battery')"
[color]="WZ_Heizung:batteryLevel | map('1.8:danger, 2.0:warning, 2.3:success, 2.5:secondary, 2.8:green')">
</ftui-icon>
Erzeugt bei einem batteryLevel von 2.4 den Fehler: File not found: /opt/fhem/www/ftui//icons/2.4.svg
BatteryLevel wie 1.8 oder 2.0 welche das mapping treffen, werden korrekt dargestellt. Ist mir noch zu helfen? :-[
Zitat von: 2space am 07 März 2022, 20:51:38
Guten Abend,
ich muss gestehen, eigentlich bin ich erst auf Seite 49 dieses Megathreads. Trotzdem quält mich aktuell ein Problem mit ftui-icon und map:<ftui-icon [name]="WZ_Heizung:batteryLevel | map('1.8:battery-0, 2.0:battery-1, 2.3:battery-2, 2.5:battery-3, 2.8:battery')"
[color]="WZ_Heizung:batteryLevel | map('1.8:danger, 2.0:warning, 2.3:success, 2.5:secondary, 2.8:green')">
</ftui-icon>
Erzeugt bei einem batteryLevel von 2.4 den Fehler: File not found: /opt/fhem/www/ftui//icons/2.4.svg
BatteryLevel wie 1.8 oder 2.0 welche das mapping treffen, werden korrekt dargestellt. Ist mir noch zu helfen? :-[
Wenn du fleißig weiterliest, wist du finden das man jetzt in deinem Fall statt map
step nimmt.
Hier ist es erklärt:
https://forum.fhem.de/index.php/topic,123701.msg1182722.html#msg1182722 (https://forum.fhem.de/index.php/topic,123701.msg1182722.html#msg1182722)
Gruß LuGu
Hallo zusammen
Ich nutze FTUI überwiegend auf Mobiledevices. Auf dem PC sieht es dann bescheiden aus.
Hätte ich gerne ein padding links und rechts von 10%
Das klappt auch wunderbar mit:
@media screen and (min-width: 950px) {
html {
width: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
margin-left: 10%;
margin-right: 10%;
padding: 0;
}
}
Der view-content passt sich leider nicht an. Erst wenn ich in der view.component.js width: 100vw; auf width: 100%; ändere.
Hat jemand eine schönere Lösung?
Grüsse
PS: Kann ich eigentlich auch ein Bild direkt im Beitrag einfügen, anstatt Anhang? ;)
ZitatKann ich eigentlich auch ein Bild direkt im Beitrag einfügen, anstatt Anhang?
Nein, leider nicht.
Zitat von: SirMarco am 09 März 2022, 09:54:42
Hallo zusammen
Ich nutze FTUI überwiegend auf Mobiledevices. Auf dem PC sieht es dann bescheiden aus.
Hätte ich gerne ein padding links und rechts von 10%
Das klappt auch wunderbar mit:
@media screen and (min-width: 950px) {
html {
width: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
margin-left: 10%;
margin-right: 10%;
padding: 0;
}
}
Der view-content passt sich leider nicht an. Erst wenn ich in der view.component.js width: 100vw; auf width: 100%; ändere.
Hat jemand eine schönere Lösung?
Grüsse
PS: Kann ich eigentlich auch ein Bild direkt im Beitrag einfügen, anstatt Anhang? ;)
Ob das eine schönere Lösung ist, kann ich nicht sagen.
body {
padding-left:10%;
}
ftui-view {
padding-left:10%;
}
ftui-view-item {
width:90%;
}
footer{
width:80%;
}
So wird alles ausser die ftui-view-toolbar zusammengerückt.
Diese bekomme ich nicht angesprochen da, wie du ja schon gesehen hast, nur die class .container hier zieht.
Da müsste setstate was ändern.
Ich hoffe das war so gemeint für PC-Browser???
LG
Ja genau so war das gemeint!
Danke dir!
Zitat von: setstate am 06 März 2022, 16:27:30
ich habe es doch nicht im ftui-content eingebaut. Das passte alles nicht ins allgemeine Konzept. Es gibt jetzt im Binding eine neue Pipe-Function:
sendCommand()
Damit kann man durch eine Readingupdate ein Command an FHEM schicken und das Ergebnis in das Attribute schieben.
<ftui-label [text]="BadFenster | sendCommand('{countOpenWindows()}')"></ftui-label>
Irgendwie klappt das alles bei mir nicht. "Statistik" ist eine ReadingsGroup, trotzdem kommt hier nix:
<ftui-content [content]="get Statistik html"></ftui-content>
<ftui-content [content]="Statistik html"></ftui-content>
Und auch über die Funktion (sub countOpenWindows() return "test";) kommt nix:
<ftui-label [text]="sendCommand('{countOpenWindows()}')">11</ftui-label>
Oder habe ich da was falsch verstanden?
ja, das passt noch nicht. Eine Erklärung dazu:
<ftui-label text="25"></ftui-label>
Ist ein statisches Label mit dem Wert 25
<ftui-label [text]="mySensor:temperature"></ftui-label>
Ist eine Art Subscription (Abonnement) auf Änderungen des FHEM Reading temperature des Devices mySensor. Wenn es ein Event auf diesem Reading gibt, wird der Wert in das text-attribut geschrieben. Als ob man die ganze Zeit im Event-Viewer auf diesen einen String "mySensor temperature" warten würde.
Man kann nicht einfach eine FHEM Function oder nur eine FTUI Funktion angeben, ohne den Event-Listener.
Es muss also anstatt
<ftui-label [text]="sendCommand('{countOpenWindows()}')"></ftui-label>
das so mit dem Reading als Trigger angeben
<ftui-label [text]="BadFenster | sendCommand('{countOpenWindows()}')"></ftui-label>
Immer wenn es ein BadFenster-Event gibt, wird der Wert "open" oder "closed" nicht in das text-attribute geschrieben, sondern vorher damit die Funktion sendCommand() aufgerufen und dessen Result nach text-attribut geschrieben.
Event-getriggert, da war mein Fehler. Danke, kapiert. Ist alles noch recht neu und ich bin wirklich geflasht von dem Möglichkeiten.
Danke dir!
Hallo zusammen
Besteht die Möglichkeit vom einem reading etwas "abzuschneiden" oder nur die ersten "X" Positionen vom reading anzeigen?
Mein reading hat eine Uhrzeit 07:30:00, möchte gerne die "sekunden" weghaben.
Aktuell nutze ich replace:
<ftui-label [text]="{{device}}:{{reading}}| replace(':00',' ')">
Das muss doch auch einfache gehen, oder?
Grüsse
Vielleicht hilft das weiter:
<ftui-clock format="hh:mm:ss" slot="end" color="medium" size="0"></ftui-clock>
<ftui-clock format="DD.MM.YYYY" slot="start" color="medium" size="0"></ftui-clock>
Oder du passt dein Reading über Userreadings an.
time {ReadingsTimestamp("Sabrina_Handy", "cmd","")},
time2 {POSIX::strftime("%H:%M",localtime(time_str2num(ReadingsTimestamp("Sabrina_Handy","cmd",""))-localtime))},
time ist die komplette Zeit | time2 ist Stunden:Minuten
Ich danke dir.
Möchte nicht den Timestamp ändern, sondern den Inhalt vom reading.
Ich lasse es bei dem replace :)
Zitat von: SirMarco am 15 März 2022, 12:23:22
Hallo zusammen
Besteht die Möglichkeit vom einem reading etwas "abzuschneiden" oder nur die ersten "X" Positionen vom reading anzeigen?
Mein reading hat eine Uhrzeit 07:30:00, möchte gerne die "sekunden" weghaben.
Aktuell nutze ich replace:
<ftui-label [text]="{{device}}:{{reading}}| replace(':00',' ')">
Das muss doch auch einfache gehen, oder?
Grüsse
Ja es geht auch anders bzw. alternativ..., aber auch nicht schöner/besser:
<ftui-label [text]="{{device}}:{{reading}} | part('(.*:.*):.*')"></ftui-label>
so geht es mit hh:mm:ss vom Reading und wird in hh:mm umgemünzt...
part() kann RegExp...
LG mr_petz
Zitat von: mr_petz am 15 März 2022, 14:42:08
part() kann RegExp...
Aussage stimmt ... wichtig dabei ist jedoch, dass der reguläre Ausdruck immer auf das komplette Reading passen muss.
Zitat von: setstate am 06 März 2022, 16:27:30
ich habe es doch nicht im ftui-content eingebaut. Das passte alles nicht ins allgemeine Konzept. Es gibt jetzt im Binding eine neue Pipe-Function:
sendCommand()
Damit kann man durch eine Readingupdate ein Command an FHEM schicken und das Ergebnis in das Attribute schieben.
<ftui-label [text]="BadFenster | sendCommand('{countOpenWindows()}')"></ftui-label>
Damit kann man auch ein readingGroup HTML holen.
<ftui-content [content]="Sonos_Play5 | sendCommand('get Sonos_Play5RG_Favourites html')"></ftui-content>
Oder in Kurzform:
<ftui-content [content]="Sonos_Play5 | getHTML('Sonos_Play5RG_Favourites')"></ftui-content>
Nochmal eine Frage dazu - kann ich irgendwie die Größe anpassen? Die Anzeige der ReadingsGroup ist so riesig dargestellt, dass ich nur 2 halbe Symbole, sonst nix sehen kann....
@Stonemuc
Zitat von: Stonemuc am 16 März 2022, 02:03:01
Nochmal eine Frage dazu - kann ich irgendwie die Größe anpassen? Die Anzeige der ReadingsGroup ist so riesig dargestellt, dass ich nur 2 halbe Symbole, sonst nix sehen kann....
Da hatte ich schon was dazu geschrieben:
Zitat von: mr_petz am 04 März 2022, 19:57:32
....
Edit: Wenn man die fhemSVG´s in der RG verwendet und kein width/height angegeben hat, dann wird die Tabelle in FTUI übergroß.
Hat den Grund, weil sie ansich mit großer width und height angegeben sind.
Da sollte man aufpassen... denke ich.
Das kannst du zur Zeit nur auf der fhem-seite anpassen.
setstate müsste da auf die gelesene RG gehen und dann das width/height bei den svg´s/icons/img mitgeben. so wie ich es für die RG von Sonos gemacht habe...
LG
Mal eine kurze Frage, ich finde da gerade nix zu.
Kann man bei einem Label, die Anzahl der auszugebenden Buchstaben begrenzen?
@grossmaggul
Das ist zur Zeit eine Möglichkeit:
<ftui-label [text]="Device | replace(/(.*)/,text.substring(0,4))"></ftui-label>
Das ist aber nicht so schön, da das text (kommt intern vom label) im replace() sich ändern könnte.
Für eine Pipefunktion müsste setstate eine Zeile in die ftui.binding.js einfügen. Bsp:
const subString = (front, rear) => input => String(input).substring(front, rear);
Dann wäre es normal über die pipes lösbar:
<ftui-label [text]="Device | subString(0,4)"></ftui-label>
Die 0 wäre stringstart und die 4 die stringlänge ab stringstart die dann ausgegeben wird...
LG mr_petz
Edit: trimString in subString geändert.
O.K., danke, mal sehen ob ich mir da was basteln kann.
Ich möchte Änderungen in der "menu.component.css" vornehmen. Durch ein Update wird das original immer wieder hergestellt. Die Änderungen müssen sicher in eine "user.css" .
Wie muss dies aussehen, damit die Änderung Wirkung zeigt.
.box-menu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 40px;
Zitat von: grossmaggul am 16 März 2022, 11:12:22
O.K., danke, mal sehen ob ich mir da was basteln kann.
Reguläre Ausdrücke beherrschen eine solche Begrenzung bereits ...
replace ... die ersten 3 Zeichen
<ftui-label [text]="ftuitest:string | replace(/^(.{1,3}).*/,'$1')"></ftui-label>
... 4 Zeichen überlesen und dann die nächsten 3 Zeichen ... also Zeichen 5-7
<ftui-label [text]="ftuitest:string | replace(/^.{4}(.{1,3}).*/,'$1')"></ftui-label>
... minimal veränderter, regulärer Ausdruck wegen part-Vorgabe ... resultierende Anzeige wie oben
<ftui-label [text]="ftuitest:string | part('(.{1,3}).*')"></ftui-label>
<ftui-label [text]="ftuitest:string | part('.{4}(.{1,3}).*')"></ftui-label>
@OdfFhem
Ich habe schon spekuliert und mir gedacht dass du eine reguläre Version präsentierst. :D
Ist aber auch richtig so. Nur so können wir alle davon profitieren und was dazu lernen...
Mir ist das persönlich zu komplex und für den Ottonormalnutzer bestimmt auch. Die einfache Pipe kann setstate bestimmt noch integrieren.
Danke und LG mr_petz
Zitat von: mr_petz am 16 März 2022, 07:41:48
@Stonemuc
Da hatte ich schon was dazu geschrieben:
Das kannst du zur Zeit nur auf der fhem-seite anpassen.
setstate müsste da auf die gelesene RG gehen und dann das width/height bei den svg´s/icons/img mitgeben. so wie ich es für die RG von Sonos gemacht habe...
LG
Also quasi in meiner FHEM rg schon die Breite und Höhe angeben und dann klappt es? Probiere ich mal. Hoffe es sieht dann in FHEM noch gut aus.
Ansonsten.muss ich mir was eigenes aus Icons und Labels basteln, wenn ich mein Grundgerüst in allen Räumen durch habe.
@mr_petz
Viele Wege führen nach Rom ... sind halt weitere Beispiele ...
Wichtig bei der zusätzlichen Pipe wäre aus meiner Sicht auf jeden Fall ein passenderer Name, da trim normalerweise eine ganz andere Bedeutung hat ...
ZitatDie Trim-Methode entfernt alle führenden und nachgestellten Leerzeichen aus der aktuellen Zeichenfolge.
Bei erweiterter Funktionalität kann man auch noch das zu trimmende Zeichen festlegen.
@Stonemuc
Zitat von: Stonemuc am 16 März 2022, 16:51:06
Also quasi in meiner FHEM rg schon die Breite und Höhe angeben und dann klappt es? Probiere ich mal. Hoffe es sieht dann in FHEM noch gut aus.
Ansonsten.muss ich mir was eigenes aus Icons und Labels basteln, wenn ich mein Grundgerüst in allen Räumen durch habe.
Die höhe und breite der "Bildchen".
Die meisten fhem-svg sind ca 500x500px groß.
In ftui ist eine Größe von ca 30x30px gut.
LG
Edit: Das könntest du vielleicht mit css, style und/oder cellstyle in fhem erreichen.
Es geht auch ftui-seitig in einer user.css:
ftui-content svg{
width:30px;
height:30px;
}
Zitat von: OdfFhem am 16 März 2022, 16:59:31
..
Wichtig bei der zusätzlichen Pipe wäre aus meiner Sicht auf jeden Fall ein passenderer Name, da trim normalerweise eine ganz andere Bedeutung hat ...Bei erweiterter Funktionalität kann man auch noch das zu trimmende Zeichen festlegen.
Für Namensvorschläge ist setstate offen. Ich hatte das einfach in den Raum als Beispiel gestellt.
Man kann es auch so nennen wie es heisst: subString()
LG
ZitatReguläre Ausdrücke beherrschen eine solche Begrenzung bereits ...
Leider ist es so, das reguläre Ausdrücke mich beherrschen. :o :(
Zitat von: mr_petz am 16 März 2022, 18:18:44
Für Namensvorschläge ist setstate offen. Ich hatte das einfach in den Raum als Beispiel gestellt.
Man kann es auch so nennen wie es heisst: subString()
LG
Ich kenne von Musik-Samplern aus den 90'ern noch den englischen Ausdruck "truncate". Wobei wohl auch ein simples "cut" passen würde. SubString finde ich aber genauso passend.
Moin zusammen
Zitat von: tomster am 17 März 2022, 11:16:51
Ich kenne von Musik-Samplern aus den 90'ern noch den englischen Ausdruck "truncate". Wobei wohl auch ein simples "cut" passen würde. SubString finde ich aber genauso passend.
Ein paar Links zur Diskussionsgrundlage:
https://wikidiff.com/cut/truncate (https://wikidiff.com/cut/truncate)
https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/substring (https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/substring)
https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/trim (https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/trim)
Gruß
Sailor
Da der Begriff sicher kurz sein soll, werfe ich auch noch "chop" in den Ring.
Bevor das hier zu viel Diskussion darüber wird, muss setstate auch gewillt sein es einzubauen...
LG mr_petz
Zitat von: mr_petz am 16 März 2022, 17:12:17
@Stonemuc
Die höhe und breite der "Bildchen".
Die meisten fhem-svg sind ca 500x500px groß.
In ftui ist eine Größe von ca 30x30px gut.
LG
Edit: Das könntest du vielleicht mit css, style und/oder cellstyle in fhem erreichen.
Es geht auch ftui-seitig in einer user.css:
ftui-content svg{
width:30px;
height:30px;
}
Kann ich das auch mit nem style im bereich des headers lösen?
<style>
ftui-content svg{
width:30px;
height:30px;
}
</style>
Hallo setstate
ich habe dies als Idee aufgenommen und versucht mit einem Knob abzuwandeln.
Zitat von: grossmaggul am 03 Februar 2021, 13:55:03
Der slider beherrscht erfolgreich (undokumentiert..?) einen dynamischen Max-Wert
<ftui-slider
[value]="dummy_timertest_STATUS:timerElapsed"
[max]="dummy_timertest_STATUS:timerDuration>
</ftui-slider>
Der Knob kann dies scheinbar nicht.. mache ich etwas falsch oder könntest/würdest du das ergänzen wollen?
** edit: hat sich erledigt. in der Definition fehlten Anführungszeichen. Der Sliderist wohl fehlertoleranter...- alles gut. Knob funktioniert wie erwartet!
Vielen Dank vorab und Gruss
Ralph.
Ich benötige mal Hilfe bei einem circlemenu. Ich versuch mir da was für meine Lüftung zu basteln.
Die hat die Stufen 0,1,2,3,offFor60min - wenn ich es normal mit beschrifteten Buttons erstelle funktioniert es wunderbar.
Gibt es die Möglichkeit die aufklappenden Buttons dann mit icons zu belegen? Irgendwie geht das bei mir nicht - oder hab ich irgendwo einen Fehler drin?
So läuft es:
<ftui-circlemenu direction="bottom-half">
<ftui-icon path="../images/openautomation/"
class="size-3" [name]="FanSelectorDay | map('0:vent_ventilation_level_0, 1:vent_ventilation_level_1, 2:vent_ventilation_level_2, 3:vent_ventilation_level_3, offFor60min:vent_ventilation_level_manual_m')" [color]="FanSelectorDay | map('0:blue, 1:green, 2:yellow, 3:danger, offFor60min:danger')"></ftui-icon>
<ftui-button (value)="FanSelectorDay" states="0"> 0</ftui-button>
<ftui-button (value)="FanSelectorDay" states="1"> 1 </ftui-button>
<ftui-button (value)="FanSelectorDay" states="2"> 2</ftui-button>
<ftui-button (value)="FanSelectorDay" states="3"> 3</ftui-button>
<ftui-button (value)="FanSelectorDay" states="offFor60min">60min aus </ftui-button>
</ftui-circlemenu>
So aber nicht wie gedacht:
<ftui-circlemenu direction="bottom-half">
<ftui-icon path="../images/openautomation/"
class="size-3" [name]="FanSelectorDay | map('0:vent_ventilation_level_0, 1:vent_ventilation_level_1, 2:vent_ventilation_level_2, 3:vent_ventilation_level_3, offFor60min:vent_ventilation_level_manual_m')" [color]="FanSelectorDay | map('0:blue, 1:green, 2:yellow, 3:danger, offFor60min:danger')"></ftui-icon>
<ftui-button (value)="FanSelectorDay" states="0"> <ftui-icon path="../images/openautomation/" [name]=vent_ventilation_level_0 </ftui-icon> </ftui-button>
<ftui-button (value)="FanSelectorDay" states="1"> <ftui-icon path="../images/openautomation/" [name]=vent_ventilation_level_1 </ftui-icon> </ftui-button>
<ftui-button (value)="FanSelectorDay" states="2"> <ftui-icon path="../images/openautomation/" [name]=vent_ventilation_level_2 </ftui-icon> </ftui-button>
<ftui-button (value)="FanSelectorDay" states="3"> <ftui-icon path="../images/openautomation/" [name]=vent_ventilation_level_3 </ftui-icon> </ftui-button>
<ftui-button (value)="FanSelectorDay" states="offFor60min"> <ftui-icon path="../images/openautomation/" [name]=vent_ventilation_level_manual_m </ftui-icon> </ftui-button>
</ftui-circlemenu>
Wie bekomm ich das hin?
Un ich mach mal nen neunen Beitrag zwecks Übersicht. Jetzt hab ich das alles soweit ich kann schön umgebaut von FTUI2 auf FTUI3, allerdings schalten meine Buttons nicht - es sendet immer "on" und er ist auch nie als an im FTUI gekennzeichnet. Wo hab ich da nen Fehler?
Mal am Beispiel meiner einfachen Lampe im Flur z.B.:
List vom device:
Internals:
DEF FFD1DD02
FUUID 5c51c5c5-f33f-6467-c57a-cc6491d3edf970db
IODev TCM_ESP3_0
LASTInputDev TCM_ESP3_0
MSGCNT 43
NAME Licht_Flur_EG
NR 182
NTFY_ORDER 50-Licht_Flur_EG
STATE Aus
TCM_ESP3_0_DestinationID FFFFFFFF
TCM_ESP3_0_MSGCNT 43
TCM_ESP3_0_PacketType 1
TCM_ESP3_0_RSSI -54
TCM_ESP3_0_ReceivingQuality excellent
TCM_ESP3_0_RepeatingCounter 0
TCM_ESP3_0_SubTelNum 6
TCM_ESP3_0_TIME 2022-03-20 12:06:25
TYPE EnOcean
READINGS:
2022-03-15 11:37:19 IODev TCM_ESP3_0
2022-01-21 19:40:54 alert on
2022-03-20 12:06:24 block unlock
2022-03-20 12:06:25 state off
helper:
Attributes:
IODev TCM_ESP3_0
alexaName LichtFlur
alexaRoom alexa
alias Licht_Flur_EG
comMode confirm
devChannel 255
eep A5-38-08
eventMap on:An off:Aus
fp_Erdgeschoss 527,322,0,Licht_Flur_EG,
genericDeviceType switch
group Flur_EG
gwCmd switching
manufID 00D
room EnOcean,alexa
subDef FF9E6D93
subType gateway
updateState yes
webCmd An:Aus
Und mein Code im FTUI:
<ftui-column>
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG"
[color]="Licht_Flur_EG | map('on:primary, off:dark')">
<ftui-icon name="lightbulb" color="medium"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
</ftui-column>
Ich schalte es im FTUI an, dann bleibt das ICON aber so wie ausgeschaltet, das Licht brennt und ich kann nur wieder das Kommando on senden wenn ich im FTUI drücke.
Liegt das am longpoll websocket? Benötige ich normalen longpoll 1?
Oder woran kann das liegen? Das binding müsste doch richtig sein...
Setze das color binding ins icon.
Da hast du color=medium gesetzt.
Im button wirkt es nur auf die button farbe.
Lg
Zitat von: mr_petz am 20 März 2022, 12:52:14
Setze das color binding ins icon.
Da hast du color=medium gesetzt.
Im button wirkt es nur auf die button farbe.
Lg
Geht trotzdem nicht...seltsam
Kann es an dem :
eventMap on:An off:Aus
Aus dem Device liegen?
Es muss natürlich das passende event vom device gesendet werden und bei ftui dann das passende gesetzt worden sein...
Lg
Edit:
Hier mal ein ähnliches szenario zu eventMap:
https://forum.fhem.de/index.php?topic=107353.0
Ich denke du musst dann auf An und Aus gehen...
Zitat von: mr_petz am 20 März 2022, 15:01:02
Kann es an dem :
eventMap on:An off:Aus
Aus dem Device liegen?
Es muss natürlich das passende event vom device gesendet werden und bei ftui dann das passende gesetzt worden sein...
Lg
Edit:
Hier mal ein ähnliches szenario zu eventMap:
https://forum.fhem.de/index.php?topic=107353.0
Ich denke du musst dann auf An und Aus gehen...
Hmmm....auch hier das gleiche Verhalten....immer wieder auf on bzw An....
Ich weiß nicht woran das liegt. Ich muss das binding vielleicht nochmal ändern. Auf was reagiert es auf STATE oder state im Standart?
Oder ich muss das binding mit dem ICON nochmal angehen.....ist doch kurios...
Und noch eine Baustelle hab ich...dein Thermostat bekomm ich nicht zum laufen. Ich hab mir die beiden Datein aus dein thermostat branch gezogen....die in einen ORdner in meinem FTUI gelegt...aber das konfigurierte Thermostat (auch 1:1 aus deinem Beispiel) taucht nicht auf...ich hab überall noch den Wurm drinnen....
Zitat von: Stonemuc am 22 März 2022, 12:56:23Hmmm....auch hier das gleiche Verhalten....immer wieder auf on bzw An....
Ich weiß nicht woran das liegt. Ich muss das binding vielleicht nochmal ändern. Auf was reagiert es auf STATE oder state im Standart?
Oder ich muss das binding mit dem ICON nochmal angehen.....ist doch kurios...
Warum gibst du das Reading hier eigentlich nicht an?
Zitat von: Stonemuc am 20 März 2022, 12:44:43<ftui-column>
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG"
[color]="Licht_Flur_EG | map('on:primary, off:dark')">
<ftui-icon name="lightbulb" color="medium"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
</ftui-column>
Anstelle von
[color]="Licht_Flur_EG | map('on:primary, off:dark')"würde ich
[color]="Licht_Flur_EG:READING | map('on:primary, off:dark')"erwarten, in deinem Fall wahrscheinlich
[color]="Licht_Flur_EG:state | map('on:primary, off:dark')"Die nächste Frage wäre, ob
Licht_Flur_EG:state auch ein Event erzeugt wenn sich eine Änderung ergibt - eocr sehe ich nicht in deinem List. Ohne Event bekommt FTUI (imho) nicht aktiv mit, dass sich was ändert sondern erst beim nächsten regulärem Datenabruf.
Zitat von: Stonemuc am 22 März 2022, 12:56:23Und noch eine Baustelle hab ich...dein Thermostat bekomm ich nicht zum laufen. Ich hab mir die beiden Datein aus dein thermostat branch gezogen....die in einen ORdner in meinem FTUI gelegt...aber das konfigurierte Thermostat (auch 1:1 aus deinem Beispiel) taucht nicht auf...ich hab überall noch den Wurm drinnen....
Das würde ich zum Einen in dem dafür vorgesehen Thread (https://forum.fhem.de/index.php/topic,123084.0.html) schreiben und zum Anderen
mehr Informationen liefern.
Zitat von: yersinia am 22 März 2022, 13:10:01
Warum gibst du das Reading hier eigentlich nicht an?Anstelle von
[color]="Licht_Flur_EG | map('on:primary, off:dark')"
würde ich
[color]="Licht_Flur_EG:READING | map('on:primary, off:dark')"
erwarten, in deinem Fall wahrscheinlich
[color]="Licht_Flur_EG:state | map('on:primary, off:dark')"
Die nächste Frage wäre, ob Licht_Flur_EG:state auch ein Event erzeugt wenn sich eine Änderung ergibt - eocr sehe ich nicht in deinem List. Ohne Event bekommt FTUI (imho) nicht aktiv mit, dass sich was ändert sondern erst beim nächsten regulärem Datenabruf.
Das würde ich zum Einen in dem dafür vorgesehen Thread (https://forum.fhem.de/index.php/topic,123084.0.html) schreiben und zum Anderen mehr Informationen liefern.
Das Reading gebe ich nicht an,w eil es in keinem der Beispielkonfigurationen gefordert ist - auf irgendetwas reagiert es ja "automatisch" beim binding - deshalb die Frage ob auf STATE oder state...
Ich kann ja mal einen Button mit :state angeben und schauen ob es dann klappt, aber dann erschließen sich die Beispielkonfiguartionen von setstate mir nicht wirklich...
[color]="Licht_Flur_EG"
oder
[value]="Licht_Flur_EG"
geht standardmäßig auf den STATE vom device.
Ich denke aber immer noch dass es am eventMap liegt.
Hast du es auch so getestet?:
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG" states="An,Aus">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG | map('An:primary, Aus:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
alternativ mal auf alert gehen (scheint ja auch on,off zu können)(für was das auch immer zuständig ist?):
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG" states="An,Aus">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG:alert | map('on:primary, off:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
oder wie yersinia schreibt mit state:
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG:state | map('on:primary, off:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
und wie er schreibt und ich schon schrieb muss natürlich immer ein Event ausgelöst werden damit es eine Änderung in FTUI gibt.
Edit: setze mal noch ein attr event-on-change-reading .* zum testen im device. Kannst du nach den test auch wieder rausnehmen.
Zitat von: mr_petz am 22 März 2022, 13:44:23
[color]="Licht_Flur_EG"
oder
[value]="Licht_Flur_EG"
geht standardmäßig auf den state vom device.
Ich denke aber immer noch dass es am eventMap liegt.
Hast du es auch so getestet?:
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG" states="An,Aus">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG | map('An:primary, Aus:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
alternativ mal auf alert gehen (scheint ja auch on,off zu können):
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG" states="An,Aus">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG:alert | map('on:primary, off:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
Edit: setze mal noch ein attr event-on-change-reading .* zum testen im device. Kannst du nach den test auch wieder rausnehmen.
Ich seh gerade, dass du die states beim value mit angibts....das hab ich überhaupt nicht drinnen...ich versuch es nochmal so und berichte. Kann es leider erst heute Abend testen...
[(value)]="Licht_Flur_EG" states="An,Aus">
Zitat von: Stonemuc am 22 März 2022, 14:43:07
Ich seh gerade, dass du die states beim value mit angibts....das hab ich überhaupt nicht drinnen...ich versuch es nochmal so und berichte. Kann es leider erst heute Abend testen...
[(value)]="Licht_Flur_EG" states="An,Aus">
states müssen nur angegeben werden, wenn sie vom Standard on/off usw abweichen.
Habe mal oben was abgeändert. es geht auf STATE. Also bei dir eigentlich auf An und Aus.
[(value)]="Licht_Flur_EG" states="An,Aus">Habe ich genommen, weil du es auch als webcmd hast.
LG.
Also:
STATE ist bei mir An/Aus
und
state ist bei mir normal on/off
Im Vorgänger FTUI war das so und hat funktioniert:
<div class="cell">
<div data-type="switch" data-device="Licht_Flur_EG" data-icon="fa-lightbulb-o" data-get="state"></div>
<div data-type="label" class="darker bottom-space">Flur EG</div>
</div>
<div class="cell">
Kurios, da hast du aber state bewusst angegeben:
data-get="state"
Und beim FTUI2 switch waren on|off auch als default implementiert (https://wiki.fhem.de/wiki/FTUI_Widget_Switch#Attribute_f.C3.BCr_zwei_Zust.C3.A4nde).
Warum versuchst du dich nicht erstmal einfach heranzutasten?
Versuch doch überhaupt erstmal das label zum laufen zu bekommen:
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG:state | map('on:primary, off:dark')"></ftui-icon>
Und dann schaltest du über FHEMWEB oder FTUI2 und schaust ob das Event durchgeht und sich das icon ändert. Danach baust du den Button drumherum.
Zitat von: Stonemuc am 22 März 2022, 15:02:06
Also:
STATE ist bei mir An/Aus
und
state ist bei mir normal on/off
Im Vorgänger FTUI war das so und hat funktioniert:
<div class="cell">
<div data-type="switch" data-device="Licht_Flur_EG" data-icon="fa-lightbulb-o" data-get="state"></div>
<div data-type="label" class="darker bottom-space">Flur EG</div>
</div>
<div class="cell">
Hier hast du ja data-get="state" angegeben!
Dann gib entweder den state im map on/off mit an.
oder ohne state mit states="An,Aus" und im map auch mit An/Aus ohne state.
Eines der beiden szenarien muss dann gehen.
A
<ftui-button
shape="circle"
(value)="Licht_Flur_EG" [value]="Licht_Flur_EG:state">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG:state | map('on:primary, off:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
B
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG" states="An,Aus">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG | map('An:primary, Aus:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
Edit oder noch
C
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG:state">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG:state | map('on:primary, off:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
Habe gerade nochmal in der ftui.binding.js nachgeschaut.
inputBinding=STATE ->https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L276
outputBinding=STATE ->https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L288
Also STATE ist standartmäßig das binding? Dann muss ich alles mappen auf state, denke ich....und dann bleib ich bei on/off.
Gebe heute Abend mal Rückmeldung.
Zitat von: Stonemuc am 22 März 2022, 16:44:38Aber nochmal zu meinem anderen Problem: Geht es, dass ich im Circlemenu Icons einblende anstelle vom Text? Wenn ja, wo ist mein Denkfehler, dass ich leere blaue Felder bekomme?
Funktioniert dies auch mit vollständigem code? Die ftui-icon Anweisung ist fehlerhaft:
<ftui-button (value)="FanSelectorDay" states="0"> <ftui-icon path="../images/openautomation/" [name]=vent_ventilation_level_0 </ftui-icon> </ftui-button>eher:
<ftui-button (value)="FanSelectorDay" states="0"> <ftui-icon path="../images/openautomation/" name="vent_ventilation_level_0"></ftui-icon> </ftui-button>
Danke - hat sich überschnitten. Ich hab gerade nochmal drübergeschaut gehabt, den Fehler bemerkt und hier den Post gelöscht - aber anscheinend hattest du zwischenzeitlich schon geantwortet.... :-\
<ftui-column>
<ftui-button
shape="circle"
[(value)]="Licht_Flur_OG" states="An,Aus"
[fill]="Licht_Flur_OG | map('Aus:outline, An:solid')">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
<ftui-label text="Flur OG"></ftui-label>
</ftui-column>und
<ftui-column>
<ftui-button
shape="circle"
(value)="Licht_Naehzimmer" [value]"Licht_Naehzimmer:state"
[fill]="Licht_Naehzimmer | map('off:outline, on:solid')">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
<ftui-label align-items="top" margin="1" text="Gästezimmer"></ftui-label>
</ftui-column>funktionieren....wobei die erste Variante schneller im FTUI den neuen Status zeigt. Also nehm ich die...danke für die Hilfe.
Zitat von: mr_petz am 22 März 2022, 15:17:53
Hier hast du ja data-get="state" angegeben!
Dann gib entweder den state im map on/off mit an.
oder ohne state mit states="An,Aus" und im map auch mit An/Aus ohne state.
Eines der beiden szenarien muss dann gehen.
A
<ftui-button
shape="circle"
(value)="Licht_Flur_EG" [value]="Licht_Flur_EG:state">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG:state | map('on:primary, off:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
B
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG" states="An,Aus">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG | map('An:primary, Aus:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
Edit oder noch
C
<ftui-button
shape="circle"
[(value)]="Licht_Flur_EG:state">
<ftui-icon name="lightbulb" [color]="Licht_Flur_EG:state | map('on:primary, off:dark')"></ftui-icon>
</ftui-button>
<ftui-label text="Flur EG"></ftui-label>
Habe gerade nochmal in der ftui.binding.js nachgeschaut.
inputBinding=STATE ->https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L276
outputBinding=STATE ->https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L288
Ok super und danke für die Rückmeldung.
So können andere User die auch mit eventMap arbeiten das Szenario anwenden.
LG
Zitat von: grossmaggul am 16 März 2022, 20:35:44
Leider ist es so, das reguläre Ausdrücke mich beherrschen. :o :(
Einen hab ich noch.... :D
Vielleicht ist es so für dich beherrschbar?:
<ftui-label [text]="ftuitest:string | (txt)=>{return txt.substr(0, 4)}"></ftui-label>
LG
Zitat von: mr_petz am 24 März 2022, 21:46:37
Einen hab ich noch.... :D
Vielleicht ist es so für dich beherrschbar?:
<ftui-label [text]="ftuitest:string | (txt)=>{return txt.substr(0, 4)}"></ftui-label>
LG
:D Nice!
Geht sogar noch kürzer:
| txt => txt.substr(0, 4)
Ich habe auch die ganze Zeit überlegt, wie man die vielen schönen JS String Funktionen als Pipe-Funktion nutzen könnte.
btw: bei der Frage, welche Funktion man dafür fest einbauen sollte, ist mir noch slice eingefallen
<ftui-label [text]="dummy2 | slice(0,2)"></ftui-label>
Ist zwar nicht so intuitiv, aber mächtiger, da man mit negativen Werten arbeiten kann.
danger | slice(0,2) => da
danger | slice(0,3) => dan
danger | slice(1,-1) => ange
danger | slice(3) => ger
Wert2 | slice(0,-1) => Wert
Wert2 | slice(4) => 2
@mr_petz
Zitat
Arrow functions were introduced in ES6.
You don't need the function keyword, the return keyword, and the curly brackets.
You can only omit the return keyword and the curly brackets if the function is a single statement.
Dieses Feature wird schon gerne bei den Komponenten genutzt. Dass man es quasi als anonyme Funktion auch im Pipe-Bereich verwenden kann, verdeutlicht die Möglichkeiten - sehr gut :)
Die minifizierte Version wäre übrigens noch kürzer ... t=>t.substr(0, 4) ... ;)
@OdfFhem
Wie immer war es zu erwarten dass du es erläuterst :D
Habe auch extra die Pfeilfunktion gewählt fur´s ES6.
Zum, in meinen Augen, besseren "nachvollziehen" habe ich die return Anweisung benutzt.
Das es auch kürzer geht war mir bewusst...
Das sollte auch nochmal ein Anschubser für setstate sein. Hat funktioniert ;D
@setstate
slice() ist eine super Idee als pipe.
Hier eine kleine Einschätzung von mir:
Die slice() und substr() Funktion ist ja "ähnlich".
substr() kann auch mit negativen Werten umgehen. Hier wird der negative Wert ausschließlich als erstes gesetzt und zählt von string.lenght rückwärts.
Bei slice() hingegen kann man mit 2 negativen Werten arbeiten.
danger | substr(2) => nger
danger | substr(-3) => ger
danger | substr(0,2) => da
danger | substr(0,3) => dan
danger | substr(-5,4) => ange
danger | substr(-3,2) => ge
Da ist dann slice() in meinen Augen die bessere Wahl.
slice() ist sehr logisch aufgebaut, funktional und flexibel.
Mit substring() kann man natürlich auch alle Varianten durchspielen, aber man muss immer Start und End mit angeben.
Fazit: Für die pipe würde ich dann schon slice() anwenden.
LG mr_petz
Edit: jetzt erst gesehen sorry... Du hast slice als pipe bereits eingebaut.
Irgendwas klemmt da wohl beim letzten Update, nachdem ich es eingespielt habe und die Seite neu geladen wurde, wird die Seite dunkler(man kann die ftui Oberfläche noch erkennen) und sie lässt sich nicht mehr bedienen, sprich es lässt sich keine Button etc. mehr anwählen.
Edit: Hat wohl was mit meiner selbstedfinierten Klasse semitransparent zu tun, ich weiß nur noch nicht was, ich forsche noch.
Edit2: Wohl doch nicht.
Habe das gleiche Problem.
Mit einer älteren ftui.js funktioniert es wieder.
Zitat von: stefan-dd am 26 März 2022, 20:41:43
Habe das gleiche Problem.
Mit einer älteren ftui.js funktioniert es wieder.
Bei mir läuft soweit alles ohne Probleme, bin auf dem aktuellen Stand mit fhem und ftui.
schließe mich dem an, Seite lädt erst und wird dann schwarz.
Vorherige ftui.js zurück kopiert und es funktioniert wieder.
Zitat von: stefan-dd am 26 März 2022, 20:41:43
Habe das gleiche Problem.
Mit einer älteren ftui.js funktioniert es wieder.
Ich habe mit der aktuellen Version keine Probleme.
Getestet mit verschiedenen Browsern und auf verschiedenen OSen.
Gruß LuGu
@all die Probleme haben.
Habt ihr auch mal den Browsercache geleert und mit Standardtheme getestet?
LG mr_petz
ZitatHabt ihr auch mal den Browsercache geleert und mit Standardtheme getestet?
Ja, habe ich und habe z.B. auch mal das retro theme benutzt, selbes Problem.
Da ich keine alte ftui.js hatte, habe ich versucht anhand des Patch Logs die Änderungen rückgängig zu machen, das Problem bleibt aber.
Bei mir läuft es nur im Microsoft Edge...Firefox bleibt die Seite nach dem Laden schwarz
@grossmaggul
Zitat von: grossmaggul am 27 März 2022, 14:58:16
Ja, habe ich und habe z.B. auch mal das retro theme benutzt, selbes Problem.
Da ich keine alte ftui.js hatte, habe ich versucht anhand des Patch Logs die Änderungen rückgängig zu machen, das Problem bleibt aber.
Ich hänge hier mal die vorhergehenden Dateien die geändert worden für dich an bis es gefixt ist.
Das hilft natürlich nicht bei der Fehleranalyse...
LG mr_petz
Edit: Oder du nimmst die aus meinem Thermostat-Branch. Das ist die vorhergehende Version:
https://github.com/mr-petz/ftui/tree/thermostat
Danke Dir!
Für Fehleranalyse bin ich leider zu kompetenzlos. :-\
Zitat von: grossmaggul am 27 März 2022, 18:30:28
Danke Dir!
Für Fehleranalyse bin ich leider zu kompetenzlos. :-\
Tu nicht so... ;D
Du bist doch hier ein Kind der ersten Stunde.... ;)
LG
Naja, aber außer Fehlermeldung und ein, zwei Tipps kann ich nicht viel dazu beitragen. :o
ZitatDu bist doch hier ein Kind der ersten Stunde.... ;)
Jo, aber eher das schwarze Schaf der Familie. ;D
schwarzes Schaf der Familie ist gut ;D ;D
Zum Thema. Für setstate habe ich mal eine kurze Sequenze zum verhalten aufgenommen.
Seite wird erst geladen und nach kurzer Zeit switcht die Seite wieder auf loading.
Siehe Anhang.
LG mr_petz
Edit: Der Test war auf meiner DemoSeite unter Chrome.
Ich konnte bei mir das Verhalten abstellen. Es war ein <ul> Eintrag der Readingslist von der SonosFavouritesRG. Diesen hatte ich komplett da stehen. Nach dem löschen der <ul> blieb die Seite hell!
Um genauer zu sein habe ich die 3 Einträge in der <ul> herausgefunden die bei mir Schuld sind (zumindest wenn die raus sind):
<li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://192.168.0.214:1400/getaa?s=1&u=x-sonosapi-stream%3Atunein%253a56140%3Fsid%3D303%26amp%3Bflags%3D8224%26amp%3Bsn%3D2); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&cmd.Sonos_Kueche%3Dset%20Sonos_Kueche%20StartFavourite%20sunshine%2520live%2520-%2520house')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://192.168.0.214:1400/getaa?s=1&u=x-sonosapi-stream%3Atunein%253a5619%3Fsid%3D303%26amp%3Bflags%3D8224%26amp%3Bsn%3D2); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&cmd.Sonos_Kueche%3Dset%20Sonos_Kueche%20StartFavourite%20ENERGY%2520Sachsen')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://192.168.0.214:1400/getaa?s=1&u=x-sonosapi-stream%3Atunein%253a25179%3Fsid%3D303%26amp%3Bflags%3D8224%26amp%3Bsn%3D2); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&cmd.Sonos_Kueche%3Dset%20Sonos_Kueche%20StartFavourite%20SacTownRadio')"></div></li>
Ich weis aber nicht an was es da liegt...Es liegt vermutlich an den background-image url´s. Die scheinen nicht erreichbar zu sein oder fehlerhaft und somit lädt ftui nicht durch???Die background-images werden in der Konsole unter Network mit status 200 angezeigt und im preview auch. Woran liegt es dann???
Wie kann man unter ftui-dropdown die Farben anpassen?
Man sieht keine Auswahlmöglichkeit.
<ftui-dropdown nochevron class="size-2" list="aus,auto,reduziert,komfort" [value]="Heizung_modus:state" (value)="Heizung_modus $value"></ftui-dropdown>
Dropdown benutzt bis jetzt nur ganz einfache <select> <option> HTML Tags. Diese lassen sich nicht per Style verändern. Das Style ist abhängig vom Browser. Man müsste eine andere Dropdown-Komponente bauen, die alles selbst erzeugt und styled.
Um dem Problem mit dem dunklen Bildschirm auf den Grund zu gehen, habe ich erstmal nur die neue ftui.js herüberkopiert und konnte, wie schon stefan-dd anmerkte, herausbekommen, daß das "Problem" wohl nur an dieser Datei liegt.
Da wurde dieser Teil mit einer if Abfrage entfernt:
// initially loading the page
// or navigating to the page from another page in the same window or tab
window.addEventListener('pageshow', () => {
if (typeof window.ftuiApp === 'undefined') {
// load FTUI
main();
} else {
window.ftuiApp.setOnline();
}
});
und main(); wanderte ans Ende.
Füge ich die if Anfrage wieder ein und entferne am Ende main() läuft's wieder.
Leider habe ich keinerlei Javascriptkenntnisse und kann daher auch nicht erkennen was das Problem dabei ist, aber irgendwer kann es bestimmt.;)
Zitat von: setstate am 28 März 2022, 22:46:08
Dropdown benutzt bis jetzt nur ganz einfache <select> <option> HTML Tags. Diese lassen sich nicht per Style verändern. Das Style ist abhängig vom Browser. Man müsste eine andere Dropdown-Komponente bauen, die alles selbst erzeugt und styled.
Stimmt nicht ganz ;)
Die Textfarbe kann er im ftui-dropdown anpassen:
<ftui-dropdown class="size-2" style="--text-color:var(--primary-color);"
nochevron
list="aus,auto,reduziert,komfort"
[value]="Heizung_modus:state"
(value)="Heizung_modus $value">
</ftui-dropdown>
LG mr_petz
Edit: Bordercolor auch Bsp.: --border-color:var(--primary-color)
Zitat von: setstate am 28 März 2022, 22:46:08Dropdown benutzt bis jetzt nur ganz einfache <select> <option> HTML Tags. Diese lassen sich nicht per Style verändern. Das Style ist abhängig vom Browser. Man müsste eine andere Dropdown-Komponente bauen, die alles selbst erzeugt und styled.
Wat? Imho müsste das mit CSS(3) durchaus gehen, ebenso mit dem HTML-Standard.
https://www.clickstorm.de/blog/dropdown-css3/
https://www.sliderrevolution.com/resources/css-select-styles/
https://de.w3docs.com/snippets/css/wie-kann-man-eine-select-box-drop-down-nur-mit-css-erstellen.html
Dann muss ich das relativieren. Unter Mac OS bleibt die <option> Liste immer gleich gestylt. Zumindest im Safari und Chromium. Firefox reagiert auf Farbvorgaben und benötigt auch Anpassungen, um die Lesbarkeit zu verbessern. -> mache ich noch
Unter Windows ist es stylebarer, Android habe ich noch nicht getestet.
Vermutlich eine gewollte Vorgabe seitens Apple, damit Webseiten das Design des Betriebssystem nicht stören. Eye-candy halt. ::)
Möglicherweise kann das schon mit einem -webkit-appearance: none; (https://www.clickstorm.de/blog/dropdown-css3/) abgestellt werden.
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
}
select::-ms-expand {
display: none;
}
https://www.clickstorm.de/blog/dropdown-css3/
Ich würde mal hier eine Demo zum Thema Dropdown posten.
Die ist rein css basierend.
Hier kann ja jeder testen ob so ein gestyltes Dropdown bei seinem Browser und OS gehen würde:
https://codepen.io/raubaca/pen/VejpQP
und
https://codepen.io/raubaca/pen/bGWmZje
LG mr_petz
Edit: unter Android bleibt der background der options dunkelgrau bei den Demos und es werden immer die Android-Option angezeigt.
Hier bei der Demo unter JS wird es Farbig und Android nimmt nicht seine Optionsliste:
https://jsfiddle.net/palak6041/Lg84fayz/6
wenn ich wüßte was man mit diesen links machen kann würde ich es testen., aber kein Plan von ;)
Zitat von: moonsorrox am 30 März 2022, 13:10:03
wenn ich wüßte was man mit diesen links machen kann würde ich es testen., aber kein Plan von ;)
Wenn alles geladen ist, erscheint in einem Fenster (ersten beiden ganz unten und 3. rechts unten) ein Dropdown. Das einfach benutzen und schauen ob es bei dir gestylet angezeigt wird oder nicht.
Ich weis nicht ob die Infos setstate was nützen. Für alle Plattformen (Browser/OS) wird es rein mit css nichts werden. Es wird nicht ohne Javascript gehen.
Android nimmt meistens immer seine eigene Option-Ansicht und IOS bestimmt auch...
LG
Edit: Nur zur info:
Das ftui-dropdown ist bei mir unter Android mit Fully bg=weiß und text=schwarz, mit Android und WallPanel bg=schwarz und text=weiß im darkmode sonst wie Fully! Es wird hier nicht das Android-Options genommen.
ich habe gerade ein Update mit meinem Zweitsytem gefahren und muss sagen es ist jetzt alles OK.
Ich werde mal schauen ob es auch beim Produktivsystem auch funktioniert.
Es könnte sein das setstate schon etwas gefixt hat..?!
EDIT:// nein es geht doch noch nicht...!!!
@setstate, @yersinia
ich habe mal auf Grundlage des ftui-dropdown und des ContentSonosFav ein benutzerdefiniertes Dropdown erstellt.
Unter Android und Windows sieht alles gut aus. IOS kann ich nicht testen.
Background und Text-color kann man anpassen und wird dargestellt.
Die Liste ist auch wie im ftui-dropdown nutzbar. Ich habe es nur mit meinen SonosFavourites getestet.
Ihr könnt es ja testen und wenn setstate will kann er es übernehmen (und wahrscheinlich noch bissl anpassen ;))
Einfach ins components Verzeichnis kopieren.
Settings sind wie im dropdown + Styleangaben wie im Beispiel.
Im animierten GIF ist das obere das ungestylte und das untere das gestylte.
<ftui-droplist
[list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:FavouriteDropdown"
(value)="encode() | Sonos_Kueche:StartFavourite $value"
delimiter="|">
</ftui-droplist>
<ftui-droplist class="size-2" left="10%" height="80px" style="--text-color:var(--black);--droplist-background-color:var(--medium-color)"
[list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:FavouriteDropdown"
(value)="encode() | Sonos_Kueche:StartFavourite $value"
delimiter="|">
</ftui-droplist>
LG mr_petz
Ich hab mir schon diese Links
Zitat von: mr_petz am 29 März 2022, 18:42:31https://codepen.io/raubaca/pen/VejpQP
https://codepen.io/raubaca/pen/bGWmZje
https://jsfiddle.net/palak6041/Lg84fayz/6
im Firefox unter Linux (Manjaro; FF98.0.2 64Bit), Win10 (FF98.0.2 32Bit) und Android 10 (FF98.3.0) angesehen - sieht überall gleich aus.
Ich
persönlich präferiere so wenig JS wie nötig - wenn es mit purem CSS geht, perfekt.
Ja unter FF geht es meistens und sieht gut aus. Diese Erfahrung musste ich schon öfters machen. Unter Chrome, Fully und Wallpanel sieht die Sache schon anders aus. Unter iOS denke ich mal auch...
LG
Edit: Bilder unter Android12 mit Chrome und Samsungbrowser.
Das letzte ist unter Chrome.
Siehe auch https://forum.fhem.de/index.php/topic,117779.msg1216690.html#msg1216690 (https://forum.fhem.de/index.php/topic,117779.msg1216690.html#msg1216690)
Ein herzerfrischendes "Moin" vom achtern Diek vorweg.
Mein ftui3 - Frontend ist im laufe der Zeit immer mächtiger geworden.
Leider hat dies die Reaktionszeit erheblich in Mitleidenschaft gezogen.
Meine Fragen daher:
a) Ist es möglich alle Videos im Hintergrund ruhen (einfrieren) zu lassen, bis das entsprechende Video sich aktiv im Vordergrund (Sichtbereich) befindet und erst dann den Datenstream beginnen zu lassen?
b) Ist es möglich, gewissen Labels eine Priorität einzuräumen. Die Anzeige der Fenstersensoren (icon & label) auf dem ftui3-Frontend verzögern sich teilweise um 4-5s gegenüber dem fhem-Frontend?
Danke für Eure Hilfe
Gruß
Sailor
Hallo Sailor,
das mit dem video gab es schon mal hier im Thread glaube ich. Zumindest hab ich es mir auch hier irgendwo kopiert.
<ftui-row>
<ftui-cell>
<span onclick="ftuiApp.fhemService.sendCommand('set System_Meisen_TV_URL http://192.168.178.1:8765/picture/1/frame/')">
<ftui-image src="http://192.168.178.1:8765/picture/1/current/"
width="450px" height="450px"
interval="30"
nocache
popup-target="popup-Meisen_TV"
></ftui-image>
</span>
</ftui-cell>
</ftui-row>
<ftui-popup id="popup-Meisen_TV" timeout="60" [open]="System_FTUI_Meisen_TV_PopUp_Anzeigen:state | map('on:true, off:false')" width="65%" height="90%" @close="sendFhem('set System_Meisen_TV_URL http://192.168.178.1:8083/fhem/www/ftui/leer.html; set System_FTUI_Meisen_TV_PopUp_Anzeigen off')">
<ftui-label slot="close" class="_header-close-style" popup-close>×</ftui-label>
<iframe ftui-binding [src]="System_Meisen_TV_URL:state" style="overflow:hidden; border:0; width:800px; height:640px;"></iframe>
</ftui-popup>
Gruß
Eisix
Hallo Eisix
Zitat von: Eisix am 04 April 2022, 22:55:16
das mit dem video gab es schon mal hier im Thread glaube ich. Zumindest hab ich es mir auch hier irgendwo kopiert.
Habe ich so umgesetzt. Danke!
Gruß
Sailor
Hallo zusammen,
meine FTUI3 Installation startet sehr langsam; bei der Analyse habe ich verschiedene Auffälligkeiten gefunden, bei deren Bewertung/Analyse ich eure Unterstützung erbitte.
Mangels wirklicher Kenntnis, habe ich mich ein wenig in der Chrome Console langgehangelt:
1.)
ich sehe wiederkehrend und in unregelmäßigen Abständen ein
Violation, Forced reflow while executing JavaScript took x ms
(x schwankt, ich habe Werte mit 90 aber auch 142ms beobachtet)
Details siehe Screenshot
Frage: wo kommt das her und wie kann ich das abstellen?
2.)
das button.component.js produziert >800 (!!) Fehlermeldungen der Art Violation, Added non-passive event Listener
Details siehe Screenshot.
Frage: habe ich bei der Config einen Fehler oder ist das ein Bug?
3.)
ich sehe wiederkehrend in der Console Meldungen
fhemservice - created filter with xx devices
websocket restart connection
websocket no connection found
refresh nest start in ms
ftuiapp init components - done
Details siehe Screenshot (mehrere)
FTUI3 läuft in einer eigenen FHEM Instanz; sowohl die FTUI3 als auch die Master Instanz laufen auf einem gemeinsamen Proxmox Host, Ressourcenauslastung dort ist unauffällig.
Frage: ist das normal im Zuge des Startups oder deutet das auf ein instabile Verbindungen hin?
4.)
Ich sehe wiederkehrend ftuiapp error, initcomponents - timedout in 5000ms
FTUI läuft mit Debuglevel 4, leider gibt mir die Console trotzdem keinerlei Hinweise, was da nun 5 Sekunden(!) gedauert hat.
Da ich diese Meldung mehrfach sehe, könnte dies auf die Ursache des langsamen Starts hinweisen.
Screenshots anbei.
Weiter Hinweis:
direkt nach dem Start sind es in Summe 95(!) derartige Fehlermeldungen
Frage: wie kann ich mich dem Thema nähern und herausfinden, welche Komponenten hier nicht geladen werden?
Vielen Dank vorab für eure Unterstützung.
Ralph.
Wie paar Posts zuvor beschrieben, nutze ich z.B. auch das reinholen eines Videos. In diesem Fall von meinen 3D-Drucker.
<iframe ftui-binding [src]="url.kossel:state" style="overflow:hidden; border:0; height:100%; width:100%; "></iframe>
im url.kossel:state ist nur
http://192.168.0.209:8081/
Gibt es eine Möglichkeit das reinkommende Video in der Größe zu skalieren?
Mit den obigen Angaben height und width modifiziere ich nur den iframe. Das was reingeladen wird bleibt immer gleich.
LG
Matthias
Hi Matthias.
Du könntest es responsive einbinden.
Demo:
https://codepen.io/drweb/pen/vYBaYdv/
Hier noch eine Erklärung dazu:
https://martinahonecker.com/youtube-videos-responsive-einbinden/
Ich hoffe das es bei dir so funzt.
LG mr_petz
Danke, ich hab's sogar hinbekommen, ohne dass ich von dem css&div-Gedöns wirklich Ahnung habe. ;D
Mal eine kurze Fachfrage...wenn ich möchte, dass ein Icon immer springt, außer bei einem bestimmten Wert...wie löse ich das?
state vom Device wäre im Prinzip bei "Nichtnbutzung" --> Idle, ansonsten steht das jeweilige Programm im state
Ich hab es so versucht:
<ftui-icon path="../images/openautomation" name="scene_cooking" [class-name]="MCC9555DWC:state | map('!Idle:hop,Idle:')"></ftui-icon>
Klappt leider nicht.
Gibt es da eine Möglichkeit?
Probiere mal so:
<ftui-icon path="../images/openautomation" name="scene_cooking" [class-list]="MCC9555DWC:state | map('.*:hop,Idle:')"></ftui-icon>
.*=>hop ansonsten bei Idle passiert nix...
LG
Danke....da hätte ich auch selbst drauf kommen können - den Wald vor leuter Bäumen nicht gesehen :o
Mal gerade zwischengefragt, kann man die Iconstati auch kombinieren, also z.B. blinken und hoppen gleichzeitig?
Zitat von: grossmaggul am 19 April 2022, 17:14:06
Mal gerade zwischengefragt, kann man die Iconstati auch kombinieren, also z.B. blinken und hoppen gleichzeitig?
Meines Wissens geht immer nur eine Animation ftui3. Du kannst noch andere nicht animierte Klassen durch Leerstelle mit angeben. Bsp:
| map('.*:hop size-3 faded,Idle:')
Um mehrere Animationen zu vereinen, müsste man die Klassen sich abwechseln lassen oder eine neue css Animation erstellen.
LG mr_petz
Edit:
Du kannst dir so eine Klasse in einer user.css anlegen. Hier ist hop und blink vereint:
Wird dann mit multi aufgerufen...
Bsp:
.multi {
animation: mix 1.2s infinite;
}
@keyframes mix {
0% {
transform: scale(1, 1) translateY(0);
}
10% {
transform: scale(1.1, .9) translateY(0);
}
30% {
transform: scale(.9, 1.1) translateY(-1em);
}
50% {
transform: scale(1.05, .95) translateY(0);
opacity: 0.2;
}
57% {
transform: scale(1, 1) translateY(-0.1em);
}
64% {
transform: scale(1, 1) translateY(0);
}
100% {
transform: scale(1, 1) translateY(0);
}
}
Danke, ich wollte das eigentlich nur wissen und Dich nicht zur Arbeit animieren. ;)
Ich fühlte mich animiert ;D
Ich bin ja absoluter Anfänger und von FTUI3 echt begeistert.
Ohne viel Kenntnisse konnte ich mit den Beispielen meine kleine FHEM Oberfläche sinnvoll aufs Handy umsetzen.
Die erste Sache die ich nun nicht hinbekomme ist ein einfacher "AN Aus" Befehl.
Ich habe mit Tasmota einen RGBW Stripe in 2 Teile "gehackt", so dass ich den Weiß-Teil extra schalten / dimmen kann.
Dazu habe ich die Befehle "set on1" und set off1" im FHEM eingesetzt. Für das Dimmen gibt den Wert "white" (dezimal 0....100)
Also habe ich das FTUI3 Colorpicker Example genommen und folgendes probiert:
</ftui-grid-tile>
<ftui-grid-tile row="6" col="2" height="5" width="4">
<ftui-label size="4" color="orange" >Carport Weiß</ftui-label>
<ftui-colorpicker direction="horizontal" layout="valueSlider"
[brightness]="Carport:white | toInt()"
(brightness)=" toInt() | Carport:white">
</ftui-colorpicker>
<ftui-switch [(value)]="Carport" texts='on1,off1'></ftui-switch>
</ftui-grid-tile>
Gesendet wird aber immer nur "on" und "off", nicht "on1" und "off1".
Wo ist da meine Wissenslücke?
Ich dachte den zu sendenden Text hier festlegen zu können?
So geht der RGB Teil an und aus ,der mit "on" und "off" gesteuert wird.
Auch ist der Slider trotz direction="horizontal" vertikal angeordnet?
Dimmen tut der aber wie er soll.
Hi, du musst im switch deine states angeben, da sonst immer der Standard on/off genommen wird.
<ftui-switch [(value)]="Carport" states="on1,off1" texts="on,off"></ftui-switch>
Hier muss aber im STATE vom Device dann auch on1 und off1 stehen, da sonst der Zustand vom switch nicht stimmt.
Die texts sind "nur" für die Anzeige im switch.
LG mr_petz
Edit:
Bezüglich der direction vom colorpicker. lösche den Eintrag direction="horizontal" und der slider ist horizontal.
ps. Zum reinen Dimmen könntest du auch den ftui-slider nehmen.
Danke, läuft jetzt wie gewünscht.
Und wieder was gelernt!
Mal eine Frage zum FTUI3 auf dem Handy.
Ich habe das FTUI eigentlich für ein Tablet gebastelt - dort wird es richtig angezeigt - auf dem PC auch.
Wenn ich allerdings den Browser auf dem Smartphone öffne, versucht es die Teile schon irgendwie klein zu schieben, allerdings mit mäßigem Erfolg.
Gibt es ein extra theme?
Ich hab folgendes im head stehen:
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/mobile-dark-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
Zitat von: mr_petz am 30 März 2022, 21:35:34
@setstate, @yersinia
ich habe mal auf Grundlage des ftui-dropdown und des ContentSonosFav ein benutzerdefiniertes Dropdown erstellt.
Unter Android und Windows sieht alles gut aus. IOS kann ich nicht testen.
Background und Text-color kann man anpassen und wird dargestellt.
Die Liste ist auch wie im ftui-dropdown nutzbar. Ich habe es nur mit meinen SonosFavourites getestet.
Ihr könnt es ja testen und wenn setstate will kann er es übernehmen (und wahrscheinlich noch bissl anpassen ;))
Einfach ins components Verzeichnis kopieren.
Settings sind wie im dropdown + Styleangaben wie im Beispiel.
Im animierten GIF ist das obere das ungestylte und das untere das gestylte.
<ftui-droplist
[list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:FavouriteDropdown"
(value)="encode() | Sonos_Kueche:StartFavourite $value"
delimiter="|">
</ftui-droplist>
<ftui-droplist class="size-2" left="10%" height="80px" style="--text-color:var(--black);--droplist-background-color:var(--medium-color)"
[list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:FavouriteDropdown"
(value)="encode() | Sonos_Kueche:StartFavourite $value"
delimiter="|">
</ftui-droplist>
LG mr_petz
Und noch ne Frage: Wie bekomme ich so einen schönen Knob hin?
Erste Frage:
Das reine MobileTheme ist das:
https://knowthelist.github.io/ftui/www/ftui/examples/mobile.html
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/mobile.html
Zweite Frage:
Das ist mein Volume3DKnob
https://forum.fhem.de/index.php/topic,122208.0.html
https://github.com/mr-petz/ftui/tree/volume3d/www/ftui/components/volume3d
LG mr_petz
Das Mobilthema hatte ich auch schon auf der Seite im Github gefunden, allerdings versteh ich das dazugehörige Beispiel nicht. Da scheint ja lles gravierend anders zu sein.
Naja...dann lass ich es einfach wie es ist.
Aber deinen Volume3DKnob werde ich auf jeden Fall noch einbauen....
Zitat von: setstate am 19 Februar 2022, 22:09:17
swiper2 ist nur die id des Swiper, keine Reading, was man beim Binding benutzen kann.
Man müsste dem Swiper erst ein passendes Binding verpassen
entweder Richtung FHEM
<ftui-swiper id="swiper2" [(value)]=dummySwiper >
oder rein lokal
<ftui-swiper id="swiper2" [(value)]=local:swiper2 >
Dann kann man die Änderung auch als Farbänderung nutzen.
[color]="local:swiper2 | map('sw2_5:primary,.*:currentColor')"
Funktioniert bei jemand der
swiper2 aus dem Beispiel:
https://knowthelist.github.io/ftui/www/ftui/examples/swiper.html (https://knowthelist.github.io/ftui/www/ftui/examples/swiper.html)
Bei mir funktioniert es weder in Firefox noch in Chrom so, wie es gedacht ist.
Wenn ich die Chevron Buttons benutze, funktioniert es, aber wenn ich "garage-variant" oder "projector" benutze funktioniert es mal, aber meistens nicht.
Meiner Meinung nach funktioniert das:
onclick="swiper2.value = 'sw2_5'"nicht zuverlässig.
Wenn jemand ein Tipp hat, wäre ich sehr dankbar. Ich wollte das gleiche Prinzip nutzen, um vom Tageswetter auf die jeweils detaillierte Vorhersage um zu schalten (beim Click auf das Wettericon des jeweiligen Tages)
Sagt mal, wo bekomme ich das IconSet "Kleinklima" her?
Ich suche schon ne Ewigkeit, finde es aber nicht zum Download?
Bin ich zu blöd?
Hier in der weather.zip sind die mit drin:
https://forum.fhem.de/index.php/topic,96954.msg901188.html#msg901188
LG
Danke, habe ich geladen. Alle Icons sind im .png Format.
Setze ich bei meinem Wetter
icon-set="kleinklima"
ein, dann sucht er eine .svg Datei, die dann natürlich fehlt.
Muss ich die alle einzeln umwandeln?
OK: mit icon-set=kleinklimaFHEM" gehts!
Für .png musst du icon-set kleinklimaFHEM verwenden.
LH
Moin zusammen,
nach Monaten bin ich mal wieder hier präsent, nachdem ich am Wochenende (wg anderer Probleme) ein "update all" machen musste.
Ihr habt inzwischen sicherlich eine Menge Änderungen einfliessen lassen, ich habe grade auch schon danach gesucht, wurde aber nicht fündig.
Zwei optische Änderungen gab es bei mir, um die ich mich kümmern muss:
1.) Farbwert geändert
Die Farbe "blue" ist verändert worden. Vermutlich sollte ich hier nun definierte hex-werte eintragen, anstatt die Vorgabedefinitionen zu ändern (die zukünftige Updates überschreiben würden), oder gibt es zwischenzeitlich weitere per Text wählbare Farben ?
Die neue "blue" Farbe ist recht dunkel geworden, das gefällt mir für meinen Anwendungsfall nicht so ganz (sieht man auch etwas im Screenshot).
2.) Wettericons geändert
Ich nutze die bas-Wettericons. Meine Konfig ist noch vomn Jahreswechsel, wo zur Diskussion stand, ob Ihr Dateinamen mit Prefix nutzen wollt, oder nicht.
Ergo habe ich alle Dateien nach dem Update umbenannt in "bas_clear...png" - nun wurden sie erstmal wieder angezeigt, Fehler behoben.
Was ich nicht hinbekommen habe, und ich verstehe die Ursache auch nicht, am Beispiel der Sonne, die innere Fläche der Sonne ist nun hellgrau dargestellt und zeigt dort nicht mehr die Hintergrundfarbe der Box an, wie sie soll. Dies Problem betrifft diverse Wettericons, die alle irgendwo eine in sich geschlossene Kontur haben.
Zuerst hatte ich die Bilddatei unter Verdacht, weil selbige beim Update erneut runtergeladen wurde. Ergo überschrieb ich sie mit der File aus meinem Backup - ohne Besserung.
Da es aktuell regnet, habe ich kurzerhand das Problem in Photoshop für Euch simuliert, siehe Anhang.
Woran kann es liegen?
@Dracolein
Willkommen zurück :)
zu 1.
Es gab mehrere color Änderungen in den Themes:
Hier z.Bsp.:
https://github.com/knowthelist/ftui/commit/f7a30a6eb6ad2106f17b505aa943dcf4bd7e70fc#diff-503eb3f1aded0166f651233f5423b770c005a38390e170ffe46624118f88b296
und mobile-theme:
https://github.com/knowthelist/ftui/commit/f7a30a6eb6ad2106f17b505aa943dcf4bd7e70fc#diff-5111255ac364faaa4a1b7693f55fef5be0a63711fa281f4684ec40a25abcd96c
und paar Themes sind dazu gekommen.
Das blue hat sich aber vom Hexwert im ftui-theme und in der color-attributes nicht geändet.
Jetzt kommt es drauf an welches Theme du hast.
Oder du erstellst dein eigenes Blau in einer user.css. So wird es nicht beim nächsten update geändert.
zu2.
Hast du auch den letzten Stand von basmilius (da waren auch paar updates die letzte Zeit)?
Wie sieht deine Definition jetzt aus? Es gab ja mehrere Änderungen in der weather.map.
Zur Zeit gibt es bas, basfill und basline als iconset.
Vermutlich hast du bas iconset, weil du alle in bas_ umbenannt hast.
Das soll in den nächsten Versionen komplett wegfallen:
https://github.com/knowthelist/ftui/blob/dc688a618d49a244dd84d0bb9a8b0bd4e5bf992d/www/ftui/components/weather/weather.map.js#L159
Bei basline z.Bsp. wäre es normal:
https://github.com/knowthelist/ftui/blob/dc688a618d49a244dd84d0bb9a8b0bd4e5bf992d/www/ftui/components/weather/weather.map.js#L237
und du kannst die Icons direkt übernehmen von basmilius ohne umbenennen.
Zieh sie dir nochmal neu und setze das iconset auf basline (Pfad wäre dann /icons/weather/bas/line/all/), weil bei mir ist alles gut. siehe Anhang.
LG mr_petz
Edit:
zum testen der Sonne kannst du diesen Code verwenden:
(Der ist unabhängig vom Reading)
<ftui-weather size="0" icon-set="basline" provider="proplantaICON" condition="t1">CLOUDLESS</ftui-weather>
alternativ:
<ftui-weather size="0" icon-set="basline" provider="proplantaICON_LONG" condition="https://www.proplanta.de/wetterdaten/images/symbole/t1.gif">CLOUDLESS</ftui-weather>
Zitat von: megadodopublications am 08 April 2022, 16:50:34
Hallo zusammen,
meine FTUI3 Installation startet sehr langsam; bei der Analyse habe ich verschiedene Auffälligkeiten gefunden, bei deren Bewertung/Analyse ich eure Unterstützung erbitte.
Mangels wirklicher Kenntnis, habe ich mich ein wenig in der Chrome Console langgehangelt:
3.)
ich sehe wiederkehrend in der Console Meldungen
fhemservice - created filter with xx devices
websocket restart connection
websocket no connection found
refresh nest start in ms
ftuiapp init components - done
Details siehe Screenshot (mehrere)
FTUI3 läuft in einer eigenen FHEM Instanz; sowohl die FTUI3 als auch die Master Instanz laufen auf einem gemeinsamen Proxmox Host, Ressourcenauslastung dort ist unauffällig.
Frage: ist das normal im Zuge des Startups oder deutet das auf ein instabile Verbindungen hin?
Hallo megadodopublications
zu Punkt 3:
Habe das mal getestet. Bei mir ähnliches Verhalten und Konfiguration mit LXC Proxmox Container
Es kann ca 300x keine Connection gefunden werden.
Gleiches Verhalten auf dem FHEM Webserver.
Hast du schon etwas finden können warum das so ist?
Internals:
BYTES_READ 5994649
BYTES_WRITTEN 185691555
CONNECTS 608
DEF 8001 global
FD 11
FUUID 5e133be7-f33f-abcc-0498-91f6223522f57eda
NAME WWW_FTUI
NR 100
NTFY_ORDER 50-WWW_FTUI
PORT 8001
STATE Initialized
TYPE FHEMWEB
READINGS:
2022-04-21 18:57:11 state Initialized
Attributes:
CORS 1
DbLogExclude .*
csrfToken none
csrfTokenHTTPHeader 1
group WEB
icon rc_WEB
longpoll websocket
room 00_SystemGrüsse
Zitat von: mr_petz am 25 April 2022, 17:40:38
Hast du auch den letzten Stand von basmilius (da waren auch paar updates die letzte Zeit)?
Wie sieht deine Definition jetzt aus? Es gab ja mehrere Änderungen in der weather.map.
Zur Zeit gibt es bas, basfill und basline als iconset.
Vermutlich hast du bas iconset, weil du alle in bas_ umbenannt hast.
Das soll in den nächsten Versionen komplett wegfallen:
https://github.com/knowthelist/ftui/blob/dc688a618d49a244dd84d0bb9a8b0bd4e5bf992d/www/ftui/components/weather/weather.map.js#L159
Bei basline z.Bsp. wäre es normal:
https://github.com/knowthelist/ftui/blob/dc688a618d49a244dd84d0bb9a8b0bd4e5bf992d/www/ftui/components/weather/weather.map.js#L237
und du kannst die Icons direkt übernehmen von basmilius ohne umbenennen.
Zieh sie dir nochmal neu und setze das iconset auf basline (Pfad wäre dann /icons/weather/bas/line/all/), weil bei mir ist alles gut. siehe Anhang.
Ich hab mir die bas-icons nochmal neu gezogen und in dem vorgesehenen Pfad eingefügt ( /icons/weather/bas/line/all/)
Meine Definition sieht so aus:
<ftui-weather popup-target="wettervorhersage" class="size-7" icon-set="basline" provider="proplantaICON" [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>
("bas" habe ich bereits in "basline" geändert - Darstellung funktioniert grundsätzlich)
Habe die Sache mittels Deines Codeschnipsels getestet:
Zitat von: mr_petz am 25 April 2022, 17:40:38
alternativ:
<ftui-weather size="0" icon-set="basline" provider="proplantaICON_LONG" condition="https://www.proplanta.de/wetterdaten/images/symbole/t1.gif">CLOUDLESS</ftui-weather>
und weiß der Teufel warum, so sieht es weiterhin aus:
Mhh.
Cache vom Browser geleert?
Welches Theme benutzt du?
Cache geleert.
<link href="themes/ftui-theme.css" rel="stylesheet">
Chromium Version 92.0.4515.98
Also ich konnte weder in chrome, edge, FF ein Fehlverhalten feststellen.
Getestet mit den statischen noch mit den animierten Icons von bas.
Hast du irgendeinen Eintrag in einer user.css mit svg?
Vielleicht auch mal chromium aktualisieren. v98.0.4758.107 ist die Aktuelle...
LG
Kurios, hier getestet im Firefox, siehe Anhang.
Die Füllfarbe, dieses grau ist #BFBFBF (lt. Photoshop) und diese Änderung bei mir ist zweifelsohne erst seit meinem letzten "Update all" vor wenigen Tagen.
Die Icons sind definitiv transparent, das konnte ich testen.
Es wirkt, als sei - und ich habe hier überhaupt keinen Schimmer - irgendwo definiert, dass bei gewissen Bildern eine Hintergrundfarbe =#BFBFBF verwendet werden soll?
Zitat von: Dracolein am 27 April 2022, 08:25:58Es wirkt, als sei - und ich habe hier überhaupt keinen Schimmer - irgendwo definiert, dass bei gewissen Bildern eine Hintergrundfarbe =#BFBFBF verwendet werden soll?
Kommentiere mal Zeile 23 in der icon.component.css (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L23) aus:
/* fill: inherit !important; */Die bezieht sich auf das sub-element
g unter
svg.
Dann einmal komplett neu laden - inkl geleertem cache.
Wenn das noch nicht hilft, auch Zeile 18 (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L18) auskommentieren:
/* fill: inherit; */Dann einmal komplett neu laden - inkl geleertem cache.
Wenn das noch nicht hilft, auch Zeile 13 (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L13) auskommentieren:
/* fill: currentColor; */Dann einmal komplett neu laden - inkl geleertem cache.
Die Änderungen sind erst mal zum Testen, werden beim nächsten Update überschrieben wenn icon.component.css nicht exkludiert wird.
Das Update (https://github.com/knowthelist/ftui/commit/bd879ca98ca12d84215a2a62b779fbae413e7d0b) kam am 20. Januar imho.
EDIT:
Zitat von: Dracolein am 27 April 2022, 08:25:58#BFBFBF verwendet werden soll?
Das kommt von der Vordergrundfarbe, welche --light ist und als
--light: #bfbfbf;definiert (https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/ftui-theme.css#L27) ist.
currentColor (https://css-tricks.com/currentcolor) übernimmt den Farbwert der Vordergrundfarbe (
color) und übernimmt diesen (hier) als Hintergrundfarbe.
Ich weiss nicht, ob du es mit inline CSS überschreiben werden kannst, kannst es aber versuchen.
Kurze Nachfrage: "komplett neu laden" = shutdown restart? Oder reicht es den Browser neu zu laden (inkl Cache leeren) ?
Zitat von: Dracolein am 27 April 2022, 09:26:57Oder reicht es den Browser neu zu laden (inkl Cache leeren) ?
Browser reicht; nur um sicherzustellen, dass der Browser die aktualisierten Dateien neu lädt.
Wenn du du mit dem WebDeveloper Tool vom Firefox umgehen kannst, kannst du das auch on-the-fly ändern: dort kannst du zur Laufzeit die CSS manipulieren; insbesondere Einträge löschen & hinzufügen. ;)
Zitat von: yersinia am 27 April 2022, 08:47:04
Kommentiere mal Zeile 23 in der icon.component.css (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L23) aus:
/* fill: inherit !important; */
Die bezieht sich auf das sub-element g unter svg.
Dann einmal komplett neu laden - inkl geleertem cache.
Dies hier führt zum gewünschten Ergebnis bei den bas-Icons, bringt aber Probleme bei anderen, im Einsatz befindlichen SVG-Icons, dessen Farben ich so definiert habe
<ftui-icon path="../images/openautomation" name="control_arrow_down_right" size="-2" color="red"></ftui-icon>Diese Icons sind dann einfach nur noch schwarz, so wie die originale Bilddatei
Ja, mit Nebeneffekten war zu rechnen. Ich musste etwas probieren und hatte gehofft, dass man mit einem spezifischen selector hier auf basline einige spezifischen Werte an die SVG unterhalb von ftui-weather übergeben kann; in etwa so:
ftui-weather[icon-set="basline"] > span > svg g [fill],
ftui-weather[icon-set="basline"] > span > svg g[fill],
ftui-weather[icon-set="basline"] > span > svg path[fill] {
fill: none !important;
}
Aber dies funktioniert irgendwie nicht. Eventuell muss ich mir das nochmal genauer ansehen. Oder setstate. ;D
Durchs Testen habe ich dann aber noch einen anderen Weg gefunden, kann aber die Nebeneffekte nicht testen (aka ich sehe keine bei mir):
Einmal Zeile 13 (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L13) auskommentieren:
/* fill: currentColor; */
und die Zeilen 16 und 17 (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L16) ändern:
/* svg g[fill],
svg g [fill] { */
svg g[fill] {
(entfernt die svg g [fill] Selektion)
Dadurch wird das fill-Element der basline svgs nicht übersteuert.
@Dracolein,
ich hatte die gleichen Effekte. Bei mir lag es aber an den bas icons.
Habe die bas icons in fhem gelöscht und neu direct von git geholt.
https://github.com/basmilius/weather-icons.git (https://github.com/basmilius/weather-icons.git)
Danach war alles bestens ohne irgendwelche css Änderungen.
Gruß LuGu
Zitat von: LuGu am 27 April 2022, 12:31:51
@Dracolein,
ich hatte die gleichen Effekte. Bei mir lag es aber an den bas icons.
Habe die bas icons in fhem gelöscht und neu direct von git geholt.
https://github.com/basmilius/weather-icons.git (https://github.com/basmilius/weather-icons.git)
Danach war alles bestens ohne irgendwelche css Änderungen.
Gruß LuGu
Erkläre mir, wie du die Dateien "geholt" hast. Möglicherweise liegt dort mein Fehler (?). Ich habe sie einzeln per "Speichern unter" runtergeladen, da ich nirgendwo ein Package als Download fand.
Zitat von: LuGu am 27 April 2022, 12:31:51Habe die bas icons in fhem gelöscht und neu direct von git geholt.
https://github.com/basmilius/weather-icons.git (https://github.com/basmilius/weather-icons.git)
Man man man, da hätte man ja auch drauf kommen können @LuGu. *facepalm* ::) danke für den Tipp.
Was mich hier aber (noch) stört ist, dass die Wolken unten nicht geschlossen sind bei zB cloudy. Aber man muss auch anmerken, dass das neue Release 3 noch nicht raus ist.
Zitat von: Dracolein am 27 April 2022, 12:49:31Erkläre mir, wie du die Dateien "geholt" hast. Möglicherweise liegt dort mein Fehler (?). Ich habe sie einzeln per "Speichern unter" runtergeladen, da ich nirgendwo ein Package als Download fand.
github idF und stellt dir das repository als zip zur Verfügung: https://github.com/basmilius/weather-icons/archive/refs/heads/dev.zip (https://github.com/basmilius/weather-icons/archive/refs/heads/dev.zip) (das kann man dann auch via wget dann auf den Raspi ziehen)
Die basline animierten svgs findest du dann unter
weather-icons/tree/dev/production/line/svg.
Habe die bas-icons auf dem raspi gelöscht, danach die zip-file runtergeladen, entpackt und die icons wieder in das richtige Verzeichnis verschoben.
Danach Cache leeren, Browserneustart, zur Sicherheit 2fach gemacht, weiterhin ohne Erfolg.
Ich glaube weiterhin nicht, dass die Icons das Problem sind, zumal obiger Hinweis von @yersinia bereits einen Effekt bei mir hatte - wenn auch mit erheblichen Nebenwirkungen.
Zitat von: yersinia am 27 April 2022, 12:10:12
Durchs Testen habe ich dann aber noch einen anderen Weg gefunden, kann aber die Nebeneffekte nicht testen (aka ich sehe keine bei mir):
Einmal Zeile 13 (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L13) auskommentieren:
/* fill: currentColor; */
und die Zeilen 16 und 17 (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L16) ändern:
/* svg g[fill],
svg g [fill] { */
svg g[fill] {
(entfernt die svg g [fill] Selektion)
Dadurch wird das fill-Element der basline svgs nicht übersteuert.
Dieser Versuch behebt bei mir erneut die bas-icon-Problematik, belässt aber die o.g. Nebenwirkungen, dass andere svg-Icons nicht mehr eingefärbt dargestellt werden.
Leute sorry, ich weiß nicht wie das passieren konnte, aber der Fehler liegt bei mir!
Und zwar habe ich irgendwie die geänderte Iconset-Definition im Code nicht abgespeichert! Dort stand bis grade
icon-set="bas"
Wo ist der Smilie, der den Kopf gegen die Wand klatscht.... big sorry.
Mit
icon-set="basline"
läuft alles!
Zitat von: mr_petz am 25 April 2022, 17:40:38
...
Zieh sie dir nochmal neu und setze das iconset auf basline (Pfad wäre dann /icons/weather/bas/line/all/), weil bei mir ist alles gut. siehe Anhang.
LG mr_petz
...
Hatte ich hier alles schon erläutert... ;)
Aber schön das es jetzt funzt...
LG
Hallöchen,
wie kann ich Credential beim Aufruf übergeben?
Wenn ich meine Seite https://USER:PASSWORD@fhem.ZUHAUSEBEIMIR.de/fhem/ftui/handy.html
aufrufe erscheint diese zwar es gibt aber ein paar Einschränkungen.
Die Icons werden zb nicht angezeigt.
In der BrowserConsole findet sich der Fehler
TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: icons/none.svg
at FtuiWeather.loadIcon (icon.component.js:79:7)
at FtuiWeather.onAttributeChanged (weather.component.js:39:14)
at FtuiWeather.attributeChangedCallback (element.component.js:76:12)
at FtuiWeather.set (element.component.js:171:25)
at ftui.binding.js:115:41
at Array.forEach (<anonymous>)
at FtuiBinding.onReadingEvent (ftui.binding.js:95:8)
at Object.observer (ftui.binding.js:60:69)
at ftui.helper.js:508:53
at Array.forEach (<anonymous>)
(anonymous) @ icon.component.js:84
Hab da was bei Google zu gefunden bin aber ehrlich gesagt nicht schlau draus geworden.
@Dracolein, @yersinia, @LuGu
Ich hatte jetzt Zeit die ftui-weather Geschichte nachzustellen.
Man muss hier klar unterscheiden zwischen bas-master und bas-dev.
bas-dev: https://github.com/basmilius/weather-icons/tree/dev ist mit den offenen Wolken und dünneren Linien etc..
bas-master: https://github.com/basmilius/weather-icons/tree/master mit den Weiß im inneren der Sonne (im FTUI3) und etwas dickeren Linien.
Normal wäre ja ein master die Releaseversion, aber irgendwie steht das git auf dev wenn man es aufruft???
Wer die bas-master weiterhin nutzen möchte ohne dem Weiß im inneren der Sonne, Wolken etc. gibt in einer user.css folgendes ein:
ftui-weather {
--color-base: transparent;
}
Damit wird nur bei ftui-weather und bas-master das innere Transparent.
Edit: alternativ kann man in dem <ftui-weather> tag:
color="transparent"
mit angeben, da sich currentColor darauf bezieht.
getestet unter FF und Chrome
LG mr_petz
Hi. kleines Update für die bas-dev line animated Icon´s.
Ich habe die Wolken geschlossen bei den animierten Line Icon´s.
Die benötigten wären:
overcast
overcast-day
overcast-night
partly-cloudy-day
partly-cloudy-night
partly-cloudy-day-fog
partly-cloudy-night-fog
Diese findet ihr im Anhang.
Ich habe nur im entsprechenden path die untere Öffnung mit "L 295.5 223.5" geschlossen.
Wer es noch bei den still Icon´s machen will, hier ist der path der Wolke:
M295.5 223.5a56 56 0 000-112l-2.5.1a83.9 83.9 0 00-153-64.2 56 56 0 00-84.6 48.1 56.6 56.6 0 00.8 9 60 60 0 0011.2 119 L 295.5 223.5
Einfach mit Notepad++ oder ähnlichen bearbeiten.
LG mr_petz
Zitat von: mr_petz am 29 April 2022, 10:42:40Ich habe nur im entsprechenden path die untere Öffnung mit "L 295.5 223.5" geschlossen.
Cool, Danke. :)
Mir ist zusätzlich aufgefallen, dass zumindest im Firefox die Animationen nicht funktionieren (zB beim rain.svg). Firefox meckert nicht interpretierbare Werte für Werte zwischen 1 und -1 an; ein Beispiel:
Unerwarteter Wert 0s; x1.end+.33s beim Parsen des Attributs begin.Auf der Konsole konnte ich das durch suchen und ersetzen fixen. Der erste Befehl wechselt in das Verzeichnis mit den animierten SVGs für basline. Alle anderen befehle übergeben die SVGs in dem Ordner (find) an sed zum ersetzen in den SVGs. Sudo weil user pi keine Berechtigungen für die Dateien von fhem hat. Ein Backup kann nicht schaden vorher, just in case.
cd /opt/fhem/www/ftui/icons/weather/bas/line/all
sudo find *.svg -type f -exec sed -i 's/-.5s/-0.5s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/; .17s;/; 0.17s;/g' {} \;
sudo find *.svg -type f -exec sed -i 's/+.33s/+0.33s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/-.33s/-0.33s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".33s/"0.33s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/; .33s;/; 0.33s;/g' {} \;
sudo find *.svg -type f -exec sed -i 's/+.42s/+0.42s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".58s/"0.58s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".67s/"0.67s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/-.67s/-0.67s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/+.67s/+0.67s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/+.75s/+0.75s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".83s/"0.83s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/-.83s/-0.83s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/; .83s;/; 0.83s;/g' {} \;Sollte analog auch auf fill anwendbar sein.
Ja ist seltsam unter FF.
Bei snow, drizzle und anderen Animierten ist auch ein bug drin. Es müssten 3 Schneeflocken/Tropfen nebeneinander kommen. Unter FF kommt nur die Linke oder 2.
So ein Verhalten hatte ich schon oft unter FF beim programmieren...
Da muss basmilius noch bissl dran arbeiten...
LG mr_petz
Edit:
Da fehlen auch führende nullen bei begin und keyTimes in der Animation...
Zitat von: mr_petz am 29 April 2022, 13:53:49Bei snow, drizzle und anderen Animierten ist auch ein bug drin. Es müssten 3 Schneeflocken/Tropfen nebeneinander kommen. Unter FF kommt nur die Linke oder 2.
[...]
Da fehlen auch führende nullen bei begin und keyTimes in der Animation...
Das müsste eigtl mit dem Suchen&Ersetzen gefixt sein. Bei drizzle zB durch
sudo find *.svg -type f -exec sed -i 's/-.83s/-0.83s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".83s/"0.83s/g' {} \;und zusätzlich
sudo find *.svg -type f -exec sed -i 's/; .83s;/; 0.83s;/g' {} \;
sudo find *.svg -type f -exec sed -i 's/; .17s;/; 0.17s;/g' {} \;abgedeckt sein.
Ich hab es oben ergänzt.
@mr-petz, @
Ich habe noch nicht ganz verstanden, was ihr da treibt.
Ich habe mir die Icons hier geholt:
https://github.com/basmilius/weather-icons/archive/refs/heads/master.zip (https://github.com/basmilius/weather-icons/archive/refs/heads/master.zip)
und habe keine Probleme mit der Animation. Sie sieht unter FF und Chrom gleich aus.
Da einzige, was ich geändert habe, ist stroke-width von "3" auf "2" geändert., damit die Icons etwas dezenter nicht so aufdringlich wirken.
Und den Tip von mr_petz
ftui-weather {
--color-base: transparent;
}
habe ich auch eingebaut.
Gruß LuGu
@LuGu
Laut deinem Beitrag von hier:
https://forum.fhem.de/index.php/topic,115259.msg1219769.html#msg1219769
hattest du da noch die Icons vom dev Branch.
Jetzt hast du die Icons vom master Branch.
Bei uns ging es jetzt um die vom dev Branch:
https://github.com/basmilius/weather-icons/archive/refs/heads/dev.zip
Hier ist das Verhalten so mit den offenen Wolken und der fehlerhaften Animation unter FF.
LG mr_petz
@mr_petz.
Alles klar. Ja erst hatte ich den dev branch, bin dann nach euren ersten Informationen auf den master.zip gewechselt. :)
Hauptsache, es läuft jetzt.
Werde mir aber auch noch mal den Unterschied in den svg's ansehen, um wieder was dazuzulernen.
Gruß LuGu
Hallo zusammen,
in dem Wiki Artikel über Icons wird beschrieben, dass FHEM alle fill:#000000 und fill="#000000" durch eine Farbe ersetzt.
https://wiki.fhem.de/wiki/Icons
Kann es sein, dass die ftui3 das anders macht und wenn ja wie müsste ich denn ein icon svg gestalten, damit die Farbgebung klappt? :-[
Zitat von: muma am 02 Mai 2022, 23:32:33Kann es sein, dass die ftui3 das anders macht und wenn ja wie müsste ich denn ein icon svg gestalten, damit die Farbgebung klappt? :-[
Ja, weil
Zitat von: muma am 02 Mai 2022, 23:32:33in dem Wiki Artikel über Icons wird beschrieben, dass FHEM alle fill:#000000 und fill="#000000" durch eine Farbe ersetzt.
https://wiki.fhem.de/wiki/Icons
beschreibt dies für FHEMWEB, nicht für FTUI.
IMHO kannst du, wenn du es nicht vorgeben willst, das fill: Attribut weglassen da FTUI3 dies via CSS vordefiniert (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L10).
Zum Testen kannst du ein einfaches SVG erstellen - und fill einmal über xml aber auch style setzen und schauen, wie FTUI3 es verarbeitet.
Danke für die Rückmeldung @yersinia
Das erklärt schon mal, warum scheinbar generell alle Farben ersetzt werden.
Kann es sein, dass hierbei generell nur Pfade und keine Objekte aus dem SVG gefärbt werden
und bei den Pfaden generell nur der Innenbereichen und nicht die Kontur?
Zitat von: muma am 03 Mai 2022, 11:38:14Kann es sein, dass hierbei generell nur Pfade und keine Objekte aus dem SVG gefärbt werden
und bei den Pfaden generell nur der Innenbereichen und nicht die Kontur?
Ja, denn so liest sich das CSS (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L10) afaik:
svg {
width: var(--icon-width, 2.5em);
height: var(--icon-height, 2.5em);
fill: currentColor;
}
svg g[fill],
svg g [fill] {
fill: inherit;
}
svg path[style],
svg g[style] {
fill: inherit !important;
}<svg> bekommt die Eigenschaft
fill: currentColor zugewiesen
<svg> <g fill="..."> sowie
<svg> <g> <... fill="..."> bekommen
fill: inherit<svg> <path style="..."> sowie
<svg> <g style="..."> bekommen
fill: inherit !important
Zitat von: muma am 03 Mai 2022, 11:38:14
...
und bei den Pfaden generell nur der Innenbereichen und nicht die Kontur?
Wenn du eine Kontur/Border von svg-Icons färben willst, dann kannst du es mit stroke so in einer user.css oder als Styleattribute definieren.
Bsp.:
ftui-icon {
stroke-width: 0.5px;
stroke: red;
--color-base: green;
}
Das Ergebnis ist wie im Anhang zu sehen.
Es funktioniert mit den meisten Icons aus FTUI3. (In meinem Test wurden die neuen bas-icons nicht mit eingefärbt. Die restlichen weather-icons schon.)
Edit: getestet unter Chrome und FF
so wäre auch ein transparentes Icon mit Kontur möglich:
ftui-icon {
stroke-width: 0.5px;
stroke: red;
--color-base: transparent;
}
Man könnte auch den style des stroke verändern mit einem binding zBsp.:
[style]="dummy | map('yellow:`stroke:yellow`, red:`stroke:red`')"
Edit2: Auch sowas wie im vorletzten Bild wäre mit stroke-dasharray möglich:
stroke-width: 0.5px;
stroke: red;
stroke-dasharray: 1;
--color-base: transparent;
Edit3: Einen hab ich noch mit 3D Effekt oder halt mit nicht so einen statischen Aussehen...:
stroke-width: 0.5px;
stroke: black;
stroke-opacity: 0.5;
filter: drop-shadow(2px 2px 1px black);
--color-base: var(--dark-light);
Die filter Angabe geht mit allen icons und elementen in ftui3...
LG mr_petz
Ich habe da mal wieder ein Phänomen. Dabei meine ich, es schon mal gesehen zu haben (hier im Forum), aber ich finde es nicht
Wenn ich mir aus einem Device Unwetterzentrale (UWZ) das Reading "Warn_0_Start" hole und mit todate() konvertiere, dann ist das Ergebnis zwei Stunden zeitversetzt, nämlich die GMT-Zeit.
z.B.:
<ftui-label [text]="UWZ_Ergolding:Warn_0_Start | toDate() | format('DD.MM.YY - hh:mm')"></label>
1652677200 wird zu 16.05.22 - 05:00
Ich hätte aber lieber meine lokale Zeit. Wie bringe ich das dem ftui3 bei?
Hi presskopf.
In FTUI3 ist die OffsetTime aus einer Unix/GMT-time nicht berücksichtigt:
https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L220
Du könntest als Übergangslösung folgendes machen.
Entweder:
<ftui-label [text]="UWZ_Ergolding:Warn_0_Start | add(7200) | prepend(0) | toDate() | format('DD.MM.YY - hh:mm')"></ftui-label>
Oder:
<ftui-label [text]="UWZ_Ergolding:Warn_0_Start | toDate() | o=>o.getTimezoneOffset()*60-text | slice(1) | prepend(0) | toDate() | format('DD.MM.YY - hh:mm')"></ftui-label>
Oder:
<ftui-label [text]="UWZ_Ergolding:Warn_0_Start | toDate() | o=>o.getTimezoneOffset() | slice(1) | o=>o*60+text*1 | prepend(0) | toDate() | format('DD.MM.YY - hh:mm')"></ftui-label>
Beim ersten musst du in der Winterzeit die 7200 in 3600 ändern.
Beim zweiten und dritten läuft alles automatisch.
Das prepent(0) musste ich setzen, da sonst die letzte Null/Zahl nicht übergeben/einbezogen wurde in meiner Testumgebung, ansonsten wurde mir der rote Rahmen angezeigt.
Hier mein Test:
<ftui-button (value)="Device" states="1652677200,1652680800">
<ftui-label [text]="Device | add(7200) | prepend(0) | toDate() | format('DD.MM.YY - hh:mm')"></ftui-label>
<ftui-label [text]="Device | toDate() | o=>o.getTimezoneOffset()*60-text | slice(1) | prepend(0) | toDate() | format('DD.MM.YY - hh:mm')"></ftui-label>
<ftui-label [text]="Device | toDate() | o=>o.getTimezoneOffset() | slice(1) | o=>o*60+text*1 | prepend(0) | toDate() | format('DD.MM.YY - hh:mm')"></ftui-label></ftui-button>
Wenn es bei dir auch ohne geht, dann nimm es wieder raus.
Mich würde auch interessieren wie es noch geht. Ich habe dazu jetzt auf die schnelle auch nichts gefunden...
Edit: nur unter ftui-clock kann man einen offset mit angeben...
oder du biegst das schon unter Fhem gerade...
Edit2: Hinweis:
Ich habe gerade mal auf:
https://feed.alertspro.meteogroup.com/AlertsPro/AlertsProPollService.php?method=getWarning&language=de&areaID=UWZDE46483getestet. Da werden aber die UnixZeiten in Sommer(DE)zeit angegeben laut:
https://www.unwetterzentrale.de/uwz/getwarning_de.php?plz=46483&uwz=UWZ-DE&land=DE"dtgStart":1652875200 = 19.05.2022 - 13:00
"dtgEnd":1652994000 = 19.05.2022 - 23:00
auch der Zeitstempel der letzten Aktualisierung passt:
"creation":1652898735 = 18.05.2022 - 20:32
Woher oder was ist das für eine UWZ-Zeit?
Edit3: In Fhem auch nochmal die Zeitzone prüfen für DWD
Zitat
3. FHEM Uhrzeit und Zeitzone: Durch Eingabe von
{localtime()}
in die FHEM-Kommandozeile überprüfen, ob die FHEM-Uhrzeit plausibel ist. Ist dies nicht der Fall sollten die Uhrzeit auf Systemebene überprüft werden und ggf. die Systemeinstellungen angepasst werden. Ermitteln der Bezeichnung der eigenen Zeitzone über die System-Kommandozeile mit
tzselect
und diese Bezeichnung in die Datei /etc/timezone eintragen und
export TZ=`cat /etc/timezone`
der Datei /etc/profile hinzufügen und dann das System neu starten. Nun muss die Zeitanzeige in FHEM korrekt sein.
Quelle: https://wiki.fhem.de/wiki/DWD_OpenData#Vorbereitung
LG mr_petz
@mr_pez: UWZ != DWD - aber der Zeitzonenhinweis ist ein guter Punkt
@presskopf: warum setzt du nicht das Attribut
Zitathumanreadable
Anzeige weiterer Readings Warn_?_Start_Date, Warn_?_Start_Time, Warn_?_End_Date, Warn_?_End_Time. Diese Readings enthalten aus dem Timestamp kalkulierte Datums/Zeit Angaben. Weiterhin werden folgende Readings aktivier: Warn_?_Type_Str und Warn_?_uwzLevel_Str welche den Unwettertyp als auch das Unwetter-Warn-Level als Text ausgeben. (0|1)
commandref: UWZ (https://fhem.de/commandref_DE.html#UWZ)
und nutzt dann die Readings:
READINGS:
2022-05-19 07:53:53 Warn_0_End 1652994000
2022-05-19 07:53:53 Warn_0_End_Date 19.05.2022
2022-05-19 07:53:53 Warn_0_End_Time 23:00
2022-05-19 07:53:53 Warn_0_Start 1652958000
2022-05-19 07:53:53 Warn_0_Start_Date 19.05.2022
2022-05-19 07:53:53 Warn_0_Start_Time 13:00 entsprechend in FTUI?
@mr_petz
@yersina
Danke an Euch zwei.
Da habe ich wieder was gelernt. :)
Beim der nächsten UW-Meldung schaue ich mir Eure Lösungen an.
Hallo,
ich weiß nicht, ob es schon einmal gefragt wurde - aber ich muß zugeben, bei über 160 Seiten habe ich nicht groß Lust, alles zu lesen, und die Sufu hat leider auch nichts ergeben ...
Kann ich beide FTUI-Versionen zu entwicklungszwecken auch nebeneinander betreiben, so daß z.B. die FTUI2-Oberfläche bis auf Weiteres auf dem Produktiv-Tablet angezeigt wird, während ich auf einem anderen Tablet mit FTUI3 experimentiere?
Gruß, Christoph
Ja, das geht. (https://forum.fhem.de/index.php/topic,119312.0.html)
Du könntest sogar auf dem gleichen Tablet (aka Endgerät zur Anzeige) arbeiten.
Danke, ist entsprechend eingerichtet ...
Gruß, Christoph
Ende Februar hatte ich aus beruflichen Gründen meine Umstellung auf FTUI3 eingestellt, seit vorgestern arbeite ich mich wieder ran. Seht mir bitte nach, dass ich auf Anfängerniveau zurückfiel.
Vermutlich ein Update (oder meine Dummheit irgendwann im Februar, keine Ahnung) hat mein Tab-Design verändert. Konket hatten die Kästchenumrandungen eine andere Farbe als der Hintergrund der Kästchen - damit das schön abgesetzt ist - wie bei den Beispielen von @setstate. Aktuell ist das bei mir nun alles einheitlich tiefschwarz - warum auch immer. Ich sehe also keine Abgrenzung dieser Kästchen.
Nun gibt es ja drei Möglichkeiten: Umrandungsfarbe geändert. Globale Hintergrundfarbe geändert. Breite der Kästchenumrandung ist auf 0.
Mal angenommen, ich will die globale Hintergrundfarbe auf blau ändern - wo mache ich das mit welchem Parameter? Und falls ich die Umrandungsfarbe auf -sagen wir rot- ändern will, wo mache ich das? Und spasseshalber die Umrandung auf 10px, wo und mit welcher Variable?
Oder denke ich komplett falsch?
Noch eine Anfängerfrage dazwischen gehauen:
ich habe mir eine kleine Oberfläche mit 6 Tabs fürs Handy gebastelt.
Wenn ich die Aufrufe, sehe ich links die Tabs, aber die Seite hat nur die Hintergrundfarbe.
Ich muss immer erst einen Tab antippen, damit ich den Inhalt sehe.
Geht das nicht auch so, dass ein Tab automatisch beim Aufrufen der Seite angezeigt wird?
Du musst einen mit Attribute active auf aktiv setzen.
LG
Danke, so einfach isses....
Zitat von: curt am 28 Mai 2022, 03:42:18
Nun gibt es ja drei Möglichkeiten: Umrandungsfarbe geändert.
Ok, die Vordergrundfarbe der Kästchen wird in ftui-grid-tile definiert. Aus
<ftui-grid-tile row="1" col="1" height="5" width="1" color="black">
machte ich
<ftui-grid-tile row="1" col="1" height="5" width="1" color="my_grey3">
Dabei definierte ich my_grey3 in user.css nach meinen Wünschen.
Zitat von: curt am 28 Mai 2022, 03:42:18
Globale Hintergrundfarbe geändert.
Wie ich die globale Hintergrundfarbe (damit die Farbe der Kästchenumrandung) ändere, habe ich leider noch nicht verstanden.
Ich brauch noch mal Hilfe.
Ich habe 3 LED Stripes im Einsatz. Alle Wemos D1 Mini mit Tasmota 11. Einer ist RGB als "ARILUX LC01" und die beiden anderen RGBW als "GENERIC TASMOTA" konfiguriert.
Alle 3 kann ich mit der FTUI3 steuern, aber nur der RGB zeigt beim Aufruf des FTUI3 die richtigen Werte an.
Die RGBWs stehen immer ColorWheel Mitte und Slider Rechtsanschlag.
Auf Seite 79 des Threads las ich:
ZitatWheel- bzw. Slider-Darstellung ist korrekt - Toasts mit Information zu setreading werden aufgeblendet.
iro.js kann hex-Werte verarbeiten, die dem Muster RGB RGBA RRGGBB oder RRGGBBAA entsprechen - mit oder ohne führendem # bzw. 0x.
Ich dachte es liegt am Format des "Color" Wertes: RGB=FFFFFF und RGBW=FFFFFFFF.
Nach der Aussage sollte das aber nicht sein, oder?
Hier mal die beiden Code Schnipsel, beide identisch:
<ftui-label size="6" color="orange" >Licht1</ftui-label>
<ftui-colorpicker [hex]="RGB_Stripe:Color" (hex)="replace('#','') | RGB_Stripe:Color"
layout="wheel,valueSlider"></ftui-colorpicker>
<ftui-switch [(value)]="RGB_Stripe" texts='I,O'></ftui-switch>
<ftui-label size="6" color="orange" >Licht2</ftui-label>
<ftui-colorpicker [hex]=RGBW_Stripe:Color" (hex)="replace('#','') | RGBW_Stripe:Color"
layout="wheel,valueSlider"></ftui-colorpicker>
<ftui-switch [(value)]="RGBW_Stripe" texts='I,O'></ftui-switch>
Wie gesagt steuern geht problemlos, "Color" wie auch "pct" Werte werden ordnungsgemäß vom FTUI3 an FHEM und weiter an Tasmota übermittelt und ausgeführt.
Nur beim Einstieg in die FTUI3 Seite, zeigen die beiden RGBW Stripes Müll an, der RGB alles korrekt.
Lösungsvorschläge die ich hier im Thread fand und probierte lösten mein Problemchen bislang nicht.
Ich habe aber auch noch nicht alle 163 Seiten durch...
EDIT1:
Das liegt doch am Hex Format des RGBW. Ich habe ein UserReading in FHEM erstellt (rgb {(substr(ReadingsVal($name,"Color",0),0,6))})
welches mir die beiden letzten Stellen vom HEX Wert abschneidet und schon zeigt das ColorWheel und der Slider alles richtig an. (also aus DBFFF3FF DBFFF3 macht,)
Im FTUI3 noch
<ftui-colorpicker [hex]=RGBW_Stripe:rgb" (hex)="replace('#','') | RGBW_Stripe:Color"geändert.
Kann ich an den gesendeten Color Wert noch "FF" anhängen lassen, damit mir mein Weiß Wert nicht immer auf 0 gesetzt wird. Der soll immer FF bleiben.
Das ColorWheel sendet mir den Color Wert nur 6 stellig. Der "W" Wert fehlt, weshalb er wohl mit "00" von Tasmota interpretiert wird?
Zitat von: Konfusius am 29 Mai 2022, 15:21:29
...
Kann ich an den gesendeten Color Wert noch "FF" anhängen lassen, damit mir mein Weiß Wert nicht immer auf 0 gesetzt wird. Der soll immer FF bleiben.
Das ColorWheel sendet mir den Color Wert nur 6 stellig. Der "W" Wert fehlt, weshalb er wohl mit "00" von Tasmota interpretiert wird?
Ja, du kannst noch append('FF') als Pipe reinnehmen:
(hex)="replace('#','') | append('FF') | RGBW_Stripe:Color"
LG
Danke, da fehlt es wieder an Grundwissen.. So gehts perfekt.
Hallo zusammen,
wie kann man eine max. Länge eines Textfeldes angeben?
Die Wetterbeschreibung für einen Tag in Proplanta (fc3_weatherDay) lautet z.B: "unterschiedlich bewölkt, vereinzelt Schauer und Gewitter". Zur Wetteranzeige nutze ich den Code aus dem Beispiel und bei diesem langen Text wird die Tabelle komplett verschoben.
MfG
Torsten
Zitat von: iron.eagle am 29 Mai 2022, 19:24:47
Hallo zusammen,
wie kann man eine max. Länge eines Textfeldes angeben?
Die Wetterbeschreibung für einen Tag in Proplanta (fc3_weatherDay) lautet z.B: "unterschiedlich bewölkt, vereinzelt Schauer und Gewitter". Zur Wetteranzeige nutze ich den Code aus dem Beispiel und bei diesem langen Text wird die Tabelle komplett verschoben.
MfG
Torsten
Ich habe das so gelöst:
<ftui-label [text]="Wetter_Pro:fc0_weatherDay | (txt)=>{return txt.split(',', 1)}"></ftui-label>
Da wird der Text beim ersten Komma abgeschnitten. Vielleicht hilft es.
Gruß LuGu
Oder man setzt das Attribute scroll.
Da wird der Text umgebrochen, wenn die Spalte zu ende ist.
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/label.html#L89
LG
Edit: oder mit der Pipe slice(0,5) die Länge angeben...
Hallo mr_petz und LuGu,
slice hatte ich in der Doku nicht gefunden; das starre Abschneiden ist evtl. optisch nicht so schön. Scroll funktioniert bei mir nicht; der ganze Text steht dann untereinander ohne Srollbalken. Dadurch wird die Spalte nach oben und unten verschoben. Aber vielleicht brauche ich die Infos an anderen Stellen nochmal.
Ich habe mich für die Lösung von LuGu entschieden.
Vielen Dank an beide!
MfG
Torsten
@iron.eagle
Für scroll musst du eine feste Höhe vorgeben.
Bsp.:
<ftui-label [text]="Wetter_Pro:fc0_weatherDay" scroll height="2.5em"></ftui-label>
Das scrollen sollte dann gehen wie in der Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/label.html
Nur zur Ergänzung.
Code von LuGu gekürzt:
<ftui-label [text]="Wetter_Pro:fc0_weatherDay | t=>t.split(',', 1)"></ftui-label>
zur Ergänzung 2 Alternativen mit gleicher Funktion:
<ftui-label [text]="Wetter_Pro:fc0_weatherDay | replace(/,(.*)/,'')"></ftui-label>
<ftui-label [text]="Wetter_Pro:fc0_weatherDay | replace(/(.*),/,'$1')"></ftui-label>
LG mr_petz
@mr_petz
Nein, funktioniert damit noch immer nicht.
Danke auch für die anderen Tipps; ich werde dabei bleiben.
MfG
Torsten
Hi@all.
Ich baue gerade ein svg Städte/Landkreise/Gemeinden-Viewer inkl Wetterwarnungen direkt von der DWD-api.
Hat irgendjemand lust da mitzuwirken?
Zur Zeit läuft es als ftui-icon Erweiterung.
Die svg wird aus den Koordinaten der api gelesen und zusammengesetzt.
Die Warnungen und fill Farben der svg wird auch aus der api gelesen.
Die Idee war halt mir meinen Landkreis anzuzeigen zulassen und dann ein Popup oder was auch immer, der dann die Warnstufen zeigt.
Ich weis das es auch Module in Fhem gibt, aber auch eins wo das svg aus Koordinaten erstellt wird?
Das ist nur so ein Gedanke von mir und ich teste gern was wie wo geht... ;)
Bsp als Bild im Anhang.
Interesse am mitwirken? oder doch eine blöde Idee???
LG mr_petz
Hey all,
check out the stacked x option for chart pull request: https://github.com/knowthelist/ftui/pull/36
Cheers,
Paulo
Zitat von: mr_petz am 02 Juni 2022, 16:28:51Interesse am mitwirken? oder doch eine blöde Idee???
Grundsätzlich keine schlechte Idee - das handling der Warnungen kannst du dir bei octek0815 (https://forum.fhem.de/index.php/topic,115259.msg1132061.html#msg1132061) oder mir (https://forum.fhem.de/index.php/topic,117858.0.html) abschauen. ;)
Ich persönlich (Achtung: subjektive Ansicht) sehe da keinen Mehrwert - neben einer netten Spielerei (eye-candy) bringt mir die eingefärbte Kreis-/Kommunengrenze nichts. Spannender könnte es allerdings werden, wenn man die Nachbar-Kreise/Kommunen
mit einzeichnen würde/könnte.
Wie würdest du verschiedene Warnungen mit mehreren Warnstufen behandeln?
@yersinia
Danke für die Rückmeldung.
Mehrere Landkreise könnte man auch verbinden und zusammen setzen (dauert die Suche nur etwas länger, das komplette Array ist >10000 (inkl. Warnmeldungen) und je nach Kriterium).
Na mal schauen wie man es optimieren kann. Die Grafik wird dann nur beim ersten Laden gesucht und erstellt, danach werden "nur" die Warnmeldungen durchsucht(Array ist dann viel kleiner).
Meldungen könnte man auch Filtern lassen. zBsp.: Gewitter,Sturm,Wind,Schnee,Hitze und deren Warnstufen.
An der Anzeige der verschiedenen Warnstufen bin ich noch am überlegen wie man es umsetzen könnte. Man könnte bestimmt auch deine Swiper Lösung modden oder durch click/touch ein Popup öffnen lassen mit den Inhalten???
LG mr_petz
Edit: Habe mal ein Beispiel als Bild angehangen...
(Warnungen Oberallgäu)
Zitat von: mr_petz am 03 Juni 2022, 08:45:53Mehrere Landkreise könnte man auch verbinden und zusammen setzen (dauert die Suche nur etwas länger, das komplette Array ist >10000 (inkl. Warnmeldungen) und je nach Kriterium).
Na mal schauen wie man es optimieren kann. Die Grafik wird dann nur beim ersten Laden gesucht und erstellt, danach werden "nur" die Warnmeldungen durchsucht(Array ist dann viel kleiner).
Oder man lässt dem Benutzer die (svg-) Koordinaten einmalig in ein userReading/Attribut des DWD Devices oder eines anderen Devices schreiben, dann musst du es nicht on-demand nachladen (wie oft ändern sich die Koordinaten? ;)) - zumal die Verarbeitung auf client-seite bei schwacher (Anzeige-) Hardware beträchtlich lange dauern könnte.
Oder man baut ein script, was einmalig (oder regelmässig) die svg-datei generiert/aktualisiert, welche man dann über CSS einfärbt (ich nutze etwas ähnliches um das Wettericon in dem svg zu platzieren und das Dreieck entsprechend einzufärben).
Zitat von: mr_petz am 03 Juni 2022, 08:45:53An der Anzeige der verschiedenen Warnstufen bin ich noch am überlegen wie man es umsetzen könnte. Man könnte bestimmt auch deine Swiper Lösung modden oder durch click/touch ein Popup öffnen lassen mit den Inhalten???
Wie gesagt,
für mich ist das nur eye-candy: dann hab ich verschiedene svgs meines Landkreises/meiner Gemeinde in verschiedenen/gleichen Farben zu unterschiedlichen Meldungen -zusätzlich zur eigentlichen Meldung-, was auch noch zusätzliche Rechenzeit kostet, das gesamte runter zu laden und zu rendern. Ich sehe den zusätzlichen Nutzen nicht (aus Anwendersicht), aber die Spielerei (aus Entwicklersicht) ist trotzdem nett. ;)
Spannender wäre der Umkreis/das Bundesland um den eigenen Landkreis/Gemeinde herum - wie entwickeln sich die DWD-Warnungen drumherum? Während mein Landkreis/Gemeinde noch grün ist, ist alles drumherum schon tiefrot.
Das als Übersicht fänd' ich interessant: mich interessiert -als Beispiel- ja nicht ganz Bayern, aber vlt München und alle Gemeinden drumherum, so als Beispiel. Und dafür eine Übersicht zu haben, dynamisch per svg generiert, wäre sicher sinnvoll...
Die Entwicklung bzw Diskussion dessen sollte man mMn aber nicht
hier fortführen und eher in einen eigenen Thread auslagern.
Zitat von: yersinia am 03 Juni 2022, 09:13:03
Oder man lässt dem Benutzer die (svg-) Koordinaten einmalig in ein userReading/Attribut des DWD Devices oder eines anderen Devices schreiben, dann musst du es nicht on-demand nachladen (wie oft ändern sich die Koordinaten? ;)) - zumal die Verarbeitung auf client-seite bei schwacher (Anzeige-) Hardware beträchtlich lange dauern könnte.
...
Das hatte ich ja geschrieben, das es nur beim ersten Start/Laden generiert/erstellt wird.
Die Koordinaten der Region und BBOX bleben gleich.
Klar kann man auch manuell das svg erstellen, aber es ist schon ziemlich Komplex mit dem Positionieren und der richtigen Größe. Mal schauen.
Danke dir erstmal für deine Sichtweise/Ratschläge.
Zitat von: yersinia am 03 Juni 2022, 09:13:03
...
Die Entwicklung bzw Diskussion dessen sollte man mMn aber nicht hier fortführen und eher in einen eigenen Thread auslagern.
Ich wollte erstmal schauen ob Bedarf ist, bevor ich einen neuen Thread aufmache.
LG mr_petz
Kann man um eine "Checkbox" auch einen Rahmen setzen lassen (border)?
Ich bekomme nur das Häkchen hin. Das zwar in allen Farben, aber ohne Rahmen.
Hallo
ich hoffe mir kann jemand weiterhelfen:
. ich habe Thyraz Kalender in der index.html wie folgt eingebunden:
<ftui-tab-view id="View6">
<ftui-grid-tile row="1" col="1" height="16" width="20"color="secondary" shape="round">
<ftui-calendar view="dayGridMonth" height="90%">
<ftui-calendar-data calendar="AbfallCalendar"></ftui-calendar-data>
</ftui-calendar>
</ftui-grid-tile>
</ftui-tab-view>
Der "Abfallcalendar" ist definiert:
define AbfallCalendar Calendar ical url https://calendar.google.com/calendar/ical/xxxxxxxxxx.calendar.google.com/private-xxxxxxxxxxxxxxxxxxxxxx/basic.ics 21600
attr AbfallCalendar alias Abfall
attr AbfallCalendar group Kalender
attr AbfallCalendar hideLaterThan 100d
attr AbfallCalendar hideOlderThan 10d
attr AbfallCalendar ignoreCancelled 1
Wenn ich die Seite mit dem Kalender aufrufe, ist der Kalender wie folgt dargestellt. Was muss ich ändern?
Grüsse Gerald.
Zitat von: Konfusius am 04 Juni 2022, 18:53:22
Kann man um eine "Checkbox" auch einen Rahmen setzen lassen (border)?
Ich bekomme nur das Häkchen hin. Das zwar in allen Farben, aber ohne Rahmen.
Klar, aber nur per style:
<ftui-checkbox value="on" style="border: solid 2px var(--primary-color);border-radius: 50%;"></ftui-checkbox>
<ftui-checkbox value="on" style="border: solid 2px var(--primary-color);border-radius: 0;"></ftui-checkbox>
Ergebnisse wie im Anhang.
Die Farbe des Rahmen könntest du dann auch mappen.
Bsp:
[style]="Device | map('off:`border: solid 2px var(--dark);border-radius: 0;`, on:`border: solid 2px var(--primary-color);border-radius: 0;`')
LG mr_petz
@BigGB
Ich glaube da wirst du leider wenig bis gar keinen Support bekommen, da Thyraz seit 12.2020 nichts mehr am Modul gemacht hat.
Da kann es sein, dass es nicht mehr so funktioniert wie damals.
Alternative wäre das calview von mir. Das kann aber nur mit Calender von FHEM umgehen.
https://forum.fhem.de/index.php/topic,120379.0.html
LG mr_petz
@BigGB (und @mr_petz)
Normalerweise verwende ich das calendar-Modul nicht, habe es aber mal für Testzwecke aktiviert und es läuft scheinbar (noch) ganz normal.
Fraglich ist, warum Deine Darstellung derart komprimiert aussieht ...
Zitat von: OdfFhem am 05 Juni 2022, 20:56:10
@BigGB (und @mr_petz)
Normalerweise verwende ich das calendar-Modul nicht, habe es aber mal für Testzwecke aktiviert und es läuft scheinbar (noch) ganz normal.
Fraglich ist, warum Deine Darstellung derart komprimiert aussieht ...
Sobald ich unter Firefox die "Werkzeuge für Webentwickler" aufrufe, ist der Kalender sichtbar.
Unter Edge dasselbe Erscheinungsbild und nach Aufruf der Entwicklertools ist der Kalender auch sichtbar.
Viele Grüsse Gerald.
@BigGB
Ich habe unter Chrome und Firefox getestet - beide benötigen zur Darstellung des Kalenders keine Entwicklertools.
Die gewünschte Monatsansicht sieht jeweils aus wie im angehängten Screenshot.
Sind u.U. hilfreiche Meldungen in der Console der Entwicklertools vorhanden ?
Zitat von: OdfFhem am 05 Juni 2022, 22:14:10
@BigGB
Ich habe unter Chrome und Firefox getestet - beide benötigen zur Darstellung des Kalenders keine Entwicklertools.
Die gewünschte Monatsansicht sieht jeweils aus wie im angehängten Screenshot.
Sind u.U. hilfreiche Meldungen in der Console der Entwicklertools vorhanden ?
Ja, da ist was:
Wenn ich den Kalender aber so aufrufe (ohne <ftui-tab-view> ) ist er auch sichtbar:
<body>
<ftui-grid margin="1">
<ftui-grid-tile row="17" col="1" height="1" width="17" color="secondary" shape="round">
</ftui-grid-tile>
<!--ftui-tab-view id="View6"-->
<ftui-grid-tile row="1" col="1" height="16" width="20"color="secondary" shape="round">
<ftui-calendar view="dayGridMonth" height="90%">
<ftui-calendar-data calendar="myAbfall"></ftui-calendar-data>
</ftui-calendar>
</ftui-grid-tile>
<!--/ftui-tab-view-->
</ftui-grid>
</body>
</html>
@BigGB
Laut der Meldungen aus der Konsole scheint die Datenaufbereitung für den Kalender nicht zum Ende zu kommen.
Vielleicht kannst Du durch eine Logmeldung unmittelbar vor Zeile 105 (calendar-data.component.js) dem Geheimnis auf die Spur kommen:
console.log("line:",line);
Auffällig ist noch, dass Du mit verscheidenen FHEM-Devices testest ... AbfallCalendar bzw. myAbfall ... welches ist richtig ?
Zitat von: OdfFhem am 05 Juni 2022, 22:51:28
@BigGB
Laut der Meldungen aus der Konsole scheint die Datenaufbereitung für den Kalender nicht zum Ende zu kommen.
Vielleicht kannst Du durch eine Logmeldung unmittelbar vor Zeile 105 (calendar-data.component.js) dem Geheimnis auf die Spur kommen:
console.log("line:",line);
Auffällig ist noch, dass Du mit verscheidenen FHEM-Devices testest ... AbfallCalendar bzw. myAbfall ... welches ist richtig ?
Also das FHEM-Device ist AbfallCalendar.
myAbfall war ein Versuch, sorry für die Fehlleitung.
Ich habe den AbfallCalendar einmal direkt in die index.html eingebaut und einmal wird er über <ftui-tab-view> aufgerufen.
Ist er direkt in der index.htlm eingebunden, erscheint in der Console folgende Meldung siehe Screenshot 2022-06-06_09h19_55.jpg.
Wird der AbfallCalendar über <ftui-tab-view> aufgerunfen, erscheint in der Cosole Screenshot 2022-06-06_10h4200.jpg.
Ich würde sagen identische Ausgaben. Der Browser zeigt in diesem Fall den AbfallCalendar nur nicht an.
Der Browser zeigt den AbfallCalendar erst an, wenn er gezwungen ist den Bildschirminhalt zu erneuern, indem ich z.B. die Entwicklerwerkzeuge im selben Fenster aufrufe.
Hat vielleicht noch jemand eine Idee?
Viele Grüße Gerald.
@BigGB
Der "Uncaught"-Fehler trat nicht auf ... lag vermutlich am alternativen FHEM-Device ...
Um das beschriebene Verhalten reproduzieren zu können, wäre es vermutlich hilfreich, wenn Du einen aufs Notwendigste reduzierten Code zur Verfügung stellst - ab index.html.
Wenn damit das Problem nachgestellt werden kann, kommt man einer Erklärung/Lösung evtl. näher ...
Zitat von: OdfFhem am 07 Juni 2022, 06:17:57
@BigGB
Der "Uncaught"-Fehler trat nicht auf ... lag vermutlich am alternativen FHEM-Device ...
Um das beschriebene Verhalten reproduzieren zu können, wäre es vermutlich hilfreich, wenn Du einen aufs Notwendigste reduzierten Code zur Verfügung stellst - ab index.html.
Wenn damit das Problem nachgestellt werden kann, kommt man einer Erklärung/Lösung evtl. näher ...
@OdFhem
hier ist die Minimalversion, die nicht funktioniert:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="bottomLeft">
<meta name="fhemweb_url" content="http://xxx.xxx.xx.xx:8083/fhem/">
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<title>Smart Home</title>
</head>
<body>
<ftui-grid margin="1">
<ftui-grid-tile row="17" col="1" height="1" width="17" color="secondary" shape="round">
<ftui-tab view="View6">
<ftui-icon class="size-1" path="../images/openautomation/" name="time_calendar" color="white"></ftui-icon>
</ftui-tab>
</ftui-grid-tile>
<ftui-tab-view id="View6">
<ftui-grid-tile row="1" col="1" height="16" width="20"color="secondary" shape="round">
<ftui-calendar view="dayGridMonth" height="90%">
<ftui-calendar-data calendar="AbfallCalendar"></ftui-calendar-data>
</ftui-calendar>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
Wenn Du die <ftui-tab-view> u. </ftui-tab-view> auskommentierst, ist der Kalender in seiner vollen Pracht sichtbar.
Viele Grüße Gerald.
@BigGB
Nur zur Info, werde/kann ich leider erst zum WE testen ...
@BigGB
Mit dem konkreten Beispiel ist Dein Fall gut nachvollziehbar.
1) quasi 1:1-Verwendung Deines Beispiels
1a) Aufruf im Browser sorgt für die Darstellung der tab-view-Auswahlleiste
1b) wählt man dann die angebotene tab-view, erscheint die "komprimierte" Darstellung des Kalenders
1c) verändert man z.B. die Größe des Browserfensters, dann wird der Kalender in gewünschter Größe dargestellt
*** Problem scheint mit der visibility der Komponente bei der Darstellung des Kalenders zusammenzuhängen
2) Verwendet man <ftui-tab view="View6" active> statt <ftui-tab view="View6">, so erscheint der Kalender sofort in gewünschter Größe
3) Wenn der Kalender nicht die primäre tab-view-Auswahl ist, dann findet keine Neudarstellung mehr statt und die "komprimierte" Darstellung bleibt erhalten. Somit ist ein Eingriff in der calendar.component.js notwendig, z.B. unmittelbar vor Zeile 81:
document.addEventListener('ftuiVisibilityChanged', () => this.refresh());
Dies könnte man noch etwas verfeinern, da die (unveränderten) Kalenderdaten mehrfach abgerufen werden ...
*** Auffälligkeit
4) Was der Komponente scheinbar noch ganz fehlt, ist die Neudarstellung bei Veränderungen am FHEM-Device - z.B. nach set reload <FHEM-Device>
Zitat von: OdfFhem am 11 Juni 2022, 10:37:46
document.addEventListener('ftuiVisibilityChanged', () => this.refresh());
Dies könnte man noch etwas verfeinern, da die (unveränderten) Kalenderdaten mehrfach abgerufen werden ...
Danke OdfFhem, das hat schon weitergeholfen.
Viele Grüße Gerald.
Ich habe schon wieder ein Anfänger-Formatierung-Syntax-Problem
Ich habe dieses Grid Tile:
<ftui-grid-tile row="1" col="2" height="5" width="4">
<ftui-label size="6" color="orange" >Aquarium</ftui-label>
<ftui-colorpicker layout="valueSlider"
[brightness]="Aquariumlampe:pct | toInt()"
(brightness)=" toInt() | Aquariumlampe:pct">
</ftui-colorpicker>
<ftui-switch [(value)]="Aquariumlampe"states="off,on" texts='I,O'></ftui-switch>
<span>
<ftui-label size="3" text="Temperatur"></ftui-label>
<ftui-label color="yellow" size="5" [text]="Testmodul:h2o_temp"></ftui-label>
</span>
</ftui-grid-tile>
Und schaffe es nicht, dass die Temperatur mit dem Wert "unten" und "links" steht!
Setze ich bei <ftui-label> oder bei <span> align="left" oder style="align:left" oder "text-align="left" tut sich nichts.
Knoten in mehreren Gehirnwindungen, wie macht man das richtig?
Hast Du es mal mit <ftui-row> und <ftui-column> probiert, dort sollte auch "align" gehen, bei <ftui-label> gibt es, soweit ich weiß kein "align"
Danke, genauso gehts. Dachte ich mir doch > Gehirnwindungsknoten...
@setstate
Zitat von: setstate am 12 Februar 2021, 00:28:58
man kann jetzt die Liste als options - Kinderknoten angeben
<ftui-dropdown
[value]="ftuitest:whiteValue"
(value)="setreading ftuitest:whiteValue">
<option value="white0">White 0%</option>
<option value="white25">Weiß 25%</option>
<option value="white50">Weiß 50%</option>
<option value="white100">Weiß 100%</option>
</ftui-dropdown>
Ich nutze das Dropdown um meine Rollläden zu steuern.
Es sieht dann so aus
<ftui-dropdown id="opt1"
[value]="EIB_5302:ZumRechnen"
(value)="EIB_5302:value">
<option value="0">AUF</option>
<option value="25">25%</option>
<option value="50">50%</option>
<option value="75">75%</option>
<option value="100">Zu</option>
</ftui-dropdown>Ich möchte nur die Werte 0, 25, 50, 75, und 100 setzen können. Wenn jetzt aber jemand mit dem Slider oder am Taster die Rollladen bedient, dann passen diese 5 mappings nicht mehr.
Ist es möglich irgendwie das "option value" 0-24, auf AUF zu Mappen?
<option value=[<= 24]>AUF</option>
<option value=[>= 25 && <= 49]>25%</option>
.
.
usw
Mit freundlichen Grüßen
@Shadow3561
<ftui-dropdown
[value]="ftuitest:whiteValue | step('0:white0,25:white25,50:white50,100:white100')"
(value)="setreading ftuitest:whiteValue">
<option value="white0">Weiß 0%</option>
<option value="white25">Weiß 25%</option>
<option value="white50">Weiß 50%</option>
<option value="white100">Weiß 100%</option>
</ftui-dropdown>
Meinst du so in die Richtung?
LG mr_petz
Danke,
genau so funktioniert es.
nur für mein Verständnis step('0:0,25:25,50:50,65:75,100:100')"
wie genau ist das Prinzip der step function?
0:0
25:25
Mit freundlichen Grüßen
Zitat von: Shadow3561 am 02 Juli 2022, 13:18:56
Danke,
genau so funktioniert es.
nur für mein Verständnis step('0:0,25:25,50:50,65:75,100:100')"
wie genau ist das Prinzip der step function?
0:0
25:25
Mit freundlichen Grüßen
von 0 bis 24,999999 wird 0 gesetzt,
von 25,0 bis 49,99999 wird 25 gesetzt
usw...
in deinem Beispiel
map() dagegen reagiert erst und nur bei 0 oder 25 usw...
LG mr_petz
Edit:
Hier ist noch eine gute Erläuterung von @yersinia:
https://forum.fhem.de/index.php/topic,123701.msg1182722.html#msg1182722
Danke für die Erklärung.
Dann kann ich es jetzt für mein Device anpassen.
MfG
Ich habe ein Button / Icon Problem, das ich nicht verstehe.
Mein Button sieht so aus:
<ftui-button (value)="Testmodul">
<ftui-icon [name]="Testmodul:state | map('off:lightbulb, on:lightbulb-on')"
[color]="Testmodul:state | map('off: grid, on: white')"></ftui-icon>
</ftui-button Soweit so gut, das funktioniert. Mein "lightbulb" Icon wird angezeigt, wechselt von grid nach weiß, schalten tut es wie gewünscht,
ABER:
Immer wird ganz kurz (Musste eine Zeitlupenaufnahme machen um das zu lesen) eine Errormeldung im Button eingeblendet:
ZitatFile not found: /www.tablet/Icons/set_on.svg
Wer ruft denn da ein nicht vorhandenes set_on.svg Icon auf?
Setze ich im FHEM bei readingList statt
stat/tasmota_B94334/POWER1:.*
statestat/tasmota_B94334/POWER1:.*
state1und ändere das auch im Button nach state1:
<ftui-button (value)="Testmodul">
<ftui-icon [name]="Testmodul:state1 | map('off:lightbulb, on:lightbulb-on')"
[color]="Testmodul:state1 | map('off: grid, on: white')"></ftui-icon>
</ftui-button Dann erscheint der Error nicht?! Wasn da los?
Hi Konfusius,
kann ich nicht nachvollziehen.
Vielleicht liegt es an dem nicht geschlossenen </ftui-button
Also mal so definieren:
<ftui-button (value)="Testmodul">
<ftui-icon [name]="Testmodul:state | map('off:lightbulb, on:lightbulb-on')"
[color]="Testmodul:state | map('off: grid, on: white')"></ftui-icon>
</ftui-button>
Normal sollte es auch ohne :state gehen.
Edit: es müssen hier natürlich ausschließlich die Werte on und off kommen...
LG mr_petz
Das fehlende ">" war nur ein Copy and Paste Fehler von mir. Der ist im Code da.
Auch so:
<ftui-button (value)="Testmodul">
<ftui-icon [name]="Testmodul | map('off:lightbulb, on:lightbulb-on')"
[color]="Testmodul | map('off: grid, on: white')"></ftui-icon>
</ftui-button>
Bleibt das Problem. Sind nur ms, man sieht es kaum.
Kopiere ich andere Icons auf die Namen "set_on.svg" und "set_off.svg" werden diese auch ganz kurz eingeblendet, bevor das lightbulb Icon angezeigt wird.
Das zusätzliche ":state" habe ich nur testweise drin, da ich es mit ":state1" auch getetstet habe und es da nicht auftritt.
Dann teste mal so:
map('off:lightbulb, .*:lightbulb-on')
oder:
map('.*:lightbulb-on, off:lightbulb')
map('.*:lightbulb, on:lightbulb-on')
Damit ist der Error weg! Warum? Könntest Du mir das erklären?
Zitat von: Konfusius am 02 Juli 2022, 14:35:44
map('.*:lightbulb, on:lightbulb-on')
Damit ist der Error weg! Warum? Könntest Du mir das erklären?
Wie vorher schon erläutert,
map erwartet bei dir exakt on und off.
Wenn dein Device/Reading irgenwas anderes hat oder sendet kommt so ein Fehler.
Ich würde aber auf on gehen mit dem .*
So wird jeder x beliebige Zustand als lightbulb-on gesetzt der nicht off ist.
LG mr_petz
Hallo zusammen,
ich habe in einem Tile einen Swiper und darin dieses Regenradarbild:
http://images2.wetterdienst.de/maps/radar/Radarfilm_Suedost.gif?1424183385=&_=1657197778295 (http://images2.wetterdienst.de/maps/radar/Radarfilm_Suedost.gif?1424183385=&_=1657197778295)
Die Darstellung des animated Gifs ist soweit okay. Nun wohne ich aber nicht in einer der Städte, welche hervorgehoben wurden, sondern irgendwo dazwischen.
Gibt es eine Möglichkeit per FTUI3, über das GIF noch einen roten Knödel zu legen, zufälligerweise genau dort, wo ich wohne?
Oder bleibt mir für eine solche Markierung nur ein Workflow a la Download -> Imagemagick -> FTUI3
LG
Matthias
Hi @presskopf,
hast du dir ab hier das schon angesehen?:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/image.html#L102
Hier die Demo (Bild mit den Flugzeugen):
https://knowthelist.github.io/ftui/www/ftui/examples/image.html
da kannst du label und/oder icons über das Bild legen/positionieren.
LG mr_petz
Edit:
so zum Bsp mit label:
<ftui-image src="http://images2.wetterdienst.de/maps/radar/Radarfilm_Suedost.gif?1424183385=&_=1657197778295">
<ftui-label text="°" color="red" left="40%" top="54.5%" class="size-3"></ftui-label>
<ftui-label text="Stadt" color="red" left="43%" top="55%"class="size-0"></ftui-label>
</ftui-image>
oder:
<ftui-image src="http://images2.wetterdienst.de/maps/radar/Radarfilm_Suedost.gif?1424183385=&_=1657197778295">
<ftui-label text="." color="red" left="40%" top="37%" class="size-8"></ftui-label>
<ftui-label text="Stadt" color="red" left="44%" top="55%"class="size-0"></ftui-label>
</ftui-image>
Der Link sollte auch so gehen:
http://images2.wetterdienst.de/maps/radar/Radarfilm_Suedost.gif
und im image den refresh/interval und nocache nicht vergessen.
Ich Rind - hatte ich sogar schon mal gesehen.
Ja, das ist die elegante Lösung. Hab's schon hinbekommen. Herzlichen Dank.
@setstatekannst du Funktion tresholdZero (https://forum.fhem.de/index.php/topic,119440.msg1227424.html#msg1227424) so oder so ähnlich als FTUI3-Funktion übernehmen?
Zitat von: Nogga am 08 Juli 2022, 22:58:23
Für diejenigen, die meine Idee vom "Threshold" gut finden, habe ich das als Helper implementiert - danke für den Tipp yersinia!
<head>
<script>
// Pipe-helper to set any Values lower than threshold to Zero
const thresholdZero = value => input => Math.abs(Number(input)) <= value ? input * 0 : input;
</script>
<script src="ftui.js"></script>
Dann könnt Ihr per Pipe angeben, bis zu welchem Wert etwas genullt werden soll, weil irrelevant.
Ich denke, dies wäre analog zu round() etc eine weitere sinnvolle Funktion, Werte an FTUI3 Devices zu übergeben - und sollte von FTUI3 imho auch zur Verfügung gestellt werden.
Hallo, ich bekomme meinen Kalender nicht in FTUI 3 eingebunden.
ftui ist wie folgt konfiguriert.
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
<meta name="fhemweb_url" content="http://fhem.intranet:8083/fhem/">
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>Home Dashboard</title>
</head>
<body>
<ftui-grid base-width="400" base-height="400">
<ftui-grid-tile row="1" col="2" height="1" width="1"color="secondary" shape="round">
<ftui-calendar view="dayGridMonth" height="90%">
<ftui-calendar-data calendar="Calendar.Muell"></ftui-calendar-data>
</ftui-calendar>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>
Der Kalender vom Type "Calendar" ist definiert und liest auch die Events aus. Aber ich bekomme keine Termin angezeigt. CalView nutze ich nicht. Was könnte das Problem sein?
Vielen Dank!
Hi h002,
ab hier schon gelesen?
https://forum.fhem.de/index.php/topic,115259.msg1224109.html#msg1224109
Hier eine mögliche Lösung:
https://forum.fhem.de/index.php/topic,115259.msg1224663.html#msg1224663
LG mr_petz
@mr_petz
Danke für den Hinweis. Ich probiere noch mal etwas rum. ;-)
Installiert habe ich ftui aus dem Rep von setstate (https://github.com/knowthelist/ftui). Auch dort besteht das Problem.
Das ist vielleicht Offtopi, aber sollte ich weiterhin auf ftui setzen oder mich lieber nach Alternativen umsehen? Folgendes ist mir wichtig:
- Übersichtliche moderne Ansicht auf einem Tablet
- Anzeige eines gemeinsamen Kalenders und ToDo Liste
- Anzeige von Abfahrten der öffentlich Verkehrsmittel
- Wetter
- Schalten von Rollläden und Lampen
ftui hat da viele tolle Dinge, mit denen ich es versuchen wollte. Sollte ich mit meinen Anforderungen weiter darauf setzen?
Auf FTUI3 kannst du setzen.
Hinweis:
Das Calendar Modul für FTUI3 gibt es aber nicht bei setstate...
LG mr_petz
Das hilft mir weiter für mein Gesamtverständnis. ;)
Hab mich jetzt doch für deine CalView-Variante entschieden, damit ich eine schnelle Lösung hinbekomme.
Die verschiedenen GitHub Verzeichnisse hatten mich erstmal verwirrt.
https://github.com/Thyraz/ftui
https://github.com/knowthelist/ftui
https://github.com/mr-petz/ftui
Gut, dann bastel ich mal weiter :-)
Zum Verständnis.
Das repo von setstate -> https://github.com/knowthelist/ftui ist das Hauptrepo.
Von dem haben Thyraz,andere und ich eine Copy.
Hier kann es sein, dass diese nicht aktuell zum Hauptrepo sind.
Jeder Entwickler hat dann wieder seine eigen erstellte Module als Erweiterung/Ergänzung zu setstate´s...
Try it out...
LG mr_petz
Ich habe eine Art Bilderrahmen mit Zufallsbildern in ftui3 eingebunden und wollte kurz meine Umsetzung teilen. Vielleicht hilft es jemanden weiter, da sie für mich einfach realisierbar war.
FHEM habe ich auf einem Raspberry laufen. Dort ist via Samba ein Mount zu meinen Bildern auf meinem NAS eingebunden. Mittels eines Cronjobs läuft ein kleines Shellskript, welches ein Zufallsbild ermittelt und anschließend dieses Bild als symbolischen Link unter "/opt/fhem/www/images/pic" ablegt. Das Skript läuft alle 5 Minuten. Es sucht nach jpg-Dateien, sortiert sie zufällig und nimmt dann den ersten Treffer für den symbolischen Link.
#!/bin/bash
IFS=$(echo -en "\n\b")
linkedFilename=$(find /media/nas/photo/Urlaub/ -name "*.jpg" | sort -R | tail -1)
ln -sf ${linkedFilename} /opt/fhem/www/images/pic/bild.jpg
Das Bild wird in die /opt/fhem/www/ftui/index.html wie folgt hinterlegt.
<ftui-grid-tile row="2" col="2" height="1" width="2">
<ftui-image base="http://fhem.intranet:8083/fhem/images/pic/" src="bild.jpg" shape="round" interval="300"
nocache></ftui-image>
</ftui-grid-tile>
Hallo euch allen,
hab hier mal wieder ein kleines Problem bezüglich meiner Anzeige vom Wetter. Da verschiebt sich die Anzeige extrem beim Wettertext "unterschiedlich bewölkt, vereinzelt Schauer und Gewitter".
Hier mal der Code der Wetterseite:
<ftui-popup id="{{callup}}" width="750px" height="400px" timeout="15" shape="round" position="top">
<header><ftui-label [text]="NN_xx_SW_Proplanta:{{tag}}_date | toDate() | format('eeee')"></ftui-label></header>
<ftui-row>
<ftui-content file="content-wetter-detail.html" color="medium" fc="{{tag}}" uhrzeit="00:00 Uhr" wetter="weather00" temperatur="temp00" wind="wind00" chofrain="chOfRain00" regen="rain00" winddir="windDir00"></ftui-content>
<ftui-content file="content-wetter-detail.html" color="dark" fc="{{tag}}" uhrzeit="03:00 Uhr" wetter="weather03" temperatur="temp03" wind="wind03" chofrain="chOfRain03" regen="rain03" winddir="windDir03"></ftui-content>
<ftui-content file="content-wetter-detail.html" color="medium" fc="{{tag}}" uhrzeit="06:00 Uhr" wetter="weather06" temperatur="temp06" wind="wind06" chofrain="chOfRain06" regen="rain06" winddir="windDir06"></ftui-content>
<ftui-content file="content-wetter-detail.html" color="dark" fc="{{tag}}" uhrzeit="09:00 Uhr" wetter="weather09" temperatur="temp09" wind="wind09" chofrain="chOfRain09" regen="rain09" winddir="windDir09"></ftui-content>
<ftui-content file="content-wetter-detail.html" color="medium" fc="{{tag}}" uhrzeit="12:00 Uhr" wetter="weather12" temperatur="temp12" wind="wind12" chofrain="chOfRain12" regen="rain12" winddir="windDir12"></ftui-content>
<ftui-content file="content-wetter-detail.html" color="dark" fc="{{tag}}" uhrzeit="15:00 Uhr" wetter="weather15" temperatur="temp15" wind="wind15" chofrain="chOfRain15" regen="rain15" winddir="windDir15"></ftui-content>
<ftui-content file="content-wetter-detail.html" color="medium" fc="{{tag}}" uhrzeit="18:00 Uhr" wetter="weather18" temperatur="temp18" wind="wind18" chofrain="chOfRain18" regen="rain18" winddir="windDir18"></ftui-content>
<ftui-content file="content-wetter-detail.html" color="dark" fc="{{tag}}" uhrzeit="21:00 Uhr" wetter="weather21" temperatur="temp21" wind="wind21" chofrain="chOfRain21" regen="rain21" winddir="windDir21"></ftui-content>
</ftui-row>
</ftui-popup>
und anbei zwei Screenshots, einer mit dem besagten Fehler, der andere so wie es sein sollte.
Ich selbst stehe gerade etwas auf dem Schlauch, bin der Meinung man müsste entweder den Text mit Zeilenumbruch machen bzw. die Spaltenbreite fixieren, dann wird der Text aber abgeschnitten.
Habt ihr hier einen Tipp bzw. Lösung?
Gruß
Markus
Hi Markus.
Füge einfach scroll im label hinzu.
Damit wird der text umgebrochen.
LG mr_petz
Zitat von: mr_petz am 20 Juli 2022, 09:16:56
Hi Markus.
Füge einfach scroll im label hinzu.
Damit wird der text umgebrochen.
LG mr_petz
Super mr_petz, das war´s! Hab dann noch ein
text-align="center" hinterhergeschoben, und schon sieht´s richtig gut aus.
Danke und LG, Markus
Hallo allen,
ich weis normalerweise den thread lesen, aber über 150 Seiten ehrlich?
Nur mal als absoluter ftuiv3 Anfänger eine Frage das zeigt doch nicht alle bereits bestehenden Elemente an und bedarf noch deutlichen html-änderungen oder liege ich da total Falsch und habe es falsch installiert (was ja laut Github ja kaum machbar ist)?
Grüße
michael
Hallo Michael,
ja, dieser Thead ist mittlerweile stattlich angewachsen.
Also bezüglich dem ftui da hast du nun das "Grundgerüst" installiert, die ganzen einzelnen Objekte (Schalter, Fühler, Sensoren, etc.) musst du nun einzeln so wie du das Aussehen wünscht hier noch einfügen. Es gibt ja einige Beispiele (sind ja auch auf GitHub), aber je nachdem wie mächtig dein FHEM ist bzw. wie viele Daten du anzeigen lassen möchtest ist dies in der Tat einiges an Arbeit.
Bin auch schon seit einigen Monaten am machen und tun, aber noch lange nicht fertig ;)
Zitatich weis normalerweise den thread lesen, aber über 150 Seiten ehrlich?
Es gibt auch eine Suchfunktion, man muss natürlich wissen was man sucht, am Anfang nicht immer ganz einfach.;-)
Zitatdas zeigt doch nicht alle bereits bestehenden Elemente an und bedarf noch deutlichen html-änderungen oder liege ich da total Falsch
Dazu müsste man erstmal wissen, was Du alles machen willst, Vieles kann man mit FTUi3 heute schon machen ohne großartige HTML Änderungen, aber es kommt natürlich auch auf die Komplexität Deines Systems an, wie meier81 bereits schrieb.
Hallo,
nach einem Update heute über FHEM werde ich in FTUI3 mit Fehlermeldungen geflutet, siehe Anhang. Bekanntes Problem?
Sonnige Grüße!
Markus (ebenfalls)
Noch eine info: Die Fehlermeldungen verschwinden, wenn ich alle Charts rausnehme, die 2 Y-Achsen enthalten (z.B. Temperatur und Luftfeuchte).
Zitat von: meier81 am 20 Juli 2022, 13:09:30
Hallo Michael,
ja, dieser Thead ist mittlerweile stattlich angewachsen.
Also bezüglich dem ftui da hast du nun das "Grundgerüst" installiert, die ganzen einzelnen Objekte (Schalter, Fühler, Sensoren, etc.) musst du nun einzeln so wie du das Aussehen wünscht hier noch einfügen. Es gibt ja einige Beispiele (sind ja auch auf GitHub), aber je nachdem wie mächtig dein FHEM ist bzw. wie viele Daten du anzeigen lassen möchtest ist dies in der Tat einiges an Arbeit.
Bin auch schon seit einigen Monaten am machen und tun, aber noch lange nicht fertig ;)
Also sind alle Objekte aus Fhem nicht automatisch angezeigt bzw können einfach dazu bewegt werden das sie angezeigt werden. Versteht ich richtig ja?
Und das mit github muss ich vermutlich wirklich machen. Ich wollte eigentlich nur eine Anzeige der Temperatur von meinem Netatmo und maximal noch die Garage (offen/zu) und die halt antriggern. Also Stati anzeigen und antriggern und dachte das das ftui schon von haus aus in ner optic für Tablets macht.
Zitat von: mrb am 20 Juli 2022, 18:53:29
Also sind alle Objekte aus Fhem nicht automatisch angezeigt bzw können einfach dazu bewegt werden das sie angezeigt werden. Versteht ich richtig ja?
Richtig
Zitat von: mrb am 20 Juli 2022, 18:53:29
Und das mit github muss ich vermutlich wirklich machen.
Jupp
Zitat von: mrb am 20 Juli 2022, 18:53:29
Ich wollte eigentlich nur eine Anzeige der Temperatur von meinem Netatmo und maximal noch die Garage (offen/zu) und die halt antriggern. Also Stati anzeigen und antriggern und dachte das das ftui schon von haus aus in ner optic für Tablets macht.
Ein wenig genauer solltest du werden. Optisch kann ftui das auch für Tablets/Mobile Geräte. Siehe hier:
https://knowthelist.github.io/ftui/www/ftui/examples/mobile.html
oder hier:
https://knowthelist.github.io/ftui/www/ftui/examples/mobile_plain.html
oder so:
https://knowthelist.github.io/ftui/www/ftui/index.html
Alle Infos zu den Demo´s bzw. Examples sind hier:
https://github.com/knowthelist/ftui/tree/master/www/ftui/examples
Einfach in das entsprechende File reinschauen wie was definiert wird.
LG mr_petz
Zitat von: Markus9 am 20 Juli 2022, 17:41:57
Noch eine info: Die Fehlermeldungen verschwinden, wenn ich alle Charts rausnehme, die 2 Y-Achsen enthalten (z.B. Temperatur und Luftfeuchte).
Fehler gefunden, ich habe in den Datenreihen für die Sekundärachse der Charts
y-axis-id="1"durch
y-axis-id="y1"ersetzt.
Keine Ahnung wie ich auf "1" gekommen bin, in den Beispielen steht ja "y1" drin. Nur komisch dass es bis jetzt funktioniert hat.
Nutzt hier jemand den Fully Browser für FTUI3 auf einem aktuellen Android 12 Gerät? Ich hab mir nämlich die Tage ein Tab S7+ mit Android 12 geholt, da ich das zur Visualisierung nehmen wollte, da mein altes iPad nur das alte FTUI unterstützt...
Nun folgendes Problem:
Überall wo ein Icon sein sollte (z.B. OA Icon oder FHEM Icon), steht nur ein "undefined" in der Form des Buttons....woran kann das liegen? Auf meinem Handy mit Android 11 oder auf dem Desktop PC, sowie im Samsung Browser auf dem betreffenden Tablet werden die Icons normal angezeigt....
@Stonemuc
Bei meinen pixel mit Android 12 und letzten Fully zeigt es mir alle Icons an. Hast du auch einen aktuelles Android-Web-View drauf?
LG mr_petz
Ja..das aktuelle aus dem Store...
Älteres Fully schon getestet?
Settings von Fully geprüft?
Zitat von: mr_petz am 23 Juli 2022, 14:31:58
Älteres Fully schon getestet?
Settings von Fully geprüft?
Also kein älteres Fully getestet...muss mal schauen wo ich die apk bekomme...
Gibt es Settings die ich einstellen muss? Habe alles Standart gelassen...so wie auf dem Handy auch...
Allerdings habe ich jetzt Fully neu auf dem Handy installiert...dort das gleiche Problem. Hast du zufällig ne alte apk die du zur Verfügung stellen kannst?
Naja. Ich meine die Einstellungen von Fully.
Standard hatte ich auch zum testen.
Edit: Diese Version (v1.42.5) nutze ich aktiv:
https://m.apkpure.com/de/fully-kiosk-browser-lockdown/de.ozerov.fully/download/875-APK?from=versions%2Fversion
Könntest auch noch die WallPanel App testen.
Problem aufgespürt...wenn ich in der Start-URL Seite das User:Pass@ weglassen und die Daten manuell beim Abruf der Seite angebe, funktioniert alles. Ich teste jetzt mal noch unter Einstellungen des Fully das Eingeben basicauth user und pw...
Hallo euch allen,
mal ne Frage: Ich bin gerade wieder über etwas gestolpert. Wenn ich mit der Maus irgendwo auf der FTUI-Oberfläche stehen bleibe kommt als tooltip z.B. row: 3 | col: 13. Nur in ein paar Fällen kommt als tooltip der Name des Icons. Hab auch mal einen Screenshot davon angehängt.
Gibt es hier die Möglichkeit den tooltip global auszuschalten bzw. etwas bestimmtes einzutragen?
Gruß
Markus
@meier81
*** icon ***
Icons sind in der Regel vom Typ SVG. Standardmäßig sind sie sensitiv und - sofern ein internes title-Tag vorhanden ist - wird beim Überfahren der title-Text als Tooltip angezeigt. Ist das Icon als disabled oder als readonly gekennzeichnet, gibt es beim Überfahren keinen Tooltip.
*** row | column ***
Habe ich nicht weiter geschaut, hat aber vermutlich mit der Codierung von ftui-row bzw. ftui-column zu tun ...
Zum svg die Ergänzung:
Mit Bsp.:
<title xmlns="http://www.w3.org/2000/svg">XYZ Icon</title>
im svg, dann wird das auch angezeigt.
https://github.com/knowthelist/ftui/blame/master/www/ftui/icons/Celsius.svg#L3
setstate übergibt hier im grid den title mit row und col:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid.component.js#L127
LG
Zitat von: mr_petz am 29 Juli 2022, 21:27:22
Zum svg die Ergänzung:
Mit Bsp.:
<title xmlns="http://www.w3.org/2000/svg">XYZ Icon</title>
im svg, dann wird das auch angezeigt.
https://github.com/knowthelist/ftui/blame/master/www/ftui/icons/Celsius.svg#L3
setstate übergibt hier im grid den title mit row und col:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid.component.js#L127
LG
Vielen Dank mal für die Infos, das mit den SVG-Dateien habe ich soweit erledigt, dort habe ich in meinen neu hinzugefügten Dateien den Title korrigiert und jetzt ist das auch alles gleich und korrekt.
Bezüglich des row und col habe ich dort tatsächlich nicht nachgeschaut, jetzt weiß ich ja aber wo ich es anpassen könnte ;)
Gruß Markus
Zitat von: meier81 am 29 Juli 2022, 22:13:21
...
Bezüglich des row und col habe ich dort tatsächlich nicht nachgeschaut, jetzt weiß ich ja aber wo ich es anpassen könnte ;)
Gruß Markus
Du musst da nur Aufpassen. Jedes Update der grid js bzw von Ftui3 überschreibt deine Änderungen...
LG
Zitat von: mr_petz am 29 Juli 2022, 22:31:30
Du musst da nur Aufpassen. Jedes Update der grid js bzw von Ftui3 überschreibt deine Änderungen...
LG
Ja, daran habe ich auch schon gedacht. Ich werde es jetzt erstmal nicht ändern solange ich hier noch am basteln bin, wenn´s die Frau nicht stört bleibt´s glaube ich auch so :D
Vielleicht baut setstate für dein Anliegen noch was ein.
LG mr_petz
Guten Morgen,
hab mal wieder ne Frage an die Spezi´s ;)
Ich habe bei mir den Fall das ich meine Plots über influxdb und dann Grafana visualisiere, das habe ich jetzt per iframe eingebunden. Funktioniert auch alles so wie´s soll, gibt nur ein kleines Problem bezüglich der Hintergrundfarbe des Plots. Dieser hat natürlich nicht die gleiche Farbe wie die Grid-Elemente. Ich kann in Grafana einstellen das der Graph einen transparenten Hintergrund hat, das funktioniert auch, nur habe ich dann in FTUI die Hintergrundfarbe meiner Oberfläche.
Gibt es hier die Möglichkeit dem iframe Objekt eine Hintergrundfarbe mitzugeben? Hab zwar auch schon mehrere Sachen ausprobiert, hat aber nichts davon funktioniert.
Gruß
Markus
Wie bindest du den iframe ein?
Wenn normal über <iframe>, dann versuch eine dieser Lösungen (https://stackoverflow.com/questions/14830852/change-background-color-of-iframe-issue).
Oder per ftui-binding und map:
Bsp.:
<iframe ftui-binding width="100" height="100" [style]="device | map('on:`background:white;`,off:`background:black;`')"></iframe>
LG mr_petz
Zitat von: yersinia am 09 August 2022, 08:28:39
Wie bindest du den iframe ein?
Wenn normal über <iframe>, dann versuch eine dieser Lösungen (https://stackoverflow.com/questions/14830852/change-background-color-of-iframe-issue).
Ja, binde sie normal als iframe ein:
<ftui-grid-tile row="3" col="1" height="3" width="18" shape="round">
<header>Trend</header>
<ftui-row>
<ftui-column>
<iframe src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%" frameborder="0"></iframe>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Hatte die Seite von dir gestern auch schon gefunden, alles ausprobiert, mag aber nicht. Und für das JS bin ich anscheinend zu doof.
Hast du mal die favorisierte Antwort versucht? Einfach mal testen ob das überhaupt bei dir geht.
<ftui-grid-tile row="3" col="1" height="3" width="18" shape="round">
<header>Trend</header>
<ftui-row>
<ftui-column>
<iframe src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%" frameborder="0" allowtransparency="true" style="background-color: #40E0D0;"></iframe>
</ftui-column>
</ftui-row>
</ftui-grid-tile>Ich habe bewusst #40E0D0 gewählt, da die Farbe grell ist - sieht man besser.
Und, die Nachricht von mr_petz hast du gesehen?
Zitat von: mr_petz am 09 August 2022, 08:56:26
Oder per ftui-binding und map:
Bsp.:
<iframe ftui-binding width="100" height="100" [style]="device | map('on:`background:white;`,off:`background:black;`')"></iframe>
LG mr_petz
Nachtrag.
Wenn von meier81 der Plot einen eigenen HTML code mit css besitzt, dann ziehen deren css und/oder style Attribute.
Edit: Wenn es so wie in den Demo´s (https://play.grafana.org/d/6NmftOxZz/logs-panel?orgId=1) von grafana ist, wird es schwierig. Da kannst du nur in grafana spielen.
Ansonsten könntest du das grafana html in ein Reading schreiben und dann mit:
<ftui-content [content]="grafana:reading html"></ftui-content>
anzeigen lassen???
Vielen Dank für eure Vorschläge, hab auch alle probiert, geht so leider wirklich nicht da die Attribute von Grafana mitgegeben werden.
Hab nach weiterer Recherche rausgefunden wie man Grafana umstellen kann, hab´s probiert, funktioniert einwandfrei:
https://forum.iobroker.net/topic/29035/hintergrund-von-grafana-dashboard-in-vis-entfernen/4 (https://forum.iobroker.net/topic/29035/hintergrund-von-grafana-dashboard-in-vis-entfernen/4)
Hat allerdings den Beigeschmack das generell die Dashboards von Grafana einen transparenten Hintergrund haben und nicht nur die, die ich in FTUI anzeigen lasse.
Ich werde es vielleicht mal so einstellen das die Hintergrundfarbe von Grafana die gleiche ist wie die von FTUI, dann habe ich FTUI erschlagen und in Grafana ist der Hintergrund dann etwas heller wie Standard.
Gruß Markus
Das ist auch nicht verwunderlich, da du über iframe eine eigene Webseite mit eigenen Regeln einbindest - und diese überschreiben die regeln vom Elternelement des iframes. Wenn du es sauberer haben willst, musst du die Hintergrundfarbe mit JavaScript manipulieren und jedes mal nachdem der iframe-Inhalt neu geladen worden ist. Dafür benötigst du vorher zu Analysezwecke zusätzlich die Struktur des von Grafana bereitgestellten HTML und (!) CSS codes. Den JavaScript Code würde ich nachgelagert und in Abhängigkeit vom iframe load laden und dann periodisch bzw onrefresh ausführen. Generell solltest du, wenn du es weiter vertiefen möchtest, einen eigenen Thread aufmachen.
Oder schaust dir alternativ die Chart component (https://forum.fhem.de/index.php/topic,117779.0.html) an.
Nochmal Nachtrag zum Testen:
<iframe id="myiframe" src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%">
</iframe>
<script>
document.querySelector("#myiframe").addEventListener ( "load", function () {this.contentWindow.document.body.style.backgroundColor = 'white !important';});
</script>
Damit wird der body des eingebundenen Codes mit dem Hintergrund weiß eingefärbt.
LG
Zitat von: mr_petz am 09 August 2022, 12:35:53
Nochmal Nachtrag zum Testen:
<iframe id="myiframe" src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%">
</iframe>
<script>
document.querySelector("#myiframe").addEventListener ( "load", function () {this.contentWindow.document.body.style.backgroundColor = 'white !important';});
</script>
Damit wird der body des eingebundenen Codes mit dem Hintergrund weiß eingefärbt.
LG
Also mit der Variante bekomme ich um das iframe-Fenster einen weißen Rahmen, am Plot selbst ändert sich leider nichts. Egal ob ich den Plot auf "transparent" stelle oder nicht.
Ok. kannst du die html/den Code zur Verfügung stellen. Da könnte man vielleicht direkt auf den entsprechenden <Tag> gehen.
Oder eine bestehende css im Code austauschen??
LG
Edit: in der Demo von grafana müsste man auf:
<div class="panel-container" aria-label="Histogram panel">
Ist das bei dir auch so??
Edit2:
in der class panel-content kannst du einen Background angeben,
in der class panel-title kannst du einen Background angeben,
in der class panel-container kannst du einen Background angeben und im body.
Sollte alles in der css von grafana zufinden sein...
Oh, war schon Thema, schnell wieder vergessen. :o
Zitat von: mr_petz am 09 August 2022, 14:16:57
Ok. kannst du die html/den Code zur Verfügung stellen. Da könnte man vielleicht direkt auf den entsprechenden <Tag> gehen.
Oder eine bestehende css im Code austauschen??
LG
Edit: in der Demo von grafana müsste man auf:
<div class="panel-container" aria-label="Histogram panel">
Ist das bei dir auch so??
Edit2:
in der class panel-content kannst du einen Background angeben,
in der class panel-title kannst du einen Background angeben,
in der class panel-container kannst du einen Background angeben und im body.
Sollte alles in der css von grafana zufinden sein...
Hallo mr_petz,
ja das ist alles bei mir auch so wie du es schon beschrieben hast. Habe da auch gestern schon einiges probiert, funktioniert aber alles nicht so einfach da Grafana mit sass arbeitet und ich dann erst kompilieren müsste usw.
Die einfachste Art ist wirklich die die ich gestern schon geschrieben habe mit der eigenen .css Datei und dem anpassen der .html Datei.
Von daher können wir das "Problem" als gelöst ansehen :D
@meier81
Du hast zwar:
Zitat
Von daher können wir das "Problem" als gelöst ansehen :D
geschrieben, aber ich möchte gerne noch einen Test mit dir bitte machen.
Ich würde gern eine alternative Lösung für andere aufzeigen. Die Demo von grafana lässt sich leider nicht ins iframe einbinden. Deswegen bist du nochmal gefragt :D
(Ich bin da einwenig hartnäckig... ;))
<iframe id="myiframe" src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%" allowtransparency="true">
</iframe>
<script>
document.querySelector("#myiframe").addEventListener ( "load", function () {
this.contentWindow.document.head.insertAdjacentHTML('afterend',
'<style type="text/css">body{background:transparent !important;}'
+'.panel-container{background:transparent;}'
+'.panel-title{background:black;color:white;}'
+'.panel-content{background:yellow;color:green;}'
+'</style>')
});
</script>
Danke und LG mr_petz
Edit: Onlinetest im Anhang.
@mr_petz,
wir können da gerne noch etwas testen, ist bloß wirklich die Frage ob wir hierzu nicht besser ein eigenes Thema aufmachen.
Hab deinen Code mal probiert, funktioniert aber wieder nicht, ich bekomme wieder nur einen weißen Rahmen außen. Hab mal einen Screenshot angefügt.
Zudem habe ich mal den Code von der Grafana-Seite angehängt sowie die index.html wo ja die Änderungen von meinem Link eingefügt werden sollte und die passende grafana.dark.4abbc783977ac5086f80.css, in der ja dann die Farbdefinitionen gemacht sind. Ein ändern dieser Definitionen hatte dann auch Auswirkung auf das Aussehen, aber halt leider auf "globaler" Ebene für mein gesamtes Grafana.
Gruß Markus
Ok danke. Schaue ich mir an.
LG
Ich hoffe, die Antwort kam hier noch nicht, hab gesucht, aber so nichts gefunden. Bitte um Verzeihung, falls ich was übersehen haben sollte.
Problemstellung ist folgende:
Die espled-controller können mit set controller on bzw off ein oder ausgeschaltet werden.
Allerdings ist der Status des Lichts dann nicht im state (dort ist der verbindungsstatus des controllers drin), sondern im reading stateLight.
Schön wäre es, einen switch oder button zu haben, bei dem das set einen wert ändert, der Status des switches aber von einem anderen reading kommt.
Geht das? Wie?
@pula
Meintest Du in etwa so - am Beispiel Sonos:
<ftui-button fill="outline" shape="circle"
[value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
(value)="Sonos_Kueche" states="play, pause">
<ftui-icon [name]="Sonos_Kueche:transportState | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
Sonos_Kueche:state | map('play: stop, pause: play')">
</ftui-icon>
</ftui-button>
- transportState gibt den aktuellen Zustand zurück
- die set-Aktionen legen einen Folgezustand fest
Weitere Beispiele im FTUI3 - button-example ...
Zitat von: meier81 am 11 August 2022, 21:22:42
@mr_petz,
wir können da gerne noch etwas testen, ist bloß wirklich die Frage ob wir hierzu nicht besser ein eigenes Thema aufmachen.
Hab deinen Code mal probiert, funktioniert aber wieder nicht, ich bekomme wieder nur einen weißen Rahmen außen. Hab mal einen Screenshot angefügt.
Zudem habe ich mal den Code von der Grafana-Seite angehängt sowie die index.html wo ja die Änderungen von meinem Link eingefügt werden sollte und die passende grafana.dark.4abbc783977ac5086f80.css, in der ja dann die Farbdefinitionen gemacht sind. Ein ändern dieser Definitionen hatte dann auch Auswirkung auf das Aussehen, aber halt leider auf "globaler" Ebene für mein gesamtes Grafana.
Gruß Markus
Ich glaube das können wir vergessen...
Da scheint noch ein iframe drin zustecken.
Ist schon sehr komplex... sorry.
Deine Lösung ist ja erstmal nicht schlecht....
LG mr_petz
Zitat von: OdfFhem am 12 August 2022, 10:59:05
@pula
Meintest Du in etwa so - am Beispiel Sonos:
<ftui-button fill="outline" shape="circle"
[value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
(value)="Sonos_Kueche" states="play, pause">
<ftui-icon [name]="Sonos_Kueche:transportState | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
Sonos_Kueche:state | map('play: stop, pause: play')">
</ftui-icon>
</ftui-button>
- transportState gibt den aktuellen Zustand zurück
- die set-Aktionen legen einen Folgezustand fest
Weitere Beispiele im FTUI3 - button-example ...
Hallo,
vielen Dank! ist schon besser. ich hab jetzt in einem content folgendes:
<ftui-switch
(value)="{{device}}"
[value]="{{device}}:stateLight"
texts='I,O'>
der status von dem switch wird jetzt richtig gesetzt, danke schön.
Hab grad das für mich nächste Rätsel entdeckt:
In einem content-file habe ich folgenden Code:
<ftui-button
shape="circle"
[(value)]="{{device}}"
[color]="{{device}}:state | map('on:primary, off:dark, 1:primary, 0:dark')">
<ftui-icon [name]="{{device}}:state | map('on:lightbulb-on, off:lightbulb, 0:lightbulb, 1:lightbulb-on')"></ftui-icon>
</ftui-button>
Klappt soweit wunderbar, danke schön! ftui3 ist einigermassen anders als ftui2, da muss man erst reinwachsen....
Aber ein hab ich noch ;-)
Hatte in ftui2 mit circlemenu und data-icons eine recht nette Steuerung für Rolladen gebaut (oder geklaut, weiss ich nicht mehr).
Das sah so aus:
<div data-type="symbol" class="big narrow" data-device="par01" data-get="state"
data-icons='["oa-fts_window_2w","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40",
"oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80",
"oa-fts_shutter_90","oa-fts_shutter_100","oa-fts_shutter_100"]'
data-get-on='["off","10","20","30","40","50","60","70","80","90","100","on"]' data-on-color="#2A2A2A"
data-on-background-color="#aa6900" data-background-icon="">
</div>
wie kann man so was in ftui3 nachbauen?
sorry, falls ich nerve, aber trotz suche hab ich nix ordentliches gefunden....
Zitat von: mr_petz am 12 August 2022, 15:02:50
Ich glaube das können wir vergessen...
Da scheint noch ein iframe drin zustecken.
Ist schon sehr komplex... sorry.
Deine Lösung ist ja erstmal nicht schlecht....
LG mr_petz
Hallo mr_petz,
trotzdem vielen Dank für´s drüberschauen, hätte ja sein können das es doch recht einfach geht.
Gruß Markus
Zitat von: pula am 12 August 2022, 16:04:30
Aber ein hab ich noch ;-)
Hatte in ftui2 mit circlemenu und data-icons eine recht nette Steuerung für Rolladen gebaut (oder geklaut, weiss ich nicht mehr).
Das sah so aus:
<div data-type="symbol" class="big narrow" data-device="par01" data-get="state"
data-icons='["oa-fts_window_2w","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40",
"oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80",
"oa-fts_shutter_90","oa-fts_shutter_100","oa-fts_shutter_100"]'
data-get-on='["off","10","20","30","40","50","60","70","80","90","100","on"]' data-on-color="#2A2A2A"
data-on-background-color="#aa6900" data-background-icon="">
</div>
wie kann man so was in ftui3 nachbauen?
sorry, falls ich nerve, aber trotz suche hab ich nix ordentliches gefunden....
Hi, kleiner Denkanstoss...:
<ftui-circlemenu keep-open style="height:3em">
<ftui-button fill="none">
<ftui-icon class="size-3" name="window-shutter" [name]="Rolladen_WZ_mitte:position | map('0:fts_window_2w, 25:fts_shutter_30, 50:fts_shutter_50, 75:fts_shutter_80, 100:fts_shutter_100')"></ftui-icon>
</ftui-button>
<ftui-label>Steuerung</ftui-label>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="opens">Auf</ftui-button>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="25">25</ftui-button>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="50">50</ftui-button>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="75">75</ftui-button>
<ftui-button (value)="Rolladen_WZ_mitte:position" states="closes">Zu</ftui-button>
</ftui-circlemenu>
Stammt aus diesen Thread (von mir einwenig angepasst):
https://forum.fhem.de/index.php/topic,115259.msg1121887.html#msg1121887
LG mr_petz
Hi mr_petz!
Danke für die rasche Antwort! tut soweit, nur einen kleinen schönheitsfehler hab ich noch:
da das (homematic) device auch Werte wie zb 35 zurückliefert, während der Rolladen sich bewegt, kommt dann in ftui3 anstatt des icons der fehler, daß 35.svg nicht gefunden wird (logisch, gibts ja nicht).
Kann man irgendwie verhindern, daß Werte, die nicht in der map sind dargestellt werden?
Da nimmst du die pipe step() statt map().
LG
Ist ja genial. Tut! DANKE!
cheers,
Pula
Jetzt hab ich doch noch einen...
Ich hatte in ftui2 so eine lässige Anzeige für Temperaturen inkl. Trend, das sah so aus:
<div data-type="klimatrend"
data-device="par01"
data-get="par04"
data-refperiod="1"
class="bigger"
style="display:inline"
data-refperiod="1"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)">
</div>
Könnte mir bitte jemand netterweise einen Denkanstoss geben, wie man so was mit ftui3 realisieren könnte?
Ok pula,
das geht alles mit FTUI3 Boardmitteln. Hier ein kleiner Denkanstoss...:
<ftui-cell>
<ftui-row>
<ftui-label text="22.5" class="size-5 thin" color="yellow"><span class="size-1" slot="unit">°C</span></ftui-label>
<ftui-icon name="angle-double-down" size="-2" color="primary"></ftui-icon>
<ftui-icon name="angle-double-up" size="-2" color="danger"></ftui-icon>
</ftui-row>
</ftui-cell>
Sieht dann aus wie im Anhang...
Liste aller Icons sind hier zu finden:
https://knowthelist.github.io/ftui/www/ftui/icons/demo.html
LG mr_petz
Hallo mr_petz,
vielen Dank! Genau das hab ich gesucht :-)
Jetzt muß ich nur noch rausfinden, wie ich die bedingte Formatierung mit ftui3 genau hinbekomme, das klimatrend-widget von ftui2 war hier genial...
cheers,
Pula
Ich hab jetzt versucht, diesen Mega-Thread nach den Informationen zu durchforsten, die ich brauche.
Fred-Suche gibts ja leider keine, oder bin ich zu blöd?
Jedenfalls hab ich folgendes Problem:
Ich würde gerne die oben beschriebenen auf/ab-Symbole wie bei klimatrend in ftui2 abbilden.
Eigentlich sollte das ja mit pipe und map möglich sein, aber ich bin ein wenig ratlos.
Es gibt ja vom statistics-Modul die Werte, die man für diverse Readings in fhem erstellen lassen kann und die dann zb so aussehen:
statTemperatureTendency 1h: +0.4 2h: +0.0 3h: -0.2 6h: -0.5
Beispiele für diese Starts des jeweiligen Readings hab ich bei mir rausgesucht, die sehen zb so aus:
1h: +0
1h: +2.2
1h: -0.4
Ich würde jetzt gerne alles zwischen dem "1h:" und "2h:" auswerten und das Icon entsprechend setzen.
< 0 --> Pfeil nach unten in blau, =0 --> ein =-Icon, >0 --> Pfeil nach oben in rot.
Habe jetzt in diesem Mega-Thread ein Beispiel zur Verwendung eines Regex gefunden:
<ftui-icon [name]="wz.heizkoerper:batteryLevel | map('`3 | 2.[89]`:battery, `2.[67]`:battery-3, `2.[345]`:battery-2, `2.[012]`:battery-1, `2`:battery-0')"
[color]="wz.heizkoerper:batteryLevel | map('3:green, 2.[6789]:secondary, 2.[345]:success, 2.[012]:warning, 2:danger')">
</ftui-icon>
Das wirft für mich als ftui3-Neuling ein paar Fragen auf:
Gibts hier auch die Möglichkeit, nur Teilstrings zu vergleichen (irgendwas war da doch mit split?).
Kann man das dann mittels pipe per regexp auswerten?
Wie wäre hier die Syntax?
Ein regexp, um hier nur den Teil zwischen 1h: und 2: rauszuholen wäre
(?<=1h:\s+).*?(?=\s+2h:)
aber wie kann dieser Inhalt dann ausgewertet und als Bedingung verwendet werden?
@pula
Wenn Du in diesem Thread stehst und im Suchbegriff-Feld "replace" eingibst, dann erhälst Du quasi sofort eine Reihe brauchbarer Beispiele. Stehst Du irgendwo anders, sieht das Ergebnis relativ allgemein aus und nicht unbedingt zielführend.
Eine komplexere Lösung besteht in FTUI3 meist aus der Verkettung von Pipe-Funktionen. Z.B. zunächst replace, dann step ...
@OdfFhem: danke. jetzt bin ich seit 6 jahren oder so fhem-Nutzer, aber das war mir noch neu :-)
Da sind einige Beispiele, aus denen ich aber nicht ganz schlau werde (is schon spät).
Wie würde so eine Verkettung in meinem Fall aussehen? Also regexp und dann vergleich?
@pula
Eine ungefähre, aber völlig ungetestete Idee:
<ftui-label [text]="DEVICE:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:/,'$1') | round(0) | step('-50:angle-double-down, 0:ICON_NAME_FUER_=, 1:angle-double-up')"></ftui-label>
Die "Lösung" besteht aus 4 Komponenten:
- DEVICE:READING
- replace-Funktion zum Ausschneiden des relevanten Teile
- round, falls Nachkommastellen vorhanden wären
- step, um ab -50, ab 0 bzw. ab 1 ein Icon festzulegen
@odfFhem:
erstmal danke für deine ausführliche Antwort. es ist also hier tatsächlich möglich, analog zur shell commands zu pipen. lässig!
gibts dazu irgendwo eine genauere doku, was alles möglich ist?
aktuell hänge ich allerdings grade. ich hab dein snippet mal so übernommen und damit herumgespielt.
zum debuggen habe ich jetzt mal nur folgendes gemacht:
<ftui-label [text]="{{device}}:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:/, '$1')"></ftui-label>
Das reading sieht aktuell so aus:
1h: -0.1 2h: +0.1 3h: +0.1 6h: +0.2
und das Ergebnis im html sieht so aus:
-0.1 +0.1 3h: +0.1 6h: +0.2
Es sieht also so aus, als ob das replace die beiden Strings "1h:" und "2h:" herausschneiden würde, anstatt den String dazwischen zurückzugeben.
Verstehen tu ich das momentan nicht, diverse regexp-Tester (zb regex101.com) zeigen korrekt die Group1 als -0.1 an, die dann ja eigentlich von replace in $1 geliefert werden müsste?!
@pula
Im regulären Ausdruck fehlt hinter "2h:" noch ein ".*"; damit sollte dann auch alles dahinter weggeschnitten werden ...
@OdfFhem:
vielen DANK, das wars!
eine derartige Fehldiagnose durch mich ist ja peinlich...
Cheers,
Pula
Guten Morgen!
Diesmal hätte ich eine Frage aus der Kategorie html für Anfänger (naja, zu meiner Zeit habe ich noch tables als ulitmative Waffe bei der Positionierung benutzt ;-) )
Ich arbeite noch immer an diesem content zur Anzeige von Temperaturen und Luftfeuchtigkeit.
Der Code sieht momentan so aus:
<ftui-label size="3">{{name}}</ftui-label>
<ftui-label size="2" padding="0" margin="0"
[text]="{{device}}:temperature">
<span class="size-0" slot="unit">°C</span>
</ftui-label>
<ftui-icon margin="0" padding="0"
[name]="{{device}}:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-50:angle-double-down, 0:equal, 1:angle-double-up')"
[color]="{{device}}:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-50:primary, 0:secondary, 1:red')">
</ftui-icon>
Die Anzeige wie in dem angehängten Bild. Könnte mir bitte jemand auf die Sprünge helfen, wie ich es schaffe, das Tendenz-Icon nicht unter sondern neben der Temperatur anzuzeigen?
@pula
Hatte ich dir schon gezeigt:
https://forum.fhem.de/index.php/topic,115259.msg1231347.html#msg1231347
Zitat von: mr_petz am 17 August 2022, 08:46:28
@pula
Hatte ich dir schon gezeigt:
https://forum.fhem.de/index.php/topic,115259.msg1231347.html#msg1231347
@mr_petz sorry, daran hatte ich nicht gedacht (wald, bäume und so)
verstehen würde ich das aber auch gern. ist das nur das ftui-row, das das bewirkt?
Hallo pula,
du hast ftui-row für die Zeilen und ftui-column für die Spalten, hier mal ein Beispiel von mir:
<ftui-row>
<ftui-column>
<ftui-label>Agip</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label>HEM</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label>JET</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label>bft</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label [text]="NN_xx_SW_Agip:SuperE10"><span class="size-0" slot="unit"> €</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="NN_xx_SW_HEM:SuperE10"><span class="size-0" slot="unit"> €</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="NN_xx_SW_JET:SuperE10"><span class="size-0" slot="unit"> €</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="NN_xx_SW_bft:SuperE10"><span class="size-0" slot="unit"> €</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-button (value)="set NN_xx_SW_Agip reread; set NN_xx_SW_HEM reread; set NN_xx_SW_JET reread; set NN_xx_SW_bft reread">aktualisieren</ftui-button>
</ftui-column>
</ftui-row>
LG Markus
@meier: danke sehr!
Zitat von: pula am 17 August 2022, 08:57:15
@mr_petz sorry, daran hatte ich nicht gedacht (wald, bäume und so)
verstehen würde ich das aber auch gern. ist das nur das ftui-row, das das bewirkt?
frui-row macht eine Zeile.
ftui-cell packt alles dicht zusammen.
man kann immer width und height mitgeben...
Schau dir wie gesagt immer die examples an, da kann man schon viel rauslesen...
@mr_petz: Danke! Das mit dem examples anschauen versuche ich, aber anscheinend such ich an den falschen Stellen :-(
Was anderes: Die Frage kam hier im Thread schon (hier: https://forum.fhem.de/index.php/topic,115259.msg1229671.html#msg1229671 (https://forum.fhem.de/index.php/topic,115259.msg1229671.html#msg1229671)), aber in anderer Form.
Würde evtl gerne bei den Icons einen Tooltip einbauen (statistics änderung 1h) oder so. Scheint so out of the box aber nicht zu gehen, oder?
Cheers,
Pula
Da könntest du einen badge verwenden:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/badge.html
Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/badge.html
LG
Super, vielen Dank für den Hinweis! Badge kannte ich noch nicht.
Ich finde, das sieht gar nicht so verkehrt aus und macht auf einem tablet auch mehr Sinn als ein tooltip...
@mr_petz und @OdfFhem
Vielen Dank für Eure Arbeit hier, insbesondere das calview-widget ist super.
Da ich relativ viele ganztägige Ereignisse in den Kalendern habe und die von meinem Kalender-Provider (Kopano) an fhem mit btime und etime jeweils 00:00 übergeben werden, habe ich mir Euren code angesehen, weil ich bei solchen Terminen keine Anfangszeit sehen möchte, sondern einfach nichts.
Ich habe in calview.component.js daher folgendes geändert:
@@ -180,7 +180,7 @@
this.data['t_'+num+'_bdate'] = (this.hasAttribute('date_wday')?this.data['t_'+num+'_bdate'].split().map(x => x.substr(0,6)+' '+wdayx.substr(0,2)):this.data['t_'+num+'_bdate'].split().map(x => wdayx.substr(0,2)+', '+x.substr(0,6)));
this.data['t_'+num+'_edate'] = this.data['t_'+num+'_edate'].split().map(x => wdayx.substr(0,2)+', '+x.substr(0,6));
}
-
+ if (this.data['t_'+num+'_btime'] == '00:00' && this.data['t_'+num+'_etime'] == '00:00') this.data['t_'+num+'_btime'] = '';
let daysleftIdx = daysleftdata.length-1;
let blinkIdx = daysleftdata.length-1;
let coltxtcolor = '';
Ist natürlich nicht weltbewegend, aber vielleicht kanns der eine oder andere ja brauchen - oder ihr habt Lust, das evtl fix einzubauen? Ich hab allerdings keine Ahnung, wie die readings bei anderen Kalender-Providern befüllt werden....
Cheers,
Pula
@pula
Ich werde es so nicht ändern im Code.
Entweder du erledigst das schon auf der FHEM Seite mit DoIf z.Bsp. oder man könnte wenn beides 00:00 ist, ganztägig oder ganztags oder 24h anzeigen lassen. Das wäre ja ganztägig wenn begin- und endtime 00:00 ist?
LG mr_petz
Hallo zusammen,
Zwei Fragen:
1. bei FTUI2 konnte ich direkt über
das anhängen von z.b. "#batteryp.html" an die URL von FTUI direkt die Unterseite batteryp.html aufrufen (nutze mehrere Tablets und habe auf jedem per Default am Liebsten erstmal ne andere Unterseite)
Geht das bei FTUI3 auch irgendwie?
2. Hat schon jemand eine Mapping der DWD OpenData-Daten bzw. deren Wetter-Symbol-Mapping in FTUI3 realisiert? Proplanta ist zwar nett aber mit dem DWD konnte ich mir für den jeweiligen Tag ne 2-Stunden Rhythmus Vorhersage darstellen. Siehe im Anhang.
Der Code für so eine einzelne Wetterzelle in FTUI2 war bei mir so:
<div class="container">
<div class="col-1-12">
<div data-type="label" data-device="DWD2" data-get="par01_time" class="centered"></div>
<div data-type="weather" data-device="DWD2" data-get="par01_ww" data-imageset="kleinklima" style="width:48px" class="centered" data-warn="DWD2:a_count" data-warn-class="big"></div>
<div data-type="label" data-device="DWD2" data-get="par01_wwd" class="centered w1x" style="font-size : 70%"></div>
<div data-type="label" data-device="DWD2" data-get="par01_TTT" data-unit="%B0C%0A" data-fix="0" class="centered" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
<div data-type="label" data-device="DWD2" data-get="par01_FX1" data-unit="km/h" data-fix="0" class="centered" ></div>
<div data-type="label" data-device="DWD2" data-get="par01_Rh00" data-unit="%" data-fix="0" class="centered inline" data-color="cyan"></div>
<div data-type="label" data-device="DWD2" data-get="par01_RRhc" data-unit="mm" data-fix="1" class="centered inline" data-color="cyan"></div>
</div>
</div>
Grüße
Markus
Zitat von: Grisu1079 am 23 August 2022, 00:10:491. bei FTUI2 konnte ich direkt über
das anhängen von z.b. "#batteryp.html" an die URL von FTUI direkt die Unterseite batteryp.html aufrufen (nutze mehrere Tablets und habe auf jedem per Default am Liebsten erstmal ne andere Unterseite)
Geht das bei FTUI3 auch irgendwie?
Wenn du Unterseiten hast und nutzt, geht das auch bei FTUI3 - einfach unter
http://<FHEM-IP>:<FTUI-Port(evtl 8085)>/fhem/ftui/<deine_seite.html> aufrufen.
Zitat von: Grisu1079 am 23 August 2022, 00:10:492. Hat schon jemand eine Mapping der DWD OpenData-Daten bzw. deren Wetter-Symbol-Mapping in FTUI3 realisiert? Proplanta ist zwar nett aber mit dem DWD konnte ich mir für den jeweiligen Tag ne 2-Stunden Rhythmus Vorhersage darstellen. Siehe im Anhang.
Die Label kannst du quasi 1:1 durch ftui-label (https://knowthelist.github.io/ftui/www/ftui/examples/label.html) ersetzen, für die weather-component (ftui-weather (https://knowthelist.github.io/ftui/www/ftui/examples/weather.html)) fehlt noch das mapping von DWD Werten (provider) auf das Iconset (siehe auch weather.map.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js)) - also kannst du dies
derzeit ohne weitere Adaptionen nicht 1:1 ersetzen.
Zitat von: yersinia am 23 August 2022, 09:28:15
...für die weather-component (ftui-weather (https://knowthelist.github.io/ftui/www/ftui/examples/weather.html)) fehlt noch das mapping von DWD Werten (provider) auf das Iconset (siehe auch weather.map.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js)) - also kannst du dies derzeit ohne weitere Adaptionen nicht 1:1 ersetzen.
Sollte es laut:
https://forum.fhem.de/index.php/topic,86847.msg830538.html#msg830538
mit dem kleinklimaFHEM mapping gehen mit angepassten mapping?
LG
Edit: wie sehen die Iconreadings aus? Wie im Link?
Zitat von: mr_petz am 21 August 2022, 17:28:50
@pula
Ich werde es so nicht ändern im Code.
Entweder du erledigst das schon auf der FHEM Seite mit DoIf z.Bsp. oder man könnte wenn beides 00:00 ist, ganztägig oder ganztags oder 24h anzeigen lassen. Das wäre ja ganztägig wenn begin- und endtime 00:00 ist?
LG mr_petz
@mr_petz:
Danke nochmal für Eure Bemühungen hier!
Sorry, anscheinend hab ich mich nicht klar genug ausgedrückt. Ja, genau. Es geht um ganztägige Ereignisse.
Ich weiß nicht, ob man die internen readings von calview (zb per doif) überschreiben könnte. Schöner würde ich es aber finden, wenn das widget das erledigen würde. Auch weil ich sicher nicht der einzige bin, der das schön finden würde.
Ob da jetzt dann - wie in meinem Vorschlag - nichts drinsteht oder ganztags oder ganztägig ist dann Geschmackssache. Mein Geschmack wäre, wenn nichts drin steht. Noch schöner wäre vermutlich, wenn man das als Parameter irgendwie mitgeben könnte, dann könnte jede(r) das nach seinem persönlichen Geschmack mitgeben.
Cheers,
Pula
Hi Pula,
wir sollten hier weiter diskutieren:
https://forum.fhem.de/index.php/topic,120379.0.html
LG
Zitat von: mr_petz am 23 August 2022, 10:14:15Sollte es laut:
https://forum.fhem.de/index.php/topic,86847.msg830538.html#msg830538
mit dem kleinklimaFHEM mapping gehen?
Du musst doch erst von den Zuständen des providers (= DWD) auf interne Werte übersetzen um dann das entsprechende Icon aus dem Iconset auszuwählen. Basierend auf somansch' Übersetzung für FTUI2 könnte man
'leichter Sprühregen mit Regen': 'SHOWERS',und dann (für zB Kleinklima (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js#L111))
SHOWERS: './icons/weather/kleinklima/rain.svg',machen.
Anbei ein
Vorschlag, wie man DWD übersetzen könnte - basierend auf somansch' Vorarbeit (https://forum.fhem.de/index.php/topic,86847.msg830538.html#msg830538):
dwd: {
'äußerst heftiger Regenschauer': 'SHOWERS',
'Bewölkung abnehmend': 'PARTLY_CLOUDY',
'Bewölkung unverändert': 'CLOUDY',
'Bewölkung zunehmend': 'OVERCAST',
'Bewölkungsentwicklung nicht beobachtet': 'SUNNY',
'durchgehend leichter Regen': 'SHOWERS',
'durchgehend leichter Schneefall': 'SNOW',
'durchgehend leichter Sprühregen': 'DRIZZLE',
'durchgehend mäßiger Regen': 'SHOWERS',
'durchgehend mäßiger Schneefall': 'SNOW',
'durchgehend mäßiger Sprühregen': 'DRIZZLE',
'durchgehend starker Regen': 'SHOWERS',
'durchgehend starker Schneefall': 'SNOW',
'durchgehend starker Sprühregen': 'DRIZZLE',
'leichter gefrierender Regen': 'RAIN_SNOW',
'leichter gefrierender Sprühregen': 'RAIN_SNOW',
'leichter Regenschauer': 'scatteredSHOWERS',
'leichter Schneeregen': 'RAIN_SNOW',
'leichter Schneeregenschauer': 'RAIN_SNOW',
'leichter Schneeschauer': 'SNOW',
'leichter Sprühregen mit Regen': 'SHOWERS',
'leichtes oder mäßiges Gewitter mit Graupel oder Hagel': 'SCATTERED_THUNDERSTORM',
'leichtes oder mäßiges Gewitter mit Regen oder Schnee': 'SCATTERED_THUNDERSTORM',
'mäßiger oder starker gefrierender Regen': 'RAIN_SNOW',
'mäßiger oder starker gefrierender Sprühregen': 'RAIN_SNOW',
'mäßiger oder starker Graupelschauer': 'THUNDERSTORM',
'mäßiger oder starker Hagelschauer': 'THUNDERSTORM',
'mäßiger oder starker Regenschauer': 'SHOWERS',
'mäßiger oder starker Schneeregen': 'RAIN_SNOW',
'mäßiger oder starker Schneeregenschauer': 'RAIN_SNOW',
'mäßiger oder starker Schneeschauer': 'SNOW',
'mäßiger oder starker Sprühregen mit Regen': 'SHOWERS',
'Nebel in einiger Entfernung': 'FOGGY',
'Nebel in Schwaden oder Bänken': 'FOGGY',
'Nebel mit Reifansatz, Himmel erkennbar': 'FOGGY',
'Nebel mit Reifansatz, Himmel nicht erkennbar': 'FOGGY',
'Nebel, Himmel erkennbar, dichter werdend': 'FOGGY',
'Nebel, Himmel erkennbar, dünner werdend': 'FOGGY',
'Nebel, Himmel erkennbar, unverändert': 'FOGGY',
'Nebel, Himmel nicht erkennbar, dichter werdend': 'FOGGY',
'Nebel, Himmel nicht erkennbar, dünner werdend': 'FOGGY',
'Nebel, Himmel nicht erkennbar, unverändert': 'FOGGY',
'Sicht durch Rauch oder Asche vermindert': 'FOGGY',
'starkes Gewitter mit Graupel oder Hagel': 'THUNDERSTORM',
'starkes Gewitter mit Regen oder Schnee': 'THUNDERSTORM',
'starkes Gewitter mit Sandsturm': 'THUNDERSTORM',
'unterbrochener leichter Regen oder einzelne Regentropfen': 'SHOWERS',
'unterbrochener leichter Schneefall oder einzelne Schneeflocken': 'SNOW',
'unterbrochener leichter Sprühregen': 'DRIZZLE',
'unterbrochener mäßiger Regen': 'SHOWERS',
'unterbrochener mäßiger Schneefall': 'SNOW',
'unterbrochener mäßiger Sprühregen': 'DRIZZLE',
'unterbrochener starker Regen': 'SHOWERS',
'unterbrochener starker Schneefall': 'SNOW',
'unterbrochener starker Sprühregen': 'DRIZZLE',
},Würde ich hinter weather.map.js Z95 (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js#L96) einfügen.
Sehr schön, hast es schon im Weatherthread ergänzt.
LG
Hi,
Zitat von: yersinia am 23 August 2022, 09:28:15
Wenn du Unterseiten hast und nutzt, geht das auch bei FTUI3 - einfach unter http://<FHEM-IP>:<FTUI-Port(evtl 8085)>/fhem/ftui/<deine_seite.html> aufrufen.
Hmm. Meine Unterseite sind eingebunden via:
<ftui-column>
<ftui-tab view="startp" direction="vertical" shape="circle" fill="solid" active>
<ftui-icon name="home1" @click="setLocalDefault()"></ftui-icon>
<!--<ftui-label>Home</ftui-label>-->
</ftui-tab>
<ftui-tab view="rollp" direction="vertical" shape="circle" fill="solid">
<ftui-icon name="fts_shutter_50" path="../images/openautomation" @click="setLocalDefault()"></ftui-icon>
</ftui-tab>
<ftui-tab view="phonep" direction="vertical" shape="circle" fill="solid">
<ftui-icon name="phone_call" path="../images/openautomation" @click="setLocalDefault()"></ftui-icon>
</ftui-tab>
</ftui-column>
und dann weiter unten via:
<ftui-tab-view id="startp">
<ftui-grid-tile row="1" col="2" height="10" width="19">
<ftui-content file="startp.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="rollp">
<ftui-grid-tile row="1" col="2" height="10" width="19">
<ftui-content file="rollp.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="phonep">
<ftui-grid-tile row="1" col="2" height="10" width="19">
<ftui-content file="phonep.html"></ftui-content>
</ftui-grid-tile>Rufe nun z.B. auf http://<FHEM-IP>:<FTUI-Port(evtl 8085)>/fhem/ftui/phonep.html dann sehe ich nur den (unformatierten) Inhalt der Unterseite, aber ich will ja die ganz normale FTUI-Ansicht mit "Hauptmenü" etc. haben nur, dass halt statt des Default-ftui-tab-view id="startp" der ftui-tab-view id="phonep" erscheint...
Grüße
Markus
Schau dir mal ftui-content (https://knowthelist.github.io/ftui/www/ftui/examples/content.html) an, da wird der html code auch geladen und formatiert.
Du kannst dir auch, wenn du FTUI3 installiert hast, mal die dortige index.html als Beispiel ansehen. Da sieht man gut, wie die neue Struktur inklusive Menü funktioniert.
Hi,
habe ich gemacht d.h also hier das Beispiel:
https://knowthelist.github.io/ftui/www/ftui/
Und ich hätte jetzt gern (was mit FTUI2) ging, dass ich etwas an die URL https://knowthelist.github.io/ftui/www/ftui/ hinten anhängen kann, dass z.b. direkt statt der Home-Seite/Tab Tab5 (Duschsymbol) geladen wird?
Wie gesagt bei FTUI2 ging das via #.... d.h. man gab einfach das data-load Attribut des jeweiligen pagebutton an.
Grüße
Markus
Ich kann dir nicht folgen, möglicherweise weil ich das nie bei FTUI2 derart genutzt habe. Müsste aber ftui-content (https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/content.html#L30) (Beispiel (https://knowthelist.github.io/ftui/www/ftui/examples/content.html)) das nicht abbilden?
<ftui-tab-view id="View5">
<ftui-content file="deine/subsite.html"></ftui-content>
</ftui-tab-view>
Wenn er das meint:
https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton
, dann sollte es auch so funktionieren mit content:
https://github.com/knowthelist/ftui/blob/master/www/ftui/index.html#L193
und wie es yersinia beschreibt:
<ftui-grid-tile row="1" col="1" height="10" width="1">
<ftui-column>
<ftui-tab view="View5">
<ftui-icon name="bath"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="View5">
<ftui-content file="deine/subsite.html"></ftui-content>
</ftui-tab-view>
LG
Wie gesagt es werden ja auch alle Seiten angezeigt, aber ich habe keine Chance direkt per ausrufendem Link als die per active-Attribut festgelegte Default-Seite direkt über ein Browser-Lesezeichen anzusteuern, darum ging es mir
Naja, entweder du lädst content in eine bestehende Struktur oder du verlinkst auf eine eigene HTML Seite mit eigener Struktur. Du müsstest deine Unterseite entsprechend komplett definieren - inkl header, stylesheet, javascript usw. - dann solltest du diese auch einfach so direkt erreichen können. Ob man dies dann noch sinnvoll über content eingebunden bekommt bzw überhaupt sollte (im Rahmen des FTUI3 Konzepts) weiss ich nicht.
@Grisu1079
Willst du nur einen Link auf eine andere Seite?
Dann wäre das der Weg?:
https://forum.fhem.de/index.php/topic,115259.msg1207098.html#msg1207098
LG
@Grisu1079, @yersinia, @mr_petz
Wenn ich das richtig verstanden habe, geht alles von einem normalen FTUI3-Gerüst aus.
Man möchte allerdings - unabhängig von einem fest in der html-Datei hinterlegten active-Tab - den initial darzustellenden Tab festlegen können. Richtig ?
Angenommen, ich lag richtig.
Habe mal interessehalber die Anwendung mit sehr wenig Zeilen um eine initialView-Eigenschaft erweitert.
Diese kann beim Aufruf als Parameter mitgegeben werden und überstimmt dann ein gesetztes active-Attribut.
Wird beim Aufruf kein solcher Parameter mitgegeben, dann liegt die "Verantwortung" beim active-Attribut.
http://raspberrypiX:8083/fhem/ftui3/index.html?initialView=View6
Sorgt dafür, dass initial auf View6 umgeschaltet wird, obwohl z.B. View9 das active-Attribut gesetzt hat.
Hi zusammen,
ich habe mal eine Frage ohne zu wissen, ob das Sinn macht oder evtl schon realisiert wurde:
Besteht die Möglichkeit ein Chart als Hintergrund in ein ftui-grid Element zu bauen?
Ich habe innerhalb meines gesamten Layouts z.B. eine Zelle mit 5-6 Informationen über den Ladezustand meines Fahrzeugs dargestellt. Teils mittels Text (Ladestand: 83%), teils mittels dynamischer Icons (grüner Stecker=Fzg in Wallbox angesteckt) usw. Weiterhin habe ich auf einer anderen Seite ein Chart, in dem auch ein Graph die Ladeleistung über den Tag darstellt.
Nun hatte ich grade die Idee, wie es wäre, diesen Graph stark vereinfach (ohne Achsenbeschriftungen etc) als halbtransparenten Zellenhintergrund darzustellen...
Hi Dracolein,
hast du schon als style Bsp.:
opacity: 0.5;
mitgegeben?
LG
Hm, aber wie bekomme ich ein <ftui-chart> Element in den Hintergrund?
So sieht die Zelle aus:
<ftui-grid-tile row="1" col="16" height="3" width="4">
<header>Wallbox & Tesla</header>
<ftui-row>
<ftui-column>
<ftui-label class="size-0">Akkustand:</ftui-label>
<ftui-label class="size-0">Reichweite:</ftui-label>
<ftui-label class="size-0">Ladeziel:</ftui-label>
<ftui-label class="size-0">Ladeleistung:</ftui-label>
<ftui-label class="size-0">Energie hinzu:</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="MQTT2_TeslaMate:cars_1_usable_battery_level" class="size-3"><span class="size-0" slot="unit">%</span></ftui-label>
<ftui-label [text]="MQTT2_TeslaMate:cars_1_ideal_battery_range_km | fix(0)" class="size-3"><span class="size-0" slot="unit">km</span></ftui-label>
<ftui-label [text]="MQTT2_TeslaMate:cars_1_charge_limit_soc" class="size-3"><span class="size-0" slot="unit">%</span></ftui-label>
<ftui-label [text]="EVCharger22:Leistung_Ladestation_kW | fix(1)" class="size-4"
[color]="EVCharger22:Leistung_Ladestation_kW | step('0:grey, 1:green, 6:red')">
<span class="size-0" slot="unit">kW</span></ftui-label>
<ftui-label [text]="EVCharger22:Energie_Ladevorgang_kW | fix(1)" class="size-4"><span class="size-0" slot="unit">kWh</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon size="-1" path="fa-svg/solid"
[name]="MQTT2_TeslaMate:cars_1_locked | map('false:lock-open, true:lock')"
[color]="MQTT2_TeslaMate:cars_1_locked | map('false:danger, true:medium')">
</ftui-icon>
<ftui-icon size="-1" path="fa-svg/solid"
[name]="EVCharger22:Status_Ladevorgang | map('nicht verbunden:plug-circle-xmark-solid, verbunden:plug-circle-check-solid, Ladevorgang aktiv:charging-station')"
[color]="EVCharger22:Status_Ladevorgang | map('nicht verbunden:danger, verbunden:orange, Ladevorgang aktiv:green')">
</ftui-icon>
<ftui-icon size="-1" path="fa-svg/solid"
[name]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:solar-panel, Schnellladen:bolt')"
[color]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:orange, Schnellladen:orange')">
</ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
im row position:absolute und ein height und im chart(hier icon) opacity:0.5 oder geringer...
<ftui-grid-tile row="1" col="16" height="3" width="4">
<header>Wallbox & Tesla</header>
<ftui-icon class="size-10" name="window-shutter" style="opacity:0.5"></ftui-icon>
<ftui-row style="position:absolute;height: 120px;">
<ftui-column>
<ftui-label class="size-0">Akkustand:</ftui-label>
<ftui-label class="size-0">Reichweite:</ftui-label>
<ftui-label class="size-0">Ladeziel:</ftui-label>
<ftui-label class="size-0">Ladeleistung:</ftui-label>
<ftui-label class="size-0">Energie hinzu:</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="MQTT2_TeslaMate:cars_1_usable_battery_level" class="size-3"><span class="size-0" slot="unit">%</span></ftui-label>
<ftui-label [text]="MQTT2_TeslaMate:cars_1_ideal_battery_range_km | fix(0)" class="size-3"><span class="size-0" slot="unit">km</span></ftui-label>
<ftui-label [text]="MQTT2_TeslaMate:cars_1_charge_limit_soc" class="size-3"><span class="size-0" slot="unit">%</span></ftui-label>
<ftui-label [text]="EVCharger22:Leistung_Ladestation_kW | fix(1)" class="size-4"
[color]="EVCharger22:Leistung_Ladestation_kW | step('0:grey, 1:green, 6:red')">
<span class="size-0" slot="unit">kW</span></ftui-label>
<ftui-label [text]="EVCharger22:Energie_Ladevorgang_kW | fix(1)" class="size-4"><span class="size-0" slot="unit">kWh</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon size="-1" path="fa-svg/solid"
[name]="MQTT2_TeslaMate:cars_1_locked | map('false:lock-open, true:lock')"
[color]="MQTT2_TeslaMate:cars_1_locked | map('false:danger, true:medium')">
</ftui-icon>
<ftui-icon size="-1" path="fa-svg/solid"
[name]="EVCharger22:Status_Ladevorgang | map('nicht verbunden:plug-circle-xmark-solid, verbunden:plug-circle-check-solid, Ladevorgang aktiv:charging-station')"
[color]="EVCharger22:Status_Ladevorgang | map('nicht verbunden:danger, verbunden:orange, Ladevorgang aktiv:green')">
</ftui-icon>
<ftui-icon size="-1" path="fa-svg/solid"
[name]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:solar-panel, Schnellladen:bolt')"
[color]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:orange, Schnellladen:orange')">
</ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
LG mr_petz
Hi zusammen,
ich bräuchte etwas Hilfe, da ich gerade von ftui2 auf 3 umsteige.
zum einen hatte ich einen refresh-button, den ich aber nicht wieder zum laufen bekomme.
alt:
<div data-type="link" class="round" data-color="grey" data-width="50" data-height="50
data-background-color="red" data-icon="fa-refresh" data-url="javascript:history.go(0)">
</div>[code]
und zum anderen sind die label-Ausgaben mir noch nicht ganz verständlich:
bisher:
<div data-type="label" data-device="Warmwassertemperatur" data-pre-text="WW: " data-get="Warmwassertemperatur" data-unit="%B0C%0A" class="cell bigger" data-limits='[0,27,37]' data-colors='["#5858FA","white","#fa5f58"]'></div>
führte zur Ausgabe der Temperatur in Zahlen.
<ftui-label [text]="Warmwassertemperatur" size="2"></ftui-label>
führt zB zur Ausgabe Warmwassertemperatur 48.5
Wie schaffe ich es, daß nur der Zahlenwert verwendet wird? Insbesondere, wenn er in einem ftui-knob auch verwendet werden soll?
Zitat von: DerFranke am 01 September 2022, 09:30:53
Hi zusammen,
ich bräuchte etwas Hilfe, da ich gerade von ftui2 auf 3 umsteige.
zum einen hatte ich einen refresh-button, den ich aber nicht wieder zum laufen bekomme.
alt:
<div data-type="link" class="round" data-color="grey" data-width="50" data-height="50
data-background-color="red" data-icon="fa-refresh" data-url="javascript:history.go(0)">
</div>[code]
Refresh der Seite:
<ftui-icon class="size-1" name="refresh" @click="javascript:window.location.reload(true);"></ftui-icon>
oder wie bei dir:
<ftui-icon class="size-1" name="refresh" @click="javascript:history.go(0);"></ftui-icon>
Zitat
und zum anderen sind die label-Ausgaben mir noch nicht ganz verständlich:
bisher:
<div data-type="label" data-device="Warmwassertemperatur" data-pre-text="WW: " data-get="Warmwassertemperatur" data-unit="%B0C%0A" class="cell bigger" data-limits='[0,27,37]' data-colors='["#5858FA","white","#fa5f58"]'></div>
führte zur Ausgabe der Temperatur in Zahlen.
<ftui-label [text]="Warmwassertemperatur" size="2"></ftui-label>
führt zB zur Ausgabe Warmwassertemperatur 48.5
Wie schaffe ich es, daß nur der Zahlenwert verwendet wird? Insbesondere, wenn er in einem ftui-knob auch verwendet werden soll?
Ist dein Devicename "Warmwassertemperatur" ? und im state steht die Temperatur? oder heisst dein device Warmwassertemperatur und es gibt noch ein reading Warmwassertemperatur??
Wenn ja:
<ftui-label [text]="Warmwassertemperatur:Warmwassertemperatur" size="2"></ftui-label>LG mr_petz
Zitat von: mr_petz am 01 September 2022, 09:56:00
LG mr_petz
Super!!
Funktionert beides - besten Dank für die schnelle Antwort.
Hallo zusammen,
ich mache gerade meine ersten Gehversuche mit der Version 3.
Ich versuche die beiden Temperaturwerte "tempMin" und "tempMax" rechts neben dem Wettersymbol zu platzieren und habe da so einige Schwierigkeiten.
Mit <DIV> und/oder <Table> und style-> margin/padding/position etc. bekomme ich das schon hin, bin mir aber nicht sicher ob das der richtige weg ist.
so habe ich es jetzt im Moment:
<ftui-grid-tile row="1" col="7" height="3" width="14" shape="round">
<ftui-row>
<ftui-column>
<ftui-label size="3">Heute</ftui-label>
<ftui-weather size="5" icon-set="kleinklima" provider="proplanta" [condition]="myProPlantaWetter:fc0_weatherDay"></ftui-weather>
<ftui-label color="blue" size="3" [text]="myProPlantaWetter:fc0_tempMin" unit="°C"></ftui-label>
<ftui-label color="red" size="3" [text]="myProPlantaWetter:fc0_tempMax" unit="°C"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Wenn ich eine individuelle Positionierung haben möchte, komme ich dann um <DIV> und Konsorten nicht herum ?
Hi ms_steini:
<ftui-cell width="75%">
<ftui-label size="3">Heute</ftui-label>
<ftui-row>
<ftui-weather size="5" icon-set="kleinklima" provider="proplanta" [condition]="myProPlantaWetter:fc0_weatherDay"></ftui-weather>
<ftui-label color="blue" size="3" [text]="myProPlantaWetter:fc0_tempMin" unit="°C"></ftui-label>
<ftui-label color="red" size="3" [text]="myProPlantaWetter:fc0_tempMax" unit="°C"></ftui-label>
</ftui-row>
</ftui-cell>
ftui-cell könnte man auch weglassen...
ftui-row=Zeile
ftui-column=Spalte
LG mr_petz
besten Dank....
so ist es für mich fein...
<ftui-cell>
<ftui-label size="2" text="Heute"></ftui-label>
<ftui-row>
<ftui-column>
<ftui-weather size="4" icon-set="kleinklima" provider="proplanta" [condition]="myProPlantaWetter:fc0_weatherDay"></ftui-weather>
</ftui-column>
<ftui-column>
<ftui-label color="blue" size="2" [text]="myProPlantaWetter:fc0_tempMin" unit="°C"></ftui-label>
<ftui-label color="red" size="2" [text]="myProPlantaWetter:fc0_tempMax" unit="°C"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-cell>
gleich noch einen hinterher....
wie bekomme ich denn den Monat mit 3 Buchstaben hin ?? also Jan Feb Mär usw.
beim Tag geht das ja mit dem "eeee" = "Donnerstag" "eee" = "Don" "ee" = "Do".... aber wie bei Monat ?
<ftui-clock format="DD. MMMM YYYY" size="3" color="white"></ftui-clock>
müsste das aus Platzgründen so haben
Das geht standardmäßig in ftui-clock nicht. Es sei denn du kannst die Zeit und/oder das Datum auch aus fhem holen?
setstate müsste für ftui-clock in der ftui.helper.js noch eine Funktion dafür erweitern Bsp.:
const MMM = (lang === 'de') ? months_de[month].substring(0, 3) : months[month].substring(0, 3);
ret = ret.replace('MMM', MMM);
LG mr_petz
Guten Morgen allerseits,
ich bin etwas unzufrieden mit dem Aufbau der HTML Seite(n) und hätte da mal ein paar Grundlegende Fragen.
Sorry wenn das evtl. in den 174 Beiträgen oder anders wo schon erwähnt wurde, ich habe nicht alles hier gelesen.
Ich habe mit FTUI3 jetzt ein bisschen Proplanta Wetter, ein Menu, 3 Fenster, 3 Rolladen, ein bisschen Kleinkram und 5 Popups
und bin jetzt bei gut 1000 Zeilen [FTUI (HTML)-Code].
Ich könnte mir gut vorstellen das wenn ich alle meine Komponenten mit FTUI3 berücksichtige, komme ich bestimmt weit über 10.000 Zeilen FTUI (HTML)-Code.
Und das macht es (für mich zumindest) sehr unübersichtlich und macht mich unzufrieden.
Alleine meine (Fenster,Rolladen,ASC-Steuerung Kombination) sind schon 100 Zeilen (Buttons, Icons und Popup) und ich habe knapp 30 Fenster und 21 Rolladen.
Dazu kommen noch die ganzen Lampen,Lichter,Sensoren,Dimmer,Gartenbewässerung,Kameras und was weiß ich noch alles.......
Gibt es evtl. eine Möglichkeit wie z.B. eine "function()" wie bei PHP um den Aufbau der (Fenster,Rolladen,ASC-Steuerung Kombination) nur EINMAL zu schreiben
und bei Verwendung der function popup-target="....popup_ROLLO(EG.Rollo.Buero.Fenster)...." werden die Devices übergeben.
Beispiel für ein POPUP:
<ftui-icon size="7" popup-target="....popup_ROLLO(EG.Rollo.Buero.Fenster)...." <<< *****************************************
[name]="EG.Rollo.Buero.Fenster:pct | map('0:f_rollo_0,´[1-9]´:f_rollo_1,´1[0-9]´:f_rollo_10,´2[0-9].*´:f_rollo_20,´3[0-9].*´:f_rollo_30,´4[0-9].*´:f_rollo_40,´5[0-9].*´:f_rollo_50,´6[0-9].*´:f_rollo_60,´7[0-9].*´:f_rollo_70,´8[0-9].*´:f_rollo_80,´9[0-9].*´:f_rollo_90,100:f_rollo_100')"
[color]="EG.Rollo.Buero.Fenster:pct | map('0:green,´[1-9]´:red,´1[0-9]´:red,´2[0-9].*´:red,´3[0-9].*´:red,´4[0-9].*´:red,´5[0-9].*´:red,´6[0-9].*´:red,´7[0-9].*´:red,´8[0-9].*´:red,´9[0-9].*´:red,100:red')">
</ftui-icon>
<ftui-icon size="7" popup-target="....popup_ROLLO(EG.Rollo.Wohnzimmer.Fenster)...." <<< *****************************************
[name]="EG.Rollo.Wohnzimmer.Fenster:pct | map('0:f_rollo_0,´[1-9]´:f_rollo_1,´1[0-9]´:f_rollo_10,´2[0-9].*´:f_rollo_20,´3[0-9].*´:f_rollo_30,´4[0-9].*´:f_rollo_40,´5[0-9].*´:f_rollo_50,´6[0-9].*´:f_rollo_60,´7[0-9].*´:f_rollo_70,´8[0-9].*´:f_rollo_80,´9[0-9].*´:f_rollo_90,100:f_rollo_100')"
[color]="EG.Rollo.Wohnzimmer.Fenster:pct | map('0:green,´[1-9]´:red,´1[0-9]´:red,´2[0-9].*´:red,´3[0-9].*´:red,´4[0-9].*´:red,´5[0-9].*´:red,´6[0-9].*´:red,´7[0-9].*´:red,´8[0-9].*´:red,´9[0-9].*´:red,100:red')">
</ftui-icon>
function popup_ROLLO(DEVICE...) {
<ftui-popup id="{DEVICE}" timeout="0" width="500px" height="260px">
<header class="size-3">Rollo-Steuerung {DEVICE}</header>
<ftui-row>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct"
[color]="{DEVICE}:motor | map('´^stop\:off$|^stop\:zu$´:medium,´^stop\:on$|^stop\:auf$´:red,´^stop\:([0-9]|([1-9][0-9]))$|^stop\:([0-9]\.[0-9]|([1-9][0-9]\.[0-9]))$´:medium,´^down.*$´:medium,´^up.*$´:orange')"
size="large" fill="inline" states="100">
<ftui-icon
[name]="{DEVICE}:motor | map('´^stop\:off$|^stop\:zu$´:f_rollo_100,´^stop\:on$|^stop\:auf$´:f_rollo_100,´^stop\:([0-9]|([1-9][0-9]))$|^stop\:([0-9]\.[0-9]|([1-9][0-9]\.[0-9]))$´:f_rollo_100,´^down.*$´:f_rollo_100,´^up.*$´:fts_shutter_up')"
[class-name]="{DEVICE}:motor | map('´^up.*$´:blink')"
size="5">
</ftui-icon>
</ftui-button>
<ftui-label size="2" text="auf"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}" size="large" fill="inline" states="stop"
[color]="{DEVICE}:motor | map('´^down:.*$´:medium,´^up:.*$´:medium,´^stop:.*$´:red')">
<ftui-icon size="5" name="stop-circle-o"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="stop"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}r:pct"
[color]="{DEVICE}:motor | map('´^stop\:off$|^stop\:zu$´:green,´^stop\:on$|^stop\:auf$´:medium,´^stop\:([1-9]|([1-9][0-9]))$|^stop\:([1-9]\.[0-9]|([1-9][0-9]\.[0-9]))$´:medium,´^down.*$´:orange,´^up.*$´:medium')"
size="large" fill="inline" states="0">
<ftui-icon
[name]="{DEVICE}:motor | map('´^stop\:off$|^stop\:zu$´:f_rollo_0,´^stop\:on$|^stop\:auf$´:f_rollo_0,´^stop\:([1-9]|([1-9][0-9]))$|^stop\:([1-9]\.[0-9]|([1-9][0-9]\.[0-9]))$´:f_rollo_0,´^down.*$´:fts_shutter_down,´^up.*$´:f_rollo_0')"
[class-name]="{DEVICE}:motor | map('´^down.*$´:blink')"
size="5">
</ftui-icon>
</ftui-button>
<ftui-label size="2" text="zu"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct" size="large" fill="inline" states="80"
[color]="{DEVICE}:pct | map('´^[0-9]\.[0-9]$|^[0-9]$|^[1-7][0-9].*$|^100$´:medium,´^8[0-9].*$|^9[0-9].*$´:red')">
<ftui-icon size="5" name="f_rollo_80"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="80%"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct" size="large" fill="inline" states="60"
[color]="{DEVICE}:pct | map('´^[0-9]\.[0-9]$|^[0-9]$|^[1-5][0-9].*$|^[8-9][0-9].*$|^100$´:medium,´^6[0-9].*$|^7[0-9].*$´:red')">
<ftui-icon size="5" name="f_rollo_60"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="60%"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct" size="large" fill="inline" states="40"
[color]="{DEVICE}:pct | map('´^[0-9]\.[0-9]$|^[0-9]$|^[1-3][0-9].*$|^[6-9][0-9].*$|^100$´:medium,´^4[0-9].*$|^5[0-9].*$´:red')">
<ftui-icon size="5" name="f_rollo_40"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="40%"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct" size="large" fill="inline" states="20"
[color]="{DEVICE}:pct | map('´^[0-9]\.[0-9]$|^[0-9]$|^1[0-9].*$|^[4-9][0-9].*$|^100$´:medium,´^2[0-9].*$|^3[0-9].*$´:red')">
<ftui-icon size="5" name="f_rollo_20"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="20%"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-popup>
}
ODER vielleicht in weitere Dateien auslagern und mit z.B. include(Datei) nachladen.
Bin ich da alleine mit meiner Meinung oder wie seht bzw. macht ihr das ?
Wenn das ganze was ich hier verzapft habe Humbug ist.... mea culpa
Schau dir mal content an.
Hier ein Beispiel:
https://forum.fhem.de/index.php/topic,120379.msg1149119.html#msg1149119
unfassbar.......
bin von 1000 Zeilen Code auf 350 Zeilen runter......
OK, die Zeilen in den Content-Dateien NICHT mitgezählt.... ABER es macht es ungemein übersichtlicher.
mein Icon-Symbol mit Popup:
<ftui-column>
<ftui-content file="Rollo-2fach-Fenster.html" RolloDevice="EG.Rollo.Buero.Fenster" FensterDevice="FE_Buero" LabelText="Büro"></ftui-content>
</ftui-column>
und mein Popup:
<ftui-popup id="EG.Rollo.Buero.Fenster" timeout="0" width="500px" height="260px">
<header class="size-3">Rollo-Steuerung Büro Fenster</header>
<ftui-content file="Rollo-Steuerung-POPUP.html" RolloDevice="EG.Rollo.Buero.Fenster"></ftui-content>
</ftui-popup>
und das beste, ich brauche die Struktur des PopUp's nicht mehrfach schreiben und ggf. ändern.
@mr_petz: Vielen Dank für den Link. Hat mich echt weitergebracht
Hallo zusammen,
ich versuche gerade meine Heizungsvisualisierung auf FTUI3 umzustellen.
Ich habe gelernt, daß ich mit:
<div ftui-binding [data-test]="smartMeter2:power" onclick="window.alert(this.getAttribute('data-test')); return false;">Hallo</div>
Readings abonnieren kann.
Nun möchte ich dieses Readings jedoch nicht als Attribut haben sondern in einem Tag, also zwischen den >< also quasi innerHTML.
Ziel ist es eine SVG Grafik mit Werten zu versehen.
Wie mache ich dies, bzw wie kann ich mit einer JS Funktion ein Reading abonnieren.
Hoffe soweit verständlich.
Vielen Dank im Voraus.
MfG Stephan
Spontan fällt mir nur der Weg über ftui-content ein, da du dort dann Werte ersetzen kannst (man kann zB devices etc übergeben). Du würdest dann deinen Inhalt definieren:
<ftui-content file="mypowercontent.html" [mypower]="smartMeter2:power"></ftui-content
Du erzeugst eine neue HTML mypowercontent.html, die dann deinen anzuzeigenden Inhalt beinhaltet und den Parameter {{mypower}} welcher durch suchen&ersetzen regex durch den wert hinter mypower ersetzt wird:
<div onclick="window.alert('{{mypower}}'); return false;">{{mypower}}</div>
Ist ungetestet aber so würde ich es zumindest erstmal versuchen.
Wahrscheinlich würde dies auch einfacher mit JS gehen.
Zitat von: yersinia am 22 September 2022, 12:53:19
Spontan fällt mir nur der Weg über ftui-content ein, da du dort dann Werte ersetzen kannst (man kann zB devices etc übergeben). Du würdest dann deinen Inhalt definieren:
Danke für die Info, jedoch leider funktioniert dies nicht, da nach meinem Verständnis dies ein reines suchen ersetzen ist.
Ich brauche aber den Wert inklusive der Aktualisierungen.
MfG Stephan
Meines Verständnisses nach wird die Aktualisierung durchgereicht. Hast du es mal probiert?
Wenn es nicht gehen sollte, wirst du um eine kleine Component/JS Code nicht drumherum kommen.
Zitat von: yersinia am 22 September 2022, 15:49:01
Meines Verständnisses nach wird die Aktualisierung durchgereicht. Hast du es mal probiert?
Ja, hab ich. Ich bin jedoch der Meinung dies ist ein Missverständnis.
Hier ein Auszug aus einem SVG:
<text
class="text"
y="30"
id="text153"><tspan
x="5"
dy="1.2em"
id="tspan150">el. Leistung</tspan><tspan
x="5"
dy="1.2em"
id="idKcPower" ftui-binding [data-kc-val]="smartMeter2:power">HIER SOLL DER WERT AUS smartMeter2:power STEHEN</tspan> W</text>Zwischen dem tspan soll nun der Wert des readings rein.
Habe mir momentan mit einem eigenen Pipe beholfen:
const kcHpsuSvg = ($targetId) => input => document.getElementById($targetId).innerHTML=input;Das SVG sieht dann so aus:
<text
class="text"
y="30"
id="text153"><tspan
x="5"
dy="1.2em"
id="tspan150">el. Leistung</tspan><tspan
x="5"
dy="1.2em"
id="idKcPower" ftui-binding [data-kc-val]="smartMeter2:power | kcHpsuSvg('idKcPower')">-</tspan> W</text>Es funktioniert zwar, jedoch elegant ist vermutlich anders.
Bin für neue Ideen offen.
MfG Stephan
Wo ist der Aufruf durch ftui-content, welcher das svg lädt?
Ich denke da an eine eigene HTML für das svg:
<text
class="text"
y="30"
id="text153"><tspan
x="5"
dy="1.2em"
id="tspan150">el. Leistung</tspan><tspan
x="5"
dy="1.2em">{{idkpower}}</tspan> W</text>
diese speicherst du irgendwo, wo ftui3 drauf zugreifen kann, ab und bindest diesen Inhalt dann in deiner ftui3-seite via
<ftui-content file="deine_svg_datei.html" [idkpower]="smartMeter2:power"></ftui-content>
ein.
Du übergibst so den Wert aus dem Reading an eine interne Variable (idkpower), die FTUI3 dann in dem aufgerufenen Inhalt ersetzt (deswegen dort auch {{idkpower}}).
Aber wenn es über die eigene pipe funktioniert ist es ja gut. ;)
Zitat von: yersinia am 22 September 2022, 17:05:19
Ich denke da an eine eigene HTML für das svg:
Genau das habe ich probiert, jedoch dann steht im tspan
smartMeter2:power und nicht der Wert des readings.
MfG Stephan
Hey zusammen,
gibts eigentlich irgendwo eine dokumentierte Übersicht über mögliche Layout-Parameter zur optischen Ausrichtung verschiedener Elemente zueinander?
Die FTUI2 Dokumentation war sehr ausführlich.
Hintergrund:
Ich häng mein Problem als Bild einmal an.
Die gelb markierten Flächen sind unnötig freier Platz, den ich gern vermeiden möchte.
Die Zelle besteht aus 3 Spalten, die nebeneinander platziert sind.
Nun habe ich in der Spalte "Franziska" ein Heizungssymbol zusätzlich NEBEN das TV-Symbol plaziert und plötzlich zieht sich die ganze Spalte weiter auseinander sodass es doff ausschaut
(linke Spalte "Maximilian" - so sah es vorher aus und passte)
Kopfkratz...
Hi Stephan
Mal auf die schnelle.
<text
class="text"
y="30"
id="text153"><tspan
x="5"
dy="1.2em"
id="tspan150">el. Leistung</tspan><tspan
x="5"
dy="1.2em" id="idKcPower" ftui-binding [data-kc-val]="smartMeter2:power | t=>this.element.textContent=t">-</tspan> W</text>
LG mr_petz
Zitat von: Dracolein am 22 September 2022, 19:13:54
Hey zusammen,
gibts eigentlich irgendwo eine dokumentierte Übersicht über mögliche Layout-Parameter zur optischen Ausrichtung verschiedener Elemente zueinander?
Die FTUI2 Dokumentation war sehr ausführlich.
Hintergrund:
Ich häng mein Problem als Bild einmal an.
Die gelb markierten Flächen sind unnötig freier Platz, den ich gern vermeiden möchte.
Die Zelle besteht aus 3 Spalten, die nebeneinander platziert sind.
Nun habe ich in der Spalte "Franziska" ein Heizungssymbol zusätzlich NEBEN das TV-Symbol plaziert und plötzlich zieht sich die ganze Spalte weiter auseinander sodass es doff ausschaut
(linke Spalte "Maximilian" - so sah es vorher aus und passte)
Kopfkratz...
Ich pack mal noch meinen Zellencode dabei:
<ftui-grid-tile row="1" col="6" height="3" width="5">
<header>Dachgeschoss</header>
<ftui-row>
<ftui-column>
<ftui-label size="0" popup-target="maximilian">Maximilian:</ftui-label>
<ftui-row style="margin-top:-1em;">
<ftui-button [(value)]="ShellyPlug3" shape="circle" class="size-1"
[color]="ShellyPlug3 | map('on:brown, off:dark')">
<ftui-icon [name]="ShellyPlug3 | map('on:tv, off:tv')"
[color]="ShellyPlug3 | map('on:dark, off:light')"></ftui-icon>
</ftui-button>
<ftui-button [(value)]="ShellyPlug6" shape="circle" class="size-1"
[color]="ShellyPlug6 | map('on:danger, off:dark')">
<ftui-icon [name]="ShellyPlug6 | map('on:fire, off:fire')"
[color]="ShellyPlug6 | map('on:yellow, off:light')"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-button color="dark" popup-target="maximilian">
<ftui-label [text]="RaumsensorMaxi_T:temperature | fix(0)" class="size-4" popup-target="maximilian"
[color]="RaumsensorMaxi_T:temperature | step('16: blue, 19:green, 23: orange, 25: red')">
<span class="size-1" slot="unit">°C</span></ftui-label>
</ftui-button>
<ftui-icon size="0" path="../images/openautomation"
[name]="HUESensor56 | map('open:fts_window_1w_tilt, closed:fts_window_1w')"
[class-name]="HUESensor56 | map('open:hop,closed:')"
[color]="HUESensor56 | map('open:danger, closed:medium')">
</ftui-icon>
</ftui-column>
<ftui-column>
<ftui-label size="0">Nachtlicht Flur:</ftui-label>
<ftui-button [(value)]="HUEDevice3" shape="circle"
[color]="HUEDevice3 | map('on:brown, off:dark')">
<ftui-icon name="moon" size="3"
[color]="HUEDevice3 | map('on:dark, off:light')"></ftui-icon>
</ftui-button>
<ftui-label size="0">Zeitplan:</ftui-label>
<ftui-label [text]="Nachtlichtautomatik:timer_01_c01" size="0"
[hidden]="Nachtlichtautomatikschalter:state | map('on:false, off:true')"></ftui-label>
<ftui-label [text]="Nachtlichtautomatik:timer_02_c02" size="0"
[hidden]="Nachtlichtautomatikschalter:state | map('on:false, off:true')"></ftui-label>
<ftui-label size="0"
[hidden]="Nachtlichtautomatikschalter:state | map('on:true, off:false')">inaktiv</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label size="0" popup-target="franziska">Franziska:</ftui-label>
<ftui-row style="margin-top:-1em;">
<ftui-button [(value)]="ShellyPlug4" shape="circle" class="size-1"
[color]="ShellyPlug4 | map('on:brown, off:dark')">
<ftui-icon [name]="ShellyPlug4 | map('on:tv, off:tv')"
[color]="ShellyPlug4 | map('on:dark, off:light')"></ftui-icon>
</ftui-button>
<ftui-button [(value)]="ShellyPlug5" shape="circle" class="size-1"
[color]="ShellyPlug5 | map('on:danger, off:dark')">
<ftui-icon [name]="ShellyPlug5 | map('on:fire, off:fire')"
[color]="ShellyPlug5 | map('on:yellow, off:light')"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-button color="dark" popup-target="franziska">
<ftui-label [text]="RaumsensorFranzi_T:temperature | fix(0)" class="size-4" popup-target="franziska"
[color]="RaumsensorFranzi_T:temperature | step('16: blue, 19: green, 23: orange, 25: red')">
<span class="size-1" slot="unit">°C</span></ftui-label>
</ftui-button>
<ftui-icon size="0" path="../images/openautomation"
[name]="HUESensor55 | map('open:fts_window_1w_tilt, closed:fts_window_1w')"
[class-name]="HUESensor55 | map('open:hop,closed:')"
[color]="HUESensor55 | map('open:danger, closed:medium')">
</ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
@Draco
Es gibt:
margin
padding
height
width
und style=""
Edit:
für label gibt es noch
top
left
text-align
Du könntest folgendes im ftui-row testen:
<ftui-label size="0" popup-target="franziska">Franziska:</ftui-label>
<ftui-row margin="0" padding="0" style="height:auto;">
hier muss height="auto" ins style, weil sonst das normale Attribute height="auto"
wird zu flex:0 0 auto
Bei mir sieht es gleichmäßig aus.
Des Weiteren könntest du es noch mit ner (in eine) ftui-cell versuchen (packen).
LG mr_petz
Danke, das hat geklappt.
margin="0" und "Padding="0" hatte ich im Vorfeld durchprobiert, ohne sichtbare Veränderung.
Zitat
hier muss height="auto" ins style, weil sonst das normale Attribute height="auto"
wird zu flex:0 0 auto
Das war mir neu. height="auto". Deine Begründung habe ich nicht ganz nachvollzogen, seis drum; funktioniert perfekt.
Kannst es mal testen. Einmal mit height="auto" und das gleiche mit style="height:auto;".
Sieht beides unterschiedlich aus.
height="auto" wird umgestrickt zu :
flex: 0 0 auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
Kann man in der Console sehen...
LG
Zitat von: Stephan.K am 22 September 2022, 17:23:31Genau das habe ich probiert, jedoch dann steht im tspan smartMeter2:power und nicht der Wert des readings.
Interessant, ich bin davon ausgegangen, dass ftui-content das binding ausliest und an den Inhalt weitergibt. Danke fürs Richtigstellen durch Test. :)
Zitat von: mr_petz am 22 September 2022, 19:20:03
Hi Stephan
Mal auf die schnelle.
<text
class="text"
y="30"
id="text153"><tspan
x="5"
dy="1.2em"
id="tspan150">el. Leistung</tspan><tspan
x="5"
dy="1.2em" id="idKcPower" ftui-binding [data-kc-val]="smartMeter2:power | t=>this.element.textContent=t">-</tspan> W</text>
LG mr_petz
Nachtrag:
Es geht auch noch einwenig anders ohne Pfeilfunktion (was nun besser ist musst du für Dich entscheiden):
<text
class="text"
y="30"
id="text153"><tspan
x="5"
dy="1.2em"
id="tspan150">el. Leistung</tspan><tspan
x="5"
dy="1.2em" id="idKcPower" ftui-binding [data-kc-val]="smartMeter2:power | this.element.textContent=text">-</tspan> W</text>
text kommt vom binding.
Edit:
Hier gehen nur keine weiteren pipes.
Wenn dann nur so. Bsp.:
this.element.textContent=String(text).slice(0,5)
Bei der Pfeilfunktion muss man die anderen pipes die man benötigt voran setzen.
Edit2:
Upsss
In der 2. Variante kommt eine Fehlermeldung im log. Funktioniert zwar, aber würde ich da nicht so verwenden... Sorry.
Pfeilfunktion ist hier besser (hier mit der pipe slice()):
ftui-binding [data-kc-val]="smartMeter2:power | slice(0,5) | t=>this.element.textContent=t"
alternativ so:
ftui-binding [data-kc-val]="smartMeter2:power | ()=>this.element.textContent=text.slice(0,5)"
LG mr_petz
@mr_petz
Vielen Dank für die Ausführungen.
Werde deine zweite Variante primär Einsetzen.
Meine eigene Pipe Funktion werde ich nur da verwenden wo ich auch Texte übersetzen bzw weitere Anpassungen per JS machen muß.
MfG Stephan
Hallo,
versuche meine FTUI2 Oberfläche auf FTUI3 umzustellen.
Fange gerade erst an mich da wieder einzuarbeiten, hänge aber gleich mal fest.. :(
1. Wie bekomme ich es hin im knob-value und im label eine Dezimalstelle anzuzeigen?
Sämtliche Versuche mit round(1) oder decimals="1" oder komplett ohne eine Angabe schlagen fehl, mehr Varianten konnte ich bisher
nicht ergooglen... :(
Ich habe immer keine Dezimalstelle.
Mein aktueller Code dazu:
<!-- Temp Küche-->
<ftui-grid-tile row="3" col="2" height="2" width="3" shape="round">
<header>Küche</header>
<ftui-row>
<ftui-column>
<ftui-knob [value]="EG.ku.TF.Kueche:temperature | round(1) "
[color]="EG.ku.TF.Kueche:temperature | step('0: primary, 18: ok, 20: yellow, 22: orange, 30: danger')"
width="140" offset-y="10"
type="handle" min="16" max="25" unit="°C" readonly has-value-text></ftui-knob>
</ftui-column>
<ftui-column>
<ftui-label [text]="EG.ku.TF.Kueche:humidity | round(1) " unit="%" size="7">
</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
2. Wie kann ich einen Zeilenumbruch bei der Anzeige der offenen Fenster erzwingen? Aktuell laufen sie rechts aus dem tile...
<!-- FENSTER -->
<ftui-grid-tile row="6" col="8" height="2" width="2"
[color]="Homemode:contactsWindowsOpen_ct | map('0:ok, `.*`:danger')">
<header>Fenster</header>
<ftui-icon name="classic-window" size="3"></ftui-icon>
<ftui-label [text]="Homemode:contactsWindowsOpen
| replace('OG.ba.TK.Badezimmer','Bad')
| replace('OG.sz.TK.FensterSZ','Schlafzimmer')
| replace('EG.sp.TK.Spielzimmer','Spielezimmer')"
width="80%" scroll></ftui-label>
</ftui-grid-tile>
Eine dritte Frage:
Wie kann ich beim Segmented-button mir nur den Status des Devices anzeigen lassen, ihn aber nicht "klickbar" einstellen?
<ftui-grid-tile row="10" col="2" height="1" width="6">
<header>Homemode</header>
<ftui-segment [(value)]="rgr_Home">
<ftui-segment-button value="home">
<ftui-icon name="home"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="asleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="gone">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>
Vielen Dank bis dahin :)
Gruß
Sascha
Hast Du mal in den Beispielen zum knob auf setstates git (https://knowthelist.github.io/ftui/www/ftui/examples/knob.html) nachgesehen?
Zitat von: grossmaggul am 26 September 2022, 14:46:54
Hast Du mal in den Beispielen zum knob auf setstates git (https://knowthelist.github.io/ftui/www/ftui/examples/knob.html) nachgesehen?
Ja habe ich natürlich reingeschaut, da finde ich aber nichts, bzw ist dort überhaupt kein Parameter angegeben (wie in meinem Code) und es werden Dezimalstellen
angezeigt. Bei mir jedoch nicht, obwohl sie im Reading enthalten sind.
zu1: round() zieht nur bei Readings mit Kommastellen. (fügt keine Nachkommastelle hinzu). dazu fix() verwenden...
zu2: scroll ins label mit einfügen
zu3:
<ftui-segment [(value)]="rgr_Home" style="pointer-events:none;">
<ftui-segment-button value="home">
<ftui-icon name="home"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="asleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="gone">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Edit: hier sind alle pipes zu sehen:
https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L6
LG mr_petz
Zitat von: mr_petz am 26 September 2022, 15:23:27
zu1: round() zieht nur bei Readings mit Kommastellen. (fügt keine Nachkommastelle hinzu)
zu2: scroll ins label mit einfügen
zu3:
<ftui-segment [(value)]="rgr_Home" style="pointer-events:none;">
<ftui-segment-button value="home">
<ftui-icon name="home"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="asleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="gone">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
LG mr_petz
Vielen Dank!
zu 1: Naja das reading HAT ja eine Kommastelle?! (Knob zeigt im Bild "19" an, der tatsächliche Wert im reading ist "19.1" gewesen.
zu 2: scroll ist im label angegeben :o
...
| replace('EG.sp.TK.Spielzimmer','Spielezimmer')"
width="80%" scroll></ftui-label>
...
zu 3: Klasse, funktioniert! :)
Danke!
zu 1: fix() verwenden.
habe es oben hinzugefügt...
scroll muss ich mal anschauen...
Edit: füge für scroll bei deinen Kommas ein Leerzeichen mit ein, sonst kann er es nicht umbrechen...
LG
Zitat von: mr_petz am 26 September 2022, 15:33:18
zu 1: fix() verwenden.
habe es oben hinzugefügt...
scroll muss ich mal anschauen...
Edit: füge für scroll bei deinen Kommas ein Leerzeichen mit ein, sonst kann er es nicht umbrechen...
LG
Einen Teilerfolg kann ich verbuchen :D
Im normalen label klappt es jetzt mit fix(), im knob widget jedoch nicht :(
<ftui-knob [value]="EG.ku.TF.Kueche:temperature | fix(1) "
[color]="EG.ku.TF.Kueche:temperature | step('0: primary, 18: ok, 20: yellow, 22: orange, 30: danger')"
width="140" offset-y="10"
type="arc" min="16" max="25" unit="°C" readonly has-value-text></ftui-knob>
für knob scale-decimals="1" (für die Scala) oder value-decimals="1"(fürs Reading)
LG
Das wars!
Vielen Dank für deine Hilfe!
Ich fürchte ich muss noch einmal nerven :(
Habe Probleme mit den Abständen und komme nicht auf die Lösung, weder durch die Beispiele
noch mit durchforsten des Threads / Forums :(
Wie bekomme ich die Abstände geringer sodass die label nicht oben aus der tile herausragen?
Platz ist ja eigentlich genug da.
Ich habe es mit align-item="bottom" im label versucht, das klappt nicht.
Auch nicht das label in eine eigene row zu setzen (und die row z.B. mit align-item="bottom" zu versehen).
Anbei noch einmal der Code von "Aussen"
<!-- AussenTemp-->
<ftui-grid-tile row="5" col="2" height="2" width="2" shape="round">
<ftui-label size="3">Aussen</ftui-label>
<ftui-column>
<ftui-knob [value]="GV.xx.TF.Aussen:temperature | fix(1) "
[color]="GV.xx.TF.Aussen:temperature | step('-99: primary, 10: ok, 25: warning, 30: danger')"
width="120" offset-y="10"
type="handle" min="-10" max="40" value-decimals="1" unit="°C" color="cold-hot" readonly has-value-text></ftui-knob>
</ftui-column>
</ftui-grid-tile>
Zitat von: mr_petz am 26 September 2022, 15:23:27
...
zu3:
<ftui-segment [(value)]="rgr_Home" style="pointer-events:none;">
<ftui-segment-button value="home">
<ftui-icon name="home"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="asleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="gone">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Edit: hier sind alle pipes zu sehen:
https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L6
LG mr_petz
Kleiner Nachtrag:
Jetzt erst wieder in Erinnerung gerufen...
readonly zieht auch bei segment (steht als Standard bereit!):
<ftui-segment [(value)]="rgr_Home" readonly>
<ftui-segment-button value="home">
<ftui-icon name="home"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="asleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="gone">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
LG mr_petz
@C0mmanda
height mit angeben im knob...
<ftui-grid-tile row="5" col="2" height="2" width="2" shape="round">
<ftui-label text="Aussen" size="3"></ftui-label>
<ftui-knob [value]="GV.xx.TF.Aussen:temperature | fix(1) "
[color]="GV.xx.TF.Aussen:temperature | step('-99: primary, 10: ok, 25: warning, 30: danger')"
width="120" offset-y="10" height="80"
type="handle" min="-10" max="40" value-decimals="1" unit="°C" color="cold-hot" readonly has-value-text></ftui-knob>
</ftui-grid-tile>
Edit:
zur Erklärung. Wenn du kein height mit angibst, dann ist der knob bei dir 150 Hoch (siehe Bild). Dieser Platz ist für die Scala vorgesehen und wenn der knob Rund wäre.
Die blaue Markierung zeigt die Größe des Knob. Wenn deine Kachel zu klein ist und der Knob zu Groß, dann rückt alles auseinander...
Edit2:
Alternativ geht es auch mit margin="-35px"
<ftui-grid-tile row="5" col="2" height="2" width="2" shape="round">
<ftui-label text="Aussen" size="3"></ftui-label>
<ftui-knob [value]="GV.xx.TF.Aussen:temperature | fix(1) "
[color]="GV.xx.TF.Aussen:temperature | step('-99: primary, 10: ok, 25: warning, 30: danger')"
width="120" offset-y="10" margin="-35px"
type="handle" min="-10" max="40" value-decimals="1" unit="°C" color="cold-hot" readonly has-value-text></ftui-knob>
</ftui-grid-tile>
LG
In einer Device habe ich für mehrere Datenpunkte jeweils mehrere readings, das sieht etwa so aus:
A_category Gabel
A_change 3
A_count 10
B_category Gabel
B_change -1
B_count 15
C_category Messer
C_change 0
C_count 21
...
Ich möchte vermittels ftui-label [text] für jeden Datenpunkt eine Zeile -mit mehreren (nicht allen) Readings dieses Datenpunkts- ausgeben (und jeden identisch mit mehreren Befehlen mit pipe bearbeiten).
Vermutlich macht man das mit foreach? Kann mir bitte jemand das an Hand eines Beispiels zeigen?
[Präziser formuliert.]
7-Segment Anzeige möglich?
Ich hatte unter ftui2 eine 7-Segment-Anzeige für die Spritpreise.
Wie realisiere ich das unter FTUI3?
Hat jemand bitte ein Code-Beispiel für mich?
Zitat von: DerFranke am 28 September 2022, 08:36:15
7-Segment Anzeige möglich?
Ich hatte unter ftui2 eine 7-Segment-Anzeige für die Spritpreise.
Wie realisiere ich das unter FTUI3?
Hat jemand bitte ein Code-Beispiel für mich?
Lösungweg1:
Hi, ich kann dir erstmal nur das anbieten:
css:
:root {
--bg-color: none;
--ia-color: rgba(0,0,0,0.2);
--a-color: rgb(82, 192, 219);
--padding-p: 1px;
--bar-w: 5px;
--bar-pad: 1px;
/* no need to change after here */
--padding: calc(var(--padding-p)*2);
--bar-h: calc(var(--bar-w)*4);
--bar-r: calc(var(--bar-w)/2);
--bar-p: calc(var(--padding-p) + var(--bar-w));
--bar-p-t: calc(var(--bar-p)*2);
--c-w: calc(var(--bar-p-t) + var(--bar-h));
--bar-h-t: calc(var(--bar-h)*2);
--c-h-np: calc(var(--bar-p-t) + var(--bar-h-t));
--c-h: calc(calc(var(--c-h-np) + var(--padding-p)) + var(--bar-pad));
}
.s7s {
display: inline-block;
width: var(--c-w);
height: var(--c-h);
background: var(--bg-color);
position: relative;
margin: 0;
}
.nine {
bottom: 10px;
--bar-h: calc(var(--bar-w)*2);
--c-w: calc(var(--bar-p-t) + var(--bar-h));
--bar-h-t: calc(var(--bar-h)*2);
--c-h-np: calc(var(--bar-p-t) + var(--bar-h-t));
--c-h: calc(calc(var(--c-h-np) + var(--padding-p)) + var(--bar-pad));
}
.s7s input {
display: none;
}
.s7s seg {
background: var(--ia-color);
border-radius: var(--bar-r);
height: var(--bar-h);
width: var(--bar-w);
}
.s7s seg:nth-of-type(3n+1) {
height: var(--bar-w);
width: var(--bar-h);
left: 50%;
margin-left: calc(var(--bar-h) / -2);
}
.s7s seg:nth-of-type(1) {
position: absolute;
top: var(--padding);
}
.s7s seg:nth-of-type(2) {
position: absolute;
top: var(--bar-p);
right: var(--padding);
}
.s7s seg:nth-of-type(3) {
position: absolute;
bottom: var(--bar-p);
right: var(--padding);
}
.s7s seg:nth-of-type(4) {
position: absolute;
bottom: var(--padding);
}
.s7s seg:nth-of-type(5) {
position: absolute;
bottom: var(--bar-p);
left: var(--padding);
}
.s7s seg:nth-of-type(6) {
position: absolute;
top: var(--bar-p);
left: var(--padding);
}
.s7s seg:nth-of-type(7) {
position: absolute;
top: 50%;
margin-top: calc(var(--bar-r) * -1);
}
input[value='0'] ~ seg:nth-of-type(1) {
background: var(--a-color);
}
input[value='0'] ~ seg:nth-of-type(2) {
background: var(--a-color);
}
input[value='0'] ~ seg:nth-of-type(3) {
background: var(--a-color);
}
input[value='0'] ~ seg:nth-of-type(4) {
background: var(--a-color);
}
input[value='0'] ~ seg:nth-of-type(5) {
background: var(--a-color);
}
input[value='0'] ~ seg:nth-of-type(6) {
background: var(--a-color);
}
input[value='1'] ~ seg:nth-of-type(2) {
background: var(--a-color);
}
input[value='1'] ~ seg:nth-of-type(3) {
background: var(--a-color);
}
input[value='2'] ~ seg:nth-of-type(1) {
background: var(--a-color);
}
input[value='2'] ~ seg:nth-of-type(2) {
background: var(--a-color);
}
input[value='2'] ~ seg:nth-of-type(4) {
background: var(--a-color);
}
input[value='2'] ~ seg:nth-of-type(5) {
background: var(--a-color);
}
input[value='2'] ~ seg:nth-of-type(7) {
background: var(--a-color);
}
input[value='3'] ~ seg:nth-of-type(1) {
background: var(--a-color);
}
input[value='3'] ~ seg:nth-of-type(2) {
background: var(--a-color);
}
input[value='3'] ~ seg:nth-of-type(3) {
background: var(--a-color);
}
input[value='3'] ~ seg:nth-of-type(4) {
background: var(--a-color);
}
input[value='3'] ~ seg:nth-of-type(7) {
background: var(--a-color);
}
input[value='4'] ~ seg:nth-of-type(2) {
background: var(--a-color);
}
input[value='4'] ~ seg:nth-of-type(3) {
background: var(--a-color);
}
input[value='4'] ~ seg:nth-of-type(6) {
background: var(--a-color);
}
input[value='4'] ~ seg:nth-of-type(7) {
background: var(--a-color);
}
input[value='5'] ~ seg:nth-of-type(1) {
background: var(--a-color);
}
input[value='5'] ~ seg:nth-of-type(3) {
background: var(--a-color);
}
input[value='5'] ~ seg:nth-of-type(4) {
background: var(--a-color);
}
input[value='5'] ~ seg:nth-of-type(6) {
background: var(--a-color);
}
input[value='5'] ~ seg:nth-of-type(7) {
background: var(--a-color);
}
input[value='6'] ~ seg:nth-of-type(1) {
background: var(--a-color);
}
input[value='6'] ~ seg:nth-of-type(3) {
background: var(--a-color);
}
input[value='6'] ~ seg:nth-of-type(4) {
background: var(--a-color);
}
input[value='6'] ~ seg:nth-of-type(5) {
background: var(--a-color);
}
input[value='6'] ~ seg:nth-of-type(6) {
background: var(--a-color);
}
input[value='6'] ~ seg:nth-of-type(7) {
background: var(--a-color);
}
input[value='7'] ~ seg:nth-of-type(1) {
background: var(--a-color);
}
input[value='7'] ~ seg:nth-of-type(2) {
background: var(--a-color);
}
input[value='7'] ~ seg:nth-of-type(3) {
background: var(--a-color);
}
input[value='8'] ~ seg:nth-of-type(1) {
background: var(--a-color);
}
input[value='8'] ~ seg:nth-of-type(2) {
background: var(--a-color);
}
input[value='8'] ~ seg:nth-of-type(3) {
background: var(--a-color);
}
input[value='8'] ~ seg:nth-of-type(4) {
background: var(--a-color);
}
input[value='8'] ~ seg:nth-of-type(5) {
background: var(--a-color);
}
input[value='8'] ~ seg:nth-of-type(6) {
background: var(--a-color);
}
input[value='8'] ~ seg:nth-of-type(7) {
background: var(--a-color);
}
input[value='9'] ~ seg:nth-of-type(1) {
background: var(--a-color);
}
input[value='9'] ~ seg:nth-of-type(2) {
background: var(--a-color);
}
input[value='9'] ~ seg:nth-of-type(3) {
background: var(--a-color);
}
input[value='9'] ~ seg:nth-of-type(4) {
background: var(--a-color);
}
input[value='9'] ~ seg:nth-of-type(6) {
background: var(--a-color);
}
input[value='9'] ~ seg:nth-of-type(7) {
background: var(--a-color);
}
html:
<ftui-grid-tile row="15" col="1" height="1.5" width="3.5" shape="round">
<ftui-row>
<div class='s7s'>
<input ftui-binding value="0" [value]='Device | fix(2) | slice(0,1)'/>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
</div>
<div style="font-size:35px; height:25px;margin:0;padding:0;color:var(--a-color);font-weight: bold;">,</div>
<div class='s7s'>
<input ftui-binding value="0" [value]="Device | fix(2) | slice(2,3)"/>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
</div>
<div class='s7s'>
<input ftui-binding value="0" [value]="Device | fix(2) | slice(3,4)"/>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
</div>
<div class='s7s nine'>
<input value="9"/>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
</div>
</ftui-row>
<script>
// This is only for incrementing purpose - it is totaly posible to use this without js - just set the value for each segment on the backend
function set7SegmentVal(container,val){
var els = container.querySelectorAll(".s7s input");
for(let k =0; k< els.length;k++){
els[k].setAttribute("value",((val+"").padStart(els.length))[k]);
}
return els.length;
}
</script>
</ftui-grid-tile>
Stammt von hier:
https://gitlab.com/nerothe/css-only-7-segmet-display
Device ist mein Demodevice (ein slider). Es muss ein Reading mit eine Stelle vor und mindestens zwei Stellen nach dem Komma sein (oder fix(2) anwenden), sonst funktioniert es nicht... Also von 0.00x bis 9.99x.
Die letzte 9 steht fest da.
Das <script> könnte auch raus.
css musst du selber anpassen wenn dir es so nicht gefällt...
Edit:
Lösungweg2:
oder den seven segment font im ttf-Format herunterladen und einbinden Bsp.:
@font-face {
font-family: 'Seven Segment';
src: url('./fonts/Seven Segment.ttf');
}
.segment {
font-family: 'Seven Segment';
}
im ftui-label oder div dann die class="segment" einbinden...
LG mr_petz
Moin,
gibt es eine Möglichkeit bei einem Reading das Datum auszufiltern bzw. abzuschneiden?
Das Reading lautet z.B. "Bioabfall am 29.09.2022".
Das "am" bekomme ich mit replace('am', '') weg, aber das Datum leider nicht.. :(
part() ist hier (glaube ich) auch nicht die Lösung da ich mitunter auch mal 2 Tonnen an einem Tag habe, da wäre das Reading
dann z.B. "Restmüll, Gelber Sack am 29.09.2022".
Würde ich jetzt nur part(1) anzeigen lassen fällt der Gelbe Sack dann komplett raus...
Danke!
Gruß
Sascha
@C0mmanda
<ftui-label [text]="ftuitest:test2 | replace(/(.*) am .*/,'$1')"></ftui-label>
ftuitest:test2 hat den Wert "Restmüll am 29.09.2022", dann entspricht die Anzeige dem Wert "Restmüll"
ftuitest:test2 hat den Wert "Restmüll, Gelber Sack am 29.09.2022", dann entspricht die Anzeige dem Wert "Restmüll, Gelber Sack"
Es würde auch
replace(/ am.*/,'')
reichen...
Zitat von: C0mmanda am 28 September 2022, 20:20:58
Manchmal ist es so einfach... VIELEN DANK!
Was genau bewirken die / / ?
Regex Anfang+Ende?
DANKE!
/ / sind für reguläre Ausdrücke vorgeshen
Manchmal ist es so einfach... VIELEN DANK!
Was genau bewirken die / / ?
Regex Anfang+Ende?
DANKE!
Zitat von: mr_petz am 28 September 2022, 15:28:54
Lösungweg1:
Hi, ich kann dir erstmal nur das anbieten:
LG mr_petz
Besten Dank erstmal, ich melde mich wieder, wenn ich es eingebaut habe. DANKE
Habt Ihr mal drüber nachgedacht, das irrsinnige Wissen dieses Threads irgendwie in einen Wiki-Beitrag zu überführen?
Man(ich!) traut sich gar nicht mehr irgendwas belangloses zu fragen, was hier 100%ig schon beantwortet wurde. Nur nach bald 180 Seiten Threadverlauf ist auch über die Suchfunktion nicht mehr alles auffindbar für mich.
Das geballte Wissen hier, auch anhand so vieler geiler Beispiele, ist viel zu schade, nicht aufbereitet zu werden 8)
So langsam könnte das passieren für Standardsachen wie pipe() etc...aber:
Ob ein Wiki-Eintrag reichen wird??? Da brauchste für alle Module/Komponenten einen... und:
MediaWiki gibt mir leider nicht meinen Wunschnamen sonst hätte ich da bestimmt schon was ergänzt... :'(
Gibt doch bestimmt noch ein paar User hier, die bereits angemeldet sind und das Wiki befüllen könnten mit Standardsachen/Definitionsbeispielen...
setstate hat ja welche im git schon drin.
Wie gesagt hier der Wiki-Eintrag zur v3:
https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3
LG
Es gibt eine sehr informative GitHub-Seite, da sollte man das notieren. Sonst müssen wir GitHub und Wikipedia aktuell halten.
Zitat von: DerFranke am 28 September 2022, 08:36:15
7-Segment Anzeige möglich?
Ich hatte unter ftui2 eine 7-Segment-Anzeige für die Spritpreise.
Wie realisiere ich das unter FTUI3?
Hat jemand bitte ein Code-Beispiel für mich?
Noch ein svg Beispiel als anreiz:
css:
.digitOff
{
fill: rgba(0,0,0,0.2);
}
.digitOn
{
fill: red;
}
html
<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="100px" viewBox="0 -2 10 20">
<g class="digit" fill="rgba(0,0,0,0.2)">
<polygon id="a" ftui-binding [class]="Device | slice(0,1) | map('0:digitOn,2:digitOn,3:digitOn,5:digitOn,6:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon id="b" ftui-binding [class]="Device | slice(0,1) | map('0:digitOn,1:digitOn,2:digitOn,3:digitOn,4:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon id="c" ftui-binding [class]="Device | slice(0,1) | map('0:digitOn,1:digitOn,3:digitOn,4:digitOn,5:digitOn,6:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon id="d" ftui-binding [class]="Device | slice(0,1) | map('0:digitOn,2:digitOn,3:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon id="e" ftui-binding [class]="Device | slice(0,1) | map('0:digitOn,2:digitOn,6:digitOn,8:digitOn,.*:digitOff')" points=" 1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon id="f" ftui-binding [class]="Device | slice(0,1) | map('0:digitOn,4:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon id="g" ftui-binding [class]="Device | slice(0,1) | map('2:digitOn,3:digitOn,4:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</g>
</svg>
Muss aber das Device mehrfach gesetzt werden..
Stammt von hier:
https://jsfiddle.net/LatencyMachine/TMzdm/
Edit:
Alternativ getrickst auf local Dev gebogen:
<ftui-row width="125px">
<style type="text/css">
.digitOff
{
fill: rgba(0,0,0,0.2);
}
.digitOn
{
fill: red;
}
</style>
<ftui-button states="0" [states]="Device" value="0" [value]="Device | ()=>setTimeout(()=>this.element.click(),10)" (value)="local:Seg1" hidden></ftui-button>
<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="50px" viewBox="0 -2 10 20">
<g class="digit" fill="rgba(0,0,0,0.2)">
<polygon id="a" ftui-binding [class]="local:Seg1 | slice(0,1) | map('0:digitOn,2:digitOn,3:digitOn,5:digitOn,6:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon id="b" ftui-binding [class]="local:Seg1 | slice(0,1) | map('0:digitOn,1:digitOn,2:digitOn,3:digitOn,4:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon id="c" ftui-binding [class]="local:Seg1 | slice(0,1) | map('0:digitOn,1:digitOn,3:digitOn,4:digitOn,5:digitOn,6:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon id="d" ftui-binding [class]="local:Seg1 | slice(0,1) | map('0:digitOn,2:digitOn,3:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon id="e" ftui-binding [class]="local:Seg1 | slice(0,1) | map('0:digitOn,2:digitOn,6:digitOn,8:digitOn,.*:digitOff')" points=" 1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon id="f" ftui-binding [class]="local:Seg1 | slice(0,1) | map('0:digitOn,4:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon id="g" ftui-binding [class]="local:Seg1 | slice(0,1) | map('2:digitOn,3:digitOn,4:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</g>
</svg>
<div style="font-size:35px; height:25px;margin:-5px;padding:0;color:red;font-weight: bold;">,</div>
<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="50px" viewBox="0 -2 10 20">
<g class="digit" fill="rgba(0,0,0,0.2)">
<polygon id="a" ftui-binding [class]="local:Seg1 | fix(2) | slice(2,3) | map('0:digitOn,2:digitOn,3:digitOn,5:digitOn,6:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon id="b" ftui-binding [class]="local:Seg1 | fix(2) | slice(2,3) | map('0:digitOn,1:digitOn,2:digitOn,3:digitOn,4:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon id="c" ftui-binding [class]="local:Seg1 | fix(2) | slice(2,3) | map('0:digitOn,1:digitOn,3:digitOn,4:digitOn,5:digitOn,6:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon id="d" ftui-binding [class]="local:Seg1 | fix(2) | slice(2,3) | map('0:digitOn,2:digitOn,3:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon id="e" ftui-binding [class]="local:Seg1 | fix(2) | slice(2,3) | map('0:digitOn,2:digitOn,6:digitOn,8:digitOn,.*:digitOff')" points=" 1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon id="f" ftui-binding [class]="local:Seg1 | fix(2) | slice(2,3) | map('0:digitOn,4:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon id="g" ftui-binding [class]="local:Seg1 | fix(2) | slice(2,3) | map('2:digitOn,3:digitOn,4:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="50px" viewBox="0 -2 10 20">
<g class="digit" fill="rgba(0,0,0,0.2)">
<polygon id="a" ftui-binding [class]="local:Seg1 | fix(2) | slice(3,4) | map('0:digitOn,2:digitOn,3:digitOn,5:digitOn,6:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon id="b" ftui-binding [class]="local:Seg1 | fix(2) | slice(3,4) | map('0:digitOn,1:digitOn,2:digitOn,3:digitOn,4:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon id="c" ftui-binding [class]="local:Seg1 | fix(2) | slice(3,4) | map('0:digitOn,1:digitOn,3:digitOn,4:digitOn,5:digitOn,6:digitOn,7:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon id="d" ftui-binding [class]="local:Seg1 | fix(2) | slice(3,4) | map('0:digitOn,2:digitOn,3:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon id="e" ftui-binding [class]="local:Seg1 | fix(2) | slice(3,4) | map('0:digitOn,2:digitOn,6:digitOn,8:digitOn,.*:digitOff')" points=" 1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon id="f" ftui-binding [class]="local:Seg1 | fix(2) | slice(3,4) | map('0:digitOn,4:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon id="g" ftui-binding [class]="local:Seg1 | fix(2) | slice(3,4) | map('2:digitOn,3:digitOn,4:digitOn,5:digitOn,6:digitOn,8:digitOn,9:digitOn,.*:digitOff')" points=" 1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="13px" height="50px" viewBox="0 5 10 20">
<g class="digit" fill="rgba(0,0,0,0.2)">
<polygon id="a" class="digitOn" points=" 1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon id="b" class="digitOn" points=" 9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon id="c" class="digitOn" points=" 9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon id="d" class="digitOn" points=" 9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon id="e" class="digitOff" points=" 1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon id="f" class="digitOn" points=" 1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon id="g" class="digitOn" points=" 1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</g>
</svg>
</ftui-row>
Edit2:
Noch eine Lösung. svg in css/ styletag:
<style type="text/css">
.seg1 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" fill="red" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" fill="red" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.seg2 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" fill="red" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" fill="red" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" fill="red" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" fill="red" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" fill="red" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.seg3 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" fill="red" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" fill="red" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" fill="red" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" fill="red" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" fill="red" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.seg4 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" fill="red" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" fill="red" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" fill="red" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" fill="red" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.seg5 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" fill="red" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" fill="red" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" fill="red" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" fill="red" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" fill="red" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.seg6 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" fill="red" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" fill="red" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" fill="red" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" fill="red" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" fill="red" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" fill="red" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.seg7 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" fill="red" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" fill="red" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" fill="red" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.seg8 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" fill="red" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" fill="red" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" fill="red" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" fill="red" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon fill="red" id="e" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" fill="red" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" fill="red" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.seg9 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" fill="red" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" fill="red" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" fill="red" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" fill="red" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" fill="red" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" fill="red" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.seg0 {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" fill="red" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" fill="red" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" fill="red" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" fill="red" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" fill="red" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" fill="red" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
.segF {
/* NO WHITESPACE in </tag><tag> */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 20" height="50px" width="25px"><g fill="rgba(0,0,0,0.2)"><polygon id="a" fill="red" points="1.05, 0.95 2, 0 8, 0 8.95, 0.95 7.95, 1.95 2.05, 1.95"/><polygon id="b" points="9.05, 1.05 10, 2 10, 8 9.05, 8.95 8.05, 7.95 8.05, 2.05"/><polygon id="c" points="9.05, 9.05 10,10 10,16 9.05,16.95 8.05,15.95 8.05,10.05"/><polygon id="d" points="8.95,17.05 8,18 2,18 1.05,17.05 2.05,16.05 7.95,16.05"/><polygon id="e" fill="red" points="0.95,16.95 0,16 0,10 0.95, 9.05 1.95,10.05 1.95,15.95"/><polygon id="f" fill="red" points="0.95, 8.95 0, 8 0, 2 0.95, 1.05 1.95, 2.05 1.95, 7.95"/><polygon id="g" fill="red" points="1.10, 9 2.05, 8.05 7.95, 8.05 8.90, 9 7.95,9.95 2.05,9.95"/></g></svg>');
width: 25px;
height: 50px;
}
</style>
und mit div eingebunden und gemappt:
<div ftui-binding [class]="local:Seg1 | slice(0,1) | map('0:seg0,1:seg1,2:seg2,3:seg3,4:seg4,5:seg5,6:seg6,7:seg7,8:seg8,9:seg9,.*:segF')"></div>
LG mr_petz
Hi,
ich würde gerne meine FTUI Version 3 "Index.html" komfortabel, am Besten ohne manuell am Quellcode rumzuschrauben anpassen.
Gibts hier gute Alternativen?
Schöne Grüße
@MrMorgan
Leider nein. Du musst das händig/manuell erledigen.
LG
Danke für die Antwort.
Leider dachte ich mir das schon.
Tabellen mit dem Editor zu gestalten ist bei mir schon etwas her.
Gibt es zur Version 3 schon eine Doku?
Die Syntax von den älteren FTUI Versionen ist schon anders.
Zitat von: MrMorgan am 03 Oktober 2022, 21:02:30
...
Gibt es zur Version 3 schon eine Doku?
...
Schau dir fürs erste die examples an:
https://github.com/knowthelist/ftui/tree/master/www/ftui/examples
und nutze hier die SuFu...
Fange erstmal in "kleinen" Schritten an alles zu erstellen um zu Verstehen wie der Aufbau/Syntax ist..
Ansonsten wird dir hier auch geholfen.
LG
Guten Morgen zusammen,
"Notfall" am Sonntag bei mir:
Ich bemerke auf meiner FTUI3 Oberfläche, dass diverse dargestellte <ftui-label> Text-Readings nicht mehr aktualisiert werden. Ich muss die Browserseite neu laden, damit aktulle Werte dargestellt werden.
Dies betrifft den Chromebrowser auf dem Raspi genauso wie den Safari-Browser auf meinem MacBook.
In FTUI-Web, also der Standardoberfläche, aktualisieren sich die Readings innerhalb der Devices aber weiterhin wie gewohnt.
Am Beispiel meiner PV-Anlage, dessen Werte sich momentan im 10-Sekunden Takt ändern, lässt sich dies reproduzieren.
Habe ein "update all" gefolgt von einem shutdown restart gemacht, sowie den gesamten raspberry hart neugestartet, auf dem FHEM drauf läuft.
Keine Änderung. Wurde irgendwas in FTUI3 verändert, sodass ich die dargestellten <ftui-label> Parameter eventuell verändern muss ?
Hier ein Beispiel, was sich nicht aktualisiert:
<ftui-label [text]="SMATripower6:PV_Gesamterzeugung | fix(0)" class="size-4"
[color]="SMATripower6:PV_Gesamterzeugung | step('1: green, 4000: orange, 6000: red')">
<span class="size-0" slot="unit">W</span></ftui-label>
Die Darstellung statusabhängiger <ftui-icon> Icons funktioniert beispielsweise weiterhin problemlos. (z.B. Tür offen/zu, Fenster auf/zu...)
@Dracolein
FTUI3 wurde zuletzt am 19.07.2022 verändert ... jetzt ist die Frage, wann hast Du zuletzt ein Update abgeholt ?
Ich würde zuerst einmal event on update im Device einstellen.
Als zweites den cache leeren und in einem examples file ein Label mit deinen Device:Reading einsetzen und dann schauen ob es aktualisiert wird.
Aufruf wäre so Bsp.:
http://deineIP:8083/fhem/ftui/examples/label.html
Du kannst auch wie hier schon beschrieben den timestamp als label und einen forceRefresh() icon erstellen und schauen was passiert.
https://forum.fhem.de/index.php/topic,129400.msg1237162.html#msg1237162
Damit siehst du ob was ankommt.
LG
Edit: und ja das event on update ist nur für den Test...
Letzte Änderung am Label:
https://github.com/knowthelist/ftui/commit/c1c1b9b7890f4ce31a50b4b8bd2611f5a43f51bc#diff-89a4598af9120f93932c04619af74075371ec94624fa14e80fb94912e8e232f0
Danke für Euer Feedback, irgendwie läuft es nun wieder ohne dass ich etwas gemacht habe. Komisch. Werde es beobachten.
Andere Frage:
Ich nutze das geniale Modul "Solar Forecast" von @DS_Starter ( https://forum.fhem.de/index.php/topic,117864.0.html ) Das Modul ist sehr umfangreich und beinhaltet bereits tolle grafisch ausgewertete Elemente (z.B. siehe hier: https://forum.fhem.de/index.php/topic,117864.msg1238231.html#msg1238231 )
Diese Balkendarstellung samt weiterer Informationen lässt sich abrufen und ist wie folgt beschrieben
Zitat
get <devicenamedesModuls> html
Die Solar Grafik wird als HTML-Code abgerufen und wiedergegeben.
Die Grafik kann abgerufen und in eigenen Code eingebettet werden. Auf einfache Weise kann dies durch die Definition eines weblink-Devices vorgenommen werden:
define wl.SolCast5 weblink htmlCode { FHEM::SolarForecast::pageAsHtml ('SolCast5') }
'SolCast5' ist der Name des einzubindenden SolarForecast-Device.
Lässt sich dies irgendwie in ein Popup innerhalb FTUI3 einbinden?
Dann könnte ich obiges bereits fertiges Layout einfach per Klick / Touch auf meinem Dashboard darstellen...
@Draco
Hast du das schon probiert?:
https://forum.fhem.de/index.php/topic,115259.msg1212122.html#msg1212122
Bsp.
<ftui-content [content]="Sonos_Play5 | getHTML('Sonos_Play5RG_Favourites')"></ftui-content>
Wenn du das html Reading auslesen willst.
LG
Hmm, das begreife ich spontan nicht. Ein alternatives Beispiel aus deinem Link sieht so aus:
<ftui-content [content]="Sonos_Play5 | sendCommand('get Sonos_Play5RG_Favourites html')"></ftui-content>
sendCommand() als Teil der Funktion ist mir schlüssig und würde genau den Befehl ausführen, der oben in meinem Beispiel erforderlich ist.
Aber worauf bezieht sich in diesem Beispiel hier "[content]="Sonos_Play5" ? Das ist der Devicename des Devices, dessen HTML-Code darzustellen ist?
Ich habe es so ausprobiert:
<ftui-content [content]="PVVorschau | sendCommand('get PVVorschau html')"></ftui-content>
Der Popup-Inhalt liefert augenscheinlich einen richtigen Teil der Gesamtdarstellung, allerdings riesig groß (ich sehe eins von vielen Icons bildschirmfüllend, siehe Anhang1)
(Anhang 2 zeigt das Popup in FHEMWeb wie es aussehen soll)
Sonos_Play5 ist das "Hauptdevice" und Sonos_Play5RG_Favourites die Readingsgroup die das html beinhaltet.
Kannst es nur mit deinen Device + Reading probieren.?
Zitat von: Dracolein am 09 Oktober 2022, 16:13:14
Ich habe es so ausprobiert:
<ftui-content [content]="PVVorschau | sendCommand('get PVVorschau html')"></ftui-content>
Der Popup-Inhalt liefert augenscheinlich einen richtigen Teil der Gesamtdarstellung, allerdings riesig groß (ich sehe eins von vielen Icons bildschirmfüllend)
Das Problem hatte ich auch. Da musst du dir den "Quelltext" in der console mal reinziehen und per css oder style anpassen...
Kannst auch gern bereitstellen und ich/wir schauen mal drüber...
Tja, wenn ich begreifen würde, was ich da sehe... :o
Mach mal ne rechte Maus auf das Icon und dann untersuchen.
Dann solltest du die Eigenschaften des Icon und des ganzen popupinhalts sehen.
Edit. Es wird eben der komplette html+css einfach so Übernommen von fhem.
komplex. soviele Screenshots kann ich kaum machen :-X
jetzt machst du eine rechte Maus auf ftui-content und speicherst (copy Element) den Text und postest ihn. (copy/paste)
hier in deinem screen sieht man schon svg.weather_cloudy ist riesig...
editiert, siehe Anhang,.
Das ist wohl zuviel des guten.
Schiebe es in eine Datei (Text oder HTML) und lade diese hoch.
Edit: Man sieht die ganzen svg´s werden so groß dargestellt width="468pt" height="390pt" und besitzen eine eigene class...
Wenn du jetzt einen style Eintrag in deiner css machst:
svg{
width:50px;
height:50px;
}
Siehst du den Unterschied.
Am besten noch dem ftui-content eine eindeutige, eigene id mitgeben und den svg eintrag darauf beziehen..
#ftui_content_draco svg{
width:50px;
height:50px;
}
obiges Posting editiert.
Wow krass, langsam nicht so schnell ::) 8)
css Datei = ftui.css ? (ich hab bewusst bislang auf jegliche manuelle Dateimodifikationen verzichtet, damit mir bei einem Update nichts überschrieben wird)
Und wie sähe der <ftui-content> Parameter aus für eine individuelle ID ?
(nach Änderung an *.css Files ist ein Neustart erforderlich?)
content:
<ftui-content id="ftui_content_draco" [content]="PVVorschau | sendCommand('get PVVorschau html')"></ftui-content>
theoretisch sollte das auch gehen:
<ftui-content id="ftui_content_draco" [content]="PVVorschau | getHTML('PVVorschau')"></ftui-content>
user.css :
#ftui_content_draco svg{
width:50px;
height:50px;
}
mehr brauch da nicht rein. Legst die einfach im themes Ordner an und bennenst sie user.css
Diese wird nicht überschrieben!
im ftui bindest du sie auf deiner Seite so unter dem ftui.css <link> ein:
<link href="themes/user.css" rel="stylesheet">
alternativ machst du einen <style> eintrag im head:
<style>
#ftui_content_draco svg{
width:50px;
height:50px;
}
</style>
LG
Edit:
Interaktionen gehen so in richtung fhem aber noch nicht. Die Funktions im content sind fhem-functions.
Scheint hier bei dir zu gehen...
Bei SonosReadingsGroup gingen keine Befehle raus...
Ein Neustart ist nicht erforderlich. Höchstens ein leeren des cache und refresh der Seite.
Edit2:
Interaktionen gehen so noch nicht in Richtung fhem durch die hinterlegte fhem function FW_cmd().
Bsp aus deinem HTML:
onclick="FW_cmd('/fhem?XHR=1&cmd=set PVVorschau consumerAction set ShellyPlug5 off')"
Ich hatte mir da eine gebaut und integriert. Geht vielleicht auch noch eleganter...aber naja.
<script>
function FW_cmd(dev) {
ftuiApp.fhemService.sendCommand(dev.replace('/fhem?XHR=1&cmd=',''));
ftuiApp.toast(dev.replace('/fhem?XHR=1&cmd=',''));
}
</script>
könnte bei dir funzen... und somit du kannst deine Befehle aus dem content senden.
Ich hatte mir die für Sonos gebaut:
https://forum.fhem.de/index.php/topic,115259.msg1212174.html#msg1212174
Tja, da bleibt mir nur ein offen stehender Mund als Geste der Unfassbarkeit für Deine selbstlose Hilfe (wie schon so oft in diesem Thread).
Herzlichen Dank :-*
(Muss auch mal gesagt werden, weil ganz ehrlich.... das ist nicht selbstverständlich.)
Abschließendes Fazit: habe Deine Anweisungen 1:1 befolgt und die Darstellung im Popup funktioniert sehr gut.
Ich werde im SolarForecast-Thread ein Crossposting zu Deiner Lösung machen, vielleicht hilft es dort irgend jemandem noch weiter.
Danke dir. Immer wieder gern.
Die Größe der svg´s im css musst du deinen Bedürfnissen anpassen.
Prozentangabe würde auch gehen:
width: 60%;
height: auto;
LG
ps. in der heutigen Zeit muss man sich gegenseitig helfen...
Der eigentliche Dank muss aber an setstate gehen. Ohne diese Basis/Grundlage könnten wir alle nicht darauf aufbauen...
sehe ich da einen KussSmilie.... ;D
Edit: Habe eins oben was ergänzt wegen der Befehle die gesendet werden können aus deinem content...
Habe kürzlich mal wieder FHEM update all gemacht. Scheinbar hat sich der Hexcode für die Farbe "blue" etwas geändert.
Ich meine das Problem hatte ich bei mir schon einmal. Um der Sache für mich Herr zu werden, nach allem was ich gelernt habe, müsste ich die Definition für "blue" in der user.css eintragen, wessen Farbcode das Wort zugeordnet werden soll. Wäre das richtig?
Was müsste ich dort eintragen? In der ftui-theme.css finde ich die Definition
--blue: #436D8D;
Zitat von: Dracolein am 09 Oktober 2022, 09:14:40
Guten Morgen zusammen,
"Notfall" am Sonntag bei mir:
Ich bemerke auf meiner FTUI3 Oberfläche, dass diverse dargestellte <ftui-label> Text-Readings nicht mehr aktualisiert werden. Ich muss die Browserseite neu laden, damit aktulle Werte dargestellt werden.
Dies betrifft den Chromebrowser auf dem Raspi genauso wie den Safari-Browser auf meinem MacBook.
In FTUI-Web, also der Standardoberfläche, aktualisieren sich die Readings innerhalb der Devices aber weiterhin wie gewohnt.
Am Beispiel meiner PV-Anlage, dessen Werte sich momentan im 10-Sekunden Takt ändern, lässt sich dies reproduzieren.
Habe ein "update all" gefolgt von einem shutdown restart gemacht, sowie den gesamten raspberry hart neugestartet, auf dem FHEM drauf läuft.
Keine Änderung. Wurde irgendwas in FTUI3 verändert, sodass ich die dargestellten <ftui-label> Parameter eventuell verändern muss ?
Hier ein Beispiel, was sich nicht aktualisiert:
<ftui-label [text]="SMATripower6:PV_Gesamterzeugung | fix(0)" class="size-4"
[color]="SMATripower6:PV_Gesamterzeugung | step('1: green, 4000: orange, 6000: red')">
<span class="size-0" slot="unit">W</span></ftui-label>
Die Darstellung statusabhängiger <ftui-icon> Icons funktioniert beispielsweise weiterhin problemlos. (z.B. Tür offen/zu, Fenster auf/zu...)
Ich muss das Ganze leider verallgemeinern. Das ursprüngliche Problem besteht weiterhin sporadisch und ich finde keine Ursache.
Entgegen anfänglicher Vermutungen beschränkt es sich nicht auf <ftui-label> oder ähnliches, sondern weitgehend auf die ganze laufende FTUI-Darstellung.
Icons oder Buttons, die z.B. einen Lampenzustand darstellen, ändern sich ebenfalls nicht mehr.
Nach einem Neustart des Raspberry Pi und Darstellung wie immer mittels Chromium läuft alles normal für einige Stunden.
Dann, grundlos, stockt die Darstellung. Erst bei einer aktiven Eingabe, also dem Klick auf z.B. einen Button scheint sich alles zu fangen und dann werden auch Zustände grafisch aktualisiert, die bis dahin niciht aktuell waren. Aber auch das ist nicht immer reproduzierbar. Bei Klick auf einen Button wird das Device (Lampe) zwar geschaltet, das grafische Feedback in Form geänderter Buttonfarbe hingegen bleibt aus.
FHEM im Hintergrund läuft weiter und verrichtet seinen Job.
Done:
- kompletter Neustart
- FHEM komplett aktualisiert
- Raspbian komplett aktualisiert
- Cache geleert vom Chromium Browser
Ich könnte meine letzten FTUI3-Änderungen noch rückgängig machen und schauen was passiert...
(die letzte Änderung war das Hinzufügen eines Charts als " dynamische Hintergrundgrafik" in einem Element)
Du meinst also content war/ist der Übeltäter?
Nein keineswegs. Aber ich habe jetzt dennoch die Änderungen im Code auskommentiert sowie weitere Kleinigkeiten, die ich kürzlich hinzugefügt hatte.
Vielleicht hat es auch hiermit direkt oder indirekt etwas zu tun, ich tappe im dunkeln
https://forum.fhem.de/index.php/topic,129619.msg1239216.html#msg1239216
Da scheint ja was im System im Argen zu sein und nicht in ftui?
Moin!
Nehme gerade FTUI3 in Betrieb, liebe es jetzt schon und versuche alle Infos zusammen zu suchen. Gestaltet sich aber etwas schwierig, weil ich häufig bei alten TabletUI 2.x-Themen lande.
Ich hab z.B. erst spät das Thermostat-Modul von mr_petz entdeckt.
Gibt es irgendwo eine Liste von verfügbaren Modulen oder eine sinnvolle Suchmöglichkeit, die ich übersehe?
Gibt es mittlerweile neben der readme auf github weitere Anleitungen?
Hi Carsten,
Offizielle Komponentenliste wäre diese:
https://github.com/knowthelist/ftui/tree/master/www/ftui/components
Meine "inoffizielle" siehst du unten.
Eine andere Anleitung ist nur hier in diesen Thread zu finden.
Am besten hier im Thread die SuFu benutzen. Da sind dann die Treffer von diesen Thread.
LG
Hallo mr_petz,
sorry, ich hab das falsch formuliert. Ich meinte 3rd-Party Module.
Deine Liste hatte ich auch bereits gefunden, nachdem ich das Thermostat entdeckt hatte. Danke dafür! Ich dachte, es gäbe vielleicht noch zusätzliche Module von anderen Entwicklern, die mir entgangen sind.
Bei der 2.x gibt es ne ganze Liste von 3rd-Party Widgets im Wiki.
Gibt es zu deinen anderen Modulen auch Screenshots oder Beispiele? Hab in den Branches keine gefunden.
a.) wollte ich hier nochmal erinnern in der Hoffnung auf Hilfe:
Zitat von: Dracolein am 12 Oktober 2022, 08:35:11
Habe kürzlich mal wieder FHEM update all gemacht. Scheinbar hat sich der Hexcode für die Farbe "blue" etwas geändert.
Ich meine das Problem hatte ich bei mir schon einmal. Um der Sache für mich Herr zu werden, nach allem was ich gelernt habe, müsste ich die Definition für "blue" in der user.css eintragen, wessen Farbcode das Wort zugeordnet werden soll. Wäre das richtig?
Was müsste ich dort eintragen? In der ftui-theme.css finde ich die Definition
--blue: #436D8D;
b.) hätte ich eine Frage anhand eines Beispiels:
<ftui-icon size="-1" path="fa-svg/solid"
[name]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:solar-panel, Schnellladen:electricity_mast')"
[color]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:green, Schnellladen:orange')">
</ftui-icon>
Könnte man die Icongröße auch via map() abhängig vom Parameterwert individualisieren? Also z.B.:
[size]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:1, Schnellladen:2')">
Zitat von: Dracolein am 14 Oktober 2022, 16:14:23
a.) wollte ich hier nochmal erinnern in der Hoffnung auf Hilfe:
zum Eintragen in die user.css
:root {
--blue: #436D8D;
}
Wenn du jetzt color="blue" definierst, dann wird diese Farbe genommen.
Zitat
b.) hätte ich eine Frage anhand eines Beispiels:
<ftui-icon size="-1" path="fa-svg/solid"
[name]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:solar-panel, Schnellladen:electricity_mast')"
[color]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:green, Schnellladen:orange')">
</ftui-icon>
Könnte man die Icongröße auch via map() abhängig vom Parameterwert individualisieren? Also z.B.:
[size]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:1, Schnellladen:2')">
Wie du schon sagst kannst du mit map() oder step() size oder style individualisieren.
LG
Zitat von: Carsten am 13 Oktober 2022, 18:36:20
Hallo mr_petz,
sorry, ich hab das falsch formuliert. Ich meinte 3rd-Party Module.
Deine Liste hatte ich auch bereits gefunden, nachdem ich das Thermostat entdeckt hatte. Danke dafür! Ich dachte, es gäbe vielleicht noch zusätzliche Module von anderen Entwicklern, die mir entgangen sind.
Bei der 2.x gibt es ne ganze Liste von 3rd-Party Widgets im Wiki.
Gibt es zu deinen anderen Modulen auch Screenshots oder Beispiele? Hab in den Branches keine gefunden.
3rd-Party
Alles Auffindbar (auch mit der Suche [FTUI3]):
Module von @yersinia:
- https://forum.fhem.de/index.php/topic,119440.msg1233955.html#msg1233955
- https://forum.fhem.de/index.php/topic,117858.msg1122799.html#msg1122799
mehr ist mir nicht bekannt.
Edit: Doch eins noch von @Thyraz:
https://github.com/Thyraz/ftui/tree/master/components/calendar
Infos gibt es von meinen Erweiterungen hier und unter der Suche [FTUI3].
Im Git von mir gibt es examples vom thermostat, calview und pinpad. Weiter bin ich noch nicht gekommen. Musst du in den entsprechenden Threads und Beiträgen die Infos holen, Screen´s anschauen oder Fragen.
Ich habe noch zwei in der Pipeline, war aber bisher kein Bedarf. Eins werde ich in kürze noch präsentieren...
Was suchst du im Speziellen?
Und nein es gibt noch keine Wiki-Einträge über alle Module.
LG
@Carsten
Unter Umständen macht es Sinn, die Theorie umzudrehen.
Statt zu fragen, was es gibt, wäre vermutlich interessanter, was müsste es geben bzw. was fehlt noch.
Dann kann man schauen, ob schon die Bordmittel dafür ausreichen müssten oder ob jemand was "Individuelles" dafür bereitstellen kann oder jemand in der Lage ist, etwas Neues zu entwickeln.
Zitat von: mr_petz am 14 Oktober 2022, 20:04:33
zum Eintragen in die user.css
:root {
--blue: #436D8D;
}
Wenn du jetzt color="blue" definierst, dann wird diese Farbe genommen.
Leider funktioniert es nicht, habe es 1:1 in der user.css eingetragen.
Die Farbe in FTUI3 ist (Ausschnitt aus einem <ftui-label>) an vielen Punkten mitunter z.B. so definiert:
[color]="Aussensensor_T:temperature | step('-20: blue, 8: green, 21: orange, 27: red')">
Zitat von: Dracolein am 20 Oktober 2022, 08:11:53Leider funktioniert es nicht, habe es 1:1 in der user.css eingetragen.
Zitat von: mr_petz am 14 Oktober 2022, 20:04:33zum Eintragen in die user.css
:root {
--blue: #436D8D;
}
Das kann so auch nur mit Glück funktionieren, da es für
blue zwei unterschiedliche Definitionen gibt. ::) Nutze einen eigenen Namensraum in der user.css:
:root {
--meinblau: #436D8D;
}Und entsprechend dann ersetzen:
[color]="Aussensensor_T:temperature | step('-20: meinblau, 8: green, 21: orange, 27: red')">Das schützt dich auch vor FTUI3 Updates....
Damit wird die Textfarbe weiss, also so als wäre gar keine Farbe definiert :-\
...die user.css hast du aber auch eingebunden?
<link href="user.css" rel="stylesheet" type="text/css" />
Ja die ist eingebunden und funktioniert, weil da schon eine Definition enthalten ist
Jo, hast recht, da fehlt noch was (habs mal versucht nachzustellen), du müsstest die Definition noch um einen selektor erweitern:
:root {
--meinblau: #436D8D;
}
[color="meinblau"] {
--color-base: var(--meinblau);
--color-contrast: var(--success-contrast-color);
}
Ob du --color-contrast auch setzt ist dir überlassen, ich habe dies von der originalen blue-Definition übernommen.
Zitat von: Dracolein am 20 Oktober 2022, 08:11:53
Leider funktioniert es nicht, habe es 1:1 in der user.css eingetragen.
Die Farbe in FTUI3 ist (Ausschnitt aus einem <ftui-label>) an vielen Punkten mitunter z.B. so definiert:
[color]="Aussensensor_T:temperature | step('-20: blue, 8: green, 21: orange, 27: red')">
Wenn du es 1:1 so eingetragen hast dann siehst du auch keinen Unterschied, weil das '--blue: #436D8D' das Standardblau im FTUI ist!
https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/ftui-theme.css#L7
Ich habe es mal unter FF und Chrome nachgestellt und mit dieser Definition:
:root {
--blue: #446666;
}
wird das blue umgestrickt siehe Anhang.
Wenn du ein eigenes Blau im color haben möchtest, reicht:
[color="blau"] {
color: #446666;
}
Das alles gilt für color="" Angaben.
ansonsten reicht für andere Sachen die nicht zu color="" gehören:
:root {
--blau: #446666;
}
und kann mit var(--blau) aufgerufen werden....
Bsp. im style von Komponenten:
style="--droplist-text-color: var(--blau);"
Edit: Und Cache leeren nach der Änderung nicht vergessen!
LG mr_petz
Hallo,
mir macht der Slider Probleme auf dem iPad.
Im Browser ist alles wunderbar, aber auf dem iPad bleibt er "unsichtbar" und ich erhalte
die Fehlermeldung
"slider.component.js:49
ReferenceError: Can't find variable:
ResizeObserver"
Funktion ist gegeben, ich kann die Lautstärke ändern, aber ich sehe ihn nicht :)
Weiß jemand Rat?
Danke.
<ftui-slider [(value)]="KODI_KU:volume" max="80"
tick="5"
has-wide-ticks></ftui-slider>
<ftui-label size="2">Volume</ftui-label>
Hi C0mmanda.
Ich denke da brauchst du einen höheren Safari oder/und IOS:
https://caniuse.com/resizeobserver
LG
Zitat von: mr_petz am 21 Oktober 2022, 09:37:39
Hi C0mmanda.
Ich denke da brauchst du einen höheren Safari oder/und IOS:
https://caniuse.com/resizeobserver
LG
Mist :(
Leider ist bei dem alten iPad bei iOS12 Schluß...
Muss ich mir was einfallen lassen.
Danke für den Hinweis...
Gruß
Wenn es nur am slider liegt könntest du auch zur Not meinen nehmen...
Ab hier lesen:
https://forum.fhem.de/index.php/topic,121901.msg1165068.html#msg1165068
Edit: hier noch eine Stylebare Version zum testen (Test steht noch aus... bevor ich es ins git schiebe):
https://forum.fhem.de/index.php/topic,121901.msg1191640.html#msg1191640
LG
ps. soll keine Werbung dafür sein!
Zitat von: mr_petz am 21 Oktober 2022, 19:05:22
Wenn es nur am slider liegt könntest du auch zur Not meinen nehmen...
Ab hier lesen:
https://forum.fhem.de/index.php/topic,121901.msg1165068.html#msg1165068
Edit: hier noch eine Stylebare Version zum testen (Test steht noch aus... bevor ich es ins git schiebe):
https://forum.fhem.de/index.php/topic,121901.msg1191640.html#msg1191640
LG
ps. soll keine Werbung dafür sein!
Juhu! Der funktioniert :)
Vielen Dank!
Gruß
Hallo!
Auch ich fange gerade an die ersten Versuche mit FTUI3 zu unternehmen. Sieht richtig gut aus!
Ich würde gerne auf einem Tab eine art Untermenü erstellen. Mir ist das mit dem ftui-tab noch nicht gelungen. Geht das überhaupt? Wie muss das dann aufgebaut werden?
Ich auf jeden Tab die gleichen Icons in einer reihe platzieren und den jeweils aktiven selektieren. Finde ich aber recht aufwendig...
Danke.
Gruß
Bismosa
Ok. Das steht nicht so wirklich beschrieben...
Man muss hier mit group´s arbeiten.
Bsp.:
<ftui-tab-view id="View8" group="2">
Standard ist hier default und wird immer gesetzt wenn keine group definiert ist...
Ich habe mal ne Demo angehangen.
Im Submenü kannst du auch mit active arbeiten oder weglassen...
LG mr_petz
Edit: Achso, die 1 aufzurufende Html ist hier in der/ aus der Demo tab-content.html
https://forum.fhem.de/index.php/topic,115259.msg1240981.html#msg1240981
Hallo!
Danke für die Superschnelle Antwort und Hilfe! Gerade die demo ist sehr interessant.
In der demo sieht man sehr gut, das bei der Seite mit dem 2. Menü der rechte rand abgeschnitten wird. Auch bei mir "fehlt" hier eine Spalte bzw. der Content-Bereich geht über den Rand hinaus.
Liegt das nicht daran, das man ein neues <ftui-grid> aufruft? Wie lässt sich das umgehen?
Gruß
Bismosa
Ok war mir nicht aufgefallen.. Höhe ist nicht das Problem. Das width eher. Ich habe mal bissl getrickst mit.
style="width:-webkit-fill-available;width:-moz-available;"
und kein width angegeben und ein Fakeview.
1. steht für chrome, 2. steht für FF
Du siehst den Unterschied in den Files.
Weis nicht ob es anders geht...
Edit: Doch. Man muss im grid eine/deine Größe Bsp.:
base-width="90" base-height="150"
mitgeben...
Im 1. Bsp.:base-width="100" base-height="150" und den 2. bissl kleiner Bsp.:base-width="90" base-height="150"
Hier wären es 10% weniger, weil das 2.Menü auch width="1" ist.
Nicht wundern... Es wird hier vom Hochformat ausgegangen...
Ich hänge nochmal neu an!
Man man man... Sollte man doch mal Niederschreiben...
LG
Hallo!
Danke für den Support!
Ich habe deinen Edit gerade erst gesehen. War die ganze Zeit am probieren.
Ich glaube meine Probleme am Anfang sind hauptsächlich:
- Was hat es mit base-width und base-height auf sich? Wie teile ich mir das am besten ein?
- Wie funktioniert das System mit den Spalten/Zeilen wie viele habe ich und wie viele benötige ich?
- Wie funktioniert das nachladen von Content über ftui-content. Was ist dabei zu beachten?
Aus meinem Halbwissen:
Wenn ich keine base-width und base-height angebe, wird die Seite auf die Anzeigengröße skaliert. (Praktisch bei unterschiedlichen Geräten).
Auf der Basis der höchsten row Anzahl und height Anzahl wird die gesamte Seite in entsprechende Reihen und Zeilen eingeteilt. Das gilt dann auch für die "Unterseiten".
Auf Basis davon habe ich mir jetzt auf meiner noch (ziemlich) leeren index.html erstmal ein Platzhalter erstellt um die Anzhal Reihen/Spalten vorzugeben.
Habe ich mein "Submenü" nur in der index.html geht es eigentlich problemlos:
<!DOCTYPE html>
<html>
<head>
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>FTUI Example</title>
</head>
<body>
<ftui-grid shape="round">
<ftui-grid-tile row="1" col="1" height="12" width="1">
<ftui-column>
<ftui-tab view="View1" size="large" active>
<ftui-icon name="home"></ftui-icon>
</ftui-tab>
<ftui-tab view="View2" direction="vertical">
<ftui-icon name="music"></ftui-icon>
<ftui-label>Music</ftui-label>
</ftui-tab>
<ftui-tab view="View3">
<ftui-icon name="feed"></ftui-icon>
</ftui-tab>
<ftui-tab view="View4">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-tab>
<ftui-tab view="View5">
<ftui-icon name="bath"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="View1">
<ftui-grid-tile row="1" col="2" height="2" width="2" shape="round" color="primary">
<ftui-row width="80%" height="10%">
<ftui-clock format="ee" size="6"></ftui-clock>
<ftui-clock format="DD" size="5"></ftui-clock>
</ftui-row>
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
<!-- Platzhalter für breite -->
<ftui-grid-tile row="12" col="2" height="1" width="12" shape="round" color="primary">
<ftui-label>Platzhalter</ftui-label>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View2">
<ftui-grid-tile row="1" col="2" height="1" width="12">
<ftui-row>
<ftui-tab view="ViewX2" size="large" active group="2">
<ftui-icon name="home"></ftui-icon>
</ftui-tab>
<ftui-tab view="ViewX3" direction="vertical" group="2">
<ftui-icon name="music"></ftui-icon>
<ftui-label>Music</ftui-label>
</ftui-tab>
<ftui-tab view="ViewX4" group="2">
<ftui-icon name="feed"></ftui-icon>
</ftui-tab>
<ftui-tab view="ViewX5" group="2">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-tab>
<ftui-tab view="View5" group="2">
<ftui-icon name="bath"></ftui-icon>
</ftui-tab>
</ftui-row>
</ftui-grid-tile>
<ftui-tab-view id="ViewX2" group="2">
<ftui-grid-tile row="2" col="2" height="5" width="6">
<div class="size-10">Tab3</div>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="8" height="5" width="6">
<div class="size-10">Tab3</div>
</ftui-grid-tile>
<ftui-grid-tile row="7" col="2" height="6" width="6">
<div class="size-10">Tab3</div>
</ftui-grid-tile>
<ftui-grid-tile row="7" col="8" height="6" width="6">
<div class="size-10">Tab3</div>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-tab-view>
<ftui-tab-view id="View3">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<div class="size-10">Tab3</div>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View4">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<div class="size-10">Tab4</div>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View5">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<div class="size-10">Tab5</div>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
Auch wenn man mit ftui-content die Seite einbindet geht es, wenn die Anzahl der Spalten/Zeilen mit der Hauptseite übereinstimmt und angegeben wird.
Gruß
Bismosa
Zitat von: OdfFhem am 15 Oktober 2022, 20:31:22
Statt zu fragen, was es gibt, wäre vermutlich interessanter, was müsste es geben bzw. was fehlt noch.
Hi und sorry für die späte Antwort. Ich war mit Corona beschäftigt.
Ich weiß, was du meinst, aber im Fall vom Thermostat z.B. war es ja nicht so, dass das mit den Standardmodulen unlösbar gewesen wäre, aber das spezielle Modul macht alles soviel einfacher und ich bin nur auf der Suche nach Best Practice - Beispielen darüber gestolpert. Daher wollte ich mir einen Überblick verschaffen.
Was ich z.B. noch vermisse wäre das Map-Widget, das es für 2.x gibt. Allerdings ist der Bedarf nicht akut und wahrscheinlich auch sehr speziell. Und wie ich den Callmonitor darstelle, muss ich mir auch noch überlegen.
@bismosa
Zitat von: bismosa am 23 Oktober 2022, 21:30:06
...
Ich glaube meine Probleme am Anfang sind hauptsächlich:
- Was hat es mit base-width und base-height auf sich? Wie teile ich mir das am besten ein?
- Wie funktioniert das System mit den Spalten/Zeilen wie viele habe ich und wie viele benötige ich?
- Wie funktioniert das nachladen von Content über ftui-content. Was ist dabei zu beachten?
...
Hi, lässt sich schlecht genau sagen ohne deine Bildschirm/Pixelgröße.
Die Größe von meinem Tablet sieht auf meinen Laptop viel kleiner aus. Auflösung halt..
Ob es eine Faustformel gibt weis ich nicht.
Hier entsteht das ganze:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid.component.js#L83
Ohne responsive und base-width und base-height wird es zu 100%/100% gesetzt.
base-width="200" base-height="200" ensprechen ungefähr der gleiche Größe wenn ich es nicht setzen würde.
Hier mal zum Veranschaulichen/Nachvollziehen zur Aufteilung mit base-x:
base-width:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid.component.js#L112
Zum testen: https://www.w3schools.com/cssref/tryit.php?filename=trycss_grid-auto-columns
Demo: https://www.w3schools.com/cssref/playdemo.php?filename=playcss_grid-auto-columns
base-height:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid.component.js#L113
Zum testen: https://www.w3schools.com/cssref/tryit.php?filename=trycss_grid-auto-rows
Demo: https://www.w3schools.com/cssref/playdemo.php?filename=playcss_grid-auto-rows
In 'Zum testen' kannst du auch spielen mit den Angaben der Items...
Dazu kommen noch die col und row Angaben die mit eingerechnet (/gerechnet) werden. Diese kannst du auch mit decimals unterteilen und man hat dann noch mehr row´s und col´s....
Ich kann es nicht besser erklären... sorry...
zum content:
Beim content kann man seine wiederkehrende Dinge/Devices einmal übergeben.
Wie im Beispiel vom example device="Irgendwas" und wird dann mit {{device}} im content aufgerufen.
Des Weiteren kannst du da auch einen fertigen HTML-Code von Fhem holen. z.B. Readinggroup o.Ä.
Der wird dann so angezeigt. Aufpassen muss man nur bei den SVG´s. Die sind meist zu Groß. Siehe hier:
Problem:
https://forum.fhem.de/index.php/topic,115259.msg1238688.html#msg1238688
Lösung:
https://forum.fhem.de/index.php/topic,115259.msg1238708.html#msg1238708
Bsp:
<ftui-content [content]="Device | getHTML('DeviceHtmlCode')"></ftui-content>
Weitere Beispiele sind hier im Thread zu finden.
Ich hoffe das hilft ein wenig....
LG mr_petz
Hallo
Hab mich jetzt endlich getraut an FTUI2->FTUI3 zu arbeiten. Gibt ja ein paar Klasse neue Möglichkeiten und ist auch viel schneller.
Zu den Images hätte ich ein paar Fragen/Anregungen:
1. Interval/Refresh
Das klappt wunderbar bei einer URL, aber mit einer Datei im Filesystem verändert sich nichts. Die Datei wird von ffmpeg von einer Kamera geholt und ständig aktualisiert. Wenn ich nocache="true" angebe, kommt gar kein Bild mehr. Hab testweise immer mal wieder eine neue Datei hinkopiert, aber das Bild bleibt unverändert bis ich meinen Browser-Cache löschen und neu lade - dann hab ich wieder das aktuelle Bild.
2. Crop
Ein Hauptgrund für das ffmpeg oben, ist, dass ich auch Platzgründen nur einen Ausschnitt des Bildes anzeigen möchte. Die Größe kann man ja anpassen, aber Beschneiden kann man es IMHO nur wenn das Tile drumrum zu klein ist - aber eben nur von einer Ecke weg und nicht einen Zoom in die Mitte.
Wäre ein freies Crop (x,y,width,height) irgendwie realisierbar?
3. RTSP
Nicht alle meine Kameras haben snapshot jpegs. Da gibt es nur den RTSP Stream (und schon sind wir wieder bei ffmpeg, was meinen Raspi allerdings sehr stresst). Gibt es eine Möglichkeit einen RTSP Stream in FTUI3 (und dem "Fully" Browser) einzubetten? Ist jetzt wahrscheinlich kein echtes FTUI Thema.
4. Android/Webview Version
Ich schätze mal, dass manche Elemente (bisher hatte ich das nur bei ftui-meter) am Tablet nicht korrekt darstellen, liegt das an meinem Android 7 mit Webview 65 (darüber beschwert sich sogar Fully). Kann da leider nicht aus. Schon Android 7 hab ich nur mit LineageOS hingekriegt - mehr gibts für mein Samsung Tab E wohl nicht mehr. Da ich keinen Elektroschrott erzeugen will, muss ich dann wohl auf andere Elemente ausweichen.
Gruß,
Jörg
Zitat von: Adimarantis am 24 Oktober 2022, 15:51:09
...
4. Android/Webview Version
Ich schätze mal, dass manche Elemente (bisher hatte ich das nur bei ftui-meter) am Tablet nicht korrekt darstellen, liegt das an meinem Android 7 mit Webview 65 (darüber beschwert sich sogar Fully). Kann da leider nicht aus. Schon Android 7 hab ich nur mit LineageOS hingekriegt - mehr gibts für mein Samsung Tab E wohl nicht mehr. Da ich keinen Elektroschrott erzeugen will, muss ich dann wohl auf andere Elemente ausweichen.
...
Hi Jörg,
Android System WebView kannst du immer höher nachladen als apk. Habe auf meinem Tab4 mit Android 4.4.2 die WebView v95 separat nachgeworfen...
Seiten zum runterladen gibt es genug...
LG mr_petz
Hallo zusammen,
nach langem Nutzen von FTUI v2 möchte ich nun umsteigen und finde mich gerade in die Syntax rein - erst mal Respekt, sieht toll aus!
Leider komme ich als "FTUI 3 Newbie" nicht komplett klar. Ich möchte - recht simpel - das WLAN einer FritzBox ein- und ausschalten über einen Switch. Hierzu (siehe dazu die Wiki-Seite bei FHEM zur FritzBox) möchte ich ein "set FRITZBOX call #96*0*" zum Ausschalten und entsprechend mit der 1 hinten zum Einschalten senden.
Hierfür habe ich erstmal hiermit angefangen:
<ftui-switch slot="end" [value]="FritzBox:box_wlan_2.4GHz>
Der Switch zeigt daraufhin den Status des WLAN an, wie gewünscht. Dieser hat die Werte on, off - die der Switch lesen kann und entsprechend darstellt.
Nun zum Schreiben des Status. Hier habe ich ein (value)="FritzBox call" eingefügt, was dann entsprechend ein "set FritzBox call on" bzw. "off" sendet. On und Off sind hier aber falsch, die states müssen states="#96*0*,#96*1*" sein, womit ich mit dem Switch schalten kann. Nur: Jetzt wird der ausgelesene Wert, also [value], nicht mehr richtig gelesen - der Switch ist beim Laden der Seite immer off.
Ich habe auch schon folgendes probiert:
<ftui-switch slot="end" [value]="FritzBox:box_wlan_2.4GHz | map('on:#96*0*,off:#96*1*')" (value)="FritzBox call" states="#96*0*,#96*1*">
Ich hatte gehofft, den ausgelesenen State (on, off) auf die beiden für den Switch definierten States zu Mappen, da der Switch ja jetzt nicht mehr auf (on, off) hört, sondern eben auf die beiden definierten Argumente für call... auch das klappt nicht.
Daher die Frage: Kann man sowas mit FTUI3 umsetzen, und wenn ja wie?
Vielen herzlichen Dank, viele Grüße
Christian
Hallo!
Zitat von: mr_petz am 24 Oktober 2022, 15:24:35
Ich kann es nicht besser erklären... sorry...
Vielen Dank für die ausführliche Erklärung! Das bringt mich ein ganzes Stück voran. Auch wenn ich da noch einiges zu lernen hab :)
zum content:
Hier meinte ich eher welche Inhalte dynamisch nachgeladen werden können. Was z.B. nicht geht ist ein Tabellenaufbau:
index.html:
<ftui-grid-tile row="1" col="7" height="2" width="3">
<table>
<tbody>
<tr>
<ftui-content file="tpl_MaxDetailText.html"
tpl_Name="Wohnzimmer"
tpl_Device="Max_WT_Wohnzimmer"
tpl_Temperature="Max_WT_Wohnzimmer:temperature"
tpl_TempIsOld="Max_WT_Wohnzimmer:Temp_isOld"
tpl_valvepos="Max_HT_Wohnzimmer:valveposition">
</ftui-content>
</tr>
<tr>
<ftui-content file="tpl_MaxDetailText.html"
tpl_Name="K1"
tpl_Device="Max_HT_K1"
tpl_Temperature="GPIO4_DS18B20_K1:temperature | round(1)"
tpl_valvepos="Max_HT_K1:valveposition">
</ftui-content>
</tr>
</tbody>
</table>
</ftui-grid-tile>
tpl_maxDetailText.html:
<td>
<ftui-label
text="{{tpl_Name}}"
></ftui-label>
</td>
<td>
<ftui-label
[text] = "{{tpl_Device}}:mode"
></ftui-label>
</td>
<td>
<ftui-label
[text] = "{{tpl_Device}}:desiredTemperature"
></ftui-label>
</td>
<td>
<ftui-label
[text] = "{{tpl_valvepos}"
></ftui-label>
</td>
<td>
<ftui-label
[text] = "{{tpl_Temperature}}"
></ftui-label>
</td>
Was hingegen funktioniert (Beispiel aus dem Thread hier):
<ftui-grid-tile row="1" col="7" height="2" width="3">
<ftui-content file="tpl_MaxDetailText.html"
tpl_Name="K1"
tpl_Device="Max_HT_K1"
tpl_Temperature="GPIO4_DS18B20_K1:temperature | round(1)"
tpl_valvepos="Max_HT_K1:valveposition">
</ftui-content>
<ftui-content file="tpl_MaxDetailText.html"
tpl_Name="Wohnzimmer"
tpl_Device="Max_WT_Wohnzimmer"
tpl_Temperature="Max_WT_Wohnzimmer:temperature"
tpl_TempIsOld="Max_WT_Wohnzimmer:Temp_isOld"
tpl_valvepos="Max_HT_Wohnzimmer:valveposition">
</ftui-content>
</ftui-grid-tile>
<ftui-row>
<ftui-column>
<ftui-label
text="{{tpl_Name}}"></ftui-label>
</ftui-column>
<ftui-column width="10%">
<ftui-label
[text]="{{tpl_Device}}:mode"></ftui-label>
</ftui-column>
<ftui-column width="15%">
<ftui-label
[text]="{{tpl_Device}}:desiredTemperature"></ftui-label>
</ftui-column>
<ftui-column width="10%">
<ftui-label
[text]="{{tpl_valvepos}"></ftui-label>
</ftui-column>
<ftui-column width="10%">
<ftui-label
[text]="{{tpl_Temperature}}"></ftui-label>
</ftui-column>
</ftui-row>
Also mit ftui-row und column eine Tabelle aufbauen, die mit festen Spaltenbreiten arbeitet. :)
Gruß
Bismosa
@cschneider
Das sollte mit Backquote gehen:
<ftui-switch [value]="FritzBox:box_wlan_2.4GHz | map('off:`call #96*0*`,on:`call #96*1*`')" (value)="FritzBox" states="call #96*0*,call #96*1*"></ftui-switch>
und so kannst du es machen falls noch was anderes ausser on kommt:
<ftui-switch [value]="FritzBox:box_wlan_2.4GHz | map('.*:`call #96*0*`,on:`call #96*1*`')" (value)="FritzBox" states="call #96*0*,call #96*1*"></ftui-switch>
LG
Zitat von: bismosa am 24 Oktober 2022, 18:49:30
...
zum content:
Hier meinte ich eher welche Inhalte dynamisch nachgeladen werden können. Was z.B. nicht geht ist ein Tabellenaufbau:
....
Ok, mit z.Bsp.: div oder span geht es auch.
Hinweis:
bei tpl_valvepos im content fehlt eine }:
<ftui-label
[text] = "{{tpl_valvepos}"
></ftui-label>
LG
Super - geht. Danke!!! Ist noch etwas Magic, was die Backquotes bewirken ... am Ende ist das ja kein Kommando, was ausgewertet werden muss. Mal noch etwas lesen...der Erfolg gibt dem ganzen Recht ;)
Zitat von: mr_petz am 24 Oktober 2022, 20:04:32
@cschneider
Das sollte mit Backquote gehen:
<ftui-switch [value]="FritzBox:box_wlan_2.4GHz | map('off:`call #96*0*`,on:`call #96*1*`')" (value)="FritzBox" states="call #96*0*,call #96*1*"></ftui-switch>
und so kannst du es machen falls noch was anderes ausser on kommt:
<ftui-switch [value]="FritzBox:box_wlan_2.4GHz | map('.*:`call #96*0*`,on:`call #96*1*`')" (value)="FritzBox" states="call #96*0*,call #96*1*"></ftui-switch>
LG
Zitat von: cschneider am 24 Oktober 2022, 21:00:59
Super - geht. Danke!!! Ist noch etwas Magic, was die Backquotes bewirken ... am Ende ist das ja kein Kommando, was ausgewertet werden muss. Mal noch etwas lesen...der Erfolg gibt dem ganzen Recht ;)
Die Backquotes "Escapen" in einer Art die Sonderzeichen. Oder anders gesagt, die nehmen alles so was dazwischen steht. ;)
LG
Hallo!
Danke für den Hinweis. :) Mit <div> oder <span> hatte ich natürlich nicht probiert.
Eine weitere Frage, bei der ich leider noch keine Antwort finden konnte (Sorry, ist ja ein richtiger Support-Thread für dich geworden):
Ist es möglich bei einem Klick auf einen Inhalt (ganzes ftui-tab oder die enthaltenen Label/Button etc.) auf eine bestimmte tab-view zu springen?
Ich möchte gerne auf meiner Übersichtsseite z.B. eine Temperatur anzeigen (die o.g. Tabelle) und mit einem Klick auf das Feld zu einer vollständigen Anzeige aller Temperaturen springen.
Gruß
Bismosa
Zitat von: bismosa am 24 Oktober 2022, 21:08:54
Hallo!
Danke für den Hinweis. :) Mit <div> oder <span> hatte ich natürlich nicht probiert.
Eine weitere Frage, bei der ich leider noch keine Antwort finden konnte (Sorry, ist ja ein richtiger Support-Thread für dich geworden):
Ist es möglich bei einem Klick auf einen Inhalt (ganzes ftui-tab oder die enthaltenen Label/Button etc.) auf eine bestimmte tab-view zu springen?
Ich möchte gerne auf meiner Übersichtsseite z.B. eine Temperatur anzeigen (die o.g. Tabelle) und mit einem Klick auf das Feld zu einer vollständigen Anzeige aller Temperaturen springen.
Gruß
Bismosa
Support gebe ich gern ;)
im content:
<ftui-button fill="none" (value)="local:Temp" states="on" color="light" style="min-height: 0;">
<ftui-label
text="{{tpl_Name}}"
></ftui-label>
</ftui-button>
im grid:
<ftui-tab view="View2" [value]="local:Temp">
<ftui-icon name="music"></ftui-icon>
</ftui-tab>
kurze Erläuterung: local:Temp wird hier nur Lokal ausgeführt (lokales Binding). Temp ist frei erfunden.
Edit: oder mit @click im label:
<ftui-label
text="{{tpl_Name}}"
@click="document.querySelector(`ftui-tab[view='View2']`).value='on'"
></ftui-label>
hier View2 mit deinem ersetzen...
Edit2: einen hätte ich noch mit @click im label mit FTUI-Boardmitteln:
<ftui-label
text="{{tpl_Name}}"
@click="ftuiHelper.selectOne(`ftui-tab[view='View2']`).value='on'"
></ftui-label>
hier auch View2 mit deinem ersetzen...
Edit3: da ich gern spiele habe ich noch einen mit @click im label und [value] im ftui-tab (local binding) mit FTUI-Boardmitteln:
im label:
<ftui-label
text="{{tpl_Name}}"
@click="fhemService.updateReadingItem('local-Temp', {value: 'on',})"
></ftui-label>
im grid:
<ftui-tab view="View2" [value]="local:Temp">
<ftui-icon name="music"></ftui-icon>
</ftui-tab>
Das @click kannst du eigentlich überall setzen... im grid-tile,tab-view....
Da sieht man auch die Vielfalt an Möglichkeiten...
LG
@Carsten
*** Anrufliste
war in der Anfangsphase schon ein Thema ... beispielhafter Beitrag
Zitat von: Eisix am 24 November 2020, 21:32:41
Anrufliste habe ich fertig, hängt dran.
*** Karte
welche Features wären für Dich interessant ?
Frühe Anmerkungen zum Thema "Backquotes" ...
Zitat von: setstate am 24 November 2020, 21:35:00
Die Sonderzeichen in der Map musst du quoten.
Sobald eines folgender Zeichen im String vorkommen, musst du den String in Quotes angeben.
[]():=.!$&?*+,#'^@
Da schon " und ' vergeben sind, habe ich ` dafür benutzt.
anstatt
=>:phone_call_end_in
musst du
`=>`:phone_call_end_in
schreiben
Moin zusammen,
im <ftui-chart>, lässt sich der Wertebereich der X-Achse (Zeit!) dynamisch gestalten eventuell?
Beispiel anhand meiner PV-Anlage:
Im Sommer Messwerte von 06:00 - 21:00
Im Winter Messwerte von ~09:00 - 17:00
Aktuell wird mir in meiner zentralen FTUI3 Übersicht das kleine Chart relativ leer dargestellt.
Ohne die Parameter "x-min=7" bzw. "x-max=20" werden volle 24 Stunden auf der X-Achse visualisiert.
Nice to have wäre es, wenn der Wertebereich der X-Achse (Uhrzeit) mit dem ersten Messwerte des Tages beginnt und mit dem letzten Messwert des Tages endet. Analog wie die Y-Achse, dessen Wertebereich dynamisch aus den vorhandenen Daten generiert wird.
@Draco
Schieb das mal hier rein:
https://forum.fhem.de/index.php/topic,117779.0.html
Ich denke da ist es besser aufgehoben.
LG
Hallo!
Zitat von: mr_petz am 24 Oktober 2022, 22:07:09
Support gebe ich gern ;)
DANKE! :) (Kann man gar nicht oft genug sagen!)
Zitat von: mr_petz am 24 Oktober 2022, 22:07:09
Edit: oder mit @click im label:
<ftui-label
text="{{tpl_Name}}"
@click="document.querySelector(`ftui-tab[view='View2']`).value='on'"
></ftui-label>
hier View2 mit deinem ersetzen...
Ich glaube diese Variante gefällt mir am besten. Ich brauche keine lokalen Values im Menüpunkt setzen/Auslesen und bin auch völlig unabhängig von evtl. Änderungen im ftuiHelper.
Das beste ist auch, das dies sogar für einen kompletten ftui-grid-tile funktioniert! Es muss (wenn alle Texte/Elemente auf den gleichen Tab gehen sollen) nur einmal hinzugefügt werden. Macht das klicken auf meinem kleinen Bildschirm auch angenehmer.
<ftui-grid-tile row="8" col="4" height="2" width="2"
@click="document.querySelector(`ftui-tab[view='View2']`).value='on'">
<ftui-label text="Irgendwas"></ftui-label>
</ftui-grid-tile>
Und nochmal Danke für den Tipp! das bringt mich ein großes Stück weiter.
Gruß
Bismosa
Zitat von: bismosa am 25 Oktober 2022, 11:42:37
...
DANKE! :) (Kann man gar nicht oft genug sagen!)
...
Der Dank geht an @setstate für die erbrachte Arbeit an FTUI3!
LG
Ich würde gerne den Output einer FHEM Hilfsfunktion in MyUtils (die z.B. HTML Code als String zurückgibt) in FTUI einbetten.
Mir fällt da als Lösung aktuell nur ein, ein <ftui-label> auf irgendein Reading zu machen, in welches ich FHEM-intern periodisch den String schreibe (dadurch sollte sich der Inhalt auch aktualieren).
Das mit dem Reading find ich aber nicht so geschickt (sind ja nur tempärare Daten und ggf. recht viel), ich würde lieber direkt die Funktion (mit Parameter) aufrufen und möglichst trotzdem ein Interval angeben um es z.B. einmal pro Minute zu aktualisieren.
Geht das?
Danke.
Jörg
Kann man einen knob so definieren, dass wenn ich z.B. has-arc und min="-100" und "max=100" setze, er die farbige Markierung nicht bei -100 beginnen lässt, sondern bei 0? Also in diesem Fall, wenn der Wert 0 ist, keine farbige Markierung stattfindet.
Möchte ich gerne einsetzen für den Wert "Netzbezug" meiner PV. Wenn der 0 ist, dann ist das ja mehr als okay und muss nicht farblich auffallen. Positive bzw. negative Abweichungen möchte ich gerne farblich auffälliger darstellen.
Bin schon durch die Examples durch und auch den Code von knob habe ich mir angesehen, aber nix passendes ist mir aufgefallen.
startAngle und endAngle helfen hier nicht.
@docolli
Geht wenn dann nur so mit step:
[color]="<Device>:<Reading> | step('-100:red,0:transparent,1:green')"
LG
Zitat von: mr_petz am 27 Oktober 2022, 13:59:46
@docolli
Geht wenn dann nur so mit step:
[color]="<Device>:<Reading> | step('-100:red,0:transparent,1:green')"
LG
Danke für den Tipp!
Er zeichnet aber dennoch den Bogen von links unten und nicht von der Mitte oben aus den farbigen Balken, wenn Wert =<-100 bzw. >=1.
Ich vermute da müsste noch ein weiteres Property in den Code, was den Startwinkel des farbigen Bogens auf den Nullwert (oder einen anderen Wert) legt.
arcstart="0" bzw. arcstart="10" ?
Wert muss zwischen min und max liegen.
Ich schau mir mal die Funktion drawArc(angle) an, wenn ich es hinbekomme, poste ich hier den Code.
Hi,
ist es möglich die [src] eines Image aus einem FHEM dummy device zu generieren?
Ich hoffe, jemand hat eine Lösung für mich :)
Grüße aus dem Norden
Zitat von: reisner am 28 Oktober 2022, 20:15:30
Hi,
ist es möglich die [src] eines Image aus einem FHEM dummy device zu generieren?
Ich hoffe, jemand hat eine Lösung für mich :)
Grüße aus dem Norden
Beispiele stehen in den examples:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/image.html#L58
LG
Sorry,
ich nutze die Beispiele in aller Regel als Quelle, andernfalls hätte ich bei der Umstellung auf die Version 3 keine Chance.
Die Variante wie im Example angegeben hab ich auch ausprobiert, aber ein 'Image not available' erhalten, da muss ich wohl schauen, wo das Problem bei mir liegt.
Danke!
Für mehr Hilfeleistung/Unterstützung braucht man auch mehr Infos/Quellen/Readings etc...
LG
Das Problem hier scheint wohl meine übergebene URL einer IP-Cam (http://192.168.x.x:8080/video.cgi) zu sein. Die Image Components von FTUI v2 konnte diese anzeigen, v3 scheinbar nicht.
Hast du da einen Proxy laufen?
Andere Kamera/url (von Online) getestet?
Ich habe keinen Proxy laufen und auch andere IP-Cams probiert, immer das gleiche Ergebnis.
Leider habe ich für diese Cam's bisher keine Snahshot URL mit einem JPEG gefunden.
Aber wie schon gesagt, v2 kann es.
Gruß
Kannst du uns mitteilen welche Kamera? Type?
Ein Videostream wird hier nicht gehen...
Edit: Benutzer und Passwort brauchst du nicht?
Akuvox?:
http://device ip:8080/picture.cgi
http://device ip:8080/picture.jpg
http://device ip:8080/jpeg.cgi
Das sind Billig-China-Cam's, ich kann nicht sagen, welche Marke, das macht mir ja auch das Leben mit der Snapshot URL so schwer :(
Ich habe aber auch noch eine akuvox Doorstation R26C mit Kamera und die liefert auch ein JPEG, benötigt auch kein user und pwd. Damit klappt es aber auch nicht.
<ftui-grid-tile row="8" col="2" height="4" width="4">
<ftui-image src="http://192.168.x.x:8080/picture.jpg" interval="2" nocache></ftui-image>
</ftui-grid-tile>
Die Console sagt "Failed to load resource: the server responded with a status of 404 (Not Found)"
Kannst du mal Testhalber wenn der Port 8080 kein Proxy ist, den Port einfach weglassen?
<ftui-grid-tile row="8" col="2" height="4" width="4">
<ftui-image src="http://192.168.x.x/picture.jpg" interval="2" nocache></ftui-image>
</ftui-grid-tile>
Port 8080 ist ja eigentlich nur ein alternativer Port für HTTP.
oder mal so:
<ftui-image base="http://192.168.x.x/" src="picture.jpg" interval="2" nocache></ftui-image>
<ftui-image base="http://192.168.x.x:8080/" src="picture.jpg" interval="2" nocache></ftui-image>
Der Port ist zwingend notwendig, hab es aber probiert - gleiches Ergebnis. :-\
Wenn ich ein Image vom Apache Server des Raspi angebe, dann klappt es, ist aber der selbe, auf dem auch FHEM läuft.
Zitat von: reisner am 28 Oktober 2022, 21:30:15
...
Die Console sagt "Failed to load resource: the server responded with a status of 404 (Not Found)"
Sagt ja er kann das Bild/die Datei nicht finden....Mhh
Dann kann ich dir leider auch nicht weiter helfen...
Wenn dann noch mit normalen <img> tag testen.
<img src="http://192.168.x.x:8080/picture.jpg"></img>
oder mit Binding:
<img ftui-binding [src]="<Device>:<Reading>"></img>
Und wie gesagt diese bitte auch probieren:
Image Quality: To choose the image quality of the capture.R29 supports 7 types of resolution: 1080P,720P,4CIF,VGA,CIF,QVGA,QCIF.
Picture URL:
http://device ip:8080/picture.cgi
http://device ip:8080/jpeg.cgi
Beide von dir vorgeschlagenen Varianten funktionieren, damit kann ich gut leben.
Ich danke dir für die "späte" Hilfe!
Es funktionieren auch die video.cgi und picture.cgi und meine China Cam's - Super.
@reisner
Mir lässt so etwas immer keine Ruhe und ich denke ich weis warum bei dir ftui-image nicht will.
Prinzipiell wird auch nur ein img tag erstellt.
Aber wenn nocache oder refresh gesetzt wird, hängt das Modul noch einen Timestamp mit an die URL.
Damit wird vielleicht deine Kamera ein Problem haben.
img sieht dann so aus:
<img src="http://192.168.x.x:8080/picture.jpg?_=1667054010674">
Kannst ja auch mal so hinten dran hängen im Browser ob deine Kamera dann will!?...
Teste mal so und ich denke es wird gehen:
<ftui-image base="http://192.168.x.x:8080/" src="picture.jpg" interval="2"></ftui-image>
oder
<ftui-image src="http://192.168.x.x:8080/picture.jpg" interval="2"></ftui-image>
und ohne interval:
<ftui-image src="http://192.168.x.x:8080/picture.jpg"></ftui-image>
Nachteil. Es wird wahrscheinlich immer das gleiche Bild zu sehen sein!?
Oder du lässt deine url im Reading wechseln:
video.cgi -> picture.cgi -> picture.jpg
LG
Edit: Das würde zumindest code 404 (Not Found) Erklären...
@all, @setstate
Hinweis:
Akuvox u.ä. Kameras haben ein Problem mit dem angehängten Timestamp in der url. Im ftui-image darf kein nocache und refresh gesetzt werden, sonst wird kein Bild dargestellt.
@mr_petz
Hab's nun getestet und ja, nocache ist hier das Problem. Der Zähler, dar an die URL ergänzt wir von den Cam's nicht akzeptiert. Interval funktioniert.
Danke für deine Hilfe.
Nun kommt aber auch gleich mein nächstes Prob :)
In meiner Weather Anzeige werden die Icons in der Breite abgeschnitten dargestellt, daran ändert sich auch nicht bei größeren Sizes.
Folgender Code:
<ftui-grid-tile row="1" col="14" height="7" width="3" shape="round">
<header>WEATHER</header>
<ftui-row>
<label>Heute</label>
</ftui-row>
<ftui-row>
<ftui-weather size="4"
[condition]="Wetter_Proplanta:fc0_weatherDay"
icon-set="kleinklimaFHEM" provider="proplanta">
</ftui-weather>
</ftui-row>
<ftui-row>
<ftui-label [text]="Wetter_Proplanta:fc0_weatherDay"></ftui-label>
<ftui-label [text]="Wetter_Proplanta:fc0_tempMax" unit="°C"></ftui-label>
</ftui-row>
<ftui-row>
<label>Morgen</label>
</ftui-row>
<ftui-row>
<ftui-weather size="4"
[condition]="Wetter_Proplanta:fc1_weatherDay"
icon-set="kleinklimaFHEM" provider="proplanta">
</ftui-weather>
</ftui-row>
<ftui-row>
<ftui-label [text]="Wetter_Proplanta:fc1_weatherDay"></ftui-label>
<ftui-label [text]="Wetter_Proplanta:fc1_tempMax" unit="°C"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="Wetter_Proplanta:fc2_date | toDate() | format('eeee')"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-weather size="4"
[condition]="Wetter_Proplanta:fc2_weatherDay"
icon-set="kleinklimaFHEM" provider="proplanta">
</ftui-weather>
</ftui-row>
<ftui-row>
<ftui-label [text]="Wetter_Proplanta:fc2_weatherDay"></ftui-label>
<ftui-label [text]="Wetter_Proplanta:fc2_tempMax" unit="°C"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="Wetter_Proplanta:fc3_date | toDate() | format('eeee')"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-weather size="4"
[condition]="Wetter_Proplanta:fc3_weatherDay"
icon-set="kleinklimaFHEM" provider="proplanta">
</ftui-weather>
</ftui-row>
<ftui-row>
<ftui-label [text]="Wetter_Proplanta:fc3_weatherDay"></ftui-label>
<ftui-label [text]="Wetter_Proplanta:fc3_tempMax" unit="°C"></ftui-label>
</ftui-row>
Gibt es eine versteckte property, die dieses beeinflusst?
LG
Zitat von: reisner am 29 Oktober 2022, 17:30:45
@mr_petz
Hab's nun getestet und ja, nocache ist hier das Problem. Der Zähler, dar an die URL ergänzt wir von den Cam's nicht akzeptiert. Interval funktioniert.
Danke für deine Hilfe.
....
Dachte ich mir ;)
Zu deinen kleinklimaIcons gab es hier schon Themen dazu und meist probleme:
https://forum.fhem.de/index.php/topic,115259.msg1208182.html#msg1208182
Hast du auch schon size weggelassen?
Hast du die icons die alle haben? von hier:
https://forum.fhem.de/index.php/topic,96954.msg901188.html#msg901188
LG
Edit:
könnte mir noch vorstellen, dass es am row liegt
mal row ein width mitgeben...row nimmt volle Breite
@mr_petz
ZitatZu deinen kleinklimaIcons gab es hier schon Themen dazu und meist probleme:
https://forum.fhem.de/index.php/topic,115259.msg1208182.html#msg1208182
Hast du auch schon size weggelassen?
Hast du die icons die alle haben? von hier:
https://forum.fhem.de/index.php/topic,96954.msg901188.html#msg901188
Ja, meine Icon stammen aus diesem Beitrag.
Ohne Size wird ebenfalls geschnitten, siehe erstes Icon im Bild.
Im Forum wurde, wie Du sagst, genau das Problem schon genannt, dort war es am Ende aber ein Browser Problem. Ich habe Opera und Edge auf Windows probiert und ansonsten nutze ich Fully, alle schneiden ab. Muss bei mir also noch was anderes faul sein.
--icon-height scheint bei dir nicht gesetzt zu werden.
style="--icon-height: 1;" mal mit angeben.
zumindest kann ich es nur so nachstellen...
Hallo!
Ich hatte gerade das gleiche Problem. Da ich fleißig mitlese...Danke dadurch konnte ich die Darstellung korrigieren!
Also einfach mit
<ftui-weather style="--icon-height: 1;" size="4" icon-set="kleinklimaFHEM" [condition]="myProPlanta:fc2_weatherDay"></ftui-weather>
Gruß
Bismosa
Danke, style="--icon-height: 1;" behebt das Problem bei mir. setstate hatte zu diesen Thema ja geschrieben, dass er ein update getan hat und da ich erst kürzlich V3 installiert habe, sollte ich den fix ja haben. Muss ich mit der user.css arbeiten?
LG
Habt ihr irgendeine globale .icon Variable in einer user.css?
die icon.component.css ist hier includiert...
LG
Ich habe bisher keine user.css am Start.
LG
Ups...
Das kommt von mir selbst:
ftui-weather {
--icon-height: 1;
}
https://forum.fhem.de/index.php/topic,115259.msg1185845.html#msg1185845
es würde auch:
--icon-height: -;
oder
--icon-height: nichts;
oder
--icon-width: -;
oder
--icon-width: irgendwas;
gehen. Das ganze "Theater" soll einfach eines der beiden "deaktivieren".
Da hat setstate wohl kein professionelles Update gemacht... oder es zunichte....;D
Kommt vielleicht von den flex Änderungen...
oder hast nur mit der Sonne getestet....
LG
Edit: Das kommt von hier:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L26
@setstate man könnte hier bei diesen Iconset auch
object-fit: scale-down;
oder
object-fit: contain;
statt object-fit: cover; nehmen und es wird komplett dargestellt...
Hallo!
Ich wollte gerade mehrere ftui-label direkt nebeneinander darstellen...
Dabei ist mir aufgefallen, das immer ein Rand nach einem Label vorhanden ist. Kann es sein, das eine nicht vorhandene "unit" immer noch ein "margin-left" hat? Siehe Bild.
(Ich übe noch mit dem debugger in Chrome)
Ist das ein gewolltes verhalten? Bestimmt kann ich das auch "global" für mich in einer user-css deaktivieren?
Gruß
Bismosa
Das wurde im letzten Update hinzugefügt.
Kannste es nur hier im label.component.js bearbeiten bzw. entfernen bis setstate das benutzerdefiniert macht:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/label/label.component.js#L36
Als Übergangslösung könntest du es auch so machen:
<ftui-label class="size-7 thin" text="11.8"><span class="size-1" slot="unit" style="position:relative;left:-0.75em;">°C</span></ftui-label>
1. mit style
2. ohne style
im Bildanhang
LG
Edit: sorry
global kannst du es erstmal so lösen:
[slot="unit"] {
position: relative;
left: -0.75em;
}
und wenn dein label dir zu weit links erscheint, dann gibst du ihn auch pos und left mit.
Hallo!
Danke. Die Übergangslösung funktioniert. Allerdings ist mir eine globale Lösung hier lieber. Ich habe sehr viele Label mit Einheiten (oder eben mehrere Label direkt nacheinander).
Die Lücken stören mich da schon sehr.
Die Globale Variante bekomme ich im <style>-Tag jedoch nicht hin. Ich hatte es auch so gesehen. Aber auch das führt nicht zum Erfolg.
::slotted([slot="unit"]){
position: relative;
left: -0.75em;
}
Hast Du noch einen Tip?
Gruß
Bismosa
Moin zusammen,
erstmal vielen Dank für diese neue Version des FTUI.
Ich konnte bisher alles meiner FTUI2 Version zu FTUI3 umbauen. Nur mit dem folgenden habe ich ein Problem. Und zwar habe ich bisher mit einem Button die folgende Befehlskette aufgerufen:
<div data-type="push" data-fhem-cmd='{my $number=ReadingsVal("CallList","1-number","");;fhem("telelock $number")}; set CallList removeItem 1'></div>
Telelock ist dabei ein cmdalias, der eine Befehlskette an die Fritzbox übergibt zum Eintragen einer zu sperrenden Telefonnummer. Der benötigt die Telefonnummer, welche aus der CallList entnommen wird.
Es klappte bisher alles ohne Probleme, nur bekomme ich es nicht in die neue Struktur untergebracht.
Danke für Hinweise und Unterstützung.
Gruß Arne
Hi Arne,
einfach
@click="sendFhem(`{my $number=ReadingsVal('CallList','1-number','');;fhem('telelock $number')}; set CallList removeItem 1`)"
einem label,icon etc. mitgeben und fertig.
Du kannst es auch einem button anhängen:
<ftui-button @click="sendFhem(`{my $number=ReadingsVal('CallList','1-number','');;fhem('telelock $number')}; set CallList removeItem 1`)">sendFehm</ftui-button>
Wichtig hier sind die Backquotes...
Edit: wobei du beim ftui-button auch set CallList removeItem 1 einpflegen kannst:
<ftui-button (value)="CallList" states="removeItem 1" @click="sendFhem(`{my $number=ReadingsVal('CallList','1-number','');;fhem('telelock $number')}`)">sendFehm</ftui-button>
LG
Darf ich mal rumfragen:
Macht es aus irgendwelchen Gründen Sinn, eine größere FTUI3-Datei in kleinere Dateien zu zerlegen und Code-Teile dort auszulagern?
Als ich mit FTUI3 auf meinem Raspberry PI 4 2 GB begann, war die Seite im Vergleich zu FTUI 3 ultraschnell geladen. Inzwischen sind deutlich viele Elemente, hinzugekommen, die Menge an Elementen hat sich sicherlich verdreifacht. Entsprechend dauert ein Reload der Browserseite inzwischen 3-4 Sekunden; läuft danach aber flüssig.
Eine zwingende Notwendigkeit für o.g. Anfrage habe ich deshalb nicht, aber der perfektionistische Monk und so.....
Nebenbei bin ich im Editor praktisch nur noch per Suchfunktion in der Lage, gewünschte Stellen im Code für Änderungen zu finden.
Danke für Eure Rückmeldung.
@Dracolein
Ich verwende die Auslagerung u.a. dann, wenn "identische" Blöcke auftreten.
Das Verhalten von z.B. x Thermostaten wird somit einmalig als parametrierte Schablone bereitgestellt und kann beliebig oft verwendet werden ... Anpassungen müssen im Zweifel nur einmalig durchgeführt werden.
Ich habe 6 gleiche Circle-Menüs recht aufwändig mit 5-6 Einzelbuttons, Farbänderung, Iconänderung je nach Zustand. Sowas könnte ich auslagern.
Ist das dann lediglich zwecks Übersichtlichkeid des Codes, oder hat es performance-seitig auch Vorteile?
(gibts Muster-Code irgendwo?)
Guten Abend,
habe bisher weder mit TabletUI 1, 2 oder 3 gearbeitet und habe heute erstmal das wiki gelesen und die V3 installiert.
Hierbei bleiben folgende Fragen für mich komplett offen:
Kann man mit der FTUIv3 lediglich die devices auslesen, die in der FHEM Instanz liegen, in der auch die FTUI installiert ist?
Wenn dem so ist, welche Alternative bleibt, abgesehen von fhem2fhem, um mehrere FHEM Instanzen mit einer FTUI auszulesen?
Danke vorab.
Gruß Thomas
Hallo zusammen,
habe nur ich Probleme das aktuellen FTUI3 Update zu installieren oder geht es anderen auch so?
2022.11.01 20:59:35 1: UPD www/ftui/components/button/button.component.css
2022.11.01 20:59:35 1: UPD www/ftui/components/button/button.component.js
2022.11.01 20:59:36 1: UPD www/ftui/components/cell/cell.component.js
2022.11.01 20:59:36 1: UPD www/ftui/components/element.component.js
2022.11.01 20:59:36 1: UPD www/ftui/components/grid/grid.component.js
2022.11.01 20:59:36 1: UPD www/ftui/components/icon/icon.component.css
2022.11.01 20:59:37 1: UPD www/ftui/components/label/label.component.js
2022.11.01 20:59:37 1: UPD www/ftui/components/tab/tab.component.js
2022.11.01 20:59:37 1: UPD www/ftui/examples/contents/mobile-view-vacuum.html
2022.11.01 20:59:37 1: open ./www/ftui/examples/contents/mobile-view-vacuum.html failed: Permission denied, trying to restore the previous version and aborting the update
Gruß LuGu
@LuGu
Habe eben das ausstehende FTUI3 Update eingespielt und es funktionierte ohne Probleme.
Laut Fehlermeldung scheint die problematische Datei oder das gesamte contents-Verzeichnis für den ausführenden Nutzer unveränderbar zu sein ...
Hallo,
kann man mit FTUI3 zwei Werte aus FHEM addieren und darstellen? Bei Veränderung eines oder beider Werte soll die Summe neu berechnet werden.
Torsten
@OldFheme
Zitat von: OdfFhem am 01 November 2022, 22:04:03
@LuGu
Habe eben das ausstehende FTUI3 Update eingespielt und es funktionierte ohne Probleme.
Laut Fehlermeldung scheint die problematische Datei oder das gesamte contents-Verzeichnis für den ausführenden Nutzer unveränderbar zu sein ...
War auch meine Vermutung, aber ich habe an den Dateirechten ewig nichts geändert.
Alle betreffenden Dateien stehen auf -rwxrwxrwx.
Zitat von: LuGu am 01 November 2022, 22:28:06
Alle betreffenden Dateien stehen auf -rwxrwxrwx.
Worauf steht das contents-Verzeichnis ?
Könnte der ausführende Nutzer die Datei über die Shell anlegen oder löschen ?
Zitat von: OdfFhem am 01 November 2022, 22:40:28
Worauf steht das contents-Verzeichnis ?
Könnte der ausführende Nutzer die Datei über die Shell anlegen oder löschen ?
contents steht auf drwxrwxrwx
Ja die Dateien können über die Shell geändert und auch gelöscht werden.
Zitat von: ThomasFh am 01 November 2022, 17:53:31
Kann man mit der FTUIv3 lediglich die devices auslesen, die in der FHEM Instanz liegen, in der auch die FTUI installiert ist?
Im Grunde ja - es gibt aber auch noch ein (von mir unverwendetes) Meta namens fhemweb_url ... am Ende hat man auf jeden Fall genau ein FHEM verbunden.
Zitat von: ThomasFh am 01 November 2022, 17:53:31
Wenn dem so ist, welche Alternative bleibt, abgesehen von fhem2fhem, um mehrere FHEM Instanzen mit einer FTUI auszulesen?
Eine Alternative wäre der Einsatz von MQTT_GENERIC_BRIDGE ...
Zitat von: LuGu am 01 November 2022, 22:57:32
contents steht auf drwxrwxrwx
Ja die Dateien können über die Shell geändert und auch gelöscht werden.
*** Ich habe einfach mal den Inhalt der Datei "mobile-view-vacuum.html" geändert und anschließend nochmals ein FTUI3-Update eingespielt ... die Datei ist wieder auf dem neuesten Stand.
*** Rechte der Datei "mobile-view-vacuum.html" abgeändert (-r--r--r--):
open ./www/ftui/examples/contents/mobile-view-vacuum.html failed: Permission denied, trying to restore the previous version and aborting the update
Ergebnis stimmt 1:1 mit Deiner Fehlermeldung überein ... scheint bei Rechteproblemen mit einer Datei aufzutreten.
*** Rechte des gesamten Verzeichnis "contents" abgeändert (-r--r--r--):
open ./www/ftui/examples/contents/content-components.html failed: Permission denied, trying to restore the previous version and aborting the update
Fehlermeldung tritt IMMER mit der ersten, abzugleichenden Datei im Verzeichnis contents auf ... scheidet bei Dir schon mal aus
Wenn es bei Dir eine völlig andere Ursache gibt, dann scheint eine Analyse schwierig(er) bis unmöglich.
Reicht im Zweifel das einfache Löschen der problematischen Datei vor dem FTUI3-Update ?
Gibt es eine Möglichkeit, Inhalte eines <ftui-grid-tile> zeitabhängig wechseln zu lassen?
An meinem Beispiel erklärt, ich habe u.a. ein ftui-grid-tile Element in meiner Gesamt-FTUI3 Hauptdarstellung, welches einen IP-Kamera-Livestream wiedergibt. Das besagte Element sieht so aus
<!-- Livebild Garten -->
<ftui-grid-tile row="4" col="13" height="5" width="7">
<header>Livebild Garten</header>
<ftui-image src="http://192.168.178.86:1020/mjpeg/stream.cgi?chn=1" width="510px" popup-target="livebildgarten">
</ftui-grid-tile>
Nun existieren noch weitere Kamera-Livestreams und ich würde ganz gern selbige Videostreams zum Beispiel alle 10 Sekunden durchwechseln lassen. Jemand eine Idee?
Hallo!
@Dracolein
Wie wäre es mit einem Swiper?
<ftui-swiper id="swiper3" dots auto-play interval="10">
Gruß
Bismosa
Perfekt, das Element war es, super.
Um es auf die Spitze zu treiben:
Besteht eine Möglichkeit, diesen Swiper - oder Teile der dargestellten Optionen - zeitabhängig zu machen?
Zum Background:
Bei mir wechseln nun alle 20 Sekunden fein die Livestreams durch, das ist cool. Allerdings sind diverse Streams nach Sonnenuntergang schlicht schwarz weil dunkel draußen und dann würde ich gern diese Streams nach Sonnenuntergang bis zum nächsten Sonnenaufgang "ausblenden"
@Dracolein
Hier könnte das hidden-Attribut helfen ... s. swiper-Beispiel im examples-Ordner.
@Dracolein
Ich hätte eine alternative zu swiper:
<script>
setInterval(()=>{
const seconds = new Date().getSeconds();
ftuiApp.fhemService.updateReadingItem('local-sec', {value: seconds});
},1000);
</script>
<ftui-image [src]="local:sec | step('
0:`https://i.pravatar.cc/100?img=1`,
10:`https://i.pravatar.cc/100?img=2`,
20:`https://i.pravatar.cc/100?img=3`,
30:`https://i.pravatar.cc/100?img=4`,
40:`https://i.pravatar.cc/100?img=5`,
50:`https://i.pravatar.cc/100?img=6`,
')" nocache>
</ftui-image>
Einfach so in deine Seite und die url anpassen...
Ich weis das ist mit Extrascript, aber ich zeige gern andere Möglichkeiten... ;)
Es sei denn du kannst dir die Sekunden aus Fhem holen??
Zum sunrise und sunset würde ich das anlegen:
https://wiki.fhem.de/wiki/SUNRISE_EL
Darauf könntest du dann wie @OdfFhem sagt [hidden] anwenden im ftui-image.
LG
Ah ich habe einige Hidden-Beispiele gefunden, die ein Reading abfragen.
[hidden]="Nachtlichtautomatikschalter:state | map('on:false, off:true')"
Aber wie übertrage ich das auf die Abfrage (false / true) ob die aktuelle Uhrzeit "tagsüber" oder "nachts" ist?
Müsste ich dazu erst ein dummy_isDay Device oder sowas bauen, dessen state "on" oder "off" ist vermutlich? So wie hier am Beispiel?
https://wiki.fhem.de/wiki/Trick_der_Woche#isday
Es gibt auch die Funktion isday() die 1=Tag oder 0=Nacht liefert, was mir vollkommen ausreichen würde.
Wie sähe die Syntax aus in obigem Beispielcode, wenn man die Funktion direkt dort einbaut?
[hidden]="isday() | map('1:false, 0:true')"
ist bestimmt falsch, oder?
isday() ist eine Fhem(Perl)funktion. Die kannst du so aufrufen in der Fhem-Kommandozeile:
{isday()}
Liefert 0 und 1 glaube ich...
isday kannst du als Bedingung in einem notify oder doif nehmen und das in die if Abfrage einsetzen.
Bsp-definition:
define dummy_istTag dummy
define doif_istTag DOIF (isday()) (set dummy_istTag on) DOELSE (set dummy_istTag off)
Edit. Beispiel bearbeitet...
Ich habe es nun so gelöst:
[hidden]="dummy_istTag:state | map('on:false, off:true')"
unter Zuhilfenahme von diesen 3:
define dummy_istTag dummy
define at_istTag_on at *{sunrise()} set dummy_istTag on
define at_istTag_off at *{sunset()} set dummy_istTag off
(editiert)
Hinweis: Du hast 2x sunset definiert...
Zitat von: OdfFhem am 01 November 2022, 23:25:47
Wenn es bei Dir eine völlig andere Ursache gibt, dann scheint eine Analyse schwierig(er) bis unmöglich.
Reicht im Zweifel das einfache Löschen der problematischen Datei vor dem FTUI3-Update ?
Danke OdfFhem für's mitsuchen.
Ich habe das gesamte /examples gelöscht, danach lief das Update durch.
Gruß LuGu
Hallo,
Ich würde gerne in einem Label drei verschiedene Readings in einer Zeile darstellen, weiß aber nicht, wie ich die 3 Werte zu einem Wert stringverketten (concat) kann.
In fhem wurden die 3 Werte schon mittels stateFormat zusammengefaßt, in FTUI3 erhalte ich jedoch nur den nativen state (bei mir open) angezeigt.
Danke vorab.
3 einzelne <ftui-label> Elemente von einem <ftui-row></ftui-row> umschlossen sind keine Alternative?
Hallo,
Zitat von: Dracolein am 03 November 2022, 07:51:29
3 einzelne <ftui-label> Elemente von einem <ftui-row></ftui-row> umschlossen sind keine Alternative?
Auch wenn ich nicht die Frage gestellt habe. Für mich ist es erst eine Alternative, seit dem ich den Rand im Label für die Unit komplett entfernt habe.
Dafür habe ich die label.component.js angepasst. Die Zeile 36 habe ich für mich ausgeklammert.
Ist natürlich bei einem Update ein Problem (es wurde auch kürzlich etwas geändert, habe ich mir aber noch nicht angeschaut.)
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/label/label.component.js#L36
Ich hatte das Problem vorher mehrfach ;)
[edit]
Es geht auch ohne Anpassung an der Komponente:
Zitat von: mr_petz am 30 Oktober 2022, 12:27:14
...
Als Übergangslösung könntest du es auch so machen:
<ftui-label class="size-7 thin" text="11.8"><span class="size-1" slot="unit" style="position:relative;left:-0.75em;">°C</span></ftui-label>
Siehe Beitrag: https://forum.fhem.de/index.php/topic,115259.msg1242235.html#msg1242235
[/edit]
Gruß
Bismosa
Zu erwähnen ist, @setstate hat den Abstand der unit im label beim letzten update auf 0.15em verringert...
LG
Zitat von: Dracolein am 03 November 2022, 07:51:29
3 einzelne <ftui-label> Elemente von einem <ftui-row></ftui-row> umschlossen sind keine Alternative?
hab das erstmal so gemacht wie vorgeschlagen, ganz abgesehen davon, dass es schneller geht, wenn man in fhem gleich ein entsprechendes userReading(s) erstellt.
Mangels doku und eigenem Unvermögen bekomme ich aber keine Einheiten an das label
<!-- Victron -->
<ftui-grid-tile row="8" col="4" height="2" width="3" color="green">
<ftui-label size="3">Victron</ftui-label>
<ftui-icon name="cog" size="3"></ftui-icon>
<ftui-row width="80%" height="10%">
<ftui-label [text]="VictronT1:GridPowerL1"></ftui-label>
<ftui-label [unit]="Watt"></ftui-label>
<ftui-label [text]="VictronT1:GridPowerL2"></ftui-label>
<ftui-label [text]="VictronT1:GridPowerL3"></ftui-label>
</ftui-row>
</ftui-grid-tile>
Ich dachte, dass man hiermit eine Einheit anhängen kann:
<ftui-label [unit]="Watt"></ftui-label>Das klappt aber nicht.
Das hier kann nur funktionieren, wenn du ein FHEM Device hast, das "Watt" heisst und als status die Einheit hat.
<ftui-label [unit]="Watt"></ftui-label>
Ansonsten muss es so heissen:
<ftui-label unit="Watt"></ftui-label>
@andreas_r
So geht es auch nicht, da unit einen Text erwartet bzw. label.
Wenn dann so:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/label.html#L195
oder so mit <span>:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/label.html#L196
Hier im span slot liegt der Vorteil im stylen der unit wie im example...
Also im Beispiel von @ThomasFh:
<!-- Victron -->
<ftui-grid-tile row="8" col="4" height="2" width="3" color="green">
<ftui-label size="3">Victron</ftui-label>
<ftui-icon name="cog" size="3"></ftui-icon>
<ftui-row width="80%" height="10%">
<ftui-label [text]="VictronT1:GridPowerL1" unit="Watt"></ftui-label>
<ftui-label [text]="VictronT1:GridPowerL2"></ftui-label>
<ftui-label [text]="VictronT1:GridPowerL3"></ftui-label>
</ftui-row>
</ftui-grid-tile>
oder:
<!-- Victron -->
<ftui-grid-tile row="8" col="4" height="2" width="3" color="green">
<ftui-label size="3">Victron</ftui-label>
<ftui-icon name="cog" size="3"></ftui-icon>
<ftui-row width="80%" height="10%">
<ftui-label [text]="VictronT1:GridPowerL1"><span slot="unit">Watt</span></ftui-label>
<ftui-label [text]="VictronT1:GridPowerL2"></ftui-label>
<ftui-label [text]="VictronT1:GridPowerL3"></ftui-label>
</ftui-row>
</ftui-grid-tile>
Und hier die Doku zum binding:
https://github.com/knowthelist/ftui#binding
[]=get
()=set
[()]=beides
LG
@mr_petz: Sicher? bei mir zumindest geht so was hier:
<ftui-label [text]="ProPlanta:fc2_tempMax" unit="°C"></ftui-label>
Hatte schon die Frage so verstanden, dass ein Text mit im Label steht?
Du hattest aber das geschrieben:
Zitat von: andreas_r am 03 November 2022, 19:04:05
Das hier kann nur funktionieren, wenn du ein FHEM Device hast, das "Watt" heisst und als status die Einheit hat.
<ftui-label [unit]="Watt"></ftui-label>
Ansonsten muss es so heissen:
<ftui-label unit="Watt"></ftui-label>
Nur so mit unit alleine:
<ftui-label unit="Watt"></ftui-label>geht es nicht...
Da müsste mindestens ein text mit space rein:
<ftui-label text=" " unit="Watt"></ftui-label>
Ja, da hast Du natürlich Recht. Ich hatte mich eher auf das Thema bezogen, dass die unit auf ein Device referenziert war und nicht direkt zugewiesen.
Zumindest sollte es ja jetzt beim Fragesteller funktionieren. :)
Moin!
Zitat von: mr_petz am 30 Oktober 2022, 20:52:09
<ftui-button @click="sendFhem(`{my $number=ReadingsVal('CallList','1-number','');;fhem('telelock $number')}; set CallList removeItem 1`)">sendFehm</ftui-button>
oder
<ftui-button (value)="CallList" states="removeItem 1" @click="sendFhem(`{my $number=ReadingsVal('CallList','1-number','');;fhem('telelock $number')}`)">sendFehm</ftui-button>
funktioniert leider nur teilweise. Der CallList_Aufruf "removeItem" funktioniert. Aber irgendwie scheint das Erstellen der Variable $number nicht zu funktionieren bzw. das Übergeben der Variable. Auf jeden Fall wird die Funktion telelock aufgerufen, aber als Nummer wird $number ins SPERR-Telefonbuch geschrieben und nicht deren Inhalt.
Wo könnte mein Denkfehler liegen? Mit FTUI2 hat's so geklappt.
Danke und Gruß
Arne
Mhhh.
Kannst du noch eine Bedingung einbauen?:
<ftui-button (value)="CallList" states="removeItem 1" @click="sendFhem(`{my $number=(ReadingsVal('CallList','1-number','')); if ($number) {fhem('telelock $number')};}`)">sendFehm</ftui-button>
Kommt irgendeine Fehlermeldung im Log?
Kann es nicht live testen sorry...
LG
Edit: Vielleicht auch die ' mit " tauschen? Wieviele ; braucht man eigentlich? eins oder?
<ftui-button (value)="CallList" states="removeItem 1" @click='sendFhem(`{my $number=(ReadingsVal("CallList","1-number","")); if ($number) {fhem("telelock $number")};}`)'>sendFehm</ftui-button>
Es könnte auch sein das das remove zuerst ausgeführt wird??
Edit2: Wenn du es in einem Label angezeigt bekommst könntest du es vielleicht auch so lösen?:
<ftui-label [text]="CallList:1-number | number=>ftuiApp.fhemService.sendCommand(`fhem('telelock ` + number +`')`) | ()=>this.text=text" @click="sendFhem('set CallList removeItem 1')"></ftui-label>
Man könnte es auch local an einen button übergeben.
Wenn da interesse besteht sag Bescheid..
LG
@mr_petz, @wg25
Mit der (ersten) geschweiften Klammer wird in den Perl-Modus geschaltet - dort gilt:
- Doppelte Anführungszeichen sorgen vor der Verwendung von Zeichenketten für das Ersetzen von Variablen.
- Einfache Anführungszeichen unterbinden eine solche Ersetzung.
Also sollte das gehen?:
<ftui-button (value)="CallList" states="removeItem 1" @click='sendFhem(`{my $number=(ReadingsVal("CallList","1-number","")); fhem("telelock $number");}`)'>sendFehm</ftui-button>
LG
Edit:
Muss die fhem() function in {} stehen?
Laut Schilderung von wg25 fehlt nur die Ersetzung ...
Wenn Ausführung via data-fhem-cmd in FTUI2 so funktioniert
'{my $number=ReadingsVal("CallList","1-number","");;fhem("telelock $number")}; set CallList removeItem 1'
sollte Ausführung via sendFhem in FTUI3 so aussehen
`{my $number=ReadingsVal("CallList","1-number","");; fhem("telelock $number")}; set CallList removeItem 1`
... doppeltes ; u.U. unnütz ...
Zitat von: OdfFhem am 03 November 2022, 22:46:33
sollte Ausführung via sendFhem in FTUI3 so aussehen
`{my $number=ReadingsVal("CallList","1-number","");; fhem("telelock $number")}; set CallList removeItem 1`
Ich habe mal den "inneren Teil"
{my $number=ReadingsVal("CallList","1-number","");; fhem("telelock $number")} direkt in die Commandozeile von FHEM eingegeben... läuft wie es soll.
Rufe ich diesen Teil dann mit sendFhem im FTUI3 auf, klappt es nicht.
<ftui-button @click="sendFhem(`{my $number=ReadingsVal("CallList","1-number","");; fhem("telelock $number")}`)">sendFhem</ftui-button>Toast Message: :1 SyntaxError: Unexpected end of input
:-\
Wenn dann so:
<ftui-button @click='sendFhem(`{my $number=ReadingsVal("CallList","1-number","");; fhem("telelock $number")}`)'>sendFhem</ftui-button>
Man kann nur einmal " oder ' verwenden...
Also bei @click ' und im sendFhem ` und im {} "
Hatte es hier im ersten Edit schon so aufgezeigt;
https://forum.fhem.de/index.php/topic,115259.msg1243149.html#msg1243149
LG
Zitat von: mr_petz am 04 November 2022, 07:50:04
Man kann nur einmal " oder ' verwenden...
Also bei @click ' und im sendFhem ` und im {} "
Hatte es hier im ersten Edit schon so aufgezeigt;
https://forum.fhem.de/index.php/topic,115259.msg1243149.html#msg1243149
Danke, Danke, Danke! Jetzt klappt's! Ich muss mich nochmal intensiver mit Perl auseinandersetzen.
Hallo,
ich wollte nochmal fragen:
Zitat
kann man mit FTUI3 zwei Werte aus FHEM addieren und darstellen? Bei Veränderung eines oder beider Werte soll die Summe neu berechnet werden.
Torsten
Zitat von: wg25 am 04 November 2022, 14:57:51
Danke, Danke, Danke! Jetzt klappt's! Ich muss mich nochmal intensiver mit Perl auseinandersetzen.
Schön das es funktioniert...
Kannst du uns noch sagen für welche Version du dich entschieden bzw. beide getestet hast?
<ftui-button (value)="CallList" states="removeItem 1" @click='sendFhem(`{my $number=ReadingsVal("CallList","1-number",""); fhem("telelock $number")};`)'>sendFehm</ftui-button>
oder:
<ftui-button @click='sendFhem(`{my $number=ReadingsVal("CallList","1-number",""); fhem("telelock $number")}; set CallList removeItem 1`)'>sendFehm</ftui-button>
Ist für mich und andere Hilfreich zu erfahren ob beides geht bzw. gehen würde...
LG
Zitat von: iron.eagle am 04 November 2022, 16:43:30
Hallo,
ich wollte nochmal fragen:
Torsten
So ohne weiteres von Hause aus denke ich nicht. Mal sehen ob ich was hinbekomme... oder jemand anderes???
Oder schon in Fhem lösen...
LG
Zitat von: mr_petz am 04 November 2022, 17:09:55
Oder schon in Fhem lösen...
Ja, mit Dummys und Notifys habe ich schon damit angefangen. Es ist halt mehr, es in FHEM zu lösen, als einfach zwei oder mehr Werte in der Weboberfläche auszulesen und diese zu addieren, subtrahieren, ... . An anderer Stelle bräuchte ich die Werte auch nicht.
Torsten
Mal schnell gemacht. Funktioniert nur mit Numbers:
<ftui-label [text]="
Dev:read1 | t=>{this.read=t, this.read2?this.t=Number(this.read)+Number(this.read2):this.t=this.read} | ()=>this.text=this.t;
Dev:read2 | t2=>{this.read2=t2, this.read?this.t2=Number(this.read)+Number(this.read2):this.t2=this.read2} | ()=>this.text=this.t2"
>
</ftui-label>
Meintest du so in der Richtung??
Dev:read1 und Dev:read2 durch deine ersetzen...
Zusätzliche Pipes wie round() mussen hinten dran.
LG
Edit: Beispiel formatiert und die etwas andere Stringverkettung mal als Beispiel hinzugefügt wers braucht...
<ftui-label [text]="
Dev:read1 | t1=>{this.read1=t1, this.t1=this.read1+(this.read2?this.read2:'')+(this.read3?this.read3:'')} | ()=>this.text=this.t1;
Dev:read2 | t2=>{this.read2=t2, this.t2=(this.read1?this.read1:'')+this.read2+(this.read3?this.read3:'')} | ()=>this.text=this.t2;
Dev:read3 | t3=>{this.read3=t3, this.t3=(this.read1?this.read1:'')+(this.read2?this.read2:'')+this.read3} | ()=>this.text=this.t3"
>
</ftui-label>
Hier werden nur entweder read1,read2,read3 einzeln oder alle strings verkettet in der definierten Reihenfolge und in einer Reihe ohne Leerstellen angezeigt wenn verfügbar. Bleiben aber dann erhalten wenn das Reading nicht geleert wird bzw. geleert ist.
Hi mr_petz,
das sieht schonmal sehr gut aus. Mal sehen, wie es morgen aussieht, wenn die Sonne wieder scheint. Ich brauche es zur Anzeige des Eigenverbrauchs, usw. bei der PV-Anlage.
Danke.
----------------
Addition und Subtraktion funktionieren am Tag übrigens super mit den Werten der PV-Anlage.
Torsten
Hey Torsten,
zur Darstellung einer PV könntest du auch das nehmen:
https://forum.fhem.de/index.php/topic,119440.msg1231548.html#msg1231548
LG
Zitat von: mr_petz am 04 November 2022, 16:56:11
Kannst du uns noch sagen für welche Version du dich entschieden bzw. beide getestet hast?
<ftui-button (value)="CallList" states="removeItem 1" @click='sendFhem(`{my $number=ReadingsVal("CallList","1-number",""); fhem("telelock $number")};`)'>sendFehm</ftui-button>
oder:
<ftui-button @click='sendFhem(`{my $number=ReadingsVal("CallList","1-number",""); fhem("telelock $number")}; set CallList removeItem 1`)'>sendFehm</ftui-button>
Ist für mich und andere Hilfreich zu erfahren ob beides geht bzw. gehen würde...
Bei mir sieht es jetzt so aus:
<ftui-button (value)="CallList" states="removeItem 1" @click='sendFhem(`{my $number=ReadingsVal("CallList","1-number","");; fhem("telelock $number")}`)'>sendFhem</ftui-button>Hinter der Variablen-Zuweisung zwei
;; und hinter dem fhem-Aufruf kein
;. Ob es 100% so richtig ist von der Syntax... who knows? Aber es läuft!
Danke nochmal!
Gruß
Hallo zusammen,
die meisten Dinge konnte ich selber fixen, an diesem Punkt hier komme ich nicht weiter. Auch die Beispielseite https://knowthelist.github.io/ftui/www/ftui/examples/colorpicker.html (https://knowthelist.github.io/ftui/www/ftui/examples/colorpicker.html) hilft leider nicht. Ich möchte ein "wheel" und ein "Slider" untereinander setzen. Bei den Beispielen wäre es das Beispiel "Hue-Device". Hier mein Code:
<ftui-colorpicker layout="wheel,valueSlider"
[hex]="MQTT2_myMQTT2:hex"
(hex)="replace('#','') | MQTT2_myMQTT2:hex"
[brightness]="MQTT2_myMQTT2:bri | divide(2.55) | toInt()"
(brightness)="multiply(2.55) | toInt() | MQTT2_myMQTT2:bri">
</ftui-colorpicker>
Leider wird sowohl bei dem "wheel" als auch bei dem "Slider" immer nur ein "set MQTT2_myMQTT2 xxxxxx (natürlich mit validen Werten) bri" ausgeführt, die wheel Funktion, die eigentlich mit hex belegt ist, funktioniert leider nicht. Auch bei den Beispielen übrigens nicht. Ich bin davon ausgegangen, dass Wheel und Slider getrennte Set Befehle ausführen können. Was mache ich falsch, habt ihr Ideen?
Gruss Peer
Hallo!
Ich möchte externen Inhalt (Heizölpreis) mit einbinden. Ist ein iframe in Kombination mit ein bisschen Script hier das richtige?
Es wird dann ja auch neu geladen, wenn man die Seite nicht anschaut...
So habe ich es bisher (alle 6h reload)
<ftui-column>
<iframe id="reloadHeizoel" src="https://www.fastenergy.de/webmaster/heizoelpreis.php?type=2&plz=12345" style="overflow:hidden; border:0; width:100%; height:100%;"></iframe>
</ftui-column>
<script>
window.setInterval("reloadHeizoel();", 21600000);
function reloadHeizoel() {
document.getElementById("reloadHeizoel").src = document.getElementById("reloadHeizoel").src;
}
</script>
Gruß
Bismosa
Hi Peer,
in dieser Konstellation kann man bei genau 0,51,102,153,204 und 255 (254) brightness den hex einstellen:
<ftui-colorpicker layout="wheel,valueSlider"
[hex]="MQTT2_myMQTT2:hex"
[brightness]="MQTT2_myMQTT2:bri | divide(2.55) | round(0)"
(hex)="replace('#','') | MQTT2_myMQTT2:hex"
(brightness)="multiply(2.55) | toInt() | MQTT2_myMQTT2:bri">
</ftui-colorpicker>
Wird an den Berechnungen liegen? Warum das so ist k.A.
LG
@bismosa
Ist zwar nicht die Antwort auf deine Frage,
aber hier ein Anreiz die Preise in ein ftui-label zu packen (finde ich besser als iframe):
<ftui-button class="size-1" @click="javascript:fetchOel()">fetch</ftui-button>
<script>
async function fetchOel() {
try {
let response = await fetch('https://www.fastenergy.de/webmaster/heizoelpreis.php?type=2&plz=01109');
const res = await response.text();
document.getElementById('standard').textContent = res.replace(/.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*<td>Heizöl Standard\:<\/td>\n.*<td align\=\"right\">(.*) €<\/td>\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*/g,'Heizöl Standard: $1 €');
} catch (err) {
console.log('Fetch error:' + err);
}
}
</script>
<ftui-label id="standard"></ftui-label>
Hier wird der 'Heizöl Standard' ins ftui-label gepackt...
Wenn du dich besser als ich in Regex (replace) auskennst, kannst du dir das zu Nutze machen....
@OdfFhem kann das gut :D
LG mr_petz
@mr_petz, @bismosa
Bei mir läuft der fetch auf den "geliebten" CORS-Fehler, daher konnte ich nur über einen Umweg "testen".
(vorläufiges) Testergebnis ... vielleicht funktioniert es auch im "echten" Leben:
document.getElementById('standard').textContent = res.replace(/.*Standard:.*>(\d*,+\d*) €<.*Premium:.*/s,'Heizöl Standard: $1 €');
Ist - wie immer - nur eine temporäre Lösung, wenn die Antwortseite öfter umgebaut wird ...
Ist schon interessant warum bei dir der Cors-Fehler kommt.
Bei mir ohne Umwege.
Danke fürs zeigen des replace().
Wusste das du es besser kannst als ich. :D
@bismosa
Wenn du die Grafik auch brauchst, das ist eine globale und kannst sie dir in ein ftui-image einbinden ..
LG
Hallo!
Die Preise lasse ich mir schon länger über FHEM anzeigen per HTTPMOD:
defmod heizoel24 HTTPMOD https://www.heizoel24.de/DailyPriceXml.ashx?zipcode=%%PLZ%%&litre=%%MENGE%%&unloadingpoints=%%ENTLADESTELLEN%%&oilgrade=standard 300
attr heizoel24 userattr replacement03Value:1,2,3,4,5,6,7,8,9,10
attr heizoel24 enableControlSet 1
attr heizoel24 model fuel_oil_check_heizoel24_v2
attr heizoel24 reading010Name Heizoelpreis
attr heizoel24 reading010OExpr $val =~ s/,/\./;; $val;;
attr heizoel24 reading010Regex ([\d\,]+)<\/price
attr heizoel24 replacement01Mode text
attr heizoel24 replacement01Regex %%PLZ%%
attr heizoel24 replacement01Value 12345
attr heizoel24 replacement02Mode text
attr heizoel24 replacement02Regex %%MENGE%%
attr heizoel24 replacement02Value 1500
attr heizoel24 replacement03Mode text
attr heizoel24 replacement03Regex %%ENTLADESTELLEN%%
attr heizoel24 replacement03Value 1
attr heizoel24 room HTTPMOD
attr heizoel24 stateFormat { my $price = 0.0;;\
$price = (AttrNum($name,"replacement02Value",0)*ReadingsNum($name,"Heizoelpreis",0))/100;;\
my $lastCheck = ReadingsTimestamp($name,"Heizoelpreis","");;\
my $ret = "<div style=\"text-align: left;;;;\">".$lastCheck.":";;\
my $link = "https://www.heizoel24.de/heizoel/angebotsliste?";;\
$link .= "zipCode=".AttrVal($name,"replacement01Value","");;\
$link .= "&amount=".AttrVal($name,"replacement02Value","");;\
$link .= "&stations=".AttrVal($name,"replacement03Value","");;\
$link .= "&product=1";;\
$ret .= " ;<a href=\"".$link."\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"font-weight:bold;;;;\">";;\
$ret .= ReadingsVal($name,"Heizoelpreis","-");;\
$ret .= "€;</a>/100l";;\
$ret .= " ;(".AttrVal($name,"replacement02Value","0")."l = ";;\
$ret .= sprintf("%.2f",$price);;\
$ret .= "€;)</div>";;\
return $ret;;\
}
attr heizoel24 timeout 10
attr heizoel24 webCmd reread
und/oder
defmod Heizoel_esyoil HTTPMOD https://www.check24.de/heizoel/?c24_calculate=calculate&zipcode=%%PLZ%%&amount=%%MENGE%%&up=%%ENTLADESTELLEN%%&prod=%%OILGRADE%%&payment_type=%%PAYMENT%%&%%ANHANGER%%&%%SCHLAUCHLAENGE%%&%%EXPRESS%% 3600
attr Heizoel_esyoil userattr replacement03Value:1,2,3,4,5,6,7,8,9,10 replacement04Value:hose=,hose=hose_l,hose=hose_xl replacement05Value:short_vehicle=,short_vehicle=short_vehicle replacement06Value:8,4 replacement07Value:1,2,3,4,6 replacement08Value:express=,express=1
attr Heizoel_esyoil enableControlSet 1
attr Heizoel_esyoil reading010Name Heizoelpreis
attr Heizoel_esyoil reading010OExpr $val =~ s/,/\./;; $val;;
attr Heizoel_esyoil reading010Regex ([\d\,]+)\ \;;\&euro\;;
attr Heizoel_esyoil replacement01Mode text
attr Heizoel_esyoil replacement01Regex %%PLZ%%
attr Heizoel_esyoil replacement01Value 12345
attr Heizoel_esyoil replacement02Mode text
attr Heizoel_esyoil replacement02Regex %%MENGE%%
attr Heizoel_esyoil replacement02Value 1500
attr Heizoel_esyoil replacement03Mode text
attr Heizoel_esyoil replacement03Regex %%ENTLADESTELLEN%%
attr Heizoel_esyoil replacement03Value 1
attr Heizoel_esyoil replacement04Mode text
attr Heizoel_esyoil replacement04Regex %%SCHLAUCHLAENGE%%
attr Heizoel_esyoil replacement04Value hose=
attr Heizoel_esyoil replacement05Mode text
attr Heizoel_esyoil replacement05Regex %%ANHAENGER%%
attr Heizoel_esyoil replacement05Value short_vehicle=
attr Heizoel_esyoil replacement06Mode text
attr Heizoel_esyoil replacement06Regex %%OILGRADE%%
attr Heizoel_esyoil replacement06Value 8
attr Heizoel_esyoil replacement07Mode text
attr Heizoel_esyoil replacement07Regex %%PAYMENT%%
attr Heizoel_esyoil replacement07Value 2
attr Heizoel_esyoil replacement08Mode text
attr Heizoel_esyoil replacement08Regex %%EXPRESS%%
attr Heizoel_esyoil replacement08Value express=
attr Heizoel_esyoil room HTTPMOD
attr Heizoel_esyoil stateFormat { my $price = 0.0;;\
$price = (AttrNum($name,"replacement02Value",0)*ReadingsNum($name,"Heizoelpreis",0))/100;;\
#my $lastCheck = POSIX::strftime("%d.%m. %H:%M",localtime(time_str2num(ReadingsTimestamp($name,"Heizoelpreis","2000-01-01 00:00:00"))));;\
#my $lastCheck = FmtDateTime(InternalVal($name,".LastUpdate",0));;\
my $lastCheck = ReadingsTimestamp($name,"Heizoelpreis","");;\
my $ret = "<div style=\"text-align: left;;\">".$lastCheck.":";;\
my $link = "https://www.check24.de/heizoel/?c24_calculate=calculate";;\
$link .= "&zipcode=".AttrVal($name,"replacement01Value","");;\
$link .= "&amount=".AttrVal($name,"replacement02Value","");;\
$link .= "&up=".AttrVal($name,"replacement03Value","");;\
$link .= "&".AttrVal($name,"replacement04Value","");; #hose length\
$link .= "&".AttrVal($name,"replacement05Value","");; #short vehicle\
$link .= "&prod=".AttrVal($name,"replacement06Value","");; # product 8 = normal schwefelarm 4 = premium schwefelarm\
$link .= "&payment_type=".AttrVal($name,"replacement07Value","");; # 1 = Barzahlung, 2 = EC-Karte, 3 = Vorkasse, 4 = Lastschrift, 5 = Wärmekonto, 6 = Rechnung, 10 = Ratenkauf\
$link .= "&".AttrVal($name,"replacement08Value","");; #express;;\
$ret .= " ;<a href=\"".$link."\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"font-weight:bold;;\">";;\
$ret .= ReadingsVal($name,"Heizoelpreis","-");;\
$ret .= "€;</a>/100l";;\
$ret .= " ;(".AttrVal($name,"replacement02Value","0")."l = ";;\
$ret .= sprintf("%.2f",$price);;\
$ret .= "€;)</div>";;\
return $ret;;\
}
attr Heizoel_esyoil timeout 10
attr Heizoel_esyoil webCmd reread
Ich glaube das hatte ich so ähnlich mal hier im Forum gefunden...
Ist zwar wesentlich aufwändiger als die kurze Lösung hier, so kann ich aber in FHEM die Preise selbst protokollieren und meine eigenen Statistiken damit befüllen.
Zitat von: mr_petz am 09 November 2022, 07:18:46
@bismosa
Wenn du die Grafik auch brauchst, das ist eine globale und kannst sie dir in ein ftui-image einbinden ..
LG
Das geht aber nur mit der Grafik...oder? Irgendwie hatte ich das nicht hinbekommen. Ich mag aber die komplette Anzeige wie sie ist. Finde ich sehr übersichtlich. Genauere Statistiken schaue ich eh woanders oder in FHEM.
Btw:
Ist es eigentlich möglich die SVG-Plots (da habe ich bisher schon viele und auch teilweise sehr aufwändige in FHEM) direkt in FTUI 3 anzuzeigen/einzubinden?
Danke!
Gruß
Bismosa
Zitat von: bismosa am 09 November 2022, 09:01:04
Hallo!
Die Preise lasse ich mir schon länger über FHEM anzeigen per HTTPMOD:
...
Warum dann der iframe?
Zitat
Das geht aber nur mit der Grafik...oder? Irgendwie hatte ich das nicht hinbekommen. Ich mag aber die komplette Anzeige wie sie ist. Finde ich sehr übersichtlich. Genauere Statistiken schaue ich eh woanders oder in FHEM.
...
Nur Grafik.
<ftui-image src="https://www.fastenergy.de/GLOBAL_PICS/chart_small_de.png"></ftui-image>LG
Zitat von: OdfFhem am 09 November 2022, 06:56:38
...
Bei mir läuft der fetch auf den "geliebten" CORS-Fehler, daher konnte ich nur über einen Umweg "testen".
...
Ich verstehe das nicht :o. Unter Chrome Version 107.0.5304.107 (Offizieller Build) (64-Bit) (letzte Version) geht es ohne Umwege, unter FF und Edge kommt bei mir auch der CORS-Fehler???
LG
Edit: ok ich hatte unter Chrome das gemacht: --disable-web-security
Hallo Zusammen,
ich hätte mal eine Frage zu den Pipes.
Wenn ich statt eines Readings, ein Attribut auslese und die Pipes verwende, erhalte ich statt des dort Datums im Attribut, immer das aktuelle Datum von heute.
Fhem-Definition
define LoremIpsum dummy
attr LoremIpsum firstPayDate 2021-05-06
FTUI3-Code
<ftui-label [text]="LoremIpsum:firstPayDate | toDate() | format('DD.MM.YYYY')" class="size-2"></ftui-label>
Hat jemand eine Idee?
Beste Grüße
Zitat von: ToM_ToM am 09 November 2022, 18:35:59
Hallo Zusammen,
ich hätte mal eine Frage zu den Pipes.
Wenn ich statt eines Readings, ein Attribut auslese und die Pipes verwende, erhalte ich statt des dort Datums im Attribut, immer das aktuelle Datum von heute.
Fhem-Definition
define LoremIpsum dummy
attr LoremIpsum firstPayDate 2021-05-06
...
Hi ToM_ToM,
Bei dir matcht leider keiner dieser 3 'm':
https://github.com/knowthelist/ftui/blob/87ae49f98d1325c18dd8c53ad5b5982d93e014ea/www/ftui/modules/ftui/ftui.helper.js#L213
Da müsste @setstate deine Version noch mit einbauen.
Zum Übergang kannst du es so lösen:
<ftui-label [text]="LoremIpsum:firstPayDate | d=>new Date(d) | format('DD.MM.YYYY')" class="size-2"></ftui-label>
LG mr_petz
Edit: oder Regulär:
<ftui-label [text]="LoremIpsum:firstPayDate | append('_00:00:00') | toDate() | format('DD.MM.YYYY')" class="size-2"></ftui-label>
somit wird in deinem Fall gematcht...
Edit2:
Einer geht noch:
<ftui-label [text]="LoremIpsum:firstPayDate | d=>d.replace(/(\d\d\d\d)-(\d\d)-(\d\d)/,'$3.$2.$1')" class="size-2"></ftui-label>
Gerade aufgefallen... Geht ja auch mit FTUI replace:
<ftui-label [text]="LoremIpsum:firstPayDate | replace(/(\d\d\d\d)-(\d\d)-(\d\d)/,'$3.$2.$1')" class="size-2"></ftui-label>
Gibt es eine Möglichkeit, für design-Zwecke simple Trennlinien einzufügen?
Zitat von: Dracolein am 13 November 2022, 11:58:52
Gibt es eine Möglichkeit, für design-Zwecke simple Trennlinien einzufügen?
Hi Dracolein.
Ich mache das so z.Bsp.:
<hr style="width: 95%; border: 1px solid gray; padding: 0; margin: 0;">
mit z.Bsp.: var(--primary-color) kannst du auch FTUI3-Farben verwenden...
hier die Style-Möglichkeiten:
https://www.w3schools.com/howto/howto_css_style_hr.asp
und Allgemein:
https://www.w3schools.com/tags/tag_hr.asp
LG mr_petz
Und das baut man einfach irgendwo in die FTUI3 Definitionen an die Stelle rein wo es gewünscht ist, ohne irgendein umklammerndes <ftui-???>
Ja genau, du setzt es einfach unter/nach dein Label oder was auch immer...
Oder wo wolltest du die Trennlinien bzw. sichtbare Linien???
Edit:
Sowas würde auch gehen:
Hier ist dann Test im Button unterstrichen:
<ftui-button [(value)]="dummy">
<span>
<ftui-label text="TEST"></ftui-label>
<hr style="width: 95%; border: 1px solid; padding: 0; margin: 0;">
</span>
</ftui-button>
oder alleine (mein Favourit):
<hr style="width: 95%; border-width: 0; padding: 0.1px; margin: 0; background: gray;">
das selbe Ergebnis kannst du auch mit <div> erreichen:
<ftui-button [(value)]="dummy">
<span>
<ftui-label text="TEST"></ftui-label>
<div style="width: 95%; border-top: 1px solid; padding: 0; margin: 0;"></div>
</span>
</ftui-button>
oder alleine:
<div style="width: 95%; border-top: 1px solid; padding: 0; margin: 0;"></div>
Mein System läuft mit "attr global unicode"
Leider verdaut FTUI3 (hatte ich auch schon unter FTUI2) dann Umlaute in Readings nicht mehr.
Mein Problem ist ganz einfach den Text eines Wetterreadings von Proplanta. Wenn hier "bewölkt" drin steht dann liefert
<ftui-label class="size-2" [text]="Wetter:fc0_weatherDay"></ftui-label>
nichts.
Dagegen "sonnig" schreibt den Text wie erwartet.
Kann man hier irgendwas (header, meta data) einstellen, um die Unicode Umlaute zum Laufen zu kriegen?
Es gibt zwar ein meta, aber ich glaube das es trotzdem nicht gehen wird (hatten wir hier glaube schon mal):
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Wichtig ist auch die html in utf8 zu speichern...
Wie kommt es den vom reading? Kannst vielleicht mit replace() arbeiten..?
LG
Im Developer View schaut es dann so aus:
<ftui-label id="ftui_label_259" margin="0" padding="0" text="<BINARY>" color="" unit="" size="-1" interval="0" width="" height="" top="" left=""></ftui-label>
Wahrscheinlich ist es dann ein 0xC3 0xB6. (für "ö")
Aber wie macht man da ein replace? "replace(0xC3B6,'ö')" geht zumindest nicht, wäre allerdings auch mühsam dass für alle Umlaute zu wiederholen.
Ich wüsste jetzt auch nicht wie ich prüfe, was letztendlich bei FTUI ankommt. (außer "BINARY")
Ich glaube da wird mit replace() auch nichts gehen...
Wenn da nur <BINARY> kommt, dann kann das ja alles mögliche mit 0,1 oder hex sein...
zu replace() wenn dann sollte es so gehen: replace(/\u00f6/g,'ö')
ö wäre im Übrigen 0x00F6...
LG
Edit:
Wenn es rein binary kommt, also so z.Bsp.: 01001000 (H) ,dann könntest du diesen code als pipe testen:
t => t.split(' ').map(x => x = String.fromCharCode(parseInt(x, 2))).join('')
Zitat von: Adimarantis am 13 November 2022, 20:45:48
Ich wüsste jetzt auch nicht wie ich prüfe, was letztendlich bei FTUI ankommt. (außer "BINARY")
*** Abarbeitung in der unicode-Umgebung
Es scheint ein FHEM-Problem zu sein, da die jsonlist2-Anfrage bereits den fraglichen Wert als falschen Text liefert:
Value: "<BINARY>"Der eigentliche Wert hätte "Restmüll, Gelber Sack" lauten sollen.
replace bringt hier nichts, da man den eigentlichen Wert gar nicht kennt.
*** Abarbeitung in der Standard-Umgebung
Es wird der erwartete Wert übertragen:
Value: "Restmüll, Gelber Sack am 29.09.2022"***
In beiden Umgebungen wird die Antwort in utf-8 transportiert.
Verhalten wird durch jsonlist2 hervorgerufen - wohl ein Fall für @rudolfkoenig.
*** 98_JsonList2.pm ... Do not emit non-utf-8 data (Forum #55318)
my $b = "x$a";
$a = "<BINARY>" if(!utf8::decode($b)); # Forum #55318
*** encoding = unicode
a ... Restmüll, Gelber Sack am 29.09.2022
b ... xRestmüll, Gelber Sack am 29.09.2022
a ... <BINARY>
*** encoding = bytestream
a ... Restmüll, Gelber Sack am 29.09.2022
b ... xRestmüll, Gelber Sack am 29.09.2022
a ... Restmüll, Gelber Sack am 29.09.2022
Das ist es.
Habe die Zeile in JsonList2 mal testweise auskommentiert und schon funktioniert es.
Jetzt fragt sich natürlich ob das irgendwelche anderen Seiteneffekte haben kann.
Zitat von: Adimarantis am 14 November 2022, 08:07:45
Das ist es.
Ich habe schon mal vorab die morgen verfügbare Anpassung durch @rudolfkoenig getestet ... funktioniert jetzt in beiden Welten.
Jetzt hätte ich noch einen anderen seltsamen Effekt:
Bei mir flackern ein paar Icons auf meinem Android 9 Hannspree Titan 3 Tablet.
Beim Testen am PC kann ich das nicht beobachten.
Hängt augenscheinlich mit einem Webcam Bild (snapshot) zusammen, dass ich mit "interval" aktualisiere.
Auf der selben Seite habe ich einen Wetterbericht mit animierten Icons von bas.
Ist mir bisher bei "Regen" oder "Schnee" Icons aufgefallen: Jedesmal wenn die Webcam aktualisiert, flackert das Icon unter dem "Regen" und die zwei rechts daneben im selben Tile. Erst war es eben nur ein Icon, weil der Regen am Tag4 war, als der auf Tag3 rutschte waren es dann drei Icons.
Der Zusammenhang mit der Webcam liess sich durch Änderung vom Interval klar nachweisen. Die Webcam selber flackert aber nicht.
Hab das Wetter Tile schon mal mit dem Tile rechts davon getauscht, was aber keinen Unterschied gemacht hat.
Hat das schon mal jemand beobachtet und evtl Ideen? Das Flackern ist schon etwas nervig, besonders wenn die Cam alle Sekunde aktualisiert.
Kann mir jemand mit Regex etc. helfen? Ich habe ein Reading (Datum) im Format 17.11.2022, will aber nur 17.11. anzeigen lassen.
In der alten Version hatte ich es mit data-part=(\d\d\.\d\d\.).* verwirklicht bekomme es aber in 3.0 nicht gebacken und habe schon Alles irgendwie ausprobiert
Danke
Mit der pipe schon probiert?:
| toDate() | format('DD.MM.')
LG
Zitat von: mr_petz am 17 November 2022, 17:12:54
Mit der pipe schon probiert?:
LG
Boah, Danke ... genau das ;D
Hallo zusammen,
ich würde gern der FTUI3 Community, die mir schon viel geholfen hat, etwas zurückgeben. Nachdem hier im Forum einige sehr gute Hilfestellungen existieren, die aber nirgends zentral gesammelt sind, habe ich mir gedacht, dass ich vielleicht ein wenig zur Dokumentation beitragen könnte.
Was macht hier am meisten Sinn aus Eurer Sicht? Pflegen der Dokumentation auf Github per Pull Request? Oder sollte man den WIKI Bereich erweitern, der bisher ja nur aus dieser einen Seite besteht:
https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3 (https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3)
Ich würde (unabhängig wo) versuchen, die verteilten Informationen aus diesem Forum aufzubereiten und für neue User etwas einfacher erreichbar zu machen.
Was haltet ihr davon?
Viele Grüße,
Andreas
Ich bin ein großer Fan vom Wiki.
Unabhängig davon: danke für den Einsatz!
Ich tendiere auch zum Wiki. Hat den Vorteil, dass man hier besser zusammenarbeiten kann und auch Änderungen leichter vorzunehmen sind.
Aber ich wollte zumindest mal gefragt haben. ;) Hätte ja sein können, dass es einen Grund hat, warum es zu FTUI3 noch so wenig im Wiki gibt.
VG, Andreas
Die Frage ist, wer hält das ganze Aktuell? Dokumentation und aufbereiten wird immer sehr stiefmütterlich behandelt.
Zumal es auf Github schon eine Art Doku gibt.
Und vermutlich stellen die meisten User eher eine Frage hier im Forum als selbstständig im Wiki zu suchen, lesen und auf den eigenen Anwendungsfall zu adaptieren.
Der Einsatzwille ehrt andreas_r, aber man muss auch keine Ressourcen verschwenden imho.
Paar Codeschnipsel zum Nachbauen würden glaube nicht schaden.
Versuche grad die Icon Darstellung meiner Anrufe aus der Fritzbox nachzubilden - je nach status anderes Icon und andere Farbe
@mkriegl
Anrufliste ist hier zufinden:
https://forum.fhem.de/index.php/topic,115259.msg1104171.html#msg1104171
als Beispiel...
Am besten suchst du hier im Hauptthread nach deinen Fragen mit der SuFu rechts oben. ;)
LG
Zitat von: andreas_r am 18 November 2022, 16:04:12
Ich tendiere auch zum Wiki. Hat den Vorteil, dass man hier besser zusammenarbeiten kann und auch Änderungen leichter vorzunehmen sind.
Aber ich wollte zumindest mal gefragt haben. ;) Hätte ja sein können, dass es einen Grund hat, warum es zu FTUI3 noch so wenig im Wiki gibt.
VG, Andreas
Ich würde auch zum (offenen) Wiki tendieren. Praktisch wäre allerdings, dass der Wiki-Hinweis/Link in GitHub integriert würde ...
Ich würde es aber nicht als vollständige Doku angehen, da ja bereits eine große Menge praktischer Beispiele ausgeliefert wird.
Wer eine html-Seite aufbauen will, müsste damit schon recht weit kommen.
Interessanter wäre es, die oft angesprochenen Features festzuhalten (eine kleine Auswahl):
- Wie nutze ich Pipes ? Welche Pipes gibt es ? Wie kann ich eigene Pipes einbinden ?
- Reguläre Ausdrücke
- Welche Zeichen sind z.B. in obigen Fällen problematisch ... maskieren notwendig/möglich ...
- Kann ich Events auslösen ? Kann ich auf Events reagieren ? Welche Events sind besonders nützlich ?
- Wie kann man css erweitern ? Wo geht dies nicht (so einfach) ?
- Wie kann man javascript erweitern ?
- Wie kann/sollte man eigene Icons hinzufügen ? Wie kann man auf FHEM-Icons zurückgreifen ?
- Wie kann/sollte man eigene Komponenten hinzufügen ?
- ...
@ftui-popup-Nutzer
Mit dem neuesten Update scheint popup-target seine Bedeutung verloren zu haben.
alter Stand ... funktioniert nicht mehr:
<ftui-icon name="sitemap" popup-target="pop1"></ftui-icon>
neuer Stand:
<ftui-icon name="sitemap" @click="pop1.open()"></ftui-icon>
Weitere Beispiele mit neuer Theorie in examples/popup.html
s.a. https://forum.fhem.de/index.php/topic,115259.msg1246414.html#msg1246414 (https://forum.fhem.de/index.php/topic,115259.msg1246414.html#msg1246414) bzgl. Benamung von Popups
Hab ich auch gerade gesehen. Schnell angepasst, funktioniert dann problemlos wieder :D
Die Icons sehen irgendwie komisch aus, so 3D. Bei Buttons, in der Navigation usw.
Kann man das irgendwie abstellen?
Zitat von: OdfFhem am 19 November 2022, 08:22:51
@ftui-popup-Nutzer
Mit dem neuesten Update scheint popup-target seine Bedeutung verloren zu haben.
alter Stand ... funktioniert nicht mehr:
<ftui-icon name="sitemap" popup-target="pop1"></ftui-icon>
neuer Stand:
<ftui-icon name="sitemap" @click="pop1.open()"></ftui-icon>
Weitere Beispiele mit neuer Theorie in examples/popup.html
Vielen Dank für den Hinweis, hatte das Update gemachrt und nix (Popups) ging.
Einen kleinen Hinweis habe ich hier nochmal dazu:
Ich hatte meine Popups mit Namen so definiert id="popup-licht" oder id="popup-fenster-und-tueren"
Nach der von dir erwähnten Anpassung funktionierten die Popups dennoch nicht.
Erst nach dem Entfernen der Minuszeichen bzw. Bindestriche funktionieren die Popups.
Vor dem Update funkionierte das so.
VG
Zitat von: octek0815 am 19 November 2022, 15:39:24
Einen kleinen Hinweis habe ich hier nochmal dazu:
Ich hatte meine Popups mit Namen so definiert id="popup-licht" oder id="popup-fenster-und-tueren"
Nach der von dir erwähnten Anpassung funktionierten die Popups dennoch nicht.
Erst nach dem Entfernen der Minuszeichen bzw. Bindestriche funktionieren die Popups.
Vor dem Update funkionierte das so.
Guter Hinweis ... verkürzt Zeit für Anpassungsarbeiten ...
In der angeführten Beispiel-Datei
examples/popup.html gibt es auch einen diesbezüglichen Fall.
alt (mit Bindestrich):
<ftui-icon name="pencil" popup-target="pop-custom-close"></ftui-icon>
<ftui-popup id="pop-custom-close" timeout="0" opacity="0.1">
neu (mit Underscore):
<ftui-icon name="pencil" @click="pop_custom_close.open()"></ftui-icon>
<ftui-popup id="pop_custom_close" timeout="0" opacity="0.1">
Der verwendete Name muss der javascript-Konvention entsprechen ...
Zitat von: Det20 am 19 November 2022, 14:42:54
Die Icons sehen irgendwie komisch aus, so 3D. Bei Buttons, in der Navigation usw.
Kann man das irgendwie abstellen?
Hast Du ein konkreteres ftui-icon-Beispiel (möglichst mit Screenshot), so dass man sich "reindenken" kann ?
Anscheinend hat sich die Darstellung dank des Styles geändert. Wenn ich es rausnehme, sieht es wieder halbswegs ok für mich aus:
ftui-icon {
stroke-width: 0.5px;
stroke: black;
stroke-opacity: 0.5;
filter: drop-shadow(2px 2px 1px black);
--color-base: var(--dark-light);
}
Kann man um die Grid Elemente eine Rahmenlinie machen? Habe dazu bisher nichts gefunden
@Medel
Enweder als style:
style="border: 1px solid gray;"
oder in css Datei:
ftui-grid-tile {
border: 1px solid gray;
}
Alles beispielhaft!
LG
Danke funktioniert,
hatte es im ftui-grid versucht aber es muss ja zum ftui-grid-tile
Zitat von: OdfFhem am 19 November 2022, 08:22:51
@ftui-popup-Nutzer
Mit dem neuesten Update scheint popup-target seine Bedeutung verloren zu haben.
alter Stand ... funktioniert nicht mehr:
<ftui-icon name="sitemap" popup-target="pop1"></ftui-icon>
neuer Stand:
<ftui-icon name="sitemap" @click="pop1.open()"></ftui-icon>
Weitere Beispiele mit neuer Theorie in examples/popup.html
s.a. https://forum.fhem.de/index.php/topic,115259.msg1246414.html#msg1246414 (https://forum.fhem.de/index.php/topic,115259.msg1246414.html#msg1246414) bzgl. Benamung von Popups
Da habe ich auch noch eine Ergänzung:
Das ftui-popup darf jetzt
nicht mehr im ftui-label, ftui-icon usw. drin stehen sonst kann man es nicht mehr manuell schließen!
Mit popup-target ging das!
Bsp:
<ftui-icon name="trash-o" size="3" color="brown" [class-name]="Müll | step('0:hop,2:')" popup-targets="icon" @click="icon.open()">
<ftui-badge color="danger" text="1" class="size-0" [class-name]="Müll | step('2:blink,0:')" [hiddens]="Müll | step('1:false,2:true')"></ftui-badge>
<ftui-popup id="icon" width="200px" height="200px" style="padding:0;">Müllereignis</ftui-popup>
</ftui-icon>
Ich fande das vorher praktisch, da das popup genau mittig über dem ftui-label bzw. über die ftui-componenten erschienen ist...
LG mr_petz
Vor allem, wer stellt das alles überall von popup-target auf @click*.open() um? :(
Der changeset und die Änderung, für kurzfrisige Abhilfe, siehe github (https://github.com/knowthelist/ftui/commit/4605a01d609bf32eaefd799b4dd17f4aafbe78ff#diff-1eefa9130f1f9ce056af134b21b303779d3bd9ad51d20c41aecd34257bfe6b48). Aber mit dem nächsten Update wieder weg wenn kein exclude-from-update gesetzt ist.
@yersinia
Da hier immer irgenwas geändert,ergänzt und erweitert wird, müssen wir damit klar kommen.
Es muss nur ordentlich kommuniziert werden!
@setstate wird seine Gründe dafür haben...
LG
Zitat von: yersinia am 20 November 2022, 20:15:47
...Der changeset und die Änderung, für kurzfrisige Abhilfe, siehe github (https://github.com/knowthelist/ftui/commit/4605a01d609bf32eaefd799b4dd17f4aafbe78ff#diff-1eefa9130f1f9ce056af134b21b303779d3bd9ad51d20c41aecd34257bfe6b48). Aber mit dem nächsten Update wieder weg wenn kein exclude-from-update gesetzt ist.
oder so und man ist unabhängig vom Update.
script:
<script>
function targetPopup(evt,t) {
if (!evt.target.overlay) {
t.style.setProperty('display','unset');
} else {
t.style.setProperty('display','none');
}
}
</script>
und definition im @click:
@click="targetPopup(event,pop1);"
pop1 ist die id des popup. Es gehen auch mehrere popup mit unterschiedlicher id. Einfach pop1 in der @click function ändern. Somit kann man auch wieder im label, icon etc das popup schließen...
Klar, popup-target gibt es nicht mehr und man muss es auf @click ändern...
LG
Edit:
Bsp:
<script>
function targetPopup(evt,t) {
if (!evt.target.overlay) {
t.style.setProperty('display','unset');
} else {
t.style.setProperty('display','none');
}
}
</script>
<ftui-icon name="magic" @click="targetPopup(event,pop1);">
<ftui-popup id="pop1" width="200px" height="200px" style="padding:0;">Test1</ftui-popup>
</ftui-icon>
<ftui-icon name="magic" @click="targetPopup(event,pop2);">
<ftui-popup id="pop2" width="200px" height="200px" style="padding:0;">Test2</ftui-popup>
</ftui-icon>
Hallo zusammen,
kann mir jemand sagen wie ich die Wochentage die ja Täglich welchseln hier angezeigt bekomme. Als reading bekomme ich nur das Datum von Prolanta.
Vg
Tim
Hi Tim,
So sollte es gehen:
Bsp. für Übermorgen:
<ftui-label class="size-1" [text]="Wetter_ProPlanta:fc2_date | toDate() | format('eeee')"></ftui-label>
LG mr_petz
Zitat von: mr_petz am 21 November 2022, 07:54:47
Hi Tim,
So sollte es gehen:
Bsp. für Übermorgen:
<ftui-label class="size-1" [text]="Wetter_ProPlanta:fc2_date | toDate() | format('eeee')"></ftui-label>
LG mr_petz
oh, vielen vielen Dank mr_petz. Da wäre ich gestern Abend fast verzweifelt. Ich versuche mir das alles gerade anhand der Beispiele auf zu bauen und zu Lernen.
Jetzt muss ich leider noch eine Frage stellen.
Ich möchte die Fenster so darstellen wie im Beispiel, oder sogar mit einem popup muss ich mal sehen wie das geht.
Aber was steckt hinter dem Beispiel für ein "Device"? Ist das ein "Structure". Wäre jemand so freundlich mir auf die Sprünge zu helfen. :-[
@HoTi: Hier ein Beispiel für eine ähnliche Wetter Ansicht (siehe Anhang):
Man braucht keine Struktur, ReadingsGroup oder ähnliches. Es gibt hier nur ein Device in FHEM, nämlich das Proplanta Wetter https://wiki.fhem.de/wiki/PROPLANTA (https://wiki.fhem.de/wiki/PROPLANTA)
Den Rest macht das FTUI selber.
<ftui-grid-tile row="1" col="2" height="2" width="6">
<header>Wetter</header>
<ftui-row>
<ftui-column>
<ftui-label size="2">Früh</ftui-label>
<ftui-weather size="4" [condition]="ProPlanta:fc0_weatherMorning"></ftui-weather>
<ftui-label [text]="ProPlanta:fc0_weatherMorning"></ftui-label>
<ftui-label [text]="ProPlanta:fc0_temp06" unit="°C"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label size="2">Mittag</ftui-label>
<ftui-weather size="4" [condition]="ProPlanta:fc0_weatherDay"></ftui-weather>
<ftui-label [text]="ProPlanta:fc0_weatherDay"></ftui-label>
<ftui-label [text]="ProPlanta:fc0_tempMax" unit="°C"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label size="2">Abend</ftui-label>
<ftui-weather size="4" [condition]="ProPlanta:fc0_weatherEvening"></ftui-weather>
<ftui-label [text]="ProPlanta:fc0_weatherEvening"></ftui-label>
<ftui-label [text]="ProPlanta:fc0_temp18" unit="°C"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label size="2">Morgen</ftui-label>
<ftui-weather size="4" [condition]="ProPlanta:fc1_weatherDay"></ftui-weather>
<ftui-label [text]="ProPlanta:fc1_weatherDay"></ftui-label>
<ftui-label [text]="ProPlanta:fc1_tempMax" unit="°C"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label size="2" [text]="ProPlanta:fc2_date | toDate() | format('eeee')"></ftui-label>
<ftui-weather size="4" [condition]="ProPlanta:fc2_weatherDay"></ftui-weather>
<ftui-label [text]="ProPlanta:fc2_weatherDay"></ftui-label>
<ftui-label [text]="ProPlanta:fc2_tempMax" unit="°C"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label size="2" [text]="ProPlanta:fc3_date | toDate() | format('eeee')"></ftui-label>
<ftui-weather size="4" [condition]="ProPlanta:fc3_weatherDay"></ftui-weather>
<ftui-label [text]="ProPlanta:fc3_weatherDay"></ftui-label>
<ftui-label [text]="ProPlanta:fc3_tempMax" unit="°C"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Wetter und Entsorgung habe ich schon hin bekommen dank der Information von mr_petz.
Ich bin beim nächsten Thema -> Fenster. Wie löst ihr das Problem auf der Startseite mit einem Blick zu sehen ob alle Fenster zu sind?
ZitatWie löst ihr das Problem auf der Startseite mit einem Blick zu sehen ob alle Fenster zu sind?
Wenn Du nur eine einzelne Info willst, die anzeigt, ob alle Fenster zu sind, würde ich das wie folgt machen:
1) FHEM Structure (https://wiki.fhem.de/wiki/Structure (https://wiki.fhem.de/wiki/Structure)) anlegen, hier ein Beispiel:
defmod st_fenster structure allWindows window_map <hier alle fensterkontakte rein>
attr st_fenster clientstate_behavior relative
attr st_fenster clientstate_priority open close <-- hier den status rein, der in Summe Priorität haben soll (ja nachdem, was Deine devices so liefern)
2) den "state" des devices "st_fenster" verwenden, um in FTUI ein Icon oder ein Label entsprechend zu steuern.
VG, Andreas
@HoTi
Noch ein Hinweis/Tip für dich:
man kann auch variablen einem content übergeben und mit Bsp.: {{value}} aufrufen.
Das ist bei Copystrecken sinnvoll und damit spart man sich das mehrfache schreiben der Devices bei gleichen Layout und man schreibt bei Änderung nur einmal um.
Bsp:
device wird gesetzt:
<ftui-content file="content/wetter.html" device="Proplanta"></ftui-content>
und der Aufruf im content:
<ftui-label [text]="{{device}}:tempMin" size="5" unit="°C" class="thin"></ftui-label>
<ftui-label [text]="{{device}}:tempMax" size="10" unit="°C" class="thin"></ftui-label>
LG
Im dem Zusammenhang, möchte ich hier kurz meine 4-Tages Wetteranzeige teilen.
Basiert auf einer Lösung die weiter vorne mal ohne "ftui-content" gepostet wurde.
Das gestaltet den Code im index.html extrem kurz und ermöglicht ganz einfach den Namen der Proplanta Device (meine heisst "Wetter") nur dort zu ändern.
<ftui-grid-tile row="8.5" col="8" height="4" width="7" shape="round">
<header>Wetter</header>
<ftui-row>
<ftui-content file="wetter_day.html" Label="Heute" Device="Wetter" Day="0" Color="orange"></ftui-content>
<ftui-content file="wetter_day.html" Label="Morgen" Device="Wetter" Day="1" Color="gray"></ftui-content>
<ftui-content file="wetter_day.html" Label="Tag3" Device="Wetter" Day="2" Color="gray"></ftui-content>
<ftui-content file="wetter_day.html" Label="Tag4" Device="Wetter" Day="3" Color="gray"></ftui-content>
</ftui-row>
</ftui-grid-tile>
Die einzelnen Tagesspalten und die Stundenansicht sind parametrisiert über die angehängten Dateien realisiert.
Cool ... bedeutet das, dass man das ftui-content auch "rekursiv" verwenden kann? Als ich das das letzte Mal versucht hatte, hat es leider nicht geklappt. Ist das was Neues?
VG, Andreas
Was wurde an den Popups geändert.
Seit dem letzten Update funktionieren sie nicht mehr.
Spiele ich die alte "popup.component.js" wieder ein, funktioniert es.
<!-- Keller -->
<ftui-grid-tile row="1" col="23" height="4" width="4" shape="round">
<header>Kellertür</header>
<ftui-icon popup-target="pop1" class="size-3" [name]="Keller_Status:cmd | map('1|4: fts_door_open, `.*`: fts_door')"
[color]="Keller_Status:cmd | map('1|4: red, 2|5: yellow, 3|6: green')"></ftui-icon>
</ftui-grid-tile>
<ftui-popup id="pop1" shape="round" timeout="15" height="250px" width="500px">
<header>Kellertür</header><br>
<table width="100%" align="center">
<tr height="90px" align="center">
<td width="33%"><ftui-button [(value)]="Keller_Status" states="cmd_6" direction="vertical" color="current" fill="none">
<ftui-icon name="fts_door" [color]="Keller_Status:cmd | map('3|6: green, `.*`: dark')"
[class-name]="Keller_Status:cmd | map('6: blink size-8, `.*`: size-8')"></ftui-icon></ftui-button></td>
<td width="33%"><ftui-button [(value)]="Keller_Status" states="cmd_5" direction="vertical" color="current" fill="none">
<ftui-icon name="fts_door" [color]="Keller_Status:cmd | map('2|5: yellow, `.*`: dark')"
[class-name]="Keller_Status:cmd | map('5: blink size-8, `.*`: size-8')"></ftui-icon></ftui-button></td>
<td width="33%"><ftui-button [(value)]="Keller_Status" states="cmd_4" direction="vertical" color="current" fill="none">
<ftui-icon name="fts_door_open" [color]="Keller_Status:cmd | map('1|4: red, `.*`: dark')"
[class-name]="Keller_Status:cmd | map('4: blink size-8, `.*`: size-8')"></ftui-icon></ftui-button></td>
</tr>
<tr height="70px" align="center">
<td><ftui-label size="4">verschlossen</ftui-label></td>
<td><ftui-label size="4">entriegelt</ftui-label></td>
<td><ftui-label size="4">offen</ftui-label></td>
</tr>
</table>
</ftui-grid-tile>
</ftui-popup>
@stefan-dd
Eine Seite weiter vorn steht die Antwort auf deine Frage:
https://forum.fhem.de/index.php/topic,115259.msg1246689.html#msg1246689
LG
Zitat von: mr_petz am 20 November 2022, 20:53:51
Es muss nur ordentlich kommuniziert werden!
Das hoffe ich auch. Der WAF war erstmal im Keller!
Gruß
Sailor
Hallo zusammen,
wie bekomme ich die Funktion "@hold" ans Laufen? Ich hatte schon die Anmerkungen zu "popup-target" gelesen und dann mal mit @click rumgespielt, was soweit dann auch funktioniert. Nur möchte ich eben die Hold Funktion, also ein verzögertes Anzeigen der Popup Funktion, einrichten. Hier mein Code, der mit @click, mit @hold leider aber nicht....
<ftui-grid-tile row="1" col="1" height="1" width="1" shape="round">
<ftui-grid-header>Bulli Lampen</ftui-grid-header>
<ftui-button (value)="MQTT2_myMQTT2" fill="none" @hold="long_press.open()">
<ftui-icon name="lightbulb" size="10" [color]="MQTT2_myMQTT2 | map('on:primary, off:medium')"></ftui-icon>
</ftui-button>
</ftui-grid-tile>
<ftui-popup id="long_press">
<header>LongPress Popup</header>
<ftui-label>More settings after Long Press ...</ftui-label>
</ftui-popup>
Gruss Peer
Wo soll die Funktion @hold herkommen?
von der example Seite ....
-> https://knowthelist.github.io/ftui/www/ftui/examples/button.html
und dann der Source Code:
<ftui-grid-tile row="4" col="4" height="1" width="1" shape="round">
<ftui-grid-header>LONG PRESS</ftui-grid-header>
<ftui-button [(value)]="GalerieLicht" fill="none" @hold="long_press.open()">
<ftui-icon name="lightbulb" size="3" [color]="GalerieLicht | map('on:primary, off:medium')"></ftui-icon>
</ftui-button>
</ftui-grid-tile>
<ftui-popup id="long_press" timeout="0">
<header>LongPress Popup</header>
<ftui-label>More settings after Long Press ...</ftui-label>
</ftui-popup>
Ok ging an mir vorbei.
funktioniert bei mir...
Lange (0.5sec) drücken und das popup geht auf...
Hast du das Update schon gemacht?
Und am besten auch den Cache vom Browser leeren...
LG
Edit:
Ahh... jetzt verstehe ich warum @setstate das popup-target eliminiert hat...
thx, das hat geholfen ... es ist mein Bulli FHEM, da habe ich glatt noch keine Updates eingespielt....
ich teste mich ja gerade durch....und bin über den "hueslider" gestolpert. Hierzu gab es auch schon mal einen Eintrag im Thread hier...leider ohne eine Antwort auf die Antwort von mr_petz, wenn ich es richtig gelesen habe.
hueSlider schmeisst leider nur "rgb: FFFFFF" raus (laut Logfile), egal wohin man klickt. Hier mein Code dazu:
<ftui-colorpicker size="small" layout="hueSlider"
(hex)="replace('#','') | MQTT2_myMQTT2:rgb"
[hex]="MQTT2_myMQTT2:rgb">
</ftui-colorpicker>
Tausche ich den hueSlider mit einem wheel aus (also einfach ohne Layout Definition), dann geht es.
Noch eine Randfrage: wie kann ich die Längen, Radien etc. der Wheels und Slider beeinflussen? Das "size" im Code bleibt ohne Auswirkung.
Gruss Peer
@fremitus
Ich zitiere mich mal für dein Belangen:
Zitat von: mr_petz am 08 November 2022, 19:51:58
Hi Peer,
in dieser Konstellation kann man bei genau 0,51,102,153,204 und 255 (254) brightness den hex einstellen:
<ftui-colorpicker layout="wheel,valueSlider"
[hex]="MQTT2_myMQTT2:hex"
[brightness]="MQTT2_myMQTT2:bri | divide(2.55) | round(0)"
(hex)="replace('#','') | MQTT2_myMQTT2:hex"
(brightness)="multiply(2.55) | toInt() | MQTT2_myMQTT2:bri">
</ftui-colorpicker>
Wird an den Berechnungen liegen? Warum das so ist k.A.
LG
LG
Hi mr_petz,
hmmm...ich habe ja jetzt nur den Slider alleine stehen und nicht mehr zwei Layouts in einem Element. Es ändert sich leider nicht.
<ftui-popup position="page" width="300px" height="300px" id="long_press" timeout="0" --popup-border-radius: 0.5em>
<header><b>Farbe</b></header>
<ftui-colorpicker size="small" layout="hueSlider"
(hex)="replace('#','') | MQTT2_myMQTT2:rgb"
[hex]="MQTT2_myMQTT2:rgb">
</ftui-colorpicker>
</ftui-popup>
Meine von dir zitierte Frage konnte ich inzwischen so lösen:
<ftui-popup position="page" width="300px" height="300px" id="long_press" timeout="0" --popup-border-radius: 0.5em>
<header><b>Farbe</b></header>
<ftui-colorpicker size="small"
(hex)="replace('#','') | MQTT2_myMQTT2:rgb"
[hex]="MQTT2_myMQTT2:rgb">
</ftui-colorpicker>
<ftui-colorpicker layout="valueSlider"
[brightness]="MQTT2_myMQTT2:pct | toInt()"
(brightness)=" toInt() | MQTT2_myMQTT2:pct"
</ftui-colorpicker>
</ftui-popup>
Langsam komme ich mit dem Aufbau meines neuen Dashboards voran. Eine Sache die mir aufgefallen ist:
- Ich will beim Wert 0 und 1 die Tonne hüpfen lassen. Komischerweise hüpft sie auch beim Wert 11 - bei 12 nicht
- Zu dem zeige ich die aktuellen Resttage mit label an - gibt es da eine schönere Variante wie früher mit "warn"?
<ftui-icon name="trash-o" size="3" color="blue"
[class-name]="myAbfall:Papiertonne | map('`0|1`:hop warn,`.*`:')">
<ftui-label [text]="myAbfall:Papiertonne"></ftui-label>
</ftui-icon>
Die Lösung ist zwar irgendwo abgeschrieben, aber klappt gut.
Da ich zwei Tonnen abbilden muss, mit ftui-content in extra Datei
<ftui-grid-tile row="1" col="4" height="3" width="3">
<header>Tonnen</header>
<ftui-row>
<ftui-content file="abfall.html" Reading="Papier" Farbe="my-green" Icon="trash"></ftui-content>
<ftui-content file="abfall.html" Reading="Restmuell" Farbe="gray" Icon="trash"></ftui-content>
</ftui-row>
</ftui-grid-tile>
Danke für den Tipp mit ftui-badge. Genau das habe ich gesucht. Zur ersten Frage aber:
- Warum hüpft die Tonne auch beim Reading 11, ich bin davon ausgegangen, dass ich diesen Wert mit `.*` ausschließe
[class-name]="myAbfall:Papiertonne | map('`0|1`:hop,`.*`:')"
Schau hier. Mit step ist es besser:
https://forum.fhem.de/index.php/topic,117545.msg1246296.html#msg1246296
LG
Farbproblem mit ftui-meter:
Ich habe bei ftui-meter das Problem, dass der Balken manchmal grau in grau dargestellt wird. Man kann also die Größe des Balkens schon erahnen - gezeichnet wird er - aber eben nicht mit der entsprechenden Farbe:
<ftui-meter [value]="HM_Sen_Wa_Od:level" [color]="HM_Sen_Wa_Od:level | step('80:primary, 60:warning, 30:alert')" min="0" max="100" >
</ftui-meter>
Das passiert unabhängig vom Wert. Schaut erst gut aus, dann neu laden und plötzlich grau. Mach ich was falsch oder ist das ein Bug?
Wenn du kein min und max mitgiebst, dann scheint es zu funktionieren:
<ftui-meter [value]="HM_Sen_Wa_Od:level" [color]="HM_Sen_Wa_Od:level | step('30:alert, 60:warning, 80:primary')">
</ftui-meter>
Standard ist im meter min=0 und max=100
LG
Edit:
Man darf kein min="0" angeben sonst geht es nicht.
Mit min="-1" geht es....
also min>0 oder min<0 angeben...
Danke. Scheint zu klappen. Dann aber wohl trotzdem ein Bug...
Sollte ich das auf github melden?
Kannst du machen, aber @setstate liest hier eigentlich immer mit....
LG
ich bin schon seit Tagen auf der Suche nach den Gründen für das komische Verhalten beim ftui-meter. Besonders bei mir auf einem Android Tablet. Ich dachte schon, das verursachte die css Animation. Irgendwas passt aber immer nicht nicht.
Weiß jemand an was es liegen kann, dass die Icons als "undefined" angegeben werden, wenn man den Link mit user:password öffnet? Ich starte mein Display im Kiosk Modus und dem Link:
http://user:password@192.168.xxx.xxx:xxxx/fhem/ftui/index.html
Angezeigt werden nur die PNGs beim Wetter, nicht aber die internen oder über "path" verwendeten openautomation SVGs
Öffne ich die Seite normal muss ich im Popup Benutzer und Passwort angeben und die Icons werden wie üblich angezeigt.
Oft starte ich das Display jetzt nicht neu, dass ich die Zugangsdaten angeben muss, hat mich aber doch verwundert
http://user:pass@ wird von Browsern nicht mehr unterstützt.
Vielleicht hilft dir das:
BasicAuthExpiry
https://mayach.de/fhem-eingeloggt-bleiben-basicauthexpiry/
LG
Wie schafft man es die Beschriftung eines unsichtbaren Buttons unten anzuzeigen, also näher zu den zugehörigen Steuerelementen. Die Beschriftung ist der Schalter um die Automatik Ein- oder Auszuschalten.
Im Anhang ein Bildauszug. Hier mein Code aus dem Template:
<ftui-cell height="12%">
<ftui-row align-item="bottom">
<ftui-button fill=""
(value)="{{device}}:auto toggle"
[color]="{{device}}:Automatik | map('on: green, off: red')">{{name}}
</ftui-button>
</ftui-row>
<ftui-row>
<ftui-button (value)="{{device}}" states="auf" direction="vertical" color="current" fill="none">
<ftui-icon name="angle-up" class="size-50%" height="90%"></ftui-icon>
</ftui-button>
<ftui-icon [name]="{{device}}:Status | map('0%:window-shutter-open, 50%:window-shutter-open, 100%:window-shutter')"
[color]="{{device}}:Status | step('0: green, 50: yellow, 100: green')">
</ftui-icon>
<ftui-button (value)="{{device}}" states="zu" direction="vertical" color="current" fill="none">
<ftui-icon name="angle-down" class="size-50%" height="90%"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-cell>
Zitat von: setstate am 26 November 2022, 20:07:54
ich bin schon seit Tagen auf der Suche nach den Gründen für das komische Verhalten beim ftui-meter. Besonders bei mir auf einem Android Tablet. Ich dachte schon, das verursachte die css Animation. Irgendwas passt aber immer nicht nicht.
Ich habe auch mal bissl gespielt. Das liegt wohl doch an der 0.4s in der transition. Nimmt man nur die 0.4s raus oder schreibt stattdessen 0s geht es.???
Oder wird [color] zu spät (0.4s) übergeben??? Es reicht ja schon in der Browserconsole das aus- und anschalten der mask und dann wird auch der color gesetzt... und es scheint ja nur bei gesetzten min="0" sich so zu verhalten...
Gibt es alternativen für das linear transitition?
LG
@Medel: Das geht aktuell nicht. Button kann aktuell nur "size", da wird aber die Schrift auch mit kleiner. Ich müsste dem Button noch ein "height" Attribute spendieren, dann würde das gehen. ich schaue mal ...
<ftui-button fill="" margin="0 0 -1em 0"
oder in pixel
<ftui-button fill="" margin="0 0 -10px 0"
@setstate
Wenn du in der updateBar() das als Zwischenlösung angibst:
this.bar.style[direction] = value===0 ? (value + 0.1) + '%': value + '%';
dann geht es sofort.
Es scheint vielleicht transition mit width=0% im bar ein Problem zu haben wenn value beim initialisieren den Wert 0 hat???
Und wie gesagt, mit min="-1" geht es auch sofort (ohne der Änderung)...
LG
Edit:
Oder es liegt an deiner scale() Berechnung...
Wenn ich da so definiere:
const value = scale(limitedValue, this.min, this.max, 0.1, 100);
geht es auch...
Wenn du magst kann ich dir den meter zu transform:translate umbauen.. Bsp:
https://codepen.io/mcraiganthony/pen/waaeWO
Hier funktioniert es sofort auch bei wert 0...
OK habs mal gemacht (unsortiert..):
.progress-bar {
border-radius: var(--meter-border-radius, 1em);
overflow: hidden;
transform: translateZ(0);
height: 1em;
transition: all 400ms ease-out;
background: var(--meter-bar-color, var(--color-base, #20639b));
position:relative;
top:0;
left:0;
right:0;
bottom:0;
}
hier brauchst du eigentlich auch kein ::before mehr...
Achso.. und allen noch einen schönen 1.Advent :D
Ebenfalls einen schönen 1. Advent.
Ich hätte da noch ein Thema mit ftui-knob.
Das nutze ich um den aktuellen Stromverbrauch des Hauses zu visualisieren. Damit da jetzt eine einigermassen sinnvolle Darstellung erfolgt, wollte ich "max" auf 3000 Watt begrenzen.
Nur leider steht dann bei einem größeren Verbrauch (wenn halt mal kurzfristig mehr zusammenkommt) eben auch genau 3000 als Zahl dort. Ich habe bei mir schon Peaks von 10000 Watt gehabt (Waschmaschinen+Spülmaschine+Ofen+Herdplatten - kommt vor...). Bei max=10000 wird aber die graphische Darstellung sinnfrei.
Ich würde es jetzt passender finden, wenn die Zahl immer die Realität wiederspiegeln würde, auch wenn die graphische Darstellung am Maximum angekommen ist.
Meinungen?
In der Version2 gab es das "scrolllabel", gibt es die Möglichkeit einen Lauftext zu erzeugen auch bei der Version 3? Man kann zwar "scroll" einfügen aber dann werden ggf nur die Balken angezeigt
Ich könnte mal wieder Hilfe für einen Schönheitsfehler gebrauchen. Folgenden Code habe ich hinterlegt, dass ich mein Gäste-Wlan einschalte:
<ftui-button [(value)]="myfritz:guestWlan" [fill]="myfritz:box_guestWlan | map('off:outline, on:solid')">
<ftui-icon path="../images/openautomation" name="it_router" size="3">
<ftui-badge [text]="myfritz:box_guestWlanRemain"></ftui-badge>
</ftui-icon>
</ftui-button>
Leider ist der erste klick immer "set myfritz guestWlan on" auch wenn ich das Wlan bereits anderweitig eingeschaltet habe. Angezeigt wird ein aktives Wlan korrekt. Schöner wäre wenn er den Zustand wüsste und dann den gegensätzlichen Schaltbefehl gibt.
Ähnliches Problem habe ich bei meinen Shellys:
<ftui-button [value]="Shelly_PC:relay" (value)="set Shelly_PC toggle" [fill]="Shelly_PC:relay | map('off:outline, on:solid')" shape="circle" size="large">
<ftui-icon path="../images/openautomation" name="it_pc" size="2"> <ftui-badge [text]="Shelly_PC:statEnergyDay"></ftui-badge>
</ftui-icon>
</ftui-button>
Der Status wird mittels Reading "Shelly_PC:relay" als on oder off gegeben geschalten wird aber mit "set Shelly_PC on/off/toggle". Ich hab jetzt einfach mal "toggle" gewählt. Dadurch wird ihm zwar ein "set Shelly_PC toggle on/off" (on/off ist dann zu viel) übergeben, aber er Schaltet wenigstens
@mkriegl
zur Fritzbox:
Wie hast du sie eingebunden?
bei [fill] hast du das Reading box_guestWlan mit on/off und bei [(value)] guestWlan???
zum Shelly:
Bei mir werden die Readings state, POWER und Topicname in Großbuchstaben geschrieben.?
Also OFF und ON...
Ein set im (value) ist auch nicht nötig. du kannst mit states="toggle" im button arbeiten
Der setbefehl ist kleingeschrieben... also set shelly on
so vielleicht:?
<ftui-button [value]="Shelly_PC | map('ON:on,OFF:off')" (value)="Shelly_PC" [fill]="Shelly_PC | map('OFF:outline, ON:solid')" shape="circle" size="large">
<ftui-icon path="../images/openautomation" name="it_pc" size="2"> <ftui-badge [text]="Shelly_PC:statEnergyDay"></ftui-badge>
</ftui-icon>
</ftui-button>
ein List von beiden ist hier hilfreich...
LG mr_petz
@mr_petz
1: Hab nochmal rein geschaut. Der Befehl heißt wirklich "set guestWlan on/off" Nur das Reading heißt "box_guestWlan"
Damit geht es dann:
<ftui-button [value]="myfritz:box_guestWlan" (value)="myfritz:guestWlan" [fill]="myfritz:box_guestWlan | map('off:outline, on:solid')">
Internals:
APICHECKED 1
CFGFN ./FHEM/Fritzbox.cfg
FUUID
HOST 192.168.xxx.1
INTERVAL 300
LUAQUERY 1
M3U_LOCAL ./www/images/myfritz.m3u
M3U_URL unknown
MODEL FRITZ!Box xxxx
NAME myfritz
NR xxx
REMOTE 1
SECPORT xxx
STATE WLAN: on gWLAN: on (Remain: 1440 min)
TELNET 0
TR064 1
TYPE FRITZBOX
WEBCM 0
eventCount 237
Helper:
DBLOG:
box_cpuTemp:
logdb:
TIME 1670179714.25076
VALUE 64
box_guestWlan:
logdb:
TIME 1670179763.54141
VALUE on
box_guestWlanRemain:
logdb:
TIME 1670179763.54141
VALUE 1440
box_powerRate:
logdb:
TIME 1670177314.27314
VALUE 28
box_rateDown:
logdb:
TIME 1670179714.25076
VALUE 735.291
box_rateUp:
logdb:
TIME 1670179714.25076
VALUE 18.272
state:
logdb:
TIME 1670179760.71753
VALUE guestWlan on
READINGS:
2022-12-04 19:48:34 alarm1 Wecker 1
2022-12-04 19:48:34 alarm1_state off
2022-12-04 19:48:34 alarm1_target FON 1
2022-12-04 19:48:34 alarm1_time 00:00
2022-12-04 19:48:34 alarm1_wdays daily
2022-12-04 19:48:34 alarm2 Wecker 2
2022-12-04 19:48:34 alarm2_state off
2022-12-04 19:48:34 alarm2_target FON 1
2022-12-04 19:48:34 alarm2_time 00:00
2022-12-04 19:48:34 alarm2_wdays daily
2022-12-04 19:48:34 alarm3 Wecker 3
2022-12-04 19:48:34 alarm3_state off
2022-12-04 19:48:34 alarm3_target FON 1
2022-12-04 19:48:34 alarm3_time 00:00
2022-12-04 19:48:34 alarm3_wdays daily
2022-12-04 19:48:34 box_connect 5
2022-12-04 19:48:34 box_cpuTemp 64
2022-12-04 19:48:34 box_dect on
2022-12-04 19:48:34 box_fwVersion xxx.xx.xx
2022-12-04 19:49:23 box_guestWlan on
2022-12-04 19:48:34 box_guestWlanCount 0
2022-12-04 19:49:23 box_guestWlanRemain 1440
2022-12-04 19:48:34 box_ipExtern xx.xx.xx.xx
2022-12-04 00:18:30 box_model FRITZ!Box [avm]
2022-12-04 19:48:34 box_moh default
2022-12-04 19:48:34 box_powerRate 28
2022-12-04 19:48:34 box_rateDown 735.291
2022-12-04 19:49:23 box_rateDown_real 2.45097
2022-12-04 19:48:34 box_rateUp 18.272
2022-12-04 19:49:23 box_rateUp_real 0.0609066666666667
2022-12-04 19:48:34 box_stdDialPort allFons
2022-12-04 19:48:34 box_tr064 on
2022-12-04 19:48:34 box_tr069 on
2022-12-04 19:48:34 box_wlanCount 12
2022-12-04 19:49:23 box_wlan_2.4GHz on
2022-12-04 19:49:23 box_wlan_5GHz on
2022-12-04 19:48:34 dect1 - mad -
2022-12-04 19:48:34 dect1_fwVersion 0.00
2022-12-04 19:48:34 dect1_intRingTone HandsetDefault
2022-12-04 19:48:34 dect1_intern xxx
2022-12-04 19:48:34 dect1_manufacturer x
2022-12-04 19:48:34 dect1_model 0x00
2022-12-04 19:48:34 fon1 Telefon
2022-12-04 19:48:34 fon1_intern 1
2022-12-04 19:48:34 fon2 Telefon
2022-12-04 19:48:34 fon2_intern 2
2022-12-04 19:48:34 gsm_internet 0
2022-12-04 19:49:23 lastReadout 7 values captured in 2.80 s
2022-12-04 19:48:34 mac_00_23_xx_xx_xx_xx xxx
2022-12-04 19:49:23 state WLAN: on gWLAN: on (Remain: 1440 min)
2022-12-04 19:48:34 tam1 Anrufbeantworter
2022-12-04 19:48:34 tam1_newMsg 0
2022-12-04 19:48:34 tam1_oldMsg 0
2022-12-04 19:48:34 tam1_state on
2022-12-04 19:48:34 user01 (guest)
2022-12-04 19:48:34 user01_thisMonthTime 0:00
2022-12-04 19:48:34 user01_todaySeconds 0
2022-12-04 19:48:34 user01_todayTime 0:00
2022-12-04 19:48:34 user01_type Guest
2022-12-04 19:48:34 userTicket01 622527
fhem:
LOCAL 0
definedHost undefined
is_double_wlan 1
lastHour 0
modulVersion $Date: 2020-06-06 13:11:54 +0200 (Sat, 06 Jun 2020) $
radioCount 40
sid 4
sidTime 1670179763.53965
610:
brand x
id 1
model 0x00
userId 1
landevice:
192.168.xxx.1 maxbox
radio:
xx
wlanDevice:
XX_XX_XX_XX_XX_XX:
rssi 0
speed 0
speed_rx 0
helper:
TimerCmd myfritz.Cmd
TimerReadout myfritz.Readout
Attributes:
allowTR064Command 1
boxUser fritzxxx
event-on-change-reading box_cpuTemp,box_guestWlan,box_guestWlanRemain,box_powerRate,box_rateDown,box_rateUp
fritzBoxIP 192.168.xxx.1
group FritzBox
icon it_router
room FritzBox
userReadings box_rateDown_real {ReadingsVal("myfritz","box_rateDown",0)/300.0 },box_rateUp_real {ReadingsVal("myfritz","box_rateUp",0)/300.0}
2: ich habe jetzt nur (value)="Shelly_PC" angepasst und damit scheint es zu passen. Wenn ich aber mal wieder am PC bin, schau ich mir deinen Code genauer an
Internals:
CFGFN ./FHEM/Shelly.cfg
DEF 192.168.XXX.XX
DURATION 0
FUUID 63272805-f33f-d495-60fb-15f016e471773b6f
INTERVAL 300
NAME Shelly_PC
NR 406
SHELLYID shellyplug-s-D96EDA
STATE off
TCPIP 192.168.xxx.xx
TYPE Shelly
eventCount 148
Helper:
DBLOG:
energy:
logdb:
TIME 1670177285.09166
VALUE 6167.9
inttemp:
logdb:
TIME 1670179985.90487
VALUE 24.44
power:
logdb:
TIME 1670176984.05097
VALUE 0
relay:
logdb:
TIME 1670176983.01712
VALUE off
statEnergyDay:
logdb:
TIME 1670180395.10671
VALUE 425.6
state:
logdb:
TIME 1670176982.96977
VALUE toggle off
READINGS:
2022-11-08 14:11:33 cloud enabled(connected)
2022-12-04 19:08:05 energy 6167.9
2022-11-08 14:06:31 firmware v1.12.1
2022-12-04 19:58:05 inttemp 24.77
2022-12-04 00:18:15 network <html>connected to <a href="http://192.168.xxx.xx">192.168.xxx.xx</a></html>
2022-12-04 19:03:04 overpower 0
2022-12-04 19:03:04 power 0
2022-12-04 19:03:04 relay off
2022-12-04 19:59:55 statEnergy Hour: 0.0 Day: 425.6 Month: 1245.5 Year: 5966.5 (since: 2022-11-09 )
2022-12-04 19:59:55 statEnergyDay 425.6
2022-12-03 23:59:55 statEnergyDayLast 272.0
2022-12-04 19:59:55 statEnergyHour 0.0
2022-12-04 19:59:55 statEnergyHourLast 3.8
2022-12-04 19:59:55 statEnergyLast Hour: 3.8 Day: 272.0 Month: 4721.0 Year: - (since: 2022-11-09 )
2022-12-04 19:59:55 statEnergyMonth 1245.5
2022-11-30 23:59:55 statEnergyMonthLast 4721.0
2022-12-04 19:59:55 statEnergyYear 5966.5
2022-12-04 19:59:55 statPowerDay Min: 0.00 Avg: 20.73 Max: 61.91
2022-12-03 23:59:55 statPowerDayLast Min: 0.00 Avg: 11.28 Max: 80.87
2022-12-04 19:59:55 statPowerMonth Min: 0.00 Avg: 13.27 Max: 100.06
2022-11-30 23:59:55 statPowerMonthLast Min: 0.00 Avg: 9.06 Max: 105.56 (since: )
2022-12-04 19:59:55 statPowerYear Min: 0.00 Avg: 9.68 Max: 105.56 (since: )
2022-12-04 19:03:03 state off
helper:
_98_statistics Shelly_Statistics
Attributes:
event-min-interval power:900
event-on-change-reading relay,inttemp:1,power,energy,statEnergyDay
event-on-update-reading statEnergyDay
group Shelly
icon it_pc
interval 300
model shellyplug
room Shelly
Danke schon mal
Zitat von: mkriegl am 04 Dezember 2022, 20:11:07
@mr_petz
1: Hab nochmal rein geschaut. Der Befehl heißt wirklich "set guestWlan on/off" Nur das Reading heißt "box_guestWlan"
Dann solltest du hier auch die Bananas aus der Box holen:
<ftui-button [value]="myfritz:box_guestWlan" (value)="myfritz:guestWlan" [fill]="myfritz:box_guestWlan | map('off:outline, on:solid')">
Zitat
2: ich habe jetzt nur (value)="Shelly_PC" angepasst und damit scheint es zu passen. Wenn ich aber mal wieder am PC bin, schau ich mir deinen Code genauer an
Da könntest du doch auf [(value)]="Shelly_PC" gehen?
LG mr_petz
Danke dir
Fritzbox passt jetzt. Nach meinem Kommentar hatte ich nochmal nachgedacht und es so umgesetzt wie du geschrieben hast ;D
Shelly teste ich dann nochmal, aber denke bezogen auf state hast du recht ;)
Gruß .. Max
Zitat von: mkriegl am 04 Dezember 2022, 20:32:02
Danke dir
Fritzbox passt jetzt. Nach meinem Kommentar hatte ich nochmal nachgedacht und es so umgesetzt wie du geschrieben hast ;D
Nachdenken ist immer gut... :D
Meistens, ja. Hab mich heute nur zu wenig bewegt und war zu lang am PC - Kopf raucht ;D
Deine Thermostate muss ich mir jetzt irgendwann mal zu Gute nehmen. Hab bei mir nur aktuell die Situation zwei Stellventile im Wohnzimmer zu haben und weiß nicht ob man für battery und actuator beide anziegen lassen kann. Battery natürlich dann auch für Thermostat und Stellventil - da weiß ich nicht mehr ob es ein Beispiel gab.
Außerdem sind meine battery Stände aktuell noch in Volt.
Ansonsten haben die aber schon cool ausgeschaut. Chapeau
Hallo euch allen,
mal ne Frage an die Spezis: Kann es sein das die Funktion "@click" im Headerbereich der index.html nicht funkioniert? Bekomme hier die Fehlermeldung "TypeError: DWDWarnPop.open is not a function".
Ist es möglich hier ein popup aufzurufen, ich würde gerne im header ein Warnsymbol anzeigen falls eine Unwetterwarnung ansteht und wenn ich auf das icon klicke geht ein popup auf in dem ich die Details der Wetterwarnungen sehe.
Habe das zur Zeit so definiert:
<header>
<ftui-row>
<ftui-column width="15%"><ftui-clock format="hh:mm:ss" class="size-3" color="warning"></ftui-clock></ftui-column>
<ftui-column width="5%">
<ftui-icon name="_warning"
@click="DWDWarnPop.open()"
[hidden]="NN_xx_SW_DWD:a_count | step('0:true, 1:false')" class="size-0">
<ftui-badge [text]="NN_xx_SW_DWD:a_count" class="size-0"></ftui-badge>
</ftui-icon>
</ftui-column>
<ftui-column><ftui-tab-title class="size-3"></ftui-tab-title></ftui-column>
<ftui-column width="20%"><ftui-clock format="eeee, DD. MMMM YYYY" class="size-3" color="warning"></ftui-clock></ftui-column>
</ftui-row>
</header>
Wie gesagt geht um die zweite column.
Gruß Markus
Hallo Markus,
ich vermute, dass @click zusammen mit einem Icon nicht funktioniert. Bei mir funktioniert es mit einem Button:
<ftui-column>
<ftui-cell>
<ftui-button [color]="DWD:a_count | step('-1:dark, 1:danger, 10:danger')"> <!-- Änderung 2022-12-03: wg. Aufruf PopUp -->
<ftui-icon size="3" path="../images/myicons" @click="DWDWarnPop.open()"
[name]="d_recentChOfRain | step('0:umbrella_closed, 41:umbrella_open')"
[color]="WetterProplanta:temperature | step('-50:violett, -5:blue, 5:white, 25:red')">
<ftui-badge color="white" [text]="DWD:a_count" size="1">
</ftui-badge>
</ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label scroll text-align="center" [text]="DWD:a_0_eventDesc"> </ftui-label>
</ftui-cell>
</ftui-column>
Dann muss du das PopUp noch einfügen, ob im Header oder im Body musst du ausprobieren.
<ftui-popup id="DWDWarnPop" timeout="0">
<ftui-label color="danger" slot="close" popup-close>Close</ftui-label>
<ftui-grid-tile row="10" col="3" height="3" width="7" padding="0">
<ftui-content file="dwd-warn_content.html"
device="DWD"
iconspath="icons/weather/wi"
dwdinterval="10">
</ftui-content>
</ftui-grid-tile>
</ftui-popup>
Gruß,
Matthias
P.S.: Das Thema ist hier m.E. besser aufgehoben: https://forum.fhem.de/index.php/topic,117858.0.html (https://forum.fhem.de/index.php/topic,117858.0.html)
Zitat von: MDietrich am 05 Dezember 2022, 04:19:55P.S.: Das Thema ist hier m.E. besser aufgehoben: https://forum.fhem.de/index.php/topic,117858.0.html (https://forum.fhem.de/index.php/topic,117858.0.html)
Neee, imho eigtl ein Thema hier, weil es um popup und nicht die Anzeige von DWD Warnungen (https://forum.fhem.de/index.php/topic,117858.0.html) geht.
Zitat von: meier81 am 04 Dezember 2022, 22:21:22Kann es sein das die Funktion "@click" im Headerbereich der index.html nicht funkioniert? Bekomme hier die Fehlermeldung "TypeError: DWDWarnPop.open is not a function".
Wo ist denn dein popup DWDWarnPop definiert? Die Funktion open() kommt von der popup.component.
Siehe Codeschnippsel von MDietrich:
<ftui-popup id="DWDWarnPop" timeout="0">
[...]
</ftui-popup>Du musst ein popup mit dem Inhalt aus DWDWarn definieren und dann kannst du dies öffnen. MDietrich zeigt, wie man es machen kann.
Ja, das es nicht direkt mit DWD zutun hat sondern mit der @click Funktion habe ich es auch hier gepostet.
Ich weiß auch nicht was hier gestern schief gelaufen ist, habe es zig mal probiert, ging nie. Eben heimgekommen, eure Posts gelesen, eigentlich wieder wie gestern eingebaut und geht.
Zur Info: Popup geht auch ohne Button einfach nur mit einem icon. Habe es jetzt bei mir so realisiert:
Mein Header-Bereich:
<header>
<ftui-row>
<ftui-column width="15%"><ftui-clock format="hh:mm:ss" class="size-3" color="warning"></ftui-clock></ftui-column>
<ftui-column width="5%">
<ftui-icon class="size-0" name="_warning" @click="DWDWarnPop.open()"
[hidden]="NN_xx_SW_DWD:a_count | step('0:true, 1:false')"></ftui-icon>
<ftui-badge [text]="NN_xx_SW_DWD:a_count"
[hidden]="NN_xx_SW_DWD:a_count | step('0:true, 1:false')" class="size-0">
</ftui-badge>
</ftui-column>
<ftui-column><ftui-tab-title class="size-3"></ftui-tab-title></ftui-column>
<ftui-column width="20%"><ftui-clock format="eeee, DD. MMMM YYYY" class="size-3" color="warning"></ftui-clock></ftui-column>
</ftui-row>
</header>
Und dann unter dem footer und vor dem Ende vom body:
<ftui-popup id="DWDWarnPop" timeout="0">
<header>DWD Wetterwarnungen</header>
<ftui-content file="content-dwd_warnung-grid.html"
device="NN_xx_SW_DWD"
iconspath="icons/weather/wi"
dwdinterval="5">
</ftui-content>
</ftui-popup>
Damit wäre dieses Problem geklärt, zum Thema Slider bin ich auch weitergekommen, das poste ich dann aber im DWD-Thread.
Gruß Markus
Moin!
Gibt es eine Möglichkeit, ein großes Popup aus einem kleinen Popup zu öffnen?
Ich habe ein 250 x 250 px großes Popup mit einem Thermostaten, aus dem ich gerne ein größeres Popup mit dem zugehörigen Chart öffnen würde.
Allerdings wird das "große" Popup innerhalb des kleinen angezeigt und alle Größen beziehen sich auf die Abmaße des kleinen Popups.
So sieht der Content des kleinen Popups aus:
<ftui-cell>
<ftui-label bold size="3" >{{DispName}}</ftui-label>
</ftui-cell>
<ftui-thermostat class="size-1"
@click="pop_TGraph{{Device}}.open()"
[(value)]="{{Device}}:desired-temp"
[temp]="{{Device}}:measured-temp"
[valve]="{{Device}}:1.LEVEL"
[humidity]="{{Device}}:humidity"
has-zoom
step="0.5"
min="10"
max="30"
unit=" °C"
></ftui-thermostat>
<ftui-popup position="page" id="pop_TGraph{{Device}}" width="80%" height="80%" timeout="0">
<header>Verlauf a {{DispName}}</header>
<ftui-content file="content/Diagramm_Heizung.html" Device="{{Device}}"></ftui-content>
</ftui-popup>
Hi Carsten,
Das funktioniert nur wenn du das 2.Popup ausserhalb des 1. platzierst...
Also nicht mit im Content des 1.Popup..., irgendwo im view
Edit:
alternativ so (diese Integration ist nur nicht so gewollt ;)):
mit in´s @click:
@click="pop_TGraph{{Device}}.open(); document.querySelector('#pop1').window.style.setProperty('display', 'contents');"
und in´s 2.popup:
@close="setTimeout(()=>{document.querySelector('#pop1').window.style.removeProperty('display')},0);"
hier bei click und 2.popup #pop1 mit deiner id des 1.popup (kleineren) ersetzen: #...
LG
Guten Abend,
ich hatte es hier mal kurz erwähnt, nun nochmal ausführlich:
Ich habe bei mir einen swiper im Einsatz, der funktioniert auch soweit einwandfrei. Wenn ich diesen nun aber mit einem "header" definierte funktioniert der header auch einwandfrei, der Sliderbalken unten wird aber vermutlich nach unten aus dem Fenster geschoben und ist nicht mehr sichtbar.
Hat da jemand eine Idee wie ich dies vermeiden bzw. anpassen kann das der Balken sichtbar bleibt?
Was hast du gebaut? Ein Swiper in einem popup? Oder was hat den header?
Das funktioniert eigentlich. Wenn man aber noch andere Elemente drin hat, kann sich das schnell verschieben.
Du musst uns schon zeigen, was nicht geht, damit wir es optimieren können.
Ein kleiner Test bei mir hat funktioniert:
<ftui-popup id="swiper_popup">
<header>Swiper in Popup</header>
<ftui-swiper id="swiper3" dots auto-play interval="3">
<ftui-image src="https://i.pravatar.cc/100?img=11" width="90px" shape="circle"></ftui-image>
<ftui-image src="https://i.pravatar.cc/100?img=12" width="90px" shape="circle"></ftui-image>
<ftui-image src="https://i.pravatar.cc/100?img=13" width="90px" shape="circle"></ftui-image>
<ftui-image src="https://i.pravatar.cc/100?img=14" width="90px" shape="circle"></ftui-image>
<ftui-image src="https://i.pravatar.cc/100?img=15" width="90px" shape="circle"></ftui-image>
</ftui-swiper>
</ftui-popup>
Hallo setstate,
ja, habe einen Swiper in einem popup. Es geht um yersinia´s DWD Anzeige, hab ich bei mir eingebaut und möchte hier gerne eine "Überschrift" haben. Egal ob ich aber das Ganze als popup definiere oder direkt im GRID lasse, der Sliderbalken wird mit header nicht angezeigt.
Hier mal meine Definitionen:
index.html
<ftui-column width="3%">
<ftui-icon class="size-0" name="_warning" @click="DWDWarnPop.open()"
[hidden]="NN_xx_SW_DWD:a_count | step('0:true, 1:false')"></ftui-icon>
<ftui-badge [text]="NN_xx_SW_DWD:a_count"
[hidden]="NN_xx_SW_DWD:a_count | step('0:true, 1:false')" class="size-0">
</ftui-badge>
</ftui-column>
<ftui-popup id="DWDWarnPop" timeout="0">
<header>DWD Wetterwarnungen</header>
<ftui-content file="content-dwd_warnung-grid.html"
device="NN_xx_SW_DWD"
iconspath="icons/weather/wi"
dwdinterval="5">
</ftui-content>
</ftui-popup>
Die Datei content-dwd_warnung-grid.html:
<style> @import "modules/dwd-warn/dwd-warn.css"; </style>
<div class="dwd-warn">
<!-- no warnings -->
<div ftui-binding class="dwd-warn-no-warning"
[style]="{{device}}:a_count | step('0:``, 1:`display:none;`')">
<font>Aktuell keine Warnmeldungen (Update</font>
<ftui-label [text]="{{device}}:a_time | toDate() | format('DD.MM. hh:mm')" style="" unit=").">
</ftui-label>
</div>
<!-- warnings -->
<ftui-swiper id="dwd-swiper"
auto-play
scrollbar
interval="{{dwdinterval}}"
[hidden]="{{device}}:a_count | step('0:true, 1:false')">
<!-- slides for warnings -->
<ftui-content id="dwd-swiper_slide_01" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="0" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 1:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 1:`margin-right: 0px;`, 2:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_02" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="1" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 2:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 2:`margin-right: 0px;`, 3:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_03" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="2" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 3:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 3:`margin-right: 0px;`, 4:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_04" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="3" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 4:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 4:`margin-right: 0px;`, 5:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_05" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="4" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 5:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 5:`margin-right: 0px;`, 6:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_06" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="5" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 6:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 6:`margin-right: 0px;`, 7:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_07" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="6" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 7:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 7:`margin-right: 0px;`, 8:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_08" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="7" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 8:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 8:`margin-right: 0px;`, 9:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_09" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="8" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 9:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 9:`margin-right: 0px;`, 10:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_10" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="9" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 10:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 10:`margin-right: 0px;`, 11:``')"></ftui-content>
</div> <!-- /dwd-warn -->
Die Datei content-dwd_warnung-slide.html:
<div class="dwd-warn-slide">
<!-- warning triangle -->
<div class="dwd-warn-triangle-box">
<svg viewBox="0 0 500 500" class="dwd-warn-triangle-svg">
<polygon ftui-binding
points="70,430 250,70 430,430"
[class]="{{device}}:a_{{warnnum}}_severity | map('Minor:`dwd-warn-triangle-svg-minor`, Normal:`dwd-warn-triangle-svg-normal`, Moderate:`dwd-warn-triangle-svg-moderate`, Severe:`dwd-warn-triangle-svg-severe`, Extreme:`dwd-warn-triangle-svg-extreme`')"
[style]="{{device}}:a_{{warnnum}}_areaColor | prepend('stroke: rgb(') | append(');')" />
<image ftui-binding
[href]="{{device}}:a_{{warnnum}}_event | getDwdWarnIcon() | prepend('{{iconspath}}/') | append('.svg')"
x="25%" y="37.5%" width="50%" height="50%" />
</svg>
</div> <!-- /triangle-box -->
<!-- warn content -->
<div ftui-binding
[class]="{{device}}:a_{{warnnum}}_severity | map('Minor:`dwd-warn-content-background-minor`, Normal:`dwd-warn-content-background-normal`, Moderate:`dwd-warn-content-background-moderate`, Severe:`dwd-warn-content-background-severe`, Extreme:`dwd-warn-content-background-extreme`')"
[style]="{{device}}:a_{{warnnum}}_areaColor | prepend('background-color: rgb(') | append(');')">
<ftui-label [text]="{{device}}:a_{{warnnum}}_eventDesc" class="dwd-warn-content-header"></ftui-label>
<ftui-label [text]="{{device}}:a_{{warnnum}}_description" class="dwd-warn-content-description"></ftui-label>
<div class="dwd-warn-content-footer">
<font>Gültig von</font>
<ftui-label [text]="{{device}}:a_{{warnnum}}_onset | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<font>bis</font>
<ftui-label [text]="{{device}}:a_{{warnnum}}_expires | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<div class="dwd-warn-content-updatetime">
<font>(Update:</font>
<ftui-label [text]="{{device}}:a_time | toDate() | format('DD.MM. hh:mm')" class="" unit=")">
</ftui-label>
</div>
</div>
</div> <!-- /content -->
</div> <!-- /warn-slide-->
Die Datei dwd-warn.css hängt als Anlage bei.
Gruß Markus
Hi Markus,
Du könntest es so in der content-dwd_warnung-slide.html machen:
<div class="dwd-warn" style="height:80%">
Edit: oder ohne style in der class dwd-warn position: absolute; in position: relative; ändern...
Da hier die class dwd-warn 100% Höhe haben möchte mit 'position: absolute;'...
@yersinia: 'position: relative;' dürfte hier angebrachter sein...
Edit2: und bzgl. popup ohne header müsste man z-index: -1; in der class dwd-warn mitgeben um das popup mittels x schließen zu können. das div legt sich über das x
LG
@setstate
Hast du auch nochmal den meter getestet? Ich hatte dir ja hier:
https://forum.fhem.de/index.php/topic,115259.msg1248030.html#msg1248030
eine mögliche Lösung gezeigt.
Mein Anliegen ist aber noch eins zum meter.
Kannst du bitte noch den margin vom .progress benutzerdefiniert machen? Mit margin ist der Abstand sehr groß...
Das scale Feature finde ich gut. Man kann sich dann eine Eigene Scala erstellen...
LG mr_petz
Zitat von: mr_petz am 09 Dezember 2022, 11:13:28
Hi Markus,
Du könntest es so in der content-dwd_warnung-slide.html machen:
<div class="dwd-warn" style="height:80%">
Edit: oder ohne style in der class dwd-warn position: absolute; in position: relative; ändern...
Da hier die class dwd-warn 100% Höhe haben möchte mit 'position: absolute;'...
@yersinia: 'position: relative;' dürfte hier angebrachter sein...
Edit2: und bzgl. ohne header müsste man z-index: -1; in der class dwd-warn mitgeben um das popup mittels x schließen zu können. das div legt sich über das x
LG
Hallo mr_petz,
vielen Dank, das war´s mit dem ändern von "absolute" in "relative". Inhalt wird weiterhin korrekt angezeigt, aber diesmal auch mit Sliderbalken.
Bezüglich dem "z-index: -1;" habe ich das auch ausprobiert (geht bei mir auch ohne, kann es ja mit dem x vom header einwandfrei schließen), dann habe ich aber wenn ich es nicht als popup sondern als normales GRID definiere ein leeres Feld, wird dann wahrscheinlich hinter das GRID gelegt.
Aber für mich alles gelöst, danke dir vielmals ;D
Gruß Markus
Zitat von: meier81 am 09 Dezember 2022, 13:52:50
...
Bezüglich dem "z-index: -1;" habe ich das auch ausprobiert (geht bei mir auch ohne, kann es ja mit dem x vom header einwandfrei schließen), dann habe ich aber wenn ich es nicht als popup sondern als normales GRID definiere ein leeres Feld, wird dann wahrscheinlich hinter das GRID gelegt.
Aber für mich alles gelöst, danke dir vielmals ;D
Gruß Markus
Das war auf keinen header im popup bezogen...
Zitat von: mr_petz am 09 Dezember 2022, 14:21:35
Das war auf keinen header im popup bezogen...
Alles klar ;)
Hallo!
Ich bin derzeit dabei meine Thermostatsteuerung nach diesem Beispiel aufzubauen:
https://forum.fhem.de/index.php/topic,115259.msg1113344.html#msg1113344
Hier nutze ich die Vorlage:
Zitat von: setstate am 22 Dezember 2020, 19:20:52
nach einem kleinen Umbau geht es jetzt so:
<ftui-row class="myspinner">
<ftui-cell>
<ftui-button [value]="dummy2"
(value)="add(-0.5) | dummy2"
states="$value"
fill="">
<ftui-icon class="size-1"
name="minus"
color="blue"></ftui-icon>
</ftui-button>
</ftui-cell>
<ftui-cell>
<ftui-label
[text]="dummy2"
[color]="dummy2 | map('5:blue, 20:mygreen, 23:red')"
class="size-4">
</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-button [value]="dummy2"
(value)="add(0.5) | dummy2"
states="$value"
fill="">
<ftui-icon class="size-1"
name="plus"
color="red"></ftui-icon>
</ftui-button>
</ftui-cell>
</ftui-row>
1.)
Lässt sich das Senden der neuen Temperatur verzögern? Wenn ich nun z.B. von 17°C auf 22°C springe, muss ich 10x tippen. D.h. es werden auch 10x Temperaturen übermittelt. Leider ist das MAX-System ja so in der Nachrichtenanzahl beschränkt, das ich dann schnell mehrere Minuten warten muss, bis alle Nachrichten übertragen sind.
2.) Ändere ich die Temperatur auf eine ganze Zahl, wird kurzzeitig z.B. 20°C angezeigt. Kann man hier auch ein Zwangskomma (20.0 also immer eine Kommastelle) einsetzen?
Gruß
Bismosa
Nabend.
Ich arbeite viel mit Variablen und ftui-content. Bis vor ein paar Wochen konnte ich Popups mit Variablen definieren, zu diesem Zeitpunkt war die Definition per "popup-target":
<ftui-icon class="size-3" name="fts_garage_door_manual" popup-target="popup-{{device}}">
und dann
<ftui-popup
id="popup-{{device}}"
.....etc.pp.
Die Definition der Popups erfolgt nun laut den Beispielen mit @click -
wenn ich meine bisherigen popup-target Definitionen durch @click ersetze, funktionieren Popups grundsätzlich (gut
Aber: allerdings scheint es nicht mehr möglich zu sein, Popups mit Variablen zu definieren:
<ftui-label
class="size-3"
color="light"
@click="pop{{device}}.open()">
{{name}}
</ftui-label>
und dann
<ftui-popup
id="pop{{device}}"
timeout="120"
position="page"
width="550px"
height="500px"
shape="round">
<ftui-row height="20%">
Die Definition von ftui-label und ftui-popup stecken in einem ftui-content mit Namen "firehd10/tiles/tile-5x2-HUE-CT.html", dieses wird aus einem Grid Tile so aufgerufen:
<ftui-grid-tile row="5" col="7" height="3" width="6">
<ftui-content file="firehd10/tiles/tile-5x2-HUE-CT.html"
device="hueBridge_EG_HUEDevice7"
name="Spot 4"
icon-on="light_downlight_wall_ru"
icon-off="light_downlight_wall_ru"
preset-1-name="ct 156" preset-2-name="ct 270" preset-3-name="ct 380" preset-4-name="ct 490"
preset-1-set="ct 156" preset-2-set="ct 270" preset-3-set="ct 380" preset-4-set="ct 490">
</ftui-content>
</ftui-grid-tile>
wie geschrieben: ohne die Variable {{device}} bei der Popup Definition ist alles gut.
Was muss ich ändern, damit sinngemäß dieser Code funktioniert?
Vielen Dank vorab
Ralph.
Zitat von: bismosa am 10 Dezember 2022, 18:22:42
1.)
Lässt sich das Senden der neuen Temperatur verzögern? Wenn ich nun z.B. von 17°C auf 22°C springe, muss ich 10x tippen. D.h. es werden auch 10x Temperaturen übermittelt. Leider ist das MAX-System ja so in der Nachrichtenanzahl beschränkt, das ich dann schnell mehrere Minuten warten muss, bis alle Nachrichten übertragen sind.
ja, mit debounce
<ftui-grid-tile row="5" col="1" height="1" width="1">
<header>Temp-Stepper</header>
<!-- set debounce="400" to gather multiple clicks before sending-->
<ftui-button [value]="ftuitest:thermo" value="20" (value)="add(0.5) | setreading ftuitest:thermo" states="$value" debounce="400" fill="">
<ftui-icon size="-2" name="plus"></ftui-icon>
</ftui-button>
<ftui-label [text]="ftuitest:thermo | fix(1)" value="20.0" unit=" °C"></ftui-label>
<ftui-button [value]="ftuitest:thermo" value="20" (value)="add(-0.5) | setreading ftuitest:thermo" states="$value" debounce="400" fill="">
<ftui-icon size="-2" name="minus"></ftui-icon>
</ftui-button>
</ftui-grid-tile>
@megadodopublications
Hi Ralph,
ich habe das mal nachgestellt und es funktioniert weiterhin:
grid:
<ftui-grid-tile row="5" col="7" height="3" width="6">
<ftui-content file="examples/contents/content-components2.html"
device="hueBridge_EG_HUEDevice7"
name="Spot 4"
icon-on="light_downlight_wall_ru"
icon-off="light_downlight_wall_ru"
preset-1-name="ct 156" preset-2-name="ct 270" preset-3-name="ct 380" preset-4-name="ct 490"
preset-1-set="ct 156" preset-2-set="ct 270" preset-3-set="ct 380" preset-4-set="ct 490">
</ftui-content>
</ftui-grid-tile>
content:
<ftui-label
class="size-3"
color="light"
@click="pop{{device}}.open()">
{{name}}
</ftui-label>
<ftui-popup
id="pop{{device}}"
timeout="120"
position="page"
width="550px"
height="500px"
shape="round">
<ftui-icon name="database"></ftui-icon>
</ftui-popup>
LG mr_petz
Zitat von: mr_petz am 10 Dezember 2022, 22:08:36
@megadodopublications
Hi Ralph,
ich habe das mal nachgestellt und es funktioniert weiterhin:
...
LG mr_petz
Danke dir!
Meine eigenen Analysen haben ergeben, daß die neue @click Variante bei mir an einigen Stellen sehr gut funktioniert, leider aber nicht überall. Ich vermute, dass der Fehler daher etwas tiefer liegt (zB ein hausgemachtes Problem, html Code etc.pp.). Zeitlich muss ich hier aber erstmal einen Break setzen und bin daher auf die popup Variiert "vor @click" zurück - damit es weitergeht und der WAF erhalten bleibt.
@setstate, @mr_petz: an dieser Stelle noch einmal vielen Dank für euren Einsatz und diese tolle Software!
meine im letzten Jahr bzw im April berichteten Probleme haben sich zwischenzeitlich "verflüchtigt"; FTUI startet zwar immer noch recht "behäbig", ist dann aber vollständig; verglichen mit meinen früheren Problemen sind alle Dummies etc da und enthalten die aktuellen Werte. Und nein, ich habe bewusst nichts geändert; ich meine mich zu erinnern, dass das irgendwann im August "funktionierte". Magisch, Sonnenflecken,.. k.A.
Ich sehe das so: für ein "Hobby" und eine "version under construction" ist das echt gut!
Danke
Ralph
Zitat von: megadodopublications am 11 Dezember 2022, 14:15:17
...
Meine eigenen Analysen haben ergeben, daß die neue @click Variante bei mir an einigen Stellen sehr gut funktioniert, leider aber nicht überall. Ich vermute, dass der Fehler daher etwas tiefer liegt (zB ein hausgemachtes Problem, html Code etc.pp.). Zeitlich muss ich hier aber erstmal einen Break setzen und bin daher auf die popup Variiert "vor @click" zurück - damit es weitergeht und der WAF erhalten bleibt.
...
Aufgeschoben ist nicht aufgehoben... Ich würde dem Verursacher für das Verhalten auf die Spur gehen.....
Wenn du jetzt zurück gehst, dann kannst du auch keine neuen Features/Neuerungen benutzen und irgendwann holt dich das ein...
LG
Hallo!
Ich kann da nur den Tipp geben:
Alles für die öffentliche Version in ein extra Verzeichnis kopieren. Der Beta Status immer im FTUI Ordner....
Dann kann auch bei einem Update nichts passieren und der WAF bleibt bestehen ;)
Kurz weil mobil...
Gruß
Bismosa
Hallo!
Sorry, bin jetzt erst zum ändern gekommen.
Zitat von: setstate am 10 Dezember 2022, 21:06:57
ja, mit debounce
Genial! :) Alles schon vorhanden. Man muss nur die richtigen Suchbegriffe nutzen. Dann klappt es auch.
Hab die Zeit sogar noch etwas erhöht. Das ist aber Geschmackssache.
Zitat von: bismosa am 10 Dezember 2022, 18:22:42
2.) Ändere ich die Temperatur auf eine ganze Zahl, wird kurzzeitig z.B. 20°C angezeigt. Kann man hier auch ein Zwangskomma (20.0 also immer eine Kommastelle) einsetzen?
Hätte ich auch selbst drauf kommen müssen. fix(1). Schon mehrfach verwendet...aber manchmal hat man dann einfach ein Loch im Kopp.
<ftui-label [text]="{{tpl_Device}}:desiredTemperature | fix(1)"Danke!
Gruß
Bismosa
Wie kann man denn einen Zeilenumbruch erzwingen? Ich lasse mir die Wetterbeschreibung ausgeben und der Text ist für den Forecast mindestens 2 Zeilen
WGWetterFC:fc2_narrative
<ftui-row>
<ftui-cell>
<ftui-label [text]="PPWetter:fc1_date | toDate() | format('eeee')" class="size-2"></ftui-label>
<ftui-label [text]="WGWetterFC:fc2_narrative"></ftui-label>
</ftui-cell>
</ftui-row>
@mkriegl
https://forum.fhem.de/index.php/topic,115259.msg1228653.html#msg1228653
LG
super, danke
Hallo zusammen,
ich steige gerade von FTUI auf FTUI3 um und arbeite mich gerade in die neue Syntax ein.
Jetzt habe ich mal einen dummy angelegt mit den Werten on und off. Je nachdem welcher Zustand der dummy hat, möchte ich ein Icon in rot oder grün anzeigen lassen.
Dazu habe ich das hier definiert:
<ftui-icon name="circle" size="-3" [color]="Name_dummy | step('on:red, off:green')"></ftui-icon>
Aber die beiden definierten Farben werden mir nicht angezeigt. Das Icon ist standard grau.
was mache ich falsch?
Danke
Dennis
Zitat von: dennis_n am 18 Dezember 2022, 19:56:54<ftui-icon name="circle" size="-3" [color]="Name_dummy | step('on:red, off:green')"></ftui-icon>
was mache ich falsch?
Du nutzt
step falsch. Für Zuweisungen ist map zu nutzen,
step ist für Zahlwertbereiche:
<ftui-icon name="circle" size="-3" [color]="Name_dummy:READING | map(`on:red, off:green`)"></ftui-icon>
Ok danke.
So funktioniert es jetzt:
<ftui-icon size="-3" [name]="Name_dummy:state | map('off: circle, on: circle')" [color]="Name_dummy:state | map('off:green, on:error')"></ftui-icon>
Gruss
Dennis
Zitat von: dennis_n am 18 Dezember 2022, 20:25:29
Ok danke.
So funktioniert es jetzt:
<ftui-icon size="-3" [name]="Name_dummy:state | map('off: circle, on: circle')" [color]="Name_dummy:state | map('off:green, on:error')"></ftui-icon>
Gruss
Dennis
Hi,
| map('off: circle, on: circle') macht nicht viel sinn. Es wird nur beim ersten start nicht angezeigt wenn noch kein Event kommt. Danach wird es immer mit den entsprechenden colors angezeigt.
Hier würde name="circle" reichen.
LG
Jap, vielen Dank.
Wurde geändert und funktioniert.
Gruss
Dennis
Hallo FTUI Fans. Mit etwas Hoffnung, dass ich über die Feiertage etwas Zeit finde, wollte ich mich mal in FTUI3 einarbeiten und habe direkt mal eine erste Frage. Sofern das Thema im Thread schon behandelt wurde, gerne darauf hinweisen und wie ich den entsprechenden Beitrag finde. Ich habe noch nicht alle 195 Seiten durchgelesen ;-).
In FTUI2 habe ich mir für ein Tablet die Seiten so gebaut, dass die einzelnen Bereiche sich in Breite und Höhe verändern, wenn das Browserfenster in der Größe verändert wird. Im neuen FTUI3 habe ich noch nicht so richtig verstanden, was ich da genau machen muß, bzw. welche Befehle dafür benötigt werden. Mit "resize" habe ich auch schon experimentiert aber das funktioniert nur in der Breite. Mir fehlt irgendetwas, dass die Anzeigehöhe auf die Höhe des Browserfensters angepasst wird.
Im FTUI2 hatte ich einen Code, der in etwa wie folgt aussah:
IN DER INDEXDATEI:
<div class="page" id="content_home"></div>
IN DER CONTENDATEI
<main id="content_home">
<div class="hbox">
<div class="vbox">
<div class="card">
Inhalt
</div">
</div>
</div>
</main>
Mit ftui-row und ftui-column bin ich auch noch nicht weiter gekommen, weil ich nicht weiß, welcher Container da drum herum gehört, damit die Größe immer auf die Browsergröße ausgerichtet wird.
Vielleicht kann mir jemand mal einen Hinweise geben oder auf entsprechende Beispielcodes verweisen.
die Behandlung von resize habe ich jetzt angepasst. Damit funktioniert das auch bei Höhenänderungen
Beispiel: examples/grid_resize.html
Zitat von: setstate am 20 Dezember 2022, 18:55:19
die Behandlung von resize habe ich jetzt angepasst. Damit funktioniert das auch bei Höhenänderungen
Beispiel: examples/grid_resize.html
Super, vielen Dank. Teste ich nachher direkt nochmal.
Zitat von: setstate am 20 Dezember 2022, 18:55:19
die Behandlung von resize habe ich jetzt angepasst. Damit funktioniert das auch bei Höhenänderungen
Beispiel: examples/grid_resize.html
Kurze Rückmeldung zur resize-Anpassung. Diese funktioniert nun grundsätzlich, wie gewünscht. Trotzdem habe ich nochmal eine Verständnisfrage bzw. ein kleines Darstellungsproblem, bei dem ich nicht weiter komme.
Ich habe die Menüdarstellung aus dem Example menu.html als Basis genutzt und dann über "content" meine gewünschte Seite eingebunden. Diese besteht nun aus der Griddarstellung, was zunächst einmal auch alles funktioniert. Allerdings passt die Höhe noch nicht richtig und soweit ich das erkennen konnte, liegt dies am "ftui-row". Dieses Element hat eine größere Höhe, als alle anderen Elemente, was dazu führt, dass es über den Browserrand hinausragt. Auch nach oben hin scheint das Element von der Größe her bei Position 0 zu beginnen. Mein Gefühl ist, dass die Größe und Position dieses Elements nicht richtig zu den Elternelementen berechnet wird.
Die Frage ist, ob ich irgendeine Definition anpassen muss (diverse Tests mit height waren bisher nicht erfolgreich), es einen umschliessenden Containers bedarf oder die Kombination von "View" und "Grid" gar nicht zusammen passt.
Mein Code als Beispiel:
<ftui-grid resize>
<ftui-grid-tile row="1" col="1" height="5" width="6">
<ftui-row>
<ftui-button [(value)]="wz_Lampen" states="an, aus">
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')" class="size-4"></ftui-icon></ftui-button>
</ftui-row>
<ftui-row >
...
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="7" height="5" width="3">
<ftui-row>
...
</ftui-row>
<ftui-row>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="10" height="5" width="3">
<ftui-row>
...
</ftui-row>
...
<ftui-row>
</ftui-grid-tile>
</ftui-grid>
beim Grid habe ich noch eine Kleinigkeit gefunden, die das verursacht haben könnte. Teste jetzt nochmal.
Zitat von: setstate am 21 Dezember 2022, 23:39:22
beim Grid habe ich noch eine Kleinigkeit gefunden, die das verursacht haben könnte. Teste jetzt nochmal.
Perfekt, so sieht das jetzt gut aus. Eine Kleinigkeit noch direkt, dann brauche ich nicht danach suchen. Gibt es eine Einstellung, dass die Scrollbars des Browser verschwinden, wenn diese nicht notwendig sind. Aktuell werden beide Scrollbars noch angezeigt, ohne dass man scrollen kann, da die Größe ja jetzt passt.
Danke für die schnellen Umsetzungen!
Zitat von: jual am 22 Dezember 2022, 09:30:55Gibt es eine Einstellung, dass die Scrollbars des Browser verschwinden, wenn diese nicht notwendig sind. Aktuell werden beide Scrollbars noch angezeigt, ohne dass man scrollen kann, da die Größe ja jetzt passt.
Eigene user css einbinden und dann in diese
html {
overflow-x: hidden;
overflow-y: hidden;
}einfügen.
Hallo setstate,
hab das eben mit resize auch mal getestet, funktioniert jetzt bei mir soweit einwandfrei. Hab allerdings ein Problem, bezieht sich auf grid mit einem image als Inhalt, hab hier bei mir das Niederschlagsradar eingebunden, Definition wir folgt:
<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
<header>Niederschlagsradar</header>
<ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" interval="300" nocache></ftui-image>
</ftui-grid-tile>
Wenn ich ftui-grid mit base-width und base-height definiere wird das grid sauber angezeigt, siehe Anhang. Definiere ich jetzt ftui-grid mit resize funktionieren alle grids auf der Seite super, nur das vom Niederschlagsradar wird "größer" gemacht, es überdeckt oben den header und unten wird auch ein Teil "abgeschnitten", siehe Bild 2.
Kann ich da dem image noch einen Parameter mitgeben das dies verhindert?
Gruß Markus
P.S.: Im Anhang auch die vollständige content-wetter.html
Hi Markus,
gib dem ftui-image mal ein:
height="max-height"
mit.
LG
Zitat von: mr_petz am 22 Dezember 2022, 14:09:36
Hi Markus,
gib dem ftui-image mal ein:
height="max-height"
mit.
Hi mr_petz,
hat leider keinerlei Auswirkungen. Habe mal im Browser die Seite untersucht, das image bekommt das Attribut "width" mit, denke wahrscheinlich vom der css. Mit meiner Definition:
<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
<header>Niederschlagsradar</header>
<ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" interval="300" nocache></ftui-image>
</ftui-grid-tile>sieht der Quelltext so aus:
<img style="width: 100%; height: auto;" src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif?_=1671719852692">Wenn ich jetzt meine Definition ändere und dem image
style="width: 87%;" mitgebe, dann sehe ich das image vollständig, ist natürlich links und rechts ein grauer Rand (siehe Anhang).
Wäre für mich soweit okay, gibt es aber die Möglichkeit das ich dem image
style="height: 100%;" mitgebe und "height" für dieses image deaktivieren kann?
LG Markus
Hast du es nur mit style getestet oder auch einfach direkt das height eingetragen?
Zitat von: mr_petz am 22 Dezember 2022, 17:02:51
Hast du es nur mit style getestet oder auch einfach direkt das height eingetragen?
Bei deinem Vorschlag hatte ich es direkt mit height eingetragen, bei den Tests mit meinen Ausführungen mit style.
Kann es auch nochmal nur mit height probieren.
Zitat von: jual am 22 Dezember 2022, 09:30:55
Perfekt, so sieht das jetzt gut aus. Eine Kleinigkeit noch direkt, dann brauche ich nicht danach suchen. Gibt es eine Einstellung, dass die Scrollbars des Browser verschwinden, wenn diese nicht notwendig sind. Aktuell werden beide Scrollbars noch angezeigt, ohne dass man scrollen kann, da die Größe ja jetzt passt.
Danke für die schnellen Umsetzungen!
das passiert meist, wenn man mit margin bzw. padding arbeitet, dann kommt es ungewollt irgendwo zu >100%. Mit overflow: hidden muss man dann gezielt an dieser Stelle respektive der entsprechenden Container arbeiten. An manchen Stellen will man eine Auto-Scrollbar, an einigen soll niemals eine auftauchen.
Man kann also ohne konkretes Beispiel nicht viel helfen. Könntest du eine Minimalbeispielsseite generieren, die das Problem zeigt?
Hi Markus@meier81,
Ich habe es mal nachgestellt. Mit:
<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
<header>Niederschlagsradar</header>
<ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" style="width: 100%;height: 100%;" width="100%" height="100%" interval="300" nocache></ftui-image>
</ftui-grid-tile>
wird es bei mir ins tile auf 100x100% reingequetscht...
Mit:
<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
<header>Niederschlagsradar</header>
<ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" style="width: 50%;height: 100%;" width="100%" height="100%" interval="300" nocache></ftui-image>
</ftui-grid-tile>
wird es mittig in einer annähernd proportionalen Ansicht dargestellt...
Ohne den style und einzelnen width/height-Angaben geht es bei mir nicht...
LG
Hallo!
Ich habe gerade mal wieder ein Update eingespielt. Dadurch funktioniert nun ein <ftui-grid> wesentlich besser.
Vorher hatte ich rechts und unten kachel-Bereiche, die immer abgeschnitten worden sind.
Jedoch habe ich nach wie vor einen unschönen Rand (rechts und unten). Mein Aufbau ist so:
<!DOCTYPE html>
<html>
<head>
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<title>FTUI Example Tab</title>
</head>
<body>
<ftui-grid>
<ftui-grid-tile row="1" col="1" height="10" width="1">
<ftui-column>
<ftui-tab view="View1" active>
<ftui-icon name="home"></ftui-icon>
</ftui-tab>
<ftui-tab view="View2">
<ftui-icon name="music"></ftui-icon>
</ftui-tab>
<ftui-tab view="View3" (value)="dummy1">
<ftui-label size="5">Tab3</ftui-label>
</ftui-tab>
<ftui-tab view="View4" fill="solid" timeout="10">Tab4</ftui-tab>
<ftui-tab view="View5" fill="solid" timeout="5">Tab5</ftui-tab>
<ftui-tab view="View6" fill="solid" shape="circle">
<ftui-icon name="road"></ftui-icon>
</ftui-tab>
<ftui-tab view="View7" fill="solid" shape="circle" [value]="ftuitest | map('1:on, .*:off')">
<ftui-icon name="camera"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="View1">
<ftui-grid-tile row="1" col="2" height="10" width="11">
<div class="size-10">Tab-View1</div>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View2">
<ftui-grid-tile row="1" col="2" height="10" width="11">
<ftui-grid>
<!-- Menü oben: -->
<ftui-grid-tile row="1" col="1" height="1" width="10">
<ftui-row>
<ftui-tab view="ViewHeizungenHome" size="normal" direction="vertical" group="Heizungen">
<ftui-icon name="home"></ftui-icon>
<ftui-label>Übersicht alt</ftui-label>
</ftui-tab>
<ftui-tab view="ViewHeizungenNeu" size="normal" direction="vertical" active group="Heizungen">
<ftui-icon name="home"></ftui-icon>
<ftui-label>Übersicht neu</ftui-label>
</ftui-tab>
<ftui-tab view="TODO" size="normal" direction="vertical" group="Heizungen">
<ftui-icon name="thumbs-down"></ftui-icon>
<ftui-label>TODO</ftui-label>
</ftui-tab>
</ftui-row>
</ftui-grid-tile>
<ftui-tab-view id="ViewHeizungenNeu" group="Heizungen">
<ftui-grid-tile row="2" col="1" height="9" width="10">
<ftui-label text="Platzhalter"></ftui-label>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
Der Rand entsteht nur, wenn ich mit einem 2. <ftui-grid> arbeite. Siehe Seite 2 "Übersicht neu". Da habe ich in der oberen Zeile ein 2. Menü.
Was kann ich ändern, um diesen Rand zu entfernen? Oder ist mein Aufbau grundsätzlich falsch?
Gruß
Bismosa
Zitat von: mr_petz am 23 Dezember 2022, 09:57:14
Ohne den style und einzelnen width/height-Angaben geht es bei mir nicht...
Hi mr_petz,
danke mal für den Tipp und das nachstellen, habe jetzt mal beide Varianten von dir probiert und auch noch etwas weiter experimentiert, bin jetzt bei folgender Variante hängen geblieben, ist für mich jetzt passend, die Höhe wird zu 100% ausgenutzt und in der Breite gibt es beidseitig ein wenig Rand:
<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
<header>Niederschlagsradar</header>
<ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" style="width: 89%;" height="100%" interval="300" nocache></ftui-image>
</ftui-grid-tile>
Danke auf jeden Fall nochmal :D
Zitat von: setstate am 23 Dezember 2022, 09:26:29
das passiert meist, wenn man mit margin bzw. padding arbeitet, dann kommt es ungewollt irgendwo zu >100%. Mit overflow: hidden muss man dann gezielt an dieser Stelle respektive der entsprechenden Container arbeiten. An manchen Stellen will man eine Auto-Scrollbar, an einigen soll niemals eine auftauchen.
Man kann also ohne konkretes Beispiel nicht viel helfen. Könntest du eine Minimalbeispielsseite generieren, die das Problem zeigt?
Anbei der Code für das Minimalbeispiel. Ich habe mal die Index.html quasi komplett und die Content-Datei beigefügt:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>FHEM Tablet2</title>
</head>
<body>
<ftui-menu timeout="0">
<ftui-tab view="View1" title="Übersicht" active color="primary">
<ftui-icon name="home"></ftui-icon>
Übersicht
</ftui-tab>
</ftui-menu>
<ftui-main>
<ftui-view>
<ftui-view-toolbar slot="header" height="10%">
<ftui-menu-button slot="start"></ftui-menu-button>
<ftui-tab-title text-align="left"></ftui-tab-title>
</ftui-view-toolbar>
<ftui-tab-view id="View1">
<ftui-content file="page_content_home.html"></ftui-content>
</ftui-tab-view>
</ftui-view>
</ftui-main>
</body>
</html>
<ftui-grid resize class="size-4">
<ftui-grid-tile row="1" col="1" height="5" width="6">
<ftui-row color="danger">
<ftui-button [(value)]="wz_Lampen" states="an, aus" >
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')" ></ftui-icon></ftui-button>
</ftui-row>
<ftui-row color="success">
<ftui-button [(value)]="wz_Lampen" states="an, aus">
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')" ></ftui-icon></ftui-button>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="7" height="5" width="3">
<ftui-row>
<ftui-button [(value)]="wz_Lampen" states="an, aus">
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')" ></ftui-icon></ftui-button>
</ftui-row>
<ftui-row>
</ftui-row>
<ftui-row>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="10" height="5" width="3">
<ftui-row>
</ftui-row>
<ftui-row>
<ftui-button [(value)]="wz_Lampen" states="an, aus">
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')"></ftui-icon></ftui-button>
</ftui-row>
</ftui-grid-tile>
</ftui-grid>
Hallo,
bei der Umstellung von FTUI2 auf FTUI3 fehlt mir die Möglichkeit "Trends" z.B. für Temperaturänderungen anzuzeigen. In FTUI2 hatte ich das wie folgt gelöst:
<div>
<div data-type="klimatrend" data-device="WetterProplanta" data-get="statTemperatureTendency" data-refperiod="1" class="inline large"></div>
<div data-type="klimatrend" data-device="WetterProplanta" data-get="statTemperatureTendency" data-refperiod="2" class="inline large"></div>
</div>
Die dazugehörigen Readings haben folgende Werte:
statHumidityTendency 1h: -2 2h: -5 3h: -3 6h: +4 2022-12-23 18:59:55
statTemperatureTendency 1h: +0.5 2h: +0.7 3h: +0.2 6h: -0.6 2022-12-23 18:59:55
Wie kann ich dies in FTUI3 lösen?
Viele Grüße
Jürgen
Hallo Jürgen,
schau mal hier https://forum.fhem.de/index.php/topic,115259.msg1231291.html#msg1231291 (https://forum.fhem.de/index.php/topic,115259.msg1231291.html#msg1231291)
wurde da schonmal behandelt. Hoffe das hilft dir.
Gruß Markus
Hallo Markus,
danke für den Tipp. Mir fehlt leider das Icon für "=" (equal.svg). Wo finde ich dieses?
Viele Grüße
Jürgen
Auf die Schnelle, ohne Gewähr ;)
https://www.svgrepo.com/vectors/equal/ (https://www.svgrepo.com/vectors/equal/)
Danke.
@setstate, kannst Du dieses Icon bitte noch in den "Standard" übernehmen. Danke.
Viele Grüße
Jürgen
Hallo zusammen,
ich benötige noch einmal Eure Hilfe. Bei meiner Wetter-Definition habe ich noch folgende Probleme:
- Das von https://www.svgrepo.com/vectors/equal/ (https://www.svgrepo.com/vectors/equal/) heruntergeladene Gleichheitszeichen lässt sich nicht "einfärben". Es ist immer schwarz.
- Den Zeilenabstand zwischen Wind/Sicht/Druck kann ich nicht vergrößern
- Den Mond bekomme ich auch nicht (minimal) nach unten verschoben. Aktuell ist das Image direkt am obren Rand
Hier mein Coding:
<header>Wetter in xxx inkl Mondphase</header>
<ftui-row>
<ftui-weather size="6"
icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
[condition]="WetterProplanta:weatherIcon">
</ftui-weather>
<div>
<ftui-row>
<ftui-cell margin="1">
<div>
<ftui-label [text]=WetterProplanta:temperature|fix(1) unit="°C" size="5" [color]="WetterProplanta:temperature | step('-73: violett, -9: blue, 18: green, ,26: orange, 32: red')">
</ftui-label>
</div>
<ftui-row>
<ftui-icon size="-2"
[name]="WetterProplanta:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-20:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
[color]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:blue, 0:white, 0.1:red')">
</ftui-icon>
<ftui-icon size="-2"
[name]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
[color]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:blue, 0:white, 0.1:red')">
</ftui-icon>
</ftui-row>
<div>
<ftui-label size="2" color="white">Temperatur</ftui-label>
</div>
</ftui-cell>
<ftui-cell margin="1">
<div>
<ftui-label [text]=WetterProplanta:humidity unit="%" size="5" [color]="WetterProplanta:humidity | step('0: violett, 20: blue, 40: green, ,60: orange, 80: red')">
</ftui-label>
</div>
<div>
</div>
<ftui-row>
<ftui-icon size="-2"
[name]="WetterProplanta:statHumidityTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-5:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
[color]="WetterProplanta:statHumidityTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-5:blue, 0:white, 0.1:red')">
</ftui-icon>
<ftui-icon size="-2"
[name]="WetterProplanta:statHumidityTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-50:angle-double-down, -5:angle-down, 0:equal, 0.1:angle-up, 5:angle-double-up')"
[color]="WetterProplanta:statHumidityTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-0.1:blue, 0:white, 0.1:red')">
</ftui-icon>
</ftui-row>
<div>
<ftui-label size="2" color="white">Luftfeuchte</ftui-label>
</div>
</ftui-cell>
<ftui-cell align-items="left" margin="1">
<div>
<ftui-label size="2" color="white">Wind :</ftui-label>
</div>
<div>
<ftui-label size="2" color="white">Sicht :</ftui-label>
</div>
<div>
<ftui-label size="2" color="white">Druck:</ftui-label>
</div>
</ftui-cell>
</ftui-cell>
<ftui-cell align-items="left">
<div>
<ftui-label [text]="WetterProplanta:wind" unit="km/h" size="2" color="green"></ftui-label>
</div>
<div>
<ftui-label [text]="WetterProplanta:visibility" unit="km" size="2" color="white"></ftui-label>
</div>
<div>
<ftui-label [text]="WetterProplanta:pressure" unit="hPa" size="2" color="orange"></ftui-label>
</div>
</ftui-cell>
</ftui-row>
</div>
<ftui-cell>
<ftui-image margin="-2" border=0 src="https://www.der-mond.de/feature/luna.php?version=5&txue=&zeko=0&rand=0&trans=1&julia=0&daem=3&zefu=0&grmo=2&grmoueber=0&txph=0
&txmoal=0&txmoph=0&txmobe=0&txmophti=0&txmost=0&txmostau=0&txze=0&zezo=1&zeso=1&format=0&schgr=7&schriftart=Standard&schriftschnitt=0
&grafikausdehnung=0&grafikpx=85&faan=1&scro=45&scgr=45&scbl=45&hiro=240&higr=240&hibl=240&grsoho=0&grsohoueber=0&soep=0&txsost=0&txsostau=0
&geolagr=11&geolami=43&geolase=9&geola=O&geobrgr=48&geobrmi=1&geobrse=10&geobr=N&lang=de" alt="Der Mond - Geheimnisvoller Begleiter unserer Erde">
</ftui-image>
<div>
<ftui-label color="white" [text]="Mondphase:MoonPhaseS"></ftui-label>
<ftui-label color="white" [text]="Mondphase:MoonPhaseN | multiply(100) | fix(2)" unit="%"></ftui-label>
</div>
</ftui-cell>
</ftui-row>
</ftui-grid-tile>
Hi Jürgen,
zu 1. kann sein das du die svg´s erst "umwandeln" musst, hatte ich auch schonmal machen müssen. Ging meine ich auf der Seite
https://icomoon.io/app/#/select (https://icomoon.io/app/#/select)
Dort kannst du dein icon hochladen und dann generate svg ausführen, ich meine dann hat´s funktioniert. Es gibt dort auf der Seite aber auch das Symbol, musst du dort mal nach equal suchen. Die sollten schon standart passen.
Welches Symbol wolltest du denn verwenden, wenn nicht häng´s hier mal an, dann schau ich ob ich es dir umwandeln kann.
Gruß Markus
Hi Markus,
danke für die Info. Von der neuen Seite konnte ich das "Gleichheitszeichen" herunterladen, welches sich auch farblich anpassen lässt. Ich habe es auch hier für setstate angehängt.
Jetzt hoffe ich noch auf die Hilfe für die Punkte 2. und 3. 8)
Viele Grüße und schöne Weihnachten
Jürgen
Hi Jürgen,
Zitat von: juemuc am 23 Dezember 2022, 23:17:33
Den Zeilenabstand zwischen Wind/Sicht/Druck kann ich nicht vergrößern
Hier gibt es zwar top als Attribute, aber es wirkt nicht ohne einen Positionseintrag im style Bsp.:
<ftui-cell align-items="left">
<ftui-label size="2" top="-5px" style="position:relative;" color="white">Wind :</ftui-label>
<ftui-label size="2" color="white">Sicht :</ftui-label>
<ftui-label size="2" top="5px" style="position:relative;" color="white">Druck:</ftui-label>
</ftui-cell>
</ftui-cell>
<ftui-cell align-items="left">
<ftui-label [text]="WetterProplanta:wind" unit="km/h" size="2" top="-5px" style="position:relative;" color="green"></ftui-label>
<ftui-label [text]="WetterProplanta:visibility" unit="km" size="2" color="white"></ftui-label>
<ftui-label [text]="WetterProplanta:pressure" unit="hPa" top="5px" style="position:relative;" size="2" color="orange"></ftui-label>
</ftui-cell>
Hier brauchst du auch keine <div> Tags angeben!
@setstate: im ftui-label fehlt eine Positionangabe um top und left zu benutzen ohne style.
Zitat
Den Mond bekomme ich auch nicht (minimal) nach unten verschoben. Aktuell ist das Image direkt am obren Rand
Hier funktioniert top. Bsp.:
<ftui-image top="5px" src="https://www.der-mond.de/feature/luna.php?version=5&txue=&zeko=0&rand=0&trans=1&julia=0&daem=3&zefu=0&grmo=2&grmoueber=0&txph=0
&txmoal=0&txmoph=0&txmobe=0&txmophti=0&txmost=0&txmostau=0&txze=0&zezo=1&zeso=1&format=0&schgr=7&schriftart=Standard&schriftschnitt=0
&grafikausdehnung=0&grafikpx=85&faan=1&scro=45&scgr=45&scbl=45&hiro=240&higr=240&hibl=240&grsoho=0&grsohoueber=0&soep=0&txsost=0&txsostau=0
&geolagr=11&geolami=43&geolase=9&geola=O&geobrgr=48&geobrmi=1&geobrse=10&geobr=N&lang=de" alt="Der Mond - Geheimnisvoller Begleiter unserer Erde">
</ftui-image>
Im übrigen brauchst du eigentlich keine <div> Tags, nur für Sonderfälle!
Merry XMas
LG mr_petz
Hallo mr_petz,
super. Vielen Dank. Damit hat es bestens funktioniert. Hast Du noch einen Tipp, wie ich die beiden Zeichen über Temperatur und Luftfeuchte näher zusammenbringe?
<ftui-row>
<ftui-icon size="-2"
[name]="WetterProplanta:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-20:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
[color]="WetterProplanta:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-20:blue, -1.9:blue, 0:white, 0.1:red, 1.9:red')">
</ftui-icon>
<ftui-icon size="-2"
[name]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
[color]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:blue, -1.9:blue, 0:white, 0.1:red, 1.9:red')">
</ftui-icon>
</ftui-row>
Auch das replace-Statement passt noch nicht. Ich möchte den Wert nach 3h extrahieren (1h: -0.4 2h: -0.5 3h: -0.3 6h: -1.8 ) .
Viele Grüße und noch frohe Weihnachten
Jürgen
Zitat von: juemuc am 24 Dezember 2022, 22:29:15
Hast Du noch einen Tipp, wie ich die beiden Zeichen über Temperatur und Luftfeuchte näher zusammenbringe?
Da gibst du einfach im row ein width mit. Bsp.:
<ftui-row width="15%">
Zitat von: juemuc am 24 Dezember 2022, 22:29:15
Auch das replace-Statement passt noch nicht. Ich möchte den Wert nach 3h extrahieren (1h: -0.4 2h: -0.5 3h: -0.3 6h: -1.8 ) .
Da sollte das ziehen:
replace(/3h:\s+(.*)\s+6h/, '$1')
oder:
replace(/3h: (.*) 6h/, '$1')
Edit:
oder mit der Pipe part() solange Leerzeichen drin sind:
| part(6)
da brauchst du dann den replace() nicht mehr.
Wenn vor 1h noch ein Leerzeichen drin ist, dann part(7).
LG
Vielen Dank für die super Hinweise.
Mit dem Pipe "part" habe ich das gewünschte Ergebnis erzielt. Auch die Ergänzung mit "width" war perfekt.
Viele Grüße
Jürgen
Hallo zusammen,
nachdem ich nun meine Statusleiste fertig habe, möchte ich meine Menü-Leiste noch optimieren.
Bei jedem Menüpunkt übergebe ich einen Wert (der dem Menüpunkt entspricht) an eine FHEM-Variable, wenn ich den Menüpunkt anklicke. Soweit so gut. Wenn ich allerdings die Seite neu aufrufe bzw. mit F5 refreshe, wird die Variable nicht mit dem Wert des aktiven Menupunktes aktuallsiert (es erfolgte ja auch kein "@click". Gibt es ein Art "@active" ? Ich mit @active hat es zumindest nicht funktioniert.
Noch besser wäre, wenn ich den Menüpunkt auf aktiv setzen könnte, dessen Wert in der Fhem-Variablen steht.
<ftui-grid-tile row="1" col="1" height="12" width="2">
<header>Menü</header>
<ftui-column>
<ftui-tab view="View1" direction="vertical" size="large" active>
<ftui-icon name="home" @click="sendFhem('set FTUI_Seite Home')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Home')">Home</ftui-label>
</ftui-tab>
<ftui-tab view="View2" direction="vertical" size="large">
<ftui-icon name="cloudy" @click="sendFhem('set FTUI_Seite Wetter')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Wetter')">Wetter</ftui-label>
</ftui-tab>
<ftui-tab view="View3" direction="vertical" size="large">
<ftui-icon name="cutlery" @click="sendFhem('set FTUI_Seite Küche')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Küche')">Küche</ftui-label>
</ftui-tab>
<ftui-tab view="View4" direction="vertical" size="large">
<ftui-icon path="../images/openautomation" name="scene_livingroom" @click="sendFhem('set FTUI_Seite Wohnzimmer')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Wohnzimmer')">Wohnzimmer</ftui-label>
</ftui-tab>
<ftui-tab view="View5" direction="vertical" size="large">
<ftui-icon path="../images/openautomation" name="it_pc" @click="sendFhem('set FTUI_Seite Büro')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Büro')">Büro</ftui-label>
</ftui-tab>
<ftui-tab view="View6" direction="vertical" size="large">
<ftui-icon name="bath" @click="sendFhem('set FTUI_Seite Bad')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Bad')">Bad</ftui-label>
</ftui-tab>
<ftui-tab view="View7" direction="vertical" size="large">
<ftui-icon name="bed" @click="sendFhem('set FTUI_Seite Schlafzimmer')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Schlafzimmer')">Schlafzimmer</ftui-label>
</ftui-tab>
<ftui-tab view="View8" direction="vertical" size="large">
<ftui-icon name="front-door" @click="sendFhem('set FTUI_Seite Flur')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Flur')">Flur</ftui-label>
</ftui-tab>
<ftui-tab view="View9" direction="vertical" size="large">
<ftui-icon name="archive" @click="sendFhem('set FTUI_Seite Kammer')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Kammer')">Kammer</ftui-label>
</ftui-tab>
<ftui-tab view="View10" direction="vertical" size="large">
<ftui-icon name="server" @click="sendFhem('set FTUI_Seite System')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite System')">System</ftui-label>
</ftui-tab>
<ftui-tab view="View11" direction="vertical" size="large">
<ftui-icon name="video-camera" @click="sendFhem('set FTUI_Seite Kamera')"></ftui-icon>
<ftui-label @click="sendFhem('set FTUI_Seite Kamera')">Kameras</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
Viele Grüße
Jürgen
Schau hier:
https://forum.fhem.de/index.php/topic,115259.msg1185574/topicseen.html#msg1185574
LG
Passt ;D
Vielen Dank für die schnelle Hilfe.
LG
Jürgen
Hallo zusammen,
ich möchte mit dem Pipe "map" folgende Zeichenkette "pct 100" ersetzen. map('pct 100:icon-name') bzw. map('`pct 100`:icon-name') oder auch map('`pct 100:icon-name`') funktionieren leider nicht.
Was mache ich falsch?
Viele Grüße
Jürgen
Hallo Jürgen,
hab das bei mir so im Einsatz:
<ftui-icon [name]="DEVICE | map('zuhause:home, schläft:bed, aufgestanden:child, abwesend:blind, verreist:plane')"></ftui-icon>
Dazu müssen aber die Icons auch im Ordner "ftui/icons" liegen.
Gruß Markus
Hallo Markus,
wenn die Zeichenkette vor dem ":" ohne Leerzeichen ist, ist es auch kein Problem. Es geht um das Leerzeichen in "pct 100". Es können folgende Werte kommen: "pct 0", "pct 25", "pct 50", "pct 75", "pct 100" und "undefined".
Viele Grüße
Jürgen
Setz die mal in accent aigu (APOSTROPH) oder accent grave (GRAVISZEICHEN)...
Edit:
Zur Not mit replace() die Leerstellen entfernen...
LG
Hallo zusammen,
jetzt hat es auch so funktioniert. Hatte noch einen anderen Fehler davor. Danke für Eure Tipps.
Viele Grüße
Jürgen
Hallo zusammen,
da ich einige "weekdaytimer" definiert habe, hatte ich unter FTUI2 auch das entsprechende Widget oft auf meinen Seiten genutzt. Unter FTUI3 habe ich hierzu allerdings nichts gefunden.
Meine FTUI2-Definition lautete wie folgt:
<td>
<li class="top-space left-space">
<div id="wdtimer_ftui" data-type="wdtimer" data-device="Rollos_Ost_WT" data-language="de" data-style="square" data-savecfg="true"
data-theme="dark" data-timesteps="1" data-title="Rollos Ost" data-cmdlist='{"100":"pct:100","75":"pct:75","50":"pct:50","25":"pct:25","0":"pct:0"}' data-width="700">
<div data-type="label" class="">Timer</div>
</div>
<div data-type="label" data-device="Rollos_Ost_WT" data-get="nextUpdate" data-pre-text=""
data-hide="disabled" data-hide-on="1" data-color="green" class="inline large">
</div>
<div data-type="label" data-device="Rollos_Ost_WT" data-get="nextValue" data-unit="%"
data-hide="disabled" data-hide-on="1" data-color="white" class="inline large">
</div>
<div data-type="label" data-device="Rollos_Ost_WT" data-get="disabled" data-substitution='["1","Timer ist AUS!"]'
data-hide="disabled" data-hide-on="0" data-color="red" class="inline large bold">
</div>
</li>
</td>
Wer hat ein paar Tipps für mich 8)
Viele Grüße
Jürgen
Zitat von: juemuc am 27 Dezember 2022, 22:16:47
Hallo zusammen,
da ich einige "weekdaytimer" definiert habe, hatte ich unter FTUI2 auch das entsprechende Widget oft auf meinen Seiten genutzt. Unter FTUI3 habe ich hierzu allerdings nichts gefunden.
...
Wer richtig sucht findet meist auch was... ;)
Suche mal hier im Thread rechts oben in der Suche nach "weekdaytimer" ;D
LG mr_petz
Zitat von: mr_petz am 28 Dezember 2022, 18:22:38
Wer richtig sucht findet meist auch was... ;)
Suche mal hier im Thread rechts oben in der Suche nach "weekdaytimer" ;D
LG mr_petz
:-[
Danke
Viele Grüße
Jürgen
Hallo,
ich würde gerne ein Icon in der Farbe einer HUE-Lampe einfärben. Allerdings scheint hier eine Umsetzung zu fehlen. Wer hat einen Tipp?
<ftui-icon color="HUEDevice11:rgb" size="3"
[name]="HUEDevice11:onoff | map('1:lightbulb-on, 0:lightbulb')">
</ftui-icon>
@juemuc
color1 red
color2 yellow
color3 green
onoff 1
rgb1 ff0000
rgb2 #ffff00
rgb3 00ff00
- Attribut color "versteht" CSS-Farbbezeichnungen
- Attribut rgb "versteht" RGB-Farbkodierungen - mit oder ohne #
- Verzichtet man auf [...] um das Attribut, wird der übergebene Wert 1:1 als Ergebnis verwendet - nicht der Wert vom Wert
... rgb="ftuitest:rgb1" ergibt: ftuitest:rgb1
... [rgb]="ftuitest:rgb1" ergibt: ff0000
<ftui-row>
<ftui-icon [rgb]="ftuitest:rgb1" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
<ftui-icon [color]="ftuitest:color1" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
</ftui-row>
<ftui-row>
<ftui-icon [rgb]="ftuitest:rgb2" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
<ftui-icon [color]="ftuitest:color2" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
</ftui-row>
<ftui-row>
<ftui-icon [rgb]="ftuitest:rgb3" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
<ftui-icon [color]="ftuitest:color3" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
</ftui-row>
s. Screenshot
Danke für die Tipps.
Ich musste nur "color" durch rgb ersetzen und schon funktioniert es 8)
Unabhängig davon muss ich allerdings zweimal auf den "button" der Glühbirne drücken, damit die Lampe aus geht. Einschalten geht mit einem "klick". Was ist noch falsch?
<ftui-grid-tile row="1" col="8" height="3" width="3">
<header>Bettlicht</header>
<ftui-row margin="-2" align-items="center">
<ftui-button [(value)]="HUEDevice11" shape="circle" height="5em" width="5em">
<ftui-icon [rgb]="HUEDevice11:rgb" size="3"
[name]="HUEDevice11:onoff | map('1:lightbulb-on, 0:lightbulb')">
</ftui-icon>
</ftui-button>
<ftui-icon width="50%" left="150px" top="40px"
name="paint-brush" @click="pop5.open()">
</ftui-icon>
</ftui-row>
<ftui-slider
[(value)]="HUEDevice11:pct" min="0" max="100">
</ftui-slider>
<ftui-label color="white" size="1" margin="-0.5"
[text]="HUEDevice11:pct">
</ftui-label>
</ftui-grid-tile>
Viele Grüße
Jürgen
Hallo in die Runde,
für mein neues Wandtablet versuche ich grade eine schöne Oberfläche für mein Smart Home zu basteln. Hierbei gefällt mir TabletUI am besten, daher bin ich nun dran mich langsam einzuarbeiten. Die ersten Erfolge konnte ich bereits erzielen (Darstellung von Temperaturen, Wettervorhersage und Online/ Offline Status meines NAS). Ich versuche so viel wie möglich über die Beispiele und des Forums selbst zu lösen. Aktuell bin ich an der Einbindung des PinPad von @mr-petz dran. Ich möchte über die TabletUI Oberfläche mein NAS per Wake on Lan starten. Da dies nicht jeder in meinem Haushalt machen soll, möchte ich dies mit dem PinPad sicherstellen. Grundsätzlich funktioniert es schon. Ich hab jedoch noch eine Frage zur Benutzung...
Wenn man den Pin nicht weiß, wie kehre ich zur vorherigen Ansicht zurück?
Da das PinPad kein Schließen Button besitzt, gestaltet sich das zurückkehren für mich relativ umständlich. Meine aktuelle Lösung ist die, dass ich das Attribut overlay leer übergebe (overlay=""), womit die Oberfläche weiterhin bedienbar bleibt. In meinem Sidemenü habe ich den ersten Eintrag für die Startseite mit einem Button versehen, der den Dummy wieder zurücksetzt. Damit schließt sich das PinPad nun wie gewünscht. Jedoch habe ich in diesem Fall das Verhalten, dass bei Eingabe eines falschen Pins das PinPad kurz verschwindet und sich anschließend sofort wieder neu öffnet. Wenn ich das Attribut overlay jedoch weglasse, wackelt das PinPad bei einer falschen Eingabe und bleibt so lange geöffnet, bis der korrekte Pin eingegeben wurde. Am besten würde mir gefallen, wenn die Oberfläche weiterhin bedienbar bleibt bei der Anzeige des PinPad (also Attribut overlay leer übergeben) und das PinPad bei einer falschen Eingabe sichtbar bleibt und es wackelt (wie ohne overlay). Habt ihr eine Idee, wie ich das lösen könnte?
Hier noch die aktuelle Einbindung des PinPads in meiner Oberfläche:
<ftui-pinpad
(device)="dum_23_ShowPinPad"
[pin]="dum_23_ShowPinPad:pin"
shape="round"
name="Zum Starten Pin eingeben!"
overlay=""
flat
[hidden]="dum_23_ShowPinPad | map('off:true, on:false')">
</ftui-pinpad>
Viele Grüße
Tim
Hallo Tim,
rufe doch das PinPad über die "Popup"-Funktion auf.
Viele Grüße
Jürgen
@juemuc Vielen dank für den Tipp. Ich habe es jetzt mal fix umgesetzt und es erfüllt alle meine Wünsche ;D
Hi Tim,
bitte die entsprechenden Threads benutzen:
https://forum.fhem.de/index.php/topic,120107.msg1145784.html#msg1145784
Da kann ich noch was einbauen für deine Situation...
LG mr_petz
Noch eine Frage zum Popup... Gibt es eine Möglichkeit, das Popup nur unter bestimmten Bedingungen anzuzeigen? Ich verwende aktuell ein Icon, bei dem ich der @click-Methode mein Popup zugewiesen habe. Mein Wunsch wäre, dass das Popup nur angezeigt wird, wenn ein bestimmter Wert bzw. Ausdruck wahr ist.
Hier mein Icon-Code mit der Zuweisung der @click-Methode:
<ftui-icon name="server" size="3" @click="pinpad.open()"></ftui-icon>
Und hier mein Popup:
<ftui-popup id="pinpad" width="400px" height="550px">
<header> Zum Starten Pin eingeben!</header>
<ftui-pinpad
(device)="dum_23_PinPad_Code"
[pin]="dum_23_PinPad_Code:pin"
shape="round"
name=""
left="40px"
top="10%"
flat
fully
set="wol_1_NAS on"
open=true>
</ftui-pinpad>
</ftui-popup>
Vielen Dank
Tim
Mit active sollte das gehen:
https://github.com/knowthelist/ftui/blob/90c05cd5b320922ac062b7c8fe018286a0150f43/www/ftui/examples/popup.html#L105
LG
Moin,
ich bin grad beim Umzug von FTUI2 auf 3.
So nach und nach setzte ich alles um und ich mag jetzt schon FTUI3!
Ich habe mich viel belesen, aber nichts zu dem Thema Kameras an dem Synology NAS gefunden.
In FTUI2 habe ich es wie folgt umgesetzt:
<div data-type="image" data-device="Kamera_CAM2_Hintertuer" data-get="StmKeymjpegHttp" data-size=542 class="cell"></div>
Ich habe so grad gar keinen Ansatz, wie ich das in FTUI3 umgesetzt bekomme. Habe in der Suche auch nichts hilfreiches gefunden. Ich gehe aber davon aus, dass ich nicht der erste bin und einfach nicht richtig gesucht habe. ;)
Danke euch schon mal. :)
edit:
Es ist so einfach...einfacher wie ich dachte:
Ich habe mein Problem selbst gelößt:
<ftui-image [src]="Kamera_CAM1_Haustuer:StmKeymjpegHttp" width="500px"></ftui-image>
Hmmm...jetzt habe ich doch noch eine Frage zum Thema ftui-image..
Ich möchte in Abhängigkeit von einem Reading ein Bild angezeigt bekommen.
Wenn Device:reading:on soll dieses Bild angezeigt werden:
<<ftui-image src="/fhem/ftui3/images/Icons/chubby-cute1.gif" width="100px" </ftui-image>
Wenn aber Device:reading:off soll dieses Bild angezeigt werden:
<<ftui-image src="/fhem/ftui3/images/Icons/chubby-cute1.gif" width="100px" </ftui-image>
Jemand eine Idee?
Die musst in Abhängigkeit des Readings "mappen"
z.B. so.
<ftui-icon color="green" size="2" left="285px"
path="../images/openautomation" [name]="Rollo_Wohnzimmer:state | map('pct 100:fts_roof_window_shutter_0, pct 75:fts_roof_window_shutter_03, pct 50:fts_roof_window_shutter_05,
pct 25:fts_roof_window_shutter_07, pct 0:fts_roof_window_shutter_10, undefined:message_attention, .*:message_attention')">
</ftui-icon>
Viele Grüße
Jürgen
Hallo zusammen,
unter FTUI2 nutze ich das sscam-Widget https://wiki.fhem.de/wiki/FTUI_Widget_f%C3%BCr_SSCam_Streaming_Devices_(SSCamSTRM) (https://wiki.fhem.de/wiki/FTUI_Widget_f%C3%BCr_SSCam_Streaming_Devices_(SSCamSTRM)) Gibt es unter FTUI3 hier auch ein Pendant?
Ich hoffe, ich habe nicht wieder falsch gesucht 8)
Viele Grüße
Jürgen
Zitat von: juemuc am 30 Dezember 2022, 17:22:18
Hallo zusammen,
unter FTUI2 nutze ich das sscam-Widget https://wiki.fhem.de/wiki/FTUI_Widget_f%C3%BCr_SSCam_Streaming_Devices_(SSCamSTRM) (https://wiki.fhem.de/wiki/FTUI_Widget_f%C3%BCr_SSCam_Streaming_Devices_(SSCamSTRM)) Gibt es unter FTUI3 hier auch ein Pendant?
Ich hoffe, ich habe nicht wieder falsch gesucht 8)
Viele Grüße
Jürgen
Nein das gibt es meines Wissens noch nicht. Ich hatte mal zu Testzwecken eine PTZ-Steuerung mit FTUI3 Boardmitteln gebaut + JS-Code (siehe Bild).
Das alles ging über CGI-Befehle. Problem ist aber, zum Nachbau braucht man da extra JS-Code, weil immer nach einem SetCommand ein StopCommand mitgesendet werden muss.
Hier müsste man auch von jeder Kamera die CGI kennen.
Um das FTUI2-Widget zu portieren, müsstest du den Entwickler mal anfragen...
LG mr_petz
Danke für die Info. Ich werde mich mit DS-Starter in Verbindung setzen.
Viele Grüße
Jürgen
Zitat von: juemuc am 30 Dezember 2022, 17:20:27
<ftui-icon color="green" size="2" left="285px"
path="../images/openautomation" [name]="Rollo_Wohnzimmer:state | map('pct 100:fts_roof_window_shutter_0, pct 75:fts_roof_window_shutter_03, pct 50:fts_roof_window_shutter_05,
pct 25:fts_roof_window_shutter_07, pct 0:fts_roof_window_shutter_10, undefined:message_attention, .*:message_attention')">
</ftui-icon>
Hey Jürgen,
Super! Danke! Das ist genau das was ich suche!
Bei mir werden die Icons aber nicht angezeigt. Das sind animierte GIFs. Kann es sein das es damit zusammenhängt?
<ftui-icon color="green" size="2" left="285px"
path="../images/diverses" [name]="HMW_Sen_SC_12_DR_OEQ0863464_04:state | map('sensor_closed:sleep_TR.gif, sensor_open:fire_TR.gif')">
</ftui-icon> Die beiden Gifs liegen im folgenden Pfad:
/opt/fhem/www/ftui/images/diverses/fire_TR.gif
/opt/fhem/www/ftui/images/diverses/sleep_TR.gif
Und das State von dem Device passt auch (siehe Screenshot)
@M.Piet
gifs sind keine Icons.
Dafür ftui-image verwenden.
Edit:
Bsp.:
https://forum.fhem.de/index.php/topic,115259.msg1186952.html#msg1186952
LG
Angenommen, es wäre doch ein Icon ...
<ftui-icon path="../jscolor" [name]="ftuitest:onoff | map('1:cross.gif, 0:arrow.gif')"></ftui-icon>
liefert einen falschen Link: http://raspberrypiX:8083/fhem/jscolor/arrow.gif.svg ... und zeigt nichts an
<ftui-icon path="../jscolor" [name]="ftuitest:onoff | map('1:cross, 0:arrow')" type="gif"></ftui-icon>
liefert einen korrekten Link: http://raspberrypiX:8083/fhem/jscolor/arrow.gif ... und zeigt es entsprechend an
Zitat von: mr_petz am 31 Dezember 2022, 09:50:43
Dafür ftui-image verwenden.
https://forum.fhem.de/index.php/topic,115259.msg1186952.html#msg1186952
Hey :) Danke dir.
Aber...es klappt nicht. Ich weiß nicht warum.
Mein TestDummy hat entweder "on" oder "off"
Die GIFs werden auch angezeigt:
http://192.168.92.30:8083/fhem/ftui3/images/diverses/fire_TR.gif
http://192.168.92.30:8083/fhem/ftui3/images/diverses/sleep_TR.gif
Ich verstehe nicht wo hier der Fehler ist:
<ftui-image left="48%" top="06%" width="10%" height="08%" [src]="TestDummy | map('on:`./images/diverses/fire_TR.gif`, off:`./images/diverses/sleep_TR.gif`')"></ftui-image>
Es wird ja was angezeigt.
Auf dem deinem Bild rechts mitte ist ein weißer Punkt.
Lasse mal zum Test width und height weg Damit man mehr sieht...
Edit:
und mal so testen:
<ftui-image left="48%" top="6%" base="images/diverses/" [src]="TestDummy | map('on:fire_TR.gif, off:sleep_TR.gif')"></ftui-image>
./ ist hier nicht nötig. es würde aber beides gehen...
Oh man....ich hatte die Brille nicht auf. Logisch bei den Werten die da angegeben waren...
Es geht...!
Danke dir!
...aber....wie bekomme ich denn nun noch das GIF in die Mitte? Ich verstehe grad nicht, warum er das linksbündig macht.
Verstehe nicht, warum die Icons und der Text in der mitte steht, das Bild aber nicht.
<ftui-column align-items color="medium">
<ftui-label text="Holzvergaser"></ftui-label>
<ftui-image width="45%" [src]="TestDummy | map('Holzvergaser in Betrieb:`./images/diverses/fire_TR.gif`, Holzvergaser aus:`./images/diverses/sleep_TR.gif`')"></ftui-image>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerDayTemp | round(0,20) "></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerDay | round(0,50)"></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonthTemp | round(0,50)"></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonth | round(0,50)"></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerYearTemp | round(0,50)"></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerYear | round(0,50)"></ftui-label>
</ftui-column>
Zitat von: mr_petz am 07 November 2021, 17:39:00
Hi, ich habe hier einen einfachen Timerset um den WeekdayTimer zu füttern und auszulesen.
Ich habe den in anderer Form für meine HeizungsTimer genutzt und für den WeekdayTimer umgebaut.
Vielleicht kann man darauf aufbauen den wdtimer_widget zu portieren.
Für meine Anwendung reicht dieser aus...
Das ist wieder eine "Übergangslösung" von mir und ich werde da nicht mehr viel Zeit reinstecken (ist nicht böse gemeint).
Optisch ist er sehr einfach gehalten.
Wer hier lust hat weiter zu stylen oder zu ändern kann es gerne machen ;)
Ein grid-tile witdth="10" ist ein muss! Sonst verschieben sich die Reihen. Wie gesagt, für mich ausreichend... 8)
zum runterladen hier hingehen:
https://github.com/mr-petz/ftui/tree/weekdaytimerset/www/ftui/components/timerset
LG mr_petz
Hallo mr_petz,
ich beschäftige mich gerade mit dem Thema "Weekdaytimer". Dazu habe ich noch folgende Fragen:
- In welches Verzeichnis muss deine js-Datei?
- Kann man hiermit nur eine Uhrzeit mitgeben oder ist auch die Definition von Sonnenaufgang bzw. Sonnenuntergang möglich?
Meine Weekdaytimer sind z.B. so in FHEM definiert:
defmod Esszimmerlampe_WT WeekdayTimer Esszimmerlampe_WT_dummy de 1234560|{sunset_abs("HORIZON=-0.9","00:00","00:00")}|on (ReadingsVal("Uhrzeit","state","") le "20:30")Wenn dies noch nicht möglich ist, wer sieht sich in der Lage die FTUI3-Version zu erweitern? Die FTUI2-Vorlage ist unter https://github.com/svenson08/ftui-weekdaytimer-widget (https://github.com/svenson08/ftui-weekdaytimer-widget) zu finden.
Ich bin leider nur Anwender, kann aber gerne testen.
Viele Grüße und einen guten Rutsch
Jürgen
Zitat von: M.Piet am 31 Dezember 2022, 13:26:04
...wie bekomme ich denn nun noch das GIF in die Mitte?
Kannst Du mal die beiden GIFs anhängen ... im Zweifel nur temporär ?
Dann kann man es leichter nachstellen ...
Hi Jürgen,
#1 ins ftui/components/timerset
#2 schaue ich mir nochmal an (wird da nicht auch automatisch eine Zeit gesetzt?)
LG mr_petz
@M.Piet,@OdfFhem
Ich glaube das liegt an der width Angabe.
Hier müsste man mit style="width:50%" arbeiten.
LG
@mr_petz
Könnte gut sein, da das Attribut width die Darstellungsfläche auf (die ersten) 45% einschränkt - daher klebt es vermutlich links ...
Ich hatte übrigens mal in der icon-Komponente geschaut; dort wird jedes Nicht-SVG in ein img-Tag gepackt; zusätzlich könnte man auf size zurückgreifen ... ausprobiert habe ich es bislang aber nicht.
@OdfFhem
Danke fürs nachschauen. Wir müssten wirklich mal alles ins wiki schreiben. Jetzt wo du es schreibst fällt es mir auch wieder ein, dass man im icon den type angeben kann. Wir/ich können sich jeden Anwendungsfall garnicht merken.
LG
Zitat von: mr_petz am 31 Dezember 2022, 14:58:00
@M.Piet,@OdfFhem
Ich glaube das liegt an der width Angabe.
Hier müsste man mit style="width:50%" arbeiten.
LG
Aber das ,,width:50%" verändert doch nur die Größe...?!?!
@OldFhem:
Die GIFs kann ich grad nicht senden, da ich nicht zuhause bin.
Guten Rutsch euch allen :)
Hallo mr_petz,
ich bekomme das Weekdaytimer-Widget einfach nicht ans laufen. Ich habe folgende Schritte durchgeführt:
Die js-Datei ins Verzeichnis ftui/components/timerset verschoben
uergen@ubuntu:/opt/fhem/www/ftui/components/timeset$ ls -l
insgesamt 484
-rwxr--r-- 1 root root 484170 Dez 31 15:00 timerset.component.js
-rw-r--r-- 1 root root 5353 Dez 27 16:37 timeset.component.js
juergen@ubuntu:/opt/fhem/www/ftui/components/timeset$
dummy1 und dummy definiert defmod dummy1 dummy
attr dummy1 room TEST
defmod dummy WeekdayTimer dummy1 de 10:00 on
attr dummy commandTemplate set $NAME $EVENT
attr dummy room TEST
In einem Tab versucht, den WT per popup aufzurufen:
<ftui-grid-tile row="1" col="1" height="7" width="10">
<header>Timer</header>
<ftui-icon name="th" popup-target="pop1"></ftui-icon>
<ftui-popup id="pop1" shape="round" height="">
<header>Timer</header>
<ftui-timerset
device="dummy"
>
</ftui-timerset>
</ftui-popup>
</ftui-grid-tile>
Der Code ist in einer Datei View6.html die so aufgerufen wird:
<ftui-tab-view id="View6">
<ftui-grid-tile row="3" col="3" height="10" width="17">
<ftui-content file="View6.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
Ich bin mit meinem Latein am Ende :-[ und erbitte um Hilfe 8)
Viele Grüße
Jürgen
Hier aufpassen! Die js muss in den Ordner timerset nicht timeset.
Ist einwenig unglücklich der Name.
Ich kann das noch ändern in wdtimer...
LG
@mr_petz, @M.Piet
Irgendwie interessierte mich der Einsatz von ftui-icon sowie ftui-image für GIFs.
Für den Test habe ich die row/column-Konstruktion von @M.Piet verwendet.
Screenshot_gif_original gibt das Resultat wieder, wenn das GIF ohne weitere Attribute dargestellt wird.
Screenshot_gif_angepasst gibt das Resultat wieder, wenn das GIF mittels Attributverwendung angepasst dargestellt wird.
*** <ftui-icon ... size="-3">
*** <ftui-image ... width="150%">
Die Werte der Attribute können im Zweifel je nach GIF variieren.
Ist wie gedacht. Danke fürs testen.
Hier sieht man wie das image aussermittig bei 150% dargestellt wird.
Hast du das image auch mit style width getestet?
Edit:
@OdfFhem,@M.Piet
gerade mal getestet (bis zur Party noch bissl Zeit ;D).
mit width="45%" im ftui-image wird ein style="width:45%" im eingebetteten <img>Tag erzeugt, was sonst 100% hat und damit wird das Bild aussermittig angezeigt.
mit style="width:45%" wird es nur am Elternelement angewendet und das <img>Tag bleibt bei 100% und das Bild wird nicht aussermittig in 45% Größe dargestellt!
Ist glaube was für setstate zum korrigieren... es sei denn es ist so gewollt...
Zitat von: mr_petz am 31 Dezember 2022, 14:51:10
Hi Jürgen,
#1 ins ftui/components/timerset
#2 schaue ich mir nochmal an (wird da nicht auch automatisch eine Zeit gesetzt?)
LG mr_petz
Hi mr_petz,
Verzeichnis wurde korrigiert. Geändert hat sich aber leider nichts. Es passiert einfach nichts. Ich bin ratlos.
Kurz auch die Info zu Punkt #2: Ja, hier wird eine Zeit gesetzt.
Ich wünsche allen ein gutes neues Jahr.
Jürgen
@mr_petz und @OldFhem:
Danke fürs ausgiebige Testen.
Also muss ich erstmal damit leben und wir warten mal ab, was Setstate dazu sagt, richtig?
Hi Jürgen,
ich kann mir gut vorstellen dass deine js nicht in Ordnung ist.
Falsch erstellt oder ähnliches. Die Größe bei dir scheint auch die Falsche zu sein laut screenshot (~484000byte), müsste ca 21000byte sein.
Es müsste mindestens das wie auf dem Bild zu sehen sein oder eine Fehlermeldung angezeigt werden.
Am besten die Dateien immer mit wget holen. Bsp:
wget https://raw.githubusercontent.com/mr-petz/ftui/weekdaytimerset/www/ftui/components/timerset/timerset.component.js
Wenn das bei nicht der Fall ist, auch Browsercache leeren!
Ich hänge mal die js temporär an.
Sag Bescheid wenn du das File hast.
Edit: und nachsichtig mit mir sein... das war eines meiner ersten Komponenten...
ach und dein Bild oben zeigt nicht das geöffnete Popup wo der wdtimer drin ist.?
LG mr_petz
ps. Allen einen guten Start ins neue Jahr :)
Zitat von: M.Piet am 01 Januar 2023, 16:49:42
@mr_petz und @OldFhem:
Danke fürs ausgiebige Testen.
Also muss ich erstmal damit leben und wir warten mal ab, was Setstate dazu sagt, richtig?
Du kannst es wie @OdfFhem sagt mit ftui-icon machen oder es so testen mit style:
<ftui-column color="medium">
<ftui-label text="Holzvergaser"></ftui-label>
<ftui-image style="width:45%" [src]="TestDummy | map('Holzvergaser in Betrieb:`./images/diverses/fire_TR.gif`, Holzvergaser aus:`./images/diverses/sleep_TR.gif`')"></ftui-image>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerDayTemp | round(0,20) "></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerDay | round(0,50)"></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonthTemp | round(0,50)"></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonth | round(0,50)"></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerYearTemp | round(0,50)"></ftui-label>
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerYear | round(0,50)"></ftui-label>
</ftui-column>
LG mr_petz
Zitat von: mr_petz am 01 Januar 2023, 17:28:03
Hi Jürgen,
ich kann mir gut vorstellen dass deine js nicht in Ordnung ist.
Falsch erstellt oder ähnliches. Die Größe bei dir scheint auch die Falsche zu sein laut screenshot (~484000byte), müsste ca 21000byte sein.
Es müsste mindestens das wie auf dem Bild zu sehen sein oder eine Fehlermeldung angezeigt werden.
Am besten die Dateien immer mit wget holen.
Wenn das bei nicht der Fall ist, auch Browsercache leeren!
Ich hänge mal die js temporär an.
Sag Bescheid wenn du das File hast.
Edit: und nachsichtig mit mir sein... das war eines meiner ersten Komponenten...
ach und dein Bild oben zeigt nicht das geöffnete Popup wo der wdtimer drin ist.?
LG mr_petz
ps. Allen einen guten Start ins neue Jahr :)
Danke für Deine Tipps. Habe mir die Datei nun von hier heruntergeladen. Die Größe scheint nun zu passen. Ich teste nun wieder ;D
Viele Grüße
Jürgen
Hi mr_petz,
mein erster erfolgreicher Versuch ;D
Ich habe allerdings noch einige Verständnis-Probleme :)
- Das Format passt irgendwie noch nicht ganz
- Ich kann nichts ändern. Für eine Änderung muss ich erst alles Löschen und dann alles neu hinzufügen. Ist das so gewollt
- Warum muss man "senden"?
<ftui-grid base-width="78" base-height="58" margin="3">
<ftui-grid-tile row="1" col="1" height="5" width="10">
<header>Timer</header>
<ftui-timerset
device="dummy"
>
</ftui-timerset>
</ftui-grid-tile>
</ftui-grid>
Viele Grüße
Jürgen
PS: Ich hoffe doch, dass ich nachsichtig bin ;D Ich bin ja über Eure Unterstützung sehr froh.
zu1) was meinst du mit Format? Wenn du das grau meinst, das ist das overlay wenn dein timerdevice disabled ist und da kommen wir:
zu2) kann es sein das dein timerdevice disabled ist? rechts unten den switch anmachen. Wenn disabled nicht gesetzt, ist standardmäßig aus.
zu3) senden ist speichern. erst wenn du alles eingestellt hast, wird mit senden alles zu Fhem geschickt und gespeichert.
LG
Hi,
ok. jetzt habe ich das mit "disable" verstanden. Also einfache Werte setzen funktioniert. Uhrzeit über sunrise/sunset mit Bedingung fehlt leider 8) siehe Screenshot
Wer könnte hier helfen ::)
Ich stehe auch gerne als Tester bereit :)
Viele Grüße
Jürgen
Wie ich hier schon schrieb:
https://forum.fhem.de/index.php/topic,115259.msg1185270.html#msg1185270
ist das eine einfache Übergangslösung.
Für mehr nutze ich den nicht. Auch optisch habe ich mir nicht viel Mühe gegeben...
Für Extravariablen, wie sunset/sunrise, müsste ich wissen wie die in Fhem gestezt/verarbeitet werden und wie die im "alten" widget integriert wurden...
Alte Definition und list wären Hilfreich.
Die Basis hab ich ja...
Ein neuer Thread bestimmt auch, da hier StandardFtui3Themen behandelt werden sollen...
LG
Hi mr_ petz,
ich frage Mal ganz "Blauäugig:
Kann man nicht die Programmierung von https://github.com/svenson08/ftui-weekdaytimer-widget/blob/master/js/widget_wdtimer.js (https://github.com/svenson08/ftui-weekdaytimer-widget/blob/master/js/widget_wdtimer.js) größtenteils übernehmen?
Danke für Deine Unterstützung.
Viele Grüße
Jürgen
Leider nein, ist alles in jquery und ajax.
Hier ist alles reines Javascript.
Ich schaue mir aber gerade die CONDITION mal an...
Noch eine Frage zum Verständnis für mich. wozu braucht man sunset/sunrise im weekdaytimer?
LG
Ich nutze dies, um Lampen nach Sonnenuntergang an bestimmten Wochentagen an bzw. auszuschalten. Unsere Haustiere benötigen Licht, wenn wir unterwegs sind.
Viele Grüße
Jürgen
Ich hätte mal eine Frage zum Slider. Ist es irgendwie möglich die Schrittweite anzugeben? Also nicht jeweils um 1 zu erhöhen, sondern um z.B. 5 oder 10? Hätte da jemand ein Beispiel?
Gruß
eurofinder
Das erreichst du mit step. Bsp.:
<ftui-slider value="10" step="10"></ftui-slider>
LG
@mr_petz:
Danke, probiere ich aus. Habe das in den Beispielen nicht gefunden oder einfach überlesen.
Gruß
eurofinder
Dann hätte ich da noch zwei Fragen zum popup, da ich daran irgendwie gescheitert bin:
1) Ich würde gerne im Header des popup einen variablen Namen anzeigen lassen. Mir ist bekannt, dass man z.B. bei content über variablenname="text" und dann im content per {{variablenname}} darauf zugreifen kann. Wie mache ich das aber im header des popup?
2) Ist es auch möglich im popup selbst auf variable Inhalte zuzugreifen?
Gruß
eurofinder
Jupp. Hab es erstmal so gemacht, auch wenn das GIF nun sehr klein ist.
Weil es grad in meinem Code auftauchte und ich es nicht lösen kann. Ist irgendwo beschrieben, wie die "round" Funktion funktioniert? Ich bekomme ich es nicht hin, auf eine Nachkommastelle zu kürzen. Von der Logik her hätte ich auf round(0,10) getippt. Das geht aber nicht.
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonth | round(0,50)"></ftui-label> Zitat von: mr_petz am 01 Januar 2023, 17:44:14
Du kannst es wie @OdfFhem sagt mit ftui-icon machen oder es so testen mit style:
<ftui-image style="width:45%" [src]="TestDummy | map('Holzvergaser in Betrieb:`./images/diverses/fire_TR.gif`, Holzvergaser aus:`./images/diverses/sleep_TR.gif`')"></ftui-image>
[/quote]
ZitatIch bekomme ich es nicht hin, auf eine Nachkommastelle zu kürzen.
Auch schonmal round(x) versucht?
x=Anzahl der Nachkommastellen.
@M.Piet
Dafür gibt es auch das/die Pipe fix().
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonth | fix(1)"></ftui-label>
und die 45% kannst du auch abändern wenn dein image dir zu klein erscheint..
LG
Zitat von: eurofinder am 02 Januar 2023, 07:05:51
Dann hätte ich da noch zwei Fragen zum popup, da ich daran irgendwie gescheitert bin:
1) Ich würde gerne im Header des popup einen variablen Namen anzeigen lassen. Mir ist bekannt, dass man z.B. bei content über variablenname="text" und dann im content per {{variablenname}} darauf zugreifen kann. Wie mache ich das aber im header des popup?
2) Ist es auch möglich im popup selbst auf variable Inhalte zuzugreifen?
Gruß
eurofinder
1 <header>{{Name}}</header>
2 Wenn den popup auch ein content enthält ja.
LG
edit: noch was komisches.
Ich will mir die Symbole der Tonnen größer anzeigen lassen. Beim Neuladen der Seite ist die Tonne kurz groß, bis dann die Zahl der Resttage hinzugefügt wird: dann ist sie wieder kein...?!?
<ftui-icon class="size-4" name="trash" color="green" [class-name]="Abfallkalender:Muellkalender_AltpapierGrueneTonne_days | map('0:spin,:hop')"></ftui-icon>
---------------------------------------------------------------------------------
Über eins bin ich grad noch bei meinen Tonnen gestolpert, was ich mir gar nicht erklären kann.
Sobald meine Tonnen in den "spin" oder den "hop" gehen, werden die Resttage nicht mehr angezeigt.
Schließt das eine das andere aus?
Das Reading Abfallkalender:Muellkalender_VerpackungGelbeTonne_days ist bei 0, also ist der spin schon mal richtig. Aber die Resttage werden nicht mehr angezeigt.
<ftui-icon name="trash" color="yellow" [class-name]="Abfallkalender:Muellkalender_VerpackungGelbeTonne_days | map('0:spin,:hop')"></ftui-icon>
<ftui-badge [color]="Abfallkalender:Muellkalender_VerpackungGelbeTonne_days | step('0:red, 1:red')"> </ftui-badge>
<ftui-badge [text]="Abfallkalender:Muellkalender_VerpackungGelbeTonne_days"> </ftui-badge>
Zitat von: mr_petz am 02 Januar 2023, 10:08:18
@M.Piet
Dafür gibt es das/die Pipe fix().
<ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonth | round(5) | fix(1)"></ftui-label>
und die 45% kannst du auch abändern wenn dein image dir zu klein erscheint..
LG
Super, ich danke dir!
@M.Piet
Die 0 ist im [text] vom badge ein "Sonderling". Ich habe es so gelöst Bsp.:
| map('0:´０´')
<ftui-icon name="trash" color="yellow" [class-name]="Abfallkalender:Muellkalender_VerpackungGelbeTonne_days | map('0:spin,:hop')"></ftui-icon>
<ftui-badge [text]="Abfallkalender:Muellkalender_VerpackungGelbeTonne_days | map('0:´０´')" [color]="Abfallkalender:Muellkalender_VerpackungGelbeTonne_days | step('0:red, 1:red')"></ftui-badge>
Das sieht man auch in @setstates Demo vom badge. Bei 0 wird nix angezeigt...
Hinweis: wenn du step('0:red, 1:red') angiebst macht keinen sinn.
hier wird jeder Zustand red.
LG mr_petz
Zitat von: mr_petz am 02 Januar 2023, 11:27:08
@M.Piet
Die 0 ist im [text] vom badge ein "Sonderling". Ich habe es so gelöst Bsp.:
| map('0:´０´')
<ftui-icon name="trash" color="yellow" [class-name]="Abfallkalender:Muellkalender_VerpackungGelbeTonne_days | map('0:spin,:hop')"></ftui-icon>
<ftui-badge [text]="Abfallkalender:Muellkalender_VerpackungGelbeTonne_days | map('0:´０´')" [color]="Abfallkalender:Muellkalender_VerpackungGelbeTonne_days | step('0:red, 1:red')"></ftui-badge>
Das sieht man auch in @setstates Demo vom badge. Bei 0 wird nix angezeigt...
Hinweis: wenn du step('0:red, 1:red') angiebst macht keinen sinn.
hier wird jeder Zustand red.
LG mr_petz
Ohhh....das muss man erstmal wissen...ich habe ewig nach der Ursache gesucht, warum grad die "0" nicht geht.
Vielen Dank. :)
Ich hatte in meinem Posting noch was zum Thema "nicht funktionierende Mülltonnengröße" hinzugefügt. Wurde vielleicht überlesen. Ist das auch so ein "Sonderfall"?
Zitat von: M.Piet am 02 Januar 2023, 11:40:41
Ohhh....das muss man erstmal wissen...ich habe ewig nach der Ursache gesucht, warum grad die "0" nicht geht.
Vielen Dank. :)
Ich hatte in meinem Posting noch was zum Thema "nicht funktionierende Mülltonnengröße" hinzugefügt. Wurde vielleicht überlesen. Ist das auch so ein "Sonderfall"?
Dafür musst du im [class-name] oder [class-list] die size-4 auch mitgeben. class wird hier durch das Binding "Überschrieben".
Oder gibst die Größe mit size="4" an. Dann ist die fest und brauchst sie nicht mit ins map() schreiben.
Perfekt! Vielen Dank!
ZitatDafür gibt es auch das Pipe fix().
Mit round() geht es aber auch, gerade eben noch ausprobiert.
@mr_petz:
Zitat1 <header>{{Name}}</header>
2 Wenn den popup auch ein content enthält ja.
Zu 1;
Klappt bei mir irgendwie nicht oder ich habe es falsch verstanden:
<ftui-view-item testvar="Bezeichnung" @click="testpop.open()">
Popup-Test
</ftui-view-item>
<ftui-popup id="testpop" timeout="0">
<header>{{testvar}}</header>
<ftui-button popup-close>close</ftui-button>
<ftui-label @click="testpop.close()">Close testpop</ftui-label>
</ftui-popup>
Erhalte ich: {{testvar}} im Header und nicht Bezeichnung.
Zu 2:
Hab mich da vielleicht missverständlich augedrückt. Ich würde gerne an ein Popup einige varible Werte übergeben. Ein Wert soll im Header stehen. Die übrigen Werte würde ich gerne an content-Aufrufen "übergeben". Also so etwas wie:
<ftui-view-item Var1="Bezeichnung1" Var2="Bezeichnung2" Var3="Bezeichnung3" Var4="Bezeichnung4" @click="testpop.open()">
...
</ftui-view-item>
<ftui-popup id="testpop" timeout="0">
<header>{{Var1}}</header>
<ftui-content device=Var2 room=Var3 file="contents/content-Aufruf_1.html"></ftui-content>
<ftui-content device=Var2 window=Var4 file="contents/content-Aufruf_2.html"></ftui-content>
<ftui-button popup-close>close</ftui-button>
<ftui-label @click="testpop.close()">Close testpop</ftui-label>
</ftui-popup>
Ich würde gerne für Rollläden bzw. Thermostate Einstellungen über ein Popup-Menue machen und diesem Parameter wie Device-Name, Raum ... übergeben. Ansonsten müsste ich für jedes Gerät ein eigenes Popup definieren und wenn sich ein Parameter oder im Design was ändert das überall anpassen.
Geht das irgendwie?
Gruß
eurofinder
Ich stehe im Moment ein wenig auf dem Schlauch und könnte mal eure Unterstützung gebrauchen.
Problemstellung: "hidden" soll in Abhängigkeit vom Vergleich zweier Readings gesetzt werden. Also etwas wie:
<ftui-label [text]="Reading1 | map('Reading2:true, .*:false')></ftui-label>
Die Frage ist nun, ob ich in einer Pipe-Funktion nochmal ein Reading auslesen kann und wie man das dann definiert (Alternativ, ob eine Variable {{Variable}} in einer Pipe verwendet werden kann).
Ergebnis sollte sein, wenn zwei Readings identisch sind, dann wird das Label nicht angezeigt und ansonsten wird es angezeigt.
Zitat von: grossmaggul am 02 Januar 2023, 12:52:53
Mit round() geht es aber auch, gerade eben noch ausprobiert.
Hi grossmaggul,
in bestimmten Fällen ist round(x) nicht gleich fix(x) Nachkommastelle.
Ich habe mal ein Bild zur Verdeutlichung angehangen.
1. Zahl ist die Ausgangszahl.
LG mr_petz
Zitat von: jual am 02 Januar 2023, 13:41:19
Ich stehe im Moment ein wenig auf dem Schlauch und könnte mal eure Unterstützung gebrauchen.
Problemstellung: "hidden" soll in Abhängigkeit vom Vergleich zweier Readings gesetzt werden. Also etwas wie:
<ftui-label [text]="Reading1 | map('Reading2:true, .*:false')></ftui-label>
Die Frage ist nun, ob ich in einer Pipe-Funktion nochmal ein Reading auslesen kann und wie man das dann definiert (Alternativ, ob eine Variable {{Variable}} in einer Pipe verwendet werden kann).
Ergebnis sollte sein, wenn zwei Readings identisch sind, dann wird das Label nicht angezeigt und ansonsten wird es angezeigt.
Wenn dann so Bsp.:
[hidden]="device | map('off:false'); device2 | map('off:true, on:false')"
LG
@eurofinder
Ah jetzt verstehe ich.
Nein, du kannst nur variablen einem im content befindlichen Popup oder anderen Komponenten mitgeben...
LG
Edit:
Bsp.:
https://forum.fhem.de/index.php/topic,115259.msg1250625.html#msg1250625
Zitat von: mr_petz am 02 Januar 2023, 13:47:41
Wenn dann so Bsp.:
[hidden]="device | map('off:false'); device2 | map('off:true, on:false')"
Vielen Dank für das schnelle Feedback, auch wenn es mein Problem nicht wirklich löst. Vielleicht nochmal etwas konkreter:
Device1 enthält ein Datum
Device2 enthält auch ein Datum
Wenn Device1 == Device2 dann hidden = true sonst hidden = false
Man müsste also dem "map()" eine Variable übergeben können oder muß ich mir dafür irgendein kleines Script bauen. Bin bzgl. dieser ganzen Programmierung nicht wirklich der Profi 8)
Wenn es im <ftui-label> sein soll dann so über Umweg als Sonderlösung Bsp.:
<ftui-label [text]="Device1 | t1=>this.t1=t1; Device2 | t2=>this.t2=t2" [hidden]="Device1 | t1=>this.t2===t1?this.t=true:'' | map('this.t:true'); Device2 | t2=>this.t1===t2?this.t=true:'' | map('this.t:true')"></ftui-label>
Hier wird hidden=true wenn beide device exakt den gleichen Inhalt haben.
Edit:
Für ein [text] device im label:
<ftui-label [text]="Device1" [hidden]="Device1 | t1=>this.t1=t1 | ()=>this.t2===this.t1?this.t=true:'' | map('this.t:true'); Device2 | t2=>this.t2=t2 | ()=>this.t1===this.t2?this.t=true:'' | map('this.t:true')"></ftui-label>
LG
Zitatn bestimmten Fällen ist round(x) nicht gleich fix(x) Nachkommastelle.
Ah, O.K., round macht eben das was der Name schon sagt, Runden. :)
Und da wird dann die Null leider unter den Tisch gekehrt. >:(
Zitat von: grossmaggul am 02 Januar 2023, 17:17:21
Ah, O.K., round macht eben das was der Name schon sagt, Runden. :)
Und da wird dann die Null leider unter den Tisch gekehrt. >:(
Ja leider. Ich nutze noch meine eigene Pipe für das Runden auf .5 oder .0 mit extra 0. Der optik halber ;D:
| num=>(Math.round(num * 2) / 2).toFixed(2)
LG
@mr_petz:
ZitatAh jetzt verstehe ich.
Nein, du kannst nur variablen einem im content befindlichen Popup oder anderen Komponenten mitgeben...
OK, danke für die Info und den Link.
Wäre toll, wenn es die von mir angesprochene Funktionalität geben würde.
Gruß
eurofinder
Zitat von: mr_petz am 02 Januar 2023, 17:22:30
| num=>(Math.round(num * 2) / 2).toFixed(2)
Die Diskussion um round- und fix-Pipe scheint ja reges Interesse zu finden.
Insbesondere oben genannte Pipe hat mich zum Selbsttest verleitet.
Der angehängte Screenshot basiert auf der viel weiter oben verwendeten Zahl.
- Ausgangszahl steht in der 1.Spalte
- die angestrebte Anzahl der Nachkommastellen steht in der 2.Spalte
- das round-Ergebnis steht in der 3.Spalte
- das fix-Ergebnis steht in der 4.Spalte
- das Ergebnis der oben genannten Pipe steht in der 5.Spalte
*** round hat maximal die angestrebte Anzahl von Nachkommastellen; nachlaufende Nullen haben keine Bedeutung und werden abgeschnitten
*** fix hat immer die angestrebte Anzahl von Nachkommastellen; fehlende Nullen werden angehängt
*** ??? fehlt bei der oben genannten Pipe noch etwas ???
Ach mein lieber OdfFhem ;)
Ist klar. wird immer auf .0 gerundet, weil der decimalswert kleiner 25 ist...
wert mit 1.2512345678 sieht schon anders aus...
es geht da um x.5! hatte ich oben erwähnt...
Du wirst es sicher schon wissen...
um so größer der toFixed und länger die decimals.... um so mehr nullen muss man an die 2 hängen...
Habe ich nicht erwähnt.
In meiner Situation kommen nur 2 Nachkommastellen...
Bsp. wäre bei der Ausgangszahl fix=3
| num=>(Math.round(num * 200) / 200).toFixed(3)
LG
Zitat von: mr_petz am 02 Januar 2023, 18:48:36
Du wirst es sicher schon wissen...
Eine gewisse Vorahnung hatte ich ... s. Screenshot
tofixed(3) passt! ;D
Hast du eine andere Lösung um auf hinten 5 zu runden?
Meine pipe rundet nun mal nur auf .0 oder .5.
wenn kleiner x.25 und größer x.75 wird auf 0 und alles was dazwischen ist auf x.5 und die 0 hinten dran gehangen.
Also wenn du mit 1.255970 testest, wirst du sehen das x.50 da steht... (mit der ersten pipe!)
LG
Edit:
Zitat von: mr_petz am 02 Januar 2023, 17:22:30
Ich nutze noch meine eigene Pipe für das Runden auf .5 oder .0 mit extra 0. Der optik halber ;D:
Nochmal zum Verständnis. um so weiter du hinten eine gerundete 5 haben möchtest, umso mehr Nullen müssen an die beiden 2 der Berechnung...
Sieht man an deinem letzten Test/Bsp.: Ergebnis ist 1.195 weil da die letzten 5970 sind und da wird auf 5 abgerundet durch die pipe.
Zitat von: mr_petz am 02 Januar 2023, 19:24:56
Hast du eine andere Lösung um auf hinten 5 zu runden?
Nicht wirklich ... mir fehlt aber auch bis jetzt noch ein Anwendungsfall :-\
Zum Beispiel meine Aussentemperatur.
Diese zählt auf 3 Kommastellen. Bsp. gerade : 9.125
Das sieht in meinen Augen nicht gut aus. Des Wegen hier am Bsp. x.0 oder x.5
LG mr_petz
Langsam wird's hell ... schön bei diesem Beispiel: FTUI3 liefert die Standardwerkzeuge, verhindert aber auch keine "Hausmittel" :)
Zitat von: OdfFhem am 02 Januar 2023, 20:02:07
Langsam wird's hell ...
Ist doch gerade erst dunkel geworden... ;D
Zitat von: mr_petz am 02 Januar 2023, 15:21:59
Wenn es im <ftui-label> sein soll dann so über Umweg als Sonderlösung Bsp.:
<ftui-label [text]="Device1 | t1=>this.t1=t1; Device2 | t2=>this.t2=t2" [hidden]="Device1 | t1=>this.t2===t1?this.t=true:'' | map('this.t:true'); Device2 | t2=>this.t1===t2?this.t=true:'' | map('this.t:true')"></ftui-label>
Hier wird hidden=true wenn beide device exakt den gleichen Inhalt haben.
Edit:
Für ein [text] device im label:
<ftui-label [text]="Device1" [hidden]="Device1 | t1=>this.t1=t1 | ()=>this.t2===this.t1?this.t=true:'' | map('this.t:true'); Device2 | t2=>this.t2=t2 | ()=>this.t1===this.t2?this.t=true:'' | map('this.t:true')"></ftui-label>
LG
Vielen Dank nochmals für den tollen Support. Funktioniert bei mir leider noch nicht ganz richtig und liefert auch seltsame Ergebnisse, die ich noch nicht nachvollziehen konnte. Ich versuche erstmal das Konstrukt noch ein wenig besser zu verstehen und schau dann mal, ob ich auf der Basis eine Lösung finde.
Du müsstest mir schon paar mehr Infos geben und deine genaue Vorstellung und Definitionen...
Mit Device1 und 2 die eine Uhrzeit haben kann ich nicht viel anfangen...
Da kann ich nur raten... Sorry
LG
Zitat von: mr_petz am 02 Januar 2023, 21:32:33
Du müsstest mir schon paar mehr Infos geben und deine genaue Vorstellung und Definitionen...
Mit Device1 und 2 die eine Uhrzeit haben kann ich nicht viel anfangen...
Da kann ich nur raten... Sorry
LG
Ok, dann versuche ich es nochmal etwas genauer. Es geht um den Vergleich von zwei Datumsinfos im Format mm.dd.yyyy. Wenn die beiden Datumsinfos identisch sind, würde ich ein "ftui-row" mittels "hidden" verstecken. Also etwa wie folgt:
<ftui-row hidden = "Device1.datum == Devic2.datum ? true : false"></ftui>
Ok, so wie im gif habe ich es verstanden...
Funktioniert...
Wenn Datum1===Datum2 ist, wird die row ausgeblendet.
Damit die Höhe dabei nicht verloren geht, ist eine unabhängige row darum.
Hier mein Democode:
<ftui-button (value)="Device1" states="01.01.2023,02.01.2023,03.01.2023">Device1</ftui-button>
<ftui-button (value)="Device2" states="01.01.2023,02.01.2023,03.01.2023">Device2</ftui-button>
<ftui-row height="50px">
<ftui-row [hidden]="
Device1 | t1=>this.t1=t1 | ()=>this.t2===this.t1;
Device2 | t2=>this.t2=t2 | ()=>this.t1===this.t2
">
<ftui-label size="5" color="primary" [text]="Device1" class="thin"></ftui-label>
<ftui-label size="5" color="primary" [text]="Device2" class="thin"></ftui-label>
</ftui-row>
</ftui-row>
Edit: Code gekürzt...
Und wieder ein interessantes Feature, das ich gerne für z.B. die Anzeige einer Multiplikation nutzen würde ...
<ftui-row height="50px">
<ftui-button [value]="ftuitest:integer1" (value)="setreading ftuitest:integer1" states="1,2,3,4,5">integer1 ... 1..5</ftui-button>
<ftui-button [value]="ftuitest:integer2" (value)="setreading ftuitest:integer2" states="1,2,3,4,5">integer2 ... 1..5</ftui-button>
</ftui-row>
<ftui-row height="50px">
<ftui-row>
<ftui-label size="5" color="red" [text]="ftuitest:integer1" class="thin"></ftui-label>
<ftui-label size="5" color="red" [text]="ftuitest:integer2" class="thin"></ftui-label>
<ftui-label size="5" color="yellow" [text]="ftuitest:integer1 | t1=>this.t1=t1 | ()=>this.t=this.t2===this.t1 ; ftuitest:integer2 | t2=>this.t2=t2 | ()=>this.t=this.t1===this.t2 | ()=>this.t"></ftui-label>
<ftui-label size="5" color="green" [text]="ftuitest:integer1 | t1=>this.t1=t1 ; ftuitest:integer2 | t2=>this.t2=t2 | ()=>this.t1*this.t2"></ftui-label>
</ftui-row>
</ftui-row>
* 1.Spalte (rot) = Wert von integer1
* 2.Spalte (rot) = Wert von integer2
* 3.Spalte (gelb) = sind integer1 und integer2 gleich ?
* 4.Spalte (grün) = Ergebnis der Multiplikation von integer1 und integer2
**** Startwerte **** ... 2 2 true 4
links drücken ... 3 2 false 3
drücken rechts ... 3 3 true 9
drücken rechts ... 3 4 false 12
links drücken ... 4 4 true 4
drücken rechts ... 4 5 false 20
links drücken ... 5 5 true 5
... klappt aber gemäß der obigen Ergebnisübersicht noch nicht wirklich
- den yellow-Teil eingekürzt ... Ergebnis bleibt gleich "falsch" ... 3.Spalte zeigt immer das Ergebnis der letzten Teilaktion
<ftui-label size="5" color="yellow" [text]="ftuitest:integer1 | t1=>this.t1=t1 | ()=>this.t=this.t2===this.t1 ; ftuitest:integer2 | t2=>this.t2=t2 | ()=>this.t=this.t1===this.t2></ftui-label>
- den green-Teil erweitert ... Ergebnis entspricht den Erwartungen ... beide Teilaktionen führen die Multiplikation durch
<ftui-label size="5" color="green" [text]="ftuitest:integer1 | t1=>this.t1=t1 | ()=>this.t1*this.t2 ; ftuitest:integer2 | t2=>this.t2=t2 | ()=>this.t1*this.t2"></ftui-label>
Schön dich wieder zu erfreuen :D
Wie bist du darauf gekommen?:
()=>this.t=this.t2===this.t1
this.t wird true wenn beide gleich.?
5 und 5 ist true? usw...
LG
Edit: jetzt hats klick gemacht...
@jual
Du kannst es noch abändern/kürzen in:
[hidden]="Device1 | t1=>this.t1=t1 | ()=>this.t2===this.t1 ; Device2 | t2=>this.t2=t2 | ()=>this.t1===this.t2"
Zitat von: mr_petz am 02 Januar 2023, 22:47:35
Ok, so wie im gif habe ich es verstanden...
Funktioniert...
Wenn Datum1===Datum2 ist, wird die row ausgeblendet.
Damit die Höhe dabei nicht verloren geht, ist eine unabhängige row darum.
Hier mein Democode:
Perfek! Herzlichen Dank für die Mühe. Da habe ich wieder ein weiteres Beispiel, um diese ganze Coderei ein wenig besser zu verstehen ;-).
@OdfFhem
Ich hatte hier schonmal eine Addition zweier Readings erstellt. :
https://forum.fhem.de/index.php/topic,115259.msg1243306.html#msg1243306
LG
Zitat von: mr_petz am 03 Januar 2023, 08:11:39
Schön dich wieder zu erfreuen :D
Gerne doch :)
Zitat von: mr_petz am 03 Januar 2023, 08:11:39
Du kannst es noch abändern/kürzen
Ungetestete Anmerkungen ...
- map-Pipe könnte man vermutlich auch weglassen; wird sowieso nur bei Änderung von Device2 angewendet
- this.t könnte man vermutlich auch weglassen; der Vergleich alleine ergibt ja schon true oder false
Zitat von: mr_petz am 03 Januar 2023, 10:45:33
Ich hatte hier schonmal eine Addition zweier Readings erstellt.
Schaue ich mir heute Abend an ...
Super, funktioniert...
Klar, wenn beide gleich -> wird true im hidden gesetzt...
Habe es oben geändert...
LG
Zitat von: eurofinder am 02 Januar 2023, 17:27:30
@mr_petz:
OK, danke für die Info und den Link.
Wäre toll, wenn es die von mir angesprochene Funktionalität geben würde.
Gruß
eurofinder
Ich habe mal zum testen eine einfache Übergangslösung...
Ob die gut, sinnvoll oder in allen Lagen passt und funktioniert weis ich nicht.
In meinen Test´s ging es immer. Es wurden danach auch die Readings gelesen...
Hier wird nachdem die Seite komplett geladen ist die innerHTML ausgetauscht/replaced. Ist so ähnlich wie im Content (hier wird der Inhalt des file replaced).
Es muss ein komplettes html inkl. body sein. Alles andere geht ja über content-file.
Zahlen können nicht als Attribute angegeben werden und das script muss am besten in den head.
Wenn das hier von @setstate nicht gewünscht wird, dann lösche ich diesen Beitrag!
@OdfFhem könnte da vielleicht auch mal drüber schauen... :D
Bsp.:
im ftui-tab
<ftui-tab view="View1" direction="vertical" active device1="dummy">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
und im ftui-tab-view:
<ftui-tab-view id="View1">
<ftui-grid-tile row="1" col="2" height="5" width="19">
<header>{{device1}}</header>
<ftui-label [text]="{{device1}}" class="size-5 align-left"></ftui-label>
</ftui-grid-tile>
</ftui-tab-view>
Hier wird device1 ersetzt durch den definierten Namen. Man muss natürlich jetzt eindeutige ID´s vergeben! Wenn welche doppelt gesetzt sind, wird das zuerst gelesene genommen! Groß/Kleinschreibung ist auch egal. Wenn DEVICE1 wird auch device1 oder Device1 gesetzt!
<script>
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
setVariable();
}
};
function setVariable() {
const rawText = document.body.innerHTML;
const solvedContent = String(rawText).replace(/\{\{([^}]+)\}\}/g, variable => {
return document.body.querySelector('['+variable.slice(2, -2)+']').getAttribute(variable.slice(2, -2)) || '';
});
document.body.innerHTML = solvedContent;
}
</script>
alternativ das ans Ende vor dem </body>:
<script>
setVariable();
function setVariable() {
const rawText = document.body.innerHTML;
const solvedContent = String(rawText).replace(/\{\{([^}]+)\}\}/g, variable => {
return document.body.querySelector('['+variable.slice(2, -2)+']').getAttribute(variable.slice(2, -2)) || '';
});
document.body.innerHTML = solvedContent;
}
</script>
Teste es mal und sag Bescheid ob ok oder nicht...
LG mr_petz
Ich habe inzwischen eine relative große FTUI index.html, da ich mein GUI per <ftui-tab> bzw. <ftui-tab-view> in einzelne Tabs aufgeteilt habe. Zwischen die einzelnen <ftui-tab-view> Tags habe ich jeweils die für mich passenden <ftui-grid-tile> samt ihrem Inhalt platziert.
Jetzt möchte ich das Ganze durch Auslagerung in einzelne Dateien besser strukturieren, leider komme ich mit <ftui-content> innerhalb der <ftui-tab-view> nicht zum Ziel.
<ftui-grid base-width="85" base-height="79" margin="5">
<ftui-grid-tile row="1" col="1" height="6" width="1">
<ftui-column>
<ftui-tab view="Home" direction="vertical" active>
<ftui-icon name="home"></ftui-icon>
<ftui-label>Übersicht</ftui-label>
</ftui-tab>
<ftui-tab view="Strom" direction="vertical" active>
<ftui-icon name="battery"></ftui-icon>
<ftui-label>Strom</ftui-label>
</ftui-tab>
<ftui-tab view="Auto" direction="vertical">
<ftui-icon name="automobile"></ftui-icon>
<ftui-label>Auto</ftui-label>
</ftui-tab>
<ftui-tab view="Wasser" direction="vertical">
<ftui-icon name="shower"></ftui-icon>
<ftui-label>Wasser</ftui-label>
</ftui-tab>
<ftui-tab view="Heizung" direction="vertical">
<ftui-icon name="thermometer1"></ftui-icon>
<ftui-label>Heizung</ftui-label>
</ftui-tab>
<ftui-tab view="Garten" direction="vertical">
<ftui-icon name="tree"></ftui-icon>
<ftui-label>Garten</ftui-label>
</ftui-tab>
<ftui-tab view="View5" direction="vertical">
<ftui-icon name="home"></ftui-icon>
<ftui-label>Innenräume</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="Home">
<ftui-content file="view_home.html"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="Strom">
<ftui-content file="view_strom.html"></ftui-content>
</ftui-tab-view>
...
</ftui-grid>
Ich habe den Code zwischen <ftui-tab-view> in eine extra Datei kopiert und in der index-Datei durch <ftui-content> ersetzt, leider passt dann das Grid-Layout gar nicht mehr. Die einzelnen grid-tiles sind einfach untereinander platziert und nutzen die gesamte Breite des viewport aus.
Ergänze ich die externe Datei mit der grid Definition <ftui-grid base-width="85" base-height="79" margin="5"> .... </ftui-grid>, so passt das Layout wieder. ABER: Dann funktioniert die Tab-View Steuerung nicht mehr. Beim Klick auf ein Tab-Icon passiert nichts.
Hat mir jemand einen Tipp, wie man Tab-View und ftui-content sinnvoll kombinieren kann, dass es funktioniert?
EDIT: Hab es selber geschafft, dank der Frage von Eisix und seinem Beispielcode. Problem bei mir war, dass ich das <ftui-content> noch in ein <ftui-grid-tile> packen musste. Ausserdem musste ich auf die Reihenfolge der Elemente im Code achten. Diese bestimmt die Position im Z-Stapel und bei mir hat sich damit ein grid Element "oberhalb" des Tab-View Menu befunden, somit waren die Links "dahinter" und nicht mehr erreichbar. ???
Zitat von: mr_petz am 04 Januar 2023, 11:11:20
@juemuc
Ich habe mal meinen wdtimer einwenig angepasst.
Jetzt kannst du deine sunrise/sunset- timer einlesen und die Wochentage setzen oder neue Standardtimer hinzufügen.
Du kannst aber noch keine neuen sunrise/sunset- timer erstellen. Löschen ja.
Neue Version zum testen ist Online bei mir.
LG mr_petz
Super. Ich werde gleich testen und berichten.
Viele Grüße
Jürgen
Hallo,
ich habe ein Problem mit <video> wenn ich <ftui-content> nutze. Ohne content-file wird das Video abgespielt (tab-view Main), mit (tab-view Main1) schlägt es fehl. Habe mal alles andere weg genommen und eine Teststellung gebaut. Lediglich hls.js muss installiert werden.
test4.html
<!DOCTYPE html>
<html>
<head>
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<meta name='debug' content='0'>
<meta name='toast_position' content='topCenter'>
<script src="./node_modules/hls.js/dist/hls.js"></script>
<title>FTUI 3.0 MediaPad</title>
</head>
<body>
<ftui-grid base-width="69" base-height="48" margin="1">
<ftui-grid-tile row="1" col="1" height="17" width="1">
<ftui-column>
<ftui-cell class="my-top-40">
<ftui-row>
<div class="size-0">FTUI : 3</div>
</ftui-row>
<ftui-label [text]="REFRESH" class="size-0"></ftui-label>
</ftui-cell>
<ftui-tab view="Main" active><ftui-icon class="size-2 my-top-30" name="home1"></ftui-icon></ftui-tab>
<ftui-tab view="Main1" active><ftui-icon class="size-2 my-top-30" name="home1"></ftui-icon></ftui-tab>
<div class="fixed-bottom">
<ftui-column>
<ftui-clock format="eeee" class=""></ftui-clock>
<ftui-clock format="DD.MM.YYYY" class=""></ftui-clock>
<ftui-clock format="hh:mm" class=""></ftui-clock>
</ftui-column>
</div>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="Main">
<ftui-grid-tile row="1" col="2" height="17" width="18" class="">
<ftui-row>
<ftui-cell>
<ftui-icon class="size-1"
[name]="Klingel:state | map('.*:bell-o')"
@click="popup_Klingel1.open()"
></ftui-icon>
<ftui-label>Klingel</ftui-label>
</ftui-cell>
</ftui-row>
</ftui-grid-title>
</ftui-tab-view>
<ftui-tab-view id="Main1">
<ftui-grid-tile row="1" col="2" height="17" width="18" class="">
<ftui-content file="test4.1.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
<ftui-popup id="popup_Klingel1" [active]="Klingel:state | map('on: true, off: false')" height="480px" width="640px" position="page" timeout="120">
<video id="video2" controls width="100%" height="100%" </video>
<script>
var video = document.getElementById('video2');
if (Hls.isSupported()) {
var hls = new Hls({
debug: true,
});
hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video2);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true;
video.play();
});
}
</script>
</ftui-popup>
</body>
</html>
test4.1.html
<ftui-grid base-width="69" base-height="48" margin="1">
<ftui-grid-tile row="1" col="11" height="2" width="1" class="mybgimage">
<header>Tür</header>
<ftui-content file="test4.1.1.html"></ftui-content>
</ftui-grid-tile>
</ftui-grid>
test4.1.1.html
<ftui-row>
<ftui-cell>
<ftui-icon class="size-1"
[name]="Klingel:state | map('.*:bell-o')"
@click="popup_Klingel.open()"
></ftui-icon>
<ftui-label>Klingel</ftui-label>
</ftui-cell>
</ftui-row>
<ftui-popup id="popup_Klingel" [active]="Klingel:state | map('on: true, off: false')" height="480px" width="640px" position="page" timeout="120">
<video id="video4" controls width="100%" height="100%" </video>
<script>
var video = document.getElementById('video4');
if (Hls.isSupported()) {
var hls = new Hls({
debug: true,
});
hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video2);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true;
video.play();
});
}
</script>
</ftui-popup>
Hat jemand eine Idee?
Habe die Loesung gefunden, das popup muss in den body der test4.html.
Gruss
Eisix
Zitat von: mr_petz am 04 Januar 2023, 11:11:20
@juemuc
Neue Version zum testen ist Online bei mir.
LG mr_petz
Hallo mr_petz,
auch wenn ich die Datei mit "sudo wget https://github.com/mr-petz/ftui/blob/weekdaytimerset/www/ftui/components/timerset/timerset.component.js" herunterlade, sieht die Datei komisch aus und hat fast 500k. Was mache ich falsch?
Viele Grüße
Jürgen
Hallo,
ich benötige noch etwas Unterstützung im Bereich der Formatierung. Kann ich unter FTUI3 auch Rahmen ziehen wie in FTUI2 (s. Screenshots) Wie bekomme ich unter FTUI3 die ersten beiden Zeilen auf der linken Seite beim FHEM-Monitor in eine "Umrandung".
<ftui-grid-tile row="1" col="11" height="4" width="7">
<header>RASPBERRY PI 3</header>
<ftui-row>
<ftui-column>
<ftui-label color="white" size="3"
text="uptime">
</ftui-label>
<ftui-label color="white" size="3"
text="letzter reboot">
</ftui-label>
<ftui-label color="white" size="3"
text="Temperatur">
</ftui-label>
</ftui-column>
<ftui-column margin="2">
<ftui-label color="white" size="3"
[text]="pi_Sys:uptime_text">
</ftui-label>
<ftui-label color="white" size="3"
[text]="pi_Sys:starttime_text">
</ftui-label>
<ftui-label color="white" size="3"
[text]="pi_Sys:cpu_temp">
</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="5" col="11" height="4" width="7">
<header>FHEM-Monitor</header>
<ftui-row>
<ftui-column>
<!-- <ftui-column align-items="center"> -->
<ftui-label color="white" size="3" align-item="center"
text="FHEM-uptime">
</ftui-label>
<ftui-label color="white" size="1"
[text]="pi_Sys:fhemuptime_text">
</ftui-label>
<!-- </ftui-column> -->
<ftui-label color="white" size="3"
text="FHEM-Updates">
</ftui-label>
<ftui-label color="white" size="3"
text="FHEM backup">
</ftui-label>
</ftui-column>
<ftui-column margin="2">
<ftui-button [(value)]="xx" shape="circle" height="4em" width="4em" color="orange">
<ftui-icon color="black" size="2"
path="../images/fhemSVG" name="system_fhem_reboot">
</ftui-icon>
</ftui-button>
<ftui-button [(value)]="xx" shape="circle" height="4em" width="4em" color="orange">
<ftui-icon color="black" size="2"
path="../images/fhemSVG" name="system_fhem_update">
</ftui-icon>
</ftui-button>
<ftui-button [(value)]="xx" shape="circle" height="4em" width="4em" color="orange">
<ftui-icon color="black" size="2"
path="../images/fhemSVG" name="system_backup">
</ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Viele Grüße
Jürgen
Der FTUI-Slider passt nach einem automatischen Update seiner Skala nicht den value-Balken mit an. Erst wenn ein verknüpftes Reading aktualisiert wird, updatet mit dem value auch der Balken. Das automatische Update, welches ausgelöst wird, liegt in einem dem Slider nachfolgenden Button, der per [hidden] verborgen wird. Heißt, der Slider erhält mehr Platz und nutzt diesen bezüglich der Skala, ohne jedoch die Länge seiner value-Darstellung dem anzupassen.
Ist das verständlich? Ich packe vorsichtshalber den Code meines panels dazu:
<ftui-row margin="0">
<!-- desired_value und auto/manuell -->
<ftui-column width="18%" direction="vertical">
<ftui-row height="20%" margin="0">
<ftui-label size="small"
text="{{deviceTH}}"
color="gray"></ftui-label>
</ftui-row>
<ftui-row height="70%" margin="0">
<!-- Automatik control auto/manual über pairSet-dummy -->
<ftui-button fill="none" readonly>
<ftui-icon size="-1" path="../images/openautomation" name="time_automatic" margin="0.2" color="gray"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
<!-- Titel und Slider -->
<ftui-column>
<ftui-row height="20%" margin="-1">
<ftui-label size="2" text="{{panelTitle}}"></ftui-label>
</ftui-row>
<ftui-row height="70%" margin="-0.4" padding="0">
<ftui-slider [(value)]="{{tempSensor}}:temperature" color="cold-hot" min="{{sliderMin}}" max="{{sliderMax}}" tick="{{sliderTick}}" wide-tick="{{sliderWideTick}}" has-ruler handle="none" readonly></slider>
</ftui-row>
</ftui-column>
<!-- Heizungsbutton ir_down -->
<ftui-column width="18%" direction="vertical">
<ftui-row height="20%" margin="0">
<ftui-label [text]="{{tempSensor}}:temperature" unit="°C" has-unit></ftui-label>
</ftui-row>
<ftui-row height="70%" margin="0">
<!-- Button wird ausgeblendet, wenn device ein dumdum ist -->
<ftui-button [(value)]="{{device}}" states='toggle' fill="none" [hidden]="{{device}} | map('`on|off`:false,`.*`:true')">
<ftui-icon size="0" path="../images/fhemSVG" name="ir_down" margin="0.2"
[color]="{{deviceSwitch}} | map('on:red,off:primary,`.*`:gray')"></ftui-icon>
</ftui-button>
<!-- Button wird ausgeblendet, wenn device verfügbar/schaltbar ist -->
<ftui-button [value]="{{device}}" fill="none" readonly [hidden]="{{device}} | map('`on|off`:true,`.*`:false')">
<ftui-icon size="0" path="../images/fhemSVG" name="ir_down" margin="0.2"
[color]="{{deviceSwitch}} | map('on:orange,`.*`:gray')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
Nochmal in Bildern angehängt (falsch heißt direkt nach dem Zeichnen, richtig nach dem ersten Reading-Update).
Habe ich eine Option, zu irgendeiner Zeit ein Update des Sliders zu triggern? Oder sollte ich mich um die Umgestaltung des Panels kümmern? Vielen Dank bereits für eure Vorschläge!
Ich habe jetzt die Sache wieder vereinfacht und den zweiten Button rausgeworfen, sodass keine Größenänderung mehr stattfindet. Stattdessen [readonly] beim Button gemapt, sodass er nicht mehr schalten kann. Der Slider stimmt, ist lesbarerer Code. Muss ich mal testen, wie ich die zweite Farbe für einen andersartigen Schalter über den Status 'on' bereitstellen kann.
Ok, gelöst, noch buttonOffColor eingeführt als Notlösung. Danke, dass ich drüber schreiben dürfte. Hilft auch bereits manchmal. Aber ist es nun ein Bug des Sliders, so wie es aussieht?
@juemuc
<ftui-column>
<ftui-row>
<table style="border:1px solid grey; height:95%; width:95%">
<tr>
<td style="border:2px solid grey;"><center><div class="inline"><big>FHEM uptime<br></big></div>
<ftui-label class="size-1" [text]="sysmon:fhemuptime_text"></ftui-label>
</td>
<td style="border:2px solid grey;">
<center>
<ftui-button class="size-2" shape="circle" color="orange" fill="solid">
<ftui-icon class="size-1" name="system_fhem_reboot" color="white"
@click="popup_reboot.open()"
></ftui-icon>
</ftui-button>
</center>
</td>
</tr>
<tr>
<td style="border:2px solid grey;"><center><div class="inline"><big>FHEM update</big></div>
</td>
<td style="border:2px solid grey;">
<center>
<ftui-button class="size-2" shape="circle" color="orange" fill="solid">
<ftui-icon class="size-1" name="system_fhem_update" color="white"
@click="popup_update.open()"
></ftui-icon>
<ftui-badge color="danger" [text]="UPDATE:ALL">
</ftui-button>
</center>
</td>
</tr>
<tr>
<td style="border:2px solid grey;"><center><div class="inline"><big>FHEM rollback</big></div>
</td>
<td style="border:2px solid grey;">
<center>
<ftui-button class="size-2" shape="circle" color="orange" fill="solid">
<ftui-icon class="size-1" name="control_arrow_turn_left" color="white"
@click="popup_rollback.open()"
></ftui-icon>
</ftui-button>
</center>
</td>
</tr>
<tr>
<td style="border:2px solid grey;"><center><div class="inline"><big>FHEM backup</big></div>
</td>
<td style="border:2px solid grey;">
<center>
<ftui-button class="size-2" shape="circle" color="orange" fill="solid">
<ftui-icon class="size-1" name="system_backup" color="white"
@click="popup_backup.open()"
></ftui-icon>
</ftui-button>
</center>
</td>
</tr>
</table>
</ftui-row>
</ftui-column>
Kannst weiter Table benutzen z.B.
Gruß
Eisix
Hallo Eisix,
danke für die Info. Das hat geholfen.
Viele Grüße
Jürgen
Ich wollte mich bei Gelegenheit mal mit FTUI3 beschäftigen. Bisher läuft mein Frontend mit FTUI2.
Worauf muss ich beim Umstieg achten? Es muss ja so wie ich es verstehe alles neu geschrieben werden, da es nicht abwärts kompatibel ist und der Code sich durch HTML5 stark unterscheidet.
Wie lade ich die Dateien vom Github runter?
Ich finde nirgendwo einen download-Button?
Zitat von: Superposchi am 05 Januar 2023, 23:14:58
Wie lade ich die Dateien vom Github runter?
Ich finde nirgendwo einen download-Button?
Es gibt verschiedene Links zum Einstieg - einer davon wäre https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3 (https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3).
Für Installation/Update stehen dort die gebräuchlichen Schritte ... analog zu FTUI2.
Alternativ könnte man natürlich auch selbst eine ZIP-Datei herunterladen ... der zugehörige Button ist aber z.B. bei einem Tablet im Portrait-Modus nicht (immer) zugänglich ... normalerweise neben "Go to file".
Moin,
ich habe ein Popup der Türklingel.
Es geht auf, wenn jemand auf die Türklingel drückt. Es verschwindet aber sofort. Außer man hällt gedrückt.
Das timeout="60" scheint nur zu greifen, solange auch die Quelle den entsprechenden Status "on" hat.
Muss ich noch was hinzufügen, damit das Popup aufbleibt, auch wenn der state wieder auf "off" wechselt?
Danke schon mal für die Hilfe. :)
<ftui-popup id="pop2.tuerklingel.OG" [active]="HMW_IO_12_Sw14_DR_NEQ0308160_15:state | map('on: true, off: false')" timeout="60" width="1240px" height="815px">
<header>CAM 1 Haustür</header>
<ftui-row>
<ftui-column>
<ftui-image [src]="Kamera_CAM1_Haustuer:StmKeymjpegHttp" width="990px"></ftui-image>
</ftui-column>
<ftui-column>
<ftui-cell>
<ftui-image src="./images/diverses/familyguy_door.gif" ></ftui-image>
</ftui-cell>
<ftui-cell>
<ftui-button popup-close>close</ftui-button>
</ftui-cell>
</ftui-column>
</ftui-row>
</ftui-popup>
@M.Piet
Probier mal mit Position wie in meinem Beispiel weiter oben.
<ftui-popup id="popup_Klingel" [active]="Klingel:state | map('on: true, off: false')" height="480px" width="640px" position="page" timeout="120">
Gruß
Eisix
@M.Piet
Es sollte sich doch mit active nur mit map on öffnen und bei off nix machen...
Also im map vom [active] nur on:true setzen.
Dann sollte die Zeit laufen...
Bsp:
<ftui-popup id="pop2.tuerklingel.OG" [active]="HMW_IO_12_Sw14_DR_NEQ0308160_15:state | map('on: true')" timeout="60" width="1240px" height="815px">
LG mr_petz
Ich weiß zwar wozu Github da ist komme aber mit der Oberfläche nicht wirklich zurecht. Bei den Projekten für meine Multimediabox gibt es einen Download-Button. Hier beim FTUI3 finde ich nichts dergleichen. Daher die Frage.
Die Installationsanweisungen habe ich gefunden und durchgeführt. Sehe aber weder in Fhem noch in der Ordnerstruktur keinerlei Veränderung.
Außerdem suche ich eine Übersicht der verfügbaren Elemente für FTUI3, so wie es das unter FTUI2 gibt, am besten mit Beispielen oder Codeauszügen die man sich ansehen kann.
Meine HTML5-Zeit ist schon etwas her, muss mich erstmal wieder einarbeiten und dafür sind Beispielsnippets immer gut geeignet.
Den Link kenne ich, ist ja die Installationsanleitung.
Zitat von: docolli am 04 Januar 2023, 13:10:54
Ich habe inzwischen eine relative große FTUI index.html, da ich mein GUI per <ftui-tab> bzw. <ftui-tab-view> in einzelne Tabs aufgeteilt habe. Zwischen die einzelnen <ftui-tab-view> Tags habe ich jeweils die für mich passenden <ftui-grid-tile> samt ihrem Inhalt platziert.
Jetzt möchte ich das Ganze durch Auslagerung in einzelne Dateien besser strukturieren, leider komme ich mit <ftui-content> innerhalb der <ftui-tab-view> nicht zum Ziel.
Geht mir genauso. Ich "quäle" mich gerade nochmal durch den Thread hier und hoffe die Lösung dabei zu finden.
@2space
Laut docolli:
Zitat von: docolli am 04 Januar 2023, 13:10:54
...
EDIT: Hab es selber geschafft, dank der Frage von Eisix und seinem Beispielcode. Problem bei mir war, dass ich das <ftui-content> noch in ein <ftui-grid-tile> packen musste. Ausserdem musste ich auf die Reihenfolge der Elemente im Code achten. Diese bestimmt die Position im Z-Stapel und bei mir hat sich damit ein grid Element "oberhalb" des Tab-View Menu befunden, somit waren die Links "dahinter" und nicht mehr erreichbar. ???
hilft dir das Beispiel von Eisix:
https://forum.fhem.de/index.php/topic,115259.msg1255526.html#msg1255526
Bsp.@Eisix:
<ftui-grid base-width="69" base-height="48" margin="1">
<ftui-grid-tile row="1" col="11" height="2" width="1" class="mybgimage">
<header>Tür</header>
<ftui-content file="test4.1.1.html"></ftui-content>
</ftui-grid-tile>
</ftui-grid>
LG mr_petz
Zitat von: mr_petz am 06 Januar 2023, 22:37:56
@M.Piet
Es sollte sich doch mit active nur mit map on öffnen und bei off nix machen...
Also im map vom [active] nur on:true setzen.
Dann sollte die Zeit laufen...
Bsp:
<ftui-popup id="pop2.tuerklingel.OG" [active]="HMW_IO_12_Sw14_DR_NEQ0308160_15:state | map('on: true')" timeout="60" width="1240px" height="815px">
Hmmm.. irgendwas ist da komisch.
Das Popup bleibt nun auch die 60 Sekunden offen. Aber es öffnet sich immer beim Neuladen der Seite.
Ruhezustand:
HMW_IO_12_Sw14_DR_NEQ0308160_15:state:off
Wenn ich die Seite neu lade, darf das Popup so doch gar nicht aufgehen. Aber warum macht es das dann?
Hallo M.Piet,
probiere es mal so:
<ftui-popup id="pop2.tuerklingel.OG" active="false" [active]="HMW_IO_12_Sw14_DR_NEQ0308160_15:state | map('on: true')" timeout="60" width="1240px" height="815px">
Dann wird active erstmal mit false vorbelegt, vielleicht bring das die erhoffte Lösung.
Gruß Markus
Zitat von: Superposchi am 07 Januar 2023, 09:43:14
Den Link kenne ich, ist ja die Installationsanleitung.
Und am Ende ist der Link für weitere Infos (inkl. Beispiele).
Viele Grüße
Jürgen
Am Ende ist der der Link zum GitHub, mehr nicht.
Zitat von: Superposchi am 07 Januar 2023, 09:43:14
Die Installationsanweisungen habe ich gefunden und durchgeführt. Sehe aber weder in Fhem noch in der Ordnerstruktur keinerlei Veränderung.
Im angegebenen Link zum Einstieg fehlt wohl noch ein Hinweis zu HTTPSRV
... insbesondere bei Parallelbetrieb hilfreich ... https://forum.fhem.de/index.php/topic,119312.msg1141138.html#msg1141138 (https://forum.fhem.de/index.php/topic,119312.msg1141138.html#msg1141138)
Wenn nach dem Ausführen von "update all ..." kein www/ftui-Ordner vorhanden ist, ist vermutlich etwas schiefgegangen.
Zitat von: Superposchi am 07 Januar 2023, 18:34:26
Am Ende ist der der Link zum GitHub, mehr nicht.
Der Link zum GitHub führt im Grunde zu einer Art Basis-Doku
... dort findet man u.a Informationen zu den offiziellen Web-Komponenten aus dem components-Ordner
... dort findet man u.a die Möglichkeit zum direkten Testen von Beispielen aus dem examples-Ordner
... oft auch (unverändert) lokal möglich
Der Link zu den "Best practices" befindet sich noch im Aufbau
... die meisten "Lösungen" sind derzeit in diesem Thread zu finden bzw. zu suchen
Zitat von: juemuc am 31 Dezember 2022, 14:14:05
Hallo mr_petz,
ich beschäftige mich gerade mit dem Thema "Weekdaytimer". Dazu habe ich noch folgende Fragen:
Kann man hiermit nur eine Uhrzeit mitgeben oder ist auch die Definition von Sonnenaufgang bzw. Sonnenuntergang möglich
Meine Weekdaytimer sind z.B. so in FHEM definiert:
defmod Esszimmerlampe_WT WeekdayTimer Esszimmerlampe_WT_dummy de 1234560|{sunset_abs("HORIZON=-0.9","00:00","00:00")}|on (ReadingsVal("Uhrzeit","state","") le "20:30")
...
Jetzt kannst du bereits definierte Sonnenauf- bzw. Sonnenuntergänge einlesen und bearbeiten und/oder einen Code hinzufügen bzw. bearbeiten.
Eingelesen und gesetzt, wenn vorhanden, werden jetzt auch !$we (8 === Werktage in fhem->1234568) und $we (7 === Wochenende in fhem->067).
Layout ist immer noch einfach gestrickt siehe Anhang...
Danke auch fürs testen... :)
Mal sehen wenn ich wieder Zeit finde den timer zu erweitern...
LG mr_petz
Zitat von: meier81 am 07 Januar 2023, 17:58:19
Hallo M.Piet,
probiere es mal so:
<ftui-popup id="pop2.tuerklingel.OG" active="false" [active]="HMW_IO_12_Sw14_DR_NEQ0308160_15:state | map('on: true')" timeout="60" width="1240px" height="815px">
Dann wird active erstmal mit false vorbelegt, vielleicht bring das die erhoffte Lösung.
Gruß Markus
Das bringt leider nix.
active='false' ist von hause aus vorbelegt im Code.
Das hängt mit dem case vom active zusammen...
LG
Also im GitHub gibt es etliche Dateien, aber nichts davon würde ich als Doku im Sinne von FTUI2 bezeichnen. Dort gibt es zwar auch einen Unterordner namens Examples, aber die dort enthaltenen Dateien sind wohl eher Codesnipsel, jedoch ohne wirkliche Erklärung. Ehrlich gesagt geht daraus nicht mal der Codeaufbau für HTML5 hervor der die Elemente erstellt.
Den Link wegen dem Parallelbetrieb werde ich mir ansehen, da das bei mir ein wichtiger Punkt ist.
Das mit der Veränderung war schlecht ausgedrückt. Es hat sich offensichtlich nichts geändert, da die Unterordner bereits durch mein verwendetes FTUI2 vorhanden waren.
Zitat von: M.Piet am 06 Januar 2023, 19:01:53
Muss ich noch was hinzufügen, damit das Popup aufbleibt, auch wenn der state wieder auf "off" wechselt?
Ich habe das gezeigte Beispiel folgendermaßen abgeändert:
[active]="ftuitest:klingel | map('off: ignore') | t=>t==='ignore'?this.active:t" timeout="10"
- ginge auch ohne zwischengeschaltetes map, ist aber so besser nachvollziehbar
- off wird also auf ignore gemappt
- abschließend wird
- bei ignore auf den momentanen Zustand gesetzt ... führt zu keiner Änderung, da wegen Wertgleichheit nicht weitergereicht wird
- bei on einfach on weitergegeben ... entspricht nicht dem bislang gespeicherten Wert und führt automatisch zu (nicht false) ... erneutes on während active=true startet den Timer neu
Mit dieser Variante könnte die Klingel auch ein "einfacher" Push-Button sein, der nur on kennt ... ansonsten scheitert man am immer gleichen Event, das nicht weitergereicht wird
@OdfFhem
Ok.
Das map() wird hier überflüssig...:
(Sorry.. hattest du ja oben erwähnt...leider überlesen ::))
[active]="dummy | t=>t==='off'?this.active:t" timeout="30"
Edit: man muss natürlich das 'off' durch sein Reading wenn nicht 'off' ersetzen...
alternativ:
[active]="dummy | replace('off',false)" timeout="30"
Hier wird bei off false replaced.
Wenn popup sichtbar dann wird bei off nix gemacht und es bleibt offen.
Nachteil. Bei on und off triggert das Popup wenn es hidden ist...
Da sieht man wieder die Möglichkeiten...
Aber im Popup sollte das angepasst werden...,denn wenn active im map nur bei on an gehen soll, dann soll alles andere ignoriert werden...oder man muss beim start damit leben das es offen ist...
Ein map ist zur Zeit im popup nicht nötig solange sich das Reading ändert und nicht null ist.
Also der jeder Wert (egal welcher) wird in this.active zu true wenn er sich ändert und das Popup aus ist...
LG mr_petz
Zitat von: mr_petz am 07 Januar 2023, 19:53:20
Das bringt leider nix.
active='false' ist von hause aus vorbelegt im Code.
Das hängt mit dem case vom active zusammen...
LG
Genau. Hatte es getestet und es hat nichts gebracht.
Aber wie bekomme ich denn mein Popup so hin, dass es bei einer kurzen Betätigung der Türklingel für 30 Sekunden auf bleibt?
Unter FTUI2 war es doch auch kein Problem:
<div data-type="popup"
data-device="HMW_IO_12_Sw14_DR_NEQ0308160_15"
data-get="state"
data-get-on="on"
data-get-off="off_dummy"
data-mode="animate"
data-return-time="60"
data-height="750px"
data-width="1100px">
<div class="dialog">
<header>Popup</header>
<div data-type="image" data-device="Kamera_CAM1_Haustuer" data-get="StmKeymjpegHttp" data-size="1110" class="cell"></div>
Lies die 2 Beiträge über dir ;)
Die sind für dich gedacht...
LG
Ups....das hatte ich überlesen.
Danke. :)
Aktueller Zustand:
HMW_IO_12_Sw14_DR_NEQ0308160_15:state:off
Aber....das Popup geht beim Neuladen der Seite trotzdem auf:
<ftui-popup id="pop2.tuerklingel.OG" active="false" [active]="HMW_IO_12_Sw14_DR_NEQ0308160_15:state | map('off: ignore') | t=>t==='ignore'?this.active:t" timeout="10" width="1240px" height="815px">
Ich fürchte langsam, das ich der erste unter FTUI3 bin, der ein Popup bei der Türklingel haben möchte.
Nimm mal das active="false" raus. Das wirkt hier..
<ftui-popup id="pop2.tuerklingel.OG" [active]="HMW_IO_12_Sw14_DR_NEQ0308160_15:state | map('off: ignore') | t=>t==='ignore'?this.active:t" timeout="10" width="1240px" height="815px">
LG
Puh.....was für eine schwere Geburt....jetzt geht es!
@OldFhem und mrpeetz:
Vielen vielen dank für die Hilfe! Das hätte ich alleine nicht hinbekommen.
Hallo zusammen,
ich habe ein paar kleinere Probleme mit dem Swiper 8)
- Gibt es eine Möglichkeit die Darstellung der "Pünktchen" zu verändern/vergrößern (s. Bild)?
- Der Befel "@click="swiper1.next()" funktioniert unter dem IE sehr zuverlässig. Allerdings gibt es beim Firefox Probleme nach dem letzten Swipe springt die Anzeige nicht an den Anfang sondern in die Mitte. Gibt es hierzu eine Lösung? Unter "Linux" gibt es ja kein IE 8)
Hier mein Test-Coding
<ftui-grid-tile row="6" col="10" height="5" width="8">
<header>7-Tage Vorhersage</header>
<ftui-swiper id="Vorhersage_SW" dots>
<ftui-label @click="Warnung_SW.next()"
text="Test1">
</ftui-label>
<ftui-label @click="Vorhersage_SW.next()"
text="Test2">
</ftui-label>
<ftui-label @click="Vorhersage_SW.next()"
text="Test3">
</ftui-label>
<ftui-label @click="Vorhersage_SW.next()"
text="Test4">
</ftui-label>
<ftui-label @click="Vorhersage_SW.next()"
text="Test5">
</ftui-label>
<ftui-label @click="Vorhersage_SW.next()"
text="Test6">
</ftui-label>
<ftui-label @click="Vorhersage_SW.next()"
text="Test7">
</ftui-label>
</ftui-swiper>
</ftui-grid-tile>
Viele Grüße
Jürgen
@juemuc meinst du sow
@Eisix,
nicht wirklich. Hier werden ja eigene Icons pro Swiper definiert. Ich möchte einfach nur die Punkte für eine höhere Trefferquote vergrößern.
Viele Grüße
Jürgen
Dann mach doch einfach wie bei mir nur ohne Icon.
Habe zum Verhalten im swiper was rausgefunden...
Wenn man diese Zeile vom swiper:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/swiper/swiper.component.js#L90
mit dieser ersetzt:
this.submitChange('value', this.value);
dann funktioniert das @click="swiper1.next()" oder @click="swiper1.value = 'sw2'"
Warum wissen nur die kenner...
Zur dot Größe fällt mir nur das ein Bsp.:
<ftui-swiper id="swiper1" dots style="font-size:2em">
Hier werden die dots 2em.
Man muss nur bei den eingefügten ftui-label im swiper auch eine Größe angeben, sonst erbt das label die 2em...
LG
mr_petz weiß einfach alles ;D
Danke
Viele Grüße
Jürgen
Alles weis ich auch nicht...
Nur gemeinsam sind wir Stark :)
Nur durch @setstate können wir hier spielen...
LG
Hallo zusammen,
ich habe einen Swiper mit 7 Tagesanzeigen. In jedem wird das entsprechende Datum angezeigt. Nun möchte ich aber bein einem, der das Tagesdatum enthält das Tagesdatum durch "Heute" ersetzen. Hat jemand eine Idee. Ich habe leider nichts gefunden.
Viele Grüße
Jürgen
Zitat von: juemuc am 09 Januar 2023, 15:08:07
Hallo zusammen,
ich habe einen Swiper mit 7 Tagesanzeigen. In jedem wird das entsprechende Datum angezeigt. Nun möchte ich aber bein einem, der das Tagesdatum enthält das Tagesdatum durch "Heute" ersetzen. Hat jemand eine Idee. Ich habe leider nichts gefunden.
Viele Grüße
Jürgen
Hi Jürgen,
dafür müsste man das Format des Reading´s und wie du es in FTUI3 ausgibst wissen...
LG
Hi,
aktuell so:
<ftui-label
[text]="WetterProplanta:{{VHS_NR}}_date | toDate() | format('eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1">
</ftui-label>
Viele Grüße
Jürgen
@juemuc
Eine der vielen Lösungsmöglichkeiten könnte so aussehen - datumsgenau:
[text]="ftuitest:date2 | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')"
- "Locale" könnte man auch einsparen
- Wenn einem der Vergleich von "Tag im Monat" bzw. "Tag in der Woche" ausreicht, ginge es auch noch etwas kürzer ...
Hi OldFhem,
funktioniert. Danke. Ich verstehe allerdings auch die Befehlskette nicht ganz. Ich versuche einmal das was ich verstanden habe, zu beschreiben.
- ftuitest:date2 ist das FHEM-Reading
- | toDate() wandelt das Reading in ein Datumsformat um
- t ist eine Variable, der ein Wert zugewiesen wird
- (t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY') habe ich nicht verstanden
Ich habe zwar die einzelnen Funktionen gefunden, verstehe hier aber die Zusammenhänge nicht. Kannst Du dies noch kurz auflösen 8) Danke
Viele Grüße
Jürgen
Die Gasamt-Pipe besteht aus 3 Teilen:
#1 ... ftuitest:date2
#2 ... toDate()
#3 ... t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())
?'Heute'
:ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')"
#1 stellt den aktuellen Wert des angegebenen Readings bereit
#2 erhält durch "interne" Übergabe den aktuellen Wert und macht aus der Zeichenkette ein Datum
#3 erhält durch "interne" Übergabe das Datum und stellt eine Pseudo-Funktion dar
#3.1 der linke Teil (bzgl. <=) der Pseudo-Funktion entspricht einem Paramterteil ; t ist dabei der Parameter, der das Datum aufnimmt
#3.2 der rechte Teil (bzgl. <=) der Pseudo-Funktion entspricht einem Ausführungsteil ; es handelt sich hier um das Kurzformat der "if then else"-Theorie
#3.3 das Kurzformat besteht aus drei Teilen ... aaa?bbb:ccc ... aaa entspricht einem logischen Ausdruck ... bbb wird angewendet bei positivem Ergebnis ... ccc ansonsten
#3.4 im logischen Ausdruck wird der Datumsanteil (Tag,Monat und Jahr) von t mit dem Datumsanteil von "jetzt" verglichen. Stimmen die Angaben überein, wird 'Heute' weitergegeben, ansonsten das Ergebnis der FTUI3-Funktion zur wunschgemäßen Formatierung eines Datums
@setstate,@OdfFhem
Ich habe mal zum Anliegen von @juemuc das Beispiel auf "meine" Art umgestellt:
<ftui-label [text]="local:datum | t=>ftuiHelper.dateFormat(ftuiHelper.dateFromString(t),'D.M.YYYY')===new Date().toLocaleDateString()?'Heute':ftuiHelper.dateFormat(ftuiHelper.dateFromString(t),'eeee - D.MM.YYYY')"></ftui-label>
Im Normalfall sollte die Bedingung bei gleichen Datum (Bsp.:10.1.2023) auf true gehen und 'Heute' ausgeben...
Macht es aber nicht...
Ich weis jetzt auch Warum.
In Zeile:
https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L253
wird alles replaced was nach dem M kommt... Also in meinen Fall M. (Ich kenne von damals den Bug!)
Wenn man :
<ftui-label [text]="local:datum | toDate() | format('D.M.YYYY')"></ftui-label>
definiert, dann wird der . vom Monat eliminiert... Ausgabe -> 10.12023
Man könnte jetzt als Zwischenlösung es so definieren mit extra Punkt:
<ftui-label [text]="local:datum | toDate() | format('D.M..YYYY')"></ftui-label>
So erhält man die richtige Ausgabe -> 10.1.2023 und meine Spielerei funktioniert so auch:
<ftui-label [text]="local:datum | t=>ftuiHelper.dateFormat(ftuiHelper.dateFromString(t),'D.M..YYYY')===new Date().toLocaleDateString()?'Heute':ftuiHelper.dateFormat(ftuiHelper.dateFromString(t),'eeee - D.MM.YYYY')"></ftui-label>
Oder man tausch diese Zeile im helper so aus:
ret = ret.replace(/M(?!a)(?!ä)/g, MM);
Ich gehe hier erstmal nur von März,Mai,March und May aus.
MM und MMMM funktionieren weiterhin.
Oder ist noch etwas anderes bei M zu erwarten?
LG mr_petz
Zitat von: mr_petz am 10 Januar 2023, 19:44:12
Macht es aber nicht...
Oder ist noch etwas anderes bei M zu erwarten?
Einsatz von ... Originalcode
<ftui-label [text]="ftuitest:date2 | toDate() | format('Mindestens bis zum --- Morgen ist --- eeee - D.M.YYYY')"></ftui-label>
Ergebnis ... 3nd0te0 b0 zu0--- 3rgen 0t --- Mittwoch - 22.32023
Einsatz von ... ret = ret.replace(/M(?!a)(?!ä)/g, MM);
<ftui-label [text]="ftuitest:date2 | toDate() | format('Mindestens bis zum --- Morgen ist --- eeee - D.M.YYYY')"></ftui-label>
Ergebnis ... 3ind0te0 b0 zu0--- 3orgen 0t --- Mittwoch - 22.3.2023
Einsatz von ... ret = ret.replace(/(^|[^\p{Letter}])(M)([^\p{Letter}]|$)/gu, '$1'+MM+'$3');
<ftui-label [text]="ftuitest:date2 | toDate() | format('Mindestens bis zum --- Morgen ist --- eeee - D.M.YYYY')"></ftui-label>
Ergebnis ... Mind0te0 b0 zu0--- Morgen 0t --- Mittwoch - 22.3.2023
// ret = ret.replace(/[^u]s/g, ss);
ret = ret.replace(/(^|[^\p{Letter}])(s)([^\p{Letter}]|$)/gu, '$1'+ss+'$3');
Ergebnis ... Mindestens bis zu0--- Morgen ist --- Mittwoch - 22.3.2023
// ret = ret.replace(/m[^b]/g, mm);
ret = ret.replace(/(^|[^\p{Letter}])(m)([^\p{Letter}]|$)/gu, '$1'+mm+'$3');
Ergebnis ... Mindestens bis zum --- Morgen ist --- Mittwoch - 22.3.2023
Es gibt noch weitere Stellen ...
Dein Einsatz ist wieder hervorragend ;)
Da zeigst du mal wieder dein Spezialgebiet....
Ist ein Extrembeispiel, aber Zeigt was man noch pimpen könnte und vielleicht auch sollte.
LG mr_petz
Zitat von: mr_petz am 10 Januar 2023, 22:27:10
Ist ein Extrembeispiel, aber Zeigt was man noch pimpen könnte und vielleicht auch sollte.
Insbesondere in Verbindung mit ago und till werden Zeitangaben mit Text angereichert - aus dem Grund verfolgt timeFormat einen ähnlichen Ansatz.
***
Befüllst Du local:datum erst durch eine Aktion oder gibt es einen direkten Weg ?
Mein local:datum war im Test ein button mit verschiedenen daten im states. Direkter Weg geht glaube auch.
Edit: Nur über Event oder Extrascript(=Direkt?).
Bsp.: setzen von local:datum:
ftuiApp.fhemService.updateReadingItem('local-datum', {value: '20.03.2023'});
Zitat von: mr_petz am 10 Februar 2022, 12:02:50
Ich zitiere mich mal selber.
Mir ist gerade aufgefallen, dass @setstate (der Schlingel hat nichts erwähnt :D) noch ein paar pipes eingebaut hat. Damit wird es einfacher etwas vorn oder hinten anzuhängen:
für vorn: prepend()
für hinten: append()
@SirMarco
Da ist es einfacher für dich und du kannst weiterhin mit href arbeiten und wir bleiben FTUI3-Konform:
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon | prepend('http://')" onclick="javascript:window.open(href,'_blank');return false;">Wettericon</a>
@stefan-dd
Auch hier wäre es mit append() besser:
https://forum.fhem.de/index.php/topic,115259.msg1203014.html#msg1203014
<ftui-image base="icons/" [src]="AV_Receiver:currentStation | append('.png')"></ftui-image>
LG mr_petz
Hallo zusammen, ich kämpfe gerade mit dem Umstieg von FTUI 2 auf 3. In FTUI2 hatte ich immer einen Link Button um FTUI neu zu laden:
<div class="top-narrow" data-type="link"data-url="index.html">Wie bekomme ich das in FTUI 3 als Button hin? Habe folgenden Thread gefunden: https://forum.fhem.de/index.php?topic=127234.0
Was ich hier finde hilft mir aber nicht weiter, da ich keine externe Seite öffnen will sondern nur die aktuelle reloaden. Da muss es doch was einfach geben :-) Ich hoffe ihr könnt mir helfen
Das hier hat nicht funktioniert wie gewünscht: <a ftui-binding onclick="javascript:window.open('http://index.html');return false;">Wettericon</a>
Grüße Timo
Zitat von: TimoD am 11 Januar 2023, 15:10:45
Hallo zusammen, ich kämpfe gerade mit dem Umstieg von FTUI 2 auf 3. In FTUI2 hatte ich immer einen Link Button um FTUI neu zu laden:
<div class="top-narrow" data-type="link"data-url="index.html">
Wie bekomme ich das in FTUI 3 als Button hin? Habe folgenden Thread gefunden: https://forum.fhem.de/index.php?topic=127234.0
Was ich hier finde hilft mir aber nicht weiter, da ich keine externe Seite öffnen will sondern nur die aktuelle reloaden. Da muss es doch was einfach geben :-) Ich hoffe ihr könnt mir helfen
Das hier hat nicht funktioniert wie gewünscht: <a ftui-binding onclick="javascript:window.open('http://index.html');return false;">Wettericon</a>
Grüße Timo
Hab es hinbekommen: <ftui-button @click="javascript:location.reload()" color="current" fill="none" direction="vertical" gap="1">
@TimoD
Hast es ja hinbekommen. ;)
Hier wäre die Lösung auch gewesen...:
https://forum.fhem.de/index.php/topic,115259.msg1233412/topicseen.html#msg1233412
LG
Edit: Wobei 'javascript:' nicht nötig ist...
Frage, kann ich beim
<ftui-slider [(value)]="dummy3" max="80"
tick="10"
wide-tick="40"
color="cold-hot"
has-wide-ticks></ftui-slider>
irgendwie die Farbe nach dem Bereich einstellen? Wie bei FTUI2 bei Range:
data-limit-high="20" data-limit-low="7" data-color="#ffa500" data-color-high="#00e069" data-color-low="#FF3366"
Oder gibt es ein ähnliches Objekt welches dies kann?
Danke schonmal und einen schönen Abend :-)
Zitat von: TimoD am 11 Januar 2023, 21:01:08
Frage, kann ich beim
<ftui-slider [(value)]="dummy3" max="80"
tick="10"
wide-tick="40"
color="cold-hot"
has-wide-ticks></ftui-slider>
irgendwie die Farbe nach dem Bereich einstellen? Wie bei FTUI2 bei Range:
data-limit-high="20" data-limit-low="7" data-color="#ffa500" data-color-high="#00e069" data-color-low="#FF3366"
Oder gibt es ein ähnliches Objekt welches dies kann?
Danke schonmal und einen schönen Abend :-)
Dafür gibt es step() oder map() für color/value/text usw. Das kann man FTUI3weit anwenden. Bsp:
<ftui-slider [(value)]="dummy3" max="80"
tick="10"
wide-tick="40"
[color]="dummy3 | step('0: success, 25: warning, 50: danger')"
has-wide-ticks></ftui-slider>
LG
Moin,
kurze Frage: ich habe in FTUI3 nichts gefunden, was an dem "Range" unter FTUI2 angelehnt ist.
Gibt es da etwas, was so ähnlich aussieht? Bei den Beispielen unter github habe ich nichts gefunden.
Danke schön. :)
Für Range könntest du den meter nehmen:
https://knowthelist.github.io/ftui/www/ftui/examples/meter.html
LG
Zitat von: mr_petz am 11 Januar 2023, 21:25:41
Dafür gibt es step() oder map() für color/value/text usw. Das kann man FTUI3weit anwenden. Bsp:
<ftui-slider [(value)]="dummy3" max="80"
tick="10"
wide-tick="40"
[color]="dummy3 | step('0: success, 25: warning, 50: danger')"
has-wide-ticks></ftui-slider>
LG
Danke für deine ganze Arbeit! Hast du Paypal? Ich würde dir gerne einen Kaffee spendieren :-)
Zitat von: TimoD am 13 Januar 2023, 14:09:02
Danke für deine ganze Arbeit! Hast du Paypal? Ich würde dir gerne einen Kaffee spendieren :-)
Wenn dann hat hier @setstate eine Spende verdient!:
http://paypal.me/setstate
Er hat hier die meiste Arbeit gemacht!
LG
Zitat von: Shadow3561 am 26 März 2021, 17:34:29
Moin,
ich bastele auch gerade etwas rum.
Mein UI 2 gefällt mir recht gut und ist seit langem im Einsatz. Leider ist es recht lahm und ich hoffe, dass es mit UI 3 besser wird.
Jedoch fehlt mir eine Kleinigkeit beim Knob-Widget.
Ich bräuchte eine value in 0,5 er Schritten für meine Heizung da Ganzzahlen nicht akzeptiert werden.
19.0 19.5 20.0 20.5 usw.
Sobald ich mit decimal arbeite bekomme ich leider auch 19.2 usw. und die FHEM springt auf NaN.
Ist mein Vorhaben möglich?
Mit freundlichen Grüßen
Hallo zusammen,
dieses Problem scheint immer noch zu existieren. Ich habe mein Thermostat wie folgt definiert:
<ftui-label top="20px" style="position:relative;"
text="Heizungungsgruppe Wohnzimmer">
</ftui-label>
<ftui-knob has-scale has-arc has-value-text has-needle has-desired
[value]="FBDECT_FB_grp9E0BB5_3D3FF6AE5:desired-temp | part(1)" min="7.5" max="28.0" step="0.5"
(value)="FBDECT_FB_grp9E0BB5_3D3FF6AE5:desired-temp" min="7.5" max="28.0" step="0.5"
[desired-value]="FBDECT_FB_grp9E0BB5_3D3FF6AE5:temperature | part(1)"
color="cold-hot">
</ftui-knob>
<table style="border:2px solid grey">
<ftui-label top="-105px" left="95px" style="position:relative;" margin="-1" size="3" color="white" class="bold"
[text]="FBDECT_FB_grp9E0BB5_3D3FF6AE5:temperature | part(1)" unit="°C">
</ftui-label>
Und trotzdem erhalte ich beim Einstellen Werte, die kein vielfaches von 0,5 sind (s. Bild) Gibt es hierzu eine Lösung?
Viele Grüße
Jürgen
@juemuc
Als erstes braucht und sollte man nur einmal min,max und step definieren.
Dann scheint der knob mit min="7.5" und max="28.0" nicht richtig zu runden.
Könntest es so testen:
<ftui-knob has-scale has-arc has-value-text has-needle has-desired
min="7.5" max="27.5" step="0.5"
[value]="FBDECT_FB_grp9E0BB5_3D3FF6AE5:desired-temp | part(1)"
(value)="fix(1) | FBDECT_FB_grp9E0BB5_3D3FF6AE5:desired-temp"
[desired-value]="FBDECT_FB_grp9E0BB5_3D3FF6AE5:temperature | part(1)"
color="cold-hot">
</ftui-knob>
Edit: habe mal noch fix(1) eingefügt...
LG mr_petz
Das war es leider nicht. Ich habe mir nun Deine "Thermostat-Komponente" heruntergeladen. Damit funktioniert es problemlos ;D
Jetzt möchte ich allerdings noch den Termperaturverlauf beeinflussen. Ich möchte das "blau" etwas "weiter" laufen lassen, bis es ins rot übergeht. Auch das rot sollte ab 23°C noch dunkler werden. Habe ich da noch Möglichkeiten? Auch würde ich gerne die Breite des "Kreises" noch etwas erhöhen (quasi die Höhe der "Ticks"). Geht das auch?
Viele Grüße
Jürgen
@juemuc
Bitte dafür den entsprechenden Thread nutzen:
https://forum.fhem.de/index.php/topic,123084.0.html
LG
Hallo,
ich habe unter FTUI2 eine Liste mit Timern über "circlemenu" definiert (s. Bild 1). Da ich es unter FTUI3 mit "circlemenu" nicht vernünftig lösen konnte, habe ich nun ein Popup mit einer Tabelle definiert (s. Bild 2). Allerdings ist der Abstand zwischen den einzelnen Zeilen zu groß. Wie kann ich diesen reduzieren?
Anbei mein Coding:
<ftui-popup id="pop_timer" timeout="120" width="40em" height="auto">
<header>Timer</header>
<table>
<tr>
<td>
<ftui-label size="3" color="white" @click="pop_nachtlampe_timer.open()"
[text]="Nachtlampe_WT:alias">
</ftui-label>
</td>
<td>
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="FBDECT_FB_08761_0230141:state | map('on:dark,off:medium')"
[(value)]="FBDECT_FB_08761_0230141:state">
<ftui-icon [color]="FBDECT_FB_08761_0230141:state | map('on:yellow,off:black')" size="3"
[name]="FBDECT_FB_08761_0230141:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
</td>
<td>
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Nachtlampe_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Nachtlampe_WT:nextUpdate" [hidden]="Nachtlampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Nachtlampe_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Nachtlampe_WT:disabled | map('1:true, .*:false')"
</ftui-label>
</td>
</tr>
<tr>
<td>
<ftui-label size="3" color="white" @click="pop_vogellampe_timer.open()"
[text]="Vogellampe_WT:alias">
</ftui-label>
</td>
<td>
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="FBDECT_FB_08761_0234719:state | map('on:dark,off:medium')"
[(value)]="FBDECT_FB_08761_0234719:state">
<ftui-icon [color]="FBDECT_FB_08761_0230141:state | map('on:yellow,off:black')" size="3"
[name]="FBDECT_FB_08761_0234719:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
</td>
<td>
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Vogellampe_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Vogellampe_WT:nextUpdate" [hidden]="Vogellampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Vogellampe_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Vogellampe_WT:disabled | map('1:true, .*:false')"
</ftui-label>
</td>
</tr>
<tr>
<td>
<ftui-label size="3" color="white" @click="pop_vogelalarm_timer.open()"
[text]="Vogelalarm_WT:alias">
</ftui-label>
</td>
<td>
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="Vogelalarm_WT_dummy:state | map('on:dark,off:medium')"
[(value)]="Vogelalarm_WT_dummy:state">
<ftui-icon [color]="Vogelalarm_WT_dummy:state | map('on:yellow,off:black')" size="3"
[name]="Vogelalarm_WT_dummy:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
</td>
<td>
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Vogelalarm_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Vogelalarm_WT:nextUpdate" [hidden]="Vogelalarm_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Vogelalarm_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Vogelalarm_WT:disabled | map('1:true, .*:false')"
</ftui-label>
</td>
</tr>
<tr>
<td>
<ftui-label size="3" color="white" @click="pop_tischlampe_timer.open()"
[text]="Tischlampe_WT:alias">
</ftui-label>
</td>
<td>
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="HUEDevice8:onoff | map('1:dark,0:medium')"
[(value)]="HUEDevice8">
<ftui-icon [color]="HUEDevice8:onoff | map('1:yellow,0:black')" size="3"
[name]="HUEDevice8:onoff | map('1:lightbulb-on, 0:lightbulb')">
</ftui-icon>
</ftui-button>
</td>
<td>
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Tischlampe_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Tischlampe_WT:nextUpdate" [hidden]="Tischlampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Tischlampe_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Tischlampe_WT:disabled | map('1:true, .*:false')"
</ftui-label>
</td>
</tr>
<tr>
<td>
<ftui-label size="3" color="white" @click="pop_esszimmerlampe_timer.open()"
[text]="Tischlampe_WT:alias">
</ftui-label>
</td>
<td>
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="HUEDevice9:onoff | map('1:dark,0:medium')"
[(value)]="HUEDevice9">
<ftui-icon [color]="HUEDevice9:onoff | map('1:yellow,0:black')" size="3"
[name]="HUEDevice9:onoff | map('1:lightbulb-on, 0:lightbulb')">
</ftui-icon>
</ftui-button>
</td>
<td>
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Esszimmerlampe_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Esszimmerlampe_WT:nextUpdate" [hidden]="Esszimmerlampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Esszimmerlampe_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Esszimmerlampe_WT:disabled | map('1:true, .*:false')"
</ftui-label>
</td>
</tr>
</table>
</ftui-popup>
Viele Grüße
Jürgen
@juemuc
Als erstes fehlt immer im letzten Label der Reihe ein > (Tags schließen nicht vergessen!)
Als zweites nimmt man nicht mehr table sondern ftui-column und ftui-row. Bsp:
<ftui-column height="60px">
<ftui-row>
<ftui-label size="3" color="white" @click="pop_nachtlampe_timer.open()"
[text]="Nachtlampe_WT:alias">
</ftui-label>
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="FBDECT_FB_08761_0230141:state | map('on:dark,off:medium')"
[(value)]="FBDECT_FB_08761_0230141:state">
<ftui-icon [color]="FBDECT_FB_08761_0230141:state | map('on:yellow,off:black')" size="3"
[name]="FBDECT_FB_08761_0230141:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Nachtlampe_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Nachtlampe_WT:nextUpdate" [hidden]="Nachtlampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Nachtlampe_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Nachtlampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
</ftui-row>
</ftui-column>
<ftui-column height="60px">
<ftui-row>
<ftui-label size="3" color="white" @click="pop_vogellampe_timer.open()"
[text]="Vogellampe_WT:alias">
</ftui-label>
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="FBDECT_FB_08761_0234719:state | map('on:dark,off:medium')"
[(value)]="FBDECT_FB_08761_0234719:state">
<ftui-icon [color]="FBDECT_FB_08761_0230141:state | map('on:yellow,off:black')" size="3"
[name]="FBDECT_FB_08761_0234719:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Vogellampe_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Vogellampe_WT:nextUpdate" [hidden]="Vogellampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Vogellampe_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Vogellampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
</ftui-row>
</ftui-column>
Hier kannst du der column eine Höhe mitgeben um die Abstände zu verringern...
LG
Hi,
mit <ftui-column height="60px"> funktioniert es leider nicht. Damit ist der geesamte Bereich nur 60px hoch und es wird nur ein Bruchteil angezeigt. Bei <ftui-row> funktioniert aber "margin". Leider sind nun die Spalten nicht untereinander (s. Bild). Somit bin ich leider noch einen Schritt zurück oder ::)
Bitte nochmals um Hilfe 8)
Viele Grüße
Jürgen
@juemuc
Die 60px sind abhängig von deiner Bildschirmauflösung und müssen deiner angepasst werden!
Hier werden die Spalten mit einer %-Angabe in gleicher Breite angegeben siehe Bildanhang. Muss natürlich für dich angepasst werden!
Bsp.:
<ftui-popup id="pop_timer" timeout="120" width="40em" height="auto" position="page">
<header>Timer</header>
<ftui-column height="60px">
<ftui-row width="100%">
<ftui-row width="46%">
<ftui-label size="3" color="white" @click="pop_nachtlampe_timer.open()"
text="Nachtlampe_WT:alias">
</ftui-label>
</ftui-row>
<ftui-row width="18%">
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="FBDECT_FB_08761_0230141:state | map('on:dark,off:medium')"
[(value)]="FBDECT_FB_08761_0230141:state">
<ftui-icon [color]="FBDECT_FB_08761_0230141:state | map('on:yellow,off:black')" size="3"
[name]="FBDECT_FB_08761_0230141:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row width="36%">
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Nachtlampe_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Nachtlampe_WT:nextUpdate" [hidden]="Nachtlampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Nachtlampe_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Nachtlampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
</ftui-row>
</ftui-row>
</ftui-column>
<ftui-column height="60px">
<ftui-row width="100%">
<ftui-row width="46%">
<ftui-label size="3" color="white" @click="pop_vogellampe_timer.open()"
text="Vogellampe_WT:aliassss">
</ftui-label>
</ftui-row>
<ftui-row width="18%">
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="FBDECT_FB_08761_0234719:state | map('on:dark,off:medium')"
[(value)]="FBDECT_FB_08761_0234719:state">
<ftui-icon [color]="FBDECT_FB_08761_0230141:state | map('on:yellow,off:black')" size="3"
[name]="FBDECT_FB_08761_0234719:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row width="36%">
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Vogellampe_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Vogellampe_WT:nextUpdate" [hidden]="Vogellampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Vogellampe_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Vogellampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
</ftui-row>
</ftui-row>
</ftui-column>
<ftui-column height="60px">
<ftui-row width="100%">
<ftui-row width="46%">
<ftui-label size="3" color="white" @click="pop_vogellampe_timer.open()"
text="Vogellampe_WT">
</ftui-label>
</ftui-row>
<ftui-row width="18%">
<ftui-button shape="circle" height="4.5em" width="4.5em" margin="2"
[color]="FBDECT_FB_08761_0234719:state | map('on:dark,off:medium')"
[(value)]="FBDECT_FB_08761_0234719:state">
<ftui-icon [color]="FBDECT_FB_08761_0230141:state | map('on:yellow,off:black')" size="3"
[name]="FBDECT_FB_08761_0234719:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row width="36%">
<ftui-label color="red" size="3"
text="Timer ist aus!" [hidden]="Vogellampe_WT:disabled | map('1:false, .*:true')">
</ftui-label>
<ftui-label color="green" size="3"
[text]="Vogellampe_WT:nextUpdate" [hidden]="Vogellampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
<ftui-label color="white" size="3"
[text]="Vogellampe_WT:nextValue | map('on:AN, off:AUS')" [hidden]="Vogellampe_WT:disabled | map('1:true, .*:false')">
</ftui-label>
</ftui-row>
</ftui-row>
</ftui-column>
</ftui-popup>
Danke. Jetzt passt es ;D
Und wieder etwas gelernt :)
Viele Grüße
Jürgen
Hallo,
ich versuche mich auch in die neu Version einzuarbeiten.
Leider finde ich keine Lösung für meine Frage. in der ftui-theme.css sind einige Farben schon definiert oder man könnte auch noch eigene zufügen. Wenn ich aber z.B.
color="teal"
auswähle passiert nichts! Wenn ich eine Standardfarbe z.B. "green" nehme und den Wert in der css ändere klappt es.
Was muss ich einstellen / auswählen um nicht nur die Standardfarben sondern vielleicht auch eigene zu definieren und verwenden?
Danke
Gruß Lutz
In einer user.css das einbinden:
[color="teal"] {
color: #008080;
}
oder:
[color="teal"] {
--color-base: #008080;
}
Und mit:
color="teal"
aufrufen.
Wie man eine user.css einbindet ist hier im Thread zufinden...
LG
Hallo mr_petz,
ich habe noch ein Problem mit der aktuellen Version des "Weekdaytimer". Meine WT für die Rollos haben aktuell die Werte pct:0, pct:25, pct:50, pct:75 und pct:100. Diese kann ich auch über die setcmd-Liste hinterlegen. Wenn ich dann aber einen Wert auswähle und das ganze "sende" übernimmt er den ausgewählten Wert als "Code". Das ist natürlich falsch und die Übergabe an FHEM ist dadurch auch nicht korrekt. Kannst Du dies bitte prüfen.
<ftui-timerset
device="{{Rollo_WT}}"
setcmd='pct:0, pct:25, pct:50, pct:75, pct:100'>
</ftui-timerset>
Die FHEM-Definition sieht korrekt so aus:
defmod Rollo_Buero_WT WeekdayTimer Rollo_Buero de 1234560|{sunrise_abs("HORIZON=-2","00:00","00:00")}|pct:100 1234560|{sunset_abs("HORIZON=-4","00:00","00:00")}|pct:0
attr Rollo_Buero_WT commandTemplate set $NAME $EVENT
attr Rollo_Buero_WT devStateIcon 0:fts_roof_window_shutter_0 25:fts_roof_window_shutter_02 50:fts_roof_window_shutter_05 75:fts_roof_window_shutter_07 100:fts_roof_window_shutter_10 STOP:checkbox_checked
attr Rollo_Buero_WT devStateStyle style="text-align:right"
attr Rollo_Buero_WT disable 0
attr Rollo_Buero_WT event-on-change-reading .*
attr Rollo_Buero_WT group Schaltzeitpunkte
attr Rollo_Buero_WT room Schaltzentrale,Statuszentrale
attr Rollo_Buero_WT stateFormat {my $val;;\
if (ReadingsVal($name, "disabled","") eq "1") {$val = "AUS"}\
else {$val = ReadingsVal($name, "currValue","")};;\
$val}
Danke und viele Grüße
Jürgen
Hi Jürgen, danke fürs Testen und für die Rückmeldung.
Der Fehler kommt von den Leerstellen nach dem Komma im setcmd.
Habe es aber jetzt mit berücksichtigt und korrigiert...
ps. Nächste mal bitte einen neuen Thread aufmachen.
LG
Hallo zusammen,
um Coding zu sparen, habe ich einige Funktionen in "Content-Files" ausgelagert. Dies funktioniert auch soweit. Jetzt möchte ich aber einen Paramter übergeben, der "direkt" verwendet wird und nicht als "Gerät" ausgewertet wird.
Bsp.:
<ftui-column>
<ftui-icon size="4" [color]="{{Geraet}} | map('{{ON}}:red, {{MAYBE}}:yellow, {{OFF}}:green, .*:red')"
path="{{Path}}" name="{{Icon}}" [hidden]="{{Direkt-Wert}} | map('hide:true, .*:false')">
</ftui-icon>
<ftui-label size="3 padding="1" scroll text-align="center"" color="white" scroll text-align="center"
[text]="{{Geraet}}" [hidden]="{{Direkt-Wert}} | map('hide:false, .*:true')">
</ftui-label>
</ftui-column>
Aufruf über
<header>Drucker</header>
<ftui-content
file="./content/IT-Geraete.html" Geraet="ML2571N_check" Path="../images/fhemSVG" Icon="it_printer" ON="present" MAYBE="" OFF="absent" Direkt-Wert="hide">
</ftui-content>
</ftui-grid-tile>
So funktioniert es aber nicht :( Es wird immer das Icon und der Text angezeigt und nicht entweder oder.
Viele Grüße
Jürgen
@juemuc
So kann das nicht funktionieren, da "hide" als Gerät interpretiert wird, aber nicht existiert ... Pipes werden nicht angesprochen ...
Du müsstest/kkönntest vermutlich mit local-Readings arbeiten ...
@mr_petz
Wäre das was für ... Du weisst schon ...
@OldFhem
das ist ja das Problem. Ich würde gerne einen Wert und kein Gerät übergeben. Als Zwischenlösung filtere ich aktuell einen speziellen Wert eines Gerätes.
Viele Grüße
Jürgen
Hallo,
bitte die beiden Icons aus dem Anhang in den FTUI3-Standard übernehmen. Danke
Viele Grüße
Jürgen
Zitat von: mr_petz am 08 Januar 2023, 20:31:05
Habe zum Verhalten im swiper was rausgefunden...
Wenn man diese Zeile vom swiper:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/swiper/swiper.component.js#L90
mit dieser ersetzt:
this.submitChange('value', this.value);
dann funktioniert das @click="swiper1.next()" oder @click="swiper1.value = 'sw2'"
Warum wissen nur die kenner...
Zur dot Größe fällt mir nur das ein Bsp.:
<ftui-swiper id="swiper1" dots style="font-size:2em">
Hier werden die dots 2em.
Man muss nur bei den eingefügten ftui-label im swiper auch eine Größe angeben, sonst erbt das label die 2em...
LG
Hallo zusammen,
kann man diese Änderung nicht in den "Standard" übernehmen? Bei mir funktioniert die Änderung bei "Edge/IE" als auch bei Firefox.
Viele Grüße
Jürgen
Hallo zusammen,
unter FTUI(2) konnte ich den neuen Wert eines Schalters in Abhängigkeit des alten Zustands setzen.
<div data-type="switch" data-device="Juergens_PC" data-states='["on","off","none"]' data-set-states='["off","refresh","refresh"]'
data-colors='["red","green","yellow"]' data-background-colors=["black","black","black"] data-icon="fa-laptop" class="big">
</div>
Wie kann ich dies unter FTUI3 lösen?
Mir fällt nur eine umständliche Lösung über "hidden" ein, wo ich in Abhängigkeit des aktuellen Wertes unterschiedlichen "Button" definiere.
Viele Grüße
Jürgen
Wenn ich noch alle Zustände vom device wüsste und wie sich da refresh verhält, könnte ich es besser zuweisen:
Bsp.:
<ftui-button (value)="map('on:off,.*:refresh') | Juergens_PC" [value]="Juergens_PC" states="$value" [color]="Juergens_PC | map('on:red,off:green,refresh:yellow,none:yellow')">
<ftui-icon name="laptop"></ftui-icon>
</ftui-button>
Muss denn 2xrefresh und 1xoff hintereinander gesetzt werden?
Was ist none im states?
LG
Super. Danke. Das Device hat nur on/off.
Viele Grüße
Jürgen
Hallo, habe ein bisschen herum gesucht aber nich nuchts gefunden.
Gibt es schon einige Leute die ihre FTUI3 Oberflächen gezeigt haben in Bildern oder als Demo?
Würde mich interessieren was den Unterschied zu 2 ausmacht hauptsächlich optisch.
Hi,
ich habe gerade umgestellt. Aus meiner Sicht ist der Unterschied in der Definition und den Farben. Ausserdem wird FTUI2 nicht weiterentwickelt.
Anbei eine direkte Gegenüberstellung.
Viele Grüße
Jürgen
Kann mir jemand sagen, warum das green wie türkis aussieht und das gelb wie Hautfarbe.
Ist das so gewollt?
@Badflex
einzigster Schwachpunkt von FTUI3 zu FTUI2 ist Chart. Bei manchen muss ich mir da mit iframes zu FTUI2 behelfen. Ansonsten sind optisch nur minimale Unterschiede.
Gruß
Eisix
Zitat von: Badflex am 23 Januar 2023, 11:19:58
Kann mir jemand sagen, warum das green wie türkis aussieht und das gelb wie Hautfarbe.
Ist das so gewollt?
Ich sage nur pastell und nicht grell ;)
LG
Zitat von: Badflex am 23 Januar 2023, 11:19:58
Kann mir jemand sagen, warum das green wie türkis aussieht und das gelb wie Hautfarbe.
Ist das so gewollt?
Zusätzlich könnte man noch anmerken, dass Vieles nur ein "Vorschlag" ist ... Individualisierung nicht ausgeschlossen ...
Zitat von: Badflex am 22 Januar 2023, 21:44:25
Hallo, habe ein bisschen herum gesucht aber nich nuchts gefunden.
Gibt es schon einige Leute die ihre FTUI3 Oberflächen gezeigt haben in Bildern oder als Demo?
Würde mich interessieren was den Unterschied zu 2 ausmacht hauptsächlich optisch.
Bisher gibt es das nicht.
Ich habe inzwischen 95% nach FTUI3 umgezogen, und auch gleich einges anders gemacht als vorher.
Der direkte Vergleich im Anhang.
Aber ich muss sagen, dass ich wegen noch nicht so viel vorhandener Doku vieles erfragen musste. Aber ich bin bis jetzt schon sehr zufrieden damit. :)
OT an
Ist ja geil... :D
"Kind der Woche"
OT aus
LG
OT=AN
Ja...die Kids hatten sich immer gezofft, wer Abends zuerst ins Bad ist.
Jede Woche wurde ein anderes Bild angezeigt. Grade Woche: Kind 1 / Ungrade Woche: Kind 2
Problem gelöst!
Kinds sind nun groß genug, darum kein Einbau mehr in FTUI3. :)
OT=AUS
Ein herzerfrischendes Moin vom achtern Diek vorweg!
Wir alle hatten ja die Probleme gehabt, dass nach dem Update vor ein paar Monaten die Popups nicht mehr funktionierten.
Auch ich habe mittlerweile alle meine Popups auf das obligatorische "@click" umgestellt.
Alle bis auf ein Popups arbeiten auch brav wie sie sollen.
Alle bis auf ein (gallisches) Popup widersetzt sich beharrlich den imperialistischen Anweisungen des Programmierers! >:(
So siehts aus:
Image01.png
Der "History" - Button ist wie folgt programmiert:
<td width="20%" align="center">
<ftui-button [value] = "OS_DoorBird"
fill = "solid"
class = "size-3"
shape = "circle"
states = ""
@click = "history.open()">
<ftui-icon name = "history2"
color = "light"
class = "size-2"
@click = "history.open()">
</ftui-icon>
</ftui-button>
<ftui-label text = "History"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
Das Popup selbst ist wie folgt programmiert:
<ftui-popup position="page" shape="round" id="history" height="40%" width="90%" top="30%" left="5%" timeout="0" timeout="0">
<header>History</header>
<table width="100%" border="2">
<tr>
<td align="center" colspan = "100%">
<ftui-label text = "History of Activities - Images and Videos"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
</tr>
<tr>
<td align="center" width = "33%" colspan="2">
<ftui-label text = "Doorbell"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
<td align="center" width ="33%" colspan="2">
<ftui-label text = "Motionsensor"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
<td align="center" width ="17%" rowspan="2" >
<ftui-label text = "Manual Snapshots"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
<td align="center" width ="16%" rowspan="2" >
<ftui-label text = "Manual Videos"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
</tr>
<tr>
<td width="17%">
<ftui-label text = "Image"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
<td width="16%">
<ftui-label text = "Video"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
<td width="17%">
<ftui-label text = "Image"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
<td width="16%">
<ftui-label text = "Video"
color = "white"
class = "size-2 bold">
</ftui-label>
</td>
</tr>
<tr>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "doorbell_Image_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "doorbell_Video_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "motionsensor_Image_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "motionsensor_Video_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "snapshot_Image_00"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "manual_Video_00"> </ftui-content></td>
</tr>
<tr>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "doorbell_Image_01"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "doorbell_Video_01"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "motionsensor_Image_01"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "motionsensor_Video_01"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "snapshot_Image_01"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "manual_Video_01"> </ftui-content></td>
</tr>
<tr>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "doorbell_Image_02"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "doorbell_Video_02"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "motionsensor_Image_02"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "motionsensor_Video_02"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "snapshot_Image_02"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "manual_Video_02"> </ftui-content></td>
</tr>
<tr>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "doorbell_Image_03"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "doorbell_Video_03"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "motionsensor_Image_03"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "motionsensor_Video_03"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "snapshot_Image_03"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "manual_Video_03"> </ftui-content></td>
</tr>
<tr>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "doorbell_Image_04"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "doorbell_Video_04"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "motionsensor_Image_04"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "motionsensor_Video_04"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyimage.html" DbUrl = "snapshot_Image_04"> </ftui-content></td>
<td align="center"><ftui-content file = "content/content_home_historyvideo.html" DbUrl = "manual_Video_04"> </ftui-content></td>
</tr>
</table>
<ftui-button color="danger" id="history" popup-close>Close</ftui-button>
</ftui-popup>
Wieso wir das verflixte "history" - Popup nicht geoeffnet?
Irgendetwas ueberlese ich hier, sehe aber den wald vor lauter Baeumen nicht...
Wenn Ihr irgendetwas seht, dann bin ich fuer jeden Hinweis dankbar!
[Nachtrag]
Problem geloest: "history" ist offensichtlich eine Terminologie, die ftui nicht mag.
Ich habe das popup in "frontdoorcamhistory" umbenannt und schwupps geht es!
Siehe Image02.png
Gruss
Sailor
Moin an alle,
Ich sehe hier das alle das Wetter von Proplanta nehemen. Ich würde jetzt DWD nehem da ich da die genauesten Erfahrungen habe auf der Handy App.
Bevor ich mir hier die mühe mache herauszufinden wie die ganzen readings
Übersetzt heißen und das in ftui einzubauen,wollt ich fragen, welchen Grund ihr habt Proplanta zu nehmen?
Vielleicht hat auch jemand schon eine Wetteranzeige mit DWD gemacht und möcht uns etwas Arbeit ersparen.:)
Danke
@Badflex
Vorschlag ungetestet....:
Du könntest versuchen für DWD-Wetter den HTML-Code in einem content mit getHTML von FHEM holen wenn du den weblink hast.
Zitatdefine DWD_Weblink weblink htmlCode { DWD_OpenData_Weblink::AsHtmlH("DWD_Weblink_Generator") }
https://wiki.fhem.de/w/images/8/87/DWDODweblink.png
https://wiki.fhem.de/wiki/DWD_OpenData#Beispiel_f.C3.BCr_die_Einrichtung_eines_Weblinks
Der wird dann so angezeigt. Aufpassen muss man nur bei den SVG´s. Die sind meist zu Groß. Siehe hier:
Problem:
https://forum.fhem.de/index.php/topic,115259.msg1238688.html#msg1238688
Lösung:
https://forum.fhem.de/index.php/topic,115259.msg1238708.html#msg1238708
Bsp:
<ftui-content [content]="Device | getHTML('DeviceHtmlCode')"></ftui-content>Weitere Beispiele sind hier im Thread zu finden.
Ich hoffe das hilft ein wenig....
LG mr_petz
Ich hätte nochmal eine Frage bezüglich dem @click: Ist es möglich mit dem @click auch die Tabs umzuschalten, ich blende mir in der Kopfzeile ein Batteriesymbol ein falls mindestens eine Batterie schwach ist und würde gerne beim klicken auf das Symbol in den Tab System springen.
Hier mal die Definition des Icons:
<ftui-column width="3%">
<ftui-icon size="-1" name="battery-1" @click="View6.open()" color="red"
[hidden]="di_Monitoring_Batterien:state | map('ok:true, `.*`:false')"></ftui-icon>
<ftui-badge [text]="di_Monitoring_Batterien:count"
[hidden]="di_Monitoring_Batterien:count | step('0:true, 1:false')" class="size-0">
</ftui-badge>
</ftui-column>
Und hier die Definition des Tabs:
<ftui-tab-view id="View6">
<ftui-content file="content-system.html"></ftui-content>
</ftui-tab-view>
bzw. der Button der Fusszeile für den Tab:
<ftui-tab view="View6" title="System" direction="vertical" timeout="60">
<ftui-icon name="server"></ftui-icon>
<label class="small">System</label>
</ftui-tab>
Auf jeden Fall funktioniert die @click Funktion so wie ich sie oben verwendet habe leider nicht, da kommt ein Fehler.
Vielleicht hat da jemand ja eine Idee.
Gruß Markus
Guten Morgen Markus :D
Schau hier:
https://forum.fhem.de/index.php/topic,115259.msg1241191.html#msg1241191
war bereits Thema...
LG mr_petz
Guten Morgen mr_petz,
hab zwar die Suchfunktion benutzt und war auch der Meinung ich hätte das schonmal gesehen, ist halt leider schon spät. :D
Vielen Dank für den Hinweis, funktioniert einwandfrei.
LG Markus
Zitat von: mr_petz am 27 Januar 2023, 07:30:17
@Badflex
Vorschlag ungetestet....:
Du könntest versuchen für DWD-Wetter den HTML-Code in einem content mit getHTML von FHEM holen wenn du den weblink hast.https://wiki.fhem.de/w/images/8/87/DWDODweblink.png
https://wiki.fhem.de/wiki/DWD_OpenData#Beispiel_f.C3.BCr_die_Einrichtung_eines_Weblinks
Der wird dann so angezeigt. Aufpassen muss man nur bei den SVG´s. Die sind meist zu Groß. Siehe hier:
Problem:
https://forum.fhem.de/index.php/topic,115259.msg1238688.html#msg1238688
Lösung:
https://forum.fhem.de/index.php/topic,115259.msg1238708.html#msg1238708
Bsp:
<ftui-content [content]="Device | getHTML('DeviceHtmlCode')"></ftui-content>
Weitere Beispiele sind hier im Thread zu finden.
Ich hoffe das hilft ein wenig....
LG mr_petz
Vielen Dank für die schnelle Hilfe, nur leider komm ich damit nicht so ganz klar.
Den Weblink hab ich erstellt und sehe das Wetter auch in grafischer Ansicht in fhem.
Was sollte den passieren wenn ich den Weblink mit dem HtmlCode erstelle?
Sollte da eine Ausgabe kommen die ich dann bei getHTML('DeviceHtmlCode')" in FTUI einfüge?
Was wäre den das Device? DWD_Weblink?
Und der Code?
Sorry,
Gerade mal getestet und html geholt (fhemdevice ohne Daten):
<ftui-content [content]="DWD:fc_time | getHTML('DWD_Weblink_Generator horizontalForecast')"></ftui-content>
Mehr kann ich dir da nicht helfen... sorry...
Doch siehe Edit! ;)
LG mr_petz
Edit: man brauch dann noch die css Einträge des weatherForecast usw... sonst wird es nicht horizontal angezeigt...
/* weather table with fixed column width */
.weatherForecast {
display: table;
table-layout: fixed;
column-gap: 10px;
}
/* weather table header row */
.weatherHeaderRow {
display: table-header-group;
white-space: nowrap;
}
/* weather table data row */
.weatherDataRow {
display: table-row-group;
}
/* weather table data cells */
#weatherFontBold {
font-weight: bold;
}
.weatherWeekday {
display: table-cell;
min-width: 70px;
text-align: center;
vertical-align: middle;
}
.weatherCondition {
display: table-cell;
position: relative;
top: -4px;
text-align: center;
vertical-align: middle;
font-size: 60%;
word-wrap: break-word;
}
.weatherTemperature {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 95%;
white-space: nowrap;
}
.weatherWind {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 80%;
padding-top: 3px;
}
/* weather table condition icon cell */
.weatherIcon {
display: table-cell;
position: relative;
text-align: center;
}
/* weather icon */
.weatherIcon img {
width: 96%;
height: auto;
position: relative;
}
/* embedded alert icon with pointer support */
.weatherAlertIcon {
position: absolute;
top: 5px;
right: 5px;
width: 25px;
height: 22px;
background-size: 25px 22px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkCAMAAADM4ogkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NjcyOSwgMjAxMi8wNS8wMy0xMzo0MDowMyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIEVsZW1lbnRzIDEyLjAgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1RjU1NzJBRDMyRTcxMUU1QTk4MkI0RTkwODEwODQ1QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1RjU1NzJBRTMyRTcxMUU1QTk4MkI0RTkwODEwODQ1QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVGNTU3MkFCMzJFNzExRTVBOTgyQjRFOTA4MTA4NDVBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVGNTU3MkFDMzJFNzExRTVBOTgyQjRFOTA4MTA4NDVBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+oFydjAAAAwBQTFRF9fX267W51Csy9d7c1VBV9uPc/vz89+nl5YB/2Flk2mZp1Cgv0Csw5pWR7K2t1Soy1Cow7b6y0iUr+/r61jI54X+A+uvq21xV44qO/fj400tU1kxG3nNx2mJp34Bz/Pj2a2tr4Ht91S43fn5+1jA31S0y0iYu1TA1/ff3+/TxEhIS3W1u1jA010Q++efj1kVH1Tk+gYGB6qWh4oWEtra21TI48sjH1VVc1tbW1jY22ltd4YF/1kFHl5eX/vz7/Pz84nZt+evt9+Tm2mNu1Sw14YSD1Ss04YKC0isv4X5/0zc21CUu8cnL0jA20jAz22xy1jE422Zv1i800isw1Cgx11xjKysr1FFZ4X190iQsGRkZ0jY+1TE41Cww0y0y0ykt1i431i4z0y800ikvPz4/AAAA////DQwM1TI30yYs1TE31TA21TE21S401S801S810ycs//7+1TA3///+/v791TI2/v//0Sov0iYt0yYt6urqkZGR1TM40ycu1S414ODg4YB3+/Hw7bK0/vv78fHxh4eH+OPf0i8w1DI30icu1y843Zia/PX13Nvb6aWZ4YKE+fDv21RT00E83G5y3m9x7tDF3Gdu99fW1EJK1ktK3t7e5I+R4oeH3WNp3oCF+vH16ZOJ1Sw27cG31i018dDL4qOf3Wde7Kqe+O7m2ERH+e3o+u/t4YuY/Pb15IqG5p2R4np52TA82mhx2V1p3mpx5oWL66uiRkZG4YOR/v7+1ygz1TxC8dDV9dHS2VJL1CUw8by79+Hg7bq3vr6+9dnR1Tc49d/X11le77yv22hl2lVY+Ofo33540icspqan+/f49N/h5J6m2HB7zczN3nZ88c3FsrKz3HZ74ICC4YGA1oJy10JD+Onj8c3J1Dk71T494oaE4HpxNTU14XRz7Ozs7+/vcG9v+/bz/Pj1/fr3IiIi676/5IJx4Hpr6amn56On6aGd2mlu4X2A22Vm2WFk1jI33GNk+/Ds2VJU2FZW8/Pz78jD3V1v55iY3W1x////C1yJRAAAAQB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AFP3ByUAAAMKSURBVHjajNEFWBNxGAbwOXEoUzYnqCgGuPMUUFE8sRuwgDlUEJmK8z6/XWyEEjrswu7u7u7u7u4u7G7FWxoj/J6L9/7v77nnQpTpMM7XFkocV0UOK2VKbkt3/R+4KY0Zlnw8d7ikBeu9VroRcoXPg5F1Y5Mn5wYPaRnGqOxMfPbIGXZfFMxxJGtg0lxzhoWlKpYfSrCd9f4rc4JPKs1l9B1aeabGoLRQTnBxG8T2K2DwLV7FRVTOHi47yKKmxGyAagoGxb7x2cLSMuS0eZIAMopJUaWtkR3M1yUBpe8lkuoj4WYYm8Bf98gaxjdsSik7toKydPQ0OKEzUnGuWcOLWgZPXoCe3Wi6HlS+zVMG/35Zwfq7eqO+wxk4T9N0OYDXKQylnZ4VnKdxM5bfAtDTh6arAlT4IldxXYo6woyS3hwxpRHA12ia7gUA3yKUKL8f7wCPiClMOSsA0VPTMwIkeeoQm+39F1asZECZ02kBFGlH06eEM+Rt0RvFHyX/wNUy7JGex9Q3EGB1U4BCLVXK9D1/wxu1lJS8lMTc36Pp/eZQcaoM9Us9/oSJL8QUGbrDXMNmOvqBJe3TxqC22p/wgIbBlrMsLZSju1pT93dSZDsW/Q3rF/NG3r+xte4zqKY1QY0IBuVvwQ4LazFGUTzRVhexJziahkzyTht8PM6AwXUbWbutj3za2W+5IIxEovYAKxwlww+KV7buYTfzL7TODOGry/tb4KdaCSg/VsFWDfSx/ELLLK9CILl9hBnOEaOq4DN7BZe6lv36++plJ3ST/zDBfEOEN6udBNnNWDHFhTpnihIbNkXKUNfLyyuqeciVOwFvr7oHrApqHhTiPjog6EqdNVFVDIji/JmiiYQbopFM3R0XF6fT6VJ15jFFnUJhSqQRETV5RXfnGykhMea9B2M624ezBaOmuKiv1GDg9TxJ8sIxltB7E0QsT/BqpdrPT9g4P7VaTcZKL4vGDP/psq71BpdSLj9nTmod3mTC+HDfN+FN2jodjlwfGRnoFNg2cH2B7+ca/xJgAFL1l3PxpIx4AAAAAElFTkSuQmCC);
}
.weatherAlertIcon:hover {
opacity: 0.7;
}
.weatherAlertIcon:focus {
opacity: 1.0;
}
/* opaque white background for alerts dialog */
.weatherOverlay {
display: none;
position: fixed;
z-index: 1;
opacity: 0.2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
}
.weatherAlertIcon:focus .weatherOverlay {
display: block;
}
/* alerts dialog box */
[class^=weatherAlertBox] {
display: none;
position: absolute;
z-index: 2;
opacity: 1;
top: 0;
border: 3px solid white;
border-radius:3px;
box-shadow: 0px 0px 6px 4px #666;
background: #EEE;
}
.weatherAlertIcon:focus .weatherAlertBoxLeft {
display: block;
right: -268px;
}
.weatherAlertIcon:focus .weatherAlertBoxCenter {
display: block;
left: -178px;
}
.weatherAlertIcon:focus .weatherAlertBoxRight {
display: block;
left: -312px;
}
/* alerts dialog close button */
.weatherAlertsClose {
position: absolute;
top: -12px;
right: -13px;
border-radius: 12px;
box-shadow: 1px 1px 3px #666;
line-height: 21px;
width: 21px;
background: #606061;
text-align: center;
text-decoration: none;
font-family: Sans-serif;
font-weight: bold;
color: white;
}
.weatherAlertsClose:hover {
opacity: 0.8;
}
/* alerts dialog title */
.weaterAlertsTitle {
font-weight: bold;
color: black;
}
/* alert messages */
[class^=weaterAlertMessage] {
float: left;
text-align: left;
white-space: nowrap;
}
.weaterAlertMessage p {
white-space: normal;
}
am besten in eine user.css einfügen oder in den styletag der Seite
Edit: content geändert wegen Event zum erneuern des content
Vielen vielen vielen vielen vielen vielen vielen vielen vielen vielen vielen vielen vielen vielen vielen vielen vielen
Dank!
Es klappt :D
Sehr schön :D
Das wäre wieder was fürs wiki!
https://wiki.fhem.de/wiki/FTUI3_Best_Practices
Also wenn einer von Euch das Eintragen könnte wäre das super. Alles kann ich mir auch nicht merken :)
Wenn du magst kannst du noch ein screenshot posten.?
LG mr_petz
Nicht wundern die Oberfläche ist noch in bau, aber das Wetter sieht man schon. Das einzige was ich nicht verstehe sind die 2 Fragezeichen unter den Wolken. Die sind aber in fhem weblink auch so.
Zitat von: Badflex am 28 Januar 2023, 20:26:57
Nicht wundern die Oberfläche ist noch in bau, aber das Wetter sieht man schon. Das einzige was ich nicht verstehe sind die 2 Fragezeichen unter den Wolken. Die sind aber in fhem weblink auch so.
Kein Ding. dwd-Weahter sieht gut aus und die icongröße passt...
Die Fragezeichen bei dir sind im code weatherCondition (bewölkt abnehmend etc...)...
LG
Ja, den Text für die ? muss man in den Attributen vom DWD_OPENDATA Mudol extra einschalten.
Zitat von: mr_petz am 28 Januar 2023, 19:35:16
Das wäre wieder was fürs wiki!
https://wiki.fhem.de/wiki/FTUI3_Best_Practices
Bitte einen prüfenden Blick werfen auf: https://wiki.fhem.de/wiki/FTUI3_DWD_Wettervorhersage (https://wiki.fhem.de/wiki/FTUI3_DWD_Wettervorhersage)
Danke dir @OdfFhem. Jetzt würde mich noch der refresh dazu interessieren.
Es sollten doch neue Daten kommen wenn ein Event vom DWD_Weblink kommt?
Kann das jemand von Euch bestätigen?
LG mr_petz
Zitat von: juemuc am 20 Januar 2023, 19:23:22
@OldFhem
das ist ja das Problem. Ich würde gerne einen Wert und kein Gerät übergeben. Als Zwischenlösung filtere ich aktuell einen speziellen Wert eines Gerätes.
Viele Grüße
Jürgen
Hi Jürgen,
@OdfFhem und meine Wenigkeit haben eine neue Komponente gebaut um bei Start von FTUI3 einen Wert, auch mehrere (was auch immer) zu übergeben (siehe Examples).
Vielleicht kannst du es für dein Anliegen benutzen.
Examples:
https://github.com/mr-petz/ftui/blob/addons/www/ftui/examples/local.html
und Link:
https://github.com/mr-petz/ftui/tree/addons/www/ftui/components/local
LG mr_petz
ps. das meiste von mir ist jetzt hier:
https://github.com/mr-petz/ftui/tree/addons
zu finden und ihr könnt es per update ins fhem eingepflegen/aktualisieren...
Prima. Ich werde es ebenfalls testen.
Viele Grüße
Jürgen
Zitat von: mr_petz am 29 Januar 2023, 10:30:26
Danke dir @OdfFhem. Jetzt würde mich noch der refresh dazu interessieren.
Es sollten doch neue Daten kommen wenn ein Event vom DWD_Weblink kommt?
Kann das jemand von Euch bestätigen?
LG mr_petz
Auf jeden Fall holt er sich bei mir mindestens alle 3 Stunden ein Update und ändert dann auch den Weblink.
Zitat von: mr_petz am 29 Januar 2023, 10:30:26
Es sollten doch neue Daten kommen wenn ein Event vom DWD_Weblink kommt?
DWD_Weblink hat keinerlei Reading und erzeugt auch selbst keinerlei Event.
DWD_Weblink_Generator hat zwar ein Reading namens
state, aber steht bei mir dauerhaft auf "initialized" und erzeugt selbst kein immer wiederkehrendes Event.
Der Event-Monitor bleibt gähnend leer ...
Momentan wird DWD_Weblink nur erneuert, wenn
... FTUI3 einen vollständigen Refresh anstößt
... oder der Anwender die Seite neu lädt
Ausführung von get forecast, Änderung des forecastStation-Attributes, usw. hat keinerlei direkte Auswirkung ...
Sinnvoll scheint der Wechsel zu reinen DWD-Events:
DWD:fc_time ... Zeitpunkt der Veröffentlichung der Daten durch den Wetterdienst
DWD:fc_state:time ... Zeitpunkt der letzten Aktualisierung durch das DWD-FHEM-Device
Wiki-Anpassung scheint notwendig ... bitte mal testen
@OdfFhem
Kann ich bestätigen...
Es wäre besser auf das DWD Device mit Reading fc_time zugehen.
<ftui-content [content]="DWD:fc_time | getHTML('DWD_Weblink_Generator horizontalForecast')"></ftui-content>
So werden die Daten im content neu geholt, wenn sich fc_time ändert...
LG mr_petz
Hallo zusammen,
nachdem ich hier sehr viel Hilfe erhalten habe, möchte ich mich revanchieren und meine Definitionen für meine Wetterseite hier kommunizieren. Ihr könnt die Info auch gerne ins Wiki übernehmen oder eine Beispielseite daraus bauen.
Viele Grüße
Jürgen
@juemuc
Wenn du noch einwenig wartest, dann könntest du mein neues Modul für die Anzeige von Wetterwarnungen verwenden...
Es ist in kürze Vorzeigebereit... ;)
LG mr_petz
Zitat von: mr_petz am 30 Januar 2023, 12:14:48
Es wäre besser auf das DWD Device ... zu gehen.
Wiki aktualisiert ...
Wie sieht es mit Aktualisierung der Darstellung bei readingsGroup aus ?
Zitat von: OdfFhem am 30 Januar 2023, 22:50:54
Wiki aktualisiert ...
Wie sieht es mit Aktualisierung der Darstellung bei readingsGroup aus ?
Danke fürs aktualisieren...
Bei beinen normalen readingsGroup wird bei mir alles korrekt aktualisiert wenn sich Werte des Device ändern.
Hier sollte man aber alle Devices die in der readingsGroup sind durch ; getrennt auch ins [content] eintragen. Wenn man die readingsGroup einträgt funzt es nicht. Gibt kein Event.
Das wäre auch wieder was fürs wiki:
<ftui-content [content]="CT1;CT2;CT3 | getHTML('CTStatus')"></ftui-content>
LG mr_petz
Edit:
Habe aber beim obigen Test ein seltsames Verhalten bei Erstladen und Wertänderung siehe Anhang. (zuckende Darstellung)
Wenn der Browsertab gewechselt wird und zurück ist es wieder Normal. ???
Es werden auch permanent neue Daten geholt...
@setstate liegt das am mehrfachen angeben der Devices?
Wie gesagt bei Browsertabwechsel ist es wieder normal....
Das zucken konnte ich durch:
this.rawText.includes('<\/')?this.initContent():'';
in zeile 26 beseitigen, aber das dauernde Daten holen nicht...(nur durch Browsertabtoggle) Kommt von initComponents???
Da bleibt dann nur ein userReading für alle Devices in der readingsGroup zu erstellen und darauf gehen bis @setstate vielleicht eine Lösung dafür hat....
Getestet mit FF und Chrome....
Zitat von: mr_petz am 29 Januar 2023, 15:31:27
Hi Jürgen,
@OdfFhem und meine Wenigkeit haben eine neue Komponente gebaut um bei Start von FTUI3 einen Wert, auch mehrere (was auch immer) zu übergeben (siehe Examples).
Vielleicht kannst du es für dein Anliegen benutzen.
Examples:
https://github.com/mr-petz/ftui/blob/addons/www/ftui/examples/local.html
und Link:
https://github.com/mr-petz/ftui/tree/addons/www/ftui/components/local
LG mr_petz
ps. das meiste von mir ist jetzt hier:
https://github.com/mr-petz/ftui/tree/addons
zu finden und ihr könnt es per update ins fhem eingepflegen/aktualisieren...
Hi mr_petz,
bei mir funktioniert die Übergabe an eine Content-Datei (noch) nicht. Ich habe folgende Definitionen:
<ftui-grid-tile row="4" col="8" height="2" width="2">
<header>FB (Internetcheck)</header>
<ftui-local value="hide:yes"></ftui-local>
<ftui-content
file="./content/IT-Geraet.html" IT-Geraet="FB_Internet_check"
ON="present" MAYBE="maybe absent" OFF="absent" Icon="it_router" OFF-CL="red">
</ftui-content>
</ftui-grid-tile>
Ich möchte hier den Wert "yes" für local:hide übergeben und frage den Wert dann in der Content-Datei wie folgt ab:
<ftui-icon [value]=local:hide
[hidden]="value | map('yes:true, .*:false')"
[color]="{{IT-Geraet}} | map('{{ON}}:green, {{MAYBE}}:yellow, {{OFF}}:{{OFF-CL}}')" size="4"
path="../images/openautomation" [name]="{{IT-Geraet}} | map('.*:{{Icon}}')">
</ftui-icon>
Leider funktioniert dies nicht. Was mache ich falsch?
Viele Grüße
Jürgen
[hidden]="local:hide | map('yes:true, .*:false')"
value-Attribut bei ftui-icon hat keine Bedeutung.
Hi Jürgen,
1. einen Wert dem content übergeben geht wie du es mit {{IT-Geraet}} gemacht hat.
2. brauchst du bei content nicht das ftui-local um einen Wert/Name zu übergeben
3. hat ftui-icon kein value.
Bei content:
<ftui-icon
[hidden]="{{value}} | map('yes:true, .*:false')"
[color]="{{IT-Geraet}} | map('{{ON}}:green, {{MAYBE}}:yellow, {{OFF}}:{{OFF-CL}}')" size="4"
path="../images/openautomation" [name]="{{IT-Geraet}} | map('.*:{{Icon}}')">
</ftui-icon>
bei local:
<ftui-local value="hide:yes"></ftui-local>
<ftui-icon
[hidden]="local:hide | map('yes:true, .*:false')"
[color]="{{IT-Geraet}} | map('{{ON}}:green, {{MAYBE}}:yellow, {{OFF}}:{{OFF-CL}}')" size="4"
path="../images/openautomation" [name]="{{IT-Geraet}} | map('.*:{{Icon}}')">
</ftui-icon>
Was willst du wie Darstellen??
LG mr_petz
Es funktioniert leider immer noch nicht. Ich habe 7 Geräte, die ich mit unterschiedlichen Icons darstelle. Bei 4 Geräten möchte ich zusätzlich über einen Button eine Aktion auslösen können. Mit dem Hide-Wert möchte ich nun der Content-Datei mitteilen, ob das Icon oder der Button mit Icon angezeigt werden soll. Aktuell kann ich dafür auch ein Geräte-Attribut nutzen.
Ich teste hier mit zwei Geräten und nur dem Icon (ein-/ausblenden).
Content-Datei:
<ftui-row [hidden]="{{IT-Geraet}}:TYPE | map('WOL:true, .*:false')">
<ftui-icon [value]=local:hide
[hidden]="{{value}} | map('yes:true, .*:false')"
[color]="{{IT-Geraet}} | map('{{ON}}:green, {{MAYBE}}:yellow, {{OFF}}:{{OFF-CL}}')" size="4"
path="../images/openautomation" [name]="{{IT-Geraet}} | map('.*:{{Icon}}')">
</ftui-icon>
Aufruf:
<ftui-grid-tile row="4" col="6" height="2" width="2">
<header>Fritzbox (Fhemstatus)</header>
<ftui-local value="hide:yes"></ftui-local>
<ftui-content
file="./content/IT-Geraet.html" IT-Geraet="FB"
ON="connected" MAYBE="" OFF="disconnected" Icon="it_router" OFF-CL="red">
</ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="8" height="2" width="2">
<header>FB (Internetcheck)</header>
<ftui-local value="hide:no"></ftui-local>
<ftui-content
file="./content/IT-Geraet.html" IT-Geraet="FB_Internet_check"
ON="present" MAYBE="maybe absent" OFF="absent" Icon="it_router" OFF-CL="red">
</ftui-content>
</ftui-grid-tile>
Viele Grüße
Jürgen
Wieso ist schon wieder value im icon? Das hat keine Wirkung!
<ftui-row [hidden]="{{IT-Geraet}}:TYPE | map('WOL:true, .*:false')">
<ftui-icon
[hidden]="local:hide | map('yes:true, .*:false')"
[color]="{{IT-Geraet}} | map('{{ON}}:green, {{MAYBE}}:yellow, {{OFF}}:{{OFF-CL}}')" size="4"
path="../images/openautomation" [name]="{{IT-Geraet}} | map('.*:{{Icon}}')">
</ftui-icon>
Edit: sorry.. habe mich nicht gut ausgedrückt
ftui-local ist nur für einen initialen wert beim start. Danach hat es keine Bedeutung mehr und ist inaktiv.
Wenn du es irgendwo einmalig setzt, dann kannst du es mit local:XXX in einem binding aufrufen. Dachte die examples sind einleuchtend...
LG
Sorry, war nur ein Kopier-Fehler.
Trotzdem funktioniert es nicht. Es zieht nur der Wert aus dem zweiten Aufruf. Setze ich hier "yes" sind beide Icons weg. Setze ich hier no, sind beide Icons da. Dies ist unabhängig vom Wert vor dem ersten Aufruf.
Viele Grüße
Jürgen
jetzt habe ich es erst gesehen...
Zitat von: mr_petz am 01 Februar 2023, 18:40:29
...
Wenn du es irgendwo einmalig setzt, dann kannst du es mit local:XXX in einem binding aufrufen. ...
Betonung ist auf
einmalig! ;)
Du gibst 2x ftui-local an. Das geht nicht. da musst du im ftui-local mehrere xxx:Werte zuweisen:
Bsp.:
<ftui-local value="hide1:yes,hide2:no"></ftui-local>
und dann auf local:hide1 und local:hide2
Wenn du aber beide ins hidden schreibst geht es auch nicht, weil entweder yes or no
LG
Ein herzerfrischendes Moin vom achtern Diek vorweg!
Ich habe mal eine Frage an denjenigen, der Ahnung von <ftui-image ... hat.
Ich habe meinen Videostream wie folgt eingebunden:
<ftui-image [src]="UI_URL_DoorBird:url" width="200px" height="150px" shape="round" interval="10" nocache @click="frontdoorcam.open()"></ftui-image>
Hinter UI_URL_Doorbird:url befindet sich nur der Link zur Kamera: http://192.168.xxx.yy/bha-api/video.cgi
Das funktioniert auch so weit, allerdings immer mit Stocken. Sobald die diversen Charts, Buttons etc. im Hintergrund mit neuen Daten versorgt werden, stockt der Stream.
Auf der fhem Seite mit weblink funktioniert es immer flüssig.
Meine Frage ist die, ob das <ftui-image auch irgendwie die Priority Hints unterstützt:
https://www.debugbear.com/blog/priority-hints (https://www.debugbear.com/blog/priority-hints)
Meine Idee wäre, ob damit der VideoStream damit irgendwie eine höhere Prio eingeräumt werden könnte.
Gruß
Sailor
Zitat von: juemuc am 30 Januar 2023, 15:18:05
Hallo zusammen,
nachdem ich hier sehr viel Hilfe erhalten habe, möchte ich mich revanchieren und meine Definitionen für meine Wetterseite hier kommunizieren. Ihr könnt die Info auch gerne ins Wiki übernehmen oder eine Beispielseite daraus bauen.
Viele Grüße
Jürgen
Danke Jürgen, ich habe das so ins Wiki https://wiki.fhem.de/wiki/FTUI3_Proplanta_Wetter (https://wiki.fhem.de/wiki/FTUI3_Proplanta_Wetter) übernommen.
VG, Andreas
Zitat von: mr_petz am 01 Februar 2023, 20:21:04
jetzt habe ich es erst gesehen...Betonung ist auf einmalig! ;)
Du gibst 2x ftui-local an. Das geht nicht. da musst du im ftui-local mehrere xxx:Werte zuweisen:
Bsp.:
<ftui-local value="hide1:yes,hide2:no"></ftui-local>
und dann auf local:hide1 und local:hide2
Wenn du aber beide ins hidden schreibst geht es auch nicht, weil entweder yes or no
LG
ok. Dann ist das leider kein Möglicher Lösungsweg um variable Werte, die nicht von einem Device kommen, an eine Content-Datei für "hidden" zu übergeben.
Viele Grüße
Jürgen
Du kannst doch nicht yes und no einem binding zuweisen! Wie soll das gehen?
LG
Es war doch nur ein Test auf Euren Vorschlag zu Prüfen, ob es für mein Anliegen passt. Jetzt können wir sagen: Es passt nicht. Alles gut ;D
Viele Grüße
Jürgen
Zitat von: mr_petz am 31 Januar 2023, 11:55:26
Bei beinen normalen readingsGroup wird bei mir alles korrekt aktualisiert wenn sich Werte des Device ändern.
Hier sollte man aber alle Devices die in der readingsGroup sind durch ; getrennt auch ins [content] eintragen. Wenn man die readingsGroup einträgt funzt es nicht. Gibt kein Event.
"normal" wäre eher, wenn sich die readingsGroup selbst bemerkbar machen würde.
... die in der readingsGroup betroffenen Geräte allesamt zu abonnieren erscheint "merkwürdig"
... und erfordert ständige "Nachpflege" bei z.B. neuen Geräten
Die in der readingsGroup festgelegte devspec
.*:[Bb]attery
würde ich nicht wirklich in FTUI3 nachbilden wollen ...
Problem ist, dass bei Aktualisierung der readingsGroup keine echten Events veröffentlich werden ... allerdings zumindest "Infos" wie z.B.:
-
rgTest-ftuitest.Battery beim "Ändern" vom Reading "Battery" im Device "ftuitest"
-
rgTest-ftuitest.battery beim "Ändern" vom Reading "battery" im Device "ftuitest"
Hilft dummerweise aber auch nicht wirklich, da der "Verursacher" zu speziell ist.
Wenn man neben der speziellen Info noch eine allgemeinere veröffentlicht, spricht FTUI3 wie gewünscht darauf an:
-
rgTest würde veröffentlicht beim Ändern von Reading "Battery" oder "battery" in irgendeinem für die readingsGroup relevanten Device
Dann führt z.B. folgende (einfache) Definition immer direkt zur Aktualisierung der Darstellung:
<ftui-content [content]="rgTest | getHTML('rgTest')"></ftui-content>
Zitat von: juemuc am 01 Februar 2023, 21:18:19
Jetzt können wir sagen: Es passt nicht.
Ob das Ergebnis stimmt .?. ;D
Zitat von: juemuc am 20 Januar 2023, 16:28:10
<ftui-column>
<ftui-icon size="4" [color]="{{Geraet}} | map('{{ON}}:red, {{MAYBE}}:yellow, {{OFF}}:green, .*:red')"
path="{{Path}}" name="{{Icon}}" [hidden]="{{Direkt-Wert}} | map('hide:true, .*:false')">
</ftui-icon>
<ftui-label size="3 padding="1" scroll text-align="center"" color="white" scroll text-align="center"
[text]="{{Geraet}}" [hidden]="{{Direkt-Wert}} | map('hide:false, .*:true')">
</ftui-label>
</ftui-column>
Aufruf über
<header>Drucker</header>
<ftui-content
file="./content/IT-Geraete.html" Geraet="ML2571N_check" Path="../images/fhemSVG" Icon="it_printer" ON="present" MAYBE="" OFF="absent" Direkt-Wert="hide">
</ftui-content>
</ftui-grid-tile>
Dies scheint ja das ursprüngliche (besser nachvollziehbare) Anliegen zu sein ...
Eine mögliche Lösung könnte so aussehen:
<ftui-column>
<ftui-icon size="4" [color]="{{Geraet}} | map('{{ON}}:red, {{MAYBE}}:yellow, {{OFF}}:green, .*:blue')"
path="{{Path}}" name="{{Icon}}" [hidden]="{{Direkt-Wert}} | map('.*icon.*:false, .*:true')">
</ftui-icon>
<ftui-label size="3 padding="1" scroll text-align="center"" color="white" scroll text-align="center"
[text]="{{Geraet}}" [hidden]="{{Direkt-Wert}} | map('.*label.*:false, .*:true')">
</ftui-label>
</ftui-column>
".*" bei ".*label.*" bzw. ".*icon.*" sind nur dazugekommen, um
Both abzubilden ... wenn
Both uninteressant, dann kann man die ".*" entsprechend weglassen ...
<ftui-local value="showIcon:icon, showLabel:label, showBoth:icon label"></ftui-local>
<header>Drucker</header>
<hr width="40%">
<ftui-content file="./content_juemuc.html" Geraet="ftuitest:juemuc" Path="icons" Icon="print" ON="present" MAYBE="maybe" OFF="absent" Direkt-Wert="local:showIcon"></ftui-content>
<hr width="40%">
<ftui-content file="./content_juemuc.html" Geraet="ftuitest:juemuc" Path="icons" Icon="print" ON="present" MAYBE="maybe" OFF="absent" Direkt-Wert="local:showLabel"></ftui-content>
<hr width="40%">
<ftui-content file="./content_juemuc.html" Geraet="ftuitest:juemuc" Path="icons" Icon="print" ON="present" MAYBE="maybe" OFF="absent" Direkt-Wert="local:showBoth"></ftui-content>
<hr width="40%">
Ergebnis ... s. Screenshot
Hi oldfhem,
theortisch gebe ich Dir recht ;D. Da ich aber damit aktuell 7 Geräte abbilde, müsste ich 7 "Variablen" definieren, also pro Aufruf eine "Variable". Das ist aus meiner Sicht aber nicht sinnvoll. 8)
Dann wäre es einfacher ein "userreading" zu definieren, welches ich dann auswerte.
Viele Grüße
Jürgen
Zitat von: juemuc am 02 Februar 2023, 15:08:00
Da ich aber damit aktuell 7 Geräte abbilde, müsste ich 7 "Variablen" definieren
Die 3 Variablen stellen 3 "Entscheidungen" dar ... mit den 3 Variablen kann man
beliebig viele Geräte abbilden..
Pro Gerät entscheidet man, ob man ein "Icon", ein "Label" oder "Beides" sehen möchte und verwendet dazu passend eine der 3 Variablen.
Wer "Beides" nicht braucht, kommt logischerweise mit 2 Variablen zurecht.
Was unterscheidet denn bei Dir die 7 Geräte, die auf den einen content-File zurückgreifen und nicht mit den 3 bzw. 2 Variablen zurechtkommen ?
ok, Du hast gewonnen ;D
Die Geräte unterscheiden sich dadurch, dass bei 3 Geräten über ein "Button" ein refresh ausgelöst werden kann. Bei den anderen 4 Geräten wird nur der Status angezeigt.
Viele Grüße
Jürgen
Zitat von: juemuc am 02 Februar 2023, 15:08:00
Hi oldfhem,
...
Vielleicht ist er ja garnicht old....
sondern OdfFhem.... ;)
LG
:o
Wer lesen kann ist klar im Vorteil ::)
Ich gelobe Besserung ;)
Viele Grüße
Jürgen
@mr_petz,
beim update erhalte ich diese Meldung:
Downloading https://raw.githubusercontent.com/mr-petz/ftui/addons/controls_ftui_addons.txt
ftui_addons
List of new / modified files since last update:
UPD www/ftui/components/weekdaytimer/weekdaytimer.component.js
New entries in the CHANGED file:
404: Not Found
Was fehlt?
Viele Grüße
Jürgen
Zitat von: juemuc am 02 Februar 2023, 23:08:19
New entries in the CHANGED file:
404: Not Found
Im neuesten Branch-Stand fehlt noch eine Datei namens "CHANGED" ...
Hallo zusammen,
im Moment bin ich zu dämlich die eigenen Farben in der user.css anzuwenden. GGF kann es auch sein, das es sich um einen BUG handelt.
Die Farben sind wie folgt in der user.css definiert
:root {
--hellblau: #33CCFF;
--Lightblue: #33CCFF;
}
[color="Lightblue"] {
color: #33CCFF;
}
Beide Farben funktionieren sobald ich die auf Zahlen oder Texte innerhalb eines Labels anwende. Sobald ich diese aber in einer ROW/COLUMN (egal ob Lightblue oder himmelblau) anwende
<ftui-row [color]="Refrath_OpenWeather:temp_c | step('-99:red,2:Lightblue,4:grid,8:teal,20:green,25:yellow,30:orange,35:red')"></ftui-row>
werden mir nur die Farben angezeigt, welche auch in ftui-theme.css definiert sind. Eigene Namen werden für ROW und COLUMN leider nicht genommen.
Stehe ich irgendwie auf dem Schlauch?
Lieben Gruß
Ingo
Hi Ingo,
versuche mal so:
[color="Lightblue"] {
--color-base: #33CCFF;
}
LG mr_petz
Zitat von: mr_petz am 06 Februar 2023, 15:18:30
[color="Lightblue"] {
--color-base: #33CCFF;
}
Dankeschön für die schnelle Hilfe. Da wäre ich im Leben mit probieren und googeln nicht drauf gekommen.
LG
Ingo
Ich habe Probleme mit ftui-meter.
Ich bekomme gerade Dachfenster mit Rolläden. Also habe ich auf/zu sowie die Stellung des Rolladen. Und dachte mir, dass ich zwei Icons übereinander lege: Unten ftui-meter zur Anzeige der Stellung des Rolladen mit width/hight jeweils 50px, das funktioniert schon mal schön.
Aber ich bekomme ftui-meter nicht positioniert. Geht da margin nicht?
Und die Anzeige bei ftui-meter müsste umgekehrt sein, also von oben nach unten (wie halt ein Rolladen so funktioniert) - geht das? Wie geht das?
Ich brauche Eure Hilfe, ich habe ein Problem die Definition der Schalter zu verstehen, dass diese das richtige auslösen, je nach Zustand:
Beispiel 1: Ich würde gerne bei meinem Sonos im Wohnzimmer das Sonos in der Küche hinzufügen.
<ftui-button [value]="Sonos_Wohnzimmer:ZoneGroupNameDetails | map('.*che: on, ``: off')"
(value)="Sonos_Wohnzimmer" states="AddMember Sonos_Kueche, RemoveMember Sonos_Kueche" [color]="Sonos_Wohnzimmer:ZoneGroupNameDetails | map('.*che:success, ``:primary')" fill="" size="small">
<ftui-icon name="bath"></ftui-icon>
</ftui-button>
Was passiert ist, das er immer zu Begin Add Member auslöst und dann bei direkt zweitem Klich Remove, das mapping also nicht passt, was muss ich den anstatt :on / :off korrekt schreiben?
Beispiel 2: Ich würde gerne an meinem Fahrzeug das Laden starten / stoppen abhängig vom Zustand:
<ftui-button
[value]="5YJSA7E:charging_state | map('Charging|Complete:stopCharging,NoPower|Starting|Disconnected|Stopped:startCharging')"
(value)="5YJSA7E" states="stopCharging,startCharging" fill="">
<ftui-icon name="battery" size="2"
[color]="5YJSA7E:charging_state | map('Disconnected|Complete|NoPower|Starting|Stopped:dark,Charging:success')"
[class-name]="5YJSA7E:charging_state | map('Disconnected|Complete|NoPower|Starting|Stopped: ``, Charging: spin')" >
</ftui-icon>
</ftui-button>
Hier ist das Verhalten das Selbe, er löst immer erstmal startCharging aus und bei direktem erneuten Klick Stopp. Bei NoPower|Starting|Disconnected|Stopped soll Start Charging und bei Charging|Complete StopCharging ausgelöst werden.
Ich verzweifle hier, verstehe nicht, was ich am MAP in [value] falsch mache :-[ freue mich auf Eure kompetente Antwort.
Zitat von: mr_petz am 13 Januar 2023, 14:14:03
Wenn dann hat hier @setstate eine Spende verdient!:
http://paypal.me/setstate
Er hat hier die meiste Arbeit gemacht!
LG
Danke :-) DONE
Ich brauche mal etwas Hilfe... :(
Es geht um einen automatischen Reload von iFrame-Objekten.
Ich habe dieses Script hier im Thread gefunden:
<script>
window.setInterval(function() {
reloadIFrame()
}, 3000);
function reloadIFrame() {
console.log('reloading..');
document.getElementById('reloadiFrame').contentWindow.location.reload();
}
</script>
Leider bekomme ich folgende Fehlermeldung:
SecurityError: Permission denied to access
property "reload" on cross-origin object
Abgesehen davon dass ich überhaupt keine Ahnung habe was das bedeutet, wie bekomme den Fehler gelöst?
Vielen Dank!
Zitat von: TimoD am 09 Februar 2023, 15:11:37
Ich brauche Eure Hilfe, ich habe ein Problem die Definition der Schalter zu verstehen, dass diese das richtige auslösen, je nach Zustand:
Beispiel 1: Ich würde gerne bei meinem Sonos im Wohnzimmer das Sonos in der Küche hinzufügen.
<ftui-button [value]="Sonos_Wohnzimmer:ZoneGroupNameDetails | map('.*che: on, ``: off')"
(value)="Sonos_Wohnzimmer" states="AddMember Sonos_Kueche, RemoveMember Sonos_Kueche" [color]="Sonos_Wohnzimmer:ZoneGroupNameDetails | map('.*che:success, ``:primary')" fill="" size="small">
<ftui-icon name="bath"></ftui-icon>
</ftui-button>
Was passiert ist, das er immer zu Begin Add Member auslöst und dann bei direkt zweitem Klich Remove, das mapping also nicht passt, was muss ich den anstatt :on / :off korrekt schreiben?
Dein [value] muss zu den states passen und/oder gemappt werden...
Also muss bei [value] -> AddMember Sonos_Kueche oder RemoveMember Sonos_Kueche ankommen...
Das beschreibt ja den Zustand des button und die states...
on und off sind nur Vorbelegt wenn keine states angegeben sind.
LG
@C0mmanda
Das script angepasst funzt nicht bei dir?:
https://forum.fhem.de/index.php/topic,115259.msg1244252/topicseen.html#msg1244252
ps: Der origin Fehler gehört zur Origin Policy des Browsers.
LG mr_petz
Zitat von: mr_petz am 09 Februar 2023, 19:06:30
@C0mmanda
Das script angepasst funzt nicht bei dir?:
https://forum.fhem.de/index.php/topic,115259.msg1244252/topicseen.html#msg1244252
ps: Der origin Fehler gehört zur Origin Policy des Browsers.
LG mr_petz
Beim ersten Versuch hatte ich den Eindruck das nicht, lag aber wohl an mir, wie es aussieht funktioniert es. Danke für den Hinweis darauf..
Allerdings wird immer nur ein iFrame-Objekt aktualisiert obwohl mehrere dieselbe id haben... kann es sein dass ich das Script für jedes iFrame-Objekt
separat erstellen muss (mit unterschiedlichen id's + function Kennungen)?
Danke!
Gruß
Entweder für jedes iframe oder eine for schleife erstellen.
LG
@curt
<ftui-meter [value]="ftuitest"
min="-1"
max="100"
height="6em"
color="gray"
is-vertical
margin="1em"
id="vertical-top-to-bottom">
</ftui-meter>
<script>
this.flexDirection = document.querySelector('#vertical-top-to-bottom');
if (!this.flexDirection.progress) {
this.refreshInterval = setInterval(()=>{
if (flexDirection.progress) {
changeDirection();
}
},100);
}
function changeDirection() {
clearInterval(this.refreshInterval);
this.flexDirection.progress.style.flexDirection = 'column';
}
</script>
mehr kann ich dir da nicht helfen.
LG
@mr_petz:
Danke, habe jetzt für jedes einzelne iframe ein Script erstellt, das lüppt.
(auch mangels Kenntnis wie ich eine for-Schleife für Javascript erstelle :) )
Habe noch eine andere Frage:
Ich versuche aufgrund einer immer größer werdenen index.html den Inhalt auf mehrere html-Seiten zu verteilen (Struktur).
Für den Inhalt einzelner Grid-Tiles stellt das auch kein Problem dar, wenn ich das aber mit dem Inhalt
einer ganzen <ftui-tab-view> probiere wird das Layout komplett zerschossen.
Geht das überhaupt, wenn ja, wo kann ich das nachlesen?
Diesen Thread hier habe ich mehrmals durchsucht, falls es irgendwo steht muss ich es übersehen haben... :(
Danke.
@C0mmanda
Schau dir dazu das content example an um in der index die ftui-tab-views auszulagern:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/content.html
Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/content.html
darin verweisen die contents auf die entsprechenden Files:
https://github.com/knowthelist/ftui/tree/master/www/ftui/examples/contents
LG mr_petz
Zitat von: mr_petz am 11 Februar 2023, 13:08:44
mehr kann ich dir da nicht helfen.
Du hast mir -nicht zum ersten Mal- sehr geholfen. Hier mit einem Denkanstroß: Das wird besser mit userreadings (100 - x) gelöst.
Zur Allzweckwaffe
ftui-meter habe ich noch zwei Fragen:
* Die Ecken sind da ja abgerundet. Kann ich die Stärke der Rundung irgendwie beeinflussen? Hintergrund: In einem Fall möchte ich gar keine Rundung, da wäre eckig sehr schön.
* Die Hintergrundfarbe des ftui-meter ist ja so ein mittleres grau. Kann ich diese Hintergrundfarbe ändern?
@curt
Es gibt u.a. folgende css-Variablen, die z.B. über das style-Attribut gesetzt werden können (ungetestet):
style="--meter-border-radius: 0; --meter-background-color: red;"
Zitat von: mr_petz am 12 Februar 2023, 18:32:23
@C0mmanda
Schau dir dazu das content example an um in der index die ftui-tab-views auszulagern:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/content.html
Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/content.html
darin verweisen die contents auf die entsprechenden Files:
https://github.com/knowthelist/ftui/tree/master/www/ftui/examples/contents
LG mr_petz
Danke für den Hinweis.
Ganz zum Ziel bringen mich die Beispiele aber leider noch nicht...
Der Verweis auf die (ausgelagerte) Datei ist ja kein Problem...
<ftui-tab-view id="View1">
<ftui-content file="examples/contents/content-view1.html" room="Room1"></ftui-content>
</ftui-tab-view>(Wobei ich nicht weiß wofür "room="Room1" steht oder was es bewirkt..)
Die Datei selbst ist das Problem ;)
Ich denke "content-grid.html" soll das machen was ich suche...
<ftui-grid base-width="80" base-height="80" color="green">
<ftui-grid-tile row="1" col="1" height="2" width="2" color="danger">
GRID-IN-GRID 1
</ftui-grid-tile>
<ftui-grid-tile row="1" col="3" height="2" width="2" color="warning">
GRID-IN-GRID 2
</ftui-grid-tile>
<ftui-grid-tile row="1" col="5" height="2" width="2" color="ok">
GRID-IN-GRID 1
</ftui-grid-tile>
<ftui-grid-tile row="1" col="7" height="2" width="2" color="light">
GRID-IN-GRID 2
</ftui-grid-tile>
</ftui-grid>Es wird mir auch schön das Grid angezeigt und mein Menu bleibt erhalten, das Layout wird nicht zerschossen! Soweit so gut :).
Das Problem ist dabei aber dass mein Menu nicht mehr "nutzbar" ist, d.h. die verschiedenen Menupunkte können nicht geklickt werden.
Mit den anderen Beispieldateien (content-view1, 2 und 3) kann ich leider kaum etwas anfangen...
Wo finde ich Informationen dazu was u.a. <ftui-view-section> macht, oder <ftui-view-toolbar> oder <ftui-menu-button> ?
Das wird nirgendwo erklärt, oder ich suche nicht gescheit, das will ich nicht abstreiten :).
Und brauche ich das überhaupt für das was ich versuche zu erreichen?
gruß
Hi,
im Aufruf ist das Anführungszeichen nach ".html" falsch.
<ftui-tab-view id="View1">
<ftui-content file="examples/contents/content-view1.html room="Room1"></ftui-content>
</ftui-tab-view>
Mit room="Room" übergibst du im Parameter "room" den Wert "Room" an die Datei. Außerdem wird die Datei content-view1.html aufgerufen.
Viele Grüße
Jürgen
DesWeiteren musst du die grid-größe mit angeben im tab-view Bsp:
<ftui-tab-view id="View1">
<ftui-grid-tile row="1" col="2" height="15" width="15" shape="round" color="primary">
<ftui-content file="examples/contents/content-grid.html" room="Room1"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
Wenn dein Menü links 1 Breit (col=1 width=1) ist.
room ist eine variable und kann im contentfile mit {{room}} wieder aufgerufen werden...
LG
@juemuc & @mr_petz
VIELEN Dank.
Das grid funktioniert jetzt mit der Größenangabe, das war der richtige Hinweis!
Wie ich das mit der Parameter-Übergabe für mich nutzen kann muss ich
dann an späterer Stelle nochmal herausfinden!
Danke euch!
Sehr gut.
room ist hier nur ein Beispiel. Du kannst auch mehrere übergeben mit deinen Namenswunsch... ;)
Bsp.: device="1" seite="2" usw....
LG
Zitat von: juemuc am 13 Februar 2023, 19:11:18
im Aufruf ist das Anführungszeichen nach ".html" falsch.
Ich würde jetzt mal behaupten, dass es da richtig ist. Und Dein Codebeispiel falsch ist. Oder war Dein Codebeispiel zur Illustration eines Fehlers?
@OdfFhem
Und nun sind Deine Vorschläge getestet. Sie funktionieren wunderschön, ich danke Dir sehr.
(Was machte ich? Dachkippfenster mit Rollladen: Hintergrund breites ftui-meter, welches Rollladenstellung anzeigt. Darüber positioniert ftui-image mit wechselndem Fenstersymbol offen/geschlossen.)
Zitat von: curt am 13 Februar 2023, 20:58:08
Ich würde jetzt mal behaupten, dass es da richtig ist. Und Dein Codebeispiel falsch ist. Oder war Dein Codebeispiel zur Illustration eines Fehlers?
Du hast natürlich recht. Meine Beispiel war falsch :( Danke für den Hinweis.
Viele Grüße
Jürgen
Aber da hier grad die Profis sind - ich habe im Moment ein gedankliches Problem - ich weiß nicht, wie bei Folgendem der beste Weg ist:
Beispiel:
Ich habe acht Thermostate, alle sind in verschiedenen Kacheln auf einer FTUI-3-Seite dargestellt. Nun soll jede Kachel klickbar sein (ich weiß: onclick zum Beispiel) und zu einem iframe (oder bei anderen zu einer neuen Seite) führen. Also acht verschiedene iframes, für jeden Thermostat eins. Bzw. acht verschiedene Seiten, für jedes Fenster eine.
Da werden dann Werte angezeigt und man kann zum Beispiel die Soll-Temperatur ändern. Jetzt kommt der Punkt: Die iframes bzw. Seiten sind dabei ja völlig identisch, lediglich das Device hat immer einen anderen Namen. (Von {{room}} als denkbarem Weg las ich vorhin erstmals. Vielleicht gibt es noch andere, bessere Wege.
Ich nehme an, dass ihr alle das Problem schon gelöst habt. Was würdet ihr denn konkret empfehlen? Wie macht man das am Geschicktestem?
(Ich btte um Verzeihung, möglicherweise stimmen nicht alle Vokabeln, ich übe fleißig.)
Hi Curt,
ich nutze dies mit einem Popup. (Bild 1 und Bild 2) Jeder Heizkörper wird als Parameter in eine Content-Datei übergeben.
<ftui-thermostat unit=" °C" size="90" min="7.5" max="28.0" class="size-2"
has-old-style has-arc-tick movegradient="3.5"
lowcolor="0,0,255" mediumcolor="170,0,170" hightcolor="170,0,0"
style="--thermostat-value-size:25px; --thermostat-value-color:white; --thermostat-temp-size:20px; --thermostat-arc-fill:15;"
[value]="{{Heizung}}:desired-temp | part(1)"
(value)="{{Heizung}}:desired-temp"
[temp]="{{Heizung}}:temperature | part(1)"
[battery]="{{Heizung}}:battery" >
</ftui-thermostat>
Viele Grüße
Jürgen
Zitat von: juemuc am 13 Februar 2023, 21:50:12
ich nutze dies mit einem Popup. (Bild 1 und Bild 2) Jeder Heizkörper wird als Parameter in eine Content-Datei übergeben.
Ahhh, verstehe. Herzlichen Dank nicht nur für die schnelle Antwort, sondern auch für das Beispiel (ich bin nicht ganz taufrisch, mir helfen Beispiele immer am ehesten.)
Bitte nicht falsch verstehen, ich frage trotzdem nochmal in die Runde:
Gibt es noch andere Wege, andere Wege die ihr nutzt? Und - welche Vorteile haben die?
Hi Curt,
was verstehst Du unter "taufrisch" ;D ;D ;D ;D
Es kommt halt darauf an, was Dein Ziel ist.
Viele Grüße
Jürgen
Hallo Jürgen @juemuc
Zitat von: juemuc am 13 Februar 2023, 22:01:49
was verstehst Du unter "taufrisch" ;D ;D ;D ;D
Es gibt Fragen, da kann man nur verlieren wenn man antwortet...
Zitat von: juemuc am 13 Februar 2023, 22:01:49
Es kommt halt darauf an, was Dein Ziel ist.
Im grundsätzlichen Fahrplan die Umsetzung von FTUI2 auf FTUI3 - unter Berücksichtigung solcher Vereinfachungen wie Variablen bei mehreren gleichartigen Darstellungen. Am besten zeige ich mal, wie das bei mir unter FTUI2 aussieht:
Von der Hauptseite (nicht dargestellt) führt der Klick auf die Kachel "Fenster/Heizung" auf eine Übersichtsseite, hier im ersten Bild dargestellt: Da sehe ich welche Fenster/Türen geschlossen bzw offen sind. Und ich sehe zugleich die IST-Raumtemperaturen. Ich klicke auf die Kachel "Bad oben".
Es erscheint eine neue Seite, zweites Bild: Ich sehe eine Grafik mit verschiedenen Graphen: SOLL, zwei verschiedene IST, wann da ein Fenster offen war. Links oben die aktuelle Raumtemperatur in einem nur scheinbaren Regler. Da kann ich draufklicken.
Es öffnet sich ein iframe (drittes Bild). Ich habe ZWave-Thermostate, daher kann ich dort nicht nur eine andere SOLL-Temperatur einstellen sondern habe auch weitere Schaltoptionen.
So ähnlich soll das auch in FTUI3 dargestellt werden, aber eben unter Zusammenfassung gleichartiger Code-Teile. Und das betrifft nicht nur beispielsweise die gleichartigen iframes. Das betrifft auch die ansich gleichartigen Elemente des ersten Bilds, der Übersicht: Da sind ja zwei Gruppen von jeweils gleichartigen Kacheln zu sehen, unterschiedlich ist immer nur das Device.
Kurze Frage zum Procedere: Sollte ich lieber einen neuen Thread beginnen? Weil: Diese ZWave-Dinger haben so einige, die sind etwas hakelig. Zudem ist das im Gesamtzusammenhang komplex und es fallen im idealfall Beispiele für andere ab.
Zitat von: curt am 13 Februar 2023, 23:28:29
...
Es öffnet sich ein iframe (drittes Bild)...
...
Hi curt,
Das kann zu Verwirrungen kommen. Es scheint es wäre ein popup.
Das sollte aber mit FTUI3 umzusetzen sein!
Paar grids und das popup.
LG mr_petz
Hi Curt,
ich finde das alles etwas durcheinander 8) Mag aber auch an meinem Alter (nicht mehr ganz taufrisch) liegen ;D
Ich würde mir erst einmal darüber Gedanken machen, was auf welcher Seite gezeigt werden soll. Ich habe z.B. alles nach Räumen gegliedert und diese kann ich über das Menü auswählen. Dann habe ich noch drei zusätzliche Seiten (Home - als Zusammenfassung, System - für Systemdaten und sonstiges.) Wenn ich dann etwas nicht unterbekomme (z.B. zu viele Heizkörper), arbeite ich mit Popups (siehe oben).
Alternativ kannst Du Dir aber auch mal dieses Beispiel ansehen https://knowthelist.github.io/ftui/www/ftui/examples/mobile_plain.html (https://knowthelist.github.io/ftui/www/ftui/examples/mobile_plain.html)
Viele Grüße
Jürgen
Zitat von: mr_petz am 14 Februar 2023, 10:53:03
Das kann zu Verwirrungen kommen. Es scheint es wäre ein popup.
Das sollte aber mit FTUI3 umzusetzen sein!
Paar grids und das popup.
Schon habe ich es mit den Verwirrungen "geschafft", gna. Natürlich ist das ein Popup.
Einiges ist schon (manches übrigens mit Deiner freundlichen Hilfe) umgesetzt. Jetzt ist der Punkt durchzuatmen und nochmal nachzudenken - siehe unten.
Zitat von: juemuc am 14 Februar 2023, 16:49:02
ich finde das alles etwas durcheinander 8)
Ich würde mir erst einmal darüber Gedanken machen, was auf welcher Seite gezeigt werden soll.
Das ist (für mich) gar nicht durcheinander. Das folgt der usablity (schickes Wort), welches in Cockpits von Kampfjets Anwendung findet. Und ich habe das alles ja schon, in FTUI2. Nun wird es langsam umziehen.
Mein erstes Problem ist auf dem ersten Bild meines letzten Beitrags: Da gibt es viele Kacheln, die Fensterzustände zeigen. Der Code ist eigentlich immer identisch, ich zeige das unten. Was sich da jeweils ändert ist label, view und Devicename.
Weil der Code ansich immer identisch ist, schreit das nach einem template. Suche im Forum (Sucheingrenzung auf FTUI3 ist schwierig) findet: "Ja, du kannst dafür ftui-content nutzen.".
Ja gut, aber wie?
<ftui-grid-tile row="2" col="2" height="1" width="1" color="my_grey3">
<ftui-row>
<ftui-label margin="-18px 0 0 0" class="size-0">Arbeitszimmer</ftui-label>
</ftui-row>
<ftui-row>
<ftui-tab view="Raum_Arbeitszimmer" direction="vertical">
<ftui-icon margin="-18px 0 0 0" size="3" [name]="Arbeits_rechts | map('open: `icons-eigene/window-open`, closed: `icons-eigene/window-closed`')"
[color]="Arbeits_rechts | map('open:my_signalred, closed:my_signalgreen')">
</ftui-icon>
</ftui-tab>
</ftui-row>
</ftui-grid-tile>
Hi Curt,
ich bin wie folgt vorgegangen:
- Für den Code, der immer redundant ist, eine "Content-html-Datei" definieren. Bei Dir z.B. "Fenster.html"
- Dann einmal den Code in diese Datei kopieren
- Die Werte, die sich immer ändern, durch Variablen ersetzen z.B:{{VAR1}} {{VAR2}}..
- Aufruf der Content-Datei mit den VAriablen.
Beispiel für Deine Fenster-Content-Datei:
<ftui-row>
<ftui-label margin="-18px 0 0 0" class="size-0">Arbeitszimmer</ftui-label>
</ftui-row>
<ftui-row>
<ftui-tab [view]="{{Raum}}" direction="vertical">
<ftui-icon margin="-18px 0 0 0" size="3" [name]="{{Fenster}} | map('open: `icons-eigene/window-open`, closed: `icons-eigene/window-closed`')"
[color]="{{Fenster}} | map('open:my_signalred, closed:my_signalgreen')">
</ftui-icon>
</ftui-tab>
</ftui-row>Aufruf mit
<ftui-grid-tile row="2" col="2" height="1" width="1" color="my_grey3">
<ftui-content
file="./content/Fenster.html" Raum="Arbeitszimmer" Fenster="Arbeits_rechts">
</ftui-content>
<ftui-content
file="./content/Fenster.html" Raum="Arbeitszimmer" Fenster="Arbeits_links">
</ftui-content>
</ftui-grid-tile>
Viele Grüße
Jürgen
Hallo Jürgen,
danke für die verständliche Erklärung. Ich werde in den nächsten Tagen alles anpassen und melde mich dann ggf. mit weiteren Fragen wieder.
Hallo allerseits,
ich bin bei popup angekommen. Leider finde ich da keine Seite mit allen möglichen Parametern. Was geht da alles?
Eine konkrete Frage habe ich auch schon:
Kann ich da auch Variable wie {{ein_Name}} nutzen? Und falls ja: Kann ich Variable über mehrere Ebenen durchreichen? Also von ftui-content die Variable nochmals übergeben an popup?
Und wo kommt das Konstrukt ftui-popup in der Datei eigentlich hin? Außerhalb von ftui-tab-view, ganz unten in die Datei?
Im Moment sieht mein erster Test so aus und funktioniert:
<ftui-grid-tile row="4" col="6" height="1" width="1" color="my_grey3">
<ftui-row>
<ftui-icon margin="-18px 0 0 0" name="icons-eigene/putzfrau" class="size-2"
[color]="Putzi_1:run_state | map('dock:my_grey2, standby:my_grey2, closed:my_grey2, self-test:my_green, `cleaning vacuum`:my_signalgreen, paused:my_signalorange, `return to dock`:my_darkblue')" @click="pop1.open()">
</ftui-icon>
</ftui-row>
</ftui-grid-tile>
[...]
<ftui-popup id="pop1" timeout="600" width="600px" height="350px">
<header>Popup 1</header>
<ftui-button popup-close>close</ftui-button>
<ftui-label @click="pop1.close()">Close Pop1</ftui-label>
</ftui-popup>
Hallo zusammen!
Ich möchte ein riesiges Log an den Entwicker von FTUI 3 aussprechen!!!
Ich beschäftige mich seit ein paar Tagen damit und ich finde es richtig, richtig gut.
Das einfache Binding, auch die Pipes und die daraus resultierende Dynamik! Mega!
Gibt es bereits eine Art Datepicker oder hat jemand sich schon daran versucht?
Ich hoffe, ich kann demnächst etwas beisteuern.
TopJob! Vielen Dank!
Hallo Zusammen.
Ich benutzte ftui-dropdown zur Steuerung einer LightScene
<ftui-dropdown
[value]="70_st_ls_EG:state"
(value)="set 70_st_ls_EG scene">
<option value="arbeit">Arbeit</option>
<option value="aus">Aus</option>
<option value="abendbeleuchtung">Abend</option>
</ftui-dropdown>
Änderungen werden aber nur übertragen, wenn eine andere Option ausgewählt wird. Gibt es eine Möglichkeit eine bereits ausgewählte Option nocheinmal auszuwählen.
Wenn ich zB die Option Aus gewählt habe muss ich erst eine andere Option auswählen um Aus erneut zu wählen.
Zitat von: twinFHEM am 24 Februar 2023, 10:17:34
...
Gibt es bereits eine Art Datepicker oder hat jemand sich schon daran versucht?
...
Hi.
Es gibt zur Zeit nur einen Timepicker.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/timeset.html
Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/timeset.html
LG mr_petz
Zitat von: darkness am 24 Februar 2023, 11:34:48
...
Änderungen werden aber nur übertragen, wenn eine andere Option ausgewählt wird. Gibt es eine Möglichkeit eine bereits ausgewählte Option nocheinmal auszuwählen.
Wenn ich zB die Option Aus gewählt habe muss ich erst eine andere Option auswählen um Aus erneut zu wählen.
Hi.
Leider nein. War hier schon Thema. Durch das event onchange wird dies verhindert.
Ab hier ist die Diskussion darüber ob es sinn macht das dropdown nocheinmal den selben Wert anzuwählen:
https://forum.fhem.de/index.php/topic,132022.msg1262157.html#msg1262157
Du könntest es nur über einen Leerraum lösen und dahin umswitchen und zurück. Bsp.:
<ftui-dropdown
[value]="70_st_ls_EG:state"
(value)="set 70_st_ls_EG scene">
<option value=""></option>
<option value="arbeit">Arbeit</option>
<option value="aus">Aus</option>
<option value="abendbeleuchtung">Abend</option>
</ftui-dropdown>Oder du bekommst den Dropdownzustand in Fhem zurückgesetzt.
LG mr_petz
@curt
Wenn das popup innerhalb des content liegt, dann kannst du auch Variablen zuweisen/mitgeben.
Das popup kann eigentlich überall im code gesetzt werden.
LG mr_petz
Danke, verstanden.
Bzgl. Übergabe von Variablen, Beispiel:
<ftui-row>
<ftui-label margin="-18px 0 0 0" class="size-0">{{Raum}}</ftui-label>
</ftui-row>
<ftui-row>
<ftui-tab view="{{Raum_Detail}}" direction="vertical">
<ftui-icon margin="-18px 0 0 0" size="3"
[name]="{{Geber1}} | map('open: `icons-eigene/window-open`, closed: `icons-eigene/window-closed`')"
[color]="{{Geber1}} | map('open:my_signalred, closed:my_signalgreen')">
</ftui-icon>
</ftui-tab>
</ftui-row>
Raum_Detail ist dabei der Name eines Content-Files. Es gibt eine weitere Variable {{Thermostat}}, gefüllt mit dem Namen des Thermostats. Diese möchte ich bei diesem Aufruf (ftui-tab) mit übergeben.
Geht das? Falls ja: Wie geht das?
Ich nutze hier das Reading "alias", welches ich dann übergebe.
Viele Grüße
Jürgen
Hmmm. Derzeit habe ich ein Anfängerproblem.
ftui-button.
Ich möchte die Breite fest einstellen. Aber das kriege ich leider nicht hin.
Ich möchte die Schriftart fett, eigentlich noch lieber fetter haben. (Fett kriege ich hin.)
Und wie stellt man die Schriftfarbe ein?
Also so geht es schon mal nicht:
<ftui-button class="size-1 bold" style="--button-width=800px" color="orange" fill="solid">11</ftui-button>
Hallo curt,
du könntest den Inhalt des Buttons als eigenes Element per Span oder Div definieren und dann unabhängig gestalten
<ftui-button width="9em" color="orange">
<span style="color:brown; font-weight: 900;">Huhu</span>
</ftui-button>
Hallo,
ich starte gerade mit FTUI3 und habe schon beim TabView und separaten Dateien Probleme.
Wenn alles in der Index.html ist funktionierts und die Uhrzeit wird in 2 separaten Blocks richtig angezeigt (siehe screenshot 2) :
<ftui-tab-view id="Weather">
<ftui-grid-tile row="1" col="3" height="2" width="2" shape="round" color="secondary">
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="7" height="2" width="2" shape="round" color="primary">
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
</ftui-tab-view>
Wenn ich aber den Code in eine separate Datei auslagere stimmt die Positionierung nicht mehr und die 2 Elemente erscheinen untereinander über den ganzen Screen:
(siehe Screenshot 1)
<ftui-tab-view id="Weather">
<ftui-content file="weather.html" room="weather"></ftui-content>
</ftui-tab-view>
Inhalt "weather.html" :
<ftui-tab-view id="Weather">
<ftui-grid-tile row="1" col="3" height="2" width="2" shape="round" color="secondary">
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="7" height="2" width="2" shape="round" color="primary">
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
</ftui-tab-view>
Was mache ich falsch ?
Gruss
Joe
Hi Joe
Du musst den ftui-grid-tile fürs content mit angeben.
Bsp:
https://github.com/knowthelist/ftui/blob/master/www/ftui/index.html#L192
LG
Das geht auch nicht (siehe screenshot)
Ich will ja keinen separaten Hintergrund und die Positionierung von mehreren Elementen geht so nicht.
Das geht nur für ein einzelnes Element aber das ist ja nicht Sinn der Sache
Man könnte noch "color" auf "transparent" setzen, aber die Positionierung im SubFile geht ja trotzdem nicht ...
<ftui-tab-view id="Weather">
<ftui-grid-tile row="1" col="2" height="7" width="7" shape="round" color="secondary">
<ftui-content file="weather.html" room="Weather"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
Gruss
Joe
Dann noch im content das ftui-grid mit integrieren.
Bsp.:
<ftui-grid-tile row="5" col="2" height="5" width="10" shape="round">
<ftui-content file="examples/contents/content-weather.html"></ftui-content>
</ftui-grid-tile>
<ftui-grid base-width="80" base-height="80" color="green">
<ftui-grid-tile row="1" col="3" height="2" width="2" shape="round" color="secondary">
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="7" height="2" width="2" shape="round" color="primary">
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
</ftui-grid>
LG
So gehts ...
Ist nur doof dass in jedem Content dann das Grid nochmals definiert werden muss.
Wenn ich das mal ändern will muss ich in jede Datei.
Warum kann das nicht vererbt werden wenn es nicht neu definiert wird.
Wenn alles in einer Datei ist reicht ja auch EINE Definition ....
Danke
Joe
Ist leider so bei grid in grid.
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/contents/content-grid.html
Muss ja so sein, damit ein neues grid berechnet wird.
LG
Edit:
Du könntest das auch für eine Copystrecke als variable mitgeben. Bsp.:
<ftui-grid-tile row="5" col="2" height="3" width="10" shape="round">
<ftui-content file="examples/contents/content-weather.html" gridstart='<ftui-grid base-width="80" base-height="80">' gridend='</ftui-grid>'></ftui-content>
</ftui-grid-tile>
Aufruf:
{{gridstart}}
<ftui-grid-tile row="1" col="3" height="2" width="2" shape="round" color="secondary">
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="7" height="2" width="2" shape="round" color="primary">
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
{{gridend}}
Zitat von: mr_petz am 24 Februar 2023, 12:21:00
Hi.
Leider nein. War hier schon Thema. Durch das event onchange wird dies verhindert.
...
LG mr_petz
Danke. Ich konnte es lösen. Da ich mit LightScene arbeite brauchte ich nur das Attribut "followDevices" nutzen.
@curt
Ich mache mal hier weiter, da es ja ums content geht.
Du hast da was noch nicht ganz verstanden. Du erstellst ein contentfile und rufst es mehrfach auf.
Bsp.:
thermostat.html contentfile:
<ftui-grid base-width="96" base-height="86" margin="4">
<!-- Arbeitszimmer -->
<!-- Zeile 2 -->
<ftui-grid-tile row="2" col="2" height="4" width="7" color="my_grey3">
{{Raum}}
<ftui-label @click="{{Raum}}.open()">popup</ftui-label>
<ftui-popup id="{{Raum}}" timeout="600" width="600px" height="350px">
<ftui-thermostat class="size-1"
[value]="{{Thermostat}}:desired-temp"
(value)="{{Thermostat}}:desired-temp"
tick="30"
min="0"
max="30"
movegradients="4"
fadegradient="20"
unit=" °C"
has-arc-tick
lowcolor="0,0,255">
</ftui-thermostat>
<ftui-button popup-close>close</ftui-button>
<ftui-label @click="{{Raum}}.close()">Close Pop2</ftui-label>
</ftui-popup>
</ftui-grid>
und Aufruf der thermostat.html:
<ftui-grid-tile row="5" col="2" height="15" width="15" shape="round">
<ftui-content file="examples/contents/thermostat.html" Raum="Arbeitszimmer1" Thermostat="Thermostat_Arbeitszimmer1"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="10" col="2" height="15" width="15" shape="round">
<ftui-content file="examples/contents/thermostat.html" Raum="Arbeitszimmer2" Thermostat="Thermostat_Arbeitszimmer2"></ftui-content>
</ftui-grid-tile>
und gibst im Aufruf immer den unterschiedlichen Variableninhalt an.
LG mr_petz
Guten Morgen,
ist es möglich ftui-segment-button auch auf zwei Werte "reagieren" zu lassen?
Beim Klick soll der Wert "gotosleep" gesetzt werden. Nach fünf Minuten wechselt mein Residents-Device auf "asleep"
Da ich dafür kein segment-Button angelegt habe, wird wieder der "home" Button aktiviert.
Mit map, dachte ich wäre das Möglich. Aber das wäre ja nur für den "get"-Wert. Der "set"-Wert müsste auf "gotosleep" stehen
<ftui-segment-button value="gotosleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
@darkness
Meinst du so in etwa?
Bsp.:
<ftui-segment (value)="map('.*:gotosleep') | ResidentsDevice" [value]="ResidentsDevice | map('asleep:on,gotosleep:on,.*:off')">
<ftui-segment-button value="on">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
Für eine bessere Hilfe wären die restlichen Segmente noch zuzeigen...
LG
Hallo,
wie kann ich den Radius der Ecken verkleinern ?
Gruss
Joe
Zitat von: mr_petz am 27 Februar 2023, 09:39:30
Ich mache mal hier weiter, da es ja ums content geht.
Du hast da was noch nicht ganz verstanden. Du erstellst ein contentfile und rufst es mehrfach auf.
Der Fehler lag an anderer Stelle. Da das (Aufruf Contentfile) kaskadiert passiert, müssen die Variablen auch bei Aufruf des zweiten Contentfiles angegeben werden. Das sah ich erst in der Diskussion - herzlichen Dank!
Zitat von: setstate am 26 Februar 2023, 11:06:59
du könntest den Inhalt des Buttons als eigenes Element per Span oder Div definieren und dann unabhängig gestalten
<ftui-button width="9em" color="orange">
<span style="color:brown; font-weight: 900;">Huhu</span>
</ftui-button>
@setstate
Ich dachte, ich hätte es verstanden. Aber warum geht das folgende nicht?
<ftui-button class="size-0" color="my_darkblue" fill="solid" popup-close>
<span style="color:white; width:70px; font-size: x-large; font-weight:700;">Close</span>
</ftui-button>
[code]
Zitat von: mr_petz am 27 Februar 2023, 11:51:09
@darkness
Für eine bessere Hilfe wären die restlichen Segmente noch zuzeigen...
LG
@mr_petz
<ftui-grid-tile row="9" col="6" height="2" width="4">
<header>ICH</header>
<ftui-segment [(value)]="rr_ICH" >
<ftui-segment-button value="home" size="large">
<ftui-icon name="home"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="gotosleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="automobile"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>Hier wäre der gesamte Code. Wo müsste ich da was mappen?
@darkness
Du brauchst ja nur asleep zu gotosleep mappen.
<ftui-segment (value)="rr_ICH" [value]="rr_ICH | map('asleep:gotosleep')" >
<ftui-segment-button value="home" size="large">
<ftui-icon name="home"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="gotosleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="automobile"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
LG mr_petz
ah, ok. Teste ich mal. Danke
Ich hatte das erfolglos beim segment-button versucht.
Verständnisfrage.
Wie wird denn beim Status von RR_ICH asleep der Button
<ftui-segment-button value="gotosleep">
ausgewählt, wenn ich im segment das map einbaue?
Edit:
also es wird gotosleep gesendet, egal ob asleep kommt...
Ja, weil das mapping nur fürs lesen ist.
()=set
[]=get
LG
Hallo,
- wie bzw. wo kann ich den Radius der Ecken der Kacheln anpassen
- gibt es für FTUI3 auch eine Versionsnummer die ich ausgeben kann ?
Gruss
Joe
Hi cotecmania,
Zitat von: cotecmania am 01 März 2023, 14:53:56
Hallo,
- wie bzw. wo kann ich den Radius der Ecken der Kacheln anpassen
- gibt es für FTUI3 auch eine Versionsnummer die ich ausgeben kann ?
Gruss
Joe
. SuFu ergibt zumindestens für Radius Popup: https://forum.fhem.de/index.php/topic,115259.msg1192538.html#msg1192538 (https://forum.fhem.de/index.php/topic,115259.msg1192538.html#msg1192538)
. für Versionsnummer dies: https://forum.fhem.de/index.php/topic,129881.msg1256717.html#msg1256717 (https://forum.fhem.de/index.php/topic,129881.msg1256717.html#msg1256717)
Grüße Gerald
Zitat von: BigGB am 01 März 2023, 19:01:43
....
. für Versionsnummer dies: https://forum.fhem.de/index.php/topic,129881.msg1256717.html#msg1256717 (https://forum.fhem.de/index.php/topic,129881.msg1256717.html#msg1256717)
....
Beser ist jetzt die local-componente die @OdfFhem und ich entwickelt haben:
<ftui-local key="version" value="FTUI3 v"></ftui-local>
<ftui-label [text]="local:version | t=>t+ftuiApp.version"></ftui-label>
https://github.com/mr-petz/ftui/tree/addons/www/ftui/components/local
https://github.com/mr-petz/ftui/blob/addons/www/ftui/examples/local.html
LG mr_petz
Zitat von: BigGB am 01 März 2023, 19:01:43
...
. SuFu ergibt zumindestens für Radius Popup: https://forum.fhem.de/index.php/topic,115259.msg1192538.html#msg1192538 (https://forum.fhem.de/index.php/topic,115259.msg1192538.html#msg1192538)
...
Hinweis.
Für einige Komponenten mit Radius steht dies zur Verfügung:
--xxx-border-radius
xxx=Komponente
Edit:
oder:
--border-radius
Bsp.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid-tile.component.css#L13
LG mr_petz
Zitat von: mr_petz am 02 März 2023, 08:26:46
Beser ist jetzt die local-componente die @OdfFhem und ich entwickelt haben:
<ftui-local key="version" value="FTUI3 v"></ftui-local>
<ftui-label [text]="local:version | t=>t+ftuiApp.version"></ftui-label>
https://github.com/mr-petz/ftui/tree/addons/www/ftui/components/local
https://github.com/mr-petz/ftui/blob/addons/www/ftui/examples/local.html
LG mr_petz
Hi,
Dein Beispiel funktioniert leider nicht bei mir, ebenso die Testdatei local.html ...
Gruss
Joe
Dann wirst du die local Komponente nicht richtig oder garnicht installiert haben...
LG
Zitat von: mr_petz am 02 März 2023, 09:55:54
Dann wirst du die local Komponente nicht richtig oder garnicht installiert haben...
LG
Hi mr_Petz,
nach Installation läufts, dachte das wird mit FTUI ausgeliefert.
Zum Radius :
Dank deinem Link https://github.com/mr-petz/ftui/tree/addons/www/ftui/components/local (https://github.com/mr-petz/ftui/tree/addons/www/ftui/components/local) habe ich nun die Stelle gefunden.
Zitat:host([shape="round"]) {
--grid-tile-border-radius: 1rem;
}
Wie kann ich das in einer user.css ueberschreiben oder direkt im Code verwenden ?
Danke und Gruss
Joe
Hi Joe,
entweder per style:
style="--grid-tile-border-radius: 1rem;"
oder global in einer user.css Bsp.:
ftui-grid-tile{
--grid-tile-border-radius: 1rem;
}
oder:
ftui-grid-tile[shape="round"]{
--grid-tile-border-radius: 5rem;
}
LG
Hallo zusammen,
irgendwie bekomme ich es nicht hin, die Symbole des
<ftui-weather size="6" [condition]="Proplanta:fc0_weatherDayIcon" icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"></ftui-weather>
angepasst zu bekommen (Ich finde die nativen Symbole nicht so passend). Ich bekomme immer kein Symbol bei Definition kleinklimaFHEM.
Zusätzlich habe ich es mit folgender Definition versucht:
<ftui-weather size="6" [condition]="Proplanta:fc0_weatherDay" icon-set="kleinklimaFHEM"
Was muss ich denn tun, um die Symbole von kleinklimaFHEM zu bekommen? Gibt es noch weitere Icon Sets im <ftui-weather>
Danke :-)
Grüße Timo
Hi Timo,
Punkt 1:
icons müssen hier liegen:
images/default/weather/
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js#L121
Punkt 2
ab hier siehst du auch die anderen iconsets:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js#L98
LG mr_petz
@mr_petz
Danke für deine Hilfe. Meine User.css wurde gar nicht angezogen. Jetzt habe ich die kleinere Radien.
Warum gibt es kein <ftui-header ...> analog zum Label ?
Aktuell muss man sich das mühsam durch label zusammenbauen und das vorhandene html-header funktioniert nicht sauber.
Gruss
Joe
Kannst du uns einen Anwendungsfall zeigen bzgl. header?
Es gibt auch noch unter:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/grid.html#L103
einen grid-header.
LG mr_petz
Hallo zusammen und erst einmal vielen Dank für die schnelle Beantwortung meiner letzten Frage, hatte ich vergessen zu schreiben. Nun versuche ich mich daran:
Das FHEM modul SolarForecast liefert ja über get SolarForecast html die Grafiken des Moduls per HTML aus.
Diese würde ich nun gerne in meiner Oberfläche darstellen. Ich stelle mich aber zu blöd an, die Infos aus der Methode in ein Tile einzubinden.
Hat jemand nen Ansatz, den ich verfolgen könnte?
Vielen Dank für die Unterstützung.
Hi, du könntest es so in der Art versuchen:
https://forum.fhem.de/index.php/topic,115259.msg1260606.html#msg1260606
LG
grandios, es wird auf jedem Fall was angezeigt. Muss noch ein bisschen dran arbeiten, dass es passend skaliert, aber die Animation ist schon mal da.
Vielen herzlichen Dank
Wäre super wenn du dann alle Notwendigkeiten zur Anzeige postest um das wiki zu füllen.
LG
Hallo,
versuche gerade einen farbigen Slider zu gestalten aber der ist immer grün ?
Auch in den Examples sollte hier doch ein Farbverlauf zu sehen sein (siehe Anhang 1)
<ftui-slider [(value)]="dummy3" max="80"
tick="10"
wide-tick="40"
color="cold-hot"
has-wide-ticks></ftui-slider>
Ist das aktuell die einzige Möglichkeit einen Füllstand anzuzeigen ? In FTUI2 hatte ich einen "Range" : siehe Anhang 2
Gruss
Joe
Zitat von: cotecmania am 03 März 2023, 13:49:55
Auch in den Examples sollte hier doch ein Farbverlauf zu sehen sein (siehe Anhang 1)
Mit irgend einem Update scheint das verloren gegangen zu sein. Ich glaube @mr_petz zeigte mir und uns ein Beispiel. Das funktionierte. Obwohl ich den Code nie änderte, funktionierte es eines Tages dann nicht mehr.
Zitat von: curt am 03 März 2023, 14:00:48
...@mr_petz zeigte mir und uns ein Beispiel....
Ich hatte wenn dann was zum ftui-meter geschrieben:
https://forum.fhem.de/index.php/topic,115259.msg1248030.html#msg1248030
und
https://forum.fhem.de/index.php/topic,115259.msg1263361.html#msg1263361
LG mr_petz
Der color="cold-hot" Gradient funktioniert (bei mir), wenn im HTML <link href="themes/ftui-theme.css" rel="stylesheet"> dabei ist, bzw. jedes andere Theme, was die "./color-attributes.css" anzieht.
@setstate
Seltsames Verhalten des slider bei Gradient. Im Firefox alles ok.
Im Chrome erst nach öffnen der Entwicklertools siehe animiertes gif. :o
Edit:
- Im Edge selbes verhalten wie im Chromebrowser. Schlecht zum Nachvollziehen...
- Unter Chrome, Fully und Wallpanel in Android auch nur grüner Balken.
- Im Samsungbrowser in Android alles ok...
LG mr_petz
@setstate
Ich habe versucht der Sache nachzugehen.
Folgendes Ergebnis:
in der js folgendes vor @import der anderen css einfügen:
<style>
.rangeable-progress {
-webkit-mask: linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0);
position: initial;
}
</style>
diesen obigen css Eintrag aus der slider css löschen.
Unter Chrome wird jetzt bei start/erstladen alles korrekt angezeigt...
Bei FF so auch alles ok.
Scheint mit der -webkit-mask zu tun zu haben...?
Edit:
Auch wenn ich nur den Eintrag
position: initial;
aus
.rangeable-progress
lösche, funktioniert es sofort unter Chrome...
LG mr_petz
Edit2:
mit:
-webkit-mask-image: linear-gradient(#fff 0 0);
mask-image: linear-gradient(#fff 0 0);
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
bleibt auch der Gradient auf der gesamten länge bestehen und verschiebt sich nicht bei betätigen des handle...
Zitat von: mr_petz am 03 März 2023, 18:40:37
Ich hatte wenn dann was zum ftui-meter geschrieben:
Ähmm, ja. Ich las leider zu schnell.
Dieses Konstrukt geht nicht mehr, jedenfalls bei mir:
<ftui-meter [value]="my_dummy:state" min="10" max="40" width="10px" height="70px"
color="low-medium-high-invert"
is-vertical has-scale has-color-scale>
</ftui-meter>
Hallo,
der Farbverlauf macht mich noch wahnsinnig.
Bin jetzt umgestiegen auf "ftui-meter"
Folgende Vorgehensweise lässt das Problem reproduzieren :
- Beispielseite "FTUI meter" von @mr_petz funktioniert immer bei mir im Browser (Windows Chrome)
- Gradient-Beispiel rechts unten 1:1 in meine Seite kopiert --> Farbverlauf ok
- umgestellt auf "is-vertical" --> Farbverlauf ok
- min angepasst von "-10" auf "0" -->kein Farbeverlauf mehr, nur noch grau
- min wieder zurück auf "-10" --> Farbverlauf wieder ok
Aber auf meinem Android Tablet gehts immer, auch mit min="0" !
Somit hat Windows Chrome ein Darstellungsproblem bei bestimmten Konstellationen ...
EDITH :
- Windows Chrome und Edge stellen keinen Farbverlauf dar bei min="0"
- gerade Firefox installiert, der zeigt den Farbverlauf an bei min="0" (sowie Android tablet)
Gruss
Joe
@setstate
Mal zum Test wäre die einfachste Lösung im ftui-meter diese:
static get properties() {
return {
height: '',
width: '',
color: 'primary',
min: 0,
max: 100,
value: 0.1,
isVertical: false,
};
}
Da funktioniert es sofort im Chromebrowser.
Der vorbelegte Wert 0 im value scheint da mitzuwirken.
Einfach mal so testen.
LG mr_petz
Hallo,
jetzt bin ich beim swiper angelangt und stelle auch Bugs fest :
Dieser swiper im Popup funktioniert problemlos
<ftui-swiper id="SWP_Klingel" scrollbar>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_1.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_2.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_3.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_4.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_5.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_6.jpg" width="795px" height="582px"></ftui-image>
</ftui-swiper>
Sobald ich nun davor und danach einen back/next einbaue läuft der Swiper gleich beim anzeigen des Popups von alleine durch
<ftui-row>
<ftui-icon name="chevron-left" @click="SWP_Klingel.back()"></ftui-icon>
<ftui-swiper id="SWP_Klingel" scrollbar>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_1.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_2.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_3.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_4.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_5.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_6.jpg" width="795px" height="582px"></ftui-image>
</ftui-swiper>
<ftui-icon name="chevron-right" @click="SWP_Klingel.next()"></ftui-icon>
</ftui-row>
Nehme ich das Konstrukt aus dem Beispiel und setze beide in einem grid dahinter dann laufen die Bilder nicht durch
<ftui-swiper id="SWP_Klingel" scrollbar>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_1.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_2.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_3.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_4.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_5.jpg" width="795px" height="582px"></ftui-image>
<ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_6.jpg" width="795px" height="582px"></ftui-image>
</ftui-swiper>
<ftui-grid-tile row="4" col="8" height="2" width="4" is-row>
<ftui-icon name="chevron-left" @click="SWP_Klingel.back()"></ftui-icon>
<ftui-icon name="chevron-right" @click="SWP_Klingel.next()"></ftui-icon>
</ftui-grid-tile>
</ftui-row>
Weiterhin funktioniert das klicken von "back/next" nicht sauber, vor allem wenn man mehrmals schnell hintereinander klickt.
Das ist irgendwie nicht "entprellt"
Auch im Example-Beispiel links oben (Wetter-swiper) kommt das durcheinander, wenn man zu oft klickt und dann wieder am Ende ankommt.
EDITH : Im Firefox scrollen die Bilder auch mit Version 2 durch, im Chrome nicht
EDITH2 :
Komischerweise kann ich das mit dem Durchlaufen beim LAden im Beispiel nicht nachstellen, da funktionierts. Aber back/next auch nicht zuverlässig
<ftui-row>
<ftui-icon name="chevron-left" @click="swiper1.back()"></ftui-icon>
<ftui-swiper id="swiper1" scrollbar>
<ftui-content id="sw1_1" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
<ftui-content id="sw1_2" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
<ftui-content id="sw1_3" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
<ftui-content id="sw1_4" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
<ftui-content id="sw1_5" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
<ftui-content id="sw1_6" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
<ftui-content id="sw1_7" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
</ftui-swiper>
<ftui-icon name="chevron-right" @click="swiper1.next()"></ftui-icon>
</ftui-row>
Gruss
Joe
Zitat von: mr_petz am 08 Januar 2023, 20:31:05
Habe zum Verhalten im swiper was rausgefunden...
Wenn man diese Zeile vom swiper:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/swiper/swiper.component.js#L90
mit dieser ersetzt:
this.submitChange('value', this.value);
dann funktioniert das @click="swiper1.next()" oder @click="swiper1.value = 'sw2'"
Warum wissen nur die kenner...
Jetzt habe ich soeben das obige gefunden. Ist mittlerweile Zeile 91 aber wenn ich es so wie oben anpassen ist das mit dem automatischen Durchlauf behoben
Allerdings scrollt beim ersten klicken auf next das Ganze um 2 Bilder und die Steuerung mit den Pfeilen funktioniert auch noch nicht 100%
Gruss
Joe
@setstate
Ich leider nochmal :D
Nochmal zum slider. Wenn du in der css folgendes:
.rangeable-progress {
-webkit-mask: linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0);
background-size: var(--ftui-slider-bgimage-w) var(--ftui-slider-bgimage-h);
background-image: var(--color-base, #20639b);
}
.rangeable-progress::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-base, #20639b);
}
.rangeable-container.rangeable-vertical .rangeable-progress {
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
-webkit-transform-origin: 0 50% 0;
transform-origin: 0 50% 0;
left: 0.5px;
--color-base: linear-gradient(var(--cold-color) 35%, var(--hot-color) 65%);
}
und in der js die Zeile11:
import { getStylePropertyValue,isVisible} from '../../modules/ftui/ftui.helper.js';
und Zeile43
if (isVisible(this)) {
tauschst,
und nach Zeile 129 das:
if (this.rangeable.axis==='x') {
this.style.setProperty('--ftui-slider-bgimage-w',getStylePropertyValue('width',this.shadowRoot.querySelector('.wrapper')));
this.style.setProperty('--ftui-slider-bgimage-h','100%');
} else {
this.style.setProperty('--ftui-slider-bgimage-w','100%');
this.style.setProperty('--ftui-slider-bgimage-h',getStylePropertyValue('height',this.shadowRoot.querySelector('.wrapper')));
}
einträgst, dann hast du bei gradientcolor wieder die volle Länge und er staucht sich beim schieben nicht mehr zusammen.
Vielleicht hilfts.
LG mr_petz
Hallo,
Kann man ein Popup auch größer darstellen als das umgebende "grid-tile" ?
Wenn eine Popup-Funktion innerhalb eines "grid-tile" definiert ist, nimmt es auch nur dessen Platz ein bzw. kann nicht größer werden und wird innerhalb dessen Grenzen dargestellt.
Bei contentfiles habe ich dann das Problem, dass Popups, die innerhalb definiert sind, nie größer werden können als die Kachel drumrum
Ich möchte das popup aber mittig aufm Bildschirm platzieren.
Contenfiles werden so aufgerufen :
<ftui-grid base-width="600" base-height="400" shape="round">
<ftui-grid-tile row="1" col="1" height="1" width="1" shape="round">
<ftui-content file="content_cam.html" IP="96" Label="Einfahrt"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="2" height="1" width="1" shape="round">
<ftui-content file="content_cam.html" IP="95" Label="Haustuere"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="1" height="1" width="1" shape="round">
<ftui-content file="content_cam.html" IP="94" Label="Gartentor"></ftui-content>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="2" height="1" width="1" shape="round">
<ftui-content file="content_cam.html" IP="93" Label="Gartenhaus"></ftui-content>
</ftui-grid-tile>
</ftui-grid>
Contentfile :
<ftui-image src="http://192.168.1.{{IP}}:88/cgi-bin/CGIStream.cgi?cmd=GetMJStream"
width="595px"
height="395px"
@click="POP_{{Label}}.open()"
>
</ftui-image>
<ftui-popup id="POP_{{Label}}" timeout="60" width="800px" height="600px">
<ftui-row color="dark" height="18px"><ftui-label text="{{Label}}"></ftui-label></ftui-row>
<ftui-image src="http://192.168.1.{{IP}}:88/cgi-bin/CGIStream.cgi?cmd=GetMJStream"
style="-webkit-border-radius:10px;"
padding="3px"
width="795px"
height="582px"
>
</ftui-image>
</ftui-popup>
Gruss
Joe
@cotecmania
Das erreichst du mit:
<ftui-popup id="POP_{{Label}}" timeout="60" width="800px" height="600px" position="page">
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/contents/content-popup.html
@setstate
hier ist noch popup-target drin...
LG mr_petz
Schade dass sowas nicht in den normalen Examples zum Popup drin ist, dann hätte ich es gefunden https://knowthelist.github.io/ftui/www/ftui/examples/popup.html (https://knowthelist.github.io/ftui/www/ftui/examples/popup.html)
@setstate
Info zum swiper!
Ich denke ich habe die Ursache?
Wenn eine bestimmte Breite (width<60%) angegeben wird kommt es zum Fehlverhalten und der swiper überspringt den 1. oder 2.View.
Mit:
this.submitChange('value', this.value);
in Zeile 90 (@cotecmania Zeile 90!)) geht es
wenn man in Zeile 112 target.offsetLeft-500 (bei grid-tile width:1000px) oder target.offsetLeft-this.parentElement.offsetLeft rechnet (siehe unten im Edit) und der swiper mittig ist:
this.container.scrollTo({ left: target.offsetLeft-this.parentElement.offsetLeft, behavior: 'smooth' });
Warum gerade 500??? k.A. Oder grid-width/2 weil left 50%?
getestet unter Chrome und FF.
hier mein Test (liegt in einem ftui-tab-view):
<ftui-row height="5%">
<ftui-icon name="chevron-left" @click="swiper1.back()"></ftui-icon>
<ftui-swiper id="swiper1" scrollbar>
<ftui-content id="sw1_1" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
<ftui-content id="sw1_2" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
<ftui-content id="sw1_3" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
<ftui-content id="sw1_4" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
<ftui-content id="sw1_5" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
<ftui-content id="sw1_6" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
<ftui-content id="sw1_7" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
</ftui-swiper>
<ftui-icon name="chevron-right" @click="swiper1.next()"></ftui-icon>
</ftui-row>
<ftui-row width="75%" height="5%">
<ftui-icon name="chevron-left" @click="swiper11.back()"></ftui-icon>
<ftui-swiper id="swiper11" scrollbar>
<ftui-content id="sw1_11" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
<ftui-content id="sw1_21" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
<ftui-content id="sw1_31" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
<ftui-content id="sw1_41" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
<ftui-content id="sw1_51" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
<ftui-content id="sw1_61" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
<ftui-content id="sw1_71" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
</ftui-swiper>
<ftui-icon name="chevron-right" @click="swiper11.next()"></ftui-icon>
</ftui-row>
<ftui-row width="50%" height="5%">
<ftui-icon name="chevron-left" @click="swiper10.back()"></ftui-icon>
<ftui-swiper id="swiper10" scrollbar>
<ftui-content id="sw1_10" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
<ftui-content id="sw1_20" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
<ftui-content id="sw1_30" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
<ftui-content id="sw1_40" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
<ftui-content id="sw1_50" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
<ftui-content id="sw1_60" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
<ftui-content id="sw1_70" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
</ftui-swiper>
<ftui-icon name="chevron-right" @click="swiper10.next()"></ftui-icon>
</ftui-row>
<ftui-row width="25%" height="5%">
<ftui-icon name="chevron-left" @click="swiper100.back()"></ftui-icon>
<ftui-swiper id="swiper100" scrollbar>
<ftui-content id="sw1_100" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
<ftui-content id="sw1_200" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
<ftui-content id="sw1_300" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
<ftui-content id="sw1_400" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
<ftui-content id="sw1_500" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
<ftui-content id="sw1_600" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
<ftui-content id="sw1_700" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
</ftui-swiper>
<ftui-icon name="chevron-right" @click="swiper100.next()"></ftui-icon>
</ftui-row>
Ich hoffe das können noch mehr bestätigen und es hilft dir einwenig ;)
Edit:
Achso. Noch zu erwähnen: die Breite meines grid-tile ist 1045px.
Und es funktioniert nur wenn der swiper mittig ist...?
Also man braucht eine Berechnung die immer von der Mitte aus gesehen die Position des swiper und die Breite des grid-tile oder anderes Element wo er drin steckt kennt und das von left abzieht?
Das:
this.container.scrollTo({ left: target.offsetLeft-this.parentElement.offsetLeft, behavior: 'smooth' });
funktioniert auch wenn der swiper mittig ist.
LG mr_petz
Edit2:
Habe mal die Berechnungen anzeigen lassen siehe Bildanhang.
Da sieht man gut das beim target.offsetLeft zuviel draufgerechnet wird. Vergleich 2.Spalte und 5.Spalte.
Es müssen die icon,gridbreite mit einbezogen werden.
Rechnung ist diese: target.offsetLeft-this.parentElement.offsetLeft
womit es in meinen Test funktioniert.
Aufbau der Tabelle:
von oben nach unten 1. - 4.swiper im 4erBlock
und jeder weitere Block ein Bild weiter.
Nur bei voller Breite (100%) und >60% ist alles gut.
Edit3:
Ich nochmal. :D Anderer Lösungsweg:
nach Zeile18 das einfügen:
this.tempIndex = 0;
und auch wieder Zeile90 (91 wenn oben eingefügt) ersetzen mit:
this.submitChange('value', this.value);
und die Zeile112 ersetzen mit:
if (this.currentIndex > this.tempIndex) {
this.tempIndex = this.currentIndex;
this.container.scrollLeft += target.offsetWidth;
}
if (this.currentIndex < this.tempIndex) {
this.tempIndex = this.currentIndex;
this.container.scrollLeft -= target.offsetWidth;
}
if (this.tempIndex === this.slides.length-1) {
this.tempIndex = this.currentIndex;
this.container.scrollLeft = target.offsetWidth*this.slides.length-1;
}
if (this.currentIndex === 0) {
this.tempIndex = this.currentIndex;
this.container.scrollLeft = 0;
}
oder vielleicht die bessere Wahl:
if (this.currentIndex > this.tempIndex) {
this.tempIndex = this.currentIndex;
this.container.scrollLeft = target.offsetWidth)*this.currentIndex;
}
if (this.currentIndex < this.tempIndex) {
this.tempIndex = this.currentIndex;
this.container.scrollLeft = target.offsetWidth*this.currentIndex;
}
if (this.tempIndex === this.slides.length-1) {
this.tempIndex = this.currentIndex;
this.container.scrollLeft = target.offsetWidth*this.slides.length-1;
}
if (this.currentIndex === 0) {
this.tempIndex = this.currentIndex;
this.container.scrollLeft = 0;
}
oder mit scrollTo():
if (this.currentIndex > this.tempIndex) {
this.tempIndex = this.currentIndex;
this.container.scrollTo({left: target.offsetWidth*this.currentIndex, behavior: 'smooth',});
}
if (this.currentIndex < this.tempIndex) {
this.tempIndex = this.currentIndex;
this.container.scrollTo({left: target.offsetWidth*this.currentIndex, behavior: 'smooth',});
}
if (this.tempIndex === this.slides.length-1) {
this.tempIndex = this.currentIndex;
this.container.scrollTo({left: target.offsetWidth*this.slides.length-1, behavior: 'smooth',});
}
if (this.currentIndex === 0) {
this.tempIndex = this.currentIndex;
this.container.scrollTo({left: 0, behavior: 'smooth',});
}
und schon läüft es egal wie Breit oder an welcher Position der swiper platziert ist.
Ja ist mehr Code, aber man braucht nicht die Elternelemente in einer Berechnung mit einbeziehen. Was nu besser?
Animiertes gif angehangen.
@mr_petz
Hast Du den z.B. Pfeil rechts auch mehrmals schnell hintereinander geklickt ?
Da kam bei mir das Ganze durcheinander
@cotecmania
Teste mal Final Variante hier unten und sag ob es geht.
Im animierten gif drücke ich ja schon schnell...
LG
ps. Mir geht es in erster Linie hier um das richtige Darstellen/ um den richtigen Sprung zum Bild.
Wenn der swiper durch durchklicken durcheinander kommt, das war nicht mein Ziel.
Er kommt ja wie in meinem ersten Test schon beim normalen durchschalten durcheinander bei einer row mit 50% oder kleiner...
Edit:
Beim sehr sehr schnellen durchschalten wird der interne Index immer richtig gezählt, aber der scroll kommt mit setzen nicht hinterher. Müsste vielleicht ein timeout rein bis das Bild fertig gewechselt hat.?
Oder der Nutzer muss halt normal clicken ;) oder mit touch nach links und rechts schieben.
Die this.container.scrollLeft+=target.offsetWidth variante ist von der Berechnung die Beste...
Edit2:
Ich habe mal oben noch eine multiplikation von index und width angehangen. Da scheint es auch bei wilden clicken immer zugehen... ;)
Wobei die Ergebnisse, der beiden Varianten, unterschiedlich sind bei:
target.offsetWidth*this.currentIndex,this.container.scrollLeft+=target.offsetWidth
Diese Berechnung haut auch nicht hin:
(((this.parentElement.offsetWidth-this.container.offsetWidth)/2)+target.offsetWidth)*this.currentIndex
Da komme ich aber sehr nahe an den optimalen wert mit this.container.scrollLeft+=target.offsetWidth ran.
Edit3:
Jetzt habe ich die richtige Berechnung fürs wilde clicken. Es ist egal wie Breit oder wie Weit er von links ist, es passt.
Hier wird durch den index immer die richtige Stelle gesetzt.
Die ganzen ifs von oben können raus.
this.container.scrollTo({left: ((target.offsetWidth+50)*this.currentIndex)-50, behavior: 'smooth',});
Jetzt switcht er immer richtig beim durchschalten...
Die 50 sind die margin-right. Muss nach einer Änderung hier berücksichtigt werden!
Final:
Und damit es für das Auswahlbuttonbeispiel auch funktioniert so Zeile 112 (113 wenn this.tempIndex eingetragen) austauschen:
this.tempIndex < this.currentIndex && this.currentIndex !== this.slides.length-1 ? this.tempIndex++ : this.tempIndex = this.currentIndex;
this.container.scrollTo({left: (target.offsetWidth+50)*(this.tempIndex!==this.currentIndex?this.tempIndex:this.currentIndex)-50, behavior: 'smooth',});
und
this.tempIndex=0;
muss nach Zeile18 rein.
und auch wieder Zeile 90 (91 wenn this.tempIndex eingetragen) ersetzen mit:
this.submitChange('value', this.value);
Jetzt seid ihr dran mit testen und @setstate könnte es so umsetzen wenn ihr damit keine Probleme mehr habt.
Einen guten Vergleich hat man im example vom swiper. im popup taucht mit dieser Berechnung jetzt auch Bild1 auf beim autoscroll.
@mr_petz
Ich tu mich jetzt schwer die ganzen Änderungen richtig einzupflegen.
Kannst Du die modifizierten Files hier einstellen dann teste ich das ...
Gruss
Joe
Eigentlich nur das nach Final eintragen/ändern.
Das andere ist nur zum veranschaulichen der Vorgehensweise zum Lösungsansatz gedacht.
Ich möchte hier auch nicht @setstate vorgreifen. Sein Urteil ist hier bindend und er wird das bestimmt in seiner Form umsetzen.
Ich versuche hier nur zu unterstützen mit diesen Lösungsansatz.
Ich hänge mal temporär für ca. eine Woche an.
LG mr_petz
Nach rechts geht jetzt alles aber wenn ich nach links (langsam) immer weiter klicke springt er wieder wild umher ...
Ich fände es auch gut wenn man das Verhalten am Ende (links/rechts) so einstellen könnte, dass er da "anhält" und nicht wieder zum anderen Ende springt.
Ende bleibt Ende und Start bleibt Start.
Ja da gebe ich dir Recht.
Nach Links habe ich garnicht mit in betracht gezogen :o
Liegt an dem tempIndex.
Mal sehen ob das auch anders geht.
...
Neuer Test temporär im Anhang
LG mr_petz
Edit: Das stoppen am Ende und Anfang wäre optional bestimmt auch kein Ding...
erstmal sollten jetzt noch andere testen und @setstate sein Urteil sagen...
Jetzt funktionierts auch links 8)
Sorry aber weiterer Bug ...
Wenn man unten mit dem Scrollbar navigiert und danach die Pfeile nutzt also back/next, dann passt es in manchen Konstellationen nicht mehr
z.B. ich habe 6 Bilder
Wenn ich den Swiper anzeige wird Bild 1 angezeigt
Dann gehe ich durch Benutzung des Scrollbars auf Bild 4
dann auf den Pfeil rechts (next), dann springt er auf Bild 2.
Der interne PositionsMerker wird bei Benutzung des Scrollbars nicht auf den richtigen Wert gesetzt.
Gruss
Joe
Ja die scrollbar ist so jetzt nicht verknüpft.
Geht nur bei der originalen Version von setstate mit dem "Sprungfehler".
Teufelskreis....
Ich kann da jetzt auch nichts mehr machen. Mein Ziel war der Sprung per Pfeil links/rechts...
LG mr_petz
Edit:
Jetzt muss man noch unterscheiden zwischen Chrome und Firefox bzgl. scrollbar.
Bei FF und Chrome hängt es mit der onIntersectionChange-Geschichte im Code zusammen, wobei die bei Chrome nur beim ersten start zieht und bei FF durcheinander kommt.
Jetzt kann ich es auch nachvollziehen warum er so zuckt....
Hallo, ich bin ein Fan von geraden Linien und Kanten, daher tue ich mich mit den Tags <ftui-row> und <ftui-column> schwer.
Damit bekomme ich keine saubere Ausrichtung untereinander hin (siehe Screenshot).
Ich möchte die Beschriftungstexte und die Haken bzw. switches sauber runtereinander angeordnet haben.
Wie kann ich eine Ausrichtung aller Beschriftungstexte Linksbündig erreichen?
Auch stört mich die Überschneidung bei Müll (Switch rechts oben). Da bekomme ich keine Trennung wie im linken Grid hin.
Versuche es mal auf der rechten Seite mit 2 Spalten denen Du eine prozentuale Breite gibst
Ohne Codebeispiel wirds aber schwierig Dir zu helfen
z.B.
<ftui-row>
<ftui-column width="50%">
</ftui-column>
<ftui-column width="50%">
</ftui-column>
</ftui-row>
Dann kannst noch mit der Ausrichtung arbeiten ...
@cotecmania,@setstate
Ich habe einen neuen Test für dich/euch ;)
Da der IntersectionObserver bei Chrome nur bei start geht und bei FF rumzickt, habe ich mal einen Eventlistener dafür eingebaut....
Jetzt sollte der swiper auch beim scroll den richtigen Index erhalten um dann normal über die Buttons weiter gesetzt werden können...
LG
Test im temporären Anhang.
Edit nochmal was geändert...
Edit2 nochmal was geändert...
1. Frage
Wie kann ich mit ftui-icon abhängig vom Reading-Inhalt ein anderes Icon einblenden lassen?
Bei FTUI2 ging das ja mit der data-states und data-icons Eigenschaft.
2. Frage:
Gibt es FTUI3 etwas Vergleichbares zu data-type="homestatus" aus FTUI2?
Zitat von: Superposchi am 13 März 2023, 00:21:33
1. Frage
Wie kann ich mit ftui-icon abhängig vom Reading-Inhalt ein anderes Icon einblenden lassen?
Bei FTUI2 ging das ja mit der data-states und data-icons Eigenschaft.
Beispiel Rolladen :
<ftui-button shape="square"
[value]="Rolladen_EG:state"
(value)="Rolladen_EG"
states="stop"
fill="none"
>
<ftui-icon class="size-0" margin="17px 0 0 0" [name]="Rolladen_EG:level | round(0) | step('100:fts_window_2w, 90:fts_shutter_10, 80:fts_shutter_20, 70:fts_shutter_30, 60:fts_shutter_40, 50:fts_shutter_50, 40:fts_shutter_60, 30:fts_shutter_70, 20:fts_shutter_80, 10:fts_shutter_90, 0:fts_shutter_100')"></ftui-icon>
</ftui-button>
Zitat von: mr_petz am 12 März 2023, 20:54:11
@cotecmania,@setstate
Jetzt sollte der swiper auch beim scroll den richtigen Index erhalten um dann normal über die Buttons weiter gesetzt wird.
Japp, jetzt gehts.
Egal ob Button oder scrollbar oder im Wechsel
Zitat[name]="Rolladen_EG:level | round(0) | step('100:fts_window_2w, 90:fts_shutter_10, 80:fts_shutter_20, 70:fts_shutter_30, 60:fts_shutter_40, 50:fts_shutter_50, 40:fts_shutter_60, 30:fts_shutter_70, 20:fts_shutter_80, 10:fts_shutter_90, 0:fts_shutter_100')"
Wie sieht es aus wenn das Reading Strings statt numerische Werte enthält?
Muss dann die Zahl lediglich durch den Text ersetzt werden oder muss dieser noch irgendwie in einfache/doppelte Hochkomma?
Zitat von: Superposchi am 13 März 2023, 11:17:22
Wie sieht es aus wenn das Reading Strings statt numerische Werte enthält?
Muss dann die Zahl lediglich durch den Text ersetzt werden oder muss dieser noch irgendwie in einfache/doppelte Hochkomma?
Dann "map" anstatt "step" verwenden.
Die Suche hilft hier ...
Gibt es in FTUI3 eine Möglichkeit per Button oder anderer Befehlsfläche den Browser zu beenden in dem die FTUI-Website angezeigt wird?
Die Frage bezieht sich auf eine Handy-Version die ich mit Fully Kiosk Browser auf dem Handy anzeigen lasse.
Es gibt für FHEM das Fully Modul, damit kannst Du fully auch beenden (exit), da sollte sich das mit einem Button machen lassen.
Gibt es in FTUI3 eine Möglichkeit Geräteabhängig eine Variable oder unterschiedliche Readings zu verweisen?
Habe zwei identische Handys auf denen beide die gleichen FTUI3-Dateien laufen sollen. Die Handys sollen aber personengebundene Daten anzeigen, also das Reading, das dem jeweiligen Benutzer zugeordnet ist.
Zitat von: Superposchi am 14 März 2023, 20:29:13
Gibt es in FTUI3 eine Möglichkeit Geräteabhängig eine Variable oder unterschiedliche Readings zu verweisen?
Habe zwei identische Handys auf denen beide die gleichen FTUI3-Dateien laufen sollen. Die Handys sollen aber personengebundene Daten anzeigen, also das Reading, das dem jeweiligen Benutzer zugeordnet ist.
Das Einfachste wäre wohl index1.html und index2.html zu verwenden, oder?
Nein eben nicht.
Dann muss jede Änderung in beiden Dateien nachgeholfen werden was es alles andere als einfach macht.
Darum ja auch die Frage.
Zitat von: Superposchi am 14 März 2023, 20:29:13
Gibt es in FTUI3 eine Möglichkeit Geräteabhängig eine Variable oder unterschiedliche Readings zu verweisen?
Also theoretisch sollte es ja einen Login (Authentifizierung) geben. Damit sind dann beide User unterschieden. Wäre das ein Weg?
Login wo von genau? Sagt mir jetzt nicht direkt etwas.
FTUI3 lädt ja nur eine Webseite.
Zitat von: Superposchi am 15 März 2023, 19:12:28
Login wo von genau? Sagt mir jetzt nicht direkt etwas.
FTUI3 lädt ja nur eine Webseite.
Und dahinter liegt ein Webserver. Dieser wiederum wird in fhem.cfg konfiguriert. Dort kann u.a. festgelegt werden, ob/das eine Authentifizierung stattfindet. - Wenn man das nicht in allen Belangen möchte, kann man dort auf einem weiteren Port den nächsten Webserver (nur für Fully) aufsetzen.
Bei Aufruf einer Webseite ist dem Webserver zumindest dann schon mal bekannt, ob User Superproschi oder User Superfrau die Seite abruft. Das könnte man nutzen, da könnte man weiterdenken.
Ich habe mich da nicht näher beschäftigt, also wie man das angeht - aber das könnte ein Weg sein.
Ok, jetzt hab ich den Ansatz verstanden.
Du meinst also für jedes Handy einen eigenen Wegzugang mit separatem Port zur Identifikation.
Ist die Frage wie und ob man das in FTUI3 auslesen und darauf reagieren kann. Denke mal das ist eine Frage für setstate.
Welchen Colorpicker nutzt ihr um eure HUE-Lampen zu steuern?
Ich habe für sat, bri, ct(Kelvin) die Slider genutzt und es funktioniert auch mit unmittelbarer Reaktion in der jeweiligen Lampe.
Allerdings bekomme ich es nicht hin, die Farbe zu direkt zu ändern. Alle Colorpicker setzen zwar den RGB-Wert aber zeigen logischerweise keine direkte Auswirkung auf die Lampe. Es muss mindestens erstmal eine zweite Änderungsmöglichkeit betätigt werden.
Einzige Ausnahme davon sind die RBG-Slider, aber das ist ehrlich gesagt zu umständlich um da eine Farbe einzustellen.
Hallo zusammen!
Ist es möglich, mit einem Button ein View, z.B. View1 zu öffnen?
<ftui-tab-view id="View1">...</ftui-tab-view>
Ich habe es mal naiv mit Folgendem probiert, funktionierte aber wie zu erwarten nicht. ;D
<ftui-button @click="view1.open()">View 1</ftui-button>
<ftui-button view="1">View 1</ftui-button>
<ftui-button @click="onClicked('View 1')">View 1</ftui-button>
Ich kann mir mit einem zum Button umgestalteten ftui-tab <ftui-tab view="View1" fill="solid" color="primary" timeout="5">Tab1</ftui-tab> helfen, aber zu wissen, ob es mit einem Button geht oder nicht, würde mir weiterhelfen.
Hallo twinFHEM,
ja das geht. Kann man sich ganz gut im Beispiel ansehen.
https://knowthelist.github.io/ftui/www/ftui/examples/tab.html (https://knowthelist.github.io/ftui/www/ftui/examples/tab.html)
Gruß LuGu
Hi LuGu,
mmmh...
Was meinst Du genau?
Dass es mit einem <ftui-tab> geht, weiß ich (s. mein Beispiel).
Aber gibt es tatsächlich die Möglichkeit, dies mit einem nativen <ftui-button> zu erledigen?
Viele Grüße
@twinFHEM
ftui-tab kannst du mit value steuern.
Bsp.:
ftui-tab:
<ftui-tab view="View1" direction="vertical" active [value]="local:ftuitest">
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
button:
<ftui-button (value)="local:ftuitest" states="on">View1</ftui-button>
Hier im Bsp. nehme ich local. Da wird nix an fhem gesendet.
Was @LuGu bestimmt meinte ist das:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/tab.html#L46
LG mr_petz
Edit:
Alternativ mit id und @click:
<ftui-tab view="View1" id="ViewHome" direction="vertical" active>
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
hier darf in der id= aber nicht die aus view= stehen und darf auch nur einmal vorkommen...
<ftui-button @click="ViewHome.value='on'">View1</ftui-button>
Zitat von: twinFHEM am 16 März 2023, 14:44:25
Hi LuGu,
mmmh...
Was meinst Du genau?
Dass es mit einem <ftui-tab> geht, weiß ich (s. mein Beispiel).
Aber gibt es tatsächlich die Möglichkeit, dies mit einem nativen <ftui-button> zu erledigen?
Viele Grüße
Deine ursprüngliche Frage war:
,,Ist es möglich, mit einem Button ein View, z.B. View1 zu öffnen?"
Hätte ich wohl genauer lesen müssen. Sorry für mich ist ein ftui-tab mit einem ftui-Icon auch ein Button.
Gruß LuGu
Wow, mr_petz!
Besten Dank für die präzise und informative Veranschaulichung.
So klar habe ich es noch nicht gesehen.
Vielen Dank euch beiden!
Ich möchte in einer Handy-Version für FTUI3 gerne eine Auswahl der Lichter mit Link zur entsprechenden Detailseite einrichten.
Für jedes Licht soll erst ein Symbol, dann der Lampenname und am Ende ein Symbol für die Lampeneigenschaften mit dem ">" dahinter angezeigt werden.
Das Symbol am Ende soll entsprechend der Leuchtstärke und Farbe formatiert werden. Es will mir aber nicht gelingen.
Da ich bisher keine echte Dokumentation der Tag-Eigenschaften finden konnte ist der folgende Code als Versuch eher zusammen geraten:
<header class="size-2" margin="2"> Lichter:</header>
<ftui-view-item target="Licht_Schlafzimmer_Decke">
<ftui-icon name="hue2019_archetypesDoubleSpot" slot="start" color="gray"></ftui-icon>Deckenlicht
<ftui-icon [name]="HUEGroup21:pct | step('[0-9]:light_light_dim_00, 1[0-9]:light_light_dim_10, 2[0-9]:light_light_dim_20, 3[0-9]:light_light_dim_30, 4[0-9]:light_light_dim_40, 5[0-9]:light_light_dim_50, 6[0-9]:light_light_dim_60, 7[0-9]:light_light_dim_70, 8[0-9]:light_light_dim_80, 9[0-9]:light_light_dim_90, 100:light_light_dim_100')"
[color]="HUEGroup21:rgb"></ftui-icon>
</ftui-view-item>
<ftui-view-item target="Licht_Schlafzimmer_PC">
<ftui-icon name="hue2019_archetypesSingleSpot" slot="start" color="gray"></ftui-icon>PC-Licht
<ftui-icon [name]="HUEDevice9:pct | map('[0-9]:light_light_dim_00, 1[0-9]:light_light_dim_10, 2[0-9]:light_light_dim_20, 3[0-9]:light_light_dim_30, 4[0-9]:light_light_dim_40, 5[0-9]:light_light_dim_50, 6[0-9]:light_light_dim_60, 7[0-9]:light_light_dim_70, 8[0-9]:light_light_dim_80, 9[0-9]:light_light_dim_90, 100:light_light_dim_100')"
[color]="HUEDevice9:rgb"></ftui-icon>
</ftui-view-item>
<ftui-view-item target="Licht_Schlafzimmer_Lese">
<ftui-icon name="hue_filled_lightstrip" slot="start" color="y"></ftui-icon>Leselicht
<ftui-icon [name]="HUEDevice14:pct | map('[0-9]:light_light_dim_00, 1[0-9]:light_light_dim_10, 2[0-9]:light_light_dim_20, 3[0-9]:light_light_dim_30, 4[0-9]:light_light_dim_40, 5[0-9]:light_light_dim_50, 6[0-9]:light_light_dim_60, 7[0-9]:light_light_dim_70, 8[0-9]:light_light_dim_80, 9[0-9]:light_light_dim_90, 100:light_light_dim_100')"
[color]="HUEDevice14:ct"></ftui-icon>
</ftui-view-item>
Wie man sehen kann habe ich es sowohl mit map als auch step probiert. Auch feste Zahlen habe ich ausprobiert.
Auf dem beigefügten Screenshot habe ich ein Platzhaltersymbol an der Stelle des Icons eingefügt.
Kann mir jemand helfen?
Problem gelöst!
Ich versuche einer HUE-Lampe per colorpicker einen Farbwert zuzuweisen, doch irgendwie klappt das nicht.
Ich nutze folgenden Code:
<ftui-colorpicker margin="0.5" [hex]="HUEGroup21:rgb" (hex)="set HUEGroup21 rgb $value"></ftui-colorpicker>
Soweit ich das im Frontend sehen kann wird auch ein "set HUEGroup21 rgb #??????" als Befehl abgesetzt. Die Fragezeichen stehen für einen Farbcode im Hex-Format. Doch die Lampe wird nicht umgestellt, Manchmal wechselt das colorpicker nach dem Befehl sogar zu einer völlig anderen Farbe.
Wo ist der Fehler?
P.S. Der Fehler liegt darin, dass vor dem Hex-Wert eine # mitgesendet wird. Im Set-Befehl darf natürlich keine # vor dem Farbwert stehen.
Die # wird aber aus dem $value automatisch generiert. Die Frage ist also wie bekomme ich die # vor dem Farbwert gelöscht?
P.S. Lösung gefunden
Zitat von: Superposchi am 15 März 2023, 22:58:41Ok, jetzt hab ich den Ansatz verstanden.
Du meinst also für jedes Handy einen eigenen Wegzugang mit separatem Port zur Identifikation.
Ist die Frage wie und ob man das in FTUI3 auslesen und darauf reagieren kann. Denke mal das ist eine Frage für setstate.
Man könnte Elemente, die man ausblenden will, mit einer ID ausstatten und dann per <Script> nach dem Laden der Seite verstecken.
<ftui-grid-tile id="papa"
Im Header:
<script>
document.addEventListener("DOMContentLoaded", () => {
mama.hidden = window.location.host.includes('8084');
papa.hidden = window.location.host.includes('8083');
});
</script>
Man könnte auch versuchen per Navigator Objekt Unterschiede der Telefone auszunutzen.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator
<script>
document.addEventListener("DOMContentLoaded", () => {
mama.hidden = navigator.userAgent.includes('Android');
papa.hidden = navigator.userAgent.includes('iPhone');
});
</script>
Einer könnte sein Telefon auf eine andere Sprache zu stellen
<script>
document.addEventListener("DOMContentLoaded", () => {
mama.hidden = navigator.language.includes('en');
papa.hidden = navigator.language.includes('de');
});
</script>
Zitat von: Superposchi am 15 März 2023, 17:41:19Nein eben nicht.
Dann muss jede Änderung in beiden Dateien nachgeholfen werden was es alles andere als einfach macht.
Nicht aber, wenn Du die "gemeinsamen" Widgets/Inhalte/etc. über
<ftui-content file="bla.html"></ftui-content> als Template in beide HTML-Seiten einbindest, oder?
Wenn es sich bei den "personalisierten Inhalten" dann noch jeweils um die gleichen Typen von readings handelt, könnte man zudem auch Variablen in die content-Seiten übergeben.
Ich habe das mit den Wetterdaten in meiner Anzeige so gemacht:
index.html
<ftui-content file="content_wx.html" devicefc="AerisWeather:response_01_periods_01"></ftui-content>
<ftui-content file="content_wx.html" devicefc="AerisWeather:response_01_periods_02"></ftui-content>
<ftui-content file="content_wx.html" devicefc="AerisWeather:response_01_periods_03"></ftui-content>content_wx.html dann z.B.
<ftui-row align-items="center">
<ftui-label size-8" [text]="{{devicefc}}_minTempC"><span slot="unit" size-8">°</span></ftui-label>
<ftui-label size-8" [text]="{{devicefc}}_maxTempC"><span slot="unit" size-8">°</span></ftui-label>
</ftui-row>Damit bekomme ich in die max/min-Temperatur für die 3 "periods" in jeweils einer Zeile angezeigt, ohne dass ich den kompletten Code 3 Mal einfügen muss.
Hallo,
wie kann ich in ftui3 ein Datum wie z.B. "21.03.2023 14.10" umformatieren mit z.B. nur noch 2-stelliger Jahreszahl.
Mit "toDate" und "format" habe ich es nicht geschafft, weil es beim "format" keine Platzhalter dafür gibt, oder ?
Anzeige des Wochentages wäre auch ein Wunsch.
Gruss
Joe
Müsste eigtl mit YY (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L234) gehen:
<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY')"></ftui-label>Ergibt sowas wie Donnerstag, 23. März 2023
Allerdings scheint YY genauso wie YYYY zu funktionieren, man könnte sich hier mit replace behelfen:
<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY') | replace(' 202',' 2')"></ftui-label>ergibt Donnerstag, 23. März 23.
"YY" geht leider nicht, das hatte ich schon getestet.
Der Replace schaffts aber das ist natürlich sehr speziell ...
Danke
Joe
Zitat von: cotecmania am 23 März 2023, 15:11:37"YY" geht leider nicht, das hatte ich schon getestet.
Das wäre was für @setstate; es ist spezifiziert aber funktioniert nicht wie gedacht - im Prinzip spuckt es genau das aus, was YYYY liefert.
@setstate: ggf solltest du den substring in Zeile 234 (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L234) anpassen:
const YY = date.getFullYear().toString().substr(-2);Zitat von: cotecmania am 23 März 2023, 15:11:37Der Replace schaffts aber das ist natürlich sehr speziell ...
Ja, es schneidet einfach die 20 von 2023 raus; und in der ersten Version sogar etwas zuviel (es würde am 20. auch das Tagesdatum rausfiltern); daher hier eine angepasste Version die zumindest bis 2029 funktionieren sollte:
<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY') | replace(' 202',' 2')"></ftui-label>
Hi @yersinia,
man könnte dein Beispiel bis aufs Jahr 2099 pimpen...
<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY') | replace(/20([0-9])/g,'$1')"></ftui-label>
oder
<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY') | replace(/20(\d\d)/,'$1')"></ftui-label>
Zum anpassen im helper würde auch das gehen:
const YY = date.getFullYear().toString().substring(2);oder
const YY = date.getFullYear().toString().slice(2,4);aber setstate wollte bestimmt das machen:
const YY = date.getFullYear().toString().slice(-2);
LG mr_petz
Kann man die Margin/Padding-Eigenschaften wie im normalen HTLM auch nur in eine Richtung geltend machen oder gilt es immer nur in alle vier Richtungen?
Zitat von: mr_petz am 29 Dezember 2021, 11:22:14Zitat von: grossmaggul am 29 Dezember 2021, 00:59:53Und das funktioniert perfekt, danke dafür!!
Leider nicht ganz...
Aber jetzt. Jetzt wird auch der active-Status mit gesetzt!:
<ftui-tab view="View2" direction="vertical" @click="setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),10000);">
Leider ist das active im tab und da musste ich ein neuen forEach machen.
Ich denke setstate kann einen autoreturn/backToMain ins tab-modul mit einbauen...
LG mr_petz
Edit: Das einzige was jetzt passieren kann ist, dass immer ein neuer timer bei jedem click auf einem tab oder was auch immer gesetzt wird!
Also wenn man seinen ganzen view durchklickt und bei jedem ein @click hat wie oben, dann wird immer wieder ein neuer timer gestartet... leider :-\.
Mal sehen ob das auch anders geht...
Edit 2:
So ist besser im ftui-grid-tile vom eigenen Menü Bsp.:
<ftui-grid-tile row="2" col="1" height="10" width="1" shape="round" @click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),10000);">Hier brauch man nur einmal definieren und bei jedem click wird der alte timer als erstes gelöscht.
Also beim ersten click wird der timer gelöscht und die Zeit neu gesetzt, bei jedem weiteren click geht die Zeit von vorne los...
ps. View1 in den eigenen Startview umbenennen und hinten die Zeit in ms...
Hab folgendes ergänzt:
<ftui-grid-tile row="1" col="1" height="29" width="1" shape="round" @click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),30000);">Allerdings wird der Timer bei Benutzung von FTUI nicht gerestet. Es springt immer nach 30 Sekunden zurück. Was mache ich denn hier falsch?
Zweitens, die Frage gibt es die Möglichkeit für einzelne Tab-Views verschiedene Timeouts zu definieren?
Vorab vielen Dank :-)
Grüße Timo
Zitat von: TimoD am 25 März 2023, 17:00:00Hab folgendes ergänzt:
<ftui-grid-tile row="1" col="1" height="29" width="1" shape="round" @click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),30000);">
Allerdings wird der Timer bei Benutzung von FTUI nicht gerestet. Es springt immer nach 30 Sekunden zurück. Was mache ich denn hier falsch?
Zweitens, die Frage gibt es die Möglichkeit für einzelne Tab-Views verschiedene Timeouts zu definieren?
Vorab vielen Dank :-)
Grüße Timo
Die ehemalige @click Funktion von mir wird nicht mehr benötigt da setstate timeout für den tab bereits eingebaut hat.
Die Funktion funktioniert wenn es nach 30sec zurück zu home springt. Einen anderen Zweck hatte sie nicht.
LG mr_petz
Edit:
Mehrere gehen wie hier im example vom tab:
https://github.com/knowthelist/ftui/blob/13db8daa62c845c5f83920498850afef7b624fce/www/ftui/examples/tab.html#L41
Zitat von: Superposchi am 24 März 2023, 20:46:08Kann man die Margin/Padding-Eigenschaften wie im normalen HTLM auch nur in eine Richtung geltend machen oder gilt es immer nur in alle vier Richtungen?
Man kann Margin/Padding flexibel wie im CSS angeben. Entweder 1 Wert für alle Seiten oder getrennt.
margin="alle"
margin="oben rechts unten links"
margin="oben seitlich unten"
margin="oben/unten seitlich"
margin="-20px 0 0 0"
margin="1"
margin="-1em"
padding="0 1em 0"
padding="2em 1em"
Gibt es beim Dropdown eine Möglichkeit Alternativbegriffe anzeigen zu lassen?
<ftui-dropdown width="200px" list="sleep,fresh,strong,auto,close" [(value)]="tuya_local_bf75378cf6e13718e0rvcj:mode""></ftui-dropdown>Ich würde "sleep,fresh,strong,auto,close" gerne durch "Schlafmodus,Fresh-Modus,Max-Modus,Auto,Aus" ersetzen, aber im Reading müssen die ersteren Begriffe eingetragen werden bzw. per Set-Befehl gesendet werden.
Kann ich beim Switch-Element die Breite des Schalters beeinflussen?
width="xxx" funktioniert nicht und class="size-x" wirkt sich auf die komplette Größe - also auch die Höhe - aus.
Das mit dem margin klappt bei mir nicht.
Habe es in einem ftui-row Objekt ausprobiert, aber das einzige was eine Wirkung zeigt ist der einzelne Wert der sich in alle Richtungen auswirkt.
Muss da vielleicht was im css angepasst werden?
Und noch ein Problem, diesmal mit dem Segment-Typ:
Ich habe mir aus den Examples das Segment Beispiel Binding herauskopiert und angepasst. Klappt auch soweit gut.
Nur, dass er nach dem Auswählen eines Segments zwar den Wert in Fhem übernimmt und anzeigt, aber im FTUI immer wieder auf das erste Segment zurückspringt. Nur wenn ich dann noch einmal auf das ausgewählte Segment klicke, bleibt er auch darauf stehen.
Was übersehe ich?
Der Code lautet:
<ftui-segment [(value)]="tuya_local_bf5df91a3950a0df0csgf7:colortype" @value-change="console.log($event.detail)">
<ftui-segment-button value="1">
<ftui-label>Gradiant</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="2">
<ftui-label>Fix</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="3">
<ftui-label>Nachtlicht</ftui-label>
</ftui-segment-button>
</ftui-segment>
Kann ich bei einem Slider das senden des Befehls verzögern?
Der Befehl wird immer schon abgesetzt während der Slider noch bewegt wird, was zu einem hin und her führt.
Hallo zusammen,
gibt es eine Möglichkeit mit dem
ftui-clock format
irgendwie an die Kalenderwoche zu kommen?
Grüße Andi
Hi Andi,
direkt aus der ftui-clock geht es nicht, aber mit extrascript könnte man es umsetzen:
https://forum.fhem.de/index.php?topic=115259.msg1179813#msg1179813
<ftui-cell class="size-3">
<script>
const date = new Date();
const currentThursday = new Date(date.getTime() +(3-((date.getDay()+6) % 7)) * 86400000);
const yearOfThursday = currentThursday.getFullYear();
const firstThursday = new Date(new Date(yearOfThursday,0,4).getTime() +(3-((new Date(yearOfThursday,0,4).getDay()+6) % 7)) * 86400000);
const weekNumber = Math.floor(1 + 0.5 + (currentThursday.getTime() - firstThursday.getTime()) / 86400000/7);
document.write(weekNumber+'. Kalenderwoche');
</script>
</ftui-cell>
Edit: (Code geändert)
ein Pipeeinzeiler würde auch gehen. Bsp.:
<ftui-label [text]="Device:time | ()=>Math.floor(1 + 0.5 + ((new Date(new Date().getTime() +(3-((new Date().getDay()+6) % 7)) * 8.64e7)).getTime() - (new Date(new Date((new Date(new Date().getTime() +(3-((new Date().getDay()+6) % 7)) * 8.64e7)).getFullYear(),0,4).getTime() +(3-((new Date((new Date(new Date().getTime() +(3-((new Date().getDay()+6) % 7)) * 8.64e7)).getFullYear(),0,4).getDay()+6) % 7)) * 86400000)).getTime())/8.64e7/7)+'.KW'"></ftui-label>
Hier spielt die ankommende Zeit keine Rolle...
LG mr_petz
Zwei Fragen:
1)
Kann ich beim Setzen eines Dropdown andere Elemente auf der Seite Aktualisieren?
Wenn ich das Dropdown ändere wird per notify eine Reihe Readings Rosetten und auf 0 gestellt, aber die Anzeige auf der Seite wird nicht aktualisiert?
2)
Wie kann ich bei einem Button den gesendeten Befehl teilweise oder ganz aus einem Reading auslesen?
Zitat von: mr_petz am 03 April 2023, 07:28:39Hi Andi,
direkt aus der ftui-clock geht es nicht, aber mit extrascript könnte man es umsetzen:
https://forum.fhem.de/index.php?topic=115259.msg1179813#msg1179813
<ftui-cell class="size-3">
<script>
const date = new Date();
const currentThursday = new Date(date.getTime() +(3-((date.getDay()+6) % 7)) * 86400000);
const yearOfThursday = currentThursday.getFullYear();
const firstThursday = new Date(new Date(yearOfThursday,0,4).getTime() +(3-((new Date(yearOfThursday,0,4).getDay()+6) % 7)) * 86400000);
const weekNumber = Math.floor(1 + 0.5 + (currentThursday.getTime() - firstThursday.getTime()) / 86400000/7);
document.write(weekNumber+'. Kalenderwoche');
</script>
</ftui-cell>
Edit:
ein Pipeeinzeiler würde auch gehen. Bsp.:
<ftui-label [text]="device:time | ()=>Math.ceil((new Date().getDay() + 1 + Math.floor((new Date() - new Date(new Date().getFullYear(),0,1)) / 86400000)) / 7)+'.KW'"></ftui-label>
Hier spielt die ankommende Zeit keine Rolle...
LG mr_petz
Danke
Ich vermisse schmerzhaft die Möglichkeit Texte im Hintergrund einzufärben.
Bei FTUI2 konnte man Vorder- und Hintergrundfarbe separat einstellen.
Bei FTUI3 gibt es die Background-Color nur noch beim chart-Objekt soweit ich gesehen habe.
Kann man das nicht für das Label-Objekt auch wieder einführen?
Zitat von: Superposchi am 04 April 2023, 19:03:55Ich vermisse schmerzhaft die Möglichkeit Texte im Hintergrund einzufärben.
Bei FTUI2 konnte man Vorder- und Hintergrundfarbe separat einstellen.
Bei FTUI3 gibt es die Background-Color nur noch beim chart-Objekt soweit ich gesehen habe.
Kann man das nicht für das Label-Objekt auch wieder einführen?
Das ist konzeptionell so gewollt: jedes Element hat nur eine Color-Eigenschaft.
Weiße Schrift auf roten Grund kann man mit einem Container-Element (cell, row, column, grid-tile) color=red + Label color=white erreichen.
Wenn du das nicht mitmachen willst, kannst du das auch mit normalen CSS-Klassen umgehen.
<style> .bunti {color: #eee; background: #d70; } </style>
<ftui-label class="bunti"></ftui-label>
Wie kann ich den Code teilweise auslagern? Die index.html wird einfach zu groß und unübersichtlich.
Ich habe schon mit der Suche einiges gefunden, aber nichts scheint zu funktionieren.
Außerdem war alles was ich im Forum gelesen habe immer auf ein Grid bezogen, nie auf einen gesamten Tab - geht das nicht?
Ich würde gerne einen kompletten Tab auslagern (eventuell innerhalb dessen sogar noch mal Teile davon weiter auslagern).
Der Aufruf sieht so aus:
<ftui-tab view="Home" size="large" margin="2.5" active direction="vertical">
<ftui-icon name="home2" size="3" color="black"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
Der Seitencode dann so:
<ftui-tab-view id="Home">
<!-- Homestatus -->
<ftui-grid-tile row="1" col="3" height="2" width="3" shape="round">
<header>Homestatus</header>
.
.
.
</ftui-grid-tile>
</ftui-tab-view>
Hab es jetzt mit folgendem probiert:
<ftui-tab-view id="Home">
<ftui-content file="BlackviewTab8E/Home.html"></ftui-content>
</ftui-tab-view>
und dabei mit und ohne dem ftui-tab-view Element den Code in die separate Datei geschoben.
Doch die Anzeige bleibt leer sobald ich den Code durch den Content ersetze
In der mobilen Version hat es funktioniert, allerdings erfolgt die Navogation dort über ftui-view Elemente.
Außerdem bin ich bei meiner Recherche auf das Group-Attribut gestoßen wenn mit Untermenüs gearbeitet wird.
Doch bis auf die Erwähnung stand da nicht wirklich was zu. Gibt es dazu genauere Infos? Benutzung, Aufruf, Syntex etc.?
@superposchi
Ich denke du hast in deiner ausgelagerten html das ftui-grid vergessen.
z.B.
<ftui-grid base-width="40" base-height="40" margin="4">
</ftui-grid>
Gruß LuGu
Stimt, dass steht nicht drin, aber ist es dann nicht doppelt.
Steht ja in der Index.html auch drin.
Zitat von: Superposchi am 05 April 2023, 17:28:18Stimt, dass steht nicht drin, aber ist es dann nicht doppelt.
Steht ja in der Index.html auch drin.
Muss in jede ausgelagerte html mit rein. Ich denke, damit sie weiß, wo sie sich im Grid platzieren soll.
Bei mir funktionieren die ausgelagerten html's jedenfalls so.
Gruß LuGu
Hab es reingenommen, aber die Anzeige des Tab-Bereichs bleibt leer.
Sobald ich es mit ftui-content auslagere wird nur noch das Menü angezeigt, aber kein Inhalt (alles was ich auslagere) mehr.
Da muss es doch irgendwie eine Lösung für geben, oder?
Ansonsten wird die index.html ja so groß und unübersichtlich, dss man nach einiger Zeit gar nichts mehr wiederfindet.
In deinem content file muss nicht nur ftui-grid angegeben sein, sonder ftui-grid-tile muss auch bei row="1" col="1" starten.
Lese mal hier (https://forum.fhem.de/index.php?topic=115259.msg1133746#msg1133746).
Gruß LuGu
Also ich habe es jetzt irgendwie hinbekommen, aber das ist keine dauerhafte Lösung.
Nach 5-6 Clicks wird das System so träge, dass es minutenlang nicht mehr reagiert.
Irgendwie ist da noch der Wurm drin.
Eine weitere Frage wäre bezüglich des group-Attributs.
Ich nutze das group-Attribut um die Grids für das Haupt-/Untermenü zu identifizieren.
Das klappt auch soweit gut, die Grids werden zugehörig zum Menü eingeblendet.
Einzig das Ausblenden funktioniert noch nicht. Soll heißen, wenn ich in einem Untermenü war und dort Grids aufgrufen wurden, werden diese nicht ausgeblendet sobald ich wieder auf ein Button des Hautmenüs klicke. Die Grids liegen dann über den richtigen Grids des Hauptmenüs.
Verstehe ich das group-Attribut falsch?
Hy hat hier wer schon eine Garagentor steuerung angefetigt und wäre so net das zu teilen bin einfach zu blöd.
<!-- Garagentor -->
<ftui-grid-tile row="1" col="14" height="2" width="2" shape="round">
<header>Garagentor</header>
<ftui-row height="33%">
<ftui-button [(value)]="Garage:state | on" direction="vertical" color="current" fill="none" margin="-1em">
<ftui-icon name="angle-up" class="size-1" height="90%"></ftui-icon>
<ftui-label>open</ftui-label>
</ftui-button>
<ftui-icon name="garage-variant" class="size-4"></ftui-icon>
<ftui-button [value]="Garage:state | off" direction="vertical" color="current" fill="none" margin="-1em">
<ftui-icon name="angle-down" class="size-1" height="90%"></ftui-icon>
<ftui-label>close</ftui-label>
</ftui-button>
</ftui-row>
<ftui-label unit="%" size="1">0</ftui-label>
</ftui-grid-tile>
</ftui-grid-tile>
das habe ich bis jetzt versucht aber ich brauche on zum öffnen und off zum schließen
Einiges habe ich mir selber zusammen kopieren können siehe Bild
Ich komme nach wie vor nicht mit den Untermenüs zurecht.
Ich schaffe es zwar dank verschiedener Beispiele ein geschachteltes Menü herzustellen und auch die Grids entsprechend ein-/auszublenden.
Aber bei einem ausgelagerten Menü habe ich das Problem, dass ich nach dem Aufruf keinen Button aus dem Hauptmenü mehr auswählen kann, im Untermenü geht es komischerweise.
Hier ist der code des Hauptmenüs:
<body>
<ftui-grid base-width="75" base-height="66.35" margin="2" group="1">
<ftui-grid-tile row="1" col="1" height="12" width="2" color="white">
<ftui-column margin="1">
<ftui-column align-items="top">
<ftui-row width="50%" height="30px">
<ftui-clock format="ee" size="3" unit=", "></ftui-clock>
<ftui-clock format="DD" size="3" unit="."> </ftui-clock>
<ftui-clock format="MM" size="3" unit="."></ftui-clock>
</ftui-row>
<ftui-clock format="hh:mm" size="7" margin="0"></ftui-clock>
</ftui-column>
<ftui-tab view="Home" size="large" margin="2.5" active direction="vertical" group="2">
<ftui-icon name="home2" size="3"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="Alarm" direction="vertical" margin="2.5" group="2" [hidden]="SettingsHMI:Alarm | map('on:false, off:true')">
<ftui-icon name="building_security" size="3"></ftui-icon>
<ftui-label>Alarm</ftui-label>
</ftui-tab>
<ftui-tab view="Info" direction="vertical" margin="2.5" group="2">
<ftui-icon name="info-circle" size="3"></ftui-icon>
<ftui-label>Info</ftui-label>
</ftui-tab>
<ftui-tab view="Controls" direction="vertical" margin="2.5" group="2">
<ftui-icon name="it_remote" size="3"></ftui-icon>
<ftui-label>Steuerung</ftui-label>
</ftui-tab>
<ftui-tab view="Settings" direction="vertical" margin="2.5" group="2" [hidden]="SettingsHMI:Einstellungen | map('on:false, off:true')">
<ftui-icon name="sliders" size="3"></ftui-icon>
<ftui-label>Einestellungen</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
Hier der Aufruf:
<ftui-tab-view id="Controls" group="2">
<ftui-content file="BlackviewTab8E/Controls.html"></ftui-content>
</ftui-tab-view>
Und noch das ausgelagerte Untermenü:
<ftui-grid base-width="75" base-height="66.35" margin="2" group="2">
<ftui-grid-tile row="1" col="3" height="12" width="2" color="white">
<ftui-column margin="1">
<ftui-tab view="Controls_Rolladen" direction="vertical" margin="2.5" group="3" active>
<ftui-icon name="fts_shutter_updown" size="3"></ftui-icon>
<ftui-label>Rolladen</ftui-label>
</ftui-tab>
<ftui-tab view="Controls_Heizung" direction="vertical" margin="2.5" group="3">
<ftui-icon name="sani_heating" size="3"></ftui-icon>
<ftui-label>Heizung</ftui-label>
</ftui-tab>
<ftui-tab view="Controls_Saugroboter" direction="vertical" margin="2.5" group="3">
<ftui-icon name="Botvac_VR200" size="3"></ftui-icon>
<ftui-label>Saugroboter</ftui-label>
</ftui-tab>
<ftui-tab view="Controls_Wohnzimmerventilator" direction="vertical" margin="2.5" group="3">
<ftui-icon name="fan" size="3"></ftui-icon>
<ftui-label>Ventilator</ftui-label>
</ftui-tab>
<ftui-tab view="Controls_Schlafzimmerventilator" direction="vertical" margin="2.5" group="3">
<ftui-icon name="fan" size="3"></ftui-icon>
<ftui-label>Ventilator</ftui-label>
</ftui-tab>
<ftui-tab view="Controls_Luftbefeuchter" direction="vertical" margin="2.5" group="3">
<ftui-icon name="humidity" size="3"></ftui-icon>
<ftui-label>Luftbefeuchter</ftui-label>
</ftui-tab>
<ftui-tab view="Controls_DM_Wohnzimmer" direction="vertical" margin="2.5" group="3">
<ftui-icon name="dreambox" size="3"></ftui-icon>
<ftui-label>DM920uHD</ftui-label>
</ftui-tab>
<ftui-tab view="Controls_DM_Schlafzimmer" direction="vertical" margin="2.5" group="3">
<ftui-icon name="dreambox" size="3"></ftui-icon>
<ftui-label>DM7020HD</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<!-- #################################### Rolladen ############################################## -->
<ftui-tab-view id="Controls_Rolladen" group="3">
<ftui-content file="BlackviewTab8E/Controls_Rolladen.html"></ftui-content>
</ftui-tab-view>
</ftui-grid>
Wenn das Untermenü nicht ausgelagert ist, funktioniert es komischerweise.
Ich habe in einem Beispiel für die Tab-Steuerung gesehen, dass es möglich ist auch Menüs auszulagern.
Hy Habe es selber hinbekommen
<!-- Garagentor -->
<ftui-grid-tile row="1" col="14" height="2" width="2" shape="round">
<header>Garagentor</header>
<ftui-row height="33%">
<ftui-button [(value)]="Garage" direction="vertical" color="red" fill="none" states="on" margin="-1em">
<ftui-icon name="angle-up" class="size-1" height="90%"></ftui-icon>
<ftui-label>Open</ftui-label>
</ftui-button>
<ftui-icon
[name]="Garage:zustand | map('open: garage-open-variant, move: garage-alert-variant, closed: garage-variant')"
[color]="Garage:zustand | map('open: red, move: yellow, closed: green')">
</ftui-icon>
<ftui-button [(value)]="Garage" direction="vertical" color="green" fill="none" states="off" margin="-1em">
<ftui-icon name="angle-down" class="size-1" height="90%"></ftui-icon>
<ftui-label>Close</ftui-label>
</ftui-button>
</ftui-row>
</ftui-grid-tile>
Hy Habe jetzt meine Temperatur Batterie anzeige hier nachgebaut, frage da ich zur platz einhaltung einiges doppelt habe ist meine frage wie ich das am besten umgehen kann
<!-- Temperatur -->
<ftui-grid-tile row="3" col="6" height="9" width="6" shape="round">
<header>Sensoren</header>
<ftui-row>
<ftui-column align-items="left" margin="2">
<ftui-label text="Wohnzimmer Temp"></ftui-label>
<ftui-label text="Wohnzimmer Heizung"></ftui-label>
<ftui-label text="Esszimmer Temp"></ftui-label>
<ftui-label text="Esszimmer Heizung"></ftui-label>
<ftui-label text="Küche Temp"></ftui-label>
<ftui-label text="Küche Heizung"></ftui-label>
<ftui-label text="Flur Heizung"></ftui-label>
<ftui-label text="Arbeitszimmer Temp"></ftui-label>
<ftui-label text="Arbeitszimmer Heizung"></ftui-label>
<ftui-label text="Gäste WC Heizung"></ftui-label>
<ftui-label text="Badezimmer Temp"></ftui-label>
<ftui-label text="Badezimmer Heizung"></ftui-label>
<ftui-label text="WC Oben Heizung"></ftui-label>
<ftui-label text="Zimmer Oben Temp"></ftui-label>
<ftui-label text="Zimmer Oben Heizung"></ftui-label>
<ftui-label text="Schlafzimmer Temp"></ftui-label>
<ftui-label text="Schlafzimmer Heizung"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="Wohnzimmer:temperature" unit="°C"></ftui-label>
<ftui-label [text]="WZ:desired-temp" unit=""></ftui-label>
<ftui-label [text]="Esszimmer:temperature" unit="°C"></ftui-label>
<ftui-label [text]="Esszimmer1:desired-temp" unit=""></ftui-label>
<ftui-label [text]="Kueche:temperature" unit="°C"></ftui-label>
<ftui-label [text]="KU:desiredTemperature" unit="°C"></ftui-label>
<ftui-label [text]="FL:desiredTemperature" unit="°C"></ftui-label>
<ftui-label [text]="Zimmer_Unten:temperature" unit="°C"></ftui-label>
<ftui-label [text]="Arbeitszimmer:desired-temp" unit=""></ftui-label>
<ftui-label [text]="WCU:desired-temp" unit=""></ftui-label>
<ftui-label [text]="Badezimmer:temperature" unit="°C"></ftui-label>
<ftui-label [text]="Bad:desiredTemperature" unit="°C"></ftui-label>
<ftui-label [text]="WCO:desiredTemperature" unit="°C"></ftui-label>
<ftui-label [text]="Zimmer_Oben:temperature" unit="°C"></ftui-label>
<ftui-label [text]="ZO1:desired-temp" unit=""></ftui-label>
<ftui-label [text]="Schlafzimmer:temperature" unit="°C"></ftui-label>
<ftui-label [text]="SZ1:desiredTemperature" unit="°C"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="Wohnzimmer:humidity" unit="%"></ftui-label>
<ftui-label [text]="--" unit=""></ftui-label>
<ftui-label [text]="Esszimmer:humidity" unit="%"></ftui-label>
<ftui-label [text]="Esszimmer2:desired-temp" unit=""></ftui-label>
<ftui-label [text]="--" unit="°C"></ftui-label>
<ftui-label [text]="--" unit="°C"></ftui-label>
<ftui-label [text]="--" unit="°C"></ftui-label>
<ftui-label [text]="Zimmer_Unten:humidity" unit="%"></ftui-label>
<ftui-label [text]="--" unit="°C"></ftui-label>
<ftui-label [text]="--" unit="°C"></ftui-label>
<ftui-label [text]="Badezimmer:humidity" unit="%"></ftui-label>
<ftui-label [text]="--" unit="°C"></ftui-label>
<ftui-label [text]="--" unit="°C"></ftui-label>
<ftui-label [text]="Zimmer_Oben:humidity" unit="%"></ftui-label>
<ftui-label [text]="ZO2:desired-temp" unit=""></ftui-label>
<ftui-label [text]="Schlafzimmer:humidity" unit="%"></ftui-label>
<ftui-label [text]="SZ2:desiredTemperature" unit="°C"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon [name]="Wohnzimmer:battery | map('low:battery-1,ok:battery')"
[color]="Wohnzimmer:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="WZ:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="WZ:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="Esszimmer:battery | map('low:battery-1,ok:battery')"
[color]="Esszimmer:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Esszimmer1:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="Esszimmer1:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="Kueche:battery | map('low:battery-1,ok:battery')"
[color]="Kueche:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="KU:battery | map('low:battery-1,ok:battery')"
[color]="KU:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="FL:battery | map('low:battery-1,ok:battery')"
[color]="FL:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Zimmer_Unten:battery | map('low:battery-1,ok:battery')"
[color]="Zimmer_Unten:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Arbeitszimmer:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="Arbeitszimmer:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="WCU:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="WCU:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="Badezimmer:battery | map('0:battery-1,ok:battery')"
[color]="Badezimmer:battery | map('0:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Bad:battery | map('0:battery-1,ok:battery')"
[color]="Bad:battery | map('0:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="WCO:battery | map('0:battery-1,ok:battery')"
[color]="WCO:battery | map('0:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Zimmer_Oben:battery | map('0:battery-1,ok:battery')"
[color]="Zimmer_Oben:battery | map('0:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="ZO1:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="ZO1:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="Schlafzimmer:battery | map('low:battery-1,ok:battery')"
[color]="Schlafzimmer:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="SZ1:battery | map('low:battery-1,ok:battery')"
[color]="SZ1:battery | map('low:danger,ok:green')"></ftui-icon>
</ftui-column>
<ftui-column>
<ftui-icon [name]="Wohnzimmer:battery | map('low:battery-1,ok:battery')"
[color]="Wohnzimmer:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="WZ:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="WZ:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="Esszimmer:battery | map('low:battery-1,ok:battery')"
[color]="Esszimmer:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Esszimmer2:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="Esszimmer2:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="Kueche:battery | map('low:battery-1,ok:battery')"
[color]="Kueche:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="KU:battery | map('low:battery-1,ok:battery')"
[color]="KU:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="FL:battery | map('low:battery-1,ok:battery')"
[color]="FL:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Zimmer_Unten:battery | map('low:battery-1,ok:battery')"
[color]="Zimmer_Unten:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Arbeitszimmer:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="Arbeitszimmer:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="WCU:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="WCU:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="Badezimmer:battery | map('0:battery-1,ok:battery')"
[color]="Badezimmer:battery | map('0:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Bad:battery | map('0:battery-1,ok:battery')"
[color]="Bad:battery | map('0:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="WCO:battery | map('0:battery-1,ok:battery')"
[color]="WCO:battery | map('0:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="Zimmer_Oben:battery | map('0:battery-1,ok:battery')"
[color]="Zimmer_Oben:battery | map('0:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="ZO2:batteryPercent | step('10:battery-0, 30:battery-1, 50:battery-2, 75:battery-3, 91:battery')"
[color]="ZO2:batteryPercent | step('10:danger, 30:warning, 50:success, 75:secondary, 91:green')"></ftui-icon>
<ftui-icon [name]="Schlafzimmer:battery | map('low:battery-1,ok:battery')"
[color]="Schlafzimmer:battery | map('low:danger,ok:green')"></ftui-icon>
<ftui-icon [name]="SZ2:battery | map('low:battery-1,ok:battery')"
[color]="SZ2:battery | map('low:danger,ok:green')"></ftui-icon>
</ftui-row>
</ftui-grid-tile>
Hab mal eine Verständnisfrage.
Ich erstelle meine UI fürs Tablet auf dem PC. Heißt die Seiten werden auf dem PC und am Tablet angezeigt.
Interessanterweise ist die Darstellung nicht gleich.
Am PC wird weiß als weiß und schwarz als schwarz dargestellt, auf dem Tablet invertiert, also weiß als schwarz und umgekehrt.
Es wird logischerweise der gleiche Code geladen und ich sehe keinen Switch, der abhängig vom Gerät unterschiedliche Stylesheets lädt.
Wie verhält es sich mit Dark Mode etc. im FTUI3?
Woran kann es noch liegen?
Hat jemand für FTUI3 schon die Mondphasen dargestellt bekommen?
ja ;D
Weitere Infos findet man unter https://www.der-mond.de/
Ich denke ein einfaches "ja" reicht nicht aus. Hier meine Definitionen:
in der Index.html
<ftui-grid-tile row="1" col="4" height="2" width="2" shape="round" color="translucent">
<ftui-content file="nw5/inc_sonne.html" titel="Sonnenauf-/untergang"></ftui-content>
</ftui-grid-tile>
<ftui-content file="nw5/inc_mond_popup.html"></ftui-content>
inc_sonne.html
<!-- ============= Sonnenauf-/-untergang ================ -->
<ftui-row>
<ftui-column direction="vertical">
<ftui-icon class="size-2" path="../images/openautomation" name="weather_sunrise" color="yellow" @click="mond_popup.open()"></ftui-icon>
<ftui-label [text]="Astro:SunRise"></ftui-label>
<ftui-label [text]="Sonnenaufgang"></ftui-label>
<ftui-icon class="size-2" path="../images/openautomation" name="weather_sunset" color="yellow" @click="mond_popup.open()"></ftui-icon>
<ftui-label [text]="Astro:SunSet"></ftui-label>
<ftui-label [text]="Sonnenuntergang"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon class="size-2" path="../images/openautomation" name="weather_moonrise" color="yellow" @click="mond_popup.open()"></ftui-icon>
<ftui-label [text]="Astro:MoonRise"></ftui-label>
<ftui-label [text]="Mondaufgang"></ftui-label>
<ftui-icon class="size-2" path="../images/openautomation" name="weather_moonset" color="yellow" @click="mond_popup.open()"></ftui-icon>
<ftui-label [text]="Astro:MoonSet"></ftui-label>
<ftui-label [text]="Monduntergang"></ftui-label>
</ftui-column>
</ftui-row>
inc_mond_popup.html
<!-- ============= Mond Bild================ -->
<!-- Mondphase Popup -->
<ftui-popup id="mond_popup" position="page" timeout="10" width="360px" height="360px" timeout="10" shape="round" position="top">
<ftui-image [src]="Astro:MoonPhasePic" width="340px"></ftui-image>
<ftui-label [text]="Astro:MoonPhaseS"></ftui-label>
</ftui-popup>
FHEM-Def Astro
defmod Astro Astro
attr Astro DbLogExclude .*
attr Astro DbLogInclude MoonAge,MoonPhaseN
attr Astro devStateIcon { '<div><img src='.ReadingsVal($name,"MoonPhasePic","0").' height="100" width="100">' }
attr Astro event-on-change-reading MoonAge,MoonPhaseN
attr Astro icon weather_moon_phases_8
attr Astro interval 7200
attr Astro recomputeAt NewDay,SunRise,SunSet,AstroTwilightEvening,AstroTwilightMorning,CivilTwilightEvening,CivilTwilightMorning,CustomTwilightEvening,CustomTwilightMorning
attr Astro room Wetter
attr Astro userReadings MoonPhasePic { my $pb = sprintf "%03d",int(ReadingsVal($name,"MoonAge",0));;;;\
("/fhem/www/images/phasenbilder/stilkunst_moon_".$pb.".png")\
}
Bilder zu den Mondphasen: https://www.stilkunst.de/c62_stockgrafics/phases_of_moon/phases_of_moon.php
Ich hoffe es hilft weiter.
das nur ein ja nicht ausreicht, ist mir schon klar. Deshalb der Link. Dort kann man sich einen Link auf seine Bedürfnisse generieren und dann im FHEM einbinden. Es macht also keinen Sinn meinen Link hier zu posten, da das ganze ortsabhängig ist.
<ftui-image height="120px" border=0 src="https://www.der-mond.de/...>
Das steht dann in FTUI3 8)
Viele Grüße
Jürgen
...war doch nicht als Kritik gemeint. ;D Aber vielleicht braucht der ein oder andere doch ein paar Infos mehr um eine eigene Anzeige zu produzieren.
Alles gut ;D
Hallo zusammen
Hat jemand eine Idee wo ich einen Fehler habe, bzw. die Errormeldung in der Konsole versteht?
Die Seite lädt, bleibt kurz "stehen" dann kommt die Meldung, lädt dann weiter.
Benötigt ihr weitere Infos`?
Grüsse
ich vermute, da ist etwas in einem FtuiContent falsch
Setze mal <meta name="debug" content="2"> im HTML und schau dann in der Console
Da muss dann sowas erscheinen:
[FtuiContent] file loaded and content inserted
[ftuiApp] initComponents for area:
Habe Debug 2 gesetzt. keine weiteren Hinweise.
In der Expample "content2.html" kommt auch die Meldung:
[ftuiApp] error: initComponents - Timed out in 5000ms.
Grüsse
Warum ändert die Anzeige selbstständig die Farbe in FUI3?
Ich gebe einem Label bewusst das Attribut color="black" und auf dem Tablet wird es in weißer Schrift angezeigt, oder sieht zumindest so aus wie weiß.
Am PC wo ich es mir zu Testzwecken anzeiegen lasse, wird es interessanterweise richtig dargestellt.
Ist im css irgendeine Weiche eingebaut, die zwischen PC und Tablet unterscheidet oder woher kommt dieses Verhalten?
Zitat von: Superposchi am 14 April 2023, 11:36:12Warum ändert die Anzeige selbstständig die Farbe in FUI3?
Ich gebe einem Label bewusst das Attribut color="black" und auf dem Tablet wird es in weißer Schrift angezeigt, oder sieht zumindest so aus wie weiß.
Am PC wo ich es mir zu Testzwecken anzeiegen lasse, wird es interessanterweise richtig dargestellt.
Ist im css irgendeine Weiche eingebaut, die zwischen PC und Tablet unterscheidet oder woher kommt dieses Verhalten?
Da würd' ich mal in dem Anzeigeprogramm des Tablets schauen. Ggf werden hier die FTUI3-CSS einfach überschrieben.
Wenn du nicht explizit per Zusatzcode zwischen den Endgeräten/Browsern unterscheidest und dann unterschiedliche CSS auslieferst, liegt es an dem Browser und höchstwahrscheinlich nicht an FTUI3.
Was zum Thema "Mond" auch möglich ist:
Lege Dir das Astro Modul in FHEM an: https://wiki.fhem.de/wiki/Modul_Astro
Danach kannst Du Dir so was in FHEM einbinden:
<ftui-grid-tile row="1" col="8" height="2" width="3">
<header>Mondphase</header>
<ftui-image src="http://<IP_von_FHEM>:8083/fhem/Astro_moonwidget?name='Astronomie" height="200px" width="200px">
</ftui-image>
</ftui-grid-tile>
Viele Grüße, Andreas
ZitatWas zum Thema "Mond" auch möglich ist:
Es geht so einiges mit FTUI3, man müsste allerdings auch gewillt sein ein wenig Eigeninitiative zu entwickeln... ;)
Kleiner Hinweis für die die auf Flipclocks stehen (habe ich jetzt erst entdeckt...):
https://forum.fhem.de/index.php?topic=115259.msg1120978#msg1120978
https://github.com/T0RST3N/fhem-ftui-components-flip-clock
Ist von torte...
LG
Moin zusammen,
Frage zum Parameter "[hidden]" anhand folgenden funktionierenden Beispiels:
<ftui-label size="0" [hidden]="Rolloautomatikschalter:state | map('on:true, off:false')">Automatik inaktiv</ftui-label>
Gibt es eine Möglichkeit, auch Werte größer/kleiner X abzufragen als Bedingung? Mein Beispiel fragt auf true/false ab, ich würde gern in einem anderen Fall auf größer/kleiner Null abfragen wollen. Wenn Readingwert > 0 dann...
edit, habe was gefunden, werde mich damit versuchen
https://forum.fhem.de/index.php?topic=127705.msg1222103#msg1222103
Andere Frage, ich habe hier letztes Jahr eine Lösung erhalten für meinen Wunsch, diverse Livestream-Kameras einen Swiper zu nutzen, was grundsätzlich auch klappt. Der Code hängt unten. Nun habe ich das Problem seither (und nutze die an sich tolle Lösung daher nicht), dass mein Browser mit diesem Codeschnipsel 1-2x täglich abstürzt (reproduzierbar. Code drin = Abstürze, Code raus = läuft!). Jeder Kamerastream EINZELN ohne Swiper läuft tadellos und führt nicht zu Abstürzen.
Habe ich da irgendwo einen Fehler drin, oder ist meine suboptimale Hardware (jaja.... Raspbian GUI aktiv mit Chromium im Fullscreen (ändere ich aber nicht!)) daran schuld. Gäbe es eventuell eine alternative Idee, die ich ausprobieren könnte?
<ftui-grid-tile row="4" col="13" height="5" width="7">
<header>Livebild Garten / SolarCam / DachCam / Vogelhaus</header>
<ftui-swiper id="swiper1" auto-play interval="30">
<!-- Garten-Stream: -->
<ftui-image src="http://192.168.178.86:1020/mjpeg/stream.cgi?chn=1" width="510px" @click="livebildgarten.open()"></ftui-image>
<!-- Dach-Cam Stream: -->
<ftui-image [hidden]="dummy_istTag:state | map('on:false, off:true')" src="http://192.168.178.10:xxxxx" width="510px"></ftui-image>
<!-- ESP32-CAM SolarCam: -->
<ftui-image [hidden]="dummy_istTag:state | map('on:false, off:true')" src="http://192.168.178.10:xxxxx" width="510px"></ftui-image>
<!-- ESP32-CAM Vogelhaus: -->
<ftui-image [hidden]="dummy_istTag:state | map('on:false, off:true')" src="http://192.168.178.10:xxxxx" width="510px"></ftui-image>
</ftui-swiper>
</ftui-grid-tile>
@Dracolein
Richtig, geht mit step, z.b.:
step('0:battery-0, 2:battery-0, 2.2:battery-1, 2.5:battery-2, 2.6:battery-3, 100:battery')
Zitat von: Dracolein am 19 April 2023, 12:11:22Gäbe es eventuell eine alternative Idee, die ich ausprobieren könnte?
Hi, ja:
https://forum.fhem.de/index.php?topic=115259.msg1242927#msg1242927
oder mal mit content testen...
LG
Ich habe heute das Problem, das der Wetterstring von Proplanta irrwitzig lang ist und das Layout verhagelt.
Gibt es eine Möglichkeit das einzukürzen?
sowas wie
[text]="fc0_weatherDay | substring(0,12)"geht leider nicht.
Zitat von: Adimarantis am 25 April 2023, 12:47:07Ich habe heute das Problem, das der Wetterstring von Proplanta irrwitzig lang ist und das Layout verhagelt.
Gibt es eine Möglichkeit das einzukürzen?
sowas wie
[text]="fc0_weatherDay | substring(0,12)"geht leider nicht.
Ja mit:
https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L15
LG
Danke. Der Source ist die Doku :)
Warum da nicht das offensichtliche substring genommen wurde, erschliesst sich mir zwar nicht - aber es klappt.
Zitat von: Adimarantis am 25 April 2023, 14:34:05Danke. Der Source ist die Doku :)
Warum da nicht das offensichtliche substring genommen wurde, erschliesst sich mir zwar nicht - aber es klappt.
Hier ist die Antwort dazu:
https://forum.fhem.de/index.php?topic=115259.msg1214938#msg1214938
LG
Habe mal eine dumme Frage zum Unterschied FTUI2 vs FTUI3:
Ist es in FTUI3 auch möglich ein Icon als Switch zu benutzen?
Habe versucht in einem ftui-switch ein ftui-icon statt dem Text einzubauen, da hat er mir trotzdem den Schieberegler angezeigt.
Ich würde aber gerne einfach beim Drücken des Icons den Schalter ein-/ausschalten.
Zitat von: yersinia am 14 April 2023, 12:46:09Da würd' ich mal in dem Anzeigeprogramm des Tablets schauen. Ggf werden hier die FTUI3-CSS einfach überschrieben.
Wenn du nicht explizit per Zusatzcode zwischen den Endgeräten/Browsern unterscheidest und dann unterschiedliche CSS auslieferst, liegt es an dem Browser und höchstwahrscheinlich nicht an FTUI3.
Ich zeige das FTUI mit dem Fully Kiosk Browser an. Nutze die gleiche Kombination auf zwei Galaxy S21 ultra-Handys, da wird es ordentlich dargestellt. Die Einstellungen des Fully's sind identisch und im Tablet selbst (Blackview 10.1 Tab8E) gibt es nur die Möglichkeiten unter Android selbst, doch da ist auch nichts auffälliges.
Irgendeine Idee oder Hinweis was du mit Anzeigeprogramm meinst?
Zitat von: Superposchi am 26 April 2023, 08:58:36Habe mal eine dumme Frage zum Unterschied FTUI2 vs FTUI3:
Ist es in FTUI3 auch möglich ein Icon als Switch zu benutzen?
Habe versucht in einem ftui-switch ein ftui-icon statt dem Text einzubauen, da hat er mir trotzdem den Schieberegler angezeigt.
Ich würde aber gerne einfach beim Drücken des Icons den Schalter ein-/ausschalten.
Du kennst diese Info?
https://knowthelist.github.io/ftui/www/ftui/examples/button.htmlManchmal hilft auch die Suche 8)
Viele Grüße
Jürgen
Natürlich kenne ich das, aber mal ehrlich, was ist dort beschrieben? 25% ?
Jedenfalls gibt es zum Großteil der Attribute keine Erläuterungen. Auch die Beispiele bilden bestenfalls 50% der Möglichkeiten ab
Und wenn ich was zum switch-objekt suche, schaue ich nicht bei Buttons nach.
Und wenn die Suche passende Ergebnisse geliefert hätte, hätte ich nicht gefragt.
Hier nur kurz meine persönliche und nicht böse gemeinte Meinung:
1. Switch ist nur eine Sonderform eines Buttons
2. Auf dieser Beispielseite sollte zu 90% eine Lösung zu Deiner Anfrage sein.
3. Es wird hier im Normallfall nie eine für Dich zu 100% passende Lösung vorhanden sein.
4. Du solltest zumindest soviel IT-Knowhow haben, dass die hier angerissenen Lösungswege Dir helfen. Ansonsten solltest Du jemand suchen, der Dir FHEM nach Deinen Wünschen einrichtet.
Viele Grüße
Jürgen
Vielleicht kann mir ja jemand bei einem Verständnisproblem sinnvoll helfen.
Ich lade in die index.heml per ftui-content eine Seite mit verschiedenen Elementen.
Diese Elemente sind jeweils in einem ftui-popup eingebunden. Im Popup selbst soll der Inhalt wieder per ftui-content hineingeladen werden. Doch egal welche Pfadangabe ich nutze, ich bekomme keinen Inhalt angeziegt.
Alle Inhalte liegen im gleichen Unterordner, z.b. "Gerätename/xxx.html".
Nach meinem Verständnis müsste ich im Popup ja den Verzeichnisnamen nicht mehr angeben, da sich die Seite mit dem Content des Aufrufs ja bereits in diesem Unterordner befinden. Habe auch mit Verzeichnisnamen probiert und bekomme genauso nichts angezeigt.
Geht die Pfadangabe immer von der Index.html aus, also absolut oder ist sie wie eigentlich üblich in HTML relativ und geht von der jeweiligen Quelle aus?
@Superposchi
Ich habe auch geschachtelte content-files im Einsatz welche auch teilweise an verschiedenen Stellen verwendet werden. Dabei ist mir in Verbindung mit popup schon aufgefallen das nichts angezeigt wurde sobald ich die zweimal nutze. Lösung war den code für das Popup in die primäre index.html zu verschieben.
Gruß
Eisix
Was kann ich unter "zweimal verwenet" verstehen?
Zweimal insgesamt?
Zweimal im gleichen Subfile?
Könntest du die Erkenntnis etwas genauer beschreiben bitte.
Hallo,
also ein Beispiel: Auf meiner Hauptseite (deren Inhalt über content files geladen wird) ist ein Icon das den Klingelstatus anzeigt. Wenn jemand klingelt wird das grün und ein popup mit dem Stream der Türkamera geht auf. Das gleiche popup verwende ich in einer Übersichtsseite mit allen Kameras. Gleiche popup ID also mußte der code in die index.html.
Kann nicht sagen ob du das ähnlich aufgebaut hast da fehlt info. Aber es ist ja kein großer Akt das popup mal zu kopieren und zu testen.
Gruß
Eisix
Hast du nur die Popup-ID mit dem Content-Aufruf in die index.html kopiert oder den gesamten Code des Popup's?
Ich glaube bei mir ist es etwas anders aufgebaut.
Ich habe einfach eine Seite die ich über zwei verschiedene Wege aufrufen will.
Zum einen über das Menü und zum anderen über ein Icon auf der Hauptseite als Popup - welche aber selbst bereits aus einem Unterverzeichnis mit ftui-content eingebunden ist.
Über das menü sieht der aufruf grob dann so aus (Content aus Content heraus):
index.html -> ftui-tab (Menü) -> ftui-content (Seite mit Untermenü) -> ftui-content (Unterseiteninhalt) -> Seiteninhalt
Und über das Icon sieht es so aus (Content aus Popup heraus):
index.html -> ftui-content (Unterseiteninhalt) -> ftui-popup -> Seiteninhalt
Alle Seiten außer der index.html liegen in einem Unterordner.
Bei letzterem bleibt die Anzeige einfach leer und ich weiß nicht ob es an der Verschachtelung liegt oder an einem Codefehler wie zb der Pfadangabe.
Hallo,
einfach das ganze popup in den body der index.html
...
...
<ftui-popup id="popup_a6408518c243" height="650px" width="650px" position="page" timeout="120">
<header>AV Receiver</header>
<ftui-row height="10%">
<ftui-column width="15%" align-items="left" margin="0.5">
<ftui-label text="Eingang:" color="white" class="bold size-2"></ftui-label>
</ftui-column>
...
...
</ftui-popup>
</body>
</html>
Die Schachtelung ist bei mir ähnlich.
index.html ---> Tabview (contentfile) im gleichen Ordner --> alle anderen contentfiles in einem Ordner darunter.
Gruß
Eisix
Dann ist der Effekt von ftui-content aber praktisch gesehen hinfällig oder findest du nich?
Für das Popup ja, aber anders habe ich es nicht hingekriegt.
Frage an alle:
Hat denn überhaupt schon mal jemand ein externes File per ftui-content in ein ftui-popup angezeigt bekommen?
Oder gibt es da eventuell ein generelles Problem in der Kombination?
Vielleicht macht es ja etwas das im ausgelagerten File im Code stehen muss unmöglich.
Man kann schon mehrere Popups mit einem content file abbilden - einfach die Popup ID parametrisieren. Siehe mein Lösung fürs Wetter:
https://forum.fhem.de/index.php?topic=115259.msg1246816#msg1246816
Hy hab da ein Problem,
habe ein PI 3B A+ mit 'nem Display im Kiosk Modus am Laufen, nach ner weile kann ich drücken was ich möchte aber es werden keine befehle an FHEM weitergegeben erst wenn ich die Seite neu lade geht es wieder, Änderungen von FHEM kommen an (z.b. licht wird an oder aus geschaltet), jemand ein Tipp was das sein kann ?
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>FTUI Example</title>
</head>
Moin,
ich habe nun schon einige Popups eingebaut.
Nun möchte ich aber gerne in meinem knob ein Popup einbauen. Ich fürchte das geht nicht. Oder gibt es einen Weg?
Das war mein Versuch, aber es passiert nichts:
<ftui-knob @click="pop_Pegelstände.open()" [value]="Readings_heizoel:Liter"
Danke schon mal. :)
<ftui-knob [value]="Readings_heizoel:Liter"
min="0"
max="6000"
ticks="10"
type="scale"
unit="Liter"
readonly
has-value-text
value-size="22px"
has-scale-text></ftui-knob>
Zitat von: M.Piet am 09 Mai 2023, 16:09:28Moin,
ich habe nun schon einige Popups eingebaut.
Nun möchte ich aber gerne in meinem knob ein Popup einbauen. Ich fürchte das geht nicht. Oder gibt es einen Weg?
Das war mein Versuch, aber es passiert nichts:
<ftui-knob @click="pop_Pegelstände.open()" [value]="Readings_heizoel:Liter"
Danke schon mal. :)
<ftui-knob [value]="Readings_heizoel:Liter"
min="0"
max="6000"
ticks="10"
type="scale"
unit="Liter"
readonly
has-value-text
value-size="22px"
has-scale-text></ftui-knob>
Hi,
durch das readonly sind pointerevents (auch @click) ohne Funktion.
Durch eine cell geht es dann doch. Bsp.:
<ftui-cell @click="pop_Pegelstände.open()">
<ftui-knob [value]="Readings_heizoel:Liter"
min="0"
max="6000"
ticks="10"
type="scale"
unit="Liter"
readonly
has-value-text
value-size="22px"
has-scale-text></ftui-knob>
</ftui-cell>
LG mr_petz
Gibt es eine Möglichkeit bei einem Knob mehr als einen Wert anzuzeigen?
Mein Anwendungsfall wäre jetzt der momentane Stromverbrauch brutto (echter Verbrauch ohne PV) und netto (Abzüglich PV).
Ich könnte mir aber auch vorstellen dass man min, max , avg oder ähnliches mit anzeigen will.
Option scheint zu sein die "desired value" zu missbrauchen, aber dass ist dann ja nur ein Punkt.
Evtl. eine nützliche Erweiterungsidee.
Hallo zusammen,
ich benötige etwas Unterstützung bei der Formatierung. Ich lasse mir aktuelle die Wettervorhersage für die nächsten 7 Tage anzeigen. Dies funktioniert auch fast immer. Nur wenn bei der Vorhersage die Texte etwas länger sind (s. Wetter-1 für den 22.05.), habe ich ein Darstellungsproblem. Ich wollte deshalb den Text über "scroll" darstellen (s. Wetter-2). Allerdings sieht es so aus, als ob immer eine Leerzeile am Anfang eingefügt wird. Ich muss also immer erst eine Zeile nach unten scrollen (s. Wetter-3). Wie kann ich den "einzeiligen" Text so darstellen, dass dieser direkt oben angezeigt wird?
Hier das Coding:
<ftui-label
[text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1">
</ftui-label>
<ftui-row height="50%">
<ftui-column>
<ftui-label
text="morgens" size="2">
</ftui-label>
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
[condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon">
</ftui-weather>
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5"
[text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C">
</ftui-label>
<ftui-label margin="0.4" scroll padding="1" height="3px"
[text]="WetterProplanta:{{VHS_NR}}_weatherMorning">
</ftui-label>
<ftui-row>
<ftui-label text-align="left" left="55px" style="position:relative;"
text="Max:">
</ftui-label>
<ftui-label text-align="right" left="-55px" style="position:relative;"
[text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C">
</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text-align="left" left="55px" style="position:relative;"
text="Min:">
</ftui-label>
<ftui-label text-align="right" left="-55px" style="position:relative;"
[text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C">
</ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-label
text="Mittags" size="2">
</ftui-label>
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
[condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon">
</ftui-weather>
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5"
[text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C">
</ftui-label>
<ftui-label margin="0.4" scroll padding="1" height="3px"
[text]="WetterProplanta:{{VHS_NR}}_weatherDay">
</ftui-label>
<ftui-row>
<ftui-label text-align="left" left="45px" style="position:relative;"
text="Regen:">
</ftui-label>
<ftui-label text-align="right" left="-40px" style="position:relative;"
[text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%">
</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text-align="left" left="45px" style="position:relative;"
text="Sonne:">
</ftui-label>
<ftui-label text-align="right" left="-40px" style="position:relative;"
[text]="WetterProplanta:{{VHS_NR}}_sun" unit="%">
</ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-label
text="Abends" size="2">
</ftui-label>
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
[condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon">
</ftui-weather>
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5"
[text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C">
</ftui-label>
<ftui-label margin="0.4" scroll padding="1" height="3px"
[text]="WetterProplanta:{{VHS_NR}}_weatherEvening">
</ftui-label>
<ftui-row>
<ftui-label left="20px" style="position:relative;"
text="UV:">
</ftui-label>
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')" left="-20px" style="position:relative;"
[text]="WetterProplanta:{{VHS_NR}}_uv">
</ftui-label>
</ftui-row>
<ftui-label
[text]="">
</ftui-label>
</ftui-column>
</ftui-row>
Viele Grüße
Jürgen
Die selbe Frage hatte ich schon mal weiter oben. Der Tipp war, den String mit "slice" abzuschneiden.
Schaut bei mir so aus:
<ftui-label class="size-2" [text]="{{Device}}:fc{{Day}}_weatherDay | slice(0,16)"></ftui-label>
Die Lösung finde ich nicht so gut da ja die Info einfach abgeschnitten wird.
Bei meiner Lösung wird alles angezeigt. Ich würde aber gerne die Darstellung noch etwas optimieren. Habe aber noch keine Lösung gefunden. Wie sieht es denn bei Dir aus, wenn Du auf "scroll" umstellst?
Viele Grüße
Jürgen
Hi Jürgen,
teste mal das mit fester Höhe.
Musst du dann für alle label der Reihe anwenden...
https://forum.fhem.de/index.php?topic=115259.msg1223426#msg1223426
LG
Hi mr_petz,
ich teste das morgen einmal mit einer anderen Höhenangabe. Bisher hatte ich als feste Höhe immer "3px" angegeben.
Viele Grüße
Jürgen
Es scheint wohl Browser und Systemabhängig zu sein. Auf meinem Testsystem (Ubuntu) sieht es immer etwas anders aus als auf einem pi. Letztendlich muss man mit der festen Höhenangabe etwas experimentieren.
Mein Problem ist damit erst einmal erledigt.
Viele Grüße
Jürgen
Ich möchte die ersten 20 Stellen bei ftui-label [text] haben, bisher sieht das so aus:
<ftui-label [text]="aaaa:bbbb">
Vermutlich macht man das mit Pipe und dann format. Aber wie bekommt man konkret die ersten 20 Zeichen mit "| format" ?
Auch bei part habe ich ein Problem, ich möchte die ersten beiden Worte. part(1,2) geht schon mal nicht. Aber wie geht es richtig?
Danke für die Hilfe.
Zitat von: curt am 26 Mai 2023, 01:23:22Ich möchte die ersten 20 Stellen bei ftui-label [text] haben, bisher sieht das so aus:
<ftui-label [text]="aaaa:bbbb">
Vermutlich macht man das mit Pipe und dann format. Aber wie bekommt man konkret die ersten 20 Zeichen mit "| format" ?
Auch bei part habe ich ein Problem, ich möchte die ersten beiden Worte. part(1,2) geht schon mal nicht. Aber wie geht es richtig?
Das hatten wir gerade erst: #3386 (https://forum.fhem.de/index.php?topic=115259.msg1276536#msg1276536)
<ftui-label [text]="aaaa:bbbb | slice(0,20)">
Hallo an die Pipe-Experten
Ich suche eine Möglichkeit folgendes Reading aufzudröseln und in einzelnen Labels wiederzugeben:
2023-05-27 10:26:01: 26.27m² in 0.46h, finished cleaningDatum klappt bereits
Zeit klappt teilweise, ich bekomme den letzten Doppelpunkt nicht weg. Replace würde ja alle wegnehmen, geht daher nicht so einfach.
Fläche klappt bereits
Dauer kann ich auslesen, würde es aber gerne in Minuten umrechnen. Gibt es für so eine Umrechnung in FTUI3 eine Möglichkeit?
Status klappt bereits
Hallo zusammen,
ich bin jetzt nicht so der Javascript-Experte und auf dem Schlauch stehe ich auch. ;D
Und zwar versuche ich einen HTTP Request bei meinem 3D-Drucker von FTUI3 auszuführen, um diesen an und auszuschalten.
Der Aufruf der Seite
http://duet-1/rr_gcode?gcode=M80 bzw. M81
reicht ja dafür.
Mittels
onclick="javascript:window.open('http://...
kriege ich was hin. Allerdings öffnet sich immer ein Fenster. Wie kann man das denn unterbinden?
Kennen tue ich nur _self, _parent, _blank und _top als Target. Ich bräuchte irgendwie einen _garbage. :)
Gefunden hatte ich noch bei Mozilla Web Docs die send() Method. Aber das bekomme ich auch nicht hin.
Gibt es ein FTUI3-Boardmittel, das mein Vorhaben abdeckt oder eine andere gute Integration?
Danke vorab.
Matthias
Hallo Matthias,
FTUI3 ist mehr oder weniger "nur" eine Benutzeroberfläche für FHEM. Ich würde das ganze erst einmal in FHEM realisieren und dann mit FTUI3 visualisieren. Du möchtest ja wahrscheinlich auch das Ergebnis des http-requests verarbeiten. Eventuell hilft hier httpmod. Hierbei kann ich allerdings nicht helfen.
Viele Grüße
Jürgen
Man könnte das Thema des URL Aufrufs zum Beispiel über ein Dummy (hier mit dem Namen 3d_drucker) und ein Notify lösen.
Der FTUI3 Schalter schaltet den Dummy über [(value)]= ein und aus. Darauf reagiert dann ein Notify wie diese hier:
3d_drucker:on {GetFileFromURL('http://duet-1/rr_gcode?gcode=M80')};set 3d_drucker off
bzw. fürs das Ausschalten
3d_drucker:on {GetFileFromURL('http://duet-1/rr_gcode?gcode=M81')};set 3d_drucker on
Danke.
Damit klappt's prima.
Ich dachte halt, ich könnte auf dummy und notify verzichten. Aber so ist auch gut und pragmatisch.
Ach so, falls es jemanden interessiert: Den Status vom 3D-Drucker hole ich mir über das JsonMod-Modul.
Viele Grüße
Matthias
Morjen,
ich habe da ein kleines Problem. Bei mir läuft ein und dieselbe FTUI3 Instanz auf drei Tablets.
Schalte ich auf einem der drei Tablets einen Button ein, funktioniert das auch soweit. Möchte ich aber den Button auf einem anderen Tablet wieder ausschalten, dann zeigt mir die Toastmessage, daß der Button eingeschaltet wird, ich muß den Button also noch ein zweites Mal antippen um auszuschalten. Sieht also so aus, als wenn die anderen Tablets den Schaltzustand des Buttons nicht mitbekommen.
Hier mal der Code des Buttons:
<!-- Kinoanlage -->
<ftui-grid-tile row="8" col="4" height="1" width="1" shape="round" class="semitransparent">
<ftui-button shape="circle" (value)="bz.kinoanlage" [fill]="bz.kinoanlage:state | map('on: solid, off: outline')">
<ftui-icon name="projector"></ftui-icon>
</ftui-button>
</ftui-grid-tile>
Warum ist das so?
gm
Zitat von: grossmaggul am 01 Juni 2023, 10:15:26Morjen,
ich habe da ein kleines Problem. Bei mir läuft ein und dieselbe FTUI3 Instanz auf drei Tablets.
Schalte ich auf einem der drei Tablets einen Button ein, funktioniert das auch soweit. Möchte ich aber den Button auf einem anderen Tablet wieder ausschalten, dann zeigt mir die Toastmessage, daß der Button eingeschaltet wird, ich muß den Button also noch ein zweites Mal antippen um auszuschalten. Sieht also so aus, als wenn die anderen Tablets den Schaltzustand des Buttons nicht mitbekommen.
Hier mal der Code des Buttons:
<!-- Kinoanlage -->
<ftui-grid-tile row="8" col="4" height="1" width="1" shape="round" class="semitransparent">
<ftui-button shape="circle" (value)="bz.kinoanlage" [fill]="bz.kinoanlage:state | map('on: solid, off: outline')">
<ftui-icon name="projector"></ftui-icon>
</ftui-button>
</ftui-grid-tile>
Warum ist das so?
gm
Ich denke, es müsste so heißen, damit der WErt auch passend gelesen wird:
[(value)]="bz.kinoanlage"Mit Deinem
[fill]="bz.kinoanlage:statekümmerst Du Dich ja nur um die Darstellung.
Das funktioniert leider auch nicht, dann lässt sich der Button gar nicht mehr ausschalten.
Schaltet das Device im FHEM wenigstens korrekt im Hintergrund?
Ja, das Device wird geschaltet.
wenn die Konfiguration mit [(value)] gemacht ist ... wird dann wenigstens auf irgendeinem der Tabletts der Schalter gesetzt, wenn Du den Wert von bz.kinoanlage direkt in FHEM umschaltest?
Sowohl wenn ich die Konfig mit [(value)], als auch nur mit (value) mache und ich schalte in fhem das Device, dann werden auf allen Tablets die Icons entsprechend aktiviert/deaktiviert.
Möglicherweise hat es damit zu tun, daß es sich bei den zu schaltenden Devices um Tasmota/MQTT Devices handelt?
Ich schalte auch noch einen Dummy mit einem "Button", da funktioniert das einwandfrei.
Sorry, kann ich mir so tatsächlich nicht erklären. Laut https://github.com/knowthelist/ftui/#output-binding müsste es ja mit (value) so sein, dass FTUI3 die Werte des Buttons lediglich an FHEM zurückschreibt, aber nicht liest.
Ein [value] hingegen bedeutet, dass FTUI3 die Werte aus FHEM liest, aber (egal, was du am Button drückst) nicht mehr zurückschreibt / in FHEM ändert.
Nur die Kombination [(value)] synchronisiert in beide Richtungen. Und das sollte dann ja auch alle Tabletts entsprechend updaten.
Ich glaube, ich kann Dir hier leider auch nicht wirklich weiterhelfen. Schein ein spezielleres Problem zu sein. :(
Ich habe da auch schon alles Mögliche ausprobiert und komme einfach nicht dahinter, ich vermute es hat mit MQTT was zu tun. Danke Dir trotzdem für Deine Hilfe!!
Hi,
<ftui-grid-tile row="8" col="4" height="1" width="1" shape="round" class="semitransparent">
<ftui-button shape="circle" (value)="bz.kinoanlage" [fill]="bz.kinoanlage:state | map('on: solid, off: outline')" [states]="bz.kinoanlage:state | map('on:off,off:on')">
<ftui-icon name="projector"></ftui-icon>
</ftui-button>
</ftui-grid-tile>
Gruß Andreas
Danke, so klappt's!
Hallo,
nach Jahren mit ftui2 wollte ich jetzt auch langsam mal umrüsten.
Gibt es eine Möglichkeit, den Hintergrund des Bogens beim knob Widget anders einzufärben? Irgendwie komme ich da nicht weiter.
Hi,
versuche es einmal mit lowcolor="0,0,255" mediumcolor="170,0,170" hightcolor="170,0,0" Damit funktioniert es zumindest beim Thermostat.
Hallo,
ich möchte bei einem "label" die Farbe aufgrund eines Vergleichs zweier Readings anpassen.
Reading1 und Reading2 sind gleich => Farbe=weiß
Reading1 und Reading2 sind ungleich => Farbe=rot.
Wer hat einen Tipp?
Viele Grüße
Jürgen
Hi,
in FTUI direkt eher schwierig - mit DM+N aber gut zu realisieren
define DM_red_or_white dummy
define notify_N_red_or_white notify device1:reading_of_interest.*|device2:reading_of_interest.* {if (ReadingsVal("device1","reading_of_interest",undef)) eq (ReadingsVal("device2","reading_of_interest",undef)) {fhem("set DM_red_or_white red";;)} else {fhem("set DM_red_or_white white";;)}}
<ftui-label test="whatever" [color]="DM_red_or_white.state"></ftui-label>
Gruß Andreas
Hi Andreas,
ich hatte schon eine ähnliche Lösung über "userReadings". Das ist aus meiner Sicht noch einfacher. Meine Idealvorstellung ist aber immer noch eine direkt FTUI3-Lösung 8)
Vielleicht hat ja noch jemand eine Idee.
Viele Grüße
Jürgen
Hi,
Zitat von: Jojo11 am 06 Juni 2023, 21:55:30Hallo,
nach Jahren mit ftui2 wollte ich jetzt auch langsam mal umrüsten.
Gibt es eine Möglichkeit, den Hintergrund des Bogens beim knob Widget anders einzufärben? Irgendwie komme ich da nicht weiter.
Knob unterstützt nur folgende Attribute:
startAngle: -210,
endAngle: 30,
value: -1,
desiredValue: -1,
unit: '',
min: 0,
max: 100,
offsetY: 20,
ticks: 10,
step: -1,
valueDecimals: -1,
scaleDecimals: -1,
height: '150',
width: '150',
strokeWidth: 15,
debounce: 200,
hasScale: false,
hasScaleText: false,
hasValueText: false,
hasArc: false,
hasHandle: false,
hasDesired: false,
hasNeedle: false,
type: 'default',
color: 'primary',
valueSize: '2.5em',
unitSize: '1em',
unitOffsetY: 0,
unitOffsetX: 0,
valueOffsetY: 0,
valueOffsetX: 0,
scaleTextOffset: 4,
Das bedeutet nur einfarbig.
Es gibt aber eine Variante, die man im Quelltext der Example Page nachlesen kann
https://knowthelist.github.io/ftui/www/ftui/examples/knob.html
color="cold-hot"Gruß Andreas
Vielen Dank für die Tipps. Evtl habe ich mich missverständlich ausgedrückt. Ich meine den Hintergrund hinter dem Bogen. In ftui2 konnte man das mit
data-bgcolor
einstellen. Dazu kann ich in ftui3 leider kein Beispiel finden.
Hi,
ftui-cell hat ein color Attribut.
ftui-grid-tile auch.
Gruß Andreas
Ich hab's mal rauskopiert (s. Anhang) ;D
Ich meine die Farbe des nicht aktiv "belegten" Bogens - oder wie auch immer man die hellblaue Fläche im Beispiel nennen mag. Ging in V2, schaffe ich nicht in V3.
In V3 ist es ein sehr dunkles Grau (in der mobile Version fürs Handy). Evtl kann man ja diese Grundfarbe ändern (wo wird sie noch verwendet?). Die CSS-Datei des knob hat mich auch mehr verwirrt als aufgeschlaut ::)
Ich würde ein Element gerne mit class-name formatieren. Grundsätzlich kein Problem.
Allerdings würde ich die Formatierung gerne Abhängig verschiedener Deviced/Readings machen.
Geht das irgendwie wie?
Nach der bekannten Syntex sieht es ja so aus:
device:reading | map'(zustand1:formatierung1, zustand2:formatierung2 ...)'"Die beiden Readings sind nicht gleich, ein structure geht also nicht.
Kann man das Attribut nicht einfach doppelt im html-tag angeben oder wird dann nur der letzte ausgeführt?
Zitat von: Jojo11 am 08 Juni 2023, 06:33:04Ich meine die Farbe des nicht aktiv "belegten" Bogens...
Hi,
um den arc einzufärben, kannst du per style Bsp:
style="--knob-outline-color: #222222;"
oder:
style="--knob-outline-color: rgba(255,255,255,0.5);"
oder global in eine user.css anlegen.
LG
knob_arc_color.png
Super, vielen Dank! Genau danach habe ich gesucht.
Vielen Dank für die Arbeit an ftui3.
So habe ich es aktuell umgesetzt, um FHEM auf mein Mobiltelefon zu bekommen. Vielleicht hilft es dem einen oder anderen als Basis für die eigene Umsetzung. Ich habe mich bewusst gegen <ftui-content file=...> entschieden, da es mir zu umständlich war, bei Änderungen jede content-Seite im Firefox neu zu laden.
<!DOCTYPE html>
<html>
<head>
<script>
// Pipe-helper to set any Values lower than threshold to Zero
const thresholdZero = value => input => Math.abs(Number(input)) <= value ? input * 0 : input;
</script>
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/bright-theme.css" rel="stylesheet" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>FHEM</title>
</head>
<body>
<ftui-menu timeout="0" id="ftui_menu_1">
<ftui-tab view="View1" title="Home" active>
<ftui-icon name="home"></ftui-icon>
<ftui-label margin="1" text-align="left">Home</ftui-label>
</ftui-tab>
<ftui-tab view="View2" title="E3DC">
<ftui-icon name="sun2"></ftui-icon>
<ftui-label margin="1" text-align="left">E3DC</ftui-label>
</ftui-tab>
<ftui-tab view="View3" title="Dimplex">
<ftui-icon name="thermometer-3"></ftui-icon>
<ftui-label margin="1" text-align="left">Dimplex</ftui-label>
</ftui-tab>
</ftui-menu>
<!--
Tab View Toolbar Header
-->
<ftui-main>
<ftui-view>
<ftui-view-toolbar slot="header">
<ftui-menu-button menu="ftui_menu_1" slot="start"></ftui-menu-button>
<ftui-tab-title @click="javascript:window.location.reload(true);" color="dark" class="size-4" text-align="left">
</ftui-tab-title>
</ftui-view-toolbar>
<!--
Tab View 01
-->
<ftui-tab-view id="View1">
<ftui-view-section>
<ftui-label class="size-3" margin="1" color="dark">Rollladen-Steuerung</ftui-label>
<ftui-view-item>
Wohnzimmer
<ftui-button slot="end" class="size-3" [(value)]="Wohnzimmer.Rollladen.Nachtposition.Switch"
states="hoch,runter"
[fill]="Wohnzimmer.Rollladen.Nachtposition.Switch | map('hoch: outline, runter: solid')">
<ftui-icon
[name]="Wohnzimmer.Rollladen.Nachtposition.Switch | map('runter:window-shutter, hoch:window-shutter-open')">
</ftui-icon>
</ftui-button>
</ftui-view-item>
<ftui-view-item>
Schlafzimmer
<ftui-button slot="end" class="size-3" [(value)]="Schlafzimmer.Rollladen.Nachtposition.Switch"
states="hoch,runter"
[fill]="Schlafzimmer.Rollladen.Nachtposition.Switch | map('hoch: outline, runter: solid')">
<ftui-icon
[name]="Schlafzimmer.Rollladen.Nachtposition.Switch | map('runter:window-shutter, hoch:window-shutter-open')">
</ftui-icon>
</ftui-button>
</ftui-view-item>
<ftui-label class="size-3" margin="1" color="dark">Lichtschalter</ftui-label>
<ftui-view-item>
TV Lampe
<ftui-button slot="end" class="size-3" [(value)]="HM_2C4DDE" states="on,off"
[fill]="HM_2C4DDE:state | map('off: outline, on: solid')">
<ftui-icon [name]="HM_2C4DDE:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
</ftui-view-item>
<ftui-view-item>
Flur EG
<ftui-button slot="end" class="size-3" [(value)]="HM_2C474C" states="on,off"
[fill]="HM_2C474C:state | map('off: outline, on: solid')">
<ftui-icon [name]="HM_2C474C:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
</ftui-view-item>
<ftui-view-item>
Flur OG
<ftui-button slot="end" class="size-3" [(value)]="HM_2DBC36_Sw" states="on,off"
[fill]="HM_2DBC36_Sw:state | map('off: outline, on: solid')">
<ftui-icon [name]="HM_2DBC36_Sw:state | map('on:lightbulb-on, off:lightbulb')">
</ftui-icon>
</ftui-button>
</ftui-view-item>
</ftui-view-section>
</ftui-tab-view>
<!--
Tab View 02
-->
<ftui-tab-view id="View2">
<ftui-view-section>
<ftui-label class="size-3" margin="1" color="dark">E3DC-Werte</ftui-label>
<ftui-view-item>
<ftui-icon slot="start" name="sun2" color="yellow"></ftui-icon>
Solarproduktion heute
<ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_DC_POWER" unit="kWh"></ftui-label>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="home" color="red"></ftui-icon>
Hausverbrauch heute
<ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_CONSUMPTION" unit="kWh"></ftui-label>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="battery-3" color="blue"></ftui-icon>
Batterie-Level aktuell
<ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_BAT_CHARGE_LEVEL" unit="%"></ftui-label>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="plug" color="primary"></ftui-icon>
Autarkie aktuell
<ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_AUTARKY" unit="%"></ftui-label>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="plug" color="primary"></ftui-icon>
Autarkie 2023
<ftui-label slot="end" color="blue" [text]="MQTT_S10Client:2023_DB_AUTARKY" unit="%"></ftui-label>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="plus" color="green"></ftui-icon>
Einspeisung heute
<ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_GRID_POWER_IN" unit="kWh"></ftui-label>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="minus" color="brown"></ftui-icon>
Netzentnahme heute
<ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_GRID_POWER_OUT" unit="kWh"></ftui-label>
</ftui-view-item>
<ftui-view-item>
<ftui-pvvis pvmax=7000 [soc]="S10E:Batterieladezustand"
[feed-receive]="S10E:Netzleistung | multiply (-1) | thresholdZero(30)"
[charge-discharge]="S10E:Batterieleistung | thresholdZero(30)" [produce]="S10E:Solarleistung"
grid-icon="pylon" width="300px" has-no-wallbox [home-consume-tdy]="MQTT_S10Client:TODAY_DB_CONSUMPTION"
[grid-consume-tdy]="MQTT_S10Client:TODAY_DB_GRID_POWER_OUT"
[pv-prod-tdy]="MQTT_S10Client:TODAY_DB_DC_POWER" unit-sum=" kWh" batmax="12600">
</ftui-pvvis>
</ftui-view-item>
<ftui-view-item>
</ftui-view-item>
</ftui-view-section>
</ftui-tab-view>
<!--
Tab View 03
-->
<ftui-tab-view id="View3">
<ftui-view-section>
<ftui-label class="size-3" margin="1" color="dark">Aktuelle Werte</ftui-label>
<ftui-view-item>
<ftui-icon slot="start" name="thermometer-3" color="blue"></ftui-icon>
Außentemp.
<ftui-label class="cell size-1" slot="end" color="blue" [text]="dim_Aussentemperatur:state_ftui3" unit="°C"></ftui-label>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="shower" color="brown"></ftui-icon>
Warmwassertemperatur
<ftui-label slot="end" color="blue" [text]="dim_Warmwassertemperatur:state" unit="°C"></ftui-label>
</ftui-view-item>
<ftui-label class="size-3" margin="1" color="dark">Dimplex Steuerung</ftui-label>
<ftui-view-item>
<ftui-icon slot="start" name="repeat" color="brown"></ftui-icon>
WW-Umwälzung
<ftui-dropdown id="opt1" [value]="HM_2C4F29:state" (value)="set HM_2C4F29 ">
<option value="on">An</option>
<option value="off">Aus</option>
<option value="on-for-timer 1800">30 Minuten</option>
<option value="on-for-timer 3600">1 Stunde</option>
<option value="on-for-timer 7200">2 Stunden</option>
<option value="on-for-timer 10800">3 Stunden</option>
<option value="on-for-timer 14400">4 Stunden</option>
<option value="on-for-timer 18000">5 Stunden</option>
<option value="on-for-timer 21600">6 Stunden</option>
<option value="on-for-timer 25200">7 Stunden</option>
<option value="on-for-timer 28800">8 Stunden</option>
</ftui-dropdown>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="thermometer-3" color="brown"></ftui-icon>
WW-Soll
<ftui-dropdown id="opt2" [value]="dim_WarmwasserSollTemperatur:state"
(value)="set dim_WarmwasserSollTemperatur ">
<option value="15">15 Grad</option>
<option value="48">48 Grad</option>
<option value="49">49 Grad</option>
<option value="50">50 Grad</option>
<option value="55">55 Grad</option>
<option value="60">60 Grad</option>
</ftui-dropdown>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="retweet" color="brown"></ftui-icon>
WW Hysterese
<ftui-dropdown id="opt3" [value]="dim_WarmwasserHysterese:state" (value)="set dim_WarmwasserHysterese ">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="15">15</option>
</ftui-dropdown>
</ftui-view-item>
<ftui-view-item>
<ftui-icon slot="start" name="toggle-on" color="blue"></ftui-icon>
Betriebsmodus
<ftui-dropdown id="opt4" [value]="dim_Betriebsmodus" (value)="set dim_Betriebsmodus ">
<option value="Sommer">Sommer</option>
<option value="Auto">Auto</option>
<option value="2teWaermeerzeuger">2 WE</option>
</ftui-dropdown>
</ftui-view-item>
</ftui-view-section>
</ftui-tab-view>
</ftui-view>
</ftui-main>
</body>
Mir ist aufgefallen, dass beim knob Widget mit Farbverlauf dieser Verlauf nicht mit der eingestellten Drehung mitskaliert/-dreht:
<ftui-knob value="500" color="ok-warning-alert" has-arc min="0" max="1000" start-angle="-210" end-angle="-90"></ftui-knob>
<ftui-knob value="500" color="ok-warning-alert" has-arc min="0" max="1000"></ftui-knob>
<ftui-knob value="500" color="ok-warning-alert" has-arc min="0" max="1000" start-angle="-90" end-angle="30"></ftui-knob>
Ist das so gewollt oder habe ich mir vielleicht doch unbewusst irgendwo etwas zerschossen?
Kann man eigentlich in map und/oder step auch RGB- oder html-Farbwerte angeben irgendwie?
Wenn ich in der user.css z.B. Folgendes angebe, wird das in map ignoriert ::)
:root {
--myred: #ad3333;
}
<ftui-icon name="battery" [color]="dummy | map('-1:myred, 0:black')" >
Du definierst so "nur" eine Variable:
Zitat von: Jojo11 am 15 Juni 2023, 21:28:44Wenn ich in der user.css z.B. Folgendes angebe, wird das in map ignoriert ::)
:root {
--myred: #ad3333;
}
Du musst es allerdings noch einer Farbe hinzufügen, analog zu den color-attributes (https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/color-attributes.css), in etwa so:
:root {
--myredcolor: #ad3333;
}
[color="myread"] {
--color-base: var(--myredcolor);
--color-contrast: var(--primary-contrast-color);
}bzw einfacher wenn du myredcolor nicht mehrfach benötigst:
[color="myread"] {
--color-base: #ad3333;
--color-contrast: var(--primary-contrast-color);
}
Jetzt habe ich es verstanden :)
Vielen Dank!
Und das nächste Thema, was beim Umstieg auffällt:
data-fix="3"Bei FTUI2 führte ein 3,200 zu 3,200 - bei FTUI3 werden die Nullen nicht aufgefüllt, so dass aus 3,200 ein 3,2 wird. Kann ich das irgendwo ändern oder umgehen? Wenn man mehrere Zahlen untereinander stehen hat, sieht das so zerpflückt aus ::)
das müsste mit der pipe fix(n) (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L14) gehen.
Zitat von: yersinia am 16 Juni 2023, 11:40:51das müsste mit der pipe fix(n) (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L14) gehen.
Top! Funktioniert, danke. So langsam fange ich an, diese pipes zu verstehen :)
Nachgefragt, weil es mir grade erst aufgefallen ist:
Hat sich bei den Popups etwas geändert, weil meine nicht mehr halbtransparent sind (Parameter opacity=0.7 zum Beispiel)
@Draco
Es wurde nichts geändert.
Das Attribute opacity ist für das drumherum (overlay) des popup zuständig und ist standardmäßig 0.5 und wird so angegeben:
opacity="0.6"
Das popup ansich ist nicht transparent oder teiltransparent.
LG mr_petz
Kopfkratz, ich könnte schwören, dass die Popups auch wahlweise leicht transparent waren :o
Dann hast du eine CSS-Regel oder Styleeintrag.
Hallo in die Runde,
ich suche eine Möglichkeit, bei den Step-Angaben auf Readings zB in einem Dummy zu zugreifen, also zB sowas:
<ftui-icon
[name]="dummy1 | map('on: lightbulb-on, off: lightbulb')"
[color]="ftuitest | step('[dummy:schwellwert_rot]: success, [dummy:schwellwert_warning]: warning, [dummy:schwellwert_danger]: danger')">
</ftui-icon>
Das hätte den Charme, die Farben ohne Änderung am HTML anpassen zu können.
Danke und Gruß
Ralph
@mega
Eine Option wäre über style zugehen. Bsp.:
[style]="dummy999 | map('schwellwert_rot:`color: var(--success);`, schwellwert_warning:`color: var(--warning);`')"
besser wäre da aber map.
Ich verstehe nur nicht ganz dein Anliegen? Mit:
[color]="dummy | map('schwellwert_rot: success, schwellwert_warning: warning, schwellwert_danger: danger')">
sollte es doch auch gehen...
LG
Ich habe mal wieder ein Problem, es muss in Abhängigkeit geschaltet werden. Es geht um Folgendes:
Ich habe ein händisch zu öffnendes Velux-Dachfenster mit automatischem Rollladen. Nun soll der Rollladen nur geschlossen werden, wenn ein Öffnungsmelder das Fenster selbst als geschlossen meldet.
So wird das Fenster geschlossen:
<ftui-icon name="arrow-circle-down" class="size-0"
@click="javascript:sendFhem('set {{Roll}} pct 0')">
Der Öffnungsmelder sei die Device "Dachfenster", der state kennt den Zustand "closed". Im Grunde müsste es so etwas wie "@click="javascript:sendFhem('if Dachfenster closed then set {{Roll}} pct 0')" sein. Wie geht das richtig? Wie setzt man das um?
Danke für die Hilfe.
Zitat von: curt am 19 Juli 2023, 01:07:22Der Öffnungsmelder sei die Device "Dachfenster", der state kennt den Zustand "closed". Im Grunde müsste es so etwas wie "@click="javascript:sendFhem('if Dachfenster closed then set {{Roll}} pct 0')" sein. Wie geht das richtig? Wie setzt man das um?
Ich würde es naiverweise einen Dummy anlegen, der den Schalter für das gesamte System darstellt. Immer wenn dann der Dummy auf "close" gesetzt wird, würde ich im Hintergrund in FHEM ein DOIF (https://wiki.fhem.de/wiki/DOIF) triggern, das genau das, was Du beschreibst, prüft und dann den Schaltvorgang auslöst (oder eben auch nicht).
Den Dummy selber kannst Du dann als ganz "normalen" Schalter in FTUI einbinden.
VG, Andreas
Zitat von: curt am 19 Juli 2023, 01:07:22Ich habe mal wieder ein Problem, es muss in Abhängigkeit geschaltet werden. Es geht um Folgendes:
Ich habe ein händisch zu öffnendes Velux-Dachfenster mit automatischem Rollladen. Nun soll der Rollladen nur geschlossen werden, wenn ein Öffnungsmelder das Fenster selbst als geschlossen meldet.
So wird das Fenster geschlossen:
<ftui-icon name="arrow-circle-down" class="size-0"
@click="javascript:sendFhem('set {{Roll}} pct 0')">
Der Öffnungsmelder sei die Device "Dachfenster", der state kennt den Zustand "closed". Im Grunde müsste es so etwas wie "@click="javascript:sendFhem('if Dachfenster closed then set {{Roll}} pct 0')" sein. Wie geht das richtig? Wie setzt man das um?
Danke für die Hilfe.
Hallo curt,
ich habe dies so gelöst:
Rollo_Buero:pct:.*
IF ([HMIP_SWDO_0000DA498D425C:state] eq "open")
(set Sonos_Buero Speak 20 de |Das_Bürofenster_ist_offen.mp3|,
{my $old_pct = OldReadingsVal("Rollo_Buero","pct","0");;
fhem("set Rollo_Buero pct $old_pct")})
ELSE
(set HMCCU3 var Rollo_Buero $EVTPART1,
get HMCCU3 vars R.*,
setreading Rollo_Buero_WT currValue $EVTPART1,
IF ([Rollo_Buero:state] eq "pct 100")
(sleep 2,
set HM_MOD_Re_8_OEQ0206895_5 on-for-timer 0.5),
IF ([Rollo_Buero:state] eq "pct 75")
(sleep 15,
set HM_MOD_Re_8_OEQ0206895_5 on-for-timer 0.5,
sleep 40,
set HM_MOD_Re_8_OEQ0206895_6 on-for-timer 13),
IF ([Rollo_Buero:state] eq "pct 50")
(sleep 25,
set HM_MOD_Re_8_OEQ0206895_5 on-for-timer 0.5,
sleep 40,
set HM_MOD_Re_8_OEQ0206895_6 on-for-timer 24),
IF ([Rollo_Buero:state] eq "pct 25")
(sleep 15,
set HM_MOD_Re_8_OEQ0206895_6 on-for-timer 0.5,
sleep 40,
set HM_MOD_Re_8_OEQ0206895_5 on-for-timer 11),
IF ([Rollo_Buero:state] eq "pct 0")
(sleep 2,
set HM_MOD_Re_8_OEQ0206895_6 on-for-timer 0.5)
)Der aktuelle Status des Rollos wird über ein Dummy verwaltet:
defmod Rollo_Buero dummy
attr Rollo_Buero userattr Rollo Rollo_map structexclude
attr Rollo_Buero alexaName Rollo Büro;; Rollo im Büro
attr Rollo_Buero alias Rollo Büro
attr Rollo_Buero devStateIcon {my $state = ReadingsVal("HMIP_SWDO_0000DA498D425C","state"," ");;;; if ($state eq "open") {"pct.100:fts_roof_window_shutter_0\@red pct.75:fts_roof_window_shutter_02\@red pct.50:fts_roof_window_shutter_05\@red pct.25:fts_roof_window_shutter_07\@red pct.0:fts_roof_window_shutter_10\@red pct.*:unknown"} else {"pct.100:fts_roof_window_shutter_0 pct.75:fts_roof_window_shutter_02 pct.50:fts_roof_window_shutter_05 pct.25:fts_roof_window_shutter_07 pct.0:fts_roof_window_shutter_10 pct.*:unknown"}}
attr Rollo_Buero event-on-change-reading .*
attr Rollo_Buero genericDeviceType blind
attr Rollo_Buero group HM Funkschalter
attr Rollo_Buero homebridgeMapping clear CurrentPosition=pct,minValue=0,maxValue=100,minStep=25\
TargetPosition=pct,minValue=0,maxValue=100,minStep=25,cmd=pct\
OpenClose=state,cmdOpen=pct 100,cmdClose=pct 0
attr Rollo_Buero icon it_remote@black
attr Rollo_Buero oldreadings pct
attr Rollo_Buero readingList state
attr Rollo_Buero room Alexa,Büro,Schaltzentrale
attr Rollo_Buero setList pct:100,75,50,25,0
attr Rollo_Buero sortby 01
attr Rollo_Buero userReadings pct {ReadingsNum($name,"state","0")}, Fensterstatus {ReadingsVal("HMIP_SWDO_0000DA498D425C","state","undefined")}, trigger
attr Rollo_Buero webCmd pct
attr Rollo_Buero webCmdLabel Prozent (offen) :Viele Grüße
Jürgen
Ich hatte mir das einfacher erhofft. Ok, dann mit dummy. Danke auch für das Beispiel!
Ich habe mir das nochmal angesehen und hoffe immer noch, dass es einfacher geht. Ich habe daher eine Frage zum Konstrukt @click="javascript:sendFhem:
Innerhalb FHEMWEB funktioniert auf der Kommandozeile
IF ([Heizungsraum:state] eq ´closed´) (set Velux_5 pct 0)'
Nun könnte man auf die Idee kommen, diese Zeile bei FTUI3 durchzureichen:
@click="javascript:sendFhem('IF ([Heizungsraum:state] eq "closed") (set Velux_5 pct 0)')">
Das geht nicht. Anzunehmen ist, dass er die verschachtelten Anführungszeichen nicht mag. Wenn ich die Anführungszeichen um closed maskiere ( \"closed\" ) funktioniert es allerdings auch nicht. Auch ( ´closed´ ) funktioniert nicht.
Mache ich da etwas falsch? Oder ist das bei @click="javascript:sendFhem so nicht vorgesehen?
@curt
Du hattest schon den richtigen Riecher ;D
so geht dein Wunsch (auch ohne vorangesetzten javascript:):
@click="sendFhem(`IF ([Heizungsraum:state] eq 'closed') (set Velux_5 pct 0)`)"
so habe ich getestet:
@click="sendFhem(`IF ([dummy:state] eq 'on') (set dummy6 off)`)"
Es kommt auf die backquotes an...
LG
Zitat von: mr_petz am 24 Juli 2023, 19:54:45Du hattest schon den richtigen Riecher ;D
Pffft. Garnix hatte ich. Außer irgendwann schlechte Laune.
Zitat von: mr_petz am 24 Juli 2023, 19:54:45so geht dein Wunsch (auch ohne vorangesetzten javascript:):
Es ist toll: Wenn nichts mehr geht, kommst Du um die Ecke und hast den richtigen Trick parat. Sehr herzlichen Dank!
Habe eine Frage, würde gerne aus FTUI 3 fhem Neustarten:
wie muss denn ein Button aussehen, wenn ich einen Befehl absetzen möchte, der nicht set vorangestellt hat?
<ftui-button cmd="shutdown restart" fill="">
<ftui-icon name="power-off" size="2"></ftui-icon>
</ftui-button> funktioniert nicht, in der Referenz finde ich auch nichts. (Früher in FTUI2 war es mal: data-fhem-cmd)
Schonmal vielen lieben Dank,
Grüße
Habs gefunden bzw. hinbekommen:
Zwei Möglichkeiten:
<ftui-icon name="power-off" size="2" onclick="ftuiApp.fhemService.sendCommand('shutdown restart')"></ftui-icon>
<ftui-icon name="power-off" size="2" @click="sendFhem('shutdown restart')"></ftui-icon>
Zitat von: mr_petz am 24 Juli 2023, 19:54:45@click="sendFhem(`IF ([Heizungsraum:state] eq 'closed') (set Velux_5 pct 0)`)"
Also das funktioniert:
@click="javascript:sendFhem('set {{Putzi}} reconnect; set {{Putzi}} start')"
Nun geht es um eine Erweiterung: Das ist ein Dach-Klappfenster mit Rollladen und die Teuerste fordert, dass das Fenster zu ist, wenn der Rollladen herunterfährt. Kein Problem, ich ... scheitere so:
Da geht ELSE nicht:@click="javascript:sendFhem(`IF ([{{Klapp}}:state] eq 'off') (set {{Roll}} down) ELSE ('set {{Klapp}} down;; sleep 50;; set {{Roll}} down')`)"
Die Klammerung ist, weil das ein Template ist. Die Klammern werden korrekt aufgelöst. Der IF-Teil funktioniert. Aber auch nur dann, wenn doppelte ";;" im ELSE-Teil sind. Der ELSE-Teil wird dann insoweit akzeptiert als IF korrekt abgearbeitet wird. Aber wenn die Bedingung zum ELSE-Teil geht, wird ELSE
nicht abgearbeitet.
Weiß jemand, wie das richtig geht?
@curt
Es kommt mal wieder jemand um die Ecke, damit du nicht wieder schlechte Laune bekommst :D
Mein Test:
@click="sendFhem(`IF ([dummy:state] eq 'on') (set dummy6 on) ELSE (sleep 10, set dummy on, sleep 10, set dummy6 off)`)"
in deinem fall müsste es so gehen:
@click="sendFhem(`IF ([{{Klapp}}:state] eq 'off') (set {{Roll}} down) ELSE (set {{Klapp}} down, sleep 50, set {{Roll}} down)`)"
Komma statt Semikolon...
ps. sleep hat ein Problem mit doppelten ;
nochmal ps. wenn curt es bestätigt, dann die WIKI-User bitte mit aufnehmen!
LG
Zitat von: mr_petz am 26 Juli 2023, 09:04:34in deinem fall müsste es so gehen:
@click="sendFhem(`IF ([{{Klapp}}:state] eq 'off') (set {{Roll}} down) ELSE (set {{Klapp}} down, sleep 50, set {{Roll}} down)`)"
Komma statt Semikolon...
Ok, auf Komma wäre ich nicht gekommen, eher noch auf "ö" als Trenner ... Das Konstrukt sorgt nun dafür, dass der IF-Zweig bei erfüllter Bedingung ausgeführt wird. Leider wird der ELSE-zweig bei nicht erfüllter Bedingung
nicht ausgeführt.
Damit als Fehler die Befehlsfolge ausgeschossen wird, habe ich ELSE vereinfacht:
@click="sendFhem(`IF ([{{Klapp}}:state] eq 'off') (set {{Roll}} down) ELSE ('set {{Klapp}} down)`)"
Auch in diesem Fall wird ELSE leider nicht ausgeführt. Hast Du da eine Idee? Also ob ELSE grundsätzlich weggetan wird oder ob uns noch ein Wunderzeichen fehlt?
???
Mein test geht.
Du hast meine Vorgabe kopiert?
Oder hattest du die Hochkommas drin gelassen? Die müssen raus!
@click="sendFhem(`IF ([{{Klapp}}:state] eq 'off') (set {{Roll}} down) ELSE (set {{Klapp}} down, sleep 50, set {{Roll}} down)`)"
Bei deiner Vereinfachung nach Else vor set das Hochkomma raus nehmen!
LG
Edit:
ELSE Test als animiertes Gif angehangen.
Hier ist die obere Lampe dummy und die untere dummy6.
Habe die Zeit nur auf 3 sec. gesetzt.
Zitat von: mr_petz am 27 Juli 2023, 14:38:18Du hast meine Vorgabe kopiert?
Na selbstverständlich. Also vermutlich. Ähmmm. Oh. Nein.
:-\
Zitat von: mr_petz am 27 Juli 2023, 14:38:18Oder hattest du die Hochkommas drin gelassen? Die müssen raus!
Jetzt sind sie raus. Und jetzt funktioniert das alles wunderfein.
Danke!
Zitat von: curt am 27 Juli 2023, 22:37:50Zitat von: mr_petz am 27 Juli 2023, 14:38:18Du hast meine Vorgabe kopiert?
Na selbstverständlich. Also vermutlich. Ähmmm. Oh. Nein.
:-\
Zitat von: mr_petz am 27 Juli 2023, 14:38:18Oder hattest du die Hochkommas drin gelassen? Die müssen raus!
Jetzt sind sie raus. Und jetzt funktioniert das alles wunderfein. Danke!
Ok... Gott sei Dank... schwere Geburt!
Bitte die IF/ELSE mit eintragen ins Wiki:
https://wiki.fhem.de/wiki/FTUI3_Best_Practices
Hier Bsp. von einem Template:
@click="sendFhem(`IF ([{{Klapp}}:state] eq 'off') (set {{Roll}} down) ELSE (set {{Klapp}} down, sleep 50, set {{Roll}} down)`)"
LG
Hier also der Wiki Artikel dazu:
Wiki (https://wiki.fhem.de/wiki/FTUI3_Befehle_an_FHEM_senden)
Danke andreas_r!
Kleine Erwähnung fehlt leider. Klapp und Roll in doppelt geschweiften Klammern sind von einem Contenttemplate und keine direkten Devices als solches.
Könntest du bitte das noch ergänzen/abändern?
Danke un LG
Danke mr_petz fürs Kontrollieren. Ist hiermit korrigiert.
Hallo!
Wenn ich auf das tabletui mit der IP-Adresse zugreife, läuft alles einwandfrei. Wenn ich aber mit einer Domain zugreifen möchte, werden die Icons nicht angezeigt "Undefined". Gibt es dafür eine Lösung?
LG
Hallo zusammen,
erstmal Danke für das FTUI3 und dieses informative Forum dazu.
Ich stelle aktuelle alles vom 2 er auf das 3er um meine Frage wie kann ich
diese funktion
<div data-type="push" data-background-icon="none" data-icon="fs-system_fhem" data-url="http://192.168.2.3:8083/fhem"></div>im FTUI3 umsetzen um wieder auf die Fhem Oberfläche zurück zukommen?
@Ingo298
Du kannst es so erstellen:
https://forum.fhem.de/index.php?topic=115259.msg1207098#msg1207098
id wäre entweder eine url aus einem Reading oder du trägst da die url ein. Geht glaube nur mit a tag.
LG
Bsp.
<a id="192.168.2.3:8083/fhem" onclick="javascript:window.open('http://'+this.id,'_blank');return false;">Fhem</a>
Sollte funzen. Ungetestet...
Edit.
Oder so mit der pipe prepend():
https://forum.fhem.de/index.php?topic=115259.msg1207188#msg1207188
Ist schon ne weile her...
Zitat von: mr_petz am 17 August 2023, 15:02:54Du kannst es so erstellen:
https://forum.fhem.de/index.php?topic=115259.msg1207098#msg1207098
Danke hat geklappt
Zitat von: Ingo298 am 18 August 2023, 12:28:37Danke hat geklappt
Sehr gut...
Ich habe heute mehr Zeit gehabt. Das wären die aktuellen Lösungen mit ftui3 Mitteln:
<ftui-button @click="open('http://192.168.2.3:8083/fhem')">FHEM in new Tab</ftui-button>
<ftui-button @click="open('http://192.168.2.3:8083/fhem','_self')">FHEM in same Tab</ftui-button>
Müsste auch als ftui-icon funzen.
So kannst du auch Größe, Farben, Icon´s besser an ftui3 anpassen.
LG
Hey, gibt es eventuell die Möglichkeit, in die chart.component.js meine kleine Modifikationd dauerhaft einzubinden?
( https://forum.fhem.de/index.php?topic=117779.msg1275303#msg1275303 )
Es handelt sich lediglich um eine weitere Darstellungsoption, weiter nichts.
Hallo,
Ich finde die FTUI3 total spannend, und bin gerade dabei ein neues Dashboard zu bauen. Hier im Thread finde ich Beispiele, die ich gerne ausprobieren würde, wie z.b. ftui-icon-multicolor die aus dem Jahr 2020 kommen, die funktionieren aber nicht. Gibt es Unterschiede zwischen der eingecheckten Version und Test Versionen, über die hier diskutiert wird? Ich habe da auf den ersten Pages nichts gefunden, kann aber unmöglich alle 200 Seiten lesen. (Kommt vielleicht noch Stückweise).
Vielen Dank schon mal für Eure Arbeit und das teilen der Erfahrungen.
Viele Grüße
Oliver
Hi Oliver,
das ist nicht im offiziellen Repo.
Das ist bei Thyraz zu finden:
https://github.com/Thyraz/ftui/tree/master/components/icon
Ob das noch funktioniert....?
LG
Hallo zusammen,
habe ich einen Denkfehler oder ist hier tatsaechlich ein Bug in der pipe 'contains' und ihr Verhalten ist invertiert?
const contains = value => input => String(input).indexOf(value) < 0 ? true : false;
Das Resultat der Pipe ist true, wenn der String
nicht enthalten ist (indexOf < 0).
Es wuerde mich allerdings wundern, wenn das niemand vorher bemerkt haette.
Lt. Doku auf https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)
ZitatReturn value
The index of the first occurrence of searchString found, or -1 if not found.
Eigentlich waere es dann doch logisch, wenn contains sich genau umgekehrt verhalten wuerde, oder?
Gruss
/elle
@elle
Die pipe contains habe ich nie ins Auge gefasst, aber sehe ich wie du.
Wenn x<0 sollte false raus kommen.
LG
Edit:
Danke @yersinia für den PR.
ps. Was macht die pipe minusBlue bzw. für welchen Anwendungsfall ist sie gedacht?
Hello,
arbeite mich gerade auch in das tolle FTUI3 an und habe schon viel hinbekommen.
Jetzt wollte ich wissen ob irgendwie folgendes geht:
ich habe über ftui image mein Kamerabild eingeblendet.
Jetzt würde ich gerneirgendwo in der Ecke eine Art "overlapping" haben mit einem icon was meine "motion" vom Bewgungssensor anzeigt. Also konkret: läuft da jemand geade durchs Kamerabild und mein Motionsensor nimmt es war wäre es cool wenn ein Männchen oder so im Bild oben Links z.b. blinken würde.
Hat jemand Ahnung ob sowas umsetzbar wäre? Müsste ja mit ftui label gehen, aber das kann ich ja nicht "über das bild" legen.. oder ich weiß nicht wie es geht :D Danke für Ideen!y
Hi @Andre09,
schau dir das relative Bsp. an:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/image.html#L105
Demo (das mit den Flugzeuge):
https://knowthelist.github.io/ftui/www/ftui/examples/image.html
Damit geht es.
LG
Zitat von: mr_petz am 26 September 2023, 12:40:54Hi @Andre09,
schau dir das relative Bsp. an:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/image.html#L105
Demo (das mit den Flugzeuge):
https://knowthelist.github.io/ftui/www/ftui/examples/image.html
Damit geht es.
LG
danke dir. Habes es hinbekommen, aber scheiter noch an Änderung der Größe (Anfänger wie gesagt - wie bekomme ich das Icon in dem Zusammenhang größer?)
<ftui-image src="http://xxxx/Streaming/Channels/1/httpPreview">
<ftui-icon [name]="hueBridge1_HUESensor126:state | map('motion: street- view, nomotion: ')" size="large" color="red" left="10%" top="80%"
[class-name]="hueBridge1_HUESensor126:state | map('motion:blink,nomotion:')" >
</ftui-icon>
Entweder mit class Bsp.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/icon.html#L105
oder mit size Bsp.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/icon.html#L162
Schau dir am besten immer die examples an, da sieht man schon viel...
LG
Zitat von: mr_petz am 26 September 2023, 21:05:19Entweder mit class Bsp.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/icon.html#L105
oder mit size Bsp.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/icon.html#L162
Schau dir am besten immer die examples an, da sieht man schon viel...
LG
Danke dir. Klappt soweit.
Wo ich aber überhaupt nicht weiterkomme.... Vorher konnte ich Readings abfragen mit "!Test" also bei "alles außer Test mache das". Wie krieg ich das in der Map Funktion hin. Da klappt das !Test nicht. Ich möchte also z.B. Icon 1 wenn Wert X = "test" und Icon 2 wenn Wert X nicht-"Test". Wie kann ich das nicht umsetzen?
2. Frage: Wenn ich ein Label abfrage, konnte ich vorher autohide setzen. Also wenn ein bestimmter WErt da steht wird er nicht angezeigt.
Hintergrund ist, das ich Abfrage wann der Regen beginnt. Ist kein regen gemeldet soll ein anderes Icon kommen als beim regen. Und ist da Regen, soll auch die Beginnzeit da stehen. Aber nicht "unknown" wenn kein regen ist ;)
So war das vorher mal...
<div data-type="symbol"
data-device="BR"
data-get="rainBegin"
data-get-on="unknown"
data-get-off="!on"
data-icon="wi wi-rain"
data-on-color="black"
data-off-color="white"
class="big top-narrow ">
</div>
</div>
<div class="col-1-2">
<div data-type="label"
data-device="BR"
data-get="rainBegin"
data-hide-on="unknown"
data-color="white"
class="autohide big thin">
</div>
<div data-type="label"
data-device="BR"
data-get="rainEnd"
data-hide-on="unknown"
data-color="white"
class="autohide big thin">
also zusammengefasst fehlt mir die Umsetzung von "autohide" und von der Abfrage mit "!"
Hallo Andreas,
ich mache das z.B. so:
| map('2|3|4|5:false, .*:true')"
Mit "hidden" könnte es so aussehen:
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('1:false, .*:true')"
id="Warn_1" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_1">
</ftui-content>
<ftui-label color="green" size="4" [hidden]="Unwetterzentrale:WarnCount | map('0:false, .*:true')"
text="Aktuell keine Warnmeldungen">
</ftui-label>
Viele Grüße
Jürgen
Ich antworte auch und gebe meinen Senf dazu :)
zu 1. Bsp.:
<ftui-icon [name]="Reading | map('Test:icon1,.*:icon2')"></ftui-icon>
zu 2. Bsp.:
<ftui-label [text]="Reading" [hidden]="Reading | isNot('regen')"></ftui-label>
hier wird aber immer die Zeilenhöhe verändert.
Um Abhilfe zu schaffen, eine feste Höhe angeben in einer row.
Bsp:
<ftui-row height="20px">
<ftui-label [text]="Reading" [hidden]="Reading | isNot('regen')"></ftui-label>
</ftui-row>
LG
Vielen dank euch für die prompten Antworten. Das hat wunderbar geklappt :) Leider sind solche "Kleinigkeiten" in diesem riesen Thread oder den Examples nicht oder schwer zu finden, so dass man als FTUI3-noob da erstmal sich durchfragen muss.
Daher lass ich nochmal eine Frage liegen:
mein altens FTUI hat mir aus Proplanta das Datum aus fc0-date umgerechnet in den Wochentag "Donnerstag". Hab gerade kein Zugriff auf den alten Code aber das ging irgendwie mit "data-substitution to = eeee" .. so grob aus Erinnerung. Wenn dazu auch jemand ein Tip hat gerne :)
Grund: Will bei der Wettervorhersage nicht "heute" "morgen" "übermorgen" im Header haben sondern die Tage.
Thanks a lot, und cool wie schnell und gut aussehend FTUI3 ist. Bin bisher echt begeistert auch wenn im Gegegensantz zum Vorgänger das "Naschlagen" echt schwieriger ist :)
Zitat von: Andre09 am 29 September 2023, 09:32:57mein altens FTUI hat mir aus Proplanta das Datum aus fc0-date umgerechnet in den Wochentag "Donnerstag". Hab gerade kein Zugriff auf den alten Code aber das ging irgendwie mit "data-substitution to = eeee" .. so grob aus Erinnerung. Wenn dazu auch jemand ein Tip hat gerne :)
<ftui-label [text]="deinproplantadevice:fc0_date | toDate() | format('eeee')"></ftui-label>=> Freitag
<ftui-label [text]="deinproplantadevice:fc0_date | toDate() | format('eeee, D MMMM')"></ftui-label>=> Freitag, 30. September
Zitat von: yersinia am 29 September 2023, 10:28:06Zitat von: Andre09 am 29 September 2023, 09:32:57mein altens FTUI hat mir aus Proplanta das Datum aus fc0-date umgerechnet in den Wochentag "Donnerstag". Hab gerade kein Zugriff auf den alten Code aber das ging irgendwie mit "data-substitution to = eeee" .. so grob aus Erinnerung. Wenn dazu auch jemand ein Tip hat gerne :)
<ftui-label [text]="deinproplantadevice:fc0_date | toDate() | format('eeee')"></ftui-label>=> Freitag
<ftui-label [text]="deinproplantadevice:fc0_date | toDate() | format('eeee, D MMMM')"></ftui-label>=> Freitag, 30. September
Mega danke. Ihr seit echt die besten. Man selber dockert rum wie bescheuert und Zack eine Lösung :) mal gucken wann das nächste Problem kommt ;)
Hallo,
ich habe mich jetzt auch mal an FTUI3 gewagt und, dank der Beispiele und dieser Diskussion hier, recht schnell recht viel umgestetzt bekommen. Also vielen Dank erstmal für die ganze Arbeit die da drin steckt!
Ich scheitere allerdings an einem simplen Untermenü.
Also:
Tab1->Tab1.1->Inhalt
Tab2->Tab2.1->Inhalt
Tab3->Tab3.1->Inhalt
Wie habt ihr das umgesetzt?
Viele Grüße,
Christian
Hi Christian,
hier 2 Bsp.:
https://forum.fhem.de/index.php?topic=115259.msg1240981#msg1240981
oder
https://forum.fhem.de/index.php?topic=115259.msg1241007#msg1241007
LG
Zitat von: mr_petz am 09 Oktober 2023, 22:13:26Hi Christian,
hier 2 Bsp.:
https://forum.fhem.de/index.php?topic=115259.msg1240981#msg1240981
oder
https://forum.fhem.de/index.php?topic=115259.msg1241007#msg1241007
LG
Hi mr_petz,
danke für den Schubs in die richtige Richtung...ich habe mich dusselig gesucht! ;D
Ich habe das jetzt einfach mal kopiert und eingefügt und das scheint ziemlich genau das zu sein was ich gesucht habe. Ich schaue es mir morgen an um dahinter zu steigen.
Danke nochmal und einen schönen Abend!
Christian
Moin,
lieben Dank an die Entwickler und Eure viele Zeit, die Ihr in Ftui und dieses Forum gesteckt habt.
Ist es möglich, mit Ftui-Bordmitteln ein Binding mit zwei verschiedenen Readings oder Devices zu speisen (z. B. zwei Flügel eines Doppelfenster oder Zustand und Erreichbarkeit), ohne dafür ein FHEM ein Dummy anlegen zu müssen? Falls es noch nicht geht, wäre es super, wenn das über die Pipes gehen würde, also wenn z. B. add () der Wert eines weiteren Readings übergeben würde.
Beste Grüße
@castor.srs
2 Devices oder Readings geht unter Umständen so, dass du ein ; dazwischen schreibst.
Macht nur sinn bei map oder step.
Müsstest deinen Anwendungsfall konkreter beschreiben.
LG
Zitat von: mr_petz am 10 Oktober 2023, 10:43:58@castor.srs
2 Devices oder Readings geht unter Umständen so, dass du ein ; dazwischen schreibst.
Macht nur sinn bei map oder step.
Müsstest deinen Anwendungsfall konkreter beschreiben.
LG
Moin Mr. Petz,
ich habe verschiedene Möglichkeiten ausprobiert, mehrere Readings mit ; zu kombinieren. Er verwendet jedoch nur das erste Reading.
Anwendungsfälle sind z. B.
- bei einem Icon für den Öffnungszustand eines Fensters die Farben light und primary für device.status open/closed, die Farbe red für device.alive=dead und gelb für device.battery=low zu setzen,
- bei einem Doppelfenster, das für jeden Flügel einen eigenen Sensor hat, das Icon-Bild aus fa_openautomation für die jeweilige Kombination des Öffnungszustands beider Fensterflügel auszuwählen (links offen -> 1, rechts offen -> 2, Ergebnis zur Auswahl des konkreten Bildes über map(0, 1, 2, 3).
Beste Grüße
Dann schau mal hier:
https://forum.fhem.de/index.php?topic=115259.msg1254997#msg1254997
So in der Richtung sollte es gehen.
Bin gerade unterwegs und kann nichts testen.
LG
Zitat von: mr_petz am 12 Oktober 2023, 11:09:17Dann schau mal hier:
https://forum.fhem.de/index.php?topic=115259.msg1254997#msg1254997
So in der Richtung sollte es gehen.
Bin gerade unterwegs und kann nichts testen.
LG
Ha, vielen lieben Dank. Diese Technik habe ich gesucht. Und über den Post https://forum.fhem.de/index.php/topic,115259.msg1243306.html#msg1243306 (https://forum.fhem.de/index.php/topic,115259.msg1243306.html#msg1243306) dann verstanden. Jetzt funktioniert es:
Ist der Fensterzustand offen oder geschlossen, erhält das Icon die Farbe primary bzw. light. Ist der Batteriezustand des Geräts "low", wird das Icon ungeachtet des Öffnungszustands gelb (warning). Ist es nicht erreichbar (:activity==dead), wird die Farbe ungeachtet aller anderen Readings rot.
[color]="
d_Feko_Bad | c1=>{this.reading1=c1, this.c1=(
this.reading3=='dead'?'red':
this.reading2=='low'?'warning':
this.reading1=='offen'?'primary':
this.reading1=='geschlossen'?'light':'black'
)}| ()=>this.color=this.c1;
d_Feko_Bad:battery | c2=>{this.reading2=c2, this.c2=(
this.reading3=='dead'?'red':
this.reading2=='low'?'warning':
this.reading1=='offen'?'primary':
this.reading1=='geschlossen'?'light':'black'
)} | ()=>this.color=this.c2 ;
d_Feko_Bad:activity | c3=>{this.reading3=c3, this.c3=(
this.reading3=='dead'?'red':
this.reading2=='low'?'warning':
this.reading1=='offen'?'primary':
this.reading1=='geschlossen'?'light':'black'
)} | ()=>this.color=this.c3
"
Zu jedem Reading wird der Wert des Readings über die Variablen c1 bis c3 an die jeweilige Funktion dahinter übergeben. Im ersten Teil der Funktion wird dieser Wert der Objektvariablen (this.reading1 etc) zugewiesen, damit er von den Funktionen der anderen Readings verwendet werden kann. Im zweiten Teil der Funktion wird der weiteren neuen Objektvariable this.c1 etc. über die if-else-Abfragen der Wert zugewiesen, den das Attribut im Ergebnis erhalten soll. Dieses wird dem Attribut dann im letzten Teil der jeweiligen Pipeline zugewiesen.
Nochmals danke für den Anstoß und weiter so!
Edit 17.10.2023:
Code und Beschreibung überarbeitet. In der früheren Fassung funktionierte der Code nur bei Erstaufruf der FTUI-Seite. Bei Aktualisierung eines Readings wird jedoch nur der Code nach dem jeweiligen Reading ausgeführt. Um bei jeder Aktualisierung die gesamte Bedingungskette zu berücksichtigen, muss bei jedem Reading die vollständige Bedingung abgefragt werden.
Danke für die Erklärung und die Aufbereitung. Ich fand das Thema so interessant, dass ich mir erlaubt habe, das ins Wiki (https://wiki.fhem.de/wiki/FTUI3_mehrere_Readings) mit aufzunehmen.
VG, Andreas
Hallo,
ich möchte Zeiten in meinem Wechselrichter setzen, die wie folgt gespeichert werden:
10:00 -> 1000
23:12 -> 2312
08:12 -> 812
Dazu nehme ich timeset. Das Setzen der Werte ohne führende Null habe ich schon hinbekommen durch Division durch 1:
<ftui-timeset [value]="Dxy:Time_point_1_time" (value)="replace(':','') | divide(1) | Dxy:Time_point_1_time" class="size-2">Uhr</ftui-timeset>
Leider zeigt timeset ohne führende Null die Zeit dann nicht an, sondern steht auf 00:00. Gibt es eine pipe, mit der ich die Null hinzufügen kann? Oder eine andere elegante Lösung? Möchte ungern über einen dummy gehen.
Gibt es irgendwo eine Dokumentation zu der format()-pipe? Leider finde ich dazu fast nichts aber formatieren in "%04d" wäre ja die Lösung ::)
Update:
Ich habe es jetzt irgendwie zurechtgefrickelt :D
Diese Version funktioniert:
<ftui-timeset [value]="Dxy:Time_point_1_time | replace(/\d+/g, function(m){return '0'+m.toString()}) | replace(/\d+/g, function(n){return n.substr(n.length-4,n.length-2)+':'+n.substr(n.length-2,n.length)})" (value)="replace(':','') | divide(1) | Dxy:Time_point_1_time" class="size-2">Uhr</ftui-timeset>
Kann man sicherlich eleganter lösen, aber das macht erst mal was es soll.
Update2:
Leider nur mit Zeiten bis 09:59. Irgendetwas scheint beim timeset ab 10:00 anders zu sein :-\
Einstellen geht, aber die Anzeige der hinterlegten Zeit im timeset mit [value] funktioniert mit "10:00" nicht, mit "09:00" aber bestens. Woran kann das liegen?
0930 -> 09:30
1000 -> 00:00
Hi Jojo11,
wenn deine Zeit ohne ':' kommt, dann zeigt timeset auch nix an.
teste mal so wenn keine gültige Zeit gesendet wird:
[value]="Dxy:Time_point_1_time | time=>time.length===3 ? ('0'+time).match(/.{1,2}/g).join(':') : time.match(/.{1,2}/g).join(':')"
LG
Hi Mr. Petz,
Deine Lösung funktioniert auf Anhieb :o
Ich verstehe noch nicht ganz, warum meine nicht klappt, weil ich den Doppelpunkt ja schon auch dazwischen packe - dachte ich zumindest.
Aber deine ist natürlich wesentlich eleganter - herzlichen Dank! Werde ich jetzt erst mal versuchen nachzuvollziehen ::)
schöne Grüße
Jojo
Schön das es funktioniert.
Zur Erläuterung:
Zuerst wird geschaut ob eine führende Null existiert durch Überprüfung der Länge vom String. Wenn nicht wird eine null vorran gesetzt und nach 2 Zahlen gesplittet und wieder mit ':' zusammen gesetzt. Wenn ja wird nur gesplittet und wieder mit ':' zusammen gesetzt.
LG
Mir war gar nicht klar, dass man in den pipes quasi if-Abfragen verwenden kann. Richtig gut 👍
Hallo zusammen,
Meine PV Anlage liefert mir einen Wert in KWH ohne Einheit also z.B. 0,437 . Jetzt hätte ich den gerne eine Dezimalstelle kürzer also 0,43 oder gerundet 0,44 (das wäre egal).
Beim Knob geht das ja mit ,,decimal" aber beim Label hab ich es nicht hinbekommen auch nicht mit den hier gefundenen | round(2).
Hatte die unter [name]=,,device:reading | round(2)" gepackt. Aber ohne Erfolg.
Was mache ich hier falsch ? :) Danke 8
Hallo Andre09,
müsste das Attribut nicht [text] statt [name] heißen? Bei mir funktioniert das hier:
<ftui-label size="7" interval="15" [text]="openDTU:Tagesproduktion | divide(1000) | round(3)"
Zitat von: fz55 am 23 Oktober 2023, 13:17:19Hallo Andre09,
müsste das Attribut nicht [text] statt [name] heißen? Bei mir funktioniert das hier:
<ftui-label size="7" interval="15" [text]="openDTU:Tagesproduktion | divide(1000) | round(3)"
Jau muss es, war aber nur ein Gedankenfehler. Tatsächlich war mein round auch richtig aber irgendwie hab ich das falsch abgespeichert ;) also läuft
Andere Frage an die cracks. Langsam komm ich klar und verstehe auch wie sowas wie MAP oder STEP funktioniert und kriege es auch hin da ich verschiedene Symbole und Farben in Abhängigkeit vom Reading habe.
Toll wäre es noch wenn ich sowas abhängig von einem Zahlenwert machen könnte also Logo 1 wenn wert negativ, Logo 2 wenn wert 0 und Logo 3 wenn wert größer 0.
Anwendungsbeispiel z.b um eine batterieladung oder Entladung einer PV nicht nur durch den bloßen Wert darstelle (also negativ gleich Entladung) sondern auch mit Pfeilen die z.B. in die richtige Richtung zeigen.
Für Tipps sehr dankbar :)
(Edit)
Geht ja auch ganz normal mit step habe ich gesehen :) also erledigt
Zitat von: fz55 am 23 Oktober 2023, 13:17:19Hallo Andre09,
müsste das Attribut nicht [text] statt [name] heißen? Bei mir funktioniert das hier:
<ftui-label size="7" interval="15" [text]="openDTU:Tagesproduktion | divide(1000) | round(3)"
ich nochmal :) gibt es auch einen Trick das die Stellenanzahl gleich bleibt? also 0,49 0,50 0,51 nicht 0,49 0,5 0,51 ? Das sieht bei mehreren Werten übereinander nämlich dann recht bescheiden aus :/
Zitat von: Andre09 am 26 Oktober 2023, 13:59:16Zitat von: fz55 am 23 Oktober 2023, 13:17:19Hallo Andre09,
müsste das Attribut nicht [text] statt [name] heißen? Bei mir funktioniert das hier:
<ftui-label size="7" interval="15" [text]="openDTU:Tagesproduktion | divide(1000) | round(3)"
ich nochmal :) gibt es auch einen Trick das die Stellenanzahl gleich bleibt? also 0,49 0,50 0,51 nicht 0,49 0,5 0,51 ?
fix(n) (https://github.com/knowthelist/ftui/blob/13db8daa62c845c5f83920498850afef7b624fce/www/ftui/modules/ftui/ftui.binding.js#L14C1-L14C60) müsste das können:
<ftui-label size="7" interval="15" [text]="openDTU:Tagesproduktion | divide(1000) | round(3) | fix(3)"
Zitat von: andreas_r am 13 Oktober 2023, 12:33:45Danke für die Erklärung und die Aufbereitung. Ich fand das Thema so interessant, dass ich mir erlaubt habe, das ins Wiki (https://wiki.fhem.de/wiki/FTUI3_mehrere_Readings) mit aufzunehmen.
VG, Andreas
Hi Andreas,
kannst du das nochmal überarbeiten?
Der Nutzer hat einen Edit dazu erstellt.
https://forum.fhem.de/index.php?topic=115259.msg1289243#msg1289243
Danke und LG
Zitat von: mr_petz am 28 Oktober 2023, 13:02:56Hi Andreas,
kannst du das nochmal überarbeiten?
Der Nutzer hat einen Edit dazu erstellt.
https://forum.fhem.de/index.php?topic=115259.msg1289243#msg1289243
Danke und LG
Habe ich so geändert. Danke für den Hinweis, habe das Update nicht mehr mitbekommen. VG
Wenn ich die pipe "humanized()" verwende:
<ftui-label [text]="fs01:state:time | toDate() | ago() | humanized()" ago-refresh>
erhalte ich z.B. die Ausgabe "2 Tagn". Ist nur ein Schönheitsfehler, aber da fehlt ein "e" ;D
Kann ich das selber irgendwo anpassen? Gibt es zu den pipes eigentlich auch irgendwo eine Doku?
Zitat von: Jojo11 am 31 Oktober 2023, 17:04:20Gibt es zu den pipes eigentlich auch irgendwo eine Doku?
Mehr oder weniger, zB direkt auf der Startseite des repos (https://github.com/knowthelist/ftui#pipes) oder im Code selbst (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js).
Zitat von: Jojo11 am 31 Oktober 2023, 17:04:20Kann ich das selber irgendwo anpassen?
Ja, und zwar im plural-handling der ftui.helper.js (https://github.com/knowthelist/ftui/blob/13db8daa62c845c5f83920498850afef7b624fce/www/ftui/modules/ftui/ftui.helper.js#L373).
Müsste man hier ändern:
ftui/www/ftui/modules/ftui/ftui.helper.js
Die Zeile 373
return days + ' ' + (lang === 'de' ? 'Tag' : 'day') + (days > 1 ? plural : '');
müsste
return days + ' ' + (lang === 'de' ? 'Tag' : 'day') + (days > 1 ? 'e'+ plural : '');
lauten.
Wobei der Quickfix nur für die deutsche Sprache funktioniert und die englische Sprache falsch behandelt.
VG, Andreas
Zitat von: andreas_r am 01 November 2023, 16:48:42Wobei der Quickfix nur für die deutsche Sprache funktioniert und die englische Sprache falsch behandelt.
Obwohl es schwierig werden kann, je nach Anwendungsfall ist es entweder 'n Tage' oder 'in n Tagen'. Leider ist der deutsche Plural hier nicht so einfach wie im Englischen.
Zitat von: yersinia am 02 November 2023, 10:02:01Obwohl es schwierig werden kann, je nach Anwendungsfall ist es entweder 'n Tage' oder 'in n Tagen'. Leider ist der deutsche Plural hier nicht so einfach wie im Englischen.
Wie gesagt, ist ein quick fix. Ich sehe es halt so: Besser "Tagen" ausgeben als "Tagn".
Hi, ich würde dazu ein replace anhängen bis das gefixt ist:
<ftui-label [text]="fs01:state:time | toDate() | ago() | humanized() | replace('gn','gen')" ago-refresh>
Wenn es nicht beim nächsten Update gefixt wird ist man damit erstmal save und man braucht nicht in der helper editieren...
Nebenbei ist so die Sprache de/en wurscht.
LG
ich bin recht neu in diesem Thema und habe schon ein paar Fallstricke umschifft.Aber ich bin trotzdem noch sehr am Anfang.
Ich beschäftige mich gerade mit dem Layout und würde gerne, dass sich das Layout, abhängig von der Auflösung verändert. Sprich auf den Handy 100% Breite und nur eine max. zwei Spalten. Auf dem Desktop ein mehrspaltiges Design.
Bis jetzt habe ich leider nichts passendes gefunden. Die Internet Suche ist recht verwirrend, da ich nicht immer verstehe, ob der Lösungsansatz für Version 3 oder eine ältere Version gilt.
Zitat von: Mike-fhem am 03 November 2023, 13:56:36Ich beschäftige mich gerade mit dem Layout und würde gerne, dass sich das Layout, abhängig von der Auflösung verändert. Sprich auf den Handy 100% Breite und nur eine max. zwei Spalten. Auf dem Desktop ein mehrspaltiges Design.
Ich für meinen Teil habe zwei verschiedene Seiten. Eine für das Tablett und eine für das Handy. Ersteres mit dem Standard Theme (https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/ftui-theme.css) und zweiteres mit dem mobile Theme (https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/mobile-theme.css).
Ja, das bedeutet, dass man einiges doppelt macht, aber ich habe eh die Erfahrung gemacht, dass ich auf dem Handy nicht alles haben will, was das Tablet anzeigt. Das Handy zeigt bei mir nur das Wichtigste (v.a. die eigentlichen Steuerungen) und das Tablet kann "alles", also auch Reports, Charts, Wetteranzeige, etc. Gerade zum Beispiel die Charts machen am Handy eh wenig Sinn und für das Wetter hat man eh eine App.
Dann habe ich noch eine index.html Seite, die je nach Auflösung des Geräts auf die eine oder andere Variante weiterleitet.
VG, Andreas
vielen Dank Andreas, danke für den Tipp.
Das werde ich mir genauer anschauen. Werde mich aber erstmal mit den Basics weiter beschäftigen.
Eine Frage in die Runde:
Für die Auswahl von Effekten für ein LED-Stripe, der mit WLED über MQTT2 in FHEM steuerbar ist, habe ich ein internes Reading in eine Dropdownliste gepackt:
<ftui-dropdown [list]="MQTT2_WLED_wz:.effects" [(value)]="MQTT2_WLED_wz:effectname"></ftui-dropdown>
Das sind satte 186 Effekte, die aber leider unsortiert im internen Reading stehen. Dadurch ist ein einzelner Effekt recht schwer zu finden. Wie könnte ich die Liste sortieren? Ich habe bereits vergeblich mit sort gespielt:
z.B.
... [list]="MQTT2_WLED_wz:.effects | sort()").
Liebe Grüße
Dieter[/list]
Zitat von: RockFan am 12 November 2023, 15:04:06Eine Frage in die Runde:Für die Auswahl von Effekten für ein LED-Stripe, der mit WLED über MQTT2 in FHEM steuerbar ist, habe ich ein internes Reading in eine Dropdownliste gepackt: <ftui-dropdown ...
="MQTT2_WLED_wz:.effects" [(value)]="MQTT2_WLED_wz:effectname"></ftui-dropdown> Das sind satte 186 Effekte, die aber leider unsortiert im internen Reading stehen. Dadurch ist ein einzelner Effekt recht schwer zu finden. Wie könnte ich die Liste sortieren? Ich habe bereits vergeblich mit sort gespielt:z.B....
="MQTT2_WLED_wz:.effects | sort()"). Liebe GrüßeDieter
Hi,
In einem Userreading sortiert abbilden und das als list nehmen? Dann kannt du aus den 186 Effekten auch den einen weglassen, den du nicht täglich brauchst. 8)
Gruß,
Tobi
Hallo,
ich versuche gerade einen Dimmer umzusetzen und komme nicht weiter.
Ich habe einen Button, der bei langem Klick ein Popup mit Slider zum Dimmen öffnet:
<ftui-popup id="WZ">
<header>Wohnzimmer Tischlampe</header>
<ftui-colorpicker [(brightness)]="WZ_Tisch:pct" layout="valueSlider"></ftui-colorpicker>
</ftui-popup>
<ftui-button set-value="WZ_Decke" get-value="WZ_Decke:state" fill="clear">
<ftui-icon class="size--1" path="fa-svg/solid"
[name]="WZ_Decke:state | map('off:toggle-off,set_of.*:toggle-off,on:toggle-on,set_on.*:toggle-on')"
[color]="WZ_Decke:state | map('off:mygray, set_of.*:mygray, on:mydarkgray, set_on.*:mydarkgray')">
</ftui-icon>
</ftui-button>
Soweit läuft das auch, aber wenn ich dimme und dann ausschalten möchte, springt die Lampe immer erst auf "on", weil der Dimmwert (zB 50) nicht als "on" erkannt wird.
Schön wäre, wenn der Dimmwert bleibt und einfach ein off geschickt würde.
"state" zeigt halt sowohl "on"/"off", als auch den Dimmwert an. pct zeigt nur den Dimmwert an. Es handelt sich um ein homematic-Device.
Zitat von: tobi01001 am 16 November 2023, 10:54:17Hi,
In einem Userreading sortiert abbilden und das als list nehmen? Dann kannt du aus den 186 Effekten auch den einen weglassen, den du nicht täglich brauchst. 8)
Gruß,
Tobi
Danke für diesen Denkanstoß. Der Umweg ist meiner Meinung nach nicht optimal, aber natürlich eine Option.
Aber vielleicht ergibt es Sinn eigene Lieblingslisten nach Kategorien zu erstellen. Das geht allerdings auch ohne Userreading direkt in FTUI. :-\
Viele Grüße
Dieter
Hallo,
wir kann ich von einem Button die blaue Farbe verändern? Abschalten ist mir bekannt. Ich möchte gern frei aus der Farbscala per hex auswählen. Wie bekommt man das hin?
Hi,
hast Du diese Seite (https://knowthelist.github.io/ftui/www/ftui/examples/button.html) einmal angesehen?
Viele Grüße
Jürgen
Hallo zusammen,
gibt es eine Möglichkeit, die Funktion des "< Back"-Buttons oben link im Beispiel mobile_plain.html auf einen weiteren Button (irgendwo platziert auf der Unterseite) zu übertragen?
Evtl sogar in Kombination mit dem Footer aus dem Beispiel "mobile.html"?
Wenn das Telefon oben links die Kamera hat, ist die Platzierung etwas ungünstig ::)
Hallo zusammen.
Ich möchte eine tabellenartige Liste innerhalb einer Kachel erstellen, die scrollbar ist (dafür das <DIV style="overflow">).
Das funktioniert so weit, aber wie bekomme ich es hin, den horizontalen Abstand FTUI-Komponenten so anzupassen, dass die verfügbare Breite einer Kachel ausgenutzt wird?
<ftui-grid-tile row="11" col="3" height="7" width="12"
<div style="overflow-y: auto;overflow-x: auto;">
<ftui-column >
<ftui-row margin-top="3" margin-bottom="3" >
<ftui-column align-items="left" width="15%">
<ftui-icon class="size--1" name="home"></ftui-icon>
</ftui-column>
<ftui-column align-items="left" width="25%">
<ftui-label >Home</ftui-label>
</ftui-column>
<ftui-column align-items="left"width="60%">
<ftui-label>Übersicht</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row margin-top="3" margin-bottom="3">
<ftui-column align-items="left">
<ftui-icon class="size--1" name="fire"></ftui-icon>
</ftui-column>
<ftui-column align-items="left" >
<ftui-label >Heizung</ftui-label>
</ftui-column>
<ftui-column align-items="left">
<ftui-label>Dachgeschoss</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row margin-top="3" margin-bottom="3">
<ftui-column align-items="left">
<ftui-icon class="size--1" name="cog"></ftui-icon>
</ftui-column>
<ftui-column align-items="left" >
<ftui-label >Einstellungen</ftui-label>
</ftui-column>
<ftui-column align-items="left">
<ftui-label>Rollläden</ftui-label>
</ftui-column>
</ftui-row>
</ftui-column>
</div>
</ftui-grid-tile>
Ergebnis s. Screenshothoriz_Abstand_Kachel.png
Vielen Dank für eure Hilfe.
Hallo zusammen,
Habe mir dank Euer Hilfe ein richtig starkes FTUI3 aufgebaut.
Jetzt habe ich mich gefragt ob es irgendwie die Möglichkeit gibt einen Timer zu realsieren, also das ich zb 15min einstelle und das Tablet am Ende piept.
Hintergrund ist, das das Tablet im Übergang Küche zu Wohnraum hängt und man öfter in der Küche einen Timer braucht den ich mir alternativ am Handy oder der Uhr sonst einstelle.
Vielleicht hat wer brauchbare intuitive Ideen ?
Hi,
die Bausteine sind in FHEM definiert und in FTUI zur Anzeige gebracht.
defmod EZ_Dimmdauer_PARAM dummy
attr EZ_Dimmdauer_PARAM devStateStyle style="text-align:right"
attr EZ_Dimmdauer_PARAM event-on-change-reading .*
attr EZ_Dimmdauer_PARAM group Esszimmerlampen
attr EZ_Dimmdauer_PARAM icon edit_settings@black
attr EZ_Dimmdauer_PARAM readingList timer_in_Min
attr EZ_Dimmdauer_PARAM room Parameter
attr EZ_Dimmdauer_PARAM setList timer_in_Min:slider,15,1,90
attr EZ_Dimmdauer_PARAM stateFormat {"Timer in Min: ".ReadingsVal($name,"timer_in_Min",0)." / "."Timer in Sek: ".ReadingsVal($name,"timer_in_Sek",0)." / "."Timer in Sek*10: ".ReadingsVal($name,"timer_in_Sek_Multi10",0)}
attr EZ_Dimmdauer_PARAM userReadings timer_in_Min
defmod EZ_Lampe_dimmen_notify notify EZ_Lampe_dimmen_dummy.on\
set HUEDevice9 ct 330 : pct 100;;\
sleep 1;;\
set HUEDevice9 pct 0 : transitiontime [EZ_Dimmdauer_PARAM:timer_in_Sek_Multi10];;\
{my $t = ReadingsVal("EZ_Dimmdauer_PARAM","timer_in_Sek",0);;;;\
startCountdown("EZ_Lampe_dimmen_dummy",$t)}
attr EZ_Lampe_dimmen_notify devStateStyle style="text-align:right"
attr EZ_Lampe_dimmen_notify group Esszimmerlampen
attr EZ_Lampe_dimmen_notify icon light_off-for-timer@black
Viele Grüße
Jürgen
slice(start, end) (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L15) müsste das eigtl schon erfüllen. Für Spezialfälle würde ich mal die (vielen, vielen sehr guten) Beispiele von mr_petz hier in diesem Thread suchen.
Zitat von: yersinia am 29 November 2023, 14:01:32slice(start, end) (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L15) müsste das eigtl schon erfüllen.
Perfekt - danke! :)
Nochmal eine kurze Frage. Bei FTUI 2 konnte ich den stream meiner webcam stoppen indem ich die Variable, die den Link enthielt geleert habe (CAM01_stream_link).
Das hat im fully-Browser sehr zuverlässig funktioniert.
In FTUI3 mit folgendem Code
<ftui-image id="img1" [src]="CAM01_stream_link" nocache width="100%" [hidden]="CAM01:hidden | map('on:false,off:true')"></ftui-image>
schaltet der stream nicht mehr ab, wenn src geleert wird. Mit [hidden] wird er zwar wie gewünscht ausgeblendet, aber im Hintergrund läuft der stream trotzdem weiter. Bei Wandtablet zu Hause kein Problem, aber per VPN unterwegs kann das schon ordentlich Daten ziehen, ohne dass man es bemerkt.
Nur ein manueller reload im Browser deaktiviert den stream.
Übersehe ich da irgendwas oder gibt es dafür eine Lösung?
Zitat von: Jojo11 am 26 November 2023, 12:19:35Hallo zusammen,
gibt es eine Möglichkeit, die Funktion des "< Back"-Buttons oben link im Beispiel mobile_plain.html auf einen weiteren Button (irgendwo platziert auf der Unterseite) zu übertragen?
Evtl sogar in Kombination mit dem Footer aus dem Beispiel "mobile.html"?
Wenn das Telefon oben links die Kamera hat, ist die Platzierung etwas ungünstig ::)
Ich antworte mir mal selbst ;D
Ein
onclick="this.closest('ftui-view-stage').goBack();"
in einem entsprechenden Icon macht den Job, ist aber wahrscheinlich nicht die sauberste Lösung.
Hallo zusammen.
Gibt es eine Möglichkeit, das device für die Notation device:reading als Ergebnis eines Ausdrucks festzulegen?
Ich könnte mir dafür ReadingsVal() oder eine andere, auch eigene Funktion vorstellen.
Allerdings habe ich keine Idee, wie das funktionieren könnte.
Vielleicht hat sonst jemand eine Lösung... @setstate oder @Thyraz ? :-[
Hi,
was ist denn Dein Ziel?
Viele Grüße
Jürgen
Hallo Jürgen,
Deine Rückfrage ist berechtigt; ich habe es hier offenbar nicht klar genug beschrieben.
Ich habe mehrere Devices, deren Namen alle den Raumbezeichnungen KG1, KG2, ..., EG1, EG2, ..., OG1, OG, ..., DG1, DG2, ... entsprechen.
In jedem der Räume hängen Thermostate, deren Einstellungen ich flexibel festlegen will.
Dazu habe ich für jeden Raum eine Kachel <ftui-grid-tile> mit Informationen.
Bei Click auf die Kachel setze ich den Wert des Steuerungs-Dummy heatCtrl eben auf EG1, OG3, ... und aktiviere ein Popup [(active entspricht RegEx)].
Dieses Popup soll aber für alle Räume benutzt werden.
Im Popup selbst kann ich zwar auf heatCtrl zugreifen.
Aber dadurch erhalte ich eben nur den Namen des Raumes, nicht aber das Device gleichen Namens.
Ich brauche aber das Device (z.B. EG1), um innerhalb des Popups weitere Readings lesen und schreiben zu können.
Beispiel EG1:heatProg hat den Wert Abwesend . Das würde ich gern in <ftui-label> verwenden.
So könnte ich mir das vorstellen:
<ftui-label [text]="`Value(heatCtrl)`:heatProg"></ftui-label>Und damit hätte ich genau das, was ich brauche:
<ftui-label [text]="Abwesend"></ftui-label>
Vielleicht geht das ja ... oder kann so etwas noch einbauen?
Hi DocCyber,
hast Du Dir einmal die Möglichkeiten von "content-Files" angesehen. So habe ich z.B. gleiche Geräte ausgelagert. Die Definition gilt dann für Geräte, mit denen das Contentfile aufgerufen wird.
Viele Grüße
Jürgen
Zitat von: juemuc am 20 Dezember 2023, 21:16:39hast Du Dir einmal die Möglichkeiten von "content-Files" angesehen
Ja, ich benutze <ftui-content> schon sehr intensiv, aber das reicht für meine Zwecke nicht.
Ich brauche schlicht eine Möglichkeit, das
Ergebnis einer fhem - bzw. Perl-Funktion in einem <ftui-tag> zu verwenden, also so etwas:
<ftui-label [text]="`Value(heatCtrl)`:heatProg"></ftui-label>Damit ließen sich auch viele andere Problemchen lösen.
Hallo zusammen,
ich benötige wieder einmal die Hilfe der "Formatierungsspezialisten" ;D
In einem Reading steht das Datum und die Uhrzeit in der Form "YYYY-MM-DD HH:MM:SS". Dies möchte in FTUI3 in der Form "TT.MM.YYYY HH:MM" anzeigen. Wer kann mir helfen?
Viele Grüße
Jürgen
Hallo Jürgen,
versuche es einmal so:
<ftui-label [text]="d_dummy1:state | toDate() | format('hh:mm.ss DD.MM.YYYY')"></ftui-label>
im dummy steht: 2024-01-04 15:46:02
Viel Spaß,
Matthias
Hallo Matthias,
super. Vielen Dank.
Ich habe es noch so angepasst
| toDate() | format('DD.MM.YYYY hh:mm')
Viele Grüße
Jürgen
Moin Zusammen,
so eine kleine Frage, ich hoffe sie wurde noch nicht gestellt.
Ich verändere bei Warnungen die Hintnergrundfarbe in rot:
<ftui-column [color]="Schwellwert_Abgastemp_HV_Warnung:state | map('off:error')">
...
</ftui-column>
Ich es möglich, dass die Farbe "error" auch blinkt?
Danke und Gruß.
Hi,
probiere einmal class="blink"
Viele Grüße
Jürgen
Hallo zusammen,
ich versuche über @click="sendFhem("net rpc abortshutdown -I ...")" einen Befehl über einen FTUI-Button abzusetzen. Das Problem sind die " in der Klammer. Mit ' funktioniert der Befehl in FHEMWEB nicht.
Wie muss ich das " in der Klammer encodieren? Oder gibt es einen anderen Weg?
Viele Grüße
Jürgen
Hi. Teste mal
`
Ansonsten mal den ganzen code zeigen...
LG
Zitat von: juemuc am 05 Januar 2024, 17:23:05Hi,
probiere einmal
class="blink"
Viele Grüße
Jürgen
Danke. Aber das klappt nur bedingt.
Wenn ich es so aufbaue, blinkt der Hintergrund und die Icons ständig:
<ftui-column class="blink" [color]="LAN_Status_Dummy:state | map('Offline:error')" >
<ftui-row>
<ftui-image style="width:39%" [src]="Internet | map('absent:`./images/diverses/green_red.gif`, present:`./images/diverses/green_hand.gif`')"></ftui-image>
</ftui-row>
</ftui-column> Ich wollte ja gern erreichen, dass die Hintergrundfarbe bei "Offline" auf rot wechselt und auch nur dann blinkt.
Du musst es zweimal definiren. Einmal blinkend und einmal ohne. Bei Offline musst Du dann (über hidden) das blinkende einblenden und sonst das andere.
Zitat von: mr_petz am 06 Januar 2024, 12:01:03Hi. Teste mal
`
Ansonsten mal den ganzen code zeigen...
LG
Hi mr_petz,
funktioniert leider nicht. Hier das Coding:
<ftui-grid-tile row="8" col="16" height="2" width="2">
<header>Thinkpad</header>
<ftui-column>
<ftui-button [color]="ThinkPad:state | map('on:green, none:yellow, off:black')"
(value)="ThinkPad" states="off" width="9em" >
Shutdown
</ftui-button>
<ftui-button color="red" @click="sendFhem(`net rpc abortshutdown -I ThinkPad -U User%Psw`)">
STOP Shutdown
</ftui-button>
</ftui-column>
</ftui-grid-tile>
Viele Grüße
Jürgen
Dann zuerst ' und in Klammern "
Es könnte das % noch in die Quere schießen.
Mal encoden...
Leider alles ohne Erfolg.
Kann ich irgenwo (debugging) sehen, was an FHEM übergeben wird?
Alternativ schalte ich in FTUI nur einen Dummy un mache den Rest in FHEM
Viele Grüße
Jürgen
Warte, ich teste es mal...
Mal abgesehen von dem Fehler, wird an Fhem das % encodet gesendet.
Also es kommt da als %25 an...
Ich hätte eher so etwa erwartet,
/fhem?cmd=%22net%20rpc%20abortshutdown%20-I%20ThinkPad%20-U%20User%25Psw%22so wie es unter menuEntries steht.
Hast Du noch eine Idee?
Über einen Dummy funktioniert es schon mal ;D
Viele Grüße
Jürgen
Moin aus dem verschneiten Norden,
ich versuche noch immer ein Widget von Windfinder auf meiner Wetterseite, die in einem Content-File ausgelagert ist, darzustellen.
Uns scheitere damit kläglich.
Aus einem
<ftui-grid-tile row="1" col="7" height="6.5" width="7" shape="round" color="lightgray">
<script
src="https://www.windfinder.com/widget/forecast/js/marina_timmendorf_poel?unit_wave=m&unit_rain=mm&unit_temperature=c&unit_wind=bft&unit_pressure=hPa&days=2&show_day=1">
</script>
<noscript>
<a rel="nofollow"
href="https://www.windfinder.com/forecast/marina_timmendorf_poel?utm_source=forecast&utm_medium=web&utm_campaign=homepageweather&utm_content=noscript-forecast">
Wind forecast for Marina Timmendorf / Poel
</a>
provided by
<a rel="nofollow"
href="https://www.windfinder.com?utm_source=forecast&utm_medium=web&utm_campaign=homepageweather&utm_content=noscript-logo">
windfinder.com
</a>
</noscript>
</ftui-grid-tile>
wird für den Browser ein iframe wenn der Code in der index.html steht, nicht aber, wenn der Code in einem Content-File steht.
Ich habe es mehrfach mit Chromium, Chrome und mit Edge probiert.
Mache ich einen Fehler oder ist 'normal' so?
Danke im Voraus,
Matthias
Hallo zusammen,
gibt es eine Möglichkeit, eine beliebige Perlfunktion aufzurufen, so dass deren Rückgabewert(string) als Parameter für ein Widget verwendet werden kann?
Bei <ftui-label> kann manches schon durch die verfügbaren Pipes realisiert werden.
ich wünsche mir eine ähnliche Lösung vor, die eben nicht nur für <ftui-label>, sondern uneingeschränkt auch für andere Widgets Verwendung finden könnte.
Zitat von: juemuc am 06 Januar 2024, 12:55:22Du musst es zweimal definiren. Einmal blinkend und einmal ohne. Bei Offline musst Du dann (über hidden) das blinkende einblenden und sonst das andere.
Hey. :)
Vielen Dank!
Stehe nur grad ein wenig auf dem Schlauch, wie ich das machen kann. Hättest du eventuell ein Beispiel für mich? Danke schön. :)
Kurze Frage zum ftui-chart: Kann man in der Tagesansicht die Achseneckpunkte x-min, x-max, y-min und y-max auch per Reading setzen?
[x-min]="Testdummy"
scheint nicht zu funktionieren.
schöne Grüße
Jo
<ftui-grid-tile row="1" col="6" height="3" width="5">
<header>Waschmaschine</header>
<ftui-row [hidden]="Waschmaschine:state | map('running:false, .*:true')">
<ftui-image height="90px"
src="../images/default/waschmaschine_03.gif">
</ftui-image>
<ftui-label size="4" color="white"
[text]="HM_ES_PMSw1_Pl_DN_R1_NEQ1662710:2.POWER | fix(2)" unit=" Watt">
</ftui-label>
</ftui-row>
<ftui-row [hidden]="Waschmaschine:state | map('on|done:false, .*:true')">
<ftui-icon size="5" color="red" class="blink"
path="../images/openautomation" name="scene_washing_machine">
</ftui-icon>
<ftui-label size="4" color="white"
[text]="Waschmaschine:state | map('done:FERTIG, on:AN')">
</ftui-label>
</ftui-row>
<ftui-icon size="5" color="white" [hidden]="Waschmaschine:state | map('off:false, .*:true')"
path="../images/fhemSVG" name="general_aus">
</ftui-icon>
</ftui-grid-tile>
Viele Grüße
Jürgen
Mahlzeit. :) Baue grad ein wenig Spotify ein und habe eine Verständnisfrage zum Switch.
Das Umschalten klappt. "Set Spotify on" und "off" wird beim Umschalten gesendet.
Aber der Switch zeigt beim Neuladen immer "aus" an, obwohl er an sein müsste.
Das entsprechende Reading:
Spotify:is_playing:1 -> hier sollte der Switch aktiv sein
Spotify:is_playing:0 -> hier sollte der Switch inaktiv sein
Mach ich einen Denkfehler?
Danke für die Hilfe.
<ftui-switch [value]="Spotify | map('`is_playing.*`:1')" (value)="Spotify" states="pause,resume" color="orange" texts='on,off'></ftui-switch>
Moin,
ich frage mich, warum du nicht direkt das Reading nutzen um den "Value" zuzuweisen. Damit würdest du m.E. das Mapping sparen.
Gruß
Matthias
Meinst du in dieser Art und Weise?
<ftui-switch [value]="Spotify:is_playing:1" (value)="Spotify" states="pause,resume" color="error" texts='on,off'></ftui-switch> So habe ich es auch getestet, aber es geht nicht.
Hallo zusammen,
habe heute festgestellt, dass durch ein FTUI3-Update über
update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txtkein Event "global:update" erzeugt wird, so wie es beim FHEM-Update erfolgt. Wie kann ich dieses Event beim FTUI3-Update erzeugen?
Viele Grüße
Jürgen
@M.Piet
ich hatte es so gemeint, du musst natürlich den Dummy durch dein Gerät ersetzen.
<ftui-switch [value]="dummy1:is_playing" (value)="dummy1:is_playing" states="0,1" color="error" texts='on,off'></ftui-switch>
Ich hoffe das klappt.
Gruß,
Matthias
Hallo,
ich versuche auf einem Image diverse Elemente zu platzieren, für Labels klappt das, für ein Dropdown Element aber nicht, dieses wird nicht angezeigt :-\
<ftui-tab-view id="test1">
<ftui-grid-tile row="1" col="2" height="7" width="9" shape="round">
<header>Temperaturen</header>
<ftui-image src = "../images/1.png"
height = "100%"
top = "0%"
left = "0%">
<ftui-dropdown list="17.0,17.5,18.0,18.5,19.0,19.5,20.0,20.5,21.0" [(value)]="Raum_Absenk_temp" unit="°C" left="90%" top="30%" class="size-2"></ftui-dropdown>
<ftui-label [text]="ws_data:temp1" text="-" left="6%" top="8%" size="4" unit="°C" bold color=yellow"></ftui-label>
<ftui-label [text]="ws_data:hum1" text="-" left="6%" top="13%" size="4" unit="%" bold color=yellow"></ftui-label>
<ftui-label left="15%" top="40%" bold color=black size="4">Raum: </ftui-label>
<ftui-label [text]="cmi:T.Raum" text="-" left="26%" top="40%" size="4" unit="°C" bold color=white></ftui-label>
<ftui-label left="47%" top="30%" bold color=black size="4">Boiler: </ftui-label>
<ftui-label [text]="COE_Node_RSM610_32:T.Warmwasser" text="-" left="48%" top="40%" size="4" unit="°C" bold color=white></ftui-label>
<ftui-label left="15%" top="67%" bold color=black size="4">Raum Soll: </ftui-label>
<ftui-label [text]="Raum_Soll_temp" text="-" left="20%" top="72%" size="4" unit="°C" bold color=blue></ftui-label>
<ftui-label left="15%" top="78%" bold color=black size="4">Raum Absenk: </ftui-label>
<ftui-label [text]="Raum_Absenk_temp" text="-" left="20%" top="83%" size="4" unit="°C" bold color=blue></ftui-label>
<ftui-label left="49%" top="68%" bold color=black size="4">Soll: </ftui-label>
<ftui-label [text]="Wasser_Soll" text="-" left="48%" top="73%" size="4" unit="°C" bold color=blue></ftui-label>
<ftui-label left="65%" top="30%" bold color=black size="4">Ofen: </ftui-label>
<ftui-label [text]="COE_Node_RSM610_32:T.Kessel_VL" text="-" left="65%" top="40%" size="4" unit="°C" bold color=white></ftui-label>
<ftui-label left="77%" top="30%" bold color=black size="4">Speicher: </ftui-label>
<ftui-label [text]="COE_Node_RSM610_32:T.Speicher_oben" text="-" left="79%" top="40%" size="4" unit="°C" bold color=white></ftui-label>
<ftui-label left="55%" top="78%" bold color=black size="4">Systemdruck (0.8 - 2 bar): </ftui-label>
<ftui-label [text]="cmi:Systemdruck" text="-" left="68%" top="83%" size="4" unit="°C" bold color=white></ftui-label>
<ftui-label left="55%" top="90%" bold color=black size="4">Keller: </ftui-label>
<ftui-label [text]="cmi:T.Keller" text="-" left="68%" top="90%" size="4" unit="°C" bold color=white></ftui-label>
</ftui-image>
</ftui-grid-tile>
</ftui-tab-view>Mache ich etwas falsch, oder geht es mit einem Dropdown nicht?
Darüber hinaus ist die Positionierung der Elemente ein Problem, wenn ich dieses View in ein separates HTML auslagere und per Content in ein Swiper platziere, dann gehen die Positionen verloren (siehe Anhang). Kann mir jemand helfen und sagen, wie ich dieses besser umsetze?
Danke!
Ralph
HILFE !!
Ich habe ein Update von FTUI3 durchgeführt:
2024.01.17 11:55:47 1: Downloading https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
2024.01.17 11:55:48 1: UPD www/ftui/components/grid/grid-tile.component.css
2024.01.17 11:55:48 1: UPD www/ftui/components/label/label.component.js
2024.01.17 11:55:48 1: UPD www/ftui/components/popup/popup.component.js
2024.01.17 11:55:48 1: UPD www/ftui/components/swiper/swiper.component.js
2024.01.17 11:55:48 1: UPD www/ftui/examples/chart2.html
2024.01.17 11:55:48 1: UPD www/ftui/examples/colorpicker.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/contents/mobile-power.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/contents/mobile-solar.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/icon.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/mobile_full.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/popup.html
2024.01.17 11:55:50 1: UPD www/ftui/examples/swiper.html
2024.01.17 11:55:50 1: UPD www/ftui/ftui.css
2024.01.17 11:55:50 1: UPD www/ftui/modules/ftui/ftui.binding.js
2024.01.17 11:55:50 1: UPD www/ftui/modules/ftui/ftui.helper.js
2024.01.17 11:55:50 1: saving fhem.cfgund schon passt oder funktioniert in vielen Fällen die Formatierung nicht mehr. Wie kann ich die Formatierungen anpassen? Hier einige Beispiele:
Die Formatierung im Content-File (text-align="left") wird ignoriert:
GNU nano 7.2 Rollo.html
<ftui-row width="100%">
<ftui-row width="39%">
<ftui-label text-align="left" style="position:relative;" margin="1" color="white" size="3" @click="pop_{{Rollo_pop}}.open()"
[text]="{{Rollo}}:alias">
</ftui-label>
</ftui-row>
...
oder "span" im Content-File um nur zwei Beispiel zu nennen.
<span>
<ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
text="Gültig vom ">
</ftui-label>
<ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
[text]="DWD:{{Warn_NR}}_onset | toDate() | format('DD.MM.YYYY hh:mm')">
</ftui-label>
<ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
text="Uhr">
</ftui-label>
<ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
text="bis zum">
</ftui-label>
<ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
[text]="DWD:{{Warn_NR}}_expires | toDate() | format('DD.MM.YYYY hh:mm')">
</ftui-label>
<ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
text="Uhr">
</ftui-label>
</span>
Wer kann helfen?
Viele Grüße
Jürgen
PS: Das Update ist zum Glück nur auf dem Testsystem erfolgt 8)
Gibt es für ftui3 ein widget für die weekprofile der Heizkörperthermostate?
Für FTUI2 gab es ja ein passendes.
Hallo Jürgen,
zur Ausrichtung eines Labels verwende ich immer "align-items" im Eltern-Element, vermutlich aus Gewohnheit, aber es funktioniert 'immer'.
Hinsichtlich <span> schau einmal in den Entwicklertools, was aus dem <span> gemacht wird.
Gruß,
Matthias
Hallo Matthias,
danke für die Info. Ich habe genau so angefangen umzustellen. <span> habe ich durch <ftui-row> ersetzt und mi height bzw. wight ergänzt.
Aktuell habe ich nur noch ein Problem mit einer Tabelle:
<ftui-grid-tile row="1" col="11" height="3" width="7">
<header>RASPBERRY PI 3</header>
<table align="center" style="border:1px solid grey">
<tr>
<td style="border:2px solid grey;">
<ftui-label color="white" size="3" margin="1"
text="Uptime">
</ftui-label>
</td>
<td style="border:2px solid grey;">
<ftui-label color="white" size="3" margin="1"
[text]="pi_Sys:uptime_text">
</ftui-label>
</td>
<tr>
<tr>
<td style="border:2px solid grey;">
<ftui-label color="white" size="3" margin="1"
text="Letzter reboot">
</ftui-label>
</td>
<td style="border:2px solid grey;">
<ftui-label color="white" size="3" margin="1"
[text]="pi_Sys:starttime_text">
</ftui-label>
</td>
<tr>
<tr>
<td style="border:2px solid grey;">
<ftui-label color="white" size="3" margin="1"
text="Temperatur">
</ftui-label>
</td>
<td style="border:2px solid grey;">
<ftui-label color="white" size="3" margin="1"
[text]="pi_Sys:cpu_temp" unit=" °C">
</ftui-label>
</td>
<tr>
</table>
</ftui-grid-tile>
Viele Grüße
Jürgen
Hallo Jürgen,
ich versuche in einem FTUI3 Layout nicht zu mischen.
Hier eine Idee für den Weg:
<ftui-grid-tile row="1" col="11" height="3" width="7">
<ftui-grid-header>
<ftui-label text="RASPBERRY PI 3"></ftui-label>
</ftui-grid-header>
<ftui-row style="border:1px solid grey" height="33%">
<ftui-column style="border:2px solid grey" align-items ="left" width="60%">
<ftui-label color="white" size="3" margin="0 0 0 20px" text="Uptime">
</ftui-label>
</ftui-column>
<ftui-column style="border:2px solid grey" align-items ="left">
<ftui-label color="white" size="3" margin="0 0 0 20px" [text]="pi_Sys:uptime_text">123
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row align-items ="center" style="border:1px solid grey" height="33%">
<ftui-column style="border:2px solid grey" align-items ="left" width="60%">
<ftui-label color="white" size="3" margin="0 0 0 20px" text="Letzter reboot">
</ftui-label>
</ftui-column>
<ftui-column style="border:2px solid grey" align-items ="left">
<ftui-label color="white" size="3" margin="0 0 0 20px" [text]="pi_Sys:starttime_text">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row align-items ="center" style="border:1px solid grey" height="33%">
<ftui-column style="border:2px solid grey" align-items ="left"width="60%">
<ftui-label color="white" size="3" margin="0 0 0 20px" text="Temperatur">
</ftui-label>
</ftui-column>
<ftui-column style="border:2px solid grey" align-items ="left">
<ftui-label color="white" size="3" margin="0 0 0 20px" [text]="pi_Sys:cpu_temp" unit=" °C">
</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
Es ist sicher einen Versuch wert, welche Eigenschaften man den Eltern-Objekten zuweisen kann um sich Aufwand zu sparen (ist auf meiner ToDo, da ich bequem bin)
Gruß,
Matthias
P.S.: Die Info zu Margin findest du hier: https://forum.fhem.de/index.php?topic=115259.msg1269692#msg1269692 (https://forum.fhem.de/index.php?topic=115259.msg1269692#msg1269692)
Hi Matthias,
super. Vielen Dank. Ich musste zwar noch ein bisscgen nachjustieren, aber das "Grundgerüst" hat sehr gut geholfen.
Viele Grüße
Jürgen
Zitat von: Adimarantis am 15 Mai 2023, 09:21:49Gibt es eine Möglichkeit bei einem Knob mehr als einen Wert anzuzeigen?
Mein Anwendungsfall wäre jetzt der momentane Stromverbrauch brutto (echter Verbrauch ohne PV) und netto (Abzüglich PV).
Ich könnte mir aber auch vorstellen dass man min, max , avg oder ähnliches mit anzeigen will.
Option scheint zu sein die "desired value" zu missbrauchen, aber dass ist dann ja nur ein Punkt.
Evtl. eine nützliche Erweiterungsidee.
Wenn wir keinen Nutzen und/oder Mehrwert erlangen, ist es Sinnlos.
Mewus, Nils
Moin,
mein erster Gedanke ist, dafür das "Thermostat" von mr_petz zu verwenden, da kann man soll und ist angeben.
https://forum.fhem.de/index.php?topic=123084.0 (https://forum.fhem.de/index.php?topic=123084.0)
Ein Beispiel ist hier:
https://mr-petz.github.io/ftui/www/ftui/examples/thermostat.html (https://mr-petz.github.io/ftui/www/ftui/examples/thermostat.html)
Gruß,
Matthias
Zitat von: MDietrich am 17 Januar 2024, 15:51:58@M.Piet
ich hatte es so gemeint, du musst natürlich den Dummy durch dein Gerät ersetzen.
<ftui-switch [value]="dummy1:is_playing" (value)="dummy1:is_playing" states="0,1" color="error" texts='on,off'></ftui-switch>
Ich hoffe das klappt.
Gruß,
Matthias
Hey Matthias,
das ist schon mal super. Vielen Dank. Der Switch zeigt nun immer den richtigen Status an!!!
Aber, eine Kleinigkeit noch.
Spotify:is_playing zeigt durch 0 und 1 nur den Status an. Zum Steuern muss ich aber andere Befehle senden.
Genauer:
Einschalten:
set Spotify resume (daraus entsteht dann das Reading Spotify:is_playing:1)
Ausschalten
set Spotify pause (daraus entsteht dann das Reading Spotify:is_playing:0)
Hast du dazu noch eine Idee? Danke dir. 😊
Das sollte funktionieren:
<ftui-switch
[value]="dummy1:is_playing"
(value)="replace('0','pause') | replace('1','resume') | dummy1" states="0,1" color="error" texts='on,off'>
</ftui-switch>
Ggfs. musst du noch 'resume' und 'pause' tauschen. Ich hoffe es klappt.
Gruß,
Matthias
Zitat von: MDietrich am 19 Januar 2024, 10:20:33Das sollte funktionieren:
<ftui-switch
[value]="dummy1:is_playing"
(value)="replace('0','pause') | replace('1','resume') | dummy1" states="0,1" color="error" texts='on,off'>
</ftui-switch>
Ggfs. musst du noch 'resume' und 'pause' tauschen. Ich hoffe es klappt.
Gruß,
Matthias
Hey, vielen Dank!
Es funktioniert perfekt! Mein Tag war nicht umsonst, und ich verstehe nun endlich, wie das ganze funkioniert!
Ich trink heute Abend ein Bier auf dich!
Hallo zusammen,
ich benötige noch einmal Hilfe beim Thema Formatierung. Trotz width="auto" und height="auto" scheint das Frame zu breit zu sein. Wer hat eine Idee?
<ftui-column>
<ftui-column width="auto" height="auto" >
<ftui-label padding="1" size="3" text-align="center" style="position:relative;" class="bold" height="10%"
[text]="DWD:{{Warn_NR}}_headline">
</ftui-label>
<ftui-label padding="1" scroll text-align="center" style="position:relative;" size="3" top="-20px"
[text]="DWD:{{Warn_NR}}_description">
</ftui-label>
<ftui-label padding="1" scroll text-align="center" style="position:relative;" size="2" top="-10px"
[text]="DWD:{{Warn_NR}}_instruction" class="bold">
</ftui-label>
</ftui-column>
<ftui-row height="10%" width="75%">
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
text="Gültig vom ">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
[text]="DWD:{{Warn_NR}}_onset | toDate() | format('DD.MM.YYYY hh:mm')">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
text="Uhr">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
text="bis zum">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
[text]="DWD:{{Warn_NR}}_expires | toDate() | format('DD.MM.YYYY hh:mm')">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
text="Uhr">
</ftui-label>
</ftui-row>
</ftui-column>
Viele Grüße
Jürgen
Hallo Jürgen,
wie sieht den das Eltern-Element aus (da wo auch der Header drinsteht)?
Ich hebe es mit einem entsprechend großen "grid-tile" probiert und es sieht eigentlich normal aus.
<ftui-grid-tile row="5" col="2" height="4" width="6" shape="">
<ftui-column>
<ftui-column width="auto" height="auto" >
<ftui-label padding="1" size="3" text-align="center" style="position:relative;" class="bold" height="10%"
[text]="DWD:a_0_headline">
</ftui-label>
<ftui-label padding="1" scroll text-align="center" style="position:relative;" size="3" top="-20px"
[text]="DWD:a_0_description">
</ftui-label>
<ftui-label padding="1" scroll text-align="center" style="position:relative;" size="2" top="-10px"
[text]="DWD:a_0_instruction" class="bold">
</ftui-label>
</ftui-column>
<ftui-row height="10%" width="75%">
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
text="Gültig vom ">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
[text]="DWD:a_0_onset | toDate() | format('DD.MM.YYYY hh:mm')">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
text="Uhr">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
text="bis zum">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
[text]="DWD:a_0_expires | toDate() | format('DD.MM.YYYY hh:mm')">
</ftui-label>
<ftui-label size="2" color="green" top="" style="position:relative;" class="bold"
text="Uhr">
</ftui-label>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
Gruß,
Matthias
Hallo Matthias,
heute morgen sieht es bei mir auch gut aus. Es liegt wohl am bereitgestellten Text.
Viele Grüße
Jürgen
Hallo zusammen,
wie kann ich bei dem Pipe "map" ein Intervall angeben?
Bsp.: | map("0-10:an, 11-100:aus") So funktioniert es nicht.
Viele Grüße
Jürgen
Moin Jürgen,
da geht step('1:ok,6:warning,10:alert'),
in deinem Fall: | step('10:an 100:aus')
Gruß,
Matthias
Danke.
Manchmal sieht man denWald vor lauter Bäumen nicht.
Viele Grüße
Jürgen
Moin,
ich habe ein paar Fragen. Im Moment möchte ich die Windgeschwindigkeit von propolanta von "m/s" im "km/h" und "kts" auf Knopfdruck umrechnen.
Dazu habe ich erstmal, als Anfang diesen Code:
<ftui-grid-tile row="5" col="2" height="4" width="6" shape="">
<ftui-button states="m/s, kts, km/h"
[(value)]="d_DUMMY1">
<ftui-label [text]="d_DUMMY1" ></ftui-label>
</ftui-button>
<ftui-row>
<ftui-label text="Windgeschw. in m/s: "></ftui-label>
<ftui-label [text]="WetterProplanta:wind" unit=" m/s"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="Umrechnugsfaktor :"></ftui-label>
<ftui-label [text]="d_DUMMY1 | map('km/h:1.6 , kts:14.6 , m/s:1')"> </ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="neue Einheit :"></ftui-label>
<ftui-label [text]="d_DUMMY1"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="neuer Wert :"></ftui-label>
<ftui-label [text]="WetterProplanta:wind | multiply('d_DUMMY1 | map(`km/h:1.6 , kts:14.6 , m/s:1`)')"></ftui-label>
</ftui-row>
</ftui-grid-tile>
Fragen:
1) Wenn die Einheit per Button geändert wird, funktioniert das Mapping für den Umrechnungsfaktor nur wenn d_DUMMY1 den Wert "kts" hat. Ich habe keine Ahnung warum ?!? Der state des Dummy wird richtig gesetzt.
2) Als Ergebnis des Multiply bekomme ich immer "NaN" als Ergebnis, funktioniert multiply überhaupt mit einem Label?
Mir ist bewusst, das ich die Umrechnung auch mit einem DOIF machen könnte, aber ich denke ich muss FHEM nicht damit belasten.
Hat jemand eine Idee?
Danke im Voraus
Matthias
EDIT: Punkt 1: der "/" macht Probleme, wenn ich diesen durch den Text "PRO" ersetze, klappt es. Nur rechnen geht noch nicht ;-(
Hallo Matthias,
eventuell musst Du "/" encoden. Ich habe abe keine Ahnung in welche Form.
Viele Grüße
Jürgen
Ich habe einfach die "/" aus den states entfernt, das war einfach.
Letztendlich bin ich aber mit den Pipes toNumber map multiply und den " ' ´ ` nicht mehr weitergekommen.
Der neue Ansatz ist mit einem userreading und einer kleinen Formel in der 99_myUtils zu arbeiten.
Stand: Formel funtioniert:
##################################################
### Function to convert windspeed
##################################################
# input windspeed in m/s
# input unit for conversion (km/h, kts, bft)
sub WindSpeedConv($$) {
my ($windspeed, $unit) = @_;
my $conversion;
if ($unit eq "kmPROh")
{
$conversion = $windspeed * 3.6;
}
elsif ($unit eq "kts")
{
$conversion = $windspeed * 19.44;
}
elsif ($unit eq "mPROs")
{
$conversion = $windspeed * 1;
}
else
{
$conversion = "ERROR";
}
return $conversion;
}
Userreading funktioniert:
Internals:
FUUID 601ee2db-f33f-73da-412e-215666096e1329f3
NAME d_DUMMY1
NR 226
STATE kmPROh
TYPE dummy
eventCount 118
OLDREADINGS:
READINGS:
2024-01-27 06:16:27 speed 0
2024-01-27 06:16:27 state kmPROh
Attributes:
alias d_DUMMY1
room Dummy
userReadings speed {WindSpeedConv(ReadingsVal("WetterProplanta", "wind",0), ReadingsVal("d_DUMMY1", "state", ""))}
Das Reading "speed" einem Label zuzuweisen funktioniert nicht:
<ftui-button states="mPROs, kts, kmPROh"
[value]="d_DUMMY1:state | replace('state ','')"
(value)="d_DUMMY1">
<ftui-label [text]="d_DUMMY1:STATE" ></ftui-label>
</ftui-button>
</ftui-button>
<ftui-row>
<ftui-label text="Windgeschw. in m/s: "></ftui-label>
<ftui-label [text]="WetterProplanta:wind" unit=" m/s"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="Umrechnugsfaktor :"></ftui-label>
<ftui-label [text]="d_DUMMY1| map('mPROs:1 , kts:14.6 , kmPROh:1.6')"> </ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="neue Einheit :"></ftui-label>
<ftui-label [text]="d_DUMMY1"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="neuer Wert :"></ftui-label>
<ftui-label [text]="d_DUMMY1:speed)"></ftui-label>
</ftui-row>
Ich komme einfach nicht weiter, wo bohre ich mir gerade ein Loch ins Knie?
Matthias
EDIT: erledigt, am Ende war dann doch eine Klammer in der Zuweisung zu viel (vorletzte Zeile) :-[
EDIT2: Ich habe einmal ein Bild des Ergebnisses angehängt:
Kann man das circlemenu hinter einem label statt einem icon verstecken ohne dass nach oben und unten so ein großer Abstand entsteht?
Guten Abend Zusammen!
Ich möchte im Header auch einen Wert mit eintragen, was an sich auch funktioniert.
<ftui-grid-tile row="2" col="22" height="4" width="7" shape="round">
<ftui-grid-header color="red" >PV:<ftui-label [text]="PV_Wechselrichter:PowerFlow_Site_P_PV" unit=" W"></ftui-label>
</ftui-grid-header>
</ftui-grid-tile>
Allerdings wird dabei die Zeile nach "PV:" umgebrochen.
Wie kann ich das verhindern?
VG,
Bozan
Versuch mal die pipe prepend():
<ftui-grid-tile row="2" col="22" height="4" width="7" shape="round">
<ftui-grid-header color="red" ><ftui-label [text]="PV_Wechselrichter:PowerFlow_Site_P_PV | prepend('PV: ')" unit=" W"></ftui-label>
</ftui-grid-header>
</ftui-grid-tile>
Super! Vielen Dank.
Gibt es irgendwo eine Auflistung, welche pipes, etc. in Ftui3 verwendbar sind?
Die Möglichkeiten sind ja anscheinend imens, nur woher soll man die alle kennen?
Ich glaube, es bedarf noch vieler "einfacher" Frage, bis ich einen ersten Überblick habe. ;)
Moin,
mehr Info zu den Pipes findest du hier:
https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js (https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js)
Gruß,
Matthias
Moin zusammen,
ich habe vor einigen Tagen mein zuverlässiges FHEM-System mittels "update all" aktualisiert (zuletzt Ende 2023 gemacht).
Nun beobachte ich in Tablet UI auf meinem Screen, dass der Status von Symbolen und Texten sporadisch aber auffallend sehr häufig nicht mehr aktualisiert wird.
FHEM im Hintergrund läuft fehlerfrei weiter und regelt das Haus wie gewünscht. An meinem FTUI3 Setup wurde nichts modifiziert.
Hat sich hier irgendwas signifikantes geändert in der letzten Zeit?
Hallo Dracolein,
bei mir wird alles in FTUI3 aktuallisiert. Alle Programme sind aktuell.
Viele Grüße
Jürgen
Ja ist echt komisch und ich kann es bisher noch nicht reproduzieren. Ich muss es noch einige Tage beobachten.
Hallo.
Möchte mich hiermit herzlich für das gewaltige Modul bedanken.
Wahnsinn was da alles geht, allein der swiper ist faszinierend. Muss mich jetzt dann um 13" Tablet umsehen.
Moin!
Zitat von: satprofi am 21 März 2024, 10:51:00Möchte mich hiermit herzlich für das gewaltige Modul bedanken.
Und genau solche Sätze sind es, die Programmierer wie setstate zu Höchstleistungen anspornen!
;D
Gruß
Sailor
Es könnte aber auch sein, daß das hier (https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=PD4C2XM2VTD9A&ssrt=1711057705943) setstate anspornen könnte. ;)
Ich stehe grad mal auf dem Schlauch.
Im vorliegenden Problem habe ich ein Image, welches alle 60 s aktualisiert wird.
Die Quelle Ihrerseits wird von einer IPCAM in fhem mittels
get IPCAM-DEVICE image bereitgestellt.
Dabei passiert es ab und zu, dass da ein weißes Bild statt richtigem Snapshot kommt. Warum auch immer. Da scheinen mir Timeouts eine Rolle zu spielen.
Natürlich kann ich bis zum nächsten automatischen Refresh warten, aber als sofort-wissen-wollender Mensch würde gerne per Klick auf das Image einen doppelten Refresh ausführen: einmal das get-IPCAM-image und anschließend der Refresh des Image:
Original:
<ftui-image interval="60" nocache src="http://192.168.0.144:8083/fhem/www/snapshots/schubidubi.png" border="0" style="background-color:white">
</ftui-image>
Den ersten Part habe ich schon mal mit
<ftui-image interval="60" onclick="ftuiApp.fhemService.sendCommand('get IPCAM image')
nocache src="http://192.168.0.144:8083/fhem/www/snapshots/schubidubi.png" border="0" style="background-color:white">
</ftui-image>
realisiseren können.
Wie bekomme ich jetzt noch ein manuellen geklickten Refresh des image?
Ich hatte irgendwie an sowas gedacht:
<ftui-image interval="60" onclick="ftuiApp.fhemService.sendCommand('get IPCAM image') updateImage()"
nocache src="http://192.168.0.144:8083/fhem/www/snapshots/schubidubi.png" border="0" style="background-color:white">
</ftui-image>
Aber das will nicht (Synthax error).
Hat jemand eine Lösung dafür inpetto?
NACHTRAG; ich hab's:
Das Semikolon hat gefehlt. Dann nur zwei mal draufklicken und alles ist tuppi.
<ftui-image interval="60" onclick="ftuiApp.fhemService.sendCommand('get IPCAM image');updateImage()"
nocache src="http://192.168.0.144:8083/fhem/www/snapshots/schubidubi.png" border="0" style="background-color:white">
</ftui-image>
irgendwann bei den letzten Updates muss sich etwas geändert haben mit der Symbol-Darstellung in Menüs. Bei mir sind diese plötzlich verschoben (siehe Bild). Alle anderen Symbole sind noch mittig. Hat vielleicht jemand das selbe Problem und eine Lösung parat?
Symbole verschoben (https://postimg.cc/62v4TmXh)
hier noch ein Teil vom Aufbau:
<ftui-grid cols="11" rows="7" margin="1" resize>
<ftui-grid-tile row="1" col="1" height="6" width="1" color="transparent" style="z-index:1">
<header class="size-0">Menü</header>
<ftui-column align-items="top" margin="0 27px 0 0">
<ftui-tab view="home" fill="solid" margin="0.5em" style="width:18px;height:40px" active>
<ftui-icon class="size-0" name="home"></ftui-icon>
</ftui-tab>
<ftui-tab view="heating" fill="solid" margin="0.5em" style="width:18px;height:40px">
<ftui-icon class="size-0" name="fire"></ftui-icon>
</ftui-tab>
<ftui-tab view="light" fill="solid" margin="0.5em" style="width:18px;height:40px">
<ftui-icon class="size-0" name="lightbulb"></ftui-icon>
</ftui-tab>
<ftui-tab view="rabbit" fill="solid" margin="0.5em" style="width:18px;height:40px">
<ftui-icon class="size-0" name="paw"></ftui-icon>
</ftui-tab>
Ich knobele am besten Weg, geschachtelte Tabs in FTUI3 darzustellen.
Genauer: Auf der Hauptseite soll es eine horizontale Leiste von <ftui-tab>-Elementen geben. Wenn der erste Tab aktiv ist, soll auf dem Rest der Seite etwas angezeigt werden, bei dem die erste Zeile wiederum eine horizontale Leiste von <ftui-tab>-Elementen ist. Die beim Klicken aber nur die darunter liegenden Inhalte (als <ftui-tab-view>) ändern. Die alleroberste Leiste aber soll sich dabei nicht ändern.
In FTUI2 konnte ich das sehr schön über pagebuttons realisieren.
in FTUI3 aber habe ich trotz diverser Versuche noch keinen Erfolg damit, die alleroberste Zeile von den darunter liegenden Kindern zu isolieren. Ha jemand einen Tipp für mich?
LG
pah
Ich weiß nicht ob es hilft, aber ich hab sowas wie ein Untermenü realisiert mit tabs im ersten Menü (z.B. Licht) und im Untermenü dann mit segment Button für die Räume. Die jeweils nicht angezeigten Räume mit Hidden isNot=Value ausblenden
<ftui-segment-button value="Wohnzimmer">
<ftui-icon name="scene_livingroom"></ftui-icon>
</ftui-segment-button>
Danke, eine ähnliche Krücke habe ich auch schon. Ist aber noch nicht ganz, was ich versuche: Nämlich den in einem Tab angezeigten Inhalt (also das Kind) weitgehend von der darüberliegenden Tab-Struktur zu isolieren. Mit den pagebuttons von FTUI2 ging das prima, ich kann damit sogar eine Seite mit einer komplett anderen FTUI-Instanz (auf einer anderen Maschine) einblenden.
LG
pah
Zitat von: Dracolein am 16 März 2024, 07:10:25Moin zusammen,
ich habe vor einigen Tagen mein zuverlässiges FHEM-System mittels "update all" aktualisiert (zuletzt Ende 2023 gemacht).
Nun beobachte ich in Tablet UI auf meinem Screen, dass der Status von Symbolen und Texten sporadisch aber auffallend sehr häufig nicht mehr aktualisiert wird.
FHEM im Hintergrund läuft fehlerfrei weiter und regelt das Haus wie gewünscht. An meinem FTUI3 Setup wurde nichts modifiziert.
Hat sich hier irgendwas signifikantes geändert in der letzten Zeit?
Hallo Dracolein, das Gleiche ist mir auch aufgefallen. Ich habe parallel noch FTUI 2 laufen und dort wird noch alles aktualisiert, was den Fehler in FHEM oder meinen Proxy-Settings vorerst weitestgehend ausschließt. Bist du denn hier weiter gekommen?
VG, Thomas
Zitat von: grossmaggul am 21 März 2024, 22:50:02Es könnte aber auch sein, daß das hier (https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=PD4C2XM2VTD9A&ssrt=1711057705943) setstate anspornen könnte. ;)
Und woher soll ich jetzt wissen, dass sich hinter "mstephan@shared-files.de" auch wirklich setstate verbirgt?
Gruß
Sailor
[OT]
Zitat von: Sailor am 09 April 2024, 08:10:26Und woher soll ich jetzt wissen, dass sich hinter "mstephan@shared-files.de" auch wirklich setstate verbirgt?
Und wie verifizierst du, dass es
sein Spendenbutton im repo (https://github.com/knowthelist/ftui?tab=readme-ov-file#donation) ist?
[/OT]
Zitat von: yersinia am 09 April 2024, 08:23:43[OT]
Zitat von: Sailor am 09 April 2024, 08:10:26Und woher soll ich jetzt wissen, dass sich hinter "mstephan@shared-files.de" auch wirklich setstate verbirgt?
Und wie verifizierst du, dass es sein Spendenbutton im repo (https://github.com/knowthelist/ftui?tab=readme-ov-file#donation) ist?
[/OT]
Ups... Überlesen Sorry :-[ Spende ist raus.
Gruß
Sailor
Hallo pah,
Nicht sicher ob ich richtig verstanden hab was du vor hast, aber ich hab so einen Balken unten mit dem ich meine Mediaplayer durchschalte.
Gruß
Eisix
Leider blicke ich das ganze Prinzip mit ftui-column,ftui-row,ftui-cell usw. noch nicht ganz.
Wie bekomme ich die Icons für den Fensterstatus untereinander?
Hab schon alles mögliche durchprobiert, es ist aber immer verschoben zueinander.
Hier mal meine Config
<ftui-grid-tile row="1" col="3" height="5" width="5" shape="round">
<header class="size-1"><ftui-label color="green">Wohnzimmer</ftui-label></header>
<ftui-row>
<ftui-column>
<ftui-thermostat
[(value)]="PID_Wohnzimmer:desired"
[temp]="PID_Wohnzimmer:measured"
[valve]="PID_Wohnzimmer:actuation"
[humidity]="netatmo_D70_ee_50_1a_ef_d4:humidity"
size="150"
min="15"
max="30"
>
</ftui-thermostat>
</ftui-column>
<ftui-column align-items="center" margin="2">
<ftui-row>
<ftui-icon align-items="right" class="size-2" [name]="Sensor_Terrassentuer | map('open: classic-window, closed: classic-window')"
[color]="Sensor_Terrassentuer | map('open: danger, closed: medium')">
</ftui-icon>
<ftui-label align-items="left">Terrasse</ftui-label>
</ftui-row>
<ftui-row>
<ftui-icon align-items="right" class="size-2" [name]="Sensor_Terrassentuer | map('open: classic-window, closed: classic-window')"
[color]="Sensor_Terrassentuer | map('open: danger, closed: medium')">
</ftui-icon>
<ftui-label align-items="left">Garten</ftui-label>
</ftui-row>
<ftui-row>
<ftui-icon align-items="right" class="size-2" [name]="Sensor_Terrassentuer | map('open: classic-window, closed: classic-window')"
[color]="Sensor_Terrassentuer | map('open: danger, closed: medium')">
</ftui-icon>
<ftui-label align-items="left">Sofa</ftui-label>
</ftui-row>
<ftui-row align-items="bottom">
<ftui-chart height="100px" width="90%" popup-target="pvleistung" >
<ftui-chart-data log="logdb" file="HISTORY" spec="PID_Wohnzimmer:measured"
fill background-color="#B4040420" color="#FF000070" point-radius="0"></ftui-chart-data>
</ftui-chart>
</ftui-row>
</ftui-column>
</ftui-row>
<ftui-segment [(value)]="HeizungWoziAutomatik">
<ftui-segment-button value="Manuell">
<ftui-label>Manuell</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="Automatik">
<ftui-label>Automatik</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="Urlaub">
<ftui-label>Urlaub</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="Abwesend">
<ftui-label>Abwesend</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>
Und noch eine Frage. Wie kann ich einen Slider umdrehen?
Also wenn Rolladen 100% ist, dann soll der Slider 0% anzeigen und umgekehrt.
Natürlich die zwischenwerte auch.
Grüsse,
Daniel
Bezüglich des Slider beantworte ich meine Frage mal selbst.
Habe eine gefühlte Ewigkeit den Threat hier durchgelesen und leider von hinten angefangen. Ziemlich weit vorne bin ich dann auf PIPE "scale" gestossen. Das ist dann genau das was ich benötigte.
Hier noch einmal für die Nachwelt meine Lösung
<ftui-slider [value]="EIB_Rolladen_Garten:ZumRechnen | scale(100,0,0,100)" (value)="scale(100,0,0,100) | EIB_Rolladen_Garten:value" max="100" is-vertical>
</ftui-slider>
Grüsse,
Daniel
Hallo zusammen,
seit dem letzten Update
2024.04.12 20:32:42.692 1: Downloading https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
2024.04.12 20:32:43.102 1: UPD www/ftui/components/dropdown/dropdown.component.css
2024.04.12 20:32:43.256 1: UPD www/ftui/components/swiper/swiper.component.js
2024.04.12 20:32:43.425 1: UPD www/ftui/examples/dropdown.html
2024.04.12 20:32:43.583 1: UPD www/ftui/examples/mobile_full.htmlScreenshot 2024-04-13 171418.png
wird der Dropdown-Pfeil unterhalb des Dropdown-Feldes angezeigt. Wie kann ich dies korrigieren?
Viele Grüße
Jürgen
passiert das auch bei der Beispielseite?
examples/dropdown.html
Wenn nicht, brauche ich mal deinen Code.
Hallo setstate,
leider ja.
Screenshot 2024-04-13 182732.png
Ich nutze hierbei Debian 12 (bookworm) und Firefox 124.0.2.
Viele Grüße
Jürgen
PS.: Unter Edge sieht es dagegen korrekt aus.
sollte jetzt auch wieder mit Firefox passen
Die Testseite (https://knowthelist.github.io/ftui/www/ftui/examples/dropdown.html) sieht schon einmal gut aus. Vielen Dank für die schnelle Anpassung.
Viele Grüße
Jürgen