HiSPARC · 153957 · Feb 4, 2013 · Feb 5, 2013 · Feb 6, 2013 · Feb 9, 2013
diff --git a/coinc.json b/coinc.json
diff --git a/images/detector0.png b/images/detector0.png
diff --git a/images/detector1.png b/images/detector1.png
diff --git a/images/detector2.png b/images/detector2.png
diff --git a/images/detector3.png b/images/detector3.png
diff --git a/images/direction.png b/images/direction.png
diff --git a/images/gps.png b/images/gps.png
diff --git a/jsim.css b/jsim.css
@@ -0,0 +1,69 @@
+body {
+    position: relative;
+    color: #333;
+    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+    font-size: 1em;
+    background: #ccf;}
+
+.detectorMap {
+    display: block;
+    width: 450px;
+    height: 445px;
+    position: absolute;
+    margin: 0px;
+    left: 350px;
+    top: 35px;
+    background-color : #f0f0f0}
+
+#gps {
+    width: 6px;
+    height: 6px;
+    position: absolute;
+    margin: 0px;
+    left: 222px;
+    top: 222px;}
+
+
+#detector0 {
+    width: 52px;
+    height: 52px;
+    position: absolute;
+    margin: 0px;
+    left: 150px;
+    top: 60px;
+    transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);}
+
+#detector1 {
+    width: 52px;
+    height: 52px;
+    position: absolute;
+    margin: 0px;
+    left: 150px;
+    top: 125px;
+    transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);}
+
+#detector2 {
+    width: 52px;
+    height: 52px;
+    position: absolute;
+    margin: 0px;
+    left: 100px;
+    top: 150px;
+    transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);}
+
+#detector3 {
+    width: 52px;
+    height: 52px;
+    position: absolute;
+    margin: 0px;
+    left: 200px;
+    top: 150px;
+    transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);}
diff --git a/jsim.html b/jsim.html
@@ -0,0 +1,328 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+  <title>Simulation</title>
+  <link rel="stylesheet" type="text/css" media="screen" href="scripts/jquery.jqplot.min.css" />
+  <link rel="stylesheet" type="text/css" media="screen" href="jsparc.css" />
+  <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
+  <script type="text/javascript" src="scripts/jquery.jqplot.min.js"></script>
+  <script type="text/javascript" src="scripts/jquery-ui.js"></script>
+  <script type="text/javascript" src="scripts/plugins/jqplot.cursor.min.js"></script>
+  <script type="text/javascript" src="scripts/plugins/jqplot.canvasTextRenderer.min.js"></script>
+  <script type="text/javascript" src="scripts/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
+  <script type="text/javascript" src="scripts/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
+  <script type="text/javascript">
+
+    var c = 299792458, toRad = Math.atan(1)/45;
+
+    function traceSim(timeSample, trigger, height){
+        var triggerSample = parseInt(trigger/2.5+0.5);
+        var signal = 0, factor = 1/0.917, delta = 0, slewrate=100;
+        if(timeSample < triggerSample) {signal = 0;}
+        else {
+            if(timeSample < (triggerSample+height/slewrate)) {
+                signal = -height;
+                while(timeSample < (triggerSample+height/slewrate)){
+                    signal += slewrate;
+                    timeSample++;
+                }
+            }
+            else {
+                for(k = parseInt(triggerSample+height/slewrate); k < timeSample; k++) {factor = factor*0.917;}
+                signal = -height * factor;
+            }
+        }
+        return signal;
+    }
+
+    function genJSON(){
+        var timeMax = 0, arrTime;
+        var txt = '{'
+        txt += '"timestamp":"0",';
+        txt += '"nanoseconds":"0", "events":[';
+        txt += '{"status":"on",';
+        txt += '"timestamp":"0",';
+        txt += '"number":"",';
+        txt += '"nanoseconds":"'+$('#nano'+i).val()+'","mips":[';
+        for(i = 0; i < 4; i++) {
+            txt += $("#mip"+i).val();
+            if(i<3) txt += ','
+        }
+        txt += ']';
+        txt += ',"traces":[';
+        for(i = 0; i < 4; i++) {
+            arrTime = $("#nano"+i).val();
+            if(timeMax<arrTime) timeMax = arrTime;
+        }
+        timeMax = timeMax / 2.5 + 100;
+        for(i = 0; i < 4; i++){
+            txt += '[';
+            for(j = -10; j < timeMax; j++){
+                txt += traceSim(j, $('#nano'+i).val(), ($("#mip"+i).val()*$("#MIP-peak").val()));
+                if(j < (timeMax-1)) txt += ',';
+            }
+            txt += ']';
+            if(i < 3) txt += ',';
+        }
+        txt += ']}]}'
+        var obj = eval("("+txt+")");
+        return obj;
+    }
+
+    function normTime(times) {
+        var minTime = 100;
+        for(j = 0; j < times.length; j++) {
+            if(times[j] < minTime) { minTime = times[j]; }
+        }
+        for(j = 0; j<times.length; j++) {
+            times[j] = times[j] - minTime;
+        }
+        return times;
+    }
+
+    function toShowerTime(theta, phi, x, y, z) {
+        var sinTheta = Math.sin(theta * toRad), cosTheta = Math.cos(theta*toRad);
+        var sinPhi = Math.sin(phi * toRad), cosPhi = Math.cos(phi*toRad);
+        return (1e9 * (sinPhi * sinTheta * x + cosPhi * sinTheta * y +cosTheta * z)/c).toFixed(1);
+    }
+
+    function calcK(energy) {
+        var r0 = 92, alfa = 1.2, eta = 3.97;
+        return Math.pow((energy/2.15e17),(0.985))/(Math.pow((600 / r0), (-alfa))*Math.pow((1 + (600 / r0)), (alfa - eta)));
+    }
+
+    function calcMIP(k, r) {
+        var r0 = 92, alfa = 1.2, eta = 3.97;
+        return k * Math.pow((r / r0), (-alfa)) * Math.pow((1 + (r / r0)), (alfa - eta));
+    }
+
+    function calcMIPs() {
+        var r, a, x, y, dx, dy;
+        for (i = 0; i < 4; i++) {
+            a = $("#alfa"+i).val() * toRad;
+            r = $("#r"+i).val();
+            x = r * Math.sin(a);
+            y = r * Math.cos(a);
+            dx = x - $("#r").val() * Math.sin($("#alfa").val() * toRad); 
+            dy= y - $("#r").val() * Math.cos($("#alfa").val() * toRad);
+            $("#mip"+i).val(((calcMIP(calcK($("#energy").val()), Math.sqrt(dx*dx+dy*dy)))/2).toFixed(4));
+        }
+    }
+
+    function normCoord(objName){
+        var param = {}
+        param.width = ($("#" + objName).width());
+        param.height = ($("#" + objName).height());
+        return param;
+    }
+
+    function calcTime(){
+        var r, alfa, theta, phi, x, y, z, times = new Array();
+        for(i = 0; i < 4; i++) {
+            r = $("#r"+i).val();
+            alfa = $("#alfa"+i).val() * toRad;
+            x = r * Math.sin(alfa);
+            y = r * Math.cos(alfa);
+            z = 0;
+            theta = $("#theta").val();
+            phi = $("#phi").val();
+            times[i] = -toShowerTime(theta, phi, x, y, z);
+        }
+        times = normTime(times);
+        for(i = 0; i < 4; i++) {
+            $("#nano"+i).val(times[i].toFixed(1));
+        }
+    }
+
+    function setDetLoc(param){
+        var maxWidth = 0.5*param.width;
+        var maxHeight = 0.5*param.height;
+        var r, alfa, x, y, change;
+        for(i = 0; i < 4; i++) {
+            r = $("#r0"+i).val();
+            alfa = $("#alfa0"+i).val() * toRad;
+            x = maxWidth * r * Math.sin(alfa);
+            y = maxWidth * r * Math.cos(alfa);
+            change=225+x/10-26;
+            $("#detector"+i).css("left", eval(change));
+            change=225-y/10-26;
+            $("#detector"+i).css("top", eval(change));
+            change="rotate("+$("#beta0"+i).val()+"deg)";
+            $("#detector"+i).css("transform", change);
+            $("#detector"+i).css("-moz-transform", change);
+            $("#detector"+i).css("-webkit-transform", change);
+        }
+    }
+
+    function plotEventGraph(data){
+        var plotStyle = {
+            seriesDefaults: {
+                lineWidth: 1.5, shadow: false, showLine: true, showMarker: false,
+                markerOptions: {show: false, size: 0, lineWidth: 0}
+            },
+            legend: {show: false},
+            cursor: {tooltipLocation: 'se', zoom: true, clickReset: true},
+                axesDefaults: {
+                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                labelOptions: {textColor: '#222', enableFontSupport: true},
+                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+                tickOptions: {textColor: '#222', enableFontSupport: true, showGridline: false, mark: 'outside', markSize: 4}
+            },
+            axes: {
+                xaxis: {numberTicks: 5, label: "Time [ns]"},
+                yaxis: {numberTicks: 3, max: 0, label: "Pulseheight [mV]"}
+            },
+            grid: {shadow: false, background: "#fff", gridLineWidth: 1, gridLineColor: "#000", borderWidth: 1, borderColor: "#000"}
+        };
+
+        $.jqplot.config.enablePlugins = true; // on the page before plot creation.
+
+        var tracedata = [];  eventdata = [];
+        var trace_min = 0;
+        for (k = 0; k < data.events[0].traces.length; k++) {
+            tracedata[k] = [[data.events[0].nanoseconds, data.events[0].traces[k][0]]];
+            for (i = 1; i < data.events[0].traces[k].length; i++) {
+                tracedata[k].push([(i * 2.5), data.events[0].traces[k][i]]);
+                if(data.events[0].traces[k][i] < trace_min) {trace_min = data.events[0].traces[k][i]};
+            }
+            eventdata.push(tracedata[k]);
+        }
+
+        var _tracePlotStyle = {
+            seriesColors: ["#222", "#D22", "#1C2", "#1CC"],
+            title: "Station " + data.events[0].number,
+            axes: {
+                xaxis: {min: -10, max: Math.ceil(data.events[0].traces[0].length * 2.5)},
+                yaxis: {min: Math.ceil(trace_min * 1.1 / 2.0) * 2.0, max: 0}
+            }
+        };
+
+        var tracePlotStyle = $.extend(true, {}, plotStyle, _tracePlotStyle);
+
+        diagramID = "chartdiv";
+        $.jqplot(diagramID, eventdata, tracePlotStyle);
+    }
+
+    $(document).ready(function(){
+        $("#chartdiv").show();
+        setDetLoc(normCoord("detectorMap")); 
+        calcMIPs();
+        calcTime();
+        $("#changeMap").click( function (event) {
+            setDetLoc(normCoord("detectorMap"));
+            calcMIPs();
+            calcTime();
+        });
+        $("#simShow").click( function (event) {
+            calcMIPs();
+            calcTime();
+            var data = genJSON();
+            $('#chartdiv').empty();
+            plotEventGraph(data);
+        });
+    });
+  </script>
+
+ </head>
+ <body>
+  <div id="detectorMap" class="detectorMap">
+   <img id="gps" src="images/gps.png" alt="gps" />
+   <img id="detector00" src="images/detector0.png" alt="0" />
+   <img id="detector01" src="images/detector1.png" alt="1" />
+   <img id="detector02" src="images/detector2.png" alt="2" />
+   <img id="detector03" src="images/detector3.png" alt="3" />
+  </div>
+  <table>
+    <tr>
+      <td>det.</td><td>r [m]</td><td>&#945; [<sup>o</sup>]</td><td>&#946; [<sup>o</sup>]</td>
+    </tr>
+    <tr>
+      <td align='center' class='det1' style='border-radius:2px;'>1</td>
+      <td><input id="r00" type=text value=8 size=5 /></td>
+      <td><input id="alfa00" type=text value=0 size=5 /></td>
+      <td><input id="beta00" type=text value=0 size=5 /></td>
+    </tr>
+    <tr>
+      <td align='center' class='det2' style='border-radius:2px;'>2</td>
+      <td><input id="r01" type=text value=3 size=5  /></td>
+      <td><input id="alfa01" type=text value=0 size=5 /></td>
+      <td><input id="beta01" type=text value=0 size=5 /></td>
+    </tr>
+    <tr>
+      <td align='center' class='det3' style='border-radius:2px;'>3</td>
+      <td><input id="r02" type=text value=5 size=5  /></td>
+      <td><input id="alfa02" type=text value=270 size=5 /></td>
+      <td><input id="beta02" type=text value=270 size=5 /></td>
+    </tr>
+    <tr>
+      <td align='center' class='det4' style='border-radius:2px;'>4</td>
+      <td><input id="r03" type=text value=5 size=5  /></td>
+      <td><input id="alfa03" type=text value=90 size=5 /></td>
+      <td><input id="beta03" type=text value=90 size=5 /></td>
+    </tr>
+    <tr>
+      <td colspan=4><input type="button" id="changeMap" value="Change map" style='width:200px;'></input><td>
+    </tr>
+    <tr>
+       <td colspan=2>energy</td><td><input id="energy" type=text value=5e12 size=5  /></td>
+    </tr>
+    <tr>
+      <td colspan=2></td><td>&#952; [<sup>o</sup>]</td><td>&#934; [<sup>o</sup>]</td>
+    </tr>
+    <tr>
+      <td colspan=2>direction</td>
+      <td><input id="theta" type=text value=0 size=5 /></td>
+      <td><input id="phi" type=text value=0 size=5 /></td>
+    </tr>
+    <tr>
+      <td colspan=2></td><td>r [m]</td><td>&#945; [<sup>o</sup>]</td>
+    </tr>
+    <tr>
+      <td colspan=2>shower core</td>
+      <td><input id="r" type=text value=0 size=5 /></td>
+      <td><input id="alfa" type=text value=0 size=5 /></td>
+    </tr>
+    <tr>
+      <td colspan=4><input type="button" id="simShow" value="Simulate shower" style='width:200px;'></input></td>
+    </tr>
+    <tr>
+      <td></td><td>[MIP]</td><td>[ns]</td><td></td>
+    </tr>
+    <tr>
+      <td align='center' class='det1' style='border-radius:2px;'>1</td>
+      <td><input id="mip0" type=text size=5 /></td>
+      <td><input id="nano0" type=text size=5 vakue=0 /></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td align='center' class='det2' style='border-radius:2px;'>2</td>
+      <td><input id="mip1" type=text size=5 /></td>
+      <td><input id="nano1" type=text size=5 /></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td align='center' class='det3' style='border-radius:2px;'>3</td>
+      <td><input id="mip2" type=text size=5 /></td>
+      <td><input id="nano2" type=text size=5 /></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td align='center' class='det4' style='border-radius:2px;'>4</td>
+      <td><input id="mip3" type=text size=5 /></td>
+      <td><input id="nano3" type=text size=5 /></td>
+      <td></td>
+    </tr>
+  </table>
+  <div id="logo"><a target="_blank" href="http://www.hisparc.nl/"><img src="http://data.hisparc.nl/media/static/header.png" /></a></div>
+  <div id="dashboard">
+    <table>
+      <tr>
+        <td>MIP-peak [mv]</td><td><input type="text" value="150" size="5" id="MIP-peak"/></td>
+      </tr>
+    </table>
+    <div id="chartdiv" class="tracegraph"></div>
+  </div>
+ </body>
+</html>