How do you modify the size and position of a shape dynamically?

EasyBuilder Pro Q&A
How do you modify the size and position of a shape dynamically?
none 0.0 0
1
  • HMI Model: cMT3162x
  • EasyBuilder Pro Version: 6.08
  • Serial Number or supplier: Not handy
  1. I would like to position an object (shape) dynamically. I can’t see how to do this in macro.
  2. I would like to size the shape dynamically. I can’t see how to do this in macro.
2

Hi @cncgeorge,

Please follow the steps below to position & scale an object dynamically:

  1. Within the “Object” tab, in the “Illustration” section, select “Animation”.

  2. After selecting “Animation”, select “Moving/Rotating Shape”.
    image

  3. Select the number of states for your object, and the scaling ratio for whichever state you would like to dynamically change the size and shape of.

  4. Adjust the X or Y axis to dynamically position the object.

  5. Update the “Mode” in the “Rotate” section to “Rotate w/ scaling”.
    image

  6. Within the object’s properties, go to the “Shape” tab.

  7. Select “Picture Library” to access the “Picture Manager” and choose the states for your object.
    image

  8. Configure the addresses that you will be using to dynamically change the position & state.
    image

  9. Now, using the addresses you have just configured, you will be able to position & scale an object dynamically.

I’ve created a demo project that shows the result of the instructions above. I’ve also included the functionality to rotate objects.

Also, here’s a helpful video on how to dynamically position an object.

3

This is very helpful, it solved the positioning problem.
Adjusting x and y dimensions independently are still an issue. the scale resolution is .1 increments so I am able to scale square items nicely. So converting a 1x1 inch shape to a 1x1.2 inch shape is perplexing me.

4

Hi @cncgeorge,
The functionality you are requesting would require the creation of a JavaScript object. We don’t have a demo prepared for you now, but we may have one in the future.

5

Great, I will review the java script documentation to see what I can do. If you have any example code you can share that would be great.
George

6

Hi @cncgeorge,

Here is a demo in which you can modify the position, size, and color of a shape created within a JS object: Link. When you have time, please review this demo and let us know if you have any questions.

7

Brendon,
This has been super helpful. I am able to size and position one object in my project. I have created multiple objects with the subscriptions and I am only able to see the one object. I was assuming that when I changed the values in the subscribed object they would respond. Would I be able to use an array of objects to solve for this?

8

I see the example provided was adjusting the canvas not the object. Will look at how to change the object not the canvas. I don’t see any documentation for arrays in the SDK. Open for links to review.

9

Hi @cncgeorge,

For information related to arrays in JavaScript, please see mozilla or Oracle documentation. In general, an array can be declared as:
var arr = new Array();
Here is a link to a project that allows the creation and retention of multiple shape objects: Link. When you have time, please review this project and let me know if you have any questions.

Note: Within the project mentioned above, the object index should be defined before issuing a command.