From 9643e595e0e72eca74738ec2aa4e2370e1c7bc22 Mon Sep 17 00:00:00 2001 From: ulrich <not disclosed> Date: Sat, 27 Jan 2018 09:44:22 +0000 Subject: [PATCH] .. --- README.md | 164 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 143 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 2ee0ab0..190f3ed 100644 --- a/README.md +++ b/README.md @@ -4,42 +4,164 @@ ## 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). -## Radiostreams +## Vorgesehene Funktionen -Nachfolgend die Adressen einiger 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. -### hr3 +Radiosender können hinzugefügt, geändert und gelöscht werden. Ein Suchfeld ermöglicht das Einschränken der Übersicht auf bestimmte Sender. -[Livestream-Übersicht](http://www.hr3.de/service/hr3-online-hoeren,webradio-100.html) +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). -128 kbit http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3 +## Beispielcharakter -48 kbit http://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/48/stream.mp3 +Neben dem praktischen Nutzen veranschaulicht das radio-ui verschiedene Aspekte des Baus von Webanwendungen: -### hr info ++ app-layout ++ Vorlagen ++ app-menu ++ CRUD-Muster (Create, Read, Update, Delete) -[Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html) +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. -128 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3 +## Abhängigkeiten -48 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/48/stream.mp3 +Zur Verwendung des radio-ui sind 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://bob.hoerradar.de/radiobob-live-mp3-hq +```` +<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://bob.hoerradar.de/aac-radiobob +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. -### FFH +## Zusammenspiel mit dem Raspberry Pi -[Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html) +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. -128kbps http://mp3.ffh.de/radioffh/hqlivestream.mp3 +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. -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. -- Gitblit v1.9.3