<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>IoT Sensor Platform</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
  <header>
    <h1 class="title">IOT platform AYED JASSER TD01 TP02</h1>
  </header>
  <div id="myChart"></div>
  <div class="container">
    <div class="big-widget">
      <div class="widget temperature">
        <div class="widget-header">
          <h2>Temperature</h2>
        </div>
        <div class="widget-body">
          <div class="gauge" id="temperatureGauge"></div>
          <div class="value" id="temperatureValue">--</div>
          <div class="unit">°C</div>
        </div>
      </div>
      <div class="chart">
        <h2>Temperature Chart</h2>
        <canvas id="temperatureChart"></canvas>
      </div>
      <div class="widget humidity">
        <div class="widget-header">
          <h2>Humidity</h2>
        </div>
        <div class="widget-body">
          <div class="gauge" id="humidityGauge"></div>
          <div class="value" id="humidityValue">--</div>
          <div class="unit">%</div>
        </div>
      </div>
      <div class="chart">
        <h2>Humidity Chart</h2>
        <canvas id="humidityChart"></canvas>
      </div>
      <div class="widget pressure">
        <div class="widget-header">
          <h2>Pressure</h2>
        </div>
        <div class="widget-body">
          <div class="gauge" id="pressureGauge"></div>
          <div class="value" id="pressureValue">--</div>
          <div class="unit">hPa</div>
        </div>
      </div>
      <div class="chart">
        <h2>Pressure Chart</h2>
        <canvas id="pressureChart"></canvas>
      </div>
    </div>
  </div>
  <div class="data-table">
    <h2>Historique of Data </h2>
    <table>
      <thead>
        <tr>
          <th>Timestamp</th>
          <th>Temperature</th>
          <th>Humidity</th>
          <th>Pressure</th>
        </tr>
      </thead>
      <tbody id="dataTableBody"></tbody>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="script.js"></script>
</body>
</html>


Collaborative Calculation and Data Science

colby

sagemath

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.

Product

Resources

Company

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more, all in one place. Commercial Alternative to JupyterHub.

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.