137 lines
8.0 KiB
HTML
137 lines
8.0 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" />
|
|
<!-- inquickdesigner.qdoc -->
|
|
<title>Use in Qt Quick Designer | 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>Use in Qt Quick Designer</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="use-in-quickdesigner.html#setup-qt-quick-designer">Setup Qt Quick Designer</a></li>
|
|
<li class="level2"><a href="use-in-quickdesigner.html#macos-and-linux">macOS and Linux</a></li>
|
|
<li class="level2"><a href="use-in-quickdesigner.html#windows">Windows</a></li>
|
|
<li class="level1"><a href="use-in-quickdesigner.html#using-the-designer">Using the designer</a></li>
|
|
<li class="level1"><a href="use-in-quickdesigner.html#what-is-not-working">What is not working</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="sidebar-content" id="sidebar-content"></div></div>
|
|
<div class="context">
|
|
<h1 class="title">Use in Qt Quick Designer</h1>
|
|
<span class="subtitle"></span>
|
|
<!-- $$$use-in-quickdesigner.html-description -->
|
|
<div class="descr"> <a name="details"></a>
|
|
<a name="setup-qt-quick-designer"></a>
|
|
<h2 id="setup-qt-quick-designer">Setup Qt Quick Designer</h2>
|
|
<p>Unlike the Qt UI Designer, Qt Quick Designer is deeply integrated in Qt Creator. This has one advantage that one can switch to edit mode to fine tune the components.</p>
|
|
<p>The following setup is not necessary for the bundled binary package from http://epics.web.psi.ch/software/CSDataQuick</p>
|
|
<a name="macos-and-linux"></a>
|
|
<h3 >macOS and Linux</h3>
|
|
<p>The CSDataQuick module must be in the import path before launching Qt Creator.</p>
|
|
<pre class="cpp">$ <span class="keyword">export</span> QML_IMPORT_PATH<span class="operator">=</span>CSDataQuick<span class="operator">-</span>build<span class="operator">/</span>qml</pre>
|
|
<p>And after you have created your own collection of UI components, you could add them to this path as well. Imagine in a collaboraton environment, everyone could create device components and install them into a central location, e.g. /net/shared/qml/. To reuse these components, it is sufficient to add this central location to the path.</p>
|
|
<pre class="cpp">$ <span class="keyword">export</span> QML_IMPORT_PATH<span class="operator">=</span>$QML_IMPORT_PATH:<span class="operator">/</span>net<span class="operator">/</span>shared<span class="operator">/</span>qml</pre>
|
|
<p>The designer works by creating invisible background renders (qmlpuppet). For modules with C++ plugins, like CSDataQuick, the qmlpuppet must be rebuilt with the same Qt version as the plugin. To enable this, go to menu <i>Tools</i> -> <i>Options</i>, select <i>Qt Quick</i> from the left list, then select <i>Qt Quick Designer</i> tab, in the <i>QML Enumlation Layer</i> group, select <i>Use QML emulation layer that is built by the selected Qt</i>.</p>
|
|
<p class="centerAlign"><img src="images/config-qmldesigner.png" alt=""Configure Quick Designer"" /></p><a name="windows"></a>
|
|
<h3 >Windows</h3>
|
|
<p>On Windows the situation is a lot more subtle. The safest approach is to build against the same Qt version as the Qt Creator. For example, Qt Creator 4.4 uses Qt 5.9.1 msvc2015 64bit.</p>
|
|
<p>In addition, add the <i>bin</i> to PATH. Suppose the build path is <code>C:\CSDataQuick-build</code></p>
|
|
<pre class="cpp"><span class="operator">></span> set PATH<span class="operator">=</span>C:\CSDataQuick<span class="operator">-</span>build\bin;C:\epics\base<span class="operator">-</span><span class="number">3.14.12</span>\bin\windows<span class="operator">-</span>x64;<span class="operator">%</span>PATH<span class="operator">%</span>
|
|
<span class="operator">></span> set QML_IMPORT_PATH<span class="operator">=</span>C:\CSDataQuick<span class="operator">-</span>build\qml
|
|
<span class="operator">></span> C:\<span class="type"><a href="http://doc.qt.io/qt-5/qt.html">Qt</a></span>\Tools\<span class="type">QtCreator</span>\bin\qtcreator<span class="operator">.</span>exe</pre>
|
|
<p>The long answer is that, Qt Creator needs to know which Qt version to be used to create <i>qml2puppet</i>. One can create an empty project, using the same Qt version used to build CSDataQuick. And then open/create qml displays from there.</p>
|
|
<a name="using-the-designer"></a>
|
|
<h2 id="using-the-designer">Using the designer</h2>
|
|
<p>Start with an empty template file, <i>mydevice.qml</i></p>
|
|
<pre class="cpp">import <span class="type"><a href="http://doc.qt.io/qt-5/qtquick-qmlmodule.html">QtQuick</a></span> <span class="number">2.5</span>
|
|
import CSDataQuick<span class="operator">.</span>Components <span class="number">1.0</span>
|
|
|
|
BaseWindow {
|
|
}</pre>
|
|
<p>Open it with qtcreator,</p>
|
|
<pre class="cpp">$ qtcreator mydevice<span class="operator">.</span>qml</pre>
|
|
<p>New qml files created from Qt Creator have <i>Item</i> as the root item. Change manually the root item to <i>BaseWindow</i>.</p>
|
|
<p>The following video shows show to switch between edit and design modes.</p>
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/3RrCNwAp318" frameborder="0" allowfullscreen></iframe>
|
|
<a name="what-is-not-working"></a>
|
|
<h2 id="what-is-not-working">What is not working</h2>
|
|
<ul>
|
|
<li>The Display, Command, StripChar and CartesianPlot editor: if the model is given of <code>ListModel</code> form, it cannot be edited in designer.<pre class="cpp">model: ListModel {
|
|
ListElement {
|
|
label: <span class="char">'list'</span>
|
|
command: <span class="char">'ls'</span>
|
|
}
|
|
}</pre>
|
|
<p>The workaround is to use JSON object array form.</p>
|
|
<pre class="cpp">model: <span class="operator">[</span>
|
|
{
|
|
<span class="char">'label'</span>: <span class="char">'list'</span><span class="operator">,</span>
|
|
<span class="char">'command'</span>: <span class="char">'ls'</span>
|
|
}
|
|
<span class="operator">]</span></pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- @@@use-in-quickdesigner.html -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">Copyright (C) 2012-2021 Xiaoqiang Wang, Paul Scherrer Institute.</div>
|
|
</body>
|
|
</html>
|