Introduction

This article shows you how to set up a simple web page that automatically flips between multiple dashboard images, creating a slideshow effect without needing a web server. This allows you to use ERS to generate the images and a standard internet browser such as Internet Explorer or Firefox to view them. The steps are almost identical to the ones in the related slide show article. The difference is the format of the paths to the images. In the other article (using a web server), the paths all start with "http://". In our example below, we'll use the "file://" prefix to specify literal paths.

NOTE: If you are using Internet Explorer, it is a little buggy and may not show your pictures correctly. It is not known why this is the case, so we recommend using either Firefox and Chrome as they both follow the internet standard correctly and consistently.

Steps

1. Create multiple dashboards in ERS. Set each of them to output to a filename that you can remember. This file should be placed on an existing server in your shop. You can usually use a shared drive or even save them to the local PC. You can ask your IT department for assistance if you don't know where to place them. They will give you a valid path, typically in UNC format (\\servername\directory\), and you should set your dashboards to output to that location.
   
   NOTE: Although the images can technically be placed anywhere, there are issues with using local paths (such as c:\) since the browser will most likely be on a different PC with a different c:\ than ERS. You should store the images on a server so they are centralized and can be accessed by multiple PCs.
   
2. Download the attached HTML (ers_dashboard_slideshow.txt) file and place it anywhere. It can be on the local PC where you will display the dashboard or your server.
   
3. Rename the ers_dashboard_slideshow.txt to ers_dashboard_slideshow.htm. Notice the .htm extension. This is important so the browser knows how to render the file's HTML.
   
4. Open the file in Notepad. Toward the top of the file are two values you need to set. The first is the highest number of slideshow options. This is always 1 less than the total number of pictures. Therefore, if you have 5 pictures, set this value to 4.

//-------------------------------------------//IMPORTANT: Set this to the highest number you have in the switch statement below.//OPTIONAL: Set the number of seconds between images. The default is 5 seconds for each image.var intHighestDashboardNum = 1;var intNumberOfSeconds = 5;//-------------------------------------------

5. As you scroll down, you will see the second block of code you need to modify. Create a case below for each image you want to show in your slideshow, starting with case 0. Each case should have three lines associated with it: the case number, the path to the image, and the break; statement. It may be helpful to copy/paste them and change the values. The first two images are already present as an example, so simply replace their paths with your own.
   
   If you want to have 3 images, copy/paste the three lines from case 1 just below it (above the curly bracket "}"), change the number so it says "case 2:", and change the path.
   

switch (intNum)    {      case 0:            strPath = 'http://www.prolinksoftware.com/images/dashboard1.png';            break;       case 1:            strPath = 'http://www.prolinksoftware.com/images/dashboard2.png';            break;    }

NOTE: Set the "HighestDashboardNum" in step 3 to the highest number in your case statements. In the example above, it is set to one since the highest case is 1. If you add a case 2, set it to 2 and so on.

Format is very important for the path. The example above uses http:// as a prefix. Because this article deals with images NOT stored on a web server, we need to use a different type of prefix to access the file directly. Here are three examples for three different scenarios:

1. If the path is local (on your c:\ drive) or you are using a mapped drive letter (such as your x:\ drive), use the following format. Notice there are 3 forward slashes after file. It seems odd, but it will work.
   
   case 0:
strPath = 'file:///c:/folder/folder/dashboard1.png';
break;
2. If the path is a UNC path (i.e. \\server\share\folder\), use the following format. Notice there are 5 forward slashes after file. This seems even more odd, but again, it's the internet standard.
   
   case 0:
strPath = 'file://///myserver/folder/folder/dashboard1.png';
break;
3. If the picture is in the same folder as the htm file, use the following format.
   
   case 0:
strPath = 'file:dashboard1.png';
break;

6. Save the HTML file.
   

7. Navigate to the file in your browser. If it is local, the easiest way to do so is to choose Open File from the main menu in either Internet Explorer or Firefox. You can also drag the icon for it and drop it in the middle of the browser, which will open the file.

An Easy Option

You may want to place the HTML file and pictures in the same directory on your server to simplify things. For instance, let's say you have 3 dashboards to display and a server called (\\myserver\myfolder\slideshow\) which is mapped to your z:\ drive. All you have to do is set up ERS to save the images to the z:\ drive which will put them all in the same folder. Then copy the HTML file above into the same directory. When you edit the paths, use the 3rd option above (strPath = 'file:dashboard1.png';) for each of the files. To launch the slideshow on any PC simply navigate to the z:\ drive and double click the ers_dashboard_slideshow.htm file. Voila! Slideshow!

More Information

Once your slideshow is running in the browser, pressing the F11 key will set it to full screen and will remove the menu and address bar of the browser itself. This works in both Internet Explorer and Firefox.