Embedded web server Design in the Bad Old Days
(i.e. Last Week!)
In the old way of laying out interactive content pages for your dedicated web server, you would use a regular web page design tool to lay out your content, and you'd struggle with HTML and CSS layout rules to get things looking OK. But you'd have to test your layout in many different browsers, because things don't always come out looking the same in Internet Explorer 6 as they do in, say, Firefox 3.0.
Our customers tell us it used to take a whole day just to light up one LED: a slow, painful experience.
The TCPmaker Way:
Design Your Content With Drag & Drop Ease
TCPmaker uses a completely different approach, that's kind of like those Visual XXX programming languages that you see for the PC.
Instead of having to treat HTML like a programming language (that you have to tweak in order to put things where you want them), TCPmaker lets simply you place attractive interactive controls on the drawing area, and arrange them with drag and drop ease. Your controls stay where you put them, with no HTML or CSS surprises.
Visual Page Designer
TCPmaker 's Visual Page Designer gives you the power to create attractive, multi-page layouts containing colorful visual controls, background elements, and text.
Associate Variables With Controls
Setting up your interactive controls is a breeze in TCPmaker . Just select a control, and you'll see its Property Page on the left, where you can set the properties of the control.
For those controls that can either set data that then needs to be sent to the PIC device, OR that can display data that has been sent from the PIC device, 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) 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.
Read more about: Associating variables with controls >>
Test The Final Layout Before It's Final
TCPmaker's Visual Page Designer gives you a lot of "How am I doing so far?" features, to help you gauge how close to being done you are, as well as to head off problems while it's easy to fix them.
Chief among these features is that TCPmaker lets you test your layout in the browser, right on your PC, before you even program your project into your PIC device. This lets you:
- check the appearance of your pages
- test how well your navigation works between your pages (like, whether you maybe forgot to actually finish the navigation...)
- and even test the interactivity of your TCPmaker screen controls, at least in a limited way.
Based on what you found in your test, you can make changes and test again, or you can exit the Visual Page Designer and generate code. You're in complete control!
Set Up "Submit Groups"
Most of TCPmaker 's screen controls send their data to your device as soon as the control is clicked or dragged, which can be great for making immediate changes to individual settings, like turning on a motor right away.
But some things you may need to do require you to set several parameters first. Then, only after all the parameters have been set correctly (and consistently with each other), do you want to actually trigger the action.
An example of this is the process of changing the network address of your device, over the network. You access the device on the network by pointing your browser to its existing network address. Then, you access a password protected page of your TCPmaker layout that contains Input String (Is) controls, into which you enter the new network address parameters, which might include a new IP address, MAC address, and so on. Then, only when all those parameters have been entered correctly, you click one button to make the change, and then point your browser to the new address of your device.
TCPmaker lets you do that with Submit Groups. By creating a Submit Group, the actual processing of the data from all the controls in the group gets delayed until the "submit" button is pressed. The Is control has special properties to let you light up your display when the user has changed the string, to remind the user needs to actually click the submit button to make the change take effect.
Use Reports to See How Close You Are To Being Done
The Visual Page Designer provides helpful Reports about your project. These reports list the variables, controls, and pages that you have defined thus far, and the relationships between them.
You can get reports like these:
- Full Report (all variables, pages, and controls, with all properties shown)
- Variables and the Controls That Use Them
- Controls and the Variables They Use
and several other report types.
These reports can help you see how close your design is to being done. They help you answer questions like these:
- Have I defined all the data items that I need?
- Have I associated all data items with at least one screen control, so I can control that variable from the PC or at least see its value?
- Are all screen controls that transmit or receive data associated with a variable? (That is, do we have any controls that haven't been hooked up yet?)
All This Content Takes Very Little Storage on Your PIC Micro
TCPmaker Pro gives you all these great capabilities because it does things in a brand new way. To help you see what we mean, let's compare the old way of doing things with the TCPmaker way.
The OLD WAY Of Making Embedded web server Content: HTML, CSS, AJAX
- 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)
- 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.
The TCPmaker Way: Drag-and-Drop Flash-Based Interactive Controls
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.
- 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!
Next: Dress It Up >>