Embed In Tumblr?

[maxrottersman]

Is it possible to embed OpenSeaDragon in Tumblr. I tried this but didn't work. Ironically, I've never used Tumblr; however, think it would be a cool way to show these things off.

<p><div id="openseadragon1" style="width: 800px; height: 600px;"></div><script src="http://maxotics.com/wp-content/plugins/zoom-openseadragon/js/openseadragon.min.js"></script><script type="text/javascript">
    var viewer = OpenSeadragon({
        id: "openseadragon1",
        prefixUrl: "http://maxotics.com/wp-content/plugins/zoom-openseadragon/images/",
        tileSources: "http://maxotics.com/imagezooms/bricks_dzi.dzi"
    });
</script></p>

[iangilman]

I don't know what Tumblr's rules are about embedding JavaScript... did they allow your code to pass through unscathed? If so, the next issue is cross-site restrictions... does maxotics.com have CORS set up so you can access bricks_dzi.dzi from a different site? If not, and if you can't set it up, you'll need to pull the info out of that dzi file and interpret it directly in the code. Here's an example of how to do that:

http://codepen.io/iangilman/pen/gpejpJ

Another option, especially if Tumblr doesn't like you putting JavaScript in, is to build your viewer in maxotics.com and then embed it in your Tumblr with an iframe.

[maxrottersman]

I tried creating a Tumblr post with your code, same result, a "gray box" where the image should be. I believe the Javascript is working fine but Tumblr interfers with loading external images, unless you use a simple <img src> link. The iframe approach didn't work either. THANKS for your effort!

[iangilman]

Sorry to hear that! Sure looks like it's possible to use both iframes and JavaScript in Tumblr:

http://word-association.tumblr.com/post/90361184916/embedding-iframes-in-tumblr-posts

http://stackoverflow.com/questions/20552391/javascript-on-individual-tumblr-post

Perhaps there's just something not quite right. Can you post a link to your tumblr page so I can take a look?

[maxrottersman]

Okay, think I'm getting there. The iFrame will be USABLE, if I can't get the straight method to work. For the iFrame I have

<p>
<iframe src="http://maxotics.com/a-test/" width="520" height="600" marginwidth="0" 
marginheight="0" frameborder="no" scrolling="no" style="border-style: solid;  // border style  
 border-color: #333;   // border color        border-width: 2px;    // border width        background: #FFF;     // background color">
</iframe>
</p>

The straight-forward OpenSeadragonr version shows the buttons, but no image, so there may be hope. Interesting that these posts did not work in preview mode. Anyway, my Tumblr is at: http://maxotics.tumblr.com/ Again, thanks for your help, Iangilman!

This is my last attempt at the raw method, going back to your original example. I have OpenSeadragon in my Tumblr template.

<p>
<script>
// Change this to the path to your "_files" directory on the remote server. 
var dziFilesUrl = 'http://maxotics.com/imagezooms/bricks_dzi/';

// Change this to the contents of the .dzi file from your server. 
var dziData = '&lt;?xml version="1.0" encoding="utf-8"?&gt;';

// This converts the XML into a DZI tile source specification object that OpenSeadragon understands. 
var tileSourceFromData = function(data, filesUrl) {
  var $xml = $($.parseXML(data));
  var $image = $xml.find('Image');
  var $size = $xml.find('Size');

  var dzi = {
    Image: {
      xmlns: $image.attr('xmlns'),
      Url: filesUrl,
      Format: $image.attr('Format'),
      Overlap: $image.attr('Overlap'),
      TileSize: $image.attr('TileSize'),
      Size: {
        Height: $size.attr('Height'),
        Width: $size.attr('Width')
      }
    }
  };  

  console.log(dzi);
  return dzi;
};

// This creates the actual viewer. 
var viewer = OpenSeadragon({
  id: 'openseadragon1',
  prefixUrl: '//openseadragon.github.io/openseadragon/images/',
  tileSources: tileSourceFromData(dziData, dziFilesUrl)
});
</script></p>  

[iangilman]

Okay, definitely looks like the JavaScript is running fine on Tumblr, it's just a matter of sorting out the code. The issue I see above is your dziData; the angle brackets have been escaped (when they shouldn't be) and you don't have the whole file contents. It should be like so:

var dziData = '<?xml version="1.0" encoding="UTF-8"?><Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"><Size Height="14615" Width="20462" /></Image>';

Give that a try!

[maxrottersman]

Used CDATA to get that in there. Still not working. Not sure what you mean about the "change contents to what's on your server" way above. For example, does dziFilesURL point to the folder of the files, or the dzi file? Sorry, think we're close. This is what I have at moment

<p>
<script>
<![CDATA[
// Change this to the path to your "_files" directory on the remote server. 
var dziFilesUrl = 'http://maxotics.com/imagezooms/bricks_dzi/';

// Change this to the contents of the .dzi file from your server. 

var dziData = '<?xml version="1.0" encoding="UTF-8"?><Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"><Size Height="14615" Width="20462" />';


// This converts the XML into a DZI tile source specification object that OpenSeadragon understands. 
var tileSourceFromData = function(data, filesUrl) {
  var $xml = $($.parseXML(data));
  var $image = $xml.find('Image');
  var $size = $xml.find('Size');

  var dzi = {
    Image: {
      xmlns: $image.attr('xmlns'),
      Url: filesUrl,
      Format: $image.attr('Format'),
      Overlap: $image.attr('Overlap'),
      TileSize: $image.attr('TileSize'),
      Size: {
        Height: $size.attr('Height'),
        Width: $size.attr('Width')
      }
    }
  };  

  console.log(dzi);
  return dzi;
};

// This creates the actual viewer. 
var viewer = OpenSeadragon({
  id: 'openseadragon1',
  prefixUrl: '//openseadragon.github.io/openseadragon/images/',
  tileSources: tileSourceFromData(dziData, dziFilesUrl)
});
]]>
</script></p>

[iangilman]

What happens if you remove the CDATA tag? Seems like you probably don't want it. Other than that your code looks good.

The dziFilesUrl should point to the folder of image files, and dziData should be the contents of:

http://maxotics.com/imagezooms/bricks_dzi.dzi

(but with the return characters removed so it's all a single line)

[maxrottersman]

If I remove the CDATA tag it translates < into < code. Anyway, put in contents from DZI file and didn't work. Also tried you code, and again, Tumble translates the < into <. Stuck again.

[iangilman]

Well, if the problem is just dealing with the <, you don't actually need the raw xml... you can copy its data directly into the dzi configuration object. The only reason I suggested the xml solution is to make it easier for you to update. Anyway, if you manually copy the bits of info out of the xml and put them in the code, you end up with something like this:

<p>
<script>
// The path to your "_files" directory on the remote server. 
var dziFilesUrl = 'http://maxotics.com/imagezooms/bricks_dzi/';

// Info copied out of http://maxotics.com/imagezooms/bricks_dzi.dzi
var dzi = {
  Image: {
    xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
    Url: dziFilesUrl,
    Format: 'jpeg',
    Overlap: 1,
    TileSize: 254,
    Size: {
      Height: 14615,
      Width: 20462
    }
  }
};  

// This creates the actual viewer. 
var viewer = OpenSeadragon({
  id: 'openseadragon1',
  prefixUrl: '//openseadragon.github.io/openseadragon/images/',
  tileSources: dzi
});
</script></p>

...which hopefully should work!

[maxrottersman]

This is what I have for your code trying to get it to work, still no luck. Tried both your original sample, and what I have. Let me know if you're out of ideas Ian and I'll take it up on the Tumblr forum.

<p><div id="openseadragon1"></div>
<script type="text/javascript">
// Change this to the path to your "_files" directory on the remote server. 
var dziFilesUrl = '//openseadragon.github.io/example-images/duomo/duomo_files/';

// Change this to the contents of the .dzi file from your server. 
// Info copied out of http://maxotics.com/imagezooms/bricks_dzi.dzi
var dzi = {
  Image: {
    xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
    Url: dziFilesUrl,
    Format: 'jpeg',
    Overlap: 1,
    TileSize: 254,
    Size: {
      Height: 14615,
      Width: 20462
    }
  }
};  


// This converts the XML into a DZI tile source specification object that OpenSeadragon understands. 
var tileSourceFromData = function(data, filesUrl) {
  var $xml = $($.parseXML(data));
  var $image = $xml.find('Image');
  var $size = $xml.find('Size');

  var dzi = {
    Image: {
      xmlns: $image.attr('xmlns'),
      Url: filesUrl,
      Format: $image.attr('Format'),
      Overlap: $image.attr('Overlap'),
      TileSize: $image.attr('TileSize'),
      Size: {
        Height: $size.attr('Height'),
        Width: $size.attr('Width')
      }
    }
  };  

  console.log(dzi);
  return dzi;
};

// This creates the actual viewer. 
var viewer = OpenSeadragon({
  id: 'openseadragon1',
  prefixUrl: '//openseadragon.github.io/openseadragon/images/',
  tileSources: tileSourceFromData(dziData, dziFilesUrl)
});
</script></p>

[iangilman]

Okay, I just put my code in Codepen:

http://codepen.io/iangilman/pen/mEaGmN

...and found that the files URL was wrong... it should be:

var dziFilesUrl = 'http://maxotics.com/imagezooms/bricks_dzi_files/';

Besides that, my code works.

By the way, now that you have a number of attempts on your Tumblr you now have three divs with the id openseadragon1... you need to make sure each one of those is unique (both the div and the reference to it in the JavaScript). Maybe calling them something like openseadragon08112016 or something will help keep them straight.

The other thing I'm seeing when I look at the developer console on your Tumblr is a couple of errors about OpenSeadragon not being defined yet... it doesn't seem to be a problem with the code at the top, but it might be worth looking at the sequencing of what gets loaded when.

[maxrottersman]

If only my bonehead typo fixed it :) I deleted some posts and made the div unique. I looked into the code and noticed that it wasn't including OpenSeadragon in my tumblr account, so I added it again to the post, in-line. I also changed themes to clean out anything that might interfere. Looks like it's doing something, but still blank. Thank you again for hanging in here!

<p><p><script src="http://maxotics.com/wp-content/plugins/zoom-openseadragon/js/openseadragon.min.js" type="text/javascript"></script><script>

// Change this to the path to your "_files" directory on the remote server. var dziFilesUrl = '//maxotics.com/imagezooms/bricks_dzi_files/';

// Change this to the contents of the .dzi file from your server. 
// Info copied out of http://maxotics.com/imagezooms/bricks_dzi.dzi
var dzi = {
  Image: {
    xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
    Url: dziFilesUrl,
    Format: 'jpeg',
    Overlap: 1,
    TileSize: 254,
    Size: {
      Height: 14615,
      Width: 20462
    }
  }
};  

// This converts the XML into a DZI tile source specification object that OpenSeadragon understands. 
var tileSourceFromData = function(data, filesUrl) {
  var $xml = $($.parseXML(data));
  var $image = $xml.find('Image');
  var $size = $xml.find('Size');

  var dzi = {
    Image: {
      xmlns: $image.attr('xmlns'),
      Url: filesUrl,
      Format: $image.attr('Format'),
      Overlap: $image.attr('Overlap'),
      TileSize: $image.attr('TileSize'),
      Size: {
        Height: $size.attr('Height'),
        Width: $size.attr('Width')
      }
    }
  };  
  console.log(dzi);
  return dzi;
};

// This creates the actual viewer. 
var viewer = OpenSeadragon({
  id: 'openseadragon20160811',
  prefixUrl: '//maxotics.com/wp-content/plugins/zoom-openseadragon/images/',
  tileSources: tileSourceFromData(dziData, dziFilesUrl)
});
</script></p><div id="openseadragon20160811" style="width:100%; height: 800px"></div></p>

[iangilman]

Getting there... you've just got a bit of a mash-up of different versions. This should work:

<p><p><script src="http://maxotics.com/wp-content/plugins/zoom-openseadragon/js/openseadragon.min.js" type="text/javascript"></script><script>

// Change this to the path to your "_files" directory on the remote server. 
var dziFilesUrl = '//maxotics.com/imagezooms/bricks_dzi_files/';

// Change this to the contents of the .dzi file from your server. 
// Info copied out of http://maxotics.com/imagezooms/bricks_dzi.dzi
var dzi = {
  Image: {
    xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
    Url: dziFilesUrl,
    Format: 'jpeg',
    Overlap: 1,
    TileSize: 254,
    Size: {
      Height: 14615,
      Width: 20462
    }
  }
};  

// This creates the actual viewer. 
var viewer = OpenSeadragon({
  id: 'openseadragon20160811',
  prefixUrl: '//maxotics.com/wp-content/plugins/zoom-openseadragon/images/',
  tileSources: dzi
});
</script></p><div id="openseadragon20160811" style="width:100%; height: 800px"></div></p>

[maxrottersman]

Sorry Ian, tried that, then played around with some different ideas, templates, still no dice.

[iangilman]

Oh! It's complaining because we're trying to access the div before it exists... we just have to flip the order like so:

<div id="openseadragon20160811" style="width:100%; height: 800px"></div>
<script src="http://maxotics.com/wp-content/plugins/zoom-openseadragon/js/openseadragon.min.js" type="text/javascript"></script>
<script>

// Change this to the path to your "_files" directory on the remote server. 
var dziFilesUrl = '//maxotics.com/imagezooms/bricks_dzi_files/';

// Change this to the contents of the .dzi file from your server. 
// Info copied out of http://maxotics.com/imagezooms/bricks_dzi.dzi
var dzi = {
  Image: {
    xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
    Url: dziFilesUrl,
    Format: 'jpeg',
    Overlap: 1,
    TileSize: 254,
    Size: {
      Height: 14615,
      Width: 20462
    }
  }
};  

// This creates the actual viewer. 
var viewer = OpenSeadragon({
  id: 'openseadragon20160811',
  prefixUrl: '//maxotics.com/wp-content/plugins/zoom-openseadragon/images/',
  tileSources: dzi
});
</script>

(I also removed a couple of paragraph tags that seemed unnecessary).

[maxrottersman]

Ian, YOU THE MAN! It's working! "Quit" is apparently not in your vocabulary.

[iangilman]

Awesome! I had faith we'd get it sorted out :)

[maxrottersman]

I can't get code into this post. Arggh. Anyway, my daughter Alice came up with a partial fix for how Tumblr shows gray boxes in dashboard mode for Openseadragon. You can read it at the end of my blog post here:

Openseadragon maxotics blog post

[iangilman]

Nice! Thank you for sharing the info! I've tweeted the link:

https://twitter.com/openseadragon/status/773635575635062785

Another thought for dashboard view is that you could include an img tag with a thumbnail for the image, so people know what they'll be zooming into. You could custom create that thumbnail, or you could pick something out of the tile set, like so:

http://maxotics.com/imagezooms/Sunflowercool_dzi_files/9/0_0.jpeg

[maxrottersman]

Thanks Ian, I'll try that next time I post.  After 4 months I finally have a robotic "digitiler" working.  I hope to start taking "real" photos tomorrow.  It should really show off Openseadragon!  
Any thoughts since last we spoke about posting Openseadragon in Facebook.  I tried the FB iFrame app but gave up quickly.  
Also, do you know of anyone who has a hook into Openseadragon that gets the files from a zip file?  We're up to 15,000 plus tiles in our shots.
Hope you're well!
Thanks again for all your help!Max

[maxrottersman]

Hi Ian,Also forgot to mention we're building a web site for the images at Digitiler.com  Mark is going to make something really nifty eventually.  For now, it's a WP mod.Thanks!Max

[iangilman]

Exciting! I look forward to seeing digitiler.com in action.

I haven't had any more thoughts about Facebook. Let me know if you make it work!

Regarding having the entire image in a single file, there are ways to do it, but I believe it requires a little bit of intelligence on the server. Here's one project that's underway on the topic, by @eriksjolund:

#944

There are also a number of servers that support the IIIF format (which OpenSeadragon can read). Take a look at the servers section on this page:

http://iiif.io/apps-demos/

Some of them support using a single JPEG2000 image and they do the tiling on the fly.

[maxrottersman]

Hi Ian
I spent a few days, real days, trying to get IIPImage server to work on AWS instances.  Ruven has been helpful (is on vacation now), but it doesn't bother him that there' no simple install for someone who isn't a server expert ;)  I did get it working finally, but not with OSD--the problem may be trivial?.  Anyway, while I'm here, what do YOU think is the best single-file image server solution out there?  Right now, I'm inclined to create an unzip utility on the server because what we have works very well, far as I can see.  Guess, I'm a bit dis-heartened about the image server thing.  That said, have learned a lot and am probably close to getting over the hump with it.
Anyway, yes, we'll update the code if it's old.  GIT is setup for the site, btw.  Need to look into it, talk to Mark.  I also wanted to do two things with OSD that though I've researched, am still a bit foggy on.

1. I want to put text annotations next to parts of the image based on the zoom level.  I see the example, but not one that makes it easy to see the "real world" use.  For example, if I get a cook person to do something, I'd want one annotation next to the icing say, and another when they zoom into the cake, say.2. I want to do zoom where first it's zooming outside of the house, and then if you go to the window, you zoom into the inside.  
   If I've missed anything on the above two please send me a link.
   Nothing urgent on these, am swamped a bit at the moment, just wanted to let you know where we're at!
   Best,Max  

[iangilman]

I think the work on single file solutions is interesting, but for my own work I've always just gone with the multi-file solution (like you started with). I agree that moving the files around can be a pain, but I like the simplicity of it all... everything is where you expect it to be.

Zipping it all up and transferring it and then unzipping on the server is probably a good optimization if you can get it to work.

Regarding annotations, you're saying you want them to come and go depending on your zoom level? OSD doesn't have anything built in for that, but it should be fairly easy with overlays... watch for zoom events on the viewer and then add or remove overlays as appropriate for your zoom level.

Regarding zooming into the house then inside, are you saying you want them to be separate layers, and at some point the house layer goes away so you can explore parts of the inside that would otherwise have been obscured by the exterior? You can do that with multi-image. Again you'll have to watch for zoom events and manage the opacity of your layers appropriately.

It's exciting to see all the great work you're doing!