From 010cf066446c9cbb96c6bd99db8701e9329bf686 Mon Sep 17 00:00:00 2001 From: ulrich Date: Wed, 29 Sep 2021 06:16:53 +0000 Subject: [PATCH] Link zur Demo aktualisiert --- README.md | 48 +++++++++++++++++++++++++++++++----------------- 1 files changed, 31 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 6d7830e..3a36ca8 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ 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. -Der aktuelle Stand des Codes in diesem Repository kann hier ausprobiert werden: [Link zur Demo](/data/ulrich/test/radio-ui). +Der aktuelle Stand des Codes in diesem Repository kann hier ausprobiert werden: [Link zur Demo](/data/ulrich/test/radio-ui/index.html). 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. @@ -37,14 +37,30 @@ <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 ```` @@ -57,23 +73,21 @@ 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 -- Gitblit v1.9.3