From 9d4d14138e8a872f8af8f43c05d72838d034f6c8 Mon Sep 17 00:00:00 2001 From: Damocles Date: Mon, 13 Apr 2026 08:54:10 +0200 Subject: [PATCH] overview backdrop: dark bg, gradient-filled hexagons without outlines --- modules/OverviewBackdrop.qml | 273 ++++++++++++----------------------- 1 file changed, 91 insertions(+), 182 deletions(-) diff --git a/modules/OverviewBackdrop.qml b/modules/OverviewBackdrop.qml index c4ea06d..5fdc7d1 100644 --- a/modules/OverviewBackdrop.qml +++ b/modules/OverviewBackdrop.qml @@ -20,69 +20,63 @@ PanelWindow { anchors.right: true anchors.bottom: true - // Dark base tint + // Solid dark background Rectangle { anchors.fill: parent color: M.Theme.base00 - opacity: 0.4 + opacity: 0.85 } - // Gradient wash — slowly shifting via animated stop positions - Rectangle { - anchors.fill: parent - property real _t: 0 - NumberAnimation on _t { - from: 0 - to: 1 - duration: 20000 - loops: Animation.Infinite - } - gradient: Gradient { - orientation: Gradient.Horizontal - GradientStop { - position: 0 - color: Qt.rgba(M.Theme.base0C.r, M.Theme.base0C.g, M.Theme.base0C.b, 0.2) - } - GradientStop { - position: 0.5 - color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.12) - } - GradientStop { - position: 1 - color: Qt.rgba(M.Theme.base09.r, M.Theme.base09.g, M.Theme.base09.b, 0.2) - } - } - } - - // Hex grid + // Hex grid with gradient-filled cells, no outlines Canvas { anchors.fill: parent - opacity: 0.12 + onPaint: { const ctx = getContext("2d"); const w = width, h = height; ctx.clearRect(0, 0, w, h); - ctx.strokeStyle = M.Theme.base0D.toString(); - ctx.lineWidth = 0.5; + const size = 50; const dx = size * 1.5; const dy = size * Math.sqrt(3); - for (let col = -1; col < w / dx + 1; col++) { - for (let row = -1; row < h / dy + 1; row++) { + + const c0 = M.Theme.base0C; + const c1 = M.Theme.base0E; + const c2 = M.Theme.base09; + + for (let col = -1; col < w / dx + 2; col++) { + for (let row = -1; row < h / dy + 2; row++) { const cx = col * dx; const cy = row * dy + (col % 2 ? dy / 2 : 0); + + // Position-based color interpolation across the screen + const fx = Math.max(0, Math.min(1, cx / w)); + const fy = Math.max(0, Math.min(1, cy / h)); + + // Blend: left=base0C, center=base0E, right=base09, modulated by y + const t = fx; + const r = t < 0.5 ? c0.r + (c1.r - c0.r) * (t * 2) : c1.r + (c2.r - c1.r) * ((t - 0.5) * 2); + const g = t < 0.5 ? c0.g + (c1.g - c0.g) * (t * 2) : c1.g + (c2.g - c1.g) * ((t - 0.5) * 2); + const b = t < 0.5 ? c0.b + (c1.b - c0.b) * (t * 2) : c1.b + (c2.b - c1.b) * ((t - 0.5) * 2); + + // Opacity varies: brighter near edges, dimmer in center + const distFromCenter = Math.sqrt(Math.pow(fx - 0.5, 2) + Math.pow(fy - 0.5, 2)); + const alpha = 0.03 + distFromCenter * 0.06; + + ctx.fillStyle = "rgba(" + Math.round(r * 255) + "," + Math.round(g * 255) + "," + Math.round(b * 255) + "," + alpha + ")"; + ctx.beginPath(); for (let i = 0; i < 6; i++) { const angle = Math.PI / 3 * i - Math.PI / 6; - const px = cx + size * 0.5 * Math.cos(angle); - const py = cy + size * 0.5 * Math.sin(angle); + const px = cx + size * 0.48 * Math.cos(angle); + const py = cy + size * 0.48 * Math.sin(angle); if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py); } ctx.closePath(); - ctx.stroke(); + ctx.fill(); } } } @@ -93,7 +87,7 @@ PanelWindow { id: hScan width: 2 height: parent.height - opacity: 0.25 + opacity: 0.2 color: M.Theme.base0D NumberAnimation on x { from: -100 @@ -116,35 +110,17 @@ PanelWindow { } GradientStop { position: 1 - color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.12) - } - } - } - Rectangle { - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.left: parent.right - width: 40 - gradient: Gradient { - orientation: Gradient.Horizontal - GradientStop { - position: 0 - color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.06) - } - GradientStop { - position: 1 - color: "transparent" + color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.08) } } } } - // Vertical scan line — different speed, different color + // Vertical scan line Rectangle { - id: vScan width: parent.width height: 1 - opacity: 0.15 + opacity: 0.12 color: M.Theme.base0E NumberAnimation on y { from: -50 @@ -153,35 +129,16 @@ PanelWindow { loops: Animation.Infinite easing.type: Easing.InOutSine } - - Rectangle { - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.top - height: 80 - gradient: Gradient { - GradientStop { - position: 0 - color: "transparent" - } - GradientStop { - position: 1 - color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.06) - } - } - } } - // Diagonal scan — third line, slowest, warm color + // Diagonal scan Rectangle { - id: diagScan width: 1 height: parent.height * 1.5 - opacity: 0.1 + opacity: 0.06 color: M.Theme.base09 rotation: 30 transformOrigin: Item.Top - SequentialAnimation on x { loops: Animation.Infinite NumberAnimation { @@ -199,136 +156,88 @@ PanelWindow { } } - // Corner accent marks — top-left - Rectangle { - x: 40 - y: 40 - width: 60 - height: 1 - color: M.Theme.base0C - opacity: 0.3 - } - Rectangle { - x: 40 - y: 40 - width: 1 - height: 60 - color: M.Theme.base0C - opacity: 0.3 - } - // Top-right - Rectangle { - x: parent.width - 100 - y: 40 - width: 60 - height: 1 - color: M.Theme.base09 - opacity: 0.3 - } - Rectangle { - x: parent.width - 41 - y: 40 - width: 1 - height: 60 - color: M.Theme.base09 - opacity: 0.3 - } - // Bottom-left - Rectangle { - x: 40 - y: parent.height - 41 - width: 60 - height: 1 - color: M.Theme.base0E - opacity: 0.3 - } - Rectangle { - x: 40 - y: parent.height - 100 - width: 1 - height: 60 - color: M.Theme.base0E - opacity: 0.3 - } - // Bottom-right - Rectangle { - x: parent.width - 100 - y: parent.height - 41 - width: 60 - height: 1 - color: M.Theme.base08 - opacity: 0.3 - } - Rectangle { - x: parent.width - 41 - y: parent.height - 100 - width: 1 - height: 60 - color: M.Theme.base08 - opacity: 0.3 - } - - // Pulsing corner dots + // Corner accent marks Repeater { model: [ { cx: 40, cy: 40, - col: M.Theme.base0C + col: M.Theme.base0C, + dx: 1, + dy: 1 }, { - cx: root.width - 41, + cx: -100, cy: 40, - col: M.Theme.base09 + col: M.Theme.base09, + dx: -1, + dy: 1 }, { cx: 40, - cy: root.height - 41, - col: M.Theme.base0E + cy: -100, + col: M.Theme.base0E, + dx: 1, + dy: -1 }, { - cx: root.width - 41, - cy: root.height - 41, - col: M.Theme.base08 + cx: -100, + cy: -100, + col: M.Theme.base08, + dx: -1, + dy: -1 } ] - Rectangle { + Item { required property var modelData - x: modelData.cx - 2 - y: modelData.cy - 2 - width: 5 - height: 5 - radius: 2.5 - color: modelData.col + x: modelData.dx > 0 ? modelData.cx : root.width + modelData.cx + y: modelData.dy > 0 ? modelData.cy : root.height + modelData.cy - SequentialAnimation on opacity { - loops: Animation.Infinite - NumberAnimation { - to: 0.15 - duration: 1500 + Math.random() * 1000 - easing.type: Easing.InOutSine - } - NumberAnimation { - to: 0.6 - duration: 1500 + Math.random() * 1000 - easing.type: Easing.InOutSine + Rectangle { + width: 60 + height: 1 + color: parent.modelData.col + opacity: 0.25 + } + Rectangle { + width: 1 + height: 60 + color: parent.modelData.col + opacity: 0.25 + } + + Rectangle { + width: 5 + height: 5 + radius: 2.5 + color: parent.modelData.col + SequentialAnimation on opacity { + loops: Animation.Infinite + NumberAnimation { + to: 0.1 + duration: 1500 + Math.random() * 1000 + easing.type: Easing.InOutSine + } + NumberAnimation { + to: 0.5 + duration: 1500 + Math.random() * 1000 + easing.type: Easing.InOutSine + } } } } } - // Floating particles — slow drifting dots + // Floating particles Repeater { - model: 20 + model: 15 Rectangle { required property int index width: 2 height: 2 radius: 1 color: [M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base09, M.Theme.base08][index % 5] - opacity: 0.15 + Math.random() * 0.15 - x: Math.random() * root.width - y: Math.random() * root.height + opacity: 0.1 + Math.random() * 0.1 NumberAnimation on x { from: -20