Call us! 512-349-0334 or (877) INDUSOFT

Formatting the Fill Area in the InduSoft Web Studio Trend Object

Did you know that the area under trend lines in the InduSoft Web Studio Trend Object can be colored or filled with custom images?

InduSoft web Studio users sometimes need to create custom trends that are used for various informational or decorative purposes and wonder about how to do that.  With InduSoft Web Studio, it’s easy to fill the area under trends with solid colors, color patterns or even bitmaps. The following images from the “TrendBackground1.app” sample project show some of what can be done.

fill1 fill2

fill3

In order to use a fill or a bitmap image just open the “Points” dialog of the trend and in the fill section of the “Pen Style” dialog, select the “Fill Type” pulldown, and select either solid color or a custom pattern.

fill4 

‘Solid Color” allows you to choose from the color palette including the ability to define your own custom color.

“Custom Pattern” allows you to choose an image file that you have stored in the project \Web folder or other path from that root such as the “\Resources” folder. In the project shown, a string tag has been entered, and the tag contains the path and picture name of various images. When the various buttons are pressed, the tag value is reassigned the new path and name of a different Image, changing the picture under the trend.

How this works “behind the scenes” is, the image underneath the trend is actually pasted onto a special background area of the screen that the trend object is on, and the area under the trend line is simply a transparent color allowing the image to show through the trend object to the “background”. This means that the trend object may not necessarily be lined up with the image, as shown here:

fill5

Suppose that you want to align the picture with the trend object. How could this be done?  Just put the trend object into a popup screen, aligning the top and left edges. Create your image to fill in the same area as the trend does (you can check it by making your image the screen background image in the “Screen Attributes” dialog (put the image into the “Screen” folder of your project in order for the screen to use it as a background image).

Once the image is the right size and shape, put it into the \web folder or a folder under it such as \resources and select it as the fill image for your trend. The image will be positioned in the upper-left-hand corner, and if it doesn’t fill the screen, it will be tiled to fill the screen size that is underneath the trend object; but the only place it will be visible is in the area underneath a trend line. See the example below for the result.

fill6

The sample project demonstrates the functionality and how to do this. You can download the project “TrendBackground1.app“.

Comments are closed.