web/radio-ui.git - Ulrich Hilger Code Repository

			@@ -8,19 +8,22 @@

			## Vorgesehene Funktionen

			Das radio-ui zeigt eine Übersicht von Radiosendern. Antippen eines Senders in der Übersicht spielt den Sender ab.
			Das radio-ui zeigt eine Übersicht von Radiosendern. Antippen eines Senders in der Übersicht spielt den [Livestream](/gitblit/doc/web!radio-ui.git/master/radiostreams.md) des Senders ab.

			Radiosender können hinzugefügt, geändert und gelöscht werden. Ein Suchfeld ermöglicht das Einschränken der Übersicht auf bestimmte Sender.

			Das Abspiel-Ziel ist konfigurierbar: Ein Radionsender kann entweder auf dem Gerät abgespielt werden, auf dem das radio-ui im Browser läuft oder auf einem anderen Gerät wie z.B. einem Raspberry Pi.
			Das Abspiel-Ziel ist konfigurierbar: Ein Radionsender kann entweder auf dem Gerät abgespielt werden, auf dem das radio-ui im Browser läuft oder auf einem anderen Gerät wie z.B. einem [Raspberry Pi](/gitblit/doc/web!radio-ui.git/master/pirc.md).

			Zum Abspielen auf einem Raspberry Pi ist die Nutzung der Anwendung [pirc](/gitblit/docs/pirc.git) vorgesehen, die zum Spielen von Audiostreams den [omxplayer](https://elinux.org/Omxplayer) mit einer unter [Tomcat](https://de.wikipedia.org/wiki/Apache_Tomcat) laufenden Fernbedienung kombiniert, die per HTTP gesteuert werden kann.
			## Beispielcharakter

			## Nutzung von Vorlagen
			Neben dem praktischen Nutzen veranschaulicht das radio-ui verschiedene Aspekte des Baus von Webanwendungen:

			Die Anwendung radio-ui ist ein Beispiel für die Nutzung von Vorlagen in Webanwendungen. Die Datei `index.html` definiert Bereiche einer HTML-Seite als `div`-Elemente, die während der Ausführung des Programmes dynamisch mit wechselnden Inhalten gefüllt werden.
			+ app-layout
			+ Vorlagen
			+ app-menu
			+ CRUD-Muster (Create, Read, Update, Delete)

			Inhalte werden dabei mit Hilfe von [Mustache](https://github.com/janl/mustache.js) aus einer Vorlage und einer Inhaltsbeschreibung in [JSON](https://de.wikipedia.org/wiki/JavaScript_Object_Notation) zu [HTML](https://de.wikipedia.org/wiki/Hypertext_Markup_Language) zusammengesetzt.
			Wie in der Anwendung radio-ui die obigen Themen umgesetzt sind, ist auf der [Beispielseite](/gitblit/doc/web!radio-ui.git/master/beispiel.md) näher betrachtet.

			## Abhängigkeiten

			@@ -33,7 +36,6 @@
			Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden.

			````
			<link rel="stylesheet" type="text/css" href="../jslib/app-menu/nav-toggle.css">
			<link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css">
			<script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script>
			<script src="../jslib/mustache/mustache.min.js"></script>
			@@ -42,78 +44,124 @@

			Sollen einzelne Komponenten von einem anderen Ort wie beispielsweise einem Content Delivery Network (CDN) eingebunden werden, müssen nur die obigen Einträge entsprechend angepasst werden.

			## Kombination von pirc und radio-ui
			## Zusammenspiel mit dem Raspberry Pi

			Zur Verwendung des radio-ui mit pirc kann die Anwendung radio-ui direkt auf einen Raspberry Pi installiert werden, beispielsweise ähnlich wie pirc als Webanwendung für Tomcat. Stattdessen kann radio-ui auch von einer anderen Maschine aus die pirc-Instanz auf einen Raspberry Pi aufrufen.
			Zum Abspielen auf einem Raspberry Pi ist die Nutzung der Anwendung [pirc](/gitblit/docs/pirc.git) vorgesehen, die zum Spielen von Audiostreams den [omxplayer](https://elinux.org/Omxplayer) mit einer unter [Tomcat](https://de.wikipedia.org/wiki/Apache_Tomcat) laufenden Fernbedienung kombiniert, die per HTTP gesteuert werden kann.

			Auch eine direkte Steuerung des omxplay aus radio-ui heraus ist denkbar. Das wäre allerdings eine Doppelung der meisten der in pirc bereits enthaltenen Funktionen. Zudem würde die engere Koppelung zwischen Pi und radio-ui die Verwendbarkeit des radio-ui einschränken.
			Auf der Seite [Kombination von pirc und radio-ui](/gitblit/doc/web!radio-ui.git/master/pirc.md) ist beschrieben, wie pirc aus dem radio-ui heraus genutzt werden kann.

			### Abspielen auf dem Raspberry Pi
			## Noch zu erledigen

			Kommandos an pirc werden via HTTP an die betreffende Maschine gesendet und bestehen aus einem Klassennamen `c`, einem Methodennamen `m` und einem Parameter `p`. Ein Kommando setzt sich wie folgt zusammen
			### Templates für Mustache dynamisch laden

			1. `http://raspi:8080/` - URL der Maschine
			1. `pirc/` - Name des Kontext, unter dem die Anwendung pirc läuft
			1. `sys/rpc` - Service-Endpunkt der pirc-API
			1. `c=de.uhilger.pirc.App` - Name der Klasse von pirc, die die Abspielmethode enthält
			1. `m=abspielen` - Name der Methode zum Abspielen
			1. `p=Sender-URL` - der Parameter mit dem URL zum Audiostream des Webradiosenders
			Spart Ladezeit zu Beginn. Lösungsansatz: Eine Funktion, die als Parameter das Element erhält, dessen html mit dem gerenderten Template ersetzt werden soll und den zu rendernden Inhalt. Die dynamische Ladefunktion

			Zum Aufruf des Kommandos mit dem radio-ui kann es weitgehend unverändert bleiben. Nur der Teil 6. mit dem URL des Senders muss veränderlich gestaltet sein.
			1. prüft, ob das Template schon im cache ist
			1. Lädt das Template, wenn nicht
			1. wartet, bis das Template geladen ist
			1. rendert das Template mit dem übergebenen Inhalt
			1. schreibt das Ergebnis ins html des übergebenen Elements

			#### Beispiel Abspielen
			Der letzte Teil des Ablaufs muss asynchron gefasst sein, damit auf das Laden gewartet werden kann.

			Ist die Fernbedienung pirc auf einem Raspberry Pi installiert, lautet das Kommando zum Abspielen des Webradiosenders radiobob (vgl. Senderliste weiter unten) wie folgt
			## Schnittstellenbeschreibung

			Für den Prototyp des radio-ui können verschiedene Arten des Umgangs mit Sendern und Abspielern hergestellt werden. Die folgenden Angaben zeigen die Punkte auf, an denen eine konkrete Implementierung ansetzen kann.

			### Sender

			#### Senderliste lesen

			Aufruf

			````
			http://raspi:8080/pirc/sys/rpc?c=de.uhilger.pirc.App&m=abspielen&p=http://bob.hoerradar.de/radiobob-live-mp3-hq
			data/sender.json
			````

			Das obige Kommando geht davon aus, dass der betreffende Raspberry Pi unter dem Namen `raspi` auf Port `8080` über `HTTP` erreichbar ist und dass auf dem Pi die Anwendung pirc unter dem Kontextnamen `pirc` installiert wurde. Es bewirkt, dass auf dem betreffenden Raspberry Pi eine Instanz des omxplayer gestartet wird und diese fortlaufend den Webradio-Stream unter der angegebenen Adresse abspielt.

			#### Beispiel Stoppen

			Zum Stoppen des zur Zeit abgespielten Webradios dient das folgende Kommando
			Antwort

			````
			http://raspi:8080/sys/rpc?c=de.uhilger.pirc.App&m=kommando&p=q
			{
			"senderliste": {
			"titel": "Senderliste",
			"inhalt": [
			{
			"senderid": 1,
			"sendername": "hr info",
			"senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3",
			"senderlogo": "../bilder/hr-info.png"
			},
			{
			"senderid": 2,
			"sendername": "radiobob",
			"senderurl": "http://bob.hoerradar.de/radiobob-live-mp3-hq",
			"senderlogo": "../bilder/radio-bob-logo-80.png"
			},
			usw.
			]
			}
			}
			````

			Mit dem obigen Aufruf wird das Kommando `q` an den laufenden Prozess des omxplayer gesendet. Das bewirkt, dass der omxplayer das Abspielen stoppt und der laufende omxplayer-Prozess endet.
			#### Neuen Sender speichern

			Noch nicht realisiert.

			## Radiostreams
			#### Änderungen an einem Sender speichern

			Nachfolgend die Adressen einiger Radiostreams
			Noch nicht realisiert.

			### hr3
			#### Sender löschen

			[Livestream-Übersicht](http://www.hr3.de/service/hr3-online-hoeren,webradio-100.html)
			Noch nicht realisiert.

			128 kbit http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
			### Abspieler

			48 kbit http://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/48/stream.mp3
			#### Abspielerliste lesen

			### hr info
			Aufruf

			[Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html)
			````
			data/abspieler.json
			````

			128 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
			Antwort

			48 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/48/stream.mp3
			````
			{
			"abspielerliste": {
			"titel": "Abspielerliste",
			"inhalt": [
			{
			"abspielerid": 1,
			"abspielername": "dieses Gerät",
			"abspielerurl": "",
			"abspielertyp":"lokal",
			"abspielerbild": "",
			"abspielerzustand":""
			},
			{
			"abspielerid": 2,
			"abspielername": "Raspberry Pi Wohnzimmer",
			"abspielerurl": "",
			"abspielertyp":"pirc",
			"abspielerbild": "",
			"abspielerzustand":"selected"
			},
			usw.
			]
			}
			}
			````

			### radiobob
			#### Neuen Abspieler speichern

			[Livestream-Übersicht](http://www.radiobob.de/radiobob/empfang/livestream)
			Noch nicht realisiert.

			MP3: http://bob.hoerradar.de/radiobob-live-mp3-hq
			#### Änderungen an einem Abspieler speichern

			Mobile Nutzung: http://bob.hoerradar.de/aac-radiobob
			Noch nicht realisiert.

			### FFH
			#### Abspieler löschen

			[Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html)

			128kbps http://mp3.ffh.de/radioffh/hqlivestream.mp3

			48kbps http://mp3.ffh.de/radioffh/livestream.aac
			Noch nicht realisiert.