App Designer: Need to save an entire Tab (Group of graphs with some parameters) to an Image

Hello,

I wrote an app that displays some complex mechanical calculations, with 3 Main Tabs, each having multiple sub-tabs. In each of those Tabs, a group of graphs is shown, which change based on some parameters, that the user can manipulate. Each Sub-Tab is unique, yet i need to have a button on each of those, that can save the graphs and a number of the variable parameters shown in the current tab as an image (I would use a unique "save" button for each of those Sub-Tabs).

Is there an elegant way of solving this?

My current solution is to create a figure and copy the graphs into them, and then manually placing annotations with the parameters in each graph. This is of course very laborious and very janky, if the app were to be resizable (which i would prefer).

[Mario Malic]

Hi Janik,

it's not clear what exactly you want to do here. What's the purpose of the annotation part, wouldn't it be easier if you'd write a text in the app through Label component? Good thing about this is that the component will change its position in an expected way, so you don't have to worry about window size. You can make a button on one of the tabs that will do:

1. Set label visibility on current tab to 'on'
2. Use exportapp to take a screenshot of the app
3. Change tab, and do step 1 and 2...
4. Return to the first tab, hide all labels.

See exportapp for more info, and see here how to change tabs programmatically.

[Janik Ruge]

Hi,

thanks for the quick answer.

Depending on the tab i need the User-manipulated values, and maybe also some other strings, that i have saved in edit-fields (for example an equasion that results some of the user-manipulated values), but nothing else, from the app. And of course the graphs.

Is there maybe an efficient way to copy edit fields into a figure (with some good formatting)?

I know about exportapp, but that is insufficient, because it displays too much stuff that i do not want. A lot of buttons and of course the space occupied by the tabs names etc. will then also be on the image, which i do not want to have. It is a solution, though none that is satisfying :-)

(Also i do not intend to save every tab at once, rather only the individual tab, that is currently opened)

[Mario Malic]

• If you have it available, you can try using MATLAB Report Generator to get the data from the app and put it all together nicely then?
• You can also use MS Word as actxserver to create a document with figures and text, quick Google led me to this link.
• On axes, you can use text function to display text and allows the use of LaTeX interpretation for all the equations.
• Maybe you could create a report tab that has all the content in order so you just have to take a screenshot of it.

[Janik Ruge]

I think i might have been unclear in my original post.

The app intends to be an all round tool with many features. I do not want to save the content of the entire app with one button, but rather have the user selectively save his currently shown critical content in a compact format for reuse (f.e. in a presentation), without the messy buttons and rest of the apps design taking up space.

Unfortunately every single Tab has a different Layout, so i was hoping i could get some easy way of formatting the needed data into f.e. a figure, which would be an easy way to save that.

Is there a function similar to exportapp for only a part of the UI, like in this case a Tab? Then i could surely implement the "Report Tab" Functionality and just save that Tab everytime. The app header and "Menues", which are Tabs here, take up so much space in the "export app" screenshot, which makes that method unpractical.

[Janik Ruge]

I will try the word actxserver, never heard of it, but i will give it a shot. Might not be the optimal solution, but certainly better than exportapp for me.

[Mario Malic]

actxserver allows you to control the word programmatically, which may include some difficulties, especially since it doesn't resolve your problem of adding text onto figures. Therefore I'd suggest you to try text function first if you want to add text to figures. afterwards you can use getframe to capture the axes object to get the image and use it in Word or elsewhere.

[Janik Ruge]

I do not need the text inside the figures! Only like next to them, it does not matter as much. Important is that the output is somewhat compact. Matlab has an annotation feature, but it have yet to manage it in a way, that accounts for changing screen resolution. And also, the annotation feature is extremely unhandy, having to position everythin manually, with testing every single tab. That takes so many hours. Or i am doing it wrong somehow.

[Mario Malic]

Oh, I didn't know about annotation, it looks like that it supports the uipanel object. Here's an example that can be helpful to get the text right regardless of the window size.

annotation(app.UIPanel, 'textbox', 'Units', 'pixels', 'Position', ...
    [1279+99                               694+105 50 20], 'String', 'test')
%    ^Position(3) + Position(1) of UIAxes  ^Position(4) + Position(2) of UIAxes
% 50 and 20 are the pixel width of the box that the text is in

[Janik Ruge]

This solves it for me, thanks a lot!

Maybe Mathworks can implement a more practical save function that maybe converts app objects like Tab-panels into a figure or picture in the future, but this works for now.

[Mario Malic]

Great to hear, you're welcome.

You can take an image and crop out the UITab part using its Position property.

I'll just post a reference to the comment section as an answer so you can accept it as an answer.

Answer 1

[Mario Malic]

In the comment section there is information on placing annotation objects in UITab and getting screenshot of UITab component.