Connected pre-loaded images to v2 #436

stephaniequintana · 2022-07-21T18:06:55Z

Allows the user to select a pre-loaded image to explore the tool with.

Fixes the "Connect Sample Images" from Planning issue #415

Caveats:

the index2.html includes the code from corrected keyboard-accessibility for input element #435 which corrects keyboard-accessibility of the <input> element (see question in comments)
the function for uploading the selected sample image has ONLY been added to the dist/inframgram2.js file
- it has not beeen added to the src/ui/interface.js file
- Q: how do we proceed with this? Create an interface2.js file for this version? Please advise.

PR is descriptively titled 📑 and links the original issue above 🔗
tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR
code is in uniquely-named feature branch and has no merge conflicts 📁
screenshots/GIFs are attached 📎 in case of UI updation
ask @publiclab/reviewers for help, in a comment below

gitpod-io · 2022-07-21T18:07:02Z

stephaniequintana · 2022-07-21T18:32:47Z

@jywarren, @TildaDares, @cesswairimu

Clarifications/Discussion requested:

In addition to not having added the function of this PR to the interface.js file (or having created an interface2.js file), I realize that the functions altered in the-previously-merged-PR V2 functions connect #431 (namely changing multiple occurances of $('#preset-modal').modal('show'); to $('#preset-modal').offcanvas('show');) were also only added to the infragram2.js file and NOT to the interface.js file. How might we best handle these functions that only pertain to this version?
It does not seem correct to have added the code from another PR into this PR...Is it correct that NOT including it in this PR would just create a simple merge-conflict? I believe I've confused myself into thinking that by not including that code into this PR then if that PR were merged first, it would would be overwritten when this PR is merged. I realize this question is poorly articulated, no need to reply if it's not clear :/

I hope this finds you all well :)

jywarren · 2022-07-22T21:27:44Z

Hi, no issue, it's confusing! Merging will incorporate only whats shown in the changed files here, and the merge action always prioritizes the active PR's changes. You should just before merging be able to see in the diff view the green + lines that will be the final state after the merge is conducted. Once a merge is completed, the diff view and changed files in all other PRs will be modified to show the new post-merge changes taking into account the action that just happened. Does that make sense?

It's OK to include changes in both - it's very likely they'll then be dropped from the diff of the other, as that change will already have occurred, OR it may say there's a conflict and it can't be merged automatically.

jywarren · 2022-07-22T21:28:23Z

functions altered in the-previously-merged-PR #431 (namely changing multiple occurances of $('#preset-modal').modal('show'); to $('#preset-modal').offcanvas('show');) were also only added to the infragram2.js file and NOT to the interface.js file. How might we best handle these functions that only pertain to this version?

Should we try this idea of detecting what version we're running? I'll make a code suggestion so the flag will exist!

jywarren · 2022-07-22T21:37:20Z

I started the flag implementation in #438 - i will try to generate the dist files too -- but if that makes sense we can merge it and you can begin using if (options.version == 1) {} in your code!

stephaniequintana · 2022-07-27T13:19:15Z

@jywarren,
I included the function in the $(document).ready(function(){...} of the src/ui/interface.js.

Please ensure that the function was placed in the correct location.

I've also include it in the dist/infragram.js file in preparation of dist/infragram2.js becoming obsolete. The code does not break the original version and thus I did not utilize the version flag (implemented in #438).

You can view this in action at https://stephaniequintana.github.io/infragram/index2.html

jywarren

Hi @stephaniequintana it took me a moment to catch up to you understanding the code here but it looks great. I made some suggestions for simplicity, legibility and such. If you take up the suggestion of eliminating thumbnail images, we can further simplify the HTML too, removing the red-filter classes I had added and a few of the ones you added as well.

Let me know what you think!

jywarren · 2022-08-02T20:07:03Z

src/ui/interface.js

@@ -68,6 +68,21 @@ module.exports = function Interface(options) {
      return true;
    });

+    $("#sample-image__select").click(function(e){


This looks good; it'll only run if there is an HTML DOM element with an id of sample-image__select, so this won't break v1. However, 2 thoughts -

should we mark this as a v2 feature with a comment, so people know, and if we ever clean up all v1 code we can tell it apart

should we otherwise explain this briefly in a comment, since it sounds a little mysterious?

What's cool is that this means ANY image could be used as a sample image, it just has to have the id sample-image__select. I suggest that we change that to a class, since strictly, ids should be used only once. Then someday someone may want to add, for example, a bunch of different examples in a kind of menu, they could use this. So the class could be maybe... .sample-image?

But perhaps that means we should then apply the class to just the individual images, rather than the whole container. Let me make a suggestion!

jywarren · 2022-08-02T20:11:55Z

src/ui/interface.js

@@ -68,6 +68,21 @@ module.exports = function Interface(options) {
      return true;
    });

+    $("#sample-image__select").click(function(e){
+      e.stopPropagation();
+      const img = (e.target.classList.contains('rfi')) ? document.getElementById('rfi') : document.getElementById('bfi');


Here's another super great line of code - i love that the idea is that you can add the "bfi" or "rfi" classes to switch between. Maybe we should explain this too in a comment!

Aha - i see now -- we want to click on the thumbnail, but use the big hidden image! I wonder - if we use relatively low res sample images, like, 1024x768 or less, could we simplify things by just skipping thumbnails? JPGs don't weigh that much, you know? Then the logic here can be much simpler - we just display the big images with style="width:200px;" or something like that!

So on this line, if we stop using separate thumbnails, we can maybe just skip using red-filter or blue-filter classes completely. Since we'd just select whatever image, and think about what kind of filter later?

jywarren · 2022-08-02T20:12:56Z

index2.html

-                  <p class="card-text" style="font-size:.625rem;padding-top:.5rem;"><small>Red filtered trees</small></p>
+              <div id="sample-image__select" class="d-flex justify-content-around">
+                <div id="red-filtered-img" class="rfi d-flex flex-column justify-content-center align-items-baseline">
+                  <img class="rfi" src="assets/red-filtered-trees-thumbnail.jpeg" alt="Red filtered image - select to explore the tool." style="width:5rem;height:auto;border:.5rem solild var(--image-container-bg);">


Suggested change

<img class="rfi" src="assets/red-filtered-trees-thumbnail.jpeg" alt="Red filtered image - select to explore the tool." style="width:5rem;height:auto;border:.5rem solild var(--image-container-bg);">

<img class="sample-image red-filter" src="assets/red-filtered-trees-thumbnail.jpeg" alt="Red filtered image - select to explore the tool." style="width:5rem;height:auto;border:.5rem solild var(--image-container-bg);">

I explain this idea below - and as to naming, I really like longer descriptive names because it often means we don't have to use as many comments!

jywarren · 2022-08-02T20:14:14Z

index2.html

                </div>
-                <div class="d-flex flex-column justify-content-center align-items-center">
+                <div id="blue-filtered-img" class="d-flex flex-column justify-content-center align-items-center">
                  <img src="assets/blue-filtered-plant-thumbnail.jpeg" alt="Blue filtered image - select to explore the tool." style="width:5rem;height:auto;">


Suggested change

<img src="assets/blue-filtered-plant-thumbnail.jpeg" alt="Blue filtered image - select to explore the tool." style="width:5rem;height:auto;">

<img class="sample-image blue-filter" src="assets/blue-filtered-plant-thumbnail.jpeg" alt="Blue filtered image - select to explore the tool." style="width:5rem;height:auto;">

jywarren · 2022-08-02T20:17:00Z

src/ui/interface.js

+          const file = new File([blob], img.src, blob)
+          const fileInput = document.querySelector('input[type="file"]');
+          const dataTransfer = new DataTransfer();
+          dataTransfer.items.add(file);


Wow i really like this way of doing it. It literally selects the image, same as someone using it! That will mean that we don't have to support (or think about) 2 different means of adding images. Very cool.

stephaniequintana · 2022-08-04T21:46:34Z

@jywarren,

Great suggestions! Thank you 🙏

I originally put the eventListener on the entire div in case a user clicks the text (instead of the image), but this came with having to add many classes to many elements. This way is MUCH cleaner and the function itself is more clear. for your quick reference, it is now:

$(".sample-image").click(function(e){
          e.stopPropagation();
          const img = (e.target);
          fetch(img.src)
            .then(res => res.blob())
            .then(blob => {
              const file = new File([blob], img.src, blob)
              const fileInput = document.querySelector('input[type="file"]');
              const dataTransfer = new DataTransfer();
              dataTransfer.items.add(file);
              fileInput.files = dataTransfer.files;
              $(options.fileSelector).trigger("change");
            })
        });

I also deleted the thumbnails and replaced the images with smaller versions (width: 1024).

I am working on a better design for the welcome-container as a whole and will include this in a separate UI PR.

jywarren · 2022-08-04T22:22:48Z

Sounds super!!!

…

On Thu, Aug 4, 2022, 5:46 PM Stephanie Quintana ***@***.***> wrote: @jywarren <https://github.com/jywarren>, Great suggestions! Thank you 🙏 I originally put the eventListener on the entire div in case a user clicks the text (instead of the image), but this came with having to add many classes to many elements. This way is MUCH cleaner and the function itself is more clear. for your quick reference, it is now: $(".sample-image").click(function(e){ e.stopPropagation(); const img = (e.target); fetch(img.src) .then(res => res.blob()) .then(blob => { const file = new File([blob], img.src, blob) const fileInput = document.querySelector('input[type="file"]'); const dataTransfer = new DataTransfer(); dataTransfer.items.add(file); fileInput.files = dataTransfer.files; $(options.fileSelector).trigger("change"); }) }); I also deleted the thumbnails and replaced the images with smaller versions (width: 1024). I am working on a better design for the welcome-container as a whole and will include this in a separate UI PR. — Reply to this email directly, view it on GitHub <#436 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J2YWVOA6CLSXRUKZLTVXQ24JANCNFSM54IQ4XXQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

Connected pre-loaded images to v2

0086f20

stephaniequintana mentioned this pull request Jul 22, 2022

Update index2.html stephaniequintana/infragram#1

Open

stephaniequintana mentioned this pull request Jul 26, 2022

Create version flags #438

Merged

5 tasks

included the function on src/ui/interface.js and dist/infragram.js

6f06a0e

jywarren requested changes Aug 2, 2022

View reviewed changes

simplified function & updated image size

1f7f118

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Connected pre-loaded images to v2 #436

Connected pre-loaded images to v2 #436

stephaniequintana commented Jul 21, 2022

gitpod-io bot commented Jul 21, 2022

stephaniequintana commented Jul 21, 2022

jywarren commented Jul 22, 2022

jywarren commented Jul 22, 2022 •

edited

Loading

jywarren commented Jul 22, 2022

stephaniequintana commented Jul 27, 2022

jywarren left a comment

jywarren Aug 2, 2022

jywarren Aug 2, 2022

jywarren Aug 2, 2022

jywarren Aug 2, 2022

jywarren Aug 2, 2022

jywarren Aug 2, 2022

jywarren Aug 2, 2022

jywarren Aug 2, 2022

jywarren Aug 2, 2022

stephaniequintana commented Aug 4, 2022

jywarren commented Aug 4, 2022 via email

	<img class="rfi" src="assets/red-filtered-trees-thumbnail.jpeg" alt="Red filtered image - select to explore the tool." style="width:5rem;height:auto;border:.5rem solild var(--image-container-bg);">
	<img class="sample-image red-filter" src="assets/red-filtered-trees-thumbnail.jpeg" alt="Red filtered image - select to explore the tool." style="width:5rem;height:auto;border:.5rem solild var(--image-container-bg);">

	<img src="assets/blue-filtered-plant-thumbnail.jpeg" alt="Blue filtered image - select to explore the tool." style="width:5rem;height:auto;">
	<img class="sample-image blue-filter" src="assets/blue-filtered-plant-thumbnail.jpeg" alt="Blue filtered image - select to explore the tool." style="width:5rem;height:auto;">

Connected pre-loaded images to v2 #436

Are you sure you want to change the base?

Connected pre-loaded images to v2 #436

Conversation

stephaniequintana commented Jul 21, 2022

Caveats:

gitpod-io bot commented Jul 21, 2022

stephaniequintana commented Jul 21, 2022

jywarren commented Jul 22, 2022

jywarren commented Jul 22, 2022 • edited Loading

jywarren commented Jul 22, 2022

stephaniequintana commented Jul 27, 2022

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

stephaniequintana commented Aug 4, 2022

jywarren commented Aug 4, 2022 via email

jywarren commented Jul 22, 2022 •

edited

Loading