Flummi/headsetcontrol-battery-widget
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add three color gradient

Browse Source
This commit is contained in:
Flummi 2024-01-20 15:16:18 +01:00
parent 1af112eb52
commit 65959a5c4b
Signed by: Flummi
GPG Key ID: AA2AEF822A6F4817
4 changed files with 61 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package/contents/config/main.xml
View File

@ -20,6 +20,9 @@
<entry name="colorEmpty" type="String">
<default>#ff0000</default>
</entry>
<entry name="colorHalf" type="String">
<default>#ffff00</default>
</entry>
<entry name="colorFull" type="String">
<default>#008800</default>
</entry>

39
package/contents/ui/configGeneral.qml
View File

@ -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())
}
}
}

37
package/contents/ui/lib/helper.js
View File

@ -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),
});
};

3
package/contents/ui/main.qml
View File

@ -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