Skip to content

Commit

Permalink
enable fixed image container height. Openseadragon still renders full
Browse files Browse the repository at this point in the history 
width
  • Loading branch information
@opaetzel
opaetzel committed Oct 1, 2018
1 parent d82b954 commit 4e9c272
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 104 deletions.
208 changes: 107 additions & 101 deletions Goobi/webapp/uii/includes/metseditor/metseditor_image.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,111 +88,117 @@
</ui:fragment>

<script type="text/javascript">
var configViewer = {
global: {
divId: 'mainImage',
useTiles: false,
footerHeight: 0,
adaptContainerHeight: true,
zoomSlider: "#zoomSlider",
zoomSliderHandle: '.zoomslider-handle',
zoomSliderLabel: '#zoomSliderLabel input',
persistZoom: false,
persistRotation: false,
persistenceId: "#{Metadaten.myProzess.id}",
},
image: {
mimeType: "image/jpeg",
tileSource: [#{ Metadaten.image.imageLevels }],
}
};

var worldConfig = {
controls: {
xAxis: {
rotateLeft: '#rotate-left-x',
rotateRight: '#rotate-right-x'
},
yAxis: {
rotateLeft: '#rotate-left-y',
rotateRight: '#rotate-right-y'
},
zAxis: {
rotateLeft: '#rotate-left-z',
rotateRight: '#rotate-right-z'
},
position: {
reset: '#reset-position'
},
zoom: {
resetZoom: '#reset#zoom'
}
},
container: {
id: "mainImage"
},
};
var mediaType = "#{Metadaten.image.type}";
// console.log("Media type = ", mediaType);
if (mediaType == "image") {
var viewImage = new ImageView.Image(configViewer);
viewImage.load()
.then(function (image) {
//TODO: Hide loader?
if (configViewer.global.persistZoom || configViewer.global.persistRotation) {
$("#imageFirst, #imageNext, #nextPage1, #afterNextPage, #imageLast").off("click", image.controls.persistence.storeLocation);
$("#imageFirst, #imageNext, #nextPage1, #afterNextPage, #imageLast").on("click", image.controls.persistence.storeLocation);
}
})
.catch(function (error) {
console.error('Error opening image', error);
$('#' + configViewer.global.divId).html('Failed to load image: "' + error + '"');
});
} else if (mediaType == "object") {
$("#" + worldConfig.container.id).css("height", 600 + "px");
$('#ajaxloader_image').show();
var world = WorldGenerator.create(worldConfig);
world.loadObject({
url: "#{Metadaten.image.objectUrl}",
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 },
size: 10,
material: {
color: 0x44bb33
},
focus: true,
onTick: function (object, time) {
if (object) {
// object.rotation.set(0, Math.PI/180 * time, 0);
var viewImage = null;
var world = null;
var imageLoadHandler = function() {
var configViewer = {
global: {
divId: 'mainImage',
useTiles: false,
footerHeight: 0,
adaptContainerHeight: true,
zoomSlider: "#zoomSlider",
zoomSliderHandle: '.zoomslider-handle',
zoomSliderLabel: '#zoomSliderLabel input',
persistZoom: false,
persistRotation: false,
persistenceId: "#{Metadaten.myProzess.id}",
},
image: {
mimeType: "image/jpeg",
tileSource: [#{ Metadaten.image.imageLevels }],
}
};

var worldConfig = {
controls: {
xAxis: {
rotateLeft: '#rotate-left-x',
rotateRight: '#rotate-right-x'
},
yAxis: {
rotateLeft: '#rotate-left-y',
rotateRight: '#rotate-right-y'
},
zAxis: {
rotateLeft: '#rotate-left-z',
rotateRight: '#rotate-right-z'
},
position: {
reset: '#reset-position'
},
zoom: {
resetZoom: '#reset#zoom'
}
},
container: {
id: "mainImage"
},
};
var mediaType = "#{Metadaten.image.type}";
// console.log("Media type = ", mediaType);
if (mediaType == "image") {
viewImage = new ImageView.Image(configViewer);
viewImage.load()
.then(function (image) {
//TODO: Hide loader?
if (configViewer.global.persistZoom || configViewer.global.persistRotation) {
$("#imageFirst, #imageNext, #nextPage1, #afterNextPage, #imageLast").off("click", image.controls.persistence.storeLocation);
$("#imageFirst, #imageNext, #nextPage1, #afterNextPage, #imageLast").on("click", image.controls.persistence.storeLocation);
}
})
.catch(function (error) {
console.error('Error opening image', error);
$('#' + configViewer.global.divId).html('Failed to load image: "' + error + '"');
});
} else if (mediaType == "object") {
$("#" + worldConfig.container.id).css("height", 600 + "px");
$('#ajaxloader_image').show();
world = WorldGenerator.create(worldConfig);
world.loadObject({
url: "#{Metadaten.image.objectUrl}",
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 },
size: 10,
material: {
color: 0x44bb33
},
focus: true,
onTick: function (object, time) {
if (object) {
// object.rotation.set(0, Math.PI/180 * time, 0);
}
}
}).then(function (object) {
$('#ajaxloader_image').fadeOut(2000);
console.log("loaded ", object);
world.render();
}).catch(function (error) {
$('#ajaxloader_image').fadeOut(2000);
console.err("failed to load: ", error);
})
} else if (mediaType == "x3dom") {
$("#" + worldConfig.container.id).css("height", 600 + "px");
var objectUrl = "#{Metadaten.image.objectUrl}";
$('#ajaxloader_image').show();
new X3DLoader().load($('#mainImage'), objectUrl,
function () {
$('#ajaxloader_image').fadeOut(2000);
console.log("loaded")
},
function () {
console.log("progress");
},
function (error) {
$('#ajaxloader_image').fadeOut(2000);
console.log("error", error);
})
}
}).then(function (object) {
$('#ajaxloader_image').fadeOut(2000);
console.log("loaded ", object);
world.render();
}).catch(function (error) {
$('#ajaxloader_image').fadeOut(2000);
console.err("failed to load: ", error);
})
} else if (mediaType == "x3dom") {
$("#" + worldConfig.container.id).css("height", 600 + "px");
var objectUrl = "#{Metadaten.image.objectUrl}";
$('#ajaxloader_image').show();
new X3DLoader().load($('#mainImage'), objectUrl,
function () {
$('#ajaxloader_image').fadeOut(2000);
console.log("loaded")
},
function () {
console.log("progress");
},
function (error) {
$('#ajaxloader_image').fadeOut(2000);
console.log("error", error);
})
}
};
document.addEventListener("globalDone", imageLoadHandler);
function freeJSResources(data) {
if (!data || data.status == 'begin') {
document.removeEventListener("globalDone", imageLoadHandler);
if (viewImage) {
console.log("closing OpenSeadragon viewer");
viewImage.close();
Expand Down
4 changes: 4 additions & 0 deletions Goobi/webapp/uii/template/css/intranda.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1200,6 +1200,10 @@ a.badge:focus {
transition: all .2s ease-in;
}

#metseditorImageImage {
overflow: hidden;
}

/* ------------- METS-Editor --------------- */
#treeform {
padding: 5px;
Expand Down
17 changes: 17 additions & 0 deletions Goobi/webapp/uii/template/js/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,8 +268,16 @@ function resizeContent() {
var windowHeight = $( window ).outerHeight() - navigationHeight;
var contentAreaHeight = $( '#contentArea' ).outerHeight();
var metseditorImageContainerHeight = $( '#metseditorImage' ).outerHeight();
// image container dimensions
var metseditorImageImage = $( '#metseditorImageImage' );
var imageNavigattionHeight = $( '.image-navigation' ).outerHeight();
var formularOrdnerHeight = $( '#formularOrdner' ).outerHeight() + 40;
var newImageHeight = windowHeight - imageNavigattionHeight - formularOrdnerHeight;


$( '#metseditorImage' ).css( 'height', windowHeight );
metseditorImageImage.css( 'height', newImageHeight );
$( '#mainImage').css('height', newImageHeight);

if ( contentAreaHeight > windowHeight ) {
$( '#contentArea' ).css( 'height', windowHeight );
Expand Down Expand Up @@ -359,6 +367,10 @@ $(document).ready(function () {

enlargeImageSize( imgContainerWidth );
} );
var event = document.createEvent("HTMLEvents");
event.initEvent("globalDone", true, true);
event.eventName = "globalDone";
document.dispatchEvent(event);
break;
}
});
Expand Down Expand Up @@ -1021,6 +1033,11 @@ $(document).ready(function () {
if ($("body").attr("data-layout-sidebar") == "fixed") {
sidebarFixed();
}

var event = document.createEvent("HTMLEvents");
event.initEvent("globalDone", true, true);
event.eventName = "globalDone";
document.dispatchEvent(event);
});

$.fn.scrollBottom = function () {
Expand Down
12 changes: 9 additions & 3 deletions Goobi/webapp/uii/template/js/imageView/imageView.image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ var ImageView = ( function() {
var minAspectRatio = Number.MAX_VALUE;
for ( var j=0; j<tileSources.length; j++) {
var tileSource = tileSources[j];
console.log(tileSource);
minWidth = Math.min(minWidth, tileSource.width);
minHeight = Math.min(minHeight, tileSource.height);
minAspectRatio = Math.min(minAspectRatio, tileSource.aspectRatio);
Expand All @@ -134,12 +135,14 @@ var ImageView = ( function() {
var x = 0;
for ( var i=0; i<tileSources.length; i++) {
var tileSource = tileSources[i];
console.log(tileSource.aspectRatio, minAspectRatio);
tileSources[i] = {
tileSource: tileSource,
width: tileSource.aspectRatio/minAspectRatio,
width: 1.0,
x : x,
y: 0,
}
console.log(tileSources[i]);
x += tileSources[i].width;
}
var pr = image.loadImage(tileSources);
Expand All @@ -153,13 +156,14 @@ var ImageView = ( function() {
console.log( 'Loading image with tilesource: ', tileSources );
}

this.loadFooter();
this.loadFooter();
var $div = $("#" + this.config.global.divId);
var imageHeight = this.config.image.originalImageHeight;
var maxZoomLevel = this.config.global.maxZoomLevel
if(this.config.image.originalImageWidth && $div.width() > 0) {
maxZoomLevel = this.config.global.maxZoomLevel*this.config.image.originalImageWidth/$div.width();
}

var osConfig = {
tileSources: tileSources,
id: this.config.global.divId,
Expand All @@ -183,6 +187,7 @@ var ImageView = ( function() {
alwaysBlend: false,
imageLoaderLimit: this.config.global.maxParallelImageLoads,
loadTilesWithAjax: true,
height: $div.parents("#metseditorImageImage").height(),
ajaxHeaders: {
"token" : this.config.global.webApiToken
},
Expand All @@ -195,6 +200,7 @@ var ImageView = ( function() {
}

this.viewer = new OpenSeadragon( osConfig );

var result = Q.defer();

this.observables = _createObservables(window, this);
Expand Down

0 comments on commit 4e9c272

Please sign in to comment.