ESP3D-WEBUI/extensions_samples/icons.html

<script type="text/javascript">
  const iconsToLoad = ["Activity", "Home", "Camera", "File"];
  const loadedIcons = {};
  let iconsLoaded = false;

  function sendMessage(msg) {
    window.parent.postMessage(msg, '*');
  }

  function processMessage(eventMsg) {
	  console.log(eventMsg.data)
    if (!iconsLoaded) {
      if (eventMsg.data.type && eventMsg.data.id && iconsToLoad.includes(eventMsg.data.id)) {
        if (eventMsg.data.type === "icon") {
          const iconName = eventMsg.data.id;
          const iconSvg = eventMsg.data.content.response;
          loadedIcons[iconName] = iconSvg;
          console.log(`Icône ${iconName} chargée:`, iconSvg);

          if (Object.keys(loadedIcons).length === iconsToLoad.length) {
            console.log("Toutes les icônes sont chargées !");
            useLoadedIcons();
            iconsLoaded = true;
          }
        }
      }
    }
  }

  function useLoadedIcons() {
    const buttonContainer = document.getElementById("buttonContainer");

    iconsToLoad.forEach(iconName => {
      const button = document.createElement("button");
      button.classList.add("btn", "m-1");
      button.innerHTML = loadedIcons[iconName];
      button.setAttribute("data-icon", iconName);
      button.addEventListener("click", handleButtonClick);
      buttonContainer.appendChild(button);
    });
  }

  function handleButtonClick(event) {
    const clickedIcon = event.currentTarget.getAttribute("data-icon");
    console.log(`Bouton cliqué avec l'icône : ${clickedIcon}`);
    // Ajoutez ici le code pour gérer les actions spécifiques à chaque bouton
  }

  function loadIcons() {
    iconsToLoad.forEach(iconName => {
      sendMessage({ type: 'icon', target: 'webui', id: iconName });
    });
  }

  window.onload = (event) => {
    window.addEventListener("message", processMessage, false);
    loadIcons();
  }
</script>

<div class="container">
  <div id="buttonContainer"></div>
</div>