Sehr sehr gut Martin! Das wird wunderbar, bitte weiter so!
Über Email habe ich die Anfrage bekommen, ob ich nicht zeigen könnte, wie man eine grafische Benutzeroberfläche auf dem Raspberry für das iRadio-Paket erstellen kann. Da dies vielleicht für andere Nutzer auch interessant sein kann, beantworte ich die Frage im Forum.
Nun wie ich ja schon erwähnt habe, baue ich grafische Benutzeroberflächen auf solchen Kleinrechnern gern mit kompakten und schnellen Bibliotheken. Damit werden weder die CPU, noch der Arbeitsspeicher übermäßig in Anspruch genommen.
Eine dieser schmalen und schnellen Bibliotheken ist die FLTK (kurz für Fast and Light Toolkit) welche direkt auf der Xlib bzw. X11 aufsetzt.
Ich möchte hier zeigen wie man FLTK auf das System bringt und wie man ein kurzes Programm für unser iRadio programmiert.
Da die meisten Nutzer hier wahrscheinlich auf einer Windows-Workstation programmieren werden, müssen wir zunächst noch etwas unter dem Windows-System nachinstallieren. Und zwar müssen wir Windows das "Bildschirmsystem" von Unix/Linux beibringen. Dazu installieren wir einen XServer für Windows, ich habe mich seit langer Zeit für Xming entschieden. Den XServer erhält man unter
https://sourceforge.net/projects/xming/
Man installiert das Programm wie jedes andere Windowsprogramm auch. Ich möchte nun zeigen wofür wir es brauchen. Bisher haben wir den Raspberry in allen Bastelthreads remote mit SSH angesprochen und bedient. Dabei war es uns nur möglich Consolenprogramme aufzurufen, das soll sich jetzt ändern.
Zunächst starten wir unsere Windows-Workstation mit unserer Arbeitsumgebung. Dann rufen wir (wenn nicht im Autostart verankert) das Programm Xming auf. Viel passiert da erstmal nicht, kommt noch.
Im nächsten Schritt starten wir unser altbekanntes PuTTY, im Bereich Host Name schreiben wir den Hostnamen des Internetradios oder dessen IP, wir klicken aber noch nicht(!) auf Open.
putty1.JPG (Größe: 49,74 KB / Downloads: 662)
Bevor wir die Verbindung zum Internetradio öffnen, müssen wir für grafische Bildschirmausgaben noch eine zusätzliche Option setzen.
Links im Baum gehen wir zum Abzweig "Connection" und "SSH", dort nochmal auf "X11". Im rechten Teil wählen wir den Punkt "Enable X11 forwarding" aus. Danach können wir die Verbindung mit Klick auf "open" öffnen.
putty2.JPG (Größe: 82,85 KB / Downloads: 665)
Was ist nun anders nachdem wir uns mit unseren Zugangsdaten über den Wartungsanschluß des Radios eingeloggt haben? Es sieht doch nicht anders aus? Richtig, aber wir können jetzt über die Console grafische Programme starten, diese werden auf der entfernten Unix/Linux-Maschine ausgeführt, die Bildschirmausgabe aber wird über das Netz zu uns umgeleitet.
Testen wir das ganze mal mit einem kleinen "Spaßprogramm". Der X11 Bibliothek werden kleine Programme mitgeliefert um die Funktion von X11 zu veranschaulichen. So zum Beispiel das Programm xeyes. Es zeichnet zwei Augen die dem Mauszeiger folgen.
Starten wir das Programm also mal über die Console und schauen was passiert.
xeyes.JPG (Größe: 60,72 KB / Downloads: 657)
Mit Hilfe von Xming öffnet sich jetzt wie von Zauberhand ein weiteres Fenster! Das ist die Bildschirmausgabe des entfernten Rechners, das Programm läuft dort, die Bildschirmausgabe wird umgeleitet. Das Ganze funktioniert auch mit ernsthafteren Programmen wie zum Beispiel einem Webbrowser. Schließen wir das Fenster von xeyes und rufen über SSH in der Konsole den Befehl chromium-browser auf, dann startet der Webbrowser "Chromium" von Google. Das Ausgabefenster erscheint wieder bei uns auf der Workstation, das Programm aber wird auf der entfernten Maschine ausgeführt.
Gut nun gehen wir dazu über FLTK auf unserer Maschine zu installieren. Wir werden die Bibliothek aus Ihren Quellen heraus bauen.
Über die Download-Seite des Projektes (
http://www.fltk.org/software.php) besorgen wir uns die aktuelle Version 1.3.4-2.
Es werden verschiedene gepackte Archive angeboten (tar.gz oder tar.bz2). Laden wir uns eines dieser Archive runter (entweder remote per X11 mittels eines Webbrowsers oder lokal auf die Arbeitsmaschine und schieben das Archiv per USB-Stick auf das Internetradio).
Nach dem Entpacken des Archivs, in meinem Fall in /home/pi/FLTK/fltk-1.3.4-2 , liegt uns nun der ganze Sourcecode der Bibliothek vor.
Wir wechseln zum Bauen der Bibliothek in das entpackte Stammverzeichnis der Quellen, bei mir also mittels
cd /home/pi/FLTK/fltk-1.3.4-2
Als nächstes rufen wir wieder das Tool configure auf:
./configure
configure kann mit verschiedenen Optionen aufgerufen werden, hier eine Übersicht zur Information:
You can run configure yourself to get the exact setup you
need. Type "./configure <options>". Options include:
--enable-cygwin - Enable the Cygwin libraries (WIN32)
--enable-debug - Enable debugging code & symbols
--disable-gl - Disable OpenGL support
--enable-shared - Enable generation of shared libraries
--enable-threads - Enable multithreading support
--enable-xdbe - Enable the X double-buffer extension
--enable-xft - Enable the Xft library (anti-aliased fonts)
--bindir=/path - Set the location for executables
[default = /usr/local/bin]
--libdir=/path - Set the location for libraries
[default = /usr/local/lib]
--includedir=/path - Set the location for include files.
[default = /usr/local/include]
--prefix=/dir - Set the directory prefix for files
[default = /usr/local]
Danach starten wir den Make-Prozess durch Eingabe von:
make
Jetzt wird die Bibliothek vom Compiler gebaut, ebenso sämtliche Test- und Demoprogramme die mitgeliefert werden. Der eigentliche Buildprozess kann einige Zeit in Anspruch nehmen, vielleicht kann man die Zeit mit einem Kaffee, Bier oder Toilettengang sinnvoll verbringen.
Ist der Buildprozess abgeschlossen, dann installieren wir die soeben gebaute FLTK-Bibliothek im System durch Eingabe von:
make install
Nach wenigen Augenblicken ist das Script abgearbeitet und die FLTK-Bibliothek im System installiert.
Jetzt wollen wir ein kleines Demoprogamm schreiben. Die Voraussetzung dafür ist, das das iRadio-Paket was ich zusammengestellt habe bereits installiert ist und uns schon ein Radioprogramm abspielt. Das sollte aber im Normalfall so sein.
Legen wir unser Testprogramm in der Datei test.cxx im Verzeichnis des Pakets iRadio an.
cd /home/pi/iRadio
touch test.cxx
Danach öffnen wir die Quelldatei unseres Testprogramms test.cxx durch Eingabe von:
nano test.cxx
Danach kopieren wir folgenden Quellcode über die Zwischenablage in das nano-Fenster von PuTTY.
Code:
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdint.h>
#include <unistd.h>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/fl_draw.H>
#include <FL/Enumerations.H>
#include <FL/Fl_Widget.H>
void hndl_btnprevstation(Fl_Widget *, void *) {
system("echo \"prev\" | nc 127.0.0.1 9294 -N");
}
void hndl_btnnextstation(Fl_Widget *, void *) {
system("echo \"next\" | nc 127.0.0.1 9294 -N");
}
void hndl_btnvolup(Fl_Widget *, void *) {
system("echo \"volup 2\" | nc 127.0.0.1 9294 -N");
}
void hndl_btnvoldown(Fl_Widget *, void *) {
system("echo \"voldown 2\" | nc 127.0.0.1 9294 -N");
}
int main(int argc, char **argv) {
Fl_Window *window = new Fl_Window(480,290,"iRadio");
Fl_Button *btnvolup = new Fl_Button(165, 75, 70, 65, "@+");
Fl_Button *btnprevstation = new Fl_Button(165, 150, 70 , 65, "@<<");
Fl_Button *btnnextstation = new Fl_Button(245, 150, 70, 65, "@>> ");
Fl_Button *btnvoldown = new Fl_Button(245, 75, 70, 65, "@line");
btnprevstation->callback(hndl_btnprevstation,0);
btnnextstation->callback(hndl_btnnextstation,0);
btnvolup->callback(hndl_btnvolup,0);
btnvoldown->callback(hndl_btnvoldown,0);
window->end();
window->show(argc, argv);
return Fl::run();
}
Das Ergebnis sollte ungefähr so aussehen:
nano_testcxx.JPG (Größe: 92,01 KB / Downloads: 651)
Wir speichern die Quelldatei in nano und verlassen den Editor.
Ein paar Bemerkungen zur Quelldatei.
In der Hauptfunktion main wird durch Eingabe von
Code:
Fl_Window *window = new Fl_Window(480,290,"iRadio");
ein neues Fenster (Klasse FL_Window) mit der Überschrift iRadio und der Größe von 480 x 290 Pixeln erstellt.
Durch die Zeilen
Code:
Fl_Button *btnvolup = new Fl_Button(165, 75, 70, 65, "@+");
Fl_Button *btnprevstation = new Fl_Button(165, 150, 70 , 65, "@<<");
Fl_Button *btnnextstation = new Fl_Button(245, 150, 70, 65, "@>> ");
Fl_Button *btnvoldown = new Fl_Button(245, 75, 70, 65, "@line");
werden vier Knöpfe (btnvolup, btnprevstation, btnnextstation, bntvoldown) der Klasse Fl_Button erstellt. Den Konstruktoren werden dann die Positionen der Knöpfe absolut (also x,y), die Größe der Knöpfe (Breite, Höhe) und ein String zur Beschriftung übergeben. FLTK hat für verschiedene Symbole verschiedene Bezeichner, @>> zum Beispiel steht für einen Doppelpfeil nach rechts, so wie man es vielleicht von den Symbolen von CD-Spielern oder Videorekordern her kennt.
In den Codezeilen
Code:
btnprevstation->callback(hndl_btnprevstation,0);
btnnextstation->callback(hndl_btnnextstation,0);
btnvolup->callback(hndl_btnvolup,0);
btnvoldown->callback(hndl_btnvoldown,0);
werden den Knöpfen verschiedene Handlerfunktionen bekannt gemacht, dem Knopf btnvolup zum Beispiel die Funktion hndl_btnvolup. Diese Funktion ist ganz oben im Quelltext definiert und wird jedesmal aufgerufen wenn der Knopf gedrückt wird. Schauen wir uns die Funktion mal an die aufgerufen wird.
Code:
void hndl_btnvolup(Fl_Widget *, void *) {
system("echo \"volup 2\" | nc 127.0.0.1 9294 -N");
}
In der Handlerfunktion hndl_btnvolup wird die Funktion system aufgerufen. Diese wiederum setzt den Konsolenbefehl echo "volup 2" | nc 127.0.0.1 -9294 -N ab.
Damit wird das Programm Netcat, also nc aufgerufen, mit dem eine TCP/IP-Verbindung zum Remote Control Interface von vlc (127.0.0.1 = localhost, also Rechner auf dem das Programm läuft, Portnummer 9294) aufgebaut wird. Innerhalb von Netcat wird dann das Commando volup 2 über TCP/IP gesendet, was vlc dazu veranlasst die Lauststärke um 2% anzuheben.
Einfach oder?
Gehen wir im Quellcode weiter:
Code:
window->end();
window->show(argc, argv);
return Fl::run();
Wir sagen das wir mit der Fenstergestaltung fertig sind und es soll angezeigt werden. Über Fl::run() gelangt das Progamm dann in die Endlosschleife in der FLTK permanent auf eingehende Aktionen von Knöpfen, Fensterverschiebungen, Mausreaktionen und und und achtet und reagiert. Damit sollte das kleine Testprogramm erklärt sein.
Jetzt müssen wir die Quelldatei in eine ausführbare Datei übersetzen.
Wie wir oben gesehen haben, gibt es beim C++ Compiler einige Sachen anzugeben. Das können wir händisch machen, was dann so aussieht:
g++ -I/usr/local/include -I/usr/local/include/FL/images -I/usr/include/freetype2 -D_LARGEFILE_SOURCE -D_LARGEFILE64_SOURCE -D_FILE_OFFSET_BITS=64 -D_THREAD_SAFE -D_REENTRANT -o 'test' 'test.cxx' /usr/local/lib/libfltk.a -lpthread -ldl -lm -lX11
Oder wir nutzen ein super Werkzeug was uns FLTK mitbringt: fltk-config
Das Tool fltk-config nimmt uns die ganzen Angaben oben ab, wir brauchen nur zu schreiben:
fltk-config --compile test.cxx
Danach wird das Programm unter dem Namen test direkt im iRadio-Verzeichnis gebaut. Ein "ls"-Befehl zeigt es uns.
Rufen wir doch jetzt mal unser kleines Testprogramm auf:
./test
Das Ergebnis sieht so aus:
Das Steuerprogramm läuft nach wie vor "remote", also auf dem Internetradio, die Anzeige wird jedoch per SSH und X11 auf unsere Windows-Workstation umgeleitet.
Und das schönste ist, klicken wir jetzt auf die Knöpfe können wir unser entferntes Internetradio dann auch per SSH/X11 fernbedienen.
Aber natürlich wurde das Programm ja für unser Internetradio geschrieben, schauen wir uns es doch mal dort an.
Als erstes rufen wir einen Dateibrowser auf dem Touchscreen auf:
Danach wechseln wir in unser Verzeichnis in dem wir das Programm test gebaut haben.
Danach klicken wir die Datei test doppelt mit dem Eingabestift oder Finger an,...
... und bestätigen die Meldung das wir es ausgeführt haben wollen.
Und wir können das Internetradio jetzt bequem über den Touchscreen bedienen.
Natürlich wird ein komplett fertig programmiertes Steuerprogramm in den "Autostart" gelegt, so dass man direkt nach dem Bootvorgang die Benutzeroberfläche des Radios vor sich hat und nicht erst noch mit dem Finger im Dateíbrowser die "App" suchen muss.
Ich hoffe der Artikel gibt einen kleinen Einblick wie man solche Steuerprogramme grafisch und mit Touchbedienung erstellen kann.
Bei Fragen zur Programmierung oder zur Einrichtung des Internetradios - einfach raus damit oder PN oder Email.
Gruß
Bernhard
Ansprechpartner für Umbau oder Modernisierung von Röhrenradios mittels SDR,DAB+,Internetradio,Firmwareentwicklung.
Unser Open-Source Softwarebaukasten für Internetradios gibt es auf der Github-Seite! Projekt: BM45/iRadio (Google "github BM45/iRadio")
Da wird doch gar nichts angesteuert.