| | |
|---|
| | | <script src="../jslib/app-menu/app-menu.js"></script> |
|---|
| | | ```` |
|---|
| | | |
|---|
| | | Sollen einzelne Komponenten von einem anderen Ort, beispielsweise aus einem Content Delivery Network (CDN) eingebunden werden, müssen die obigen Einträge entsprechend angepasst werden. |
|---|
| | | Sollen einzelne Komponenten von einem anderen Ort, beispielsweise aus einem Content Delivery Network (CDN) eingebunden werden, müssen diese Einträge angepasst werden. |
|---|
| | | |
|---|
| | | ### Zeichensätze |
|---|
| | | |
|---|
| | | 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: |
|---|
| | | |
|---|
| | | ```` |
|---|
| | | /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 |
|---|
| | | ```` |
|---|
| | | |
|---|
| | | ### Bilder |
|---|
| | | |
|---|
| | | 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. Die unter Abhängigkeiten oben angegebenen Komponenten herunterladen |
|---|
| | | 1. Aus den heruntergeladenen Teilen eine Ordnerstruktur bilden |
|---|
| | | |
|---|
| | | ```` |
|---|
| | |
|---|
| | | 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 |
|---|
| | | |
|---|
