webapp.astro

---
import ShoelaceLayout from '../layouts/ShoelaceLayout.astro';
---
<ShoelaceLayout title="Signals › WebApp">
  <h1>Signals</h1>
  <div id="set01" class="controls">
    <camera-control-hpr id="hpr01" angles="[90,30,0]"></camera-control-hpr>
    <camera-control-position id="pos01" coord="[45,6,500]"></camera-control-position>
  </div>
  <div class="scene">
    <scene-view angles="[90,30,0]" coord="[45,6,500]"></scene-view>
  </div>
  <div id="set02" class="controls">
    <camera-control-hpr id="hpr02" angles="[90,30,0]"></camera-control-hpr>
    <camera-control-position id="pos02" coord="[45,6,500]"></camera-control-position>
  </div>
</ShoelaceLayout>

<script>
  import { signal } from "@lit-labs/preact-signals";

  import "../components/CameraControlHPR.js";
  import "../components/CameraControlPosition.js";
  import "../components/SceneView.js";

  const sceneView = document.querySelector("scene-view");
  const allCameraControlHPR = document.querySelectorAll("camera-control-hpr");
  const allCameraControlPosition = document.querySelectorAll("camera-control-position");

  const angles = signal([90, 30, 0]);
  const coord = signal([45, 6, 500]);

  sceneView.signals = { angles, coord };

  allCameraControlHPR?.forEach((cameraControlHPR, index) => {
    cameraControlHPR.signal = angles;
    cameraControlHPR.addEventListener("angles-changed", (e) => {
      console.log(`HPR ${String(index).padStart(2,'0')} angles changed to [${e.detail.join(",")}]`);
    })
  });

  allCameraControlPosition?.forEach((cameraControlPosition, index) => {
    cameraControlPosition.signal = coord;
    cameraControlPosition.addEventListener("coord-changed", (e) => {
      // how to add leading zeros to the numbers?

      console.log(`POS ${String(index).padStart(2,'0')} coordinates changed to [${e.detail.join(",")}]`);
    })
  });
</script>

<style>
  body {
    margin: 0 1rem;
  }
  div.controls {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    height: 15rem;
  }
  div.scene {
    margin-top: 1rem; margin-bottom: 1rem;
  }
  camera-control-hpr,
  camera-control-position {
    background-color: aliceblue;
    padding: 1rem;
    width: 50%;
  }
  scene-view {
    background-color: aliceblue;
    width: 100%; height: 30rem;
  }
</style>