How to Create Custom Webpages for Your Meter


In this video, you will learn: what you need in order to create a custom webpage, how to edit the sample HTML file to include the parameters you want, and how to load your custom webpage to your meter and validate that it’s working. To create a custom webpage, you need a basic knowledge of HTML, a text or HTML editor (this walkthrough uses Notepad++), access to the meter’s FTP site to download the sample webpages and upload the completed webpages, and the meter’s Modbus map and an understanding of Modbus protocol. First download the meter’s Modbus map from SchneiderElectric.com. On the Schneider Electric website, search for your meter name (in this example PM8000) plus Modbus map. Click the link then click Download to save the map. Note that the Modbus register list may not apply if you’ve customized your meter’s Modbus map. Go to the 3rd Party Protocol screen in ION Setup to check if you have the default Modbus map. Next copy the sample webpage files from your meter’s FTP site. Note that FTP access to the meter needs to be enabled. Access the FTP site for your meter and log in with a user account that has FTP access. Open the web folder then the examples folder. Select the two sample HTML files then copy them. Navigate to the folder where you want to store your working copy of the custom webpage and paste them. This example walks you through creating a webpage that displays conditional energy accumulations with data displayed across the row and input metering values with data displayed down columns and across rows. Use the Modbus register list you downloaded to find the webpage tags for the values you want to display. Search for input metering to find the tags for input metering accumulation on channels 1 to 4. Make note of the webpage tags, in this case IM1one consumption to IM4 consumption. Repeat the process for the input metering rate per channel and the conditional energy values. Next rename the sample webpage. Rename SampleMonitorPage.html to the name for your webpage. In this example, rename it InputMeteringCondEnergy.html. This name (minus .html) appears as the title in the meter’s webpage menu. Next let’s create the first section of our custom webpage. Open the sample html file in a text or HTML editor. Here’s the html markup we need to create to display the conditional energy accumulation section in the example webpage. It includes the first h3 element and the first div element. In this section data is displayed in one row across multiple columns. Edit the h3 target and div ID attributes to reflect the parameters you want to display in the section. Make sure the two values are the same (in this example, cond-energy). Change “Basic Readings” to the heading you want to display on the webpage (in this example, conditional energy accumulations). Leave the non-breaking space in the first th element. This leaves the heading of the first column empty so we can use it as a heading row. Change the text between the brackets in the th elements to the column headings you want to display on the webpage (in this example, delivered, received, and del – rec). If you need additional columns simply copy and paste an existing heading then modify it. This example doesn’t need any additional columns so I’ll delete it. Change the text in brackets in the first td element to the heading for that row of data (in this example, Accumulation). Delete the value in the unitsreg attribute – it’s not needed. Change the value of the regname attribute in the second td element to match the webpage tag for the first conditional energy parameter (in this example, Cnd kWh del). Repeat this for the remaining two td elements, changing the regname attribute to match the webpage tag for the parameters conditional kilowatt hours received and conditional kilowatt hours delivered-received. Because this example only has one row of data, delete the last tr element. Let’s create the second section of the example webpage. The second section displays input metering accumulations and rates for: two gas meters in meters cubed and meters cubed per hour and two water meters in gallons and gallons per hour. Edit the h3 target and div ID attributes to reflect the parameters you want to display in the section. Make sure the two values are the same (in this example, input-metering). Change the h3 heading text to reflect the parameters you want to display in that section (in this example, change “Basic Readings” to “Input metering accumulations”). Leave the non-breaking space in the first th element to allow a column for row headings. Replace the text in the brackets of the second th element with a heading for the first column of gas meter data (in this example, Cubic meters). Copy and paste the th element to add another column heading then change the heading text to Cubic meters/hour. In the first tr element, change the heading in brackets to Gas meter 1. Delete the unitsreg attribute value. Change the value of the regname attribute in the second td element to IM1 consumption to match the webpage tag from the Modbus register list. Finally copy/paste the last td element and change the value of the regname attribute to IM1 Rate. In the second tr element, change the row heading to Gas meter 2, delete the unitsreg attribute value, change the td regname attribute to IM2 consumption and copy/paste the td element and change the regname attribute to IM2 Rate. To create the second part of the table, copy-paste the existing three tr elements. Change the value of the th headings to Gallons and Gallons/hour. Edit the tr elements: change the first heading to Water meter 1 and the regname attributes to IM3 consumption and IM3 Rate respectively. Change the second heading to Water meter 2 and the regname attributes to IM4 Consumption and IM4 rate. The example custom data viewing webpage html file is complete. I can now save it and load it to my meter’s FTP site. Next let’s load the custom webpage to your meter’s FTP site. Open the meter’s FTP site using a username and password with FTP access. Open the web folder then open the monitoring folder. Copy the HTML file you created and paste it into this folder. The final step in creating a custom webpage is to make sure the webpage is appearing as you expected. Now you’re ready to create a webpage to view your own set of meter data using the webpage tags from the meter’s Modbus map and editing the sample webpage using a basic HTML editor.

Leave a Reply

Your email address will not be published. Required fields are marked *