mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-11 19:00:00 +01:00
Update CONTRIBUTING.md
This commit is contained in:
Jeffrey Warren
GitHub
139
CONTRIBUTING.md
139
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/?
|
||||
Reference in New Issue
Block a user