Introduction
We all know that ERS can create customized dashboards that automatically refresh at timed intervals (30 sec, 1 minute, 1 hour, etc). Most of us also know you can export the dashboards as image files as they refresh. Did you know you can easily create a slideshow that can be placed on any overhead monitor on the shop floor?
This article shows you how to create a simple web page that automatically flips between multiple dashboard images, creating a slideshow effect. You can generate the images using ERS and view them using a common internet browser such as Internet Explorer or Firefox.
Steps
- 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 web server in your shop. Ask your IT department where to place the image files so they can be accessed via http://[web server]/[folder]/[file name].jpg. They will give you a valid path that is typically in UNC format (\\servername\directory\) and you should set your dashboards to output to that location.
NOTE: If you do NOT have a web server, you can still create a slide show. Just follow the directions from the related article to the right.
NOTE: Although the images can technically be placed anywhere, there are issues with using local paths that are not on web servers (such as c:\) since the browser will most likely be using a different c:\ than ERS.
- 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 on a web server. This one is not as critical.
- Rename the ers_dashboard_slideshow.txt to ers_dashboard_slideshow.htm. Notice the .htm extension. This is critical so the browser can render the HTML inside the file.
- 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 slide show 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 bel//OPTIONAL: Set the number of seconds between images. The default is 5 seconds for each image.var intHighestDashboardNum = 1;var intNumberOfSeconds = 5;//-------------------------------------------
- As you scroll down, you will see the second block of code you will need to modify. For each image you want to show in your slide show, create a case below 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 just change the values. The first two images are already present as an example, so just 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: Make sure you 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, make sure you set it to 2 and so on.
- Save the HTML file.
- In your browser, navigate to the file. If the file is on a web server, use the normal http:// address. If it is local, the easiest way to navigate to it is to choose Open File from the main menu in either Internet Explorer or Firefox.
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.