Skip to content
This module provides a way to draw and annotate on images and save them as complex observation.
JavaScript Java HTML CSS
Branch: master
Clone or download
kml27 and mks-d Misc. UI Enhancements.
* implementing layer ordering buttons, recreating text annotations as children of a pin marker icon and adds hover/click functionality for annotations when svg is loaded as markup, fixing styling for select to show dropshadow over any item that would be selected when clicking, populating layers when loading an existing observation, adding ability to set default tool when a form is loaded instead of being hardcoded to path tool, fixing svg view size style update in firefox

* implementing negative viewbox origin, fixing move tool functionalitty, exclude background rect and ignored layers from highlighting, changing some flexbox behavior, addressing issue where <tspan>s get different x,y than parent <text>, removing clipMove behavior

* fixing pin placement to match clicked location

* fixing issue where svg.js adds multiple duplicate xmlns attributes causing server side validation failures
Latest commit b0d03c9 Nov 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.

Drawing Module

This module provides a way to draw and annotate on images and save them as complex observation. You can find more information at

Additional Installation Steps

  1. Download Drawing module from here and upload it into your system .
  2. Create a new concept (You can do this by clicking on Dictionary and Add new Concept)
  3. If there is a class 'Drawing' in the list , set the class of concept to 'Drawing'. if not create a new class 'Drawing' and set the class field of the concept to the same(you can create new class from administration ->Manage Concept Classes )
  4. Set the data type to complex
  5. Set the handler to DrawingHandler

User Documentation

TL;DR <drawing id="drawingEditor" conceptId="" displayMode="annotation" width="500px" height="250px" preloadResImage="web/module/resources/images/DrawingTemplates/Full Body Lateral Female.png">

Breaking Changes

questionConceptId has been changed to conceptId

Required tag attributes as 2.0.0

An id attribute (e.g. <drawing id="drawingEditor"/>) is still required.

conceptId is required as with many HFE tags.

displayMode is a new and required attribute.

Display Modes

The Drawing module now explicity provides two display modes, one specifically for drawing and annotating images, and one specifically for use with signatures.

<drawing displayMode="{annotation, signature}" conceptId="(HFE sufficient Conecpt identifier)"/>

New attributes supported in 2.0.0

Height and width <drawing displayMode="annotation" conceptId="(complexId)" width="500px" height="250px">

Preloaded "template" Image (from drawing or module internal resources) <drawing displayMode="annotation" conceptId="(complexId)" preloadResImage="/web/module/resources/images/example.png"/>

You can’t perform that action at this time.