In app designer, how do I use sliders to control the RGB colour thresholds for a live webcam video.

I am tring to apply thresholds to a live video from my webcam. I can apply static thresholds (ie. I use a fixed range for r,g and b) to a live image, however I would like to use sliders so that I can dynamically change the threshold values for the live video feed.

I realise that this is likely going to be something to do with callbacks, but I cannot wrap my head around using them to change aspects of a live video. I am new to using app designer and not strong with programming.

classdef Colour_Threshholding < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure             matlab.ui.Figure
        GridLayout           matlab.ui.container.GridLayout
        LeftPanel            matlab.ui.container.Panel
        ValueEditField       matlab.ui.control.NumericEditField
        ValueEditFieldLabel  matlab.ui.control.Label
        RedmaxSlider         matlab.ui.control.Slider
        RedmaxSliderLabel    matlab.ui.control.Label
        RedminSlider         matlab.ui.control.Slider
        RedminSliderLabel    matlab.ui.control.Label
        RightPanel           matlab.ui.container.Panel
        StartButton          matlab.ui.control.Button
        UIAxes               matlab.ui.control.UIAxes
    end

    % Properties that correspond to apps with auto-reflow
    properties (Access = private)
        onePanelWidth = 576;
    end

    
    properties (Access = private)
        cam; % Description
    end
    
    methods (Access = private)
        
        
        
        function [redMin, redMax] = Thresholds(app)
            redMin = app.RedminSlider.Value;
            redMax = app.RedmaxSlider.Value;
        end
    end
    

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

        % Button pushed function: StartButton
        function StartButtonPushed(app, event)
            [redMin, redMax] = Thresholds(app);
            app.cam = webcam;
            frame = snapshot(app.cam);
            %Masking go here
            
            sliderBW = (frame(:,:,1) >= redMin) & (frame(:,:,1) <= redMax);
            Img_masked = imoverlay(frame, sliderBW, 'blue');
            im = image(app.UIAxes,zeros(size(app.cam), 'uint8'));
            axis(app.UIAxes, 'image')
            
            % preview(Img_masked, im);
            preview(app.cam, im);
            
        end

        % Value changed function: RedminSlider
        function RedminSliderValueChanged(app, event)
            value = app.RedminSlider.Value;
            app.ValueEditField.Value = value;
            app.Thresholds = value;
        end

        % Value changed function: RedmaxSlider
        function RedmaxSliderValueChanged(app, event)
            value = app.RedmaxSlider.Value;
            app.Thresholds.redMax = value;
            
        end

        % Value changed function: ValueEditField
        function ValueEditFieldValueChanged(app, event)
            value = app.ValueEditFieldValueChanged.Value;
            
        end

        % Changes arrangement of the app based on UIFigure width
        function updateAppLayout(app, event)
            currentFigureWidth = app.UIFigure.Position(3);
            if(currentFigureWidth <= app.onePanelWidth)
                % Change to a 2x1 grid
                app.GridLayout.RowHeight = {480, 480};
                app.GridLayout.ColumnWidth = {'1x'};
                app.RightPanel.Layout.Row = 2;
                app.RightPanel.Layout.Column = 1;
            else
                % Change to a 1x2 grid
                app.GridLayout.RowHeight = {'1x'};
                app.GridLayout.ColumnWidth = {242, '1x'};
                app.RightPanel.Layout.Row = 1;
                app.RightPanel.Layout.Column = 2;
            end
        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.AutoResizeChildren = 'off';
            app.UIFigure.Position = [100 100 662 480];
            app.UIFigure.Name = 'MATLAB App';
            app.UIFigure.SizeChangedFcn = createCallbackFcn(app, @updateAppLayout, true);

            % Create GridLayout
            app.GridLayout = uigridlayout(app.UIFigure);
            app.GridLayout.ColumnWidth = {242, '1x'};
            app.GridLayout.RowHeight = {'1x'};
            app.GridLayout.ColumnSpacing = 0;
            app.GridLayout.RowSpacing = 0;
            app.GridLayout.Padding = [0 0 0 0];
            app.GridLayout.Scrollable = 'on';

            % Create LeftPanel
            app.LeftPanel = uipanel(app.GridLayout);
            app.LeftPanel.Layout.Row = 1;
            app.LeftPanel.Layout.Column = 1;

            % Create RedminSliderLabel
            app.RedminSliderLabel = uilabel(app.LeftPanel);
            app.RedminSliderLabel.HorizontalAlignment = 'right';
            app.RedminSliderLabel.Position = [7 446 50 22];
            app.RedminSliderLabel.Text = 'Red min';

            % Create RedminSlider
            app.RedminSlider = uislider(app.LeftPanel);
            app.RedminSlider.Limits = [0 255];
            app.RedminSlider.ValueChangedFcn = createCallbackFcn(app, @RedminSliderValueChanged, true);
            app.RedminSlider.Position = [78 455 150 3];

            % Create RedmaxSliderLabel
            app.RedmaxSliderLabel = uilabel(app.LeftPanel);
            app.RedmaxSliderLabel.HorizontalAlignment = 'right';
            app.RedmaxSliderLabel.Position = [8 398 53 22];
            app.RedmaxSliderLabel.Text = 'Red max';

            % Create RedmaxSlider
            app.RedmaxSlider = uislider(app.LeftPanel);
            app.RedmaxSlider.Limits = [0 255];
            app.RedmaxSlider.ValueChangedFcn = createCallbackFcn(app, @RedmaxSliderValueChanged, true);
            app.RedmaxSlider.Position = [82 407 150 3];
            app.RedmaxSlider.Value = 255;

            % Create ValueEditFieldLabel
            app.ValueEditFieldLabel = uilabel(app.LeftPanel);
            app.ValueEditFieldLabel.HorizontalAlignment = 'right';
            app.ValueEditFieldLabel.Position = [56 279 35 22];
            app.ValueEditFieldLabel.Text = 'Value';

            % Create ValueEditField
            app.ValueEditField = uieditfield(app.LeftPanel, 'numeric');
            app.ValueEditField.ValueChangedFcn = createCallbackFcn(app, @ValueEditFieldValueChanged, true);
            app.ValueEditField.Position = [106 279 100 22];

            % Create RightPanel
            app.RightPanel = uipanel(app.GridLayout);
            app.RightPanel.Layout.Row = 1;
            app.RightPanel.Layout.Column = 2;

            % Create UIAxes
            app.UIAxes = uiaxes(app.RightPanel);
            title(app.UIAxes, 'Title')
            xlabel(app.UIAxes, 'X')
            ylabel(app.UIAxes, 'Y')
            zlabel(app.UIAxes, 'Z')
            app.UIAxes.Position = [16 114 369 230];

            % Create StartButton
            app.StartButton = uibutton(app.RightPanel, 'push');
            app.StartButton.ButtonPushedFcn = createCallbackFcn(app, @StartButtonPushed, true);
            app.StartButton.Position = [161 409 100 23];
            app.StartButton.Text = 'Start';

            % 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 = Colour_Threshholding

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            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

Currently, I have a start button that starts the video feed. This is button is not essential to the program.

I would like the sliders to change the threshold values without me having to press another video.

I have only included two sliders, redMin and redMax because i figured, once I have one working I cna get the other four sliders working.

The value edit field just displays the value of redMin, it does this when the mouse button is released.

If I am missing anything you need please let me know and I will add it.

Thanks,

Benedict

Answer 1

[Rishi]

Hi Benedict,

I understand that you would like to know how to use the value set in a slider, so that you can apply them dynamically as a colour threshold to the live video.

You can use the slider callback ‘ValueChangedFnc’ for your task. This callback function executes whenever you change the value of the slider. You can refer to the below documentation to learn more about slider properties and how to use them effectively:

https://www.mathworks.com/help/matlab/ref/matlab.ui.control.slider-properties.html

To learn more about callbacks in App Designer, you can refer to the below documentation:

https://www.mathworks.com/help/matlab/creating_guis/write-callbacks-for-gui-in-app-designer.html

Hope it helps.

Regards,

Rishi Shrimal

Answer 2

[Benedict]

Thanks! I will give those a go!