FTUI version 3

[Eisix]

Bastele gerade an meiner Lüftung.

Code Auswählen Erweitern


<div class="cell">
        <ftui-circlemenu direction="top-half">
                <ftui-icon class="size-3"
                        path="../images/openautomation"
                        [name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_automatic, off:power-off')"
                        [color]="Luefter:state  | map('auto:mygreen, man:mygreen, off:mygreen')"
                ></ftui-icon>
                        <ftui-button class="size-3" shape="circle" color="light" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
                                <ftui-icon name="power-off" color="mygreen"></ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="dark" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
                                <ftui-icon class="size-5" color="mygreen">1</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="medium" fill="outline" (value)="set Luefter man;setreading Luefter stufe 2">
                                <ftui-icon class="size-5" color="mygreen">2</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
                                <ftui-icon class="size-5" color="mygreen">3</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
                                <ftui-icon class="size-5" color="mygreen">4</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
                                <ftui-icon class="size-2"
                                        path="../images/openautomation"
                                        name="vent_ventilation_level_automatic"
                                        color="mygreen"
                                ></ftui-icon>
                        </ftui-button>
        </ftui-circlemenu>
        <ftui-badge
                color="mygreen"
                [text]="Luefter:stufe">
        </ftui-badge>
</div>

Zwei Fragen:
Das Badge legt sich nicht über das circlemenue sondern wird eine Zeile tiefer gepackt, geht nicht oder habe ich einen Fehler?

Ist es möglich beim Button ein fill="solid" und ein fill="outline" übereinander zu legen? Also farbiger Hintergrund, Kreis und dann Icon oder Text?

Gruß
Eisix

[setstate]

Muss ich mir heute Abend live ansehen.

[SirMarco]

Riesen Danke an Alle  Genial was ihr hier macht....!

Hat jemand eine Idee wie ich einen Apache2 Webserver konfigurieren muss, damit die svg's angezeigt werden?
Bekomme 404 Fehler beim öffnen der Page. Die Pfadangaben sind korrekt

Code Auswählen Erweitern

<VirtualHost *:83>
    ServerAdmin webmaster@localhost
    ServerName ftui3
    ServerAlias www.ftui3
    DocumentRoot /var/www/ftui3
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    <Directory /var/www/ftui3>
          Options -Indexes
          AllowOverride All
  AddType text/css .css
  AddType text/javascript .js
    </Directory>

    <IfModule mod_dir.c>
        DirectoryIndex index.php index.html index.cgi index.pl  index.xhtml index.htm
    </IfModule>
</VirtualHost>

Danke

Gruss
SirMarco

[setstate]

Mit Apache kann ich dir leider nicht helfen. Ich nutzte den lighttpd, den Pi-Hole mitbringt und habe nur einen symlink von /opt/fhem/www/ftui nach /var/www/html/ftui gesetzt. FHEMWEB ist mir auch zu langsam geworden. Mit Freezemon finde ich auch keine Ursache. Dort erscheint jeder Funktionsaufruf mit 1-2 Sekunden freeze.

[Eisix]

Habe ein Problem mit der Formatierung oder besser ein nicht konsistentes Verhalten.

Code Auswählen Erweitern


<div class="row">
               <p style="text-align:center">
                        <ftui-icon class="size-2"
                                path="../images/openautomation"
                                [name]="Terrassentuer_WZ:state | map('open:,fts_door_slide_2w_open_lr, closed:fts_door_slide_2w')"
                                [color]="Terrassentuer_WZ:state  | map('open:red, closed:mygreen')"></ftui-icon>
                        </ftui-icon>Terrassentür
                </p>
                 .
                 .
                 .
</div>

platziert Terrassentür neben das Icon

Code Auswählen Erweitern


<div class="row">
                <p style="text-align:center">
                        <ftui-button (value)="GaragenMotor_unten" states="A0" fill="">
                        <ftui-icon class="size-2"
                                path="../images/openautomation"
                                [name]="Garage_unten:state | map('open:fts_garage_door_10, closed:fts_garage_door_100')"
                                [color]="Garage_unten:state | map('closed:mygreen,open:red')"
                        ></ftui-icon>
                        </ftui-button>unten
                </p>
                 .
                 .
                 .
</div>

platziert unten unter dem Icon.

Beide Texte sollten zentral unter dem Icon stehen. Was mit einem zusätzlichen "column" auch funktioniert.

Code Auswählen Erweitern


                <div class="column cell"
                <p style="text-align:center">
                        <ftui-icon class="size-2"
                                path="../images/openautomation"
                                [name]="Terrassentuer_WZ:state | map('open:,fts_door_slide_2w_open_lr, closed:fts_door_slide_2w')"
                                [color]="Terrassentuer_WZ:state  | map('open:danger, closed:mygreen')"></ftui-icon>
                        </ftui-icon>Terrassentür
                </p>
                </div>



Gruß
Eisix

[grossmaggul]

Nur als Anmerkung, soweit ich das mitbekommen habe gibt es jetzt eine <ftui-column> und auch eine <ftui-row> wenn mich nicht alles täuscht.

[setstate]

genau

Code Auswählen Erweitern


<ftui-row>
   <ftui-label>links</ftui-label>
   <ftui-label>rechts</ftui-label>
</ftui-row>


Code Auswählen Erweitern


<ftui-row>
<ftui-column>
   <ftui-label>oben</ftui-label>
   <ftui-label>unten</ftui-label>
</ftui-column>
</ftui-row>



[Eisix]

Danke, nur leider geht es damit nicht 

Code Auswählen Erweitern


<ftui-row>
                <ftui-column>
                <p style="text-align:center">
                        <ftui-icon class="size-2"
                                path="../images/openautomation"
                                [name]="Terrassentuer_WZ:state | map('open:,fts_door_slide_2w_open_lr, closed:fts_door_slide_2w')"
                                [color]="Terrassentuer_WZ:state  | map('open:danger, closed:mygreen')"></ftui-icon>
                        </ftui-icon>Terrassentür
                </p>
                </ftui-column>
</ftui-row>


Ich will eigentlich nur eine Reihe von Icons mit einer Beschriftung mittig darunter.
Wo ist mein Fehler?

Gruß
Eisix

[torte]

ich würd ma probieren


<ftui-icon>Terrassentür</ftui-icon>

irgenwie ist das tag </ftui-icon> zuviel in deinen Zeilen es fehlt das open <ftui-icon>

grüße
torte

PS: ü in HTML ist nicht so gut schreibt man in HTML eigentlich so    &uuml;

[setstate]

Ich will eigentlich nur eine Reihe von Icons mit einer Beschriftung mittig darunter.

Code Auswählen Erweitern


<body>
  <ftui-grid base-width="100" base-height="90">
    <ftui-grid-tile row="1" col="1" height="2" width="3">
      <header>COLUMNS</header>
      <ftui-row>
        <ftui-column space="between">
          <ftui-icon class="size-2"
                     path="../images/openautomation"
                     name="fts_garage_door_10">
          </ftui-icon>
          <ftui-label>between</ftui-label>
        </ftui-column>       
        <ftui-column>
          <ftui-icon class="size-2"
                     path="../images/openautomation"
                     name="fts_garage_door_30"
                     color="green">
          </ftui-icon>
          <ftui-label>default</ftui-label>
        </ftui-column>
        <ftui-column space="evenly">
          <ftui-icon class="size-2"
                     path="../images/openautomation"
                     name="fts_garage_door_60"
                     color="red">
          </ftui-icon>
          <ftui-label>evenly</ftui-label>
        </ftui-column>
        <ftui-column height="80px">
          <ftui-icon class="size-2"
                     path="../images/openautomation"
                     name="fts_garage_door_90"
                     color="brown">
          </ftui-icon>
          <ftui-label>height-80</ftui-label>
        </ftui-column>       
      </ftui-row>
    </ftui-grid-tile>
  </ftui-grid>
</body>


Das space-Attribute habe ich gerade erst eingebaut.

[setstate]

Das Badge legt sich nicht über das circlemenue sondern wird eine Zeile tiefer gepackt, geht nicht oder habe ich einen Fehler?

es fehlte noch eine ftui-circlemenu ~ ftui-badge CSS-Regel ähnlich zu ftui-icon ~ ftui-badge (Update ist auf Github)

[grossmaggul]

Eine kurze Zwischenfrage, kann der knob auch 360°?

[setstate]

Eine kurze Zwischenfrage, kann der knob auch 360°?

ja

Code Auswählen Erweitern


    <ftui-grid-tile row="4" col="1" height="1" width="1">
      <header>360° start right</header>
      <ftui-knob [(value)]="dummy1" start-angle="0" end-angle="359" offset-y="0"></ftui-knob>
    </ftui-grid-tile>

    <ftui-grid-tile row="4" col="2" height="1" width="1">
      <header>360° start left</header>
      <ftui-knob [(value)]="dummy1" start-angle="-179" end-angle="180" offset-y="0"></ftui-knob>
    </ftui-grid-tile>


dicker geht auch

Code Auswählen Erweitern



    <ftui-grid-tile row="4" col="3" height="1" width="1">
      <header>360°</header>
      <ftui-knob [(value)]="dummy1" start-angle="-179" end-angle="180" offset-y="0" stroke-width="40" ></ftui-knob>
    </ftui-grid-tile>


[grossmaggul]

Ah, sehr schön, danke!

[Eisix]

@setstate
hab gerade den aktuellen Stand gezogen. Mir ist noch aufgefallen das
bei weather.component.js die Auswahlmöglichkeit für die Iconsets fehlt.

Sollte das nicht so in der Art funktionieren?

Code Auswählen Erweitern


                        <ftui-weather [iconSet]="kleinklima" [condition]="Wetter:fc0_weatherDay"></ftui-weather>

Hatte es vorher hardcoded in der weather.component

Gruß
Eisix