# radio-ui

Eine Bedienoberfläche für Webradio

## Funktionen

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](/gitblit/doc/web!radio-ui.git/master/pirc.md).

## Protoyp, Demo

Das radio-ui als einzelne Webanwendung hat prototypischen Charakter, es kann für allerlei Webradio-Anwendungen die wiederverwendbare Grundlage bilden.

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).

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

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.