UI to guide taking good images

[jywarren]

Let's brainstorm what would be nice to have, vs. essential:

Important

1. We can show an example image to guide people.
2. Good lighting. I believe there's good guidance here: https://publiclab.org/tag/smart-form

Nice to have

1. We could offer an overlay guiding placement if we have a live preview with Uppy (https://github.com/publiclab/image-sequencer/pull/840)
2. we could auto-detect the positions if the badge could be laid exactly on a "guide sheet" that has 3? QR codes on it

[harshkhandeparkar]

Ok. I will create a very simple UI:

• Uppy
• Materialize(for designing frontend)
• Grunt (browserify)

[harshkhandeparkar]

Is this ok? @jywarren @VibhorCodecianGupta

[vibhorgupta-gh]

Cool. I'll help out. Can I create a branch and push some base code? You pull it and keep adding your commits to it. Sounds good?

[harshkhandeparkar]

What code will you add exactly?

[vibhorgupta-gh]

Some basic materialize, to mimic the UI of image sequencer. I'll push some basic code and we can build over it.

[Divy123]

I think we can collaborate here. I was totally unaware of the activity here. Can you please tell how can I contribute here? @jywarren thanks a lot for making me aware of the changes here. @VibhorCodecianGupta I hope we can collaborate on this and we may divide our work here.

[jywarren]

Yes, I appreciate people's excitement about this project but I agree that we could coordinate better. Let's work in small PRs that provide one piece at a time, and push up commits often, being sure to mention each other's usernames.

Thanks everyone.

[jywarren]

I think a basic HTML page can start us off and provide a base from which to build more PRs.

[harshkhandeparkar]

Some basic materialize, to mimic the UI of image sequencer. I'll push some basic code and we can build over it.

Sure. Add a basic page. I will try to mimic ImageSequencer as I have already done it in my materialize renderer(you can have a look at it). Just add an index.html. Try not to add too much js. I will do that with grunt.

I would really require you help in this:

We can show an example image to guide people. Good lighting. I believe there's good guidance here: https://publiclab.org/tag/smart-form

Please do this info/docs part.

I think we can collaborate here. I was totally unaware of the activity here. Can you please tell how can I contribute here? @jywarren thanks a lot for making me aware of the changes here. @VibhorCodecianGupta I hope we can collaborate on this and we may divide our work here.

Let us all decide what we are going to do. So first, let @VibhorCodecianGupta add basic code. I will imrpove upon it and add uppy, grunt etc. So what do you want to work on @Divy123?

[vibhorgupta-gh]

Nice, then. I'll make a branch and write some code in a couple of hours. @Divy123 you can pull it and add yours as well. @jywarren, let's get #1 merged, then? I'm looking for better algos for calculating image distance. Also, let's migrate the colourimetry issue here so that people don't miss out on the progress like @Divy123 did

[harshkhandeparkar]

I also wanted to ask another thing, Should we use babel and webpack (to use es6) for everything including backend and frontend? I am going to add some kind of bundler anyways, should I add webpack and babel instead of grunt or is that enough?

[harshkhandeparkar]

Ok. I'll try starting the work tmrw evening

[harshkhandeparkar]

Hey @VibhorCodecianGupta please try to push your basic code as soon as possible. I will work on this today evening (probably at 5-7pm)

[vibhorgupta-gh]

@HarshKhandeparkar I'll try doing it ASAP. Will definitely do it by the evening. Am caught up in some stuff.

@jywarren Auto-detect would be VERY nice to have, almost ideal. If there is a standard input layout, say half left having the test and helf right having result image, we could use the crop module and extract values by hardcoding, without worrying about dimensions and their discrepancy. How do you figure the add-qr module be used for this?

[harshkhandeparkar]

Hi! Please commit the code now if you haven't yet. I will start working on it.

[Divy123]

@VibhorCodecianGupta I think we should have gone for the second approach by @jywarren for colorimetry implementation. We won't be having an overhead of two sequencers then and also building the UI can be a lot more simpler.

Jeff, what do you think upon this? Also, I think after having a basic version running successfully, we can proceed towards a nice UI. I have been working on Reactjs for one and a half year and I think using it to build the UI but only after having the basic functionality up and going can be very useful.

Also, I would like to suggest some stress upon UI here since we are making our tool for public and people prefer an easy to use and a clean UI.

Moreover I have an idea that we can make this project much more than a front-end one. We can provide an option in our tool itself to save the track of the results which user would like to keep. We can simply use firebase service for user registration if they want and and store the results on firebase.

Since the results produced here can provide great data for studies and furthere experimentations, I think making a tool itself capable of storing results for which user won't have to use any other service can be good to go.

Thoughts @jywarren, @tech4GT, @HarshKhandeparkar ?

[harshithpabbati]

Hello, I want to join with you guys. Can someone say me what to do?

[Divy123]

@Harshithpabbati thanks a lot for this!! We will ask for any help from you once things get started to be discussed upon.

[harshkhandeparkar]

I think we can split the tasks into separate issues once we get our plan sorted. Once we have our issues, we can assign issues.

[Divy123]

Any updates here @VibhorCodecianGupta ? If you are busy, I can take this forward with the second approach.

[harshkhandeparkar]

@Divy123 which approach are you talking about? UI or backend?

[Divy123]

Actually I think out of the two approches Jeff suggested for this project, I think second one is more feasible to proceed with:

@VibhorCodecianGupta I think we should have gone for the second approach by @jywarren for colorimetry implementation. We won't be having an overhead of two sequencers then and also building the UI can be a lot more simpler.

So, if everyone is ok, I want to proceed with this one because of the reasons above.

[harshkhandeparkar]

Where were the approaches suggested? If you are discussing backend, I think we can discuss it in the issue regarding it, this is for UI(I think). If I am in a state of complete confusion, please let me know.

[Divy123]

I am talking about the core functioning which Jeff suggested:

So, I think we could basically approach this use case in 2 ways: We could have the starting module trigger 2 sequences, one for left and one for right. Each crops, then averages. Once both are done, we compare, for example, the average red channel of each.

We run the left side (crop and average), then use the import-image module to re-import the original image, then run the right side. In the end, we look back and fetch the outputs from the two average steps (left and right), and compare the red channels of each.

In both case we display the ratio of the red channel (for example) between the two sides.

I hope this makes more sense.

[harshkhandeparkar]

Cool. Let's actually discuss it in #2

[jywarren]

OK, I'm going to close this as we are doing quite well at https://divy123.github.io/colorimetry/public/ and can start refining!