Bau eines MP3-Players mit Grafik-LCD

Mp3player per Webbrowser und Touch-Screen bedienen

Vorteile

Den Mp3player mittels Webbrowser bedienen? Da scheinen zwei völlig unterschiedliche Welten aufeinander zu prallen. Aber es geht. Gut sogar. Aber zuerst möchte ich erklären, was mich dazu gebracht hat:

Als ersten Schritt unsere Hausautomatisierung hatten wir einen energiesparenden Mini-ITX Server im Technikraum und ein festplattenloses Mini-ITX Terminal in unserem Wohnzimmer installiert. Es soll Zugriff auf sämtliche Funktionen unseres Hauses gewähren, aber natürlich auch über neue Emails, das Wetter, das Weltgeschehen etc. informieren. Ein schneller Zugriff auf Google und Wikipedia war uns ebenfalls wichtig. Da drängt sich die Verwendung eines Webbrowsers als Benutzerschnittstelle geradezu auf. Also musste auch der Mp3player dort integriert werden.

Umsetzung

In meine exisitierende Locoplayer Software habe ich einen kleinen Webserver integriert, der eine dynamische Webseite ausliefert. Diese Webseite bleibt mit dem Webserver in Verbindung und aktualisiert ihren Inhalt bei Bedarf ohne die ganze Seite neu laden zu müssen. Dieses Verfahren nennt sich AJAX (Asynchronous Javascript and XML) und bedeutet, dass die Webseite neue Informationen vom Webserver im XML-Format erhält und diese mittels Javascript verarbeitet und die Seite entsprechend aktualisiert. Ein Webseite, die diese Technik verwendet ähnelt mehr einem normalen Programm als einer klassischen Webseite.

Diese Webseite gibt Auskunft über den gerade laufenden Titel.

Das Layout ist vollständig vom HTML-Quelltext getrennt und per CSS (Cascading Style Sheets) in einer externen Datei gespeichert. So kann das Layout jederzeit leicht geändert werden.

Die Webseite sollte prinzipiell mit jedem Browser funktionieren, das CSS Layout funktioniert im Moment jedoch nur mit Firefox vernünftig.

Das Menü zur Auswahl einer CD. Voraussetzung für die Anzeige des CD-Covers ist, dass sich eine Datei "front.jpg" im jeweiligen Verzeichnis befindet.

Optimierung der Bedienung

Für den Einsatz als Terminal ist ein Vollbildmodus des Browsers wünschenswert. Firefox bietet diesen zwar an, verlangt aber das manuelle Einschalten mittels Menü bzw. F11-Taste. Abhilfe bringt die Extension Autohide", die Tool- und Menubar nur bei Bedarf einblendet und das Starten in den Vollbildmodues mittels Kommandozeilenoption -fullscreen ermöglicht.

Da der Mp3player nur mittels Touch-Screen bedient werden soll, also ohne Tastatur und Maus, sind weitere Anpassungen notwendig: Zum Einen habe ich eine Bildschirmtastatur eingeblendet, um die CD-Suche zu erleichtern. Zum anderen ist das "Anklicken" von Links mit dem Touch-Screen etwas schwierig: Wenn man den Finger beim Anfassen zu sehr seitlich bewegt, dann möchte der Browser Text markieren oder sogar per Drag&Drop verschieben, anstatt dem Link zu folgen. Bei Leuten mit großen Händen passiert dies regelmäßig.

Abhilfe bringen zwei Dinge: Vergrößern der Schrift und die Aufgabe von "normalen" Links. Wenn die seitliche Bewegung kleiner ist, als ein Buchstabe groß, dann ist alles paletti. Schriftgröße 24 hilft dabei sehr. Gegen das Drag&Drop hilft, keine normalen Links (<a href etc.) zu verwenden, sondern Divs oder Spans: <div onclick="tuwas()">Hier klicken</div> ruft beim Anklicken die Javascript Funktion "tuwas()" auf. Bei der Verwendung von AJAX wünscht man sich ohnehin einen Funktionsaufruf statt dem Laden einer neuen Seite. Diese Technik sollte wegen mehrerer Nachteile (Stichwort: Barrierefreiheit) nicht für öffentlichen Webseiten verwendet werden. Für den Touch-Screen in unserem Wohnzimmer ist das aber kein Problem.

Download