FTUI version 3

[C0mmanda]

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
Im normalen label klappt es jetzt mit fix(), im knob widget jedoch nicht

Code Auswählen Erweitern

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

[mr_petz]

für knob scale-decimals="1" (für die Scala) oder value-decimals="1"(fürs Reading)

LG

[C0mmanda]

Das wars!
Vielen Dank für deine Hilfe!

[C0mmanda]

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"

Code Auswählen Erweitern

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

[mr_petz]

...
zu3:

Code Auswählen Erweitern


        <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!):

Code Auswählen Erweitern


           <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

[mr_petz]

@C0mmanda

height mit angeben im knob...

Code Auswählen Erweitern


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

Code Auswählen Erweitern


<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

[curt]

In einer Device habe ich für mehrere Datenpunkte jeweils mehrere readings, das sieht etwa so aus:

Code Auswählen Erweitern


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

[DerFranke]

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?

[mr_petz]

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:

Code Auswählen Erweitern


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

Code Auswählen Erweitern


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

Code Auswählen Erweitern


@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

[C0mmanda]

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

[OdfFhem]

@C0mmanda

Code Auswählen Erweitern


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

[mr_petz]

Es würde auch

Code Auswählen Erweitern


replace(/ am.*/,'')

reichen...

Manchmal ist es so einfach... VIELEN DANK!
Was genau bewirken die / /  ?
Regex Anfang+Ende?

DANKE!

/ / sind für reguläre Ausdrücke vorgeshen

[C0mmanda]

Manchmal ist es so einfach... VIELEN DANK!
Was genau bewirken die / /  ?
Regex Anfang+Ende?

DANKE!

[DerFranke]

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

[Dracolein]

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