Status Board


Motivation

When i wake up in the morning i would like to see a nice status board on my TV. I want to see the departure times of public transport, current weather conditions, news headlines, my schedule for the day ... you get the idea.

There are a lot of framework and services for stuff like this available but all of them seem to be made for an enterprise use case non of the are targeted for private users.

So I started my own thing, and i will continue to add new features. There is also an online DEMO

Public Transport

}

Where to get the departure times for my local train station? I started to look for an API or just anything so that I would not have to write a scraper for the page of the local network when is struck gold! PyMVGLive! Two important pieces of information,

  • There is a service called MVG Live that delivers exactly the information i am interested in
  • There is already a Python module to get the Information i am interested in.

So, the first building block was done, a simpel Django App to pull the data and to deliver it as a JSON file:

https://git.bartel.ws/tbartel/django-mvglive

JS Clock

The Clock at the bottom right is strait forward JavaScript. So it is based on the system cock and timezone of the client.

    <script>
        function startTime() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('clock').innerHTML =
                h + ":" + m;
            var t = setTimeout(startTime, 500);
        }
        function checkTime(i) {
            if (i < 10) {
                i = "0" + i 
            }
            ;  // add zero in front of numbers < 10
            return i;
        }
    </script>

Headline News

The News Slider at the bottom is made of two parts. A Django App that pulls the RSS feeds of news sites and delivers them as JSON. On the frontend I use a JQuery plugin called "Slick".

The code to use use the plugin in your base template could look a little bit like this:

<script type = "text/javascript" src = "//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js" />

function getSliderSettings() {
    return {
        vertical: true,
        responsive: false,
        verticalSwipe: false,
        autoplay: true,
        rows: 1,
        accessibility: false,
        arrows: false,
        draggable: false,
        slickEnabled: true

    }
}

function LoadHeadlines(first = false) {
    $(function () {
        $.ajax({
            type: 'get',
            url: '/news/',
            dataType: 'json',
            success: function (data) {
                if (first) {
                    $('#headlines').slick(getSliderSettings());
                } else {
                    $('#headlines').slick('slickRemove', null, null, true);
                }

                $.each(data, function (k, v) {
                    $('#headlines').slick('slickAdd', v)
                });
            }
        });
        //setInterval(LoadHeadline(), 30000);
    });
}

$(document).ready(function () {
    startTime();
    LoadHeadlines(true);
    setInterval(LoadHeadlines, 1000 * 60 * 2);
}

Weather

Next up is the weather forecast. I decided to pull the data from Weather Underground the free tier allows enough API requests (500/day)

In the end i did not even need some fancy interface, a simple get is all you need in order to pull the forecast JSON encoded.

Like before i created a simple Django App which pulls the data and presents it in JSON.

This time you need to configure it using two values in the main settings.py

WU_KEY = "1234567890123456"
WU_LOCATION = "/Country/City"