Open a new View

[SunsetRunner]

I hhink its possible to have different views.

How can i switch to a different View? I cant find this information.

Example:

In index.js  there is a Button and on the ClickEvent i would open another View stats.js.

[Bastion]

I don't know the real answer, but this is using SVG,  there's the master SVG tag in the 

<svg id="view1" display="none" width="100%" height="100%">

</svg>

<svg id="view2" display="none" width="100%" height="100%">

</svg>

<svg id="view3" display="none" width="100%" height="100%">

</svg>

you can show the view you want by hiding the other views 'display none' and

showing 'display inline' or any viewable setting

var view1 = document.getElementById("view1");

var view2 = document.getElementById("view2");

var view3 = document.getElementById("view3");

view1.attr("display","inline") or whatever code it is to show, you get the point though

[SunsetRunner]

I assumed that I would create a new JS file and a new GUI file.

I will try it...

[JonFitbit]

---

@SunsetRunner wrote:

I assumed that I would create a new JS file and a new GUI file.

I will try it...

---

We don't support multiple files at this time, the show/hide approach is correct.

[SunsetRunner]

Thanks Jon, so can I do it the way Bastion described it?
Multiple svg tags in one file?

[SunsetRunner]

It doesnt work:

index.gui:

<svg id="main" display="inner">

....

index.js: 

var view1 = document.getElementById("main");

view1.display = "none";

Error:

[01:47:54]Unhandled TypeError

[01:47:54]Cannot set property 'display' of null

[JonFitbit]

view1.style.display = "none";

https://dev.fitbit.com/guides/user-interface/javascript/#showing-hiding-an-element

[SunsetRunner]

Thx Jon.

[SunsetRunner]

Now can i hide my first view, but my second view doesnt work.

<svg id="main" display="inline">

</svg>

<svg id="info" display="none">
</svg>

let view1 = document.getElementById("main");
let view2 = document.getElementById("info");

view1.style.display = "none"; <-- works
view2.style.display = "inline"; <-- null execption

[Bastion]

Check out the documentation, you can still have seperate .js files if you
want, just wire them up to what you want to control.

[Bastion]

Bah, I don't think you guys need multiple files, declaring pages in one file is fine. I think we'll

add elements and work with the pages in individual files anyway, if the application is large enough.

[Bastion]

If you check out the Bart example app, there is an updateUi method/function that shows you how to swap ui elements, it's pretty straightforward, I just checked it out.

[JonFitbit · Accepted solution]

---

@SunsetRunner wrote:

Now can i hide my first view, but my second view doesnt work.

---

You must have something else wrong with your code. Perhaps something else with the same ID?

This works:

https://gist.github.com/orviwan/39a43be3e19a19baf12b577c5e45a074

[SunsetRunner]

Thanks John my mistake was in the file "index.gui"..

I wrote...

<svg id="main" display="inline"><text>MAIN</text></svg>
<svg id="info" display="none"><text>INFO</text></svg>

instead of ...

<svg>
  <svg id="main" display="inline"><text>MAIN</text></svg>
  <svg id="info" display="none"><text>INFO</text></svg>
</svg>

[Capitano]

Sorry, I just don't exactly how to realize several views...

Is that the correct way - as an example:

<svg>
  

<svg id="view1" display="inline"><text id="duration" x="50%" text-anchor = "middle" y="70" class="updated">000</text></svg>
   <svg id="view1" display="inline"><text id="hrm" x="50%" text-anchor = "middle" y="155" class="large-value">xxxx</text></svg>

  <svg id="view2" display="none"> <text id="updated" x="50%" text-anchor = "middle" y="220" class="updated">now!</text></svg>
</svg>

does this code create two views with the text-elements "duration" and "hrm" shown on view1 and "updated" on view2?

[Bastion]

You have a lot of options on how you want to do this...

but with your code

<svg>

      <svg id="view1" display="inline">

             //stuff for your first page here

       </svg>

      <svg id="view2" display="none">

            //second page here

       </svg>

    //add more pages as you need them

</svg>

//inside of your .js file

var v1 = document.getElementById("view1");

var v2 = document.getElementById("view2");

     //declare more pages as you need them

//one way to update your pages

function updatePages(view){

switch(view){

case "view1":  v2.style.display = "none";

                        v1.style.display = "inline";

break;

case "view2": v1.style.display = "none";

                      v2.style.display = "inline";

                      break;

}

}

[Capitano]

Thanks a lot, Bastion!