Basic PID gui

js/programmingPid.js

@@ -76,5 +76,140 @@ let ProgrammingPid = function (enabled, setpointType, setpointValue, measurement
         gainFF = data;
     };
 
+    self.onEnabledChange = function (event) {
+        let $cT = $(event.currentTarget);
+        self.setEnabled(!!$cT.prop('checked'));
+    };
+
+    self.onGainPChange = function (event) {
+        let $cT = $(event.currentTarget);
+        self.setGainP($cT.val());
+    };
+
+    self.onGainIChange = function (event) {
+        let $cT = $(event.currentTarget);
+        self.setGainI($cT.val());
+    };
+
+    self.onGainDChange = function (event) {
+        let $cT = $(event.currentTarget);
+        self.setGainD($cT.val());
+    };
+
+    self.onGainFFChange = function (event) {
+        let $cT = $(event.currentTarget);
+        self.setGainFF($cT.val());
+    };
+
+    self.onOperatorValueChange = function (event) {
+        let $cT = $(event.currentTarget),
+            operand = $cT.data("operand");
+
+        if (operand == 0) {
+            self.setSetpointValue($cT.val());
+        } else {
+            self.setMeasurementValue($cT.val());
+        }
+    };
+
+    self.render = function (index, $container) {
+
+        $container.find('tbody').append('<tr>\
+                <td class="pid_cell__index"></td>\
+                <td class="pid_cell__enabled"></td>\
+                <td class="pid_cell__setpoint"></td>\
+                <td class="pid_cell__measurement"></td>\
+                <td class="pid_cell__p"></td>\
+                <td class="pid_cell__i"></td>\
+                <td class="pid_cell__d"></td>\
+                <td class="pid_cell__ff"></td>\
+                <td class="pid_cell__output"></td>\
+            </tr>\
+        ');
+
+        $row = $container.find('tr:last');
+
+        $row.find('.pid_cell__index').html(index);
+        $row.find('.pid_cell__enabled').html("<input type='checkbox' class='toggle logic_element__enabled' />");
+        $row.find('.logic_element__enabled').
+            prop('checked', self.getEnabled()).
+            change(self.onEnabledChange);
+
+        self.renderOperand(0);
+        self.renderOperand(1);
+
+        $row.find(".pid_cell__p").html('<input type="number" class="pid_cell__p-gain" step="1" min="0" max="32767" value="0">');
+        $row.find(".pid_cell__p-gain").val(self.getGainP()).change(self.onGainPChange);
+
+        $row.find(".pid_cell__i").html('<input type="number" class="pid_cell__i-gain" step="1" min="0" max="32767" value="0">');
+        $row.find(".pid_cell__i-gain").val(self.getGainI()).change(self.onGainIChange);
+
+        $row.find(".pid_cell__d").html('<input type="number" class="pid_cell__d-gain" step="1" min="0" max="32767" value="0">');
+        $row.find(".pid_cell__d-gain").val(self.getGainD()).change(self.onGainDChange);
+
+        $row.find(".pid_cell__ff").html('<input type="number" class="pid_cell__ff-gain" step="1" min="0" max="32767" value="0">');
+        $row.find(".pid_cell__ff-gain").val(self.getGainFF()).change(self.onGainFFChange);
+
+    }
+
+    self.onOperatorTypeChange = function (event) {
+        let $cT = $(event.currentTarget),
+            operand = $cT.data("operand"),
+            $container = $cT.parent(),
+            operandMetadata = FC.getOperandTypes()[$cT.val()];
+
+        if (operand == 0) {
+            self.setSetpointType($cT.val());
+            self.setSetpointValue(operandMetadata.default);
+        } else {
+            self.setMeasurementType($cT.val());
+            self.setMeasurementValue(operandMetadata.default);
+        }
+
+        GUI.renderOperandValue($container, operandMetadata, operand, operandMetadata.default, self.onOperatorValueChange);
+    };
+
+    self.renderOperand = function (operand) {
+        let type, value, $container;
+        if (operand == 0) {
+            type = setpointType;
+            value = setpointValue;
+            $container = $row.find('.pid_cell__setpoint');
+        } else {
+            type = measurementType;
+            value = measurementValue;
+            $container = $row.find('.pid_cell__measurement');
+        }
+
+        $container.html('');
+            
+        $container.append('<select class="logic_element__operand--type" data-operand="' + operand + '"></select>');
+        let $t = $container.find('.logic_element__operand--type');
+
+        for (let k in FC.getOperandTypes()) {
+            if (FC.getOperandTypes().hasOwnProperty(k)) {
+                let op = FC.getOperandTypes()[k];
+                
+                if (type == k) {
+                    $t.append('<option value="' + k + '" selected>' + op.name + '</option>');
+
+                    /* 
+                    * Render value element depending on type
+                    */
+                    GUI.renderOperandValue($container, op, operand, value, self.onOperatorValueChange);
+
+                } else {
+                    $t.append('<option value="' + k + '">' + op.name + '</option>');
+                }
+            }
+        }
+
+        /*
+        * Bind events
+        */
+        $t.change(self.onOperatorTypeChange);
+
+    }
+
     return self;
 };