In App Designer is it possible to plot lines on top of UI components?

I'm working on an application that ties to a Simulink model. The intent is to click two check boxes, and then a button that connects them. The connection is made between associated nodes in Simulink, and then a line is plotted on a UIAxes to show the connection. The UIAxes spans the whole app window, and pulls the positions of the checkboxes, which are built into custom UI components.

Essentially, all of this is functional already. My problem is that when the lines are plotted on the UIAxes between two checkbox elements, the lines are drawn behind UI elements within the app. This could be the custom components, or any buttons I have built into the app. Can anyone help with a way to force the UIAxes to draw on top of all other UI components?

I can incorporate some images and code if needed to clarify how the app is set up.

Answer 1

[Adam Danz]

> In App Designer is it possible to plot lines on top of UI components?

Lines can cross over text layers but other UI components live on a different layer. In this demo, an annotation line crosses under the checkbox, button, and image, but on top of the checkbox label and the ui-label.

fig = uifigure;
cbx = uicheckbox(fig);
uibutton(fig,Position=[190 97 85 30])
uilabel(fig,Position=[285 96 60 30],Text='label')
uiimage(fig,ImageSource=rand(5,6,3),Position=[310 92 80 36])

A =  annotation(fig,'line',units='pixels',Position=[1 111, 500 0])

Sharing an image of your app may be helpful to suggest workarounds.

[Cecil]

Adam,

Your demo encapsulates what I am experiencing quite well. I have some screen grabs on another computer that I can share later, but like I said, this is essentially exactly what I am trying to work around. The main difference is that rather than a button, it's a custom UI component that I built for the app.

[Adam Danz]

I've thought about how to put together a creative workaround but I'm falling short on idea. I thought about creating a label that's just a line but that wouldn't work, as we see in the example in my answer. The uiaxes itself is entirely under the layer that contains the UI components so that can't be used to create a thin line either.

What you are describing, layering graphics objects on top of UI components, isn't a typical use case.

Sharing more information about what you're trying to build may be helpful to understand the use case.

[Cecil]

Adam,

Thanks for the effort. I ran out of things to test, so figured I'd ask. I will get you some screen shots posted and a better description of what I'm trying to accomplish in a day or so. I don't get to dedicate much time to it, and I don't have access to the screen shots I have when I'm not at home.

Again, thank you for trying to think of alternatives.

[Cecil]

Adam,

Some specifics: This is an attempt to update a series of virtual lab "experiments" from Guide to App Designer. They don't run well on newer matlab releases. For example, this first experiment is a simple application of ohms law.The buttons are tied to a simulink model, and current and voltage is provided as an output if the components are connected correctly:

The way these are designed, there is a lot of hard coded resizing of images, and when you "make" a connection this happens:

I have turned all of these components into custom UI elements, and as discussed, connection two buttons causes the plot line to go behind the elements. This is an example of random lines when I tested the plotting function in my redesign in App Designer:

I suspect at this point I am going to have to revert back to how the Guide version handles this, which is to plot the background image on the UIAxes, and then add the "connection" lines to the axes. I was hoping to use modular components because there are several different equipment setups that need to be updated. My best idea to modularize this would be to proceduraly generate and place the checkboxes based on which background image is loaded into the UIAxes.

Again, thanks for the assistance!

[Adam Danz]

Thanks for sharing these screenshots @Cecil.

I suspect that if your design was supported in GUIDE, then it should be supported using uicontrol objects.

This page from the MATLAB documentation shows a conversion table from uicontrol objects to ui components used in App Designer. You'd be converting in the other direction.

https://www.mathworks.com/help/matlab/creating_guis/update-ui-controls-and-callbacks.html

I'll share your use case internally.