/usr/share/qt5/doc/qtquickcontrols/styling-gauge.html is in qtquickcontrols5-doc-html 5.5.1-1ubuntu1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- styling-gauge.qdoc -->
<title>Styling Gauge | Qt Quick Controls 5.5</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.5</li>
<li><a href="qtquickcontrols-index.html">Qt Quick Controls</a></li>
<li>Styling Gauge</li>
<li id="buildversion">Qt 5.5.1 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level2"><a href="#the-value-bar-component">The Value Bar Component</a></li>
<li class="level2"><a href="#the-foreground-component">The Foreground Component</a></li>
<li class="level2"><a href="#the-tickmark-component">The Tickmark Component</a></li>
<li class="level2"><a href="#the-minor-tickmark-component">The Minor Tickmark Component</a></li>
<li class="level2"><a href="#adjusting-font-size">Adjusting Font Size</a></li>
<li class="level2"><a href="#complete-source-code">Complete Source Code</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Styling Gauge</h1>
<span class="subtitle"></span>
<!-- $$$styling-gauge.html-description -->
<div class="descr"> <a name="details"></a>
<p>As <a href="qml-qtquick-controls-styles-gaugestyle.html">GaugeStyle</a>'s documentation adequately covers common use cases, this tutorial will cover a different scenario: one where the gauge's tickmarks cover the value bar, instead of being aligned to the left or right of it.</p>
<a name="styling-gauge-valuebar"></a><a name="the-value-bar-component"></a>
<h3 >The Value Bar Component</h3>
<p>The <a href="qml-qtquick-controls-styles-gaugestyle.html#valueBar-prop">valueBar</a> component is resized according to the gauge's value; if the value is low, the bar will be small, and vice versa.</p>
<p>Starting from the default style, we'll change the color of the value bar to orange, and increase its width slightly:</p>
<pre class="qml"><span class="name">valueBar</span>: <span class="name">Rectangle</span> {
<span class="name">color</span>: <span class="string">"#e34c22"</span>
<span class="name">implicitWidth</span>: <span class="number">28</span>
}</pre>
<p class="centerAlign"><img src="images/styling-gauge-valueBar.png" alt="" /></p><p>As mentioned in the documentation for <a href="qml-qtquick-controls-styles-gaugestyle.html">GaugeStyle</a>, <code>implicitWidth</code> needs to be set when defining your own value bar.</p>
<a name="styling-gauge-foreground"></a><a name="the-foreground-component"></a>
<h3 >The Foreground Component</h3>
<p>The <a href="qml-qtquick-controls-styles-gaugestyle.html#foreground-prop">foreground</a> component covers the full width and height of the value bar, even when the value bar is not at its highest. By default, the foreground component provides a "sheen". We'll choose to discard this, and leave it empty instead:</p>
<pre class="qml"><span class="name">foreground</span>: <span class="number">null</span></pre>
<p class="centerAlign"><img src="images/styling-gauge-foreground.png" alt="" /></p><a name="styling-gauge-tickmark"></a><a name="the-tickmark-component"></a>
<h3 >The Tickmark Component</h3>
<p>The <a href="qml-qtquick-controls-styles-gaugestyle.html#tickmark-prop">tickmark</a> component sits to the left or right of the value bar, depending on the control's tickmarkAlignment. In order to have the tickmarks cover the width of the value bar instead, we need to do two things:</p>
<ol class="1">
<li>Remove the space the tickmarks previously assumed so that there is just enough space for margins between the tickmarks and value bar.</li>
<li>Position the tickmarks according to the control's orientation and tickmark alignment.</li>
</ol>
<pre class="qml"><span class="name">tickmark</span>: <span class="name">Item</span> {
<span class="name">implicitWidth</span>: <span class="number">8</span>
<span class="name">implicitHeight</span>: <span class="number">4</span>
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="name">control</span>.<span class="name">tickmarkAlignment</span> <span class="operator">===</span> <span class="name">Qt</span>.<span class="name">AlignLeft</span>
<span class="operator">||</span> <span class="name">control</span>.<span class="name">tickmarkAlignment</span> <span class="operator">===</span> <span class="name">Qt</span>.<span class="name">AlignTop</span> ? <span class="name">parent</span>.<span class="name">implicitWidth</span> : -<span class="number">28</span>
<span class="name">width</span>: <span class="number">28</span>
<span class="name">height</span>: <span class="name">parent</span>.<span class="name">height</span>
<span class="name">color</span>: <span class="string">"#ffffff"</span>
}
}</pre>
<p>In this case we chose <code>8</code> pixel margins, so we set the <code>implicitWidth</code> of the tickmarks to that.</p>
<p>We account for every possible orientation and tickmark alignment, something that is not necessary if the gauge will only ever have one orientation and alignment. For example, if the gauge will always be of a vertical orientation and the tickmarks left-aligned, then it is enough to set the <code>x</code> property of the <code>Rectangle</code> to the following:</p>
<pre class="cpp">x: parent<span class="operator">.</span>implicitWidth</pre>
<p>The value bar is <code>28</code> pixels wide, so we give the same width to our tickmarks so that they cover the width of it.</p>
<p class="centerAlign"><img src="images/styling-gauge-tickmark.png" alt="" /></p><a name="styling-gauge-minortickmark"></a><a name="the-minor-tickmark-component"></a>
<h3 >The Minor Tickmark Component</h3>
<p>The <a href="qml-qtquick-controls-styles-gaugestyle.html#minorTickmark-prop">minorTickmark</a> component is almost identical to its larger counterpart, except that its width does not affect the layout of the gauge's components. We'll do similar adjustments to the ones in the previous section - the only difference being the height:</p>
<pre class="qml"><span class="name">minorTickmark</span>: <span class="name">Item</span> {
<span class="name">implicitWidth</span>: <span class="number">8</span>
<span class="name">implicitHeight</span>: <span class="number">2</span>
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="name">control</span>.<span class="name">tickmarkAlignment</span> <span class="operator">===</span> <span class="name">Qt</span>.<span class="name">AlignLeft</span>
<span class="operator">||</span> <span class="name">control</span>.<span class="name">tickmarkAlignment</span> <span class="operator">===</span> <span class="name">Qt</span>.<span class="name">AlignTop</span> ? <span class="name">parent</span>.<span class="name">implicitWidth</span> : -<span class="number">28</span>
<span class="name">width</span>: <span class="number">28</span>
<span class="name">height</span>: <span class="name">parent</span>.<span class="name">height</span>
<span class="name">color</span>: <span class="string">"#ffffff"</span>
}
}</pre>
<p class="centerAlign"><img src="images/styling-gauge-minorTickmark.png" alt="" /></p><a name="styling-gauge-font-size"></a><a name="adjusting-font-size"></a>
<h3 >Adjusting Font Size</h3>
<p>Finally, we increase the font size to <code>15</code> pixels:</p>
<pre class="qml"><span class="name">font</span>.pixelSize: <span class="number">15</span></pre>
<p class="centerAlign"><img src="images/styling-gauge-font-size.png" alt="" /></p><a name="styling-gauge-complete"></a><a name="complete-source-code"></a>
<h3 >Complete Source Code</h3>
<pre class="qml">import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">100</span>
<span class="name">height</span>: <span class="number">220</span>
<span class="name">color</span>: <span class="string">"#494d53"</span>
<span class="type">Gauge</span> {
<span class="name">value</span>: <span class="number">50</span>
<span class="name">tickmarkStepSize</span>: <span class="number">20</span>
<span class="name">minorTickmarkCount</span>: <span class="number">1</span>
<span class="name">font</span>.pixelSize: <span class="number">15</span>
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">anchors</span>.horizontalCenterOffset: -<span class="number">4</span>
<span class="name">style</span>: <span class="name">GaugeStyle</span> {
<span class="name">valueBar</span>: <span class="name">Rectangle</span> {
<span class="name">color</span>: <span class="string">"#e34c22"</span>
<span class="name">implicitWidth</span>: <span class="number">28</span>
}
<span class="name">foreground</span>: <span class="number">null</span>
<span class="name">tickmark</span>: <span class="name">Item</span> {
<span class="name">implicitWidth</span>: <span class="number">8</span>
<span class="name">implicitHeight</span>: <span class="number">4</span>
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="name">control</span>.<span class="name">tickmarkAlignment</span> <span class="operator">===</span> <span class="name">Qt</span>.<span class="name">AlignLeft</span>
<span class="operator">||</span> <span class="name">control</span>.<span class="name">tickmarkAlignment</span> <span class="operator">===</span> <span class="name">Qt</span>.<span class="name">AlignTop</span> ? <span class="name">parent</span>.<span class="name">implicitWidth</span> : -<span class="number">28</span>
<span class="name">width</span>: <span class="number">28</span>
<span class="name">height</span>: <span class="name">parent</span>.<span class="name">height</span>
<span class="name">color</span>: <span class="string">"#ffffff"</span>
}
}
<span class="name">minorTickmark</span>: <span class="name">Item</span> {
<span class="name">implicitWidth</span>: <span class="number">8</span>
<span class="name">implicitHeight</span>: <span class="number">2</span>
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="name">control</span>.<span class="name">tickmarkAlignment</span> <span class="operator">===</span> <span class="name">Qt</span>.<span class="name">AlignLeft</span>
<span class="operator">||</span> <span class="name">control</span>.<span class="name">tickmarkAlignment</span> <span class="operator">===</span> <span class="name">Qt</span>.<span class="name">AlignTop</span> ? <span class="name">parent</span>.<span class="name">implicitWidth</span> : -<span class="number">28</span>
<span class="name">width</span>: <span class="number">28</span>
<span class="name">height</span>: <span class="name">parent</span>.<span class="name">height</span>
<span class="name">color</span>: <span class="string">"#ffffff"</span>
}
}
}
}
}</pre>
</div>
<!-- @@@styling-gauge.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|