Mercurial > hg > digilib-old

changeset 1058:95d28c6ad018

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rgb slider now gets/sets values, plus some refactoring
author hertzhaft
date Sat, 31 Mar 2012 12:10:34 +0200
parents d139f59a5f80
children c7fd2f239953
files webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.dialogs.js webapp/src/main/webapp/jquery/jquery.digilib.js webapp/src/main/webapp/jquery/jquery.digilib.sliders.js
diffstat 4 files changed, 86 insertions(+), 32 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Sat Mar 31 00:41:28 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Sat Mar 31 12:10:34 2012 +0200
@@ -127,7 +127,7 @@
 div.dl-digilib #dl-calibration {
 	background: url('img/blue.png');
 	position: absolute;
-	border: 1px solid lightcyan;
+	border: 2px solid lightcyan;
 	width: 400px;
 	display: none;
 	z-index: 9999;
@@ -265,6 +265,7 @@
 div.dl-digilib table.dl-rgbslider td.rgb {
     width: 40%;
     padding: 10px;
+    border: 2px solid lightcyan;
 }
 
 /* special definitions for fullscreen */
--- a/webapp/src/main/webapp/jquery/jquery.digilib.dialogs.js	Sat Mar 31 00:41:28 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.dialogs.js	Sat Mar 31 12:10:34 2012 +0200
@@ -47,8 +47,8 @@
         var $elem = data.$elem;
         var settings = data.settings;
         var cssPrefix = settings.cssPrefix;
-        var $calDiv = $elem.find('#'+cssPrefix+'calibration');
-        if ($calDiv.length > 0) return; // already onscreen
+        var calibrationSelector = '#'+cssPrefix+'calibration';
+        if (fn.isOnScreen(data, calibrationSelector)) return; // already onscreen
         var html = '\
             <div id="'+cssPrefix+'calibration" class="'+cssPrefix+'calibration">\
                 <div id="'+cssPrefix+'ruler">\
@@ -106,8 +106,8 @@
         var $elem = data.$elem;
         var settings = data.settings;
         var cssPrefix = settings.cssPrefix;
-        var $scaleDiv = $elem.find('#'+cssPrefix+'scalemode');
-        if ($scaleDiv.length > 0) return; // already onscreen
+        var scaleModeSelector = '#'+cssPrefix+'scalemode';
+        if (fn.isOnScreen(data, scaleModeSelector)) return; // already onscreen
         var html = '\
             <div id="'+cssPrefix+'scalemode" style="display:none; z-index:1000; position:absolute">\
                 <select class="'+cssPrefix+'scalemode" />\
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Sat Mar 31 00:41:28 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Sat Mar 31 12:10:34 2012 +0200
@@ -38,7 +38,7 @@
 
     var defaults = {
         // version of this script
-        'version' : 'jquery.digilib.js 2.1.6a2',
+        'version' : 'jquery.digilib.js 2.1.6a3',
         // logo url
         'logoUrl' : 'img/digilib-logo-text1.png',
         // homepage url (behind logo)
@@ -266,8 +266,8 @@
             var $elem = data.$elem;
             var settings = data.settings;
             var cssPrefix = settings.cssPrefix;
-            var $about = $elem.find('#'+cssPrefix+'about');
-            if ($about.length > 0) return; // already onscreen
+            var aboutSelector = '#'+cssPrefix+'about';
+            if (isOnScreen(data, aboutSelector)) return;
             // make relative logoUrl absolute
             var logoUrl = settings.logoUrl;
             if (logoUrl.charAt(0) !== '/' && logoUrl.substring(0,3) !== 'http') {
@@ -1598,12 +1598,27 @@
     /** center an item on the visible screen rect
     */
     var centerOnScreen = function (data, $div) {
+        if ($div == null) return;
         var r = geom.rectangle($div);
         var s = fn.getFullscreenRect(data);
         r.setCenter(s.getCenter());
         r.adjustDiv($div);
     };
 
+    /** find an element in digilib $elem
+    */
+    var find = function (data, selector) {
+        var $obj = data.$elem.find(selector);
+        return ($obj.length > 0) ? $obj : null;
+    };
+
+    /** does element exist in digilib?
+    */
+    var isOnScreen = function (data, selector) {
+        var $obj = find(data, selector);
+        return ($obj != null);
+    };
+
     /** fade out and remove an item
     */
     var withdraw = function ($item) {
@@ -1665,7 +1680,9 @@
             cropFloat : cropFloat,
             cropFloatStr : cropFloatStr,
             centerOnScreen : centerOnScreen,
-            withdraw : withdraw
+            withdraw : withdraw,
+            isOnScreen : isOnScreen,
+            find : find
     };
 
     // hook digilib plugin into jquery
--- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js	Sat Mar 31 00:41:28 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js	Sat Mar 31 12:10:34 2012 +0200
@@ -45,18 +45,25 @@
         }
     };
 
+    var primaryColors = ['r', 'g', 'b'];
     var rgb = {
         r : {
             label : "red",
-            color : "#800000"
+            color : "#800000",
+            a : 0,
+            m : 0
             },
         g : {
             label : "green",
-            color : "#008000"
+            color : "#008000",
+            a : 0,
+            m : 0
             },
         b : {
             label : "blue",
-            color : "#000080"
+            color : "#000080",
+            a : 0,
+            m : 0
             }
         }
     var actions = {
@@ -103,7 +110,7 @@
         fn.setButtonAction('brgt', 'tinySliderBrgt');
         fn.setButtonAction('cont', 'tinySliderCont');
         fn.setButtonAction('rot', 'tinySliderRot');
-        // fn.setButtonAction('rgb', 'tinySliderRGB');
+        fn.setButtonAction('rgb', 'tinySliderRGB');
     };
 
     // plugin installation called by digilib on plugin object.
@@ -123,26 +130,46 @@
     // plugin initialization
     var init = function (data) {
         console.debug('initialising sliders plugin. data:', data);
-        // var settings = data.settings;
-        // var $data = $(data);
-        // we do setup at runtime
-        // $data.bind('setup', handleSetup);
+        var $data = $(data);
+        $data.bind('update', handleUpdate);
     };
 
+    // get rgba/rgbm params (color brightness/contrast) 
+    var handleUpdate = function (evt) {
+        console.debug("sliders: handleUpdate");
+        var data = this;
+        setStartValues(data, 'a');
+        setStartValues(data, 'm');
+        var idSlider = '#'+ data.settings.cssPrefix + 'slider';
+        fn.centerOnScreen(data, fn.find(data, idSlider));
+    };
+
+    // set m/a start values for sliders
+    var setStartValues = function (data, code) {
+        var colorparts = data.settings['rgb'+code];
+        if (colorparts == null) return;
+        var values = colorparts.split("/");
+        rgb.r[code] = values[0] || 0;
+        rgb.g[code] = values[1] || 0;
+        rgb.b[code] = values[2] || 0;
+        };
+
     /** creates a div with a form, setup events and callback
      */
     var setupFormDiv = function (data, $content, cssSuffix, callback) {
         var cssPrefix = data.settings.cssPrefix;
         var cls = cssPrefix + cssSuffix;
+        var $elem = data.$elem;
+        var sliderSelector = '#'+cssPrefix+'slider';
+        if (fn.isOnScreen(data, sliderSelector)) return; // already onscreen
         var html = '\
-            <div class="'+cls+'">\
+            <div id="'+cssPrefix+'slider" class="'+cls+'">\
                 <form class="'+cls+'">\
                     <input class="'+cls+'cancel" type="button" value="Cancel"/>\
                     <input type="submit" name="sub" value="Ok"/>\
                 </form>\
             </div>';
-        var $elem = data.$elem;
-        var $div = $(html).appendTo($elem);
+        $div = $(html).appendTo($elem);
         var $form = $div.find('form');
         $form.prepend($content);
         // handle submit
@@ -191,8 +218,9 @@
         $slider.data({'$text' : $text, '$range' : $range});
         // connect slider and input
         $range.on('change', function () {
-            var val = $range.val();
-            $text.val(val);
+            // crop floating point imprecision
+            var val = parseFloat($range.val()).toFixed(4);
+            $text.val(parseFloat(val));
         });
         $text.on('change', function () {
             var val = $text.val();
@@ -225,19 +253,27 @@
     var rgbSlider = function (data, callback) {
         var cls = data.settings.cssPrefix + 'rgbslider';
         var $table = $('<table class="'+cls+'" />');
-        var makeSliders = function(index, value) {
-            // TODO: set start values
+        var setupTableRow = function(index, value) {
+            var color = rgb[value];
+            // start values are set in "handleSetup"
+            var $brgt = tinySlider(data, 'brgt', color.a);
+            var $cont = tinySlider(data, 'cont', color.m);
+            $table.data(value+'a', $brgt.data('$text'));
+            $table.data(value+'m', $cont.data('$text'));
             var $tr = $('<tr/>').appendTo($table);
-            var $td = $('<td class="color">'+rgb[value].label+'</td>').appendTo($tr);
-            var $td = $('<td class="rgb"/>').append(tinySlider(data, 'brgt')).appendTo($tr);
-            var $td = $('<td class="rgb"/>').append(tinySlider(data, 'cont')).appendTo($tr);
+            var $td = $('<td class="color">'+color.label+'</td>').appendTo($tr);
+            var $td = $('<td class="rgb"/>').append($brgt).appendTo($tr);
+            var $td = $('<td class="rgb"/>').append($cont).appendTo($tr);
             }
-        $.each(['r','g','b'], makeSliders);
-        var getValue = function () {
-            // TODO: get values from sliders
-            callback(null, null);
+        $.each(primaryColors, setupTableRow);
+        var getValues = function () {
+            // get values from sliders
+            var input = $table.data();
+            var rgba = input['ra'].val() + '/' + input['ga'].val() + '/' + input['ba'].val();
+            var rgbm = input['rm'].val() + '/' + input['gm'].val() + '/' + input['bm'].val();
+            callback(rgbm, rgba);
             };
-        setupFormDiv(data, $table, 'rgbslider', getValue);
+        setupFormDiv(data, $table, 'rgbslider', getValues);
     };
 
     // plugin object with name and init