How to add dynamic content to ActionTiles

Published in

I’m building an app

3 min readFeb 1, 2018

Working on a dashboard for a wall mounted tablet using ActionTiles, I quickly discovered the limitations of the tool, which is otherwise great by the way.

ActionTile has a container for ‘My Media’ which will allow a couple of video stream types and a still image or gif. Many people are using animated gifs from weather websites showing storm front movements. In my case I wanted to be able to show the local weather and have it update automatically in my dashboard.

My goal was to find a way to pull the latest weather information into a mini web page and then take snapshot picture of that and store it in a location that ActionTiles could see. And it worked! Here’s the result.

If you understand the technique and have some coding skills, you can insert your favorite programming languages in place of mine. In this case, I’m using Ruby and JavaScript.

Step 1: Sign up for an API key from Wunderground

I signed up for the developer license. Filled out a little form about my project and they issued the key.

https://www.wunderground.com/weather/api/

Step 2: Figure out what you want to pull out of Wunderground

In my case, I wanted to pull out the upcoming forecast. I am only pulling out the next 3 time frames

https://www.wunderground.com/weather/api/d/docs?d=data/forecast

Step 3: Write the script to pull the weather data and build mini html pages

I am a fan of Bulma.io for my stylesheet. And I like Ruby for scripts like this. I am just showing building 1 block. In reality I’m building 3. But you get the point. The secrets stores my wunderground api key.

wunderground.rb:

#!/usr/bin/env ruby
require 'fileutils'
require 'wunderground'
require 'pry'
require 'yaml'# Setup secrets
secrets = YAML.load_file("secrets.yml")# Contact wunderground api & get the current forecast
w_api = Wunderground.new(secrets["wunderground_apikey"])
forecast = w_api.forecast_for("VA","Leesburg")# Parse the forecast and create the weather files
txt_forecast = forecast["forecast"]["txt_forecast"]["forecastday"]
simple_forecast = forecast["forecast"]["simpleforecast"]["forecastday"]# First file
html1 = "<!DOCTYPE html>"
html1 += "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css\">"
html1 += "<div class=\"box\" style=\"width:225px\">"
html1 += "<img src=\"" + txt_forecast[0]["icon_url"] + "\">"
html1 += "<h1 class=\"title is-5\">" + txt_forecast[0]["title"] + "</h1>"
html1 += "<h2 class=\"subtitle is-6\">High " + simple_forecast[1]["high"]["fahrenheit"]
html1 += "&deg; / Low " + simple_forecast[1]["low"]["fahrenheit"] + "&deg;</h2>"
html1 += "<p class=\"is-size-7\">" + txt_forecast[0]["fcttext"] + "</p>"
html1 += "</div>"
File.open("weather1.html", "w") {|f| f.write(html1) }# Move to file server location
FileUtils.move('weather1.html', 'current/public/weather')# Run the phantomjs code to get images of the html files
system 'phantomjs weather_scrape1.js'# Move images to file server location
FileUtils.move('weather1.png', 'current/public/weather')

Step 5: Host your HTML mini web page somewhere that you can get to it from JavaScript

In my case, I have a Digital Ocean server running Ubuntu.

Step 6: Install PhantomJS

PhantomJS is what I used to grab the mini web page and render it to an image.

Step 7: Write your JavaScript render code

I just found some example online and played with it until it did what I wanted. I did tweak the width to make the image the size I needed for the tablet. Depending on your tablet or screen size you may have to play with width and height.

weather_scrape1.js:

var page = require('webpage').create();page.open("http://smarthome.lavatech.com/weather/weather1.html", function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        window.setTimeout(function () {
            var bb = page.evaluate(function () {
                return document.getElementsByClassName("box")[0].getBoundingClientRect();
            });page.clipRect = {
                top:    bb.top,
                left:   bb.left,
                width:  225,
                height: bb.height
            };page.render('/home/deployer/apps/smarthome/weather/weather1.png');
            phantom.exit();
        }, 100);
    }
});

Step 8: Host the images somewhere that ActionTiles can see

Some people have commented that they could host their images on an internal server and I agree. I think that would work fine but I don’t know enough about ActionTiles to confirm. Of course, that would only work for a tablet in your wifi network. You may want to also use these tiles on your phone which would require an offsite location.

Step 9: Create a cronjob (or some scheduled task) to update these images periodically

In my case, I’m updating them every 15 minutes

0,15,30,45 * * * * /bin/bash -l -c 'ruby /home/deployer/apps/smarthome/weather/wunderground.rb >> /home/deployer/apps/smarthome/weather/config/cron_log.log 2>&1'

Plans for the future

This technique opens up a lot of possibilities. I’ve already started on the next block which will be to show agenda items for my family. Kid’s practices, take the trash out, etc.