Digital Office Door Sign

Step 1: Setup Your Project Structure

1. Create the Project Directory: First, create a directory to hold your project files:

Bash

mkdir ~/digital-sign
cd ~/digital-sign

2. Create the Subdirectories: Inside the digital-sign directory, create two subdirectories: static (for your logo and CSS) and templates (for your HTML files):

Bash

mkdir static templates

Step 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):

Bash

python3 -m venv venv
source venv/bin/activate
pip install flask

2. Create ‘app.py‘: Inside your ‘digital-sign‘ directory, create the main Python file for your Flask application:

nano app.py:

Python

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.

Bash

cd templates
nano index.html

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.

Bash

nano update.html

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.

Bash

cd ..
cd static
nano styles.css

CSS

body {
    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:

Bash

python3 app.py

2. 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:

Bash

sudo nano /etc/systemd/system/digital-sign.service

2. Add the Following Content:

INI

[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:

Bash

sudo systemctl enable digital-sign
sudo systemctl start digital-sign

Now, your Flask app will start automatically whenever your device boots up.

Final Project Structure

Your project should have the following structure:

Bash

digital-sign/
├── app.py
├── static/
│   ├── logo.png
│   └── styles.css
└── templates/
    ├── index.html
    └── update.html

This 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.

Step 1: Setup Your Project Structure

Step 2: Set Up the Flask Application

Step 3: Create HTML Templates

Step 4: Add Static Files

Step 5: Test the Application

Step 6: (Optional) Auto-Start the Flask App on Boot

Final Project Structure

Leave a Comment Cancel Reply