ScStw/app
ScStw/app
2
0
Fork 0
Code Issues 6 Pull requests Packages Projects Releases 2 Wiki Activity

Merge branch 'new_design_test' into 'internal_makeover'

Browse source 
new design

See merge request speedclimbing_stopwatch/speedclimbing_stopwatch!1
This commit is contained in:
Dorian Zedler 2019-03-08 14:39:20 +00:00
parent 4078711cd4 373fc7a6d9
commit 3fd9267387
7 changed files with 216 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
qml/SettingsDialog.qml
View file

@ -20,6 +20,7 @@ import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import "./components"
import "./styles"
@ -31,7 +32,7 @@ Popup {
height: startButt.height
modal: true
dim: false
scale: 0
opacity: 0
property var connections
@ -56,28 +57,86 @@ Popup {
}
enter: Transition {
NumberAnimation { properties: "scale"; to: 1; duration: 300; easing.type: Easing.Linear }
NumberAnimation { properties: "opacity"; to: 1; duration: 300; easing.type: Easing.InOutQuad }
}
exit: Transition {
NumberAnimation { properties: "scale"; to: 0; duration: 300; easing.type: Easing.Linear }
NumberAnimation { properties: "opacity"; to: 0; duration: 300; easing.type: Easing.InOutQuad }
}
background: Rectangle {
radius: width * 0.5
color: StyleSettings.viewColor
border.color: StyleSettings.lineColor
border.width: 1
border.width: 0
RectangularGlow {
id: effect_2
glowRadius: 7
spread: 0.02
color: "black"
opacity: 0.18
anchors.fill: headlineUnderline
scale: 1
}
Canvas {
id: headerBackground
Label {
id: head_text
text: options_stack.currentItem.title
font.pixelSize: headlineUnderline.width * 0.05
color: enabled ? StyleSettings.textColor:StyleSettings.disabledTextColor
anchors {
horizontalCenter: parent.horizontalCenter
left: parent.left
right: parent.right
top: parent.top
topMargin: headlineUnderline.anchors.topMargin / 2 - height / 2
bottom: headlineUnderline.bottom
}
height: header.height
width: header.width
property color color: StyleSettings.viewColor
onColorChanged: {
requestPaint()
}
onPaint: {
var ctx = getContext("2d");
ctx.reset();
var centreX = root.width / 2;
var centreY = root.height / 2;
ctx.beginPath();
ctx.fillStyle = headerBackground.color
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY, root.width / 2, 1 * Math.PI, 2*Math.PI, false);
//ctx.lineTo(centreX, centreY);
ctx.fill();
}
}
Item {
id: header
anchors {
left: parent.left
right: parent.right
top: parent.top
bottom: headlineUnderline.bottom
}
Label {
id: head_text
text: options_stack.currentItem.title
font.pixelSize: headlineUnderline.width * 0.05
color: enabled ? StyleSettings.textColor:StyleSettings.disabledTextColor
anchors {
horizontalCenter: parent.horizontalCenter
top: parent.top
topMargin: headlineUnderline.anchors.topMargin / 2 - height / 2
}
}
}
@ -86,6 +145,7 @@ Popup {
height: 1
width: parent.width
color: StyleSettings.lineColor
visible: false
anchors {
top: parent.top
left: parent.left
@ -96,7 +156,7 @@ Popup {
}
}
Button {
FancyButton {
id: head_back
anchors {
left: parent.left
@ -107,21 +167,13 @@ Popup {
height: parent.height * 0.13
width: height
opacity: root.closePolicy === Popup.NoAutoClose ? 0:1
//opacity: root.closePolicy === Popup.NoAutoClose ? 0:1
enabled: opacity > 0
background: Rectangle {
radius: width * 0.5
color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
border.color: StyleSettings.buttonBorderColor
border.width: 1
Image {
anchors.fill: parent
anchors.margins: parent.width * 0.2
source: StyleSettings.backIcon
glowOpacity: Math.pow( root.opacity, 100 )
}
}
backgroundColor: StyleSettings.buttonColor
image: StyleSettings.backIcon
onClicked: {
options_stack.depth > 1 ? options_stack.pop():root.close()

70
qml/components/FancyButton.qml Normal file
View file

@ -0,0 +1,70 @@
import QtQuick 2.9
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.0
Button {
id: control
property string image
property color backgroundColor: "white"
property real imageScale: 1
property double glowRadius: 0.001
property double glowSpread: 0.2
property bool glowVisible: true
property double glowScale: 0.75
property double glowOpacity: 1
scale: control.pressed ? 0.8:1
Behavior on scale {
PropertyAnimation {
duration: 100
}
}
background: Item {
id: controlBackgroundContainer
RectangularGlow {
id: effect
glowRadius: control.glowRadius
spread: control.glowSpread
color: "black"
visible: control.glowVisible
cornerRadius: controlBackground.radius
anchors.fill: controlBackground
scale: control.glowScale
opacity: control.glowOpacity
}
Rectangle {
id: controlBackground
anchors.fill: parent
radius: height * 0.5
color: control.backgroundColor
Image {
id: buttonIcon
source: control.image
anchors.centerIn: parent
height: parent.height * 0.5
width: height
mipmap: true
fillMode: Image.PreserveAspectFit
scale: control.imageScale
}
}
}
}

100
qml/main.qml
View file

@ -19,6 +19,7 @@ import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import "."
import "./components"
import "./styles"
@ -66,12 +67,15 @@ Window {
break;
case 1:
stateString = "STARTING"
settingsDialog.close()
break;
case 2:
stateString = "RUNNING"
settingsDialog.close()
break;
case 3:
stateString = "STOPPED"
settingsDialog.close()
}
root.state = stateString
}
@ -80,6 +84,16 @@ Window {
/*------------------------
Timer text an upper line
------------------------*/
RectangularGlow {
id: effect_2
glowRadius: 7
spread: 0.02
color: "black"
opacity: 0.18
anchors.fill: time_container
scale: 1
}
Item {
id: time_container
anchors {
@ -136,12 +150,13 @@ Window {
anchors.left: root.landscape() ? time_container.right:parent.left
anchors.top: root.landscape() ? parent.top:time_container.bottom
anchors.bottom: root.landscape() ? parent.bottom:undefined
visible: false
}
/*----------------------
Start / Stop / Reset button
----------------------*/
Button {
FancyButton {
id : startButt
text: qsTr("start")
@ -158,21 +173,18 @@ Window {
height: root.landscape() ? size > parent.height * 0.9 ? parent.height * 0.9:size : size
width: root.landscape() ? size : size > parent.width * 0.9 ? parent.width * 0.9:size
background: Rectangle {
color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
border.color: StyleSettings.buttonBorderColor
border.width: 1
radius: width / 2
Label {
id: startButt_text
text: startButt.text
anchors.centerIn: parent
font.pixelSize: parent.height * 0.16
font.family: "Helvetica"
color: enabled ? StyleSettings.textColor:StyleSettings.disabledTextColor
}
Label {
id: startButt_text
text: startButt.text
anchors.centerIn: parent
font.pixelSize: parent.height * 0.16
font.family: "Helvetica"
color: enabled ? StyleSettings.textColor:StyleSettings.disabledTextColor
}
backgroundColor: StyleSettings.buttonColor
Behavior on text {
//animate a text change
enabled: true
@ -201,6 +213,8 @@ Window {
anchors.fill: startButt
opacity: root.state === "STARTING" || root.state === "IDLE" ? 1:0
scale: startButt.scale
lineWidth: 5
arcBegin: 0
@ -220,7 +234,7 @@ Window {
/*----------------------
Cancel button
----------------------*/
RoundButton {
FancyButton {
id: cancelButt
text: qsTr("cancel")
@ -246,20 +260,17 @@ Window {
duration: 200
}
}
background: Rectangle {
color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
border.color: StyleSettings.buttonBorderColor
border.width: 1
radius: width / 2
Label {
id: cancelButt_text
text: cancelButt.text
anchors.centerIn: parent
font.pixelSize: parent.height * 0.16
font.family: "Helvetica"
color: StyleSettings.textColor
}
Label {
id: cancelButt_text
text: cancelButt.text
anchors.centerIn: parent
font.pixelSize: parent.height * 0.16
font.family: "Helvetica"
color: StyleSettings.textColor
}
backgroundColor: StyleSettings.buttonColor
}
/*------
@ -294,13 +305,26 @@ Window {
/*-------------------
lower line and menu
-------------------*/
Rectangle {
id: lowerLine
width: root.landscape() ? 1:parent.width
height: root.landscape() ? parent.height:1
color: StyleSettings.lineColor
anchors.right: root.landscape() ? menu_container.left:parent.right
anchors.bottom: root.landscape() ? parent.bottom:menu_container.top
anchors.top: root.landscape() ? parent.top:undefined
visible: false
}
RectangularGlow {
id: effect
glowRadius: 7
spread: 0.02
color: "black"
opacity: 0.18
anchors.fill: menu_container
scale: 1
}
Item {
@ -315,11 +339,12 @@ Window {
}
Rectangle {
id: lowerMenuBackground
anchors.fill: parent
color: StyleSettings.menuColor
}
RoundButton {
FancyButton {
id: settingsButt
anchors {
@ -344,21 +369,10 @@ Window {
settingsDialog.open()
}
background: Rectangle {
color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
border.color: StyleSettings.buttonBorderColor
border.width: 1
radius: width / 2
image: StyleSettings.settIcon
backgroundColor: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
Image {
id: settungsButt_Image
source: StyleSettings.settIcon
anchors.centerIn: parent
height: parent.height * 0.7
width: parent.width * 0.7
mipmap: true
}
}
}
/*

2
qml/qml.qrc
View file

@ -11,10 +11,10 @@
<file>styles/qmldir</file>
<file>styles/Dark.js</file>
<file>styles/Light.js</file>
<file>styles/Default.js</file>
<file>components/ConnectionIcon.qml</file>
<file>SpeedTimer.qml</file>
<file>components/NextPageDelegate.qml</file>
<file>ErrorDialog.qml</file>
<file>components/FancyButton.qml</file>
</qresource>
</RCC>

31
qml/styles/Default.js
View file

@ -1,31 +0,0 @@
// Colors
var backgroundColor = "white"
// buttons
var buttonColor = "white"
var buttonPressedColor = "lightgrey"
var buttonBorderColor = "grey"
var disabledButtonColor = Qt.darker("white", 1.2)
var viewColor = "white"
var menuColor = "white"
//delegates
var delegate1Color = Qt.darker(viewColor, 1.2)
var delegate2Color = Qt.lighter(viewColor, 1.2)
//text
var textColor = "black"
var textDarkColor = "#232323"
var disabledTextColor = "grey"
var sliderColor = "#6ccaf2"
var errorColor = "#ba3f62"
var infoColor = "#3fba62"
var lineColor = "grey"
// Icons
var backIcon = "qrc:/graphics/icons/back_black.png"
var settIcon = "qrc:/graphics/icons/settings_black.png"

24
qml/styles/StyleSettings.qml
View file

@ -52,13 +52,11 @@ pragma Singleton
import QtQuick 2.5
import "./Dark.js" as Dark
import "./Light.js" as Light
import "./Default.js" as Default
Item {
property int wHeight
property int wWidth
property var theme: _cppAppSettings.loadSetting("theme") === "Default" ? Default:
_cppAppSettings.loadSetting("theme") === "Light" ? Light:
property var theme: _cppAppSettings.loadSetting("theme") === "Light" ? Light:
_cppAppSettings.loadSetting("theme") === "Dark" ? Dark:null
// Colors
readonly property color backgroundColor: theme.backgroundColor
@ -111,14 +109,14 @@ Item {
function refreshTheme(){
switch(_cppAppSettings.loadSetting("theme")){
case "Default":
theme = Dark
break
case "Dark":
theme = Light
break
case "Light":
theme = Default
theme = Dark
break
default:
theme = Light
break
}
}
@ -139,17 +137,17 @@ Item {
function setTheme()
{
switch(_cppAppSettings.loadSetting("theme")){
case "Default":
_cppAppSettings.writeSetting("theme", "Dark")
theme = Dark
break
case "Dark":
_cppAppSettings.writeSetting("theme", "Light")
theme = Light
break
case "Light":
_cppAppSettings.writeSetting("theme", "Default")
theme = Default
_cppAppSettings.writeSetting("theme", "Dark")
theme = Dark
break
default:
_cppAppSettings.writeSetting("theme", "Light")
theme = Light
break
}
}

2
sources/climbingrace.cpp
View file

@ -18,7 +18,7 @@ ClimbingRace::ClimbingRace(QObject *parent) : QObject(parent)
this->appSettings = new AppSettings;
this->baseConn = new BaseConn;
this->baseConn->setIP("localhost");
this->baseConn->setIP("192.168.4.1");
connect(this->baseConn, &BaseConn::stateChanged, this, &ClimbingRace::baseStationStateChanged);
this->speedTimers.append( new SpeedTimer );