Product Tour: TCPmaker's Screen Controls
What really makes TCPmaker unique is its attractive set of great looking web-ready screen controls. You can place these on your layout very simply, by just dragging and dropping. Then, adjust the properties of the selected control on a simple property page. TCPmaker gives you lots of controls to choose from: buttons, LED indicators, sliders, gauges, even an oscilloscope control!
Use 3 Different Multi-color Button Types
TCPmaker has several different types of buttons: Pb 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.
These buttons provide visual cues to your users that make your dedicated web server / industrial control product more intuitive to understand and use, so you get fewer tech support calls.
Read more about: Using different multi-color button types >>
Display On/Off Values With Realistic Colored LED Indicators
The Ld colored LED indicator control can display different colors for the inactive ("off") state vs the active "on" state, to give the impression of a light that can turn on or off.
The Ld control also has a radio group mode and an rb property. See the previous demo to see how the Ld indicator works with radio groups.
Display Numeric Values with Gauges and Indicators
TCPmaker provides a wide variety of gauges and indicators, to display numeric values.
TCPmaker's versatile linear gauges are a natural choice for displaying things like how full a tank is. Radial gauges, with their moving needle, 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 precisely formatted string variable.
Read more about: Displaying numeric values with gauges and indicators >>
Adjust Numeric Values with Sliders
TCPmaker provides horizontal and vertical sliders, so you can quickly set and adjust the value of a numerical quantity. To help you set a value precisely, these controls have
- Surrounding bezels that can display the quantity in numerical form
- "Bump boxes" at each end: click on them to bump the value up or down by one LSB at a time.
You Can Enter Precise Values As Text
TCPmaker also provides several ways to enter data as text, and send it to your device.
The versatile Is (Input String) control lets you enter data as a generic string, a number, a password, an IP address (like 192.168.1.1), or a MAC addresses / hexadecimal number.
The It (Input text) control acts like a little terminal screen. The upper part is a scrolling text terminal window, and the bottom line is an input box. If you type a string in the input box and hit <Enter>, the string is sent to your PIC device and also added to the contents of the scrolling window, as a record.
Read more about: Entering precise values as text >>
Let Your Users Choose From a Dropdown List
As an experienced programmer, you know that it is usually safer to allow your users to choose an option from a predefined list, rather than having them type in their choice (which may be misspelled, which needs you to write extra code to check for errors and tell them to try again). Your users actually prefer choosing from a list, for the same reasons.
TCPmaker lets your users make choices in several ways.
- One way is [link] Radio button groups.
- Another way, that takes up less screen space, is a drop down list.
Show Your Data As A Graph
Sometimes, the most effective way to display data is with a graph.
Up to now, it was quite difficult to find graphical software that would work with the kinds of small microcontrollers that are used in inexpensive embedded web server devices. If you could find a way to display graphs on your browser at all, it generally only worked on bigger, more expensive microprocessors, and it was s-l-o-w. (If you could find a demo on the web, it was invariably showing graphs of slow moving data like temperature or humidity, and the graph would only update once every few seconds.)
Those days are OVER. Now there's TCPmaker, with its Pl (Plotter) component, that can show fast moving data, while it is changing.
Display Images and Animations
Images on your device's displays improve your product's visual appeal, and help your users 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 provides a Px control that can display two kinds of images: compressed .JPG images, and Adobe Flash .SWF files.
Read more about: Displaying images and animations >>
Next: Page Layout >>
Being able to use beautiful 3-D looking screen controls like buttons, sliders, gauges, and graphs, makes TCPmaker a joy to use.
There is no easier or faster way on the planet than TCPmaker, to make embedded web servers that look great, are highly interactive, and work in a wide variety of PIC microcontrollers. Gets your project up and running fast!
Get Instant Access Now at Our Store :
Product Tour: Define Your Data
It really is all about your data: getting it from the PC browser to the device (or the other way around), and doing it quickly and easily. TCPmaker's transfer variables act like named shipping containers. Let's see what TCPmaker's transfer variables can do for you:
TCPmaker's Transfer Variables
At present, there are three types of transfer variables in TCPmaker, all of which have a name, a short Id, and a value:
Integer Variables transfer data in either direction (to or from the PC), and this data remains in integer form on both sides.
Numeric Variables transfer also data in either direction, but the data is not in the same form on both the PIC and PC side. The value of a Numeric variable is used in integer form in the PIC device (and sent in integer form over the Ethernet as well). However, it is scaled and transformed to floating point form on the PC browser. This lets you display variables in floating point format on the PC, without having to do floating point arithmetic (or even having to load the larger floating point libraries) in your PIC code.
String Variables are often used to display titles and headings on TCPmaker screen controls displayed on the browser. Optionally, a String Variable can contain a standard C-style format string, to display your data in a format that you control. This very powerful capability is done on the PC side: your PIC code does not need to do any formatting of the data with format statements, so your PIC code can stay small and simple.
Integer and Numeric variables are easily set up to send values, from TCPmaker screen controls on the PC browser, to the PIC device. Once a variable and a screen control have been defined in the Visual Page Designer, all you need to do is associate a variable with a control, on the property page that is displayed when the control is selected.
Learn more about: TCPmaker's Transfer Variables >>
Scale Your Data -- With NO Code
The value stored in a numeric variables gets transformed from the integer value that the PIC sees to a floating point value that is used and displayed on the PC web browser. This transformation is defined by 4 scaling properties of the particular numeric variable.
You can use these parameters to scale your data without having to write a single line of code.
Learn more about: Scaling your data with no code >>
Format Your Data -- With NO Code
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. Follow these steps:
- Create a numeric transfer variable in TCPmaker, called Pot1 and set its scaling parameters (Link: See how).
- Create a String Variable called Sv1 to display the value of Pot1.
- Set the f property of the string variable to be %5.3f Volts
- 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 and send the raw ADC result to the PC in variable Pot1. When you run your device and turn the pot all the way up, the PC browser will show the formatted string "3.300 Volts" .
Read more about: Formatting your data with no code >>
Next: TCPmaker's Screen Controls >>
Being able to use beautiful 3-D looking screen controls like buttons, sliders, gauges, and graphs, makes TCPmaker a joy to use.
There is no easier or faster way on the planet than TCPmaker, to make embedded web servers that look great, are highly interactive, and work in a wide variety of PIC microcontrollers. Gets your project up and running fast!
Get Instant Access Now at Our Store :
Your customers don't want to have to try to control your embedded web server hardware by typing numbers into a text box, hitting a gray, dreary looking Submit button, and then wondering if anything actually happened.
Old-fashioned embedded web servers used HTML forms. Slow and clunky looking!
They want to be able to take charge: to be able to make smooth, precise changes in real time, using beautiful 3D screen controls that they grab on to. They want positive visual reinforcement that what they just changed actually did something at the other end of the wire (which may just be on the other side of the world).
In short, they want you to design your embedded web server product using TCPmaker Pro!
This is all you need to do with TCPmaker Pro:
1. Define Data...
...using variable names that are meaningful to you.
2. Lay Out Pages...
...with real screen controls, using TCPmaker's drag and drop Visual Page Designer.
3. Generate Code...
...to "wire it all up." Customize to add real I/O for your data. Compile with your PIC compiler.
= Control With Your Browser!
...anywhere in the world!
TCPmaker Pro works with all Microchip PIC devices that are capable of running the Microchip TCPIP Stack, using these fine compilers:
- Microchip C18 (Larger PIC18F devices)
- Microchip XC16 and C30 (PIC24 and dsPIC devices)
- Microchip XC32 and C32 (PIC32 devices)
TCPmaker Pro generates complete source code for each compiler, and generates project files for both the free MPLAB X and MPLAB 8 IDEs from Microchip.
Next: Direct Transfer of Variables >>
Being able to use beautiful 3-D looking screen controls like buttons, sliders, gauges, and graphs, makes TCPmaker a joy to use.
There is no easier or faster way on the planet than TCPmaker, to make embedded web servers that look great, are highly interactive, and work in a wide variety of PIC microcontrollers. Gets your project up and running fast!
Get Instant Access Now at Our Store :
TCPmaker Pro gives you all these great capabilities because it does things in a brand new way. By harnessing Adobe Flash technology and adapting it for use in embedded web servers, TCPmaker gives your device a beautiful 3D look, and smooth, fast interactivity, but with a surprisingly small storage cost. To get an idea of what we mean by that, please click on the "Flash demo" link below, to see a graphic that can actually be shown on a TCPmaker device:
Click here to see a TCPmaker Flash demo
Now here's a "fun fact" about that graphic - despite the nice 3D look and smooth rotary motion that it has, that little animation only takes about 900 bytes of storage on your embedded web server device! You couldn't even make a screen capture of this graphic that would have a file size that small!
Problems With the Old Way
The old way of making interactive content on embedded web server devices used HTML and AJAX, a Javascript technology that works differently on different web browsers. That approach suffers from a lot of problems:
- Hard to lay out - it can be difficult to position things precisely in HTML and CSS. You can often get surprises: your layout might look fine in one browser (e.g. Firefox), but not in another (perhaps Internet Explorer).
- Complex to program - requiring you, the embedded designer to acquire deep knowledge of unfamiliar web technologies (and their quirky behavior on different browsers)
- Bulky content - your device would have to store, and serve up when required, a lot of what amounts to source code (both HTML and Javascript). All too often, your device would run out of storage before you got your design looking good enough.
- Not very attractive - The combination of HTML and AJAX tends to make interactive content that look flat and "texty" : sliders that look like flat text boxes rather than real controls.
TCPmaker: The NEW Way
The TCPmaker Way uses Adobe Flash to provide great-looking interactive web controls that react quickly and look right in all browers. Adobe Flash comes pre-installed in all new PCs, and is already installed on 95% of all PCs in the world.
- Easy to Lay Out - controls stay where you put them
- No Browser Dependence - your layout looks right in any browser that works with Adobe Flash. Which means ALL of them.
- Easy to program - No PC programming at all, no Javascript or AJAX to learn. Just fill in simple event handlers in your PIC code!
- Content is small - device stored and serves up content in compiled form. A simple layout will fit in 32KB, though we suggest that you provide a bit more storage space in your hardware design, so you can use anything that TCPmaker can do for you.
- Attractive 3-D look - controls look like something that you can click or grab on to and drag. You can make professional looking layouts in minutes!
"Will My End Users Already Have Adobe Flash On Their Computers?"
Yes, it is highly likely that they will. Adobe says that its Flash plugin is available on 99% of all PCs in the world, and is pre-installed on ALL new PCs. The Adobe Flash Player is available for free for the PC, Mac, and Linux platforms.
"Will I Need To Buy The Flash Development Software From Adobe To Use TCPmaker?"
Absolutely NOT! All you need is TCPmaker and your PIC compiler, as well as a demo board or your own design, that is capable of running the Microchip TCPIP Stack.
If you want to design Flash animations or vector graphic images to display in your TCPmaker device, you can buy Adobe Flash, or one of the many inexpensive Flash drawing and authoring tools that are available on the web, some of which cost as little as $50.
Next: TCPmaker FAQ >>
Being able to use beautiful 3-D looking screen controls like buttons, sliders, gauges, and graphs, makes TCPmaker a joy to use.
There is no easier or faster way on the planet than TCPmaker, to make embedded web servers that look great, are highly interactive, and work in a wide variety of PIC microcontrollers. Gets your project up and running fast!
Get Instant Access Now at Our Store :