reorganized User Guide

jupysketch-doc/docs/about.md

@@ -6,15 +6,7 @@ Pysketch was developped in 2012 by [Hans Petter Langtangen](https://en.wikipedia
 
 I just need to upgrade it to make it compatible with Jupyter: This is the inception of Jupyter Sketch project!
 
-A sketch capturing the "dry friction case"
-
-![](images/dryfriction.png)
-
-How it is structured: the composition hierarchy
-
-![](images/dotfriction.png)
-
-Built with
+Documentation Built with
 
 * mkdocs 1.1.0
 * mkdocs-material 5.4.0

jupysketch-doc/docs/index.md

@@ -1,32 +1,13 @@
-# Welcome to Jupyter Sketcher Documentation
+# Welcome to Jupyter Sketcher User Guide
 
 [![](images/github_small.png)](https://github.com/gbrault/jupytersketcher) **Home Page of jupytersketcher project**
 
-## Problem solved
+Any time you need to make a sketch while solving a mechanical problem with a jupyter notebook, then PySketcher is your friend!
 
-When you need to solve a mechanical problem, sooner or later you are going to sketch a figure to capture problem's parameters and variables.
+A sketch capturing the "dry friction case"
 
-The better documented, the easier the problem is to resolve for the designer, and the easier it is for others to understand how it is actually solved.
+![](images/dryfriction.png)
 
-What if you could capture this in the program solving the problem and use it as a repository for all definitions and physical variables?
+How it is structured: the composition hierarchy
 
-This is what jupytersketcher (name of pysketcher module) is proposing to solve.
-
-Of course, this makes even more sense when using Jupyter notebooks, because as a sketch not only the image of the solved problem can be displayed, but the dictionary of all variables processed in the notebook for solving physics is used to draw the image and at the same time to solve the equations of motion.
-
-jupytersketcher is another small step to help building reusable science.
-
-## Getting Started
-
-You can use the binder link in jupytersketcher Github to see some experiments with pysketcher. 
-[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/gbrault/jupytersketcher.git/master?filepath=notebooks%2FDryFriction.ipynb)
-
-## pysketcher features
-
-* Drawing sketches on a matplotlib widget for Jupyter Notebook server or Lab
-* Defining a yaml based "grammar" to define sketches and simplify reuse
-* Animating sketches within Jupyter notebooks
-
-## Main benefit
-
-With Pysketcher for Jupyter mechanical notebooks, you get a single copy of the description of the problem which is as well a space to simulate the system behaviour
+![](images/dotfriction.png)

jupysketch-doc/docs/presentation.md

@@ -0,0 +1,28 @@
+## Problem solved
+
+When you need to address a mechanical design problem, sooner or later you are going to sketch a figure to capture problem's parameters and variables.
+
+The better documented, the easier the problem is to resolve for the designer, and the easier it is for others to understand how it is actually solved.
+
+What if you could capture this in the program solving the problem and use it as a repository for all definitions and physical variables?
+
+This is what jupytersketcher (name of pysketcher module) is proposing to solve.
+
+Of course, this makes even more sense when using Jupyter notebooks, because as a sketch not only the image of the solved problem can be displayed, but the dictionary of all variables processed in the notebook for solving physics is used to draw the image and at the same time to solve the equations of motion.
+
+jupytersketcher is another small step to help building reusable science.
+
+## Getting Started
+
+You can use the binder link in jupytersketcher Github to make some experiments with pysketcher. 
+[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/gbrault/jupytersketcher.git/master?filepath=notebooks%2FDryFriction.ipynb)
+
+## pysketcher features
+
+* Drawing sketches on a matplotlib widget for Jupyter Notebook server or Lab
+* Defining a yaml based "grammar" to define sketches and simplify reuse
+* Animating sketches within Jupyter notebooks
+
+## Main benefit
+
+With Pysketcher for Jupyter mechanical notebooks, you get a single copy of the description of the problem which is as well a space to solve the system physics and display how it works

jupysketch-doc/docs/sketcher.md

@@ -1,6 +1,6 @@
 ## A language to describe a sketch
 
-Pysketcher initial version [HPL Pysketcher]() enable sketch definition in python. HPL is showing the hierachical nature of sketches. This is implemented via the Composition function. One can further grasp this using the graphviz_dot function applied to discover the composition herarchy implemented as a graphviz image [see The hierarchy of the "friction" main object](#the-hierarchy-of-the-friction-main-object) at the end of this page.
+Pysketcher initial version [HPL Pysketcher]() enable sketch definition in python. HPL is showing the hierachical nature of sketches. This is implemented via the Composition function. One can further grasp this using the graphviz_dot function applied to discover the composition herarchy implemented as a graphviz image [see The hierarchy of the "friction" sketch](#friction-sketch-hierarchy) at the end of this page.
 
 Due to the hierarchical nature of sketches, it is quite straightforward to think about using yaml as the syntax for defining a sketch.
 
@@ -11,14 +11,14 @@ Benefits are the following:
 * A more robust sketch definition 
     * The same set of rules is applied to generate a sketch
     * No further python idiom is be intermingled as opposed to the case of python defined sketches
-    * Of course, data defined versus program defined there is no winner, it's just a matter of context
+    * Don't make me wrong! Data defined versus program defined there is no winner, it's just a matter of context
 
 ## Example
 
 This example provides the yaml content to define the Dry Friction case
 
 ### The final sketch
-![](images/dryfriction.png)
+![dryfriction sketch](images/dryfriction.png)
 
 An inclined plan (the A-B edge) supports a blue rectangle which is dragged down by gravity. The plan makes an angle $\theta$ with the ground level. Sketch implementation notebook includes a controller enabling the $\theta$ angle to change. The whole plan, including the body, can rotate arround point B.
 

jupysketch-doc/mkdocs.yml

@@ -2,8 +2,9 @@ site_name: Jypyter Sketcher
 nav:
     - Home: index.md
     - About: about.md
-    - Definition: sketcher.md
-    - Reference: reference.md
+    - Presentation: presentation.md
+    - Learning by Example: sketcher.md
+    - Shapes Reference: shapereference.md
 theme:
   name: material
 markdown_extensions:

jupysketch-doc/site/404.html

@@ -170,8 +170,8 @@
 
 
   <li class="md-nav__item">
-    <a href="/sketcher/" title="Definition" class="md-nav__link">
-      Definition
+    <a href="/presentation/" title="Presentation" class="md-nav__link">
+      Presentation
     </a>
   </li>
 
@@ -182,8 +182,20 @@
 
 
   <li class="md-nav__item">
-    <a href="/reference/" title="Reference" class="md-nav__link">
-      Reference
+    <a href="/sketcher/" title="Learning by Example" class="md-nav__link">
+      Learning by Example
+    </a>
+  </li>
+
+    
+      
+      
+      
+
+
+  <li class="md-nav__item">
+    <a href="/shapereference/" title="Shapes Reference" class="md-nav__link">
+      Shapes Reference
     </a>
   </li>
 

jupysketch-doc/site/about/index.html

@@ -177,8 +177,8 @@
 
 
   <li class="md-nav__item">
-    <a href="../sketcher/" title="Definition" class="md-nav__link">
-      Definition
+    <a href="../presentation/" title="Presentation" class="md-nav__link">
+      Presentation
     </a>
   </li>
 
@@ -189,8 +189,20 @@
 
 
   <li class="md-nav__item">
-    <a href="../reference/" title="Reference" class="md-nav__link">
-      Reference
+    <a href="../sketcher/" title="Learning by Example" class="md-nav__link">
+      Learning by Example
+    </a>
+  </li>
+
+    
+      
+      
+      
+
+
+  <li class="md-nav__item">
+    <a href="../shapereference/" title="Shapes Reference" class="md-nav__link">
+      Shapes Reference
     </a>
   </li>
 
@@ -217,11 +229,7 @@
 <p>My second requirement is to have sketches available in Jupyter notebooks (Lab or notebook server)</p>
 <p>Pysketch was developped in 2012 by <a href="https://en.wikipedia.org/wiki/Hans_Petter_Langtangen">Hans Petter Langtangen</a>, see it in <a href="https://github.com/hplgit/pysketcher">GitHub</a>. At that time, Jupyter was emerging and Pysketch was developped as a standalone application. </p>
 <p>I just need to upgrade it to make it compatible with Jupyter: This is the inception of Jupyter Sketch project!</p>
-<p>A sketch capturing the "dry friction case"</p>
-<p><img alt="" src="../images/dryfriction.png" /></p>
-<p>How it is structured: the composition hierarchy</p>
-<p><img alt="" src="../images/dotfriction.png" /></p>
-<p>Built with</p>
+<p>Documentation Built with</p>
 <ul>
 <li>mkdocs 1.1.0</li>
 <li>mkdocs-material 5.4.0</li>
@@ -259,13 +267,13 @@
           </a>
         
         
-          <a href="../sketcher/" title="Definition" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
+          <a href="../presentation/" title="Presentation" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
             <div class="md-footer-nav__title">
               <div class="md-ellipsis">
                 <span class="md-footer-nav__direction">
                   Next
                 </span>
-                Definition
+                Presentation
               </div>
             </div>
             <div class="md-footer-nav__button md-icon">

jupysketch-doc/site/index.html

@@ -49,7 +49,7 @@
     <div data-md-component="skip">
       
         
-        <a href="#welcome-to-jupyter-sketcher-documentation" class="md-skip">
+        <a href="#welcome-to-jupyter-sketcher-user-guide" class="md-skip">
           Skip to content
         </a>
       
@@ -159,64 +159,22 @@
       
     
     
-      <label class="md-nav__link md-nav__link--active" for="__toc">
-        Home
-        <span class="md-nav__icon md-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2m0 4h14v-2H3v2m0 4h14v-2H3v2m16 0h2v-2h-2v2m0-10v2h2V7h-2m0 6h2v-2h-2v2z"/></svg>
-        </span>
-      </label>
-    
     <a href="." title="Home" class="md-nav__link md-nav__link--active">
       Home
     </a>
     
-      
-<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
-  
-  
+  </li>
+
     
-  
-  
-    <label class="md-nav__title" for="__toc">
-      <span class="md-nav__icon md-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
-      </span>
-      Table of contents
-    </label>
-    <ul class="md-nav__list" data-md-scrollfix>
-      
-        <li class="md-nav__item">
-  <a href="#problem-solved" class="md-nav__link">
-    Problem solved
-  </a>
-  
-</li>
-      
-        <li class="md-nav__item">
-  <a href="#getting-started" class="md-nav__link">
-    Getting Started
-  </a>
-  
-</li>
       
-        <li class="md-nav__item">
-  <a href="#pysketcher-features" class="md-nav__link">
-    pysketcher features
-  </a>
-  
-</li>
       
-        <li class="md-nav__item">
-  <a href="#main-benefit" class="md-nav__link">
-    Main benefit
-  </a>
-  
-</li>
       
-    </ul>
-  
-</nav>
-    
+
+
+  <li class="md-nav__item">
+    <a href="about/" title="About" class="md-nav__link">
+      About
+    </a>
   </li>
 
     
@@ -226,8 +184,8 @@
 
 
   <li class="md-nav__item">
-    <a href="about/" title="About" class="md-nav__link">
-      About
+    <a href="presentation/" title="Presentation" class="md-nav__link">
+      Presentation
     </a>
   </li>
 
@@ -238,8 +196,8 @@
 
 
   <li class="md-nav__item">
-    <a href="sketcher/" title="Definition" class="md-nav__link">
-      Definition
+    <a href="sketcher/" title="Learning by Example" class="md-nav__link">
+      Learning by Example
     </a>
   </li>
 
@@ -250,8 +208,8 @@
 
 
   <li class="md-nav__item">
-    <a href="reference/" title="Reference" class="md-nav__link">
-      Reference
+    <a href="shapereference/" title="Shapes Reference" class="md-nav__link">
+      Shapes Reference
     </a>
   </li>
 
@@ -273,44 +231,6 @@
     
   
   
-    <label class="md-nav__title" for="__toc">
-      <span class="md-nav__icon md-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
-      </span>
-      Table of contents
-    </label>
-    <ul class="md-nav__list" data-md-scrollfix>
-      
-        <li class="md-nav__item">
-  <a href="#problem-solved" class="md-nav__link">
-    Problem solved
-  </a>
-  
-</li>
-      
-        <li class="md-nav__item">
-  <a href="#getting-started" class="md-nav__link">
-    Getting Started
-  </a>
-  
-</li>
-      
-        <li class="md-nav__item">
-  <a href="#pysketcher-features" class="md-nav__link">
-    pysketcher features
-  </a>
-  
-</li>
-      
-        <li class="md-nav__item">
-  <a href="#main-benefit" class="md-nav__link">
-    Main benefit
-  </a>
-  
-</li>
-      
-    </ul>
-  
 </nav>
                   </div>
                 </div>
@@ -325,26 +245,13 @@
                   
                 
                 
-                <h1 id="welcome-to-jupyter-sketcher-documentation">Welcome to Jupyter Sketcher Documentation</h1>
+                <h1 id="welcome-to-jupyter-sketcher-user-guide">Welcome to Jupyter Sketcher User Guide</h1>
 <p><a href="https://github.com/gbrault/jupytersketcher"><img alt="" src="images/github_small.png" /></a> <strong>Home Page of jupytersketcher project</strong></p>
-<h2 id="problem-solved">Problem solved</h2>
-<p>When you need to solve a mechanical problem, sooner or later you are going to sketch a figure to capture problem's parameters and variables.</p>
-<p>The better documented, the easier the problem is to resolve for the designer, and the easier it is for others to understand how it is actually solved.</p>
-<p>What if you could capture this in the program solving the problem and use it as a repository for all definitions and physical variables?</p>
-<p>This is what jupytersketcher (name of pysketcher module) is proposing to solve.</p>
-<p>Of course, this makes even more sense when using Jupyter notebooks, because as a sketch not only the image of the solved problem can be displayed, but the dictionary of all variables processed in the notebook for solving physics is used to draw the image and at the same time to solve the equations of motion.</p>
-<p>jupytersketcher is another small step to help building reusable science.</p>
-<h2 id="getting-started">Getting Started</h2>
-<p>You can use the binder link in jupytersketcher Github to see some experiments with pysketcher. 
-<a href="https://mybinder.org/v2/gh/gbrault/jupytersketcher.git/master?filepath=notebooks%2FDryFriction.ipynb"><img alt="Binder" src="https://mybinder.org/badge_logo.svg" /></a></p>
-<h2 id="pysketcher-features">pysketcher features</h2>
-<ul>
-<li>Drawing sketches on a matplotlib widget for Jupyter Notebook server or Lab</li>
-<li>Defining a yaml based "grammar" to define sketches and simplify reuse</li>
-<li>Animating sketches within Jupyter notebooks</li>
-</ul>
-<h2 id="main-benefit">Main benefit</h2>
-<p>With Pysketcher for Jupyter mechanical notebooks, you get a single copy of the description of the problem which is as well a space to simulate the system behaviour</p>
+<p>Any time you need to make a sketch while solving a mechanical problem with a jupyter notebook, then PySketcher is your friend!</p>
+<p>A sketch capturing the "dry friction case"</p>
+<p><img alt="" src="images/dryfriction.png" /></p>
+<p>How it is structured: the composition hierarchy</p>
+<p><img alt="" src="images/dotfriction.png" /></p>
                 
               
               

jupysketch-doc/site/reference/index.html

@@ -15,7 +15,7 @@
     
     
       
-        <title>Reference - Jypyter Sketcher</title>
+        <title>Shapes Reference - Jypyter Sketcher</title>
       
     
     
@@ -77,7 +77,7 @@
           </span>
           <span class="md-header-nav__topic md-ellipsis">
             
-              Reference
+              Shapes Reference
             
           </span>
         </div>
@@ -175,8 +175,20 @@
 
 
   <li class="md-nav__item">
-    <a href="../sketcher/" title="Definition" class="md-nav__link">
-      Definition
+    <a href="../presentation/" title="Presentation" class="md-nav__link">
+      Presentation
+    </a>
+  </li>
+
+    
+      
+      
+      
+
+
+  <li class="md-nav__item">
+    <a href="../sketcher/" title="Learning by Example" class="md-nav__link">
+      Learning by Example
     </a>
   </li>
 
@@ -194,14 +206,14 @@
     
     
       <label class="md-nav__link md-nav__link--active" for="__toc">
-        Reference
+        Shapes Reference
         <span class="md-nav__icon md-icon">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2m0 4h14v-2H3v2m0 4h14v-2H3v2m16 0h2v-2h-2v2m0-10v2h2V7h-2m0 6h2v-2h-2v2z"/></svg>
         </span>
       </label>
     
-    <a href="./" title="Reference" class="md-nav__link md-nav__link--active">
-      Reference
+    <a href="./" title="Shapes Reference" class="md-nav__link md-nav__link--active">
+      Shapes Reference
     </a>
     
       
@@ -1033,7 +1045,7 @@
                   
                 
                 
-                  <h1>Reference</h1>
+                  <h1>Shapes Reference</h1>
                 
                 <h2 id="list-of-shapes">List of Shapes</h2>
 <p><a href="#code-to-display-the-above-defined-shapes">Code to display shapes</a></p>
@@ -1067,7 +1079,7 @@ B = point(5,5)
 line = Line(A,B)
 </code></pre>
 
-<p><img alt="line" src="line.svg" /></p>
+<p><img alt="line" src="../reference/line.svg" /></p>
 <h2 id="rectangle">Rectangle</h2>
 <p><a href="#list-of-shapes">home</a> Defines a rectangle providing bottom left corner, x dimension, y dimension</p>
 <h3 id="yaml_1">Yaml</h3>
@@ -1084,7 +1096,7 @@ p = point(-(L/2),-(h/2))
 rectangle = Rectangle(p,L,h)
 </code></pre>
 
-<p><img alt="rectangle" src="rectangle.svg" /></p>
+<p><img alt="rectangle" src="../reference/rectangle.svg" /></p>
 <h2 id="circle">Circle</h2>
 <p><a href="#list-of-shapes">home</a> Defines a circle proving center and radius</p>
 <h3 id="yaml_2">Yaml</h3>
@@ -1095,7 +1107,7 @@ rectangle = Rectangle(p,L,h)
 <pre><code class="python">circle = Circle(point(0,0),5)
 </code></pre>
 
-<p><img alt="circle" src="circle.svg" /></p>
+<p><img alt="circle" src="../reference/circle.svg" /></p>
 <h2 id="triangle">Triangle</h2>
 <p><a href="#list-of-shapes">home</a> Defines a triangle providing three corner</p>
 <h3 id="yaml_3">Yaml</h3>
@@ -1110,7 +1122,7 @@ W = 4.0
 triangle = Triangle(p1=(W/2,0), p2=(3*W/2,W/2), p3=(4*W/5.,L))
 </code></pre>
 
-<p><img alt="triangle" src="triangle.svg" /></p>
+<p><img alt="triangle" src="../reference/triangle.svg" /></p>
 <h2 id="distance-with-text">Distance with text</h2>
 <p><a href="#list-of-shapes">home</a> Defines a sizing mark with a label </p>
 <h3 id="yaml_4">Yaml</h3>
@@ -1125,7 +1137,7 @@ t = r'$ 2\pi R^2 $'  # sample text
 dwt = Distance_wText((-4,0), (8, 5), t, fontsize)
 </code></pre>
 
-<p><img alt="Distance with text" src="distancewithtext.svg" /></p>
+<p><img alt="Distance with text" src="../reference/distancewithtext.svg" /></p>
 <h2 id="text">Text</h2>
 <p><a href="#list-of-shapes">home</a> Defines a given text positionned at the provided point</p>
 <h3 id="yaml_5">Yaml</h3>
@@ -1136,7 +1148,7 @@ dwt = Distance_wText((-4,0), (8, 5), t, fontsize)
 <pre><code class="python">text = Text(r'$c$', point(0,0))
 </code></pre>
 
-<p><img alt="Text" src="text.svg" /></p>
+<p><img alt="Text" src="../reference/text.svg" /></p>
 <h2 id="cross">Cross</h2>
 <p><a href="#list-of-shapes">home</a> Defines a cross positionned at the provided point</p>
 <h3 id="yaml_6">Yaml</h3>
@@ -1147,7 +1159,7 @@ dwt = Distance_wText((-4,0), (8, 5), t, fontsize)
 <pre><code class="python">cross = Cross(point(1,0))
 </code></pre>
 
-<p><img alt="Cross" src="cross.svg" /></p>
+<p><img alt="Cross" src="../reference/cross.svg" /></p>
 <h2 id="axis">Axis</h2>
 <p><a href="#list-of-shapes">home</a> Defines an axis at the given point with a given label</p>
 <h3 id="yaml_7">Yaml</h3>
@@ -1158,7 +1170,7 @@ dwt = Distance_wText((-4,0), (8, 5), t, fontsize)
 <pre><code class="python">axis = Axis((0,0), 5, 'x', rotation_angle=0)
 </code></pre>
 
-<p><img alt="Axis" src="axis.svg" /></p>
+<p><img alt="Axis" src="../reference/axis.svg" /></p>
 <h2 id="arc">Arc</h2>
 <p><a href="#list-of-shapes">home</a> Defines an Arc providing a center point, a radius, a starting angle and an angle (rotates clock-wise)</p>
 <h3 id="yaml_8">Yaml</h3>
@@ -1179,7 +1191,7 @@ arc_angle = angle
 arc = Arc(center, radius, start_angle, arc_angle)
 </code></pre>
 
-<p><img alt="Arc" src="arc.svg" /></p>
+<p><img alt="Arc" src="../reference/arc.svg" /></p>
 <h2 id="arc_wtext">Arc_wText</h2>
 <p><a href="#list-of-shapes">home</a> Defines an arc with text positionned left (moving clock-wise) of arc half-way</p>
 <h3 id="yaml_9">Yaml</h3>
@@ -1200,7 +1212,7 @@ arc_angle = angle
 arc_wtxt = Arc_wText(r'$\theta$', center, radius, start_angle, arc_angle)
 </code></pre>
 
-<p><img alt="Arc with Text" src="arcwtext.svg" /></p>
+<p><img alt="Arc with Text" src="../reference/arcwtext.svg" /></p>
 <h2 id="arrow1">Arrow1</h2>
 <p><a href="#list-of-shapes">home</a> defines a line with arrow(s) given starting and ending point and arrow termination(s) -&gt;, \&lt;-&gt;, \&lt;-</p>
 <h3 id="yaml_10">Yaml</h3>
@@ -1215,7 +1227,7 @@ end = point(5,5)
 arrow1 = Arrow1(start, end, style='&lt;-&gt;')
 </code></pre>
 
-<p><img alt="Arrow1" src="arrow1.svg" /></p>
+<p><img alt="Arrow1" src="../reference/arrow1.svg" /></p>
 <h2 id="force">Force</h2>
 <p><a href="#list-of-shapes">home</a> defines an Indication of a force by an arrow and a text (symbol)</p>
 <h3 id="yaml_11">Yaml</h3>
@@ -1234,7 +1246,7 @@ vector = point(-3,-5)
 force = Force(contact - vector, contact, r'$Force$', text_pos='start')
 </code></pre>
 
-<p><img alt="Force" src="force.svg" /></p>
+<p><img alt="Force" src="../reference/force.svg" /></p>
 <h2 id="wall">Wall</h2>
 <p><a href="#list-of-shapes">home</a> defines an hached box given starting, ending point and thickness, filled with a pattern</p>
 <h3 id="yaml_12">Yaml</h3>
@@ -1257,7 +1269,7 @@ wall= Wall(x=[A[0], B[0]], y=[A[1], B[1]], thickness=-0.5,transparent=False)
 wall.set_linecolor('black')
 </code></pre>
 
-<p><img alt="Wall" src="wall.svg" /></p>
+<p><img alt="Wall" src="../reference/wall.svg" /></p>
 <h2 id="code-to-display-the-above-defined-shapes">Code to display the above defined shapes</h2>
 <p><a href="#list-of-shapes">home</a> In order to display the various shapes, use the following code in a jupyter notebook</p>
 <pre><code class="python">[1]: %matplotlib widget
@@ -1312,7 +1324,7 @@ drawing_tool.display()
     <div class="md-footer-nav">
       <nav class="md-footer-nav__inner md-grid" aria-label="Footer">
         
-          <a href="../sketcher/" title="Definition" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
+          <a href="../sketcher/" title="Learning by Example" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
             <div class="md-footer-nav__button md-icon">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
             </div>
@@ -1321,7 +1333,7 @@ drawing_tool.display()
                 <span class="md-footer-nav__direction">
                   Previous
                 </span>
-                Definition
+                Learning by Example
               </div>
             </div>
           </a>

jupysketch-doc/site/sitemap.xml

@@ -15,5 +15,9 @@
      <loc>None</loc>
      <lastmod>2020-08-04</lastmod>
      <changefreq>daily</changefreq>
+    </url><url>
+     <loc>None</loc>
+     <lastmod>2020-08-04</lastmod>
+     <changefreq>daily</changefreq>
     </url>
 </urlset>

jupysketch-doc/site/sketcher/index.html

@@ -15,7 +15,7 @@
     
     
       
-        <title>Definition - Jypyter Sketcher</title>
+        <title>Learning by Example - Jypyter Sketcher</title>
       
     
     
@@ -77,7 +77,7 @@
           </span>
           <span class="md-header-nav__topic md-ellipsis">
             
-              Definition
+              Learning by Example
             
           </span>
         </div>
@@ -173,6 +173,18 @@
       
       
 
+
+  <li class="md-nav__item">
+    <a href="../presentation/" title="Presentation" class="md-nav__link">
+      Presentation
+    </a>
+  </li>
+
+    
+      
+      
+      
+
   
 
 
@@ -182,14 +194,14 @@
     
     
       <label class="md-nav__link md-nav__link--active" for="__toc">
-        Definition
+        Learning by Example
         <span class="md-nav__icon md-icon">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2m0 4h14v-2H3v2m0 4h14v-2H3v2m16 0h2v-2h-2v2m0-10v2h2V7h-2m0 6h2v-2h-2v2z"/></svg>
         </span>
       </label>
     
-    <a href="./" title="Definition" class="md-nav__link md-nav__link--active">
-      Definition
+    <a href="./" title="Learning by Example" class="md-nav__link md-nav__link--active">
+      Learning by Example
     </a>
     
       
@@ -307,8 +319,8 @@
 
 
   <li class="md-nav__item">
-    <a href="../reference/" title="Reference" class="md-nav__link">
-      Reference
+    <a href="../shapereference/" title="Shapes Reference" class="md-nav__link">
+      Shapes Reference
     </a>
   </li>
 
@@ -441,10 +453,10 @@
                   
                 
                 
-                  <h1>Definition</h1>
+                  <h1>Learning by Example</h1>
                 
                 <h2 id="a-language-to-describe-a-sketch">A language to describe a sketch</h2>
-<p>Pysketcher initial version <a href="">HPL Pysketcher</a> enable sketch definition in python. HPL is showing the hierachical nature of sketches. This is implemented via the Composition function. One can further grasp this using the graphviz_dot function applied to discover the composition herarchy implemented as a graphviz image <a href="#the-hierarchy-of-the-friction-main-object">see The hierarchy of the "friction" main object</a> at the end of this page.</p>
+<p>Pysketcher initial version <a href="">HPL Pysketcher</a> enable sketch definition in python. HPL is showing the hierachical nature of sketches. This is implemented via the Composition function. One can further grasp this using the graphviz_dot function applied to discover the composition herarchy implemented as a graphviz image <a href="#friction-sketch-hierarchy">see The hierarchy of the "friction" sketch</a> at the end of this page.</p>
 <p>Due to the hierarchical nature of sketches, it is quite straightforward to think about using yaml as the syntax for defining a sketch.</p>
 <p>Benefits are the following:</p>
 <ul>
@@ -453,14 +465,14 @@
 <li>A more robust sketch definition <ul>
 <li>The same set of rules is applied to generate a sketch</li>
 <li>No further python idiom is be intermingled as opposed to the case of python defined sketches</li>
-<li>Of course, data defined versus program defined there is no winner, it's just a matter of context</li>
+<li>Don't make me wrong! Data defined versus program defined there is no winner, it's just a matter of context</li>
 </ul>
 </li>
 </ul>
 <h2 id="example">Example</h2>
 <p>This example provides the yaml content to define the Dry Friction case</p>
 <h3 id="the-final-sketch">The final sketch</h3>
-<p><img alt="" src="../images/dryfriction.png" /></p>
+<p><img alt="dryfriction sketch" src="../images/dryfriction.png" /></p>
 <p>An inclined plan (the A-B edge) supports a blue rectangle which is dragged down by gravity. The plan makes an angle <span><span class="MathJax_Preview">\theta</span><script type="math/tex">\theta</script></span> with the ground level. Sketch implementation notebook includes a controller enabling the <span><span class="MathJax_Preview">\theta</span><script type="math/tex">\theta</script></span> angle to change. The whole plan, including the body, can rotate arround point B.</p>
 <h3 id="support-files">Support files</h3>
 <p>The example we are developing now is based upon the "Dry Friction mockup" notebook</p>
@@ -637,7 +649,7 @@ sketchParse(friction,myfig)
     <div class="md-footer-nav">
       <nav class="md-footer-nav__inner md-grid" aria-label="Footer">
         
-          <a href="../about/" title="About" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
+          <a href="../presentation/" title="Presentation" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
             <div class="md-footer-nav__button md-icon">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
             </div>
@@ -646,19 +658,19 @@ sketchParse(friction,myfig)
                 <span class="md-footer-nav__direction">
                   Previous
                 </span>
-                About
+                Presentation
               </div>
             </div>
           </a>
         
         
-          <a href="../reference/" title="Reference" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
+          <a href="../shapereference/" title="Shapes Reference" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
             <div class="md-footer-nav__title">
               <div class="md-ellipsis">
                 <span class="md-footer-nav__direction">
                   Next
                 </span>
-                Reference
+                Shapes Reference
               </div>
             </div>
             <div class="md-footer-nav__button md-icon">