How to draw Block Diagram of Control System in Matlab App Designer?

I have to draw an app with a block diagram of a PID ideal structure whose user will insert the values of PID gains but had some troubles in the app designer because didn't found a way to connect the diagram with the texts boxes in the UI Figure. In the picture below, I draw the diagram in Corel Draw, insert it as png and put the texts boxes above the figure.

But is very complicated since I don't know the relative position of the box in the diagram, I set it up manually. So the question is whether there is a better way to set the positions and sizes since there are other diagrams with other positions for the boxes to set?

Another doubt is, whereas this is the best way to build the app, when a resize the app to full screen, how can I resize the the diagram and the position of the boxes? because I only see the position of the boxes in minimized window in app designer.

I wanted to increase the size of the image and reposition it with the boxes

Thanks for reading

Answer 1

[Soumya]

Hi @Nélio Dias,

I understand you are facing challenges in building a dynamic block diagram interface for your control system app in MATLAB App Designer, primarily, with aligning text boxes over an image and making the layout responsive during window resizing. These can be addressed effectively with a structured approach.

To resolve the alignment issue, instead of placing a static PNG in the UI and manually positioning the text boxes, a better approach is to use an axes component like ‘UIaxes’ to display the image using ‘imshow’. This method would give you precise control over positioning, as well as flexibility when resizing.

You can use a ‘SizeChangedFcn’ callback for the ‘UIFigure’, which allows you to recalculate and adjust UI component positions dynamically when the window is resized.

To position other UI elements more accurately in relation to specific blocks within the diagram you can refer to the following steps:

• In App Designer, drag an ‘UIAxes’ component onto your ‘UIFigure’.
• Use ‘imshow’ to display the image:

imshow('PID_diagram.png', 'Parent', app.UIAxes); 

• Place text boxes above the axes and set their Position using coordinates relative to the axes.

To make the layout responsive, you can follow the given steps:

• In the ‘UIFigure’ properties, set the ‘SizeChangedFcn’ to call a custom function:

app.UIFigure.SizeChangedFcn = @(src, event) updateLayout(app); 

• Define the ‘updateLayout’ function to compute positions as percentages of the axes size to keep components aligned regardless of screen resolution or resizing:

function updateLayout(app) 
    figSize = app.UIFigure.Position; 
    app.UIAxes.Position = [20 20 figSize(3)-40 figSize(4)-100];  
    ax = app.UIAxes.Position; 
    app.KpEditField.Position = [ax(1) + 0.3*ax(3), ax(2) + 0.7*ax(4), 60, 22]; 
end 

Please refer to the following official documentation for more information:

• ‘uiaxes’: https://www.mathworks.com/help/matlab/ref/uiaxes.html
• Managing App Resize automatically: https://www.mathworks.com/help/matlab/creating_guis/manage-programmatic-app-resize-behavior.html
• ‘imshow’: http://mathworks.com/help/images/ref/imshow.html

I hope this helps!