medvedych/harbour-seaprint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Support multi-colored supplies

Browse source
This commit is contained in:
Anton Thomasson 2021-08-06 19:44:51 +02:00
parent 33388dd4fb
commit f9a64b203e
1 changed files with 52 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
qml/components/CylinderGraph.qml
View file

@ -3,7 +3,7 @@ import Sailfish.Silica 1.0
Item { Item {
id: cylinderGraph id: cylinderGraph
property color color property string color
property real value property real value
width: Theme.itemSizeSmall/2 width: Theme.itemSizeSmall/2
height: Theme.itemSizeSmall height: Theme.itemSizeSmall
@ -16,39 +16,71 @@ Item {
width: Theme.itemSizeExtraSmall width: Theme.itemSizeExtraSmall
height: Theme.itemSizeExtraSmall/3 height: Theme.itemSizeExtraSmall/3
rotation: 90 rotation: 270
transformOrigin: Item.Center transformOrigin: Item.Center
gradient: Gradient { gradient: Gradient {
GradientStop { position: 0.0; color: "#80000000"} GradientStop { position: 0.0; color: "#40888888"}
GradientStop { position: 0.2; color: "#40FFFFFF"} GradientStop { position: 0.1; color: "#20FFFFFF"}
GradientStop { position: 0.4; color: "#00000000"} GradientStop { position: 0.2; color: "#00000000"}
GradientStop { position: 0.8; color: "#00000000"} GradientStop { position: 0.6; color: "#00000000"}
GradientStop { position: 0.9; color: "#40FFFFFF"} GradientStop { position: 0.8; color: "#20FFFFFF"}
GradientStop { position: 1.0; color: "#80000000"} GradientStop { position: 1.0; color: "#40888888"}
} }
} }
Rectangle { Rectangle {
id: fill
width: Theme.itemSizeExtraSmall*parent.value width: Theme.itemSizeExtraSmall*parent.value
height: (Theme.itemSizeExtraSmall/3) height: (Theme.itemSizeExtraSmall/3)
rotation: 90 rotation: 270
transformOrigin: Item.Center transformOrigin: Item.Center
gradient: Gradient { gradient: Gradient {
GradientStop { position: 0.0; color: withOpacity(0.2, cylinderGraph.color)} id: gradient
GradientStop { position: 0.1; color: cylinderGraph.color} }
GradientStop { position: 0.9; color: cylinderGraph.color}
GradientStop { position: 1.0; color: withOpacity(0.2, cylinderGraph.color)} Component
{
id: stopComponent
GradientStop {}
}
function splitColors(color) {
if(color.indexOf("#") != 0)
{
return ["black"];
}
var colors = [];
var parts = color.split("#");
for(var i = 1; i < parts.length; i++)
{
colors.push("#"+parts[i])
}
return colors;
}
Component.onCompleted: {
var colors = splitColors(cylinderGraph.color);
var stops = [];
stops.push(stopComponent.createObject(fill, {"position": 0.0, "color": "#00000000"}));
stops.push(stopComponent.createObject(fill, {"position": 0.1, "color": colors[0]}));
for(var i = 0; i < colors.length; i++)
{
var pos = 0.1+(i+0.5)*(0.8/colors.length);
stops.push(stopComponent.createObject(fill, {"position": pos, "color": colors[i]}));
}
stops.push(stopComponent.createObject(fill, {"position": 0.9, "color": colors[colors.length-1]}));
stops.push(stopComponent.createObject(fill, {"position": 1.0, "color": "#00000000"}));
gradient.stops = stops;
} }
anchors.horizontalCenter: effect.horizontalCenter anchors.horizontalCenter: effect.horizontalCenter
anchors.bottom: effect.bottom anchors.bottom: effect.bottom
anchors.bottomMargin: -1*(Theme.itemSizeExtraSmall-Theme.itemSizeExtraSmall*parent.value)/2 anchors.bottomMargin: -1*(effect.width-width)/2
// color: cylinderGraph.color
// opacity: 0.7
}
function withOpacity(opacity, color) {
Qt.rgba(color.r, color.g, color.b, opacity)
} }
} }