Skip to content

Commit 3832776

Browse files
githubuser0xFFFFgithubuser0xFFFF
committed
Implemented flat style for syringe UI and added syringe QML component
1 parent 09f173f commit 3832776

16 files changed

+600
-15
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
build
2+
/src/virtualkeyboard.pro.user

‎examples/qmlapp/MainContainer.qml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Rectangle {
3535
height: parent.height
3636
anchors.centerIn: parent
3737
//anchors.horizontalCenterOffset: 5
38-
Main {
38+
MainQuickControls {
3939
id: mainQml
4040
anchors.left: parent.left
4141
anchors.top: parent.top

‎examples/qmlapp/MainDesigner.qml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import QtQuick 2.0
2+
import QtQuick.Controls 1.2
3+
import QtQuick.Layouts 1.0
4+
5+
Rectangle {
6+
width: 800
7+
height: 480
8+
9+
Flickable {
10+
id: flickable1
11+
anchors.fill: parent
12+
flickableDirection: Flickable.VerticalFlick
13+
}
14+
}

‎examples/qmlapp/MainQuickControls.qml

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import QtQuick 2.3
2+
import QtQuick.Controls 1.2
3+
import QtQuick.Controls.Styles 1.2
4+
import "."
5+
6+
Rectangle {
7+
id: root
8+
width: parent.width
9+
height: parent.height
10+
color: "white"
11+
12+
Flickable {
13+
id: flickable
14+
anchors.fill: parent
15+
contentWidth: content.width
16+
contentHeight: content.height
17+
interactive: contentHeight > height
18+
flickableDirection: Flickable.VerticalFlick
19+
20+
Item {
21+
id: content
22+
x: 12
23+
y: 20
24+
width: flickable.width - 26
25+
height: syringe.implicitHeight
26+
27+
Syringe {
28+
id: syringe
29+
anchors.horizontalCenter: parent.horizontalCenter
30+
width: parent.width * 0.7
31+
}
32+
33+
34+
Grid {
35+
id: grid
36+
columns: 2
37+
verticalItemAlignment: Grid.AlignVCenter
38+
horizontalItemAlignment: Grid.AlignLeft
39+
columnSpacing: 10
40+
rowSpacing: 20
41+
anchors.left: content.left
42+
anchors.right: content.right
43+
anchors.top: syringe.bottom
44+
anchors.topMargin: 20
45+
46+
// 1st rot ----------------------
47+
Label {
48+
text: "Volume (ml):"
49+
font.pixelSize: 20
50+
}
51+
TextField {
52+
id: volumeTextField
53+
style: TextFieldFlatStyle {}
54+
width: grid.width - x
55+
placeholderText: "Volume (ml)"
56+
inputMethodHints: Qt.ImhFormattedNumbersOnly
57+
validator: DoubleValidator {
58+
bottom: 0;
59+
top: 2000;
60+
notation: DoubleValidator.StandardNotation
61+
decimals: 3
62+
}
63+
}
64+
65+
// 2nd row ----------------------
66+
Label {
67+
text: "Flow (ml/s):"
68+
font.pixelSize: 20
69+
}
70+
TextField {
71+
id: flowTextField
72+
style: TextFieldFlatStyle {}
73+
width: grid.width - x
74+
placeholderText: "Flow (ml/s)"
75+
inputMethodHints: Qt.ImhFormattedNumbersOnly
76+
}
77+
78+
// 3rd row ----------------------
79+
Rectangle {
80+
id: dumy
81+
width: 10
82+
height: 10
83+
}
84+
85+
Slider {
86+
width: grid.width - x
87+
minimumValue: 0
88+
maximumValue: 100
89+
value: 30
90+
style: SliderFlatStyle {}
91+
}
92+
}
93+
}
94+
}
95+
}

‎examples/qmlapp/ProgressBarFlatStyle.qml

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import QtQuick 2.3
2+
import QtQuick.Controls 1.2
3+
import QtQuick.Controls.Styles 1.2
4+
5+
6+
Component {
7+
id: progressBarFlatStyle
8+
ProgressBarStyle {
9+
background: Rectangle {
10+
radius: 6
11+
color: "#00FFFFFF"
12+
border.color: "#c9c9c9"
13+
border.width: 1.4
14+
implicitWidth: 200
15+
implicitHeight: 24
16+
}
17+
progress: Rectangle {
18+
color: "#5caa15"
19+
radius: 6
20+
}
21+
}
22+
}
23+

‎examples/qmlapp/SliderFlatStyle.qml

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import QtQuick 2.3
2+
import QtQuick.Controls 1.2
3+
import QtQuick.Controls.Styles 1.2
4+
5+
6+
Component {
7+
id: sliderFlatStyle
8+
SliderStyle {
9+
groove: Rectangle {
10+
color: "#c9c9c9"
11+
radius: 4
12+
border.color: "#c9c9c9"
13+
border.width: 1.4
14+
height: 8
15+
16+
Rectangle {
17+
color: "#5caa15"
18+
radius: 4
19+
anchors.left: parent.left
20+
anchors.top: parent.top
21+
anchors.bottom: parent.bottom
22+
width: parent.width * control.value / (control.maximumValue - control.minimumValue)
23+
}
24+
}
25+
26+
handle: Item {
27+
implicitWidth: 30
28+
implicitHeight: 30
29+
Rectangle {
30+
id: foreground
31+
color: "white"
32+
radius: Math.round(height / 2)
33+
border.color: !control.pressed ? "#999999" : "#328930"
34+
border.width: 1.4
35+
anchors.fill: parent
36+
z: 10
37+
}
38+
39+
Rectangle {
40+
id: shadow
41+
color: "#1F000000"
42+
radius: foreground.radius
43+
border.color: "transparent"
44+
border.width: 0
45+
width: foreground.width
46+
height: foreground.height
47+
x: 2
48+
y: 2
49+
z: 9
50+
}
51+
}
52+
}
53+
}

‎examples/qmlapp/Syringe.qml

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import QtQuick 2.3
2+
import QtQuick.Controls 1.2
3+
import QtQuick.Controls.Styles 1.2
4+
import "."
5+
6+
Item {
7+
id: root
8+
implicitHeight: syringeImage.height
9+
10+
Image {
11+
id: syringeImage
12+
source: "syringe2.svg"
13+
fillMode: Image.PreserveAspectFit
14+
width: parent.width
15+
z: 100
16+
}
17+
18+
ProgressBar {
19+
id: progressBar
20+
anchors.left: parent.left
21+
anchors.leftMargin: 70
22+
anchors.right: parent.right
23+
anchors.rightMargin: 70
24+
anchors.verticalCenter: parent.verticalCenter
25+
height: 80
26+
minimumValue: 0
27+
maximumValue: 100
28+
value: 70
29+
style: syringeProgressBarStyle
30+
z: 0
31+
}
32+
33+
Component {
34+
id: syringeProgressBarStyle
35+
ProgressBarStyle {
36+
background: Rectangle {
37+
color: "#00FFFFFF"
38+
border.color: "transparent"
39+
border.width: 0
40+
implicitWidth: 200
41+
implicitHeight: 24
42+
}
43+
progress: Rectangle {
44+
color: "#5caa15"
45+
}
46+
}
47+
}
48+
}

‎examples/qmlapp/TextFieldFlatStyle.qml

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import QtQuick 2.3
2+
import QtQuick.Controls 1.2
3+
import QtQuick.Controls.Styles 1.2
4+
5+
Component {
6+
id: textfieldFlatStyle
7+
8+
TextFieldStyle {
9+
id: textfieldstyle
10+
textColor: "#333333"
11+
placeholderTextColor: "#c9c9c9"
12+
font.pixelSize: 20
13+
background: Rectangle {
14+
color: "#00FFFFFF"
15+
radius: 6
16+
border.color: "#c9c9c9"
17+
border.width: 1.4
18+
implicitHeight: textfieldstyle.font.pixelSize * 2.6
19+
}
20+
padding.left: 20
21+
padding.right: 20
22+
}
23+
}
24+

‎examples/qmlapp/main.cpp

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,12 @@ int main(int argc, char *argv[])
3333
app.setObjectName("QGuiApplication");
3434

3535
QQuickView view;
36-
view.setSource(QString("qrc:/MainContainer.qml"));
36+
//view.setSource(QString("qrc:/MainContainer.qml"));
37+
view.setSource(QString("MainContainer.qml"));
3738
view.setObjectName("QQuickView");
3839
view.setResizeMode(QQuickView::SizeRootObjectToView);
3940
view.engine()->setObjectName("QQuickEngine");
41+
view.engine()->addImportPath(qApp->applicationDirPath());
4042

4143
// Set size to 800 x 480 WXGA - this is the size of the upcoming Manga
4244
// screen.

‎examples/qmlapp/qmlappdemo.pro

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@ OTHER_FILES += \
1818
Main.qml \
1919
MainContainer.qml
2020

21+
DESTDIR = $$PWD

‎examples/qmlapp/qmlappdemo.pro.user

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<!DOCTYPE QtCreatorProject>
3-
<!-- Written by QtCreator 3.2.1, 2015-01-19T21:42:35. -->
3+
<!-- Written by QtCreator 3.3.0, 2015-02-01T13:03:53. -->
44
<qtcreator>
55
<data>
66
<variable>EnvironmentId</variable>
@@ -58,14 +58,14 @@
5858
<data>
5959
<variable>ProjectExplorer.Project.Target.0</variable>
6060
<valuemap type="QVariantMap">
61-
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop Qt 5.3 MinGW 32bit</value>
62-
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop Qt 5.3 MinGW 32bit</value>
63-
<value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">qt.53.win32_mingw482_kit</value>
61+
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop Qt 5.4.0 MinGW 32bit</value>
62+
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop Qt 5.4.0 MinGW 32bit</value>
63+
<value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{d37ff6f4-117f-411b-b38d-99476f837c14}</value>
6464
<value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">0</value>
6565
<value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value>
6666
<value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value>
6767
<valuemap type="QVariantMap" key="ProjectExplorer.Target.BuildConfiguration.0">
68-
<value type="QString" key="ProjectExplorer.BuildConfiguration.BuildDirectory">C:/CodingXP/cetoni_projects/virtualkeyboard/examples/build-qmlappdemo-Desktop_Qt_5_3_MinGW_32bit-Debug</value>
68+
<value type="QString" key="ProjectExplorer.BuildConfiguration.BuildDirectory">C:/CodingXP/build/qmlappdemo-Desktop_Qt_5_4_0_MinGW_32bit-Debug</value>
6969
<valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
7070
<valuemap type="QVariantMap" key="ProjectExplorer.BuildStepList.Step.0">
7171
<value type="bool" key="ProjectExplorer.BuildStep.Enabled">true</value>
@@ -76,6 +76,7 @@
7676
<value type="bool" key="QtProjectManager.QMakeBuildStep.LinkQmlDebuggingLibraryAuto">true</value>
7777
<value type="QString" key="QtProjectManager.QMakeBuildStep.QMakeArguments"></value>
7878
<value type="bool" key="QtProjectManager.QMakeBuildStep.QMakeForced">false</value>
79+
<value type="bool" key="QtProjectManager.QMakeBuildStep.UseQtQuickCompiler">false</value>
7980
</valuemap>
8081
<valuemap type="QVariantMap" key="ProjectExplorer.BuildStepList.Step.1">
8182
<value type="bool" key="ProjectExplorer.BuildStep.Enabled">true</value>
@@ -104,7 +105,7 @@
104105
<value type="QString" key="Qt4ProjectManager.MakeStep.MakeCommand"></value>
105106
</valuemap>
106107
<value type="int" key="ProjectExplorer.BuildStepList.StepsCount">1</value>
107-
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Bereinigen</value>
108+
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Clean</value>
108109
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
109110
<value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Clean</value>
110111
</valuemap>
@@ -118,7 +119,7 @@
118119
<value type="bool" key="Qt4ProjectManager.Qt4BuildConfiguration.UseShadowBuild">true</value>
119120
</valuemap>
120121
<valuemap type="QVariantMap" key="ProjectExplorer.Target.BuildConfiguration.1">
121-
<value type="QString" key="ProjectExplorer.BuildConfiguration.BuildDirectory">C:/CodingXP/cetoni_projects/virtualkeyboard/examples/build-qmlappdemo-Desktop_Qt_5_3_MinGW_32bit-Release</value>
122+
<value type="QString" key="ProjectExplorer.BuildConfiguration.BuildDirectory">C:/CodingXP/build/qmlappdemo-Desktop_Qt_5_4_0_MinGW_32bit-Release</value>
122123
<valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
123124
<valuemap type="QVariantMap" key="ProjectExplorer.BuildStepList.Step.0">
124125
<value type="bool" key="ProjectExplorer.BuildStep.Enabled">true</value>
@@ -129,6 +130,7 @@
129130
<value type="bool" key="QtProjectManager.QMakeBuildStep.LinkQmlDebuggingLibraryAuto">true</value>
130131
<value type="QString" key="QtProjectManager.QMakeBuildStep.QMakeArguments"></value>
131132
<value type="bool" key="QtProjectManager.QMakeBuildStep.QMakeForced">false</value>
133+
<value type="bool" key="QtProjectManager.QMakeBuildStep.UseQtQuickCompiler">false</value>
132134
</valuemap>
133135
<valuemap type="QVariantMap" key="ProjectExplorer.BuildStepList.Step.1">
134136
<value type="bool" key="ProjectExplorer.BuildStep.Enabled">true</value>
@@ -157,7 +159,7 @@
157159
<value type="QString" key="Qt4ProjectManager.MakeStep.MakeCommand"></value>
158160
</valuemap>
159161
<value type="int" key="ProjectExplorer.BuildStepList.StepsCount">1</value>
160-
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Bereinigen</value>
162+
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Clean</value>
161163
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
162164
<value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Clean</value>
163165
</valuemap>
@@ -174,7 +176,7 @@
174176
<valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0">
175177
<valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
176178
<value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value>
177-
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deployment</value>
179+
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value>
178180
<value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
179181
<value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value>
180182
</valuemap>
@@ -246,10 +248,10 @@
246248
</data>
247249
<data>
248250
<variable>ProjectExplorer.Project.Updater.FileVersion</variable>
249-
<value type="int">16</value>
251+
<value type="int">18</value>
250252
</data>
251253
<data>
252254
<variable>Version</variable>
253-
<value type="int">16</value>
255+
<value type="int">18</value>
254256
</data>
255257
</qtcreator>

‎examples/qmlapp/qmlappdemo.qrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,11 @@
77
<file>DejaVuSans.ttf</file>
88
<file>Main.qml</file>
99
<file>MainContainer.qml</file>
10+
<file>MainQuickControls.qml</file>
11+
<file>MainDesigner.qml</file>
12+
<file>TextFieldFlatStyle.qml</file>
13+
<file>SliderFlatStyle.qml</file>
14+
<file>ProgressBarFlatStyle.qml</file>
15+
<file>Syringe.qml</file>
1016
</qresource>
1117
</RCC>

‎examples/qmlapp/syringe1.png

34.7 KB
Loading

0 commit comments

Comments
 (0)