@the-grid/caliper

Caliper

Measurement library for Poly, handling different media types.

Local testing

First make sure you have all dependencies installed:

npm install

Use the following command to run tests locally:

grunt

Specifications

Caliper deals with the following blocks:

Headline

headline:
  id: 'one'
  type: 'headline'
  html: '<h1>This is a headline</h1>'
  text: 'This is a headline'
  length: 18
}

Paragraph

paragraph:
  id: 'two'
  type: 'text'
  html: '<p>Hello world, <b>this</b> is some text</p>'
  text: 'Hello world, this is some text'
  length: 30

CTA

cta:
  id: '1234cta'
  type: 'cta'
  uuid: '71bfc2e0-4a96-11e4-916c-0800200c9a66'
  verb: 'purchase'
  price: '96'
  html: '<button data-uuid=71bfc2e0-4a96-11e4-916c-0800200c9a66 data-role="cta" data-verb="purchase" data-price="96">Buy now</button>'
  text: 'Buy now'
  length: 7

List

list:
  id: 'ordered'
  type: 'list'
  html: '<ul><li>Foo</li><li>Bar</li></ul>'
  items: 2

Image

image:
  id: 'foo'
  type: 'article'
  src: 'http://foo/fullscale.png'
  cover:
    orientation: 'landscape'
    src: 'http://foo/fullscale.png'
    altsrc: 'http://foo/original.png'
    ratio: '1004:777'
    width: 2008
    height: 1554
    faces: [
      { x: 608.1907291149191
        y: 189.99097584365575
        width: 229.20877742760769
        height: 229.20877742760769
        neighbors: 2
        confidence: -1.7360807700000014 }
    ]
    colors: [[197, 135, 87], ...]
    saliency:
      polygon: [[2006, 1552], ...]
      center: [1258, 1233]
      radius: 836.904
      bounding_rect: [[483, 817], [2007, 1553]]
    negative_space:
      rectangles: [
        { x: 0
          y: 0
          width: 1943
          height: 780
          text:
            large: 1184
            medium: 3947
            small: 6647 }
      ]
      colors: [
        [[24,15,8],
         [43,34,27],
         [94,10,30],
         [139,25,48],
         [89,67,53],
         [151,90,68],
         [187,128,98],
         [220,165,145],
         [146,124,92],
         [216,202,196]]
      ]
   scene:
     bbox:
       x: number
       y: number
       width: number
       height: number

• altsrc is optional and should be the original src when available
• src should be the fullscale src when available
• we should extract measurements from the fullscale src (for now, we should extract from the scaled down src in the near future)
• faces length can be equal to zero
• 'saliency' equals to null in noflo-browser

Video

video:
  id: 'youtube'
  type: 'video'
  html: '<iframe src="//www.youtube.com/embed/P5cdlLTqb24?list=UUnPE7t9tqwcsO0LLyw5zuPQ"></iframe>'
  video:
    src: '//www.youtube.com/embed/P5cdlLTqb24?list=UUnPE7t9tqwcsO0LLyw5zuPQ'
  src: 'http://img.youtube.com/vi/P5cdlLTqb24/hqdefault.jpg'
  cover:
    ... the same of image type ...