From 73c40460aa48d18702e775abf7abdbb1d2f3cb8d Mon Sep 17 00:00:00 2001 From: Tom-TBT Date: Tue, 8 Oct 2024 13:18:15 +0200 Subject: [PATCH 1/5] handle dynamic lut from omero-web>=5.28 --- omero_figure/urls.py | 5 ++- omero_figure/views.py | 17 ++++++++ src/js/views/channel_slider_view.js | 9 ++-- src/js/views/lutpicker.js | 64 ++++++++--------------------- 4 files changed, 45 insertions(+), 50 deletions(-) diff --git a/omero_figure/urls.py b/omero_figure/urls.py index 1751e4a44..854c7c210 100644 --- a/omero_figure/urls.py +++ b/omero_figure/urls.py @@ -87,5 +87,8 @@ 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"), + + # Get the URL for the LUT png based on the current omero-web version. + path('get_lut_url/', views.get_lut_url, name='figure_lut_url') ] diff --git a/omero_figure/views.py b/omero_figure/views.py index 072e8bbae..09a1052d6 100644 --- a/omero_figure/views.py +++ b/omero_figure/views.py @@ -732,3 +732,20 @@ def images_details(request, conn=None, **kwargs): }) return JsonResponse({'data': data}) + + +def get_lut_url(request, **kwargs): + """ + Get the URL for the LUT png. Return the correct URL based on the current + omero-web version. + """ + try: + # Try to reverse the URL dynamically, which might be version-dependent + url = reverse("webgateway_luts_png") + lut_url = url # Correct dynamically generated URL + except NoReverseMatch: + # Fallback URL if the dynamic route is not available + # Need to handle dev vv built (omero-web) paths + lut_url = "../../images/luts_10.png" + # Return the lut_url as JSON + return JsonResponse({'lut_url': lut_url}) diff --git a/src/js/views/channel_slider_view.js b/src/js/views/channel_slider_view.js index 8df7b3ba6..6eb415c34 100644 --- a/src/js/views/channel_slider_view.js +++ b/src/js/views/channel_slider_view.js @@ -8,9 +8,12 @@ import FigureColorPicker from "../views/colorpicker"; import channel_slider_template from '../../templates/channel_slider.template.html?raw'; -import lutsPng from "../../images/luts_10.png"; -// Need to handle dev vv built (omero-web) paths -const lutsPngUrl = STATIC_DIR + lutsPng; +var lutsPngUrl; +fetch('/get_lut_url/') + .then(response => response.json()) // Parse the response as JSON + .then(data => { + lutsPngUrl = STATIC_DIR + data.lut_url; // Get the URL from the response + }); const SLIDER_INCR_CUTOFF = 100; // If the max value of a slider is below this, use smaller slider increments diff --git a/src/js/views/lutpicker.js b/src/js/views/lutpicker.js index a41c47dad..504fdba9f 100644 --- a/src/js/views/lutpicker.js +++ b/src/js/views/lutpicker.js @@ -25,9 +25,12 @@ import * as bootstrap from "bootstrap" import lut_picker_template from '../../templates/lut_picker.template.html?raw'; import { showModal } from "./util"; -import lutsPng from "../../images/luts_10.png"; -// Need to handle dev vv built (omero-web) paths -const lutsPngUrl = STATIC_DIR + lutsPng; +var lutsPngUrl; +fetch('/get_lut_url/') + .then(response => response.json()) // Parse the response as JSON + .then(data => { + lutsPngUrl = STATIC_DIR + data.lut_url; // Get the URL from the response + }); // Should only ever have a singleton on this var LutPickerView = Backbone.View.extend({ @@ -36,51 +39,11 @@ 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'); }, - + events: { "click button[type='submit']": "handleSubmit", "click .lutOption": "pickLut", @@ -110,7 +73,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 { @@ -138,12 +101,21 @@ var LutPickerView = Backbone.View.extend({ this.loadLuts().then((data) => { console.log('data', data); this.luts = data.luts; + this.lut_names = data.png_luts; + var is_dynamic_lut = ("png_luts_new" in this.data); + if (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.render(); }); }, render:function() { - var html = "", luts; if (!this.luts) { From bf70ed1e6269685e2965051dc75b480ab3296bc5 Mon Sep 17 00:00:00 2001 From: Tom-TBT Date: Wed, 9 Oct 2024 17:36:01 +0200 Subject: [PATCH 2/5] functional dynamic lut --- omero_figure/urls.py | 2 +- omero_figure/views.py | 17 ++++----- src/css/figure.css | 5 +-- src/js/views/channel_slider_view.js | 10 +----- src/js/views/lutpicker.js | 41 ++++++++++++++++------ src/templates/channel_slider.template.html | 3 +- src/templates/lut_picker.template.html | 2 +- 7 files changed, 46 insertions(+), 34 deletions(-) diff --git a/omero_figure/urls.py b/omero_figure/urls.py index 854c7c210..de59b0672 100644 --- a/omero_figure/urls.py +++ b/omero_figure/urls.py @@ -90,5 +90,5 @@ path('images_details/', views.images_details, name="figure_images_details"), # Get the URL for the LUT png based on the current omero-web version. - path('get_lut_url/', views.get_lut_url, name='figure_lut_url') + path('is_dynamic_lut/', views.is_dynamic_lut, name='figure_dynamic_lut') ] diff --git a/omero_figure/views.py b/omero_figure/views.py index 09a1052d6..1d2b18211 100644 --- a/omero_figure/views.py +++ b/omero_figure/views.py @@ -734,18 +734,19 @@ def images_details(request, conn=None, **kwargs): return JsonResponse({'data': data}) -def get_lut_url(request, **kwargs): +@login_required() +def is_dynamic_lut(request, **kwargs): """ - Get the URL for the LUT png. Return the correct URL based on the current - omero-web version. + Return true or false for dynamic lut usage URL based on the + current omero-web version. """ + is_dynamic_lut = False try: # Try to reverse the URL dynamically, which might be version-dependent - url = reverse("webgateway_luts_png") - lut_url = url # Correct dynamically generated URL + _ = reverse("webgateway_luts_png") + is_dynamic_lut = True except NoReverseMatch: # Fallback URL if the dynamic route is not available - # Need to handle dev vv built (omero-web) paths - lut_url = "../../images/luts_10.png" + pass # Return the lut_url as JSON - return JsonResponse({'lut_url': lut_url}) + return JsonResponse({'is_dynamic_lut': is_dynamic_lut}) diff --git a/src/css/figure.css b/src/css/figure.css index 9adaf4216..e5774370f 100644 --- a/src/css/figure.css +++ b/src/css/figure.css @@ -1031,7 +1031,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; } @@ -1042,7 +1043,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 index 6eb415c34..645c13eca 100644 --- a/src/js/views/channel_slider_view.js +++ b/src/js/views/channel_slider_view.js @@ -8,13 +8,6 @@ import FigureColorPicker from "../views/colorpicker"; import channel_slider_template from '../../templates/channel_slider.template.html?raw'; -var lutsPngUrl; -fetch('/get_lut_url/') - .then(response => response.json()) // Parse the response as JSON - .then(data => { - lutsPngUrl = STATIC_DIR + data.lut_url; // Get the URL from the response - }); - const SLIDER_INCR_CUTOFF = 100; // If the max value of a slider is below this, use smaller slider increments @@ -388,8 +381,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 index 504fdba9f..06b97211b 100644 --- a/src/js/views/lutpicker.js +++ b/src/js/views/lutpicker.js @@ -23,14 +23,21 @@ import _ from 'underscore'; import * as bootstrap from "bootstrap" import lut_picker_template from '../../templates/lut_picker.template.html?raw'; -import { showModal } from "./util"; - -var lutsPngUrl; -fetch('/get_lut_url/') - .then(response => response.json()) // Parse the response as JSON - .then(data => { - lutsPngUrl = STATIC_DIR + data.lut_url; // Get the URL from the response - }); +import { showModal, getJson } from "./util"; + +// Need to handle dev vv built (omero-web) paths +import lutsPng from "../../images/luts_10.png"; + +var url = `${BASE_WEBFIGURE_URL}is_dynamic_lut/`; +var lutsPngUrl, is_dynamic_lut; +getJson(url).then(data => { + is_dynamic_lut = data.is_dynamic_lut; + if (is_dynamic_lut) { + lutsPngUrl = `${WEBGATEWAYINDEX}luts_png/`; + } else { + lutsPngUrl = STATIC_DIR + lutsPng; + } +}); // Should only ever have a singleton on this var LutPickerView = Backbone.View.extend({ @@ -41,6 +48,7 @@ var LutPickerView = Backbone.View.extend({ initialize:function () { this.lutModal = new bootstrap.Modal('#lutpickerModal'); + this.lut_names = []; }, @@ -102,7 +110,6 @@ var LutPickerView = Backbone.View.extend({ console.log('data', data); this.luts = data.luts; this.lut_names = data.png_luts; - var is_dynamic_lut = ("png_luts_new" in this.data); if (is_dynamic_lut){ this.luts = this.luts.map(function(lut) { lut.png_index = lut.png_index_new; @@ -110,7 +117,7 @@ var LutPickerView = Backbone.View.extend({ }); this.lut_names = data.png_luts_new; } - + this.lut_names = this.lut_names.map(lut_name => lut_name.split('/').pop()); this.render(); }); }, @@ -128,7 +135,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 (!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("+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 index 0cea093c2..9ec01ade3 100644 --- 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) %>
 
@@ -73,7 +73,6 @@ type="range" value="<%= startAvg %>" style="background-color:#<%=color%>; --bgPos: <%= lutBgPos %>; - --lutPng: url(<%= lutsPngUrl %>); --scaleX: <%= reverse ? -1 : 1 %>"/> <% if (i === parseInt(luts.length/2)) { %> From 93d1b156bfe9343e4c8df5822cd28a3c380ca1e3 Mon Sep 17 00:00:00 2001 From: Tom-TBT Date: Thu, 10 Oct 2024 13:14:05 +0200 Subject: [PATCH 3/5] flake8 fix --- omero_figure/urls.py | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/omero_figure/urls.py b/omero_figure/urls.py index de59b0672..c21a7b7b0 100644 --- a/omero_figure/urls.py +++ b/omero_figure/urls.py @@ -87,8 +87,9 @@ 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"), - # Get the URL for the LUT png based on the current omero-web version. + # Get the URL for the LUT png based on the current omero-web version path('is_dynamic_lut/', views.is_dynamic_lut, name='figure_dynamic_lut') ] From d4358e047e654a02898bfc06b5b04542a4082803 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 19 Nov 2024 17:36:19 +0100 Subject: [PATCH 4/5] get is_dynamic_lut from data.png_luts_new --- src/js/views/lutpicker.js | 27 ++++++++++----------------- 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/src/js/views/lutpicker.js b/src/js/views/lutpicker.js index 06b97211b..468b4041c 100644 --- a/src/js/views/lutpicker.js +++ b/src/js/views/lutpicker.js @@ -28,17 +28,6 @@ import { showModal, getJson } from "./util"; // Need to handle dev vv built (omero-web) paths import lutsPng from "../../images/luts_10.png"; -var url = `${BASE_WEBFIGURE_URL}is_dynamic_lut/`; -var lutsPngUrl, is_dynamic_lut; -getJson(url).then(data => { - is_dynamic_lut = data.is_dynamic_lut; - if (is_dynamic_lut) { - lutsPngUrl = `${WEBGATEWAYINDEX}luts_png/`; - } else { - lutsPngUrl = STATIC_DIR + lutsPng; - } -}); - // Should only ever have a singleton on this var LutPickerView = Backbone.View.extend({ @@ -69,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'); }, @@ -106,18 +95,22 @@ 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; - if (is_dynamic_lut){ + 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(); }); }, @@ -138,14 +131,14 @@ var LutPickerView = Backbone.View.extend({ var png_len = this.lut_names.length; - if (!is_dynamic_lut) { + 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("+lutsPngUrl+")" + "--lutPng": "url("+this.lutsPngUrl+")" }); html = this.template({'luts': luts}); } From d7cf65c6bd74a52d16ef81ec52ae08fd899ed116 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 19 Nov 2024 17:38:33 +0100 Subject: [PATCH 5/5] remove is_dynamic_lut() from views.py --- omero_figure/urls.py | 5 +---- omero_figure/views.py | 18 ------------------ 2 files changed, 1 insertion(+), 22 deletions(-) diff --git a/omero_figure/urls.py b/omero_figure/urls.py index c21a7b7b0..e0c0f1478 100644 --- a/omero_figure/urls.py +++ b/omero_figure/urls.py @@ -88,8 +88,5 @@ # Get group and owner info for multiple images. ?image=1,2,3 path('images_details/', views.images_details, - name="figure_images_details"), - - # Get the URL for the LUT png based on the current omero-web version - path('is_dynamic_lut/', views.is_dynamic_lut, name='figure_dynamic_lut') + name="figure_images_details") ] diff --git a/omero_figure/views.py b/omero_figure/views.py index 1d2b18211..072e8bbae 100644 --- a/omero_figure/views.py +++ b/omero_figure/views.py @@ -732,21 +732,3 @@ def images_details(request, conn=None, **kwargs): }) return JsonResponse({'data': data}) - - -@login_required() -def is_dynamic_lut(request, **kwargs): - """ - Return true or false for dynamic lut usage URL based on the - current omero-web version. - """ - is_dynamic_lut = False - try: - # Try to reverse the URL dynamically, which might be version-dependent - _ = reverse("webgateway_luts_png") - is_dynamic_lut = True - except NoReverseMatch: - # Fallback URL if the dynamic route is not available - pass - # Return the lut_url as JSON - return JsonResponse({'is_dynamic_lut': is_dynamic_lut})