Add special brightness mode to Pixel Viewer

csfieldguide/static/interactives/pixel-viewer/README.md

@@ -17,12 +17,14 @@ The interactive has the following parameters to configure the interactive:
   - `thresholdgreyscale` - Adds controls for manipulating pixels by threshold controls for greyscale pixels.
   - `blur` - Adds controls for investigating blurring with images.
   - `edgedetection` - Adds controls for investigating edge detection.
+  - `brightness` - Shows the pixels in greyscale, but without the extra features of `thresholdgreyscale`.
 
 - `colour-code=type` (optional) - Where `type` is one of the following:
 
   - `rgb` (default) - Shows the colour of the pixel in RGB format using Decimal.
   - `rgb-hex` - Shows the colour of the pixel in RGB format using Hexadecimal.
   - `hex` - Shows the colour of the pixel in Hexadecimal format.
+  - `brightness` (only available with `mode=brightness`) - Shows the brightness of the pixel as a value up to 255.
 
 - `image` (optional) - Filename of image to use (for example `arnold.jpg`).
 - `picturepicker` (optional) - Displays a set of pictures available for using.

csfieldguide/static/interactives/pixel-viewer/js/pixel-viewer.js

@@ -65,14 +65,17 @@ $( document ).ready(function() {
   $('#pixel-viewer-interactive-original-image').attr('crossorigin', 'anonymous').attr('src', image_filepath);
   load_resize_image(image_filepath, false);
 
-  if (getUrlParameter('mode') == 'threshold') {
-    mode = 'threshold';
-  } else if (getUrlParameter('mode') == 'thresholdgreyscale') {
-    mode = 'thresholdgreyscale';
-  } else if (getUrlParameter('mode') == 'blur') {
-    mode = 'blur';
-  } else if (getUrlParameter('mode') == 'edgedetection') {
-    mode = 'edgedetection';
+  switch(getUrlParameter('mode')) {
+    case 'threshold':
+      mode = 'threshold'; break;
+    case 'thresholdgreyscale':
+      mode = 'thresholdgreyscale'; break;
+    case 'blur':
+      mode = 'blur'; break;
+    case 'edgedetection':
+      mode = 'edgedetection'; break;
+    case 'brightness':
+      mode = 'brightness'; break;
   }
 
   if (getUrlParameter('picturepicker')){
@@ -89,12 +92,14 @@ $( document ).ready(function() {
    createPicturePicker();
   }
 
-  if (getUrlParameter('colour-code') == 'rgb-hex') {
-    colour_code_rep = 'rgb-hex';
+  colour_code_rep = getUrlParameter('colour-code');
+  if (colour_code_rep == 'rgb-hex') {
     $("input[id='rgb-hex-colour-code']").prop('checked', true);
-  } else if (getUrlParameter('colour-code') == 'hex') {
-    colour_code_rep = 'hex';
+  } else if (colour_code_rep == 'hex') {
     $("input[id='hex-colour-code']").prop('checked', true);
+  } else if (colour_code_rep == 'brightness' && mode == 'brightness') {
+    $("#colour-code-radio").addClass('d-none').removeClass('d-flex');
+    $("#configSelector").addClass('d-none');
   } else {
     colour_code_rep = 'rgb';
     $("input[id='rgb-colour-code']").prop('checked', true);
@@ -165,6 +170,12 @@ function setUpMode(){
     for outputting the absolute value of the result of the multiplication grid. What does checking and unchecking this box change about the result? What happens if you apply multiple grids?"));
     new EdgeDetector($('#pixel-viewer-image-manipulator'));
   }
+  if (mode == 'brightness'){
+    addDescription(gettext("Brightness Interactive"), gettext("The image has been converted to greyscale by taking the average of the red, blue and green values for\
+      each pixel."));
+    filter = greyscaler;
+    isGreyscale = true;
+  }
 }
 
 function addDescription(title, description){
@@ -1025,6 +1036,10 @@ var paint = function(row, col, left, top, width, height, zoom) {
           b = pixelData[2];
           hex_string = rgbToHex(r, g, b);
           context.fillText(hex_string, left + (4 * zoom), top + (14 * zoom) + (cell_line_height * zoom));
+        } else if (colour_code_rep == 'brightness') {
+          context.font = (10 * zoom).toFixed(2) + 'px Consolas, Courier New, monospace';
+          brightness = pixelData[0]; // All three values are the same provided it's greyscale
+          context.fillText(brightness, left + (16 * zoom), top + (14 * zoom) + (cell_line_height * zoom));
         } else {
           context.font = (14 * zoom).toFixed(2) + 'px Consolas, Courier New, monospace';
           var cell_lines = cell_text.split('\n');

csfieldguide/templates/interactives/pixel-viewer.html

@@ -39,7 +39,7 @@ <h5>{% trans "Options" %}</h5>
                     <input id="pixel-viewer-interactive-show-pixel-fill" type="checkbox" checked="checked">
                     {% trans "Show pixel background" %}
                 </label>
-                <div class="btn-group-vertical d-flex mb-1">
+                <div id="colour-code-radio" class="btn-group-vertical d-flex mb-1">
                     {% trans "Colour code: " %}
                     <div class="form-check form-check-inline">
                         <input class="form-check-input" type="radio" name="colourCode" id="rgb-colour-code" value="rgb" checked>