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.
Then you'd have to add Javascript and Ajax to make your content interactive enough that you could use your browser to send data TO your device. And then you had to figure out how to get the data sent to your device over the web, to actually be accessable by the firmware of your device.
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

  • Define Your Variables
    Define Your Variables
  • Lay Out Controls...
    Lay Out Controls...

    ...and associate variables with them.

  • Save & Test Your Layout
    Save & Test Your Layout
  • Test In Browser
    Test In Browser
  • Exit the Visual Page Designer
    Exit the 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.


Associate Variables with Controls

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



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.


The TCPmaker Way: Drag-and-Drop Flash-Based Interactive Controls

A TCPmaker demo

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!

Next: Dress It Up >>



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 -- Only $379.95


Give Me Access Now!

PayPal Acceptance Mark