40ml assembly

src/components/AssemblyInstructionBlock.js

@@ -26,7 +26,7 @@ export default function AssemblyInstructionBlock({children, title, images}) {
       <div id="mainImage" style={{width: "55%", float: "left", marginRight: "10px"}}>
         <h2>{title}  <a href={url + "#" + process(title)}>#</a></h2>
         <img
-          maxHeight={240}
+          style={{maxHeight: 440}}
           src={require(`/static/img/${mainImage}`).default}
         />
         {images.length > 1  && 

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

@@ -8,25 +8,31 @@ import Card from '@site/src/components/Card';
 
 <p> Choose from the guides below:</p>
 
+<h3> Pioreactor 40ml assembly</h3>
+
+<div className="cardGrid">
+    <Card imageUrl="user-guide/hardware-assembly/pioreactor_40ml_v1.0_splash.jpeg" headerText="Pioreactor 40ml" isNew={true} linkUrl="/user-guide/40ml-hardware-setup-intro"/>
+</div>
+
 <h3> Pioreactor 20ml assembly</h3>
 
-<div class="cardGrid">
-    <Card imageUrl="user-guide/hardware-assembly/pioreactor_20ml_v1.1_splash.jpg" headerText="Pioreactor 20ml v1.1" isNew={true} linkUrl="/user-guide/20ml-v11-hardware-setup-intro"/>
+<div className="cardGrid">
+    <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"/>
     <Card imageUrl="user-guide/hardware-assembly/pioreactor_20ml_v1.0_splash.png" headerText="Pioreactor 20ml v1.0" linkUrl="/user-guide/hardware-setup-intro"/>
 </div>
 
 <h3> Upgrade kits and accessories</h3>
 
-<div class="cardGrid">
-    <Card imageUrl="user-guide/hardware-assembly/upgrade-version-splash.png" headerText="Pioreactor 20ml v1.0 → v1.1 upgrade kit" isNew={true} linkUrl="/user-guide/v11-upgrade-hardware-setup"/>
+<div className="cardGrid">
+    <Card imageUrl="user-guide/hardware-assembly/upgrade-version-splash.png" headerText="Pioreactor 20ml v1.0 → v1.1 upgrade kit" linkUrl="/user-guide/v11-upgrade-hardware-setup"/>
     <Card imageUrl="user-guide/add-teh/14_teh_finished.jpeg" headerText="Temperature Expansion Kit" linkUrl="/user-guide/temperature-expansion-kit" />
     <Card imageUrl="user-guide/hardware-assembly/pioreactor_dosing_splash.webp" headerText="Adding peristaltic pumps" linkUrl="/user-guide/using-pumps" />
     <Card imageUrl="user-guide/leds_splash.webp" headerText="Adding more LEDs" linkUrl="/user-guide/using-leds" />
 </div>
 
 <h3> Software guides</h3>
 
-<div class="cardGrid">
+<div className="cardGrid">
     <Card imageUrl="user-guide/choose-next.png" headerText="Software installation" linkUrl="/user-guide/software-set-up" />
 </div>
 

user-guide/01-getting-started/01-assembly_guides/00_pioreactor_40ml/01-40ml-introduction.md

@@ -0,0 +1,65 @@
+---
+title: Before you begin assembly
+slug: /40ml-hardware-setup-intro
+hide_table_of_contents: true
+---
+
+import AssemblyInstructionBlock from '@site/src/components/AssemblyInstructionBlock';
+import Highlight from '@site/src/components/Highlight';
+import Admonition from '@theme/Admonition';
+
+import * as colors from '@site/src/components/constants';
+
+
+<Admonition type="info" title="Info">
+  You can expect the assembly to take approximately 20-30 minutes.
+</Admonition>
+
+-------
+
+<AssemblyInstructionBlock title="Step 1: Necessary tools" images={["user-guide/hardware-assembly/rpi_types.jpg","user-guide/hardware-assembly/screwdriver.jpg"]}>
+
+You will need the following items to assemble your Pioreactor:
+
+1. Your own Raspberry Pi (RPi). Displayed are three examples.
+2. A Philip's head screwdriver.
+3. The Pioreactor 40ml kit. 
+
+</AssemblyInstructionBlock>
+
+-------
+
+<AssemblyInstructionBlock title="Step 2: Use all the information available to you" images={["user-guide/hardware-assembly/instructions.png", "user-guide/hardware-assembly/label_reference.jpg"]}>
+
+- Before starting a step, read all instructions and view all photos at the bottom of each step.
+- Most of the labels are scaled 1:1 and can be used to identify parts.
+
+:::info
+Missing a part? Email us at `hello@pioreactor.com`, we're happy to help.
+:::
+
+
+</AssemblyInstructionBlock>
+
+-------
+
+<AssemblyInstructionBlock title="Step 3: Electronics protection" images={["user-guide/hardware-assembly/nav_antistatic_polyzip_bags.png"]}>
+
+Here are some tips to prevent damage to the electronics:
+- **Keep the electronics inside the ESD bag** right until you are asked to install them.
+- **Always touch the sides of the board** while manipulating with it. Avoid touching the chips, capacitors, and other parts of the electronics.
+- **Before you touch the electronics**, use any conductive (steel) structure nearby to neutralize any electro-static energy.
+- **Be extra cautious in rooms with carpets**, which are a source of electrostatic energy.
+- Clothes made of wool and certain synthetic fabrics can easily gather static electricity. It is safer to wear **cotton clothing**.
+
+</AssemblyInstructionBlock>
+
+-------
+
+<AssemblyInstructionBlock title="Step 4: We are here for you!" images={["user-guide/hardware-assembly/40ml/40ml.jpg"]}>
+
+-  If you get stuck, missing a piece, or are unsure of something, **let us know**!
+-  You can reach out to us at `hello@pioreactor.com`!
+-  Continue to the [next assembly instructions](/user-guide/40ml-rpi-hat-assembly).
+
+</AssemblyInstructionBlock>

user-guide/01-getting-started/01-assembly_guides/00_pioreactor_40ml/02-40ml-rpi-hat-assembly.md

@@ -0,0 +1,107 @@
+---
+title: Assembling the Raspberry Pi and the HAT
+slug: /40ml-rpi-hat-assembly
+hide_table_of_contents: true
+---
+
+import AssemblyInstructionBlock from '@site/src/components/AssemblyInstructionBlock';
+import Highlight from '@site/src/components/Highlight';
+import * as colors from '@site/src/components/constants';
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+<AssemblyInstructionBlock title="Step 1: Necessary parts" images={["user-guide/hardware-assembly/upgrade-version/hat-pieces.png", "user-guide/hardware-assembly/gpio_check_A.jpg", "user-guide/hardware-assembly/gpio_check_B.jpg"]}>
+
+1. You will need:
+* A Raspberry Pi of your choosing. Displayed are three options - you just need one.
+* <Highlight color={colors.blue}>Hex nuts (4x)</Highlight>
+* <Highlight color={colors.red}>M2.5 12mm hex standoffs (4x)</Highlight>
+* <Highlight color={colors.magenta}>M2.5 12mm hex standoffs-with-6mm-screws (4x)</Highlight>
+* <Highlight color={colors.green}>M2.5 10mm screws (4x)</Highlight>
+* <Highlight color={colors.orange}>Bottom faceplate</Highlight>
+* <Highlight color={colors.teal}>HAT PCB</Highlight>
+
+
+2. Check the GPIO pins on the <Highlight color={colors.teal}>HAT PCB</Highlight> to confirm that they are straight and not touching another GPIO pin.
+
+</AssemblyInstructionBlock>
+
+-----
+
+<Tabs>
+  <TabItem value="a_or_b" label="Raspberry Pi A or B instructions" default>
+
+
+<AssemblyInstructionBlock title="Step 2: Assemble the bottom faceplate" images={["user-guide/hardware-assembly/upgrade-version/bottom-faceplate.png","user-guide/hardware-assembly/upgrade-version/bottom-faceplate-screwed.png","user-guide/hardware-assembly/upgrade-version/rpi-no-standoffs.png"]}>
+
+
+1.  If using a half-size Raspberry Pi (aka a Zero model), switch to the tab above called "Raspberry Pi Zero" to see Zero specific instructions.
+
+:::tip
+The 40 GPIO pins (standing for general-purpose input/output) form a distinct row on one side of the Raspberry Pi. Note the orientation of these pins to help you assemble correctly!
+:::
+
+2.  Orientation: the base will have a flat edge and an edge with an indent. The GPIO pins sit along the <Highlight color={colors.blue}>indent</Highlight>, seen on the left in the images.
+3.  Insert the <Highlight color={colors.red}>M2.5 10mm screws</Highlight> into the holes.
+4.  Hand screw a <Highlight color={colors.magenta}>hex nut</Highlight> onto each screw.
+5.  Place the Raspberry Pi on top, aligning the holes, with the <Highlight color={colors.green}>GPIO pins</Highlight> on the left. Note: your Raspberry Pi may look different than the one displayed.
+
+
+</AssemblyInstructionBlock>
+
+-----
+
+<AssemblyInstructionBlock title="Step 3: Placing the HAT PCB on top" images={["user-guide/hardware-assembly/upgrade-version/rpi-with-standoffs.png","user-guide/hardware-assembly/upgrade-version/gpio-unpushed.png","user-guide/hardware-assembly/upgrade-version/gpio-pushed.png", "user-guide/hardware-assembly/upgrade-version/standoff-on-hat.png"]}>
+
+1.  Hand screw on the <Highlight color={colors.blue}>M2.5 12mm hex standoffs-with-6mm-screw</Highlight> in each corner.
+2.  Place the HAT PCB on top. <Highlight color={colors.red}>Push down *from the corners*</Highlight> to secure it in place. The HAT PCB's GPIO connector will line up with the RPi's GPIO pins and may require a slight force to compress down. You can also use the next Tip below to help apply force.
+
+3.  Hand screw the <Highlight color={colors.green}>M2.5 12mm hex standoffs</Highlight> in each corner, on top of the HAT.
+
+:::tip
+By screwing down the standoffs, they'll help compress the HAT onto the RPi, too.
+:::
+
+4.  Put this aside and proceed to the next page.
+
+</AssemblyInstructionBlock>
+
+-----
+
+  </TabItem>
+  <TabItem value="zero" label="Raspberry Pi Zero / Zero 2 instructions">
+<AssemblyInstructionBlock title="Step 2: Assemble the bottom faceplate" images={["user-guide/hardware-assembly/upgrade-version/bottom-faceplate.png","user-guide/hardware-assembly/upgrade-version/hex-one-side.png","user-guide/hardware-assembly/upgrade-version/rpi-zero.png"]}>
+
+:::tip
+The 40 GPIO pins (standing for general-purpose input/output) form a distinct row on one side of the Raspberry Pi. Note the orientation of these pins to help you assemble correctly!
+:::
+
+1.  Orientation: the base will have a flat edge and an edge with an indent. The GPIO pins sit along the <Highlight color={colors.blue}>indent</Highlight>, seen on the left in the images.
+2.  Insert the 10mm screws into the <Highlight color={colors.red}>holes</Highlight>.
+3.  Hand screw the <Highlight color={colors.magenta}>hexnuts</Highlight> on the screws along the flat edge of the bottom faceplate. Hexnuts are only needed on one side because of the size of the Raspberry Pi Zero.
+4.  Place the Raspberry Pi along the indented edge of the faceplate, with the <Highlight color={colors.green}>GPIO pins</Highlight> on the left.
+5.  Hand screw on the <Highlight color={colors.blue}>M2.5 12mm hex standoffs-with-6mm-screw</Highlight> in each corner.
+
+</AssemblyInstructionBlock>
+
+
+-----
+
+<AssemblyInstructionBlock title="Step 3: Placing the HAT PCB ontop" images={["user-guide/hardware-assembly/upgrade-version/gpio-unpushed.png","user-guide/hardware-assembly/upgrade-version/gpio-pushed.png", "user-guide/hardware-assembly/upgrade-version/standoff-on-hat.png"]}>
+
+1.  Place the HAT on top. <Highlight color={colors.red}>Push down</Highlight> to secure it in place. The HAT PCB's GPIO connector will line up with the RPi's GPIO pins, and may require a slight force to compress down. You can also use the next Tip below to help apply force.
+
+2.  Hand screw the <Highlight color={colors.green}>M2.5 12mm hex standoffs</Highlight> in each corner, on top of the HAT.
+
+:::tip
+By screwing down the standoffs, you can use these standoffs to help compress the HAT onto the RPi, too.
+:::
+
+3.  Put this aside and proceed to the next page.
+
+</AssemblyInstructionBlock>
+
+  </TabItem>
+</Tabs>

user-guide/01-getting-started/01-assembly_guides/00_pioreactor_40ml/03-40ml-wetware-assembly.md

@@ -0,0 +1,81 @@
+---
+title: Wetware assembly
+slug: /40ml-wetware-assembly
+hide_table_of_contents: true
+---
+
+import AssemblyInstructionBlock from '@site/src/components/AssemblyInstructionBlock';
+import Highlight from '@site/src/components/Highlight';
+import * as colors from '@site/src/components/constants';
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<AssemblyInstructionBlock title="Step 1: Inserting the O-rings" images={["user-guide/hardware-assembly/40ml/oring-in-holder.jpg", "user-guide/hardware-assembly/40ml/oring-groove.jpg", "user-guide/hardware-assembly/40ml/oring-in-top.jpg", "user-guide/hardware-assembly/40ml/oring-in-bottom.jpg",
+"user-guide/hardware-assembly/40ml/vial-holders-with-orings.jpg"]}>
+
+:::note
+The vial holder comes in two halves; a top vial holder and a bottom vial holder. Both have sections to insert O-rings for a more secure hold on your vials and increased protection against leaks. The <Highlight color={colors.magenta}>thinner O-ring (#024) with an X-shaped cross section</Highlight> fits into the top piece. The <Highlight color={colors.orange}>thicker O-ring (#121)</Highlight> lines the bottom piece.
+:::
+
+1. The O-rings are pre-lubricated with a silicone-based lubricant. If needed, remove any excess lubricant from the O-rings.
+2. The top vial holder has <Highlight color={colors.blue}>a groove within the body</Highlight> where the <Highlight color={colors.magenta}>thinner #024 O-ring</Highlight> sits. Carefully insert the O-ring using your fingers. Make sure to not twist the O-ring.
+3. Run your finger inside the vial holder, pushing the O-ring into place to ensure a snug fit.
+4. The bottom vial holder has a groove for the <Highlight color={colors.orange}>thicker #121 O-ring</Highlight>. The O-ring will sit between the base of the holder and the heater PCB. Carefully insert the O-ring using your fingers. Make sure to not twist the O-ring.
+5. Push the O-ring into place to ensure a snug fit.
+
+</AssemblyInstructionBlock>
+
+-------
+
+<AssemblyInstructionBlock title="Step 2: Attach the window cover" images={["user-guide/hardware-assembly/40ml/window-pieces.jpg", "user-guide/hardware-assembly/40ml/screw-on-window.jpg"]}>
+
+1. Place the window cover over the window. It should fit snugly.
+2. Attach it using four <Highlight color={colors.red}>M2.5 4mm screws</Highlight>.
+
+</AssemblyInstructionBlock>
+
+-------
+
+<AssemblyInstructionBlock title="Step 3: Connect the flex cable" images={["user-guide/hardware-assembly/upgrade-version/non-attached-heater-pcb.png","user-guide/hardware-assembly/upgrade-version/attached-heater-pcb.png"]}>
+
+
+1.	On the heater PCB, locate the white-&-beige cable connector, <Highlight color={colors.red}>pull the beige-colored tabs outward</Highlight> to open it.
+2.	<Highlight color={colors.green}>Insert the flex cable</Highlight> blue side down, copper side up, into the cable connector.
+3.  Then <Highlight color={colors.orange}>push the beige tabs back in</Highlight> to secure the flex cable.
+
+
+</AssemblyInstructionBlock>
+
+------
+
+<AssemblyInstructionBlock title="Step 4: Place and secure the heater PCB" images={["user-guide/hardware-assembly/upgrade-version/heater-cable-hole.png", "user-guide/hardware-assembly/upgrade-version/pull-heater-cable.png", "user-guide/hardware-assembly/upgrade-version/apply-pressure.png", "user-guide/hardware-assembly/upgrade-version/screw-in-flat-5mm.png", "user-guide/hardware-assembly/upgrade-version/replace-thermal-pad.png"]}>
+
+
+
+1. Insert the other end of the flex cable below the O-ring and into <Highlight color={colors.red}>the groove</Highlight>. Pull it through.
+2. <Highlight color={colors.magenta}>Apply pressure</Highlight> on the back of the heater PCB so that it lies flat on the O-ring. Maintain this pressure for the next steps.
+3.  **While maintaining pressure**, flip the holder and insert the two <Highlight color={colors.green}>M2.5-CS 5mm screws</Highlight> into the holes - **don't tighten fully yet**.
+4. **While maintaining pressure**, take turns screwing each in until both are reasonably tight, and the heater PCB is securely attached to the bottom vial holder.
+
+</AssemblyInstructionBlock>
+
+-----
+
+<AssemblyInstructionBlock title="Step 5: Placing the heating pad" images={["user-guide/hardware-assembly/upgrade-version/sticky-side.jpg","user-guide/hardware-assembly/upgrade-version/remove-blue.jpg","user-guide/hardware-assembly/upgrade-version/remove-blue-2.jpg"]}>
+
+1.	Remove the _clear_ plastic from one side of the thermal pad. This exposes a sticky side on the thermal pad.
+2.	Place on the flat (aluminum) part of the heating PCB. Lightly apply downwards pressure to secure it and remove any air bubbles trapped..
+3.	Remove the blue protective plastic on top of the thermal pad.
+
+
+</AssemblyInstructionBlock>
+
+-----
+
+<AssemblyInstructionBlock title="Step 6: Complete the vial holder" images={["user-guide/hardware-assembly/40ml/twist-top-and-bottom.jpg"]}>
+
+1. Screw the top and bottom vial holder sections together so that the IR label is positioned above the flat-flex-cable.
+2. Set this aside and proceed to the next page. 
+
+</AssemblyInstructionBlock>