| commit | author | age | ||
| 623a61 | 1 | # radio-ui |
| U | 2 | |
| 3 | Eine Bedienoberfläche für Webradio | |
| 851c9c | 4 | |
| 175e83 | 5 | ## Funktionen |
| ad1fef | 6 | |
| fd8a6a | 7 | 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 | 8 | |
| U | 9 | Radiosender können hinzugefügt, geändert und gelöscht werden. Ein Suchfeld ermöglicht das Einschränken der Übersicht auf bestimmte Sender. |
| 10 | ||
| fd8a6a | 11 | 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 | 12 | |
| 175e83 | 13 | ## Protoyp, Demo |
| 8d53d7 | 14 | |
| 175e83 | 15 | Das radio-ui als einzelne Webanwendung hat prototypischen Charakter, es kann für allerlei Webradio-Anwendungen die wiederverwendbare Grundlage bilden. |
| 8d53d7 | 16 | |
| ad26f7 | 17 | 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. |
| 8d53d7 | 18 | |
| 175e83 | 19 | Der aktuelle Stand des Codes in diesem Repository kann hier ausprobiert werden: [Link zur Demo](/data/ulrich/test/radio-ui). |
| U | 20 | |
| 21 | 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. | |
| 8d53d7 | 22 | |
| 36646e | 23 | ## Abhängigkeiten |
| f927ec | 24 | |
| 175e83 | 25 | Neben dem Code in diesem Repository sind zur Nutzung des radio-ui die folgenden Komponenten erforderlich |
| f927ec | 26 | |
| 36646e | 27 | + [jQuery](http://jquery.com/) |
| U | 28 | + [Mustache](https://github.com/janl/mustache.js) |
| 29 | + [app-menu](/gitblit/docs/web!app-menu.git) | |
| f927ec | 30 | |
| 36646e | 31 | Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden. |
| f927ec | 32 | |
| 36646e | 33 | ```` |
| U | 34 | <link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css"> |
| 35 | <script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script> | |
| 36 | <script src="../jslib/mustache/mustache.min.js"></script> | |
| 37 | <script src="../jslib/app-menu/app-menu.js"></script> | |
| 38 | ```` | |
| 851c9c | 39 | |
| e1c0e5 | 40 | Sollen einzelne Komponenten von einem anderen Ort, beispielsweise aus einem Content Delivery Network (CDN) eingebunden werden, müssen diese Einträge angepasst werden. |
| 851c9c | 41 | |
| 8c479f | 42 | ### Zeichensätze |
| U | 43 | |
| 44 | 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: | |
| 45 | ||
| 46 | ```` | |
| 47 | /lib/fonts/Amethysta/Amethysta-Regular.ttf | |
| 48 | /lib/fonts/Oswald/Oswald-Regular.ttf | |
| 49 | /lib/fonts/Oswald/Oswald-Bold.ttf | |
| 50 | /lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf | |
| 51 | /lib/fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf | |
| 52 | ```` | |
| 53 | ||
| 54 | ### Bilder | |
| 55 | ||
| 56 | 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. | |
| 57 | ||
| 175e83 | 58 | ## Installation |
| fe1cb2 | 59 | |
| 175e83 | 60 | Zur Verwendung des radio-ui muss dessen Code mit den Komponenen kombiniert werden, die vom radio-ui benötigt werden. |
| fe1cb2 | 61 | |
| 175e83 | 62 | 1. Code aus diesem Repository herunterladen |
| e1c0e5 | 63 | 1. Die unter Abhängigkeiten oben angegebenen Komponenten herunterladen |
| 175e83 | 64 | 1. Aus den heruntergeladenen Teilen eine Ordnerstruktur bilden |
| U | 65 | |
| 66 | ```` | |
| 67 | radio-ui/ | |
| 68 | hier der Inhalt aus diesem Repository | |
| 69 | jslib/ | |
| 70 | jquery-1.11.1/ | |
| 71 | jquery-1.11.1.min.js | |
| 72 | mustache/ | |
| 73 | mustache.min.js | |
| 74 | app-menu/ | |
| 75 | hier der Inhalt aus dem app-menu-Repository | |
| 8c479f | 76 | lib/ |
| U | 77 | fonts/ |
| 78 | Amethysta/ | |
| 79 | Amethysta-Regular.ttf | |
| 80 | Oswald/ | |
| 81 | Oswald-Regular.ttf | |
| 82 | Oswald-Bold.ttf | |
| 83 | Roboto_Condensed/ | |
| 84 | RobotoCondensed-Regular.ttf | |
| 85 | RobotoCondensed-Bold-ttf | |
| 86 | bilder/ | |
| 87 | hier Bilder nach Wahl | |
| 175e83 | 88 | ```` |
| U | 89 | |
| c2f17b | 90 | 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. |
| 576085 | 91 | |
| fd8a6a | 92 | ## Noch zu erledigen |
| U | 93 | |
| 94 | ### Templates für Mustache dynamisch laden | |
| 95 | ||
| 96 | 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 | |
| 97 | ||
| 98 | 1. prüft, ob das Template schon im cache ist | |
| 99 | 1. Lädt das Template, wenn nicht | |
| 100 | 1. wartet, bis das Template geladen ist | |
| 101 | 1. rendert das Template mit dem übergebenen Inhalt | |
| 102 | 1. schreibt das Ergebnis ins html des übergebenen Elements | |
| 103 | ||
| 104 | Der letzte Teil des Ablaufs muss asynchron gefasst sein, damit auf das Laden gewartet werden kann. | |
| 105 | ||
| 576085 | 106 | ## Schnittstellenbeschreibung |
| U | 107 | |
| 6a62bd | 108 | 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 | 109 | |
| 6a62bd | 110 | ### Sender |
| U | 111 | |
| 112 | #### Senderliste lesen | |
| 576085 | 113 | |
| U | 114 | Aufruf |
| 068ce7 | 115 | |
| 576085 | 116 | ```` |
| U | 117 | data/sender.json |
| 118 | ```` | |
| 119 | ||
| 120 | Antwort | |
| 068ce7 | 121 | |
| 576085 | 122 | ```` |
| U | 123 | { |
| 124 | "senderliste": { | |
| 125 | "titel": "Senderliste", | |
| 126 | "inhalt": [ | |
| 127 | { | |
| 128 | "senderid": 1, | |
| 129 | "sendername": "hr info", | |
| 130 | "senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3", | |
| 131 | "senderlogo": "../bilder/hr-info.png" | |
| 132 | }, | |
| 133 | { | |
| 134 | "senderid": 2, | |
| 135 | "sendername": "radiobob", | |
| 136 | "senderurl": "http://bob.hoerradar.de/radiobob-live-mp3-hq", | |
| 137 | "senderlogo": "../bilder/radio-bob-logo-80.png" | |
| 138 | }, | |
| 139 | usw. | |
| 140 | ] | |
| 141 | } | |
| 142 | } | |
| 143 | ```` | |
| 144 | ||
| 6a62bd | 145 | #### Neuen Sender speichern |
| 576085 | 146 | |
| U | 147 | Noch nicht realisiert. |
| 148 | ||
| 6a62bd | 149 | #### Änderungen an einem Sender speichern |
| 576085 | 150 | |
| U | 151 | Noch nicht realisiert. |
| 152 | ||
| 6a62bd | 153 | #### Sender löschen |
| U | 154 | |
| 155 | Noch nicht realisiert. | |
| 156 | ||
| 157 | ### Abspieler | |
| 158 | ||
| 159 | #### Abspielerliste lesen | |
| 160 | ||
| 161 | Aufruf | |
| 162 | ||
| 163 | ```` | |
| 164 | data/abspieler.json | |
| 165 | ```` | |
| 166 | ||
| 167 | Antwort | |
| 168 | ||
| 169 | ```` | |
| 170 | { | |
| 171 | "abspielerliste": { | |
| 172 | "titel": "Abspielerliste", | |
| 173 | "inhalt": [ | |
| 174 | { | |
| 175 | "abspielerid": 1, | |
| 176 | "abspielername": "dieses Gerät", | |
| 177 | "abspielerurl": "", | |
| 178 | "abspielertyp":"lokal", | |
| 179 | "abspielerbild": "", | |
| 180 | "abspielerzustand":"" | |
| 181 | }, | |
| 182 | { | |
| 183 | "abspielerid": 2, | |
| 184 | "abspielername": "Raspberry Pi Wohnzimmer", | |
| 185 | "abspielerurl": "", | |
| 186 | "abspielertyp":"pirc", | |
| 187 | "abspielerbild": "", | |
| 188 | "abspielerzustand":"selected" | |
| 189 | }, | |
| 190 | usw. | |
| 191 | ] | |
| 192 | } | |
| 193 | } | |
| 194 | ```` | |
| 195 | ||
| 196 | #### Neuen Abspieler speichern | |
| 197 | ||
| 198 | Noch nicht realisiert. | |
| 199 | ||
| 200 | #### Änderungen an einem Abspieler speichern | |
| 201 | ||
| 202 | Noch nicht realisiert. | |
| 203 | ||
| 204 | #### Abspieler löschen | |
| 576085 | 205 | |
| U | 206 | Noch nicht realisiert. |
