Move the position of playback button on history screen

[yoyuchi]

Bye, guys.
I made voice playback possible in the text history.
An image button for voice playback has been added, but it is located below the voice text line.
I want to move this image button right side or left side of the character name.
Where should I fix it?

Here's my history script.

Code: Select all

screen text_history:    
    tag menu 
    
    $ _window_hide()

    add "grp/parts/readback.png"
    predict False

    if not current_line and len(readback_buffer) == 0:
        $ lines_to_show = []        
    elif current_line and len(readback_buffer) == 0:
        $ lines_to_show = [current_line]        
    elif current_line and not ( ( len(readback_buffer) == 3 and current_line == readback_buffer[-2]) or current_line == readback_buffer[-1]):  
        $ lines_to_show = readback_buffer + [current_line]        
    else:
        $ lines_to_show = readback_buffer    
    $ adj = NewAdj(changed = store_yvalue, step = 300)
    
    window:
        style_group "readback"        
        side "c r":            
            frame:                
                has viewport:
                    mousewheel True
                    draggable True
                    yinitial yvalue
                    yadjustment adj

                vbox:
                    null height 10                    
                    for line in lines_to_show:                        
                        if line[0] and line[0] != " ":
                            label line[0] # name
                        # if there's no voice just log a dialogue
                        if not line[2]:
                            text line[1]
                            
                        # else, dialogue will be saved as a button of which plays voice when clicked
                        else:      
                            textbutton line[1] action Play("voice", line[2] )
                            imagebutton:
                                idle "grp/parts/voice_replay_idle.png"
                                hover "grp/parts/voice_replay_hover.png"
                                selected "grp/parts/voice_replay_selected.png"
                                selected_hover "grp/parts/voice_replay_hover2.png"
                                action Play("voice", line[2])
                        null height 10
                
            bar adjustment adj style 'vscrollbar'
        imagebutton idle "grp/parts/x_readback_idle.png" hover "grp/parts/x_readback_hover.png" xpos 1559 ypos 55 hover_sound "sound/se/se_01.ogg" action [Play("sound", "sound/se/se_03.ogg"), Return()] 
        #imagebutton idle "grp/parts/cg_back_idle.png" hover "grp/parts/cg_back_hover.png" xpos 611 ypos 555 action Return()
        #textbutton _("戻る") action Return() align (.97, .97)
        key "mouseup_3" action [Play("sound", "sound/se/se_03.ogg"), Return()]  
        key "K_ESCAPE" action [Play("sound", "sound/se/se_03.ogg"), Return()] 

init:
    $ config.keymap['viewport_wheelup'].append('K_UP')                   
    $ config.keymap['viewport_wheelup'].append('repeat_K_UP')
    $ config.keymap['viewport_wheeldown'].append('K_DOWN')
    $ config.keymap['viewport_wheeldown'].append('repeat_K_DOWN')

define gui.history_allow_tags = { "alt", "noalt" }
style history_window is empty
style history_name is gui_label
style history_name_text is gui_label_text
style history_text is gui_text
style history_label is gui_label
style history_label_text is gui_label_text

style history_window:
    xfill True
    ysize gui.history_height

style history_name:
    xpos gui.history_name_xpos
    xanchor gui.history_name_xalign
    ypos gui.history_name_ypos
    xsize gui.history_name_width

style history_name_text:
    min_width gui.history_name_width
    text_align gui.history_name_xalign

style history_text:
    xpos gui.history_text_xpos
    ypos gui.history_text_ypos
    xanchor gui.history_text_xalign
    xsize gui.history_text_width
    min_width gui.history_text_width
    text_align gui.history_text_xalign
    layout ("subtitle" if gui.history_text_xalign else "tex")

style history_label:
    xfill True

style history_label_text:
    xalign 0.5

Thank you in advance for your excellent advice.
I'll be waiting for your help.

[_ticlock_]

Code: Select all

                vbox:
                    null height 10                    
                    for line in lines_to_show:
                    
                        hbox:
                            if line[0] and line[0] != " ":
                                label line[0] # name
                            if line[2]:
                                # voice button in line with name right after name (if there's a name)
                                imagebutton:
                                    idle "grp/parts/voice_replay_idle.png"
                                    hover "grp/parts/voice_replay_hover.png"
                                    selected "grp/parts/voice_replay_selected.png"
                                    selected_hover "grp/parts/voice_replay_hover2.png"
                                    action Play("voice", line[2])
                                    
                        # if there's no voice just log a dialogue
                        if not line[2]:
                            text line[1]
                        # else, dialogue will be saved as a button of which plays voice when clicked
                        else:      
                            textbutton line[1] action Play("voice", line[2] )
                            
                        null height 10

[yoyuchi]

Code: Select all

                vbox:
                    null height 10                    
                    for line in lines_to_show:
                    
                        hbox:
                            if line[0] and line[0] != " ":
                                label line[0] # name
                            if line[2]:
                                # voice button in line with name right after name (if there's a name)
                                imagebutton:
                                    idle "grp/parts/voice_replay_idle.png"
                                    hover "grp/parts/voice_replay_hover.png"
                                    selected "grp/parts/voice_replay_selected.png"
                                    selected_hover "grp/parts/voice_replay_hover2.png"
                                    action Play("voice", line[2])
                                    
                        # if there's no voice just log a dialogue
                        if not line[2]:
                            text line[1]
                        # else, dialogue will be saved as a button of which plays voice when clicked
                        else:      
                            textbutton line[1] action Play("voice", line[2] )
                            
                        null height 10

With your help, I succeeded in moving button to the right of name. Thank you.
I think the button next to the name is too close, so I want to adjust the spacing with the name, is there any command to add?

I tried the xalign, but the gap doesn't widen.
And, how do I move the button to the left side of the name?
I'm so sorry to ask you so much, I won't forget your help.

[_ticlock_]

I think the button next to the name is too close, so I want to adjust the spacing with the name, is there any command to add?

You can use null screen to add spacing

Code: Select all

                         hbox:
                            if line[0] and line[0] != " ":
                                label line[0] # name
                                null width 10
                            
                            if line[2]:
                                # voice button in line with name right after name (if there's a name)
                                imagebutton:
                                    idle "grp/parts/voice_replay_idle.png"

[yoyuchi]

I think the button next to the name is too close, so I want to adjust the spacing with the name, is there any command to add?

You can use null screen to add spacing

Code: Select all

                         hbox:
                            if line[0] and line[0] != " ":
                                label line[0] # name
                                null width 10
                            
                            if line[2]:
                                # voice button in line with name right after name (if there's a name)
                                imagebutton:
                                    idle "grp/parts/voice_replay_idle.png"

Thanks, Thanks A lot !!
And, how do I move the button to the left side or upper side of the name?
This time, I've been very helpful in placing it on the right side, but I think I'll want to place it on the left or on the top of NAME.
I don't know how to place position of the image button right, left, and upper side based on the name position.
I'm too novice.
One last request. Please lead me just one more time.

[_ticlock_]

I don't know how to place position of the image button right, left, and upper side based on the name position.
I'm too novice.
One last request. Please lead me just one more time.

Not to discourage, but I strongly recommend to read Renpy documentation. If it is too much, just read the topics that you are working on right now, for example Screens. Not only you will find answers to your questions but also will learn other tools and functionality that you can use in your games.

Partial answer to your question:

Code: Select all

hbox:
    imagebutton … # 1st element LEFT
    label line[0]     # 2nd element Next to 1st
    null width 20   # 3rd element Next to 2nd
    imagebutton … #4th element Next to 3rd, RIGHT 

hbox horizontally position its elements
vbox - vertically

[yoyuchi]

I don't know how to place position of the image button right, left, and upper side based on the name position.
I'm too novice.
One last request. Please lead me just one more time.

Not to discourage, but I strongly recommend to read Renpy documentation. If it is too much, just read the topics that you are working on right now, for example Screens. Not only you will find answers to your questions but also will learn other tools and functionality that you can use in your games.

Partial answer to your question:

Code: Select all

hbox:
    imagebutton … # 1st element LEFT
    label line[0]     # 2nd element Next to 1st
    null width 20   # 3rd element Next to 2nd
    imagebutton … #4th element Next to 3rd, RIGHT 

hbox horizontally position its elements
vbox - vertically

Thank you very much. That was very helpful.