PaulVua/nebuleair_pro_4g
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Add Screen control features: Screen tab in sidebar, Kivy script, and backend logic

Browse Source
This commit is contained in:
PaulVua
2026-02-17 12:19:05 +01:00
parent 8106af624f
commit 3e5ee9c77e
6 changed files with 627 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
html/assets/js/topbar-logo.js
View File

@@ -1,19 +1,57 @@
// Switch topbar logo based on device_type config
// Uses MutationObserver to detect when topbar is dynamically loaded /**
(function() { * Global configuration handler for UI elements
var observer = new MutationObserver(function() { * - Updates Topbar Logo based on device type
var logo = document.getElementById('topbar-logo'); * - Shows/Hides "Screen" sidebar tab based on device type
if (logo) { */
observer.disconnect(); document.addEventListener('DOMContentLoaded', () => {
fetch('launcher.php?type=get_config_sqlite') let config = null;
.then(function(r) { return r.json(); })
.then(function(config) { // Fetch config once
if (config.device_type === 'moduleair_pro') { fetch('launcher.php?type=get_config_sqlite')
logo.src = 'assets/img/logoModuleAir.png'; .then(response => response.json())
} .then(data => {
}) config = data;
.catch(function() {}); applyConfig(); // Apply immediately if elements are ready
} })
.catch(error => console.error('Error loading config:', error));
// Observe DOM changes to handle dynamically loaded elements (sidebar, topbar)
const observer = new MutationObserver(() => {
if (config) applyConfig();
}); });
observer.observe(document.body || document.documentElement, { childList: true, subtree: true });
})(); observer.observe(document.body, { childList: true, subtree: true });
function applyConfig() {
if (!config) return;
const isModuleAirPro = (config.device_type === 'moduleair_pro' || config.type === 'moduleair_pro');
// 1. Topbar Logo Logic
const logo = document.getElementById('topbar-logo');
if (logo && isModuleAirPro) {
// prevent unnecessary re-assignments
if (!logo.src.includes('logoModuleAir.png')) {
logo.src = 'assets/img/logoModuleAir.png';
}
}
// 2. Sidebar Screen Tab Logic
const navScreen = document.getElementById('nav-screen');
if (navScreen) {
if (isModuleAirPro) {
// Ensure it's visible (bootstrap nav-link usually block or flex)
// Using removeProperty to let CSS/Bootstrap handle it, or force display
if (navScreen.style.display === 'none') {
navScreen.style.display = 'flex';
}
} else {
// Hide if not pro
if (navScreen.style.display !== 'none') {
navScreen.style.display = 'none';
}
}
}
}
});

697
html/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,44 +12,52 @@
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
#sidebar a.nav-link { #sidebar a.nav-link {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
#sidebar a.nav-link:hover { #sidebar a.nav-link:hover {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
#sidebar a.nav-link svg { #sidebar a.nav-link svg {
margin-right: 8px; /* Add spacing between icons and text */ margin-right: 8px;
/* Add spacing between icons and text */
} }
#sidebar { #sidebar {
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }
.offcanvas-backdrop { .offcanvas-backdrop {
z-index: 1040; z-index: 1040;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Topbar --> <!-- Topbar -->
<span id="topbar"></span> <span id="topbar"></span>
<!-- Sidebar Offcanvas for Mobile --> <!-- Sidebar Offcanvas for Mobile -->
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel"> <div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas"
aria-labelledby="sidebarOffcanvasLabel">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5> <h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body" id="sidebar_mobile"> <div class="offcanvas-body" id="sidebar_mobile">
</div> </div>
</div> </div>
<div class="container-fluid mt-5"> <div class="container-fluid mt-5">
<div class="row"> <div class="row">
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar"> <aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
</aside> </aside>
<!-- Main content --> <!-- Main content -->
<main class="col-md-9 ms-sm-auto col-lg-10 offset-md-3 offset-lg-2 px-md-4"> <main class="col-md-9 ms-sm-auto col-lg-10 offset-md-3 offset-lg-2 px-md-4">
<h1 class="mt-4" data-i18n="home.title">Votre capteur</h1> <h1 class="mt-4" data-i18n="home.title">Votre capteur</h1>
@@ -58,33 +67,36 @@
<!-- Card NPM values --> <!-- Card NPM values -->
<div class="col-sm-4 mt-2"> <div class="col-sm-4 mt-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title" data-i18n="home.pmMeasures">Mesures PM</h5> <h5 class="card-title" data-i18n="home.pmMeasures">Mesures PM</h5>
<canvas id="sensorPMChart" style="width: 100%; max-width: 600px; height: 200px;"></canvas> <canvas id="sensorPMChart" style="width: 100%; max-width: 600px; height: 200px;"></canvas>
</div>
</div> </div>
</div> </div>
</div>
<!-- Card Linux Stats --> <!-- Card Linux Stats -->
<div class="col-sm-4 mt-2"> <div class="col-sm-4 mt-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title" data-i18n="home.linuxStats">Statistiques Linux</h5> <h5 class="card-title" data-i18n="home.linuxStats">Statistiques Linux</h5>
<p class="card-text"><span data-i18n="home.diskUsage">Utilisation du disque (taille totale</span> <span id="disk_size"></span> Gb) </p> <p class="card-text"><span data-i18n="home.diskUsage">Utilisation du disque (taille totale</span> <span
id="disk_size"></span> Gb) </p>
<div id="disk_space"></div> <div id="disk_space"></div>
<p class="card-text"><span data-i18n="home.memoryUsage">Utilisation de la mémoire (taille totale</span> <span id="memory_size"></span> Mb) </p> <p class="card-text"><span data-i18n="home.memoryUsage">Utilisation de la mémoire (taille totale</span>
<span id="memory_size"></span> Mb) </p>
<div id="memory_space"></div> <div id="memory_space"></div>
<p class="card-text"><span data-i18n="home.databaseSize">Taille de la base de données:</span> <span id="database_size"></span> </p> <p class="card-text"><span data-i18n="home.databaseSize">Taille de la base de données:</span> <span
id="database_size"></span> </p>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- </div>
<!--
<div class="row mb-3"> <div class="row mb-3">
<div class="col-sm-4 mt-2"> <div class="col-sm-4 mt-2">
@@ -102,365 +114,372 @@
</div> </div>
</div> </div>
<!-- JAVASCRIPT --> <!-- JAVASCRIPT -->
<!-- Link Ajax locally --> <!-- Link Ajax locally -->
<script src="assets/jquery/jquery-3.7.1.min.js"></script> <script src="assets/jquery/jquery-3.7.1.min.js"></script>
<!-- Link Bootstrap JS and Popper.js locally --> <!-- Link Bootstrap JS and Popper.js locally -->
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system --> <!-- i18n translation system -->
<script src="assets/js/i18n.js"></script> <script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script> <script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' }, { id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' }, { id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' } { id: 'sidebar_mobile', file: 'sidebar.html' }
]; ];
elementsToLoad.forEach(({ id, file }) => { elementsToLoad.forEach(({ id, file }) => {
fetch(file) fetch(file)
.then(response => response.text()) .then(response => response.text())
.then(data => { .then(data => {
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.innerHTML = data; element.innerHTML = data;
} }
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(error => console.error(`Error loading ${file}:`, error));
});
}); });
});
window.onload = function () {
window.onload = function() { //NEW way to get data from SQLITE
$.ajax({
url: 'launcher.php?type=get_config_sqlite',
dataType: 'json',
//dataType: 'json', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function (response) {
console.log("Getting SQLite config table:");
console.log(response);
//NEW way to get data from SQLITE //get device Name (for the side bar)
$.ajax({ const deviceName = response.deviceName;
url: 'launcher.php?type=get_config_sqlite', const elements = document.querySelectorAll('.sideBar_sensorName');
dataType:'json', elements.forEach((element) => {
//dataType: 'json', // Specify that you expect a JSON response element.innerText = deviceName;
method: 'GET', // Use GET or POST depending on your needs });
success: function(response) {
console.log("Getting SQLite config table:");
console.log(response);
//get device Name (for the side bar) //device name html page title
const deviceName = response.deviceName; if (response.deviceName) {
const elements = document.querySelectorAll('.sideBar_sensorName'); document.title = response.deviceName;
elements.forEach((element) => { }
element.innerText = deviceName;
});
//device name html page title // Check for device type to show Screen tab
if (response.deviceName) { // Assuming the key in config is 'device_type' or 'type'
document.title = response.deviceName; if (response.device_type === 'moduleair_pro' || response.type === 'moduleair_pro') {
} $('#nav-screen').show();
}
},
error: function(xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
}); //end ajax
/* OLD way of getting config data },
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json' error: function (xhr, status, error) {
.then(response => response.json()) // Parse response as JSON console.error('AJAX request failed:', status, error);
.then(data => { }
console.log("Getting config file (onload)"); }); //end ajax
//get device ID
const deviceID = data.deviceID.trim().toUpperCase();
//document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
//get device Name
const deviceName = data.deviceName;
const elements = document.querySelectorAll('.sideBar_sensorName');
elements.forEach((element) => {
element.innerText = deviceName;
});
//end fetch config
})
.catch(error => console.error('Error loading config.json:', error));
//end windows on load
*/
//get local RTC
$.ajax({
url: 'launcher.php?type=RTC_time',
dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function(response) {
console.log("Local RTC: " + response);
const RTC_Element = document.getElementById("RTC_time");
RTC_Element.textContent = response;
},
error: function(xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
});
//get database size
$.ajax({
url: 'launcher.php?type=database_size',
dataType: 'json', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function(response) {
console.log(response);
if (response.size_megabytes !== undefined) {
// Extract and format the size in MB
const databaseSizeMB = response.size_megabytes + " MB";
// Update the HTML element with the database size
const databaseSizeElement = document.getElementById("database_size");
databaseSizeElement.textContent = databaseSizeMB;
console.log("Database size:", databaseSizeMB);
} else if (response.error) {
// Handle errors from the PHP response
console.error("Error from server:", response.error);
}
},
error: function(xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
});
/* OLD way of getting config data
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json'
.then(response => response.json()) // Parse response as JSON
.then(data => {
console.log("Getting config file (onload)");
//get device ID
const deviceID = data.deviceID.trim().toUpperCase();
//document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
//get disk free space //get device Name
$.ajax({ const deviceName = data.deviceName;
url: 'launcher.php?type=linux_disk',
dataType: 'text', // Specify that you expect a JSON response const elements = document.querySelectorAll('.sideBar_sensorName');
method: 'GET', // Use GET or POST depending on your needs elements.forEach((element) => {
success: function(response) { element.innerText = deviceName;
console.log("Linux disk space: " + response); });
//1. disk size
const disk_size = document.getElementById("disk_size"); //end fetch config
const firstNumber = response.match(/(?<!\w)(\d+(\.\d+)?)(?=\D)/)[1]; })
.catch(error => console.error('Error loading config.json:', error));
disk_size.innerHTML = firstNumber; //end windows on load
//2. Free space */
const match = response.match(/(\d+)%/); //get local RTC
const diskSpace = document.getElementById("disk_space"); $.ajax({
const percentage = match[1]; url: 'launcher.php?type=RTC_time',
dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function (response) {
console.log("Local RTC: " + response);
const RTC_Element = document.getElementById("RTC_time");
RTC_Element.textContent = response;
},
error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
});
// Create the outer div with class and attributes //get database size
const progressDiv = document.createElement('div'); $.ajax({
progressDiv.className = 'progress mb-3'; url: 'launcher.php?type=database_size',
progressDiv.setAttribute('role', 'progressbar'); dataType: 'json', // Specify that you expect a JSON response
progressDiv.setAttribute('aria-label', 'Example with label'); method: 'GET', // Use GET or POST depending on your needs
progressDiv.setAttribute('aria-valuenow', percentage); success: function (response) {
progressDiv.setAttribute('aria-valuemin', 0); console.log(response);
progressDiv.setAttribute('aria-valuemax', 100);
// Create the inner progress bar div if (response.size_megabytes !== undefined) {
const progressBarDiv = document.createElement('div'); // Extract and format the size in MB
progressBarDiv.className = 'progress-bar'; const databaseSizeMB = response.size_megabytes + " MB";
progressBarDiv.style.width = `${percentage}%`; // Set the width dynamically
progressBarDiv.textContent = `${percentage}%`; // Set the text dynamically
// Append the progress bar to the outer div // Update the HTML element with the database size
progressDiv.appendChild(progressBarDiv); const databaseSizeElement = document.getElementById("database_size");
databaseSizeElement.textContent = databaseSizeMB;
// Append the entire progress bar to the body (or any other container) console.log("Database size:", databaseSizeMB);
diskSpace.appendChild(progressDiv); } else if (response.error) {
// Handle errors from the PHP response
}, console.error("Error from server:", response.error);
error: function(xhr, status, error) { }
console.error('AJAX request failed:', status, error); },
} error: function (xhr, status, error) {
}); console.error('AJAX request failed:', status, error);
}
//get memory free space });
$.ajax({
url: 'launcher.php?type=linux_memory',
dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function(response) {
console.log("Linux memory space: " + response);
//1. memory size
const memory_size = document.getElementById("memory_size");
const memorySpace = document.getElementById("memory_space");
const memLine = response.match(/Mem:\s+(\d+\.?\d*)Mi\s+(\d+\.?\d*)Mi/); //get disk free space
const totalMemory = parseFloat(memLine[1]); // Total memory in MiB $.ajax({
const usedMemory = parseFloat(memLine[2]); // Used memory in MiB url: 'launcher.php?type=linux_disk',
dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function (response) {
console.log("Linux disk space: " + response);
//1. disk size
const disk_size = document.getElementById("disk_size");
const firstNumber = response.match(/(?<!\w)(\d+(\.\d+)?)(?=\D)/)[1];
// Calculate the percentage disk_size.innerHTML = firstNumber;
const percentageUsed = ((usedMemory / totalMemory) * 100).toFixed(2); //2. Free space
const match = response.match(/(\d+)%/);
const diskSpace = document.getElementById("disk_space");
const percentage = match[1];
console.log(totalMemory); // Create the outer div with class and attributes
const progressDiv = document.createElement('div');
memory_size.innerHTML = totalMemory; progressDiv.className = 'progress mb-3';
progressDiv.setAttribute('role', 'progressbar');
progressDiv.setAttribute('aria-label', 'Example with label');
progressDiv.setAttribute('aria-valuenow', percentage);
progressDiv.setAttribute('aria-valuemin', 0);
progressDiv.setAttribute('aria-valuemax', 100);
// Create the inner progress bar div
const progressBarDiv = document.createElement('div');
progressBarDiv.className = 'progress-bar';
progressBarDiv.style.width = `${percentage}%`; // Set the width dynamically
progressBarDiv.textContent = `${percentage}%`; // Set the text dynamically
// Append the progress bar to the outer div
progressDiv.appendChild(progressBarDiv);
// Append the entire progress bar to the body (or any other container)
diskSpace.appendChild(progressDiv);
},
error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
});
//get memory free space
$.ajax({
url: 'launcher.php?type=linux_memory',
dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function (response) {
console.log("Linux memory space: " + response);
//1. memory size
const memory_size = document.getElementById("memory_size");
const memorySpace = document.getElementById("memory_space");
console.log(usedMemory); const memLine = response.match(/Mem:\s+(\d+\.?\d*)Mi\s+(\d+\.?\d*)Mi/);
console.log(percentageUsed); const totalMemory = parseFloat(memLine[1]); // Total memory in MiB
const usedMemory = parseFloat(memLine[2]); // Used memory in MiB
// Create the outer div with class and attributes // Calculate the percentage
const progressDiv = document.createElement('div'); const percentageUsed = ((usedMemory / totalMemory) * 100).toFixed(2);
progressDiv.className = 'progress mb-3';
progressDiv.setAttribute('role', 'progressbar');
progressDiv.setAttribute('aria-label', 'Example with label');
progressDiv.setAttribute('aria-valuenow', percentageUsed);
progressDiv.setAttribute('aria-valuemin', 0);
progressDiv.setAttribute('aria-valuemax', 100);
// Create the inner progress bar div console.log(totalMemory);
const progressBarDiv = document.createElement('div');
progressBarDiv.className = 'progress-bar';
progressBarDiv.style.width = `${percentageUsed}%`; // Set the width dynamically
progressBarDiv.textContent = `${percentageUsed}%`; // Set the text dynamically
// Append the progress bar to the outer div memory_size.innerHTML = totalMemory;
progressDiv.appendChild(progressBarDiv);
// Append the entire progress bar to the body (or any other container)
memorySpace.appendChild(progressDiv);
},
error: function(xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
});
// GET NPM SQLite values console.log(usedMemory);
$.ajax({ console.log(percentageUsed);
url: 'launcher.php?type=get_npm_sqlite_data',
dataType: 'json', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function(response) {
console.log(response);
updatePMChart(response);
},
error: function(xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
});
let chart; // Store the Chart.js instance globally // Create the outer div with class and attributes
const progressDiv = document.createElement('div');
progressDiv.className = 'progress mb-3';
progressDiv.setAttribute('role', 'progressbar');
progressDiv.setAttribute('aria-label', 'Example with label');
progressDiv.setAttribute('aria-valuenow', percentageUsed);
progressDiv.setAttribute('aria-valuemin', 0);
progressDiv.setAttribute('aria-valuemax', 100);
function updatePMChart(data) { // Create the inner progress bar div
const labels = data.map(d => d.timestamp); const progressBarDiv = document.createElement('div');
const PM1 = data.map(d => d.PM1); progressBarDiv.className = 'progress-bar';
const PM25 = data.map(d => d.PM25); progressBarDiv.style.width = `${percentageUsed}%`; // Set the width dynamically
const PM10 = data.map(d => d.PM10); progressBarDiv.textContent = `${percentageUsed}%`; // Set the text dynamically
const ctx = document.getElementById('sensorPMChart').getContext('2d'); // Append the progress bar to the outer div
progressDiv.appendChild(progressBarDiv);
if (!chart) { // Append the entire progress bar to the body (or any other container)
chart = new Chart(ctx, { memorySpace.appendChild(progressDiv);
type: 'line',
data: { },
labels: labels, error: function (xhr, status, error) {
datasets: [ console.error('AJAX request failed:', status, error);
{ }
label: "PM1", });
data: PM1,
borderColor: "rgba(0, 51, 153, 1)",
backgroundColor: "rgba(0, 51, 153, 0.2)", // Very light blue background // GET NPM SQLite values
fill: true, $.ajax({
tension: 0.4, // Smooth curves url: 'launcher.php?type=get_npm_sqlite_data',
pointRadius: 2, // Larger points dataType: 'json', // Specify that you expect a JSON response
pointHoverRadius: 6 // Bigger hover points method: 'GET', // Use GET or POST depending on your needs
}, success: function (response) {
{ console.log(response);
label: "PM2.5", updatePMChart(response);
data: PM25, },
borderColor: "rgba(30, 144, 255, 1)", error: function (xhr, status, error) {
backgroundColor: "rgba(30, 144, 255, 0.2)", // Very light medium blue background console.error('AJAX request failed:', status, error);
fill: true, }
tension: 0.4, });
pointRadius: 2,
pointHoverRadius: 6 let chart; // Store the Chart.js instance globally
},
{ function updatePMChart(data) {
label: "PM10", const labels = data.map(d => d.timestamp);
data: PM10, const PM1 = data.map(d => d.PM1);
borderColor: "rgba(135, 206, 250, 1)", const PM25 = data.map(d => d.PM25);
backgroundColor: "rgba(135, 206, 250, 0.2)", // Very light blue background const PM10 = data.map(d => d.PM10);
fill: true,
tension: 0.4, const ctx = document.getElementById('sensorPMChart').getContext('2d');
pointRadius: 2,
pointHoverRadius: 6 if (!chart) {
} chart = new Chart(ctx, {
] type: 'line',
data: {
labels: labels,
datasets: [
{
label: "PM1",
data: PM1,
borderColor: "rgba(0, 51, 153, 1)",
backgroundColor: "rgba(0, 51, 153, 0.2)", // Very light blue background
fill: true,
tension: 0.4, // Smooth curves
pointRadius: 2, // Larger points
pointHoverRadius: 6 // Bigger hover points
},
{
label: "PM2.5",
data: PM25,
borderColor: "rgba(30, 144, 255, 1)",
backgroundColor: "rgba(30, 144, 255, 0.2)", // Very light medium blue background
fill: true,
tension: 0.4,
pointRadius: 2,
pointHoverRadius: 6
},
{
label: "PM10",
data: PM10,
borderColor: "rgba(135, 206, 250, 1)",
backgroundColor: "rgba(135, 206, 250, 0.2)", // Very light blue background
fill: true,
tension: 0.4,
pointRadius: 2,
pointHoverRadius: 6
}
]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
position: 'top'
}
},
scales: {
x: {
title: {
display: true,
text: 'Time (UTC)',
font: {
size: 16,
family: 'Arial, sans-serif'
}, },
options: { color: '#4A4A4A'
responsive: true, },
maintainAspectRatio: true, ticks: {
plugins: { autoSkip: true,
legend: { maxTicksLimit: 5,
position: 'top' color: '#4A4A4A',
} callback: function (value, index) {
}, // Access the correct label from the `labels` array
scales: { const label = labels[index]; // Use the original `labels` array
x: { if (label && typeof label === 'string' && label.includes(' ')) {
title: { return label.split(' ')[1].slice(0, 5); // Extract "HH:MM"
display: true, }
text: 'Time (UTC)', return value; // Fallback for invalid labels
font: {
size: 16,
family: 'Arial, sans-serif'
},
color: '#4A4A4A'
},
ticks: {
autoSkip: true,
maxTicksLimit: 5,
color: '#4A4A4A',
callback: function(value, index) {
// Access the correct label from the `labels` array
const label = labels[index]; // Use the original `labels` array
if (label && typeof label === 'string' && label.includes(' ')) {
return label.split(' ')[1].slice(0, 5); // Extract "HH:MM"
}
return value; // Fallback for invalid labels
}
},
grid: {
display: false // Remove gridlines for a cleaner look
}
},
y: {
title: {
display: true,
text: 'Values (µg/m³)',
font: {
size: 16,
family: 'Arial, sans-serif'
},
color: '#4A4A4A'
}
}
} }
},
grid: {
display: false // Remove gridlines for a cleaner look
}
},
y: {
title: {
display: true,
text: 'Values (µg/m³)',
font: {
size: 16,
family: 'Arial, sans-serif'
},
color: '#4A4A4A'
}
}
}
}
});
} else {
chart.data.labels = labels;
chart.data.datasets[0].data = PM1;
chart.data.datasets[1].data = PM25;
chart.data.datasets[2].data = PM10;
chart.update();
} }
} });
} else {
chart.data.labels = labels;
chart.data.datasets[0].data = PM1;
chart.data.datasets[1].data = PM25;
chart.data.datasets[2].data = PM10;
chart.update();
}
} }
</script>
}
</script>
</body> </body>
</html>
</html>

14
html/launcher.php
View File

@@ -1751,3 +1751,17 @@ if ($type == "set_cpu_power_mode") {
]); ]);
} }
} }
if ($type == "screen_control") {
$action = $_GET['action'];
if ($action == "start") {
// Run as background process
$command = 'export DISPLAY=:0 && nohup /usr/bin/python3 /home/aircarto/nebuleair_pro_4g/screen_control/screen.py > /dev/null 2>&1 &';
shell_exec($command);
echo "Started";
} elseif ($action == "stop") {
$command = 'sudo pkill -f "screen_control/screen.py"';
shell_exec($command);
echo "Stopped";
}
}

173
html/screen.html Normal file
View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Control</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<style>
body {
overflow-x: hidden;
}
#sidebar a.nav-link {
position: relative;
display: flex;
align-items: center;
}
#sidebar a.nav-link:hover {
background-color: rgba(0, 0, 0, 0.5);
}
#sidebar a.nav-link svg {
margin-right: 8px;
/* Add spacing between icons and text */
}
#sidebar {
transition: transform 0.3s ease-in-out;
}
.offcanvas-backdrop {
z-index: 1040;
}
</style>
</head>
<body>
<!-- Topbar -->
<span id="topbar"></span>
<!-- Sidebar Offcanvas for Mobile -->
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas"
aria-labelledby="sidebarOffcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body" id="sidebar_mobile">
</div>
</div>
<div class="container-fluid mt-5">
<div class="row">
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
</aside>
<!-- Main content -->
<main class="col-md-9 ms-sm-auto col-lg-10 offset-md-3 offset-lg-2 px-md-4">
<h1 class="mt-4" data-i18n="screen.title">Contrôle de l'écran</h1>
<p data-i18n="screen.description">Gérer l'affichage sur l'écran HDMI.</p>
<div class="row mt-4">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Actions</h5>
<p class="card-text">Démarrer ou arrêter l'application d'affichage sur l'écran HDMI.</p>
<button class="btn btn-success m-2" onclick="controlScreen('start')">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-play-fill" viewBox="0 0 16 16">
<path
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
</svg>
Démarrer
</button>
<button class="btn btn-danger m-2" onclick="controlScreen('stop')">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-stop-fill" viewBox="0 0 16 16">
<path
d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5z" />
</svg>
Arrêter
</button>
</div>
</div>
</div>
</div>
<div id="status-message" class="mt-3 col-md-6"></div>
</main>
</div>
</div>
<!-- JAVASCRIPT -->
<!-- Link Ajax locally -->
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
<!-- Link Bootstrap JS and Popper.js locally -->
<script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system -->
<script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
elementsToLoad.forEach(({ id, file }) => {
fetch(file)
.then(response => response.text())
.then(data => {
const element = document.getElementById(id);
if (element) {
element.innerHTML = data;
// Ensure the screen tab is visible here as well if we are on this page,
// though index.html handles it globally, sidebar load might reset it.
// Ideally sidebar logic should be consistent.
// For now, if we are ON screen.html, we should show the nav item.
if (id.includes('sidebar')) {
setTimeout(() => {
const navScreen = element.querySelector('#nav-screen');
if (navScreen) navScreen.style.display = 'flex'; // or block
}, 100);
}
}
})
.catch(error => console.error(`Error loading ${file}:`, error));
});
// Translation fallback for now if keys are missing
setTimeout(() => {
if (document.querySelector('[data-i18n="screen.title"]').innerText === "screen.title") {
document.querySelector('[data-i18n="screen.title"]').innerText = "Contrôle de l'écran";
}
if (document.querySelector('[data-i18n="screen.description"]').innerText === "screen.description") {
document.querySelector('[data-i18n="screen.description"]').innerText = "Gérer l'affichage sur l'écran HDMI.";
}
}, 500);
});
function controlScreen(action) {
$.ajax({
url: 'launcher.php?type=screen_control&action=' + action,
dataType: 'text',
method: 'GET',
success: function (response) {
console.log("Screen control " + action + ": " + response);
if (action == 'start') {
$('#status-message').html('<div class="alert alert-success alert-dismissible fade show" role="alert">L\'écran a été démarré.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>');
} else {
$('#status-message').html('<div class="alert alert-warning alert-dismissible fade show" role="alert">L\'écran a été arrêté.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>');
}
},
error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error);
$('#status-message').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">Erreur: ' + error + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>');
}
});
}
</script>
</body>
</html>

8
html/sidebar.html
View File

@@ -62,6 +62,14 @@
<span data-i18n="sidebar.admin">Admin</span> <span data-i18n="sidebar.admin">Admin</span>
</a> </a>
<!-- Screen Control (Hidden by default) -->
<a class="nav-link text-white" href="screen.html" id="nav-screen" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-display" viewBox="0 0 16 16">
<path d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145z"/>
</svg>
<span data-i18n="sidebar.screen">Screen</span>
</a>
<!-- New content at the bottom --> <!-- New content at the bottom -->
<div class="sidebar-footer text-center text-white"> <div class="sidebar-footer text-center text-white">
<hr> <hr>

18
screen_control/screen.py Normal file
View File

@@ -0,0 +1,18 @@
import os
os.environ['KIVY_GL_BACKEND'] = 'gl'
from kivy.app import App
from kivy.uix.label import Label
from kivy.core.window import Window
# Set background color to black (optional, but good for screens)
Window.clearcolor = (0, 0, 0, 1)
class ScreenApp(App):
def build(self):
# Create a label with large text "Bonjour" centered on the screen
label = Label(text='Bonjour', font_size='150sp', color=(1, 1, 1, 1))
return label
if __name__ == '__main__':
ScreenApp().run()