Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema

curt

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?
RPI 4 - Jeelink HomeMatic Z-Wave

mr_petz

#2026
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...

megadodopublications

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.

Wetterhexe

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

setstate

#2029
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.

Wetterhexe

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

SirMarco

Hallo setstate

Gibt es eine Möglichkeit die visibleDuration vom vanilla-notify über eine variable zu ändern?

Grüsse


curt

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?
RPI 4 - Jeelink HomeMatic Z-Wave

curt

#2033
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.)
RPI 4 - Jeelink HomeMatic Z-Wave

OdfFhem

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

mr_petz

@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

tomster

#2036
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.

setstate

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>

Wetterhexe

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

setstate

Hast du schon ein Update gemacht? Ich habe gestern zwei Änderungen gemacht. Alle icons sollten jetzt bunt werden.