Get valid effect range using property descriptions in Lumia Imaging SDK 3

Get valid effect range using property descriptions in Lumia Imaging SDK 3

Lumia Imaging SDK 3 is finally out. The long awaited SDK that was blocking some devs from porting their Windows 8.1 apps to Windows 10 UWP is now available with great new performance improvements and new features, but also some breaking changes. Highlights of the release are definitely Windows 10 support and GPU image processing that brings the performance improvements, but many more changes were squeezed in - you can find more details in the documentation.

Silverlight apps are no longer supported though so if you want the latest magic from this SDK, porting to WinRT is necessary. If you're just migrating from v2 to v3, there's a great document for that called (believe it or not :)) How to upgrade from Lumia Imaging SDK 2.0 to 3.0. One thing that you'll notice right away is that filters are no longer called filters, but effects, but a more important (and breaking) change is that there is no FilterEffect. This means that instead of chaining the filters by setting the IFilters array of FilterEffect

filterEffect.Filters = new IFilter[] { scale, rotation, blur };  

you now chain effects using the effects list

using (var scale = new ScaleEffect(2))  
using (var rotation = new RotationEffect(30))  
using (var blur = new BlurEffect(10))  
using (var renderer = new JpegRenderer())  
{                    
    renderer.Source = new EffectList() { source, scale, rotation, blur };                     
} 

or simply one after the other, like this

using (var scale = new ScaleEffect(source, 2))  
using (var rotation = new RotationEffect(scale, 30))  
using (var blur = new BlurEffect(rotation, 10))  
using (var renderer = new JpegRenderer(blur))  
{
   ...
}

Property descriptions

Imaging SDK 3 also brings a new interface called IPropertyDescriptions implemented by effects that gives you information about the minimum, maximum and default values of an effect property at runtime. It's super useful when you want to use sliders to change property values, which is quite often with range effects, but don't want to hardcode the value. Let's create a quick demo to see how this works.

I used a small demo app called PropertyDescriptions and I added the latest Lumia Imaging SDK (v3, for UWP) via Nuget. I created a very basic UI which consists of an image, two buttons and a slider.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Image x:Name="LoadedImage" Stretch="UniformToFill"></Image>
    <RelativePanel Grid.Row="1" Margin="24">
        <Button x:Name="LoadButton" 
                Content="Load image" 
                Click="LoadButton_OnClick"/>
        <Slider x:Name="EffectRangeSlider" 
                RelativePanel.RightOf="LoadButton"
                Margin="12,0" Width="200"
                Minimum="{x:Bind viewModel.MinValue}"
                Maximum="{x:Bind viewModel.MaxValue}"
                Value="{x:Bind viewModel.DefaultValue}"
                ValueChanged="EffectRangeSlider_OnValueChanged"/>
        <Button x:Name="DefaultButton" 
                RelativePanel.RightOf="EffectRangeSlider"
                Content="Reset to default" 
                Click="DefaultButton_OnClick"/>
    </RelativePanel>
</Grid>  

I am using code-behind event handlers for demo purposes, but you can easily move this logic to viewmodels and design the whole thing a little bit better for production. :)

You'll notice how I am setting Minimum, Maximum and current value of the slider based on the binding to a view model, and it's a very simple one:

public class EffectViewModel  
{
    public BlurEffect blur { get; set; }

    public EffectViewModel()
    {
        this.blur = new BlurEffect();
    }

    public int DefaultValue { get; set; }
    public int MaxValue { get; set; }
    public int MinValue { get; set; }

but has an extra method that detects the DefaultValue, MinValue and MaxValue. Neat!

private void DetectPropertyDescriptions()  
{
    IPropertyDescriptions blurPropertyDescriptions = this.blur as IPropertyDescriptions;

    if (blurPropertyDescriptions != null)
    {
        var propertyDescription = blurPropertyDescriptions.PropertyDescriptions[nameof(this.blur.KernelSize)];

        this.DefaultValue = (int) propertyDescription.DefaultValue;
        this.MinValue = (int) propertyDescription.MinValue;
        this.MaxValue = (int) propertyDescription.MaxValue;
    }
}

Property descriptions used to get

Complete project available on GitHub.

Conclusion

It's amazing to see Lumia Imaging SDK going forward. With Windows 10 support, performance improvements and even new features, there's no better way to manipulate images in Windows 10 apps. For range effects, PropertyDescriptions should be used to detect minimum, maximum and default effect values.

I remember when I built my Photo Light app, a photo editor for Windows Phone 7. There were no libraries like this one at the time, I pretty much had to do everything myself, pixel by pixel, taking care of memory, performance... Nowadays, all we need is Lumia Imaging SDK! :)

Igor Ralic

igor ralic

View Comments
Microsoft Certified Solutions Developer: Windows Store Apps in C#