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 "> ❤</ 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