|
|
<!DOCTYPE html> |
|
|
<html class="writer-html5" lang="en" > |
|
|
<head> |
|
|
<meta charset="utf-8" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" /> |
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>pyTermTk - Your first Calculator — pyTermTk 0.36.0-a |
|
|
documentation</title> |
|
|
<link rel="stylesheet" href="../_static/pygments.css" type="text/css" /> |
|
|
<link rel="stylesheet" href="../_static/css/theme.css" type="text/css" /> |
|
|
<link rel="stylesheet" href="../_static/theme_overrides.css" type="text/css" /> |
|
|
<link rel="stylesheet" href="../_static/ttk.css" type="text/css" /> |
|
|
<link rel="shortcut icon" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/www/favicon.ico"/> |
|
|
<!--[if lt IE 9]> |
|
|
<script src="../_static/js/html5shiv.min.js"></script> |
|
|
<![endif]--> |
|
|
|
|
|
<script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script> |
|
|
<script src="../_static/jquery.js"></script> |
|
|
<script src="../_static/underscore.js"></script> |
|
|
<script src="../_static/_sphinx_javascript_frameworks_compat.js"></script> |
|
|
<script src="../_static/doctools.js"></script> |
|
|
<script src="../_static/js/theme.js"></script> |
|
|
<link rel="index" title="Index" href="../genindex.html" /> |
|
|
<link rel="search" title="Search" href="../search.html" /> |
|
|
<link rel="next" title="ttkDesigner - Your first TextEditor" href="ttkDesigner/textEdit/README.html" /> |
|
|
<link rel="prev" title="pyTermTk - Logging" href="004-logging.html" /> |
|
|
</head> |
|
|
|
|
|
<body class="wy-body-for-nav"> |
|
|
<div class="wy-grid-for-nav"> |
|
|
<nav data-toggle="wy-nav-shift" class="wy-nav-side"> |
|
|
<div class="wy-side-scroll"> |
|
|
<div class="wy-side-nav-search" > |
|
|
<a href="../index.html" class="icon icon-home"> pyTermTk |
|
|
</a> |
|
|
<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><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu"> |
|
|
<p class="caption" role="heading"><span class="caption-text">Tutorials</span></p> |
|
|
<ul class="current"> |
|
|
<li class="toctree-l1"><a class="reference internal" href="000-examples.html">pyTermTk - < <strong>the Examples</strong> ></a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="001-helloworld.html">pyTermTk - Hello World</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="002-layout.html">pyTermTk - Layouts</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="003-signalslots.html">pyTermTk - Signal & Slots</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="004-logging.html">pyTermTk - Logging</a></li> |
|
|
<li class="toctree-l1 current"><a class="current reference internal" href="#">pyTermTk - Your first Calculator</a><ul> |
|
|
<li class="toctree-l2"><a class="reference internal" href="#intro">Intro</a></li> |
|
|
<li class="toctree-l2"><a class="reference internal" href="#design">Design</a></li> |
|
|
<li class="toctree-l2"><a class="reference internal" href="#start-coding">Start Coding</a><ul> |
|
|
<li class="toctree-l3"><a class="reference internal" href="#initialize-the-window">Initialize the window</a></li> |
|
|
<li class="toctree-l3"><a class="reference internal" href="#add-all-the-widgets-of-calculator-to-it">Add all the widgets of calculator to it</a></li> |
|
|
<li class="toctree-l3"><a class="reference internal" href="#numeric-button-events">Numeric Button Events</a></li> |
|
|
<li class="toctree-l3"><a class="reference internal" href="#operation-and-results-events">Operation and results events</a></li> |
|
|
<li class="toctree-l3"><a class="reference internal" href="#beware-the-mystery-button">Beware the Mystery Button</a></li> |
|
|
</ul> |
|
|
</li> |
|
|
</ul> |
|
|
</li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="ttkDesigner/textEdit/README.html">ttkDesigner - Your first TextEditor</a></li> |
|
|
</ul> |
|
|
<p class="caption" role="heading"><span class="caption-text">Features</span></p> |
|
|
<ul> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../info/features/index.html">Features</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../info/features/crosscompatible.html">Cross Compatibility</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../info/features/widgets.html">Widgets</a></li> |
|
|
</ul> |
|
|
<p class="caption" role="heading"><span class="caption-text">Dev</span></p> |
|
|
<ul> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../info/installing.html">Installation</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../info/installing.html#quickstart">Quickstart</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../info/debug.html">Debug</a></li> |
|
|
</ul> |
|
|
<p class="caption" role="heading"><span class="caption-text">API Reference</span></p> |
|
|
<ul> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkAbstract.html">TermTk.TTkAbstract</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkCore.html">TermTk.TTkCore</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkCore.TTkTerm.html">TermTk.TTkCore.TTkTerm</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkGui.html">TermTk.TTkGui</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkLayouts.html">TermTk.TTkLayouts</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkTemplates.html">TermTk.TTkTemplates</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkTestWidgets.html">TermTk.TTkTestWidgets</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkTheme.html">TermTk.TTkTheme</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkTypes.html">TermTk.TTkTypes</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkUiTools.html">TermTk.TTkUiTools</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkWidgets.html">TermTk.TTkWidgets</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkWidgets.TTkModelView.html">TermTk.TTkWidgets.TTkModelView</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkWidgets.TTkPickers.html">TermTk.TTkWidgets.TTkPickers</a></li> |
|
|
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkWidgets.TTkTerminal.html">TermTk.TTkWidgets.TTkTerminal</a></li> |
|
|
</ul> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" > |
|
|
<i data-toggle="wy-nav-top" class="fa fa-bars"></i> |
|
|
<a href="../index.html">pyTermTk</a> |
|
|
</nav> |
|
|
|
|
|
<div class="wy-nav-content"> |
|
|
<div class="rst-content"> |
|
|
<div role="navigation" aria-label="Page navigation"> |
|
|
<ul class="wy-breadcrumbs"> |
|
|
<li><a href="../index.html" class="icon icon-home"></a> »</li> |
|
|
<li>pyTermTk - Your first Calculator</li> |
|
|
<li class="wy-breadcrumbs-aside"> |
|
|
<a href="../_sources/tutorial/005-calculator.rst.txt" rel="nofollow"> View page source</a> |
|
|
</li> |
|
|
</ul> |
|
|
<hr/> |
|
|
</div> |
|
|
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article"> |
|
|
<div itemprop="articleBody"> |
|
|
|
|
|
<section id="pytermtk-your-first-calculator"> |
|
|
<h1><a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a> - Your first Calculator<a class="headerlink" href="#pytermtk-your-first-calculator" title="Permalink to this heading"></a></h1> |
|
|
<section id="intro"> |
|
|
<h2>Intro<a class="headerlink" href="#intro" title="Permalink to this heading"></a></h2> |
|
|
<p>This example shows how to use <a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/tutorial/003-signalslots.html">signals and slots</a> to implement the functionality of a calculator widget, and how to use <a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.gridlayout.html">TTkGridLayout</a> to place child widgets in a grid. |
|
|
Due to the modular nature of <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a>, the same result may be achieved in multiple ways, for the sack of simplicity I will use a procedural approach avoiding to create a calculator widget.</p> |
|
|
</section> |
|
|
<section id="design"> |
|
|
<h2>Design<a class="headerlink" href="#design" title="Permalink to this heading"></a></h2> |
|
|
<p>First of all we need a rough idea about the layout we want to achieve. |
|
|
Thanks to my amazing <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/demo/paint.py">paint.py</a> I draw my idea and I used it to check the grid placement of any widget</p> |
|
|
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>Col: 0 1 2 3 |
|
|
|-------|-------|-------|-------| Row: |
|
|
╔═════════════════════════════════╗ --- |
|
|
║ ┌─────────────────────────────┐ ║ | |
|
|
║ │ r:0,c:0, rspan:1, cspan:4 │ ║ | 0 |
|
|
║ └─────────────────────────────┘ ║ --- |
|
|
║ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ║ | |
|
|
║ │ 1,0 │ │ 1,1 │ │ 1,2 │ │ 1,3 │ ║ | 1 |
|
|
║ └─────┘ └─────┘ └─────┘ └─────┘ ║ --- |
|
|
║ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ║ | |
|
|
║ │ 2,0 │ │ 2,1 │ │ 2,2 │ │ 2,3 │ ║ | 2 |
|
|
║ └─────┘ └─────┘ └─────┘ └─────┘ ║ --- |
|
|
║ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ║ | |
|
|
║ │ 3,0 │ │ 3,1 │ │ 3,2 │ │ 3,3 │ ║ | 3 |
|
|
║ └─────┘ └─────┘ └─────┘ │ │ ║ --- |
|
|
║ ┌─────────────┐ ┌─────┐ │ 2,1 │ ║ | |
|
|
║ │ 4,0 1,2 │ │ 4,2 │ │ │ ║ | 4 |
|
|
║ └─────────────┘ └─────┘ └─────┘ ║ --- |
|
|
╚═════════════════════════════════╝ |
|
|
</pre></div> |
|
|
</div> |
|
|
</section> |
|
|
<section id="start-coding"> |
|
|
<h2>Start Coding<a class="headerlink" href="#start-coding" title="Permalink to this heading"></a></h2> |
|
|
<section id="initialize-the-window"> |
|
|
<h3>Initialize the window<a class="headerlink" href="#initialize-the-window" title="Permalink to this heading"></a></h3> |
|
|
<p>From <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/calculator/calculator.001.py">calculator.001.py</a> |
|
|
(<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/calculator/calculator.001.py">tryItOnline</a>):</p> |
|
|
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span><span class="c1"># If you want to try without installation, run from the pyTermTk root folder</span> |
|
|
<span class="nv">PYTHONPATH</span><span class="o">=</span><span class="sb">`</span><span class="nb">pwd</span><span class="sb">`</span> tutorial/calculator/calculator.001.py |
|
|
</pre></div> |
|
|
</div> |
|
|
<p>First thing first I need a parent widget with a grid layout that I can use to place the elements of my calculator</p> |
|
|
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">TermTk</span> <span class="k">as</span> <span class="nn">ttk</span> |
|
|
|
|
|
<span class="c1"># Create a root object (it is a widget that represent the terminal)</span> |
|
|
<span class="n">root</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTk</span><span class="p">()</span> |
|
|
|
|
|
<span class="c1"># Create a window and attach it to the root (parent=root)</span> |
|
|
<span class="n">calculatorWin</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkWindow</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">pos</span><span class="o">=</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">),</span> <span class="n">size</span><span class="o">=</span><span class="p">(</span><span class="mi">30</span><span class="p">,</span><span class="mi">17</span><span class="p">),</span> <span class="n">title</span><span class="o">=</span><span class="s2">"My first Calculator"</span><span class="p">)</span> |
|
|
|
|
|
<span class="c1"># Create a grid layout and set it as default for the window</span> |
|
|
<span class="n">winLayout</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkGridLayout</span><span class="p">()</span> |
|
|
<span class="n">calculatorWin</span><span class="o">.</span><span class="n">setLayout</span><span class="p">(</span><span class="n">winLayout</span><span class="p">)</span> |
|
|
</pre></div> |
|
|
</div> |
|
|
<p>Once we have out layout object (<strong>winLayout</strong>) ready we can add all the widgets of calculator to it</p> |
|
|
</section> |
|
|
<section id="add-all-the-widgets-of-calculator-to-it"> |
|
|
<h3>Add all the widgets of calculator to it<a class="headerlink" href="#add-all-the-widgets-of-calculator-to-it" title="Permalink to this heading"></a></h3> |
|
|
<p>From <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/calculator/calculator.002.py">calculator.002.py</a> |
|
|
(<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/calculator/calculator.002.py">tryItOnline</a>):</p> |
|
|
<p>Based on the positions and sizes defined in the <a class="reference external" href="#design">design layout</a>, I place all the widgets on the <a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.gridlayout.html">TTkGridLayout</a> (<strong>winLayout</strong>)</p> |
|
|
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span><span class="c1"># If you want to try without installation, run from the pyTermTk root folder</span> |
|
|
<span class="nv">PYTHONPATH</span><span class="o">=</span><span class="sb">`</span><span class="nb">pwd</span><span class="sb">`</span> tutorial/calculator/calculator.002.py |
|
|
</pre></div> |
|
|
</div> |
|
|
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span> <span class="c1"># Define the Label and attach it to the grid layout at</span> |
|
|
<span class="c1"># Position (Row/Col) (0,0) and (Row/Col)Span (1,4)</span> |
|
|
<span class="c1"># I force the Max Height to 1 in order to avoid this widget to resize vertically</span> |
|
|
<span class="n">resLabel</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkLabel</span><span class="p">(</span><span class="n">text</span><span class="o">=</span><span class="s2">"Results"</span><span class="p">,</span> <span class="n">maxHeight</span><span class="o">=</span><span class="mi">1</span><span class="p">)</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">resLabel</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span><span class="mi">4</span><span class="p">)</span> |
|
|
|
|
|
<span class="c1"># Define the Numeric Buttons and attach them to the grid layout</span> |
|
|
<span class="n">btn1</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"1"</span><span class="p">)</span> |
|
|
<span class="n">btn2</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"2"</span><span class="p">)</span> |
|
|
<span class="n">btn3</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"3"</span><span class="p">)</span> |
|
|
<span class="n">btn4</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"4"</span><span class="p">)</span> |
|
|
<span class="n">btn5</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"5"</span><span class="p">)</span> |
|
|
<span class="n">btn6</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"6"</span><span class="p">)</span> |
|
|
<span class="n">btn7</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"7"</span><span class="p">)</span> |
|
|
<span class="n">btn8</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"8"</span><span class="p">)</span> |
|
|
<span class="n">btn9</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"9"</span><span class="p">)</span> |
|
|
|
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span><span class="mi">0</span><span class="p">)</span> <span class="c1"># Colspan/Rowspan are defaulted to 1 if not specified</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn3</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn4</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span><span class="mi">0</span><span class="p">)</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn5</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn6</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn7</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span><span class="mi">0</span><span class="p">)</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn8</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn9</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span> |
|
|
|
|
|
<span class="c1"># Adding the "0" button on the bottom which alignment is</span> |
|
|
<span class="c1"># Position (Row/Col) (4,0) (Row/Col)span (1,2)</span> |
|
|
<span class="c1"># Just to show off I am using another way to attach it to the grid layout</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btn0</span><span class="o">:=</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"0"</span><span class="p">),</span> <span class="mi">4</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span> |
|
|
|
|
|
<span class="c1"># Define the 2 algebraic buttons</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btnAdd</span><span class="o">:=</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"+"</span><span class="p">),</span> <span class="mi">1</span><span class="p">,</span><span class="mi">3</span><span class="p">)</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btnSub</span><span class="o">:=</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"-"</span><span class="p">),</span> <span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">)</span> |
|
|
|
|
|
<span class="c1"># The Enter "=" button (2 rows wide )</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">btnRes</span><span class="o">:=</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"="</span><span class="p">),</span> <span class="mi">3</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span> |
|
|
|
|
|
<span class="c1"># Last but not least an extrabutton just for fun</span> |
|
|
<span class="n">winLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">mysteryButton</span><span class="o">:=</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">"?"</span><span class="p">),</span> <span class="mi">4</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span> |
|
|
</pre></div> |
|
|
</div> |
|
|
<p>This code will produce this result:</p> |
|
|
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>╔════════════════════════════╗ |
|
|
║ My first Calculator ║ |
|
|
╟────────────────────────────╢ |
|
|
║Results ║ |
|
|
║┌─────┐┌─────┐┌─────┐┌─────┐║ |
|
|
║│ 1 ││ 2 ││ 3 ││ + │║ |
|
|
║╘═════╛╘═════╛╘═════╛╘═════╛║ |
|
|
║┌─────┐┌─────┐┌─────┐┌─────┐║ |
|
|
║│ 4 ││ 5 ││ 6 ││ - │║ |
|
|
║╘═════╛╘═════╛╘═════╛╘═════╛║ |
|
|
║┌─────┐┌─────┐┌─────┐┌─────┐║ |
|
|
║│ 7 ││ 8 ││ 9 ││ │║ |
|
|
║╘═════╛╘═════╛╘═════╛│ = │║ |
|
|
║┌────────────┐┌─────┐│ │║ |
|
|
║│ 0 ││ ? ││ │║ |
|
|
║╘════════════╛╘═════╛╘═════╛║ |
|
|
╚════════════════════════════╝ |
|
|
</pre></div> |
|
|
</div> |
|
|
<p>Cool isn’t it?</p> |
|
|
</section> |
|
|
<section id="numeric-button-events"> |
|
|
<h3>Numeric Button Events<a class="headerlink" href="#numeric-button-events" title="Permalink to this heading"></a></h3> |
|
|
<p>From <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/calculator/calculator.003.py">calculator.003.py</a> |
|
|
(<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/calculator/calculator.003.py">tryItOnline</a>):</p> |
|
|
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span><span class="c1"># If you want to try without installation, run from the pyTermTk root folder</span> |
|
|
<span class="nv">PYTHONPATH</span><span class="o">=</span><span class="sb">`</span><span class="nb">pwd</span><span class="sb">`</span> tutorial/calculator/calculator.003.py |
|
|
</pre></div> |
|
|
</div> |
|
|
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span> <span class="c1"># I am defining a simlpe structure that can be used to store</span> |
|
|
<span class="c1"># the mathematical elements of the formulae</span> |
|
|
<span class="n">mathElements</span> <span class="o">=</span> <span class="p">{</span><span class="s1">'a'</span><span class="p">:</span><span class="kc">None</span><span class="p">,</span> <span class="s1">'b'</span><span class="p">:</span><span class="kc">None</span><span class="p">,</span> <span class="s1">'operation'</span><span class="p">:</span><span class="kc">None</span><span class="p">}</span> |
|
|
|
|
|
<span class="c1"># This is a simple callback that I can use to store the numbers</span> |
|
|
<span class="c1"># I didn't include extra logic because out of the scope of this tutorial</span> |
|
|
<span class="k">def</span> <span class="nf">setFactor</span><span class="p">(</span><span class="n">value</span><span class="p">):</span> |
|
|
<span class="k">if</span> <span class="n">mathElements</span><span class="p">[</span><span class="s1">'operation'</span><span class="p">]</span> <span class="ow">is</span> <span class="kc">None</span><span class="p">:</span> |
|
|
<span class="n">mathElements</span><span class="p">[</span><span class="s1">'a'</span><span class="p">]</span> <span class="o">=</span> <span class="n">mathElements</span><span class="p">[</span><span class="s1">'a'</span><span class="p">]</span><span class="o">*</span><span class="mi">10</span><span class="o">+</span><span class="n">value</span> |
|
|
<span class="c1"># Display the value in the label</span> |
|
|
<span class="n">resLabel</span><span class="o">.</span><span class="n">setText</span><span class="p">(</span><span class="sa">f</span><span class="s2">"</span><span class="si">{</span><span class="n">mathElements</span><span class="p">[</span><span class="s1">'a'</span><span class="p">]</span><span class="si">}</span><span class="s2">"</span><span class="p">)</span> |
|
|
<span class="k">else</span><span class="p">:</span> |
|
|
<span class="n">mathElements</span><span class="p">[</span><span class="s1">'b'</span><span class="p">]</span> <span class="o">=</span> <span class="n">mathElements</span><span class="p">[</span><span class="s1">'b'</span><span class="p">]</span><span class="o">*</span><span class="mi">10</span><span class="o">+</span><span class="n">value</span> |
|
|
<span class="c1"># Display the value in the label</span> |
|
|
<span class="n">resLabel</span><span class="o">.</span><span class="n">setText</span><span class="p">(</span><span class="sa">f</span><span class="s2">"</span><span class="si">{</span><span class="n">mathElements</span><span class="p">[</span><span class="s1">'b'</span><span class="p">]</span><span class="si">}</span><span class="s2">"</span><span class="p">)</span> |
|
|
|
|
|
<span class="c1"># I am using a lambda function to redirect the click event to the</span> |
|
|
<span class="c1"># proper "setFactor" callback, this is due to the fact that the</span> |
|
|
<span class="c1"># "clicked" signal does not return any object or information that</span> |
|
|
<span class="c1"># can be used to identify which button has been pressed</span> |
|
|
<span class="c1"># different approaches are possible, i.e. create a separate function</span> |
|
|
<span class="c1"># for each button</span> |
|
|
<span class="n">btn0</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">0</span><span class="p">))</span> |
|
|
<span class="n">btn1</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">1</span><span class="p">))</span> |
|
|
<span class="n">btn2</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">2</span><span class="p">))</span> |
|
|
<span class="n">btn3</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">3</span><span class="p">))</span> |
|
|
<span class="n">btn4</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">4</span><span class="p">))</span> |
|
|
<span class="n">btn5</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">5</span><span class="p">))</span> |
|
|
<span class="n">btn6</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">6</span><span class="p">))</span> |
|
|
<span class="n">btn7</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">7</span><span class="p">))</span> |
|
|
<span class="n">btn8</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">8</span><span class="p">))</span> |
|
|
<span class="n">btn9</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="k">lambda</span> <span class="p">:</span> <span class="n">setFactor</span><span class="p">(</span><span class="mi">9</span><span class="p">))</span> |
|
|
</pre></div> |
|
|
</div> |
|
|
</section> |
|
|
<section id="operation-and-results-events"> |
|
|
<h3>Operation and results events<a class="headerlink" href="#operation-and-results-events" title="Permalink to this heading"></a></h3> |
|
|
<p>From <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/calculator/calculator.004.py">calculator.004.py</a> |
|
|
(<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/calculator/calculator.004.py">tryItOnline</a>):</p> |
|
|
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span><span class="c1"># If you want to try without installation, run from the pyTermTk root folder</span> |
|
|
<span class="nv">PYTHONPATH</span><span class="o">=</span><span class="sb">`</span><span class="nb">pwd</span><span class="sb">`</span> tutorial/calculator/calculator.004.py |
|
|
</pre></div> |
|
|
</div> |
|
|
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span> <span class="c1"># Define 2 slots to handle the Add and Sub operations</span> |
|
|
<span class="nd">@pyTTkSlot</span><span class="p">()</span> |
|
|
<span class="k">def</span> <span class="nf">setOperationAdd</span><span class="p">():</span> |
|
|
<span class="n">mathElements</span><span class="p">[</span><span class="s1">'operation'</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"ADD"</span> |
|
|
|
|
|
<span class="nd">@pyTTkSlot</span><span class="p">()</span> |
|
|
<span class="k">def</span> <span class="nf">setOperationSub</span><span class="p">():</span> |
|
|
<span class="n">mathElements</span><span class="p">[</span><span class="s1">'operation'</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"SUB"</span> |
|
|
|
|
|
<span class="c1"># Connect them to the clicked signal of the buttons</span> |
|
|
<span class="n">btnAdd</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">setOperationAdd</span><span class="p">)</span> |
|
|
<span class="n">btnSub</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">setOperationSub</span><span class="p">)</span> |
|
|
|
|
|
<span class="c1"># Same for the "=" button</span> |
|
|
<span class="nd">@pyTTkSlot</span><span class="p">()</span> |
|
|
<span class="k">def</span> <span class="nf">executeOperation</span><span class="p">():</span> |
|
|
<span class="k">if</span> <span class="n">mathElements</span><span class="p">[</span><span class="s1">'operation'</span><span class="p">]</span> <span class="ow">is</span> <span class="ow">not</span> <span class="kc">None</span><span class="p">:</span> |
|
|
<span class="k">if</span> <span class="n">mathElements</span><span class="p">[</span><span class="s1">'operation'</span><span class="p">]</span> <span class="o">==</span> <span class="s2">"ADD"</span><span class="p">:</span> |
|
|
<span class="n">res</span> <span class="o">=</span> <span class="n">mathElements</span><span class="p">[</span><span class="s1">'a'</span><span class="p">]</span> <span class="o">+</span> <span class="n">mathElements</span><span class="p">[</span><span class="s1">'b'</span><span class="p">]</span> |
|
|
<span class="n">resLabel</span><span class="o">.</span><span class="n">setText</span><span class="p">(</span><span class="sa">f</span><span class="s2">"</span><span class="si">{</span><span class="n">mathElements</span><span class="p">[</span><span class="s1">'a'</span><span class="p">]</span><span class="si">}</span><span class="s2"> + </span><span class="si">{</span><span class="n">mathElements</span><span class="p">[</span><span class="s1">'b'</span><span class="p">]</span><span class="si">}</span><span class="s2"> = </span><span class="si">{</span><span class="n">res</span><span class="si">}</span><span class="s2">"</span><span class="p">)</span> |
|
|
<span class="k">else</span><span class="p">:</span> <span class="c1"># "SUB" Routine</span> |
|
|
<span class="n">res</span> <span class="o">=</span> <span class="n">mathElements</span><span class="p">[</span><span class="s1">'a'</span><span class="p">]</span> <span class="o">-</span> <span class="n">mathElements</span><span class="p">[</span><span class="s1">'b'</span><span class="p">]</span> |
|
|
<span class="n">resLabel</span><span class="o">.</span><span class="n">setText</span><span class="p">(</span><span class="sa">f</span><span class="s2">"</span><span class="si">{</span><span class="n">mathElements</span><span class="p">[</span><span class="s1">'a'</span><span class="p">]</span><span class="si">}</span><span class="s2"> - </span><span class="si">{</span><span class="n">mathElements</span><span class="p">[</span><span class="s1">'b'</span><span class="p">]</span><span class="si">}</span><span class="s2"> = </span><span class="si">{</span><span class="n">res</span><span class="si">}</span><span class="s2">"</span><span class="p">)</span> |
|
|
<span class="c1"># reset the values</span> |
|
|
<span class="n">mathElements</span><span class="p">[</span><span class="s1">'a'</span><span class="p">]</span> <span class="o">=</span> <span class="n">res</span> |
|
|
<span class="n">mathElements</span><span class="p">[</span><span class="s1">'b'</span><span class="p">]</span> <span class="o">=</span> <span class="mi">0</span> |
|
|
<span class="n">mathElements</span><span class="p">[</span><span class="s1">'operation'</span><span class="p">]</span> <span class="o">=</span> <span class="kc">None</span> |
|
|
|
|
|
<span class="n">btnRes</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">executeOperation</span><span class="p">)</span> |
|
|
</pre></div> |
|
|
</div> |
|
|
</section> |
|
|
<section id="beware-the-mystery-button"> |
|
|
<h3>Beware the Mystery Button<a class="headerlink" href="#beware-the-mystery-button" title="Permalink to this heading"></a></h3> |
|
|
<p>From <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/calculator/calculator.005.py">calculator.005.py</a> |
|
|
(<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/calculator/calculator.005.py">tryItOnline</a>):</p> |
|
|
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span><span class="c1"># If you want to try without installation, run from the pyTermTk root folder</span> |
|
|
<span class="nv">PYTHONPATH</span><span class="o">=</span><span class="sb">`</span><span class="nb">pwd</span><span class="sb">`</span> tutorial/calculator/calculator.005.py |
|
|
</pre></div> |
|
|
</div> |
|
|
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="nd">@pyTTkSlot</span><span class="p">()</span> |
|
|
<span class="k">def</span> <span class="nf">showAboytWindow</span><span class="p">():</span> |
|
|
<span class="c1"># I am using the overlay helper to show the</span> |
|
|
<span class="c1"># About window on top of the screen</span> |
|
|
<span class="c1"># it will be closed once the focus is lost</span> |
|
|
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkHelper</span><span class="o">.</span><span class="n">overlay</span><span class="p">(</span><span class="n">mysteryButton</span><span class="p">,</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkAbout</span><span class="p">(),</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> |
|
|
|
|
|
<span class="n">mysteryButton</span><span class="o">.</span><span class="n">clicked</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">showAboytWindow</span><span class="p">)</span> |
|
|
</pre></div> |
|
|
</div> |
|
|
<p>Press the Mystery “?” Button if you dare!!!</p> |
|
|
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>╔═══════════════════════════════════════════╗ |
|
|
║ My first Calculator ║ |
|
|
╟───────────────────────────────────────────╢ |
|
|
║1 + 2 = 3 ║ |
|
|
║┌─────────┐┌────────┐┌─────────┐┌─────────┐║ |
|
|
║│ 1 ││ 2 ││ 3 ││ + │║ |
|
|
║╘═════════╛╘════════╛╘═════════╛╘═════════╛║ |
|
|
║┌─────────┐┌────────┐┌─────────┐┌─────────┐║ |
|
|
║│ 4 ││ 5 ││ 6 ││ - │║ |
|
|
║│ ││ ╔═════════════════════════════════════════════════════╗ |
|
|
║╘═════════╛╘══║ About... ║ |
|
|
║┌─────────┐┌──╟─────────────────────────────────────────────────────╢ |
|
|
║│ 7 ││ ║ ▝▀▄ ████████╗ ████████╗ ║ |
|
|
║│ ││ ║ ▗▄▀▜▀▘▄▄▖ ╚══██╔══╝ ╚══██╔══╝ ║ |
|
|
║╘═════════╛╘══║▐▐▛▄▐▀▌▝▘▀ ██║ ▄▄ ▄ ▄▄ ▄▄▖▄▖ ██║ █ ▗▖ ║ |
|
|
║┌─────────────║▝▀▌▜▝▀▘▌▌ ▞▀▚ ▖▗ ██║ █▄▄█ █▀▘ █ █ █ ██║ █▟▘ ║ |
|
|
║│ 0 ║ ▗▗▞▜▀▌▗▌▖ ▙▄▞▐▄▟ ██║ ▀▄▄▖ █ █ ▝ █ ██║ █ ▀▄ ║ |
|
|
║│ ║ ▝▐▙▟▟▌▟▌▌ ▌ ▐ ╚═╝ ╚═╝ ║ |
|
|
║╘═════════════║ ▐▐▌▗▌▘▌▌ ▚▄▄▘ Version: 0.7.0a16 ║ |
|
|
╚══════════════║ ▝▐▌▐▖▜▌▌ ║ |
|
|
║ ▝▐▀▝▘▀▘▘ Powered By, Eugenio Parodi ║ |
|
|
║ ▝▀▀▀▀▘ ║ |
|
|
║ https://github.com/ceccopierangiolieugenio/pyTermTk ║ |
|
|
╚═════════════════════════════════════════════════════╝ |
|
|
</pre></div> |
|
|
</div> |
|
|
<p>Well, with colors is another thing!!!</p> |
|
|
</section> |
|
|
</section> |
|
|
</section> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer"> |
|
|
<a href="004-logging.html" class="btn btn-neutral float-left" title="pyTermTk - Logging" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a> |
|
|
<a href="ttkDesigner/textEdit/README.html" class="btn btn-neutral float-right" title="ttkDesigner - Your first TextEditor" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a> |
|
|
</div> |
|
|
|
|
|
<hr/> |
|
|
|
|
|
<div role="contentinfo"> |
|
|
<p>© Copyright 2021, Eugenio Parodi.</p> |
|
|
</div> |
|
|
|
|
|
Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a |
|
|
<a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a> |
|
|
provided by <a href="https://readthedocs.org">Read the Docs</a>. |
|
|
|
|
|
|
|
|
</footer> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
<script> |
|
|
jQuery(function () { |
|
|
SphinxRtdTheme.Navigation.enable(true); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
