How to plot live data from Arduino UNO to App designer.

Hi everyone,

I'm using an arduino UNO and MATLAB to plot sine wave points using serial communciation. My live data plotting in MATLAB script works perfectly and is shown below. However, I'm looking to use app designer to show the live data logging on the axes and where the app would only run when the 'Start' button is selected. I'm not too sure where to start, but I've tried to implment my matlab script code into app designer but have had no luck.

clear all;
delete(instrfindall);
clear;
close all;
clc;
 

serialPort = 'COM3';            
plotTitle = 'Sine Wave';  
xLabel = 'Time (s)';            
yLabel = 'Data';                
plotGrid = 'on';                
min = -1.5;                     
max = 1.5;                                   
delay = .01;                   
 
%Define Function Variables
time = 0;
data = 0;
count = 0;
 
%Set up Plot
plotGraph = plot(time,data,'-r');
             
title(plotTitle,'FontSize',18);
xlabel(xLabel,'FontSize',15);
ylabel(yLabel,'FontSize',15);
axis([0 10 min max]);
grid(plotGrid);
 
%Open Serial COM Port
s= serial(serialPort);
disp('Close Plot to clear data');
fopen(s);


% start stopwatch timer
tic 
 
%Loop when Plot is Active
while time <=50
    
    %Read Data from Serial as Float
    dat = fscanf(s,'%f'); 
  
    if(~isempty(dat) && isfloat(dat)) %Make sure Data Type is Correct        
        count = count + 1;    
        time(count) = toc;    %stop the stopwatch and extract time
        data(count) = dat(1); %Extract 1st Data Element        
    
        set(plotGraph,'XData',time,'YData',data);
        axis([0 time(count) min max]);
    end
         
        %Allow MATLAB to Update Plot
        pause(delay);
    
end
 
%Close Serial COM Port and Delete useless Variables
fclose(s);
clear count dat delay max min plotGraph plotGrid plotTitle s ...
        serialPort xLabel yLabel;
 
 

Answer 1

[Benjamin Kraus]

At a very high level:

1. Create a new app in App Designer. See the tutorials linked below for how to get started.
2. Add at least a button and an axes to the app.
3. Add a callback to the button that runs your code.
4. Update the code to always use an axes handle.

For an example of the last step, this block of your code:

plotGraph = plot(time,data,'-r');
title(plotTitle,'FontSize',18);
xlabel(xLabel,'FontSize',15);
ylabel(yLabel,'FontSize',15);
axis([0 10 min max]);
grid(plotGrid);

Needs to be updated to look like this:

ax = app.UIAxes % Use the name you give your axes in your app.
plotGraph = plot(ax, time,data,'-r');
title(ax, plotTitle,'FontSize',18);
xlabel(ax, xLabel,'FontSize',15);
ylabel(ax, yLabel,'FontSize',15);
axis(ax, [0 10 min max]);
grid(ax, plotGrid);

For more details, see these doc pages:

• Develop Apps Using App Designer
• Create and Run a Simple App Using App Designer
• Display Graphics in App Designer
• Write Callbacks in App Designer

If you run into complications after going through those doc pages, I suggest posting a more specific question about the specific complication you run into.

[Ashleigh Reid]

Hi @Benjamin Kraus,

I have manged to plot the sine wave on app designer, however the sine wave only plots for 10 seconds on the axes. A second figure appears with the scrolling the axes but no data plot.

I'm trying to chnage the code so that the axes is scrolling in the app but can't seem to figure it out. Mnay thanks.

classdef livedata < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure     matlab.ui.Figure
        StartButton  matlab.ui.control.Button
        UIAxes       matlab.ui.control.UIAxes
    end

  
    

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

        % Code that executes after component creation
        function startupFcn(app)
         
        end

        % Button pushed function: StartButton
        function StartButtonPushed(app, event)

delete(instrfindall);
% clear;
clc;
 
serialPort = 'COM3';            
plotTitle = 'Sine Wave';  
xLabel = 'Time (s)';            
yLabel = 'Data';                
plotGrid = 'on';                
min = -1.5;                     
max = 1.5;                                   
delay = .01;                   
 
%Define Function Variables
time = 0;
data = 0;
count = 0;
 
%Set up Plot
ax = app.UIAxes;
plotGraph = plot(ax, time,data,'-r');
title(ax, plotTitle,'FontSize',18);
xlabel(ax, xLabel,'FontSize',15);
ylabel(ax, yLabel,'FontSize',15);
axis(ax, [0 10 min max]);
grid(ax, plotGrid);
 
%Open Serial COM Port
s= serial(serialPort);
fopen(s);

% start stopwatch timer
tic 
 
%Loop when Plot is Active
while time <=50
    
    %Read Data from Serial as Float
    dat = fscanf(s,'%f'); 
  
    if(~isempty(dat) && isfloat(dat)) %Make sure Data Type is Correct        
        count = count + 1;    
        time(count) = toc;    %stop the stopwatch and extract time
        data(count) = dat(1); %Extract 1st Data Element        
    
        set(plotGraph,'XData',time,'YData',data);
        axis([0 time(count) min max]);
    end
         
        %Allow MATLAB to Update Plot
        pause(delay);
    
end
 
%Close Serial COM Port and Delete useless Variables
fclose(s);
clear count dat delay max min plotGraph plotGrid plotTitle s ...
        serialPort xLabel yLabel ;

        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, 'Sine Wave Live Data')
            xlabel(app.UIAxes, 'Time (s)')
            ylabel(app.UIAxes, 'Data')
            zlabel(app.UIAxes, 'Z')
            app.UIAxes.XLim = [0 50];
            app.UIAxes.YLim = [-1.5 1.5];
            app.UIAxes.XTick = [0 5 10 15 20 25 30 35 40 45 50];
            app.UIAxes.XGrid = 'on';
            app.UIAxes.YGrid = 'on';
            app.UIAxes.Position = [27 114 585 336];

            % Create StartButton
            app.StartButton = uibutton(app.UIFigure, 'push');
            app.StartButton.ButtonPushedFcn = createCallbackFcn(app, @StartButtonPushed, true);
            app.StartButton.BackgroundColor = [0.3294 0.9216 0.3294];
            app.StartButton.FontWeight = 'bold';
            app.StartButton.FontColor = [0.149 0.149 0.149];
            app.StartButton.Position = [71 46 100 47];
            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 = livedata

            % Create UIFigure and components
            createComponents(app)

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

            % Execute the startup function
            runStartupFcn(app, @startupFcn)

            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

[Benjamin Kraus]

MATLAB opening a new figure is a good indication that you missed passing an axes handle into one line of code. In this case, it is the call to axis:

axis([0 time(count) min max]);

You need to pass an axes handle into the axis command.

axis(ax,[0 time(count) min max]);

If you see this issue again, my recommendation is to add a breakpoint at the beginning of your code, and step through the code one line at a time until the new figure appears. That is most likely the line that needs to be updated.

Answer 2

[Fazli Wadood]

To plot Analoge voltage using app UIaxis below code is working copy code and paste in push button callblock

 clc
    global b
    b = arduino;
    x1=0;
    
    global go
    go=true;
    
    while go
        tempA1 = readVoltage(b, 'A0');
        tempA2 = 32+(9/5)*(tempA1*100);
        x1=[x1 tempA2];
        plot(app.UIAxes,x1);
        drawnow
        pause(1);
    end