Implemented UI Methods #67

ccpandhare · 2017-07-21T20:44:14Z

I have implemented basic UI Methods.

Now every module has an object UI
UI has four methods:
- setup
- drawing
- drawn
- remove
The module calls these methods when:
- setup is called when the step is added
- drawing is called when module.draw is called
- drawn is called when the step produces output
- remove is called when sequencer.removeStep is called on that step.

Currently, The UI just triggers a console.log($DATA).

ccpandhare · 2017-07-21T20:52:03Z

A user can set their own UI as follows:

sequencer.setUI({
    setup: function(){...} ,
    drawing: function(){...} ,
    drawn: function(){...} ,
    remove: function(){...}
});

If the user does not do so, the default UI is applied.

Also, for each module, an object (identity) is passed to the UI.
In all of the four methods, The user has access to the following variables:

identity.stepName : This is the name of the step
identity.stepID : This is the unique ID given to every step
identity.imageName : This is the name of the image to which the step is applied
options.inBrowser : Whether or not the client is a browser
options.ui : whether or not is a UI required by the client (if no, options.ui is "none" `)

ccpandhare · 2017-07-21T20:52:55Z

I think, using this information, One can create a UI with ease.

jywarren · 2017-07-23T05:30:55Z

Can you write the readme section for this? That way I can follow more easily too. Perhaps some tests demonstrating the UI callbacks? Sorry im on not great internet so tell me if you've already done that! It looks amazing! On Jul 21, 2017 10:53 PM, "Chinmay Pandhare" <notifications@github.com> wrote: I think, using this information, One can create a UI with ease. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#67 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-eEL0_X2yJNqJdKRbh6GdXAYZWZks5sQQ-ngaJpZM4Of34C> .

ccpandhare · 2017-07-23T05:51:36Z

Ohh... I see.

No I haven't written the documents yet, I wanted to show it to you first and confirm if this looks okay. But I shall Add the documentation now.

As far as the demo is concerned, I have already switched all control to this module. That is, Now whatever Console.logs happen, are via this module! And I am logging at all these events. This is a screenshot of by browser console running a test sequence:

ccpandhare · 2017-07-23T05:57:34Z

Also, I am changing the method names to what you had suggested originally.
Those definitely make more sense.

ccpandhare · 2017-07-23T06:36:59Z

I have Added the documentation to ./README.md
You can have a look at it here: ccpandhare/image-sequencer:development

Also I have changed the method names to those you had suggested in #65

These are the name changes:

setup => onSetup
drawing => onDraw
drawn => onComplete
remove => onRemove

jywarren

Looks fantastic! I left some questions, comments, requests. Great work!

jywarren · 2017-07-23T07:26:19Z

README.md

+identity = {
+  stepName: "Name of the Step",
+  stepID: "A unique ID given to the step",
+  imageName: "The name of the image to which the step is added."


Umm, no...
To handle multiple images, We needed a unique identification for the images, which would also be accessible to the user. So I came up with image names back in Phase 1 (#24) .

Every image has a "name". this name is either defined by the user while loading an image:

sequencer.loadImage("name","SRC");

If the user does not specify any name, that is:

sequencer.loadImage("SRC");

Then Image Sequencer gives the image a name on its own, like "image1" or "image2" etc. This feature was discussed and implemented in #48 , implemented in #53

cool, i remember. Maybe for forgetful ppl like me or for newcomers we could make a quick reference to the explanation from the identity documentation. Thanks!

I have fixed this in a commit, thanks!

jywarren · 2017-07-23T07:28:57Z

README.md

+
+```js
+sequencer.setUI({
+  onSetup: function() {},


Should these have access (by parameter like onSetup(image, metadata) to the image itself so that its more explicit and the function can be written generically but applied to each image separately? We should show the right way to access these values even if we don't pass them via parameter but that makes it really clear. Thoughts?

Should we ask to return the generated html element if any?

Yes I think it already is what you are talking about. Generic functions can be written.
The user has access to :

What image the step is applied to

Details of the step

Details of the client : browser/Node

This is all the data which is needed to make a UI, I feel.

Although we could give access to the original image, and the metadata, but I am not really clear about what you are saying there...

I don't think we should ask to return generated HTML. That is because, we don't really need it. The user has all access to the front-end of the code. We are providing all the data the user might need and he can implement it to the front-end as he wishes.

jywarren · 2017-07-23T07:29:47Z

README.md

+```js
+sequencer.setUI({
+  onSetup: function() {},
+  onDraw: function() {},


Do we need to pass the HTML of the element produced (if any) in onSetup?

I don't think that might be required... I see that there's some misunderstanding here, I shall explain what I am saying in a comment on the main thread and we will come to a conclusion later!

jywarren · 2017-07-23T07:32:07Z

src/UserInterface.js

+    UI.onSetup = UI.onSetup || function() {
+      if(options.ui == "none") {
+        // No UI
+      }


Would it work to use the value false?

Yes, it would.
Actually for the unit tests, we started doing this:

var sequencer = ImageSequencer({ui:"none"});

This is where it originated, I also feel we should make it false

I have fixed this in a commit, thanks!

jywarren · 2017-07-23T07:34:12Z

src/modules/Crop/Module.js

   var output

   function draw(input,callback) {

+     UI.onDraw();
     const this_ = this;

     require('./Crop')(input,options,function(out,format){
       this_.output = {


This doesn't error on removing var this_ = this?

Also, best practice is to use a meaningful name like module instead of this_. Thanks!

Yes, you are right...
I had actually gotten into the practice of doing this from writing callbacks (and avoiding the scope change problem of this):

function x() { var y = 1; var this_ = this; someObj.someMethod(abc, function() { this_.y = 2; }); }

I will change it. Thanks!

I have fixed this in a commit, thanks!

jywarren · 2017-07-24T17:20:45Z

OK, i'm satisfied with responses here, thanks for your thoughtful replies!

Perhaps a little more documentation can help clarify this for new folks, but i think it's ready to merge if you do.

I'm going to start publishing this on NPM, calling the current version v0.0.1 and this would become v0.1.0 due to SemVer, does that sound right?

jywarren · 2017-07-24T17:23:39Z

https://www.npmjs.com/package/image-sequencer at v0.0.1 -- if you could add a bump to the version number in package.json in this PR, we should do v0.1.0, and we can make a release too: https://github.com/publiclab/image-sequencer/releases

:-)

ccpandhare · 2017-07-24T18:04:38Z

Yes, sounds good! Thanks! :-)
I would like to make a few changes though, the ones you have suggested above.
And just to explain the usage:

sequencer.setUI({
    onSetup: function() {
        // create div (pseudocode)
        var div = "<div id=${identity.stepID}><img src='' /></div>"
        // append to the container representing the image (pseudocode)
        document.querySelector('#image-sequencer-${identity.imageName}').append(div);
    },
    onDraw: function() {
        // overlay a loading GIF over the child #${identity.stepID} of the container #image-sequencer-${identity.imageName}
    },
    onComplete: function(output) {
        // remove the overlay
        // update the image element in #${identity.stepID} with the new SRC
    },
    onRemove: function() {
        // remove the appended DIV
    }
});

This is what I have implemented yet. I hope this makes stuff a bit clear. I shall improve the documentation for this.

jywarren · 2017-07-24T18:28:48Z

+1!

…

On Jul 24, 2017 8:04 PM, "Chinmay Pandhare" ***@***.***> wrote: Yes, sounds good! Thanks! :-) I would like to make a few changes though, the ones you have suggested above. And just to explain the usage: sequencer.setUI({ onSetup: function() { // create div (pseudocode) var div = "<div id=${identity.stepID}><img src='' /></div>" // append to the container representing the image (pseudocode) document.querySelector('#image-sequencer-${identity.imageName}').append(div); }, onDraw: function() { // overlay a loading GIF over the child #${identity.stepID} of the container #image-sequencer-${identity.imageName} }, onComplete: function(output) { // remove the overlay // update the image element in #${identity.stepID} with the new SRC }, onRemove: function() { // remove the appended DIV } }); This is what I have implemented yet. I hope this makes stuff a bit clear. I shall improve the documentation for this. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#67 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJwpHFiBAJKidWEAMqHhO7yPo4W1Sks5sRNy2gaJpZM4Of34C> .

ccpandhare · 2017-07-24T21:06:07Z

This looks ready to me now! Merging this in!

jywarren · 2017-07-25T11:31:25Z

Super! Do you have ability to create a new release?

…

On Jul 24, 2017 11:06 PM, "Chinmay Pandhare" ***@***.***> wrote: Merged #67 <#67>. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#67 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ6Se-pIm3vp6Jl8Kq0qHOFcP-XZNks5sRQdIgaJpZM4Of34C> .

ccpandhare · 2017-07-25T11:33:36Z

Sorry, I don't think I have that access. On मंगळ, २५, जुलै २०१७, १७:०१ Jeffrey Warren <notifications@github.com> wrote:

…

Super! Do you have ability to create a new release? On Jul 24, 2017 11:06 PM, "Chinmay Pandhare" ***@***.***> wrote: > Merged #67 <#67>. > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > <#67 (comment)>, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/AABfJ6Se-pIm3vp6Jl8Kq0qHOFcP-XZNks5sRQdIgaJpZM4Of34C > > . > — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#67 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AT0xnF_XfLWe5hpkm-ucNie71E-J_FkBks5sRdIOgaJpZM4Of34C> .

jywarren · 2017-07-25T11:36:36Z

Ok I will soon. Thanks! On Jul 25, 2017 1:33 PM, "Chinmay Pandhare" <notifications@github.com> wrote:

…

Sorry, I don't think I have that access. On मंगळ, २५, जुलै २०१७, १७:०१ Jeffrey Warren ***@***.***> wrote: > Super! Do you have ability to create a new release? > > On Jul 24, 2017 11:06 PM, "Chinmay Pandhare" ***@***.***> > wrote: > > > Merged #67 <#67>. > > > > — > > You are receiving this because you commented. > > Reply to this email directly, view it on GitHub > > <#67 (comment) >, > > or mute the thread > > < > https://github.com/notifications/unsubscribe-auth/AABfJ6Se- pIm3vp6Jl8Kq0qHOFcP-XZNks5sRQdIgaJpZM4Of34C > > > > . > > > > — > You are receiving this because you modified the open/close state. > > > Reply to this email directly, view it on GitHub > <#67# issuecomment-317709875>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AT0xnF_XfLWe5hpkm- ucNie71E-J_FkBks5sRdIOgaJpZM4Of34C> > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#67 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJyLvvmmEM3lfz0kDQGaAF5CttlZOks5sRdKQgaJpZM4Of34C> .

ccpandhare added 3 commits July 22, 2017 02:01

Implemented UI Methods

555e371

BuildFix (BugFix)

8677929

BuildFix (BugFix)

cfdc4c5

ccpandhare mentioned this pull request Jul 21, 2017

Planning interface architecture #65

Closed

Added Docs, updated method names

7584b1e

jywarren requested changes Jul 23, 2017

View reviewed changes

ccpandhare added 3 commits July 25, 2017 00:45

Explained imageName in README.md

ec657a6

Merge master, Rename this_ and ui: 'none'

e9f045f

Build Completed

6baed92

ccpandhare merged commit 21334ff into publiclab:master Jul 24, 2017

ccpandhare mentioned this pull request Jul 28, 2017

Planning Issue for the Image Sequencer GSoC Project #23

Closed

32 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implemented UI Methods #67

Implemented UI Methods #67

ccpandhare commented Jul 21, 2017

ccpandhare commented Jul 21, 2017 •

edited

Loading

ccpandhare commented Jul 21, 2017

jywarren commented Jul 23, 2017 via email

ccpandhare commented Jul 23, 2017

ccpandhare commented Jul 23, 2017

ccpandhare commented Jul 23, 2017

jywarren left a comment

jywarren Jul 23, 2017

ccpandhare Jul 24, 2017

jywarren Jul 24, 2017

ccpandhare Jul 24, 2017

jywarren Jul 23, 2017

jywarren Jul 23, 2017

ccpandhare Jul 24, 2017

jywarren Jul 23, 2017

ccpandhare Jul 24, 2017

jywarren Jul 23, 2017

ccpandhare Jul 24, 2017

ccpandhare Jul 24, 2017

jywarren Jul 23, 2017

ccpandhare Jul 24, 2017

ccpandhare Jul 24, 2017

jywarren commented Jul 24, 2017

jywarren commented Jul 24, 2017

ccpandhare commented Jul 24, 2017

jywarren commented Jul 24, 2017 via email

ccpandhare commented Jul 24, 2017

jywarren commented Jul 25, 2017 via email

ccpandhare commented Jul 25, 2017 via email

jywarren commented Jul 25, 2017 via email

Implemented UI Methods #67

Implemented UI Methods #67

Conversation

ccpandhare commented Jul 21, 2017

ccpandhare commented Jul 21, 2017 • edited Loading

ccpandhare commented Jul 21, 2017

jywarren commented Jul 23, 2017 via email

ccpandhare commented Jul 23, 2017

ccpandhare commented Jul 23, 2017

ccpandhare commented Jul 23, 2017

jywarren left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jywarren commented Jul 24, 2017

jywarren commented Jul 24, 2017

ccpandhare commented Jul 24, 2017

jywarren commented Jul 24, 2017 via email

ccpandhare commented Jul 24, 2017

jywarren commented Jul 25, 2017 via email

ccpandhare commented Jul 25, 2017 via email

jywarren commented Jul 25, 2017 via email

ccpandhare commented Jul 21, 2017 •

edited

Loading