How to customize the background of an App Designer figure?

自闭症网瘾萝莉.ら 提交于 2021-01-27 06:53:12

问题


I'd like to attach a logo or change the whole background of an App Designer uifigure. How can this be done?


回答1:


  • If you want to set a solid background color for the entire figure, there exists a documented way to do this, e.g.:

    % When creating a new uifigure:
    fig = uifigure('Color',[R G B])
    % if the uifigure already exists:
    fig.Color = [R G B];
    
  • If you want to change the background color of just some region, you can add a uipanel with no title or border (uipanel(...,'BorderType','none','Title','','BackgroundColor',[R G B])).
  • If you want to set an image as background of the entire figure:

    function q41602238a
    %% Turn off some warnings:
    warning off Matlab:structOnObject
    warning off Matlab:HandleGraphics:ObsoletedProperty:JavaFrame
    
    %% 0. Create a uifigure:
    app = uifigure();
    %% 1. Get a handle to the webwindow:
    while true
      try   
         win = struct(struct(app).Controller).Container.CEF;
         break
      catch
         pause(0.1); % Give the figure (webpage) some more time to load
      end
    end 
    %% 2. Find the data_tag of the DOM element we want to edit:
    data_tag = char(struct(app).Controller.ProxyView.PeerNode.getId);
    
    %% 3. Manipulate the DOM via a JS command
    while true
      try
        win.executeJS(['dojo.style(dojo.query("[data-tag^=''' data_tag ''']")[0],"background-image","url(https://upload.wikimedia.org/wikipedia/commons/8/80/Wikipedia-logo-v2.svg")']);
        break
      catch
        pause(0.1); % Maybe JS is still not ready.
      end
    end
    

    Result:

  • If you want to set an image as background of just some region:

    function q41602238b
    %% Turn off some warnings:
    warning off Matlab:structOnObject
    warning off Matlab:HandleGraphics:ObsoletedProperty:JavaFrame
    
    %% 0. Create a some element:
    app = uifigure();
    pnl = uipanel(app);
    %% 1. Get a handle to the webwindow:
    while true
      try   
         win = struct(struct(app).Controller).Container.CEF;
         % disp(win.URL);
         break
      catch
         pause(0.1); % Give the figure (webpage) some more time to load
      end
    end 
    %% 2. Find the id of the DOM element we want to edit:
    data_tag = char(struct(pnl).Controller.ProxyView.PeerNode.getId);
    widgetId = win.executeJS(['dojo.getAttr(dojo.query("[data-tag^=''' data_tag ''']")[0],"widgetid")']);
    
    %% 3. Manipulate the DOM via a JS command
    dojo_style_prefix = ['dojo.style(dojo.query("#' widgetId(2:end-1) '")[0],'];
    while true
      try
        win.executeJS([dojo_style_prefix '"background-image","url(https://upload.wikimedia.org/wikipedia/commons/8/80/Wikipedia-logo-v2.svg")']);
    
        break
      catch
        pause(0.1); % Maybe JS is still not ready.
      end
    end
    

    Result:

Notes:

  1. The last two examples are based on these two posts: 1, 2, and the principle of operation is adding a background-image: "..." entry to the style property of some desired UI element (which happens to be an HTML div).

  2. A tool for programmatic manipulation of App Designer figures can be found in this GitHub repository.

  3. The example image happens to be an .svg, which is interesting, because we can export "regular" MATLAB figures in this format, and later use them as backgrounds for a uifigure :)




回答2:


Unfortunately I can't comment yet, so here is another answer.

Starting at Matlab 2017a the Controller does not have a Container property anymore. This works:

warning off Matlab:structOnObject
warning off Matlab:HandleGraphics:ObsoletedProperty:JavaFrame

win = struct(struct(struct(app).Controller).PlatformHost).CEF;

data_tag = char(struct(app).Controller.ProxyView.PeerNode.getId);

win.executeJS(['dojo.style(dojo.query("[data-tag^=''' data_tag ''']")[0],"background-image","url(https://upload.wikimedia.org/wikipedia/commons/8/80/Wikipedia-logo-v2.svg")']);

There is also the possibility to find all active webwindows using

webWindows = matlab.internal.webwindowmanager.instance.findAllWebwindows();

unfortunately I did not find out yet, which window belongs to which UIFigure (you could use the Title or Position to filter, but two identical UIFigures will cause problems).

Disclaimer, Davide Miani posted that information here: https://undocumentedmatlab.com/blog/customizing-uifigures-part-1#comment-406524



来源:https://stackoverflow.com/questions/41602238/how-to-customize-the-background-of-an-app-designer-figure

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!