Can we make modern GUI using web languages for vending machine ?

The answer for above is yes we can.We can use those for vending machines using kiosk mode .The following idea i already applied on my existing project and it works fine and we tested a lot.You can also make a good looking modern GUI with existing knowledge of css and HTML ,JavaScript.The interfacing between Django and GPIO pins are explained as clearly as possible.If you want to do the same continue to Read on.


The following prerequisite are required :

  1. Raspberry pi With raspian OS installed in it
  2. A Touchscreen display compatible with raspberry pi
  3. A little knowledge about basics of web languages (CSS,HTML,JavaScript)

Step 1: Installing Django and Prerequisite for Project

  1. upgrade existing Python 2 to 3 using the terminal.You can go through the steps in the Video.
  2. Install Django on Raspberry pi using Pip command in the terminal line.
  3. (optional) Install required libraries for touch display.For this go through your Display manufacturer webpage.

Step 2: Setting Up Your Django Application

If You are comfortable with IDE on raspberry pi go for it.But I recommend to do Django application on PC.It's Better to use PyCharm or Visual Studio for Django Application Development.I'll Done with Pycharm. Go to Pycharm and create a New project under that Select Django. Give a new name for project and on Enable Template and create a name for your app and if you are working on databases enable Django admin and press start.It will Install necessary packages.After that follow these steps.

  • Check server is running or not using command - python runserver on terminal
  • If you Don't know about Django basics navigate to the site Polls app where you can easily understand about Django Basics.

Step 3: Creating a GUI and Linking With Backend

  • For Creating a GUI I'll Done with Html 5 and CSS 3.You can create a number of pages as your wish and for Icons and pictures try to download and use if you are working with offline vending machine and for online use URL links. I've stored those .html files in Template Directory we just enabled.
  • Use static folder for storing Images,Videos and CSS files respectively
  • After that use in Django to link the Files with back end progress.


Step 4: Replacing Files in Raspberry-pi and Configuring

Congratulations , If you Followed steps till Now its time to test GUI on raspberry pi.

  1. create a Django application with same name as used in your PC or Laptop
  2. Create Template and Static Folders on your Pi
  3. Replace the new Files with the actual Files you created For more details refer the Pictures.
  4. The next step is to create a Auto-start script to start server during boot up in Background
  5. The Final thing is to enable Kiosk Mode in raspberry pi for more Details Check out my Github Page anf if you want to show chromium in Fullscreen Mode

All the Best Guys ,let'sStart Make your Own

Raspberry Pi Contest 2020

Participated in the
Raspberry Pi Contest 2020