FTUI version 3

[setstate]

@setstate

Da ich jetzt Attribute setzen kann möchte ich sie auch danach mit "save" sichern. Wie?
Oder besser generell gefragt wie kriegt man fhem-Befehle übergeben? (save, backup, shutdown restart, update,...)

Gruß
Eisix

Man könnte das save doch gleich an das attr hängen, oder?

Code Auswählen Erweitern

attr lamp1 huhu 1;save


Oder aktiv per Klick:

Code Auswählen Erweitern

<span onclick="ftuiApp.fhemService.sendCommand('save')">SAVE</span>

[torte]

Ich habe mich entschieden, dass ftui-content so weit wie möglich unsichtbar sein soll. Also kein richtiges Element ist. Als wenn dessen Inhalt stattdessen dort eingeschoben ist. Man muss also im content das Alignment einbauen.

mein content hat eine row mit 3 column die row(im content) hat align-items=top die einzelnen rows der contentfiles werden aber nicht nach oben sortiert sondern verteilen sich auf den platz auf.
hab ich das falsch gemacht/verstanden?

grüße
Torte

[OdfFhem]

@setstate

Anbei ein Screenshot (unten bzw. rechts grid-technisch abgeschnitten) für den Einsatz der knob-Komponente;
er zeigt das Ergebnis einer prozentualen Skalierung - px-Skalierung würde ebenfalls funktionieren.

Folgende Schritte waren notwendig (ist aber nur ein Beispiel):
- Zeile #36 --- W fixiert auf 96
- Zeile #37 --- H fixiert auf 96
- Zeile #63 --- Tag erweitert um viewBox="0 0 96 96"
- knob-Tag erweitert um style="display:contents;" (aktuell im content-File);
  ansonsten zwar Skalierung, aber keine zentrierte Darstellung, sondern immer links oben.

Inhalt von tab-view_svg.html

Code Auswählen Erweitern


  <ftui-grid base-height="27" base-width="27">

    <ftui-grid-tile row="3" col="1" height="4" width="4" shape="round">
      <ftui-content file="content_svg.html" height="100%" width="100%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="3" col="6" height="4" width="4" shape="round">
      <ftui-content file="content_svg.html" height="80%" width="80%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="3" col="11" height="4" width="4" shape="round">
      <ftui-content file="content_svg.html" height="60%" width="60%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="3" col="16" height="4" width="4" shape="round">
      <ftui-content file="content_svg.html" height="40%" width="40%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="3" col="21" height="4" width="4" shape="round">
      <ftui-content file="content_svg.html" height="20%" width="20%"></ftui-content>
    </ftui-grid-tile>

    <ftui-grid-tile row="7" col="1" height="6" width="6" shape="round">
      <ftui-content file="content_svg.html" height="100%" width="100%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="7" col="7" height="6" width="6" shape="round">
      <ftui-content file="content_svg.html" height="75%" width="75%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="7" col="13" height="6" width="6" shape="round">
      <ftui-content file="content_svg.html" height="50%" width="50%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="7" col="19" height="6" width="6" shape="round">
      <ftui-content file="content_svg.html" height="25%" width="25%"></ftui-content>
    </ftui-grid-tile>

    <ftui-grid-tile row="13" col="1" height="8" width="8" shape="round">
      <ftui-content file="content_svg.html" height="100%" width="100%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="13" col="9" height="8" width="8" shape="round">
      <ftui-content file="content_svg.html" height="66%" width="66%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="13" col="17" height="8" width="8" shape="round">
      <ftui-content file="content_svg.html" height="33%" width="33%"></ftui-content>
    </ftui-grid-tile>

    <ftui-grid-tile row="21" col="1" height="16" width="16" shape="round">
      <ftui-content file="content_svg.html" height="100%" width="100%"></ftui-content>
    </ftui-grid-tile>
    <ftui-grid-tile row="21" col="17" height="16" width="16" shape="round">
      <ftui-content file="content_svg.html" height="50%" width="50%"></ftui-content>
    </ftui-grid-tile>

  </ftui-grid>


Inhalt von content_svg.html (wegen einheitlichem Test nur height bzw. width variabel)

Code Auswählen Erweitern


  <ftui-knob height="{{height}}" width="{{width}}" offset-y="10" type="handle" has-desired
             value="21.4"
             desired-value="20"
             unit="14%"
             min="15"
             max="25"
             readonly has-value-text value-size="2em" style="display:contents;"></ftui-knob>



Vielleicht hilft es ...

[setstate]

Perfekt, das sieht doch gut aus. Mit viewBox habe ich auch experimentiert 

Wie es es aussieht, kommt der Erfolg mit dem display: contents;
Ohne erscheint nur der Viertelkreis, den ich immer hatte.

Ich experimentiere ein bisschen ...

[mr_petz]

@moonsorrox

Hi, ich habe mal dein WohnSqueezy - Mediaplayer zur Grundlage für meine Sonos Lautsprecher genommen.
Jetzt die Frage: wie sieht deine Playlist im Format aus? Die von Sonos sieht ja in Fhem so aus (hier FavouritesList):

Code Auswählen Erweitern



161FM|181.FM.Energy.98|538.Dance.Department|80s80s.christmas..Festtag,.traditionell.|Aloha.Joe's.Relaxation.Island|Ambi.Nature.Radio..Sleep,.Relaxation.&.Meditation.|FFH.Weihnachtsradio..Festtagsmusik.|Fritz.vom.rbb|HITRADIO.RTL.-.Dresden|HouseTime.FM..House.|MDR.JUMP.89.0..Adult.Contemporary.|MDR.SPUTNIK.Club.Channel|Minimal.Mix.Radio|Radio.Dresden|Radio.PSR.102.4..Adult.Contemporary.|Radio.Schlagerparadies..Schlager.|Radio.TEDDY|Select.Radio|Weihnachtsradio..Festtagsmusik.|sunshine.live|sunshine.live.-.classics|sunshine.live.-.house


in FTUI2 hatte ich die so eingebunden:

Code Auswählen Erweitern


<div data-type="select"
data-device="Sonos_Kueche"
data-list="FavouritesList"
data-alias="FavouritesListAlias"
data-delimiter="|"
data-quote="/"
data-get="currentFavouriteNameMasked"
data-set="StartFavourite"
class="inline w3x"
onchange="$('.dialog-close').trigger('click');">
</div>


Wie kann man das umsetzen?

Code vom stand jetzt (geht alles bis auf Playlist/FavouritesList):

Code Auswählen Erweitern


      <ftui-grid-tile row="1" col="2" height="5" width="9">
<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">Sonos Küche</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="40%">
<ftui-image [src]="Sonos_Kueche:currentAlbumArtURL" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%">
<ftui-label class="size-3" color="darkorange"
[text]="Sonos_Kueche:currentArtist"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-label>
<ftui-label class="size-2" color="white"
[text]="Sonos_Kueche:currentTitle"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-label>
<ftui-label class="size-3" color="darkorange"
[text]="Sonos_Kueche:currentSender"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:true, 1:false')">
</ftui-label>
<ftui-label class="size-2" color="white"
[text]="Sonos_Kueche:currentSenderInfo"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:true, 1:false')">
</ftui-label>

</ftui-column>
</ftui-row>
     
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="Sonos_Kueche:currentTrackPositionSimulatedSec | timeFormat('mm:ss','s')"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="Sonos_Kueche:currentTrackDurationSec"
[(value)]="Sonos_Kueche:currentTrackPositionSimulatedSec" handle="none" color="blue"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="Sonos_Kueche:currentTrackDurationSec | timeFormat('mm:ss','s')"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
</ftui-label>
</ftui-column>
</ftui-row>

<!-- Botton -->
<ftui-row height="10%">

<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<ftui-dropdown [list]="Sonos_Kueche:FavouritesListAlias" [(value)]="Sonos_Kueche:currentFavouriteNameMasked"></ftui-dropdown>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" (value)="Sonos_Kueche:previous" states="0,1"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
<ftui-icon name="step-backward"
>
</ftui-icon>
</ftui-button>

<!-- Play/Pause -->
<ftui-button fill="outline" shape="normal"
[value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')" (value)="Sonos_Kueche" states="play,pause">
<ftui-icon [name]="Sonos_Kueche:transportState | map('PLAYING:pause, PAUSED_PLAYBACK|STOPPED:play')"
[color]="Sonos_Kueche:transportState | map('PAUSED_PLAYBACK|STOPPED:``, PLAYING:white')">
</ftui-icon>
</ftui-button>

<!-- Next -->
<ftui-button shape="normal" fill="outline" (value)="Sonos_Kueche:next" states="0,1"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
<ftui-icon name="step-forward"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')"></ftui-icon>
</ftui-button>

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

<!-- Repeat -->
<ftui-button shape="normal" fill="outline" (value)="Sonos_Kueche:Repeat" states="0,1"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')">
<ftui-icon [name]="Sonos_Kueche:Repeat | map('0:repeat1, 1:repeat1')" [color]="Sonos_Kueche:Repeat | map('0:``, 1:white')"
[hidden]="Sonos_Kueche:currentStreamAudio | map('0:false, 1:true')"></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)]="Sonos_Kueche:Volume"
[color]="Sonos_Kueche:Volume | map('0:green, 30:blue, 50:yellow, 70:red')"
[text]="Sonos_Kueche:Volume" text="0"
max="100" tick="5" wide-tick="20" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
<!-- Mute -->
<ftui-button shape="normal" fill="outline" [(value)]="Sonos_Kueche:Mute" states="0,1">
<ftui-icon [name]="Sonos_Kueche:Mute | map('0:volume-up, 1:volume-off')" [color]="Sonos_Kueche:Mute | map('0:white, 1:red')"></ftui-icon>
</ftui-button>
</ftui-row>
      </ftui-grid-tile>


mfg Thomas

[moonsorrox]

Hallo Thomas,

Jetzt die Frage: wie sieht deine Playlist im Format aus? Die von Sonos sieht ja in Fhem so aus (hier FavouritesList):

Ich habe die im Popup drin und bei mir sieht es in FTUI 2 so aus. Aber die Playlist ist nicht die Favoritenliste, dass sind zwei verschiedene Dinge bei Squeezebox. Evtl. bei Sonos anders.

Code Auswählen Erweitern

<div data-type="popup" data-height="400px" data-width="450px" data-return-time="60" data-draggable="false">
<div class="cell narrow" data-type="symbol" data-device="SB_Wohnzimmer" data-states="on" data-on-color="white" data-off-color="royalblue" data-icon="fa-server"></div>
<div class="dialog bg-darkgray">
<header style="background-color:#1f222e">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">=== WohnSqueezy ===</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" data-background-color="#1f222e" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell top-space">
<div class="cell inline" data-device="SB_Wohnzimmer" data-get="coverarturl" data-type="image" data-size="120px" data-width="120px" data-opacity="1"></div>
<div class="cell inline" data-type="label" data-device="SB_Wohnzimmer" data-get="currentArtist"></div>
<div class="cell inline" data-type="label">-</div>
<div class="cell inline" data-type="label" data-device="SB_Wohnzimmer" data-get="currentTitle"></div>
</div>
<div class="top-space">
<div data-type="label" class="inline">Sender</div>
<div class="w3x crimson" data-type="select" data-device="SB_Wohnzimmer" data-list="ftuiFavoritesItems" data-alias="ftuiFavoritesAlias" data-get="favorites" data-set="favorites" data-delimiter=":"></div>
</div>
<div class="top-space">
<div data-type="label" class="inline">Artist&nbsp;&nbsp;</div>
<div class="w3x crimson" data-type="select" data-device="SB_Wohnzimmer" data-list="ftuiArtistsList" data-alias="ftuiArtistsAlias" data-set="ftuicmd artist" data-delimiter=":"></div>
</div>
<div class="top-space">
<div data-type="label" class="inline">Album</div>
<div class="w3x crimson" data-type="select" data-device="SB_Wohnzimmer" data-list="ftuiAlbumsList" data-alias="ftuiAlbumsAlias" data-set="ftuicmd album" data-delimiter=":"></div>
</div>
</div>
</div>

in Fhem/Squeezeboxen ist es bei mir die

Code Auswählen Erweitern

ftuiFavoritesAlias
ftuiFavoritesItems
die Senderliste die ich als Favoriten auf dem Server gespeichert habe, also nicht die Playlist..!

Die Playlist - nutze ich kaum da ich nur zwei habe und die immer mit dem Editor erstellt habe - als ganz normale xxx.m3u
die heißen bei mir so:

Code Auswählen Erweitern

ftuiPlaylistsAlias
ftuiPlaylistsItems

ich weiß nicht ob es dir hilft, aber es gibt ja unzählige Threads über Sonos und evtl. findest du da was du suchst, wenn nicht ich helfe gerne weiter soweit es mir möglich ist. 

[mr_petz]

Ok. Danke. Dachte ist auch eine Liste in Fhem und nicht *.m3u...
Da muss ich setstate bitten ob man das wieder umsetzen kann für Sonos Player.
mfg Thomas

[roman1528]

man kann jetzt die Liste als options - Kinderknoten angeben

Code Auswählen Erweitern


        <ftui-dropdown
          [value]="ftuitest:whiteValue"
          (value)="setreading ftuitest:whiteValue">
          <option value="white0">White 0%</option>
          <option value="white25">Weiß 25%</option>
          <option value="white50">Weiß 50%</option>
          <option value="white100">Weiß 100%</option>
        </ftui-dropdown>


Vielen, vielen Dank setstate. Jetzt komme ich weiter

@octek0815

Kannst du mir deine "content-popup-dwd-wetterwarung-swiper-content.html" schicken... bzw. den Inhalt? Wäre super lieb.
Dank im Voraus.

Grüße^^

[octek0815]

@setstate

Mit dem letzten Update (made ftui-content more neutral in style) berücksichtigt der swiper bei content hidden nicht mehr.

Beispiel-Code:

Code Auswählen Erweitern


<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play interval="15">
<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | map('0:true, 1:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="System_DWD_Wetter:a_count | map('0:true, 2:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="System_DWD_Wetter:a_count | map('0:true, 3:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="System_DWD_Wetter:a_count | map('0:true, 4:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="System_DWD_Wetter:a_count | map('0:true, 5:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="System_DWD_Wetter:a_count | map('0:true, 6:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="System_DWD_Wetter:a_count | map('0:true, 7:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="System_DWD_Wetter:a_count | map('0:true, 8:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="System_DWD_Wetter:a_count | map('0:true, 9:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="System_DWD_Wetter:a_count | map('0:true, 10:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="System_DWD_Wetter:a_count | map('0:true, 11:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="System_DWD_Wetter:a_count | map('0:true, 12:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>


Derzeit gibt es nur zwei Warnungen, es werden aber alle Swiper-Karten angezeigt.

@setstate

Ich konnte jetzt die Ursache finden.
Sobald die option "scrollbar" als Parameter angegeben ist greift hidden nicht mehr.
Dots wiederum funktioniert, hat aber ein anderes Problem. Es werden zwar nur die Swiper-Karten angezeigt die nicht mit hidden versteckt sind, aber es erden alle Punkte angezeigt (auch die der versteckten "slides".

[octek0815]

Vielen, vielen Dank setstate. Jetzt komme ich weiter

@octek0815

Kannst du mir deine "content-popup-dwd-wetterwarung-swiper-content.html" schicken... bzw. den Inhalt? Wäre super lieb.
Dank im Voraus.

Grüße^^

Ja sicher, kein Problem...

Code Auswählen Erweitern


<ftui-column>
<ftui-row style="padding:2%;">
<ftui-row style="padding:1%;" [color]="System_DWD_Wetter:{{warn-number}}_severity | map('Minor:_dwd_minor, Moderate:_dwd_moderate, Severe:_dwd_severe, Extreme:_dwd_extreme')"
[class-name]="System_DWD_Wetter:{{warn-number}}_urgency | map('Future:_dwd_vorwarnung')">
<ftui-column width="15%" color="_grau3">
<ftui-row height="70%">
<ftui-image base="http://10.20.8.248:8084/fhem/ftui/images/" [src]="System_DWD_Wetter:{{warn-number}}_eventDesc | map('`.*BÖEN`:warn_icons_sturm.png, `.*TAUWETTER`:warn_icons_tauwetter.png, .*SCHNEE.*:warn_icons_schnee.png, .*FROST.*:warn_icons_frost.png, GLÄTTE|GLATTEIS:warn_icons_glatteis.png, `.*REGEN`:warn_icons_regen.png')" color="_grau3" width="80%" height="80%" nocache></ftui-image>
</ftui-row>
<ftui-row>
<ftui-image color="_grau3" width="80%" height="80%" src="https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png" nocache></ftui-image>
</ftui-row>
</ftui-column>
<ftui-column width="85%" color="_grau3">
<ftui-label class="_dwd_description_headline" [text]="System_DWD_Wetter:{{warn-number}}_headline"></ftui-label>
<ftui-label class="_dwd_description_style" [text]="System_DWD_Wetter:{{warn-number}}_description"></ftui-label>
<ftui-label class="_dwd_instruction_style" [text]="System_DWD_Wetter:{{warn-number}}_instruction" [hidden]="System_DWD_Wetter:{{warn-number}}_instruction | map(':true, .*:false')"></ftui-label>
<ftui-row class="_center _size-2vh" height="5%">
<ftui-label [text]="System_DWD_Wetter:{{warn-number}}_onset | toDate() | format('DD.MM. hh:mm')"><span slot="start">G&uuml;ltig&nbsp;von&nbsp;</span><span slot="end">&nbsp;bis&nbsp;</span></ftui-label>
<ftui-label [text]="System_DWD_Wetter:{{warn-number}}_expires  | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<ftui-label [text]="System_DWD_Wetter:a_time | toDate() | format('DD.MM. hh:mm')"><span slot="start">&nbsp;-&nbsp;Letztes&nbsp;Update:&nbsp;</span></ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
</ftui-row>
</ftui-column>


css:

Code Auswählen Erweitern


._dwd_vorwarnung {
background-image: repeating-linear-gradient(315deg, #555555 0%, #555555 0.25%, transparent 0.25%, transparent 0.5%, #555555 0.5%);
}

._dwd_description_headline {
font-weight: 900;
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 3.5vh;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
text-overflow: ellipsis;
}

._dwd_description_style {
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 2.5vh;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
text-overflow: ellipsis;
}

._dwd_instruction_style {
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 2vh;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
text-overflow: ellipsis;
}

._center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

[color="_grau3"] {
  --color-base: #555555;
}

[color="_dwd_minor"] {
  --color-base: #FFEB3C;
}

[color="_dwd_moderate"] {
  --color-base: #fb8c00;
}

[color="_dwd_severe"] {
  --color-base: #E53935;
}

[color="_dwd_extreme"] {
  --color-base: #880E4F;
}


Anbei noch die von mir angepassten png´s als zip (Farbe verändert, da meine Standard Farbe Weiß ist).

VG
Olli

[roman1528]

Ja sicher, kein Problem...

Code Auswählen Erweitern


<ftui-column>
<ftui-row style="padding:2%;">
<ftui-row style="padding:1%;" [color]="System_DWD_Wetter:{{warn-number}}_severity | map('Minor:_dwd_minor, Moderate:_dwd_moderate, Severe:_dwd_severe, Extreme:_dwd_extreme')"
[class-name]="System_DWD_Wetter:{{warn-number}}_urgency | map('Future:_dwd_vorwarnung')">
<ftui-column width="15%" color="_grau3">
<ftui-row height="70%">
<ftui-image base="http://10.20.8.248:8084/fhem/ftui/images/" [src]="System_DWD_Wetter:{{warn-number}}_eventDesc | map('`.*BÖEN`:warn_icons_sturm.png, `.*TAUWETTER`:warn_icons_tauwetter.png, .*SCHNEE.*:warn_icons_schnee.png, .*FROST.*:warn_icons_frost.png, GLÄTTE|GLATTEIS:warn_icons_glatteis.png, `.*REGEN`:warn_icons_regen.png')" color="_grau3" width="80%" height="80%" nocache></ftui-image>
</ftui-row>
<ftui-row>
<ftui-image color="_grau3" width="80%" height="80%" src="https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png" nocache></ftui-image>
</ftui-row>
</ftui-column>
<ftui-column width="85%" color="_grau3">
<ftui-label class="_dwd_description_headline" [text]="System_DWD_Wetter:{{warn-number}}_headline"></ftui-label>
<ftui-label class="_dwd_description_style" [text]="System_DWD_Wetter:{{warn-number}}_description"></ftui-label>
<ftui-label class="_dwd_instruction_style" [text]="System_DWD_Wetter:{{warn-number}}_instruction" [hidden]="System_DWD_Wetter:{{warn-number}}_instruction | map(':true, .*:false')"></ftui-label>
<ftui-row class="_center _size-2vh" height="5%">
<ftui-label [text]="System_DWD_Wetter:{{warn-number}}_onset | toDate() | format('DD.MM. hh:mm')"><span slot="start">G&uuml;ltig&nbsp;von&nbsp;</span><span slot="end">&nbsp;bis&nbsp;</span></ftui-label>
<ftui-label [text]="System_DWD_Wetter:{{warn-number}}_expires  | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<ftui-label [text]="System_DWD_Wetter:a_time | toDate() | format('DD.MM. hh:mm')"><span slot="start">&nbsp;-&nbsp;Letztes&nbsp;Update:&nbsp;</span></ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
</ftui-row>
</ftui-column>


css:

Code Auswählen Erweitern


._dwd_vorwarnung {
background-image: repeating-linear-gradient(315deg, #555555 0%, #555555 0.25%, transparent 0.25%, transparent 0.5%, #555555 0.5%);
}

._dwd_description_headline {
font-weight: 900;
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 3.5vh;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
text-overflow: ellipsis;
}

._dwd_description_style {
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 2.5vh;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
text-overflow: ellipsis;
}

._dwd_instruction_style {
padding-left: 1.5em;
padding-right: 1.5em;
font-size: 2vh;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
text-overflow: ellipsis;
}

._center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

[color="_grau3"] {
  --color-base: #555555;
}

[color="_dwd_minor"] {
  --color-base: #FFEB3C;
}

[color="_dwd_moderate"] {
  --color-base: #fb8c00;
}

[color="_dwd_severe"] {
  --color-base: #E53935;
}

[color="_dwd_extreme"] {
  --color-base: #880E4F;
}


Anbei noch die von mir angepassten png´s als zip (Farbe verändert, da meine Standard Farbe Weiß ist).

VG
Olli

Sehr geil. Danke, Danke, Danke 

Grüße^^

[Eisix]

Hallo,

habe mal wieder eine spezielle syntax Frage. Ist es möglich den Wert für das mapping aus einem Reading zu lesen?

Im konkreten Beispiel möchte ich in einem Template für meine Heizung unterschiedliche Grenzwerte benutzen. Die Readings werden pro Raum (variable FHB) als userreading erzeugt basierend auf der desired Temp.

Habe diverse Klammern und Hochkomma ausprobiert, funktioniert aber nichts. Jemand einen Tip für mich?

Code Auswählen Erweitern


                       <ftui-label
                                [text]="{{SENSOR}}:CleanTemp |part (1)"
                                [color]="{{SENSOR}}:CleanTemp |part (1) | map('[{{FBH}}:TEMPmin]:blue, [{{FBH}}:TEMPmed]:green, [{{FBH}}:TEMPmin]:red')"
                                class="size-9 bold">
                                <span slot="end">°C</span>
                        </ftui-label>


Gruß
Eisix

[setstate]

mein content hat eine row mit 3 column die row(im content) hat align-items=top die einzelnen rows der contentfiles werden aber nicht nach oben sortiert sondern verteilen sich auf den platz auf.
hab ich das falsch gemacht/verstanden?

so (Variante 1) oder so (Variante 2) geht es

Code Auswählen Erweitern


    <ftui-tab-view id="View1">
      <ftui-grid-tile row="1" col="2" height="5" width="9" align-items="top">
          <ftui-content file="examples/contents/content-rows.html" header="VARIANT1"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View2">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <ftui-column align-items="top">
          <ftui-content file="examples/contents/content-rows.html" header="VARIANT2"></ftui-content>
        </ftui-column>
      </ftui-grid-tile>
    </ftui-tab-view>


Meine content-rows.html sieht so aus

Code Auswählen Erweitern


<ftui-row color="dark" height="5%">
  {{header}}
</ftui-row>
<ftui-row color="danger" height="20%">

  <ftui-column color="light" margin="1em">

    COLUMN 1

  </ftui-column>

  <ftui-column color="medium" margin="1em">

    COLUMN 2

  </ftui-column>
</ftui-row>

<ftui-row color="success" height="20%">

  <ftui-column color="light" margin="1em">

    COLUMN 1

  </ftui-column>

  <ftui-column color="medium" margin="1em">

    COLUMN 2

  </ftui-column>

</ftui-row>


[OdfFhem]

@setstate

circle-menu zerstört komplett ein formuliertes style-Attribut der enthaltenen Menüelemente. Besteht die Aussicht, dass man dieses Verhalten "neutralisiert"? Ansonsten muss man für jeden Individualfall Klassen definieren ... das Löschen der fraglichen Anweisung förderte (bislang) keine Auffälligkeiten zu Tage ...

Im normalen js:

Code Auswählen Erweitern


item.style = null;


Im min.js:

Code Auswählen Erweitern


t.style=null;


[mr_petz]

@setstate

Hi, ich weiss jetzt was das Sonos-Modul in fhem und dein dropdown brauchen damit es funktioniert.
Das Modul will entweder die Sendernamen zusammenhängend ohne Lehrstellen oder
mit Lehrstellen müssen diese mit %20 gefüllt sein oder
das Format des Sender-Namen muss z.B.: /sunshine.live/ so aussehen, damit man mit set MySonos StartFavourite/StartRadio/StartPlaylist die Sender/Titel gestartet werden.
Ich habe im Modul ein UserReading angelegt, wo die originale Favourites bissl umgestrickt wird. Vielleicht kann man das noch tunen?:

Code Auswählen Erweitern


my_Favourites { my $string = ReadingsVal($name,'FavouritesList',''); $string =~ s/\|$//, $string =~ s/\|/\/\,\//g; return $string }


Liste vorher:

Code Auswählen Erweitern


161FM|181.FM.Energy.98|538.Dance.Department|80s80s.christmas..Festtag,.traditionell.|Aloha.Joe's.Relaxation.Island|Ambi.Nature.Radio..Sleep,.Relaxation.&.Meditation.|FFH.Weihnachtsradio..Festtagsmusik.|Fritz.vom.rbb|HITRADIO.RTL.-.Dresden|HouseTime.FM..House.|MDR.JUMP.89.0..Adult.Contemporary.|MDR.SPUTNIK.Club.Channel|Minimal.Mix.Radio|Radio.Dresden|Radio.PSR.102.4..Adult.Contemporary.|Radio.Schlagerparadies..Schlager.|Radio.TEDDY|Select.Radio|Weihnachtsradio..Festtagsmusik.|sunshine.live|sunshine.live.-.classics|sunshine.live.-.house


Liste nachher:

Code Auswählen Erweitern


161FM/,/181.FM.Energy.98/,/538.Dance.Department/,/80s80s.christmas..Festtag,.traditionell./,/Aloha.Joe's.Relaxation.Island/,/Ambi.Nature.Radio..Sleep,.Relaxation.&.Meditation./,/FFH.Weihnachtsradio..Festtagsmusik./,/Fritz.vom.rbb/,/HITRADIO.RTL.-.Dresden/,/HouseTime.FM..House./,/MDR.JUMP.89.0..Adult.Contemporary./,/MDR.SPUTNIK.Club.Channel/,/Minimal.Mix.Radio/,/Radio.Dresden/,/Radio.PSR.102.4..Adult.Contemporary./,/Radio.Schlagerparadies..Schlager./,/Radio.TEDDY/,/Select.Radio/,/Weihnachtsradio..Festtagsmusik./,/sunshine.live/,/sunshine.live.-.classics/,/sunshine.live.-.house


Jetzt zum dropdown. Die Einträge müssen ja mit "," getrennt sein um sie einzeln in der Liste zu haben.
Jetzt habe ich auch Sendereinträge die z.B. so: 80s80s christmas (Festtag, traditionell) oder so: Aloha Joe's Relaxation Island aussehen in fhem.
Im FTUI2 funktionieren diese auch. Hier in FTUI3 nicht, weil der Name durch das "," getrennt wird. (siehe Anhang)
Wie könnte man das gescheit lösen?

ps. die [hidden]-Funktion ist Top. Kann man hier im Player gut als classchanger benutzen...

mfg Thomas


Edit: den gerade im Bild abgespielten Sender konnte ich starten aus FTUI3..