A problem using the app designer

I have a problem with the app designer . The graph instead of appearing in the app , it appears in a new window as the attached photo shows

[Steven Lord]

Please show us the code you wrote that tries to create that plot in the app.

[Hassen Mohamed Yousif Abdelatif]

Here it is :

classdef mn21hmya_GUI < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)

UIFigure matlab.ui.Figure

TextArea matlab.ui.control.TextArea

TextAreaLabel matlab.ui.control.Label

PlotFitButton matlab.ui.control.Button

FitLineButton matlab.ui.control.Button

LoadDataButton matlab.ui.control.Button

UIAxes matlab.ui.control.UIAxes

end

properties (Access = private)

data % data information

voltage % Description

displacement % Description

voltage_fit % Description

displacement_fit % Description

coeffs % Description

end

% Callbacks that handle component events

methods (Access = private)

% Button pushed function: LoadDataButton

function LoadDataButtonPushed(app, event)

app.data = dlmread('sensor_calibration.txt', '\t',1,0);

app.data = dlmread('sensor_calibration.txt', '\t',1,0);

app.displacement = app.data(:,1);

app.voltage = app.data(:,2);

app.FitLineButton.Enable = 'on'

end

% Button pushed function: FitLineButton

function FitLineButtonPushed(app, event)

app.displacement = app.data(:,1);

app.voltage = app.data(:,2);

% There is a linear relationship between voltage and

% displacement. Use polyfit function to determine the relationship such

% that displacement = gain*voltage + offset. Find the two variables

% gain and offset.

app.coeffs = polyfit(app.voltage, app.displacement, 1);

gain = app.coeffs(1);

offset = app.coeffs(2);

% Display the equation relating voltage to displacement using fprintf

if offset < 0

fprintf('The relationship between distance and voltage is D = %.3fV %.3f\n',gain, offset)

else

fprintf('The relationship between distance and voltage is D = %.3fV +%.3f\n',gain, offset)

end

app.PlotFitButton.Enable = 'on'

end

% Button pushed function: PlotFitButton

function PlotFitButtonPushed(app, event)

% Create a new vector that starts at 0 and goes

% up to 7 in steps of 0.5. Assign to a column vector voltage_fit.

app.voltage_fit = 0:0.5:7;

app.voltage_fit = app.voltage_fit';

% Create a new vector, displacement_fit, for the line of

% best fit. It should be a column vector the same length as voltage_fit

% found using the calibration equation.

app.displacement_fit = polyval(app.coeffs, app.voltage_fit);

% Plot the measured displacement against voltage that came from

% the file, and the modelled line of best fit on the same figure.

% Label appropriately.

figure(1)

plot(app.voltage, app.displacement)

xlabel('voltage (v)')

ylabel('displacement (mm)')

hold on

plot(app.voltage_fit, app.displacement_fit)

legend('Raw data', 'Line fit')

hold off

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 640 480];

app.UIFigure.Name = 'MATLAB App';

% Create UIAxes

app.UIAxes = uiaxes(app.UIFigure);

title(app.UIAxes, 'Title')

xlabel(app.UIAxes, 'X')

ylabel(app.UIAxes, 'Y')

zlabel(app.UIAxes, 'Z')

app.UIAxes.Position = [120 55 345 214];

% Create LoadDataButton

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

app.LoadDataButton.ButtonPushedFcn = createCallbackFcn(app, @LoadDataButtonPushed, true);

app.LoadDataButton.Position = [50 403 100 22];

app.LoadDataButton.Text = ' Load Data';

% Create FitLineButton

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

app.FitLineButton.ButtonPushedFcn = createCallbackFcn(app, @FitLineButtonPushed, true);

app.FitLineButton.Enable = 'off';

app.FitLineButton.Position = [261 403 100 22];

app.FitLineButton.Text = 'Fit Line';

% Create PlotFitButton

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

app.PlotFitButton.ButtonPushedFcn = createCallbackFcn(app, @PlotFitButtonPushed, true);

app.PlotFitButton.Enable = 'off';

app.PlotFitButton.Position = [464 403 100 22];

app.PlotFitButton.Text = 'Plot Fit';

% Create TextAreaLabel

app.TextAreaLabel = uilabel(app.UIFigure);

app.TextAreaLabel.HorizontalAlignment = 'right';

app.TextAreaLabel.Position = [50 343 56 22];

app.TextAreaLabel.Text = 'Text Area';

% Create TextArea

app.TextArea = uitextarea(app.UIFigure);

app.TextArea.Position = [121 307 150 60];

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

% 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

Answer 1

[Abolfazl Chaman Motlagh]

in PlotFitButtonPushed function which you plot your graphs, by using figure you create new figure out of your app.UIFigure. use axes(app.UIAxes) to select the Axes in app as current Axes. or just add Axes to plot.

function PlotFitButtonPushed(app, event)
    % Create a new vector that starts at 0 and goes
    % up to 7 in steps of 0.5. Assign to a column vector voltage_fit. 
    app.voltage_fit = 0:0.5:7;
    app.voltage_fit = app.voltage_fit';
    % Create a new vector, displacement_fit, for the line of 
    % best fit. It should be a column vector the same length as voltage_fit 
    % found using the calibration equation.
    app.displacement_fit = polyval(app.coeffs, app.voltage_fit);
    % Plot the measured displacement against voltage that came from
    % the file, and the modelled line of best fit on the same figure. 
    % Label appropriately.
    axes(app.UIAxes)
    plot(app.UIAxes,app.voltage, app.displacement)
    % or just plot(app.voltage, app.displacement) because you make
    %                                       app.UIAxes curent Axes
    xlabel(app.UIAxes,'voltage (v)')
    ylabel(app.UIAxes,'displacement (mm)')
    hold(app.UIAxes,'on')
    % or just hold on
    plot(app.voltage_fit, app.displacement_fit)
    legend('Raw data', 'Line fit')
    hold(app.UIAxes,'off')
end

[Hassen Mohamed Yousif Abdelatif]

@Abolfazl Chaman Motlagh Thanks for getting back, it works now.

Another samll question if I wnat to add text in 'text area' I just write on it , right? The one that with fprintf .

[Abolfazl Chaman Motlagh]

Happy to Help.

Yes you can just write on it. and also if you want to change the text in code or during process you can use Value field to edit :

app.TextArea.Value = {'Sample Text' ; 'Sample Text 2'};

this will write 2 lines for example.

Answer 2

[Peter Bonavita]

Hi Hassen,

I understand your app generates a plot, but the plot appears in a figure outside the app. In your app's call to plot, you can specify the axis where you want the plot to appear.

Check out lines 70-71 of the .MLAPP file from this example. You can open the app using this command, then view the code shown below in the code view:

>> openExample('matlab/MortgageCalculatorExample')

Here's the code, in this case it shows the plot targets the axis at app.PrincipalInterestUIAxes

% Plot the principal and interest
            plot(app.PrincipalInterestUIAxes,(1:nper)',principal, ...
                (1:nper)',interest);
            legend(app.PrincipalInterestUIAxes,{'Principal','Interest'},'Location','Best')
            xlim(app.PrincipalInterestUIAxes,[0 nper]); 

I wasn't able to reproduce using your app but it looks like you'll just need to add app.UIAxes in your calls to plot, something like:

plot(app.UIAxes, app.voltage, app.displacement)

Hope this helps,

Peter