Commit 9f4333dd authored by Thomas Hartmann's avatar Thomas Hartmann

Add Gauge benchmark

This benchmark compares a gauge from
the neptune3 UI with a version
developed purely in QDS.
parent 1116cff4
This diff is collapsed.
/****************************************************************************
**
** Copyright (C) 2019 Luxoft Sweden AB
** Copyright (C) 2018 Pelagicore AG
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Neptune 3 Cluster UI.
**
** $QT_BEGIN_LICENSE:GPL-QTAS$
** Commercial License Usage
** Licensees holding valid commercial Qt Automotive Suite licenses may use
** this file in accordance with the commercial license agreement provided
** with the Software or, alternatively, in accordance with the terms
** contained in a written agreement between you and The Qt Company. For
** licensing terms and conditions see https://www.qt.io/terms-conditions.
** For further information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 or (at your option) any later version
** approved by the KDE Free Qt Foundation. The licenses are as published by
** the Free Software Foundation and appearing in the file LICENSE.GPL3
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
** $QT_END_LICENSE$
**
** SPDX-License-Identifier: GPL-3.0
**
****************************************************************************/
import QtQuick 2.9
import gauge 1.0
import QtQuick.Studio.Components 1.0
Item {
id: root
width: 400
height: width
//visual components
Image {
id: outSmallBg
width: 560
height: width
opacity: 0
anchors.centerIn: parent
visible: true
source: "assets/dial-small-bg.png"
}
Image {
id: outBg
width: 520
height: width
anchors.centerIn: parent
visible: true
source: "assets/dial-outer-circle-bg.png"
}
Image {
id: outEdge
width: 520
height: width
anchors.centerIn: parent
z: 1
visible: true
source: "assets/dial-outer-circle-edge.png"
}
Image {
id: outShadow
width: sourceSize.width
height: width
anchors.centerIn: parent
z: 1
visible: true
source: "assets/dial-outer-circle-shadow.png"
}
ArcItem {
id: arc
x: 20
y: 20
width: 526
height: 526
strokeColor: "#00000000"
arcWidth: 105
outlineArc: true
fillColor: "#b75034"
}
Image {
id: innerCircle
width: 310
height: width
anchors.centerIn: parent
visible: true
source: "assets/dial-inner-circle.png"
}
Image {
id: innerCircleShadow
width: 350
height: width
anchors.centerIn: parent
visible: true
source: "assets/dial-inner-circle_shadow.png"
}
}
/*##^##
Designer {
D{i:0;height:560;width:560}D{i:2;flowX:"-224";flowY:259}D{i:5;flowX:"-224";flowY:259}
}
##^##*/
This diff is collapsed.
import QtQuick 2.12
import gauge 1.0
import QtQuick.Controls 2.5
import QtQuick.Studio.Components 1.0
Item {
id: root
width: 560
height: 560
property int ePower: 0
property int remainingKm: 180
property int remainingPower: 20
Rectangle {
color: "#a6a6a6"
anchors.fill: parent
}
QtObject {
id: d
property int ePowerOverride: 0
property bool overrideEPower: false
property int ePower: overrideEPower ? ePowerOverride : root.ePower
}
Item {
id: indicatorDrivetrain
x: 240
y: 165
width: 40
opacity: 1
Label {
id: indicatorDrivetrainP
text: "P"
font.pixelSize: 34
verticalAlignment: Text.AlignTop
opacity: Style.opacityHigh
font.weight: Font.Normal
anchors.left: parent.left
horizontalAlignment: Text.AlignHCenter
}
Label {
id: indicatorDrivetrainR
text: "R"
font.pixelSize: 34
verticalAlignment: Text.AlignTop
opacity: Style.opacityLow
font.weight: Font.Light
anchors.left: indicatorDrivetrainP.right
horizontalAlignment: Text.AlignHCenter
}
Label {
id: indicatorDrivetrainN
text: "N"
font.pixelSize: 34
verticalAlignment: Text.AlignTop
opacity: Style.opacityLow
font.weight: Font.Light
anchors.left: indicatorDrivetrainR.right
horizontalAlignment: Text.AlignHCenter
}
Label {
text: "D"
font.pixelSize: 34
verticalAlignment: Text.AlignTop
opacity: Style.opacityLow
font.weight: Font.Light
anchors.left: indicatorDrivetrainN.right
horizontalAlignment: Text.AlignHCenter
}
}
DialFramePanelQDS {
id: dialFrame
width: 560
height: width
//negativeColor: "#80447191"
}
Item {
Label {
id: indicatorEPower
x: 265
y: 222
width: 40
text: Math.abs(Math.round(d.ePower))
font.pixelSize: 80
verticalAlignment: Text.AlignTop
opacity: Style.opacityHigh
font.weight: Font.DemiBold
horizontalAlignment: Text.AlignHCenter
}
Label {
id: signPower
x: 248
y: 324
text: qsTr("% power")
font.pixelSize: 18
opacity: Style.opacityLow
font.weight: Font.Light
}
Label {
id: signKM
x: 272
y: 480
text: qsTr("km")
font.pixelSize: 18
verticalAlignment: Text.AlignTop
opacity: Style.opacityLow
font.weight: Font.Light
horizontalAlignment: Text.AlignHCenter
}
Label {
id: signKMRemain
x: 207
y: 464
width: 70
text: root.remainingKm
font.pixelSize: 34
opacity: Style.opacityHigh
font.weight: Font.Light
horizontalAlignment: Text.AlignHCenter
}
Label {
id: signBatteryRemain
x: 303
y: 464
width: 50
text: root.remainingPower
font.pixelSize: 34
opacity: Style.opacityHigh
font.weight: Font.Light
horizontalAlignment: Text.AlignRight
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#4c4e50"}D{i:1;anchors_height:200;anchors_width:200;anchors_x:-74;anchors_y:82;flowX:-213;flowY:177}
D{i:8;flowX:"-224";flowY:259}D{i:9;flowX:"-224";flowY:259}
}
##^##*/
import QtQuick 2.12
import gauge 1.0
Item {
width: Constants.width
height: Constants.height
Screen01 {
}
}
/* File generated by Qt Creator */
import QmlProject 1.1
Project {
//mainFile: "gauge.qml"
/* Include .qml, .js, and image files from current directory and subdirectories */
QmlFiles {
directory: "."
}
JavaScriptFiles {
directory: "."
}
ImageFiles {
directory: "."
}
Files {
filter: "*.conf"
files: ["qtquickcontrols2.conf"]
}
Files {
filter: "qmldir"
directory: "."
}
Environment {
QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
QT_AUTO_SCREEN_SCALE_FACTOR: "1"
}
/* List of plugin directories passed to QML runtime */
importPaths: [ "imports" ]
/* Required for deployment */
targetDirectory: "/opt/gauge"
}
import QtQuick 2.0
import QtQuick 2.9
import QtQuick.Shapes 1.0
Shape {
id: root
implicitWidth: 100
implicitHeight: 100
property alias gradient: path.fillGradient
property alias strokeStyle: path.strokeStyle
property alias strokeWidth: path.strokeWidth
property alias strokeColor: path.strokeColor
property alias dashPattern: path.dashPattern
property alias joinStyle: path.joinStyle
property alias fillColor: path.fillColor
property alias capStyle: path.capStyle
property alias dashOffset: path.dashOffset
property real begin: 0
property real end: 90
property real arcWidth: 10
property real arcWidthBegin: arcWidth
property real arcWidthEnd: arcWidth
property real radiusInnerAdjust: 0
property real radiusOuterAdjust: 0
property real alpha: end - begin
property bool antialiasing: false
layer.enabled: antialiasing
layer.smooth: antialiasing
layer.textureSize: Qt.size(width * 2, height * 2)
property bool outlineArc: false
property bool round: false
property bool roundEnd: round
property bool roundBegin: round
function myCos(angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
return Math.cos(angleInRadians)
}
function mySin(angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
return Math.sin(angleInRadians)
}
function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
var x = centerX + radius * Math.cos(angleInRadians)
return x
}
function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
var y = centerY + radius * Math.sin(angleInRadians);
return y
}
function calc()
{
path.__xRadius = root.width / 2 - root.strokeWidth / 2
path.__yRadius = root.height / 2 - root.strokeWidth / 2
path.__Xcenter = root.width / 2
path.__Ycenter = root.height / 2
path.startX = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.begin - 180) + root.__beginOff * myCos(root.begin)
path.startY = root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.begin - 180) + root.__beginOff * mySin(root.begin)
arc1.x = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.end - 180) + root.__endOff * myCos(root.end)
arc1.y = root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.end - 180) + root.__endOff * mySin(root.end)
arc1.radiusX = path.__xRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
arc1.radiusY = path.__yRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
arc1.useLargeArc = root.alpha > 180
}
onWidthChanged: calc()
onBeginChanged: calc()
onEndChanged: calc()
onAlphaChanged: calc()
ShapePath {
//closed: true
id: path
property real __xRadius
property real __yRadius
property real __Xcenter
property real __Ycenter
fillColor: "transparent"
strokeColor: Qt.transparent
strokeWidth: 1
capStyle: ShapePath.FlatCap
}
property real __beginOff: {
if (root.arcWidthEnd > root.arcWidthBegin)
return (root.arcWidthEnd - root.arcWidthBegin) / 2
return 0;
}
property real __endOff: {
if (root.arcWidthBegin > root.arcWidthEnd)
return (root.arcWidthBegin - root.arcWidthEnd) / 2
return 0;
}
property real __startP: root.arcWidthBegin + __beginOff
property real __endP: root.arcWidthEnd + __endOff
Item {
id: shapes
PathArc {
id: arc1
property bool add: true
}
PathLine {
relativeX: root.arcWidthEnd * myCos(root.end)
relativeY: root.arcWidthEnd * mySin(root.end)
property bool add: !root.roundEnd && (root.outlineArc && root.alpha < 360)
}
PathArc {
relativeX: root.arcWidthEnd * myCos(root.end)
relativeY: root.arcWidthEnd * mySin(root.end)
radiusX: root.arcWidthEnd /2
radiusY: root.arcWidthEnd /2
property bool add: root.roundEnd && (root.outlineArc && root.alpha < 360)
}
PathMove {
relativeX: root.arcWidthEnd * myCos(root.end)
relativeY: root.arcWidthEnd * mySin(root.end)
property bool add: root.outlineArc && root.alpha == 360
}
PathArc {
id: arc2
useLargeArc: arc1.useLargeArc
radiusX: path.__xRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2 + root.radiusInnerAdjust
radiusY:path.__yRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2 + root.radiusInnerAdjust
x: path.startX + root.arcWidthBegin * myCos(root.begin)
y: path.startY + root.arcWidthBegin * mySin(root.begin)
direction: PathArc.Counterclockwise
property bool add: root.outlineArc
}
PathLine {
x: path.startX
y: path.startY
property bool add: !root.roundBegin && root.outlineArc && root.alpha < 360
}
PathArc {
x: path.startX
y: path.startY
radiusX: root.arcWidthEnd /2
radiusY: root.arcWidthEnd /2
property bool add: root.roundBegin && root.outlineArc && root.alpha < 360
}
PathMove {
x: path.startX
y: path.startY
property bool add: root.outlineArc && root.alpha == 360
}
}
function invalidatePaths() {
if (!root.__completed)
return
for (var i = 0; i < shapes.resources.length; i++) {
var s = shapes.resources[i];
if (s.add)
path.pathElements.push(s)
}
}
property bool __completed: false
Component.onCompleted: {
root.__completed = true
invalidatePaths()
calc()
}
}
import QtQuick 2.10
import QtQuick.Shapes 1.0
Shape {
id: root
width: 200
height: 150
property int radius: 10
property int topLeftRadius: radius
property int bottomLeftRadius: radius
property int topRightRadius: radius
property int bottomRightRadius: radius
//property alias gradient: path.fillGradient
property alias strokeStyle: path.strokeStyle
property alias strokeWidth: path.strokeWidth
property alias strokeColor: path.strokeColor
property alias dashPattern: path.dashPattern
property alias joinStyle: path.joinStyle
property alias dashOffset: path.dashOffset
property alias capStyle: path.capStyle
//property alias fillColor: path.fillColor
property bool drawTop: true
property bool drawBottom: true
property bool drawRight: true
property bool drawLeft: true
property bool antialiasing: false
layer.enabled: antialiasing
layer.smooth: antialiasing
layer.textureSize: Qt.size(width * 2, height * 2)
property int borderMode: 0
property real borderOffset: {
if (root.borderMode === 0)
return path.strokeWidth * 10.0 / 20.0
if (root.borderMode === 1)
return 0
return -path.strokeWidth * 10.0 / 20.0
}
Item {
anchors.fill: parent
anchors.margins: {
if (root.borderMode === 0)
return 0
if (root.borderMode === 1)
return -root.strokeWidth / 2.0
return -root.strokeWidth
}
}
ShapePath {
id: path
joinStyle: ShapePath.MiterJoin
strokeWidth: 4
strokeColor: "red"
fillColor: "transparent"
startX: root.topLeftRadius + root.borderOffset
startY: root.borderOffset
}
Item {
id: shapes
PathLine {
x: root.width - root.topRightRadius - root.borderOffset