Issue finding elements current position with getBoundingClientRect

[nprescott]

I have been having trouble finding a solution retrieving an elements position in pixels.  I originally tried using the canvas features but saw that fitbit has not yet started supporting it.  I have later tried using jquery position and the getBoundingClientRect functions, with no luck.  I was wondering if I am missing an import or if this functionality is not supported yet?  I tried importing jquery but was not doing it correctly if it is possible.  I am trying to find the position of an element as it animates across the screen without tapping on it.

import document from "document";


let canvasRect = document.getElementById("canvas-rect");
let rect = canvasRect.getBoundingClientRect();

console.log(rect.top);

[gaperton · Accepted solution]

1) Trying to import jQuery is a generally bad idea. It won't work as the environment is not compatible with HTML browser, it just resembles one. The parts which will work should be terribly slow. JerryScript VM having no JIT running on the 120Mhz microcontroller is not the right JS engine for that sort of things.
2) getBoundingClientRect() is not supported. Should throw an exception.
3) Instead, try to use the properties of the raw element listed here: https://dev.fitbit.com/reference/device-api/document/#interface-domrect-

[nprescott]

It looks like you are right and DOMRect would be the way to go but I was having trouble constructing a new DOMRect object.  I however was able to get it to work by finding the element and collecting the DOMRect via a getBBox which returned the DOMRect object.

When trying to create a new DOMRect object I found that all of the object values would be set as zero.  I don't know if this is because Fitbit has the values only set to read only or not but this forced me to set the rect element on the gui and then find it by an id.

import document from "document";

let canvasRect = document.getElementById("canvas-rect");
let domRect = canvasRect.getBBox();

console.log(domRect.x);
console.log(domRect.y);
console.log(domRect.width);
console.log(domRect.height);

[gaperton]

> When trying to create a new DOMRect object...

You can't. In contrast to the real DOM in the browser, you cannot dynamically create and insert elements into the Ionic SVG DOM. Which means, for instance, that you can't just draw the line or rect wherever you want.

Therefore, you have to define all the elements you gonna work with inside of the `.gui` files, and then find them by id (exactly as you already did). Awkward. But it's the way it works right now.