How to customize the background of an App Designer figure?

Question

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

Answer 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 :)