Feat: Parsing decoded values for survey mode

This commit is contained in:
Halcy0nic
2024-01-09 18:04:36 -07:00
parent f4593c5fdd
commit f370754d17
4 changed files with 126 additions and 71 deletions

20
app.py
View File

@@ -22,13 +22,6 @@ global_dataframe = pd.DataFrame(columns=['Device Name', 'Frequency', 'Signal Str
frequency = lambda port: {'port1': 433, 'port2': 868,'port3': 915}.get(port, None)
surveydata = {}
import re
import time
import re
import time
def read_serial_data(port, ser, buffer):
global surveydata
rssi_pattern = r"RSSI: (-?\d+)"
@@ -53,8 +46,16 @@ def read_serial_data(port, ser, buffer):
# Update dictionary only if both RSSI and Decoded Value are found
if rssi is not None and decoded_value is not None:
key = f'Raw LoRa Device {frequency(port)} MHz'
surveydata[key] = [frequency(port), rssi, decoded_value]
freq = frequency(port)
key = f'Raw LoRa Device {freq} MHz'
# Initialize the list for the frequency if not already done
if key not in surveydata:
surveydata[key] = []
# Append the new values to the list for this frequency
surveydata[key].append([freq, rssi, decoded_value])
# Reset rssi and decoded_value for next packet
rssi = None
decoded_value = None
@@ -77,6 +78,7 @@ def read_serial_data(port, ser, buffer):
def connect_serial(port,frequency):
global ser1
global ser2

View File

@@ -11066,10 +11066,25 @@ section.resume-section .resume-section-content {
/* Styling for the table */
.scrollable-table {
max-height: 300px;
overflow-y: auto;
display: block;
width: 100%;
overflow-y: auto; /* Enable vertical scrolling */
max-height: 500px; /* Adjust the height as needed */
}
#data-table {
width: 100%;
font-size: 1.1em;
border-collapse: collapse; /* Optional: for border styling */
}
#data-table thead th {
position: sticky;
top: 0;
background-color: #fff; /* Or any other background color */
}
#data-table th, #data-table td {
padding: 10px;
border: 1px solid #ddd; /* Optional: for border styling */
}
table {
width: 100%;
border-collapse: collapse;

View File

@@ -56,16 +56,17 @@
<th>Device Name</th>
<th>Frequency</th>
<th>Signal Strength</th>
<th>Recovered Plaintext</th>
<th>Decoded Values</th>
</tr>
</thead>
<tbody>
<!-- Rows will be inserted here -->
</tbody>
</table>
</table>
</div>
<script>
let expandedRows = {};
function updateTableData() {
fetch('/get_table_data')
.then(response => response.json())
@@ -73,25 +74,65 @@
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
tableBody.innerHTML = ''; // Clear existing table rows
for (let key in data) {
let row = tableBody.insertRow();
let cell1 = row.insertCell();
let cell2 = row.insertCell();
let cell3 = row.insertCell();
let cell4 = row.insertCell();
let mainRow = tableBody.insertRow();
let cell1 = mainRow.insertCell();
let cell2 = mainRow.insertCell();
let cell3 = mainRow.insertCell();
let cell4 = mainRow.insertCell();
cell1.innerHTML = key;
cell2.innerHTML = data[key][0];
cell3.innerHTML = data[key][1];
cell4.innerHTML = data[key][2];
cell2.innerHTML = data[key][0][0]; // Frequency (from the first entry)
cell3.innerHTML = data[key][0][1]; // Signal Strength (from the first entry)
// Create a Bootstrap styled button
let expandBtn = document.createElement('button');
expandBtn.classList.add('btn', 'btn-secondary', 'btn-sm'); // Bootstrap button classes
expandBtn.innerHTML = 'Show Values';
expandBtn.onclick = function() {
let deviceKey = key; // Capture the current device key
let isExpanded = !expandedRows[deviceKey]; // Toggle the expanded state
// Show or hide the expandable rows
let nextRow = mainRow.nextSibling;
while (nextRow && nextRow.classList.contains('expandable-row')) {
nextRow.style.display = isExpanded ? 'table-row' : 'none';
nextRow = nextRow.nextSibling;
}
// Update the button text and expandedRows object
expandBtn.innerHTML = isExpanded ? 'Hide Values' : 'Show Values';
expandedRows[deviceKey] = isExpanded;
};
cell4.appendChild(expandBtn);
cell4.style.textAlign = 'center'; // Center align the button
// Add expandable rows for each decoded value
data[key].forEach(entry => {
let expandableRow = tableBody.insertRow();
expandableRow.classList.add('expandable-row');
expandableRow.style.display = 'none'; // Initially hidden
let cell = expandableRow.insertCell();
cell.colSpan = "4";
cell.innerHTML = `Decoded Value: ${entry[2]}`;
});
if (expandedRows[key]) {
let nextRow = mainRow.nextSibling;
while (nextRow && nextRow.classList.contains('expandable-row')) {
nextRow.style.display = 'table-row';
nextRow = nextRow.nextSibling;
}
}
}
})
.catch(error => console.error('Error:', error));
}
// Initial update of the table
updateTableData();
// Periodically update the table every 30 seconds (30000 milliseconds)
setInterval(updateTableData, 30000);
// Initial update of the table
updateTableData();
// Periodically update the table every 30 seconds (30000 milliseconds)
setInterval(updateTableData, 30000);
</script>
</section>

View File

@@ -71,9 +71,7 @@
<br>
<!-- Add a Clear Selection button with a CSS class -->
<button id="clear-selection-button" class="center-button" style="display: none;">Clear Filter</button>
<br>
<div id="selected-data"></div>
<br>
<script>
let selectedDeviceName = null; // Global variable to store the selected device name
@@ -83,7 +81,6 @@
fetch('/get_table_data')
.then(response => response.json())
.then(data => {
dataCache = data; // Update the data cache
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
tableBody.innerHTML = ''; // Clear existing table rows
@@ -91,32 +88,22 @@
for (let key in data) {
let row = tableBody.insertRow();
row.addEventListener('click', function () {
// Reset all rows
const allRows = tableBody.getElementsByTagName('tr');
for (let i = 0; i < allRows.length; i++) {
allRows[i].classList.remove('hidden-row', 'selected-row');
}
// Highlight and show the clicked row
row.classList.add('selected-row');
// Display the "Clear Filter" button
const clearButton = document.getElementById('clear-selection-button');
clearButton.style.display = 'block';
selectedDeviceName = key; // Update the global variable with the selected device name
updateSelectedDataDisplay(); // Update the selected data display
row.addEventListener('click', function() {
// Handle row click event for selection
handleRowSelection(row, key);
});
let cell1 = row.insertCell();
let cell2 = row.insertCell();
let cell3 = row.insertCell();
cell1.innerHTML = key;
cell2.innerHTML = data[key][0];
cell3.innerHTML = data[key][1];
cell1.innerHTML = key; // Device Name
// Assuming that the latest data is the most relevant
let latestData = data[key][data[key].length - 1];
cell2.innerHTML = latestData[0]; // Frequency
cell3.innerHTML = latestData[1]; // Signal Strength
// Apply hiding logic
// Apply hiding logic based on selection
if (isRowSelected) {
if (key !== selectedDeviceName) {
row.classList.add('hidden-row');
@@ -131,22 +118,36 @@
.catch(error => console.error('Error:', error));
}
function updateSelectedDataDisplay() {
const selectedDataDiv = document.getElementById('selected-data');
if (selectedDeviceName !== null && selectedDeviceName in dataCache) {
const frequency = dataCache[selectedDeviceName][0];
const signalStrength = dataCache[selectedDeviceName][1];
selectedDataDiv.innerHTML = `
Device Name: ${selectedDeviceName}<br>
Frequency: ${frequency}<br>
Signal Strength: ${signalStrength}<br>
`;
} else {
selectedDataDiv.innerHTML = '';
function handleRowSelection(row, key) {
// Reset all rows
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
const allRows = tableBody.getElementsByTagName('tr');
for (let i = 0; i < allRows.length; i++) {
allRows[i].classList.remove('hidden-row', 'selected-row');
}
// Highlight and show the clicked row
row.classList.add('selected-row');
// Display the "Clear Filter" button
const clearButton = document.getElementById('clear-selection-button');
clearButton.style.display = 'block';
selectedDeviceName = key; // Update the global variable with the selected device name
updateSelectedDataDisplay(); // Update the selected data display
}
// ... rest of your existing code for updateSelectedDataDisplay, clearButton event listener, etc.
// Initial update of the table
updateTableData();
// Periodically update the table every second
setInterval(updateTableData, 1000);
const clearButton = document.getElementById('clear-selection-button');
clearButton.addEventListener('click', function () {
@@ -169,11 +170,7 @@
updateSelectedDataDisplay(); // Clear the selected data display
});
// Initial update of the table
updateTableData();
// Periodically update the table every second
setInterval(updateTableData, 1000);
</script>