TCPmaker embedded web server software for PIC devices provides a wide variety of gauges and indicators, to display numeric values.

 

[video demo of gauges and indicators]

 

Linear gauges are very versatile.  They are a natural choice for displaying things like how full a tank is. The versions without bezels are narrow enough that an number of them can be placed next to each other, as you would do in an audio spectrum bar graph.

 

Radial gauges have a moving needle. They are a natural choice for displaying quantities like speed, or instantaneous audio volume.

 

Sometimes you need to see a precise numerical value for the quantity you are displaying.  TCPmaker Pro provides several indicators that display a quantity as a formatted string (You control the format with a TCPmaker [link to Format Your Data With No Code] string variable.

 

TCPmaker Pro's gauges and indicators come in a number of variations:

• With a surrounding bezel, so you can display the same quantity in both graphical and numeric form.
• Without a bezel, to save space so you can place indicators close together on a page
• With adjustable color bands, to optionally indicate warning and danger zones at the low and high end of scale.
• Without color bands, for simplicity

 

If you need a graph, [link] take a look at TCPmaker's oscilloscope control

 

 

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

 

Read more about: Displaying images and animations >>

 

Read more about: Entering precise values as text >>

 

Next: Page Layout >>

 

 

 

 

 

[video demo on button types]

 

A TCPmaker embedded web server can display several different types of buttons on the PC web browser:

• Pb multi-mode rectangular pushbuttons,
• Cb checkbox buttons, and
• Rb radio buttons.

 

All of these can have different colors for the inactive state("up" or "not pressed") and the inactive state.  You can choose these colors to make your buttons appear to light up when pressed.

 

The Pb rectangular button has several operating modes: momentary, toggle, and radio group, so you can use this versatile button in a variety of ways.

 

The Cb checkbox button behaves like the Pb rectangular button in toggle mode, but also shows an X in the box when it is in the active state, to give your your viewers an added visual cue.

 

The Rb radio button acts like the Pb rectangular button in radio button mode, but the Rb also shows a filled in circle when it is in the active state, to give a visual cue.

 

The these buttons provide visual cues to your users that make your product more intuitive, so you get fewer tech support calls.

 

Watch the video to see how you can use the different modes available in these buttons, including the radio button mode.

 

 

 

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

 

Read more about: Displaying images and animations >>

 

Read more about: Entering precise values as text >>

 

Next: Page Layout >>

 

 

 

 

 

String variables can contain standard format strings that you can use to control how your data is displayed.

 

Suppose you want to read a pot on your board, and the two end terminals of the pot are connected to ground (0.0 V) and the 3.3V supply.  You create a numeric transfer variable in TCPmaker, called Pot1.  The chip has a 10-bit ADC, so it returns raw values in the range of 0..1024.  You set the scaling parameters for variable Pot1 as follows:

 

mn = 0,   mx = 1023

pn = 0.0,  px = 3.30

 

You create a String Variable called Sv1 to display the value of Pot1.  You set the f property of the string variable to be:

 

%5.3f Volts

 

and you set the argument list property of the string variable to be

 

Pot1.

 

Then, in the Visual Page Designer, you simply associate the string variable Sv1 with one or more controls in your layout.

 

After you generate your code, you add some PIC code to read the ADC channel that is connected to the wiper of the pot, and simply place the raw ADC result into variable Pot1 and set the flag to send Pot1 to the PC browser. That's the only coding you have to do.

 

When you run your device and turn the pot all the way up, so that your PIC code reads the full scale value 1023 from the ADC, it sends that to the PC in variable Pot1.  The PC browser will then  show the formatted string

 

3.300 Volts

 

on any screen control that uses your string variable Sv1.

 

When you turn the pot down to half of full scale, the PC browser will automatically change its display to show

 

1.650 Volts.

 

That's all you have to do!

 

 

 

Learn more about: TCPmaker's Transfer Variables >>

 

Learn more about: Scaling your data with no code >>

 

Next: TCPmaker's Screen Controls >>