transparent datafield for map view

Is it possible to set the datafield transparent, to put it into the map view. I always get a background. I already set following to transparent:

View.findDrawableById("Background").setColor(Graphics.COLOR_TRANSPARENT);
var value = View.findDrawableById("value");

value.setBackgroundColor(Graphics.COLOR_TRANSPARENT);
value.setColor(Graphics.COLOR_WHITE);

and

<layouts>
    <!-- A generic, centered layout. -->
    <layout id="MainLayout" background="Gfx.COLOR_TRANSPARENT">
    	<drawable class="Background" />
        <label background="Gfx.COLOR_TRANSPARENT" id="value" x="center" y="center" color="Graphics.COLOR_BLACK" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
    </layout>
</layouts>

0 Travis.ConnectIQ over 5 years ago

This won't work for two reasons.

The display buffer that we give to you has been written over, I believe with solid white, before you get access to it.
Drawing transparent pixels doesn't actually overwrite those pixels with a transparent color, it simply leaves those pixels unchanged.

0 gugugs over 5 years ago in reply to Travis.ConnectIQ

Okay, but how did Stryd implement it? (https://apps.garmin.com/en-US/apps/18fb2cf0-1a4b-430d-ad66-988c847421f4)

If you put this datafield onto the mapview, there is no white or black background. Map -> directly field value. No White or Black Box onto the map behind the value field.

0 Travis.ConnectIQ over 5 years ago

Actually, I'm wrong... sort of. Some devices clear the buffer to a solid color (I believe Venu is the only one that does this now).

I was able to create a data field view that did exactly what you're asking for with this (not using Layouts).

using Toybox.WatchUi;
using Toybox.Graphics;

class DFView extends WatchUi.DataField {

	hidden var _cx;
	hidden var _cy;
	hidden var _font;
	hidden var _text;
	hidden var _justification;

    function initialize() {
        DataField.initialize();
    }
    
    function onLayout(dc) {
		_cx = dc.getWidth() / 2;
		_cy = dc.getHeight() / 2;
		_font = Graphics.FONT_SMALL;
		_justification = Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER; 
    }
    
    function compute(info) {
    	_text = info.timerTime.toString();
    }

    function onUpdate(dc) {
        // you can use these lines or not, it has no effect
        // dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
        // dc.clear();
    	
    	dc.setColor(Graphics.COLOR_BLUE, Graphics.COLOR_TRANSPARENT);
    	
    	if (_text != null) {
	    	dc.drawText(_cx, _cy, _font, _text, _justification);
   		}
   	}

}

If you are wanting to use a layout, you can't rely on View.onUpdate(dc) to draw the drawables in the layout... The first thing that the base class method does is clear the draw area with black. This code worked in my testing..

function onUpdate(dc) {
    // Set the background color
    View.findDrawableById("Background").setColor(Graphics.COLOR_TRANSPARENT);

    // Set the foreground color and value
    var value = View.findDrawableById("value");
    var label = View.findDrawableById("label");
    if (getBackgroundColor() == Graphics.COLOR_BLACK) {
        value.setColor(Graphics.COLOR_BLUE);
        label.setColor(Graphics.COLOR_RED);
    } else {
        value.setColor(Graphics.COLOR_GREEN);
        label.setColor(Graphics.COLOR_ORANGE);
    }
        
    value.setText(mValue.format("%.2f"));

    //View.onUpdate(dc);
    for (var i = 0; i < mLayout.size(); ++i) {
    	mLayout[i].draw(dc);
    }
}

If you never want to fill in the background color, you could eliminate the Background drawable code and the entries from your layout.