All entries in this blog series:
- Beaglebone Black Radio Challenge - Review
- Beaglebone Black Radio Challenge - Part 1: Project description
- Beaglebone Black Radio Challenge - Part 2: Getting the different components to work
- Beaglebone Black Radio Challenge - Part 3: User interface (Work in progress) (this post)
- Beaglebone Black Radio Challenge - Part 4: The Build
- Beaglebone Black Radio Challenge - Part 5: Project Finalisation
I don't have a lot of experience programming, I am however familiar with scripting and HTML. This is why I planned to create the interface for the radio in HTML/Perl.
Webserver
In order to be able to server the web interface of the radio, a webserver is required. While searching, I came across other people using "lighttpd" on the Beaglebone, so I decided to give it a try.
Installation
The lighttpd package needed to be installed:
root@beaglebone:~# opkg install lighttpd
The installation also took care of setting up the necessary files to start the webserver automatically:
ln -s '/lib/systemd/system/lighttpd.service' '/etc/systemd/system/multi-user.target.wants/lighttpd.service' Job for lighttpd.service failed. See 'systemctl status lighttpd.service' and 'journalctl -xn' for details. Adding system startup for /etc/init.d/lighttpd.
Once installed, I checked the status of the newly installed webserver:
root@beaglebone:~# systemctl status lighttpd.service lighttpd.service - Lightning Fast Webserver With Light System Requirements Loaded: loaded (/lib/systemd/system/lighttpd.service; enabled) Active: failed (Result: exit-code) since Sat 2000-01-01 01:36:45 UTC; 18s ago Process: 917 ExecStart=/usr/sbin/lighttpd -D -f /etc/lighttpd.conf (code=exited, status=255) CGroup: name=systemd:/system/lighttpd.service Jan 01 01:36:45 beaglebone systemd[1]: Starting Lightning Fast Webserver With Light System Requirements... Jan 01 01:36:45 beaglebone lighttpd[917]: 2000-01-01 01:36:45: (network.c.379) can't bind to port: 80 Address already in use Jan 01 01:36:45 beaglebone systemd[1]: lighttpd.service: main process exited, code=exited, status=255/n/a Jan 01 01:36:45 beaglebone systemd[1]: Failed to start Lightning Fast Webserver With Light System Requirements. Jan 01 01:36:45 beaglebone systemd[1]: Unit lighttpd.service entered failed state
The webserver could not bind to port 80 because it was already in use. This was caused by another webserver already running on the Beaglebone.
Disabling default webserver
Following commands were used to disable the Beaglebone's default webserver:
root@beaglebone:~# systemctl disable bonescript.service root@beaglebone:~# systemctl disable bonescript-autorun.service rm '/etc/systemd/system/multi-user.target.wants/bonescript-autorun.service' root@beaglebone:~# systemctl disable cloud9.service rm '/etc/systemd/system/multi-user.target.wants/cloud9.service' root@beaglebone:~# systemctl disable bonescript.socket rm '/etc/systemd/system/sockets.target.wants/bonescript.socket'
Lighttpd was now able to start and bind to port 80 successfully. The default index page was accessible.
CGI/Perl support
With the webserver installed and running, it was time to activate the cgi modules.
In the lighttpd config file, I uncommented the "mod_cgi" module along with other CGI related parameters:
root@beaglebone:/www/pages# nano /etc/lighttpd.conf ## modules to load server.modules = ( "mod_access", "mod_cgi", "mod_accesslog" ) #### CGI module cgi.assign = ( ".pl" => "/usr/bin/perl", ".cgi" => "/usr/bin/perl" )
I restarted the webserver to apply the changes:
root@beaglebone:/www/pages# /etc/init.d/lighttpd restart Restarting Lighttpd Web Server: stopped /usr/sbin/lighttpd (pid 125) 2000-01-01 00:42:04: (plugin.c.169) dlopen() failed for: /usr/lib/mod_cgi.so /usr/lib/mod_cgi.so: cannot open shared object file: No such file or directory 2000-01-01 00:42:04: (server.c.676) loading plugins finally failed lighttpd.
Even though I enabled the CGI module in the config file, the webserver refused to start. The module needed to be installed separately:
root@beaglebone:/www/pages# opkg install lighttpd-module-cgi Installing lighttpd-module-cgi (1.4.31-r2.3) to root... Downloading http://feeds.angstrom-distribution.org/feeds/v2012.12/ipk/eglibc/armv7a-vfp-neon/base/lighttpd-module-cgi_1.4.31-r2.3_armv7a-vfp-neon.ipk. Configuring lighttpd-module-cgi.
With the CGI module now activated and installed, lighttpd was happily starting.
root@beaglebone:/www/pages# /etc/init.d/lighttpd restart Restarting Lighttpd Web Server: no /usr/sbin/lighttpd found; none killed lighttpd.
Testing a sample CGI/Perl page, I could validate the installation:
User interface
I had a pretty clear idea of how I wanted my interface to look like, but before starting the actual implementation, I made some sketches.
Sketches
For the interface, I had three main menus in mind:
- Listen: play controls, play mode (FM or Web) and channel selection
- Manage: managing channels (add, edit, delete)
- Configure: possibility to configure some settings of the radio
Implementation
While making the interface, I tried to avoid static values as much as possible. The interface should work on more than this very specific LCD and specific resolution alone.
By defining everything in proportions, the interface should look the same (or as much as possible at least) on different devices such as pc, smartphone, tablet, and LCD cape.
The code is still unstable, so I'm only providing a small preview here. The full code will be available once the interface is stable and finished.
Some screenshots/pictures of the interface accessed from different devices:
On the LCD cape:
On the smartphone in landscape mode:
And finally, on the laptop:
There is still a lot of work to be done, but I hope to post the final result soon!
Testing
Below you will find a video of a small test of the interface:
The radio is playing in FM mode. I then press on the web icon to switch to internet radio for the same channel.
You can hear a switch, but I'm not sure the difference between FM and internet radio can clearly be heard.
After that I press the pause (should perhaps become a "stop" button) to stop playing any music.
That's it for this week's post, stay "tuned" for more!
Top Comments