SB-Player: Zeigt her eure Oberflächen!

[FHEm2005]

Ich würde diesen Thread gerne so umbenennen, das JEDER eine Möglichkeit hat seine gestaltete Oberfläche hier zu präsentieren. In diesem Zusammenhang wäre es natürlich wichtig, die verwendeten Anpassungen zu nennen und die Funktionen zu erläutern.

Ich freue mich auf Eure Beiträge.



Mit dem bekannten Inhalt meiner SB-Touch mache ich mal den Anfang.


Mit umfangreichem "Verbiegen" der normalen Widget-Elemente habe ich die Oberfläche einer SB-Touch nachgebaut. Damit sind die wichtigsten Steuerungselemente wie

• ein/aus
• Senderwahl
• vorwärts
• pause/play
• rückwärts
• repeat off/repet one/repeat all
• shuffle off/shuffle song/shuffle album
• volumeUp
• volumeSlider
• volumeDown

sowie die Anzeigen

• gewählter Favorit (Radiostation)
• Coverart
• Titel
• Interpret
• Album

vereint.

Die Bedienelemente sind die fa-icons geblieben, wurden aber über eine rgba-Angabe unsichtbar über den Teil der Grafik gelegt, der eine Bedienfunktion erhalten soll. Die Togglefunktion play-pause sind generische fa-icons; da habe ich den play-Button aus der Grafik "herausgearbeitet" und durch die icons fa-play und fa-pause als mulibutton darübergelegt.

Die Buttons repeat und shuffle haben in je nach Zustand einen mehr oder weniger grauen Rahmen bekommen. Der Slider und die Select-Box sind die originalen Elemente, deren Klassen verändert wurden. Die geänderten Klassen gelten leider für die gesamte Darstellung der angezeigten HTML-Seite.

Für die Senderwahl in der Kopfleiste wurde das select-widget seines Rahmens beraubt und in Schriftgröße und Stil angepasst. Die Bedienung kann dem Bild entnommen werden.

In die linke obere Ecke were ich wohl einen mute-Button platzieren. Leider bleibt die Anzeige im Aus-Zustand stehen. Mein Traum wäre, abhängig vom Status-Power, eine digitale Uhr  im Ruhezustand darüber zu legen. Kommt Zeit - kommt Rad 

Wenn Interesse besteht, kann ich mal ein ZIP-Paket den Elementen schnüren und posten.

Allen, die meine nervenden Fragen ertragen und  -noch besser- beantwortet haben, hier noch einmal meinen herzlichsten Dank.

Viele Grüße
Eberhard

[harry66]

das sieht super aus ich wäre am "ZIP-Paket" interessiert.

Was mir auch noch fehlt ist eine Möglichkeit mit FTUI Playlisten und Alben/Interpret/Titel.. suche.

Gruß Rolf

[FHEm2005]

Hallo Rolf,

in der Anlage der ZIP-Ordner mit 3 weiteren Hintergrundbildern, meiner fhem-Konfiguration der SBT.Wohnzimmer, dem HTML-Code des FTUI-Teiles und der geänderten Klassen.  Für die Hintergrundgrafiken musst Du den Pfad /opt/fhem/www/tablet/images/squeezebox/wallpaper einrichten. Die anderen grafischen Elemete müssen unter /opt/fhem/www/tablet/images/squeezebox/ liegen.

Suchen nach Titel, Album und Interpret wäre was für Menschen, die tief in der Programmierung stecken. Ich benutze dafür iPeng auf meinem iPhone, welches sicher besser ist, als eine von mir zusammengebastelte Version. Ziel meiner Version war es, die wichtigsten Bedienelemente abzudecken. Nicht mehr und nicht weniger.

Viel Erfolg und Gruß
Eberhard

Edit: Lesbarkeit des FTUI-Codes angepasst

[harry66]

Suchen nach Titel, Album und Interpret wäre was für Menschen, die tief in der Programmierung stecken.

das ist leider bei mir auch nicht gegeben, ich benutze eine App auf meinem android-Handy. Aber wenn ein fähiger Programmierer hier mit liest und grade Langeweile hat könnte er sich der Sache ja annehmen 

Danke für deine Lösung, macht die ganze Sache viel schöner 
Gruß Rolf

[harry66]

ich hab noch ein wenig experementiert
Favoritenlistfeld und Playlistfeld nebeneinander, ist dann zwar nicht mehr wie bei dir dem original nachgebaut stört mich aber nicht

in Fhem:

Code Auswählen Erweitern


attr <squeezplayerdevice> userReadingssb_name {"wz.SqueezPi"},
FAVSTR_FTUI {my $t=InternalVal($name,'FAVSTR','');;$t=~s/,/:/g;;return($t)},
PLAYLIST_FTUI {my $t=InternalVal($name,'SERVERPLAYLISTS','');;$t=~s/,/:/g;;return($t)}
in FTUI

Code Auswählen Erweitern

<!-- Pulldown - Stationstasten --->
<div data-type="select"
data-device="wz.SqueezPi"
data-list="FAVSTR_FTUI"
data-get="playlists"
data-set="favorites"
data-cmd="set"
data-alias='["RadioRur","AntenneAC","HitRadioFFH"]'
style="width:150px;
position: absolute;
top: 14px;
left: 56px;
font-size: 15px;
font-weight:bold;
    color:grey;">
</div>
<!-- Pulldown - Playlist --->
<div data-type="select"
data-device="wz.SqueezPi"
data-list="PLAYLIST_FTUI"
data-get="playlists"
data-set="playlists"
data-cmd="set"
style="width:160px;
position: absolute;
top: 14px;
left: 215px;
font-size: 15px;
font-weight:bold;
    color:grey;">
</div>



was mich allerdings noch stört ist das es keine Aktualisierung gibt wenn etwas neues ausgewählt wird?

Ich benutze WebViewControl auf einem Kindel fire, vielleicht hat da jemand eine Idee?

Gruß Rolf

[FHEm2005]

hallo Rolf,
sieht doch richtig gut aus. Ist aber nicht für mich, da ich durch die RFID-Steuerung über 320 Playlisten habe. Da braucht mein Server zu lange, um die mir anzeigen zu lassen.

Hast du die beiden Attribute gesetzt?

event-on-change-reading .*
donotnotify false

Hinweis aus irgendeinem Dokument:

donotnotify <true|false> :  Mit diesem Attribut kann man einstellen, ob der Player ein FHEM Notify bei jeder Änderung eines Readings lostritt oder nicht. Per Default steht das Attribut auf true; der Player erzeugt in diesem Fall nur dann ein Notify, wenn sich das Reading state (on|off) ändert, aber nicht, wenn z.B. das nächste Stück angespielt wird. Ein Notify erzeugt signifikante Rechenlast im FHEM Server und so mancher Radio Sender wechselt ja alle paar Sekunden die Anzeige. Jeder dieser Anzeigenwechsel würde dann zu einem Notify auf dem FHEM Server führen. Diese Rechenlast kann über das nachfolgende Attribut eingeschränkt werden.

event-on-change-reading  <Ausdruck> : Wird donotnotify auf false gesetzt, veranlasst jede Änderung eines Readings ein Notify. Mit diesem Attribut können auslösende Ereignisse gefiltert werden.
   Beispiele:
        attr <playername> event-on-change-reading .*
Das  ".*"   wertet alle Änderungen in den Readings aus und startet jeweils ein Event.
attr <playername> event-on-change-reading currentAlbum,currentArtist,currentTitle
currentAlbum, currentArtist, currentTitle : wertet nur die Readings currentAlbum, currentArtist, currentTitle und natürlich on und off.

Gruß Eberhard

[harry66]

super jetzt funktioniert alles
Danke

[FHEm2005]

Ich habe heute das Thema dieses Threads umbenannt, weil ich dazu aufgefordert habe, die eigene SB-Player UI der Allgemeinheit vorzustellen.

Gruß
Eberhard

[tomster]

Hier ist meine Variante. Da mir das Layout des FTUI ganz gut gefällt, habe ich das Design mit bordeigenen Mitteln umgesetzt.
Übrigens, Danke Eberhard für deine userReadings zur Einbindung der Playlists/ Favoriten. Das hat mir bislang noch gefehlt.
Für die Sync-Links in meiner Variante muss man auch ein paar userReadings setzen. Ich such die Mal bei Gelegeneheit raus.
In meinem Fall habe ich einen "Hauptplayer", der in der Küche steht (schlichtweg, weil der am Meisten läuft). Zu diesem kann man dann mit einem "Touch" auf das Linksympbol die weiteren Player hinzu- oder entsyncen. Entschuldigt bitte die komischen Readings auf dem Screenshot, aber ich habe derzeit alles wieder auseinandergerupft, weil ich nach der Luftverdrahtungsphase nun alles vernünftig installieren möchte. Leider fehlt mir momentan ein bissl die Zeit dazu.

[FHEm2005]

Hallo tomster,

schön, dass Du Deine SB-Steuerung hier vorgestellt hast. Besonders die sync/unsync Darstellung gefällt mir gut. Das muss ich auch noch irgendwie einbauen.

Ich muss eines klarstellen:

Danke Eberhard für deine userReadings zur Einbindung der Playlists/ Favoriten.

Die Programmierung ist nicht von mir, sondern aus den Thread "Squeezebox Modul - erste Version" Beitrag #923
von ChrisD.

Versuch mal die FTUI-Konfuguration zeitnah nachzureichen.

Viele Grüße
Eberhard

[tomster]

Also hier schon Mal der Code für das FTUI. Ich hoffe ich hab seit dem Auseinanderpflücken des Set-ups nicht noch nachträglich darin rumgewurschtelt 
So, da hab nicht nur ich zwischenzeitlich daran rumgewurschtelt, sondern auch an den SB_Modulen hat sich ein bissl was getan. Nunmehr sollten die Sync-Buttons aber wieder funktionieren. Die Dropdown-Liste und der Timer funktionieren aber noch nicht, weil ich mir da noch einige Dinge etwas anders vorstelle.

Code Auswählen Erweitern


<li data-row="4" data-col="3" data-sizex="6" data-sizey="8">
        <header>PLAYER K&Uuml;CHE</header>
<div class="container cell top-space">
        <div data-type="itunes_artwork"
                data-device="Kueche.SB_PLAYER"
                data-size="210"
                data-stripbrackets="true"
                data-notfoundimg="Kueche.SB_PLAYER:COVERARTURL"
        data-get='["currentArtist","currentTitle"]'></div>
        <div data-type="mpdnowplaying"
                data-device="Kueche.SB_PLAYER"
                data-name="currentPlaylistName"
                data-title="currentTitle"
                data-artist="currentArtist"></div>
</div>
</li>
<li data-row="4" data-col="9" data-sizex="6" data-sizey="8">
        <header>PLAYER K&Uuml;CHE</header>
<div class="cell top-space">
        <div data-type="switch"
data-device="Kueche.SB_PLAYER"
        data-icon="fa-step-backward"
data-background-icon="-"
              data-set-on="prev"
data-set-off="prev"
data-on-color="#505050"
                data-off-color="#aa6900"
class="inline">
        </div>
        <div data-type="switch"
                <div data-type="switch"
                data-device="Kueche.SB_PLAYER"
                data-get="playStatus"
                data-get-on="stopped"
                data-get-off="!on"
                data-icon="fa-stop"
                data-background-icon="-"
                data-set-on="stop"
                data-on-color="#aa6900"
                data-off-color="#505050"
                class="inline">
        </div>
        <div data-type="switch"
                data-device="Kueche.SB_PLAYER"
                data-get="playStatus"
                data-get-on="playing"
                data-get-off="!on"
                data-icon="fa-play"
                data-background-icon="-"
                data-set-on="play"
                data-on-color="#aa6900"
                data-off-color="#505050"
                class="inline">
        </div>
        <div data-type="switch"
data-device="Kueche.SB_PLAYER"
              data-icon="fa-step-forward" data-background-icon="-"
              data-set-on="next"
                data-set-off="next"
data-on-color="#505050"
                data-off-color="#aa6900"
class="inline">
        </div>
    </div>
<div class="top-narrow">
        <div data-type="switch"
data-device="Kueche.SB_PLAYER"
                data-icon="fa-volume-down"
data-background-icon="-"
                data-set-on="volumeDown"
                data-set-off="volumeDown"
data-on-color="#505050"
                data-off-color="#aa6900"
            class="inline narrow"></div>
        <div data-type="slider"
            data-device="Kueche.SB_PLAYER"
            data-min="0"
            data-max="100"
            data-get="volume"
            data-set="volume"
                data-width="110"
        class="inline horizontal narrow"></div>
        <div data-type="switch"
data-device="Kueche.SB_PLAYER"
                data-icon="fa-volume-up"
                data-background-icon="-"
                data-set-on="volumeUp"
                data-set-off="volumeUp"
data-on-color="#505050"
                data-off-color="#aa6900"
            class="inline narrow"></div>
    </div>

<div class="cell">
        <div data-type="select"
        data-device="Kueche.SB_PLAYER"
        data-list="FAVSTR_FTUI"
        data-set="favorites"
        data-get="playlists"
data-cmd="set"
        class="inline w3x"></div>
        <div data-type="push"
            data-device="Kueche.SB_PLAYER"
                data-icon="fa-clock-o"
                data-set="on-for-timer 1800"
            class="cell inline narrow"></div>
</div>
<div class="container top-space">
        <div class="label top-space">Synchronisieren mit:</div>
  <div class="inline">
        <div data-type="multistatebutton"
        data-device="Wohnzimmer.SB_PLAYER"
        data-get="synced"
        data-get-on='["(.*?Wohnzimmer.*?)","none"]'
        data-icons='["fa-link","fa-unlink"]'
        data-set='["unsync","sync Kueche.SB_PLAYER asSlave"]'
        data-background-icon="-"
        data-on-colors='["#aa6900","#505050"]'
        class="cell small narrow top-space"></div>
        <div data-type="label" >Wohnen</div>
</div>
<div class="inline">
        <div data-type="multistatebutton"
        data-device="Terrasse.SB_PLAYER"
        data-get="synced"
        data-get-on='["(.*?Terrasse.*?)","none"]'
        data-icons='["fa-link","fa-unlink"]'
        data-set='["unsync","sync Kueche.SB_PLAYER asSlave"]'
        data-background-icon="-"
        data-on-colors='["#aa6900","#505050"]'
        class="cell small narrow"></div>
        <div data-type="label" >Terrasse</div>
        </div>
        <div class="inline">
        <div data-type="multistatebutton"
        data-device="Werkstatt.SB_PLAYER"
        data-get="synced"
        data-get-on='["(.*?Werkstatt.*?)","none"]'
        data-icons='["fa-link","fa-unlink"]'
        data-set='["unsync","sync Kueche.SB_PLAYER asSlave"]'
        data-background-icon="-"
        data-on-colors='["#aa6900","#505050"]'
        class="cell small narrow"></div>
        <div data-type="label">Werkstatt</div>
        </div>
        <div class="inline">
        <div data-type="multistatebutton"
        data-device="Hobbyraum.SB_PLAYER"
        data-get="synced"
        data-get-on='["(.*?Hobbyraum.*?)","none"]'
        data-icons='["fa-link","fa-unlink"]'
        data-set='["unsync","sync Kueche.SB_PLAYER asSlave"]'
        data-background-icon="-"
        data-on-colors='["#aa6900","#505050"]'
        class="cell small narrow"></div>
        <div data-type="label">Hobbyraum</div>
        </div>
</div>
</li>


Die userReadings für den Küchen-Player

Code Auswählen Erweitern


attr Kueche.SB_PLAYER DbLogExclude .*
attr Kueche.SB_PLAYER IODev LMS
attr Kueche.SB_PLAYER amplifier play
attr Kueche.SB_PLAYER coverartheight 200
attr Kueche.SB_PLAYER coverartwidth 200
attr Kueche.SB_PLAYER donotnotify false
attr Kueche.SB_PLAYER fadeinsecs 10
attr Kueche.SB_PLAYER idismac false
attr Kueche.SB_PLAYER room Kueche
attr Kueche.SB_PLAYER serverautoon true
attr Kueche.SB_PLAYER ttslanguage de
attr Kueche.SB_PLAYER ttslink http://translate.google.com/translate_tts?ie=UTF-8&tl=<LANG>&q=<TEXT>&client=tw-ob
attr Kueche.SB_PLAYER volumeLimit 100
attr Kueche.SB_PLAYER volumeStep 5


[Hyperbit]

ich bekomme irgendwas mit dem Style nicht hin
jemand ne idee?

[FHEm2005]

Hallo Hyperbit,

da die Grundelemente angezeigt werden und alle SB-individuellen Angaben nicht dargetellt werden. tippe ich darauf, dass der Namen unter data-device nicht angepasst wurde. Selbstverständlich muss die SB auch im Status ein (state  on) sein.

Gruß
Eberhard

[gravidi]

Moin,

anbei meine Musikzentrale, umgesetzt in Smartvisu.

Diese Ansicht ist von meinem Tablet im Flur. Ist aber auch in abgesprckter Form auf den Smartphones drauf.

[FHEm2005]

Hallo garvidi,

mal ein ganz anderer Ansatz. Ich glaube ich muss mich irgendwann mal mit SmartVisu beschäftigen.  Sehr schön.

@tomster
Iin Deiner FTUI-Konfiguration für die Synchronisation habe ich den Befehl "sync Kueche.SB_PLAYER asSlave" gefunden.
Das kapiere ich nicht so wirklich. Du rufst vom Wohnzimmer.SB_PLAYER(Slave) den Kueche.SB_PLAYER als Master auf. Den Zusatz asSlave habe ich nirgends in der Beschreibung gefunden. Der Rufende ruft laut CLI-Doku doch immer als Slave den gerufenen Player (Master) auf. Oder habe ich da etwas falsch verstanden?

Ich bin nicht unbedingt in Perl zuhause. Versuche zwar geschriebene Codes zu verstehen, scheitere leider schon mal dabei. Ich verstehe bei den UserReadings die if-Abfrage if(index(ReadingsVal($name,'synced',''),'Wohnzimmer')!=-1) nicht so wirklich.

Du fragt den Index des rufenden Players ab. Es gibt doch gar kein Reading index. Ich weiß, dass auf der CLI-Schnittstelle mit Indizes gearbeitet wird: <MAC-Adresse> sync 1 bzw <MAC.Adreese> sync - . Aber im Modul selber wird das wohl umgesetzt.

Gruß
Eberhard