cancel
Showing results for 
Search instead for 
Did you mean: 

draggable circle

JNova.0
Associate III

Hello,
I would like to enable the dragged of the circle only in the horizontal direction for a customized container on which I only have a circle. I would also need to limit the left and right "stop" when dragging. I set up draggable and I can move the circle freely. Can you advise? Can I find a exaample somewhere?

Thank you
JN

1 ACCEPTED SOLUTION

Accepted Solutions
JTP1
Lead

Hello

One way to achieve this functionalilty is to little bit expand the draggable- class.

Locate folder \Middlewares\ST\touchgfx\framework\include\touchgfx\mixins\ and backup Draggable.hpp (rename to Draggable.hpp.org for example or copy it somewhere).

Then download the attached  Draggable.hpp file and place it to the \Middlewares\ST\touchgfx\framework\include\touchgfx\mixins\ - folder.

In this extended versio there is new function setDragLimits(int xStart,int yStart,int xEnd,int yEnd) which can be used for setting limits to any widget or container. Few examples:

void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();

    // set rectangle area for circle1 dragging
    // to coordinates (100,50)....(440,90)
    circle1.setDragLimits(100,50,440,90);

    // Set area for box1 dragging. Because 
    // Xstart and Xend are same, only vertical movement is allowed
    box1.setDragLimits(600,50,600,380);

   // Set area for logoContaine dragging. Because 
   // Ystart and Yend are same, only horizontal movement is allowed
   logoContainer1.setDragLimits(50,250,450,250);

    // uncomment this would deactivate drag limiting
    //circle1.resetDragLimits();
}

Here are the settings for widgets and container:

JTP1_0-1706205785053.png

Please note that 'draggable' must selected, otherwise setDragLimits-function call will give error. LogoContainer is simple container which holds just one image.

Modified draggable.hpp file is tested in 4.21.4 but it should work also in later versions. Its also possible to manually make same changes and additions to your local file.

Btw it was nice to notice that now it is possbile to upload 250 Megabyte attachments so also example project is also attached. You can run the simulator.exe from folder LimitedDrag\TouchGFX\build\bin directly or then open it to TGFX Designer. Note also that if you use later tool than 4.21.4, migrating will create new touchgfx- folders under  Middlewares\ST\ so you must then copy once more the modified Draggable.hpp to the \mixins\ folder.

Hope this helps somebody. Maybe something like this would be nice feature in future TGFX releases.

Br JTP

 

 

View solution in original post

1 REPLY 1
JTP1
Lead

Hello

One way to achieve this functionalilty is to little bit expand the draggable- class.

Locate folder \Middlewares\ST\touchgfx\framework\include\touchgfx\mixins\ and backup Draggable.hpp (rename to Draggable.hpp.org for example or copy it somewhere).

Then download the attached  Draggable.hpp file and place it to the \Middlewares\ST\touchgfx\framework\include\touchgfx\mixins\ - folder.

In this extended versio there is new function setDragLimits(int xStart,int yStart,int xEnd,int yEnd) which can be used for setting limits to any widget or container. Few examples:

void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();

    // set rectangle area for circle1 dragging
    // to coordinates (100,50)....(440,90)
    circle1.setDragLimits(100,50,440,90);

    // Set area for box1 dragging. Because 
    // Xstart and Xend are same, only vertical movement is allowed
    box1.setDragLimits(600,50,600,380);

   // Set area for logoContaine dragging. Because 
   // Ystart and Yend are same, only horizontal movement is allowed
   logoContainer1.setDragLimits(50,250,450,250);

    // uncomment this would deactivate drag limiting
    //circle1.resetDragLimits();
}

Here are the settings for widgets and container:

JTP1_0-1706205785053.png

Please note that 'draggable' must selected, otherwise setDragLimits-function call will give error. LogoContainer is simple container which holds just one image.

Modified draggable.hpp file is tested in 4.21.4 but it should work also in later versions. Its also possible to manually make same changes and additions to your local file.

Btw it was nice to notice that now it is possbile to upload 250 Megabyte attachments so also example project is also attached. You can run the simulator.exe from folder LimitedDrag\TouchGFX\build\bin directly or then open it to TGFX Designer. Note also that if you use later tool than 4.21.4, migrating will create new touchgfx- folders under  Middlewares\ST\ so you must then copy once more the modified Draggable.hpp to the \mixins\ folder.

Hope this helps somebody. Maybe something like this would be nice feature in future TGFX releases.

Br JTP