How to display displayables on hover with a timer? [SOLVED]

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
TLK
Newbie
Posts: 14
Joined: Fri Aug 19, 2022 11:05 am
Contact:

How to display displayables on hover with a timer? [SOLVED]

#1 Post by TLK »

Hi, I'm trying to work out this UI for a small project. Part of the UI. Which currently only includes a minimap. But my goal is to make it hoverable instead of making it clickable. Which, yes I know and assume that might work for PCs/Desktops and not for smartphones in case I ever port it to there.

I know clickable actions are easier than the hoverable ones. What I can't figure out is how to make the UI still visible even after I unhover from it.

Basically, this is what I am going for.

1) Show a displayable (top left corner of the screen), indicating the current location I am in. When hovered, it should show other displayables to the side, showing the available exits from that particular location.
2) When I unhover, I need it to keep the other displayables still visible on the screen, so I could choose them. For a certain amount of time, let's say 30s after which it should hide automatically. If I don't, then I won't have any time to click on the other displayables and they simply vanish instantly on unhover.
3) When I hover back on the other displayables, I need the timer to reset (or pause, though reset seems more optimal). If I don't make it so, the displayables simply vanish even when I am hovering over them.
4) When another of the displayable is selected, it needs to update the first displayable, indicating that the room has changed.

This is the idea I am going for. Since I can't get the hovering items to stay on the screen long after I unhover from the displayable, I can't select the other entries at all. This is what I have so far. It's not even doing half the things (or the last thing at the moment currently)

Something of that sort. I know it's all crude atm, I am new to renpy and, haven't coded for a long while as well, much less in python much.

Now someone on discord [Jse] mentioned to use nearrect with Focus screen actions. I am still to read on it, but on first glances the idea of drop down seems very plausible. Which is, kind of or sort of akin to what I am going for only through hovering not clicking, though I guess that's usually the idea with minimaps of this style.

EDIT: My updated code after Feniks/Shawna and hm, HB38, and others I can't recall atm helped me out with it.

Code: Select all

default mm_cli = False # minimap click used
default mm_clia = False # minimap alternate click activated
default mm_sco = False  # minimap opened by alternate click

screen MapTest():
    text "Just Testing"

    hbox xoffset 65 yoffset 65 spacing 20:
        if current_location == "StartRoom":
            imagebutton:
                idle "mapicons/StartRoom_Mini.png"
                hovered SetVariable("mm_sco", False), Show("MapTestEx", mm_loc = 1, cli_hov = False)
                action SetVariable("mm_cli", True), SetVariable("mm_clia", False), Hide("MapTestEx"), Jump("StartRoom")

                if mm_clia:
                    alternate SetVariable("mm_clia", False), SetVariable("mm_sco", True), Hide("MapTestEx")
                else:
                    alternate SetVariable("mm_clia", True), SetVariable("mm_sco", False)

                if mm_cli:
                    unhovered SetVariable("mm_cli", False)
                elif mm_clia:
                    unhovered Return(None)
                elif mm_sco == False:
                    unhovered Show("MapTestEx", mm_loc = 1, cli_hov = True)
					
					
screen MapTestEx(mm_loc = 0 , cli_hov = False):

    hbox xoffset 193 yoffset 65:
        if mm_loc == 1:
            imagebutton:
                idle "mapicons/Corridor1_Mini.png"
                action SetVariable("current_location", "Corridor1"), Hide("MapTestEx"), Jump("Corridor1")
                alternate SetVariable("mm_clia", False), Hide("MapTestEx")

    if cli_hov:
        timer 3.0 action Hide("MapTestEx")

So it does a couple of things, along with the hovering UI I wanted as well.
In screen MapTest, it shows the current location of the player. Now, hovering on it displays the exits from that room, which is the second screen, MapTestEx.
If I left clicked on MapTest, it says the current location of the player, simultaneously hiding MapTestEx.
If I right clicked on MapTest, it makes MapTestEx visible permanently and doesn't hide it on unhover. Whereas, if I don't do that, it'll hide MapTestEx after 3 seconds. In the prior case, I can hover back again, and right click on it to hide MapTestEx once more.
When it is permanently visible, it can only be hidden back right clicking on either MapTest, or MapTestEx.

If I left clicked on MapTestEx, it'll change the current location while simultaneously hiding MapTestEx. MapTest now shows the new updated location, and MapTestEx will show the exits from that room next.
If I right clicked on MapTestEx, it'll hide MapTestEx.
Last edited by TLK on Sun Aug 21, 2022 9:06 am, edited 2 times in total.

nananame
Regular
Posts: 72
Joined: Fri Oct 13, 2017 1:40 pm
Contact:

Re: How to display displayables on hover with a timer?

#2 Post by nananame »

I think you're complicating it.

1 - you want the exits to show up once you hover over the minimap.
You got that part solved with "hovered".
You need to add "unhovered" as well - the action for that would be to set the timer to 30 seconds. That way, whenever you hover over the minimap, the exits are shown and the timer is shut down, and whenever you unhover, the timer is set to 30.

2 - simply apply the same logic to each exit button. Hovering them shuts down the timer, unhovering sets it to 30.

If you're wondering how to set the timer, there are MANY ways to go about it.
You could use a function or keep it very simple in renpy by having a thirds screen, called timer. This screen needs to include a timer that lasts 30 seconds and the action is to hide the exits.
So now what you do is, when you unhover the minimap or the exit buttons, you SHOW the timer screen (essentially starting the timer from 30), and when you hover the minimap or exit buttons, you simply HIDE the timer screen (effectively shutting the timer down).

As I said, there are many ways to do this

TLK
Newbie
Posts: 14
Joined: Fri Aug 19, 2022 11:05 am
Contact:

Re: How to display displayables on hover with a timer?

#3 Post by TLK »

@nananame That does the trick. Thanks. Now I'm here trying to do something more.
Okay, I have currently 2 locations only (just for keeping it simple). So there's StartRoom and Corridor1, which shows respective displayables.

Now at the start, it shows StartRoom and it's displayable. When I hover, it shows the imagebutton for Corridor1. Now if I take my mouse off StartRoom, it keeps the Corridor1 visible for 10 seconds, then hides it. All good.
When I click on Corridor1, it changes to Corridor1 and then switches the 1st displayable to Corridor1. But it still shows the displayable for Corridor1 side by side to it. I think I have a part to hide it but idk why it's not working. Then if I wait 10s it'll hide the second displayable by then.

If during that time, or after it hides even, now I hover over the Corridor1 displayable, then it shows the displayable for StartRoom just fine.

How do I get it to hide when I click on either StartRoom or Corridor displayable?
I forgot to mention, StartRoom displayable by default is supposed to do something on click as well. So once it does that, I wanted it to stop the hover event even if the mouse was still on it. Is that kind of logic possible?


EDIT: Bad Code, removed it because the logics were flawed.
Last edited by TLK on Sun Aug 21, 2022 9:07 am, edited 1 time in total.

TLK
Newbie
Posts: 14
Joined: Fri Aug 19, 2022 11:05 am
Contact:

Re: How to display displayables on hover with a timer?

#4 Post by TLK »

Hi, I kind of dropped the idea for hovering and stuck to clicking, since in case I ever ported the game to android I'd eventually have to make it clickable, for smartphones at least. Sorry for that, and thanks for helping.

TLK
Newbie
Posts: 14
Joined: Fri Aug 19, 2022 11:05 am
Contact:

Re: How to display displayables on hover with a timer?

#5 Post by TLK »

nananame wrote: Fri Aug 19, 2022 12:42 pm So now what you do is, when you unhover the minimap or the exit buttons, you SHOW the timer screen (essentially starting the timer from 30), and when you hover the minimap or exit buttons, you simply HIDE the timer screen (effectively shutting the timer down).

As I said, there are many ways to do this
Okay, with the help of Feniks (FeniksDev/Shawna) and others from discord I actually got it together. So thanks a lot and I'll put up the code up here. And @naname, you were right as well. (Idk how to mention someone on this site, hence have to quote, jic)

My previous attempt had flawed logic and I didn't understand the importance of the order of the actions hence it wasn't working earlier. It took me a bit to realize that and correct upon it. I'll update the code that I finally managed to work out.

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot]