Sophie

Sophie

distrib > Mageia > 7 > armv7hl > media > core-updates > by-pkgid > 845e36bb3ecce380666d628d88446962 > files > 248

qtdatavis3d5-doc-5.12.6-1.mga7.noarch.rpm

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- draggableaxes.qdoc -->
  <title>Axis Range Dragging With Labels Example | Qt Data Visualization 5.12.6</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td >Qt 5.12</td><td ><a href="qtdatavisualization-index.html">Qt Data Visualization</a></td><td >Axis Range Dragging With Labels Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtdatavisualization-index.html">Qt Data Visualization | Commercial or GPLv3</a></td>
        </tr></table>
      </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="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#replacing-default-input-handling">Replacing Default Input Handling</a></li>
<li class="level1"><a href="#extending-mouse-event-handling">Extending Mouse Event Handling</a></li>
<li class="level1"><a href="#implementing-axis-dragging">Implementing Axis Dragging</a></li>
<li class="level1"><a href="#example-contents">Example Contents</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Axis Range Dragging With Labels Example</h1>
<span class="subtitle"></span>
<!-- $$$draggableaxes-brief -->
<p>Implementing a custom input handler to support axis dragging.</p>
<!-- @@@draggableaxes -->
<!-- $$$draggableaxes-description -->
<div class="descr"> <a name="details"></a>
<p>The Axis Range Dragging example shows how to customize the 3D graph controls in a widget application to allow changing axis ranges by clicking on an axis label and dragging. This is done by implementing a custom input handler to react to selection signals emitted from the graph.</p>
<p class="centerAlign"><img src="images/draggableaxes-example.png" alt="" /></p><a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<a name="replacing-default-input-handling"></a>
<h2 id="replacing-default-input-handling">Replacing Default Input Handling</h2>
<p>The default input handling mechanism is replaced by setting the active input handler of <a href="q3dscatter.html">Q3DScatter</a> to <code>AxesInputHandler</code> that implements the custom behavior:</p>
<pre class="cpp">

  <span class="comment">// Give ownership of the handler to the graph and make it the active handler</span>
  m_graph<span class="operator">-</span><span class="operator">&gt;</span>setActiveInputHandler(m_inputHandler);

</pre>
<p><code>m_inputHandler</code> was initialized in the constructor:</p>
<pre class="cpp">

  m_inputHandler(<span class="keyword">new</span> AxesInputHandler(scatter))<span class="operator">,</span>

</pre>
<p>We will also need the pointers to the axes, so we will pass them to our input handler too:</p>
<pre class="cpp">

  <span class="comment">// Give our axes to the input handler</span>
  m_inputHandler<span class="operator">-</span><span class="operator">&gt;</span>setAxes(m_graph<span class="operator">-</span><span class="operator">&gt;</span>axisX()<span class="operator">,</span> m_graph<span class="operator">-</span><span class="operator">&gt;</span>axisZ()<span class="operator">,</span> m_graph<span class="operator">-</span><span class="operator">&gt;</span>axisY());

</pre>
<a name="extending-mouse-event-handling"></a>
<h2 id="extending-mouse-event-handling">Extending Mouse Event Handling</h2>
<p>First of all, we inherited our input handler from <a href="q3dinputhandler.html">Q3DInputHandler</a> instead of <a href="qabstract3dinputhandler.html">QAbstract3DInputHandler</a>. The reason for doing this is to keep all the functionality of the default input handling, and to add our own functionality on top of it:</p>
<pre class="cpp">

  <span class="keyword">class</span> AxesInputHandler : <span class="keyword">public</span> <span class="type"><a href="q3dinputhandler.html">Q3DInputHandler</a></span>

</pre>
<p>We start extending the default functionality by re-implementing some of the mouse events. Let's start with <code>mousePressEvent</code>. We'll just add button pressed flag for left mouse button into it, and keep the rest of the default functionality:</p>
<pre class="cpp">

  <span class="type">void</span> AxesInputHandler<span class="operator">::</span>mousePressEvent(<span class="type">QMouseEvent</span> <span class="operator">*</span>event<span class="operator">,</span> <span class="keyword">const</span> <span class="type">QPoint</span> <span class="operator">&amp;</span>mousePos)
  {
      <span class="type"><a href="q3dinputhandler.html">Q3DInputHandler</a></span><span class="operator">::</span>mousePressEvent(event<span class="operator">,</span> mousePos);
      <span class="keyword">if</span> (<span class="type">Qt</span><span class="operator">::</span>LeftButton <span class="operator">=</span><span class="operator">=</span> event<span class="operator">-</span><span class="operator">&gt;</span>button())
          m_mousePressed <span class="operator">=</span> <span class="keyword">true</span>;
  }

</pre>
<p>We'll need to modify <code>mouseReleaseEvent</code> too to clear the flag and reset the internal state:</p>
<pre class="cpp">

  <span class="type">void</span> AxesInputHandler<span class="operator">::</span>mouseReleaseEvent(<span class="type">QMouseEvent</span> <span class="operator">*</span>event<span class="operator">,</span> <span class="keyword">const</span> <span class="type">QPoint</span> <span class="operator">&amp;</span>mousePos)
  {
      <span class="type"><a href="q3dinputhandler.html">Q3DInputHandler</a></span><span class="operator">::</span>mouseReleaseEvent(event<span class="operator">,</span> mousePos);
      m_mousePressed <span class="operator">=</span> <span class="keyword">false</span>;
      m_state <span class="operator">=</span> StateNormal;
  }

</pre>
<p>Then we'll modify <code>mouseMoveEvent</code>. Here we check if the <code>m_mousePressed</code> is <code>true</code> and our internal state is something other than <code>StateNormal</code>. If so, we'll set the input positions for mouse move distance calculations and call the axis dragging function (see <a href="qtdatavisualization-draggableaxes-example.html#implementing-axis-dragging">Implementing axis dragging</a> for details):</p>
<pre class="cpp">

  <span class="type">void</span> AxesInputHandler<span class="operator">::</span>mouseMoveEvent(<span class="type">QMouseEvent</span> <span class="operator">*</span>event<span class="operator">,</span> <span class="keyword">const</span> <span class="type">QPoint</span> <span class="operator">&amp;</span>mousePos)
  {
      <span class="comment">// Check if we're trying to drag axis label</span>
      <span class="keyword">if</span> (m_mousePressed <span class="operator">&amp;</span><span class="operator">&amp;</span> m_state <span class="operator">!</span><span class="operator">=</span> StateNormal) {
          setPreviousInputPos(inputPosition());
          setInputPosition(mousePos);
          handleAxisDragging();
      } <span class="keyword">else</span> {
          <span class="type"><a href="q3dinputhandler.html">Q3DInputHandler</a></span><span class="operator">::</span>mouseMoveEvent(event<span class="operator">,</span> mousePos);
      }
  }

</pre>
<p>We don't need to change the functionality of mouse wheel, so we will not re-implement that.</p>
<a name="implementing-axis-dragging"></a>
<h2 id="implementing-axis-dragging">Implementing Axis Dragging</h2>
<p>First we need to start listening to the selection signal from the graph. We do that in the constructor, and connect it to <code>handleElementSelected</code> method:</p>
<pre class="cpp">

  <span class="comment">// Connect to the item selection signal from graph</span>
  connect(graph<span class="operator">,</span> <span class="operator">&amp;</span>QAbstract3DGraph<span class="operator">::</span>selectedElementChanged<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span>
          <span class="operator">&amp;</span>AxesInputHandler<span class="operator">::</span>handleElementSelected);

</pre>
<p>In <code>handleElementSelected</code> we check the type of the selection and set our internal state based on it:</p>
<pre class="cpp">

  <span class="keyword">switch</span> (type) {
  <span class="keyword">case</span> QAbstract3DGraph<span class="operator">::</span>ElementAxisXLabel:
      m_state <span class="operator">=</span> StateDraggingX;
      <span class="keyword">break</span>;
  <span class="keyword">case</span> QAbstract3DGraph<span class="operator">::</span>ElementAxisYLabel:
      m_state <span class="operator">=</span> StateDraggingY;
      <span class="keyword">break</span>;
  <span class="keyword">case</span> QAbstract3DGraph<span class="operator">::</span>ElementAxisZLabel:
      m_state <span class="operator">=</span> StateDraggingZ;
      <span class="keyword">break</span>;
  <span class="keyword">default</span>:
      m_state <span class="operator">=</span> StateNormal;
      <span class="keyword">break</span>;
  }

</pre>
<p>The actual dragging logic is implemented in <code>handleAxisDragging</code> method, which we call from <code>mouseMoveEvent</code> in case the required conditions are met:</p>
<pre class="cpp">

  <span class="comment">// Check if we're trying to drag axis label</span>
  <span class="keyword">if</span> (m_mousePressed <span class="operator">&amp;</span><span class="operator">&amp;</span> m_state <span class="operator">!</span><span class="operator">=</span> StateNormal) {

</pre>
<p>In <code>handleAxisDragging</code> we first get the scene orientation from our active camera:</p>
<pre class="cpp">

  <span class="comment">// Get scene orientation from active camera</span>
  <span class="type">float</span> xRotation <span class="operator">=</span> scene()<span class="operator">-</span><span class="operator">&gt;</span>activeCamera()<span class="operator">-</span><span class="operator">&gt;</span>xRotation();
  <span class="type">float</span> yRotation <span class="operator">=</span> scene()<span class="operator">-</span><span class="operator">&gt;</span>activeCamera()<span class="operator">-</span><span class="operator">&gt;</span>yRotation();

</pre>
<p>Then we calculate the modifiers to mouse move direction based on the orientation:</p>
<pre class="cpp">

  <span class="comment">// Calculate directional drag multipliers based on rotation</span>
  <span class="type">float</span> xMulX <span class="operator">=</span> qCos(qDegreesToRadians(xRotation));
  <span class="type">float</span> xMulY <span class="operator">=</span> qSin(qDegreesToRadians(xRotation));
  <span class="type">float</span> zMulX <span class="operator">=</span> qSin(qDegreesToRadians(xRotation));
  <span class="type">float</span> zMulY <span class="operator">=</span> qCos(qDegreesToRadians(xRotation));

</pre>
<p>After that, we calculate the mouse movement, and modify it based on the y rotation of the camera:</p>
<pre class="cpp">

  <span class="comment">// Get the drag amount</span>
  <span class="type">QPoint</span> move <span class="operator">=</span> inputPosition() <span class="operator">-</span> previousInputPos();

  <span class="comment">// Flip the effect of y movement if we're viewing from below</span>
  <span class="type">float</span> yMove <span class="operator">=</span> (yRotation <span class="operator">&lt;</span> <span class="number">0</span>) <span class="operator">?</span> <span class="operator">-</span>move<span class="operator">.</span>y() : move<span class="operator">.</span>y();

</pre>
<p>And finally apply the moved distance to the correct axis:</p>
<pre class="cpp">

  <span class="comment">// Adjust axes</span>
  <span class="keyword">switch</span> (m_state) {
  <span class="keyword">case</span> StateDraggingX:
      distance <span class="operator">=</span> (move<span class="operator">.</span>x() <span class="operator">*</span> xMulX <span class="operator">-</span> yMove <span class="operator">*</span> xMulY) <span class="operator">/</span> m_speedModifier;
      m_axisX<span class="operator">-</span><span class="operator">&gt;</span>setRange(m_axisX<span class="operator">-</span><span class="operator">&gt;</span>min() <span class="operator">-</span> distance<span class="operator">,</span> m_axisX<span class="operator">-</span><span class="operator">&gt;</span>max() <span class="operator">-</span> distance);
      <span class="keyword">break</span>;
  <span class="keyword">case</span> StateDraggingZ:
      distance <span class="operator">=</span> (move<span class="operator">.</span>x() <span class="operator">*</span> zMulX <span class="operator">+</span> yMove <span class="operator">*</span> zMulY) <span class="operator">/</span> m_speedModifier;
      m_axisZ<span class="operator">-</span><span class="operator">&gt;</span>setRange(m_axisZ<span class="operator">-</span><span class="operator">&gt;</span>min() <span class="operator">+</span> distance<span class="operator">,</span> m_axisZ<span class="operator">-</span><span class="operator">&gt;</span>max() <span class="operator">+</span> distance);
      <span class="keyword">break</span>;
  <span class="keyword">case</span> StateDraggingY:
      distance <span class="operator">=</span> move<span class="operator">.</span>y() <span class="operator">/</span> m_speedModifier; <span class="comment">// No need to use adjusted y move here</span>
      m_axisY<span class="operator">-</span><span class="operator">&gt;</span>setRange(m_axisY<span class="operator">-</span><span class="operator">&gt;</span>min() <span class="operator">+</span> distance<span class="operator">,</span> m_axisY<span class="operator">-</span><span class="operator">&gt;</span>max() <span class="operator">+</span> distance);
      <span class="keyword">break</span>;
  <span class="keyword">default</span>:
      <span class="keyword">break</span>;
  }

</pre>
<p>We also have a function for setting the dragging speed:</p>
<pre class="cpp">

  <span class="keyword">inline</span> <span class="type">void</span> setDragSpeedModifier(<span class="type">float</span> modifier) { m_speedModifier <span class="operator">=</span> modifier; }

</pre>
<p>This is needed, as the mouse movement distance is absolute (in screen coordinates) and we need to adjust it to the axis range. The larger the value, the slower the dragging will be. Note that on this example we do not take scene zoom level into account when determining the drag speed, so you'll notice changes in the range adjustment as you change the zoom level.</p>
<p>The modifier could be adjusted automatically based on the axis range and camera zoom level, but we'll leave implementing that as an excercise for the reader.</p>
<a name="example-contents"></a>
<h2 id="example-contents">Example Contents</h2>
<p>Files:</p>
<ul>
<li><a href="qtdatavisualization-draggableaxes-axesinputhandler-cpp.html">draggableaxes/axesinputhandler.cpp</a></li>
<li><a href="qtdatavisualization-draggableaxes-axesinputhandler-h.html">draggableaxes/axesinputhandler.h</a></li>
<li><a href="qtdatavisualization-draggableaxes-data-cpp.html">draggableaxes/data.cpp</a></li>
<li><a href="qtdatavisualization-draggableaxes-data-h.html">draggableaxes/data.h</a></li>
<li><a href="qtdatavisualization-draggableaxes-draggableaxes-pro.html">draggableaxes/draggableaxes.pro</a></li>
<li><a href="qtdatavisualization-draggableaxes-main-cpp.html">draggableaxes/main.cpp</a></li>
</ul>
</div>
<!-- @@@draggableaxes -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 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>