skyler
/
egui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
egui/crates/eframe
History
Emil Ernerfeldt 0a40b16bd4
Fix blurry rendering in some browsers (#4299) 
* Closes https://github.com/emilk/egui/issues/4241

I would love some more testers of this.

I'm not sure if we really need the round-to-even code, but I'm hesitant
to out-right revert https://github.com/emilk/egui/pull/151 when I cannot
reproduce its problem. Keeping it seems quite safe though.

---
# Testing
Checkout the branch and run:

* `./scripts/start_server.sh`
* `./scripts/build_demo_web.sh` and then open
`http://localhost:8888/index.html#Rendering`
* `./scripts/build_demo_web.sh --wgpu` and then open
`http://localhost:8888/index.html#Rendering`

Check the "Rendering test" that the squares in the pixel alignment test
are perfectly sharp, like this:

<img width="576" alt="Screenshot 2024-04-01 at 13 27 20"
src="https://github.com/emilk/egui/assets/1148717/fb6c4824-9e25-4304-bc0c-3c50fbd44a52">

If it looks something like this, something is WRONG:
<img width="488" alt="Screenshot 2024-04-01 at 13 29 07"
src="https://github.com/emilk/egui/assets/1148717/04bd93ff-2108-40c5-95f6-76e3bcb9cd7f">


Please try it on different zoom levels in different browsers, and if
possible on different monitors with different native dpi scaling. Report
back the results!


### Mac
I have tested on a high-DPI Mac:
* Chromium (Brave): ✅ Can reproduce problem on `master`, and it's now
fixed
* Firefox:  ✅ Can reproduce problem on `master`, and it's now fixed
* Safari: ❌ Can't get it to work; giving up for now
 		2024-04-01 15:22:47 +02:00
..
data Set a default icon for all eframe apps: a white `e` on black background (#2996) 2023-05-17 16:23:32 +02:00
src Fix blurry rendering in some browsers (#4299) 2024-04-01 15:22:47 +02:00
CHANGELOG.md Release 0.27.1 (#4264) 2024-03-29 13:12:26 +01:00
Cargo.toml add webgpu feature by default for wgpu feature of eframe (#4124) 2024-03-04 20:20:03 +01:00
README.md Improve README.md 2024-02-05 14:11:54 +01:00

README.md

eframe: the egui framework

Latest version Documentation MIT Apache

eframe is the official framework library for writing apps using egui. The app can be compiled both to run natively (for Linux, Mac, Windows, and Android) or as a web app (using Wasm).

To get started, see the examples. To learn how to set up eframe for web and native, go to https://github.com/emilk/eframe_template/ and follow the instructions there!

There is also a tutorial video at https://www.youtube.com/watch?v=NtUkr_z7l84.

For how to use egui, see the egui docs.

eframe uses egui_glow for rendering, and on native it uses egui-winit.

To use on Linux, first run:

sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxkbcommon-dev libssl-dev

You need to either use edition = "2021", or set resolver = "2" in the [workspace] section of your to-level Cargo.toml. See this link for more info.

You can opt-in to the using egui_wgpu for rendering by enabling the wgpu feature and setting NativeOptions::renderer to Renderer::Wgpu.

To get copy-paste working on web, you need to compile with export RUSTFLAGS=--cfg=web_sys_unstable_apis.

Alternatives

eframe is not the only way to write an app using egui! You can also try egui-miniquad, bevy_egui, egui_sdl2_gl, and others.

You can also use egui_glow and winit to build your own app as demonstrated in https://github.com/emilk/egui/blob/master/crates/egui_glow/examples/pure_glow.rs.

Limitations when running egui on the web

eframe uses WebGL (via glow) and Wasm, and almost nothing else from the web tech stack. This has some benefits, but also produces some challenges and serious downsides.

  • Rendering: Getting pixel-perfect rendering right on the web is very difficult.
  • Search: you cannot search an egui web page like you would a normal web page.
  • Bringing up an on-screen keyboard on mobile: there is no JS function to do this, so eframe fakes it by adding some invisible DOM elements. It doesn't always work.
  • Mobile text editing is not as good as for a normal web app.
  • No integration with browser settings for colors and fonts.
  • Accessibility: There is an experimental screen reader for eframe, but it has to be enabled explicitly. There is no JS function to ask "Does the user want a screen reader?" (and there should probably not be such a function, due to user tracking/integrity concerns). egui supports AccessKit, but as of early 2024, AccessKit lacks a Web backend.

In many ways, eframe is trying to make the browser do something it wasn't designed to do (though there are many things browser vendors could do to improve how well libraries like egui work).

The suggested use for eframe are for web apps where performance and responsiveness are more important than accessibility and mobile text editing.

Companion crates

Not all rust crates work when compiled to Wasm, but here are some useful crates have been designed to work well both natively and as Wasm:

Name

The frame in eframe stands both for the frame in which your egui app resides and also for "framework" (eframe is a framework, egui is a library).