Calculateur de longueur d’une antenne dipôle

Temps de lecture : 4 minutes

Ce code HTML crée une page web pour un calculateur de longueur d’antenne dipôle. La page permet aux utilisateurs d’entrer une fréquence en MHz, de calculer la longueur d’antenne dipôle appropriée en fonction de l’entrée, et d’afficher le résultat.

<html>
<head>
 <meta charset="UTF-8">
    <meta name="author" content="F4HXN">
<title>Calculateur de longueur de dipôle</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .calculator {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  h1 {
    color: #4a4a4a;
    text-align: center;
  }
  label, input, button {
    display: block;
    margin: 10px 0;
    width: 100%;
  }
  input, button {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  button:hover {
    background-color: #45a049;
  }
  #result {
    margin-top: 20px;
    font-weight: bold;
    text-align: center;
  }
  .antenna-svg {
    width: 100%;
    height: 150px;
    margin-top: 20px;
  }
</style>
</head>
<body>
  <div class="calculator">
    <h1>Calculateur de longueur de dipôle</h1>
    <label for="frequency">Fréquence (MHz):</label>
    <input type="number" id="frequency" placeholder="Entrez la fréquence en MHz" required>
    <label for="velocity-factor">Facteur de vélocité (0.1 - 1):</label>
    <input type="number" id="velocity-factor" placeholder="Entrez le facteur de vélocité" min="0.1" max="1" step="0.01" value="0.95" required>
    <button onclick="calculateDipoleLength()">Calculer</button>
    <div id="result"></div>
    <svg class="antenna-svg" viewBox="0 0 300 100">
      <line x1="0" y1="50" x2="300" y2="50" stroke="#333" stroke-width="2"/>
      <circle cx="150" cy="50" r="5" fill="#4CAF50"/>
      <line id="leftArm" x1="150" y1="50" x2="50" y2="50" stroke="#4CAF50" stroke-width="4"/>
      <line id="rightArm" x1="150" y1="50" x2="250" y2="50" stroke="#4CAF50" stroke-width="4"/>
    </svg>
  </div>

  <script>
    function calculateDipoleLength() {
      const frequency = parseFloat(document.getElementById('frequency').value);
      const velocityFactor = parseFloat(document.getElementById('velocity-factor').value);
      
      if (isNaN(frequency) || isNaN(velocityFactor)) {
        alert("Veuillez entrer des valeurs numériques valides.");
        return;
      }
      
      if (velocityFactor < 0.1 || velocityFactor > 1) {
        alert("Le facteur de vélocité doit être compris entre 0.1 et 1.");
        return;
      }
      
      // Calcul de la longueur d'onde en mètres
      const wavelength = 300 / frequency;
      
      // Calcul de la longueur du dipôle en mètres (longueur totale = λ/2 * facteur de vélocité)
      const dipoleLength = (wavelength / 2) * velocityFactor;
      
      // Affichage du résultat
      const resultDiv = document.getElementById('result');
      resultDiv.innerHTML = `Longueur totale du dipôle: ${dipoleLength.toFixed(2)} mètres<br>
                             Longueur de chaque bras: ${(dipoleLength / 2).toFixed(2)} mètres`;
      
      // Animation de l'antenne
      animateAntenna(dipoleLength);
    }
    
    function animateAntenna(length) {
      const maxLength = 100; // Longueur maximale pour l'animation (en pixels SVG)
      const scale = Math.min(length, maxLength) / maxLength;
      const leftArm = document.getElementById('leftArm');
      const rightArm = document.getElementById('rightArm');
      
      leftArm.setAttribute('x2', 150 - (100 * scale));
      rightArm.setAttribute('x2', 150 + (100 * scale));
    }
  </script>
</body></html>

Ce code HTML crée une page web interactive qui permet de calculer la longueur d’une antenne dipôle pour une fréquence donnée, en tenant compte d’un facteur de vélocité.

En-tête (<head>) :

  • Base URL: La balise <base> définit l’URL de base pour toutes les URLs relatives dans le document. Ici, elle pointe vers “https://example.com/”.
  • Titre (<title>) : Le titre de la page est “Calculateur de longueur de dipôle”.
  • Méta-données :
    • Le jeu de caractères est défini comme UTF-8.
    • L’auteur de la page est spécifié comme “F4HXN”.
  • Style (<style>) :
    • Le CSS définit un design simple et centré sur la page, avec une apparence propre et moderne.
    • Les éléments sont alignés au centre de l’écran à l’aide de Flexbox.
    • Les boutons ont une couleur de fond verte qui change légèrement au survol pour une meilleure expérience utilisateur.
    • Le SVG représentant l’antenne est inclus et stylisé pour être intégré au design général.

Corps (<body>) :

  • Container principal (<div class="calculator">) :
    • Titre (<h1>): Un en-tête indique “Calculateur de longueur de dipôle”.
    • Formulaire:
    • Champ pour la fréquence: Un champ de saisie pour entrer la fréquence en MHz.
    • Champ pour le facteur de vélocité: Un champ de saisie pour entrer le facteur de vélocité, avec une valeur par défaut de 0.95.
    • Bouton: Un bouton pour déclencher le calcul.
    • Affichage des résultats (<div id="result">) :
    • Cet élément affiche la longueur totale du dipôle et la longueur de chaque bras après le calcul.
    • Illustration SVG de l’antenne:
    • Un diagramme SVG simple de l’antenne est inclus avec deux bras de chaque côté du point d’alimentation (indiqué par un cercle vert).

Script (<script>):

  • Fonction calculateDipoleLength:
    • Cette fonction est déclenchée lorsque l’utilisateur clique sur le bouton de calcul.
    • Elle récupère les valeurs de la fréquence et du facteur de vélocité depuis les champs de saisie.
    • Elle valide les valeurs pour s’assurer qu’elles sont numériques et que le facteur de vélocité est compris entre 0.1 et 1.
    • Elle calcule la longueur de l’onde en mètres en utilisant la formule ( \lambda = \frac{300}{f} ), puis la longueur du dipôle avec la formule ( \text{Longueur du dipôle} = \frac{\lambda}{2} \times \text{facteur de vélocité} ).
    • Le résultat est affiché dans le div avec l’ID result.
  • Fonction animateAntenna:
    • Cette fonction anime les bras de l’antenne dans le SVG en ajustant leur longueur en fonction du résultat calculé.
    • Les bras sont ajustés proportionnellement dans le SVG pour correspondre à la longueur calculée, avec une échelle maximale fixée à 100 pixels pour l’affichage.

Fonctionnalités:

  • Interactivité: L’utilisateur peut entrer une fréquence et un facteur de vélocité, puis obtenir immédiatement la longueur du dipôle correspondant. Le résultat est à la fois numérique (affiché sous forme de texte) et visuel (avec l’animation du SVG).
  • Validation: Le code inclut des vérifications pour s’assurer que les valeurs saisies sont valides avant de procéder au calcul.
  • Accessibilité: L’utilisation de labels et de champs bien définis rend la page accessible et facile à utiliser.

Ce code HTML permet de calculer la longueur d’une antenne dipôle à partir d’une fréquence donnée, tout en tenant compte du facteur de vélocité. Le résultat est à la fois affiché sous forme de texte et visualisé avec une animation SVG de l’antenne. Cette approche rend l’outil non seulement fonctionnel mais aussi interactif et agréable à utiliser.

SVG (Scalable Vector Graphics) est un format de fichier graphique vectoriel utilisé pour créer des images en deux dimensions. Les images SVG sont composées de formes et de lignes définies par des équations mathématiques, plutôt que de pixels, ce qui les rend scalables sans perte de qualité.

Vue : 95