Index | Prev | Next

Creating a new graphic view using the web UI

This procedure describes how to use the web UI to create a graphic view that displays current room (access zone) occupancy and temperature information.
Prerequisites: You are working in the web UI. You have an appropriate graphic image to represent the building.
You can create graphics in many ways, depending on your resources, your skill level and what you are starting with. For example, if you already have a graphic page for building controls, you may add access information to an existing page. In other cases, you may create a new page from the start. One general process for creating a new graphic is outlined below with detailed steps following.
Perform the following steps:
  1. Navigate to Controller (System) Setup > Miscellaneous > Graphics > Graphics Management..
  2. Click the Add button (Image).
    The Add graphic window opens.
    Image

    TargetMedia defaults to WorkbenchPxMedia. These provide the richest visual experience, but may not be appropriate depending on the device (phone, tablet, computer).

    HxPxMedia are designed for the web UI. Three of the widgets run in a browser using HTML5: LiveVideoPlayer, Control Panel and CameraWidget. The remaining widgets: PanTiltJoystick, ZoomSlider, MouseDownButton and VideoMultistreamPane require Web Launcher and run outside of the browser.

  3. Give the graphic a name, select HxPxMedia for TargetMedia, and click Ok.
    The system creates the graphic file in the station and displays the Graphics Management view with the new graphic page listed.
    Image
  4. Select the graphic you just created and click the Graphic Editor button (Image).
    The browser may prompt you to continue even though the certificate presented by the station cannot be validated.
  5. Click Continue.
    A blank Graphic Editor view opens.
    Image

    The side bars configure:

    • A bound Object Resolution Descriptor (ORD ) connects the widget to a specific device slot (object).
    • Properties populate based on the widget type.
  6. Add a background using an image that you have prepared previously — such as a floor plan.
    1. Double-click in the middle of the CanvasPane to open the CanvasPane properties window.
    2. In the CanvasPane properties window, use the background property field to select Image from the drop down option list and browse through the Image Brush Editor (use the File Ord Chooser) and File Chooser windows to select the desired image file, as shown below.
      Image
    3. Click the Open button and then click OK to close all the windows and complete the insertion of the image on the graphic view.
    The background image displays on the page.
  7. Add a widget.

    If you selected HxPxMedia for Target Media and you attempt to drop a widget from the palette that requires the Web Launcher, the system displays, “Are you sure you want to create this widget?” Media Validation for “HxPx Media” found these problems:” A widget ORD follows.

  8. If you got the error message, click Yes.
    The software creates the widget, but it works only in Workbench.

Refer to the Niagara Graphics Guide for more information about how to create and manipulate the graphics widgets.

Related Links

  • Graphics configuration (Parent Topic)

    • Index | Prev | Next