[FTUI3] Webradio via playstream-widget analog FTUI möglich?

rob · 08 September 2021, 10:54:34

Hallo Leute.

Ich möchte in meiner FTUI3-Umsetzung auch gerne Webstreams am Tablet wiedergeben können und fand das FTUI-Webradio immer klasse (https://wiki.fhem.de/wiki/FTUI_Beispiel_Webradio). Dies basiert ja im Grunde auf dem Playstream-Widget (https://wiki.fhem.de/wiki/FTUI_Widget_Playstream) mit div. Bedienelementen drumrum.

Die Bedienelemente kann ich bereits abbilden, das ist schon vielfach gezeigt. Wie bekomme ich jedoch den Playstream hin? Einfach die widget_playstream.js aus FTUI in die components kopieren, dürfte nicht reichen. Gibt es da überhaupt schon etwas was ich ggf. überlesen habe?

Vielen Dank und beste Grüße
rob

rob · 23 September 2021, 12:12:38

OK. Ich habe es für mich mit einer Behelfslösung umgesetzt.

- ein vereinfachtes FTUI mit nur dem Playstream-Widget erstellt
- den FTUI-Ordner zusätzlich zum FTUI3 ebenfalls in den Docker-Container hineingereicht
- die FTUI3-Seite um ein iframe ergänzt, wobei das iframe die Playstream-Seite referenziert und "versteckt" wird durch überlagern vom Lautstärkeregler (Knob)

reduzierte FTUI-Playstream-Seite (webradio.html)

Code Auswählen


<!DOCTYPE html>
<html>

<head>
    <!--link rel="stylesheet" href="css/fhem-green-ui.css" /-->
    <meta name="longpoll_delay" content="1000">
    <meta name="fhemweb_url" content="http://myeineIP:8083/fhem/">
    <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>

<body>

    <div class="gridster">
        <ul>
<!--************** hier kommen die Widgets hin ****************-->
         <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <div data-type="playstream" 
               data-get="Radiosender:STATE" 
               data-url="Radiosender:link" 
               data-volume="Radio_volume:STATE" 
               class="hide">
          </div>
	</ul>
    </div>
</body>
</html>

FTUI3-Teil (die eigentliche Seite; separates File)

Code Auswählen


...
<ftui-grid-tile row="6" col="2" height="2" width="2">
      <header>Play</header>
	<ftui-button shape="circle" 
            size="large"
            [(value)]="Radiosender" 
            [fill]="Radiosender | map('off: outline, on: solid')">
          <ftui-icon name="lightbulb" ></ftui-icon>
        </ftui-button>
    </ftui-grid-tile>

    <ftui-grid-tile row="6" col="4" height="2" width="5">
      <header>AUDIO</header>
       <ftui-dropdown id="opt1" 
          [value]="Radiosender:link"
          (value)="setreading Radiosender:link">
          <option value="http://radioeins.de/stream">Radio eins</option>
          <option value="http://wdr-1live-live.icecast.wdr.de/wdr/1live/live/mp3/128/stream.mp3">eins Life</option>
          <option value="http://br-b5aktuell-live.cast.addradio.de/br/b5aktuell/live/mp3/128/stream.mp3">B5aktuell</option>
        </ftui-dropdown>
    </ftui-grid-tile>

    <ftui-grid-tile row="6" col="9" height="1" width="1">
      <header>ftui2</header>
      <iframe src="tablet/webradio.html" width="100%" height="100%" style="border:none;"></iframe>
    </ftui-tab-view>


    <ftui-grid-tile row="6" col="9" height="2" width="2">
      <header>Volume</header>
      <ftui-knob 
	[(value)]="Radio_volume">
      </ftui-knob>
    </ftui-grid-tile>
...

Bild siehe Anhang. Vielleicht nicht unbedingt schön, aber funktional

Der Fhem-Teil ist wie im Wiki (Webradio).

Viele Grüße
rob

EDIT: ~~Es gibt Seiteneffekte mit dem iframe. Das Widget, "wohinter" das iframe liegt, erscheint plötzlich auf allen Views. Naja, ist halt ein Behelf.~~
Hatte ein wenig aufgeräumt. Passt doch soweit. Anscheinend hatte ich selbst einen Bock reingebastelt

FHEM Forum

[FTUI3] Webradio via playstream-widget analog FTUI möglich?

rob

rob