Skip to content

Commit 4c3e3fd

Browse files
PayalLakraPayalLakra
committed
Web Interface is improved(Buttons colour changed, UI changed)
1 parent bab280f commit 4c3e3fd

File tree

3 files changed

+123
-58
lines changed

3 files changed

+123
-58
lines changed

‎app.py

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ def run_app():
4444

4545
# Check if the app is already running
4646
if app_name in app_processes and app_processes[app_name].poll() is None:
47-
return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green", message=f"{app_name} is already Running")
47+
return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green", message=f"{app_name} is already Running", running_apps=app_processes.keys())
4848

4949
try:
5050
# Start the app subprocess
@@ -54,10 +54,20 @@ def run_app():
5454
process = subprocess.Popen(["python", f"{app_name}.py"])
5555

5656
app_processes[app_name] = process
57-
return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green", message=None)
57+
return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green", running_apps=app_processes.keys(), message=None)
58+
5859
except Exception as e:
59-
return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green", message=f"Error starting {app_name}: {e}")
60+
return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green", message=f"Error starting {app_name}: {e}", running_apps=app_processes.keys())
6061

62+
@app.route("/app_status", methods=["GET"])
63+
def app_status():
64+
# Check the status of all apps
65+
statuses = {
66+
app_name: (process.poll() is None) # True if running, False if not
67+
for app_name, process in app_processes.items()
68+
}
69+
return jsonify(statuses)
70+
6171
@app.route("/stop_lsl", methods=['POST'])
6272
def stop_lsl():
6373
# Terminate LSL process

‎static/style.css

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -16,28 +16,34 @@ body {
1616
color: #333;
1717
}
1818

19+
.subtitle {
20+
font-size: 1.2em;
21+
color: #333;
22+
margin-top: -10px;
23+
}
24+
25+
.heart {
26+
color: #a855f7;
27+
font-size: 1.2em;
28+
}
29+
1930
.controls button {
2031
padding: 15px 30px;
2132
margin: 10px;
2233
font-size: 18px;
2334
cursor: pointer;
2435
border: none;
25-
border-radius: 25px; /* Rounded shape */
26-
background-color: #d1a56c; /* Beige color */
27-
color: #333; /* Dark text */
36+
border-radius: 10px;
37+
background: #333;
38+
color: #fffffe;
2839
transition: transform 0.3s ease, background-color 0.3s ease;
2940
}
3041

31-
.controls button:hover {
32-
background-color: hsl(34, 47%, 40%); /* Dark beige on hover */
33-
}
34-
3542
button:disabled {
36-
background-color: #cccccc;
43+
background-color: rgb(105, 206, 105);
3744
cursor: not-allowed;
3845
}
3946

40-
/* App button layout */
4147
.app-buttons {
4248
margin-top: 20px;
4349
}
@@ -56,38 +62,37 @@ button:disabled {
5662
gap: 15px; /* Spacing between buttons */
5763
}
5864

59-
/* App button styles */
6065
.app-buttons button {
6166
width: 200px;
6267
height: 80px;
6368
margin: 10px;
64-
font-size: 20px; /* Larger font size */
65-
font-weight: bold;
66-
text-transform: uppercase; /* Stylish text */
67-
border-radius: 25px; /* Rounded edges */
69+
font-size: 17px; /* Larger font size */
70+
font-weight: medium;
71+
border-radius: 10px; /* Rounded edges */
6872
border: none;
69-
color: white; /* Font color */
73+
color: #333; /* Font color */
7074
cursor: pointer;
71-
background-color:#9ba59c; /* gray color */
75+
background-color: #fffffe;
7276
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
7377
transition: transform 0.3s, background-color 0.3s;
7478
}
7579

76-
/* Hover effect for app buttons */
77-
.app-buttons button:hover {
78-
background-color: #656d67; /* Darker shade on hover */
79-
transform: scale(1.1);
80-
opacity: 0.9;
81-
}
82-
83-
/* Button active (on click) effect */
8480
.app-buttons button:active {
8581
transform: scale(1.05);
82+
background-color: rgb(105, 206, 105);
8683
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
84+
color: white;
85+
cursor: not-allowed;
8786
}
8887

89-
button:disabled {
90-
cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text x="0" y="16" font-size="16">🚫</text></svg>'), not-allowed;
88+
button.running {
89+
background-color: rgb(105, 206, 105) !important;
90+
cursor: not-allowed;
91+
color: white;
92+
}
93+
94+
button.not-running {
95+
background-color: #fffffe;
9196
}
9297

9398
.popup {
@@ -105,21 +110,17 @@ button:disabled {
105110
animation: fade-out 3s forwards;
106111
}
107112

108-
.popup p {
109-
font-size: 18px;
110-
font-weight: bold;
111-
color: #333;
113+
.bottom-text {
114+
position: fixed;
115+
bottom: 1px;
116+
left: 50%;
117+
transform: translateX(-50%);
118+
text-align: center;
119+
font-size: 13px;
112120
}
113121

114122
@keyframes fade-out {
115-
0% {
116-
opacity: 1;
117-
}
118-
80% {
119-
opacity: 1;
120-
}
121-
100% {
122-
opacity: 0;
123-
visibility: hidden;
124-
}
123+
0% { opacity: 1; }
124+
80% { opacity: 1; }
125+
100% { opacity: 0; visibility: hidden; }
125126
}

‎templates/index.html

Lines changed: 69 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Chords-Python</title>
6+
<title>Chords-Python Applications</title>
77
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
88
</head>
99
<body>
1010
<div class="container">
1111
<div class="header">
12-
<h1>Chords-Python</h1>
12+
<h1>Chords-Python Applications</h1>
13+
<p class="bottom-text">Designed with <span class="heart">&#10084;</span> at Upside Down Labs</p>
1314
</div>
1415

1516
<!-- Pop-up message -->
@@ -19,37 +20,90 @@ <h1>Chords-Python</h1>
1920
</div>
2021
{% endif %}
2122

22-
<div class="controls">
23+
<div class="controls">
2324
{% if not lsl_started %}
2425
<form action="/start_lsl" method="POST">
25-
<button type="submit" id="start_lsl_button">Start LSL Stream</button>
26+
<button type="submit" id="start_lsl_button" class="lsl-not-running">Start LSL Stream</button>
2627
</form>
2728
{% else %}
28-
<button id="start_lsl_button" disabled>LSL Stream Running</button>
29+
<button id="start_lsl_button" class="lsl-running" disabled>LSL Stream Running</button>
2930
{% endif %}
30-
</div>
31-
31+
</div>
3232
<div class="app-buttons">
3333
<!-- Row 1: ECG, EMG, EOG, EEG -->
3434
<div class="row">
3535
<form action="/run_app" method="POST">
36-
<button type="submit" name="app_name" value="heartbeat_ecg" {% if not lsl_started %}disabled{% endif %}>ECG with Heart Rate</button>
37-
<button type="submit" name="app_name" value="emgenvelope" {% if not lsl_started %}disabled{% endif %}>EMG with Envelope</button>
38-
<button type="submit" name="app_name" value="eog" {% if not lsl_started %}disabled{% endif %}>EOG with Blinks</button>
39-
<button type="submit" name="app_name" value="ffteeg" {% if not lsl_started %}disabled{% endif %}>EEG with FFT</button>
36+
<button type="submit" name="app_name" value="heartbeat_ecg"
37+
class="{% if 'heartbeat_ecg' in running_apps %}running{% else %}not-running{% endif %}"
38+
{% if not lsl_started %}disabled{% endif %}>
39+
ECG with Heart Rate
40+
</button>
41+
<button type="submit" name="app_name" value="emgenvelope"
42+
class="{% if 'emgenvelope' in running_apps %}running{% else %}not-running{% endif %}"
43+
{% if not lsl_started %}disabled{% endif %}>
44+
EMG with Envelope
45+
</button>
46+
<button type="submit" name="app_name" value="eog"
47+
class="{% if 'eog' in running_apps %}running{% else %}not-running{% endif %}"
48+
{% if not lsl_started %}disabled{% endif %}>
49+
EOG with Blinks
50+
</button>
51+
<button type="submit" name="app_name" value="ffteeg"
52+
class="{% if 'ffteeg' in running_apps %}running{% else %}not-running{% endif %}"
53+
{% if not lsl_started %}disabled{% endif %}>
54+
EEG with FFT
55+
</button>
4056
</form>
4157
</div>
4258

4359
<!-- Row 2: Game, GUI, Keystroke, CSVPlotter -->
4460
<div class="row">
4561
<form action="/run_app" method="POST">
46-
<button type="submit" name="app_name" value="game" {% if not lsl_started %}disabled{% endif %}>Force Ball Game</button>
47-
<button type="submit" name="app_name" value="gui" {% if not lsl_started %}disabled{% endif %}>GUI of 6 Channels</button>
48-
<button type="submit" name="app_name" value="keystroke" {% if not lsl_started %}disabled{% endif %}>Keystroke Emulator</button>
49-
<button type="submit" name="app_name" value="csvplotter" {% if not lsl_started %}disabled{% endif %}>CSV Plotter</button>
62+
<button type="submit" name="app_name" value="game"
63+
class="{% if 'game' in running_apps %}running{% else %}not-running{% endif %}"
64+
{% if not lsl_started %}disabled{% endif %}>
65+
Force Ball Game
66+
</button>
67+
<button type="submit" name="app_name" value="gui"
68+
class="{% if 'gui' in running_apps %}running{% else %}not-running{% endif %}"
69+
{% if not lsl_started %}disabled{% endif %}>
70+
GUI of 6 Channels
71+
</button>
72+
<button type="submit" name="app_name" value="keystroke"
73+
class="{% if 'keystroke' in running_apps %}running{% else %}not-running{% endif %}"
74+
{% if not lsl_started %}disabled{% endif %}>
75+
Keystroke Emulator
76+
</button>
77+
<button type="submit" name="app_name" value="csvplotter"
78+
class="{% if 'csvplotter' in running_apps %}running{% else %}not-running{% endif %}"
79+
{% if not lsl_started %}disabled{% endif %}>
80+
CSV Plotter
81+
</button>
5082
</form>
5183
</div>
5284
</div>
5385
</div>
86+
<script> // For checking the running status of the apps
87+
function updateAppStatus() {
88+
fetch('/app_status')
89+
.then(response => response.json())
90+
.then(statuses => {
91+
Object.keys(statuses).forEach(app => {
92+
const button = document.querySelector(`button[value="${app}"]`);
93+
if (statuses[app]) {
94+
button.classList.add("running");
95+
button.classList.remove("not-running");
96+
} else {
97+
button.classList.add("not-running");
98+
button.classList.remove("running");
99+
}
100+
});
101+
})
102+
.catch(error => console.error("Error fetching app statuses:", error));
103+
}
104+
105+
setInterval(updateAppStatus, 100); // 100 ms checking
106+
document.addEventListener("DOMContentLoaded", updateAppStatus);
107+
</script>
54108
</body>
55109
</html>

0 commit comments

Comments
 (0)