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

			@@ -37,7 +37,7 @@

			Inhalte, die über den Raum auf dem Bildschirm hinausgehen, setzen sich jenseits des unteren Bildrands fort und werden durch Rollen nach unten sichtbar. Dabei verschwinden am oberen Bildrand untergebrachte Kontrollelemente mit den dort befindlichen Inhalten.

			Eine Webseite kann viele dynamische Funktionen enthalten und in diesem Punkt einer Webanwendung gleichen. Charakteristisch für Webseiten ist die Darstellung von Inhalten.
			Eine Webseite kann viele dynamische Funktionen enthalten und in diesem Punkt einer Webanwendung gleichen. Charakteristisch für Webseiten ist aber die Darstellung von Inhalten und nicht so sehr die Ausführung von Funktionen.

			#### Webanwendungen

			@@ -61,13 +61,15 @@

			### app-menu

			Das [app-menu](/gitblit/docs/web!app-menu.git) setzt auf die Nutzung von Vorlagen auf und fügt dem radio-ui ein Menü zur Bedienung der Anwendung hinzu. Das radio-ui zeigt so den Einsatz des app-menu am praktischen Beispiel.
			Das [app-menu](/gitblit/docs/web!app-menu.git) setzt auf die Nutzung von Vorlagen auf und fügt dem radio-ui ein Menü zur Bedienung der Anwendung hinzu. Es ist zudem eingebettet in die Funktion des app-layout. Das radio-ui zeigt so den Einsatz des app-menu und mithin das Zusammenspiel von Vorlagen, app-layout und Menü am praktischen Beispiel.

			### CRUD-Muster

			CRUD (Create, Read, Update, Delete) ist ein häufig vorkommendes Nutzungsmuster von Anwendungen, Daten werden erzeugt, gelesen, bearbeitet und gelöscht. Bei Webanwendungen zerfällt es in einen Teil, der auf dem Server ausgeführt wird und einen, der im Browser abläuft (Bedienoberfläche).

			Allein bezogen auf den Umgang mit den Daten auf der Serverseite ist das CRUD-Muster schnell umgesetzt. Eine Datenstruktur wird erzeugt, gelesen, gespeichert und gelöscht. Eine Bedienoberfläche zur Ausführung dieser Operationen erfordert allerdings mehr als nur den Anstoß der jeweiligen Operation. Beim radio-ui wird beispielsweise mit den Daten der Radiosender auf diese Weise umgegangen. Die folgende Tabelle veranschaulicht die benötigten Funktionen.
			Allein bezogen auf den Umgang mit den Daten auf der Serverseite ist das CRUD-Muster schnell umgesetzt. Eine Datenstruktur wird erzeugt, gelesen, gespeichert und gelöscht. Eine Bedienoberfläche zur Ausführung dieser Operationen erfordert allerdings mehr als nur den Anstoß der jeweiligen Operation.

			Beim radio-ui wird beispielsweise mit den Daten der Radiosender auf diese Weise umgegangen. Die folgende Tabelle veranschaulicht die benötigten Funktionen.

			\| Operation \| Bedienoberfläche (radio-ui) \| Server \|
			\| ------------- \|-------------\| -----\|
			@@ -91,7 +93,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>
			@@ -124,7 +125,7 @@
			Ist die Fernbedienung pirc auf einem Raspberry Pi installiert, lautet das Kommando zum Abspielen des Webradiosenders radiobob (vgl. Senderliste weiter unten) wie folgt

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

			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.
			@@ -175,3 +176,119 @@
			128kbps http://mp3.ffh.de/radioffh/hqlivestream.mp3

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

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