Code-Hilfe gebraucht: Tablet-UI - Radio Player Script integration

thinman · 03 Januar 2017, 13:59:49

Hallo, ich hab zwar schon einiges mit Fhem und TabletUI gemacht aber meine Coding Kenntnisse reichen für folgenden Problem nicht mehr aus.
Ich möchte eine Internetradio basierend auf ein zweiten Rpi mit Touch Display bauen.
Es funktioniert alles, nur die wichtigste Radiosender (wegen morgenlichen Verkehrsinfos) hat keine direkte URL für die StreamRadio Modul.
Deswegen müsste ich irgendwie die vom sender angebotene Script Applet Player integrieren.
Wenn ich aber die Inhalt einfach reinkopiere, funktionieren andere FTUI schalter nicht mehr.

Code Auswählen

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

<div class="gridster">
<ul>

<li data-row="1" data-col="1" data-sizex="7" data-sizey="2" data-template="menu.html"></li>

<li data-row="1" data-col="8" data-sizex="2" data-sizey="2">
           <div data-type="clock" data-format="H:i" class="cell large"></div>
           <div data-type="clock" data-format="d.n.Y" class="cell small"></div>
</li>

<li data-row="3" data-col="1" data-sizex="4" data-sizey="3">
	<header>Badezimmer</header>
	<div class="container top-space">
			<div data-type="thermostat" data-device="MAX_0f1ae8" 
				data-valve="valveposition" 
				data-get="desiredTemperature" 
				data-temp="temperature" 
				data-set="desiredTemperature" 
				data-min="14"
				data-max="32"
				data-step="0.5"
				class="small">
			</div>
	</div>
</li>

<li data-row="3" data-col="5" data-sizex="5" data-sizey="6">
     <div class="container ">
          <div data-type="select"
             data-device="SRadio"
             data-list="STREAMS"
             data-get="Stream"
             data-set="PLAY"
             class="select">
          </div>
          <div data-type="push"
             data-device="SRadio"
             data-icon="fa-stop"
             data-background-icon="-"
             data-set-on="STOP"
             class="big">
          </div>

        <div data-type="label" data-device="SRadio" data-get="StreamTitle" class="row"></div>
        <div data-type="label" class="row bold top-space-2x">Volume</div>
        <div data-type="slider"
          data-device='SRadio'
          data-set="VOLUME"
          data-get="Volume"
          data-min="0"
          data-max="100"
          class="row centered top-space horizontal squareborder" >
        </div>
      </div>
</li>


<li data-row="3" data-col="13" data-sizex="8" data-sizey="4">
<!-- AB HIER DIE DATEN VOM RADIOSENDER -->
  <script>
    (function(d, s){
        if(!window.rel){
              s = d.createElement("script");
              s.type = "text/javascript";
              s.async = true;
              s.id = "radio-de-embedded";
              s.src = "//radio.de/inc/microsite/js/full.js";
              d.getElementsByTagName("head")[0].appendChild(s);
              window.rel = true;
          }
     }
     (document));
  </script>

  <div class="ng-app-embedded">
       <div ui-view class="microsite embedded-radio-player" data-playerwidth="240px" data-playertype="web_embedded" data-playstation="radioprimavera" data-apikey="df04ff67dd3339a6fc19c9b8be164d5b5245ae93"></div>
  </div>
</li>

</ul>
</div>
</body>
</html>

(Es ist nur ein Template was das Design angeht, daher stimmt das Raster noch nicht.)
Das eingebrachte Kode funktioniert zwar aber das menu.html wird dann gar nicht mehr dargestellt.
Als würde der Script andere Teile der Seite blockieren.
Hat jemand ein Idee wie ich so ein Script sauber integrieren kann?
(Ich hab versucht in AngularJS etwas einzulesen aber bis ich das gerafft habe, gehen Jahre vorbei...)

Danke und Gruß,
Steve

ArduPino · 01 April 2017, 16:07:04

Genau das gleiche habe ich auch gerade versucht...und habe auch das gleiche Problem, das mein Menü nicht richtig angezeigt wird.
Ein Test im normalen Browser zeigt auch, das die Seite einige Schwierigkeiten hat, wenn man mit dem "Zurück" Button wieder auf die Startseite will.
Ein neu laden hiflt dann aber.

Hast du zufällig dazu was heraus gefunden ?
Oder reine andere Möglichkeit andere Sender zu integrieren, die eben nicht mit "playstream" funktionieren ?
Ich versuch mal die ganze radio.de Seite in ein iframe zu laden...mal sehen was passiert :-D

EDIT:
Das würde sogar funktionieren ! Nur ist mein Tablet recht langsam, die Seite braucht zu lange um zu laden, alles sehr träge und weil ich fully Kiosk Browser benutze und das "Enable Pull to Refresh" an habe, kann ich auch nicht mal eben hoch und runter scrollen...ne das ist nichts richtiges.

FHEM Forum

Code-Hilfe gebraucht: Tablet-UI - Radio Player Script integration

thinman

ArduPino