We had a really old alarm clock in our bedroom. Really old. The LED number segments, which were a nice dim red in color, had been dying at the rate of 1 segment a year and it was getting hard to read the time. My wife finally had enough of my “I’ll get a new one real soon” excuse and bought a new big, bright, blue LED clock to replace the old clock. It was blue … and *really* bright … even in its dim-mode 🙁 It had to go!
My converted 1942 Crosley Radio was collecting dust on my workbench. I had finally received a Raspberry Pi Zero and Zero4U USB hub to play with but was already lusting after the new R-Pi Zero with camera port. I recently upgraded the audio-output on my Mac from an old USB HiFiMan Express DAC to a Schiit Modi DAC. Hmmmmm, seemed like I had the ingredients to make a BIG clock “radio” with alarm(s) and great stereo audio?
I had neglected my old media-center radio which had an original Raspberry Pi as its “heart”. The R-Pi connected via HDMI to a display board driving a 9.7 inch, 1024 x 768, iPad LCD screen (non-touch). Audio output was via the audio-jack to a small stereo amp. The video was great but sound was mediocre.
My first step was to see if I could get decent sound out of the Zero via my HiFiMan Express HM-101 USB DAC. After much Googling and research, I had an approach. One of the best resources for configuring USB audio under Jessie OS is at Adafruit. If you don’t want or need to use a USB DAC, just ignore this part 😉 You can use the “normal” audio-out jack on the R-Pi 1, 2 or 3 and omxplayer app. As I was using a Zero, I needed another way to get audio out. Plus, I was after “good” audio, not just adequate. I use the ALSA compatible mpg123 and mpg321 apps for audio playback. These provide different options including various types of random playlist support.
I now had a working system with audio and video. I added an Edimax WiFi dongle and a Logitech wireless keyboard/trackpad via a UUGear Zero4U USB Hub. The hub sits on top of the Zero with no soldering required.
OK, I might have lost sight of the original goal — which was a bedroom clock. I started thinking about displaying the time and complete weather forecast, while playing music. I ran the idea by my wife who again informed me that “we” wanted a not-too-bright, readable-across-the-room, simple clock. I did get her to agree that displaying (just) the outside temperature might be useful!
I needed a browser that could be run in kiosk mode so there were no distracting elements. I chose kweb. The latest version I found was 1.7.4. There’s a PDF doc that does a great job describing kweb and all its options by Günter Kreidl – here. Providing you have the Jessie OS and a GUI installed, i.e. not a minimal Jessie image, you can install kweb:
tar -xzf kweb-1.7.4.tar.gz
I like to have a variety of fonts, including the Microsoft core set:
Install the font installer 😉 and then run the installer when prompted. You can then list all fonts installed:
sudo apt-get install ttf-mscorefonts-installer
To hide the distracting cursor while in browser kiosk mode, you can use “unclutter”:
sudo apt-get install unclutter
For a clean clock display, you need to create a kweb configuration file that loads the clock web page and hides all UI elements, including the cursor – while leaving the keyboard active. I suggest creating a file, “mykiosk” in your pi home directory that contains:
pi@PiZero:~ $ cat mykiosk
xset s noblank
xset s off
kweb -KHUAJ+-zbhrqfpoklgtjneduwxyavcsmi#?!., file:///home/pi/clock/index.html
Create a directory with the web page and associated script and CSS files:
The directory should contain 3 files as listed below. I have made a zip file containing these 3 files plus the “mykiosk” config file that you can download from here. NOTE: you need to get your own API key from Weather Underground and determine your location string. See below.
html file “index.html”:
CSS file “style.css”:
var WU_URL = "http://api.wunderground.com/api/0123456789abcdef/geolookup/conditions/q/CA/Los_Angeles.json";
You should also set the browser width to your display width in the CSS file, “style.css”. Look for “max-width” and set this to your screen width. Change the font size inside the “body” section of CSS. Look for:
font-size: 320px; /* adjust to preference and display size */
max-width: 1024px; /* use the width of the display */
If you have installed kweb, setup the mykiosk configuration file, created the clock directory with the html, CSS and script files, you should be able to launch your clock with temperature via:
You can quit the display by hitting ALT-Q on your keyboard or by killing the process via ssh login.