light7734/light
light7734/light
1
1
Fork 0
Code Issues 20 Pull requests 1 Projects 1 Releases Packages Wiki Activity

UserInterface Style

Browse source 
- UserInterface is now beautiful >_<
This commit is contained in:
Light 2021-08-10 17:10:16 +04:30
parent 1afc1a00a5
commit 73492dc415
8 changed files with 180 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Engine/src/Engine/UserInterface/UserInterface.h
View file

@ -10,6 +10,7 @@ namespace Light {
class SharedContext;
// #todo: fix the UserIntreface mess!!
class UserInterface
{
public:

39
Engine/src/Platform/GraphicsAPI/DirectX/dxUserInterface.cpp
View file

@ -67,7 +67,10 @@ namespace Light {
io.KeyMap[ImGuiKey_Y] = Key::Y;
io.KeyMap[ImGuiKey_Z] = Key::Z;
io.Fonts->AddFontFromFileTTF("res/Fonts/OpenSans/OpenSans-Bold.ttf", 18.0f);
io.FontDefault = io.Fonts->AddFontFromFileTTF("res/Fonts/OpenSans/OpenSans-Regular.ttf", 18.0f);
SetDarkThemeColors();
}
dxUserInterface::~dxUserInterface()
@ -88,9 +91,6 @@ namespace Light {
ImGui_ImplDX11_NewFrame();
ImGui_ImplWin32_NewFrame();
ImGui::NewFrame();
/* #TEMP_IMGUI_DEMO_TEMP# */
ImGui::ShowDemoWindow();
}
void dxUserInterface::End()
@ -113,4 +113,37 @@ namespace Light {
LT_ENGINE_INFO("________________________________________");
}
void dxUserInterface::SetDarkThemeColors()
{
auto& colors = ImGui::GetStyle().Colors;
colors[ImGuiCol_WindowBg] = ImVec4{ 0.1f, 0.105f, 0.11f, 1.0f };
// Headers
colors[ImGuiCol_Header] = ImVec4{ 0.2f, 0.205f, 0.21f, 1.0f };
colors[ImGuiCol_HeaderHovered] = ImVec4{ 0.3f, 0.305f, 0.31f, 1.0f };
colors[ImGuiCol_HeaderActive] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
// Buttons
colors[ImGuiCol_Button] = ImVec4{ 0.2f, 0.205f, 0.21f, 1.0f };
colors[ImGuiCol_ButtonHovered] = ImVec4{ 0.3f, 0.305f, 0.31f, 1.0f };
colors[ImGuiCol_ButtonActive] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
// Frame BG
colors[ImGuiCol_FrameBg] = ImVec4{ 0.2f, 0.205f, 0.21f, 1.0f };
colors[ImGuiCol_FrameBgHovered] = ImVec4{ 0.3f, 0.305f, 0.31f, 1.0f };
colors[ImGuiCol_FrameBgActive] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
// Tabs
colors[ImGuiCol_Tab] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
colors[ImGuiCol_TabHovered] = ImVec4{ 0.38f, 0.3805f, 0.381f, 1.0f };
colors[ImGuiCol_TabActive] = ImVec4{ 0.28f, 0.2805f, 0.281f, 1.0f };
colors[ImGuiCol_TabUnfocused] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
colors[ImGuiCol_TabUnfocusedActive] = ImVec4{ 0.2f, 0.205f, 0.21f, 1.0f };
// Title
colors[ImGuiCol_TitleBg] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
colors[ImGuiCol_TitleBgActive] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
colors[ImGuiCol_TitleBgCollapsed] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
}
}

3
Engine/src/Platform/GraphicsAPI/DirectX/dxUserInterface.h
View file

@ -23,6 +23,9 @@ namespace Light {
void End() override;
void LogDebugData() override;
private:
void SetDarkThemeColors();
};
}

38
Engine/src/Platform/GraphicsAPI/OpenGL/glUserInterface.cpp
View file

@ -65,8 +65,10 @@ namespace Light {
io.KeyMap[ImGuiKey_Y] = Key::Y;
io.KeyMap[ImGuiKey_Z] = Key::Z;
io.Fonts->AddFontFromFileTTF("res/Fonts/OpenSans/OpenSans-Bold.ttf", 18.0f);
io.FontDefault = io.Fonts->AddFontFromFileTTF("res/Fonts/OpenSans/OpenSans-Regular.ttf", 18.0f);
SetDarkThemeColors();
}
glUserInterface::~glUserInterface()
@ -87,9 +89,6 @@ namespace Light {
ImGui_ImplOpenGL3_NewFrame();
ImGui_ImplGlfw_NewFrame();
ImGui::NewFrame();
/* #TEMP_IMGUI_DEMO_TEMP# */
ImGui::ShowDemoWindow();
}
void glUserInterface::End()
@ -113,4 +112,37 @@ namespace Light {
LT_ENGINE_INFO("________________________________________");
}
void glUserInterface::SetDarkThemeColors()
{
auto& colors = ImGui::GetStyle().Colors;
colors[ImGuiCol_WindowBg] = ImVec4{ 0.1f, 0.105f, 0.11f, 1.0f };
// Headers
colors[ImGuiCol_Header] = ImVec4{ 0.2f, 0.205f, 0.21f, 1.0f };
colors[ImGuiCol_HeaderHovered] = ImVec4{ 0.3f, 0.305f, 0.31f, 1.0f };
colors[ImGuiCol_HeaderActive] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
// Buttons
colors[ImGuiCol_Button] = ImVec4{ 0.2f, 0.205f, 0.21f, 1.0f };
colors[ImGuiCol_ButtonHovered] = ImVec4{ 0.3f, 0.305f, 0.31f, 1.0f };
colors[ImGuiCol_ButtonActive] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
// Frame BG
colors[ImGuiCol_FrameBg] = ImVec4{ 0.2f, 0.205f, 0.21f, 1.0f };
colors[ImGuiCol_FrameBgHovered] = ImVec4{ 0.3f, 0.305f, 0.31f, 1.0f };
colors[ImGuiCol_FrameBgActive] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
// Tabs
colors[ImGuiCol_Tab] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
colors[ImGuiCol_TabHovered] = ImVec4{ 0.38f, 0.3805f, 0.381f, 1.0f };
colors[ImGuiCol_TabActive] = ImVec4{ 0.28f, 0.2805f, 0.281f, 1.0f };
colors[ImGuiCol_TabUnfocused] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
colors[ImGuiCol_TabUnfocusedActive] = ImVec4{ 0.2f, 0.205f, 0.21f, 1.0f };
// Title
colors[ImGuiCol_TitleBg] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
colors[ImGuiCol_TitleBgActive] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
colors[ImGuiCol_TitleBgCollapsed] = ImVec4{ 0.15f, 0.1505f, 0.151f, 1.0f };
}
}

3
Engine/src/Platform/GraphicsAPI/OpenGL/glUserInterface.h
View file

@ -21,6 +21,9 @@ namespace Light {
void End() override;
void LogDebugData() override;
private:
void SetDarkThemeColors();
};
}

2
Mirror/src/MirrorApp.cpp
View file

@ -15,7 +15,7 @@ namespace Light {
// Set window properties
Light::WindowProperties properties;
properties.title = "Mirror";
properties.size = glm::uvec2(800u, 600u);
properties.size = glm::uvec2(1280u, 720u);
properties.vsync = true;
m_Window->SetProperties(properties);

56
Mirror/src/MirrorLayer.h
View file

@ -100,6 +100,57 @@ namespace Light {
void OnUserInterfaceUpdate()
{
// Note: Switch this to true to enable dockspace
static bool dockspaceOpen = true;
static bool opt_fullscreen_persistant = true;
bool opt_fullscreen = opt_fullscreen_persistant;
static ImGuiDockNodeFlags dockspace_flags = ImGuiDockNodeFlags_None;
// We are using the ImGuiWindowFlags_NoDocking flag to make the parent window not dockable into,
// because it would be confusing to have two docking targets within each others.
ImGuiWindowFlags window_flags = ImGuiWindowFlags_MenuBar | ImGuiWindowFlags_NoDocking;
if (opt_fullscreen)
{
ImGuiViewport* viewport = ImGui::GetMainViewport();
ImGui::SetNextWindowPos(viewport->Pos);
ImGui::SetNextWindowSize(viewport->Size);
ImGui::SetNextWindowViewport(viewport->ID);
ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 0.0f);
ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);
window_flags |= ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoCollapse | ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoMove;
window_flags |= ImGuiWindowFlags_NoBringToFrontOnFocus | ImGuiWindowFlags_NoNavFocus;
}
// When using ImGuiDockNodeFlags_PassthruCentralNode, DockSpace() will render our background and handle the pass-thru hole, so we ask Begin() to not render a background.
if (dockspace_flags & ImGuiDockNodeFlags_PassthruCentralNode)
window_flags |= ImGuiWindowFlags_NoBackground;
// Important: note that we proceed even if Begin() returns false (aka window is collapsed).
// This is because we want to keep our DockSpace() active. If a DockSpace() is inactive,
// all active windows docked into it will lose their parent and become undocked.
// We cannot preserve the docking relationship between an active window and an inactive docking, otherwise
// any change of dockspace/settings would lead to windows being stuck in limbo and never being visible.
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0.0f, 0.0f));
ImGui::Begin("DockSpace Demo", &dockspaceOpen, window_flags);
ImGui::PopStyleVar();
if (opt_fullscreen)
ImGui::PopStyleVar(2);
// DockSpace
ImGuiIO& io = ImGui::GetIO();
ImGuiStyle& style = ImGui::GetStyle();
float minWinSizeX = style.WindowMinSize.x;
style.WindowMinSize.x = 370.0f;
if (io.ConfigFlags & ImGuiConfigFlags_DockingEnable)
{
ImGuiID dockspace_id = ImGui::GetID("MyDockSpace");
ImGui::DockSpace(dockspace_id, ImVec2(0.0f, 0.0f), dockspace_flags);
}
style.WindowMinSize.x = minWinSizeX;
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2{ 0, 0 });
if (ImGui::Begin("GameView"))
{
// #todo: AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
@ -124,8 +175,11 @@ namespace Light {
ImGui::Image(m_Framebuffer->GetColorAttachment(), regionAvail, ImVec2(0, 1), ImVec2(1, 0));
}
ImGui::End();
ImGui::ShowDemoWindow();
ImGui::End();
ImGui::PopStyleVar();
ImGui::End();
m_SceneHierarchyPanel->OnUserInterfaceUpdate();
m_PropertiesPanel->OnUserInterfaceUpdate();
}

67
Mirror/src/Panels/PropertiesPanel.cpp
View file

@ -29,8 +29,25 @@ namespace Light {
if (ImGui::InputText("##Tag", buffer, sizeof(buffer)))
tagComponent.tag = std::string(buffer);
ImGui::Separator();
}
ImGui::SameLine();
ImGui::PushItemWidth(-1);
if (ImGui::Button("Add component"))
ImGui::OpenPopup("Components");
if (ImGui::BeginPopup("Components"))
{
if (ImGui::Selectable("SpriteRenderer", false, m_EntityContext.HasComponent<SpriteRendererComponent>() ? ImGuiSelectableFlags_Disabled : NULL))
m_EntityContext.AddComponent<SpriteRendererComponent>(Light::ResourceManager::GetTexture("awesomeface"));
if (ImGui::Selectable("Camera", false, m_EntityContext.HasComponent<CameraComponent>() ? ImGuiSelectableFlags_Disabled : NULL))
m_EntityContext.AddComponent<CameraComponent>();
ImGui::EndPopup();
}
ImGui::PopItemWidth();
DrawComponent<TransformComponent>("Transform Component", m_EntityContext, [&](auto& transformComponent)
{
@ -42,7 +59,6 @@ namespace Light {
ImGui::ColorEdit4("Color", &spriteRendererComponent.tint[0]);
});
DrawComponent<CameraComponent>("Camera Component", m_EntityContext, [&](auto& cameraComponent)
{
auto& camera = cameraComponent.camera;
@ -107,19 +123,7 @@ namespace Light {
ImGui::Separator();
});
if (ImGui::Button("Add component", ImVec2(ImGui::GetContentRegionAvail().x, 20)))
ImGui::OpenPopup("Components");
if (ImGui::BeginPopup("Components"))
{
if (ImGui::Selectable("SpriteRenderer", false, m_EntityContext.HasComponent<SpriteRendererComponent>() ? ImGuiSelectableFlags_Disabled : NULL))
m_EntityContext.AddComponent<SpriteRendererComponent>(Light::ResourceManager::GetTexture("awesomeface"));
if (ImGui::Selectable("Camera", false, m_EntityContext.HasComponent<CameraComponent>() ? ImGuiSelectableFlags_Disabled : NULL))
m_EntityContext.AddComponent<CameraComponent>();
ImGui::EndPopup();
}
}
ImGui::End();
@ -132,6 +136,10 @@ namespace Light {
void PropertiesPanel::DrawVec3Control(const std::string& label, glm::vec3& values, float resetValue /*= 0.0f*/, float columnWidth /*= 100.0f*/)
{
ImGuiIO& io = ImGui::GetIO();
auto boldFont = io.Fonts->Fonts[0];
ImGui::Columns(2);
ImGui::SetColumnWidth(0, columnWidth);
ImGui::Text(label.c_str());
@ -146,8 +154,10 @@ namespace Light {
ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.8f, 0.1f, 0.15f, 1.0f));
ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0.9f, 0.2f, 0.2f, 1.0f));
ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0.8f, 0.1f, 0.15f, 1.0f));
ImGui::PushFont(boldFont);
if (ImGui::Button("X", buttonSize))
values.x = resetValue;
ImGui::PopFont();
ImGui::PopStyleColor(3);
ImGui::SameLine();
@ -158,8 +168,10 @@ namespace Light {
ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.2f, 0.7f, 0.2f, 1.0f));
ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0.3f, 0.8f, 0.3f, 1.0f));
ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0.2f, 0.7f, 0.2f, 1.0f));
ImGui::PushFont(boldFont);
if (ImGui::Button("Y", buttonSize))
values.x = resetValue;
values.y = resetValue;
ImGui::PopFont();
ImGui::PopStyleColor(3);
ImGui::SameLine();
@ -171,8 +183,10 @@ namespace Light {
ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.1f, 0.25f, 0.8f, 1.0f));
ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0.2f, 0.35f, 0.9f, 1.0f));
ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0.1f, 0.25f, 0.8f, 1.0f));
ImGui::PushFont(boldFont);
if (ImGui::Button("Z", buttonSize))
values.x = resetValue;
values.z = resetValue;
ImGui::PopFont();
ImGui::PopStyleColor(3);
ImGui::SameLine();
@ -189,13 +203,23 @@ namespace Light {
{
if (!entity.HasComponent<ComponentType>())
return;
auto& component = entity.GetComponent<ComponentType>();
if (ImGui::TreeNodeEx((void*)typeid(ComponentType).hash_code(), ImGuiTreeNodeFlags_DefaultOpen, name.c_str()))
ImVec2 regionAvail = ImGui::GetContentRegionAvail();
ImGuiTreeNodeFlags flags = ImGuiTreeNodeFlags_DefaultOpen | ImGuiTreeNodeFlags_SpanAvailWidth | ImGuiTreeNodeFlags_Framed | ImGuiTreeNodeFlags_AllowItemOverlap | ImGuiTreeNodeFlags_FramePadding;
ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, { 4, 4 });
float lineHeight = GImGui->Font->FontSize + GImGui->Style.FramePadding.y * 2.0f;
ImGui::Separator();
if (ImGui::TreeNodeEx((void*)typeid(ComponentType).hash_code(), flags, name.c_str()))
{
ImGui::SameLine(ImGui::GetContentRegionAvail().x - 15.0f);
if (ImGui::Button("+"))
ImGui::PopStyleVar();
ImGui::SameLine(regionAvail.x - lineHeight * .5f);
if (ImGui::Button("+", { lineHeight, lineHeight }))
ImGui::OpenPopup("ComponentSettings");
if (ImGui::BeginPopup("ComponentSettings"))
@ -208,8 +232,9 @@ namespace Light {
userInterfaceFunction(component);
ImGui::TreePop();
}
else
ImGui::PopStyleVar();
}
}