Send relative coordinates to a customer drawable from layout

Hi, I have careted a customer drawable to draw a graph. I am using relative layouts (works well for adapting the layout to many different devices). Here is my layouts file:

<layouts>
<layout id="myWidgetLayout">
    <label id="title" x="center" y="15%" font="Graphics.FONT_SMAL" justification="Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER" color="Graphics.COLOR_WHITE" background="Graphics.COLOR_TRANSPARENT" />   
    <label id="message" x="center" y="30%" font="Graphics.FONT_SMALL" justification="Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER" color="Graphics.COLOR_WHITE" background="Graphics.COLOR_TRANSPARENT" />
    <drawable id="graph" class="myGraphArea"></drawable>
</layout>

The custome drawable is defined as so:

class myGraphArea extends WatchUi.Drawable {

    private var _locX as Number;
    private var _locY as Number;
    private var _width as Number;
    private var _height as Number;

    function initialize(options) {
        
        Drawable.initialize(options);
    }
    
    function draw(dc as Dc) as Void {
        
        // clear chart area 
        dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
        dc.fillRectangle(_locX, _locY, _width, _height);
        
        // logic to draw graph here...
    }

    function setLayout(x, y, width, height) {
        _locX = x;
        _locY = y;
        _height = height;
        _width = width;
    }

}

Currently, the way I define the location of the graph area is to call the setLayout function from my widget app class. from there I can set relative coordinates using dc.getWidth() and dc.getHeight(), however, it would be cleaner and easier to set all coordinates for all layout elements in one place, from within the layout. I know I can pass options to the custom drawable from the layouts file, but not sure how to pass a "relative coordinate", such as 50% of screen width.

One idea I had was to pass 0.5 in the options array, as so:

 <drawable id="graph" class="myGraphArea">
    <param name="rel_xLoc">0.5</param>
 </drawable>

And then calculate the coordinates in the initialize(options)function in the custom drawable:

function initialize(options) {
    _locX = options.get(:rel_xLoc) * dc.getWidth();
    
}

But from there I don't have access to the dc object so I cannot use dc.getWidth()

I really want to use relative layouts (I know they are memory heavy) but it makes the code a lot easier to work with. I just thought maybe there is some easy and clevel solution that I didn't think of. As always, highly appreciate your help. //Fredrik

Top Replies

Fsallstrom over 2 years ago in reply to flowstate +1

So this is what I did, not the most elegant solution but it works:

in the drawable init:

function initialize(options) { _locX = 0; _locY = 0; _height = System.getDeviceSettings…

All Replies

0 Shent-Aurkhan (SHN) over 2 years ago

hi,

instead of just dc, you could use

Toybox.Graphics.Dc

https://developer.garmin.com/connect-iq/api-docs/Toybox/Graphics/Dc.html

or if it is just for the screen size, you could use screenWidth in

Toybox.System.getDeviceSettings().

developer.garmin.com/.../DeviceSettings.html

0 Fsallstrom over 2 years ago in reply to Shent-Aurkhan (SHN)

Thank you. getDeviceSettings seems to work. I didn't quite understand how to use Toybox.Graphics.Dc as you suggested. Did you mean like:

var _height = Toybox.Graphics.Dc.getHeight();

This throws a runtime error:

Error: Symbol Not Found Error Details: Could not find symbol 'mHeight'

0 flowstate over 2 years ago

Idk if this the most elegant solution, but in your custom drawable, can you:

- Override the draw() function (which does receive the dc as an argument)?

- In the first call to draw(), call setLocation()?

0 Fsallstrom over 2 years ago in reply to flowstate

So this is what I did, not the most elegant solution but it works:

in the drawable init:

function initialize(options) {
        _locX = 0;
        _locY = 0;
        _height = System.getDeviceSettings().screenHeight;
        _width = System.getDeviceSettings().screenWidth;

        if (options.hasKey(:rel_x)) {
            var relX = options.get(:rel_x) as String;
            _locX = (relX.substring(0, relX.length()-1).toFloat() / 100) * System.getDeviceSettings().screenWidth;
        }

And in my layout file:

<drawable id="graph" class="GraphArea">
        <param name="rel_x">"40%"</param>
        <param name="rel_height">"45%"</param>
        <param name="rel_width">"70%"</param>
</drawable>