Finetune

The Finetune plugin enables us to add controls to update color effect values. We can import the default finetune control set or define our own controls.

undefined

undefined

finetuneControlConfiguration

An object with control configurations to render in the Finetune footer.

The key brightness matches the brightness key used in the finetuneOptions array, that's how Doka determines which control to render for each button.

{
    brightness: {
        // the base value of the range input
        base: 0,

        // the minimum range input value
        min: -0.25,

        // the maximum range input value
        max: 0.25,

        // override the label value to render
        getLabel: (value) => Math.round(value * 100),

        // called to request access to an internal store
        getStore: ({ imageColorMatrix }) => imageColorMatrix,

        // called to read out a value of the store,
        // receives store returned by `getStore`
        getValue: (store) => {
            if (!store.brightness) return;
            return store.brightness[4];
        },

        // updates `store` value based on range input value `v`
        // receives store returned by `getStore`
        setValue: (store, v: number) =>
            store.update((matrices) => ({
                // the `imageColorMatrix` store contains multiple matrices,
                // we need to keep these intact and then overwrite the
                // brightness matrix
                ...matrices,

                // prettier-ignore
                brightness: [
                    1, 0, 0, 0, v,
                    0, 1, 0, 0, v,
                    0, 0, 1, 0, v,
                    0, 0, 0, 1, 0
                ],
            })),
    }
}

finetuneOptions

A list of key label pairs describing which finetune controls to render. Label can be a string but in most cases is a function, the function is then passed the current locale and can select the correct locale key.

[
    ['brightness', (locale) => locale.finetuneLabelBrightness],
    ['contrast', (locale) => locale.finetuneLabelContrast],
    ['exposure', (locale) => locale.finetuneLabelExposure],
];