index.html

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">


prev_text = '';

function processProPresenterMessage(message) {

    /* enable this to view Array of data in the console. */
    /*
    if (message['acn'] != "vid") {
        console.log(message);
    }
    */

    // only parse fv arrays
    if (message['acn'] == "fv") {
        if (message['ary'][0]['txt'] != undefined && message['ary'][0]['acn'] === 'cs') {
            var text = '';
	
            // check slide note for noText keyword.  If noText is defined dont step into this IF
            if (typeof message['ary'][1] !== 'undefined' && message['ary'][1]['txt'] !== config["noText"]) {
                // replace carriage return \r and linefeed \n with <br> global
                text = message['ary'][0]['txt'].replace(/\r\n|\n|\r/g, '<br />');
	
                // if fading is true and repeated text is true
                if (prev_text !== text || config['fade_repeated_text']) {
                    // if fading is true
                    if (config['fade']) {
                        $("#cs").fadeOut(config["fade_speed"], function() {
                            $("#cs").html(text);
                            $("#cs").fadeIn(config["fade_speed"]);
                        });
                    }
                    // no fade
                    else {
                        $("#cs").html(text);
                    }
                }
            }
            // noText keyword was defined on slide note so set #cs to blank
            else{
                $("#cs").html("");
            }
            prev_text = text;
        }
    }
}


function connectToProPresenter() {
    var proPresenterStageDisplayURL = 'ws://' + config['propresenter_ip'] + ':' + config['propresenter_port'] + '/stagedisplay';
    
    var ws = new WebSocket(proPresenterStageDisplayURL);

    ws.onopen = function() {
        console.log('ProPresenter connection opened');
        ws.send(JSON.stringify({
                                "pwd": config['propresenter_password'],
                                "ptl": 610,
                                "acn": "ath"
                               }));
    };

    ws.onmessage = function(e) {
        processProPresenterMessage(JSON.parse(e.data));
    };

    ws.onclose = function(e) {
        console.log('ProPresenter socket was closed. Attempting to reconnect in 1 second...', e.reason);
        setTimeout(function() {
            connectToProPresenter();
        }, 1000);
    };

    ws.onerror = function(err) {
        console.error('ProPresenter socket has error: ', err.message, 'Closing socket');
        ws.close();
    };
}


connectToProPresenter();

</script>
</head>

<body>
    <div id="cs"></div>
</body>

</html>