| | |
|---|
| | | |
|---|
| | | Eine Bedienoberfläche für Webradio |
|---|
| | | |
|---|
| | | ## Prototyp |
|---|
| | | ## Funktionen |
|---|
| | | |
|---|
| | | 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). |
|---|
| | | 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. |
|---|
| | | |
|---|
| | | ## Radiostreams |
|---|
| | | Radiosender können hinzugefügt, geändert und gelöscht werden. Ein Suchfeld ermöglicht das Einschränken der Übersicht auf bestimmte Sender. |
|---|
| | | |
|---|
| | | Nachfolgend die Adressen einiger Radiostreams |
|---|
| | | 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). |
|---|
| | | |
|---|
| | | ### hr3 |
|---|
| | | ## Protoyp, Demo |
|---|
| | | |
|---|
| | | [Livestream-Übersicht](http://www.hr3.de/service/hr3-online-hoeren,webradio-100.html) |
|---|
| | | Das radio-ui als einzelne Webanwendung hat prototypischen Charakter, es kann für allerlei Webradio-Anwendungen die wiederverwendbare Grundlage bilden. |
|---|
| | | |
|---|
| | | 128 kbit http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3 |
|---|
| | | 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. |
|---|
| | | |
|---|
| | | 48 kbit http://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/48/stream.mp3 |
|---|
| | | Der aktuelle Stand des Codes in diesem Repository kann hier ausprobiert werden: [Link zur Demo](/data/ulrich/test/radio-ui). |
|---|
| | | |
|---|
| | | ### hr info |
|---|
| | | 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. |
|---|
| | | |
|---|
| | | [Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html) |
|---|
| | | ## Abhängigkeiten |
|---|
| | | |
|---|
| | | 128 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3 |
|---|
| | | Neben dem Code in diesem Repository sind zur Nutzung des radio-ui die folgenden Komponenten erforderlich |
|---|
| | | |
|---|
| | | 48 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/48/stream.mp3 |
|---|
| | | + [jQuery](http://jquery.com/) |
|---|
| | | + [Mustache](https://github.com/janl/mustache.js) |
|---|
| | | + [app-menu](/gitblit/docs/web!app-menu.git) |
|---|
| | | |
|---|
| | | ### radiobob |
|---|
| | | Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden. |
|---|
| | | |
|---|
| | | [Livestream-Übersicht](http://www.radiobob.de/radiobob/empfang/livestream) |
|---|
| | | ```` |
|---|
| | | <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> |
|---|
| | | ```` |
|---|
| | | |
|---|
| | | MP3: http://bob.hoerradar.de/radiobob-live-mp3-hq |
|---|
| | | Sollen einzelne Komponenten von einem anderen Ort, beispielsweise aus einem Content Delivery Network (CDN) eingebunden werden, müssen diese Einträge angepasst werden. |
|---|
| | | |
|---|
| | | Mobile Nutzung: http://bob.hoerradar.de/aac-radiobob |
|---|
| | | ### Zeichensätze |
|---|
| | | |
|---|
| | | ### FFH |
|---|
| | | 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: |
|---|
| | | |
|---|
| | | [Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html) |
|---|
| | | ```` |
|---|
| | | /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 http://mp3.ffh.de/radioffh/hqlivestream.mp3 |
|---|
| | | ### Bilder |
|---|
| | | |
|---|
| | | 48kbps http://mp3.ffh.de/radioffh/livestream.aac |
|---|
| | | 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. |
|---|
| | | |
|---|
| | | ## Installation |
|---|
| | | |
|---|
| | | Zur Verwendung des radio-ui muss dessen Code mit den Komponenen kombiniert werden, die vom radio-ui benötigt werden. |
|---|
| | | |
|---|
| | | 1. Code aus diesem Repository herunterladen |
|---|
| | | 1. Die unter Abhängigkeiten oben angegebenen Komponenten herunterladen |
|---|
| | | 1. Aus den heruntergeladenen Teilen eine Ordnerstruktur bilden |
|---|
| | | |
|---|
| | | ```` |
|---|
| | | 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 |
|---|
| | | ```` |
|---|
| | | |
|---|
| | | 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. |
|---|
