automatic scroll down in text widget (write only) about remi HOT 9 OPEN

Thank you @dddomodossola I'll give it a try

from remi.

to automatically scroll down an element you'll have to use JS, see an example below:

def add_new_message(self, message):

        # here is the code to add a new message to the text widget
        self.console.append(gui.Label(message))

        # JS code to scroll down the text widget
        self.execute_javascript("document.getElementById('customid').scrollTop = document.getElementById('customid').scrollHeight")

notice in the code above that self is a reference to your Remi App and you should change the 'customid' of the JS code to the HTML id of the text widget element on the page

from remi.

would like to ask @dddomodossola for a little help

I am working on an app that shows a little console to output info to the user. After inserting the message the the element is scrolled down using JS code, but after scrolling down it goes back up automatically.

should this really be happening? I'll paste a code here to show this behavior:

import time
from threading import Thread

import remi.gui as gui
from remi import start, App

class MyApp(App):
    def main(self):
        self.btn = gui.Button('Start message thread')
        self.btn.onclick.do(self.on_click)
        self.console = gui.Container(style={'width': '90%', 'height': '100px', 'background-color': 'block', 'overflow': 'hidden', 'border': '1px solid cyan', 'scroll-y': 'auto', 'overflow-y': 'scroll' })
        self.console.attributes['id'] = 'customid'
        self.container = gui.Container()
        self.container.append([self.btn, self.console])
        self.container.Autoscroll = False
        return self.container

    def on_click(self, widget):
        Thread(target=self.message_thread).start()
        pass

    def message_thread(self):
        for i in range(20):
            time.sleep(0.5)
            self.add_new_message(f'this is message #{i+1}')

    def add_new_message(self, message):
        self.console.append(gui.Label(message))
        self.execute_javascript("document.getElementById('customid').scrollTop = document.getElementById('customid').scrollHeight")

if __name__ == "__main__":
    start(MyApp)

from remi.

Hello @tuliomgui and @WAvdBeek ,

The code above is fine, it appends elements to a container and gets scrolled down by javascript. The problem is that remi updates the interface asyncronously, and so the scrollTop gets lost once the element is updated.
To prevent it, you can force the update to be performed directly, not asyncronously. To do so just set update_interval parameter to zero.

if __name__ == "__main__":
    start(MyApp, update_interval=0)

And the code above should now work fine. BUT, my advice is to not to work this way. I suggest to PRE-pend text to a TextInput instead of appending elements. This way, you will not need to scroll nothing, the latest log id always on top.

Kind Regards,
Davide

from remi.

Thanks!
I have it working now!

from remi.

is it possible to append text to a text widget?

from remi.

try using the TextInput widget and use get_text() and set_text(text))

you can check the docs here

from remi.

Yes, that is what I am doing now, but I would be better to have a call between the server and client to append text only, e.g sending only the text to be added.

from remi.

Hello @WAvdBeek ,

why do you want to append text directly by websocket? Although this could be possible, I suggest you to use the method proposed by @tuliomgui . It doesn't cost more in terms of efficiency.
However here is an example that fit your request:

import remi.gui as gui
from remi import start, App
import time


class MyApp(App):
    def main(self):
        # creating a container VBox type, vertical (you can use also HBox or Widget)
        main_container = gui.VBox(width=300, style={'margin': '0px auto'})

        bt_log = gui.Button("Append log")
        bt_log.onclick.do(self.on_btlog_click)
        main_container.append(bt_log)

        self.txt_log = gui.TextInput(single_line=False, width = "100%", height = 150)
        main_container.append(self.txt_log)

        # returning the root widget
        return main_container

    def on_btlog_click(self, emitter):
        log_message = str(time.time()) + " - a message example"

        self.execute_javascript(f"""element = document.getElementById("{self.txt_log.identifier}");
            element.textContent = "{log_message}" + "\\n" + element.textContent;""")


if __name__ == "__main__":
    start(MyApp, address='0.0.0.0', port=0, start_browser=True)

from remi.