Thanks for opening this pull request! This space is protected by our Code of Conduct - and we're here to help.
Dangerbot will test out your code and reply in a bit with some pointers and requests.
There may be some errors, but don't worry! We'll work through them with you! 👍🎉😄


One thing that can help to get started is to make sure you've included a link back to the original issue you're solving, in the format fixes #0000 (for example). And to make sure the PR title describes what you're trying to do! (often it can be the same as the issue title) Thanks! 🙌


Then, you can say hello in our chatroom & share a link to this PR to get a review! 👋 ✅

Hi @stephaniequintana this is looking really nice! Great work so far.

I'm remembering the real challenge of designing the previous version -- how do people know how to use this the first time? It can be confusing if there are lots of tools and you're like "what do I do?" -- so i think a lot of design and discussion is worthwhile on that subject, and also some user testing with folks who aren't familiar with the project.

For one, I wonder if the icons are somewhat mysterious. Of course there can be tooltips, but what else can we do? Could we have an explanatory "tour popover" already open next to the Quick Start area?

Also, not to get ahead of ourselves, but where do people choose an input (upload or camera)? I guess that'll be added in a later draft? No worries, just curious.

We also have to contend with jargon. "Colormap" is the technical term, but maybe we should have the label say "Colorize" so that it's more understandable? And, what do you think about having it be greyed out until there's an image to work with? Or even each area greyed out until the previous step is done? Is it helpful to think about a label like "You'll be able to colorize once you've analyzed an image" to explain why it's greyed out, and how might we display that?

After the last paragraph, i realize we're rapidly "in the weeds" on this design, which is OK, but let's not overwhelm ourselves. If you want to keep working in this PR with screenshots, that's great. You could also split out some of these questions into their own issues for discussion and refinement. We could keep working here, but only on one problem at a time, too. Your choice, find what workflow feels good to you!

Thanks, this is already looking really nice!

Oh, and one more thing. You can push any branch to the gh-pages branch of your own fork (https://github.com/stephaniequintana/infragram/) and go to https://github.com/stephaniequintana/infragram/settings/pages to have it actually build this code and host it using the GitHub Pages system. Then we'd be able to access it at https://stephaniequintana.github.io/infragram/index2.html, without having to build it in GitPod. Could be nice when/if you want to show a demo! @Forchapeatl this is useful for you to know too. But no worries if that sounds confusing, i can help you set it up at our next meeting.

@jywarren - Thank you for the feedback and the info on GitHub Pages, I didn't realize I could publish a forked branch and was frustrated b/c it is difficult to communicate intent through screenshots.

As the version is published, I can already see many things that need attention - there are issues with responsiveness. padding and many of the icons (& thus tooltips) did not even load (please refer to the above screen shots instead) - THANK YOU, @NARUDESIGNS, I will definitely check out Github Icons and Feather icons - at this point, though, these are neither here nor there as all this can be easily fixed (also the use of icons is still a point of discussion). Moreover, I opened this PR to discuss and get feedback on the overall design.
Do we need to go in a different direction or is this suitable to build upon?

To the choices I've made so far -from the project description and feedback/discussions during the contribution phase, I feel like we are adamant with wanting the screen/canvas/image-container to be as large as possible.
Is this still true?
With this route, we simply must sacrifice real estate that would otherwise be used for the tools/information/instruction/elaboration (especially on the mobile layout)... hence the use of icons. One of my greatest frustrations with sites like Photoshop and Photopea (& this current state of Infragram) is that there is no clear understanding or direction on how to use it, especially the first time. I also find the icons more confusing than helpful and as you said, "somewhat mysterious" - they do not effectively convey the meaning of the underlying functionality or when it is appropriate to use them.

For one, I wonder if the icons are somewhat mysterious. Of course there can be tooltips, but what else can we do? Could we have an explanatory "tour popover" already open next to the Quick Start area?

Yes, I think so. I did add tooltips to each icon to help explain what each will be used for (exact wording will be addressed). I still do not think that this is enough information to get started or to fully understand the tools, though. I like your idea of the "tour popover" and I intend on utilizing the information icon next to the tool titles to this end or as a modal link with further information,

In addition, I think that we can utilize the image-container/screen-ui space to add descriptive steps, perhaps with arrows and instructions for the tools. Ultimately, some the information that will be included in the welcome tour can be layed out on the screen and will be visible until and image or video is uploaded.

I share many of the concerns you raise. I would like to point out, as previously mentioned, that I came to a stopping point in order to get overall design feedback and had not yet addressed the screen/canvas/camera. For clarification, I intended to put the camera/webcam selection on/in the the image-container/screen ui and also intend on utilizing this space for more elaborate instruction on how to proceed.

To your concern,

i realize we're rapidly "in the weeds" on this design, which is OK, but let's not overwhelm ourselves.

I feel like the design IS the project and that all encompassing cannot be immediately addressed. Or, perhaps it should be? I do understand you cannot give proper feedback without a clear representation of my ideals. So, unless you would like for me to go in a different direction, I am going to continue on with this layout, adding to the image container and correcting what is obviously not working. I hope to finish a more elaborate design over the weekend and we can begin addressing more specific concerns at our next meeting.

Even though much must be address, the draft is published here: https://stephaniequintana.github.io/infragram/index2.html.

wanting the screen/canvas/image-container to be as large as possible.
Is this still true?

Yes, i think so! It still seems like the most promising way forward. If you were to start to find a lot of compelling reasons to question it though, I'm open to that discussion.

utilize the image-container/screen-ui space to add descriptive steps, perhaps with arrows and instructions for the tools. Ultimately, some the information that will be included in the welcome tour can be layed out on the screen and will be visible until and image or video is uploaded.

This sounds great. I look forward to seeing your ideas on this when the time is right!

I feel like the design IS the project and that all encompassing cannot be immediately addressed. Or, perhaps it should be? I do understand you cannot give proper feedback without a clear representation of my ideals.

Yes, no problem -- i just meant that sometimes when I do design work, i have trouble balancing my attention on finer details (which are important) vs. larger questions of layout and organization. Ultimately it'll be cyclical - we'll look at both, and the design process is a cycle. So no worries.

So, unless you would like for me to go in a different direction, I am going to continue on with this layout, adding to the image container and correcting what is obviously not working. I hope to finish a more elaborate design over the weekend and we can begin addressing more specific concerns at our next meeting.

Super! Sounds great, and I agree this is a great starting path. As the more elaborate design starts to fill in, it'll be easier for us to tell if this approach is working well. But so far so good! Thank you!

Also, just at the level of HTML, the current index2.html looks well organized and legible; a great start.

@jywarren, I just made quite a few changes to the sandbox ui and I am in definite need of feedback. I kind-of kept adding and adding information, because I feel like I wanted more the first time I visited the site, but it got a bit out of control and now just feels crowded 🚧 Design is tough! 😁 There are several choices I'm not crazy about - the accent colors seem drastic, for one - or may not work at all, but I left them in hopes of hearing opinions.

Nearly every icon has a tooltip and the "steps" are actually buttons for popovers (although I didn't figure out how to convey that). Much of the information is to help the team with my intent, but I'd appreciate strong feelings on any slice of it, good or bad.

There is still quite a bit of styling that is necessary, esp on the mobile end - I wanted to get feedback on the layout before moving forward with that. I've also collected some questions, mostly toward my own understanding of the tool, that I will bring at a later time.

Please let me know what you think (no rush) 😁
hope you're having a great day
for convenience, here's the link

• The center explanatory text looks super. I love the use of pink. One thing to begin to bear in mind on colors is color accessibility -- there are some resources here: (http://web-accessibility.carnegiemuseums.org/design/color/, https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance), but a good quick way is to use a tool like this: https://www.toptal.com/designers/colorfilter
• The left sidebar is looking great so far. I was wondering if there are ways of
  • Bootstrap 4 has a collapsible nav which works kind of like an accordion: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example
  • Bootstrap 5 if we chose to upgrade, has a true accordion component: https://getbootstrap.com/docs/5.0/components/accordion/
• I like the idea of the different "step" buttons. I wonder if it could be organized into a tour -- maybe using a plugin or library like perhaps https://introjs.com/, which looks pretty well supported too. What do you think? You could also look around for some additional different options to compare, if you like.
• I like the minimalism of the buttons, but wonder if some there's other signal to show what's a button before hovering. How do programs like Photoshop manage such small spaces?
• one last thought is that the text inputs are pretty small. I tried ctrl-+ to increase screen size and it actually works pretty well. Maybe the default text size could be slightly larger? Or we could make it adaptive as well? Just thinking on this, no big rush to change anything yet, and maybe the accordion will overall make space management in the sidebar easier.

I think it might be nice to think about merging this PR relatively soon. We could rename it something like "initial draft of new interface" or "...v2 interface" or just remove [wip]-- could be a nice feeling to see it merge, and you could use the opportunity to begin narrowing what you're working on in a given PR. But no pressure, it's just an idea.

Another thought to keep in mind-- we might also think about what our versioning will eventually look like. @Forchapeatl may also be interested in this. Right now we're at v0.3.0:

UI design changes aren't tracked as strictly, but it could be useful to read over https://docs.npmjs.com/about-semantic-versioning to think about how that number changes, what it means, etc, and when we want to bump the version number up.

Thanks @stephaniequintana this is looking great! Love the level of detail that's coming out!

I know I mentioned it in the meeting, but wanted to drop the idea of offering a couple of images for users to explore with here, too. I got the idea from fotor and befunky. Here's how befunky.com offers it:

The center explanatory text looks super. I love the use of pink

I'm really glad you like the intro text. I think the specific wording could use some love, but I will work on that. Perhaps the community can weigh in, too. The pink was a happy accident - i wrapped "NDVI" in the <code> tag and viola, Google colored it bright pink! I do like that it draws the eye to the quick start. I will look into color accessibility and run it through a tool also ✔️

...different "step" buttons. I wonder if it could be organized into a tour -- maybe using a plugin or library

I'm thinking along the same lines. Between this and the Bootstrap tour, we can come up with a good solution.

the text inputs are pretty small.

It's a bit embarrassing, but I seem to always have an issue with font sizes. Here, I added multiple inline font changes while adjusting the layout. Between this and the inline/internal syling I'd like to clean up the code, better to do it right the first second time.

I like the minimalism of the buttons, but wonder if some there's other signal to show what's a button before hovering. How do programs like Photoshop manage such small spaces?

Most other programs only address the icon style buttons with just a hover. I agree that we need more, though. I think we can add labels once we free up space using drop-downs/collapse/accordion style menus and possibly even add a tool-tour, separate from the welcome/get-started tour. I did find one that does a good job of it, fotor.com.

I was planning on coding something like this into the project, but I see that Bootstrap 5 has an Offcanvas component. I believe it only works with the viewport edges, but unlike the accordion, it will also open up from the bottom. I think this will be very handy for the bottom row tools on mobile devices and we may be able to move all of the tools into the component. For this reason I think I'd like to use Bootstrap 5. Please let me know what you all think.

I'm excited about finally merging the PR; I can start to see the advantages of working with a more narrow and specific objectives and am very much hoping to be there soon.

My next steps will be to move this over to Bootstrap 5, unless there are any objections to do that, of course. As always, all thoughts are appreciated 😄

@jywarren, @TildaDares, @cesswairimu & @Forchapeatl...
I finally got to a stopping point on switching over to Bootstrap 5 - I was able to use the offcanvas component for the Quick Start menus and the accordion for the Analysis inputs. I'm still trying to figure out how to style the accordion.

In an attempt to clarify what each tool is for, I added a lot of wording and feel like the screen is crowded now. I do like the previous pink font, but changed it up a bit to see other options. Your thoughts would be greatly appreciated.

I also left the "steps" buttons out, but intend to keep them and will focus more on placement and usage we work on the welcome tour.

I believe that I am ready to merge this PR so that I can begin to focus on more specific individual tasks. Of course, the UI will be a work in progress; hopefully we can start connecting the functionality so that @forcha can begin her work on this branch.

Again, I appreciate all feedback. Hope everyone has a great weekend 💯
(and for convenience you can see this latest version at https://stephaniequintana.github.io/infragram/index2.html

This looks great @stephaniequintana. The color palette you chose looks really nice.

I don't think the screen is over crowded. I don't know about everyone else but I like using websites that have a clear description of what each tool is for.

I think the description on the button already explains it's use. I don't think we need a tooltip for this button.

Adding this section is absolutely brilliant. The images really demonstrate what Infragram does.

The language used for the Red and Blue filters is also very technical. Is it possible to add an icon to each filter that opens a pop-up that includes an Explain Like I'm 5 description along with images? I feel like that'll make Infragram more beginner-friendly. Something like this:

I also noticed that the intro text disappears when you click on it but there's no warning for that. It also leaves the main area empty. So we could add a button that says Get started which hides the intro and then converts the main area to a drag-and-drop field. It'll look similar to the one on the website you mentioned.

Just a small thing but hovering over the buttons creates this jerky motion. Is this possible to make it more smooth?

I'd love to hear your thoughts about this @stephaniequintana. Great work on the design and implementation!!

@TildaDares, I love your explainLikeI'mFive idea 😄
There is such great information, too, I think we can come up with something helpful and interesting.

I also noticed that the intro text disappears when you click on it but there's no warning for that. It also leaves the main area empty. So we could add a button that says Get started which hides the intro and then converts the main area to a drag-and-drop field. It'll look similar to the one on the website you mentioned.

This, too ☝️ 🔥 👍
With no intention in mind, I copied over the OnClick function that clears the screen of the current sandbox and I didn't really plan beyond that. I really like the idea of the screen converting to the drag-and-drop image. That image alone clearly conveys the first step and I like how clean and simple it looks.
I have two conflicting thoughts:

1. I wonder if adding another button adds to the overall complexity? There will be a welcome modal with steps, drag/upload/select are already listed as ways to get started... OR
2. Would it offer an overwhelmed beginner additional ease, effectively making the site easier to use?

I'm most likely over-complicating it.

• What do you think of the intro text fading out (after a given timeframe) and being replaced by the upload image?
• Might we simply just add a warning that the message will disappear and then go to the upload screen?
• We can not include the intro text and begin with the cleanly styled intro screen (like you posted above). Thoughts?

I hope I'm not coming across as needy. I'm finding these decisions tough 😅 and I appreciate all the help and input.

To all, we greatly appreciate any feedback or ideas on the state and direction of the new UI. All thoughts and ideas are welcome. Thanks & Cheers!

@jywarren, @TildaDares, @cesswairimu, @Forchapeatl -

I've made some changes to the code - cleaned it up, npm-installed Bootstrap5, added infragram2.css and infragram2.js...My [local] branch is ready to merge and I would like to do so soon so that I can begin hooking up functionality and @Forchapeatl and I can begin testing. A few things:

• I will (un-expectedly) be traveling this week. Thus, the hours I'll be working will be sporadic. Today and tomorrow afternoon should be the only variants, but I will keep you posted otherwise.
• I'm not sure where I took a turn, but cannot push because of a merge conflict; my branch is also ahead a commit and behind on others. I will iron out all of this out or reach out for help if necessary. I hope to have pushed and be ready to merge by tomorrow.

Please let me know of any concerns.

Hi @stephaniequintana this is all looking great and I think we should focus for just a moment on merging it and identifying our next steps, or focus areas. Lots of good things to think on but before we get too deep in it, let's do the merge, take breath, and refocus - it's a good idea in general not to go too long on one PR anyways.

Regarding can't push, can you compare your commits on your local branch to https://github.com/publiclab/infragram/pull/417/commits to see if there are some missing in either place? You can sometimes just git pull origin sandbox-grid to pull them down and then git push again. You could git branch sandbox-grid-bkp first just to save a copy of your current local state, in case.

If you'd like help with the conflicts, feel free to push up your current local into a newly named branch and make a new PR where we can compare and resolve changes.

OK rebasing figured out and we can move to #426 now! Let's start a new convo in a new PR after that -- and any unresolved questions or convos from this PR can move to new issues or PRs! Thanks!