From 7a416cff73f06f6f2e2070119d38d46526b49f6d Mon Sep 17 00:00:00 2001
From: ulrich <undisclosed>
Date: Sat, 24 Mar 2018 13:04:23 +0000
Subject: [PATCH] Vorlagen asynchron und nur bei Bedarf laden
---
README.md | 191 ++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 178 insertions(+), 13 deletions(-)
diff --git a/README.md b/README.md
index a821b2c..f03af06 100644
--- a/README.md
+++ b/README.md
@@ -2,26 +2,191 @@
Eine Bedienoberfläche für Webradio
+## Funktionen
-## Radiostreams
+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.
-Nachfolgend die Adressen einiger Radiostreams
+Radiosender können hinzugefügt, geändert und gelöscht werden. Ein Suchfeld ermöglicht das Einschränken der Übersicht auf bestimmte Sender.
-### hr info
+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).
-[Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html)
+## Protoyp, Demo
-MP3-Stream (128 kBit/s)
-http://metafiles.gl-systemhaus.de/hr/hrinfo_2.m3u
+Das radio-ui als einzelne Webanwendung hat prototypischen Charakter, es kann für allerlei Webradio-Anwendungen die wiederverwendbare Grundlage bilden.
-MP3-Stream (48 kBit/s)
-http://metafiles.gl-systemhaus.de/hr/hrinfo_1.m3u
-(für mobile Anwendungen empfohlen)
+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.
-### radiobob
+Der aktuelle Stand des Codes in diesem Repository kann hier ausprobiert werden: [Link zur Demo](/data/ulrich/test/radio-ui).
-[Livestream-Übersicht](http://www.radiobob.de/radiobob/empfang/livestream)
+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.
-MP3: http://streams.radiobob.de/bob-live/mp3-192/mediaplayer
+## Abhängigkeiten
-Mobile Nutzung: http://streams.radiobob.de/bob-live/aac-64/mediaplayer
+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)
++ [app-menu](/gitblit/docs/web!app-menu.git)
+
+Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden.
+
+````
+<link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css">
+<script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script>
+<script src="../jslib/mustache/mustache.min.js"></script>
+<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 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. 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.
+
+## Schnittstellenbeschreibung
+
+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.
+
+### Sender
+
+#### Senderliste lesen
+
+Aufruf
+
+````
+data/sender.json
+````
+
+Antwort
+
+````
+{
+ "senderliste": {
+ "titel": "Senderliste",
+ "inhalt": [
+ {
+ "senderid": 1,
+ "sendername": "hr info",
+ "senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3",
+ "senderlogo": "../bilder/hr-info.png"
+ },
+ {
+ "senderid": 2,
+ "sendername": "radiobob",
+ "senderurl": "http://bob.hoerradar.de/radiobob-live-mp3-hq",
+ "senderlogo": "../bilder/radio-bob-logo-80.png"
+ },
+ usw.
+ ]
+ }
+}
+````
+
+#### Neuen Sender speichern
+
+Noch nicht realisiert.
+
+#### Änderungen an einem Sender speichern
+
+Noch nicht realisiert.
+
+#### Sender löschen
+
+Noch nicht realisiert.
+
+### Abspieler
+
+#### Abspielerliste lesen
+
+Aufruf
+
+````
+data/abspieler.json
+````
+
+Antwort
+
+````
+{
+ "abspielerliste": {
+ "titel": "Abspielerliste",
+ "inhalt": [
+ {
+ "abspielerid": 1,
+ "abspielername": "dieses Gerät",
+ "abspielerurl": "",
+ "abspielertyp":"lokal",
+ "abspielerbild": "",
+ "abspielerzustand":""
+ },
+ {
+ "abspielerid": 2,
+ "abspielername": "Raspberry Pi Wohnzimmer",
+ "abspielerurl": "",
+ "abspielertyp":"pirc",
+ "abspielerbild": "",
+ "abspielerzustand":"selected"
+ },
+ usw.
+ ]
+ }
+}
+````
+
+#### Neuen Abspieler speichern
+
+Noch nicht realisiert.
+
+#### Änderungen an einem Abspieler speichern
+
+Noch nicht realisiert.
+
+#### Abspieler löschen
+
+Noch nicht realisiert.
--
Gitblit v1.9.3