there should be a branch at
https://github.com/mrhut10/todaysCuriosity/tree/adjustCSSgrid

can you see it @khutten

it should fix part of the display issue that #36 is dealing with.

I wanted to create a PR but although i've pushed it i cant see it on Github.

hay @khutten or anyone can you add a default image on first load?

regards
mrhut10

Currently the app allows users to open their own images. Please create an input below the file browse input that allows users to paste in the url to an image that we than go and fetch.

ie the user might paste in www.catRepo.com/bestCat.jpg
we would fetch bestCat.jpg and load it into the app.

Please use the fetch() API and use 'async await' syntax as well.

Currently the sliders and set width of page is painful. Will need to address this shortly

Currently when a user open's their own image, we crop images down to 2000px wide with the following

document.getElementById('file-input').onchange = function (e) {
  loadImage(
      e.target.files[0],
      imageSetup,
      {maxWidth: 2000} // Options
  );
};

This is done to stop the app from running slowly when changing the sliders, but really this is pretty crap to have you're image suddenly cropped, Can we refactor this so that the image is resized to 2000px instead.

Nice easy chuck of work.

So on line 37ish of scripts.js

function imageSetup (img) {
  curiosity.baseImage = img;
  curiosity.paintInputImage();
  curiosity.createBrightpixels();
  // const {inputCanvas, outputCanvas} = curiosity.getReducedPixelBlocks();
  const {inputCanvas, outputCanvas} = curiosity.getReversedPixelBlocks();

  const inputDiv = document.getElementById('input-display');

you can see that we are calling a method getReversedPixelBlocks() while ignoring getReducedPixelBlocks() (it's commented out), but both are valid and both work.

I want a toggle switch on the UI that toggles which method is called here. 🎉

Same thing will need to be updated on line 61 where getReversedPixelBlocks() is called again.

If someone with design and CSS skills (unlike me) wants to over haul the layout I think that would be great. I think it would be good if the input (source) image was a little bigger as it's useful to see highlighted squares if you are trying to line them up with the eyes for example. But that's my only thoughts one the matter.

There isn't too many moving parts so I don' think it would take too long for someone who knows what they're doing. But by all means through rough ideas of what you thoughts are before putting time in so no one's time is wasted.

As the reductionRatio changes the output image changes size (this is correct since increasing the reduction ration means that it's grabbing more pixels from the input image). The size should be clamped with CSS.

Some of the best/funniest images that come out of this app is when the output image includes the eyes of the input image, see below

It would be awesome if the user could click the eyes on of the input image and this would update the values of the sliders so that the output image includes the eyes.

Steps

1)

Have a good play with the app so you understand what each slider does (playing with it is going to be way better than me trying to explain each one.

2)

make an button called "select eyes" or similar and then record the next two click events on the input canvas and their coordinates.

3)

Every time I tried to explain this it doesn't make sense reading it back 😔 , Sorry, I tried, but if you finish step 2 I can jump in and help and make the final commits to actually change the slider values, so don't worry too much about this next bit. 😅

Update the slider values so that the output images includes the eyes. I've already got an idea of how this would work conceptually, firstly I don't think that ratio or the y div sliders need updating at all as you can always still hit the eyes no mater what their values are.
Then you want to set the x divs so that the sample 'blocks' can line up with the eyes, hard to explain but some divisions amounts it's going possible for the eyes to line up with these blocks, but others it might be the case that one eye can be line up but than the next eye fall right in between two of the divisions. There will be multiple values that work here so take the one closes to what the user has already set.
Lastly set the x and y offsets to bulls eye the eyes :) 🎉

I've signed up three times.

the process i've followed is signup with my github account.
then i deploy todaysCuriosity from github
it works!!! yay.

I then get emails from netlify welcoming me as a customer.

then an hour later the deployments i notice have stopped working saying that the deployment has been disabled.

I then try to log in and it states that the login isn't valid. so i resign up and redeploy.

I have done this three times. what am i doing wrong????

We want this app to still be useful for folks using phone, so please change the sliders to decrement and increment buttons when the screen is below, lets say 900px for now. See image below.

I've started a branch called load image to allow uses to upload images.

It's almost working but needs a build step and someone to check it over.

Hey if you've noticed the images sometimes overlay on top of each other so how about you cap the quad's size to a perfect square(maybe 2x2, 3x3, 4x4 etc) that way it doesn't do that? If it's not an issue you can remove. Thanks

This is certainly more of an opinion than a fact, but wanted to explore the topic.

stored state within the library is it necessary? I'll start with con's for refactoring the state away ( so i'm not completely bias )

Refactor Con's

• library could be responsible for drawing to the page itself meaning we would just send it new state and ask it to update the page, which might be a abstraction (although i would argue could still be done stateless)

Refactor Pro's (all opinions not fact)

• we already create new instance on each use/update currently
• Feel's like everything could be done within the scope of a function.
• I find state confusing partly as calling methods can respond differently depending if someone has played with the state
• if was functional only the caller can set values
• we can send all settings as a object so will be nice and verbosely named still

anyway interested what @khutten and any others thoughts on it.

First slider move cause error in console and does nothing to the image.

At the bottom of the project there is credit for myself and @mrhut10, this is hard coded. It would be cool to instead use the github api to fetch anyone who has contributed to this project and display everyone's avatars.

Bonus points if the avatars are also links back to each person's github page.

This idea was suggested by @mrhut10 in #23