Image element 'clear' backgroundColor doesn't work

Question

After successfully being able to add an image to a Window object with the help of How to add an image to a window in Pebble.js?, I tried adding the image to a white background. The image is a png so it's transparent, but the background shows up as black even with the clear parameter set. Any help on this?

EDIT Here is the code:

// function that adds general elements to the window (top bar, icon, title, and text)
var addElementsToWindow = function(window, text) {
  // Top rectangle
  var rect = new UI.Rect({
    position: new Vector2(0, 0),
    size: new Vector2(144, 26),
    backgroundColor:'black'
  });

  // icon
  var icon = new UI.Image({
    position: new Vector2(100,20),
    size: new Vector2(25,26),
    backgroundColor: 'clear',
    borderColor: 'clear',
    image: 'images/menu_icon.png'
  });

  // Title text
  var title = new UI.Text({
    position: new Vector2(0, 30),
    size: new Vector2(144, 138),
    text:'Title',
    font:'gothic-24-bold',
    color:'black',
    textOverflow:'wrap',
    textAlign:'center',
    backgroundColor:'white'
  });

  // Loading text
  var subtext = new UI.Text({
    position: new Vector2(0, 60),
    size: new Vector2(144, 108),
    text:text,
    font:'gothic-24',
    color:'black',
    textOverflow:'wrap',
    textAlign:'center',
    backgroundColor:'white'
  });

  // Display the home screen
  window.add(rect);
  window.add(title);
  window.add(subtext);
  window.add(icon);
};

// Create the home screen
var home = new UI.Window();
addElementsToWindow(home, 'Loading...');
home.show();

Answer 1

From the documentation

"clear" The image’s white pixels are painted as black, and the rest are clear.

Try "normal".

EDIT: It's also possible the background of your image is white not transparent.

Answer 2

In order to achieve transparency with Pebble.js, the compositing property is required. You will need to use two sets of the same images. The reason is that Pebble.js uses the same image tools as the native SDK. The SDK doesn't directly support transparent images since it converts all PNGs to 1-bit black and white Pebble images, discarding the transparency information.

However, I don't recommend using this method unless it's absolutely required. The performance penalty is roughly equal to drawing a regular image four times. Times two for two images, and enabling compositing doubles it. It is better to make a single image with faux transparency -- the background baked in.

With that out of the way, here is how you can do it. You can make one image, image_mask_white.png where the originally white pixels stay white and everything else is black, and another image image_mask_black.png where originally black pixels become white and everything else is black. In other words, you would have two masks of the two color channels using white to represent opaque and black to represent transparent. With these two masks, you can then composite them together to form a single image with transparency.

var wind = new UI.Window();

var iconWhite = new UI.Image({
  position: new Vector2(100, 20),
  size: new Vector2(25, 26),
  compositing: 'or', // White pixels are shown, black pixels are clear.
  image: 'images/icon_mask_white.png'
});

var iconBlack = new UI.Image({
  position: new Vector2(100, 20),
  size: new Vector2(25, 26),
  compositing: 'clear', // The image’s white pixels are painted as black, and the rest are clear.
  image: 'images/icon_mask_white.png'
});

wind.add(iconWhite);
wind.add(iconBlack);

wind.show();

Other than 'or' and 'clear', there is 'and' and 'set' which are the respective opposites. You can create a composite image with other combinations depending on your source images. This is just one possible combination. The official Pebble C SDK has more information on the compositing modes here.

The background color and border color are clear by default. The Pebble with compositing off obstruct the background as you have noticed. Compositing should reveal that the background color is properly clear, else a bug report is imminent!