Einfaches WebRadio Widget?

misux · 24 Juni 2019, 11:45:54

HI!

Ich würde mir gerne eine einfache einSeitenHomepage nur fürs Internet Radio Basteln.

Hat vielleicht jemand ein einfaches Widget parat was die Standard Funktionen unterstützt?

Also:
Power on/off
Lautstärke
Eine Auswahl vorgefertigter Sender
Eine Info was gerade abgespielt wird wäre auch super!

Das würde mir schon reichen...

Wäre über ein Paar Bilder und Inspirationen vielleicht auch die Codes dazu sehr dankbar!

Gruß

dirk.k · 27 Juni 2019, 09:11:14

Hallo,
wenn keiner weiter antwortet möchte ich dir meine MPD Steuerung zeigen, auch wenn diese bisher nur aus der Bastelecke stammt.
Kurze Erklärung:
Ich steuere damit einen MPD, welche auf einem RASPI läuft.
Mit Playlist Modulen/Widgets hatte ich keinen Erfolg, da der MPD nicht auf FHEM läuft und ich FHEM2FHEM noch nicht probiert habe.
Für die Senderumschaltung habe ich Playlists auf MPD angelegt, welche ich über FTUI/FHEM wähle...
Eine schaltbare Steckdose für raspi und das Röhrenradio ist geplant (einfacher An/Aus Slider).

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * main page
     *
     load this page via widget pagebutton
	 -->

</head>
<body>
  <div class="page" id="multimedia_piradio">
    <div class="gridster">
    <ul>
    
    <li data-row="1" data-col="1" data-sizex="6" data-sizey="2" class="bgi">
    <header><div data-type="label" class="medium orange">Ausgabegeräte</div></header>   
	
<!--	<div class="hbox squareborder col-1-1">
-->
      <div class="sheet">
        <div class="row">
          <div data-type="label"
            data-device="WifiRadio"
            data-get="outputname2"
            class="cell">
          </div>
          <div data-type="checkbox"
            data-device="WifiRadio"
            data-get="outputenabled2"
            data-set="outputenabled2"
            data-get-on="1"
            data-get-off="0"
            class="small cell">
          </div>
		</div>
		<div class="row">
          <div data-type="label"
            data-device="WifiRadio"
            data-get="outputname1"
            class="cell">
          </div>
          <div data-type="checkbox"
            data-device="WifiRadio"
            data-get="outputenabled1"
            data-set="outputenabled1"
            data-get-on="1"
            data-get-off="0"
            class="small cell">
          </div>
		</div>
		<div class="row">
          <div data-type="label"
            data-device="WifiRadio"
            data-get="outputname0"
            class="cell">
          </div>
          <div data-type="checkbox"
            data-device="WifiRadio"
            data-get="outputenabled0"
            data-set="outputenabled0"
            data-get-on="1"
            data-get-off="0"
			data-on-background-color="red"
            class="small cell">
          </div>

		  
         <div class="inline large darker thin cell" >Aufnahmestart: </div>
            <div data-type="datetimepicker" data-device="WiFiRadioRecordStart"
              data-get="STATE" data-set-value="*$v" data-cmd="set WiFiRadioRecordStart active; modify"
              data-step="15"
              data-datepicker="false" data-format="H:i"
              class="inline  thin orange cell right-space-3x">
         </div>
			  
	 <div data-type="checkbox" data-device='WiFiRadioRecordStart'
               data-get="STATE" data-get-on="!inactive" data-get-off="inactive"
               data-set-off="inactive"
               class="cell inline small right-space-2x">
         </div>
        
        </div>
      </div>
<!--	  
    <xx/div>
-->
	
	
    </li>

    
    <li data-row="1" data-col="7" data-sizex="5" data-sizey="6" class="bgi">
        <header><div data-type="label" class="medium orange">.</div></header>   

                  <div data-type="image"
                          data-device="WifiRadio"
                          data-get="artist_image"
						  data-substitution='["/fhem/icons/10px-kreis-rot","/fhem/icons/it_radio"]'
                          data-size='250'
                          class="top-space">
                 </div>


		<br/><br/>
	
        <div data-type="select" data-device="WifiRadio" data-list="playlistcollection_sorted" data-get="playlistname" data-set="playlist" class="cell-50 inline" ></div>
        <div data-type="switch" data-device="WifiRadio" data-fhem-cmd="get WifiRadio playlists" 
                  data-icon="fa-repeat" data-background-icon="-"
                  data-on-color="gray" data-off-color="gray"
				  class="inline small">
        </div>
        <div data-type="switch" data-device="WifiRadio" data-get="mute" data-fhem-cmd="set WifiRadio mute toggle" 
							data-background-icon="-"
                            data-states='["on","off"]'
                            data-colors='["yellow","gray"]'
                            data-icons='["oa-audio_volume_mute","oa-audio_volume_mute","oa-audio_volume_mid"]'
							class="inline big">
        </div>

        <div class="row large thin top-space">
           <div data-type="label" data-device="WifiRadio" data-get="Title" data-substitution="s/Or//g" class="bold"></div>
           <div data-type="label" data-device="WifiRadio" data-get="Artist" class=""></div>
           <div data-type="label" data-device="WifiRadio" data-get="Name" class=""></div>
        </div>
		
		                 <div class="row">
                     <div data-type="label" data-device="WifiRadio" data-get="elapsed" data-substitution="toMinFromSec()" class="inline middle"></div>
                     <div data-type="level" data-device="WifiRadio" data-get="elapsed" data-max="Time" data-width="280"   class="horizontal inline middle"></div>
                     <div data-type="label" data-device="WifiRadio" data-get="Time" data-substitution="toMinFromSec()" class="inline middle"></div>
                 </div>

                 <div class="row top-space">
                     <div data-type="switch" data-device="WifiRadio" data-get="repeat" data-set="repeat"
                          data-icon="fa-repeat" data-background-icon="-"
                          data-on-color="white" data-off-color="gray"
                          data-get-on="1" data-get-off="0"
                          data-set-on="1" data-set-off="0" class="col-1-5">
                     </div>
                     <div data-type="push" data-device="WifiRadio"
                           data-icon="fa-step-backward" data-background-icon="-"
                           data-off-color="#fff" data-on-color="#aa6900"
                           data-set-on="previous" class="col-1-5 big">
                     </div>
                     <div data-type="switch"
                             data-device="WifiRadio"
                             data-states='["play","pause","stop"]'
                             data-set-states='["pause","play","play"]'
                             data-background-icon="fa-circle-thin"
                             data-background-colors='["white","white","white"]'
                             data-colors='["white","white","white"]'
                             data-icons='["fa-play","fa-pause","fa-play"]'
                             class="col-1-5 big">
                     </div>
                     <div data-type="push" data-device="WifiRadio"
                           data-icon="fa-step-forward" data-background-icon="-"
                           data-off-color="#fff" data-on-color="#aa6900"
                           data-set-on="next" class="col-1-5 big">
                     </div>
                     <div data-type="switch" data-device="WifiRadio" data-get="random" data-set="random"
                           data-icon="fa-random" data-background-icon="-"
                           data-on-color="white" data-off-color="gray"
                           data-get-on="1" data-get-off="0"
                           data-set-on="1" data-set-off="0" class="col-1-5">
                     </div>
               </div>

		
    </li>
    
    <li data-row="4" data-col="1" data-sizex="6" data-sizey="4" class="bgi">
        <header><div data-type="label" class="medium orange">Widget 3</div></header>    
 
<div class="row-60">
<div class="cell">
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="1-RadioEins" data-get-off="!1-RadioEins" data-set-on="1-RadioEins" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>RadioEins</div>
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="2-FRITZ" data-get-off="!2-FRITZ" data-set-on="2-FRITZ" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>FRITZ</div>
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="5-SRF3" data-get-off="!5-SRF3" data-set-on="5-SRF3" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>SRF3</div>
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="99-SenderX" data-get-off="!5-SRF3" data-set-on="5-SRF3" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>frei</div>
</div>
<div class="cell">
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="1-SenderX" data-get-off="!1-FRITZ" data-set-on="1-RadioEins" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>frei</div>
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="2-SenderX" data-get-off="!2-FRITZ" data-set-on="2-FRITZ" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>frei</div>
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="5-SenderX" data-get-off="!5-SRF3" data-set-on="5-SRF3" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>frei</div>
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="5-SenderX" data-get-off="!5-SRF3" data-set-on="5-SRF3" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>frei</div>
</div>
<div class="cell">
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="1-SenderX" data-get-off="!1-FRITZ" data-set-on="1-RadioEins" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>frei</div>
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="2-SenderX" data-get-off="!2-FRITZ" data-set-on="2-FRITZ" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>frei</div>
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="5-SenderX" data-get-off="!5-SRF3" data-set-on="5-SRF3" data-set-off="" class="blue" data-icon="fa-music" ></div>
	<div>frei</div>
	<br/>
	<div data-type="switch" data-device="WifiRadio" data-set="playlist" data-get="playlistname" data-get-on="5-SenderX" data-get-off="!5-SRF3" data-set-on="5-SRF3" data-set-off="" class="blue" data-icon="fa-music" data-background-icon="fa-square"></div>
	<div>frei</div>
</div>

<div class="cell">		
	<div data-type="playstream" data-url="http://192.168.0.224:8000/"
		data-device="dummy1"
		data-get-on="play" data-get-off="stop"
		data-volume="volume">
	</div>
	<div data-type="label" class="cell">Stream abholen</div>
</div>
</div>
 
    </li>

	<li data-row="10" data-col="1" data-sizex="11" data-sizey="3" class="bgi">
        <header><div data-type="label" class="medium orange">Widget 5</div></header>  

                       <div class="cell">
							<div class="normal inline " data-type="volume" data-max="100" data-device='WifiRadio' data-get='volume' data-set='volume'></div>
					   </div> 
                       <div class="cell">
                           
							<div data-type="spinner" 
							     data-device="WifiRadio"
								 data-max="100"
								 data-get='volume' 
								 data-set='volume'
								 data-step="5"
								 data-icon-left="fa-volume-down"
								 data-icon-right="fa-volume-up"
								 class="spinner value horizontal centered inline">
							</div>
                        </div>
    </div>
  </div>
		
    </li>
    
    </ul>
    </div>
  </div>
</body>
</html>

Über Fragen / Anregungen / Verbesserungsvorschläge würde ich mich freueun.

Knallkopp_02 · 27 Juni 2019, 14:00:02

Im großen und Ganzen könntest du damit das Webradio erstellen, das läuft bei mir sowei ganz gut.

https://wiki.fhem.de/wiki/FTUI_Beispiel_Webradio

das mit dem aktuell ausgestrahlten könnte evtl damit gehen, habe ich noch nicht getestet

https://wiki.fhem.de/wiki/HTTPMOD

Gruß Knallkopp_02

dirk.k · 27 Juni 2019, 14:20:27

Die von Knallkopp_02 erwähnte Lösung ist natürlich echt smart, weil keine extra Hardware verwendet wird.
Damit wird der Stream direkt im Browser abgespielt.
Leider taugt das nicht, um mein Röhrenradio zu speisen.
Ich habe das aber auch mit eingebaut, um den von MPD erzeugten HTTP-Stream abzuholen und am Tablett abzuspielen.

misux · 29 Juni 2019, 18:13:39

Boah! Klasse! Werde beides mal antesten! Ansonsten ist es genau das was ich brauche!

Vielen Dank!

Wzut · 29 Juni 2019, 18:38:37

Zitat von: dirk.k am 27 Juni 2019, 09:11:14
Mit Playlist Modulen/Widgets hatte ich keinen Erfolg, da der MPD nicht auf FHEM läuft und ich FHEM2FHEM noch nicht probiert habe.

Dem FHEM Modul MPD ist es egal wo der MPD Server läuft ! Einfach dessen IP beim define angeben , FHEM2FHEM ist nicht nötig

meikelS · 29 Juni 2019, 22:34:20

Ich hab das ganz pragmatisch und ohne Schnickschnack für mich geregelt, da ich fast immer die selben Sender höre.
Harmony.fm bietet einen Live-Stream an. Von dem hab ich mir due URL beschafft.
Das konnte ich direkt so als "Button" in meine FTUI einbinden.

Code Auswählen


   <div class="inline">
      <div data-type="playstream" data-url="http://mp3.harmonyfm.de/harmonyfm/hqlivestream.mp3"><>
      <div data-type="label" class="cell">Harmony FM<>
   <>

Edit: Komisch, schließende div werden rausgefiltert.

dirk.k · 30 Juni 2019, 19:15:29

"Dem FHEM Modul MPD ist es egal wo der MPD Server läuft ! Einfach dessen IP beim define angeben , FHEM2FHEM ist nicht nötig"

ja klar, aber mein Problem ist ja nicht MPD sondern die PlayList Module, welche zum Durchsuchen der USB Speicher nötig sind...
Diese suchen scheinbar im Dateisystem des FHEM Systems und nicht auf meinem MPD-raspi

misux · 02 Juli 2019, 20:44:37

Zitat von: Knallkopp_02 am 27 Juni 2019, 14:00:02
Im großen und Ganzen könntest du damit das Webradio erstellen, das läuft bei mir sowei ganz gut.

https://wiki.fhem.de/wiki/FTUI_Beispiel_Webradio

Gruß Knallkopp_02

Also das gefällt mir dann doch am besten weil es am einfachsten ist.

ABER, wie kann ich denn die ausgabe am internen Raspberry Lautsprecherausgang oder an einer USB Soundkarte starten und NICHT am Tablet...?

dirk.k · 06 Juli 2019, 14:34:50

Genau das war mein Problem.
Daher raspi mit MPD.