FTUI version 3

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

mr_petz · 28 Februar 2022, 07:42:25

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

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

yersinia · 28 Februar 2022, 08:05:54

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:

Code Auswählen

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

grossmaggul · 28 Februar 2022, 10:06:18

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.

Code Auswählen


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

mr_petz · 28 Februar 2022, 12:25:14

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

Code Auswählen


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

GSK19 · 28 Februar 2022, 12:31:19

Zitat von: mr_petz am 28 Februar 2022, 07:42:25
Ich habe mich mal der Sache angenommen

Perfekt - großes Dankeschön an Dich!

Medel · 28 Februar 2022, 18:25:54

Sollten die Farben in der color-attributes.css nicht alle möglich sein?

mr_petz · 28 Februar 2022, 18:43:35

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

Medel · 28 Februar 2022, 19:24:04

Aber

Code Auswählen


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

mr_petz · 28 Februar 2022, 20:16:17

Verstehe jetzt glaube was du meinst...
Da müsstest du so rangehen mit style.

Code Auswählen


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

Code Auswählen


[color="teal"]{
   --color-base: #20c997;
}

Dann kannst du auch mit color="teal" arbeiten. oder halt mit style...

Medel · 28 Februar 2022, 20:28:34

Das mit

Code Auswählen


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

mr_petz · 28 Februar 2022, 20:33:14

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

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

mr_petz · 28 Februar 2022, 21:19:55

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

Medel · 28 Februar 2022, 22:13:00

Hier der Code
index.html:

Code Auswählen


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

Code Auswählen


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