1 files changed, 121 insertions, 0 deletions
diff --git a/src/controls/doc/snippets/circulargauge-background-range.qml b/src/controls/doc/snippets/circulargauge-background-range.qml
new file mode 100644
index 00000000..f218e916
--- /dev/null
+++ b/src/controls/doc/snippets/circulargauge-background-range.qml
@@ -0,0 +1,121 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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 Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//! [range]
+import QtQuick 2.0
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Extras 1.4
+import QtQuick.Extras.Private 1.0
+
+Rectangle {
+    width: 300
+    height: 300
+    color: "#494d53"
+
+    CircularGauge {
+        id: gauge
+        anchors.centerIn: parent
+        style: CircularGaugeStyle {
+            id: style
+
+            //! [background]
+            function degreesToRadians(degrees) {
+                return degrees * (Math.PI / 180);
+            }
+
+
+            background: Canvas {
+                onPaint: {
+                    var ctx = getContext("2d");
+                    ctx.reset();
+
+                    ctx.beginPath();
+                    ctx.strokeStyle = "#e34c22";
+                    ctx.lineWidth = outerRadius * 0.02;
+
+                    ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2,
+                        degreesToRadians(valueToAngle(80) - 90), degreesToRadians(valueToAngle(100) - 90));
+                    ctx.stroke();
+                }
+            }
+            //! [background]
+
+            //! [tickmark]
+            tickmark: Rectangle {
+                visible: styleData.value < 80 || styleData.value % 10 == 0
+                implicitWidth: outerRadius * 0.02
+                antialiasing: true
+                implicitHeight: outerRadius * 0.06
+                color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
+            }
+            //! [tickmark]
+
+            //! [minorTickmark]
+            minorTickmark: Rectangle {
+                visible: styleData.value < 80
+                implicitWidth: outerRadius * 0.01
+                antialiasing: true
+                implicitHeight: outerRadius * 0.03
+                color: "#e5e5e5"
+            }
+            //! [minorTickmark]
+
+            //! [tickmarkLabel]
+            tickmarkLabel:  Text {
+                font.pixelSize: Math.max(6, outerRadius * 0.1)
+                text: styleData.value
+                color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
+                antialiasing: true
+            }
+            //! [tickmarkLabel]
+
+            //! [needle]
+            needle: Rectangle {
+                y: outerRadius * 0.15
+                implicitWidth: outerRadius * 0.03
+                implicitHeight: outerRadius * 0.9
+                antialiasing: true
+                color: "#e5e5e5"
+            }
+            //! [needle]
+
+            //! [foreground]
+            foreground: Item {
+                Rectangle {
+                    width: outerRadius * 0.2
+                    height: width
+                    radius: width / 2
+                    color: "#e5e5e5"
+                    anchors.centerIn: parent
+                }
+            }
+            //! [foreground]
+        }
+    }
+}
+//! [range]