Smooth, Blur and greyscale filter using a slider

Hi, I'm trying to add filters (Smooth, Blur and greyscale) to three different sliders on my GUI. I'm new to Matlab; therefore, I'm unsure how to make them work. Any help would be appreciated.

Answer 1

[yanqi liu]

yes，sir，may be write some code in SliderValueChanged function，such as

    % Callbacks that handle component events
    methods (Access = private)

        % Value changed function: Slider
        function SliderValueChanged(app, event)
            value = app.Slider.Value;
            app.TextArea.Value = sprintf('use slider 1, the value is %.1f', value);
        end

        % Value changed function: Slider2
        function Slider2ValueChanged(app, event)
            value = app.Slider2.Value;
            app.TextArea.Value = sprintf('use slider 2, the value is %.1f', value);
        end

        % Value changed function: Slider3
        function Slider3ValueChanged(app, event)
            value = app.Slider3.Value;
            app.TextArea.Value = sprintf('use slider 3, the value is %.1f', value);
        end
    end

then，we can use different value to make some process

[Capx]

I'm getting the following error:

"Error setting property 'Modified_image' of class 'second'. Value must be of type matlab.ui.control.Image or be convertible to matlab.ui.control.Image."

Here is the code.

% Value changed function: SmoothSlider

function SmoothSliderValueChanged(app, event)

value = app.SmoothSlider.Value;

app.Modified_image = sprintf('use Smooth slider, the value is %.1f', value);

end

% Value changed function: BlurSlider

function BlurSliderValueChanged(app, event)

value = app.BlurSlider.Value;

app.Modified_image = sprintf('use Blur slider, the value is %.1f', value);

end

% Value changed function: GREYSlider

function GREYSliderValueChanged(app, event)

value = app.GREYSlider.Value;

app.Modified_image = sprintf('use Greyscale slider, the value is %.1f', value);

end

[Image Analyst]

That doesn't look like you followed my instructions below at all. Why not?

[Capx]

I’m sorry. This is my first time using matlab. It’s not easier for me to follow instructions.

[Image Analyst]

@Fahad Zafar Then just use the paperclip icon to attach your .mlapp source code file and I'll get you started.

[Capx]

This is what I want it to do:

1: When I click on the "Bird" pushbutton, it would only display the image "bird.jpeg" rather than browsing the image file and then it would display the image in the image holders. (I am also struggling to find code for the image buttons; initially, I had the down-down menu, as shown in the image above. However, I thought it would be easier to add the buttons instead of the drop-down menu.)

2: Then, you have the original image on the left-hand side and the image I will modify on the right.

3: By sliding the slide it would add effect to the modified image. for example 0 = no blur and 100 = fully blurred. The same goes for other filters.

Here is the code:

classdef second < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)

UIFigure matlab.ui.Figure

PhoneButton matlab.ui.control.Button

CameraButton matlab.ui.control.Button

EXITButton matlab.ui.control.Button

GREYSlider matlab.ui.control.Slider

RESETButton matlab.ui.control.Button

GREYSCALEButton matlab.ui.control.Button

EditField_image matlab.ui.control.EditField

SELECTIMAGELabel matlab.ui.control.Label

BirdButton matlab.ui.control.Button

SmoothSlider matlab.ui.control.Slider

SMOOTHButton matlab.ui.control.Button

BLURButton matlab.ui.control.Button

BlurSlider matlab.ui.control.Slider

ImageFilteringLabel matlab.ui.control.Label

EditField matlab.ui.control.EditField

OriginalLabel matlab.ui.control.Label

Original_image matlab.ui.control.Image

Modified_image matlab.ui.control.Image

MAINMENUButton matlab.ui.control.Button

ContextMenu matlab.ui.container.ContextMenu

Menu matlab.ui.container.Menu

end

% Callbacks that handle component events

methods (Access = private)

% Code that executes after component creation

function startupFcn(app, main)

end

% Button pushed function: EXITButton

function EXITButtonPushed(app, event)

Figurename = app.UIFigure ;

close(Figurename)

end

% Button pushed function: RESETButton

function RESETButtonPushed(app, event)

set(handles.slider1,'Value',0);

set(handles.edit1,'string','');

end

% Callback function

function SelectImageDropDownValueChanged(app, event)

value = app.SelectImage.Value;

global bird

if strcmp(value,'Inverting')

[filename, pathname] =uigetfile({'*.jpg'},'File Selector');

fullpathname=strcat(pathname,filename);

bird=imread(fullpathname);

imshow(bird,'Parent',app.UIAxes);

end

end

% Button pushed function: MAINMENUButton

function MAINMENUButtonPushed(app, event)

main

app.UIFigure.Visible = 'off';

end

% Callback function

function SAVEIMAGEButtonPushed(app, event)

[filename, foldername] = uiputfile('Where do you want the file saved?');

complete_name = fullfile(foldername, filename);

imwrite(app.Modified_image, complete_name);

end

% Button pushed function: SMOOTHButton

function SMOOTHButtonPushed(app, event)

app.EditField.Value = 'Smooth Filter';

end

% Button pushed function: BLURButton

function BLURButtonPushed(app, event)

app.EditField.Value = 'Blur Filter';

end

% Button pushed function: GREYSCALEButton

function GREYSCALEButtonPushed(app, event)

app.EditField.Value = 'Greyscale Filter';

end

% Value changed function: SmoothSlider

function SmoothSliderValueChanged(app, event)

value = app.SmoothSlider.Value;

app.Modified_image = sprintf('use Smooth slider, the value is %.1f', value);

end

% Value changed function: BlurSlider

function BlurSliderValueChanged(app, event)

value = app.BlurSlider.Value;

app.Modified_image = sprintf('use Blur slider, the value is %.1f', value);

end

% Value changed function: GREYSlider

function GREYSliderValueChanged(app, event)

value = app.GREYSlider.Value;

app.Modified_image = sprintf('use Greyscale slider, the value is %.1f', value);

end

% Button pushed function: BirdButton

function BirdButtonPushed(app, event)

app.EditField_image.Value = 'Bird Image';

% Button pushed function: Button

img = imread('bird.jpeg');

image(img);

guidata(hObject, handles);

end

% Button pushed function: CameraButton

function CameraButtonPushed(app, event)

app.EditField_image.Value = 'Camera Image';

end

% Button pushed function: PhoneButton

function PhoneButtonPushed(app, event)

app.EditField_image.Value = 'Phone Image';

end

end

% Component initialization

methods (Access = private)

% Create UIFigure and components

function createComponents(app)

% Create UIFigure and hide until all components are created

app.UIFigure = uifigure('Visible', 'off');

app.UIFigure.Position = [100 100 1583 749];

app.UIFigure.Name = 'MATLAB App';

% Create MAINMENUButton

app.MAINMENUButton = uibutton(app.UIFigure, 'push');

app.MAINMENUButton.ButtonPushedFcn = createCallbackFcn(app, @MAINMENUButtonPushed, true);

app.MAINMENUButton.BackgroundColor = [0 0 0];

app.MAINMENUButton.FontWeight = 'bold';

app.MAINMENUButton.FontColor = [1 1 1];

app.MAINMENUButton.Position = [15 10 170 60];

app.MAINMENUButton.Text = 'MAIN MENU';

% Create Modified_image

app.Modified_image = uiimage(app.UIFigure);

app.Modified_image.Position = [613 227 408 340];

% Create Original_image

app.Original_image = uiimage(app.UIFigure);

app.Original_image.Position = [66 230 498 340];

% Create OriginalLabel

app.OriginalLabel = uilabel(app.UIFigure);

app.OriginalLabel.FontSize = 16;

app.OriginalLabel.FontWeight = 'bold';

app.OriginalLabel.Position = [283 598 66 23];

app.OriginalLabel.Text = 'Original';

% Create EditField

app.EditField = uieditfield(app.UIFigure, 'text');

app.EditField.FontSize = 16;

app.EditField.FontWeight = 'bold';

app.EditField.Position = [747 575 134 17];

% Create ImageFilteringLabel

app.ImageFilteringLabel = uilabel(app.UIFigure);

app.ImageFilteringLabel.FontSize = 50;

app.ImageFilteringLabel.FontWeight = 'bold';

app.ImageFilteringLabel.Position = [116 671 606 58];

app.ImageFilteringLabel.Text = 'Image Filtering:';

% Create BlurSlider

app.BlurSlider = uislider(app.UIFigure);

app.BlurSlider.ValueChangedFcn = createCallbackFcn(app, @BlurSliderValueChanged, true);

app.BlurSlider.FontSize = 18;

app.BlurSlider.FontWeight = 'bold';

app.BlurSlider.Position = [1316 471 229 3];

% Create BLURButton

app.BLURButton = uibutton(app.UIFigure, 'push');

app.BLURButton.ButtonPushedFcn = createCallbackFcn(app, @BLURButtonPushed, true);

app.BLURButton.BackgroundColor = [0 0 0];

app.BLURButton.FontWeight = 'bold';

app.BLURButton.FontColor = [1 1 1];

app.BLURButton.Position = [1124 424 171 60];

app.BLURButton.Text = 'BLUR';

% Create SMOOTHButton

app.SMOOTHButton = uibutton(app.UIFigure, 'push');

app.SMOOTHButton.ButtonPushedFcn = createCallbackFcn(app, @SMOOTHButtonPushed, true);

app.SMOOTHButton.BackgroundColor = [0 0 0];

app.SMOOTHButton.FontWeight = 'bold';

app.SMOOTHButton.FontColor = [1 1 1];

app.SMOOTHButton.Position = [1124 521 171 70];

app.SMOOTHButton.Text = 'SMOOTH';

% Create SmoothSlider

app.SmoothSlider = uislider(app.UIFigure);

app.SmoothSlider.ValueChangedFcn = createCallbackFcn(app, @SmoothSliderValueChanged, true);

app.SmoothSlider.FontSize = 18;

app.SmoothSlider.FontWeight = 'bold';

app.SmoothSlider.Position = [1318 578 229 3];

% Create BirdButton

app.BirdButton = uibutton(app.UIFigure, 'push');

app.BirdButton.ButtonPushedFcn = createCallbackFcn(app, @BirdButtonPushed, true);

app.BirdButton.BackgroundColor = [0.149 0.149 0.149];

app.BirdButton.FontColor = [1 1 1];

app.BirdButton.Position = [1300 620 84 40];

app.BirdButton.Text = 'Bird';

% Create SELECTIMAGELabel

app.SELECTIMAGELabel = uilabel(app.UIFigure);

app.SELECTIMAGELabel.FontSize = 16;

app.SELECTIMAGELabel.FontWeight = 'bold';

app.SELECTIMAGELabel.Position = [1164 634 131 30];

app.SELECTIMAGELabel.Text = 'SELECT IMAGE:';

% Create EditField_image

app.EditField_image = uieditfield(app.UIFigure, 'text');

app.EditField_image.FontSize = 16;

app.EditField_image.FontWeight = 'bold';

app.EditField_image.Position = [1371 679 122 29];

% Create GREYSCALEButton

app.GREYSCALEButton = uibutton(app.UIFigure, 'push');

app.GREYSCALEButton.ButtonPushedFcn = createCallbackFcn(app, @GREYSCALEButtonPushed, true);

app.GREYSCALEButton.BackgroundColor = [0 0 0];

app.GREYSCALEButton.FontWeight = 'bold';

app.GREYSCALEButton.FontColor = [1 1 1];

app.GREYSCALEButton.Position = [1124 324 171 60];

app.GREYSCALEButton.Text = 'GREYSCALE';

% Create RESETButton

app.RESETButton = uibutton(app.UIFigure, 'push');

app.RESETButton.ButtonPushedFcn = createCallbackFcn(app, @RESETButtonPushed, true);

app.RESETButton.BackgroundColor = [0 0 0];

app.RESETButton.FontWeight = 'bold';

app.RESETButton.FontColor = [1 1 1];

app.RESETButton.Position = [1133 11 171 60];

app.RESETButton.Text = 'RESET';

% Create GREYSlider

app.GREYSlider = uislider(app.UIFigure);

app.GREYSlider.ValueChangedFcn = createCallbackFcn(app, @GREYSliderValueChanged, true);

app.GREYSlider.FontSize = 18;

app.GREYSlider.FontWeight = 'bold';

app.GREYSlider.Position = [1316 371 229 3];

% Create EXITButton

app.EXITButton = uibutton(app.UIFigure, 'push');

app.EXITButton.ButtonPushedFcn = createCallbackFcn(app, @EXITButtonPushed, true);

app.EXITButton.BackgroundColor = [0 0 0];

app.EXITButton.FontWeight = 'bold';

app.EXITButton.FontColor = [1 1 1];

app.EXITButton.Position = [1380 15 170 60];

app.EXITButton.Text = 'EXIT';

% Create CameraButton

app.CameraButton = uibutton(app.UIFigure, 'push');

app.CameraButton.ButtonPushedFcn = createCallbackFcn(app, @CameraButtonPushed, true);

app.CameraButton.BackgroundColor = [0.149 0.149 0.149];

app.CameraButton.FontColor = [1 1 1];

app.CameraButton.Position = [1392 620 84 40];

app.CameraButton.Text = 'Camera';

% Create PhoneButton

app.PhoneButton = uibutton(app.UIFigure, 'push');

app.PhoneButton.ButtonPushedFcn = createCallbackFcn(app, @PhoneButtonPushed, true);

app.PhoneButton.BackgroundColor = [0.149 0.149 0.149];

app.PhoneButton.FontColor = [1 1 1];

app.PhoneButton.Position = [1483 620 84 40];

app.PhoneButton.Text = 'Phone';

% Create ContextMenu

app.ContextMenu = uicontextmenu(app.UIFigure);

% Create Menu

app.Menu = uimenu(app.ContextMenu);

app.Menu.Text = 'Menu';

% Assign app.ContextMenu

app.SmoothSlider.ContextMenu = app.ContextMenu;

% Show the figure after all components are created

app.UIFigure.Visible = 'on';

end

end

% App creation and deletion

methods (Access = public)

% Construct app

function app = second(varargin)

% Create UIFigure and components

createComponents(app)

% Register the app with App Designer

registerApp(app, app.UIFigure)

% Execute the startup function

runStartupFcn(app, @(app)startupFcn(app, varargin{:}))

if nargout == 0

clear app

end

end

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.UIFigure)

end

end

end

[yanqi liu]

yes，sir，may be upload your mlapp file，so we can make some debug

[Image Analyst]

Yes, use the paperclip icon to attach the file because when I copied and pasted your code into second.mlapp, it did not work.

[Capx]

@Image Analyst here is the file

[Image Analyst]

Evidently I'm going to need your demo images also.

[Capx]

The images @Image Analyst

[yanqi liu]

yes，sir，what is

Smooth, Blur and greyscale

callback，may be modify it just to run，such as

Please use your Smooth, Blur and greyscale process method to update

[Capx]

@yanqi liu @Image Analyst Thank you for your assistance. Last but not least, could you assist me with the filter reset button? When I press the reset button, I want the sliders to be reset.

[yanqi liu]

yes，sir，please use

            app.SmoothSlider.Value=0;
            app.GREYSlider.Value=0;
            app.BlurSlider.Value=0;

in reset callback

Answer 2

[Image Analyst]

In the slider callback you can

1. Get the value of the slider
2. Construct a kernel to do blurring, like kernel = ones(sliderValue)/sliderValue^2
3. Blur the image using blurredImage = imfilter(inputImage, kernel);
4. Display the blurred image