Autor Thema: [FTUI3] Webradio via playstream-widget analog FTUI möglich?  (Gelesen 430 mal)

Offline rob

  • Full Member
  • ***
  • Beiträge: 368
[FTUI3] Webradio via playstream-widget analog FTUI möglich?
« am: 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
fhem@Raspi3B mit DietPi auf USB-SSD am aktiven Hub | Z-Wave Stick Aeotec | Zigbee Stick Conbee2 | nanoJeeLink | SIGNALduino@433 + @868 MHz | Denkovi USB-OW-Busmaster | config. Firmata@Arduino | EspEasy@WemosD1;Sonoff Basic  | MySensors@Arduino

Offline rob

  • Full Member
  • ***
  • Beiträge: 368
Antw:[FTUI3] Webradio via playstream-widget analog FTUI möglich?
« Antwort #1 am: 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)
<!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)
...
<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  :-[  ::)
« Letzte Änderung: 27 September 2021, 20:23:18 von rob »
fhem@Raspi3B mit DietPi auf USB-SSD am aktiven Hub | Z-Wave Stick Aeotec | Zigbee Stick Conbee2 | nanoJeeLink | SIGNALduino@433 + @868 MHz | Denkovi USB-OW-Busmaster | config. Firmata@Arduino | EspEasy@WemosD1;Sonoff Basic  | MySensors@Arduino