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

68
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', () => {
let config = null;
// Fetch config once
fetch('launcher.php?type=get_config_sqlite') fetch('launcher.php?type=get_config_sqlite')
.then(function(r) { return r.json(); }) .then(response => response.json())
.then(function(config) { .then(data => {
if (config.device_type === 'moduleair_pro') { config = data;
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, { 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'; logo.src = 'assets/img/logoModuleAir.png';
} }
})
.catch(function() {});
} }
});
observer.observe(document.body || document.documentElement, { childList: true, subtree: true }); // 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';
}
}
}
}
});

81
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,31 +12,39 @@
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>
@@ -71,11 +80,14 @@
<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>
@@ -102,17 +114,17 @@
</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' },
@@ -133,18 +145,18 @@
}); });
}); });
window.onload = function() { window.onload = function () {
//NEW way to get data from SQLITE //NEW way to get data from SQLITE
$.ajax({ $.ajax({
url: 'launcher.php?type=get_config_sqlite', url: 'launcher.php?type=get_config_sqlite',
dataType:'json', dataType: 'json',
//dataType: 'json', // Specify that you expect a JSON response //dataType: 'json', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs method: 'GET', // Use GET or POST depending on your needs
success: function(response) { success: function (response) {
console.log("Getting SQLite config table:"); console.log("Getting SQLite config table:");
console.log(response); console.log(response);
@@ -160,8 +172,14 @@ window.onload = function() {
document.title = response.deviceName; document.title = response.deviceName;
} }
// Check for device type to show Screen tab
// Assuming the key in config is 'device_type' or 'type'
if (response.device_type === 'moduleair_pro' || response.type === 'moduleair_pro') {
$('#nav-screen').show();
}
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
} }
}); //end ajax }); //end ajax
@@ -194,12 +212,12 @@ window.onload = function() {
url: 'launcher.php?type=RTC_time', url: 'launcher.php?type=RTC_time',
dataType: 'text', // Specify that you expect a JSON response dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs method: 'GET', // Use GET or POST depending on your needs
success: function(response) { success: function (response) {
console.log("Local RTC: " + response); console.log("Local RTC: " + response);
const RTC_Element = document.getElementById("RTC_time"); const RTC_Element = document.getElementById("RTC_time");
RTC_Element.textContent = response; RTC_Element.textContent = response;
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
} }
}); });
@@ -209,7 +227,7 @@ window.onload = function() {
url: 'launcher.php?type=database_size', url: 'launcher.php?type=database_size',
dataType: 'json', // Specify that you expect a JSON response dataType: 'json', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs method: 'GET', // Use GET or POST depending on your needs
success: function(response) { success: function (response) {
console.log(response); console.log(response);
if (response.size_megabytes !== undefined) { if (response.size_megabytes !== undefined) {
@@ -226,7 +244,7 @@ window.onload = function() {
console.error("Error from server:", response.error); console.error("Error from server:", response.error);
} }
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
} }
}); });
@@ -237,7 +255,7 @@ window.onload = function() {
url: 'launcher.php?type=linux_disk', url: 'launcher.php?type=linux_disk',
dataType: 'text', // Specify that you expect a JSON response dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs method: 'GET', // Use GET or POST depending on your needs
success: function(response) { success: function (response) {
console.log("Linux disk space: " + response); console.log("Linux disk space: " + response);
//1. disk size //1. disk size
const disk_size = document.getElementById("disk_size"); const disk_size = document.getElementById("disk_size");
@@ -271,7 +289,7 @@ window.onload = function() {
diskSpace.appendChild(progressDiv); diskSpace.appendChild(progressDiv);
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
} }
}); });
@@ -281,7 +299,7 @@ window.onload = function() {
url: 'launcher.php?type=linux_memory', url: 'launcher.php?type=linux_memory',
dataType: 'text', // Specify that you expect a JSON response dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs method: 'GET', // Use GET or POST depending on your needs
success: function(response) { success: function (response) {
console.log("Linux memory space: " + response); console.log("Linux memory space: " + response);
//1. memory size //1. memory size
const memory_size = document.getElementById("memory_size"); const memory_size = document.getElementById("memory_size");
@@ -325,7 +343,7 @@ window.onload = function() {
memorySpace.appendChild(progressDiv); memorySpace.appendChild(progressDiv);
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
} }
}); });
@@ -336,11 +354,11 @@ window.onload = function() {
url: 'launcher.php?type=get_npm_sqlite_data', url: 'launcher.php?type=get_npm_sqlite_data',
dataType: 'json', // Specify that you expect a JSON response dataType: 'json', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs method: 'GET', // Use GET or POST depending on your needs
success: function(response) { success: function (response) {
console.log(response); console.log(response);
updatePMChart(response); updatePMChart(response);
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
} }
}); });
@@ -416,7 +434,7 @@ window.onload = function() {
autoSkip: true, autoSkip: true,
maxTicksLimit: 5, maxTicksLimit: 5,
color: '#4A4A4A', color: '#4A4A4A',
callback: function(value, index) { callback: function (value, index) {
// Access the correct label from the `labels` array // Access the correct label from the `labels` array
const label = labels[index]; // Use the original `labels` array const label = labels[index]; // Use the original `labels` array
if (label && typeof label === 'string' && label.includes(' ')) { if (label && typeof label === 'string' && label.includes(' ')) {
@@ -460,7 +478,8 @@ window.onload = function() {
} }
</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()