Icon-based Home Page
I try to provide alternatives to creating my projects. Kadaza is a very cool website and homepage. It is very easy to use and you don't need to download or create images. I highly recommend it.
The only drawback to Kadaza is there are many pages I frequent that no one else does, such as, my gateway, my home AP, and other devices on my network. I couldn't figure out how to add these uncommon URLs to kadaza.
In addition, to creating a Kadaza-like homepage I want to:
Create an icon-based home automation website. I can use this menu for both.
Try some technology new to me, such as, a python-based website using flask as a framework.
Have a menu that can modified without any coding.
Display as many sub-pages as I want using only one html page.
There are several Instructables showing how to set up flask:
How this guide is different than other Flask setup guides:
Most flask webserver setup guides use a virtual environment (venv). While using a venv might be best practice for python development, I am not going to use a venv. Most of my raspberry pi's are running as single function, stand-alone servers. I don't develop on one platform and then deploy to another. I don't need to isolate my python environment. Basically, I am just lazy and this adds extra steps that I don't need.
I struggled understanding why I could run a Flask webserver from a command-line and it worked, but when I moved the Flask webserver to apache2 it wouldn't work. However, if I followed a guide specifically tailored to running Flask on apache2, then all worked fine. But, I couldn't get that webserver to from the command line. Something mysterious, at least in my mind, was going on, and I needed to understand.
Something within Flask needs the directory repeated twice. For example,
/var/www/RedMoon/RedMoon.
Many Flask setup guides assume a significant amount of knowledge. Because: 1) Using python as the client-side programming language is a bit non-standard, and 2) Using Flask as the framework is a bit obscure. My goal is to write down all the steps so when my raspberry pi crashes, I can quickly get the server up and running again.
Parts (prices in USD):
The parts below perform best in my raspberry pi applications. These parts are more expensive than those contained in the usual starter kit. However, any raspberry pi set up can be used.
Reusable parts:
MacBook Pro (a PC could be used)
TV with HDMI port, USB keyboard, USB mouse, HDMI Cable (only needed on first pass)
Step 1. Setup Raspberry pi running Raspbian
Follow the link in Step 1 and its instructions.
After Step 1, a raspberry pi 3 running raspbian with the following:
username = pi
username = root
password = ♣your-password♣
hostname = ♣your-hostname♣
Step 2. Set Up the Web Server
Follow the link in Step 2 and its instructions.
After Step 2, the raspberry pi 3 running raspbian will have the following installed:
apache2, which is a web server
sqlite3, which is a light weight database
python2 and python3, which are programming languages*
pip3, which is python3 module installation utility
flask, which is a framework for websites
While a web server doesn't require a framework, I use a framework called flask. Flask normally runs under a virtual environment. However, the virtual environment is not required.
*Raspbian doesn't come with mod_wsgi for python3. There are some references at the end to enable mod_wsgi for python3.
Step 3. Create directories and download files
ssh into Raspberry Pi
Start in webserver directory
$ cd /var/www
I have over 20 Raspberry Pis running in my home network. Every once in a while, one fails. When that happens, I want to be able to rebuild the server from scratch using a minimal number of steps. I try my best to include a script to do all of the instructions.
$ wget "https://raw.githubusercontent.com/dumbo25/flaskMenu/master/redmoon_setup.sh"
$ sudo bash redmoon_setup.sh
Step 4. Try it
On the raspberry pi, run the commands:
$ cd /var/www
$ cd RedMoon
$ sudo python3 redmoon_wzg.py
In a browser on your lap top, enter the URL: http://ha-hub.local:5000/
After you have looked at the website in your browser, then return to the Raspberry Pi terminal, and CTRL-c to exit
Step 5. Convert png to favicon.ico [optional]
Skip this step. redmoon_setup.sh will download the files.
I had to do this to create a redmoon icon.
When running redmoon_wzg.py, you might get this error:
"GET /favicon.ico HTTP/1.1" 404
Pick an application name for the app. I check to see if the name is already in use by a raspbian package by running:
$ sudo apt-get install redmoon
Use Google to find an appropriate image, or create an appropriate png file for the application name. The image size must be less than 50KB. Use paintbrush or a similar editor to resize the png file
The png file must be converted to ico. To do this, install imageMagick
$ sudo apt-get update
$ sudo apt-get install imagemagick
Convert png file to favicon.ico
$ convert redmoon.png -resize 16x16! favicon.ico
Edit /var/www/RedMoon/RedMoon/templates/base.html and add the line in the header:
<link rel="shortcut icon" href="static/icons/favicon.ico" />
Step 6. Apache, python, flask and wsgi
Instead of running a python3 script, apache should respond to page requests
$ sudo apt-get install libapache2-mod-wsgi python-dev
Skip: Run this command to see if mod_wsgi is installed
$ dpkg -s libapache2-mod-wsgi
$ apache2ctl -t -D DUMP_MODULES
Enable wsgi
$ sudo a2enmode wsgi
Get RedMoon.conf and move
$ cd /etc/apache2/sites-available
$ sudo wget "https://raw.githubusercontent.com/dumbo25/flaskMenu/master/RedMoon.conf"
Change hosts file
$ sudo nano /etc/hosts
and add the line
127.0.0.1 RedMoon
Enable the site
$ sudo a2ensite RedMoon.conf
$ sudo systemctl reload apache2
Change ownership of all RedMoon files
$ sudo chown -R www-data:www-data /var/www/RedMoon
Step 7. Check if redmoon works from apache2
On laptop, open a browser and enter:
http://♣your-hostname♣.local
Future Changes
As it is, this page only works while I am inside a home LAN. To be able to use the page outside the LAN:
Automate the Adding websites section below
Get client and server-side certificates to work
Disable port 80 and only support port 5000, where 5000 is the port used by the web server
Port forward through the ISP's gateway
Adding websites
If a new page is added, then edit both of these files:
/var/www/RedMoon/RedMoon/static/config/hompage.json
/var/www/RedMoon/RedMoon/__init__.py
My goal was to make it relatively easy to add new sites. To add a new website there are two steps.
Edit the file:
/var/www/RedMoon/RedMoon/static/config/hompage.json
and add an appropriate icon to the directory:
/var/www/RedMoon/RedMoon/static/icons
and the run the command:
$ sudo service apache2 restart
When editing homepage.json, here are a few things to keep in mind:
Ensure commas are correct at the end of items
json format does not support comments
if there is a duplicate URL on a page, then only the first one will show
if an address doesn't work by going to your-hostname.local: address then add http:// or https:// in front
Troubleshooting
Here are various commands to aid in troubleshooting:
$ systemctl status apache2
$ journalctl -xe
$ apache2ctl status
$ sudo cat /var/log/apache2/error.log
If the commands above don't work or the home page doesn't start, try this:
$ sudo apt update
$ sudo apt full-upgrade
$ sudo systemctl reboot
References:
Get mod_wsgi to work with python3
Stack Overflow: mod_wsgi and python3
Tero Karvinen: looks very complete