app/DashboardGaugeStyle.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2016 The Qt Company Ltd.
   4 ** Contact: https://www.qt.io/licensing/
   5 **
   6 ** This file is part of the examples of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:BSD$
   9 ** Commercial License Usage
  10 ** Licensees holding valid commercial Qt licenses may use this file in
  11 ** accordance with the commercial license agreement provided with the
  12 ** Software or, alternatively, in accordance with the terms contained in
  13 ** a written agreement between you and The Qt Company. For licensing terms
  14 ** and conditions see https://www.qt.io/terms-conditions. For further
  15 ** information use the contact form at https://www.qt.io/contact-us.
  16 **
  17 ** BSD License Usage
  18 ** Alternatively, you may use this file under the terms of the BSD license
  19 ** as follows:
  20 **
  21 ** "Redistribution and use in source and binary forms, with or without
  22 ** modification, are permitted provided that the following conditions are
  23 ** met:
  24 **   * Redistributions of source code must retain the above copyright
  25 **     notice, this list of conditions and the following disclaimer.
  26 **   * Redistributions in binary form must reproduce the above copyright
  27 **     notice, this list of conditions and the following disclaimer in
  28 **     the documentation and/or other materials provided with the
  29 **     distribution.
  30 **   * Neither the name of The Qt Company Ltd nor the names of its
  31 **     contributors may be used to endorse or promote products derived
  32 **     from this software without specific prior written permission.
  33 **
  34 **
  35 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  36 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  37 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  38 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  39 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  40 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  41 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  42 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  43 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  44 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  45 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  46 **
  47 ** $QT_END_LICENSE$
  48 **
  49 ****************************************************************************/
  50
  51
  52 import QtQuick 2.2
  53 import QtQuick.Controls.Styles 1.4
  54
  55 CircularGaugeStyle {
  56     tickmarkInset: toPixels(0.04)
  57     minorTickmarkInset: tickmarkInset
  58     labelStepSize: 20
  59     labelInset: toPixels(0.23)
  60
  61     property real xCenter: outerRadius
  62     property real yCenter: outerRadius
  63     property real needleLength: outerRadius - tickmarkInset * 1.25
  64     property real needleTipWidth: toPixels(0.02)
  65     property real needleBaseWidth: toPixels(0.06)
  66     property bool halfGauge: false
  67
  68     function toPixels(percentage) {
  69         return percentage * outerRadius;
  70     }
  71
  72     function degToRad(degrees) {
  73         return degrees * (Math.PI / 180);
  74     }
  75
  76     function radToDeg(radians) {
  77         return radians * (180 / Math.PI);
  78     }
  79
  80     function paintBackground(ctx) {
  81         if (halfGauge) {
  82             ctx.beginPath();
  83             ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height / 2);
  84             ctx.clip();
  85         }
  86
  87         ctx.beginPath();
  88         ctx.fillStyle = "black";
  89         ctx.ellipse(0, 0, ctx.canvas.width, ctx.canvas.height);
  90         ctx.fill();
  91
  92         ctx.beginPath();
  93         ctx.lineWidth = tickmarkInset;
  94         ctx.strokeStyle = "black";
  95         ctx.arc(xCenter, yCenter, outerRadius - ctx.lineWidth / 2, outerRadius - ctx.lineWidth / 2, 0, Math.PI * 2);
  96         ctx.stroke();
  97
  98         ctx.beginPath();
  99         ctx.lineWidth = tickmarkInset / 2;
 100         ctx.strokeStyle = "#222";
 101         ctx.arc(xCenter, yCenter, outerRadius - ctx.lineWidth / 2, outerRadius - ctx.lineWidth / 2, 0, Math.PI * 2);
 102         ctx.stroke();
 103
 104         ctx.beginPath();
 105         var gradient = ctx.createRadialGradient(xCenter, yCenter, 0, xCenter, yCenter, outerRadius * 1.5);
 106         gradient.addColorStop(0, Qt.rgba(1, 1, 1, 0));
 107         gradient.addColorStop(0.7, Qt.rgba(1, 1, 1, 0.13));
 108         gradient.addColorStop(1, Qt.rgba(1, 1, 1, 1));
 109         ctx.fillStyle = gradient;
 110         ctx.arc(xCenter, yCenter, outerRadius - tickmarkInset, outerRadius - tickmarkInset, 0, Math.PI * 2);
 111         ctx.fill();
 112     }
 113
 114     background: Canvas {
 115         onPaint: {
 116             var ctx = getContext("2d");
 117             ctx.reset();
 118             paintBackground(ctx);
 119         }
 120
 121         Text {
 122             id: speedText
 123             font.pixelSize: toPixels(0.3)
 124             text: kphInt
 125             color: "white"
 126             horizontalAlignment: Text.AlignRight
 127             anchors.horizontalCenter: parent.horizontalCenter
 128             anchors.top: parent.verticalCenter
 129             anchors.topMargin: toPixels(0.1)
 130             visible: valueSource.displayNumericSpeeds === true
 131
 132             readonly property int kphInt: control.value
 133         }
 134         Text {
 135             id: speedLabel
 136             text: valueSource.mphDisplay ? "MPH" : "km/h"
 137             color: "white"
 138             font.pixelSize: toPixels(0.09)
 139             anchors.top: speedText.bottom
 140             anchors.horizontalCenter: parent.horizontalCenter
 141         }
 142     }
 143
 144     needle: Canvas {
 145         implicitWidth: needleBaseWidth
 146         implicitHeight: needleLength
 147
 148         property real xCenter: width / 2
 149         property real yCenter: height / 2
 150
 151         onPaint: {
 152             var ctx = getContext("2d");
 153             ctx.reset();
 154
 155             ctx.beginPath();
 156             ctx.moveTo(xCenter, height);
 157             ctx.lineTo(xCenter - needleBaseWidth / 2, height - needleBaseWidth / 2);
 158             ctx.lineTo(xCenter - needleTipWidth / 2, 0);
 159             ctx.lineTo(xCenter, yCenter - needleLength);
 160             ctx.lineTo(xCenter, 0);
 161             ctx.closePath();
 162             ctx.fillStyle = Qt.rgba(0.66, 0, 0, 0.66);
 163             ctx.fill();
 164
 165             ctx.beginPath();
 166             ctx.moveTo(xCenter, height)
 167             ctx.lineTo(width, height - needleBaseWidth / 2);
 168             ctx.lineTo(xCenter + needleTipWidth / 2, 0);
 169             ctx.lineTo(xCenter, 0);
 170             ctx.closePath();
 171             ctx.fillStyle = Qt.lighter(Qt.rgba(0.66, 0, 0, 0.66));
 172             ctx.fill();
 173         }
 174     }
 175
 176     foreground: null
 177 }