File indexing completed on 2025-08-02 08:21:01
0001 <!DOCTYPE html>
0002 <head>
0003 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
0004
0005 <title>RCDAQ Controls</title>
0006
0007 <script type="text/javascript" src="gauge.min.js"></script>
0008
0009 <style>
0010 body {
0011 font-family: sans-serif;
0012 }
0013
0014 table {
0015 border-spacing: 0px;
0016 border-collapse: collapse;
0017 }
0018
0019 table.floatleft {
0020 width: 50%;
0021 float: left;
0022 height: 30px;
0023 cellpadding: 8;
0024 }
0025
0026 td {
0027 width: 100%;
0028 height: 30px;
0029 border: 2px solid #bbbbbb;
0030 text-align:center;
0031 vertical-align:middle;
0032 }
0033
0034 input {
0035 width: 99%;
0036 height: 30px;
0037 background-color: #33CCCC;
0038 font-size: 100%;
0039
0040 }
0041
0042 .bold {
0043 font-weight: bold;
0044 }
0045
0046
0047 .RunActiveStatus {
0048 color: red;
0049 background-color: #F5D88B;
0050 font-weight: bold;
0051 }
0052
0053 .RunInActiveStatus {
0054 color: blue;
0055 background-color: #CCCCCC;
0056 }
0057
0058 .ServerDeadStatus {
0059 color: white;
0060 background-color: #F93D5C;
0061 }
0062
0063
0064
0065 .LoggingActive {
0066 color: black;
0067 background-color: #F5D88B;
0068 }
0069 .LoggingInActive {
0070 color: black;
0071 background-color: #CCCCCC;
0072 }
0073
0074 .ButtonActive {
0075 color: black;
0076 background-color: #33CCCC;
0077 }
0078 .ButtonInActive {
0079 color: black;
0080 background-color: #666666;
0081 }
0082
0083 div.gaugecontainer {
0084 position: relative;
0085 float: left;
0086 width: 149px;
0087 height: 149px;
0088 border: none;
0089 background-color: #F5F5DC;
0090 }
0091
0092 .gaugecanvas {
0093 align: center;
0094 width: 100%;
0095 height: 100%;
0096 }
0097
0098 div.gaugetext {
0099 position: absolute; top: 30%;
0100 text-align: center;
0101 font-size: 0.9em;
0102 font-weight: bold;
0103 width: 100%;
0104
0105 }
0106
0107 div.unittext {
0108 position: absolute; top: 70%;
0109 text-align: center;
0110 font-size: 0.9em;
0111 font-weight: bold;
0112 width: 100%;
0113 }
0114
0115
0116 </style>
0117
0118
0119 <script>
0120
0121 var debug = false;
0122 var webSocket;
0123
0124 // global flags
0125 var ServerWasDeadFlag = false;
0126 var OpenDisabledFlag = false;
0127
0128 // color definitions
0129
0130 var StandardColor = "#cccc00";
0131 var StatusColor = "#bbbb00";
0132 var StandardColor2 = "#00CC99";
0133 var BorderColor = "#CCCC99";
0134 var ButtonBgColor = "#33CCCC";
0135
0136
0137 var RunInactiveColor = "#CCCCCC";
0138 var RunActiveColor = "#F5D88B"; // orange-ish
0139
0140 var LoggingDisabledColor = "#CCCCCC";
0141 var LoggingEnabledColor = RunActiveColor;
0142
0143 var ServerDeadColor = "#F93D5C";
0144 var ButtonInactiveColor = "#666666";
0145
0146 var RunCommand = "daq_begin";
0147 var OpenCommand = "daq_open";
0148
0149 function init()
0150 {
0151 if ( debug) {console.log('starting init');}
0152 // we are recursively calling this function.
0153 // This stopMe tells this round not to proceed.
0154 var stopMe = false;
0155
0156 webSocket = new WebSocket("ws://"+location.host);
0157
0158 webSocket.onerror = function(e) {
0159 e.preventDefault();
0160 }
0161
0162
0163 webSocket.onopen = function(e) {
0164 if ( debug) {console.log('Websocket opened - sending initial update request');}
0165 webSocket.send("initial_update");
0166 }
0167
0168
0169 webSocket.onclose = function(event) {
0170 if ( debug) { console.log('Websocket closed'); };
0171 delete webSocket;
0172 stopMe = true;
0173
0174 ServerWasDeadFlag = true;
0175
0176 document.getElementById("Status").className = "ServerDeadStatus";
0177 document.getElementById("Status").textContent="RCDAQ not running";
0178 document.getElementById("Logging").className='LoggingInActive';
0179 document.getElementById("OpenButton").className='ButtonInActive';
0180 document.getElementById("BeginButton").className='ButtonInActive';
0181
0182 document.getElementById("RunNr").textContent="n/a";
0183 document.getElementById("Events").textContent="n/a";
0184 document.getElementById("Volume").textContent="n/a";
0185 document.getElementById("Logging").textContent=" ";
0186 mbpsGauge.set(0);
0187 mbpsGauge.maxValue=1;
0188
0189 retryTimer = setTimeout(init, 2500);
0190 }
0191 if ( stopMe) return;
0192
0193 webSocket.onmessage = wsReceive;
0194
0195
0196 }
0197
0198 function wsReceive(e)
0199 {
0200 if ( debug) { console.log('Websocket received ' + e.data); }
0201 full_parse(e.data);
0202
0203 }
0204
0205 function full_parse(j)
0206 {
0207
0208 if ( j.length == 0)
0209 {
0210 return;
0211 }
0212
0213
0214 var o = JSON.parse(j);
0215
0216 list = Object.keys(o);
0217 var i;
0218 for ( i = 0; i < list.length; i++)
0219 {
0220 if ( list[i] == "OpenFlag")
0221 {
0222 if ( o[list[i]] > 0 )
0223 {
0224 document.getElementById("OpenButton").value = "Close";
0225 document.getElementById("Logging").className='LoggingActive';
0226 OpenCommand = "daq_close";
0227 }
0228 else
0229 {
0230 document.getElementById("OpenButton").value = "Open";
0231 document.getElementById("Logging").className='LoggingInActive';
0232 OpenCommand = "daq_open";
0233 }
0234 }
0235 else if ( list[i] == "RunFlag")
0236 {
0237 document.getElementById("BeginButton").className='ButtonActive';
0238
0239 if ( o[list[i]] == 1 )
0240 {
0241 // we dim the open/close button since it's going inactive
0242 document.getElementById("OpenButton").className='ButtonInActive';
0243 // we re-color the status field
0244 document.getElementById("Status").className='RunActiveStatus';
0245
0246 // and we change the text to "end"
0247 document.getElementById("BeginButton").value = "End";
0248 RunCommand = "daq_end";
0249 }
0250 else
0251 {
0252 // we un-dim the open/close button since it's active again
0253 document.getElementById("OpenButton").className='ButtonActive';
0254 // we re-color the status field
0255 document.getElementById("Status").className='RunInActiveStatus';
0256 // and we change the text to "Begin"
0257 document.getElementById("BeginButton").value = "Begin";
0258 RunCommand = "daq_begin";
0259 }
0260 }
0261 else if ( list[i] == "MBps")
0262 {
0263 if ( o[list[i]] > mbpsGauge_max)
0264 {
0265 mbpsGauge_max = o[list[i]];
0266 mbpsGauge.maxValue = mbpsGauge_max *1.2;
0267 }
0268 mbpsGauge.set(o [list[i]] );
0269 }
0270
0271 else if ( list[i] == "Evtps")
0272 {
0273 if ( o[list[i]] > evtsGauge_max)
0274 {
0275 evtsGauge_max = o[list[i]];
0276 evtsGauge.maxValue = evtsGauge_max *1.2;
0277 }
0278 evtsGauge.set(o [list[i]] );
0279 }
0280
0281 if ( document.getElementById(list[i]) )
0282 {
0283 document.getElementById(list[i]).textContent=o[list[i]];
0284 }
0285 }
0286 }
0287
0288 function initial_update()
0289 {
0290 var uri = "initial_update";
0291 var xhttp = new XMLHttpRequest();
0292 xhttp.onreadystatechange = function()
0293 {
0294 if (xhttp.readyState == 4 && xhttp.status == 200)
0295 {
0296 //console.log(" response " + xhttp.responseText);
0297 full_parse(xhttp.responseText);
0298 }
0299 };
0300
0301
0302 xhttp.open("get", uri, true);
0303 xhttp.send();
0304 }
0305
0306
0307
0308 function OpenHandler()
0309 {
0310
0311 webSocket.send(OpenCommand);
0312 }
0313
0314 function RunHandler()
0315 {
0316
0317 webSocket.send(RunCommand);
0318
0319 }
0320
0321 // document.addEventListener("DOMContentLoaded", function() {
0322 // init();
0323 // });
0324
0325
0326 </script>
0327
0328 </head>
0329
0330 <body>
0331
0332
0333 <TABLE class="floatleft">
0334
0335 <tr>
0336 <td colspan="2" style="background-color: #cccc00; height:45px;font-size:140%;">RCDAQ Control</td>
0337 </tr>
0338 <tr>
0339 <td id="Name" colspan="2" style="background-color: #bbbb00; height:18px;font-size:80%;"> </td>
0340 </tr>
0341
0342 <tr>
0343 <td id="Status" colspan="2" class="RunInActiveStatus"> </td>
0344 </tr>
0345
0346 <tr>
0347 <td colspan="1" style="background-color: #00cc99; width:50%">Run:
0348 <td id="RunNr" style="background-color: #00cc99;" ></td>
0349 </tr>
0350
0351 <tr>
0352 <td colspan="1" style="background-color: #00cc99; width:50%">Events:
0353 <td id="Events" style="background-color: #00cc99;" ></td>
0354 </tr>
0355
0356 <tr>
0357 <td colspan="1" style="background-color:#00cc99; width:50%">Volume:
0358 <td id="Volume" style="background-color: #00cc99;" >0 MB</td>
0359 </tr>
0360
0361 <tr>
0362 <td id="Logging" colspan="2" class="LoggingInActive" ></td>
0363 </tr>
0364
0365
0366 <tr>
0367 <td colspan="2" style="background-color:#33bbbb";> <input type="button" value="Open" onClick="OpenHandler()" class="ButtonActive" id="OpenButton"></td>
0368 </tr>
0369
0370 <tr>
0371 <td colspan="2" style="background-color:#33bbbb";> <input type="button" value="Begin" onClick="RunHandler()" class="ButtonActive" id="BeginButton"></td>
0372 </tr>
0373
0374
0375 </table>
0376
0377 <table>
0378 <tr>
0379 <td>
0380 <div id="evtssgauge" class="gaugecontainer">
0381 <canvas class="gaugecanvas" id="evtscanvas"></canvas>
0382 <div id="evts_unittext" class="unittext">Evt/s</div>
0383 <div id="evtstext" class="gaugetext"></div>
0384 </div>
0385 </td>
0386 </tr>
0387
0388 <tr>
0389 <td>
0390 <div id="mbpsgauge" class="gaugecontainer">
0391 <canvas class="gaugecanvas" id="mbpscanvas"></canvas>
0392 <div id="unittext" class="unittext">MB/s</div>
0393 <div id="mbpstext" class="gaugetext"></div>
0394 </div>
0395 </td>
0396 </tr>
0397 </table>
0398
0399
0400
0401 <script>
0402
0403 var opts = {
0404 angle: -0.25,
0405 lineWidth: 0.15,
0406 radiusScale:0.9,
0407 percentColors: [[0.0, "00AA00" ], [1.0, "#00DD00"]],
0408 generateGradient: true,
0409 pointer: {
0410 length: 0.6,
0411 strokeWidth: 0.03,
0412 color: '#000099'
0413 },
0414 highDpiSupport: true
0415 };
0416
0417 var mbpsGauge_max = 0;
0418 mbpsGauge = new Gauge(document.getElementById("mbpscanvas"));
0419 mbpsGauge.setOptions(opts);
0420 mbpsGauge.setTextField(document.getElementById("mbpstext"));
0421 mbpsGauge.animationSpeed=10;
0422 mbpsGauge.strokeWidth=0.2;
0423 mbpsGauge.maxValue = 1;
0424 mbpsGauge.set(0);
0425
0426 var evtsGauge_max = 0;
0427 evtsGauge = new Gauge(document.getElementById("evtscanvas"));
0428 evtsGauge.setOptions(opts);
0429 evtsGauge.setTextField(document.getElementById("evtstext"));
0430 evtsGauge.animationSpeed=10;
0431 evtsGauge.strokeWidth=0.2;
0432 evtsGauge.maxValue = 1;
0433 evtsGauge.set(0);
0434 </script>
0435
0436
0437 <script>
0438 window.onload = init;
0439 </script>
0440
0441
0442 </body>
