update

html/admin.html

@@ -187,6 +187,11 @@ window.onload = function() {
             //document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
              //get device Name
              const deviceName = data.deviceName;
+
+             console.log("Device Name: " + deviceName);
+             console.log("Device ID: " + deviceID);
+
+            
            
            const elements = document.querySelectorAll('.sideBar_sensorName');
            elements.forEach((element) => {
@@ -204,7 +209,8 @@ window.onload = function() {
           //loop activation
           const flex_loop = document.getElementById("flex_loop");
           flex_loop.checked = data.loop_activation;
-        
+          console.log("Loop activation: " + data.loop_activation);
+
           //loop logs
           const flex_loop_log = document.getElementById("flex_loop_log");
           flex_loop_log.checked = data.loop_log;

html/index.html

@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>NebuleAir</title>
   <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+  <script src="assets/js/chart.js"></script> <!-- Local Chart.js -->
+
   <style>
     body {
       overflow-x: hidden;
@@ -53,22 +55,34 @@
         <p>Bienvenue sur votre interface de configuration de votre capteur.</p>
         <div class="row mb-3">
 
+          <!-- Card 1 Linux Stats -->
           <div class="col-sm-4">
-            <div class="card">
-           
+            <div class="card"> 
               <div class="card-body">
                 <h5 class="card-title">Linux stats</h5>
-
                 <p class="card-text">Disk usage (total size <span id="disk_size"></span> Gb) </p>
                 <div id="disk_space"></div>
-
                 <p class="card-text">Memory usage (total size <span id="memory_size"></span> Mb) </p>
                 <div id="memory_space"></div>
-    
               </div>
             </div>
           </div>
 
+          <!-- Card 2 NPM values -->
+          <div class="col-sm-4">
+          <div class="card"> 
+            <div class="card-body">
+              <h5 class="card-title">Mesures PM</h5>
+              <p class="card-text">Particules Fines </p>
+              <canvas id="sensorPMChart" width="400" height="200"></canvas>
+
+          
+            </div>
+          </div>
+        </div>
+
+
+
         </div>
       </main>
     </div>
@@ -210,8 +224,6 @@ window.onload = function() {
                             console.log(usedMemory);
                             console.log(percentageUsed);
 
-                       
-
                             // Create the outer div with class and attributes
                             const progressDiv = document.createElement('div');
                             progressDiv.className = 'progress  mb-3';
@@ -240,9 +252,62 @@ window.onload = function() {
                 });
 
 
+          // GET NPM SQLite values
+          $.ajax({
+                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
+
+          function updatePMChart(data) {
+            const labels = data.map(d => d.timestamp);
+            const PM1 = data.map(d => d.PM1);
+            const PM25 = data.map(d => d.PM25);
+            const PM10 = data.map(d => d.PM10);
+
+            const ctx = document.getElementById('sensorPMChart').getContext('2d');
+
+            if (!chart) {
+                chart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: [
+                            { label: "PM1", data: PM1, borderColor: "red", fill: false },
+                            { label: "PM2.5", data: PM25, borderColor: "blue", fill: false },
+                            { label: "PM10", data: PM10, borderColor: "green", fill: false }
+                        ]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false
+                    }
+                });
+            } 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();
+            }
+        }    
+
+
+
+
+        //end fetch config
         })
         .catch(error => console.error('Error loading config.json:', error));
+        //end windows on load
       }
 
 </script>

html/launcher.php

@@ -6,6 +6,23 @@ header("Pragma: no-cache");
 
 $type=$_GET['type'];
 
+if ($type == "get_npm_sqlite_data") {
+    $database_path = "/var/www/nebuleair_pro_4g/sqlite/sensors.db";
+    //echo "Getting data from sqlite database";
+    try {
+        $db = new PDO("sqlite:$database_path");
+        $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+    
+        // Fetch the last 10 records
+        $stmt = $db->query("SELECT timestamp, PM1, PM25, PM10 FROM data ORDER BY timestamp DESC LIMIT 10");
+        $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    
+        echo json_encode($data);
+    } catch (PDOException $e) {
+        echo json_encode(["error" => $e->getMessage()]);
+    }
+}
+
 if ($type == "update_config") {
     echo "updating....";
     $param=$_GET['param'];