Public Lab Research note


GSoC 2017: Final Work Product of Image Sequencer Project

by ccpandhare | August 23, 2017 15:27 23 Aug 15:27 | #14780 | #14780

Developing Image Sequencer as a Library


Project Details

Project Proposal : publiclab/developing-imge-sequencer-as-a-library

GSoC Project Link : https://summerofcode.withgoogle.com/projects/#5154454941728768

Repository Host : GitHub

Repositories to which contributions were made publiclab/image-sequencer, jywarren/fisheye-gl

Languages and Frameworks : JavaScript, Node.JS, HTML, CSS, jQuery

Final Work Product : A JavaScript image processing library "image-sequencer" made available via NPM which can be used from the UNIX Command Line, an Online Demo (In browser compatible JS) or in NodeJS.

Project Planner GitHub Issue : This GitHub issue has a checklist of all my contributions during GSoC with references to all pull requests -- https://github.com/publiclab/image-sequencer/issues/23/

Link to GitHub Project : "Image Sequencer GSoC Project"

Distribution link (NPM) : npm/image-sequencer

Sections

This Document is divided in the following sections:

  • Project Description - This section describes my project - What it does and a link to the Demo.
  • Get involved in the development - What arre the further steps, and what tasks were undertaken to help new contributors to get started wih the project.
  • How the Demo works - This section describes how to use the online demo.
  • How the CLI works - This section describes how to use the CLI.
  • Code Links and Statistics - This section has links to all the Issues and Pull Requests generated and resolved and some basic statistics.
  • Features Implemented - A list of tasks undertaken by me in my GSoC Project

Project Description

In this GSoC project, development of a JavaScript library for non-destructive image processing, Image Sequencer was started and the library was published to NPM.

Introduction

Image Sequencer is different than other image processing libraries in the way that instead of modifying the original image, it creates a new image at each step in an instance. It works on both VanillaJS and Node.JS. It works as an API and can be easily integrated into one's projects which involve image processing. The targeted users of this library are scientists that require image processing for their research, or as a matter of fact, developers of any project requiring image processing.

Walkthrough

Image Sequencer can be used on NodeJS and on the Browser.

The working:

  • One or more images are loaded in for processing.
  • One or more transformations (called steps/modules) are applied.
  • Outputs are generated after the application of these steps ("running").

Demo: The Image Sequencer main demo can be found at https://publiclab.github.io/image-sequencer/examples/

Get involved in the development

Although I shall continue to contribute to Public Lab, I have created some first-timer-only issues to help new contributors get started with the code base. They can be found here.

Next development Steps for Image Sequencer would be:

  • Extending the CLI functionality
  • Adding new Image Processing modules
  • Extending support to animated GIFs
  • Creating fuller documentations using an API development framework
  • Possibly integrating Image Sequencer with Infragram

Contributing guidelines and how to contribute a module

How to use the Online Demo

The online demo can be found here.

  • The Demo loads with a default image of a barrel distorted grid and a single step ("invert").

Demo Default

  • You can remove steps using the "cross" button at the right of the steps.

Remove Step Demo

  • You can add a step from the bottom of the Page. If the step accepts any inputs, The options for the same will be shown.
  • The placeholders of the options denote the default values.

Add Step Demo

  • Change the image using the button on the top.

How to use the CLI

Currently the CLI is in its basic stage and only one step can be added as of now. This is how to use the CLI:

image-sequencer $ npm i -g

This will install image-sequencer and enable the global binary command "sequencer". If you don't install globally, sequencer can also be accessed by the executable index.js

$ sequencer -i [PATH TO IMAGE] -s name-of-step

OR

image-sequencer $ ./index.js -i [PATH TO IMAGE] -s name-of-step

Help options can be accessed as:

$ sequencer --help

OR

image-sequencer $ ./index.js --help

Code Links and Statistics

All Statistics are as of 23rd August 2017

Project Planner GitHub Issue : This GitHub issue has a checklist of all my contributions during GSoC with references to all pull requests -- https://github.com/publiclab/image-sequencer/issues/23/

Link to GitHub Project : "Image Sequencer GSoC Project"

Distribution link (NPM) : npm/image-sequencer

Link to GitHub Issues

Pull Requests : All Pull Requests Opened by me image description

Contributions (Includes Build Files) :

Contributions

Features Implemented

Image Sequencer has two major parts:

  • The core library, which handles the images generated and the image processing modules.
  • The Modules, which are responsible for the actual processing of images.

My project was broken down into three major phases:

  • Implementing core functionality of the library
  • Implementing image processing modules
  • Creating demos for Image Sequencer

Core Functionality Features:

  • Can handle multiple images at once
  • Accepts input in various intuitive formats, and also in JSON -- making it very easy to use and implement in one's projects.
  • Provides a UI handling system, which makes it very easy to create a User Interface which suits their project needs.
  • Supports Modules which require textual input from the user and output textual values apart from the image.
  • Produces no global variables, and hence doesn't clutter the main project's code.
  • Chainable methods, Callbacks for easy usage.

Module Features:

  • Every module works independently, making it easy to contribute modules and to port modules from existing libraries to Image Sequencer.
  • Modules have their own info.json files which define them and their inputs and outputs. This helps to build User Interfaces.
  • Modules handle their own UIs by emitting out events.

13 Comments

@ccpandhare Good work. The demo looks good. Can you also add link to any FTO issues you made?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Also, let's get the main publiclab github pages demo up and running, no? Great!!

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


One more thought -- do you think you could show with a few screenshots how the sequencer works? I think that'd be a nice way to introduce people to it!

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


This may be of interest to lots of people doing image processing across the world. Think about how this writeup could also be an introduction to people who haven't heard of this project yet, or Public Lab, and introduce your work to them. Thanks!!

Reply to this comment...


Yes, will push to the gh-pages now

Thanks a lot for your suggestions @warren and @ananyo2012

I will look into this and make changes accordingly :-)

Reply to this comment...


Hello @warren @ananyo2012 I have made changes according to your suggestions. Thanks for your valuable time. I would appreciate if you could have another final look at it!

Reply to this comment...


This is super. Maybe "Code Links and Statistics" could go at the end?

What if we better highlighted:

BTW, the main README link to Contributing is broken now, i guess from when you moved to a separate CONTRIBUTING file.

This is looking super!

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


One more thing -- for the CLI, can people just run npm install -g image-sequencer?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


npm install -g image-sequencer should work after we give a version bump on npm.

Reply to this comment...


Made requested changes.

Reply to this comment...


Great! Ping me when you want to version bump. Or if you'd like I can see if i can give you permissions for this?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Maybe we should move some of the extra links to the bottom of the document, and lead with the introduction, to make it more readable?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Great! Ping me when you want to version bump. Or if you'd like I can see if i can give you permissions for this?

If you think that's appropriate :-)

Maybe we should move some of the extra links to the bottom of the document, and lead with the introduction, to make it more readable?

I agree, shall do that

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Login to comment.