First, let's look at how we set up variables for navigation. We created several Integer Variables for this purpose in TCPmaker Pro's Visual Page Designer, shown in the table below:

Variables for Navigation

Variable Name:	Id:
PageNum	iv16
Back	iv17
Next	iv1

 

 

For each of the 5 buttons on the navigation panel on the left, we set its mode or m property to be radio, so that only one button of the group can be in the active (lit up) state at any time.  We set the g property of each of these buttons to go to the corresponding page (page id pg3 for the Variables button selected in the screen shot below).  Every  button in this radio group should be assigned a unique value for property rb, the radio button number.  We also associated the PageNum variable with each of these 5 buttons in this radio group.

What this means is that, when the user clicks on one of these radio group buttons, the following things happen: 

• The button that was previously active becomes inactive (and is shown as unlit)
• The newly clicked button is then shown as lit
• The value of the button's rb property gets assigned to the PageNum variable
• This PageNum variable is sent to the device, and
• Our Flash code running in the browser obeys the command embedded in the g property, and goes to the new page

The PageNum variable sent to the device tells the device which page of our layout is currently being shown on the browser.  We added a few lines to the PageNum variable's Receive Event handler in the PIC code, to display that value on the demo board's LCD display. 

open full sized image