Add a demo for codemirror

[alexhallam]

I am interested in the codemirror functionality. I would like to see a simple example of code input and a text area of the results.

I have further questions about how to handle imports and how to preinstall packages for a code demo in codemirror, but that would not have to be included in the simple example.

[wang0618]

You can enable codemirror in pywebio.input.textarea() or pywebio.pin. put_textarea()

Here is a demo for pywebio.input.textarea(): http://pywebio-demos.pywebio.online/doc_demo?app=demo-textarea-code
and a demo for pywebio.pin. put_textarea(): http://pywebio-demos.pywebio.online/markdown_previewer

Also note that there are some bug when enable codemirror in current pywebio stable version(v1.3.3), you might need to install the dev version.

[alexhallam]

Hi that is great! Where is the source to the first demo pywebio.input.textarea()

[wang0618]

The source code is right on the demo page. 😂

[alexhallam]

haha. I see sorry.

[helincao]

Would you mind elaborating a bit more on what you mean by "how to handle imports"? Couple of things you may be interested:

1. Detect imports
   Codemirror input is a string sent to PyWebIO. There're several packages that can be used to parse the string and extract module names, like a few mentioned here: https://stackoverflow.com/questions/2572582/return-a-list-of-imported-python-modules-used-in-a-script

2. Preinstall packages
   You can install all packages in the environment where you run PyWebIO apps. These packages will be available for you to run the script from codemirror.

I have further questions about how to handle imports and how to preinstall packages for a code demo in codemirror, but that would not have to be included in the simple example.

[alexhallam]

That answers my questions. My purpose for using PyWebIO is that I wanted to showcase my package. I wanted to show some code and example output. If I can use the PyWebIO environment then the problem is solved. I will just have to try it out and read some documentation to get it right.

[alexhallam]

Okay I played with this a little more and now I can articulate what I was looking for a little better. I would like to actually evaluate the code and print the result on the page. What it looks like I am seeing is that I can only input strings and it prints what I input -- no evaluation. In the image below I was expecting a result of 4 I saw print(a)

[helincao]

codemirror is an IDE-styled textarea, which sends user's input as a string to the backend. To get an evaluation result, you can pass the string to some functions, e.g. evel(). Then, you can use a pywebio output module, e.g. pywebio.output.put_text(), to output the result back to the web page.

[alexhallam]

I see what you are saying about sending code to eval(). How can I prepopulate the code mirror with code. I did not see an key for it in the code argument/dictionary. I also thought that the placeholder argument could be a possibility, but I am not seeing any code populate the codemirror.

from pywebio import start_server
from pywebio.output import put_code, put_text
from pywebio.pin import textarea
from pywebio.session import set_env, download


def main():
    """Eval Code"""
    set_env(output_animation=False)
    res = textarea('Text area', code={
        'mode': "python",
        'theme': 'darcula'
    })
    #put_code(res, language='python')
    put_text(eval(res))


if __name__ == '__main__':
    start_server(main, port=8080, debug=True, cdn=False)

[wang0618]

use the "value" parameter of the textarea() to set the initial value the the text area

[alexhallam]

Another question I have is that eval() seems to only take in simple statements. I just tried doing a simple import and it failed. What would you recommend for the following text input.

import numpy as np
np.array([1,2,3,4,5])

[wang0618]

exec() can be used to execute multiline code, but the return value of exec() is None. So if you want to show the result of the code, you need output your result in your code:

from pywebio import start_server
from pywebio.output import *
from pywebio.session import *
from pywebio.input import *
from contextlib import redirect_stdout
import io


def main():
    """Execute Code"""
    code = textarea('Your Python Code', code={
        'mode': "python",
        'theme': 'darcula'
    }, value='print("hello world")')
    
    f = io.StringIO()
    try:
        with redirect_stdout(f):
            exec(code)  # https://docs.python.org/3/library/functions.html#exec
    except Exception as e:
        put_error('Exception occurred: "%s:%s"' % (type(e).__name__, e))

    stdout = f.getvalue()
    put_code(stdout)


if __name__ == '__main__':
    start_server(main, port=8080, debug=True)

In this sample, you can output stuff by using print() or pywebio's output functions.

[wang0618]

Here is a version that supports live output:

from pywebio import start_server
from pywebio.output import *
from pywebio.session import *
from pywebio.input import *
from contextlib import redirect_stdout
import io

test_code = """
import time
for i in range(10):
    print(i)
    time.sleep(0.5)
"""
def main():
    """Execute Code"""
    out = output()
    put_scrollable(out)

    class WebOutput(io.IOBase):
        def write(self, bytes):
            out.append(put_text(bytes, inline=True))

    code = textarea('Your Python Code', code={
        'mode': "python",
        'theme': 'darcula'
    }, value=test_code)

    try:
        with redirect_stdout(WebOutput()):
            exec(code)  # https://docs.python.org/3/library/functions.html#exec
    except Exception as e:
        put_error('Exception occurred: "%s:%s"' % (type(e).__name__, e))



if __name__ == '__main__':
    start_server(main, port=8080, debug=True)

[alexhallam]

Thanks for this!

[helincao]

It's a bit off topic: congrats @alexhallam on getting your TV project on the HN frontpage!

[alexhallam]

lol. Thanks @helincao. You are very kind. I was not expecting that.