Avatar of a custom AppDesigner component created in Matlab

8 views (last 30 days)
Eric Delgado
Eric Delgado on 28 Apr 2023
Commented: Robyn Jackey on 2 May 2023
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?
  3 Comments
Show 1 older comment
Robyn Jackey
Robyn Jackey on 28 Apr 2023
Something in the component may be erroring out, possibly only when used in app designer. I assume the metadata generation worked ok? What happens when you drag it into a new app from the component browser?
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.

Sign in to answer this question.

Accepted Answer

Robyn Jackey
Robyn Jackey on 2 May 2023
Edited: Robyn Jackey on 2 May 2023
Hi @Eric Delgado,
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:
Configure Custom UI Components for App Designer - MATLAB & Simulink (mathworks.com)
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?
  2 Comments
Eric Delgado
Eric Delgado on 2 May 2023
Hi @Robyn Jackey, thanks for your answer!
Regarding the property editor, I think Mathworks should provide access to all the functionalities available for their own components. So, in addition to the DropDown with the list of fonts and uisetcolor, it could have controls for file inclusion, alignment (text and image) and so on. See image below.
And after building some custom components, I think Mathworks should evolve the matlab.ui.componentcontainer.ComponentContainer class, providing the information of the public property that triggered the execution of the update() function as an input argument for that function.
In one of the components I built - similiar to a "uitable" - I have three public properties that trigger update(): Data (the table itself), Selection (the selected row), and Row (a cell in edition).
To identify the event that triggered update(), I had to create private properties for each of these public properties: PreviousData, PreviousSelection, and PreviousRow. And create a validation at the beginning of the function.
function update(comp)
if ~isequal(comp.Data, comp.PreviousData)
% Event: DataChanged
elseif ~isequal(comp.Selection, comp.PreviousSelection)
% Event: SelectionChanged
elseif ~isequal(comp.Cell, comp.PreviousCell)
% Event: CellEdited
end
end
This makes things complex, with the potential to temporarily duplicate memory usage when there is any change in the Data property, for example, which is a problem when dealing with a large table.
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)

Categories

Find more on Create Custom UI Components in Help Center and File Exchange

Tags

Products


Release

R2023a

Community Treasure Hunt

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

Start Hunting!