Layout Control

curl -X POST \
  -d "layout=custom" \
  -d "name=custom-map" \
  -d "map=[ \
    [20, 20, 940, 680, \"cover\"], \
    [900, 180, 360, 240, \"auto\"], \
    [900, 440, 360, 240, \"auto\"] \
  ]" \
  -d "users[]=drone" \
  -d "users[]=pilot" \
  -d "users[]=coordinator" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

curl -X POST \
  -d "url=https://docs.eyeson.com/img/examples/overlay_example.png" \ 
  -d "z-index=1" \ 
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layers"

const access = "YOUR_ROOM_ACCESS_KEY";

const sendImage = async (access, canvas) => { 
  try {
    const url = `https://api.eyeson.team/rooms/${access}/layers`;
    const blob = await new Promise(resolve => canvas.toBlob(resolve));

    const formData = new FormData();
      formData.set('file', blob, 'overlay.png');
      formData.set('z-index', '1');

    const response = await fetch(url, { method: 'POST', body: formData });
    if (!response.ok) { throw new Error('Failed to send image'); }
  } catch (error) {
    alert(error.message);
  }
};

const drawCountdown = async (canvas, number) => {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.font = "200px Arial"; 
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = "white";
  ctx.fillText(number.toString(), canvas.width / 2, canvas.height / 2);
  
  await sendImage(access, canvas);
};

const startCountdown = async (value = 5) => {
  if (isNaN(value) || value < 5) value = 5;
  
  const canvas = document.createElement("canvas");
  canvas.width = 1280;
  canvas.height = 720;

  for (let i = value; i >= 0; i--) {
    await drawCountdown(canvas, i); 
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
  await setLayout(access);
  await deleteImage(access);
};

startCountdown(5);