How to use WindowButtonMotionFcn correctly in App Desinger?

Hi, i had the task to programm a "painting program". We could use then normal Matlab Script or Guide. It was no problem to do it with matlab script but i tried out to do it with the App Designer. There i have a problem with the WindowButtonMotionFcn. Everytime when i moved the mouse over the figure i got a lot of failure messages.

Iam new in Matlab,. Some hints would be really nice to solve the problem.

This is the code whcih works. I tried to use the same logic for the App Designer Code.

function Malen()
fh=figure('WindowButtonDownFcn',@Callback_MausD,'units','pixel','Position',[200 200 900 600]);
ah=axes('parent',fh,'units','pixel','Position',[350 150 500 400],'xtick',[],'ytick',[],'xcolor','w','ycolor','w');
axis([0 500 0 400]);
set(fh,'Toolbar','none');                                                   %Deaktiviert Toolbar
set(fh,'Menubar','none');                                                   %Deaktiviert das Menü
set(fh,'NumberTitle','off');                                                %Deaktiveiert die "Figure Aufzählung"
set(fh,'Name','Painty 2.0');                                         

xValue=0;
yValue=0;
linewidth=1;
Border=0;
color='Black';

%% Buttons

bg=uibuttongroup('Parent',fh,'units','pixel','Position',[50 250 200 300],'SelectionChangedFcn',@Callback_bg);

uicontrol(bg,'Style','radio','String','black','Position',[10 260 190 40],'FontSize',12);
uicontrol(bg,'Style','radio','String','red','Position',[10 220 190 40],'FontSize',12);
uicontrol(bg,'Style','radio','String','green','Position',[10 180 190 40],'FontSize',12);
uicontrol(bg,'Style','radio','String','blue','Position',[10 140 190 40],'FontSize',12);
uicontrol(bg,'Style','radio','String','white','Position',[10 100 190 40],'FontSize',12);

b=uicontrol('Style','radio','String','Painting Borders','Position',[350 560 200 40],'FontSize',12,'Callback',@Callback_border);

uicontrol('Style','push','String','Clear','Position',[50 190 200 50],'FontSize',12,'Callback',@Callback_clear);
uicontrol('Style','push','String','Save','Position',[50 110 200 50],'FontSize',12,'Callback',@Callback_save);
uicontrol('Style','push','String','Quit','Position',[50 30 200 50],'FontSize',12,'Callback',@Callback_quit);

slider=uicontrol('Style','slider','Value',linewidth,'min',1,'max',10,'SliderStep',[1/9 1/9],'Position',[350 30 500 50],'Callback',@Callback_slider);


%% Callbacks
    function Callback_border(~,~)
        Border=get(b,'Value');
              
    end


    function Callback_MausD(src,~)
        if strcmp(get(src,'SelectionType'),'normal')
            hold on
            cp = get(ah,'CurrentPoint');
                    
            
            xValue=cp(1,1);
            yValue=cp(1,2);
            
            %line(ah,[xValue xValue],[yValue yValue],'color','k');           
            scatter(ah,xValue,yValue,'Marker','.','MarkerFaceColor',color,'MarkerEdgeColor',color,'LineWidth',linewidth);
            
            
            
            x=set(src,'WindowButtonMotionFcn',@Callback_MausB)          %Aufrufen der weiteren Calback funktionen
            o=set(src,'WindowButtonUpFcn',@Callback_MausL)
            drawnow
            hold off
        end 
    end
    
    function Callback_MausB(~,~)
        
            hold on
            
            cp = get(ah,'CurrentPoint');
            
         if Border==1
            if cp(1,1)<0
                cp(1,1)=0;
            end
            
            if cp(1,1)>500
                cp(1,1)=500;
            end
            
            if cp(1,2)>400
                cp(1,2)=400;
            end
            
             if cp(1,2)<0
                cp(1,2)=0;
            end
            
            line(ah,[xValue cp(1,1)],[yValue cp(1,2)] ,'color',color,'LineWidth',linewidth)           
         else
            
             if cp(1,1)>=0 || cp(1,2)>=0 || cp(1,1)<=500|| cp(1,2)<=400
             
             line(ah,[xValue cp(1,1)],[yValue cp(1,2)] ,'color',color,'LineWidth',linewidth)
             end
         end
            xValue = cp(1,1);
            yValue = cp(1,2);
            drawnow
            hold off
        
        
    end



    function Callback_MausL(src,~)
        if strcmp(get(src,'SelectionType'),'normal')
           s=set(src,'WindowButtonMotionFcn','')
           g=set(src,'WindowButtonUpFcn','')
         end
        
        
    end



    function Callback_bg(~,event)
        color=event.NewValue.String;
    end


    function Callback_slider(~,~)
        linewidth=slider.Value;
          
    end


    function Callback_clear(~,~)
        cla(ah);
        
        
    end


    function Callback_save(~,~)
      
       [file,path] = uiputfile('*.png');
       filename = fullfile(path,file);
       
       if file==0
           return
       end
       
       fr = getframe(ah);
       imwrite(fr.cdata,filename)
   
    end

    function Callback_quit(~,~)
        close(fh);

    end

end

This is the code of the App Designer:

classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure      matlab.ui.Figure
        UIAxes        matlab.ui.control.UIAxes
        ButtonGroup   matlab.ui.container.ButtonGroup
        blackButton   matlab.ui.control.RadioButton
        redButton     matlab.ui.control.RadioButton
        blueButton    matlab.ui.control.RadioButton
        greenButton   matlab.ui.control.RadioButton
        whiteButton   matlab.ui.control.RadioButton
        SaveButton    matlab.ui.control.Button
        clearButton   matlab.ui.control.Button
        QuitButton    matlab.ui.control.Button
        SliderLabel   matlab.ui.control.Label
        Slider        matlab.ui.control.Slider
        SpinnerLabel  matlab.ui.control.Label
        Spinner       matlab.ui.control.Spinner
        LampLabel     matlab.ui.control.Label
        Lamp          matlab.ui.control.Lamp
    end

    
    properties (Access = public)
        xValue=0;
        yValue=0;
        linewidth=1;
        Border=0;
        color='red';
       
    end
    
    
    

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

        % Window button down function: UIFigure
        function Callback_MausD(app, event)
            
            if strcmp(app.UIFigure.SelectionType,'normal')
            hold(app.UIAxes,'on') 
            cp = app.UIAxes.CurrentPoint;
               disp('Furz')      
       
            
            app.xValue=cp(1,1);
            app.yValue=cp(1,2);
            
    
            scatter(app.UIAxes,app.xValue,app.yValue,'Marker','.','MarkerFaceColor',app.color,'MarkerEdgeColor',app.color,'LineWidth',app.linewidth);
            
          
            
             app.UIFigure.WindowButtonMotionFcn=@Callback_MausB;         
             app.UIFigure.WindowButtonUpFcn=@Callback_MausL;
            end
     
           
            function Callback_MausB(app,event)
              
            disp('PUPS')
%             if strcmp(app.UIFigure.SelectionType,'normal')
            cp = app.UIAxes.CurrentPoint;
             hold(app.UIAxes,'on') 
            if app.Border==1
                if  cp(1,1)<0
                     cp(1,1)=0;
                end
            
                if  cp(1,1)>500
                    cp(1,1)=500;
                end
            
                if  cp(1,2)>400
                    cp(1,2)=400;
                end
            
                if  cp(1,2)<0
                    cp(1,2)=0;
                end
            
                line(app.UIAxes,[app.xValue  cp(1,1)],[app.yValue  cp(1,2)] ,'color',app.color,'LineWidth',app.linewidth)           
            else
            
             if  cp(1,1)>=0 ||  cp(1,2)>=0 ||  cp(1,1)<=500||  cp(1,2)<=400
             
             line(app.UIAxes,[app.xValue  cp(1,1)],[app.yValue  cp(1,2)] ,'color',app.color,'LineWidth',app.linewidth)
             end
            end
           app.xValue =  cp(1,1);
           app.yValue =  cp(1,2);
           drawnow
              
            %end
        end
          
        
            function Callback_MausL(app,event)
%          
            if strcmp(app.UIFigure.SelectionType,'normal')
            set(app.UIFigure,'WindowButtonMotionFcn','')          
            set(app.UIFigure,'WindowButtonUpFcn','')
            else
                return
            end
       

        end
            
            
            
            
            
            
            
 
            
            
            
            
            
            
            
              
        end

        % Selection changed function: ButtonGroup
        function ButtonGroupSelectionChanged(app, event)
            selectedButton = app.ButtonGroup.SelectedObject;
            app.color=selectedButton.Text;
          
        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.Color = [0.9412 0.9412 0.9412];
            app.UIFigure.Position = [100 100 689 562];
            app.UIFigure.Name = 'UI Figure';
            app.UIFigure.WindowButtonDownFcn = createCallbackFcn(app, @Callback_MausD, true);

            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, '')
            xlabel(app.UIAxes, '')
            ylabel(app.UIAxes, '')
            app.UIAxes.XLim = [0 500];
            app.UIAxes.YLim = [0 400];
            app.UIAxes.XAxisLocation = 'origin';
            app.UIAxes.XColor = 'none';
            app.UIAxes.XTick = [];
            app.UIAxes.YColor = 'none';
            app.UIAxes.YTick = [];
            app.UIAxes.ZColor = 'none';
            app.UIAxes.Position = [163 128 500 400];

            % Create ButtonGroup
            app.ButtonGroup = uibuttongroup(app.UIFigure);
            app.ButtonGroup.SelectionChangedFcn = createCallbackFcn(app, @ButtonGroupSelectionChanged, true);
            app.ButtonGroup.BackgroundColor = [0.8 0.8 0.8];
            app.ButtonGroup.Position = [19 350 125 178];

            % Create blackButton
            app.blackButton = uiradiobutton(app.ButtonGroup);
            app.blackButton.Text = 'black';
            app.blackButton.FontWeight = 'bold';
            app.blackButton.Position = [11 151 53 22];
            app.blackButton.Value = true;

            % Create redButton
            app.redButton = uiradiobutton(app.ButtonGroup);
            app.redButton.Text = 'red';
            app.redButton.FontWeight = 'bold';
            app.redButton.FontColor = [1 0 0];
            app.redButton.Position = [11 129 65 22];

            % Create blueButton
            app.blueButton = uiradiobutton(app.ButtonGroup);
            app.blueButton.Text = 'blue';
            app.blueButton.FontWeight = 'bold';
            app.blueButton.FontColor = [0 0 1];
            app.blueButton.Position = [11 107 65 22];

            % Create greenButton
            app.greenButton = uiradiobutton(app.ButtonGroup);
            app.greenButton.Text = 'green';
            app.greenButton.FontColor = [0 1 0];
            app.greenButton.Position = [11 86 65 22];

            % Create whiteButton
            app.whiteButton = uiradiobutton(app.ButtonGroup);
            app.whiteButton.Text = 'white';
            app.whiteButton.FontColor = [1 1 1];
            app.whiteButton.Position = [11 65 65 22];

            % Create SaveButton
            app.SaveButton = uibutton(app.UIFigure, 'push');
            app.SaveButton.HorizontalAlignment = 'left';
            app.SaveButton.FontWeight = 'bold';
            app.SaveButton.Position = [19 269 100 22];
            app.SaveButton.Text = 'Save';

            % Create clearButton
            app.clearButton = uibutton(app.UIFigure, 'push');
            app.clearButton.HorizontalAlignment = 'left';
            app.clearButton.FontWeight = 'bold';
            app.clearButton.Position = [19 203 100 22];
            app.clearButton.Text = 'clear';

            % Create QuitButton
            app.QuitButton = uibutton(app.UIFigure, 'push');
            app.QuitButton.HorizontalAlignment = 'left';
            app.QuitButton.FontWeight = 'bold';
            app.QuitButton.Position = [19 137 100 22];
            app.QuitButton.Text = {'Quit'; ''};

            % Create SliderLabel
            app.SliderLabel = uilabel(app.UIFigure);
            app.SliderLabel.HorizontalAlignment = 'right';
            app.SliderLabel.Position = [163 107 36 22];
            app.SliderLabel.Text = 'Slider';

            % Create Slider
            app.Slider = uislider(app.UIFigure);
            app.Slider.Limits = [1 10];
            app.Slider.MajorTicks = 0.111111111111111;
            app.Slider.MinorTicks = 0.111111111111111;
            app.Slider.Position = [220 116 432 3];
            app.Slider.Value = 1;

            % Create SpinnerLabel
            app.SpinnerLabel = uilabel(app.UIFigure);
            app.SpinnerLabel.HorizontalAlignment = 'right';
            app.SpinnerLabel.Position = [163 62 47 22];
            app.SpinnerLabel.Text = 'Spinner';

            % Create Spinner
            app.Spinner = uispinner(app.UIFigure);
            app.Spinner.Limits = [1 10];
            app.Spinner.HorizontalAlignment = 'center';
            app.Spinner.Position = [225 62 100 22];
            app.Spinner.Value = 1;

            % Create LampLabel
            app.LampLabel = uilabel(app.UIFigure);
            app.LampLabel.HorizontalAlignment = 'right';
            app.LampLabel.Position = [22 73 36 22];
            app.LampLabel.Text = 'Lamp';

            % Create Lamp
            app.Lamp = uilamp(app.UIFigure);
            app.Lamp.Position = [73 73 20 20];

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

            % 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

Answer 1

[Nitin Kapgate]

To port the MATLAB code to App Designer code, a bit of restructuring of code should be done to take advantage of App Designer features.

In your case, when I ran the app1.mlapp file, App Designer throws an error in a callback. So you can restructure the callback code using App Designer.

You can refer to this guide to learn about Writing Callbacks in App Designer.

You can also refer to this vlog about WindowButtonMotionFcn Callback.