Image Widget

This is an example of how to use the Surface widget from the Toolkit to display a pannable and zoomable image.

Image Widget Demo

Page Setup

CSS
  • Font Awesome 4.0.3 Used for all the iconography. Not a Toolkit requirement.
  • jsPlumbToolkit-defaults.css Recommended for all apps using the Toolkit, at least when you first start to build your app. This stylesheet contains sane defaults for the various widgets in the Toolkit.
  • jsPlumbToolkit-demo.css Common styles for the demonstration pages. Not a Toolkit requirement.
  • app.css Styles specific to this demo.
JS
  • jsPlumb-x.x.x.js
  • jsPlumbToolkit-x.x.x.js
  • app.js Application specific JS.

Code

The code for this demonstration is straightforward:

jsPlumbToolkit.ready(function() {
  // pick a random image from the list
  var images = ["img/IMG_0685.JPG", "img/tramlineparis.jpg"],
      image = images[Math.floor(Math.random() * images.length)];

  // get a new Toolkit instance
  var toolkit = jsPlumbToolkit.newInstance();
  // render to 'canvas' element, supplying URL to background, and indicating we want to clamp the panner to always keep the background partly in view.
  var renderer = toolkit.render({
    container:"canvas",
    background:{
      url:image
    },
    clampToBackground:true
  });

  // on home button click, zoom to fit background.
  jsPlumb.on("#main", "click", "[reset]", function () {
    renderer.zoomToBackground();
  });
});
Clamping to Background

Note the clampToBackground:true parameter. This instructs the widget to clamp pan/zoom movement such that some portion of the background image is always visible.

Hiding nudge bars

By default, the Surface widget displays nudge bars to assist the user in navigating the dataset. These can be hidden, as discussed here.

Tiled Background

This demonstration uses a fixed background, but if you are dealing with large images you may wish to investigate the Surface widget's tiling capabilities.