07-01-2020 05:12
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

07-01-2020 05:12
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Hi,
i need to draw rectangles from a for loop in my app, but i can not figure how to ask for it .
(i do not want to declare each of the rects... ) it looks like i need to use <symbols> but i do not know how..
import document from "document";
let myRect = document.getElementById("rectangle");
var ofsetX ;
var HowMany = someNum;
var i;
for (i=0; i<howMany; i++)
{
var newRect = // new instance of myRect
mewRect.x + = ofsetX;
}
what is the right call in index.app and how shall i declare the rects in index.gui?
thank you by advance for your answer and your kind forgivness!
Slumerlander.
Answered! Go to the Best Answer.

Accepted Solutions
07-03-2020 10:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

07-03-2020 10:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
I had to do something similar recently.
In the index.gui, I created as many line elements as I needed,
<line id="L1" class="line"/>
<line id="L2" class="line"/>
<line id="L3" class="line"/>
<line id="L4" class="line"/>
<line id="L5" class="line"/>
<line id="L6" class="line"/>
<line id="L7" class="line"/>
<line id="L8" class="line"/>
Then in the index.js, you can cycle through each element like this:
for (let i = 0; i < 125; i++){
let index = "L"+(i+1).toString();
lines.push(document.getElementById(index));
lines[i].style.display = "inline";
lines[i].x1=offsetX+line_length;
lines[i].y1=offsetY;
lines[i].x2=offsetX+line_length;
lines[i].y2=offsetY+line_length;
}
This works great because you can add as many elements as you'd like in the gui file, then programmatically change the attributes.
07-01-2020 13:39
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


07-01-2020 13:39
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Unfortunately, elements can't be instantiated in JS.
Every element instance needs to be declared in index.gui (or some other SVG file).
Gondwana Software
07-03-2020 04:47
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

07-03-2020 04:47
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
thank you for answering @Gondwana
No instantiation possible in JS ok... but by declaring in *.gui my elements as <symbol> is there a way i can reuse in app.index that same element multiple times without having to write a 10 page script for a simple offset of a rectangle.x ?
https://dev.fitbit.com/build/guides/user-interface/svg/#template-symbols
thank you for your time!

07-03-2020 10:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

07-03-2020 10:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
I had to do something similar recently.
In the index.gui, I created as many line elements as I needed,
<line id="L1" class="line"/>
<line id="L2" class="line"/>
<line id="L3" class="line"/>
<line id="L4" class="line"/>
<line id="L5" class="line"/>
<line id="L6" class="line"/>
<line id="L7" class="line"/>
<line id="L8" class="line"/>
Then in the index.js, you can cycle through each element like this:
for (let i = 0; i < 125; i++){
let index = "L"+(i+1).toString();
lines.push(document.getElementById(index));
lines[i].style.display = "inline";
lines[i].x1=offsetX+line_length;
lines[i].y1=offsetY;
lines[i].x2=offsetX+line_length;
lines[i].y2=offsetY+line_length;
}
This works great because you can add as many elements as you'd like in the gui file, then programmatically change the attributes.
07-03-2020 14:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


07-03-2020 14:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
What @saaasaab said. You can steamline it a bit using something like getElementsByClassName('line').
Gondwana Software
