| commit | author | age | ||
| 623a61 | 1 | # radio-ui |
| U | 2 | |
| 3 | Eine Bedienoberfläche für Webradio | |
| 851c9c | 4 | |
| 70e1ff | 5 | ## Prototyp |
| U | 6 | |
| ec55bf | 7 | 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). |
| 851c9c | 8 | |
| ad1fef | 9 | ## Vorgesehene Funktionen |
| U | 10 | |
| fd8a6a | 11 | 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. |
| ad1fef | 12 | |
| U | 13 | Radiosender können hinzugefügt, geändert und gelöscht werden. Ein Suchfeld ermöglicht das Einschränken der Übersicht auf bestimmte Sender. |
| 14 | ||
| fd8a6a | 15 | 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). |
| ad1fef | 16 | |
| 8d53d7 | 17 | ## Beispielcharakter |
| U | 18 | |
| 19 | Neben dem praktischen Nutzen veranschaulicht das radio-ui verschiedene Aspekte des Baus von Webanwendungen: | |
| 20 | ||
| 96834e | 21 | + app-layout |
| 8d53d7 | 22 | + Vorlagen |
| 96834e | 23 | + app-menu |
| 8d53d7 | 24 | + CRUD-Muster (Create, Read, Update, Delete) |
| U | 25 | |
| c14b75 | 26 | 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. |
| 8d53d7 | 27 | |
| 36646e | 28 | ## Abhängigkeiten |
| f927ec | 29 | |
| 36646e | 30 | Zur Verwendung des radio-ui sind die folgenden Komponenten erforderlich |
| f927ec | 31 | |
| 36646e | 32 | + [jQuery](http://jquery.com/) |
| U | 33 | + [Mustache](https://github.com/janl/mustache.js) |
| 34 | + [app-menu](/gitblit/docs/web!app-menu.git) | |
| f927ec | 35 | |
| 36646e | 36 | Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden. |
| f927ec | 37 | |
| 36646e | 38 | ```` |
| U | 39 | <link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css"> |
| 40 | <script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script> | |
| 41 | <script src="../jslib/mustache/mustache.min.js"></script> | |
| 42 | <script src="../jslib/app-menu/app-menu.js"></script> | |
| 43 | ```` | |
| 851c9c | 44 | |
| 899220 | 45 | 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. |
| 851c9c | 46 | |
| 08bce7 | 47 | ## Zusammenspiel mit dem Raspberry Pi |
| fe1cb2 | 48 | |
| 08bce7 | 49 | 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. |
| fe1cb2 | 50 | |
| 003880 | 51 | 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. |
| 576085 | 52 | |
| fd8a6a | 53 | ## Noch zu erledigen |
| U | 54 | |
| 55 | ### Templates für Mustache dynamisch laden | |
| 56 | ||
| 57 | 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 | |
| 58 | ||
| 59 | 1. prüft, ob das Template schon im cache ist | |
| 60 | 1. Lädt das Template, wenn nicht | |
| 61 | 1. wartet, bis das Template geladen ist | |
| 62 | 1. rendert das Template mit dem übergebenen Inhalt | |
| 63 | 1. schreibt das Ergebnis ins html des übergebenen Elements | |
| 64 | ||
| 65 | Der letzte Teil des Ablaufs muss asynchron gefasst sein, damit auf das Laden gewartet werden kann. | |
| 66 | ||
| 576085 | 67 | ## Schnittstellenbeschreibung |
| U | 68 | |
| 6a62bd | 69 | 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. |
| 576085 | 70 | |
| 6a62bd | 71 | ### Sender |
| U | 72 | |
| 73 | #### Senderliste lesen | |
| 576085 | 74 | |
| U | 75 | Aufruf |
| 068ce7 | 76 | |
| 576085 | 77 | ```` |
| U | 78 | data/sender.json |
| 79 | ```` | |
| 80 | ||
| 81 | Antwort | |
| 068ce7 | 82 | |
| 576085 | 83 | ```` |
| U | 84 | { |
| 85 | "senderliste": { | |
| 86 | "titel": "Senderliste", | |
| 87 | "inhalt": [ | |
| 88 | { | |
| 89 | "senderid": 1, | |
| 90 | "sendername": "hr info", | |
| 91 | "senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3", | |
| 92 | "senderlogo": "../bilder/hr-info.png" | |
| 93 | }, | |
| 94 | { | |
| 95 | "senderid": 2, | |
| 96 | "sendername": "radiobob", | |
| 97 | "senderurl": "http://bob.hoerradar.de/radiobob-live-mp3-hq", | |
| 98 | "senderlogo": "../bilder/radio-bob-logo-80.png" | |
| 99 | }, | |
| 100 | usw. | |
| 101 | ] | |
| 102 | } | |
| 103 | } | |
| 104 | ```` | |
| 105 | ||
| 6a62bd | 106 | #### Neuen Sender speichern |
| 576085 | 107 | |
| U | 108 | Noch nicht realisiert. |
| 109 | ||
| 6a62bd | 110 | #### Änderungen an einem Sender speichern |
| 576085 | 111 | |
| U | 112 | Noch nicht realisiert. |
| 113 | ||
| 6a62bd | 114 | #### Sender löschen |
| U | 115 | |
| 116 | Noch nicht realisiert. | |
| 117 | ||
| 118 | ### Abspieler | |
| 119 | ||
| 120 | #### Abspielerliste lesen | |
| 121 | ||
| 122 | Aufruf | |
| 123 | ||
| 124 | ```` | |
| 125 | data/abspieler.json | |
| 126 | ```` | |
| 127 | ||
| 128 | Antwort | |
| 129 | ||
| 130 | ```` | |
| 131 | { | |
| 132 | "abspielerliste": { | |
| 133 | "titel": "Abspielerliste", | |
| 134 | "inhalt": [ | |
| 135 | { | |
| 136 | "abspielerid": 1, | |
| 137 | "abspielername": "dieses Gerät", | |
| 138 | "abspielerurl": "", | |
| 139 | "abspielertyp":"lokal", | |
| 140 | "abspielerbild": "", | |
| 141 | "abspielerzustand":"" | |
| 142 | }, | |
| 143 | { | |
| 144 | "abspielerid": 2, | |
| 145 | "abspielername": "Raspberry Pi Wohnzimmer", | |
| 146 | "abspielerurl": "", | |
| 147 | "abspielertyp":"pirc", | |
| 148 | "abspielerbild": "", | |
| 149 | "abspielerzustand":"selected" | |
| 150 | }, | |
| 151 | usw. | |
| 152 | ] | |
| 153 | } | |
| 154 | } | |
| 155 | ```` | |
| 156 | ||
| 157 | #### Neuen Abspieler speichern | |
| 158 | ||
| 159 | Noch nicht realisiert. | |
| 160 | ||
| 161 | #### Änderungen an einem Abspieler speichern | |
| 162 | ||
| 163 | Noch nicht realisiert. | |
| 164 | ||
| 165 | #### Abspieler löschen | |
| 576085 | 166 | |
| U | 167 | Noch nicht realisiert. |
