Animation using Rotary Knob

Question

Hello,

I want to create an animation using different image frames. I want to use the 7 different images(all the images are the circles with different diameters and colors).

When I rotate my rotary knob to the left the smallest circle will appear as I rotate to the maximum steps, it ends with the last biggest circle which should look like an animation ( the knob rotation shows all the circles from small to the bigger and vise versa) using the rotary knob.

I need to know that the EW has the possibility to design such a Graphical interface? If yes then what aspect I should consider while designing. I am sure that I need to program in Chora but I am not sure how can I take the reference of the rotary steps as a variable in the programs.

Looking forward to the expert response.

Thanks.

Answer 1

Hello Jain Klotz,

I'm not sure whether I understand your application case. Is the position of the Image static or does it rotate with the Rotary Knob thumb? If it is static, you can simply react to the OnChange signal sent from the Rotary Knob widget. In the slot method associated to OnChange you evaluate the CurrentValue of the Rotary Knob and depending on it you select the respective frame number. Assuming, the value range for the Rotary Knob is 0..100 and you want select from 7 frames, forllowing could be the code for the OnChange slot method:

ImageView.FrameNumber = ( RotaryKnob.CurrentValue * 7 ) / 100;

In turn, if the Image is intended to follow the position of the thumb, please read the section Arrange other views on the Rotary Knob's thumb. It explains how you can arrange/update other views (e.g. an Image) according to the actual rotation position. In this way, you can enhance the Riotary Knob by additional decoration, etc.

If the above mentioned Rotary Knob widget is not flexible enough for your application case, you can use the Component Templates. These are intended to be modified and enhanced according to your particular needs. Compared with the ready-to-use- widgets, they are very flexible. On the other hand, you need to take care of the their adaptation. In this case I would create a new GUI component based on the Rotary Know template and implement there the special functionality of your Rotary Knob widget variant.

Does it help you?

Best regards

Paul Banach

Comments

Thank you, Pual

Yes, the position of the image is static but the size of the images is different than each other. Is it not possible to select the separate 7 Bitmaps via OnChange than selecting frame numbers from one Bitmap?

For example, I have the 7 bitmaps where I have saved the 7 different sizes of circle images. I want to call all seven circles one by one as I rotate the rotary and it would look like an animation.

---

Hello Jain Klotz,

in such case you will have 7 different bitmap resources (e.g. Bmp0 .. Bmp6). Then use a switch-case statement to select the respective bitmap resource and assign it to the Image view. For example:

switch (( RotaryKnob.CurrentValue * 7 ) / 100 )
{
  case 0 : ImageView.Bitmap = Example::Bmp0;
  case 1 : ImageView.Bitmap = Example::Bmp1;
  case 2 : ImageView.Bitmap = Example::Bmp2;
  ..
  case 6 : ImageView.Bitmap = Example::Bmp6;
  default :;
}

Does it help you?

Best regards

Paul Banach

---

Hello Paul,

Thank you for your reply,

I have already tried with the switch case with different bitmaps which works perfectly for the LeftTrack Rotation. I am having a problem when I rotate the rotary backward (Right track) I can not remove the Bitmaps.

so, When I rotate clockwise It shows the 7 different bitmaps and when I rotate anticlockwise It should disappear the all images one by one.

---

Hi,

I have misunderstood your application case. Now I understand, that there are 7 images at all and all can be shown simultanoulsy, right? The more the user drags on the Rotary Knob the more images is shown. In such case I would arrange the 7 image views and assign to each view the respecitive bitmap per default. Then configure all image views to be hidden per default by setting their property Visible to the value false. Then in the slot method associated to the property OnChange of the Rotary Knob widget just switch on/off the visible state of the views. For example:

var int32 noOfImages = ( RotaryKnob.CurrentValue * 7 ) / 100;

ImageView0.Visible = noOfImages >= 0;
ImageView1.Visible = noOfImages >= 1;
ImageView2.Visible = noOfImages >= 2;
...
ImageView6.Visible = noOfImages >= 6;

Does it work for you?

Best regards

Paul Banach