Dynamic Images

The Dynamic Images tab of the Resource Manager dialog provides a convenient way to import and preview all dynamic image files to be used in your project. Dynamic Images are images that exist on an HTTP server, external to the panel. This feature requires you to specify a URL in place of image file.

Dynamic images can be refreshed at specified regular intervals or via the Panel > Refresh Dynamic Images option.

FIG. 28 Resource Manager dialog - Dynamic Images tab

    • To use dynamic images in your project, specify a URL rather than a directory path to a static image file.
    • Dynamic images can be applied to Pages, Popup Pages, Sub-Pages and all Button types except Text Input buttons.
    • The Dynamic Images tab of the Resource Manager dialog provides a convenient way to import and preview all dynamic image files to be used in your project.
    • Dynamic images can be refreshed at specified regular intervals or via the Panel > Refresh Dynamic Images option.
    • Use the Scale Bitmap To Fit state property (Properties window - States tab) to automatically scale (down only) the dynamic image to fit the button on which it will be displayed.

Adding Dynamic Images to the Project

The following example steps you through the process of adding a Dynamic Image to the Resource Manager.

NOTE: This example starts with selecting a dynamic image on the Internet, which may not be necessary if you have a specif ic URL to use:

  1. In your browser, locate the Dynamic Image that you want to use.
  2. Copy the Dynamic Image's URL to the clipboard. In this example the image URL is: http://kamera.harpefossen.no/mjpg/video.mjpg

The specific method will depend on your browser. For example Google Chrome provides the option to right-click on the image and select Copy Image URL, while IE provides the option to right-click on the image and select Properties to view the image properties including the URL in the Properties dialog (FIG. 29):

FIG. 29 Example - Dynamic Image (Copy image URL / Properties)

  1. In the Dynamic Images tab of the Resource Manager, click New to open the Create Dynamic Image dialog (FIG. 30):

FIG. 30 Create Dynamic Image dialog

  1. In the Name field, enter a descriptive name for this Dynamic Image (in this example - "Harpefossen Ski Center").
  2. Paste the copied URL into the Host field. Note that the pasted URL consists of not only the Host address information, but also protocol and path information as well, so it necessary to separate it into the different elements represented in the Create Dynamic Image dialog.

Here is the full string provided by the image source for this image (FIG. 31):

FIG. 31 Example Dynamic Image URL (full path)

    1. Enter a name for the dynamic image in the
    2. Cut and paste the host portion of the URL into the Host field (delete "HTTP://" from the pasted string).
    3. Copy and paste the path portion of the URL into the Path field (excluding the backslash). Note that not all dynamic image URLs require or use a path.
    4. Copy and paste the file portion of the URL into the File field (excluding the backslash).
    5. The User and Password fields are left blank, since no credentials are required by the host to access the webcam in this example.
    6. The Refresh Rate should be left to zero (default setting), to allow the image to update automatically based on the source's refresh rate. When the Refresh Rate is set to zero, the Refresh Only at Panel Startup option is available. This option directs the panel to refresh this image only when the panel is rebooted.

At this point, the Host field should include the host information only, and the other fields should be filled in respectively (FIG. 32):

FIG. 32 Create Dynamic Image dialog with example data

  1. Click OK to close the Create Dynamic Image dialog and add the new image to the Dynamic Images tab (FIG. 33):

Dynamic Image Icon Live File image Icon

Dynamic Image Preview Window

FIG. 33 Resource Manager (Dynamic Images tab) - Example Dynamic Image (icons and preview window)

  • Click Get Live File to update the dynamic image icon with a preview image (if List Style is set to Thumbnail).
  • Double-click on the dynamic image icon to show the cam feed in a preview window

Now that the dynamic resource has been added to the Resource Manager, it is available to be applied to TPD5 elements (as a Bitmap). See

Assigning Dynamic Images to TPD5 Elements on page 41

for details.

Editing Dynamic Images

  1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog.
  2. Open the Dynamic Images tab.
  3. Click the Edit button to open the Edit Dynamic Image dialog (FIG. 36):

FIG. 34 Edit Dynamic Image dialog with example data

  1. Edit the image information as desired.
  2. Click OK to save changes and close the dialog.

Deleting Dynamic Image Files From the Project

  1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog.
  2. Open the Dynamic Images tab.
  3. Select one or more files to delete (Ctrl + click to select multiple files individually, or Shift + click to select a range of files).
  4. Click the Delete button.

NOTE: Deleting a Dynamic Image from the Project cannot be undone.

Assigning Dynamic Images to TPD5 Elements

The following example illustrates assigning a Dynamic Image to a TPD5 Element (

  1. Select a Page, Popup Page, Sub-Page or Button (all types except Text Input).
  2. In the Properties window (States tab) - Bitmaps property, click the Browse (...) button to open the Bitmaps dialog.
  3. Click Add to access the Select Resource dialog, and open the Dynamic Images tab (FIG. 35):

FIG. 35 Select Resource dialog (Dynamic Images tab) indicating four dynamic images in the project

  1. Select a dynamic image and click OK to close the Select Resource dialog and return to the Bitmaps dialog, where you can adjust the Bitmap Justification as desired, and add other bitmaps to the selected UI element if desired (FIG. 36):

FIG. 36 Bitmaps dialog indicating a dynamic image to be applied to the selected UI element

  1. Click OK to close the Bitmaps dialog - the dynamic image will be represented in the selected UI element. As an example, FIG. 37 shows a button with a dynamic image applied:

FIG. 37 Example button with a Dynamic Image applied

Dynamic Image Settings - Camera Examples

Like with any other type of equipment AMX controls, manufacturer's documentation and customer support are the most reliable ways of obtaining information on the device's communication protocol/syntax. This can also help you fully utilize optional features available on that specific device. However, at times it can be difficult to get the needed information with respect to the protocol/ syntax of a particular camera/server.

One way to work around this is connecting to your networked camera or video server using an Internet browser that captures the location or path to the stream. An example of such browser is Mozilla FireFox. Using the browser you can go to your network device's IP address, left click on the streaming image and select Copy Image Location.

Dynamic Image Settings - Example 1: Axis

    • Manufacturer: Axis
    • Model: 2100 (camera)
    • Path: axis-cgi/mjpg/video.cgi?camera=&resolution=320x240

Axis equipment supports a number of resolutions, and therefore requires that the target resolution be indicated. Each camera can also have a camera ID number but that is optional, just as a number of other features that can be indicated in the path.

Dynamic Image Settings - Example 2: Panasonic

    • Manufacturer: Panasonic
    • Model: BL-C10A (camera)
    • Path: nphMotionJpeg?resolution=320x240&Quality=Standard

Dynamic Image Settings - Example 3: Vivotek

    • Manufacturer: Vivotek
    • Model: 2111 (camera)
    • Path: cgi-bin/ video.jpg?cam=1&quality=3&size=2

Working With Trendnet IP Cameras

To get a streaming image from the TV-IP301 Trendnet IP camera on to a dynamic image window of a touch panel:

  1. Configure the camera for JPEG and 15fps. The default settings of "640x480" and "Highest Quality" should be OK.
  2. In TPD5, set the dynamic image properties to:
    • Protocol: HTTP (default)
    • Host: (the default IP of this camera is 192.168.1.30)
    • Path: goform
    • File: video2
    • user & password are blank
    • Refresh Rate: 1 (or more)

results matching ""

    No results matching ""