FTUI version 3

[setstate]

ich habe es jetzt etwas optimiert, aber damit ist die Ursache nicht weg, sondern nur der Fehler unterdrückt. Interessant wäre, welcher Index benutzt wird, wenn er kein Item dazu findet.

[setstate]

Ein fixes Bild wäre Klasse

ist jetzt mit drin

[ToM_ToM]

Hi @setstate, könntest du dir mal bitte den Beitrag ein paar posts vorher ansehen?
https://forum.fhem.de/index.php/topic,115259.msg1128889.html#msg1128889

Hast du dazu ein Idee?

[setstate]

@setstate
ich muss jetzt nochmal fragen wegen der Auslagerung einiger Seiten oder auch Popups, welche mir ums verrecken absolut nicht angezeigt werden.

selbst wenn ich den selben Inhalt in die ausgelagerte Datei schreibe wird mir nichts angezeigt, dass Fenster ist einfach leer ich begreife es absolut nicht
Beide Dateien sind natürlich vorhanden... muss ich evtl eine ID vergeben oder warum geht das nicht. Ich habe selbiges Problem auch noch mit einem Popup, aber das lasse ich hier mal.

Kann ich mir nicht erklären. content-multimedia1.html gibt es, sagst du ... Gibt es keine Fehler in der Console oder im Network-Tab? Und was passiert, wenn du zweimal content-multimedia.html reinschreibst, geht es dann?

[ToM_ToM]

Hi @setstate,

ich habe gerade den Segment-Button ausprobiert. Erst mal vielen Dank - ziemlich cool.
Wenn ich diesen jedoch nicht auf der Startseite, sondern auf auf einer eingebundenen content-Page integriere, wird dieser immer oben links dargestellt und die Grid-Tile -Row, -Col und -Width ignoriert.

Code Auswählen Erweitern


<ftui-grid-tile row="19" col="1" height="2" width="4">
<ftui-segment id="segmentHomeState">
<ftui-segment-button value="home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="sleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="holiday">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>


VG, Thomas

EDIT: Hat sich erledgit. Passt jetzt.

[setstate]

Hi @setstate, könntest du dir mal bitte den Beitrag ein paar posts vorher ansehen?
https://forum.fhem.de/index.php/topic,115259.msg1128889.html#msg1128889

Hast du dazu ein Idee?

Sorry, das war ein Bug. Ist jetzt gefixed

[Humpelpumpel]

Hiho, ich weiß nicht ob das jetzt auf einer der 55 Seiten schon Thema war,
aber kann ich theoretisch FTUI2 und V3 gleichzeitig auf einem System betreiben? Dann könnte man schon mal ein bisschen rumbasteln.

[setstate]

ja klar, durch unterschiedliche Foldernamen geht das ohne Probleme

FTUI2
/opt/fhem/www/tablet

FTUI3
/opt/fhem/www/ftui

[moonsorrox]

Kann ich mir nicht erklären. content-multimedia1.html gibt es, sagst du ... Gibt es keine Fehler in der Console oder im Network-Tab? Und was passiert, wenn du zweimal content-multimedia.html reinschreibst, geht es dann?

ja klar gibt es die content-multimedia1.html
wenn ich content-multimedia.html zweimal rein schriebe, sehe ich 2x den gleichen Player... Fehler gibt es keine
und ich habe auf dieser Seite nichts weiter als diese beiden Player

hier mal alles was in View4 drin steht

Code Auswählen Erweitern

<ftui-tab-view id="View4">
   <ftui-grid-tile row="4" col="2" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>


<ftui-grid-tile row="4" col="19" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>

</ftui-tab-view>

Aber wie schon geschrieben ich habe dieses Phänomen nochmal das er es einfach nicht öffnet oder es leer ist.

Ich kann auch gerne beide content Dateien hier rein stellen, die sehen bis auf die Bezeichnung des Players absolut identisch aus.
hier sind sie
content-multimedia1.html

Code Auswählen Erweitern

<header class="size-4 thin"><ftui-label color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="45%" color="light">
<ftui-image [src]="SB_Wohnzimmer:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%" color="dark">
<ftui-dropdown [list]="SB_Wohnzimmer:ftuiPlaylistsAlias" [(value)]="SB_Wohnzimmer:playlists" [color]="SB_Wohnzimmer:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB_Wohnzimmer:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB_Wohnzimmer:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
     
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB_Wohnzimmer:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB_Wohnzimmer:duration" [(value)]="SB_Wohnzimmer:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB_Wohnzimmer:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>

<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB_Wohnzimmer" [fill]="SB_Wohnzimmer | map('on:solid, off:outline')"
[color]="SB_Wohnzimmer | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB_Wohnzimmer | map('on:power-off, off:power-off')"
   [color]="SB_Wohnzimmer | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>

<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:prev" [color]="SB_Wohnzimmer | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB_Wohnzimmer:prev | map('on:step-backward, off:step-backward')" [color]="SB_Wohnzimmer | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB_Wohnzimmer:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB_Wohnzimmer" states="play,pause" [color]="SB_Wohnzimmer:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB_Wohnzimmer:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:stop" [color]="SB_Wohnzimmer:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB_Wohnzimmer:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:next" [color]="SB_Wohnzimmer | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB_Wohnzimmer:next | map('on:step-forward, off:step-forward')" [color]="SB_Wohnzimmer | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:shuffle" states="off,song,album" [color]="SB_Wohnzimmer:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB_Wohnzimmer:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>

<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:repeat" states="off,one,all" [color]="SB_Wohnzimmer:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB_Wohnzimmer:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>

<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB_Wohnzimmer:volume"
[color]="SB_Wohnzimmer:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB_Wohnzimmer:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>

content-multimedia.html

Code Auswählen Erweitern

<header class="size-4 thin"><ftui-label color="MediumSpringGreen">DreamSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="45%" color="">
<ftui-image [src]="SB3_DreamSqueezy:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%" color="">
<ftui-dropdown [list]="SB3_DreamSqueezy:ftuiPlaylistsAlias" [(value)]="SB3_DreamSqueezy:playlists" [color]="SB3_DreamSqueezy:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB3_DreamSqueezy:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB3_DreamSqueezy:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
     
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB3_DreamSqueezy:duration" [(value)]="SB3_DreamSqueezy:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>

<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB3_DreamSqueezy" [fill]="SB3_DreamSqueezy | map('on:solid, off:outline')"
[color]="SB3_DreamSqueezy | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB3_DreamSqueezy | map('on:power-off, off:power-off')"
   [color]="SB3_DreamSqueezy | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>

<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:prev" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB3_DreamSqueezy:prev | map('on:step-backward, off:step-backward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB3_DreamSqueezy:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB3_DreamSqueezy" states="play,pause" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:stop" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:next" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB3_DreamSqueezy:next | map('on:step-forward, off:step-forward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:shuffle" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>

<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:repeat" states="off,one,all" [color]="SB3_DreamSqueezy:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB3_DreamSqueezy:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>

<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>


möchte ja zu gern ewissen was hier falsch läuft...?

[torte]

@moonsorrox
stimmen die Dateirechte? (könnte ja sein, dug un wech) 

[moonsorrox]

@moonsorrox
stimmen die Dateirechte? (könnte ja sein, dug un wech) 

Oooooh wie recht du hast.... kann ja wohl nicht war sein.... daran habe ich nun überhaupt nicht gedacht.... 

[moonsorrox]

ich habe hier diesen Slider in Benutzung

Code Auswählen Erweitern

<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>

ich kann ja mit

Code Auswählen Erweitern

<ftui-slider (value)="scale(0,100,0,100) | fhemDev1" max="100"></ftui-slider>

den aktuellen Wert anziegen lassen, mir ist es aber nicht gelungen dieses bei mir einzubauen, evtl. weiß jemand wo das hin muss, am liebsten wäre es mir wenn ich das rechts neben dem Slider hinbekommen würde.

[octek0815]

ich habe hier diesen Slider in Benutzung

Code Auswählen Erweitern

<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>

ich kann ja mit

Code Auswählen Erweitern

<ftui-slider (value)="scale(0,100,0,100) | fhemDev1" max="100"></ftui-slider>

den aktuellen Wert anziegen lassen, mir ist es aber nicht gelungen dieses bei mir einzubauen, evtl. weiß jemand wo das hin muss, am liebsten wäre es mir wenn ich das rechts neben dem Slider hinbekommen würde.

so...

Code Auswählen Erweitern


<ftui-row>
<ftui-column align-items="center" width="80%">
<ftui-slider class="_size-2em" [(value)]="Wohnzimmer_EG_Licht_Decke:pct" min="0" max="100"></ftui-slider>
</ftui-column>
<ftui-column width="20%">
<ftui-label class="_size-standard"
[text]="Wohnzimmer_EG_Licht_Decke:pct"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>


oder so...

Code Auswählen Erweitern


<ftui-row width="125%">
<ftui-column>
<ftui-slider class="_size-0punkt5em" [value]="Badezimmer_OG_Heizung_Clima:ValvePosition" min="0" max="100" handle="none" has-ruler readonly></ftui-slider>
        <ftui-label style="margin-top:-1.1em;" class="_size-0punkt75em" [text]="Badezimmer_OG_Heizung_Clima:ValvePosition"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>


Oder meinst Du was Anderes?

[moonsorrox]

Oder meinst Du was Anderes?

das ist schon richtig einmal bei dir die 53% der Beleuchtung und die Ventilstellung 10%, bei mir soll es die eingestellte Lautstärke sein....

Das hast du durch die class="_UnitStyle" gemacht, die gibt es aber doch nicht, oder sehe ich da was falsch.?
Du machst ja alles mit dem Unterstrich davor aber auch class="UnitStyle" gibt es nicht, deshalb hatte ich diese "scale" Sache auf github gefunden.
Aber ich bekomme die nicht eingebaut.

[octek0815]

das ist schon richtig einmal bei dir die 53% der Beleuchtung und die Ventilstellung 10%, bei mir soll es die eingestellte Lautstärke sein....

Das hast du durch die class="_UnitStyle" gemacht, die gibt es aber doch nicht, oder sehe ich da was falsch.?
Du machst ja alles mit dem Unterstrich davor aber auch class="UnitStyle" gibt es nicht, deshalb hatte ich diese "scale" Sache auf github gefunden.
Aber ich bekomme die nicht eingebaut.

_UnitStyle ist eine eigene CSS Klasse.

Code Auswählen Erweitern


._UnitStyle {
  margin-left: 0.2em;
  font-size: 0.5em;
}


Die nutze ich für alle Units da ich diese nur halb so groß wie der eigentliche Text sein sollen (Beispiel) siehe Bild.
Ich hatte schon bei setstate angefragt ob sowas als Option für ftui-label möglich wäre, da es ja unit in der Komponente schon gibt.

Beispielcode:

Code Auswählen Erweitern


<ftui-row>
<ftui-column align-items="left">
<ftui-label text="{{displayname}}"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0 0 0 0.75" width="16%">
<ftui-label [text]="{{device}}:{{t-reading}} | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="16%">
<ftui-label [text]="{{device}}:humidity"
[color]="{{device}}:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label
</ftui-column>
</ftui-row>


Der Unterstrich (_) ist bei mir inzwischen Standard für alles was ich selbst definiere (quasi um unterscheiden zu können).