Suppose you'd like to set things up so that when you click that button on your browser, a signal gets sent to your TCPmaker PIC dedicated web server board over the network (or over the web!) to light up an LED that is connected to, say, pin RJ7 on the PIC18F97J60 EtherPIC on your device.

 

TCPmaker makes that really, really easy!

 

First, you create an Integer Variable called D1 in TCPmaker's Visual Page Designer, and then you associate it with a button called Pb1 on one of your pages.

 

When TCPmaker generates ethernet controller software for your project, it will create a file called mtGen.c, which is where you'll customize your generated code. Toward the top of this file, you'll find a comment block with a helpful summary of all the variables you have created for your project, that looks something like this.  (We've highlighted the entry for our variable D1 below:)

 

 

//*****************************************************************************

//

// Variable Declarations:

// ======================

// The following variables were created in TCPmaker's Visual Page Designer, for

// the purpose of transferring specific, named data items between the device

// and the PC browser:

//

// Integer Variables:

// ==================

//    D1  (id="i0")

//    D2  (id="i1")

//    D3  (id="i2")

//    D4  (id="i3")

//    D5  (id="i4")

//    D6  (id="i5")

//    D7  (id="i6")

//    D8  (id="i7")

//    Btn0  (id="i8")

//    Btn1  (id="i9")

//    Btn2  (id="i10")

//    Btn3  (id="i11")

//

// Numeric Variables:

// ==================

//    Pot1  (id="n0")

//    Degrees  (id="n2")

//

// String Variables:

// =================

//    Sv0  (id="s0")

//    Sv1  (id="s1")

//

// Variables that travel either into or out of the device are declared

// here.

//

//*****************************************************************************

 

 

Just below this comment block, you'll find a couple of declarations for your variable D1, that look like this:

 

// Variable D1 - Diode D1 connected to RJ7

//  D1  **In**  **Out**

//  is used by these controls in browser layout:

//    Pb1 --- Page: Class=Pg

//

//

int D1;                   // Data transfer variable as created in Visual Page Designer

unsigned char D1TxFlag;   // Transmit flag for this variable: set True to send

 

 

Farther down in the file, you'll find an event handler procedure for this variable.  TCPmaker's software framework will make sure that this event handler gets called any time the variable D1 gets changed. That will happen automatically whenever the user presses or releases the Pb1 button that you put in your layout.

 

You can cause your PIC processor to turn that LED on or off by adding just one line of code (highlighted) to the event handler that TCPmaker created for variable D1, shown below:

 

 

// Event handler for variable:  D1 - Diode D1 connected to RJ7

void eventD1(void)

{

// Variable has just arrived, so add your code to DO something with it here:

PORTJbits.RJ7 = D1;  // This is the only code you need to add to light LED

}

 

 

All we did was to assign the new value of variable D1 to the digital I/O pin that the LED is connected to. It's as simple as that!

 

So, whenever the user presses or releases that Pb1 button in your layout, here's what happens:

1. A signal automatically gets sent from your PC browser, over the Ethernet cable (and possibly over the World Wide Web, depending on where your device is located) to your device, with the new value of variable D1.
2. TCPmaker's software framework in the PIC recognizes that signal, and places the new value into the variable D1 in your PIC.
3. It then calls the eventD1( ) handler, to inform your code that this new value has arrived, and that something should be done with it.
4. The code you added to this event handler does whatever you want to do with the new value of this variable. In this case, we turned an LED on or off, but you can do whatever you want.

 

 

Read more: mtServer events >>

 

Read more:  Sending data to the PC browser >>

 

Read more: Control Messages >>

 

Next: Applications for TCPmaker >>

 

 

 

 

 

 

Setting up your interactive controls in TCPmaker software for an embedded ethernet controller device is a breeze.  In the Visual Page Dsigner, just select a control, and you'll see its Property Page on the left, where you can set the properties of the control.

 

[video demo of setting the properties and associating variables with controls]

 

Some types of TCPmaker controls (like sliders, buttons, and text input controls) can change the value of a data variable, which then needs to be sent to the PIC device. Other types controls (like LEDs, gauges, and numeric indicators) can only display data that has been sent from the PIC device.  For either type of TCPmaker control, the hookup of data item to control is very simple:

 

All you need to do is just select the name of the data item from a drop down list in the Property page. That's it.

 

If your control (e.g. a gauge) is an indicator, that just displays the value of that variable, then any time that variable's value changes, the appearance of the control will update automatically.

 

On the other hand, if your control (e.g. a button) changes the value of that variable, then the new value automatically gets sent to your PIC device, as well as to any other TCPmaker screen controls that are associated with this variable, so their appearance updates automatically too.

 

Next: Dress it up >>

 

 

 

 

 

It's always helpful to be able to display images on your embedded web device, both for visual appeal and to help the user understand what to do.

 

The trouble with images is that they can take up a lot of the very limited storage space on your embedded device, AND bitmaps can look blocky and bad if they aren't shown at just the right size.

 

TCPmaker ethernet controller software provides a Px control that can display two kinds of images: compressed .JPG images, and Adobe Flash .SWF files.

 

[video demo show]

 

We recommend that you use Flash .SWF images, for these reasons:

• Flash uses vector art, so it always looks crisp, with no jagged lines even when the size is scaled up or down.
• The .SWF file format is very cleverly designed to need very little space compared to even a compressed .JPG image.  You'll be amazed at how much image complexity you can squeeze into only 1-2 KB of storage on your device.
• Flash lets you add drop shadows and gradients, to give your image a beautiful 3-D look, with very little extra storage requirement.
• Flash lets your image MOVE.  The rotating Microchip logo animation, shown in the demo above, only took up around 900 bytes of storage.

 

Because TCPmaker allows controls and background elements to be layered on top of each other, you can use a Px control to display something like a piping diagram of the system you need to control, and then place TCPmaker controls on top of the diagram at strategic places: vertical gauges on top of tanks, to show liquid levels, buttons next to pumps, to turn the pump on or off, and so on.

 

 

Read more about: Using different multi-color button types >>

 

Read more about: Displaying numeric values with gauges and indicators >>

 

Read more about: Entering precise values as text >>

 

Next: Page Layout >>