States Class Reference

Declarative states, like CSS pseudo-classes: values a component takes while the mouse is over it or presses it, eased there and back with its transitions. More...

#include <gin_states.h>

Static Public Member Functions
static void	set (juce::Component &c, const juce::var &states)
	Sets the component's own states: an object of state name -> values, void clears.
static juce::var	get (const juce::Component &c)
	The component's own states, void if none.
static void	setForChildren (juce::Component &container, const juce::var &states)
	Sets the states of each direct child of the container, current and later ones; void clears.
static juce::var	getForChildren (const juce::Component &container)
	The states set for the container's children, void if none.
static juce::var	merge (const juce::var &states, bool hovered, bool pressed, bool disabled)
	The values of the states that apply to a component that is hovered, pressed or disabled, merged as AnimatedProperties takes them; void when none applies.

Detailed Description

Declarative states, like CSS pseudo-classes: values a component takes while the mouse is over it or presses it, eased there and back with its transitions.

JSON Format

{ "id": "card", "states": { "hover": { "scale": 1.03 }, "pressed": { "scale": 0.98, "alpha": 0.9 } } },
{ "id": "grid", "children": { "states": { "hover": { "scale": 1.05, "imageFilter": "contrast 20 brightness 10" } } },
  "transition": { "descendants": { "scale": "60 inOutQuad", "imageFilter": "150 outQuad" } } }

• "states" on an entry applies to the component itself.
• "children": { "states": ... } applies to each DIRECT child (CSS .grid > *), also children added later, e.g. tiles built at runtime. A child with its own "states" keeps those instead.
• States never inherit any further down: a tile's inner image or label doesn't get a zoom or a filter of its own on top of the tile's.
• State names: "hover" (the mouse over the component or anything inside it, so moving across the tile's content doesn't flicker), "pressed" (a mouse button down on it), "disabled" (the component disabled; while disabled, hover and pressed don't apply). Pressed values win over hover values, key by key.
• Keys: "alpha", "scale", "imageFilter", "boxShadow" (see AnimatedProperties). A key no active state sets returns to its base value: the entry's own "alpha" or "scale", else 1; the image filters' amount to 0.
• Timing per key comes from "transition" as everywhere else, "descendants" included.

A layout pass that positions a component replaces its "states" and "children" with the entry's own (none when the entry has none).

Code

The same from code, for UIs without a layout json; the layout uses these setters too:

gin::States::setForChildren (grid, juce::JSON::parse (R"({ "hover": { "scale": 1.05 }, "pressed": { "scale": 0.98 } })"));
gin::States::set (closeButton, juce::JSON::parse (R"({ "hover": { "alpha": 1 } })"));

See also

Transition, AnimatedProperties, AnimatedImageFilter

Member Function Documentation

set()

void States::set ( juce::Component & c, const juce::var & states )

static

Sets the component's own states: an object of state name -> values, void clears.

get()

juce::var States::get ( const juce::Component & c )

static

The component's own states, void if none.

setForChildren()

void States::setForChildren ( juce::Component & container, const juce::var & states )

static

Sets the states of each direct child of the container, current and later ones; void clears.

getForChildren()

juce::var States::getForChildren ( const juce::Component & container )

static

The states set for the container's children, void if none.

merge()

juce::var States::merge ( const juce::var & states, bool hovered, bool pressed, bool disabled )

static

The values of the states that apply to a component that is hovered, pressed or disabled, merged as AnimatedProperties takes them; void when none applies.

---

The documentation for this class was generated from the following file:

• gin_states.h