Step 1: Setup Your Project Structure
1. Create the Project Directory: First, create a directory to hold your project files:
mkdir ~/digital-sign
cd ~/digital-sign2. Create the Subdirectories: Inside the digital-sign directory, create two subdirectories: static (for your logo and CSS) and templates (for your HTML files):
mkdir static templatesStep 2: Set Up the Flask Application
1. Install Flask: Ensure you have Flask installed. If you haven’t already, you can install Flask in a virtual environment (recommended):
python3 -m venv venv
source venv/bin/activate
pip install flask2. Create ‘app.py‘: Inside your ‘digital-sign‘ directory, create the main Python file for your Flask application:
nano app.py:
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
# Default office status
office_status = "In Office"
@app.route('/')
def index():
return render_template('index.html', status=office_status)
@app.route('/update', methods=['GET', 'POST'])
def update_status():
global office_status
if request.method == 'POST':
office_status = request.form.get('status')
return redirect(url_for('index'))
return render_template('update.html')
if __name__ == "__main__":
app.run(host='0.0.0.0', port=5000, debug=True)
This code sets up two routes:
/: Displays the main page with the static name, title, logo, and current office status./update: Provides a page where you can update the office status.
Step 3: Create HTML Templates
1. Create ‘index.html‘: Inside the ‘templates‘ directory, create the index.html file, which will display the main page with the name, title, logo, and status.
cd templates
nano index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Office Door Sign</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div>
<img src="{{ url_for('static', filename='logo.png') }}" alt="Logo" style="width: 200px; height: auto;">
<h1>Your Static Name</h1>
<h2>Your Title</h2>
<h3>Office Status: {{ status }}</h3>
<br>
<a href="{{ url_for('update_status') }}">Update Office Status</a>
</div>
</body>
</html>
2. Create ‘update.html': Inside the ‘templates‘ directory, create the ‘update.html‘ file, which will provide a form to update the office status.
nano update.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update Office Status</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div style="text-align: center;">
<h2>Update Office Status</h2>
<form action="/update" method="POST">
<label for="status">Change Status:</label>
<select name="status" id="status">
<option value="In Office">In Office</option>
<option value="Out of Office">Out of Office</option>
<option value="On a Call">On a Call</option>
<option value="In a Meeting">In a Meeting</option>
</select><br><br>
<input type="submit" value="Update Status">
</form>
<br>
<a href="{{ url_for('index') }}">Back to Home</a>
</div>
</body>
</html>
Step 4: Add Static Files
1. Add Your Logo: Place your logo image in the ‘static‘ directory. Make sure to name it ‘logo.png‘ or adjust the HTML accordingly if you name it something else.
2. Create ‘styles.css‘: Inside the static directory, create the ‘styles.css‘ file to style your HTML elements, such as the name, title, and office status.
cd ..
cd static
nano styles.cssbody {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 32px;
}
a {
font-size: 20px;
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: underline;
}
Step 5: Test the Application
1. Run the Flask Application: Make sure you’re in the digital-sign directory, and then run your Flask application:
python3 app.py2. Access the Web Interface:
- Open your web browser and go to ‘
http://localhost:5000‘ (or use the IP address of your device if you’re accessing it remotely). - You should see your main page displaying the static name, title, logo, and current office status.
- Click the “Update Office Status” link to go to the update page, change the status, and submit the form.
- After submitting, you should be redirected back to the main page with the updated office status.
Step 6: (Optional) Auto-Start the Flask App on Boot
If you want your Flask app to start automatically when your device boots, you can set up a systemd service.
1. Create a systemd Service File: Create a new service file named ‘digital-sign.service‘ in the ‘/etc/systemd/system/‘ directory:
sudo nano /etc/systemd/system/digital-sign.service2. Add the Following Content:
[Unit]
Description=Flask Office Door Sign
After=network.target
[Service]
ExecStart=/home/your-username/digital-sign/venv/bin/python3 /home/your-username/digital-sign/app.py
WorkingDirectory=/home/your-username/digital-sign
Restart=always
User=your-username
[Install]
WantedBy=multi-user.target
Replace ‘your-username‘ with your actual username.
3. Enable and Start the Service:
sudo systemctl enable digital-sign
sudo systemctl start digital-signNow, your Flask app will start automatically whenever your device boots up.
Final Project Structure
Your project should have the following structure:
digital-sign/
├── app.py
├── static/
│ ├── logo.png
│ └── styles.css
└── templates/
├── index.html
└── update.htmlThis setup should give you a fully functional digital office door sign with a static name, title, and logo, and the ability to update the office status via a separate webpage.