Modified the style versions

2023-03-07 08:19:45 +01:00
parent 52a0a1366e
commit d6724404ac
2 changed files with 195 additions and 11 deletions
--- a/style.html
+++ b/style.html
@@ -8,7 +8,8 @@
  <!-- Required meta tags -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!-- FontAwesome -->
  <script src="https://kit.fontawesome.com/719158633b.js" crossorigin="anonymous"></script>

@@ -56,43 +57,43 @@
        <ul class="list-group list-group-item-dark">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Printer Name
-            <span class="badge bg-primary">My Printer</span>
+            <span class="badge bg-primary" id="lblPrinterName">My Printer</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Printer Status
-            <span class="badge bg-success">Operational</span>
+            <span class="badge bg-success" id="lblPrinterState">Operational</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Current Job
-            <span class="badge bg-info">Printing</span>
+            <span class="badge bg-info" id="lblCurrentJob">Printing</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Progress
-            <span class="badge bg-secondary">35%</span>
+            <span class="badge bg-secondary" id="lblJobProgress">35%</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Temperature Bed
-            <span class="badge bg-primary">50.0°C / 60.0°C</span>
+            <span class="badge bg-primary" id="lblBedTemp">50.0°C / 60.0°C</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Temperature Tool 0
-            <span class="badge bg-primary">200.0°C / 210.0°C</span>
+            <span class="badge bg-primary" id="lblToolTemp">200.0°C / 210.0°C</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Time Remaining
-            <span class="badge bg-secondary">1:23:45</span>
+            <span class="badge bg-secondary" id="lblPrintTimeRemaining">1:23:45</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Time Elapsed
-            <span class="badge bg-secondary">2:01:23</span>
+            <span class="badge bg-secondary" id="lblTimeElapsed">2:01:23</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Time Print
-            <span class="badge bg-secondary">3:25:08</span>
+            <span class="badge bg-secondary" id="lblExpectedPrintTime">3:25:08</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Filament Printed
-            <span class="badge bg-secondary">100m</span>
+            <span class="badge bg-secondary" id="lblPrintedFilament">100m</span>
          </li>
        </ul>
      </div>
@@ -112,6 +113,78 @@
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
    integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
    crossorigin="anonymous"></script>
+  <script>
+    const apiPath = "http://192.168.50.239/api";
+    const apiKey = "AB36FE568344446D92F87BACD84F02CB";
+    // Retrieve printer name
+    fetch(apiPath+'/printer', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const printerName = data.name;
+        document.getElementById('lblPrinterName').textContent = printerName;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve printer status
+    fetch(apiPath+'/job', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const printerStatus = data.state;
+        document.getElementById('lblPrinterState').textContent = printerStatus;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve current job and progress
+    fetch(apiPath+'/job', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const currentJob = data.job.file.name;
+        document.getElementById('lblCurrentJob').textContent = currentJob;
+
+        const progress = data.progress.completion.toFixed(2) + '%';
+        document.getElementById('lblJobProgress').textContent = progress;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve bed temperature and target
+    fetch(apiPath+'/printer/bed', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const bedTemp = data.bed.actual.toFixed(1) + '°C';
+        const bedTarget = data.bed.target.toFixed(1) + '°C';
+        document.getElementById('lblBedTemp').textContent = bedTemp + " / " + bedTarget;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve tool temperature and target
+    fetch(apiPath+'/printer/tool', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const toolTemp = data[0].actual.toFixed(1) + '°C';
+        const toolTarget = data[0].target.toFixed(1) + '°C';
+        document.getElementById('lblToolTemps').textContent = toolTemp + " / " + toolTarget;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve time remaining, time elapsed, print time, and filament printed
+    fetch(apiPath+'/job', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const timeRemaining = data.progress.printTimeLeft;
+        document.getElementById('lblPrintTimeRemaining').textContent = timeRemaining;
+
+        const timeElapsed = data.progress.printTime;
+        document.getElementById('lblTimeElapsed').textContent = timeElapsed;
+
+        const printTime = data.job.estimatedPrintTime;
+        document.getElementById('lblExpectedPrintTime').textContent = printTime;
+
+        const filamentPrinted = data.job.filament.tool0.length.toFixed(2) + 'mm';
+        document.getElementById('lblPrintedFilament').textContent = filamentPrinted;
+      })
+      .catch(error => console.error(error));
+
+  </script>
 </body>

 </html>