Skip to content

Commit dd5516a

Browse files
ktfktf
authored
DPL GUI: improve palette, add "light" mode (#15371)
1 parent 1319eff commit dd5516a

3 files changed

Lines changed: 80 additions & 28 deletions

File tree

‎Framework/GUISupport/src/FrameworkGUIDevicesGraph.cxx‎

Lines changed: 49 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,37 @@ struct NodeColor {
4141

4242
using LogLevel = LogParsingHelpers::LogLevel;
4343

44-
NodeColor decideColorForNode(const DeviceInfo& info)
44+
NodeColor decideColorForNode(const DeviceInfo& info, bool lightMode)
4545
{
46+
if (lightMode) {
47+
// Dark-on-bright: rich medium-dark cards on a white canvas, white text on nodes
48+
if (info.active == false) {
49+
return NodeColor{
50+
.normal = ImVec4(0xb5 / 255.f, 0x26 / 255.f, 0x18 / 255.f, 1), // dark crimson
51+
.hovered = ImVec4(0xc2 / 255.f, 0x2d / 255.f, 0x1d / 255.f, 1)};
52+
}
53+
switch (info.streamingState) {
54+
case StreamingState::EndOfStreaming:
55+
return NodeColor{
56+
.normal = ImVec4(0x8c / 255.f, 0x6c / 255.f, 0x00 / 255.f, 1), // dark amber
57+
.hovered = ImVec4(0x9e / 255.f, 0x7a / 255.f, 0x00 / 255.f, 1),
58+
.title = ImVec4(0x6e / 255.f, 0x54 / 255.f, 0x00 / 255.f, 1),
59+
.title_hovered = ImVec4(0x5a / 255.f, 0x44 / 255.f, 0x00 / 255.f, 1)};
60+
case StreamingState::Idle:
61+
return NodeColor{
62+
.normal = ImVec4(0x1a / 255.f, 0x80 / 255.f, 0x40 / 255.f, 1), // dark forest green
63+
.hovered = ImVec4(0x22 / 255.f, 0x8b / 255.f, 0x47 / 255.f, 1),
64+
.title = ImVec4(0x11 / 255.f, 0x60 / 255.f, 0x2e / 255.f, 1),
65+
.title_hovered = ImVec4(0x0a / 255.f, 0x4d / 255.f, 0x23 / 255.f, 1)};
66+
case StreamingState::Streaming:
67+
default:
68+
return NodeColor{
69+
.normal = ImVec4(0x3a / 255.f, 0x3a / 255.f, 0x3c / 255.f, 1), // macOS tertiary dark
70+
.hovered = ImVec4(0x48 / 255.f, 0x48 / 255.f, 0x4a / 255.f, 1),
71+
.title = ImVec4(0x2c / 255.f, 0x2c / 255.f, 0x2e / 255.f, 1),
72+
.title_hovered = ImVec4(0x1c / 255.f, 0x1c / 255.f, 0x1e / 255.f, 1)};
73+
}
74+
}
4675
if (info.active == false) {
4776
return NodeColor{
4877
.normal = PaletteHelpers::RED,
@@ -82,7 +111,7 @@ const static ImColor ARROW_BACKGROUND_COLOR = {100, 100, 0};
82111
const static ImColor ARROW_HALFGROUND_COLOR = {170, 170, 70};
83112
const static ImColor ARROW_COLOR = {200, 200, 100};
84113
const static ImColor ARROW_SELECTED_COLOR = {200, 0, 100};
85-
const static ImU32 GRID_COLOR = ImColor(200, 200, 200, 40);
114+
const static ImU32 GRID_COLOR = ImColor(150, 150, 150, 80);
86115
const static ImColor NODE_BORDER_COLOR = {100, 100, 100};
87116
const static ImColor LEGEND_COLOR = {100, 100, 100};
88117

@@ -508,6 +537,8 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
508537
ImGui::SameLine();
509538
ImGui::Checkbox("Show legend", &show_legend);
510539
ImGui::SameLine();
540+
ImGui::Checkbox("Light mode", &state.topologyLightMode);
541+
ImGui::SameLine();
511542
if (ImGui::Button("Center")) {
512543
scrolling = ImVec2(0., 0.);
513544
}
@@ -577,11 +608,10 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
577608

578609
ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(1, 1));
579610
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0, 0));
580-
#if defined(ImGuiCol_ChildWindowBg)
581-
ImGui::PushStyleColor(ImGuiCol_ChildWindowBg, (ImU32)ImColor(60, 60, 70, 200));
582-
#else
583-
ImGui::PushStyleColor(ImGuiCol_WindowBg, (ImU32)ImColor(60, 60, 70, 200));
584-
#endif
611+
auto canvasBg = state.topologyLightMode ? (ImU32)ImColor(250, 250, 252, 255) : (ImU32)ImColor(44, 44, 46, 255);
612+
auto canvasText = (ImU32)ImColor(235, 235, 245, 255); // nodes are always dark, so text is always light
613+
ImGui::PushStyleColor(ImGuiCol_ChildBg, canvasBg);
614+
ImGui::PushStyleColor(ImGuiCol_Text, canvasText);
585615
ImVec2 graphSize = ImGui::GetWindowSize();
586616
if (state.leftPaneVisible) {
587617
graphSize.x -= state.leftPaneSize;
@@ -604,6 +634,12 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
604634

605635
ImVec2 win_pos = ImGui::GetCursorScreenPos();
606636
ImVec2 canvas_sz = ImGui::GetWindowSize();
637+
638+
// Arrow colors — richer amber in light mode to stand out on white canvas
639+
const ImColor arrowBgColor = state.topologyLightMode ? ImColor(140, 80, 0) : ARROW_BACKGROUND_COLOR;
640+
const ImColor arrowHalfColor = state.topologyLightMode ? ImColor(180, 110, 0) : ARROW_HALFGROUND_COLOR;
641+
const ImColor arrowColor = state.topologyLightMode ? ImColor(220, 140, 0) : ARROW_COLOR;
642+
607643
// Display links but only if they are inside the view.
608644
for (int link_idx = 0; link_idx < links.Size; link_idx++) {
609645
// Do the geometry culling upfront.
@@ -627,7 +663,7 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
627663
continue;
628664
}
629665
draw_list->ChannelsSetCurrent(0); // Background
630-
auto color = ARROW_BACKGROUND_COLOR;
666+
auto color = arrowBgColor;
631667
auto thickness = ARROW_BACKGROUND_THICKNESS;
632668

633669
bool p1Inside = false;
@@ -643,12 +679,12 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
643679
if (p1Inside && p2Inside) {
644680
// Whatever the two edges completely within the view, gets brighter color and foreground.
645681
draw_list->ChannelsSetCurrent(2);
646-
color = ARROW_COLOR;
682+
color = arrowColor;
647683
thickness = ARROW_THICKNESS;
648684
} else if (p1Inside || p2Inside) {
649685
draw_list->ChannelsSetCurrent(1);
650686
// Whenever one of the two ends is within the view, increase the color but keep the background
651-
color = ARROW_HALFGROUND_COLOR;
687+
color = arrowHalfColor;
652688
thickness = ARROW_HALFGROUND_THICKNESS;
653689
}
654690

@@ -756,7 +792,7 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
756792
scrolling = scrolling - ImVec2(ImGui::GetIO().MouseDelta.x / 4.f, ImGui::GetIO().MouseDelta.y / 4.f);
757793
}
758794

759-
auto nodeBg = decideColorForNode(info);
795+
auto nodeBg = decideColorForNode(info, state.topologyLightMode);
760796

761797
auto hovered = (node_hovered_in_list == node->ID || node_hovered_in_scene == node->ID || (node_hovered_in_list == -1 && node_selected == node->ID));
762798
ImVec4 nodeBgColor = hovered ? nodeBg.hovered : nodeBg.normal;
@@ -776,7 +812,7 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
776812
auto pp1 = p1 + offset + slotPos;
777813
auto pp2 = p2 + offset + slotPos;
778814
auto pp3 = p3 + offset + slotPos;
779-
auto color = ARROW_COLOR;
815+
auto color = arrowColor;
780816
if (node_idx == node_selected) {
781817
color = ARROW_SELECTED_COLOR;
782818
}
@@ -881,7 +917,7 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
881917

882918
ImGui::PopItemWidth();
883919
ImGui::EndChild();
884-
ImGui::PopStyleColor();
920+
ImGui::PopStyleColor(2);
885921
ImGui::PopStyleVar(2);
886922
ImGui::EndGroup();
887923

‎Framework/GUISupport/src/FrameworkGUIState.h‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ struct WorkspaceGUIState {
3434
bool leftPaneVisible;
3535
bool rightPaneVisible;
3636
bool bottomPaneVisible;
37+
bool topologyLightMode;
3738
double startTime;
3839
};
3940

‎Framework/GUISupport/src/PaletteHelpers.cxx‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,35 @@
1313
namespace o2::framework
1414
{
1515

16-
const ImVec4 PaletteHelpers::RED = ImVec4(0.945, 0.094, 0.298, 1);
17-
const ImVec4 PaletteHelpers::GREEN = ImVec4(0x7e / 255., 0xc4 / 255., 0x52 / 255., 1);
18-
const ImVec4 PaletteHelpers::BLUE = ImVec4(0x3d / 255., 0xb7 / 255., 0xe0 / 255., 1);
19-
const ImVec4 PaletteHelpers::YELLOW = ImVec4(0.949, 0.769, 0.239, 1);
20-
const ImVec4 PaletteHelpers::SHADED_RED = ImVec4(0xd5 / 255., 0x72 / 255., 0x73 / 255., 1);
21-
const ImVec4 PaletteHelpers::SHADED_GREEN = ImVec4(0x98 / 255., 0xba / 255., 0x96 / 255., 1);
22-
const ImVec4 PaletteHelpers::SHADED_BLUE = ImVec4(0x7a / 255., 0xab / 255., 0xea / 255., 1);
23-
const ImVec4 PaletteHelpers::SHADED_YELLOW = ImVec4(0xeb / 255., 0xb9 / 255., 0x7a / 255., 1);
24-
const ImVec4 PaletteHelpers::DARK_RED = ImVec4(0xd4 / 255., 0x06 / 255., 0x02 / 255., 255. / 255.);
25-
const ImVec4 PaletteHelpers::DARK_GREEN = ImVec4(153. / 255., 61. / 255., 61. / 255., 255. / 255.);
26-
const ImVec4 PaletteHelpers::DARK_YELLOW = ImVec4(0xf1 / 255., 0x9b / 255., 0x2c / 255., 255. / 255.);
27-
const ImVec4 PaletteHelpers::WHITE = ImVec4(0xce / 255., 0xbe / 255., 0x91 / 255., 1);
28-
const ImVec4 PaletteHelpers::BLACK = ImVec4(0x28 / 255., 0x28 / 255., 0x28 / 255., 1);
29-
const ImVec4 PaletteHelpers::GRAY = ImVec4(60 / 255., 60 / 255., 60 / 255., 1);
30-
const ImVec4 PaletteHelpers::LIGHT_GRAY = ImVec4(75 / 255., 75 / 255., 75 / 255., 1);
16+
// Vivid accent colors — macOS system color palette / Pantone-adjacent
17+
// RED: macOS Red (#FF3B30) / Pantone 485 C adjacent
18+
const ImVec4 PaletteHelpers::RED = ImVec4(0xff / 255., 0x3b / 255., 0x30 / 255., 1);
19+
// GREEN: macOS Green (#34C759) / Pantone 368 C adjacent
20+
const ImVec4 PaletteHelpers::GREEN = ImVec4(0x34 / 255., 0xc7 / 255., 0x59 / 255., 1);
21+
// BLUE: macOS Blue (#007AFF) / Pantone 2728 C adjacent
22+
const ImVec4 PaletteHelpers::BLUE = ImVec4(0x00 / 255., 0x7a / 255., 0xff / 255., 1);
23+
// YELLOW: macOS Yellow (#FFCC00) / Pantone 116 C adjacent
24+
const ImVec4 PaletteHelpers::YELLOW = ImVec4(0xff / 255., 0xcc / 255., 0x00 / 255., 1);
25+
// Muted/shaded variants — desaturated for secondary use
26+
const ImVec4 PaletteHelpers::SHADED_RED = ImVec4(0xff / 255., 0x69 / 255., 0x61 / 255., 1);
27+
const ImVec4 PaletteHelpers::SHADED_GREEN = ImVec4(0x86 / 255., 0xd9 / 255., 0x88 / 255., 1);
28+
const ImVec4 PaletteHelpers::SHADED_BLUE = ImVec4(0x5a / 255., 0xc8 / 255., 0xfa / 255., 1);
29+
const ImVec4 PaletteHelpers::SHADED_YELLOW = ImVec4(0xff / 255., 0xd6 / 255., 0x0a / 255., 1);
30+
// Dark variants — for title bars and hovered states
31+
// DARK_RED: Pantone 485 C (#DA291C)
32+
const ImVec4 PaletteHelpers::DARK_RED = ImVec4(0xda / 255., 0x29 / 255., 0x1c / 255., 1);
33+
// DARK_GREEN: (#1E8449)
34+
const ImVec4 PaletteHelpers::DARK_GREEN = ImVec4(0x1e / 255., 0x84 / 255., 0x49 / 255., 1);
35+
// DARK_YELLOW: macOS Orange (#FF9F0A) / Pantone 137 C adjacent
36+
const ImVec4 PaletteHelpers::DARK_YELLOW = ImVec4(0xff / 255., 0x9f / 255., 0x0a / 255., 1);
37+
// Neutrals — macOS dark mode system backgrounds
38+
// WHITE: used as primary text / highlight color in dark UI
39+
const ImVec4 PaletteHelpers::WHITE = ImVec4(0xf5 / 255., 0xf5 / 255., 0xf7 / 255., 1);
40+
// BLACK: macOS dark background (#1C1C1E)
41+
const ImVec4 PaletteHelpers::BLACK = ImVec4(0x1c / 255., 0x1c / 255., 0x1e / 255., 1);
42+
// GRAY: macOS secondary background (#2C2C2E)
43+
const ImVec4 PaletteHelpers::GRAY = ImVec4(0x2c / 255., 0x2c / 255., 0x2e / 255., 1);
44+
// LIGHT_GRAY: macOS tertiary background (#3A3A3C)
45+
const ImVec4 PaletteHelpers::LIGHT_GRAY = ImVec4(0x3a / 255., 0x3a / 255., 0x3c / 255., 1);
3146

3247
} // namespace o2::framework

0 commit comments

Comments
 (0)