Merge pull request #596 from Tom-TBT/dynamic_lut

Dynamic lut for figure
ome · Nov 27, 2024 · 3f6d50a · 3f6d50a
2 parents 043c645 + d7cf65c
commit 3f6d50a
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 62 deletions.
diff --git a/omero_figure/urls.py b/omero_figure/urls.py
@@ -95,5 +95,6 @@
     path('chgrp/', views.chgrp, name='figure_chgrp'),
 
     # Get group and owner info for multiple images. ?image=1,2,3
-    path('images_details/', views.images_details, name="figure_images_details")
+    path('images_details/', views.images_details,
+         name="figure_images_details")
 ]
diff --git a/src/css/figure.css b/src/css/figure.css
@@ -1037,7 +1037,8 @@
 
     .lutBg {
         /* NB: when updating png, consider using different name to avoid cache */
-        background-size: 100% 1950px;  /* height is stretched 5x (50px per LUT) */
+        background-size: 100% var(--pngHeight);
+        background-image: var(--lutPng);
         background-repeat: no-repeat;
     }
 
@@ -1048,7 +1049,7 @@
         height: 100%;
         z-index: -1;
         background-image: var(--lutPng);   /* each lut is 10px high */
-        background-size: 100% 1950px;  /* height is stretched 5x (50px per LUT) */
+        background-size: 100% var(--pngHeight);  /* height is stretched 5x (50px per LUT) */
         background-repeat: no-repeat;
         transform: scaleX(var(--scaleX));
         background-position: var(--bgPos);

diff --git a/src/js/views/channel_slider_view.js b/src/js/views/channel_slider_view.js
@@ -9,10 +9,6 @@ import FigureColorPicker from "../views/colorpicker";
 import channel_slider_template from '../../templates/channel_slider.template.html?raw';
 import checkbox_template from '../../templates/checkbox_template.html?raw';
 
-import lutsPng from "../../images/luts_10.png";
-// Need to handle dev vv built (omero-web) paths
-const lutsPngUrl = STATIC_DIR + lutsPng;
-
 const SLIDER_INCR_CUTOFF = 100;
 // If the max value of a slider is below this, use smaller slider increments
 
@@ -427,8 +423,7 @@ var ChannelSliderView = Backbone.View.extend({
                                                 'lutBgPos': lutBgPos,
                                                 'reverse': reverse,
                                                 'color': color,
-                                                'isDark': this.isDark(color),
-                                                lutsPngUrl,
+                                                'isDark': this.isDark(color)
                                             });
                 $(sliderHtml).appendTo(this.$el);
 

diff --git a/src/js/views/lutpicker.js b/src/js/views/lutpicker.js
@@ -23,11 +23,10 @@ import _ from 'underscore';
 import * as bootstrap from "bootstrap"
 
 import lut_picker_template from '../../templates/lut_picker.template.html?raw';
-import { showModal } from "./util";
+import { showModal, getJson } from "./util";
 
-import lutsPng from "../../images/luts_10.png";
 // Need to handle dev vv built (omero-web) paths
-const lutsPngUrl = STATIC_DIR + lutsPng;
+import lutsPng from "../../images/luts_10.png";
 
 // Should only ever have a singleton on this
 var LutPickerView = Backbone.View.extend({
@@ -36,51 +35,12 @@ var LutPickerView = Backbone.View.extend({
 
     template: _.template(lut_picker_template),
 
-    LUT_NAMES: ["16_colors.lut",
-                "3-3-2_rgb.lut",
-                "5_ramps.lut",
-                "6_shades.lut",
-                "blue_orange_icb.lut",
-                "brgbcmyw.lut",
-                "cool.lut",
-                "cyan_hot.lut",
-                "edges.lut",
-                "fire.lut",
-                "gem.lut",
-                "glasbey.lut",
-                "glasbey_inverted.lut",
-                "glow.lut",
-                "grays.lut",
-                "green_fire_blue.lut",
-                "hilo.lut",
-                "ica.lut",
-                "ica2.lut",
-                "ica3.lut",
-                "ice.lut",
-                "magenta_hot.lut",
-                "orange_hot.lut",
-                "phase.lut",
-                "physics.lut",
-                "pup_br.lut",
-                "pup_nr.lut",
-                "rainbow_rgb.lut",
-                "red-green.lut",
-                "red_hot.lut",
-                "royal.lut",
-                "sepia.lut",
-                "smart.lut",
-                "spectrum.lut",
-                "thal.lut",
-                "thallium.lut",
-                "thermal.lut",
-                "unionjack.lut",
-                "yellow_hot.lut"],
-
     initialize:function () {
         this.lutModal = new bootstrap.Modal('#lutpickerModal');
+        this.lut_names = [];
     },
 
-    
+
     events: {
         "click button[type='submit']": "handleSubmit",
         "click .lutOption": "pickLut",
@@ -98,7 +58,7 @@ var LutPickerView = Backbone.View.extend({
 
         // Update preview to show LUT
         var bgPos = this.getLutBackgroundPosition(lutName);
-        $(".lutPreview", this.el).css({'background-position': bgPos, 'background-image': `url(${lutsPngUrl})`});
+        $(".lutPreview", this.el).css({'background-position': bgPos, 'background-image': `url(${this.lutsPngUrl})`});
         // Enable OK button
         $("button[type='submit']", this.el).removeAttr('disabled');
     },
@@ -110,7 +70,7 @@ var LutPickerView = Backbone.View.extend({
     },
 
     getLutBackgroundPosition: function(lutName) {
-        var lutIndex = this.LUT_NAMES.indexOf(lutName);
+        var lutIndex = this.lut_names.indexOf(lutName);
         if (lutIndex > -1) {
             return '0px -' + ((lutIndex * 50) +2) + 'px';
         } else {
@@ -135,15 +95,27 @@ var LutPickerView = Backbone.View.extend({
             this.success = options.success;
         }
 
-        this.loadLuts().then((data) => {
-            console.log('data', data);
+        this.loadLuts().then(data => {
             this.luts = data.luts;
+            this.lut_names = data.png_luts;
+            this.is_dynamic_lut = Boolean(data.png_luts_new);
+            if (this.is_dynamic_lut){
+                this.luts = this.luts.map(function(lut) {
+                    lut.png_index = lut.png_index_new;
+                    return lut;
+                });
+                this.lut_names = data.png_luts_new;
+                this.lutsPngUrl = `${WEBGATEWAYINDEX}luts_png/`;
+            } else {
+                this.lutsPngUrl = STATIC_DIR + lutsPng;
+            }
+            this.lut_names = this.lut_names.map(lut_name => lut_name.split('/').pop());
+
             this.render();
         });
     },
 
     render:function() {
-
         var html = "",
             luts;
         if (!this.luts) {
@@ -156,7 +128,19 @@ var LutPickerView = Backbone.View.extend({
                         'name': lut.name,
                         'displayName': this.formatLutName(lut.name)};
             }.bind(this));
-            html = this.template({'luts': luts, lutsPngUrl});
+
+
+            var png_len = this.lut_names.length;
+            if (!this.is_dynamic_lut) {
+                // png of figure does not include the gradient
+                png_len = png_len - 1;
+            }
+            // Set the css variables at the document root, as it's used in different places
+            $(":root").css({
+                "--pngHeight": png_len * 50 + "px",
+                "--lutPng": "url("+this.lutsPngUrl+")"
+            });
+            html = this.template({'luts': luts});
         }
         $(".modal-body", this.el).html(html);
     }

diff --git a/src/templates/channel_slider.template.html b/src/templates/channel_slider.template.html
@@ -7,7 +7,7 @@
             title="<%= _.escape(label) %>"
                     class="btn btn-default channel-btn lutBg <% if (isDark) { print('font-white') } %>"
                     data-index="<%= idx %>"
-                    style="background-color:#<%= color %>; background-position: <%= lutBgPos %>; background-image: url(<%= lutsPngUrl %>)">
+                    style="background-color:#<%= color %>; background-position: <%= lutBgPos %>;">
 
                     <%= _.escape(label) %>
                     <div class="<% if(active) { %>ch-btn-down<% } else if (typeof active == 'boolean') { %>ch-btn-up<% } else { %>ch-btn-flat<% }%>">&nbsp</div>
@@ -73,7 +73,6 @@
             type="range" value="<%= startAvg %>"
             style="background-color:#<%=color%>;
                 --bgPos: <%= lutBgPos %>;
-                --lutPng: url(<%= lutsPngUrl %>);
                 --scaleX: <%= reverse ? -1 : 1 %>"/>
         <!-- data-slidemin and data-slidemax used to prevent sliding start > end etc -->
         <input class="ch_end_slider" data-idx="<%=idx%>" data-slidemin="<%= startAvg %>"

diff --git a/src/templates/lut_picker.template.html b/src/templates/lut_picker.template.html
@@ -5,7 +5,7 @@
 	<% _.each(luts, function(lut, i) { %>
 
 		<button type="button" class="btn btn-default lutOption" data-lut="<%= lut.name %>">
-			<span class="lutBg" style="background-position: <%= lut.bgPos %>; background-image: url(<%= lutsPngUrl %>)">&nbsp</span>
+			<span class="lutBg" style="background-position: <%= lut.bgPos %>;">&nbsp</span>
 			<%= lut.displayName %> </button>
 
 		<% if (i === parseInt(luts.length/2)) { %>