Solved Module undefined error (#1104)

* Resolve Module undefined  error

* Lower-case-hyphen module names

src/Modules.js

@@ -32,8 +32,8 @@ module.exports = {
   'ndvi': require('./modules/Ndvi'),
   'ndvi-colormap': require('./modules/NdviColormap'),
   'noise-reduction': require('./modules/NoiseReduction'),
-  'paint-bucket': require('./modules/PaintBucket'),
   'overlay': require('./modules/Overlay'),
+  'paint-bucket': require('./modules/PaintBucket'),
   'replace-color': require('./modules/ReplaceColor'),
   'resize': require('./modules/Resize'),
   'rotate': require('./modules/Rotate'),

src/modules/AddQR/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Add QR",
+    "name": "add-qr",
     "description": "Adds QR corresponding to the given string",
     "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
     "inputs": {

src/modules/Average/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Average",
+    "name": "average",
     "description": "Average all pixel color",
     "inputs": {
     },

src/modules/Blend/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Blend",
+  "name": "blend",
   "description": "Blend two chosen image steps with the given function. Defaults to using the red channel from image 1 and the green and blue and alpha channels of image 2. Easier to use interfaces coming soon!",
   "inputs": {
     "offset": {

src/modules/Blur/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Blur",
+    "name": "blur",
     "description": "Applies a Gaussian blur given by the intensity value",
     "inputs": {
         "blur": {

src/modules/Brightness/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Brightness",
+  "name": "brightness",
   "description": "Change the brightness of the image by given percent value",
   "inputs": {
       "brightness": {

src/modules/CanvasResize/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Resize Canvas",
+    "name": "canvas-resize",
     "description": "This module resizes the canvas and overlays the ouput of the previous step at given location",
     "inputs": {
         "width": {

src/modules/Channel/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Channel",
+  "name": "channel",
   "description": "Displays only one color channel of an image -- default is green",
   "inputs": {
     "channel": {

src/modules/ColorTemperature/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Color Temperature",
+    "name": "color-temperature",
     "description": "Changes the color temperature of the image.",
     "inputs": {
       "temperature": {

src/modules/Colorbar/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Colorbar",
+    "name": "colorbar",
     "description": "Generates a colorbar to lay over the image",
     "inputs": {
         "colormap": {

src/modules/Colormap/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Colormap",
+  "name": "colormap",
   "description": "Maps brightness values (average of red, green & blue) to a given color lookup table, made up of a set of one more color gradients.\n\nFor example, 'cooler' colors like blue could represent low values, while 'hot' colors like red could represent high values.",
   "inputs": {
     "colormap": {

src/modules/Contrast/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Contrast",
+    "name": "contrast",
     "description": "Change the contrast of the image by given value",
     "inputs": {
         "contrast": {

src/modules/Convolution/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Convolution",
+    "name": "convolution",
     "description": "Image Convolution using a given 3x3 kernel matrix <a href='https://en.wikipedia.org/wiki/Kernel_(image_processing)'>Read more</a>",
     "inputs": {
   		"constantFactor":{

src/modules/Crop/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Crop",
+  "name": "crop",
   "description": "Crop image to given x, y, w, h in pixels or % , measured from top left",
   "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
   "inputs": {

src/modules/DecodeQr/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Decode QR",
+  "name": "decode-qr",
   "description": "Search for and decode a QR code in the image",
   "inputs": {
   },

src/modules/Dither/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Dither",
+    "name": "dither",
     "description": "Approximates a color from a mixture of other colors when the required color is not available, creating illusions of the color that is not present actually.<a href='https://en.wikipedia.org/wiki/Dither'>Read more</a>",
     "inputs": {
       "dither": {

src/modules/DrawRectangle/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Draw Rectangle",
+    "name": "draw-rectangle",
     "description": "It draws a rectangle on the image",
     "inputs": {
   		"startingX":{

src/modules/Dynamic/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Dynamic",
+  "name": "dynamic",
   "description": "A module which accepts JavaScript math expressions to produce each color channel based on the original image's color. See <a href='https://publiclab.org/wiki/infragram-sandbox'>Infragrammar</a>.",
   "inputs": {
     "red": {

src/modules/EdgeDetect/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Detect Edges",
+    "name": "edge-detect",
     "description": "This module detects edges using the Canny method, which first Gaussian blurs the image to reduce noise (amount of blur configurable in settings as `options.blur`), then applies a number of steps to highlight edges, resulting in a greyscale image where the brighter the pixel, the stronger the detected edge.<a href='https://en.wikipedia.org/wiki/Canny_edge_detector'> Read more. </a>",
     "inputs": {
         "blur": {

src/modules/Exposure/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Exposure",
+  "name": "exposure",
   "description": "Change the exposure of the image by given exposure value",
   "inputs": {
       "exposure": {

src/modules/FisheyeGl/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Fisheye GL",
+  "name": "fisheye-gl",
   "description": "Correct fisheye, or barrel distortion, in images (with WebGL -- adapted from fisheye-correction-webgl by @bluemir).",
   "requires": [ "webgl" ],
   "inputs": {

src/modules/FlipImage/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Flip Image",
+  "name": "flip-image",
   "description": "Flip The Image On The Specified Axis.",
   "inputs": {
     "Axis": {

src/modules/GammaCorrection/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Gamma Correction",
+    "name": "gamma-correction",
     "description": "Apply gamma correction on the image <a href='https://en.wikipedia.org/wiki/Gamma_correction'>Read more</a>",
     "inputs": {
         "adjustment": {

src/modules/Gradient/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Gradient",
+    "name": "gradient",
     "description": "Gives a gradient of the image",
     "inputs": {},
     "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#gradient-module"

src/modules/GridOverlay/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "GridOverlay",
+    "name": "grid-overlay",
     "description": "Overlays a grid over an Image",
     "inputs": {
         "x": {

src/modules/Histogram/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Histogram",
+    "name": "histogram",
     "description": "Calculates the histogram for the image",
     "inputs": {
         "gradient": {

src/modules/ImportImage/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Import Image",
+  "name": "import-image",
   "description": "Import a new image and replace the original with it. Future versions may enable a blend mode. Specify an image by URL or by file selector.",
   "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
   "inputs": {

src/modules/Invert/Module.js

@@ -43,7 +43,7 @@ function Invert(options, UI) {
   };
 }
 var info = {
-  'name': 'Invert',
+  'name': 'invert',
   'description': 'Inverts the image.',
   'inputs': {
   }

src/modules/Invert/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Invert",
+  "name": "invert",
   "description": "Inverts the image.",
   "inputs": {
   },

src/modules/Ndvi/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "NDVI",
+  "name": "ndvi",
   "description": "Normalized Difference Vegetation Index, or NDVI, is an image analysis technique used with aerial photography. It's a way to visualize the amounts of infrared and other wavelengths of light reflected from vegetation by comparing ratios of blue and red light absorbed versus green and IR light reflected. NDVI is used to evaluate the health of vegetation in satellite imagery, where it correlates with how much photosynthesis is happening. This is helpful in assessing vegetative health or stress. <a href='https://publiclab.org/ndvi'>Read more</a>.<br /><br/>This is designed for use with red-filtered single camera <a href='http://publiclab.org/infragram'>DIY Infragram cameras</a>; change to 'blue' for blue filters",
   "inputs": {
     "filter": {

src/modules/NdviColormap/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "NDVI-Colormap",
+    "name": "ndvi-colormap",
     "description": "Sequentially Applies NDVI and Colormap steps",
     "inputs": {},
     "docs-link": "https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#ndvi-colormap-module"

src/modules/Overlay/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Overlay",
+    "name": "overlay",
     "description": "Overlays an Image over another at a given position(x,y) in pixels or in %",
     "inputs": {
         "x": {

src/modules/PaintBucket/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "PaintBucket",
+  "name": "paint-bucket",
   "description": "Fill color in pixels",
   "inputs": {
       "startingX": {

src/modules/ReplaceColor/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "ReplaceColor",
+    "name": "replace-color",
     "description": "Replace color with grey or your desired color",
     "inputs": {
       "replaceMethod": {

src/modules/Resize/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Resize",
+  "name": "resize",
   "description": "Resize image by given percentage value",
   "inputs": {
     "resize": {

src/modules/Rotate/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Rotate",
+    "name": "rotate",
     "description": "Rotates image by specified degrees",
     "inputs": {
       "rotate": {

src/modules/Saturation/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Saturation",
+    "name": "saturation",
     "description": "Change the saturation of the image by given value, from 0-1, with 1 being 100% saturated.",
     "inputs": {
         "saturation": {

src/modules/TextOverlay/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "Text-Overlay",
+    "name": "text-overlay",
     "description": "Overlay text on image.",
     "inputs": {
         "text": {

src/modules/Threshold/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Threshold",
+  "name": "threshold",
   "description": "Thresholding is used to create binary images",
   "inputs": {
     "threshold": {

src/modules/Tint/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Tint",
+  "name": "tint",
   "description": "Add color tint to an image",
   "inputs": {
       "color":{

src/modules/WebglDistort/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "WebGl Distort",
+    "name": "webgl-distort",
     "requires": [
         "webgl"
     ],

src/modules/WhiteBalance/info.json

@@ -1,5 +1,5 @@
 {
-    "name": "White Balance",
+    "name": "white-balance",
     "description": "Render neutral colours correctly based on the whitest pixel in the image.",
     "inputs": {
       "red": {