gui theming improvements

This commit is contained in:
Turánszki János
2022-07-29 11:05:29 +02:00
parent f277a00596
commit dc7686605f
4 changed files with 241 additions and 45 deletions
+45 -13
View File
@@ -1233,34 +1233,57 @@ void EditorComponent::Load()
enum class Theme
{
Dark,
Bright,
Soft,
Hacking,
};
themeCombo.Create("Theme: ");
themeCombo.SetTooltip("Choose a color theme...");
themeCombo.AddItem("Dark");
themeCombo.AddItem("Bright");
themeCombo.AddItem("Soft");
themeCombo.AddItem("Dark", (uint64_t)Theme::Dark);
themeCombo.AddItem("Bright", (uint64_t)Theme::Bright);
themeCombo.AddItem("Soft", (uint64_t)Theme::Soft);
themeCombo.AddItem("Hacking", (uint64_t)Theme::Hacking);
themeCombo.OnSelect([=](wi::gui::EventArgs args) {
// Dark theme defaults:
wi::Color theme_color_idle = wi::Color(100, 130, 150, 150);
wi::Color theme_color_focus = wi::Color(100, 180, 200, 200);
wi::Color dark_point = wi::Color(0, 0, 20, 200); // darker elements will lerp towards this
wi::gui::Theme theme;
theme.image.background = true;
theme.image.blendFlag = wi::enums::BLENDMODE_OPAQUE;
theme.font.color = wi::Color(160, 240, 250, 255);
theme.shadow_color = wi::Color(100, 180, 200, 100);
switch (args.iValue)
switch ((Theme)args.userdata)
{
default:
break;
case 1:
// Bright:
theme_color_idle = wi::Color(190, 200, 210, 190);
theme_color_focus = wi::Color(200, 220, 250, 230);
dark_point = wi::Color(80, 80, 90, 200);
case Theme::Bright:
theme_color_idle = wi::Color(200, 210, 220, 230);
theme_color_focus = wi::Color(210, 230, 255, 250);
dark_point = wi::Color(180, 180, 190, 230);
theme.shadow_color = wi::Color::Shadow();
theme.font.color = wi::Color(10, 10, 10, 255);
break;
case 2:
// Soft:
case Theme::Soft:
theme_color_idle = wi::Color(200, 180, 190, 190);
theme_color_focus = wi::Color(240, 190, 200, 230);
dark_point = wi::Color(70, 50, 60, 220);
dark_point = wi::Color(100, 80, 90, 220);
theme.shadow_color = wi::Color(240, 190, 200, 100);
theme.font.color = wi::Color(255, 230, 240, 255);
break;
case Theme::Hacking:
theme_color_idle = wi::Color(0, 0, 0, 255);
theme_color_focus = wi::Color(10, 230, 30, 255);
dark_point = wi::Color(0, 0, 0, 255);
theme.shadow_color = wi::Color(0, 250, 0, 200);
theme.font.color = wi::Color(100, 250, 100, 255);
theme.font.shadow_color = wi::Color::Shadow();
break;
}
@@ -1268,6 +1291,9 @@ void EditorComponent::Load()
wi::Color theme_color_deactivating = wi::Color::lerp(theme_color_focus, wi::Color::White(), 0.5f);
auto set_theme = [&](wi::gui::Window& widget) {
widget.SetTheme(theme); // set basic params to all states
// customize colors for specific states:
widget.SetColor(theme_color_idle, wi::gui::IDLE);
widget.SetColor(theme_color_focus, wi::gui::FOCUS);
widget.SetColor(theme_color_active, wi::gui::ACTIVE);
@@ -1292,6 +1318,12 @@ void EditorComponent::Load()
widget.SetColor(theme_color_active, wi::gui::WIDGET_ID_SCROLLBAR_KNOB_GRABBED);
widget.SetColor(wi::Color::lerp(theme_color_idle, dark_point, 0.8f), wi::gui::WIDGET_ID_COMBO_DROPDOWN);
if ((Theme)args.userdata == Theme::Hacking)
{
widget.SetColor(wi::Color(0, 200, 0, 255), wi::gui::WIDGET_ID_SCROLLBAR_KNOB_INACTIVE);
}
};
set_theme(optionsWnd);
set_theme(componentWindow);
@@ -1360,7 +1392,7 @@ void EditorComponent::Update(float dt)
renderPath->GetGUI().SetVisible(true);
}
GetGUI().SetVisible(true);
main->infoDisplay.active = true;
main->infoDisplay.active = infoDisplayCheckBox.GetCheck();
wi::profiler::SetEnabled(profilerEnabledCheckBox.GetCheck());
cinemaModeCheckBox.SetCheck(false);
+121 -24
View File
@@ -437,6 +437,11 @@ namespace wi::gui
state = DEACTIVATING;
tooltipTimer = 0;
}
wi::Color Widget::GetColor() const
{
return wi::Color::fromFloat4(sprites[GetState()].params.color);
}
void Widget::SetColor(wi::Color color, int id)
{
if (id < 0)
@@ -446,14 +451,14 @@ namespace wi::gui
sprites[i].params.color = color;
}
}
else if(id < arraysize(sprites))
else if (id < arraysize(sprites))
{
sprites[id].params.color = color;
}
}
wi::Color Widget::GetColor() const
void Widget::SetShadowColor(wi::Color color)
{
return wi::Color::fromFloat4(sprites[GetState()].params.color);
shadow_color = color;
}
void Widget::SetImage(wi::Resource textureResource, int id)
{
@@ -469,6 +474,22 @@ namespace wi::gui
sprites[id].textureResource = textureResource;
}
}
void Widget::SetTheme(const Theme& theme, int id)
{
if (id < 0)
{
for (int i = 0; i < arraysize(sprites); ++i)
{
theme.ApplyImageParams(sprites[i].params);
}
}
else if (id < arraysize(sprites))
{
theme.ApplyImageParams(sprites[id].params);
}
theme.ApplyFontParams(font.params);
SetShadowColor(theme.shadow_color);
}
void Widget::AttachTo(Widget* parent)
{
@@ -720,7 +741,7 @@ namespace wi::gui
// shadow:
if (shadow > 0)
{
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, wi::Color::Shadow());
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, shadow_color);
wi::image::Draw(wi::texturehelper::getWhite(), fx, cmd);
}
@@ -933,6 +954,22 @@ namespace wi::gui
}
}
}
void ScrollBar::SetTheme(const Theme& theme, int id)
{
Widget::SetTheme(theme, id);
if (id > WIDGET_ID_SCROLLBAR_BEGIN && id < WIDGET_ID_SCROLLBAR_END)
{
if (id >= WIDGET_ID_SCROLLBAR_KNOB_INACTIVE)
{
theme.ApplyImageParams(sprites_knob[id - WIDGET_ID_SCROLLBAR_KNOB_INACTIVE].params);
}
else if (id >= WIDGET_ID_SCROLLBAR_BASE_IDLE)
{
theme.ApplyImageParams(sprites[id - WIDGET_ID_SCROLLBAR_BASE_IDLE].params);
}
}
}
@@ -1027,7 +1064,7 @@ namespace wi::gui
// shadow:
if (shadow > 0)
{
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, wi::Color::Shadow());
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, shadow_color);
wi::image::Draw(wi::texturehelper::getWhite(), fx, cmd);
}
@@ -1045,6 +1082,11 @@ namespace wi::gui
Widget::SetColor(color, id);
scrollbar.SetColor(color, id);
}
void Label::SetTheme(const Theme& theme, int id)
{
Widget::SetTheme(theme, id);
scrollbar.SetTheme(theme, id);
}
@@ -1193,7 +1235,7 @@ namespace wi::gui
// shadow:
if (shadow > 0)
{
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, wi::Color::Shadow());
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, shadow_color);
wi::image::Draw(wi::texturehelper::getWhite(), fx, cmd);
}
@@ -1232,6 +1274,11 @@ namespace wi::gui
}
font_input.SetText(value_new);
}
void TextInputField::SetTheme(const Theme& theme, int id)
{
Widget::SetTheme(theme, id);
theme.ApplyFontParams(font_description.params);
}
@@ -1423,7 +1470,7 @@ namespace wi::gui
// shadow:
if (shadow > 0)
{
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + 1 + valueInputField.GetSize().x + shadow * 2, scale.y + shadow * 2, wi::Color::Shadow());
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + 1 + valueInputField.GetSize().x + shadow * 2, scale.y + shadow * 2, shadow_color);
wi::image::Draw(wi::texturehelper::getWhite(), fx, cmd);
}
@@ -1466,6 +1513,23 @@ namespace wi::gui
}
}
}
void Slider::SetTheme(const Theme& theme, int id)
{
Widget::SetTheme(theme, id);
valueInputField.SetTheme(theme, id);
if (id > WIDGET_ID_SLIDER_BEGIN && id < WIDGET_ID_SLIDER_END)
{
if (id >= WIDGET_ID_SLIDER_KNOB_IDLE)
{
theme.ApplyImageParams(sprites_knob[id - WIDGET_ID_SLIDER_KNOB_IDLE].params);
}
else if (id >= WIDGET_ID_SLIDER_BASE_IDLE)
{
theme.ApplyImageParams(sprites[id - WIDGET_ID_SLIDER_BASE_IDLE].params);
}
}
}
@@ -1480,12 +1544,6 @@ namespace wi::gui
font.params.h_align = wi::font::WIFALIGN_RIGHT;
font.params.v_align = wi::font::WIFALIGN_CENTER;
for (int i = IDLE; i < WIDGETSTATE_COUNT; ++i)
{
sprites_check[i].params = sprites[i].params;
sprites_check[i].params.color = wi::math::Lerp(sprites[i].params.color, wi::Color::White().toFloat4(), 0.8f);
}
}
void CheckBox::Update(const wi::Canvas& canvas, float dt)
{
@@ -1556,10 +1614,6 @@ namespace wi::gui
}
font.params.posY = translation.y + scale.y * 0.5f;
sprites_check[state].params.pos.x = translation.x + scale.x * 0.25f;
sprites_check[state].params.pos.y = translation.y + scale.y * 0.25f;
sprites_check[state].params.siz = XMFLOAT2(scale.x * 0.5f, scale.y * 0.5f);
}
void CheckBox::Render(const wi::Canvas& canvas, CommandList cmd) const
{
@@ -1571,7 +1625,13 @@ namespace wi::gui
// shadow:
if (shadow > 0)
{
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, wi::Color::Shadow());
wi::image::Params fx(
translation.x - shadow,
translation.y - shadow,
scale.x + shadow * 2,
scale.y + shadow * 2,
shadow_color
);
wi::image::Draw(wi::texturehelper::getWhite(), fx, cmd);
}
@@ -1585,7 +1645,14 @@ namespace wi::gui
// check
if (GetCheck())
{
sprites_check[state].Draw(cmd);
wi::image::Params params(
translation.x + scale.x * 0.25f,
translation.y + scale.y * 0.25f,
scale.x * 0.5f,
scale.y * 0.5f
);
params.color = font.params.color;
wi::image::Draw(wi::texturehelper::getWhite(), params, cmd);
}
}
@@ -1801,7 +1868,7 @@ namespace wi::gui
// shadow:
if (shadow > 0)
{
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + 1 + scale.y + shadow * 2, scale.y + shadow * 2, wi::Color::Shadow());
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + 1 + scale.y + shadow * 2, scale.y + shadow * 2, shadow_color);
wi::image::Draw(wi::texturehelper::getWhite(), fx, cmd);
}
@@ -1847,7 +1914,7 @@ namespace wi::gui
device->BindPipelineState(&gui_internal().PSO_colored, cmd);
MiscCB cb;
cb.g_xColor = sprites[ACTIVE].params.color;
cb.g_xColor = font.params.color;
XMStoreFloat4x4(&cb.g_xTransform, XMMatrixScaling(scale.y * 0.25f, scale.y * 0.25f, 1) *
XMMatrixRotationZ(drop_offset < 0 ? -XM_PIDIV2 : XM_PIDIV2) *
XMMatrixTranslation(translation.x + scale.x + 1 + scale.y * 0.5f, translation.y + scale.y * 0.5f, 0) *
@@ -2096,6 +2163,15 @@ namespace wi::gui
drop_color = color;
}
}
void ComboBox::SetTheme(const Theme& theme, int id)
{
Widget::SetTheme(theme, id);
if (id == WIDGET_ID_COMBO_DROPDOWN)
{
drop_color = wi::Color::fromFloat4(theme.image.color);
}
}
@@ -2511,7 +2587,7 @@ namespace wi::gui
scrollable_area.AttachTo(this);
scrollable_area.scissorRect = scissorRect;
scrollable_area.scissorRect.left += 1;
scrollable_area.scissorRect.top += (int32_t)control_size + 1;
scrollable_area.scissorRect.top += (int32_t)control_size;
if (scrollbar_horizontal.parent != nullptr && scrollbar_horizontal.IsScrollbarRequired())
{
scrollable_area.scissorRect.bottom -= (int32_t)control_size + 1;
@@ -2636,7 +2712,7 @@ namespace wi::gui
// shadow:
if (shadow > 0)
{
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, wi::Color::Shadow());
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, shadow_color);
if (IsMinimized())
{
fx.siz.y = control_size + shadow * 2;
@@ -2827,6 +2903,22 @@ namespace wi::gui
sprites[IDLE].params.color = color;
}
}
void Window::SetShadowColor(wi::Color color)
{
Widget::SetShadowColor(color);
for (auto& widget : widgets)
{
widget->SetShadowColor(color);
}
}
void Window::SetTheme(const Theme& theme, int id)
{
Widget::SetTheme(theme, id);
for (auto& widget : widgets)
{
widget->SetTheme(theme, id);
}
}
@@ -3803,7 +3895,7 @@ namespace wi::gui
// shadow:
if (shadow > 0)
{
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, wi::Color::Shadow());
wi::image::Params fx(translation.x - shadow, translation.y - shadow, scale.x + shadow * 2, scale.y + shadow * 2, shadow_color);
wi::image::Draw(wi::texturehelper::getWhite(), fx, cmd);
}
@@ -3963,6 +4055,11 @@ namespace wi::gui
Widget::SetColor(color, id);
scrollbar.SetColor(color, id);
}
void TreeList::SetTheme(const Theme& theme, int id)
{
Widget::SetTheme(theme, id);
scrollbar.SetTheme(theme, id);
}
}
+74 -7
View File
@@ -106,6 +106,63 @@ namespace wi::gui
WIDGET_ID_USER,
};
struct Theme
{
// Reduced version of wi::image::Params, excluding position, alignment, etc.
struct Image
{
XMFLOAT4 color = wi::image::Params().color;
wi::enums::BLENDMODE blendFlag = wi::image::Params().blendFlag;
wi::image::SAMPLEMODE sampleFlag = wi::image::Params().sampleFlag;
wi::image::QUALITY quality = wi::image::Params().quality;
bool background = wi::image::Params().isBackgroundEnabled();
} image;
// Reduced version of wi::font::Params, excluding position, alignment, etc.
struct Font
{
wi::Color color = wi::font::Params().color;
wi::Color shadow_color = wi::font::Params().shadowColor;
int style = wi::font::Params().style;
float softness = wi::font::Params().softness;
float bolden = wi::font::Params().bolden;
float shadow_softness = wi::font::Params().shadow_softness;
float shadow_bolden = wi::font::Params().shadow_bolden;
float shadow_offset_x = wi::font::Params().shadow_offset_x;
float shadow_offset_y = wi::font::Params().shadow_offset_y;
} font;
wi::Color shadow_color = wi::Color::Shadow(); // shadow color for whole widget
void ApplyImageParams(wi::image::Params& params) const
{
params.color = image.color;
params.blendFlag = image.blendFlag;
params.sampleFlag = image.sampleFlag;
params.quality = image.quality;
if (image.background)
{
params.enableBackground();
}
else
{
params.disableBackground();
}
}
void ApplyFontParams(wi::font::Params& params) const
{
params.color = font.color;
params.shadowColor = font.shadow_color;
params.style = font.style;
params.softness = font.softness;
params.bolden = font.bolden;
params.shadow_softness = font.shadow_softness;
params.shadow_bolden = font.shadow_bolden;
params.shadow_offset_x = font.shadow_offset_x;
params.shadow_offset_y = font.shadow_offset_y;
}
};
class Widget : public wi::scene::TransformComponent
{
private:
@@ -114,7 +171,8 @@ namespace wi::gui
std::string name;
bool enabled = true;
bool visible = true;
float shadow = 1;
float shadow = 1; // shadow radius
wi::Color shadow_color = wi::Color::Shadow();
WIDGETSTATE state = IDLE;
mutable wi::SpriteFont tooltipFont;
mutable wi::SpriteFont scripttipFont;
@@ -141,11 +199,7 @@ namespace wi::gui
bool IsEnabled() const;
virtual void SetVisible(bool val);
bool IsVisible() const;
// last param default: set color for all states
virtual void SetColor(wi::Color color, int id = -1);
wi::Color GetColor() const;
// last param default: set color for all states
virtual void SetImage(wi::Resource textureResource, int id = -1);
float GetShadowRadius() const { return shadow; }
void SetShadowRadius(float value) { shadow = value; }
@@ -153,6 +207,13 @@ namespace wi::gui
virtual void Render(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const {}
virtual void RenderTooltip(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const;
// last param default: set color for all states
// you can specify a WIDGET_ID here, or your own custom ID if you use your own widget type
virtual void SetColor(wi::Color color, int id = -1);
virtual void SetShadowColor(wi::Color color);
virtual void SetImage(wi::Resource textureResource, int id = -1);
virtual void SetTheme(const Theme& theme, int id = -1);
wi::Sprite sprites[WIDGETSTATE_COUNT];
wi::SpriteFont font;
@@ -248,6 +309,7 @@ namespace wi::gui
void Update(const wi::Canvas& canvas, float dt) override;
void Render(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const override;
void SetColor(wi::Color color, int id = -1) override;
void SetTheme(const Theme& theme, int id = -1) override;
void SetVertical(bool value) { vertical = value; }
bool IsVertical() const { return vertical; }
@@ -263,6 +325,7 @@ namespace wi::gui
void Update(const wi::Canvas& canvas, float dt) override;
void Render(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const override;
void SetColor(wi::Color color, int id = -1) override;
void SetTheme(const Theme& theme, int id = -1) override;
float scrollbar_width = 18;
ScrollBar scrollbar;
@@ -293,6 +356,7 @@ namespace wi::gui
void Update(const wi::Canvas& canvas, float dt) override;
void Render(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const override;
void SetTheme(const Theme& theme, int id = -1) override;
void OnInputAccepted(std::function<void(EventArgs args)> func);
};
@@ -322,6 +386,7 @@ namespace wi::gui
void Render(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const override;
void RenderTooltip(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const override;
void SetColor(wi::Color color, int id = -1) override;
void SetTheme(const Theme& theme, int id = -1) override;
void OnSlide(std::function<void(EventArgs args)> func);
@@ -337,8 +402,6 @@ namespace wi::gui
public:
void Create(const std::string& name);
wi::Sprite sprites_check[WIDGETSTATE_COUNT];
void SetCheck(bool value);
bool GetCheck() const;
@@ -405,6 +468,7 @@ namespace wi::gui
void Update(const wi::Canvas& canvas, float dt) override;
void Render(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const override;
void SetColor(wi::Color color, int id = -1) override;
void SetTheme(const Theme& theme, int id = -1) override;
void OnSelect(std::function<void(EventArgs args)> func);
};
@@ -451,6 +515,8 @@ namespace wi::gui
void Render(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const override;
void RenderTooltip(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const override;
void SetColor(wi::Color color, int id = -1) override;
void SetShadowColor(wi::Color color) override;
void SetTheme(const Theme& theme, int id = -1) override;
void SetVisible(bool value) override;
void SetEnabled(bool value) override;
@@ -554,6 +620,7 @@ namespace wi::gui
void Update(const wi::Canvas& canvas, float dt) override;
void Render(const wi::Canvas& canvas, wi::graphics::CommandList cmd) const override;
void SetColor(wi::Color color, int id = -1) override;
void SetTheme(const Theme& theme, int id = -1) override;
void OnSelect(std::function<void(EventArgs args)> func);
+1 -1
View File
@@ -9,7 +9,7 @@ namespace wi::version
// minor features, major updates, breaking compatibility changes
const int minor = 70;
// minor bug fixes, alterations, refactors, updates
const int revision = 14;
const int revision = 15;
const std::string version_string = std::to_string(major) + "." + std::to_string(minor) + "." + std::to_string(revision);