From a78db8638590c797c78c36b2ef3de5ed9c012bba Mon Sep 17 00:00:00 2001 From: Scott Murray Date: Tue, 28 Mar 2017 17:32:16 -0400 Subject: Initial import from CES2017 repository Pull AGL QtQuickControls2 style customizations out of CES2017 repository. Bug-AGL: SPEC-462 Change-Id: I7d7c6df3ea2832026adf26c640c56308668f0340 Signed-off-by: Scott Murray --- imports/imports.pro | 2 + .../qtquickcontrols2aglstyle/ApplicationWindow.qml | 36 ++++++++ imports/qtquickcontrols2aglstyle/Button.qml | 63 ++++++++++++++ imports/qtquickcontrols2aglstyle/Label.qml | 25 ++++++ imports/qtquickcontrols2aglstyle/Page.qml | 58 +++++++++++++ imports/qtquickcontrols2aglstyle/ProgressBar.qml | 51 +++++++++++ imports/qtquickcontrols2aglstyle/Slider.qml | 56 +++++++++++++ imports/qtquickcontrols2aglstyle/Switch.qml | 28 +++++++ imports/qtquickcontrols2aglstyle/TextField.qml | 40 +++++++++ imports/qtquickcontrols2aglstyle/Tumbler.qml | 86 +++++++++++++++++++ .../images/AGL_HMI_Background_NoCar-01.png | Bin 0 -> 944767 bytes .../images/HMI_Settings_Button_Cancel.svg | 93 +++++++++++++++++++++ .../images/HMI_Settings_Button_Ok.svg | 93 +++++++++++++++++++++ .../images/HMI_Settings_Toggle_OFF.svg | 70 ++++++++++++++++ .../images/HMI_Settings_Toggle_ON.svg | 82 ++++++++++++++++++ .../qtquickcontrols2aglstyle.pro | 8 ++ 16 files changed, 791 insertions(+) create mode 100644 imports/imports.pro create mode 100644 imports/qtquickcontrols2aglstyle/ApplicationWindow.qml create mode 100644 imports/qtquickcontrols2aglstyle/Button.qml create mode 100644 imports/qtquickcontrols2aglstyle/Label.qml create mode 100644 imports/qtquickcontrols2aglstyle/Page.qml create mode 100644 imports/qtquickcontrols2aglstyle/ProgressBar.qml create mode 100644 imports/qtquickcontrols2aglstyle/Slider.qml create mode 100644 imports/qtquickcontrols2aglstyle/Switch.qml create mode 100644 imports/qtquickcontrols2aglstyle/TextField.qml create mode 100644 imports/qtquickcontrols2aglstyle/Tumbler.qml create mode 100644 imports/qtquickcontrols2aglstyle/images/AGL_HMI_Background_NoCar-01.png create mode 100644 imports/qtquickcontrols2aglstyle/images/HMI_Settings_Button_Cancel.svg create mode 100644 imports/qtquickcontrols2aglstyle/images/HMI_Settings_Button_Ok.svg create mode 100644 imports/qtquickcontrols2aglstyle/images/HMI_Settings_Toggle_OFF.svg create mode 100644 imports/qtquickcontrols2aglstyle/images/HMI_Settings_Toggle_ON.svg create mode 100644 imports/qtquickcontrols2aglstyle/qtquickcontrols2aglstyle.pro (limited to 'imports') diff --git a/imports/imports.pro b/imports/imports.pro new file mode 100644 index 0000000..6eb6b10 --- /dev/null +++ b/imports/imports.pro @@ -0,0 +1,2 @@ +TEMPLATE = subdirs +SUBDIRS = qtquickcontrols2aglstyle diff --git a/imports/qtquickcontrols2aglstyle/ApplicationWindow.qml b/imports/qtquickcontrols2aglstyle/ApplicationWindow.qml new file mode 100644 index 0000000..04dd476 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/ApplicationWindow.qml @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2016 The Qt Company Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import QtQuick 2.6 +import QtQuick.Window 2.2 +import QtQuick.Templates 2.0 as T + +T.ApplicationWindow { + id: root + width: 1080 + height: 1920 - 218 - 215 + visible: true + flags: Qt.FramelessWindowHint + + font.family: 'Robota' + + background: Image { + anchors.fill: parent + anchors.topMargin: -218 + anchors.bottomMargin: -215 + source: './images/AGL_HMI_Background_NoCar-01.png' + } +} diff --git a/imports/qtquickcontrols2aglstyle/Button.qml b/imports/qtquickcontrols2aglstyle/Button.qml new file mode 100644 index 0000000..eee700d --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/Button.qml @@ -0,0 +1,63 @@ +/* + * Copyright (C) 2016 The Qt Company Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import QtQuick 2.6 +import QtQuick.Window 2.0 +import QtQuick.Templates 2.0 as T + +T.Button { + id: root + implicitWidth: background.implicitWidth + implicitHeight: background.implicitHeight + font.family: 'Roboto' + font.pixelSize: Math.min(Screen.width, Screen.height) / 50 + + Translate { + id: translate + } + + contentItem: Text { + text: root.text + font: root.font + opacity: enabled ? 1.0 : 0.3 + color: 'white' + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + transform: translate + } + + background: Image { + source: root.highlighted ? './images/HMI_Settings_Button_Ok.svg' : './images/HMI_Settings_Button_Cancel.svg' + transform: translate + } + + states: [ + State { + name: 'pressed' + when: root.pressed + PropertyChanges { + target: translate + x: 3 + y: 3 + } + PropertyChanges { + target: background + opacity: 0.75 + } + } + ] +} diff --git a/imports/qtquickcontrols2aglstyle/Label.qml b/imports/qtquickcontrols2aglstyle/Label.qml new file mode 100644 index 0000000..3e9a934 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/Label.qml @@ -0,0 +1,25 @@ +/* + * Copyright (C) 2016 The Qt Company Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import QtQuick 2.6 +import QtQuick.Window 2.2 +import QtQuick.Templates 2.0 as T + +T.Label { + font.family: 'Roboto' + font.pixelSize: Math.min(Screen.width, Screen.height) / 30 + color: 'white' +} diff --git a/imports/qtquickcontrols2aglstyle/Page.qml b/imports/qtquickcontrols2aglstyle/Page.qml new file mode 100644 index 0000000..8a085e9 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/Page.qml @@ -0,0 +1,58 @@ +/* + * Copyright (C) 2016 The Qt Company Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import QtQuick 2.6 +import QtQuick.Templates 2.0 as T + +T.Page { + id: root + + Item { + id: headerItem + height: 200 + opacity: 0.0 + Label { + id: text + text: root.title.toUpperCase() + anchors.left: bar.left + anchors.bottom: bar.top + } + Rectangle { + id: bar + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + width: root.width * 0.85 + height: 1 + color: 'white' + } + } + states: [ + State { + when: root.title.length > 0 + PropertyChanges { + target: root + header: headerItem + } + PropertyChanges { + target: headerItem + opacity: 0.5 + } + } + ] + + contentItem: Item {} + background: Item {} +} diff --git a/imports/qtquickcontrols2aglstyle/ProgressBar.qml b/imports/qtquickcontrols2aglstyle/ProgressBar.qml new file mode 100644 index 0000000..26135a1 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/ProgressBar.qml @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2016 The Qt Company Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import QtQuick 2.6 +import QtQuick.Templates 2.0 as T + +T.ProgressBar { + id: control + implicitWidth: background.implicitWidth + implicitHeight: background.implicitHeight + + background: Rectangle { + implicitWidth: 200 + implicitHeight: 10 + radius: control.height / 2 + x: control.leftPadding + y: parent.height / 2 - height / 2 + color: "#666666" + } + + contentItem: Item { + implicitWidth: background.implicitWidth + implicitHeight: background.implicitHeight + + Rectangle { + rotation: -90 + transformOrigin: Item.TopLeft + y: 10 + width: parent.height + height: control.visualPosition * background.width + radius: width / 2 + gradient: Gradient { + GradientStop { position: 0.0; color: '#59FF7F' } + GradientStop { position: 1.0; color: '#6BFBFF' } + } + } + } +} diff --git a/imports/qtquickcontrols2aglstyle/Slider.qml b/imports/qtquickcontrols2aglstyle/Slider.qml new file mode 100644 index 0000000..6c9863b --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/Slider.qml @@ -0,0 +1,56 @@ +/* + * Copyright (C) 2016 The Qt Company Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import QtQuick 2.6 +import QtQuick.Templates 2.0 as T + +T.Slider { + id: root + implicitWidth: background.implicitWidth + implicitHeight: handle.implicitHeight + + background: Rectangle { + implicitWidth: 200 + height: 10 + radius: height / 2 + x: root.leftPadding + y: parent.height / 2 - height / 2 + color: "#666666" + + Rectangle { + rotation: -90 + transformOrigin: Item.TopLeft + y: parent.height + width: parent.height + height: handle.x + handle.width + radius: width / 2 + gradient: Gradient { + GradientStop { position: 0.0; color: '#59FF7F' } + GradientStop { position: 1.0; color: '#6BFBFF' } + } + } + } + + handle: Rectangle { + x: root.leftPadding + root.visualPosition * (root.availableWidth - width) + y: root.topPadding + root.availableHeight / 2 - height / 2 + implicitWidth: implicitHeight + implicitHeight: 50 + radius: implicitHeight / 2 + color: root.pressed ? "#f0f0f0" : "#f6f6f6" + border.color: "#bdbebf" + } +} diff --git a/imports/qtquickcontrols2aglstyle/Switch.qml b/imports/qtquickcontrols2aglstyle/Switch.qml new file mode 100644 index 0000000..f3f712e --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/Switch.qml @@ -0,0 +1,28 @@ +/* + * Copyright (C) 2016 The Qt Company Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import QtQuick 2.6 +import QtQuick.Templates 2.0 as T + +T.Switch { + id: root + implicitWidth: indicator.implicitWidth + implicitHeight: indicator.implicitHeight + + indicator: Image { + source: root.checked ? './images/HMI_Settings_Toggle_ON.svg' : './images/HMI_Settings_Toggle_OFF.svg' + } +} diff --git a/imports/qtquickcontrols2aglstyle/TextField.qml b/imports/qtquickcontrols2aglstyle/TextField.qml new file mode 100644 index 0000000..5429afb --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/TextField.qml @@ -0,0 +1,40 @@ +/* + * Copyright (C) 2016 The Qt Company Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import QtQuick 2.6 +import QtQuick.Window 2.2 +import QtQuick.Templates 2.0 as T + +T.TextField { + id: root + implicitWidth: background.implicitWidth + implicitHeight: background.implicitHeight + font.family: 'Roboto' + font.pixelSize: Math.min(Screen.width, Screen.height) / 20 + color: 'white' + + background: Item { + implicitWidth: 586 + implicitHeight: Math.min(Screen.width, Screen.height) / 20 + Rectangle { + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.right: parent.right + height: 1 + color: 'white' + } + } +} diff --git a/imports/qtquickcontrols2aglstyle/Tumbler.qml b/imports/qtquickcontrols2aglstyle/Tumbler.qml new file mode 100644 index 0000000..5ec6653 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/Tumbler.qml @@ -0,0 +1,86 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt 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 http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.6 +import QtQuick.Layouts 1.1 +import QtQuick.Controls 2.0 +import QtQuick.Templates 2.0 as T + +T.Tumbler { + id: control + implicitWidth: 200 + implicitHeight: 200 + + //! [delegate] + delegate: Label { + width: PathView.view.width + text: model.modelData + opacity: PathView.isCurrentItem ? 1 : 0.5 + Behavior on opacity { + NumberAnimation { duration: 250 } + } + + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + //! [delegate] + + //! [contentItem] + contentItem: PathView { + id: pathView + anchors.fill: parent + model: control.model + delegate: control.delegate + clip: true + pathItemCount: control.visibleItemCount + 1 + preferredHighlightBegin: 0.5 + preferredHighlightEnd: 0.5 + dragMargin: width / 2 + + path: Path { + startX: pathView.width / 2 + startY: -pathView.delegateHeight / 2 + PathLine { + x: pathView.width / 2 + y: pathView.pathItemCount * pathView.delegateHeight - pathView.delegateHeight / 2 + } + } + + property real delegateHeight: pathView.height / control.visibleItemCount + + } + //! [contentItem] +} diff --git a/imports/qtquickcontrols2aglstyle/images/AGL_HMI_Background_NoCar-01.png b/imports/qtquickcontrols2aglstyle/images/AGL_HMI_Background_NoCar-01.png new file mode 100644 index 0000000..595f742 Binary files /dev/null and b/imports/qtquickcontrols2aglstyle/images/AGL_HMI_Background_NoCar-01.png differ diff --git a/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Button_Cancel.svg b/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Button_Cancel.svg new file mode 100644 index 0000000..4251412 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Button_Cancel.svg @@ -0,0 +1,93 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Button_Ok.svg b/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Button_Ok.svg new file mode 100644 index 0000000..dac68d8 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Button_Ok.svg @@ -0,0 +1,93 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Toggle_OFF.svg b/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Toggle_OFF.svg new file mode 100644 index 0000000..f448359 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Toggle_OFF.svg @@ -0,0 +1,70 @@ + + + +image/svg+xmlOFF + \ No newline at end of file diff --git a/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Toggle_ON.svg b/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Toggle_ON.svg new file mode 100644 index 0000000..3ee9843 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/images/HMI_Settings_Toggle_ON.svg @@ -0,0 +1,82 @@ + + + +image/svg+xmlON + \ No newline at end of file diff --git a/imports/qtquickcontrols2aglstyle/qtquickcontrols2aglstyle.pro b/imports/qtquickcontrols2aglstyle/qtquickcontrols2aglstyle.pro new file mode 100644 index 0000000..360c716 --- /dev/null +++ b/imports/qtquickcontrols2aglstyle/qtquickcontrols2aglstyle.pro @@ -0,0 +1,8 @@ +TEMPLATE = aux + +DISTFILES = *.qml images + +files.files = $$DISTFILES +files.path = $$[QT_INSTALL_QML]/QtQuick/Controls.2/AGL + +INSTALLS += files -- cgit 1.2.3-korg