How to create a simple web interface using Python

There are different ways to control a system using interfaces. You could build a physical interface with buttons, switches, etc. But for some applications, it’s important to be able to control the system remotely. For this, you could use a web interface.

Step 1 : Install the necessary library

Open the terminal and install the Flask library

pip install flask

Step 2 :

Visualize the necessary controls for your interface. For this tutorial, we’re going to make a simple button that prints something to the terminal.

Step 3 : HTML script

Create a HTML script according to your visualization.
Example code for a simple button:
simpleButton.HTML (1.2 KB)
Using the element form with *method=“POST” will give a signal that the button has been pressed.

Step 3 : Python script

Now that we have an interface, we want to access it and make it communicate with other systems. For this, we’re going to use Python and Flask. Remember to save both the HTML file and the Python file in the same folder. If this is not done, the program will not work.

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)
# @app.route("/") defines a route — this is what Flask listens to at a specific URL. 
@app.route("/", methods=["GET"])
def home():
# render_template("index.html") tells Flask to look for the HTML file
   return render_template("Example.html")

@app.route("/button", methods=["POST"])
def handle_button():
   print("Button was clicked!")  # Output to terminal
   return redirect(url_for("home"))  # Redirects user back to the homepage

if __name__ == "__main__":
   print("🚀 Starting web HMI on http://127.0.0.1:5000")
   app.run(debug=True)

After running this script, a web server will be created. The web server can be accessed by navigating to 127.0.0.1:5000 in your browser. It can also be accessed using the IP address of the hosting device on port 5000 — for example, 192.168.0.43:5000.

Please note that the server is accessable for everyone on the same network.