Use a Linked Picture screen object to link to an external image file, so that you can easily reuse the image in your project and/or change the image during run time.

1. On the Graphics tab of the ribbon, in the Libraries group, click Linked Picture. A standard Open dialog box is displayed.
2. Use the dialog box to locate and select the image file, and then click OK.
   The following image file types are supported in projects running on Windows target systems:

   • Windows Bitmap (*.BMP)
   • AutoCAD DXF (*.DXF), versions 10 and 11 only
   • JPEG (*.JPG, *.JPEG)
   • PNG (*.PNG)
   • TIFF (*.TIF, *.TIFF)
   • Windows Metafile (*.WMF, *.EMF)
   The following image file types are supported in projects running on Windows Embedded target systems:

   • Exchangeable image file (*.Exif), commonly used in digital cameras
   • GIF (*.GIF)
   • JPEG (*.JPG)
   • PNG (*.PNG)
   • TIFF (*.TIFF)
   • Windows Bitmap (*.BMP)
   Note: InduSoft Web Studio v7.1+SP3 uses a new drawing system to display images on Windows Embedded devices. This new system requires that your device is running a recent version of Windows Embedded and that all of the supported image file types are included in the device’s run-time image. If an image is not displayed correctly on your device, there are two possible solutions.

   First, you may disable the new drawing system and use the legacy drawing system instead. If you do this, however, only JPG, PNG, and BMP images will be supported in your project. To use the legacy system, open your project file (projectname.APP) in a text editor and then edit the following property:

     [Objects]  DrawingSystemID=<0 for new system, 1 for legacy system>  

   Second, you might need to update the run-time image on your Windows Embedded device in order to include all of the supported image file types. (The run-time image is typically set by the device manufacturer.) That is beyond the scope of this documentation, however; please refer to the technical note Image Requirements for IWS v7.1 Runtime on Embedded Systems, which is available on the InduSoft Web Studio installation DVD and the InduSoft website (www.indusoft.com).

   The image is added to the worksheet as a Linked Picture screen object.

3. Double-click the screen object. The Object Properties: Linked Picture dialog box is displayed.
   Figure 1. Object Properties: Linked Picture
   

   

4. In the Link File box, examine the link. If the image file is located in the Web folder, the link is a relative file path. If the image file is located elsewhere, the link is an absolute file path.

   You can specify folders within the Web folder. For example, if you type MyPicturesPicture1.BMP, the program will look for the image file at projectnameWebMyPicturesPicture1.BMP.

   Tip: The file extension is not always required for the link to work. In projects running on Windows target systems, if no file extension is specified, the extension PNG is used by default. To change this, open your project file (projectname.APP) in a text editor and then edit the following property:

     [Viewer]  DefaultLinkedPictureExtension=<image file extension>  

   In projects running on Windows Embedded target systems, if no file extension is specified, the extension BMP is used by default. This cannot be changed.

5. If you want to change the link — and therefore change the picture — during run time, replace the file path with a project tag:
   1. In the Link File box, select the file path, and then copy it to the clipboard.
   2. Replace the file path in the Link File box with the name of a String tag in curly brackets (e.g., {MyLinkedPicture}).
   3. If the tag does not exist, you will be prompted to create it. Make sure that you create it as a String tag.
   4. Set the tag’s startup value to be the file path that you copied to the clipboard, either by pasting the file path into the tag’s Startup property (in the Project Tags Datasheet View) or by configuring the Startup Script to set the tag value when the project is run.

   With a properly configured project tag, the link will be refreshed whenever the tag value changes during run time. Keep in mind that the tag value must have the same format as a normal link: a relative file path for a file located in the Web folder, or an absolute file path for a file stored elsewhere on the network or target system.

6. If you want some part of the picture to be transparent to the screen background, select a transparent color:
   1. In the Transparent Color group, select either Color Code or Tracker in the list.
   2. If you selected Color Code, type a tag/expression that will provide the 24-bit color code of the desired transparent color. For more information about Windows color codes, see Color Interface and WdColor Enumeration.
   3. If you selected Tracker, click and drag the tracker on the screen object until it is positioned over a sample of the desired transparent color. The tracker is an additional handle on the screen object that initially appears just inside the bottom-right corner of the object. Moving the tracker on the object does not move or resize the object itself.
   Note: Transparent color is not supported for Windows Metafiles (*.WMF, *.EMF)
7. Close the Object Properties dialog box.