• Replies 3 replies
  • Subscribers 21 subscribers
  • Views 1089 views
  • Users 0 members are here
Options
Related

My dc.drawLine() lines are being covered by my Views that are defined in the layout.xml

Pitoniak32

When I do the following the mountains that I draw (a series of lines connected to one another) are covered completely by a black background. In the docs s says that the default background for drawable layouts is transparent so I thought this would allow me to draw my time string on top of my mountains. 

<layout id="WatchFace">
    <label id="TimeDisplay" x="center" y="50" text="00:00" font="Graphics.FONT_NUMBER_HOT" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_WHITE" /> 
</layout>

function onLayout(dc as Dc) as Void {
    setLayout(Rez.Layouts.WatchFace(dc));
}

function onUpdate(dc as Dc) as Void {
    drawMountains(dc);
    dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
    View.onUpdate(dc);
}

When I change the order of the onUpdate function to the following the mountains are shown but they are drawn on top of my time string which is what Im trying to avoid. Does anyone know how I can achieve a transparent background using layouts?

function onUpdate(dc as Dc) as Void {
    dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
    View.onUpdate(dc);
    drawMountains(dc);
}

  • Direct dc calls need to happen after you do a View.onUpdate(), as the layout clears the screen.

  • in reply to jim_m_58

    So in order to have my clock text on top of my direct dc calls I would need to move it to a dc.drawText()? and would not be able to achieve the desired effect with layout.xml

  • in reply to Pitoniak32

    If you really want to draw your layout without clearing the screen, it's possible.

    forums.garmin.com/.../1174469

    Travis.ConnectIQ said:

    Yes, View.onUpdate() does clear the screen and then it draws the layout elements in order. This means that things that occur later in the layout definition will be drawn on top of things that were listed earlier.

    If all you want to do is draw a small bitmap on top of the stuff in the layout you just need to call dc.drawBitmap() after calling View.onUpdate(dc).

    If you want to draw a background that all of the layout elements will be drawn on top of, you either need to insert a bitmap into your layout (before the other things in the layout), or you need to draw the bitmap and the  draw the things in the layout (without calling View.onUpdate() because that would clear the screen)

    Also note that the other stuff you do (updating things in the layout) should happen before drawing the draw ales in the layout...

    {code}
    function onUpdate(dc) {

        // update layout fields here

        // clear the screen.. only necessary if bitmap is not full screen
        dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
        dc.clear();

         // draw background here
        dc.drawBitmap(xcoord, ycoord, bitmap);

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