Smooth, Blur and greyscale filter using a slider

Question

Capx 2021-12-19

0
链接

此问题的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/1614310-smooth-blur-and-greyscale-filter-using-a-slider

评论： yanqi liu 2021-12-23

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.

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

请先登录，再进行评论。

请先登录，再回答此问题。

Answer 1

yanqi liu 2021-12-20

0
链接

此回答的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/1614310-smooth-blur-and-greyscale-filter-using-a-slider#answer_858785

在 MATLAB Online 中打开

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

13 个评论
显示 11更早的评论隐藏 11更早的评论

Capx 2021-12-20

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

% 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

% 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

% 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

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.UIFigure)

end

Capx 2021-12-22

@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 2021-12-23

在 MATLAB Online 中打开

second.mlapp

yes，sir，please use

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

in reset callback

请先登录，再进行评论。

Answer 2

Image Analyst 2021-12-20

1
链接

此回答的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/1614310-smooth-blur-and-greyscale-filter-using-a-slider#answer_859055

In the slider callback you can

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

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

请先登录，再进行评论。

Smooth, Blur and greyscale filter using a slider

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

采纳的回答

13 个评论
显示 11更早的评论隐藏 11更早的评论

更多回答（1 个）

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

另请参阅

类别

标签

产品

版本

Community Treasure Hunt

Smooth, Blur and greyscale filter using a slider

0 个评论 显示 -2更早的评论隐藏 -2更早的评论

采纳的回答

13 个评论 显示 11更早的评论隐藏 11更早的评论

更多回答（1 个）

0 个评论 显示 -2更早的评论隐藏 -2更早的评论

另请参阅

类别

标签

产品

版本

Community Treasure Hunt

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

13 个评论
显示 11更早的评论隐藏 11更早的评论

0 个评论
显示 -2更早的评论隐藏 -2更早的评论