Commit 017266e3 authored by Ionut Alexandrescu's avatar Ionut Alexandrescu

Update the assets, the payment page and add an warninig popup

+ Change the Dial media
+ Add a new payment complete in the payment page
+ Add a Warninig popup to simulate errors
parent 34c7d32f
......@@ -4,38 +4,95 @@ import QtQuick.Controls 2.0
Dial {
id: dial
background: Rectangle {
background: Item
{
x: dial.width / 2 - width / 2
y: dial.height / 2 - height / 2
width: Math.max(64, Math.min(dial.width, dial.height))
height: width
color: "transparent"
radius: width / 2
border.color: dial.pressed ? "#17a81a" : "#21be2b"
opacity: dial.enabled ? 1 : 0.3
width: 240
height: 240
Image {
id: imageFill
visible: false;
source: "Assets/Select/dial_inside_bottom_240x240.png"
width: 240
height: 240
}
Image {
anchors.centerIn: parent
width: 20
height: 40
fillMode: Image.PreserveAspectFit
source: "Assets/Select/EVCS_charge_icon_20x40.png"
}
ShaderEffect {
id: shEffect;
width: 240
height: 240
x: 0;
y: 0;
rotation: -95
property variant src: imageFill;
property real angle: dial.angle *0.017453292519943295769236907684890;
vertexShader: "
uniform highp mat4 qt_Matrix;
attribute highp vec4 qt_Vertex;
attribute highp vec2 qt_MultiTexCoord0;
varying highp vec2 coord;
void main() {
coord = qt_MultiTexCoord0;
gl_Position = qt_Matrix * qt_Vertex;
}"
fragmentShader: "
varying highp vec2 coord;
uniform sampler2D src;
uniform lowp float qt_Opacity;
uniform lowp float angle;
void main()
{
float pixelAngle = atan( coord.y - 0.5, coord.x - 0.5 );
if ( ( pixelAngle > angle ) || ( pixelAngle < -2.44346 ) || ( pixelAngle > 2.44346 ) )
{
gl_FragColor = vec4( 0, 0,0, 0);
}
else
{
lowp vec4 tex0 = texture2D(src, coord);
gl_FragColor = tex0 * qt_Opacity;
}
}"
}
Image {
source: "Assets/Select/dial_outside_top_240x240.png"
width: 240
height: 240
}
}
handle: Image {
id: handleItem
x: dial.background.x + dial.background.width / 2 - width / 2
y: dial.background.y + dial.background.height / 2 - height / 2
width: 16
height: 16
//color: dial.pressed ? "#17a81a" : "#21be2b"
//radius: 8
source: "Assets/Select/EVCS_dial_button_16x16.png"
antialiasing: true
opacity: dial.enabled ? 1 : 0.3
transform: [
Translate {
x: -8
y: -Math.min(dial.background.width, dial.background.height) * 0.4 + handleItem.height / 2 - 8
id: handleItem
x: dial.background.x + dial.background.width / 2 - width / 2
y: dial.background.y + dial.background.height / 2 - height / 2
width: 16
height: 16
//color: dial.pressed ? "#17a81a" : "#21be2b"
//radius: 8
source: "Assets/Select/EVCS_dial_button_16x16.png"
antialiasing: true
opacity: dial.enabled ? 1 : 0.3
transform: [
Translate {
x: -8
y: -Math.min(dial.background.width, dial.background.height) * 0.4 + handleItem.height / 2 - 8
},
Rotation {
angle: dial.angle
origin.x: handleItem.width / 2
origin.y: handleItem.height / 2
}
]
}
},
Rotation {
angle: dial.angle
origin.x: handleItem.width / 2
origin.y: handleItem.height / 2
}
]
}
}
......@@ -8,6 +8,7 @@ Item {
id: header
signal openInfo
signal openMap
signal openWarning
// Left Positioner
RowLayout
......@@ -151,6 +152,20 @@ Item {
onClicked: header.openMap();
}
Button
{
Layout.preferredWidth: 38
Layout.preferredHeight: 31
background: Image {
anchors.fill: parent
fillMode: Image.PreserveAspectFit
source: "Assets/Icons/EVCS_icon_attention_30x31.png"
}
flat: true
onClicked: header.openWarning();
}
Button
{
Layout.preferredWidth: 30
......
import QtQuick 2.6
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import App 1.0
Item {
......@@ -10,6 +11,7 @@ Item {
property bool indicatorText: true;
property alias chargingVisible: chargeSpinBox.visible
property alias chargingText: chargingText.text
function setChargeValue( value )
{
......@@ -53,79 +55,109 @@ Item {
priceSpinBox.stepSize = Variables.priceOnePercent * value
}
SpinBoxNumber
ColumnLayout
{
id: chargeSpinBox
indicatorText: root.indicatorText
function updateValue( inValue )
{
chargeSpinBox.value = inValue * 100
}
spacing: 30
id: spinBoxColumn
onValueModified:
Rectangle
{
var sendValue = value / 100;
root.valueChanged( sendValue )
timeSpinBox.updateValue( sendValue )
priceSpinBox.updateValue( sendValue )
color: "#0b2a4a"
border.color: "#41CD52"
border.width: Variables.pixelBorderSpinBox
Layout.preferredWidth: Variables.pixelSpinBoxWidth
height: Variables.pixelSpinBoxButton
visible: !root.chargingVisible
Text
{
id: chargingText
color: "#42cc53"
height: Variables.pixelSpinBoxButton
text: qsTr( "Charging in progress" )
font.pixelSize: Variables.fontChargingProgress
horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter
x:20
}
}
}
SpinBoxTime
{
id: timeSpinBox
indicatorText: root.indicatorText
y: 60
function updateValue( inValue )
SpinBoxNumber
{
var chargeToAdd = inValue - Variables.initialCharge
timeSpinBox.value = chargeToAdd * Variables.timeOnePercent * 100
Layout.preferredWidth: Variables.pixelSpinBoxWidth
id: chargeSpinBox
indicatorText: root.indicatorText
function updateValue( inValue )
{
chargeSpinBox.value = inValue * 100
}
onValueModified:
{
var sendValue = value / 100;
root.valueChanged( sendValue )
timeSpinBox.updateValue( sendValue )
priceSpinBox.updateValue( sendValue )
}
}
onValueModified:
SpinBoxTime
{
var chargeToAdd = value / ( Variables.timeOnePercent * 100 )
var sendValue = chargeToAdd + Variables.initialCharge;
root.valueChanged( sendValue )
chargeSpinBox.updateValue( sendValue )
priceSpinBox.updateValue( sendValue )
id: timeSpinBox
indicatorText: root.indicatorText
Layout.preferredWidth: Variables.pixelSpinBoxWidth
function updateValue( inValue )
{
var chargeToAdd = inValue - Variables.initialCharge
timeSpinBox.value = chargeToAdd * Variables.timeOnePercent * 100
}
onValueModified:
{
var chargeToAdd = value / ( Variables.timeOnePercent * 100 )
var sendValue = chargeToAdd + Variables.initialCharge;
root.valueChanged( sendValue )
chargeSpinBox.updateValue( sendValue )
priceSpinBox.updateValue( sendValue )
}
}
}
SpinBoxPrice
{
id: priceSpinBox
indicatorText: root.indicatorText
y: 119
stepSize: Variables.timeOnePercent * 100
function updateValue( inValue )
SpinBoxPrice
{
var chargeToAdd = inValue - Variables.initialCharge
priceSpinBox.value = chargeToAdd * Variables.priceOnePercent * 100
id: priceSpinBox
indicatorText: root.indicatorText
stepSize: Variables.timeOnePercent * 100
Layout.preferredWidth: Variables.pixelSpinBoxWidth
function updateValue( inValue )
{
var chargeToAdd = inValue - Variables.initialCharge
priceSpinBox.value = chargeToAdd * Variables.priceOnePercent * 100
}
onValueChanged:
{
priceChanged( value )
}
onValueModified:
{
var chargeToAdd = value / ( Variables.priceOnePercent * 100 )
var sendValue = chargeToAdd + Variables.initialCharge;
root.valueChanged( sendValue )
chargeSpinBox.updateValue( sendValue )
timeSpinBox.updateValue( sendValue )
}
}
onValueChanged:
{
priceChanged( value )
}
onValueModified:
{
var chargeToAdd = value / ( Variables.priceOnePercent * 100 )
var sendValue = chargeToAdd + Variables.initialCharge;
root.valueChanged( sendValue )
chargeSpinBox.updateValue( sendValue )
timeSpinBox.updateValue( sendValue )
}
}
Text
{
y: 170
anchors.top: spinBoxColumn.bottom
anchors.topMargin: 8
color: "#979eb6"
text: qsTr("Charging Rate")+ " 200 Mi/hr 355V 191A"
font.pixelSize: Variables.fontChargingRate
......
......@@ -15,42 +15,16 @@ Page {
spinBoxes.updateValues( dial.value )
}
background: Item {
Image {
x: 40
y: 60
width: 554
height: 240
fillMode: Image.PreserveAspectFit
source: "Assets/Select/EVCS_dial_554x220.png"
}
Image {
x: 150
y: 160
width: 20
height: 40
fillMode: Image.PreserveAspectFit
source: "Assets/Select/EVCS_charge_icon_20x40.png"
}
Text
{
anchors.bottom: spinBoxes.top
anchors.bottomMargin: 10
anchors.left: spinBoxes.left
color: "#fefefe"
text: qsTr("Select charging level")
font.pixelSize: Variables.fontSelectCharging
}
background: RowLayout {
spacing: 40
anchors.centerIn: parent
DialBase
{
id: dial
x: 40
y: 60
width: 240
height: 240
Layout.alignment: Qt.AlignCenter
Layout.preferredHeight: 240
Layout.preferredWidth: 240
from: 0
to: 100
onMoved:
......@@ -69,10 +43,9 @@ Page {
InfoSpinBoxes
{
id: spinBoxes
x:360
y:103
width:230
height: 150
Layout.preferredWidth: Variables.pixelSpinBoxWidth
Layout.preferredHeight: 180
Layout.alignment: Qt.AlignCenter
onValueChanged:
{
......@@ -82,13 +55,22 @@ Page {
{
Variables.currentPrice = value;
}
Text
{
anchors.bottom: spinBoxes.top
anchors.bottomMargin: 8
color: "#fefefe"
text: qsTr("Select charging level")
font.pixelSize: Variables.fontSelectCharging
}
}
Battery
{
id: batt
x: 650
y: 40
Layout.preferredWidth: 100
Layout.preferredHeight: 280
Layout.alignment: Qt.AlignCenter
topUpCharge: dial.value
}
}
......
......@@ -10,7 +10,7 @@ Page {
function initializeValues()
{
infoText.text = qsTr( "Charging" )
chargingText.text = qsTr( "Charging in progress" )
spinBoxes.chargingText = qsTr( "Charging in progress" )
battery.initializeValues();
}
......@@ -22,45 +22,44 @@ Page {
spinBoxes.chargingVisible = false;
}
background: Item {
background: RowLayout {
spacing: 40
anchors.centerIn: parent
Image {
x: 40
y: 60
width: 554
height: 240
Layout.alignment: Qt.AlignCenter
Layout.preferredHeight: 240
Layout.preferredWidth: 240
fillMode: Image.PreserveAspectFit
source: "Assets/Select/EVCS_dial_554x220_top.png"
}
InfoSpinBoxes
{
id: spinBoxes
x:360
y:103
width:230
height: 150
source: "Assets/Select/dial_outside_top_240x240.png"
Text
{
id: chargingText
id: infoText
anchors.centerIn: parent
color: "#42cc53"
text: qsTr( "Charging in progress" )
width: 230
height: 34
x: 20
font.pixelSize: Variables.fontChargingProgress
horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter
text: "00%"
font.pixelSize: Variables.fontChargingPercentage
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
InfoSpinBoxes
{
id: spinBoxes
Layout.preferredWidth: Variables.pixelSpinBoxWidth
Layout.preferredHeight: 180
Layout.alignment: Qt.AlignCenter
}
Battery
{
id: battery
x: 650
y: 40
Layout.preferredWidth: 100
Layout.preferredHeight: 280
Layout.alignment: Qt.AlignCenter
onChargedPercentageChanged :
{
......@@ -70,7 +69,7 @@ Page {
onSignalChargeCompleted:
{
updateSpinBoxes( chargedPercentage )
chargingText.text = qsTr( "Charging Complete" )
spinBoxes.chargingText = qsTr( "Charging Complete" )
root.signalChargeCompleted();
}
......@@ -85,17 +84,5 @@ Page {
spinBoxes.setPriceValue( ( value - battery.initialCharge) * Variables.priceOnePercent * 100 )
}
}
Text
{
id: infoText
x: 110
anchors.verticalCenter: parent.verticalCenter
color: "#42cc53"
text: "00%"
font.pixelSize: Variables.fontChargingPercentage
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
}
......@@ -20,8 +20,8 @@ Popup {
Component.onCompleted:
{
point.center =QtPositioning.coordinate(52.520686, 13.41638)
locationData.center =QtPositioning.coordinate(52.520686, 13.41638)
point.center = QtPositioning.coordinate(52.520686, 13.41638)
locationData.center = QtPositioning.coordinate(52.520686, 13.41638)
}
background:Rectangle
......
import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import App 1.0
Popup {
id: popup
modal: true
focus: true
closePolicy: Popup.CloseOnEscape
leftMargin: 125
topPadding: 50
leftPadding: 20
rightPadding: 140
background: Image {
id: backImage
width: 550
height: 368
fillMode: Image.PreserveAspectFit
source: "Assets/Background/EVCS_infobox_550x368.png"
MouseArea
{
anchors.fill: parent
onClicked:
{
if ( mouse.x > 485 && mouse.x < 524 && mouse.y > 17 && mouse.y < 56 )
popup.close();
}
}
}
contentItem: Item {
ColumnLayout {
anchors.centerIn: parent
SwitchBase {
text: qsTr("Wi-Fi")
onSignalError: console.log( "WifiErrror" );
}
SwitchBase {
text: qsTr("Bluetooth")
}
SwitchBase {
text: qsTr("Connection")
}
SwitchBase {
text: qsTr("Unknown")
}
}
}
}
......@@ -6,8 +6,6 @@ SpinBox {
id: control
value: 0
editable: true
width: 230
height: 34
font.pixelSize: Variables.fontControlSpinBox
property bool indicatorText: true;
......@@ -21,7 +19,7 @@ SpinBox {
z: 4
text: control.textFromValue(control.value, control.locale)
leftPadding: 45
leftPadding: Variables.pixelSpinBoxButton + 5
font: control.font
color: "#42cc53"
horizontalAlignment: Qt.AlignLeft
......@@ -32,8 +30,8 @@ SpinBox {
up.indicator: Rectangle {
x: control.mirrored ? 0 : parent.width - width
height: parent.height
implicitWidth: 34
implicitHeight: 34
implicitWidth: Variables.pixelSpinBoxButton
implicitHeight: Variables.pixelSpinBoxButton
color: "#0a0f2c"
border.color: "#0b2a4a"
......@@ -52,8 +50,8 @@ SpinBox {
down.indicator: Rectangle {
x: control.mirrored ? parent.width - width : 0
height: parent.height
implicitWidth: 34
implicitHeight: 34
implicitWidth: Variables.pixelSpinBoxButton
implicitHeight: Variables.pixelSpinBoxButton
color: "#0a0f2c"
border.color: "#0b2a4a"
......@@ -71,6 +69,4 @@ SpinBox {
background: Rectangle {
border.color: "#0b2a4a"
}
}
import QtQuick 2.6
import QtQuick.Controls 2.1
import App 1.0
SpinBoxBase
{
......@@ -21,4 +22,15 @@ SpinBoxBase
valueFromText: function(text, locale) {
return Number.fromLocaleString(locale, text.substring(0, text.lenght-1)) * 100
}
Rectangle
{
color: "transparent"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
border.color: "#41CD52"
border.width: Variables.pixelBorderSpinBox
}
}
import QtQuick 2.6
import QtQuick.Controls 2.1
import App 1.0
SpinBoxBase
{
......@@ -24,4 +25,15 @@ SpinBoxBase
valueFromText: function(text, locale) {
return Number.fromLocaleString(locale, text.substring(0, text.lenght-2)) * 100
}
Rectangle
{
color: "transparent"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
border.color: "#41CD52"
border.width: Variables.pixelBorderSpinBox
}
}
import QtQuick 2.6
import QtQuick.Controls 2.1
import App 1.0
SpinBoxBase
{
......@@ -29,4 +30,15 @@ SpinBoxBase
var posM = text.indexOf('s')
return Number.fromLocaleString(locale, text.substring(0, posH)) * 60 + Number.fromLocaleString(locale, text.substring(posH + 1, posM))
}
Rectangle
{
color: "transparent"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
border.color: "#41CD52"
border.width: Variables.pixelBorderSpinBox
}
}
import QtQuick 2.6
import QtQuick.Controls 2.1
Switch {
id: control
text: qsTr("Switch")
signal signalError
indicator: Rectangle {
implicitWidth: 48
implicitHeight: 26
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 13
color: control.checked ? "#17a81a" : "#ffffff"
border.color: control.checked ? "#17a81a" : "#cccccc"
Rectangle {
x: control.checked ? parent.width - width : 0
width: 26
height: 26
radius: 13
color: control.down ? "#cccccc" : "#ffffff"
border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
}
}
contentItem: Text {