| | |
| | | |
| | | ### app-layout |
| | | |
| | | Das radio-ui verwendet das [app-layout](/gitblit/docs/web!app-layout.git), das mit Hilfe von HTML und CSS die Grundlage einer für Webanwendungen geeigneten Bedienoberfläche schafft. Der nachfolgende Vergleich von Webseiten mit Webanwendungen will das verdeutlichen. |
| | | |
| | | #### Webseiten |
| | | |
| | | Charakteristisch für eine Webseite ist ihr Seitencharakter, bei dem der Webbrowser Inhalte von links nach rechts und von oben nach unten darstellt. |
| | | |
| | | 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 aber die Darstellung von Inhalten und nicht so sehr die Ausführung von Funktionen. |
| | | |
| | | #### Webanwendungen |
| | | |
| | | Charakteristisch für Webanwendungen ist der Schwerpunkt auf Funktionen und ihre Bedienung. Eine Webanwendung nutzt die Mittel von HTML, CSS und Javascript u.a. zur Herstellung einer Bedienoberfläche. |
| | | |
| | | Die Bedienelemente der Anwendung bleiben stets erreichbar, auch, wenn Inhalte den verfügbaren Raum auf dem Bildschirm überschreiten. Bereiche zur Darstellung von Inhalten und deren Bearbeitung sind gemischt mit Kontroll- und Bedienelementen. Die Anordnung dieser Elemente folgt im Verlauf der Nutzung individuell den Erfordernissen des jeweiligen Anwendungsfalls. |
| | | |
| | | Das Layout der Bedienoberfläche bleibt insgesamt stets gleich, zu keiner Zeit führt ein Wechsel von Teilen des Bildschirminhalts zu einer Veränderung des Layouts oder zum vollständigen Verschwinden von Bedien- und Kontrollelementen. |
| | | |
| | | Die Webanwendung ist auf verschiedenen Geräten verwendbar und funktioniert mit unterschiedlichen Bildschirmen (Größe, Auflösung) und Eingabegeräten (Maus, Tastatur, berührungsempfindlicher Bildschirm) gleichartig. |
| | | |
| | | Die hier beschriebenen Eigenschaften einer Webanwendung werden mit dem Einsatz des app-layout hergestellt. |
| | | Das radio-ui verwendet das [app-layout](/gitblit/docs/web!app-layout.git), das mit Hilfe von HTML und CSS die Grundlage einer für Webanwendungen geeigneten Bedienoberfläche schafft. |
| | | |
| | | ### Nutzung von Vorlagen |
| | | |
| | | 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. |
| | | 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. |
| | | |
| | | Inhalte werden dabei mit Hilfe von [Mustache](https://github.com/janl/mustache.js) aus einer Vorlage und einer Inhaltsbeschreibung in [JSON](https://de.wikipedia.org/wiki/JavaScript_Object_Notation) zu [HTML](https://de.wikipedia.org/wiki/Hypertext_Markup_Language) zusammengesetzt. |
| | | |
| | |
| | | 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> |
| | |
| | | |
| | | ## Kombination von pirc und radio-ui |
| | | |
| | | Zur Verwendung des radio-ui mit pirc kann die Anwendung radio-ui direkt auf einen Raspberry Pi installiert werden, beispielsweise ähnlich wie pirc als Webanwendung für Tomcat. Stattdessen kann radio-ui auch von einer anderen Maschine aus die pirc-Instanz auf einen Raspberry Pi aufrufen. |
| | | |
| | | Auch eine direkte Steuerung des omxplay aus radio-ui heraus ist denkbar. Das wäre allerdings eine Doppelung der meisten der in pirc bereits enthaltenen Funktionen. Zudem würde die engere Koppelung zwischen Pi und radio-ui die Verwendbarkeit des radio-ui einschränken. |
| | | Zur Verwendung des radio-ui mit [pirc](/gitblit/docs/pirc.git) kann die Anwendung radio-ui direkt auf einen Raspberry Pi installiert werden, beispielsweise ähnlich wie pirc als Webanwendung für Tomcat. Stattdessen kann radio-ui auch von einer anderen Maschine aus die pirc-Instanz auf einen Raspberry Pi aufrufen. |
| | | |
| | | ### Abspielen auf dem Raspberry Pi |
| | | |
| | | Kommandos an pirc werden via HTTP an die betreffende Maschine gesendet und bestehen aus einem Klassennamen `c`, einem Methodennamen `m` und einem Parameter `p`. Ein Kommando setzt sich wie folgt zusammen |
| | | Kommandos an [pirc](/gitblit/docs/pirc.git) werden via HTTP an die betreffende Maschine gesendet und bestehen aus einem Klassennamen `c`, einem Methodennamen `m` und einem Parameter `p`. Ein Kommando setzt sich wie folgt zusammen |
| | | |
| | | 1. `http://raspi:8080/` - URL der Maschine |
| | | 1. `pirc/` - Name des Kontext, unter dem die Anwendung pirc läuft |
| | |
| | | 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. |
| | |
| | | |
| | | Mobile Nutzung: http://bob.hoerradar.de/aac-radiobob |
| | | |
| | | #### Test der Bandbreite |
| | | |
| | | Spielt man den URL 'hq' von Radiobob im Browser zeigt der Netzwerkmonitor von Linux eine Netznutzung von 24-32 kbit/s. Das ergibt die folgende Betrachtung: |
| | | |
| | | + 32 kBit/s |
| | | + 115.20.000 Bit/Std (kBit x 3600 x 1000) |
| | | + 13,74 MB pro Stunde (Bit : 8 : 1.024 : 1.024) |
| | | |
| | | ### FFH |
| | | |
| | | [Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html) |
| | |
| | | |
| | | ## Schnittstellenbeschreibung |
| | | |
| | | Die folgenden Funktionen sind Mocks für eine noch zu erstellende Schnittstelle. |
| | | 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. |
| | | |
| | | ### Senderliste lesen |
| | | ### Sender |
| | | |
| | | #### Senderliste lesen |
| | | |
| | | Aufruf |
| | | |
| | | ```` |
| | | data/sender.json |
| | | ```` |
| | | |
| | | Antwort |
| | | |
| | | ```` |
| | | { |
| | | "senderliste": { |
| | |
| | | } |
| | | ```` |
| | | |
| | | ### Neuen Sender speichern |
| | | #### Neuen Sender speichern |
| | | |
| | | Noch nicht realisiert. |
| | | |
| | | ### Änderungen an einem Sender speichern |
| | | #### Änderungen an einem Sender speichern |
| | | |
| | | Noch nicht realisiert. |
| | | |
| | | ### Sender löschen |
| | | #### 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. |