alan-view

(WIP) Alan's View

a.k.a AI's View or Terminator's View, is pure canvas library to overlay measurement data on top of analysed images.

An online demo is available. Also check examples/ and examples/fixtures.json for an example of input data.

Using

Having some properties/features extracted from a given image:

props =
  src: 'http://foo.com/bar.png'
  cover:
    colors: ...
    saliency: ...
    histogram: ...

We can setup AlanView to draw those features into a given canvas:

view = new AlanView
  canvas: document.getElementById 'some-canvas'
  maxWidth: 500
  maxHeight: 300
 
view.draw props

Should give something like:

It is also possible to hide layers:

view = new AlanView
  canvas: document.getElementById 'some-canvas'
  maxWidth: 500
  maxHeight: 300
  noCircle: true
  noSceneFading: true
  noColors: true
 
view.draw props

Those are the options available:

• noSaliency: hides the salient region bounding box
  • noPolygon: hides the polygon around the salient region
  • noCircle: hides the circle around the salient region
• noFaces: hides faces bounding boxes
  • noFaceConfidence: hide confidence levels for faces
• noScene: hides scene bounding box
  • noSceneFading: hides the fading bounding box around scene
• noLines: hides rows/columns bounding boxes
• noColors: hides the color palette
• noTextregions: hides textual regions
• noBackground: do not clean the background (good for overlays)

Information displayed

• Color palettes: 5 circles at top-left
• Salient region: white bounding box
• Salient polygon: white shape with no opacity
• Salient circle: white circle
• Scene region: green bounding box
• Lines (columns/rows): red bounding boxes around scene region
• Faces: blue bounding boxes around each face
• Text regions: blue bounding boxes around textual regions