fhem-tablet-ui-user.css / Definition wechselnder Inhalte in css?

[Pi_Newbie]

Hallo zusammen,

anbei ein Auszug einer .css eines Forumsmitglieds welcher seine sehr ansprechende Visu hier hochgeladen hat. Ich hoffe das ist okay den Auszug hier so zu zeigen?

Code Auswählen Erweitern

#livingroom {
    background: url(https://xxx.xxx.xxx.xxx/fhem/ftui/img/livingroom.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Anstelle des statischen Backgrounds möchte ich gerne das AlbumCover des aktuellen Titels aus meinem Spotify Device anzeigen lassen, welches auf klassische Weise auch hervorragend funktioniert. Hier die Daten:

Code Auswählen Erweitern

<div data-type="imagecover"
data-device="Device"
data-get="track_album_cover_medium"
data-opacity="1.0"
data-width="95%"
data-height="calc(100vh - 60px)"
class=""
onclick="$('.dialog-close').trigger('click');"
style="">
</div>

Code Auswählen Erweitern

<div data-type="image"
data-device="Spotify"
data-get="track_album_cover_medium"
data-width="210px"
data-height="210px"
class="nocache">
</div>

Hat irgendjemand eine Idee, wie ich das in der .css korrekt definieren kann? Meine bisherigen Versuche waren leider erfolglos!

Ich danke Euch allen für Eure Hilfe!!!

[Amenophis86]

Empfehle dir das Thema in den Bereich TabletUI zu verschieben. Da wird dir am ehesten geholfen.

[Pi_Newbie]

Danke für den Hinweis, aber wie kann ich das Thema verschieben?

In den "Änderungen" kann ich das "Forum/Thema" nicht auswählen.


Gefunden! Danke für den Hinweis!

[Standarduser]

Ich habe jetzt gerade kein Beispiel, das ich hier posten kann aber eine Idee, wie es funktionieren könnte.

Ich stelle mal folgende Vermutung an:
Oben auf der Seite wird im Beispiel des Users (Thyraz?) ein Bild angezeigt, das der Hintergrund eines DIV-Containers ist.
Dadurch, dass das nur ein Hintergrundbild ist, kannst Du darüber, also innerhalb des DIV-Containers weitere Elemente (Widgets oder Text) platzieren.
Da man meines Wissens nach diesen CSS-Code nicht ohne Weiteres dynamisch erstellen/berechnen, also den Wert aus einem Reading auslesen und somit das dynamische Bild in den Hintergrund legen kann, brauchst Du eine andere Lösung.

Die Idee:
Du Platzierst das Bild in einem DIV-Container, den Du an gewünschter Stelle platzierst.
An exakt der gleichen Stelle platzierst Du einen weiteren Container, der den ersten überlagert.
Dass nun der zweite Container über dem ersten liegt, kannst Du mit z-index steuern.
Skizziert sieht das dann so aus:

html:

Code Auswählen Erweitern


<div id="hintergrund"><div data-type="image" data-device="Spotify" data-get="track_album_cover_medium" data-width="210px" data-height="210px" class="nocache"></div></div>
<div id="vordergrund"> <!-- hier die Widgets platzieren --> </div>


css:

Code Auswählen Erweitern


#hintergrund {
    top: 0px;
    left: 0px;
    width: 210px;
    height:210px;
    z-index: -1;
}

#vordergrund {
    top: 0px;
    left: 0px;
    width: 210px;
    height:210px;
    z-index: 0;
}


Wenn Du Dir das anders vorgestellt hast, dann solltest Du das mal genauer beschreiben und mal ein Bild posten und es damit erklären.

[Pi_Newbie]

@Standarduser: Erstmal herzlichen Dank für deinen Tipp! Nachdem ich das versucht hatte, hat es mir erstmal die gesamte Seite zerschossen! 

Anbei 2 Screenshots:
1) Die Unterseite "Wohnzimmer" von "Thyraz" mit dem statischen Bildhintergrund
2) Eine noch nicht fertige "Musik-Unterseite" mit dem Cover des aktuellen Spotify Titels, etc.

Hier der Auzug aus der .css

/* Room Header */
#livingroom {
    background: url(https://192.168.10.37:8083/fhem/ftui/img/livingroom.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#nurseryroom {

und der .html Auszug aus der "Musik-Unterseite"

Code Auswählen Erweitern

<div data-type="popup" data-width="95%" data-height="80%" class="centered">
<div data-type="image"
data-device="Spotify"
data-get="track_album_cover_medium"
data-width="210px"
data-height="210px"
class="nocache">
</div>

<div class="dialog">
<header><div data-type="joinedlabel" data-device="Device" data-mask="Cover[ für $1]" data-get='["roomName"]' class="inline"></div></header>
<div data-type="switch"
data-device="Device"
data-get="transportState"
data-states='["PLAYING","PAUSED_PLAYBACK","STOPPED"]'
data-background-icon="-"
data-background-colors='["white","white","white"]'
data-colors='["white","white","white"]'
data-icons='["fa-play","fa-pause","fa-pause"]'
class="inline readonly"
style="position: absolute; top: 5px; right: -5px;"
onclick="$('.dialog-close').trigger('click');">
</div>
<div data-type="imagecover"
data-device="Device"
data-get="track_album_cover_medium"
data-opacity="1.0"
data-width="95%"
data-height="calc(100vh - 60px)"
class=""
onclick="$('.dialog-close').trigger('click');"
style="">
</div>

Die .html von "Thyraz" hat folgende Elemente:

Code Auswählen Erweitern

<html>
<body>
<div class="page" id="content-wohnen">
<div id="panel">
    <!-- Start of content -->
    <div id="livingroom" class="container-fluid">
        <div id="spacer" class="col-xs-12" style="height: 90px"></div>

        <div id="temperature"
                data-template="template_temperature.html"
                data-parameter='{"var-device":"netatmo_xx_xx_xx_xx_xx_xx", "var-temp":"temperature", "var-hum":"humidity"}'>
        </div>

        <div id="spacer" class="col-xs-12" style="height: 10px"></div>
    </div>

    <div id="spacer" class="col-xs-12" style="height: 30px"></div>

    <div id="blinds" data-template="template_blinds.html"></div>

Die Idee ist es das wechselnde Spotify-AlbumCover jeweils als Hintergrundbild anzeigen zu lassen anstelle dem statischen Bild und an der Stelle der Temp. und Luftfeuchte den jeweiligen Titel & Interpret.

Ist das machbar?

Danke an alle!!!

[Standarduser]

Ja, das war ja nur mal schnell daher skizziert.
Das Prinzip, das ich beschrieben habe, funktioniert definitiv. Jetzt gilt es halt, die Feinheiten zu justieren.
Vielleicht reicht ja schon ein "position: absolute" im CSS.
Da musst Du einfach mal etwas probieren.