Halldor Stefansson

Posted on Oct 24, 2019 • Edited on Nov 9, 2020 • Originally published at halldorstefans.com

Personal Dashboard Showing Calendar Events & Weather Forecast Using .NET Core

#dotnet #raspberrypi #showdev #csharp

Idea

I had this idea in my head that I want to display my calendar, the local weather forecast, and possibly some other things, on some screen.

At first, I was thinking of doing a smart mirror (Example 1, Example 2). But I wasn't sure if I wanted to put in all that work for something I might not use. Plus, since my woodworking skills aren't at the highest level, it would have been a pretty clumsy-looking mirror. :/

Hardware

A couple of months ago, I came across this touchscreen display for Raspberry Pi and a case for it. I thought they were pretty neat-looking and would be perfect for my idea. So I ordered the display, the case and a new Raspberry Pi :)

The first order of business was to connect and set up the screen. However, that was not as straight forward as I had hoped. I followed the assembly guide, but after powering on the Pi, the screen was just white, and nothing happened.

I wondered if the Pi was broken or maybe the screen. Yet, the Pi worked if I connected it to a regular PC monitor. So, either the display was broken, or I was missing something.

Finally, I found the solution on StackExchange, and the problem was that I was missing the drivers. Once I installed them, everything worked 'almost' perfectly.

The screen was upside down, but that was an easy fix.

Software

After the display was up and running correctly, I needed to figure out how I was going to display the information I wanted.

We all know that there are loads of tools available to do this, but I wanted to grow my .NET skills. And I came across a tutorial on building an application using ASP.NET Core called "The Little ASP.NET Core Book".

Once I had gone through the tutorial, creating a to-do application, I figured I would be able to use this for my idea.

The main items I wanted to display were my calendar and the weather forecast. I found this quickstart from Google for the Google Calendar API and used that as my base.

I then found a .NET library for the Dark Sky API. Along with the forecast, I wanted to display a small image that would represent the forecast. I discovered these awesome icons by Adam Whitcroft and managed to integrate them into my solution.

Design

Once I was able to get all the data I needed, next on the agenda was to try to make it pretty.

I was delighted when I encountered freefrontend.com and some CSS examples. I found examples for calendars, weather widgets and I also added the current date and time to my display.

I haven't done much HTML/CSS work, so it took me some time to get everything to work together. But I was satisfied with the result once I ironed that out.

"Deployment"

In "The Little ASP.NET Core Book" the author goes through two different deployment scenarios. On the one hand, using Azure, and on the other with Docker.

Both deployment strategies failed for me.

Once I had deployed the application in Azure, I was unable to open the page and got a "Timed Out" error. And my Dockerfile always failed when building.

Because I wanted to test this as soon as possible on my Raspberry Pi display, I didn't bother to figure out what went wrong at this time. So, I used a USB stick to move the solution.

However, my Raspberry didn't have .NET Core, so I was unable to run it there. Thankfully I found a guide on how to install it on a Raspberry Pi in a blog post by Scott Hanselman.

Once that was installed, I was able to run the application. I needed to make minor CSS adjustments so it would fit the smaller screen better.