{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Drawing Control Block Diagrams\n",
"\n",
"This notebook illustrates how to draw control block diagrams programmatically using a LaTeX template. So far, you've used $\\LaTeX$ to write equations and symbols, but LaTeX can also be a very powerful tool for creating graphical elements. The diagram(s) on this page were generated using LaTeX with some help from the [TikZ](https://en.wikipedia.org/wiki/PGF/TikZ) package.\n",
"\n",
"By the end of this notebook, you should be able to:\n",
"\n",
"- Draw simple control block diagrams using LaTeX and TikZ"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"A control block diagram provides a graphical description of the flow of signals in a control system. Here's a simple control block diagram with a feedback loop and disturbance."
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [
{
"data": {
"image/svg+xml": [
""
],
"text/plain": [
""
]
},
"execution_count": 2,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from IPython.core.display import SVG\n",
"SVG(filename='../../assets/diagram.svg')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Sidenote: What is SVG?"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Unlike typical raster image formats such as JPGs and PNGs, SVG (Scalable Vector Graphics) uses a vector representation of the image data, allowing you to scale the image without losing resolution and sharpness. SVG files are human-readable and can be generated using code."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 1. Overleaf Method\n",
"\n",
"This [Texample tutorial](http://www.texample.net/tikz/examples/control-system-principles/) shows how to generate a block diagram using TikZ. We've adapted the code to generate the SVG diagram that you see on this page and used an online tool to convert TeX code to SVG.\n",
"\n",
"Our TikZ code is available in this [Overleaf](https://www.overleaf.com/read/jfdcfxhgjmtz) project. Overleaf is a free online LaTeX editor.\n",
"\n",
"## Instructions\n",
"To begin, click the 'clone this project' button at the top of the [Overleaf page](https://www.overleaf.com/read/jfdcfxhgjmtz). \n",
"\n",
"The code is self-documented and a live-preview is provided on the side of the screen. You only need to modify the `{tikzpicture}` section to change the diagram. Here are some additional tips to get you started:\n",
"\n",
"- There are 4 types of graphical elements: input, block, sum and output\n",
"- The `\\node` syntax is `\\node [type, location] (name) {label}`: \n",
" - For example, this is a block node, named 'controller', placed to the right of a node named 'sum', with a $G_c(s)$ label: `\\node [block, right of=sum] (controller) {$G_c(s)$};`\n",
"- The `\\draw` syntax is `\\draw [->] (start_point) -- node {label} (end_point);`\n",
" - For example, this would draw an arrow from the 'system' node to the 'sum_disturbance' node and give it a $Y_u$ label above the arrow: `\\draw [->] (system) -- node {$Y_u$} (sum_disturbance);`\n",
" \n",
"The best way to get familiar with the syntax is to play around with the code and see what happens to your diagram.\n",
"\n",
"## Exporting your diagram as SVG\n",
"Once you're done in Overleaf, click the 'PDF' button at the top of the page to save your diagram as a PDF file. To export your diagram as an SVG file, use this free [LaTex Previewer](http://www.tlhiv.org/ltxpreview/) tool and paste your code from Overleaf. Use the Download button at the bottom right of your screen and select SVG.\n",
"\n",
"Now, you can upload your SVG diagram to your work folder and use this IPython method to embed it in a Jupyter notebook (after replacing diagram.svg with your filename of course):\n",
"\n",
"```\n",
"from IPython.core.display import SVG\n",
"SVG(filename='diagram.svg')\n",
"```\n",
"\n",
"Just like this:"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [
{
"data": {
"image/svg+xml": [
""
],
"text/plain": [
""
]
},
"execution_count": 4,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from IPython.core.display import SVG\n",
"SVG(filename='../../assets/diagram.svg')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 2. egal method\n",
"Link: https://github.com/uclmr/egal\n",
"\n",
"Alternatively, you can also use the egal package to do quick and dirty SVG drawings in the Jupyter notebook itself. The results might not be as clean and neat as TikZ but this is an easier way to create diagrams if you just need to illustrate something simple. \n",
"\n",
"### Instructions\n",
"To use the egal package, run the commands in the next cell (shift+enter). Go to the 'Control Panel' button on top right corner of your screen and restart your server. You should see an 'Insert Egal Cell' in the toolbar after you restart your server. Click on that to create an egal drawing cell."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"scrolled": true
},
"outputs": [],
"source": [
"!pip install git+https://github.com/uclmr/egal.git --user\n",
"!jupyter nbextension install --py egal --user\n",
"!jupyter nbextension enable egal --user --py"
]
}
],
"metadata": {
"celltoolbar": "Raw Cell Format",
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.1"
}
},
"nbformat": 4,
"nbformat_minor": 2
}