From 758c86f94a2e24314e8bea611fd8fc3d7375e496 Mon Sep 17 00:00:00 2001
From: Marco De Donno <Marco.DeDonno@unil.ch>
Date: Wed, 5 Sep 2018 16:07:59 +0200
Subject: [PATCH] Add the sliders for the print and refactoring of the current
 code

---
 js/pianos4_tool_imageeditor.js | 98 ++++++++++++++++++++++++++++------
 1 file changed, 83 insertions(+), 15 deletions(-)

diff --git a/js/pianos4_tool_imageeditor.js b/js/pianos4_tool_imageeditor.js
index 9b8ee40..aa0219c 100644
--- a/js/pianos4_tool_imageeditor.js
+++ b/js/pianos4_tool_imageeditor.js
@@ -65,6 +65,12 @@ function Pianos4ToolImageEditor( params )
     {
         views = pianos.getViewsdict();
         
+        var invert_mark = $( '<div />' )
+            .text( 'Invert contrast' )
+            .css( 'text-decoration', 'underline' )
+            .css( 'cursor', 'pointer' )
+            .bind( 'click', function(){ invert( 'mark' ); } );
+        
         var slider_brightness_mark = $( '<div />' ).slider( {
             min: 0,
             max: 200,
@@ -73,7 +79,7 @@ function Pianos4ToolImageEditor( params )
             slide: function( event, ui )
             {
                 editorparameters.mark.brightness = ui.value;
-                viewUpdate();
+                viewUpdateMark();
             },
         } );
         
@@ -85,7 +91,7 @@ function Pianos4ToolImageEditor( params )
             slide: function( event, ui )
             {
                 editorparameters.mark.contrast = ui.value;
-                viewUpdate();
+                viewUpdateMark();
             },
         } );
         
@@ -96,21 +102,76 @@ function Pianos4ToolImageEditor( params )
                 .css( 'bottom', '0px' )
                 .css( 'right', '0px' )
                 .css( 'width', '300px' )
-                .css( 'height', '100px' )
+                .css( 'padding', '5px' )
                 .css( 'z-index', '1500' )
                 .css( 'background-color', '#ffffff' )
+                .css( 'box-shadow', '0px 0px 12px #444444' )
+                .append( invert_mark )
                 .append( $( '<span />' ).text( 'Brightness' ) )
                 .append( slider_brightness_mark )
                 .append( $( '<span />' ).text( 'Contrast' ) )
                 .append( slider_contrast_mark )
         );
         
+        if( pianos.getParams().phase === "comparison" )
+        {
+            
+            var invert_print = $( '<div />' )
+                .text( 'Invert contrast' )
+                .css( 'text-decoration', 'underline' )
+                .css( 'cursor', 'pointer' )
+                .bind( 'click', function(){ invert( 'print' ); } );
+            
+            var slider_brightness_print = $( '<div />' ).slider( {
+                min: 0,
+                max: 200,
+                value: 100,
+                orientation: 'horizontal',
+                slide: function( event, ui )
+                {
+                    editorparameters.print.brightness = ui.value;
+                    viewUpdatePrint();
+                },
+            } );
+            
+            var slider_contrast_print = $( '<div />' ).slider( {
+                min: 0,
+                max: 200,
+                value: 100,
+                orientation: 'horizontal',
+                slide: function( event, ui )
+                {
+                    editorparameters.print.contrast = ui.value;
+                    viewUpdatePrint();
+                },
+            } );
+            
+            $( '.pianos4_print' ).append(
+                $( '<div />' )
+                    .attr( 'id', 'pianos4_print_imageeditor_sliders' )
+                    .css( 'position', 'absolute' )
+                    .css( 'bottom', '0px' )
+                    .css( 'right', '0px' )
+                    .css( 'width', '300px' )
+                    .css( 'padding', '5px' )
+                    .css( 'z-index', '1500' )
+                    .css( 'background-color', '#ffffff' )
+                    .css( 'box-shadow', '0px 0px 12px #444444' )
+                    .append( invert_print )
+                    .append( $( '<span />' ).text( 'Brightness' ) )
+                    .append( slider_brightness_print )
+                    .append( $( '<span />' ).text( 'Contrast' ) )
+                    .append( slider_contrast_print )
+            );
+        }
+        
         log( 'Image editor activate' );
     }
     
     this.deactivate = function()
     {
         $( '#pianos4_mark_imageeditor_sliders' ).remove();
+        $( '#pianos4_print_imageeditor_sliders' ).remove();
         log( 'Image editor de-activate' );
     }
 
@@ -132,12 +193,6 @@ function Pianos4ToolImageEditor( params )
         {
             var panel = $( '<div class="pianos4_imgeditor_options" />' );
             
-            panel.append(
-                $( '<div />' )
-                    .text( 'Invert' )
-                    .bind( 'click', invert )
-            );
-            
             options = panel;
         }
         
@@ -166,6 +221,11 @@ function Pianos4ToolImageEditor( params )
             invert: 0,
             contrast: 100,
             brightness: 100,
+        },
+        print: {
+            invert: 0,
+            contrast: 100,
+            brightness: 100,
         }
     }
     
@@ -173,19 +233,27 @@ function Pianos4ToolImageEditor( params )
     // Private functions
     // ------------------------------
     
-    var invert = function()
+    var invert = function( type = 'mark' )
     {
-        if( editorparameters.mark.invert === 0 )
-            editorparameters.mark.invert = 1;
+        if( editorparameters[ type ].invert === 0 )
+            editorparameters[ type ].invert = 1;
         else
-            editorparameters.mark.invert = 0;
+            editorparameters[ type ].invert = 0;
         
-        viewUpdate();
+        if( type === 'mark' )
+            viewUpdateMark();
+        else
+            viewUpdatePrint();
     }
     
-    var viewUpdate = function()
+    var viewUpdateMark = function()
     {
         $( '.pianos4_mark > .pianos4_view_canvas > svg' )
             .css( 'filter', 'invert( ' + editorparameters.mark.invert + ' ) contrast( ' + editorparameters.mark.contrast + '% ) brightness( ' + editorparameters.mark.brightness + '% )' );
     }
+    var viewUpdatePrint = function()
+    {
+        $( '.pianos4_print > .pianos4_view_canvas > svg' )
+            .css( 'filter', 'invert( ' + editorparameters.print.invert + ' ) contrast( ' + editorparameters.print.contrast + '% ) brightness( ' + editorparameters.print.brightness + '% )' );
+    }
 }
-- 
GitLab