From 54eba2eb27cd26a573ab7719bfd0bd4016ea43df Mon Sep 17 00:00:00 2001 From: ulrich <undisclosed> Date: Wed, 21 Feb 2018 06:36:11 +0000 Subject: [PATCH] Sendersuche eingebaut --- README.md | 91 ++++++++++++++++++++++++++++++++++++--------- 1 files changed, 72 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 42474ac..ff8bc8d 100644 --- a/README.md +++ b/README.md @@ -2,32 +2,27 @@ Eine Bedienoberfläche für Webradio -## Prototyp +## Funktionen -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). - -## Vorgesehene Funktionen - -Das radio-ui zeigt eine Übersicht von Radiosendern. Antippen eines Senders in der Übersicht spielt den Sender ab. +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. Radiosender können hinzugefügt, geändert und gelöscht werden. Ein Suchfeld ermöglicht das Einschränken der Übersicht auf bestimmte Sender. -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. +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). -## Beispielcharakter +## Protoyp, Demo -Neben dem praktischen Nutzen veranschaulicht das radio-ui verschiedene Aspekte des Baus von Webanwendungen: +Das radio-ui als einzelne Webanwendung hat prototypischen Charakter, es kann für allerlei Webradio-Anwendungen die wiederverwendbare Grundlage bilden. -+ app-layout -+ Vorlagen -+ app-menu -+ CRUD-Muster (Create, Read, Update, Delete) +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. -Wie in der Anwendung radio-ui die obigen Themen umgesetzt sind, ist auf der [Beispielseite](master/beispiel.md) näher betrachtet. +Der aktuelle Stand des Codes in diesem Repository kann hier ausprobiert werden: [Link zur Demo](/data/ulrich/test/radio-ui). + +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. ## Abhängigkeiten -Zur Verwendung des radio-ui sind die folgenden Komponenten erforderlich +Neben dem Code in diesem Repository sind zur Nutzung des radio-ui die folgenden Komponenten erforderlich + [jQuery](http://jquery.com/) + [Mustache](https://github.com/janl/mustache.js) @@ -42,13 +37,71 @@ <script src="../jslib/app-menu/app-menu.js"></script> ```` -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. +Sollen einzelne Komponenten von einem anderen Ort, beispielsweise aus einem Content Delivery Network (CDN) eingebunden werden, müssen diese Einträge angepasst werden. -## Zusammenspiel mit dem Raspberry Pi +### Zeichensätze -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. +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: -Auf der Seite [Kombination von pirc und radio-ui](pirc.md) ist beschrieben, wie pirc aus dem radio-ui heraus genutzt werden kann. +```` +/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. Aus den heruntergeladenen Teilen eine Ordnerstruktur bilden + +```` +radio-ui/ + hier der Inhalt aus diesem Repository +jslib/ + jquery-1.11.1/ + jquery-1.11.1.min.js + mustache/ + 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