Getting Started
+Use the tutorial to install SimVascular, learn how projects and the graphical interface work, and construct a first cardiovascular model.
+diff --git a/css/documentation.css b/css/documentation.css index 14fca614..974668fe 100644 --- a/css/documentation.css +++ b/css/documentation.css @@ -462,3 +462,222 @@ zero-md { font-size: 38px; color: white; } + +/*------------------------------------------ + + DOCUMENTATION TOC PAGE + +---------------------------------------------*/ + +.tocDocsSection { + padding: 0; + background-color: var(--lightbluegrey); +} + +.tocSection { + padding: 35px 45px; + background-color: var(--lightbluegrey); +} + +.tocBand { + background-color: var(--white); +} + +.tocIntro { + display: grid; + grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); + gap: 28px; + align-items: stretch; + padding-top: 45px; + padding-bottom: 45px; +} + +.tocLead { + padding: 30px; + background-color: var(--white); + border-top: 6px solid var(--darkblue); + border-radius: 6px; +} + +.tocLead h1 { + margin: 0; + padding-top: 0; + padding-bottom: 12px; + text-align: left; +} + +.tocLead p { + max-width: 800px; + margin: 0; + padding: 0; + font-family: "Lora", Georgia, "Times New Roman", serif; + font-size: 20px; + line-height: 1.6; +} + +.tocRecommendation { + padding: 24px; + background-color: var(--verydarkblue); + color: white; + border-radius: 6px; +} + +.tocRecommendation h2 { + margin: 0; + padding: 0 0 12px; + color: white; + text-transform: none; + font-size: 27px; + line-height: 1.25; +} + +.tocRecommendation p { + margin: 0; + padding: 0; + color: white; + line-height: 1.55; +} + +.tocRecommendation a { + display: block; + margin-top: 18px; + padding: 12px 14px; + border: 1px solid var(--blue); + border-radius: 4px; + color: white; + text-align: center; + font-weight: bold; +} + +.tocRecommendation a:hover { + background-color: var(--darkblue); + color: white; + text-decoration: none; +} + +.tocSectionHeading { + padding-bottom: 10px; +} + +.tocSectionHeading h2, +.tocSectionHeading p { + margin: 0; +} + +.tocSectionHeading p { + color: var(--verydarkblue); + font-size: 18px; + line-height: 1.55; +} + +.tocPageGrid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; + padding-top: 15px; +} + +.tocPageSummary { + padding: 18px; + min-height: 100%; + background-color: var(--white); + border-left: 5px solid var(--darkblue); + border-radius: 4px; +} + +.tocBand .tocPageSummary, +.tocBand .tocSteps li { + background-color: var(--lightbluegrey); +} + +.tocPageSummary h3 { + margin: 0; + padding-top: 0; + padding-bottom: 8px; + text-transform: none; + font-size: 21px; + line-height: 1.25; +} + +.tocPageSummary p, +.tocSteps p, +.tocNote { + margin: 0; + padding-top: 0; + line-height: 1.55; +} + +.tocPageSummary p { + font-family: "Lora", Georgia, "Times New Roman", serif; +} + +.tocSteps { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin: 0; + padding: 15px 0 0 0; + list-style: none; +} + +.tocSteps li { + display: grid; + grid-template-columns: 44px minmax(0, 1fr); + gap: 12px; + padding: 15px; + background-color: var(--white); + border: 1px solid #c4cdd9; + border-radius: 6px; +} + +.tocSteps span { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: var(--verydarkblue); + color: white; + font-weight: bold; +} + +.tocSteps a { + display: block; + padding-top: 4px; + padding-bottom: 6px; + font-weight: bold; +} + +.tocNote { + margin-top: 18px; + padding: 16px; + background-color: var(--lightbluegrey); + border-radius: 4px; +} + +@media only screen and (max-width: 1000px) { + .tocIntro, + .tocPageGrid, + .tocSteps { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 768px) { + .tocSection { + padding-left: 25px; + padding-right: 25px; + } + + .tocIntro { + gap: 18px; + padding-top: 25px; + padding-bottom: 25px; + } + + .tocLead, + .tocRecommendation { + padding: 22px; + } +} diff --git a/css/home.css b/css/home.css index c409ea1c..5f3f1eb9 100644 --- a/css/home.css +++ b/css/home.css @@ -780,6 +780,73 @@ th:hover { padding: 15px; } +.documentationTeaser { + padding-top: 15px; + padding-bottom: 30px; +} + +.documentationTeaserInner { + max-width: 1080px; + margin: auto; + display: grid; + grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); + gap: 28px; + align-items: center; + background-color: var(--lightbluegrey); + border: 1px solid #aebbd0; + border-top: 5px solid var(--darkblue); + border-radius: 6px; + padding: 28px; +} + +.documentationTeaserText h2 { + text-align: left; + text-transform: none; + margin: 0; + padding-top: 0; +} + +.documentationTeaserText p, +.documentationTeaserAction p { + text-align: left; + line-height: 1.6; +} + +.documentationTeaserAction { + text-align: center; +} + +.documentationTocButton { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + width: 100%; + max-width: 360px; + padding: 14px 18px; + background-color: var(--verydarkblue); + border: 1.5px solid var(--verydarkblue); + color: white; + border-radius: 4px; + font-size: 18px; + font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: bold; +} + +.documentationTocButton:hover { + background-color: var(--darkblue); + border-color: var(--darkblue); + color: white; + text-decoration: none; +} + +@media only screen and (max-width: 767px) { + .documentationTeaserInner { + grid-template-columns: 1fr; + padding: 22px; + } +} + /*------------------------------------------ SUPPORT SECTION @@ -1118,4 +1185,4 @@ th:hover { .application-link:hover { color: #0056b3; text-decoration: underline; /* underline */ -} \ No newline at end of file +} diff --git a/documentation/index.html b/documentation/index.html new file mode 100644 index 00000000..5b57e839 --- /dev/null +++ b/documentation/index.html @@ -0,0 +1,273 @@ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ Learn SimVascular, build cardiovascular models, run simulations, and find technical details.
+Use this sequence to become familiar with the software, create a first image-based geometric model of the vascular anatomy, and run a hemodynamic simulation.
+Install the application, understand projects, and become familiar with the graphical user interface.
+Follow the tutorial to work with medical image data, vessel paths, lumen segmentations, a solid model, and a finite element mesh.
+Continue from geometric model construction to boundary conditions, solver inputs, and simulation results.
+Use the tutorial to install SimVascular, learn how projects and the graphical interface work, and construct a first cardiovascular model.
+Create vessel paths and lumen segmentations from image data, then construct a three-dimensional vascular model.
+Generate and inspect finite element meshes, control local refinement, and add boundary layers for simulation.
+Assign boundary conditions, generate solver input files, run blood-flow simulations, and review results.
+Configure and run three-dimensional multiphysics simulations, understand solver inputs and data formats, and consult theory and developer guidance.
+Define custom boundary conditions, prepare required files, compile the model, and run it with a simulation.
+Create and run computationally efficient 0D and 1D models, calibrate parameters, and visualize reduced-order model results.
+Automate SimVascular tasks and work programmatically with projects, geometry, modeling, segmentation, and meshing.
+Literature on boundary conditions, solvers, modeling, meshing, validation, clinical applications, and uncertainty quantification
+Review complete cardiovascular cases that connect clinical data, modeling choices, boundary conditions, and simulation results.
+Coronary anatomy, model construction, simulation setup, parameters, and results
+Clinical data, model description, boundary conditions, and simulation results for an aortofemoral model
+A second aortofemoral example with model description, inflow and outflow setup, and results
+Pulmonary clinical data, model description, boundary conditions, and simulation results
+Additional demonstration projects are available from SimTK.
++
- Simvascular is the only fully open-source software package providing a complete pipeline + SimVascular is the only fully open-source software package providing a complete pipeline from medical image data segmentation to patient specific blood flow simulation and analysis.
@@ -217,7 +217,7 @@We also acknowledge the contributions of many other collaborators. - View them here + View them here