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

2026-02-17 12:19:05 +01:00
parent 8106af624f
commit 3e5ee9c77e
6 changed files with 627 additions and 357 deletions
--- a/html/assets/js/topbar-logo.js
+++ b/html/assets/js/topbar-logo.js
@@ -1,19 +1,57 @@
-// Switch topbar logo based on device_type config
-// Uses MutationObserver to detect when topbar is dynamically loaded
-(function() {
-    var observer = new MutationObserver(function() {
-        var logo = document.getElementById('topbar-logo');
-        if (logo) {
-            observer.disconnect();
+
+/**
+ * Global configuration handler for UI elements
+ * - Updates Topbar Logo based on device type
+ * - Shows/Hides "Screen" sidebar tab based on device type
+ */
+document.addEventListener('DOMContentLoaded', () => {
+    let config = null;
+
+    // Fetch config once
    fetch('launcher.php?type=get_config_sqlite')
-                .then(function(r) { return r.json(); })
-                .then(function(config) {
-                    if (config.device_type === 'moduleair_pro') {
+        .then(response => response.json())
+        .then(data => {
+            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';
            }
-                })
-                .catch(function() {});
+        }
+
+        // 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';
+                }
+            }
+        }
    }
 });
-    observer.observe(document.body || document.documentElement, { childList: true, subtree: true });
-})();
--- a/html/index.html
+++ b/html/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,31 +12,39 @@
    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 */
+      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 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>
@@ -71,11 +80,14 @@
            <div class="card">
              <div class="card-body">
                <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>
-                <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>
-                <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>
@@ -160,6 +172,12 @@ window.onload = function() {
            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) {
          console.error('AJAX request failed:', status, error);
@@ -463,4 +481,5 @@ window.onload = function() {
  </script>

 </body>
+
 </html>
--- a/html/launcher.php
+++ b/html/launcher.php
@@ -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";
+    }
+}
--- a/html/screen.html
+++ b/html/screen.html
@@ -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>
--- a/html/sidebar.html
+++ b/html/sidebar.html
@@ -62,6 +62,14 @@
        <span data-i18n="sidebar.admin">Admin</span>
      </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 -->
    <div class="sidebar-footer text-center text-white">
      <hr>
--- a/screen_control/screen.py
+++ b/screen_control/screen.py
@@ -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()