diff --git a/list.json b/list.json index 0e24db2..ba99ccd 100644 --- a/list.json +++ b/list.json @@ -14,7 +14,18 @@ "Have fun!" ], "repo": "https://git.c0ntroller.de/c0ntroller/frontpage" - }, + }, + { + "type": "project", + "name": "infoscreen", + "short": "Screen that shows various information.", + "desc": [ + "I had a screen left over and hooked a Raspberry Pi to it.", + "Then I created a webpage that fetches and shows various information.", + "Currently it includes time, weather, calendar, departures and more." + ], + "repo": "https://git.c0ntroller.de/c0ntroller/infoscreen" + }, { "type": "diary", "name": "rust", diff --git a/projects/data_infoscreen/screenshot.jpg b/projects/data_infoscreen/screenshot.jpg new file mode 100644 index 0000000..b94c635 Binary files /dev/null and b/projects/data_infoscreen/screenshot.jpg differ diff --git a/projects/infoscreen.adoc b/projects/infoscreen.adoc new file mode 100644 index 0000000..8a0a211 --- /dev/null +++ b/projects/infoscreen.adoc @@ -0,0 +1,95 @@ +:experimental: + += Infoscreen + +This document is about a screen that shows information. +Shocking, I know. + +== Screenshot + +.Screenshot of the Infoscreen +image::data_infoscreen/screenshot.jpg[Screenshot of the Infoscreen,80%] + +I obfuscated a few things to protect my personal information. + +== How it Started + +A few years ago I bought a new monitor for my PC. +That left me with a monitor I could use for anything I want. + +So I decided to hook a Raspberry Pi to it and show some useful information like weather, calendar, and news. +The monitor then was placed in the kitchen. + +== History +=== The First Implementation + +The first implementation for this was using vanilla JS (and of course HTML and CSS). +Even though I had not had too much experience in JS, I tried to use "good" software development practices, like class inheritance and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules[ES-Modules]. + +I hosted it, using the default https://www.php.net/manual/en/features.commandline.webserver.php[PHP HTTP-Server] locally and opened a Chromium browser on localhost. + +If you are interested in the code, https://github.com/C0ntroller/infoscreen-old[here] is the repository of the second version, which uses most of the code from version one. + +=== Phase Two + +The second version of this project basically took all the code from the first version and bundle it as an Electron App. +I hoped that the performance would be increased by not using _the whole_ Chromium bloat. +It (well, who would have guessed) didn't. + +The old code is still up, so if you're interested you can find it https://github.com/C0ntroller/infoscreen-old[in this repository]. + +=== Phase Three + +When I started to learn React more, I realized that what I tried to achieve in the prior versions are just React components. +I rewrote what I had using React. +But I also had already learned about Frameworks for React that provide static site generation like https://nextjs.org/[Next.JS] and https://www.gatsbyjs.com/[Gatsby]. + +Gatsby looked like a good choice so I just went for it. + +It gets hosted in a Docker container on my own home server and the Pi just opens up a Chromium again. + +This marks the end of the development history. + +== So what's on the Screen? + +Currently, the following info is shown: + +- Time +- Weather and weather map +- two RSS news feeds +- a Google calendar +- departures on the nearest tram station +- Spotify or info from my plant sensors + +Also, the background image is cycled through 20-ish images. + +=== Weather + +For the weather, I used the https://darksky.net/[DarkSky API]. +Because Apple bought it and (of course) shut down the public API I had to switch to https://pirateweather.net/[Pirate Weather]. + +Sadly the data from Pirate Weather seems to not be accurate most times. +In the future, I probably want to switch to another API. + +=== RSS News + +For news, I use the RSS feed of the https://www.tagesschau.de/[Tagesschau], one of the earliest and biggest news channels in Germany. +I also put in a few topics from https://www.der-postillon.com/[Der Postillon] a German satire news page. +It's available on https://www.the-postillon.com/[English too]. + +=== Google Calendar + +It uses the https://developers.google.com/calendar[Google Calendar API] and orders the event by a day. + +=== Departures + +My local public transport company has an API available to fetch data for the stations. +It's quite simple to use actually! + +=== Spotify + +This part shows which song is currently playing in the kitchen. +How it works is a project in itself. +A write-up will follow later. + +If nothing is playing, information about a few plant sensors is shown. + +=== Plants + +This just fetches and shows the current status of the plant sensors from my https://www.home-assistant.io/[Home Assistant]. \ No newline at end of file