Button

The ControlButtonBase plugin is a customizable user interface component derived from ControlBase, designed to represent and manage the behavior of button control. It supports adding and configuring visual elements for different button states using CanvasElement objects.

The class includes callback mechanisms for state, pressed, released, and clicked events, enabling responsive interaction handling.

note

This control is primarily intended for managing user interactions in SVG-based interfaces.

#include <interface/button/include/TellusimControlButton.h>

Example

The following example creates a styled button with dynamic state feedback:

// create text
CanvasText text = CanvasText(canvas, String::format("Button %X");
text.setFontName(root.getFontName());
text.setFontStyle(root.getFontStyle());
text.getFontStyle().scale = 200;
text.getFontStyle().size = 24;
text.setPosition(Vector3f(-text.getRect().getCenter(), 0.0f));

// create normal rect
CanvasRect normal_rect = CanvasRect(canvas);
normal_rect.setMode(CanvasElement::ModeGradient);
normal_rect.setStrokeStyle(StrokeStyle(2.0f, 0.0f, Color::black));
normal_rect.setGradientStyle(GradientStyle(1.5f, Vector2f(0.0f, 1.0f), Color::gray, Color::black));
normal_rect.setSize(128.0f, 64.0f);
normal_rect.setRadius(24.0f);

// create focused rect
CanvasRect focused_rect = CanvasRect(canvas);
focused_rect.setMode(CanvasElement::ModeGradient);
focused_rect.setStrokeStyle(StrokeStyle(4.0f, 0.0f, Color::gray));
focused_rect.setGradientStyle(GradientStyle(1.5f, Vector2f(0.0f, 1.0f), Color("#f71e46"), Color::black));
focused_rect.setSize(128.0f, 64.0f);
focused_rect.setRadius(24.0f);

// create pressed rect
CanvasRect pressed_rect = CanvasRect(canvas);
pressed_rect.setMode(CanvasElement::ModeGradient);
pressed_rect.setStrokeStyle(StrokeStyle(2.0f, 0.0f, Color::gray));
pressed_rect.setGradientStyle(GradientStyle(1.5f, Vector2f(1.0f, 0.0f), Color::gray, Color::black));
pressed_rect.setSize(128.0f, 64.0f);
pressed_rect.setRadius(24.0f);

// create button from canvas elements
auto button = makeAutoPtr(new ControlButtonBase(&grid));
button->setAlign(Control::AlignCenter | Control::AlignExpand | Control::AlignAspect);
button->setElement(Control::StateUnknown, text);
button->setElement(Control::StateNormal, normal_rect);
button->setElement(Control::StateFocused, focused_rect);
button->setElement(Control::StatePressed, pressed_rect);
button->setStateOffset(Control::StateFocused, Vector2f(-1.0f, 1.0f));
button->setStateOffset(Control::StatePressed, Vector2f(1.0f, -1.0f));
button->setStateColor(Control::StateDisabled, Color::gray);
button->setStateCallback(makeFunction([&](ControlButtonBase *button, Control::State state, CanvasText text) {
	if(state == Control::StatePressed) text.setColor(Color::gray);
	else text.setColor(Color::white);
}, nullptr, Control::StateUnknown, text));
button->setClickedCallback([](ControlButtonBase *button) {
	TS_LOG(Message, "Button clicked\n");
});