Call us! 512-349-0334 or (877) INDUSOFT

Using Position, Zoom, and Rotate on Drawings and Pictures in InduSoft Web Studio

InduSoft Web Studio users occasionally ask us how they can display a picture or blueprint, move it, zoom in on it, and rotate it.

Using InduSoft Web Studio as your HMI makes this a simple and easy task. InduSoft Web Studio has built in animations that let you manipulate pictures and drawings not only with a mouse, but if the display for your runtime has multi-touch capabilities, these functionalities can be controlled by simple hand gestures.

In order to use demonstrate this functionality, we have created a small sample project that shows a single picture object that was added to a screen as a linked picture object. With the object still selected, simply select to the “Graphics” tab, and in the “animations” section, select the  “Rotation”, “Visibility/Position” and “Resize” animations. When they have been selected, they will remain highlighted as long as the object that they were assigned to remains in focus.

pic

 

Double click on the Linked Picture, or Right-Click on it and select “Properties” from the menu, and the “Object Properties” dialog will open. In the upper right-hand corner is a pull-down selector that allows you to configure the Linked Picture object, or any of the animations that were associated with it.  Add tags and the min and max values, positions, ranges, etc. Be sure to check the “Slider/Gesture” or “Gesture” box in each of the animations if you want to be able to use them on a multi-touch screen without a mouse.

pic1

 

Next, add two sliders, one for zoom and one for rotation, and add the value tags in the sliders and the animations. That’s all that you really need to do in order to make the animations work.

pic2

Comments are closed.