h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #305 from Irev-Dev/kurt/docs-polish-304

Browse Source 
docs polish
This commit was merged in pull request #305.
This commit is contained in:
Kurt Hutten
2021-05-07 20:45:00 +10:00
committed by GitHub
parent be6613ad09 67324f0d0c
commit aba9b2e19e
15 changed files with 78 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/docs/definitive-beginners/adding-clearances.mdx
View File

@@ -23,9 +23,9 @@ module hingeBodyHalf() {
}
```
Oh no! there now a gap between our `pin` and `hingeBodyHalf`
Oh no! there's now a gap between our `pin` and `hingeBodyHalf`
<Image img={pivotGap} style={{backgroundSize: 'contain'}} />
<Image img={pivotGap} className="mb-8 bg-contain rounded-md overflow-hidden" />
Here's the fix for that:
@@ -54,10 +54,10 @@ Also notice that've we increased the length of the `cylinder` too so that it rea
Much better
<Image img={clearancePivot} style={{backgroundSize: 'contain'}} />
<Image img={clearancePivot} style={{backgroundSize: 'contain'}} className="pb-8" />
We still have more work to do on the pin though. We want to re-use the pin to "subtract" its shape from the other of the hinge, basically we can use our current pint to make a hole.
Lets make a temporary new module called `pin2` in this new module and we're going to introduce a new function `rotate` to re-orientate the pin
We still have more work to do on the pin though. We want to re-use the pin to "subtract" its shape from the other half of the hinge, basically we can use our current pint to make a hole.
Lets make a temporary new module called `pin2`. In this new module and we're going to introduce a new function `rotate` to re-orientate the pin
```cpp
module pin2() {
@@ -73,7 +73,7 @@ hingeBodyHalf();
pin2();
```
<Image img={rotate} style={{backgroundSize: 'contain'}} />
<Image img={rotate} className="mb-8 bg-contain rounded-md overflow-hidden" />
This is not where we want to leave our pin, but it's a good way to introduce `rotate` as well as using multiple modifiers, i.e. we're using both `translate` and `rotate` together here.
`rotate` is similar to `translate` in that it takes an argument `[x, y, z]` but instead of moving, it rotates about each of those axes. In the above example of `[0, 45, 0]` it's as if were were to put a pin into the object along the `y` axis and then rotate 45 degrees around that pin.
@@ -84,7 +84,7 @@ Notice the order that we applied the `rotate` and `transform` we applied the `ro
This might seem counter intuitive because `translate` is on top, but nesting operations should be read from the most nest outward in openscad.
Here's the correct way to read the above code:
<Image img={readScad} style={{backgroundSize: 'contain'}} />
<Image img={readScad} className="mb-8 bg-contain rounded-md overflow-hidden" />
The same thing applies to `hingeBodyHalf` that should read as follows:

12
docs/docs/definitive-beginners/adding-fillets.mdx
View File

@@ -8,7 +8,7 @@ import offset1 from '../../static/img/openscad-tutorial/offset1.png';
import offset2 from '../../static/img/openscad-tutorial/offset2.png';
import offset3 from '../../static/img/openscad-tutorial/offset3.png';
Next we're going to learn about a hack that every OpenSCAD coder should know, and that's you can create fillets with `offset`.
Next we're going to learn about a hack that every OpenSCAD coder should know, and that is you can create fillets with `offset`.
Fillets are often ignored in OpenSCAD because they can be difficult to do, but you're not going to ignore them because you're a good engineer.
We need to give fillets their due because they play an important role in reducing stress concentrations, have you ever seen an airplane with sharp square windows?? [Exactly](https://www.youtube.com/watch?v=7rXGRPMD-GQ)!
@@ -30,7 +30,7 @@ offset(1){
}
```
<Image img={offset1} style={{backgroundSize: 'contain'}} />
<Image img={offset1} className="mb-8 bg-contain rounded-md overflow-hidden" />
## Double Offset
@@ -42,12 +42,12 @@ offset(-1)offset(1){
}
```
<Image img={offset2} style={{backgroundSize: 'contain'}} />
<Image img={offset2} className="mb-8 bg-contain rounded-md overflow-hidden" />
## Triple Offset
It gets even better, we can double our negative value and apply a third offset to get external fillets as well, to better understand what's happening here let overlay the shapes after each offset.
It gets even better, we can double our negative value and apply a third offset to get external fillets as well, to better understand what's happening here let's overlay the shapes after each offset.
<Image img={offset3} style={{backgroundSize: 'contain'}} />
<Image img={offset3} className="mb-8 bg-contain rounded-md overflow-hidden" />
In essence we over expand, then under expand before finally expanding back to the original dimensions, but we have gained fillets in the process, it like kneading bread, the more you do it the better the bread . . . not really stick to 3 max.
In essence we over expand, then under expand before finally expanding back to the original dimensions, but we have gained fillets in the process, it's like kneading bread, the more you do it the better the bread . . . not really stick to 3 max.

8
docs/docs/definitive-beginners/extruding-2d-shapes.mdx
View File

@@ -30,12 +30,12 @@ linear_extrude(hingeLength){
}
```
<Image img={extrude} style={{backgroundSize: 'contain'}} />
<Image img={extrude} className="mb-8 bg-contain rounded-md overflow-hidden" />
We do have a bit of a problem though because while want the base to go the full length of the hinge, the pivot should only go half that to make room for the other part of the hinge.
Red scribbles shows what we want to remove.
<Image img={differenceMarkup} style={{backgroundSize: 'contain'}} />
<Image img={differenceMarkup} className="mb-8 bg-contain rounded-md overflow-hidden" />
The best way around this problem is to extrude the base again separately so to stretch further than the pivot.
@@ -61,7 +61,7 @@ linear_extrude(hingeLength){
// highlight-end
```
<Image img={extrude2} style={{backgroundSize: 'contain'}} />
<Image img={extrude2} className="mb-8 bg-contain rounded-md overflow-hidden" />
## Math Operations
@@ -78,7 +78,7 @@ translate([pivotRadius,0,0]){
within both of the `linear_extrude`s, at first it might seem like we could remove it from first `linear_extrude` since it only goes half the `hingeLength` but this would cause us to loose our internal fillet.
<Image img={noFillet} style={{backgroundSize: 'contain'}} />
<Image img={noFillet} className="mb-8 bg-contain rounded-md overflow-hidden" />
As it needs to be within `offset` group for this fillet to work.

20
docs/docs/definitive-beginners/loops.mdx
View File

@@ -35,7 +35,7 @@ module plateHoles() {
plateHoles();
```
<Image img={hole1} style={{backgroundSize: 'contain'}} />
<Image img={hole1} className="mb-8 bg-contain rounded-md overflow-hidden" />
## Basic Loop
@@ -64,7 +64,7 @@ module plateHoles() {
The reason we're using `[0:2]` and not `[0:3]` is because `0` counts so the code still runs 3 times.
I've also introduced another function `echo`, this function can be used to display text to the console, we've added it as a temporary measure to help demonstrate that the code in the `for` loop is run multiple times.
You should see in the console the following:
You should see the the following in the console:
```cpp
ECHO: "increment is currently", 0
@@ -75,7 +75,7 @@ ECHO: "increment is currently", 2
## Repeating Geometry
Great, `echo` runs three times. Since we know the value of `increment` changes, lets use that to our advantage and change the value `translate` Z-axis like so:
Great, `echo` runs three times. Since we know the value of `increment` changes, lets use that to our advantage and change the Z-axis value of `translate` like so:
```cpp
module plateHoles() {
@@ -90,7 +90,7 @@ module plateHoles() {
}
```
<Image img={hole2} style={{backgroundSize: 'contain'}} />
<Image img={hole2} className="mb-8 bg-contain rounded-md overflow-hidden" />
And just like that we have three evenly spaced `cylinders`!
@@ -117,11 +117,11 @@ module plateHoles() {
}
```
<Image img={hole3} style={{backgroundSize: 'contain'}} />
<Image img={hole3} className="mb-8 bg-contain rounded-md overflow-hidden" />
Awesome, it obvious that the hole spacing is related to the length of the hinge now, we can even increase the amount of holes with mountingHoleCount=4; and it looks correct:
<Image img={hole4} style={{backgroundSize: 'contain'}} />
<Image img={hole4} className="mb-8 bg-contain rounded-md overflow-hidden" />
Though we still have the problem if the holes sitting right on the edge.
We defined `mountingHoleEdgeOffset` earlier lets now use it in the `mountingHoleMoveIncrement` calculation.
@@ -146,7 +146,7 @@ module plateHoles() {
}
```
<Image img={hole5} style={{backgroundSize: 'contain'}} />
<Image img={hole5} className="mb-8 bg-contain rounded-md overflow-hidden" />
We subtract `2*mountingHoleEdgeOffset` from the `hingeLength` because we are limiting the amount of space the holes can spread out in, it `2*` the offset because we want that space of both sides, but clearly we don't have a gap on each side yet, but this is just a matter of where the first hole starts, so the last step for our `for` loop is to shift it over a little:
@@ -167,9 +167,9 @@ module plateHoles() {
}
```
<Image img={hole6} style={{backgroundSize: 'contain'}} />
<Image img={hole6} className="mb-8 bg-contain rounded-md overflow-hidden" />
Fantastic! now that we have our holes place, we need to use `difference` to actually cut the holes into the part, but where to do it?? We could use difference in both the mail and female parts but that would require doing the same thing twice. The best place to do it is in `hingeBodyHalf` since this module is common to both sides of the hinge:
Fantastic! now that we have our holes placed, we need to use `difference` to actually cut the holes into the part, but where to do it?? We could use `difference` in both the male and female parts but that would require doing the same thing twice. The best place to do it is in `hingeBodyHalf` since this module is common to both sides of the hinge:
```cpp
module hingeBodyHalf() {
@@ -206,4 +206,4 @@ We're using `difference` here as planned, but we've also introduced a new operat
Here's the result!
<Image img={finishedHinge} style={{backgroundSize: 'contain'}} />
<Image img={finishedHinge} className="mb-8 bg-contain rounded-md overflow-hidden" />

10
docs/docs/definitive-beginners/modifiers.mdx
View File

@@ -23,9 +23,9 @@ module pin2() {
pin2();
```
<Image img={transparentRotate} style={{backgroundSize: 'contain'}} />
<Image img={transparentRotate} className="mb-8 bg-contain rounded-md overflow-hidden" />
The `%` character before `hingeBodyHalf()` makes it transparent so that we can see `pin2` within it, and one thing becomes obvious with this view is that a `rotate` of `175` is no right, it needs to be `180`! The `%` character is a "debugging" step, which means it's not going to end up in our final code, it's just helpful in the mean time. There are other characters that can be useful, the full list is
The `%` character before `hingeBodyHalf()` makes it transparent so that we can see `pin2` within it, and one thing that becomes obvious with this view is that a `rotate` of `175` is no right, it needs to be `180`! The `%` character is a "debugging" step, which means it's not going to end up in our final code, it's just helpful in the mean time. There are other characters that can be useful, the full list is
```xml
* disable
@@ -52,9 +52,9 @@ difference() {
}
```
<Image img={difference} style={{backgroundSize: 'contain'}} />
<Image img={difference} className="mb-8 bg-contain rounded-md overflow-hidden" />
There we, go a hole! The way conceptualise how `difference` works is to think of it as subtracting the second child from the first. "child" simply means nested with `difference` so in the above example `pin2` is the second child that we are subtracting from `hingeBodyHalf`.
There we, go a hole! The way to conceptualise how `difference` works is to think of it as subtracting the second child from the first. "child" simply means nested within `difference` so in the above example `pin2` is the second child that we are subtracting from `hingeBodyHalf`.
There is one minor annoyance is that the end of the hole looks like it's glitching a little, this can happen in openscad when two surfaces line up.
In this case the end of the `hingeBodyHalf` and the start of `pin2`, it only effects the preview and not the 3d STL export, but to make the preview a little nicer in this situations I'll define a variable with a very small value `tiny=0.005;` and add it strategically to resolve this issue, this part is optional but here's where I added it for pin2:
@@ -67,4 +67,4 @@ module pin2() {
Fixed!
<Image img={removeArtifact} style={{backgroundSize: 'contain'}} />
<Image img={removeArtifact} className="mb-8 bg-contain rounded-md overflow-hidden" />

16
docs/docs/definitive-beginners/module-arguments.mdx
View File

@@ -68,10 +68,10 @@ pin(45);
pin(120);
```
<Image img={multiRotate} style={{backgroundSize: 'contain'}} />
<Image img={multiRotate} className="mb-8 bg-contain rounded-md overflow-hidden" />
Earlier I said that the syntax was for modules was `module yourName() { /* your code */ }`, lets revise that to `module yourName(yourArguments) { /* your code that uses arguments */ }`.
As you can see we're using the argument `rotateY` within `rotate` so that that we can change `pin`'s ordination each time we use it by as demonstrated by using `0`, `45` and `120`.
Earlier I said that the syntax for modules was `module yourName() { /* your code */ }`, lets revise that to `module yourName(yourArguments) { /* your code that uses arguments */ }`.
As you can see we're using the argument `rotateY` within `rotate` so that that we can change `pin`'s orientation each time we use it by as demonstrated by using `0`, `45` and `120`.
An argument is much like a variable in that we should name it well, the difference is that it's passed to a module and can only be used within the module.
Here our code using our new module instead of `pin2`
@@ -93,9 +93,9 @@ difference() {
}
```
And now we can use the pin as both the hole and the shaft, above is the hole, both looks like the following:
And now we can use the pin as both the hole and the shaft, above is code for the hole, and both together are below:
<Image img={bothHalves} style={{backgroundSize: 'contain'}} />
<Image img={bothHalves} className="mb-8 bg-contain rounded-md overflow-hidden" />
We're still not done with `pin` though! one more thing. Technically we can use the same module `pin` for the hole and shaft, but practically we can't because we haven't added any clearance between the two.
If we tried to print these together they would print solid.
@@ -120,9 +120,9 @@ module pin(rotateY, radiusOffset) {
The new argument allows us to increase the radius of the pin, here's an exaggerated example:
<Image img={exaggeratedClearance} style={{backgroundSize: 'contain'}} />
<Image img={exaggeratedClearance} className="mb-8 bg-contain rounded-md overflow-hidden" />
That's too much clearance just to demonstrate the principle, in reality we'll use the `clearance` variable that we've already defined with a value of `0.2`. we're ready to put the hinge together now, lets make two modules `hingeHalfMale` and `hingeHalfFemale` which will just be assemblies of modules we've already made.
That's too much clearance just to demonstrate the principle, in reality we'll use the `clearance` variable that we've already defined with a value of `0.2`. We're ready to put the hinge together now, lets make two modules `hingeHalfMale` and `hingeHalfFemale` which will be assemblies of modules we've already made.
```cpp
// ... previous module definitions above
@@ -148,7 +148,7 @@ module hingeHalfMale() {
hingeHalfMale();
```
<Image img={transparentAssembly} style={{backgroundSize: 'contain'}} />
<Image img={transparentAssembly} className="mb-8 bg-contain rounded-md overflow-hidden" />
Well done, it's really coming together (I made the female hinge transparent so we can see how it fits together).
The only thing left to do is add mounting holes on the plates.

6
docs/docs/definitive-beginners/modules.mdx
View File

@@ -89,10 +89,10 @@ hingeBodyHalf();
pin();
```
<Image img={pivot} style={{backgroundSize: 'contain'}} />
<Image img={pivot} className="mb-8 bg-contain rounded-md overflow-hidden" />
A couple notes about the above.
- `cylinder` is the 3d version of `circle` when `h` for height is the length that we would need to extrude `circle` by. It can also take one or two radii, here we're using two because it allows us to add a taper to the pin. The reason why we want to add a taper is because we're starting to think about the assemble of this hinge and if we taper the pin it means the other half of the hinge will be locked on.
- In order to add the taper we've defined two variables `pinRadius` and `pitTaper` when, the latter is extra we add to the second `cylinder` radius.
- The `translate` is there move the `cylinder` up so that it's centred with the hinge pivot and along so that it's protruding out of the hinge pivot.
- In order to add the taper we've defined two variables `pinRadius` and `pitTaper`. The latter is extra we add to the second `cylinder` radius.
- The `translate` is there move the `cylinder` up so that it's centred with the hinge pivot and move along so that it's protruding out of the hinge pivot.

12
docs/docs/definitive-beginners/the-basics.mdx
View File

@@ -12,9 +12,9 @@ import bigRadius from '../../static/img/openscad-tutorial/big-radius.png';
## 2D Primitives
Designing parts in OpenSCAD is a matter of combining shapes and iterating until you get what you want, so with that in mind lets start with this from this perspective focusing just on one half of the hinge, let look at the blue half.
Designing parts in OpenSCAD is a matter of combining shapes and iterating until you get what you want, so with that in mind lets start from this perspective focusing on one half of the hinge, let's look at the blue half.
<Image img={profile} style={{backgroundSize: 'contain'}} />
<Image img={profile} className="mb-8 bg-contain rounded-md overflow-hidden" />
We can see at the very least some circles and rectangles will be of use, so lets start there.
@@ -25,7 +25,7 @@ square([15,3]);
`circle(5);` gives us a circle with a radius of `5` and `square` is the 2d version of `cube` . Here we've given it dimensions of 15 and 2 for x and y respectively (or width and height if you prefer) .
<Image img={circleCube} style={{backgroundSize: 'contain'}} />
<Image img={circleCube} className="mb-8 bg-contain rounded-md overflow-hidden" />
## Translate
@@ -39,9 +39,9 @@ translate([0,5,0]){
square([15,3]);
```
<Image img={translate} style={{backgroundSize: 'contain'}} />
<Image img={translate} className="mb-8 bg-contain rounded-md overflow-hidden" />
`translate` is little different to the modules we've see so far is instead of ending with a semicolon `;` it ends with `{ children }` in the case above it has one child, the `circle`. `tranlates` shifts its children around, we're using it to shift it up by `5`. We put `5` in the second position in the square braces is because we want to shift it along the Y axis, if you're ever not sure which axis you need to shift something just try each until you find the one you're after.
`translate` is little different to the modules we've see so far is instead of ending with a semicolon `;` it ends with `{ children }` in the case above it has one child, the `circle`. `translate` shifts its children around, we're using it to shift it up by `5`. We put `5` in the second position in the square braces because we want to shift it along the Y axis, if you're ever not sure which axis you need to shift something, just try each until you find the one you're after.
We also don't want to have the undercut where the circle meets the square, we can fix that with another square so that there's a nice 90 degree transition. Also for reasons we'll get to later, we don't actually want any overlap between these two squares so it will need shift with translate as well. Here's what we're left with:
@@ -57,7 +57,7 @@ translate([5,0,0]){
}
```
<Image img={unroundedProfile} style={{backgroundSize: 'contain'}} />
<Image img={unroundedProfile} className="mb-8 bg-contain rounded-md overflow-hidden" />
I'm sure you can see the profile of the hinge coming together, that's great, but before we move forward we should quickly reflect on what we've done so far.

5
docs/docs/definitive-beginners/wrap-up.mdx
View File

@@ -106,7 +106,7 @@ Lets reflect on what you've achieved
By diligently using variables instead of hardcoding values, you have create some code that is not only much easier to read and re-use, but it's now parametric by default, which means we can change the value of the variables and the model adjusts
Here are some variations:
<Image img={parametric} style={{backgroundSize: 'contain'}} />
<Image img={parametric} className="mb-8 bg-contain rounded-md overflow-hidden" />
### Composed of many small well named modules
@@ -121,4 +121,7 @@ By taking extra steps to add fillets to you part, you've made the part stronger
You've already tackled clearances for getting parts to fit together or print-in-place.
Well done.
<!-- Now that you up to speed with openscad you might be interested to learn how to host an OpenSCAD project -->

23
docs/docs/definitive-beginners/your-openscad-journey.mdx
View File

@@ -13,39 +13,40 @@ In order to maximise our learning we're actually going to tackle 3 things, that
We're going to learn:
1. The basics programming and the OpenSCAD syntax
1. Some basic programming and the OpenSCAD syntax
2. Some best practices so that you can read your own code a couple days after you wrote it
3. Get practise designing a real thing with tolerances and all so that you're well equiped to make your next thing
We're going to achieve that by making this cute print-in-place hinge, print in place means that there will be no assembly step, both parts of the hinge will be printed pre-assembled.
<p className="mt-8">
We're going to achieve that by making this cute print-in-place hinge, print in place means that there will be no assembly step, both parts of the hinge will be printed pre-assembled.
</p>
<Image img={hinge} style={{backgroundSize: 'contain'}} />
<Image img={hinge} className="mb-8 bg-contain rounded-md overflow-hidden" />
This tutorial makes no assumption about previous knowledge, which means it's fine you you haven't done any programming before, we'll walk you through it.
If you have done some programming before and prefer a more concise guide that focuses more on OpenSCAD syntax you might prefer the Definitive OpenSCAD Primer instead.
If you came here from "[getting started](/docs)" then you would have already got a shape on screen with `cube([10,10,10]);`.
If you came from elsewhere, open the OpenSCAD desktop app or go to our [online editor](https://cadhub.xyz/dev-ide/openScad), and add `cube([10,10,10]);` to get the following cube:
<Image img={plainCube} style={{backgroundSize: 'contain'}} />
<Image img={plainCube} className="mb-8 bg-contain rounded-md overflow-hidden" />
OpenSCAD has a number of modules available that allow us to make shapes and cube is one of them.
OpenSCAD has a number of modules available that allow us to make shapes and `cube` is one of them.
Modules take the form `moduleName(moduleParameters);` or `moduleName(moduleParameters){children}`.
Using the `cube` as an example, it take the first form where the moduleName is `cube` and it takes one parameter, though that parameter is an array denoted by the square brackets `[]`, which is basically a series of values.
Try changes the line to `cube([10,10,20]);`. You should see the cube grow twice as tall as it was previously
<Image img={tallCube} style={{backgroundSize: 'contain'}} />
<Image img={tallCube} className="mb-8 bg-contain rounded-md overflow-hidden" />
That's because the `[10,10,20]` is giving the cube's dimensions in each axis, the order is `[x, y, z]`, and as we've seen the `z` axis is the vertical axis.
Before we go any further, now is a good time to mention a couple of principles that you should always keep in mind for OpenSCAD and programming in general
1. Computers are incredibly stupid, but do exactly what you tell them to do, which means if there's even a small part of code that's incorrect, then OpenSCAD will display errors, it's normal for this to happen often and bears no reflection on your ability to program keep at it! which leads to the next point.
1. Computers are incredibly stupid, but do exactly what you tell them to do, which means if there's even a small part of code that's incorrect, then OpenSCAD will display errors, it's normal for this to happen often and bears no reflection on your ability to program, keep at it! which leads to the next point.
2. Never get intimidated, if you don't understand a part of the syntax or code try changing the parameters, see what happens. Playing with the code in this manner is one of the best ways to learn.
3. The [OpenSCAD](https://www.openscad.org/cheatsheet/) cheatsheet is very useful as a reference. You should always have it open in a tab.
4. There are multiple ways to call these modules, i.e. `cube([10,10,10]); cube(size=[10,10,10]); cube([10,10,10], false);` all have the same result, it depends on if you prefer shorthand or not, to avoid confusion, for this tutorial we'll longhand `argumentName=value` in circumstances where we're using more than one argument, and shorthand if it's only one, i.e. `cube([10,10,10]);` (`[10,10,10]` is considered one value because it a single array).
3. The [OpenSCAD cheatsheet](https://www.openscad.org/cheatsheet/) is very useful as a reference. You should always have it open in a tab.
4. There are multiple ways to call these modules, i.e. `cube([10,10,10]); cube(size=[10,10,10]); cube([10,10,10], false);` all have the same result, it depends on if you prefer shorthand or not, to avoid confusion, for this tutorial we'll use longhand `argumentName=value` in circumstances where we're using more than one argument, and shorthand if it's only one, i.e. `cube([10,10,10]);` (`[10,10,10]` is considered one value because it a single array).
5. Don't worry about units. nominally the units are in the metric millimetre, since that is the standard global engineering unit, but because it exists in virtual space they are effectively unit-less and can be scaled later.
6. If you code isn't working, 9 out of 10 times it's because you are missing a semi-colon `;`, all lines apart from ones with curly brace `}` need to end with a semi-colon.
6. If your code isn't working, 9 out of 10 times it's because you are missing a semi-colon `;`, Generally speaking most lines apart from ones with a curly brace `}` need to end with a semi-colon.

12
docs/docs/getting-started/getting-started.mdx
View File

@@ -21,9 +21,9 @@ Then select OpenSCAD. Note that [CadQuery](https://cadquery.readthedocs.io/en/la
You should now see the OpenSCAD IDE (integrated development environment)
<Image img={ide} style={{backgroundSize: 'contain'}} />
<Image img={ide} className="mb-8 bg-contain rounded-md overflow-hidden" />
Here we should see the default code in the editor on the left-hand-side, the editor is where we design our CAD parts and we'll cover that more soon. You will also see the result will show up on the right-hand-side (along with the console which gives us extra information). You can click and drag inside the viewer to change the perspective, though the image will only update once you let go of the mouse.
Here we should see the default code in the editor on the left-hand-side, the editor is where we design our CAD parts and we'll cover that more soon. You will also see the generated shape on the right-hand-side (along with the console which gives us extra information). You can click and drag inside the viewer to change the perspective, though the image will only update once you let go of the mouse.
You can also move the object with with right-click and drag, and scrolling will zoom in and out.
@@ -31,10 +31,10 @@ You can also move the object with with right-click and drag, and scrolling will
For that we'll need to learn about the OpenSCAD language. For now, try replacing all of the existing code with `cube([10,10,10]);` and then hit `ctrl + s` to tell CadHub to render a new image. You should see a cube appear!
<Image img={cube} style={{backgroundSize: 'contain'}} />
<Image img={cube} className="mb-8 bg-contain rounded-md overflow-hidden" />
Don't worry if you don't understand the specifics of what happen here, we'll give you the whole run down next in our introductory tutorial, where you'll learn the basics of OpenSCAD by making a hinge.
Don't worry if you don't understand the specifics of what happened here, we'll give you the whole run down next in our introductory tutorial, where you'll learn the basics of OpenSCAD by making a hinge.
<Image img={hinge} style={{backgroundSize: 'contain'}} />
<Image img={hinge} className="mb-8 bg-contain rounded-md overflow-hidden" />
Already familiar with OpenSCAD? no worries, you can skip ahead to learn more about how to host a OpenSCAD project on CadHub
<!-- Already familiar with OpenSCAD? no worries, you can skip ahead to learn more about how to host a OpenSCAD project on CadHub -->

4
docs/docs/why-code-cad.mdx
View File

@@ -3,8 +3,8 @@ title: Why OpenSCAD
---
OpenSCAD is a Code-CAD, which means models are made from a code script rather than from a series of clicks in a user interface.
If you want an un-bias opinion on if this is a good paradigm you'll have to look elsewhere because CadHub are massive advocates for it.
If you want an un-bias opinion on if this is a good paradigm you'll have to look elsewhere because we/CadHub are massive advocates for it.
A quick run down is that you get all the benifits of git version control. It makes reusing cad logic with a team much easier, and if you think of CAD models as a communication medium between colleagues and machine, what better way of storing it than in an auditable script.
A quick run down is that you get all the benifits of git version control. It makes reusing cad logic with a team much easier, and if you think of CAD models as a communication medium between colleagues and machines, what better way of storing it than in an auditable script.
We're going to learn OpenSCAD now over [the alternatives](/blog/curated-code-cad) because not only is it very mature and stable, it's also easy to pick up. Let's get started!

5
docs/sidebars.js
View File

@@ -16,11 +16,6 @@ module.exports = {
'definitive-beginners/module-arguments',
'definitive-beginners/loops',
'definitive-beginners/wrap-up',
// {
// type: 'category',
// label: 'OpenSCAD tutorial',
// items: ['create-a-page'],
// },
],
},
],

2
docs/src/css/custom.css
View File

@@ -27,7 +27,7 @@
@apply text-2xl font-bold
}
ul li {
.markdown ul li {
@apply list-disc ml-4
}

5
docs/tailwind.config.js
View File

@@ -1,2 +1,5 @@
const webConfig = require('../app/web/tailwind.config.js')
module.exports = webConfig
module.exports = {
...webConfig,
purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.ts', './src/**/*.tsx', './blog/**/*.md', './blog/**/*.mdx', './docs/**/*.md', './docs/**/*.mdx', './src/**/*.css'],
}