HOW TO: Create advanced custom HTML reports

How to create advanced custom HTML reports

The eWON offers a very powerful way to create and send custom reports to users representing their eWON tag data. This flexibility however is not limited to the built-in reports. Users have the ability to create very custom and intricate reports based on their own development.

Why would we need to do this?

  • Create highly customized reports
  • Create visually appealing reports to offer as a service

Requirements:

  • eWON Flexy or CD series unit
  • eWON Programming guide
  • HTML/JS Knowledge - This reporting mechanism does rely on web development principles. A solid foundation in development is required.

Resources Used

Implementation:

As noted above, implementing a feature such as this does require some additional knowledge that is not eWON specific. Adequate knowledge in general web development is required to accomplish something like this.

Tag setup

In order to design and create a highly functional report, we need to first ensure that our tags are configured to return the expected data. For this example we will have the following tags:
    • Tank Level
    • 1 second historical logging
    • Alarm at 80 but automatically acknowledge the value.
    • Valve
    • No alarming or logging
    • Processed
    • No logging. No alarming.

Report setup

The report we are going to be using will be a .HTML report. This report type will offer the most flexibility in terms of UI updating and customization. This HOW TO will not go into how to develop web pages but will more so provide a general template and explain the eWON specific tools that went into building this page.

  • ExeSSI - ExeSSI’s allow us to complete specific actions on the EWON. In this example, we are using an ExeSSI to print the time of execution from the eWON using BASIC.

  • TagSSI - TagSSI’s allows us to render tag values in real-time. In this example, the most recent tag values are displayed using a TAG SSI in the top level table .

  • ParamSSI - ParamSSI’s allow us to process specific requests on the eWON such as historical records. In this example, the requests are retrieving alarm and historical records.

  • File Type - While we will be exporting the file as a .HTML file, we will actually be giving this file a .SHTM extension to begin with. The .SHTM advises the eWON that there are values that we need to pre-process on the webpage before rendering. If we fail to give the file a .shtm extension initially, we will end up with a page that actually shows <#%TagSSI, TagName%> instead of our value. Now once we actually do the export, we will be giving the file a different extension.

The big thing with our code is we need to ensure we are using the appropriate tool at the approriate time. If you find yourself confused on when to use which parameter, please see the Web Reference Guide.

To show the live values we will using something like:

<p>Current Tag Value is: <%#TagSSI, YourTagName%></p>

This will actually turn into:

Current Tag Value is: 90

As mentioned, this will not go over the actual HTML development aspect however there is a template included, please feel free to download the file and inspect it!

Custom report template (10.8 KB)

BASIC Script Setup

Now once we have our HTML page setup, we need to actually setup the exportation to make it automatic and to rename the file. For this we will use something called an Export Block Descriptor. Export block descriptors are strings composed of several parameters that defines which data have to be exported from an eWON.

To be more specific, we will be using an EBD to export the historical data and the alarm data. Don’t get too overwhelmed with learning the EBD syntax. Luckily we have built a custom generator that will help you build your EBD.

The EBD’s we will be using will be:

  • [$dtHL$ftT$st_h8$et_s0$tnTankLevel]
    $dtHL: Data Type - Historical log
    $ftT: File Type - Text
    $st_h8: Start Time - 8 hours ago
    $et_s0: End Time - 0 seconds ago (right now)
    $tnTankLevel: Tag Name - Tank Level

  • [$dtAH$ftT$st_h8$et_s0]
    $dtAH: Data Type - Alarm history
    $ftT: File Type - Text
    $st_h8: Start Time - 8 hours ago
    $et_s0: End Time - 0 seconds ago (right now)

Note: In the below EBD, the & symbol denotes that the file should be attached and not in the body.

  • &[$dtUF$uf/usr/index.shtm$fnindex.html]
    $dtUF: Data Type - User File
    $uf/…: User File - Path to our file (index.shtm)
    $fnindex.html: File Name - index.html (renaming to .html instead of .shtm).

Now that we have our webpage and EBD’s set up we can write a script to automate the sending.

This section will send an email at 7 AM, 3 PM and 11 PM every day.

INIT Section:
ONDATE 1, "0 7,3,11 * * *","GOTO SendReport"

SendReport Section:
e$ = "To Email"
c$ = "CC Email"
s$ = "Subject"
n$ = "New File Name" (ensure is .html) 
REM - Now to send the file
SENDMAIL e$, c$, s$, "&[$dtUF$uf/usr/index.shtm$fn" + n$ + "]"

End Results

After all of that hard work, lets see our end result:




Resources

Template: Download

Web Reference Guide: https://websupport.ewon.biz/sites/default/files/rg-003-0-en-web_reference_guide.pdf

BASIC Scripting Guide: https://developer.websupport.ewon.biz/system/files_force/RG-006-0-EN-(Programming%20Reference%20Guide).pdf?download=1

Export Block Descriptors: https://developer.websupport.ewon.biz/content/export-block-descriptor

Export Block Descriptor Builder: https://ewonsupport.biz/ebd/

3 Likes

This looks great. Going to to try to use some of this for a project we are working on.

A note though, your webm video won’t download. Permissions in your s3 bucket aren’t correct for us to download.

@travstoll

Ah good catch. There was an issue with the videos being tombstoned. I have fixed the link and the video is now visible again. Thanks for bringing it to my attention.

1 Like