Mercurial > hg > digilib-old
changeset 1054:6488318df736
stuff for svg testing
| author | hertzhaft |
|---|---|
| date | Tue, 27 Mar 2012 00:01:20 +0200 |
| parents | 86ba65b86d52 |
| children | f6292c6ec440 |
| files | webapp/src/main/webapp/jquery/jquery-test-svg.html webapp/src/main/webapp/jquery/jquery.digilib.svg.css webapp/src/main/webapp/jquery/jquery.digilib.svg.js webapp/src/main/webapp/jquery/test.svg webapp/src/main/webapp/jquery/test1.svg |
| diffstat | 5 files changed, 299 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery-test-svg.html Mon Mar 26 23:22:33 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery-test-svg.html Tue Mar 27 00:01:20 2012 +0200 @@ -2,7 +2,7 @@ <!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> - <title>jQuery.digilibSVG test</title> + <title>jquery.digilib.svg.js test</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> @@ -19,8 +19,8 @@ <script type="text/javascript" src="jquery.digilib.regions.js"></script> <link rel="stylesheet" type="text/css" href="jquery.digilib.css" /> <script type="text/javascript" src="svg/jquery.svg.js"></script> - <script type="text/javascript" src="svg/jquery.digilibSVG.js"></script> - <link rel="stylesheet" type="text/css" href="svg/jquery.digilibSVG.css" /> + <script type="text/javascript" src="jquery.digilib.svg.js"></script> + <link rel="stylesheet" type="text/css" href="jquery.digilib.svg.css" /> <script type="text/javascript"> $(document).ready(function(){ @@ -30,6 +30,9 @@ }; var $div = $('div#digilib'); $div.digilib(opts); + DIGILIB = function (action) { + return $div.digilib(action); + }; }); </script> </head> @@ -40,7 +43,13 @@ <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p> <img src="http://digilib.berlios.de/images/digilib-logo-big.png" /> </div> - <div id="debug">DEBUG</div> + + <a href="javascript: DIGILIB('about')">about</a> + + <div id="dl_svgdiv"> + <img src="test1.svg" /> + </div> + </body> </html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.svg.css Tue Mar 27 00:01:20 2012 +0200 @@ -0,0 +1,12 @@ +/* + * CSS style file for jQuery digilib + * + * Martin Raspe, Robert Casties, 26.3.2012 + */ + +#dl_svgdiv img { + width: 700px; + height: 200px; + position: absolute; + top: 10px; +}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.svg.js Tue Mar 27 00:01:20 2012 +0200 @@ -0,0 +1,122 @@ +/* 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, 26.3.2012 +*/ + +/** + * digilib SVG plugin (display a SVG on top if scaler image and zoom/rotate/mirror etc.) +**/ + +/* 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 = {}; + + 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; + } + }; + + // plugin installation called by digilib on plugin object. + var install = function (plugin) { + digilib = plugin; + console.debug('installing svg 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("svg: handleSetup"); + var data = this; + var settings = data.settings; + }; + + // plugin object with name and init + // shared objects filled by digilib on registration + var plugin = { + name : 'svg', + install : install, + init : init, + buttons : {}, + actions : {}, + fn : {}, + plugins : {} + }; + + if ($.fn.digilib == null) { + $.error("jquery.digilib.svg 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 Tue Mar 27 00:01:20 2012 +0200 @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg version="1.0" width="672" height="504" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="672" height="504" fill="#131313"/> + <rect x="0" y="0" width="96" height="336" fill="#c0c0c0"/> + <rect x="96" y="0" width="96" height="336" fill="#c0c000"/> + <rect x="192" y="0" width="96" height="336" fill="#00c0c0"/> + <rect x="288" y="0" width="96" height="336" fill="#00c000"/> + <rect x="384" y="0" width="96" height="336" fill="#c000c0"/> + <rect x="480" y="0" width="96" height="336" fill="#c00000"/> + <rect x="576" y="0" width="96" height="336" fill="#0000c0"/> + + <rect x="0" y="336" width="96" height="42" fill="#0000c0"/> + <rect x="192" y="336" width="96" height="42" fill="#c000c0"/> + <rect x="384" y="336" width="96" height="42" fill="#00c0c0"/> + <rect x="576" y="336" width="96" height="42" fill="#c0c0c0"/> + + <rect x="0" y="378" width="120" height="126" fill="#00214c"/> + <rect x="120" y="378" width="120" height="126" fill="#ffffff"/> + <rect x="240" y="378" width="120" height="126" fill="#32006a"/> + <rect x="480" y="378" width="32" height="126" fill="#090909"/> + <rect x="544" y="378" width="32" height="126" fill="#1d1d1d"/> +</svg> \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/webapp/src/main/webapp/jquery/test1.svg Tue Mar 27 00:01:20 2012 +0200 @@ -0,0 +1,130 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg version="1.0" xmlns="http://www.w3.org/2000/svg" > +<g style="stroke-width: 0.005; fill: none" transform="scale(1000,600)"> +<rect x="0.0" y="0.0" width="1.0" height="1.0" style="stroke: red" /> +<rect x="0.1" y="0.1" width="0.8" height="0.8" style="stroke: orange" /> +<rect x="0.2" y="0.2" width="0.6" height="0.6" style="stroke: yellow" /> +<rect x="0.3" y="0.3" width="0.4" height="0.4" style="stroke: green" /> +<rect x="0.4" y="0.4" width="0.2" height="0.2" style="stroke: cyan" /> +<g style="fill:magenta; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.025" width="0.05" height="0.05"/> +<rect x="0.125" y="0.025" width="0.05" height="0.05"/> +<rect x="0.225" y="0.025" width="0.05" height="0.05"/> +<rect x="0.325" y="0.025" width="0.05" height="0.05"/> +<rect x="0.425" y="0.025" width="0.05" height="0.05"/> +<rect x="0.525" y="0.025" width="0.05" height="0.05"/> +<rect x="0.625" y="0.025" width="0.05" height="0.05"/> +<rect x="0.725" y="0.025" width="0.05" height="0.05"/> +<rect x="0.825" y="0.025" width="0.05" height="0.05"/> +<rect x="0.925" y="0.025" width="0.05" height="0.05"/> +</g> +<g style="fill:blue; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.125" width="0.05" height="0.05"/> +<rect x="0.125" y="0.125" width="0.05" height="0.05"/> +<rect x="0.225" y="0.125" width="0.05" height="0.05"/> +<rect x="0.325" y="0.125" width="0.05" height="0.05"/> +<rect x="0.425" y="0.125" width="0.05" height="0.05"/> +<rect x="0.525" y="0.125" width="0.05" height="0.05"/> +<rect x="0.625" y="0.125" width="0.05" height="0.05"/> +<rect x="0.725" y="0.125" width="0.05" height="0.05"/> +<rect x="0.825" y="0.125" width="0.05" height="0.05"/> +<rect x="0.925" y="0.125" width="0.05" height="0.05"/> +</g> +<g style="fill:cyan; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.225" width="0.05" height="0.05"/> +<rect x="0.125" y="0.225" width="0.05" height="0.05"/> +<rect x="0.225" y="0.225" width="0.05" height="0.05"/> +<rect x="0.325" y="0.225" width="0.05" height="0.05"/> +<rect x="0.425" y="0.225" width="0.05" height="0.05"/> +<rect x="0.525" y="0.225" width="0.05" height="0.05"/> +<rect x="0.625" y="0.225" width="0.05" height="0.05"/> +<rect x="0.725" y="0.225" width="0.05" height="0.05"/> +<rect x="0.825" y="0.225" width="0.05" height="0.05"/> +<rect x="0.925" y="0.225" width="0.05" height="0.05"/> +</g> +<g style="fill:green; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.325" width="0.05" height="0.05"/> +<rect x="0.125" y="0.325" width="0.05" height="0.05"/> +<rect x="0.225" y="0.325" width="0.05" height="0.05"/> +<rect x="0.325" y="0.325" width="0.05" height="0.05"/> +<rect x="0.425" y="0.325" width="0.05" height="0.05"/> +<rect x="0.525" y="0.325" width="0.05" height="0.05"/> +<rect x="0.625" y="0.325" width="0.05" height="0.05"/> +<rect x="0.725" y="0.325" width="0.05" height="0.05"/> +<rect x="0.825" y="0.325" width="0.05" height="0.05"/> +<rect x="0.925" y="0.325" width="0.05" height="0.05"/> +</g> +<g style="fill:yellow; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.425" width="0.05" height="0.05"/> +<rect x="0.125" y="0.425" width="0.05" height="0.05"/> +<rect x="0.225" y="0.425" width="0.05" height="0.05"/> +<rect x="0.325" y="0.425" width="0.05" height="0.05"/> +<rect x="0.425" y="0.425" width="0.05" height="0.05"/> +<rect x="0.525" y="0.425" width="0.05" height="0.05"/> +<rect x="0.625" y="0.425" width="0.05" height="0.05"/> +<rect x="0.725" y="0.425" width="0.05" height="0.05"/> +<rect x="0.825" y="0.425" width="0.05" height="0.05"/> +<rect x="0.925" y="0.425" width="0.05" height="0.05"/> +</g> +<g style="fill:orange; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.525" width="0.05" height="0.05"/> +<rect x="0.125" y="0.525" width="0.05" height="0.05"/> +<rect x="0.225" y="0.525" width="0.05" height="0.05"/> +<rect x="0.325" y="0.525" width="0.05" height="0.05"/> +<rect x="0.425" y="0.525" width="0.05" height="0.05"/> +<rect x="0.525" y="0.525" width="0.05" height="0.05"/> +<rect x="0.625" y="0.525" width="0.05" height="0.05"/> +<rect x="0.725" y="0.525" width="0.05" height="0.05"/> +<rect x="0.825" y="0.525" width="0.05" height="0.05"/> +<rect x="0.925" y="0.525" width="0.05" height="0.05"/> +</g> +<g style="fill:red; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.625" width="0.05" height="0.05"/> +<rect x="0.125" y="0.625" width="0.05" height="0.05"/> +<rect x="0.225" y="0.625" width="0.05" height="0.05"/> +<rect x="0.325" y="0.625" width="0.05" height="0.05"/> +<rect x="0.425" y="0.625" width="0.05" height="0.05"/> +<rect x="0.525" y="0.625" width="0.05" height="0.05"/> +<rect x="0.625" y="0.625" width="0.05" height="0.05"/> +<rect x="0.725" y="0.625" width="0.05" height="0.05"/> +<rect x="0.825" y="0.625" width="0.05" height="0.05"/> +<rect x="0.925" y="0.625" width="0.05" height="0.05"/> +</g> +<g style="fill:magenta; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.725" width="0.05" height="0.05"/> +<rect x="0.125" y="0.725" width="0.05" height="0.05"/> +<rect x="0.225" y="0.725" width="0.05" height="0.05"/> +<rect x="0.325" y="0.725" width="0.05" height="0.05"/> +<rect x="0.425" y="0.725" width="0.05" height="0.05"/> +<rect x="0.525" y="0.725" width="0.05" height="0.05"/> +<rect x="0.625" y="0.725" width="0.05" height="0.05"/> +<rect x="0.725" y="0.725" width="0.05" height="0.05"/> +<rect x="0.825" y="0.725" width="0.05" height="0.05"/> +<rect x="0.925" y="0.725" width="0.05" height="0.05"/> +</g> +<g style="fill:blue; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.825" width="0.05" height="0.05"/> +<rect x="0.125" y="0.825" width="0.05" height="0.05"/> +<rect x="0.225" y="0.825" width="0.05" height="0.05"/> +<rect x="0.325" y="0.825" width="0.05" height="0.05"/> +<rect x="0.425" y="0.825" width="0.05" height="0.05"/> +<rect x="0.525" y="0.825" width="0.05" height="0.05"/> +<rect x="0.625" y="0.825" width="0.05" height="0.05"/> +<rect x="0.725" y="0.825" width="0.05" height="0.05"/> +<rect x="0.825" y="0.825" width="0.05" height="0.05"/> +<rect x="0.925" y="0.825" width="0.05" height="0.05"/> +</g> +<g style="fill:darkgrey; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> +<rect x="0.025" y="0.925" width="0.05" height="0.05"/> +<rect x="0.125" y="0.925" width="0.05" height="0.05"/> +<rect x="0.225" y="0.925" width="0.05" height="0.05"/> +<rect x="0.325" y="0.925" width="0.05" height="0.05"/> +<rect x="0.425" y="0.925" width="0.05" height="0.05"/> +<rect x="0.525" y="0.925" width="0.05" height="0.05"/> +<rect x="0.625" y="0.925" width="0.05" height="0.05"/> +<rect x="0.725" y="0.925" width="0.05" height="0.05"/> +<rect x="0.825" y="0.925" width="0.05" height="0.05"/> +<rect x="0.925" y="0.925" width="0.05" height="0.05"/> +</g> +</g> +</svg>