CansatV3

[RomainRbt09]

CanSat – Vidéo, Mesures & Carte

Température, pression, altitude et vidéo synchronisée

Connexion Raspberry Pi…

<!-- Cartes valeurs instantanées -->
<div class="cards">
  <div class="card">
    <div class="card-title">Température</div>
    <div class="card-value">
      <span id="temp-value">--</span><span class="card-unit">°C</span>
    </div>
    <div class="card-sub" id="temp-trend">En attente de données…</div>
  </div>
  <div class="card">
    <div class="card-title">Pression</div>
    <div class="card-value">
      <span id="pressure-value">--</span><span class="card-unit">hPa</span>
    </div>
    <div class="card-sub" id="pressure-trend">En attente de données…</div>
  </div>
  <div class="card">
    <div class="card-title">Altitude calculée</div>
    <div class="card-value">
      <span id="altitude-value">--</span><span class="card-unit">m</span>
    </div>
    <div class="card-sub" id="altitude-comment">En attente de données…</div>
  </div>
</div>

<div class="main-layout">
  <!-- Colonne gauche : vidéo + pixels -->
  <div class="panel">
    <h2>Vidéo CanSat & Inspecteur de pixels</h2>
    <div class="video-layout">
      <div class="video-container">
        <video
          id="cansat-video"
          width="512"
          height="540"
          autoplay
          muted
          playsinline
          controls
        ></video>
        <canvas id="video-overlay"></canvas>
      </div>

      <div class="pixel-info">
        <div class="pixel-row">
          <div id="pixel-swatch" class="pixel-swatch"></div>
          <div>
            <div id="pixel-coord">Pixel : (x = --, y = --)</div>
            <div id="pixel-rgba">RGBA : --</div>
            <div id="pixel-hex">HEX : --</div>
          </div>
        </div>
        <div>
          <strong>Dernier timestamp :</strong>
          <span id="pixel-ts">--</span>
        </div>
        <div style="margin-top: 6px; font-size: 0.78rem; color: var(--text-muted);">
          Clique sur n’importe quel point de la vidéo pour obtenir la couleur exacte du pixel.
        </div>
      </div>
    </div>
  </div>

  <!-- Colonne droite : graphique + carte -->
  <div class="panel">
    <h2>Évolution des mesures & Carte des frames</h2>

    <div class="chart-container">
      <canvas id="tempPressureChart"></canvas>
    </div>

    <div class="map-container">
      <!-- Résolution interne 512x540, affichée en 256x270 -->
      <canvas id="map-canvas" width="512" height="540"></canvas>
    </div>
    <div class="map-legend">
      Carte (vue de dessus) construite à partir des frames vidéo.<br />
      Chaque frame est positionnée avec (x, y), angle (yaw) et amplitude (FOV).
    </div>
    <a id="final-map-link" href="#" download="cansat_carte_finale.png">
      Télécharger la carte finale (PNG)
    </a>

    <div id="final-map-container" class="final-map-container">
      Carte finale générée :
      <img id="final-map-img" alt="Carte finale CanSat" />
    </div>
  </div>
</div>

<div class="footer">
  Aucune donnée pendant 2 min ⇒ carte figée & exportable.
</div>