How to create always cantered image + dynamic text.

[moo_ha_ha]

Hi there,

Is there a way to align image and dynamic text dynamically? Let me explain...

[steps png image] [space] [number of steps taken]

I am trying to align above in one line as always centre aligned.

The only way I can think of is to use button with image, but then how can you pass dynamic value to "to" text? Or is there another way to achieve this?

Thanks and any help is greatly appreciated.

[SunsetRunner]

Hi @moo_ha_ha

index.js 

import document from "document";

var myText  = document.getElementById("myText");
var myImage = document.getElementById("myImage");

myText.x=125;
myText.y=150;
myText.text="Hello";
myText.style.fill="fb-yellow";
myText.style.fontSize=80;
myImage.x=40;
myImage.y=80;

index.gui

<svg>
  <image id="myImage" href="icon.png" width="80" height="80" x="10" y="10" />
  <text id="myText" class="textleft"  x="10" y="10" >....</text>
</svg>

Hopefully the above will give you some pointers.

[moo_ha_ha]

Thanks @SunsetRunner

but I think I did not explain my question probably. Let me try again...

say image is represented by "X" here and I have 125 step at this time... I want following to be centred align on the screen..in a same line...

X 125 [image + space + number of steps]

then later on I have taken total 3456 steps, I want "X 3456" still centre aligned. I know that X, which represents "image of steps" here is 30x30 pixels wide, but these is no way to combine image and text in one string and align centre. Or way to find out how many pixel wide the space and number of steps going to occupy. Image is fixed width but width for number of steps  is going to be dynamic. Button does this automatically, but has fixed predefined text, not sure way to change the text.

Good example of this are Fitbit's own watch faces Ace and Argyle, where combination of image and text are always centre aligned. 

[SunsetRunner]

Check out the following thread https://community.fitbit.com/t5/SDK-Development/How-to-Small-text-attached-to-right-side-of-large-te... which may well help you, or a least give you some ideas.

The SDK currently isn't providing height or width for text objects.

[JonFitbit · Accepted solution]

You can use this to measure an element:

getBBox()
Returns: DOMRect

Returns a DOMRect containing the element's calculated position and spatial extent at the time of being called.

https://dev.fitbit.com/build/reference/device-api/document/

[moo_ha_ha]

Thanks @JonFitbit , I figured it out exactly that from the other topic link @SunsetRunner posted in his previous post.