occheung
/
web2019
forked from M-Labs/web2019
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(SolveSpace): Reviews layout and md file

This commit is contained in:
sovanna 2019-07-19 15:58:48 +02:00
parent 92d7da762b
commit 6e83bf82d5
3 changed files with 117 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
content/software/solvespace.md
View File

@ -7,6 +7,7 @@ template = "page.html"
layout_css = "col-12 col-md-10 mx-auto" layout_css = "col-12 col-md-10 mx-auto"
+++ +++
{% div() %} {% div() %}
<script src="/js/hammer-2.0.8.js"></script> <script src="/js/hammer-2.0.8.js"></script>
<script src="/js/three-r76.js"></script> <script src="/js/three-r76.js"></script>
@ -14,108 +15,96 @@ layout_css = "col-12 col-md-10 mx-auto"
{% end %} {% end %}
{% centerp(markdown=true) %}
{% layout_centered_simple() %}
##### What is SolveSpace? ##### What is SolveSpace?
{% end %} {% end %}
<a href="http://solvespace.com/" target="_blank" rel="noopener noreferrer">SolveSpace</a> is a libre and open-source parametric computer-aided design application that uses a NURBS geometric kernel, allowing it to represent curved surfaces exactly. It was originally released by <a href="http://cq.cx/" target="_blank" rel="noopener noreferrer">Jonathan Westhues</a> under the GPLv3 license and is now further developed at M-Labs. <a href="http://solvespace.com/" target="_blank" rel="noopener noreferrer">SolveSpace</a> is a libre and open-source parametric computer-aided design application that uses a NURBS geometric kernel, allowing it to represent curved surfaces exactly. It was originally released by <a href="http://cq.cx/" target="_blank" rel="noopener noreferrer">Jonathan Westhues</a> under the GPLv3 license and is now further developed at M-Labs.
{% centerp(markdown=true, css="mt-5") %}
{% layout_centered_simple(css="mt-5") %}
##### What can be done with SolveSpace? ##### What can be done with SolveSpace?
{% end %} {% end %}
SolveSpace is primarily useful for mechanical design. At M-Labs, we use it to design vacuum chambers as well as custom fittings and fixtures. The models can then be exported as STEP or PDF with dimensions and sent to a machine shop for manufacturing. SolveSpace is primarily useful for mechanical design. At M-Labs, we use it to design vacuum chambers as well as custom fittings and fixtures. The models can then be exported as STEP or PDF with dimensions and sent to a machine shop for manufacturing.
{% centerp(markdown=true, css="mt-5") %}
{% layout_centered_simple(css="mt-5") %}
**Fittings and adapters** **Fittings and adapters**
{% end %} {% end %}
Of course, most vacuum chambers would have some standard flanges. These can be easily modelled using a single sketch and a lathe operation: Of course, most vacuum chambers would have some standard flanges. These can be easily modelled using a single sketch and a lathe operation:
{% layoutlr1() %}
<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center">
<img class="img-fluid" src="/images/kf25-section.png" width="400" height="100%"> {% layout_treejs(two=true, css="row d-flex align-items-center mt-5 mb-1") %}
<img class="img-fluid" src="/images/kf25-section.png" width="400" height="100%">
<div id="kf25"></div> <div id="kf25"></div>
<script src="/js/models/kf25.js"></script> <script src="/js/models/kf25.js"></script>
<script> <script>
(function () { (function () {
var node = document.getElementById("kf25"); var node = document.getElementById("kf25");
var params = {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)}; var params = {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)};
node.parentNode.replaceChild(solvespace(solvespace_model_kf25, params), node); node.parentNode.replaceChild(solvespace(solvespace_model_kf25, params), node);
})(); })();
</script> </script>
</div>
{% end %} {% end %}
*(The illustration on the right is "live"; it can be panned, rotated and scaled.)*
{% centerp(markdown=true, css="mt-3") %}
&nbsp;
{% end %}
(The illustration on the right is "live"; it can be panned, rotated and scaled.)
In a similar way, an NW160 viewport and an adapter with an NW160 flange, a KF40, two KF25 and two KF16 ports were designed: In a similar way, an NW160 viewport and an adapter with an NW160 flange, a KF40, two KF25 and two KF16 ports were designed:
{% layoutlr1() %} {% layout_treejs(two=true) %}
<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center"> <div id="viewport"></div>
<script src="/js/models/viewport.js"></script>
<div id="viewport"></div> <script>
<script src="/js/models/viewport.js"></script>
<script>
(function () { (function () {
var node = document.getElementById("viewport"); var node = document.getElementById("viewport");
var params = {width: 400, height: 300, scale: 3}; var params = {width: 400, height: 300, scale: 3};
node.parentNode.replaceChild(solvespace(solvespace_model_viewport, params), node); node.parentNode.replaceChild(solvespace(solvespace_model_viewport, params), node);
})(); })();
</script> </script>
<div id="multiport"></div> <div id="multiport"></div>
<script src="/js/models/multiport.js"></script> <script src="/js/models/multiport.js"></script>
<script> <script>
(function () { (function () {
var node = document.getElementById("multiport"); var node = document.getElementById("multiport");
var params = {width: 400, height: 300, scale: 3}; var params = {width: 400, height: 300, scale: 3};
node.parentNode.replaceChild(solvespace(solvespace_model_multiport, params), node); node.parentNode.replaceChild(solvespace(solvespace_model_multiport, params), node);
})(); })();
</script> </script>
</div>
{% end %} {% end %}
{% centerp(markdown=true, css="mt-5") %} {% layout_centered_simple(css="mt-5") %}
**A vacuum chamber** **A vacuum chamber**
{% end %} {% end %}
The fittings above were designed to be used with a cylindrical vacuum chamber, 200mm long with two NW160 flanges, two KF40 and one KF25 ports: The fittings above were designed to be used with a cylindrical vacuum chamber, 200mm long with two NW160 flanges, two KF40 and one KF25 ports:
{% layoutlr1() %} {% layout_treejs() %}
<div class="col-12 d-flex flex-column flex-lg-row justify-content-center align-items-center"> <div id="chamber"></div>
<script src="/js/models/chamber.js"></script>
<div id="chamber"></div> <script>
<script src="/js/models/chamber.js"></script>
<script>
(function () { (function () {
var node = document.getElementById("chamber"); var node = document.getElementById("chamber");
var params = {width: 800, height: 600, scale: 3}; var params = {width: 800, height: 600, scale: 3};
node.parentNode.replaceChild(solvespace(solvespace_model_chamber, params), node); node.parentNode.replaceChild(solvespace(solvespace_model_chamber, params), node);
})(); })();
</script> </script>
</div>
{% end %} {% end %}
{% centerp(markdown=true, css="mt-5") %} {% layout_centered_simple(css="mt-5") %}
**Cryocooler refilling fixture** **Cryocooler refilling fixture**
{% end %} {% end %}
@ -123,101 +112,86 @@ To repair a broken Ricor K526S crycooler, it was necessary to disassemble it, wh
First, the cryocooler and its cold head were modelled to verify fits: First, the cryocooler and its cold head were modelled to verify fits:
{% layoutlr1() %} {% layout_treejs(two=true) %}
<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center mb-3"> <div id="k526s-body"></div>
<script src="/js/models/k526s-body.js"></script>
<div id="k526s-body"></div> <script>
<script src="/js/models/k526s-body.js"></script>
<script>
(function () { (function () {
var node = document.getElementById("k526s-body"); var node = document.getElementById("k526s-body");
var params = {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)}; var params = {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)};
node.parentNode.replaceChild(solvespace(solvespace_model_k526s_body, params), node); node.parentNode.replaceChild(solvespace(solvespace_model_k526s_body, params), node);
})(); })();
</script> </script>
<div id="k526s-head"></div> <div id="k526s-head"></div>
<script src="/js/models/k526s-head.js"></script> <script src="/js/models/k526s-head.js"></script>
<script> <script>
(function () { (function () {
var node = document.getElementById("k526s-head"); var node = document.getElementById("k526s-head");
var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)}; var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)};
node.parentNode.replaceChild(solvespace(solvespace_model_k526s_head, params), node); node.parentNode.replaceChild(solvespace(solvespace_model_k526s_head, params), node);
})(); })();
</script> </script>
</div>
{% end %} {% end %}
Then, a fixture was designed, shown below with a cutout (blue). It consists of a bracket, a piston case that screws into the bracket (the thread is not modelled), a piston with a retaining screw, a retaining washer, a Swagelok fitting attached to the orange port (not modelled), and a few compression gaskets (also not modelled). The bracket and the piston case hold the cryocooler The retaining washer prevents the piston from being ejected by high pressure helium and, conversely, together with another washer prevents the piston from being sucked in and blocking the gas flow during evacuation. Then, a fixture was designed, shown below with a cutout (blue). It consists of a bracket, a piston case that screws into the bracket (the thread is not modelled), a piston with a retaining screw, a retaining washer, a Swagelok fitting attached to the orange port (not modelled), and a few compression gaskets (also not modelled). The bracket and the piston case hold the cryocooler The retaining washer prevents the piston from being ejected by high pressure helium and, conversely, together with another washer prevents the piston from being sucked in and blocking the gas flow during evacuation.
{% layoutlr1() %} {% layout_treejs() %}
<div class="col-12 d-flex flex-column flex-lg-row justify-content-center align-items-center mb-3"> <div id="k526s-fixture"></div>
<script src="/js/models/k526s-fixture.js"></script>
<div id="k526s-fixture"></div> <script>
<script src="/js/models/k526s-fixture.js"></script>
<script>
(function () { (function () {
var node = document.getElementById("k526s-fixture"); var node = document.getElementById("k526s-fixture");
var params = {width: 800, height: 400, scale: 12}; var params = {width: 800, height: 400, scale: 12};
node.parentNode.replaceChild(solvespace(solvespace_model_k526s_fixture, params), node); node.parentNode.replaceChild(solvespace(solvespace_model_k526s_fixture, params), node);
})(); })();
</script> </script>
</div>
{% end %} {% end %}
The KF25 adapter for the cold head is a much simpler device: The KF25 adapter for the cold head is a much simpler device:
{% layoutlr1() %} {% layout_treejs(two=true) %}
<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center mb-5"> <div id="k526s-adapter"></div>
<script src="/js/models/k526s-adapter.js"></script>
<div id="k526s-adapter"></div> <script>
<script src="/js/models/k526s-adapter.js"></script>
<script>
(function () { (function () {
var node = document.getElementById("k526s-adapter"); var node = document.getElementById("k526s-adapter");
var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)}; var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)};
node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter, params), node); node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter, params), node);
})(); })();
</script> </script>
<div id="k526s-adapter-assy"></div> <div id="k526s-adapter-assy"></div>
<script src="/js/models/k526s-adapter-assy.js"></script> <script src="/js/models/k526s-adapter-assy.js"></script>
<script> <script>
(function () { (function () {
var node = document.getElementById("k526s-adapter-assy"); var node = document.getElementById("k526s-adapter-assy");
var params = {width: 400, height: 300, scale: 8}; var params = {width: 400, height: 300, scale: 8};
node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter_assy, params), node); node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter_assy, params), node);
})(); })();
</script> </script>
</div>
{% end %} {% end %}
{% centerp(markdown=true) %} {% layout_centered_content(css="row d-flex align-items-center mt-5 mb-5 pt-5") %}
##### Ongoing development by M-Labs ##### Ongoing development by M-Labs
{% end %} {% end %}
As originally released, SolveSpace was far ahead almost every other FLOSS CAD by virtue of its parametric nature, exact internal representation of curves and a codebase easy to work with. (The only other FLOSS parametric CAD that uses a NURBS representation, including NURBS booleans, is FreeCAD.) While it was already suitable for practical work, it had a much greater unrealized potential. As originally released, SolveSpace was far ahead almost every other FLOSS CAD by virtue of its parametric nature, exact internal representation of curves and a codebase easy to work with. (The only other FLOSS parametric CAD that uses a NURBS representation, including NURBS booleans, is FreeCAD.) While it was already suitable for practical work, it had a much greater unrealized potential.
Thus, M-Labs has developed many additional features: Thus, M-Labs has developed many additional features:
- Native Linux (GTK) and OS X ports; - Native Linux (GTK) and OS X ports;
- stippling as well as <a href="https://m-labs.hk/solvespace/images/hiddenline.gif" target="_blank" rel="noopener noreferrer">outline and hidden line</a> styling in preparation for export of shop drawings according to ISO or another standard; - stippling as well as <a href="https://m-labs.hk/solvespace/images/hiddenline.gif" target="_blank" rel="noopener noreferrer">outline and hidden line</a> styling in preparation for export of shop drawings according to ISO or another standard;
- WebGL export using Three.js, which is how the interactive models on this page work; - WebGL export using Three.js, which is how the interactive models on this page work;
- DXF export that preserves the ability to edit the drawing afterwards, by mapping parametric constraints to DXF dimensions and grouping the lines; - DXF export that preserves the ability to edit the drawing afterwards, by mapping parametric constraints to DXF dimensions and grouping the lines;
- DXF import that automatically infers (some) constraints, such as horizontal/vertical, point-coincident, linear and angular dimensions from DXF geometry and dimensions; - DXF import that automatically infers (some) constraints, such as horizontal/vertical, point-coincident, linear and angular dimensions from DXF geometry and dimensions;
- internationalization; - internationalization;
- and many other minor ones. - and many other minor ones.

5
templates/shortcodes/layout_centered_simple.html Normal file
View File

@ -0,0 +1,5 @@
<div class="text-center {% if css %}{{ css }}{% endif %}">
{{ body | markdown | safe}}
</div>

9
templates/shortcodes/layout_treejs.html Normal file
View File

@ -0,0 +1,9 @@
<div class="{% if css %}{{ css }}{% else %}row d-flex align-items-center mt-5 mb-5{% endif %}">
<div class="col-12 d-flex flex-column flex-lg-row justify-content-center {% if two %}justify-content-md-between{% else %}justify-content-md-center{% endif %} align-items-center">
{{ body | safe }}
</div>
</div>