Drawing Interactions

/in /by

Click2Correct application’s drawing screen includes several drawing tools. This article explains visual output and interaction logic behind them.

Colors

Color logic for drawing objects:

  • Calibration objects: blue when unselected, purple when selected (see marker 1)
  • Calibration menu item will be green if current medical image calibrated (see marker 2)
  • Other objects: green and yellow when unselected (see marker 3), orange when selected (see marker 4)
  • Cut or copy objects: several colors

colors-5

Shapes and Behaviours

Explanation of markings:

  1. Circles are draggable and connected to main object as pull points. You can change shape of object by these circles.
  2. Helper lines are commonly connects two or more circles for reflecting mechanics behind these circles. They are thinner than other lines.
  3. Main lines gives you understanding of measuring purpose.
  4. Labels show you output of  measuring. You can change position by rectangle near the label. It also has a helper line connected to main drawing object.
  5. Circles can be filled but they have same behaviour and purpose.
  6. Buttons seem like labels with different font color.

shape-3M

 

Rotation Helper

DICOM

/in /by

Add DICOM Files

To add DICOMs to Click2Correct you just need to drag and drop DICOM file(s) or folder(s)(Folder drag and drop works only in Google Chrome). Here is a screenshot of Click2Correct while uploading and processing DICOM files:

dicom

Explanation of markings:

  1. Information bar about DICOM uploading and processing.

Optionally, you can select DICOM files with file explorer for uploading. To do that, go to “DICOM” tab(see Browse DICOM List) and click on “Add DICOM File” button:

dicom-2

Explanation of markings:

  1. “Add DICOM Files” button.
  2. File explorer that opens after clicking “Add DICOM Files” button.

Note that patient and case will be created automatically when adding DICOMs.

Browse DICOMs

To browse all DICOMs you own, click “DICOM” button on the navigation bar. To browse all DICOMs of a case, go to that case’s details (see case details).

browsing-dicoms

Explanation of markings:

  1. Open file explorer to add DICOM files
  2. Refresh DICOM list
  3. Filter DICOM list
  4. Delete DICOM
  5. Go to DICOM Viewer

View DICOMs

Drawing stuff in DICOM files is same with x-ray images (see Drawing Screen).

dicom-drawing

Explanation of markings:

  1. Refresh the DICOM images list.
  2. View DICOM Study details.
  3. DICOM Images grouped by DICOM series.
  4. View that particular series’ details.

 

Templates

/in /by

templates

 

Explanation of markings:

  1. This text box is used for searching measurement templates.
  2. Some of the measurement templates from the literature are grouped by their related region.

Calibration Tools

/in /by

calibration-tools

Explanation of markings:

  1. Adds a Linear Calibration object to the drawing. Linear calibration object is used for calibrating the image from a linear length with a known real length (commonly a radiopaque ruler).
  2. Adds a Circular Calibration object to the drawing. Circular Calibration object is used for calibrating the image from a circle with a known real diameter value.

Cutting Tools

/in /by

cutting-tools

Allows user to cut (marking 1) or copy (marking 2) an area from the x-ray to simulate the fracture reduction or osteotomy.

Cut-in-Cut feature: you can cut or copy from a part of an x-ray which had been cut or copied before.

Measurement Tools

/in /by

measurement-tools

Explanation of markings:

  1. Adds a Simple Line object to the drawing. Simple Line is used for measuring the distance between two points.
  2. Adds a Center Line Finder object to the drawing. Center Line Finder measures the distance between two points. Its difference from Simple Line is two helper line is used while determining points. Two points of Center Line Finder can only be moved on perpendicular direction of helper lines.
  3. Add a Diameter Circle to the drawing. A Diameter Circle is used for determining the diameter of a circle which is bounded to 3 specific points that can be adjustable by user.
  4. Adds a V Angular Measurement object to the drawing. V Angular Measurement is the most basic angular measurement tool in the application. It determines the acute angle between two lines with a joint point.
  5. Adds a T Angular Measurement object to the drawing. Basically it determines acute angle between two lines. Difference is while points of first line can be moved freely, one point of second line can only be moved on the direction of first line.

Template Helper

/in /by

Click2Correct has a powerful feature that aims to assist its users when adding measurement tools, cutting tools, calibration tools and templates to the drawing.

This feature will be explained with an example. Say you have an x-ray like that and you want to calibrate it (see Calibration Tools):

calibration-tools-1

When you select the Circular Calibration, a helper window will be open over the control panel:

 

template-helper-2

 

As can be seen, Click2Correct assists you to add Circular Calibration object.

This helping mechanism called Template Helper. Template Helper applies to all drawing objects. It shows you an example of what you trying to do and expects you to click on the equivalent points. If you do not like the location of your previously clicked points, you can drag them to their new location while template helper is still active.

template-helper-4

 

Note that, you can also interact with your objects after their creation. Once you clicked the last point, your drawing object will be drawn immediately and Template Helper will be closed until the next object creation.

template-helper-3

 

Image Edit Tools

/in /by

image-editing-tools

Explanation of markings:

  1. Decrease image size
  2. Increase image size
  3. Rotate selected layer right
  4. Rotate selected layer left
  5. Decrease opacity of selected layer
  6. Increase opacity of selected layer
  7. Slider for adjusting image size
  8. Slider for rotating selected layer
  9. Slider for adjusting opacity of selected layer

 

Drawing Screen

/in /by

drawing

Explanation of markings:

  1. Browse dashboard
  2. Browse patient details
  3. Browse case details
  4. Browse x-ray details
  5. Save current drawing (only present if you are the owner or have permission to update)
  6. Move selected layer up (↑ button on your keyboard does the same)
  7. Move selected layer left (← button on your keyboard does the same)
  8. Move selected layer right (→ button on your keyboard does the same)
  9. Move selected layer down (↓ button on your keyboard does the same)
  10. Movement amount
  11. Rotate selected layer counterclockwise
  12. Rotate selected layer clockwise
  13. Reset selected layer to its first position
  14. Image editing tools
  15. Measurement tools
  16. Cutting tools
  17. Calibration tools
  18. Templates
  19. Select or cancel current operation
  20. Toggle zoom tool (Ctrl button on your keyboard does the same)
  21. Delete selected drawing object (Delete button on your keyboard does the same)