Adds trend screen, fixes alarms not staying active for duration of alarm, fixes state integer
This commit is contained in:
Patrick McDonagh
11655
Advanced_VFD_IPP.ACD
11655
Advanced_VFD_IPP.ACD
File diff suppressed because one or more lines are too long
@@ -2,7 +2,7 @@
|
||||
<div class="<%= nodecolors.statuscolor %> nodecolor"></div>
|
||||
</div>
|
||||
<div class='col-xs-6'>
|
||||
<h3><%= node.vanityname %>: <%=channels["advvfdipp.wellstatus"].value %></h3>
|
||||
<h3><%= node.vanityname %>: <span data-updatevalue="wellstatus"><%=channels["advvfdipp.wellstatus"].value %></span></h3>
|
||||
</div>
|
||||
<div class-"col-xs-2">
|
||||
<button href="#" data-channelId="<%= channels["advvfdipp.log"].channelId %>" class="data-table btn btn-theme" title="Device Log"><i style='margin-left: 0.5em; cursor: pointer' class="fa fa-th-list icon-theme"></i> Device Log</button>
|
||||
|
||||
140
POCloud/HTML/Overview.html
Normal file
140
POCloud/HTML/Overview.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<div class="row row-flex box-me">
|
||||
<div class='col-xs-12' id="systemStatusTimelineContainer">
|
||||
<h2>Well Status</h2>
|
||||
<div id="statusTimeline" data-chart="timeline" data-nodename="advvfdipp.wellstatus" data-daysofhistory="2" data-chartlabel="" data-xlabel='Date' data-colors="Running:#3AFF83,Pumped Off:#dbda35,Alarmed:#e9821b,Locked Out:#cd2f34,Stopped:#3699b4"></div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Fluid Level</h2>
|
||||
<div class="gauge-box" data-valueupdate="fluidlevel">
|
||||
<gauge type="angular" channel="fluidlevel" max="600" label="ft." classes="extra" height="250" />
|
||||
<span data-timeupdate="fluidlevel"><%= channels["advvfdipp.fluidlevel"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-fluidlevel" data-chart="chart" data-nodename1="advvfdipp.fluidlevel" data-datalabel1="Fluid Level" data-daysofhistory="2" data-chartlabel="Fluid Level" data-ylabel="" data-xlabel="Date" data-units=" ft"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Flow Rate</h2>
|
||||
<div class="gauge-box" data-valueupdate="flowrate">
|
||||
<gauge type="angular" channel="flowrate" max="400" label="GPM" classes="extra" height="250" />
|
||||
<span data-timeupdate="flowrate"><%= channels["advvfdipp.flowrate"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-flowrate" data-chart="chart" data-nodename1="advvfdipp.flowrate" data-datalabel1="Flow Rate" data-daysofhistory="2" data-chartlabel="Flow Rate" data-ylabel="" data-xlabel="Date" data-units=" GPM"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Downhole Pressure</h2>
|
||||
<div class="gauge-box" data-valueupdate="intakepressure">
|
||||
<gauge type="angular" channel="intakepressure" max="400" label="PSI" classes="extra" height="250" data-valueupdate="intakepressure" />
|
||||
<span data-timeupdate="intakepressure"><%= channels["advvfdipp.intakepressure"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-intakepressure" data-chart="chart" data-nodename1="advvfdipp.intakepressure" data-datalabel1="Downhole Pressure" data-daysofhistory="2" data-chartlabel="Intake Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Downhole Temperature</h2>
|
||||
<div class="gauge-box" data-valueupdate="intaketemperature">
|
||||
<gauge type="angular" channel="intaketemperature" max="300" label="deg F" classes="extra" height="250" />
|
||||
<span data-timeupdate="intaketemperature"><%= channels["advvfdipp.intaketemperature"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-intaketemperature" data-chart="chart" data-nodename1="advvfdipp.intaketemperature" data-datalabel1="Downhole Temperature" data-daysofhistory="2" data-chartlabel="Intake Temperature" data-ylabel="" data-xlabel="Date" data-units=" ° F"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Motor Current</h2>
|
||||
<div class="gauge-box" data-valueupdate="vfdcurrent">
|
||||
<gauge type="angular" channel="vfdcurrent" max="150" label="A" classes="extra" height="250" />
|
||||
<span data-timeupdate="vfdcurrent"><%= channels["advvfdipp.vfdcurrent"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-vfdcurrent" data-chart="chart" data-nodename1="advvfdipp.vfdcurrent" data-datalabel1="Motor Current" data-daysofhistory="2" data-chartlabel="Motor Current" data-ylabel="" data-xlabel="Date" data-units=" A"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Tubing Pressure</h2>
|
||||
<div class="gauge-box" data-valueupdate="tubingpressure">
|
||||
<gauge type="angular" channel="tubingpressure" max="400" label="PSI" classes="extra" height="250" />
|
||||
<span data-timeupdate="tubingpressure"><%= channels["advvfdipp.tubingpressure"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-tubingpressure" data-chart="chart" data-nodename1="advvfdipp.tubingpressure" data-datalabel1="Tubing Pressure" data-daysofhistory="2" data-chartlabel="Tubing Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
#systemStatusTimelineContainer h2 {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
27
POCloud/HTML/Trends.html
Normal file
27
POCloud/HTML/Trends.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<div class='col-xs-12' style="padding-top: 1em; margin-bottom: 1em;">
|
||||
<div class="input-daterange input-group" id="datepicker">
|
||||
<input data-chartid="dynamicChart" id="fromDate" data-daysofhistory="7" type="text" class="form-control" name="start">
|
||||
<span class="input-group-addon">to</span>
|
||||
<input class="form-control" data-chartid="dynamicChart" id="toDate" type="text" name="end">
|
||||
<span class='input-group-btn'>
|
||||
<a href="#!" data-chartid="dynamicChart" data-otherchartids="statusTimeline" class="btn chart-update btn-theme">Run</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class='clearfix col-xs-12' style='height: 450px' id="dynamicChart" data-chart="dynamicchart" data-daysofhistory="7" data-chartlabel="Data" data-ylabel="" data-xlabel="Date" data-units="" data-channelnames="advvfdipp.fluidlevel,advvfdipp.intakepressure,advvfdipp.intaketemperature,advvfdipp.tubingpressure,advvfdipp.vfdfrequency,advvfdipp.vfdcurrent,advvfdipp.flowrate,advvfdipp.flowtotal,advvfdipp.flowtotalyesterday,advvfdipp.energytotal,advvfdipp.energytotalyesterday"></div>
|
||||
<style>
|
||||
.dynamic-chart-form {
|
||||
background-color: whiteSmoke;
|
||||
padding: 1em 0.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
#systemStatusTimelineContainer h2 {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user