Writing Content to a Data Field

I've used the following technique to write out labels and values to a data field, with a variety of background and font colors and font sizes. Seems to work ok. But, for example, I can't write a value string that is black, with some RED characters for emphasis. I think if I generate the content by drawing, I'll have more flexibility.

bgView.setColor(bgColor);
labelView.setFont(lFont); labelView.setColor(lColor); labelView.setText(lStr);
valueView.setFont(vFont); valueView.setColor(vColor); valueView.setText(vStr);

I started to experiment with a direct draw instead. But if I set the data field background color, or setText, it seems to wipe out anything I've drawn to the display.

Anyone have a simple example of setting the data field's background color, drawing a simple shape (circle or line) and writing a Hello World (Hello is black, World is red)? That is really all I need to update my onUpdate function to be more flexible.

Thanks for any examples or tips!

-- Dave

jim_m_58 over 7 years ago

Very simple example here of using dc calls. Note: if you mix in layouts, do the dc calls after View.onUpdate(). I'll post the "hello" and words in different colors is a bit.

function onLayout(dc) {
        width=dc.getWidth();
        height=dc.getHeight();
    }

    function onUpdate(dc) {
        dc.setColor(Gfx.COLOR_YELLOW,Gfx.COLOR_YELLOW);
        dc.clear();
        dc.setColor(Gfx.COLOR_RED,Gfx.COLOR_TRANSPARENT);
        dc.fillCircle(width/2,height/2,height/4-2);
        dc.setColor(Gfx.COLOR_BLUE,Gfx.COLOR_TRANSPARENT);
        dc.drawText(width/2,height/2,Gfx.FONT_SMALL,"Hello",Gfx.TEXT_JUSTIFY_CENTER|Gfx.TEXT_JUSTIFY_VCENTER);
    }

jim_m_58 over 7 years ago

Instead of the drawLine above, you can do something like this for two colors:

var p1="Hello ";
        var p2="World";
        var w=dc.getTextWidthInPixels(p1+p2, Gfx.FONT_SMALL);
        var x=(width/2)-w/2;    
        dc.setColor(Gfx.COLOR_BLUE,Gfx.COLOR_TRANSPARENT);
        dc.drawText(x,height/2,Gfx.FONT_SMALL,p1,Gfx.TEXT_JUSTIFY_LEFT|Gfx.TEXT_JUSTIFY_VCENTER);
        x=x+dc.getTextWidthInPixels(p1, Gfx.FONT_SMALL);
        dc.setColor(Gfx.COLOR_BLACK,Gfx.COLOR_TRANSPARENT);
        dc.drawText(x,height/2,Gfx.FONT_SMALL,p2,Gfx.TEXT_JUSTIFY_LEFT|Gfx.TEXT_JUSTIFY_VCENTER);

and get this:community.garmin.com/.../1259383.png

DaveBrillhart over 7 years ago

Awesome! Thanks so much!!!