Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

implement importNewModule #294

Merged
merged 11 commits into from
Jul 18, 2018
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 62 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Any module must follow this basic format:
module.exports = function ModuleName(options,UI) {

var output;
// Module requirements have bbeen simplified in version 3, see https://github.com/publiclab/image-sequencer/blob/master/CONTRIBUTING.md#contributing-modules
// Module requirements have been simplified in version 3, see https://github.com/publiclab/image-sequencer/blob/master/CONTRIBUTING.md#contributing-modules

function draw(input,callback) {

Expand All @@ -58,6 +58,57 @@ module.exports = function ModuleName(options,UI) {
}
```

Image Sequencer is designed to be run either in the browser or in a Node.js environment. For dynamically loaded modules, that means that any uses of `require()` to include an external library must be compiled using a system like `browserify` or `webpack` to ensure browser compatibility. An example of this can be found here:

https://github.com/tech4gt/image-sequencer
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh wait, shouldn't this be not image-sequencer but a specific module?


If you wish to offer a module without browser-compatibility, please indicate this in the returned `info` object as:

module.exports = [
ModuleName,
{ only: ['node'] }
];

If you believe that full cross-compatibility is possible, but need help, please open an issue on your module's issue tracker requesting assistance (and potentially link to it from an inline comment or the module description).

Any Independent Module Must follow this basic format
```js
function ModuleName(options,UI) {

var output;

function draw(input,callback) {

var output = function(input){
/* do something with the input */
return input;
}

this.output = output(input); // run the output and assign it to this.output
callback();
}

return {
options: options,
draw: draw,
output: output,
UI: UI
};
}

module.exports = [ModuleName,{
"name": "ModuleName",
"description": "",
"inputs": {
// inputs here
}
/* Info can be defined here or imported from a json file */
// require('./info.json') This only works in node
// In a module compiled with browserify or webpack, a require() can be used to
// load a standard info.json file.
];
```


### options

Expand All @@ -79,9 +130,18 @@ The `draw` method should accept an `input` parameter, which will be an object of
```js
input = {
src: "datauri of an image here",
format: "jpeg/png/etc"
format: "jpeg/png/etc",
// utility functions
getPixels: "function to get Image pixels. Wrapper around https://npmjs.com/get-pixels",
savePixels: "function to save Image pixels. Wrapper around https://npmjs.com/save-pixels",
lodash: "wrapper around lodash library, https://github.com/lodash",
dataUriToBuffer: "wrapper around https://www.npmjs.com/package/data-uri-to-buffer",
pixelManipulation: "general purpose pixel manipulation API, see https://github.com/publiclab/image-sequencer/blob/master/src/modules/_nomodule/PixelManipulation.js"
}
```
For example usage for pixelManipulation see https://github.com/publiclab/image-sequencer/blob/master/src/modules/Invert/Module.js

**The module is included in the browser inside a script tag and since the code runs directly in the browser if any other module is required apart from the apis available on the input object, it should be either bundled with the module code and imported in es6 format or the module code must be browserified before distribution for browser**

The draw method is run every time the step is `run` using `sequencer.run()`.
So any calculations must go **into** the `draw()` method's definition.
Expand Down
2 changes: 1 addition & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ module.exports = function (grunt) {
livereload: true
},
source: {
files: ["src/*.js", "src/*/*.js", "src/*/*/*.js", "Gruntfile.js"],
files: ["src/**/*", "Gruntfile.js"],
tasks: ["build:js"]
}
},
Expand Down
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -277,8 +277,18 @@ sequencer.insertSteps(index,module_name,optional_options);

return value: **`sequencer`** (To allow method chaining)

### Importing an independent module

The `loadNewModule` method can be used to import a new module inside sequencer. Modules can be downloaded via npm, yarn or cdn and are imported with a custom name. If you wish to load a new module at runtime, it will need to avoid usingrequire()-- unless it is compiled with a system like browserify or webpack.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small typo here -- usingrequire - and it can be great to use ` characters as you did with loadNewModule, right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!!


```js
const module = require('sequencer-moduleName')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should note if this is not usable in the browser.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and how to do it in a different way if you are in the browser, or what alternatives are?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So maybe a comment on this line about the require() usage?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so adding If you wish to load a new module at runtime, it will need to avoid using require() -- unless it is compiled with a system like browserify or webpack.

sequencer.loadNewModule('moduleName',module);
```


## Method Chaining

Methods can be chained on the Image Sequencer:
* loadImage()/loadImages() can only terminate a chain.
* run() can not be in the middle of the chain.
Expand Down
741 changes: 399 additions & 342 deletions dist/image-sequencer.js
100755 → 100644

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/image-sequencer.min.js

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@

<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../src/ui/prepareDynamic.js"></script>
<script src="../dist/image-sequencer.js" charset="utf-8"></script>
<script src="lib/urlHash.js" charset="utf-8"></script>
<script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
Expand Down Expand Up @@ -91,4 +92,4 @@ <h1>Image Sequencer</h1>

</body>

</html>
</html>
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"main": "src/ImageSequencer.js",
"scripts": {
"debug": "TEST=true node ./index.js -i ./examples/images/monarch.png -s invert",
"test": "TEST=true tape test/**/*.js test/*.js | tap-spec; browserify test/modules/image-sequencer.js test/modules/chain.js test/modules/replace.js test/modules/import-export.js test/modules/run.js | tape-run --render=\"tap-spec\"",
"test": "TEST=true tape test/**/*.js test/*.js | tap-spec; browserify test/modules/image-sequencer.js test/modules/chain.js test/modules/replace.js test/modules/import-export.js test/modules/run.js test/modules/dynamic-imports.js | tape-run --render=\"tap-spec\"",
"start": "grunt serve"
},
"repository": {
Expand All @@ -29,6 +29,7 @@
"fisheyegl": "^0.1.2",
"font-awesome": "~4.5.0",
"get-pixels": "~3.3.0",
"image-sequencer-invert": "^1.0.0",
"imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
"jquery": "~2",
"jsqr": "^0.2.2",
Expand Down
Loading