Skip to content

DPL GUI: improve palette, add "light" mode #15371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ktf merged 1 commit into from
May 6, 2026
+80 −28
Merged

DPL GUI: improve palette, add "light" mode #15371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 49 additions & 13 deletions Framework/GUISupport/src/FrameworkGUIDevicesGraph.cxx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,37 @@ struct NodeColor {

using LogLevel = LogParsingHelpers::LogLevel;

NodeColor decideColorForNode(const DeviceInfo& info)
NodeColor decideColorForNode(const DeviceInfo& info, bool lightMode)
{
if (lightMode) {
// Dark-on-bright: rich medium-dark cards on a white canvas, white text on nodes
if (info.active == false) {
return NodeColor{
.normal = ImVec4(0xb5 / 255.f, 0x26 / 255.f, 0x18 / 255.f, 1), // dark crimson
.hovered = ImVec4(0xc2 / 255.f, 0x2d / 255.f, 0x1d / 255.f, 1)};
}
switch (info.streamingState) {
case StreamingState::EndOfStreaming:
return NodeColor{
.normal = ImVec4(0x8c / 255.f, 0x6c / 255.f, 0x00 / 255.f, 1), // dark amber
.hovered = ImVec4(0x9e / 255.f, 0x7a / 255.f, 0x00 / 255.f, 1),
.title = ImVec4(0x6e / 255.f, 0x54 / 255.f, 0x00 / 255.f, 1),
.title_hovered = ImVec4(0x5a / 255.f, 0x44 / 255.f, 0x00 / 255.f, 1)};
case StreamingState::Idle:
return NodeColor{
.normal = ImVec4(0x1a / 255.f, 0x80 / 255.f, 0x40 / 255.f, 1), // dark forest green
.hovered = ImVec4(0x22 / 255.f, 0x8b / 255.f, 0x47 / 255.f, 1),
.title = ImVec4(0x11 / 255.f, 0x60 / 255.f, 0x2e / 255.f, 1),
.title_hovered = ImVec4(0x0a / 255.f, 0x4d / 255.f, 0x23 / 255.f, 1)};
case StreamingState::Streaming:
default:
return NodeColor{
.normal = ImVec4(0x3a / 255.f, 0x3a / 255.f, 0x3c / 255.f, 1), // macOS tertiary dark
.hovered = ImVec4(0x48 / 255.f, 0x48 / 255.f, 0x4a / 255.f, 1),
.title = ImVec4(0x2c / 255.f, 0x2c / 255.f, 0x2e / 255.f, 1),
.title_hovered = ImVec4(0x1c / 255.f, 0x1c / 255.f, 0x1e / 255.f, 1)};
}
}
if (info.active == false) {
return NodeColor{
.normal = PaletteHelpers::RED,
Expand Down Expand Up @@ -82,7 +111,7 @@ const static ImColor ARROW_BACKGROUND_COLOR = {100, 100, 0};
const static ImColor ARROW_HALFGROUND_COLOR = {170, 170, 70};
const static ImColor ARROW_COLOR = {200, 200, 100};
const static ImColor ARROW_SELECTED_COLOR = {200, 0, 100};
const static ImU32 GRID_COLOR = ImColor(200, 200, 200, 40);
const static ImU32 GRID_COLOR = ImColor(150, 150, 150, 80);
const static ImColor NODE_BORDER_COLOR = {100, 100, 100};
const static ImColor LEGEND_COLOR = {100, 100, 100};

Expand Down Expand Up @@ -508,6 +537,8 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
ImGui::SameLine();
ImGui::Checkbox("Show legend", &show_legend);
ImGui::SameLine();
ImGui::Checkbox("Light mode", &state.topologyLightMode);
ImGui::SameLine();
if (ImGui::Button("Center")) {
scrolling = ImVec2(0., 0.);
}
Expand Down Expand Up @@ -577,11 +608,10 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,

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

ImVec2 win_pos = ImGui::GetCursorScreenPos();
ImVec2 canvas_sz = ImGui::GetWindowSize();

// Arrow colors — richer amber in light mode to stand out on white canvas
const ImColor arrowBgColor = state.topologyLightMode ? ImColor(140, 80, 0) : ARROW_BACKGROUND_COLOR;
const ImColor arrowHalfColor = state.topologyLightMode ? ImColor(180, 110, 0) : ARROW_HALFGROUND_COLOR;
const ImColor arrowColor = state.topologyLightMode ? ImColor(220, 140, 0) : ARROW_COLOR;

// Display links but only if they are inside the view.
for (int link_idx = 0; link_idx < links.Size; link_idx++) {
// Do the geometry culling upfront.
Expand All @@ -627,7 +663,7 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
continue;
}
draw_list->ChannelsSetCurrent(0); // Background
auto color = ARROW_BACKGROUND_COLOR;
auto color = arrowBgColor;
auto thickness = ARROW_BACKGROUND_THICKNESS;

bool p1Inside = false;
Expand All @@ -643,12 +679,12 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
if (p1Inside && p2Inside) {
// Whatever the two edges completely within the view, gets brighter color and foreground.
draw_list->ChannelsSetCurrent(2);
color = ARROW_COLOR;
color = arrowColor;
thickness = ARROW_THICKNESS;
} else if (p1Inside || p2Inside) {
draw_list->ChannelsSetCurrent(1);
// Whenever one of the two ends is within the view, increase the color but keep the background
color = ARROW_HALFGROUND_COLOR;
color = arrowHalfColor;
thickness = ARROW_HALFGROUND_THICKNESS;
}

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

auto nodeBg = decideColorForNode(info);
auto nodeBg = decideColorForNode(info, state.topologyLightMode);

auto hovered = (node_hovered_in_list == node->ID || node_hovered_in_scene == node->ID || (node_hovered_in_list == -1 && node_selected == node->ID));
ImVec4 nodeBgColor = hovered ? nodeBg.hovered : nodeBg.normal;
Expand All @@ -776,7 +812,7 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,
auto pp1 = p1 + offset + slotPos;
auto pp2 = p2 + offset + slotPos;
auto pp3 = p3 + offset + slotPos;
auto color = ARROW_COLOR;
auto color = arrowColor;
if (node_idx == node_selected) {
color = ARROW_SELECTED_COLOR;
}
Expand Down Expand Up @@ -881,7 +917,7 @@ void showTopologyNodeGraph(WorkspaceGUIState& state,

ImGui::PopItemWidth();
ImGui::EndChild();
ImGui::PopStyleColor();
ImGui::PopStyleColor(2);
ImGui::PopStyleVar(2);
ImGui::EndGroup();

Expand Down
1 change: 1 addition & 0 deletions Framework/GUISupport/src/FrameworkGUIState.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ struct WorkspaceGUIState {
bool leftPaneVisible;
bool rightPaneVisible;
bool bottomPaneVisible;
bool topologyLightMode;
double startTime;
};

Expand Down
45 changes: 30 additions & 15 deletions Framework/GUISupport/src/PaletteHelpers.cxx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,35 @@
namespace o2::framework
{

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

} // namespace o2::framework