Introduction: Icon-based Menu or 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:
Step 1: Gather Parts
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.
Get parts and tools (prices in USD):
- Raspberry Pi 3 Element14 $35
- Miuzei Case for Raspberry Pi 3 with Fan Cooling and 3×Aluminum Heatsinks, 5V 2.5A Power Supply,USB Cable from Amazon $15.99
- SanDisk Ultra 32 GB microSDHC Class 10 with Adapter from Amazon $16.04
Reusable parts:
- MacBook Pro (a PC could be used)
- TV with HDMI port, USB keyboard, USB mouse, HDMI Cable (only needed on first pass)
Notes:
- Text enclosed in spades, such as, ♣replace-this♣, should be replaced with an actual value. Of course, remove the spades.
Step 2: Set Up Raspberry Pi 3 and DietPi
A web server runs as a headless machine, which means there is no display connected to it. You can interact with the raspberry pi either via a browser on a laptop, mobile device or tablet, or a terminal window on a laptop running ssh.
DietPi has several features that make it ideal for a headless server.
Setup Raspberry Pi 3 using DietPi by following this instructable.
After following the instructable, the following will be setup:
- raspberry pi 3 running dietpi with
- username = pi
- username = root
- password = ♣your-password♣
- hostname = ♣your-hostname♣
- avahi-daemon, which allows you to login using: ssh pi@♣your-hostname♣.local
- sqlite3, which is a database
- lighttpd, which is a webserver
- python3
- python-setuptools
- RPi.GPIO
- openSSH
- python pip
- ssmtp
If sqlite3 fails to install, then use the command:
$ sudo apt-get install sqlite3 libsqlite3-dev -y
Step 3: Set Up the Web Server Software
A web server requires a stack. A common stack is called LAMP, for Linux, Apache, MySQL and PHP.
For this web server running on a Raspberry Pi we want to use applications that use less processing power and require less memory. Applications with these features are usually called light weight.
Instead of LAMP, the web server will use:
- DietPi, which is a version of debian linux
- lighttpd, which is a light weight web server
- SQLite, which is a light weight database
- Python, which is a programming language
The above are all installed.
While a web server doesn't require a framework, we are going to use a framework called flask. Flask normally runs under a virtual environment. The virtual environment is not required.
To install virtual environment, run the following command:
$ sudo pip install virtualenv
and then create a virtual environment called ha-hub
While a virtual environment is not a necessity, it is a best practice.
$ cd ~/.$ pwd/home/pi$ virtualenv ha-hub
To start the virtual environment, run:
$ source /home/pi/ha-hub/bin/activate(ha-hub) pi@♣your-hostname♣:~ $
Install flask for python3 in the virtual environment (or not, either way is fine):
$ pip3 install flask
Once flask is installed, to stop the virtual environment, run:
$ deactivatepi@♣your-hostname♣:~ $
Step 4: Create Directories and Download Files
Start in home directory
$ cd ~/./home/pi
Download setup.sh from github. The instructable editor converts a link into an abbreviated form. To counteract this, spaces are inserted between " : ", remove these spaces before running the wget command below:
$ wget "https : //raw.githubusercontent.com/dumbo25/flaskMenu/master/setup.sh"
Run the script
$ bash setup.sh
Step 5: Run the Web Site
On the raspberry pi, run the command:
$ python3 /home/pi/ha-hub/homepage.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
