trajectoryVisualizationApp.m

Go to the documentation of this file.

% =========================================================================== %
%> @brief app that can be used to visualize a Trajectory object
%>
%> This app is designed to visualize a Trajectory object either from the
%> workspace or from the trajectoryGenerationApp. It provides a 3D plot of the
%> trajectory, a zoomed in plot of the current position and orientation, and
%> controls to play, pause, and skip through the trajectory.
%>
%> The app is designed to be used with the Trajectory object which must have
%> a minimum of one Waypoint entry. The Trajectory object can be generated
%> from the trajectoryGenerationApp or manually, like in the @ref trajectoryExample.m
%> @code
%> app = trajectoryVisualizationApp(traj);
%> @endcode
%>
%> @copyright see the file @ref LICENSE in the root directory of the repository
%>
%> \par Example Usage
%> 
%> \image html trajectoryVisualizationApp.gif
% =========================================================================== %
 
classdef trajectoryVisualizationApp < matlab.apps.AppBase
 
    % Properties that correspond to app components
    properties (Access = public)
        TrajectoryVisualizationUIFigure  matlab.ui.Figure
        gridMain              matlab.ui.container.GridLayout
        gridSettingsZoom      matlab.ui.container.GridLayout
        gridSettings          matlab.ui.container.GridLayout
        gridSettingsCtrl      matlab.ui.container.GridLayout
        ZoomSlider            matlab.ui.control.Slider
        ZoomSliderLabel       matlab.ui.control.Label
        PlaySpeedSlider       matlab.ui.control.Slider
        PlaySpeedSliderLabel  matlab.ui.control.Label
        SettingsLabel         matlab.ui.control.Label
        axTrajZoom            matlab.ui.control.UIAxes
        gridControl           matlab.ui.container.GridLayout
        gridControlBtns       matlab.ui.container.GridLayout
        fldCurrTime           matlab.ui.control.EditField
        btnGoToOut            matlab.ui.control.Button
        gridPlay              matlab.ui.container.GridLayout
        btnPlayPause          matlab.ui.control.StateButton
        btnNextFrame          matlab.ui.control.Button
        btnPrevFrame          matlab.ui.control.Button
        btnGoToIn             matlab.ui.control.Button
        gridTimeSliders       matlab.ui.container.GridLayout
        sliderTime            matlab.ui.control.Slider
        sliderRange           matlab.ui.control.RangeSlider
        gridFooter            matlab.ui.container.GridLayout
        lblMoss               matlab.ui.control.Label
        imgLogo               matlab.ui.control.Image
        axTrajMain            matlab.ui.control.UIAxes
    end
 
    
    properties (Access = private)
        traj % trajectory table of the imported traj object
        fs % frequency of the trajectory
        mainPosePatch % posePatch Object of the main Plot
        zoomPosePatch % posePatch Object of the zoom Plot
        playing = false % boolean to check if the animation is playing
        playTimer % timer for the animation
        pointIn % in point of the trajectory
        pointOut % out point of the trajectory
        colors % global colormap
        colorIdx % mapping from traj idx to color idx
    end
    
 
    % Callbacks that handle component events
    methods (Access = private)
 
        % Code that executes after component creation
        function startupFcn(app, traj)
            arguments
                    app
                    traj {mustBeA(traj,"Trajectory")} = Trajectory
            end
 
            try
    
                % check traj TODO: add possibility to import on startup, if
                % tray is empty
                assert(height(traj.getTab) > 0,"There must exist Waypoint Entries in the Trajectory Object.")
                if ~traj.getIsGenerated
                    traj.generateTrajectory;
                end
    
                app.traj = traj.getTrajectory;
                app.fs   = traj.getSamplingFrequency;
    
                %% setup the play timer
                fps = min([app.fs, 30]);
                app.playTimer = timer("ExecutionMode","fixedRate","Period",round(1/fps,3), "TimerFcn", {@app.playTimerCallback});
                app.playTimer.UserData = 1;
    
                %% generate the colormap
                [~, idx, app.colorIdx] = unique([app.traj.pos,app.traj.ori.normalize.compact], "rows", "stable");
                pos = app.traj.pos(idx,:);
                app.colors = turbo(height(pos));
    
                %% generate initial Main Plot
                % pose patch
                app.mainPosePatch = poseplot(app.axTrajMain,app.traj.ori(1),app.traj.pos(1,:),"NED","MeshFileName","jumpSimplified.stl");
                app.mainPosePatch.PatchFaceColor = app.colors(1,:);
                app.mainPosePatch.PatchFaceAlpha = 1;
                app.mainPosePatch.ScaleFactor = 5;
    
                % 3d axis
                app.axTrajMain.XLim = [min(app.traj.pos(:,1)) - 0.5, max(app.traj.pos(:,1)) + 0.5];
                app.axTrajMain.YLim = [min(app.traj.pos(:,2)) - 0.5, max(app.traj.pos(:,2)) + 0.5];
                app.axTrajMain.ZLim = [min(app.traj.pos(:,3)) - 0.5, max(app.traj.pos(:,3)) + 0.5];
                app.axTrajMain.Projection = "perspective";
                app.axTrajMain.XGrid = "on";
                app.axTrajMain.YGrid = "on";
                app.axTrajMain.ZGrid = "on";
                app.axTrajMain.Title.String = "";
                app.axTrajMain.Title.Visible = "off";
                app.axTrajMain.XLabel.String = "x [m]";
                app.axTrajMain.YLabel.String = "y [m]";
                app.axTrajMain.ZLabel.String = "z [m]";
                app.axTrajMain.PlotBoxAspectRatioMode = "manual";
                app.axTrajMain.PlotBoxAspectRatio = [1,1,1];
                app.axTrajMain.DataAspectRatioMode = "manual";
                app.axTrajMain.DataAspectRatio = [1,1,1];
    
                % full trajectory
                plotStep = ceil(height(pos)/1000);
                for i=1:plotStep:height(pos)-plotStep-1
                    hold(app.axTrajMain,"on");
                    plot3(app.axTrajMain,pos([i,i+plotStep],1),pos([i,i+plotStep],2),pos([i,i+plotStep],3),'-','Color',app.colors(i,:),'LineWidth',0.5)
                end
    
                % in and out points
                app.pointIn = plot3(app.axTrajMain,app.traj.pos(1,1),app.traj.pos(1,2),app.traj.pos(1,3),'o','MarkerSize',5,'MarkerFaceColor',app.colors(1,:),'MarkerEdgeColor',[0,0.57,0.82]);
                app.pointOut = plot3(app.axTrajMain,app.traj.pos(end,1),app.traj.pos(end,2),app.traj.pos(end,3),'o','MarkerSize',5,'MarkerFaceColor',app.colors(end,:),'MarkerEdgeColor',[0.82,0.57,0]);
                hold(app.axTrajMain,"off");
    
                %% generate initial Zoom Plot
                % pose patch
                app.zoomPosePatch = poseplot(app.axTrajZoom,app.traj.ori(1),app.traj.pos(1,:),"NED","MeshFileName","jumpSimplified.stl");
                app.zoomPosePatch.PatchFaceColor = app.colors(1,:);
                app.zoomPosePatch.PatchFaceAlpha = 1;
                app.zoomPosePatch.ScaleFactor = 2;
    
                % 3d axis
                app.axTrajZoom.XLim = [app.traj.pos(1,1) - 0.5, app.traj.pos(1,1) + 0.5];
                app.axTrajZoom.YLim = [app.traj.pos(1,2) - 0.5, app.traj.pos(1,2) + 0.5];
                app.axTrajZoom.ZLim = [app.traj.pos(1,3) - 0.5, app.traj.pos(1,3) + 0.5];
                app.axTrajZoom.Projection = "perspective";
                app.axTrajZoom.XGrid = "on";
                app.axTrajZoom.YGrid = "on";
                app.axTrajZoom.ZGrid = "on";
                app.axTrajZoom.Title.String = "";
                app.axTrajZoom.Title.Visible = "off";
                app.axTrajZoom.XLabel.String = "x [m]";
                app.axTrajZoom.YLabel.String = "y [m]";
                app.axTrajZoom.ZLabel.String = "z [m]";
                app.axTrajZoom.PlotBoxAspectRatioMode = "manual";
                app.axTrajZoom.PlotBoxAspectRatio = [1,1,1];
                app.axTrajZoom.DataAspectRatioMode = "manual";
                app.axTrajZoom.DataAspectRatio = [1,1,1];
    
                % full trajectory
                plotStep = ceil(height(pos)/1000);
                for i=1:plotStep:height(pos)-plotStep-1
                    hold(app.axTrajZoom,"on");
                    plot3(app.axTrajZoom,pos([i,i+plotStep],1),pos([i,i+plotStep],2),pos([i,i+plotStep],3),'-','Color',app.colors(i,:),'LineWidth',2)
                end
    
                %% setup controls
                % set up time indicator
                app.fldCurrTime.Value = string(app.traj.t(1),"mm:ss.SSS");
    
                % set up time slider
                app.sliderTime.Limits = seconds([app.traj.t(1),app.traj.t(end)]);
                app.sliderTime.Value = seconds(app.traj.t(1));
                app.sliderTime.ValueChangingFcn = createCallbackFcn(app, @sliderTimeChange, true);
    
                % set up range slider
                app.sliderRange.Limits = seconds([app.traj.t(1),app.traj.t(end)]);
                app.sliderRange.Value = seconds([app.traj.t(1),app.traj.t(end)]);
                app.sliderRange.ValueChangingFcn = createCallbackFcn(app, @sliderRangeChanging, true);
    
                % set up play speed
                app.PlaySpeedSlider.Value = 1;
    
                % set up zoom
                app.ZoomSlider.Value = 10;
                app.ZoomSlider.ValueChangedFcn = createCallbackFcn(app, @zoomSliderChange, false);
    
                % set up play/pause button
                app.btnPlayPause.ValueChangedFcn = createCallbackFcn(app, @playPause, true);
    
                % set up next/prev frame buttons
                app.btnNextFrame.ButtonPushedFcn = createCallbackFcn(app, @nextFrame, false);
                app.btnPrevFrame.ButtonPushedFcn = createCallbackFcn(app, @prevFrame, false);
    
                % set up go to in/out buttons
                app.btnGoToIn.ButtonPushedFcn = createCallbackFcn(app, @goToIn, false);
                app.btnGoToOut.ButtonPushedFcn = createCallbackFcn(app, @goToOut, false);
    
                % set up the current time field
                app.fldCurrTime.Value = string(app.traj.t(1),"mm:ss.SSS");
                app.fldCurrTime.ValueChangedFcn = createCallbackFcn(app, @fldCurrTimeChanged, false);
 
            catch e
                msg = "There occured an error during start. Please check the following error message:" + newline + newline + e.message;
                
                e = errordlg(msg,"Startup Failed","modal");
                uiwait(e);
 
                app.delete;
            end
 
        end
 
        % Value changed function: sliderTime
        function sliderTimeChange(app, event)
            % update the plots
            % find the closest index to the time
            [~,idx] = min(abs(app.traj.t - seconds(event.Value)));
 
            % stop playing
            app.playPause(play=false);
 
            % wait for the animation to stop
            while app.playing
                pause(0.1);
            end
 
            app.updatePlots(idx, updateTimeSlider=true);
            app.playTimer.UserData = idx;
        end
 
        % Value changed function: btnPlayPause
        function playPause(app,event,options)
 
            arguments
                app
                event (1,1) = NaN
                options.play (1,1) logical = true
            end
 
            if isa(event, 'matlab.ui.eventdata.ValueChangedData')
                app.playing = event.Value;
            else
                app.playing = options.play;
            end
 
            if ~app.playing
                app.playing = false;
                app.btnPlayPause.Icon = "Play.svg";
                stop(app.playTimer);
            else
                app.playing = true;
                app.btnPlayPause.Icon = "Pause.svg";
                app.playTimer.UserData = find(app.traj.t >= seconds(app.sliderTime.Value),1);
                start(app.playTimer);
            end
        end
 
        % value changed function: zoomSlider
        function zoomSliderChange(app)
            idx = app.playTimer.UserData;
            app.axTrajZoom.XLim = [app.traj.pos(idx,1) - 1/app.ZoomSlider.Value, app.traj.pos(idx,1) + 1/app.ZoomSlider.Value];
            app.axTrajZoom.YLim = [app.traj.pos(idx,2) - 1/app.ZoomSlider.Value, app.traj.pos(idx,2) + 1/app.ZoomSlider.Value];
            app.axTrajZoom.ZLim = [app.traj.pos(idx,3) - 1/app.ZoomSlider.Value, app.traj.pos(idx,3) + 1/app.ZoomSlider.Value];  
        end
 
        % Button pushed function: btnNextFrame
        function nextFrame(app)
            % stop playing
            app.playPause(play=false);
 
            % wait for the animation to stop
            while app.playing
                pause(0.1);
            end
 
            % update the plots
            idx = app.playTimer.UserData + 1;
            if idx > height(app.traj)
                idx = height(app.traj);
            end
            app.updatePlots(idx);
            app.playTimer.UserData = idx;
        end
 
        % Button pushed function: btnPrevFrame
        function prevFrame(app)
            % stop playing
            app.playPause(play=false);
 
            % wait for the animation to stop
            while app.playing
                pause(0.1);
            end
 
            % update the plots
            idx = app.playTimer.UserData - 1;
            if idx < 1
                idx = 1;
            end
            app.updatePlots(idx);
            app.playTimer.UserData = idx;
        end
 
        % Button pushed function: btnGoToIn
        function goToIn(app)
            % stop playing
            app.playPause(play=false);
 
            % wait for the animation to stop
            while app.playing
                pause(0.1);
            end
 
            % find the closest index to the first value of the range slider
            [~,idx] = min(abs(app.traj.t - seconds(app.sliderRange.Value(1))));
            app.updatePlots(idx);
            app.playTimer.UserData = idx;
        end
 
        % Button pushed function: btnGoToOut
        function goToOut(app)
            % stop playing
            app.playPause(play=false);
 
            % wait for the animation to stop
            while app.playing
                pause(0.1);
            end
 
            % find the closest index to the second value of the range slider
            [~,idx] = min(abs(app.traj.t - seconds(app.sliderRange.Value(2))));
            app.updatePlots(idx);
            app.playTimer.UserData = idx;
        end
 
        % Value changed function: fldCurrTime
        function fldCurrTimeChanged(app, varargin)
            % stop playing
            app.playPause(play=false);
 
            % wait for the animation to stop
            while app.playing
                pause(0.1);
            end
 
            % parse the time
            if contains(app.fldCurrTime.Value,":")
                time = datetime(app.fldCurrTime.Value,"InputFormat","mm:ss.SSS");
            else
                time = seconds(str2double(app.fldCurrTime.Value));
            end
 
            % find the closest index to the time
            [~,idx] = min(abs(app.traj.t - time));
 
            app.updatePlots(idx, updateTimeSlider=true);
            app.playTimer.UserData = idx;
        end
 
        % Value changing function: sliderRange
        function sliderRangeChanging(app, event)
 
            % find idx
            [~,idx1] = min(abs(app.traj.t - seconds(event.Value(1))));
            [~,idx2] = min(abs(app.traj.t - seconds(event.Value(2))));
 
            % update the in point
            app.pointIn.XData = app.traj.pos(idx1,1);
            app.pointIn.YData = app.traj.pos(idx1,2);
            app.pointIn.ZData = app.traj.pos(idx1,3);
            app.pointIn.MarkerFaceColor = app.colors(app.colorIdx(idx1),:);
            app.pointIn.MarkerEdgeColor = app.colors(app.colorIdx(idx1),:);
 
            % update the out point
            app.pointOut.XData = app.traj.pos(idx2,1);
            app.pointOut.YData = app.traj.pos(idx2,2);
            app.pointOut.ZData = app.traj.pos(idx2,3);
            app.pointOut.MarkerFaceColor = app.colors(app.colorIdx(idx2),:);
            app.pointOut.MarkerEdgeColor = app.colors(app.colorIdx(idx2),:);
        end
 
    end
 
    % helper functions
    methods (Access = private)
        function updatePlots(app, idx, options)
            arguments
                app
                idx (1,1) {mustBeInteger, mustBePositive}
                options.updateMain (1,1) logical = true
                options.updateZoom (1,1) logical = true
                options.updateCurrTime (1,1) logical = true
                options.updateTimeSlider (1,1) logical = true
            end
 
            % update the controls
            if options.updateCurrTime
                app.fldCurrTime.Value = string(app.traj.t(idx),"mm:ss.SSS");
            end
            if options.updateTimeSlider
                app.sliderTime.Value = seconds(app.traj.t(idx));
            end
 
            % check if position or orientation has changed
            if options.updateMain || options.updateZoom
                if any(app.mainPosePatch.Position ~= app.traj.pos(idx,:)) || any(app.zoomPosePatch.Position ~= app.traj.pos(idx,:))
                    newPos = true;
                else
                    newPos = false;
                end
                if any(app.mainPosePatch.Orientation ~= app.traj.ori(idx,:)) || any(app.zoomPosePatch.Orientation ~= app.traj.ori(idx,:))
                    newOri = true;
                else
                    newOri = false;
                end
            end
 
            % update the main plot if different
            if options.updateMain
                if newPos
                    app.mainPosePatch.Position = app.traj.pos(idx,:);
                    app.mainPosePatch.PatchFaceColor = app.colors(app.colorIdx(idx),:);
                end
                if newOri
                    app.mainPosePatch.Orientation = app.traj.ori(idx,:);
                end
            end
 
            % update the zoom plot if different
            if options.updateZoom
                if newPos
                    app.zoomPosePatch.Position = app.traj.pos(idx,:);
                    app.zoomPosePatch.PatchFaceColor = app.colors(app.colorIdx(idx),:);
 
                    app.axTrajZoom.XLim = [app.traj.pos(idx,1) - 1/app.ZoomSlider.Value, app.traj.pos(idx,1) + 1/app.ZoomSlider.Value];
                    app.axTrajZoom.YLim = [app.traj.pos(idx,2) - 1/app.ZoomSlider.Value, app.traj.pos(idx,2) + 1/app.ZoomSlider.Value];
                    app.axTrajZoom.ZLim = [app.traj.pos(idx,3) - 1/app.ZoomSlider.Value, app.traj.pos(idx,3) + 1/app.ZoomSlider.Value];   
                end
                if newOri
                    app.zoomPosePatch.Orientation = app.traj.ori(idx,:);
                end       
            end
        end
 
        function playTimerCallback(app, ~, ~)
            % check if animation et end or before of range slider
            idx_range_start = find(app.traj.t >= seconds(app.sliderRange.Value(1)),1);
            idx_range_end = find(app.traj.t >= seconds(app.sliderRange.Value(2)),1);
            if app.playTimer.UserData > idx_range_end || app.playTimer.UserData < idx_range_start
                % jump to start of range slider
                app.playTimer.UserData = idx_range_start;
            else
                
                % update the plots
                app.updatePlots(app.playTimer.UserData);
 
                % calculate this fps
                curr_fps = 1/(app.playTimer.InstantPeriod);
                if isnan(curr_fps)
                    curr_fps = 30;
                end
 
                % calculate steps to skip to keep up with the desired frequency
                skip = ceil(app.PlaySpeedSlider.Value * app.fs/curr_fps);
 
                
                % update counter
                app.playTimer.UserData = app.playTimer.UserData + skip;
            end
        end
    end
 
    % Component initialization
    methods (Access = private)
 
        % Create UIFigure and components
        function createComponents(app)
 
            % Create TrajectoryVisualizationUIFigure and hide until all components are created
            app.TrajectoryVisualizationUIFigure = uifigure('Visible', 'off');
            app.TrajectoryVisualizationUIFigure.Position = [100 100 1024 768];
            app.TrajectoryVisualizationUIFigure.Name = 'Trajectory Visualization';
            app.TrajectoryVisualizationUIFigure.Icon = 'logo_zhaw.png';
            app.TrajectoryVisualizationUIFigure.CloseRequestFcn = createCallbackFcn(app, @delete, false);
 
            % Create gridMain
            app.gridMain = uigridlayout(app.TrajectoryVisualizationUIFigure);
            app.gridMain.ColumnWidth = {'1x'};
            app.gridMain.RowHeight = {'3x', '2x', 70, 50};
            app.gridMain.Padding = [25 25 25 25];
 
            % Create axTrajMain
            app.axTrajMain = uiaxes(app.gridMain);
            title(app.axTrajMain, 'Title')
            xlabel(app.axTrajMain, 'X')
            ylabel(app.axTrajMain, 'Y')
            zlabel(app.axTrajMain, 'Z')
            app.axTrajMain.Layout.Row = 1;
            app.axTrajMain.Layout.Column = 1;
 
            % Create gridFooter
            app.gridFooter = uigridlayout(app.gridMain);
            app.gridFooter.RowHeight = {'1x'};
            app.gridFooter.ColumnSpacing = 0;
            app.gridFooter.RowSpacing = 0;
            app.gridFooter.Padding = [0 0 0 0];
            app.gridFooter.Layout.Row = 4;
            app.gridFooter.Layout.Column = 1;
 
            % Create imgLogo
            app.imgLogo = uiimage(app.gridFooter);
            app.imgLogo.Layout.Row = 1;
            app.imgLogo.Layout.Column = 1;
            app.imgLogo.HorizontalAlignment = 'left';
            app.imgLogo.VerticalAlignment = 'bottom';
            app.imgLogo.ImageSource = 'logo_isc.png';
 
            % Create lblMoss
            app.lblMoss = uilabel(app.gridFooter);
            app.lblMoss.HorizontalAlignment = 'right';
            app.lblMoss.VerticalAlignment = 'bottom';
            app.lblMoss.FontColor = [0.502 0.502 0.502];
            app.lblMoss.Layout.Row = 1;
            app.lblMoss.Layout.Column = 2;
            app.lblMoss.Text = 'moss, February 2024';
 
            % Create gridControl
            app.gridControl = uigridlayout(app.gridMain);
            app.gridControl.ColumnWidth = {300, '2x'};
            app.gridControl.RowHeight = {'1x'};
            app.gridControl.Layout.Row = 3;
            app.gridControl.Layout.Column = 1;
 
            % Create gridTimeSliders
            app.gridTimeSliders = uigridlayout(app.gridControl);
            app.gridTimeSliders.ColumnWidth = {'fit', '1x'};
            app.gridTimeSliders.ColumnSpacing = 0;
            app.gridTimeSliders.RowSpacing = 0;
            app.gridTimeSliders.Padding = [0 0 0 0];
            app.gridTimeSliders.Layout.Row = 1;
            app.gridTimeSliders.Layout.Column = 2;
 
            % Create sliderRange
            app.sliderRange = uislider(app.gridTimeSliders, 'range');
            app.sliderRange.MajorTicks = [];
            app.sliderRange.MajorTickLabels = {''};
            app.sliderRange.MinorTicks = [];
            app.sliderRange.Layout.Row = 1;
            app.sliderRange.Layout.Column = 2;
 
            % Create sliderTime
            app.sliderTime = uislider(app.gridTimeSliders);
            app.sliderTime.MajorTicks = [];
            app.sliderTime.MajorTickLabels = {''};
            app.sliderTime.MinorTicks = [];
            app.sliderTime.Layout.Row = 2;
            app.sliderTime.Layout.Column = 2;
 
            % Create gridControlBtns
            app.gridControlBtns = uigridlayout(app.gridControl);
            app.gridControlBtns.ColumnWidth = {'1x', '3x', '1x', 'fit', '2x'};
            app.gridControlBtns.RowHeight = {'1x'};
            app.gridControlBtns.Padding = [0 10 0 10];
            app.gridControlBtns.Layout.Row = 1;
            app.gridControlBtns.Layout.Column = 1;
 
            % Create btnGoToIn
            app.btnGoToIn = uibutton(app.gridControlBtns, 'push');
            app.btnGoToIn.Icon = 'goToIn.svg';
            app.btnGoToIn.Layout.Row = 1;
            app.btnGoToIn.Layout.Column = 1;
            app.btnGoToIn.Text = '';
 
            % Create gridPlay
            app.gridPlay = uigridlayout(app.gridControlBtns);
            app.gridPlay.ColumnWidth = {'1x', '1x', '1x'};
            app.gridPlay.RowHeight = {'1x'};
            app.gridPlay.ColumnSpacing = 0;
            app.gridPlay.RowSpacing = 0;
            app.gridPlay.Padding = [0 0 0 0];
            app.gridPlay.Layout.Row = 1;
            app.gridPlay.Layout.Column = 2;
 
            % Create btnPrevFrame
            app.btnPrevFrame = uibutton(app.gridPlay, 'push');
            app.btnPrevFrame.Icon = 'prevFrame.svg';
            app.btnPrevFrame.Layout.Row = 1;
            app.btnPrevFrame.Layout.Column = 1;
            app.btnPrevFrame.Text = '';
 
            % Create btnNextFrame
            app.btnNextFrame = uibutton(app.gridPlay, 'push');
            app.btnNextFrame.Icon = 'nextFrame.svg';
            app.btnNextFrame.Layout.Row = 1;
            app.btnNextFrame.Layout.Column = 3;
            app.btnNextFrame.Text = '';
 
            % Create btnPlayPause
            app.btnPlayPause = uibutton(app.gridPlay, 'state');
            app.btnPlayPause.Icon = 'Play.svg';
            app.btnPlayPause.Text = '';
            app.btnPlayPause.Layout.Row = 1;
            app.btnPlayPause.Layout.Column = 2;
 
            % Create btnGoToOut
            app.btnGoToOut = uibutton(app.gridControlBtns, 'push');
            app.btnGoToOut.Icon = 'goToOut.svg';
            app.btnGoToOut.Layout.Row = 1;
            app.btnGoToOut.Layout.Column = 3;
            app.btnGoToOut.Text = '';
 
            % Create fldCurrTime
            app.fldCurrTime = uieditfield(app.gridControlBtns, 'text');
            app.fldCurrTime.Layout.Row = 1;
            app.fldCurrTime.Layout.Column = 5;
            app.fldCurrTime.Value = '00:00.000';
            app.fldCurrTime.HorizontalAlignment = 'center';
 
            % Create gridSettingsZoom
            app.gridSettingsZoom = uigridlayout(app.gridMain);
            app.gridSettingsZoom.ColumnWidth = {300, '1x'};
            app.gridSettingsZoom.RowHeight = {'1x'};
            app.gridSettingsZoom.Padding = [0 0 0 0];
            app.gridSettingsZoom.Layout.Row = 2;
            app.gridSettingsZoom.Layout.Column = 1;
 
            % Create axTrajZoom
            app.axTrajZoom = uiaxes(app.gridSettingsZoom);
            title(app.axTrajZoom, 'Title')
            xlabel(app.axTrajZoom, 'X')
            ylabel(app.axTrajZoom, 'Y')
            zlabel(app.axTrajZoom, 'Z')
            app.axTrajZoom.Layout.Row = 1;
            app.axTrajZoom.Layout.Column = 2;
 
            % Create gridSettings
            app.gridSettings = uigridlayout(app.gridSettingsZoom);
            app.gridSettings.ColumnWidth = {'1x'};
            app.gridSettings.RowHeight = {'fit', '1x'};
            app.gridSettings.Padding = [0 0 0 0];
            app.gridSettings.Layout.Row = 1;
            app.gridSettings.Layout.Column = 1;
 
            % Create SettingsLabel
            app.SettingsLabel = uilabel(app.gridSettings);
            app.SettingsLabel.FontSize = 14;
            app.SettingsLabel.FontWeight = 'bold';
            app.SettingsLabel.Layout.Row = 1;
            app.SettingsLabel.Layout.Column = 1;
            app.SettingsLabel.Text = 'Settings';
 
            % Create gridSettingsCtrl
            app.gridSettingsCtrl = uigridlayout(app.gridSettings);
            app.gridSettingsCtrl.ColumnWidth = {'fit', '1x'};
            app.gridSettingsCtrl.RowHeight = {'fit', 'fit', 'fit'};
            app.gridSettingsCtrl.Padding = [0 0 0 0];
            app.gridSettingsCtrl.Layout.Row = 2;
            app.gridSettingsCtrl.Layout.Column = 1;
 
            % Create PlaySpeedSliderLabel
            app.PlaySpeedSliderLabel = uilabel(app.gridSettingsCtrl);
            app.PlaySpeedSliderLabel.HorizontalAlignment = 'right';
            app.PlaySpeedSliderLabel.Layout.Row = 1;
            app.PlaySpeedSliderLabel.Layout.Column = 1;
            app.PlaySpeedSliderLabel.Text = 'Play Speed';
 
            % Create PlaySpeedSlider
            app.PlaySpeedSlider = uislider(app.gridSettingsCtrl);
            app.PlaySpeedSlider.Limits = [0 5];
            app.PlaySpeedSlider.Layout.Row = 1;
            app.PlaySpeedSlider.Layout.Column = 2;
 
            % Create ZoomSliderLabel
            app.ZoomSliderLabel = uilabel(app.gridSettingsCtrl);
            app.ZoomSliderLabel.HorizontalAlignment = 'right';
            app.ZoomSliderLabel.Layout.Row = 2;
            app.ZoomSliderLabel.Layout.Column = 1;
            app.ZoomSliderLabel.Text = 'Zoom';
 
            % Create ZoomSlider
            app.ZoomSlider = uislider(app.gridSettingsCtrl);
            app.ZoomSlider.Limits = [2 22];
            app.ZoomSlider.Layout.Row = 2;
            app.ZoomSlider.Layout.Column = 2;
 
            % Show the figure after all components are created
            app.TrajectoryVisualizationUIFigure.Visible = 'on';
        end
    end
 
    % App creation and deletion
    methods (Access = public)
 
        % Construct app
        function app = trajectoryVisualizationApp(varargin)
 
            % Create UIFigure and components
            createComponents(app)
 
            % Register the app with App Designer
            registerApp(app, app.TrajectoryVisualizationUIFigure)
 
            % Execute the startup function
            runStartupFcn(app, @(app)startupFcn(app, varargin{:}))
 
            if nargout == 0
                clear app
            end
        end
 
        % Code that executes before app deletion
        function delete(app)
 
            % make sure the timer is stopped
            try
                stop(app.playTimer);
                delete(app.playTimer);
            catch
            end
 
            % Delete UIFigure when app is deleted
            delete(app.TrajectoryVisualizationUIFigure)
        end
    end
end