Graphics

 View Only
  • 1.  Drag / move a Dashboard component

    Posted 03-26-2024 15:47

    Hi. I'm making a custom Dashboard panel to manage football teams' lineups in XPression. I'm trying to make a court graphic with players on it and move them to set the lineup.
    My question is if there is a way to make components of the Dashboard draggable/movable so that I can pass its coordinates (relatives X/Y positions), through Datalinq, to the XP scene. E.g. a button, a choice dropdown, a text label, etc.
    Thanks

    #DashBoard #XPression



    ------------------------------
    Nicolás Noé
    ------------------------------



  • 2.  RE: Drag / move a Dashboard component

    Posted 04-09-2024 11:09

    Here I found an example:

    <abs bottom="0" contexttype="opengear" left="0" right="0" top="0">
       <meta>
          <ogscript handles="onmousedown" targetid="move-label">var size = ogscript.getSize('move-label');
    if (event.getX() &lt; size.width - 10 &amp;&amp; event.y &lt; size.height - 10)
    {
       ogscript.putObject('mode', 'move');
       ogscript.putObject('position', ogscript.getPosition('move-label'));
       ogscript.putObject('offsetX', event.x);
       ogscript.putObject('offsetY', event.y);
    }
    else
    {
       ogscript.putObject('mode', 'size');
    }</ogscript>
          <ogscript handles="ondrag" targetid="move-label">if (ogscript.getObject('mode') == 'size')
    {
       ogscript.setSize('move-label', event.getX(), event.getY());
    }
    else if (ogscript.getObject('mode') == 'move')
    {
       var origin = ogscript.getObject('position');
       var offsetX = ogscript.getObject('offsetX');
       var offsetY = ogscript.getObject('offsetY');
       ogscript.reposition('move-label', origin.x + event.x - offsetX, origin.y + event.y - offsetY);
       ogscript.putObject('position', ogscript.getPosition('move-label'));
    }</ogscript>
       </meta>
       <label height="60" left="40" name="Moving and Resizing using Click and Drag" style="txt-align:west;size:Bigger;" top="40" width="620"/>
       <label height="20" left="40" name="Click and drag the box to move or resize it." style="txt-align:west;" top="100" width="1100"/>
       <abs height="116" id="move-label" left="30" style="bdr:etched;bg#navigationbg;" top="330" width="215">
          <label bottom="6" left="4" name="&lt;html&gt;&lt;center&gt;Click and drag in the square to move it&lt;br/&gt;Click and drag on the bottom right corner to resize.&lt;/center&gt;&lt;/html&gt;" right="3" style="txt-align:center;" top="5"/>
       </abs>
       <abs left="633" top="371"/>
    </abs>
    


    ------------------------------
    Nicolás Noé
    ------------------------------