From b229b060add5f66bd5532698c4a790285095e98a Mon Sep 17 00:00:00 2001 From: dec05eba Date: Tue, 6 Aug 2024 08:59:38 +0200 Subject: Make sure all sizes are scaled by window size, make sure all elements are visible for very low resolutions and text doesn't get too small --- TODO | 2 -- include/gui/CheckBox.hpp | 4 +--- src/Theme.cpp | 6 +++--- src/gui/Button.cpp | 15 ++++++++++----- src/gui/CheckBox.cpp | 15 ++++++++------- src/gui/ComboBox.cpp | 39 +++++++++++++++++++++++++++++---------- src/gui/DropdownButton.cpp | 25 +++++++++++++++++-------- src/gui/Entry.cpp | 20 +++++++++++++------- 8 files changed, 81 insertions(+), 45 deletions(-) diff --git a/TODO b/TODO index 0b70db1..06cffbd 100644 --- a/TODO +++ b/TODO @@ -10,8 +10,6 @@ Maybe change design to have black triangles appear and get larger until they fil DISPLAY gamescope-0 -Colorscheme should follow graphics card in use. On nvidia use nvidia green, on intel use intel blue and on amd use amd red. - Optimize list/page when having a few items in it (dont use vector>). Only redraw ui if changed (dirty state, propagate upward. Set dirty when adding widget or changing any visible properly on a widget or when event updates how the widget should be displayed). diff --git a/include/gui/CheckBox.hpp b/include/gui/CheckBox.hpp index 4459976..c91b947 100644 --- a/include/gui/CheckBox.hpp +++ b/include/gui/CheckBox.hpp @@ -1,7 +1,6 @@ #pragma once #include "Widget.hpp" -#include #include #include @@ -17,8 +16,7 @@ namespace gsr { void draw(mgl::Window &window, mgl::vec2f offset) override; mgl::vec2f get_size() override; - - std::function on_click; + bool is_checked() const; private: mgl::vec2f get_checkbox_size(); private: diff --git a/src/Theme.cpp b/src/Theme.cpp index 7db16aa..8ab58ec 100644 --- a/src/Theme.cpp +++ b/src/Theme.cpp @@ -37,13 +37,13 @@ namespace gsr { if(!theme->title_font_file.load("/usr/share/fonts/noto/NotoSans-Bold.ttf", mgl::MemoryMappedFile::LoadOptions{true, false})) goto error; - if(!theme->title_font.load_from_file(theme->title_font_file, window_size.y * 0.019f)) + if(!theme->title_font.load_from_file(theme->title_font_file, std::max(16.0f, window_size.y * 0.019f))) goto error; - if(!theme->top_bar_font.load_from_file(theme->title_font_file, window_size.y * 0.03f)) + if(!theme->top_bar_font.load_from_file(theme->title_font_file, std::max(23.0f, window_size.y * 0.03f))) goto error; - if(!theme->body_font.load_from_file(theme->body_font_file, window_size.y * 0.015f)) + if(!theme->body_font.load_from_file(theme->body_font_file, std::max(13.0f, window_size.y * 0.015f))) goto error; if(!theme->combobox_arrow.load_from_file((resources_path + "images/combobox_arrow.png").c_str(), {false, false, false})) diff --git a/src/gui/Button.cpp b/src/gui/Button.cpp index a0dd8e9..1849737 100644 --- a/src/gui/Button.cpp +++ b/src/gui/Button.cpp @@ -7,10 +7,10 @@ #include namespace gsr { - static const float padding_top = 10.0f; - static const float padding_bottom = 10.0f; - static const float padding_left = 10.0f; - static const float padding_right = 10.0f; + static const float padding_top_scale = 0.004629f; + static const float padding_bottom_scale = 0.004629f; + static const float padding_left_scale = 0.007f; + static const float padding_right_scale = 0.007f; Button::Button(mgl::Font *font, const char *text, mgl::vec2f size, mgl::Color bg_color) : size(size), bg_color(bg_color), text(text, *font) { @@ -40,10 +40,15 @@ namespace gsr { const bool mouse_inside = mgl::FloatRect(draw_pos, item_size).contains(window.get_mouse_position().to_vec2f()); if(mouse_inside) - draw_rectangle_outline(window, draw_pos, item_size, gsr::get_theme().tint_color, border_scale * gsr::get_theme().window_height); + draw_rectangle_outline(window, draw_pos, item_size, get_theme().tint_color, border_scale * get_theme().window_height); } mgl::vec2f Button::get_size() { + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_bottom = padding_bottom_scale * get_theme().window_height; + const int padding_left = padding_left_scale * get_theme().window_height; + const int padding_right = padding_right_scale * get_theme().window_height; + const mgl::vec2f text_bounds = text.get_bounds().size; mgl::vec2f s = size; if(s.x < 0.0001f) diff --git a/src/gui/CheckBox.cpp b/src/gui/CheckBox.cpp index db2764d..b337d5f 100644 --- a/src/gui/CheckBox.cpp +++ b/src/gui/CheckBox.cpp @@ -18,11 +18,8 @@ namespace gsr { bool CheckBox::on_event(mgl::Event &event, mgl::Window&, mgl::vec2f offset) { if(event.type == mgl::Event::MouseButtonPressed && event.mouse_button.button == mgl::Mouse::Left) { const bool clicked_inside = mgl::FloatRect(position + offset, get_size()).contains({ (float)event.mouse_button.x, (float)event.mouse_button.y }); - if(clicked_inside) { + if(clicked_inside) checked = !checked; - if(on_click) - on_click(); - } } return true; } @@ -40,7 +37,7 @@ namespace gsr { const float side_margin = checked_margin_scale * get_theme().window_height; mgl::Rectangle background(get_checkbox_size() - mgl::vec2f(side_margin, side_margin).floor() * 2.0f); background.set_position(draw_pos.floor() + mgl::vec2f(side_margin, side_margin).floor()); - background.set_color(gsr::get_theme().tint_color); + background.set_color(get_theme().tint_color); window.draw(background); } @@ -50,8 +47,8 @@ namespace gsr { const bool mouse_inside = mgl::FloatRect(draw_pos, get_size()).contains(window.get_mouse_position().to_vec2f()); if(mouse_inside) { - const int border_size = border_scale * gsr::get_theme().window_height; - const mgl::Color border_color = gsr::get_theme().tint_color; + const int border_size = std::max(1.0f, border_scale * get_theme().window_height); + const mgl::Color border_color = get_theme().tint_color; draw_rectangle_outline(window, draw_pos, checkbox_size, border_color, border_size); } } @@ -68,4 +65,8 @@ namespace gsr { const mgl::vec2f text_bounds = text.get_bounds().size; return mgl::vec2f(text_bounds.y, text_bounds.y).floor(); } + + bool CheckBox::is_checked() const { + return checked; + } } \ No newline at end of file diff --git a/src/gui/ComboBox.cpp b/src/gui/ComboBox.cpp index 058254f..9decab7 100644 --- a/src/gui/ComboBox.cpp +++ b/src/gui/ComboBox.cpp @@ -8,10 +8,10 @@ #include namespace gsr { - static const float padding_top = 10.0f; - static const float padding_bottom = 10.0f; - static const float padding_left = 10.0f; - static const float padding_right = 10.0f; + static const float padding_top_scale = 0.004629f; + static const float padding_bottom_scale = 0.004629f; + static const float padding_left_scale = 0.007f; + static const float padding_right_scale = 0.007f; static const float border_scale = 0.0015f; ComboBox::ComboBox(mgl::Font *font) : font(font), dropdown_arrow(&get_theme().combobox_arrow) { @@ -19,6 +19,10 @@ namespace gsr { } bool ComboBox::on_event(mgl::Event &event, mgl::Window&, mgl::vec2f offset) { + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_bottom = padding_bottom_scale * get_theme().window_height; + const int padding_left = padding_left_scale * get_theme().window_height; + if(event.type == mgl::Event::MouseButtonPressed && event.mouse_button.button == mgl::Mouse::Left) { const mgl::vec2f draw_pos = position + offset; const mgl::vec2f mouse_pos = { (float)event.mouse_button.x, (float)event.mouse_button.y }; @@ -61,6 +65,11 @@ namespace gsr { if(items.empty()) return; + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_bottom = padding_bottom_scale * get_theme().window_height; + const int padding_left = padding_left_scale * get_theme().window_height; + const int padding_right = padding_right_scale * get_theme().window_height; + const mgl::vec2f draw_pos = (position + offset).floor(); const mgl::vec2f item_size(max_size.x, font->get_character_size() + padding_top + padding_bottom); @@ -89,8 +98,8 @@ namespace gsr { Item &item = items[selected_item]; item.text.set_position(pos.floor()); if(show_dropdown || mouse_inside) { - const int border_size = border_scale * gsr::get_theme().window_height; - const mgl::Color border_color = gsr::get_theme().tint_color; + const int border_size = border_scale * get_theme().window_height; + const mgl::Color border_color = get_theme().tint_color; draw_rectangle_outline(window, pos - mgl::vec2f(padding_left, padding_top), item_size.floor(), border_color, border_size); } window.draw(item.text); @@ -105,8 +114,8 @@ namespace gsr { if(!inside) { inside = mgl::FloatRect(text_bounds.position - mgl::vec2f(padding_left, padding_top), item_size).contains({ (float)mouse_pos.x, (float)mouse_pos.y }); if(inside) { - mgl::Rectangle item_background(text_bounds.position - mgl::vec2f(padding_left, padding_top), item_size); - item_background.set_color(gsr::get_theme().tint_color); + mgl::Rectangle item_background((text_bounds.position - mgl::vec2f(padding_left, padding_top)).floor(), item_size.floor()); + item_background.set_color(get_theme().tint_color); window.draw(item_background); } else { /*const int border_size = 3; @@ -139,7 +148,12 @@ namespace gsr { if(!dirty) return; - max_size = { 0.0f, font->get_character_size() + padding_top + padding_bottom }; + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_bottom = padding_bottom_scale * get_theme().window_height; + const int padding_left = padding_left_scale * get_theme().window_height; + const int padding_right = padding_right_scale * get_theme().window_height; + + max_size = { 0.0f, font->get_character_size() + (float)padding_top + (float)padding_bottom }; for(Item &item : items) { const mgl::vec2f bounds = item.text.get_bounds().size; max_size.x = std::max(max_size.x, bounds.x + padding_left + padding_right); @@ -151,10 +165,15 @@ namespace gsr { mgl::vec2f ComboBox::get_size() { update_if_dirty(); - return { max_size.x, font->get_character_size() + padding_top + padding_bottom }; + + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_bottom = padding_bottom_scale * get_theme().window_height; + return { max_size.x, font->get_character_size() + (float)padding_top + (float)padding_bottom }; } float ComboBox::get_dropdown_arrow_height() const { + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_bottom = padding_bottom_scale * get_theme().window_height; return (font->get_character_size() + padding_top + padding_bottom) * 0.4f; } } \ No newline at end of file diff --git a/src/gui/DropdownButton.cpp b/src/gui/DropdownButton.cpp index 826d889..5cc9a3d 100644 --- a/src/gui/DropdownButton.cpp +++ b/src/gui/DropdownButton.cpp @@ -8,10 +8,10 @@ #include namespace gsr { - static const float padding_top = 15.0f; - static const float padding_bottom = 15.0f; - static const float padding_left = 20.0f; - static const float padding_right = 20.0f; + static const float padding_top_scale = 0.00694f; + static const float padding_bottom_scale = 0.00694f; + static const float padding_left_scale = 0.009259f; + static const float padding_right_scale = 0.009259f; static const float border_scale = 0.003f; DropdownButton::DropdownButton(mgl::Font *title_font, mgl::Font *description_font, const char *title, const char *description_activated, const char *description_deactivated, mgl::Texture *icon_texture, mgl::vec2f size) : @@ -59,7 +59,11 @@ namespace gsr { update_if_dirty(); const mgl::vec2f draw_pos = position + offset; - const int border_size = border_scale * gsr::get_theme().window_height; + + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_bottom = padding_bottom_scale * get_theme().window_height; + const int padding_left = padding_left_scale * get_theme().window_height; + const int border_size = border_scale * get_theme().window_height; if(show_dropdown) { // Background @@ -70,7 +74,7 @@ namespace gsr { window.draw(rect); } - const mgl::Color border_color = gsr::get_theme().tint_color; + const mgl::Color border_color = get_theme().tint_color; // Green line at top { @@ -88,7 +92,7 @@ namespace gsr { window.draw(rect); } - const mgl::Color border_color = gsr::get_theme().tint_color; + const mgl::Color border_color = get_theme().tint_color; draw_rectangle_outline(window, draw_pos, size, border_color, border_size); } else { // Background @@ -132,7 +136,7 @@ namespace gsr { const mgl::vec2f item_size(max_size.x, item_height); const bool inside = mgl::FloatRect(item_position, item_size).contains({ (float)mouse_pos.x, (float)mouse_pos.y }); if(inside) { - draw_rectangle_outline(window, item_position, item_size, gsr::get_theme().tint_color, 5); + draw_rectangle_outline(window, item_position, item_size, get_theme().tint_color, border_size); mouse_inside_item = i; } } @@ -180,6 +184,11 @@ namespace gsr { if(!dirty) return; + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_bottom = padding_bottom_scale * get_theme().window_height; + const int padding_left = padding_left_scale * get_theme().window_height; + const int padding_right = padding_right_scale * get_theme().window_height; + max_size = { size.x, 0.0f }; for(Item &item : items) { const mgl::vec2f bounds = item.text.get_bounds().size; diff --git a/src/gui/Entry.cpp b/src/gui/Entry.cpp index a8a521b..e853bc8 100644 --- a/src/gui/Entry.cpp +++ b/src/gui/Entry.cpp @@ -9,11 +9,12 @@ #include namespace gsr { - static const float padding_top = 10.0f; - static const float padding_bottom = 10.0f; - static const float padding_left = 10.0f; - static const float padding_right = 10.0f; + static const float padding_top_scale = 0.004629f; + static const float padding_bottom_scale = 0.004629f; + static const float padding_left_scale = 0.007f; + static const float padding_right_scale = 0.007f; static const float border_scale = 0.0015f; + static const float caret_width_scale = 0.001f; Entry::Entry(mgl::Font *font, const char *text, float max_width) : text("", *font), max_width(max_width) { this->text.set_color(get_theme().text_color); @@ -41,17 +42,20 @@ namespace gsr { void Entry::draw(mgl::Window &window, mgl::vec2f offset) { const mgl::vec2f draw_pos = position + offset; + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_left = padding_left_scale * get_theme().window_height; + mgl::Rectangle background(get_size()); background.set_position(draw_pos.floor()); background.set_color(selected ? mgl::Color(0, 0, 0, 255) : mgl::Color(0, 0, 0, 120)); window.draw(background); if(selected) { - const int border_size = border_scale * gsr::get_theme().window_height; + const int border_size = border_scale * get_theme().window_height; draw_rectangle_outline(window, draw_pos.floor(), get_size().floor(), get_theme().tint_color, border_size); - const int caret_width = 2; - mgl::Rectangle caret({caret_width, text.get_bounds().size.y}); + const int caret_width = std::max(1.0f, caret_width_scale * get_theme().window_height); + mgl::Rectangle caret({(float)caret_width, text.get_bounds().size.y}); caret.set_position((draw_pos + mgl::vec2f(padding_left + caret_offset_x, padding_top)).floor()); caret.set_color(mgl::Color(255, 255, 255)); window.draw(caret); @@ -62,6 +66,8 @@ namespace gsr { } mgl::vec2f Entry::get_size() { + const int padding_top = padding_top_scale * get_theme().window_height; + const int padding_bottom = padding_bottom_scale * get_theme().window_height; return { max_width, text.get_bounds().size.y + padding_top + padding_bottom }; } -- cgit v1.2.3