Implement support for "linear" file format detection on client side.

app.py

@@ -355,7 +355,8 @@ def index():
         primary_colourspace=PRIMARY_COLOURSPACE,
         secondary_colourspace=SECONDARY_COLOURSPACE,
         image_colourspace=IMAGE_COLOURSPACE,
-        image_decoding_cctf=IMAGE_DECODING_CCTF)
+        image_decoding_cctf=IMAGE_DECODING_CCTF,
+        colourspace_model=COLOURSPACE_MODEL)
 
 
 @APP.after_request

colour_analysis.py

@@ -16,9 +16,8 @@
 from collections import OrderedDict
 from werkzeug.contrib.cache import SimpleCache
 
-from colour import (LOG_DECODING_CURVES, OETFS_REVERSE,
-                    RGB_COLOURSPACES, RGB_to_RGB, RGB_to_XYZ, XYZ_to_RGB,
-                    read_image)
+from colour import (LOG_DECODING_CURVES, OETFS_REVERSE, RGB_COLOURSPACES,
+                    RGB_to_RGB, RGB_to_XYZ, XYZ_to_RGB, read_image)
 from colour.models import XYZ_to_colourspace_model, function_gamma
 from colour.plotting import filter_cmfs, filter_RGB_colourspaces
 from colour.utilities import first_item, normalise_maximum, tsplit, tstack
@@ -178,13 +177,15 @@ def load_image(path, decoding_cctf='sRGB'):
         Image as a ndarray.
     """
 
-    key = '{0}-{1}'.format(path, decoding_cctf)
+    is_linear_image = os.path.splitext(path)[-1].lower() in LINEAR_FILE_FORMATS
+
+    key = path if is_linear_image else '{0}-{1}'.format(path, decoding_cctf)
 
     RGB = IMAGE_CACHE.get(key)
     if RGB is None:
         RGB = read_image(path)
 
-        if os.path.splitext(path)[-1].lower() not in LINEAR_FILE_FORMATS:
+        if not is_linear_image:
             RGB = DECODING_CCTFS[decoding_cctf](RGB)
 
         IMAGE_CACHE.set(key, RGB)

src/common.js

@@ -113,6 +113,15 @@ function loadingCallback(xhr) {
     info(`${this.name}: ${loaded}% loaded...`);
 }
 
+function isLinearFileFormat(path) {
+    var tokens = path.split('.');
+    if (['exr', 'hdr'].indexOf(tokens[tokens.length - 1].toLowerCase()) >= 0) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
 export {
     serverRoute,
     removeObjectByName,
@@ -121,5 +130,6 @@ export {
     message,
     info,
     warning,
-    loadingCallback
+    loadingCallback,
+    isLinearFileFormat
 };

src/index.js

@@ -1,13 +1,14 @@
 import { GamutView } from './views/gamut-view.js';
 import { ImageView } from './views/image-view.js';
 import { updateDropdown, dropdownOptions } from './gui.js';
-import { info, serverRoute, warning } from './common.js';
+import { isLinearFileFormat, info, serverRoute, warning } from './common.js';
 
 export {
     GamutView,
     ImageView,
     updateDropdown,
     dropdownOptions,
+    isLinearFileFormat,
     info,
     serverRoute,
     warning

src/views/gamut-view.js

@@ -29,11 +29,11 @@ class GamutView extends PerspectiveView {
                 },
                 axes: { enable: true },
                 image: 'Rose.ProPhoto.jpg',
-                colourspaceModel: 'CIE xyY',
                 primaryColourspace: 'sRGB',
                 secondaryColourspace: 'DCI-P3',
                 imageColourspace: 'Primary',
-                imageDecodingCctf: 'sRGB'
+                imageDecodingCctf: 'sRGB',
+                colourspaceModel: 'CIE xyY'
             },
             ...settings
         };
@@ -75,11 +75,11 @@ class GamutView extends PerspectiveView {
         }
 
         this._image = settings.image;
-        this._colourspaceModel = settings.colourspaceModel;
         this._primaryColourspace = settings.primaryColourspace;
         this._secondaryColourspace = settings.secondaryColourspace;
         this._imageColourspace = settings.imageColourspace;
         this._imageDecodingCctf = settings.imageDecodingCctf;
+        this._colourspaceModel = settings.colourspaceModel;
 
         this._viewAxesVisual = undefined;
 
@@ -129,38 +129,6 @@ class GamutView extends PerspectiveView {
         }
     }
 
-    get colourspaceModel() {
-        return this._colourspaceModel;
-    }
-
-    set colourspaceModel(value) {
-        this._colourspaceModel = value;
-
-        if (this._viewAxesVisual != undefined) {
-            this._viewAxesVisual.colourspaceModel = value;
-        }
-
-        if (this._spectralLocusVisual != undefined) {
-            this._spectralLocusVisual.colourspaceModel = value;
-        }
-
-        if (this._secondaryColourspaceVisual != undefined) {
-            this._secondaryColourspaceVisual.colourspaceModel = value;
-        }
-
-        if (this._primaryColourspaceVisual != undefined) {
-            this._primaryColourspaceVisual.colourspaceModel = value;
-        }
-
-        if (this._imageScatterVisual != undefined) {
-            this._imageScatterVisual.colourspaceModel = value;
-        }
-
-        if (this._imageScatterOverlayVisual != undefined) {
-            this._imageScatterOverlayVisual.colourspaceModel = value;
-        }
-    }
-
     get primaryColourspace() {
         return this._primaryColourspace;
     }
@@ -240,6 +208,38 @@ class GamutView extends PerspectiveView {
         }
     }
 
+    get colourspaceModel() {
+        return this._colourspaceModel;
+    }
+
+    set colourspaceModel(value) {
+        this._colourspaceModel = value;
+
+        if (this._viewAxesVisual != undefined) {
+            this._viewAxesVisual.colourspaceModel = value;
+        }
+
+        if (this._spectralLocusVisual != undefined) {
+            this._spectralLocusVisual.colourspaceModel = value;
+        }
+
+        if (this._secondaryColourspaceVisual != undefined) {
+            this._secondaryColourspaceVisual.colourspaceModel = value;
+        }
+
+        if (this._primaryColourspaceVisual != undefined) {
+            this._primaryColourspaceVisual.colourspaceModel = value;
+        }
+
+        if (this._imageScatterVisual != undefined) {
+            this._imageScatterVisual.colourspaceModel = value;
+        }
+
+        if (this._imageScatterOverlayVisual != undefined) {
+            this._imageScatterOverlayVisual.colourspaceModel = value;
+        }
+    }
+
     get viewAxesVisual() {
         return this._viewAxesVisual;
     }

src/views/image-view.js

@@ -16,11 +16,11 @@ class ImageView extends OrthographicView {
                 camera: { position: new THREE.Vector3(0, 1, 0) },
                 controls: { target: new THREE.Vector3(0, 0, 0) },
                 image: 'Rose.ProPhoto.jpg',
-                colourspaceModel: 'CIE xyY',
                 primaryColourspace: 'sRGB',
                 secondaryColourspace: 'DCI-P3',
                 imageColourspace: 'Primary',
-                imageDecodingCctf: 'sRGB'
+                imageDecodingCctf: 'sRGB',
+                colourspaceModel: 'CIE xyY'
             },
             ...settings
         };
@@ -33,11 +33,11 @@ class ImageView extends OrthographicView {
         this.controls.target = settings.controls.target;
 
         this._image = settings.image;
-        this._colourspaceModel = settings.colourspaceModel;
         this._primaryColourspace = settings.primaryColourspace;
         this._secondaryColourspace = settings.secondaryColourspace;
         this._imageColourspace = settings.imageColourspace;
         this._imageDecodingCctf = settings.imageDecodingCctf;
+        this._colourspaceModel = settings.colourspaceModel;
 
         // The following groups are defining the rendering order.
         this._imageVisualGroup = new THREE.Group();
@@ -67,14 +67,6 @@ class ImageView extends OrthographicView {
         }
     }
 
-    get colourspaceModel() {
-        return this._colourspaceModel;
-    }
-
-    set colourspaceModel(value) {
-        this._colourspaceModel = value;
-    }
-
     get primaryColourspace() {
         return this._primaryColourspace;
     }
@@ -134,6 +126,14 @@ class ImageView extends OrthographicView {
         }
     }
 
+    get colourspaceModel() {
+        return this._colourspaceModel;
+    }
+
+    set colourspaceModel(value) {
+        this._colourspaceModel = value;
+    }
+
     get imageVisual() {
         return this._imageVisual;
     }
@@ -159,7 +159,6 @@ class ImageView extends OrthographicView {
                 secondaryColourspace: this._secondaryColourspace,
                 imageColourspace: this._imageColourspace,
                 imageDecodingCctf: this._imageDecodingCctf
-
             },
             ...settings
         });

templates/index.html

@@ -144,6 +144,7 @@
         var secondaryColourspace = '{{ secondary_colourspace }}';
         var imageColourspace = '{{ image_colourspace }}';
         var imageDecodingCctf = '{{ image_decoding_cctf }}';
+        var colourspaceModel = '{{ colourspace_model }}';
 
         var gamutView1 = new ColourAnalysis.GamutView(
             document.getElementById('gamutView1'),
@@ -152,7 +153,8 @@
                 primaryColourspace: primaryColourspace,
                 secondaryColourspace: secondaryColourspace,
                 imageColourspace: imageColourspace,
-                imageDecodingCctf: imageDecodingCctf
+                imageDecodingCctf: imageDecodingCctf,
+                colourspaceModel: colourspaceModel,
             }
         );
         gamutView1.addViewAxesVisual();
@@ -170,7 +172,8 @@
                 primaryColourspace: primaryColourspace,
                 secondaryColourspace: secondaryColourspace,
                 imageColourspace: imageColourspace,
-                imageDecodingCctf: imageDecodingCctf
+                imageDecodingCctf: imageDecodingCctf,
+                colourspaceModel: colourspaceModel,
             }
         );
         imageView1.addImageVisual();
@@ -179,19 +182,21 @@
 
         class Controls {
             constructor() {
-                this.colourspaceModel = [];
-                this.image = [];
+
+                this.colourspaceModel = colourspaceModel;
+
+                this.image = image;
                 this.imageColourspace = imageColourspace;
                 this.imageDecodingCctf = imageDecodingCctf;
                 this.outOfPrimaryColourspaceGamut = false;
                 this.outOfSecondaryColourspaceGamut = false;
 
-                this.primaryColourspace = gamutView1.primaryColourspace;
+                this.primaryColourspace = primaryColourspace;
                 this.primaryColourspaceVisualWireframe = false;
                 this.primaryColourspaceVisualVisible = true;
                 this.primaryColourspaceVisualOpacity = 0.75;
 
-                this.secondaryColourspace = gamutView1.secondaryColourspace;
+                this.secondaryColourspace = secondaryColourspace;
                 this.secondaryColourspaceVisualWireframe = true;
                 this.secondaryColourspaceVisualVisible = true;
                 this.secondaryColourspaceVisualOpacity = 0.25;
@@ -316,6 +321,19 @@
             updateImageDecodingCctfDropdown
         );
         imageDecodingCctfController.onChange(function (value) {
+            if (ColourAnalysis.isLinearFileFormat(controls.image)) {
+                ColourAnalysis.warning(
+                    `"${controls.image}" is already linear and ` +
+                    `does not need to be decoded!`);
+                controls.imageDecodingCctf = gamutView1.imageDecodingCctf;
+
+                var keys = ColourAnalysis.dropdownOptions(imageDecodingCctfController);
+                imageDecodingCctfController.domElement.children[0].selectedIndex = keys.indexOf(
+                    controls.imageDecodingCctf
+                );
+                return;
+            }
+
             if (gamutView1.isLoading() || imageView1.isLoading()) {
                 ColourAnalysis.warning('A visual is already loading!');
                 controls.imageDecodingCctf = gamutView1.imageDecodingCctf;