Issue 100 November 1998
emWare Top to Bottom
Part 1: Monitoring via the Internet

---

COFFEE BREAK

Personally, the addition of Visual Café is one of the biggest improvements made to the later versions of emWare. Before Visual Café was included in the SDK, all of the user interface and user interface code had to be done by hand with HTML tags and the like. Using Visual Café is a lot like using Visual Basic.

All of the objects are chosen from menu bars, and the properties of each object can be manipulated via a property sheet. Once the GUI objects are placed, Visual Café creates the appropriate code needed to define the objects.

At this point, the developer need only associate each object with a corresponding object on the emMicro server. emObjects can be switches, slide pots, analog or digital meters, or LED displays. emWare supplies the emObjects for Visual Café, and these are installed with the initial install of Visual Café.

An EMIT template and EMIT macros are also part of the initial setup and install process. The macros provide a mechanism for linking the display objects with variables on the server. Photo 3 is a look at the business end of Visual Café.

(Click here to enlarge)

Photo 3—Hmm...looks a lot like Bill's Visual Basic.

Take a good look at Photo 3 and let’s walk through a slider setup. The first step is to click on the emSliders tab. Then, select a slider and drag it onto the Form Designer window. Select the slider by clicking on it and set the appropriate properties. That’s all there is to putting a control on the panel.

Remember the emWare works on variables sent and received from the server application code. I must represent this variable just as it is represented on the server device. To keep it simple, I will assign a variable label and name it Red.

The variable label is used to communicate to and from the variables on the server device using EmitJri. I haven’t defined EmitJri, so for now think of it as a conduit or path between the slider and its variable on the server.

Usually, the variable label is hidden, but for clarity I’ll leave it on the Form Designer window. Once it is placed, I select it and set its properties. I’ll call this variable RedVariable and set the text attribute to Red. From now on, this variable will be called RedVariable and Red will be displayed as the RedVariable label.

Now that the physical slider is defined and has been assigned a variable, it’s time to link them. If you’re wondering where Red is located and what the slider will control, I’ll tell you.

The emWare SDK comes with an 8051-based platform that consists of a couple of LEDs, a pot, an RS-232 interface, and an EEPROM. It just so happens that one of the LEDs is red and its variable name is Red.

Now it makes a little more sense, right? OK, let’s finish with the linkup.

After clicking on the slider I just placed and defined, I select Add Interaction. Just like Bill’s stuff, a wizard is conjured up.

(Click here to enlarge)

Photo 4—Just think.This all used to be done "by hand"

As you see in Photo 4, I selected RedVariable and instructed Visual Café to make my slider interact with it. After all is said and done in Photo 5, I told Visual Café to set up the code so that RedVariable would get its information from the slider control.

(Click here to enlarge)

Photo 5—Connecting logical with the virtual physical is what this screen is all about.

All that’s left to do now is establish the path between the slider and the variable on the SDK board. This path is established by running one of the EMIT macros that was installed with Visual Café.

For my purposes, that macro is Add Embedded Event Listener. Photo 6 is what I saw before the command completed. Actually, I am setting up a link between EmitJri and RedVariable.

(Click here to enlarge)

Photo 6—As you would expect, the point and click generates code in all the right places.

I should tell you a little more about EmitJri. This Java run-time interface between the applet resides on the client and the device access service on emGateway. The device access service manages the external communication of data between the server device and the browser.

The Listener macro produces Java code that enables the Red variable on the SDK board to get values from RedVariable in the client applet. RedVariable gets its values from the slider control. Figure 1 is a good logical view of the results of the actions I just performed.

(Click here to enlarge)

Figure 1—EmitJri is the glue that binds the physical hardware to EMIT.

With all that clicking and dragging, you might think there’s code out there somewhere. Well, check out Photo 7. Everything I clicked on or dragged is now code.

(Click here to enlarge)

Photo 7—You want code? There it is.

You’re probably wondering about going the opposite way through EmitJri like the Green or Knob variables in Figure 1. There’s a macro for that, too—subscribe.

For simplicity, I didn’t go both ways here, but for inquiring minds, subscribe is used when a device variable provides an update to EmitJri. The subscribe macro provides Java code that enables any changes in the variables on the server to be automatically reflected in the client applet’s emObjects.

Now that all of the code and GUI info for our simple applet is in place, the next thing to do is run it. Because I used the supplied SDK board and one of the predefined variables, this should be a snap.

The SDK firmware already has all of the necessary components needed to connect to the emGateway software. To create that link, all I need is to start the emGateway application. Once emGateway is started and the SDK is powered up, I can execute my applet directly from the Visual Café application.