Script tag

Library can be loaded in a script tag or with AMD

You will need to include the scadaAlert.css and scadaAlert.js files in your page

Code

<link href="css/scadaAlert.css" rel="stylesheet">

<script src="js/scadaAlert.js">

Require.js

Add correct path to your config file, then call require function

Code

paths: {
    jquery: 'libs/jquery',
    scadaAlert: 'libs/scadaAlert',
    main: 'main'
}
                    

require(['scadaAlert'], function (AlertKM) {

});
                    

Use

Declare new instance of alert, render it.

Id is obligatory (try create instance without it and check console)

After 5 seconds remove alert window and clear memory

Code

var info1= new AlertKM({
    id: 'idRandomAlert',
    fontSize: '1.0em',
    texts: ['Watch out!']
});
    
info1.render();
setTimeout(function () {
    info1.remove();
    info1 = null;
}, 5000);
                    

Types

You can choose few pre-defined types of alert

Code

{type: 'ok'} // warning / alarm / info

Show / Hide / Remove

Methods show(), hide(), remove() are provided

Code

info1.render();

info1.hide();

info1.show();

info1.remove(); 
info1 = null;

Custom CSS

Add your own css class for extra styling

Code

.alert-km-testCustomCss {
    background-color: hotpink;
    color: white;
    font-weight: bold;
    letter-spacing: 1.8em;
    border: 0.2em groove;
    border-color: deeppink;
    opacity: 0.6;
}

{css: 'alert-km-testCustomCss'}

Texts

Add title and multiple lines of texts. Later you can update them in alert window

Code

{
    title: 'Title',
    texts: ['line 1', 'line 2']
}

info1.updateTexts['update 1', 'update 2', 'update 3'];

Position

Alert may show at the center, top or bottom position

Code

{position: center} // top / bottom

Custom html

Insert your own html fragment with icons or anything you want

Code

var fragHtml = document.createDocumentFragment(),
    div,
    p,
    span;

div = document.createElement('div');
$(div)
    .attr('id', 'idTemp')
    .addClass('ui-corner-all');
p = document.createElement('p');
$(p)
    .text('This is custom html')
    .css({
        'padding': '1em',
        'margin': '1em',
        'display': 'inline-table',
        'border': '0.1em solid',
        'width': '25%',
        'border-color': '#888282',
        'border-radius': '0.5em',
        'text-align': 'center'
    });
span = document.createElement('span');
$(span)
    .addClass('glyphicon')
    .addClass('glyphicon-off')
    .css({
        'float': 'left'
    })
    .appendTo(p);
$(div).append(p);
$(fragHtml).append(div);
                

{html: fragHtml}

Cyclic show and hide

Set values in miliseconds

Code

{
    timeVisible: 1000, 
    timeCyclic: 1000
}

Other parameters

Few parameters are avaible to set up during creating instance.

For more complex changes use your own css classes or html fragments

Code

info1 = new AlertKM({
    id: 'idInfo1',
    position: 'center',
    backgroundColor: '#120f0f',
    borderColor: '#505050',
    padding: '1em',
    opacity: 0.9,
    width: '95%',
    height: '95%',
    fontSize: '1.5em',
    title: 'Connection error',
    texts: ['No PLC connected!']
});
info1.render();
setTimeout(function () {
   info1.remove(); 
   info1 = null;
}, 5000);