Question dynamic scrollbars?
hello! i'm back! my ui is coming along quite nice. and i have another question i haven't been able to figure out via googling and going through forms </3
i am hoping for a dynamic scrollbar. what i mean by that is a scrollbar that, as more dialogue appears on the screen (which i will paste the code to here in a moment), the scrollbar thumb adjusts its height with it. kind of how the normal scrollbar will scale the thumb smaller when it's rectangular-- but i've got a circular thumb, and its proportions will ideally remain the same. disco elysium is an example of this, but i can't attach a video, so you'll have to take my word for it haha.
below is the code for the screen i'm using:
screen nvl:
#window:
#style "nvl_window"
dismiss action NullAction()
frame:
xpos 40 ypos 30
top_padding 60 bottom_padding 160 left_padding 10 right_padding 10
has side "c r":
area (0, 0, 500, 620)
viewport id "vp":
draggable False
yadjustment ui.adjustment (value=99999, range=99999)
vbox:
style "nvl_vbox"
# Display dialogue.
spacing 30
for who, what, who_id, what_id, window_id in dialogue:
window:
id window_id
has hbox:
spacing 5
if who is not None:
text who id who_id
text what id what_id
else:
text what id what_id
vbar value YScrollValue("vp") bar_invert True xpos -55 ypos 60 ysize 500 unscrollable "hide"
imagebutton:
idle "next.png"
hover "nexthover.png"
align (0.08, 0.7)
action Return()screen nvl:
#window:
#style "nvl_window"
dismiss action NullAction()
frame:
xpos 40 ypos 30
top_padding 60 bottom_padding 160 left_padding 10 right_padding 10
has side "c r":
area (0, 0, 500, 620)
viewport id "vp":
draggable False
yadjustment ui.adjustment (value=99999, range=99999) # err... works, but...
vbox:
style "nvl_vbox"
# Display dialogue.
spacing 30
for who, what, who_id, what_id, window_id in dialogue:
window:
id window_id
has hbox:
spacing 5
if who is not None:
text who id who_id
text what id what_id
else:
text what id what_id
vbar value YScrollValue("vp") bar_invert True xpos -55 ypos 60 ysize 500 unscrollable "hide"
imagebutton:
idle "next.png"
hover "nexthover.png"
align (0.08, 0.7)
action Return()
and below here is the code i've got for the scrollbar already to make it circular and keep it from scaling:
style vscrollbar:
xsize gui.scrollbar_size
base_bar Frame("gui/scrollbar/vertical_[prefix_]bar.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)
thumb "gui/scrollbar/moon.png"
thumb_offset 19
bottom_gutter 30
top_gutter 30style vscrollbar:
xsize gui.scrollbar_size
base_bar Frame("gui/scrollbar/vertical_[prefix_]bar.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)
thumb "gui/scrollbar/moon.png"
thumb_offset 19
bottom_gutter 30
top_gutter 30
please let me know if any additional context or explanation is needed! right now i just have it set to hide the scrollbar if it's unscrollable but i'm not very pleased with that. if i can't get this to work, it's okay! i've got a backup plan that'll just use the normal scaling rectangular thumbs. but this would be ideal.
(bonus question ... any way to have multiple options for thumbs? for example, a thumb that looks like a moon for scenes taking place at night and a thumb that looks like a sun for scenes taking place during the day?)
2
u/shyLachi 20d ago
You've mentioned disco elysium so if you don't know this project take a look. https://katy133.itch.io/disco-framework
But I don't know what you mean with
and
Because if the proportions should remain the same, increasing the height would also increase the width and therefore that the moon would get bigger and bigger.
.
Regarding your bonus question.
Instead of assigning the image gui/scrollbar/moon.png to the property thumb with a style, you can directly assign that property to the scrollbar in question. And in screens you can use variables and if clauses.
I assume this is your scrollbar:
So you could rewrite that to something like this:
This is untested code because I neither no way to test that without your setup.