Adding a shadow to the image #806

niravasher · 2019-02-21T16:48:51Z

Please describe the problem (or idea)

What did you expect to see that you didn't?
Add a shadow to the image

Please show us where to look

http://sequencer.publiclab.org/examples/#steps=

What's your PublicLab.org username?

niravasher

Browser, version, and operating system

windows 10 with ubuntu subsystem

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders
@jywarren

niravasher · 2019-02-21T17:44:40Z

Hi, please tell how to proceed with this? @jywarren @VibhorCodecianGupta

jywarren · 2019-02-21T18:01:02Z

Can you copy in my last comment about meta modules here? There should be directions in the readme now for meta module creating, and I believe the colorbar module is an example. Basically it's a module made of other modules, and if you try out the set I mentioned, I think you can make an initial attempt at this using a meta module!

…

On Thu, Feb 21, 2019, 9:45 AM Nirav Asher ***@***.***> wrote: Hi, please tell how to proceed with this? @jywarren <https://github.com/jywarren> @VibhorCodecianGupta <https://github.com/VibhorCodecianGupta> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#806 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJwyYWJEvpkWj1NOxmeE7ykcxgHucks5vPtsIgaJpZM4bH30p> .

niravasher · 2019-02-22T19:25:14Z

Hello, do I need to load Image inside this module? @jywarren @harshkhandeparkar ?How to decide in which module, image has to be loaded?

niravasher · 2019-02-23T06:46:40Z

Also I made a new module, kept its inBrowser flag and ui flag to true, made index.js, info.json and Module.js. Required this module in the src/Modules.js file. Is there anything else that I need to do to test that module in my local, because I can't see the shadow module in "more modules" in my browser. @jywarren @harshkhandeparkar

harshkhandeparkar · 2019-02-23T06:48:34Z

Nirav can you please open a PR? We can discuss and debug it there.

niravasher · 2019-02-23T12:37:26Z

Umm.... I am sorry, I didn't get you @harshkhandeparkar , I can't see shadow module on my local, why should I open a PR? On my local means that whenever I click on "More Modules", I can't see shadow module to add....

harshkhandeparkar · 2019-02-23T13:04:48Z

Niravasher I asked you to open a PR so that I can have a look at the code and debug any errors.

niravasher · 2019-02-23T14:02:06Z

Opened a PR , #816 @harshkhandeparkar

niravasher · 2019-03-21T19:49:06Z

Hey, I was working since yesterday. This is what I have made till now

Now I am trying to add shadow on the top portion of the image. Is this relevant? @jywarren @harshkhandeparkar

harshkhandeparkar · 2019-03-21T20:16:39Z

Ya good going. Improvements can be made(if reqd) once the scaffolding is done.

niravasher · 2019-03-21T20:58:20Z

What all options should we give to the user in this module?
I mean shadow in the top , left , right , bottom or two sided shadow, three sided shadow, all sided shadow?
As in what should I add in info.json file @harshkhandeparkar

harshkhandeparkar · 2019-03-21T20:59:27Z

Maybe the same as CSS shadows use?

niravasher · 2019-03-21T21:08:08Z

CSS shadows also give blur effect. That is a bit difficult but will try to do that (maybe i have to change the alpha value of the gradient). So there will be an option for three inputs separated by a space @harshkhandeparkar

harshkhandeparkar · 2019-03-21T21:11:13Z

You can implement blur in a follow up pr.

niravasher · 2019-03-21T21:12:30Z

Ok, roger that. Also how do we add color to the shadow? @harshkhandeparkar

harshkhandeparkar · 2019-03-21T21:14:55Z

Is it of any use?

niravasher · 2019-03-21T21:15:40Z

CSS has the option, maybe its not of any use. So it will be just a two input space separated option

harshkhandeparkar · 2019-03-21T21:16:12Z

You can add some color let's say #RRGGBB, then you can decrease each of the channels proportionally.

harshkhandeparkar · 2019-03-21T21:18:52Z

It will be a string with space separted decimal values for each channel.

niravasher · 2019-03-21T21:19:14Z

I don't think a normal person who is not a developer and just wants a shadow would know what is a hexcode

harshkhandeparkar · 2019-03-21T21:21:09Z

Ya you can use hex but other modules use decimal. Also we use decimal values for channels in PixelManipulation so parsing hex into decimal will be difficult. That's another problem with hex.

niravasher · 2019-03-21T21:27:19Z

Ok for now I am keeping only two inputs, will change anything in the follow up PR. Is that Ok?

harshkhandeparkar · 2019-03-21T21:29:47Z

👍

niravasher · 2019-03-22T11:48:20Z

        if (options.preProcess) pixels = options.preProcess(pixels); // Allow for preprocessing
        if (options.changePosition) {
           for (var x = 0; x < pixels.shape[0]; x++) {
               for (var y = 0; y < pixels.shape[1]; y++) {
                   let pixel = options.changePosition(
                        pixels.get(x, y, 0),
                        pixels.get(x, y, 1),
                        pixels.get(x, y, 2),
                        pixels.get(x, y, 3),
                        x,
                        y
                    );

                    pixels.set(x+25, y+25, 0, pixel[0]);
                    pixels.set(x+25, y+25, 1, pixel[1]);
                    pixels.set(x+25, y+25, 2, pixel[2]);
                    pixels.set(x+25, y+25, 3, pixel[3]);

                    if (!options.inBrowser && !process.env.TEST) pace.op();
                }
            }
        }
        
        function changePosition(r, g, b, a) {
            return [r, g, b, a];
        }

Just like changePixel function, this function should change the position of the image right 25px and bottom 25px as in pixels.set(x+25, y+25, channels,value). But this doesn't seem to work. @harshkhandeparkar @jywarren help me out here. What am I missing?

harshkhandeparkar · 2019-03-22T11:52:23Z

I think when x+25 is not inside the image. I.e. greater then the width of the image and lies outside of it, it throws an error and doesn't work.

niravasher · 2019-03-22T12:27:47Z

Doesn't throw any error in the console @harshkhandeparkar

harshkhandeparkar · 2019-03-22T12:58:52Z

Any screenshots of what it does? Secondly have you built the dist and cleared the cache?

niravasher · 2019-03-22T18:37:43Z

This is not doing anything. Yes I built the dist and cleared the cache @harshkhandeparkar

jywarren · 2019-03-22T18:45:28Z

Hi, all - couple notes here - we have an improvement issue for "color selection input" so that will simplify color selection (but we can do it later). Second, are you increasing the canvas size? Because I believe @tech4GT will be wanting such a step too for unrelated reasons, and perhaps we should share code on that! This is looking good -- perhaps for the time being you could test it with an image that has a transparent background, like this one: http://www.clker.com/cliparts/5/x/Q/n/Q/p/alpha-md.png and then not worry about canvas size for now. We could do canvas size in a separate module, maybe?

…

On Fri, Mar 22, 2019 at 2:38 PM Nirav Asher ***@***.***> wrote: This is not doing anything. Yes I built the dist and cleared the cache @harshkhandeparkar <https://github.com/HarshKhandeparkar> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#806 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ4lOVlSlrzunqn3_QjHOlN3x93Wtks5vZSL3gaJpZM4bH30p> .

niravasher · 2019-03-22T19:20:22Z

I am not going for resize now. Will do that later. Right now I am moving the image to the right so that it does not get cropped when the gradient is applied. Yes for now it will get cropped from the opposite direction.

niravasher · 2019-03-23T08:19:22Z

I made a new js file inside the folder _nomodule. I can now translate the image any number of pixels in any direction and it won't be cut.

The next step is, I am applying the gradient and opening a PR today itself.
After that will work on resizing the canvas @jywarren @harshkhandeparkar

harshkhandeparkar · 2019-03-23T08:27:04Z

👍 what is that file called? Can the same func be added to PixelManipulation? Like a function translatePix(x, y) just like others like getNeighboutPixel, extraManipulation, changePixel? Or alternatively, you can require that file in PixelManipulation and let PixelManipulation return the func. If you have already done this then it's ok.

niravasher · 2019-03-23T08:31:01Z

I am trying to add it to pixelManipulation

niravasher · 2019-03-23T08:41:21Z

Yay! Pixel manipulation is modified, we have a shadow 😄

@harshkhandeparkar

harshkhandeparkar · 2019-03-23T08:55:13Z

Wow! Can the shadow be oy added in the top and left sides or anywhere? (I mean can the function oy translate the img in +ve directions or also -ve)?

niravasher · 2019-03-23T09:33:13Z

I can translate the image in any direction and also can add the gradient in any direction. Shadow can be one sided or two sided but can't be three sided or four sided. @harshkhandeparkar Will open a PR soon

harshkhandeparkar · 2019-03-23T09:55:47Z

Ok great!

niravasher · 2019-03-23T22:38:10Z

I am stuck here. I have to call changePosition function every time when I press apply button, this is only possible when I keep the function inside draw function. So I removed it from pixelManipulation and took it in Module.js. Here I declared an array called pixelArray. All the channels of all pixels are stored in this array. Now I do pixels.set(x-firstValue, y-secondValue, channel, pixelArray[i]) . This shifts the pixels by firstValue and secondValue. But this is not working, opening up a PR, please help me debug there.
@harshkhandeparkar @jywarren .
#932

harshkhandeparkar · 2019-03-24T05:36:45Z

PixelManipulation does run each time you press the apply button. You just put PixelManipulation inside draw.

jywarren · 2019-03-25T21:18:22Z

Hi @niravasher can you share a PR? are you using the blur module to generate the shadow?

This is looking good, but I was thinking we really could make a metamodule if we debug the other modules to follow a path like this:

https://sequencer.publiclab.org/examples/#steps=threshold{},blur{},overlay{offset:-4}

See, here, we:

threshold the image to make a black and white version
then we blur the black and white version to make the shadow
then we overlay the original image over the blurry shadow

But a few missing features or bugs are stopping us:

blur does not have a radius Add blur radius #944
overlay seems not to be working
blurring an image with alpha channel seems not to work; we need to blur the alpha channel too, maybe?

See how this might be made to work, though?

I think also that making a canvas-size module which can increase the canvas size, would be a good idea to make this easier.

Thanks for your hard work, @niravasher !

niravasher mentioned this issue Feb 21, 2019

Round image corners module #788

Open

niravasher mentioned this issue Feb 23, 2019

New shadow module added #816

Closed

4 tasks

harshkhandeparkar added the has-pull-request Issues which have a PR open label Mar 3, 2019

niravasher mentioned this issue Jan 14, 2020

New Shadow module #1507

Merged

5 tasks

jywarren closed this as completed in #1507 Nov 2, 2020

Adding a shadow to the image #806

Adding a shadow to the image #806

Comments

niravasher commented Feb 21, 2019

Please describe the problem (or idea)

Please show us where to look

What's your PublicLab.org username?

Browser, version, and operating system

Thank you!

niravasher commented Feb 21, 2019

jywarren commented Feb 21, 2019 via email

niravasher commented Feb 22, 2019

niravasher commented Feb 23, 2019 • edited Loading

harshkhandeparkar commented Feb 23, 2019

niravasher commented Feb 23, 2019 • edited Loading

harshkhandeparkar commented Feb 23, 2019

niravasher commented Feb 23, 2019 • edited Loading

niravasher commented Mar 21, 2019

harshkhandeparkar commented Mar 21, 2019

niravasher commented Mar 21, 2019

harshkhandeparkar commented Mar 21, 2019

niravasher commented Mar 21, 2019

harshkhandeparkar commented Mar 21, 2019

niravasher commented Mar 21, 2019

harshkhandeparkar commented Mar 21, 2019

niravasher commented Mar 21, 2019

harshkhandeparkar commented Mar 21, 2019

harshkhandeparkar commented Mar 21, 2019

niravasher commented Mar 21, 2019

harshkhandeparkar commented Mar 21, 2019 • edited Loading

niravasher commented Mar 21, 2019

harshkhandeparkar commented Mar 21, 2019

niravasher commented Mar 22, 2019

harshkhandeparkar commented Mar 22, 2019

niravasher commented Mar 22, 2019 • edited Loading

harshkhandeparkar commented Mar 22, 2019

niravasher commented Mar 22, 2019

jywarren commented Mar 22, 2019 via email

niravasher commented Mar 22, 2019 • edited Loading

niravasher commented Mar 23, 2019

harshkhandeparkar commented Mar 23, 2019

niravasher commented Mar 23, 2019

niravasher commented Mar 23, 2019

harshkhandeparkar commented Mar 23, 2019

niravasher commented Mar 23, 2019 • edited Loading

harshkhandeparkar commented Mar 23, 2019

niravasher commented Mar 23, 2019 • edited Loading

harshkhandeparkar commented Mar 24, 2019

jywarren commented Mar 25, 2019

niravasher commented Feb 23, 2019 •

edited

Loading

niravasher commented Feb 23, 2019 •

edited

Loading

niravasher commented Feb 23, 2019 •

edited

Loading

harshkhandeparkar commented Mar 21, 2019 •

edited

Loading

niravasher commented Mar 22, 2019 •

edited

Loading

niravasher commented Mar 22, 2019 •

edited

Loading

niravasher commented Mar 23, 2019 •

edited

Loading

niravasher commented Mar 23, 2019 •

edited

Loading