How to add images in appdesigner?

classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure               matlab.ui.Figure
        UITable                matlab.ui.control.Table
        ReadDataButton         matlab.ui.control.Button
        ReadGuidanceButton     matlab.ui.control.Button
        GuidanceTextAreaLabel  matlab.ui.control.Label
        GuidanceTextArea       matlab.ui.control.TextArea
        FuseTextAreaLabel      matlab.ui.control.Label
        FuseTextArea           matlab.ui.control.TextArea
        ReadFuseButton         matlab.ui.control.Button
        Image                  matlab.ui.control.Image
    end

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

        % Cell edit callback: UITable
        function UITableCellEdit(app, event)
            indices = event.Indices;
            newData = event.NewData;
            
        end

        % Button pushed function: ReadDataButton
        function ReadDataButtonPushed(app, event)
            t = readtable("Kitap1.xlsx","Sheet",1);
            app.UITable.Data = t;
            app.UITable.ColumnName = t.Properties.VariableNames;
        end

        % Button pushed function: ReadGuidanceButton
        function ReadGuidanceButtonPushed(app, event)
            t = readtable("Kitap1.xlsx","Sheet",1);
            app.UITable.Data = t;
            app.UITable.ColumnName = t.Properties.VariableNames;
            %t=t(strcmp(t.Guidance,app.GuidanceTextArea.Value),:);
            %t=t(startsWith(t.Guidance,app.GuidanceTextArea.Value),:);
            t=t(contains(t.Guidance,app.GuidanceTextArea.Value),:);
            app.UITable.Data=t;
        
        end

        % Button pushed function: ReadFuseButton
        function ReadFuseButtonPushed(app, event)
            t = readtable("Kitap1.xlsx","Sheet",1);
            app.UITable.Data = t;
            app.UITable.ColumnName = t.Properties.VariableNames;
            %t=t(strcmp(t.Fuse,app.FuseTextArea.Value),:);
            %t=t(startsWith(t.Fuse,app.FuseTextArea.Value),:);
            t=t(contains(t.Fuse,app.FuseTextArea.Value),:);
            app.UITable.Data=t;
            
        end

        % Image clicked function: Image
        function ImageClicked(app, event)
            
        end
    end

I have this code and this app. When I clicked Read Data, excel datas comes. But I want to images. For example when I clicked on one of the data as seen in the figure, I want the photo of the clicked one in the image location at the right. How can I do that? Thank you.

Answer 1

[Parsa]

Hi Ali,

I think you should use ‘UITableCellSelection’ callback function, so that a command (such as showing an image), promptly executed after selecting the desired cell.

In addition I think it should be necessary to ‘global’ the table ‘t’, in both ‘ReadDataButtonPushed'and ‘UITableCellSelection’ functions , in order that being able to read the desired cell of the table.

Here I share a simple app with you, as the same as yours, which is a table contains bearing names and corresponding equipment. When you click on any cells in the first column, belonging to bearing’s name, the image will be shown on the axis.

% Button pushed function: ReaddataButton
        function ReaddataButtonPushed(app, event)
            global t
            t = readtable("brg.xlsx","Sheet",1);
            app.UITable.Data = t;
            app.UITable.ColumnName = t.Properties.VariableNames;
%             assignin('base','BrgTable',t)
        end

        % Cell selection callback: UITable
        function UITableCellSelection(app, event)
            global t
            indices = event.Indices;
            n=indices(1);
            if strcmp(t.Bearing{n},'SKF6203')
                cla(app.UIAxes)
                imshow('SKF6203.jpg','Parent',app.UIAxes)
            elseif strcmp(t.Bearing{n},'SKF6205')
                cla(app.UIAxes)
                imshow('SKF6205.jpg','Parent',app.UIAxes)
            elseif strcmp(t.Bearing{n},'SKF22315')
                cla(app.UIAxes)
                imshow('SKF22315.jpg','Parent',app.UIAxes)
            end
        end

You could find the whole app, table in .xlsx format and image files in the attachment.

I also recommend taking a look at the link below, and the answer by @Kevin Holly .

https://www.mathworks.com/matlabcentral/answers/1627780-matlab-app-designer-clickable-image-only-clickable-once

Best

Parsa

[Ali Deniz]

Thank you very much. This information is very helpful and instructive.

Best regards

-Ali

[Parsa]

It's my pleasure