SPSPlot_web/index.html

160 lines
4.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<title>SPS Simulation</title>
<meta name="description" content="SPS simulation">
<!-- <link rel="icon" type="image/x-icon" href="logos/SOLARIS_favicon.png"> -->
<script src="https://cdn.plot.ly/plotly-2.16.1.min.js"></script>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, user-scalable=0"/>
</head>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
background : #CEB888;
}
input[type="range"] {
width: 400px;
}
input::-webkit-slider-runnable-track {
-webkit-appearance: none;
position: relative;
background-color: #782F40;
width: 100%;
height: 20px;
border-radius: 10px;
overflow: hidden;
}
input::-webkit-slider-thumb {
position: relative;
-webkit-appearance: none;
box-shadow: -340px 0 0 320px #782F40, inset 0 0 0 40px #782F40, 340px 0 0 320px #FFFFFF, inset 0 0 0 40px #782F40;
}
</style>
<body>
<h1>Split-Pole Spectrograph Simulation</h1>
<b>For a given reaction and excited states,</b>
<ul>
<li> calculate the KE vs Lab angle, then </li>
<li> find the KE for each state at SPS angle, then </li>
<li> calculate the rho, then </li>
<li> plot</li>
<li>Could add energy loss in future.</li>
</ul>
<table id="ReactionTable">
<tr>
<td style="text-align: right;"><b>Beam</b></td>
<td><Input type="text" style="text-align: center; width:90px" value="d" id="beam" enterkeyhint="done"/></td>
<tr>
<td style="text-align: right;"><b>Target</b></td>
<td><Input type="text" style="text-align: center; width:90px" value="12C" id="target" enterkeyhint="done"/></td>
</tr>
<tr>
<td style="text-align: right;"><b>Recoil</b></td>
<td><Input type="text" style="text-align: center; width:90px" value="p" id="recoil" enterkeyhint="done"/></td>
</tr>
<tr>
<td style="text-align: right;"><b>Residual</b></td>
<td id='residual' style="text-align: center;">13C</td>
</tr>
<tr>
<td style="text-align: right;"><b>Sp</b></td>
<td id="residualSp" style="text-align: right;"></td>
</tr>
<tr>
<td style="text-align: right;"><b>Sn</b></td>
<td id="residualSn" style="text-align: right;"></td>
</tr>
<tr>
<td style="text-align: right;"><b>Sa</b></td>
<td id="residualSa" style="text-align: right;"></td>
</tr>
<tr>
<td style="text-align: right;"><b>Q-value</b></td>
<td id='Q-value' style="text-align: right;"></td>
</tr>
<tr>
<td></td>
<td><button type="button" onclick="addReaction(this)">Add Reaction</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" onclick="removeRactiion(this)">Rm. Reaction</button></td>
</tr>
</table>
<p id="msg" style="color: red;"> Will add more reactions later </p>
<p></p>
<table>
<tr>
<td style="text-align:right"> <b>Energy :</b></td>
<td><Input type="text" style="width:60px" value="8" id="KEA" enterkeyhint="done"/></td>
<td>MeV/u</td>
<td colspan="6"><Input type="range" min="0" max="20" step="0.05" value="8" id="KEARange"/> </td>
</tr>
<tr>
<td style="text-align:right"> <b>SPS Angle :</b></td>
<td><Input type="text" style="width:60px" value="20" id="angle" enterkeyhint="done"/></td>
<td>degree</td>
<td colspan="6"><Input type="range" min="0" max="90" step="1" value="20" id='angleRange'/> </td>
</tr>
<tr>
<td style="text-align:right"> <b>SPS B-field :</b></td>
<td><Input type="text" style="width:60px" value="0.9" id="BField" enterkeyhint="done"/></td>
<td>T</td>
<td colspan="6"><Input type="range" min="0" max="1" step="0.001" value="0.9" id='BRange'/> </td>
</tr>
</table>
<p></p>
<br>
<input type="checkbox" id="pos" onclick="checkParity()" checked/>Positive parity</td>
<input type="checkbox" id="neg" onclick="checkParity()" checked/>Negative parity</td>
<input type="checkbox" id="unk" onclick="checkParity()" checked/>Unknown parity</td>
<br>
<button type="button" onclick="addStates()">Add known states</button>
Max Ex: <input type="text" id="maxEx" size="5" value="10"/>MeV
<p id='waiting'></p>
<table id="ExTable">
<tr>
<td><b> E<sub>x</sub> [MeV] </b></td>
</tr>
</tr>
<td><input type="text" name="Ex" size="5" value="0"/></td>
<td><button type="button" onclick="addRow(this)">Insert Ex</button></td>
<td><button type="button" onclick="deleteRow(this)">Remove Ex</button></td>
</tr>
</table>
<p></p>
<button type="button" onclick="PlotAll(this)" style="width: 300px; height: 50px;"> Calculate SPS Kinematics </button>
<p></p>
<table>
<tr>
<td>
<div id="Plot_Kinematics" class="plotStyle" style="width: 400px; height: 400px;"></div>
</td>
<td>
<div id="Plot_SPS" class="plotStyle" style="width: 800px; height: 400px;"></div>
</td>
</tr>
</table>
</body>
<script src="spsSim.js"></script>
</html>