Mercurial > hg > digilib-old
changeset 1149:05f7eb1ba0a2
steps towards a svg measuring tool
| author | hertzhaft |
|---|---|
| date | Sun, 25 Nov 2012 21:01:13 +0100 |
| parents | 05413c47a976 |
| children | d9d17eb3d731 |
| files | webapp/src/main/webapp/jquery/jquery.digilib.svg.js webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.css webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js webapp/src/main/webapp/jquery/test-svg.html |
| diffstat | 4 files changed, 282 insertions(+), 406 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.svg.js Fri Nov 23 18:02:52 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.svg.js Sun Nov 25 21:01:13 2012 +0100 @@ -26,42 +26,106 @@ (function($) { - // plugin object with digilib data + // the digilib object var digilib = null; + // the normal zoom area + var FULL_AREA = null; // the functions made available by digilib - var fn = null; + var fn = { + // dummy function to avoid errors, gets overwritten by buttons plugin + highlightButtons : function () { + console.debug('svg: dummy function - highlightButtons'); + } + }; // affine geometry plugin var geom = null; + // convenience variable, set in init() + var CSS = ''; - var defaults = {}; + var buttons = { + toolbar : { + onclick : "toolbar", + tooltip : "show toolbar", + icon : "showregions.png" + }, + line : { + onclick : "line", + tooltip : "draw measuring line", + icon : "addregion.png" + } + }; + + var defaults = { + // buttonset of this plugin + svgSet : ['toolbar', 'line'], + // choice of colors offered by toolbar + lineColors : ['white', 'red', 'yellow', 'green', 'blue', 'black'], + // default color + lineColor : 'white', + // color while the line is drawn + drawColor : 'green', + // color of selected objects + selectColor : 'red', + // drawing shapes + shapes : ['line', 'polyline', 'rectangle', 'square', 'circle', 'arch', + 'ratio', 'intercolumnium', 'line grid'], + // default shape + shape : 'line', + // measuring unit (index into list) + unit : 1, + // converted unit (index into list) + converted : 2, + // last measured distance + lastDistance : 0, + // last measured angle + lastAngle : 0, + // maximal denominator for mixed fractions + maxDenominator : 20, + // number of decimal places for convert results + maxDecimals : 3, + // show convert result as mixed fraction? + showMixedFraction : false, + // show angle relative to last line? + showRelativeAngle : false, + // show distance numbers? + showDistanceNumbers : true, + // show ratio of rectangle sides? + showRectangleRatios : false, + // draw line ends as small crosses + drawEndPoints : true, + // draw mid points of lines + drawMidPoints : false, + // draw circle centers + drawCenters : false, + // draw rectangles from the diagonal and one point + drawFromDiagonal : false, + // draw circles from center + drawFromCenter : false, + // snap to endpoints + snapEndPoints : false, + // snap to mid points of lines + snapMidPoints : false, + // snap to circle centers + snapCenters : false, + // snap distance (in screen pixels) + snapDistance : 5, + // keep original object when moving/scaling/rotating + keepOriginal : false, + // number of copies when drawing grids + gridCopies : 10 + }; var actions = { - "test" : function(options) { - var onLoadXML = function (xml) { - settings.xml = xml; - settings.$toolBar = setupToolBar(settings); - $digilib.each(function() { - var $elem = $(this); - $elem.data(pluginName, settings); - }); + toolbar : function(data) { + var $toolbar = data.settings.$toolbar; + if ($toolbar) { + return $toolbar.toggle(); }; - var onLoadScalerImg = function () { - var $svgDiv = $('<div id="svg" />'); - $('body').append($svgDiv); - // size SVG div like scaler img - var $scalerImg = $digilib.find('img.pic'); - var scalerImgRect = geom.rectangle($scalerImg); - scalerImgRect.adjustDiv($svgDiv); - console.debug('$svgDiv', scalerImgRect); - var $svg = $svgDiv.svg({ - 'onLoad' : drawInitial - }); - settings.$elem = $digilib; - settings.$svgDiv = $svgDiv; - settings.$svg = $svg; - // set SVG data - $svg.data('digilib', data); - $svg.data(pluginName, settings); + $toolbar = setupToolbar(data); + var onLoadXML = function (xml) { + $xml = $(xml); + data.settings.$xml = $xml; + loadToolbarData(data, $toolbar, $xml); }; // fetch the XML measuring unit list $.ajax({ @@ -70,11 +134,108 @@ dataType : "xml", success : onLoadXML }); - data.$img.load(onLoadScalerImg); + // data.$img.load(onLoadScalerImg); return this; + }, + line : function(data) { + // } }; + // setup a div for accessing the main SVG functionality + var setupToolbar = function(data) { + var html = '\ + <div id="svg-toolbar">\ + <select id="svg-shapes"/>\ + <span class="svg-label">pixel</span>\ + <span id="svg-pixel" class="svg-number">0.0</span>\ + <span class="svg-label">factor</span>\ + <span id="svg-factor" class="svg-number">0.0</span>\ + <input id="svg-value1" class="svg-input" value="0.0"/>\ + <span class="svg-label">=</span>\ + <select id="svg-unit1"/>\ + <input id="svg-value2" class="svg-input" value="0.0"/>\ + <span class="svg-label">=</span>\ + <select id="svg-unit2"/>\ + <span id="svg-angle" class="svg-number">0.0</span>\ + </div>'; + var $toolbar = $(html); + data.$elem.append($toolbar); + data.settings.$toolbar = $toolbar; + $toolbar.show(); + return $toolbar; + }; + + // load shapes into select element + var loadShapes = function(data, $toolbar) { + var $shape = $toolbar.find('#svg-shapes'); + $.each(data.settings.shapes, function(index, name) { + var $opt = $('<option value="'+index+'">'+name+'</option>'); + $shape.append($opt); + }); + }; + + // load units into select elements + var loadSections = function(data, $toolbar, $xml) { + var $unit1 = $toolbar.find('#svg-unit1'); + var $unit2 = $toolbar.find('#svg-unit2'); + $xml.find("section").each(function(index, section) { + var $section = $(section); + var name = $section.attr("name"); + var $opt = $('<option class="section" disabled="disabled">'+name+'</option>'); + $unit1.append($opt); + $unit2.append($opt.clone()); + $section.find("unit").each(function(index, unit) { + var $unit = $(unit); + var name = $unit.attr("name"); + var factor = $unit.attr("factor"); + var $opt = $('<option class="unit" value="'+factor+'">'+ name+'</option>'); + $opt.data('unit', { + 'name' : name, + 'factor' : factor, + 'add' : $unit.attr("add"), + 'subunits' : $unit.attr("subunits") + }); + $unit1.append($opt); + $unit2.append($opt.clone()); + }); + }); + }; + + // setup a div for accessing the main SVG functionality + var loadToolbarData = function(data, $toolbar, $xml) { + loadShapes(data, $toolbar); + loadSections(data, $toolbar, $xml); + }; + + var drawInitial = function ($svg) { + console.debug('SVG is ready'); + var $svgDiv = $(this); + var rect = geom.rectangle($svgDiv); + $svg.line(0, 0, rect.width, rect.height, + {stroke: 'white', strokeWidth: 2}); + $svg.line(0, rect.height, rect.width, 0, + {stroke: 'red', strokeWidth: 2}); + }; + + var handleSetup = function (evt) { + console.debug("svg: handleSetup"); + var data = this; + var settings = data.settings; + }; + + // additional buttons + var installButtons = function (data) { + var settings = data.settings; + var mode = settings.interactionMode; + var buttonSettings = settings.buttonSettings[mode]; + var buttonSet = settings.svgSet; + if (buttonSet.length && buttonSet.length > 0) { + buttonSettings.svgSet = buttonSet; + buttonSettings.buttonSets.push('svgSet'); + } + }; + // plugin installation called by digilib on plugin object. var install = function (plugin) { digilib = plugin; @@ -83,28 +244,32 @@ // import geometry classes geom = fn.geometry; // add defaults, actions, buttons - $.extend(true, digilib.defaults, defaults); // make deep copy + $.extend(true, digilib.defaults, defaults); $.extend(digilib.actions, actions); + $.extend(true, digilib.buttons, buttons); // export functions // fn.test = test; }; // plugin initialization var init = function (data) { - console.debug('initialising digilibSVG plugin. data:', data); + console.debug('initialising svg plugin. data:', data); + var settings = data.settings; + CSS = settings.cssPrefix; + FULL_AREA = geom.rectangle(0, 0, 1, 1); + // install event handlers var $data = $(data); - $data.bind('setup', handleSetup); - }; - - var handleSetup = function (evt) { - console.debug("svg: handleSetup"); - var data = this; - var settings = data.settings; + $data.on('setup', handleSetup); + // $data.on('update', handleUpdate); + // install region buttons if user defined regions are allowed + if (digilib.plugins.buttons != null) { + installButtons(data); + } }; // plugin object with name and init // shared objects filled by digilib on registration - var plugin = { + var pluginProperties = { name : 'svg', install : install, init : init, @@ -117,6 +282,6 @@ if ($.fn.digilib == null) { $.error("jquery.digilib.svg must be loaded after jquery.digilib!"); } else { - $.fn.digilib('plugin', plugin); + $.fn.digilib('plugin', pluginProperties); } })(jQuery);
--- a/webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.css Fri Nov 23 18:02:52 2012 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,112 +0,0 @@ -/* - * CSS style file for digilib SVG measuring tool - * - * Martin Raspe, Robert Casties, 11.1.2011 - */ -body { - background: silver; - font-family: Tahoma, Helvetica, Arial; - } - -div#svg-toolbar { - color: grey; - background-color: grey; - position: fixed; - left: 8px; - bottom: 8px; - border: 1px solid black; - z-index: 1000; - } - -span.svg-label { - font-size: 12px; - padding: 0px 3px; - color: silver; - background-color: grey; - } - -span.svg-number { - font-size: 12px; - padding: 0px 3px; - display: inline-block; - width: 50px; - background-color: grey; - color: white; - text-align: right; - } - -select { - font-size: 12px; - padding: 0px 3px; - margin: 0px; - display: inline-block; - background-color: grey; - color: lightgreen; - border: none; - } - -option.section { - border-bottom: 1px dotted grey; - padding-left: 10px; -} - -input.svg-input { - width: 50px; - font-size: 12px; - padding: 0px 3px; - margin: 0px; - display: inline-block; - background-color: grey; - color: lightgreen; - border: none; - text-align: right; - } - -select:hover, select:active, select:focus, -input.svg-input:hover, input.svg-input:active, input.svg-input:focus { - background-color: white; - color: black; - } - -div.digilib { - margin: 0px; -} - -div.svg { - position: absolute; - background: transparent; -} - -td { - vertical-align: top; - } - -div#test:hover { - background-color: cornsilk; - } - -#debug { - background-color: beige; - position: absolute; - opacity: 50%; - top: 4px; - left: 300px; - width: 500px; - padding: 0px 5px; - font-family: Arial; - font-size: 9px; - display: none; - } - -div._log { - color: grey; - } - -div._debug { - color: darkgreen; - } - -div._error { - color: red; - } -
--- a/webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js Fri Nov 23 18:02:52 2012 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,254 +0,0 @@ -/* Copyright (c) 2011 Martin Raspe, Robert Casties - -This program is free software: you can redistribute it and/or modify -it under the terms of the GNU Lesser General Public License as published by -the Free Software Foundation, either version 2 of the License, or -(at your option) any later version. - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU Lesser General Public License for more details. - -You should have received a copy of the GNU Lesser General Public License -along with this program. If not, see <http://www.gnu.org/licenses/>. - -Authors: - Martin Raspe, Robert Casties, 9.2.2011 - 26.3.2012 - -*/ - -/** - * digilib SVG plugin (measuring tool for use within the digilib jQuery plugin) -**/ - -/* jslint browser: true, debug: true, forin: true -*/ - -(function($) { - - // plugin object with digilib data - var digilib = null; - // the functions made available by digilib - var fn = null; - // affine geometry plugin - var geom = null; - - var defaults = { - // choice of colors offered by toolbar - lineColors : ['white', 'red', 'yellow', 'green', 'blue', 'black'], - // default color - lineColor : 'white', - // color while the line is drawn - drawColor : 'green', - // color of selected objects - selectColor : 'red', - // drawing shapes - shapes : ['line', 'polyline', 'rectangle', 'square', 'circle', 'arch', - 'ratio', 'intercolumn', 'line grid'], - // default shape - shape : 'line', - // measuring unit (index into list) - unit : 1, - // converted unit (index into list) - converted : 2, - // last measured distance - lastDistance : 0, - // last measured angle - lastAngle : 0, - // maximal denominator for mixed fractions - maxDenominator : 20, - // number of decimal places for convert results - maxDecimals : 3, - // show convert result as mixed fraction? - showMixedFraction : false, - // show angle relative to last line? - showRelativeAngle : false, - // show distance numbers? - showDistanceNumbers : true, - // show ratio of rectangle sides? - showRectangleRatios : false, - // draw line ends as small crosses - drawEndPoints : true, - // draw mid points of lines - drawMidPoints : false, - // draw circle centers - drawCenters : false, - // draw rectangles from the diagonal and one point - drawFromDiagonal : false, - // draw circles from center - drawFromCenter : false, - // snap to endpoints - snapEndPoints : false, - // snap to mid points of lines - snapMidPoints : false, - // snap to circle centers - snapCenters : false, - // snap distance (in screen pixels) - snapDistance : 5, - // keep original object when moving/scaling/rotating - keepOriginal : false, - // number of copies when drawing grids - gridCopies : 10 - }; - - var actions = { - "test" : function(options) { - var onLoadXML = function (xml) { - settings.xml = xml; - settings.$toolBar = setupToolBar(settings); - $digilib.each(function() { - var $elem = $(this); - $elem.data(pluginName, settings); - }); - }; - var onLoadScalerImg = function () { - var $svgDiv = $('<div id="svg" />'); - $('body').append($svgDiv); - // size SVG div like scaler img - var $scalerImg = $digilib.find('img.pic'); - var scalerImgRect = geom.rectangle($scalerImg); - scalerImgRect.adjustDiv($svgDiv); - console.debug('$svgDiv', scalerImgRect); - var $svg = $svgDiv.svg({ - 'onLoad' : drawInitial - }); - settings.$elem = $digilib; - settings.$svgDiv = $svgDiv; - settings.$svg = $svg; - // set SVG data - $svg.data('digilib', data); - $svg.data(pluginName, settings); - }; - // fetch the XML measuring unit list - $.ajax({ - type : "GET", - url : "svg/archimedes.xml", - dataType : "xml", - success : onLoadXML - }); - data.$img.load(onLoadScalerImg); - return this; - } - }; - - // setup a div for accessing the main SVG functionality - var setupToolBar = function(settings) { - var $toolBar = $('<div id="svg-toolbar"/>'); - // shapes select - var $shape = $('<select id="svg-shapes"/>'); - for (var i = 0; i < settings.shapes.length; i++) { - var name = settings.shapes[i]; - var $opt = $('<option value="' + i + '">' + name + '</option>'); - $shape.append($opt); - } - // console.debug($xml); - var $xml = $(settings.xml); - // unit selects - var $unit1 = $('<select id="svg-convert1"/>'); - var $unit2 = $('<select id="svg-convert2"/>'); - - $xml.find("section").each(function() { - var $section = $(this); - var name = $section.attr("name"); - // append section name as option - var $opt = $('<option class="section" disabled="disabled">' + name + '</option>'); - $unit1.append($opt); - $unit2.append($opt.clone()); - $section.find("unit").each(function() { - var $unit = $(this); - var name = $unit.attr("name"); - var factor = $unit.attr("factor"); - var $opt = $('<option class="unit" value="' + factor + '">' + name + '</option>'); - $opt.data(pluginName, { - 'name' : name, - 'factor' : factor, - 'add' : $unit.attr("add"), - 'subunits' : $unit.attr("subunits") - }); - $unit1.append($opt); - $unit2.append($opt.clone()); - }); - }); - // settings.units = units; - // other elements - var $la1 = $('<span class="svg-label">pixel</span>'); - var $la2 = $('<span class="svg-label">factor</span>'); - var $la3 = $('<span class="svg-label">=</span>'); - var $la4 = $('<span class="svg-label">=</span>'); - var $px = $('<span id="svg-pixel" class="svg-number">0.0</span>'); - var $factor = $('<span id="svg-factor" class="svg-number">0.0</span>'); - var $result1 = $('<input id="svg-unit1" class="svg-input" value="0.0"/>'); - var $result2 = $('<input id="svg-unit2" class="svg-input" value="0.0"/>'); - var $angle = $('<span id="svg-angle" class="svg-number">0.0</span>'); - $('body').append($toolBar); - $toolBar.append($shape); - $toolBar.append($la1); - $toolBar.append($px); - $toolBar.append($la2); - $toolBar.append($factor); - $toolBar.append($la3); - $toolBar.append($result1); - $toolBar.append($unit1); - $toolBar.append($la4); - $toolBar.append($result2); - $toolBar.append($unit2); - $toolBar.append($angle); - return $toolBar; - }; - - var drawInitial = function ($svg) { - console.debug('SVG is ready'); - var $svgDiv = $(this); - var rect = geom.rectangle($svgDiv); - $svg.line(0, 0, rect.width, rect.height, - {stroke: 'white', strokeWidth: 2}); - $svg.line(0, rect.height, rect.width, 0, - {stroke: 'red', strokeWidth: 2}); - }; - - // plugin installation called by digilib on plugin object. - var install = function (plugin) { - digilib = plugin; - console.debug('installing digilibSVG plugin. digilib:', digilib); - fn = digilib.fn; - // import geometry classes - geom = fn.geometry; - // add defaults, actions, buttons - $.extend(true, digilib.defaults, defaults); // make deep copy - $.extend(digilib.actions, actions); - // export functions - // fn.test = test; - }; - - // plugin initialization - var init = function (data) { - console.debug('initialising digilibSVG plugin. data:', data); - var $data = $(data); - $data.bind('setup', handleSetup); - }; - - var handleSetup = function (evt) { - console.debug("digilibSVG: handleSetup"); - var data = this; - var settings = data.settings; - }; - - // plugin object with name and init - // shared objects filled by digilib on registration - var plugin = { - name : 'digilibSVG', - install : install, - init : init, - buttons : {}, - actions : {}, - fn : {}, - plugins : {} - }; - - if ($.fn.digilib == null) { - $.error("jquery.digilibSVG must be loaded after jquery.digilib!"); - } else { - $.fn.digilib('plugin', plugin); - } -})(jQuery);
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/webapp/src/main/webapp/jquery/test-svg.html Sun Nov 25 21:01:13 2012 +0100 @@ -0,0 +1,77 @@ + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta http-equiv="content-type" content="text/html; charset=windows-1252" /> + <meta name="viewport" content="initial-scale=1.0"/> + <title>Digilib local: svg</title> + <!-- <base href="http://localhost:8080" target="_blank" /> --> + + <script type="text/javascript" src="jquery.js"></script> + <script type="text/javascript" src="jquery.cookie.js"></script> + <script type="text/javascript" src="jquery.digilib.js"></script> + <script type="text/javascript" src="jquery.digilib.geometry.js"></script> + <script type="text/javascript" src="jquery.digilib.arrows.js"></script> + <script type="text/javascript" src="jquery.range.js"></script> + <link rel="stylesheet" type="text/css" href="jquery.range.css" /> + <script type="text/javascript" src="jquery.digilib.buttons.js"></script> + <script type="text/javascript" src="jquery.digilib.sliders.js"></script> + <script type="text/javascript" src="jquery.digilib.birdseye.js"></script> + <script type="text/javascript" src="jquery.digilib.marks.js"></script> + <script type="text/javascript" src="jquery.digilib.svg.js"></script> + <link rel="stylesheet" type="text/css" href="jquery.digilib.css" /> + + <style type="text/css"> + body { + background: silver; + } + #digilib .nofm { + background-color: navy; + + } + #dl_svgdiv { + width: 700px; + height: 200px; + position: absolute; + top: 10px; + } + #svg-toolbar { + position: absolute; + bottom: 10px; + background: silver; + border: 1px solid aqua; + padding: 2px 10px; + font-size: 80%; + } + + #svg-toolbar input, + #svg-toolbar select { + border: 1px solid grey; + font-size: 90%; + } + </style> + + <script type="text/javascript"> + $(document).ready(function(){ + var opts = { + interactionMode : 'fullscreen', + previewImgWidth : 1200, + previewImgHeight : 800, + maxBgSize : 30000, + fn : 'Test01', + }; + var $div = $('div#digilib'); + $div.digilib(opts); + }); + + </script> + </head> + + <body> + <div id="digilib"> + <p>If you see this, Digilib doesn't work. The reason could be: Javascript is not activated; there is a bug in the Javascript code; the image server does not respond.</p> + <img src="http://digilib.berlios.de/images/digilib-logo-big.png" /> + </div> + </body> +</html> +