HTML Annotator Component

Total Budget: TBD
Deadline: 11/01/2015

Summary

We would like to have a node-webkit based app, built with react.js, and semantic-ui.

The basic concept for the app will be a photoshop style image editor, with a canvas representation of the document.

This app will provide a toolbar with buttons, and allow for a modular / plugin based approach for writing tools.

Various document types need to be supported. Generally, these will be documents which can be embedded in a standard webpage, including:

  • html
  • svg
  • jpg, png, gif
  • pdf

Software Stack

  • node-webkit for cross platform native app
  • react.js for the ui / application code
  • semantic-ui for styling / ui

Desired Interface

  • The app should let me write directly to the file that is opened.
  • The app should let me access the raw content of the file that is opened
  • The app should let me access the metadata generated from the tools
  • The app should provide a system for defining transformations which combine the current state of the document with the data from the tools and modifications made

Use Cases

There are a number of workflow enhancement functions that we would like that involve starting with documents produced in other tools. We generally want to annotate these documents visually, or with metadata to help improve the linkability and findability of these documents, or to parse them more easily and use their content to power an app.

Annotating Google Drawings

  • load a google drawing svg
  • select key path elements, and assign ID and Class attributes
  • use the annotated SVG with its semantically named elements, to power a javascript visualization

Annotating HTMl Files

  • load HTML provided by a visual designer
  • annotate the markup with data attributes, css class and id attributes
  • parse the annotated markup and automatically generate template placeholders to make them dynamic

Building PDF Parsing Mappers

  • load a PDF file
  • convert the PDF to a JSON representation
  • allow for the editor to select visual regions of the PDF, map to JSON nodes
  • determine a path to the JSON node
  • save the visual regions as a map
  • apply the map to 1000+ similar PDF to extract the data

Use Cases

There are a number of workflow enhancement functions that we would like that involve starting with documents produced in other tools. We generally want to annotate these documents visually, or with metadata to help improve the linkability and findability of these documents, or to parse them more easily and use their content to power an app.

Annotating Google Drawings

  • load a google drawing svg
  • select key path elements, and assign ID and Class attributes
  • use the annotated SVG with its semantically named elements, to power a javascript visualization

Annotating HTMl Files

  • load HTML provided by a visual designer
  • annotate the markup with data attributes, css class and id attributes
  • parse the annotated markup and automatically generate template placeholders to make them dynamic

Building PDF Parsing Mappers

  • load a PDF file
  • convert the PDF to a JSON representation
  • allow for the editor to select visual regions of the PDF, map to JSON nodes
  • determine a path to the JSON node
  • save the visual regions as a map
  • apply the map to 1000+ similar PDF to extract the data