automatic scroll down in text widget (write only)

[WAvdBeek]

I have a text widget that I use for logging. hence each time a log entry is made this text is extended. to have it nicely working for the end user, I like to automatically scroll down. How can this be achieved?

[tuliomgui]

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

[tuliomgui]

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)

[dddomodossola]

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

[tuliomgui]

Thank you @dddomodossola I'll give it a try

[WAvdBeek]

Thanks! I have it working now!

[WAvdBeek]

is it possible to append text to a text widget?

[tuliomgui]

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

you can check the docs here

[WAvdBeek]

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.

[dddomodossola]

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)