From 65959a5c4b9b0a0101fab6a9548fb8f6346d2faf Mon Sep 17 00:00:00 2001 From: Flummi Date: Sat, 20 Jan 2024 15:16:18 +0100 Subject: [PATCH] add three color gradient --- package/contents/config/main.xml | 3 +++ package/contents/ui/configGeneral.qml | 39 ++++++++++++++++++--------- package/contents/ui/lib/helper.js | 37 +++++++++++++++++++------ package/contents/ui/main.qml | 3 ++- 4 files changed, 61 insertions(+), 21 deletions(-) diff --git a/package/contents/config/main.xml b/package/contents/config/main.xml index 2fbc31d..6e671e5 100644 --- a/package/contents/config/main.xml +++ b/package/contents/config/main.xml @@ -20,6 +20,9 @@ #ff0000 + + #ffff00 + #008800 diff --git a/package/contents/ui/configGeneral.qml b/package/contents/ui/configGeneral.qml index d083196..f93d6a6 100644 --- a/package/contents/ui/configGeneral.qml +++ b/package/contents/ui/configGeneral.qml @@ -13,6 +13,7 @@ QQC2.Pane { property alias cfg_pollingrate: pollingrate.value property alias cfg_batteryheight: batteryheight.value property alias cfg_colorEmpty: colorEmpty.color + property alias cfg_colorHalf: colorHalf.color property alias cfg_colorFull: colorFull.color Kirigami.FormLayout { @@ -64,7 +65,7 @@ QQC2.Pane { // color config GridLayout { columns: 3 - rows: 2 + rows: 3 rowSpacing: 1 // first row @@ -81,7 +82,21 @@ QQC2.Pane { color: PlasmaCore.Theme.textColor } - // second row + // secod row + Text { + text: "half:" + color: PlasmaCore.Theme.textColor + } + KQControls.ColorButton { + id: colorHalf + color: cfg_colorHalf + } + Text { + text: cfg_colorHalf + color: PlasmaCore.Theme.textColor + } + + // third row Text { text: "full:" color: PlasmaCore.Theme.textColor @@ -104,43 +119,43 @@ QQC2.Pane { Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.1) + color: Helper.interpolateColor(.1, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.2) + color: Helper.interpolateColor(.2, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.3) + color: Helper.interpolateColor(.3, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.4) + color: Helper.interpolateColor(.4, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.5) + color: Helper.interpolateColor(.5, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.6) + color: Helper.interpolateColor(.6, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.7) + color: Helper.interpolateColor(.7, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.8) + color: Helper.interpolateColor(.8, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.9) + color: Helper.interpolateColor(.9, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } Text { text: "█" - color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 1) + color: Helper.interpolateColor( 1, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString()) } } } diff --git a/package/contents/ui/lib/helper.js b/package/contents/ui/lib/helper.js index 7ca75a6..08b42b0 100644 --- a/package/contents/ui/lib/helper.js +++ b/package/contents/ui/lib/helper.js @@ -8,13 +8,34 @@ const batteryIcon = batteryPercent => ({ "-1": "battery-ac-adapter" })[batteryPercent] ?? "audio-headphones-symbolic"; -const interpolateColor = (c0, c1, f) => { // https://stackoverflow.com/a/63775249 +const hex2rgb = hex => ({ + r: parseInt(hex.slice(1, 3), 16), + g: parseInt(hex.slice(3, 5), 16), + b: parseInt(hex.slice(5, 7), 16) +}); +const rgb2Hex = rgb => `#${((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1)}`; + +const interpolateColor = (f, c0, c1, c3) => { if(isNaN(f)) return "transparent"; - c0 = c0.replace('#', '').match(/.{1,2}/g).map(oct => parseInt(oct, 16) * (1-f)); - c1 = c1.replace('#', '').match(/.{1,2}/g).map(oct => parseInt(oct, 16) * f); - return "#" + [0, 1, 2] - .map(i => Math.min(Math.round(c0[i] + c1[i]), 255)) - .reduce((a, v) => ((a << 8) + v), 0) - .toString(16) - .padStart(6, "0"); + c0 = hex2rgb(c0); + c1 = hex2rgb(c1); + c3 = hex2rgb(c3); + let color1 = c0; + let color2 = c1; + let fade = f; + + if(c3) { + fade *= 2; + if(fade >= 1) { + fade--; + color1 = c1; + color2 = c3; + } + } + + return rgb2Hex({ + r: parseInt(~~(color1.r + ((color2.r - color1.r) * fade)), 10), + g: parseInt(~~(color1.g + ((color2.g - color1.g) * fade)), 10), + b: parseInt(~~(color1.b + ((color2.b - color1.b) * fade)), 10), + }); }; diff --git a/package/contents/ui/main.qml b/package/contents/ui/main.qml index 1269301..e46b5eb 100644 --- a/package/contents/ui/main.qml +++ b/package/contents/ui/main.qml @@ -12,6 +12,7 @@ Item { property int pollingrate: Plasmoid.configuration.pollingrate property int batteryheight: Plasmoid.configuration.batteryheight property string colorEmpty: Plasmoid.configuration.colorEmpty + property string colorHalf: Plasmoid.configuration.colorHalf property string colorFull: Plasmoid.configuration.colorFull property int batteryPercent: -2 @@ -52,7 +53,7 @@ Item { anchors.left: parent.left anchors.top: parent.top anchors.bottom: parent.bottom - color: Helper.interpolateColor(colorEmpty, colorFull, parseFloat("." + batteryPercent)) + color: Helper.interpolateColor(parseFloat("." + batteryPercent), colorEmpty, colorHalf, colorFull) width: parent.width * Math.max(0, Math.min(batteryPercent, 100)) / 100 } Kirigami.Icon { // headphones icon