update of README & user guide

Author: istefanis

README.md

@@ -6,13 +6,16 @@
 
 Controllio is a web app which lets Control Systems engineers design & experiment with LTI (linear time-invariant) dynamical systems.
 
-So far, functionality has been implemented for:
+It provides functionality for both continuous-time (s-domain) & discrete-time (z-domain) systems.
 
-- the analytical computation of the overall transfer function (tf) of a system modeled by interconnected elements in the s-domain
+So far, the following features have been implemented:
+
+- the analytical computation of the overall transfer function (tf) of a system modeled by interconnected elements in the s- and z-domains
 - the generation of its Bode and Nyquist plots
 - the numerical computation of its time response plot
 - the numerical computation of its zeros/poles & some characteristic numbers, ex. bandwidth
 - the numerical computation of its stability
+- the transformation of a tf between continuous and discrete-time domains via approximate methods
 
 > _This is a web GUI tool. For a command-line one, check the [lti-freq-domain-toolbox](https://github.com/istefanis/lti-freq-domain-toolbox)_
 
@@ -36,6 +39,10 @@ The motivation behind Controllio is to create an open-source tool for studying C
 - Polynomial complex roots: Weierstrass / Durand-Kerner algorithm
 - Laplace inversion: Talbot algorithm
 
+### Continuous ⇄ discrete-time transform
+
+- Approximate methods: Tustin/Bilinear, Backward difference
+
 ### Topology optimization
 
 - A stochastic algorithm to simplify the circuit's topology
@@ -44,9 +51,12 @@ The motivation behind Controllio is to create an open-source tool for studying C
 
 ### Ready-made components
 
-- Utilities: integrator / step, exponential decay, sine, phase delay
-- Filters: Butterworth
-- Controllers: PI, PD, PID
+- Continuous-time:
+  - Utilities: integrator / step, exponential decay, sine, phase delay
+  - Filters: Butterworth
+  - Controllers: PI, PD, PID
+- Discrete-time:
+  - Utilities: delay, step
 
 ## User Guide
 
@@ -92,7 +102,7 @@ A User Guide is included in the web app, and can be launched from the main menu
 
 4. Run `npm test` to execute the tests via [Jest](https://jestjs.io/)
 
-> _Current test coverage according to Jest: 63% (statements)_
+> _Current test coverage according to Jest: 65% (statements)_
 
 ## Code Structure
 

assets/img/app.png

@@ -228,7 +228,7 @@ const init = function () {
     ],
   ]);
   readyMadeTfsSubsections.push([
-    "Discrete-time components",
+    "Discrete-time simple components",
     [
       ["Delay", [1], [1, 0], "discrete"],
       ["Step", [1, 0], [1, -1], "discrete"],

view/services/feature/readyMadeTfCreationService.js

@@ -36,13 +36,15 @@ const init = function () {
     <section class="tab-content" id="popup-window-tab-content-1">
       <h3>General</h3>
       <p>Controllio is an open-source web app which lets Control Systems engineers design & experiment with LTI (linear time-invariant) dynamical systems.</p>
-      <p>So far, functionality has been implemented for:</p>
+      <p>It provides functionality for both continuous-time (s-domain) & discrete-time (z-domain) systems.</p>
+      <p>So far, the following features have been implemented:</p>
       <ul>
-        <li>the analytical computation of the overall transfer function (tf) of a system modeled by interconnected elements in the s-domain</li>
+        <li>the analytical computation of the overall transfer function (tf) of a system modeled by interconnected elements in the s- and z-domains</li>
         <li>the generation of its Bode and Nyquist plots</li>
         <li>the numerical computation of its time response plot</li>
         <li>the numerical computation of its zeros/poles & some characteristic numbers, ex. bandwidth</li>
         <li>the numerical computation of its stability</li>
+        <li>the transformation of a tf between continuous and discrete-time domains via approximate methods</li>
       </ul>
       <h3>Motivation</h3>
       <p>The motivation behind Controllio is to create an open-source tool for studying Control Systems, which:</p>
@@ -55,15 +57,29 @@ const init = function () {
     </section>
     <section class="tab-content" id="popup-window-tab-content-2">
       <h3>Modelling a dynamical system</h3>
-      <p>A linear time-invariant (LTI) dynamical system in the s-domain is represented as a circuit of interconnected elements: transfer functions (tfs) & adders.</p>
+      <p>A linear time-invariant (LTI) dynamical system in the s- or z-domain is represented as a circuit of interconnected elements: transfer functions (tfs) & adders.</p>
       <h3>Elements</h3>
       <h4>Transfer functions (tfs)</h4>
-      <div class="element tf popup-window-tf user-guide-element">
-        <p>10*s<sup>2</sup> + 2*s + 5</p>
-        <p>―――――――――――――――</p>
-        <p>8*s<sup>2</sup> - s + 1</p>
+      <div class="flex-row-left gap-2">
+        <div class="flex-column-center">
+          <div class="element tf popup-window-tf user-guide-element">
+            <p>10*s<sup>2</sup> + 2*s + 5</p>
+            <p>―――――――――――――――</p>
+            <p>8*s<sup>2</sup> - s + 1</p>
+          </div>
+          <p class="figure-description">s-domain</p>
+        </div>
+        <div class="flex-column-center">
+          <div class="element tf discrete popup-window-tf user-guide-element">
+            <p>z<sup>2</sup> - 2*z + 1</p>
+            <p>―――――――――――――――</p>
+            <p>z<sup>2</sup> -1.5*z + 0.8</p>
+          </div>
+          <p class="figure-description">z-domain</p>
+        </div>
       </div>
       <p>To define a transfer function, the lists of the coefficients of its numerator and denominator polynomials must be specified.<p>
+      <p>For a z-domain tf, the sampling period T is also required.<p>
       <p><u>Implementation assumption</u>: Each tf has only one input (another tf, or adder) and multiple outputs. Multiple inputs can be achieved by adding in front of it an adder.</p>
       <h4>Adders</h4>
       <div class="element adder popup-window-adder user-guide-element"
@@ -79,25 +95,32 @@ const init = function () {
     </section>
     <section class="tab-content" id="popup-window-tab-content-3">
       <h3>Ready-made tfs</h3>
-      <h4>Simple components</h4>
+      <h4>Continuous-time</h4>
+      <h5>Simple components</h5>
       <ul>
         <li>Integrator / step</li>
         <li>Exponential decay</li>
         <li>Sine</li>
         <li>Phase delay</li>
       </ul>
-      <h4>Filters</h4>
+      <h5>Filters</h5>
       <ul>
         <li>Butterworth filter</li>
       </ul>
-      <h4>Controllers</h4>
+      <h5>Controllers</h5>
       <ul>
         <li>PI controller 
         <li>PD controller 
         <li>PID controller 
+        <p>These are defined by specifying the proportional (Kp), integral (Ki) and/or derivative (Kd) gains respectively. Simple analytical tf computations can also be performed without fixing these parameters.</p>
       </ul>
-      <p>These are defined by specifying the proportional (Kp), integral (Ki) and/or derivative (Kd) gains respectively. Simple analytical transfer function computations can also be performed without fixing these parameters.</p>
-    </section> 
+      <h4>Discrete-time</h4>
+      <h5>Simple components</h5>
+      <ul>
+        <li>Delay</li>
+        <li>Step</li>
+      </ul>
+      </section> 
     <section class="tab-content" id="popup-window-tab-content-4">
       <h3>Simplification of a block</h3>
       <p>To compute analytically the overall transfer function (tf) of a block of interconnected elements, a simplification of its structure must be performed. The goal is to simplify the block either completely (by replacing it with an equivalent total tf) or as much as possible.</p>

view/services/feature/userGuideService.js

@@ -185,6 +185,10 @@ h3 {
   align-items: center;
 }
 
+.gap-2 {
+  gap: 2rem;
+}
+
 /* Loading spinner */
 
 .loading-spinner {

view/style/main.css

@@ -116,6 +116,16 @@
   font-size: 14px;
 }
 
+.popup-window-tab-contents h5 {
+  font-size: 11px;
+  margin: 0;
+  padding-left: 1rem;
+}
+
+.popup-window-tab-contents .figure-description {
+  font-style: italic;
+}
+
 /* Custom popup windows: tfs */
 
 .popup-window-tf-content {