Simple animation of the screen components

[DogPlanner GSS]

Dear Developers,

Is it possible to do simple animation of the components (e.g. images)? May be floating, jumping image effect or some another motion of the components? 

It is needed to highlight screen components that can be clicked.

Thank you very much in advance.

Have a nice day.

Best regards

Dmitry

[Alan Hendry]

HI,

(Most) Native controls allow SetEnabled(false),

which should change their appearance

(according to the docs, events like ontouch will still be fired).

Or some controls have ctl.Animate(type,callback,time)

time controls the speed of animation, 

callback is a function to be invoked when animation complete)

Regards, ah

[DogPlanner GSS]

Dear Alan,

thank you very much for answer! We will try this.

Have a nice day.

Best regards

Dmitry

вторник, 14 апреля 2026 г. в 19:21:54 UTC+3, hendr...@gmail.com:

[DogPlanner GSS]

Dear Colleagues,

if someone are interested in animation e.g. buttons or images, we make the following example below.

Here function for accelerometer data acquisition is added because we can link button movement in future e.g. to the position of smartphone.

// Variables for components animation
var animationPlus = 0;
var leftCoord = 0;
var topCoord = 0;
var rightCoord = 0;
var downCoord = 0;

// Initialising variables for work with accelerometer        
sampleCount = 10;                
updateInterval = 10;  
sensorData = null;

function OnStart() {

    // Fix screen portrait
    app.SetOrientation("Portrait");

  //Create a layout with objects vertically centered
  lay = app.CreateLayout( "linear", "VCenter,FillXY" );
 
  var theme = app.CreateTheme("Light");

    theme.SetTextColor( "blue" );

    app.SetTheme( theme );
   
    btnPickDate = app.CreateImage( "Img/button_dgnz.png", 0.2,  0.1 );
    btnPickDate.SetMargins( 0.9, 0.9 );
    //btnPickDate.SetOnTouch(btn_OnTouch );
    lay.AddChild( btnPickDate );

    buttonDisp( );
   
    //Add layout to app.
app.AddLayout( lay );

accelerometerInitializing();
   
}

// Now accelerometer initialization for Step counting and
// Calculation of the walked distance
function accelerometerInitializing() {
 
    // Create and start accelerometer sensor
    snsAcc = app.CreateSensor( "Accelerometer", "Fast" );
    snsAcc.Start();
       
    // Get data
    var vals = snsAcc.GetValues();
    var series = GetSeries( sampleCount, [vals[1],vals[2],vals[3]] );
     
    // Reading accelerometer coordinates in text fields
    //txt1.SetText( txtAxis_X  + vals[1] );
    //txt2.SetText( txtAxis_Y  + vals[2] );
    //txt3.SetText( txtAxis_Z  + vals[3] );
       
    // Start updating the graph
    Update();
 }
 
 // Updating accelerometer readings
function Update() {

    // Get more data
    var vals = snsAcc.GetValues();
    var series = GetSeries( sampleCount, [vals[1],vals[2],vals[3]] );
   
    // Reading new sensors data
    let newX=Math.round(vals[1]);
    let newY=Math.round(vals[2]);
    let newZ=Math.round(vals[3]);
   
    animationPlus++;
    buttonDisp( );
   
    // Call this function again
    setTimeout( Update, updateInterval );
}

function buttonDisp( ) {

    //if(animationPlus%50==0) {
   
    //   animationPlus=0;
    //}
    app.ShowPopup( animationPlus );
    //btnPickDate = app.CreateImage( "Img/button_dgnz.png", 0.2,  animationPlus/100);
    //btnPickDate.SetMargins(animationPlus/100, animationPlus /100);
   
    let stepsQty = 10;  //in pcs
    let timeStep = 2;  // in sec
    let horizontStep = 0.005;  // in px
    let verticalStep = 0;  // in px
   
    btnPickDateAnimate( stepsQty, timeStep, horizontStep, verticalStep );
   
}

function btnPickDateAnimate( stepsQty, timeStep, horizontStep, verticalStep ) {
       
        if( animationPlus % timeStep == 0 ) {
            if( animationPlus<=stepsQty*timeStep ) {
         
                 leftCoord = leftCoord + horizontStep;
                 topCoord = topCoord + verticalStep;
                 btnPickDate.SetMargins( leftCoord, topCoord, rightCoord, downCoord );
            } else {
           
                rightCoord = rightCoord + horizontStep;
                downCoord = downCoord + verticalStep;
                btnPickDate.SetMargins( leftCoord, topCoord, rightCoord, downCoord );
       
                if( animationPlus> 2*stepsQty*timeStep) {
                    animationPlus = 0;
                    rightCoord = 0;
                    downCoord = 0;
                    leftCoord = 0;
                    topCoord = 0;                  
                }
            }
        }
       
}

// Get accumulated data series
function GetSeries( points, funcs ) {
                               
    if( typeof flt_dataStore == "undefined" ) {
       
        flt_dataStore = new Array( funcs.length );
    }
       
    var series = [];
    for( var i=0; i< funcs.length; i++ ) {
        if( !flt_dataStore[i] ) {
            ;
              flt_dataStore[i] = [];
        }

        if( flt_dataStore[i].length > sampleCount ) {
           
                flt_dataStore[i] = flt_dataStore[i].slice(1);
        }
                                                           
        var val = funcs[i];
        flt_dataStore[i].push( val );                                        
           
        var res = [];
        var len = flt_dataStore[i].length;
        for( var j = 0; j < len; j++ ) {
           
            res.push( [j-len, flt_dataStore[i][j]] )
        }
                           
       series[i] = res;
   }                            
   
   return series;
}         

Have a nice day!

Best regards

Dmitry

среда, 15 апреля 2026 г. в 12:25:47 UTC+3, DogPlanner GSS: