Widgets/Transformer

Image Filter Widget

Image Filter Widget

A "Transformer" type widget. Image Filter Widget allows you to apply CSS filters to images, providing real-time visual effects and transformations. It supports multiple filter types that can be combined to create complex visual effects.

 

Inputs

  • image (DataType: ImageData) The input image to apply filters to. This port accepts image data in any format supported by the Canvas API.

Outputs

  • image (DataType: ImageData) The filtered image output. The image will maintain its original dimensions while having the specified filters applied.

Custom Settings

The widget allows you to configure multiple filters with their respective values. Each filter has two properties:

  • Name: The type of filter to apply
  • Value: The intensity or amount of the filter effect (0-1 range for most filters, pixels for blur)

Filter Settings



Available Filters

  1. blur(value)

    • Applies a Gaussian blur effect
    • Value range: 0 to 1 (converted to pixels internally)
    • Example: blur(0.5) for a 0.5-pixel blur radius

  2. brightness(value)

    • Adjusts the brightness of the image
    • Value range: 0 to 1 (0 = black, 1 = original brightness)
    • Example: brightness(0.8) for 80% of original brightness

  3. contrast(value)

    • Adjusts the contrast of the image
    • Value range: 0 to 1 (0 = gray, 1 = original contrast)
    • Example: contrast(0.8) for 80% of original contrast

  4. grayscale(value)

    • Converts the image to grayscale
    • Value range: 0 to 1 (0 = original, 1 = fully grayscale)
    • Example: grayscale(0.5) for 50% grayscale effect

  5. hue-rotate(value)

    • Rotates the hue of the image colors
    • Value is in degrees (0° to 360°)
    • Example: hue-rotate(180) for a 180-degree hue rotation

  6. invert(value)

    • Inverts the colors of the image
    • Value range: 0 to 1 (0 = original, 1 = fully inverted)
    • Example: invert(1) for complete color inversion

  7. opacity(value)

    • Controls the transparency of the image
    • Value range: 0 to 1 (0 = fully transparent, 1 = fully opaque)
    • Example: opacity(0.7) for 70% opacity

  8. saturate(value)

    • Adjusts color saturation
    • Value range: 0 to 1 (0 = grayscale, 1 = original saturation)
    • Example: saturate(1.8) for 80% more saturation

  9. sepia(value)

    • Applies a sepia tone effect
    • Value range: 0 to 1 (0 = original, 1 = full sepia)
    • Example: sepia(0.6) for 60% sepia effect

 

📌 Important Notes

  • The video demonstrations use the Image Drop service to load images dynamically. If you want to replicate the example exactly as shown in the video, you’ll need to install and use this service.
  • For the draggable examples in Logic Mapper, Base64 image data is used so you can try them out immediately.

 

Examples

Basic Grayscale Effect

This example shows how to apply a simple grayscale filter to an image:


Drag the example onto the workspace to explore and experiment!



In this example

  1. The Image Drop service contains the image that will be edited
  2. The Image Filter widget is configured with a grayscale filter at 9.0 intensity
  3. The Image Filter widget is connected to the Display widget to show the result
  4. A trigger is sent to the Image Drop service to execute the recipe and apply the filters to the image
  5. The Display widget shows the processed image with the grayscale effect applied

 

Multiple Filter Combination

This example demonstrates combining multiple filters for a vintage look:


Drag the example onto the workspace to explore and experiment!



In this example

  1. The Image Drop service contains the image that will be edited
  2. The Image Filter widget is configured with multiple filters:
    • sepia filter at 70% intensity
    • contrast reduction to 70% of the original
    • brightness set to 80% of the original
  3. The Image Filter widget is connected to the Display widget to show the result
  4. A trigger is sent to the Image Drop service to execute the recipe and apply the filters to the image
  5. The Display widget shows the processed image with the vintage photo effect applied

 

Color Manipulation Example

This example shows how to create a psychedelic effect using hue rotation and color manipulation:


Drag the example onto the workspace to explore and experiment!



In this example

  1. The Image Drop service contains the image that will be edited
  2. The Image Filter widget is configured with multiple filters:
    • hue-rotate filter set to 180 degrees
    • saturate filter increased by 50% to make colors more vibrant
    • contrast filter reduced to 80% to soften the effect
  3. The Image Filter widget is connected to the Display widget to show the result
  4. A trigger is sent to the Image Drop service to execute the recipe and apply the filters to the image
  5. The Display widget shows the processed image with the psychedelic effect applied

 

📌 Additional Notes

  • Multiple filters can be combined and will be applied in the order they are listed
  • The widget preserves the original image dimensions
  • Processing time may vary depending on image size and number of filters applied
  • All filter changes are applied in real-time
  • The widget supports dynamic updates to filter values through the settings panel

 

Glossary

  • Base64

    A way to convert binary data (like images) into text format using only letters, numbers, and a few symbols. This allows binary data to be stored or transmitted as text, making it easier to embed images directly in code or examples.

    Base64 To Image Widget: Converts Base64 encoded image strings into ImageData format that can be processed by other image widgets in Kemu.

  • Canvas API

    A web API that provides methods for drawing graphics and manipulating images on HTML canvas elements.

  • CSS filters

    A set of visual effects that can be applied to HTML elements, including images, to modify their appearance in real-time.

  • Gaussian blur

    A mathematical blur effect that applies a bell-shaped curve to pixels, creating a smooth, natural-looking blur effect.

  • ImageData

    A web API data type that represents the pixel data of an image, containing width, height, and color information for each pixel.

  • Logic Mapper

    Kemu's visual programming interface where users can drag and drop widgets to create workflows and connect them together to process data.