1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
/* Copyright (C) 2015, Jaguar Land Rover. All Rights Reserved.
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import QtQuick 2.0
Item {
height: 100
width: childrenRect.width
property alias value: shader.value
FontLoader {
source: "fontawesome-webfont.ttf"
}
Row {
spacing: 28
Text {
anchors.verticalCenter: parent.verticalCenter
font.family: "FontAwesome"
font.pixelSize: 30
color: "white"
text: "\uf068"
MouseArea {
anchors.fill: parent
onClicked: shader.value = Math.max(shader.value - 0.1, 0.0)
}
}
ShaderEffect {
id: shader
width: 85
height: 100
property color bgColor: "#333"
property color fgColor: "#b2f0ff"
property real value: 0.5
fragmentShader: "
uniform lowp float qt_Opacity;
uniform lowp float value;
uniform lowp vec4 bgColor;
uniform lowp vec4 fgColor;
varying highp vec2 qt_TexCoord0;
void main(void) {
lowp float x = min(qt_TexCoord0.x, 1.0 - qt_TexCoord0.x);
lowp float y = min(qt_TexCoord0.y, 1.0 - qt_TexCoord0.y);
lowp float c = y - 0.5 * (0.5 - x);
lowp float outside = smoothstep(0.0, 0.01, c);
lowp float rim = smoothstep(0.1, 0.11, c - step(x, 0.101));
lowp float inside = smoothstep(0.125, 0.135, c - step(x, 0.125));
lowp vec4 color = mix(bgColor, fgColor, step(qt_TexCoord0.x, value));
color = mix(color, bgColor, inside * 0.8);
color = mix(color, vec4(1.0), (rim - inside) * 0.6);
gl_FragColor = mix(vec4(0.0), color, outside) * qt_Opacity;
}
"
MouseArea {
anchors.fill: parent
onPositionChanged: {
shader.value = Math.min(Math.max(mouse.x / width, 0.0), 1.0)
}
}
Text {
anchors.centerIn: parent
font.family: "Source Sans Pro"
font.weight: Font.Bold
font.pixelSize: 30
color: "white"
text: Math.round(shader.value * 100)
}
}
Text {
anchors.verticalCenter: parent.verticalCenter
font.family: "FontAwesome"
font.pixelSize: 30
color: "white"
text: "\uf067"
MouseArea {
anchors.fill: parent
onClicked: shader.value = Math.min(shader.value + 0.1, 1.0)
}
}
}
}
|
