Skip to content

O
officejs
Commit 67c6485f authored by Sebastien Robin's avatar Sebastien Robin
Browse files
Options

define better ui thanks to bootstrap.js

parent 44f0abdf
Hide whitespace changes
Inline Side-by-side
Showing with 203 additions and 53 deletions
poc/safeimage/css/style.css
View file @ 67c6485f
......@@ -77,7 +77,7 @@ h6 {
* Map Examples Specific
*/
.smallmap {
width: 1024px;
width: 800px;
height: 512px;
border: 1px solid #ccc;
}
......
poc/safeimage/index.html
View file @ 67c6485f
......@@ -3,68 +3,64 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>SafeImage Example</title>
<title>SafeImage</title>
<link href="lib/common/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/default_style.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var zoomify_width = 29566;
var zoomify_height = 14321;
var zoomify_url = "image/hs-2007-16-a-full_jpg/";
var map, zoomify;
function init(){
/* First we initialize the zoomify pyramid (to get number of tiers) */
var zoomify = new OpenLayers.Layer.Zoomify( "Zoomify", zoomify_url,
new OpenLayers.Size( zoomify_width, zoomify_height ) );
/* Map with raster coordinates (pixels) from Zoomify image */
var options = {
maxExtent: new OpenLayers.Bounds(0, 0, zoomify_width, zoomify_height),
maxResolution: Math.pow(2, zoomify.numberOfTiers-1 ),
numZoomLevels: zoomify.numberOfTiers,
units: 'pixels'
};
map = new OpenLayers.Map("map", options);
map.addLayer(zoomify);
<script id="image" type="text/html">
{{! Service page template }}
<article>
foo {{ image_id }}
<div id="map" class="smallmap"></div>
</article>
</script>
map.setBaseLayer(zoomify);
map.zoomToMaxExtent();
};
</script>
</head>
<body onload="init()">
<h1 id="title">Zoomify Layer Example</h1>
<div id="tags">
zoomify, layer
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<div class="row-fluid">
<div class="span10">
<ul class="nav">
<li><a href="#">Dashboard</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<p id="shortdesc">
Demo of a layer with Zoomify tiles.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
Demonstration of the Zoomify layer in OpenLayers.<br>
You can have a look at <a href="http://almor.mzk.cz/moll/AA22/103.html">Zoomify viewer for this picture</a>, which is using the same <a href="http://almor.mzk.cz/moll/AA22/0103/">tiles</a>.
</p>
<p>
For change to our own image you have to specify 'url' (zoomifyImagePath in Zoomify terminology) and 'size' ('width' and 'height' from ImageProperty.xml file).<br>
Custom tiles can be easily generated with original <a href="http://www.zoomify.com/">Zoomify software</a> like with freely available <a href="http://www.zoomify.com/express.htm">ZoomifyerEZ</a> or with Adobe PhotoShop CS3 (it has built in support for export into Zoomify tiles).<br>
There is also a <a href="http://sourceforge.net/projects/zoomifyimage/">ZoomifyImage SourceForge Project</a>, a tile cutter available under GPL license.<br>
Zoomify tiles can be also served dynamically on the server side from JPEG2000 masters using <a href="http://dltj.org/article/introducing-j2ktilerenderer/">J2KTileRender</a> with available integration for DSpace and soon for Fedora Digital Repository.<br>
<a href="http://iipimage.sourceforge.net/">IIPImage server</a> can serve Zoomify tiles dynamically from TIFF files.
</p>
<p>
Development of the Zoomify support for OpenLayers was supported from the grant <a href="http://www.oldmapsonline.org/">Old Maps Online</a>.
</p>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well">
<ul class="nav nav-list">
<li class="nav-header">Images</li>
<li autofocus="autofocus"><a href="#image/hs-2007-16-a-full_jpg"><i class="icon-star"></i>hs-2007-16-a-full_jpg</a></li>
<li><a href="#image/copy"><i class="icon-star"></i>copy</a></li>
</ul>
</div>
</div>
<section class="span9" id="main">
<!--Body content-->
</section>
</div>
</div>
<script type="text/javascript" src="lib/common/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="lib/common/js/ICanHaz.min.js"></script>
<script type="text/javascript" src="lib/common/js/modernizr-2.5.3.js"></script>
<script type="text/javascript" src="lib/common/js/urlHandler.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="lib/openlayers/OpenLayers.js"></script>
<script type="text/javascript" src="js/openlayer_image.js"></script>
</body>
</html>
poc/safeimage/js/form.js 0 → 100644
View file @ 67c6485f
/**
* NEXEDI
*/
(function($) {
var routes = {
"/service" : "displayForm",
"/service/:id" : "displayData",
"/image/:id" : "displayData",
"image/:id" : "displayData",
}
var router = function(e, d){
var $this = $(this);
$.each(routes, function(pattern, callback){
pattern = pattern.replace(/:\w+/g, '([^\/]+)');
var regex = new RegExp('^' + pattern + '$');
var result = regex.exec(d);
if (result) {
result.shift();
methods[callback].apply($this, result);
}
});
}
var methods = {
init: function() {
// Initialize slapos in this context
var $this = $(this);
// Bind to urlChange event
return this.each(function(){
$.subscribe("urlChange", function(e, d){
router.call($this, e, d);
});
$.subscribe("auth", function(e, d){
$(this).form("authenticate", d);
});
});
},
authenticate: function(data) {
for (var d in data) {
if (data.hasOwnProperty(d)) {
}
}
},
displayData: function(id){
console.log('displayData, id', id);
if (map !== undefined){
map.destroy();
}
zoomify_url = "image/" + id + "/";
//XXX look at the xml definition inside image folder
if (id == 'hs-2007-16-a-full_jpg') {
zoomify_width = 29566;
zoomify_height = 14321;
} else {
zoomify_width = 1277;
zoomify_height = 754;
}
$(this).form('render', 'image', {'image_id': id});
$(loadOpenLayerZoomedImage);
},
displayForm: function() {
console.log('form.displayForm');
$(this).form('render', 'form.new.instance');
var data = {};
$(this).find("form").submit(function(){
$(this).find('input').serializeArray().map(function(elem){
data[elem["name"]] = elem["value"];
});
$(this).form('displayAsking', data);
return false;
});
},
displayAsking: function(data){
var request = {
software_type: "type_provided_by_the_software",
slave: false,
status: "started",
parameter: {
Custom1: "one string",
Custom2: "one float",
Custom3: ["abc", "def"],
},
sla: {
computer_id: "COMP-0",
}
};
var redirect = function(){
$(this).form('render', 'auth', {
'host':'t139:12002/erp5/web_site_module/hosting/request-access-token',
'client_id': 'client',
'redirect':escape(window.location.href)
})
};
var statusCode = {
401: redirect
};
$.extend(request, data);
$(this).html("<p>Requesting a new instance "+request["title"]+" ...</p>")
.slapos('newInstance', request, function(data){
$(this).html(data);},
statusCode
);
},
render: function(template, data){
$(this).html(ich[template](data, true));
}
};
$.fn.form = function(method){
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.form' );
}
};
})(jQuery);
$("#main").form();
poc/safeimage/js/openlayer_image.js 0 → 100644
View file @ 67c6485f
var zoomify_width = 29566;
var zoomify_height = 14321;
var zoomify_url = "image/hs-2007-16-a-full_jpg/";
var map, zoomify;
function loadOpenLayerZoomedImage(){
console.log('iniside init of custom', zoomify_url)
/* First we initialize the zoomify pyramid (to get number of tiers) */
var zoomify = new OpenLayers.Layer.Zoomify( "Zoomify", zoomify_url,
new OpenLayers.Size( zoomify_width, zoomify_height ) );
/* Map with raster coordinates (pixels) from Zoomify image */
var options = {
maxExtent: new OpenLayers.Bounds(0, 0, zoomify_width, zoomify_height),
maxResolution: Math.pow(2, zoomify.numberOfTiers-1 ),
numZoomLevels: zoomify.numberOfTiers,
units: 'pixels'
};
map = new OpenLayers.Map("map", options);
map.addLayer(zoomify);
map.setBaseLayer(zoomify);
map.zoomToMaxExtent();
};
console.log('foo');
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7