Adoniyas7 commented 1 year ago

I am submitting this pull request to propose a new feature for Tkinter-Designer, which is a Button Hover effect. The way it works is very simple. I have added a new element named ButtonHover and a class with the same name to convert the the element into a button with a hover effect.

How does the code work

The main class that generates the code for the hover effect is called ButtonHover. The ButtonHover class is designed to generate code for creating a hover effect on a button. It takes in three parameters: a node, a frame, and an image_path. The node and frame parameters specify the position of the button on the canvas, while the image_path parameter specifies the path to the image that will be displayed when the button is hovered over.

To create the hover effect, the ButtonHover class needs to know the id of the original button element that it is associated with. This is because the hover effect code needs to be bound to the original button's events. To get the id, the ButtonHover class checks whether the (x, y) position of the button is present in a psition_id_map dictionary. The psition_id_map dictionary maps the position of each button on the canvas to a unique id.

If the (x, y) position of the button is present in the psition_id_map, the ButtonHover class generates the code required to create the hover effect. The code first creates a PhotoImage object using the imagepath parameter. Then, it defines two functions: `button{id}hoverandbutton{id}_leave. The{id}in the function names is the id of the original button that theButtonHover` class is associated with.

The button_{id}_hover function is bound to the event of the original button. This event is triggered when the mouse cursor enters the button's area. When the event is triggered, the function changes the image of the original button to the image specified by the ButtonHover class.

The button_{id}_leave function is bound to the event of the original button. This event is triggered when the mouse cursor leaves the button's area. When the event is triggered, the function changes the image of the original button back to its original image.

Finally, the ButtonHover class returns the generated code as a string. This code can then be used to create the hover effect on the original button.

How to create a button hover effect

Duplicate the Button you created following the instruction on the readme
- You can duplicate the Button by selecting the button group and pressing CTRL/⌘ + D
  - Rename the duplicate button to "ButtonHover"
  - Place the duplicate button above the original button
  - Make sure it's on the same position as the original button
- x and y coordinates should be the same
  - Make changes to the duplicate button for the hover effect
- For example, change the color of the button

I have added this instructions on the instructions.md file. I hope you find it useful. Thank you for considering my pull request.

Here is a video tutorial

https://watch.screencastify.com/v/saDGrNayjwSmxbFbShB1

316

MertEfe13 commented 1 year ago

i've been looking for this feature. its so important it should be added

Adoniyas7 commented 1 year ago

It's better if you add a video on how to add the button hover effect.

Thank you for the suggestion! I appreciate your feedback. I will definitely add a video tutorial on how to add the button hover effect to make it easier for everyone to follow along.

Adoniyas7 commented 1 year ago

It's better if you add a video on how to add the button hover effect.

I have created a simple and short video tutorial on how to add button hover effect. You can check it out with this link: https://watch.screencastify.com/v/saDGrNayjwSmxbFbShB1

Let me know if you have any questions!

ok-coder1 commented 1 year ago

You can add #### Refer to [this video](https://watch.screencastify.com/v/saDGrNayjwSmxbFbShB1) if you face any problem under

9. **Button with Hover Effect**
   - Duplicate the Button you created in the previous step
     - You can duplicate the Button by selecting the button group and pressing <kbd>CTRL/&#8984; + D</kbd>
   - Rename the duplicate button to "ButtonHover"
   - Place the duplicate button above the original button
   - Make sure it's on the same position as the original button
     - x and y coordinates should be the same
   - Make changes to the duplicate button for the hover effect
     - For example, change the color

Adoniyas7 commented 1 year ago

You can add #### Refer to [this video](https://watch.screencastify.com/v/saDGrNayjwSmxbFbShB1) if you face any problem under

9. **Button with Hover Effect**
- Duplicate the Button you created in the previous step
  - You can duplicate the Button by selecting the button group and pressing <kbd>CTRL/&#8984; + D</kbd>
- Rename the duplicate button to "ButtonHover"
- Place the duplicate button above the original button
- Make sure it's on the same position as the original button
  - x and y coordinates should be the same
- Make changes to the duplicate button for the hover effect
  - For example, change the color

Thank you! I have added it to the README.

ParthJadhav commented 1 year ago

Hey @Adoniyas7 , That's very good work! Thank you for working on this feature. Although i'm not sure about the complexity it adds to the process.

Can you add EXPERIMENTAL Labels to the mentions of Button_Hover so it becomes clear that it's an early feature.

Adoniyas7 commented 1 year ago

Hey @Adoniyas7 , That's very good work! Thank you for working on this feature. Although i'm not sure about the complexity it adds to the process.

Can you add EXPERIMENTAL Labels to the mentions of Button_Hover so it becomes clear that it's an early feature.

Hi @ParthJadhav ,

Thank you for your feedback! I'm glad you like the work I've done on the Button_Hover feature. I understand your concern about the complexity it adds to the process. I've added EXPERIMENTAL labels to the mentions of Button_Hover so it becomes clear that it's an early feature.

I'm happy to answer any questions you have about the feature or the code. I'm also open to suggestions for how to improve it.

Thank you again for your feedback!

raja2505 commented 1 year ago

WOW! https://drive.google.com/file/d/1XUyzRymbE3ypBIOxsvNFGmLuRuZ7w-ZC/view?usp=drive_link

ok-coder1 commented 11 months ago

To the people who have write access, can anybody merge this to ParthJadhav:master

raja2505 commented 11 months ago

Hey @Adoniyas7 , That's very good work! Thank you for working on this feature. Although i'm not sure about the complexity it adds to the process. Can you add EXPERIMENTAL Labels to the mentions of Button_Hover so it becomes clear that it's an early feature.

Hi @ParthJadhav ,

Thank you for your feedback! I'm glad you like the work I've done on the Button_Hover feature. I understand your concern about the complexity it adds to the process. I've added EXPERIMENTAL labels to the mentions of Button_Hover so it becomes clear that it's an early feature.

I'm happy to answer any questions you have about the feature or the code. I'm also open to suggestions for how to improve it.

Thank you again for your feedback!

Radio button with the same effect??

Just by

changing the command to set a intvariable
disable the hover leave effect if not the intvariable is the index of the buttton
initialization by the group like Button Radio1, Button Radio2,ButtonHover Radio1,ButtonHover Radio2 etc. so whatever named Radio1 will behave like a group. See the below example

Example.zip

https://github.com/ParthJadhav/Tkinter-Designer/assets/124249760/32e5f33f-491d-47bb-9e73-c28a3e88a863

ok-coder1 commented 8 months ago

@ParthJadhav You should probably think about merging this PR.

ParthJadhav commented 6 months ago

Thanks for the changes @Adoniyas7 !

ParthJadhav / Tkinter-Designer

Added Button hover effect #317

How does the code work

How to create a button hover effect

Here is a video tutorial

316