antenna_pattern_vis.html

<!DOCTYPE html>
<html>
  <head>
    <title>Antenna Pattern Visualization</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.4/math.min.js"></script>
  </head>

  <body>
    <h1>Antenna Pattern Visualization</h1>

    <div id="plot"></div>

    <!-- Create canvas elements for the two patterns -->
    <canvas id="canvas-v" width="500" height="500"></canvas>
    <canvas id="canvas-fhoriz_coordinate_set" width="500" height="500"></canvas>

    <script>
      let thetaresolution = 5;
      let phiresolution = 5;
      let fvert = [];
      let fhoriz = [];

      function halfwave(thetares, phires) {
        if (90 % thetares !== 0) {
          console.log(
            "Error! Theta resolution must divide evenly into 90 degrees."
          );
          return;
        }

        let thetadim = 180 / thetares + 1;
        let phidim = 360 / phires + 1;

        let fv = Array(thetadim)
          .fill()
          .map(() => Array(phidim).fill(0)); // vertical polarization
        let fh = Array(thetadim)
          .fill()
          .map(() => Array(phidim).fill(0)); // horizontal polarization

        let maxGain = 0;

        for (let k = 0; k < thetadim; k++) {
          let theta = (Math.PI * thetares * k) / 180;
          for (let m = 0; m < phidim; m++) {
            let phi = (Math.PI * phires * m) / 180;
            if (k === 0 || k === thetadim - 1) {
              fv[k][m] = 0;
            } else {
              fv[k][m] =
                Math.cos((Math.PI / 2) * Math.cos(theta)) / Math.sin(theta);
            }
            maxGain +=
              fv[k][m] ** 2 *
              Math.sin(theta) *
              ((thetares * Math.PI) / 180) *
              ((phires * Math.PI) / 180);
          }
        }
        console.log((4 * Math.PI) / maxGain);

        fvert = fv.map((subArray) => subArray.map((number) => number));
        fhoriz = fh.map((subArray) => subArray.map((number) => number));
      }

      function isovert(thetares, phires) {
        let patterns = [];
        if (90 % thetares !== 0) {
          console.log(
            "Error! Theta resolution must divide evenly into 90 degrees."
          );
          return;
        }

        let thetadim = 180 / thetares + 1;
        let phidim = 360 / phires + 1;

        let fv = Array(thetadim)
          .fill()
          .map(() => Array(phidim).fill(1)); // vertical polarization
        patterns.push(fv);

        let fh = Array(thetadim)
          .fill()
          .map(() => Array(phidim).fill(0)); // horizontal polarization
        patterns.push(fh);
        console.log(fv);
        // console.log(fh);
        fvert = fv;
        fhoriz = fh;
        return patterns;
      }

      function isohoriz(thetares, phires) {
        let patterns = [];
        if (90 % thetares !== 0) {
          console.log(
            "Error! Theta resolution must divide evenly into 90 degrees."
          );
          return;
        }

        let thetadim = 180 / thetares + 1;
        let phidim = 360 / phires + 1;

        let fv = Array(thetadim)
          .fill()
          .map(() => Array(phidim).fill(0)); // vertical polarization

        let fh = Array(thetadim)
          .fill()
          .map(() => Array(phidim).fill(1)); // horizontal polarization

        patterns.push(fv);
        patterns.push(fh);
        fvert = fv;
        fhoriz = fh;
        // console.log(fvert);
        // console.log(fhoriz);

        return patterns;
      }

      // directional, vertically polarized antenna with specified horizontal and vertical beamwidth and sidelobe level
      // Generates the pattern for a vertically polarized directional antenna with a flat main beam and uniform side lobe level.
      function dirantv(thetares, phires, azbw, elbw, SLL) {
        let patterns = [];
        if (SLL > 0) {
          console.log("Error! SLL must be <= 0.");
          return;
        }
        if (90 / thetares !== Math.round(90 / thetares)) {
          console.log(
            "Error! theta resolution must divide evenly into 90 degrees."
          );
          return;
        }
        const thetadim = 180 / thetares + 1;
        const phidim = 360 / phires + 1;
        let fv = Array(thetadim)
          .fill()
          .map(() => Array(phidim).fill(0)); // vertical polarization
        let fh = fv.slice(); // horizontal polarization
        for (let k = 1; k <= thetadim; k++) {
          const theta = (Math.PI * thetares * (k - 1)) / 180;
          for (let m = 1; m <= phidim; m++) {
            const phi = (Math.PI * phires * (m - 1)) / 180;
            if (
              Math.abs(theta - Math.PI / 2) - (Math.PI * thetares) / 180 >
              (Math.PI * (elbw / 2)) / 180
            ) {
              if (SLL !== -999) {
                fv[k - 1][m - 1] = 10 ** (SLL / 10);
              }
            } else if (
              phi - (Math.PI * phires) / 180 > ((azbw / 2) * Math.PI) / 180 &&
              2 * Math.PI - phi >
                ((azbw / 2) * Math.PI) / 180 + (Math.PI * phires) / 1800
            ) {
              if (SLL !== -999) {
                fv[k - 1][m - 1] = 10 ** (SLL / 10);
              }
            } else {
              fv[k - 1][m - 1] = 1;
            }
          }
        }
        fvert = fv;
        fhoriz = fh;

        fvert = fv.map((subArray) => subArray.map((number) => number * 3));
        fhoriz = fh.map((subArray) => subArray.map((number) => number));
      }

      function short_dipole(thetares, phires) {
        if (90 / thetares !== Math.round(90 / thetares)) {
          console.log(
            "Error!  theta resolution must divide evenly into 90 degrees."
          );
          return;
        }

        let thetadim = 180 / thetares + 1;
        let phidim = 360 / phires + 1;

        let fv = [];
        let fh = [];
        for (let i = 0; i < thetadim; i++) {
          fv.push(new Array(phidim).fill(0));
          fh.push(new Array(phidim).fill(0));
        }

        // Calculate normalized antenna pattern
        for (let k = 1; k <= thetadim; k++) {
          let theta = (Math.PI * thetares * (k - 1)) / 180;
          for (let m = 1; m <= phidim; m++) {
            let phi = (Math.PI * phires * (m - 1)) / 180;
            fv[k - 1][m - 1] = Math.sin(theta);
          }
        }

        // console.log(fvert);
        // console.log(fhoriz);
        // Multiply normalized pattern by max gain
        fvert = fv.map((subArray) => subArray.map((number) => number * 3));
        fhoriz = fh.map((subArray) => subArray.map((number) => number * 3));
      }

      function sloop(thetares, phires) {
        if (90 / thetares !== Math.round(90 / thetares)) {
          console.log(
            "Error!  theta resolution must divide evenly into 90 degrees."
          );
          return;
        }

        let thetadim = 180 / thetares + 1;
        let phidim = 360 / phires + 1;

        let fv = [];
        let fh = [];
        for (let i = 0; i < thetadim; i++) {
          fv.push(new Array(phidim).fill(0));
          fh.push(new Array(phidim).fill(0));
        }

        for (let k = 1; k <= thetadim; k++) {
          let theta = (Math.PI * thetares * (k - 1)) / 180;
          for (let m = 1; m <= phidim; m++) {
            let phi = (Math.PI * phires * (m - 1)) / 180;
            fh[k - 1][m - 1] = Math.sin(theta);
          }
        }
        fvert = fv;
        fhoriz = fh;
      }

      function maxGain(fvert, fhoriz) {
        fvert = fvert / Math.max(fvert);
      }

      // halfwave(thetaresolution, phiresolution);
      // isovert(thetaresolution, phiresolution);
      // isohoriz(thetaresolution, phiresolution);
      // sloop(thetaresolution, phiresolution);
      // short_dipole(thetaresolution, phiresolution);
      dirantv(thetaresolution, phiresolution, 30, 30, -10);

      function threepat() {
        console.log(fvert);
        console.log(fhoriz);
        let s = fvert.length;
        if (s !== fhoriz.length) {
          console.log("Error! Different size vert. and horiz. pattern files.");
          return;
        }

        let thetadim = s;
        let phidim = fvert[0].length;
        let thetares = 180 / (thetadim - 1);
        let phires = 360 / (phidim - 1);

        let xv = new Array(thetadim)
          .fill(0)
          .map(() => new Array(phidim).fill(0));
        let yv = new Array(thetadim)
          .fill(0)
          .map(() => new Array(phidim).fill(0));
        let zv = new Array(thetadim)
          .fill(0)
          .map(() => new Array(phidim).fill(0));
        let xh = new Array(thetadim)
          .fill(0)
          .map(() => new Array(phidim).fill(0));
        let yh = new Array(thetadim)
          .fill(0)
          .map(() => new Array(phidim).fill(0));
        let zh = new Array(thetadim)
          .fill(0)
          .map(() => new Array(phidim).fill(0));

        let fvert_coordinate_set = [];
        let fhoriz_coordinate_set = [];

        let point_index = -1; //tracks the index of the pointset
        let indexed_lineset = []; // IndexedLineSet indices are stored here

        let prev_iter_fvert_val;
        for (let k = 0; k < thetadim; k++) {
          let theta = (k * thetares * Math.PI) / 180;
          for (let m = 0; m < phidim; m++) {
            let phi = (m * phires * Math.PI) / 180;
            let rv = Math.abs(fvert[k][m]);
            xv[k][m] = rv * Math.sin(theta) * Math.cos(phi);
            yv[k][m] = rv * Math.sin(theta) * Math.sin(phi);
            zv[k][m] = rv * Math.cos(theta);

            point_index = point_index + 1;
            //Finding the IndexedLineSet in the below code
            if (
              (rv == 1 && prev_iter_fvert_val != 1) ||
              (rv != 1 && prev_iter_fvert_val == 1)
            ) {
              indexed_lineset.push(point_index);
              indexed_lineset.push(point_index - 1);
              indexed_lineset.push(-1);
            }
            fvert_coordinate_set.push(xv[k][m]);
            fvert_coordinate_set.push(yv[k][m]);
            fvert_coordinate_set.push(zv[k][m]);
            let rh = Math.abs(fhoriz[k][m]);
            xh[k][m] = rh * Math.sin(theta) * Math.cos(phi);
            yh[k][m] = rh * Math.sin(theta) * Math.sin(phi);
            zh[k][m] = rh * Math.cos(theta);
            fhoriz_coordinate_set.push(xh[k][m]);
            fhoriz_coordinate_set.push(yh[k][m]);
            fhoriz_coordinate_set.push(zh[k][m]);
            prev_iter_fvert_val = rv;
          }
        }
        console.log("Vertical Coordinate set");
        fvert_coordinate_set = fvert_coordinate_set.map(
          (element) => element * 3
        );
        console.log(fvert_coordinate_set);
        console.log("indexed_lineset Set");
        console.log(indexed_lineset);

        // determine the maximum coordinate value
        var maxcoordv = Math.max(
          Math.max(
            Math.max.apply(
              null,
              xv.map((x) => Math.max.apply(null, x))
            ),
            Math.max.apply(
              null,
              yv.map((x) => Math.max.apply(null, x))
            )
          ),
          Math.max.apply(
            null,
            zv.map((x) => Math.max.apply(null, x))
          )
        );
        var maxcoordh = Math.max(
          Math.max(
            Math.max.apply(
              null,
              xh.map((x) => Math.max.apply(null, x))
            ),
            Math.max.apply(
              null,
              yh.map((x) => Math.max.apply(null, x))
            )
          ),
          Math.max.apply(
            null,
            zh.map((x) => Math.max.apply(null, x))
          )
        );
        var mc = Math.ceil(Math.max(maxcoordv, maxcoordh) * 2) / 2;

        let axisLimits = [-mc, mc, -mc, mc, -mc, mc];
        plotSurface(
          xv,
          yv,
          zv,
          fvert,
          "Vertical Polarization Pattern",
          axisLimits
        );

        // set the axis limits
        // let axisLimits = [-mc, mc, -mc, mc, -mc, mc];
        // plotSurface(xh, yh, zh, fhoriz, "Horizontal Polarization Pattern", axisLimits);
      }

      // plot a surface
      function plotSurface(x, y, z, f, title, axisLimits) {
        let trace = {
          x: x.map((row) => [...row]),
          y: y.map((row) => [...row]),
          z: z.map((row) => [...row]),
          surfacecolor: f.map((row) => [...row]),
          type: "surface",
        };
        let colorsTrace = [];
        let len = trace.surfacecolor.length;
        let wid = trace.surfacecolor[0].length;
        let max = 0;
        //filling surface color values as an array and normalising it
        for (let k = 0; k < len; k++) {
          for (let m = 0; m < wid; m++) {
            colorsTrace.push(trace.surfacecolor[k][m]);
            if (trace.surfacecolor[k][m] > max) {
              max = trace.surfacecolor[k][m];
            }
          }
        }
        colorsTrace = colorsTrace.map((element) => element / max);

        // Define your color scale
        // const colorScale = [
        //     [0, [255, 0, 0]],   // Color for the minimum value Red
        //     [0.5, [128, 0, 128]],  // Color for the mid value Purple
        //     [1, [0, 0, 255]]     // Color for the maximum value Blue
        // ];

        const colorScale = [
          [0, [255, 245, 240]],
          [0.125, [254, 224, 210]],
          [0.25, [252, 187, 161]],
          [0.375, [252, 146, 114]],
          [0.5, [251, 106, 74]],
          [0.625, [239, 59, 44]],
          [0.75, [203, 24, 29]],
          [0.875, [165, 15, 21]],
          [1, [103, 0, 13]],
        ];

        // Function to map the value to RGB based on the color scale
        function mapValueToRGB(value, scale) {
          for (let i = 0; i < scale.length - 1; i++) {
            if (value <= scale[i + 1][0]) {
              const [x1, color1] = scale[i];
              const [x2, color2] = scale[i + 1];
              const fraction = (value - x1) / (x2 - x1);
              let r = Math.round(
                color1[0] + fraction * (color2[0] - color1[0])
              );
              let g = Math.round(
                color1[1] + fraction * (color2[1] - color1[1])
              );
              let b = Math.round(
                color1[2] + fraction * (color2[2] - color1[2])
              );
              return [r, g, b];
            }
          }
        }
        let rgb_values_final = [];
        // Convert the single surface color value to RGB
        for (let i = 0; i < colorsTrace.length; i++) {
          let temp = mapValueToRGB(colorsTrace[i], colorScale);
          rgb_values_final.push(temp[0]);
          rgb_values_final.push(temp[1]);
          rgb_values_final.push(temp[2]);
        }
        rgb_values_final = rgb_values_final.map((element) => element / 255);

        console.log("final color RGB Values");
        console.log(rgb_values_final);
        let layout = {
          title: title,
          scene: {
            xaxis: { title: "x" },
            yaxis: { title: "y" },
            zaxis: { title: "z" },
          },
        };

        if (axisLimits) {
          layout.scene.xaxis.range = [axisLimits[0], axisLimits[1]];
          layout.scene.yaxis.range = [axisLimits[2], axisLimits[3]];
          layout.scene.zaxis.range = [axisLimits[4], axisLimits[5]];
        }

        Plotly.newPlot(document.getElementById("plot"), [trace], layout);
      }

      // Call the threepat function
      threepat();

      // Define a function to render the pattern surface to a canvas element
      function renderToCanvas(canvas, surface) {
        // Get the canvas context and clear the canvas
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Define some parameters for the rendering
        var alpha = 1.0; // opacity of the surface
        var hueStart = 0.6; // starting hue for color map (blue-green)
        var hueEnd = 0.2; // ending hue for color map (red-orange)
        var saturation = 1.0; // saturation of the color map
        var lightness = 0.5; // lightness of the color map

        // Define a function to map a value to a color in HSL space
        function valueToColor(value, max) {
          // Normalize the value to the range [0, 1]
          var normValue = value / max;

          // Map the value to a hue in the range [hueEnd, hueStart]
          var hue = hueEnd + normValue * (hueStart - hueEnd);

          // Convert the HSL color to RGB
          var rgb = hslToRgb(hue, saturation, lightness);

          // Set the alpha value and return the color string
          return "rgba(" + rgb.join(",") + "," + alpha + ")";
        }

        // Iterate over each vertex in the surface and render it as a polygon
        for (var i = 0; i < surface.vertices.length; i++) {
          // Get the vertex and its associated value
          var vertex = surface.vertices[i];
          var value = surface.values[i];

          // Map the value to a color
          var color = valueToColor(value, surface.maxValue);

          // Begin a new path at the vertex and render a polygon with its neighbors
          ctx.beginPath();
          ctx.moveTo(vertex.x, vertex.y);
          for (var j = 0; j < vertex.neighbors.length; j++) {
            var neighbor = vertex.neighbors[j];
            ctx.lineTo(neighbor.x, neighbor.y);
          }

          // Close the polygon and fill it with the mapped color
          ctx.closePath();
          ctx.fillStyle = color;
          ctx.fill();
        }
      }

      function getSurfaceData(patternName) {
        // Replace this with your own code to fetch the pattern data based on the pattern name
        var surface = {
          vertices: [], // array of vertex objects with x, y, and neighbors properties
          values: [], // array of values associated with each vertex
          maxValue: 0, // maximum value in the values array
        };
        return surface;
      }

      // Get the pattern surfaces and render them to the canvases
      var surfaceV = getSurfaceData("Vertical Polarization Pattern");
      renderToCanvas(document.getElementById("canvas-v"), surfaceV);

      // var surfaceH = getSurfaceData('Horizontal Polarization Pattern');
      // renderToCanvas(document.getElementById('canvas-fhoriz_coordinate_set'), surfaceH);
    </script>
  </body>
</html>