Display sensor readings in Simulator Window

One of the original activities required raising and lowering the downward facing sensor. This has the effect of increasing or decreasing the field of view of the sensor. The current simulator has a sensor diameter parameter that models this effect.

The light sensor behaviour is handled via the this.getSensorValues() function in js/EV3devSim.js.

A sensorBox is defined that grabs the image data from the background layer:

    var sensorBox = self.backgroundCtx.getImageData(
      x - diameter / 2,
      y - diameter / 2,
      diameter,
      diameter
    );

A calculation is then made over those values:

    var redTotal = 0;
    var greenTotal = 0;
    var blueTotal = 0;
    var count = 0;
    var radius = diameter / 2;
    var radiusSquare = radius ** 2;
    for (let row = 0; row < diameter; row++) {
      for (let col = 0; col < diameter; col++) {
        if (((row - radius) ** 2 + (col - radius) ** 2) < radiusSquare) {
          let offset = row * (diameter * 4) + col * 4;
          count++;
          redTotal += self.addLightSensorNoise(sensorBox.data[offset], self.robotSpecs.sensorNoise);
          greenTotal += self.addLightSensorNoise(sensorBox.data[offset + 1], self.robotSpecs.sensorNoise);
          blueTotal += self.addLightSensorNoise(sensorBox.data[offset + 2], self.robotSpecs.sensorNoise);
        }
      }
    }
    return [redTotal / count, greenTotal / count, blueTotal / count];
  };

We can display the grabbed image data on its own canvas context using ctx.putImageData(imageData, diameter, diameter);

To scale the image data, it looks like some jiggery pokery is required... eg of Zooming and anti-aliasing from here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

innovationOUtside / nbev3devsim

Display sensor readings in Simulator Window #62