Skip to content

Commit 986a74e

Browse files
CamDavidsonPilonCamDavidsonPilon
committed
lightbox and XR docs
1 parent 5d697e1 commit 986a74e

File tree

15 files changed

+145
-22
lines changed

15 files changed

+145
-22
lines changed

‎src/components/AssemblyInstructionBlock.js‎

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,39 @@ import React from 'react';
22
import clsx from 'clsx';
33
import styles from './AssemblyInstructionBlock.module.css';
44

5-
import { useColorMode } from '@docusaurus/theme-common';
65
import {useLocation} from '@docusaurus/router';
76

87

98
export default function AssemblyInstructionBlock({children, title, images}) {
109

1110
const url = useLocation().pathname.split('#')[0];
1211
const [mainImage, setMainImage] = React.useState(images[0]);
12+
const [isEnlarged, setIsEnlarged] = React.useState(false);
13+
14+
React.useEffect(() => {
15+
if (!isEnlarged) {
16+
return;
17+
}
18+
19+
const closeOnEscape = (event) => {
20+
if (event.key === 'Escape') {
21+
setIsEnlarged(false);
22+
}
23+
};
24+
25+
window.addEventListener('keydown', closeOnEscape);
26+
return () => window.removeEventListener('keydown', closeOnEscape);
27+
}, [isEnlarged]);
1328

1429
const imageSelect = (n) => (event) => {
15-
setMainImage(images[n])
30+
const nextImage = images[n];
31+
if (nextImage === mainImage) {
32+
setIsEnlarged(true);
33+
return;
34+
}
35+
36+
setMainImage(nextImage);
37+
setIsEnlarged(false);
1638
}
1739

1840
const process = (value) => {
@@ -26,8 +48,15 @@ export default function AssemblyInstructionBlock({children, title, images}) {
2648
<div id="mainImage" style={{width: "55%", float: "left", marginRight: "10px"}}>
2749
<h2>{title} <a href={url + "#" + process(title)}>#</a></h2>
2850
<img
29-
style={{maxHeight: 440}}
51+
onClick={() => setIsEnlarged(true)}
52+
style={{
53+
height: 440,
54+
maxWidth: '100%',
55+
objectFit: 'contain',
56+
cursor: 'zoom-in',
57+
}}
3058
src={require(`/static/img/${mainImage}`).default}
59+
3160
/>
3261
{images.length > 1 &&
3362
<div id="thumbnails" style={{width: "100%"}}>
@@ -51,8 +80,24 @@ export default function AssemblyInstructionBlock({children, title, images}) {
5180
<section style={{width: "44%", float: "left", marginTop: "40px"}}>
5281
{children}
5382
</section>
83+
{isEnlarged && (
84+
<div className={styles.lightboxOverlay} onClick={() => setIsEnlarged(false)}>
85+
<button
86+
type="button"
87+
className={styles.lightboxClose}
88+
onClick={() => setIsEnlarged(false)}
89+
aria-label="Close enlarged image"
90+
>
91+
x
92+
</button>
93+
<img
94+
className={styles.lightboxImage}
95+
src={require(`/static/img/${mainImage}`).default}
96+
onClick={(event) => event.stopPropagation()}
97+
/>
98+
</div>
99+
)}
54100

55101
</div>
56102
);
57103
}
58-

‎src/components/AssemblyInstructionBlock.module.css‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,41 @@
99
margin: 3px 0px;
1010
border: 3px solid white;
1111
padding: 3px 3px 1px 3px;
12-
}
12+
}
13+
14+
.lightboxOverlay {
15+
position: fixed;
16+
inset: 0;
17+
background: rgba(0, 0, 0, 0.78);
18+
z-index: 1000;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
padding: 2rem;
23+
}
24+
25+
.lightboxImage {
26+
max-width: min(1200px, 95vw);
27+
max-height: 90vh;
28+
width: auto;
29+
height: auto;
30+
object-fit: contain;
31+
cursor: zoom-out;
32+
box-shadow: 0 14px 48px rgba(0, 0, 0, 0.4);
33+
border-radius: 8px;
34+
}
35+
36+
.lightboxClose {
37+
position: absolute;
38+
top: 1rem;
39+
right: 1rem;
40+
width: 2.2rem;
41+
height: 2.2rem;
42+
border: 0;
43+
border-radius: 999px;
44+
background: rgba(255, 255, 255, 0.95);
45+
color: #222;
46+
font-size: 1.2rem;
47+
line-height: 1;
48+
cursor: pointer;
49+
}

‎static/img/user-guide/hardware-assembly/upgrade_XR/choose_xr_model.png‎

561 KB
Loading

‎static/img/user-guide/hardware-assembly/upgrade_XR/update_xr_config.png‎

510 KB
Loading

‎user-guide/01-getting-started/00-gettingstarted.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ import Card from '@site/src/components/Card';
1212
<h3> Pioreactor 40ml assembly</h3>
1313

1414
<div className="cardGrid">
15-
<Card imageUrl="user-guide/hardware-assembly/pioreactor_40ml_v1.5_splash.jpeg" headerText="Pioreactor 40ml v1.5" isNew={true} linkUrl="/user-guide/40ml-v15-hardware-setup-intro"/>
15+
<Card imageUrl="user-guide/hardware-assembly/pioreactor_40ml_v1.5_splash.jpeg" headerText="Pioreactor 40ml v1.5" linkUrl="/user-guide/40ml-v15-hardware-setup-intro"/>
1616

1717
<Card imageUrl="user-guide/hardware-assembly/pioreactor_40ml_v1.0_splash.jpeg" headerText="Pioreactor 40ml v1.0" linkUrl="/user-guide/40ml-hardware-setup-intro"/>
1818
</div>
1919

2020
<h3> Pioreactor 20ml assembly</h3>
2121

2222
<div className="cardGrid">
23-
<Card imageUrl="user-guide/hardware-assembly/pioreactor_20ml_v1.5_splash.jpeg" headerText="Pioreactor 20ml v1.5" linkUrl="/user-guide/20ml-v15-hardware-setup-intro" isNew={true} />
23+
<Card imageUrl="user-guide/hardware-assembly/pioreactor_20ml_v1.5_splash.jpeg" headerText="Pioreactor 20ml v1.5" linkUrl="/user-guide/20ml-v15-hardware-setup-intro" />
2424

2525
<Card imageUrl="user-guide/hardware-assembly/pioreactor_20ml_v1.1_splash.jpg" headerText="Pioreactor 20ml v1.1" linkUrl="/user-guide/20ml-v11-hardware-setup-intro"/>
2626
<Card imageUrl="user-guide/hardware-assembly/pioreactor_20ml_v1.0_splash.png" headerText="Pioreactor 20ml v1.0" linkUrl="/user-guide/hardware-setup-intro"/>

‎user-guide/01-getting-started/01-assembly_guides/00-kit-assembly/00_pioreactor_40ml_v1.5/_category_.yaml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
collapsed: true
22
collapsible: true
33
label: "Pioreactor 40ml v1.5"
4-
className: sidebar-item--new

‎user-guide/01-getting-started/01-assembly_guides/00-kit-assembly/01_pioreactor_20ml_v1.5/_category_.yaml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
collapsed: true
22
collapsible: true
33
label: "Pioreactor 20ml v1.5"
4-
className: sidebar-item--new

‎user-guide/01-getting-started/01-assembly_guides/01-upgrade-assembly/03_pioreactor_40ml_v1.5_to_XR/02-40ml-XR-assembly.md‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,32 @@ Do not push the wire connector in at an angle, as it can bend the metal leads in
7171

7272
</AssemblyInstructionBlock>
7373

74-
<AssemblyInstructionBlock title="Step 6: XR completed!" images={["user-guide/hardware-assembly/upgrade_XR/completed-40ml-xr.jpg"]}>
74+
<AssemblyInstructionBlock title="Step 6: XR assembly completed" images={["user-guide/hardware-assembly/upgrade_XR/completed-40ml-xr.jpg"]}>
7575

76-
Your new 40ml Pioreactor XR is now assembled! 🚀
76+
Your new 40ml Pioreactor XR is now assembled!
77+
78+
1. Power on your Pioreactor again.
79+
2. Next, we need to adjust some settings in the software.
80+
81+
</AssemblyInstructionBlock>
82+
83+
84+
<AssemblyInstructionBlock title="Step 7: Software" images={["user-guide/hardware-assembly/upgrade_XR/choose_xr_model.png", "user-guide/hardware-assembly/upgrade_XR/update_xr_config.png"]}>
85+
86+
1. The required software version is 26.1.30 or later. [Here's how to update](/user-guide/updating-software).
87+
88+
2. On the _Inventory_ page, find the Pioreactor you upgraded, select _Model_, and choose the XR version.
89+
90+
3. On the _Edit Config_ page, add the following to section `[od_config.photodiode_channel]`
91+
92+
```
93+
1=REF
94+
2=90
95+
3=135
96+
4=45
97+
```
98+
4. Next, read the docs on how to [fuse the sensors into a single biomass signal](/user-guide/od-fused-biomass).
7799

78-
In the Pioreactor UI, open **Inventory** and update the **Model** dropdown for your Pioreactor to the correct XR variant.
79100

80101
</AssemblyInstructionBlock>
81102

‎user-guide/01-getting-started/01-assembly_guides/01-upgrade-assembly/03_pioreactor_40ml_v1.5_to_XR/_category_.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
collapsed: true
22
collapsible: true
3-
label: "Pioreactor 40ml v1.5 → XR"
3+
label: "40ml v1.5 → XR"
44
className: sidebar-item--new

‎user-guide/01-getting-started/01-assembly_guides/01-upgrade-assembly/04_pioreactor_20ml_v1.5_to_XR/02-20ml-XR-assembly.md‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,34 @@ Do not push the wire connector in at an angle, as it can bend the metal leads in
7171

7272
</AssemblyInstructionBlock>
7373

74-
<AssemblyInstructionBlock title="Step 6: XR completed!" images={["user-guide/hardware-assembly/upgrade_XR/completed-20ml-xr.jpg"]}>
74+
<AssemblyInstructionBlock title="Step 6: XR assmebly completed" images={["user-guide/hardware-assembly/upgrade_XR/completed-20ml-xr.jpg"]}>
7575

76-
Your new 20ml Pioreactor XR is now assembled! 🚀
76+
Your new 20ml Pioreactor XR is now assembled!
77+
78+
1. Power on your Pioreactor again.
79+
2. Next, we need to adjust some settings in the software.
7780

78-
In the Pioreactor UI, open **Inventory** and update the **Model** dropdown for your Pioreactor to the correct XR variant.
7981

8082
</AssemblyInstructionBlock>
8183

84+
85+
<AssemblyInstructionBlock title="Step 7: Software" images={["user-guide/hardware-assembly/upgrade_XR/choose_xr_model.png", "user-guide/hardware-assembly/upgrade_XR/update_xr_config.png"]}>
86+
87+
1. The required software version is 26.1.30 or later. [Here's how to update](/user-guide/updating-software).
88+
89+
2. On the _Inventory_ page, find the Pioreactor you upgraded, select _Model_, and choose the XR version.
90+
91+
3. On the _Edit Config_ page, add the following to section `[od_config.photodiode_channel]`
92+
93+
```
94+
1=REF
95+
2=90
96+
3=135
97+
4=45
98+
```
99+
100+
4. Next, read the docs on how to [fuse the sensors into a single biomass signal](/user-guide/od-fused-biomass).
101+
102+
</AssemblyInstructionBlock>
103+
104+

0 commit comments

Comments
 (0)