<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <h2>Pico W Plotly 3D Viewer</h2>
  <button onclick="fetchAndPlot()">START</button>
  <div id="plot" style="width:100%;height:600px;"></div>
  <script>
    function fetchAndPlot() {
      fetch('/data')
        .then(response => response.json())
        .then(data => {
          const num_theta = 16;
          const num_height = 16;
          const r = 1.0;
          const theta = Array.from({length: num_theta}, (_, i) => i * 2 * Math.PI / num_theta);
          const height = Array.from({length: num_height}, (_, i) => i * 5 / (num_height - 1));
          let x = [], y = [], z = [], color = [];

          for (let i = 0; i < num_height; i++) {
            for (let j = 0; j < num_theta; j++) {
              x.push(r * Math.cos(theta[j]));
              y.push(r * Math.sin(theta[j]));
              z.push(height[i]);
              color.push(data[i][j]);
            }
          }

          const trace = {
            x: x,
            y: y,
            z: z,
            mode: 'markers',
            marker: {
              size: 5,
              color: color,
              colorscale: 'Hot',
              cmin: 10,
              cmax: 50,
              colorbar: {
                title: 'Temperature (&deg;C)'
              }
            },
            type: 'scatter3d'
          };

          Plotly.newPlot('plot', [trace], {
            title: 'NTC Sensor Array',
            scene: {
              xaxis: {range: [-1.5, 1.5]},
              yaxis: {range: [-1.5, 1.5]},
              zaxis: {range: [0, 5]}
            }
          });
        });
    }
  </script>
</body>
</html>
