drawing rectangles from app/index

[Slumberlander]

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.

[Gondwana]

Unfortunately, elements can't be instantiated in JS.

Every element instance needs to be declared in index.gui (or some other SVG file).

[Slumberlander]

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!

[saaasaab · Accepted solution]

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. 

[Gondwana]

What @saaasaab said. You can steamline it a bit using something like getElementsByClassName('line').