Update Onboarding Bracket (#3874)

* Update Onboarding Bracket

* update KCL header

* update text to go to last character in onboarding code and delete for error reporting

* update allowable tensile stress

* Update test

* fix text

* run prettier

* Make error message in tooltip not matter

* Image asset path needs to be relative on desktop

---------

Co-authored-by: Frank Noirot <frank@kittycad.io>
Co-authored-by: Frank Noirot <frank@zoo.dev>

e2e/playwright/code-pane-and-errors.spec.ts

@@ -65,6 +65,8 @@ const extrude001 = extrude(5, sketch001)`
   test('Opening and closing the code pane will consistently show error diagnostics', async ({
     page,
   }) => {
+    await page.goto('http://localhost:3000')
+
     const u = await getUtils(page)
 
     // Load the app with the working starter code
@@ -90,7 +92,7 @@ const extrude001 = extrude(5, sketch001)`
 
     // Delete a character to break the KCL
     await u.openKclCodePanel()
-    await page.getByText('extrude(').click()
+    await page.getByText('thickness, bracketLeg1Sketch)').click()
     await page.keyboard.press('Backspace')
 
     // Ensure that a badge appears on the button
@@ -101,7 +103,7 @@ const extrude001 = extrude(5, sketch001)`
 
     // error text on hover
     await page.hover('.cm-lint-marker-error')
-    await expect(page.getByText('Unexpected token: |').first()).toBeVisible()
+    await expect(page.locator('.cm-tooltip').first()).toBeVisible()
 
     // Close the code pane
     await codePaneButton.click()
@@ -124,7 +126,7 @@ const extrude001 = extrude(5, sketch001)`
 
     // error text on hover
     await page.hover('.cm-lint-marker-error')
-    await expect(page.getByText('Unexpected token: |').first()).toBeVisible()
+    await expect(page.locator('.cm-tooltip').first()).toBeVisible()
   })
 
   test('When error is not in view you can click the badge to scroll to it', async ({

src/lib/exampleKcl.ts

@@ -1,41 +1,92 @@
 export const bracket = `// Shelf Bracket
-// This is a shelf bracket made out of 6061-T6 aluminum sheet metal. The required thickness is calculated based on a point load of 300 lbs applied to the end of the shelf. There are two brackets holding up the shelf, so the moment experienced is divided by 2. The shelf is 1 foot long from the wall.
+// This is a bracket that holds a shelf. It is made of aluminum and is designed to hold a force of 300 lbs. The bracket is 6 inches wide and the force is applied at the end of the shelf, 12 inches from the wall. The bracket has a factor of safety of 1.2. The legs of the bracket are 5 inches and 2 inches long. The thickness of the bracket is calculated from the constraints provided.
 
-// Define our bracket feet lengths
-const shelfMountL = 8 // The length of the bracket holding up the shelf is 6 inches
-const wallMountL = 6 // the length of the bracket
-
-// Define constants required to calculate the thickness needed to support 300 lbs
-const sigmaAllow = 35000 // psi
+// Define constants
+const sigmaAllow = 35000 // psi (6061-T6 aluminum)
 const width = 6 // inch
 const p = 300 // Force on shelf - lbs
-const shelfLength = 12 // inches
-const moment = shelfLength * p / 2 // Moment experienced at fixed end of bracket
-const factorOfSafety = 2 // Factor of safety of 2 to be conservative
+const factorOfSafety = 1.2 // FOS of 1.2
+const shelfMountL = 5 // inches
+const wallMountL = 2 // inches
+const shelfDepth = 12 // Shelf is 12 inches in depth from the wall
+const moment = shelfDepth * p // assume the force is applied at the end of the shelf to be conservative (lb-in)
 
-// Calculate the thickness off the bending stress and factor of safety
-const thickness = sqrt(6 * moment * factorOfSafety / (width * sigmaAllow))
+const filletRadius = .375 // inches
+const extFilletRadius = .25 // inches
+const mountingHoleDiameter = 0.5 // inches
 
-// 0.25 inch fillet radius
-const filletR = 0.25
+// Calculate required thickness of bracket
+const thickness = sqrt(moment * factorOfSafety * 6 / (sigmaAllow * width)) // this is the calculation of two brackets holding up the shelf (inches)
 
-// Sketch the bracket and extrude with fillets
-const bracket = startSketchOn('XY')
+// Sketch the bracket body and fillet the inner and outer edges of the bend
+const bracketLeg1Sketch = startSketchOn('XY')
   |> startProfileAt([0, 0], %)
-  |> line([0, wallMountL], %, $outerEdge)
-  |> line([-shelfMountL, 0], %)
-  |> line([0, -thickness], %)
-  |> line([shelfMountL - thickness, 0], %, $innerEdge)
-  |> line([0, -wallMountL + thickness], %)
+  |> line([shelfMountL-filletRadius, 0], %, $fillet1)
+  |> line([0, width], %, $fillet2)
+  |> line([-shelfMountL + filletRadius, 0], %)
   |> close(%)
-  |> extrude(width, %)
+  |> hole(circle([1, 1], mountingHoleDiameter/2, %), %)
+  |> hole(circle([shelfMountL-1.5, width-1], mountingHoleDiameter/2, %), %)
+  |> hole(circle([1, width-1], mountingHoleDiameter/2, %), %)
+  |> hole(circle([shelfMountL-1.5, 1], mountingHoleDiameter/2, %), %)
+
+// Extrude the leg 2 bracket sketch
+const bracketLeg1Extrude = extrude(thickness, bracketLeg1Sketch)
   |> fillet({
-       radius: filletR,
-       tags: [getNextAdjacentEdge(innerEdge)]
+    radius: extFilletRadius,
+    tags: [
+      getNextAdjacentEdge(fillet1),
+      getNextAdjacentEdge(fillet2)
+    ],
   }, %)
+
+// Sketch the fillet arc
+const filletSketch = startSketchOn('XZ')
+  |> startProfileAt([0, 0], %)
+  |> line([0, thickness], %)
+  |> arc({
+    angleEnd: 180,
+    angleStart: 90,
+    radius: filletRadius + thickness,
+  }, %)
+  |> line([thickness, 0], %)
+  |> arc({
+    angleEnd: 90,
+    angleStart: 180,
+    radius: filletRadius,
+  }, %)
+
+// Sketch the bend
+const filletExtrude = extrude(-width, filletSketch)
+
+// Create a custom plane for the leg that sits on the wall
+const customPlane = {
+  plane: {
+    origin: { x: -filletRadius, y: 0, z: 0 },
+    xAxis: { x: 0, y: 1, z: 0 },
+    yAxis: { x: 0, y: 0, z: 1 },
+    zAxis: { x: 1, y: 0, z: 0 }
+  }
+}
+
+// Create a sketch for the second leg
+const bracketLeg2Sketch = startSketchOn(customPlane)
+  |> startProfileAt([0, -filletRadius], %)
+  |> line([width, 0], %)
+  |> line([0, -wallMountL], %, $fillet3)
+  |> line([-width, 0], %, $fillet4)
+  |> close(%)
+  |> hole(circle([1, -1.5], mountingHoleDiameter / 2, %), %)
+  |> hole(circle([5, -1.5], mountingHoleDiameter / 2, %), %)
+
+// Extrude the second leg
+const bracketLeg2Extrude = extrude(-thickness, bracketLeg2Sketch)
   |> fillet({
-       radius: filletR + thickness,
-       tags: [getNextAdjacentEdge(outerEdge)]
+    radius: extFilletRadius,
+    tags: [
+      getNextAdjacentEdge(fillet3),
+      getNextAdjacentEdge(fillet4)
+    ],
   }, %)`
 
 /**

src/routes/Onboarding/ParametricModeling.tsx

@@ -3,6 +3,7 @@ import { onboardingPaths } from 'routes/Onboarding/paths'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { bracketThicknessCalculationLine } from 'lib/exampleKcl'
+import { isDesktop } from 'lib/isDesktop'
 
 export default function OnboardingParametricModeling() {
   useDemoCode()
@@ -47,7 +48,9 @@ export default function OnboardingParametricModeling() {
           </p>
           <figure className="my-4 w-2/3 mx-auto">
             <img
-              src={`/onboarding-bracket${getImageTheme()}.png`}
+              src={`${
+                isDesktop() ? '.' : ''
+              }/onboarding-bracket${getImageTheme()}.png`}
               alt="Bracket"
             />
             <figcaption className="text-small italic text-center">
@@ -64,7 +67,9 @@ export default function OnboardingParametricModeling() {
           </p>
           <figure className="my-4 w-2/3 mx-auto">
             <img
-              src={`/onboarding-bracket-dimensions${getImageTheme()}.png`}
+              src={`${
+                isDesktop() ? '.' : ''
+              }/onboarding-bracket-dimensions${getImageTheme()}.png`}
               alt="Bracket Dimensions"
             />
             <figcaption className="text-small italic text-center">