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

			@@ -2,52 +2,205 @@

			Eine Bedienoberfläche für Webradio

			## Funktionen

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

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

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

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

			MP3-Stream (128 kbit): http://metafiles.gl-systemhaus.de/hr/hr3_2.m3u
			Das radio-ui als einzelne Webanwendung hat prototypischen Charakter, es kann für allerlei Webradio-Anwendungen die wiederverwendbare Grundlage bilden.

			MP3-Stream (48 kbit): http://metafiles.gl-systemhaus.de/hr/hr3_1.m3u
			Als reinem Client-Teil solcher Anwendungen fehlt dem radio-ui ein zentraler Anwendungskern mit Funktionen zum Speichern individueller Einstellungen an einem zentralen Ort. Die Trennung von Client und Server ist bewußt so gewählt, um einen gleichartigen Client-Teil für verschiedene Implementierungen auf der Serverseite zu ermöglichen.

			### hr info
			Der aktuelle Stand des Codes in diesem Repository kann hier ausprobiert werden: [Link zur Demo](/data/ulrich/test/radio-ui).

			[Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html)
			Code und Demo des radio-ui [veranschaulichen](/gitblit/doc/web!radio-ui.git/master/beispiel.md) zusätzlich zum praktischen Nutzen als Webradiofernbedienung verschiedene Aspekte des Baus von Webanwendungen.

			MP3-Stream (128 kBit/s)
			http://metafiles.gl-systemhaus.de/hr/hrinfo_2.m3u
			## Abhängigkeiten

			MP3-Stream (48 kBit/s)
			http://metafiles.gl-systemhaus.de/hr/hrinfo_1.m3u
			(für mobile Anwendungen empfohlen)
			Neben dem Code in diesem Repository sind zur Nutzung des radio-ui die folgenden Komponenten erforderlich

			### radiobob
			+ [jQuery](http://jquery.com/)
			+ [Mustache](https://github.com/janl/mustache.js)
			+ [app-menu](/gitblit/docs/web!app-menu.git)

			[Livestream-Übersicht](http://www.radiobob.de/radiobob/empfang/livestream)
			Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden.

			MP3: http://streams.radiobob.de/bob-live/mp3-192/mediaplayer
			````
			<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>
			````

			Mobile Nutzung: http://streams.radiobob.de/bob-live/aac-64/mediaplayer
			Sollen einzelne Komponenten von einem anderen Ort, beispielsweise aus einem Content Delivery Network (CDN) eingebunden werden, müssen diese Einträge angepasst werden.

			### FFH
			### Zeichensätze

			[Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html)
			Neben den obigen Komponenten werden zudem die Zeichensätze `Amethysta`, `Oswald` und `Roboto Condensed` verwendet. Sie können von Google Fonts heruntergeladen werden und sind über das Stylesheet `app.css` von folgenden Orten auf dem Server eingebunden:

			````
			/lib/fonts/Amethysta/Amethysta-Regular.ttf
			/lib/fonts/Oswald/Oswald-Regular.ttf
			/lib/fonts/Oswald/Oswald-Bold.ttf
			/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf
			/lib/fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf
			````

			128kbps
			### Bilder

			http://streams.ffh.de/radioffh/mp3/hqlivestream.m3u
			Zu jedem Sender wird an der Bedienoberfläche des radio-ui ein Piktogramm angezeigt. In der Demo des radio-ui ist hierfür der Ordner `bilder` vorgesehen. Prinzipiell kann aber jeder Ablageort für Bilder verwendet werden. Jedem Sender ist ein URL zu einem Bild über die Datei `sender.json` zugeordnet. Der URL für ein Bild kann zur Laufzeit über die Funktion `Sender ändern` geändert werden.

			http://mp3.ffh.de/radioffh/hqlivestream.mp3
			## Installation

			Zur Verwendung des radio-ui muss dessen Code mit den Komponenen kombiniert werden, die vom radio-ui benötigt werden.

			48kbps
			1. Code aus diesem Repository herunterladen
			1. Die unter Abhängigkeiten oben angegebenen Komponenten herunterladen
			1. Aus den heruntergeladenen Teilen eine Ordnerstruktur bilden

			http://streams.ffh.de/radioffh/aac/livestream.m3u
			````
			radio-ui/
			hier der Inhalt aus diesem Repository
			jslib/
			jquery-1.11.1/
			jquery-1.11.1.min.js
			mustache/
			mustache.min.js
			app-menu/
			hier der Inhalt aus dem app-menu-Repository
			lib/
			fonts/
			Amethysta/
			Amethysta-Regular.ttf
			Oswald/
			Oswald-Regular.ttf
			Oswald-Bold.ttf
			Roboto_Condensed/
			RobotoCondensed-Regular.ttf
			RobotoCondensed-Bold-ttf
			bilder/
			hier Bilder nach Wahl
			````

			http://mp3.ffh.de/radioffh/livestream.aac
			Die obige Ordnerstruktur wird auf einem HTTP-Server wie z.B. [Tomcat](https://de.wikipedia.org/wiki/Apache_Tomcat) oder [lighttpd](https://de.wikipedia.org/wiki/Lighttpd) hinterlegt und kann dann mit einem Browser aufgerufen werden.

			## Noch zu erledigen

			### Templates für Mustache dynamisch laden

			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

			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

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

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

			````
			data/sender.json
			````

			Antwort

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

			#### Neuen Sender speichern

			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.