187 lines
9.4 KiB
HTML
187 lines
9.4 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<!-- CSBar.qml -->
|
|
<title>CSBar QML Type | CSDataQuick Documentation 1.2</title>
|
|
<link rel="stylesheet" type="text/css" href="style/online.css" />
|
|
<script type="text/javascript">
|
|
(function (i, s, o, g, r, a, m) {
|
|
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
|
|
(i[r].q = i[r].q || []).push(arguments)
|
|
}, i[r].l = 1 * new Date(); a = s.createElement(o),
|
|
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
|
|
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
|
|
|
ga('create', 'UA-24645639-4', 'qt.io');
|
|
ga('set', 'forceSSL', true);
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="header" id="header">
|
|
<header id="navbar" class="">
|
|
</header>
|
|
</div>
|
|
<div class="main">
|
|
<div class="main-rounded">
|
|
<div class="navigationbar">
|
|
<ul class="sub-navigation">
|
|
<li><a href="../../CSDataQuick.html">Home</a></li>
|
|
<li><a href="../docs.html" class="active">Documentation</a></li>
|
|
<li><a href="http://github.com/xiaoqiangwang/CSDataQuick/">Code</a></li>
|
|
<li><a href="https://github.com/xiaoqiangwang/CSDataQuick/issues/">Bug Reports</a></li>
|
|
</ul>
|
|
<div id="main_title_bar">
|
|
<h1>CSDataQuick Documentation</h1>
|
|
<div class="search_bar">
|
|
<script>
|
|
(function() {
|
|
var cx = '001693341472456439948:u9v0snkru3q';
|
|
var gcse = document.createElement('script');
|
|
gcse.type = 'text/javascript';
|
|
gcse.async = true;
|
|
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
|
|
var s = document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(gcse, s);
|
|
})();
|
|
</script>
|
|
<gcse:searchbox-only resultsUrl="search-results.html"></gcse:searchbox-only>
|
|
</div></div>
|
|
<ul>
|
|
<li><a href="index.html">CSDataQuick Documentation</a></li>
|
|
<li><a href="csdataquick-qmlmodules.html">QML Types</a></li>
|
|
<li>CSBar QML Type</li>
|
|
</ul>
|
|
</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="level1"><a href="qml-csdataquick-components-csbar.html#properties">Properties</a></li>
|
|
<li class="level1"><a href="qml-csdataquick-components-csbar.html#details">Detailed Description</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="sidebar-content" id="sidebar-content"></div></div>
|
|
<div class="context">
|
|
<h1 class="title">CSBar QML Type</h1>
|
|
<span class="subtitle"></span>
|
|
<!-- $$$CSBar-brief -->
|
|
<p>Display a bar that expands or contracts when value changes. <a href="qml-csdataquick-components-csbar.html#details">More...</a></p>
|
|
<!-- @@@CSBar -->
|
|
<div class="table"><table class="alignedsummary">
|
|
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import CSDataQuick.Components 1.0</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Inherits:</td><td class="memItemRight bottomAlign"> <p><a href="qml-csdataquick-components-csmonitor.html">CSMonitor</a></p>
|
|
</td></tr></table></div><ul>
|
|
<li><a href="qml-csdataquick-components-csbar-members.html">List of all members, including inherited members</a></li>
|
|
</ul>
|
|
<a name="properties"></a>
|
|
<h2 id="properties">Properties</h2>
|
|
<ul>
|
|
<li class="fn"><b><b><a href="qml-csdataquick-components-csbar.html#direction-prop">direction</a></b></b> : enumeration</li>
|
|
<li class="fn"><b><b><a href="qml-csdataquick-components-csbar.html#fillMode-prop">fillMode</a></b></b> : enumeration</li>
|
|
<li class="fn"><b><b><a href="qml-csdataquick-components-csbar.html#label-prop">label</a></b></b> : enumeration</li>
|
|
<li class="fn"><b><b><a href="qml-csdataquick-components-csbar.html#labelStyle-prop">labelStyle</a></b></b> : int</li>
|
|
</ul>
|
|
<!-- $$$CSBar-description -->
|
|
<a name="details"></a>
|
|
<h2 id="details">Detailed Description</h2>
|
|
<p>The Bar Monitor can have several decorations as specified by the <a href="qml-csdataquick-components-csbar.html#labelStyle-prop">labelStyle</a>. It can go up, down, left, or right, as specified by the <a href="qml-csdataquick-components-csbar.html#direction-prop">direction</a> property. It can start from the edge or from the center, as specified by the <a href="qml-csdataquick-components-csbar.html#fillMode-prop">fillMode</a> property. The Bar Monitor with the <a href="qml-csdataquick-components-csbar.html#labelStyle-prop">labelStyle</a> set to LabelStyle.None can be used to make bar graphs.</p>
|
|
<pre class="qml"> <span class="type"><a href="qml-csdataquick-components-csbar.html">CSBar</a></span> {
|
|
<span class="name">source</span>: <span class="string">'catest'</span>
|
|
<span class="name">labelStyle</span>: <span class="name">LabelStyle</span>.<span class="name">Outline</span>
|
|
<span class="name">direction</span>: <span class="name">Direction</span>.<span class="name">Up</span>
|
|
}</pre>
|
|
<p class="centerAlign"><img src="images/bar.png" alt="" /></p><!-- @@@CSBar -->
|
|
<h2>Property Documentation</h2>
|
|
<!-- $$$direction -->
|
|
<div class="qmlitem"><div class="qmlproto">
|
|
<div class="table"><table class="qmlname">
|
|
<tr valign="top" class="odd" id="direction-prop">
|
|
<td class="tblQmlPropNode"><p>
|
|
<a name="direction-prop"></a><span class="name">direction</span> : <span class="type">enumeration</span></p></td></tr>
|
|
</table></div>
|
|
</div><div class="qmldoc"><p>Indicate the maximumValue position.</p>
|
|
<ul>
|
|
<li>Direction.Up</li>
|
|
<li>Direction.Right</li>
|
|
<li>Direction.Down</li>
|
|
<li>Direction.Left</li>
|
|
</ul>
|
|
<p>By Direction.Up, the minimumValue is at the bottom and maximumValue at the top. And by Direction.Right, the minimumValue is at the left and maximumValue at the right. The other two reverse the direction.</p>
|
|
</div></div><!-- @@@direction -->
|
|
<br/>
|
|
<!-- $$$fillMode -->
|
|
<div class="qmlitem"><div class="qmlproto">
|
|
<div class="table"><table class="qmlname">
|
|
<tr valign="top" class="odd" id="fillMode-prop">
|
|
<td class="tblQmlPropNode"><p>
|
|
<a name="fillMode-prop"></a><span class="name">fillMode</span> : <span class="type">enumeration</span></p></td></tr>
|
|
</table></div>
|
|
</div><div class="qmldoc"><p>Set the bar start postion.</p>
|
|
<ul>
|
|
<li>FillMode.FromEdge - the default</li>
|
|
<li>FillMode.FromCenter</li>
|
|
</ul>
|
|
<p>If the fill mode is FillMode.Edge, the bar starts from where the minimum value is. And the length, in percentage, is calculated by (value - minimumValue) / (maximumValue - minimumValue).</p>
|
|
<p>In FillMode.Center mode, the bar starts from where the middle point is, i.e. (maximumValue - minimumValue) / 2. And the length, in percentage, is calculated by (value - middleValue) / (maximumValue - minimumValue) / 2. If the value is less than middle point, the bar is towards minimum value.</p>
|
|
<pre class="qml"><span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-row.html">Row</a></span> {
|
|
<span class="type"><a href="qml-csdataquick-components-csbar.html">CSBar</a></span> {
|
|
<span class="name">source</span>: <span class="string">'catest'</span>
|
|
<span class="name">labelStyle</span>: <span class="name">LabelStyle</span>.<span class="name">Outline</span>
|
|
<span class="name">fillMode</span>: <span class="name">FillMode</span>.<span class="name">FromEdge</span>
|
|
}
|
|
<span class="type"><a href="qml-csdataquick-components-csbar.html">CSBar</a></span> {
|
|
<span class="name">source</span>: <span class="string">'catest'</span>
|
|
<span class="name">labelStyle</span>: <span class="name">LabelStyle</span>.<span class="name">Outline</span>
|
|
<span class="name">fillMode</span>: <span class="name">FillMode</span>.<span class="name">FromCenter</span>
|
|
}
|
|
}</pre>
|
|
<p class="centerAlign"><img src="images/bar-fillMode.png" alt="" /></p></div></div><!-- @@@fillMode -->
|
|
<br/>
|
|
<!-- $$$label -->
|
|
<div class="qmlitem"><div class="qmlproto">
|
|
<div class="table"><table class="qmlname">
|
|
<tr valign="top" class="odd" id="label-prop">
|
|
<td class="tblQmlPropNode"><p>
|
|
<a name="label-prop"></a><span class="name">label</span> : <span class="type">enumeration</span></p></td></tr>
|
|
</table></div>
|
|
</div><div class="qmldoc"><p>The decoration mode.</p>
|
|
<ul>
|
|
<li>LabelStyle.Frame - No extra features.</li>
|
|
<li>LabelStyle.None - Same as LabelStyle.Frame.</li>
|
|
<li>LabelStyle.Outline - Show the limits.</li>
|
|
<li>LabelStyle.Limits - Show limits and a box for the value.</li>
|
|
<li>LabelStyle.Channel - In addition to LabelStyle.Limits, show the process variable name.</li>
|
|
</ul>
|
|
</div></div><!-- @@@label -->
|
|
<br/>
|
|
<!-- $$$labelStyle -->
|
|
<div class="qmlitem"><div class="qmlproto">
|
|
<div class="table"><table class="qmlname">
|
|
<tr valign="top" class="odd" id="labelStyle-prop">
|
|
<td class="tblQmlPropNode"><p>
|
|
<a name="labelStyle-prop"></a><span class="name">labelStyle</span> : <span class="type">int</span></p></td></tr>
|
|
</table></div>
|
|
</div><div class="qmldoc"><p>The decoration mode.</p>
|
|
<ul>
|
|
<li>LabelStyle.Frame - No extra features.</li>
|
|
<li>LabelStyle.None - Same as LabelStyle.Frame.</li>
|
|
<li>LabelStyle.Outline - Show the limits.</li>
|
|
<li>LabelStyle.Limits - Show limits and a box for the value.</li>
|
|
<li>LabelStyle.Channel - In addition to LabelStyle.Limits, show the process variable name.</li>
|
|
</ul>
|
|
</div></div><!-- @@@labelStyle -->
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">Copyright (C) 2012-2021 Xiaoqiang Wang, Paul Scherrer Institute.</div>
|
|
</body>
|
|
</html>
|