Infragram: Implement Full-Screen User Interface, Planning and Discussion

[stephaniequintana]

Hi, everyone! 👋 😄 This is the Planning Issue for the Outreachy Full-Screen UI Design for infragram.org. The project is in collaboration with the GSOC Full-Screen UI and Video Upload and this initiative includes overlapping goals. Each of the following will be further split into smaller and smaller tasks in the upcoming weeks. All are open for discussion and improvement.

Sandbox UI

• Implement Bootstrap grid foundation
  • Include space for stretch-goal and future modal additions
• Implement Individual Tools
  • Canvas and Screen UI
    • Cross-browser drag-and-drop
    • Connect Sample Images
  • Camera/Webcam Selection and Capabilities (gsoc)
    • Add option to close webcam input
    • Enable image and video stream mirroring
    • Add file filters on input to optimize infrared analysis
    • Integrate new cross-platform WebRTC latest camera selection
    • Accept multiple Video Resolutions
    • Add loop/pause/play/seek bar on canvas video
    • Allow conversion of the whole video, WebGL video manipulation
    • Perform video analysis on browser
    • Allow video panning/zooming
  • Analyze and Run Process Functionalities
  • Colorize Selection Functionality
  • Overlay
  • Quick Start Guide
    • Refine verbiage and add images for better guided assistance
  • Save, Export, and Download
  • Logo/Header/Additional-Links

Homepage Design and Implementation

• Concept/Design/Review Approval
• Transfer Q&A Section from Sandbox page to Homepage
• Include section on newly created sandbox content
• Testing
• Implementation
• Create FTO Issues

Modal Additions

• Help and Tips (separate modals)
  • Community Outreach - plan initiatives (survey, distribution, timeline...)
  • Content/Design/Review Approval
  • Testing
  • Implementation
• Welcome Modal (in conjunction w/gsoc)
  • Breakdown existing video tutorial and getting started info into steps
  • Implement with Bootstrap tour
• Colorize popup modal window to describe each colormap and offer thumbnails

FTO Issues

• Add Q&A link from homepage to the Q&A icon on the Sandbox page

---

Project Description From Public Lab

Outreachy: This project will overhaul the UI of Infragram to be full-screen and create space for new features like multiple resolutions of video, dragging in a recorded video instead of a still image for conversion, and pop up panels with Q&A, tips, tutorials, and more, so that they can feature more helpful guidance text.

GSOC: This project will deliver video file inspection functionality for vegetative(plant) analysis. Users will be able to choose disired camera resolutions, evalute plant heath while panning or zooming from video files and export processed file. New Infragram users will be assisted with a boostrap tour guide.The outcome also involves a better UI which will the the infragram experence to the next level.

• My Original Proposal Application and Planning Timeline
• Forcha Pearl Fri's (GSOC collaboration partner's) Proposal

[stephaniequintana]

@jywarren, @TildaDares, @cesswairimu - Please review and advise.
Also, I have written out a few questions here - please let me know if there is a more convenient medium to communicate on. Thanks & I hope everyone is having a great day! 😄

[jywarren]

Hi @stephaniequintana, this is looking really great. I like how you've noted parts of the project which may be part of the GSoC side of things. I think we should look to set up a meeting between you and @Forchapeatl to work out where the overlaps are, or which parts may be dependent on which other parts. My hope is that we can develop a working plan where different systems are well separated (the codebase is not too bad in this respect already, but I'm sure there's room for improvement) so that making changes to two different parts of the code doesn't cause trouble. That is, each component should have clear expectations as to how it interacts with other systems, and those integrations themselves should be stable, while the inner workings of each area of code can change internally. Does that make sense?

For example, if you change the UI, it would still use the same functions to connect buttons with specific functionalities. If you change something in the image processing handling code, it shouldn't have an effect on the UI.

But let's start with small changes, and that'll be a good opportunity to test that method of working out. What do you think?

[jywarren]

As to your questions, let's do it in another issue so we can have a discussion! I'll open one now.

[Forchapeatl]

Great work @stephaniequintana

[stephaniequintana]

@jywarren, @cesswairimu, @TildaDares -
Now that we've merged a working UI to build upon, I'd like to give more detail to this planning issue and be able to connect it to milestones. I'm not currently able to (the milestone link is disabled and I'm unable to open it). Do I need a specific permission?

[AminMusah]

@jywarren @stephaniequintana @Forchapeatl im an outreachy applicant and i would like to improve the Header and footer based on the recent trend of UI and UX in regard to the Homepage Design and Implementation.

[jywarren]

Hello @AminMusah thank you -- what specific suggestions do you have for the header and footer?