icon based home page using flask and raspberry pi

• Provide a homepage with common links to commmon websites and using icons
• A side menu allows additional pages off the homepage
• Pages are configured using a json file, which contains URL and icon
• the json file is edited with a text editor
• I wanted to use flask and python to create a website, which could be easily modified to use on other projects

https://sites.google.com/site/cartwrightraspberrypiprojects/home/other-projects/icon-based-home-page

Follow these instructions to ensure all permissions and software is installed

If the above instructions have been followed, then start a command-line version of the webserver by running:

• $ python3 /var/www/RedMoon/redmoon_wzg.py
• Open a browser, and enter the following URL:
• http://your-hostname.local:5000/
• CTRL-C to exit the command-line program

With command-line version disabled, access an apache served webpage using

• Open a browser, and enter the following URL:
• http://your-hostname.local/

• /var/www # home
• /var/www/RedMoon # contains redmoon.py and homedir.py
• /var/www/RedMoon/RedMoon # location for python code
• /var/www/RedMoon/RedMoon/template # location for html templates
• /var/www/RedMoon/RedMoon/static
• /var/www/RedMoon/RedMoon/static/css # location for css style sheets
• /var/www/RedMoon/RedMoon/static/icons # location for icons
• /var/www/RedMoon/RedMoon/static/config # location for json configuration files

Brief on how the program works:

• $ python3 /var/www/RedMoon/redmoon.py # starts the website running
• /var/www/RedMoon/RedMoon/views.py # renders each page in the website
• /var/www/RedMoon/RedMoon/static/config/homepage.json # defines all of the pages and the submenu
• /var/www/RedMoon/RedMoon/static/css/style.css # defines fonts and appearnace of the pages
• /var/www/RedMoon/RedMoon/static/icons/*.png # icons with links allow easy navigation
• /var/www/RedMoon/RedMoon/static/icons/templates

• /home/pi/RedMoon/RedMoon/templates/base.html # the homepage inherits from this page
• /home/pi/RedMoon/RedMoon/templates/homepage.html # yes, it only requires one page for as many pages as you want

Within the json file and for a set of icons, the url must be unique. If a url is repeated, then the icons and the order will be messed up.

Since the urls and icons are loaded as a dictionary, the url is the key for an icon. If two icons share a url, then the second icon will overwrite the first one.

If an icon is edited and changed, but the change doesn't appear, then clear cached images in the browser.