Build a “What to Wear” App for Groggy Children (and Adults)

This ingenious project was described to me by James V., an engineer with an important problem to solve: sleepy children wasting time in the morning waiting for instructions on what to wear rather than figuring it out for themselves. Below is James’ recounting of how he resolved the issue.

The problem: There is no off the shelf app to tell my children what they need to wear based on local weather data.

The final result: a tablet showing the day’s weather forecast and an output panel listing the clothing requirements of the day.

weather-app-img1

Contents

Ingredients

Hardware

  • Raspberry Pi 4: You can use any Linux device to pull this off. I just have this one performing a variety of other tasks so it is on all the time.
  • Amazon Fire Tablet: This is a wall-mounted tablet running software as described in the Software section. It’s plugged into the wall where a security system keypad was previously. I used this product to power it directly from the wall behind it. I’ve used a usb light switch in other locations, but you’ll need to be able to power it at all times.

APIs

  • OpenWeatherMap API: This allows you to pull local weather conditions at a lat/long level. This is used for the weather conditions. The free tier allows for 60 pulls per minute which is plenty for this application.
  • Accuweather API: This service has hundreds of different indices to fit your needs. Anything from “Dog Walking Conditions” or “Mosquito Activity” to “Migrane Headaches”. The free tier has a limit of 50 calls per day so keep in mind that you can’t go crazy pulling data from this one.

Software

  • ActionTiles: I use this for all the smart-related controls on the the wall tablet. While the fuctionality for this is pretty much limited to Samsung SmartThings buttons, it does allow for media such as images. This is what enables the data to be displayed.
  • Fully Kiosk Browser: There needs to be a way to run the action tiles on the tablet. This app allows for borderless display as well as screen locks to prevent accidental closing.
  • Curl: This is a standard Linux upload function that can send an image to a website.
  • PhantomJS: This program will take a screen grab of a website.
  • Google Sheets: This will run the API Connector add-on and provide the ability to manipulate the raw data into ways that kids can understand.
  • 000webhost.com: This allows you to reserve your own free website to upload the images to. Just sign up and setup a template page, it doesn’t matter what it is as it’s just a public location to upload the image. You could use your own server or something like Linode as well, but this is what I decided at the time and it’s available 24/7 for uploads.
  • Gnome-schedule: This is the graphical scheduler to setup the upload job. You can use the manual crontab, but I’ve had better luck with this one.
  • API Connector: Use this to connect your APIs to Google Sheets.

Setup

Hardware Setup

  • Tablet: You will need to create an account at ActionTiles. I believe it is a OTO license cost per device. On there you can install the Fully Kiosk Browser which is either free or paid. The advantage of paid is that you can set up screen savers and have an expanded list of controls available. It’s not necessary for this project, but something to consider if you are using the tablet for other things as well.
  • Raspberry Pi: Install PhantomJS. The github location is at https://github.com/ariya/phantomjs/. I believe curl is already installed. If not, sudo apt install curl.

API Setup

  • API sign up: You will need to sign up for an API key for Openweather and Accuweather. You will also need to figure out what indices and data you will need as well as your specific lattitude and longtitude (you can use city/zip too. I live in a smaller town so it was more helpful to use lat/long). For Accuweather the indices are detailed here: https://developer.accuweather.com/list-available-daily-indices. Note the number of what you want. For openweather the code is listed here: https://openweathermap.org/current.
  • API Connector setup: You’ll need to install and pay for a license for automated scheduling. Once installed, you can enter new API requests, like this.

    Current Weather:

    http://api.openweathermap.org/data/2.5/weather?lat="YOURLAT"&lon=-"YOURLONG"&units=imperial&APPID="YOURAPIKEY"

    Weather Forecast:

    http://api.openweathermap.org/data/2.5/forecast?lat="YOURLAT"&lon=-"YOURLONG"&units=imperial&APPID="YOURAPIKEY"

    Accuweather Indices:

    http://dataservice.accuweather.com/indices/v1/daily/1day/"YOURLOCATIONAPI"/"THEINDICE#YOUWANT"?apikey="YOURAPIKEY"

    (just replace your data and remove the quotes. Note that accuweather has 2 different keys to put in there)

  • API Connector Schedule: Weather data changes rather often. I have the forecast data update hourly. While the indices I make a call based on what it is. Some can be updated once a day, others can be done a few times a day. The key is to make sure your calls don’t exceed 50 a day in total.

Software Setup

  • Google Sheet setup: This is a more open-ended setup. I created a display sheet that will have the data you want to display on your screen. This can be in any format, look, font, etc. There are tons of options including weather icons that can be put into your display sheet. I’d recommend looking through the openweather API to decide what you want.
    You may need to reformat some of the raw data, for instance the date. I used something like this to reformat it:
    =(((hlookup("dt",'YOURSHEET'!A1:AA2,2,false)/60)/60-5)/24)+DATE(1970,1,1)

    Also note that your sheet must be set to be shared to “Anyone with the link”. Any custom formulas like what type of clothing to wear can be created using standard nested if statements based on ranges of data. I determine snow and rain based on current conditions and +8 hours in the forecast API.
  • PhantomJS setup: You’ll need to create a bash script that will upload the data to your website/server. Here is an example:
    #!/bin/bash
    # This is my script
    phantomjs weather.js
    curl -T ~/weather.png ftp:/"YOURWEBSITE"

    You also need to create the phantom js file. I called it weather.js. The trick here is to make the viewport size match the outline of your output sheet. You’ll have to run this manually a few times to make sure you get it right. Here is the example script.

    var page = require('webpage').create();
    //viewportSize being the actual size of the headless browser
    page.viewportSize = { width: 1024, height: 1024 };
    //the clipRect is the portion of the page you are taking a screenshot of
    page.clipRect = { top: 200, left: 200, width: 350, height: 200 };
    //the rest of the code is the same as the previous example
    page.open('"YOURGOOGLESHEET", function() {
    page.render('weather.png');
    phantom.exit();
    });
  • Gnome-schedule: I set up the scheduler to run my weather.sh script hourly. There’s no limit on this, just do what meets your needs.
  • ActionTiles setup: Within ActionTiles you’ll need to setup a new media tile. You then set up your link to point to where you uploaded the image. Once you add it to your tile screen it will appear there for all to see. You can adjust the size and it will be full screen if you touch it.

Future Applications

Clearly weather isn’t the only thing you can use it for. I’m planning on creating some more personalized tiles for things like my car (mileage, gas level/usage, using autopi), my dog (activity level, location, using the whistle activity tracker) and screen time for the kids (time remaining, using circle). Anything that has the ability to be pulled into Google Sheets via API Connector could be used in this manner and then displayed on a wall tablet.

Leave a Comment