Custom themes & rasterizer

[asimaranov]

Hi! I'm trying to port the library to my e-ink reader. There are two issues I faced with

• Components are too small on 1404 * 1872 screen and I couldn't find how to enlarge it.
• I haven't found any information on how themes work. I need to define my own custom theme for black-and-white screen

Feature request:
To output graphics to a device without gpu I made a simple rasterizer, that accepts Vec<ClippedShape> and draws them to framebuffer. I think it would be useful to add a native rasterizer to the crate to run it on devices without gpu

[parasyte]

When you create the egui::RawInput for your backend, there is a field you can set called pixels_per_point. You can use this value to scale the UI.

Themes are defined with egui::Visuals and Context::set_visuals() can update it. There is also a higher-level Style (which composes Visuals) that can be set with Context::set_style() instead.

[parasyte]

Did you also notice that the RawInput::screen_rect should be provided in points (not pixels)? Your rasterizer needs to scale this rect to the physical display size.

The egui-glium and egui-web backends use OpenGL to do the scaling. Here's egui-glium:

egui/egui_glium/src/painter.rs

Lines 152 to 154 in faf1042

	let (width_in_pixels, height_in_pixels) = display.get_framebuffer_dimensions();
	let width_in_points = width_in_pixels as f32 / pixels_per_point;
	let height_in_points = height_in_pixels as f32 / pixels_per_point;

egui/egui_glium/src/painter.rs

Lines 161 to 164 in faf1042

	let uniforms = uniform! {
	u_screen_size: [width_in_points, height_in_points],
	u_sampler: texture.sampled().magnify_filter(filter).wrap_function(SamplerWrapFunction::Clamp),
	};

And here's similar code in egui-web:

egui/egui_web/src/webgl2.rs

Lines 434 to 443 in faf1042

	let u_screen_size_loc = gl
	.get_uniform_location(&self.program, "u_screen_size")
	.unwrap();
	let screen_size_pixels = vec2(self.canvas.width() as f32, self.canvas.height() as f32);
	let screen_size_points = screen_size_pixels / pixels_per_point;
	gl.uniform2f(
	Some(&u_screen_size_loc),
	screen_size_points.x,
	screen_size_points.y,
	);

In both cases, the physical frame buffer size (in pixels) is transformed into a logical frame buffer size (in points; not coincidentally this should match the RawInput::screen_rect size) and the shader will use it to scale all vertex positions to the [-1, 1] range (normalized device coordinates). There's really no magic with the pixels_per_point value, other than GPUs being very efficient at scaling.

[asimaranov]

But isn't there a way to just enlarge all the component sizes? Maybe using custom theme? Out-the-box component sizes are constant?

[emilk]

You can make every font larger, and every thing in https://docs.rs/egui/0.13.1/egui/style/struct.Spacing.html bigger, but that's a bad way to go about it.

The better way it to follow @parasyte's advice. Instead of telling egui "I have a 1404x1872 screen with pixels_per_point=1" you say "I have a 702x936 screen with pixels_per_point=2".

[emilk]

Also: it would be VERY cool to see egui on a e-ink device 😍

[asimaranov]

Thanks, now it looks better