From f646b8a47ea40823641f9e735f294768573017c3 Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Mon, 18 Nov 2024 16:56:36 +0100
Subject: [PATCH 01/39] calibration bar proof of concept

---
 src/css/figure.css                     | 57 ++++++++++++++++
 src/index.html                         |  4 ++
 src/js/models/panel_model.js           | 14 ++++
 src/js/views/calib_form_view.js        | 93 ++++++++++++++++++++++++++
 src/js/views/panel_view.js             | 36 ++++++++++
 src/js/views/right_panel_view.js       | 13 ++++
 src/templates/calib_bar.template.html  |  8 +++
 src/templates/calib_form.template.html | 32 +++++++++
 8 files changed, 257 insertions(+)
 create mode 100644 src/js/views/calib_form_view.js
 create mode 100644 src/templates/calib_bar.template.html
 create mode 100644 src/templates/calib_form.template.html

diff --git a/src/css/figure.css b/src/css/figure.css
index fa49419ec..7237e7e76 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1335,3 +1335,60 @@
     .form-inline{
         cursor: move;
     }
+
+    .cali_styling_form {
+        margin-bottom: 1.5rem;
+    }
+
+    .calib_form .row {
+        align-items: center;
+        display: flex;
+        gap: 3px;
+        margin-top: 3px;
+    }
+
+    .calib_form .calib_length {
+        padding-right: 0;
+    }
+
+    .calib {
+        position: absolute;
+        width: 100%;
+        bottom: 100%;
+        margin-bottom: 3px;
+    }
+
+    .calib img{
+        width: 100%;
+    }
+
+    .calib_top {
+        bottom: 100%;
+        width: 100%;
+        margin-bottom: 3px;
+    }
+
+    .calib_bottom {
+        top: 100%;
+        width: 100%;
+    }
+
+    .calib_leftvert {
+        position: absolute; 
+        left: -20px; 
+        top: 50%; 
+        transform: translateY(-50%) rotate(90deg); 
+    }
+
+    .calib_rightvert {
+        position: absolute; 
+        right: -20px; 
+        top: 50%; 
+        transform: translateY(-50%) rotate(90deg); 
+    }
+    .calibPreview {
+        /* background-image css add by lutpicker.js */
+        width: 100%;
+        height: 35px;
+        /* border-top: 1px solid #e5e5e5; */
+    }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index bce1b5be9..0cbbf0fbc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1870,6 +1870,10 @@ <h5>Scalebar</h5>
 
             <hr />
 
+            <h5>Calibration Bar</h5>
+            <div id="calib_form"></div>
+            <hr />
+
             <h5 style="float: left; margin-top: 10px">Add Labels</h5>
 
             <button
diff --git a/src/js/models/panel_model.js b/src/js/models/panel_model.js
index 7d4b3acee..882e2a481 100644
--- a/src/js/models/panel_model.js
+++ b/src/js/models/panel_model.js
@@ -239,6 +239,20 @@
             this.save('scalebar', sb);
         },
 
+        hide_calib: function() {
+            // keep all calib properties, except 'show'
+            var cb = $.extend(true, {}, this.get('calib'));
+            cb.show = false;
+            this.save('calib', cb);
+        },
+
+        save_calib: function(new_cb) {
+            // update only the attributes of calib we're passed
+            var old_cb = $.extend(true, {}, this.get('calib') || {});
+            var cb = $.extend(true, old_cb, new_cb);
+            this.save('calib', cb);
+        },
+
         // Simple checking whether shape is in viewport (x, y, width, height)
         // Return true if any of the points in shape are within viewport.
         is_shape_in_viewport: function(shape, viewport) {
diff --git a/src/js/views/calib_form_view.js b/src/js/views/calib_form_view.js
new file mode 100644
index 000000000..eddaa609c
--- /dev/null
+++ b/src/js/views/calib_form_view.js
@@ -0,0 +1,93 @@
+import Backbone from "backbone";
+import _, { forEach } from "underscore";
+import $ from "jquery";
+
+import calib_form_template from '../../templates/calib_form.template.html?raw';
+
+var CalibBarFormView = Backbone.View.extend({
+
+    template: _.template(calib_form_template),
+
+    initialize: function(opts) {
+        this.render = _.debounce(this.render);
+        this.models = opts.models;
+
+        var self = this;
+        this.models.forEach(function(m) {
+            console.log(m);
+            self.listenTo(m, 'change:calib', self.render);
+        });
+    },
+
+    events: {
+        "submit .calib_form": "update_calib",
+        "change .btn": "dropdown_btn_changed",
+        "click .hide_calib": "hide_calib",
+    },
+
+    dropdown_btn_changed: function(event) {
+        $(event.target).closest('form').submit();
+    },
+
+    hide_calib: function() {
+        this.models.forEach(function(m) {
+            m.hide_calib();
+        });
+    },
+
+    update_calib: function(event) {
+        var $form = $('.calib_form');
+        var position = $('.label-position i:first', $form).attr('data-position');
+
+        this.models.forEach(function(m) {
+            var lutBgPos = m.get('lutBgPos');
+            var cb = { show: true, lutBgPos: lutBgPos };
+            if (position != '-') cb.position = position;
+            m.save_calib(cb);
+        });
+        return false;
+    },
+
+    updateBgPos: function() {
+        this.models.forEach((m) => {
+            // submit form of calib to set values to each panel
+            
+        });
+    },
+
+    render: function() {
+        var cb_json = {show: false},
+            hidden = false,
+            cb;
+
+        this.models.forEach(function(m) {
+            cb = m.get('calib');
+
+            // if (cb) {
+            //     if (!cb_json.length) {
+            //         cb_json.position = cb.position;
+            //         cb_json.lutBgPos = lutBgPos || 0;
+            //     } else {
+            //         if (cb_json.position != cb.position) cb_json.position = '-';
+            //     }
+            // }
+            if (!cb || !cb.show) hidden = true;
+        });
+
+        if (this.models.length === 0 || hidden) {
+            cb_json.show = true;
+        }
+
+        cb_json.position = cb_json.position || 'top';
+
+        if(cb_json.show){
+            this.updateBgPos();
+        }
+        console.log("last json value", cb_json);
+        var html = this.template(cb_json);
+        this.$el.html(html);
+        return this;
+    }
+});
+
+export default CalibBarFormView;
\ No newline at end of file
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 90a8a961a..05b190281 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -12,6 +12,8 @@
     import label_right_vertical_template from '../../templates/labels/label_right_vertical.template.html?raw';
     import label_table_template from '../../templates/labels/label_table.template.html?raw';
     import scalebar_panel_template from '../../templates/scalebar_panel.template.html?raw';
+    import calib_bar_panel_template from '../../templates/calib_bar.template.html?raw';
+    import FigureLutPicker from "../views/lutpicker";
     
     // -------------------------Panel View -----------------------------------
     // A Panel is a <div>, added to the #paper by the FigureView below.
@@ -24,6 +26,7 @@
         label_right_vertical_template: _.template(label_right_vertical_template),
         label_table_template: _.template(label_table_template),
         scalebar_template: _.template(scalebar_panel_template),
+        calib_template: _.template(calib_bar_panel_template),
 
 
         initialize: function(opts) {
@@ -33,6 +36,7 @@
                 'change:x change:y change:width change:height change:zoom change:dx change:dy change:rotation',
                 this.render_layout);
             this.listenTo(this.model, 'change:scalebar change:pixel_size_x', this.render_scalebar);
+            this.listenTo(this.model, 'change:calib change:channels', this.render_calib);
             this.listenTo(this.model,
                 'change:zoom change:dx change:dy change:width change:height change:channels change:theZ change:theT change:z_start change:z_end change:z_projection change:min_export_dpi change:pixel_range',
                 this.render_image);
@@ -314,6 +318,37 @@
             this.render_layout();
         },
 
+        render_calib: function() {
+
+            if (this.$calib) {
+                this.$calib.remove();
+            }
+            var cb = this.model.get('calib');
+            var color = "";
+            for (const chann of this.model.get('channels')) {
+                if(chann.active) {
+                    color = chann.color
+                    break;
+                }
+            }
+            var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
+            if (cb && cb.show) {
+                var cb_json = {
+                        position: cb.position,
+                        show: cb.show,
+                        lutBgPos: lutBgPos,
+                };
+
+                
+                var cb_html = this.calib_template(cb_json);
+                this.$el.append(cb_html);
+            }
+            this.$calib = $(".calib", this.$el);
+
+            // update calib size wrt current sizes
+            this.render_layout();
+        },
+
         render: function() {
             // This render() is only called when the panel is first created
             // to set up the elements. It then calls other render methods to
@@ -334,6 +369,7 @@
             this.render_image();
             this.render_labels();
             this.render_scalebar();     // also calls render_layout()
+            this.render_calib();
 
             // At this point, element is not ready for Raphael svg
             // If we wait a short time, works fine
diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js
index b0c5775e2..457642ef3 100644
--- a/src/js/views/right_panel_view.js
+++ b/src/js/views/right_panel_view.js
@@ -15,6 +15,7 @@
     import InfoPanelView from "./info_panel_view";
     import ChannelSliderView from "./channel_slider_view";
     import ScalebarFormView from "./scalebar_form_view";
+    import CalibBarFormView from "./calib_form_view";
     import ZtSlidersView from "./zt_sliders_view";
 
     import image_display_options_template from '../../templates/image_display_options.template.html?raw';
@@ -536,6 +537,18 @@
             if (old_sb) {
                 old_sb.remove();
             }
+            // show calib form for selected panels
+            var old_cb = this.calib_form;
+            var $calib_form = $("#calib_form");
+
+            if (selected.length > 0) {
+                this.calib_form = new CalibBarFormView({models: selected});
+                this.calib_form.render();
+                $calib_form.empty().append(this.calib_form.$el);
+            }
+            if (old_cb) {
+                old_cb.remove();
+            }
 
             return this;
         }
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
new file mode 100644
index 000000000..345317fb2
--- /dev/null
+++ b/src/templates/calib_bar.template.html
@@ -0,0 +1,8 @@
+<div class="calib label_<%= position %>">
+    <% if (show) { %>
+        <div class="calibPreview lutBg"  style="border:1px solid black;
+                background-position: <%= lutBgPos %>;   
+                background-image: url('/images/luts_10.png');
+                width: 100%;"></div>
+    <% } %>
+</div>
\ No newline at end of file
diff --git a/src/templates/calib_form.template.html b/src/templates/calib_form.template.html
new file mode 100644
index 000000000..6db37da9b
--- /dev/null
+++ b/src/templates/calib_form.template.html
@@ -0,0 +1,32 @@
+<form class="calib_form">
+    <div class="form-group col-sm-auto btn-group">
+        <div class="btn-group">
+            <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle" 
+                    title="Position" data-bs-toggle="dropdown">
+                <i data-position="<%= position %>" class="bi-box-arrow-in-<%= position.replace('bottom', 'down').replace('top', 'up').replace('rightvert', 'right').replace('leftvert', 'left') %> dropdown_icon"></i>
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" role="menu">
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="top" class="bi-box-arrow-up dropdown_icon"></i> Top</a>
+                </li>
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="bottom" class="bi-box-arrow-down dropdown_icon"></i> Bottom</a>
+                </li>
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="leftvert" class="bi-box-arrow-left dropdown_icon"></i> Left vertical</a>
+                </li>            
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="rightvert" class="bi-box-arrow-right dropdown_icon"></i> Right Vertical</a>
+                </li>            
+            </ul>
+            <div class="col-auto input-group-sm" style="flex: 1 1 auto; padding-right: 0">
+                <% if (show){ %>
+                    <button type="submit" class="show_calib btn btn-sm btn-success float-end">Show</button>
+                <% } else { %>
+                    <button type="button" class="hide_calib btn btn-outline-secondary btn-sm float-end">Hide</button>
+                <% } %>
+            </div>
+        </div>
+    </div>
+</form>

From 9fed89d17fd20612948fc03943a6134ab71e85b5 Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Mon, 18 Nov 2024 17:02:26 +0100
Subject: [PATCH 02/39] Calib bar code cleanup

---
 src/js/views/calib_form_view.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/js/views/calib_form_view.js b/src/js/views/calib_form_view.js
index eddaa609c..4c05c374d 100644
--- a/src/js/views/calib_form_view.js
+++ b/src/js/views/calib_form_view.js
@@ -48,13 +48,6 @@ var CalibBarFormView = Backbone.View.extend({
         return false;
     },
 
-    updateBgPos: function() {
-        this.models.forEach((m) => {
-            // submit form of calib to set values to each panel
-            
-        });
-    },
-
     render: function() {
         var cb_json = {show: false},
             hidden = false,
@@ -79,11 +72,6 @@ var CalibBarFormView = Backbone.View.extend({
         }
 
         cb_json.position = cb_json.position || 'top';
-
-        if(cb_json.show){
-            this.updateBgPos();
-        }
-        console.log("last json value", cb_json);
         var html = this.template(cb_json);
         this.$el.html(html);
         return this;

From f87bf2c329b48c3b51e7e73828bd1229d99d826b Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Fri, 22 Nov 2024 16:08:35 +0100
Subject: [PATCH 03/39] Added dynamic position and adjustable thickness of the
 bar

---
 src/css/figure.css                     | 59 +++++++++-------------
 src/js/views/calib_form_view.js        | 22 ++++----
 src/js/views/panel_view.js             |  3 +-
 src/templates/calib_bar.template.html  |  8 +--
 src/templates/calib_form.template.html | 69 +++++++++++++++-----------
 5 files changed, 83 insertions(+), 78 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 7237e7e76..bf087f703 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1336,59 +1336,46 @@
         cursor: move;
     }
 
-    .cali_styling_form {
-        margin-bottom: 1.5rem;
-    }
-
-    .calib_form .row {
-        align-items: center;
-        display: flex;
-        gap: 3px;
-        margin-top: 3px;
+    .calib {
+        position: absolute;
     }
 
-    .calib_form .calib_length {
-        padding-right: 0;
+    .calib_middle td {
+        vertical-align: middle;
     }
 
-    .calib {
+    .calib_leftvert{
         position: absolute;
+        top: 0%;
+        right:100%;
+        height: 100%;
         width: 100%;
-        bottom: 100%;
-        margin-bottom: 3px;
+        margin-right: 10px;
+        -webkit-transform: rotate(-90deg);
+        transform: scaleX(-1) rotate(-90deg);
     }
 
-    .calib img{
+    .calib_rightvert{
+        position: absolute;
+        top: 0%;
+        left: 100%;
         width: 100%;
+        height: 100%;
+        margin-left: 10px;
+        -webkit-transform: rotate(-90deg);
+        transform: rotate(-90deg);
     }
 
     .calib_top {
         bottom: 100%;
         width: 100%;
-        margin-bottom: 3px;
+        left: 0%;
+        margin-bottom: 10px;
     }
 
     .calib_bottom {
         top: 100%;
         width: 100%;
+        left: 0%;
+        margin-top: 10px;
     }
-
-    .calib_leftvert {
-        position: absolute; 
-        left: -20px; 
-        top: 50%; 
-        transform: translateY(-50%) rotate(90deg); 
-    }
-
-    .calib_rightvert {
-        position: absolute; 
-        right: -20px; 
-        top: 50%; 
-        transform: translateY(-50%) rotate(90deg); 
-    }
-    .calibPreview {
-        /* background-image css add by lutpicker.js */
-        width: 100%;
-        height: 35px;
-        /* border-top: 1px solid #e5e5e5; */
-    }
\ No newline at end of file
diff --git a/src/js/views/calib_form_view.js b/src/js/views/calib_form_view.js
index 4c05c374d..af4b5a93c 100644
--- a/src/js/views/calib_form_view.js
+++ b/src/js/views/calib_form_view.js
@@ -37,12 +37,14 @@ var CalibBarFormView = Backbone.View.extend({
 
     update_calib: function(event) {
         var $form = $('.calib_form');
-        var position = $('.label-position i:first', $form).attr('data-position');
+        var position = $('.label-position i:first', $form).attr('data-position'),
+            thickness = parseInt($('.calib-thickness', $form).val());
 
         this.models.forEach(function(m) {
             var lutBgPos = m.get('lutBgPos');
             var cb = { show: true, lutBgPos: lutBgPos };
             if (position != '-') cb.position = position;
+            if (thickness != '-') cb.thickness = thickness;
             m.save_calib(cb);
         });
         return false;
@@ -56,14 +58,15 @@ var CalibBarFormView = Backbone.View.extend({
         this.models.forEach(function(m) {
             cb = m.get('calib');
 
-            // if (cb) {
-            //     if (!cb_json.length) {
-            //         cb_json.position = cb.position;
-            //         cb_json.lutBgPos = lutBgPos || 0;
-            //     } else {
-            //         if (cb_json.position != cb.position) cb_json.position = '-';
-            //     }
-            // }
+            if (cb) {
+                if (!cb_json.length) {
+                    cb_json.position = cb.position;
+                    cb_json.thickness = cb.thickness;
+                } else {
+                    if (cb_json.position != cb.position) cb_json.position = '-';
+                    if (cb_json.thickness != cb.thickness) cb_json.thickness = '-';
+                }
+            }
             if (!cb || !cb.show) hidden = true;
         });
 
@@ -72,6 +75,7 @@ var CalibBarFormView = Backbone.View.extend({
         }
 
         cb_json.position = cb_json.position || 'top';
+        cb_json.thickness = cb_json.thickness || 45;
         var html = this.template(cb_json);
         this.$el.html(html);
         return this;
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 05b190281..bcc80b359 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -336,10 +336,9 @@
                 var cb_json = {
                         position: cb.position,
                         show: cb.show,
+                        thickness: cb.thickness,
                         lutBgPos: lutBgPos,
                 };
-
-                
                 var cb_html = this.calib_template(cb_json);
                 this.$el.append(cb_html);
             }
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
index 345317fb2..b3ffc821d 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/calib_bar.template.html
@@ -1,8 +1,10 @@
-<div class="calib label_<%= position %>">
+<div class="calib  calib_<%= position %>">
     <% if (show) { %>
-        <div class="calibPreview lutBg"  style="border:1px solid black;
+        <div class="lutBg"  style="border:1px solid rgb(0, 0, 0);
+                height: <%= thickness %>px;
                 background-position: <%= lutBgPos %>;   
                 background-image: url('/images/luts_10.png');
-                width: 100%;"></div>
+                margin-right: 0px; margin-left: 0px;
+                "></div>
     <% } %>
 </div>
\ No newline at end of file
diff --git a/src/templates/calib_form.template.html b/src/templates/calib_form.template.html
index 6db37da9b..109b0ff83 100644
--- a/src/templates/calib_form.template.html
+++ b/src/templates/calib_form.template.html
@@ -1,32 +1,45 @@
 <form class="calib_form">
-    <div class="form-group col-sm-auto btn-group">
-        <div class="btn-group">
-            <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle" 
-                    title="Position" data-bs-toggle="dropdown">
-                <i data-position="<%= position %>" class="bi-box-arrow-in-<%= position.replace('bottom', 'down').replace('top', 'up').replace('rightvert', 'right').replace('leftvert', 'left') %> dropdown_icon"></i>
-                <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu" role="menu">
-                <li><a class="dropdown-item" href="#">
-                    <i data-position="top" class="bi-box-arrow-up dropdown_icon"></i> Top</a>
-                </li>
-                <li><a class="dropdown-item" href="#">
-                    <i data-position="bottom" class="bi-box-arrow-down dropdown_icon"></i> Bottom</a>
-                </li>
-                <li><a class="dropdown-item" href="#">
-                    <i data-position="leftvert" class="bi-box-arrow-left dropdown_icon"></i> Left vertical</a>
-                </li>            
-                <li><a class="dropdown-item" href="#">
-                    <i data-position="rightvert" class="bi-box-arrow-right dropdown_icon"></i> Right Vertical</a>
-                </li>            
-            </ul>
-            <div class="col-auto input-group-sm" style="flex: 1 1 auto; padding-right: 0">
-                <% if (show){ %>
-                    <button type="submit" class="show_calib btn btn-sm btn-success float-end">Show</button>
-                <% } else { %>
-                    <button type="button" class="hide_calib btn btn-outline-secondary btn-sm float-end">Hide</button>
-                <% } %>
-            </div>
+    <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
+        <div class="col-auto input-group-sm">
+            <label class="col-form-label col-form-label-sm" style="width:50px">Height</label>
+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+            <input type="number" class="label-text calib-thickness form-control input-sm" 
+            placeholder="Height" value="<%= thickness %>" style="width:52px" />
+        </div>
+        <div class="col-auto input-group-sm" style="margin-right: 10px;">
+            <label class="col-form-label col-form-label-sm">px</label>
+        </div>
+        <div class="col-auto input-group-sm">
+            <label class="col-form-label col-form-label-sm" style="width:50px">Position</label>
+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+        <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle" 
+                title="Position" data-bs-toggle="dropdown">
+            <i data-position="<%= position %>" class="bi-box-arrow-in-<%= position.replace('bottom', 'down').replace('top', 'up').replace('rightvert', 'right').replace('leftvert', 'left') %> dropdown_icon"></i>
+            <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" role="menu">
+            <li><a class="dropdown-item" href="#">
+                <i data-position="top" class="bi-box-arrow-up dropdown_icon"></i> Top</a>
+            </li>
+            <li><a class="dropdown-item" href="#">
+                <i data-position="bottom" class="bi-box-arrow-down dropdown_icon"></i> Bottom</a>
+            </li>
+            <li><a class="dropdown-item" href="#">
+                <i data-position="leftvert" class="bi-box-arrow-left dropdown_icon"></i> Left</a>
+            </li>
+            <li><a class="dropdown-item" href="#">
+                <i data-position="rightvert" class="bi-box-arrow-right dropdown_icon"></i> Right</a>
+            </li>
+        </ul>
+    </div>
+        <div class="col-auto input-group-sm" style="flex: 1 1 auto; padding-right: 0">
+            <% if (show){ %>
+                <button type="submit" class="show_calib btn btn-sm btn-success float-end">Show</button>
+            <% } else { %>
+                <button type="button" class="hide_calib btn btn-outline-secondary btn-sm float-end">Hide</button>
+            <% } %>
         </div>
     </div>
 </form>

From 9164684d8fcfade95c23c800fc5b9a8d444a5167 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Sat, 23 Nov 2024 03:44:58 +0100
Subject: [PATCH 04/39] colobar implementation start in python export script

---
 .../omero/figure_scripts/Figure_To_Pdf.py     | 164 ++++++++++++++++--
 1 file changed, 152 insertions(+), 12 deletions(-)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index cec8edb8a..e1268211a 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -60,6 +60,7 @@
     from reportlab.lib.colors import Color
     from reportlab.platypus import Paragraph
     from reportlab.lib.enums import TA_LEFT, TA_CENTER, TA_RIGHT
+    from reportlab.lib.utils import ImageReader
     reportlab_installed = True
 except ImportError:
     reportlab_installed = False
@@ -1525,6 +1526,140 @@ def draw_scalebar(self, panel, region_width, page):
                 font_size, (red, green, blue),
                 align="center")
 
+    def get_color_ramp(self, channel):
+        """
+        Return the 256 1D array of the LUT from the server or
+        the color gradient.
+
+        LUT files on the server are read with the script service, and
+        file content is parsed with a custom implementation.
+        """
+        color = channel["color"]
+
+        # Convert the hexadecimal string to RGB
+        color_ramp = None
+        if len(color) == 6:
+            try:
+                r = int(color[0:2], 16)
+                g = int(color[2:4], 16)
+                b = int(color[4:6], 16)
+                color_ramp = (numpy.linspace(0, 1, 256).reshape(-1, 1)
+                              * numpy.array([r, g, b], dtype=numpy.uint8).T)
+                color_ramp = color_ramp.astype(numpy.uint8)
+            except ValueError:
+                pass
+
+        else:
+            scriptService = self.conn.getScriptService()
+            luts = scriptService.getScriptsByMimetype("text/x-lut")
+            for lut in luts:
+                if lut.name.val != color:
+                    continue
+
+                orig_file = self.conn.getObject(
+                    "OriginalFile", lut.getId()._val)
+                lut_data = bytearray()
+                # Collect the LUT data in byte form
+                for chunk in orig_file.getFileInChunks():
+                    lut_data.extend(chunk)
+
+                if len(lut_data) in [768, 800]:
+                    lut_arr = numpy.array(lut_data, dtype="uint8")[-768:]
+                    color_ramp = lut_arr.reshape(3, 256).T
+                else:
+                    lut_data = lut_data.decode()
+                    r, g, b = [], [], []
+
+                    lines = lut_data.split("\n")
+                    sep = None
+                    if "\t" in lines[0]:
+                        sep = "\t"
+                    for line in lines:
+                        val = line.split(sep)
+                        if len(val) < 3 or not val[-1].isnumeric():
+                            continue
+                        r.append(int(val[-3]))
+                        g.append(int(val[-2]))
+                        b.append(int(val[-1]))
+                    color_ramp = numpy.array([r, g, b], dtype=numpy.uint8).T
+                break
+
+        if channel.get("reverseIntensity", False):
+            color_ramp = color_ramp[::-1]
+
+        if color_ramp is None:
+            return numpy.zeros((1, 256, 3), dtype=numpy.uint8)
+        else:
+            return color_ramp[numpy.newaxis]
+
+    def draw_colorbar(self, panel, page):
+        """
+        Add the colorbar to the page.
+        Here we calculate the position of colorbar but delegate
+        to self.draw_scalebar_line() and self.draw_text() to actually place
+        the colorbar, ticks and labels on PDF/TIFF
+        """
+
+        if "calib" in panel:
+            calib = panel["calib"]
+            if "show" in calib:
+                if not calib["show"]:
+                    return
+        else:
+            return
+
+        channel = None
+        for c in panel["channels"]:
+            if c["active"]:
+                channel = c
+                break
+        if not channel:
+            return
+
+        n_ticks = 5  # calib['n_ticks']
+        x = panel['x']
+        y = panel['y']
+        width = panel['width']
+        height = panel['height']
+        offset = 10
+        thickness = calib['thickness']
+
+        color_ramp = self.get_color_ramp(channel)
+
+        cb_json = {
+            'zoom': '100',
+            'dx': 0,
+            'dy': 0,
+            'orig_height': panel['orig_height'],
+            'orig_width': panel['orig_width'],
+        }
+
+        if calib["position"] in ["leftvert", "rightvert"]:
+            color_ramp = color_ramp.transpose((1, 0, 2))[::-1]
+            cb_json['width'] = thickness
+            cb_json['height'] = height
+            cb_json['y'] = y
+            cb_json['x'] = x - (offset + thickness)
+            if calib["position"] == "rightvert":
+                cb_json['x'] = x + width + offset
+        elif calib["position"] in ["top", "bottom"]:
+            cb_json['width'] = width
+            cb_json['height'] = thickness
+            cb_json['x'] = x
+            cb_json['y'] = y - (offset + thickness)
+            if calib["position"] == "bottom":
+                cb_json['y'] = y + height + offset
+
+        pil_img = Image.fromarray(color_ramp)
+        img_name = channel["color"] + ".png"
+
+        # for PDF export, we might have a target dpi
+        dpi = panel.get('min_export_dpi', None)
+
+        # Paste the panel to PDF or TIFF image
+        self.paste_image(pil_img, img_name, cb_json, page, dpi,
+                         is_colorbar=True)
+
     def is_big_image(self, image):
         """Return True if this is a 'big' tiled image."""
         max_w, max_h = self.conn.getMaxPlaneSize()
@@ -1784,12 +1919,6 @@ def draw_panel(self, panel, page, idx):
         """
         image_id = panel['imageId']
         channels = panel['channels']
-        x = panel['x']
-        y = panel['y']
-
-        # Handle page offsets
-        x = x - page['x']
-        y = y - page['y']
 
         image = self.conn.getObject("Image", image_id)
         if image is None:
@@ -1998,6 +2127,7 @@ def add_panels_to_page(self, panels_json, image_ids, page):
             # Finally, add scale bar and labels to the page
             self.draw_scalebar(panel, pil_img.size[0], page)
             self.draw_labels(panel, page)
+            self.draw_colorbar(panel, page)
 
     def get_figure_file_ext(self):
         return "pdf"
@@ -2114,7 +2244,8 @@ def draw_scalebar_line(self, x, y, x2, y2, width, rgb):
         c.setStrokeColorRGB(red, green, blue, 1)
         c.line(x, y, x2, y2,)
 
-    def paste_image(self, pil_img, img_name, panel, page, dpi):
+    def paste_image(self, pil_img, img_name, panel, page, dpi,
+                    is_colorbar=False):
         """ Adds the PIL image to the PDF figure. Overwritten for TIFFs """
 
         x = panel['x']
@@ -2146,8 +2277,15 @@ def paste_image(self, pil_img, img_name, panel, page, dpi):
         if self.zip_folder_name is not None:
             img_name = os.path.join(self.zip_folder_name, FINAL_DIR, img_name)
 
-        # Save Image to file, then bring into PDF
-        pil_img.save(img_name)
+        if is_colorbar:
+            # Save the image to a BytesIO stream
+            buffer = BytesIO()
+            pil_img.save(buffer, format="PNG")
+            buffer.seek(0)
+            img_name = ImageReader(buffer)  # drawImage accepts ImageReader
+        else:
+            # Save Image to file, then bring into PDF
+            pil_img.save(img_name)
         # Since coordinate system is 'bottom-up', convert from 'top-down'
         y = self.page_height - height - y
         # set fill color alpha to fully opaque, since this impacts drawImage
@@ -2213,7 +2351,8 @@ def add_page_color(self):
         """ Don't need to do anything for TIFF. Image is already colored."""
         pass
 
-    def paste_image(self, pil_img, img_name, panel, page, dpi=None):
+    def paste_image(self, pil_img, img_name, panel, page,
+                    dpi=None, is_colorbar=False):
         """ Add the PIL image to the current figure page """
 
         x = panel['x']
@@ -2235,8 +2374,9 @@ def paste_image(self, pil_img, img_name, panel, page, dpi=None):
         width = int(round(width))
         height = int(round(height))
 
+        export_img = self.export_images and not is_colorbar
         # Save image BEFORE resampling
-        if self.export_images:
+        if export_img:
             rs_name = os.path.join(self.zip_folder_name, RESAMPLED_DIR,
                                    img_name)
             pil_img.save(rs_name)
@@ -2244,7 +2384,7 @@ def paste_image(self, pil_img, img_name, panel, page, dpi=None):
         # Resize to our target size to match DPI of figure
         pil_img = pil_img.resize((width, height), Image.BICUBIC)
 
-        if self.export_images:
+        if export_img:
             img_name = os.path.join(self.zip_folder_name, FINAL_DIR, img_name)
             pil_img.save(img_name)
 

From 51318ba90ddfd5bf4389249e85dc6e8d8cbaa68b Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Sat, 23 Nov 2024 18:35:08 +0100
Subject: [PATCH 05/39] colorbar ticks and labels

---
 .../omero/figure_scripts/Figure_To_Pdf.py     | 106 +++++++++++++-----
 1 file changed, 79 insertions(+), 27 deletions(-)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index e1268211a..96817feda 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -1600,12 +1600,8 @@ def draw_colorbar(self, panel, page):
         the colorbar, ticks and labels on PDF/TIFF
         """
 
-        if "calib" in panel:
-            calib = panel["calib"]
-            if "show" in calib:
-                if not calib["show"]:
-                    return
-        else:
+        calib = panel.get("calib", {})
+        if not calib.get("show", False):
             return
 
         channel = None
@@ -1616,39 +1612,48 @@ def draw_colorbar(self, panel, page):
         if not channel:
             return
 
-        n_ticks = 5  # calib['n_ticks']
-        x = panel['x']
-        y = panel['y']
-        width = panel['width']
-        height = panel['height']
-        offset = 10
-        thickness = calib['thickness']
-
         color_ramp = self.get_color_ramp(channel)
 
-        cb_json = {
+        offset = 10  # calib["offset"]
+        cbar = {
             'zoom': '100',
             'dx': 0,
             'dy': 0,
             'orig_height': panel['orig_height'],
             'orig_width': panel['orig_width'],
         }
-
+        calib["num_ticks"] = 6
+        calib["tick_len"] = 3
+        start, end = channel["window"]["start"], channel["window"]["end"]
+        labels = numpy.unique(numpy.linspace(start, end,
+                                             num=calib["num_ticks"],
+                                             dtype=int))
         if calib["position"] in ["leftvert", "rightvert"]:
             color_ramp = color_ramp.transpose((1, 0, 2))[::-1]
-            cb_json['width'] = thickness
-            cb_json['height'] = height
-            cb_json['y'] = y
-            cb_json['x'] = x - (offset + thickness)
+            cbar['width'] = calib['thickness']
+            cbar['height'] = panel['height']
+            cbar['y'] = panel['y']
+            cbar['x'] = panel['x'] - (offset + calib['thickness'])
+            labels_x = [cbar['x']]
+            labels_y = cbar['y'] + panel['height'] * (1 - labels / end)
+            align = "right"
             if calib["position"] == "rightvert":
-                cb_json['x'] = x + width + offset
+                cbar['x'] = panel['x'] + panel['width'] + offset
+                labels_x = [cbar['x'] + cbar['width']]
+                align = "left"
+            labels_x *= labels.size  # Duplicate x postions
         elif calib["position"] in ["top", "bottom"]:
-            cb_json['width'] = width
-            cb_json['height'] = thickness
-            cb_json['x'] = x
-            cb_json['y'] = y - (offset + thickness)
+            cbar['width'] = panel['width']
+            cbar['height'] = calib['thickness']
+            cbar['x'] = panel['x']
+            cbar['y'] = panel['y'] - (offset + calib['thickness'])
+            labels_x = cbar['x'] + panel['width'] * labels / end
+            labels_y = [cbar['y']]
+            align = "center"
             if calib["position"] == "bottom":
-                cb_json['y'] = y + height + offset
+                cbar['y'] = panel['y'] + panel['height'] + offset
+                labels_y = [cbar['y'] + cbar['height']]
+            labels_y *= labels.size  # Duplicate y postions
 
         pil_img = Image.fromarray(color_ramp)
         img_name = channel["color"] + ".png"
@@ -1657,9 +1662,56 @@ def draw_colorbar(self, panel, page):
         dpi = panel.get('min_export_dpi', None)
 
         # Paste the panel to PDF or TIFF image
-        self.paste_image(pil_img, img_name, cb_json, page, dpi,
+        self.paste_image(pil_img, img_name, cbar, page, dpi,
                          is_colorbar=True)
 
+        rgb = (0, 0, 0)
+        fontsize = 10
+        tick_width = 1
+        tick_len = 3
+        contour_width = 1
+        for label, pos_x, pos_y in zip(labels, labels_x, labels_y):
+            if calib["position"] == "leftvert":
+                x2 = pos_x - tick_len
+                self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
+                                        tick_width, rgb)
+                self.draw_text(str(label), pos_x - 4,
+                               pos_y - fontsize / 2 + 1,
+                               fontsize, rgb, align=align)
+            elif calib["position"] == "rightvert":
+                x2 = pos_x + tick_len
+                self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
+                                        tick_width, rgb)
+                self.draw_text(str(label), pos_x + 4,
+                               pos_y - fontsize / 2 + 1,
+                               fontsize, rgb, align=align)
+            elif calib["position"] == "top":
+                y2 = pos_y - tick_len
+                self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
+                                        tick_width, rgb)
+                self.draw_text(str(label), pos_x, pos_y - fontsize - 1,
+                               fontsize, rgb, align=align)
+            elif calib["position"] == "bottom":
+                y2 = pos_y + tick_len
+                self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
+                                        tick_width, rgb)
+                self.draw_text(str(label), pos_x, pos_y + 4,
+                               fontsize, rgb, align=align)
+        self.draw_scalebar_line(cbar['x'], cbar['y'],
+                                cbar['x'] + cbar['width'], cbar['y'],
+                                contour_width, rgb)
+        self.draw_scalebar_line(cbar['x'] + cbar['width'],
+                                cbar['y'] + cbar['height'],
+                                cbar['x'], cbar['y'] + cbar['height'],
+                                contour_width, rgb)
+        self.draw_scalebar_line(cbar['x'], cbar['y'] + cbar['height'],
+                                cbar['x'], cbar['y'],
+                                contour_width, rgb)
+        self.draw_scalebar_line(cbar['x'] + cbar['width'], cbar['y'],
+                                cbar['x'] + cbar['width'],
+                                cbar['y'] + cbar['height'],
+                                contour_width, rgb)
+
     def is_big_image(self, image):
         """Return True if this is a 'big' tiled image."""
         max_w, max_h = self.conn.getMaxPlaneSize()

From 4d6baa9434ccc3818903ac1bc8036504d7de3819 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Tue, 26 Nov 2024 14:11:47 +0100
Subject: [PATCH 06/39] cosmetic adjustments, changed contour to single tick
 line

---
 .../omero/figure_scripts/Figure_To_Pdf.py     | 56 +++++++++++++------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index 96817feda..f8359035c 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -1669,10 +1669,20 @@ def draw_colorbar(self, panel, page):
         fontsize = 10
         tick_width = 1
         tick_len = 3
-        contour_width = 1
+        contour_width = tick_width
         for label, pos_x, pos_y in zip(labels, labels_x, labels_y):
+
+            # Cosmetical correction, for first and last ticks to be
+            # aligned with the image
+            shift = 0
+            if label == labels[0]:
+                shift = -tick_width / 2
+            elif label == labels[-1]:
+                shift = tick_width / 2
+
             if calib["position"] == "leftvert":
                 x2 = pos_x - tick_len
+                pos_y += shift
                 self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
                                         tick_width, rgb)
                 self.draw_text(str(label), pos_x - 4,
@@ -1680,6 +1690,7 @@ def draw_colorbar(self, panel, page):
                                fontsize, rgb, align=align)
             elif calib["position"] == "rightvert":
                 x2 = pos_x + tick_len
+                pos_y += shift
                 self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
                                         tick_width, rgb)
                 self.draw_text(str(label), pos_x + 4,
@@ -1687,30 +1698,43 @@ def draw_colorbar(self, panel, page):
                                fontsize, rgb, align=align)
             elif calib["position"] == "top":
                 y2 = pos_y - tick_len
+                pos_x -= shift  # Order of the label is reversed
                 self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
                                         tick_width, rgb)
-                self.draw_text(str(label), pos_x, pos_y - fontsize - 1,
+                self.draw_text(str(label), pos_x, pos_y - fontsize - 2,
                                fontsize, rgb, align=align)
             elif calib["position"] == "bottom":
                 y2 = pos_y + tick_len
+                pos_x -= shift  # Order of the label is reversed
                 self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
                                         tick_width, rgb)
                 self.draw_text(str(label), pos_x, pos_y + 4,
                                fontsize, rgb, align=align)
-        self.draw_scalebar_line(cbar['x'], cbar['y'],
-                                cbar['x'] + cbar['width'], cbar['y'],
-                                contour_width, rgb)
-        self.draw_scalebar_line(cbar['x'] + cbar['width'],
-                                cbar['y'] + cbar['height'],
-                                cbar['x'], cbar['y'] + cbar['height'],
-                                contour_width, rgb)
-        self.draw_scalebar_line(cbar['x'], cbar['y'] + cbar['height'],
-                                cbar['x'], cbar['y'],
-                                contour_width, rgb)
-        self.draw_scalebar_line(cbar['x'] + cbar['width'], cbar['y'],
-                                cbar['x'] + cbar['width'],
-                                cbar['y'] + cbar['height'],
-                                contour_width, rgb)
+
+        if calib["position"] == "top":
+            self.draw_scalebar_line(cbar['x'],
+                                    cbar['y'],
+                                    cbar['x'] + cbar['width'],
+                                    cbar['y'],
+                                    contour_width, rgb)
+        elif calib["position"] == "bottom":
+            self.draw_scalebar_line(cbar['x'],
+                                    cbar['y'] + cbar['height'],
+                                    cbar['x'] + cbar['width'],
+                                    cbar['y'] + cbar['height'],
+                                    contour_width, rgb)
+        elif calib["position"] == "leftvert":
+            self.draw_scalebar_line(cbar['x'],
+                                    cbar['y'],
+                                    cbar['x'],
+                                    cbar['y'] + cbar['height'],
+                                    contour_width, rgb)
+        elif calib["position"] == "rightvert":
+            self.draw_scalebar_line(cbar['x'] + cbar['width'],
+                                    cbar['y'],
+                                    cbar['x'] + cbar['width'],
+                                    cbar['y'] + cbar['height'],
+                                    contour_width, rgb)
 
     def is_big_image(self, image):
         """Return True if this is a 'big' tiled image."""

From d73d392c0433336e3c473a94960d3b917e81f6a4 Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Fri, 29 Nov 2024 14:10:39 +0100
Subject: [PATCH 07/39] Code clean up

---
 src/css/figure.css                    | 7 +++++++
 src/templates/calib_bar.template.html | 9 ++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index bf087f703..8151057fe 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1379,3 +1379,10 @@
         left: 0%;
         margin-top: 10px;
     }
+
+    .calib_bg {
+        background-image: url('/images/luts_10.png');
+        margin-right: 0px;
+        margin-left: 0px;
+        display: flex;
+    }
\ No newline at end of file
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
index b3ffc821d..ea99329ad 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/calib_bar.template.html
@@ -1,10 +1,9 @@
 <div class="calib  calib_<%= position %>">
     <% if (show) { %>
-        <div class="lutBg"  style="border:1px solid rgb(0, 0, 0);
+        <div class="lutBg calib_bg"  style="
                 height: <%= thickness %>px;
-                background-position: <%= lutBgPos %>;   
-                background-image: url('/images/luts_10.png');
-                margin-right: 0px; margin-left: 0px;
-                "></div>
+                background-position: <%= lutBgPos %>;
+                border:1px solid #000">
+        </div>
     <% } %>
 </div>
\ No newline at end of file

From 361f5c634b8a084eb72048feb2468e888756b514 Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Fri, 29 Nov 2024 14:13:34 +0100
Subject: [PATCH 08/39] Adding ticks to the calibration bar

---
 src/css/figure.css                    | 54 ++++++++++++++++++++++++++-
 src/templates/calib_bar.template.html | 16 ++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 8151057fe..947c67f29 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1385,4 +1385,56 @@
         margin-right: 0px;
         margin-left: 0px;
         display: flex;
-    }
\ No newline at end of file
+    }
+
+        
+    .calibration_ticks {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: stretch;
+        position: relative;
+        width: 100%;
+    }
+
+    .calibration_ticks_top .ticks_top {
+        flex-direction: row-reverse;
+    }
+
+    .calibration_ticks_bottom .ticks_bottom {
+        flex-direction: row-reverse;
+    }
+
+    .calibration_ticks_leftvert .ticks_leftvert {
+        flex-direction: row;
+        transform:scaleX(-1);
+    }
+
+    .calibration_ticks_rightvert .ticks_rightvert {
+        flex-direction: row-reverse;
+    }
+
+    .ticks {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .tick {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .dash {
+        width: 2px;
+        margin-bottom: 5px;
+    }
+
+    .label {
+        font-size: 12px;
+        text-align: center;
+        margin-left: 0;
+    }
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
index ea99329ad..54e2d53f8 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/calib_bar.template.html
@@ -5,5 +5,21 @@
                 background-position: <%= lutBgPos %>;
                 border:1px solid #000">
         </div>
+        <div class="calibration_ticks calibration_ticks_<%= position %>">
+            <div class="ticks ticks_<%= position %>">
+                <div class="ticks">
+                    <div class="tick">
+                        <div class="dash" style="background-color: #000; height: 10px">
+                            <span class="label" style="">0</span>
+                        </div>
+                    </div>
+                    <div class="tick">
+                        <div class="dash" style="background-color: #000; height: 10px">
+                            <span class="label" style="">125</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     <% } %>
 </div>
\ No newline at end of file

From 9c79d2c6fde0e808e91453e31d9a1233e083f31d Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Fri, 29 Nov 2024 14:24:15 +0100
Subject: [PATCH 09/39] Code clean up

---
 src/templates/calib_form.template.html | 40 +++++++++++++-------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/templates/calib_form.template.html b/src/templates/calib_form.template.html
index 109b0ff83..dd9218cbb 100644
--- a/src/templates/calib_form.template.html
+++ b/src/templates/calib_form.template.html
@@ -14,26 +14,26 @@
             <label class="col-form-label col-form-label-sm" style="width:50px">Position</label>
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
-        <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle" 
-                title="Position" data-bs-toggle="dropdown">
-            <i data-position="<%= position %>" class="bi-box-arrow-in-<%= position.replace('bottom', 'down').replace('top', 'up').replace('rightvert', 'right').replace('leftvert', 'left') %> dropdown_icon"></i>
-            <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" role="menu">
-            <li><a class="dropdown-item" href="#">
-                <i data-position="top" class="bi-box-arrow-up dropdown_icon"></i> Top</a>
-            </li>
-            <li><a class="dropdown-item" href="#">
-                <i data-position="bottom" class="bi-box-arrow-down dropdown_icon"></i> Bottom</a>
-            </li>
-            <li><a class="dropdown-item" href="#">
-                <i data-position="leftvert" class="bi-box-arrow-left dropdown_icon"></i> Left</a>
-            </li>
-            <li><a class="dropdown-item" href="#">
-                <i data-position="rightvert" class="bi-box-arrow-right dropdown_icon"></i> Right</a>
-            </li>
-        </ul>
-    </div>
+            <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle" 
+                    title="Position" data-bs-toggle="dropdown">
+                <i data-position="<%= position %>" class="bi-box-arrow-in-<%= position.replace('bottom', 'down').replace('top', 'up').replace('rightvert', 'right').replace('leftvert', 'left') %> dropdown_icon"></i>
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" role="menu">
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="top" class="bi-box-arrow-up dropdown_icon"></i> Top</a>
+                </li>
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="bottom" class="bi-box-arrow-down dropdown_icon"></i> Bottom</a>
+                </li>
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="leftvert" class="bi-box-arrow-left dropdown_icon"></i> Left</a>
+                </li>
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="rightvert" class="bi-box-arrow-right dropdown_icon"></i> Right</a>
+                </li>
+            </ul>
+        </div>    
         <div class="col-auto input-group-sm" style="flex: 1 1 auto; padding-right: 0">
             <% if (show){ %>
                 <button type="submit" class="show_calib btn btn-sm btn-success float-end">Show</button>

From 7fcc97d395cd42ec16ba0c7387e06d15175e56aa Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Fri, 29 Nov 2024 14:57:30 +0100
Subject: [PATCH 10/39] Update tick color and adjust tick label font size

---
 src/js/views/calib_form_view.js        | 13 ++++++-
 src/js/views/panel_view.js             |  2 +
 src/templates/calib_bar.template.html  | 10 ++---
 src/templates/calib_form.template.html | 51 +++++++++++++++++++++++++-
 4 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/src/js/views/calib_form_view.js b/src/js/views/calib_form_view.js
index af4b5a93c..e7df630b6 100644
--- a/src/js/views/calib_form_view.js
+++ b/src/js/views/calib_form_view.js
@@ -14,7 +14,6 @@ var CalibBarFormView = Backbone.View.extend({
 
         var self = this;
         this.models.forEach(function(m) {
-            console.log(m);
             self.listenTo(m, 'change:calib', self.render);
         });
     },
@@ -38,13 +37,17 @@ var CalibBarFormView = Backbone.View.extend({
     update_calib: function(event) {
         var $form = $('.calib_form');
         var position = $('.label-position i:first', $form).attr('data-position'),
-            thickness = parseInt($('.calib-thickness', $form).val());
+            thickness = parseInt($('.calib-thickness', $form).val()),
+            font_size = $('.calib_font_size span:first', $form).text().trim(),
+            color = $('.calib-color span:first', $form).attr('data-color');
 
         this.models.forEach(function(m) {
             var lutBgPos = m.get('lutBgPos');
             var cb = { show: true, lutBgPos: lutBgPos };
             if (position != '-') cb.position = position;
             if (thickness != '-') cb.thickness = thickness;
+            if (font_size != '-') cb.font_size = font_size;
+            if (color != '-') cb.color = color;
             m.save_calib(cb);
         });
         return false;
@@ -62,9 +65,13 @@ var CalibBarFormView = Backbone.View.extend({
                 if (!cb_json.length) {
                     cb_json.position = cb.position;
                     cb_json.thickness = cb.thickness;
+                    cb_json.font_size = cb.font_size;
+                    cb_json.color = cb.color;
                 } else {
                     if (cb_json.position != cb.position) cb_json.position = '-';
                     if (cb_json.thickness != cb.thickness) cb_json.thickness = '-';
+                    if (cb_json.font_size != cb.font_size) cb_json.font_size = '-';
+                    if (cb_json.color != cb.color) cb_json.color = '-';
                 }
             }
             if (!cb || !cb.show) hidden = true;
@@ -76,6 +83,8 @@ var CalibBarFormView = Backbone.View.extend({
 
         cb_json.position = cb_json.position || 'top';
         cb_json.thickness = cb_json.thickness || 45;
+        cb_json.font_size = cb_json.font_size || 12;
+        cb_json.color = cb_json.color || '000';
         var html = this.template(cb_json);
         this.$el.html(html);
         return this;
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index bcc80b359..cc7971d65 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -337,6 +337,8 @@
                         position: cb.position,
                         show: cb.show,
                         thickness: cb.thickness,
+                        font_size: cb.font_size,
+                        color: cb.color,
                         lutBgPos: lutBgPos,
                 };
                 var cb_html = this.calib_template(cb_json);
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
index 54e2d53f8..935604f47 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/calib_bar.template.html
@@ -3,19 +3,19 @@
         <div class="lutBg calib_bg"  style="
                 height: <%= thickness %>px;
                 background-position: <%= lutBgPos %>;
-                border:1px solid #000">
+                border:1px solid #<%= color %>">
         </div>
         <div class="calibration_ticks calibration_ticks_<%= position %>">
             <div class="ticks ticks_<%= position %>">
                 <div class="ticks">
                     <div class="tick">
-                        <div class="dash" style="background-color: #000; height: 10px">
-                            <span class="label" style="">0</span>
+                        <div class="dash" style="background-color: #<%= color %>; height: 10px">
+                            <span class="label" style="font-size: <%= font_size %>px;color: #<%= color %>;">0</span>
                         </div>
                     </div>
                     <div class="tick">
-                        <div class="dash" style="background-color: #000; height: 10px">
-                            <span class="label" style="">125</span>
+                        <div class="dash" style="background-color: #<%= color %>; height: 10px">
+                            <span class="label" style="font-size: <%= font_size %>px; color: #<%= color %>;">125</span>
                         </div>
                     </div>
                 </div>
diff --git a/src/templates/calib_form.template.html b/src/templates/calib_form.template.html
index dd9218cbb..8ff780edc 100644
--- a/src/templates/calib_form.template.html
+++ b/src/templates/calib_form.template.html
@@ -33,7 +33,7 @@
                     <i data-position="rightvert" class="bi-box-arrow-right dropdown_icon"></i> Right</a>
                 </li>
             </ul>
-        </div>    
+        </div>
         <div class="col-auto input-group-sm" style="flex: 1 1 auto; padding-right: 0">
             <% if (show){ %>
                 <button type="submit" class="show_calib btn btn-sm btn-success float-end">Show</button>
@@ -42,4 +42,53 @@
             <% } %>
         </div>
     </div>
+    <div class="col-auto input-group-sm btn-group">
+        <label class="col-form-label col-form-label-sm" style="width:50px">Tick Label Size</label>
+    </div>
+    <div class="col-auto btn-group" style="padding: 0; width: 50px;">
+        <button type="button" class="calib_font_size btn btn-outline-secondary btn-sm dropdown-toggle" title="Font Size"
+        data-bs-toggle="dropdown" style="width:33px;">
+            <span class='dropdown_icon'><%= font_size %></span>
+            <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" role="menu">
+        <% _.each([6,8,10,12,14,18,21,24,36,48],function(p){
+            print ("<li><a class='dropdown-item' href='#'><span class='dropdown_icon'>"+p+"</span></a></li>")
+        }); %>
+        </ul>
+    </div>
+    <div class="form-group col-sm-auto btn-group">
+        <button type="button" class="calib-color btn btn-outline-secondary btn-sm dropdown-toggle" title="Label Color"
+            data-bs-toggle="dropdown">
+            <span class="dropdown_icon" data-color="<%= color %>" style="background-color:#<%= color %>">&nbsp &nbsp &nbsp</span>
+            <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu colorpicker" role="menu">
+            <!-- NB: dropdown_icon is picked on choosing dropdown, replaces icon in button above -->
+            <li><a class="dropdown-item" href="#">
+                <span class="dropdown_icon" data-color="000000" style="background-color:#000">&nbsp &nbsp &nbsp</span>&nbsp Black
+            </a></li>
+            <li><a class="dropdown-item" href="#">
+                <span class="dropdown_icon" data-color="0000FF" style="background-color:#00f">&nbsp &nbsp &nbsp</span>&nbsp Blue
+            </a></li>
+            <li><a class="dropdown-item" href="#">
+                <span class="dropdown_icon" data-color="00FF00" style="background-color:#0f0">&nbsp &nbsp &nbsp</span>&nbsp Green
+            </a></li>
+            <li><a class="dropdown-item" href="#">
+                <span class="dropdown_icon" data-color="FF0000" style="background-color:#f00">&nbsp &nbsp &nbsp</span>&nbsp Red
+            </a></li>
+            <li><a class="dropdown-item" href="#">
+                <span class="dropdown_icon" data-color="FFFF00" style="background-color:#ff0">&nbsp &nbsp &nbsp</span>&nbsp Yellow
+            </a></li>
+            <li><a class="dropdown-item" href="#">
+                <span class="dropdown_icon" data-color="FFFFFF" style="background-color:#fff">&nbsp &nbsp &nbsp</span>&nbsp White
+            </a></li>
+            <li><a class="dropdown-item" href="#">
+                <span class="dropdown_icon" data-color="FF00FF" style="background-color:#f0f">&nbsp &nbsp &nbsp</span>&nbsp Magenta
+            </a></li>
+            <li><a class="dropdown-item" href="#">
+                <span class="dropdown_icon" data-color="00FFFF" style="background-color:#0ff">&nbsp &nbsp &nbsp</span>&nbsp Cyan
+            </a></li>
+        </ul>
+    </div>
 </form>

From ce2575e6c9979a01898b35f402583b24ad0b54e4 Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Fri, 29 Nov 2024 16:20:52 +0100
Subject: [PATCH 11/39] Dynamically changing no. of ticks

---
 src/js/views/calib_form_view.js        | 20 +++++++++++++-
 src/js/views/panel_view.js             | 11 +++++++-
 src/templates/calib_bar.template.html  | 36 ++++++++++++++++++++------
 src/templates/calib_form.template.html | 16 ++++++++++++
 4 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/src/js/views/calib_form_view.js b/src/js/views/calib_form_view.js
index e7df630b6..65bd40cd5 100644
--- a/src/js/views/calib_form_view.js
+++ b/src/js/views/calib_form_view.js
@@ -22,6 +22,14 @@ var CalibBarFormView = Backbone.View.extend({
         "submit .calib_form": "update_calib",
         "change .btn": "dropdown_btn_changed",
         "click .hide_calib": "hide_calib",
+        "keyup input[type='number']"  : "handle_keyup",
+     },
+
+    handle_keyup: function (event) {
+        // If Enter key - submit form...
+        if (event.which == 13) {
+            this.update_calib();
+        }
     },
 
     dropdown_btn_changed: function(event) {
@@ -39,7 +47,9 @@ var CalibBarFormView = Backbone.View.extend({
         var position = $('.label-position i:first', $form).attr('data-position'),
             thickness = parseInt($('.calib-thickness', $form).val()),
             font_size = $('.calib_font_size span:first', $form).text().trim(),
-            color = $('.calib-color span:first', $form).attr('data-color');
+            color = $('.calib-color span:first', $form).attr('data-color'),
+            ticks_parameter = parseInt($('.calib-tick-parameter', $form).val()),
+            length = parseInt($('.calib-tick-length', $form).val());
 
         this.models.forEach(function(m) {
             var lutBgPos = m.get('lutBgPos');
@@ -48,6 +58,8 @@ var CalibBarFormView = Backbone.View.extend({
             if (thickness != '-') cb.thickness = thickness;
             if (font_size != '-') cb.font_size = font_size;
             if (color != '-') cb.color = color;
+            if (ticks_parameter != '-') cb.ticks_parameter = ticks_parameter;
+            if (length != '-') cb.length = length;
             m.save_calib(cb);
         });
         return false;
@@ -67,11 +79,15 @@ var CalibBarFormView = Backbone.View.extend({
                     cb_json.thickness = cb.thickness;
                     cb_json.font_size = cb.font_size;
                     cb_json.color = cb.color;
+                    cb_json.ticks_parameter = cb.ticks_parameter;
+                    cb_json.length = cb.length;
                 } else {
                     if (cb_json.position != cb.position) cb_json.position = '-';
                     if (cb_json.thickness != cb.thickness) cb_json.thickness = '-';
                     if (cb_json.font_size != cb.font_size) cb_json.font_size = '-';
                     if (cb_json.color != cb.color) cb_json.color = '-';
+                    if (cb_json.ticks_parameter != cb.ticks_parameter) cb_json.ticks_parameter = '-';
+                    if (cb_json.length != cb.length) cb_json.length = '-';
                 }
             }
             if (!cb || !cb.show) hidden = true;
@@ -85,6 +101,8 @@ var CalibBarFormView = Backbone.View.extend({
         cb_json.thickness = cb_json.thickness || 45;
         cb_json.font_size = cb_json.font_size || 12;
         cb_json.color = cb_json.color || '000';
+        cb_json.ticks_parameter = cb_json.ticks_parameter || 6;
+        cb_json.length = cb_json.length || 10;
         var html = this.template(cb_json);
         this.$el.html(html);
         return this;
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index cc7971d65..5f4c7f750 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -324,13 +324,18 @@
                 this.$calib.remove();
             }
             var cb = this.model.get('calib');
-            var color = "";
+            var start = 0,
+                end = 125,
+                color = "";
             for (const chann of this.model.get('channels')) {
                 if(chann.active) {
                     color = chann.color
+                    start = chann.window?.start;
+                    end = chann.window?.end;
                     break;
                 }
             }
+            console.log(start, end);
             var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
             if (cb && cb.show) {
                 var cb_json = {
@@ -339,6 +344,10 @@
                         thickness: cb.thickness,
                         font_size: cb.font_size,
                         color: cb.color,
+                        ticks_parameter: cb.ticks_parameter,
+                        length: cb.length,
+                        start: start,
+                        end: end,
                         lutBgPos: lutBgPos,
                 };
                 var cb_html = this.calib_template(cb_json);
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
index 935604f47..ef00126f5 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/calib_bar.template.html
@@ -7,15 +7,35 @@
         </div>
         <div class="calibration_ticks calibration_ticks_<%= position %>">
             <div class="ticks ticks_<%= position %>">
-                <div class="ticks">
-                    <div class="tick">
-                        <div class="dash" style="background-color: #<%= color %>; height: 10px">
-                            <span class="label" style="font-size: <%= font_size %>px;color: #<%= color %>;">0</span>
+                <div class="ticks ticks_<%= position %>">
+                    <div class="ticks">
+                        <%
+                            var interval = Math.floor((end - start) / (ticks_parameter - 1));
+                        %>
+
+                        <!-- First tick (start value) -->
+                        <div class="tick">
+                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
+                                <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
+                            </div>
                         </div>
-                    </div>
-                    <div class="tick">
-                        <div class="dash" style="background-color: #<%= color %>; height: 10px">
-                            <span class="label" style="font-size: <%= font_size %>px; color: #<%= color %>;">125</span>
+
+                        <!-- Intermediate ticks -->
+                        <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
+                            <div class="tick">
+                                <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
+                                    <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
+                                        <%= start + i * interval %> <!-- Dynamically calculated intermediate value -->
+                                    </span>
+                                </div>
+                            </div>
+                        <% } %>
+
+                        <!-- Last tick (end value) -->
+                        <div class="tick">
+                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
+                                <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/templates/calib_form.template.html b/src/templates/calib_form.template.html
index 8ff780edc..50b73975f 100644
--- a/src/templates/calib_form.template.html
+++ b/src/templates/calib_form.template.html
@@ -91,4 +91,20 @@
             </a></li>
         </ul>
     </div>
+    <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
+        <div class="col-auto input-group-sm">
+            <label class="col-form-label col-form-label-sm" style="width:50px">No. of Ticks</label>
+        </div>
+        <div class="col-auto input-group-sm">
+          <input type="number" class="calib-tick-parameter input-sm form-control"
+            placeholder="Parameter" value="<%= ticks_parameter %>" style="width:50px"/>
+        </div>
+        <div class="col-auto input-group-sm">
+            <label class="col-form-label col-form-label-sm" style="width:50px">Length</label>
+        </div>
+        <div class="col-auto input-group-sm">
+          <input type="number" class="calib-tick-length input-sm form-control"
+            placeholder="Length" value="<%= length %>" style="width:52px"/>
+        </div>    
+    </div>
 </form>

From 4c1401f6a375eb5dabe3b73dea81c1b51b9f5a90 Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Fri, 29 Nov 2024 21:34:29 +0100
Subject: [PATCH 12/39] Add dynamic logic for calibration bar: lookup or simple
 color

---
 src/css/figure.css                    |  1 -
 src/js/views/panel_view.js            |  8 ++--
 src/templates/calib_bar.template.html | 65 ++++++++++++++-------------
 3 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 947c67f29..a1fb14502 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1381,7 +1381,6 @@
     }
 
     .calib_bg {
-        background-image: url('/images/luts_10.png');
         margin-right: 0px;
         margin-left: 0px;
         display: flex;
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 5f4c7f750..928a75ee5 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -326,17 +326,16 @@
             var cb = this.model.get('calib');
             var start = 0,
                 end = 125,
-                color = "";
+                channel_color = "";
             for (const chann of this.model.get('channels')) {
                 if(chann.active) {
-                    color = chann.color
+                    channel_color = chann.color;
                     start = chann.window?.start;
                     end = chann.window?.end;
                     break;
                 }
             }
-            console.log(start, end);
-            var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
+            var lutBgPos = FigureLutPicker.getLutBackgroundPosition(channel_color);
             if (cb && cb.show) {
                 var cb_json = {
                         position: cb.position,
@@ -348,6 +347,7 @@
                         length: cb.length,
                         start: start,
                         end: end,
+                        channel_color: channel_color,
                         lutBgPos: lutBgPos,
                 };
                 var cb_html = this.calib_template(cb_json);
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
index ef00126f5..1a88aeb5e 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/calib_bar.template.html
@@ -1,45 +1,50 @@
 <div class="calib  calib_<%= position %>">
-    <% if (show) { %>
-        <div class="lutBg calib_bg"  style="
-                height: <%= thickness %>px;
-                background-position: <%= lutBgPos %>;
-                border:1px solid #<%= color %>">
-        </div>
-        <div class="calibration_ticks calibration_ticks_<%= position %>">
-            <div class="ticks ticks_<%= position %>">
+    <% if (show) {
+        if( lutBgPos === "0px 100px"){%>
+            <div class="lutBg calib_bg"  style="height: <%= thickness %>px;
+                                                border: 1px solid #<%= color %>;
+                                                background-image: linear-gradient(to left, #<%= channel_color %>, black); "></div>
+        <% }else { %>
+            <div class="lutBg calib_bg"  style="
+                                                height: <%= thickness %>px;
+                                                background-image: url('/images/luts_10.png');
+                                                background-position: <%= lutBgPos %>;
+                                                border:1px solid #<%= color %>">
+            </div>
+        <% } %>
+            <div class="calibration_ticks calibration_ticks_<%= position %>">
                 <div class="ticks ticks_<%= position %>">
-                    <div class="ticks">
-                        <%
-                            var interval = Math.floor((end - start) / (ticks_parameter - 1));
-                        %>
-
-                        <!-- First tick (start value) -->
-                        <div class="tick">
-                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
-                                <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
-                            </div>
-                        </div>
+                    <div class="ticks ticks_<%= position %>">
+                        <div class="ticks">
+                            <% var interval = Math.floor((end - start) / (ticks_parameter - 1)); %>
 
-                        <!-- Intermediate ticks -->
-                        <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
+                            <!-- First tick (start value) -->
                             <div class="tick">
                                 <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
-                                    <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
-                                        <%= start + i * interval %> <!-- Dynamically calculated intermediate value -->
-                                    </span>
+                                    <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
                                 </div>
                             </div>
-                        <% } %>
 
-                        <!-- Last tick (end value) -->
-                        <div class="tick">
-                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
-                                <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
+                                <!-- Intermediate ticks -->
+                                <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
+                                    <div class="tick">
+                                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
+                                            <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
+                                                <%= start + i * interval %> <!-- Dynamically calculated intermediate value -->
+                                            </span>
+                                        </div>
+                                    </div>
+                                <% } %>
+
+                            <!-- Last tick (end value) -->
+                            <div class="tick">
+                                <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
+                                    <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
     <% } %>
 </div>
\ No newline at end of file

From 7343f922d033d8469ef88f91382bd78e54b7fe60 Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Fri, 29 Nov 2024 23:10:56 +0100
Subject: [PATCH 13/39] The styling of positions excep top

---
 src/css/figure.css                    | 20 +++++-----
 src/templates/calib_bar.template.html | 56 ++++++++++-----------------
 2 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index a1fb14502..15ba22367 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1385,7 +1385,6 @@
         margin-left: 0px;
         display: flex;
     }
-
         
     .calibration_ticks {
         margin: 0;
@@ -1397,20 +1396,18 @@
     }
 
     .calibration_ticks_top .ticks_top {
-        flex-direction: row-reverse;
-    }
-
-    .calibration_ticks_bottom .ticks_bottom {
-        flex-direction: row-reverse;
+        -webkit-transform: rotate(180deg);
+        transform: scaleX(1) rotate(180deg);
+        top: -45px;
     }
 
-    .calibration_ticks_leftvert .ticks_leftvert {
-        flex-direction: row;
-        transform:scaleX(-1);
+    .calibration_ticks_leftvert .label{
+        -webkit-transform: rotate(-90deg);
+        transform: scaleX(-1) rotate(-90deg);
     }
 
-    .calibration_ticks_rightvert .ticks_rightvert {
-        flex-direction: row-reverse;
+    .calibration_ticks_rightvert .label{
+        transform: rotate(90deg);
     }
 
     .ticks {
@@ -1425,6 +1422,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        border: 1px solid cyan;
     }
 
     .dash {
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
index 1a88aeb5e..616752891 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/calib_bar.template.html
@@ -1,48 +1,34 @@
 <div class="calib  calib_<%= position %>">
     <% if (show) {
         if( lutBgPos === "0px 100px"){%>
-            <div class="lutBg calib_bg"  style="height: <%= thickness %>px;
-                                                border: 1px solid #<%= color %>;
-                                                background-image: linear-gradient(to left, #<%= channel_color %>, black); "></div>
+            <div class="lutBg calib_bg"  style="height: <%= thickness %>px;background-image: linear-gradient(to left, #<%= channel_color %>, black); "></div>
         <% }else { %>
-            <div class="lutBg calib_bg"  style="
-                                                height: <%= thickness %>px;
-                                                background-image: url('/images/luts_10.png');
-                                                background-position: <%= lutBgPos %>;
-                                                border:1px solid #<%= color %>">
-            </div>
+            <div class="lutBg calib_bg"  style="height: <%= thickness %>px;background-image: url('/images/luts_10.png');background-position: <%= lutBgPos %>;"></div>
         <% } %>
             <div class="calibration_ticks calibration_ticks_<%= position %>">
-                <div class="ticks ticks_<%= position %>">
-                    <div class="ticks ticks_<%= position %>">
-                        <div class="ticks">
-                            <% var interval = Math.floor((end - start) / (ticks_parameter - 1)); %>
-
-                            <!-- First tick (start value) -->
-                            <div class="tick">
-                                <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
-                                    <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
-                                </div>
-                            </div>
+                <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
+                    <% var interval = Math.floor((end - start) / (ticks_parameter - 1)); %>
 
-                                <!-- Intermediate ticks -->
-                                <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
-                                    <div class="tick">
-                                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
-                                            <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
-                                                <%= start + i * interval %> <!-- Dynamically calculated intermediate value -->
-                                            </span>
-                                        </div>
-                                    </div>
-                                <% } %>
+                    <!-- First tick (start value) -->
+                    <div class="tick">
+                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                        <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
+                    </div>
 
-                            <!-- Last tick (end value) -->
+                        <!-- Intermediate ticks -->
+                        <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
                             <div class="tick">
-                                <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px">
-                                    <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
-                                </div>
+                                <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                                <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
+                                    <%= start + i * interval %> <!-- Dynamically calculated intermediate value -->
+                                </span>
                             </div>
-                        </div>
+                        <% } %>
+
+                    <!-- Last tick (end value) -->
+                    <div class="tick">
+                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                        <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
                     </div>
                 </div>
             </div>

From 6e8573dcc94ab2ebc8dac231d07212340c7c116e Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Sun, 1 Dec 2024 18:17:36 +0100
Subject: [PATCH 14/39] Adjust CSS for top position and add margin/spacing
 between image and calibration bar

---
 src/css/figure.css                     |  13 ++-
 src/js/views/calib_form_view.js        |   7 +-
 src/js/views/panel_view.js             |   1 +
 src/templates/calib_bar.template.html  |  76 +++++++++++----
 src/templates/calib_form.template.html | 126 ++++++++++++-------------
 5 files changed, 136 insertions(+), 87 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 15ba22367..b070869b4 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1396,17 +1396,21 @@
     }
 
     .calibration_ticks_top .ticks_top {
-        -webkit-transform: rotate(180deg);
-        transform: scaleX(1) rotate(180deg);
-        top: -45px;
+        -webkit-transform: scaleX(-1) rotate(180deg);
+        transform: scaleX(-1) rotate(180deg);
+    }
+
+    .calibration_ticks_top .label{
+        transform: scaleX(-1) rotate(180deg);
     }
 
     .calibration_ticks_leftvert .label{
-        -webkit-transform: rotate(-90deg);
+        -webkit-transform: scaleX(-1) rotate(-90deg);
         transform: scaleX(-1) rotate(-90deg);
     }
 
     .calibration_ticks_rightvert .label{
+        -webkit-transform: rotate(90deg);
         transform: rotate(90deg);
     }
 
@@ -1422,7 +1426,6 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        border: 1px solid cyan;
     }
 
     .dash {
diff --git a/src/js/views/calib_form_view.js b/src/js/views/calib_form_view.js
index 65bd40cd5..a57ac9947 100644
--- a/src/js/views/calib_form_view.js
+++ b/src/js/views/calib_form_view.js
@@ -49,7 +49,8 @@ var CalibBarFormView = Backbone.View.extend({
             font_size = $('.calib_font_size span:first', $form).text().trim(),
             color = $('.calib-color span:first', $form).attr('data-color'),
             ticks_parameter = parseInt($('.calib-tick-parameter', $form).val()),
-            length = parseInt($('.calib-tick-length', $form).val());
+            length = parseInt($('.calib-tick-length', $form).val()),
+            spacing = parseInt($('.calib-spacing', $form).val());
 
         this.models.forEach(function(m) {
             var lutBgPos = m.get('lutBgPos');
@@ -60,6 +61,7 @@ var CalibBarFormView = Backbone.View.extend({
             if (color != '-') cb.color = color;
             if (ticks_parameter != '-') cb.ticks_parameter = ticks_parameter;
             if (length != '-') cb.length = length;
+            if (spacing != '-') cb.spacing = spacing;
             m.save_calib(cb);
         });
         return false;
@@ -81,6 +83,7 @@ var CalibBarFormView = Backbone.View.extend({
                     cb_json.color = cb.color;
                     cb_json.ticks_parameter = cb.ticks_parameter;
                     cb_json.length = cb.length;
+                    cb_json.spacing = cb.spacing;
                 } else {
                     if (cb_json.position != cb.position) cb_json.position = '-';
                     if (cb_json.thickness != cb.thickness) cb_json.thickness = '-';
@@ -88,6 +91,7 @@ var CalibBarFormView = Backbone.View.extend({
                     if (cb_json.color != cb.color) cb_json.color = '-';
                     if (cb_json.ticks_parameter != cb.ticks_parameter) cb_json.ticks_parameter = '-';
                     if (cb_json.length != cb.length) cb_json.length = '-';
+                    if (cb_json.spacing != cb.spacing) cb_json.spacing = '-';
                 }
             }
             if (!cb || !cb.show) hidden = true;
@@ -103,6 +107,7 @@ var CalibBarFormView = Backbone.View.extend({
         cb_json.color = cb_json.color || '000';
         cb_json.ticks_parameter = cb_json.ticks_parameter || 6;
         cb_json.length = cb_json.length || 10;
+        cb_json.spacing = cb_json.spacing || 10;
         var html = this.template(cb_json);
         this.$el.html(html);
         return this;
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 928a75ee5..b42933545 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -345,6 +345,7 @@
                         color: cb.color,
                         ticks_parameter: cb.ticks_parameter,
                         length: cb.length,
+                        spacing: cb.spacing,
                         start: start,
                         end: end,
                         channel_color: channel_color,
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
index 616752891..637a78db4 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/calib_bar.template.html
@@ -1,10 +1,51 @@
-<div class="calib  calib_<%= position %>">
-    <% if (show) {
-        if( lutBgPos === "0px 100px"){%>
-            <div class="lutBg calib_bg"  style="height: <%= thickness %>px;background-image: linear-gradient(to left, #<%= channel_color %>, black); "></div>
-        <% }else { %>
-            <div class="lutBg calib_bg"  style="height: <%= thickness %>px;background-image: url('/images/luts_10.png');background-position: <%= lutBgPos %>;"></div>
-        <% } %>
+<div class="calib calib_<%= position %>"
+     style="<% if (position === 'top') { %> margin-bottom: <%= spacing %>px; <% }
+                else if (position === 'bottom') { %> margin-top: <%= spacing %>px; <% }
+                else if (position === 'leftvert') { %> margin-right: <%= spacing %>px; <% }
+                else if (position === 'rightvert') { %> margin-left: <%= spacing %>px; <% } %>">
+    <% if (show) { %>
+        <% if (position === 'top') { %>
+            <!-- Render div 2 first for 'top' -->
+            <div class="calibration_ticks calibration_ticks_<%= position %>">
+                <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
+                    <% var interval = Math.floor((end - start) / (ticks_parameter - 1)); %>
+
+                    <!-- First tick (start value) -->
+                    <div class="tick">
+                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                        <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
+                    </div>                    
+
+                    <!-- Intermediate ticks -->
+                    <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
+                        <div class="tick">
+                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                            <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
+                                <%= start + i * interval %>
+                            </span>
+                        </div>
+                    <% } %>
+
+                    <!-- Last tick (end value) -->
+                    <div class="tick">
+                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                        <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
+                    </div>
+                     
+                </div>
+            </div>
+            <div class="lutBg calib_bg"
+                 style="height: <%= thickness %>px;
+                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)' %>;
+                        <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
+            </div>
+        <% } else { %>
+            <!-- Default order for non-'top' positions -->
+            <div class="lutBg calib_bg"
+                 style="height: <%= thickness %>px;
+                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)' %>;
+                        <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
+            </div>
             <div class="calibration_ticks calibration_ticks_<%= position %>">
                 <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
                     <% var interval = Math.floor((end - start) / (ticks_parameter - 1)); %>
@@ -15,15 +56,15 @@
                         <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
                     </div>
 
-                        <!-- Intermediate ticks -->
-                        <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
-                            <div class="tick">
-                                <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
-                                <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
-                                    <%= start + i * interval %> <!-- Dynamically calculated intermediate value -->
-                                </span>
-                            </div>
-                        <% } %>
+                    <!-- Intermediate ticks -->
+                    <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
+                        <div class="tick">
+                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                            <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
+                                <%= start + i * interval %>
+                            </span>
+                        </div>
+                    <% } %>
 
                     <!-- Last tick (end value) -->
                     <div class="tick">
@@ -32,5 +73,6 @@
                     </div>
                 </div>
             </div>
+        <% } %>
     <% } %>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/templates/calib_form.template.html b/src/templates/calib_form.template.html
index 50b73975f..ea8f9bb8f 100644
--- a/src/templates/calib_form.template.html
+++ b/src/templates/calib_form.template.html
@@ -1,17 +1,18 @@
 <form class="calib_form">
     <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
         <div class="col-auto input-group-sm">
-            <label class="col-form-label col-form-label-sm" style="width:50px">Height</label>
+            <label class="col-form-label col-form-label-sm" style="">Thickness</label>
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
             <input type="number" class="label-text calib-thickness form-control input-sm" 
-            placeholder="Height" value="<%= thickness %>" style="width:52px" />
-        </div>
-        <div class="col-auto input-group-sm" style="margin-right: 10px;">
-            <label class="col-form-label col-form-label-sm">px</label>
+            placeholder="Thickness" value="<%= thickness %>" style="width:52px" />
         </div>
         <div class="col-auto input-group-sm">
-            <label class="col-form-label col-form-label-sm" style="width:50px">Position</label>
+            <label class="col-form-label col-form-label-sm" style="">Spacing</label>
+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+            <input type="number" class="label-text calib-spacing form-control input-sm" 
+            placeholder="Height" value="<%= spacing %>" style="width:52px" />
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
             <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle" 
@@ -42,69 +43,66 @@
             <% } %>
         </div>
     </div>
-    <div class="col-auto input-group-sm btn-group">
-        <label class="col-form-label col-form-label-sm" style="width:50px">Tick Label Size</label>
-    </div>
-    <div class="col-auto btn-group" style="padding: 0; width: 50px;">
-        <button type="button" class="calib_font_size btn btn-outline-secondary btn-sm dropdown-toggle" title="Font Size"
-        data-bs-toggle="dropdown" style="width:33px;">
-            <span class='dropdown_icon'><%= font_size %></span>
-            <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" role="menu">
-        <% _.each([6,8,10,12,14,18,21,24,36,48],function(p){
-            print ("<li><a class='dropdown-item' href='#'><span class='dropdown_icon'>"+p+"</span></a></li>")
-        }); %>
-        </ul>
-    </div>
-    <div class="form-group col-sm-auto btn-group">
-        <button type="button" class="calib-color btn btn-outline-secondary btn-sm dropdown-toggle" title="Label Color"
-            data-bs-toggle="dropdown">
-            <span class="dropdown_icon" data-color="<%= color %>" style="background-color:#<%= color %>">&nbsp &nbsp &nbsp</span>
-            <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu colorpicker" role="menu">
-            <!-- NB: dropdown_icon is picked on choosing dropdown, replaces icon in button above -->
-            <li><a class="dropdown-item" href="#">
-                <span class="dropdown_icon" data-color="000000" style="background-color:#000">&nbsp &nbsp &nbsp</span>&nbsp Black
-            </a></li>
-            <li><a class="dropdown-item" href="#">
-                <span class="dropdown_icon" data-color="0000FF" style="background-color:#00f">&nbsp &nbsp &nbsp</span>&nbsp Blue
-            </a></li>
-            <li><a class="dropdown-item" href="#">
-                <span class="dropdown_icon" data-color="00FF00" style="background-color:#0f0">&nbsp &nbsp &nbsp</span>&nbsp Green
-            </a></li>
-            <li><a class="dropdown-item" href="#">
-                <span class="dropdown_icon" data-color="FF0000" style="background-color:#f00">&nbsp &nbsp &nbsp</span>&nbsp Red
-            </a></li>
-            <li><a class="dropdown-item" href="#">
-                <span class="dropdown_icon" data-color="FFFF00" style="background-color:#ff0">&nbsp &nbsp &nbsp</span>&nbsp Yellow
-            </a></li>
-            <li><a class="dropdown-item" href="#">
-                <span class="dropdown_icon" data-color="FFFFFF" style="background-color:#fff">&nbsp &nbsp &nbsp</span>&nbsp White
-            </a></li>
-            <li><a class="dropdown-item" href="#">
-                <span class="dropdown_icon" data-color="FF00FF" style="background-color:#f0f">&nbsp &nbsp &nbsp</span>&nbsp Magenta
-            </a></li>
-            <li><a class="dropdown-item" href="#">
-                <span class="dropdown_icon" data-color="00FFFF" style="background-color:#0ff">&nbsp &nbsp &nbsp</span>&nbsp Cyan
-            </a></li>
-        </ul>
-    </div>
-    <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
-        <div class="col-auto input-group-sm">
-            <label class="col-form-label col-form-label-sm" style="width:50px">No. of Ticks</label>
+    <div class="row gy-2 gx-3 align-items-center" style="margin: 5px 0px">
+        <div class="col-auto btn-group">
+            <label class="col-form-label col-form-label-sm" >Ticks</label>
         </div>
-        <div class="col-auto input-group-sm">
+        <div class="col-auto btn-group">
           <input type="number" class="calib-tick-parameter input-sm form-control"
-            placeholder="Parameter" value="<%= ticks_parameter %>" style="width:50px"/>
+            placeholder="Parameter" value="<%= ticks_parameter %>" style="width:52px"/>
         </div>
-        <div class="col-auto input-group-sm">
-            <label class="col-form-label col-form-label-sm" style="width:50px">Length</label>
+        <div class="col-auto btn-group">
+            <label class="col-form-label col-form-label-sm" style="">Length</label>
         </div>
-        <div class="col-auto input-group-sm">
+        <div class="col-auto btn-group">
           <input type="number" class="calib-tick-length input-sm form-control"
             placeholder="Length" value="<%= length %>" style="width:52px"/>
-        </div>    
+        </div>
+        <div class="col-auto btn-group" style="padding: 0; width:50px;">
+            <button type="button" class="calib_font_size btn btn-outline-secondary btn-sm dropdown-toggle" title="Font Size"
+            data-bs-toggle="dropdown" style="width:33px;">
+                <span class='dropdown_icon'><%= font_size %></span>
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" role="menu">
+            <% _.each([6,8,10,12,14,18,21,24,36,48],function(p){
+                print ("<li><a class='dropdown-item' href='#'><span class='dropdown_icon'>"+p+"</span></a></li>")
+            }); %>
+            </ul>
+        </div>
+        <div class="form-group col-sm-auto btn-group">
+            <button type="button" class="calib-color btn btn-outline-secondary btn-sm dropdown-toggle" title="Label Color"
+                data-bs-toggle="dropdown">
+                <span class="dropdown_icon" data-color="<%= color %>" style="background-color:#<%= color %>">&nbsp &nbsp &nbsp</span>
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu colorpicker" role="menu">
+                <!-- NB: dropdown_icon is picked on choosing dropdown, replaces icon in button above -->
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-color="000000" style="background-color:#000">&nbsp &nbsp &nbsp</span>&nbsp Black
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-color="0000FF" style="background-color:#00f">&nbsp &nbsp &nbsp</span>&nbsp Blue
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-color="00FF00" style="background-color:#0f0">&nbsp &nbsp &nbsp</span>&nbsp Green
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-color="FF0000" style="background-color:#f00">&nbsp &nbsp &nbsp</span>&nbsp Red
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-color="FFFF00" style="background-color:#ff0">&nbsp &nbsp &nbsp</span>&nbsp Yellow
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-color="FFFFFF" style="background-color:#fff">&nbsp &nbsp &nbsp</span>&nbsp White
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-color="FF00FF" style="background-color:#f0f">&nbsp &nbsp &nbsp</span>&nbsp Magenta
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-color="00FFFF" style="background-color:#0ff">&nbsp &nbsp &nbsp</span>&nbsp Cyan
+                </a></li>
+            </ul>
+        </div>
     </div>
 </form>

From 7acbcde76828ffeec22223743393aaadc76fd30a Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Sun, 1 Dec 2024 23:16:46 +0100
Subject: [PATCH 15/39] adjust to use dynamic lut after merge

---
 src/js/views/panel_view.js            | 1 +
 src/templates/calib_bar.template.html | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index f46a90f0c..ae891f0f2 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -393,6 +393,7 @@
                         end: end,
                         channel_color: channel_color,
                         lutBgPos: lutBgPos,
+                        lut_url: FigureLutPicker.lutsPngUrl
                 };
                 var cb_html = this.calib_template(cb_json);
                 this.$el.append(cb_html);
diff --git a/src/templates/calib_bar.template.html b/src/templates/calib_bar.template.html
index 637a78db4..c5f0da71c 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/calib_bar.template.html
@@ -14,7 +14,7 @@
                     <div class="tick">
                         <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
                         <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
-                    </div>                    
+                    </div>
 
                     <!-- Intermediate ticks -->
                     <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
@@ -31,19 +31,19 @@
                         <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
                         <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
                     </div>
-                     
+
                 </div>
             </div>
             <div class="lutBg calib_bg"
                  style="height: <%= thickness %>px;
-                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)' %>;
+                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(' + lut_url + ')' %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
             </div>
         <% } else { %>
             <!-- Default order for non-'top' positions -->
             <div class="lutBg calib_bg"
                  style="height: <%= thickness %>px;
-                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)' %>;
+                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(' + lut_url + ')' %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
             </div>
             <div class="calibration_ticks calibration_ticks_<%= position %>">

From 51b1b7af6b947400b92940ab8437166f5bd5bd03 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Mon, 2 Dec 2024 09:30:13 +0100
Subject: [PATCH 16/39] loading of calib_bar if lutpicker not opened yet, eg
 saved figure

---
 src/js/views/lutpicker.js  | 65 ++++++++++++++++++++------------------
 src/js/views/panel_view.js | 29 +++++++++--------
 2 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/src/js/views/lutpicker.js b/src/js/views/lutpicker.js
index 468b4041c..aaaa35efc 100644
--- a/src/js/views/lutpicker.js
+++ b/src/js/views/lutpicker.js
@@ -63,10 +63,40 @@ var LutPickerView = Backbone.View.extend({
         $("button[type='submit']", this.el).removeAttr('disabled');
     },
 
-    loadLuts: function() {
+    loadLuts: async function(force_reload = false) {
         var url = WEBGATEWAYINDEX + 'luts/';
         let cors_headers = { mode: 'cors', credentials: 'include' };
-        return fetch(url, cors_headers).then(rsp => rsp.json());
+        if (force_reload || this.lut_names === undefined || this.lutsPngUrl === undefined || this.luts === undefined) {
+            const rsp = await fetch(url, cors_headers);
+            const data = await rsp.json();
+
+            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());
+
+            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+")"
+            });
+        }
+        return this.lutsPngUrl
     },
 
     getLutBackgroundPosition: function(lutName) {
@@ -95,24 +125,8 @@ var LutPickerView = Backbone.View.extend({
             this.success = options.success;
         }
 
-        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();
-        });
+        this.loadLuts(false);
+        this.render();
     },
 
     render:function() {
@@ -129,17 +143,6 @@ var LutPickerView = Backbone.View.extend({
                         'displayName': this.formatLutName(lut.name)};
             }.bind(this));
 
-
-            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/js/views/panel_view.js b/src/js/views/panel_view.js
index ae891f0f2..4521ca780 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -361,7 +361,7 @@
             this.render_layout();
         },
 
-        render_calib: function() {
+        render_calib: async function() {
 
             if (this.$calib) {
                 this.$calib.remove();
@@ -378,22 +378,23 @@
                     break;
                 }
             }
+            var lut_url = await FigureLutPicker.loadLuts(false)  // Ensure lut url and list are loaded
             var lutBgPos = FigureLutPicker.getLutBackgroundPosition(channel_color);
             if (cb && cb.show) {
                 var cb_json = {
-                        position: cb.position,
-                        show: cb.show,
-                        thickness: cb.thickness,
-                        font_size: cb.font_size,
-                        color: cb.color,
-                        ticks_parameter: cb.ticks_parameter,
-                        length: cb.length,
-                        spacing: cb.spacing,
-                        start: start,
-                        end: end,
-                        channel_color: channel_color,
-                        lutBgPos: lutBgPos,
-                        lut_url: FigureLutPicker.lutsPngUrl
+                    position: cb.position,
+                    show: cb.show,
+                    thickness: cb.thickness,
+                    font_size: cb.font_size,
+                    color: cb.color,
+                    ticks_parameter: cb.ticks_parameter,
+                    length: cb.length,
+                    spacing: cb.spacing,
+                    start: start,
+                    end: end,
+                    channel_color: channel_color,
+                    lutBgPos: lutBgPos,
+                    lut_url: lut_url
                 };
                 var cb_html = this.calib_template(cb_json);
                 this.$el.append(cb_html);

From aa284345d8302a5e780bd70153a10868e4e60352 Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Tue, 3 Dec 2024 15:58:19 +0100
Subject: [PATCH 17/39] Adding defaults value, renaming, adding space between
 tick and label, adding inverting of colorbar

---
 src/css/figure.css                            | 38 ++++++-------
 src/index.html                                |  4 +-
 src/js/models/panel_model.js                  | 16 +++---
 ...lib_form_view.js => colorbar_form_view.js} | 57 ++++++++++---------
 src/js/views/panel_view.js                    | 28 +++++----
 src/js/views/right_panel_view.js              | 14 ++---
 ...r.template.html => colorbar.template.html} | 52 ++++++++++-------
 ...plate.html => colorbar_form.template.html} | 31 ++++++----
 8 files changed, 134 insertions(+), 106 deletions(-)
 rename src/js/views/{calib_form_view.js => colorbar_form_view.js} (61%)
 rename src/templates/{calib_bar.template.html => colorbar.template.html} (55%)
 rename src/templates/{calib_form.template.html => colorbar_form.template.html} (77%)

diff --git a/src/css/figure.css b/src/css/figure.css
index b070869b4..6e48e9c78 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1336,15 +1336,15 @@
         cursor: move;
     }
 
-    .calib {
+    .colorbar {
         position: absolute;
     }
 
-    .calib_middle td {
+    .colorbar_middle td {
         vertical-align: middle;
     }
 
-    .calib_leftvert{
+    .colorbar_left{
         position: absolute;
         top: 0%;
         right:100%;
@@ -1355,7 +1355,7 @@
         transform: scaleX(-1) rotate(-90deg);
     }
 
-    .calib_rightvert{
+    .colorbar_right{
         position: absolute;
         top: 0%;
         left: 100%;
@@ -1366,27 +1366,27 @@
         transform: rotate(-90deg);
     }
 
-    .calib_top {
+    .colorbar_top {
         bottom: 100%;
         width: 100%;
         left: 0%;
         margin-bottom: 10px;
     }
 
-    .calib_bottom {
+    .colorbar_bottom {
         top: 100%;
         width: 100%;
         left: 0%;
         margin-top: 10px;
     }
 
-    .calib_bg {
+    .colorbar_bg {
         margin-right: 0px;
         margin-left: 0px;
         display: flex;
     }
         
-    .calibration_ticks {
+    .colorbar_ticks {
         margin: 0;
         display: flex;
         align-items: center;
@@ -1395,23 +1395,30 @@
         width: 100%;
     }
 
-    .calibration_ticks_top .ticks_top {
+    .colorbar_ticks_top .ticks_top {
         -webkit-transform: scaleX(-1) rotate(180deg);
         transform: scaleX(-1) rotate(180deg);
     }
 
-    .calibration_ticks_top .label{
+    .colorbar_ticks_top .label{
         transform: scaleX(-1) rotate(180deg);
+        text-align: center;
+    }
+
+    .colorbar_ticks_bottom .label{
+        text-align: center;
     }
 
-    .calibration_ticks_leftvert .label{
+    .colorbar_ticks_left .label{
         -webkit-transform: scaleX(-1) rotate(-90deg);
         transform: scaleX(-1) rotate(-90deg);
+        text-align: right;
     }
 
-    .calibration_ticks_rightvert .label{
+    .colorbar_ticks_right .label{
         -webkit-transform: rotate(90deg);
         transform: rotate(90deg);
+        text-align: left;
     }
 
     .ticks {
@@ -1430,11 +1437,4 @@
 
     .dash {
         width: 2px;
-        margin-bottom: 5px;
-    }
-
-    .label {
-        font-size: 12px;
-        text-align: center;
-        margin-left: 0;
     }
diff --git a/src/index.html b/src/index.html
index 0cbbf0fbc..5e1478fa1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1870,8 +1870,8 @@ <h5>Scalebar</h5>
 
             <hr />
 
-            <h5>Calibration Bar</h5>
-            <div id="calib_form"></div>
+            <h5>Colorbar</h5>
+            <div id="colorbar_form"></div>
             <hr />
 
             <h5 style="float: left; margin-top: 10px">Add Labels</h5>
diff --git a/src/js/models/panel_model.js b/src/js/models/panel_model.js
index 882e2a481..658c2401a 100644
--- a/src/js/models/panel_model.js
+++ b/src/js/models/panel_model.js
@@ -239,18 +239,18 @@
             this.save('scalebar', sb);
         },
 
-        hide_calib: function() {
-            // keep all calib properties, except 'show'
-            var cb = $.extend(true, {}, this.get('calib'));
+        hide_colorbar: function() {
+            // keep all colorbar properties, except 'show'
+            var cb = $.extend(true, {}, this.get('colorbar'));
             cb.show = false;
-            this.save('calib', cb);
+            this.save('colorbar', cb);
         },
 
-        save_calib: function(new_cb) {
-            // update only the attributes of calib we're passed
-            var old_cb = $.extend(true, {}, this.get('calib') || {});
+        save_colorbar: function(new_cb) {
+            // update only the attributes of colorbar we're passed
+            var old_cb = $.extend(true, {}, this.get('colorbar') || {});
             var cb = $.extend(true, old_cb, new_cb);
-            this.save('calib', cb);
+            this.save('colorbar', cb);
         },
 
         // Simple checking whether shape is in viewport (x, y, width, height)
diff --git a/src/js/views/calib_form_view.js b/src/js/views/colorbar_form_view.js
similarity index 61%
rename from src/js/views/calib_form_view.js
rename to src/js/views/colorbar_form_view.js
index a57ac9947..ed6cab9bc 100644
--- a/src/js/views/calib_form_view.js
+++ b/src/js/views/colorbar_form_view.js
@@ -2,11 +2,11 @@ import Backbone from "backbone";
 import _, { forEach } from "underscore";
 import $ from "jquery";
 
-import calib_form_template from '../../templates/calib_form.template.html?raw';
+import colorbar_form_template from '../../templates/colorbar_form.template.html?raw';
 
-var CalibBarFormView = Backbone.View.extend({
+var ColorbarFormView = Backbone.View.extend({
 
-    template: _.template(calib_form_template),
+    template: _.template(colorbar_form_template),
 
     initialize: function(opts) {
         this.render = _.debounce(this.render);
@@ -14,21 +14,21 @@ var CalibBarFormView = Backbone.View.extend({
 
         var self = this;
         this.models.forEach(function(m) {
-            self.listenTo(m, 'change:calib', self.render);
+            self.listenTo(m, 'change:colorbar', self.render);
         });
     },
 
     events: {
-        "submit .calib_form": "update_calib",
+        "submit .colorbar_form": "update_colorbar",
         "change .btn": "dropdown_btn_changed",
-        "click .hide_calib": "hide_calib",
+        "click .hide_colorbar": "hide_colorbar",
         "keyup input[type='number']"  : "handle_keyup",
      },
 
     handle_keyup: function (event) {
         // If Enter key - submit form...
         if (event.which == 13) {
-            this.update_calib();
+            this.update_colorbar();
         }
     },
 
@@ -36,21 +36,22 @@ var CalibBarFormView = Backbone.View.extend({
         $(event.target).closest('form').submit();
     },
 
-    hide_calib: function() {
+    hide_colorbar: function() {
         this.models.forEach(function(m) {
-            m.hide_calib();
+            m.hide_colorbar();
         });
     },
 
-    update_calib: function(event) {
-        var $form = $('.calib_form');
+    update_colorbar: function(event) {
+        var $form = $('.colorbar_form');
         var position = $('.label-position i:first', $form).attr('data-position'),
-            thickness = parseInt($('.calib-thickness', $form).val()),
-            font_size = $('.calib_font_size span:first', $form).text().trim(),
-            color = $('.calib-color span:first', $form).attr('data-color'),
-            ticks_parameter = parseInt($('.calib-tick-parameter', $form).val()),
-            length = parseInt($('.calib-tick-length', $form).val()),
-            spacing = parseInt($('.calib-spacing', $form).val());
+            thickness = parseInt($('.colorbar-thickness', $form).val()),
+            font_size = $('.colorbar_font_size span:first', $form).text().trim(),
+            color = $('.colorbar-color span:first', $form).attr('data-color'),
+            ticks_parameter = parseInt($('.colorbar-tick-parameter', $form).val()),
+            length = parseInt($('.colorbar-tick-length', $form).val()),
+            spacing = parseInt($('.colorbar-spacing', $form).val()),
+            tick_label_spacing = parseInt($('.colorbar-tick-label-spacing', $form).val());
 
         this.models.forEach(function(m) {
             var lutBgPos = m.get('lutBgPos');
@@ -62,7 +63,8 @@ var CalibBarFormView = Backbone.View.extend({
             if (ticks_parameter != '-') cb.ticks_parameter = ticks_parameter;
             if (length != '-') cb.length = length;
             if (spacing != '-') cb.spacing = spacing;
-            m.save_calib(cb);
+            if (tick_label_spacing != '-') cb.tick_label_spacing = tick_label_spacing;
+            m.save_colorbar(cb);
         });
         return false;
     },
@@ -73,7 +75,7 @@ var CalibBarFormView = Backbone.View.extend({
             cb;
 
         this.models.forEach(function(m) {
-            cb = m.get('calib');
+            cb = m.get('colorbar');
 
             if (cb) {
                 if (!cb_json.length) {
@@ -84,6 +86,7 @@ var CalibBarFormView = Backbone.View.extend({
                     cb_json.ticks_parameter = cb.ticks_parameter;
                     cb_json.length = cb.length;
                     cb_json.spacing = cb.spacing;
+                    cb_json.tick_label_spacing = cb.tick_label_spacing;
                 } else {
                     if (cb_json.position != cb.position) cb_json.position = '-';
                     if (cb_json.thickness != cb.thickness) cb_json.thickness = '-';
@@ -92,6 +95,7 @@ var CalibBarFormView = Backbone.View.extend({
                     if (cb_json.ticks_parameter != cb.ticks_parameter) cb_json.ticks_parameter = '-';
                     if (cb_json.length != cb.length) cb_json.length = '-';
                     if (cb_json.spacing != cb.spacing) cb_json.spacing = '-';
+                    if (cb_json.tick_label_spacing != cb.tick_label_spacing) cb_json.tick_label_spacing = '-';
                 }
             }
             if (!cb || !cb.show) hidden = true;
@@ -101,17 +105,18 @@ var CalibBarFormView = Backbone.View.extend({
             cb_json.show = true;
         }
 
-        cb_json.position = cb_json.position || 'top';
-        cb_json.thickness = cb_json.thickness || 45;
-        cb_json.font_size = cb_json.font_size || 12;
+        cb_json.position = cb_json.position || 'right';
+        cb_json.thickness = cb_json.thickness || 15;
+        cb_json.font_size = cb_json.font_size || 10;
         cb_json.color = cb_json.color || '000';
-        cb_json.ticks_parameter = cb_json.ticks_parameter || 6;
-        cb_json.length = cb_json.length || 10;
-        cb_json.spacing = cb_json.spacing || 10;
+        cb_json.ticks_parameter = cb_json.ticks_parameter || 7;
+        cb_json.length = cb_json.length || 3;
+        cb_json.spacing = cb_json.spacing || 5;
+        cb_json.tick_label_spacing = cb_json.tick_label_spacing || 5;
         var html = this.template(cb_json);
         this.$el.html(html);
         return this;
     }
 });
 
-export default CalibBarFormView;
\ No newline at end of file
+export default ColorbarFormView;
\ No newline at end of file
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index b42933545..194307375 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -12,7 +12,7 @@
     import label_right_vertical_template from '../../templates/labels/label_right_vertical.template.html?raw';
     import label_table_template from '../../templates/labels/label_table.template.html?raw';
     import scalebar_panel_template from '../../templates/scalebar_panel.template.html?raw';
-    import calib_bar_panel_template from '../../templates/calib_bar.template.html?raw';
+    import colorbar_panel_template from '../../templates/colorbar.template.html?raw';
     import FigureLutPicker from "../views/lutpicker";
     
     // -------------------------Panel View -----------------------------------
@@ -26,7 +26,7 @@
         label_right_vertical_template: _.template(label_right_vertical_template),
         label_table_template: _.template(label_table_template),
         scalebar_template: _.template(scalebar_panel_template),
-        calib_template: _.template(calib_bar_panel_template),
+        colorbar_template: _.template(colorbar_panel_template),
 
 
         initialize: function(opts) {
@@ -36,7 +36,7 @@
                 'change:x change:y change:width change:height change:zoom change:dx change:dy change:rotation',
                 this.render_layout);
             this.listenTo(this.model, 'change:scalebar change:pixel_size_x', this.render_scalebar);
-            this.listenTo(this.model, 'change:calib change:channels', this.render_calib);
+            this.listenTo(this.model, 'change:colorbar change:channels', this.render_colorbar);
             this.listenTo(this.model,
                 'change:zoom change:dx change:dy change:width change:height change:channels change:theZ change:theT change:z_start change:z_end change:z_projection change:min_export_dpi change:pixel_range',
                 this.render_image);
@@ -318,20 +318,23 @@
             this.render_layout();
         },
 
-        render_calib: function() {
+        render_colorbar: function() {
 
-            if (this.$calib) {
-                this.$calib.remove();
+            if (this.$colorbar) {
+                this.$colorbar.remove();
             }
-            var cb = this.model.get('calib');
+            var cb = this.model.get('colorbar');
             var start = 0,
                 end = 125,
+                reverseIntensity = false,
                 channel_color = "";
+            console.log("channel model", this.model.get('channels'));
             for (const chann of this.model.get('channels')) {
                 if(chann.active) {
                     channel_color = chann.color;
                     start = chann.window?.start;
                     end = chann.window?.end;
+                    reverseIntensity = chann.reverseIntensity;
                     break;
                 }
             }
@@ -346,17 +349,20 @@
                         ticks_parameter: cb.ticks_parameter,
                         length: cb.length,
                         spacing: cb.spacing,
+                        tick_label_spacing: cb.tick_label_spacing,
                         start: start,
                         end: end,
                         channel_color: channel_color,
                         lutBgPos: lutBgPos,
+                        reverseIntensity: reverseIntensity,
                 };
-                var cb_html = this.calib_template(cb_json);
+                console.log("Reverse Intensity", reverseIntensity);
+                var cb_html = this.colorbar_template(cb_json);
                 this.$el.append(cb_html);
             }
-            this.$calib = $(".calib", this.$el);
+            this.$colorbar = $(".colorbar", this.$el);
 
-            // update calib size wrt current sizes
+            // update colorbar size wrt current sizes
             this.render_layout();
         },
 
@@ -380,7 +386,7 @@
             this.render_image();
             this.render_labels();
             this.render_scalebar();     // also calls render_layout()
-            this.render_calib();
+            this.render_colorbar();
 
             // At this point, element is not ready for Raphael svg
             // If we wait a short time, works fine
diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js
index 457642ef3..e2e19e532 100644
--- a/src/js/views/right_panel_view.js
+++ b/src/js/views/right_panel_view.js
@@ -15,7 +15,7 @@
     import InfoPanelView from "./info_panel_view";
     import ChannelSliderView from "./channel_slider_view";
     import ScalebarFormView from "./scalebar_form_view";
-    import CalibBarFormView from "./calib_form_view";
+    import ColorbarFormView from "./colorbar_form_view";
     import ZtSlidersView from "./zt_sliders_view";
 
     import image_display_options_template from '../../templates/image_display_options.template.html?raw';
@@ -537,14 +537,14 @@
             if (old_sb) {
                 old_sb.remove();
             }
-            // show calib form for selected panels
-            var old_cb = this.calib_form;
-            var $calib_form = $("#calib_form");
+            // show colorbar form for selected panels
+            var old_cb = this.colorbar_form;
+            var $colorbar_form = $("#colorbar_form");
 
             if (selected.length > 0) {
-                this.calib_form = new CalibBarFormView({models: selected});
-                this.calib_form.render();
-                $calib_form.empty().append(this.calib_form.$el);
+                this.colorbar_form = new ColorbarFormView({models: selected});
+                this.colorbar_form.render();
+                $colorbar_form.empty().append(this.colorbar_form.$el);
             }
             if (old_cb) {
                 old_cb.remove();
diff --git a/src/templates/calib_bar.template.html b/src/templates/colorbar.template.html
similarity index 55%
rename from src/templates/calib_bar.template.html
rename to src/templates/colorbar.template.html
index 637a78db4..eed436ca4 100644
--- a/src/templates/calib_bar.template.html
+++ b/src/templates/colorbar.template.html
@@ -1,74 +1,84 @@
-<div class="calib calib_<%= position %>"
+<div class="colorbar colorbar_<%= position %>"
      style="<% if (position === 'top') { %> margin-bottom: <%= spacing %>px; <% }
                 else if (position === 'bottom') { %> margin-top: <%= spacing %>px; <% }
-                else if (position === 'leftvert') { %> margin-right: <%= spacing %>px; <% }
-                else if (position === 'rightvert') { %> margin-left: <%= spacing %>px; <% } %>">
+                else if (position === 'left') { %> margin-right: <%= spacing %>px; <% }
+                else if (position === 'right') { %> margin-left: <%= spacing %>px; <% } %>">
     <% if (show) { %>
         <% if (position === 'top') { %>
             <!-- Render div 2 first for 'top' -->
-            <div class="calibration_ticks calibration_ticks_<%= position %>">
+            <div class="colorbar_ticks colorbar_ticks_<%= position %>">
                 <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
-                    <% var interval = Math.floor((end - start) / (ticks_parameter - 1)); %>
-
+                    <% 
+                        var tickStart = reverseIntensity ? end : start;
+                        var tickEnd = reverseIntensity ? start : end;
+                        var interval = Math.floor((tickEnd - tickStart) / (ticks_parameter - 1)); 
+                    %>
                     <!-- First tick (start value) -->
                     <div class="tick">
-                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
                         <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
                     </div>                    
 
                     <!-- Intermediate ticks -->
                     <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
                         <div class="tick">
-                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
                             <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
-                                <%= start + i * interval %>
+                                <%= Math.abs(start + i * interval) %>
                             </span>
                         </div>
                     <% } %>
 
                     <!-- Last tick (end value) -->
                     <div class="tick">
-                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
                         <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
                     </div>
                      
                 </div>
             </div>
-            <div class="lutBg calib_bg"
+            <div class="lutBg colorbar_bg"
                  style="height: <%= thickness %>px;
-                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)' %>;
+                        background-image: <%= reverseIntensity ? 
+                           (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
+                           (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
             </div>
         <% } else { %>
             <!-- Default order for non-'top' positions -->
-            <div class="lutBg calib_bg"
+            <div class="lutBg colorbar_bg"
                  style="height: <%= thickness %>px;
-                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)' %>;
+                        background-image: <%= reverseIntensity ? 
+                           (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
+                           (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
             </div>
-            <div class="calibration_ticks calibration_ticks_<%= position %>">
+            <div class="colorbar_ticks colorbar_ticks_<%= position %>">
                 <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
-                    <% var interval = Math.floor((end - start) / (ticks_parameter - 1)); %>
-
+                    <% 
+                        var tickStart = reverseIntensity ? end : start;
+                        var tickEnd = reverseIntensity ? start : end;
+                        var interval = Math.floor((tickEnd - tickStart) / (ticks_parameter - 1)); 
+                    %>
                     <!-- First tick (start value) -->
                     <div class="tick">
-                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                        <div class="dash dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
                         <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
                     </div>
 
                     <!-- Intermediate ticks -->
                     <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
                         <div class="tick">
-                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
                             <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
-                                <%= start + i * interval %>
+                                <%= Math.abs(start + i * interval) %>
                             </span>
                         </div>
                     <% } %>
 
                     <!-- Last tick (end value) -->
                     <div class="tick">
-                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px"></div>
+                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
                         <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
                     </div>
                 </div>
diff --git a/src/templates/calib_form.template.html b/src/templates/colorbar_form.template.html
similarity index 77%
rename from src/templates/calib_form.template.html
rename to src/templates/colorbar_form.template.html
index ea8f9bb8f..b970d2eda 100644
--- a/src/templates/calib_form.template.html
+++ b/src/templates/colorbar_form.template.html
@@ -1,23 +1,23 @@
-<form class="calib_form">
+<form class="colorbar_form">
     <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
         <div class="col-auto input-group-sm">
             <label class="col-form-label col-form-label-sm" style="">Thickness</label>
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
-            <input type="number" class="label-text calib-thickness form-control input-sm" 
+            <input type="number" class="label-text colorbar-thickness form-control input-sm" 
             placeholder="Thickness" value="<%= thickness %>" style="width:52px" />
         </div>
         <div class="col-auto input-group-sm">
             <label class="col-form-label col-form-label-sm" style="">Spacing</label>
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
-            <input type="number" class="label-text calib-spacing form-control input-sm" 
+            <input type="number" class="label-text colorbar-spacing form-control input-sm" 
             placeholder="Height" value="<%= spacing %>" style="width:52px" />
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
             <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle" 
                     title="Position" data-bs-toggle="dropdown">
-                <i data-position="<%= position %>" class="bi-box-arrow-in-<%= position.replace('bottom', 'down').replace('top', 'up').replace('rightvert', 'right').replace('leftvert', 'left') %> dropdown_icon"></i>
+                <i data-position="<%= position %>" class="bi-box-arrow-in-<%= position.replace('bottom', 'down').replace('top', 'up') %> dropdown_icon"></i>
                 <span class="caret"></span>
             </button>
             <ul class="dropdown-menu" role="menu">
@@ -28,18 +28,18 @@
                     <i data-position="bottom" class="bi-box-arrow-down dropdown_icon"></i> Bottom</a>
                 </li>
                 <li><a class="dropdown-item" href="#">
-                    <i data-position="leftvert" class="bi-box-arrow-left dropdown_icon"></i> Left</a>
+                    <i data-position="left" class="bi-box-arrow-left dropdown_icon"></i> Left</a>
                 </li>
                 <li><a class="dropdown-item" href="#">
-                    <i data-position="rightvert" class="bi-box-arrow-right dropdown_icon"></i> Right</a>
+                    <i data-position="right" class="bi-box-arrow-right dropdown_icon"></i> Right</a>
                 </li>
             </ul>
         </div>
         <div class="col-auto input-group-sm" style="flex: 1 1 auto; padding-right: 0">
             <% if (show){ %>
-                <button type="submit" class="show_calib btn btn-sm btn-success float-end">Show</button>
+                <button type="submit" class="show_colorbar btn btn-sm btn-success float-end">Show</button>
             <% } else { %>
-                <button type="button" class="hide_calib btn btn-outline-secondary btn-sm float-end">Hide</button>
+                <button type="button" class="hide_colorbar btn btn-outline-secondary btn-sm float-end">Hide</button>
             <% } %>
         </div>
     </div>
@@ -48,18 +48,18 @@
             <label class="col-form-label col-form-label-sm" >Ticks</label>
         </div>
         <div class="col-auto btn-group">
-          <input type="number" class="calib-tick-parameter input-sm form-control"
+          <input type="number" class="colorbar-tick-parameter input-sm form-control"
             placeholder="Parameter" value="<%= ticks_parameter %>" style="width:52px"/>
         </div>
         <div class="col-auto btn-group">
             <label class="col-form-label col-form-label-sm" style="">Length</label>
         </div>
         <div class="col-auto btn-group">
-          <input type="number" class="calib-tick-length input-sm form-control"
+          <input type="number" class="colorbar-tick-length input-sm form-control"
             placeholder="Length" value="<%= length %>" style="width:52px"/>
         </div>
         <div class="col-auto btn-group" style="padding: 0; width:50px;">
-            <button type="button" class="calib_font_size btn btn-outline-secondary btn-sm dropdown-toggle" title="Font Size"
+            <button type="button" class="colorbar_font_size btn btn-outline-secondary btn-sm dropdown-toggle" title="Font Size"
             data-bs-toggle="dropdown" style="width:33px;">
                 <span class='dropdown_icon'><%= font_size %></span>
                 <span class="caret"></span>
@@ -71,7 +71,7 @@
             </ul>
         </div>
         <div class="form-group col-sm-auto btn-group">
-            <button type="button" class="calib-color btn btn-outline-secondary btn-sm dropdown-toggle" title="Label Color"
+            <button type="button" class="colorbar-color btn btn-outline-secondary btn-sm dropdown-toggle" title="Label Color"
                 data-bs-toggle="dropdown">
                 <span class="dropdown_icon" data-color="<%= color %>" style="background-color:#<%= color %>">&nbsp &nbsp &nbsp</span>
                 <span class="caret"></span>
@@ -104,5 +104,12 @@
                 </a></li>
             </ul>
         </div>
+        <div class="col-auto input-group-sm">
+            <label class="col-form-label col-form-label-sm" style="">Spacing between tick and label</label>
+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+            <input type="number" class="label-text colorbar-tick-label-spacing form-control input-sm" 
+            placeholder="Spacing between tick and label" value="<%= tick_label_spacing %>" style="width:52px" />
+        </div>
     </div>
 </form>

From 52b2952e6adbe920b6e36f6d1486bc0d18ae980b Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Tue, 3 Dec 2024 16:59:05 +0100
Subject: [PATCH 18/39] Adding Inverse colorbar

---
 src/js/views/panel_view.js           | 27 ++++-----------------------
 src/templates/colorbar.template.html | 11 ++++++-----
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index e3a1bedb6..c9a036ec7 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -361,11 +361,7 @@
             this.render_layout();
         },
 
-<<<<<<< HEAD
-        render_colorbar: function() {
-=======
-        render_calib: async function() {
->>>>>>> 51b1b7af6b947400b92940ab8437166f5bd5bd03
+        render_colorbar: async function() {
 
             if (this.$colorbar) {
                 this.$colorbar.remove();
@@ -389,22 +385,6 @@
             var lutBgPos = FigureLutPicker.getLutBackgroundPosition(channel_color);
             if (cb && cb.show) {
                 var cb_json = {
-<<<<<<< HEAD
-                        position: cb.position,
-                        show: cb.show,
-                        thickness: cb.thickness,
-                        font_size: cb.font_size,
-                        color: cb.color,
-                        ticks_parameter: cb.ticks_parameter,
-                        length: cb.length,
-                        spacing: cb.spacing,
-                        tick_label_spacing: cb.tick_label_spacing,
-                        start: start,
-                        end: end,
-                        channel_color: channel_color,
-                        lutBgPos: lutBgPos,
-                        reverseIntensity: reverseIntensity,
-=======
                     position: cb.position,
                     show: cb.show,
                     thickness: cb.thickness,
@@ -413,12 +393,13 @@
                     ticks_parameter: cb.ticks_parameter,
                     length: cb.length,
                     spacing: cb.spacing,
+                    tick_label_spacing: cb.tick_label_spacing,
                     start: start,
                     end: end,
                     channel_color: channel_color,
                     lutBgPos: lutBgPos,
-                    lut_url: lut_url
->>>>>>> 51b1b7af6b947400b92940ab8437166f5bd5bd03
+                    lut_url: lut_url,
+                    reverseIntensity: reverseIntensity,
                 };
                 console.log("Reverse Intensity", reverseIntensity);
                 var cb_html = this.colorbar_template(cb_json);
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index a9422b44c..8411f677a 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -42,16 +42,17 @@
                         background-image: <%= reverseIntensity ? 
                            (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
                            (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
-                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(' + lut_url + ')' %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
             </div>
         <% } else { %>
             <!-- Default order for non-'top' positions -->
             <div class="lutBg colorbar_bg"
-                 style="height: <%= thickness %>px;
-                        background-image: <%= lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(' + lut_url + ')' %>;
-                        <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
-            </div>
+            style="height: <%= thickness %>px;
+                   background-image: <%= reverseIntensity ? 
+                      (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
+                      (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
+                   <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
+       </div>
             <div class="colorbar_ticks colorbar_ticks_<%= position %>">
                 <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
                     <% 

From 37ee30ece610d1afdda41fc1a97f7d65805db641 Mon Sep 17 00:00:00 2001
From: unknown <tehminaenayat00@gmail.com>
Date: Tue, 3 Dec 2024 17:11:02 +0100
Subject: [PATCH 19/39] Adding Inverse colorbar - for Lut

---
 src/js/views/panel_view.js           |  2 --
 src/templates/colorbar.template.html | 16 +++++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index c9a036ec7..d7e45dd35 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -371,7 +371,6 @@
                 end = 125,
                 reverseIntensity = false,
                 channel_color = "";
-            console.log("channel model", this.model.get('channels'));
             for (const chann of this.model.get('channels')) {
                 if(chann.active) {
                     channel_color = chann.color;
@@ -401,7 +400,6 @@
                     lut_url: lut_url,
                     reverseIntensity: reverseIntensity,
                 };
-                console.log("Reverse Intensity", reverseIntensity);
                 var cb_html = this.colorbar_template(cb_json);
                 this.$el.append(cb_html);
             }
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index 8411f677a..e17732c2e 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -38,20 +38,22 @@
                 </div>
             </div>
             <div class="lutBg colorbar_bg"
-                 style="height: <%= thickness %>px;
+                style="height: <%= thickness %>px;
                         background-image: <%= reverseIntensity ? 
-                           (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
-                           (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
+                        <%= lutBgPos !== '0px 100px' && reverseIntensity ? 'transform: scaleX(-1);' : '' %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
             </div>
         <% } else { %>
             <!-- Default order for non-'top' positions -->
             <div class="lutBg colorbar_bg"
             style="height: <%= thickness %>px;
-                   background-image: <%= reverseIntensity ? 
-                      (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
-                      (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
-                   <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
+                        background-image: <%= reverseIntensity ? 
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
+                        <%= lutBgPos !== '0px 100px' && reverseIntensity ? 'transform: scaleX(-1);' : '' %>;
+                        <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
        </div>
             <div class="colorbar_ticks colorbar_ticks_<%= position %>">
                 <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">

From bf550d29aeeffadaa8f94faf7d60b9e158e825a1 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Thu, 5 Dec 2024 12:52:39 +0100
Subject: [PATCH 20/39] set lut_png url to handle static and dynamic

---
 src/templates/colorbar.template.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index e17732c2e..a7f4de318 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -8,10 +8,10 @@
             <!-- Render div 2 first for 'top' -->
             <div class="colorbar_ticks colorbar_ticks_<%= position %>">
                 <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
-                    <% 
+                    <%
                         var tickStart = reverseIntensity ? end : start;
                         var tickEnd = reverseIntensity ? start : end;
-                        var interval = Math.floor((tickEnd - tickStart) / (ticks_parameter - 1)); 
+                        var interval = Math.floor((tickEnd - tickStart) / (ticks_parameter - 1));
                     %>
                     <!-- First tick (start value) -->
                     <div class="tick">
@@ -39,9 +39,9 @@
             </div>
             <div class="lutBg colorbar_bg"
                 style="height: <%= thickness %>px;
-                        background-image: <%= reverseIntensity ? 
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
+                        background-image: <%= reverseIntensity ?
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(' + lut_url + ')') :
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(' + lut_url + ')') %>;
                         <%= lutBgPos !== '0px 100px' && reverseIntensity ? 'transform: scaleX(-1);' : '' %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
             </div>
@@ -49,18 +49,18 @@
             <!-- Default order for non-'top' positions -->
             <div class="lutBg colorbar_bg"
             style="height: <%= thickness %>px;
-                        background-image: <%= reverseIntensity ? 
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') :
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(/images/luts_10.png)') %>;
+                        background-image: <%= reverseIntensity ?
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(' + lut_url + ')') :
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(' + lut_url + ')') %>;
                         <%= lutBgPos !== '0px 100px' && reverseIntensity ? 'transform: scaleX(-1);' : '' %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
        </div>
             <div class="colorbar_ticks colorbar_ticks_<%= position %>">
                 <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
-                    <% 
+                    <%
                         var tickStart = reverseIntensity ? end : start;
                         var tickEnd = reverseIntensity ? start : end;
-                        var interval = Math.floor((tickEnd - tickStart) / (ticks_parameter - 1)); 
+                        var interval = Math.floor((tickEnd - tickStart) / (ticks_parameter - 1));
                     %>
                     <!-- First tick (start value) -->
                     <div class="tick">

From 19b8dd944ce622fb87039a921716cc95f5e989ea Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Thu, 5 Dec 2024 14:17:48 +0100
Subject: [PATCH 21/39] update export script with new param

---
 .../omero/figure_scripts/Figure_To_Pdf.py     | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index 7ef19ea04..9961e4e73 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -1751,8 +1751,8 @@ def draw_colorbar(self, panel, page):
         the colorbar, ticks and labels on PDF/TIFF
         """
 
-        calib = panel.get("calib", {})
-        if not calib.get("show", False):
+        colorbar = panel.get("colorbar", {})
+        if not colorbar.get("show", False):
             return
 
         channel = None
@@ -1765,44 +1765,44 @@ def draw_colorbar(self, panel, page):
 
         color_ramp = self.get_color_ramp(channel)
 
-        offset = 10  # calib["offset"]
-        cbar = {
+        spacing = colorbar["spacing"]
+        cbar = {  # Dict of colorbar properties to pass to paste_image
             'zoom': '100',
             'dx': 0,
             'dy': 0,
             'orig_height': panel['orig_height'],
             'orig_width': panel['orig_width'],
         }
-        calib["num_ticks"] = 6
-        calib["tick_len"] = 3
+        colorbar["num_ticks"] = 6
+        colorbar["tick_len"] = 3
         start, end = channel["window"]["start"], channel["window"]["end"]
         labels = numpy.unique(numpy.linspace(start, end,
-                                             num=calib["num_ticks"],
+                                             num=colorbar["num_ticks"],
                                              dtype=int))
-        if calib["position"] in ["leftvert", "rightvert"]:
+        if colorbar["position"] in ["left", "right"]:
             color_ramp = color_ramp.transpose((1, 0, 2))[::-1]
-            cbar['width'] = calib['thickness']
+            cbar['width'] = colorbar['thickness']
             cbar['height'] = panel['height']
             cbar['y'] = panel['y']
-            cbar['x'] = panel['x'] - (offset + calib['thickness'])
+            cbar['x'] = panel['x'] - (spacing + colorbar['thickness'])
             labels_x = [cbar['x']]
             labels_y = cbar['y'] + panel['height'] * (1 - labels / end)
             align = "right"
-            if calib["position"] == "rightvert":
-                cbar['x'] = panel['x'] + panel['width'] + offset
+            if colorbar["position"] == "right":
+                cbar['x'] = panel['x'] + panel['width'] + spacing
                 labels_x = [cbar['x'] + cbar['width']]
                 align = "left"
             labels_x *= labels.size  # Duplicate x postions
-        elif calib["position"] in ["top", "bottom"]:
+        elif colorbar["position"] in ["top", "bottom"]:
             cbar['width'] = panel['width']
-            cbar['height'] = calib['thickness']
+            cbar['height'] = colorbar['thickness']
             cbar['x'] = panel['x']
-            cbar['y'] = panel['y'] - (offset + calib['thickness'])
+            cbar['y'] = panel['y'] - (spacing + colorbar['thickness'])
             labels_x = cbar['x'] + panel['width'] * labels / end
             labels_y = [cbar['y']]
             align = "center"
-            if calib["position"] == "bottom":
-                cbar['y'] = panel['y'] + panel['height'] + offset
+            if colorbar["position"] == "bottom":
+                cbar['y'] = panel['y'] + panel['height'] + spacing
                 labels_y = [cbar['y'] + cbar['height']]
             labels_y *= labels.size  # Duplicate y postions
 
@@ -1817,13 +1817,13 @@ def draw_colorbar(self, panel, page):
                          is_colorbar=True)
 
         rgb = (0, 0, 0)
-        fontsize = 10
+        fontsize = colorbar["font_size"]
         tick_width = 1
         tick_len = 3
         contour_width = tick_width
         for label, pos_x, pos_y in zip(labels, labels_x, labels_y):
 
-            # Cosmetical correction, for first and last ticks to be
+            # Cosmetic correction, for first and last ticks to be
             # aligned with the image
             shift = 0
             if label == labels[0]:
@@ -1831,7 +1831,7 @@ def draw_colorbar(self, panel, page):
             elif label == labels[-1]:
                 shift = tick_width / 2
 
-            if calib["position"] == "leftvert":
+            if colorbar["position"] == "left":
                 x2 = pos_x - tick_len
                 pos_y += shift
                 self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
@@ -1839,7 +1839,7 @@ def draw_colorbar(self, panel, page):
                 self.draw_text(str(label), pos_x - 4,
                                pos_y - fontsize / 2 + 1,
                                fontsize, rgb, align=align)
-            elif calib["position"] == "rightvert":
+            elif colorbar["position"] == "right":
                 x2 = pos_x + tick_len
                 pos_y += shift
                 self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
@@ -1847,14 +1847,14 @@ def draw_colorbar(self, panel, page):
                 self.draw_text(str(label), pos_x + 4,
                                pos_y - fontsize / 2 + 1,
                                fontsize, rgb, align=align)
-            elif calib["position"] == "top":
+            elif colorbar["position"] == "top":
                 y2 = pos_y - tick_len
                 pos_x -= shift  # Order of the label is reversed
                 self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
                                         tick_width, rgb)
                 self.draw_text(str(label), pos_x, pos_y - fontsize - 2,
                                fontsize, rgb, align=align)
-            elif calib["position"] == "bottom":
+            elif colorbar["position"] == "bottom":
                 y2 = pos_y + tick_len
                 pos_x -= shift  # Order of the label is reversed
                 self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
@@ -1862,25 +1862,25 @@ def draw_colorbar(self, panel, page):
                 self.draw_text(str(label), pos_x, pos_y + 4,
                                fontsize, rgb, align=align)
 
-        if calib["position"] == "top":
+        if colorbar["position"] == "top":
             self.draw_scalebar_line(cbar['x'],
                                     cbar['y'],
                                     cbar['x'] + cbar['width'],
                                     cbar['y'],
                                     contour_width, rgb)
-        elif calib["position"] == "bottom":
+        elif colorbar["position"] == "bottom":
             self.draw_scalebar_line(cbar['x'],
                                     cbar['y'] + cbar['height'],
                                     cbar['x'] + cbar['width'],
                                     cbar['y'] + cbar['height'],
                                     contour_width, rgb)
-        elif calib["position"] == "leftvert":
+        elif colorbar["position"] == "left":
             self.draw_scalebar_line(cbar['x'],
                                     cbar['y'],
                                     cbar['x'],
                                     cbar['y'] + cbar['height'],
                                     contour_width, rgb)
-        elif calib["position"] == "rightvert":
+        elif colorbar["position"] == "right":
             self.draw_scalebar_line(cbar['x'] + cbar['width'],
                                     cbar['y'],
                                     cbar['x'] + cbar['width'],

From 39f72f28e82bd567edd10d12dc49ba52d008c8b8 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Thu, 5 Dec 2024 18:29:07 +0100
Subject: [PATCH 22/39] rename parameters

---
 .../omero/figure_scripts/Figure_To_Pdf.py     | 11 ++--
 src/js/views/colorbar_form_view.js            | 54 ++++++++++---------
 src/js/views/panel_view.js                    | 16 +++---
 src/templates/colorbar.template.html          | 46 ++++++++--------
 src/templates/colorbar_form.template.html     | 38 ++++++-------
 5 files changed, 82 insertions(+), 83 deletions(-)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index 9961e4e73..06b0da05a 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -1766,6 +1766,7 @@ def draw_colorbar(self, panel, page):
         color_ramp = self.get_color_ramp(channel)
 
         spacing = colorbar["spacing"]
+        thickness = colorbar["thickness"]
         cbar = {  # Dict of colorbar properties to pass to paste_image
             'zoom': '100',
             'dx': 0,
@@ -1773,18 +1774,16 @@ def draw_colorbar(self, panel, page):
             'orig_height': panel['orig_height'],
             'orig_width': panel['orig_width'],
         }
-        colorbar["num_ticks"] = 6
-        colorbar["tick_len"] = 3
         start, end = channel["window"]["start"], channel["window"]["end"]
         labels = numpy.unique(numpy.linspace(start, end,
                                              num=colorbar["num_ticks"],
                                              dtype=int))
         if colorbar["position"] in ["left", "right"]:
             color_ramp = color_ramp.transpose((1, 0, 2))[::-1]
-            cbar['width'] = colorbar['thickness']
+            cbar['width'] = thickness
             cbar['height'] = panel['height']
             cbar['y'] = panel['y']
-            cbar['x'] = panel['x'] - (spacing + colorbar['thickness'])
+            cbar['x'] = panel['x'] - (spacing + thickness)
             labels_x = [cbar['x']]
             labels_y = cbar['y'] + panel['height'] * (1 - labels / end)
             align = "right"
@@ -1795,9 +1794,9 @@ def draw_colorbar(self, panel, page):
             labels_x *= labels.size  # Duplicate x postions
         elif colorbar["position"] in ["top", "bottom"]:
             cbar['width'] = panel['width']
-            cbar['height'] = colorbar['thickness']
+            cbar['height'] = thickness
             cbar['x'] = panel['x']
-            cbar['y'] = panel['y'] - (spacing + colorbar['thickness'])
+            cbar['y'] = panel['y'] - (spacing + thickness)
             labels_x = cbar['x'] + panel['width'] * labels / end
             labels_y = [cbar['y']]
             align = "center"
diff --git a/src/js/views/colorbar_form_view.js b/src/js/views/colorbar_form_view.js
index ed6cab9bc..97c327057 100644
--- a/src/js/views/colorbar_form_view.js
+++ b/src/js/views/colorbar_form_view.js
@@ -47,11 +47,11 @@ var ColorbarFormView = Backbone.View.extend({
         var position = $('.label-position i:first', $form).attr('data-position'),
             thickness = parseInt($('.colorbar-thickness', $form).val()),
             font_size = $('.colorbar_font_size span:first', $form).text().trim(),
-            color = $('.colorbar-color span:first', $form).attr('data-color'),
-            ticks_parameter = parseInt($('.colorbar-tick-parameter', $form).val()),
-            length = parseInt($('.colorbar-tick-length', $form).val()),
+            axis_color = $('.colorbar-axis-color span:first', $form).attr('data-axis-color'),
+            num_ticks = parseInt($('.colorbar-num-ticks', $form).val()),
+            tick_len = parseInt($('.colorbar-tick-length', $form).val()),
             spacing = parseInt($('.colorbar-spacing', $form).val()),
-            tick_label_spacing = parseInt($('.colorbar-tick-label-spacing', $form).val());
+            label_margin = parseInt($('.colorbar-label-margin', $form).val());
 
         this.models.forEach(function(m) {
             var lutBgPos = m.get('lutBgPos');
@@ -59,11 +59,11 @@ var ColorbarFormView = Backbone.View.extend({
             if (position != '-') cb.position = position;
             if (thickness != '-') cb.thickness = thickness;
             if (font_size != '-') cb.font_size = font_size;
-            if (color != '-') cb.color = color;
-            if (ticks_parameter != '-') cb.ticks_parameter = ticks_parameter;
-            if (length != '-') cb.length = length;
+            if (axis_color != '-') cb.axis_color = axis_color;
+            if (num_ticks != '-') cb.num_ticks = num_ticks;
+            if (tick_len != '-') cb.tick_len = tick_len;
             if (spacing != '-') cb.spacing = spacing;
-            if (tick_label_spacing != '-') cb.tick_label_spacing = tick_label_spacing;
+            if (label_margin != '-') cb.label_margin = label_margin;
             m.save_colorbar(cb);
         });
         return false;
@@ -78,41 +78,43 @@ var ColorbarFormView = Backbone.View.extend({
             cb = m.get('colorbar');
 
             if (cb) {
-                if (!cb_json.length) {
+                if (!cb_json.tick_len) {
                     cb_json.position = cb.position;
                     cb_json.thickness = cb.thickness;
                     cb_json.font_size = cb.font_size;
-                    cb_json.color = cb.color;
-                    cb_json.ticks_parameter = cb.ticks_parameter;
-                    cb_json.length = cb.length;
+                    cb_json.axis_color = cb.axis_color;
+                    cb_json.num_ticks = cb.num_ticks;
+                    cb_json.tick_len = cb.tick_len;
                     cb_json.spacing = cb.spacing;
-                    cb_json.tick_label_spacing = cb.tick_label_spacing;
+                    cb_json.label_margin = cb.label_margin;
                 } else {
                     if (cb_json.position != cb.position) cb_json.position = '-';
                     if (cb_json.thickness != cb.thickness) cb_json.thickness = '-';
                     if (cb_json.font_size != cb.font_size) cb_json.font_size = '-';
-                    if (cb_json.color != cb.color) cb_json.color = '-';
-                    if (cb_json.ticks_parameter != cb.ticks_parameter) cb_json.ticks_parameter = '-';
-                    if (cb_json.length != cb.length) cb_json.length = '-';
+                    if (cb_json.axis_color != cb.axis_color) cb_json.axis_color = '-';
+                    if (cb_json.num_ticks != cb.num_ticks) cb_json.num_ticks = '-';
+                    if (cb_json.tick_len != cb.tick_len) cb_json.tick_len = '-';
                     if (cb_json.spacing != cb.spacing) cb_json.spacing = '-';
-                    if (cb_json.tick_label_spacing != cb.tick_label_spacing) cb_json.tick_label_spacing = '-';
+                    if (cb_json.label_margin != cb.label_margin) cb_json.label_margin = '-';
                 }
             }
-            if (!cb || !cb.show) hidden = true;
+            if (!cb || !cb.show) {
+                hidden = true;
+            }
         });
 
         if (this.models.length === 0 || hidden) {
             cb_json.show = true;
         }
 
-        cb_json.position = cb_json.position || 'right';
-        cb_json.thickness = cb_json.thickness || 15;
-        cb_json.font_size = cb_json.font_size || 10;
-        cb_json.color = cb_json.color || '000';
-        cb_json.ticks_parameter = cb_json.ticks_parameter || 7;
-        cb_json.length = cb_json.length || 3;
-        cb_json.spacing = cb_json.spacing || 5;
-        cb_json.tick_label_spacing = cb_json.tick_label_spacing || 5;
+        cb_json.position = cb_json.position ?? 'right';
+        cb_json.thickness = cb_json.thickness ?? 15;
+        cb_json.font_size = cb_json.font_size ?? 10;
+        cb_json.axis_color = cb_json.axis_color ?? '000';
+        cb_json.num_ticks = cb_json.num_ticks ?? 7;
+        cb_json.tick_len = cb_json.tick_len ?? 3;
+        cb_json.spacing = cb_json.spacing ?? 5;
+        cb_json.label_margin = cb_json.label_margin ?? 5;
         var html = this.template(cb_json);
         this.$el.html(html);
         return this;
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index d7e45dd35..5f8325795 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -370,10 +370,10 @@
             var start = 0,
                 end = 125,
                 reverseIntensity = false,
-                channel_color = "";
+                color = "";
             for (const chann of this.model.get('channels')) {
                 if(chann.active) {
-                    channel_color = chann.color;
+                    color = chann.color;
                     start = chann.window?.start;
                     end = chann.window?.end;
                     reverseIntensity = chann.reverseIntensity;
@@ -381,21 +381,21 @@
                 }
             }
             var lut_url = await FigureLutPicker.loadLuts(false)  // Ensure lut url and list are loaded
-            var lutBgPos = FigureLutPicker.getLutBackgroundPosition(channel_color);
+            var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
             if (cb && cb.show) {
                 var cb_json = {
                     position: cb.position,
                     show: cb.show,
                     thickness: cb.thickness,
                     font_size: cb.font_size,
-                    color: cb.color,
-                    ticks_parameter: cb.ticks_parameter,
-                    length: cb.length,
+                    axis_color: cb.axis_color,
+                    num_ticks: cb.num_ticks,
+                    tick_len: cb.tick_len,
                     spacing: cb.spacing,
-                    tick_label_spacing: cb.tick_label_spacing,
+                    label_margin: cb.label_margin,
                     start: start,
                     end: end,
-                    channel_color: channel_color,
+                    color: color,
                     lutBgPos: lutBgPos,
                     lut_url: lut_url,
                     reverseIntensity: reverseIntensity,
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index a7f4de318..80d0ee722 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -7,23 +7,23 @@
         <% if (position === 'top') { %>
             <!-- Render div 2 first for 'top' -->
             <div class="colorbar_ticks colorbar_ticks_<%= position %>">
-                <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
+                <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>;">
                     <%
                         var tickStart = reverseIntensity ? end : start;
                         var tickEnd = reverseIntensity ? start : end;
-                        var interval = Math.floor((tickEnd - tickStart) / (ticks_parameter - 1));
+                        var interval = Math.floor((tickEnd - tickStart) / (num_ticks - 1));
                     %>
                     <!-- First tick (start value) -->
                     <div class="tick">
-                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
-                        <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
+                        <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
+                        <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;"><%= start %></span>
                     </div>
 
                     <!-- Intermediate ticks -->
-                    <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
+                    <% for (let i = 1; i < num_ticks - 1; i++) { %>
                         <div class="tick">
-                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
-                            <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
+                            <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
+                            <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;">
                                 <%= Math.abs(start + i * interval) %>
                             </span>
                         </div>
@@ -31,8 +31,8 @@
 
                     <!-- Last tick (end value) -->
                     <div class="tick">
-                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
-                        <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
+                        <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
+                        <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;"><%= end %></span>
                     </div>
 
                 </div>
@@ -40,8 +40,8 @@
             <div class="lutBg colorbar_bg"
                 style="height: <%= thickness %>px;
                         background-image: <%= reverseIntensity ?
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(' + lut_url + ')') :
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(' + lut_url + ')') %>;
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + color + ', black)' : 'url(' + lut_url + ')') :
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + color + ', black)' : 'url(' + lut_url + ')') %>;
                         <%= lutBgPos !== '0px 100px' && reverseIntensity ? 'transform: scaleX(-1);' : '' %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
             </div>
@@ -50,29 +50,27 @@
             <div class="lutBg colorbar_bg"
             style="height: <%= thickness %>px;
                         background-image: <%= reverseIntensity ?
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + channel_color + ', black)' : 'url(' + lut_url + ')') :
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + channel_color + ', black)' : 'url(' + lut_url + ')') %>;
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + color + ', black)' : 'url(' + lut_url + ')') :
+                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + color + ', black)' : 'url(' + lut_url + ')') %>;
                         <%= lutBgPos !== '0px 100px' && reverseIntensity ? 'transform: scaleX(-1);' : '' %>;
                         <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
        </div>
             <div class="colorbar_ticks colorbar_ticks_<%= position %>">
-                <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= color %>;">
+                <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>;">
                     <%
-                        var tickStart = reverseIntensity ? end : start;
-                        var tickEnd = reverseIntensity ? start : end;
-                        var interval = Math.floor((tickEnd - tickStart) / (ticks_parameter - 1));
+                        var interval = Math.floor((end - start) / (num_ticks - 1));
                     %>
                     <!-- First tick (start value) -->
                     <div class="tick">
-                        <div class="dash dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
-                        <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= start %></span>
+                        <div class="dash dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
+                        <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;"><%= start %></span>
                     </div>
 
                     <!-- Intermediate ticks -->
-                    <% for (let i = 1; i < ticks_parameter - 1; i++) { %>
+                    <% for (let i = 1; i < num_ticks - 1; i++) { %>
                         <div class="tick">
-                            <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
-                            <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;">
+                            <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
+                            <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;">
                                 <%= Math.abs(start + i * interval) %>
                             </span>
                         </div>
@@ -80,8 +78,8 @@
 
                     <!-- Last tick (end value) -->
                     <div class="tick">
-                        <div class="dash" style="background-color: #<%= color %>; height: <%= length %>px; margin-bottom:<%= tick_label_spacing %>px"></div>
-                        <span class="label" style="color: #<%= color %>; font-size: <%= font_size %>px;"><%= end %></span>
+                        <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
+                        <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;"><%= end %></span>
                     </div>
                 </div>
             </div>
diff --git a/src/templates/colorbar_form.template.html b/src/templates/colorbar_form.template.html
index b970d2eda..b71769065 100644
--- a/src/templates/colorbar_form.template.html
+++ b/src/templates/colorbar_form.template.html
@@ -4,18 +4,18 @@
             <label class="col-form-label col-form-label-sm" style="">Thickness</label>
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
-            <input type="number" class="label-text colorbar-thickness form-control input-sm" 
+            <input type="number" class="label-text colorbar-thickness form-control input-sm"
             placeholder="Thickness" value="<%= thickness %>" style="width:52px" />
         </div>
         <div class="col-auto input-group-sm">
             <label class="col-form-label col-form-label-sm" style="">Spacing</label>
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
-            <input type="number" class="label-text colorbar-spacing form-control input-sm" 
+            <input type="number" class="label-text colorbar-spacing form-control input-sm"
             placeholder="Height" value="<%= spacing %>" style="width:52px" />
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
-            <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle" 
+            <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle"
                     title="Position" data-bs-toggle="dropdown">
                 <i data-position="<%= position %>" class="bi-box-arrow-in-<%= position.replace('bottom', 'down').replace('top', 'up') %> dropdown_icon"></i>
                 <span class="caret"></span>
@@ -48,15 +48,15 @@
             <label class="col-form-label col-form-label-sm" >Ticks</label>
         </div>
         <div class="col-auto btn-group">
-          <input type="number" class="colorbar-tick-parameter input-sm form-control"
-            placeholder="Parameter" value="<%= ticks_parameter %>" style="width:52px"/>
+          <input type="number" class="colorbar-num-ticks input-sm form-control"
+            placeholder="Parameter" value="<%= num_ticks %>" style="width:52px"/>
         </div>
         <div class="col-auto btn-group">
             <label class="col-form-label col-form-label-sm" style="">Length</label>
         </div>
         <div class="col-auto btn-group">
           <input type="number" class="colorbar-tick-length input-sm form-control"
-            placeholder="Length" value="<%= length %>" style="width:52px"/>
+            placeholder="Tick length" value="<%= tick_len %>" style="width:52px"/>
         </div>
         <div class="col-auto btn-group" style="padding: 0; width:50px;">
             <button type="button" class="colorbar_font_size btn btn-outline-secondary btn-sm dropdown-toggle" title="Font Size"
@@ -71,45 +71,45 @@
             </ul>
         </div>
         <div class="form-group col-sm-auto btn-group">
-            <button type="button" class="colorbar-color btn btn-outline-secondary btn-sm dropdown-toggle" title="Label Color"
+            <button type="button" class="colorbar-axis-color btn btn-outline-secondary btn-sm dropdown-toggle" title="Label Color"
                 data-bs-toggle="dropdown">
-                <span class="dropdown_icon" data-color="<%= color %>" style="background-color:#<%= color %>">&nbsp &nbsp &nbsp</span>
+                <span class="dropdown_icon" data-axis-color="<%= axis_color %>" style="background-color:#<%= axis_color %>">&nbsp &nbsp &nbsp</span>
                 <span class="caret"></span>
             </button>
             <ul class="dropdown-menu colorpicker" role="menu">
                 <!-- NB: dropdown_icon is picked on choosing dropdown, replaces icon in button above -->
                 <li><a class="dropdown-item" href="#">
-                    <span class="dropdown_icon" data-color="000000" style="background-color:#000">&nbsp &nbsp &nbsp</span>&nbsp Black
+                    <span class="dropdown_icon" data-axis-color="000000" style="background-color:#000">&nbsp &nbsp &nbsp</span>&nbsp Black
                 </a></li>
                 <li><a class="dropdown-item" href="#">
-                    <span class="dropdown_icon" data-color="0000FF" style="background-color:#00f">&nbsp &nbsp &nbsp</span>&nbsp Blue
+                    <span class="dropdown_icon" data-axis-color="0000FF" style="background-color:#00f">&nbsp &nbsp &nbsp</span>&nbsp Blue
                 </a></li>
                 <li><a class="dropdown-item" href="#">
-                    <span class="dropdown_icon" data-color="00FF00" style="background-color:#0f0">&nbsp &nbsp &nbsp</span>&nbsp Green
+                    <span class="dropdown_icon" data-axis-color="00FF00" style="background-color:#0f0">&nbsp &nbsp &nbsp</span>&nbsp Green
                 </a></li>
                 <li><a class="dropdown-item" href="#">
-                    <span class="dropdown_icon" data-color="FF0000" style="background-color:#f00">&nbsp &nbsp &nbsp</span>&nbsp Red
+                    <span class="dropdown_icon" data-axis-color="FF0000" style="background-color:#f00">&nbsp &nbsp &nbsp</span>&nbsp Red
                 </a></li>
                 <li><a class="dropdown-item" href="#">
-                    <span class="dropdown_icon" data-color="FFFF00" style="background-color:#ff0">&nbsp &nbsp &nbsp</span>&nbsp Yellow
+                    <span class="dropdown_icon" data-axis-color="FFFF00" style="background-color:#ff0">&nbsp &nbsp &nbsp</span>&nbsp Yellow
                 </a></li>
                 <li><a class="dropdown-item" href="#">
-                    <span class="dropdown_icon" data-color="FFFFFF" style="background-color:#fff">&nbsp &nbsp &nbsp</span>&nbsp White
+                    <span class="dropdown_icon" data-axis-color="FFFFFF" style="background-color:#fff">&nbsp &nbsp &nbsp</span>&nbsp White
                 </a></li>
                 <li><a class="dropdown-item" href="#">
-                    <span class="dropdown_icon" data-color="FF00FF" style="background-color:#f0f">&nbsp &nbsp &nbsp</span>&nbsp Magenta
+                    <span class="dropdown_icon" data-axis-color="FF00FF" style="background-color:#f0f">&nbsp &nbsp &nbsp</span>&nbsp Magenta
                 </a></li>
                 <li><a class="dropdown-item" href="#">
-                    <span class="dropdown_icon" data-color="00FFFF" style="background-color:#0ff">&nbsp &nbsp &nbsp</span>&nbsp Cyan
+                    <span class="dropdown_icon" data-axis-color="00FFFF" style="background-color:#0ff">&nbsp &nbsp &nbsp</span>&nbsp Cyan
                 </a></li>
             </ul>
         </div>
         <div class="col-auto input-group-sm">
-            <label class="col-form-label col-form-label-sm" style="">Spacing between tick and label</label>
+            <label class="col-form-label col-form-label-sm" style="">Label margin</label>
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
-            <input type="number" class="label-text colorbar-tick-label-spacing form-control input-sm" 
-            placeholder="Spacing between tick and label" value="<%= tick_label_spacing %>" style="width:52px" />
+            <input type="number" class="label-text colorbar-label-margin form-control input-sm"
+            placeholder="Label margin" value="<%= label_margin %>" style="width:52px" />
         </div>
     </div>
 </form>

From e9992dcec231e7a1f1efe2a547fe81bc53fb04af Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Thu, 5 Dec 2024 19:24:05 +0100
Subject: [PATCH 23/39] minor fixes

---
 src/css/figure.css                   | 4 ++--
 src/js/views/colorbar_form_view.js   | 2 +-
 src/templates/colorbar.template.html | 4 +---
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 663fa4cbe..68b7bf922 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1368,7 +1368,7 @@
         color: white;
         border-color: #007bff;
     }
-    
+
     .flipping .btn.active i {
         color: white;
     }
@@ -1422,7 +1422,7 @@
         margin-left: 0px;
         display: flex;
     }
-        
+
     .colorbar_ticks {
         margin: 0;
         display: flex;
diff --git a/src/js/views/colorbar_form_view.js b/src/js/views/colorbar_form_view.js
index 97c327057..b775b56d2 100644
--- a/src/js/views/colorbar_form_view.js
+++ b/src/js/views/colorbar_form_view.js
@@ -78,7 +78,7 @@ var ColorbarFormView = Backbone.View.extend({
             cb = m.get('colorbar');
 
             if (cb) {
-                if (!cb_json.tick_len) {
+                if (!cb_json.length) {
                     cb_json.position = cb.position;
                     cb_json.thickness = cb.thickness;
                     cb_json.font_size = cb.font_size;
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index 80d0ee722..9928b1ddd 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -9,9 +9,7 @@
             <div class="colorbar_ticks colorbar_ticks_<%= position %>">
                 <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>;">
                     <%
-                        var tickStart = reverseIntensity ? end : start;
-                        var tickEnd = reverseIntensity ? start : end;
-                        var interval = Math.floor((tickEnd - tickStart) / (num_ticks - 1));
+                        var interval = Math.floor((end - start) / (num_ticks - 1));
                     %>
                     <!-- First tick (start value) -->
                     <div class="tick">

From aeddbf988a2a8c51c73b032f3fff253debd44bb2 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Thu, 5 Dec 2024 23:31:07 +0100
Subject: [PATCH 24/39] simplifed template, CSS and handle resize

---
 src/css/figure.css                        | 40 ++++-----
 src/js/views/panel_view.js                |  8 +-
 src/templates/colorbar.template.html      | 99 ++++++-----------------
 src/templates/colorbar_form.template.html |  6 +-
 4 files changed, 52 insertions(+), 101 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 68b7bf922..69bbcd397 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1385,10 +1385,7 @@
         position: absolute;
         top: 0%;
         right:100%;
-        height: 100%;
-        width: 100%;
-        margin-right: 10px;
-        -webkit-transform: rotate(-90deg);
+        -webkit-transform: scaleX(-1) rotate(-90deg);
         transform: scaleX(-1) rotate(-90deg);
     }
 
@@ -1396,9 +1393,6 @@
         position: absolute;
         top: 0%;
         left: 100%;
-        width: 100%;
-        height: 100%;
-        margin-left: 10px;
         -webkit-transform: rotate(-90deg);
         transform: rotate(-90deg);
     }
@@ -1424,15 +1418,20 @@
     }
 
     .colorbar_ticks {
-        margin: 0;
         display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        margin: 0;
         align-items: center;
-        justify-content: stretch;
         position: relative;
-        width: 100%;
     }
 
-    .colorbar_ticks_top .ticks_top {
+    .colorbar_ticks .label{
+        width: 0px;
+    }
+
+    .colorbar_ticks_top {
         -webkit-transform: scaleX(-1) rotate(180deg);
         transform: scaleX(-1) rotate(180deg);
     }
@@ -1440,36 +1439,31 @@
     .colorbar_ticks_top .label{
         transform: scaleX(-1) rotate(180deg);
         text-align: center;
+        display: flex;
+        justify-content: center;
     }
 
     .colorbar_ticks_bottom .label{
         text-align: center;
+        display: flex;
+        justify-content: center;
     }
 
     .colorbar_ticks_left .label{
+        display: flex;
+        flex-direction: row-reverse;
         -webkit-transform: scaleX(-1) rotate(-90deg);
         transform: scaleX(-1) rotate(-90deg);
-        text-align: right;
     }
 
     .colorbar_ticks_right .label{
         -webkit-transform: rotate(90deg);
         transform: rotate(90deg);
-        text-align: left;
-    }
-
-    .ticks {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        width: 100%;
-        margin-left: 0;
+        text-align: right;
     }
 
     .tick {
         display: flex;
-        flex-direction: column;
-        align-items: center;
     }
 
     .dash {
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 5f8325795..8a3b49bc6 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -28,7 +28,6 @@
         scalebar_template: _.template(scalebar_panel_template),
         colorbar_template: _.template(colorbar_panel_template),
 
-
         initialize: function(opts) {
             // we render on Changes in the model OR selected shape etc.
             this.model.on('destroy', this.remove, this);
@@ -158,6 +157,11 @@
                 var sb_width = panel_scale * sb_pixels;
                 this.$scalebar.css('width', sb_width);
             }
+            var cb = this.model.get('colorbar');
+            if (cb && cb.show && (cb.position == "left" || cb.position == "right")) {
+                this.$colorbar.css('width', h);
+                this.$colorbar.css('height', h);
+            }
         },
 
         render_shapes: function() {
@@ -382,6 +386,7 @@
             }
             var lut_url = await FigureLutPicker.loadLuts(false)  // Ensure lut url and list are loaded
             var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
+            var isLUT = (color.length != 6) && isNaN(parseInt(color, 16))  // check if it's a normal color or a LUT
             if (cb && cb.show) {
                 var cb_json = {
                     position: cb.position,
@@ -396,6 +401,7 @@
                     start: start,
                     end: end,
                     color: color,
+                    isLUT: isLUT,
                     lutBgPos: lutBgPos,
                     lut_url: lut_url,
                     reverseIntensity: reverseIntensity,
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index 9928b1ddd..552be3b62 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -1,85 +1,36 @@
 <div class="colorbar colorbar_<%= position %>"
      style="<% if (position === 'top') { %> margin-bottom: <%= spacing %>px; <% }
-                else if (position === 'bottom') { %> margin-top: <%= spacing %>px; <% }
-                else if (position === 'left') { %> margin-right: <%= spacing %>px; <% }
-                else if (position === 'right') { %> margin-left: <%= spacing %>px; <% } %>">
+               else if (position === 'bottom') { %> margin-top: <%= spacing %>px; <% }
+               else if (position === 'left') { %> margin-right: <%= spacing %>px; <% }
+               else if (position === 'right') { %> margin-left: <%= spacing %>px; <% } %>">
     <% if (show) { %>
-        <% if (position === 'top') { %>
-            <!-- Render div 2 first for 'top' -->
-            <div class="colorbar_ticks colorbar_ticks_<%= position %>">
-                <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>;">
-                    <%
-                        var interval = Math.floor((end - start) / (num_ticks - 1));
-                    %>
-                    <!-- First tick (start value) -->
-                    <div class="tick">
-                        <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
-                        <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;"><%= start %></span>
-                    </div>
-
-                    <!-- Intermediate ticks -->
-                    <% for (let i = 1; i < num_ticks - 1; i++) { %>
-                        <div class="tick">
-                            <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
-                            <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;">
-                                <%= Math.abs(start + i * interval) %>
-                            </span>
-                        </div>
-                    <% } %>
-
-                    <!-- Last tick (end value) -->
-                    <div class="tick">
-                        <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
-                        <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;"><%= end %></span>
-                    </div>
-
-                </div>
-            </div>
+        <% if (position !== 'top') { %>
+            <!-- Top is has colorbar rendered after ticks -->
             <div class="lutBg colorbar_bg"
                 style="height: <%= thickness %>px;
-                        background-image: <%= reverseIntensity ?
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + color + ', black)' : 'url(' + lut_url + ')') :
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + color + ', black)' : 'url(' + lut_url + ')') %>;
-                        <%= lutBgPos !== '0px 100px' && reverseIntensity ? 'transform: scaleX(-1);' : '' %>;
-                        <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
+                        background-image: <%= isLUT ? 'linear-gradient(to right, #' + color + ', black)' : 'url(' + lut_url + ')' %>;
+                        <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
+                        <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
             </div>
-        <% } else { %>
-            <!-- Default order for non-'top' positions -->
-            <div class="lutBg colorbar_bg"
-            style="height: <%= thickness %>px;
-                        background-image: <%= reverseIntensity ?
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to right, #' + color + ', black)' : 'url(' + lut_url + ')') :
-                        (lutBgPos === '0px 100px' ? 'linear-gradient(to left, #' + color + ', black)' : 'url(' + lut_url + ')') %>;
-                        <%= lutBgPos !== '0px 100px' && reverseIntensity ? 'transform: scaleX(-1);' : '' %>;
-                        <%= lutBgPos !== '0px 100px' ? 'background-position: ' + lutBgPos : '' %>;">
-       </div>
-            <div class="colorbar_ticks colorbar_ticks_<%= position %>">
-                <div class="ticks ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>;">
-                    <%
-                        var interval = Math.floor((end - start) / (num_ticks - 1));
-                    %>
-                    <!-- First tick (start value) -->
-                    <div class="tick">
-                        <div class="dash dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
-                        <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;"><%= start %></span>
-                    </div>
-
-                    <!-- Intermediate ticks -->
-                    <% for (let i = 1; i < num_ticks - 1; i++) { %>
-                        <div class="tick">
-                            <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
-                            <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;">
-                                <%= Math.abs(start + i * interval) %>
-                            </span>
-                        </div>
-                    <% } %>
+        <% } %>
 
-                    <!-- Last tick (end value) -->
-                    <div class="tick">
-                        <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
-                        <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;"><%= end %></span>
-                    </div>
+        <div class="colorbar_ticks colorbar_ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>;">
+            <% for (let i = 0; i < num_ticks; i++) { %>
+                <div class="tick">
+                    <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
+                    <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;">
+                        <%= Math.round((end - start) * i / (num_ticks-1)) %>
+                    </span>
                 </div>
+            <% } %>
+        </div>
+
+        <% if (position === 'top') { %>
+            <div class="lutBg colorbar_bg"
+                style="height: <%= thickness %>px;
+                        background-image: <%= isLUT ? 'linear-gradient(to right, #' + color + ', black)' : 'url(' + lut_url + ')' %>;
+                        <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
+                        <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
             </div>
         <% } %>
     <% } %>
diff --git a/src/templates/colorbar_form.template.html b/src/templates/colorbar_form.template.html
index b71769065..22e5cc309 100644
--- a/src/templates/colorbar_form.template.html
+++ b/src/templates/colorbar_form.template.html
@@ -25,13 +25,13 @@
                     <i data-position="top" class="bi-box-arrow-up dropdown_icon"></i> Top</a>
                 </li>
                 <li><a class="dropdown-item" href="#">
-                    <i data-position="bottom" class="bi-box-arrow-down dropdown_icon"></i> Bottom</a>
+                    <i data-position="right" class="bi-box-arrow-right dropdown_icon"></i> Right</a>
                 </li>
                 <li><a class="dropdown-item" href="#">
-                    <i data-position="left" class="bi-box-arrow-left dropdown_icon"></i> Left</a>
+                    <i data-position="bottom" class="bi-box-arrow-down dropdown_icon"></i> Bottom</a>
                 </li>
                 <li><a class="dropdown-item" href="#">
-                    <i data-position="right" class="bi-box-arrow-right dropdown_icon"></i> Right</a>
+                    <i data-position="left" class="bi-box-arrow-left dropdown_icon"></i> Left</a>
                 </li>
             </ul>
         </div>

From 8925e53e768b146f85866cf5e104f9f394734fa8 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Fri, 6 Dec 2024 00:11:51 +0100
Subject: [PATCH 25/39] resize and pdf bug fix

---
 omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py | 2 +-
 src/js/views/panel_view.js                                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index 06b0da05a..4d35ae00f 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -1816,7 +1816,7 @@ def draw_colorbar(self, panel, page):
                          is_colorbar=True)
 
         rgb = (0, 0, 0)
-        fontsize = colorbar["font_size"]
+        fontsize = int(colorbar["font_size"])
         tick_width = 1
         tick_len = 3
         contour_width = tick_width
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 8a3b49bc6..ec9ddba5b 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -158,7 +158,7 @@
                 this.$scalebar.css('width', sb_width);
             }
             var cb = this.model.get('colorbar');
-            if (cb && cb.show && (cb.position == "left" || cb.position == "right")) {
+            if (cb && cb.show && (cb.position == "left" || cb.position == "right") && this.$colorbar) {
                 this.$colorbar.css('width', h);
                 this.$colorbar.css('height', h);
             }

From c9e82aab1dc6fa49810e2b40f038fcb9870f0b6c Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Fri, 6 Dec 2024 00:20:27 +0100
Subject: [PATCH 26/39] fixed color gradient

---
 src/templates/colorbar.template.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index 552be3b62..c65549e34 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -8,7 +8,7 @@
             <!-- Top is has colorbar rendered after ticks -->
             <div class="lutBg colorbar_bg"
                 style="height: <%= thickness %>px;
-                        background-image: <%= isLUT ? 'linear-gradient(to right, #' + color + ', black)' : 'url(' + lut_url + ')' %>;
+                        background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
                         <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
                         <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
             </div>
@@ -28,7 +28,7 @@
         <% if (position === 'top') { %>
             <div class="lutBg colorbar_bg"
                 style="height: <%= thickness %>px;
-                        background-image: <%= isLUT ? 'linear-gradient(to right, #' + color + ', black)' : 'url(' + lut_url + ')' %>;
+                        background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
                         <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
                         <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
             </div>

From f04ae8d7dd631f2d46d22675ec426480949dee6e Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Fri, 6 Dec 2024 00:40:07 +0100
Subject: [PATCH 27/39] changed isLUT test

---
 src/js/views/panel_view.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index ec9ddba5b..8c15049b2 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -386,7 +386,7 @@
             }
             var lut_url = await FigureLutPicker.loadLuts(false)  // Ensure lut url and list are loaded
             var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
-            var isLUT = (color.length != 6) && isNaN(parseInt(color, 16))  // check if it's a normal color or a LUT
+            var isLUT = !(/^[0-9a-fA-F]+$/.test(color))  // check if it's a normal color or a LUT
             if (cb && cb.show) {
                 var cb_json = {
                     position: cb.position,

From ced78e2bd325e353c21514c7b94ee08da45d539f Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Fri, 6 Dec 2024 13:54:28 +0100
Subject: [PATCH 28/39] crop page around panel with colorbar

---
 src/js/models/panel_model.js | 71 ++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/src/js/models/panel_model.js b/src/js/models/panel_model.js
index dc8242776..984c28b5d 100644
--- a/src/js/models/panel_model.js
+++ b/src/js/models/panel_model.js
@@ -1098,6 +1098,17 @@
             y = top_labels.reduce(function(prev, l){
                 return prev - (LINE_HEIGHT * l.size);
             }, y);
+
+            var cb = this.get("colorbar");
+            if (cb && cb.show && cb.position == "top") {
+                var shift = (cb.spacing + cb.thickness +
+                    Number(cb.font_size) + cb.tick_len + cb.label_margin);
+                if (shift > 0) {
+                    y = y - shift;
+                }
+            }
+
+
             return y;
         },
 
@@ -1112,6 +1123,24 @@
             x = left_labels.reduce(function(prev, l){
                 return prev - (LINE_HEIGHT * l.size);
             }, x);
+
+            var end = "";
+            for (const chann of this.get('channels')) {
+                if(chann.active) {
+                    end = chann.window?.end;
+                    break;
+                }
+            }
+            var cb = this.get("colorbar");
+            if (cb && cb.show && cb.position == "left") {
+                const textwidth = this.measureTextWidth(end, cb.font_size + "px");
+                var shift = (cb.spacing + cb.thickness +
+                    textwidth + cb.tick_len + cb.label_margin);
+                if (shift > 0) {
+                    x = x - shift;
+                }
+            }
+
             return x;
         },
 
@@ -1127,6 +1156,23 @@
                 return prev + (LINE_HEIGHT * l.size);
             }, x);
 
+            var end = "";
+            for (const chann of this.get('channels')) {
+                if(chann.active) {
+                    end = chann.window?.end;
+                    break;
+                }
+            }
+            var cb = this.get("colorbar");
+            if (cb && cb.show && cb.position == "right") {
+                const textwidth = this.measureTextWidth(end, cb.font_size + "px");
+                var shift = (cb.spacing + cb.thickness +
+                    textwidth + cb.tick_len + cb.label_margin);
+                if (shift > 0) {
+                    x = x + shift;
+                }
+            }
+
             return x;
         },
 
@@ -1140,9 +1186,34 @@
             y = bottom_labels.reduce(function(prev, l){
                 return prev + (LINE_HEIGHT * l.size);
             }, y);
+
+            var cb = this.get("colorbar");
+            if (cb && cb.show && cb.position == "bottom") {
+                var shift = (cb.spacing + cb.thickness +
+                    Number(cb.font_size) + cb.tick_len + cb.label_margin);
+                if (shift > 0) {
+                    y = y + shift;
+                }
+            }
             return y;
         },
 
+        measureTextWidth: function(text, fontSize) {
+            var fontFamily = "bs-font-sans-serif";
+            // Create a canvas element
+            var canvas = document.createElement('canvas');
+            var context = canvas.getContext('2d');
+
+            // Set the font properties
+            context.font = `${fontSize} ${fontFamily}`;
+            var metrics = context.measureText(text);
+
+            context = null;
+            canvas = null;
+
+            return metrics.width;
+        },
+
         // True if coords (x,y,width, height) overlap with panel
         regionOverlaps: function(coords) {
 

From 906adb6c71917d10318e2b05f0fa6063b2543db8 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Sat, 7 Dec 2024 17:43:36 +0100
Subject: [PATCH 29/39] vertical label layout

---
 src/css/figure.css                   | 31 ++++++-----------------
 src/templates/colorbar.template.html | 38 +++++++++++++++++-----------
 2 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 69bbcd397..5d255a170 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1415,6 +1415,7 @@
         margin-right: 0px;
         margin-left: 0px;
         display: flex;
+        position: relative;
     }
 
     .colorbar_ticks {
@@ -1424,42 +1425,26 @@
         width: 100%;
         margin: 0;
         align-items: center;
-        position: relative;
+        position: absolute;
     }
 
     .colorbar_ticks .label{
         width: 0px;
-    }
-
-    .colorbar_ticks_top {
-        -webkit-transform: scaleX(-1) rotate(180deg);
-        transform: scaleX(-1) rotate(180deg);
-    }
-
-    .colorbar_ticks_top .label{
-        transform: scaleX(-1) rotate(180deg);
-        text-align: center;
-        display: flex;
-        justify-content: center;
-    }
-
-    .colorbar_ticks_bottom .label{
-        text-align: center;
+        position: absolute;
         display: flex;
         justify-content: center;
+        line-height: 1;
     }
 
     .colorbar_ticks_left .label{
         display: flex;
         flex-direction: row-reverse;
-        -webkit-transform: scaleX(-1) rotate(-90deg);
-        transform: scaleX(-1) rotate(-90deg);
+        -webkit-transform: scaleX(-1) rotate(180deg);
+        transform: scaleX(-1) rotate(180deg);
     }
 
-    .colorbar_ticks_right .label{
-        -webkit-transform: rotate(90deg);
-        transform: rotate(90deg);
-        text-align: right;
+    .colorbar_ticks_top .tick .dash{
+        position: relative;
     }
 
     .tick {
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index c65549e34..59b876fb8 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -4,33 +4,41 @@
                else if (position === 'left') { %> margin-right: <%= spacing %>px; <% }
                else if (position === 'right') { %> margin-left: <%= spacing %>px; <% } %>">
     <% if (show) { %>
-        <% if (position !== 'top') { %>
-            <!-- Top is has colorbar rendered after ticks -->
+        <% if (position != "top") { %>
             <div class="lutBg colorbar_bg"
                 style="height: <%= thickness %>px;
                         background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
                         <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
                         <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
-            </div>
-        <% } %>
 
-        <div class="colorbar_ticks colorbar_ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>;">
-            <% for (let i = 0; i < num_ticks; i++) { %>
-                <div class="tick">
-                    <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px; margin-bottom:<%= label_margin %>px"></div>
-                    <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px;">
-                        <%= Math.round((end - start) * i / (num_ticks-1)) %>
-                    </span>
+                <div class="colorbar_ticks colorbar_ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>; top: <%= thickness %>px; ">
+                    <% for (let i = 0; i < num_ticks; i++) { %>
+                        <div class="tick">
+                            <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px;"></div>
+                            <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px; top: <%= tick_len + label_margin %>px;">
+                                <%= Math.round((end - start) * i / (num_ticks-1)) %>
+                            </span>
+                        </div>
+                    <% } %>
                 </div>
-            <% } %>
-        </div>
-
-        <% if (position === 'top') { %>
+            </div>
+        <% } else { %>
             <div class="lutBg colorbar_bg"
                 style="height: <%= thickness %>px;
                         background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
                         <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
                         <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
+
+                <div class="colorbar_ticks colorbar_ticks_<%= position %>" style="border-bottom: 2px solid #<%= axis_color %>; bottom: <%= thickness %>px; ">
+                    <% for (let i = 0; i < num_ticks; i++) { %>
+                        <div class="tick">
+                            <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px;"></div>
+                            <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px; bottom: <%= tick_len + label_margin %>px;">
+                                <%= Math.round((end - start) * i / (num_ticks-1)) %>
+                            </span>
+                        </div>
+                    <% } %>
+                </div>
             </div>
         <% } %>
     <% } %>

From 4ec7fcd29839e252024b4946cb46167cc70d0234 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Sun, 8 Dec 2024 20:56:01 +0100
Subject: [PATCH 30/39] colorbar horizontal labels

---
 src/css/figure.css | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 5d255a170..73845a048 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1439,8 +1439,15 @@
     .colorbar_ticks_left .label{
         display: flex;
         flex-direction: row-reverse;
-        -webkit-transform: scaleX(-1) rotate(180deg);
-        transform: scaleX(-1) rotate(180deg);
+        -webkit-transform: scaleX(-1) rotate(-90deg);
+        transform: scaleX(-1) rotate(-90deg);
+    }
+
+    .colorbar_ticks_right .label{
+        display: flex;
+        flex-direction: row-reverse;
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
     }
 
     .colorbar_ticks_top .tick .dash{

From 33c4dd0ea1c8b9919b31fd983f0edda87e057402 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Mon, 9 Dec 2024 09:19:41 +0100
Subject: [PATCH 31/39] inverted label fix

---
 src/js/models/panel_model.js         | 12 ++++++------
 src/templates/colorbar.template.html |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/js/models/panel_model.js b/src/js/models/panel_model.js
index 984c28b5d..f1b0903ec 100644
--- a/src/js/models/panel_model.js
+++ b/src/js/models/panel_model.js
@@ -1133,9 +1133,9 @@
             }
             var cb = this.get("colorbar");
             if (cb && cb.show && cb.position == "left") {
-                const textwidth = this.measureTextWidth(end, cb.font_size + "px");
+                const metrics = this.measureTextSize(end, cb.font_size + "px");
                 var shift = (cb.spacing + cb.thickness +
-                    textwidth + cb.tick_len + cb.label_margin);
+                    metrics.width + cb.tick_len + cb.label_margin);
                 if (shift > 0) {
                     x = x - shift;
                 }
@@ -1165,9 +1165,9 @@
             }
             var cb = this.get("colorbar");
             if (cb && cb.show && cb.position == "right") {
-                const textwidth = this.measureTextWidth(end, cb.font_size + "px");
+                const metrics = this.measureTextSize(end, cb.font_size + "px");
                 var shift = (cb.spacing + cb.thickness +
-                    textwidth + cb.tick_len + cb.label_margin);
+                    metrics.width + cb.tick_len + cb.label_margin);
                 if (shift > 0) {
                     x = x + shift;
                 }
@@ -1198,7 +1198,7 @@
             return y;
         },
 
-        measureTextWidth: function(text, fontSize) {
+        measureTextSize: function(text, fontSize) {
             var fontFamily = "bs-font-sans-serif";
             // Create a canvas element
             var canvas = document.createElement('canvas');
@@ -1211,7 +1211,7 @@
             context = null;
             canvas = null;
 
-            return metrics.width;
+            return metrics;
         },
 
         // True if coords (x,y,width, height) overlap with panel
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index 59b876fb8..206da9586 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -10,7 +10,7 @@
                         background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
                         <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
                         <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
-
+            </div>
                 <div class="colorbar_ticks colorbar_ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>; top: <%= thickness %>px; ">
                     <% for (let i = 0; i < num_ticks; i++) { %>
                         <div class="tick">
@@ -21,14 +21,14 @@
                         </div>
                     <% } %>
                 </div>
-            </div>
+
         <% } else { %>
             <div class="lutBg colorbar_bg"
                 style="height: <%= thickness %>px;
                         background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
                         <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
                         <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
-
+            </div>
                 <div class="colorbar_ticks colorbar_ticks_<%= position %>" style="border-bottom: 2px solid #<%= axis_color %>; bottom: <%= thickness %>px; ">
                     <% for (let i = 0; i < num_ticks; i++) { %>
                         <div class="tick">
@@ -39,7 +39,7 @@
                         </div>
                     <% } %>
                 </div>
-            </div>
+
         <% } %>
     <% } %>
 </div>

From ab42e7826d061d50d89119d621f74640cea66c4a Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Mon, 9 Dec 2024 09:30:17 +0100
Subject: [PATCH 32/39] fix colorbar label when start color != 0

---
 src/templates/colorbar.template.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index 206da9586..fdc8a7f20 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -16,7 +16,7 @@
                         <div class="tick">
                             <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px;"></div>
                             <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px; top: <%= tick_len + label_margin %>px;">
-                                <%= Math.round((end - start) * i / (num_ticks-1)) %>
+                                <%= Math.round((end - start) * i / (num_ticks-1)) + start %>
                             </span>
                         </div>
                     <% } %>
@@ -34,7 +34,7 @@
                         <div class="tick">
                             <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px;"></div>
                             <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px; bottom: <%= tick_len + label_margin %>px;">
-                                <%= Math.round((end - start) * i / (num_ticks-1)) %>
+                                <%= Math.round((end - start) * i / (num_ticks-1)) + start %>
                             </span>
                         </div>
                     <% } %>

From c50959dfd0608f7094a41879ce061f14c642f73b Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Mon, 9 Dec 2024 10:37:49 +0100
Subject: [PATCH 33/39] lowercase script_service var name

---
 omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index 4d35ae00f..3a3a76b8d 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -1701,8 +1701,8 @@ def get_color_ramp(self, channel):
                 pass
 
         else:
-            scriptService = self.conn.getScriptService()
-            luts = scriptService.getScriptsByMimetype("text/x-lut")
+            script_service = self.conn.getScriptService()
+            luts = script_service.getScriptsByMimetype("text/x-lut")
             for lut in luts:
                 if lut.name.val != color:
                     continue

From 04f9f0bb933255edf686b200f0736696523daa0a Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Wed, 11 Dec 2024 21:41:05 +0100
Subject: [PATCH 34/39] refactored colorbar template and css

---
 src/css/figure.css                   | 100 ++++++++++++++++-----------
 src/js/views/panel_view.js           |  14 ++++
 src/templates/colorbar.template.html |  58 +++++++---------
 3 files changed, 101 insertions(+), 71 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 73845a048..192f8500e 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1375,89 +1375,111 @@
 
     .colorbar {
         position: absolute;
+        width: 100%;
+        height: 100%;
     }
 
-    .colorbar_middle td {
-        vertical-align: middle;
+    .colorbar_left, .colorbar_right{
+        position: absolute;
+        top: 0%;
+        width: 100%;
+        height: 100%;
     }
 
     .colorbar_left{
-        position: absolute;
-        top: 0%;
-        right:100%;
+        right: 0%;
         -webkit-transform: scaleX(-1) rotate(-90deg);
         transform: scaleX(-1) rotate(-90deg);
     }
 
     .colorbar_right{
-        position: absolute;
-        top: 0%;
-        left: 100%;
         -webkit-transform: rotate(-90deg);
         transform: rotate(-90deg);
     }
 
-    .colorbar_top {
-        bottom: 100%;
+    .colorbar_top, .colorbar_bottom {
+        position: absolute;
         width: 100%;
         left: 0%;
-        margin-bottom: 10px;
+    }
+
+    .colorbar_top {
+        bottom: 0%;
     }
 
     .colorbar_bottom {
-        top: 100%;
-        width: 100%;
-        left: 0%;
-        margin-top: 10px;
+        top: 0%;
     }
 
     .colorbar_bg {
+        background-size: 100% var(--pngHeight);
+        background-repeat: no-repeat;
         margin-right: 0px;
         margin-left: 0px;
         display: flex;
         position: relative;
     }
 
-    .colorbar_ticks {
+    .colorbar_ticks_right, .colorbar_ticks_left {
+        height: 100%;
         display: flex;
-        flex-direction: row;
+        flex-direction: column-reverse;
         justify-content: space-between;
-        width: 100%;
-        margin: 0;
-        align-items: center;
         position: absolute;
     }
 
-    .colorbar_ticks .label{
-        width: 0px;
-        position: absolute;
-        display: flex;
-        justify-content: center;
-        line-height: 1;
+    .colorbar_ticks_right {
+        align-items: left;
     }
 
-    .colorbar_ticks_left .label{
-        display: flex;
-        flex-direction: row-reverse;
-        -webkit-transform: scaleX(-1) rotate(-90deg);
-        transform: scaleX(-1) rotate(-90deg);
+    .colorbar_ticks_left {
+        right: 0%;
+        align-items: flex-end;
     }
 
-    .colorbar_ticks_right .label{
+    .colorbar_ticks_top, .colorbar_ticks_bottom {
+        width: 100%;
         display: flex;
-        flex-direction: row-reverse;
-        -webkit-transform: rotate(90deg);
-        transform: rotate(90deg);
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-end;
+        position: absolute;
+    }
+
+    .colorbar_ticks_top {
+        bottom: 0%;
+    }
+
+    .colorbar_ticks_bottom {
+        top: 0%;
+    }
+
+    .colorbar_label_horizontal {
+        line-height: 1;
     }
 
-    .colorbar_ticks_top .tick .dash{
+    .colorbar_label_vertical {
+        height: 0px;
+        line-height: 1px;
+    }
+
+    .colorbar_dash_horizontal {
+        width: 2px;
         position: relative;
     }
 
-    .tick {
-        display: flex;
+    .colorbar_dash_vertical {
+        height: 2px;
     }
 
-    .dash {
+    .colorbar_tick_horizontal {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         width: 2px;
+        position: relative;
+    }
+
+    .colorbar_tick_vertical {
+        display: flex;
     }
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 8c15049b2..e5da6aa6d 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -387,9 +387,23 @@
             var lut_url = await FigureLutPicker.loadLuts(false)  // Ensure lut url and list are loaded
             var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
             var isLUT = !(/^[0-9a-fA-F]+$/.test(color))  // check if it's a normal color or a LUT
+            var inverted_pos = {  // convenience variable for the colorbar template.
+                "left": "right",
+                "right": "left",
+                "top": "bottom",
+                "bottom": "top",
+            };
+            var orientation = {  // convenience variable for the colorbar template.
+                "left": "vertical",
+                "right": "vertical",
+                "top": "horizontal",
+                "bottom": "horizontal",
+            }
             if (cb && cb.show) {
                 var cb_json = {
                     position: cb.position,
+                    inv_position: inverted_pos[cb.position],
+                    orientation: orientation[cb.position],
                     show: cb.show,
                     thickness: cb.thickness,
                     font_size: cb.font_size,
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index fdc8a7f20..333f2fea4 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -1,45 +1,39 @@
-<div class="colorbar colorbar_<%= position %>"
-     style="<% if (position === 'top') { %> margin-bottom: <%= spacing %>px; <% }
-               else if (position === 'bottom') { %> margin-top: <%= spacing %>px; <% }
-               else if (position === 'left') { %> margin-right: <%= spacing %>px; <% }
-               else if (position === 'right') { %> margin-left: <%= spacing %>px; <% } %>">
+<div class="colorbar" style="<%= inv_position %>: 100%;">
     <% if (show) { %>
-        <% if (position != "top") { %>
-            <div class="lutBg colorbar_bg"
+        <div class="colorbar_<%= position %>"
+             style="margin-<%= inv_position %>: <%= spacing %>px;">
+
+            <div class="colorbar_bg "
                 style="height: <%= thickness %>px;
                         background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
                         <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
                         <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
             </div>
-                <div class="colorbar_ticks colorbar_ticks_<%= position %>" style="border-top: 2px solid #<%= axis_color %>; top: <%= thickness %>px; ">
-                    <% for (let i = 0; i < num_ticks; i++) { %>
-                        <div class="tick">
-                            <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px;"></div>
-                            <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px; top: <%= tick_len + label_margin %>px;">
-                                <%= Math.round((end - start) * i / (num_ticks-1)) + start %>
-                            </span>
+        </div>
+
+        <div class="colorbar_ticks_<%= position %>" style="border-<%= inv_position %>: 2px solid #<%= axis_color %>; margin-<%= inv_position %>: <%= thickness + spacing%>px; ">
+            <% for (let i = 0; i < num_ticks; i++) { %>
+                <div class="colorbar_tick_<%= orientation %>">
+                    <% if (position == "right" || position == "bottom") { %>
+                        <div class="colorbar_dash_<%= orientation %>"
+                            style="background-color: #<%= axis_color %>;
+                                   <%= position == 'right' ? 'width' : 'height' %>: <%= tick_len %>px;">
                         </div>
                     <% } %>
-                </div>
-
-        <% } else { %>
-            <div class="lutBg colorbar_bg"
-                style="height: <%= thickness %>px;
-                        background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
-                        <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
-                        <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
-            </div>
-                <div class="colorbar_ticks colorbar_ticks_<%= position %>" style="border-bottom: 2px solid #<%= axis_color %>; bottom: <%= thickness %>px; ">
-                    <% for (let i = 0; i < num_ticks; i++) { %>
-                        <div class="tick">
-                            <div class="dash" style="background-color: #<%= axis_color %>; height: <%= tick_len %>px;"></div>
-                            <span class="label" style="color: #<%= axis_color %>; font-size: <%= font_size %>px; bottom: <%= tick_len + label_margin %>px;">
-                                <%= Math.round((end - start) * i / (num_ticks-1)) + start %>
-                            </span>
+                        <span class="label colorbar_label_<%= orientation %>"
+                              style="color: #<%= axis_color %>;
+                                     font-size: <%= font_size %>px;
+                                     margin-<%= inv_position %>: <%= label_margin %>px;">
+                            <%= Math.round((end - start) * i / (num_ticks-1)) + start %>
+                        </span>
+                    <% if (position == "left" || position == "top") { %>
+                        <div class="colorbar_dash_<%= orientation %>"
+                             style="background-color: #<%= axis_color %>;
+                                    <%= position == 'left' ? 'width' : 'height' %>: <%= tick_len %>px;">
                         </div>
                     <% } %>
                 </div>
-
-        <% } %>
+            <% } %>
+        </div>
     <% } %>
 </div>

From a67be63ab0e46bbe42b100bd2f4c46d0b70e9762 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Wed, 11 Dec 2024 21:58:52 +0100
Subject: [PATCH 35/39] added overlap between elements

---
 src/css/figure.css                   |  1 +
 src/templates/colorbar.template.html | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/css/figure.css b/src/css/figure.css
index 192f8500e..adcee0d54 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1470,6 +1470,7 @@
 
     .colorbar_dash_vertical {
         height: 2px;
+        position: relative;
     }
 
     .colorbar_tick_horizontal {
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index 333f2fea4..e03c11749 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -4,20 +4,21 @@
              style="margin-<%= inv_position %>: <%= spacing %>px;">
 
             <div class="colorbar_bg "
-                style="height: <%= thickness %>px;
+                style="height: <%= thickness + 1 %>px;
                         background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
                         <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
                         <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
             </div>
         </div>
 
-        <div class="colorbar_ticks_<%= position %>" style="border-<%= inv_position %>: 2px solid #<%= axis_color %>; margin-<%= inv_position %>: <%= thickness + spacing%>px; ">
+        <div class="colorbar_ticks_<%= position %>" style="border-<%= inv_position %>: 2px solid #<%= axis_color %>; margin-<%= inv_position %>: <%= thickness + spacing %>px; ">
             <% for (let i = 0; i < num_ticks; i++) { %>
                 <div class="colorbar_tick_<%= orientation %>">
                     <% if (position == "right" || position == "bottom") { %>
                         <div class="colorbar_dash_<%= orientation %>"
                             style="background-color: #<%= axis_color %>;
-                                   <%= position == 'right' ? 'width' : 'height' %>: <%= tick_len %>px;">
+                                   <%= position == 'right' ? 'width' : 'height' %>: <%= tick_len + 1 %>px;
+                                   <%= position %>: 1px">
                         </div>
                     <% } %>
                         <span class="label colorbar_label_<%= orientation %>"
@@ -29,7 +30,8 @@
                     <% if (position == "left" || position == "top") { %>
                         <div class="colorbar_dash_<%= orientation %>"
                              style="background-color: #<%= axis_color %>;
-                                    <%= position == 'left' ? 'width' : 'height' %>: <%= tick_len %>px;">
+                                    <%= position == 'left' ? 'width' : 'height' %>: <%= tick_len + 1 %>px;
+                                    <%= position %>: 1px">
                         </div>
                     <% } %>
                 </div>

From bafb394335bbb4793820a2f3b09b02f5ccfd33ea Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Wed, 11 Dec 2024 22:20:27 +0100
Subject: [PATCH 36/39] removed default param to loadLuts()

---
 src/js/views/lutpicker.js  | 2 +-
 src/js/views/panel_view.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/views/lutpicker.js b/src/js/views/lutpicker.js
index aaaa35efc..8ce6028d0 100644
--- a/src/js/views/lutpicker.js
+++ b/src/js/views/lutpicker.js
@@ -125,7 +125,7 @@ var LutPickerView = Backbone.View.extend({
             this.success = options.success;
         }
 
-        this.loadLuts(false);
+        this.loadLuts();
         this.render();
     },
 
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index e5da6aa6d..828d6d4b6 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -384,7 +384,7 @@
                     break;
                 }
             }
-            var lut_url = await FigureLutPicker.loadLuts(false)  // Ensure lut url and list are loaded
+            var lut_url = await FigureLutPicker.loadLuts()  // Ensure lut url and list are loaded
             var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
             var isLUT = !(/^[0-9a-fA-F]+$/.test(color))  // check if it's a normal color or a LUT
             var inverted_pos = {  // convenience variable for the colorbar template.

From ed6d64de66b70f85c28b460830d3ddb36e410a8c Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Fri, 13 Dec 2024 19:06:27 +0100
Subject: [PATCH 37/39] crop page to suit all label orientation and colorbar
 labels

---
 src/js/models/panel_model.js | 125 ++++++++++++++++++++++-------------
 1 file changed, 78 insertions(+), 47 deletions(-)

diff --git a/src/js/models/panel_model.js b/src/js/models/panel_model.js
index f1b0903ec..cd7d26562 100644
--- a/src/js/models/panel_model.js
+++ b/src/js/models/panel_model.js
@@ -1094,67 +1094,88 @@
             var y = this.get('y');
             // get labels by position
             var top_labels = labels.filter(function(l) {return l.position === 'top'});
-            // offset by font-size of each
-            y = top_labels.reduce(function(prev, l){
-                return prev - (LINE_HEIGHT * l.size);
-            }, y);
+            // calculate offset by font-size of each
+            var shift = 0;
+            shift = top_labels.reduce(function(prev, l){
+                return prev + (LINE_HEIGHT * l.size);
+            }, shift);
 
+            var shift_cbar = 0;
             var cb = this.get("colorbar");
-            if (cb && cb.show && cb.position == "top") {
-                var shift = (cb.spacing + cb.thickness +
-                    Number(cb.font_size) + cb.tick_len + cb.label_margin);
-                if (shift > 0) {
-                    y = y - shift;
+            if (cb && cb.show) {
+                var size = Number(cb.font_size);
+                if (cb.position == "top") {
+                    shift_cbar = (cb.spacing + cb.thickness +
+                        size + cb.tick_len + cb.label_margin);
+                    shift_cbar = Math.max(0, shift_cbar);
+                } else if (cb.position == "left" || cb.position == "right") {
+                    // get height of topmost tick label and take half of it
+                    shift_cbar = size / 2;
                 }
             }
-
-
-            return y;
+            return y - Math.max(shift, shift_cbar);
         },
 
         getBoundingBoxLeft: function() {
-            // get left of panel including 'leftvert' labels (ignore
-            // left horizontal labels - hard to calculate width)
             var labels = this.get("labels");
             var x = this.get('x');
             // get labels by position
             var left_labels = labels.filter(function(l) {return l.position === 'leftvert'});
-            // offset by font-size of each
-            x = left_labels.reduce(function(prev, l){
-                return prev - (LINE_HEIGHT * l.size);
-            }, x);
+            // calculate offset by font-size of each vertical label
+            var shift = 0;
+            shift = left_labels.reduce(function(prev, l){
+                return prev + (LINE_HEIGHT * l.size);
+            }, shift);
 
+            left_labels = labels.filter(function(l) {return l.position === 'left'});
+            // compare offset of each horizontal label
+            for (const l of left_labels) {
+                const width = this.measureTextSize(l.text, l.size + "px");
+                shift = Math.max(shift, width);
+            }
+            var start = "";
             var end = "";
             for (const chann of this.get('channels')) {
                 if(chann.active) {
+                    start = chann.window?.start;
                     end = chann.window?.end;
                     break;
                 }
             }
+            var shift_cbar = 0;
             var cb = this.get("colorbar");
-            if (cb && cb.show && cb.position == "left") {
-                const metrics = this.measureTextSize(end, cb.font_size + "px");
-                var shift = (cb.spacing + cb.thickness +
-                    metrics.width + cb.tick_len + cb.label_margin);
-                if (shift > 0) {
-                    x = x - shift;
+            if (cb && cb.show) {
+                if (cb.position == "left") {
+                    const width = this.measureTextSize(end, cb.font_size + "px");
+                    shift_cbar = (cb.spacing + cb.thickness +
+                        width + cb.tick_len + cb.label_margin);
+                    shift_cbar = Math.max(0, shift_cbar);
+                } else if (cb.position == "top" || cb.position == "bottom"){
+                    shift_cbar = this.measureTextSize(start, cb.font_size + "px");
+                    shift_cbar = shift_cbar / 2;
                 }
             }
 
-            return x;
+            return x - Math.max(shift, shift_cbar);
         },
 
         getBoundingBoxRight: function() {
-            // Ignore right (horizontal) labels since we don't know how long they are
-            // but include right vertical labels
             var labels = this.get("labels");
             var x = this.get('x') + this.get('width');
             // get labels by position
             var right_labels = labels.filter(function(l) {return l.position === 'rightvert'});
-            // offset by font-size of each
-            x = right_labels.reduce(function(prev, l){
+            // calculate offset by font-size of each vertical label
+            var shift = 0;
+            shift = right_labels.reduce(function(prev, l){
                 return prev + (LINE_HEIGHT * l.size);
-            }, x);
+            }, shift);
+
+            right_labels = labels.filter(function(l) {return l.position === 'right'});
+            // compare offset of each horizontal label
+            for (const l of right_labels) {
+                const width = this.measureTextSize(l.text, l.size + "px");
+                shift = Math.max(shift, width);
+            }
 
             var end = "";
             for (const chann of this.get('channels')) {
@@ -1163,17 +1184,21 @@
                     break;
                 }
             }
+            var shift_cbar = 0;
             var cb = this.get("colorbar");
-            if (cb && cb.show && cb.position == "right") {
-                const metrics = this.measureTextSize(end, cb.font_size + "px");
-                var shift = (cb.spacing + cb.thickness +
-                    metrics.width + cb.tick_len + cb.label_margin);
-                if (shift > 0) {
-                    x = x + shift;
+            if (cb && cb.show) {
+                if (cb.position == "right") {
+                    const width = this.measureTextSize(end, cb.font_size + "px");
+                    shift_cbar = (cb.spacing + cb.thickness +
+                        width + cb.tick_len + cb.label_margin);
+                    shift_cbar = Math.max(0, shift_cbar);
+                } else if (cb.position == "top" || cb.position == "bottom"){
+                    shift_cbar = this.measureTextSize(end, cb.font_size + "px");
+                    shift_cbar = shift_cbar / 2;
                 }
             }
 
-            return x;
+            return x + Math.max(shift, shift_cbar);
         },
 
         getBoundingBoxBottom: function() {
@@ -1182,20 +1207,26 @@
             var y = this.get('y') + this.get('height');
             // get labels by position
             var bottom_labels = labels.filter(function(l) {return l.position === 'bottom'});
-            // offset by font-size of each
-            y = bottom_labels.reduce(function(prev, l){
+            // calculate offset by font-size of each
+            var shift = 0;
+            shift = bottom_labels.reduce(function(prev, l){
                 return prev + (LINE_HEIGHT * l.size);
-            }, y);
+            }, shift);
 
+            var shift_cbar = 0;
             var cb = this.get("colorbar");
-            if (cb && cb.show && cb.position == "bottom") {
-                var shift = (cb.spacing + cb.thickness +
-                    Number(cb.font_size) + cb.tick_len + cb.label_margin);
-                if (shift > 0) {
-                    y = y + shift;
+            if (cb && cb.show) {
+                var size = Number(cb.font_size);
+                if (cb.position == "bottom") {
+                    shift_cbar = (cb.spacing + cb.thickness +
+                        size + cb.tick_len + cb.label_margin);
+                    shift_cbar = Math.max(0, shift_cbar);
+                } else if (cb.position == "left" || cb.position == "right") {
+                    // get height of topmost tick label and take half of it
+                    shift_cbar = size / 2;
                 }
             }
-            return y;
+            return y + Math.max(shift, shift_cbar);
         },
 
         measureTextSize: function(text, fontSize) {
@@ -1211,7 +1242,7 @@
             context = null;
             canvas = null;
 
-            return metrics;
+            return metrics.width;
         },
 
         // True if coords (x,y,width, height) overlap with panel

From 68aa191ce4e687c200791aa1ad941510f796dd1f Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Sat, 14 Dec 2024 01:25:42 +0100
Subject: [PATCH 38/39] colorbar label dynamic decimal rounding

---
 src/js/models/panel_model.js         | 9 +++++++++
 src/templates/colorbar.template.html | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/js/models/panel_model.js b/src/js/models/panel_model.js
index cd7d26562..a231d50b5 100644
--- a/src/js/models/panel_model.js
+++ b/src/js/models/panel_model.js
@@ -1133,6 +1133,7 @@
                 const width = this.measureTextSize(l.text, l.size + "px");
                 shift = Math.max(shift, width);
             }
+
             var start = "";
             var end = "";
             for (const chann of this.get('channels')) {
@@ -1145,6 +1146,9 @@
             var shift_cbar = 0;
             var cb = this.get("colorbar");
             if (cb && cb.show) {
+                let rounding = Math.max(0, Math.ceil(-Math.log10((end - start) / cb.num_ticks)));
+                start = start.toFixed(rounding);
+                end = end.toFixed(rounding);
                 if (cb.position == "left") {
                     const width = this.measureTextSize(end, cb.font_size + "px");
                     shift_cbar = (cb.spacing + cb.thickness +
@@ -1177,9 +1181,11 @@
                 shift = Math.max(shift, width);
             }
 
+            var start = "";
             var end = "";
             for (const chann of this.get('channels')) {
                 if(chann.active) {
+                    start = chann.window?.start;
                     end = chann.window?.end;
                     break;
                 }
@@ -1187,6 +1193,9 @@
             var shift_cbar = 0;
             var cb = this.get("colorbar");
             if (cb && cb.show) {
+                let rounding = Math.max(0, Math.ceil(-Math.log10((end - start) / cb.num_ticks)));
+                start = start.toFixed(rounding);
+                end = end.toFixed(rounding);
                 if (cb.position == "right") {
                     const width = this.measureTextSize(end, cb.font_size + "px");
                     shift_cbar = (cb.spacing + cb.thickness +
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
index e03c11749..870478887 100644
--- a/src/templates/colorbar.template.html
+++ b/src/templates/colorbar.template.html
@@ -25,7 +25,8 @@
                               style="color: #<%= axis_color %>;
                                      font-size: <%= font_size %>px;
                                      margin-<%= inv_position %>: <%= label_margin %>px;">
-                            <%= Math.round((end - start) * i / (num_ticks-1)) + start %>
+                            <!-- Label is rounded to decimal proportionally to the spacing between each tick.  -->
+                            <%= ((end - start) * i / (num_ticks-1) + start).toFixed(Math.max(0, Math.ceil(-Math.log10((end - start) / num_ticks)))) %>
                         </span>
                     <% if (position == "left" || position == "top") { %>
                         <div class="colorbar_dash_<%= orientation %>"

From bef7126e9785ee5452cb5ecd2832b5ce62999c40 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Sat, 14 Dec 2024 02:18:18 +0100
Subject: [PATCH 39/39] parametrized output in python

---
 .../omero/figure_scripts/Figure_To_Pdf.py     | 29 ++++++++++++-------
 src/css/figure.css                            |  6 ++--
 src/js/views/colorbar_form_view.js            |  2 +-
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index 3a3a76b8d..207b41b2d 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -1775,9 +1775,11 @@ def draw_colorbar(self, panel, page):
             'orig_width': panel['orig_width'],
         }
         start, end = channel["window"]["start"], channel["window"]["end"]
-        labels = numpy.unique(numpy.linspace(start, end,
-                                             num=colorbar["num_ticks"],
-                                             dtype=int))
+
+        decimals = max(0, int(numpy.ceil(
+            -numpy.log10((end - start) / colorbar["num_ticks"]))))
+        labels = numpy.linspace(start, end, num=colorbar["num_ticks"])
+        pos_ratio = numpy.linspace(0, 1, colorbar["num_ticks"])
         if colorbar["position"] in ["left", "right"]:
             color_ramp = color_ramp.transpose((1, 0, 2))[::-1]
             cbar['width'] = thickness
@@ -1785,7 +1787,7 @@ def draw_colorbar(self, panel, page):
             cbar['y'] = panel['y']
             cbar['x'] = panel['x'] - (spacing + thickness)
             labels_x = [cbar['x']]
-            labels_y = cbar['y'] + panel['height'] * (1 - labels / end)
+            labels_y = cbar['y'] + panel['height'] * pos_ratio[::-1]
             align = "right"
             if colorbar["position"] == "right":
                 cbar['x'] = panel['x'] + panel['width'] + spacing
@@ -1797,7 +1799,7 @@ def draw_colorbar(self, panel, page):
             cbar['height'] = thickness
             cbar['x'] = panel['x']
             cbar['y'] = panel['y'] - (spacing + thickness)
-            labels_x = cbar['x'] + panel['width'] * labels / end
+            labels_x = cbar['x'] + panel['width'] * pos_ratio
             labels_y = [cbar['y']]
             align = "center"
             if colorbar["position"] == "bottom":
@@ -1815,10 +1817,11 @@ def draw_colorbar(self, panel, page):
         self.paste_image(pil_img, img_name, cbar, page, dpi,
                          is_colorbar=True)
 
-        rgb = (0, 0, 0)
+        rgb = tuple(int(colorbar["axis_color"][i:i+2], 16) for i in (0, 2, 4))
         fontsize = int(colorbar["font_size"])
         tick_width = 1
-        tick_len = 3
+        tick_len = colorbar["tick_len"]
+        label_margin = colorbar["label_margin"]
         contour_width = tick_width
         for label, pos_x, pos_y in zip(labels, labels_x, labels_y):
 
@@ -1830,12 +1833,15 @@ def draw_colorbar(self, panel, page):
             elif label == labels[-1]:
                 shift = tick_width / 2
 
+            # Round the label str to the appropriate decimal
+            label = f"{label:.{decimals}f}"
+
             if colorbar["position"] == "left":
                 x2 = pos_x - tick_len
                 pos_y += shift
                 self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
                                         tick_width, rgb)
-                self.draw_text(str(label), pos_x - 4,
+                self.draw_text(label, pos_x - 4 - label_margin,
                                pos_y - fontsize / 2 + 1,
                                fontsize, rgb, align=align)
             elif colorbar["position"] == "right":
@@ -1843,7 +1849,7 @@ def draw_colorbar(self, panel, page):
                 pos_y += shift
                 self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
                                         tick_width, rgb)
-                self.draw_text(str(label), pos_x + 4,
+                self.draw_text(label, pos_x + 4 + label_margin,
                                pos_y - fontsize / 2 + 1,
                                fontsize, rgb, align=align)
             elif colorbar["position"] == "top":
@@ -1851,14 +1857,15 @@ def draw_colorbar(self, panel, page):
                 pos_x -= shift  # Order of the label is reversed
                 self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
                                         tick_width, rgb)
-                self.draw_text(str(label), pos_x, pos_y - fontsize - 2,
+                self.draw_text(label, pos_x,
+                               pos_y - fontsize - 2 - label_margin,
                                fontsize, rgb, align=align)
             elif colorbar["position"] == "bottom":
                 y2 = pos_y + tick_len
                 pos_x -= shift  # Order of the label is reversed
                 self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
                                         tick_width, rgb)
-                self.draw_text(str(label), pos_x, pos_y + 4,
+                self.draw_text(label, pos_x, pos_y + 4 + label_margin,
                                fontsize, rgb, align=align)
 
         if colorbar["position"] == "top":
diff --git a/src/css/figure.css b/src/css/figure.css
index adcee0d54..83d27d88a 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1464,12 +1464,12 @@
     }
 
     .colorbar_dash_horizontal {
-        width: 2px;
+        width: 1px;
         position: relative;
     }
 
     .colorbar_dash_vertical {
-        height: 2px;
+        height: 1px;
         position: relative;
     }
 
@@ -1477,7 +1477,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        width: 2px;
+        width: 1px;
         position: relative;
     }
 
diff --git a/src/js/views/colorbar_form_view.js b/src/js/views/colorbar_form_view.js
index b775b56d2..655e7a157 100644
--- a/src/js/views/colorbar_form_view.js
+++ b/src/js/views/colorbar_form_view.js
@@ -110,7 +110,7 @@ var ColorbarFormView = Backbone.View.extend({
         cb_json.position = cb_json.position ?? 'right';
         cb_json.thickness = cb_json.thickness ?? 15;
         cb_json.font_size = cb_json.font_size ?? 10;
-        cb_json.axis_color = cb_json.axis_color ?? '000';
+        cb_json.axis_color = cb_json.axis_color ?? '000000';
         cb_json.num_ticks = cb_json.num_ticks ?? 7;
         cb_json.tick_len = cb_json.tick_len ?? 3;
         cb_json.spacing = cb_json.spacing ?? 5;