Using the Symbol Editor > Getting Started with the Symbol Editor > The BAM Dashboard Example > Making the Dashboard Symbols

Making the Dashboard Symbols

 INDEX Gray bullet PREVIOUS NEXT

Each region symbol is made using three progress bar symbols and one stoplight symbol. The following sections show how to create these symbols. They contain the following information:

Customizing the Progress Bar

In this section, you will extend the progress bar made in Working with Symbols to match the progress bar defined in Defining the Dashboard.

In Transforming Symbols using Parameters you were shown how to define the transformation necessary for this symbol to display percentage progress. You will now concentrate on updating object graphic styles to match the look and feel defined in the dashboard definition.

Graphic styles define the appearance of an object. They are customized using the Paint tab in the Styling Customizer. The appearance of an object is separated into two parts: the fill style and the stroke style. The fill style is the graphic rendering of anything inside an object, the stroke style defines the object border.

To extend the progress bar, you will need to follow the instructions in the next sections:

  1. Changing the Fill Style
  2. Changing the Stroke
  3. Adding Shapes to a Symbol
  4. Changing Symbol Layers
Changing the Fill Style

To change the fill style of an object, use the Paint Editor. To open the Paint Editor for the progress bar symbol:

  1. Open the basicprogressbar symbol from the bampalette. For more information, see Opening a Symbol and Palette.
  2. Select the progressbar object in the Symbol Outline pane.
  3. Click the Paint tab in the Styling Customizer.
  4. Click the button on the right of the Fill Paint field. The Paint Editor opens.

images/diasym_painteditor.png

Figure 1.47 The Paint Editor

As shown in Figure 1.47, the Paint Editor contains tabs for controlling the color, gradient, texture, and pattern of the object. The color can be set using one of the following options:

The gradient can be set using linear, radial or standard tools.

To change the fill style for the basicprogressbar, do the following:

  1. Click the Pattern tab.
  2. Click the button in the Foreground field. The Color dialog box opens.
  3. Click the RGB tab.
  4. Type 71, 231, 71 in the Red, Green and Blue fields respectively.
  5. Click OK.
  6. Select the bars pattern as shown in Figure 1.48.

images/diasym_painteditorpatternchooser.png

Figure 1.48 The Paint Editor Pattern Chooser
  1. Deselect Transparent.
  2. Click the button in the Background field. The Color dialog box opens.
  3. Select the color white in the top left of the Swatches color chooser.
  4. Click OK.
  5. Click Apply.

The color scheme of the progress bar now matches the dashboard definition in Figure 1.44. Before continuing, save the changes you have made to the symbol by pressing the CTRL+S keys.

Note
The graphic manipulation shown in this example is very basic. For information about more advanced graphics, see Exploiting Advanced Graphics Features.

Changing the Stroke

The stroke refers to the border surrounding an object. To change the stroke for the basicprogressbar symbol, do the following:

  1. Open the basicprogressbar symbol.
  2. Select the progressbar object in the Symbol Outline pane. The Styling Customizer opens on the last tab you used, in this case, the Paint tab.
  3. Click the button next to the Stroke paint field. The Paint Editor opens.
  4. Select the JViews Disk tab.
  5. Slide the tone changer to a light gray tone.

images/diasym_painteditorjviewsdisk.png

Figure 1.49 The JViews Disk Color Chooser
  1. Click Apply.
Adding Shapes to a Symbol

In the dashboard definition, the progress bar advances on a white background. To create this effect, you need to make a background object with the same width and length as the fully extended progress bar. To do so:

  1. Open the basicprogressbar symbol from the bampalette. For more information, see Opening a Symbol and Palette.
  2. Click the Add Shape button in the toolbar. The Choose Shape dialog box opens.

images/diasym_addshapebutton.png

Figure 1.50 The Add Shape Button
  1. Select the Rectangle shape and click OK. The Rectangle object is added to your symbol, it is the current selected object.

images/diasym_chooseshape.png

Figure 1.51 The Choose Shape Dialog Box
  1. In the General tab, change the Attachment and Anchor points to match Figure 1.52.

images/diasym_attachmentanchorpoints.png

Figure 1.52 Change the Attachment and Anchor Points

The Rectangle shape is now aligned with the left of the basicprogressbar.

Note
The direction in which a transformation occurs is controlled by an object's attachment point. For example, if the object is attached to the base object from the left as in Figure 1.52, changes in width are reflected by the object expanding to the right of the attachment point.

  1. In the Transform tab, type 30 in the Height field.
  2. Type 120 in the Width field.
  3. In the Paint tab, change the Fill paint color to white using the Paint Editor. For more information, see Changing the Fill Style.
  4. Set the Stroke paint to gray. For more information, see Changing the Stroke.

The basicprogressbar symbol now contains all the objects necessary to match the dashboard definition.

Changing Symbol Layers

The arrangement of the objects in a symbol is calculated in reference to the base object, in terms of position and layer. As shown in Adding Shapes to a Symbol, you can change the relative position of an object. Symbols are made up of objects stored in layers. The base object is the bottom layer, on which all other objects in the Symbol are stacked. Using the Symbol Editor, you can change the level of an object in the layer stack.

In the basicprogressbar symbol, the background image is currently in a layer higher than the progress bar. If you test the symbol, you will see that, as the value of the progress parameter increases, the background rectangle moves to the right. To rectify this behavior, make the background rectangle the base symbol. To do this:

  1. Right-click the Rectangle object in the Symbol Outline pane.
  2. Click Send to Back in the shortcut menu.
  3. Click OK in the Confirm New Base dialog box.
  4. Save the symbol.

The basicprogressbar symbol is now complete. Test the symbol using the procedure described in Testing your Symbol.

Creating the Stoplight Symbol

The dashboard description found in Defining the Dashboard requires a stoplight symbol to show the overall status for a region. To achieve this, you need to follow these steps:

Creating a Base Object

In this section you will be shown how to use object gradients to create the stoplight symbol background. Do the following:

  1. Open the bampalette.
  2. Create a new symbol by pressing CTRL+N.
  3. Select and delete the Text object. For more information, see Deleting an Object.
  4. Right-click the Shape object.
  5. Select Flip or Rotate>Rotate Left in the shortcut menu.
  6. Select the Paint tab in the Styling Customizer.
  7. Click the button in the Fill Paint field.
  8. Change the setting in the Color>RGB tab to 0,0,70.
  9. Select the Linear Gradient tab.
  10. Move the right handle to the middle of the gradient field, as shown in Figure 1.53.

images/diasym_lineargradient.png

Figure 1.53 The Linear Gradient Tab
  1. Click Apply. The stoplight base object is now complete.
  2. Create a category stoplights in the bampalette.
  3. Save this symbol as stoplightbasic in the stoplights category.
Using Shapes to Create a Light Template

The stoplightbasic symbol requires three lights to show the three states allowed. To do this, you create a single light object that is used as a template for the other two lights. To create a single light object, do the following:

  1. Open the stoplightbasic symbol from the bampalette.
  2. Open the Choose Shape dialog box by clicking the Add Shape button as shown in Figure 1.50.
  3. Select the circle shape.
  4. Click OK. The circle is added to the symbol.
  5. In the Transform tab, set the width and height of the circle to 20.
  6. In the Paint tab, set the Fill Paint color of the circle to black. See Changing the Fill Style for more information.
  7. Change the name of the circle object to light. See Basic Object Customization for more information.
Aligning and Grouping Multiple Objects

In the Using Shapes to Create a Light Template section, you created a single black light. You will now use this shape as the template for the other lights.

To create multiple lights, do the following:

  1. Open the stoplightbasic symbol from the bampalette.
  2. Right-click the light object.
  3. Select Copy from the shortcut menu.
  4. Press CTRL+V twice. You now have three light objects: light, light2, light3.
  5. Move the light objects so they are aligned next to the base object, as shown in Figure 1.54.

images/diasym_alignlights.png

Figure 1.54 Align Objects
  1. Select all three lights. For more information, see Selecting Objects.
  2. Right-click one of the lights.
  3. Select Align or Distribute>Align Horizontal Center in the shortcut menu.
  4. Select Align or Distribute>Distribute Vertically in the shortcut menu. The lights are now perfectly aligned and distributed.
  5. Click the Group Selection button in the toolbar.

images/diasym_groupselection.png

Figure 1.55 The Group Selection Button
  1. In the General tab of the Styling Customizer, set the attachment and anchor points to the center point as shown in Figure 1.56.

images/diasym_stoplightalign.png

Figure 1.56 Aligning Objects in the Stoplight Symbol
  1. Save the stoplightbasic symbol.

Note
Each group of objects has a base object separate from the symbol base object.

Adding Intelligence to Symbols Using Conditions

The stoplight symbol must always have one active light to display the status of the activity being monitored. This is done by setting conditions on the value of a parameter. A stoplight has three possible states:

These states are created by limiting a parameter to values relating only to the states. As the parameter changes value, conditions set on individual objects change their appearance. The next sections show how to:

Setting Allowed Values for a Parameter

To create a parameter with only specific values allowed, do the following:

  1. Open the stoplightbasic symbol from the bampalette.
  2. Create a new Integer parameter, statusvalue. For more information, see Creating a New Parameter.
  3. Select the statusvalue parameter in the Symbol Outline pane.
  4. Click the Allowed Values button in the Styling Customizer. The Value Set Editor opens.

images/diasym_allowedvaluesbutton.png

Figure 1.57 The Allowed Values Button
  1. Click Add.
  2. Type 0 in the Value field.
  3. Type Good in the Name field.
  4. Click OK.
  5. Add the values 1, Warning and 2, Problem by repeating steps 5 to 8.
  6. Click Apply.
  7. Set the Default Value for statusvalue to Good in the Styling Customizer.

You see the list of values in the Allowed Values field.

Setting Conditions on an Object

A Condition is used to transform the object or objects to which it is bound when:

or

You will use conditions to change the colors of the stoplights as the value of the statusvalue parameter changes.

To set a condition on an object, do the following:

  1. Open the stoplightbasic symbol.
  2. Right-click the light object in the Symbol Outline pane.
  3. Select New Condition from the shortcut menu. The New Condition dialog box opens.
  4. Set the condition in the For Symbols pane to read, where statusvalue, equals, Problem.
  5. Click OK. The new condition is added under the light object in the Symbol Outline pane. The Styling Customizer displays the properties for this object when the status problem condition is met.

images/diasym_newcondition.png

Figure 1.58 Properties for a Condition

Note
The settings you apply in the Styling Customizer for a condition are applied only when the condition is fulfilled.

  1. In the Paint tab, click the Ellipsis button next to the Fill paint field. The Paint Editor pops up.
  2. Set the RGB settings in the Color tab to 255, 0, 0 and press ENTER. See Changing the Fill Style for more information.
  3. Select the Radial Gradient tab.
  4. Click Apply.
  5. Repeat steps 2 to 8 for the light2 and light3 objects using the following values.

Table 1.2 Conditions
Object 
Condition name 
Condition Setting 
RGB Value 
light2 
status warning 
statusvalue equals warning 
255,153,0 
light3 
status good 
statusvalue equals Good 
71,231,71 

The stoplightbasic symbol is now complete. Run your symbol in Preview mode to test its functionality. For more information, see Testing your Symbol.

images/diasym_stoplightbasic.png

Figure 1.59 The Stoplightbasic Symbol

Tip
The green status Good light is active by default when you test the stoplightbasic symbol. This is because the default value for the statusvalue parameter is Good. To change this, select the statusvalue parameter in the Symbol Outline pane and change the state of the Default Value list in the Styling Customizer.

Creating the Region Symbol

The Region symbol displays the Key Performance Indicators for a sales region. It is made using the progress bar and stoplight symbols created in Customizing the Progress Bar and Creating the Stoplight Symbol. The next sections describe:

  1. Creating a Background Object
  2. Adding Symbols to a Symbol
  3. Adding Text to a Symbol
Creating a Background Object
  1. Open the bampalette.
  2. Click the New Symbol button in the toolbar. A new symbol is created.
  3. Click the Rectangle button in the toolbar.
  4. Drag the mouse in the drawing pane to create the rectangle.
  5. In the Transform tab of the Styling Customizer, set the rectangle Width and Height fields to 130 and 300 respectively. See Basic Object Customization for more information.
  6. In the Paint tab, set the Fill Paint style to RGB 204,255,255. See Changing the Fill Style for more information.
  7. Delete the Shape and Text objects. For more information, see Deleting an Object.
  8. Create a category, regions, in the bampalette. For more information, see Creating a New Category.
  9. Save the symbol as regionbase in the regions category of the bampalette.
Adding Symbols to a Symbol

To match the dashboard in Defining the Dashboard, the Region symbol needs three progress bars to demonstrate shipments, sales and production. You will use the technique shown in Aligning and Grouping Multiple Objects to make multiple progress bars. To do this:

  1. Open the regionbase symbol.
  2. Drag the basicprogressbar symbol from the Symbol Palettes pane onto the regionbase symbol.
  3. Right-click the basicprogressbar object in the drawing pane.
  4. Select Copy from the shortcut menu.
  5. Press CTRL+V twice. You now have three progressbar objects: basicprogressbar, basicprogressbar2, basicprogressbar3.
  6. Rename the three progressBar symbols to the following:
  7. Align, group and distribute the shipments, sales and production objects on the region background to resemble Figure 1.60. For more information, see Aligning and Grouping Multiple Objects.
  8. Drag the stoplightbasic symbol onto the Rectangle object.
  9. Rename stoplightbasic as overallstatus.
  10. Align and group the objects in the symbol.
  11. Save the symbol as regionall in the regions category of the bampalette.

images/diasym_regionsymbol.png

Figure 1.60 The Region Symbol
  1. Test the regionall symbol.
Adding Text to a Symbol

When you have multiple indicators in a symbol, use labels to show the data represented by the different symbols. To display which Key Performance Indicator is being displayed, do the following:

  1. Open the regionall symbol.
  2. Click the Text button in the toolbar.

images/diasym_textbutton.png

Figure 1.61 The Text Button
  1. Click above the shipments progress bar. A text area is created.
  2. Type shipments in the text area.
  3. Repeat steps 2 to 4 for the sales and production progress bars.
  4. Create a new String parameter called region. For more information, see Creating a New Parameter.
  5. Set the region parameter to have the following allowed values:
  6. Create an empty text area above the overallstatus object. To do this, press the space bar after creating the text area.
  7. Click the Text tab in the Styling Customizer.
  8. Right-click the Label field and select Enter an Expression in the shortcut menu.
  9. Press backspace until the list of values appears, then select @region from the list.
  10. Press ENTER.
  11. Set Alignment to Center.
  12. This text field now displays the default value of the region parameter.
  13. Align all the symbols and objects in the regionall symbol.
  14. Save and test the regionall symbol.

images/diasym_regionsymbolfinished.png

Figure 1.62 The Improved regionall Symbol

Connecting Symbol Parameters using Expressions

The regionall symbol displayed in Figure 1.62 is composed of three different symbols used to represent different forms of data; this type of symbol is referred to as a composite symbol. You can change the parameter values for symbol objects contained in the region symbol statically. That is, you change the value of the parameter in the design view. To do this:

  1. Select the symbol whose parameter value you wish to change.
  2. Open the Parameters tab in the Styling Customizer.
  3. Change the value of the parameter.

images/diasym_regionsymbolchangeparam.png

Figure 1.63 Setting a Symbol Parameter Statically

The value remains the same when you run the symbol.

For a composite symbol to be fully effective, you need to change the parameter values for internal symbols dynamically. This is done be creating parameters for the region symbol and bind them to parameters contained in internal symbols. To do this:

  1. In the region symbol, create four integer parameters:
  2. Select the shipments object.
  3. Select the Parameters tab in the Styling customizer.
  4. Right-click the progress parameter. A shortcut menu appears.
  5. Select Enter an Expression in the shortcut menu.

images/diasym_enterexpression.png

Figure 1.64 The Expression Shortcut Menu
  1. Delete the value in the progress field, the list of available parameters and expressions appears.
  2. Select the @shipments parameter. The value of the progress parameter for the shipments symbol object is now bound to the shipments parameter of the regionall symbol.

images/diasym_selectexpression.png

Figure 1.65 Select a Parameter or Expression
  1. Bind the sales parameter to the progress parameter of the sales object.
  2. Bind the production parameter to the progress parameter of the production object.
  3. Bind the status parameter to the statusvalue parameter of the overallstatus object.

You can now alter the appearance of internal symbols by changing the value of top level symbol parameters.

images/diasym_regionall.png

Figure 1.66 The Complete Region Symbol

For more information about expressions, see Expressions.

Copyright © 1987-2007 ILOG S.A. All rights reserved.   Documentation homepage.    Legal terms. PREVIOUS NEXT