Library for implementing an image pixel marker for ML training

This library is framework agnostic so it can be used with React, Angular, Vue, or whatever other frameworks you so choose.

See Example

To use this library in your application, import the UMD module class

const ModelTrainerImageMarker = reqire('@skycatch/model-trainer-image-marker');

Or

import ModelTrainerImageMarker from '@skycatch/model-trainer-image-marker';

To use the bundled styles, they can be found in the dist folder of the node_module

Interface

Pass in an in-memory Image object using the https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

URL can either be a http image url, or created from an in memory file with window.URL.createObjectURL. Remember to delete the file from your

const ModelTrainerImageMarker = require('@skycatch/model-trainer-image-marker');
const url = "http://cdn.guff.com/site_1/media/15000/14063/items/e0b646a74ca8055620294f11.jpg";
const MarkerSystem = new ModelTrainerImageMarker('id-1');
const img = new Image();
img.onload = () => {
    MarkerSystem.boot(img, 'imageId', '#system', [{
        x: 200,
        y: 600,
        id: 'other-marker'
      }], null, {
      onReady: myOnReady.bind(this),
      onMark: myOnMarked.bind(this),
      onMarkClick: myOnMarkerClicked.bind(this),
      onMarkDelete: myOnMarkDelete.bind(this),
      onZoomReset: myOnZoomReset.bind(this),
      onZoomToMark: myOnZoomToMark.bind(this)
    });
});
img.src = url;

API

new ModelTrainerImageMarker(poiId)

• poiId - String: UID of object of interest

MarkerSystem.configure(options) - JSON: Configuration optinos

• options

 {
      'targetIcon': '#svg-xlink:href', // Optional
      'scaleMin': <number>, // Optional
      'scaleMax': <number>, // Optional
      'scaleLocateZoom': <number>, // Optional
      'markerSize': <number>, // Optional
      'markerShadowSize': <number>, // Optional
      'readOnly': <boolean>
 }

MarkerSystem.boot(img, image-Id, DOM-Id, alreadyMarked, currentMark, events)

• img - Image(): In-memory Image object
• image-Id - String: UID of image
• DOM-Id - String: DOM Element UID
• alreadyMarked - Array[JSON]: Array of points of interest already marked in this image

 [{
      'id': 'id-1',
      'x': 2500,
      'y': 1000
 }]

• currentMark - JSON: Access to live marking session

 {
      'id': 'id-1',
      'x': 2500,
      'y': 1000
 }

• events - JSON: Event Listener Handles
  • onReady
  • onMark
  • onMarkClick
  • onMarkDelete
  • onZoomReset
  • onZoomToMark

Interact

MarkerSystem.resetZoom(duration) - (ms) - zooms back to the original centered - non-zoomed state

MarkerSystem.findCP(duration) - (ms) - focus + zooms to the marked id id marked

MarkerSystem.clearMarker() - Removes the mark from the image

MarkerSystem.reDrawMarker() - Redraws the marker (incase configuration changes have occured)

What's in the box?

D3, Webpack Hot Module Replacement (HMR), ES6, SASS, Linting, Unit Tests, and Sandbox library module template

Environment setup

  $ npm i

Development

Start the Webpack server (includes live reloading + hot module replacement when you change files):

  $ npm run dev

Open http://localhost:8080 in a browser. ./sandbox/index.html is the example which is an example of an implentation of your src library. ./src/index.js is the entry point.

Bundling

When you're finished and want to make a build, you will need to actually bundle the code into its distribution bundles. The following command will do this with which you can publish the library

  $ npm run bundle