From 46783af1a0baa1c6634addab30dfdb2fdf5d3341 Mon Sep 17 00:00:00 2001
From: Patrick McDonagh <pmcdonagh@henry-pump.com>
Date: Mon, 3 Oct 2016 18:46:40 -0500
Subject: [PATCH] Completes IPP-166. Also converts overview screen to
 gauge-style

---
 POCloud/HTML/Configuration.html |  16 +-
 POCloud/HTML/Overview.html      |  23 ++-
 POCloud/HTML/newOverview.html   | 270 ++++++++++++++++++++++++++++++++
 3 files changed, 296 insertions(+), 13 deletions(-)
 create mode 100644 POCloud/HTML/newOverview.html

diff --git a/POCloud/HTML/Configuration.html b/POCloud/HTML/Configuration.html
index 4c2b8b9..c284075 100644
--- a/POCloud/HTML/Configuration.html
+++ b/POCloud/HTML/Configuration.html
@@ -84,10 +84,10 @@
         </div>
     </div>
 
-    <div class="col-md-6 box-me" id="intakepressuresetpoint">
+    <div class="col-md-6 box-me" id="fluidlevelsetpoint">
         <div class="pad15">
-            <h2>Intake Pressure Setpoint
-                <% if (channels["advvfdipp.pidcontrolmode"].value == "Intake Pressure"){ %>
+            <h2>Fluid Level Setpoint
+                <% if (channels["advvfdipp.pidcontrolmode"].value == "Fluid Level"){ %>
                     <span class="label label-success">ACTIVE</span>
                 <% } %>
             </h2>
@@ -96,12 +96,12 @@
                     <input class="form-control val_box"
                         type="number" 
                         step="any"
-                        value="<%=channels['advvfdipp.intakepressuresetpoint'].value %>">
+                        value="<%=channels['advvfdipp.fluidlevelsetpoint'].value %>">
                 </div>
                 <a href="#"
                     data-refreshpause="3"
                     data-command=""
-                    data-staticsend="[{'com':'1','values':[ ['cfg_PID_IntakePressureSP',<%=channels['advvfdipp.intakepressuresetpoint'].value %>] ] }]"
+                    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%>"
@@ -112,17 +112,17 @@
             </form>
             <a href="#"
                 style="width:95%"
-                data-confirm-message="Are you sure you want to activate Intake Pressure Control Mode?"
+                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_IntakePressure',1] ] }]"
+                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 Intake Pressure Control</a>
+                Activate Fluid Level Control</a>
         </div>
     </div>
 
diff --git a/POCloud/HTML/Overview.html b/POCloud/HTML/Overview.html
index a7e6be6..a7523cc 100644
--- a/POCloud/HTML/Overview.html
+++ b/POCloud/HTML/Overview.html
@@ -47,17 +47,18 @@
 
 <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>
+        <h2>Motor Frequency</h2>
+        <div class="gauge-box" data-valueupdate="vfdfrequency">
+            <gauge type="angular" channel="vfdfrequency" max="300" label="Hz" classes="extra" height="250" />
+            <span data-timeupdate="vfdfrequency"><%= channels["advvfdipp.vfdfrequency"].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=" &deg; F"></div>
+        <div style="height:300px" id="chart-vfdfrequency" data-chart="chart" data-nodename1="advvfdipp.vfdfrequency" data-datalabel1="Downhole Temperature" data-daysofhistory="2"  data-chartlabel="VFD Frequency" data-ylabel="" data-xlabel="Date" data-units=" Hz"></div>
     </div>
 </div>
 
+
 <div class='row row-flex box-me'>
     <div class='col-xs-4 text-center'>
         <h2>Motor Current</h2>
@@ -84,6 +85,18 @@
     </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=" &deg; F"></div>
+    </div>
+</div>
 
 
 
diff --git a/POCloud/HTML/newOverview.html b/POCloud/HTML/newOverview.html
new file mode 100644
index 0000000..a5f2905
--- /dev/null
+++ b/POCloud/HTML/newOverview.html
@@ -0,0 +1,270 @@
+<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 box-me'>
+        <h2>Fluid Level</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10" 
+                style="height: 170px; background: transparent; margin: 0 auto;" 
+                id="gauge-fluidlevel" 
+                data-chart="solidgauge"
+                data-nodename="advvfdipp.fluidlevel" 
+                data-units="ft." 
+                data-min="0" 
+                data-max="500" 
+                data-decimalplaces="2" 
+                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+                data-valuefontsize="18px">
+            </div>
+            <div class- "timestamp-box">
+                <a href="#" data-ChannelId="<%= channels['advvfdipp.fluidlevel'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="fluidlevel">
+            <%= channels["advvfdipp.fluidlevel"].timestamp %>
+        </span>
+        </div>
+    </div>
+
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Flow Rate</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10" 
+                style="height: 170px; background: transparent; margin: 0 auto;" 
+                id="gauge-flowrate" 
+                data-chart="solidgauge"
+                data-nodename="advvfdipp.flowrate" 
+                data-units="GPM" 
+                data-min="0" 
+                data-max="250" 
+                data-decimalplaces="2" 
+                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+                data-valuefontsize="18px">
+            </div>
+            <div class- "timestamp-box">
+                <a href="#" data-ChannelId="<%= channels['advvfdipp.flowrate'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="flowrate">
+            <%= channels["advvfdipp.flowrate"].timestamp %>
+        </span>
+        </div>
+    </div>
+
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Intake Pressure</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10" 
+                style="height: 170px; background: transparent; margin: 0 auto;" 
+                id="gauge-intakepressure" 
+                data-chart="solidgauge"
+                data-nodename="advvfdipp.intakepressure" 
+                data-units="PSI" 
+                data-min="0" 
+                data-max="500" 
+                data-decimalplaces="1" 
+                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+                data-valuefontsize="18px">
+            </div>
+            <div class- "timestamp-box">
+                <a href="#" data-ChannelId="<%= channels['advvfdipp.intakepressure'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="intakepressure">
+            <%= channels["advvfdipp.intakepressure"].timestamp %>
+        </span>
+        </div>
+    </div>
+
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Motor Frequency</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10" 
+                style="height: 170px; background: transparent; margin: 0 auto;" 
+                id="gauge-vfdfrequency" 
+                data-chart="solidgauge"
+                data-nodename="advvfdipp.vfdfrequency" 
+                data-units="Hz" 
+                data-min="0" 
+                data-max="75" 
+                data-decimalplaces="2" 
+                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+                data-valuefontsize="18px">
+            </div>
+            <div class- "timestamp-box">
+                <a href="#" data-ChannelId="<%= channels['advvfdipp.vfdfrequency'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="vfdfrequency">
+            <%= channels["advvfdipp.vfdfrequency"].timestamp %>
+        </span>
+        </div>
+    </div>
+
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Motor Current</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10" 
+                style="height: 170px; background: transparent; margin: 0 auto;" 
+                id="gauge-vfdcurrent" 
+                data-chart="solidgauge"
+                data-nodename="advvfdipp.vfdcurrent" 
+                data-units="A" 
+                data-min="0" 
+                data-max="100" 
+                data-decimalplaces="2" 
+                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+                data-valuefontsize="18px">
+            </div>
+            <div class- "timestamp-box">
+                <a href="#" data-ChannelId="<%= channels['advvfdipp.vfdcurrent'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="vfdcurrent">
+            <%= channels["advvfdipp.vfdcurrent"].timestamp %>
+        </span>
+        </div>
+    </div>
+
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Tubing Pressure</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10" 
+                style="height: 170px; background: transparent; margin: 0 auto;" 
+                id="gauge-tubingpressure" 
+                data-chart="solidgauge"
+                data-nodename="advvfdipp.tubingpressure" 
+                data-units="PSI" 
+                data-min="0" 
+                data-max="250" 
+                data-decimalplaces="2" 
+                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+                data-valuefontsize="18px">
+            </div>
+            <div class- "timestamp-box">
+                <a href="#" data-ChannelId="<%= channels['advvfdipp.tubingpressure'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="tubingpressure">
+            <%= channels["advvfdipp.tubingpressure"].timestamp %>
+        </span>
+        </div>
+    </div>
+
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Intake Temperature</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10" 
+                style="height: 170px; background: transparent; margin: 0 auto;" 
+                id="gauge-intaketemperature" 
+                data-chart="solidgauge"
+                data-nodename="advvfdipp.intaketemperature" 
+                data-units="&deg F" 
+                data-min="0" 
+                data-max="200" 
+                data-decimalplaces="1" 
+                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+                data-valuefontsize="18px">
+            </div>
+            <div class- "timestamp-box">
+                <a href="#" data-ChannelId="<%= channels['advvfdipp.intaketemperature'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="intaketemperature">
+            <%= channels["advvfdipp.intaketemperature"].timestamp %>
+        </span>
+        </div>
+    </div>
+</div>
+<div class="row box-me">
+    <div class='col-xs-12'>
+        <div style="height:300px"
+            id="chart-overview" 
+            data-chart="chart" 
+            data-nodename1="advvfdipp.fluidlevel" 
+            data-datalabel1="Fluid Level" 
+            data-nodename2="advvfdipp.flowrate" 
+            data-datalabel2="Flow Rate" 
+            data-nodename3="advvfdipp.vfdcurrent" 
+            data-datalabel3="Motor Current" 
+            data-nodename4="advvfdipp.vfdfrequency" 
+            data-datalabel4="Motor Frequency" 
+            data-daysofhistory="2"  
+            data-chartlabel="Last 48 Hours" 
+            data-ylabel="" 
+            data-xlabel="Date" 
+            data-units=""></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>
\ No newline at end of file