141 views
in GUI Development by

I designed an animation to make the label of guage move evenly on the guage according to the ring path.

The final effect is to change from Figure 1 to Figure 2.

I made some changes based on the dashboard demo.

I rewrote the refresh test to get the effect I wanted.

The code for refresh is as follows:

// Calculate the angle between each text label
var float deltaAngle = ( endAngle - startAngle ) / float( labels.size - 1 );

var Effects::FloatEffect TempFloatEffect;

// Adjust and position each text label
var int32 i = 0;
while ( i < labels.size )
{
  if ( Clockwise )
  {
    labels[ i ].String = string( i * increment );

    aAngleArray[i] = startAngle + float(i) * deltaAngle;
    
    TempFloatEffect = new Effects::FloatEffect;
    if( i == 0)
    {
      TempFloatEffect.Value1 = aAngleArray[0];
      TempFloatEffect.Value2 = aAngleArray[0];
    }
    else
    {
      TempFloatEffect.Value1 = aAngleArray[i-1];
      TempFloatEffect.Value2 = aAngleArray[i];         
    }
    
    TempFloatEffect.OnAnimate = Animation1;  
    TempFloatEffect.CycleDuration = 500;
    postsignal TempFloatEffect.StartEffect;
  }
  else
  {
    labels[ i ].String = string( (labels.size - i - 1) * increment );

    aAngleArray[i] = startAngle + float(i) * deltaAngle;
    
    TempFloatEffect = new Effects::FloatEffect;
    if( i == 0)
    {
      TempFloatEffect.Value1 = aAngleArray[0];
      TempFloatEffect.Value2 = aAngleArray[0];
    }
    else
    {
      TempFloatEffect.Value1 = aAngleArray[0];
      TempFloatEffect.Value2 = aAngleArray[i];         
    }                                                                          
    
    TempFloatEffect.OnAnimate = Animation1; 
    TempFloatEffect.NoOfCycles = 1;  
    TempFloatEffect.CycleDuration = 500;
    postsignal TempFloatEffect.StartEffect;
  }
  
  i = i + 1;
}

The code for Animation1 is shown below:

sender; /* the method is called from the sender object */
var Effects::FloatEffect TempFloatEffect = (Effects::FloatEffect) sender;

var float deltaAngle = ( endAngle - startAngle ) / float( labels.size - 1 );
var int32 i = ( TempFloatEffect.Value2 - startAngle ) / deltaAngle;

var int32 dist = radius;
var int32 offset = 0;
var float aAngle = TempFloatEffect.Value;

if( i == labels.size - 1)
  Text.String = string(aAngle);

// Calculate the label center
var point labelCenter = point( labels[ i ].Bounds.w / 2, labels[ i ].Bounds.h / 2 );


if ( aAngle > 360.0 )
  aAngle = aAngle - 360.0;

// Draw values which can be divided by 20 with 10px less distance to the center
//if ( aNumber % 20 == 0 )
//  aDistance = aDistance - 10;

// Add more distance for number with three or more digits
//if ( aNumber / 100 >= 1 )
//  offset = 0;
//else
//  offset = 10;

// Calculate the position of the label
labels[ i ].Bounds.origin = Bounds.orect.center - labelCenter
  + point( int32( float( radius + offset ) * math_cos( aAngle - 90.0 ) ), int32( float( radius + offset ) * math_sin( aAngle - 90.0 ) ) );

After my test, I found that the position of label was inconsistent each time (as shown in Figure  3 and Figure 4). The final reason is that when FloatEffect ends, FloatEffect.Value is not equal to FloatEffect.Value2 and is a random value.

So my question is does my animation idea work and what is the reason for this random effect?

1 Answer

0 votes
by
Hello DongdongA,

first of all, it would be good to know which version of Embedded Wizard you are using.

Then, can you please provide a reduced example demonstrating the issue - then it will be easier to give you a helpful feedback.

Thanks and best regards,

Manfred.
by

Hello,

This is the version I'm using.

by

Hello DongdongA,

Then, can you please provide a reduced example demonstrating the issue - then it will be easier to give you a helpful feedback.

Thanks and best regards,
Manfred.

by

Hello Manfred,

I have uploaded the example (but not sure if it was successful).

https://ask.embedded-wizard.de/?qa=blob&qa_blobid=15319092414080215712

If example is uploaded successfully, go to RightGaugeLabels, Start Prototyper in the Application unit and you might see the problem I'm talking about.

 

by
Hello DongdongA,

thanks for the provided examples.

The issue you observed in your application is caused by the fact that the FloatEffects are created and stored in a local variable without keeping any reference to the instances of your float effects.

Put an array of Effects::FloatEffect into your class Application::RightGaugeLabels and store the created instances of the float effects within the array. Then the animations are working as expected and the end value is reached.

Does it work?

Best regards,

Manfred.
by
Hello Manfred,

Thank you very much. It worked very well.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...