Alarm Viewer work in conjuction with alarm configuration at server and alarm require database to be running so that the alarm can be logged and fetched. Alarm Viewer HTML page is readily portable and can be plugged into any project without any modification. Engineer could simply link Alarm Viewer 'alarm.htm' to anywhere in the project, or just use the default layout provided in the project template. Below shows a pretty self-descriptive buttons' functions and available features. The color legend is also very intuitive, red/pink showing Active alarm, yellow/wheat showing Active and acknolwedged alarm, and lastly green/lime showing Non-active but unacknowledged alarm.

Alarm Viewer is customizable by changing the configuration in alarm.htm or index.html .

        var opt = {
            "mode": "alarm",
            "row-per-page": 30,
            "audio": "media/ding.wav",
            "column": {
                "time_stamp": true,
                "tag_name": false,
                "group_name": true,
                "description": false,
                "message": true,
                "nvalue": true,
                "old_nvalue": true,
                "inactive_timestamp": true,
                "ack_timestamp": true,
                "ack_user": false
            }
        };
    

In the above configuration, alarm viewer can be configured into 3 modes, i.e, "alarm", "footer", and "audit". Alarm mode is mainly used in Alarm Viewer, alarm.htm with full basic features like acknowledge and date selection functions. Footer mode is mainly used in main page index.html, except it has no control panel (date selection, real time/history mode). Audit mode will be described in Audit section later.

"row-per-page" option stands for the number of item/row the alarm viewer shall display, which normally set to very minimal like 2 to 5 when being used as footer in index.html. The column headers can be customized by specifying true/false . Total number of alarm to display per page is also configurable.

To override the system default color, paste the following into <header> section and customize the color accordingly.

<style type="text/css">

.alarm-table .active {
    background-color: blue;
}
.alarm-table .inactive {
    background-color: pink;
}
.alarm-table .active-ack {
    background-color: brown;
}
.alarm-table .inactive-ack {
    background-color: purple;
}
</style>