Graphs, toggling and updates

[Alanmh]

Hi
I am trying to set up a page that will allow me to show a picture in a textbox of a graph of data from Pachube. There will be buttons along the bottom to select which graph to show. I have attached a pic to show better what I mean.

Anyhoo, I cant seem to get it to show any different pic but the last one. I have tried using pages and groups, but I feel I am getting something fundamentally wrong in my understanding of these.

Here is the snippet of the config file that creates that page. I have also attached the whole config file.

Any ideas please? I really want to understand this.

<page NAME="Page2">
<group>panel</group>
<visible>false</visible>
<button NAME="graph1">
<label>
<text>Outside</text>
</label>
<gridX>0</gridX>
<gridY>2</gridY>
<style>menu_button_off_.png</style>
<link>OutGraph</link>
<mode>link</mode>
</button>
<textbox NAME="HotwaterGraph">
<group>graphs</group>
<visible>false</visible>
<posX>100</posX>
<posY>0</posY>
<width>650</width>
<height>280</height>
<text><![CDATA[<img height="280" width="600" src="https://api.pachube.com/v2/feeds/10591/datastreams/5.png?width=600&height=300&colour=%23f15a24&durati on=1day&title=Hot%20Water&stroke_size=10%20%20max& show_axis_labels=true&detailed_grid=true&scale=aut o&min=-10&max=30&timezone=UTC"></img>]]></text>
</textbox>
<textbox NAME="OutGraph">
<group>graphs</group>
<posX>100</posX>
<posY>0</posY>
<width>650</width>
<height>280</height>
<text><![CDATA[<img height="280" width="600" src="https://api.pachube.com/v2/feeds/10591/datastreams/3.png?width=600&height=280&colour=%23f15a24&durati on=1day&title=Outside%20Temp&stroke_size=10%20%20m ax&show_axis_labels=true&detailed_grid=true&scale= auto&min=-10&max=30&timezone=UTC"></img>]]></text>
</textbox>

<button NAME="graph2">
<label>
<text>Water</text>
</label>
<gridX>1</gridX>
<gridY>2</gridY>
<style>menu_button_off_.png</style>
<link>HotwaterGraph</link>
<mode>link</mode>
</button>



<button NAME="page1">
<label>
<text>Main Page</text>
</label>
<gridX>4</gridX>
<gridY>2</gridY>
<style>menu_button_off_.png</style>
<link>Main</link>
<mode>pagetoggle</mode>
<group>panel</group>
</button>
</page>

[Kevin]

It's easy to get a series of buttons that display different graphs - you put each Pachube graph (textbox) on a different page and put each page into the same group - that way only one page within that group can ever be displayed. Put each button into a group too. Set all these pages to <visible>false</visible> initially.

IIRC the link feature in beta 5 will only link to pages and so you need to change each button to link to the appropriate page rather than directly to the Pachube textbox.

What isn't going to be so tidy is when you have a graph displayed and then you click your 'Main Page' button , because the graph will still be displayed. This is because 'Main' and your graph(s) are in different groups and a page can't be in multiple groups. You have (and need) 'main' and 'page2' in another different group.

Thinking on my feet here but probably a few ways around this... the last one is probably best.

1) As the pages are layered in the order they appear in the XML you could add 'page2' then the 'graph pages' and finally 'main' ensuring that the background of 'main' obscured the graphs.

2) You could have a 'cancel' graph button that basically just enabled a blank page that was in the same group as your graphs to remove them whilst you are on page2, prior to returning to the main page.

3) You could structure your design such that the buttons that switch between your screens are on one 'master' page that is always visible, rather than toggling between main/page2 as you do currently, and then introduce the desired content based on your selection in pages that are all in the same group and so are mutually exclusive. Your graph selection buttons would be on one of these pages so you would select 'graphs' from the 'master' page and then the specific graph you wanted from the graphs page. When you select another button on the (still visible) master page , the graphs would all disappear.

[edit] Bear in mind that if the layering is correct (based on the XML ordering) then you can use elements within your current selection page to obscure part of your always visible master page should you wish, just so long as you retain a way to navigate back...

If you still have difficulty post again and I'll create some XML for you.

K

[Alanmh]

For the reply, I am 80% with you. In fact I had already started to code the graphs into seperate pages.

I wanted to get it working a step at a time, but have hit a problem. The attached xml just shows blank, but I cant see anything wrong.

Back to the plan, I sort of get what you mean with option 3, is there a way to keep a navigation menu in the left hand strip? (a bit like Brett's example) and just change the main panel. So in an 5 x 4 grid, the 0,x strip will always be the pages menu, and the 1,2,3,4 xpositions will be the display panel.

[Kevin]

Yes absolutely... A page is just a Z order placeholder if you like and so it doesn't block screen touches and is transparent by default. Only when you add elements to the page do they then obscure things behind. A background typically obscures a lot but actually it can be sized to be smaller than the screen.

So if on your main page you used the left hand vertical area or the bottom or even both you can then have your 'sub pages *' using the now slightly smaller upper right quadrant. Here's a screenshot of something using both left and bottom in that way. You might set the background on the 'sub page' to that upper quadrant area should you want something that blocks out any other pages.

I'll take a look at your XML a bit later when I get a moment... It's slightly awkward as once you use custom images (png/jpg) files in the XML it means that the file won't load without these images in the directory so there's a bit of editing required at this end ... If you do have the images as a zip file it may be worth providing a link to them - provided they can be distributed freely of course.

One thing that does often cause blank startups is a bad background image link within a page. ITMT if you do suss it let me know.. Sometimes running the SWF on a PC will reveal a runtime error message that is more informative than say the Joggler.

K

* Actually this isn't actually a true sub page as xAPFlash does not allow pages within pages - it's just that because a page's opaque content can be sized physically smaller than the whole screen it appears to be a sub page.

[Alanmh]

Thanks Kevin

When I understand it I will write up my misunderstandings.

Here are the missing images etc. Most available on Brett's site, but here in one zip. I had a challenge to keep within 100k, but this should be all or at least cut down the editing effort.

I really appreciate your help on this.

[Kevin]

OK Just had a chance to try this Alan and it works here . It's not hanging at startup. Not sure what you've got different there...

- I had to manually add a menu_button_off_.png icon which wasn't in the assets - as well as the matching menu_button_on_.png..

K

[Alanmh]

I only checked it in IE, it doesnt work in IE, but does work on the Joggler.

Graphs still not there yet, the Outside graph seems toggle with the button, but the water graph does nothing. Will have another look this afternoon.

Thanks

Alan

PS I checked with Chrome and it doesnt work in that either - weird

[Alanmh]

I had a visible tag in the hotwater textbox.

For the benefit of anyone else trying to do this, here is the second page xml that works. It can be expanded from here.

<page NAME="Page2">
<group>panel</group>
<visible>false</visible>

<button NAME="graph1">
<label>
<text>Outside</text>
</label>
<gridX>0</gridX>
<gridY>2</gridY>
<style>menu_button_off_.png</style>
<link>OutGraph</link>
<mode>link</mode>
</button>

<button NAME="graph2">
<label>
<text>Water</text>
</label>
<gridX>1</gridX>
<gridY>2</gridY>
<style>menu_button_off_.png</style>
<link>HotwaterGraph</link>
<mode>link</mode>
</button>

<button NAME="page1">
<label>
<text>Main Page</text>
</label>
<gridX>4</gridX>
<gridY>2</gridY>
<style>menu_button_off_.png</style>
<link>Main</link>
<mode>link</mode>
<group>panel</group>
</button>

</page>
<page NAME="OutGraph">
<group>graphs</group>
<visible>false</visible>
<textbox NAME="OutsideGraph">
<group>graphs</group>
<posX>100</posX>
<posY>0</posY>
<width>650</width>
<height>280</height>
<text><![CDATA[<img height="280" width="600" src="https://api.pachube.com/v2/feeds/10591/datastreams/3.png?width=600&height=280&colour=%23f15a24&durati on=1day&title=Outside%20Temp&stroke_size=10%20%20m ax&show_axis_labels=true&detailed_grid=true&scale= auto&min=-10&max=30&timezone=UTC"></img>]]></text>
</textbox>
</page>

<page NAME="HotwaterGraph">
<group>graphs</group>
<visible>false</visible>
<textbox NAME="HotGraph">
<group>graphs</group>
<posX>100</posX>
<posY>0</posY>
<width>650</width>
<height>280</height>
<text><![CDATA[<img height="280" width="600" src="https://api.pachube.com/v2/feeds/10591/datastreams/5.png?width=600&height=300&colour=%23f15a24&durati on=1day&title=Hot%20Water&stroke_size=10%20%20max& show_axis_labels=true&detailed_grid=true&scale=aut o&min=-10&max=30&timezone=UTC"></img>]]></text>
</textbox>
</page>

[EJJ]

Thanks alanmh - got me started.....now to overlay pages and auto-update!!!!

Keep posting ...... great effort!