FTUI version 3

setstate · 11 Dezember 2020, 20:28:32

Zitat von: SirMarco am 09 Dezember 2020, 14:35:44
Verstehe ich das Richtig, das auch device Namen übergeben werden können?
Wenn ja, mag mir jemand ein Beispiel machen?

So wie im examples/content.html und dessen content-view1.html & content-view2.html

Code Auswählen

<ftui-checkbox slot="end" [(value)]="{{room}}_option"></ftui-checkbox>

OdfFhem · 11 Dezember 2020, 21:27:33

Ich habe das label-Beispiel noch einmal um #label-1.special, #label-2.special, #label-3.special erweitert:

Code Auswählen


<!DOCTYPE html>
<html>
  <head>
    <base href="../" />
    <script src="ftui.js"></script>
    <link href="ftui.css" rel="stylesheet">
    <link href="themes/ftui-theme.css" rel="stylesheet">
    <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <!--   <meta name="debug" content="2"> -->
    <title>FTUI Example Label</title>
    <style>
      .special {
        color: lightblue;
        animation: blink 1s step-start 0s infinite;
      }

      #label-1,#label-2,#label-3 .special {
        color: magenta;
        animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
      }

      #label-1.special,#label-2.special,#label-3.special {
        color: magenta;
        animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
      }

      .special:hover {
        color: #FF0000;
      }
      #label-1,#label-2,#label-3 .special:hover {
        color: #00FF00;
      }
    </style>
  </head>

  <body>
    <ftui-grid base-width="150" base-height="150">
      <ftui-grid-tile row="1" col="1" height="1" width="1">
        <header>label-1</header>
        <ftui-label id="label-1" class="special">Close1</ftui-label>
      </ftui-grid-tile>
      <ftui-grid-tile row="1" col="2" height="1" width="1">
        <header>label-2</header>
        <ftui-label id="label-2">
          <span class="special" slot="content">Close2</span>
        </ftui-label>
      </ftui-grid-tile>
      <ftui-grid-tile row="1" col="3" height="1" width="1">
        <header>label-3</header>
        <ftui-label>
          <span id="label-3" class="special" slot="content">Close3</span>
        </ftui-label>
      </ftui-grid-tile>
    </ftui-grid>
  </body>
</html>

Laut Browser gilt folgende Auswert-Reihenfolge (das oberste Element gewinnt):

für label-1:

Code Auswählen


#label-1.special { color: magenta; }
#label-1 .special:hover { color: #00FF00; }
#label-1 .special { color: magenta; }
.special { color: lightblue; }

magenta-Farbe gewinnt; gewünschte Animation ebenso; hover hat keinerlei Auswirkung mehr - auch nicht im hover-Fall.

für label-2:

Code Auswählen


.special { color: lightblue; }
#label-2 .special:hover { color: #00FF00; }
#label-2 .special { color: magenta; }

magenta-Farbe gewinnt nicht; gewünschte Animation auch nicht, da zwei Animationen überleben; hover funktioniert - wie gewünscht nur im hover-Fall.

für label-3:

Code Auswählen


#label-3.special { color: magenta; }
.special { color: lightblue; }

magenta-Farbe gewinnt; keine gewünschte Animation wird ausgeführt; hover hat keinerlei Auswirkung mehr - auch nicht im hover-Fall.

Keine der getesteten Beispiele funktioniert wie gewünscht/erwartet ...
#label-1 und auch #label-2 werten "#label-1 .special" bzw. "#label-2 .special" aus; Ebene spielt wohl keine Rolle ...
#label-1 und #label-3 befinden sich auf derselben Ebene wie .special, verhalten sich aber sehr verschieden ...

Wie könnte man das erwartete Verhalten erzielen?

setstate · 12 Dezember 2020, 01:52:37

ich weiß garnicht, was das Ziel sein soll. Soll eines der drei Varianten funktionieren? Warum so unterschiedliche Ebenen und so komplizierte Kaskadierung des Styles? Da muss man sehr auf die Spezifität der Regeln achten.

Ich werfe mal sowas in die Runde

alle 3 gleiche Animation, drei verschieden Normal-Farben, alle 3 gleiche Hover-Farbe

Code Auswählen


    <style>
      .special {
        color: lightblue;
        animation: blink 1s step-start 0s infinite; 
      }
      
      .special:hover,
      #label-3.special:hover,
      #label-2 .special:hover {
        color: #FF0000;
      }

      #label-2 .special {
        color: lightyellow;
      } 

      #label-3.special {
        color: lightseagreen;
      } 
    </style>

alle 3 gleiche Animation, alle 3 gleiche Normal-Farben, alle 3 gleiche Hover-Farbe

Code Auswählen


    <style>
      .special {
        color: lightblue;
        animation: blink 1s step-start 0s infinite; 
      }
      
      .special:hover {
        color: #FF0000;
      }
    </style>

3 verschiedene Animation, alle 3 gleiche Normal-Farben, alle 3 gleiche Hover-Farbe

Code Auswählen


    <style>
      #label-1 {
        animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
      }
      #label-2 {
        animation: shake 1s step-start 0s infinite; 
      }
      #label-3 {
        animation: blink 1s step-start 0s infinite; 
      }
      .special {
        color: lightblue;
      }
      .special:hover {
        color: #FF0000;
      }
    </style>

OdfFhem · 12 Dezember 2020, 06:33:51

@setstate

Zunächst mal vielen Dank für die Unterstützung.

Ich habe die in die Runde geworfenen Vorschläge mal in meinem label-Beispiel angetestet ...

Zitatalle 3 gleiche Animation, drei verschieden Normal-Farben, alle 3 gleiche Hover-Farbe

--> Farben erwartungsgemäß
--> Animation "blink" funktioniert wie gewünscht; verwendet man z.B. die Animation "hop", dann nur bei label-1

Zitatalle 3 gleiche Animation, alle 3 gleiche Normal-Farben, alle 3 gleiche Hover-Farbe

--> Farben erwartungsgemäß
--> Animation "blink" funktioniert wie gewünscht; verwendet man z.B. die Animation "hop", dann nur bei label-1

Zitat3 verschiedene Animation, alle 3 gleiche Normal-Farben, alle 3 gleiche Hover-Farbe

--> Farben erwartungsgemäß
--> Animation funktioniert einwandfrei wie gewünscht, falls man hop,shake,blink verwendet
--> verwendet man shake,blink,hop oder blink,hop,shake ... dann funktioniert es bei label-3 nicht

Weitere Tests haben ergeben, dass "blink" und auch "flash" wohl immer funktionieren.
"hop" sowie "shake" hingegen eher seltener.
Warum das so ist, ist mir im Moment noch schleierhaft ...

Das label-Beispiel habe ich noch mal ein wenig überarbeitet:

Code Auswählen


<!DOCTYPE html>
<html>
  <head>
    <base href="../" />
    <script src="ftui.js"></script>
    <link href="ftui.css" rel="stylesheet">
    <link href="themes/ftui-theme.css" rel="stylesheet">
    <link href="favicon.ico" rel="icon" type="image/x-icon" />

    <title>FTUI Example Label</title>
    <style>
      #label-1 { color: lightblue; animation: shake 3s step-start 0s infinite; }
      #label-2 { color: lightyellow; animation: shake 3s step-start 0s infinite; }
      #label-3 { color: lightgreen; animation: shake 3s step-start 0s infinite; }

      .special { color: orange; animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1); }
      #label-1.special { color: blue; }
      #label-2 .special { color: yellow; }
      #label-3.special { color: green; }
      #label-1.special { animation: flash .8s infinite ease-out; }
      #label-2 .special { animation: flash .8s infinite ease-out; }
      #label-3.special { animation: flash .8s infinite ease-out; }

      .special:hover { color: #FFFFFF; }
      #label-1.special:hover { color: #FF0000; }
      #label-2 .special:hover { color: #00FF00; }
      #label-3.special:hover { color: #0000FF; }
    </style>
  </head>

  <body>
    <ftui-grid base-width="150" base-height="150">
      <ftui-grid-tile row="1" col="1" height="1" width="1">
        <header>label-0</header>
        <ftui-label class="special">Close1</ftui-label>
      </ftui-grid-tile>
      <ftui-grid-tile row="1" col="2" height="1" width="1">
        <header>label-1</header>
        <ftui-label id="label-1" class="special">Close1</ftui-label>
      </ftui-grid-tile>
      <ftui-grid-tile row="1" col="3" height="1" width="1">
        <header>label-2</header>
        <ftui-label id="label-2">
          <span class="special" slot="content">Close2</span>
        </ftui-label>
      </ftui-grid-tile>
      <ftui-grid-tile row="1" col="4" height="1" width="1">
        <header>label-3</header>
        <ftui-label>
          <span id="label-3" class="special" slot="content">Close3</span>
        </ftui-label>
      </ftui-grid-tile>
    </ftui-grid>
  </body>
</html>

Anmerkungen dazu:

Einige CSS-Regeln habe ich aufgesplittet, um sie gezielt aktivieren bzw. deaktivieren zu können - dies hat aber wohl keine unerwarteten Nebenwirkungen.
label-0 ist der allgemeine Fall - ohne <id>. Funktioniert wohl einwandfrei.
Reine "<id>"- und verknüpfte "<id> .special"-Fälle werden im verschachtelten label-2-Fall gemixt, in den anderen ersetzt. Probleme gäbe es wohl nur bei den scheinbar nicht anwendbaren Animationen.
Die aktuell hinterlegten CSS-hover-Regeln funktionieren einwandfrei. Deaktiviert man die <id>-bezogenen CSS-hover-Regeln, dann klappt hover nur im allgemeinen label-0-Fall.

Bei meiner hauptsächlich verbleibenden Frage geht es um die problematischen Animationen ... wieso sind diese nicht generell anwendbar ? ...

setstate · 12 Dezember 2020, 09:56:18

Zitat von: OdfFhem am 12 Dezember 2020, 06:33:51
Bei meiner hauptsächlich verbleibenden Frage geht es um die problematischen Animationen ... wieso sind diese nicht generell anwendbar ? ...

Das habe ich auch schon bemerkt. Label-1 hat zum Beispiel auch Probleme mit Blink im Safari, im Chrome geht es.

Es könnte daran liegen, das einige Konstellationen die Veränderung der im Keyframe geänderten Eigenschaften, nicht unterstützen. Genaues kann ich dir da auch nicht sagen.

moonsorrox · 13 Dezember 2020, 11:54:29

Kann die Uhr als analog Uhr dargestellt werden mit den Anpassungen der Zeiger, wie bei Version 2.x.x

setstate · 13 Dezember 2020, 12:07:56

Zitat von: moonsorrox am 13 Dezember 2020, 11:54:29
Kann die Uhr als analog Uhr dargestellt werden mit den Anpassungen der Zeiger, wie bei Version 2.x.x

nein, nur wenn ein geneigter Entwickler solch eine Uhr für V3 erstellt.

grossmaggul · 13 Dezember 2020, 13:37:52

Das lässt sich doch relativ einfach selber einbinden.

Ich habe das so gemacht:

Auf dieser Webseite eine schöne analoge Uhr zusammenbasteln und mit dem folgenden Schnipsel in ftui eingebunden.

Code Auswählen

<ftui-grid-tile row="1" col="2" height="2" width="2" shape="round" class="semitransparent">
            <ftui-row>
                <ftui-column>
                    <ftui-cell>
                        <!-- Bahnhofsuhr -->
                        <object data="images/station-clock.svg" type="image/svg+xml" width="96" height="96">
                        <param name="dial"               value="din 41091.1"/>
                        <param name="hourHand"           value="din 41092.3"/>
                        <param name="minuteHand"         value="din 41092.3"/>
                        <param name="secondHand"         value="german"/>
                        <param name="minuteHandBehavior" value="stepping"/>
                        <param name="secondHandBehavior" value="stepping"/>
                        <param name="secondHandStopToGo" value="yes"/>
                        <param name="secondHandStopTime" value="1.5"/>
                        <param name="backgroundColor"    value="rgba(150,150,150,150)"/>
                        <param name="dialColor"          value="rgb(40,40,40)"/>
                        <param name="hourHandColor"      value="rgb(20,20,20)"/>
                        <param name="minuteHandColor"    value="rgb(20,20,20)"/>
                        <param name="secondHandColor"    value="rgb(160,50,40)"/>
                        <param name="axisCoverColor"     value="rgb(20,20,20)"/>
                        <param name="axisCoverRadius"    value="7"/>
                        <param name="updateInterval"     value="50"/>
                    </object>
                    </ftui-cell>
                    <ftui-cell>
                        <ftui-clock format="eeee" class="size-1"></ftui-clock>
                        <ftui-clock format="DD.MM." class="size-2"></ftui-clock>
                    </ftui-cell>
              </ftui-column>
            </ftui-row>
        </ftui-grid-tile>

Das sieht in meinem Fall dann so aus, wie im angehängten Bild.

Ich finde, die sehen besser aus, als jede mit css zusammengefrickelte Analoguhr.

SirMarco · 13 Dezember 2020, 15:17:04

Hallo zusammen

Besteht die Möglichkeit sich im Button ein Image anzeigen zulassen?
Habe es so probiert, Button funktioniert, aber Image wird nicht angezeigt. Der Pfad zum Bild korrekt

Code Auswählen

    <ftui-column height="80px">
        <ftui-button  fill="transparent" 
        [value]="{{device}}"
        (value)="{{device}}" 
        states="favorites SWR3">
        <ftui-image src="http://192.168.2.30:82/images/radio/radio_swr3.png" width="100"></ftui-image>
        </ftui-button>
        <ftui-label>SWR3</ftui-label>
      </ftui-column>

Grüsse

moonsorrox · 13 Dezember 2020, 15:55:41

Zitat von: grossmaggul am 13 Dezember 2020, 13:37:52
Das lässt sich doch relativ einfach selber einbinden.
Ich finde, die sehen besser aus, als jede mit css zusammengefrickelte Analoguhr.

ich fand meine angepaßte gar nicht so schlecht, schau mal mein Screenshot 1... sie passt zumindest in mein Design.
Aber mal schauen ob man das auf dieser Seite evtl. hinbekommt.

EDIT:/7 jetzt erinnere ich mich... daher habe ich meine ja

Ich habe aber nochmal eine Frage wie bekomme ich die Icons "größer" und "enger" zusammen, denn "large" bringt nicht unbedingt ein viel größeres Icon zustande, klar könnte ich mir eine weitere Klasse bauen, aber evtl. übersehe ich was.?
Screenshot 2

Übrigens die Icons sind nicht der Burner, da fehlen ja sämtliche Rollladen Icons, denke aber da wir noch in einer sehr frühen Phase sind kommt das später, würde da gerne noch die "oa_icons" nutzen.

octek0815 · 13 Dezember 2020, 16:00:06

Zitat von: moonsorrox am 13 Dezember 2020, 15:55:41
ich fand meine angepaßte gar nicht so schlecht, schau mal mein Screenshot 1... sie passt zumindest in mein Design.
Aber mal schauen ob man das auf dieser Seite evtl. hinbekommt.

Ich habe aber nochmal eine Frage wie bekomme ich die Icons "größer" und "enger" zusammen, denn "large" bringt nicht unbedingt ein viel größeres Icon zustande, klar könnte ich mir eine weitere Klasse bauen, aber evtl. übersehe ich was.?
Screenshot 2

Übrigens die Icons sind nicht der Burner, da fehlen ja sämtliche Rollladen Icons, denke aber da wir noch in einer sehr frühen Phase sind kommt das später, würde da gerne noch die "oa_icons" nutzen.

Die Größen heißen jetzt size-0, size-1, size-2...

Eisix · 13 Dezember 2020, 16:00:16

OA icons kannst du nutzen z.B. so

Code Auswählen


                        <ftui-icon class="size-1"
                                path="../images/openautomation"
                                [name]="Unifi:Viera | map('.*:it_television')"
                                [color]="Unifi:Viera  | map('connected:mygreen, disconnected:grey')">
                        </ftui-icon>

Gruß
Eisix

moonsorrox · 13 Dezember 2020, 16:28:07

Zitat von: octek0815 am 13 Dezember 2020, 16:00:06
Die Größen heißen jetzt size-0, size-1, size-2...

DANKE
ich hatte im github nur "small" | "normal" | "large" gefunden, weil bei den Icons auch normal drin stand... etwas verwirrend, dann werde ich das mal mit den Größen machen.

Zitat von: Eisix am 13 Dezember 2020, 16:00:16
OA icons kannst du nutzen z.B. so

Code Auswählen Erweitern
<ftui-icon class="size-1" path="../images/openautomation" [name]="Unifi:Viera | map('.*:it_television')" [color]="Unifi:Viera | map('connected:mygreen, disconnected:grey')"> </ftui-icon>

Gruß
Eisix

super danke werde ich gleich mal einbauen

moonsorrox · 13 Dezember 2020, 16:54:05

Zitat von: grossmaggul am 13 Dezember 2020, 13:37:52
Das lässt sich doch relativ einfach selber einbinden.

ist die Uhr bei dir zu sehen:?
Ich hatte nämlich gestern schon probiert und deshalb heute meine Frage, denn bei mir ist keine Uhr zu sehen und da dachte ich mir, dass es nicht funktioniert mit diesen Parametern $:-\$

Ich denke man braucht noch ein svg Icon, sonst wird das wohl nichts

setstate · 13 Dezember 2020, 17:05:05

Zitat von: Eisix am 13 Dezember 2020, 16:00:16
OA icons kannst du nutzen z.B. so

Code Auswählen Erweitern
<ftui-icon class="size-1" path="../images/openautomation" [name]="Unifi:Viera | map('.*:it_television')" [color]="Unifi:Viera | map('connected:mygreen, disconnected:grey')"> </ftui-icon>

Gruß
Eisix

Der Iconname ändert sich doch nie?

Dann würde auch ein

Code Auswählen

name="it_television"

ausreichen