TCPmaker : Visual Tour    Sending Messages to Screen Controls  

Page 1


If you think about it, every Windows program you have ever run has changed its appearance in subtle ways from one moment to the next, usually to guide your actions.

  Here are some examples:

  • Controls like buttons or text boxes will sometimes appear greyed out (disabled) in order to show you that it is not meaningful for you to click them right now.  Even if you do click on them when they are in the disabled state, nothing will happen.
  • Similarly, sometimes menu items will appear or disappear at times, to restrict your choices and prevent you from choosing something that would cause harm.
  • Some Windows programs will change the color of some screen controls or text, to indicate a good or bad situation.

The ability to change the appearance of controls on the screen is useful technique that Windows software developers use a lot. 

As a TCPmaker Pro developer, you can do those sorts of things as well.  You can easily add a few lines to the code in your embedded web device to tell the TCPmaker controls on your browser screen to change their text, color, transparency, rotation, and so on.

This tutorial shows you how to do things like that, and suggests some reasons why you might want to do so in your application at times.  We'll build up a sample application (included in your TCPmaker Pro installation) to demonstrate these capabilities.





Page 2


To make this easy to do, we've added the Control Message API to TCPmaker Pro. Most of these functions are located in a file called mtControls.c in the TCPmaker subdirectory that contains the generated code for each compiler for which you generate code.  That is, source code file mtControls.c and its matching header file mtControls.h is located in the same directory as mtGen.c and the generated MPLAB project directory, *.mcp, for each specific PIC compiler you choose in TCPmaker.

To conserve program memory, each of these functions is surrounded by conditional compile directives, so the function isn't compiled unless you activate its associated #define statement.

If you want to use a particular Control Message API function, just un-comment its associated #define statement, located just above its function prototype in header file mtControls.h, and then follow the directions in this tutorial to call the function from within your code.

 





Page 3


It will aid your understanding if we group these functions into categories:

Text
mtSetTextColor()
- Set the color of a Tx text display
mtSetTextRom() - Set the text of a control
mtSetTextSize() - Set the size of text on the Tx text display

Position and Appearance
mtSet_x()
- Move a control in x direction only
mtSet_y() - Move a control in y direction only
mtSet_xy() - Move a control in both x and y directions
mtSet_rotation() - Rotate a control
mtSet_alpha() - Change transparency of a control
mtMoveControl() - Move a control and change its appearance at the same time
mtSetColorIndices() - Set both c and a color indices for a Pb or Ld control
mtSetColorIndex() - Set the cx (i.e, the one and only) color index for controls Hs, Bx, C1

Navigation
mtGoToPage()
- Go To A Page
mtSetButtonGoToPage() - Set the "GoTo" page (g property) of a Pb button control

Behavior
mtOkToSend()
- OK to transmit a control message to the browser?
mtSetButtonMode() - Set the operating mode for a button

Variables and Associations
mtSetAssociationIv()
- Associate an integer web variable with a control
mtSetAssociationNv() - Associate a float web variable with a control
mtSetAssociationSv() - Associate a string web variable with a control
mtSetFormat() - Set the format string and argument list of an Sv string variable
mtSetScale() - Set the scaling factors for a floating point Nv variable
mtSetScale_NoFloatLibs() - Set the scaling factors for a Numeric variable,
                         specifying the PC side floating point parameters, pn and px, as strings





Page 4


One word of caution - each Control Message function must be ENABLED before you can use it. The code is set up this way so that the Control Message API will only consume program memory for those parts that you actually use.

To show you how to do that, take a look at this small part of (the C18 version of) file mtControls.h:

// **********************************************************************
//
// Control Message API Function prototypes
//
// NOTE:
// =====
// All of these functions are DISABLED by default, to save program memory.
//
// Before you can use any of these functions, you must first enable it by
// UN-commenting the conditional compile #define statement just before the
// function prototype in file mtControls.h

//#define USE_mtSetTextRom
// mtSetTextRom - Set the text of a control
void mtSetTextRom(rom char *id, rom char *value);

//#define USE_mtSetTextSize
// mtSetTextSize - Set the size of text on the display
void mtSetTextSize(rom char *id, int points, int xscale, int yscale);

 . . .

 

The #defines are all commented out in the as-generated code. All you have to do to enable, say, the mtSetTextSize() function, is to remove the two slashes "//" to enable the #define USE_mtSetTextSize and allow this function to compile.

Remember that if you try to use one of these functions, but forget to enable it, you will get a linker error that says the linker cannot find a definition of this function.  To fix that linker error, just enable the corresponding #define in file mtControls.h and recompile.





Page 5


To show what TCPmaker Pro can do with the Control Message API, we'll build up a multi-page project for this purpose.

Although each page of our layout will contain screen controls like buttons and sliders that we can click or slide, we want to demonstrate how the appearance and behavior of these screen controls can be changed from code in our embedded web device. So, we'll design our demo to run on either the Microchip PICDEM.net2 board (shown below), or its 16-bit or 32-bit brother, the Microchip Explorer 16 board.

Each of these demo boards contains a row of 4 pushbutton switches and a pot, so we'll have our PIC code read these physical controls on the actual demo board, and then send messages to change the appearance of the controls on the PC browser screen.

That is, based on what it reads from the buttons and pot on the demo board, our PIC code will call Control Message API functions to send messages to our Flash content (running on our browser) to change the appearance of the TCPmaker screen controls that are displayed on the PC browser screen.

  Click on the image for page view.




Page 6


Because we have a lot of things we want to demonstrate, we'll need a number of pages in our layout, and we'll need ways to navigate between these pages.  We'll use Pb buttons for that, since they have a g property that can go to a different page in our layout.

We'll want to be able to go from any page of our layout to any other page in our layout, so we'll want the same navigation buttons to appear on every page, in exactly the same place. 

That's a perfect application for TCPmaker Pro's Master Template capability.  We'll put all of our navigation buttons on the Master Template, along with any other labels, titles, or other display controls that we want to appear on every page, in exactly the same location and with exactly the same color and text and other properties.

Let's fire up TCPmaker Pro and build up our Master Template.

 





Page 7


The picture below shows the Master Template we will use for this project.  All the TCPmaker Controls and Background Elements that you see here will be reproduced on every one of the 5 pages of our TCPmaker Pro multi-page layout.

The navigation panel on the left side of the "stage" contains buttons whose g properties will transport us directly to one of these five pages.  This change of page happens in the PC browser, normally without any need to send any message to or from our device, but we'll be doing something special with these buttons that we'll explain presently.

Also, notice the buttons on the lower right corner of our layout, labeled "Back" and "Next". We'll use these in a special way, to get the effect of a "wizard" that steps through the pages in our layout, moving forward or backward in the page sequence.

  Click on the image for page view.




Page 8


When we select the index page of our layout in TCPmaker Pro's Visual Page Designer, we see (copies of) all of the controls on our Master Template, plus all the additional controls and text labels that are unique to this index page.

We have added some controls that will be modified, as well as some labels that tell us to press certain buttons or rotate the pot on the demo board, to cause a control message to command a control to change its appearance.  We'll see that in action shortly.

 

  Click on the image for page view.




Page 9


When we run the finished project (after we have added the code to customize it, as we'll explain in this tutorial), we see that when we click on one of the buttons on the navigation panel on the left, we not only see that button light up, but we also see, displayed on the top line of the demo board's LCD display, a message that looks like this:

PageNum = 1

If we click the Back or Next button, the page also changes, the correct button on the navigation panel lights up, and the PageNum value displayed on the top line of the LCD  display always displays the correct page number, in the range 0-4.

So, how did we get these navigation buttons to work this way?

  Click on the image for page view.




Page 10


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. 

  Click on the image for page view.




Page 11


The Back and Next buttons are set in momentary mode: property m = "momentary". Each of these two buttons has property rb = 1 (the default value), no value is assigned to the g property, and a dedicated Integer Variable is associated with the (i property of) the button.  As shown below, the i property of the Next button is set to the variable whose name is Next.

When the Next button is pressed, the following things happen:

  • The value of this button's rb property is assigned to the Integer Variable named Next, which associated with the button
  • The Next variable is sent to the device over the ethernet
  • The Next variable's Receive Event handler, in mtGen.c, is called automatically.

We added code in the Next variable's Receive Event handler (shown on the next page) that advances to the next page of our TCPmaker layout on the PC browser.

  Click on the image for page view.




Page 12


The code we have added to the Next variable's Receive Event handler is shown in blue boldface type below.  

Note that when the user releases the mouse button on the Next button on our PC browser layout, the value 0 is assigned to the Next variable, which is then sent to the device, so this variable's Receive Event handler, eventNext(), is called again. The code we added tests for this, and only takes action when a non-zero value of this variable is received by the device.

// Event handler for variable:  Next - Informs device that Next button was pressed
void eventNext(void)
{
  // Variable has just arrived, so add your code to DO something with it here:
  // Note that a Pb Pushbutton sends a 1 value when button goes DOWN,
  // and a 0 value a short while later when the button goes UP.
  //
  // We only want to act when the button goes DOWN, so we test if (Next > 0)
  if ( (PageNum < 4) && (Next > 0) )
  {
    PageNum++;
    eventPageNum();  // Update the LCD display
    mtGoToPage( PageIDs[PageNum] );
    PageNumTxFlag = 1;   // Tell mtServer to update the displays as well
  }
}

When a non-zero value of variable Next is received by the device, it takes the following action:

  • Advances the value of the PageNum variable
  • Calls the eventPageNum() event handler to display this value on the LCD
  • Calls the mtGoToPage() function to send a Control Message to command the PC browser to go to the correct page, whose id is stored in the array of strings PageIDs[ ]
  • Sends the new value of PageNum to the PC browser. This will ensure that the correct button on the navigation panel will light up: the button whose rb property matches the new value of the PageNum variable.

The Back button works in a similar way, but in the eventBack() handler, the code we added decreases the value of the PageNum variable.





Page 13


On each of the 5 pages of our PC browser content, you are directed to press the pushbuttons on the demo board to cause the PIC code to call Control Message API functions to command the controls on the PC browser to change their appearance.

For instance, the picture below shows the first ("Text") page, before we press any buttons on the demo board.  This page mainly demonstrates the Control Message API functions in the Text category:

Text
mtSetTextColor()
- Set the color of a Tx text display
mtSetTextRom() - Set the text of a control
mtSetTextSize() - Set the size of text on the Tx text display

It also demonstrates:

mtSet_rotation() - Rotate a control

Compare this to the screen shot on the next page of this tutorial, after some buttons have been pushed.

 

  Click on the image for page view.




Page 14


After we have clicked a few of the buttons and rotated the pot, we see the following changes, as shown in the screen shot below:

  • The string "String1" has been displayed on various controls, including the Tx control above the instructions.
  • This Tx control has been rotated
  • The font size has increased
  • The color of the Tx text has changed to green

 

  Click on the image for page view.




Page 15


The screen shot below shows the initial appearance of the controls on the "Btns, LEDs" page.  

Note that the button labeled "Home" is a navigation button: when pressed, it causes the browser to display the Text page, which is the index or "Home" page of our content. 

This page demonstrates the following Control Message API functions:

mtSetButtonMode() - Set the operating mode for a button
mtSetColorIndices() - Set the color indices for a control
mtSetButtonGoToPage() - Set the "GoTo" page (g property) of a Pb button control

Compare this to the appearance of these controls after some buttons on the demo board have been pushed, shown on the next page of this tutorial.

  Click on the image for page view.




Page 16


After pushing some buttons on the demo board, the appearances of the controls on the "Btns, LEDs" page of the TCPmaker content being shown on our PC browser change, as shown in the screen shot below:

  • Pressing the left button on the demo board has commanded the mode of the rectangular Pb button to be changed from momentary to toggle mode. This Pb button has been pressed once, to leave it in its active state.
  • Pressing the right button on the demo board has changed the active color of both the Pb button, and the Ld indicator next to it, to blue.
  • Pressing the second button from the left on the demo board has commanded the navigation button to change its caption to "Any Control", and its destination to the 3rd page in our sequence, the "Any Control" page.  If you press this navigation button now, the PC browser will go to the "Any Control" page.

 

  Click on the image for page view.




Page 17


This is what the "Any Control" page looks like before any buttons are pressed on the demo board.  It contains a Horizontal Slider control, an LED indicator, and a Horizontal Gauge.

This page demonstrates the following Control Message API functions:

mtSet_x() - Move a control in x direction only
mtSet_rotation() - Rotate a control
mtSet_alpha() - Change transparency of a control
mtSetColorIndex() - Set the cx (i.e, the one and only) color index for controls Hs, Bx, C1

Compare the screen shot below with the appearance of these controls after some buttons have been pushed on the demo board, as shown on the next page of this tutorial.

  Click on the image for page view.




Page 18


After clicking some of the buttons on the "Any Control" page, we see changes as shown in the screen shot below:

  • The Horizontal Slider has been shifted to the left
  • It has been rotated
  • It has been colored green
  • It has been made partly transparent

Note that, despite all these changes, the Horizontal Slider is still fully functional: pressing its "thumb" still lights the LED indicator, and sliding it changes the Horizontal Gauge.

  Click on the image for page view.




Page 19


Here's what the "Variables" page looks like before we click any buttons on the demo board.

(Note that the Pl plotter control is initially associated with variable Pot1, so by turning the pot on the demo board, we have traced out a curve.)

This page demonstrates the following Control Message API functions:

mtSetAssociationNv() - Associate a float web variable with a control
mtSetAssociationSv() - Associate a string web variable with a control
mtSetScale() - Set the scaling factors for a floating point Nv variable
mtSetFormat() - Set the format string and argument list of an Sv string variable

Compare the screen shot below with the appearance after we press several buttons on the demo board, as shown on the next page of this tutorial.

  Click on the image for page view.




Page 20


When we click the left button on the demo board, we change the Nv and Sv variables associated with the Pl plotter control from displaying and formatting Pot1, to displaying a variable that is proportional to time.

If you rotate the pot on the demo board, the line being plotted by the Pl plotter control does not change: variable Pot1 has been disconnected from the plotter control, and another variable and format string have replaced the originals.

  Click on the image for page view.




Page 21


The "Context" page, shown below before any buttons have been pressed on the demo board, is meant to bring these techniques together to demonstrate the sorts of things you might want to do in your project, to have the appearances of your TCPmaker screen controls always correctly reflect the state of your device.

The top half of this page shows another Pl plotter control that can be changed to display one of three different variables.  The Pl control, as well as the labels and controls next to it, have been initialized in the PIC code to display variable Pot1.

 

  Click on the image for page view.




Page 22


If we click the left button on the demo board, our PIC code uses the Control Message API to display the Time variable, along with the corresponding "* Time" label on the left of the Pl plotter control. (Note that the PIC code has has commanded the "* Pot1" label to disappear.)

  Click on the image for page view.




Page 23


If we press the left button on the demo board again, the PIC code commands our content on the PC browser to plot a third variable named Slider, and show a "* Slider" label and a Horizontal Slider control.  (Slide the thumb of this Horizontal Slider back and forth to trace a curve on the Pl plotter control.)

Note that the "* Time" label on the left has been commanded by the PIC code to disappear.

 

  Click on the image for page view.




Page 24


How do we make a TCPmaker screen control disappear?

Look at the group of controls on the bottom of this page.  Pressing the Pb button in the middle will cause the LED indicator next to it to light up. Now suppose we want to make that Toggle button disappear sometimes.

We might suppose that changing the _alpha of the Toggle button to do the trick: after all, we can't see the button anymore, so we're done, right?

We can try that by clicking the top button in the group, labeled "Alpha" - this will cause the PIC code to command the Toggle button to have an _alpha value of 0, making it invisible, as shown on the next page of this tutorial.

 

  Click on the image for page view.




Page 25


Unfortunately, merely setting the Toggle button's _alpha value to 0 using the Control Message API function mtSet_alpha() is not good enough.

We find that if we click in the apparently empty space where the Toggle button used to be(pointed to by the big red arrow in the screen shot below), the LED indicator lights up!

This tells us that, even though the Toggle button is not visible, it is still present, and clicking on that place will cause it to do something.

The reason we wanted to make it invisible was to make the Toggle button go away, so that clicking there wouldn't do anything. Evidently, just making the control invisible is not sufficient.

So now what do we do?

  Click on the image for page view.




Page 26


The button on the bottom of the group, labeled Move, causes the PIC code to command the Toggle button to move beyond the visible boundary of our browser display.

Now if we click the mouse in the empty space where the Toggle button had been, we see that the LED indicator does NOT light up.  This means that the Toggle button is truly gone.

Moral: To make a control truly disappear, so that it cannot be clicked or dragged, you have to move it off screen.

(By the way, in our demo, you can click the Move button a second time to bring the Toggle button back.)

  Click on the image for page view.




Page 27


Before we end this tutorial, let's answer a nagging question you may have:

   "How did we get each button to do different things on different pages?"

We did this by making use of the PageNum variable in the PIC code, that always contains the number of the page of our TCPmaker Pro content that is currently visible on the browser.

Over the next few pages of this tutorial, we will look at the specific places to show how we structured the code to behave this way.





Page 28


First of all, we make use of the optional sendButtons() function, which is present but commented out in file mtGen.c.  Here is what we did with this function:

void sendButtons(void)
{
  unsigned char myButton;

  // On the PICDEM.net 2, BUTTON0_IO is the right-most button
  myButton = !BUTTON0_IO;
  if (myButton != BtnD) {
    BtnD = myButton;
    //BtnDTxFlag = 1;  // Disabled: we aren't actually sending anything to the PC
    if (BtnD)
      HandleBtnD();  // Only call this when button goes down, not when released

  }

  // On the PICDEM.net 2, BUTTON1_IO button is 3rd from left
  myButton = !BUTTON1_IO;
  if (myButton != BtnC) {
    BtnC = myButton;
    //BtnCTxFlag = 1;  // Disabled: we aren't actually sending anything to the PC
    if (BtnC)
      HandleBtnC();  // Only call this when button goes down, not when released

  }

  // On the PICDEM.net 2, BUTTON2_IO button is 2nd from left
  // <Similar code here...>

  // On the PICDEM.net 2, BUTTON3_IO is the left-most button
  // <Similar code here...>

}  // sendButtons()

 That is, we don't actually send any values of variables BtnA ... BtnD  (which we renamed from Btn0 ... Btn3 to avoid the confusion with Microchip's numbering of button #defines like BUTTON0_IO).  Instead, we just call a special handler for each button, whenever the button is pressed down.





Page 29


Then, in these functions like the HandleBtnA() function shown below, we add a switch statement to make the press of this button take a unique action on each page of our multi-page TCPmaker Pro layout.

BtnA is the left-most button of the 4 buttons on the demo board.  PageNum == 0 signifies the index or "home" page of our layout, which is the "Text" page of this demo project.

Pressing the left-most button (i.e. BtnA) on the "Text" page changes the text of the Tx control and all the other sample controls like buttons, sliders, gauges, etc. that are grouped at the bottom of this page.

PageNum == 1 is the second page of our layout, whose navigation button is labeled "Btns, LEDs". On this page, pressing the left button changes the mode of a Pb button between momentary and toggle modes.

You can see how this is done in the HandleBtnA() function shown below:

void HandleBtnA(void)
{
  // Handle a press of the left-most button on the PICDEM.net 2 demo board
  switch (PageNum)
  {
  case 0 :  // index page : modify text size, color, rotation
    // Cycle through text constants
    mtSetTextRom((rom char *)"tx12", (rom char *)TextStrings[StringIndex]);
    mtSetTextRom((rom char *)"hs1", (rom char *)TextStrings[StringIndex]);
    mtSetTextRom((rom char *)"hg1", (rom char *)TextStrings[StringIndex]);
    mtSetTextRom((rom char *)"vg1", (rom char *)TextStrings[StringIndex]);
    mtSetTextRom((rom char *)"ni1", (rom char *)TextStrings[StringIndex]);
    mtSetTextRom((rom char *)"pb8", (rom char *)TextStrings[StringIndex]);
    mtSetTextRom((rom char *)"it1", (rom char *)TextStrings[StringIndex]);
    StringIndex++;
    if (StringIndex >= NumOfStrings)
      StringIndex = 0;
    break; 
   
  case 1 :  // pg1 : modify buttons & LEDs
    // Cycle through button modes
    mtSetButtonMode((rom char *)"pb9", BtnModes[BtnModeIndex]);
    BtnModeIndex++;
    if (BtnModeIndex >= NumOfModes)
      BtnModeIndex = 0;
    break; 
   
  case 2 :  // pg2 : modify any control
    // Shift X position 
    // See project source code for details...
    break; 
   
  case 3 :  // pg3 : modify variables & associations
    // Change plot variable between Pot1 and Time
    // See project source code for details...
    break; 
   
  case 4 :  // pg4 : modify controls to show context
    // Change Plot var among 3 different possibilities 
    // See project source code for details...
    break; 
   
  }
}  // HandleBtnA()





Page 30


Since we use the pot on the demo board for various things on various pages, we also enable the optional function sendPotValue() in file mtGen.c.

The C18 code for this function is shown below. The boldface type shows the one extra line we added, which calls a new function HandlePot1():

void sendPotValue(void)
{
  // AN0 should already be set up as an analog input for PICDEM.net2
  ADCON0 = 0x09;  // ADON, Channel 2
  ADCON0bits.GO = 1;

    // Wait until A/D conversion is done
    while(ADCON0bits.GO);

  // AD converter errata work around (ex: PIC18F87J10 A2)
  #if !defined(__18F87J50) && !defined(_18F87J50)
    PRODL = ADCON2;
    ADCON2bits.ADCS0 = 1;
    ADCON2bits.ADCS1 = 1;
    ADCON2 = PRODL;
  #endif

  Pot1 = ADRES;
  Pot1TxFlag = 1;

  HandlePot1();
}  // sendPotValue()

 





Page 31


The HandlePot1() function is shown below.  In this function, we use the new value that has just been assigned to the Pot1 variable in sendPotValue(), and calculate a new set of color components (red, green, and blue) for the Tx control whose id is tx12.

Our PIC processor's ADC is initialized to 10-bit resolution (i.e. 0-1023), yet each of the color components has an 8-bit value (0-255). To make the color change in a way that looks understandable:

  • We make the first group of 256 values of the range of Pot1 color our Tx with shades of red.  (Blue and green components = 0.)
  • The second group of 256 values color it in shades of blue.  (Red & green components = 0.)
  • The third group of 256 values color it in shades of green. (Red & blue components = 0.)
  • The fourth group of 256 values color it in shades of gray: all color components have the same value.

The number of the color group is local variable ColorPrimary: the top 2 bits of the Pot1 value. The 8-bit shade value is local variable ColorMod.

Here is the code for function HandlePot1():

void HandlePot1(void)
{
  unsigned char ColorMod;
  unsigned char ColorPrimary;
 
  // Handle rotation of the pot on the PICDEM.net 2 demo board
  switch (PageNum)
  {
  case 0 :  // index page : modify text size, color, rotation
    // Change color of text
    ColorPrimary = Pot1 >> 8;
    ColorMod = Pot1 % 256;
    switch (ColorPrimary)
    {
    case 0 :  // Red
      mtSetTextColor((rom char *)"tx12", ColorMod, 0, 0);
      break;
      
    case 1 :  // Green
      mtSetTextColor((rom char *)"tx12", 0, ColorMod, 0);
      break;
      
    case 2 :  // Blue
      mtSetTextColor((rom char *)"tx12", 0, 0, ColorMod);
      break;
      
    case 3 :  // Greys
      mtSetTextColor((rom char *)"tx12", ColorMod, ColorMod, ColorMod);
      break;
      
    }
    break; 
   
  case 1 :  // pg1 : modify buttons & LEDs
    // Nothing to do...
    break; 
   
  case 2 :  // pg2 : modify any control
    // Nothing to do...
    break; 
   
  case 3 :  // pg3 : modify variables & associations
    // Nothing to do...
    break; 
   
  case 4 :  // pg4 : modify controls to show context
    // Nothing to do...
    break; 
   
  }
}  // HandlePot1()





Page 32


There are a couple of things we left un-done in this demo project, and which you can add as "exercises for the student:"

Exercise 1: Change the Back and Next buttons at the ends of the page sequence

If you look at a Windows program that uses Back and Next buttons (like TCPmaker!), the appearance or text of these buttons usually changes when you reach the beginning or end of the sequence.

In such programs, when you have clicked the Next button to reach the end of the sequence, usually the text of the Next button will change to something like "Finish", or maybe the button itself will become disabled (greyed out) to indicate that you cannot go any further.

Similarly, when you have clicked the Back button enough times to go all the way to the beginning of the sequence, the Back button may either disappear or become disabled, to indicate that there are no pages before this one.

Your assignment: add such behavior to the CM_Demo project.

Exercise 2: Add an "Auto Repeat" when the user holds down a button on the demo board

The way we implemented the handling of the 4 buttons on the demo board, holding down a particular button on the demo will do nothing: the code will only send out a message when the button is first pressed down.

It might be useful to change the code in some cases, so that if the user holds down one of the buttons on the demo board, the same code will be called again and again, 12 times a second. This will result in messages being sent again and again. 

This could be useful in some cases, but not useful in others. 

For example, for those places where our code sends a new choice to the control, then holding down the button on the demo board would have the effect of rapidly cycling through all the possible choices, which can be useful.  (This is sort of like the auto-repeat capability of your PC keyboard: holding down a key causes the same character to be repeated for as long as the key is held down.)

For those places in our code that only send one message that never changes, then repeating this same message as long as the button on the demo board is held down would NOT be useful: just be a waste of ethernet bandwidth.

Your assignment: identify the places in the CM_Demo source code where it would be useful to repeate the message as long as the button is held down, and modify the code to behave this way.

 





Page 33


That pretty much covers what TCPmaker Pro's Control Message API can do for you. This powerful capability can help make your TCPmaker Pro project do amazing things.

You can use these functions to:

  • make sure that the controls on the PC browser screen always give the end user a correct indication of the true state of your device.
  • give the end user subtle visual cues that guide him to take appropriate actions
  • signal the user of danger or alarm situations,
  • or, just make your device more fun!



Text Author: Dr. Bob Miller   Copyright Notice and Author Information