Draggable object in RexHMI

stepan.ozana · 2017-02-19 09:43:50

Hi,
how can I let some object set a value of rex variable by moving the object? In other words, I am trying to construct an object with similar behavior like a slider, but with customized graphic layout. For example, let's suppose visualization of inverted pendulum with 2 rectangles, representing a cart and a rod.
I'd like to be able to drag either a cart or a rod by a mouse or by hand using a touchscreen, and thus simulate a disturbance signal in a control circuit during regulation in upright position. Or, I'd like to drag a rod from lower position into upright position and let it swing down with no control.
I think these objects must have VALUE property, and connection type must be WRITE. But so far I have no success with this.
I am only able to create objects, apply CTRL+G,CTRL+J, and check TranslateX property, having no idea what to do next.
Thank you for feedback, Stepan.

Last edited by stepan.ozana (2017-02-19 09:47:56)

osevera · 2017-02-23 18:29:17

Hello Stepan,
current version of the HMI does not allow to create writable components using our extensions. But luckily you can always create custom components.

The HMI component consist from two parts a SVG group (specially tagged using XML attributes) and javascript function which controls it. I prepare simple example for you. You can find rectangle with text field. When the mouse is move in the rectangle the current coordinates are displayed on the screen and written to the REX.

Feel free to ask if not understandable.

Custom_HMI_component

Ondrej

stepan.ozana · 2017-02-24 10:25:25

Thank you very much for a great example!

stepan.ozana · 2017-03-01 07:47:32

Hi,
I got stuck with this issue.

I managed to create custom button according tutorial mentioned in other topic on this forum, with several adjustments regarding 2.50.1 upgrade.

I cannot make the button moving according mouse position. I tried to apply both non-jquery and jquery approaches, but still no success.
It either does not move or not work at all.

Preferrably I'd like to bundle UDRAGGABLE plugin mentioned here, because Draggable functionality seems to be very easy to be applied in HTML code:

https://plugins.jquery.com/udraggable/

I added jquery.udraggable.js and other needed js to MySvgLib\js\ and compile svg source, but visualization is not working.

Other link I have tried:
http://stackoverflow.com/questions/8569 … -jquery-ui

Here is the entire project:

https://www.rexcontrols.cz/forum/img/me … button.zip

Thak you for possible feedback.

Stepan

Last edited by stepan.ozana (2017-03-01 07:49:13)

osevera · 2017-03-17 16:29:44

Dear Stepan,

so far I was able to enable dragging using this tutorial http://stackoverflow.com/a/6166850.

I just add following code to your example

$(obj.element) // enable dragging on the whole SVG group <g> element
      .draggable()
      .bind('mousedown', function(event, ui){
        // bring target to front
        $(event.target.parentElement).append( event.target );
      })
      .bind('drag', function(event, ui){
        // update coordinates manually, since top/left style props don't work on SVG
        //event.target.setAttribute('x', ui.position.left);
        //event.target.setAttribute('y', ui.position.top);
        event.target.setAttribute('transform','translate('+ui.position.left+','+ui.position.top+')');
      });

But the button moved with small offset (need adjustment)

Then I tried the library but currently with no success.

Just minor note, if you want to use custom library, you have to add it in the JS directory in you case the rex_moving_button\svghmisrc\MySvgLib\js\jquery.udraggable.js.

REXYGEN Community Forum

Announcement

REXYGEN forum has been moved. This one is closed.
Head over to the new REXYGEN Community Forum at https://forum.rexygen.com.

Looking forward to meeting you there!

#1 2017-02-19 09:43:50