Html type in info files

CONTRIBUTING.md

@@ -191,33 +191,240 @@ All module folders must have an `info.json` file which looks like the following:
   "url": "Optional link to module's source code or documentation",
   "inputs": {
     "var1": {
-      "type": "text",
-      "default": "default value"
+      "type": "string",
+      "default": "default value",
+      "htmlType":
+      {
+        "type": "text",
+      }
     }
   },
   "outputs": {
     "out1": {
-      "type": "text"
+      "type": "integer",
+      "htmlType":
+      {
+        "type": "text"
+      }
+    }
+  }
+}
+```
+
+#### Contains:
+- `name`
+- `description`
+- `url` (optional)
+- `inputs`
+- `outputs`
+
+##### `name`(*string*)(required):
+The name of the module
+
+e.g:
+```json
+  {
+    "name": "Average"
+  }
+```
+
+##### `description`(*string*)(required):
+Description for the module
+
+e.g:
+```json
+  {
+    "name": "Average",
+    "description": "Average all pixel color",
+  }
+```
+
+##### `url`(*string*)(optional):
+URL linking to docs for the module in `docs/MOULES.md`
+
+e.g:
+```json
+  {
+    "name": "Brightness",
+    "url": "https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+  }
+```
+
+##### `inputs`(*object*)(optional):
+Contains objects with keys equal to the input names.
+
+Each object has:
+- `type`
+- `desc`
+- `default`
+- `htmlType`
+
+e.g:
+```json
+{
+  "inputs":
+  {
+    "input1":
+    {
+      "type": "string",
+      "htmlType":
+      {
+        "type": "text"
+      }
     }
   }
 }
 ```
 
-Types may be one of "text", "integer", "float", "select".
-Integer and Float types should also specify minimum and maximum values like this:
+######  `type`(*string*)(required) 
+May be one of `integer`, `float`, `percentage`, `string`, `PATH`, `URL`, `select` etc.
+
+```json
+{
+  "var1": {
+    "type": "percentage",
+  }
+}
+```
+
+######  `desc`(*string*)(required) 
+Description for the input.
+
+```json
+{
+  "var1": {
+    "type": "percentage",
+    "desc": "Module Description"
+  }
+}
+```
+
+###### `default`(*string*|*number*)(required)
+Default value for the input.
+
+e.g:
+```json
+{
+  "type": "text",
+  "default": "default value"
+}
+```
+
+###### `htmlType`(*object*)(required)
+Can contain:
+- `type`
+- `step`
+- `values`
+- `placeholder`
+- `min` (optional*)
+- `max` (optional*)
 
+e.g:
 ```json
-"var1": {
-  "type": "integer",
+{
+  "htmlType":
+  {
+    "type": "range",
+    "min": 0,
+    "max": 1,
+    "step": 0.1,
+  }
+}
+```
+
+###### `type`(*string*)(required)
+Any valid html type. Can be `range`, `select`, `number`, `text`.
+
+e.g:
+```json
+{
+  "type": "text"
+}
+```
+
+###### `step`(*number*)(optional)
+Step value for `range` type inputs. Defaults to `1` for `range` type inputs.
+
+e.g:
+```json
+{
+  "type": "range",
   "min": 0,
-  "max": 4,
-  "default": 1
+  "max": 1,
+  "step": 0.1
 }
 ```
 
-Similarly, "Select" type inputs should have a `values` array.
+###### `values`(*array*)(optional*)
+Array of string values for `select` type inputs. Required for `select` type inputs.
+
+e.g:
+```json
+{
+  "type": "select",
+  "values": ["val1", "val2", "val3"]
+}
+```
+
+###### `placeholder`(*string*)(optional)
+A placeholder for the input.
+
+e.g:
+```json
+{
+  "type": "text",
+  "placeholder": "example placeholder"
+}
+```
+
+###### `min`(*number*)(optional*)
+Minimum value for `range` type inputs. Required for `range` type inputs.
+
+e.g:
+```json
+{
+  "type": "range",
+  "min": 0,
+  "max": 1
+}
+```
+
+###### `max`(*number*)(optional*)
+Maximum value for `range` htmlType inputs. Required for `range` type inputs.
+
+e.g:
+```json
+{
+  "type": "range",
+  "min": 0,
+  "max": 1
+}
+```
+
+##### `outputs`(*object*)(optional):
+Contains objects with keys equal to the output names. Similar to the inputs object.
+
+Each object has:
+- `type`
+- `desc`
+- `htmlType`
+
+e.g:
+```json
+{
+  "outputs":
+  {
+    "output1":{
+      "type": "string",
+      "htmlType":
+      {
+        "type": "text"
+      }
+    }
+  }
+}
+```
 
-Also, A module may have output values. These must be defined as shown above.
 
 ### Progress reporting
 

dist/image-sequencer-ui.js

@@ -155,8 +155,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
     <div class="row step">\
     <form class="input-form">\
     <div class="col-md-4 details">\
-    <h3>' +step.name + 
-    ' <span class="toggle"><i class="fa fa-caret-up" aria-hidden="true"></i></span>' +
+    <h3>\
+    <span class="toggle">'+step.name+' <i class="fa fa-caret-down" aria-hidden="true"></i></span>' +
       '</h3><div class="collapse"><p><i>"'+
       (step.description || "") +
       '</i></p></div>\
@@ -200,32 +200,32 @@ function DefaultHtmlStepUi(_sequencer, options) {
         var inputDesc = isInput ? inputs[paramName] : {};
         if (!isInput) {
           html += '<span class="output"></span>';
-        } else if (inputDesc.type.toLowerCase() == "select") {
+        } else if (inputDesc.htmlType.type.toLowerCase() == "select") {
           html += '<select class="form-control target" name="' + paramName + '">';
-          for (var option in inputDesc.values) {
-            html += "<option>" + inputDesc.values[option] + "</option>";
+          for (var option in inputDesc.htmlType.values) {
+            html += "<option>" + inputDesc.htmlType.values[option] + "</option>";
           }
           html += "</select>";
         } else {
           let paramVal = step.options[paramName] || inputDesc.default;
-          html =
+            html += 
             '<input class="form-control target" type="' +
-            inputDesc.type +
+            inputDesc.htmlType.type +
             '" name="' +
             paramName +
             '" value="' +
             paramVal +
             '" placeholder ="' +
-            (inputDesc.placeholder || "");
+            (inputDesc.htmlType.placeholder || "");
 
-          if (inputDesc.type.toLowerCase() == "range") {
+          if (inputDesc.htmlType.type.toLowerCase() == "range") {
             html +=
               '"min="' +
-              inputDesc.min +
+              inputDesc.htmlType.min +
               '"max="' +
-              inputDesc.max +
+              inputDesc.htmlType.max +
               '"step="' +
-              inputDesc.step + '">' + '<span>' + paramVal + '</span>';
+              (inputDesc.htmlType.step ? inputDesc.htmlType.step : '1') + '">' + '<span>' + paramVal + '</span>';
 
           }
           else html += '">';
@@ -278,17 +278,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $("#load-image").append(step.ui);
     }
     $(step.ui.querySelector(".toggle")).on("click", (e) => {
-      var className = e.target.className;
-      console.log("ele "+element)
-      if(className=="fa fa-caret-up"){
-        $(step.ui.querySelectorAll(".collapse")).show();
-        e.target.className="fa fa-caret-down";
+      if ($(e.target).hasClass('fa')){
+        $(e.target).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
       }
-      else{ 
-        $(step.ui.querySelectorAll(".collapse")).hide();
-        //e.target.localName.toggleClass('fa-caret-up');
-        e.target.className="fa fa-caret-up";
+      else {
+        $(e.target.querySelector('.fa')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
       }
+      $(step.ui.querySelectorAll('.collapse')).collapse('toggle');
     });
 
 
@@ -385,11 +381,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       var outputs = _sequencer.modulesInfo(step.name).outputs;
       for (var i in inputs) {
         if (step.options[i] !== undefined) {
-          if (inputs[i].type.toLowerCase() === "input")
-            $(step.ui.querySelector('div[name="' + i + '"] input'))
-              .val(step.options[i])
-              .data('initValue', step.options[i]);
-          if (inputs[i].type.toLowerCase() === "select")
+          if (inputs[i].htmlType.type.toLowerCase() === "select")
             $(step.ui.querySelector('div[name="' + i + '"] select'))
               .val(step.options[i])
               .data('initValue', step.options[i]);