Localized Zoom (in web application)

[saona-raimundo]

Is your feature request related to a problem?

I would like to be able to zoom into the application: increasing the size of all elements proportionally while the gui stays the same.

Describe the solution you'd like
Web pages can be zoomed in without changing the layout of the page. I would like the same behaviour in egui.

Describe alternatives you've considered
I first thought of reacting to zoom requests by changing the font size of all types at the same time... but that does not solve the issue as there might be other elements (for example images) in the app.

I imagine that the solution may involve the draw textured triangles engine (which I have no clue about). Together with introducing "top-level" scrolls (vertical and horizontal scrolls outside the gui).

Additional context

This is particularly useful on small screen devices.

egui allows to code complex applications... but using these in a mobile phone is a bit tricky as you can not "travel" across the screen to different windows: it is like if you HAVE to see the whole application all the time.

This is also a problem for big-screen devices. In the online demo, you can easily make some parts of the app inaccessible by increasing the font size (steps to reproduce: go to the online demo->Backend->Settings->Fonts->Set Body to max). Allowing all windows to scroll is not a solution, as it changes the gui.

This might be related to accessibility issue #167
There was some previous question in #261

For example, while doing this issue, i can zoom in the website and everything changes proportionally.

Normal mode

After zooming in

Note the relationship of the element within the webpage did not change, but the relationship with the time (from Windows, outside the page) did change. Also, top-level scrolls were introduced.

[saona-raimundo]

Note that simply controlling pixels_per_point is not a solution: when pixels_per_point is increased too much,

1. Windows get re-arranged
2. Panels are superposed
3. Even if the whole app is located in a ScrollArea, scrolling will not get activated.

[emilk]

So you want to be able to e.g. pinch-to-zoom and just zoom in like you can on most web sites.

If you visit https://emilk.github.io/egui/ on a big-screen device you can actually pich-to-zoom outside the egui canvas and get the effect you want. The problem is that any pinching inside the egui canvas is swallowed by egui, and so the browser doesn't zoom. The reason is that some egui widgets (like the plot) wants to listen for zoom events (you want to pinch-to-zoom a egui plot, not the whole egui application).

The solution is to have egui_web only swallow the zoom events if there is an egui widget underneath that is interested in the zoom event, but otherwise (normally) pass them on to the web browser.

One way to approach this is to add an egui::Sense for zoom (and perhaps also for scroll) so that egui can tell if a widget is interested in it (and report to egui_web).

[saona-raimundo]

Thank you for the answer!

I think both your solution and approach sound just perfect!

One way to approach this is to add an egui::Sense for zoom (and perhaps also for scroll) so that egui can tell if a widget is interested in it (and report to egui_web).

I would add that Panels and Window should also have a sense method :) (if I understand correctly, they are not a "widget").