Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show the focus and hover states in components #73

Open
Dawoodoz opened this issue May 12, 2023 · 4 comments
Open

Show the focus and hover states in components #73

Dawoodoz opened this issue May 12, 2023 · 4 comments
Labels
enhancement New feature or request

Comments

@Dawoodoz
Copy link
Owner

Dawoodoz commented May 12, 2023

There are now state flags for direct and indirect hovering over components, which has both getters and state update notifications. There is however no integration with how components are rendered using the information, which needs to be done do that the interface gives instant feedback on which component would respond if clicked.

One can display hover using:

  • More permutations of pre-generated images
    - Wasting memory exponentially
    - Limited to a single layer
  • Scale a silhouette image to draw on top when needed
    + Memory efficient
    - Only glowing hover styles allowed
    - Slow to render
    - Complicated to generate non-standard formats from the MediaMachine
  • Draw an alpha filtered image on top
    + Somewhat flexible in which styles to choose
    - Can get RGBA image from the MediaMachine
    - Even slower to render
  • A single image that is regenerated when state changes a property used as input for the method, just like when it is resized
    + Uses less memory
    + Full control over the background
    + Simpler code by getting a reusable state bit mask from input arguments in the theme and assigning the state directly by asking the component when detecting the arguments
    + Can be scaled up to handle 288 permutations at no extra cost (enabled/disabled, locked/writable, pressed/lifted, selected/not, checked/not, direct/indirect/no focus, direct/indirect/no hover)
    + Flexibility to add any state for any component in the theme without changing code in the component

The menu expansion might also want to display that a menu is opened using something else than a hardcoded color change. An "enabled" property might be okay to implement using only color changes, because it is rarely used.

@Dawoodoz Dawoodoz added the enhancement New feature or request label May 12, 2023
@Dawoodoz Dawoodoz changed the title Show the hover state in components Show the focus and hover states in components May 23, 2023
@Dawoodoz
Copy link
Owner Author

To generate all combinations without having to draw an exponential number of images by hand, the media machine needs conditional jumps to make some draw operations optional.

@Dawoodoz
Copy link
Owner Author

Dawoodoz commented Dec 3, 2023

Menus now have focus and hover effects.
#94

@Dawoodoz
Copy link
Owner Author

If adding hover effects for buttons, it will look strange without reacting to leave events, because the cursor may go from hovering a button along the side to going outside, leaving the button in a hovering state when the mouse is outside. Implementing enter and leave events would however further complicate integration and testing on each platform where mouse input is used. Having enter and leave events optional would leave applications that depend on them broken. Maybe just implement leave without enter in the back-end and detect enter events automatically in DsrWindow on the first move event after leave.

@Dawoodoz
Copy link
Owner Author

Dawoodoz commented Jul 27, 2024

Focus for components might also need events for getting and losing window focus. One would need to implement both focus events because a window can be activated without interacting with the canvas, but it could be entirely optional to implement by simply telling components not to show focus when not supported. When textboxes are used however, it is a helpful cue to know when you can type into something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant