Sending and Receiving Simple Messages:

In this example, the plugin displays a simple UI containing a button. When the button is clicked, a message is sent from the plugin to the parent UI using the parent.postMessage method. The UI listens for messages using the window.addEventListener method and updates the content of the <span> element with the received message. This is a basic way of sending and receiving messages between the plugin and the UI.

// Define the HTML template for the plugin UI
const html = `
  <style>
    html, body {
      margin: 0;
      width: 400px;
      height: 200px;
      background: white;
    }
    #wrapper {
      height: 100%;
      padding: 24px;
      box-sizing: border-box;
    }
    #msg {
      font-weight: bold;
    }
    #send {
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>

  <div id="wrapper">
    <h3>Re:Earth Plugin Example</h3>
    <p>Click the button to send a message to Re:Earth:</p>
    <button id="send">Send Message</button>
    <p>Message from Plugin: <span id="msg"></span></p>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const sendButton = document.getElementById("send");
      const messageSpan = document.getElementById("msg");

      sendButton.addEventListener("click", function() {
        parent.postMessage("Button is clicked", "*");
      });

      window.addEventListener("message", function(e) {
        if (e.source !== parent) return;
        messageSpan.textContent = e.data;
      });
    });
  </script>
`;

// Display the plugin UI in Re:Earth
reearth.ui.show(html);

// Listen for messages from Re:Earth
reearth.on("message", msg => {
  console.log("Message received from Re:Earth:", msg);
});

// Send a message to Re:Earth
reearth.ui.postMessage("Hello, Re:Earth!")

Sending Layer Object as Message:

This example demonstrates sending a layer object obtained from the plugin API to the UI. The UI then displays the id and title properties of the received layer object. This method can be useful when you need to share complex data structures between the plugin and the UI.

// HTML content with embedded styles
const html = `
  <style>
    html, body {
      margin: 0;
      width: 400px;
      height: 200px;
      background: white;
    }
    #wrapper {
      height: 100%;
      padding: 24px;
      box-sizing: border-box;
    }
    #layerInfo {
      color: #E95518;
    }
  </style>

  <div id="wrapper">
    <p>First layer ID: <span id="layerId"></span></p>
    <p>First layer title: <span id="layerTitle"></span></p>
  </div>
  
  <script>
    // Listen for messages from parent window (Re:Earth)
    window.addEventListener("message", function (e) {
      // Check if the message is from the parent window
      if (e.source !== parent) return;
      
      // Extract layer ID and title from the received data
      const layerId = e.data.id;
      const layerTitle = e.data.title;
      
      // Update the HTML content with the extracted data
      document.getElementById("layerId").textContent = layerId;
      document.getElementById("layerTitle").textContent = layerTitle;
    });
  </script>
`;

// Show the embedded UI within the Re:Earth plugin
reearth.ui.show(html);

// Send the first layer's information to the embedded UI
reearth.ui.postMessage(reearth.layers.layers?.[0]);

In both examples, the communication between the plugin and the UI is facilitated by the postMessage method. It allows messages to be sent from the plugin to the UI and vice versa. The window.addEventListener method on the UI side listens for messages, and the reearth.ui.postMessage method on the plugin side sends messages.

This mechanism enables seamless communication and interaction between the plugin and the UI components within the Re-Earth platform.

❗INFO

The provided information also includes a note regarding Google Chrome for iOS. In some cases, the browser itself might send messages directly to iframes of plugins. To ensure proper functionality on iOS, it's recommended to implement message filtering and ignore unknown messages, allowing the plugin to function smoothly on all platforms.