Skip to content

Commit 617e87e

Browse files
PayalLakraPayalLakra
committed
Connect button, csv button is added
1 parent f550b54 commit 617e87e

File tree

2 files changed

+285
-46
lines changed

2 files changed

+285
-46
lines changed

‎static/style.css

Lines changed: 218 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,21 @@ body {
165165
color: #666;
166166
}
167167

168+
/* Footer adjustments */
169+
.footer-text {
170+
margin-top: 15px;
171+
}
172+
173+
/* Footer */
174+
.footer-text {
175+
text-align: center;
176+
font-size: 13px;
177+
color: #666;
178+
margin-top: 20px;
179+
width: 100%;
180+
}
181+
182+
168183
/* Disconnect button styles - matching 3-in-1 button dimensions */
169184
.disconnect-button {
170185
width: 90%;
@@ -319,11 +334,6 @@ body {
319334
height: 70px;
320335
}
321336

322-
/* Footer adjustments */
323-
.footer-text {
324-
margin-top: 15px;
325-
}
326-
327337
/* BLE Popup */
328338
#bleDevicePopup {
329339
max-height: 80vh;
@@ -546,15 +556,6 @@ body {
546556
font-weight: bold;
547557
}
548558

549-
/* Footer */
550-
.footer-text {
551-
text-align: center;
552-
font-size: 13px;
553-
color: #666;
554-
margin-top: 20px;
555-
width: 100%;
556-
}
557-
558559
.heart {
559560
color: #a855f7;
560561
font-size: 1.2em;
@@ -688,4 +689,207 @@ body {
688689
height: 60px;
689690
font-size: 20px;
690691
}
692+
}
693+
694+
.top-controls {
695+
width: 100%;
696+
margin-bottom: 20px;
697+
display: flex;
698+
justify-content: center; /* Center the main content */
699+
align-items: center;
700+
position: relative; /* For absolute positioning of CSV button */
701+
}
702+
703+
.protocol-container {
704+
display: flex;
705+
flex-direction: column;
706+
align-items: center;
707+
}
708+
709+
.csv-recording-box {
710+
display: flex;
711+
width: 300px;
712+
height: 60px;
713+
background: #f8f9fa;
714+
border-radius: 8px;
715+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
716+
border: 1px solid #e0e0e0;
717+
overflow: hidden;
718+
position: absolute;
719+
right: 0; /* Stick to the right edge */
720+
}
721+
722+
.protocol-buttons-combined {
723+
display: flex;
724+
align-items: center;
725+
gap: 10px;
726+
}
727+
728+
.protocol-button-group {
729+
position: relative;
730+
display: inline-flex;
731+
background: #f0f0f0;
732+
border-radius: 35px;
733+
padding: 3px;
734+
box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
735+
}
736+
737+
.protocol-buttons-combined button {
738+
width: 60px;
739+
height: 60px;
740+
border: none;
741+
background: #536878;
742+
color: white;
743+
font-size: 24px;
744+
cursor: pointer;
745+
transition: all 0.3s;
746+
display: flex;
747+
justify-content: center;
748+
align-items: center;
749+
position: relative;
750+
}
751+
752+
#connect_button {
753+
width: 100px;
754+
height: 60px;
755+
border: none;
756+
border-radius: 35px;
757+
background: #4CAF50;
758+
color: white;
759+
font-size: 16px;
760+
font-weight: bold;
761+
cursor: pointer;
762+
transition: all 0.3s;
763+
display: flex;
764+
justify-content: center;
765+
align-items: center;
766+
gap: 8px;
767+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
768+
}
769+
770+
@media (max-width: 768px) {
771+
.top-controls {
772+
flex-direction: column;
773+
gap: 15px;
774+
}
775+
776+
.csv-recording-box {
777+
position: static;
778+
width: 100%;
779+
max-width: 300px;
780+
margin-top: 15px;
781+
}
782+
783+
}
784+
785+
.csv-recording-box {
786+
display: flex;
787+
width: 280px;
788+
height: 70px;
789+
background: #fffffe;
790+
border-radius: 10px;
791+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
792+
border: 2px solid #ddd;
793+
overflow: hidden;
794+
position: absolute;
795+
right: 0;
796+
transition: all 0.3s;
797+
}
798+
799+
.csv-recording-box:hover {
800+
transform: translateY(-3px);
801+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
802+
border-color: #000000;
803+
}
804+
805+
.csv-filename-container {
806+
flex: 1;
807+
padding: 8px 12px;
808+
border-right: 1px solid #e1e5eb;
809+
display: flex;
810+
align-items: center;
811+
background: #f8fafc;
812+
}
813+
814+
.csv-filename-input {
815+
width: 100%;
816+
border: none;
817+
background: transparent;
818+
font-size: 17px;
819+
color: #334155;
820+
outline: none;
821+
font-weight: bold;
822+
padding: 6px 0;
823+
}
824+
825+
.csv-filename-input::placeholder {
826+
color: #98bfde;
827+
}
828+
829+
.csv-button-container {
830+
width: 120px;
831+
display: flex;
832+
align-items: center;
833+
justify-content: center;
834+
padding: 0 8px;
835+
}
836+
837+
.csv-record-btn {
838+
width: 100%;
839+
padding: 10px 8px;
840+
background: linear-gradient(to bottom, #5ecef0, #9bdaed);
841+
color: #333;
842+
border: none;
843+
border-radius: 8px;
844+
font-size: 14px;
845+
font-weight: 600;
846+
cursor: pointer;
847+
transition: all 0.3s;
848+
text-align: center;
849+
text-transform: uppercase;
850+
letter-spacing: 0.5px;
851+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
852+
border: 1px solid #ddd; /* Add subtle border */
853+
}
854+
855+
.csv-record-btn:active {
856+
transform: translateY(0);
857+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
858+
}
859+
860+
.csv-record-btn.recording {
861+
background: #4CAF50;
862+
color: white;
863+
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
864+
border-color: #3e8e41; /* Darker green border */
865+
}
866+
867+
.csv-record-btn.recording:hover {
868+
background: #45a049; /* Slightly darker green on hover */
869+
box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
870+
}
871+
872+
/* Add a subtle pulse animation when recording is on*/
873+
@keyframes pulse {
874+
0% { transform: scale(1); }
875+
50% { transform: scale(1.02); }
876+
100% { transform: scale(1); }
877+
}
878+
879+
.csv-record-btn.recording {
880+
animation: pulse 1.5s infinite ease-in-out;
881+
}
882+
883+
@media (max-width: 768px) {
884+
.csv-recording-box {
885+
position: static;
886+
width: 100%;
887+
max-width: 320px;
888+
margin-top: 15px;
889+
}
890+
891+
.csv-record-btn {
892+
padding: 8px 6px;
893+
font-size: 13px;
894+
}
691895
}

‎templates/index.html

Lines changed: 67 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,38 +13,45 @@
1313
<h1>Chords-Python</h1>
1414
</div>
1515

16-
<div class="protocol-buttons-combined" id="protocolButtonsContainer">
17-
<div class="protocol-button-group" id="protocolButtonsGroup">
18-
<button id="usb_button_combined" onclick="connectUSB()">
19-
<i class="fa fa-usb"></i>
20-
<span class="protocol-tooltip">USB Connection</span>
21-
</button>
22-
<button id="wifi_button_combined" onclick="connectWiFi()">
23-
<i class="fa fa-wifi"></i>
24-
<span class="protocol-tooltip">WiFi Connection</span>
25-
</button>
26-
<button id="ble_button_combined" onclick="showBLEPopup()">
27-
<i class="fa fa-bluetooth"></i>
28-
<span class="protocol-tooltip">Bluetooth Connection</span>
29-
</button>
16+
<div class="top-controls">
17+
<div class="protocol-container">
18+
<div class="protocol-buttons-combined" id="protocolButtonsContainer">
19+
<div class="protocol-button-group" id="protocolButtonsGroup">
20+
<button id="usb_button_combined" onclick="connectUSB()">
21+
<i class="fa fa-usb"></i>
22+
<span class="protocol-tooltip">USB Connection</span>
23+
</button>
24+
<button id="wifi_button_combined" onclick="connectWiFi()">
25+
<i class="fa fa-wifi"></i>
26+
<span class="protocol-tooltip">WiFi Connection</span>
27+
</button>
28+
<button id="ble_button_combined" onclick="showBLEPopup()">
29+
<i class="fa fa-bluetooth"></i>
30+
<span class="protocol-tooltip">Bluetooth Connection</span>
31+
</button>
32+
</div>
33+
<button id="connect_button" onclick="connectDefault()">Connect</button>
34+
</div>
35+
<div class="disconnect-button" id="disconnectButtonContainer" style="display: none;">
36+
<button id="disconnect_button" onclick="disconnectAll()">
37+
<i class="fa fa-times"></i>
38+
<span>Disconnect</span>
39+
</button>
40+
</div>
41+
</div>
42+
43+
<div class="csv-recording-box" id="csvRecordingBox">
44+
<div class="csv-filename-container">
45+
<input type="text" id="csvFilenameInput" class="csv-filename-input" value="ChordsPy.csv" placeholder="Filename.csv">
46+
</div>
47+
<div class="csv-button-container">
48+
<button class="csv-record-btn" id="csvRecordBtn" onclick="toggleCSVRecording()">Save as CSV</button>
49+
</div>
3050
</div>
31-
</div>
32-
33-
<div class="disconnect-button" id="disconnectButtonContainer" style="display: none;">
34-
<button id="disconnect_button" onclick="disconnectAll()">
35-
<i class="fa fa-times"></i>
36-
<span>Disconnect</span>
37-
</button>
3851
</div>
3952

4053
<div id="connectionStatus"></div>
4154

42-
<div class="csv-toggle">
43-
<label>
44-
<input type="checkbox" id="csvToggle"> Enable CSV Logging
45-
</label>
46-
</div>
47-
4855
<div class="app-buttons">
4956
<div class="app-row">
5057
<button class="app-button" data-app-name="ECG with Heart Rate" disabled>
@@ -133,11 +140,34 @@ <h3>Select BLE Device</h3>
133140
});
134141
});
135142

136-
function setCSVToggleState(enabled) {
137-
const csvToggle = document.getElementById('csvToggle');
138-
csvToggle.disabled = !enabled;
139-
csvToggle.parentElement.style.opacity = enabled ? '1' : '0.6';
140-
csvToggle.parentElement.style.cursor = enabled ? 'pointer' : 'not-allowed';
143+
// function setCSVToggleState(enabled) {
144+
// const csvToggle = document.getElementById('csvToggle');
145+
// csvToggle.disabled = !enabled;
146+
// csvToggle.parentElement.style.opacity = enabled ? '1' : '0.6';
147+
// csvToggle.parentElement.style.cursor = enabled ? 'pointer' : 'not-allowed';
148+
// }
149+
150+
function toggleCSVRecording() {
151+
const recordBtn = document.getElementById('csvRecordBtn');
152+
const isRecording = recordBtn.classList.contains('recording');
153+
const filenameInput = document.getElementById('csvFilenameInput');
154+
155+
if (isRecording) {
156+
// Stop recording
157+
recordBtn.classList.remove('recording');
158+
recordBtn.textContent = 'Save as CSV';
159+
// Add your stop recording logic here
160+
} else {
161+
// Start recording
162+
if (filenameInput.value.trim() === '') {
163+
alert('Please enter a valid filename');
164+
return;
165+
}
166+
167+
recordBtn.classList.add('recording');
168+
recordBtn.textContent = 'Stop Recording';
169+
// Add your start recording logic here
170+
}
141171
}
142172

143173
function disableAllAppButtons() {
@@ -517,6 +547,11 @@ <h3>Select BLE Device</h3>
517547
disconnectBtn.disabled = true;
518548
statusDiv.textContent = 'Disconnecting and cleaning up...';
519549
statusDiv.className = 'scanning-status';
550+
const recordBtn = document.getElementById('csvRecordBtn');
551+
if (recordBtn.classList.contains('recording')) {
552+
recordBtn.classList.remove('recording');
553+
recordBtn.textContent = 'Save as CSV';
554+
}
520555

521556
try {
522557
// Stop all running applications

0 commit comments

Comments
 (0)