app/cluster-gauges.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2016 The Qt Company Ltd.
   4 ** Copyright (C) 2018, 2019 Konsulko Group
   5 ** Contact: https://www.qt.io/licensing/
   6 **
   7 ** This file is part of the examples of the Qt Toolkit.
   8 **
   9 ** $QT_BEGIN_LICENSE:BSD$
  10 ** Commercial License Usage
  11 ** Licensees holding valid commercial Qt licenses may use this file in
  12 ** accordance with the commercial license agreement provided with the
  13 ** Software or, alternatively, in accordance with the terms contained in
  14 ** a written agreement between you and The Qt Company. For licensing terms
  15 ** and conditions see https://www.qt.io/terms-conditions. For further
  16 ** information use the contact form at https://www.qt.io/contact-us.
  17 **
  18 ** BSD License Usage
  19 ** Alternatively, you may use this file under the terms of the BSD license
  20 ** as follows:
  21 **
  22 ** "Redistribution and use in source and binary forms, with or without
  23 ** modification, are permitted provided that the following conditions are
  24 ** met:
  25 **   * Redistributions of source code must retain the above copyright
  26 **     notice, this list of conditions and the following disclaimer.
  27 **   * Redistributions in binary form must reproduce the above copyright
  28 **     notice, this list of conditions and the following disclaimer in
  29 **     the documentation and/or other materials provided with the
  30 **     distribution.
  31 **   * Neither the name of The Qt Company Ltd nor the names of its
  32 **     contributors may be used to endorse or promote products derived
  33 **     from this software without specific prior written permission.
  34 **
  35 **
  36 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  37 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  38 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  39 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  40 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  41 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  42 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  43 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  44 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  45 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  46 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  47 **
  48 ** $QT_END_LICENSE$
  49 **
  50 ****************************************************************************/
  51
  52 /*
  53  * NOTE: Originally written from scratch, but enough code was eventually
  54  *       pasted in from the Qt dashboard.qml example that its license text
  55  *       has been adopted.
  56  */
  57
  58 import QtQuick 2.2
  59 import QtQuick.Window 2.1
  60 import QtQuick.Controls 1.4
  61 import QtQuick.Controls.Styles 1.4
  62 import QtQuick.Extras 1.4
  63
  64 ApplicationWindow {
  65     id: root
  66     width: 1920
  67     height: 1080
  68     visible: true
  69     flags: Qt.FramelessWindowHint
  70     style: ApplicationWindowStyle {
  71         background: Rectangle {
  72             color: "black"
  73         }
  74     }
  75
  76     ValueSource {
  77         id: valueSource
  78     }
  79
  80     Rectangle {
  81         id: statusFrame
  82         x: (parent.width - width) / 2
  83         y: 40
  84         width: 1280
  85         height: 96
  86         radius: height / 5
  87
  88         color: "black"
  89         border.width: 2
  90         border.color: "grey"
  91
  92         Row {
  93             width: parent.width
  94             height: parent.height * 0.75
  95             spacing: (parent.width - (14 * parent.height * 0.75)) / 15
  96
  97             anchors.fill: parent
  98             anchors.topMargin: (parent.height - height) /2
  99             anchors.bottomMargin: (parent.height - height) /2
 100             anchors.leftMargin: (parent.width - (14 * parent.height * 0.75)) / 15
 101             anchors.rightMargin: (parent.width - (14 * parent.height * 0.75)) / 15
 102
 103             Rectangle {
 104                 width: height
 105                 height: parent.height
 106                 radius: height / 5
 107
 108                 color: "black"
 109                 border.width: 2
 110                 border.color: "grey"
 111
 112                 TurnIndicator {
 113                     id: leftIndicator
 114                     anchors.verticalCenter: parent.verticalCenter
 115                     anchors.horizontalCenter: parent.horizontalCenter
 116                     width: height
 117                     height: parent.height * 0.75
 118
 119                     direction: Qt.LeftArrow
 120                     on: valueSource.turnSignal == Qt.LeftArrow
 121                 }
 122             }
 123
 124             Rectangle {
 125                 width: height
 126                 height: parent.height
 127                 radius: height / 5
 128
 129                 color: "black"
 130                 border.width: 2
 131                 border.color: "grey"
 132
 133                 Image {
 134                     source: valueSource.startUp ? './images/AGL_Icons_Engine_yellow.svg' : './images/AGL_Icons_Engine.svg'
 135                     anchors.verticalCenter: parent.verticalCenter
 136                     anchors.horizontalCenter: parent.horizontalCenter
 137                     width: height
 138                     height: parent.height * 0.75
 139                     fillMode: Image.PreserveAspectFit
 140                 }
 141             }
 142
 143             Rectangle {
 144                 width: height
 145                 height: parent.height
 146                 radius: height / 5
 147
 148                 color: "black"
 149                 border.width: 2
 150                 border.color: "grey"
 151
 152                 Image {
 153                     source: valueSource.startUp ? './images/AGL_Icons_Oil_red.svg' : './images/AGL_Icons_Oil.svg'
 154                     anchors.verticalCenter: parent.verticalCenter
 155                     anchors.horizontalCenter: parent.horizontalCenter
 156                     width: height
 157                     height: parent.height * 0.75
 158                     fillMode: Image.PreserveAspectFit
 159                 }
 160             }
 161
 162             Rectangle {
 163                 width: height
 164                 height: parent.height
 165                 radius: height / 5
 166
 167                 color: "black"
 168                 border.width: 2
 169                 border.color: "grey"
 170
 171                 Image {
 172                     source: valueSource.startUp ? './images/AGL_Icons_Battery_red.svg' : './images/AGL_Icons_Battery.svg'
 173                     anchors.verticalCenter: parent.verticalCenter
 174                     anchors.horizontalCenter: parent.horizontalCenter
 175                     width: height
 176                     height: parent.height * 0.75
 177                     fillMode: Image.PreserveAspectFit
 178                 }
 179             }
 180
 181             Rectangle {
 182                 width: height
 183                 height: parent.height
 184                 radius: height / 5
 185
 186                 color: "black"
 187                 border.width: 2
 188                 border.color: "grey"
 189
 190                 Image {
 191                     source: valueSource.startUp ? './images/AGL_Icons_ABS_red.svg' : './images/AGL_Icons_ABS.svg'
 192                     anchors.verticalCenter: parent.verticalCenter
 193                     anchors.horizontalCenter: parent.horizontalCenter
 194                     width: height
 195                     height: parent.height * 0.75
 196                     fillMode: Image.PreserveAspectFit
 197                 }
 198             }
 199
 200             Rectangle {
 201                 width: height
 202                 height: parent.height
 203                 radius: height / 5
 204
 205                 color: "black"
 206                 border.width: 2
 207                 border.color: "grey"
 208
 209                 Image {
 210                     source: valueSource.startUp ? './images/AGL_Icons_ParkingBrake_red.svg' : './images/AGL_Icons_ParkingBrake.svg'
 211                     anchors.verticalCenter: parent.verticalCenter
 212                     anchors.horizontalCenter: parent.horizontalCenter
 213                     width: height
 214                     height: parent.height * 0.75
 215                     fillMode: Image.PreserveAspectFit
 216                 }
 217             }
 218
 219             Rectangle {
 220                 width: height
 221                 height: parent.height
 222                 radius: height / 5
 223
 224                 color: "black"
 225                 border.width: 2
 226                 border.color: "grey"
 227
 228                 Text {
 229                     id: prindle
 230                     anchors.verticalCenter: parent.verticalCenter
 231                     anchors.horizontalCenter: parent.horizontalCenter
 232                     horizontalAlignment: Text.AlignCenter
 233
 234                     text: valueSource.prindle
 235                     color: "white"
 236                     font.pixelSize: parent.height * 0.85
 237                 }
 238             }
 239
 240             Rectangle {
 241                 id: gearIndicatior
 242                 width: height
 243                 height: parent.height
 244                 radius: height / 5
 245
 246                 color: "black"
 247                 border.width: 2
 248                 border.color: "grey"
 249
 250                 Text {
 251                     id: gear
 252                     anchors.verticalCenter: parent.verticalCenter
 253                     anchors.horizontalCenter: parent.horizontalCenter
 254                     horizontalAlignment: Text.AlignCenter
 255
 256                     text: valueSource.gear
 257                     color: "white"
 258                     font.pixelSize: parent.height * 0.85
 259                 }
 260             }
 261
 262             Rectangle {
 263                 width: height
 264                 height: parent.height
 265                 radius: height / 5
 266
 267                 color: "black"
 268                 border.width: 2
 269                 border.color: "grey"
 270
 271                 Image {
 272                     source: valueSource.startUp ? './images/AGL_Icons_Seatbelt_red.svg' : './images/AGL_Icons_Seatbelt.svg'
 273                     anchors.verticalCenter: parent.verticalCenter
 274                     anchors.horizontalCenter: parent.horizontalCenter
 275                     width: height
 276                     height: parent.height * 0.75
 277                     fillMode: Image.PreserveAspectFit
 278                 }
 279             }
 280
 281             Rectangle {
 282                 width: height
 283                 height: parent.height
 284                 radius: height / 5
 285
 286                 color: "black"
 287                 border.width: 2
 288                 border.color: "grey"
 289
 290                 Image {
 291                     source: valueSource.startUp ? './images/AGL_Icons_OpenDoor_red.svg' : './images/AGL_Icons_OpenDoor.svg'
 292                     anchors.verticalCenter: parent.verticalCenter
 293                     anchors.horizontalCenter: parent.horizontalCenter
 294                     width: height
 295                     height: parent.height * 0.75
 296                     fillMode: Image.PreserveAspectFit
 297                 }
 298             }
 299
 300             Rectangle {
 301                 width: height
 302                 height: parent.height
 303                 radius: height / 5
 304
 305                 color: "black"
 306                 border.width: 2
 307                 border.color: "grey"
 308
 309                 Image {
 310                     source: valueSource.startUp ? './images/AGL_Icons_Lights_red.svg' : './images/AGL_Icons_Lights.svg'
 311                     anchors.verticalCenter: parent.verticalCenter
 312                     anchors.horizontalCenter: parent.horizontalCenter
 313                     width: height
 314                     height: parent.height * 0.75
 315                     fillMode: Image.PreserveAspectFit
 316                 }
 317             }
 318
 319             Rectangle {
 320                 width: height
 321                 height: parent.height
 322                 radius: height / 5
 323
 324                 color: "black"
 325                 border.width: 2
 326                 border.color: "grey"
 327
 328                 Image {
 329                     source: valueSource.cruiseEnabled ? (valueSource.cruiseSet  ? './images/AGL_Icons_CruiseControl_green.svg' : './images/AGL_Icons_CruiseControl_yellow.svg') : './images/AGL_Icons_CruiseControl.svg'
 330                     anchors.verticalCenter: parent.verticalCenter
 331                     anchors.horizontalCenter: parent.horizontalCenter
 332                     width: height
 333                     height: parent.height * 0.75
 334                     fillMode: Image.PreserveAspectFit
 335                 }
 336             }
 337
 338             Rectangle {
 339                 width: height
 340                 height: parent.height
 341                 radius: height / 5
 342
 343                 color: "black"
 344                 border.width: 2
 345                 border.color: "grey"
 346
 347                 Image {
 348                     source: valueSource.laneDepartureWarnEnabled ? './images/AGL_Icons_LaneDeparture_green.svg' : './images/AGL_Icons_LaneDeparture.svg'
 349                     anchors.verticalCenter: parent.verticalCenter
 350                     anchors.horizontalCenter: parent.horizontalCenter
 351                     width: height
 352                     height: parent.height * 0.75
 353                     fillMode: Image.PreserveAspectFit
 354                 }
 355             }
 356
 357             Rectangle {
 358                 width: height
 359                 height: parent.height
 360                 radius: height / 5
 361
 362                 color: "black"
 363                 border.width: 2
 364                 border.color: "grey"
 365
 366                 TurnIndicator {
 367                     id: rightIndicator
 368                     anchors.verticalCenter: parent.verticalCenter
 369                     anchors.horizontalCenter: parent.horizontalCenter
 370                     width: height
 371                     height: parent.height * 0.75
 372
 373                     direction: Qt.RightArrow
 374                     on: valueSource.turnSignal == Qt.RightArrow
 375                 }
 376             }
 377         }
 378     }
 379
 380     Item {
 381         x: 18
 382         y: 260
 383         width: 600
 384         height: width
 385
 386         CircularGauge {
 387             id: accelerometer
 388             x: (parent.width - width) / 2
 389             //y: (parent.height - height) / 2
 390             width: parent.width * 0.9
 391             height: width
 392
 393             maximumValue: valueSource.mphDisplay ? 140 : 220
 394             value: valueSource.kph * valueSource.speedScaling
 395
 396             style: DashboardGaugeStyle {}
 397         }
 398     }
 399
 400     Item {
 401         x: 1302
 402         y: 260
 403         width: 600
 404         height: width
 405
 406         CircularGauge {
 407             id: tachometer
 408             x: (parent.width - width) / 2
 409             width: parent.width * 0.9
 410             height: width
 411
 412             maximumValue: 8
 413             value: valueSource.rpm
 414
 415             style: TachometerStyle {}
 416         }
 417
 418         CircularGauge {
 419             id: fuelGauge
 420             value: valueSource.fuel
 421             maximumValue: 1
 422             y: parent.width * 0.85
 423             width: parent.width * 0.45
 424             height: parent.height * 0.25
 425
 426             style: IconGaugeStyle {
 427                 id: fuelGaugeStyle
 428
 429                 icon: "./images/fuel-icon.png"
 430                 minWarningColor: Qt.rgba(0.5, 0, 0, 1)
 431
 432                 tickmarkLabel: Text {
 433                     color: "white"
 434                     visible: styleData.value === 0 || styleData.value === 1
 435                     font.pixelSize: fuelGaugeStyle.toPixels(0.225)
 436                     text: styleData.value === 0 ? "E" : (styleData.value === 1 ? "F" : "")
 437                 }
 438             }
 439         }
 440
 441         CircularGauge {
 442             id: tempGauge
 443             value: valueSource.temperature
 444             maximumValue: 1
 445             x: parent.width * 0.55
 446             y: parent.width * 0.85
 447             width: parent.width * 0.45
 448             height: parent.height * 0.25
 449
 450             style: IconGaugeStyle {
 451                 id: tempGaugeStyle
 452
 453                 icon: "./images/temperature-icon.png"
 454                 maxWarningColor: Qt.rgba(0.5, 0, 0, 1)
 455
 456                 tickmarkLabel: Text {
 457                     color: "white"
 458                     visible: styleData.value === 0 || styleData.value === 1
 459                     font.pixelSize: tempGaugeStyle.toPixels(0.225)
 460                     text: styleData.value === 0 ? "C" : (styleData.value === 1 ? "H" : "")
 461                 }
 462             }
 463         }
 464     }
 465
 466     Rectangle {
 467         id: frame
 468         x: 640
 469         y: 180
 470         width: 640
 471         height: 720
 472
 473         color: "black"
 474         border.width: 4
 475         border.color: "grey"
 476
 477         Image {
 478             source: './images/Utility_Logo_Grey-01.svg'
 479             x: (parent.width - width) / 2
 480             y: (parent.height - height) / 2
 481             width: parent.width / 2
 482             height: width
 483         }
 484     }
 485
 486     Image {
 487         source: './images/agl_title_793x211.png'
 488         x: (parent.width - width) / 2
 489         y: 940
 490         width: 376
 491         height: 100
 492     }
 493 }