TCPmaker : Visual Tour    TCPmaker Visual Background Elements  

Page 1


TCPmaker Pro's Visual Page Designer also contains background elements that can be used to make your control layout easier to comprehend, by letting you visually group certain controls together.

You can also use these visual background elements to add interesting visual accents, that can make your design more professional looking and attractive.

To make a point or two, we are going to add a page to our layout with a set of background colors that you probably wouldn't pick yourself: a linear gradient that changes color smoothly from a dark blue at the top to a light purple at the bottom, so we can show you how the same background element looks against different background colors.

  Click on the image for page view.




Page 2


The Alpha Circle is a partly transparent circle, which has only a single property on the Property Page:

r - Radius in pixels

The screen shot below shows a number of identical copies of the Ac "Alpha Circle" element, positioned so that they overlap the edge of the colored Stage, and so they also overlap each other.

Notice that these Alpha Circle elements are partly transparent. For this reason, the background color partly shows through making the ones at the top look like a greyish blue, and the ones at the bottom having a greyish pink color.

Where they extend into the white area beyond the left edge of the colored Stage, you can see that they have no tint of their own: they are neutral in color, so they take on the hue of whatever shows through from behind.

Where the circles overlap each other, you can see that less of the background color shows through.  Positioning TCPmaker's background elements in such a way that they partially overlap give you very powerful graphical capabilities, with almost no effort.

  Click on the image for page view.




Page 3


When we test this layout in the browser, we see that these background elements are clipped at the edge of the active Stage.

This gives us useful possibilities: we can intentionally enlarge background elements and just show a portion of them, to easily create interesting visual designs.

  Click on the image for page view.




Page 4


Here is the beginning of an interesting looking design that just uses two Alpha Circles as background elements, with a rotated Text control and some LED Indicator controls.

The Alpha Circles were each changed with the Advanced Properties page, so as to have an _alpha = 30, different values of _xScale and _yScale, and were positioned so that they are overlapping, with only part of each Alpha Circle visible on the Stage.

  Click on the image for page view.




Page 5


Here's how that example looks inside the Visual Page Designer. You can see that the boundaries of the two Alpha Circles extend outside of the colored Stage area, and that they have been shaped into large transparent elliptical shapes by using the Advanced Properties panel. 

TCPmaker's powerful layout capabilities help you make interesting looking designs in minutes!

  Click on the image for page view.




Page 6


The Al or Alpha Box background element is a partially transparent rectangle with rounded corners. Its property page has 3 properties you can set:

w - Width in pixels

h - Height in pixels

r - Corner radius in pixels

The Alpha Box is a good element for grouping: i.e. to show that some TCPmaker Controls belong together in some way.

Now that we have placed an Alpha Box on our layout, the next step will be to start moving the LED Indicators onto the Alpha Box, to show that they belong together. The next page shows what happens.

 

  Click on the image for page view.




Page 7


Hmm, not what we expected!  The red LED indicator looks greyed out. What happened?

The problem is that TCPmaker Controls and Background Elements are drawn in a certain order, which is initially the same as the order in which they were created.

In the case of our layout, we had created our LED Indicators before we created our Alpha Box element, so the problem is that the LED Indicator is behind the Alpha Box.  It looks grayed out because we are viewing the LED through the Alpha Box.

Now what do we do?

  Click on the image for page view.




Page 8


To fix this problem, we use the Z Order button on the Commands panel.
  Click on the image for page view.




Page 9


Clicking the Z Order button brings up the Z Order dialog box, which shows a list of all the Controls and Background Elements on this page, in the order they are being drawn.  (I.e., the current Z Order.)

The item at the top of the list is drawn first, and is therefore behind all the other items in the list.  Unfortunately, our Alpha Box (AL1 id="al1") is at the bottom of this list, indicating that it is drawn last, and is therefore being drawn on top of all the other controls.

 

  Click on the image for page view.




Page 10


We fix our problem by simply selecting the Al1 item in the Z Order list, and dragging it to the top of the list.  Then we click the OK button to get back to our layout.

That will cause our Alpha Box to be drawn first, and therefore appear behind all the other controls, like a "background element" should be.

We provide this means of changing the Z Order because we know you can't be expected to plan everything perfectly from the start. There will be times when you realize, after you have created your controls, that adding background elements would be useful.

  Click on the image for page view.




Page 11


Once we click the OK button on the Z Order dialog box and get back to our layout, we see that we have indeed moved the Alpha Box behind the LED control, so we can see the LED clearly now.

We can move all the other LED Indicators on top of the Alpha Box, knowing that they will all appear to be on top of the box.

  Click on the image for page view.




Page 12


The Bx or Gradient Box with Rounded Corner element is a completely opaque (not transparent at all) box which shows a rounded 3-D look by using a smooth color gradient.

The screen shot below shows several examples, with different size and color.

The Property Page for this element shows the following properties:

w - Width in pixels

h - Height in pixels

r - Corner radius in pixels

cx - Color index, 0..15

 

  Click on the image for page view.




Page 13


The Ci or Gradient Circle element is an opaque circle with a smooth color gradient in the radial direction: that is, the color varies from the center outward.

It has the following properties:

r - Corner radius in pixels

cx - Color index, 0..15

  Click on the image for page view.




Page 14


The Gb or Gold Bar element is actually the "thermometer" part of the Horizontal Gauge.

Its Property Page has the following properties:

w - Width in pixels

h - Height in pixels

r - Gradient angle, in degrees

pc - Percent complete, 0-100

  Click on the image for page view.




Page 15


You might think that there's not much you can do with this as a background element, but in fact, by changing its properties, it can do some interesting things:

  1. By setting pc = 100, r = 45 on the Property Page, and increasing the _width and _height in the Advanced Properties panel, you can make a very convincing looking brass plate. Put some text on top of that, and it will look like a plaque.
  2. By using the same parameters as the above, and also setting _alpha = 40, you can make what looks like a plate glass window over the top of some other elements or controls. (Be careful, though: if you try to click on any Controls that lie underneath this element, it won't work: you will have only clicked on the semi-transparent Gold Bar instead of the Control underneath it.
  Click on the image for page view.




Page 16


The Ge or Gradient Ellipse element is a partly transparent ellipse which looks like it has been lit from the top.  (We think it looks a bit like the moon rising over the horizon.)

Its Property Page lets you set the following properties:

w - Width in pixels

h - Height in pixels

By setting w = h, you create a circle that looks like a rising moon.

By setting _rotation on the Advanced Properties panel, you can change the direction of the apparent lighting.

  Click on the image for page view.




Page 17


The Gr or Gradient Rectangle element is a rectangular element that contains a smoothly changing color gradient.

Its Property Page lets you set the following properties:

w - Width in pixels

h - Height in pixels

tc - Top color (use either the left Color 1 picker below the stage, or the drop down list color picker marked tc on the Property Page)

bc - Bottom color (use either the right Color 2 picker below the stage, or the drop down list color picker marked bc on the Property Page)

 

  Click on the image for page view.




Page 18


The Lg or Linear Gradient element is a box with rounded corners that contains a white  gradient in transparency at the top. 

Its Property Page shows the following properties:

w - Width in pixels

h - Height in pixels

r - Corner radius in pixels

The Lg element is most effective when used on top of another element such as a Bx Gradient Box, to add a 3D highlight to suggest a rounded shape.

  Click on the image for page view.




Page 19


Remember that the apprearance of all of these background elements can be modified in fairly profound ways by adjusting the Advanced Properties like _alpha, _rotation, _xcale & _yScale, and so on.

When you have set _alpha to make the element semi-transparent, you can then overlap several semi-transparent background elements to get interesting visual effects.

You can use a Px control to provide an image as part of your background if you like. This image can also be modified by the Advanced Properties, to rotate it, make it transparent, enlarge it, and so on.

Some (but not all) background elements can be placed so that only part of them shows in the Stage area, so using combinations of these techniques gives you enormous capabilities that are just not available in HTML. 




Text Author: Dr. Bob Miller   Copyright Notice and Author Information