update

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>