This is how you can control the camera in a Re-Earth plugin using an HTML interface. Users can input values for various camera properties like latitude, longitude, height, heading, pitch, roll, range, and duration. Then, they can choose to either "Fly to" or "Look at" a specific location with the provided camera settings.

const html = `
  <style>
    html, body {
      margin: 0;
      width: 350px;
      background: white;
    }
    #wrapper {
      height: 100%;
      padding: 12px;
      box-sizing: border-box;
    }
    input {
      width: 60px;
    }
  </style>

  <div id="wrapper">
    <p>Longitude: <input type="number" id="lng" value="139.78" />°</p>
    <p>Latitude: <input type="number" id="lat" value="35.68" />°</p>
    <p>Height: <input type="number" id="height" value="10000" /> m</p>
    <p>Heading: <input type="number" id="heading" value="0" step="0.1" /></p>
    <p>Pitch: <input type="number" id="pitch" value="-1.5" step="0.1" /></p>
    <p>Roll (for fly to): <input type="number" id="roll" value="0" step="0.1" /></p>
    <p>Range (for look at): <input type="number" id="range" value="10000" /> m</p>
    <p>Duration: <input type="number" id="duration" value="2" /> s</p>
    <p>
      <button id="fly">Fly to</button>
      <button id="look">Look at</button>
    </p>
  </div>

  <script>
    // Function to get input values
    const getValues = () => ({
      lng: parseFloat(document.getElementById("lng").value || 0),
      lat: parseFloat(document.getElementById("lat").value || 0),
      height: parseFloat(document.getElementById("height").value || 0),
      heading: parseFloat(document.getElementById("heading").value || 0),
      pitch: parseFloat(document.getElementById("pitch").value || 0),
      roll: parseFloat(document.getElementById("roll").value || 0),
      range: parseFloat(document.getElementById("range").value || 0),
      duration: parseFloat(document.getElementById("duration").value || 0),
    });

    // Event listener for "Fly to" button
    document.getElementById("fly").addEventListener("click", () => {
      parent.postMessage({ fly: getValues() }, "*");
    });

    // Event listener for "Look at" button
    document.getElementById("look").addEventListener("click", () => {
      parent.postMessage({ look: getValues() }, "*");
    });
  </script>
`;

// Display the UI
reearth.ui.show(html);

// Listen for messages from Re:Earth
reearth.on("message", msg => {
  if (msg.fly) {
    // Perform camera flyTo
    reearth.camera.flyTo(
      {
        lat: msg.fly.lat,      
        lng: msg.fly.lng,      
        height: msg.fly.height,  
        heading: msg.fly.heading,
        pitch: msg.fly.pitch,    
        roll: msg.fly.roll,      
      },
      {
        duration: msg.fly.duration, 
      }
    );
  } else if (msg.look) {
    // Perform camera lookAt
    reearth.camera.lookAt(
      {
        lat: msg.look.lat,        
        lng: msg.look.lng,        
        height: msg.look.height,  
        heading: msg.look.heading,
        pitch: msg.look.pitch,    
        range: msg.look.range,    
      },
      {
        duration: msg.look.duration,
      }
    );
  }
});

The breakdown of the code:

1. The html variable contains an HTML template for the UI. It sets up a styled form with input fields for longitude, latitude, height, heading, pitch, roll, range, and duration. There are also two buttons labeled "Fly to" and "Look at".
2. Inside the <script> tag, the getValues function is defined. This function reads the values entered in the input fields and returns them as an object.
3. Event listeners are added to the "Fly to" and "Look at" buttons. When these buttons are clicked, a message is sent to the parent of the UI (which is the Re-Earth platform). The message includes the camera parameters obtained from the getValues function.
4. The reearth.ui.show(html) line displays the UI created by the html template.
5. The code sets up a listener to receive messages from Re-Earth using reearth.on("message", msg => {...}). When a message is received, the code checks if it contains either "fly" or "look" parameters.
6. If the message contains "fly" parameters, the code instructs Re-Earth's camera to fly to the specified location with the specified animation duration. The camera's position and orientation are determined by the values provided in the message.
7. If the message contains "look" parameters, the code instructs Re-Earth's camera to look at the specified location with the specified range and animation duration. The camera's orientation and zoom level are determined by the values provided in the message.

Note that: In summary, this code creates a UI that allows users to set camera parameters and trigger camera movement actions in Re-Earth. It demonstrates how to interact with Re-Earth's camera functionality using a simple interface.