COOL

CERTIC Object Outline Library?

A web component utility to easily extract the foreground elements of an image.

Prerequisites

You need python3 if you intend to run the dev server.

Usage

# run a development server to test the library 
make dev 

To use in your project, copy the cool directory into your project and load the cool.js module in your HTML.

Add the cool-ed web component to your page and load an image via the data-image-url attribute:

<cool-ed id="editor" extract-callback="printContours" data-image-url="https://my_site/my_image.jpeg"></cool-ed>

The attribute can also be set dynamically to load a new image.

Note: make sure to define an id for the cool-ed component, this is needed to properly load openCV on startup.

Listen to the contours-extracted event to retrieve the contours which are returned as a 3 dimensional array with the layout:

contour
|__ contour points
  |__ point x and y coordinates

<script>
    document.addEventListener("DOMContentLoaded", (e) => {
        const editor = document.querySelector("#editor");
        editor.addEventListener("contours-extracted", (event) => {
            const contours = event.detail;
            for (c of contours) {
                console.log("Contour:");
                for (point of c) {
                    console.log("x: ", point[0], " y: ", point[1]);
                }
            }
        });
    });
</script>

<script src="cool/cooled.js" type="module"></script>

Optional component attributes

Preferences:

• data-default-brush-size
• data-background-dot-color
• data-foreground-dot-color
• log-opencv-build-info

Extracting elements of the image

• Select a brush mode in the toolbar, the size of the dot can be adjusted via the brush size slider.
• click on Extract and a wait a few seconds to get the contours of the extracted foreground.

Customizing the CSS

The editor elements are exposed via the part selector, so you can style them :

cool-ed::part(extract_button) {
    color: #00aa00;
}

You can look up the part names via the browser inspector, here is a list of the available elements:

• toolbar
  • init_workspace_button
  • undo_button
  • extract_button
  • brush_size_label
  • brush_size_slider
  • brush_type_fieldset
    • foreground_brush_radio
    • foreground_brush_label
    • background_brush_radio
    • background_brush_label
    • eraser_brush_radio
    • eraser_brush_label
  • user_layer_toggle_legend
  • user_layer_toggle
• panel

Notes

If the image width or height are greater than 1000px, the image will be resized for performance reasons. The scaling automatically divides the size by 2 until it is conform (which means corner case situations can lead to unexpected resizing, for example an image of 1002x1002 will be resized to 501x501). It is advised to pass images where the size is below 600px for better performance. Ideally you should pass an image already cropped around the region of interest and at the appropriate size.