Comments (9)
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.
Related Issues (20)
- Blank window on standalone_app.py HOT 2
- Labels do not display the correct number of whitespace HOT 1
- [QUESTION] any example of long-polling implementation in remi? HOT 1
- Get selected text from TextInput HOT 6
- highlight of table cells in front end. HOT 1
- GenericDialog confirm by Enter key pressing HOT 1
- 2 bugs remain for python 3.10 HOT 1
- How to add a radiobox or radiogroup in remi? HOT 1
- How to insert custom HTML
- Javascript gets unloaded after remi reloads with "handshake complete" HOT 3
- Add a button that opens a link HOT 2
- Feature request: Allow setting button labels on GenericDialog
- Editor: export do not work correctlly HOT 1
- Termux Version?
- Offline Plotly HTML Integration HOT 1
- Editor directory conflicts with other packages
- [Question] How can I find all the local partitions when working with gui.FileSelectionDialog widget? HOT 3
- Race condition when building single instance App gui
- Onclick when changing tabs in TabBox HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remi.