12-22-2018 17:32
12-22-2018 17:32
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?
12-22-2018 18:30
12-22-2018 18:30
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.
12-22-2018 19:22
12-22-2018 19:22
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.
12-22-2018 19:32
12-22-2018 19:32
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.
12-22-2018 20:29
12-22-2018 20:29
@Gondwana wrote:initialise gui element attributes in js.
How do I go about doing that with the example above?
12-22-2018 21:17
12-22-2018 21:17
Off the top of my head, maybe something vaguely like this:
let arcBody = document.getElementById("arcBody"); arcBody.arcWidth = ArcWidth;
12-23-2018 11:59
12-23-2018 11:59
@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