Files
MaxWaterSystem/POCloud/HTML/Configuration.html

407 lines
21 KiB
HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="row row-flex">
<div class="col-xs-12 text-center">
<h1>Control</h1>
</div>
<div class='col-xs-6 text-center box-me'>
<!-- Use data-confirm-message to set the exact message that pops up in the alert window. -->
<a href="#"
data-confirm-message="Are you sure you want to remotely start the well?"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cmd_Start',1] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic pad15">
Start</a>
<!-- Two sets were occurring because you had both the confirmstatic and setstatic classes on the button. Use one or the other, but not both. -->
</div>
<div class='col-xs-6 text-center box-me'>
<a href="#"
data-confirm-message="Are you sure you want to remotely stop the well?"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cmd_Stop',1] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic pad15">
Stop</a>
</div>
</div>
<div class="row row-flex">
<div class="col-xs-12 text-center">
<h1>PID Settings</h1>
</div>
<div class="col-md-6 box-me" id="flowsetpoint">
<div class="pad15">
<h2>Flow Setpoint
<% if (channels["advvfdipp.pidcontrolmode"].value == "Flow"){ %>
<span class="label label-success">ACTIVE</span>
<% } %>
</h2>
<form class="form-inline">
<div class="form-group">
<input class="form-control val_box"
type="number"
step="any"
value="<%=channels['advvfdipp.flowsetpoint'].value %>">
</div>
<a href="#"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cfg_PID_FlowSP',<%=channels['advvfdipp.flowsetpoint'].value %>] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic">
<i class="material-icons">send</i></a>
</form>
<a href="#"
style="width:95%"
data-confirm-message="Are you sure you want to activate Flow Control Mode?"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cfg_PID_Flow',1] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic pad15">
Activate Flow Control</a>
</div>
</div>
<div class="col-md-6 box-me" id="fluidlevelsetpoint">
<div class="pad15">
<h2>Fluid Level Setpoint
<% if (channels["advvfdipp.pidcontrolmode"].value == "Fluid Level"){ %>
<span class="label label-success">ACTIVE</span>
<% } %>
</h2>
<form class="form-inline">
<div class="form-group">
<input class="form-control val_box"
type="number"
step="any"
value="<%=channels['advvfdipp.fluidlevelsetpoint'].value %>">
</div>
<a href="#"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cfg_PID_FluidLevelSP',<%=channels['advvfdipp.fluidlevelsetpoint'].value %>] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic">
<i class="material-icons">send</i></a>
</form>
<a href="#"
style="width:95%"
data-confirm-message="Are you sure you want to activate Fluid Level Control Mode?"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cfg_PID_FluidLevel',1] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic pad15">
Activate Fluid Level Control</a>
</div>
</div>
<div class="col-md-6 box-me" id="tubingpressuresetpoint">
<div class="pad15">
<h2>Tubing Pressure Setpoint
<% if (channels["advvfdipp.pidcontrolmode"].value == "Tubing Pressure"){ %>
<span class="label label-success">ACTIVE</span>
<% } %>
</h2>
<form class="form-inline">
<div class="form-group">
<input class="form-control val_box"
type="number"
step="any"
value="<%=channels['advvfdipp.tubingpressuresetpoint'].value %>">
</div>
<a href="#"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cfg_PID_TubingPressureSP',<%=channels['advvfdipp.tubingpressuresetpoint'].value %>] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic">
<i class="material-icons">send</i></a>
</form>
<a href="#"
style="width:95%"
data-confirm-message="Are you sure you want to activate Tubing Pressure Control Mode?"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cfg_PID_TubingPressure',1] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic pad15">
Activate Tubing Pressure Control</a>
</div>
</div>
<div class="col-md-6 box-me" id="manualfrequencysetpoint">
<div class="pad15">
<h2>Manual Frequency Setpoint
<% if (channels["advvfdipp.pidcontrolmode"].value == "Manual"){ %>
<span class="label label-success">ACTIVE</span>
<% } %>
</h2>
<form class="form-inline">
<div class="form-group">
<input class="form-control val_box"
type="number"
step="any"
value="<%=channels['advvfdipp.manualfrequencysetpoint'].value %>">
</div>
<a href="#"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cfg_PID_ManualFrequencySP',<%=channels['advvfdipp.manualfrequencysetpoint'].value %>] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic">
<i class="material-icons">send</i></a>
</form>
<a href="#"
style="width:95%"
data-confirm-message="Are you sure you want to activate Manual Control Mode?"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['cfg_PID_Manual',1] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic pad15">
Activate Manual Control</a>
</div>
</div>
</div>
<div class="row row-flex">
<div class='col-xs-6 text-center box-me'>
<h2>Pressure Settings</h2>
<div class="gauge-box">
<table class="table">
<tbody>
<tr>
<td>Shutdown Limit</td>
<td>
<form class="form-inline">
<div class="form-group">
<input class="form-control val_box"
type="number"
step="any"
value="<%=channels['advvfdipp.pressureshutdownlimit'].value %>">
</div>
<a href="#"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['AIn_IntakePressure.PSet_LoLim',<%=channels['advvfdipp.pressureshutdownlimit'].value %>] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic">
<i class="material-icons">send</i></a>
</form>
</td>
</tr>
<tr>
<td>Startup Limit</td>
<td>
<form class="form-inline">
<div class="form-group">
<input class="form-control val_box"
type="number"
step="any"
value="<%=channels['advvfdipp.pressurestartuplimit'].value %>">
</div>
<a href="#"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['AIn_IntakePressure.PSet_HiLim',<%=channels['advvfdipp.pressurestartuplimit'].value %>] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic">
<i class="material-icons">send</i></a>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='col-xs-6 text-center box-me'>
<h2>Temperature Settings</h2>
<div class="gauge-box">
<table class="table">
<tbody>
<tr>
<td>Shutdown Limit</td>
<td>
<form class="form-inline">
<div class="form-group">
<input class="form-control val_box"
type="number"
step="any"
value="<%=channels['advvfdipp.temperatureshutdownlimit'].value %>">
</div>
<a href="#"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['AIn_IntakeTemperature.PSet_HiLim',<%=channels['advvfdipp.temperatureshutdownlimit'].value %>] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic">
<i class="material-icons">send</i></a>
</form>
</td>
</tr>
<tr>
<td>Startup Limit</td>
<td>
<form class="form-inline">
<div class="form-group">
<input class="form-control val_box"
type="number"
step="any"
value="<%=channels['advvfdipp.temperaturestartuplimit'].value %>">
</div>
<a href="#"
data-refreshpause="3"
data-command=""
data-staticsend="[{'com':'1','values':[ ['AIn_IntakeTemperature.PSet_LoLim',<%=channels['advvfdipp.temperaturestartuplimit'].value %>] ] }]"
data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
class="btn btn-large btn-theme animated confirmstatic">
<i class="material-icons">send</i></a>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
$('#flowsetpoint .val_box').change(function(){
console.log(typeof $('#flowsetpoint .val_box').val());
$('#flowsetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_FlowSP'," + parseFloat($('#flowsetpoint .val_box').val()).toFixed(10) + "] ] }]");
$("#flowsetpoint .mbusbutton").removeClass('hidden');
console.log("New value for data-staticsend: " + "[{'com':'1','values':[ ['cfg_PID_FlowSP'," + $('#flowsetpoint .val_box').val() + "] ] }]");
});
$('#intakepressuresetpoint .val_box').change(function(){
$('#intakepressuresetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_IntakePressureSP'," + $('#intakepressuresetpoint .val_box').val().toString() + "] ] }]");
$("#intakepressuresetpoint .mbusbutton").removeClass('hidden');
console.log("New value for data-staticsend: " + "[{'com':'1','values':[ ['cfg_PID_IntakePressureSP'," + $('#intakepressuresetpoint .val_box').val() + "] ] }]");
});
$('#tubingpressuresetpoint .val_box').change(function(){
$('#tubingpressuresetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_TubingPressureSP'," + $('#tubingpressuresetpoint .val_box').val().toString() + "] ] }]");
$("#tubingpressuresetpoint .mbusbutton").removeClass('hidden');
console.log("New value for data-staticsend: " + "[{'com':'1','values':[ ['cfg_PID_TubingPressureSP'," + $('#tubingpressuresetpoint .val_box').val() + "] ] }]");
});
$('#manualfrequencysetpoint .val_box').change(function(){
$('#manualfrequencysetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_ManualSP'," + $('#manualfrequencysetpoint .val_box').val().toString() + "] ] }]");
$("#manualfrequencysetpoint .mbusbutton").removeClass('hidden');
console.log("New value for data-staticsend: " + "[{'com':'1','values':[ ['cfg_PID_ManualSP'," + $('#manualfrequencysetpoint .val_box').val() + "] ] }]");
});
</script>
<style>
.box-me {
position: relative;
padding: 0.5em;
padding-bottom: 1.5em;
border: 1px solid #eee;
/*margin: 1em 0;*/
}
.box-me .gauge-box {
margin-top: -0.25em;
}
.pad15 {
margin: 15px 15px;
}
.box-me h2 {
text-transform: uppercase;
font-size: 14px;
color: #666;
font-weight: 400;
letter-spacing: 1px;
z-index: 100;
}
.dynamic-chart-form {
background-color: whiteSmoke;
padding: 1em 0.5em;
margin-top: 1em;
}
.row-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
</style>