FTUI version 3

[curt]

mehr kann ich dir da nicht helfen.

Du hast mir -nicht zum ersten Mal- sehr geholfen. Hier mit einem Denkanstroß: Das wird besser mit userreadings (100 - x) gelöst.

Zur Allzweckwaffe ftui-meter habe ich noch zwei Fragen:

* Die Ecken sind da ja abgerundet. Kann ich die Stärke der Rundung irgendwie beeinflussen? Hintergrund: In einem Fall möchte ich gar keine Rundung, da wäre eckig sehr schön.

* Die Hintergrundfarbe des ftui-meter ist ja so ein mittleres grau. Kann ich diese Hintergrundfarbe ändern?

[OdfFhem]

@curt

Es gibt u.a. folgende css-Variablen, die z.B. über das style-Attribut gesetzt werden können (ungetestet):

Code Auswählen Erweitern


style="--meter-border-radius: 0; --meter-background-color: red;"


[C0mmanda]

@C0mmanda

Schau dir dazu das content example an um in der index die ftui-tab-views auszulagern:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/content.html
Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/content.html

darin verweisen die contents auf die entsprechenden Files:
https://github.com/knowthelist/ftui/tree/master/www/ftui/examples/contents

LG mr_petz

Danke für den Hinweis.
Ganz zum Ziel bringen mich die Beispiele aber leider noch nicht...

Der Verweis auf die (ausgelagerte) Datei ist ja kein Problem...

Code Auswählen Erweitern

  <ftui-tab-view id="View1">
      <ftui-content file="examples/contents/content-view1.html" room="Room1"></ftui-content>
  </ftui-tab-view>

(Wobei ich nicht weiß wofür "room="Room1" steht oder was es bewirkt..)

Die Datei selbst ist das Problem
Ich denke "content-grid.html" soll das machen was ich suche...

Code Auswählen Erweitern

  <ftui-grid base-width="80" base-height="80" color="green">

    <ftui-grid-tile row="1" col="1" height="2" width="2" color="danger">

      GRID-IN-GRID 1

    </ftui-grid-tile>

    <ftui-grid-tile row="1" col="3" height="2" width="2" color="warning">

      GRID-IN-GRID 2

    </ftui-grid-tile>

    <ftui-grid-tile row="1" col="5" height="2" width="2" color="ok">

      GRID-IN-GRID 1

    </ftui-grid-tile>

    <ftui-grid-tile row="1" col="7" height="2" width="2" color="light">

      GRID-IN-GRID 2

    </ftui-grid-tile>

  </ftui-grid>

Es wird mir auch schön das Grid angezeigt und mein Menu bleibt erhalten, das Layout wird nicht zerschossen! Soweit so gut .
Das Problem ist dabei aber dass mein Menu nicht mehr "nutzbar" ist, d.h. die verschiedenen Menupunkte können nicht geklickt werden.

Mit den anderen Beispieldateien (content-view1, 2 und 3) kann ich leider kaum etwas anfangen...
Wo finde ich Informationen dazu was u.a. <ftui-view-section> macht, oder <ftui-view-toolbar> oder <ftui-menu-button> ?
Das wird nirgendwo erklärt, oder ich suche nicht gescheit, das will ich nicht abstreiten .
Und brauche ich das überhaupt für das was ich versuche zu erreichen?

gruß

[juemuc]

Hi,

im Aufruf ist das Anführungszeichen nach ".html" falsch. 

Code Auswählen Erweitern

  <ftui-tab-view id="View1">
      <ftui-content file="examples/contents/content-view1.html room="Room1"></ftui-content>
  </ftui-tab-view>

Mit room="Room" übergibst du im Parameter "room" den Wert "Room" an die Datei. Außerdem wird die Datei content-view1.html aufgerufen.

Viele Grüße
Jürgen

[mr_petz]

DesWeiteren musst du die grid-größe mit angeben im tab-view Bsp:

Code Auswählen Erweitern


    <ftui-tab-view id="View1">
      <ftui-grid-tile row="1" col="2" height="15" width="15" shape="round" color="primary">
        <ftui-content file="examples/contents/content-grid.html" room="Room1"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

Wenn dein Menü links 1 Breit (col=1 width=1) ist.

room ist eine variable und kann im contentfile mit {{room}} wieder aufgerufen werden...

LG

[C0mmanda]

@juemuc & @mr_petz

VIELEN Dank.
Das grid funktioniert jetzt mit der Größenangabe, das war der richtige Hinweis!

Wie ich das mit der Parameter-Übergabe für mich nutzen kann muss ich
dann an späterer Stelle nochmal herausfinden!

Danke euch!

[mr_petz]

Sehr gut.
room ist hier nur ein Beispiel. Du kannst auch mehrere übergeben mit deinen Namenswunsch...

Bsp.: device="1" seite="2" usw....

LG

[curt]

im Aufruf ist das Anführungszeichen nach ".html" falsch. 

Ich würde jetzt mal behaupten, dass es da richtig ist. Und Dein Codebeispiel falsch ist. Oder war Dein Codebeispiel zur Illustration eines Fehlers?

@OdfFhem
Und nun sind Deine Vorschläge getestet. Sie funktionieren wunderschön, ich danke Dir sehr.
(Was machte ich? Dachkippfenster mit Rollladen: Hintergrund breites ftui-meter, welches Rollladenstellung anzeigt. Darüber positioniert ftui-image mit wechselndem Fenstersymbol offen/geschlossen.)

[juemuc]

Ich würde jetzt mal behaupten, dass es da richtig ist. Und Dein Codebeispiel falsch ist. Oder war Dein Codebeispiel zur Illustration eines Fehlers?

Du hast natürlich recht. Meine Beispiel war falsch  Danke für den Hinweis.

Viele Grüße
Jürgen

[curt]

Aber da hier grad die Profis sind - ich habe im Moment ein gedankliches Problem - ich weiß nicht, wie bei Folgendem der beste Weg ist:

Beispiel:
Ich habe acht Thermostate, alle sind in verschiedenen Kacheln auf einer FTUI-3-Seite dargestellt. Nun soll jede Kachel klickbar sein (ich weiß: onclick zum Beispiel) und zu einem iframe (oder bei anderen zu einer neuen Seite) führen. Also acht verschiedene iframes, für jeden Thermostat eins. Bzw. acht verschiedene Seiten, für jedes Fenster eine.

Da werden dann Werte angezeigt und man kann zum Beispiel die Soll-Temperatur ändern. Jetzt kommt der Punkt: Die iframes bzw. Seiten sind dabei ja völlig identisch, lediglich das Device hat immer einen anderen Namen. (Von {{room}} als denkbarem Weg las ich vorhin erstmals. Vielleicht gibt es noch andere, bessere Wege.

Ich nehme an, dass ihr alle das Problem schon gelöst habt. Was würdet ihr denn konkret empfehlen? Wie macht man das am Geschicktestem?

(Ich btte um Verzeihung, möglicherweise stimmen nicht alle Vokabeln, ich übe fleißig.)

[juemuc]

Hi Curt,
ich nutze dies mit einem Popup. (Bild 1 und Bild 2) Jeder Heizkörper wird als Parameter in eine Content-Datei übergeben.

Code Auswählen Erweitern

    <ftui-thermostat unit=" °C" size="90" min="7.5" max="28.0" class="size-2"
          has-old-style has-arc-tick movegradient="3.5"
          lowcolor="0,0,255" mediumcolor="170,0,170" hightcolor="170,0,0"
          style="--thermostat-value-size:25px; --thermostat-value-color:white; --thermostat-temp-size:20px; --thermostat-arc-fill:15;"
          [value]="{{Heizung}}:desired-temp | part(1)"
          (value)="{{Heizung}}:desired-temp"
          [temp]="{{Heizung}}:temperature | part(1)"
          [battery]="{{Heizung}}:battery" >
    </ftui-thermostat>

Viele Grüße
Jürgen

[curt]

ich nutze dies mit einem Popup. (Bild 1 und Bild 2) Jeder Heizkörper wird als Parameter in eine Content-Datei übergeben.

Ahhh, verstehe. Herzlichen Dank nicht nur für die schnelle Antwort, sondern auch für das Beispiel (ich bin nicht ganz taufrisch, mir helfen Beispiele immer am ehesten.)

Bitte nicht falsch verstehen, ich frage trotzdem nochmal in die Runde:
Gibt es noch andere Wege, andere Wege die ihr nutzt? Und - welche Vorteile haben die?

[juemuc]

Hi Curt,

was verstehst Du unter "taufrisch" 

Es kommt halt darauf an, was Dein Ziel ist.

Viele Grüße
Jürgen

[curt]

Hallo Jürgen @juemuc

was verstehst Du unter "taufrisch" 

Es gibt Fragen, da kann man nur verlieren wenn man antwortet...

Es kommt halt darauf an, was Dein Ziel ist.

Im grundsätzlichen Fahrplan die Umsetzung von FTUI2 auf FTUI3 - unter Berücksichtigung solcher Vereinfachungen wie Variablen bei mehreren gleichartigen Darstellungen. Am besten zeige ich mal, wie das bei mir unter FTUI2 aussieht:

Von der Hauptseite (nicht dargestellt) führt der Klick auf die Kachel "Fenster/Heizung" auf eine Übersichtsseite, hier im ersten Bild dargestellt: Da sehe ich welche Fenster/Türen geschlossen bzw offen sind. Und ich sehe zugleich die IST-Raumtemperaturen. Ich klicke auf die Kachel "Bad oben".

Es erscheint eine neue Seite, zweites Bild: Ich sehe eine Grafik mit verschiedenen Graphen: SOLL, zwei verschiedene IST, wann da ein Fenster offen war. Links oben die aktuelle Raumtemperatur in einem nur scheinbaren Regler. Da kann ich draufklicken.

Es öffnet sich ein iframe (drittes Bild). Ich habe ZWave-Thermostate, daher kann ich dort nicht nur eine andere SOLL-Temperatur einstellen sondern habe auch weitere Schaltoptionen.

So ähnlich soll das auch in FTUI3 dargestellt werden, aber eben unter Zusammenfassung gleichartiger Code-Teile. Und das betrifft nicht nur beispielsweise die gleichartigen iframes. Das betrifft auch die ansich gleichartigen Elemente des ersten Bilds, der Übersicht: Da sind ja zwei Gruppen von jeweils gleichartigen Kacheln zu sehen, unterschiedlich ist immer nur das Device.

Kurze Frage zum Procedere: Sollte ich lieber einen neuen Thread beginnen? Weil: Diese ZWave-Dinger haben so einige, die sind etwas hakelig. Zudem ist das im Gesamtzusammenhang komplex und es fallen im idealfall Beispiele für andere ab.

[mr_petz]

...
Es öffnet sich ein iframe (drittes Bild)...
...

Hi curt,
Das kann zu Verwirrungen kommen. Es scheint es wäre ein popup.
Das sollte aber mit FTUI3 umzusetzen sein!
Paar grids und das popup.

LG mr_petz