MK-utils

Drawing and image scaling utils for the JAW Motions pose estimation and joint angle calculator API.

The API is available here: JAW pose estimation and angle calculator

Installing

Using npm:

$ npm install jaw-mk-utils

Using yarn:

$ yarn add jaw-mk-utils

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/jaw-mk-utils@1.0.6/utils.js"></script>

Using unkpkg CDN:

<script src="https://unpkg.com/jaw-mk-utils@1.0.6/utils.js"></script>

Utilities

Scaling images:

The scaleImage() method allow to scale an image to the specified width in pixels. The height of the image scales automatically. It takes the following arguments:

| Argument | Description | |----------|---------------------------| | img | Image object | | width | Width in pixels to scale |

import MK from 'jaw-mk-utils'

const scaledImage = MK.scaleImage(img, 600)

Drawing results:

The drawOutput() method allows to draw the obtained landmarks over a canvas. It takes the folowing arguments:

| Argument | Description | |----------|-------------------------------------------------------------------| | Results | Array of landmarks detected from the API. Required. | | canvasId | Id of the canvas object where the output will be drawn. Required. | | options | Object with optional configurations. Optional. |

import MK from 'jaw-mk-utils'

MK.drawOutput(landmarks, 'output-canvas')

The possible options that the options argument can take are listed below:

| Option | Description | Default | |-----------------|--------------------------------------------------------------------------------|---------| | connectorColor | String. Color of the lines that will be drawn between the detected points. | #00FF00 | | landmarksColor | String. Color of the detected points. | #FF0000 | | projectionColor | String. Color of the calculated points and projected lines that will be drawn. | #0000FF | | connectorWidth | Number. Width of the lines that will be drawn between the detected points. | 2 | | landmarksWidth | Number. Size of the detected points. | 1 |

Usage example

The following block of code shows an usage example using axios to get the data from the API:

const getData = (url, plane)=> {
    // An image object is created and it's src is setted to the url argument
    const img = new Image()
    img.src = url

    img.onload = ()=> {
        // After the img is setted, we'll create an scaled version of the image
        const scaledImage = MK.scaleImage(img, 600)

        // We select the canvas and set it's width and height to the width and height of the scaled image
        const canvas = document.getElementById('result-canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = scaledImage.width
        canvas.height = scaledImage.height

        // We draw the image on the canvas
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

        // And then we make a request to the API, drawing the response over the previous canvas
        let data = { url, plane }

        let options = {
            connectorColor: '#fff'
        }

        axios
            .post('[path-to-api]', data)
            .then((response)=> {
                MK.drawOutput(response.data.landmarks, 'result-canvas', options)
            })
            .catch((error)=> {
                console.log(error)
            })

    }

    
}

// We have a button that starts the request
const btn = document.getElementById('btn')
btn.addEventListener('click', ()=> {

    // We get the image file and the plane from the inputs
    const fileInput = document.getElementById('file')
    const plane = document.getElementById('plane').value

    if(fileInput.files.length === 0) return

    // And then, we read the image as a DataURL, passing that url and plane to the getData() functions
    const reader = new FileReader()
    reader.onload = ()=> {
        getData(reader.result, plane)
    }

    reader.readAsDataURL(fileInput.files[0])

})