Compare

compare · Containers · interactive

Two things in the same rectangle, with a handle that says how much of each.

Import

#include "gbui/widgets/compare.hpp"

Example

Nothing is downloaded until you press it.

CompareResult compare(Ui& ui, const Interaction& input, std::string_view id, float position, const std::function<void(Ui&)>& before, const std::function<void(Ui&)>& after, const CompareOptions& options = {});

Draws before under after, with after revealed from the leading edge up to position. Both callbacks are built at the full size of the box and both are built every frame — that is what makes the two comparable, and it is also why they should be cheap: this is a picture against a picture, not two dashboards.

API

CompareOptions

Option	Type	Default	What it does
orientation	CompareOrientation Horizontal · Vertical	CompareOrientation::Horizontal	Which way the seam travels. Horizontal for two pictures, vertical for two things read top to bottom — a chart against its own baseline.
slideOnHover	bool	false	The handle follows the pointer without anything being pressed. Off, because a comparison is something a reader sets and then looks at, and a seam that moves whenever the pointer crosses the picture cannot be left anywhere. On for a gallery of thumbnails where the gesture is the whole interaction and there is nothing to leave it at.
handleWidth	float	3.0f	How wide the bar down the seam is. The grip on it is drawn from this.
name	std::string_view		What is being compared — "Before and after retouching".
beforeLabel	std::string_view		What each side is. Announced with the value, because "60 percent" says nothing on its own: sixty percent of what, revealing what. A reader who cannot see either picture has only these two words to tell them which way the handle is moving them.
afterLabel	std::string_view		As above, for the side the handle reveals — and the one the value is announced in terms of, since that is the one moving.
height	float	240.0f
width	float	kAuto
grow	float	0.0f