diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 80d25c6e..38a07e9d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,9 +12,22 @@ Most contribution (we imagine) would be in the form of API-compatible modules, w * [Info File](#info-file) * [Ideas](#ideas) + +## Contribution ideas + +See [this issue](https://github.com/publiclab/image-sequencer/issues/118) for a range of ideas for new contributions, and links to possibly helpful libraries. Also see the [new features issues list](https://github.com/publiclab/image-sequencer/labels/new-feature). + +### Bugs + +If you find a bug please list it here, and help us develop Image Sequencer by [opening an issue](https://github.com/publiclab/image-sequencer/issues/new)! + +**** + ## Contributing modules -Any module must look like this : +Most contributions can happen in modules, rather than to core library code. Modules and their [corresponding info files](#info-file) are included into the library in this file: https://github.com/publiclab/image-sequencer/blob/master/src/Modules.js#L5-L7 + +Any module must follow this basic format: ```js module.exports = function ModuleName(options,UI) { @@ -78,7 +91,7 @@ to set `this.output` to an object similar to what the input object was, call ### UI Methods -The module is responsible to emit various events for the UI to capture. There are +The module is responsible for emitting various events for the UI to capture. There are four events in all: * `UI.onSetup(options.step)` must be emitted when the module is added. So it must be emitted outside the draw method's definition as shown above. @@ -110,6 +123,8 @@ All module folders must have an `info.json` file which looks like the following: ```json { "name": "Name of Module to be displayed", + "description": "Optional longer text explanation of the module's function", + "url": "Optional link to module's source code or documentation", "inputs": { "var1": { "type": "text", @@ -144,122 +159,6 @@ Also, A module may have output values. These must be defined as shown above. See existing module `green-channel` for an example: https://github.com/publiclab/image-sequencer/tree/master/src/modules/GreenChannel/Module.js +The `green-channel` module is included into the core modules here: https://github.com/publiclab/image-sequencer/blob/master/src/Modules.js#L5-L7 + For help integrating, please open an issue. - -## Ideas - -Notes on development next steps: - -### UI - -* [ ] spinners before panels are complete -* [ ] click to expand for all images - -### Modules - -* [ ] remotely includable modules, not compiled in -- see plugin structures in other libs -* [ ] `sequencer.addModule('path/to/module.js')` style module addition -- also to avoid browserifying all of Plotly :-P - -### Core Functionality - -* [ ] allow passing data as data-uri or Image object, or stream, or ndarray or ImageData array, if both of neighboring pair has ability? -* [ ] (for node-and-line style UIs) non-linear sequences with Y-splitters - -### Testing - -* [ ] comparisons with diff -* [ ] testing a module's promised functionality: each module could offer before/after images as part of their API; by running the module on the before image, you should get exactly the after image, comparing with an image diff - -### Use cases - -* [ ] make an Infragram module that accepts a math expression - -### Bugs - -If you find a bug please list it here, and help us develop Image Sequencer by opening an issue! - -## Module Candidates, related Ideas - -* https://github.com/linuxenko/rextract.js -* https://www.npmjs.com/package/histogram -* https://github.com/hughsk/flood-fill -* https://github.com/yahoo/pngjs-image has lots of useful general-purpose image getters like `image.getLuminosityAtIndex(idx)` -* some way to add in a new image (respecting alpha) -- `add-image` (with blend mode, default `normal`?) -* https://github.com/yuta1984/CannyJS - edge detection -* http://codepen.io/taylorcoffelt/pen/EsCcr - more edge detection -* https://github.com/jywarren/webgl-distort/ - an image distortion module -* https://github.com/jadnco/whirl - scrubbable image sequence player -* non graphics card GL functions could be shimmed with https://github.com/Overv/JSGL -* or this: https://github.com/stackgl/headless-gl -* https://github.com/mattdesl/fontpath-simple-renderer - -### Referencing earlier states - -Complex sequences with masking could require accessing previous states (or nonlinearity): - -* flood-fill an area -* select only the flooded area - * roundabout: lighten everything to <50%, then flood-fill with black? Not 100% reliable. - * roundabout 2: `flood fill`, then `blink-diff` with original -* then add step which recovers original image, repeat `flood-fill`/`blink-diff` for second region -* reference above masked states in a `mask` module, with `maskModule.draw(image, { getMask: function() { return maskImg } })` - -**Notes:** - -`pattern-fill` module to use patterns in JS canvas: - -```js -var c=document.getElementById("myCanvas"); -var ctx=c.getContext("2d"); -var img=document.getElementById("lamp"); -var pat=ctx.createPattern(img,"repeat"); -ctx.rect(0,0,150,100); -ctx.fillStyle=pat; -ctx.fill(); -``` - -Masking: - -```js -ctx.save(); -ctx.beginPath(); -ctx.moveTo(0, 0); -ctx.lineTo(160, 600); -ctx.rect(0, 0, 160, 600); -ctx.closePath(); -ctx.clip(); -ctx.drawImage(img, 0, 0); -ctx.restore(); -``` - -**** - -## UI notes: - -* visual nodes-and-lines UI: https://github.com/flowhub/the-graph - * https://flowhub.github.io/the-graph/examples/demo-simple.html - -```js - -settings: { - 'threshold': { - type: 'slider', - label: 'Threshold', - default: 50, - min: 0, - max: 100 - }, - 'colors': { - type: 'select', - label: 'Colors', - options: [ - { name: '0', value: '0', default: true }, - { name: '1', value: '1' }, - { name: '2', value: '2' } - ] - } -} - -``` - -Possible web-based commandline interface: https://hyper.is/? \ No newline at end of file