Complete example viewer for NLS

klokan commented 9 years ago

Let's prepare a complete example, hosted on labs and downloadable as .zip - with all the requested features

permalink
overview window
print
sample CSS customisation

klokan commented 9 years ago

From @daliborjanak: I prepared full example. It's available at http://labs.klokantech.com/nls/iiifviewer/ and downloadable at http://labs.klokantech.com/nls/iiifviewer/nls-iiifviewer.zip .

There is function printDoc() which will print the document (In my example starts to run by pressing button in top-right corner).

I customized look of overview map. Css is embed in html, you cen move it to file with other css. ol3.css is not necessary.

I also added nls logo to pdf document.

Let me know if it's ok.

klokan commented 9 years ago

FROM:C.Fleet@nls.uk Great, many thanks indeed Dalibor - at first glance, this looks great and just as we were hoping for!

I've downloaded it and it works fine just out of the box:

http://geo.nls.uk/maps/dev/iiifviewer/index.html

and also changing the URL to the NLS IIPImage

http://geo.nls.uk/maps/dev/iiifviewer/207index.html

...when I put it with the NLS CSS at

file:///N:/dev/iiifviewer/207_iiifviewer.html

...it gives me a Javascript 'Error: Invalid element' in line 42 of ol-iiifviewer-pdf.js in Firebug. I tried switching to "http://klokantech.github.io/iiifviewer/iiifviewer-pdf.js" and it is the same.

I realise this must be in the NLS CSS or how I have put your viewer inside the NLS header and footer, so don't feel you need to fix it - your job was exactly as you have done it, to provide a clean and working viewer... but if you had any quick ideas, I'd be very grateful - I will ask Tony too.

Many thanks,

Chris

klokan commented 9 years ago

From @daliborjanak: I repired it: http://labs.klokantech.com/nls/iiifviewer/iiifviewer.html It looks great. I also lunched printing (left bottom menu item). I changed new IiifViewer('viewer', url, function() { in page to new IiifViewer('map', url, function() (as first parameter of IiifViewer is name element when map is displayed)

You can download full example at http://labs.klokantech.com/nls/iiifviewer/iiifviewer-in-page.zip

klokan commented 9 years ago

FROM:C.Fleet@nls.uk Wow, you're a star, Dalibor!

Thanks ever so much - all done and implemented, and yes - it looks really great!

klokan commented 9 years ago

Tasks to be finished on the complete demo for NLS:

[x] Fix print issue in IE - reported in #2
[x] Print layout improvement - should align the image to the bottom left. NLS logo will be therefore on a white background (header) - next to it we placed vertically centred html title (in bold dark blue) and complete URL (window.location.href).
[ ] If easy to do, set the minZoom / maxResolution on the OverviewMap's View - to prevent small dot visible when an image is displayed. Related ol3 PR: https://github.com/openlayers/ol3/pull/2079
[x] Show a message for IE < 9 - that browser is not supported (probably via conditional comment as in http://search.kartenportal.ch/.

daliborjanak commented 9 years ago

I tried to implement all. It works in IE11. I hope it will works on NLS servers (on labs it have still CORS problem in oldest IE but different then reported one).

Peter's point 3 is impossible yet (maybe in future with next releases of ol3).

Examples: http://labs.klokantech.com/nls/iiifviewer/ Downloadable: http://labs.klokantech.com/nls/iiifviewer/nls-iiifviewer.zip

klokan commented 9 years ago

Thanks @daliborjanak. I am happy with the result now. I hope Chris is as well... No problem with the OverviewMap for now.

klokan commented 9 years ago

browseralert could have just "Upgrade to a newer browser" without reference to Google Chrome Frame (which has been discontinued by Google recently). But this can be changed on the NLS side in HTML as well.

ghost commented 9 years ago

FROM:C.Fleet@nls.uk Dalibor,

Many thanks indeed for your work on this that looks really good to me and fine at home with IE.11 (as well as Chrome and FF). Will test out first thing tomorrow in NLS and let you know.

Not a big deal, but if we wanted to make the white footer with the NLS logo shorter (ie. less high so the map occupies more of the page height) is this possible? I couldn't see how in the printDoc() code so presumably in ol-iiifviewer-pdf.js ?

Chris

ghost commented 9 years ago

FROM:C.Fleet@nls.uk Hello Dalibor and Petr,

Good news - the new viewer generates PDFs fine on the NLS site in IE, FF, and Chrome: http://geo.nls.uk/maps/dev/iiifviewer/index.html

Many thanks again for your work on this - the overview window looks nicer too as semi-transparent.

I thought we also needed +/- zoom controls, so added this in - let me know if you think this will be a problem.

A quick word of advice on how we make the white footer with the NLS logo shorter would be really appreciated. There are some in NLS who do not think we need a logo, and so we may just want to implement a PDF map filling a page if this is easier than just making the white footer strip smaller. But making the white strip half the size would be our preference.

klokan commented 9 years ago

The size of the white strip is equal to the size of the white header you have on the website. If we remove it the PDF is going to be more flat and part of the map is going to be covered. Do you want to do that?

By removing the logo you are breaking the balanced layout (suddenly the texts are floating with strange left gap and the white stripe feels even bigger then before).

BTW There is over 45 working hours tracked on the nls2015 project by now - let's discuss the invoicing at info@klokantech.com.

ghost commented 9 years ago

FROM:C.Fleet@nls.uk Petr,

Thanks for your advice on this.

We are very happy with the overall implementation, but it would be good to finalise the PDF style and it should hopefully be very quick to do.

Our main preference is for a map that fills as much as possible of the area of a landscape A4, like the first draft last week that looked like this ( we can remove the logo if necessary as it doesn't look good like this)

[cid:image002.jpg@01D04ADC.4EE81EC0]

This was with the same header and footer size as last week, so I hope this can be implemented?

If the text with a URL cannot fit into the white space at the bottom, we will miss that out too - the main requirement is for users to get a screen print, and the current style has about 20% of the bottom as white space:

[cid:image006.jpg@01D04ADC.4EE81EC0]

It looks as if the white base were just half the size, the logo and text might still fit in - but I realise it depends upon specific screen aspect ratios. If not, please just fill as much as you can of the page with map and include the URL if possible.

daliborjanak commented 9 years ago

Ok, if i understand it well. I centered logo bottom with labels and map is printed over it (so if is map bigger then covers logo - map is always dominant). All page is always A4 landscape.

I also added zoom controls. Lets see: http://labs.klokantech.com/nls/iiifviewer/ and http://labs.klokantech.com/nls/iiifviewer/nls-iiifviewer.zip

klokan commented 9 years ago

Format of page must be "auto" - with fixed implementation of bug #8

klokan commented 9 years ago

FROM:C.Fleet@nls.uk originally posted at #8 Dalibor,

I'm extremely grateful for this further work, which is even better functionality than expected for the PDF output! We now have the best of both worlds - a logo and text, but a way of filling the page with the map too by altering the aspect ratio - perfect, thankyou!

I have implemented this in NLS at: http://geo.nls.uk/maps/dev/iiifviewer/index.html

I hate saying there is something else... but now our Web Administrator, Tony Stuart, does not like the use of the inline style CSS, ie. this section

      .ol-overviewmap {
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #fff;
      }
      .ol-overviewmap .ol-overviewmap-map {
        height: 150px;
        margin: 2px;
        width: 150px;
        display: inline-block;
      }
      .ol-overviewmap-box {border: 1px solid #ee0000;}
      .ol-overviewmap button{display: none;}
      .ol-zoom button{display:block;margin:1px;padding:0;color:#fff;font-size:20px;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#7b98bc;background-color:#003;border:none;}
      .ol-zoom button:hover{cursor: pointer;}
      .ol-zoom{position:absolute;}
      .ol-zoom{position: absolute; top: 100px; left:0;}
      .browseralert{position: absolute; top: 125px; left: 10px; display: block;}

When we move this to a separate CSS, the printing still works fine in Chrome and FF, but not in IE. Tony has asked me to ask you about this, as he says using inline CSS is bad practice, it doesn't cache and is best avoided.

If you think nothing can be done very easily, please just say so and I will tell him. But he is not keen to implement the style within the HTML if possible.

daliborjanak commented 9 years ago

Sorry about delay. I was out of office for one week. I fix issue #8 now and I also discussed it with Peter via Skype.

I moved css to separate file see: http://labs.klokantech.com/nls/iiifviewer/ and http://labs.klokantech.com/nls/iiifviewer/nls-iiifviewer.zip and tested. It works in IE 9 and latest. Have you got still problems? Let me know.

ghost commented 9 years ago

FROM:nls Many thanks Dalibor, this seems to work fine now in IE too - much appreciated.

Just to let you know, I have decided to remove the default Permalink, as most people use the Back button in their browsers to return to the previous page on our website, but created a 'Link to this view/Add Location to URL' function:

function addLocationToURL() { IIIF.addPermalink({'accuracy': 0, 'geoFormat': true, 'addToEnd': 'layers=BT' }); var centre = IIIF.getMap().getView().getCenter(); var centre1 = parseInt(centre[0].toFixed(0)); var centre2 = parseInt(centre[1].toFixed(0)); IIIF.getMap().getView().setCenter([centre1,centre2]); }

to add the Permalink.

http://geo.nls.uk/maps/dev/iiifviewer/

Its not elegant, but seems to work as our current one does, and I'm very keen to not keep asking you to do more, but finish this!

BTW, you both might be interested in this PHP script we discovered yesterday on Github https://github.com/cs278/nls-download that allows our full resolution images to be scraped. I know you always said this was possible, Petr, and its not a big problem for NLS, but if you think there is anything we can do other than changing the baseURL if the IIPImage server it would be good to know. I've sent him a stern e-mail saying we are not happy and he should delete it...

klokan commented 9 years ago

It is not clear from last comment what task we are suppose to do. It seems the modification of Permalink you have made yourself runs and is OK.

I'am closing this ticket "Complete example viewer for NLS #7". Thanks @daliborjanak for the work on this!

Regarding the note about scrapping images: People from WikiMedia Commons are doing the same for many cultural heritage institutions including NLS. If you want to sell the high-res copies for print and protect the zoomable online version then you should add a visible watermark to the tiles. IIPImage has direct support for watermarking - it is a single config option. If you need assistance (or discuss this further) please create a separate ticket for this issue.

klokan commented 8 years ago

@daliborjanak has provided upgraded sample with IIIFViewer 1.1.

Feedback from Chris Fleet on this would be great.

ghost commented 8 years ago

FROM:C.Fleet@nls.uk Great, many thanks Petr and Dalibor!

I am sorry, please can your send a URL to the sample?

When I log on to the clientportal at your http://clientportal.klokantech.com/iiifviewer/issues/7/, there is nothing there and I could not see it at https://github.com/klokantech/iiifviewer/issues/7 either.

daliborjanak commented 8 years ago

I sent it to you in zip via email. There is link: http://labs.klokantech.com/nls/viewer/ and download: http://labs.klokantech.com/nls/viewer/nlsviewer.zip

It contains new released version of Iiifviewer (1.1) with fixes, retina support and new openlayers (3.11).

ghost commented 8 years ago

FROM:C.Fleet@nls.uk Hello Dalibor,

This is excellent, and I'm really sorry I must have missed you sending this by e-mail.

On the whole this works fine and works too fine with the new NLS iiifserver in Chrome and Firefox.

The only minor thing is that SHIFT and drag with the mouse to zoom to a specific area doesn't show the bounding box - perhaps a small css issue?

We have not managed to get it to work in Internet Explorer. I am using IE.11 but tried earlier versions without success.

ghost commented 8 years ago

FROM:C.Fleet@nls.uk Hello Petr / Dalibor,

I don't think I heard from you after this last query in February, and the example IIIF viewer you prepared at: http://labs.klokantech.com/nls/viewer/ , whilst excellent, is not quite perfect!

We cannot get it to work in Internet Explorer, and SHIFT and drag with the mouse to zoom to a specific area doesn't show the bounding box.

Is it possible for you to fix these things? We are happy to cover your development costs work as I hope they are quick, but please let me know if you think these problems are with the NLS css or something.

klokan commented 8 years ago

We may look at it within the next 14 days, when the company holidays are over.

Forgotten probably because it is a discussion on a closed ticket going over a year back... sorry.

daliborjanak commented 8 years ago

http://labs.klokantech.com/nls/viewer/ I fix the border of a rectangle. The class of rectangle was not styled I add it to HTML but it will be better to add code .ol-dragzoom{border: 2px solid blue;} to CSS file with viewer's styles.

Internet Explorer (in my today's tests): IE11 - works correctly IE10, IE9 - it works with small bug with missing areas (we will try to reproduce and fix it in issue #17 ) IE8 - is not supported but the viewer displays message about old browser

ghost commented 8 years ago

FROM:C.Fleet@nls.uk Hi Dalibor,

Many thanks for doing this. When I looked straight away on Monday, it all worked in Chrome and Firefox and I saw you had indeed fixed the rectangle problem.

Then something changed and from Tuesday onwards no map displays at all in any browser. Did you change something else after sending this message or is it working for you at http://labs.klokantech.com/nls/viewer/

klokan commented 8 years ago

It seems your server does not provide CORS anymore - this is required to retrieve the info.json from your server.

Have you made an upgrade of the IIIFServer recently?

Related error message in the console: XMLHttpRequest cannot load http://maps.nls.uk/imgsrv/iipsrv.fcgi?iiif=/207.jp2/info.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://labs.klokantech.com' is therefore not allowed access.

On Fri, Jul 29, 2016 at 3:27 PM, Client Portal notifications@github.com wrote:

FROM:C.Fleet@nls.uk Hi Dalibor,

Many thanks for doing this. When I looked straight away on Monday, it all worked in Chrome and Firefox and I saw you had indeed fixed the rectangle problem.

Then something changed and from Tuesday onwards no map displays at all in any browser. Did you change something else after sending this message or is it working for you at http://labs.klokantech.com/nls/viewer/

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/klokantech/iiifviewer/issues/7#issuecomment-236179754, or mute the thread https://github.com/notifications/unsubscribe-auth/AADnlCPepwKguqwT80F5WV0QxhWcjWbQks5qaf-mgaJpZM4Dg3v3 .

Petr Pridal, Ph.D. CEO

Klokan Technologies GmbH Hofnerstrasse 98, 6314 Unterageri, Switzerland Tel: +41 (0)41 511 26 12 Email: info@klokantech.com Web: http://www.klokantech.com/

daliborjanak commented 8 years ago

True, CORS problem. We are using plugin in chrome for development purposes. Look at: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog

klokan commented 8 years ago

Chris, have you made an upgrade of the IIIFServer recently?

CORS headers are set by the IIIFServer automatically, otherwise the IIIF endpoint is not valid.

ghost commented 8 years ago

FROM:C.Fleet@nls.uk Hi Dalibor,

Many thanks for your messages and yes, you are quite right, this is a CORS problem at our end. Your Chrome plugin was very helpful and it all worked fine once that was enabled, but Tony has now allowed CORS on that server so http://labs.klokantech.com/nls/viewer/ should work for you too.

ghost commented 8 years ago

FROM:C.Fleet@nls.uk PS. Dalibor, I should have said that your viewer now works fine, and you have fixed these problems with the drag-zoom box and it works fine in IE too. So many thanks indeed for that!

klokan commented 8 years ago

Testing the new IIIFServer is possible with watermark without a need to put in the license key. Details related to payments to be discussed at info@klokantech.com (I am submitting an email there).

This public IIIFViewer ticket is closed.

Chris, if you discover any new issue with the IIIFViewer, please create a new ticket.

klokantech / iiifviewer

Complete example viewer for NLS #7