|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Getting started with DWN window manager - learn the basics and become productive quickly.">
|
|
<title>Documentation - DWN Window Manager</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<a href="index.html" class="logo">
|
|
<span class="logo-icon">D</span>
|
|
<span>DWN</span>
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="features.html">Features</a></li>
|
|
<li><a href="installation.html">Install</a></li>
|
|
<li class="dropdown">
|
|
<a href="documentation.html" class="active">Docs</a>
|
|
<div class="dropdown-menu">
|
|
<a href="documentation.html">Getting Started</a>
|
|
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
|
<a href="configuration.html">Configuration</a>
|
|
<a href="ai-features.html">AI Features</a>
|
|
<a href="architecture.html">Architecture</a>
|
|
<a href="design-patterns.html">Design Patterns</a>
|
|
</div>
|
|
</li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn">Git</a></li>
|
|
</ul>
|
|
<div class="nav-toggle" onclick="toggleNav()">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<div class="docs-layout container">
|
|
<aside class="docs-sidebar">
|
|
<ul>
|
|
<li>
|
|
<span class="section-title">Getting Started</span>
|
|
<ul>
|
|
<li><a href="#introduction" class="active">Introduction</a></li>
|
|
<li><a href="#first-steps">First Steps</a></li>
|
|
<li><a href="#basic-concepts">Basic Concepts</a></li>
|
|
<li><a href="#tutorial">Interactive Tutorial</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<span class="section-title">Core Usage</span>
|
|
<ul>
|
|
<li><a href="#windows">Managing Windows</a></li>
|
|
<li><a href="#workspaces">Using Workspaces</a></li>
|
|
<li><a href="#layouts">Layout Modes</a></li>
|
|
<li><a href="#panels">Panels & Systray</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<span class="section-title">Reference</span>
|
|
<ul>
|
|
<li><a href="#api">WebSocket API</a></li>
|
|
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
|
<li><a href="configuration.html">Configuration</a></li>
|
|
<li><a href="ai-features.html">AI Features</a></li>
|
|
<li><a href="architecture.html">Architecture</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
<main class="docs-content">
|
|
<h1 id="introduction">Getting Started with DWN</h1>
|
|
<p class="lead">
|
|
Learn the fundamentals of DWN and become productive in minutes.
|
|
</p>
|
|
<h2 id="first-steps">First Steps</h2>
|
|
<p>
|
|
After <a href="installation.html">installing DWN</a> and starting your session,
|
|
you'll see a clean desktop with two panels: a top panel with workspace indicators,
|
|
taskbar, and system tray, and a bottom panel showing the clock.
|
|
</p>
|
|
<h3>Opening Your First Application</h3>
|
|
<p>Start by launching a terminal and application launcher:</p>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd></td>
|
|
<td>Open terminal</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Alt</kbd> + <kbd>F2</kbd></td>
|
|
<td>Open application launcher (dmenu/rofi)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Super</kbd> + <kbd>E</kbd></td>
|
|
<td>Open file manager</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Super</kbd> + <kbd>B</kbd></td>
|
|
<td>Open web browser</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<strong class="alert-title">Tip: Run the Tutorial</strong>
|
|
<p style="margin: 0;">Press <kbd>Super</kbd> + <kbd>T</kbd> to start an interactive
|
|
tutorial that will guide you through all essential shortcuts.</p>
|
|
</div>
|
|
<h2 id="basic-concepts">Basic Concepts</h2>
|
|
<h3>The Super Key</h3>
|
|
<p>
|
|
Most DWN shortcuts use the <kbd>Super</kbd> key (often the Windows key or Command key).
|
|
This keeps shortcuts separate from application shortcuts that typically use
|
|
<kbd>Ctrl</kbd> or <kbd>Alt</kbd>.
|
|
</p>
|
|
<h3>Focus Model</h3>
|
|
<p>
|
|
By default, DWN uses "click to focus" - you click on a window to focus it.
|
|
You can change this to "focus follows mouse" (sloppy focus) in the configuration.
|
|
</p>
|
|
<h3>Window Decorations</h3>
|
|
<p>
|
|
DWN features a professional borderless design for maximum screen utilization:
|
|
</p>
|
|
<ul>
|
|
<li><strong>0px borders</strong> - No visible borders around windows</li>
|
|
<li><strong>0px gaps</strong> - Windows tile edge-to-edge without spacing</li>
|
|
<li><strong>28px title bars</strong> - Minimal height showing window name and controls</li>
|
|
</ul>
|
|
<p>
|
|
The title bar color indicates focus:
|
|
</p>
|
|
<ul>
|
|
<li><strong>Bright title bar</strong> - Focused window</li>
|
|
<li><strong>Dim title bar</strong> - Unfocused window</li>
|
|
</ul>
|
|
<p>
|
|
This seamless design creates a smooth, professional appearance where content takes
|
|
center stage. All settings can be customized in <code>~/.config/dwn/config</code>.
|
|
</p>
|
|
<h2 id="tutorial">Interactive Tutorial</h2>
|
|
<p>
|
|
DWN includes a built-in interactive tutorial that teaches you essential shortcuts
|
|
step by step. The tutorial:
|
|
</p>
|
|
<ul>
|
|
<li>Shows instructions for each shortcut</li>
|
|
<li>Waits for you to press the correct keys</li>
|
|
<li>Automatically advances when you complete each step</li>
|
|
<li>Covers all essential shortcuts from basic to advanced</li>
|
|
</ul>
|
|
<div class="card">
|
|
<h3>Start the Tutorial</h3>
|
|
<p>Press <kbd>Super</kbd> + <kbd>T</kbd> at any time to start or resume the tutorial.</p>
|
|
</div>
|
|
<h2 id="demo">Demo Mode</h2>
|
|
<p>
|
|
DWN includes an automated demo mode that showcases all features without requiring
|
|
any interaction. The demo:
|
|
</p>
|
|
<ul>
|
|
<li>Automatically demonstrates window management operations</li>
|
|
<li>Shows workspace switching and layout changes</li>
|
|
<li>Highlights panel features and system tray widgets</li>
|
|
<li>Demonstrates AI integration capabilities (if configured)</li>
|
|
<li>Displays the complete keyboard shortcut reference</li>
|
|
</ul>
|
|
<div class="card">
|
|
<h3>Start Demo Mode</h3>
|
|
<p>Press <kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd> to start the demo.
|
|
Press the same shortcut again to stop it at any time.</p>
|
|
</div>
|
|
<h2 id="windows">Managing Windows</h2>
|
|
<h3>Window Operations</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>Alt</kbd> + <kbd>F4</kbd></td>
|
|
<td>Close focused window</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Alt</kbd> + <kbd>Tab</kbd></td>
|
|
<td>Cycle to next window</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
|
|
<td>Cycle to previous window</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Alt</kbd> + <kbd>F10</kbd></td>
|
|
<td>Toggle maximize</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Alt</kbd> + <kbd>F11</kbd></td>
|
|
<td>Toggle fullscreen</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Super</kbd> + <kbd>F9</kbd></td>
|
|
<td>Toggle floating for current window</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<h3>Moving and Resizing</h3>
|
|
<p>In floating mode, you can move and resize windows with the mouse:</p>
|
|
<ul>
|
|
<li><strong>Move</strong> - Click and drag the title bar</li>
|
|
<li><strong>Resize</strong> - Drag any window edge or corner</li>
|
|
</ul>
|
|
<h2 id="workspaces">Using Workspaces</h2>
|
|
<p>
|
|
DWN provides 9 virtual workspaces to organize your windows. You can see which
|
|
workspaces are active in the top panel.
|
|
</p>
|
|
<h3>Workspace Navigation</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>F1</kbd> - <kbd>F9</kbd></td>
|
|
<td>Switch to workspace 1-9</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Shift</kbd> + <kbd>F1</kbd> - <kbd>F9</kbd></td>
|
|
<td>Move window to workspace 1-9</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Right</kbd></td>
|
|
<td>Next workspace</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Left</kbd></td>
|
|
<td>Previous workspace</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<h3>Workspace Organization Tips</h3>
|
|
<ul>
|
|
<li><strong>Workspace 1</strong> - Main work (editor, terminal)</li>
|
|
<li><strong>Workspace 2</strong> - Web browser, documentation</li>
|
|
<li><strong>Workspace 3</strong> - Communication (email, chat)</li>
|
|
<li><strong>Workspace 4-9</strong> - Project-specific contexts</li>
|
|
</ul>
|
|
<h2 id="layouts">Layout Modes</h2>
|
|
<p>
|
|
DWN supports three layout modes. Press <kbd>Super</kbd> + <kbd>Space</kbd> to cycle
|
|
through them.
|
|
</p>
|
|
<div class="features-grid" style="grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0;">
|
|
<div class="card" style="padding: 1.5rem;">
|
|
<h4>Tiling</h4>
|
|
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
|
Windows automatically arranged in master-stack layout.
|
|
Perfect for development workflows.
|
|
</p>
|
|
</div>
|
|
<div class="card" style="padding: 1.5rem;">
|
|
<h4>Floating</h4>
|
|
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
|
Traditional overlapping windows.
|
|
Move and resize freely.
|
|
</p>
|
|
</div>
|
|
<div class="card" style="padding: 1.5rem;">
|
|
<h4>Monocle</h4>
|
|
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
|
One fullscreen window at a time.
|
|
Great for focused work.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<h3>Tiling Layout Controls</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>Super</kbd> + <kbd>H</kbd></td>
|
|
<td>Shrink master area</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Super</kbd> + <kbd>L</kbd></td>
|
|
<td>Expand master area</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Super</kbd> + <kbd>I</kbd></td>
|
|
<td>Increase master window count</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Super</kbd> + <kbd>D</kbd></td>
|
|
<td>Decrease master window count</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<h2 id="panels">Panels & System Tray</h2>
|
|
<h3>Top Panel</h3>
|
|
<p>The top panel contains:</p>
|
|
<ul>
|
|
<li><strong>Workspace indicators</strong> - Click to switch, highlighted when occupied</li>
|
|
<li><strong>Taskbar</strong> - Shows windows on current workspace</li>
|
|
<li><strong>System tray</strong> - Battery, volume, WiFi (see below)</li>
|
|
</ul>
|
|
<h3>System Tray</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Indicator</th>
|
|
<th>Click</th>
|
|
<th>Right-click</th>
|
|
<th>Scroll</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Volume</td>
|
|
<td>Show slider</td>
|
|
<td>Toggle mute</td>
|
|
<td>Adjust volume</td>
|
|
</tr>
|
|
<tr>
|
|
<td>WiFi</td>
|
|
<td>Show networks</td>
|
|
<td>Disconnect</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Battery</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<h3>Bottom Panel</h3>
|
|
<p>
|
|
The bottom panel shows the current time and a scrolling news ticker. Open
|
|
the current article with <kbd>Super</kbd> + <kbd>Return</kbd>. Both panels can
|
|
be hidden in the configuration if you prefer a minimal setup.
|
|
</p>
|
|
<h2 id="api">WebSocket API</h2>
|
|
<p>
|
|
DWN exposes a real-time WebSocket API (default port <code>8777</code>) that allows for
|
|
complete programmatic control of the window manager.
|
|
</p>
|
|
<div class="card">
|
|
<h3>Connecting</h3>
|
|
<p>Endpoint: <code>ws://localhost:8777/ws</code></p>
|
|
<p>The API must be enabled in your configuration:</p>
|
|
<pre><code>[api]
|
|
enabled = true
|
|
port = 8777</code></pre>
|
|
</div>
|
|
<h3>Supported Commands</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Command</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>get_status</code></td>
|
|
<td>Get WM version and current workspace ID</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>get_workspaces</code></td>
|
|
<td>List all workspaces and their client counts</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>get_clients</code></td>
|
|
<td>Get details of all managed windows</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>switch_workspace</code></td>
|
|
<td>Change to a specific workspace ID</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>run_command</code></td>
|
|
<td>Execute a shell command</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>focus_client</code></td>
|
|
<td>Focus a specific window by ID</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3>Advanced Examples</h3>
|
|
<p>
|
|
Check the <code>scripts/api_examples/</code> directory in the source tree for
|
|
sophisticated implementations:
|
|
</p>
|
|
<ul>
|
|
<li><strong>Window Picker</strong> (<code>window_picker_fzf.py</code>) - Fuzzy finder for windows.</li>
|
|
<li><strong>Session Manager</strong> (<code>session_manager.py</code>) - Save/restore window layouts.</li>
|
|
<li><strong>Web Remote</strong> (<code>web_remote.html</code>) - Browser-based dashboard.</li>
|
|
<li><strong>Auto-Manager</strong> (<code>listen.py</code>) - Proactive workspace optimization.</li>
|
|
</ul>
|
|
|
|
<h2>Next Steps</h2>
|
|
<p>Now that you know the basics, explore these topics:</p>
|
|
<ul>
|
|
<li><a href="shortcuts.html">Complete Keyboard Shortcuts Reference</a></li>
|
|
<li><a href="configuration.html">Customizing DWN</a></li>
|
|
<li><a href="ai-features.html">Using AI Features</a></li>
|
|
</ul>
|
|
</main>
|
|
</div>
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-section">
|
|
<h4>DWN Window Manager</h4>
|
|
<p style="color: var(--text-muted);">
|
|
A modern, production-ready X11 window manager with XFCE-like
|
|
functionality and optional AI integration.
|
|
</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Documentation</h4>
|
|
<ul>
|
|
<li><a href="documentation.html">Getting Started</a></li>
|
|
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
|
<li><a href="configuration.html">Configuration</a></li>
|
|
<li><a href="architecture.html">Architecture</a></li>
|
|
<li><a href="design-patterns.html">Design Patterns</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Resources</h4>
|
|
<ul>
|
|
<li><a href="features.html">Features</a></li>
|
|
<li><a href="installation.html">Installation</a></li>
|
|
<li><a href="ai-features.html">AI Integration</a></li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn">Git</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Community</h4>
|
|
<ul>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn/issues">Issue Tracker</a></li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn/discussions">Discussions</a></li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>DWN Window Manager by retoor <retoor@molodetz.nl> - MIT License</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|