NiiVue: designing a user interface for mobile, tablet, and desktop brain imaging visualization

[hanayik]

Title

NiiVue: designing a user interface for mobile, tablet, and desktop

Short description and the goals for the OHBM BrainHack

NiiVue is brain imaging visualisation software that works on any device and all modern web browsers. NiiVue can read and display more than 30 volume and surface file types used in neuroimaging.

NiiVue is designed to be a minimal library that other developers can use. However, we want to create a full-featured user interface with the bells and whistles that most users would expect from well designed visualisation software. The user interface will be friendly, inviting, interactive, and accessible (all things we expect from modern software).

We will use the following frameworks, languages, and projects:

• React functional components
• Javascript
• Material UI
• Vite
• NiiVue

We have put a lot of effort into the NiiVue library, but our demo user interface is not yet full-featured.

This user interface MUST work on mobile, tablet, and desktop browsers and will support both touch interfaces and mouse/keyboard interfaces.

At the BrainHack we will:

• collaboratively design the user interface in Figma before coding (starting from an initial design from @hanayik)
• outline the steps to create the UI as a list of Github issues
• implement the UI design and interactivity by working on our predefined list of issues
• test and re-design as needed

Link to the Project

https://github.com/niivue/niivue-ui

Image for the OHBM brainhack website

No response

Project lead

Taylor Hanayik, @hanayik, hanayik#7907

Main Hub

Glasgow

Other Hub covered by the leaders

• [ ] Glasgow
• [ ] Asia / Pacific
• [ ] Europe / Middle East / Africa
• [ ] Americas

Skills

There will be plenty of non-coding tasks such as helping design the software in Figma and contribute ideas. After the initial design stage, we will start coding.

• an eye for good design (find web apps/software you like and think about why you like it)
• empathy for the user of the software (likely you in the future!)
• Javascript experience
• React experience
• basic CSS skills
• motivation, and ability to work collaboratively
• basic Git skills (clone, branches, push, pull, rebase, merge)

If you are lacking some of these skills that is perfectly fine. We can find contribution opportunities for you still!

Recommended tutorials for new contributors

• [X] Set up a brainhack friendly computing environment
• [X] A introduction to Bash
• [ ] Python: Writing a script
• [ ] Python: Data analysis with Python
• [ ] Python: Visualisation
• [ ] Machine learning basics
• [ ] BIDS
• [ ] Machine learning for neuroimaging
• [X] VCS: Using Git and Github
• [ ] VCS: Data management with Datalad
• [ ] Virtualization
• [ ] High Performance Computing: Oracle cloud resource

Good first issues

We will establish the list of issues after the design process. There will be something for everyone (all skill levels)

Twitter summary

BrainHack project: making a feature-rich user interface for the NiiVue visualisation software. We will collaboratively design using Figma, assign implementation tasks using Github issues, and then work on bringing our design to life in code.

Short name for the Discord chat channel (~15 chars)

niivue

Please read and follow the OHBM Code of Conduct

• [X] I agree to follow the OHBM Code of Conduct during the hackathon

[djarecka]

Thank you for submitting the project! We have 35 projects right now, woohoo! But that means the projects pitches will have to be short. We will give you tomorrow 2 minutes to pitch your project, you can have one slide or no slides! If you decide to use a slide, please include the link to the slide here.

And don't worry, you will still have more time to talk about your project during the BrainHack :-)

[hanayik]

Here's my slide for the project pitch:

https://docs.google.com/presentation/d/1wqMAdHob4KwdnMvrITw10h14trm5O3yVBFEFLNJj-tw/edit?usp=sharing

[soichih]

Hi @hanayik are you on the brainhack discord? I'd like to meet up but where are you sitting?