Skip to content

Outreach #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kjy5 merged 4 commits into from
Jan 31, 2025
Merged

Outreach #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8ae3c8
Fixed undergrad avatars
kjy5 Jan 31, 2025
98001b5
Updated for everyone wording
kjy5 Jan 31, 2025
e62622b
Repo link
kjy5 Jan 31, 2025
c5a0c23
About us, removed alt visibility
kjy5 Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified src/assets/people/dan.avif
View file
Open in desktop
Binary file not shown.
Binary file modified src/assets/people/jasmine.avif
View file
Open in desktop
Binary file not shown.
Binary file modified src/assets/people/kai.avif
View file
Open in desktop
Binary file not shown.
Binary file modified src/assets/people/kenneth.avif
View file
Open in desktop
Binary file not shown.
Binary file modified src/assets/people/qiqi.avif
View file
Open in desktop
Binary file not shown.
Binary file modified src/assets/people/selina.avif
View file
Open in desktop
Binary file not shown.
11 changes: 9 additions & 2 deletions src/components/Graphics.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,27 @@
import type { DefaultImageMetadata } from "../scripts/types";
interface Props {
imageMetadatas: Promise<DefaultImageMetadata[]>;
alt: string;
}

const { imageMetadatas } = Astro.props;
const { imageMetadatas, alt } = Astro.props;
---
{
imageMetadatas.then((metadatas) => (
<!--suppress HtmlUnknownTag -->
<graphics-element data-image-srcs={JSON.stringify(metadatas.map(({default: {src}}) => src))}>
<img class="max-w-full rounded-xl" src={metadatas[0].default.src} width={metadatas[0].default.width}
height={metadatas[0].default.height} alt=""/>
height={metadatas[0].default.height} alt={alt}/>
</graphics-element>
))
}

<style>
img {
font-size: 0;
}
</style>

<script>
class Graphics extends HTMLElement {
connectedCallback() {
Expand Down
170 changes: 148 additions & 22 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ import type { DefaultImageMetadata } from "../scripts/types";

import Durations from "../assets/future/durations.avif";
import Parallax from "../assets/future/parallax.avif";

// Import static images.
import MISRig from "../assets/manipulators/mis-rig.avif";
import MPMRig from "../assets/manipulators/mpm-rig.avif";
import ScientificaManipulator from "../assets/manipulators/scientifica-manipulator.avif";
import SensapexRig from "../assets/manipulators/sensapex-rig.avif";
import TeachingPinpoint from "../assets/outreach/teaching-pinpoint.avif";
import UsingPinpoint from "../assets/outreach/using-pinpoint.avif";
import Dan from "../assets/people/dan.avif";
import Jasmine from "../assets/people/jasmine.avif";
import Kai from "../assets/people/kai.avif";
import Kenneth from "../assets/people/kenneth.avif";
Expand All @@ -41,7 +43,8 @@ const automationImporter = new GraphicsImporter(
<Layout imageSrcs={[introImporter.getImageSrcs(), equipmentImporter.getImageSrcs(), insertionImporter.getImageSrcs(), automationImporter.getImageSrcs()]}>
<!-- Pinpoint Intro Sequence. -->
<TwoColumn>
<Graphics imageMetadatas={introImporter.getImageMetadatas()} slot="graphics"/>
<Graphics imageMetadatas={introImporter.getImageMetadatas()} alt="Brain opening to reveal multiple regions"
slot="graphics"/>

<!-- Titles. -->
<div class="flex justify-center items-center h-dvh">
Expand Down Expand Up @@ -105,7 +108,8 @@ const automationImporter = new GraphicsImporter(

<!-- Simulate Equipment. -->
<TwoColumn>
<Graphics imageMetadatas={equipmentImporter.getImageMetadatas()} slot="graphics"/>
<Graphics imageMetadatas={equipmentImporter.getImageMetadatas()} alt="Showcase of equipment pinpoint supports"
slot="graphics"/>

<div class="h-1/3dvh"/>
<div class="h-3/2dvh">
Expand All @@ -122,7 +126,8 @@ const automationImporter = new GraphicsImporter(

<!-- Make complex plans with ease. -->
<TwoColumn>
<Graphics imageMetadatas={insertionImporter.getImageMetadatas()} slot="graphics"/>
<Graphics imageMetadatas={insertionImporter.getImageMetadatas()}
alt="Electrophysiology probe inserted into brain" slot="graphics"/>

<div class="h-1/3dvh"/>
<div class="h-3/2dvh">
Expand Down Expand Up @@ -202,7 +207,8 @@ const automationImporter = new GraphicsImporter(
</div>

<TwoColumn>
<Graphics imageMetadatas={automationImporter.getImageMetadatas()} slot="graphics"/>
<Graphics imageMetadatas={automationImporter.getImageMetadatas()}
alt="Automated insertion in pinpoint synced with real probe" slot="graphics"/>

<div class="h-1/4dvh"/>
<div class="h-3/2dvh">
Expand Down Expand Up @@ -270,28 +276,32 @@ const automationImporter = new GraphicsImporter(
<Image class="rounded-xl" src={TeachingPinpoint} alt="Teaching Pinpoint"/>
<Article>
<p>Dr. Birman teaching Pinpoint to researchers at the Allen Institute 2024 Neuropixels and OpenScope
Workshop</p>
Workshop.</p>
</Article>

<br/>

<Image class="rounded-xl" src={UsingPinpoint} alt="Using Pinpoint"/>
<Article>
<p>A workshop attendee using Pinpoint in their laptop browser</p>
<p>A workshop attendee using Pinpoint through their laptop browser.</p>
</Article>
</div>

<div class="basis-1/2 self-stretch">
<div class="sticky top-1/3">
<Article>
<h2>Neuroscience for everyone</h2>
<h3>Pinpoint is free software for everyone to use. We teach and share the platform at various
workshops and conferences</h3>
<h3>Pinpoint is free software for everyone to use. Run it from a web browser, a desktop computer, or a handheld gaming console.</h3>
<p>We teach and share the platform at various
workshops and conferences.</p>
<ul>
<li><a href="https://www.sfn.org/meetings/neuroscience-2024">Society for Neuroscience
Conference 2022, 2023, and 2024</a></li>
<li>Society for Neuroscience
Conference <a href="https://www.sfn.org/meetings/neuroscience-2022">2022</a>, <a
href="https://www.sfn.org/meetings/neuroscience-2023">2023</a>, <a
href="https://www.sfn.org/meetings/neuroscience-2024">2024</a>, and (soon) <a
href="https://www.sfn.org/meetings/neuroscience-2025">2025</a></li>
<li><a href="https://alleninstitute.org/events/2024-neuropixels-and-openscope-workshop/">Allen
Institute Neuropixels and OpenScope Workshop</a></li>
Institute Neuropixels and OpenScope Workshop</a> 2023 and 2024</li>
<li><a href="https://www.ucl.ac.uk/neuropixels/training/2024-neuropixels-course">UCL
Neuropixels Course</a></li>
</ul>
Expand All @@ -308,28 +318,28 @@ const automationImporter = new GraphicsImporter(
<div class="basis-1/2 self-stretch">
<div class="avatar-group -space-x-6 rtl:space-x-reverse">
<div class="avatar">
<div class="w-12">
<Image src={Kenneth} alt="Kenneth"/>
<div class="w-auto">
<img src={Kenneth.src} alt="Kenneth"/>
</div>
</div>
<div class="avatar">
<div class="size-12">
<Image src={Jasmine} alt="Jasmine"/>
<div class="w-auto">
<img src={Jasmine.src} alt="Jasmine"/>
</div>
</div>
<div class="avatar">
<div class="size-12">
<Image src={Qiqi} alt="Qiqi"/>
<div class="w-auto">
<img src={Qiqi.src} alt="Qiqi"/>
</div>
</div>
<div class="avatar">
<div class=size-12">
<Image src={Selina} alt="Selina"/>
<div class="w-auto">
<img src={Selina.src} alt="Selina"/>
</div>
</div>
<div class="avatar">
<div class="size-12">
<Image src={Kai} alt="Kai"/>
<div class="w-auto">
<img src={Kai.src} alt="Kai"/>
</div>
</div>
</div>
Expand All @@ -339,12 +349,124 @@ const automationImporter = new GraphicsImporter(
<div class="sticky top-1/3">
<Article>
<h2>Fostering the next generation</h2>
<h3>Pinpoint was developed with the help of a diverse group of undergraduate researchers</h3>
<h3>Pinpoint was developed with the help of a diverse group of undergraduate researchers.</h3>
<ul>
<li>Kenneth Yang</li>
<li>Jasmine Schoch</li>
<li>Qiqi Liang</li>
<li>Selina Li</li>
<li>Kai Nylund</li>
</ul>
</Article>
</div>
</div>
</div>
</div>

<div class="h-1/4dvh"/>

<div class="hero">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="basis-1/2 self-stretch">
<div class="card lg:card-side bg-base-200">
<figure>
<img src="https://repository-images.githubusercontent.com/439779355/697a35bd-3ae0-4fd1-b7c5-fb9471189739"
alt="Pinpoint GitHub Repository"/>
</figure>
<div class="card-body">
<h2 class="card-title">GitHub - VirtualBrainLab/Pinpoint</h2>
<p>Multi-probe trajectory planning in an intuitive 3D environment</p>
<div class="card-actions justify-end">
<a href="https://github.com/VirtualBrainLab/Pinpoint" class="btn btn-primary">Visit the
Repository</a>
</div>
</div>
</div>
</div>

<div class="basis-1/2 self-stretch">
<div class="sticky top-1/3">
<Article>
<h2>Built by everyone</h2>
<h3>Pinpoint is open-source software meaning anyone can review our code, report problems, and
submit changes.</h3>
<p>The open nature of our code also ensures it will still be maintainable even after we stop
developing it.</p>
</Article>
</div>
</div>
</div>
</div>

<div class="h-1/4dvh"/>

<div class="hero">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="basis-1/2 self-stretch">
<div class="card lg:card-side bg-base-200">
<figure>
<img src="https://virtualbrainlab.org/_images/vbl-header.png"
alt="Pinpoint GitHub Repository"/>
</figure>
<div class="card-body">
<h2 class="card-title">VBL — Virtual Brain Lab</h2>
<p>We develop 3D visualization tools for experimenting with, exploring, and simulating
brains.</p>
<div class="card-actions justify-end">
<a href="https://virtualbrainlab.org/" class="btn btn-primary">Visit our Website</a>
</div>
</div>
</div>
</div>

<div class="basis-1/2 self-stretch">
<div class="sticky top-1/3">
<Article>
<h2>Learn more about our projects</h2>
<h3>See what else we've made and get in contact with us!</h3>
</Article>
</div>
</div>
</div>
</div>

<div class="h-1/4dvh"/>

<div class="hero">
<div class="hero-content text-center">
<div>
<Article>
<h1>Made with Unity</h1>
<h2>Actively Maintained by:</h2>
</Article>

<br/>

<div class="flex space-x-8">
<a href="mailto:[email protected]">
<div class="avatar">
<div class="w-64 rounded-full">
<img src={Kenneth.src} alt="Kenneth J. Yang"/>
</div>
</div>
<Article>
<p>Kenneth J. Yang - University of Washington</p>
</Article>
</a>
<a href="mailto:[email protected]">
<div class="avatar">
<div class="w-64 rounded-full">
<img src={Dan.src} alt="Dr. Daniel Birman"/>
</div>
</div>
<Article>
<p>Dr. Daniel Birman - Allen Institute</p>
</Article>
</a>
</div>
</div>
</div>
</div>
</Layout>

<style>
Expand All @@ -354,4 +476,8 @@ const automationImporter = new GraphicsImporter(
margin-top: -45dvh;
visibility: hidden;
}

img {
font-size: 0;
}
</style>