Work on IPP-141, adding code to write to PLC from POCloud

POCloud/HTML/Configuration.html

@@ -0,0 +1,189 @@
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<div class="text-center"><h1>CONTROL</h1></div>
+<div class="row row-flex">
+    <div class='col-xs-6 text-center box-me'>
+        <a href="#"
+            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 setstatic pad15">
+            Start</a>
+    </div>
+    <div class='col-xs-6 text-center box-me'>
+        <a href="#"
+            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 setstatic pad15">
+            Stop</a>
+
+    </div>
+</div>
+
+<div class="row row-flex">
+    <div class="col-md-4 box-me" id="flowsetpoint">
+        <div class="pad15">
+            <h3>Flow Setpoint</h3>
+            <div class="input-group">
+                <input class="form-control val_box"
+                    data-channelId='<%= channels["advvfdipp.flowsetpoint"].channelId %>'
+                    data-techName='<%=channels["advvfdipp.flowsetpoint"].techName %>'
+                    data-name='<%= channels["advvfdipp.flowsetpoint"].name %>'
+                    data-val="<%=channels["advvfdipp.flowsetpoint"].value %>"
+                    type="number" step="any"
+                    value="<%=channels["advvfdipp.flowsetpoint"].value %>">
+                <span class="input-group-btn hidden sendbutton">
+                    <button href="#"
+                        type="button"
+                        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 %>"
+                        class="btn btn-theme animated confirmstatic setstatic mbusbutton">
+                        <i class="material-icons">send</i></button>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-md-4 box-me" id="intakepressuresetpoint">
+        <div class="pad15">
+            <h3>Intake Pressure Setpoint</h3>
+            <div class="input-group">
+                <input class="form-control val_box"
+                    data-channelId='<%= channels["advvfdipp.intakepressuresetpoint"].channelId %>'
+                    data-techName='<%=channels["advvfdipp.intakepressuresetpoint"].techName %>'
+                    data-name='<%= channels["advvfdipp.intakepressuresetpoint"].name %>'
+                    data-val="<%=channels["advvfdipp.intakepressuresetpoint"].value %>"
+                    type="number" step="any"
+                    value="<%=channels["advvfdipp.intakepressuresetpoint"].value %>">
+                <span class="input-group-btn hidden sendbutton">
+                    <button href="#"
+                        type="button"
+                        data-refreshpause="3"
+                        data-command=""
+                        data-staticsend="[{'com':'1','values':[ ['cfg_PID_IntakePressureSP',<%=channels["advvfdipp.intakepressuresetpoint"].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 %>"
+                        class="btn btn-theme animated confirmstatic setstatic mbusbutton">
+                        <i class="material-icons">send</i></button>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-md-4 box-me" id="tubingpressuresetpoint">
+        <div class="pad15">
+            <h3>Tubing Pressure Setpoint</h3>
+            <div class="input-group">
+                <input class="form-control val_box"
+                    data-channelId='<%= channels["advvfdipp.tubingpressuresetpoint"].channelId %>'
+                    data-techName='<%=channels["advvfdipp.tubingpressuresetpoint"].techName %>'
+                    data-name='<%= channels["advvfdipp.tubingpressuresetpoint"].name %>'
+                    data-val="<%=channels["advvfdipp.tubingpressuresetpoint"].value %>"
+                    type="number" step="any"
+                    value="<%=channels["advvfdipp.tubingpressuresetpoint"].value %>">
+                <span class="input-group-btn hidden sendbutton">
+                    <button href="#"
+                        type="button"
+                        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 %>"
+                        class="btn btn-theme animated confirmstatic setstatic mbusbutton">
+                        <i class="material-icons">send</i></button>
+                </span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    $('#flowsetpoint .val_box').change(function(){
+        $('#flowsetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_FlowSP'," + $('#flowsetpoint .val_box').val() + "] ] }]");
+        $("#flowsetpoint .sendbutton").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() + "] ] }]");
+        $("#intakepressuresetpoint .sendbutton").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() + "] ] }]");
+        $("#tubingpressuresetpoint .sendbutton").removeClass('hidden');
+        console.log("New value for data-staticsend: " + "[{'com':'1','values':[ ['cfg_PID_TubingPressureSP'," + $('#tubingpressuresetpoint .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;
+}
+
+#systemStatusTimelineContainer h2 {
+    text-transform: uppercase;
+    font-size: 14px;
+    color: #666;
+    font-weight: 400;
+    letter-spacing: 1px;
+    z-index: 100;
+}
+</style>