vtwireless · nkbartc · Dec 5, 2021 · Dec 5, 2021 · Dec 5, 2021 · Dec 5, 2021
diff --git a/powerSpectrumPlot2.js b/powerSpectrumPlot2.js
@@ -0,0 +1,269 @@
+"use strict"; // A must for debugging code.
+
+// TODO:
+//
+//   1. We need to find the axis vertical scale based on all the signals
+//      gn_min and gn_max (and etc).
+//
+//   2. Optional HTML element to place the plot on, like in Slider() and
+//      Label().  Now it just appends the plot at the end of the <body>.
+//      This may be okay for all 15 starting exercises.
+//
+
+// This function does not expose/return any object or other functions.
+// Yes, it's magic.
+//
+// Generates a Power Spectrum Plot with one or more signals that are in
+// the environment Signal.env
+//
+//
+// opts:  options object
+//
+//    yMax:  maximum y plot values in dB
+//    yMin:  manimum y plot values in dB
+///
+//
+function PowerSpectrumPlot(opts = {}) {
+
+    if(typeof(opts.yMax) === 'undefined')
+        opts.yMax = 20;
+    if(typeof(opts.yMin) === 'undefined')
+        opts.yMin = -60;
+
+    var sigs = [];
+    var noises = []; // We can only have one noise.
+
+    var freq_plot_min = 1.0e32; // large number that we change
+    var freq_plot_max = -1.0;   // small number that we change
+
+    // We'll display spectrum from all signals in Signal.env;
+    //
+    Object.keys(Signal.env).forEach(function(key) {
+
+        let sig = Signal.env[key];
+
+        // Setup the plot to be updated when sig parameters change.
+
+        if(sig.is_noise) {
+            noises.push(sig);
+            return;
+        }
+
+        // sig is not noise, so we add it to the list of signals.
+        sigs.push(sig);
+
+        // Get the limits freq_plot_min and freq_plot_max
+        if(freq_plot_min > sig.freq_plot_min)
+            freq_plot_min = sig.freq_plot_min;
+        if(freq_plot_max < sig.freq_plot_max)
+            freq_plot_max = sig.freq_plot_max;
+    });
+
+
+    // filter semi-length(m), over-sampling rate(k), total length
+    const m = 80, // ! increasing this value squares off the signal
+        k = 20,
+        n = 2 * k * m + 1;
+    var bw = 0.2, // bw
+        gn = 0.0; // gain
+    var nfft = 2048;
+
+    var generator = new siggen(nfft);
+    generator.m = m;
+
+    // determine time and frequency scale/units
+    var [scale_freq, units_freq] = scale_units(
+        sigs[0].freq_init + sigs[0].bw_max * 0.5,
+        0.1
+    ); // freq scale
+
+    // 5. X scale will use the index of our data
+    var fScale = d3
+        .scaleLinear()
+        .domain([freq_plot_min * scale_freq, freq_plot_max * scale_freq])
+        .range([0, plot.width]);
+
+    // 6. Y scale will use the randomly generate number
+    var pScale = d3.scaleLinear().domain([opts.yMin, opts.yMax]).range([plot.height, 0]);
+
+    const df = (freq_plot_max - freq_plot_min) / (nfft - 1);
+
+    // 7. d3's line generator
+    var linef = d3
+        .line()
+        .x(function (d, i) {
+            return fScale((freq_plot_min + i * df) * scale_freq);
+        }) // map frequency
+        .y(function (d) {
+            return pScale(d.y);
+        }); // map PSD
+
+    // 8. An array of objects of length N. Each object has key -> value
+    // pair, the key being "y" and the value is a random number
+    var dataf = d3.range(0, nfft - 1).map(function (f) {
+        return { y: 0 };
+    });
+    // create SVG objects
+    var svgf = svg_create(fScale, pScale, null); // ! null was formerly parentElement
+
+    var labelPrefix = "";
+    // TODO: This prefix label needs fixing so it works well for all the
+    // signals in "sigs'
+    //if(sigs[0].name.length > 0)
+    //    labelPrefix = sigs[0].name + " ";
+
+    // add labels
+    svg_add_labels(
+        svgf,
+        labelPrefix + "Frequency (" + units_freq + "Hz)",
+        labelPrefix + "Power Spectral Density (dB)"
+    );
+
+    // clip paths
+    svgf
+        .append("clipPath")
+        .attr("id", "clipf")
+        .append("rect")
+        .attr("width", plot.width)
+        .attr("height", plot.height);
+
+    // 9. Append the path, bind the data, and call the line generator
+    var pathf = svgf
+        .append("path")
+        .attr("clip-path", "url(#clipf)")
+        .datum(dataf)
+        .attr("class", "stroke-med no-fill stroke-yellow")
+        .attr("d", linef);
+
+    function update_plot() {
+        console.log(dataf);
+        generator.clear();
+        // Iterate through signal array, calc values and pass to generator
+        sigs.forEach(function (sig) {
+            let df = sig.freq_plot_max - sig.freq_plot_min;
+            let fc = -0.5 + (sig.freq - sig.freq_plot_min) / df;
+            let bw = sig.bw / df;
+            let gn = sig.gn;
+
+            //console.log("fc=" + fc + " bw=" + bw + " gn=" + gn);
+            // ! bw (slider %) is limited to 90% range, as log(0) == inf
+            generator.add_signal(fc, bw, gn + 10 * Math.log10(bw));
+            //generator.add_signal(fc, bw, gn);
+        });
+
+        // use custom noise floor if given
+
+        if(noises.length > 0) {
+            let n_gn = 0.0; // total noise gain will be summed to n_gn.
+            //
+            // Having more than one noise is odd, but nothing says we can't.
+            // We sum the noise gains this way:
+            noises.forEach(function(noise) {
+                // Sum the power.
+                n_gn += Math.pow(10, noise.gn/10.0);
+            });
+            // Now make it be in dB.
+            n_gn = 10 * Math.log10(n_gn);
+            //
+            // Note: if there was just one noise than n_gn is just that
+            // one (noise.gn).
+            generator.generate(n_gn);
+        } else
+            // else default noise floor is used (-120db, see generator src)
+            generator.generate();
+
+        dataf = d3.range(0, nfft - 1).map(function (i) {
+            return { y: generator.psd[i] };
+        });
+
+        pathf.datum(dataf).attr("d", linef);
+    }
+
+    // Add the update_plot callback to all the signals callbacks.
+
+    noises.forEach(function(noise) {
+        noise.onChange("gn", update_plot);
+    });
+
+    sigs.forEach(function(sig) {
+        // Setup the plot to be updated when sig parameters change.
+        sig.onChange("freq", update_plot);
+        sig.onChange("bw", update_plot);
+        sig.onChange("gn", update_plot);
+    });
+
+    // update_plot() will be called by the callbacks that are set just
+    // above.
+    var margin = ({top: 50, right: 100, bottom: 30, left: 50})
+    var height = 300
+    var width = 750
+    var x = d3.scaleLinear()
+      .domain([0, nfft]) //REPLACE THIS WITH A PROPER FREQUENCY VALUE
+      .range([margin.left, width - margin.right])
+    var y = d3.scaleLinear()
+      //.domain(d3.extent(dataf.map(x => x['y']))).nice()
+      .domain([-60,20])
+      .range([height - margin.bottom, margin.top])
+    var xAxis = (g, x) => g
+      .attr("transform", `translate(0,${height - margin.bottom})`)
+      .call(d3.axisBottom(x))
+    var yAxis = (g, y) => g
+      .attr("transform", `translate(${margin.left},0)`)
+      .call(d3.axisLeft(y))
+    var polyline = (data,x,y) => data.map((d,i) => x(i) + ',' + y(d)).join(' ') //data.map is not a function
+    var changepos = (line) => {
+      //console.log(line);
+      const displace1 = 5;
+      const displace2 = -5;
+      let arr = line.split(" ");
+      for (let i = 0; i < arr.length; i++) {
+        let nums = arr[i].split(",");
+        nums[0] = parseFloat(nums[0]) + displace1;
+        nums[1] = parseFloat(nums[1]) + displace2;
+        arr[i] = (nums[0] + ',' + nums[1])
+      }
+      return arr.join(' ')
+    }
+
+    const maxlinesgenerated = 20;
+
+    const svg = d3.select("body").append("svg")
+        .attr("style","background-color: black")
+        .attr("viewBox", [0, 0, width, height])
+        .property("value", {x:x})
+
+    const line = svg.append("polyline")
+        .attr("fill", "none")
+        .attr("stroke", "steelblue")
+        .attr("stroke-width", 1)
+        .attr("points", polyline(dataf.map(x => x['y']),x,y));
+
+    const gx = svg.append("g")
+        .call(xAxis, x);
+
+    const gy = svg.append("g")
+        .call(yAxis, y);
+
+    var linescount = 0;
+
+    function draw() {
+      // console.log("here");
+      linescount++;
+      if (linescount > maxlinesgenerated) {
+        svg.select("polyline").remove();
+        linescount--;
+      }
+      //const data = dataf;
+      svg.selectAll("polyline").attr("points",function() { return changepos(d3.select(this).attr("points"));})
+      //console.log(linescount)
+      //console.log(d3.select(this).attr("points"))
+      svg.append("polyline")
+          .attr("fill", "none")
+          .attr("stroke", "steelblue")
+          .attr("stroke-width", 1)
+          .attr("points", polyline(dataf.map(x => x['y']),x,y));
+    }
+
+    // draw every second
+    setInterval(draw, 1000);
+}
diff --git a/project.html b/project.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+    <title>HLSI Ex 5</title>
+    <meta charset="UTF-8"/>
+    <link rel="stylesheet" type="text/css" media="all" href="hlsi.css">
+    <script src=d3.v5.min.js></script>
+    <script src=fft.js></script>
+    <script src=common.js></script>
+    <script src=signal.js></script>
+    <script src=sliders.js></script>
+    <script src=powerSpectrumPlot2.js></script>
+    <script src=label.js></script>
+</head>
+
+
+<body>
+  <h2>Exercise 5 - Information Capacity</h2>
+  <p><a href="index.html">[exercises]</a></p>
+
+</body>
+<script>
+'use strict';
+
+// This sig contains all the constant parameters associated with the
+// signal and also the 4 changing parameters (independent variables)
+// sig.freq, sig.gn, sig.bw, and sig.mcs (center frequency, gain,
+// bandwidth, and modulation scheme index), in addition to dependent
+// variables sig.rate and sig.sinr.
+//
+var sig = Signal(conf.sigIC_05, "", { bw_min: 4.0e6 });
+var noise = Signal(conf.noiseIC_05, "Noise")
+
+Slider(sig, 'freq');
+Slider(sig, 'bw');
+Slider(sig, 'gn');
+
+Slider(noise, 'gn');
+
+Label(sig, 'sinr', {
+    prefix: "Signal-to-Noise Ratio: SNR = "
+});
+
+Label(sig, 'sinr', {
+    prefix: "Information Capacity: C = ",
+    func: function(val) {
+        // val is SNR in dB
+        let C = sig.bw * Math.log2(1 + Math.pow(10.0,val/10.));
+        let [scale_cap,units_cap] = scale_units(C,0.1);
+        return d3.format(".1f")(C*scale_cap) + " " +
+            units_cap + "bits/s";
+    }
+});
+
+
+PowerSpectrumPlot();
+
+</script>
+</html>