Avatar of a custom AppDesigner component created in Matlab

10 views (last 30 days)
I created a custom AppDesigner component, but when I open an app with it, Matlab shows this warning:
Warning: Unable to capture UI component avatar. Users will be unable to see the component preview when dragging the UI
component from the Component Library onto the canvas.
> In matlab.apps.AppBase>@(source,event)executeCallback(ams,app,callback,requiresEventData,event) (line 62)
I guess the avatar is like a preview of the object - such as the big "<HTML>" for an uihtml -, right? Is it already possible to create this avatar?
Eric Delgado
Eric Delgado on 1 May 2023
Hi @Robyn Jackey, I tried to register the important windows (screen shot below). When I configure the metadata for the custom component, there is no field "Avatar". But in the JSON file, this field is empty, that's why Matlab throws an warning. However, it's possible to edit it manually, so you will have your "avatar" - looks like a phantom image when you drag the component from the library and drop in the canvas.
In your Widgets Toolbox, this field is fulfilled by the static image of your custom component. My guess is that Matlab creates the info of this field automatically, but in my case it doesn't work. Do you know why? (I am using R2023a)
And... thinking about the configuration of a custom component, in the App Designer, is it possible to create a public property that Matlab understands as Color, in order to allow the selection of the color in the same way that it is provided in the default components (instead of insert the hexa, name or the array of the color)? Same with FontFamily... it looks like the DropDown selection is only available when you create an enumeration class, but "Times New Roman", for example, is not a valid name for an enumeration member. So... is there a way to create a better configuration panel for the custom component in App Designer?

Sign in to comment.

Accepted Answer

Robyn Jackey
Robyn Jackey on 2 May 2023
Edited: Robyn Jackey on 2 May 2023
Normally the avatar should get auto-generated (via getframe) when you configure the appdesigner metadata, however in your case it likely failed. As a workaround, you can screenshot your component in .png format and place it in the \resources folder next to appdesigner.json, where you would specify “./nameOfAvatarImage.png” as the value for the “avatar” field.
There are limited property editors currently available for custom components in app designer, and unfortunately color and font are not currently in that list:
For now you should be able to use validatecolor in your component's BackgroundColor property definition to guard against incorrect entries.
I have requested improvemnts for this. Are there any other common editors you need besides font and color properties?
Robyn Jackey
Robyn Jackey on 2 May 2023
@Eric Delgado, I agree this can start to get challenging with a more complex component.
Perhaps it's possible to make just one private property that lists any changes in a string array? Add set methods for each relevant property and inside of that add the property to the list. In your update method, check for any matches of the relevant property in the list, then clear it after making the update.
Another approach I've taken is to have a private property be a true/false flag that gets toggled true inside specific set methods. For example, I had a custom component that wrapped a chartcontainer with MxN plots inside. If I changed M or N, the set method would turn a flag true that the update would know to delete and recreate the plots rather than doing a simpler update, then return the flag to false state.

Sign in to comment.

More Answers (0)


Find more on Migrate GUIDE Apps in Help Center and File Exchange




Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!