MPD Player Steuerung im FTUI

Tobias · 07 Februar 2017, 10:48:17

Hab den Wikiartikel nochmal stark überarbeitet
Sorry, hab die Installationsanweisung auch erst gestern im Wikiartikel eingetragen

Shadow3561 · 15 Februar 2017, 19:51:34

Moin,
Ich habe jetzt das Beispiel von setstate übernommen weil ich es optisch ansprechend finde.

Habe jedoch ein Problem mit der MediaList.
Die angezeigten Cover sind riesig und die Liste geht weit über den Bildschirm (nach unten) hinaus (Bild anbei)

Wie kann ich das ändern?

Mit freundlichen Grüßen

n4rrOx · 16 Februar 2017, 09:06:23

Hi,

ich glaube ohne Code der index.html und der Unterseite mit der MediaList wird dir so schnell keiner helfen können

Shadow3561 · 16 Februar 2017, 17:37:36

,
Ja, natürlich. Das kommt davon wenn man mal schnell was zwischen Tür und Angel fragen möchte.

Hier der HTML Teil der MediaList

Code Auswählen

        <li data-row="1" data-col="2" data-sizex="7" data-sizey="6">
             <header>PLAYLIST</header>
     <div data-type="label" data-device="myMediaList" data-get="CurrentDir" class="" ></div>         
             
             <div data-type="select" data-device="myMediaList" data-list="FolderContent" data-get="CurrentDir" data-set="RequestedDirectory" class="wider" ></div>

              <div data-type="medialist" data-device="myMediaList" data-get="currentdir_playlist" data-pos="Pos" data-set="play" class="vbox phone-width"></div>
        </li>

Und hier meine Index HTML

Code Auswählen

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="76">
    <meta name="widget_base_height" content="83">
    <meta name="gridster_cols" content="13">
    <meta name="gridster_rows" content="9">
    
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="0">
    <meta name="widget_margin" content="1">
    <meta name="longpoll" content="1">
    <meta name="debug" content="2">

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="lib/openautomation.css" />
    <link rel="stylesheet" href="lib/fhemSVG.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

 
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI-eval</title>
</head>
<body>
    <div class="gridster">
        <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="9">
<header><div data-type="label" class="medium orange">Menu</header>
            <div class="cell">
                <div data-type="pagebutton" data-url="#content_main.html"     data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*index_page_left_demo.html||.*#content_main.html)" data-icon="fa-home" class="default top-space"></div>
                <div data-type="pagebutton" data-url="#content_music.html"    data-load="#content9" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_music.html" data-icon="fa-music" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#content_rollaeden.html" data-load="#content3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_rollaeden.html" data-icon="oa-fts_shutter_50" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_light.html"      data-load="#content2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_light.html" data-icon="fa-lightbulb-o" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_phone.html"    data-load="#content5" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_phone.html" data-icon="fa-phone" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_cam.html"   data-load="#content6" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_cam.html" data-icon="fa-video-camera" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_heating.html"     data-load="#content7" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_heating.html" data-icon="oa-sani_heating" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_charts.html"   data-load="#content8" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_traffic.html" data-icon="fa-line-chart" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_wetter.html"   data-load="#content4" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_wetter.html" data-icon="oa-weather_cloudy" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_dlna.html" data-load="#content11" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#musik-dg-settings.html" data-icon="oa-edit_settings" class="prefetch"></div>
        
                <div class="absolute bottom bottom-space-2x">
                   <div data-type="clock" data-format="H:i" class="large"></div>
                   <div data-type="clock" data-format="d.n.Y" class="small"></div>
                </div>
            </div>
        </li>
        <li data-row="1" data-col="2" data-sizex="12" data-sizey="9">
            <div class="page" id="content1"></div>
            <div class="page" id="content2"></div>
            <div class="page" id="content3"></div>
            <div class="page" id="content4"></div>
            <div class="page" id="content5"></div>
            <div class="page" id="content6"></div>
            <div class="page" id="content7"></div>
            <div class="page" id="content8"></div>
            <div class="page" id="content9"></div>
            <div class="page" id="content11"></div>
         </li>
        </ul>
            </div>
</body>
</html>

Mit freundlichen Grüßen

DerBaer · 16 Februar 2017, 20:18:43

Also sowit hab ich das jetzt nach langem hin und her auch ganz gut zum laufen gebracht.

Im Prinzip hab ich das originale Modul hergenommen, zusätzlich von setstate noch die beiden notifys OnMpdNewTrack und OnMpdPlay, sowie die Funktionen seiner 99_myUtils.pm.

Läuft soweit auch ganz gut, leider werden die Covers in dem Medialist Widget nur teilweise angezeigt, was wohl daran liegt dass ich das letzte notify nicht verwendet habe.
Dazu muss ich sagen, das Modul das setstate verwendet ist schon etwas veraltet und hat einige Funktionen nicht. Das jetzt auseinander zu klamüssern und 2 zu eins zu machen is für mich leider unmöglich. Bisher zumindest...

Das wäre mal zumindest ein Punkt den ich zu beanstanden hab

Zum andern geht das hoch scrollen der Medialist nicht im fullyBrowser, schaltet man das reload beim Pull in den Einstellungen aus, dann geht's auch.

Alles in allem trotzdem ne gute Arbeit und ich bedanke mich

Edit:

Zu den Covers noch:

Wenn man mit Last.FM verbunden ist, wird vom MPD Modul eine URL zu einem Albumbild ausgegeben.
Könnte man dieses nicht iwi über die Medialist abfragen?

n4rrOx · 17 Februar 2017, 11:01:16

Hi,

versuch mal folgende Zeile:

Code Auswählen

<header><div data-type="label" class="medium orange">Menu</header>

in Folgendes zu ändern:

Code Auswählen

<header><div data-type="label" class="medium orange">Menu</div></header>
ggf. kann schon das der Grund sein, warum das Design "zerschossen" wird.... muss aber nicht sein... ansonsten müsste setstate nachschauen, was da evtl. im Widget schief läuft.

Gruß
Mathias

Wzut · 17 Februar 2017, 12:40:02

Zitat von: DerBaer am 16 Februar 2017, 20:18:43
Wenn man mit Last.FM verbunden ist, wird vom MPD Modul eine URL zu einem Albumbild ausgegeben.
Könnte man dieses nicht iwi über die Medialist abfragen?

Natürlich, viele der letzten Änderungen am MPD Modul wurde ja vorgenommen um direkt mit TabletUI zusammen arbeiten zu können.

Shadow3561 · 17 Februar 2017, 14:50:27

ZitatHi,

versuch mal folgende Zeile:
Code: [Auswählen]
<header><div data-type="label" class="medium orange">Menu</header>

in Folgendes zu ändern:
Code: [Auswählen]
<header><div data-type="label" class="medium orange">Menu</div></header>
ggf. kann schon das der Grund sein, warum das Design "zerschossen" wird.... muss aber nicht sein... ansonsten müsste setstate nachschauen, was da evtl. im Widget schief läuft.

Gruß
Mathias

Danke für den Hinweis.
Leider keine Änderung auf der Seite, auch nicht bei den anderen Seiten meines Tablet-UI.
Da hilft dann nur warten auf setstate

DerBaer · 17 Februar 2017, 15:35:12

Zitat von: Wzut am 17 Februar 2017, 12:40:02
Natürlich, viele der letzten Änderungen am MPD Modul wurde ja vorgenommen um direkt mit TabletUI zusammen arbeiten zu können.

Das hab ich auch verfolgt. Es fehlt momentan halt noch an der Medialist. Aber wird zur gegebenen Zeit schon noch kommen.
War ja jetzt "nur" meine Rückmeldung zu dem ganzen Thema.

Shadow3561 · 19 Februar 2017, 08:11:04

Zitat von: Shadow3561 am 15 Februar 2017, 19:51:34
Moin,
Ich habe jetzt das Beispiel von setstate übernommen weil ich es optisch ansprechend finde.

Habe jedoch ein Problem mit der MediaList.
Die angezeigten Cover sind riesig und die Liste geht weit über den Bildschirm (nach unten) hinaus (Bild anbei)

Wie kann ich das ändern?

Mit freundlichen Grüßen

Moin,
Habe den Fehler jetzt gefunden.
Habe TabletUi 2.5 installiert, da ist wohl das MediaList Modul noch nicht portiert worden.
Bin jetzt wieder zurück auf 2.2 und alles läuft wie es soll.

Danke an alle fürs Kopfzerbrechen.

MfG

Edit: habe noch ein weni optimiert und bin soweit zufrieden.
Bin aber für jede Anregung dankbar, also legt los wenn ihr noch Ideen habt.

Gunther · 26 Oktober 2017, 02:34:49

Kannst Du mal sagen, was Du audiomäßig angebunden hast? Wie hast Du das in FHEM und Tablet UI definiert?

Shadow3561 · 26 Oktober 2017, 16:36:21

Zitat von: Gunther am 26 Oktober 2017, 02:34:49
Kannst Du mal sagen, was Du audiomäßig angebunden hast? Wie hast Du das in FHEM und Tablet UI definiert?

Sorry, aber ich stehe bezüglich deiner Frage ein wenig auf dem Schlauch.
Was genau möchtest du wissen?

MfG

DerBaer · 26 Oktober 2017, 17:17:54

Ich glaub er meint wie das mit dem Lautsprecher verkabelt is ^^

Shadow3561 · 26 Oktober 2017, 17:58:50

Aha,
Also mein BananaPi hängt per HDMI an meinem Onkyo Tx-Nr5008.
Es besteht aber auch die Möglichkeit einen Stream mit MPD zu senden und diesen als Radiostation über einen Netzwerkplayer einzubinden.

MfG

Gunther · 27 Oktober 2017, 00:07:58

Zitat von: Shadow3561 am 26 Oktober 2017, 16:36:21
Sorry, aber ich stehe bezüglich deiner Frage ein wenig auf dem Schlauch.
Was genau möchtest du wissen?

MfG

Mich interessiert, was Du hinter Server und Radio stecken hast. Sind das Funktionen des MPD Players oder wie hast Du Radio und Server (Streaming?) eingebunden?