DSDEVS-Debugger/visualization_server.html

<div>
<script src="javascript_models/javascript_runtime/statecharts_core.js"></script>
<script src="javascript_models/javascript_runtime/libs/utils.js"></script>
<script src="javascript_models/javascript_runtime/libs/svg.js"></script>
<script src="javascript_models/javascript_runtime/libs/ui.js"></script>
<script src="javascript_models/particle_interaction_vis_js.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script>
var controller = new ParticleInteraction.Controller([800,600]);
var ui_reply_port = controller.addOutputListener('output');
var socket = io();

/*
Check whether the user interacted with the visualization UI. If so, forward to communication layer.
*/
setInterval(function() {
    while (true) {
        reply_msg = ui_reply_port.fetch(0)
        if (reply_msg == undefined) {
            break
        }
        event_name = reply_msg.name
        parameters = reply_msg.parameters
        if (event_name == "particle_clicked") {
            socket.emit('message', "INTERRUPT " + parameters[0]);
        } else if (event_name == "delete_selected") {
            socket.emit('message', "INTERRUPT delete_selected");
        } else if (event_name == "particle_right_clicked") {
            socket.emit('message', JSON.stringify({'name': "select_instance", "parameters": parameters}));
        }
    }
}, 5)

/*
When we receive a message from the communication layer (either from the simulator itself or the debugging interface),
translate it to the correct event for the visualization Statechart.
*/
socket.on('msg', function(msg){
    var event = undefined;
    if (msg.substring(0, 4) == "dbg_") {
        // message from the debugging interface
        msg = JSON.parse(msg.substring(4));
        cmd = msg["parameters"][0];
        if (cmd == "reset") {
            event = new Event("reset", "input", []);
        }
    } else {
        // message from the simulator (i.e., an output message of the simulation)
        msg = JSON.parse(msg);
        var msg_contents = msg[1];
        if (msg[0] == "POS_OUT") {
            if (msg_contents[0] == "delete") {
                event = new Event("delete_particle", "input", [msg_contents[1]]);
            } else if (msg_contents[0] == "created") {
                event = new Event("create_particle", "input", [msg_contents.slice(1)]);
            } else {
                event = new Event("move_particle", "input", [msg_contents]);
            }
        } else if (msg[0] == "TIME_OUT") {
            event = new Event("update_time", "input", [msg_contents])
        } else if (msg[0] == "COLOR_OUT") {
            event = new Event("color_particle", "input", [msg_contents])
        }
    }
    if (event != undefined) {
        controller.addInput(event, 0.0);
    }
});

controller.start();
</script>
<div>