MATLAB Answers

How to use WindowButtonMotionFcn correctly in App Desinger?

17 views (last 30 days)
Alexander Bröckling
Alexander Bröckling on 15 Dec 2020
Answered: Nitin Kapgate on 18 Dec 2020
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

Answers (1)

Nitin Kapgate
Nitin Kapgate on 18 Dec 2020
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.

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!