How to pass a constant from app/index.jr to /resources/index.gui

[jrgeoffrion]

I'm trying to build my first watchface. 

I would like to be able to declare all my constants/variables upfront in the /app/index.js file and refer to them in all the other files. This allows me customize the output in a single location.

In this particular instance, I would like to call the constant called ArcWidth as the arc-width property in the arc (see below). 

/app/index.js

const ArcWidth = 16;

/resources/index.gui

<arc id="arcBody" x="50%-123" y="50%-123" width="246" height="246" fill="#060606" arc-width="16"  start-angle="0" sweep-angle="360" />

My question is not limited to this unique variable, it's a general approach I would be able to take to simplify modifying component across the watchface (for example, I can relate font size to arc size and just change the arc size and the font would follow)

More than happy to add any relevant information that may be useful in helping answer the question.

Can this be done simply?

[Gondwana]

I think a problem will be that .gui files can only import from other .gui files; eg:

<link rel="import" href="graphics.gui" />

I haven't tried importing .js into .gui; it's worth trying.

An approach that would work is to initialise relevant element attributes in .js (although doing so is slower and longer). You can export and import variables and constants between .js files easily enough.

[jrgeoffrion]

If I understand correctly, you are suggesting to add:

   <link rel="import" href="./app/index.js" />

at the top of the /resources/index.gui and try to pass the constant ArcWidth?

If so, how do I pass the constant? I tried:

arc-width="$ArcWidth"

but that doesn't appear to be the right way.

[Gondwana]

My guess was that importing js into gui won't work at all. I just suggested trying it in case I was wrong.

The approach that I know to work is to import js into js, and initialise gui element attributes in js.

[jrgeoffrion]

---

@Gondwana wrote:

initialise gui element attributes in js.

---

How do I go about doing that with the example above?

[Gondwana]

Off the top of my head, maybe something vaguely like this:

let arcBody = document.getElementById("arcBody");
arcBody.arcWidth = ArcWidth;

[FlyBoyJIt]

---

@jrgeoffrion wrote:

I'm trying to build my first watchface. 

I would like to be able to declare all my constants/variables upfront in the /app/index.js file and refer to them in all the other files. This allows me customize the output in a single location.

In this particular instance, I would like to call the constant called ArcWidth as the arc-width property in the arc (see below). 

/app/index.js

const ArcWidth = 16;

/resources/index.gui

<arc id="arcBody" x="50%-123" y="50%-123" width="246" height="246" fill="#060606" arc-width="16"  start-angle="0" sweep-angle="360" />

My question is not limited to this unique variable, it's a general approach I would be able to take to simplify modifying component across the watchface (for example, I can relate font size to arc size and just change the arc size and the font would follow)

More than happy to add any relevant information that may be useful in helping answer the question.

Can this be done simply?

---

I know this doesn't answer your question directly but there is another way to do what you intend to.

Declare CSS classes in your styles.css or even a new file (maybe constants.css) and assign each "variable" a class.

example

.aw16 { arcWidth: 16} 
.aw{15{ arcWidth: 15}
.red { fill: red}

Then you can use that in your code 

<arc class="aw16 red">

<arc class="aw15 red">

Just another way to do this