[AI Readability Summary] This article breaks down a PC-based “Data Galaxy” 3D data visualization workbench built on HarmonyOS 6 (API 23). Its core capabilities include an immersive lighting title bar, floating dataset navigation, multi-window coordination, and Canvas-based 3D chart rendering. It addresses common issues in traditional BI tools, such as heavy UI chrome, fragmented windows, and weak visual focus. Keywords: HarmonyOS 6, Floating Navigation, Immersive Lighting
The technical specification snapshot outlines the project baseline
| Parameter | Description |
|---|---|
| Platform | HarmonyOS 6 / API 23 / PC |
| Language | ArkTS / ETS |
| UI Framework | ArkUI + UIDesignKit |
| Graphics Capability | GraphicsKit + Canvas |
| Window Mode | Free Window + FullScreen |
| Core Features | Floating Navigation, Immersive Lighting, Multi-window Coordination, 3D Visualization |
| Core Dependencies | @kit.AbilityKit, @kit.ArkUI, @kit.UIDesignKit, @kit.BasicServicesKit, @kit.GraphicsKit |
| GitHub Stars | Not provided in the original article |
AI Visual Insight: This interface presents an immersive data workbench on a dark background. A high-contrast chart canvas sits at the center, a semi-transparent title area spans the top, and floating tabs at the bottom support dataset switching. The design emphasizes glow, depth, and layered shadows, showing a clear intent to reduce traditional window framing, strengthen visual focus, and improve cross-window coordination.
This project reconstructs the data analysis interface from a tool panel into an immersive workbench
The original solution centers on two new HarmonyOS 6 capabilities: systemMaterialEffect and floating navigation. The former delivers material effects, lighting, and translucency, while the latter enables high-frequency switching without compressing the canvas area.
Unlike typical BI tools, “Data Galaxy” does not simply place charts inside a conventional desktop shell. Instead, it lets the title bar, bottom navigation, child windows, and main canvas share the same theme color and focus state, creating a unified visual language.
The architecture emphasizes synchronization across the main window, tool windows, and the global theme
The project can be divided into three layers: the ArkUI component layer, the PC multi-window layer, and the global state synchronization layer. The component layer handles the title bar, navigation bar, and canvas. The window layer manages child windows such as details, configuration, and alerts. The state layer uses AppStorage to synchronize theme color and focus.
// Global theme synchronization example
AppStorage.setOrCreate('global_theme_color', '#FF6B6B'); // Synchronize the global theme color
AppStorage.watch('global_theme_color', (color: string) => {
console.info(`Theme color updated: ${color}`); // Listen for changes and refresh cross-window lighting effects
});This code elevates the theme color from local component state to a cross-window shared state.
The environment configuration must support immersive windows and graphics rendering
At the dependency level, the project requires AbilityKit, ArkUI, UIDesignKit, and GraphicsKit. These correspond to the window lifecycle, declarative UI, system design components, and drawing capabilities.
The original article declares network and document read/write permissions, but it also makes clear that this project is primarily a local analysis tool. Network permission is not part of the critical path. The real requirements are free-form windows, transparent backgrounds, and fullscreen layout.
{
"dependencies": {
"@kit.AbilityKit": "^6.1.0",
"@kit.ArkUI": "^6.1.0",
"@kit.UIDesignKit": "^6.1.0",
"@kit.GraphicsKit": "^6.1.0"
}
}This configuration defines the core system capability packages required by the project.
Main window initialization determines whether the immersive effect can work at all
The key goal of main window initialization is not simply to make the app run. It is to create room for lighting effects to propagate. That includes disabling the system title bar, enabling fullscreen layout, setting a transparent background, and allowing shadows and rounded corners.
await this.mainWindow.setWindowTitleBarEnable(false); // Disable the system title bar
await this.mainWindow.setWindowLayoutFullScreen(true); // Extend content into the fullscreen safe area
await this.mainWindow.setWindowBackgroundColor('#00000000'); // Use a transparent background so lighting can pass throughThese three lines jointly define the conditions required for a custom immersive UI.
The immersive lighting title bar serves both branding and focus feedback
The title bar uses HdsNavigation with SystemMaterialEffect.IMMERSIVE. This is not only for visual polish. It also makes window focus perceptible and turns the active dataset color into the main visual thread.
Reducing transparency and shadow intensity when the window loses focus helps avoid visual noise in a multi-window layout. Updating border and shadow colors when the dataset changes creates the subtle impression that the data itself is the focal point.
HdsNavigation({
title: `Data Galaxy - ${this.currentDataset}`,
systemMaterialEffect: SystemMaterialEffect.IMMERSIVE // Enable immersive material
})
.border({ color: this.getThemeColor() }) // Reinforce focus with the dataset theme color
.shadow({ radius: 15, color: this.getThemeColor() });This code turns the title bar from a static container into a glowing carrier of the data theme.
Floating navigation matters because it combines high-frequency switching with low occlusion
The bottom tabs use a glassmorphism style and support three transparency levels: strong, balanced, and weak. In a data analysis scenario, this approach fits large screens better than traditional side navigation because it reduces horizontal space consumption.
The original article also highlights getWindowAvoidArea, which shows that the project accounts for the bottom system indicator area. Combined with a long-press gesture that expands the transparency panel, the navigation bar becomes more than a switcher. It acts as an adjustable desktop-grade control panel.
const avoidArea = mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
this.bottomAvoidHeight = avoidArea.bottomRect.height; // Dynamically get the bottom safe-area height
this.navTransparency = 0.70; // Default to balanced transparencyThis logic ensures that the floating navigation avoids system-reserved space while preserving content readability.
The 3D data canvas achieves immersion through Canvas and ambient lighting layers together
The main visualization area does not just draw a bar chart. It combines a dynamic ambient-light background, 3D bars, and informational overlays. The background glow follows theme color changes, the bars use top and side faces to create depth, and the bottom overlay supplements chart semantics.
The key benefit of this design is that even if the chart itself remains a basic bar chart, spatial depth and material cues raise the overall information hierarchy.
context.fillRect(x, y, width, height); // Draw the main face of the bar
context.fillStyle = this.lightenColor(color, 20); // Brighten the top face to simulate lighting
context.fillStyle = this.darkenColor(color, 20); // Darken the side face to simulate depthThis rendering logic uses light and shadow variation to simulate the illuminated structure of a 3D bar.
Multi-window management enables collaborative analysis across details, configuration, and alerts
WindowManager is the part of the project that comes closest to a true desktop application backbone. It centrally manages the main window, child windows, focus changes, and theme synchronization, allowing detail, configuration, and alert windows to share a common visual context.
This works better than single-page modal overlays in PC scenarios because analysts often need to inspect charts, review details, and tune parameters at the same time. The multi-window architecture maps directly to the real workflow.
const subWindow = await this.mainWindow.createSubWindow(config.name); // Create a child window
await subWindow.setWindowTopmost(true); // Keep the tool window on top
AppStorage.setOrCreate('window_focused', isFocused); // Synchronize focus stateThis code shows that child windows are not just auxiliary pages. They are independent analysis tools with their own interaction role.
Performance optimization should focus on lighting effects and window lifecycle rather than chart algorithms
The optimization advice in the original article is very explicit: pause animations when the page is not visible, create nonessential windows lazily, and release resources immediately after closing windows. That shows the largest cost in this type of UI often comes from persistent blur, animation, and multi-window retention rather than one-time chart drawing.
If you later connect a real-time data stream, you should continue to control the blur radius of glow layers, redraw frequency, and child window count. Otherwise, GPU pressure can rise quickly on high-resolution PCs.
aboutToDisappear(): void {
this.lightAnimationRunning = false; // Pause lighting animation when the page is about to disappear
}
await WindowManager.getInstance().closeToolWindow(name); // Release window resources immediately after closingThe goal of this code is to keep visual quality grounded in controllable resource usage.
The conclusion is that this solution fits desktop data products with high information density
The value of “Data Galaxy” does not lie in any single control. It comes from combining HarmonyOS 6 floating navigation, immersive lighting, free-form windows, and Canvas into a complete PC data workbench pattern.
If you are building a desktop dashboard, operations analysis console, monitoring center, or real-time alerting system, the most transferable lessons are not the exact colors. They are these three principles: drive global state with theme color, minimize navigation intrusion, and coordinate tool windows as first-class collaborators.
The FAQ clarifies key implementation decisions
1. Why must this project disable the system title bar?
Because the immersive title bar depends on custom drawing with HdsNavigation and SystemMaterialEffect.IMMERSIVE. If the system title bar remains enabled, it creates duplicated visual layers and prevents transparent backgrounds, theme-driven borders, and focus-linked lighting effects from working together.
2. What is the core advantage of floating navigation over a traditional sidebar?
The main advantage is reduced horizontal space usage, which makes it ideal for chart-heavy PC layouts. It preserves a larger main canvas area while still supporting transparency adjustment, long-press expansion, and safe-area avoidance, balancing information density with interaction efficiency.
3. What mechanism works best for synchronizing lighting effects across multiple windows?
This project uses AppStorage as a global state bus, which fits small to medium HarmonyOS desktop applications well. It is sufficient for synchronizing theme color, focus state, and window actions, while keeping the structure simple, the interactions clear, and maintenance manageable.
Core Summary: This article reconstructs the key implementation of the “Data Galaxy” project and focuses on HarmonyOS 6 API 23 capabilities for PC, including floating navigation, immersive lighting, multi-window coordination, and a 3D data canvas. It also provides the architecture, configuration, core components, and performance optimization takeaways.