FTUI version 3

[setstate]

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.

Code Auswählen Erweitern


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


[stefan-dd]

Ich möchte in einem Popup ein schließen Button einbauen.
In FTUI2 hatte ich das so gelöst.

Code Auswählen Erweitern

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

[mr_petz]

@stefan-dd

So zum Beispiel?:

Code Auswählen Erweitern


  <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

[stefan-dd]

Danke, beide Probleme gelöst.

[curt]

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?

ja, ich schraube da manchmal herum, wenn sich die Anforderungen konkretisieren.

Ja, klar.

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.

[Wolfgang Hochweller]

Wenn ich das bei Chartdata angebe ;

Code Auswählen Erweitern


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

[OdfFhem]

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.

Code Auswählen Erweitern


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


[Wolfgang Hochweller]

Ah, ok.

Dann war das schon immer so ?
Hab ich wohl bisher Glueck gehabt ...
Wenn es weiter nichts ist, danke.

[hackepeter]

Nabend zusammen,

ich habe noch Ansichtsprobleme bei den Müll Terminen, wo ich nicht weiterkomme.

Code Auswählen Erweitern

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

[curt]

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.

Code Auswählen Erweitern

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;

Code Auswählen Erweitern


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

[Wolfgang Hochweller]

Kann ich erreichen, dass bei einem Popup-Menu der Rest des Schirms inaktiv bleibt, solange das Popup geöffnet ist ?

[setstate]

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?

[mr_petz]

@setstate
Du kannst es doch auch per css im template() Teil vom popup Code lösen:

Code Auswählen Erweitern


      <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

[setstate]

haben es ja schon per css gelöst (wenn das das Ziel von Wolfgang war), aber ohne guten Namen will ich das nicht freigeben

Code Auswählen Erweitern


:host([no-click]) .overlay {
  pointer-events: none;
}


[mr_petz]

Ok. Habe ich nicht gewusst.
Habe paar Vorschläge:

Code Auswählen Erweitern


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

LG mr_petz

Edit: einen hatte ich noch