FTUI version 3

[Init]

Hallo zusammen,

ich bin weiter beschäftigt mit der Migration von FTUI2 auf FTUI3.

In FTUI2 frage ich Button auf disable ab, um diese dann zu deaktivieren.

Ich habe mich jetzt ein bisschen in den Code von FTUI eingearbeitet und folgende Anpassungen zu Testzwecken gemacht:

button.component.js:

Code Auswählen Erweitern

  static get properties() {
    return {
      states: 'on,off',
      fill: 'solid',
      color: 'primary',
      size: 'normal',
      shape: 'normal',
      direction: 'horizontal',
      value: 'off',
      disable: 0
    };

button.component.css:

Code Auswählen Erweitern

:host([disable="1"]) {
  background: #9b2020;
  }

Jetzt bekomme ich den Hintergrund Rot angezeigt, wenn der Butten in fhem disabled ist.

Wo muss ich hinlangen, damit der Button selbst das Attribut disabled bekommt? Hat jemand eine Idee?

Viele Grüße
Marc

[setstate]

Alle Componenten erben von FtuiElement das Attribute "disabled"

Mit gesetztem disabled ist dann das Element nicht mehr bedienbar und mit einem grau+blur-Effekt als nicht mehr bedienbar visualisiert.

Code Auswählen Erweitern


      <ftui-slider [(value)]="ftuitest" min="10" max="70" disabled>
      </ftui-slider>


Wenn man diese Eigenschaft von FHEM aus steuern will, muss man das Attribute disabled mit einem Fhem-Reading binden.

Code Auswählen Erweitern


      <ftui-slider [(value)]="ftuitest" min="10" max="70" [disabled]="ftuitest:disable | toBool()">
      </ftui-slider>


Code Auswählen Erweitern


      <ftui-slider [(value)]="ftuitest" min="10" max="70" [disabled]="ftuitest:reachable | map('0=true, 1=false')">
      </ftui-slider>


[mr_petz]

Es müsste doch auch so gehen ohne in der js und css was zu ändern:

Code Auswählen Erweitern


<ftui-button
            [(value)]="ftuitest"
            states="on,disabled"
            [color]="ftuitest | map('disabled:red, on:blue')"
            [text]="ftuitest | map('disabled:disabled, on:on')">
</ftui-button>


oder habe ich was falsch verstanden?

[torte]

Moin zusammen,

gibt es schon einen Timer für tabview? Ich meine das er nach einer gewissen Zeit wieder zb. den HomeTab anzeigt.

Grüße
Torte

[Init]

Code Auswählen Erweitern


      <ftui-slider [(value)]="ftuitest" min="10" max="70" [disabled]="ftuitest:disable | toBool()">
      </ftui-slider>


Danke für Eure Antworten.

Das Beispiel oben funktioniert initial sehr gut. So ähnlich hatte ich es auch schon versucht, aber mir fehlte das " | toBool()".

Leider funktioniert es nur, wenn die Seite komplett neu geladen wird. FTUI bekommt zwar die Änderung von disable in FHEM mit, aber danach ist der Button komplett Weiss bzw. verschwindet.

Hat jemand eine Idee?

[setstate]

Moin zusammen,

gibt es schon einen Timer für tabview? Ich meine das er nach einer gewissen Zeit wieder zb. den HomeTab anzeigt.

Grüße
Torte

nein, noch nicht. Das wollte ich noch einbauen.

[meier81]

Hallo und guten Abend,

kann mir von euch jemand mal auf die Sprünge helfen wie ich hier ein Chart von Grafana eingebunden bekomme, stehe zur Zeit etwas auf dem Schlauch. Ich habe es über Image probiert, funzt aber nicht:

Code Auswählen Erweitern

<ftui-image src="http://192.168.179.50:3000/d-solo/TI2UB-kgk/stromverbrauch?orgId=1&from=now-6h&to=now&panelId=8"></ftui-image>

Bekomme nur ein "Image not available".

[meier81]

Hallo und guten Abend,

kann mir von euch jemand mal auf die Sprünge helfen wie ich hier ein Chart von Grafana eingebunden bekomme, stehe zur Zeit etwas auf dem Schlauch. Ich habe es über Image probiert, funzt aber nicht:

Code Auswählen Erweitern

<ftui-image src="http://192.168.179.50:3000/d-solo/TI2UB-kgk/stromverbrauch?orgId=1&from=now-6h&to=now&panelId=8"></ftui-image>

Bekomme nur ein "Image not available".

Wollt nur Bescheid geben, hat sich erledigt, am nächsten Tag nochmal mit frischem Kopf schauen erweist sich doch als gut 

Code Auswählen Erweitern

<ftui-row>
  <ftui-column>
    <iframe src="http://192.168.179.50:3000/d-solo/TI2UB-kgk/stromverbrauch?orgId=1&from=now-6h&to=now&panelId=8" style="overflow:hidden; border:0; width:100%; height:100%;"></iframe>
  </ftui-column>
</ftui-row>

[Sailor]

Moin zusammen

Ich habe mal eine Syntax - Frage:

Wie kann ich in dem Code

Code Auswählen Erweitern


<ftui-icon  name    = "weather_uv-warning"
[color] = "TestDummy | map('0:green, 2:yellow, 6:amber, 8:red, 11:purple')"
class   = "size-3">
</ftui-icon>

den Farbcode so einfügen, dass ich die Hexadezimalwerte verwenden kann?

Der Versuch

Code Auswählen Erweitern


<ftui-icon  name    = "weather_uv-warning"
[color] = "TestDummy | map('0:#00ff00, 2:#ffff00, 6:#ffa500, 8:#ff0000, 11:#ff00ff')"
class   = "size-3">
</ftui-icon>

funktioniert leider nicht...

Danke

Gruss
    Sailor

[yersinia]

Kann das color Attribut überhaupt mit hex-Werten umgehen? Aber wenn, dann mal in ` setzen:

Code Auswählen Erweitern

<ftui-icon  name    = "weather_uv-warning"
[color] = "TestDummy | map('0:`#00ff00`, 2:`#ffff00`, 6:`#ffa500`, 8:`#ff0000`, 11:`#ff00ff`')"
class   = "size-3">
</ftui-icon>


Ansonsten mal mit inline CSS versuchen:

Code Auswählen Erweitern

<ftui-icon  name    = "weather_uv-warning"
[style] = "TestDummy | map('0:`color: #00ff00;`, 2:`color: #ffff00;`, 6:`color: #ffa500;`, 8:`color: #ff0000;`, 11:`color: #ff00ff;`')"
class   = "size-3">
</ftui-icon>

[grossmaggul]

Kann das color Attribut überhaupt mit hex-Werten umgehen?

Soweit ich weiß, nein, recht weit vorne im Strang schrieb setstate auch mal warum das so ist.

Ah, gefunden, etwa in der Mitte des Postings.

[Sailor]

Soweit ich weiß, nein, recht weit vorne im Strang schrieb setstate auch mal warum das so ist.

Ah, gefunden, etwa in der Mitte des Postings.

Schade

Ich habe gedacht, man könnte mittels Manipulation des myftui.css datei so manipulieren

Code Auswählen Erweitern


[color="orange"] {
  --color-base: #ff4500
  --color-contrast: var(--orange);
}

[color="violet"] {
  --color-base: #9400d3
  --color-contrast: var(--violet);
}


die zwei Farben noch hinzuzufügen.

Ansonsten kann ich nicht die volle Palette des UV-Index darstellen weil mir noch Orange und Violet fehlen
https://www.bfs.de/SharedDocs/Bilder/BfS/DE/opt/uv/uv-Index.jpg?__blob=poster&v=5

Gruß
    Sailor

[Risiko]

Das geht schon.

1. Musst natürlich deine "mytui.css" einbinden --> <link href....
2. Wo hast du die Variablen '--orange' und --violet definiert --> ggf. besser -color-contrast: var(--dark-contrast-color) oder so verwenden

[Risiko]

So jetzt mein Problem 

badge (und wahrscheinlich auch label) stellen keine '0' (Null) dar.
Auch eine Ersetzung mit replace(/^0$/,'0')" (html code) geht nicht.

1. Kann das jemand bestätigen?
2. hat jemand eine Lösungsidee? - meine Lsg. replace(/^0$/,'O')" (Ersetzung mit Buchstaben O) gefällt mir nicht so wirklich.

Wahrscheinlich liegt es hieran!?

Code Auswählen Erweitern


:host(.is-empty) { display: none; }


[Sailor]

Hi Risiko

1. Musst natürlich deine "mytui.css" einbinden --> <link href....
2. Wo hast du die Variablen '--orange' und --violet definiert --> ggf. besser -color-contrast: var(--dark-contrast-color) oder so verwenden

die myftui.css ist eingebunden. Ist auch bestätigt, da die anderen Funktionen funktionieren...

Code Auswählen Erweitern


body.background-0, body.background-1, body.background-2,
body.background-3, body.background-4, body.background-5,
body.background-6 {
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-clip: border-box;
}
body.background-0 { background-image: url('./images/Background-0.png'); }
body.background-1 { background-image: url('./images/Background-1.png'); }
body.background-2 { background-image: url('./images/Background-2.png'); }
body.background-3 { background-image: url('./images/Background-3.png'); }
body.background-4 { background-image: url('./images/Background-4.png'); }
body.background-5 { background-image: url('./images/Background-5.png'); }
body.background-6 { background-image: url('./images/Background-6.png'); }

.semitransparent {
    background: rgba(0, 0, 0, 0.7) !important;
}

.supsub      {position: absolute}
.subscript   {color: green; display:block; position:relative; left:2px; top: -5px}
.superscript {color: red;   display:block; position:relative; left:2px; top: -5px}


[color="orange"] {
  --color-base: #ff4500
  --color-contrast: var(--dark-contrast-color)
}

[color="violet"] {
  --color-base: #9400d3
  --color-contrast: var(--dark-contrast-color)
}


Funktioniert aber leider nicht, das Icon

Code Auswählen Erweitern


<ftui-icon  name    = "weather_uv-warning"
[color] = "TestDummy | map('0:green, 2:yellow, 6:orange, 8:red, 11:violet')"
class   = "size-3">
</ftui-icon>


bleibt  Wert 2-5 und 11+ leider grau.

Gruß
    Sailor