InduSoft Web Studio users sometimes ask us about how to use the various graphics files and formats in InduSoft Web Studio screens. Here’s a short primer that you will likely find helpful.
The contents of image files can be embedded into your Indusoft Web Studio graphic screens using one of two methods, either by directly pasting the image onto your screen, or using the Linked Picture object. These images can be displayed on the Local Viewer, as well as on the Web Thin Client and Secure Viewer Thin Client screens. In v6.1, v7.0 and early versions of v7.1, only bitmap images could be pasted directly into screens, but the Linked Picture object allowed the contents of other image file types to be displayed. You can also configure background images in an Indusoft screen, but that subject is not covered here.
In the later product releases starting with v7.1 SP2, a newer graphics library was implemented in the product, along with several enhancements relative to displaying images on the graphic screens. We will first look at the original methodologies for configuring these items such that they can be displayed on the Local Viewer, Web Thin Clients, and Secure Viewer Thin Clients.
v6.1, V7.0, and early releases of v7.1
As mentioned above, prior to the changes in the graphics library and other enhancements, only bitmap images could be pasted directly into an Indusoft screen, and these images become a part of the graphic screen file itself, such that no additional steps are required to ensure that they can be displayed on the Local Viewer, the Web Thin Client or the Secure Viewer thin client. After the changes to the graphics handling, it is now possible to paste other image types, as well as bitmaps into your graphic screens, but the image is stored separately, and is no longer saved as part of the graphic screen file. This method is described in more detail later, but it is noted here that the newer methodology, like the old one, does not require any extra steps on the part of the user to ensure that these pasted images can be displayed on the Local Viewer, the Web Thin Client and the Secure Viewer Thin Client.
Linked Picture objects can be configured in your Indusoft graphic screens, and like the name implies, the objects are linked to an image file whose name and location are specified in the properties dialog for the object. Their image content can be displayed on the Local Viewer, Web Thin clients and/or Secure Viewer thin clients, if you follow some simple rules. The v6.1 and v7.0 releases of Indusoft, and earlier v7.1 releases use a method described below.
For Web Thin Clients, even though the screen is cached on the thin client machine after it has been opened there once, the linked images are not part of the screen and since they are not stored locally, each time you open these screens, the thin client has to request the images from the web server again. This takes some time, particularly if there are more than one. Additionally, if you specify a path and file name in the Link File field on the object’s properties dialog, the web thin client can only retrieve it if that location and file exists downstream of the location to which the web server is pointed. You can resolve this by having the image file located in the project’s \web subfolder and use only the file name in the Link File field, because this is the only place that the web thin client asks the web server to look for the image file by default, if no path is specified. You must also have a copy of the image file in the root of the project folder, because this is the only place the Local Viewer will look for the file if the path is not specified.
The Secure Viewer thin client poses a different problem. If you specify a path and file name in the Link File field entry, the secure viewer thin client will look for the file in that exact path on the thin client machine itself, which is not likely to exist, but if you specify only the image file name with no path, the secure viewer thin client will ask the web server to look for the file in the root of the project folder by default. Remember that in order to connect using both types of thin clients, you must have your web server pointed to the root of the project folder so that the secure viewer can retrieve the app file specified in the URL on ViewerCfg.exe. Because of that requirement, you must include the \Web folder name in the URL on Internet Explorer for a web thin client connection to the same application.
Example: http:// <IP address>/Web/StartupFileName.html
This works out well, as the overall solution for viewing the Linked Picture object on either type of thin client and in the Local Viewer is simply to use only the file name in the Link File field, and to put copies of the image files in both the root of the project folder, and in the \Web subfolder.
This configuration also allows you to see the image on the development screen (without using the Test Screen functionality), and it has the additional advantage of making this project completely portable, so that I can locate it anywhere on any machine with Indusoft installed, point a web server to the root of the project folder, and the Local Viewer, as well as any thin clients that connect to the application, will be able to display the linked pictures.
v7.1 Service Pack 2 Patch 0
In later releases of v7.1, a newer graphics library was implemented in the product, along with several enhancements relative to displaying images on the graphic screens. One of the more important changes was to treat all embedded graphics as Linked Pictures, whether they are pasted directly into the screen from the clipboard, or specified in the Link File field of a Linked Picture object. The method utilizes a folder named Resources that is located in the Project’s \Web folder for storing the embedded images. You will be able to tell if this functionality is available in your version if the Project->Viewer dialog includes a check box labeled “Save Pictures in Separate Files”, which appeared for the first time in the v7.1 SP2 P0 release.
The Resources folder is created automatically the first time the user copies a graphic image to the clipboard and pastes it into a screen. An image file is created and stored in the Resources folder. If you now double click on the image, a Linked Picture object properties box will be displayed, with a derived file name entry similar to ‘Resources\9588f4a38bfd0bac4321bcaf20c35e08.bmp.’
If you exclusively use Linked Picture objects, and do not paste images directly into the screen, you will first need to manually create the \Web\Resources folder, and copy the image files you will be using into this folder. You can then select the Linked Picture object from the ribbon menu, open its object properties, and use the Browse button on the dialog to navigate to the file in the Resources folder that you wish to select. The Link File field in the object’s properties dialog will then be populated with an entry similar to ‘Resources\<MyImageFileName>’. If you use both directly pasted graphic images and Linked Pictures, the \Web\Resources folder will contain derived image file names and original image file names.
NOTE: Given that the product will automatically create the resources folder when you paste graphic images directly into the screen, it is convenient to store your Linked Picture files there as well, but technically speaking, you can now store your Linked Picture files into any subfolder of the project’s \web folder, specify the path as \<SubfolderName>\<ImageFileName>, and the Local Viewer, Web Thin Client and Secure Viewer Thin Client will all be able to display the image.
This method is more convenient for the user than the previous method, as the Local Viewer, the Web Thin Client and the Secure Viewer Thin Client will now all search the same specified location for a given image. The MA (Mobile Access) thin client, which supports both pasted and linked images as well, will also behave accordingly.