FTUI version 3

mr_petz · 30 September 2022, 11:56:47

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

andies · 30 September 2022, 13:06:53

Es gibt eine sehr informative GitHub-Seite, da sollte man das notieren. Sonst müssen wir GitHub und Wikipedia aktuell halten.

mr_petz · 02 Oktober 2022, 17:17:12

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:

Code Auswählen


.digitOff
{
    fill: rgba(0,0,0,0.2);
}

.digitOn
{
    fill: red;
}

html

Code Auswählen


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

Code Auswählen


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

Code Auswählen


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

Code Auswählen


 <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

MrMorgan · 03 Oktober 2022, 15:39:06

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

mr_petz · 03 Oktober 2022, 17:59:44

@MrMorgan

Leider nein. Du musst das händig/manuell erledigen.
LG

MrMorgan · 03 Oktober 2022, 21:02:30

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.

mr_petz · 04 Oktober 2022, 07:54:55

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

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

Code Auswählen


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

OdfFhem · 09 Oktober 2022, 11:31:45

@Dracolein

FTUI3 wurde zuletzt am 19.07.2022 verändert ... jetzt ist die Frage, wann hast Du zuletzt ein Update abgeholt ?

mr_petz · 09 Oktober 2022, 11:47:46

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

Code Auswählen


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

Dracolein · 09 Oktober 2022, 15:05:47

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:

Code Auswählen Erweitern
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...

mr_petz · 09 Oktober 2022, 15:27:59

@Draco
Hast du das schon probiert?:
https://forum.fhem.de/index.php/topic,115259.msg1212122.html#msg1212122
Bsp.

Code Auswählen


<ftui-content [content]="Sonos_Play5 | getHTML('Sonos_Play5RG_Favourites')"></ftui-content>

Wenn du das html Reading auslesen willst.
LG

Dracolein · 09 Oktober 2022, 16:13:14

Hmm, das begreife ich spontan nicht. Ein alternatives Beispiel aus deinem Link sieht so aus:

Code Auswählen

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

Code Auswählen

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

mr_petz · 09 Oktober 2022, 16:23:03

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:
Code Auswählen Erweitern
<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...

Dracolein · 09 Oktober 2022, 16:34:20

Tja, wenn ich begreifen würde, was ich da sehe...