Free AI web copilot to create summaries, insights and extended knowledge, download it at here

2619

Abstract

ps://pywebio.readthedocs.io/en/latest/input.html#functions-list">list of input functions available</a> here.</p><figure id="f3ab"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*zzR2LwTtR71DIHMN2iNpCA.png"><figcaption>Input functions list.</figcaption></figure><p id="1223">You have seen several examples of these input functions in the preceding example. However, we often tend to group different inputs, and that is what <code>input_group</code> does.</p><p id="f094">Let us revisit our first example and use the <code>input_group</code> function for packaging together different inputs. Note here that we have a name parameter in all inputs. We will later use the name parameter for each input.</p> <figure id="275f"> <div> <div>

            <iframe class="gist-iframe" src="/gist/shakurgds/15fdf5da342e96a7a835e1a3bbfe88d5.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="6058">You might have realized that we did not have any output from the preceding example because we have not created any output function yet. PyWebIO has a rich <a href="https://pywebio.readthedocs.io/en/latest/output.html#functions-list">list of output functions</a> that you can refer to.</p><p id="5625">Feel free to explore them but here in this example, I will use only two output functions: <code>put_text</code>and <code>put_table</code>. Note here that we are using the input group with the name of each input to put them into a table.</p>
    <figure id="5a88">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/shakurgds/29d28fa877d0c4f278812d6965516398.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="96da">Here is a GIF showing the grouped inputs and output of the preceding example.</p><figure id="9e6e"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*qXcH0TCdqLnqdik8j3YiDA.gif"><figcaption>Input_group and Output with Pywebio.</figcaption></figure><p id="7904">One final example here to show you that you can extend your python code into Pywebio applications easily without changing too much. This example shows a simple function that formats coordinates into a friendly format.</p>
    <figure id="0d74">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/shakurgds

Options

/a13382012c856da6e3d33e450a4e8f00.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined"> </div> </div> </figure></iframe></div></div></figure><p id="48a5">Here is a GIF showing the simple coordinate formatted application with PyWebIO.</p><figure id="e6d6"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*BkgafnMhVhi9YD2nl0lLNQ.gif"><figcaption>Coordinate Formatter with Pywebio</figcaption></figure><h2 id="3a55">Data Visualization</h2><p id="4170">PyWebIO is integrated with <a href="https://pywebio.readthedocs.io/en/latest/libraries_support.html#data-visualization">several data visualization libraries</a>, including Plotly. The following example creates a Plotly map and serves it with PyWebIO.</p> <figure id="c860"> <div> <div>

            <iframe class="gist-iframe" src="/gist/shakurgds/9a2a30cc174aab7c9d45698b7ceacd93.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="335c">We transform the Plotly Figure into HTML and then pass it to <code>put_html</code> function from PyWebIO. Make sure also to use <code>.send()</code> if you are using Jupyter Notebook.</p><figure id="524f"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*-FsbKMSiHPea7Fkdd0HR4A.png"><figcaption>Pywebio with Plotly visualization</figcaption></figure><h2 id="1d2f">Conclusion</h2><p id="d858">I loved the simplicity of the PyWebIO functionality and concept. You get input and output functions that enable you to transform your python code into a simple web application on your browser. There are many more to explore in this package, especially that it allows styling your application and serving it.</p><p id="c892">Please refer to the documentation of PyWebIO for further exploration of this beautiful package.</p><div id="036a" class="link-block">
      <a href="https://pywebio.readthedocs.io/en/latest/index.html">
        <div>
          <div>
            <h2>PyWebIO - PyWebIO 1.2.3 documentation</h2>
            <div><h3>PyWebIO provides a series of imperative functions to obtain user input and output on the browser, turning the browser…</h3></div>
            <div><p>pywebio.readthedocs.io</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/)"></div>
          </div>
        </div>
      </a>
    </div></article></body>

Create Interactive Web Applications in Pure Python with PyWebIO

Web Applications without HTML & JS

Photo by Caspar Camille Rubin on Unsplash

Exciting time to witness!

Creating Web applications in Python is way easier than it used just a few years ago. We had Streamlit that revolutionized the way we create and deploy apps in Python.

Meet PyWebIO now.

It is easy to build simple web applications using PywebIO without HTML and Javascript in Python. The concept of this package is simple: you get input and output functions that you can create simple GUI or web applications.

Then you can serve the web applications in your browser locally or on the cloud from your terminal, interactive execution environments like Python shell, IPython, or Jupyter notebook.

To install PyWebIO, run the following command.

pip install -U pywebio

Input & Output

PyWebIO is intuitive and straightforward. If you think of it as an extension to your scripts, terminal or interactive environment that enables you to create web applications, it would be fitting.

Let me show a simple example running in a python environment. Here we create different types of inputs, including text input, radio button, and checkbox.

The following GIF shows how you get a browser GUI for your code immediately when you run the python code.

Isn’t that cool!

There are several input functions available in Pywebio; you can find the list of input functions available here.

You have seen several examples of these input functions in the preceding example. However, we often tend to group different inputs, and that is what input_group does.

Let us revisit our first example and use the input_group function for packaging together different inputs. Note here that we have a name parameter in all inputs. We will later use the name parameter for each input.

You might have realized that we did not have any output from the preceding example because we have not created any output function yet. PyWebIO has a rich list of output functions that you can refer to.

Feel free to explore them but here in this example, I will use only two output functions: put_textand put_table. Note here that we are using the input group with the name of each input to put them into a table.

Here is a GIF showing the grouped inputs and output of the preceding example.

One final example here to show you that you can extend your python code into Pywebio applications easily without changing too much. This example shows a simple function that formats coordinates into a friendly format.

Here is a GIF showing the simple coordinate formatted application with PyWebIO.

Data Visualization

PyWebIO is integrated with several data visualization libraries, including Plotly. The following example creates a Plotly map and serves it with PyWebIO.

We transform the Plotly Figure into HTML and then pass it to put_html function from PyWebIO. Make sure also to use .send() if you are using Jupyter Notebook.

Conclusion

I loved the simplicity of the PyWebIO functionality and concept. You get input and output functions that enable you to transform your python code into a simple web application on your browser. There are many more to explore in this package, especially that it allows styling your application and serving it.

Please refer to the documentation of PyWebIO for further exploration of this beautiful package.

PyWebIO - PyWebIO 1.2.3 documentation

PyWebIO provides a series of imperative functions to obtain user input and output on the browser, turning the browser…

pywebio.readthedocs.io