add three color gradient
This commit is contained in:
parent
1af112eb52
commit
65959a5c4b
GPG Key ID:
AA2AEF822A6F4817
@ -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>
|
||||
|
||||
@ -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())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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),
|
||||
});
|
||||
};
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user