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

			@@ -4,12 +4,26 @@

			## Prototyp

			Diese Anwendung ist zur Zeit im Bau. Der aktuelle Prototyp zum Stand des Codes in diesem Repository ist hier zu sehen:
			[Link zum Prototyp](/data/ulrich/test/radio-ui).
			Diese Anwendung ist zur Zeit im Bau. Der aktuelle Prototyp zum Stand des Codes in diesem Repository ist hier zu sehen: [Link zum Prototyp](/data/ulrich/test/radio-ui).

			## Nutzung von Vorlagen
			## Vorgesehene Funktionen

			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.
			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](/gitblit/doc/web!radio-ui.git/master/pirc.md).

			## Beispielcharakter

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

			+ app-layout
			+ Vorlagen
			+ app-menu
			+ CRUD-Muster (Create, Read, Update, Delete)

			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

			@@ -22,47 +36,132 @@
			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>
			<script src="../jslib/app-menu/app-menu.js"></script>
			````

			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.
			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.

			## Radiostreams
			## Zusammenspiel mit dem Raspberry Pi

			Nachfolgend die Adressen einiger Radiostreams
			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.

			### hr3
			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.

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

			128 kbit http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
			### Templates für Mustache dynamisch laden

			48 kbit http://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/48/stream.mp3
			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

			### hr info
			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

			[Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html)
			Der letzte Teil des Ablaufs muss asynchron gefasst sein, damit auf das Laden gewartet werden kann.

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

			48 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/48/stream.mp3
			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.

			### radiobob
			### Sender

			[Livestream-Übersicht](http://www.radiobob.de/radiobob/empfang/livestream)
			#### Senderliste lesen

			MP3: http://bob.hoerradar.de/radiobob-live-mp3-hq
			Aufruf

			Mobile Nutzung: http://bob.hoerradar.de/aac-radiobob
			````
			data/sender.json
			````

			### FFH
			Antwort

			[Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html)
			````
			{
			"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.
			]
			}
			}
			````

			128kbps http://mp3.ffh.de/radioffh/hqlivestream.mp3
			#### Neuen Sender speichern

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

			#### Änderungen an einem Sender speichern

			Noch nicht realisiert.

			#### Sender löschen

			Noch nicht realisiert.

			### Abspieler

			#### Abspielerliste lesen

			Aufruf

			````
			data/abspieler.json
			````

			Antwort

			````
			{
			"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.
			]
			}
			}
			````

			#### Neuen Abspieler speichern

			Noch nicht realisiert.

			#### Änderungen an einem Abspieler speichern

			Noch nicht realisiert.

			#### Abspieler löschen

			Noch nicht realisiert.