LED Lights Tube Status Display – Strike vs Normal

I’ve been asked for a comparison of what my LED lights tube status alert project looks like during normal service versus disruption.

This is a video of what it looks like during mostly normal service. There is some disruption on the Victoria line. This is a slightly older version without TfL Rail and not sorting by transport mode. I’ll get a better video of what normal service looks like when it happens. I could be waiting a while so I might have to fake it!

This is a video of what the latest revision looks like during a major disruption. In this case the recent tube strike. None of the tube line were operating and there was additional disruption on the overground. Only TfL Rail and the DLR were operating a normal service.

If you’d like a bit more background on this project then you should read my original post about it.

You might also like some other things that I’ve made with this LED light strip such as my Aurora alerts.

 

Breaking the News – Blocking the BBC News Breaking Banner and Playing Pranks

There is a very annoying feature that has been added to the BBC News website. It’s a breaking news pop-over that adds itself to the bottom of the page when something important is supposedly happening. Like some sort of presidential alert, you can’t opt-out. Until now…

BREAKING NEWS!

If you just want the solution to block this annoyance then skip ahead, otherwise read on for some background.

How it Works

There is some JavaScript on the page which polls a URL every 30 seconds. This contains a JSON payload that has escaped HTML in it when there is a breaking story. Such as this tidied up example.

{
    "pollPeriod": 30000,
    "isError": false,
    "html": "<div class=\"falcon\">\n
                 <div class=\"falcon__inner\">\n
                     <a href=\"\/news\/uk-england-manchester-33593086\" class=\"falcon__link\" data-asset-id=\"33593086\">\n
                         <h2 class=\"falcon__badge\">Breaking<span class=\"off-screen\"> <\/span><\/h2>\n
                         <p class=\"falcon__heading\">Second body found after Bosley mill explosion, Cheshire police say<\/p>\n
                     <\/a>\n 
                     <button class=\"falcon__button\">\n
                        <span class=\"off-screen\">Close breaking news<\/span>\n
                     <\/button>\n
                 <\/div>\n
             <\/div>"
}

I’m sure that the eagle eyed among you can already see some problems with this. The HTML is just delivered raw and is simply inserted into the DOM. This opens up lots of possibilities which I will get onto later. It would be better if the relevant information was in separate JSON properties and then safely turned into HTML with a template.

It would have been polite to implement a permanent dismissal feature so you could opt-out of these disturbances forever. This could easily be done by setting a cookie which indicates that the user never wants to see these notifications again. There is already a data asset ID cookie which ensures you only see each breaking story once. However, there is a hack you can use to block the breaking news notifications completely.

How to Block it

You need to add an entry to your hosts file for the domain polling.bbc.co.uk that points to your own computer. This way the DNS is overridden and no HTML is ever delivered to the page.

On Windows this file is in Windows\System32\drivers\etc\ and on Linux/OSX it’s in /etc/. You’ll need to use a text editor running as an admin/sudo. Add the following entry.

127.0.0.1 polling.bbc.co.uk

Save the file and now all requests to that host should fail. Unless you happen to be running a web server…

Just One More Thing

As the BBC doesn’t use HTTPS you can easily play some pranks if someone leaves a computer unattended or if you happen to be in charge of an internal DNS server.

Did you know the marquee tag is still supported‽

Did you know the marquee tag is still supported‽

And because raw HTML is used this allows you to inject scripts. The possibilities are endless. You’re not restricted to just messing with the breaking banner.

Did you want Comic Sans with your alert box‽

Did you want Comic Sans with your alert box‽

If you want to try this out then just use the following entry instead of the localhost IP address above.

192.30.252.153 polling.bbc.co.uk
 

Radio Piradise

I listen to a fair amount of Radio Paradise (an awesome internet radio station). So after reading an article in the MagPi by Simon Monk about how to make an internet radio I decided to build a dedicated device. A Radio Pi-radise if you will. But first I made a quick prototype to discover any big issues.

It was pretty easy to set up MPD to stream at boot however the poor audio quality of the Pi means that I won’t be using this as it stands. I’d experienced the audio issues with the original Pi and thought my B+ or Pi v2 would do better. However, there is a huge amount of noise on the analogue line out. I’m no audiophile but it was very noticeable. I tried swapping power supplies and other components, using different streams and even running from a battery pack but to no avail. There are no issues when using my phone or laptop with the same system. If I’m to use this then I’ll probably have to invest in a USB sound card or a HiFiBerry.

What a shame. I’d like to use the Pi as the new Android app is a bit buggy and keeps cutting out.

 

Experience with Mobile Chrome App Install Banner

I’ve written previously about using the new mobile app install banner in Chrome. It’s possible to test this by setting a flag (chrome://flags/#bypass-app-banner-engagement-checks) but I experienced some weird edge cases so I did a bit of digging (the beauty of open source). In InstaBail I found that the banner would show even after installing to the home screen so I went to discover how this feature works.

home screen banner

Here is the (nicely commented) file that contains the banner engagement checks that determine if and when a banner is shown to real users. There is also some very useful discussion on this bug report. It seems that chrome can’t tell directly what web apps are on the home screen. So all it can do is remember when an app was launched from the home screen and you need to clear the history to forget this. So if you’re testing this and switch to the full screen app (without launching it from the home screen) then you may see the install banner in the full screen app. This shouldn’t be something that happens for real users often but can be a bit confusing when you’re testing.

You can also adjust the colour of the status bar by using the meta theme-color tag. This doesn’t just show in the app switcher toolbars as shown in that blog post but it also colours the Android status bar at the top of the screen.

colour status bar 1

colour status bar 2

 

Adding Basic Authentication to Screenly OSE

I’ve worked on a few digital sign display screens (TVs used to display information) over the years. I used to roll my own with a Raspberry Pi and a bunch of hacks until I discovered the amazing Screenly Open Source Edition which does it much better. However, it has one weakness which is that the admin web interface is completely unauthenticated. This could allow people on the same network to get up to all sorts of mischief. Especially as I prefer to run these on a guest Wi-Fi network so sensitive credentials can’t be recovered from the Pi.

Dashing HD dashboard

Dashing runs better on the Pi 2 but it still lags a bit

I’ve made a small patch to Screenly that adds some very basic authentication. You can find it on my GitHub. There are clearly some big issues with the simple approach I’ve taken but as long as you understand the weaknesses it should suffice for simple purposes. The credentials are hard-coded into the Python in plain-text so make sure they are unique and not used for anything else. Also you should enable HTTPS, otherwise they will be sent over the wire in the clear. This is better than nothing though!

A better approach would of course be to securely store passwords with a strong one-way hash function (such as bcrypt or PBKDF2) but then tooling is required to set and update them. If you care this much then you should probably upgrade to Screenly’s commercial offering (there’s a free tier).

Disclaimer: I have absolutely no affiliation with Screenly. I just think they’re doing great work.

 

Physical Web Experiments without a BLE Beacon

After reading about Google’s new Eddystone protocol specification for BLE (Bluetooth Low Energy) beacons similar to Apple’s iBeacon I wanted to try it out. I don’t have any BLE beacons but fortunately you don’t need them. You can use mDNS and I quickly got it running on a Raspberry Pi by following these instructions. It’s pretty straightforward but I had to use HTTP as HTTPS didn’t appear to work just by changing the protocol and port (probably need to stick with a redirect for now).

Physical Web Notification

Eddystone Rocks

Eddystone lighthouse (with someone fishing)

Once you’ve got your server configured and running you need to install the Android or iOS app (although I understand this will eventually be integrated into Android). I’ve tested this on a Nexus 5 running the latest version of Lollipop (5.1.1). Here’s what it looks like with the Pi set up to broadcast notifications about InstaBail.

The app has a splash screen explaining what it does. I’m not sure what you’re actually accepting at this stage.

splash screen of the Physical Web app

The splash screen of the Physical Web app

The app will force you to turn on Bluetooth in a loop until you accept. You can turn it off once you’ve closed the app and notifications will still work. The beacon list looks like this.

beacon list in the Physical Web app

Beacon list in the Physical Web app

You’re not really meant to use the app directly as beacons create notifications. You can only see these when you open the panel (no icon in the status bar) but it doesn’t need to be fully open like this. You can have Bluetooth off and mDNS notifications will still work over Wi-Fi.

notifications outside the Physical Web app

Notifications outside the Physical Web app

Selecting the notification opens the website in the default browser. It can also be swiped away to dismiss it like most notifications.

 

LED Strip Aurora Alerts

I love my Blinky Tape LED strip (basically a NeoPixel with a built it USB microcontroller) and one of my lifelong ambitions is to see the northern lights (Aurora Borealis). Unfortunately living in light polluted SE England means that this is unlikely. So I’ve put together a project that simulates the lights when they should be visible. If you live in the north then this can also be used to alert you to look outside.

aurora

This project uses data from the excellent AuroraWatch UK at Lancaster University and as usual the open source code is on GitHub. I decided to use a different approach to my tube and national rail alerts by using images and a negated signalling system. This means that the default value of the tape is to alert (the animation is loaded into the controller) and the Raspberry Pi simply blanks the tape when it gets an alert that isn’t red (high activity).

To use the project load your choice of one of the tiny PNG images onto the tape with the Pattern Paint software that comes with it. Then clone the git repository to the Pi, connect the tape and run the script. You probably want to set it to run in the background (with an & after it) and at boot by adding it to “/etc/rc.local” before the “exit 0″ (e.g. “python /home/pi/BlinkyTape_Python/Aurora.py &”).

Here are some videos of it in action along with the small images that create the animations. The images are symmetrical to ensure a smooth animation when it loops.

aurora1

aurora2

 

Otford Solar System

To celebrate the New Horizons flyby of Pluto I thought I’d write about the Otford Solar System which claims to be “probably the largest scale model in the world”. Having visited the Sweden Solar System (which was much bigger) I was keen to check this out, especially as it’s a lot closer to home and easier to visit all of the planets. I’ll stick to the solar system as the nearest stars are on different continents!

As the name suggests, this model is in and around Otford in Kent, England. All the sites are marked on Open Street Map.

Otford Solar System

Here’s an enhanced version I’ve made.

Otford Solar System Enhanced

The sun and 4 inner planets are in a small area at the north of the sports fields. The others are separately marked (but you need to zoom in to see the label for Saturn).

The planets are inscribed on metal discs (at the correct scale) with most mounted on pillars (some are not for practical reasons). I haven’t visited all of them yet but once I have I’ll put up the pictures.

Pluto is the most out of the way but it looks like a pleasant walk via a couple of footpaths and viewpoints. Since this model was built (and since New Horizons was launched) Pluto has been demoted from a planet to a dwarf planet but I still think it’s worth a visit (in both cases)!

 

InstaBail – iOS vs Android Home Screen Icons

I briefly mentioned in the last post that home screen icons on iOS and Android need to be different. Android supports transparent backgrounds while iOS does not. So if you want to use a non-square shape on Android then you will need to create separate icons for iOS. If you don’t then iOS fills the background in black which looks rubbish. You can see how many different icons are needed in the GitHub repository for InstaBail.

Here is what InstaBail looks like on iOS. The Apple icons aren’t transparent, they just have white borders on a white background.

iOS home screen icons

iOS InstaBail screenshot

Here is what it looks like on Android. For comparison the Yo Flow icon is square on both platforms.
Android home screen icons

How you set the text for the icon also varies by platform (and how many characters fit varies by the version of each platform too) but I’ll save that for another post.

 

InstaBail – Mobile Chrome Install Banner Experiment

I’ve made a fun offline mobile web app that generates random excuses and easily lets you share them. It uses real-time train and tube delay information for more realistic bails. Visit instabail.uk to check it out.

InstaBail

It’s a static website hosted on GitHub pages using CloudFlare for caching and HTTPS support. You can “install” it to run it full screen like a native app and it will run offline too.

I wanted to experiment with the new “Add to Home Screen” banner functionality in mobile Chrome. I’ll write more about the intricacies of this (and the problems of getting the app to work well on iOS and Android) another time.

If you launch the website more than once on different days then a banner will appear that prompts you to add the web app to your home screen.

1

You then get a nice icon that you can launch the app from (the iOS icon is slightly different as it doesn’t support transparency).

2

Launching the app from the icon runs it full screen.

3

The app will work without a data connection (but you won’t get some of the latest bails).