This is a web page designed to function as a family dashboard. It consolidates several on-line calendars into a single family schedule and displays weather forecast information relevant to our outdoor activities. At my house it is displayed in a kiosked browser window on a wall-mounted display that is rotated 90 degrees (1080px wide by 1920px high) powered by a Raspberry PI.
The system components in this repository are:
index.php- the main page. The page includes a meta refresh tag that causes it to refresh itself every 30 minutes.basepage.css- CSS stylesheet with the page's basic stylesdashboardClass.php- PHP code for the page, mainly the code that constructs the schedule portion of the page by consolidating events from the various individual calendars.calendarSources.php- included by dashboardClass.php, this file provides the URLs for the various calendars that will be consolidated into the schedule. This information is broken out into its own file since it is sensitive information and should be protected. A template for the file is provided in this repository -calendarSources.php.template. The URLs point to ICS-formated calendar files such as those available from Google Calendar.schedule.css- stylesheet with styles for the schedule portion of the page.dashboardScripts.js- Javascript functions that populate the weather forecast section of the page with weather data.weather.css- stylesheet with styles for the weather portion of the page.get-weather- A Python script which in a contuous loop fetching weather data updates from the NOAA web services and writing it into a file every thirty minutes. That file is then used as the source for weather data by the functions incalendarScripts.js. The script requires three arguments on the command line, the latitude of your location, the longitude, the full path to the file where it should write its output, and the full path to a file where it can write log messages.get-weather.service.template- a systemd service definition template that can be used to set up the get-weather script to start at system boot. This file requires customization and renaming before use.humidity.php- a web service that receives humidity and temperature information from an IoT humidity sensor and writes it to a file on disk.dashboardClass.phpreads this file and includes the information it contains in the page.composer.json- use thecomposerutility to install thejohngrogg/ics-parserPHP module that is used bydashboardClass.php.
Other components of the system that are not included in this repository:
backgrounds/*- a directory of images that are used as page backgrounds for the dashboard. The images should be pre-formatted to fit the dimensions of the dashboard display. No attempt to adjust the images is made. An image is randomly selected every time the page is refreshed. Any files in this directory with jpg, jpeg, png or gif extensions will be used. I use portraits of family members, relatives, and pets as my page backgrounds.- CanvasJS - a Javascript utility used to create temperature, humidity, and wind speed forecast graphs on the dashboard. Download it from canvasjs.com. Place
canvas.min.jsin a subdirectory calledjs/canvasjs/or modify the link inindex.phpthat points to its location. Note that the free version of this utility overlays a watermark on graphs that it draws. Purchasing a licensed copy of the code will remove the watermark. (Or you can hack the script to remove it. Instructions will not be provided.)
The schedule section of the page will consume any ICS-format data feed that can be accessed via a URL of some type. Most major calendar services like Google Calendar or Apple's iCal/iCloud calendar service provide these.
This system pulls weather data from REST web services provided by NOAA and Synoptics. You must register for a (free) API token from Synoptics in order to use their services. See https://developers.synopticdata.com/mesonet/ for information. NOAA's web services are open. No token is required. See https://www.weather.gov/documentation/services-web-api for information.
I use a Docker image of a PHP web server to test the code on my local workstation:
podman run -d --rm -p 8080:80 --name dashboard -v ~/src/dashboard:/var/www/html php:7.2-apache
The Apache server in this container logs to the system console so this command will tail the logs:
podman logs -f dashboard
This is the way I did it on my web server. Adjust as required:
- I cloned this repository to a run-time directory on my web server -
/opt/dashboard - I uploaded my background image files into
/opt/dashboard/backgrounds - I uploaded the CanvasJS utility as
/opt/dashboard/js/canvasjs/canvasjs.min.js - I changed into the
/opt/dashboarddirectory and ran the commandcomposer install. This created the/opt/dashboard/vendordirectory containing the ics-parser PHP module. - I created a
/opt/dashboard/calendarSources.phpfile containing the URLs of all the calendars I want to consolidate into the schedule, based on the template. - I set up the get-weather.service definition to run the
get-weatherscript as a system service writing its output to/opt/dashboard/weather_data.json. - I added the
AliasandDirectoryconfiguration statements to my Apache server configuration for the/opt/dashboarddirectory.
# dashboard - a calendar and weather data wall screen, secured with basic authentication
Alias /dashboard "/opt/dashboard"
<Directory "/opt/dashboard/">
Options -Indexes
AuthType Basic
AuthName "Dashboard"
AuthBasicProvider file
AuthUserFile "/usr/local/apache/passwd/dashboard"
Require user <USERID>
</Directory>
- I created the authentication users file:
sudo mkdir -p /usr/local/apache/passwdsudo htpasswd -c /usr/local/apache/passwd/dashboard useridsudo chown -R apache:apache /usr/local/apachesudo chmod 700 /usr/local/apache/passwdsudo chmod 600 /usr/local/apache/passwd/* - I configured my IoT humidity sensor to call the
dashboard/humidity.phpweb service so that it would write ahumidity.jsonfile in the/opt/dashboarddirectory. Since the web service runs as the "apache" user, that user needs write access to update this file:touch /opt/dashboard/humidity.jsonsudo chown apache:apache /opt/dashboard/humidity.json
That is all!