simon
/
DSDEVS-Debugger


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="javascript_runtime/libs/w2ui-1.4.3.min.css" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="javascript_runtime/libs/w2ui-1.4.3.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="javascript_runtime/libs/ui.js"></script>
    <script type="text/javascript" src="javascript_runtime/statecharts_core.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    
    <style type="text/css">
        .w2ui-icon.simulate { background: url('img/simulate.png') no-repeat center !important; }
        .w2ui-icon.simulatert { background: url('img/simulatert.png') no-repeat center !important; }
        .w2ui-icon.pause { background: url('img/pause.png') no-repeat center !important; }
        .w2ui-icon.bigstep { background: url('img/bigstep.png') no-repeat center !important; }
        .w2ui-icon.smallstep { background: url('img/smallstep.png') no-repeat center !important; }
        .w2ui-icon.reset { background: url('img/reset.png') no-repeat center !important; }
        .w2ui-icon.breakpoint { background: url('img/breakpoint.png') no-repeat center !important; }
    </style>
    
    <style type="text/css">
        .node rect {
          fill: #fff;
          stroke: #000;
          stroke-width: 1px;
          fill-opacity: 0.7;
        }
        .imminent rect {
          fill: lightblue;
        }
        .INTERNAL rect {
          fill: lightblue;
        }
        .EXTERNAL rect {
          fill: tomato;
        }
        text { font: bold 12px sans-serif; }
        .timeNext { font: bold 10px sans-serif; }
        .link {
          fill: none;
          stroke: #bbb;
        }
        .portConnection {
          fill: none;
          stroke: red;
          marker-mid: url(#marker_arrow);
        }
        .input {
          stroke: green;
          marker-mid: url(#marker_arrow_green);
        }
        .invisibleLink {         
         stroke-width: 0;
        }
        .invisible text { 
          fill-opacity: 0;
        }
        .visible text { 
          fill-opacity: 1;
        }
        .outmessage {
          fill: yellow;
          stroke: #000;
          fill-opacity: 0.7;
        }
        .inmessage {
          fill: orange;
          stroke: #000;
          fill-opacity: 0.7;
        }
        .invisibleInfo tspan {
          fill-opacity: 0;
        }
        .smallStepInfo {
          border: 1px solid black;
          background-color: blue;
          width: 7px;
          height: 7px;
          float: left;
        }
        .inactive {
          opacity: 0.3;
        }
        .invisibleInfo {
          display: none;
        }
        .coupled text {
          font-style: italic;
        }
        form { display: table;      }
        form p { display: table-row;  }
        form p label { display: table-cell; }
        form p input { display: table-cell; }
    </style>
</head>
<body>
    <div id="godEventPopup" class="popupWindow" title="Insert God Event">
        <form>
            <p>
                <label for="godEventName">Name:</label>
                <input type="text" id="godEventName" class="text ui-widget-content ui-corner-all" />
            </p>
            <p>
                <label for="godEventValue">Value:</label>
                <input type="text" id="godEventValue" class="text ui-widget-content ui-corner-all" />
            </p>
        </form>
    </div>
    <div id="injectEventPopup" class="popupWindow" title="Inject Event">
        <form>
            <p>
                <label for="injectEvent">Event:</label>
                <input type="text" id="injectEvent" class="text ui-widget-content ui-corner-all" />
            </p>
            <p>
                <label for="injectTime">Time:</label>
                <input type="text" id="injectTime" class="text ui-widget-content ui-corner-all" />
            </p>
        </form>
    </div>
    <div id="breakpointPopup" class="popupWindow" title="Add Breakpoint">
        <form>
            <p>
                <label for="breakpointName">Name:</label>
                <input type="text" id="breakpointName" class="text ui-widget-content ui-corner-all" />
            </p>
            <p>
                <label for="breakpointFunction">Function:</label>
                <textarea id="breakpointFunction" class="text ui-widget-content ui-corner-all" style="width:400px;height:150px;">def breakpoint(t, m, tr, ob, ib):
  </textarea>
            </p>
            <p>
                <label for="breakpointEnabled">Enabled:</label>
                <input type="checkbox" id="breakpointEnabled" class="ui-widget-content ui-corner-all" checked />
            </p>
            <p>
                <label for="breakpointDisableOnTrigger">Disable on Trigger:</label>
                <input type="checkbox" id="breakpointDisableOnTrigger" class="ui-widget-content ui-corner-all" checked />
            </p>
        </form>
    </div>
    <script type="text/javascript" src="debugging_environment.js"></script>
    <script>
        var controller = new DebuggingEnvironment.Controller();
        var ui_reply_port = controller.addOutputListener('output');
        var socket = io();

        /*
        Check whether the user interacted with the debugging UI. If so, forward to communication layer.
        */
        setInterval(function() {
            while (true) {
                reply_msg = ui_reply_port.fetch(0)
                if (reply_msg == undefined) {
                    break
                }
                // console.log(JSON.stringify(reply_msg));
                socket.emit('message', JSON.stringify(reply_msg) + "\n");
            }
        }, 5)

        /*
        When we receive a message from the communication layer (either from the simulator itself or the visualization interface),
        translate it to the correct event for the visualization Statechart.
        */
        socket.on('msg', function(msg){
            if (msg.substring(0, 4) == "vis_") {
                // message from the visualization interface
                msg = JSON.parse(msg.substring(4));
                cmd = msg["name"];
                if (cmd == "select_instance") {
                    controller.addInput(new Event("select_instance", "ui_input", msg["parameters"]), 0.0);
                }
            } else {
                // message from the simulator (a state update, breakpoint trigger, ...)
                // console.log(msg);
                msg = JSON.parse(msg)[0];
                if (msg["name"] == "all_states"
                    || msg["name"] == "all_states_reset"
                    || msg["name"] == "new_states"
                    || msg["name"] == "imminents"
                    || msg["name"] == "selected_imminent"
                    || msg["name"] == "outbag"
                    || msg["name"] == "inbags"
                    || msg["name"] == "transitioning"
                    || msg["name"] == "new_internal_states"
                    || msg["name"] == "new_tn"
                    || msg["name"] == "structural_changes"
                    || msg["name"] == "god_event_ok"
                    || msg["name"] == "inject_ok"
                    || msg["name"] == "breakpoint_triggered") {
                    controller.addInput(new Event(msg["name"], "simulation_input", [msg["parameters"]]), 0.0)
                }
            }
        });

        controller.start();
    </script>
    <span id="currLoc" style="display:none" />
</body>