rparedis
/
pyCBD


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646
							

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
  <meta charset="utf-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Live Plotting of Data During the Simulation &mdash; CBD Simulation Development Kit  documentation</title>
  

  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <!-- <link rel="stylesheet" href="../_static/pygments.css" type="text/css" /> -->
  <link rel="stylesheet" href="../_static/style.css" type="text/css" />
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="CBD package" href="../CBD.html" />
    <link rel="prev" title="Realtime Simulation" href="RealTime.html" /> 

  
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-167094275-1"></script>
  <script src="../_static/js/googleanalytics.min.js"></script>
  
  <script src="../_static/js/modernizr.min.js"></script>

  <!-- Preload the theme fonts -->

<link rel="preload" href="../_static/fonts/FreightSans/freight-sans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="../_static/fonts/FreightSans/freight-sans-medium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="../_static/fonts/IBMPlexMono/IBMPlexMono-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="../_static/fonts/FreightSans/freight-sans-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="../_static/fonts/FreightSans/freight-sans-medium-italic.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="../_static/fonts/IBMPlexMono/IBMPlexMono-SemiBold.woff2" as="font" type="font/woff2" crossorigin="anonymous">

<!-- Preload the katex fonts -->

<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Math-Italic.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Main-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Main-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Size1-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Size4-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Size2-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Size3-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Caligraphic-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
</head>

<div class="container-fluid header-holder tutorials-header" id="header-holder">
  <div class="container">
    <div class="header-container">
      <a class="header-logo" href="https://catalyst-team.com/" aria-label="Catalyst"></a>

      <div class="main-menu">
        <ul>

          <li>
            <div class="ecosystem-dropdown">
              <a id="dropdownMenuButtonEcosystem" data-toggle="ecosystem-dropdown">
                Ecosystem
              </a>
              <div class="ecosystem-dropdown-menu">
                <a class="nav-dropdown-item" href="https://alchemy.host">
                  <span class=dropdown-title>Alchemy</span>
                  <p>Experiments logging & visualization</p>
                </a>
                <a class="nav-dropdown-item" href="https://github.com/catalyst-team/catalyst">
                  <span class=dropdown-title>Catalyst</span>
                  <p>Accelerated deep learning R&D</p>
                </a>
                <a class="nav-dropdown-item" href="https://github.com/catalyst-team/reaction">
                  <span class=dropdown-title>Reaction</span>
                  <p>Convenient deep learning models serving</p>
                </a>
              </div>
            </div>
          </li>

          <li>
            <div class="projects-dropdown">
              <a id="dropdownMenuButtonProjects" data-toggle="projects-dropdown">
                Projects
              </a>
              <div class="projects-dropdown-menu">
                <a class="nav-dropdown-item" href="https://github.com/catalyst-team/codestyle">
                  <span class=dropdown-title>Codestyle</span>
                  <p>Joint R&D codestyle</p>
                </a>
                <a class="nav-dropdown-item" href="https://github.com/catalyst-team/neuro">
                  <span class=dropdown-title>Catalyst.Neuro</span>
                  <p>Catalyst.Team and TReNDS collaborative project</p>
                </a>
                <a class="nav-dropdown-item" href="https://github.com/catalyst-team/classification">
                  <span class=dropdown-title>Classification</span>
                  <p>Image classification pipeline with transfer learning</p>
                </a>
                <a class="nav-dropdown-item" href="https://github.com/catalyst-team/detection">
                  <span class=dropdown-title>Detection</span>
                  <p>Object detection pipeline</p>
                </a>
                <a class="nav-dropdown-item" href="https://github.com/catalyst-team/segmentation">
                  <span class=dropdown-title>Segmentation</span>
                  <p>Image semantic segmentation pipeline</p>
                </a>
                <a class="nav-dropdown-item" href="https://github.com/catalyst-team/gan">
                  <span class=dropdown-title>Catalyst.GAN</span>
                  <p>GAN pipelines</p>
                </a>
              </div>
            </div>
          </li>

          <li>
            <a href="https://github.com/catalyst-team/dl-course">Deep learning course</a>
          </li>
        </ul>
      </div>

      <a class="main-menu-open-button" href="#" data-behavior="open-mobile-menu"></a>
    </div>

  </div>
</div>


<body class="catalyst-body">

   
    <div class="table-of-contents-link-wrapper">
      <span>Table of Contents</span>
      <a href="#" class="toggle-table-of-contents" data-behavior="toggle-table-of-contents"></a>
    </div>

    <nav data-toggle="wy-nav-shift" class="catalyst-left-menu" id="catalyst-left-menu">
      <div class="catalyst-side-scroll">
        <div class="catalyst-menu catalyst-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          <div class="catalyst-left-menu-search">
            

<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search Docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

            
          </div>

          
              <p class="caption"><span class="caption-text">Setup</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../install.html">How to install the CBD framework?</a></li>
<li class="toctree-l1"><a class="reference internal" href="../running.html">How to run a CBD simulation?</a></li>
<li class="toctree-l1"><a class="reference internal" href="../changelog.html">Changelog</a></li>
</ul>
<p class="caption"><span class="caption-text">Simple Examples</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="SinGen.html">Sine Generator</a></li>
<li class="toctree-l1"><a class="reference internal" href="EvenNumberGen.html">Hierarchical Even Number Generator</a></li>
<li class="toctree-l1"><a class="reference internal" href="Fibonacci.html">Fibonacci Sequence Generator</a></li>
<li class="toctree-l1"><a class="reference internal" href="LCG.html">Linear Congruential Generator</a></li>
</ul>
<p class="caption"><span class="caption-text">Advanced Examples</span></p>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="RealTime.html">Realtime Simulation</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">Live Plotting of Data During the Simulation</a></li>
</ul>
<p class="caption"><span class="caption-text">Internal Documentation</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../CBD.html">CBD package</a></li>
</ul>

            
        </div>
      </div>
    </nav>

    <div class="catalyst-container">
      <div class="catalyst-page-level-bar" id="catalyst-page-level-bar">
        <div class="catalyst-breadcrumbs-wrapper">
          

<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="catalyst-breadcrumbs">
    
      <li>
        <a href="../index.html">
          
            Docs
          
        </a> &gt;
      </li>

        
      <li>Live Plotting of Data During the Simulation</li>
    
    
      <li class="catalyst-breadcrumbs-aside">
        
            
      </li>
    
  </ul>

  
</div>
        </div>

        <div class="catalyst-shortcuts-wrapper" id="catalyst-shortcuts-wrapper">
          Shortcuts
        </div>
      </div>

      <section data-toggle="wy-nav-shift" id="catalyst-content-wrap" class="catalyst-content-wrap">
        <div class="catalyst-content-left">
          
          <div class="rst-content">
          
            <div role="main" class="main-content" itemscope="itemscope" itemtype="http://schema.org/Article">
             <article itemprop="articleBody" id="catalyst-article" class="catalyst-article">
              
  <div class="section" id="live-plotting-of-data-during-the-simulation">
<h1>Live Plotting of Data During the Simulation<a class="headerlink" href="#live-plotting-of-data-during-the-simulation" title="Permalink to this headline">¶</a></h1>
<p>During a (realtime) simulation, often you would like to show some data that’s being sent over a
certain connection. This can be intermediary data (i.e. the individual components of a computation),
system data (battery life, sensor information…) or output information (results, actuator inputs…).</p>
<p>Luckily, the CBD framework provides this functionality in a clean and efficient manner.</p>
<div class="admonition attention">
<p class="first admonition-title">Attention</p>
<p class="last">In the future, <cite>Seaborn</cite>, <cite>Jupyter</cite> and <cite>ggplot</cite> will also be added and described. For now, only
<cite>MatPlotLib</cite> and <cite>Bokeh</cite> are possible.</p>
</div>
<p>To allow for “live” plotting of data, make use of the <a class="reference internal" href="../CBD.realtime.plotting.html#CBD.realtime.plotting.PlotManager" title="CBD.realtime.plotting.PlotManager"><code class="xref py py-class docutils literal notranslate"><span class="pre">CBD.realtime.plotting.PlotManager</span></code></a> class,
which is a wrapper for tracking multiple realtime plots. Internally, it will keep track of multiple
<a class="reference internal" href="../CBD.realtime.plotting.html#CBD.realtime.plotting.PlotHandler" title="CBD.realtime.plotting.PlotHandler"><code class="xref py py-class docutils literal notranslate"><span class="pre">CBD.realtime.plotting.PlotHandler</span></code></a> instances to reduce code-overhead.</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">CBD.realtime.plotting</span> <span class="kn">import</span> <span class="n">PlotManager</span><span class="p">,</span> <span class="n">ScatterPlot</span>

<span class="n">manager</span> <span class="o">=</span> <span class="n">PlotManager</span><span class="p">()</span>

<span class="c1"># Register a scatter plot handler with name &quot;myHandler&quot;, which listens to</span>
<span class="c1">#   the data of the block &quot;myBlock&quot;.</span>
<span class="n">manager</span><span class="o">.</span><span class="n">register</span><span class="p">(</span><span class="s2">&quot;myHandler&quot;</span><span class="p">,</span> <span class="n">MyBlock</span><span class="p">(</span><span class="s1">&#39;myBlock&#39;</span><span class="p">),</span> <span class="n">figure</span><span class="p">,</span> <span class="n">ScatterPlot</span><span class="p">())</span>
</pre></div>
</div>
<p>Notice you also need a block that stores the data. For plotting a single signal, it’s best to use the
<a class="reference internal" href="../CBD.lib.interface.endpoints.html#CBD.lib.interface.endpoints.SignalCollectorBlock" title="CBD.lib.interface.endpoints.SignalCollectorBlock"><code class="xref py py-class docutils literal notranslate"><span class="pre">CBD.lib.interface.endpoints.SignalCollectorBlock</span></code></a>. Alternatively, to plot XY-pairs, the
<a class="reference internal" href="../CBD.lib.interface.endpoints.html#CBD.lib.interface.endpoints.PositionCollectorBlock" title="CBD.lib.interface.endpoints.PositionCollectorBlock"><code class="xref py py-class docutils literal notranslate"><span class="pre">CBD.lib.interface.endpoints.PositionCollectorBlock</span></code></a> can be used.</p>
<div class="section" id="example-model">
<h2>Example Model<a class="headerlink" href="#example-model" title="Permalink to this headline">¶</a></h2>
<p>The examples below show how you can display a live plot for the <a class="reference internal" href="SinGen.html"><span class="doc">Sine Generator</span></a>, plotted in realtime.
The output of this block is removed and changed to a <code class="code docutils literal notranslate"><span class="pre">SignalCollectorBlock</span></code>:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">CBD.CBD</span> <span class="kn">import</span> <span class="n">CBD</span>
<span class="kn">from</span> <span class="nn">CBD.lib.std</span> <span class="kn">import</span> <span class="n">TimeBlock</span><span class="p">,</span> <span class="n">GenericBlock</span>
<span class="kn">from</span> <span class="nn">CBD.lib.interface.endpoints</span> <span class="kn">import</span> <span class="n">SignalCollectorBlock</span>

<span class="k">class</span> <span class="nc">SinGen</span><span class="p">(</span><span class="n">CBD</span><span class="p">):</span>
    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">name</span><span class="o">=</span><span class="s2">&quot;SinGen&quot;</span><span class="p">):</span>
        <span class="n">CBD</span><span class="o">.</span><span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">name</span><span class="p">,</span> <span class="n">input_ports</span><span class="o">=</span><span class="p">[],</span> <span class="n">output_ports</span><span class="o">=</span><span class="p">[])</span>

        <span class="c1"># Create the blocks</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">addBlock</span><span class="p">(</span><span class="n">TimeBlock</span><span class="p">(</span><span class="s2">&quot;time&quot;</span><span class="p">))</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">addBlock</span><span class="p">(</span><span class="n">GenericBlock</span><span class="p">(</span><span class="s2">&quot;sin&quot;</span><span class="p">,</span> <span class="n">block_operator</span><span class="o">=</span><span class="s2">&quot;sin&quot;</span><span class="p">))</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">addBlock</span><span class="p">(</span><span class="n">SignalCollectorBlock</span><span class="p">(</span><span class="s2">&quot;collector&quot;</span><span class="p">))</span>

        <span class="c1"># Connect the blocks</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">addConnection</span><span class="p">(</span><span class="s2">&quot;time&quot;</span><span class="p">,</span> <span class="s2">&quot;sin&quot;</span><span class="p">)</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">addConnection</span><span class="p">(</span><span class="s2">&quot;sin&quot;</span><span class="p">,</span> <span class="s2">&quot;collector&quot;</span><span class="p">)</span>

<span class="n">sinGen</span> <span class="o">=</span> <span class="n">SinGen</span><span class="p">(</span><span class="s2">&quot;SinGen&quot;</span><span class="p">)</span>
</pre></div>
</div>
</div>
<div class="section" id="using-matplotlib">
<h2>Using MatPlotLib<a class="headerlink" href="#using-matplotlib" title="Permalink to this headline">¶</a></h2>
<p>The most common plotting framework for Python is <a class="reference external" href="https://matplotlib.org/">MatPlotLib</a>. It provides
a lot of additional features and functionalities, but we will keep it simple. For more complexity, please
refer to their documentation.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">While there are other plotting frameworks, <cite>MatPlotLib</cite> is by far the easiest to get live plotting
to work.</p>
</div>
<div class="section" id="default">
<h3>Default<a class="headerlink" href="#default" title="Permalink to this headline">¶</a></h3>
<p>If we’re not concerned about a window manager in our system, we can easily make use of  <cite>MatPlotLib</cite>’s
builtin plotting window.</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">CBD.realtime.plotting</span> <span class="kn">import</span> <span class="n">PlotManager</span><span class="p">,</span> <span class="n">LinePlot</span><span class="p">,</span> <span class="n">follow</span>
<span class="kn">from</span> <span class="nn">CBD.simulator</span> <span class="kn">import</span> <span class="n">Simulator</span>
<span class="kn">import</span> <span class="nn">matplotlib.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>

<span class="n">fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span><span class="n">figsize</span><span class="o">=</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">),</span> <span class="n">dpi</span><span class="o">=</span><span class="mi">100</span><span class="p">)</span>
<span class="n">ax</span> <span class="o">=</span> <span class="n">fig</span><span class="o">.</span><span class="n">add_subplot</span><span class="p">(</span><span class="mi">111</span><span class="p">)</span>
<span class="n">ax</span><span class="o">.</span><span class="n">set_ylim</span><span class="p">((</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span>    <span class="c1"># The sine wave never exceeds this range</span>

<span class="n">manager</span> <span class="o">=</span> <span class="n">PlotManager</span><span class="p">()</span>
<span class="n">manager</span><span class="o">.</span><span class="n">register</span><span class="p">(</span><span class="s2">&quot;sin&quot;</span><span class="p">,</span> <span class="n">sinGen</span><span class="o">.</span><span class="n">findBlock</span><span class="p">(</span><span class="s1">&#39;collector&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span> <span class="p">(</span><span class="n">fig</span><span class="p">,</span> <span class="n">ax</span><span class="p">),</span> <span class="n">LinePlot</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s1">&#39;red&#39;</span><span class="p">))</span>
<span class="n">manager</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="s1">&#39;sin&#39;</span><span class="p">,</span> <span class="s1">&#39;update_event&#39;</span><span class="p">,</span> <span class="k">lambda</span> <span class="n">d</span><span class="p">,</span> <span class="n">axis</span><span class="o">=</span><span class="n">ax</span><span class="p">:</span> <span class="n">axis</span><span class="o">.</span><span class="n">set_xlim</span><span class="p">(</span><span class="n">follow</span><span class="p">(</span><span class="n">d</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="mf">10.0</span><span class="p">,</span> <span class="n">lower_bound</span><span class="o">=</span><span class="mf">0.0</span><span class="p">)))</span>

<span class="n">sim</span> <span class="o">=</span> <span class="n">Simulator</span><span class="p">(</span><span class="n">sinGen</span><span class="p">)</span>
<span class="n">sim</span><span class="o">.</span><span class="n">setRealTime</span><span class="p">()</span>
<span class="n">sim</span><span class="o">.</span><span class="n">setDeltaT</span><span class="p">(</span><span class="mf">0.1</span><span class="p">)</span>
<span class="n">sim</span><span class="o">.</span><span class="n">run</span><span class="p">(</span><span class="mf">20.0</span><span class="p">)</span>

<span class="n">plt</span><span class="o">.</span><span class="n">show</span><span class="p">()</span>
</pre></div>
</div>
<div class="figure">
<a class="reference internal image-reference" href="../_images/sine-wave-mpl.gif"><img alt="../_images/sine-wave-mpl.gif" src="../_images/sine-wave-mpl.gif" style="width: 400px;" /></a>
</div>
</div>
<div class="section" id="tkinter">
<h3>TkInter<a class="headerlink" href="#tkinter" title="Permalink to this headline">¶</a></h3>
<p>Now, as mentioned in <a class="reference internal" href="RealTime.html"><span class="doc">Realtime Simulation</span></a>, there is also a <code class="code docutils literal notranslate"><span class="pre">TkInter</span></code> platform to run the realtime
simulation on. This can be useful for creating graphical user interfaces (GUIs). Sometimes, such a
GUI might be in need of a plot of the data.</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">CBD.realtime.plotting</span> <span class="kn">import</span> <span class="n">PlotManager</span><span class="p">,</span> <span class="n">LinePlot</span><span class="p">,</span> <span class="n">follow</span>
<span class="kn">from</span> <span class="nn">CBD.simulator</span> <span class="kn">import</span> <span class="n">Simulator</span>

<span class="kn">import</span> <span class="nn">tkinter</span> <span class="k">as</span> <span class="nn">tk</span>
<span class="kn">import</span> <span class="nn">matplotlib.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>
<span class="kn">from</span> <span class="nn">matplotlib.backends.backend_tkagg</span> <span class="kn">import</span> <span class="n">FigureCanvasTkAgg</span>

<span class="n">fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span><span class="n">figsize</span><span class="o">=</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">),</span> <span class="n">dpi</span><span class="o">=</span><span class="mi">100</span><span class="p">)</span>
<span class="n">ax</span> <span class="o">=</span> <span class="n">fig</span><span class="o">.</span><span class="n">add_subplot</span><span class="p">(</span><span class="mi">111</span><span class="p">)</span>
<span class="n">ax</span><span class="o">.</span><span class="n">set_ylim</span><span class="p">((</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span>    <span class="c1"># The sine wave never exceeds this range</span>

<span class="n">root</span> <span class="o">=</span> <span class="n">tk</span><span class="o">.</span><span class="n">Tk</span><span class="p">()</span>

<span class="c1"># Create a canvas to draw the plot on</span>
<span class="n">canvas</span> <span class="o">=</span> <span class="n">FigureCanvasTkAgg</span><span class="p">(</span><span class="n">fig</span><span class="p">,</span> <span class="n">master</span><span class="o">=</span><span class="n">root</span><span class="p">)</span>  <span class="c1"># A Tk DrawingArea</span>
<span class="n">canvas</span><span class="o">.</span><span class="n">draw</span><span class="p">()</span>
<span class="n">canvas</span><span class="o">.</span><span class="n">get_tk_widget</span><span class="p">()</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="n">column</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="n">row</span><span class="o">=</span><span class="mi">1</span><span class="p">)</span>

<span class="n">manager</span> <span class="o">=</span> <span class="n">PlotManager</span><span class="p">()</span>
<span class="n">manager</span><span class="o">.</span><span class="n">register</span><span class="p">(</span><span class="s2">&quot;sin&quot;</span><span class="p">,</span> <span class="n">sinGen</span><span class="o">.</span><span class="n">findBlock</span><span class="p">(</span><span class="s1">&#39;collector&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span> <span class="p">(</span><span class="n">fig</span><span class="p">,</span> <span class="n">ax</span><span class="p">),</span> <span class="n">LinePlot</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s1">&#39;red&#39;</span><span class="p">))</span>
<span class="n">manager</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="s1">&#39;sin&#39;</span><span class="p">,</span> <span class="s1">&#39;update_event&#39;</span><span class="p">,</span> <span class="k">lambda</span> <span class="n">d</span><span class="p">,</span> <span class="n">axis</span><span class="o">=</span><span class="n">ax</span><span class="p">:</span> <span class="n">axis</span><span class="o">.</span><span class="n">set_xlim</span><span class="p">(</span><span class="n">follow</span><span class="p">(</span><span class="n">d</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="mf">10.0</span><span class="p">,</span> <span class="n">lower_bound</span><span class="o">=</span><span class="mf">0.0</span><span class="p">)))</span>

<span class="n">sim</span> <span class="o">=</span> <span class="n">Simulator</span><span class="p">(</span><span class="n">sinGen</span><span class="p">)</span>
<span class="n">sim</span><span class="o">.</span><span class="n">setRealTime</span><span class="p">()</span>
<span class="n">sim</span><span class="o">.</span><span class="n">setRealTimePlatformTk</span><span class="p">(</span><span class="n">root</span><span class="p">)</span>
<span class="n">sim</span><span class="o">.</span><span class="n">setDeltaT</span><span class="p">(</span><span class="mf">0.1</span><span class="p">)</span>
<span class="n">sim</span><span class="o">.</span><span class="n">run</span><span class="p">(</span><span class="mf">20.0</span><span class="p">)</span>

<span class="n">root</span><span class="o">.</span><span class="n">mainloop</span><span class="p">()</span>
</pre></div>
</div>
<p>The plot will look exactly like the one for the default platform, except that it is inside a <code class="code docutils literal notranslate"><span class="pre">TkInter</span></code> window
now.</p>
</div>
</div>
<div class="section" id="using-bokeh">
<h2>Using Bokeh<a class="headerlink" href="#using-bokeh" title="Permalink to this headline">¶</a></h2>
<p>As an alternative for <cite>MatPlotLib</cite>, <a class="reference external" href="https://docs.bokeh.org/en/latest/index.html">Bokeh</a> kan be used. However, as
you will see, this will require a little bit more “managing” code.</p>
<div class="admonition warning">
<p class="first admonition-title">Warning</p>
<p>In order to get this plotting framework to show live plots, you need to start a <cite>Bokeh</cite> server via the command:</p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>bokeh serve
</pre></div>
</div>
<div class="last line-block">
<div class="line"><br /></div>
</div>
</div>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">CBD.realtime.plotting</span> <span class="kn">import</span> <span class="n">PlotManager</span><span class="p">,</span> <span class="n">Backend</span><span class="p">,</span> <span class="n">LinePlot</span><span class="p">,</span> <span class="n">follow</span>
<span class="kn">from</span> <span class="nn">CBD.simulator</span> <span class="kn">import</span> <span class="n">Simulator</span>

<span class="kn">from</span> <span class="nn">bokeh.plotting</span> <span class="kn">import</span> <span class="n">figure</span><span class="p">,</span> <span class="n">curdoc</span>
<span class="kn">from</span> <span class="nn">bokeh.client</span> <span class="kn">import</span> <span class="n">push_session</span>

<span class="n">fig</span> <span class="o">=</span> <span class="n">figure</span><span class="p">(</span><span class="n">plot_width</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">plot_height</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">y_range</span><span class="o">=</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span>
<span class="n">curdoc</span><span class="p">()</span><span class="o">.</span><span class="n">add_root</span><span class="p">(</span><span class="n">fig</span><span class="p">)</span>

<span class="c1"># Use the Bokeh Backend</span>
<span class="n">manager</span> <span class="o">=</span> <span class="n">PlotManager</span><span class="p">(</span><span class="n">Backend</span><span class="o">.</span><span class="n">BOKEH</span><span class="p">)</span>
<span class="n">manager</span><span class="o">.</span><span class="n">register</span><span class="p">(</span><span class="s2">&quot;sin&quot;</span><span class="p">,</span> <span class="n">sinGen</span><span class="o">.</span><span class="n">findBlock</span><span class="p">(</span><span class="s1">&#39;collector&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span> <span class="n">fig</span><span class="p">,</span> <span class="n">LinePlot</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s1">&#39;red&#39;</span><span class="p">))</span>

<span class="k">def</span> <span class="nf">set_xlim</span><span class="p">(</span><span class="n">limits</span><span class="p">):</span>
    <span class="n">lower</span><span class="p">,</span> <span class="n">upper</span> <span class="o">=</span> <span class="n">limits</span>
    <span class="n">fig</span><span class="o">.</span><span class="n">x_range</span><span class="o">.</span><span class="n">start</span> <span class="o">=</span> <span class="n">lower</span>
    <span class="n">fig</span><span class="o">.</span><span class="n">x_range</span><span class="o">.</span><span class="n">end</span> <span class="o">=</span> <span class="n">upper</span>
<span class="n">manager</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="s1">&#39;sin&#39;</span><span class="p">,</span> <span class="s1">&#39;update_event&#39;</span><span class="p">,</span> <span class="k">lambda</span> <span class="n">d</span><span class="p">:</span> <span class="n">set_xlim</span><span class="p">(</span><span class="n">follow</span><span class="p">(</span><span class="n">d</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="mf">10.0</span><span class="p">,</span> <span class="n">lower_bound</span><span class="o">=</span><span class="mf">0.0</span><span class="p">)))</span>

<span class="n">session</span> <span class="o">=</span> <span class="n">push_session</span><span class="p">(</span><span class="n">curdoc</span><span class="p">())</span>
<span class="n">session</span><span class="o">.</span><span class="n">show</span><span class="p">()</span>

<span class="n">sim</span> <span class="o">=</span> <span class="n">Simulator</span><span class="p">(</span><span class="n">sinGen</span><span class="p">)</span>
<span class="n">sim</span><span class="o">.</span><span class="n">setRealTime</span><span class="p">()</span>
<span class="n">sim</span><span class="o">.</span><span class="n">setDeltaT</span><span class="p">(</span><span class="mf">0.1</span><span class="p">)</span>
<span class="n">sim</span><span class="o">.</span><span class="n">run</span><span class="p">(</span><span class="mf">20.0</span><span class="p">)</span>

<span class="c1"># NOTE: currently, there can be &#39;flickering&#39; of the plot</span>
<span class="kn">import</span> <span class="nn">time</span>
<span class="k">while</span> <span class="n">manager</span><span class="o">.</span><span class="n">is_opened</span><span class="p">():</span>
    <span class="n">session</span><span class="o">.</span><span class="n">push</span><span class="p">()</span>
    <span class="n">time</span><span class="o">.</span><span class="n">sleep</span><span class="p">(</span><span class="mf">0.1</span><span class="p">)</span>
</pre></div>
</div>
<div class="figure">
<a class="reference internal image-reference" href="../_images/sine-wave-bokeh.gif"><img alt="../_images/sine-wave-bokeh.gif" src="../_images/sine-wave-bokeh.gif" style="width: 400px;" /></a>
</div>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">Currenly, there is a lot of “flickering” of the plot. There has not yet been found a solution
for this problem.</p>
</div>
</div>
</div>


             </article>
             
            </div>
            <footer>
  
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
      
        <a href="../CBD.html" class="btn btn-neutral float-right" title="CBD package" accesskey="n" rel="next">Next <img src="../_static/images/chevron-right-orange.svg" class="next-page"></a>
      
      
        <a href="RealTime.html" class="btn btn-neutral" title="Realtime Simulation" accesskey="p" rel="prev"><img src="../_static/images/chevron-right-orange.svg" class="previous-page"> Previous</a>
      
    </div>
  

  <hr>

  <div role="contentinfo">
    <p>
        &copy; Copyright 2020, Randy Paredis.

    </p>
  </div>
    
      <div>
        Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/rtfd/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
      </div>
     

</footer>

          </div>
        </div>

        <div class="catalyst-content-right" id="catalyst-content-right">
          <div class="catalyst-right-menu" id="catalyst-right-menu">
            <div class="catalyst-side-scroll" id="catalyst-side-scroll-right">
              <ul>
<li><a class="reference internal" href="#">Live Plotting of Data During the Simulation</a><ul>
<li><a class="reference internal" href="#example-model">Example Model</a></li>
<li><a class="reference internal" href="#using-matplotlib">Using MatPlotLib</a><ul>
<li><a class="reference internal" href="#default">Default</a></li>
<li><a class="reference internal" href="#tkinter">TkInter</a></li>
</ul>
</li>
<li><a class="reference internal" href="#using-bokeh">Using Bokeh</a></li>
</ul>
</li>
</ul>

            </div>
          </div>
        </div>
      </section>
    </div>

  
       <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
         <script type="text/javascript" src="../_static/jquery.js"></script>
         <script type="text/javascript" src="../_static/underscore.js"></script>
         <script type="text/javascript" src="../_static/doctools.js"></script>
         <script type="text/javascript" src="../_static/language_data.js"></script>
         <script async="async" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
     

  <script type="text/javascript" src="../_static/js/vendor/popper.min.js"></script>
  <script type="text/javascript" src="../_static/js/vendor/bootstrap.min.js"></script>
  <script type="text/javascript" src="../_static/js/theme.js"></script>

  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script> 

  <!-- Begin Footer -->

  <footer class="site-footer" id="site-footer">
    <div class="container footer-container">
      <div class="footer-logo-wrapper">
        <a href="https://catalyst-team.com/" class="footer-logo"></a>
      </div>

      <div class="footer-links-wrapper">
        <div class="footer-links-col">
          <ul>
            <li class="list-title"><a href="https://github.com/catalyst-team">Ecosystem</a></li>
            <li><a class="nav-dropdown-item" href="https://alchemy.host">Alchemy</a></li>
            <li><a class="nav-dropdown-item" href="https://github.com/catalyst-team/catalyst">Catalyst</a></li>
            <li><a class="nav-dropdown-item" href="https://github.com/catalyst-team/reaction">Reaction</a></li>
          </ul>
        </div>

        <div class="footer-links-col">
          <ul>
            <li class="list-title"><a href="https://github.com/catalyst-team">Projects</a></li>
            <li><a class="nav-dropdown-item" href="https://github.com/catalyst-team/codestyle">Codestyle</a></li>
            <li><a class="nav-dropdown-item" href="https://github.com/catalyst-team/neuro">Catalyst.Neuro</a></li>
            <li><a class="nav-dropdown-item" href="https://github.com/catalyst-team/classification">Classification</a></li>
            <li><a class="nav-dropdown-item" href="https://github.com/catalyst-team/detection">Detection</a></li>
            <li><a class="nav-dropdown-item" href="https://github.com/catalyst-team/segmentation">Segmentation</a></li>
            <li><a class="nav-dropdown-item" href="https://github.com/catalyst-team/gan">Catalyst.GAN</a></li>
          </ul>
        </div>

        <div class="footer-links-col">
          <ul>
            <li class="list-title"><a href="https://catalyst-team.com/">Support</a></li>
            <li><a href="https://github.com/catalyst-team/catalyst/issues" target="_blank">Github Issues</a></li>
            <li><a href="https://github.com/catalyst-team/catalyst/blob/master/CONTRIBUTING.md" target="_blank">Contributing</a></li>
            <li><a href="https://www.patreon.com/catalyst_team" target="_blank">Patreon</a></li>
          </ul>
        </div>

        <div class="footer-links-col follow-us-col">
          <div class="footer-social-icons">
            <a href="https://t.me/catalyst_team" target="_blank" class="telegram"></a>
            <a href="https://twitter.com/catalyst_core" target="_blank" class="twitter"></a>
            <a href="https://join.slack.com/t/catalyst-team-core/shared_invite/zt-d9miirnn-z86oKDzFMKlMG4fgFdZafw" target="_blank" class="ods"></a>
          </div>
        </div>
      </div>
    </div>
  </footer>


  <!-- End Footer -->

  <!-- Begin Mobile Menu -->

  <div class="mobile-main-menu">
    <div class="container-fluid">
      <div class="container">
        <div class="mobile-main-menu-header-container">
          <a class="header-logo" href="https://catalyst-team.com/" aria-label="Catalyst"></a>
          <a class="main-menu-close-button" href="#" data-behavior="close-mobile-menu"></a>
        </div>
      </div>
    </div>

    <div class="mobile-main-menu-links-container">
      <div class="main-menu">
        <ul>
          <li>
            <a href="">Get Started</a>
          </li>

          <li>
            <a href="https://github.com/catalyst-team/catalyst">Github</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- End Mobile Menu -->

  <script type="text/javascript" src="../_static/js/vendor/anchor.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      mobileMenu.bind();
      mobileTOC.bind();
      catalystAnchors.bind();
      sideMenus.bind();
      scrollToAnchor.bind();
      highlightNavigation.bind();
      mainMenuDropdown.bind();

      // Add class to links that have code blocks, since we cannot create links in code blocks
      $("article.catalyst-article a span.pre").each(function(e) {
        $(this).closest("a").addClass("has-code");
      });
    })
  </script>
</body>
</html>