ViewFilter

Table of contents

Description of View's graphical effects(filter) like blur or color shift

Create from source

func NewViewFilter(params Params) ViewFilter

Creates the new view filter and return its interface

Create from resource

View {
    filter = filter {
        blur = 1,
        brightness = 110,
        contrast = 50,
        drop-shadow = _{
            blur = 2,
            color = #FF000000,
            x-offset = 3px,
            y-offset = 5px
        },
        grayscale = 50,
        hue-rotate = 45grad,
        invert = 100,
        opacity = 80,
        saturate = 50,
        sepia = 80
    },
}

Interface description

Inherit methods from Properties, fmt.Stringer

Properties

"blur"

Applies a Gaussian blur. The value of radius defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. The lacuna value for interpolation is 0. The parameter is specified as a length in pixels

Constant: Blur

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            blur = 2,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.Blur: 2,
        }),
    }),
})

"brightness"

Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results

Constant: Brightness

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            brightness = 50,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.Brightness: 50,
        }),
    }),
})

"contrast"

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast

Constant: Contrast

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            contrast = 50,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.Contrast: 50,
        }),
    }),
})

"drop-shadow"

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. Shadow parameters are set using the ViewShadow interface

Constant: DropShadow

Types: []ViewShadow, ViewShadow, string

Internal type is []ViewShadow, other types converted to it during assignment

See ViewShadow description for more details

Conversion rules

[]ViewShadow - stored as is, no conversion performed

ViewShadow - converted to []ViewShadow

string - string representation of ViewShadow. Example: "_{blur = 1em, color = black, spread-radius = 0.5em}"

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            drop-shadow = _{
                blur = 2,
                color = #FF000000,
                x-offset = 3px,
                y-offset = 5px,
            },
        },
    },
}

view = rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.DropShadow: rui.NewViewShadow(
                rui.Em(1),
                rui.Em(1),
                rui.Px(3),
                rui.Px(3),
                rui.Black
            ),
        }),
    }),
})

"grayscale"

Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect

Constant: Grayscale

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            grayscale = 50,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.Grayscale: 50,
        }),
    }),
})

"hue-rotate"

Applies a hue rotation on the input image. The value of ‘angle’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the ‘angle’ parameter is missing, a value of 0deg is used. Though there is no maximum value, the effect of values above 360deg wraps around

Constant: HueRotate

Types: AngleUnit, string, float, int

Internal type is AngleUnit, other types will be converted to it during assignment

See AngleUnit description for more details

Conversion rules

AngleUnit - stored as is, no conversion performed

string - must contain string representation of AngleUnit. If numeric value will be provided without any suffix then AngleUnit with value and Radian value type will be created

float - a new AngleUnit value will be created with Radian as a type

int - a new AngleUnit value will be created with Radian as a type

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            hue-rotate = 90deg,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.HueRotate: rui.Deg(90),
        }),
    }),
})

"invert"

Inverts the samples in the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect

Constant: Invert

Types: float64, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            invert = 100,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.Invert: 100,
        }),
    }),
})

"opacity"

Opacity is the degree to which content behind the view is hidden, and is the opposite of transparency. Value is in range 0% to 100%, where 0% is fully transparent

Constant: Opacity

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    background = image {
        src = "background.jpg",
        fit = cover,
    }
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            opacity = 50,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Background: rui.NewBackgroundImage(rui.Params{
        rui.Fit:    rui.CoverFit,
        rui.Source: "background.jpg",
    }),
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.Opacity: 50,
        }),
    }),
})

"saturate"

Saturates the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results

Constant: Saturate

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            saturate = 120,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.Saturate: 120,
        }),
    }),
})

"sepia"

Converts the input image to sepia. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect

Constant: Sepia

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 15em,
        height = 15em,
        fit = cover,
        src = "avatar.png",
        filter = _{
            sepia = 100,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(15),
        rui.Height: rui.Em(15),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Filter: rui.NewViewFilter(rui.Params{
            rui.Sepia: 100,
        }),
    }),
})

func GetBackdropFilter(view View, subviewID ...string) ViewFilter

Returns the area behind a View graphical effects like blur or color shift. If the second argument (subviewID) is not specified or is an empty string then a top position of the first argument (view) is returned

func GetFilter(view View, subviewID ...string) ViewFilter

Returns view's graphical effects like blur or color shift. If the second argument (subviewID) is not specified or is an empty string then a top position of the first argument (view) is returned

© Alxanosoft inc.