01-15-2018 11:35
01-15-2018 11:35
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.
Answered! Go to the Best Answer.
01-16-2018 14:45
01-16-2018 14:45
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/
01-15-2018 13:55 - edited 01-15-2018 13:55
01-15-2018 13:55 - edited 01-15-2018 13:55
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.
01-15-2018 14:29
01-15-2018 14:29
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.
01-15-2018 14:39
01-15-2018 14:39
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.
01-16-2018 14:45
01-16-2018 14:45
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/
01-17-2018 02:47 - edited 01-17-2018 02:48
01-17-2018 02:47 - edited 01-17-2018 02:48
Thanks @JonFitbit , I figured it out exactly that from the other topic link @SunsetRunner posted in his previous post.