Graphic view

The graphic view provides a canvas for you to cover with icons that represent the Navigator items and any event indicators. You might create, for example, a graphic view showing your company's floor plan or organization chart.

Adding a graphic view to the workspace
Graphic view toolbar
Graphic view style properties
Creating a custom background image
Creating custom iconsChanging the default graphic or style sheet

Your user ID must have Workspace Author Mode permission to use this function.

Adding a graphic view to the workspace

1. Open the workspace where you want the view.

2. If you want the view to occupy a new pane, click Split Vertically or Split Horizontally in one of the views.

3. Click Graphic View.

   The mouse pointer changes to the view icon (hand icon in Linux). If you get the wrong icon or decide not to add the view, press Escape or click somewhere in the toolbar.

4. Click inside the view where you want the graphic.

   After you click, the old view is replaced by the default graphic, overlaid with icons representing the child items of the current Navigator item.

5. If you want to change the background image or the style of the icons or their labels, edit the Graphic view style properties.

6. Click Select, then drag icons into position; use this and other tools in the Graphic view toolbar to manipulate the view.

7. If you want to add other Navigator items to the view, drag them from the Navigator view.

   You can drag items one at a time or use Ctrl+click to select multiple items, then drag them as a group. Be careful to drag and not click, which selects and opens the workspace for that Navigator item.

8. To keep the graphic view in this workspace for future work sessions, do one of the following:

• Click Save to update the workspace properties with the new view.

• Select Save Workspace As from the File menu to save this as a new workspace and leave the original workspace as it was.

If a new item appears on the Navigator after you created the graphic view, you can add it at any time by dragging its name from the Navigator view to the graphic view; if an item gets removed from the Navigator, you can remove its icon by selecting it with

Graphic view toolbar

The graphic view has these tools for adjusting the view and the icons:

Graphic view style properties

The graphic view consists of a header or footer, a background map or image, and icons. You can edit the style properties of each of these areas to control their appearance.

To edit the properties

1. Click in the graphic view title bar.

2. Click the area of the thumbnail graphic corresponding to the area you want to work with and edit it as described below for Graph (plot area), Header or Footer.

   If the preview does not refresh as you edit, click Test to see how the view will look with your style changes. If the graphic view is showing behind the window, you can click Apply to see your changes in the full graphic view.

3. When you are finished editing the graphic view properties, save them by clicking Apply if you want to keep the window open or OK to close the window.

4. To keep the changes you made to the view, click Save.

Graph

On this tab you can select the background for the graphic view and specify a stylesheet for any text displayed.

• Background

  Map to identify the background as a geo-referenced map.

  Image to specify a background image of type PNG, JPG or GIF. Click Browse to open a list of images from which to choose or select <blank background> for no background image.

  Fit to view, when selected, automatically resizes the image to fit in the view space. If you adjust the borders of the workspace or graphic view, the image shrinks or expands to fit. This option is selected and disabled when Map is selected; cleared and enabled when Image is selected. If you leave it cleared, your image will retain its original sizing no matter what the size of the view.

  Browse looks for maps on the Tivoli Enterprise Portal server computer under:

  <itm_installdir>/cnb (cw for Linux)/classes/candle/fw/resources/maps/users

  Tip:
  If you are using a map for the background and do not want it resized as you adjust the borders of the view or workspace, create a snapshot image:

  1. Create the graphic view with the desired map and adjust the view and workspace borders until the map is the size you want and no white space shows.

  2. Click Select and click and drag to select all the icons, then delete them with Delete.

  3. Click Snapshot, then click Export in the lower-right corner of the snapshot window to save the snapshot as a .PNG file.

  4. Create a custom background (see Creating a custom background image and apply the image to the view.
• Style

  The style sheet determines which icons to display for Navigator items and the format and positioning of their text labels. To change from the default, click Browse and select from a list of the available style sheets.

The icon used for the large and small icon style matches the icon of the Navigator item (such as , , , , and ).

Header

Use the Header tab to add a header to the graph, specify the text that appears in the header, and the style of the text.

• Options

  Header adds a title at the top of the view.

  Border adds an outline around the header text.

• Title

  Text is the title that is displayed at the top of the graphic view.

• Text style

  Font name is the font to use for the header.

  Size is the font size in points.

  Bold to boldface the header text.

  Italic to italicize the header text.

Footer

Use the Footer tab to add a footer to the graph, specify the text that appears in the header, and the style of the text.

• Options

  Header adds a title at the top of the view.

  Border adds an outline around the header text.

• Title

  Text is the title that is displayed at the top of the graphic view.

• Text style

  Font name is the font to use for the header.

  Size is the font size in points.

  Bold to boldface the header text.

  Italic to italicize the header text.

Creating a custom background image

You can also use your own non-georeferenced images for the graphic view background, so long as they are of type PNG, JPG or GIF.

1. Create the image you want to use as a background in a graphical editor and save as a .PNG, .JPG or .GIF file, using a one-word name (underscores are acceptable).

   Use only ASCII characters in the filename. Names that use characters outside the ASCII code range will not be displayed in the list of available files when the user browses to select one.

2. Copy the image to:

   <itm_installdir>

     cnb (Windows); cw (Linux)

      classes

       candle

        fw

         resources

          backgrounds

           user

3. After adding the graphic view to a workspace, click Properties.

4. Click the middle (plot area) of the thumbnail graphic.

5. In the Background area, click Image.

6. If you want the image to shrink or expand to fit the full view space, select Fit to view.

   If you leave this option cleared, the image will retain its original size; if it is larger than the view space, scroll bars are displayed; if it is smaller than the view space, it will be placed at the top left corner with white space fill-in.

7. Click Browse, and select the image you added in Step 1 from the list of images under background/users.

8. Click Apply if you can see the graphic view is showing behind the window and want to see how your image will look in the view space.

Creating custom icons

Tivoli Enterprise Portal uses various icons to represent the different levels and items in the Navigator. Those same icons are applied to the background image in the graphic view. You can change the size of the icons and the position of the labels by the style sheet for the view. You can also create your own icons to substitute any or all of the provided icons for graphic view. For example, you might want to use your company logo instead of the to represent the Enterprise. The basic steps have you:

A. Create icon images
B. Create a style sheet
C. Apply new style sheet

After creating the icon images, you need to copy one of the Tivoli Enterprise Portal style sheets and edit it to reference your images, then update the graphic view style properties to use the new style sheet. The new style sheet and icons must be saved on the portal server computer.

A. Create icon images

1. Create a one-word .GIF or .JPG image file for every Navigator item icon you want to change in the graphic view. Tivoli Enterprise Portal also provides a set of large and small icons you can use located in the icons\user folder (see Step 2):

   GIFs can have transparent backgrounds and can be animated.

   If the graphic is an irregular (non-linear) shape and the background color different from that of the background image, set a transparent background and save the image in GIF format.

   Create icons as close to 32 x 32 pixels (large_icon_) or 20 x 20 pixels (small_icon_) as possible. An image greater or smaller will be resized to those dimensions automatically and might look distorted. Also, the image will retain proper proportions only if it is the same height and width. For example, if your original icon is 76 x 54, resize it to fit 32 x 32 if you will be using one of the large icon style sheets.

   Use only ASCII characters in the filename. Names that use characters outside the ASCII code range will not be displayed in the list of available files when the user browses to select one.

2. Copy the icon images to:

   <itm_installdir>

     cnb (Windows); cw (Linux)

      classes

       candle

        fw

         resources

          icons

           user

B. Create a style sheet

1. Change to the Navigator view whose graphic view icons you plan to change.

   Having the Navigator open while you type the item names in the style sheet (step 4) ensures their correct spelling and letter casing.

2. Identify the Tivoli style sheet most like the one you want. It must be one of the large_icon_ or small_icon_ style sheets (not shape_ or parent_).

   The style sheet controls the color, size and position of the text labels (Navigator item names), as well as any icons you do not replace with custom icons.

3. Make a copy of the style sheet in the following directory:

   <itm_installdir>

     cnb (Windows); cw (Linux)

      classes

       candle

        fw

         resources

          styles

   giving it a one-word name that identifies it as one you customized, and place it in the child directory:

   user

4. Open your new style sheet in a text editor such as Notepad.

5. Edit the @import lines at the top of the file to insert ../ in front of the $.

   Example: @import “../$base.css”; @import “../$baseLargeIcon.ss”; @import “../$baseNodeLabelBottom.css”;

6. Copy and paste the following entry at the end of the file, one line for each Navigator item whose graphic view icon you want to change.

   node[name = “My Item Name”]{iconImage: url(../../icons/user/iconname.gif);}

7. Replace Your Item Name Here with the exact name of the Navigator item; replace iconname.gif with the exact name of the icon graphic file.

   Be careful to follow the syntax exactly. Any errors, such as missing or extra parentheses, quotes, or misspellings will give unpredictable results. The symptom might be that your style sheet change did not affect the graphic view or the view contents disappear.

8. Save the text file.

C. Apply new style sheet

1. Open the workspace with the graphic view to which you want to apply your style sheet; -OR- add a graphic view to the current workspace.

2. In the graphic view title bar click Properties.

3. Click the Graph area of the thumbnail graphic.

4. Adjust the Background settings as needed.

5. In the Style field click Browse, select the custom style sheet from the Select Name list, and click OK.

   Your style sheets are displayed as user/style at the end of the list. If you do not see your style sheet in the list, check that you saved it in the right directory and that you did not start the name with $. If you are in browser mode, make sure you added a style entry to $_index.txt and that you spelled it correctly.

   You can drag the border between Preview and Style to make the preview image larger.

6. When you are finished editing the graphic view properties , click Apply, or click OK to close the window.

7. To keep the changes you made to the view, click Save Workspace.

1. When you erase the background image name (no image selected) or use a non-map background, you usually need to save the workspace, switch to another workspace, then return to it to see the correct icon sizes. This is required whenever the image sizes do not scale as you expect.
2. After you have created a user style sheet and associated it with a graphic view, you can make further changes with a text editor and see the effect without reopening the Properties editor. To do so, save the changed file, click Reload Stylesheet to refresh the style sheet and see the new icons.
3. If you want your new style sheet to be applied automatically to all new graphic views you create, you can make it the default.

Changing the default graphic or style sheet

When you drop a new graphic view onto the workspace, the background that displays is the default image. The style of the icons overlaying the graphic is also the default. You can change the graphic and the styling through the Properties editor Style tab. If you have a graphic you would prefer as the default to the one from Tivoli, the world map, you can make it the default. The same applies if you have a style sheet you would prefer as the default.

Default map graphic

1. Rename the original default.jpg in:

   <itm_installdir>

     cnb (Windows); cw (Linux)

      classes

       candle

        fw

         resources

          backgrounds

   to default_backup.jpg.

2. Copy the graphic you want to be the default to the same directory and name it default.jpg.

Default style sheet

1. Rename the original default.css style sheet in:

   <itm_installdir>

     cnb (Windows); cw (Linux)

      classes

       candle

        fw

         resources

          styles

   to default_backup.css.
2. Copy the style sheet you want to be the default to the same location and rename it to default.css.

   All users connecting to this portal server will get this default style sheet whenever they create a new Graphic view.

An attribute you designate to further qualify a situation. You can see the value of the display item in the event workspace and in the message log and event console views.

[ Top of Page | Previous Page | Next Page | Contents | Index ]