Weather Dashboard Project

Using Yahoo Weather API and Unsplash Source to make a smart bedside clock 


Smart bedside weather dashboard

Have you ever woke up and had no idea what time is it? Is it early morning or the middle of the night? Should I check my phone or just try to go back to sleep?

I used to use my phone on my nightstand to check the time. As part of improving my digital wellbeing, I started charging my phone in the living room. This decreased my screen time during the night and morning as well as kept me wondering about the time in the middle of the night.

I did what a good consumer does when realizes there must be a product that eases my painful uncertainty and started searching for a clock. And as a person who is not afraid of modern technology, I obviously started looking for a smart clock.

You have many interesting options in the smart clock segment. Smartness often comes from extra information these devices can display. These can be weather forecast, current temperature, custom wallpapers, calendar integration. Things that you can have on the lock screen of your phone.

Then it strikes me that it is a great opportunity to resurrect one of my old tablet. I have a first-generation iPad mini laying around which I can repurpose as a smart bedside clock and weather dashboard.

Let's look under the hood

Two API will be used. yahoo and unsplash. both are free and requires credit to the service or photographer.

intro to these services. how to set up. what you get.

Turn your iOS device into a kiosk

In order to keep the screen of the iPad on for longer period of time and limit the device to a single app there are a couple of things we need to set up.

  1. Guided access: Guided Access limits your device to a single app and lets you control which features are available. You can turn on Guided Access when you let a child use your device, or when accidental gestures might distract you. Guided access can be found under your Accessibility settings.
  2. Always on screen: To do this, go to your iPad Settings > Display & Brightness > Auto-Lock. Set Auto-Lock to "Never".

Live Demo

  • weather location is set to Budapest
  • time is set to current location
  • by clicking on the screen, it gradually dimms the screen
  • it takes 60 seconds to load the weather icon
Screenshot 2019-11-02 at 16.10.48

Weather Condition Icons

The Yahoo weather API provides live data on the current weather condition. There are 47 different conditions so I put together an icon kit - in hope of never display tornado or hirricane.