How to access contents of textarea without terminating it.

[jonschull]

I'm trying to use code mirror as a real-time driver for visualizations.
(The interface would be very much like flowchart.fun .)

I can keep codemirror alive using threads (see below)

But i don't know how to get the codeMirror's contents while it's alive.
(I'd also like to to override the Submit and Rest buttons.)

This may be the wrong approach, but here's where I'm at.

from pywebio.input import *
from pywebio.output import *
from pywebio.session import *
import pywebio
import threading

def show_editor():
        editor = textarea('Text area', code={
        'mode': "null",
        'theme': 'darcula'
        })
        put_code(editor, language='python')
        print(editor)

t = threading.Thread(target=show_editor)
register_thread(t)
t.start()  # editor in background
put_text('Background task started.')

Thanks for your work!

[wang0618]

One of the basic design of PyWebIO is that the input functions is blocking. Once the form is submitted, the input function returns. You cann't get the input value before it be submitted, and you cann't keep the input form alive after submission.

But there is workaround to meet your need: Put textarea and subsequent operations into a while loop.
Like this:

from pywebio.input import *
from pywebio.output import *

code = ''
while True:
    code = textarea('Text area', code={
        'mode': "null",
        'theme': 'darcula'
    }, value=code)

    # some operations with `code`
    put_text(len(code))

PS: One piece of PyWebIO app development advice is: when you encounter a problem, think about what you would do if you were writing a terminal program. Because the input/output behavior of PyWebIO is consistent with the terminal program. That’s why the slogan of PyWebIO is "write interactive web app in script way".

[jonschull]

That is a very clever workaround, thank you. I'd never have thought of it!

However, I was aiming for ongoing access to the changing value.

CodeMirror's API does have a getValue() method.
In my threaded version, the CodeMirror instance is alive.
Could I perhaps do eval_js('xxinstance.getValue()' ) on the CodeMirror instance?
Do you know how I could get access to the xxinstance in the thread?

Or, is it possible to interrogate the DOM of the browser, either with python or with eval_js?

(I understand this may be out of scope, but thanks in for your speedy insights!)

[wang0618]

I think this will work for you.

import time

from pywebio import start_server
from pywebio.output import *
from pywebio.session import *


def main():
    set_env(output_animation=False)

    # preload theme
    run_js("""$("head").append('<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/darcula.min.css">')""")

    put_html('<textarea id="my-code"  rows="20" ></textarea>')
    run_js("""
    window.code_mirror = CodeMirror.fromTextArea(document.getElementById('my-code'), config);
    if (config.mode) CodeMirror.autoLoadMode(window.code_mirror, config.mode);
    """, config={
        'mode': 'python',
        'theme': 'darcula',
        'lineNumbers': True
    })

    put_markdown('----')
    while True:
        code = eval_js("window.code_mirror.getValue()")
        with use_scope('code', clear=True):
            put_code(code)
        time.sleep(1)


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

[jonschull]

Indeed! Just what I was looking for. Thanks again!

[wang0618]

Now, you can use the new feature pin to make persistent input in version 1.3. See https://pywebio.readthedocs.io/en/latest/pin.html