habbes / xaval

Interactive web-based playground for computer vision exploration and experimentation
https://xaval.habbes.xyz
5 stars 0 forks source link

Multiple outputs for widgets #31

Closed habbes closed 6 years ago

habbes commented 6 years ago

Addresses #21

Widget template opts now must declare outputs similar to how inputs are declared, and the onUpdate should return an object with a key for each output.

Here's an excerpt from the update sample code:

// define a custom widget template
const Rotation = widgets.define('Rotation', {
    // define parameters for this widget
    params: {
        angle: {
            type: 'number',
            min: -180,
            max: 180,
            initial: 0
        },
        scale: {
            type: 'number',
            initial: 1,
            min: 0,
            max: 5,
            step: 0.1
        }
    },
    // define inputs
    inputs: ['image'],
    // define outputs
    outputs: ['image'],
    // define the computation triggered by the widget
    onUpdate (ctx) {
        const { inputs: { image }, params: { angle, scale } } = ctx;
        const dst = new cv.Mat();
        const dsize = new cv.Size(image.rows, image.cols);
        const center = new cv.Point(image.cols / 2, image.rows / 2);
        const M = cv.getRotationMatrix2D(center, angle, scale);
        cv.warpAffine(image, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());
        M.delete();
        return { image: dst };
    }
});